f811f17830
* Fix irrelevent numbers in admin display * Remove unused possible_spam_users_count * Fix tab styles
202 lines
4.2 KiB
SCSS
202 lines
4.2 KiB
SCSS
@import '../config/import';
|
|
|
|
.crayons-tabs {
|
|
// Setup
|
|
--border-width: 3px;
|
|
--tab-vertical-padding: var(--su-2);
|
|
--tab-horizontal-padding: var(--su-2);
|
|
--font-size: var(--fs-base);
|
|
display: flex;
|
|
|
|
@media (min-width: $breakpoint-s) {
|
|
--tab-vertical-padding: var(--su-2);
|
|
}
|
|
|
|
&--scrollable {
|
|
overflow-x: auto;
|
|
flex-wrap: nowrap;
|
|
-webkit-overflow-scrolling: touch;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
&__list {
|
|
list-style: none;
|
|
display: flex;
|
|
width: 100%;
|
|
|
|
li {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
&__item {
|
|
padding: var(--tab-vertical-padding) var(--tab-horizontal-padding);
|
|
display: inline-flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
font-size: var(--font-size);
|
|
line-height: var(--su-6);
|
|
text-decoration: none;
|
|
cursor: pointer;
|
|
color: var(--tab-color);
|
|
position: relative;
|
|
border-radius: var(--radius);
|
|
transition: all var(--transition-props);
|
|
width: 100%;
|
|
border: none;
|
|
background: transparent;
|
|
|
|
@media (min-width: $breakpoint-s) {
|
|
width: auto;
|
|
margin: 0 var(--su-1);
|
|
}
|
|
|
|
/*
|
|
Add a, hidden, bold version of the text to get width.
|
|
This prevents the minor layout shift on tab change.
|
|
*/
|
|
&::before {
|
|
content: attr(data-text);
|
|
height: 0;
|
|
visibility: hidden;
|
|
overflow: hidden;
|
|
user-select: none;
|
|
pointer-events: none;
|
|
font-weight: var(--fw-medium);
|
|
|
|
@media speech {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
&::after {
|
|
display: none;
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
height: var(--border-width);
|
|
content: '';
|
|
background: var(--tab-bg-current);
|
|
border-radius: var(--radius);
|
|
transition: all var(--transition-props);
|
|
|
|
@media (min-width: $breakpoint-s) {
|
|
left: var(--tab-horizontal-padding);
|
|
right: var(--tab-horizontal-padding);
|
|
}
|
|
}
|
|
|
|
&:hover {
|
|
background: var(--tab-bg-hover);
|
|
color: var(--tab-color-hover);
|
|
|
|
&:after {
|
|
left: 0;
|
|
right: 0;
|
|
border-radius: 0 0 var(--radius) var(--radius);
|
|
}
|
|
}
|
|
|
|
&--current {
|
|
font-weight: var(--fw-medium);
|
|
color: var(--tab-color-current);
|
|
|
|
&::after {
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
|
|
&--wrapped {
|
|
flex-wrap: wrap;
|
|
|
|
.crayons-tabs__list {
|
|
li {
|
|
width: auto;
|
|
}
|
|
}
|
|
|
|
.crayons-tabs__item {
|
|
margin: var(--su-1);
|
|
width: auto;
|
|
}
|
|
}
|
|
}
|
|
|
|
.crayons-navigation {
|
|
--tab-horizontal-padding: var(--su-3);
|
|
--tab-vertical-padding: var(--su-2);
|
|
|
|
display: flex;
|
|
overflow-x: auto;
|
|
flex-wrap: nowrap;
|
|
// !important here because reset.scss is screwed up a little for ul,ol elements... gotta fix it one day...
|
|
padding: var(--su-1) 0 !important; // padding to improve tapping area
|
|
margin: calc(-1 * var(--su-1)) 0 !important;
|
|
|
|
@media (min-width: $breakpoint-s) {
|
|
display: block;
|
|
overflow-x: unset;
|
|
}
|
|
|
|
&__item {
|
|
display: inline-flex;
|
|
white-space: nowrap;
|
|
padding: var(--tab-vertical-padding) var(--tab-horizontal-padding);
|
|
color: var(--base-70);
|
|
position: relative;
|
|
border-radius: var(--radius);
|
|
|
|
@media (min-width: $breakpoint-s) {
|
|
display: flex;
|
|
color: var(--base-90);
|
|
white-space: unset;
|
|
padding: var(--tab-vertical-padding) var(--tab-vertical-padding);
|
|
|
|
&:hover {
|
|
color: var(--accent-brand);
|
|
background: var(--base-inverted);
|
|
}
|
|
}
|
|
|
|
&--current {
|
|
font-weight: var(--fw-bold);
|
|
color: var(--base-100);
|
|
|
|
@media (min-width: $breakpoint-s) {
|
|
background: var(--link-bg-current);
|
|
&:hover {
|
|
background: var(--link-bg-current);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.crayons-navigation--horizontal {
|
|
@media (min-width: $breakpoint-s) {
|
|
display: flex;
|
|
}
|
|
|
|
.crayons-navigation__item {
|
|
@media (min-width: $breakpoint-s) {
|
|
display: inline-flex;
|
|
color: var(--base-70);
|
|
padding: var(--tab-vertical-padding) var(--tab-horizontal-padding);
|
|
}
|
|
|
|
&:hover {
|
|
color: var(--accent-brand);
|
|
}
|
|
|
|
&--current {
|
|
color: var(--base-100);
|
|
background: none;
|
|
|
|
&:hover {
|
|
background: var(--base-inverted);
|
|
}
|
|
}
|
|
}
|
|
}
|