Chill-project/chill-bundles
6
0
Fork 0
mirror of https://gitlab.com/Chill-Projet/chill-bundles.git synced 2025-06-07 18:44:08 +00:00
Code Issues Actions Projects Releases Wiki Activity

fix chill theme colors behaviours: chill classes, special buttons variants

Browse Source
This commit is contained in:
Mathieu Jaumotte 2021-07-13 12:01:58 +02:00
parent c413166866
commit 30af99f4f0
2 changed files with 74 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

75
src/Bundle/ChillMainBundle/Resources/public/modules/bootstrap/custom/_buttons.scss
View File

@ -1,11 +1,36 @@
/// buttons
.btn-success,
.btn-success:hover,
.btn-warning,
.btn-warning:hover {
color: $light;
// adding special chill actions buttons
$chill-theme-buttons: (
"submit": $chill-green,
"save": $chill-green,
"create": $chill-green,
"new": $chill-green,
"duplicate": $chill-green,
"not-duplicate": $chill-green,
"reset": $chill-red,
"delete": $chill-red,
"danger": $chill-red,
"remove": $chill-red,
"action": $chill-orange,
"edit": $chill-orange,
"update": $chill-orange,
"show": $chill-blue,
"view": $chill-blue,
"misc": $chill-light-gray,
"cancel": $chill-light-gray,
);
@each $button, $color in $chill-theme-buttons {
.btn-#{$button} {
@include button-variant($color, $color);
}
}
@each $button, $color in $chill-theme-buttons {
.btn-outline-#{$button} {
@include button-outline-variant($color);
}
}
.btn {
@ -14,36 +39,17 @@
&.btn-create,
&.btn-new,
&.btn-duplicate,
&.btn-not-duplicate {
background-color: $chill-green;
color: $light;
}
&.btn-not-duplicate,
&.btn-reset,
&.btn-delete,
&.btn-danger,
&.btn-remove {
background-color: $chill-red;
color: $light;
}
&.btn-remove,
&.btn-action,
&.btn-edit,
&.btn-update {
background-color: $chill-orange;
color: $light;
}
&.btn-show,
&.btn-view {
background-color: $chill-blue;
color: $light;
}
&.btn-misc,
&.btn-cancel {
background-color: $chill-light-gray;
color: $black;
&, &:hover {
color: $light;
}
}
}
@ -86,3 +92,12 @@
&.btn-remove::before { content: "\f00d"; } // fa-times
&.btn-cancel::before { content: "\f060"; } // fa-arrow-left
}
/// fix text color on themes buttons
.btn-success,
.btn-warning {
&, &:hover {
color: $light;
}
}

48
src/Bundle/ChillMainBundle/Resources/public/modules/bootstrap/custom/_variables.scss
View File

@ -19,21 +19,6 @@ $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: (
@ -50,6 +35,20 @@ $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;
$beige: #cabb9f !default;
// scss-docs-end color-variables
// fusv-disable
$blue-100: tint-color($blue, 80%) !default;
$blue-200: tint-color($blue, 60%) !default;
@ -126,15 +125,16 @@ $green-900: shade-color($green, 80%) !default;
$colors: (
"blue": $blue,
"green": $green,
"green-dark": $green-600,
"yellow": $yellow,
"orange": $orange,
"red": $red,
"pink": $pink,
"green-dark": $green-800,
"beige": $beige,
"white": $white,
"gray": $gray-600,
"gray-dark": $gray-800
"dark": $gray-800,
"black": $black
) !default;
// scss-docs-end colors-map
@ -147,9 +147,11 @@ $warning: $orange;
$danger: $red;
$light: $gray-100;
$dark: $gray-800;
$black: $black;
$chill-blue: $blue;
$chill-green: $green;
$chill-green-dark: $green-800;
$chill-green-dark: $green-600;
$chill-orange: $orange;
$chill-yellow: $yellow;
$chill-red: $red;
@ -161,7 +163,6 @@ $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,
@ -193,6 +194,15 @@ $chill-colors: (
// Merge the maps
$theme-colors: map-merge($theme-colors, $chill-colors);
// Chill color classes
@each $color, $value in $chill-colors {
.#{$color} {
color: $value;
}
}
// 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;