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
|
||||
*/
|
||||
|
||||
/// chill buttons
|
||||
@import 'custom/_buttons';
|
||||
|
||||
/// titles
|
||||
h1, h2, .h1, .h2 {
|
||||
font-weight: $headings-font-weight + 200;
|
||||
}
|
||||
|
||||
/// buttons
|
||||
.btn-success,
|
||||
.btn-success:hover,
|
||||
.btn-warning,
|
||||
.btn-warning:hover {
|
||||
color: $gray-100;
|
||||
}
|
||||
|
||||
/// typography
|
||||
.open_sansbold {
|
||||
font-weight: bold;
|
||||
@ -236,11 +231,11 @@ div.vertical-menu {
|
||||
border-radius: 0;
|
||||
margin-top: 0.5rem;
|
||||
a.list-group-item {
|
||||
background-color: $info;
|
||||
background-color: $chill-yellow;
|
||||
border: 0;
|
||||
margin-bottom: 0.25rem;
|
||||
&: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;
|
||||
// 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
|
||||
// scss-docs-start gray-colors-map
|
||||
$grays: (
|
||||
@ -35,70 +50,6 @@ $grays: (
|
||||
// scss-docs-end gray-colors-map
|
||||
// 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
|
||||
$blue-100: tint-color($blue, 80%) !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-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-200: tint-color($beige, 60%) !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;
|
||||
// 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
|
||||
$escaped-characters: (
|
||||
("<", "%3c"),
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user