From: Jeremy Thomas <bbxdesign@gmail.com>
Date: Sat, 31 Oct 2020 20:27:07 +0000 (+0000)
Subject: Merge branch 'master' into css-variables-with-fallback
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=refs%2Fheads%2Fcss-variables-with-fallback;p=thirdparty%2Fbulma.git

Merge branch 'master' into css-variables-with-fallback
---

09b68d975417ac1959de8f0f58808354bfc6e6a1
diff --cc sass/base/generic.sass
index 9e498614b,d067bb001..6bb311202
--- a/sass/base/generic.sass
+++ b/sass/base/generic.sass
@@@ -83,9 -52,10 +83,10 @@@ sectio
  body,
  button,
  input,
+ optgroup,
  select,
  textarea
 -  font-family: $body-family
 +  font-family: var(--body-family)
  
  code,
  pre
diff --cc sass/components/card.sass
index 99a5aaee3,b7f350e07..233a64ef7
--- a/sass/components/card.sass
+++ b/sass/components/card.sass
@@@ -1,56 -1,44 +1,64 @@@
 -$card-color: $text !default
 -$card-background-color: $scheme-main !default
 -$card-shadow: 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0px 0 1px rgba($scheme-invert, 0.02) !default
 +$card-color: var(--text, #{$text}) !default
 +$card-background-color: var(--scheme-main, #{$scheme-main}) !default
 +$card-shadow-color: rgba(var(--scheme-invert-rgb, #{bulmaToRGB($black)}), 0.1) !default
 +$card-shadow-color-bis: rgba(var(--scheme-invert-rgb, #{bulmaToRGB($black)}), 0.02) !default
 +$card-shadow: 0 0.5em 1em -0.125em $card-shadow-color, 0 0px 0 1px $card-shadow-color-bis !default
- $card-radius: 0 !default
+ $card-radius: 0.25rem !default
  
  $card-header-background-color: transparent !default
 -$card-header-color: $text-strong !default
 +$card-header-color: var(--text-strong, #{$text-strong}) !default
  $card-header-padding: 0.75rem 1rem !default
 -$card-header-shadow: 0 0.125em 0.25em rgba($scheme-invert, 0.1) !default
 -$card-header-weight: $weight-bold !default
 +$card-header-shadow-color: rgba(var(--scheme-invert-rgb, #{bulmaToRGB($black)}), 0.1) !default
 +$card-header-shadow: 0 0.125em 0.25em $card-header-shadow-color !default
 +$card-header-weight: var(--weight-bold, #{$weight-bold}) !default
  
  $card-content-background-color: transparent !default
  $card-content-padding: 1.5rem !default
  
  $card-footer-background-color: transparent !default
 -$card-footer-border-top: 1px solid $border-light !default
 +$card-footer-border-top-color: var(--border-light, #{$border-light}) !default
 +$card-footer-border-top: 1px solid $card-footer-border-top-color !default
  $card-footer-padding: 0.75rem !default
  
 -$card-media-margin: $block-spacing !default
 +$card-media-margin: var(--block-spacing, #{$block-spacing}) !default
  
  .card
 -  background-color: $card-background-color
 -  border-radius: $card-radius
 -  box-shadow: $card-shadow
 -  color: $card-color
 +  --card-background-color: #{$card-background-color}
 +  --card-shadow: #{$card-shadow}
 +  --card-color: #{$card-color}
 +  --card-radius: #{$card-radius}
 +  --card-header-background-color: #{$card-header-background-color}
 +  --card-header-shadow: #{$card-header-shadow}
 +  --card-header-color: #{$card-header-color}
 +  --card-header-weight: #{$card-header-weight}
 +  --card-header-padding: #{$card-header-padding}
 +  --card-header-padding: #{$card-header-padding}
 +  --card-content-background-color: #{$card-content-background-color}
 +  --card-content-padding: #{$card-content-padding}
 +  --card-footer-background-color: #{$card-footer-background-color}
 +  --card-footer-border-top: #{$card-footer-border-top}
 +  --card-footer-padding: #{$card-footer-padding}
 +  --card-media-margin: #{$card-media-margin}
 +  background-color: var(--card-background-color)
++  border-radius: var(--card-radius)
 +  box-shadow: var(--card-shadow)
 +  color: var(--card-color)
    max-width: 100%
    position: relative
-   border-radius: var(--card-radius)
-   overflow: hidden
+ 
+ %card-item
+   &:first-child
+     border-top-left-radius: $card-radius
+     border-top-right-radius: $card-radius
+   &:last-child
+     border-bottom-left-radius: $card-radius
+     border-bottom-right-radius: $card-radius
  
  .card-header
+   @extend %card-item
 -  background-color: $card-header-background-color
 +  background-color: var(--card-header-background-color)
    align-items: stretch
 -  box-shadow: $card-header-shadow
 +  box-shadow: var(--card-header-shadow)
    display: flex
  
  .card-header-title
@@@ -73,14 -61,24 +81,24 @@@
  .card-image
    display: block
    position: relative
+   &:first-child
+     img
+       border-top-left-radius: $card-radius
+       border-top-right-radius: $card-radius
+   &:last-child
+     img
+       border-bottom-left-radius: $card-radius
+       border-bottom-right-radius: $card-radius
  
  .card-content
+   @extend %card-item
 -  background-color: $card-content-background-color
 -  padding: $card-content-padding
 +  background-color: var(--card-content-background-color)
 +  padding: var(--card-content-padding)
  
  .card-footer
+   @extend %card-item
 -  background-color: $card-footer-background-color
 -  border-top: $card-footer-border-top
 +  background-color: var(--card-footer-background-color)
 +  border-top: var(--card-footer-border-top)
    align-items: stretch
    display: flex
  
diff --cc sass/components/media.sass
index 1fa249cca,cf79276fa..15cd1d51f
--- a/sass/components/media.sass
+++ b/sass/components/media.sass
@@@ -1,31 -1,33 +1,36 @@@
 -$media-border-color: bulmaRgba($border, 0.5) !default
 +$media-border-color: rgba(var(--border-rgb, #{bulmaToRGB($grey-lighter)}), 0.5) !default
- $media-spacing: 1rem
- $media-spacing-large: 1.5rem
+ $media-border-size: 1px !default
+ $media-spacing: 1rem !default
+ $media-spacing-large: 1.5rem !default
+ $media-content-spacing: 0.75rem !default
+ $media-level-1-spacing: 0.75rem !default
+ $media-level-1-content-spacing: 0.5rem !default
+ $media-level-2-spacing: 0.5rem !default
  
  .media
 +  --media-border-color: #{$media-border-color}
 +  --media-spacing: #{$media-spacing}
 +  --media-spacing-large: #{$media-spacing-large}
    align-items: flex-start
    display: flex
    text-align: inherit
    .content:not(:last-child)
-     margin-bottom: 0.75rem
+     margin-bottom: $media-content-spacing
    .media
 -    border-top: $media-border-size solid $media-border-color
 +    border-top: 1px solid var(--media-border-color)
      display: flex
-     padding-top: 0.75rem
+     padding-top: $media-level-1-spacing
      .content:not(:last-child),
      .control:not(:last-child)
-       margin-bottom: 0.5rem
+       margin-bottom: $media-level-1-content-spacing
      .media
-       padding-top: 0.5rem
+       padding-top: $media-level-2-spacing
        & + .media
-         margin-top: 0.5rem
+         margin-top: $media-level-2-spacing
    & + .media
-     border-top: 1px solid var(--media-border-color)
-     margin-top: var(--media-spacing)
-     padding-top: var(--media-spacing)
+     border-top: $media-border-size solid $media-border-color
+     margin-top: $media-spacing
+     padding-top: $media-spacing
    // Sizes
    &.is-large
      & + .media
diff --cc sass/components/modal.sass
index 643062428,3992f2963..84ea8b57c
--- a/sass/components/modal.sass
+++ b/sass/components/modal.sass
@@@ -22,36 -22,15 +22,38 @@@ $modal-card-title-color: var(--text-str
  $modal-card-title-line-height: 1 !default
  $modal-card-title-size: $size-4 !default
  
 -$modal-card-foot-radius: $radius-large !default
 +$modal-card-foot-radius: var(--radius-large, #{$radius-large}) !default
  $modal-card-foot-border-top: 1px solid $border !default
  
 -$modal-card-body-background-color: $scheme-main !default
 +$modal-card-body-background-color: var(--scheme-main, #{$scheme-main}) !default
  $modal-card-body-padding: 20px !default
  
+ $modal-breakpoint: $tablet !default
+ 
  .modal
 +  --modal-z: #{$modal-z}
 +  --modal-background-background-color: #{$modal-background-background-color}
 +  --modal-content-width: #{$modal-content-width}
 +  --modal-content-margin-mobile: #{$modal-content-margin-mobile}
 +  --modal-content-spacing-mobile: #{$modal-content-spacing-mobile}
 +  --modal-content-spacing-tablet: #{$modal-content-spacing-tablet}
 +  --modal-close-dimensions: #{$modal-close-dimensions}
 +  --modal-close-right: #{$modal-close-right}
 +  --modal-close-top: #{$modal-close-top}
 +  --modal-card-spacing: #{$modal-card-spacing}
 +  --modal-card-head-background-color: #{$modal-card-head-background-color}
 +  --modal-card-head-padding: #{$modal-card-head-padding}
 +  --modal-card-head-border-bottom: #{$modal-card-head-border-bottom}
 +  --modal-card-head-radius: #{$modal-card-head-radius}
 +  --modal-card-head-radius: #{$modal-card-head-radius}
 +  --modal-card-title-color: #{$modal-card-title-color}
 +  --modal-card-title-size: #{$modal-card-title-size}
 +  --modal-card-title-line-height: #{$modal-card-title-line-height}
 +  --modal-card-foot-radius: #{$modal-card-foot-radius}
 +  --modal-card-foot-radius: #{$modal-card-foot-radius}
 +  --modal-card-foot-border-top: #{$modal-card-foot-border-top}
 +  --modal-card-body-background-color: #{$modal-card-body-background-color}
 +  --modal-card-body-padding: #{$modal-card-body-padding}
    @extend %overlay
    align-items: center
    display: none
@@@ -76,10 -55,10 +78,10 @@@
    position: relative
    width: 100%
    // Responsiveness
-   +tablet
+   +from($modal-breakpoint)
      margin: 0 auto
 -    max-height: calc(100vh - #{$modal-content-spacing-tablet})
 -    width: $modal-content-width
 +    max-height: calc(100vh - #{var(--modal-content-spacing-tablet)})
 +    width: var(--modal-content-width)
  
  .modal-close
    @extend %delete
diff --cc sass/elements/button.sass
index c65edda13,5a1c55ac7..34bb76e46
--- a/sass/elements/button.sass
+++ b/sass/elements/button.sass
@@@ -8,25 -8,31 +8,32 @@@ $button-border-width: var(--control-bor
  $button-padding-vertical: calc(0.5em - #{$button-border-width}) !default
  $button-padding-horizontal: 1em !default
  
 -$button-hover-color: $link-hover !default
 -$button-hover-border-color: $link-hover-border !default
 +$button-hover-color: var(--link-hover, #{$link-hover}) !default
 +$button-hover-border-color: var(--link-hover-border, #{$link-hover-border}) !default
  
 -$button-focus-color: $link-focus !default
 -$button-focus-border-color: $link-focus-border !default
 +$button-focus-color: var(--link-focus, #{$link-focus}) !default
 +$button-focus-border-color: var(--link-focus-border, #{$link-focus-border}) !default
  $button-focus-box-shadow-size: 0 0 0 0.125em !default
 -$button-focus-box-shadow-color: bulmaRgba($link, 0.25) !default
 +$button-focus-box-shadow-color-hsla: hsla(var(--link-h), var(--link-s), var(--link-l), 0.25) !default
 +$button-focus-box-shadow-color: var(--button-focus-box-shadow-color-hsla, #{bulmaRgba($link, 0.25)}) !default
  
 -$button-active-color: $link-active !default
 -$button-active-border-color: $link-active-border !default
 +$button-active-color: var(--link-active, #{$link-active}) !default
 +$button-active-border-color: var(--link-active-border, #{$link-active-border}) !default
  
 -$button-text-color: $text !default
 +$button-text-color: var(--text, #{$text}) !default
  $button-text-decoration: underline !default
  $button-text-hover-background-color: $background !default
 -$button-text-hover-color: $text-strong !default
 +$button-text-hover-color: var(--text-strong, #{$text-strong}) !default
  
- $button-disabled-background-color: var(--scheme-main, #{$scheme-main}) !default
- $button-disabled-border-color: var(--border, #{$border}) !default
+ $button-ghost-background: none !default
+ $button-ghost-border-color: transparent !default
+ $button-ghost-color: $link !default
+ $button-ghost-decoration: none !default
+ $button-ghost-hover-color: $link !default
+ $button-ghost-hover-decoration: underline !default
+ 
+ $button-disabled-background-color: $scheme-main !default
+ $button-disabled-border-color: $border !default
  $button-disabled-shadow: none !default
  $button-disabled-opacity: 0.5 !default