This commit is contained in:
Keith Solomon
@@ -23,7 +23,7 @@
|
||||
--color-primary-800: color-mix(in oklch, var(--color-primary) 80%, white);
|
||||
--color-primary-900: color-mix(in oklch, var(--color-primary) 90%, white);
|
||||
|
||||
--color-secondary: oklch(0.56 0.0176 257.23);
|
||||
--color-secondary: var(--color-cwc-orange-01);
|
||||
--color-secondary-100: color-mix(in oklch, var(--color-secondary) 10%, white);
|
||||
--color-secondary-200: color-mix(in oklch, var(--color-secondary) 20%, white);
|
||||
--color-secondary-300: color-mix(in oklch, var(--color-secondary) 30%, white);
|
||||
|
||||
@@ -50,24 +50,29 @@
|
||||
--text-18px: clamp(0.875rem, calc(0.8173rem + 0.2564vw), 1.125rem);
|
||||
--text-20px: clamp(1rem, calc(0.9423rem + 0.2564vw), 1.25rem);
|
||||
--text-22px: clamp(1.1rem, calc(1.0365rem + 0.2821vw), 1.375rem);
|
||||
--text-24px: clamp(1.125rem, calc(1.024rem + 0.4487vw), 1.5rem);
|
||||
--text-25px: clamp(1.125rem, calc(1.024rem + 0.4487vw), 1.5625rem);
|
||||
--text-28px: clamp(1.125rem, calc(1.024rem + 0.4487vw), 1.75rem);
|
||||
--text-30px: clamp(1.185rem, calc(1.0258rem + 0.7077vw), 1.875rem);
|
||||
--text-32px: clamp(1.25rem, calc(1.0337rem + 0.9615vw), 2rem);
|
||||
--text-35px: clamp(1.25rem, calc(1.0337rem + 0.9615vw), 2.1875rem);
|
||||
--text-38px: clamp(1.4rem, calc(1.175rem + 1vw), 2.375rem);
|
||||
--text-40px: clamp(1.5rem, calc(1.2692rem + 1.0256vw), 2.5rem);
|
||||
--text-40px: clamp(2.25rem, calc(1.2692rem + 1.0256vw), 2.5rem);
|
||||
--text-45px: clamp(1.6rem, calc(1.3202rem + 1.2436vw), 2.8125rem);
|
||||
--text-50px: clamp(1.7rem, calc(1.3712rem + 1.4615vw), 3.125rem);
|
||||
--text-55px: clamp(1.75rem, calc(1.3712rem + 1.4615vw), 3.4375rem);
|
||||
--text-60px: clamp(1.875rem, calc(1.3702rem + 2.2436vw), 3.75rem);
|
||||
--text-64px: clamp(3rem, calc(1.3702rem + 2.2436vw), 4rem);
|
||||
--text-65px: clamp(1.875rem, calc(1.3702rem + 2.2436vw), 4.0625rem);
|
||||
--text-70px: clamp(1.9rem, calc(1.3288rem + 2.5385vw), 4.375rem);
|
||||
--text-75px: clamp(2rem, calc(1.3798rem + 2.7564vw), 4.6875rem);
|
||||
|
||||
--h1: calc(var(--text-base) * 2.25);
|
||||
--h2: calc(var(--text-base) * 1.75);
|
||||
--h3: calc(var(--text-base) * 1.5);
|
||||
--h4: calc(var(--text-base) * 1.25);
|
||||
--h5: calc(var(--text-base) * 1.125);
|
||||
--h6: calc(var(--text-base) * 1.05);
|
||||
--h1: var(--text-64px);
|
||||
--h2: var(--text-40px);
|
||||
--h3: var(--text-32px);
|
||||
--h4: var(--text-28px);
|
||||
--h5: var(--text-24px);
|
||||
--h6: var(--text-22px);
|
||||
}
|
||||
|
||||
body {
|
||||
@@ -164,7 +169,7 @@ pre code {
|
||||
}
|
||||
|
||||
code {
|
||||
@apply bg-black/30 px-[3px] py-0.5 font-mono text-black text-xs rounded-sm;
|
||||
@apply bg-black/30 px-[3px] py-0.5 font-mono text-black text-xs rounded-sm;
|
||||
}
|
||||
|
||||
hr {
|
||||
|
||||
+115
-112
@@ -1,104 +1,106 @@
|
||||
/* Button styles */
|
||||
|
||||
@theme {
|
||||
/* Configuration */
|
||||
@theme static {
|
||||
/* 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 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;
|
||||
--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: 1.25rem 0.25rem;
|
||||
}
|
||||
|
||||
.btn, .button, .acf-block-preview .button {
|
||||
@apply px-8 py-2 min-w-0;
|
||||
@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;
|
||||
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);
|
||||
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;
|
||||
padding: .5rem 2rem;
|
||||
|
||||
&[data-button-variant="outline"] {
|
||||
background: transparent;
|
||||
&:hover { background: transparent; }
|
||||
text-decoration: none;
|
||||
font-weight: var(--button-font-weight, 600);
|
||||
font-size: var(--button-font-size, 1rem);
|
||||
line-height: 1.1;
|
||||
|
||||
--button-color: var(--button-outline-color, var(--button-bg));
|
||||
--button-hover-border-color: var(--button-hover-bg);
|
||||
--button-hover-color: var(--button-hover-bg);
|
||||
}
|
||||
&[data-button-variant="outline"] {
|
||||
background: transparent;
|
||||
&:hover { background: transparent; }
|
||||
|
||||
/* --button-color: var(--button-border-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);
|
||||
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);
|
||||
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%); }
|
||||
|
||||
/* Back To Top Button */
|
||||
#backToTopBtn {
|
||||
display:none;
|
||||
position:fixed;
|
||||
bottom:2rem;
|
||||
right:2rem;
|
||||
z-index:1000;
|
||||
padding:0.75em 1.5em;
|
||||
font-size:1.1rem;
|
||||
border-radius:2em;
|
||||
background:var(--color-primary,#3857BC);
|
||||
color:#fff;
|
||||
border:none;
|
||||
box-shadow:0 2px 8px rgba(0,0,0,0.15);
|
||||
cursor:pointer;
|
||||
transition:opacity 0.2s;
|
||||
background: var(--color-primary);
|
||||
border: none;
|
||||
border-radius: 2em;
|
||||
bottom: 2rem;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
display: none;
|
||||
font-size: 1.1rem;
|
||||
padding: 0.75em 1.5em;
|
||||
position: fixed;
|
||||
right: 2rem;
|
||||
transition: opacity 0.2s;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
/**
|
||||
* Variants
|
||||
*
|
||||
* The following styles are used to define button variants.
|
||||
* These styles are applied to the button element using the
|
||||
* `data-button-*` attributes.
|
||||
*/
|
||||
* 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; }
|
||||
@@ -115,62 +117,63 @@ x-button:has(.button[data-button-width="full"]) { @apply w-full; }
|
||||
/**
|
||||
* Colors
|
||||
*
|
||||
* We don't need to speicifcally target "primary" buttons
|
||||
* We don't need to specifically 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);
|
||||
--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);
|
||||
--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);
|
||||
--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);
|
||||
--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;
|
||||
background: var(--color-primary, #3857BC);
|
||||
border: none;
|
||||
border-radius: 2em;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
font-size: 1.1rem;
|
||||
opacity: 0.85;
|
||||
padding: 0.75em 1.5em;
|
||||
transition: opacity 0.2s, background 0.2s;
|
||||
}
|
||||
|
||||
.back-to-top:hover, .back-to-top:focus {
|
||||
background: var(--color-info, #233a7a);
|
||||
opacity: 1;
|
||||
outline: 2px solid var(--color-info, #233a7a);
|
||||
background: var(--color-info, #233a7a);
|
||||
opacity: 1;
|
||||
outline: 2px solid var(--color-info, #233a7a);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user