diff options
Diffstat (limited to 'assets/vendor/bulma/sass/elements/button.sass')
| -rw-r--r-- | assets/vendor/bulma/sass/elements/button.sass | 150 |
1 files changed, 109 insertions, 41 deletions
diff --git a/assets/vendor/bulma/sass/elements/button.sass b/assets/vendor/bulma/sass/elements/button.sass index 9331216..4bdf253 100644 --- a/assets/vendor/bulma/sass/elements/button.sass +++ b/assets/vendor/bulma/sass/elements/button.sass @@ -1,11 +1,12 @@ -$button-color: $grey-darker !default -$button-background-color: $white !default +$button-color: $text-strong !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.375em - #{$button-border-width}) !default -$button-padding-horizontal: 0.75em !default +$button-padding-vertical: calc(0.5em - #{$button-border-width}) !default +$button-padding-horizontal: 1em !default $button-hover-color: $link-hover !default $button-hover-border-color: $link-hover-border !default @@ -13,41 +14,46 @@ $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 $button-text-color: $text !default +$button-text-decoration: underline !default $button-text-hover-background-color: $background !default $button-text-hover-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 border-radius: $radius-small font-size: $size-small +=button-normal + font-size: $size-normal =button-medium font-size: $size-medium =button-large font-size: $size-large .button - +control - +unselectable + @extend %control + @extend %unselectable background-color: $button-background-color border-color: $button-border-color border-width: $button-border-width color: $button-color cursor: pointer + @if $button-family + font-family: $button-family justify-content: center padding-bottom: $button-padding-vertical padding-left: $button-padding-horizontal @@ -65,14 +71,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 + +ltr-property("margin", calc(#{-1 / 2 * $button-padding-horizontal} - #{$button-border-width}), false) + +ltr-property("margin", $button-padding-horizontal / 4) &:last-child:not(:first-child) - margin-left: 0.1875em - margin-right: calc(-0.375em - #{$button-border-width}) + +ltr-property("margin", $button-padding-horizontal / 4, false) + +ltr-property("margin", 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 @@ -93,7 +99,7 @@ $button-static-border-color: $grey-lighter !default background-color: transparent border-color: transparent color: $button-text-color - text-decoration: underline + text-decoration: $button-text-decoration &:hover, &.is-hovered, &:focus, @@ -102,9 +108,10 @@ $button-static-border-color: $grey-lighter !default color: $button-text-hover-color &:active, &.is-active - background-color: darken($button-text-hover-background-color, 5%) + background-color: bulmaDarken($button-text-hover-background-color, 5%) color: $button-text-hover-color - &[disabled] + &[disabled], + fieldset[disabled] & background-color: transparent border-color: transparent box-shadow: none @@ -117,7 +124,7 @@ $button-static-border-color: $grey-lighter !default color: $color-invert &:hover, &.is-hovered - background-color: darken($color, 2.5%) + background-color: bulmaDarken($color, 2.5%) border-color: transparent color: $color-invert &:focus, @@ -125,22 +132,25 @@ $button-static-border-color: $grey-lighter !default border-color: transparent color: $color-invert &:not(:active) - box-shadow: $button-focus-box-shadow-size rgba($color, 0.25) + box-shadow: $button-focus-box-shadow-size bulmaRgba($color, 0.25) &:active, &.is-active - background-color: darken($color, 5%) + background-color: bulmaDarken($color, 5%) border-color: transparent color: $color-invert - &[disabled] + &[disabled], + fieldset[disabled] & background-color: $color border-color: transparent box-shadow: none &.is-inverted background-color: $color-invert color: $color - &:hover - background-color: darken($color-invert, 5%) - &[disabled] + &:hover, + &.is-hovered + background-color: bulmaDarken($color-invert, 5%) + &[disabled], + fieldset[disabled] & background-color: $color-invert border-color: transparent box-shadow: none @@ -153,14 +163,23 @@ $button-static-border-color: $grey-lighter !default border-color: $color color: $color &:hover, - &:focus + &.is-hovered, + &:focus, + &.is-focused background-color: $color border-color: $color color: $color-invert &.is-loading &::after border-color: transparent transparent $color $color !important - &[disabled] + &:hover, + &.is-hovered, + &:focus, + &.is-focused + &::after + border-color: transparent transparent $color-invert $color-invert !important + &[disabled], + fieldset[disabled] & background-color: transparent border-color: $color box-shadow: none @@ -170,23 +189,53 @@ $button-static-border-color: $grey-lighter !default border-color: $color-invert color: $color-invert &:hover, - &:focus + &.is-hovered, + &:focus, + &.is-focused background-color: $color-invert color: $color - &[disabled] + &.is-loading + &:hover, + &.is-hovered, + &:focus, + &.is-focused + &::after + border-color: transparent transparent $color $color !important + &[disabled], + fieldset[disabled] & background-color: transparent 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: bulmaDarken($color-light, 2.5%) + border-color: transparent + color: $color-dark + &:active, + &.is-active + background-color: bulmaDarken($color-light, 5%) + border-color: transparent + color: $color-dark // Sizes &.is-small +button-small + &.is-normal + +button-normal &.is-medium +button-medium &.is-large +button-large // Modifiers - &[disabled] + &[disabled], + fieldset[disabled] & background-color: $button-disabled-background-color border-color: $button-disabled-border-color box-shadow: $button-disabled-shadow @@ -198,7 +247,7 @@ $button-static-border-color: $grey-lighter !default color: transparent !important pointer-events: none &::after - +loader + @extend %loader +center(1em) position: absolute !important &.is-static @@ -209,8 +258,8 @@ $button-static-border-color: $grey-lighter !default pointer-events: none &.is-rounded border-radius: $radius-rounded - padding-left: 1em - padding-right: 1em + padding-left: calc(#{$button-padding-horizontal} + 0.25em) + padding-right: calc(#{$button-padding-horizontal} + 0.25em) .buttons align-items: center @@ -219,12 +268,22 @@ $button-static-border-color: $grey-lighter !default justify-content: flex-start .button margin-bottom: 0.5rem - &:not(:last-child) - margin-right: 0.5rem + &:not(:last-child):not(.is-fullwidth) + +ltr-property("margin", 0.5rem) &:last-child margin-bottom: -0.5rem &:not(:last-child) margin-bottom: 1rem + // Sizes + &.are-small + .button:not(.is-normal):not(.is-medium):not(.is-large) + +button-small + &.are-medium + .button:not(.is-small):not(.is-normal):not(.is-large) + +button-medium + &.are-large + .button:not(.is-small):not(.is-normal):not(.is-medium) + +button-large &.has-addons .button &:not(:first-child) @@ -233,9 +292,9 @@ $button-static-border-color: $grey-lighter !default &:not(:last-child) border-bottom-right-radius: 0 border-top-right-radius: 0 - margin-right: -1px + +ltr-property("margin", -1px) &:last-child - margin-right: 0 + +ltr-property("margin", 0) &:hover, &.is-hovered z-index: 2 @@ -249,7 +308,16 @@ $button-static-border-color: $grey-lighter !default z-index: 4 &.is-expanded flex-grow: 1 + flex-shrink: 1 &.is-centered justify-content: center + &:not(.has-addons) + .button:not(.is-fullwidth) + margin-left: 0.25rem + margin-right: 0.25rem &.is-right justify-content: flex-end + &:not(.has-addons) + .button:not(.is-fullwidth) + margin-left: 0.25rem + margin-right: 0.25rem |