159 lines
5.6 KiB
CSS
159 lines
5.6 KiB
CSS
/* Button styles */
|
|
|
|
@theme {
|
|
/* Configuration */
|
|
|
|
/**
|
|
* Button component settings
|
|
*
|
|
* The variables below are used to define the button styles.
|
|
* Most of these variables come from the main theme configuration.
|
|
* The following variables are not defined, but have fallback values
|
|
* in their respective locations and can be added if needed:
|
|
*
|
|
* --button-font-weight (fallback is 600/semibold)
|
|
* --button-font-size (fallback is 1rem)
|
|
* --button-outline-width (fallback is --button-border-width)
|
|
* --button-outline-style (fallback is --button-border-style)
|
|
* --button-outline-color (fallback is --button-border-color)
|
|
*/
|
|
|
|
--button-bg: var(--color-primary);
|
|
--button-color: var(--color-white);
|
|
--button-hover-bg: var(--color-info);
|
|
--button-hover-border-color: var(--color-info);
|
|
--button-hover-color: var(--color-white);
|
|
--button-border-width: 3px;
|
|
--button-border-style: solid;
|
|
--button-border-color: var(--button-bg);
|
|
--button-radius: 0.5rem;
|
|
}
|
|
|
|
.btn, .button, .acf-block-preview .button {
|
|
@apply px-8 py-2 min-w-0;
|
|
|
|
background: var(--button-bg);
|
|
color: var(--button-color);
|
|
cursor: pointer;
|
|
display: inline-block;
|
|
transition: background 200ms, border-color 200ms, color 200ms;
|
|
|
|
border-width: var(--button-border-width);
|
|
border-style: var(--button-border-style);
|
|
border-color: var(--button-border-color);
|
|
border-radius: var(--button-radius);
|
|
|
|
text-decoration: none;
|
|
font-weight: var(--button-font-weight, 600);
|
|
font-size: var(--button-font-size, 1rem);
|
|
line-height: 1.1;
|
|
|
|
&[data-button-variant="outline"] {
|
|
background: transparent;
|
|
&:hover { background: transparent; }
|
|
|
|
--button-color: var(--button-outline-color, var(--button-bg));
|
|
--button-hover-border-color: var(--button-hover-bg);
|
|
--button-hover-color: var(--button-hover-bg);
|
|
}
|
|
}
|
|
|
|
/* Hover/focus/active */
|
|
.btn:hover, .button:hover, .acf-block-preview .button:hover {
|
|
background: var(--button-hover-bg);
|
|
border-color: var(--button-hover-border-color);
|
|
color: var(--button-hover-color);
|
|
}
|
|
|
|
.btn:focus, .button:focus {
|
|
outline-width: var(--button-outline-width, var(--button-border-width));
|
|
outline-style: var(--button-outline-style, var(--button-border-style));
|
|
outline-color: var(--button-outline-color, var(--button-border-color));
|
|
outline-offset: calc(var(--button-border-width) * 2);
|
|
}
|
|
|
|
.btn:active, .button:active { transform: scale(99%); }
|
|
|
|
/**
|
|
* Variants
|
|
*
|
|
* The following styles are used to define button variants.
|
|
* These styles are applied to the button element using the
|
|
* `data-button-*` attributes.
|
|
*/
|
|
|
|
/* Sizes */
|
|
.btn[data-button-size="small"], .button[data-button-size="small"] { @apply px-4 py-0.5; }
|
|
.btn[data-button-size="medium"], .button[data-button-size="medium"] { @apply px-8 py-2; }
|
|
.btn[data-button-size="large"], .button[data-button-size="large"] { @apply px-12 py-3; }
|
|
|
|
/* Width */
|
|
.btn[data-button-width="auto"], .button[data-button-width="auto"] { @apply min-w-0; }
|
|
.btn[data-button-width="small"], .button[data-button-width="small"] { @apply px-2; }
|
|
.btn[data-button-width="wide"], .button[data-button-width="wide"] { @apply sm:min-w-[20rem]; }
|
|
.button[data-button-width="full"],
|
|
x-button:has(.button[data-button-width="full"]) { @apply w-full; }
|
|
|
|
/**
|
|
* Colors
|
|
*
|
|
* We don't need to speicifcally target "primary" buttons
|
|
* as the button styling defaults to "primary".
|
|
* However, you can, if necessary, by adding a style block
|
|
* like the ones below and changing the color values.
|
|
*/
|
|
.btn[data-button-color="secondary"], .button[data-button-color="secondary"] {
|
|
--button-bg: var(--color-secondary);
|
|
--button-color: var(--color-white);
|
|
--button-border-color: var(--color-secondary);
|
|
--button-outline-color: oklch(0.48 0.0136 252.2);
|
|
--button-hover-bg: var(--color-dark);
|
|
--button-hover-border-color: var(--color-dark);
|
|
--button-hover-color: var(--color-white);
|
|
}
|
|
|
|
.btn[data-button-color="light"], .button[data-button-color="light"] {
|
|
--button-bg: var(--color-white);
|
|
--button-color: var(--color-dark);
|
|
--button-border-color: var(--color-white);
|
|
--button-hover-bg: var(--color-dark);
|
|
--button-hover-border-color: var(--color-dark);
|
|
--button-hover-color: var(--color-white);
|
|
}
|
|
|
|
.btn[data-button-color="white"], .button[data-button-color="white"] {
|
|
--button-bg: var(--color-white);
|
|
--button-color: var(--color-black);
|
|
--button-border-color: var(--color-white);
|
|
--button-hover-bg: var(--color-secondary-200);
|
|
--button-hover-border-color: var(--color-secondary-200);
|
|
--button-hover-color: var(--color-black);
|
|
}
|
|
|
|
.btn[data-button-color="black"], .button[data-button-color="black"] {
|
|
--button-bg: var(--color-black);
|
|
--button-color: var(--color-white);
|
|
--button-border-color: var(--color-black);
|
|
--button-hover-bg: var(--color-secondary);
|
|
--button-hover-border-color: var(--color-secondary);
|
|
--button-hover-color: var(--color-dark);
|
|
}
|
|
|
|
.back-to-top {
|
|
background: var(--color-primary, #3857BC);
|
|
color: #fff;
|
|
border: none;
|
|
border-radius: 2em;
|
|
padding: 0.75em 1.5em;
|
|
font-size: 1.1rem;
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
|
|
cursor: pointer;
|
|
transition: opacity 0.2s, background 0.2s;
|
|
opacity: 0.85;
|
|
}
|
|
.back-to-top:hover, .back-to-top:focus {
|
|
background: var(--color-info, #233a7a);
|
|
opacity: 1;
|
|
outline: 2px solid var(--color-info, #233a7a);
|
|
}
|