summaryrefslogtreecommitdiff
path: root/public/css/_sass/elements/button.sass
diff options
context:
space:
mode:
authorAdam Carpenter <gitlab@53hor.net>2019-10-26 15:33:52 -0400
committerAdam Carpenter <gitlab@53hor.net>2019-10-26 15:33:52 -0400
commit3be4959623190f0bb6d880fe1fc2a9c187c4171e (patch)
tree0e0007d1b3953b0c209b526ffd20583412ed28be /public/css/_sass/elements/button.sass
parent92f4799f50c94f2de1d3d94b0fb20ff6d93614eb (diff)
downloadcobalt-site-3be4959623190f0bb6d880fe1fc2a9c187c4171e.tar.xz
cobalt-site-3be4959623190f0bb6d880fe1fc2a9c187c4171e.zip
Updated Bulma!
Diffstat (limited to 'public/css/_sass/elements/button.sass')
-rw-r--r--public/css/_sass/elements/button.sass89
1 files changed, 68 insertions, 21 deletions
diff --git a/public/css/_sass/elements/button.sass b/public/css/_sass/elements/button.sass
index e75cd2f..22078ae 100644
--- a/public/css/_sass/elements/button.sass
+++ b/public/css/_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
@@ -22,14 +23,14 @@ $button-text-color: $text !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
@@ -50,6 +51,8 @@ $button-static-border-color: $grey-lighter !default
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
@@ -67,14 +70,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
@@ -142,7 +145,8 @@ $button-static-border-color: $grey-lighter !default
&.is-inverted
background-color: $color-invert
color: $color
- &:hover
+ &:hover,
+ &.is-hovered
background-color: darken($color-invert, 5%)
&[disabled],
fieldset[disabled] &
@@ -158,13 +162,21 @@ $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
+ &:hover,
+ &.is-hovered,
+ &:focus,
+ &.is-focused
+ &::after
+ border-color: transparent transparent $color-invert $color-invert !important
&[disabled],
fieldset[disabled] &
background-color: transparent
@@ -176,15 +188,41 @@ $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
+ &.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: 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
@@ -219,8 +257,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
@@ -269,7 +307,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