131 lines
2.7 KiB
SCSS
131 lines
2.7 KiB
SCSS
$button-box-shadow-standard: 0 2px 0 0 rgba($grey, 0.2);
|
|
|
|
.button {
|
|
font-weight: $weight-bold;
|
|
box-shadow: $button-box-shadow-standard;
|
|
border: 1px solid transparent;
|
|
text-decoration: none;
|
|
|
|
&:hover,
|
|
&.is-hovered {
|
|
text-decoration: none;
|
|
}
|
|
|
|
&:active,
|
|
&.is-active,
|
|
&:focus,
|
|
&.is-focused {
|
|
box-shadow: $button-box-shadow-standard;
|
|
text-decoration: none;
|
|
}
|
|
|
|
&.is-inverted.is-outlined {
|
|
box-shadow: none;
|
|
background: transparent;
|
|
}
|
|
|
|
&.is-inline {
|
|
vertical-align: middle;
|
|
}
|
|
|
|
&.is-compact {
|
|
padding: 0.25em 0.75em;
|
|
margin: -0.25em -0.25em -0.25em 0;
|
|
|
|
&.pull-right {
|
|
margin-right: -1em;
|
|
}
|
|
}
|
|
|
|
@each $name, $pair in $colors {
|
|
$color: nth($pair, 1);
|
|
$color-invert: nth($pair, 2);
|
|
|
|
&.is-#{$name} {
|
|
border-color: darken($color, 10%);
|
|
|
|
&:hover,
|
|
&.is-hovered {
|
|
background-color: lighten($color, 5%);
|
|
border-color: darken($color, 10%);
|
|
}
|
|
|
|
&:active,
|
|
&.is-active {
|
|
background-color: darken($color, 5%);
|
|
border-color: darken($color, 10%);
|
|
box-shadow: $button-box-shadow-standard;
|
|
}
|
|
|
|
&:focus,
|
|
&.is-focused {
|
|
border-color: darken($color, 10%);
|
|
box-shadow: $button-box-shadow-standard;
|
|
}
|
|
|
|
&.is-outlined {
|
|
border-color: $grey-lighter;
|
|
|
|
&.is-important {
|
|
border-color: $color;
|
|
}
|
|
|
|
&:hover,
|
|
&.is-hovered,
|
|
&:focus,
|
|
&.is-focused {
|
|
background-color: transparent;
|
|
border-color: darken($color, 10%);
|
|
color: $color;
|
|
}
|
|
|
|
&:active,
|
|
&.is-active {
|
|
background-color: transparent;
|
|
border-color: darken($color, 10%);
|
|
color: darken($color, 10%);
|
|
}
|
|
}
|
|
|
|
&.is-inverted.is-outlined {
|
|
border-color: rgba($color-invert, 0.5);
|
|
color: rgba($color-invert, 0.9);
|
|
|
|
&:hover,
|
|
&.is-hovered,
|
|
&:focus,
|
|
&.is-focused {
|
|
background-color: transparent;
|
|
border-color: $color-invert;
|
|
color: $color-invert;
|
|
}
|
|
|
|
&:active,
|
|
&.is-active {
|
|
background-color: rgba($color-invert, 0.1);
|
|
border-color: $color-invert;
|
|
color: $color-invert;
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// When an icon in a button should be treated like text,
|
|
// override the default Bulma behavior
|
|
.icon.is-text {
|
|
&:first-child:not(:last-child) {
|
|
margin-left: 0;
|
|
margin-right: 0;
|
|
}
|
|
&:last-child:not(:first-child) {
|
|
margin-left: 0;
|
|
margin-right: 0;
|
|
}
|
|
&:first-child:last-child {
|
|
margin-left: 0;
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
}
|