136 lines
2.1 KiB
SCSS
136 lines
2.1 KiB
SCSS
$default-button-height: 4.0rem;
|
|
|
|
.button {
|
|
align-items: center;
|
|
display: inline-flex;
|
|
height: $default-button-height;
|
|
margin-bottom: 0;
|
|
|
|
.button__content {
|
|
width: 100%;
|
|
}
|
|
|
|
.spinner {
|
|
padding: 0 var(--space-small);
|
|
}
|
|
|
|
.icon--emoji+.button__content {
|
|
padding-left: var(--space-small);
|
|
}
|
|
|
|
.icon--font+.button__content {
|
|
padding-left: var(--space-small);
|
|
}
|
|
|
|
// @TODDO - Remove after moving all buttons to woot-button
|
|
.icon+.button__content {
|
|
padding-left: var(--space-small);
|
|
width: auto;
|
|
}
|
|
|
|
&.expanded {
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
&.round {
|
|
border-radius: $space-larger;
|
|
}
|
|
|
|
// @TODO Use with link
|
|
|
|
&.compact {
|
|
padding-bottom: 0;
|
|
padding-top: 0;
|
|
}
|
|
|
|
// Smooth style
|
|
&.smooth {
|
|
@include button-style(var(--w-50), var(--w-100), var(--w-700));
|
|
|
|
|
|
&.secondary {
|
|
@include button-style(var(--s-50), var(--s-100), var(--s-700));
|
|
}
|
|
|
|
&.success {
|
|
@include button-style(var(--g-50), var(--g-100), var(--g-700));
|
|
}
|
|
|
|
&.alert {
|
|
@include button-style(var(--r-50), var(--r-100), var(--r-700));
|
|
}
|
|
|
|
&.warning {
|
|
@include button-style(var(--y-100), var(--y-200), var(--y-900));
|
|
}
|
|
}
|
|
|
|
&.clear.button--only-icon:hover {
|
|
background: var(--w-50);
|
|
|
|
|
|
&.secondary {
|
|
background: var(--s-50);
|
|
}
|
|
|
|
&.success {
|
|
background: var(--g-50);
|
|
}
|
|
|
|
&.alert {
|
|
background: var(--r-50);
|
|
}
|
|
|
|
&.warning {
|
|
background: var(--y-100);
|
|
}
|
|
}
|
|
|
|
// Sizes
|
|
&.tiny {
|
|
height: var(--space-medium);
|
|
}
|
|
|
|
&.small {
|
|
height: var(--space-large);
|
|
}
|
|
|
|
&.large {
|
|
height: var(--space-larger);
|
|
}
|
|
|
|
&.button--only-icon {
|
|
justify-content: center;
|
|
padding-left: 0;
|
|
padding-right: 0;
|
|
width: $default-button-height;
|
|
|
|
&.tiny {
|
|
width: var(--space-medium);
|
|
}
|
|
|
|
&.small {
|
|
width: var(--space-large);
|
|
}
|
|
|
|
&.large {
|
|
width: var(--space-larger);
|
|
}
|
|
}
|
|
|
|
&.link {
|
|
height: auto;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
}
|
|
|
|
|
|
// @TDOD move to utility file
|
|
.button--fixed-right-top {
|
|
position: fixed;
|
|
right: $space-small;
|
|
top: $space-small;
|
|
}
|