summaryrefslogtreecommitdiff
path: root/src/assets/styles/bmc
diff options
context:
space:
mode:
Diffstat (limited to 'src/assets/styles/bmc')
-rw-r--r--src/assets/styles/bmc/custom/_base.scss47
-rw-r--r--src/assets/styles/bmc/custom/_buttons.scss49
-rw-r--r--src/assets/styles/bmc/custom/_forms.scss28
-rw-r--r--src/assets/styles/bmc/helpers/_colors.scss24
4 files changed, 110 insertions, 38 deletions
diff --git a/src/assets/styles/bmc/custom/_base.scss b/src/assets/styles/bmc/custom/_base.scss
index c11e046c..4e33e8ce 100644
--- a/src/assets/styles/bmc/custom/_base.scss
+++ b/src/assets/styles/bmc/custom/_base.scss
@@ -1,11 +1,13 @@
-dt,
-legend,
-label {
- color: gray("800");
- font-size: 14px;
- font-weight: 400;
- line-height: 1.4285;
-}
+// dt,
+// legend,
+// label {
+// color: gray("800");
+// font-size: 14px;
+// font-weight: 400;
+// line-height: 1.4285;
+// }
+
+
h1,
.h1 {
@@ -48,3 +50,32 @@ h6,
font-weight: 500;
line-height: 1.2857;
}
+
+.text__h1 {
+ font-family: Inter;
+ font-style: normal;
+ font-weight: bold;
+ font-size: 24px;
+ line-height: 28px;
+ color: $text-h1-color;
+ margin: 0;
+}
+
+.text-login {
+ font-family: Inter;
+ font-style: normal;
+ font-weight: 500;
+ font-size: 12px;
+ line-height: 16px;
+ color: $login-page-description-color;
+ margin: 0 0 0 15px;
+}
+
+.auth-description {
+ font-family: Inter;
+ font-style: normal;
+ font-weight: normal;
+ font-size: 12px;
+ line-height: 16px;
+ color: $login-page-description-color;
+} \ No newline at end of file
diff --git a/src/assets/styles/bmc/custom/_buttons.scss b/src/assets/styles/bmc/custom/_buttons.scss
index 2a7b8169..210aef90 100644
--- a/src/assets/styles/bmc/custom/_buttons.scss
+++ b/src/assets/styles/bmc/custom/_buttons.scss
@@ -1,13 +1,13 @@
.btn {
- padding-top: $spacer / 2;
- padding-right: $spacer;
- padding-bottom: $spacer / 2;
- padding-left: $spacer;
+ // padding-top: $spacer / 2;
+ // padding-right: $spacer;
+ // padding-bottom: $spacer / 2;
+ // padding-left: $spacer;
display: inline-flex;
align-items: center;
justify-content: space-around;
svg {
- margin-right: $spacer / 4;
+ // margin-right: $spacer / 4;
}
&:disabled {
color: gray("600");
@@ -21,11 +21,32 @@
}
.btn-primary {
- fill: currentColor;
- &:focus,
- &:not(:disabled):not(.disabled):active:focus {
- border-color: $white;
- box-shadow: inset 0 0 0 3px theme-color('primary'), inset 0 0 0 5px $white;
+ background-color: $button-colour;
+ border-radius: 8px;
+ border: none;
+ font-family: Inter;
+ font-style: normal;
+ font-weight: 600;
+ font-size: 16px;
+ line-height: 20px;
+ &:hover {
+ background-color: $button-colour-hover;
+ }
+ &:not(:disabled):not(.disabled):active:focus,
+ &:focus-visible {
+ border: none;
+ box-shadow: none;
+ background-color: $button-colour-click;
+ }
+ &:focus {
+ border: none;
+ box-shadow: none;
+ background-color: $button-colour;
+ }
+ &:active {
+ border: none;
+ box-shadow: none;
+ background-color: $button-colour;
}
}
@@ -34,7 +55,7 @@
&:focus,
&:not(:disabled):not(.disabled):active:focus {
border-color: $white;
- box-shadow: inset 0 0 0 3px theme-color('secondary'), inset 0 0 0 5px $white;
+ box-shadow: inset 0 0 0 2px theme-color('secondary');
}
}
@@ -51,9 +72,9 @@
background-color: gray("300");
}
&:focus {
- box-shadow: inset 0 0 0 2px theme-color("primary");
- color: theme-color("primary");
- outline: none;
+ // box-shadow: inset 0 0 0 2px theme-color("primary");
+ // color: theme-color("primary");
+ // outline: none;
}
&:disabled {
box-shadow: $btn-focus-box-shadow;
diff --git a/src/assets/styles/bmc/custom/_forms.scss b/src/assets/styles/bmc/custom/_forms.scss
index 428a40c2..8524f2ff 100644
--- a/src/assets/styles/bmc/custom/_forms.scss
+++ b/src/assets/styles/bmc/custom/_forms.scss
@@ -21,7 +21,7 @@
.custom-select,
.form-control,
.input-group-text {
- border-color: gray("500") !important;
+ // border-color: gray("500") !important;
background-color: gray("100");
}
@@ -31,17 +31,14 @@
border: 1px solid $primary!important;
}
&:focus {
- color: theme-color("dark");
- background-color: gray("100");
- box-shadow: inset 0 0 0 3px gray("100"), inset 0 0 0 5px $primary !important;
+ // color: theme-color("dark");
+ // background-color: gray("100");
+ // box-shadow: inset 0 0 0 3px gray("100"), inset 0 0 0 5px $primary !important;
}
&:disabled {
background-color: gray("400");
color: gray("600");
}
- &::placeholder {
- color: gray("600");
- }
&.is-invalid,
&:invalid {
border: 1px solid theme-color("danger") !important;
@@ -57,17 +54,26 @@
// Inverted form colors
.form-background {
- background-color: gray("100");
+ background-color: none;
.custom-select,
.form-control {
- background-color: $white;
+ border-radius: 8px;
+ border: none;
+ background-color: $input-background;
+ &:hover {
+ // opacity: 0.1;
+ background-color: $input-background-hover;
+ }
&:focus {
- background-color: $white;
+ border: 1px solid gray("400");
}
&:disabled {
background-color: gray("400");
color: gray("600");
}
+ &.is-valid {
+ border: 1px solid gray("400");
+ }
}
}
@@ -95,7 +101,7 @@
}
.custom-control-input:focus ~ .custom-control-label::before{
- box-shadow: 0 0 0 2px theme-color("primary");
+ // box-shadow: 0 0 0 2px theme-color("primary");
}
.custom-control-label::after {
diff --git a/src/assets/styles/bmc/helpers/_colors.scss b/src/assets/styles/bmc/helpers/_colors.scss
index cffe39dc..4e9dd738 100644
--- a/src/assets/styles/bmc/helpers/_colors.scss
+++ b/src/assets/styles/bmc/helpers/_colors.scss
@@ -1,11 +1,12 @@
// Sass Color Variables
$black: #000;
-$white: #fff;
+$white: #FFFFFF;
$blue-500: #2d60e5;
$green-500: #0a7d06;
$red-500: #da1416;
$yellow-500: #efc100;
+$dark-blue: #1A3E5B;
$gray-100: #f4f4f4;
$gray-200: #e6e6e6;
@@ -17,6 +18,7 @@ $gray-700: #666666;
$gray-800: #3f3f3f;
$gray-900: #161616;
+
// Sass Base Color Variables
$blue: $blue-500;
$green: $green-500;
@@ -26,13 +28,25 @@ $yellow: $yellow-500;
// Sass Theme Color Variables
// Can be used as variants
$danger: $red;
-$dark: $gray-900;
+$dark: $dark-blue;
$info: $blue;
-$light: $gray-100;
-$primary: $blue;
+$light: $white;
+$primary: $dark-blue;
$secondary: $gray-800;
$success: $green;
$warning: $yellow;
$loading-color: $primary;
-$navbar-color: $dark;
+$navbar-color: $primary;
+
+$login-page-description-color: rgba(12, 28, 41, 0.6);
+$text-h1-color: #0C1C29;
+
+$input-background: rgba(26, 62, 91, 0.05);
+$input-background-hover: rgba(20, 39, 53, 0.103);
+
+$button-colour: #E11717;
+$button-colour-hover: #cc1414;
+$button-colour-active: #df2323;
+$button-colour-click: rgb(114, 1, 1);
+
generated by cgit v1.2.3 (git 2.39.0) at 2024-07-01 15:00:42 +0300