Skip to content

Commit f11ec30

Browse files
create-issue-branch[bot]magdalenajadachMagdalena Jadach
authored
Accessibility: replace padding values with logical properties (#774)
closes #773 --------- Co-authored-by: magdalenajadach <[email protected]> Co-authored-by: Magdalena Jadach <[email protected]>
1 parent 9a994ee commit f11ec30

25 files changed

+85
-87
lines changed

‎CHANGELOG.md

+1
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
2222

2323
### Changed
2424

25+
- Replace physical properties with logical values - padding (#774)
2526
- Sidebar - Refactored styles to be closer to designs (#720)
2627
- Sidebar - Refactored theming to fix inconsistencies between themes (#720)
2728
- Sidebar - Added hover styles to collapse and close buttons (#720)

‎src/assets/stylesheets/App.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,7 @@ body,
7777
scrollbar-width: none; /* Remove scroll bar for Firefox */
7878
}
7979

80-
// Remove scrollbar for Chrome, Safari and Opera
80+
/* Remove scrollbar for Chrome, Safari and Opera */
8181
::-webkit-scrollbar {
8282
display: none;
8383
}

‎src/assets/stylesheets/AstroPiModel.scss

+5-5
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
max-height: 50%;
1616
min-height: 200px;
1717
flex: 1;
18-
padding-bottom: $space-0-5;
18+
padding-block-end: $space-0-5;
1919

2020
canvas {
2121
cursor: grab;
@@ -83,8 +83,8 @@
8383
flex-flow: column;
8484
align-items: center;
8585
text-align: center;
86-
padding: $space-0-5;
87-
padding-top: $space-0-25;
86+
padding-block: $space-0-25 $space-0-5;
87+
padding-inline: $space-0-5;
8888
box-sizing: border-box;
8989
border-radius: 5px;
9090
width: 32%;
@@ -189,7 +189,7 @@
189189
background-color: $rpf-grey-800;
190190

191191
&-controls {
192-
border-top: 7px solid $rpf-grey-900;
192+
border-block-start: 7px solid $rpf-grey-900;
193193

194194
&-panel {
195195
&__control {
@@ -243,7 +243,7 @@
243243
background-color: $rpf-white;
244244

245245
&-controls {
246-
border-top: 5px solid $rpf-grey-100;
246+
border-block-start: 5px solid $rpf-grey-100;
247247

248248
&-panel {
249249
&__control {

‎src/assets/stylesheets/BetaBanner.scss

+2-3
Original file line numberDiff line numberDiff line change
@@ -32,8 +32,7 @@
3232
.editor-banner__link {
3333
display: inline;
3434
font-weight: $font-weight-bold;
35-
padding-left: 0;
36-
padding-right: 0;
35+
padding-inline: 0;
3736
text-decoration: underline;
3837

3938
&.btn--tertiary {
@@ -46,7 +45,7 @@
4645
}
4746

4847
.editor-banner__link--feedback {
49-
padding-right: $space-0-25;
48+
padding-inline-end: $space-0-25;
5049
white-space: nowrap;
5150
}
5251

‎src/assets/stylesheets/Dropdown.scss

+10-10
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
@use './rpf_design_system/spacing' as *;
2-
@use './rpf_design_system/font-weight' as *;
3-
@use './rpf_design_system/colours' as *;
1+
@use "./rpf_design_system/spacing" as *;
2+
@use "./rpf_design_system/font-weight" as *;
3+
@use "./rpf_design_system/colours" as *;
44

55
.dropdown {
66
display: flex;
@@ -16,7 +16,7 @@
1616
padding: 0 $space-1-5;
1717

1818
&--active {
19-
border-bottom: 3px solid $rpf-teal-800;
19+
border-block-end: 3px solid $rpf-teal-800;
2020
}
2121
}
2222

@@ -33,13 +33,13 @@
3333
&::before {
3434
width: 0;
3535
height: 0;
36-
border-left: 15px solid transparent;
37-
border-right: 15px solid transparent;
36+
border-inline-start: 15px solid transparent;
37+
border-inline-end: 15px solid transparent;
3838
position: absolute;
3939
inset-block-end: 100%;
4040
inset-inline-start: 50%;
4141
margin-inline-start: -15px;
42-
content: '';
42+
content: "";
4343
}
4444
}
4545

@@ -52,7 +52,7 @@
5252
color: inherit;
5353
cursor: pointer;
5454
font: inherit;
55-
justify-content: left;
55+
justify-content: inline-start;
5656
font-weight: $font-weight-regular;
5757
text-decoration: none;
5858
padding: $space-0-5 $space-0-25;
@@ -79,7 +79,7 @@
7979
background-color: $rpf-white;
8080

8181
&--bottom::before {
82-
border-bottom: 15px solid $rpf-white;
82+
border-block-end: 15px solid $rpf-white;
8383
}
8484

8585
&--list__item:hover {
@@ -96,7 +96,7 @@
9696
background-color: $rpf-grey-700;
9797

9898
&--bottom::before {
99-
border-bottom: 15px solid $rpf-grey-700;
99+
border-block-end: 15px solid $rpf-grey-700;
100100
}
101101

102102
&--list__item:hover {

‎src/assets/stylesheets/EditorPanel.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121

2222
.cm-content {
2323
flex: 1;
24-
padding-top: $space-0-5;
24+
padding-block-start: $space-0-5;
2525
margin-inline-end: $space-0-5;
2626
}
2727
}

‎src/assets/stylesheets/FontSizeSelector.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@
3535
font-weight: $font-weight-bold;
3636

3737
svg {
38-
padding-right: $space-0-5;
38+
padding-inline-end: $space-0-5;
3939
}
4040
}
4141

‎src/assets/stylesheets/ImageUploadButton.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -12,5 +12,5 @@
1212
}
1313

1414
.modal-footer {
15-
text-align: right;
15+
text-align: inline-end;
1616
}

‎src/assets/stylesheets/LandingPage.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,7 @@
6565
@media screen and (min-width: 768px) {
6666
align-items: center;
6767
display: flex;
68-
text-align: left;
68+
text-align: inline-start;
6969
padding: 0 $space-2;
7070
max-width: 634px;
7171
}

‎src/assets/stylesheets/MobileProject.scss

+8-8
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@
3030
height: $space-4;
3131

3232
&:last-of-type {
33-
border-right: none;
33+
border-inline-end: none;
3434
}
3535
}
3636
}
@@ -49,33 +49,33 @@
4949
.--dark {
5050
.proj-container--mobile {
5151
.runner-controls {
52-
border-left: 1px solid $rpf-grey-600;
52+
border-inline-start: 1px solid $rpf-grey-600;
5353
}
5454

5555
.mobile-nav {
5656
background-color: $rpf-grey-800;
57-
border-top: 1px solid $rpf-grey-600;
57+
border-block-start: 1px solid $rpf-grey-600;
5858
}
5959

6060
.mobile-nav__menu {
61-
border-right: 1px solid $rpf-grey-600;
61+
border-inline-end: 1px solid $rpf-grey-600;
6262
}
6363
}
6464
}
6565

6666
.--light {
6767
.proj-container--mobile {
6868
.runner-controls {
69-
border-left: 1px solid $rpf-grey-150;
69+
border-inline-start: 1px solid $rpf-grey-150;
7070
}
7171

7272
.mobile-nav {
7373
background-color: $rpf-off-white;
74-
border-top: 1px solid $rpf-grey-150;
74+
border-block-start: 1px solid $rpf-grey-150;
7575
}
7676

7777
.mobile-nav__menu {
78-
border-right: 1px solid $rpf-grey-150;
78+
border-inline-end: 1px solid $rpf-grey-150;
7979
}
8080
}
8181
}
@@ -85,7 +85,7 @@
8585
#wc.--light,
8686
#wc.--dark {
8787
.mobile-nav {
88-
border-bottom: none;
88+
border-block-end: none;
8989

9090
.react-tabs__tab--selected {
9191
background-color: inherit;

‎src/assets/stylesheets/MobileProjectBar.scss

+3-3
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55

66
.mobile-project-bar {
77
background-color: $rpf-white;
8-
border-top: 1px solid $rpf-grey-150;
8+
border-block-start: 1px solid $rpf-grey-150;
99
display: flex;
1010
height: 25px;
1111
justify-content: space-between;
@@ -21,7 +21,7 @@
2121
.--dark {
2222
.mobile-project-bar {
2323
background-color: $rpf-grey-800;
24-
border-top: 1px solid $rpf-grey-600;
24+
border-block-start: 1px solid $rpf-grey-600;
2525
}
2626

2727
.mobile-project-bar__name {
@@ -32,7 +32,7 @@
3232
.--light {
3333
.mobile-project-bar {
3434
background-color: $rpf-white;
35-
border-top: 1px solid $rpf-grey-150;
35+
border-block-start: 1px solid $rpf-grey-150;
3636
}
3737

3838
.mobile-project-bar__name {

‎src/assets/stylesheets/Modal.scss

+4-4
Original file line numberDiff line numberDiff line change
@@ -162,15 +162,15 @@
162162
}
163163

164164
.modal-content__header {
165-
border-bottom: 1px solid $rpf-grey-500;
165+
border-block-end: 1px solid $rpf-grey-500;
166166
}
167167

168168
.modal-content__help-text {
169169
color: $rpf-text-secondary-darkmode;
170170
}
171171

172172
.modal-content__buttons {
173-
border-top: 1px solid $rpf-grey-500;
173+
border-block-start: 1px solid $rpf-grey-500;
174174
}
175175
}
176176

@@ -193,14 +193,14 @@
193193
}
194194

195195
.modal-content__header {
196-
border-bottom: 1px solid $rpf-grey-150;
196+
border-block-end: 1px solid $rpf-grey-150;
197197
}
198198

199199
.modal-content__help-text {
200200
color: $rpf-text-secondary;
201201
}
202202

203203
.modal-content__buttons {
204-
border-top: 1px solid $rpf-grey-150;
204+
border-block-start: 1px solid $rpf-grey-150;
205205
}
206206
}

‎src/assets/stylesheets/OutputViewToggle.scss

+2-2
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,9 @@
66
}
77

88
.--light .output-view-toggle {
9-
border-left: 1px solid $rpf-grey-150;
9+
border-inline-start: 1px solid $rpf-grey-150;
1010
}
1111

1212
.--dark .output-view-toggle {
13-
border-left: 1px solid $rpf-grey-600;
13+
border-inline-start: 1px solid $rpf-grey-600;
1414
}

‎src/assets/stylesheets/Project.scss

+3-5
Original file line numberDiff line numberDiff line change
@@ -15,21 +15,19 @@
1515
display: flex;
1616
flex: 1 0 auto;
1717
justify-content: space-between;
18-
padding-left: 5px;
19-
padding-right: 5px;
18+
padding-inline: 5px;
2019
}
2120

2221
.editor-controls {
2322
display: flex;
2423
}
2524

2625
.proj-controls {
27-
padding-top: 20px;
26+
padding-block-start: 20px;
2827
}
2928

3029
.proj-share-link {
31-
padding-left: 5px;
32-
padding-right: 5px;
30+
padding-inline: 5px;
3331
}
3432

3533
.proj-container {

‎src/assets/stylesheets/ProjectBar.scss

+8-8
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,7 @@
6969
}
7070

7171
.project-bar__btn-wrapper:not(:last-child) {
72-
border-right: 1px solid $rpf-grey-150;
72+
border-inline-end: 1px solid $rpf-grey-150;
7373
}
7474
}
7575

@@ -79,19 +79,19 @@
7979
border: 1px solid $rpf-grey-150;
8080

8181
.project-name {
82-
border-right: 1px solid $rpf-grey-150;
82+
border-inline-end: 1px solid $rpf-grey-150;
8383
}
8484
}
8585

8686
.project-bar__right {
87-
border-left: 1px solid $rpf-grey-150;
87+
border-inline-start: 1px solid $rpf-grey-150;
8888

8989
.rpf_button {
90-
border-right: 1px solid $rpf-grey-150;
90+
border-inline-end: 1px solid $rpf-grey-150;
9191
}
9292

9393
.btn--tertiary::after {
94-
border-right: 1px solid $rpf-grey-150;
94+
border-inline-end: 1px solid $rpf-grey-150;
9595
}
9696

9797
.btn--tertiary:focus-visible::after {
@@ -106,18 +106,18 @@
106106
border: 1px solid $rpf-grey-600;
107107

108108
.project-name {
109-
border-right: 1px solid $rpf-grey-600;
109+
border-inline-end: 1px solid $rpf-grey-600;
110110
}
111111
}
112112
.project-bar__right {
113-
border-left: 1px solid $rpf-grey-600;
113+
border-inline-start: 1px solid $rpf-grey-600;
114114

115115
.project-bar__btn-wrapper:not(:last-child) {
116116
border-color: $rpf-grey-600;
117117
}
118118

119119
.btn--tertiary::after {
120-
border-right: 1px solid $rpf-grey-600;
120+
border-inline-end: 1px solid $rpf-grey-600;
121121
}
122122

123123
.btn--tertiary:focus-visible::after {

‎src/assets/stylesheets/ProjectImages.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
overflow-wrap: break-word;
1313
word-break: break-word;
1414
text-align: center;
15-
vertical-align: top;
15+
vertical-align: block-start;
1616
}
1717

1818
&__image-wrapper {

0 commit comments

Comments
 (0)