From: Aria Stewart Date: Fri, 21 Aug 2020 15:40:07 +0000 (-0400) Subject: Allow each component to have its own colors and default to the global set X-Git-Tag: 0.9.1~20 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=da369e134cdb1f31dd4542f9da11a958a18e54ea;p=thirdparty%2Fbulma.git Allow each component to have its own colors and default to the global set --- diff --git a/sass/components/navbar.sass b/sass/components/navbar.sass index a34718ec8..09b985131 100644 --- a/sass/components/navbar.sass +++ b/sass/components/navbar.sass @@ -46,6 +46,8 @@ $navbar-bottom-box-shadow-size: 0 -2px 0 0 !default $navbar-breakpoint: $desktop !default +$navbar-colors: $colors !default + =navbar-fixed left: 0 position: fixed @@ -57,7 +59,7 @@ $navbar-breakpoint: $desktop !default min-height: $navbar-height position: relative z-index: $navbar-z - @each $name, $pair in $colors + @each $name, $pair in $navbar-colors $color: nth($pair, 1) $color-invert: nth($pair, 2) &.is-#{$name} diff --git a/sass/elements/button.sass b/sass/elements/button.sass index 4bdf2534e..9e78de5a6 100644 --- a/sass/elements/button.sass +++ b/sass/elements/button.sass @@ -33,6 +33,8 @@ $button-static-color: $text-light !default $button-static-background-color: $scheme-main-ter !default $button-static-border-color: $border !default +$button-colors: $colors !default + // The button sizes use mixins so they can be used at different breakpoints =button-small border-radius: $radius-small @@ -115,7 +117,7 @@ $button-static-border-color: $border !default background-color: transparent border-color: transparent box-shadow: none - @each $name, $pair in $colors + @each $name, $pair in $button-colors $color: nth($pair, 1) $color-invert: nth($pair, 2) &.is-#{$name} diff --git a/sass/elements/notification.sass b/sass/elements/notification.sass index af1c7be59..31ee712e9 100644 --- a/sass/elements/notification.sass +++ b/sass/elements/notification.sass @@ -5,6 +5,8 @@ $notification-padding: 1.25rem 2.5rem 1.25rem 1.5rem !default $notification-padding-ltr: 1.25rem 2.5rem 1.25rem 1.5rem !default $notification-padding-rtl: 1.25rem 1.5rem 1.25rem 2.5rem !default +$notification-colors: $colors !default + .notification @extend %block background-color: $notification-background-color @@ -33,7 +35,7 @@ $notification-padding-rtl: 1.25rem 1.5rem 1.25rem 2.5rem !default .content color: currentColor // Colors - @each $name, $pair in $colors + @each $name, $pair in $notification-colors $color: nth($pair, 1) $color-invert: nth($pair, 2) &.is-#{$name} diff --git a/sass/elements/progress.sass b/sass/elements/progress.sass index d65bd904c..d6d7fce6f 100644 --- a/sass/elements/progress.sass +++ b/sass/elements/progress.sass @@ -4,6 +4,8 @@ $progress-border-radius: $radius-rounded !default $progress-indeterminate-duration: 1.5s !default +$progress-colors: $colors !default + .progress @extend %block -moz-appearance: none @@ -25,7 +27,7 @@ $progress-indeterminate-duration: 1.5s !default background-color: $progress-value-background-color border: none // Colors - @each $name, $pair in $colors + @each $name, $pair in $progress-colors $color: nth($pair, 1) &.is-#{$name} &::-webkit-progress-value diff --git a/sass/elements/table.sass b/sass/elements/table.sass index 48d7d93e1..bb88e2d42 100644 --- a/sass/elements/table.sass +++ b/sass/elements/table.sass @@ -23,6 +23,8 @@ $table-row-active-color: $primary-invert !default $table-striped-row-even-background-color: $scheme-main-bis !default $table-striped-row-even-hover-background-color: $scheme-main-ter !default +$table-colors: $colors !default + .table @extend %block background-color: $table-background-color @@ -34,7 +36,7 @@ $table-striped-row-even-hover-background-color: $scheme-main-ter !default padding: $table-cell-padding vertical-align: top // Colors - @each $name, $pair in $colors + @each $name, $pair in $table-colors $color: nth($pair, 1) $color-invert: nth($pair, 2) &.is-#{$name} diff --git a/sass/elements/tag.sass b/sass/elements/tag.sass index f3c20a215..9ba30cd08 100644 --- a/sass/elements/tag.sass +++ b/sass/elements/tag.sass @@ -3,6 +3,8 @@ $tag-color: $text !default $tag-radius: $radius !default $tag-delete-margin: 1px !default +$tag-colors: $colors !default + .tags align-items: center display: flex @@ -71,7 +73,7 @@ $tag-delete-margin: 1px !default +ltr-property("margin", 0.25rem, false) +ltr-property("margin", -0.375rem) // Colors - @each $name, $pair in $colors + @each $name, $pair in $tag-colors $color: nth($pair, 1) $color-invert: nth($pair, 2) &.is-#{$name} diff --git a/sass/form/file.sass b/sass/form/file.sass index 5fe0eee2a..22a5a508a 100644 --- a/sass/form/file.sass +++ b/sass/form/file.sass @@ -11,6 +11,8 @@ $file-name-border-style: solid !default $file-name-border-width: 1px 1px 1px 0 !default $file-name-max-width: 16em !default +$file-colors: $form-colors !default + .file @extend %unselectable align-items: stretch @@ -18,7 +20,7 @@ $file-name-max-width: 16em !default justify-content: flex-start position: relative // Colors - @each $name, $pair in $colors + @each $name, $pair in $file-colors $color: nth($pair, 1) $color-invert: nth($pair, 2) &.is-#{$name} diff --git a/sass/form/input-textarea.sass b/sass/form/input-textarea.sass index a5aef556c..8d842a04f 100644 --- a/sass/form/input-textarea.sass +++ b/sass/form/input-textarea.sass @@ -2,6 +2,8 @@ $textarea-padding: $control-padding-horizontal !default $textarea-max-height: 40em !default $textarea-min-height: 8em !default +$textarea-colors: $form-colors !default + %input-textarea @extend %input box-shadow: $input-shadow @@ -10,7 +12,7 @@ $textarea-min-height: 8em !default &[readonly] box-shadow: none // Colors - @each $name, $pair in $colors + @each $name, $pair in $textarea-colors $color: nth($pair, 1) &.is-#{$name} border-color: $color diff --git a/sass/form/select.sass b/sass/form/select.sass index 21d62d0b8..07fe98cca 100644 --- a/sass/form/select.sass +++ b/sass/form/select.sass @@ -1,3 +1,5 @@ +$select-colors: $form-colors !default + .select display: inline-block max-width: 100% @@ -39,7 +41,7 @@ &::after border-color: $input-hover-color // Colors - @each $name, $pair in $colors + @each $name, $pair in $select-colors $color: nth($pair, 1) &.is-#{$name} &:not(:hover)::after diff --git a/sass/form/shared.sass b/sass/form/shared.sass index 230a00cbf..b5e2ff3bc 100644 --- a/sass/form/shared.sass +++ b/sass/form/shared.sass @@ -1,3 +1,5 @@ +$form-colors: $colors !default + $input-color: $text-strong !default $input-background-color: $scheme-main !default $input-border-color: $border !default diff --git a/sass/form/tools.sass b/sass/form/tools.sass index d97427c40..73b09b64b 100644 --- a/sass/form/tools.sass +++ b/sass/form/tools.sass @@ -3,6 +3,8 @@ $label-weight: $weight-bold !default $help-size: $size-small !default +$label-colors: $form-colors !default + .label color: $label-color display: block @@ -22,7 +24,7 @@ $help-size: $size-small !default display: block font-size: $help-size margin-top: 0.25rem - @each $name, $pair in $colors + @each $name, $pair in $label-colors $color: nth($pair, 1) &.is-#{$name} color: $color diff --git a/sass/layout/hero.sass b/sass/layout/hero.sass index 925c98c28..996e0cdf5 100644 --- a/sass/layout/hero.sass +++ b/sass/layout/hero.sass @@ -3,6 +3,8 @@ $hero-body-padding-small: 1.5rem !default $hero-body-padding-medium: 9rem 1.5rem !default $hero-body-padding-large: 18rem 1.5rem !default +$hero-colors: $colors !default + // Main container .hero align-items: stretch @@ -15,7 +17,7 @@ $hero-body-padding-large: 18rem 1.5rem !default ul border-bottom: none // Colors - @each $name, $pair in $colors + @each $name, $pair in $hero-colors $color: nth($pair, 1) $color-invert: nth($pair, 2) &.is-#{$name}