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

commit

Browse source
This commit is contained in:
Kulbhushan Kaushik 2022-11-14 12:37:57 -05:00
parent 7b82d05f6a
commit 02e703f395
4 changed files with 152 additions and 129 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/App.vue
View file

@ -13,4 +13,5 @@
@import "@/styles/common-typography-styles.scss"; @import "@/styles/common-typography-styles.scss";
@import "@/styles/common-error-styles.scss"; @import "@/styles/common-error-styles.scss";
@import "@/styles/common-animations.scss"; @import "@/styles/common-animations.scss";
@import "@/styles/shared-input-button-styles.scss";
</style> </style>

4
src/styles/mixins/customMixins.scss
View file

@ -4,3 +4,7 @@
@mixin blue-gradient { @mixin blue-gradient {
background: linear-gradient(270deg, $blue 0%, $blue-800 100%); background: linear-gradient(270deg, $blue 0%, $blue-800 100%);
} }
@mixin box-shadow-hover($color) {
box-shadow: 0 0 0 4px $color;
}

15
src/styles/shared-input-button-styles.scss Normal file
View file

@ -0,0 +1,15 @@
.base-input-button {
&:not(.has-error):hover {
cursor: pointer;
&.list-button,
&.list-button-horizontal,
&.list-card {
&:not(.selected) {
position: relative;
z-index: 4;
@include box-shadow-hover($blue-300);
}
}
}
}

261
src/styles/ux-variables.scss
View file

@ -1,186 +1,189 @@
//Colors //Colors
// White/black // White/black
$white: #FFFFFF; $white: #ffffff;
$black: #000000; $black: #000000;
// Blues // Blues
$blue-100: #E4F1F7;// Used in theme $blue-100: #e4f1f7; // Used in theme
$blue-200: #C1DFEE; $blue-200: #c1dfee;
$blue-300: #9FCEE6; $blue-300: #9fcee6;
$blue-400: #69ADCF;// Used in theme $blue-400: #69adcf; // Used in theme
$blue-500: #3B8FB8; $blue-500: #3b8fb8;
$blue: #1574A1;// Default Blue $blue: #1574a1; // Default Blue
$blue-700: #06577C; $blue-700: #06577c;
$blue-800: #003D58; $blue-800: #003d58;
$blue-900: #002433;// Used in theme $blue-900: #002433; // Used in theme
// Reds // Reds
$red-100: #FFE6E4; $red-100: #ffe6e4;
$red-200: #FCBFBB; $red-200: #fcbfbb;
$red-300: #F89892; $red-300: #f89892;
$red-400: #E65C53; $red-400: #e65c53;
$red: #D4281C;// Default Red $red: #d4281c; // Default Red
$red-600: #AC160B; $red-600: #ac160b;
$red-700: #840900; $red-700: #840900;
$red-800: #5B0600; $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: #5ABC8C;// Used in theme $green-400: #5abc8c; // Used in theme
$green-500: #2CA168; $green-500: #2ca168;
$green: #0C7E47;// 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: #FFE1C6; $yellow-200: #ffe1c6;
$yellow-300: #FFCAA0; $yellow-300: #ffcaa0;
$yellow-400: #F5975D; $yellow-400: #f5975d;
$yellow: #E86421;// Default Yellow $yellow: #e86421; // Default Yellow
$yellow-600: #BB4B06; $yellow-600: #bb4b06;
$yellow-700: #8E3C00; $yellow-700: #8e3c00;
$yellow-800: #602D00; $yellow-800: #602d00;
$yellow-900: #331A00; $yellow-900: #331a00;
// Grays // Grays
$gray-100: #F5F5F5;// Used in theme $gray-100: #f5f5f5; // Used in theme
$gray-200: #E3E4E4;// Used in theme $gray-200: #e3e4e4; // Used in theme
$gray-300: #D2D4D4; $gray-300: #d2d4d4;
$gray: #B0B3B3;// Default Gray $gray: #b0b3b3; // Default Gray
$gray-500: #8E9292;// Used in theme $gray-500: #8e9292; // Used in theme
$gray-550: #727676;// Used in theme $gray-550: #727676; // Used in theme
$gray-600: #4D5151;// Used in theme $gray-600: #4d5151; // Used in theme
$gray-700: #303333;// Used in theme $gray-700: #303333; // Used in theme
$gray-800: #222424;// Used in theme $gray-800: #222424; // Used in theme
$gray-900: #181A1A;// Used in theme $gray-900: #181a1a; // Used in theme
// Miscellaneous Colors // Miscellaneous Colors
$indigo: #6610f2; $indigo: #6610f2;
$purple: #6f42c1; $purple: #6f42c1;
$pink: #d63384; $pink: #d63384;
$orange: #fd7e14; $orange: #fd7e14;
$teal: #20c997; $teal: #20c997;
$cyan: #0dcaf0; $cyan: #0dcaf0;
// scss-docs-start colors-map // scss-docs-start colors-map
$colors: ( $colors: (
"blue": $blue, "blue": $blue,
"indigo": $indigo, "indigo": $indigo,
"purple": $purple, "purple": $purple,
"pink": $pink, "pink": $pink,
"red": $red, "red": $red,
"orange": $orange, "orange": $orange,
"yellow": $yellow, "yellow": $yellow,
"green": $green, "green": $green,
"teal": $teal, "teal": $teal,
"cyan": $cyan, "cyan": $cyan,
"white": $white, "white": $white,
"gray": $gray, "gray": $gray,
"gray-dark": $gray-500 "gray-dark": $gray-500,
); );
// scss-docs-start theme-color-variables // scss-docs-start theme-color-variables
$primary: $blue; $primary: $blue;
$secondary: $red; $secondary: $red;
$success: $green; $success: $green;
$info: $cyan; $info: $cyan;
$warning: $yellow; $warning: $yellow;
$danger: $red; $danger: $red;
$light: $gray-100; $light: $gray-100;
$dark: $gray-500; $dark: $gray-500;
// scss-docs-start theme-colors-map // scss-docs-start theme-colors-map
$theme-colors: ( $theme-colors: (
"primary": $primary, "primary": $primary,
"secondary": $secondary, "secondary": $secondary,
"success": $success, "success": $success,
"info": $info, "info": $info,
"warning": $warning, "warning": $warning,
"danger": $danger, "danger": $danger,
"light": $light, "light": $light,
"dark": $dark "dark": $dark,
); );
//Default font color //Default font color
$body-color: $gray-600; $body-color: $gray-600;
//Fonts //Fonts
$font-family-sans-serif: Roboto, Arial, Helvetica, sans-serif; $font-family-sans-serif: Roboto, Arial, Helvetica, sans-serif;
$font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; $font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
monospace;
// stylelint-enable value-keyword-case // stylelint-enable value-keyword-case
$font-family-base: $font-family-sans-serif; $font-family-base: $font-family-sans-serif;
$font-family-code: $font-family-monospace; $font-family-code: $font-family-monospace;
$font-size-base: 1rem; // Assumes the browser default, typically `16px` $font-size-base: 1rem; // Assumes the browser default, typically `16px`
//Custom Font size (extra small) //Custom Font size (extra small)
$font-size-xsm: $font-size-base * .75; $font-size-xsm: $font-size-base * 0.75;
$font-sizes: ( $font-sizes: (
7: $font-size-xsm 7: $font-size-xsm,
); );
//Font weight //Font weight
$font-weight-lighter: lighter; $font-weight-lighter: lighter;
$font-weight-light: 300; $font-weight-light: 300;
$font-weight-normal: 400; $font-weight-normal: 400;
$font-weight-bold: 500; $font-weight-bold: 500;
$font-weight-bolder: bolder; $font-weight-bolder: bolder;
//Headings //Headings
$h1-font-size: $font-size-base * 3; $h1-font-size: $font-size-base * 3;
$h2-font-size: $font-size-base * 2.625; $h2-font-size: $font-size-base * 2.625;
$h3-font-size: $font-size-base * 2; $h3-font-size: $font-size-base * 2;
$h4-font-size: $font-size-base * 1.625; $h4-font-size: $font-size-base * 1.625;
$h5-font-size: $font-size-base * 1.25; $h5-font-size: $font-size-base * 1.25;
$h6-font-size: $font-size-base * .875; $h6-font-size: $font-size-base * 0.875;
//Border Radius //Border Radius
// Helper classes are rounded, rounded-1, rounded-2, rounded-3 // Helper classes are rounded, rounded-1, rounded-2, rounded-3
$border-radius: .25rem; $border-radius: 0.25rem;
$border-radius-sm: .2rem; $border-radius-sm: 0.2rem;
$border-radius-lg: .5rem;//Used for buttons. Can be used for other things, of course. $border-radius-lg: 0.5rem; //Used for buttons. Can be used for other things, of course.
$border-radius-pill: 50rem; $border-radius-pill: 50rem;
//Spacing //Spacing
// 8 spacers available instead of the usual 5 // 8 spacers available instead of the usual 5
$spacer: 1rem; $spacer: 1rem;
$spacers: ( $spacers: (
0: 0, 0: 0,
1: $spacer * .25, /* 4px */ 1: $spacer * 0.25,
2: $spacer * .5, /* 8px */ /* 4px */ 2: $spacer * 0.5,
3: $spacer * .75, /* 12px */ /* 8px */ 3: $spacer * 0.75,
4: $spacer * 1, /* 16px */ /* 12px */ 4: $spacer * 1,
5: $spacer * 1.5, /* 24px */ /* 16px */ 5: $spacer * 1.5,
6: $spacer * 2, /* 32px */ /* 24px */ 6: $spacer * 2,
7: $spacer * 2.5, /* 40px */ /* 32px */ 7: $spacer * 2.5,
8: $spacer * 3, /* 48px */ /* 40px */ 8: $spacer * 3,
/* 48px */
); );
//Grid breakpoints //Grid breakpoints
$grid-breakpoints: ( $grid-breakpoints: (
xs: 0, xs: 0,
sm: 576px, sm: 576px,
md: 838px, md: 838px,
lg: 1074px, lg: 1074px,
xl: 1416px xl: 1416px,
); );
//Shadow //Shadow
$box-shadow: 0 .5rem 1rem rgba($black, .15); $box-shadow: 0 0.5rem 1rem rgba($black, 0.15);
$box-shadow-sm: 0 .125rem .25rem rgba($black, .075); $box-shadow-sm: 0 0.125rem 0.25rem rgba($black, 0.075);
$box-shadow-lg: 0 1rem 3rem rgba($black, .25);//Safelite default $box-shadow-lg: 0 1rem 3rem rgba($black, 0.25); //Safelite default
$box-shadow-inset: inset 0 1px 2px rgba($black, .075); $box-shadow-inset: inset 0 1px 2px rgba($black, 0.075);
//Alerts //Alerts
$alert-bg-scale: -90%; $alert-bg-scale: -90%;
$alert-border-scale: -100%; $alert-border-scale: -100%;
$alert-color-scale: 40%; $alert-color-scale: 40%;
//Modal animation //Modal animation
$modal-fade-transform: translate(0, 0); // This affects all [Bootstrap] modals
$modal-backdrop-opacity: 0; $modal-fade-transform: translate(0, 100%);
$modal-backdrop-opacity: 0;