Ark/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma synced 2026-03-20 04:14:29 -07:00
Code Issues Packages Projects Releases Wiki Activity

Style more button parts

Browse Source
This commit is contained in:
Jeremy Thomas
2020-09-01 20:02:57 +02:00
parent ff889b39fd
commit f85f5dea4e
34 changed files with 158 additions and 159 deletions
Download Patch File Download Diff File Expand all files Collapse all files

109
sass/base/generic.sass
View File

@@ -1,43 +1,74 @@
$body-background-color: $scheme-main !default $body-background-color: var(--scheme-main, #{$scheme-main}) !default
$body-size: 16px !default $body-size: 16px !default
$body-min-width: 300px !default $body-min-width: 300px !default
$body-rendering: optimizeLegibility !default $body-rendering: optimizeLegibility !default
$body-family: $family-primary !default $body-family: var(--family-primary, #{$family-primary}) !default
$body-overflow-x: hidden !default $body-overflow-x: hidden !default
$body-overflow-y: scroll !default $body-overflow-y: scroll !default
$body-color: $text !default $body-color: var(--text, #{$text}) !default
$body-font-size: 1em !default $body-font-size: 1em !default
$body-weight: $weight-normal !default $body-weight: var(--weight-normal, #{$weight-normal}) !default
$body-line-height: 1.5 !default $body-line-height: 1.5 !default
$code-family: $family-code !default $code-family: var(--family-code, #{$family-code}) !default
$code-padding: 0.25em 0.5em 0.25em !default $code-padding: 0.25em 0.5em 0.25em !default
$code-weight: normal !default $code-weight: normal !default
$code-size: 0.875em !default $code-size: 0.875em !default
$small-font-size: 0.875em !default $small-font-size: 0.875em !default
$hr-background-color: $background !default $hr-background-color: var(--background, #{$background}) !default
$hr-height: 2px !default $hr-height: 2px !default
$hr-margin: 1.5rem 0 !default $hr-margin: 1.5rem 0 !default
$strong-color: $text-strong !default $strong-color: var(--text-strong, #{$text-strong}) !default
$strong-weight: $weight-bold !default $strong-weight: var(--weight-bold, #{$weight-bold}) !default
$pre-font-size: 0.875em !default $pre-font-size: 0.875em !default
$pre-padding: 1.25rem 1.5rem !default $pre-padding: 1.25rem 1.5rem !default
$pre-code-font-size: 1em !default $pre-code-font-size: 1em !default
html html
background-color: $body-background-color --body-background-color: #{$body-background-color}
font-size: $body-size --body-size: #{$body-size}
--body-min-width: #{$body-min-width}
--body-overflow-x: #{$body-overflow-x}
--body-overflow-y: #{$body-overflow-y}
--body-rendering: #{$body-rendering}
--body-family: #{$body-family}
--code-family: #{$code-family}
--body-color: #{$body-color}
--body-font-size: #{$body-font-size}
--body-weight: #{$body-weight}
--body-line-height: #{$body-line-height}
--link: #{$link}
--link-hover: #{$link-hover}
--code-background: #{$code-background}
--code: #{$code}
--code-size: #{$code-size}
--code-weight: #{$code-weight}
--code-padding: #{$code-padding}
--hr-background-color: #{$hr-background-color}
--hr-height: #{$hr-height}
--hr-margin: #{$hr-margin}
--small-font-size: #{$small-font-size}
--strong-color: #{$strong-color}
--strong-weight: #{$strong-weight}
--pre-background: #{$pre-background}
--pre: #{$pre}
--pre-font-size: #{$pre-font-size}
--pre-padding: #{$pre-padding}
--pre-code-font-size: #{$pre-code-font-size}
--text-strong: #{$text-strong}
background-color: var(--body-background-color)
font-size: var(--body-size)
-moz-osx-font-smoothing: grayscale -moz-osx-font-smoothing: grayscale
-webkit-font-smoothing: antialiased -webkit-font-smoothing: antialiased
min-width: $body-min-width min-width: var(--body-min-width)
overflow-x: $body-overflow-x overflow-x: var(--body-overflow-x)
overflow-y: $body-overflow-y overflow-y: var(--body-overflow-y)
text-rendering: $body-rendering text-rendering: var(--body-rendering)
text-size-adjust: 100% text-size-adjust: 100%
article, article,
@@ -54,44 +85,44 @@ button,
input, input,
select, select,
textarea textarea
font-family: $body-family font-family: var(--body-family)
code, code,
pre pre
-moz-osx-font-smoothing: auto -moz-osx-font-smoothing: auto
-webkit-font-smoothing: auto -webkit-font-smoothing: auto
font-family: $code-family font-family: var(--code-family)
body body
color: $body-color color: var(--body-color)
font-size: $body-font-size font-size: var(--body-font-size)
font-weight: $body-weight font-weight: var(--body-weight)
line-height: $body-line-height line-height: var(--body-line-height)
// Inline // Inline
a a
color: $link color: var(--link)
cursor: pointer cursor: pointer
text-decoration: none text-decoration: none
strong strong
color: currentColor color: currentColor
&:hover &:hover
color: $link-hover color: var(--link-hover)
code code
background-color: $code-background background-color: var(--code-background)
color: $code color: var(--code)
font-size: $code-size font-size: var(--code-size)
font-weight: $code-weight font-weight: var(--code-weight)
padding: $code-padding padding: var(--code-padding)
hr hr
background-color: $hr-background-color background-color: var(--hr-background-color)
border: none border: none
display: block display: block
height: $hr-height height: var(--hr-height)
margin: $hr-margin margin: var(--hr-margin)
img img
height: auto height: auto
@@ -102,15 +133,15 @@ input[type="radio"]
vertical-align: baseline vertical-align: baseline
small small
font-size: $small-font-size font-size: var(--small-font-size)
span span
font-style: inherit font-style: inherit
font-weight: inherit font-weight: inherit
strong strong
color: $strong-color color: var(--strong-color)
font-weight: $strong-weight font-weight: var(--strong-weight)
// Block // Block
@@ -119,17 +150,17 @@ fieldset
pre pre
+overflow-touch +overflow-touch
background-color: $pre-background background-color: var(--pre-background)
color: $pre color: var(--pre)
font-size: $pre-font-size font-size: var(--pre-font-size)
overflow-x: auto overflow-x: auto
padding: $pre-padding padding: var(--pre-padding)
white-space: pre white-space: pre
word-wrap: normal word-wrap: normal
code code
background-color: transparent background-color: transparent
color: currentColor color: currentColor
font-size: $pre-code-font-size font-size: var(--pre-code-font-size)
padding: 0 padding: 0
table table
@@ -139,4 +170,4 @@ table
&:not([align]) &:not([align])
text-align: inherit text-align: inherit
th th
color: $text-strong color: var(--text-strong)

1
sass/components/breadcrumb.sass
View File

@@ -17,7 +17,6 @@ $breadcrumb-item-separator-color: var(--border-hover, #{$border-hover}) !default
--breadcrumb-item-separator-color: #{$breadcrumb-item-separator-color} --breadcrumb-item-separator-color: #{$breadcrumb-item-separator-color}
--breadcrumb-item-padding-vertical: #{$breadcrumb-item-padding-vertical} --breadcrumb-item-padding-vertical: #{$breadcrumb-item-padding-vertical}
--breadcrumb-item-padding-horizontal: #{$breadcrumb-item-padding-horizontal} --breadcrumb-item-padding-horizontal: #{$breadcrumb-item-padding-horizontal}
@extend %block @extend %block
@extend %unselectable @extend %unselectable
font-size: var(--breadcrumb-font-size) font-size: var(--breadcrumb-font-size)

1
sass/components/card.sass
View File

@@ -39,7 +39,6 @@ $card-media-margin: var(--block-spacing, #{$block-spacing}) !default
--card-footer-border-top: #{$card-footer-border-top} --card-footer-border-top: #{$card-footer-border-top}
--card-footer-padding: #{$card-footer-padding} --card-footer-padding: #{$card-footer-padding}
--card-media-margin: #{$card-media-margin} --card-media-margin: #{$card-media-margin}
background-color: var(--card-background-color) background-color: var(--card-background-color)
box-shadow: var(--card-shadow) box-shadow: var(--card-shadow)
color: var(--card-color) color: var(--card-color)

1
sass/components/dropdown.sass
View File

@@ -35,7 +35,6 @@ $dropdown-divider-background-color: var(--border-light, #{$border-light}) !defau
--dropdown-item-active-background-color: #{$dropdown-item-active-background-color} --dropdown-item-active-background-color: #{$dropdown-item-active-background-color}
--dropdown-item-active-color: #{$dropdown-item-active-color} --dropdown-item-active-color: #{$dropdown-item-active-color}
--dropdown-divider-background-color: #{$dropdown-divider-background-color} --dropdown-divider-background-color: #{$dropdown-divider-background-color}
display: inline-flex display: inline-flex
position: relative position: relative
vertical-align: top vertical-align: top

1
sass/components/level.sass
View File

@@ -2,7 +2,6 @@ $level-item-spacing: calc(var(--block-spacing, #{$block-spacing}) / 2) !default
.level .level
--level-item-spacing: #{$level-item-spacing} --level-item-spacing: #{$level-item-spacing}
@extend %block @extend %block
align-items: center align-items: center
justify-content: space-between justify-content: space-between

1
sass/components/media.sass
View File

@@ -6,7 +6,6 @@ $media-spacing-large: 1.5rem
--media-border-color: #{$media-border-color} --media-border-color: #{$media-border-color}
--media-spacing: #{$media-spacing} --media-spacing: #{$media-spacing}
--media-spacing-large: #{$media-spacing-large} --media-spacing-large: #{$media-spacing-large}
align-items: flex-start align-items: flex-start
display: flex display: flex
text-align: inherit text-align: inherit

1
sass/components/menu.sass
View File

@@ -36,7 +36,6 @@ $menu-label-spacing: 1em !default
--menu-label-letter-spacing: #{$menu-label-letter-spacing} --menu-label-letter-spacing: #{$menu-label-letter-spacing}
--menu-label-spacing: #{$menu-label-spacing} --menu-label-spacing: #{$menu-label-spacing}
--menu-label-spacing: #{$menu-label-spacing} --menu-label-spacing: #{$menu-label-spacing}
font-size: var(--menu-font-size) font-size: var(--menu-font-size)
// Sizes // Sizes
&.is-small &.is-small

1
sass/components/message.sass
View File

@@ -37,7 +37,6 @@ $message-colors: $colors !default
--message-body-pre-background-color: #{$message-body-pre-background-color} --message-body-pre-background-color: #{$message-body-pre-background-color}
--message-body-pre-code-background-color: #{$message-body-pre-code-background-color} --message-body-pre-code-background-color: #{$message-body-pre-code-background-color}
--message-header-body-border-width: #{$message-header-body-border-width} --message-header-body-border-width: #{$message-header-body-border-width}
@extend %block @extend %block
background-color: var(--message-background-color) background-color: var(--message-background-color)
border-radius: var(--message-radius) border-radius: var(--message-radius)

1
sass/components/modal.sass
View File

@@ -52,7 +52,6 @@ $modal-card-body-padding: 20px !default
--modal-card-foot-border-top: #{$modal-card-foot-border-top} --modal-card-foot-border-top: #{$modal-card-foot-border-top}
--modal-card-body-background-color: #{$modal-card-body-background-color} --modal-card-body-background-color: #{$modal-card-body-background-color}
--modal-card-body-padding: #{$modal-card-body-padding} --modal-card-body-padding: #{$modal-card-body-padding}
@extend %overlay @extend %overlay
align-items: center align-items: center
display: none display: none

9
sass/components/navbar.sass
View File

@@ -96,9 +96,9 @@ $navbar-colors: $colors !default
--navbar-dropdown-z: #{$navbar-dropdown-z} --navbar-dropdown-z: #{$navbar-dropdown-z}
--navbar-dropdown-boxed-radius: #{$navbar-dropdown-boxed-radius} --navbar-dropdown-boxed-radius: #{$navbar-dropdown-boxed-radius}
--navbar-dropdown-boxed-shadow: #{$navbar-dropdown-boxed-shadow} --navbar-dropdown-boxed-shadow: #{$navbar-dropdown-boxed-shadow}
--navbar-dropdown-offset: #{$navbar-dropdown-offset}
--navbar-item-active-color: #{$navbar-item-active-color} --navbar-item-active-color: #{$navbar-item-active-color}
--navbar-item-active-background-color: #{$navbar-item-active-background-color} --navbar-item-active-background-color: #{$navbar-item-active-background-color}
background-color: var(--navbar-background-color) background-color: var(--navbar-background-color)
min-height: var(--navbar-height) min-height: var(--navbar-height)
position: relative position: relative
@@ -106,10 +106,8 @@ $navbar-colors: $colors !default
@each $name, $pair in $navbar-colors @each $name, $pair in $navbar-colors
$color: nth($pair, 1) $color: nth($pair, 1)
$color-invert: nth($pair, 2) $color-invert: nth($pair, 2)
&.is-#{$name} &.is-#{$name}
--navbar-burger-color: var(--#{$name}-invert, #{$color-invert}) --navbar-burger-color: var(--#{$name}-invert, #{$color-invert})
background-color: var(--#{$name}, #{$color}) background-color: var(--#{$name}, #{$color})
color: var(--#{$name}-invert, #{$color-invert}) color: var(--#{$name}-invert, #{$color-invert})
.navbar-brand .navbar-brand
@@ -128,7 +126,6 @@ $navbar-colors: $colors !default
+from($navbar-breakpoint) +from($navbar-breakpoint)
--navbar-dropdown-item-active-background-color: var(--#{$name}, #{$color}) --navbar-dropdown-item-active-background-color: var(--#{$name}, #{$color})
--navbar-dropdown-item-active-color: var(--#{$name}-invert, #{$color-invert}) --navbar-dropdown-item-active-color: var(--#{$name}-invert, #{$color-invert})
.navbar-brand, .navbar-brand,
.navbar-start, .navbar-start,
.navbar-end .navbar-end
@@ -187,7 +184,7 @@ body
.navbar-burger .navbar-burger
color: var(--navbar-burger-color) color: var(--navbar-burger-color)
+hamburger($navbar-height) +hamburger(var(--navbar-height))
+ltr-property("margin", auto, false) +ltr-property("margin", auto, false)
.navbar-menu .navbar-menu
@@ -421,7 +418,7 @@ a.navbar-item,
display: block display: block
opacity: 0 opacity: 0
pointer-events: none pointer-events: none
top: calc(100% + (#{$navbar-dropdown-offset})) top: calc(100% + #{var(--navbar-dropdown-offset)})
transform: translateY(-5px) transform: translateY(-5px)
transition-duration: var(--speed, #{$speed}) transition-duration: var(--speed, #{$speed})
transition-property: opacity, transform transition-property: opacity, transform

2
sass/components/pagination.sass
View File

@@ -51,11 +51,9 @@ $pagination-shadow-inset: inset 0 1px 2px rgba($scheme-invert, 0.2)
--pagination-current-border-color: #{$pagination-current-border-color} --pagination-current-border-color: #{$pagination-current-border-color}
--pagination-current-color: #{$pagination-current-color} --pagination-current-color: #{$pagination-current-color}
--pagination-ellipsis-color: #{$pagination-ellipsis-color} --pagination-ellipsis-color: #{$pagination-ellipsis-color}
@extend %block @extend %block
font-size: var(--pagination-font-size) font-size: var(--pagination-font-size)
margin: var(--pagination-margin) margin: var(--pagination-margin)
// Sizes // Sizes
&.is-small &.is-small
--pagination-font-size: var(--size-small, #{$size-small}) --pagination-font-size: var(--size-small, #{$size-small})

9
sass/components/panel.sass
View File

@@ -54,7 +54,6 @@ $panel-colors: $colors !default
--panel-block-active-icon-color: #{$panel-block-active-icon-color} --panel-block-active-icon-color: #{$panel-block-active-icon-color}
--panel-block-hover-background-color: #{$panel-block-hover-background-color} --panel-block-hover-background-color: #{$panel-block-hover-background-color}
--panel-icon-color: #{$panel-icon-color} --panel-icon-color: #{$panel-icon-color}
border-radius: var(--panel-radius) border-radius: var(--panel-radius)
box-shadow: var(--panel-shadow) box-shadow: var(--panel-shadow)
font-size: var(--panel-font-size) font-size: var(--panel-font-size)
@@ -66,12 +65,12 @@ $panel-colors: $colors !default
$color-invert: nth($components, 2) $color-invert: nth($components, 2)
&.is-#{$name} &.is-#{$name}
.panel-heading .panel-heading
background-color: $color background-color: var(--#{$name}, #{$color})
color: $color-invert color: var(--#{$name}-invert, #{$color-invert})
.panel-tabs a.is-active .panel-tabs a.is-active
border-bottom-color: $color border-bottom-color: var(--#{$name}, #{$color})
.panel-block.is-active .panel-icon .panel-block.is-active .panel-icon
color: $color color: var(--#{$name}, #{$color})
.panel-tabs, .panel-tabs,
.panel-block .panel-block

3
sass/components/tabs.sass
View File

@@ -53,10 +53,9 @@ $tabs-toggle-link-active-color: var(--link-invert, #{$link-invert}) !default
--tabs-toggle-link-active-background-color: #{$tabs-toggle-link-active-background-color} --tabs-toggle-link-active-background-color: #{$tabs-toggle-link-active-background-color}
--tabs-toggle-link-active-border-color: #{$tabs-toggle-link-active-border-color} --tabs-toggle-link-active-border-color: #{$tabs-toggle-link-active-border-color}
--tabs-toggle-link-active-color: #{$tabs-toggle-link-active-color} --tabs-toggle-link-active-color: #{$tabs-toggle-link-active-color}
@extend %block @extend %block
+overflow-touch
@extend %unselectable @extend %unselectable
+overflow-touch
align-items: stretch align-items: stretch
display: flex display: flex
font-size: var(--tabs-font-size) font-size: var(--tabs-font-size)

1
sass/elements/box.sass
View File

@@ -21,7 +21,6 @@ $box-link-active-shadow: inset 0 1px 2px $box-link-active-shadow-color, 0 0 0 1p
--box-padding: #{$box-padding} --box-padding: #{$box-padding}
--box-link-hover-shadow: #{$box-link-hover-shadow} --box-link-hover-shadow: #{$box-link-hover-shadow}
--box-link-active-shadow: #{$box-link-active-shadow} --box-link-active-shadow: #{$box-link-active-shadow}
@extend %block @extend %block
background-color: var(--box-background-color) background-color: var(--box-background-color)
border-radius: var(--box-radius) border-radius: var(--box-radius)

28
sass/elements/button.sass
View File

@@ -57,6 +57,8 @@ $button-colors: $colors !default
--button-hover-border-color: #{$button-hover-border-color} --button-hover-border-color: #{$button-hover-border-color}
--button-hover-color: #{$button-hover-color} --button-hover-color: #{$button-hover-color}
--button-focus-border-color: #{$button-focus-border-color} --button-focus-border-color: #{$button-focus-border-color}
--button-focus-box-shadow-size: #{$button-focus-box-shadow-size}
--button-focus-box-shadow-color: #{$button-focus-box-shadow-color}
--button-focus-color: #{$button-focus-color} --button-focus-color: #{$button-focus-color}
--button-active-border-color: #{$button-active-border-color} --button-active-border-color: #{$button-active-border-color}
--button-active-color: #{$button-active-color} --button-active-color: #{$button-active-color}
@@ -71,7 +73,6 @@ $button-colors: $colors !default
--button-static-background-color: #{$button-static-background-color} --button-static-background-color: #{$button-static-background-color}
--button-static-border-color: #{$button-static-border-color} --button-static-border-color: #{$button-static-border-color}
--button-static-color: #{$button-static-color} --button-static-color: #{$button-static-color}
@extend %control @extend %control
@extend %unselectable @extend %unselectable
background-color: var(--button-background-color) background-color: var(--button-background-color)
@@ -147,14 +148,20 @@ $button-colors: $colors !default
$color: nth($pair, 1) $color: nth($pair, 1)
$color-invert: nth($pair, 2) $color-invert: nth($pair, 2)
&.is-#{$name} &.is-#{$name}
--button-hover-background-l-delta: -2.5%
--button-hover-background-#{$name}-l: calc(#{var(--#{$name}-l)} + #{var(--button-hover-background-l-delta)})
--button-hover-background-color: hsla(var(--#{$name}-h), var(--#{$name}-s), var(--button-hover-background-#{$name}-l), var(--#{$name}-a))
--button-active-background-l-delta: -5%
--button-active-background-#{$name}-l: calc(#{var(--#{$name}-l)} + #{var(--button-active-background-l-delta)})
--button-active-background-color: hsla(var(--#{$name}-h), var(--#{$name}-s), var(--button-active-background-#{$name}-l), var(--#{$name}-a))
--button-invert-hover-background-l-delta: -5%
--button-invert-hover-background-#{$name}-l: calc(#{var(--#{$name}-invert-l)} + #{var(--button-invert-hover-background-l-delta)})
--button-invert-hover-background-color: hsla(var(--#{$name}-h), var(--#{$name}-s), var(--button-invert-hover-background-#{$name}-l), var(--#{$name}-a))
background-color: var(--#{$name}, #{$color}) background-color: var(--#{$name}, #{$color})
border-color: transparent border-color: transparent
color: var(--#{$name}-invert, #{$color-invert}) color: var(--#{$name}-invert, #{$color-invert})
&:hover, &:hover,
&.is-hovered &.is-hovered
--button-hover-background-l-delta: -2.5%
--button-hover-background-#{$name}-l: calc(#{var(--#{$name}-l)} + #{var(--button-hover-background-l-delta)})
--button-hover-background-color: hsla(var(--#{$name}-h), var(--#{$name}-s), var(--button-hover-background-#{$name}-l), var(--#{$name}-a))
background-color: var(--button-hover-background-color, #{bulmaDarken($color, 2.5%)}) background-color: var(--button-hover-background-color, #{bulmaDarken($color, 2.5%)})
border-color: transparent border-color: transparent
color: var(--#{$name}-invert, #{$color-invert}) color: var(--#{$name}-invert, #{$color-invert})
@@ -166,9 +173,6 @@ $button-colors: $colors !default
box-shadow: var(--button-focus-box-shadow-size, #{$button-focus-box-shadow-size}) bulmaRgba($color, 0.25) box-shadow: var(--button-focus-box-shadow-size, #{$button-focus-box-shadow-size}) bulmaRgba($color, 0.25)
&:active, &:active,
&.is-active &.is-active
--button-active-background-l-delta: -5%
--button-active-background-#{$name}-l: calc(#{var(--#{$name}-l)} + #{var(--button-active-background-l-delta)})
--button-active-background-color: hsla(var(--#{$name}-h), var(--#{$name}-s), var(--button-active-background-#{$name}-l), var(--#{$name}-a))
background-color: var(--button-active-background-color, #{bulmaDarken($color, 5%)}) background-color: var(--button-active-background-color, #{bulmaDarken($color, 5%)})
border-color: transparent border-color: transparent
color: var(--#{$name}-invert, #{$color-invert}) color: var(--#{$name}-invert, #{$color-invert})
@@ -246,16 +250,22 @@ $button-colors: $colors !default
$color-light: nth($pair, 3) $color-light: nth($pair, 3)
$color-dark: nth($pair, 4) $color-dark: nth($pair, 4)
&.is-light &.is-light
--button-light-hover-background-l-delta: -2.5%
--button-light-hover-background-#{$name}-l: calc(#{var(--#{$name}-light-l)} + #{var(--button-light-hover-background-l-delta)})
--button-light-hover-background-color: hsla(var(--#{$name}-h), var(--#{$name}-s), var(--button-light-hover-background-#{$name}-l), var(--#{$name}-a))
--button-light-active-background-l-delta: -5%
--button-light-active-background-#{$name}-l: calc(#{var(--#{$name}-light-l)} + #{var(--button-light-active-background-l-delta)})
--button-light-active-background-color: hsla(var(--#{$name}-h), var(--#{$name}-s), var(--button-light-active-background-#{$name}-l), var(--#{$name}-a))
background-color: var(--#{$name}-light, #{$color-light}) background-color: var(--#{$name}-light, #{$color-light})
color: var(--#{$name}-dark, #{$color-dark}) color: var(--#{$name}-dark, #{$color-dark})
&:hover, &:hover,
&.is-hovered &.is-hovered
background-color: bulmaDarken($color-light, 2.5%) background-color: var(--button-light-hover-background-color, #{bulmaDarken($color-light, 2.5%)})
border-color: transparent border-color: transparent
color: var(--#{$name}-dark, #{$color-dark}) color: var(--#{$name}-dark, #{$color-dark})
&:active, &:active,
&.is-active &.is-active
background-color: bulmaDarken($color-light, 5%) background-color: var(--button-light-active-background-color, #{bulmaDarken($color-light, 5%)})
border-color: transparent border-color: transparent
color: var(--#{$name}-dark, #{$color-dark}) color: var(--#{$name}-dark, #{$color-dark})
// Sizes // Sizes

1
sass/elements/content.sass
View File

@@ -36,7 +36,6 @@ $content-table-foot-cell-color: var(--text-strong, #{$text-strong}) !default
--content-table-head-cell-color: #{$content-table-head-cell-color} --content-table-head-cell-color: #{$content-table-head-cell-color}
--content-table-foot-cell-border-width: #{$content-table-foot-cell-border-width} --content-table-foot-cell-border-width: #{$content-table-foot-cell-border-width}
--content-table-foot-cell-color: #{$content-table-foot-cell-color} --content-table-foot-cell-color: #{$content-table-foot-cell-color}
@extend %block @extend %block
font-size: var(--content-font-size) font-size: var(--content-font-size)
// Inline // Inline

2
sass/elements/icon.sass
View File

@@ -8,13 +8,11 @@ $icon-dimensions-large: 3rem !default
--icon-dimensions-small: #{$icon-dimensions-small} --icon-dimensions-small: #{$icon-dimensions-small}
--icon-dimensions-medium: #{$icon-dimensions-medium} --icon-dimensions-medium: #{$icon-dimensions-medium}
--icon-dimensions-large: #{$icon-dimensions-large} --icon-dimensions-large: #{$icon-dimensions-large}
align-items: center align-items: center
display: inline-flex display: inline-flex
justify-content: center justify-content: center
height: var(--icon-dimensions) height: var(--icon-dimensions)
width: var(--icon-dimensions) width: var(--icon-dimensions)
// Sizes // Sizes
&.is-small &.is-small
--icon-dimensions: var(--icon-dimensions-small) --icon-dimensions: var(--icon-dimensions-small)

1
sass/elements/notification.sass
View File

@@ -13,7 +13,6 @@ $notification-colors: $colors !default
--notification-padding-ltr: #{$notification-padding-ltr} --notification-padding-ltr: #{$notification-padding-ltr}
--notification-padding-rtl: #{$notification-padding-rtl} --notification-padding-rtl: #{$notification-padding-rtl}
--notification-code-background-color: #{$notification-code-background-color} --notification-code-background-color: #{$notification-code-background-color}
@extend %block @extend %block
background-color: var(--notification-background-color) background-color: var(--notification-background-color)
border-radius: var(--notification-radius) border-radius: var(--notification-radius)

1
sass/elements/progress.sass
View File

@@ -14,7 +14,6 @@ $progress-colors: $colors !default
--progress-height: #{$progress-height} --progress-height: #{$progress-height}
--progress-value-background-color: #{$progress-value-background-color} --progress-value-background-color: #{$progress-value-background-color}
--progress-indeterminate-duration: #{$progress-indeterminate-duration} --progress-indeterminate-duration: #{$progress-indeterminate-duration}
@extend %block @extend %block
-moz-appearance: none -moz-appearance: none
-webkit-appearance: none -webkit-appearance: none

1
sass/elements/table.sass
View File

@@ -44,7 +44,6 @@ $table-colors: $colors !default
--table-row-hover-background-color: #{$table-row-hover-background-color} --table-row-hover-background-color: #{$table-row-hover-background-color}
--table-striped-row-even-background-color: #{$table-striped-row-even-background-color} --table-striped-row-even-background-color: #{$table-striped-row-even-background-color}
--table-striped-row-even-hover-background-color: #{$table-striped-row-even-hover-background-color} --table-striped-row-even-hover-background-color: #{$table-striped-row-even-hover-background-color}
@extend %block @extend %block
background-color: var(--table-body-background-color) background-color: var(--table-body-background-color)
color: var(--table-color) color: var(--table-color)

21
sass/elements/title.sass
View File

@@ -34,29 +34,13 @@ $subtitle-negative-margin: -1.25rem !default
vertical-align: middle vertical-align: middle
.title .title
// Approach A
// CSS Variable takes precedence, if theme is included
// --title-color: var(--text-strong, #{$title-color})
// color: var(--title-color)
// Approach B
// Sass Variable takes precedence
// Problem: --title-color is always set, so the fallback is never used
// --title-color: #{$title-color}
// color: var(--title-color, var(--text-strong))
// Approach C
// Sass variable references a CSS variable with fallback
// $title-color: var(--text-strong, #{$text-strong})
--title-color: #{$title-color} --title-color: #{$title-color}
color: var(--title-color)
--title-font-size: #{$title-size} --title-font-size: #{$title-size}
--title-weight: #{$title-weight} --title-weight: #{$title-weight}
--title-line-height: #{$title-line-height} --title-line-height: #{$title-line-height}
--title-strong-color: #{$title-strong-color} --title-strong-color: #{$title-strong-color}
--title-strong-weight: #{$title-strong-weight} --title-strong-weight: #{$title-strong-weight}
color: var(--title-color)
font-size: var(--title-font-size) font-size: var(--title-font-size)
font-weight: var(--title-weight) font-weight: var(--title-weight)
line-height: var(--title-line-height) line-height: var(--title-line-height)
@@ -84,7 +68,6 @@ $subtitle-negative-margin: -1.25rem !default
--subtitle-line-height: #{$subtitle-line-height} --subtitle-line-height: #{$subtitle-line-height}
--subtitle-strong-color: #{$subtitle-strong-color} --subtitle-strong-color: #{$subtitle-strong-color}
--subtitle-strong-weight: #{$subtitle-strong-weight} --subtitle-strong-weight: #{$subtitle-strong-weight}
color: var(--subtitle-color) color: var(--subtitle-color)
font-size: var(--subtitle-font-size) font-size: var(--subtitle-font-size)
font-weight: var(--subtitle-weight) font-weight: var(--subtitle-weight)
@@ -101,4 +84,4 @@ $subtitle-negative-margin: -1.25rem !default
@each $size in $sizes @each $size in $sizes
$i: index($sizes, $size) $i: index($sizes, $size)
&.is-#{$i} &.is-#{$i}
--subtitle-font-size: $size font-size: $size

1
sass/form/checkbox-radio.sass
View File

@@ -1,7 +1,6 @@
%checkbox-radio %checkbox-radio
--checkbox-radio-hover-color: #{$input-hover-color} --checkbox-radio-hover-color: #{$input-hover-color}
--checkbox-radio-disabled-color: #{$input-disabled-color} --checkbox-radio-disabled-color: #{$input-disabled-color}
cursor: pointer cursor: pointer
display: inline-block display: inline-block
line-height: 1.25 line-height: 1.25

11
sass/form/file.sass
View File

@@ -24,7 +24,6 @@ $file-colors: $form-colors !default
--file-name-border-style: #{$file-name-border-style} --file-name-border-style: #{$file-name-border-style}
--file-name-border-width: #{$file-name-border-width} --file-name-border-width: #{$file-name-border-width}
--file-name-max-width: #{$file-name-max-width} --file-name-max-width: #{$file-name-max-width}
@extend %unselectable @extend %unselectable
align-items: stretch align-items: stretch
display: flex display: flex
@@ -37,27 +36,27 @@ $file-colors: $form-colors !default
$color-invert: nth($pair, 2) $color-invert: nth($pair, 2)
&.is-#{$name} &.is-#{$name}
.file-cta .file-cta
background-color: $color background-color: var(--#{$name} #{$color})
border-color: transparent border-color: transparent
color: $color-invert color: var(--#{$name}-invert, #{$color-invert})
&:hover, &:hover,
&.is-hovered &.is-hovered
.file-cta .file-cta
background-color: bulmaDarken($color, 2.5%) background-color: bulmaDarken($color, 2.5%)
border-color: transparent border-color: transparent
color: $color-invert color: var(--#{$name}-invert, #{$color-invert})
&:focus, &:focus,
&.is-focused &.is-focused
.file-cta .file-cta
border-color: transparent border-color: transparent
box-shadow: 0 0 0.5em bulmaRgba($color, 0.25) box-shadow: 0 0 0.5em bulmaRgba($color, 0.25)
color: $color-invert color: var(--#{$name}-invert, #{$color-invert})
&:active, &:active,
&.is-active &.is-active
.file-cta .file-cta
background-color: bulmaDarken($color, 5%) background-color: bulmaDarken($color, 5%)
border-color: transparent border-color: transparent
color: $color-invert color: var(--#{$name}-invert, #{$color-invert})
// Sizes // Sizes
&.is-small &.is-small
--file-font-size: var(--size-small, #{$size-small}) --file-font-size: var(--size-small, #{$size-small})

1
sass/form/input-textarea.sass
View File

@@ -53,7 +53,6 @@ $textarea-colors: $form-colors !default
--textarea-padding: #{$textarea-padding} --textarea-padding: #{$textarea-padding}
--textarea-max-height: #{$textarea-max-height} --textarea-max-height: #{$textarea-max-height}
--textarea-min-height: #{$textarea-min-height} --textarea-min-height: #{$textarea-min-height}
@extend %input-textarea @extend %input-textarea
display: block display: block
max-width: 100% max-width: 100%

3
sass/form/select.sass
View File

@@ -6,13 +6,12 @@ $select-colors: $form-colors !default
--select-hover-color: #{$input-hover-color} --select-hover-color: #{$input-hover-color}
--select-disabled-color: #{$input-disabled-color} --select-disabled-color: #{$input-disabled-color}
--select-focus-box-shadow-size: #{$input-focus-box-shadow-size} --select-focus-box-shadow-size: #{$input-focus-box-shadow-size}
display: inline-block display: inline-block
max-width: 100% max-width: 100%
position: relative position: relative
vertical-align: top vertical-align: top
&:not(.is-multiple) &:not(.is-multiple)
height: $input-height height: var(--input-height)
&:not(.is-multiple):not(.is-loading) &:not(.is-multiple):not(.is-loading)
&::after &::after
@extend %arrow @extend %arrow

8
sass/form/tools.sass
View File

@@ -12,7 +12,6 @@ $label-colors: $form-colors !default
--label-color: #{$label-color} --label-color: #{$label-color}
--label-font-size: #{$label-font-size} --label-font-size: #{$label-font-size}
--label-font-weight: #{$label-weight} --label-font-weight: #{$label-weight}
color: var(--label-color) color: var(--label-color)
display: block display: block
font-size: var(--label-font-size) font-size: var(--label-font-size)
@@ -21,15 +20,14 @@ $label-colors: $form-colors !default
margin-bottom: 0.5em margin-bottom: 0.5em
// Sizes // Sizes
&.is-small &.is-small
font-size: $size-small font-size: var(--size-small, #{$size-small})
&.is-medium &.is-medium
font-size: $size-medium font-size: var(--size-medium, #{$size-medium})
&.is-large &.is-large
font-size: $size-large font-size: var(--size-large, #{$size-large})
.help .help
--help-font-size: #{$help-size} --help-font-size: #{$help-size}
display: block display: block
font-size: var(--help-font-size) font-size: var(--help-font-size)
margin-top: 0.25rem margin-top: 0.25rem

30
sass/helpers/flexbox.sass
View File

@@ -1,35 +1,35 @@
$flex-directions-values: row, row-reverse, column, column-reverse $flex-directions-values: row, row-reverse, column, column-reverse
@each $value in $flex-directions-values @each $value in $flex-directions-values
.is-flex-direction-#{$value} .is-flex-direction-#{$value}
flex-direction: $value !important flex-direction: $value !important
$flex-wrap-values: nowrap, wrap, wrap-reverse $flex-wrap-values: nowrap, wrap, wrap-reverse
@each $value in $flex-wrap-values @each $value in $flex-wrap-values
.is-flex-wrap-#{$value} .is-flex-wrap-#{$value}
flex-wrap: $value !important flex-wrap: $value !important
$justify-content-values: flex-start, flex-end, center, space-between, space-around, space-evenly, start, end, left, right $justify-content-values: flex-start, flex-end, center, space-between, space-around, space-evenly, start, end, left, right
@each $value in $justify-content-values @each $value in $justify-content-values
.is-justify-content-#{$value} .is-justify-content-#{$value}
justify-content: $value !important justify-content: $value !important
$align-content-values: flex-start, flex-end, center, space-between, space-around, space-evenly, stretch, start, end, baseline $align-content-values: flex-start, flex-end, center, space-between, space-around, space-evenly, stretch, start, end, baseline
@each $value in $align-content-values @each $value in $align-content-values
.is-align-content-#{$value} .is-align-content-#{$value}
align-content: $value !important align-content: $value !important
$align-items-values: stretch, flex-start, flex-end, center, baseline, start, end, self-start, self-end $align-items-values: stretch, flex-start, flex-end, center, baseline, start, end, self-start, self-end
@each $value in $align-items-values @each $value in $align-items-values
.is-align-items-#{$value} .is-align-items-#{$value}
align-items: $value !important align-items: $value !important
$align-self-values: auto, flex-start, flex-end, center, baseline, stretch $align-self-values: auto, flex-start, flex-end, center, baseline, stretch
@each $value in $align-self-values @each $value in $align-self-values
.is-align-self-#{$value} .is-align-self-#{$value}
align-self: $value !important align-self: $value !important
$flex-operators: grow, shrink $flex-operators: grow, shrink
@each $operator in $flex-operators @each $operator in $flex-operators
@for $i from 0 through 5 @for $i from 0 through 5
.is-flex-#{$operator}-#{$i} .is-flex-#{$operator}-#{$i}
flex-#{$operator}: $i !important flex-#{$operator}: $i !important

1
sass/layout/footer.sass
View File

@@ -6,7 +6,6 @@ $footer-padding: 3rem 1.5rem 6rem !default
--footer-background-color: #{$footer-background-color} --footer-background-color: #{$footer-background-color}
--footer-padding: #{$footer-padding} --footer-padding: #{$footer-padding}
--footer-color: #{$footer-color} --footer-color: #{$footer-color}
background-color: var(--footer-background-color) background-color: var(--footer-background-color)
padding: var(--footer-padding) padding: var(--footer-padding)
@if $footer-color @if $footer-color

23
sass/layout/hero.sass
View File

@@ -11,7 +11,6 @@ $hero-colors: $colors !default
--hero-body-padding-small: #{$hero-body-padding-small} --hero-body-padding-small: #{$hero-body-padding-small}
--hero-body-padding-medium: #{$hero-body-padding-medium} --hero-body-padding-medium: #{$hero-body-padding-medium}
--hero-body-padding-large: #{$hero-body-padding-large} --hero-body-padding-large: #{$hero-body-padding-large}
align-items: stretch align-items: stretch
display: flex display: flex
flex-direction: column flex-direction: column
@@ -26,21 +25,21 @@ $hero-colors: $colors !default
$color: nth($pair, 1) $color: nth($pair, 1)
$color-invert: nth($pair, 2) $color-invert: nth($pair, 2)
&.is-#{$name} &.is-#{$name}
background-color: $color background-color: var(--#{$name}, #{$color})
color: $color-invert color: var(--#{$name}-invert, #{$color-invert})
a:not(.button):not(.dropdown-item):not(.tag):not(.pagination-link.is-current), a:not(.button):not(.dropdown-item):not(.tag):not(.pagination-link.is-current),
strong strong
color: inherit color: inherit
.title .title
color: $color-invert color: var(--#{$name}-invert, #{$color-invert})
.subtitle .subtitle
color: bulmaRgba($color-invert, 0.9) color: bulmaRgba($color-invert, 0.9)
a:not(.button), a:not(.button),
strong strong
color: $color-invert color: var(--#{$name}-invert, #{$color-invert})
.navbar-menu .navbar-menu
+touch +touch
background-color: $color background-color: var(--#{$name}, #{$color})
.navbar-item, .navbar-item,
.navbar-link .navbar-link
color: bulmaRgba($color-invert, 0.7) color: bulmaRgba($color-invert, 0.7)
@@ -49,10 +48,10 @@ $hero-colors: $colors !default
&:hover, &:hover,
&.is-active &.is-active
background-color: bulmaDarken($color, 5%) background-color: bulmaDarken($color, 5%)
color: $color-invert color: var(--#{$name}-invert, #{$color-invert})
.tabs .tabs
a a
color: $color-invert color: var(--#{$name}-invert, #{$color-invert})
opacity: 0.9 opacity: 0.9
&:hover &:hover
opacity: 1 opacity: 1
@@ -62,15 +61,15 @@ $hero-colors: $colors !default
&.is-boxed, &.is-boxed,
&.is-toggle &.is-toggle
a a
color: $color-invert color: var(--#{$name}-invert, #{$color-invert})
&:hover &:hover
background-color: bulmaRgba($scheme-invert, 0.1) background-color: bulmaRgba($scheme-invert, 0.1)
li.is-active a li.is-active a
&, &,
&:hover &:hover
background-color: $color-invert background-color: var(--#{$name}-invert, #{$color-invert})
border-color: $color-invert border-color: var(--#{$name}-invert, #{$color-invert})
color: $color color: var(--#{$name}, #{$color})
// Modifiers // Modifiers
@if type-of($color) == 'color' @if type-of($color) == 'color'
&.is-bold &.is-bold

1
sass/layout/section.sass
View File

@@ -6,7 +6,6 @@ $section-padding-large: 18rem 1.5rem !default
--section-padding: #{$section-padding} --section-padding: #{$section-padding}
--section-padding-medium: #{$section-padding-medium} --section-padding-medium: #{$section-padding-medium}
--section-padding-large: #{$section-padding-large} --section-padding-large: #{$section-padding-large}
padding: var(--section-padding) padding: var(--section-padding)
// Responsiveness // Responsiveness
+desktop +desktop

2
sass/themes/basic.sass
View File

@@ -2,5 +2,5 @@
--black: #{$black} --black: #{$black}
--black-70: rgba(0, 0, 0, 0.7) --black-70: rgba(0, 0, 0, 0.7)
--white: #{$white} --white: #{$white}
// +registerCSSVarColor('primary', ($primary, $primary-invert, $primary-light, $primary-dark))
+registerCSSVarColors($colors) +registerCSSVarColors($colors)
+registerCSSVarColors($shades)

2
sass/utilities/controls.sass
View File

@@ -13,7 +13,7 @@ $control-padding-horizontal: calc(0.75em - #{$control-border-width}) !default
-moz-appearance: none -moz-appearance: none
-webkit-appearance: none -webkit-appearance: none
align-items: center align-items: center
border: $control-border-width solid transparent border: var(--control-border-width, #{$control-border-width}) solid transparent
border-radius: var(--control-radius, #{$control-radius}) border-radius: var(--control-radius, #{$control-radius})
box-shadow: none box-shadow: none
display: inline-flex display: inline-flex

8
sass/utilities/functions.sass
View File

@@ -79,14 +79,14 @@
@function findColorInvert($color, $fallback: null) @function findColorInvert($color, $fallback: null)
@if type-of($color) == 'color' @if type-of($color) == 'color'
@if (colorLuminance($color) > 0.55) @if (colorLuminance($color) > 0.55)
@return var(--black-70, rgba(0, 0, 0, 0.7)) @return rgba(0, 0, 0, 0.7)
@else @else
@return var(--white, #fff) @return #fff
@else if type-of($fallback) == 'color' @else if type-of($fallback) == 'color'
@if (colorLuminance($fallback) > 0.55) @if (colorLuminance($fallback) > 0.55)
@return var(--black-70, rgba(0, 0, 0, 0.7)) @return rgba(0, 0, 0, 0.7)
@else @else
@return var(--white, #fff) @return #fff
@return $color @return $color
@function findLightColor($color, $fallback: null) @function findLightColor($color, $fallback: null)

30
sass/utilities/mixins.sass
View File

@@ -16,20 +16,23 @@
top: calc(50% - (#{$width} / 2)) top: calc(50% - (#{$width} / 2))
=fa($size, $dimensions) =fa($size, $dimensions)
--fa-dimensions: #{$dimensions}
--fa-font-size: #{$size}
display: inline-block display: inline-block
font-size: $size font-size: var(--fa-font-size)
height: $dimensions height: var(--fa-dimensions)
line-height: $dimensions line-height: var(--fa-dimensions)
text-align: center text-align: center
vertical-align: top vertical-align: top
width: $dimensions width: var(--fa-dimensions)
=hamburger($dimensions) =hamburger($dimensions)
--hamburger-dimensions: #{$dimensions}
cursor: pointer cursor: pointer
display: block display: block
height: $dimensions height: var(--hamburger-dimensions)
position: relative position: relative
width: $dimensions width: var(--hamburger-dimensions)
span span
background-color: currentColor background-color: currentColor
display: block display: block
@@ -37,9 +40,9 @@
left: calc(50% - 8px) left: calc(50% - 8px)
position: absolute position: absolute
transform-origin: center transform-origin: center
transition-duration: $speed transition-duration: var(--speed, #{$speed})
transition-property: background-color, opacity, transform transition-property: background-color, opacity, transform
transition-timing-function: $easing transition-timing-function: var(--easing, #{$easing})
width: 16px width: 16px
&:nth-child(1) &:nth-child(1)
top: calc(50% - 6px) top: calc(50% - 6px)
@@ -165,7 +168,8 @@
+unselectable +unselectable
=arrow($color: transparent) =arrow($color: transparent)
border: 3px solid $color --arrow-color: #{$color}
border: 3px solid var(--arrow-color)
border-radius: 2px border-radius: 2px
border-right: 0 border-right: 0
border-top: 0 border-top: 0
@@ -184,8 +188,9 @@
+arrow +arrow
=block($spacing: $block-spacing) =block($spacing: $block-spacing)
--block-spacing: #{$spacing}
&:not(:last-child) &:not(:last-child)
margin-bottom: $spacing margin-bottom: var(--block-spacing)
%block %block
+block +block
@@ -260,9 +265,10 @@
+delete +delete
=loader =loader
--loader-border-color: var(--grey-lighter, #{$grey-lighter})
animation: spinAround 500ms infinite linear animation: spinAround 500ms infinite linear
border: 2px solid $grey-lighter border: 2px solid var(--loader-border-color)
border-radius: $radius-rounded border-radius: var(--radius-rounded, #{$radius-rounded})
border-right-color: transparent border-right-color: transparent
border-top-color: transparent border-top-color: transparent
content: "" content: ""