344 lines
10 KiB
CSS
344 lines
10 KiB
CSS
/** +------------------------+ **/
|
||
/** | Base styling | **/
|
||
/** +------------------------+ **/
|
||
|
||
.button-xs, .button-sm, .button, .button-lg {
|
||
@apply inline-grid grid-rows-1 auto-cols-max grid-flow-col gap-x-1 items-center justify-center;
|
||
}
|
||
|
||
.button-xs:not(.button-group > .button-xs),
|
||
.button-sm:not(.button-group > .button-sm),
|
||
.button:not(.button-group > .button),
|
||
.button-lg:not(.button-group > .button-lg) {
|
||
@apply rounded-lg;
|
||
}
|
||
|
||
.button-xs {
|
||
@apply p-1;
|
||
}
|
||
|
||
.button-sm {
|
||
@apply px-3 py-1;
|
||
}
|
||
|
||
.button {
|
||
@apply px-4 py-2;
|
||
}
|
||
|
||
.button-lg {
|
||
@apply px-5 py-3;
|
||
}
|
||
|
||
|
||
/** +------------------------+ **/
|
||
/** | Gradient Buttons | **/
|
||
/** +------------------------+ **/
|
||
|
||
.button-xs[class*="button-gradient"],
|
||
.button-sm[class*="button-gradient"],
|
||
.button[class*="button-gradient"],
|
||
.button-lg[class*="button-gradient"] {
|
||
@apply transition-all duration-300 ease-in-out;
|
||
}
|
||
|
||
.button-gradient-primary {
|
||
@apply text-white;
|
||
background: linear-gradient(to right, hsl(291, 95.9%, 61.8%), hsl(187, 100%, 41.6%));
|
||
/*border-color: hsl(187, 100%, 41.6%);*/
|
||
box-shadow: 0 4px 12px 0 hsla(223, 15.7%, 65.1%, 0.1);
|
||
}
|
||
.button-gradient-primary:hover {
|
||
border-color: hsl(187, 100%, 51.6%);
|
||
}
|
||
|
||
.button-gradient-secondary {
|
||
@apply text-white;
|
||
background: linear-gradient(to right, hsl(229, 75.9%, 65.9%), hsl(270, 36.7%, 46.5%) 90%);
|
||
/*border-color: hsl(270, 36.7%, 46.5%);*/
|
||
box-shadow: 0 4px 15px 0 hsla(265, 36%, 48.4%, 0.75);
|
||
}
|
||
.button-gradient-secondary:hover {
|
||
border-color: hsl(270, 36.7%, 56.5%);
|
||
}
|
||
|
||
.button-gradient-tertiary {
|
||
@apply text-white;
|
||
background: linear-gradient(to right, hsl(212, 18.8%, 19.8%), hsl(211, 15.8%, 33.5%));
|
||
/*border-color: hsl(211, 15.8%, 33.5%);*/
|
||
box-shadow: 0 4px 15px 0 hsla(213, 18.2%, 21.6%, 0.75);
|
||
}
|
||
.button-gradient-tertiary:hover {
|
||
border-color: hsl(211, 15.8%, 43.5%);
|
||
backdrop-filter: blur(25px) brightness(125%) hue-rotate(20deg);
|
||
}
|
||
|
||
.button-gradient-info {
|
||
@apply text-white;
|
||
background: linear-gradient(to right, hsl(198, 75.8%, 51.4%), hsl(218, 80.7%, 59.4%));
|
||
/*border-color: hsl(218, 80.7%, 59.4%);*/
|
||
box-shadow: 0 4px 15px 0 hsla(216, 80.1%, 58.6%, 0.75);
|
||
}
|
||
.button-gradient-info:hover {
|
||
border-color: hsl(218, 80.7%, 69.4%);
|
||
}
|
||
|
||
.button-gradient-success {
|
||
@apply text-white;
|
||
background: linear-gradient(to right, hsl(151, 71.8%, 52.7%), hsl(151, 61.8%, 44.1%));
|
||
/*border-color: hsl(151, 61.8%, 44.1%);*/
|
||
box-shadow: 0 4px 15px 0 hsla(155, 75.9%, 37.5%, 0.75);
|
||
}
|
||
.button-gradient-success:hover {
|
||
border-color: hsl(151, 61.8%, 54.1%);
|
||
}
|
||
|
||
.button-gradient-warning {
|
||
@apply text-white;
|
||
background: linear-gradient(to right, hsl(44, 88%, 67.3%), hsl(14, 97.4%, 45.3%));
|
||
/*border-color: hsl(14, 97.4%, 45.3%);*/
|
||
box-shadow: 0 4px 15px 0 hsla(15, 91.6%, 46.9%, 0.75);
|
||
}
|
||
.button-gradient-warning:hover {
|
||
border-color: hsl(14, 97.4%, 55.3%);
|
||
}
|
||
|
||
.button-gradient-danger {
|
||
@apply text-white;
|
||
background: linear-gradient(to right, hsl(357, 81.7%, 57.3%), hsl(358, 84%, 65.7%));
|
||
/*border-color: hsl(358, 84%, 65.7%);*/
|
||
box-shadow: 0 5px 15px hsla(358, 96.1%, 69.8%, 0.4);
|
||
}
|
||
.button-gradient-danger:hover {
|
||
border-color: hsl(358, 84%, 75.7%);
|
||
}
|
||
|
||
|
||
/** +------------------------+ **/
|
||
/** | Outline Buttons | **/
|
||
/** +------------------------+ **/
|
||
|
||
.button-xs[class*="button-outline"],
|
||
.button-sm[class*="button-outline"],
|
||
.button[class*="button-outline"],
|
||
.button-lg[class*="button-outline"] {
|
||
@apply font-bold transition-all duration-300 ease-in-out border-2 bg-transparent;
|
||
}
|
||
|
||
.button-outline-primary {
|
||
color: hsl(187, 100%, 41.6%);
|
||
border-color: hsl(187, 100%, 41.6%);
|
||
box-shadow: 0 4px 12px 0 hsla(187, 100%, 41.6%, 0.25), inset 0 4px 12px 0 hsla(187, 100%, 41.6%, 0.25);
|
||
}
|
||
.button-outline-primary:hover {
|
||
color: hsl(187, 100%, 61.6%);
|
||
border-color: hsl(187, 100%, 61.6%);
|
||
box-shadow: 0 6px 16px 0 hsla(187, 100%, 61.6%, 0.33), inset 0 6px 16px 0 hsla(187, 100%, 61.6%, 0.33);
|
||
}
|
||
|
||
.button-outline-secondary {
|
||
color: hsl(270, 36.7%, 46.5%);
|
||
border-color: hsl(270, 36.7%, 46.5%);
|
||
box-shadow: 0 4px 12px 0 hsla(270, 36.7%, 46.5%, 0.25), inset 0 4px 12px 0 hsla(270, 36.7%, 46.5%, 0.25);
|
||
}
|
||
.button-outline-secondary:hover {
|
||
color: hsl(270, 36.7%, 66.5%);
|
||
border-color: hsl(270, 36.7%, 66.5%);
|
||
box-shadow: 0 6px 16px 0 hsla(270, 36.7%, 66.5%, 0.33), inset 0 6px 16px 0 hsla(270, 36.7%, 66.5%, 0.33);
|
||
}
|
||
|
||
.button-outline-tertiary {
|
||
color: hsl(211, 15.8%, 33.5%);
|
||
border-color: hsl(211, 15.8%, 33.5%);
|
||
box-shadow: 0 4px 12px 0 hsla(211, 15.8%, 33.5%, 0.25), inset 0 4px 12px 0 hsla(211, 15.8%, 33.5%, 0.25);
|
||
}
|
||
.button-outline-tertiary:hover {
|
||
color: hsl(211, 15.8%, 53.5%);
|
||
border-color: hsl(211, 15.8%, 53.5%);
|
||
box-shadow: 0 6px 16px 0 hsla(211, 15.8%, 53.5%, 0.33), inset 0 6px 16px 0 hsla(211, 15.8%, 53.5%, 0.33);
|
||
}
|
||
|
||
.button-outline-info {
|
||
color: hsl(218, 80.7%, 59.4%);
|
||
border-color: hsl(218, 80.7%, 59.4%);
|
||
box-shadow: 0 4px 12px 0 hsla(218, 80.7%, 59.4%, 0.25), inset 0 4px 12px 0 hsla(218, 80.7%, 59.4%, 0.25);
|
||
}
|
||
.button-outline-info:hover {
|
||
color: hsl(218, 80.7%, 79.4%);
|
||
border-color: hsl(218, 80.7%, 79.4%);
|
||
box-shadow: 0 6px 16px 0 hsla(218, 80.7%, 79.4%, 0.33), inset 0 6px 16px 0 hsla(218, 80.7%, 79.4%, 0.33);
|
||
}
|
||
|
||
.button-outline-success {
|
||
color: hsl(151, 61.8%, 44.1%);
|
||
border-color: hsl(151, 61.8%, 44.1%);
|
||
box-shadow: 0 4px 12px 0 hsla(151, 61.8%, 44.1%, 0.25), inset 0 4px 12px 0 hsla(151, 61.8%, 44.1%, 0.25);
|
||
}
|
||
.button-outline-success:hover {
|
||
color: hsl(151, 61.8%, 64.1%);
|
||
border-color: hsl(151, 61.8%, 64.1%);
|
||
box-shadow: 0 6px 16px 0 hsla(151, 61.8%, 64.1%, 0.33), inset 0 6px 16px 0 hsla(151, 61.8%, 64.1%, 0.33);
|
||
}
|
||
|
||
.button-outline-warning {
|
||
color: hsl(14, 97.4%, 45.3%);
|
||
border-color: hsl(14, 97.4%, 45.3%);
|
||
box-shadow: 0 4px 12px 0 hsla(14, 97.4%, 45.3%, 0.25), inset 0 4px 12px 0 hsla(14, 97.4%, 45.3%, 0.25);
|
||
}
|
||
.button-outline-warning:hover {
|
||
color: hsl(14, 97.4%, 65.3%);
|
||
border-color: hsl(14, 97.4%, 65.3%);
|
||
box-shadow: 0 6px 16px 0 hsla(14, 97.4%, 65.3%, 0.33), inset 0 6px 16px 0 hsla(14, 97.4%, 65.3%, 0.33);
|
||
}
|
||
|
||
.button-outline-danger {
|
||
color: hsl(358, 84%, 65.7%);
|
||
border-color: hsl(358, 84%, 65.7%);
|
||
box-shadow: 0 4px 12px 0 hsla(358, 84%, 65.7%, 0.25), inset 0 4px 12px 0 hsla(358, 84%, 65.7%, 0.25);
|
||
}
|
||
.button-outline-danger:hover {
|
||
color: hsl(358, 84%, 85.7%);
|
||
border-color: hsl(358, 84%, 85.7%);
|
||
box-shadow: 0 6px 16px 0 hsla(358, 84%, 85.7%, 0.33), inset 0 6px 16px 0 hsla(358, 84%, 85.7%, 0.33);
|
||
}
|
||
|
||
|
||
/** +----------------------------------------------------------------+ **/
|
||
/** | "Disco" animated buttons | **/
|
||
/** +----------------------------------------------------------------+ **/
|
||
/* https://github.com/joe-bell/loading-disco */
|
||
.disco-button {
|
||
/* Customizable */
|
||
--button-color-bg: rgb(24 24 27);
|
||
--button-color-border: rgb(63 63 70);
|
||
--button-color-disco: rgb(59 130 246);
|
||
--button-color-text: rgb(161 161 170);
|
||
--button-color-text-busy: rgb(113 113 122);
|
||
--button-border-width: 1px;
|
||
--button-bg-gradient-start: rgb(24 24 27);
|
||
--button-bg-gradient-end: rgb(39 39 42);
|
||
--button-disco-animation: disco 1.5s linear infinite;
|
||
--button-disco-gradient-stops: transparent 135deg,
|
||
var(--button-color-disco) 180deg, transparent 225deg;
|
||
--button-disco-opacity: 1;
|
||
--button-radius: 0.5rem;
|
||
--button-transition-duration: 200ms;
|
||
--button-transition-easing: cubic-bezier(0.4, 0, 0.2, 1);
|
||
--button-transition: var(--button-transition-duration)
|
||
var(--button-transition-easing);
|
||
/**
|
||
* Using an advance mathematic technique often referred to as
|
||
* "winging it", we'll offset the aspect ratio by a figure
|
||
* that brings the shape of the "disco" element as close to
|
||
* the edge of the button as possible – to reduce the effect
|
||
* of "easing".
|
||
*/
|
||
--button-aspect-ratio-multiplier: 0.65;
|
||
/* Styles */
|
||
appearance: none;
|
||
position: relative;
|
||
border: 0;
|
||
font: inherit;
|
||
width: max-content;
|
||
overflow: hidden;
|
||
margin: calc(var(--button-border-width) * -1);
|
||
padding: var(--button-border-width);
|
||
color: var(--button-color-text);
|
||
border-radius: var(--button-radius);
|
||
transform: none;
|
||
user-select: none;
|
||
will-change: transform;
|
||
background-color: var(--button-color-border);
|
||
/**
|
||
* This one's optional, it just stops the button from jumping around when the
|
||
* content width changes
|
||
*/
|
||
min-width: 8rem;
|
||
}
|
||
|
||
.disco-button:hover {
|
||
filter: brightness(0.95);
|
||
}
|
||
.disco-button:active {
|
||
transform: scale(0.95);
|
||
}
|
||
|
||
@media (prefers-reduced-motion: no-preference) {
|
||
.disco-button {
|
||
transition: var(--button-transition);
|
||
transition-property: color, filter, transform;
|
||
}
|
||
}
|
||
|
||
.button__content {
|
||
display: inline-flex;
|
||
position: relative;
|
||
border-radius: calc(var(--button-radius) - var(--button-border-width));
|
||
background-image: linear-gradient(
|
||
to top right,
|
||
var(--button-bg-gradient-start),
|
||
var(--button-bg-gradient-end)
|
||
);
|
||
background-color: var(--button-bg-gradient-end);
|
||
width: 100%;
|
||
justify-content: center;
|
||
padding: 0.625rem 1rem;
|
||
text-align: center;
|
||
z-index: 10;
|
||
}
|
||
|
||
.button__disco,
|
||
.button__disco::before {
|
||
position: absolute;
|
||
width: 100%;
|
||
}
|
||
|
||
.button__disco {
|
||
inset: 0;
|
||
height: 100%;
|
||
top: 50%;
|
||
transform: translateY(-50%)
|
||
scaleX(
|
||
calc(var(--button-aspect-ratio) * var(--button-aspect-ratio-multiplier))
|
||
);
|
||
will-change: transform;
|
||
}
|
||
|
||
.button__disco::before {
|
||
content: "";
|
||
position: absolute;
|
||
left: 0;
|
||
min-height: 100%;
|
||
top: 50%;
|
||
aspect-ratio: 1/1;
|
||
transform-origin: center;
|
||
background-image: conic-gradient(var(--button-disco-gradient-stops));
|
||
opacity: var(--button-disco-opacity-enabled, 0);
|
||
/**
|
||
* This one's not strictly necessary, but I think it helps soften the gradient
|
||
* and reduces animation "easing".
|
||
*/
|
||
filter: blur(8px);
|
||
}
|
||
|
||
@media (prefers-reduced-motion: reduce) {
|
||
.button__disco::before {
|
||
transform: translateY(-50%) rotate(0deg);
|
||
}
|
||
}
|
||
|
||
@media (prefers-reduced-motion: no-preference) {
|
||
.button__disco::before {
|
||
animation: var(--button-disco-animation);
|
||
animation-play-state: var(--button-disco-animation-state, paused);
|
||
transition: var(--button-transition);
|
||
transition-property: opacity;
|
||
}
|
||
}
|
||
|
||
.disco-button.is-busy {
|
||
--button-color-text: var(--button-color-text-busy);
|
||
--button-disco-animation-state: running;
|
||
--button-disco-opacity-enabled: var(--button-disco-opacity);
|
||
cursor: progress;
|
||
}
|