0
0
mirror of https://github.com/wagtail/wagtail.git synced 2024-11-29 17:36:49 +01:00
wagtail/client/scss/components/_tabs.scss

81 lines
1.5 KiB
SCSS

.tab-content {
.page-locked & {
cursor: not-allowed;
user-select: none;
> * {
pointer-events: none;
}
}
}
.w-tabs {
&__wrapper {
@apply w-mb-10 w-overflow-x-auto w-scrollbar-thin w-flex w-items-center w-justify-between w-flex-wrap w-gap-4;
}
&__list {
@include nice-padding();
@apply w-flex w-my-[3px] w-space-x-6 w-border-b w-border-grey-100 w-w-fit;
}
&__tab {
@apply w-label-3
w-box-border
w-inline-flex
w-text-grey-400
hover:w-text-primary
w-whitespace-nowrap
w-py-4
w-font-medium
w-relative
after:w-block
after:w-w-0
after:w-h-[2px]
after:w-bg-primary
after:w-absolute
after:w-left-0
after:-w-bottom-px
after:w-transition-all
motion-reduce:after:w-transition-none
hover:after:w-w-full;
&[aria-selected='true'] {
@apply after:w-w-full w-text-primary;
}
}
&__errors {
@apply w-hidden
w-box-border
w-w-4
w-h-4
w-text-[0.75rem]
w-flex
w-justify-center
w-items-center
w-font-bold
w-bg-critical-200
w-text-white
w-border
w-border-white
w-rounded-full
w-absolute
w-top-[0.4375rem]
-w-right-[0.9375rem];
&--active {
@apply w-flex;
}
}
// Optional animate attr for tabs to animate in
&[data-tabs-animate] &__panel {
@apply motion-reduce:w-transition-none w-transition w-duration-150 w-translate-y-1 w-opacity-0;
&.animate-in {
@apply w-translate-y-0 w-opacity-100;
}
}
}