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:
parent
481aed8061
commit
b80dc7d2ed
31 changed files with 88 additions and 90 deletions
|
@ -11,6 +11,7 @@ import PropTypes from 'prop-types';
|
||||||
import { defineMessages, injectIntl } from 'react-intl';
|
import { defineMessages, injectIntl } from 'react-intl';
|
||||||
import ImmutablePureComponent from 'react-immutable-pure-component';
|
import ImmutablePureComponent from 'react-immutable-pure-component';
|
||||||
import Icon from 'flavours/glitch/components/icon';
|
import Icon from 'flavours/glitch/components/icon';
|
||||||
|
import classNames from 'classnames';
|
||||||
|
|
||||||
const messages = defineMessages({
|
const messages = defineMessages({
|
||||||
btnAll : { id: 'notification_purge.btn_all', defaultMessage: 'Select\nall' },
|
btnAll : { id: 'notification_purge.btn_all', defaultMessage: 'Select\nall' },
|
||||||
|
@ -36,19 +37,19 @@ class NotificationPurgeButtons extends ImmutablePureComponent {
|
||||||
//className='active'
|
//className='active'
|
||||||
return (
|
return (
|
||||||
<div className='column-header__notif-cleaning-buttons'>
|
<div className='column-header__notif-cleaning-buttons'>
|
||||||
<button onClick={this.props.onMarkAll} className={markNewForDelete ? 'active' : ''}>
|
<button onClick={this.props.onMarkAll} className={classNames('column-header__button', { active: markNewForDelete })}>
|
||||||
<b>∀</b><br />{intl.formatMessage(messages.btnAll)}
|
<b>∀</b><br />{intl.formatMessage(messages.btnAll)}
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<button onClick={this.props.onMarkNone} className={!markNewForDelete ? 'active' : ''}>
|
<button onClick={this.props.onMarkNone} className={classNames('column-header__button', { active: !markNewForDelete })}>
|
||||||
<b>∅</b><br />{intl.formatMessage(messages.btnNone)}
|
<b>∅</b><br />{intl.formatMessage(messages.btnNone)}
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<button onClick={this.props.onInvert}>
|
<button onClick={this.props.onInvert} className='column-header__button'>
|
||||||
<b>¬</b><br />{intl.formatMessage(messages.btnInvert)}
|
<b>¬</b><br />{intl.formatMessage(messages.btnInvert)}
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<button onClick={this.props.onDeleteMarked}>
|
<button onClick={this.props.onDeleteMarked} className='column-header__button'>
|
||||||
<Icon id='trash' /><br />{intl.formatMessage(messages.btnApply)}
|
<Icon id='trash' /><br />{intl.formatMessage(messages.btnApply)}
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -24,9 +24,11 @@ $emojis-requiring-inversion: 'back' 'copyright' 'curly_loop' 'currency_exchange'
|
||||||
position: absolute;
|
position: absolute;
|
||||||
content: '\F00C';
|
content: '\F00C';
|
||||||
font-size: 50%;
|
font-size: 50%;
|
||||||
font-family: FontAwesome;
|
|
||||||
inset-inline-end: -0.55em;
|
inset-inline-end: -0.55em;
|
||||||
top: -0.44em;
|
top: -0.44em;
|
||||||
|
|
||||||
|
/* stylelint-disable-next-line font-family-no-missing-generic-family-keyword -- this is an icon font, this can't use a generic font */
|
||||||
|
font-family: FontAwesome;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -33,7 +33,7 @@
|
||||||
border-radius: 4px 4px 0 0;
|
border-radius: 4px 4px 0 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-width: 600px) {
|
@media screen and (width <= 600px) {
|
||||||
height: 200px;
|
height: 200px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -162,7 +162,7 @@
|
||||||
color: lighten($inverted-text-color, 10%);
|
color: lighten($inverted-text-color, 10%);
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-width: 700px) {
|
@media screen and (width <= 700px) {
|
||||||
padding: 30px 20px;
|
padding: 30px 20px;
|
||||||
|
|
||||||
.page {
|
.page {
|
||||||
|
|
|
@ -1377,7 +1377,7 @@ a.sparkline {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-width: 930px) {
|
@media screen and (width <= 930px) {
|
||||||
grid-template-columns: minmax(0, 1fr);
|
grid-template-columns: minmax(0, 1fr);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -1663,7 +1663,7 @@ a.sparkline {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-width: 800px) {
|
@media screen and (width <= 800px) {
|
||||||
border: 0;
|
border: 0;
|
||||||
|
|
||||||
&__item {
|
&__item {
|
||||||
|
|
|
@ -136,7 +136,7 @@
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-width: 600px) {
|
@media screen and (width <= 600px) {
|
||||||
display: block;
|
display: block;
|
||||||
|
|
||||||
h4 {
|
h4 {
|
||||||
|
|
|
@ -79,7 +79,7 @@ $ui-header-height: 55px;
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (min-width: 320px) {
|
@media screen and (width >= 320px) {
|
||||||
.logo--wordmark {
|
.logo--wordmark {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
@ -205,7 +205,7 @@ $ui-header-height: 55px;
|
||||||
|
|
||||||
&:last-child {
|
&:last-child {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
padding-inline-end: 15px;;
|
padding-inline-end: 15px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -441,9 +441,7 @@ $ui-header-height: 55px;
|
||||||
align-items: stretch;
|
align-items: stretch;
|
||||||
justify-content: space-around;
|
justify-content: space-around;
|
||||||
|
|
||||||
button {
|
.column-header__button {
|
||||||
@extend .column-header__button;
|
|
||||||
|
|
||||||
background: transparent;
|
background: transparent;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
padding: 10px 5px;
|
padding: 10px 5px;
|
||||||
|
@ -809,7 +807,7 @@ $ui-header-height: 55px;
|
||||||
background: lighten($ui-base-color, 4%);
|
background: lighten($ui-base-color, 4%);
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-width: 600px) {
|
@media screen and (width <= 600px) {
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,8 +1,6 @@
|
||||||
$doodle-background: #d9e1e8;
|
$doodle-background: #d9e1e8;
|
||||||
|
|
||||||
.doodle-modal {
|
.doodle-modal {
|
||||||
@extend .boost-modal;
|
|
||||||
|
|
||||||
width: unset;
|
width: unset;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -16,8 +14,6 @@ $doodle-background: #d9e1e8;
|
||||||
}
|
}
|
||||||
|
|
||||||
.doodle-modal__action-bar {
|
.doodle-modal__action-bar {
|
||||||
@extend .boost-modal__action-bar;
|
|
||||||
|
|
||||||
.filler {
|
.filler {
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
|
|
@ -229,7 +229,7 @@
|
||||||
cursor: inherit;
|
cursor: inherit;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (min-height: 640px) {
|
@media screen and (height >= 640px) {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -6,7 +6,7 @@
|
||||||
width: 380px;
|
width: 380px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
|
||||||
@media screen and (max-width: 420px) {
|
@media screen and (width <= 420px) {
|
||||||
width: 90%;
|
width: 90%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -60,7 +60,7 @@
|
||||||
width: 380px;
|
width: 380px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
|
||||||
@media screen and (max-width: 420px) {
|
@media screen and (width <= 420px) {
|
||||||
width: 90%;
|
width: 90%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -125,7 +125,7 @@
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-width: 630px) {
|
@media screen and (width <= 630px) {
|
||||||
.glitch.local-settings__navigation {
|
.glitch.local-settings__navigation {
|
||||||
width: 40px;
|
width: 40px;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
|
|
|
@ -827,7 +827,7 @@ body > [data-popper-placement] {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (min-width: 631px) {
|
@media screen and (width >= 631px) {
|
||||||
.columns-area {
|
.columns-area {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
@ -1134,19 +1134,19 @@ body > [data-popper-placement] {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-height: 810px) {
|
@media screen and (height <= 810px) {
|
||||||
.trends__item:nth-of-type(3) {
|
.trends__item:nth-of-type(3) {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-height: 720px) {
|
@media screen and (height <= 720px) {
|
||||||
.trends__item:nth-of-type(2) {
|
.trends__item:nth-of-type(2) {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-height: 670px) {
|
@media screen and (height <= 670px) {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -115,7 +115,7 @@
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-width: 550px) {
|
@media screen and (width <= 550px) {
|
||||||
.onboarding-modal {
|
.onboarding-modal {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
@ -382,7 +382,7 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-width: 320px) and (max-height: 600px) {
|
@media screen and (width <= 320px) and (height <= 600px) {
|
||||||
.onboarding-modal__page p {
|
.onboarding-modal__page p {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
line-height: 20px;
|
line-height: 20px;
|
||||||
|
@ -413,6 +413,7 @@
|
||||||
margin-inline-start: 10px;
|
margin-inline-start: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.doodle-modal,
|
||||||
.boost-modal,
|
.boost-modal,
|
||||||
.confirmation-modal,
|
.confirmation-modal,
|
||||||
.report-modal,
|
.report-modal,
|
||||||
|
@ -485,6 +486,7 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.doodle-modal__action-bar,
|
||||||
.boost-modal__action-bar,
|
.boost-modal__action-bar,
|
||||||
.confirmation-modal__action-bar,
|
.confirmation-modal__action-bar,
|
||||||
.mute-modal__action-bar,
|
.mute-modal__action-bar,
|
||||||
|
@ -560,7 +562,7 @@
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
margin-bottom: 15px;
|
margin-bottom: 15px;
|
||||||
|
|
||||||
@media screen and (max-height: 800px) {
|
@media screen and (height <= 800px) {
|
||||||
font-size: 22px;
|
font-size: 22px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -747,7 +749,7 @@
|
||||||
display: flex;
|
display: flex;
|
||||||
border-top: 1px solid $ui-secondary-color;
|
border-top: 1px solid $ui-secondary-color;
|
||||||
|
|
||||||
@media screen and (max-width: 480px) {
|
@media screen and (width <= 480px) {
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
}
|
}
|
||||||
|
@ -758,7 +760,7 @@
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
width: 50%;
|
width: 50%;
|
||||||
|
|
||||||
@media screen and (max-width: 480px) {
|
@media screen and (width <= 480px) {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -775,13 +777,13 @@
|
||||||
color: $highlight-text-color;
|
color: $highlight-text-color;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-width: 480px) {
|
@media screen and (width <= 480px) {
|
||||||
max-height: 10vh;
|
max-height: 10vh;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.focal-point-modal__content {
|
.focal-point-modal__content {
|
||||||
@media screen and (max-width: 480px) {
|
@media screen and (width <= 480px) {
|
||||||
max-height: 40vh;
|
max-height: 40vh;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -877,7 +879,7 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-width: 480px) {
|
@media screen and (width <= 480px) {
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
order: 2;
|
order: 2;
|
||||||
|
@ -1152,7 +1154,7 @@
|
||||||
background: lighten($ui-base-color, 4%);
|
background: lighten($ui-base-color, 4%);
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-width: 600px) {
|
@media screen and (width <= 600px) {
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -1233,7 +1235,7 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-width: 480px) {
|
@media screen and (width <= 480px) {
|
||||||
img,
|
img,
|
||||||
video {
|
video {
|
||||||
max-height: 100%;
|
max-height: 100%;
|
||||||
|
|
|
@ -94,7 +94,7 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (min-width: 600px) {
|
@media screen and (width >= 600px) {
|
||||||
.tabs-bar__link {
|
.tabs-bar__link {
|
||||||
span {
|
span {
|
||||||
display: inline;
|
display: inline;
|
||||||
|
|
|
@ -2,7 +2,7 @@
|
||||||
width: 700px;
|
width: 700px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
|
|
||||||
@media screen and (max-width: 740px) {
|
@media screen and (width <= 740px) {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
@ -44,7 +44,7 @@
|
||||||
margin-top: 40px;
|
margin-top: 40px;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
|
||||||
@media screen and (max-width: 400px) {
|
@media screen and (width <= 400px) {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
|
@ -64,7 +64,7 @@
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
border-bottom: 1px solid $ui-base-color;
|
border-bottom: 1px solid $ui-base-color;
|
||||||
|
|
||||||
@media screen and (max-width: 440px) {
|
@media screen and (width <= 440px) {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
|
|
|
@ -59,7 +59,7 @@
|
||||||
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
|
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
|
||||||
grid-gap: 10px;
|
grid-gap: 10px;
|
||||||
|
|
||||||
@media screen and (max-width: 1350px) {
|
@media screen and (width <= 1350px) {
|
||||||
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
|
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -723,7 +723,7 @@ code {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-width: 740px) and (min-width: 441px) {
|
@media screen and (width <= 740px) and (width >= 441px) {
|
||||||
margin-top: 40px;
|
margin-top: 40px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -30,7 +30,7 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-width: 600px) {
|
@media screen and (width <= 600px) {
|
||||||
.account-header {
|
.account-header {
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
}
|
}
|
||||||
|
|
|
@ -59,7 +59,7 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-width: 740px) {
|
@media screen and (width <= 740px) {
|
||||||
.detailed-status,
|
.detailed-status,
|
||||||
.status,
|
.status,
|
||||||
.load-more {
|
.load-more {
|
||||||
|
|
|
@ -357,7 +357,7 @@ a.table-action-link {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-width: 870px) {
|
@media screen and (width <= 870px) {
|
||||||
.accounts-table tbody td.optional {
|
.accounts-table tbody td.optional {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
|
@ -3,8 +3,7 @@
|
||||||
src: local('Roboto Mono'),
|
src: local('Roboto Mono'),
|
||||||
url('~fonts/roboto-mono/robotomono-regular-webfont.woff2') format('woff2'),
|
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.woff') format('woff'),
|
||||||
url('~fonts/roboto-mono/robotomono-regular-webfont.ttf')
|
url('~fonts/roboto-mono/robotomono-regular-webfont.ttf') format('truetype'),
|
||||||
format('truetype'),
|
|
||||||
url('~fonts/roboto-mono/robotomono-regular-webfont.svg#roboto_monoregular')
|
url('~fonts/roboto-mono/robotomono-regular-webfont.svg#roboto_monoregular')
|
||||||
format('svg');
|
format('svg');
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
|
|
|
@ -547,7 +547,7 @@ ul.rules-list {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 697px) {
|
@media (width <= 697px) {
|
||||||
.email-container,
|
.email-container,
|
||||||
.col-1,
|
.col-1,
|
||||||
.col-2,
|
.col-2,
|
||||||
|
|
|
@ -33,7 +33,7 @@
|
||||||
border-radius: 4px 4px 0 0;
|
border-radius: 4px 4px 0 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-width: 600px) {
|
@media screen and (width <= 600px) {
|
||||||
height: 200px;
|
height: 200px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -158,7 +158,7 @@
|
||||||
color: lighten($inverted-text-color, 10%);
|
color: lighten($inverted-text-color, 10%);
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-width: 700px) {
|
@media screen and (width <= 700px) {
|
||||||
padding: 30px 20px;
|
padding: 30px 20px;
|
||||||
|
|
||||||
.page {
|
.page {
|
||||||
|
|
|
@ -1371,7 +1371,7 @@ a.sparkline {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-width: 930px) {
|
@media screen and (width <= 930px) {
|
||||||
grid-template-columns: minmax(0, 1fr);
|
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;
|
border: 0;
|
||||||
|
|
||||||
&__item {
|
&__item {
|
||||||
|
|
|
@ -514,7 +514,7 @@ body > [data-popper-placement] {
|
||||||
outline: 0;
|
outline: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-width: 600px) {
|
@media screen and (width <= 600px) {
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -535,7 +535,7 @@ body > [data-popper-placement] {
|
||||||
all: unset;
|
all: unset;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-width: 600px) {
|
@media screen and (width <= 600px) {
|
||||||
height: 100px !important; // Prevent auto-resize textarea
|
height: 100px !important; // Prevent auto-resize textarea
|
||||||
resize: vertical;
|
resize: vertical;
|
||||||
}
|
}
|
||||||
|
@ -2413,7 +2413,7 @@ $ui-header-height: 55px;
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (min-width: 320px) {
|
@media screen and (width >= 320px) {
|
||||||
.logo--wordmark {
|
.logo--wordmark {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
@ -2525,7 +2525,7 @@ $ui-header-height: 55px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (min-width: 631px) {
|
@media screen and (width >= 631px) {
|
||||||
.columns-area {
|
.columns-area {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
@ -2585,7 +2585,7 @@ $ui-header-height: 55px;
|
||||||
&:hover,
|
&:hover,
|
||||||
&:focus,
|
&:focus,
|
||||||
&:active {
|
&:active {
|
||||||
@media screen and (min-width: 631px) {
|
@media screen and (width >= 631px) {
|
||||||
background: lighten($ui-base-color, 14%);
|
background: lighten($ui-base-color, 14%);
|
||||||
border-bottom-color: 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 {
|
.tabs-bar__link {
|
||||||
span {
|
span {
|
||||||
display: inline;
|
display: inline;
|
||||||
|
@ -2825,7 +2825,7 @@ $ui-header-height: 55px;
|
||||||
color: $darker-text-color;
|
color: $darker-text-color;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (min-width: 600px) {
|
@media screen and (width >= 600px) {
|
||||||
padding: 40px;
|
padding: 40px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -2935,7 +2935,7 @@ $ui-header-height: 55px;
|
||||||
height: 36px;
|
height: 36px;
|
||||||
color: $dark-text-color;
|
color: $dark-text-color;
|
||||||
|
|
||||||
@media screen and (min-width: 600px) {
|
@media screen and (width >= 600px) {
|
||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -2987,7 +2987,7 @@ $ui-header-height: 55px;
|
||||||
position: sticky;
|
position: sticky;
|
||||||
background: $ui-base-color;
|
background: $ui-base-color;
|
||||||
|
|
||||||
@media screen and (min-width: 600) {
|
@media screen and (width >= 600) {
|
||||||
padding: 0 40px;
|
padding: 0 40px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -3255,7 +3255,7 @@ $ui-header-height: 55px;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (min-height: 640px) {
|
@media screen and (height >= 640px) {
|
||||||
display: block;
|
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) {
|
.trends__item:nth-of-type(3) {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-height: 720px) {
|
@media screen and (height <= 720px) {
|
||||||
.trends__item:nth-of-type(2) {
|
.trends__item:nth-of-type(2) {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-height: 670px) {
|
@media screen and (height <= 670px) {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -3700,7 +3700,7 @@ $ui-header-height: 55px;
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-width: 600px) {
|
@media screen and (width <= 600px) {
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -4496,7 +4496,7 @@ a.status-card.compact:hover {
|
||||||
background: lighten($ui-base-color, 4%);
|
background: lighten($ui-base-color, 4%);
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-width: 600px) {
|
@media screen and (width <= 600px) {
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -5831,7 +5831,7 @@ a.status-card.compact:hover {
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
margin-bottom: 15px;
|
margin-bottom: 15px;
|
||||||
|
|
||||||
@media screen and (max-height: 800px) {
|
@media screen and (height <= 800px) {
|
||||||
font-size: 22px;
|
font-size: 22px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -6018,7 +6018,7 @@ a.status-card.compact:hover {
|
||||||
display: flex;
|
display: flex;
|
||||||
border-top: 1px solid $ui-secondary-color;
|
border-top: 1px solid $ui-secondary-color;
|
||||||
|
|
||||||
@media screen and (max-width: 480px) {
|
@media screen and (width <= 480px) {
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
}
|
}
|
||||||
|
@ -6029,7 +6029,7 @@ a.status-card.compact:hover {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
width: 50%;
|
width: 50%;
|
||||||
|
|
||||||
@media screen and (max-width: 480px) {
|
@media screen and (width <= 480px) {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -6051,13 +6051,13 @@ a.status-card.compact:hover {
|
||||||
color: $inverted-text-color;
|
color: $inverted-text-color;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-width: 480px) {
|
@media screen and (width <= 480px) {
|
||||||
max-height: 10vh;
|
max-height: 10vh;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.focal-point-modal__content {
|
.focal-point-modal__content {
|
||||||
@media screen and (max-width: 480px) {
|
@media screen and (width <= 480px) {
|
||||||
max-height: 40vh;
|
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;
|
padding: 10px;
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
order: 2;
|
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;
|
$duration: 400ms;
|
||||||
$delay: 100ms;
|
$delay: 100ms;
|
||||||
|
|
||||||
|
@ -7266,7 +7266,7 @@ noscript {
|
||||||
background: lighten($ui-base-color, 4%);
|
background: lighten($ui-base-color, 4%);
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-width: 600px) {
|
@media screen and (width <= 600px) {
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -7357,7 +7357,7 @@ noscript {
|
||||||
width: 380px;
|
width: 380px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
|
||||||
@media screen and (max-width: 420px) {
|
@media screen and (width <= 420px) {
|
||||||
width: 90%;
|
width: 90%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -7412,7 +7412,7 @@ noscript {
|
||||||
width: 380px;
|
width: 380px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
|
||||||
@media screen and (max-width: 420px) {
|
@media screen and (width <= 420px) {
|
||||||
width: 90%;
|
width: 90%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -7511,7 +7511,7 @@ noscript {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-width: 480px) {
|
@media screen and (width <= 480px) {
|
||||||
img,
|
img,
|
||||||
video {
|
video {
|
||||||
max-height: 100%;
|
max-height: 100%;
|
||||||
|
@ -9068,7 +9068,7 @@ noscript {
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-width: 600px) {
|
@media screen and (width <= 600px) {
|
||||||
display: block;
|
display: block;
|
||||||
|
|
||||||
h4 {
|
h4 {
|
||||||
|
|
|
@ -2,7 +2,7 @@
|
||||||
width: 700px;
|
width: 700px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
|
|
||||||
@media screen and (max-width: 740px) {
|
@media screen and (width <= 740px) {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
@ -44,7 +44,7 @@
|
||||||
margin-top: 40px;
|
margin-top: 40px;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
|
||||||
@media screen and (max-width: 400px) {
|
@media screen and (width <= 400px) {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
|
@ -64,7 +64,7 @@
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
border-bottom: 1px solid $ui-base-color;
|
border-bottom: 1px solid $ui-base-color;
|
||||||
|
|
||||||
@media screen and (max-width: 440px) {
|
@media screen and (width <= 440px) {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
|
|
|
@ -59,7 +59,7 @@
|
||||||
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
|
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
|
||||||
grid-gap: 10px;
|
grid-gap: 10px;
|
||||||
|
|
||||||
@media screen and (max-width: 1350px) {
|
@media screen and (width <= 1350px) {
|
||||||
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
|
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;
|
margin-top: 40px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -30,7 +30,7 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-width: 600px) {
|
@media screen and (width <= 600px) {
|
||||||
.account-header {
|
.account-header {
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
}
|
}
|
||||||
|
|
|
@ -63,7 +63,7 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-width: 740px) {
|
@media screen and (width <= 740px) {
|
||||||
.detailed-status,
|
.detailed-status,
|
||||||
.status,
|
.status,
|
||||||
.load-more {
|
.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 {
|
.accounts-table tbody td.optional {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue