Fix SCSS linting issues (#2207)
* Disable font-family-no-missing-generic-family-keyword for font-awesome accessibility icons * Run stylelint --fix * Avoid `@extend` directives with doodle modal CSS * Drop use of `@extend` for notification cleanup buttons SCSS * Run prettier on SCSS
This commit is contained in:
@@ -3,8 +3,7 @@
|
||||
src: local('Roboto Mono'),
|
||||
url('~fonts/roboto-mono/robotomono-regular-webfont.woff2') format('woff2'),
|
||||
url('~fonts/roboto-mono/robotomono-regular-webfont.woff') format('woff'),
|
||||
url('~fonts/roboto-mono/robotomono-regular-webfont.ttf')
|
||||
format('truetype'),
|
||||
url('~fonts/roboto-mono/robotomono-regular-webfont.ttf') format('truetype'),
|
||||
url('~fonts/roboto-mono/robotomono-regular-webfont.svg#roboto_monoregular')
|
||||
format('svg');
|
||||
font-weight: 400;
|
||||
|
@@ -547,7 +547,7 @@ ul.rules-list {
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 697px) {
|
||||
@media (width <= 697px) {
|
||||
.email-container,
|
||||
.col-1,
|
||||
.col-2,
|
||||
|
@@ -33,7 +33,7 @@
|
||||
border-radius: 4px 4px 0 0;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
@media screen and (width <= 600px) {
|
||||
height: 200px;
|
||||
}
|
||||
}
|
||||
@@ -158,7 +158,7 @@
|
||||
color: lighten($inverted-text-color, 10%);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 700px) {
|
||||
@media screen and (width <= 700px) {
|
||||
padding: 30px 20px;
|
||||
|
||||
.page {
|
||||
|
@@ -1371,7 +1371,7 @@ a.sparkline {
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 930px) {
|
||||
@media screen and (width <= 930px) {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
}
|
||||
}
|
||||
@@ -1657,7 +1657,7 @@ a.sparkline {
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
@media screen and (width <= 800px) {
|
||||
border: 0;
|
||||
|
||||
&__item {
|
||||
|
@@ -514,7 +514,7 @@ body > [data-popper-placement] {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
@media screen and (width <= 600px) {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
@@ -535,7 +535,7 @@ body > [data-popper-placement] {
|
||||
all: unset;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
@media screen and (width <= 600px) {
|
||||
height: 100px !important; // Prevent auto-resize textarea
|
||||
resize: vertical;
|
||||
}
|
||||
@@ -2413,7 +2413,7 @@ $ui-header-height: 55px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 320px) {
|
||||
@media screen and (width >= 320px) {
|
||||
.logo--wordmark {
|
||||
display: block;
|
||||
}
|
||||
@@ -2525,7 +2525,7 @@ $ui-header-height: 55px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 631px) {
|
||||
@media screen and (width >= 631px) {
|
||||
.columns-area {
|
||||
padding: 0;
|
||||
}
|
||||
@@ -2585,7 +2585,7 @@ $ui-header-height: 55px;
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
@media screen and (min-width: 631px) {
|
||||
@media screen and (width >= 631px) {
|
||||
background: lighten($ui-base-color, 14%);
|
||||
border-bottom-color: lighten($ui-base-color, 14%);
|
||||
}
|
||||
@@ -2602,7 +2602,7 @@ $ui-header-height: 55px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 600px) {
|
||||
@media screen and (width >= 600px) {
|
||||
.tabs-bar__link {
|
||||
span {
|
||||
display: inline;
|
||||
@@ -2825,7 +2825,7 @@ $ui-header-height: 55px;
|
||||
color: $darker-text-color;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 600px) {
|
||||
@media screen and (width >= 600px) {
|
||||
padding: 40px;
|
||||
}
|
||||
}
|
||||
@@ -2935,7 +2935,7 @@ $ui-header-height: 55px;
|
||||
height: 36px;
|
||||
color: $dark-text-color;
|
||||
|
||||
@media screen and (min-width: 600px) {
|
||||
@media screen and (width >= 600px) {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
@@ -2987,7 +2987,7 @@ $ui-header-height: 55px;
|
||||
position: sticky;
|
||||
background: $ui-base-color;
|
||||
|
||||
@media screen and (min-width: 600) {
|
||||
@media screen and (width >= 600) {
|
||||
padding: 0 40px;
|
||||
}
|
||||
|
||||
@@ -3255,7 +3255,7 @@ $ui-header-height: 55px;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
@media screen and (min-height: 640px) {
|
||||
@media screen and (height >= 640px) {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
@@ -3604,19 +3604,19 @@ $ui-header-height: 55px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-height: 810px) {
|
||||
@media screen and (height <= 810px) {
|
||||
.trends__item:nth-of-type(3) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-height: 720px) {
|
||||
@media screen and (height <= 720px) {
|
||||
.trends__item:nth-of-type(2) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-height: 670px) {
|
||||
@media screen and (height <= 670px) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@@ -3700,7 +3700,7 @@ $ui-header-height: 55px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
@media screen and (width <= 600px) {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
@@ -4496,7 +4496,7 @@ a.status-card.compact:hover {
|
||||
background: lighten($ui-base-color, 4%);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
@media screen and (width <= 600px) {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
@@ -5831,7 +5831,7 @@ a.status-card.compact:hover {
|
||||
font-weight: 700;
|
||||
margin-bottom: 15px;
|
||||
|
||||
@media screen and (max-height: 800px) {
|
||||
@media screen and (height <= 800px) {
|
||||
font-size: 22px;
|
||||
}
|
||||
}
|
||||
@@ -6018,7 +6018,7 @@ a.status-card.compact:hover {
|
||||
display: flex;
|
||||
border-top: 1px solid $ui-secondary-color;
|
||||
|
||||
@media screen and (max-width: 480px) {
|
||||
@media screen and (width <= 480px) {
|
||||
flex-wrap: wrap;
|
||||
overflow-y: auto;
|
||||
}
|
||||
@@ -6029,7 +6029,7 @@ a.status-card.compact:hover {
|
||||
box-sizing: border-box;
|
||||
width: 50%;
|
||||
|
||||
@media screen and (max-width: 480px) {
|
||||
@media screen and (width <= 480px) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
@@ -6051,13 +6051,13 @@ a.status-card.compact:hover {
|
||||
color: $inverted-text-color;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 480px) {
|
||||
@media screen and (width <= 480px) {
|
||||
max-height: 10vh;
|
||||
}
|
||||
}
|
||||
|
||||
.focal-point-modal__content {
|
||||
@media screen and (max-width: 480px) {
|
||||
@media screen and (width <= 480px) {
|
||||
max-height: 40vh;
|
||||
}
|
||||
}
|
||||
@@ -6108,7 +6108,7 @@ a.status-card.compact:hover {
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 480px) {
|
||||
@media screen and (width <= 480px) {
|
||||
padding: 10px;
|
||||
max-width: 100%;
|
||||
order: 2;
|
||||
@@ -7136,7 +7136,7 @@ noscript {
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 630px) and (max-height: 400px) {
|
||||
@media screen and (width <= 630px) and (height <= 400px) {
|
||||
$duration: 400ms;
|
||||
$delay: 100ms;
|
||||
|
||||
@@ -7266,7 +7266,7 @@ noscript {
|
||||
background: lighten($ui-base-color, 4%);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
@media screen and (width <= 600px) {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
@@ -7357,7 +7357,7 @@ noscript {
|
||||
width: 380px;
|
||||
overflow: hidden;
|
||||
|
||||
@media screen and (max-width: 420px) {
|
||||
@media screen and (width <= 420px) {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
@@ -7412,7 +7412,7 @@ noscript {
|
||||
width: 380px;
|
||||
overflow: hidden;
|
||||
|
||||
@media screen and (max-width: 420px) {
|
||||
@media screen and (width <= 420px) {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
@@ -7511,7 +7511,7 @@ noscript {
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 480px) {
|
||||
@media screen and (width <= 480px) {
|
||||
img,
|
||||
video {
|
||||
max-height: 100%;
|
||||
@@ -9068,7 +9068,7 @@ noscript {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
@media screen and (width <= 600px) {
|
||||
display: block;
|
||||
|
||||
h4 {
|
||||
|
@@ -2,7 +2,7 @@
|
||||
width: 700px;
|
||||
margin: 0 auto;
|
||||
|
||||
@media screen and (max-width: 740px) {
|
||||
@media screen and (width <= 740px) {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
@@ -44,7 +44,7 @@
|
||||
margin-top: 40px;
|
||||
box-sizing: border-box;
|
||||
|
||||
@media screen and (max-width: 400px) {
|
||||
@media screen and (width <= 400px) {
|
||||
width: 100%;
|
||||
margin-top: 0;
|
||||
padding: 20px;
|
||||
@@ -64,7 +64,7 @@
|
||||
margin-bottom: 10px;
|
||||
border-bottom: 1px solid $ui-base-color;
|
||||
|
||||
@media screen and (max-width: 440px) {
|
||||
@media screen and (width <= 440px) {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 20px;
|
||||
|
@@ -59,7 +59,7 @@
|
||||
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
|
||||
grid-gap: 10px;
|
||||
|
||||
@media screen and (max-width: 1350px) {
|
||||
@media screen and (width <= 1350px) {
|
||||
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
|
||||
}
|
||||
|
||||
|
@@ -722,7 +722,7 @@ code {
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 740px) and (min-width: 441px) {
|
||||
@media screen and (width <= 740px) and (width >= 441px) {
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
|
@@ -30,7 +30,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
@media screen and (width <= 600px) {
|
||||
.account-header {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
@@ -63,7 +63,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 740px) {
|
||||
@media screen and (width <= 740px) {
|
||||
.detailed-status,
|
||||
.status,
|
||||
.load-more {
|
||||
|
@@ -361,7 +361,7 @@ a.table-action-link {
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 870px) {
|
||||
@media screen and (width <= 870px) {
|
||||
.accounts-table tbody td.optional {
|
||||
display: none;
|
||||
}
|
||||
|
Reference in New Issue
Block a user