From 3f9ce4eaf391733e8769caec8da84302c012b21e Mon Sep 17 00:00:00 2001 From: Maksim Zakharov Date: Wed, 27 Apr 2022 14:59:55 +0300 Subject: restyled login page --- src/assets/styles/bmc/custom/_base.scss | 47 +++++++++++++++++++++++----- src/assets/styles/bmc/custom/_buttons.scss | 49 +++++++++++++++++++++--------- src/assets/styles/bmc/custom/_forms.scss | 28 ++++++++++------- src/assets/styles/bmc/helpers/_colors.scss | 24 ++++++++++++--- 4 files changed, 110 insertions(+), 38 deletions(-) (limited to 'src/assets/styles/bmc') 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); + -- cgit v1.2.3