Sha256: afed342b00ec1dff02f8e08dcf30597e4568728b086432f24cca98c5d77da974
Contents?: true
Size: 1.82 KB
Versions: 9
Compression:
Stored size: 1.82 KB
Contents
@mixin icon-button($type: nil) {
@include simple-button($type);
padding-left: 12px;
&:before {
font-size: 16px;
margin-right: 6px;
vertical-align: top;
}
}
@mixin icon-only-button($type: nil) {
@include simple-button($type);
padding-left: 8px;
padding-right: 8px;
&:before {
font-size: 16px;
vertical-align: top;
}
}
@mixin simple-button($type: nil) {
border-radius: rounded();
display: inline-block;
font-size: 11px;
font-weight: 500;
padding: 6px 18px;
text-decoration: none;
line-height: 16px;
@if $type == "primary" {
background-color: var(--ui-primary-color);
border: solid 1px var(--ui-primary-color);
color: var(--ui-on-primary-color);
&:hover:not(:disabled):not(.disabled) {
opacity: 0.92;
}
&:disabled,
&.disabled {
background-color: var(--ui-on-surface-color-lightest-solid);
border-color: var(--ui-on-surface-color-lightest-solid);
color: var(--ui-primary-color-light);
cursor: default;
}
} @else {
background-color: transparent;
border: solid 1px var(--ui-primary-color-light);
color: var(--ui-primary-color);
@if $type == "destructive" {
&:hover:not(:disabled):not(.disabled) {
background-color: var(--ui-error-color);
border-color: var(--ui-error-color);
color: var(--ui-on-error-color);
}
} @else {
&.hover:not(:disabled):not(.disabled),
&:hover:not(:disabled):not(.disabled) {
border: 1px solid var(--ui-primary-color);
}
}
&:disabled,
&.disabled {
opacity: 0.5;
cursor: default;
}
}
&:hover:not(:disabled):not(.disabled) {
cursor: pointer;
}
&:active:not(:disabled):not(.disabled),
&:focus:not(:disabled):not(.disabled) {
box-shadow: 0 0 0 2px var(--ui-primary-color-lighter);
}
}
Version data entries
9 entries across 9 versions & 1 rubygems