414 lines
11 KiB
SCSS
414 lines
11 KiB
SCSS
|
// Foundation for Sites by ZURB
|
||
|
|
// foundation.zurb.com
|
||
|
|
// Licensed under MIT Open Source
|
||
|
|
|
||
|
|
////
|
||
|
|
/// @group button
|
||
|
|
////
|
||
|
|
|
||
|
|
/// Font family for button elements.
|
||
|
|
/// @type Font
|
||
|
|
$button-font-family: inherit !default;
|
||
|
|
|
||
|
|
/// Padding inside buttons.
|
||
|
|
/// @type List
|
||
|
|
$button-padding: 0.85em 1em !default;
|
||
|
|
|
||
|
|
/// Margin around buttons.
|
||
|
|
/// @type List
|
||
|
|
$button-margin: 0 0 $global-margin 0 !default;
|
||
|
|
|
||
|
|
/// Default fill for buttons. Can either be `solid` or `hollow`.
|
||
|
|
/// @type Keyword
|
||
|
|
$button-fill: solid !default;
|
||
|
|
|
||
|
|
/// Default background color for buttons.
|
||
|
|
/// @type Color
|
||
|
|
$button-background: $primary-color !default;
|
||
|
|
|
||
|
|
/// Background color on hover for buttons.
|
||
|
|
/// @type Color
|
||
|
|
$button-background-hover: scale-color($button-background, $lightness: -15%) !default;
|
||
|
|
|
||
|
|
/// Font color for buttons.
|
||
|
|
/// @type List
|
||
|
|
$button-color: $white !default;
|
||
|
|
|
||
|
|
/// Alternative font color for buttons.
|
||
|
|
/// @type List
|
||
|
|
$button-color-alt: $black !default;
|
||
|
|
|
||
|
|
/// Border radius for buttons, defaulted to global-radius.
|
||
|
|
/// @type Number
|
||
|
|
$button-radius: $global-radius !default;
|
||
|
|
|
||
|
|
/// Border width for hollow outline buttons
|
||
|
|
/// @type Number
|
||
|
|
$button-hollow-border-width: 1px !default;
|
||
|
|
|
||
|
|
/// Sizes for buttons.
|
||
|
|
/// @type Map
|
||
|
|
$button-sizes: (
|
||
|
|
tiny: 0.6rem,
|
||
|
|
small: 0.75rem,
|
||
|
|
default: 0.9rem,
|
||
|
|
large: 1.25rem,
|
||
|
|
) !default;
|
||
|
|
|
||
|
|
/// Coloring classes. A map of classes to output in your CSS, like `.secondary`, `.success`, and so on.
|
||
|
|
/// @type Map
|
||
|
|
$button-palette: $foundation-palette !default;
|
||
|
|
|
||
|
|
/// opacity for a disabled button.
|
||
|
|
/// @type List
|
||
|
|
$button-opacity-disabled: 0.25 !default;
|
||
|
|
|
||
|
|
/// Background color lightness on hover for buttons.
|
||
|
|
/// @type Number
|
||
|
|
$button-background-hover-lightness: -20% !default;
|
||
|
|
|
||
|
|
/// Color lightness on hover for hollow buttons.
|
||
|
|
/// @type Number
|
||
|
|
$button-hollow-hover-lightness: -50% !default;
|
||
|
|
|
||
|
|
// Internal: flip from margin-right to margin-left for defaults
|
||
|
|
@if $global-text-direction == 'rtl' {
|
||
|
|
$button-margin: 0 0 $global-margin $global-margin !default;
|
||
|
|
}
|
||
|
|
|
||
|
|
/// transitions for buttons.
|
||
|
|
/// @type List
|
||
|
|
$button-transition: background-color 0.25s ease-out, color 0.25s ease-out !default;
|
||
|
|
|
||
|
|
/// Additional responsive classes for .expanded
|
||
|
|
/// @type Boolean
|
||
|
|
$button-responsive-expanded: false !default;
|
||
|
|
|
||
|
|
// TODO: Document button-base() mixin
|
||
|
|
@mixin button-base {
|
||
|
|
@include disable-mouse-outline;
|
||
|
|
display: inline-block;
|
||
|
|
vertical-align: middle;
|
||
|
|
margin: $button-margin;
|
||
|
|
|
||
|
|
@if (type-of($button-padding) == 'map') {
|
||
|
|
@each $size, $padding in $button-padding {
|
||
|
|
@include breakpoint($size) {
|
||
|
|
padding: $padding;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
@else {
|
||
|
|
padding: $button-padding;
|
||
|
|
}
|
||
|
|
|
||
|
|
border: 1px solid transparent;
|
||
|
|
border-radius: $button-radius;
|
||
|
|
transition: $button-transition;
|
||
|
|
font-family: $button-font-family;
|
||
|
|
font-size: map-get($button-sizes, default);
|
||
|
|
-webkit-appearance: none; // sass-lint:disable-line no-vendor-prefixes
|
||
|
|
line-height: 1;
|
||
|
|
text-align: center;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
|
||
|
|
/// Expands a button to make it full-width.
|
||
|
|
/// @param {Boolean} $expand [true] - Set to `true` to enable the expand behavior. Set to `false` to reverse this behavior.
|
||
|
|
@mixin button-expand($expand: true) {
|
||
|
|
@if $expand {
|
||
|
|
display: block;
|
||
|
|
width: 100%;
|
||
|
|
margin-right: 0;
|
||
|
|
margin-left: 0;
|
||
|
|
}
|
||
|
|
@else {
|
||
|
|
display: inline-block;
|
||
|
|
width: auto;
|
||
|
|
margin: $button-margin;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/// Sets the visual style of a button.
|
||
|
|
/// @param {Color} $background [$button-background] - Background color of the button.
|
||
|
|
/// @param {Color} $background-hover [$button-background-hover] - Background color of the button on hover. Set to `auto` to have the mixin automatically generate a hover color.
|
||
|
|
/// @param {Color} $color [$button-color] - Text color of the button. Set to `auto` to automatically generate a color based on the background color.
|
||
|
|
@mixin button-style(
|
||
|
|
$background: $button-background,
|
||
|
|
$background-hover: $button-background-hover,
|
||
|
|
$color: $button-color,
|
||
|
|
$background-hover-lightness: $button-background-hover-lightness
|
||
|
|
) {
|
||
|
|
@if $color == auto {
|
||
|
|
$color: color-pick-contrast($background, ($button-color, $button-color-alt));
|
||
|
|
}
|
||
|
|
|
||
|
|
@if $background-hover == auto {
|
||
|
|
$background-hover: scale-color($background, $lightness: $background-hover-lightness);
|
||
|
|
}
|
||
|
|
|
||
|
|
background-color: $background;
|
||
|
|
color: $color;
|
||
|
|
|
||
|
|
&:hover, &:focus {
|
||
|
|
background-color: $background-hover;
|
||
|
|
color: $color;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/// Removes background fill on hover and focus for hollow buttons.
|
||
|
|
@mixin button-hollow {
|
||
|
|
&,
|
||
|
|
&:hover,
|
||
|
|
&:focus {
|
||
|
|
background-color: transparent;
|
||
|
|
}
|
||
|
|
|
||
|
|
&.disabled,
|
||
|
|
&[disabled] {
|
||
|
|
&,
|
||
|
|
&:hover, &:focus {
|
||
|
|
background-color: transparent;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@mixin button-hollow-style(
|
||
|
|
$color: $button-background,
|
||
|
|
$hover-lightness: $button-hollow-hover-lightness,
|
||
|
|
$border-width: $button-hollow-border-width
|
||
|
|
) {
|
||
|
|
$color-hover: scale-color($color, $lightness: $hover-lightness);
|
||
|
|
|
||
|
|
border: $border-width solid $color;
|
||
|
|
color: $color;
|
||
|
|
|
||
|
|
&:hover, &:focus {
|
||
|
|
border-color: $color-hover;
|
||
|
|
color: $color-hover;
|
||
|
|
&.disabled,
|
||
|
|
&[disabled] {
|
||
|
|
border: $border-width solid $color;
|
||
|
|
color: $color;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/// Adds disabled styles to a button by fading the element, reseting the cursor, and disabling pointer events.
|
||
|
|
/// @param {Color} $background [$button-background] - Background color of the disabled button.
|
||
|
|
/// @param {Color} $color [$button-color] - Text color of the disabled button. Set to `auto` to have the mixin automatically generate a color based on the background color.
|
||
|
|
@mixin button-disabled(
|
||
|
|
$background: $button-background,
|
||
|
|
$color: $button-color
|
||
|
|
) {
|
||
|
|
@if $color == auto {
|
||
|
|
$color: color-pick-contrast($background, ($button-color, $button-color-alt));
|
||
|
|
}
|
||
|
|
|
||
|
|
opacity: $button-opacity-disabled;
|
||
|
|
cursor: not-allowed;
|
||
|
|
|
||
|
|
&, &:hover, &:focus {
|
||
|
|
background-color: $background;
|
||
|
|
color: $color;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/// Adds a dropdown arrow to a button.
|
||
|
|
/// @param {Number} $size [0.4em] - Size of the arrow. We recommend using an `em` value so the triangle scales when used inside different sizes of buttons.
|
||
|
|
/// @param {Color} $color [white] - Color of the arrow.
|
||
|
|
/// @param {Number} $offset [$button-padding] - Distance between the arrow and the text of the button. Defaults to whatever the right padding of a button is.
|
||
|
|
@mixin button-dropdown(
|
||
|
|
$size: 0.4em,
|
||
|
|
$color: $white,
|
||
|
|
$offset: get-side($button-padding, right)
|
||
|
|
) {
|
||
|
|
&::after {
|
||
|
|
@include css-triangle($size, $color, down);
|
||
|
|
position: relative;
|
||
|
|
top: 0.4em; // Aligns the arrow with the text of the button
|
||
|
|
|
||
|
|
display: inline-block;
|
||
|
|
float: #{$global-right};
|
||
|
|
margin-#{$global-left}: $offset;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/// Adds all styles for a button. For more granular control over styles, use the individual button mixins.
|
||
|
|
/// @param {Boolean} $expand [false] - Set to `true` to make the button full-width.
|
||
|
|
/// @param {Color} $background [$button-background] - Background color of the button.
|
||
|
|
/// @param {Color} $background-hover [$button-background-hover] - Background color of the button on hover. Set to `auto` to have the mixin automatically generate a hover color.
|
||
|
|
/// @param {Color} $color [$button-color] - Text color of the button. Set to `auto` to automatically generate a color based on the background color.
|
||
|
|
/// @param {Keyword} $style [solid] - Set to `hollow` to create a hollow button. The color defined in `$background` will be used as the primary color of the button.
|
||
|
|
@mixin button(
|
||
|
|
$expand: false,
|
||
|
|
$background: $button-background,
|
||
|
|
$background-hover: $button-background-hover,
|
||
|
|
$color: $button-color,
|
||
|
|
$style: $button-fill
|
||
|
|
) {
|
||
|
|
@include button-base;
|
||
|
|
|
||
|
|
@if $style == solid {
|
||
|
|
@include button-style($background, $background-hover, $color);
|
||
|
|
}
|
||
|
|
@else if $style == hollow {
|
||
|
|
@include button-hollow;
|
||
|
|
@include button-hollow-style($background);
|
||
|
|
}
|
||
|
|
|
||
|
|
@if $expand {
|
||
|
|
@include button-expand;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@mixin foundation-button {
|
||
|
|
.button {
|
||
|
|
@include button;
|
||
|
|
|
||
|
|
// Sizes
|
||
|
|
@each $size, $value in map-remove($button-sizes, default) {
|
||
|
|
&.#{$size} {
|
||
|
|
font-size: $value;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
&.expanded { @include button-expand; }
|
||
|
|
|
||
|
|
@if $button-responsive-expanded {
|
||
|
|
@each $size in $breakpoint-classes {
|
||
|
|
@include breakpoint(#{$size} only) {
|
||
|
|
&.#{$size}-only-expanded {
|
||
|
|
@include button-expand;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
@if $size != $-zf-zero-breakpoint {
|
||
|
|
@include breakpoint(#{$size} down) {
|
||
|
|
&.#{$size}-down-expanded {
|
||
|
|
@include button-expand;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@include breakpoint(#{$size}) {
|
||
|
|
&.#{$size}-expanded {
|
||
|
|
@include button-expand;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Colors
|
||
|
|
@each $name, $color in $button-palette {
|
||
|
|
@if $button-fill != hollow {
|
||
|
|
&.#{$name} {
|
||
|
|
@include button-style($color, auto, auto);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
@else {
|
||
|
|
&.#{$name} {
|
||
|
|
@include button-hollow-style($color);
|
||
|
|
}
|
||
|
|
|
||
|
|
&.#{$name}.dropdown::after {
|
||
|
|
border-top-color: $color;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Disabled style
|
||
|
|
&.disabled,
|
||
|
|
&[disabled] {
|
||
|
|
@include button-disabled;
|
||
|
|
|
||
|
|
@each $name, $color in $button-palette {
|
||
|
|
&.#{$name} {
|
||
|
|
@include button-disabled($color, auto);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Hollow style
|
||
|
|
@if $button-fill != hollow {
|
||
|
|
&.hollow {
|
||
|
|
@include button-hollow;
|
||
|
|
@include button-hollow-style;
|
||
|
|
|
||
|
|
@each $name, $color in $button-palette {
|
||
|
|
&.#{$name} {
|
||
|
|
@include button-hollow-style($color);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Clear style
|
||
|
|
@if $button-fill != clear {
|
||
|
|
&.clear {
|
||
|
|
@include button-hollow;
|
||
|
|
@include button-hollow-style;
|
||
|
|
|
||
|
|
&, &:hover, &:focus {
|
||
|
|
&, &.disabled, &[disabled] {
|
||
|
|
border-color: transparent;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@each $name, $color in $button-palette {
|
||
|
|
&.#{$name} {
|
||
|
|
@include button-hollow-style($color);
|
||
|
|
|
||
|
|
&, &:hover,
|
||
|
|
&:focus {
|
||
|
|
&,
|
||
|
|
&.disabled,
|
||
|
|
&[disabled] {
|
||
|
|
border-color: transparent;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Dropdown arrow
|
||
|
|
&.dropdown {
|
||
|
|
@include button-dropdown;
|
||
|
|
|
||
|
|
@if $button-fill == hollow {
|
||
|
|
&::after {
|
||
|
|
border-top-color: $button-background;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
&.hollow, &.clear {
|
||
|
|
&::after {
|
||
|
|
border-top-color: $button-background;
|
||
|
|
}
|
||
|
|
|
||
|
|
@each $name, $color in $button-palette {
|
||
|
|
&.#{$name} {
|
||
|
|
&::after {
|
||
|
|
border-top-color: $color;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Button with dropdown arrow only
|
||
|
|
&.arrow-only::after {
|
||
|
|
top: -0.1em;
|
||
|
|
float: none;
|
||
|
|
margin-#{$global-left}: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
a.button { // sass-lint:disable-line no-qualifying-elements
|
||
|
|
&:hover,
|
||
|
|
&:focus {
|
||
|
|
text-decoration: none;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|