mirror of
https://github.com/wagtail/wagtail.git
synced 2024-11-25 13:10:14 +01:00
81 lines
2.1 KiB
SCSS
81 lines
2.1 KiB
SCSS
// =============================================================================
|
|
// Arrows
|
|
// =============================================================================
|
|
.u-arrow:before {
|
|
content: '';
|
|
background: transparent;
|
|
display: block;
|
|
position: absolute;
|
|
clip-path: polygon(50% 0, 0 100%, 100% 100%);
|
|
height: 0.5rem;
|
|
width: 0.75rem;
|
|
}
|
|
|
|
.u-arrow--tl:before {
|
|
bottom: 100%;
|
|
inset-inline-start: 1rem;
|
|
}
|
|
|
|
.dropup .u-arrow--tl:before {
|
|
top: 100%;
|
|
transform: rotateZ(180deg);
|
|
}
|
|
|
|
// =============================================================================
|
|
// Default dropdown theme
|
|
// =============================================================================
|
|
.t-default .u-btn-current {
|
|
border-color: theme('colors.border-button-small-outline-default');
|
|
color: theme('colors.text-button-outline-default');
|
|
}
|
|
|
|
.t-default .u-btn-current:hover {
|
|
background: theme('colors.text-button');
|
|
border-color: theme('colors.border-button-outline-default');
|
|
}
|
|
|
|
.t-inverted .u-btn-current {
|
|
background-color: theme('colors.text-button-outline-default');
|
|
border-color: theme('colors.black-35');
|
|
color: theme('colors.text-button');
|
|
}
|
|
|
|
.t-inverted .u-btn-current:hover {
|
|
background-color: theme('colors.surface-button-hover');
|
|
border-color: theme('colors.black-35');
|
|
}
|
|
|
|
// =============================================================================
|
|
// Dark theme
|
|
// =============================================================================
|
|
.t-dark .u-link {
|
|
color: theme('colors.text-label-menus-default');
|
|
}
|
|
|
|
.t-dark .u-link:hover {
|
|
color: theme('colors.text-label-menus-active');
|
|
}
|
|
|
|
.t-dark .u-background {
|
|
background: theme('colors.surface-tooltip');
|
|
}
|
|
|
|
.t-dark .u-arrow:before {
|
|
background-color: theme('colors.surface-tooltip');
|
|
|
|
@media (forced-colors: active) {
|
|
background-color: ButtonText;
|
|
}
|
|
}
|
|
|
|
// =============================================================================
|
|
// States
|
|
// =============================================================================
|
|
.u-toggle {
|
|
display: none;
|
|
}
|
|
|
|
.is-open .u-toggle {
|
|
display: block;
|
|
}
|