70 lines
1.6 KiB
SCSS
70 lines
1.6 KiB
SCSS
|
// %button
|
||
|
|
// This class defines a clickable element that looks like a label
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
// Variables
|
||
|
|
$picnic-button-margin: math.div($picnic-separation, 2) 0 !default;
|
||
|
|
$picnic-button-padding: $picnic-label-padding !default;
|
||
|
|
$picnic-button-hover: inset 0 0 0 99em rgba($picnic-white, $picnic-transparency) !default;
|
||
|
|
$picnic-button-click: inset 0 0 0 99em rgba($picnic-black, $picnic-transparency) !default;
|
||
|
|
$picnic-button-pseudo-hover: inset 0 0 0 99em rgba($picnic-black, math.div($picnic-transparency, 2)) !default;
|
||
|
|
$picnic-button-transition: $picnic-transition !default;
|
||
|
|
$picnic-button-radius: $picnic-label-radius !default;
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
// Definition
|
||
|
|
%button {
|
||
|
|
@extend %label;
|
||
|
|
|
||
|
|
margin: $picnic-button-margin;
|
||
|
|
cursor: pointer;
|
||
|
|
transition: $picnic-button-transition;
|
||
|
|
border-radius: $picnic-button-radius;
|
||
|
|
|
||
|
|
// Avoid the input { height: 2.2 }
|
||
|
|
height: auto;
|
||
|
|
vertical-align: baseline;
|
||
|
|
|
||
|
|
// This avoids a nasty "hover" issue (slightly taller on hover)
|
||
|
|
box-shadow: 0 0 rgba($picnic-black, 0) inset;
|
||
|
|
|
||
|
|
// Methods
|
||
|
|
&:hover,
|
||
|
|
&:focus {
|
||
|
|
box-shadow: $picnic-button-hover;
|
||
|
|
border: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
&.pseudo:hover,
|
||
|
|
&.pseudo:focus {
|
||
|
|
box-shadow: $picnic-button-pseudo-hover;
|
||
|
|
}
|
||
|
|
|
||
|
|
&.active,
|
||
|
|
&:active,
|
||
|
|
&.pseudo:active {
|
||
|
|
box-shadow: $picnic-button-click;
|
||
|
|
}
|
||
|
|
|
||
|
|
&[disabled] {
|
||
|
|
cursor: default;
|
||
|
|
box-shadow: none;
|
||
|
|
background: $picnic-dull;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
// // Note: If you try to do this there's a selector explossion:
|
||
|
|
|
||
|
|
// &%hover {
|
||
|
|
// box-shadow: $picnic-button-hover;
|
||
|
|
// }
|
||
|
|
|
||
|
|
// &:hover {
|
||
|
|
// @extend %hover;
|
||
|
|
// }
|
||
|
|
|
||
|
|
// Like `button.button:hover, .button[type="submit"], ...`
|