Ark/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma synced 2026-03-21 12:44:30 -07:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Jeremy Thomas
2020-10-31 20:27:07 +00:00
parent 11209d3d4b e9389a9821
commit 09b68d9754
73 changed files with 14010 additions and 919 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
sass/base/generic.sass
View File

@@ -83,6 +83,7 @@ section
body,
button,
input,
optgroup,
select,
textarea
font-family: var(--body-family)

24
sass/components/card.sass
View File

@@ -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

25
sass/components/media.sass
View File

@@ -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

4
sass/components/modal.sass
View File

@@ -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)

20
sass/elements/button.sass
View File

@@ -25,8 +25,15 @@ $button-text-decoration: underline !default
$button-text-hover-background-color: $background !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
@@ -146,6 +153,15 @@ $button-colors: $colors !default
background-color: transparent
border-color: transparent
box-shadow: none
&.is-ghost
background: $button-ghost-background
border-color: $button-ghost-border-color
color: $button-ghost-color
text-decoration: $button-ghost-decoration
&:hover,
&.is-hovered
color: $button-ghost-hover-color
text-decoration: $button-ghost-hover-decoration
@each $name, $pair in $button-colors
$color: nth($pair, 1)
$color-invert: nth($pair, 2)

17
sass/elements/container.sass
View File

@@ -1,4 +1,5 @@
$container-offset: (2 * $gap) !default
$container-max-width: $fullhd !default
.container
flex-grow: 1
@@ -6,19 +7,21 @@ $container-offset: (2 * $gap) !default
position: relative
width: auto
&.is-fluid
max-width: none
max-width: none !important
padding-left: $gap
padding-right: $gap
width: 100%
+desktop
max-width: $desktop - $container-offset
+until-widescreen
&.is-widescreen
max-width: $widescreen - $container-offset
&.is-widescreen:not(.is-max-desktop)
max-width: min($widescreen, $container-max-width) - $container-offset
+until-fullhd
&.is-fullhd
max-width: $fullhd - $container-offset
&.is-fullhd:not(.is-max-desktop):not(.is-max-widescreen)
max-width: min($fullhd, $container-max-width) - $container-offset
+widescreen
max-width: $widescreen - $container-offset
&:not(.is-max-desktop)
max-width: min($widescreen, $container-max-width) - $container-offset
+fullhd
max-width: $fullhd - $container-offset
&:not(.is-max-desktop):not(.is-max-widescreen)
max-width: min($fullhd, $container-max-width) - $container-offset

161
sass/grid/columns.sass
View File

@@ -8,6 +8,7 @@ $column-gap: 0.75rem !default
padding: $column-gap
.columns.is-mobile > &.is-narrow
flex: none
width: unset
.columns.is-mobile > &.is-full
flex: none
width: 100%
@@ -39,32 +40,33 @@ $column-gap: 0.75rem !default
flex: none
width: 80%
.columns.is-mobile > &.is-offset-three-quarters
margin-left: 75%
+ltr-property("margin", 75%, false)
.columns.is-mobile > &.is-offset-two-thirds
margin-left: 66.6666%
+ltr-property("margin", 66.6666%, false)
.columns.is-mobile > &.is-offset-half
margin-left: 50%
+ltr-property("margin", 50%, false)
.columns.is-mobile > &.is-offset-one-third
margin-left: 33.3333%
+ltr-property("margin", 33.3333%, false)
.columns.is-mobile > &.is-offset-one-quarter
margin-left: 25%
+ltr-property("margin", 25%, false)
.columns.is-mobile > &.is-offset-one-fifth
margin-left: 20%
+ltr-property("margin", 20%, false)
.columns.is-mobile > &.is-offset-two-fifths
margin-left: 40%
+ltr-property("margin", 40%, false)
.columns.is-mobile > &.is-offset-three-fifths
margin-left: 60%
+ltr-property("margin", 60%, false)
.columns.is-mobile > &.is-offset-four-fifths
margin-left: 80%
+ltr-property("margin", 80%, false)
@for $i from 0 through 12
.columns.is-mobile > &.is-#{$i}
flex: none
width: percentage($i / 12)
.columns.is-mobile > &.is-offset-#{$i}
margin-left: percentage($i / 12)
+ltr-property("margin", percentage($i / 12), false)
+mobile
&.is-narrow-mobile
flex: none
width: unset
&.is-full-mobile
flex: none
width: 100%
@@ -96,33 +98,34 @@ $column-gap: 0.75rem !default
flex: none
width: 80%
&.is-offset-three-quarters-mobile
margin-left: 75%
+ltr-property("margin", 75%, false)
&.is-offset-two-thirds-mobile
margin-left: 66.6666%
+ltr-property("margin", 66.6666%, false)
&.is-offset-half-mobile
margin-left: 50%
+ltr-property("margin", 50%, false)
&.is-offset-one-third-mobile
margin-left: 33.3333%
+ltr-property("margin", 33.3333%, false)
&.is-offset-one-quarter-mobile
margin-left: 25%
+ltr-property("margin", 25%, false)
&.is-offset-one-fifth-mobile
margin-left: 20%
+ltr-property("margin", 20%, false)
&.is-offset-two-fifths-mobile
margin-left: 40%
+ltr-property("margin", 40%, false)
&.is-offset-three-fifths-mobile
margin-left: 60%
+ltr-property("margin", 60%, false)
&.is-offset-four-fifths-mobile
margin-left: 80%
+ltr-property("margin", 80%, false)
@for $i from 0 through 12
&.is-#{$i}-mobile
flex: none
width: percentage($i / 12)
&.is-offset-#{$i}-mobile
margin-left: percentage($i / 12)
+ltr-property("margin", percentage($i / 12), false)
+tablet
&.is-narrow,
&.is-narrow-tablet
flex: none
width: unset
&.is-full,
&.is-full-tablet
flex: none
@@ -165,31 +168,31 @@ $column-gap: 0.75rem !default
width: 80%
&.is-offset-three-quarters,
&.is-offset-three-quarters-tablet
margin-left: 75%
+ltr-property("margin", 75%, false)
&.is-offset-two-thirds,
&.is-offset-two-thirds-tablet
margin-left: 66.6666%
+ltr-property("margin", 66.6666%, false)
&.is-offset-half,
&.is-offset-half-tablet
margin-left: 50%
+ltr-property("margin", 50%, false)
&.is-offset-one-third,
&.is-offset-one-third-tablet
margin-left: 33.3333%
+ltr-property("margin", 33.3333%, false)
&.is-offset-one-quarter,
&.is-offset-one-quarter-tablet
margin-left: 25%
+ltr-property("margin", 25%, false)
&.is-offset-one-fifth,
&.is-offset-one-fifth-tablet
margin-left: 20%
+ltr-property("margin", 20%, false)
&.is-offset-two-fifths,
&.is-offset-two-fifths-tablet
margin-left: 40%
+ltr-property("margin", 40%, false)
&.is-offset-three-fifths,
&.is-offset-three-fifths-tablet
margin-left: 60%
+ltr-property("margin", 60%, false)
&.is-offset-four-fifths,
&.is-offset-four-fifths-tablet
margin-left: 80%
+ltr-property("margin", 80%, false)
@for $i from 0 through 12
&.is-#{$i},
&.is-#{$i}-tablet
@@ -197,10 +200,11 @@ $column-gap: 0.75rem !default
width: percentage($i / 12)
&.is-offset-#{$i},
&.is-offset-#{$i}-tablet
margin-left: percentage($i / 12)
+ltr-property("margin", percentage($i / 12), false)
+touch
&.is-narrow-touch
flex: none
width: unset
&.is-full-touch
flex: none
width: 100%
@@ -232,32 +236,33 @@ $column-gap: 0.75rem !default
flex: none
width: 80%
&.is-offset-three-quarters-touch
margin-left: 75%
+ltr-property("margin", 75%, false)
&.is-offset-two-thirds-touch
margin-left: 66.6666%
+ltr-property("margin", 66.6666%, false)
&.is-offset-half-touch
margin-left: 50%
+ltr-property("margin", 50%, false)
&.is-offset-one-third-touch
margin-left: 33.3333%
+ltr-property("margin", 33.3333%, false)
&.is-offset-one-quarter-touch
margin-left: 25%
+ltr-property("margin", 25%, false)
&.is-offset-one-fifth-touch
margin-left: 20%
+ltr-property("margin", 20%, false)
&.is-offset-two-fifths-touch
margin-left: 40%
+ltr-property("margin", 40%, false)
&.is-offset-three-fifths-touch
margin-left: 60%
+ltr-property("margin", 60%, false)
&.is-offset-four-fifths-touch
margin-left: 80%
+ltr-property("margin", 80%, false)
@for $i from 0 through 12
&.is-#{$i}-touch
flex: none
width: percentage($i / 12)
&.is-offset-#{$i}-touch
margin-left: percentage($i / 12)
+ltr-property("margin", percentage($i / 12), false)
+desktop
&.is-narrow-desktop
flex: none
width: unset
&.is-full-desktop
flex: none
width: 100%
@@ -289,32 +294,33 @@ $column-gap: 0.75rem !default
flex: none
width: 80%
&.is-offset-three-quarters-desktop
margin-left: 75%
+ltr-property("margin", 75%, false)
&.is-offset-two-thirds-desktop
margin-left: 66.6666%
+ltr-property("margin", 66.6666%, false)
&.is-offset-half-desktop
margin-left: 50%
+ltr-property("margin", 50%, false)
&.is-offset-one-third-desktop
margin-left: 33.3333%
+ltr-property("margin", 33.3333%, false)
&.is-offset-one-quarter-desktop
margin-left: 25%
+ltr-property("margin", 25%, false)
&.is-offset-one-fifth-desktop
margin-left: 20%
+ltr-property("margin", 20%, false)
&.is-offset-two-fifths-desktop
margin-left: 40%
+ltr-property("margin", 40%, false)
&.is-offset-three-fifths-desktop
margin-left: 60%
+ltr-property("margin", 60%, false)
&.is-offset-four-fifths-desktop
margin-left: 80%
+ltr-property("margin", 80%, false)
@for $i from 0 through 12
&.is-#{$i}-desktop
flex: none
width: percentage($i / 12)
&.is-offset-#{$i}-desktop
margin-left: percentage($i / 12)
+ltr-property("margin", percentage($i / 12), false)
+widescreen
&.is-narrow-widescreen
flex: none
width: unset
&.is-full-widescreen
flex: none
width: 100%
@@ -346,32 +352,33 @@ $column-gap: 0.75rem !default
flex: none
width: 80%
&.is-offset-three-quarters-widescreen
margin-left: 75%
+ltr-property("margin", 75%, false)
&.is-offset-two-thirds-widescreen
margin-left: 66.6666%
+ltr-property("margin", 66.6666%, false)
&.is-offset-half-widescreen
margin-left: 50%
+ltr-property("margin", 50%, false)
&.is-offset-one-third-widescreen
margin-left: 33.3333%
+ltr-property("margin", 33.3333%, false)
&.is-offset-one-quarter-widescreen
margin-left: 25%
+ltr-property("margin", 25%, false)
&.is-offset-one-fifth-widescreen
margin-left: 20%
+ltr-property("margin", 20%, false)
&.is-offset-two-fifths-widescreen
margin-left: 40%
+ltr-property("margin", 40%, false)
&.is-offset-three-fifths-widescreen
margin-left: 60%
+ltr-property("margin", 60%, false)
&.is-offset-four-fifths-widescreen
margin-left: 80%
+ltr-property("margin", 80%, false)
@for $i from 0 through 12
&.is-#{$i}-widescreen
flex: none
width: percentage($i / 12)
&.is-offset-#{$i}-widescreen
margin-left: percentage($i / 12)
+ltr-property("margin", percentage($i / 12), false)
+fullhd
&.is-narrow-fullhd
flex: none
width: unset
&.is-full-fullhd
flex: none
width: 100%
@@ -403,33 +410,33 @@ $column-gap: 0.75rem !default
flex: none
width: 80%
&.is-offset-three-quarters-fullhd
margin-left: 75%
+ltr-property("margin", 75%, false)
&.is-offset-two-thirds-fullhd
margin-left: 66.6666%
+ltr-property("margin", 66.6666%, false)
&.is-offset-half-fullhd
margin-left: 50%
+ltr-property("margin", 50%, false)
&.is-offset-one-third-fullhd
margin-left: 33.3333%
+ltr-property("margin", 33.3333%, false)
&.is-offset-one-quarter-fullhd
margin-left: 25%
+ltr-property("margin", 25%, false)
&.is-offset-one-fifth-fullhd
margin-left: 20%
+ltr-property("margin", 20%, false)
&.is-offset-two-fifths-fullhd
margin-left: 40%
+ltr-property("margin", 40%, false)
&.is-offset-three-fifths-fullhd
margin-left: 60%
+ltr-property("margin", 60%, false)
&.is-offset-four-fifths-fullhd
margin-left: 80%
+ltr-property("margin", 80%, false)
@for $i from 0 through 12
&.is-#{$i}-fullhd
flex: none
width: percentage($i / 12)
&.is-offset-#{$i}-fullhd
margin-left: percentage($i / 12)
+ltr-property("margin", percentage($i / 12), false)
.columns
margin-left: (-$column-gap)
margin-right: (-$column-gap)
+ltr-property("margin", (-$column-gap), false)
+ltr-property("margin", (-$column-gap))
margin-top: (-$column-gap)
&:last-child
margin-bottom: (-$column-gap)
@@ -439,8 +446,8 @@ $column-gap: 0.75rem !default
&.is-centered
justify-content: center
&.is-gapless
margin-left: 0
margin-right: 0
+ltr-property("margin", 0, false)
+ltr-property("margin", 0)
margin-top: 0
& > .column
margin: 0
@@ -467,9 +474,9 @@ $column-gap: 0.75rem !default
@if $variable-columns
.columns.is-variable
--columnGap: 0.75rem
margin-left: calc(-1 * var(--columnGap))
margin-right: calc(-1 * var(--columnGap))
.column
+ltr-property("margin", calc(-1 * var(--columnGap)), false)
+ltr-property("margin", calc(-1 * var(--columnGap)))
> .column
padding-left: var(--columnGap)
padding-right: var(--columnGap)
@for $i from 0 through 8

4
sass/helpers/flexbox.sass
View File

@@ -1,5 +1,5 @@
$flex-directions-values: row, row-reverse, column, column-reverse
@each $value in $flex-directions-values
$flex-direction-values: row, row-reverse, column, column-reverse
@each $value in $flex-direction-values
.is-flex-direction-#{$value}
flex-direction: $value !important

1
sass/helpers/other.sass
View File

@@ -6,6 +6,7 @@
.is-clickable
cursor: pointer !important
pointer-events: all !important
.is-unselectable
@extend %unselectable