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
display: inline-block;
padding: 0;
color: $action-button-color;
- border: none;
+ border: 0;
background: transparent;
cursor: pointer;
transition: color 100ms ease-in;
.text-icon-button {
color: $lighter-text-color;
- border: none;
+ border: 0;
background: transparent;
cursor: pointer;
font-weight: 600;
.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;
}
}
}
.account__avatar {
- @include avatar-radius();
+ @include avatar-radius;
position: relative;
&-inline {
}
&-composite {
- @include avatar-radius();
+ @include avatar-radius;
overflow: hidden;
& > div {
- @include avatar-radius();
+ @include avatar-radius;
float: left;
position: relative;
box-sizing: border-box;
@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;
.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;
}
}
.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;
& > button {
margin: 0;
- border: none;
+ border: 0;
padding: 15px 0 15px 15px;
color: inherit;
background: transparent;
}
.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 {
.column-select {
&__control {
- @include search-input();
+ @include search-input;
}
&__placeholder {
}
&__menu {
- @include search-popout();
+ @include search-popout;
padding: 0;
background: $ui-secondary-color;
}
.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 {
}
.search__input {
+ @include search-input;
+
display: block;
padding: 10px;
padding-right: 30px;
- @include search-input();
}
.search__icon {
}
.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;
}
}
.media-gallery__item {
- border: none;
+ border: 0;
box-sizing: border-box;
display: block;
float: left;
}
.account-gallery__item {
- border: none;
+ border: 0;
box-sizing: border-box;
display: block;
position: relative;
}
.search-popout {
- @include search-popout();
+ @include search-popout;
}
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);
}
}
}
box-sizing: border-box;
display: block;
width: 100%;
- border: none;
+ border: 0;
padding: 10px;
font-family: $font-monospace, monospace;
background: $ui-base-color;