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.
plain-ui/src/scss/components/_button.scss

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');
}