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

sass/components/card.sass

@@ -3,7 +3,7 @@ $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: var(--text-strong, #{$text-strong}) !default
@@ -40,14 +40,22 @@ $card-media-margin: var(--block-spacing, #{$block-spacing}) !default
   --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: var(--card-header-background-color)
   align-items: stretch
   box-shadow: var(--card-header-shadow)
@@ -73,12 +81,22 @@ $card-media-margin: var(--block-spacing, #{$block-spacing}) !default
 .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: var(--card-content-background-color)
   padding: var(--card-content-padding)
 
 .card-footer
+  @extend %card-item
   background-color: var(--card-footer-background-color)
   border-top: var(--card-footer-border-top)
   align-items: stretch

sass/components/media.sass

@@ -1,6 +1,11 @@
 $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}
@@ -10,22 +15,22 @@ $media-spacing-large: 1.5rem
   display: flex
   text-align: inherit
   .content:not(:last-child)
-    margin-bottom: 0.75rem
+    margin-bottom: $media-content-spacing
   .media
     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

sass/components/modal.sass

@@ -28,6 +28,8 @@ $modal-card-foot-border-top: 1px solid $border !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}
@@ -76,7 +78,7 @@ $modal-card-body-padding: 20px !default
   position: relative
   width: 100%
   // Responsiveness
-  +tablet
+  +from($modal-breakpoint)
     margin: 0 auto
     max-height: calc(100vh - #{var(--modal-content-spacing-tablet)})
     width: var(--modal-content-width)