Update Essence quite a bit.
This commit is contained in:
Leo
1
.gitignore
vendored
Normal file
1
.gitignore
vendored
Normal file
@@ -0,0 +1 @@
|
||||
.idea
|
||||
@@ -1,111 +1,7 @@
|
||||
// Color system
|
||||
$white: #fff !default;
|
||||
$gray-100: #f8f9fa !default;
|
||||
$gray-200: #e9ecef !default;
|
||||
$gray-300: #dee2e6 !default;
|
||||
$gray-400: #ced4da !default;
|
||||
$gray-500: #adb5bd !default;
|
||||
$gray-600: #6c757d !default;
|
||||
$gray-700: #495057 !default;
|
||||
$gray-800: #343a40 !default;
|
||||
$gray-900: #212529 !default;
|
||||
$black: #000 !default;
|
||||
|
||||
$blue: #0d6efd !default;
|
||||
$indigo: #6610f2 !default;
|
||||
$purple: hsl(265, 60%, 50%) !default; // Chosen
|
||||
$pink: #d63384 !default;
|
||||
$red: #da0000 !default; // Chosen
|
||||
$orange: hsl(30, 100%, 50%) !default; // Chosen, the Gold color from God
|
||||
$green: hsl(134, 87%, 30%) !default; // Chosen
|
||||
$teal: #20c997 !default;
|
||||
$cyan: #0dcaf0 !default;
|
||||
|
||||
$primary: $purple !default;
|
||||
$info: $blue !default;
|
||||
$warning: $orange !default;
|
||||
|
||||
// Customize the light and dark text colors for use in our color contrast function.
|
||||
$primary-50: #f1e8ff;
|
||||
$secondary-50: #e9eff2;
|
||||
$success-50: #d9ffe1;
|
||||
$info-50: hsl(215, 100%, 97%);
|
||||
$warning-50: hsl(50, 100%, 96%);
|
||||
$danger-50: hsl(350, 100%, 96%);
|
||||
|
||||
// Custom schematic colors
|
||||
// TODO: Remove this section
|
||||
$primary-lighter: #af83ff;
|
||||
$primary-lightest: #f1e8ff;
|
||||
$secondary-lighter: #e3e6e8;
|
||||
$secondary-lightest: #e9eff2;
|
||||
$success-lighter: #42ad5b;
|
||||
$success-lightest: #d9ffe1;
|
||||
$info-lighter: #67a3fb;
|
||||
$info-lightest: hsla(215, 100%, 97%, 1);
|
||||
$warning-lighter: #ffb972;
|
||||
$warning-lightest: hsla(50, 100%, 96%, 1);
|
||||
$danger-lighter: #ff7991;
|
||||
$danger-lightest: hsl(350, 100%, 96%);
|
||||
|
||||
// Options
|
||||
$enable-shadows: true !default;
|
||||
|
||||
// Components
|
||||
$focus-ring-width: .175rem !default;
|
||||
$focus-ring-opacity: .175 !default;
|
||||
|
||||
// Body
|
||||
$body-background-color: hsl(260, 27%, 94%) !default; // Bootstrap doesn't have this variable
|
||||
|
||||
// Links
|
||||
// $link-decoration: none !default;
|
||||
$link-hover-decoration: none !default;
|
||||
|
||||
// Typography
|
||||
$font-family-sans-serif: "Roboto", sans-serif !default;
|
||||
$font-size-base: 0.9rem !default;
|
||||
$line-height-base: 1.6 !default;
|
||||
|
||||
$h1-font-size: $font-size-base * 1.6 !default;
|
||||
$h2-font-size: $font-size-base * 1.4 !default;
|
||||
$h3-font-size: $font-size-base * 1.3 !default;
|
||||
$h4-font-size: $font-size-base * 1.2 !default;
|
||||
$h5-font-size: $font-size-base * 1.1 !default;
|
||||
$h6-font-size: $font-size-base !default;
|
||||
$headings-font-weight: bold !default; // Make headings bold
|
||||
|
||||
// Tables
|
||||
$table-hover-bg-factor: .03 !default;
|
||||
|
||||
// Code
|
||||
$code-font-size: 100% !default;
|
||||
$code-color: $purple !default;
|
||||
|
||||
// Forms
|
||||
$input-bg: $white;
|
||||
$input-color: $black;
|
||||
$input-border-color: $gray-500;
|
||||
$input-transition: none;
|
||||
|
||||
// Buttons
|
||||
$btn-box-shadow: null;
|
||||
$enable-gradients: true;
|
||||
$btn-transition: none;
|
||||
|
||||
// Navs
|
||||
$nav-link-transition: none;
|
||||
|
||||
// Navbar
|
||||
$navbar-dark-color: rgba($white, .8) !default;
|
||||
$navbar-dark-hover-color: $white !default;
|
||||
|
||||
// Dropdown
|
||||
$dropdown-link-hover-bg: hsl(200 35% 95% / 1);
|
||||
|
||||
// Breadcrumb
|
||||
$breadcrumb-divider: quote(">");
|
||||
|
||||
// Cards
|
||||
$card-border-width: 0;
|
||||
$card-box-shadow: 0 .125rem .25rem rgba($black, .075);
|
||||
// Customize "very light" schematic colors
|
||||
$primary-50: hsl(265, 100%, 96%) !default; // #f1e8ff;
|
||||
$secondary-50: #e9eff2 !default;
|
||||
$success-50: hsl(134, 100%, 93%) !default;
|
||||
$info-50: hsl(215, 100%, 97%) !default;
|
||||
$warning-50: hsl(50, 100%, 96%) !default;
|
||||
$danger-50: hsl(350, 100%, 96%) !default;
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
code {
|
||||
padding: 0.2rem 0.3rem;
|
||||
background-color: $primary-lightest;
|
||||
background-color: $primary-50;
|
||||
@include border-radius($border-radius-sm);
|
||||
}
|
||||
|
||||
@@ -1,7 +1,3 @@
|
||||
body {
|
||||
background-color: $body-background-color; // Off white
|
||||
}
|
||||
|
||||
a.link-invert {
|
||||
text-decoration: none;
|
||||
|
||||
|
||||
81
scss/bootstrap/_variables.scss
Normal file
81
scss/bootstrap/_variables.scss
Normal file
@@ -0,0 +1,81 @@
|
||||
// Color system (recopied from Bootstrap)
|
||||
$white: #fff !default;
|
||||
$gray-500: #adb5bd !default;
|
||||
$black: #000 !default;
|
||||
|
||||
$blue: #0d6efd !default; // From Bootstrap
|
||||
$indigo: #6610f2 !default; // From Bootstrap
|
||||
$purple: hsl(265, 60%, 50%) !default; // Chosen
|
||||
$pink: #d63384 !default; // From Bootstrap
|
||||
$red: hsl(0, 100%, 43%) !default; // Chosen
|
||||
$orange: hsl(30, 100%, 50%) !default; // Chosen, the Gold color from God
|
||||
$green: hsl(134, 87%, 30%) !default; // Chosen
|
||||
$teal: #20c997 !default; // From Bootstrap
|
||||
$cyan: #0dcaf0 !default; // From Bootstrap
|
||||
|
||||
$primary: $purple !default;
|
||||
$info: $blue !default;
|
||||
$warning: $orange !default;
|
||||
|
||||
// Options
|
||||
$enable-shadows: true !default;
|
||||
|
||||
// Links
|
||||
$link-hover-decoration: none !default;
|
||||
|
||||
// Components
|
||||
$focus-ring-width: .175rem !default;
|
||||
$focus-ring-opacity: .175 !default;
|
||||
|
||||
// Typography
|
||||
$font-family-sans-serif: "Roboto", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
|
||||
|
||||
$font-size-base: 0.9rem !default;
|
||||
|
||||
$line-height-base: 1.6 !default;
|
||||
|
||||
$h1-font-size: $font-size-base * 1.6 !default;
|
||||
$h2-font-size: $font-size-base * 1.4 !default;
|
||||
$h3-font-size: $font-size-base * 1.3 !default;
|
||||
$h4-font-size: $font-size-base * 1.2 !default;
|
||||
$h5-font-size: $font-size-base * 1.1 !default;
|
||||
$h6-font-size: $font-size-base !default;
|
||||
|
||||
$headings-font-weight: bold !default; // Make headings bold
|
||||
|
||||
// Tables
|
||||
$table-hover-bg-factor: .03 !default;
|
||||
|
||||
// Buttons + Forms
|
||||
|
||||
// Buttons
|
||||
$btn-box-shadow: null;
|
||||
$enable-gradients: true;
|
||||
$btn-transition: none;
|
||||
|
||||
// Forms
|
||||
$input-bg: $white;
|
||||
$input-color: $black;
|
||||
$input-border-color: $gray-500;
|
||||
$input-transition: none;
|
||||
|
||||
// Navs
|
||||
$nav-link-transition: none;
|
||||
|
||||
// Navbar
|
||||
$navbar-dark-color: rgba($white, .8) !default;
|
||||
$navbar-dark-hover-color: $white !default;
|
||||
|
||||
// Dropdown
|
||||
$dropdown-link-hover-bg: hsl(200, 36%, 95%);
|
||||
|
||||
// Cards
|
||||
$card-border-width: 0;
|
||||
$card-box-shadow: 0 .125rem .25rem rgba($black, .075);
|
||||
|
||||
// Breadcrumb
|
||||
$breadcrumb-divider: quote(">");
|
||||
|
||||
// Code
|
||||
$code-font-size: 100% !default;
|
||||
$code-color: $purple !default;
|
||||
@@ -11,10 +11,15 @@
|
||||
padding: 0.5rem 1rem;
|
||||
border: 1px solid $gray-300;
|
||||
border-radius: 0.25rem;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
border-color: $gray-500;
|
||||
}
|
||||
}
|
||||
|
||||
.form-check-input[type=radio]:checked + label {
|
||||
background-color: $primary-50;
|
||||
border: 1px solid $primary;
|
||||
border-color: $primary;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -39,7 +39,7 @@
|
||||
|
||||
&:hover {
|
||||
color: $primary;
|
||||
background-color: $primary-lightest;
|
||||
background-color: $primary-50;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,9 +1,12 @@
|
||||
// Load variables
|
||||
@import 'variables';
|
||||
// Load Bootstrap variables
|
||||
@import 'bootstrap/variables';
|
||||
|
||||
// Import Bootstrap package
|
||||
@import 'bootstrap';
|
||||
|
||||
// Load Essence variables
|
||||
@import 'variables';
|
||||
|
||||
// Bootstrap components
|
||||
@import 'bootstrap/reboots';
|
||||
@import 'bootstrap/buttons';
|
||||
|
||||
Reference in New Issue
Block a user