jason/DigitalConsumer.FixMyGlass
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge pull request #46 from Safelite/brm-csr-116-update-color-variables

Browse source 
Update color variables per updated Figma file. Add mixin for blue gra…
This commit is contained in:
bmauger 2021-11-09 14:05:07 -05:00 committed by GitHub
commit 6cb0bdee23
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 42 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
src/styles/commonButtonStyles.scss
View file

@ -3,7 +3,7 @@
&.btn-primary { &.btn-primary {
position: relative; position: relative;
background: $blue-700; background: $blue-700;
background: linear-gradient(270deg, $blue-500 0%, $blue-700 100%); @include blue-gradient;
border: none; border: none;
border-radius: $border-radius-lg; border-radius: $border-radius-lg;
height: 48px; height: 48px;
@ -53,7 +53,7 @@
transition: all 150ms linear; transition: all 150ms linear;
&:hover { &:hover {
color: $white; color: $white;
background: linear-gradient(270deg, $blue-500 0%, $blue-700 100%); @include blue-gradient;
} }
&:focus, // Mouse, touch, stylus focus &:focus, // Mouse, touch, stylus focus
&:focus-visible { // Keyboard focus for accessibility &:focus-visible { // Keyboard focus for accessibility
@ -76,6 +76,22 @@
} }
} }
} }
&:focus:hover {
&:after {
content: url(../../assets/img/icons/button-spinner-white.svg);
position: absolute;
right: 14px;
width: 16px;
height: 16px;
margin-left: 12px;
animation: rotation 1s infinite linear;
@keyframes rotation {
100% {
transform:rotate(360deg);
}
}
}
}
} }
&:disabled { &:disabled {
background: transparent; background: transparent;

7
src/styles/commonStyles.scss
View file

@ -22,3 +22,10 @@ body {
cursor: pointer; cursor: pointer;
} }
} }
//Custom Mixins
//Blue gradient background mixin
@mixin blue-gradient {
background: linear-gradient(270deg, $blue-500 0%, $blue-700 100%);
}

34
src/styles/uxVariables.scss
View file

@ -2,7 +2,7 @@
// White/black // White/black
$white: #FFFFFF; $white: #FFFFFF;
$black: #000; $black: #000000;
// Blues // Blues
$blue-100: #E4F1F7;// Used in theme $blue-100: #E4F1F7;// Used in theme
@ -17,35 +17,35 @@ $blue-900: #002433;// Used in theme
// Reds // Reds
$red-100: #FFE6E4; $red-100: #FFE6E4;
$red-200: #FDC0BB; $red-200: #FCBFBB;
$red-300: #FB9A93; $red-300: #F89892;
$red-400: #EB5E54; $red-400: #E65C53;
$red: #DA291C;// Default Red $red: #D4281C;// Default Red
$red-600: #B0160B; $red-600: #AC160B;
$red-700: #870900; $red-700: #840900;
$red-800: #5D0600; $red-800: #5B0600;
$red-900: #330300; $red-900: #330300;
// Greens // Greens
$green-100: #E3F2EA; $green-100: #E3F2EA;
$green-200: #BCEDD4; $green-200: #BCEDD4;
$green-300: #94D7B6; $green-300: #94D7B6;
$green-400: #EB594F;// Used in theme $green-400: #5ABC8C;// Used in theme
$green-500: #2CA168; $green-500: #2CA168;
$green: #C40E01;// Default Green $green: #0C7E47;// Default Green
$green-700: #006A36; $green-700: #006A36;
$green-800: #004F28; $green-800: #004F28;
$green-900: #00331A; $green-900: #00331A;
// Yellows // Yellows
$yellow-100: #FFF5EB; $yellow-100: #FFF5EB;
$yellow-200: #FFE7C7; $yellow-200: #FFE1C6;
$yellow-300: #FFD8A1; $yellow-300: #FFCAA0;
$yellow-400: #FFB25C; $yellow-400: #F5975D;
$yellow: #F88F1C;// Default Yellow $yellow: #E86421;// Default Yellow
$yellow-600: #C76902; $yellow-600: #BB4B06;
$yellow-700: #964E00; $yellow-700: #8E3C00;
$yellow-800: #643400; $yellow-800: #602D00;
$yellow-900: #331A00; $yellow-900: #331A00;
// Grays // Grays