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

Update color variables per updated Figma file. Add mixin for blue gradient background. Update button spinner to display white on blue background and blue on white background.

Browse source
This commit is contained in:
Bryan 2021-11-09 13:53:07 -05:00
parent 74433a5718
commit c25181797d
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