0
0
mirror of https://github.com/wagtail/wagtail.git synced 2024-11-29 09:33:54 +01:00
wagtail/client/scss/components/_tabs.scss
2022-10-17 12:18:02 +01:00

87 lines
1.8 KiB
SCSS

.tab-content {
.page-locked & {
cursor: not-allowed;
user-select: none;
> * {
pointer-events: none;
}
}
}
.w-tabs {
&__wrapper {
@apply w-mb-8 w-overflow-x-auto w-scrollbar-thin w-flex w-items-center w-justify-between w-flex-wrap w-gap-4;
}
&__list {
@apply w-flex w-pr-0 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
after:forced-colors:w-h-1
after:forced-colors:w-bg-LinkText
hover:after:w-w-full
hover:after:forced-colors:w-w-full
motion-reduce:after:w-transition-none;
&[aria-selected='true'] {
@apply after:w-w-full w-text-primary after:forced-colors:w-w-full;
}
}
&__errors {
@apply w-hidden
w-absolute
-w-mr-3
w-py-0.5
w-px-[0.325rem]
w-top-1
-w-right-1
w-text-[0.5625rem]
w-font-bold
w-bg-critical-200
w-text-white
w-border
w-border-grey-50
w-rounded-[1rem];
}
&__list,
.tab-content {
@apply w-px-5 sm:w-px-10 md:w-px-20;
// If tab contents are nested inside of a nice-padding block then don't apply the admin padding
.nice-padding & {
padding-inline-start: 0;
padding-inline-end: 0;
}
}
// 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;
}
}
}