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

Browse Source
This commit is contained in:
Jeremy Thomas
2020-01-05 20:38:06 +00:00
parent 2a3e86cf20 a2768e27ff
commit 65946caa2b
174 changed files with 6337 additions and 3964 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
sass/elements/button.sass
View File

@@ -1,9 +1,9 @@
$button-color: $grey-darker !default
$button-color: $text-strong !default
$button-color-invert: $white !default
$button-background-color: $white !default
$button-background-color: $scheme-main !default
$button-family: false !default
$button-border-color: $grey-lighter !default
$button-border-color: $border !default
$button-border-width: $control-border-width !default
$button-padding-vertical: calc(0.5em - #{$button-border-width}) !default
@@ -15,7 +15,7 @@ $button-hover-border-color: $link-hover-border !default
$button-focus-color: $link-focus !default
$button-focus-border-color: $link-focus-border !default
$button-focus-box-shadow-size: 0 0 0 0.125em !default
$button-focus-box-shadow-color: rgba($link, 0.25) !default
$button-focus-box-shadow-color: bulmaRgba($link, 0.25) !default
$button-active-color: $link-active !default
$button-active-border-color: $link-active-border !default
@@ -30,14 +30,14 @@ $button-text-focus-box-shadow-color: $border-light !default
$button-text-active-background-color: $border-light !default
$button-text-active-color: $text-strong !default
$button-disabled-background-color: $white !default
$button-disabled-border-color: $grey-lighter !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
$button-static-color: $grey !default
$button-static-background-color: $white-ter !default
$button-static-border-color: $grey-lighter !default
$button-static-color: $text-light !default
$button-static-background-color: $scheme-main-ter !default
$button-static-border-color: $border !default
// The button sizes use mixins so they can be used at different breakpoints
=button-small
@@ -77,14 +77,14 @@ $button-static-border-color: $grey-lighter !default
height: 1.5em
width: 1.5em
&:first-child:not(:last-child)
margin-left: calc(-0.375em - #{$button-border-width})
margin-right: 0.1875em
margin-left: calc(#{-1 / 2 * $button-padding-horizontal} - #{$button-border-width})
margin-right: $button-padding-horizontal / 4
&:last-child:not(:first-child)
margin-left: 0.1875em
margin-right: calc(-0.375em - #{$button-border-width})
margin-left: $button-padding-horizontal / 4
margin-right: calc(#{-1 / 2 * $button-padding-horizontal} - #{$button-border-width})
&:first-child:last-child
margin-left: calc(-0.375em - #{$button-border-width})
margin-right: calc(-0.375em - #{$button-border-width})
margin-left: calc(#{-1 / 2 * $button-padding-horizontal} - #{$button-border-width})
margin-right: calc(#{-1 / 2 * $button-padding-horizontal} - #{$button-border-width})
// States
&:hover,
&.is-hovered
@@ -213,6 +213,23 @@ $button-static-border-color: $grey-lighter !default
border-color: $color-invert
box-shadow: none
color: $color-invert
// If light and dark colors are provided
@if length($pair) >= 4
$color-light: nth($pair, 3)
$color-dark: nth($pair, 4)
&.is-light
background-color: $color-light
color: $color-dark
&:hover,
&.is-hovered
background-color: darken($color-light, 2.5%)
border-color: transparent
color: $color-dark
&:active,
&.is-active
background-color: darken($color-light, 5%)
border-color: transparent
color: $color-dark
// Sizes
&.is-small
+button-small
@@ -247,8 +264,8 @@ $button-static-border-color: $grey-lighter !default
pointer-events: none
&.is-rounded
border-radius: $radius-rounded
padding-left: 1.25em
padding-right: 1.25em
padding-left: calc(#{$button-padding-horizontal} + 0.25em)
padding-right: calc(#{$button-padding-horizontal} + 0.25em)
.buttons
align-items: center