refactor(extra-features): Refactor css
Two files: Variables.scss with bootstrap overrides and custom.scss
This commit is contained in:
@@ -0,0 +1,200 @@
|
||||
/* --------- Custom variables ----------- */
|
||||
|
||||
/* --------- Bootstrap variables ----------- */
|
||||
|
||||
/* This file gets imported into the project under abstracts/variables/_index.scss */
|
||||
/* Find bootstrap variables: https://rstudio.github.io/bslib/articles/bs4-variables/ */
|
||||
|
||||
/* Color system */
|
||||
|
||||
$white: #fff;
|
||||
$gray-100: #f8f9fa;
|
||||
$gray-200: #e9ecef;
|
||||
$gray-300: #dee2e6;
|
||||
$gray-400: #ced4da;
|
||||
$gray-500: #adb5bd;
|
||||
$gray-600: #6c757d;
|
||||
$gray-700: #495057;
|
||||
$gray-800: #343a40;
|
||||
$gray-900: #212529;
|
||||
$black: #000;
|
||||
|
||||
$blue: #007bff;
|
||||
$indigo: #6610f2;
|
||||
$purple: #6f42c1;
|
||||
$pink: #e83e8c;
|
||||
$red: #dc3545;
|
||||
$orange: #fd7e14;
|
||||
$yellow: #ffc107;
|
||||
$green: #28a745;
|
||||
$teal: #20c997;
|
||||
$cyan: #17a2b8;
|
||||
|
||||
$primary: $red;
|
||||
$secondary: $gray-600;
|
||||
$success: $green;
|
||||
$info: $cyan;
|
||||
$warning: #ff9a52;
|
||||
$danger: $red;
|
||||
$light: $gray-100;
|
||||
$dark: $gray-800;
|
||||
|
||||
/* Typography */
|
||||
|
||||
$font-family-sans-serif: "Plus Jakarta Sans", sans-serif;
|
||||
$font-family-base: $font-family-sans-serif;
|
||||
$headings-font-family: $font-family-sans-serif;
|
||||
$font-weight-base: 400;
|
||||
|
||||
$font-size-base: rem-calc(14px);
|
||||
$font-size-lg: $font-size-base * 1.125;
|
||||
$font-size-sm: $font-size-base * 0.875;
|
||||
$font-size-xs: $font-size-base * 0.6875;
|
||||
|
||||
$font-weight-lighter: 200;
|
||||
$font-weight-light: 300;
|
||||
$font-weight-normal: 400;
|
||||
$font-weight-bold: 700;
|
||||
$font-weight-bolder: 800;
|
||||
|
||||
$h1-font-size: $font-size-base * 2;
|
||||
$h2-font-size: $font-size-base * 1.75;
|
||||
$h3-font-size: $font-size-base * 1.5;
|
||||
$h4-font-size: $font-size-base * 1.25;
|
||||
$h5-font-size: $font-size-base * 1.125;
|
||||
$h6-font-size: $font-size-base;
|
||||
|
||||
$display1-size: $font-size-base * 2.5;
|
||||
$display2-size: $font-size-base * 2.25;
|
||||
$display3-size: $font-size-base * 2;
|
||||
$display4-size: $font-size-base * 1.75;
|
||||
|
||||
$display1-weight: 400;
|
||||
$display2-weight: 400;
|
||||
$display3-weight: 400;
|
||||
$display4-weight: 400;
|
||||
|
||||
$text-muted: $gray-600;
|
||||
|
||||
$paragraph-margin-bottom: rem-calc(20px);
|
||||
|
||||
$headings-margin-bottom: rem-calc(20px);
|
||||
$headings-font-weight: 700;
|
||||
$headings-line-height: 1.2;
|
||||
$headings-color: $gray-900;
|
||||
|
||||
/* Spacer */
|
||||
|
||||
$spacer: 10px;
|
||||
|
||||
/* stylelint-disable-next-line scss/dollar-variable-default */
|
||||
$spacers: (
|
||||
0: 0,
|
||||
1: $spacer * 0.5,
|
||||
2: $spacer,
|
||||
3: $spacer * 2,
|
||||
4: $spacer * 3,
|
||||
5: $spacer * 4,
|
||||
6: $spacer * 5,
|
||||
);
|
||||
|
||||
/* Components */
|
||||
|
||||
$border-width: 1px;
|
||||
$border-color: $gray-300;
|
||||
$border-radius: 0.4rem;
|
||||
$border-radius-lg: 0.4rem;
|
||||
$border-radius-sm: 0.4rem;
|
||||
|
||||
$card-border-color: $border-color;
|
||||
$table-border-color: $border-color;
|
||||
$input-border-color: $border-color;
|
||||
|
||||
$input-focus-border-color: $border-color;
|
||||
$form-check-input-border: $border-color;
|
||||
|
||||
/* Commons */
|
||||
|
||||
$body-bg: $white;
|
||||
$body-color: $gray-900;
|
||||
|
||||
/* Custom control */
|
||||
|
||||
$custom-checkbox-indicator-border-radius: 4px;
|
||||
|
||||
$custom-checkbox-indicator-icon-checked-dark-color: $black;
|
||||
$custom-checkbox-indicator-icon-checked-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'><path fill='#{$custom-checkbox-indicator-icon-checked-dark-color}' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/></svg>");
|
||||
|
||||
/* Custom radio color */
|
||||
|
||||
$custom-color-control-indicator-size: rem-calc(24px);
|
||||
$custom-color-control-indicator-size-checked-border-color: $gray-900;
|
||||
$custom-color-control-indicator-icon-size: rem-calc(18px);
|
||||
|
||||
/* Buttons */
|
||||
|
||||
$btn-font-weight: 500;
|
||||
|
||||
/* Options */
|
||||
|
||||
$enable-responsive-font-sizes: true;
|
||||
|
||||
/* Grid */
|
||||
|
||||
/* Made this more like the breakpoints used in Bootstrap 5 */
|
||||
$grid-breakpoints: (
|
||||
xs: 0,
|
||||
sm: 576px,
|
||||
md: 768px,
|
||||
lg: 992px,
|
||||
xl: 1200px,
|
||||
xxl: 1400px,
|
||||
);
|
||||
|
||||
$container-max-widths: (
|
||||
sm: 540px,
|
||||
md: 720px,
|
||||
lg: 960px,
|
||||
xl: 1140px,
|
||||
xxl: 1320px,
|
||||
);
|
||||
|
||||
$grid-columns: 12;
|
||||
$grid-gutter-width: rem-calc(20px);
|
||||
$grid-row-columns: 6;
|
||||
|
||||
/* Card */
|
||||
|
||||
$card-border-radius: $border-radius;
|
||||
$card-border-width: rem-calc(1px);
|
||||
$card-inner-border-radius: subtract($card-border-radius, $card-border-width);
|
||||
|
||||
/* RFS */
|
||||
|
||||
$rfs-breakpoint: 992;
|
||||
$rfs-breakpoint-unit: px;
|
||||
$rfs-base-font-size: 12;
|
||||
$rfs-factor: 5;
|
||||
|
||||
/* Forms */
|
||||
|
||||
$input-btn-padding-y: rem-calc(8px);
|
||||
$input-btn-padding-x: rem-calc(16px);
|
||||
|
||||
$input-btn-padding-y-sm: rem-calc(4px);
|
||||
$input-btn-padding-x-sm: rem-calc(8px);
|
||||
|
||||
$input-btn-padding-y-lg: rem-calc(14px);
|
||||
$input-btn-padding-x-lg: rem-calc(20px);
|
||||
|
||||
$input-height: rem-calc(50px);
|
||||
|
||||
/* Badge */
|
||||
|
||||
$badge-padding-y: 0.3em;
|
||||
$badge-padding-x: 0.55em;
|
||||
|
||||
/* Progress */
|
||||
|
||||
$progress-bg: $gray-200;
|
||||
$progress-height: rem-calc(8px);
|
||||
Reference in New Issue
Block a user