You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
162 lines
3.2 KiB
162 lines
3.2 KiB
/**
|
|
* Button
|
|
*
|
|
* @author Björn Hase, me@herr-hase.wtf
|
|
* @license http://opensource.org/licenses/MIT The MIT License
|
|
* @link https://gitea.node001.net/tiny-components/plain-ui.git
|
|
*
|
|
*/
|
|
|
|
/**
|
|
*
|
|
*
|
|
*/
|
|
@mixin button-color($name)
|
|
{
|
|
&--#{$name} {
|
|
border-color: var(--#{$name});
|
|
|
|
&:hover {
|
|
background-color: var(--#{$name});
|
|
}
|
|
|
|
&:focus, &:active {
|
|
outline: 2px solid var(--#{$name});
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
*
|
|
*
|
|
*/
|
|
@mixin button-full-color($name)
|
|
{
|
|
&--#{$name}.button--full {
|
|
background-color: var(--#{$name});
|
|
|
|
&:hover {
|
|
background-color: var(--background-contrast);
|
|
border-color: var(--#{$name});
|
|
}
|
|
|
|
&:focus, &:active {
|
|
outline: 2px solid var(--#{$name});
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
*
|
|
*
|
|
*/
|
|
@mixin button-outline-color($name, $color)
|
|
{
|
|
&--#{$name}.button--outline {
|
|
&:hover {
|
|
border-color: $color;
|
|
}
|
|
}
|
|
}
|
|
|
|
.button {
|
|
appearance: none;
|
|
position: relative;
|
|
|
|
display: inline-flex;
|
|
align-items: center;
|
|
text-decoration: none;
|
|
|
|
font-family: var(--font-family);
|
|
font-size: 1rem;
|
|
|
|
border: 1px solid var(--border);
|
|
background-color: var(--background-contrast);
|
|
color: var(--text);
|
|
|
|
border-radius: $border-radius;
|
|
transition: background-color 0.1s;
|
|
|
|
margin: $margin;
|
|
|
|
padding: 0.5rem 1.3rem;
|
|
width: 100%;
|
|
|
|
@include media-sm() {
|
|
width: auto;
|
|
}
|
|
|
|
&--small {
|
|
padding: 0.3rem 1.1rem;
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
&:hover, &--selected {
|
|
cursor: pointer;
|
|
text-decoration: none;
|
|
color: white;
|
|
background-color: var(--active);
|
|
}
|
|
|
|
&:focus, &:active {
|
|
outline: 1px solid var(--active);
|
|
}
|
|
|
|
&:disabled {
|
|
opacity: 0.5;
|
|
|
|
&:hover {
|
|
cursor: not-allowed;
|
|
border: 1px solid var(--border);
|
|
background-color: var(--background-contrast);
|
|
color: var(--border);
|
|
}
|
|
}
|
|
|
|
&--transparent {
|
|
margin: 0;
|
|
padding: 0;
|
|
border: none;
|
|
background: transparent;
|
|
border-radius: 0;
|
|
|
|
&:focus, &:active {
|
|
outline: none;
|
|
}
|
|
}
|
|
|
|
@include button-color('danger');
|
|
@include button-color('info');
|
|
@include button-color('warning');
|
|
@include button-color('success');
|
|
|
|
&--outline {
|
|
background-color: transparent;
|
|
|
|
&:hover {
|
|
color: var(--border);
|
|
border-color: lighten($color__primary, 40%);
|
|
background-color: transparent;
|
|
}
|
|
}
|
|
|
|
@include button-outline-color('danger', lighten($color__danger, 20%));
|
|
@include button-outline-color('info', lighten($color__info, 20%));
|
|
@include button-outline-color('warning', lighten($color__warning, 20%));
|
|
@include button-outline-color('success', lighten($color__success, 20%));
|
|
|
|
&--full {
|
|
background-color: var(--active);
|
|
color: white;
|
|
|
|
&:hover {
|
|
background-color: var(--background-contrast);
|
|
color: var(--text);
|
|
}
|
|
}
|
|
|
|
@include button-full-color('danger');
|
|
@include button-full-color('info');
|
|
@include button-full-color('warning');
|
|
@include button-full-color('success');
|
|
} |