diff options
Diffstat (limited to 'styles/global/buttons.css')
| -rw-r--r-- | styles/global/buttons.css | 206 |
1 files changed, 0 insertions, 206 deletions
diff --git a/styles/global/buttons.css b/styles/global/buttons.css index 60f7ec0..e69de29 100644 --- a/styles/global/buttons.css +++ b/styles/global/buttons.css @@ -1,206 +0,0 @@ -.button,
-.btn,
-button[type="submit"] {
- --button-color: var(--color-text);
- --button-border: 2px solid var(--color-text);
- --button-background: transparent;
- --button-image: none;
-
- display: inline-flex;
- justify-content: center;
- align-items: center;
- gap: 5px;
- background: var(--button-background) !important;
- border: var(--button-border) !important;
- border-image: var(--button-image) 1 !important;
- border-radius: var(--border-radius) !important;
- color: var(--button-color) !important;
- font-weight: 500;
- position: relative;
-
- &:hover {
- --button-background: var(--color-text);
- --button-color: var(--color-black);
-
- /* override existing hover states */
- background: var(--button-background) !important;
- }
-
- &::before {
- background: none !important;
- }
-
- /* Fix for rendering issue
- &::after {
- content: "";
- display: block;
- position: absolute;
- left: 0;
- top: 0;
- right: 0;
- bottom: 0;
- width: 100%;
- height: 100%;
- border: var(--button-border) !important;
- border-image: var(--button-image) 1 !important;
- transform: none !important;
- }*/
-
- * {
- color: var(--button-color) !important;
- }
-
- img,
- svg {
- position: static;
- }
-
- &.btn-primary,
- &.button-primary,
- &[type="submit"] {
- --button-color: var(--color-white);
- --button-border: 2px solid var(--color-primary);
- --button-background: var(--gradient);
- --button-image: var(--gradient);
-
- &:hover {
- --button-background: var(--gradient-reverse);
- --button-image: var(--gradient-reverse);
- --button-color: var(--color-white);
- }
- }
-
- &.btn-secondary,
- &.btn-clear,
- &.btn-transparent,
- &.btn-outline,
- &.button-secondary,
- &.button-clear,
- &.button-transparent,
- &.button-outline {
- --button-color: var(--color-primary);
- --button-border: 2px solid var(--color-primary);
- --button-background: transparent;
- --button-image: var(--gradient);
-
- > a,
- > span {
- background: var(--button-image);
- -webkit-background-clip: text;
- -webkit-text-fill-color: transparent;
- }
-
- &:hover {
- --button-background: var(--gradient);
- --button-color: var(--color-white);
-
- > a,
- > span {
- -webkit-text-fill-color: var(--button-color);
- }
- }
- }
-
- &.btn-tertiary,
- &.button-tertiary {
- --button-color: var(--color-tertiary);
- --button-border: 2px solid var(--color-tertiary);
-
- &:hover {
- --button-background: var(--color-tertiary);
- --button-color: var(--color-white);
- }
- }
-
- &.btn-success,
- &.btn-green,
- &.button-success,
- &.button-green {
- --button-color: var(--color-green);
- --button-border: 2px solid var(--color-green);
-
- &:hover {
- --button-background: var(--color-green);
- --button-color: var(--color-black);
- }
- }
-
- &.btn-danger,
- &.btn-error,
- &.btn-red,
- &.button-danger,
- &.button-error,
- &.button-red {
- --button-color: var(--color-red);
- --button-border: 2px solid var(--color-red);
-
- &:hover {
- --button-background: var(--color-red);
- --button-color: var(--color-black);
- }
- }
-
- &.btn-warning,
- &.btn-orange,
- &.btn-yellow,
- &.button-warning,
- &.button-orange,
- &.button-yellow {
- --button-color: var(--color-orange);
- --button-border: 2px solid var(--color-orange);
-
- &:hover {
- --button-background: var(--color-orange);
- --button-color: var(--color-black);
- }
- }
-
- &.btn-info,
- &.btn-blue,
- &.button-info,
- &.button-blue {
- --button-color: var(--color-blue);
- --button-border: 2px solid var(--color-blue);
-
- &:hover {
- --button-background: var(--color-blue);
- --button-color: var(--color-black);
- }
- }
-
- &.btn-dark,
- &.btn-invert,
- &.btn-black,
- &.button-dark,
- &.button-invert,
- &.button-black {
- --button-border: 2px solid var(--color-bg);
- --button-background: var(--color-bg);
-
- &:hover {
- --button-border: 2px solid var(--color-white);
- --button-color: var(--color-white);
- }
- }
-
- &.btn-invisible,
- &.btn-text,
- &.btn-link,
- &.button-invisible,
- &.button-text,
- &.button-link,
- &.text {
- --button-border: none;
- --button-color: var(--color-primary);
-
- &:hover {
- --button-background: transparent;
- text-decoration: underline;
- }
- }
-
- &.btn-circle-icon {
- --button-border: none;
- border-radius: 50% !important;
- }
-}
|