StarCitizenTools/mediawiki-extensions-TabberNeue
1
0
Fork 0
mirror of https://github.com/StarCitizenTools/mediawiki-extensions-TabberNeue.git synced 2024-11-13 18:37:00 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor: lint styles with stylelint

Browse source
This commit is contained in:
alistair3149 2021-06-21 14:45:06 -04:00
parent ff3a266434
commit e9fcf81043
No known key found for this signature in database
GPG key ID: 94D081060FD3DD9C
1 changed files with 136 additions and 135 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

271
modules/ext.tabberNeue.less
View file

@ -1,162 +1,163 @@
.tabber { .tabber {
display: flex; position: relative;
flex-direction: column; display: flex;
/* establish primary containing box */ /* establish primary containing box */
overflow: hidden; overflow: hidden;
position: relative; flex-direction: column;
&__header { &__nav {
/* defend against <section> needing 100% */ display: flex;
flex-shrink: 0; overflow: auto hidden;
/* fixes cross browser quarks */ box-shadow: inset 0 -1px 0 0 #a2a9b1;
min-block-size: fit-content; scrollbar-width: none;
display: flex;
position: relative;
&__prev { &::-webkit-scrollbar {
left: 0; width: 0;
} height: 0;
}
}
&__next { &__section {
right: 0; display: grid;
} overflow: hidden;
block-size: 100%;
grid-auto-columns: 100%;
grid-auto-flow: column;
}
&__prev, &__header {
&__next { position: relative;
top: 0; display: flex;
bottom: 0; /* defend against <section> needing 100% */
position: absolute; flex-shrink: 0;
width: 20px; /* fixes cross browser quarks */
cursor: pointer; min-block-size: fit-content;
display: none;
z-index: 1;
&:after { &__prev {
content: ""; left: 0;
top: 0; }
bottom: 0;
position: absolute;
width: inherit;
background-size: 14px;
background-position: center;
background-repeat: no-repeat;
}
}
&--prev-visible .tabber__nav { &__next {
mask-image: linear-gradient( 90deg, transparent, #000 20% ); right: 0;
-webkit-mask-image: linear-gradient( 90deg, transparent, #000 20% ); }
}
&--next-visible .tabber__nav { &__prev,
mask-image: linear-gradient( 90deg, #000 80%, transparent ); &__next {
-webkit-mask-image: linear-gradient( 90deg, #000 80%, transparent ); position: absolute;
} z-index: 1;
top: 0;
bottom: 0;
display: none;
width: 20px;
cursor: pointer;
&--prev-visible.tabber__header--next-visible .tabber__nav { &:after {
mask-image: linear-gradient( 90deg, transparent, #000 20%, #000 80%, transparent ); position: absolute;
-webkit-mask-image: linear-gradient( 90deg, transparent, #000 20%, #000 80%, transparent ); top: 0;
} bottom: 0;
width: inherit;
background-position: center;
background-repeat: no-repeat;
background-size: 14px;
content: '';
}
}
&--prev-visible .tabber__header__prev, &--prev-visible .tabber__nav {
&--next-visible .tabber__header__next { -webkit-mask-image: linear-gradient( 90deg, transparent, #000 20% );
display: block; mask-image: linear-gradient( 90deg, transparent, #000 20% );
} }
}
&__header, &--next-visible .tabber__nav {
&__section { -webkit-mask-image: linear-gradient( 90deg, #000 80%, transparent );
/* prevent scroll chaining on x scroll */ mask-image: linear-gradient( 90deg, #000 80%, transparent );
overscroll-behavior-x: contain; }
/* scrolling should snap children on x */
scroll-snap-type: x mandatory;
}
&__header, &--prev-visible.tabber__header--next-visible .tabber__nav {
&__section, -webkit-mask-image: linear-gradient( 90deg, transparent, #000 20%, #000 80%, transparent );
&__nav { mask-image: linear-gradient( 90deg, transparent, #000 20%, #000 80%, transparent );
scrollbar-width: none; }
&::-webkit-scrollbar { &--prev-visible .tabber__header__prev,
width: 0; &--next-visible .tabber__header__next {
height: 0; display: block;
} }
} }
&__nav { &__header,
display: flex; &__section {
overflow: auto hidden; /* prevent scroll chaining on x scroll */
box-shadow: inset 0 -1px 0 0 #a2a9b1; overscroll-behavior-x: contain;
} /* scrolling should snap children on x */
scroll-snap-type: x mandatory;
scrollbar-width: none;
&__item { &::-webkit-scrollbar {
scroll-snap-align: start; width: 0;
display: inline-flex; height: 0;
align-items: center; }
white-space: nowrap; }
padding: 5px 12px;
color: #54595d;
text-decoration: none;
font-weight: bold;
&:visited { &__item {
color: #54595d; display: inline-flex;
} align-items: center;
padding: 5px 12px;
color: #54595d;
font-weight: bold;
scroll-snap-align: start;
text-decoration: none;
white-space: nowrap;
&:hover, &:visited {
&:active, color: #54595d;
&:focus { }
text-decoration: none;
}
&--active, &:hover,
&--active:visited { &:active,
color: #36c; &:focus {
box-shadow: inset 0 -2px 0 0 #36c; text-decoration: none;
} }
}
&__section { &--active,
overflow: hidden; &--active:visited {
block-size: 100%; box-shadow: inset 0 -2px 0 0 #36c;
display: grid; color: #36c;
grid-auto-flow: column; }
grid-auto-columns: 100%; }
}
&__panel { &__panel {
/* be pushy about consuming all space */ height: max-content;
block-size: 100%; /* be pushy about consuming all space */
scroll-snap-align: start; block-size: 100%;
overflow-y: auto; overflow-y: auto;
overscroll-behavior-y: contain; overscroll-behavior-y: contain;
height: max-content; scroll-snap-align: start;
} }
} }
@media (hover: hover) { @media ( hover: hover ) {
.tabber { .tabber {
&__item { &__item {
&:hover { &:hover {
color: #447ff5; box-shadow: inset 0 -2px 0 0 #447ff5;
box-shadow: inset 0 -2px 0 0 #447ff5; color: #447ff5;
} }
&:active { &:active {
color: #2a4b8d; box-shadow: inset 0 -2px 0 0 #2a4b8d;
box-shadow: inset 0 -2px 0 0 #2a4b8d; color: #2a4b8d;
} }
} }
} }
} }
@media (prefers-reduced-motion: no-preference) { @media ( prefers-reduced-motion: no-preference ) {
.tabber { .tabber {
&__header, &__header,
&__section, &__section,
&__nav { &__nav {
scroll-behavior: smooth; scroll-behavior: smooth;
} }
} }
} }