@@ -4,261 +4,34 @@ | |||
files: | |||
include: app/javascript/styles/**/*.scss | |||
ignore: | |||
- app/javascript/styles/reset.scss | |||
linters: | |||
# Reports when you use improper spacing around ! (the "bang") in !default, | |||
# !global, !important, and !optional flags. | |||
BangFormat: | |||
enabled: false | |||
# Whether or not to prefer `border: 0` over `border: none`. | |||
BorderZero: | |||
enabled: false | |||
# Reports when you define a rule set using a selector with chained classes | |||
# (a.k.a. adjoining classes). | |||
ChainedClasses: | |||
enabled: false | |||
# Prefer hexadecimal color codes over color keywords. | |||
# (e.g. `color: green` is a color keyword) | |||
ColorKeyword: | |||
enabled: false | |||
# Prefer color literals (keywords or hexadecimal codes) to be used only in | |||
# variable declarations. They should be referred to via variables everywhere | |||
# else. | |||
ColorVariable: | |||
enabled: true | |||
# Which form of comments to prefer in CSS. | |||
Comment: | |||
enabled: false | |||
# Reports @debug statements (which you probably left behind accidentally). | |||
DebugStatement: | |||
enabled: false | |||
# Rule sets should be ordered as follows: | |||
# - @extend declarations | |||
# - @include declarations without inner @content | |||
# - properties, @include declarations with inner @content | |||
# - nested rule sets. | |||
DeclarationOrder: | |||
enabled: false | |||
# `scss-lint:disable` control comments should be preceded by a comment | |||
# explaining why these linters are being disabled for this file. | |||
# See https://github.com/brigade/scss-lint#disabling-linters-via-source for | |||
# more information. | |||
DisableLinterReason: | |||
enabled: true | |||
# Reports when you define the same property twice in a single rule set. | |||
DuplicateProperty: | |||
enabled: false | |||
# Separate rule, function, and mixin declarations with empty lines. | |||
EmptyLineBetweenBlocks: | |||
enabled: true | |||
# Reports when you have an empty rule set. | |||
EmptyRule: | |||
enabled: true | |||
# Reports when you have an @extend directive. | |||
ExtendDirective: | |||
enabled: false | |||
# Files should always have a final newline. This results in better diffs | |||
# when adding lines to the file, since SCM systems such as git won't | |||
# think that you touched the last line. | |||
FinalNewline: | |||
enabled: false | |||
# HEX colors should use three-character values where possible. | |||
HexLength: | |||
enabled: false | |||
# HEX color values should use lower-case colors to differentiate between | |||
# letters and numbers, e.g. `#E3E3E3` vs. `#e3e3e3`. | |||
HexNotation: | |||
enabled: true | |||
# Avoid using ID selectors. | |||
IdSelector: | |||
enabled: false | |||
# The basenames of @imported SCSS partials should not begin with an | |||
# underscore and should not include the filename extension. | |||
ImportPath: | |||
enabled: false | |||
# Avoid using !important in properties. It is usually indicative of a | |||
# misunderstanding of CSS specificity and can lead to brittle code. | |||
ImportantRule: | |||
enabled: false | |||
# Indentation should always be done in increments of 2 spaces. | |||
Indentation: | |||
enabled: true | |||
width: 2 | |||
# Don't write leading zeros for numeric values with a decimal point. | |||
LeadingZero: | |||
enabled: false | |||
# Reports when you define the same selector twice in a single sheet. | |||
MergeableSelector: | |||
enabled: false | |||
# Functions, mixins, variables, and placeholders should be declared | |||
# with all lowercase letters and hyphens instead of underscores. | |||
NameFormat: | |||
enabled: false | |||
# Avoid nesting selectors too deeply. | |||
NestingDepth: | |||
enabled: false | |||
# Always use placeholder selectors in @extend. | |||
PlaceholderInExtend: | |||
enabled: false | |||
# Sort properties in a strict order. | |||
PropertySortOrder: | |||
enabled: false | |||
# Reports when you use an unknown or disabled CSS property | |||
# (ignoring vendor-prefixed properties). | |||
PropertySpelling: | |||
enabled: false | |||
# Configure which units are allowed for property values. | |||
PropertyUnits: | |||
enabled: false | |||
# Pseudo-elements, like ::before, and ::first-letter, should be declared | |||
# with two colons. Pseudo-classes, like :hover and :first-child, should | |||
# be declared with one colon. | |||
PseudoElement: | |||
enabled: true | |||
# Avoid qualifying elements in selectors (also known as "tag-qualifying"). | |||
QualifyingElement: | |||
enabled: false | |||
# Don't write selectors with a depth of applicability greater than 3. | |||
SelectorDepth: | |||
enabled: false | |||
# Selectors should always use hyphenated-lowercase, rather than camelCase or | |||
# snake_case. | |||
SelectorFormat: | |||
enabled: false | |||
convention: hyphenated_lowercase | |||
# Prefer the shortest shorthand form possible for properties that support it. | |||
Shorthand: | |||
enabled: true | |||
# Each property should have its own line, except in the special case of | |||
# single line rulesets. | |||
SingleLinePerProperty: | |||
enabled: true | |||
allow_single_line_rule_sets: true | |||
# Split selectors onto separate lines after each comma, and have each | |||
# individual selector occupy a single line. | |||
SingleLinePerSelector: | |||
enabled: true | |||
# Commas in lists should be followed by a space. | |||
SpaceAfterComma: | |||
enabled: false | |||
# Properties should be formatted with a single space separating the colon | |||
# from the property's value. | |||
SpaceAfterPropertyColon: | |||
enabled: true | |||
# Properties should be formatted with no space between the name and the | |||
# colon. | |||
SpaceAfterPropertyName: | |||
enabled: true | |||
# Variables should be formatted with a single space separating the colon | |||
# from the variable's value. | |||
SpaceAfterVariableColon: | |||
enabled: true | |||
# Variables should be formatted with no space between the name and the | |||
# colon. | |||
SpaceAfterVariableName: | |||
enabled: false | |||
# Operators should be formatted with a single space on both sides of an | |||
# infix operator. | |||
SpaceAroundOperator: | |||
enabled: true | |||
# Opening braces should be preceded by a single space. | |||
SpaceBeforeBrace: | |||
enabled: true | |||
# Parentheses should not be padded with spaces. | |||
SpaceBetweenParens: | |||
enabled: false | |||
# Enforces that string literals should be written with a consistent form | |||
# of quotes (single or double). | |||
StringQuotes: | |||
enabled: false | |||
# Property values, @extend, @include, and @import directives, and variable | |||
# declarations should always end with a semicolon. | |||
TrailingSemicolon: | |||
enabled: true | |||
# Reports lines containing trailing whitespace. | |||
TrailingWhitespace: | |||
enabled: true | |||
# Don't write trailing zeros for numeric values with a decimal point. | |||
TrailingZero: | |||
enabled: false | |||
# Don't use the `all` keyword to specify transition properties. | |||
TransitionAll: | |||
enabled: false | |||
# Numeric values should not contain unnecessary fractional portions. | |||
UnnecessaryMantissa: | |||
enabled: false | |||
# Do not use parent selector references (&) when they would otherwise | |||
# be unnecessary. | |||
UnnecessaryParentReference: | |||
enabled: false | |||
# URLs should be valid and not contain protocols or domain names. | |||
UrlFormat: | |||
enabled: true | |||
# URLs should always be enclosed within quotes. | |||
UrlQuotes: | |||
enabled: true | |||
# Properties, like color and font, are easier to read and maintain | |||
# when defined using variables rather than literals. | |||
VariableForProperty: | |||
enabled: false | |||
# Avoid vendor prefixes. Or rather: don't write them yourself. | |||
VendorPrefix: | |||
enabled: false | |||
# Omit length units on zero values, e.g. `0px` vs. `0`. | |||
ZeroUnit: | |||
enabled: true | |||
- app/javascript/styles/mastodon/reset.scss | |||
rules: | |||
# Disallows | |||
no-color-literals: 0 | |||
no-css-comments: 0 | |||
no-duplicate-properties: 0 | |||
no-ids: 0 | |||
no-important: 0 | |||
no-mergeable-selectors: 0 | |||
no-misspelled-properties: 0 | |||
no-qualifying-elements: 0 | |||
no-transition-all: 0 | |||
no-vendor-prefixes: 0 | |||
# Nesting | |||
force-element-nesting: 0 | |||
force-attribute-nesting: 0 | |||
force-pseudo-nesting: 0 | |||
# Name Formats | |||
class-name-format: 0 | |||
leading-zero: 0 | |||
# Style Guide | |||
attribute-quotes: 0 | |||
hex-length: 0 | |||
indentation: 0 | |||
nesting-depth: 0 | |||
property-sort-order: 0 | |||
quotes: 0 |
@@ -5,7 +5,7 @@ | |||
&-description { | |||
input { | |||
&::placeholder { | |||
opacity: 1.0; | |||
opacity: 1; | |||
} | |||
} | |||
} | |||
@@ -20,5 +20,5 @@ $highlight-text-color: $classic-highlight-color !default; | |||
$action-button-color: #8d9ac2; | |||
$inverted-text-color: $black !default; | |||
$lighter-text-color: darken($ui-base-color,6%) !default; | |||
$lighter-text-color: darken($ui-base-color, 6%) !default; | |||
$light-text-color: darken($ui-primary-color, 40%) !default; |
@@ -279,6 +279,8 @@ h5 { | |||
} | |||
.hero-with-button { | |||
padding-bottom: 16px; | |||
h1 { | |||
margin-bottom: 4px; | |||
} | |||
@@ -286,8 +288,6 @@ h5 { | |||
p.lead { | |||
margin-bottom: 32px; | |||
} | |||
padding-bottom: 16px; | |||
} | |||
.header { | |||
@@ -1,21 +1,21 @@ | |||
@mixin avatar-radius() { | |||
@mixin avatar-radius { | |||
border-radius: 4px; | |||
background: transparent no-repeat; | |||
background-position: 50%; | |||
background-clip: padding-box; | |||
} | |||
@mixin avatar-size($size:48px) { | |||
@mixin avatar-size($size: 48px) { | |||
width: $size; | |||
height: $size; | |||
background-size: $size $size; | |||
} | |||
@mixin search-input() { | |||
@mixin search-input { | |||
outline: 0; | |||
box-sizing: border-box; | |||
width: 100%; | |||
border: none; | |||
border: 0; | |||
box-shadow: none; | |||
font-family: inherit; | |||
background: $ui-base-color; | |||
@@ -42,7 +42,7 @@ | |||
} | |||
} | |||
@mixin search-popout() { | |||
@mixin search-popout { | |||
background: $simple-background-color; | |||
border-radius: 4px; | |||
padding: 10px 14px; | |||
@@ -171,7 +171,7 @@ $content-width: 840px; | |||
text-transform: none; | |||
padding-bottom: 0; | |||
margin-bottom: 0; | |||
border-bottom: none; | |||
border-bottom: 0; | |||
} | |||
& > p { | |||
@@ -2,7 +2,8 @@ | |||
@if type-of($color) == 'color' { | |||
$color: str-slice(ie-hex-str($color), 4); | |||
} | |||
@return '%23' + unquote($color) | |||
@return '%23' + unquote($color); | |||
} | |||
body { | |||
@@ -15,7 +16,7 @@ body { | |||
text-rendering: optimizelegibility; | |||
font-feature-settings: "kern"; | |||
text-size-adjust: none; | |||
-webkit-tap-highlight-color: rgba(0,0,0,0); | |||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); | |||
-webkit-tap-highlight-color: transparent; | |||
&.system-font { | |||
@@ -128,7 +128,7 @@ | |||
display: inline-block; | |||
padding: 0; | |||
color: $action-button-color; | |||
border: none; | |||
border: 0; | |||
background: transparent; | |||
cursor: pointer; | |||
transition: color 100ms ease-in; | |||
@@ -196,7 +196,7 @@ | |||
.text-icon-button { | |||
color: $lighter-text-color; | |||
border: none; | |||
border: 0; | |||
background: transparent; | |||
cursor: pointer; | |||
font-weight: 600; | |||
@@ -353,12 +353,12 @@ | |||
.spoiler-input { | |||
height: 0; | |||
transform-origin: bottom; | |||
opacity: 0.0; | |||
opacity: 0; | |||
&.spoiler-input--visible { | |||
height: 36px; | |||
margin-bottom: 11px; | |||
opacity: 1.0; | |||
opacity: 1; | |||
} | |||
} | |||
@@ -1193,7 +1193,7 @@ | |||
} | |||
.account__avatar { | |||
@include avatar-radius(); | |||
@include avatar-radius; | |||
position: relative; | |||
&-inline { | |||
@@ -1203,11 +1203,11 @@ | |||
} | |||
&-composite { | |||
@include avatar-radius(); | |||
@include avatar-radius; | |||
overflow: hidden; | |||
& > div { | |||
@include avatar-radius(); | |||
@include avatar-radius; | |||
float: left; | |||
position: relative; | |||
box-sizing: border-box; | |||
@@ -1223,12 +1223,12 @@ a .account__avatar { | |||
@include avatar-size(48px); | |||
&-base { | |||
@include avatar-radius(); | |||
@include avatar-radius; | |||
@include avatar-size(36px); | |||
} | |||
&-overlay { | |||
@include avatar-radius(); | |||
@include avatar-radius; | |||
@include avatar-size(24px); | |||
position: absolute; | |||
@@ -1606,13 +1606,13 @@ a.account__display-name { | |||
.icon-button.close { | |||
position: absolute; | |||
pointer-events: none; | |||
transform: scale(0.0, 1.0) translate(-100%, 0); | |||
transform: scale(0, 1) translate(-100%, 0); | |||
opacity: 0; | |||
} | |||
.compose__action-bar .icon-button { | |||
pointer-events: auto; | |||
transform: scale(1.0, 1.0) translate(0, 0); | |||
transform: scale(1, 1) translate(0, 0); | |||
opacity: 1; | |||
} | |||
} | |||
@@ -2711,7 +2711,7 @@ a.account__display-name { | |||
.setting-text { | |||
color: $darker-text-color; | |||
background: transparent; | |||
border: none; | |||
border: 0; | |||
border-bottom: 2px solid $ui-primary-color; | |||
box-sizing: border-box; | |||
display: block; | |||
@@ -3049,7 +3049,7 @@ a.status-card.compact:hover { | |||
& > button { | |||
margin: 0; | |||
border: none; | |||
border: 0; | |||
padding: 15px 0 15px 15px; | |||
color: inherit; | |||
background: transparent; | |||
@@ -3214,11 +3214,11 @@ a.status-card.compact:hover { | |||
} | |||
.no-reduce-motion .loading-indicator span { | |||
animation: loader-label 1.15s infinite cubic-bezier(0.215, 0.610, 0.355, 1.000); | |||
animation: loader-label 1.15s infinite cubic-bezier(0.215, 0.61, 0.355, 1); | |||
} | |||
.no-reduce-motion .loading-indicator__figure { | |||
animation: loader-figure 1.15s infinite cubic-bezier(0.215, 0.610, 0.355, 1.000); | |||
animation: loader-figure 1.15s infinite cubic-bezier(0.215, 0.61, 0.355, 1); | |||
} | |||
@keyframes loader-figure { | |||
@@ -3385,7 +3385,7 @@ a.status-card.compact:hover { | |||
.column-select { | |||
&__control { | |||
@include search-input(); | |||
@include search-input; | |||
} | |||
&__placeholder { | |||
@@ -3436,7 +3436,7 @@ a.status-card.compact:hover { | |||
} | |||
&__menu { | |||
@include search-popout(); | |||
@include search-popout; | |||
padding: 0; | |||
background: $ui-secondary-color; | |||
} | |||
@@ -3597,7 +3597,7 @@ a.status-card.compact:hover { | |||
.no-reduce-motion .shake-bottom { | |||
transform-origin: 50% 100%; | |||
animation: shake-bottom 0.8s cubic-bezier(0.455, 0.030, 0.515, 0.955) 2s 2 both; | |||
animation: shake-bottom 0.8s cubic-bezier(0.455, 0.03, 0.515, 0.955) 2s 2 both; | |||
} | |||
.emoji-picker-dropdown__menu { | |||
@@ -3892,10 +3892,11 @@ a.status-card.compact:hover { | |||
} | |||
.search__input { | |||
@include search-input; | |||
display: block; | |||
padding: 10px; | |||
padding-right: 30px; | |||
@include search-input(); | |||
} | |||
.search__icon { | |||
@@ -4503,14 +4504,14 @@ a.status-card.compact:hover { | |||
} | |||
.actions-modal { | |||
max-height: 80vh; | |||
max-width: 80vw; | |||
.status { | |||
overflow-y: auto; | |||
max-height: 300px; | |||
} | |||
max-height: 80vh; | |||
max-width: 80vw; | |||
.actions-modal__item-label { | |||
font-weight: 500; | |||
} | |||
@@ -4725,7 +4726,7 @@ a.status-card.compact:hover { | |||
} | |||
.media-gallery__item { | |||
border: none; | |||
border: 0; | |||
box-sizing: border-box; | |||
display: block; | |||
float: left; | |||
@@ -5185,7 +5186,7 @@ a.status-card.compact:hover { | |||
} | |||
.account-gallery__item { | |||
border: none; | |||
border: 0; | |||
box-sizing: border-box; | |||
display: block; | |||
position: relative; | |||
@@ -5259,7 +5260,7 @@ a.status-card.compact:hover { | |||
} | |||
.search-popout { | |||
@include search-popout(); | |||
@include search-popout; | |||
} | |||
noscript { | |||
@@ -5361,14 +5362,14 @@ noscript { | |||
.icon-button.close { | |||
pointer-events: auto; | |||
opacity: 1; | |||
transform: scale(1.0, 1.0) translate(0, 0); | |||
transform: scale(1, 1) translate(0, 0); | |||
bottom: 5px; | |||
} | |||
.compose__action-bar .icon-button { | |||
pointer-events: none; | |||
opacity: 0; | |||
transform: scale(0.0, 1.0) translate(100%, 0); | |||
transform: scale(0, 1) translate(100%, 0); | |||
} | |||
} | |||
} | |||
@@ -5398,7 +5399,7 @@ noscript { | |||
box-sizing: border-box; | |||
display: block; | |||
width: 100%; | |||
border: none; | |||
border: 0; | |||
padding: 10px; | |||
font-family: $font-monospace, monospace; | |||
background: $ui-base-color; | |||
@@ -121,7 +121,7 @@ | |||
grid-auto-rows: max-content; | |||
.column-0 { | |||
grid-column: 1/3; | |||
grid-column: 1 / 3; | |||
grid-row: 1; | |||
} | |||
@@ -136,7 +136,7 @@ | |||
} | |||
.column-3 { | |||
grid-column: 1/3; | |||
grid-column: 1 / 3; | |||
grid-row: 3; | |||
} | |||
@@ -1,14 +1,14 @@ | |||
.emoji-mart { | |||
font-size: 13px; | |||
display: inline-block; | |||
color: $inverted-text-color; | |||
&, | |||
* { | |||
box-sizing: border-box; | |||
line-height: 1.15; | |||
} | |||
font-size: 13px; | |||
display: inline-block; | |||
color: $inverted-text-color; | |||
.emoji-mart-emoji { | |||
padding: 6px; | |||
} | |||
@@ -553,7 +553,7 @@ code { | |||
box-sizing: border-box; | |||
display: block; | |||
width: 100%; | |||
border: none; | |||
border: 0; | |||
padding: 10px; | |||
font-family: $font-monospace, monospace; | |||
background: $ui-base-color; | |||
@@ -47,7 +47,6 @@ | |||
width: 100%; | |||
font-size: 14px; | |||
color: $inverted-text-color; | |||
display: block; | |||
outline: 0; | |||
font-family: inherit; | |||
background: $simple-background-color; | |||
@@ -180,7 +180,6 @@ body.rtl { | |||
} | |||
.fa-ul { | |||
margin-left: 0; | |||
margin-left: 2.14285714em; | |||
} | |||
@@ -10,9 +10,10 @@ | |||
"build:production": "cross-env RAILS_ENV=production NODE_ENV=production ./bin/webpack", | |||
"manage:translations": "node ./config/webpack/translationRunner.js", | |||
"start": "node ./streaming/index.js", | |||
"test": "${npm_execpath} run test:lint && ${npm_execpath} run test:jest", | |||
"test:lint": "eslint --ext=js .", | |||
"test:lint:sass": "sass-lint .", | |||
"test": "${npm_execpath} run test:lint:js && ${npm_execpath} run test:jest", | |||
"test:lint": "${npm_execpath} run test:lint:js && ${npm_execpath} run test:lint:sass", | |||
"test:lint:js": "eslint --ext=js .", | |||
"test:lint:sass": "sass-lint -v", | |||
"test:jest": "cross-env NODE_ENV=test jest --coverage" | |||
}, | |||
"repository": { | |||