Skip to content

Commit 1eeea64

Browse files
codebykatcodebykat
authored
Chore: Update sass, stylelint, focus rings, general SCSS cleanup (#3294)
1 parent 9e308c6 commit 1eeea64

File tree

49 files changed

+1191
-599
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

49 files changed

+1191
-599
lines changed

‎.stylelintrc

+10-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,16 @@
33
"extends": ["stylelint-config-standard", "stylelint-config-standard-scss"],
44
"plugins": ["stylelint-prettier"],
55
"rules": {
6+
"alpha-value-notation": null,
7+
"color-function-notation": "legacy",
8+
"declaration-property-value-no-unknown": null,
69
"prettier/prettier": true,
7-
"no-descending-specificity": null
10+
"no-descending-specificity": null,
11+
"selector-class-pattern": [
12+
"^([a-z][a-z0-9]*)(-[a-z0-9]+)*((__([a-z][a-z0-9]*)(-[a-z0-9]+)*)?(--([a-z][a-z0-9]*)(-[a-z0-9]+)*)?)$",
13+
{
14+
"message": "Expected BEM naming convention for class."
15+
}
16+
]
817
}
918
}

‎Makefile

+1-1
Original file line numberDiff line numberDiff line change
@@ -192,7 +192,7 @@ lint: lint-js lint-scss
192192

193193
.PHONY: lint-scss
194194
lint-scss:
195-
@npx stylelint --ignore-path .gitignore "**/*.scss"
195+
@npx stylelint "**/*.scss"
196196

197197
.PHONY: lint-js
198198
lint-js:

‎RELEASE-NOTES.md

+6
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,11 @@
11
# Changelog
22

3+
## [v2.23.2]
4+
5+
### Other Changes
6+
7+
- Updated styles, sass, style linting [#3294](https://github.com/Automattic/simplenote-electron/pull/3294)
8+
39
## [v2.23.1]
410

511
### Fixes

‎lib/alternate-login-prompt/style.scss

+3-6
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,6 @@
11
.alternate-login__overlay {
22
position: fixed;
3-
top: 0;
4-
left: 0;
5-
right: 0;
6-
bottom: 0;
3+
inset: 0;
74
display: flex;
85
justify-content: center;
96
align-items: center;
@@ -59,14 +56,14 @@
5956
padding-top: 10px;
6057
padding-bottom: 10px;
6158
display: flex;
62-
flex-direction: row;
6359
justify-content: flex-end;
64-
flex-wrap: wrap;
60+
flex-flow: row wrap;
6561
width: 100%;
6662

6763
a {
6864
padding-right: 12px;
6965
}
66+
7067
.button-borderless {
7168
color: var(--accent-color);
7269
}

‎lib/app-layout/style.scss

+6
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
@use '../../scss/variables' as *;
2+
13
.app-layout {
24
display: flex;
35
flex: 1 0 auto;
@@ -12,6 +14,7 @@
1214
width 0.2s ease-in-out,
1315
opacity 0.2s ease-in-out;
1416
}
17+
1518
.app-layout__note-column {
1619
border-left-width: 0;
1720
transition: border-left-width 0.2s;
@@ -23,6 +26,7 @@
2326
opacity: 1;
2427
width: inherit;
2528
}
29+
2630
.app-layout__note-column {
2731
transition: inherit;
2832
}
@@ -96,10 +100,12 @@
96100
opacity: 1;
97101
transform: scale(1);
98102
}
103+
99104
50% {
100105
opacity: 0.85;
101106
transform: scale(1.05);
102107
}
108+
103109
100% {
104110
opacity: 1;
105111
transform: scale(1);

‎lib/app.tsx

-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import React, { Component } from 'react';
22
import { connect } from 'react-redux';
3-
import 'focus-visible/dist/focus-visible.js';
43
import NoteInfo from './note-info';
54
import NoteActions from './note-actions';
65
import NavigationBar from './navigation-bar';

‎lib/auth/style.scss

+2
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
/* stylelint-disable-next-line selector-class-pattern */
12
.ReactModal__Overlay {
23
z-index: 1000;
34
}
@@ -168,6 +169,7 @@ body {
168169
line-height: 22px;
169170
text-align: center;
170171
width: 320px;
172+
171173
.button {
172174
width: 95%;
173175
}

‎lib/components/panel-title/style.scss

+2
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
@use '../../../scss/variables' as *;
2+
13
.panel-title {
24
color: var(--foreground-color);
35
margin: 0 0 0.5em;

‎lib/components/slider/style.scss

+17-2
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,46 @@
1-
.slider {
2-
@extend %smart-focus-outline;
1+
@use '../../../scss/variables' as *;
2+
@use '../../../scss/mixins';
33

4+
.slider {
45
background-color: var(--background-color);
56
cursor: pointer;
67
width: 100%;
78
max-width: $max-content-width;
89
padding: 0; // IE11
910
appearance: none;
1011

12+
&:focus {
13+
outline: 0;
14+
}
15+
16+
&:focus-visible {
17+
outline: $focus-outline;
18+
}
19+
1120
// Track
1221
&::-webkit-slider-runnable-track {
1322
background: var(--primary-slider-color);
1423
height: 4px;
1524
border-radius: 2px;
1625
}
26+
1727
&::-moz-range-track {
1828
background: var(--primary-slider-color);
1929
height: 3px;
2030
border-radius: 2px;
2131
}
32+
2233
&::-ms-track {
2334
border-color: var(--primary-slider-color);
2435
height: 3px;
2536
border-width: 7px 0;
2637
color: transparent;
2738
}
39+
2840
&::-ms-fill-lower {
2941
background: var(--secondary-slider-color);
3042
}
43+
3144
&::-ms-fill-upper {
3245
background: var(--secondary-slider-color);
3346
}
@@ -48,6 +61,7 @@
4861
transform: translateY(calc(-50% + 2px)) scale(1.15);
4962
}
5063
}
64+
5165
&::-moz-range-thumb {
5266
background: var(--secondary-slider-color);
5367
box-shadow: 0 1px 3px 0 var(--overlay-color);
@@ -62,6 +76,7 @@
6276
transform: scale(1.15);
6377
}
6478
}
79+
6580
&::-ms-thumb {
6681
background: var(--secondary-slider-color);
6782
box-shadow: 0 1px 3px 0 var(--overlay-color);

‎lib/components/transition-delay-enter/style.scss

+3-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
@use '../../../scss/mixins';
2+
13
.transition-delay-enter {
2-
@include react-transition-fade-in;
4+
@include mixins.react-transition-fade-in;
35
}

‎lib/components/transition-fade-in-out/style.scss

+4-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
1+
@use '../../../scss/mixins';
2+
13
.transition-fade-in-out {
2-
@include react-transition-fade-in;
3-
@include react-transition-fade-out;
4+
@include mixins.react-transition-fade-in;
5+
@include mixins.react-transition-fade-out;
46
}

‎lib/controls/checkbox/style.scss

+2
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
@use '../../../scss/variables' as *;
2+
13
.checkbox-control {
24
-webkit-touch-callout: none;
35
width: 16px;

‎lib/controls/toggle/style.scss

+7-4
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,11 @@
1+
@use '../../../scss/variables' as *;
2+
13
$toggle-control-width: 24px;
24
$toggle-control-height: 16px;
35
$toggle-control-knob-margin: 2px;
4-
$toggle-control-knob-size: $toggle-control-height - $toggle-control-knob-margin -
5-
$toggle-control-knob-margin;
6+
7+
// prettier-ignore
8+
$toggle-control-knob-size: calc($toggle-control-height - 2 * $toggle-control-knob-margin);
69

710
.toggle-control {
811
-webkit-touch-callout: none;
@@ -78,10 +81,10 @@ $toggle-control-knob-size: $toggle-control-height - $toggle-control-knob-margin
7881
opacity: 1;
7982
}
8083

84+
// prettier-ignore
8185
.toggle-control-knob {
8286
transform: translate(
83-
$toggle-control-width - $toggle-control-knob-size -
84-
$toggle-control-knob-margin,
87+
calc($toggle-control-width - $toggle-control-knob-size - $toggle-control-knob-margin),
8588
$toggle-control-knob-margin
8689
);
8790
}

‎lib/dialog-renderer/style.scss

+1-4
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,6 @@
11
.dialog-renderer__overlay {
22
position: fixed;
3-
top: 0;
4-
left: 0;
5-
right: 0;
6-
bottom: 0;
3+
inset: 0;
74
display: flex;
85
justify-content: center;
96
align-items: center;

‎lib/dialogs/about/style.scss

+7-2
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
1+
@use '~@automattic/color-studio/dist/color-variables' as *;
2+
@use '../../../scss/variables' as *;
3+
14
.about {
25
.dialog {
36
position: relative;
@@ -12,6 +15,7 @@
1215

1316
background: var(--accent-color) !important;
1417
color: var(--background-color) !important;
18+
1519
a {
1620
color: var(--background-color);
1721
}
@@ -60,10 +64,10 @@
6064
display: flex;
6165
align-items: center;
6266
justify-content: space-between;
63-
border-bottom: 1px solid rgba($studio-white, 0.25);
67+
border-bottom: 1px solid #{rgba($studio-white, 0.2)};
6468

6569
&:first-child {
66-
border-top: 1px solid rgba($studio-white, 0.25);
70+
border-top: 1px solid #{rgba($studio-white, 0.25)};
6771
}
6872
}
6973

@@ -95,6 +99,7 @@
9599
top: 0;
96100
right: 0;
97101
padding: 20px;
102+
border: 0;
98103

99104
& svg,
100105
&:active svg {

‎lib/dialogs/import/source-importer/executor/style.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
.source-importer-executor {
22
display: flex;
33
flex-direction: column;
4-
align-items: space-between;
4+
justify-content: space-between;
55
flex: 1 0 auto;
66

77
.import-progress {

‎lib/dialogs/import/source-importer/style.scss

+3-1
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@
2626
}
2727

2828
.importer-dropzone {
29-
margin: auto 16px 10px 16px;
29+
margin: auto 16px 10px;
3030

3131
.accepted-files-header {
3232
height: 28px;
@@ -50,6 +50,7 @@
5050
}
5151
}
5252
}
53+
5354
p {
5455
padding-left: 16px;
5556
padding-right: 16px;
@@ -63,6 +64,7 @@
6364
padding-right: 16px;
6465
}
6566
}
67+
6668
h3 {
6769
height: 28px;
6870
line-height: 28px;

‎lib/dialogs/share/style.scss

+2
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
@use '../../../scss/variables' as *;
2+
13
.share-collaborators-heading {
24
border-bottom: 1px solid var(--secondary-color);
35
}

‎lib/dialogs/unsynchronized/index.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ export class UnsynchronizedConfirmation extends Component<Props> {
4646
} = this.props;
4747

4848
return (
49-
<div className="logoutConfirmation">
49+
<div className="logout__confirmation">
5050
<Dialog onDone={closeDialog} title="Unsynchronized Notes">
5151
<p className="explanation">
5252
{notes.size > 0 ? description : 'All notes have synchronized!'}

‎lib/dialogs/unsynchronized/style.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
.logoutConfirmation .dialog {
1+
.logout__confirmation .dialog {
22
max-width: 360px;
33

44
.dialog-title-side:first-child {

‎lib/email-verification/style.scss

+3-6
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,6 @@
11
.email-verification__overlay {
22
position: fixed;
3-
top: 0;
4-
left: 0;
5-
right: 0;
6-
bottom: 0;
3+
inset: 0;
74
display: flex;
85
justify-content: center;
96
align-items: center;
@@ -58,14 +55,14 @@
5855
padding-top: 10px;
5956
padding-bottom: 10px;
6057
display: flex;
61-
flex-direction: row;
6258
justify-content: flex-end;
63-
flex-wrap: wrap;
59+
flex-flow: row wrap;
6460
width: 100%;
6561

6662
a {
6763
padding-right: 12px;
6864
}
65+
6966
.button-borderless {
7067
color: var(--accent-color);
7168
}

‎lib/error-boundary/style.scss

+3-2
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515
margin: auto 0;
1616
text-align: center;
1717
}
18+
1819
.error-message__icon {
1920
color: var(--foreground-color);
2021
height: 80px;
@@ -29,12 +30,12 @@
2930

3031
.error-message__heading {
3132
font-size: 36px;
32-
margin: 0 0 0.25em 0;
33+
margin: 0 0 0.25em;
3334
text-align: center;
3435
}
3536

3637
.error-message p {
37-
margin: 0 0 1.67em 0;
38+
margin: 0 0 1.67em;
3839
}
3940

4041
.error-message__action {

0 commit comments

Comments
 (0)