66 lines
2.2 KiB
SCSS
66 lines
2.2 KiB
SCSS
|
@layer components {
|
||
|
|
.tw-section {
|
||
|
|
@apply tw-py-8;
|
||
|
|
@screen md {
|
||
|
|
@apply tw-py-12;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Cards
|
||
|
|
.tw-card {
|
||
|
|
@apply tw-shadow-card tw-rounded-lg tw-bg-dim-1 tw-p-8 sm:tw-px-10;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Buttons
|
||
|
|
.tw-clickable {
|
||
|
|
@apply tw-cursor-pointer tw-gap-1 tw-rounded tw-font-medium tw-inline-flex tw-items-center tw-justify-center tw-duration-onhover-fast;
|
||
|
|
@apply active:tw-scale-click;
|
||
|
|
@apply disabled:tw-pointer-events-none disabled:tw-opacity-muted;
|
||
|
|
}
|
||
|
|
.tw-button {
|
||
|
|
@apply tw-clickable;
|
||
|
|
@apply tw-text-custom tw-leading-xs tw-bg-custom tw-bg-opacity-custom;
|
||
|
|
@apply tw-text-sm tw-h-[2.5em] tw-p-[0.75em];
|
||
|
|
@apply tw-relative before:tw-absolute before:tw-inset-0 before:tw-border before:tw-border-solid before:tw-border-custom before:tw-border-opacity-custom;
|
||
|
|
@apply before:tw-duration-fast before:tw-rounded;
|
||
|
|
@apply focus:tw-ring-2 focus:tw-ring-accent-primary focus:tw-ring-opacity-outline;
|
||
|
|
&::before {
|
||
|
|
mask-image: linear-gradient(to right, rgba(white, 0.5), rgba(white, 1), rgba(white, 0.5));
|
||
|
|
}
|
||
|
|
&:hover {
|
||
|
|
--bg-opacity: var(--bg-opacity-hover);
|
||
|
|
&::before {
|
||
|
|
--border-opacity: var(--border-opacity-hover);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.tw-button-primary {
|
||
|
|
@apply tw-button;
|
||
|
|
--text-color: var(--c-button-primary-color);
|
||
|
|
--bg-color: var(--c-button-primary-bg);
|
||
|
|
--border-color: var(--c-button-primary-border);
|
||
|
|
--bg-opacity: var(--o-button-primary-bg);
|
||
|
|
--border-opacity: var(--o-button-primary-border);
|
||
|
|
--bg-opacity-hover: var(--o-button-primary-bg-hover);
|
||
|
|
--border-opacity-hover: var(--o-button-primary-border-hover);
|
||
|
|
}
|
||
|
|
.tw-button-secondary {
|
||
|
|
@apply tw-button;
|
||
|
|
--text-color: var(--c-button-secondary-color);
|
||
|
|
--bg-color: var(--c-button-secondary-bg);
|
||
|
|
--border-color: var(--c-button-secondary-border);
|
||
|
|
--bg-opacity: var(--o-button-secondary-bg);
|
||
|
|
--border-opacity: var(--o-button-secondary-border);
|
||
|
|
--bg-opacity-hover: var(--o-button-secondary-bg-hover);
|
||
|
|
--border-opacity-hover: var(--o-button-secondary-border-hover);
|
||
|
|
}
|
||
|
|
|
||
|
|
// radio
|
||
|
|
.tw-radio-option {
|
||
|
|
@apply tw-size-6 tw-flex tw-items-center tw-justify-center tw-text-dim-3 hover:tw-text-dim-2 tw-duration-onhover-fast;
|
||
|
|
&.checked {
|
||
|
|
@apply tw-text-dim-1;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|