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 {
position: relative;
background: $blue-700;
background: linear-gradient(270deg, $blue-500 0%, $blue-700 100%);
@include blue-gradient;
border: none;
border-radius: $border-radius-lg;
height: 48px;
@ -53,7 +53,7 @@
transition: all 150ms linear;
&:hover {
color: $white;
background: linear-gradient(270deg, $blue-500 0%, $blue-700 100%);
@include blue-gradient;
}
&:focus, // Mouse, touch, stylus focus
&: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 {
background: transparent;

7
src/styles/commonStyles.scss
View file

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