mirror of
https://github.com/wagtail/wagtail.git
synced 2024-12-01 03:31:04 +01:00
d2ce53903c
Changed following - action bar now uses translate for animation instead of changing layout - action bar is now hidden from both text readers and keyboard navigation when it is out of view - css now doesn't use elements for styling - 'Show all in listing' is now a button instead of an <a> - Changed aria labels to more suitable and meaningful ones
111 lines
2.2 KiB
SCSS
111 lines
2.2 KiB
SCSS
// =============================================================================
|
|
// Arrows
|
|
// =============================================================================
|
|
.u-arrow:before {
|
|
content: '';
|
|
border: solid 0.35rem transparent;
|
|
display: block;
|
|
position: absolute;
|
|
}
|
|
|
|
.u-arrow--tl:before {
|
|
bottom: 100%;
|
|
left: 1rem;
|
|
}
|
|
|
|
.dropup .u-arrow--tl:before {
|
|
top: 100%;
|
|
transform: rotateZ(180deg);
|
|
}
|
|
|
|
// =============================================================================
|
|
// Default dropdown theme
|
|
// =============================================================================
|
|
|
|
// .t-default {
|
|
|
|
// }
|
|
.t-default .u-btn-current {
|
|
border-color: rgba(0, 0, 0, 0.15);
|
|
color: $color-teal;
|
|
}
|
|
|
|
.t-default .u-btn-current:hover {
|
|
background: $color-teal;
|
|
color: #fff;
|
|
border-color: $color-teal;
|
|
}
|
|
|
|
.t-default .u-btn-current:active {
|
|
background: #333;
|
|
color: #fff;
|
|
border-color: #333;
|
|
}
|
|
|
|
.t-inverted .u-btn-current {
|
|
border-color: rgba(0, 0, 0, 0.35);
|
|
color: #fff;
|
|
}
|
|
|
|
.t-inverted .u-btn-current:hover {
|
|
background-color: $color-teal-darker;
|
|
border-color: rgba(0, 0, 0, 0.35);
|
|
}
|
|
|
|
.t-inverted .u-btn-current:active {
|
|
border-color: rgba(0, 0, 0, 0.35);
|
|
background: #333;
|
|
color: #fff;
|
|
}
|
|
|
|
|
|
// =============================================================================
|
|
// Dark theme
|
|
// =============================================================================
|
|
.t-dark .u-link {
|
|
color: #fff;
|
|
}
|
|
|
|
.t-dark .u-link:hover {
|
|
color: #aaa;
|
|
}
|
|
|
|
.t-dark .u-background {
|
|
background: #333;
|
|
}
|
|
|
|
.t-dark .u-arrow:before {
|
|
border-bottom-color: #333;
|
|
}
|
|
|
|
// =============================================================================
|
|
// Light theme
|
|
// =============================================================================
|
|
.t-light .u-link {
|
|
color: #333;
|
|
}
|
|
|
|
.t-light .u-link:hover {
|
|
color: #aaa;
|
|
}
|
|
|
|
.t-light .u-background {
|
|
background: #fff;
|
|
border-color: #ccc;
|
|
}
|
|
|
|
.t-light .u-arrow:before {
|
|
border-bottom-color: #fff;
|
|
}
|
|
|
|
// =============================================================================
|
|
// States
|
|
// =============================================================================
|
|
.u-toggle {
|
|
display: none;
|
|
}
|
|
|
|
.is-open .u-toggle {
|
|
display: block;
|
|
}
|