mirror of
https://gitlab.com/Chill-Projet/chill-bundles.git
synced 2025-06-07 18:44:08 +00:00
chill colors and buttons with bootstrap5
This commit is contained in:
parent
d016f9be86
commit
2e2eeae4f2
@ -2,19 +2,14 @@
|
|||||||
* These custom styles will override bootstrap enabled stylesheets
|
* These custom styles will override bootstrap enabled stylesheets
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
/// chill buttons
|
||||||
|
@import 'custom/_buttons';
|
||||||
|
|
||||||
/// titles
|
/// titles
|
||||||
h1, h2, .h1, .h2 {
|
h1, h2, .h1, .h2 {
|
||||||
font-weight: $headings-font-weight + 200;
|
font-weight: $headings-font-weight + 200;
|
||||||
}
|
}
|
||||||
|
|
||||||
/// buttons
|
|
||||||
.btn-success,
|
|
||||||
.btn-success:hover,
|
|
||||||
.btn-warning,
|
|
||||||
.btn-warning:hover {
|
|
||||||
color: $gray-100;
|
|
||||||
}
|
|
||||||
|
|
||||||
/// typography
|
/// typography
|
||||||
.open_sansbold {
|
.open_sansbold {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
@ -236,11 +231,11 @@ div.vertical-menu {
|
|||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
margin-top: 0.5rem;
|
margin-top: 0.5rem;
|
||||||
a.list-group-item {
|
a.list-group-item {
|
||||||
background-color: $info;
|
background-color: $chill-yellow;
|
||||||
border: 0;
|
border: 0;
|
||||||
margin-bottom: 0.25rem;
|
margin-bottom: 0.25rem;
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: shade-color($info, 5%)
|
background-color: tint-color($chill-yellow, 20%)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -0,0 +1,42 @@
|
|||||||
|
|
||||||
|
/// buttons
|
||||||
|
|
||||||
|
|
||||||
|
.btn-success,
|
||||||
|
.btn-success:hover,
|
||||||
|
.btn-warning,
|
||||||
|
.btn-warning:hover {
|
||||||
|
color: $light;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
&.btn-submit,
|
||||||
|
&.btn-save,
|
||||||
|
&.btn-create,
|
||||||
|
&.btn-new,
|
||||||
|
&.btn-duplicate,
|
||||||
|
&.btn-not-duplicate {
|
||||||
|
background-color: $chill-green;
|
||||||
|
color: $light;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.btn-reset,
|
||||||
|
&.btn-delete,
|
||||||
|
&.btn-remove {
|
||||||
|
background-color: $chill-red;
|
||||||
|
color: $light;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.btn-action,
|
||||||
|
&.btn-edit,
|
||||||
|
&.btn-update {
|
||||||
|
background-color: $chill-orange;
|
||||||
|
color: $light;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.btn-show,
|
||||||
|
&.btn-view {
|
||||||
|
background-color: $chill-blue;
|
||||||
|
color: $light;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -19,6 +19,21 @@ $gray-900: #212529 !default;
|
|||||||
$black: #111 !default;
|
$black: #111 !default;
|
||||||
// scss-docs-end gray-color-variables
|
// scss-docs-end gray-color-variables
|
||||||
|
|
||||||
|
/*
|
||||||
|
* CHILL Theme colors
|
||||||
|
* (apply chill colors, add missing colors, trust in bootstrap grey scale)
|
||||||
|
*/
|
||||||
|
// scss-docs-start color-variables
|
||||||
|
$blue: #334d5c !default;
|
||||||
|
$green: #43b29d !default;
|
||||||
|
$yellow: #eec84a !default;
|
||||||
|
$orange: #e2793d !default;
|
||||||
|
$red: #df4949 !default;
|
||||||
|
$pink: #dd506d !default;
|
||||||
|
$beige: #cabb9f !default;
|
||||||
|
// scss-docs-end color-variables
|
||||||
|
|
||||||
|
|
||||||
// fusv-disable
|
// fusv-disable
|
||||||
// scss-docs-start gray-colors-map
|
// scss-docs-start gray-colors-map
|
||||||
$grays: (
|
$grays: (
|
||||||
@ -35,70 +50,6 @@ $grays: (
|
|||||||
// scss-docs-end gray-colors-map
|
// scss-docs-end gray-colors-map
|
||||||
// fusv-enable
|
// fusv-enable
|
||||||
|
|
||||||
/*
|
|
||||||
* CHILL Theme colors
|
|
||||||
* (apply chill colors, add missing colors, trust in bootstrap grey scale)
|
|
||||||
*/
|
|
||||||
// scss-docs-start color-variables
|
|
||||||
$blue: #334d5c !default;
|
|
||||||
$green: #43b29d !default;
|
|
||||||
$yellow: #eec84a !default;
|
|
||||||
$orange: #e2793d !default;
|
|
||||||
$red: #df4949 !default;
|
|
||||||
$pink: #dd506d !default;
|
|
||||||
$green-dark: #328474 !default;
|
|
||||||
$beige: #cabb9f !default;
|
|
||||||
// scss-docs-end color-variables
|
|
||||||
|
|
||||||
|
|
||||||
// scss-docs-start colors-map
|
|
||||||
$colors: (
|
|
||||||
"blue": $blue,
|
|
||||||
"green": $green,
|
|
||||||
"yellow": $yellow,
|
|
||||||
"orange": $orange,
|
|
||||||
"red": $red,
|
|
||||||
"pink": $pink,
|
|
||||||
"green-dark": $green-dark,
|
|
||||||
"beige": $beige,
|
|
||||||
"white": $white,
|
|
||||||
"gray": $gray-600,
|
|
||||||
"gray-dark": $gray-800
|
|
||||||
) !default;
|
|
||||||
// scss-docs-end colors-map
|
|
||||||
|
|
||||||
// scss-docs-start theme-color-variables
|
|
||||||
$primary: $blue;
|
|
||||||
$secondary: $gray-200;
|
|
||||||
$success: $green;
|
|
||||||
$info: $yellow;
|
|
||||||
$warning: $orange;
|
|
||||||
$danger: $red;
|
|
||||||
$light: $gray-100;
|
|
||||||
$dark: $gray-800;
|
|
||||||
// scss-docs-end theme-color-variables
|
|
||||||
|
|
||||||
// scss-docs-start theme-colors-map
|
|
||||||
$theme-colors: (
|
|
||||||
"primary": $primary,
|
|
||||||
"secondary": $secondary,
|
|
||||||
"success": $success,
|
|
||||||
"info": $info,
|
|
||||||
"warning": $warning,
|
|
||||||
"danger": $danger,
|
|
||||||
"light": $light,
|
|
||||||
"dark": $dark
|
|
||||||
) !default;
|
|
||||||
// scss-docs-end theme-colors-map
|
|
||||||
|
|
||||||
// The contrast ratio to reach against white, to determine if color changes from "light" to "dark". Acceptable values for WCAG 2.0 are 3, 4.5 and 7.
|
|
||||||
// See https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast
|
|
||||||
$min-contrast-ratio: 4.5 !default;
|
|
||||||
|
|
||||||
// Customize the light and dark text colors for use in our color contrast function.
|
|
||||||
$color-contrast-dark: $black !default;
|
|
||||||
$color-contrast-light: $white !default;
|
|
||||||
|
|
||||||
// fusv-disable
|
// fusv-disable
|
||||||
$blue-100: tint-color($blue, 80%) !default;
|
$blue-100: tint-color($blue, 80%) !default;
|
||||||
$blue-200: tint-color($blue, 60%) !default;
|
$blue-200: tint-color($blue, 60%) !default;
|
||||||
@ -110,16 +61,6 @@ $blue-700: shade-color($blue, 40%) !default;
|
|||||||
$blue-800: shade-color($blue, 60%) !default;
|
$blue-800: shade-color($blue, 60%) !default;
|
||||||
$blue-900: shade-color($blue, 80%) !default;
|
$blue-900: shade-color($blue, 80%) !default;
|
||||||
|
|
||||||
$green-dark-100: tint-color($green-dark, 80%) !default;
|
|
||||||
$green-dark-200: tint-color($green-dark, 60%) !default;
|
|
||||||
$green-dark-300: tint-color($green-dark, 40%) !default;
|
|
||||||
$green-dark-400: tint-color($green-dark, 20%) !default;
|
|
||||||
$green-dark-500: $green-dark !default;
|
|
||||||
$green-dark-600: shade-color($green-dark, 20%) !default;
|
|
||||||
$green-dark-700: shade-color($green-dark, 40%) !default;
|
|
||||||
$green-dark-800: shade-color($green-dark, 60%) !default;
|
|
||||||
$green-dark-900: shade-color($green-dark, 80%) !default;
|
|
||||||
|
|
||||||
$beige-100: tint-color($beige, 80%) !default;
|
$beige-100: tint-color($beige, 80%) !default;
|
||||||
$beige-200: tint-color($beige, 60%) !default;
|
$beige-200: tint-color($beige, 60%) !default;
|
||||||
$beige-300: tint-color($beige, 40%) !default;
|
$beige-300: tint-color($beige, 40%) !default;
|
||||||
@ -181,6 +122,85 @@ $green-800: shade-color($green, 60%) !default;
|
|||||||
$green-900: shade-color($green, 80%) !default;
|
$green-900: shade-color($green, 80%) !default;
|
||||||
// fusv-enable
|
// fusv-enable
|
||||||
|
|
||||||
|
// scss-docs-start colors-map
|
||||||
|
$colors: (
|
||||||
|
"blue": $blue,
|
||||||
|
"green": $green,
|
||||||
|
"yellow": $yellow,
|
||||||
|
"orange": $orange,
|
||||||
|
"red": $red,
|
||||||
|
"pink": $pink,
|
||||||
|
"green-dark": $green-800,
|
||||||
|
"beige": $beige,
|
||||||
|
"white": $white,
|
||||||
|
"gray": $gray-600,
|
||||||
|
"gray-dark": $gray-800
|
||||||
|
) !default;
|
||||||
|
// scss-docs-end colors-map
|
||||||
|
|
||||||
|
// scss-docs-start theme-color-variables
|
||||||
|
$primary: $blue;
|
||||||
|
$secondary: $gray-200;
|
||||||
|
$success: $green;
|
||||||
|
$info: $yellow;
|
||||||
|
$warning: $orange;
|
||||||
|
$danger: $red;
|
||||||
|
$light: $gray-100;
|
||||||
|
$dark: $gray-800;
|
||||||
|
$chill-blue: $blue;
|
||||||
|
$chill-green: $green;
|
||||||
|
$chill-green-dark: $green-800;
|
||||||
|
$chill-orange: $orange;
|
||||||
|
$chill-yellow: $yellow;
|
||||||
|
$chill-red: $red;
|
||||||
|
$chill-beige: $beige;
|
||||||
|
$chill-pink: $pink;
|
||||||
|
$chill-gray: $gray-600;
|
||||||
|
$chill-dark-gray: $gray-800;
|
||||||
|
$chill-light-gray: $gray-200;
|
||||||
|
$chill-llight-gray: $gray-100;
|
||||||
|
// scss-docs-end theme-color-variables
|
||||||
|
|
||||||
|
|
||||||
|
// scss-docs-start theme-colors-map
|
||||||
|
$theme-colors: (
|
||||||
|
"primary": $primary,
|
||||||
|
"secondary": $secondary,
|
||||||
|
"success": $success,
|
||||||
|
"info": $info,
|
||||||
|
"warning": $warning,
|
||||||
|
"danger": $danger,
|
||||||
|
"light": $light,
|
||||||
|
"dark": $dark,
|
||||||
|
) !default;
|
||||||
|
// scss-docs-end theme-colors-map
|
||||||
|
|
||||||
|
$chill-colors: (
|
||||||
|
"chill-blue": $chill-blue,
|
||||||
|
"chill-green": $chill-green,
|
||||||
|
"chill-green-dark": $chill-green-dark,
|
||||||
|
"chill-orange": $chill-orange,
|
||||||
|
"chill-yellow": $chill-yellow,
|
||||||
|
"chill-red": $chill-red,
|
||||||
|
"chill-beige": $chill-beige,
|
||||||
|
"chill-pink": $chill-pink,
|
||||||
|
"chill-gray": $chill-gray,
|
||||||
|
"chill-dark-gray": $chill-dark-gray,
|
||||||
|
"chill-light-gray": $chill-light-gray,
|
||||||
|
"chill-llight-gray": $chill-llight-gray,
|
||||||
|
);
|
||||||
|
|
||||||
|
// Merge the maps
|
||||||
|
$theme-colors: map-merge($theme-colors, $chill-colors);
|
||||||
|
|
||||||
|
// The contrast ratio to reach against white, to determine if color changes from "light" to "dark". Acceptable values for WCAG 2.0 are 3, 4.5 and 7.
|
||||||
|
// See https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast
|
||||||
|
$min-contrast-ratio: 4.5 !default;
|
||||||
|
|
||||||
|
// Customize the light and dark text colors for use in our color contrast function.
|
||||||
|
$color-contrast-dark: $black !default;
|
||||||
|
$color-contrast-light: $white !default;
|
||||||
|
|
||||||
// Characters which are escaped by the escape-svg function
|
// Characters which are escaped by the escape-svg function
|
||||||
$escaped-characters: (
|
$escaped-characters: (
|
||||||
("<", "%3c"),
|
("<", "%3c"),
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user