567 lines
11 KiB
SCSS
567 lines
11 KiB
SCSS
@use 'mixins';
|
|
@use 'variables';
|
|
|
|
.⁂-accordion {
|
|
border-radius: 0.5rem;
|
|
background: white;
|
|
color: rgb(var(--text-gray-900));
|
|
@apply shadow;
|
|
|
|
&:is(.dark *) {
|
|
background: rgb(var(--color-primary-800));
|
|
color: rgb(var(--color-gray-100));
|
|
box-shadow: none;
|
|
}
|
|
|
|
&__header {
|
|
display: flex;
|
|
width: 100%;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0.75rem 1rem;
|
|
font-weight: 600;
|
|
|
|
&__actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
&__action .⁂-icon {
|
|
width: 1.25rem;
|
|
height: 1.25rem;
|
|
color: rgb(var(--color-gray-700));
|
|
|
|
&:is(.dark *) {
|
|
color: rgb(var(--color-gray-600));
|
|
}
|
|
}
|
|
|
|
&__chevron {
|
|
width: 1.25rem;
|
|
height: 1.25rem;
|
|
color: rgb(var(--color-gray-700));
|
|
transition-property: transform;
|
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
transition-duration: 150ms;
|
|
|
|
&:is(.dark *) {
|
|
color: rgb(var(--color-gray-600));
|
|
}
|
|
}
|
|
}
|
|
|
|
&__body {
|
|
padding: 1rem;
|
|
border-bottom-right-radius: 0.5rem;
|
|
border-bottom-left-radius: 0.5rem;
|
|
border-top-width: 1px;
|
|
border-style: solid;
|
|
border-color: rgb(var(--color-gray-100));
|
|
|
|
&:is(.dark *) {
|
|
border-color: rgb(var(--color-primary-900));
|
|
}
|
|
|
|
&:is(.dark.black *) {
|
|
border-color: black;
|
|
}
|
|
|
|
p {
|
|
@include mixins.text;
|
|
}
|
|
}
|
|
|
|
&:not(&--expanded) {
|
|
.⁂-accordion {
|
|
&__header__chevron {
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
&__body {
|
|
height: 0;
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.⁂-divider {
|
|
position: relative;
|
|
|
|
> div:first-child {
|
|
position: absolute;
|
|
inset: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
> div {
|
|
width: 100%;
|
|
border-top-width: 2px;
|
|
border-style: solid;
|
|
border-color: rgb(var(--color-gray-100));
|
|
|
|
&:is(.dark *) {
|
|
border-top-color: rgb(var(--color-gray-800));
|
|
}
|
|
|
|
&:is(.dark.black *) {
|
|
border-top-width: 1px;
|
|
}
|
|
}
|
|
}
|
|
|
|
&__text {
|
|
position: relative;
|
|
display: flex;
|
|
justify-content: center;
|
|
|
|
> span {
|
|
background: white;
|
|
color: rgb(var(--color-gray-700));
|
|
padding: 0 0.5rem;
|
|
|
|
&:is(.dark *) {
|
|
background: rgb(var(--color-gray-900));
|
|
color: rgb(var(--color-gray-600));
|
|
}
|
|
|
|
&:is(.dark.black *) {
|
|
background: black;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.⁂-icon {
|
|
display: flex;
|
|
position: relative;
|
|
flex-shrink: 0;
|
|
flex-direction: column;
|
|
|
|
&__counter {
|
|
position: absolute;
|
|
right: -0.75rem;
|
|
top: -0.5rem;
|
|
display: flex;
|
|
height: 1.25rem;
|
|
min-width: 1.25rem;
|
|
flex-shrink: 0;
|
|
align-items: center;
|
|
justify-content: center;
|
|
white-space: nowrap;
|
|
word-break: break-word;
|
|
}
|
|
}
|
|
|
|
.⁂-counter {
|
|
display: flex;
|
|
height: 1.25rem;
|
|
min-width: 1.25rem;
|
|
max-width: 1.625rem;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 9999px;
|
|
font-size: 0.75rem;
|
|
line-height: 1rem;
|
|
font-weight: 500;
|
|
color: white;
|
|
|
|
@apply bg-secondary-500 ring-2 ring-white black:ring-black dark:ring-gray-800;
|
|
}
|
|
|
|
.⁂-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.125rem;
|
|
}
|
|
|
|
.⁂-list-item {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
overflow: hidden;
|
|
|
|
@apply bg-gradient-to-r from-gradient-start/10 to-gradient-end/10 dark:from-gradient-start/10 dark:to-gradient-end/10;
|
|
|
|
&--md {
|
|
padding: 0.5rem 1rem;
|
|
}
|
|
|
|
&--sm {
|
|
padding: 0.125rem 0.5rem;
|
|
}
|
|
|
|
&:first-child {
|
|
border-top-left-radius: 0.5rem;
|
|
border-top-right-radius: 0.5rem;
|
|
}
|
|
|
|
&:last-child {
|
|
border-bottom-left-radius: 0.5rem;
|
|
border-bottom-right-radius: 0.5rem;
|
|
}
|
|
|
|
&__label {
|
|
display: flex;
|
|
flex-direction: column;
|
|
@apply py-1.5 pr-4 rtl:pl-4 rtl:pr-0;
|
|
|
|
> :first-child {
|
|
word-break: break-word;
|
|
@apply text-gray-900 dark:text-gray-100;
|
|
}
|
|
}
|
|
|
|
&__hint {
|
|
font-size: 0.875rem;
|
|
line-height: 1.25rem;
|
|
|
|
@apply text-gray-700 dark:text-gray-600;
|
|
}
|
|
|
|
&__body {
|
|
overflow: hidden;
|
|
|
|
@apply text-gray-700 dark:text-gray-600;
|
|
|
|
>.⁂-icon {
|
|
margin-left: 0.25rem;
|
|
|
|
@apply rtl:rotate-180;
|
|
}
|
|
}
|
|
}
|
|
|
|
a.⁂-list-item,
|
|
.⁂-list-item[role='link'] {
|
|
cursor: pointer;
|
|
|
|
@apply hover:from-gradient-start/20 hover:to-gradient-end/20 dark:hover:from-gradient-start/5 dark:hover:to-gradient-end/5;
|
|
}
|
|
|
|
.⁂-select {
|
|
@apply truncate rounded-md border-gray-300 py-2 pl-3 pr-10 text-base focus:border-primary-500 focus:outline-none focus:ring-primary-500 disabled:opacity-50 black:bg-black dark:border-gray-800 dark:bg-gray-900 dark:text-gray-100 dark:ring-1 dark:ring-gray-800 dark:focus:border-primary-500 dark:focus:ring-primary-500 sm:text-sm;
|
|
}
|
|
|
|
.⁂-card-header {
|
|
@apply flex items-center gap-2;
|
|
|
|
&__button {
|
|
@apply rounded-full text-gray-900 focus:ring-2 focus:ring-primary-500 dark:text-gray-100;
|
|
|
|
>.⁂-icon {
|
|
height: 1.5rem;
|
|
width: 1.5rem;
|
|
@apply rtl:rotate-180;
|
|
}
|
|
}
|
|
}
|
|
|
|
.⁂-card-title {
|
|
@include mixins.text($size: xl, $weight: bold, $truncate: true);
|
|
}
|
|
|
|
.⁂-animated-number {
|
|
position: relative;
|
|
display: inline-flex;
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.⁂-scroll-top-button {
|
|
@apply fixed left-1/2 z-50 -translate-x-1/2 transition-all -top-4 opacity-0;
|
|
|
|
&--visible {
|
|
@apply top-2 opacity-100;
|
|
}
|
|
|
|
button {
|
|
display: flex;
|
|
cursor: pointer;
|
|
align-items: center;
|
|
gap: 0.375rem;
|
|
white-space: nowrap;
|
|
border-radius: 9999px;
|
|
padding: 0.5rem 1rem;
|
|
color: white;
|
|
@apply bg-primary-600/80 backdrop-blur-md backdrop-saturate-200 transition-transform hover:scale-105 hover:bg-primary-700/80 active:scale-100;
|
|
|
|
.⁂-icon svg {
|
|
width: 1rem;
|
|
height: 1rem;
|
|
}
|
|
|
|
p {
|
|
@include mixins.text($theme: inherit, $size: sm);
|
|
}
|
|
}
|
|
}
|
|
|
|
.⁂-autosuggest-suggestions {
|
|
@apply fixed w-full z-[1001] shadow bg-white dark:bg-gray-900 rounded-lg py-1 dark:ring-2 dark:ring-primary-700 focus:outline-none hidden;
|
|
|
|
&--visible, &:focus-within {
|
|
@apply block;
|
|
}
|
|
|
|
&__items {
|
|
@apply space-y-0.5;
|
|
}
|
|
|
|
&__item {
|
|
@apply px-4 py-2.5 text-sm text-gray-700 dark:text-gray-500 focus:bg-gray-100 dark:focus:bg-primary-800 hover:bg-gray-100 dark:hover:bg-gray-800;
|
|
|
|
&--selected {
|
|
@apply bg-gray-100 dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-800;
|
|
}
|
|
}
|
|
|
|
&__menu-item {
|
|
@apply flex cursor-pointer items-center space-x-2 px-4 py-2.5 text-sm text-gray-700 hover:bg-gray-100 focus:bg-gray-100 dark:text-gray-500 dark:hover:bg-gray-800 dark:focus:bg-primary-800;
|
|
}
|
|
}
|
|
|
|
div[data-viewport-type="window"]:has(.⁂-empty-message) {
|
|
position: initial!important;
|
|
}
|
|
|
|
.⁂-modal {
|
|
@apply pointer-events-auto relative mx-auto flex w-full flex-col overflow-auto rounded-2xl bg-white text-start align-middle text-gray-900 shadow-xl transition-all ease-in-out black:bg-black dark:bg-primary-900 dark:text-gray-100;
|
|
max-height: calc(min(90vh, 100dvh));
|
|
max-width: 36rem;
|
|
|
|
@media (min-width: variables.$breakpoint-md) {
|
|
max-height: calc(min(80vh, 100dvh));
|
|
}
|
|
|
|
&--first-render {
|
|
@apply no-reduce-motion:-bottom-32;
|
|
}
|
|
|
|
&:not(&--first-render) {
|
|
@apply bottom-0;
|
|
}
|
|
|
|
&__title {
|
|
@apply sticky top-0 z-10 bg-white/75 p-6 pb-2 backdrop-blur backdrop-saturate-200 black:bg-black/75 dark:bg-primary-900/75;
|
|
|
|
> div {
|
|
@apply flex w-full items-center gap-2;
|
|
}
|
|
|
|
h3 {
|
|
@apply grow text-lg font-bold leading-6 text-gray-900 dark:text-white;
|
|
}
|
|
|
|
.⁂-icon-button {
|
|
@apply text-gray-500 hover:text-gray-700 dark:text-gray-300 dark:hover:text-gray-200 rtl:rotate-180;
|
|
}
|
|
}
|
|
|
|
&--close-position-left &__title > div {
|
|
@apply flex-row-reverse;
|
|
}
|
|
|
|
&__body {
|
|
@apply p-6;
|
|
}
|
|
|
|
:has(.⁂-modal__title) &__body {
|
|
@apply pt-0;
|
|
}
|
|
|
|
&__children {
|
|
@apply w-full;
|
|
}
|
|
|
|
&__actions {
|
|
@apply flex justify-between mt-5;
|
|
|
|
&__cancel {
|
|
@apply grow;
|
|
}
|
|
|
|
&__other {
|
|
@apply flex gap-2;
|
|
}
|
|
|
|
button.⁂-modal__action-cancel {
|
|
@include mixins.button($theme: tertiary);
|
|
}
|
|
|
|
button.⁂-modal__action-secondary {
|
|
@include mixins.button($theme: secondary);
|
|
}
|
|
}
|
|
}
|
|
|
|
.⁂-empty-message {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 1rem;
|
|
padding: 1.5rem 0;
|
|
|
|
> div {
|
|
background: rgb(var(--color-gray-200));
|
|
padding: 1rem;
|
|
border-radius: 50%;
|
|
|
|
&:is(.dark *) {
|
|
background: rgb(var(--color-gray-800));
|
|
}
|
|
|
|
svg {
|
|
height: 1.5rem;
|
|
width: 1.5rem;
|
|
color: rgb(var(--color-gray-600))
|
|
}
|
|
}
|
|
|
|
p {
|
|
@include mixins.text($align: center, $theme: muted);
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.⁂-dropdown-menu {
|
|
z-index: 1001;
|
|
display: flex;
|
|
|
|
> div {
|
|
z-index: 1001;
|
|
@apply bg-white py-1 shadow-lg ease-in-out focus:outline-none black:bg-black no-reduce-motion:transition-all dark:bg-gray-900 dark:ring-2 dark:ring-primary-700 rounded-md min-w-56 max-w-sm duration-100;
|
|
}
|
|
|
|
&__arrow {
|
|
@apply pointer-events-none absolute z-[-1] size-3 bg-white black:bg-black dark:bg-gray-900;
|
|
}
|
|
|
|
&__content {
|
|
max-height: 100%;
|
|
overflow: auto;
|
|
}
|
|
|
|
&__page {
|
|
max-width: 100%;
|
|
}
|
|
|
|
&__expanded-page {
|
|
width: fit-content;
|
|
@apply mr-auto;
|
|
}
|
|
|
|
&__header {
|
|
@apply flex gap-3 items-center mx-2 my-1 text-gray-700 dark:text-gray-300;
|
|
|
|
svg {
|
|
@apply h-5 w-5;
|
|
}
|
|
}
|
|
|
|
&__items {
|
|
overflow: hidden;
|
|
|
|
hr {
|
|
@apply mx-2 my-1 block h-[2px] border-none bg-gray-100 dark:bg-gray-800;
|
|
}
|
|
|
|
li {
|
|
@apply truncate focus-visible:ring-2 focus-visible:ring-primary-500;
|
|
}
|
|
}
|
|
}
|
|
|
|
.⁂-card {
|
|
&--rounded {
|
|
@apply bg-white dark:bg-primary-900 black:bg-black text-gray-900 dark:text-gray-100 shadow-lg dark:shadow-none;
|
|
|
|
&.⁂-card {
|
|
&--md {
|
|
@apply p-4 sm:rounded-xl;
|
|
}
|
|
|
|
&--lg {
|
|
@apply p-4 sm:p-6 sm:rounded-xl;
|
|
}
|
|
|
|
&--xl {
|
|
@apply p-4 sm:p-10 sm:rounded-3xl;
|
|
}
|
|
|
|
&--md,
|
|
&--lg,
|
|
&--xl {
|
|
@apply black:rounded-none;
|
|
}
|
|
}
|
|
}
|
|
|
|
&--slim {
|
|
@apply py-4;
|
|
}
|
|
}
|
|
|
|
.⁂-big-card {
|
|
&__header {
|
|
@apply flex flex-col gap-2 -mx-4 mb-4 border-b border-solid border-gray-200 pb-4 dark:border-gray-800 sm:-mx-10 sm:pb-10;
|
|
|
|
h1 {
|
|
@include mixins.text($size: 2xl, $align: center, $weight: bold);
|
|
}
|
|
|
|
p {
|
|
@include mixins.text($theme: muted, $align: center);
|
|
}
|
|
}
|
|
|
|
&__body {
|
|
@apply mx-auto sm:w-2/3 sm:pt-10;
|
|
}
|
|
}
|
|
|
|
.⁂-emoji {
|
|
@apply transition-transform hover:scale-125;
|
|
}
|
|
|
|
.⁂-textarea {
|
|
@apply block w-full rounded-md text-gray-900 placeholder:text-gray-600 dark:text-gray-100 dark:placeholder:text-gray-600 sm:text-sm resize-none;
|
|
|
|
&--transparent {
|
|
@apply bg-transparent border-0 p-0 focus:ring-0;
|
|
}
|
|
|
|
&:not(&--transparent) {
|
|
@apply bg-white border border-gray-300 p-2 focus:border-primary-500 focus:ring-1 focus:ring-primary-500 disabled:opacity-50 black:bg-black dark:border-gray-800 dark:bg-gray-900 dark:text-gray-100 dark:ring-1 dark:ring-gray-800 dark:focus:border-primary-500 dark:focus:ring-primary-500;
|
|
}
|
|
|
|
&--mono {
|
|
@apply font-mono;
|
|
}
|
|
|
|
&--has-error {
|
|
@apply text-red-600 border-red-600;
|
|
}
|
|
|
|
&--resizable {
|
|
@apply resize;
|
|
}
|
|
|
|
&__container {
|
|
@apply flex flex-col gap-1.5;
|
|
}
|
|
|
|
&__max-length {
|
|
@include mixins.text($size: xs, $theme: muted);
|
|
@apply text-right rtl:text-left;
|
|
|
|
&--exceeded {
|
|
@apply text-danger-700 dark:text-danger-500;
|
|
}
|
|
}
|
|
}
|