diff --git a/src/Bundle/ChillMainBundle/Resources/public/modules/bootstrap/_custom.scss b/src/Bundle/ChillMainBundle/Resources/public/modules/bootstrap/_custom.scss index 378597a61..51b84bf4e 100644 --- a/src/Bundle/ChillMainBundle/Resources/public/modules/bootstrap/_custom.scss +++ b/src/Bundle/ChillMainBundle/Resources/public/modules/bootstrap/_custom.scss @@ -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%) } } } diff --git a/src/Bundle/ChillMainBundle/Resources/public/modules/bootstrap/custom/_buttons.scss b/src/Bundle/ChillMainBundle/Resources/public/modules/bootstrap/custom/_buttons.scss new file mode 100644 index 000000000..e8a767ffa --- /dev/null +++ b/src/Bundle/ChillMainBundle/Resources/public/modules/bootstrap/custom/_buttons.scss @@ -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; + } +} diff --git a/src/Bundle/ChillMainBundle/Resources/public/modules/bootstrap/custom/_variables.scss b/src/Bundle/ChillMainBundle/Resources/public/modules/bootstrap/custom/_variables.scss index e6e6e25ad..e08569ff9 100644 --- a/src/Bundle/ChillMainBundle/Resources/public/modules/bootstrap/custom/_variables.scss +++ b/src/Bundle/ChillMainBundle/Resources/public/modules/bootstrap/custom/_variables.scss @@ -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"),