Browse Source

Enable CodeClimate SCSS Lint checks (#2886)

* add scss_lint to Gemfile

* add .scss-lint.yml

* fix warnings of scss-lint

* chmod -x styles/variables.scss

* Enable CodeClimate SCSS Lint checks
yhirano 1 year ago
parent
commit
d63c291f86

+ 3
- 0
.codeclimate.yml View File

@@ -9,10 +9,13 @@ engines:
9 9
     enabled: true
10 10
   rubocop:
11 11
     enabled: true
12
+  scss-lint:
13
+    enabled: true
12 14
 ratings:
13 15
   paths:
14 16
   - "**.rb"
15 17
   - "**.js"
18
+  - "**.scss"
16 19
 exclude_paths:
17 20
 - spec/
18 21
 - vendor/asset

+ 264
- 0
.scss-lint.yml View File

@@ -0,0 +1,264 @@
1
+# Linter Documentation:
2
+# https://github.com/brigade/scss-lint/blob/v0.42.2/lib/scss_lint/linter/README.md
3
+
4
+scss_files: 'app/javascript/styles/**/*.scss'
5
+
6
+exclude:
7
+  - app/javascript/styles/reset.scss
8
+
9
+linters:
10
+  # Reports when you use improper spacing around ! (the "bang") in !default,
11
+  # !global, !important, and !optional flags.
12
+  BangFormat:
13
+    enabled: false
14
+
15
+  # Whether or not to prefer `border: 0` over `border: none`.
16
+  BorderZero:
17
+    enabled: false
18
+
19
+  # Reports when you define a rule set using a selector with chained classes
20
+  # (a.k.a. adjoining classes).
21
+  ChainedClasses:
22
+    enabled: false
23
+
24
+  # Prefer hexadecimal color codes over color keywords.
25
+  # (e.g. `color: green` is a color keyword)
26
+  ColorKeyword:
27
+    enabled: false
28
+
29
+  # Prefer color literals (keywords or hexadecimal codes) to be used only in
30
+  # variable declarations. They should be referred to via variables everywhere
31
+  # else.
32
+  ColorVariable:
33
+    enabled: true
34
+
35
+  # Which form of comments to prefer in CSS.
36
+  Comment:
37
+    enabled: false
38
+
39
+  # Reports @debug statements (which you probably left behind accidentally).
40
+  DebugStatement:
41
+    enabled: false
42
+
43
+  # Rule sets should be ordered as follows:
44
+  # - @extend declarations
45
+  # - @include declarations without inner @content
46
+  # - properties, @include declarations with inner @content
47
+  # - nested rule sets.
48
+  DeclarationOrder:
49
+    enabled: false
50
+
51
+  # `scss-lint:disable` control comments should be preceded by a comment
52
+  # explaining why these linters are being disabled for this file.
53
+  # See https://github.com/brigade/scss-lint#disabling-linters-via-source for
54
+  # more information.
55
+  DisableLinterReason:
56
+    enabled: true
57
+
58
+  # Reports when you define the same property twice in a single rule set.
59
+  DuplicateProperty:
60
+    enabled: false
61
+
62
+  # Separate rule, function, and mixin declarations with empty lines.
63
+  EmptyLineBetweenBlocks:
64
+    enabled: true
65
+
66
+  # Reports when you have an empty rule set.
67
+  EmptyRule:
68
+    enabled: true
69
+
70
+  # Reports when you have an @extend directive.
71
+  ExtendDirective:
72
+    enabled: false
73
+
74
+  # Files should always have a final newline. This results in better diffs
75
+  # when adding lines to the file, since SCM systems such as git won't
76
+  # think that you touched the last line.
77
+  FinalNewline:
78
+    enabled: false
79
+
80
+  # HEX colors should use three-character values where possible.
81
+  HexLength:
82
+    enabled: false
83
+
84
+  # HEX color values should use lower-case colors to differentiate between
85
+  # letters and numbers, e.g. `#E3E3E3` vs. `#e3e3e3`.
86
+  HexNotation:
87
+    enabled: true
88
+
89
+  # Avoid using ID selectors.
90
+  IdSelector:
91
+    enabled: false
92
+
93
+  # The basenames of @imported SCSS partials should not begin with an
94
+  # underscore and should not include the filename extension.
95
+  ImportPath:
96
+    enabled: false
97
+
98
+  # Avoid using !important in properties. It is usually indicative of a
99
+  # misunderstanding of CSS specificity and can lead to brittle code.
100
+  ImportantRule:
101
+    enabled: false
102
+
103
+  # Indentation should always be done in increments of 2 spaces.
104
+  Indentation:
105
+    enabled: true
106
+    width: 2
107
+
108
+  # Don't write leading zeros for numeric values with a decimal point.
109
+  LeadingZero:
110
+    enabled: false
111
+
112
+  # Reports when you define the same selector twice in a single sheet.
113
+  MergeableSelector:
114
+    enabled: false
115
+
116
+  # Functions, mixins, variables, and placeholders should be declared
117
+  # with all lowercase letters and hyphens instead of underscores.
118
+  NameFormat:
119
+    enabled: false
120
+
121
+  # Avoid nesting selectors too deeply.
122
+  NestingDepth:
123
+    enabled: false
124
+
125
+  # Always use placeholder selectors in @extend.
126
+  PlaceholderInExtend:
127
+    enabled: false
128
+
129
+  # Sort properties in a strict order.
130
+  PropertySortOrder:
131
+    enabled: false
132
+
133
+  # Reports when you use an unknown or disabled CSS property
134
+  # (ignoring vendor-prefixed properties).
135
+  PropertySpelling:
136
+    enabled: false
137
+
138
+  # Configure which units are allowed for property values.
139
+  PropertyUnits:
140
+    enabled: false
141
+
142
+  # Pseudo-elements, like ::before, and ::first-letter, should be declared
143
+  # with two colons. Pseudo-classes, like :hover and :first-child, should
144
+  # be declared with one colon.
145
+  PseudoElement:
146
+    enabled: true
147
+
148
+  # Avoid qualifying elements in selectors (also known as "tag-qualifying").
149
+  QualifyingElement:
150
+    enabled: false
151
+
152
+  # Don't write selectors with a depth of applicability greater than 3.
153
+  SelectorDepth:
154
+    enabled: false
155
+
156
+  # Selectors should always use hyphenated-lowercase, rather than camelCase or
157
+  # snake_case.
158
+  SelectorFormat:
159
+    enabled: false
160
+    convention: hyphenated_lowercase
161
+
162
+  # Prefer the shortest shorthand form possible for properties that support it.
163
+  Shorthand:
164
+    enabled: true
165
+
166
+  # Each property should have its own line, except in the special case of
167
+  # single line rulesets.
168
+  SingleLinePerProperty:
169
+    enabled: true
170
+    allow_single_line_rule_sets: true
171
+
172
+  # Split selectors onto separate lines after each comma, and have each
173
+  # individual selector occupy a single line.
174
+  SingleLinePerSelector:
175
+    enabled: true
176
+
177
+  # Commas in lists should be followed by a space.
178
+  SpaceAfterComma:
179
+    enabled: false
180
+
181
+  # Properties should be formatted with a single space separating the colon
182
+  # from the property's value.
183
+  SpaceAfterPropertyColon:
184
+    enabled: true
185
+
186
+  # Properties should be formatted with no space between the name and the
187
+  # colon.
188
+  SpaceAfterPropertyName:
189
+    enabled: true
190
+
191
+  # Variables should be formatted with a single space separating the colon
192
+  # from the variable's value.
193
+  SpaceAfterVariableColon:
194
+    enabled: true
195
+
196
+  # Variables should be formatted with no space between the name and the
197
+  # colon.
198
+  SpaceAfterVariableName:
199
+    enabled: false
200
+
201
+  # Operators should be formatted with a single space on both sides of an
202
+  # infix operator.
203
+  SpaceAroundOperator:
204
+    enabled: true
205
+
206
+  # Opening braces should be preceded by a single space.
207
+  SpaceBeforeBrace:
208
+    enabled: true
209
+
210
+  # Parentheses should not be padded with spaces.
211
+  SpaceBetweenParens:
212
+    enabled: false
213
+
214
+  # Enforces that string literals should be written with a consistent form
215
+  # of quotes (single or double).
216
+  StringQuotes:
217
+    enabled: false
218
+
219
+  # Property values, @extend, @include, and @import directives, and variable
220
+  # declarations should always end with a semicolon.
221
+  TrailingSemicolon:
222
+    enabled: true
223
+
224
+  # Reports lines containing trailing whitespace.
225
+  TrailingWhitespace:
226
+    enabled: true
227
+
228
+  # Don't write trailing zeros for numeric values with a decimal point.
229
+  TrailingZero:
230
+    enabled: false
231
+
232
+  # Don't use the `all` keyword to specify transition properties.
233
+  TransitionAll:
234
+    enabled: false
235
+
236
+  # Numeric values should not contain unnecessary fractional portions.
237
+  UnnecessaryMantissa:
238
+    enabled: false
239
+
240
+  # Do not use parent selector references (&) when they would otherwise
241
+  # be unnecessary.
242
+  UnnecessaryParentReference:
243
+    enabled: false
244
+
245
+  # URLs should be valid and not contain protocols or domain names.
246
+  UrlFormat:
247
+    enabled: true
248
+
249
+  # URLs should always be enclosed within quotes.
250
+  UrlQuotes:
251
+    enabled: true
252
+
253
+  # Properties, like color and font, are easier to read and maintain
254
+  # when defined using variables rather than literals.
255
+  VariableForProperty:
256
+    enabled: false
257
+
258
+  # Avoid vendor prefixes. Or rather: don't write them yourself.
259
+  VendorPrefix:
260
+    enabled: false
261
+
262
+  # Omit length units on zero values, e.g. `0px` vs. `0`.
263
+  ZeroUnit:
264
+    enabled: true

+ 1
- 0
Gemfile View File

@@ -88,6 +88,7 @@ group :development do
88 88
   gem 'rubocop', '0.46.0', require: false
89 89
   gem 'brakeman', '~> 3.6.0', require: false
90 90
   gem 'bundler-audit', '~> 0.4.0', require: false
91
+  gem 'scss_lint', '0.42.2', require: false
91 92
 
92 93
   gem 'capistrano', '3.8.0'
93 94
   gem 'capistrano-rails'

+ 5
- 0
Gemfile.lock View File

@@ -392,6 +392,10 @@ GEM
392 392
       crass (~> 1.0.2)
393 393
       nokogiri (>= 1.4.4)
394 394
       nokogumbo (~> 1.4.1)
395
+    sass (3.4.23)
396
+    scss_lint (0.42.2)
397
+      rainbow (~> 2.0)
398
+      sass (~> 3.4.15)
395 399
     sidekiq (5.0.0)
396 400
       concurrent-ruby (~> 1.0)
397 401
       connection_pool (~> 2.2, >= 2.2.0)
@@ -534,6 +538,7 @@ DEPENDENCIES
534 538
   rubocop (= 0.46.0)
535 539
   ruby-oembed
536 540
   sanitize
541
+  scss_lint (= 0.42.2)
537 542
   sidekiq
538 543
   sidekiq-scheduler
539 544
   sidekiq-unique-jobs

+ 13
- 7
app/javascript/styles/about.scss View File

@@ -44,7 +44,8 @@
44 44
     color: $color2;
45 45
   }
46 46
 
47
-  ul, ol {
47
+  ul,
48
+  ol {
48 49
     list-style: inherit;
49 50
     margin-left: 20px;
50 51
 
@@ -57,11 +58,13 @@
57 58
     }
58 59
   }
59 60
 
60
-  li > ol, li > ul {
61
+  li > ol,
62
+  li > ul {
61 63
     margin-top: 20px;
62 64
   }
63 65
 
64
-  p, li {
66
+  p,
67
+  li {
65 68
     font: 16px/28px 'mastodon-font-sans-serif', sans-serif;
66 69
     font-weight: 400;
67 70
     margin-bottom: 12px;
@@ -74,7 +77,7 @@
74 77
 
75 78
   em {
76 79
     display: inline-block;
77
-    padding: 7px 7px 5px 7px;
80
+    padding: 7px 7px 5px;
78 81
     margin: 0 2px;
79 82
     background: $color3;
80 83
     color: $color1;
@@ -134,7 +137,8 @@
134 137
     text-align: right;
135 138
     font: 16px/28px 'mastodon-font-sans-serif', sans-serif;
136 139
 
137
-    span, strong {
140
+    span,
141
+    strong {
138 142
       display: block;
139 143
     }
140 144
 
@@ -333,7 +337,8 @@
333 337
     }
334 338
   }
335 339
 
336
-  .simple_form, .closed-registrations-message {
340
+  .simple_form,
341
+  .closed-registrations-message {
337 342
     width: 300px;
338 343
     flex: 0 0 auto;
339 344
     background: rgba(darken($color1, 7%), 0.5);
@@ -359,7 +364,8 @@
359 364
       display: none;
360 365
     }
361 366
 
362
-    .simple_form, .closed-registrations-message {
367
+    .simple_form,
368
+    .closed-registrations-message {
363 369
       flex: auto;
364 370
     }
365 371
   }

+ 20
- 9
app/javascript/styles/accounts.scss View File

@@ -13,7 +13,7 @@
13 13
     box-shadow: none;
14 14
   }
15 15
 
16
-  &:after {
16
+  &::after {
17 17
     background: linear-gradient(rgba($color8, 0.5), rgba($color8, 0.8));
18 18
     display: block;
19 19
     content: "";
@@ -83,7 +83,7 @@
83 83
   .counter {
84 84
     width: 80px;
85 85
     color: $color3;
86
-    padding: 5px 10px 0px;
86
+    padding: 5px 10px 0;
87 87
     margin-bottom: 10px;
88 88
     border-right: 1px solid $color3;
89 89
     cursor: default;
@@ -93,7 +93,7 @@
93 93
       display: block;
94 94
     }
95 95
 
96
-    &:after {
96
+    &::after {
97 97
       display: block;
98 98
       content: "";
99 99
       position: absolute;
@@ -106,14 +106,14 @@
106 106
     }
107 107
 
108 108
     &.active {
109
-      &:after {
109
+      &::after {
110 110
         border-bottom: 4px solid $color4;
111 111
         opacity: 1;
112 112
       }
113 113
     }
114 114
 
115 115
     &:hover {
116
-      &:after {
116
+      &::after {
117 117
         opacity: 1;
118 118
         transition-duration: 0.2s;
119 119
       }
@@ -173,7 +173,12 @@
173 173
   text-align: center;
174 174
   overflow: hidden;
175 175
 
176
-  a, .current, .next, .prev, .page, .gap {
176
+  a,
177
+  .current,
178
+  .next,
179
+  .prev,
180
+  .page,
181
+  .gap {
177 182
     font-size: 14px;
178 183
     color: $color5;
179 184
     font-weight: 500;
@@ -194,7 +199,8 @@
194 199
     cursor: default;
195 200
   }
196 201
 
197
-  .prev, .next {
202
+  .prev,
203
+  .next {
198 204
     text-transform: uppercase;
199 205
     color: $color2;
200 206
   }
@@ -227,11 +233,16 @@
227 233
   @media screen and (max-width: 360px) {
228 234
     padding: 30px 20px;
229 235
 
230
-    a, .current, .next, .prev, .gap {
236
+    a,
237
+    .current,
238
+    .next,
239
+    .prev,
240
+    .gap {
231 241
       display: none;
232 242
     }
233 243
 
234
-    .next, .prev {
244
+    .next,
245
+    .prev {
235 246
       display: inline-block;
236 247
     }
237 248
   }

+ 6
- 3
app/javascript/styles/admin.scss View File

@@ -16,7 +16,7 @@
16 16
     height: 100%;
17 17
     padding: 0;
18 18
     overflow-y: auto;
19
-    
19
+
20 20
     .logo {
21 21
       display: block;
22 22
       margin: 40px auto;
@@ -50,7 +50,7 @@
50 50
 
51 51
         &.selected {
52 52
           background: darken($color1, 2%);
53
-          border-radius: 4px 0 0 0;
53
+          border-radius: 4px 0 0;
54 54
         }
55 55
       }
56 56
 
@@ -118,10 +118,12 @@
118 118
 
119 119
   .simple_form {
120 120
     max-width: 400px;
121
+
121 122
     .label_input {
122 123
       label.select {
123 124
         width: 50%;
124 125
       }
126
+
125 127
       select {
126 128
         width: 50%;
127 129
         float: right;
@@ -134,7 +136,8 @@
134 136
     overflow-y: auto;
135 137
     -webkit-overflow-scrolling: touch;
136 138
 
137
-    .sidebar-wrapper, .content-wrapper {
139
+    .sidebar-wrapper,
140
+    .content-wrapper {
138 141
       flex: 0 0 auto;
139 142
       height: auto;
140 143
       overflow: initial;

+ 124
- 72
app/javascript/styles/components.scss View File

@@ -1,8 +1,8 @@
1 1
 @import 'variables';
2 2
 
3 3
 .app-body {
4
- -webkit-overflow-scrolling: touch;
5
- -ms-overflow-style: -ms-autohiding-scrollbar;
4
+  -webkit-overflow-scrolling: touch;
5
+  -ms-overflow-style: -ms-autohiding-scrollbar;
6 6
 }
7 7
 
8 8
 .button {
@@ -91,7 +91,9 @@
91 91
   cursor: pointer;
92 92
   transition: color 100ms ease-in;
93 93
 
94
-  &:hover, &:active, &:focus {
94
+  &:hover,
95
+  &:active,
96
+  &:focus {
95 97
     color: lighten($color1, 33%);
96 98
     transition: color 200ms ease-out;
97 99
   }
@@ -109,14 +111,18 @@
109 111
     border: 0;
110 112
   }
111 113
 
112
-  &::-moz-focus-inner, &:focus, &:active {
114
+  &::-moz-focus-inner,
115
+  &:focus,
116
+  &:active {
113 117
     outline: 0 !important;
114 118
   }
115 119
 
116 120
   &.inverted {
117 121
     color: lighten($color1, 33%);
118 122
 
119
-    &:hover, &:active, &:focus {
123
+    &:hover,
124
+    &:active,
125
+    &:focus {
120 126
       color: lighten($color1, 26%);
121 127
     }
122 128
 
@@ -154,7 +160,9 @@
154 160
   outline: 0;
155 161
   transition: color 100ms ease-in;
156 162
 
157
-  &:hover, &:active, &:focus {
163
+  &:hover,
164
+  &:active,
165
+  &:focus {
158 166
     color: lighten($color1, 26%);
159 167
     transition: color 200ms ease-out;
160 168
   }
@@ -172,7 +180,9 @@
172 180
     border: 0;
173 181
   }
174 182
 
175
-  &::-moz-focus-inner, &:focus, &:active {
183
+  &::-moz-focus-inner,
184
+  &:focus,
185
+  &:active {
176 186
     outline: 0 !important;
177 187
   }
178 188
 }
@@ -181,15 +191,15 @@
181 191
   color: $color4;
182 192
 }
183 193
 
184
-.dropdown--active:after {
194
+.dropdown--active::after {
185 195
   content: "";
186 196
   display: block;
187 197
   position: absolute;
188 198
   width: 0;
189 199
   height: 0;
190 200
   border-style: solid;
191
-  border-width: 0 4.5px 7.8px 4.5px;
192
-  border-color: transparent transparent $color2 transparent;
201
+  border-width: 0 4.5px 7.8px;
202
+  border-color: transparent transparent $color2;
193 203
   bottom: 8px;
194 204
   right: 104px;
195 205
 }
@@ -202,7 +212,7 @@
202 212
 }
203 213
 
204 214
 .ellipsis {
205
-  &:after {
215
+  &::after {
206 216
     content: "…";
207 217
   }
208 218
 }
@@ -235,7 +245,9 @@
235 245
     font-weight: 500;
236 246
     text-decoration: underline;
237 247
 
238
-    &:hover, &:active, &:focus {
248
+    &:hover,
249
+    &:active,
250
+    &:focus {
239 251
       text-decoration: none;
240 252
     }
241 253
   }
@@ -246,7 +258,7 @@
246 258
   font-family: inherit;
247 259
   font-size: 14px;
248 260
   background: $color5;
249
-  border-radius: 0 0 4px 0;
261
+  border-radius: 0 0 4px;
250 262
 }
251 263
 
252 264
 .compose-form__buttons-wrapper {
@@ -320,7 +332,8 @@
320 332
   }
321 333
 }
322 334
 
323
-.compose-form__textarea, .follow-form__input {
335
+.compose-form__textarea,
336
+.follow-form__input {
324 337
   background: $color5;
325 338
 
326 339
   &:disabled {
@@ -331,8 +344,8 @@
331 344
 .compose-form__autosuggest-wrapper {
332 345
   position: relative;
333 346
 
334
-  .dropdown--active:after {
335
-    border-color: transparent transparent $color5 transparent;
347
+  .dropdown--active::after {
348
+    border-color: transparent transparent $color5;
336 349
     bottom: -1px;
337 350
     right: 8px;
338 351
   }
@@ -467,7 +480,7 @@ a.status__content__spoiler-link {
467 480
   color: lighten($color1, 8%);
468 481
   font-weight: 500;
469 482
   font-size: 11px;
470
-  padding: 0px 6px;
483
+  padding: 0 6px;
471 484
   text-transform: uppercase;
472 485
   line-height: inherit;
473 486
 }
@@ -784,7 +797,7 @@ a.status__content__spoiler-link {
784 797
       right: initial;
785 798
     }
786 799
 
787
-    &:after {
800
+    &::after {
788 801
       bottom: initial;
789 802
       margin-left: 11px;
790 803
       margin-top: -7px;
@@ -964,12 +977,12 @@ a.status__content__spoiler-link {
964 977
   position: absolute;
965 978
 
966 979
   .star-icon {
967
-    color: #ca8f04;
980
+    color: $color10;
968 981
   }
969 982
 }
970 983
 
971 984
 .star-icon.active {
972
-  color: #ca8f04;
985
+  color: $color10;
973 986
 }
974 987
 
975 988
 .notification__display-name {
@@ -1006,7 +1019,8 @@ a.status__content__spoiler-link {
1006 1019
   }
1007 1020
 }
1008 1021
 
1009
-.transparent-background, .imageloader {
1022
+.transparent-background,
1023
+.imageloader {
1010 1024
   background: url('../images/void.png');
1011 1025
 }
1012 1026
 
@@ -1140,7 +1154,7 @@ a.status__content__spoiler-link {
1140 1154
   flex-direction: row;
1141 1155
   justify-content: flex-start;
1142 1156
   overflow-x: auto;
1143
-  position:   relative;
1157
+  position: relative;
1144 1158
 }
1145 1159
 
1146 1160
 @media screen and (min-width: 360px) {
@@ -1190,7 +1204,8 @@ a.status__content__spoiler-link {
1190 1204
   border-bottom: 2px solid transparent;
1191 1205
 }
1192 1206
 
1193
-.column, .drawer {
1207
+.column,
1208
+.drawer {
1194 1209
   flex: 1 1 100%;
1195 1210
   overflow: hidden;
1196 1211
 }
@@ -1207,7 +1222,8 @@ a.status__content__spoiler-link {
1207 1222
 }
1208 1223
 
1209 1224
 @media screen and (max-width: 1024px) {
1210
-  .column, .drawer {
1225
+  .column,
1226
+  .drawer {
1211 1227
     width: 100%;
1212 1228
     padding: 0;
1213 1229
   }
@@ -1216,7 +1232,8 @@ a.status__content__spoiler-link {
1216 1232
     flex-direction: column;
1217 1233
   }
1218 1234
 
1219
-  .search__input, .autosuggest-textarea__textarea {
1235
+  .search__input,
1236
+  .autosuggest-textarea__textarea {
1220 1237
     font-size: 16px;
1221 1238
   }
1222 1239
 }
@@ -1226,7 +1243,8 @@ a.status__content__spoiler-link {
1226 1243
     padding: 0;
1227 1244
   }
1228 1245
 
1229
-  .column, .drawer {
1246
+  .column,
1247
+  .drawer {
1230 1248
     flex: 0 0 auto;
1231 1249
     padding: 10px;
1232 1250
     padding-left: 5px;
@@ -1242,7 +1260,8 @@ a.status__content__spoiler-link {
1242 1260
   }
1243 1261
 
1244 1262
   .columns-area > div {
1245
-    .column, .drawer {
1263
+    .column,
1264
+    .drawer {
1246 1265
       padding-left: 5px;
1247 1266
       padding-right: 5px;
1248 1267
     }
@@ -1257,7 +1276,8 @@ a.status__content__spoiler-link {
1257 1276
 }
1258 1277
 
1259 1278
 @media screen and (min-width: 1900px) {
1260
-  .column, .drawer {
1279
+  .column,
1280
+  .drawer {
1261 1281
     width: 400px;
1262 1282
     border-radius: 4px;
1263 1283
     height: 96vh;
@@ -1346,7 +1366,9 @@ a.status__content__spoiler-link {
1346 1366
     color: $color4;
1347 1367
   }
1348 1368
 
1349
-  &:hover, &:focus, &:active {
1369
+  &:hover,
1370
+  &:focus,
1371
+  &:active {
1350 1372
     background: lighten($color1, 14%);
1351 1373
     transition: all 100ms linear;
1352 1374
   }
@@ -1508,8 +1530,8 @@ a.status__content__spoiler-link {
1508 1530
   position: absolute;
1509 1531
   width: 14px;
1510 1532
   height: 10px;
1511
-  top: 0px;
1512
-  bottom: 0px;
1533
+  top: 0;
1534
+  bottom: 0;
1513 1535
   margin-top: auto;
1514 1536
   margin-bottom: auto;
1515 1537
   line-height: 0;
@@ -1527,8 +1549,8 @@ a.status__content__spoiler-link {
1527 1549
   position: absolute;
1528 1550
   width: 10px;
1529 1551
   height: 10px;
1530
-  top: 0px;
1531
-  bottom: 0px;
1552
+  top: 0;
1553
+  bottom: 0;
1532 1554
   margin-top: auto;
1533 1555
   margin-bottom: auto;
1534 1556
   line-height: 0;
@@ -1696,7 +1718,7 @@ a.status__content__spoiler-link {
1696 1718
 }
1697 1719
 
1698 1720
 .character-counter--over {
1699
-  color: #ff5050;
1721
+  color: $color9;
1700 1722
 }
1701 1723
 
1702 1724
 .getting-started__wrapper {
@@ -1706,7 +1728,7 @@ a.status__content__spoiler-link {
1706 1728
 .getting-started {
1707 1729
   box-sizing: border-box;
1708 1730
   padding-bottom: 235px;
1709
-  background: url('../images/mastodon-getting-started.png') no-repeat 0 100%/contain local;
1731
+  background: url('../images/mastodon-getting-started.png') no-repeat 0 100% / contain local;
1710 1732
   flex: 1 0 auto;
1711 1733
 
1712 1734
   p {
@@ -1727,10 +1749,11 @@ a.status__content__spoiler-link {
1727 1749
   display: block;
1728 1750
   font-family: inherit;
1729 1751
   margin-bottom: 10px;
1730
-  padding: 7px 0px;
1752
+  padding: 7px 0;
1731 1753
   width: 100%;
1732 1754
 
1733
-  &:focus, &:active {
1755
+  &:focus,
1756
+  &:active {
1734 1757
     color: $color5;
1735 1758
     border-bottom-color: $color4;
1736 1759
   }
@@ -1776,7 +1799,9 @@ button.icon-button.active i.fa-retweet {
1776 1799
   }
1777 1800
 }
1778 1801
 
1779
-.status-card-video, .status-card-rich, .status-card-photo {
1802
+.status-card-video,
1803
+.status-card-rich,
1804
+.status-card-photo {
1780 1805
   margin-top: 14px;
1781 1806
   overflow: hidden;
1782 1807
 
@@ -1850,7 +1875,7 @@ button.icon-button.active i.fa-retweet {
1850 1875
 }
1851 1876
 
1852 1877
 .status-card__image-image {
1853
-  border-radius: 4px 0px 0px 4px;
1878
+  border-radius: 4px 0 0 4px;
1854 1879
   display: block;
1855 1880
   height: auto;
1856 1881
   margin: 0;
@@ -1913,7 +1938,8 @@ button.icon-button.active i.fa-retweet {
1913 1938
     }
1914 1939
   }
1915 1940
 
1916
-  &:focus, &:active {
1941
+  &:focus,
1942
+  &:active {
1917 1943
     outline: 0;
1918 1944
   }
1919 1945
 }
@@ -1989,7 +2015,7 @@ button.icon-button.active i.fa-retweet {
1989 2015
 .spoiler-button {
1990 2016
   left: 4px;
1991 2017
   position: absolute;
1992
-  text-shadow: 0px 1px 1px #000, 1px 0px 1px #000;
2018
+  text-shadow: 0 1px 1px $color8, 1px 0 1px $color8;
1993 2019
   top: 4px;
1994 2020
   z-index: 100;
1995 2021
 }
@@ -2004,7 +2030,7 @@ button.icon-button.active i.fa-retweet {
2004 2030
   border-bottom: 1px solid lighten($color1, 8%);
2005 2031
   display: flex;
2006 2032
   flex-direction: row;
2007
-  padding: 10px 0px;
2033
+  padding: 10px 0;
2008 2034
 }
2009 2035
 
2010 2036
 .account--panel__button,
@@ -2028,7 +2054,7 @@ button.icon-button.active i.fa-retweet {
2028 2054
 
2029 2055
 .modal-container__nav {
2030 2056
   align-items: center;
2031
-  background: rgba(0, 0, 0, 0.5);
2057
+  background: rgba($color8, 0.5);
2032 2058
   box-sizing: border-box;
2033 2059
   color: $color5;
2034 2060
   cursor: pointer;
@@ -2111,7 +2137,8 @@ button.icon-button.active i.fa-retweet {
2111 2137
   resize: vertical;
2112 2138
   width: 100%;
2113 2139
 
2114
-  &:active, &:focus {
2140
+  &:active,
2141
+  &:focus {
2115 2142
     border-bottom-color: $color4;
2116 2143
     background: rgba($color8, 0.1);
2117 2144
   }
@@ -2148,7 +2175,8 @@ button.icon-button.active i.fa-retweet {
2148 2175
   }
2149 2176
 }
2150 2177
 
2151
-.status-list__unread-indicator, .notifications__unread-indicator {
2178
+.status-list__unread-indicator,
2179
+.notifications__unread-indicator {
2152 2180
   position: absolute;
2153 2181
   top: 35px;
2154 2182
   left: 0;
@@ -2165,6 +2193,7 @@ button.icon-button.active i.fa-retweet {
2165 2193
   0% {
2166 2194
     opacity: 1;
2167 2195
   }
2196
+
2168 2197
   100% {
2169 2198
     opacity: 0.5;
2170 2199
   }
@@ -2212,14 +2241,16 @@ button.icon-button.active i.fa-retweet {
2212 2241
         height: 18px;
2213 2242
       }
2214 2243
 
2215
-      img, svg {
2244
+      img,
2245
+      svg {
2216 2246
         width: 18px;
2217 2247
         height: 18px;
2218 2248
         filter: grayscale(100%);
2219 2249
       }
2220 2250
 
2221 2251
       &:hover {
2222
-        img, svg {
2252
+        img,
2253
+        svg {
2223 2254
           filter: grayscale(0);
2224 2255
         }
2225 2256
       }
@@ -2227,7 +2258,8 @@ button.icon-button.active i.fa-retweet {
2227 2258
       &.active {
2228 2259
         border-bottom-color: $color4;
2229 2260
 
2230
-        img, svg {
2261
+        img,
2262
+        svg {
2231 2263
           filter: grayscale(0);
2232 2264
         }
2233 2265
       }
@@ -2295,7 +2327,7 @@ button.icon-button.active i.fa-retweet {
2295 2327
       position: relative;
2296 2328
       cursor: pointer;
2297 2329
 
2298
-      &.active:after {
2330
+      &.active::after {
2299 2331
         content: "";
2300 2332
         display: block;
2301 2333
         position: absolute;
@@ -2340,14 +2372,16 @@ button.icon-button.active i.fa-retweet {
2340 2372
   }
2341 2373
 
2342 2374
   .emoji-row .emoji {
2343
-    img, svg {
2375
+    img,
2376
+    svg {
2344 2377
       transition: transform 60ms ease-in-out;
2345 2378
     }
2346 2379
 
2347 2380
     &:hover {
2348 2381
       background: lighten($color2, 3%);
2349 2382
 
2350
-      img, svg {
2383
+      img,
2384
+      svg {
2351 2385
         transform: translateZ(0) scale(1.2);
2352 2386
       }
2353 2387
     }
@@ -2460,7 +2494,8 @@ button.icon-button.active i.fa-retweet {
2460 2494
 .emoji-button {
2461 2495
   outline: 0;
2462 2496
 
2463
-  &:active, &:focus {
2497
+  &:active,
2498
+  &:focus {
2464 2499
     outline: 0 !important;
2465 2500
   }
2466 2501
 
@@ -2474,7 +2509,9 @@ button.icon-button.active i.fa-retweet {
2474 2509
     margin-top: 2px;
2475 2510
   }
2476 2511
 
2477
-  &:hover, &:active, &:focus {
2512
+  &:hover,
2513
+  &:active,
2514
+  &:focus {
2478 2515
     img {
2479 2516
       opacity: 1;
2480 2517
       filter: none;
@@ -2498,7 +2535,7 @@ button.icon-button.active i.fa-retweet {
2498 2535
   top: 27px;
2499 2536
   width: 230px;
2500 2537
   background: $color5;
2501
-  border-radius: 0 4px 4px 4px;
2538
+  border-radius: 0 4px 4px;
2502 2539
   z-index: 2;
2503 2540
   overflow: hidden;
2504 2541
 }
@@ -2509,7 +2546,8 @@ button.icon-button.active i.fa-retweet {
2509 2546
   cursor: pointer;
2510 2547
   display: flex;
2511 2548
 
2512
-  &:hover, &.active {
2549
+  &:hover,
2550
+  &.active {
2513 2551
     background: $color4;
2514 2552
     color: $color5;
2515 2553
 
@@ -2582,7 +2620,9 @@ button.icon-button.active i.fa-retweet {
2582 2620
     border: 0;
2583 2621
   }
2584 2622
 
2585
-  &::-moz-focus-inner, &:focus, &:active {
2623
+  &::-moz-focus-inner,
2624
+  &:focus,
2625
+  &:active {
2586 2626
     outline: 0 !important;
2587 2627
   }
2588 2628
 
@@ -2656,7 +2696,9 @@ button.icon-button.active i.fa-retweet {
2656 2696
   color: $color2;
2657 2697
   text-decoration: none;
2658 2698
 
2659
-  &:hover, &:active, &:focus {
2699
+  &:hover,
2700
+  &:active,
2701
+  &:focus {
2660 2702
     color: lighten($color2, 4%);
2661 2703
     text-decoration: underline;
2662 2704
   }
@@ -2671,7 +2713,7 @@ button.icon-button.active i.fa-retweet {
2671 2713
   z-index: 9999;
2672 2714
   opacity: 0;
2673 2715
   background: rgba($color8, 0.7);
2674
-  transform: translateZ(0px);
2716
+  transform: translateZ(0);
2675 2717
 }
2676 2718
 
2677 2719
 .modal-root__container {
@@ -2702,7 +2744,8 @@ button.icon-button.active i.fa-retweet {
2702 2744
   max-height: 80vh;
2703 2745
   position: relative;
2704 2746
 
2705
-  img, video {
2747
+  img,
2748
+  video {
2706 2749
     max-width: 80vw;
2707 2750
     max-height: 80vh;
2708 2751
   }
@@ -2781,11 +2824,14 @@ button.icon-button.active i.fa-retweet {
2781 2824
     font-size: 14px;
2782 2825
     font-weight: 500;
2783 2826
 
2784
-    &:hover, &:focus, &:active {
2827
+    &:hover,
2828
+    &:focus,
2829
+    &:active {
2785 2830
       color: darken($color2, 38%);
2786 2831
     }
2787 2832
 
2788
-    &.onboarding-modal__done, &.onboarding-modal__next {
2833
+    &.onboarding-modal__done,
2834
+    &.onboarding-modal__next {
2789 2835
       color: $color4;
2790 2836
     }
2791 2837
   }
@@ -2830,7 +2876,9 @@ button.icon-button.active i.fa-retweet {
2830 2876
   a {
2831 2877
     color: $color4;
2832 2878
 
2833
-    &:hover, &:focus, &:active {
2879
+    &:hover,
2880
+    &:focus,
2881
+    &:active {
2834 2882
       color: lighten($color4, 4%);
2835 2883
     }
2836 2884
   }
@@ -2861,7 +2909,7 @@ button.icon-button.active i.fa-retweet {
2861 2909
 }
2862 2910
 
2863 2911
 .onboarding-modal__page-one__elephant-friend {
2864
-  background: url('../images/elephant-friend.png') no-repeat center center/contain;
2912
+  background: url('../images/elephant-friend.png') no-repeat center center / contain;
2865 2913
   width: 147px;
2866 2914
   height: 160px;
2867 2915
   margin-right: 10px;
@@ -2983,7 +3031,8 @@ button.icon-button.active i.fa-retweet {
2983 3031
   margin-left: 10px;
2984 3032
 }
2985 3033
 
2986
-.boost-modal, .confirmation-modal {
3034
+.boost-modal,
3035
+.confirmation-modal {
2987 3036
   background: lighten($color2, 8%);
2988 3037
   color: $color1;
2989 3038
   border-radius: 8px;
@@ -3018,7 +3067,8 @@ button.icon-button.active i.fa-retweet {
3018 3067
   }
3019 3068
 }
3020 3069
 
3021
-.boost-modal__action-bar, .confirmation-modal__action-bar {
3070
+.boost-modal__action-bar,
3071
+.confirmation-modal__action-bar {
3022 3072
   display: flex;
3023 3073
   background: $color2;
3024 3074
   padding: 10px;
@@ -3065,7 +3115,9 @@ button.icon-button.active i.fa-retweet {
3065 3115
     font-size: 14px;
3066 3116
     font-weight: 500;
3067 3117
 
3068
-    &:hover, &:focus, &:active {
3118
+    &:hover,
3119
+    &:focus,
3120
+    &:active {
3069 3121
       color: darken($color2, 38%);
3070 3122
     }
3071 3123
   }
@@ -3226,7 +3278,7 @@ button.icon-button.active i.fa-retweet {
3226 3278
 
3227 3279
 /* Status Video Player */
3228 3280
 .status__video-player {
3229
-  background: #000;
3281
+  background: $color8;
3230 3282
   box-sizing: border-box;
3231 3283
   cursor: default; /* May not be needed */
3232 3284
   margin-top: 8px;
@@ -3246,18 +3298,18 @@ button.icon-button.active i.fa-retweet {
3246 3298
 
3247 3299
 .status__video-player-expand,
3248 3300
 .status__video-player-mute {
3249
-  color: #fff;
3301
+  color: $color5;
3250 3302
   opacity: 0.8;
3251 3303
   position: absolute;
3252 3304
   right: 4px;
3253
-  text-shadow: 0px 1px 1px #000, 1px 0px 1px #000;
3305
+  text-shadow: 0 1px 1px $color8, 1px 0 1px $color8;
3254 3306
 }
3255 3307
 
3256 3308
 .status__video-player-spoiler {
3257
-  color: #fff;
3309
+  color: $color5;
3258 3310
   left: 4px;
3259 3311
   position: absolute;
3260
-  text-shadow: 0px 1px 1px #000, 1px 0px 1px #000;
3312
+  text-shadow: 0 1px 1px $color8, 1px 0 1px $color8;
3261 3313
   top: 4px;
3262 3314
   z-index: 100;
3263 3315
 }
@@ -3281,7 +3333,7 @@ button.icon-button.active i.fa-retweet {
3281 3333
 
3282 3334
 .media-spoiler-video-play-icon {
3283 3335
   border-radius: 100px;
3284
-  color: rgba(255, 255, 255, 0.8);
3336
+  color: rgba($color5, 0.8);
3285 3337
   font-size: 36px;
3286 3338
   left: 50%;
3287 3339
   padding: 5px;

+ 2
- 1
app/javascript/styles/footer.scss View File

@@ -13,7 +13,8 @@
13 13
     }
14 14
   }
15 15
 
16
-  .powered-by, .single-user-login {
16
+  .powered-by,
17
+  .single-user-login {
17 18
     font-weight: 400;
18 19
 
19 20
     a {

+ 31
- 15
app/javascript/styles/forms.scss View File

@@ -42,7 +42,9 @@ code {
42 42
     }
43 43
   }
44 44
 
45
-  .input.file, .input.select, .input.radio_buttons {
45
+  .input.file,
46
+  .input.select,
47
+  .input.radio_buttons {
46 48
     padding: 15px 0;
47 49
     margin-bottom: 0;
48 50
 
@@ -63,7 +65,7 @@ code {
63 65
     margin-bottom: 5px;
64 66
     font-family: inherit;
65 67
     font-size: 14px;
66
-    color: white;
68
+    color: $color5;
67 69
     display: block;
68 70
     width: auto;
69 71
   }
@@ -74,7 +76,7 @@ code {
74 76
     label {
75 77
       font-family: inherit;
76 78
       font-size: 14px;
77
-      color: white;
79
+      color: $color5;
78 80
       display: block;
79 81
       width: auto;
80 82
     }
@@ -86,8 +88,8 @@ code {
86 88
     }
87 89
 
88 90
     input[type=checkbox] {
89
-	    position: absolute;
90
-	    left: 0;
91
+      position: absolute;
92
+      left: 0;
91 93
       top: 1px;
92 94
       margin: 0;
93 95
     }
@@ -98,7 +100,11 @@ code {
98 100
     }
99 101
   }
100 102
 
101
-  input[type=text], input[type=number], input[type=email], input[type=password], textarea {
103
+  input[type=text],
104
+  input[type=number],
105
+  input[type=email],
106
+  input[type=password],
107
+  textarea {
102 108
     background: transparent;
103 109
     box-sizing: border-box;
104 110
     border: 0;
@@ -125,7 +131,8 @@ code {
125 131
       border-bottom-color: $color7;
126 132
     }
127 133
 
128
-    &:active, &:focus {
134
+    &:active,
135
+    &:focus {
129 136
       border-bottom-color: $color4;
130 137
       background: rgba($color8, 0.1);
131 138
     }
@@ -136,7 +143,9 @@ code {
136 143
       color: $color6;
137 144
     }
138 145
 
139
-    input[type=text], input[type=email], input[type=password] {
146
+    input[type=text],
147
+    input[type=email],
148
+    input[type=password] {
140 149
       border-bottom-color: $color6;
141 150
     }
142 151
 
@@ -152,7 +161,8 @@ code {
152 161
     margin-top: 30px;
153 162
   }
154 163
 
155
-  button, .block-button {
164
+  button,
165
+  .block-button {
156 166
     display: block;
157 167
     width: 100%;
158 168
     border: 0;
@@ -174,7 +184,8 @@ code {
174 184
       background-color: lighten($color4, 5%);
175 185
     }
176 186
 
177
-    &:active, &:focus {
187
+    &:active,
188
+    &:focus {
178 189
       position: relative;
179 190
       top: 1px;
180 191
       background-color: darken($color4, 5%);
@@ -187,7 +198,8 @@ code {
187 198
         background-color: lighten($color6, 5%);
188 199
       }
189 200
 
190
-      &:active, &:focus {
201
+      &:active,
202
+      &:focus {
191 203
         background-color: darken($color6, 5%);
192 204
       }
193 205
     }
@@ -226,7 +238,8 @@ code {
226 238
   }
227 239
 }
228 240
 
229
-.oauth-prompt, .follow-prompt {
241
+.oauth-prompt,
242
+.follow-prompt {
230 243
   margin-bottom: 30px;
231 244
   text-align: center;
232 245
   color: $color3;
@@ -248,7 +261,7 @@ code {
248 261
 
249 262
 .qr-code {
250 263
   flex: 0 0 auto;
251
-  background: #fff;
264
+  background: $color5;
252 265
   padding: 4px;
253 266
   margin-bottom: 20px;
254 267
   box-shadow: 0 0 15px rgba($color8, 0.2);
@@ -295,7 +308,9 @@ code {
295 308
       color: $color5;
296 309
       text-decoration: underline;
297 310
 
298
-      &:hover, &:focus, &:active {
311
+      &:hover,
312
+      &:focus,
313
+      &:active {
299 314
         text-decoration: none;
300 315
       }
301 316
     }
@@ -316,7 +331,8 @@ code {
316 331
   display: flex;
317 332
   align-items: center;
318 333
 
319
-  .actions, .pagination {
334
+  .actions,
335
+  .pagination {
320 336
     flex: 1 1 auto;
321 337
   }
322 338
 

+ 2
- 1
app/javascript/styles/landing_strip.scss View File

@@ -6,7 +6,8 @@
6 6
   border-radius: 4px;
7 7
   margin-bottom: 20px;
8 8
 
9
-  strong, a {
9
+  strong,
10
+  a {
10 11
     font-weight: 500;
11 12
   }
12 13
 

+ 9
- 5
app/javascript/styles/rtl.scss View File

@@ -1,7 +1,8 @@
1 1
 body.rtl {
2 2
   direction: rtl;
3 3
 
4
-  .column-link__icon, .column-header__icon {
4
+  .column-link__icon,
5
+  .column-header__icon {
5 6
     margin-right: 0;
6 7
     margin-left: 5px;
7 8
   }
@@ -105,13 +106,15 @@ body.rtl {
105 106
     float: right;
106 107
   }
107 108
 
108
-  .detailed-status__favorites, .detailed-status__reblogs {
109
+  .detailed-status__favorites,
110
+  .detailed-status__reblogs {
109 111
     margin-left: 0;
110 112
     margin-right: 6px;
111 113
   }
112 114
 
113 115
   @media screen and (min-width: 1025px) {
114
-    .column, .drawer {
116
+    .column,
117
+    .drawer {
115 118
       padding-left: 5px;
116 119
       padding-right: 5px;
117 120
 
@@ -121,13 +124,14 @@ body.rtl {
121 124
       }
122 125
 
123 126
       &:last-child {
124
-        padding-right: 0px;
127
+        padding-right: 0;
125 128
         padding-left: 10px;
126 129
       }
127 130
     }
128 131
 
129 132
     .columns-area > div {
130
-      .column, .drawer {
133
+      .column,
134
+      .drawer {
131 135
         padding-left: 5px;
132 136
         padding-right: 5px;
133 137
       }

+ 17
- 9
app/javascript/styles/stream_entries.scss View File

@@ -5,24 +5,31 @@
5 5
   .entry {
6 6
     background: $color5;
7 7
 
8
-    .detailed-status.light, .status.light {
8
+    .detailed-status.light,
9
+    .status.light {
9 10
       border-bottom: 1px solid $color2;
10 11
     }
11 12
 
12 13
     &:last-child {
13
-      &, .detailed-status.light, .status.light {
14
+      &,
15
+      .detailed-status.light,
16
+      .status.light {
14 17
         border-bottom: 0;
15 18
         border-radius: 0 0 4px 4px;
16 19
       }
17 20
     }
18 21
 
19 22
     &:first-child {
20
-      &, .detailed-status.light, .status.light {
23
+      &,
24
+      .detailed-status.light,
25
+      .status.light {
21 26
         border-radius: 4px 4px 0 0;
22 27
       }
23 28
 
24 29
       &:last-child {
25
-        &, .detailed-status.light, .status.light {
30
+        &,
31
+        .detailed-status.light,
32
+        .status.light {
26 33
           border-radius: 4px;
27 34
         }
28 35
       }
@@ -30,7 +37,7 @@
30 37
   }
31 38
 
32 39
   .status.light {
33
-    padding: 14px 14px 14px (48px + 14px*2);
40
+    padding: 14px 14px 14px (48px + 14px * 2);
34 41
     position: relative;
35 42
     min-height: 48px;
36 43
     cursor: default;
@@ -232,7 +239,8 @@
232 239
     }
233 240
   }
234 241
 
235
-  .media-item, .video-item {
242
+  .media-item,
243
+  .video-item {
236 244
     box-sizing: border-box;
237 245
     position: relative;
238 246
     left: auto;
@@ -323,8 +331,8 @@
323 331
   }
324 332
 
325 333
   .pre-header {
326
-    padding: 14px 0px;
327
-    padding-left: (48px + 14px*2);
334
+    padding: 14px 0;
335
+    padding-left: (48px + 14px * 2);
328 336
     padding-bottom: 0;
329 337
     margin-bottom: -4px;
330 338
     color: $color3;
@@ -333,7 +341,7 @@
333 341
 
334 342
     .pre-header__icon {
335 343
       position: absolute;
336
-      left: (48px + 14px*2 - 30px);
344
+      left: (48px + 14px * 2 - 30px);
337 345
     }
338 346
 
339 347
     .status__display-name.muted strong {

+ 4
- 2
app/javascript/styles/tables.scss View File

@@ -5,7 +5,8 @@
5 5
   border-collapse: collapse;
6 6
   margin-bottom: 20px;
7 7
 
8
-  th, td {
8
+  th,
9
+  td {
9 10
     padding: 8px;
10 11
     line-height: 18px;
11 12
     vertical-align: top;
@@ -24,7 +25,8 @@
24 25
     font-weight: 500;
25 26
   }
26 27
 
27
-  & > tbody > tr:nth-child(odd) > td, & > tbody > tr:nth-child(odd) > th {
28
+  & > tbody > tr:nth-child(odd) > td,
29
+  & > tbody > tr:nth-child(odd) > th {
28 30
     background: $color1;
29 31
   }
30 32
 

+ 2
- 0
app/javascript/styles/variables.scss View File

@@ -6,3 +6,5 @@ $color5: #ffffff !default; // white
6 6
 $color6: #df405a !default; // error red
7 7
 $color7: #79bd9a !default; // succ green
8 8
 $color8: #000000 !default; // black
9
+$color9: #ff5050 !default; // red
10
+$color10: #ca8f04 !default; // dark goldenrod