Ark/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma synced 2026-03-19 03:44:31 -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

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-link-hover-shadow: #{$box-link-hover-shadow}
--box-link-active-shadow: #{$box-link-active-shadow}
@extend %block
background-color: var(--box-background-color)
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-color: #{$button-hover-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-active-border-color: #{$button-active-border-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-border-color: #{$button-static-border-color}
--button-static-color: #{$button-static-color}
@extend %control
@extend %unselectable
background-color: var(--button-background-color)
@@ -147,14 +148,20 @@ $button-colors: $colors !default
$color: nth($pair, 1)
$color-invert: nth($pair, 2)
&.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})
border-color: transparent
color: var(--#{$name}-invert, #{$color-invert})
&:hover,
&.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%)})
border-color: transparent
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)
&: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%)})
border-color: transparent
color: var(--#{$name}-invert, #{$color-invert})
@@ -246,16 +250,22 @@ $button-colors: $colors !default
$color-light: nth($pair, 3)
$color-dark: nth($pair, 4)
&.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})
color: var(--#{$name}-dark, #{$color-dark})
&:hover,
&.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
color: var(--#{$name}-dark, #{$color-dark})
&:active,
&.is-active
background-color: bulmaDarken($color-light, 5%)
background-color: var(--button-light-active-background-color, #{bulmaDarken($color-light, 5%)})
border-color: transparent
color: var(--#{$name}-dark, #{$color-dark})
// 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-foot-cell-border-width: #{$content-table-foot-cell-border-width}
--content-table-foot-cell-color: #{$content-table-foot-cell-color}
@extend %block
font-size: var(--content-font-size)
// 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-medium: #{$icon-dimensions-medium}
--icon-dimensions-large: #{$icon-dimensions-large}
align-items: center
display: inline-flex
justify-content: center
height: var(--icon-dimensions)
width: var(--icon-dimensions)
// Sizes
&.is-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-rtl: #{$notification-padding-rtl}
--notification-code-background-color: #{$notification-code-background-color}
@extend %block
background-color: var(--notification-background-color)
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-value-background-color: #{$progress-value-background-color}
--progress-indeterminate-duration: #{$progress-indeterminate-duration}
@extend %block
-moz-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-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}
@extend %block
background-color: var(--table-body-background-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
.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}
color: var(--title-color)
--title-font-size: #{$title-size}
--title-weight: #{$title-weight}
--title-line-height: #{$title-line-height}
--title-strong-color: #{$title-strong-color}
--title-strong-weight: #{$title-strong-weight}
color: var(--title-color)
font-size: var(--title-font-size)
font-weight: var(--title-weight)
line-height: var(--title-line-height)
@@ -84,7 +68,6 @@ $subtitle-negative-margin: -1.25rem !default
--subtitle-line-height: #{$subtitle-line-height}
--subtitle-strong-color: #{$subtitle-strong-color}
--subtitle-strong-weight: #{$subtitle-strong-weight}
color: var(--subtitle-color)
font-size: var(--subtitle-font-size)
font-weight: var(--subtitle-weight)
@@ -101,4 +84,4 @@ $subtitle-negative-margin: -1.25rem !default
@each $size in $sizes
$i: index($sizes, $size)
&.is-#{$i}
--subtitle-font-size: $size
font-size: $size