Use stylelint
This commit is contained in:
tusooa
parent
38961bc167
commit
7dc2277453
125 changed files with 984 additions and 854 deletions
78
src/App.scss
78
src/App.scss
|
|
@ -1,5 +1,7 @@
|
|||
// stylelint-disable rscss/class-format
|
||||
@import './_variables.scss';
|
||||
/* stylelint-disable no-descending-specificity */
|
||||
@import "./variables";
|
||||
@import "./panel";
|
||||
|
||||
:root {
|
||||
--navbar-height: 3.5rem;
|
||||
|
|
@ -123,7 +125,7 @@ h4 {
|
|||
font-weight: 1000;
|
||||
}
|
||||
|
||||
i[class*=icon-],
|
||||
i[class*="icon-"],
|
||||
.svg-inline--fa,
|
||||
.iconLetter {
|
||||
color: $fallback--icon;
|
||||
|
|
@ -132,7 +134,7 @@ i[class*=icon-],
|
|||
|
||||
.button-unstyled:hover,
|
||||
a:hover {
|
||||
> i[class*=icon-],
|
||||
> i[class*="icon-"],
|
||||
> .svg-inline--fa,
|
||||
> .iconLetter {
|
||||
color: var(--text);
|
||||
|
|
@ -141,12 +143,11 @@ a:hover {
|
|||
|
||||
nav {
|
||||
z-index: var(--ZI_navbar);
|
||||
color: var(--topBarText);
|
||||
background-color: $fallback--fg;
|
||||
background-color: var(--topBar, $fallback--fg);
|
||||
color: $fallback--faint;
|
||||
color: var(--faint, $fallback--faint);
|
||||
box-shadow: 0 0 4px rgba(0, 0, 0, 0.6);
|
||||
box-shadow: 0 0 4px rgb(0 0 0 / 60%);
|
||||
box-shadow: var(--topBarShadow);
|
||||
box-sizing: border-box;
|
||||
height: var(--navbar-height);
|
||||
|
|
@ -191,13 +192,11 @@ nav {
|
|||
}
|
||||
|
||||
.underlay {
|
||||
grid-column-start: 1;
|
||||
grid-column-end: span 3;
|
||||
grid-row-start: 1;
|
||||
grid-row-end: 1;
|
||||
grid-column: 1 / span 3;
|
||||
grid-row: 1 / 1;
|
||||
pointer-events: none;
|
||||
background-color: rgba(0, 0, 0, 0.15);
|
||||
background-color: var(--underlay, rgba(0, 0, 0, 0.15));
|
||||
background-color: rgb(0 0 0 / 15%);
|
||||
background-color: var(--underlay, rgb(0 0 0 / 15%));
|
||||
z-index: -1000;
|
||||
}
|
||||
|
||||
|
|
@ -215,8 +214,10 @@ nav {
|
|||
grid-template-columns:
|
||||
var(--effectiveSidebarColumnWidth)
|
||||
var(--effectiveContentColumnWidth);
|
||||
/* stylelint-disable declaration-block-no-redundant-longhand-properties */
|
||||
grid-template-areas: "sidebar content";
|
||||
grid-template-rows: 1fr;
|
||||
/* stylelint-enable declaration-block-no-redundant-longhand-properties */
|
||||
box-sizing: border-box;
|
||||
margin: 0 auto;
|
||||
align-content: flex-start;
|
||||
|
|
@ -231,8 +232,7 @@ nav {
|
|||
display: grid;
|
||||
grid-template-columns: 100%;
|
||||
box-sizing: border-box;
|
||||
grid-row-start: 1;
|
||||
grid-row-end: 1;
|
||||
grid-row: 1 / 1;
|
||||
margin: 0 calc(var(--___columnMargin) / 2);
|
||||
padding: calc(var(--___columnMargin)) 0;
|
||||
row-gap: var(--___columnMargin);
|
||||
|
|
@ -307,7 +307,7 @@ nav {
|
|||
align-content: start;
|
||||
}
|
||||
|
||||
&.-reverse:not(.-wide):not(.-mobile) {
|
||||
&.-reverse:not(.-wide, .-mobile) {
|
||||
grid-template-columns:
|
||||
var(--effectiveContentColumnWidth)
|
||||
var(--effectiveSidebarColumnWidth);
|
||||
|
|
@ -336,11 +336,8 @@ nav {
|
|||
padding: 0;
|
||||
|
||||
.column {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
padding-top: 0;
|
||||
margin-top: var(--navbar-height);
|
||||
margin-bottom: 0;
|
||||
margin-top: var(--navbar-height) 0 0 0;
|
||||
}
|
||||
|
||||
.panel-heading,
|
||||
|
|
@ -389,7 +386,7 @@ nav {
|
|||
background: transparent;
|
||||
}
|
||||
|
||||
i[class*=icon-],
|
||||
i[class*="icon-"],
|
||||
.svg-inline--fa {
|
||||
color: $fallback--text;
|
||||
color: var(--btnText, $fallback--text);
|
||||
|
|
@ -400,12 +397,15 @@ nav {
|
|||
}
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 0 4px rgba(255, 255, 255, 0.3);
|
||||
box-shadow: 0 0 4px rgb(255 255 255 / 30%);
|
||||
box-shadow: var(--buttonHoverShadow);
|
||||
}
|
||||
|
||||
&:active {
|
||||
box-shadow: 0 0 4px 0 rgba(255, 255, 255, 0.3), 0 1px 0 0 rgba(0, 0, 0, 0.2) inset, 0 -1px 0 0 rgba(255, 255, 255, 0.2) inset;
|
||||
box-shadow:
|
||||
0 0 4px 0 rgb(255 255 255 / 30%),
|
||||
0 1px 0 0 rgb(0 0 0 / 20%) inset,
|
||||
0 -1px 0 0 rgb(255 255 255 / 20%) inset;
|
||||
box-shadow: var(--buttonPressedShadow);
|
||||
color: $fallback--text;
|
||||
color: var(--btnPressedText, $fallback--text);
|
||||
|
|
@ -438,7 +438,10 @@ nav {
|
|||
color: var(--btnToggledText, $fallback--text);
|
||||
background-color: $fallback--fg;
|
||||
background-color: var(--btnToggled, $fallback--fg);
|
||||
box-shadow: 0 0 4px 0 rgba(255, 255, 255, 0.3), 0 1px 0 0 rgba(0, 0, 0, 0.2) inset, 0 -1px 0 0 rgba(255, 255, 255, 0.2) inset;
|
||||
box-shadow:
|
||||
0 0 4px 0 rgb(255 255 255 / 30%),
|
||||
0 1px 0 0 rgb(0 0 0 / 20%) inset,
|
||||
0 -1px 0 0 rgb(255 255 255 / 20%) inset;
|
||||
box-shadow: var(--buttonPressedShadow);
|
||||
|
||||
svg,
|
||||
|
|
@ -503,7 +506,10 @@ textarea,
|
|||
border: none;
|
||||
border-radius: $fallback--inputRadius;
|
||||
border-radius: var(--inputRadius, $fallback--inputRadius);
|
||||
box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.2) inset, 0 -1px 0 0 rgba(255, 255, 255, 0.2) inset, 0 0 2px 0 rgba(0, 0, 0, 1) inset;
|
||||
box-shadow:
|
||||
0 1px 0 0 rgb(0 0 0 / 20%) inset,
|
||||
0 -1px 0 0 rgb(255 255 255 / 20%) inset,
|
||||
0 0 2px 0 rgb(0 0 0 / 100%) inset;
|
||||
box-shadow: var(--inputShadow);
|
||||
background-color: $fallback--fg;
|
||||
background-color: var(--input, $fallback--fg);
|
||||
|
|
@ -521,13 +527,13 @@ textarea,
|
|||
padding: 0 var(--_padding);
|
||||
|
||||
&:disabled,
|
||||
&[disabled=disabled],
|
||||
&[disabled="disabled"],
|
||||
&.disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
&[type=range] {
|
||||
&[type="range"] {
|
||||
background: none;
|
||||
border: none;
|
||||
margin: 0;
|
||||
|
|
@ -535,7 +541,7 @@ textarea,
|
|||
flex: 1;
|
||||
}
|
||||
|
||||
&[type=radio] {
|
||||
&[type="radio"] {
|
||||
display: none;
|
||||
|
||||
&:checked + label::before {
|
||||
|
|
@ -555,7 +561,7 @@ textarea,
|
|||
+ label::before {
|
||||
flex-shrink: 0;
|
||||
display: inline-block;
|
||||
content: '';
|
||||
content: "";
|
||||
transition: box-shadow 200ms;
|
||||
width: 1.1em;
|
||||
height: 1.1em;
|
||||
|
|
@ -575,7 +581,7 @@ textarea,
|
|||
}
|
||||
}
|
||||
|
||||
&[type=checkbox] {
|
||||
&[type="checkbox"] {
|
||||
display: none;
|
||||
|
||||
&:checked + label::before {
|
||||
|
|
@ -594,7 +600,7 @@ textarea,
|
|||
+ label::before {
|
||||
flex-shrink: 0;
|
||||
display: inline-block;
|
||||
content: '✓';
|
||||
content: "✓";
|
||||
transition: color 200ms;
|
||||
width: 1.1em;
|
||||
height: 1.1em;
|
||||
|
|
@ -634,10 +640,10 @@ option {
|
|||
}
|
||||
|
||||
.hide-number-spinner {
|
||||
-moz-appearance: textfield;
|
||||
appearance: textfield;
|
||||
|
||||
&[type=number]::-webkit-inner-spin-button,
|
||||
&[type=number]::-webkit-outer-spin-button {
|
||||
&[type="number"]::-webkit-inner-spin-button,
|
||||
&[type="number"]::-webkit-outer-spin-button {
|
||||
opacity: 0;
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -669,8 +675,6 @@ option {
|
|||
}
|
||||
}
|
||||
|
||||
@import './panel.scss';
|
||||
|
||||
.fa {
|
||||
color: grey;
|
||||
}
|
||||
|
|
@ -686,7 +690,7 @@ option {
|
|||
max-width: 10em;
|
||||
min-width: 1.7em;
|
||||
height: 1.3em;
|
||||
padding: 0.15em 0.15em;
|
||||
padding: 0.15em;
|
||||
vertical-align: middle;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
|
|
@ -789,7 +793,8 @@ option {
|
|||
|
||||
.fa-old-padding {
|
||||
&.iconLetter,
|
||||
&.svg-inline--fa, &-layer {
|
||||
&.svg-inline--fa,
|
||||
&-layer {
|
||||
padding: 0 0.3em;
|
||||
}
|
||||
}
|
||||
|
|
@ -883,3 +888,4 @@ option {
|
|||
.fade-leave-active {
|
||||
opacity: 0;
|
||||
}
|
||||
/* stylelint-enable no-descending-specificity */
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue