From 7b989fdef91931c38566d4bf5b48facb7d1a880e Mon Sep 17 00:00:00 2001 From: magdalenajadach Date: Tue, 21 Nov 2023 09:02:50 +0000 Subject: [PATCH 1/3] Create draft PR for #773 From 28159c0d318a2d3ba04b311e5eb47c681f7d7fbd Mon Sep 17 00:00:00 2001 From: Magdalena Jadach Date: Thu, 23 Nov 2023 17:37:02 +0000 Subject: [PATCH 2/3] Padding, border fix --- CHANGELOG.md | 3 ++- src/assets/stylesheets/AstroPiModel.scss | 10 ++++---- src/assets/stylesheets/BetaBanner.scss | 5 ++-- src/assets/stylesheets/Dropdown.scss | 20 ++++++++-------- src/assets/stylesheets/EditorPanel.scss | 2 +- src/assets/stylesheets/FontSizeSelector.scss | 2 +- src/assets/stylesheets/ImageUploadButton.scss | 2 +- src/assets/stylesheets/LandingPage.scss | 2 +- src/assets/stylesheets/MobileProject.scss | 16 ++++++------- src/assets/stylesheets/MobileProjectBar.scss | 6 ++--- src/assets/stylesheets/Modal.scss | 8 +++---- src/assets/stylesheets/OutputViewToggle.scss | 4 ++-- src/assets/stylesheets/Project.scss | 8 +++---- src/assets/stylesheets/ProjectBar.scss | 16 ++++++------- src/assets/stylesheets/ProjectImages.scss | 2 +- src/assets/stylesheets/ProjectInfo.scss | 2 +- src/assets/stylesheets/ProjectListItem.scss | 8 +++---- src/assets/stylesheets/ProjectListTable.scss | 6 ++--- src/assets/stylesheets/PythonRunner.scss | 6 ++--- src/assets/stylesheets/RunBar.scss | 7 +++--- src/assets/stylesheets/Sidebar.scss | 5 ++-- src/assets/stylesheets/Tabs.scss | 24 +++++++++---------- src/assets/themes/editorDarkTheme.js | 4 ++-- src/assets/themes/editorLightTheme.js | 4 ++-- 24 files changed, 85 insertions(+), 87 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index caa644d05..d0e8375b3 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -16,9 +16,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), - Instructions Panel for the sidebar (#751, #768) - Added ability to fix the theme in the web component (#757) - Added ability to increase font size in the web component (#757) -- +- ### Changed +- Replace physical properties with logical values - margin (#) - Sidebar - Refactored styles to be closer to designs (#720) - Sidebar - Refactored theming to fix inconsistencies between themes (#720) - Sidebar - Added hover styles to collapse and close buttons (#720) diff --git a/src/assets/stylesheets/AstroPiModel.scss b/src/assets/stylesheets/AstroPiModel.scss index 0b0165fee..a4e1fbbb2 100644 --- a/src/assets/stylesheets/AstroPiModel.scss +++ b/src/assets/stylesheets/AstroPiModel.scss @@ -15,7 +15,7 @@ max-height: 50%; min-height: 200px; flex: 1; - padding-bottom: $space-0-5; + padding-block-end: $space-0-5; canvas { cursor: grab; @@ -83,8 +83,8 @@ flex-flow: column; align-items: center; text-align: center; - padding: $space-0-5; - padding-top: $space-0-25; + padding-inline: $space-0-5; + padding-block-start: $space-0-25; box-sizing: border-box; border-radius: 5px; width: 32%; @@ -189,7 +189,7 @@ background-color: $rpf-grey-800; &-controls { - border-top: 7px solid $rpf-grey-900; + border-block-start: 7px solid $rpf-grey-900; &-panel { &__control { @@ -243,7 +243,7 @@ background-color: $rpf-white; &-controls { - border-top: 5px solid $rpf-grey-100; + border-block-start: 5px solid $rpf-grey-100; &-panel { &__control { diff --git a/src/assets/stylesheets/BetaBanner.scss b/src/assets/stylesheets/BetaBanner.scss index bb5e2a526..c78d366e5 100644 --- a/src/assets/stylesheets/BetaBanner.scss +++ b/src/assets/stylesheets/BetaBanner.scss @@ -32,8 +32,7 @@ .editor-banner__link { display: inline; font-weight: $font-weight-bold; - padding-left: 0; - padding-right: 0; + padding-inline: 0; text-decoration: underline; &.btn--tertiary { @@ -46,7 +45,7 @@ } .editor-banner__link--feedback { - padding-right: $space-0-25; + padding-inline-end: $space-0-25; white-space: nowrap; } diff --git a/src/assets/stylesheets/Dropdown.scss b/src/assets/stylesheets/Dropdown.scss index e61cb009c..1ae21d7f6 100644 --- a/src/assets/stylesheets/Dropdown.scss +++ b/src/assets/stylesheets/Dropdown.scss @@ -1,6 +1,6 @@ -@use './rpf_design_system/spacing' as *; -@use './rpf_design_system/font-weight' as *; -@use './rpf_design_system/colours' as *; +@use "./rpf_design_system/spacing" as *; +@use "./rpf_design_system/font-weight" as *; +@use "./rpf_design_system/colours" as *; .dropdown { display: flex; @@ -16,7 +16,7 @@ padding: 0 $space-1-5; &--active { - border-bottom: 3px solid $rpf-teal-800; + border-block-end: 3px solid $rpf-teal-800; } } @@ -33,13 +33,13 @@ &::before { width: 0; height: 0; - border-left: 15px solid transparent; - border-right: 15px solid transparent; + border-inline-start: 15px solid transparent; + border-inline-end: 15px solid transparent; position: absolute; inset-block-end: 100%; inset-inline-start: 50%; margin-inline-start: -15px; - content: ''; + content: ""; } } @@ -52,7 +52,7 @@ color: inherit; cursor: pointer; font: inherit; - justify-content: left; + justify-content: inline-start; font-weight: $font-weight-regular; text-decoration: none; padding: $space-0-5 $space-0-25; @@ -79,7 +79,7 @@ background-color: $rpf-white; &--bottom::before { - border-bottom: 15px solid $rpf-white; + border-block-end: 15px solid $rpf-white; } &--list__item:hover { @@ -96,7 +96,7 @@ background-color: $rpf-grey-700; &--bottom::before { - border-bottom: 15px solid $rpf-grey-700; + border-block-end: 15px solid $rpf-grey-700; } &--list__item:hover { diff --git a/src/assets/stylesheets/EditorPanel.scss b/src/assets/stylesheets/EditorPanel.scss index bb28d7c2a..d7452bbc3 100644 --- a/src/assets/stylesheets/EditorPanel.scss +++ b/src/assets/stylesheets/EditorPanel.scss @@ -21,7 +21,7 @@ .cm-content { flex: 1; - padding-top: $space-0-5; + padding-block-start: $space-0-5; margin-inline-end: $space-0-5; } } diff --git a/src/assets/stylesheets/FontSizeSelector.scss b/src/assets/stylesheets/FontSizeSelector.scss index bce2c3fd7..63f5ccc1f 100644 --- a/src/assets/stylesheets/FontSizeSelector.scss +++ b/src/assets/stylesheets/FontSizeSelector.scss @@ -35,7 +35,7 @@ font-weight: $font-weight-bold; svg { - padding-right: $space-0-5; + padding-inline-end: $space-0-5; } } diff --git a/src/assets/stylesheets/ImageUploadButton.scss b/src/assets/stylesheets/ImageUploadButton.scss index c8e1e153d..7d26850cf 100644 --- a/src/assets/stylesheets/ImageUploadButton.scss +++ b/src/assets/stylesheets/ImageUploadButton.scss @@ -12,5 +12,5 @@ } .modal-footer { - text-align: right; + text-align: inline-end; } diff --git a/src/assets/stylesheets/LandingPage.scss b/src/assets/stylesheets/LandingPage.scss index 7561ae491..493b573be 100644 --- a/src/assets/stylesheets/LandingPage.scss +++ b/src/assets/stylesheets/LandingPage.scss @@ -65,7 +65,7 @@ @media screen and (min-width: 768px) { align-items: center; display: flex; - text-align: left; + text-align: inline-start; padding: 0 $space-2; max-width: 634px; } diff --git a/src/assets/stylesheets/MobileProject.scss b/src/assets/stylesheets/MobileProject.scss index c183f7944..312a69944 100644 --- a/src/assets/stylesheets/MobileProject.scss +++ b/src/assets/stylesheets/MobileProject.scss @@ -30,7 +30,7 @@ height: $space-4; &:last-of-type { - border-right: none; + border-inline-end: none; } } } @@ -49,16 +49,16 @@ .--dark { .proj-container--mobile { .runner-controls { - border-left: 1px solid $rpf-grey-600; + border-inline-start: 1px solid $rpf-grey-600; } .mobile-nav { background-color: $rpf-grey-800; - border-top: 1px solid $rpf-grey-600; + border-block-start: 1px solid $rpf-grey-600; } .mobile-nav__menu { - border-right: 1px solid $rpf-grey-600; + border-inline-end: 1px solid $rpf-grey-600; } } } @@ -66,16 +66,16 @@ .--light { .proj-container--mobile { .runner-controls { - border-left: 1px solid $rpf-grey-150; + border-inline-start: 1px solid $rpf-grey-150; } .mobile-nav { background-color: $rpf-off-white; - border-top: 1px solid $rpf-grey-150; + border-block-start: 1px solid $rpf-grey-150; } .mobile-nav__menu { - border-right: 1px solid $rpf-grey-150; + border-inline-end: 1px solid $rpf-grey-150; } } } @@ -85,7 +85,7 @@ #wc.--light, #wc.--dark { .mobile-nav { - border-bottom: none; + border-block-end: none; .react-tabs__tab--selected { background-color: inherit; diff --git a/src/assets/stylesheets/MobileProjectBar.scss b/src/assets/stylesheets/MobileProjectBar.scss index aa38aac83..2a8d62ed0 100644 --- a/src/assets/stylesheets/MobileProjectBar.scss +++ b/src/assets/stylesheets/MobileProjectBar.scss @@ -5,7 +5,7 @@ .mobile-project-bar { background-color: $rpf-white; - border-top: 1px solid $rpf-grey-150; + border-block-start: 1px solid $rpf-grey-150; display: flex; height: 25px; justify-content: space-between; @@ -21,7 +21,7 @@ .--dark { .mobile-project-bar { background-color: $rpf-grey-800; - border-top: 1px solid $rpf-grey-600; + border-block-start: 1px solid $rpf-grey-600; } .mobile-project-bar__name { @@ -32,7 +32,7 @@ .--light { .mobile-project-bar { background-color: $rpf-white; - border-top: 1px solid $rpf-grey-150; + border-block-start: 1px solid $rpf-grey-150; } .mobile-project-bar__name { diff --git a/src/assets/stylesheets/Modal.scss b/src/assets/stylesheets/Modal.scss index c06afef81..1c664e62e 100644 --- a/src/assets/stylesheets/Modal.scss +++ b/src/assets/stylesheets/Modal.scss @@ -162,7 +162,7 @@ } .modal-content__header { - border-bottom: 1px solid $rpf-grey-500; + border-block-end: 1px solid $rpf-grey-500; } .modal-content__help-text { @@ -170,7 +170,7 @@ } .modal-content__buttons { - border-top: 1px solid $rpf-grey-500; + border-block-start: 1px solid $rpf-grey-500; } } @@ -193,7 +193,7 @@ } .modal-content__header { - border-bottom: 1px solid $rpf-grey-150; + border-block-end: 1px solid $rpf-grey-150; } .modal-content__help-text { @@ -201,6 +201,6 @@ } .modal-content__buttons { - border-top: 1px solid $rpf-grey-150; + border-block-start: 1px solid $rpf-grey-150; } } diff --git a/src/assets/stylesheets/OutputViewToggle.scss b/src/assets/stylesheets/OutputViewToggle.scss index ace9e3888..835cf920e 100644 --- a/src/assets/stylesheets/OutputViewToggle.scss +++ b/src/assets/stylesheets/OutputViewToggle.scss @@ -6,9 +6,9 @@ } .--light .output-view-toggle { - border-left: 1px solid $rpf-grey-150; + border-inline-start: 1px solid $rpf-grey-150; } .--dark .output-view-toggle { - border-left: 1px solid $rpf-grey-600; + border-inline-start: 1px solid $rpf-grey-600; } diff --git a/src/assets/stylesheets/Project.scss b/src/assets/stylesheets/Project.scss index 7dac1b095..8d83759ff 100644 --- a/src/assets/stylesheets/Project.scss +++ b/src/assets/stylesheets/Project.scss @@ -15,8 +15,7 @@ display: flex; flex: 1 0 auto; justify-content: space-between; - padding-left: 5px; - padding-right: 5px; + padding-inline: 5px; } .editor-controls { @@ -24,12 +23,11 @@ } .proj-controls { - padding-top: 20px; + padding-block-start: 20px; } .proj-share-link { - padding-left: 5px; - padding-right: 5px; + padding-inline: 5px; } .proj-container { diff --git a/src/assets/stylesheets/ProjectBar.scss b/src/assets/stylesheets/ProjectBar.scss index 3a138a174..a47c494ff 100644 --- a/src/assets/stylesheets/ProjectBar.scss +++ b/src/assets/stylesheets/ProjectBar.scss @@ -69,7 +69,7 @@ } .project-bar__btn-wrapper:not(:last-child) { - border-right: 1px solid $rpf-grey-150; + border-inline-end: 1px solid $rpf-grey-150; } } @@ -79,19 +79,19 @@ border: 1px solid $rpf-grey-150; .project-name { - border-right: 1px solid $rpf-grey-150; + border-inline-end: 1px solid $rpf-grey-150; } } .project-bar__right { - border-left: 1px solid $rpf-grey-150; + border-inline-start: 1px solid $rpf-grey-150; .rpf_button { - border-right: 1px solid $rpf-grey-150; + border-inline-end: 1px solid $rpf-grey-150; } .btn--tertiary::after { - border-right: 1px solid $rpf-grey-150; + border-inline-end: 1px solid $rpf-grey-150; } .btn--tertiary:focus-visible::after { @@ -106,18 +106,18 @@ border: 1px solid $rpf-grey-600; .project-name { - border-right: 1px solid $rpf-grey-600; + border-inline-end: 1px solid $rpf-grey-600; } } .project-bar__right { - border-left: 1px solid $rpf-grey-600; + border-inline-start: 1px solid $rpf-grey-600; .project-bar__btn-wrapper:not(:last-child) { border-color: $rpf-grey-600; } .btn--tertiary::after { - border-right: 1px solid $rpf-grey-600; + border-inline-end: 1px solid $rpf-grey-600; } .btn--tertiary:focus-visible::after { diff --git a/src/assets/stylesheets/ProjectImages.scss b/src/assets/stylesheets/ProjectImages.scss index c15dd065d..13ce5e30b 100644 --- a/src/assets/stylesheets/ProjectImages.scss +++ b/src/assets/stylesheets/ProjectImages.scss @@ -12,7 +12,7 @@ overflow-wrap: break-word; word-break: break-word; text-align: center; - vertical-align: top; + vertical-align: block-start; } &__image-wrapper { diff --git a/src/assets/stylesheets/ProjectInfo.scss b/src/assets/stylesheets/ProjectInfo.scss index 24bd13b5d..3406b9cbf 100644 --- a/src/assets/stylesheets/ProjectInfo.scss +++ b/src/assets/stylesheets/ProjectInfo.scss @@ -4,7 +4,7 @@ @use "./rpf_design_system/colours" as *; .project-info { - align-items: left; + align-items: inline-start; display: flex; flex-direction: column; padding: $space-1; diff --git a/src/assets/stylesheets/ProjectListItem.scss b/src/assets/stylesheets/ProjectListItem.scss index 799b1d52a..965ecc816 100644 --- a/src/assets/stylesheets/ProjectListItem.scss +++ b/src/assets/stylesheets/ProjectListItem.scss @@ -32,7 +32,7 @@ $small-table-grid: 600px; &__type { width: 40px; - padding-right: $space-1-5; + padding-inline-end: $space-1-5; } &__name { @@ -42,15 +42,15 @@ $small-table-grid: 600px; } &__tag { - padding-right: $space-0-5; + padding-inline-end: $space-0-5; margin-inline-end: $space-0-5; .--light & { - border-right: 1px $rpf-text-secondary solid; + border-inline-end: 1px $rpf-text-secondary solid; } .--dark & { - border-right: 1px $rpf-text-secondary-darkmode solid; + border-inline-end: 1px $rpf-text-secondary-darkmode solid; } } diff --git a/src/assets/stylesheets/ProjectListTable.scss b/src/assets/stylesheets/ProjectListTable.scss index fa5bdb15a..a493f2ef2 100644 --- a/src/assets/stylesheets/ProjectListTable.scss +++ b/src/assets/stylesheets/ProjectListTable.scss @@ -60,7 +60,7 @@ $small-table-grid: 600px; &__item { align-items: center; display: flex; - border-top: 1px solid $rpf-grey-150; + border-block-start: 1px solid $rpf-grey-150; justify-content: space-between; list-style: none; padding: 0 $space-0-5; @@ -70,11 +70,11 @@ $small-table-grid: 600px; } .--dark & { - border-top: 1px solid $rpf-grey-500; + border-block-start: 1px solid $rpf-grey-500; } &:first-of-type { - border-top: none; + border-block-start: none; } } diff --git a/src/assets/stylesheets/PythonRunner.scss b/src/assets/stylesheets/PythonRunner.scss index e3a82983f..4833a8d9e 100644 --- a/src/assets/stylesheets/PythonRunner.scss +++ b/src/assets/stylesheets/PythonRunner.scss @@ -30,7 +30,7 @@ } .pythonrunner-console-output-line { - padding-right: 5px; + padding-inline-end: 5px; } .pythonrunner-input { @@ -76,11 +76,11 @@ flex: 7; .--light & { - border-bottom: 5px solid $rpf-grey-100; + border-block-end: 5px solid $rpf-grey-100; } .--dark & { - border-bottom: 5px solid $rpf-grey-600; + border-block-end: 5px solid $rpf-grey-600; } } } diff --git a/src/assets/stylesheets/RunBar.scss b/src/assets/stylesheets/RunBar.scss index facbd99b0..9a3c3162f 100644 --- a/src/assets/stylesheets/RunBar.scss +++ b/src/assets/stylesheets/RunBar.scss @@ -1,4 +1,4 @@ -@use './rpf_design_system/colours' as *; +@use "./rpf_design_system/colours" as *; .run-bar { display: flex; @@ -8,13 +8,12 @@ .--light { .run-bar { - border-top: 1px solid $rpf-grey-150; + border-block-start: 1px solid $rpf-grey-150; } } .--dark { .run-bar { - border-top: 1px solid $rpf-grey-600; + border-block-start: 1px solid $rpf-grey-600; } } - diff --git a/src/assets/stylesheets/Sidebar.scss b/src/assets/stylesheets/Sidebar.scss index af1d9490b..d753bab83 100644 --- a/src/assets/stylesheets/Sidebar.scss +++ b/src/assets/stylesheets/Sidebar.scss @@ -2,7 +2,8 @@ @use "./rpf_design_system/font-size" as *; @use "./rpf_design_system/colours" as *; -:root, :host { +:root, +:host { .--light { --sidebar-border: var(--rpf-grey-150); --sidebar-background: var(--rpf-white); @@ -113,7 +114,7 @@ .sidebar__panel-footer { background-color: $rpf-grey-700; - border-top: 1px solid $rpf-grey-600; + border-block-start: 1px solid $rpf-grey-600; } } diff --git a/src/assets/stylesheets/Tabs.scss b/src/assets/stylesheets/Tabs.scss index f51975e5a..ba9b96fb6 100644 --- a/src/assets/stylesheets/Tabs.scss +++ b/src/assets/stylesheets/Tabs.scss @@ -36,14 +36,14 @@ &--selected { border-radius: 0; - padding-top: $space-0-25; + padding-block-start: $space-0-25; &:hover { text-decoration: none; } &:focus-visible { - padding-top: 7px; + padding-block-start: 7px; } } @@ -69,7 +69,7 @@ white-space: nowrap; &--split { - padding-right: 0; + padding-inline-end: 0; } } &__tab-close-btn { @@ -97,7 +97,7 @@ } &__tab-list { - border-bottom: none; + border-block-end: none; box-sizing: border-box; display: flex; overflow-y: hidden; @@ -116,19 +116,19 @@ &.--light { .react-tabs { &__tab-container { - border-bottom: 1px solid $rpf-grey-150; + border-block-end: 1px solid $rpf-grey-150; } &__tab { background-color: $rpf-off-white; - border-right: 1px solid $rpf-grey-150; + border-inline-end: 1px solid $rpf-grey-150; &--selected { background-color: $rpf-white; - border-bottom: 4px solid $rpf-teal-900; + border-block-end: 4px solid $rpf-teal-900; &:focus-visible { - border-bottom: 7px solid $rpf-teal-900; + border-block-end: 7px solid $rpf-teal-900; } } @@ -148,20 +148,20 @@ background-color: $rpf-grey-800; &__tab-container { - border-bottom: 1px solid $rpf-grey-600; + border-block-end: 1px solid $rpf-grey-600; } &__tab { background-color: $rpf-grey-800; - border-right: 1px solid $rpf-grey-600; + border-inline-end: 1px solid $rpf-grey-600; &--selected { color: $rpf-white; background-color: $rpf-grey-700; - border-bottom: 4px solid $rpf-teal-800; + border-block-end: 4px solid $rpf-teal-800; &:focus-visible { - border-bottom: 7px solid $rpf-teal-800; + border-block-end: 7px solid $rpf-teal-800; } } diff --git a/src/assets/themes/editorDarkTheme.js b/src/assets/themes/editorDarkTheme.js index bb497091b..354caff17 100644 --- a/src/assets/themes/editorDarkTheme.js +++ b/src/assets/themes/editorDarkTheme.js @@ -25,10 +25,10 @@ export const editorDarkTheme = EditorView.theme( }, ".cm-line .cm-indentation-marker": { background: "none", - "border-left": "solid grey", + "border-inline-start": "solid grey", "&.active": { background: "none", - "border-left": "solid lightgrey", + "border-inline-start": "solid lightgrey", }, }, ".ͼb": { color: "#FF00A4" }, diff --git a/src/assets/themes/editorLightTheme.js b/src/assets/themes/editorLightTheme.js index bdaf6b39e..de90f2146 100644 --- a/src/assets/themes/editorLightTheme.js +++ b/src/assets/themes/editorLightTheme.js @@ -16,10 +16,10 @@ export const editorLightTheme = EditorView.theme( }, ".cm-line .cm-indentation-marker": { background: "none", - "border-left": "solid lightgrey", + "border-inline-start": "solid lightgrey", "&.active": { background: "none", - "border-left": "solid grey", + "border-inline-start": "solid grey", }, }, }, From 8612961de845ff9eee9298b8da2dbad706106e9c Mon Sep 17 00:00:00 2001 From: Magdalena Jadach Date: Fri, 24 Nov 2023 10:07:01 +0000 Subject: [PATCH 3/3] Fix issue with padding --- src/assets/stylesheets/App.scss | 2 +- src/assets/stylesheets/AstroPiModel.scss | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/assets/stylesheets/App.scss b/src/assets/stylesheets/App.scss index f8d9be0bf..5196daf41 100644 --- a/src/assets/stylesheets/App.scss +++ b/src/assets/stylesheets/App.scss @@ -77,7 +77,7 @@ body, scrollbar-width: none; /* Remove scroll bar for Firefox */ } -// Remove scrollbar for Chrome, Safari and Opera +/* Remove scrollbar for Chrome, Safari and Opera */ ::-webkit-scrollbar { display: none; } diff --git a/src/assets/stylesheets/AstroPiModel.scss b/src/assets/stylesheets/AstroPiModel.scss index a4e1fbbb2..4c17efec0 100644 --- a/src/assets/stylesheets/AstroPiModel.scss +++ b/src/assets/stylesheets/AstroPiModel.scss @@ -83,8 +83,8 @@ flex-flow: column; align-items: center; text-align: center; + padding-block: $space-0-25 $space-0-5; padding-inline: $space-0-5; - padding-block-start: $space-0-25; box-sizing: border-box; border-radius: 5px; width: 32%;