Readarr/frontend/src/Components/Link/Button.css
Zak Saunders 6e38df366f New: Darkmode
* New: Native Theme Engine

Co-Authored-By: Zak Saunders <thezak48@users.noreply.github.com>
(cherry picked from commit 2291f3e00eb2ff9268a0b2f49da8dde82ee13c04)

* Update CSS for themes

* Fixup CSS values

* Fixup remove duped Color-Impaired setting

* Fixup Link Colors

Co-Authored-By: Qstick <qstick@gmail.com>
2023-01-21 18:18:48 -06:00

119 lines
2.1 KiB
CSS

.button {
composes: link from '~./Link.css';
overflow: hidden;
border: 1px solid;
border-radius: 4px;
vertical-align: middle;
text-align: center;
white-space: nowrap;
line-height: normal;
&:global(.isDisabled) {
opacity: 0.65;
}
&:hover {
text-decoration: none;
}
}
.danger {
border-color: var(--dangerBorderColor);
background-color: var(--dangerBackgroundColor);
color: var(--white);
&:hover {
border-color: var(--dangerHoverBorderColor);
background-color: var(--dangerHoverBackgroundColor);
color: var(--white);
}
}
.default {
border-color: var(--defaultBorderColor);
background-color: var(--defaultBackgroundColor);
color: var(--defaultColor);
&:hover {
border-color: var(--defaultHoverBorderColor);
background-color: var(--defaultHoverBackgroundColor);
color: var(--defaultColor);
}
}
.primary {
border-color: var(--primaryBorderColor);
background-color: var(--primaryBackgroundColor);
color: var(--white);
&:hover {
border-color: var(--primaryHoverBorderColor);
background-color: var(--primaryHoverBackgroundColor);
color: var(--white);
}
}
.success {
border-color: var(--successBorderColor);
background-color: var(--successBackgroundColor);
color: var(--white);
&:hover {
border-color: var(--successHoverBorderColor);
background-color: var(--successHoverBackgroundColor);
color: var(--white);
}
}
.warning {
border-color: var(--warningBorderColor);
background-color: var(--warningBackgroundColor);
color: var(--white);
&:hover {
border-color: var(--warningHoverBorderColor);
background-color: var(--warningHoverBackgroundColor);
color: var(--white);
}
}
/*
* Sizes
*/
.small {
padding: 1px 5px;
font-size: $smallFontSize;
}
.medium {
padding: 6px 16px;
font-size: $defaultFontSize;
}
.large {
padding: 10px 20px;
font-size: $largeFontSize;
}
/*
* Sizes
*/
.left {
margin-left: -1px;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.center {
margin-left: -1px;
border-radius: 0;
}
.right {
margin-left: -1px;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}