133 lines
3.4 KiB
SCSS
133 lines
3.4 KiB
SCSS
// Config
|
|
$button-border-color: transparent !default;
|
|
$button-background-color: get-color-brand(secondary) !default;
|
|
$button-font-color: get-color(unique, white) !default;
|
|
|
|
$button-hover-border-color: get-color-brand(secondary) !default;
|
|
$button-hover-background-color: transparent !default;
|
|
$button-hover-font-color: get-color-brand(secondary) !default;
|
|
|
|
$button-ghost-border-color: get-color(unique, white) !default;
|
|
$button-ghost-background-color: get-color(unique, white) !default;
|
|
$button-ghost-font-color: get-color-brand(secondary) !default;
|
|
|
|
$button-quite-border-color: get-color(blue, light) !default;
|
|
$button-quite-background-color: get-color(blue, light) !default;
|
|
$button-quite-font-color: get-color(unique, white) !default;
|
|
|
|
$button-quite-hover-border-color: get-color-brand(primaryGradation) !default;
|
|
$button-quite-hover-background-color: transparent !default;
|
|
$button-quite-hover-font-color: get-color-brand(primaryGradation) !default;
|
|
|
|
$button-plain-border-color: transparent !default;
|
|
$button-plain-background-color: transparent !default;
|
|
$button-plain-font-color: get-color-brand(secondary) !default;
|
|
|
|
// Component
|
|
/// @group Buttons
|
|
.c-button {
|
|
cursor: pointer;
|
|
display: inline-block;
|
|
padding: get-spacing-squish(l);
|
|
vertical-align: top;
|
|
-webkit-appearance: none;
|
|
-moz-appearance: none;
|
|
@include border($button-border-color);
|
|
border-radius: $border-radius;
|
|
background: $button-background-color;
|
|
color: $button-font-color;
|
|
font-size: 1.8rem;
|
|
font-weight: bold;
|
|
line-height: 1;
|
|
text-align: center;
|
|
text-decoration: none;
|
|
text-transform: uppercase;
|
|
|
|
&:hover {
|
|
border-color: $button-hover-border-color;
|
|
background-color: $button-hover-background-color;
|
|
color: $button-hover-font-color;
|
|
}
|
|
|
|
&:focus {
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
|
|
/// Quite Button
|
|
/// @group Buttons
|
|
.c-button--quite {
|
|
border-color: $button-quite-border-color;
|
|
background-color: $button-quite-background-color;
|
|
color: $button-quite-font-color;
|
|
|
|
&:hover {
|
|
border-color: $button-quite-hover-border-color;
|
|
background-color: $button-quite-hover-background-color;
|
|
color: $button-quite-hover-font-color;
|
|
}
|
|
}
|
|
|
|
/// Destructive Button
|
|
/// @group Buttons
|
|
.c-button--destructive {
|
|
border-color: get-color-semantic(danger);
|
|
background-color: get-color-semantic(danger);
|
|
color: get-color(unique, white);
|
|
|
|
&:hover {
|
|
border-color: get-color-semantic(danger);
|
|
background-color: transparent;
|
|
color: get-color-semantic(danger);
|
|
}
|
|
}
|
|
|
|
/// Ghost Button
|
|
/// @group Buttons
|
|
.c-button--ghost {
|
|
border-color: $button-ghost-border-color;
|
|
background-color: $button-ghost-background-color;
|
|
color: $button-ghost-font-color;
|
|
}
|
|
|
|
/// Plain Button
|
|
/// @group Buttons
|
|
.c-button--plain {
|
|
border-color: $button-plain-border-color;
|
|
background-color: $button-plain-background-color;
|
|
color: $button-plain-font-color;
|
|
}
|
|
|
|
/// Minion Button
|
|
/// @group Buttons
|
|
.c-button--minion {
|
|
padding: get-spacing-squish(m);
|
|
font-size: 1.8rem;
|
|
}
|
|
|
|
/// Stateless Button
|
|
/// @group Buttons
|
|
.c-button--stateless {
|
|
cursor: default;
|
|
background-color: get-color(blue, light);
|
|
font-weight: normal;
|
|
text-transform: initial;
|
|
|
|
&:hover {
|
|
border-color: get-color(blue, light);
|
|
background-color: get-color(blue, light);
|
|
color: get-color(unique, white);
|
|
}
|
|
}
|
|
|
|
/// Squared Button
|
|
/// @group Buttons
|
|
.c-button--squared {
|
|
padding: get-spacing-inset(s);
|
|
line-height: 0;
|
|
|
|
.c-icon {
|
|
display: block;
|
|
line-height: 0;
|
|
}
|
|
} |