From babbd45db1b34ed41e4f049c052ca3d4269ead52 Mon Sep 17 00:00:00 2001 From: magdalenajadach Date: Mon, 23 Oct 2023 07:50:19 +0000 Subject: [PATCH 01/10] Create draft PR for #716 From d2cc4ed1169e4f3deef3a4f2f9777b1d04e425c6 Mon Sep 17 00:00:00 2001 From: Magdalena Jadach Date: Mon, 23 Oct 2023 08:53:59 +0100 Subject: [PATCH 02/10] margin top, bottom, left, right replaced with logical values --- docker-compose.yml | 4 ++-- src/assets/stylesheets/AstroPiModel.scss | 12 ++++++------ src/assets/stylesheets/BetaBanner.scss | 6 +++--- src/assets/stylesheets/ContextMenu.scss | 2 +- src/assets/stylesheets/Dropdown.scss | 4 ++-- src/assets/stylesheets/EditorPanel.scss | 4 ++-- src/assets/stylesheets/FontSizeSelector.scss | 2 +- src/assets/stylesheets/GlobalNav.scss | 10 +++++----- src/assets/stylesheets/HtmlRunner.scss | 2 +- src/assets/stylesheets/InfoPanel.scss | 6 +++--- src/assets/stylesheets/LandingPage.scss | 4 ++-- src/assets/stylesheets/Modal.scss | 4 ++-- src/assets/stylesheets/Project.scss | 4 ++-- src/assets/stylesheets/ProjectBar.scss | 2 +- src/assets/stylesheets/ProjectIndexHeader.scss | 4 ++-- src/assets/stylesheets/ProjectIndexPagination.scss | 2 +- src/assets/stylesheets/ProjectInfo.scss | 2 +- src/assets/stylesheets/ProjectListItem.scss | 4 ++-- src/assets/stylesheets/ProjectListTable.scss | 2 +- src/assets/stylesheets/ProjectName.scss | 2 +- src/assets/stylesheets/ProjectsPanel.scss | 4 ++-- src/assets/stylesheets/SelectButtons.scss | 4 ++-- src/assets/stylesheets/SettingsPanel.scss | 2 +- src/assets/stylesheets/Sidebar.scss | 2 +- src/assets/stylesheets/ThemeToggle.scss | 2 +- storybook/stories/docs/Introduction.stories.mdx | 14 +++++++------- 26 files changed, 55 insertions(+), 55 deletions(-) diff --git a/docker-compose.yml b/docker-compose.yml index b0f9148a5..b9f23e235 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -17,13 +17,13 @@ services: <<: *x-app command: yarn start ports: - - "3000:3000" + - "3010:3000" container_name: react-ui react-ui-wc: <<: *x-app command: yarn start:wc ports: - - "3001:3001" + - "3011:3001" container_name: react-ui-wc secrets: npmrc: diff --git a/src/assets/stylesheets/AstroPiModel.scss b/src/assets/stylesheets/AstroPiModel.scss index 64a6c8df0..8102e5311 100644 --- a/src/assets/stylesheets/AstroPiModel.scss +++ b/src/assets/stylesheets/AstroPiModel.scss @@ -48,7 +48,7 @@ &__reset-btn { flex: 1; display: flex; - margin-left: auto; + margin-inline-start: auto; svg { padding: $space-0-5; border-radius: 5px; @@ -70,7 +70,7 @@ @include font-size-1(regular); font-weight: $font-weight-regular; margin: 0; - margin-bottom: $space-0-5; + margin-block-end: $space-0-5; } &-panel { @@ -93,7 +93,7 @@ &-reading { width: 100%; border-radius: 5px; - margin-top: $space-0-25; + margin-block-start: $space-0-25; padding: $space-0-25; box-sizing: border-box; display: flex; @@ -103,7 +103,7 @@ monospace; &-timer { - margin-top: 0; + margin-block-start: 0; padding: $space-0-5 0; width: 100%; } @@ -143,11 +143,11 @@ } &-value { - margin-left: $space-0-25; + margin-inline-start: $space-0-25; } &-last { - margin-top: $space-0-5; + margin-block-start: $space-0-5; flex-flow: row; width: 100%; align-items: inherit; diff --git a/src/assets/stylesheets/BetaBanner.scss b/src/assets/stylesheets/BetaBanner.scss index b9b997656..bb5e2a526 100644 --- a/src/assets/stylesheets/BetaBanner.scss +++ b/src/assets/stylesheets/BetaBanner.scss @@ -21,7 +21,7 @@ border-radius: 8px; background-color: $rpf-teal-200; font-weight: $font-weight-bold; - margin-right: $space-1-5; + margin-inline-end: $space-1-5; } } @@ -51,12 +51,12 @@ } .editor-banner__close-button { - margin-left: auto; + margin-inline-start: auto; &.btn--tertiary { svg { fill: $rpf-text-primary; - margin-right: 0; + margin-inline-end: 0; } &:hover { diff --git a/src/assets/stylesheets/ContextMenu.scss b/src/assets/stylesheets/ContextMenu.scss index 108d369e7..a78f214ea 100644 --- a/src/assets/stylesheets/ContextMenu.scss +++ b/src/assets/stylesheets/ContextMenu.scss @@ -15,7 +15,7 @@ list-style-type: none; margin: 0; padding: 0; - margin-left: $space-0-5; + margin-inline-start: $space-0-5; border-radius: 5px; display: flex; flex-direction: column; diff --git a/src/assets/stylesheets/Dropdown.scss b/src/assets/stylesheets/Dropdown.scss index d737a91f2..e61cb009c 100644 --- a/src/assets/stylesheets/Dropdown.scss +++ b/src/assets/stylesheets/Dropdown.scss @@ -25,7 +25,7 @@ position: absolute; padding: $space-0-5; border-radius: 10px; - margin-top: $space-1-5; + margin-block-start: $space-1-5; &--bottom { inset-block-start: 100%; @@ -38,7 +38,7 @@ position: absolute; inset-block-end: 100%; inset-inline-start: 50%; - margin-left: -15px; + margin-inline-start: -15px; content: ''; } } diff --git a/src/assets/stylesheets/EditorPanel.scss b/src/assets/stylesheets/EditorPanel.scss index ed4fc2839..bb28d7c2a 100644 --- a/src/assets/stylesheets/EditorPanel.scss +++ b/src/assets/stylesheets/EditorPanel.scss @@ -22,11 +22,11 @@ .cm-content { flex: 1; padding-top: $space-0-5; - margin-right: $space-0-5; + margin-inline-end: $space-0-5; } } } - + &--small { @include font-size-1(regular); } diff --git a/src/assets/stylesheets/FontSizeSelector.scss b/src/assets/stylesheets/FontSizeSelector.scss index 2379487be..bce2c3fd7 100644 --- a/src/assets/stylesheets/FontSizeSelector.scss +++ b/src/assets/stylesheets/FontSizeSelector.scss @@ -12,7 +12,7 @@ border-radius: 5px; display: block; width: 100%; - margin-bottom: $space-0-75; + margin-block-end: $space-0-75; color: inherit; .--dark & { diff --git a/src/assets/stylesheets/GlobalNav.scss b/src/assets/stylesheets/GlobalNav.scss index 69d9fe7c0..50cd97a3f 100644 --- a/src/assets/stylesheets/GlobalNav.scss +++ b/src/assets/stylesheets/GlobalNav.scss @@ -16,8 +16,8 @@ z-index: 2; &__account { - margin-left: auto; - margin-right: $space-2; + margin-inline-start: auto; + margin-inline-end: $space-2; height: 100%; svg { @@ -44,14 +44,14 @@ &__home { display: flex; align-items: center; - margin-left: $space-2; + margin-inline-start: $space-2; padding: $space-0-5 0; font-weight: $font-weight-bold; text-decoration: none; color: $rpf-white; span { - margin-left: $space-1-5; + margin-inline-start: $space-1-5; } &:visited { @@ -59,7 +59,7 @@ } @include md-width { - margin-left: $space-3; + margin-inline-start: $space-3; } } } diff --git a/src/assets/stylesheets/HtmlRunner.scss b/src/assets/stylesheets/HtmlRunner.scss index 8d8ac9542..fd84a8ba6 100644 --- a/src/assets/stylesheets/HtmlRunner.scss +++ b/src/assets/stylesheets/HtmlRunner.scss @@ -9,7 +9,7 @@ } .htmlrunner-link { - margin-left: auto; + margin-inline-start: auto; } .htmlrunner-link__text { diff --git a/src/assets/stylesheets/InfoPanel.scss b/src/assets/stylesheets/InfoPanel.scss index 4f19cdff3..57e3376f0 100644 --- a/src/assets/stylesheets/InfoPanel.scss +++ b/src/assets/stylesheets/InfoPanel.scss @@ -6,7 +6,7 @@ .info-panel { border-radius: $space-0-5; padding: $space-1; - margin-bottom: $space-0-5; + margin-block-end: $space-0-5; p { margin: 0; @@ -26,7 +26,7 @@ .info-panel__link { &:last-of-type { - margin-bottom: $space-1; + margin-block-end: $space-1; } } @@ -35,7 +35,7 @@ color: $rpf-text-primary-darkmode; background-color: $rpf-grey-600; } - + .info-panel__links a { color: $rpf-text-primary-darkmode; } diff --git a/src/assets/stylesheets/LandingPage.scss b/src/assets/stylesheets/LandingPage.scss index c6fefd468..5a79bf84c 100644 --- a/src/assets/stylesheets/LandingPage.scss +++ b/src/assets/stylesheets/LandingPage.scss @@ -110,7 +110,7 @@ } .landing-page__paths-media { - margin-bottom: -2px; + margin-block-end: -2px; img { aspect-ratio: 3/2; @@ -121,7 +121,7 @@ } @media screen and (min-width: 768px) { - margin-left: auto; + margin-inline-start: auto; img { margin: unset; diff --git a/src/assets/stylesheets/Modal.scss b/src/assets/stylesheets/Modal.scss index f30efc18a..a0e3ce24e 100644 --- a/src/assets/stylesheets/Modal.scss +++ b/src/assets/stylesheets/Modal.scss @@ -51,7 +51,7 @@ padding: $space-1 $space-0-5 $space-1 $space-1; button { - margin-left: auto; + margin-inline-start: auto; height: fit-content; } } @@ -126,7 +126,7 @@ .modal-content__links { text-align: center; margin: $space-0-5 0 $space-0-25 0; - + button { text-decoration: underline; } diff --git a/src/assets/stylesheets/Project.scss b/src/assets/stylesheets/Project.scss index f6e2361c2..93cfbd317 100644 --- a/src/assets/stylesheets/Project.scss +++ b/src/assets/stylesheets/Project.scss @@ -127,8 +127,8 @@ .react-tabs__tab-container { .btn--run, .btn--stop { - margin-top: 0; - margin-bottom: 0; + margin-block-start: 0; + margin-block-end: 0; } } diff --git a/src/assets/stylesheets/ProjectBar.scss b/src/assets/stylesheets/ProjectBar.scss index 9d11884f8..5d8e28f5c 100644 --- a/src/assets/stylesheets/ProjectBar.scss +++ b/src/assets/stylesheets/ProjectBar.scss @@ -37,7 +37,7 @@ } &__right { - margin-left: auto; + margin-inline-start: auto; display: flex; align-items: center; height: 100%; diff --git a/src/assets/stylesheets/ProjectIndexHeader.scss b/src/assets/stylesheets/ProjectIndexHeader.scss index 545736308..b9a5b2fa2 100644 --- a/src/assets/stylesheets/ProjectIndexHeader.scss +++ b/src/assets/stylesheets/ProjectIndexHeader.scss @@ -30,13 +30,13 @@ h3 { @include md-width { - margin-bottom: 0; + margin-block-end: 0; } } &__action { @include md-width { - margin-left: auto; + margin-inline-start: auto; } .btn { diff --git a/src/assets/stylesheets/ProjectIndexPagination.scss b/src/assets/stylesheets/ProjectIndexPagination.scss index 009fed7cf..a47b9ad37 100644 --- a/src/assets/stylesheets/ProjectIndexPagination.scss +++ b/src/assets/stylesheets/ProjectIndexPagination.scss @@ -6,7 +6,7 @@ display: flex; justify-content: center; align-items: center; - margin-bottom: $space-2-5; + margin-block-end: $space-2-5; svg { margin: 0; } diff --git a/src/assets/stylesheets/ProjectInfo.scss b/src/assets/stylesheets/ProjectInfo.scss index e655c1922..c5a187d77 100644 --- a/src/assets/stylesheets/ProjectInfo.scss +++ b/src/assets/stylesheets/ProjectInfo.scss @@ -20,7 +20,7 @@ .project-type__label { @include font-size-1(regular); font-weight: $font-weight-bold; - margin-bottom: $space-0-5; + margin-block-end: $space-0-5; display: block; } diff --git a/src/assets/stylesheets/ProjectListItem.scss b/src/assets/stylesheets/ProjectListItem.scss index bdf7b0c08..cb5ff6bef 100644 --- a/src/assets/stylesheets/ProjectListItem.scss +++ b/src/assets/stylesheets/ProjectListItem.scss @@ -44,7 +44,7 @@ $small-table-grid: 600px; &__tag { padding-right: $space-0-5; - margin-right: $space-0-5; + margin-inline-end: $space-0-5; .--light & { border-right: 1px $rpf-text-secondary solid; @@ -114,7 +114,7 @@ $small-table-grid: 600px; &:active { color: $rpf-teal-900; } - + &:hover { color: $rpf-grey-600; } diff --git a/src/assets/stylesheets/ProjectListTable.scss b/src/assets/stylesheets/ProjectListTable.scss index 72db66430..ca4c2c20d 100644 --- a/src/assets/stylesheets/ProjectListTable.scss +++ b/src/assets/stylesheets/ProjectListTable.scss @@ -40,7 +40,7 @@ $small-table-grid: 600px; } &__heading { - margin-top: $space-0-25; + margin-block-start: $space-0-25; } &__heading:first-of-type { diff --git a/src/assets/stylesheets/ProjectName.scss b/src/assets/stylesheets/ProjectName.scss index ed3a65e9b..eaf49a5d7 100644 --- a/src/assets/stylesheets/ProjectName.scss +++ b/src/assets/stylesheets/ProjectName.scss @@ -17,7 +17,7 @@ .project-name__label { @include font-size-1(regular); font-weight: $font-weight-bold; - margin-bottom: $space-0-5; + margin-block-end: $space-0-5; display: block; } diff --git a/src/assets/stylesheets/ProjectsPanel.scss b/src/assets/stylesheets/ProjectsPanel.scss index f41ef95ae..1f1cef3f5 100644 --- a/src/assets/stylesheets/ProjectsPanel.scss +++ b/src/assets/stylesheets/ProjectsPanel.scss @@ -41,7 +41,7 @@ } .projects-panel__item { - margin-bottom: $space-1; + margin-block-end: $space-1; } .projects-panel__save, .projects-panel__button { @@ -52,7 +52,7 @@ .projects-panel__save-button { width: 100%; - margin-bottom: $space-1; + margin-block-end: $space-1; justify-content: center; .icon { diff --git a/src/assets/stylesheets/SelectButtons.scss b/src/assets/stylesheets/SelectButtons.scss index 62821f2fc..2ffa5580e 100644 --- a/src/assets/stylesheets/SelectButtons.scss +++ b/src/assets/stylesheets/SelectButtons.scss @@ -10,7 +10,7 @@ .select-buttons__legend { padding: 0; - margin-bottom: $space-1; + margin-block-end: $space-1; } .select-buttons__options { @@ -42,7 +42,7 @@ .select-buttons__tick { display: flex; align-items: center; - margin-left: auto; + margin-inline-start: auto; visibility: hidden; } diff --git a/src/assets/stylesheets/SettingsPanel.scss b/src/assets/stylesheets/SettingsPanel.scss index af518d9a5..2616217d6 100644 --- a/src/assets/stylesheets/SettingsPanel.scss +++ b/src/assets/stylesheets/SettingsPanel.scss @@ -6,7 +6,7 @@ .settings-panel { font-family: sans-serif; padding: $space-0-5; - margin-bottom: $space-0-5; + margin-block-end: $space-0-5; display: flex; flex-direction: column; gap: $space-0-5; diff --git a/src/assets/stylesheets/Sidebar.scss b/src/assets/stylesheets/Sidebar.scss index 78f8b3c4d..e70570d04 100644 --- a/src/assets/stylesheets/Sidebar.scss +++ b/src/assets/stylesheets/Sidebar.scss @@ -59,7 +59,7 @@ padding: $space-1 0; overflow-y: scroll; scrollbar-width: none; - margin-bottom: $space-2; + margin-block-end: $space-2; } .sidebar__bar-option-wrapper { diff --git a/src/assets/stylesheets/ThemeToggle.scss b/src/assets/stylesheets/ThemeToggle.scss index 8c1b407e3..89851d46e 100644 --- a/src/assets/stylesheets/ThemeToggle.scss +++ b/src/assets/stylesheets/ThemeToggle.scss @@ -14,7 +14,7 @@ color: inherit; display: block; width: 100%; - margin-bottom: $space-0-75; + margin-block-end: $space-0-75; .--dark & { outline: 2px solid $rpf-grey-500; diff --git a/storybook/stories/docs/Introduction.stories.mdx b/storybook/stories/docs/Introduction.stories.mdx index edc33ed69..981a17dd0 100644 --- a/storybook/stories/docs/Introduction.stories.mdx +++ b/storybook/stories/docs/Introduction.stories.mdx @@ -20,8 +20,8 @@ import StackAlt from './assets/stackalt.svg'; letter-spacing: 6px; line-height: 24px; text-transform: uppercase; - margin-bottom: 12px; - margin-top: 40px; + margin-block-end: 12px; + margin-block-start: 40px; } .link-list { @@ -72,13 +72,13 @@ import StackAlt from './assets/stackalt.svg'; .link-item strong { font-weight: 700; display: block; - margin-bottom: 2px; + margin-block-end: 2px; } .link-item img { height: 40px; width: 40px; - margin-right: 15px; + margin-inline-end: 15px; flex: none; } @@ -96,15 +96,15 @@ import StackAlt from './assets/stackalt.svg'; background: #E7FDD8; color: #66BF3C; padding: 4px 12px; - margin-right: 10px; + margin-inline-end: 10px; vertical-align: top; } .tip-wrapper { font-size: 13px; line-height: 20px; - margin-top: 40px; - margin-bottom: 40px; + margin-block-start: 40px; + margin-block-end: 40px; } .tip-wrapper code { From 8619c6c53cfb8824f2c720e67f0f84504d7e07ad Mon Sep 17 00:00:00 2001 From: Magdalena Jadach Date: Mon, 23 Oct 2023 09:51:35 +0100 Subject: [PATCH 03/10] Margin replacment --- src/assets/stylesheets/AstroPiModel.scss | 4 +-- src/assets/stylesheets/Button.scss | 10 +++--- src/assets/stylesheets/ContextMenu.scss | 18 ++++++---- src/assets/stylesheets/ErrorMessage.scss | 9 ++--- src/assets/stylesheets/FilePanel.scss | 15 +++++---- src/assets/stylesheets/MobileProject.scss | 12 ++++--- src/assets/stylesheets/Modal.scss | 33 +++++++++++-------- .../stylesheets/NewComponentButton.scss | 3 +- src/assets/stylesheets/Notifications.scss | 18 +++++----- src/assets/stylesheets/ProjectImages.scss | 7 ++-- .../stylesheets/ProjectIndexHeader.scss | 9 ++--- .../stylesheets/ProjectIndexPagination.scss | 14 ++++---- src/assets/stylesheets/ProjectListItem.scss | 17 +++++----- src/assets/stylesheets/ProjectListTable.scss | 14 ++++---- src/assets/stylesheets/ProjectName.scss | 11 ++++--- src/assets/stylesheets/ProjectsPanel.scss | 15 +++++---- src/assets/stylesheets/PythonRunner.scss | 10 +++--- src/assets/stylesheets/SelectButtons.scss | 9 ++--- src/assets/stylesheets/Sidebar.scss | 18 ++++++---- src/assets/stylesheets/Tabs.scss | 16 +++++---- src/assets/stylesheets/index.scss | 9 ++--- src/web-component.html | 3 +- 22 files changed, 155 insertions(+), 119 deletions(-) diff --git a/src/assets/stylesheets/AstroPiModel.scss b/src/assets/stylesheets/AstroPiModel.scss index 8102e5311..b7e0eec9d 100644 --- a/src/assets/stylesheets/AstroPiModel.scss +++ b/src/assets/stylesheets/AstroPiModel.scss @@ -69,8 +69,8 @@ &-heading { @include font-size-1(regular); font-weight: $font-weight-regular; - margin: 0; - margin-block-end: $space-0-5; + margin-block: 0 $space-0-5; + margin-inline: 0; } &-panel { diff --git a/src/assets/stylesheets/Button.scss b/src/assets/stylesheets/Button.scss index f3a6950f2..a060fb652 100644 --- a/src/assets/stylesheets/Button.scss +++ b/src/assets/stylesheets/Button.scss @@ -27,7 +27,7 @@ &:disabled { background-color: $dis-bg; color: $dis-c; - + svg { fill: $dis-c; } @@ -37,7 +37,7 @@ background-color: $focus-bg; @content; } - + &:hover, .btn-outer:hover & { background-color: $hover-bg; @content; @@ -113,7 +113,8 @@ &--tertiary { $colours: inherit, inherit, inherit, $rpf-grey-600, inherit, inherit, inherit; @include button-styling($colours...); - margin: 0; + margin-block: 0; + margin-inline: 0; &:active { color: $rpf-teal-900; @@ -150,7 +151,8 @@ &--svg-only { svg { - margin: 0; + margin-block: 0; + margin-inline: 0; } } } diff --git a/src/assets/stylesheets/ContextMenu.scss b/src/assets/stylesheets/ContextMenu.scss index a78f214ea..5ff89fcd3 100644 --- a/src/assets/stylesheets/ContextMenu.scss +++ b/src/assets/stylesheets/ContextMenu.scss @@ -1,19 +1,22 @@ -@use './rpf_design_system/spacing' as *; -@use './rpf_design_system/colours' as *; +@use "./rpf_design_system/spacing" as *; +@use "./rpf_design_system/colours" as *; .context-menu__drop { display: flex; padding: $space-0-5 $space-1; - margin: 0; + margin-block: 0; + margin-inline: 0; svg { - margin: 0; + margin-block: 0; + margin-inline: 0; } } .context-menu { list-style-type: none; - margin: 0; + margin-block: 0; + margin-inline: 0; padding: 0; margin-inline-start: $space-0-5; border-radius: 5px; @@ -21,9 +24,10 @@ flex-direction: column; .context-menu__item { - margin: 0; + margin-block: 0; + margin-inline: 0; background-color: inherit; - color: inherit; + color: inherit; padding: $space-0-5; text-align: left; white-space: nowrap; diff --git a/src/assets/stylesheets/ErrorMessage.scss b/src/assets/stylesheets/ErrorMessage.scss index c12a89a05..095a472bd 100644 --- a/src/assets/stylesheets/ErrorMessage.scss +++ b/src/assets/stylesheets/ErrorMessage.scss @@ -1,14 +1,15 @@ -@use './rpf_design_system/font-size' as *; -@use './rpf_design_system/spacing' as *; +@use "./rpf_design_system/font-size" as *; +@use "./rpf_design_system/spacing" as *; .error-message { color: #7e0305; - background-color: #FDE2E1; + background-color: #fde2e1; padding: $space-0-75 $space-1-25; &__content { padding: 0; - margin: 0; + margin-block: 0; + margin-inline: 0; } &--medium { diff --git a/src/assets/stylesheets/FilePanel.scss b/src/assets/stylesheets/FilePanel.scss index d612ad5a5..ee4f20e29 100644 --- a/src/assets/stylesheets/FilePanel.scss +++ b/src/assets/stylesheets/FilePanel.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 *; .files-list-item-wrapper { display: flex; @@ -20,7 +20,8 @@ font-weight: $font-weight-regular; min-height: 44px; padding: $space-0-5 $space-2-5 $space-0-5 $space-0-5; - margin: 0; + margin-block: 0; + margin-inline: 0; span { font-weight: $font-weight-bold; overflow-x: hidden; @@ -35,7 +36,8 @@ } .--light { - .files-list-item, .files-list-item__menu { + .files-list-item, + .files-list-item__menu { &:hover { background-color: $rpf-teal-secondary-tertiary-hover; } @@ -47,7 +49,8 @@ } .--dark { - .files-list-item, .files-list-item__menu { + .files-list-item, + .files-list-item__menu { &:hover { background-color: $rpf-grey-secondary-tertiary-hover; } diff --git a/src/assets/stylesheets/MobileProject.scss b/src/assets/stylesheets/MobileProject.scss index 43203323d..18164a725 100644 --- a/src/assets/stylesheets/MobileProject.scss +++ b/src/assets/stylesheets/MobileProject.scss @@ -2,7 +2,8 @@ @use './rpf_design_system/colours' as *; .proj-container--mobile { - margin: 0; + margin-block: 0; + margin-inline: 0; gap: 0; } @@ -18,16 +19,16 @@ .mobile-nav { display: flex; width: 100%; - + .react-tabs__tab-list { padding: 0; } - + .react-tabs__tab { flex: 1; display: flex; height: $space-4; - + &:last-of-type { border-right: none; } @@ -36,7 +37,8 @@ } .mobile-nav__menu { - margin: 0; + margin-block: 0; + margin-inline: 0; border-radius: 0; border: none; display: flex; diff --git a/src/assets/stylesheets/Modal.scss b/src/assets/stylesheets/Modal.scss index a0e3ce24e..fdf8730a5 100644 --- a/src/assets/stylesheets/Modal.scss +++ b/src/assets/stylesheets/Modal.scss @@ -1,9 +1,9 @@ -@use './rpf_design_system/spacing' as *; -@use './rpf_design_system/font-size' as *; -@use './rpf_design_system/font-weight' as *; -@use './rpf_design_system/line-height' as *; -@use './rpf_design_system/colours' as *; -@use './rpf_design_system/mixins' as *; +@use "./rpf_design_system/spacing" as *; +@use "./rpf_design_system/font-size" as *; +@use "./rpf_design_system/font-weight" as *; +@use "./rpf_design_system/line-height" as *; +@use "./rpf_design_system/colours" as *; +@use "./rpf_design_system/mixins" as *; .modal-overlay { display: flex; @@ -24,11 +24,12 @@ display: flex; flex-direction: column; - label, legend { + label, + legend { font-weight: $font-weight-bold; } - input[type=text] { + input[type="text"] { @include font-size-1(regular); width: 100%; box-sizing: border-box; @@ -71,12 +72,14 @@ .modal-content__subheading { @include font-size-1(regular); - margin: 0; + margin-block: 0; + margin-inline: 0; font-weight: $font-weight-bold; } .modal-content__text { - margin: 0; + margin-block: 0; + margin-inline: 0; line-height: $line-height-regular; } @@ -110,8 +113,10 @@ flex-direction: column; } - button, a { - margin: 0; + button, + a { + margin-block: 0; + margin-inline: 0; span { width: 100%; @@ -140,7 +145,7 @@ .--dark { .modal-overlay { - background-color: rgba(0,0,0,0.5); + background-color: rgba(0, 0, 0, 0.5); input { border: 2px solid $rpf-white; @@ -172,7 +177,7 @@ .--light { .modal-overlay { - background-color: rgba(67,69,76,0.5); + background-color: rgba(67, 69, 76, 0.5); input { border: 2px solid $rpf-grey-100; diff --git a/src/assets/stylesheets/NewComponentButton.scss b/src/assets/stylesheets/NewComponentButton.scss index 09d0f2809..1140d3fef 100644 --- a/src/assets/stylesheets/NewComponentButton.scss +++ b/src/assets/stylesheets/NewComponentButton.scss @@ -4,5 +4,6 @@ justify-content: center; width: 100%; box-sizing: border-box; - margin: 0; + margin-block: 0; + margin-inline: 0; } diff --git a/src/assets/stylesheets/Notifications.scss b/src/assets/stylesheets/Notifications.scss index 117aa5a28..0c74cc389 100644 --- a/src/assets/stylesheets/Notifications.scss +++ b/src/assets/stylesheets/Notifications.scss @@ -1,13 +1,15 @@ -@use './rpf_design_system/spacing' as *; -@use './rpf_design_system/font-size' 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-size" as *; +@use "./rpf_design_system/font-weight" as *; +@use "./rpf_design_system/colours" as *; #app { - .toast--bottom-center__message, .toast--top-center__message { - min-height: fit-content; - padding: $space-0-25 $space-0-5; - margin: 0; + .toast--bottom-center__message, + .toast--top-center__message { + min-height: fit-content; + padding: $space-0-25 $space-0-5; + margin-block: 0; + margin-inline: 0; } .toast--bottom-center { diff --git a/src/assets/stylesheets/ProjectImages.scss b/src/assets/stylesheets/ProjectImages.scss index 9685c3b5b..a6ed2725a 100644 --- a/src/assets/stylesheets/ProjectImages.scss +++ b/src/assets/stylesheets/ProjectImages.scss @@ -1,5 +1,5 @@ -@use './rpf_design_system/spacing' as *; -@use './rpf_design_system/colours' as *; +@use "./rpf_design_system/spacing" as *; +@use "./rpf_design_system/colours" as *; .project-images { display: grid; @@ -27,6 +27,7 @@ } p { - margin: 0; + margin-block: 0; + margin-inline: 0; } } diff --git a/src/assets/stylesheets/ProjectIndexHeader.scss b/src/assets/stylesheets/ProjectIndexHeader.scss index b9a5b2fa2..11fa99b16 100644 --- a/src/assets/stylesheets/ProjectIndexHeader.scss +++ b/src/assets/stylesheets/ProjectIndexHeader.scss @@ -1,6 +1,6 @@ -@use './rpf_design_system/spacing' as *; -@use './rpf_design_system/colours' as *; -@use './rpf_design_system/mixins' as *; +@use "./rpf_design_system/spacing" as *; +@use "./rpf_design_system/colours" as *; +@use "./rpf_design_system/mixins" as *; .editor-project-header { &__inner { @@ -40,7 +40,8 @@ } .btn { - margin: 0; + margin-block: 0; + margin-inline: 0; } } diff --git a/src/assets/stylesheets/ProjectIndexPagination.scss b/src/assets/stylesheets/ProjectIndexPagination.scss index a47b9ad37..5eecee01e 100644 --- a/src/assets/stylesheets/ProjectIndexPagination.scss +++ b/src/assets/stylesheets/ProjectIndexPagination.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 *; .editor-project-list-pagination { display: flex; @@ -8,7 +8,8 @@ align-items: center; margin-block-end: $space-2-5; svg { - margin: 0; + margin-block: 0; + margin-inline: 0; } } @@ -20,7 +21,7 @@ width: 100px; .btn { - margin: 0 $space-0-25 + margin: 0 $space-0-25; } } @@ -32,7 +33,7 @@ border-radius: 10px; display: flex; align-items: center; - font-weight: $font-weight-bold + font-weight: $font-weight-bold; } .--light { @@ -46,4 +47,3 @@ background-color: $rpf-grey-500; } } - diff --git a/src/assets/stylesheets/ProjectListItem.scss b/src/assets/stylesheets/ProjectListItem.scss index cb5ff6bef..9fc12ecfc 100644 --- a/src/assets/stylesheets/ProjectListItem.scss +++ b/src/assets/stylesheets/ProjectListItem.scss @@ -1,8 +1,8 @@ -@use './rpf_design_system/spacing' as *; -@use './rpf_design_system/font-size' as *; -@use './rpf_design_system/font-weight' as *; -@use './rpf_design_system/colours' as *; -@use './rpf_design_system/mixins' as *; +@use "./rpf_design_system/spacing" as *; +@use "./rpf_design_system/font-size" as *; +@use "./rpf_design_system/font-weight" as *; +@use "./rpf_design_system/colours" as *; +@use "./rpf_design_system/mixins" as *; $medium-table-grid: 990px; $small-table-grid: 600px; @@ -12,7 +12,6 @@ $small-table-grid: 600px; align-items: center; } - &__title { align-items: center; display: flex; @@ -27,7 +26,8 @@ $small-table-grid: 600px; @include unique-max-width($small-table-grid) { grid-column: span 8; padding: 0; - margin: 0; + margin-block: 0; + margin-inline: 0; } } @@ -64,7 +64,8 @@ $small-table-grid: 600px; } svg { - margin: 0; + margin-block: 0; + margin-inline: 0; } @include unique-width($medium-table-grid) { diff --git a/src/assets/stylesheets/ProjectListTable.scss b/src/assets/stylesheets/ProjectListTable.scss index ca4c2c20d..54fdf3e46 100644 --- a/src/assets/stylesheets/ProjectListTable.scss +++ b/src/assets/stylesheets/ProjectListTable.scss @@ -1,9 +1,8 @@ -@use './rpf_design_system/spacing' as *; -@use './rpf_design_system/font-size' as *; -@use './rpf_design_system/font-weight' as *; -@use './rpf_design_system/colours' as *; -@use './rpf_design_system/mixins' as *; - +@use "./rpf_design_system/spacing" as *; +@use "./rpf_design_system/font-size" as *; +@use "./rpf_design_system/font-weight" as *; +@use "./rpf_design_system/colours" as *; +@use "./rpf_design_system/mixins" as *; $medium-table-grid: 990px; $small-table-grid: 600px; @@ -91,7 +90,8 @@ $small-table-grid: 600px; p { @include font-size-1-25(regular); font-weight: $font-weight-bold; - margin: 0; + margin-block: 0; + margin-inline: 0; padding: $space-1-5; } } diff --git a/src/assets/stylesheets/ProjectName.scss b/src/assets/stylesheets/ProjectName.scss index eaf49a5d7..1d239c472 100644 --- a/src/assets/stylesheets/ProjectName.scss +++ b/src/assets/stylesheets/ProjectName.scss @@ -1,7 +1,7 @@ -@use './rpf_design_system/spacing' as *; -@use './rpf_design_system/font-size' 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-size" as *; +@use "./rpf_design_system/font-weight" as *; +@use "./rpf_design_system/colours" as *; .project-name { align-items: center; @@ -40,7 +40,8 @@ svg { height: $space-1-5; width: $space-1-5; - margin: 0; + margin-block: 0; + margin-inline: 0; } } diff --git a/src/assets/stylesheets/ProjectsPanel.scss b/src/assets/stylesheets/ProjectsPanel.scss index 1f1cef3f5..41829ab72 100644 --- a/src/assets/stylesheets/ProjectsPanel.scss +++ b/src/assets/stylesheets/ProjectsPanel.scss @@ -1,6 +1,6 @@ -@use './rpf_design_system/spacing' as *; -@use './rpf_design_system/colours' as *; -@use './rpf_design_system/font-size' as *; +@use "./rpf_design_system/spacing" as *; +@use "./rpf_design_system/colours" as *; +@use "./rpf_design_system/font-size" as *; .projects-panel-wrapper { .sidebar__panel-content { @@ -13,7 +13,8 @@ justify-content: center; width: 100%; box-sizing: border-box; - margin: 0; + margin-block: 0; + margin-inline: 0; a { color: $rpf-black; @@ -23,7 +24,8 @@ .projects-panel__download-button { width: 100%; - margin: 0; + margin-block: 0; + margin-inline: 0; justify-content: center; } @@ -44,7 +46,8 @@ margin-block-end: $space-1; } - .projects-panel__save, .projects-panel__button { + .projects-panel__save, + .projects-panel__button { border-top: 1px solid $rpf-grey-150; padding: $space-1 0; display: flex; diff --git a/src/assets/stylesheets/PythonRunner.scss b/src/assets/stylesheets/PythonRunner.scss index 305c7ab25..28384223a 100644 --- a/src/assets/stylesheets/PythonRunner.scss +++ b/src/assets/stylesheets/PythonRunner.scss @@ -1,6 +1,6 @@ -@use './rpf_design_system/spacing' as *; -@use './rpf_design_system/font-size' as *; -@use './rpf_design_system/colours' as *; +@use "./rpf_design_system/spacing" as *; +@use "./rpf_design_system/font-size" as *; +@use "./rpf_design_system/colours" as *; .pythonrunner-container { display: flex; @@ -12,7 +12,8 @@ .pythonrunner-console { padding: $space-0-5 $space-1-5; - margin: 0; + margin-block: 0; + margin-inline: 0; white-space: pre-wrap; white-space: -moz-pre-wrap; white-space: -pre-wrap; @@ -45,7 +46,6 @@ outline: 0; } - .pythonrunner-graphic { overflow: auto; position: relative; diff --git a/src/assets/stylesheets/SelectButtons.scss b/src/assets/stylesheets/SelectButtons.scss index 2ffa5580e..52bb8f7c7 100644 --- a/src/assets/stylesheets/SelectButtons.scss +++ b/src/assets/stylesheets/SelectButtons.scss @@ -1,10 +1,11 @@ -@use './rpf_design_system/colours' as *; -@use './rpf_design_system/spacing' as *; -@use './rpf_design_system/mixins' as *; +@use "./rpf_design_system/colours" as *; +@use "./rpf_design_system/spacing" as *; +@use "./rpf_design_system/mixins" as *; .select-buttons { border: none; - margin: 0; + margin-block: 0; + margin-inline: 0; padding: 0; } diff --git a/src/assets/stylesheets/Sidebar.scss b/src/assets/stylesheets/Sidebar.scss index e70570d04..531984631 100644 --- a/src/assets/stylesheets/Sidebar.scss +++ b/src/assets/stylesheets/Sidebar.scss @@ -1,6 +1,6 @@ -@use './rpf_design_system/spacing' as *; -@use './rpf_design_system/font-size' as *; -@use './rpf_design_system/colours' as *; +@use "./rpf_design_system/spacing" as *; +@use "./rpf_design_system/font-size" as *; +@use "./rpf_design_system/colours" as *; .sidebar { display: flex; @@ -43,7 +43,8 @@ } .sidebar__panel-heading { - margin: 0; + margin-block: 0; + margin-inline: 0; @include font-size-1-5(regular); } @@ -75,10 +76,12 @@ justify-content: center; box-sizing: border-box; border-radius: 100%; - margin: 0; + margin-block: 0; + margin-inline: 0; svg { - margin: 0; + margin-block: 0; + margin-inline: 0; } } @@ -96,7 +99,8 @@ } svg { - margin: 0; + margin-block: 0; + margin-inline: 0; } } diff --git a/src/assets/stylesheets/Tabs.scss b/src/assets/stylesheets/Tabs.scss index 7623d010f..d3cc1c610 100644 --- a/src/assets/stylesheets/Tabs.scss +++ b/src/assets/stylesheets/Tabs.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 *; #app, #wc { @@ -16,7 +16,8 @@ border: none; background-color: transparent; padding: 0; - margin: 0; + margin-block: 0; + margin-inline: 0; inset-block-start: 0; inset-block-end: 0; height: $space-3; @@ -64,7 +65,8 @@ &__tab-text { height: fit-content; width: fit-content; - margin: 0; + margin-block: 0; + margin-inline: 0; padding: 0 $space-0-75; white-space: nowrap; @@ -101,7 +103,8 @@ box-sizing: border-box; display: flex; overflow-y: hidden; - margin: 0; + margin-block: 0; + margin-inline: 0; padding: 0 $space-0-25 0 0; } @@ -115,7 +118,6 @@ &.--light { .react-tabs { - &__tab-container { border-bottom: 1px solid $rpf-grey-150; } diff --git a/src/assets/stylesheets/index.scss b/src/assets/stylesheets/index.scss index b98fdf891..da43ee5f2 100644 --- a/src/assets/stylesheets/index.scss +++ b/src/assets/stylesheets/index.scss @@ -1,6 +1,7 @@ html, body { - margin: 0; + margin-block: 0; + margin-inline: 0; } :host { @@ -8,15 +9,15 @@ body { } body { - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', - 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", + "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } code { - font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', + font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace; } diff --git a/src/web-component.html b/src/web-component.html index 343d9cb53..2484ff9e4 100644 --- a/src/web-component.html +++ b/src/web-component.html @@ -8,7 +8,8 @@ display: flex; flex-direction: column; height: 100dvh; - margin: 0; + margin-block: 0; + margin-inline: 0; } .editor-wc { flex: 1 1 auto; From 0e7807a6240b24280936054aab84972f3a63adf3 Mon Sep 17 00:00:00 2001 From: Magdalena Jadach Date: Mon, 23 Oct 2023 15:46:48 +0100 Subject: [PATCH 04/10] Follow up values --- src/assets/stylesheets/AstroPiModel.scss | 28 ++++++++++------- src/assets/stylesheets/Button.scss | 3 +- src/assets/stylesheets/GlobalNav.scss | 16 +++++----- src/assets/stylesheets/InfoPanel.scss | 3 +- src/assets/stylesheets/LandingPage.scss | 31 ++++++++++++------- src/assets/stylesheets/MobileProjectBar.scss | 13 ++++---- src/assets/stylesheets/Modal.scss | 9 ++++-- src/assets/stylesheets/Notifications.scss | 3 +- src/assets/stylesheets/Project.scss | 22 ++++++++----- src/assets/stylesheets/ProjectBar.scss | 9 +++--- .../stylesheets/ProjectIndexHeader.scss | 6 ++-- .../stylesheets/ProjectIndexPagination.scss | 6 ++-- src/assets/stylesheets/ProjectInfo.scss | 11 ++++--- src/assets/stylesheets/ProjectListItem.scss | 3 +- src/assets/stylesheets/ProjectListTable.scss | 12 ++++--- src/assets/stylesheets/ProjectName.scss | 3 +- src/assets/stylesheets/ProjectsPanel.scss | 6 ++-- src/assets/stylesheets/SaveStatus.scss | 6 ++-- src/assets/stylesheets/SettingsPanel.scss | 11 ++++--- src/assets/stylesheets/Sidebar.scss | 3 +- 20 files changed, 124 insertions(+), 80 deletions(-) diff --git a/src/assets/stylesheets/AstroPiModel.scss b/src/assets/stylesheets/AstroPiModel.scss index b7e0eec9d..9774e593e 100644 --- a/src/assets/stylesheets/AstroPiModel.scss +++ b/src/assets/stylesheets/AstroPiModel.scss @@ -1,7 +1,7 @@ -@use './rpf_design_system/spacing' as *; -@use './rpf_design_system/font-size' 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-size" as *; +@use "./rpf_design_system/font-weight" as *; +@use "./rpf_design_system/colours" as *; .sense-hat { width: 100%; @@ -25,7 +25,8 @@ display: flex; align-items: center; justify-content: center; - margin: 0 $space-0-5; + margin-block: 0; + margin-inline: $space-0-5; &__spacing { flex: 1; @@ -34,7 +35,8 @@ &__values { flex: 10; display: flex; - margin: 0 $space-0-5; + margin-block: 0; + margin-inline: $space-0-5; } &__reading { @@ -42,7 +44,8 @@ flex: 1; text-transform: uppercase; font-weight: $font-weight-bold; - margin: 0 $space-0-5; + margin-block: 0; + margin-inline: $space-0-5; } &__reset-btn { @@ -99,7 +102,7 @@ display: flex; align-items: center; justify-content: center; - font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', + font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace; &-timer { @@ -129,7 +132,7 @@ transform: rotate(270deg); } - input[type='color'] { + input[type="color"] { border-radius: 5px; flex: 1; width: 100%; @@ -139,7 +142,8 @@ &-name { font-variant: small-caps; text-transform: lowercase; - margin: $space-0-25 0; + margin-block: $space-0-25; + margin-inline: 0; } &-value { @@ -201,7 +205,7 @@ border: 1px solid $rpf-grey-500; } - input[type='color'] { + input[type="color"] { background-color: $rpf-grey-800; border: 1px solid $rpf-grey-500; } @@ -255,7 +259,7 @@ border: 2px solid $rpf-grey-300; } - input[type='color'] { + input[type="color"] { background-color: $rpf-white; border: 2px solid $rpf-grey-300; } diff --git a/src/assets/stylesheets/Button.scss b/src/assets/stylesheets/Button.scss index a060fb652..1dd814a36 100644 --- a/src/assets/stylesheets/Button.scss +++ b/src/assets/stylesheets/Button.scss @@ -57,7 +57,8 @@ font-weight: $font-weight-bold; gap: $space-0-5; justify-content: center; - margin: 6px; + margin-block: 6px; + margin-inline: 6px; min-height: 44px; min-width: 44px; padding: 10px; diff --git a/src/assets/stylesheets/GlobalNav.scss b/src/assets/stylesheets/GlobalNav.scss index 50cd97a3f..9163a9cad 100644 --- a/src/assets/stylesheets/GlobalNav.scss +++ b/src/assets/stylesheets/GlobalNav.scss @@ -1,7 +1,7 @@ -@use './rpf_design_system/spacing' as *; -@use './rpf_design_system/font-weight' as *; -@use './rpf_design_system/colours' as *; -@use './rpf_design_system/mixins' as *; +@use "./rpf_design_system/spacing" as *; +@use "./rpf_design_system/font-weight" as *; +@use "./rpf_design_system/colours" as *; +@use "./rpf_design_system/mixins" as *; .editor-global-nav-wrapper { flex: 0 1 auto; @@ -21,8 +21,9 @@ height: 100%; svg { - fill: $rpf-white; - margin: 0 0 0 $space-0-5; + fill: $rpf-white; + margin-block: 0; + margin-inline: 0 $space-0-5; } .dropdown-button { @@ -37,7 +38,8 @@ img { height: $space-2-5; - margin: $space-0-25 0; + margin-block: $space-0-25; + margin-inline: 0; } } diff --git a/src/assets/stylesheets/InfoPanel.scss b/src/assets/stylesheets/InfoPanel.scss index 57e3376f0..4679f6d33 100644 --- a/src/assets/stylesheets/InfoPanel.scss +++ b/src/assets/stylesheets/InfoPanel.scss @@ -9,7 +9,8 @@ margin-block-end: $space-0-5; p { - margin: 0; + margin-block: 0; + margin-inline: 0; } } diff --git a/src/assets/stylesheets/LandingPage.scss b/src/assets/stylesheets/LandingPage.scss index 5a79bf84c..80bcce527 100644 --- a/src/assets/stylesheets/LandingPage.scss +++ b/src/assets/stylesheets/LandingPage.scss @@ -1,8 +1,8 @@ -@use './rpf_design_system/spacing' as *; -@use './rpf_design_system/font-size' as *; -@use './rpf_design_system/font-weight' as *; -@use './rpf_design_system/colours' as *; -@use './rpf_design_system/mixins' as *; +@use "./rpf_design_system/spacing" as *; +@use "./rpf_design_system/font-size" as *; +@use "./rpf_design_system/font-weight" as *; +@use "./rpf_design_system/colours" as *; +@use "./rpf_design_system/mixins" as *; .landing-page-wrapper { display: flex; @@ -27,7 +27,8 @@ .landing-page__projects--title { @include font-size-2-5(regular); - margin: $space-1; + margin-block: $space-1; + margin-inline: $space-1; @media screen and (min-width: 375px) { @include font-size-3(regular); @@ -37,7 +38,8 @@ .landing-page__projects--subtitle { @include font-size-1-5(regular); font-weight: $font-weight-regular; - margin: $space-1; + margin-block: $space-1; + margin-inline: $space-1; @media screen and (min-width: 375px) { @include font-size-2(regular); @@ -56,7 +58,8 @@ // Paths .landing-page__paths { border-radius: $space-1-5; - margin: 0 $space-1-5; + margin-block: 0; + margin-inline: $space-1-5; max-width: 368px; padding: $space-1-5 $space-1 0; text-align: center; @@ -72,10 +75,12 @@ } .landing-page__paths-copy { - margin: auto; + margin-block: auto; + margin-inline: auto; @media screen and (min-width: 768px) { - margin: unset; + margin-block: unset; + margin-inline: unset; max-width: 300px; } } @@ -115,7 +120,8 @@ img { aspect-ratio: 3/2; display: block; - margin: auto; + margin-block: auto; + margin-inline: auto; max-width: 301px; width: 100%; } @@ -124,7 +130,8 @@ margin-inline-start: auto; img { - margin: unset; + margin-block: unset; + margin-inline: unset; width: unset; } } diff --git a/src/assets/stylesheets/MobileProjectBar.scss b/src/assets/stylesheets/MobileProjectBar.scss index 887c53736..305d63aec 100644 --- a/src/assets/stylesheets/MobileProjectBar.scss +++ b/src/assets/stylesheets/MobileProjectBar.scss @@ -1,7 +1,7 @@ -@use './rpf_design_system/spacing' as *; -@use './rpf_design_system/font-size' 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-size" as *; +@use "./rpf_design_system/font-weight" as *; +@use "./rpf_design_system/colours" as *; .mobile-project-bar { background-color: $rpf-white; @@ -15,7 +15,8 @@ .mobile-project-bar__name { @include font-size-0-75(regular); font-weight: $font-weight-bold; - margin: auto 0; + margin-block: auto 0; + margin-inline: auto; } .--dark { @@ -36,6 +37,6 @@ } .mobile-project-bar__name { - color: $rpf-text-secondary; + color: $rpf-text-secondary; } } diff --git a/src/assets/stylesheets/Modal.scss b/src/assets/stylesheets/Modal.scss index fdf8730a5..216e88de8 100644 --- a/src/assets/stylesheets/Modal.scss +++ b/src/assets/stylesheets/Modal.scss @@ -59,7 +59,8 @@ .modal-content__heading { @include font-size-1-5(regular); - margin: $space-0-5 $space-0-5 $space-0-5 0; + margin-block: $space-0-5 $space-0-5; + margin-inline: $space-0-5 0; } .modal-content__body { @@ -84,7 +85,8 @@ } .modal-content__help-text { - margin: $space-0-25 0; + margin-block: $space-0-25; + margin-inline: 0; font-weight: $font-weight-regular; } @@ -130,7 +132,8 @@ .modal-content__links { text-align: center; - margin: $space-0-5 0 $space-0-25 0; + margin-block: $space-0-5 $space-0-25; + margin-inline: 0; button { text-decoration: underline; diff --git a/src/assets/stylesheets/Notifications.scss b/src/assets/stylesheets/Notifications.scss index 0c74cc389..22b69c2d7 100644 --- a/src/assets/stylesheets/Notifications.scss +++ b/src/assets/stylesheets/Notifications.scss @@ -23,7 +23,8 @@ white-space: nowrap; .Toastify__toast-icon { - margin: 0 $space-0-25 0 0; + margin-block: 0; + margin-inline: $space-0-25 0; } } .toast--bottom-center__message { diff --git a/src/assets/stylesheets/Project.scss b/src/assets/stylesheets/Project.scss index 93cfbd317..4e2ca6e8f 100644 --- a/src/assets/stylesheets/Project.scss +++ b/src/assets/stylesheets/Project.scss @@ -1,5 +1,5 @@ -@use './rpf_design_system/spacing' as *; -@use './rpf_design_system/colours' as *; +@use "./rpf_design_system/spacing" as *; +@use "./rpf_design_system/colours" as *; .proj { display: flex; @@ -38,7 +38,8 @@ overflow-y: hidden; grid-gap: $space-1; - margin: $space-1; + margin-block: $space-1; + margin-inline: $space-1; height: 100%; height: -moz-available; @@ -120,18 +121,19 @@ } } -.proj-editor-container, .proj-runner-container { +.proj-editor-container, +.proj-runner-container { .react-tabs__tab-list { flex: 1; } .react-tabs__tab-container { - .btn--run, .btn--stop { + .btn--run, + .btn--stop { margin-block-start: 0; margin-block-end: 0; } } - } .--light { @@ -142,7 +144,9 @@ } @media (min-width: 600px) { - .proj-runner-container, .proj-editor-container, .sidebar { + .proj-runner-container, + .proj-editor-container, + .sidebar { border: 1px solid $rpf-grey-150; } } @@ -156,7 +160,9 @@ } @media (min-width: 600px) { - .proj-runner-container, .proj-editor-container, .sidebar { + .proj-runner-container, + .proj-editor-container, + .sidebar { border: 1px solid $rpf-grey-600; } } diff --git a/src/assets/stylesheets/ProjectBar.scss b/src/assets/stylesheets/ProjectBar.scss index 5d8e28f5c..f35f985e8 100644 --- a/src/assets/stylesheets/ProjectBar.scss +++ b/src/assets/stylesheets/ProjectBar.scss @@ -1,5 +1,5 @@ -@use './rpf_design_system/spacing' as *; -@use './rpf_design_system/colours' as *; +@use "./rpf_design_system/spacing" as *; +@use "./rpf_design_system/colours" as *; .project-bar { border-radius: $space-0-5; @@ -21,7 +21,7 @@ padding: $space-1; &::after { - content: ''; + content: ""; position: absolute; inset-block-start: -3px; inset-inline-end: 0px; @@ -45,7 +45,8 @@ } .project-bar__btn { - margin: $space-0-5; + margin-block: $space-0-5; + margin-inline: $space-0-5; gap: $space-0-5; .text { diff --git a/src/assets/stylesheets/ProjectIndexHeader.scss b/src/assets/stylesheets/ProjectIndexHeader.scss index 11fa99b16..9fd7bf2ac 100644 --- a/src/assets/stylesheets/ProjectIndexHeader.scss +++ b/src/assets/stylesheets/ProjectIndexHeader.scss @@ -9,7 +9,8 @@ display: flex; flex-direction: column; padding: $space-2; - margin: 0 auto; + margin-block: 0; + margin-inline: auto; width: 100%; max-width: 1570px; @@ -25,7 +26,8 @@ } h1 { - margin: $space-0-5 0; + margin-block: $space-0-5; + margin-inline: 0; } h3 { diff --git a/src/assets/stylesheets/ProjectIndexPagination.scss b/src/assets/stylesheets/ProjectIndexPagination.scss index 5eecee01e..f0e2f315b 100644 --- a/src/assets/stylesheets/ProjectIndexPagination.scss +++ b/src/assets/stylesheets/ProjectIndexPagination.scss @@ -21,7 +21,8 @@ width: 100px; .btn { - margin: 0 $space-0-25; + margin-block: 0; + margin-inline: $space-0-25; } } @@ -29,7 +30,8 @@ height: 100%; box-sizing: border-box; padding: $space-0-5 $space-1; - margin: 0 $space-0-25; + margin-block: 0; + margin-inline: $space-0-25; border-radius: 10px; display: flex; align-items: center; diff --git a/src/assets/stylesheets/ProjectInfo.scss b/src/assets/stylesheets/ProjectInfo.scss index c5a187d77..485ac5279 100644 --- a/src/assets/stylesheets/ProjectInfo.scss +++ b/src/assets/stylesheets/ProjectInfo.scss @@ -1,7 +1,7 @@ -@use './rpf_design_system/spacing' as *; -@use './rpf_design_system/font-size' 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-size" as *; +@use "./rpf_design_system/font-weight" as *; +@use "./rpf_design_system/colours" as *; .project-info { align-items: left; @@ -13,7 +13,8 @@ background-color: inherit; .btn--primary { - margin: 0 $space-0-5; + margin-block: 0; + margin-inline: $space-0-5; } } diff --git a/src/assets/stylesheets/ProjectListItem.scss b/src/assets/stylesheets/ProjectListItem.scss index 9fc12ecfc..569d784d8 100644 --- a/src/assets/stylesheets/ProjectListItem.scss +++ b/src/assets/stylesheets/ProjectListItem.scss @@ -80,7 +80,8 @@ $small-table-grid: 600px; } &__rename { - margin: 12px 16px; + margin-block: 12px; + margin-inline: 16px; } &__menu { diff --git a/src/assets/stylesheets/ProjectListTable.scss b/src/assets/stylesheets/ProjectListTable.scss index 54fdf3e46..c711e64f8 100644 --- a/src/assets/stylesheets/ProjectListTable.scss +++ b/src/assets/stylesheets/ProjectListTable.scss @@ -8,13 +8,15 @@ $medium-table-grid: 990px; $small-table-grid: 600px; .editor-project-list { - margin: 0 auto; + margin-block: 0; + margin-inline: auto; max-width: 1570px; width: 100%; &__container { border-radius: 8px; - margin: $space-1-5 $space-2; + margin-block: $space-1-5; + margin-inline: $space-2; padding: $space-0-5; @include unique-width($small-table-grid) { @@ -22,11 +24,13 @@ $small-table-grid: 600px; } @include unique-width(767px) { - margin: $space-2-5 $space-3; + margin-block: $space-2-5; + margin-inline: $space-3; } @include unique-width(1670px) { - margin: $space-2-5 0; + margin-block: $space-2-5; + margin-inline: 0; } .--light & { diff --git a/src/assets/stylesheets/ProjectName.scss b/src/assets/stylesheets/ProjectName.scss index 1d239c472..9ecd9407d 100644 --- a/src/assets/stylesheets/ProjectName.scss +++ b/src/assets/stylesheets/ProjectName.scss @@ -10,7 +10,8 @@ padding-inline-start: $space-0-5; .btn--primary { - margin: 0 $space-0-5; + margin-block: 0; + margin-inline: $space-0-5; } } diff --git a/src/assets/stylesheets/ProjectsPanel.scss b/src/assets/stylesheets/ProjectsPanel.scss index 41829ab72..5af2dbd42 100644 --- a/src/assets/stylesheets/ProjectsPanel.scss +++ b/src/assets/stylesheets/ProjectsPanel.scss @@ -63,7 +63,8 @@ } .content { - margin: auto; + margin-block: auto; + margin-inline: auto; } span { @@ -72,7 +73,8 @@ } .projects-panel__save-status { - margin: auto; + margin-block: auto; + margin-inline: auto; width: fit-content; } } diff --git a/src/assets/stylesheets/SaveStatus.scss b/src/assets/stylesheets/SaveStatus.scss index dad59030e..bb059fb61 100644 --- a/src/assets/stylesheets/SaveStatus.scss +++ b/src/assets/stylesheets/SaveStatus.scss @@ -6,11 +6,13 @@ align-items: center; display: flex; justify-content: flex-end; - margin: 0 $space-1 0 $space-0-5; + margin-block: 0; + margin-inline: $space-1 $space-0-5; } .save-status--mobile { - margin: unset; + margin-block: unset; + margin-inline: unset; .save-status__text { @include font-size-1(regular); diff --git a/src/assets/stylesheets/SettingsPanel.scss b/src/assets/stylesheets/SettingsPanel.scss index 2616217d6..4e3b9b779 100644 --- a/src/assets/stylesheets/SettingsPanel.scss +++ b/src/assets/stylesheets/SettingsPanel.scss @@ -1,7 +1,7 @@ -@use './rpf_design_system/spacing' as *; -@use './rpf_design_system/font-size' 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-size" as *; +@use "./rpf_design_system/font-weight" as *; +@use "./rpf_design_system/colours" as *; .settings-panel { font-family: sans-serif; @@ -13,7 +13,8 @@ h3 { font-weight: $font-weight-bold; - margin: 0 0 $space-0-5 0; + margin-block: 0 $space-0-5; + margin-inline: 0; } button { diff --git a/src/assets/stylesheets/Sidebar.scss b/src/assets/stylesheets/Sidebar.scss index 531984631..53bb91ddf 100644 --- a/src/assets/stylesheets/Sidebar.scss +++ b/src/assets/stylesheets/Sidebar.scss @@ -65,7 +65,8 @@ .sidebar__bar-option-wrapper { padding: 6px 11px 6px 6px; - margin: 0 -1px 0 4px; + margin-block: 0; + margin-inline: -1px 4px; border-radius: 100% 0 0 100%; } From 382c8c3e08660bf01dd41c0a1363e951cec832e6 Mon Sep 17 00:00:00 2001 From: Magdalena Jadach Date: Mon, 23 Oct 2023 15:47:40 +0100 Subject: [PATCH 05/10] Changelog --- CHANGELOG.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index e5f4662aa..94498514b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -15,7 +15,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), ### Changed -- Replace physical properties with logical values +- Replace physical properties with logical values - margin (#717) +- Replace physical properties with logical values - position (#699) - Moved web component custom events from the `editor-wc` element to the `document` (#710) - Renamed web component custom events to be prefixed with `editor-` (#710) - Switch props of `WebComponentLoader` from `snake_case` to `camelCase` (#712) From 8b82f9080cd3f0aadc1f6287237c1eed9afb5a3b Mon Sep 17 00:00:00 2001 From: Magdalena Jadach Date: Fri, 17 Nov 2023 10:08:45 +0000 Subject: [PATCH 06/10] Merge symmetrical margin values --- src/assets/stylesheets/AstroPiModel.scss | 12 ++++------- src/assets/stylesheets/Button.scss | 9 +++----- src/assets/stylesheets/ContextMenu.scss | 14 +++++-------- src/assets/stylesheets/ErrorMessage.scss | 3 +-- src/assets/stylesheets/FilePanel.scss | 3 +-- src/assets/stylesheets/GlobalNav.scss | 3 +-- src/assets/stylesheets/InfoPanel.scss | 3 +-- src/assets/stylesheets/LandingPage.scss | 21 +++++++------------ src/assets/stylesheets/MobileProject.scss | 6 ++---- src/assets/stylesheets/Modal.scss | 12 ++++------- .../stylesheets/NewComponentButton.scss | 3 +-- src/assets/stylesheets/Notifications.scss | 3 +-- src/assets/stylesheets/Project.scss | 3 +-- src/assets/stylesheets/ProjectBar.scss | 3 +-- src/assets/stylesheets/ProjectImages.scss | 3 +-- .../stylesheets/ProjectIndexHeader.scss | 9 +++----- .../stylesheets/ProjectIndexPagination.scss | 9 +++----- src/assets/stylesheets/ProjectInfo.scss | 3 +-- src/assets/stylesheets/ProjectListItem.scss | 9 +++----- src/assets/stylesheets/ProjectListTable.scss | 15 +++++-------- src/assets/stylesheets/ProjectName.scss | 6 ++---- src/assets/stylesheets/ProjectsPanel.scss | 12 ++++------- src/assets/stylesheets/PythonRunner.scss | 3 +-- src/assets/stylesheets/SaveStatus.scss | 3 +-- src/assets/stylesheets/SelectButtons.scss | 3 +-- src/assets/stylesheets/Sidebar.scss | 12 ++++------- src/assets/stylesheets/Tabs.scss | 9 +++----- src/assets/stylesheets/index.scss | 3 +-- src/web-component.html | 3 +-- 29 files changed, 67 insertions(+), 133 deletions(-) diff --git a/src/assets/stylesheets/AstroPiModel.scss b/src/assets/stylesheets/AstroPiModel.scss index 9774e593e..0b0165fee 100644 --- a/src/assets/stylesheets/AstroPiModel.scss +++ b/src/assets/stylesheets/AstroPiModel.scss @@ -25,8 +25,7 @@ display: flex; align-items: center; justify-content: center; - margin-block: 0; - margin-inline: $space-0-5; + margin: 0 $space-0-5; &__spacing { flex: 1; @@ -35,8 +34,7 @@ &__values { flex: 10; display: flex; - margin-block: 0; - margin-inline: $space-0-5; + margin: 0 $space-0-5; } &__reading { @@ -44,8 +42,7 @@ flex: 1; text-transform: uppercase; font-weight: $font-weight-bold; - margin-block: 0; - margin-inline: $space-0-5; + margin: 0 $space-0-5; } &__reset-btn { @@ -142,8 +139,7 @@ &-name { font-variant: small-caps; text-transform: lowercase; - margin-block: $space-0-25; - margin-inline: 0; + margin: $space-0-25 0; } &-value { diff --git a/src/assets/stylesheets/Button.scss b/src/assets/stylesheets/Button.scss index 1dd814a36..6bbe5656f 100644 --- a/src/assets/stylesheets/Button.scss +++ b/src/assets/stylesheets/Button.scss @@ -57,8 +57,7 @@ font-weight: $font-weight-bold; gap: $space-0-5; justify-content: center; - margin-block: 6px; - margin-inline: 6px; + margin: 6px 6px; min-height: 44px; min-width: 44px; padding: 10px; @@ -114,8 +113,7 @@ &--tertiary { $colours: inherit, inherit, inherit, $rpf-grey-600, inherit, inherit, inherit; @include button-styling($colours...); - margin-block: 0; - margin-inline: 0; + margin: 0 0; &:active { color: $rpf-teal-900; @@ -152,8 +150,7 @@ &--svg-only { svg { - margin-block: 0; - margin-inline: 0; + margin: 0 0; } } } diff --git a/src/assets/stylesheets/ContextMenu.scss b/src/assets/stylesheets/ContextMenu.scss index 5ff89fcd3..8ba08ea03 100644 --- a/src/assets/stylesheets/ContextMenu.scss +++ b/src/assets/stylesheets/ContextMenu.scss @@ -4,28 +4,24 @@ .context-menu__drop { display: flex; padding: $space-0-5 $space-1; - margin-block: 0; - margin-inline: 0; + margin: 0 0; svg { - margin-block: 0; - margin-inline: 0; + margin: 0 0; } } .context-menu { list-style-type: none; - margin-block: 0; - margin-inline: 0; padding: 0; - margin-inline-start: $space-0-5; + margin-block: 0; + margin-inline: $space-0-5 0; border-radius: 5px; display: flex; flex-direction: column; .context-menu__item { - margin-block: 0; - margin-inline: 0; + margin: 0 0; background-color: inherit; color: inherit; padding: $space-0-5; diff --git a/src/assets/stylesheets/ErrorMessage.scss b/src/assets/stylesheets/ErrorMessage.scss index 095a472bd..5097b76cf 100644 --- a/src/assets/stylesheets/ErrorMessage.scss +++ b/src/assets/stylesheets/ErrorMessage.scss @@ -8,8 +8,7 @@ &__content { padding: 0; - margin-block: 0; - margin-inline: 0; + margin: 0 0; } &--medium { diff --git a/src/assets/stylesheets/FilePanel.scss b/src/assets/stylesheets/FilePanel.scss index ee4f20e29..44061f638 100644 --- a/src/assets/stylesheets/FilePanel.scss +++ b/src/assets/stylesheets/FilePanel.scss @@ -20,8 +20,7 @@ font-weight: $font-weight-regular; min-height: 44px; padding: $space-0-5 $space-2-5 $space-0-5 $space-0-5; - margin-block: 0; - margin-inline: 0; + margin: 0 0; span { font-weight: $font-weight-bold; overflow-x: hidden; diff --git a/src/assets/stylesheets/GlobalNav.scss b/src/assets/stylesheets/GlobalNav.scss index 9163a9cad..de5c4b85e 100644 --- a/src/assets/stylesheets/GlobalNav.scss +++ b/src/assets/stylesheets/GlobalNav.scss @@ -38,8 +38,7 @@ img { height: $space-2-5; - margin-block: $space-0-25; - margin-inline: 0; + margin: $space-0-25 0; } } diff --git a/src/assets/stylesheets/InfoPanel.scss b/src/assets/stylesheets/InfoPanel.scss index 4679f6d33..7a5e5a466 100644 --- a/src/assets/stylesheets/InfoPanel.scss +++ b/src/assets/stylesheets/InfoPanel.scss @@ -9,8 +9,7 @@ margin-block-end: $space-0-5; p { - margin-block: 0; - margin-inline: 0; + margin: 0 0; } } diff --git a/src/assets/stylesheets/LandingPage.scss b/src/assets/stylesheets/LandingPage.scss index 80bcce527..40fc288dd 100644 --- a/src/assets/stylesheets/LandingPage.scss +++ b/src/assets/stylesheets/LandingPage.scss @@ -27,8 +27,7 @@ .landing-page__projects--title { @include font-size-2-5(regular); - margin-block: $space-1; - margin-inline: $space-1; + margin: $space-1 $space-1; @media screen and (min-width: 375px) { @include font-size-3(regular); @@ -38,8 +37,7 @@ .landing-page__projects--subtitle { @include font-size-1-5(regular); font-weight: $font-weight-regular; - margin-block: $space-1; - margin-inline: $space-1; + margin: $space-1 $space-1; @media screen and (min-width: 375px) { @include font-size-2(regular); @@ -58,8 +56,7 @@ // Paths .landing-page__paths { border-radius: $space-1-5; - margin-block: 0; - margin-inline: $space-1-5; + margin: 0 $space-1-5; max-width: 368px; padding: $space-1-5 $space-1 0; text-align: center; @@ -75,12 +72,10 @@ } .landing-page__paths-copy { - margin-block: auto; - margin-inline: auto; + margin: auto auto; @media screen and (min-width: 768px) { - margin-block: unset; - margin-inline: unset; + margin: unset unset; max-width: 300px; } } @@ -120,8 +115,7 @@ img { aspect-ratio: 3/2; display: block; - margin-block: auto; - margin-inline: auto; + margin: auto auto; max-width: 301px; width: 100%; } @@ -130,8 +124,7 @@ margin-inline-start: auto; img { - margin-block: unset; - margin-inline: unset; + margin: unset unset; width: unset; } } diff --git a/src/assets/stylesheets/MobileProject.scss b/src/assets/stylesheets/MobileProject.scss index 18164a725..84727391d 100644 --- a/src/assets/stylesheets/MobileProject.scss +++ b/src/assets/stylesheets/MobileProject.scss @@ -2,8 +2,7 @@ @use './rpf_design_system/colours' as *; .proj-container--mobile { - margin-block: 0; - margin-inline: 0; + margin: 0 0; gap: 0; } @@ -37,8 +36,7 @@ } .mobile-nav__menu { - margin-block: 0; - margin-inline: 0; + margin: 0 0; border-radius: 0; border: none; display: flex; diff --git a/src/assets/stylesheets/Modal.scss b/src/assets/stylesheets/Modal.scss index 216e88de8..83ad835ce 100644 --- a/src/assets/stylesheets/Modal.scss +++ b/src/assets/stylesheets/Modal.scss @@ -73,20 +73,17 @@ .modal-content__subheading { @include font-size-1(regular); - margin-block: 0; - margin-inline: 0; + margin: 0 0; font-weight: $font-weight-bold; } .modal-content__text { - margin-block: 0; - margin-inline: 0; + margin: 0 0; line-height: $line-height-regular; } .modal-content__help-text { - margin-block: $space-0-25; - margin-inline: 0; + margin: $space-0-25 0; font-weight: $font-weight-regular; } @@ -117,8 +114,7 @@ button, a { - margin-block: 0; - margin-inline: 0; + margin: 0 0; span { width: 100%; diff --git a/src/assets/stylesheets/NewComponentButton.scss b/src/assets/stylesheets/NewComponentButton.scss index 1140d3fef..7dd86a38d 100644 --- a/src/assets/stylesheets/NewComponentButton.scss +++ b/src/assets/stylesheets/NewComponentButton.scss @@ -4,6 +4,5 @@ justify-content: center; width: 100%; box-sizing: border-box; - margin-block: 0; - margin-inline: 0; + margin: 0 0; } diff --git a/src/assets/stylesheets/Notifications.scss b/src/assets/stylesheets/Notifications.scss index 22b69c2d7..635dee4af 100644 --- a/src/assets/stylesheets/Notifications.scss +++ b/src/assets/stylesheets/Notifications.scss @@ -8,8 +8,7 @@ .toast--top-center__message { min-height: fit-content; padding: $space-0-25 $space-0-5; - margin-block: 0; - margin-inline: 0; + margin: 0 0; } .toast--bottom-center { diff --git a/src/assets/stylesheets/Project.scss b/src/assets/stylesheets/Project.scss index 4e2ca6e8f..35a5acde5 100644 --- a/src/assets/stylesheets/Project.scss +++ b/src/assets/stylesheets/Project.scss @@ -38,8 +38,7 @@ overflow-y: hidden; grid-gap: $space-1; - margin-block: $space-1; - margin-inline: $space-1; + margin: $space-1 $space-1; height: 100%; height: -moz-available; diff --git a/src/assets/stylesheets/ProjectBar.scss b/src/assets/stylesheets/ProjectBar.scss index f35f985e8..bececb06f 100644 --- a/src/assets/stylesheets/ProjectBar.scss +++ b/src/assets/stylesheets/ProjectBar.scss @@ -45,8 +45,7 @@ } .project-bar__btn { - margin-block: $space-0-5; - margin-inline: $space-0-5; + margin: $space-0-5 $space-0-5; gap: $space-0-5; .text { diff --git a/src/assets/stylesheets/ProjectImages.scss b/src/assets/stylesheets/ProjectImages.scss index a6ed2725a..75a8c11c6 100644 --- a/src/assets/stylesheets/ProjectImages.scss +++ b/src/assets/stylesheets/ProjectImages.scss @@ -27,7 +27,6 @@ } p { - margin-block: 0; - margin-inline: 0; + margin: 0 0; } } diff --git a/src/assets/stylesheets/ProjectIndexHeader.scss b/src/assets/stylesheets/ProjectIndexHeader.scss index 9fd7bf2ac..78cf09aa0 100644 --- a/src/assets/stylesheets/ProjectIndexHeader.scss +++ b/src/assets/stylesheets/ProjectIndexHeader.scss @@ -9,8 +9,7 @@ display: flex; flex-direction: column; padding: $space-2; - margin-block: 0; - margin-inline: auto; + margin: 0 auto; width: 100%; max-width: 1570px; @@ -26,8 +25,7 @@ } h1 { - margin-block: $space-0-5; - margin-inline: 0; + margin: $space-0-5 0; } h3 { @@ -42,8 +40,7 @@ } .btn { - margin-block: 0; - margin-inline: 0; + margin: 0 0; } } diff --git a/src/assets/stylesheets/ProjectIndexPagination.scss b/src/assets/stylesheets/ProjectIndexPagination.scss index f0e2f315b..a6753becd 100644 --- a/src/assets/stylesheets/ProjectIndexPagination.scss +++ b/src/assets/stylesheets/ProjectIndexPagination.scss @@ -8,8 +8,7 @@ align-items: center; margin-block-end: $space-2-5; svg { - margin-block: 0; - margin-inline: 0; + margin: 0 0; } } @@ -21,8 +20,7 @@ width: 100px; .btn { - margin-block: 0; - margin-inline: $space-0-25; + margin: 0 $space-0-25; } } @@ -30,8 +28,7 @@ height: 100%; box-sizing: border-box; padding: $space-0-5 $space-1; - margin-block: 0; - margin-inline: $space-0-25; + margin: 0 $space-0-25; border-radius: 10px; display: flex; align-items: center; diff --git a/src/assets/stylesheets/ProjectInfo.scss b/src/assets/stylesheets/ProjectInfo.scss index 485ac5279..24bd13b5d 100644 --- a/src/assets/stylesheets/ProjectInfo.scss +++ b/src/assets/stylesheets/ProjectInfo.scss @@ -13,8 +13,7 @@ background-color: inherit; .btn--primary { - margin-block: 0; - margin-inline: $space-0-5; + margin: 0 $space-0-5; } } diff --git a/src/assets/stylesheets/ProjectListItem.scss b/src/assets/stylesheets/ProjectListItem.scss index 569d784d8..dfad626b2 100644 --- a/src/assets/stylesheets/ProjectListItem.scss +++ b/src/assets/stylesheets/ProjectListItem.scss @@ -26,8 +26,7 @@ $small-table-grid: 600px; @include unique-max-width($small-table-grid) { grid-column: span 8; padding: 0; - margin-block: 0; - margin-inline: 0; + margin: 0 0; } } @@ -64,8 +63,7 @@ $small-table-grid: 600px; } svg { - margin-block: 0; - margin-inline: 0; + margin: 0 0; } @include unique-width($medium-table-grid) { @@ -80,8 +78,7 @@ $small-table-grid: 600px; } &__rename { - margin-block: 12px; - margin-inline: 16px; + margin: 12px 16px; } &__menu { diff --git a/src/assets/stylesheets/ProjectListTable.scss b/src/assets/stylesheets/ProjectListTable.scss index c711e64f8..f2687d3d8 100644 --- a/src/assets/stylesheets/ProjectListTable.scss +++ b/src/assets/stylesheets/ProjectListTable.scss @@ -8,15 +8,13 @@ $medium-table-grid: 990px; $small-table-grid: 600px; .editor-project-list { - margin-block: 0; - margin-inline: auto; + margin: 0 auto; max-width: 1570px; width: 100%; &__container { border-radius: 8px; - margin-block: $space-1-5; - margin-inline: $space-2; + margin: $space-1-5 $space-2; padding: $space-0-5; @include unique-width($small-table-grid) { @@ -24,13 +22,11 @@ $small-table-grid: 600px; } @include unique-width(767px) { - margin-block: $space-2-5; - margin-inline: $space-3; + margin: $space-2-5 $space-3; } @include unique-width(1670px) { - margin-block: $space-2-5; - margin-inline: 0; + margin: $space-2-5 0; } .--light & { @@ -94,8 +90,7 @@ $small-table-grid: 600px; p { @include font-size-1-25(regular); font-weight: $font-weight-bold; - margin-block: 0; - margin-inline: 0; + margin: 0 0; padding: $space-1-5; } } diff --git a/src/assets/stylesheets/ProjectName.scss b/src/assets/stylesheets/ProjectName.scss index 9ecd9407d..81e7b2291 100644 --- a/src/assets/stylesheets/ProjectName.scss +++ b/src/assets/stylesheets/ProjectName.scss @@ -10,8 +10,7 @@ padding-inline-start: $space-0-5; .btn--primary { - margin-block: 0; - margin-inline: $space-0-5; + margin: 0 $space-0-5; } } @@ -41,8 +40,7 @@ svg { height: $space-1-5; width: $space-1-5; - margin-block: 0; - margin-inline: 0; + margin: 0 0; } } diff --git a/src/assets/stylesheets/ProjectsPanel.scss b/src/assets/stylesheets/ProjectsPanel.scss index 5af2dbd42..84dd5e176 100644 --- a/src/assets/stylesheets/ProjectsPanel.scss +++ b/src/assets/stylesheets/ProjectsPanel.scss @@ -13,8 +13,7 @@ justify-content: center; width: 100%; box-sizing: border-box; - margin-block: 0; - margin-inline: 0; + margin: 0 0; a { color: $rpf-black; @@ -24,8 +23,7 @@ .projects-panel__download-button { width: 100%; - margin-block: 0; - margin-inline: 0; + margin: 0 0; justify-content: center; } @@ -63,8 +61,7 @@ } .content { - margin-block: auto; - margin-inline: auto; + margin: auto auto; } span { @@ -73,8 +70,7 @@ } .projects-panel__save-status { - margin-block: auto; - margin-inline: auto; + margin: auto auto; width: fit-content; } } diff --git a/src/assets/stylesheets/PythonRunner.scss b/src/assets/stylesheets/PythonRunner.scss index 28384223a..fbae78848 100644 --- a/src/assets/stylesheets/PythonRunner.scss +++ b/src/assets/stylesheets/PythonRunner.scss @@ -12,8 +12,7 @@ .pythonrunner-console { padding: $space-0-5 $space-1-5; - margin-block: 0; - margin-inline: 0; + margin: 0 0; white-space: pre-wrap; white-space: -moz-pre-wrap; white-space: -pre-wrap; diff --git a/src/assets/stylesheets/SaveStatus.scss b/src/assets/stylesheets/SaveStatus.scss index bb059fb61..a23ffaa4c 100644 --- a/src/assets/stylesheets/SaveStatus.scss +++ b/src/assets/stylesheets/SaveStatus.scss @@ -11,8 +11,7 @@ } .save-status--mobile { - margin-block: unset; - margin-inline: unset; + margin: unset unset; .save-status__text { @include font-size-1(regular); diff --git a/src/assets/stylesheets/SelectButtons.scss b/src/assets/stylesheets/SelectButtons.scss index 52bb8f7c7..327c868b0 100644 --- a/src/assets/stylesheets/SelectButtons.scss +++ b/src/assets/stylesheets/SelectButtons.scss @@ -4,8 +4,7 @@ .select-buttons { border: none; - margin-block: 0; - margin-inline: 0; + margin: 0 0; padding: 0; } diff --git a/src/assets/stylesheets/Sidebar.scss b/src/assets/stylesheets/Sidebar.scss index 53bb91ddf..58641d29b 100644 --- a/src/assets/stylesheets/Sidebar.scss +++ b/src/assets/stylesheets/Sidebar.scss @@ -43,8 +43,7 @@ } .sidebar__panel-heading { - margin-block: 0; - margin-inline: 0; + margin: 0 0; @include font-size-1-5(regular); } @@ -77,12 +76,10 @@ justify-content: center; box-sizing: border-box; border-radius: 100%; - margin-block: 0; - margin-inline: 0; + margin: 0 0; svg { - margin-block: 0; - margin-inline: 0; + margin: 0 0; } } @@ -100,8 +97,7 @@ } svg { - margin-block: 0; - margin-inline: 0; + margin: 0 0; } } diff --git a/src/assets/stylesheets/Tabs.scss b/src/assets/stylesheets/Tabs.scss index d3cc1c610..a340ef7dc 100644 --- a/src/assets/stylesheets/Tabs.scss +++ b/src/assets/stylesheets/Tabs.scss @@ -16,8 +16,7 @@ border: none; background-color: transparent; padding: 0; - margin-block: 0; - margin-inline: 0; + margin: 0 0; inset-block-start: 0; inset-block-end: 0; height: $space-3; @@ -65,8 +64,7 @@ &__tab-text { height: fit-content; width: fit-content; - margin-block: 0; - margin-inline: 0; + margin: 0 0; padding: 0 $space-0-75; white-space: nowrap; @@ -103,8 +101,7 @@ box-sizing: border-box; display: flex; overflow-y: hidden; - margin-block: 0; - margin-inline: 0; + margin: 0 0; padding: 0 $space-0-25 0 0; } diff --git a/src/assets/stylesheets/index.scss b/src/assets/stylesheets/index.scss index da43ee5f2..cb1d30506 100644 --- a/src/assets/stylesheets/index.scss +++ b/src/assets/stylesheets/index.scss @@ -1,7 +1,6 @@ html, body { - margin-block: 0; - margin-inline: 0; + margin: 0 0; } :host { diff --git a/src/web-component.html b/src/web-component.html index 7ab7b20ca..880f19908 100644 --- a/src/web-component.html +++ b/src/web-component.html @@ -13,8 +13,7 @@ display: flex; flex-direction: column; height: 100dvh; - margin-block: 0; - margin-inline: 0; + margin: 0; } .editor-wc { flex: 1 1 auto; From 79ca85af9b162e8a29da93500c6d19ea761312e7 Mon Sep 17 00:00:00 2001 From: Magdalena Jadach Date: Fri, 17 Nov 2023 10:14:01 +0000 Subject: [PATCH 07/10] Merge --- src/assets/stylesheets/Button.scss | 6 +++--- src/assets/stylesheets/ContextMenu.scss | 6 +++--- src/assets/stylesheets/ErrorMessage.scss | 2 +- src/assets/stylesheets/FilePanel.scss | 2 +- src/assets/stylesheets/InfoPanel.scss | 2 +- src/assets/stylesheets/LandingPage.scss | 12 ++++++------ src/assets/stylesheets/MobileProject.scss | 4 ++-- src/assets/stylesheets/Modal.scss | 6 +++--- src/assets/stylesheets/NewComponentButton.scss | 2 +- src/assets/stylesheets/Notifications.scss | 2 +- src/assets/stylesheets/Project.scss | 2 +- src/assets/stylesheets/ProjectBar.scss | 2 +- src/assets/stylesheets/ProjectImages.scss | 2 +- src/assets/stylesheets/ProjectIndexHeader.scss | 2 +- src/assets/stylesheets/ProjectIndexPagination.scss | 2 +- src/assets/stylesheets/ProjectListItem.scss | 4 ++-- src/assets/stylesheets/ProjectListTable.scss | 2 +- src/assets/stylesheets/ProjectName.scss | 2 +- src/assets/stylesheets/ProjectsPanel.scss | 8 ++++---- src/assets/stylesheets/PythonRunner.scss | 2 +- src/assets/stylesheets/SaveStatus.scss | 2 +- src/assets/stylesheets/SelectButtons.scss | 2 +- src/assets/stylesheets/Sidebar.scss | 8 ++++---- src/assets/stylesheets/Tabs.scss | 6 +++--- src/assets/stylesheets/index.scss | 2 +- 25 files changed, 46 insertions(+), 46 deletions(-) diff --git a/src/assets/stylesheets/Button.scss b/src/assets/stylesheets/Button.scss index 6bbe5656f..025839a65 100644 --- a/src/assets/stylesheets/Button.scss +++ b/src/assets/stylesheets/Button.scss @@ -57,7 +57,7 @@ font-weight: $font-weight-bold; gap: $space-0-5; justify-content: center; - margin: 6px 6px; + margin: 6px; min-height: 44px; min-width: 44px; padding: 10px; @@ -113,7 +113,7 @@ &--tertiary { $colours: inherit, inherit, inherit, $rpf-grey-600, inherit, inherit, inherit; @include button-styling($colours...); - margin: 0 0; + margin: 0; &:active { color: $rpf-teal-900; @@ -150,7 +150,7 @@ &--svg-only { svg { - margin: 0 0; + margin: 0; } } } diff --git a/src/assets/stylesheets/ContextMenu.scss b/src/assets/stylesheets/ContextMenu.scss index 8ba08ea03..6a1269e24 100644 --- a/src/assets/stylesheets/ContextMenu.scss +++ b/src/assets/stylesheets/ContextMenu.scss @@ -4,10 +4,10 @@ .context-menu__drop { display: flex; padding: $space-0-5 $space-1; - margin: 0 0; + margin: 0; svg { - margin: 0 0; + margin: 0; } } @@ -21,7 +21,7 @@ flex-direction: column; .context-menu__item { - margin: 0 0; + margin: 0; background-color: inherit; color: inherit; padding: $space-0-5; diff --git a/src/assets/stylesheets/ErrorMessage.scss b/src/assets/stylesheets/ErrorMessage.scss index 5097b76cf..b69439cd5 100644 --- a/src/assets/stylesheets/ErrorMessage.scss +++ b/src/assets/stylesheets/ErrorMessage.scss @@ -8,7 +8,7 @@ &__content { padding: 0; - margin: 0 0; + margin: 0; } &--medium { diff --git a/src/assets/stylesheets/FilePanel.scss b/src/assets/stylesheets/FilePanel.scss index 44061f638..26a1ab0d8 100644 --- a/src/assets/stylesheets/FilePanel.scss +++ b/src/assets/stylesheets/FilePanel.scss @@ -20,7 +20,7 @@ font-weight: $font-weight-regular; min-height: 44px; padding: $space-0-5 $space-2-5 $space-0-5 $space-0-5; - margin: 0 0; + margin: 0; span { font-weight: $font-weight-bold; overflow-x: hidden; diff --git a/src/assets/stylesheets/InfoPanel.scss b/src/assets/stylesheets/InfoPanel.scss index 7a5e5a466..b9f2c86aa 100644 --- a/src/assets/stylesheets/InfoPanel.scss +++ b/src/assets/stylesheets/InfoPanel.scss @@ -9,7 +9,7 @@ margin-block-end: $space-0-5; p { - margin: 0 0; + margin: 0; } } diff --git a/src/assets/stylesheets/LandingPage.scss b/src/assets/stylesheets/LandingPage.scss index 40fc288dd..7561ae491 100644 --- a/src/assets/stylesheets/LandingPage.scss +++ b/src/assets/stylesheets/LandingPage.scss @@ -27,7 +27,7 @@ .landing-page__projects--title { @include font-size-2-5(regular); - margin: $space-1 $space-1; + margin: $space-1; @media screen and (min-width: 375px) { @include font-size-3(regular); @@ -37,7 +37,7 @@ .landing-page__projects--subtitle { @include font-size-1-5(regular); font-weight: $font-weight-regular; - margin: $space-1 $space-1; + margin: $space-1; @media screen and (min-width: 375px) { @include font-size-2(regular); @@ -72,10 +72,10 @@ } .landing-page__paths-copy { - margin: auto auto; + margin: auto; @media screen and (min-width: 768px) { - margin: unset unset; + margin: unset; max-width: 300px; } } @@ -115,7 +115,7 @@ img { aspect-ratio: 3/2; display: block; - margin: auto auto; + margin: auto; max-width: 301px; width: 100%; } @@ -124,7 +124,7 @@ margin-inline-start: auto; img { - margin: unset unset; + margin: unset; width: unset; } } diff --git a/src/assets/stylesheets/MobileProject.scss b/src/assets/stylesheets/MobileProject.scss index 84727391d..77ccc24dd 100644 --- a/src/assets/stylesheets/MobileProject.scss +++ b/src/assets/stylesheets/MobileProject.scss @@ -2,7 +2,7 @@ @use './rpf_design_system/colours' as *; .proj-container--mobile { - margin: 0 0; + margin: 0; gap: 0; } @@ -36,7 +36,7 @@ } .mobile-nav__menu { - margin: 0 0; + margin: 0; border-radius: 0; border: none; display: flex; diff --git a/src/assets/stylesheets/Modal.scss b/src/assets/stylesheets/Modal.scss index 83ad835ce..c47f89004 100644 --- a/src/assets/stylesheets/Modal.scss +++ b/src/assets/stylesheets/Modal.scss @@ -73,12 +73,12 @@ .modal-content__subheading { @include font-size-1(regular); - margin: 0 0; + margin: 0; font-weight: $font-weight-bold; } .modal-content__text { - margin: 0 0; + margin: 0; line-height: $line-height-regular; } @@ -114,7 +114,7 @@ button, a { - margin: 0 0; + margin: 0; span { width: 100%; diff --git a/src/assets/stylesheets/NewComponentButton.scss b/src/assets/stylesheets/NewComponentButton.scss index 7dd86a38d..09d0f2809 100644 --- a/src/assets/stylesheets/NewComponentButton.scss +++ b/src/assets/stylesheets/NewComponentButton.scss @@ -4,5 +4,5 @@ justify-content: center; width: 100%; box-sizing: border-box; - margin: 0 0; + margin: 0; } diff --git a/src/assets/stylesheets/Notifications.scss b/src/assets/stylesheets/Notifications.scss index 635dee4af..fda471757 100644 --- a/src/assets/stylesheets/Notifications.scss +++ b/src/assets/stylesheets/Notifications.scss @@ -8,7 +8,7 @@ .toast--top-center__message { min-height: fit-content; padding: $space-0-25 $space-0-5; - margin: 0 0; + margin: 0; } .toast--bottom-center { diff --git a/src/assets/stylesheets/Project.scss b/src/assets/stylesheets/Project.scss index 35a5acde5..7dac1b095 100644 --- a/src/assets/stylesheets/Project.scss +++ b/src/assets/stylesheets/Project.scss @@ -38,7 +38,7 @@ overflow-y: hidden; grid-gap: $space-1; - margin: $space-1 $space-1; + margin: $space-1; height: 100%; height: -moz-available; diff --git a/src/assets/stylesheets/ProjectBar.scss b/src/assets/stylesheets/ProjectBar.scss index bececb06f..3a138a174 100644 --- a/src/assets/stylesheets/ProjectBar.scss +++ b/src/assets/stylesheets/ProjectBar.scss @@ -45,7 +45,7 @@ } .project-bar__btn { - margin: $space-0-5 $space-0-5; + margin: $space-0-5; gap: $space-0-5; .text { diff --git a/src/assets/stylesheets/ProjectImages.scss b/src/assets/stylesheets/ProjectImages.scss index 75a8c11c6..c15dd065d 100644 --- a/src/assets/stylesheets/ProjectImages.scss +++ b/src/assets/stylesheets/ProjectImages.scss @@ -27,6 +27,6 @@ } p { - margin: 0 0; + margin: 0; } } diff --git a/src/assets/stylesheets/ProjectIndexHeader.scss b/src/assets/stylesheets/ProjectIndexHeader.scss index 78cf09aa0..388f65214 100644 --- a/src/assets/stylesheets/ProjectIndexHeader.scss +++ b/src/assets/stylesheets/ProjectIndexHeader.scss @@ -40,7 +40,7 @@ } .btn { - margin: 0 0; + margin: 0; } } diff --git a/src/assets/stylesheets/ProjectIndexPagination.scss b/src/assets/stylesheets/ProjectIndexPagination.scss index a6753becd..f80e21cee 100644 --- a/src/assets/stylesheets/ProjectIndexPagination.scss +++ b/src/assets/stylesheets/ProjectIndexPagination.scss @@ -8,7 +8,7 @@ align-items: center; margin-block-end: $space-2-5; svg { - margin: 0 0; + margin: 0; } } diff --git a/src/assets/stylesheets/ProjectListItem.scss b/src/assets/stylesheets/ProjectListItem.scss index dfad626b2..799b1d52a 100644 --- a/src/assets/stylesheets/ProjectListItem.scss +++ b/src/assets/stylesheets/ProjectListItem.scss @@ -26,7 +26,7 @@ $small-table-grid: 600px; @include unique-max-width($small-table-grid) { grid-column: span 8; padding: 0; - margin: 0 0; + margin: 0; } } @@ -63,7 +63,7 @@ $small-table-grid: 600px; } svg { - margin: 0 0; + margin: 0; } @include unique-width($medium-table-grid) { diff --git a/src/assets/stylesheets/ProjectListTable.scss b/src/assets/stylesheets/ProjectListTable.scss index f2687d3d8..fa5bdb15a 100644 --- a/src/assets/stylesheets/ProjectListTable.scss +++ b/src/assets/stylesheets/ProjectListTable.scss @@ -90,7 +90,7 @@ $small-table-grid: 600px; p { @include font-size-1-25(regular); font-weight: $font-weight-bold; - margin: 0 0; + margin: 0; padding: $space-1-5; } } diff --git a/src/assets/stylesheets/ProjectName.scss b/src/assets/stylesheets/ProjectName.scss index 81e7b2291..de1b4fe1d 100644 --- a/src/assets/stylesheets/ProjectName.scss +++ b/src/assets/stylesheets/ProjectName.scss @@ -40,7 +40,7 @@ svg { height: $space-1-5; width: $space-1-5; - margin: 0 0; + margin: 0; } } diff --git a/src/assets/stylesheets/ProjectsPanel.scss b/src/assets/stylesheets/ProjectsPanel.scss index 84dd5e176..6373220cd 100644 --- a/src/assets/stylesheets/ProjectsPanel.scss +++ b/src/assets/stylesheets/ProjectsPanel.scss @@ -13,7 +13,7 @@ justify-content: center; width: 100%; box-sizing: border-box; - margin: 0 0; + margin: 0; a { color: $rpf-black; @@ -23,7 +23,7 @@ .projects-panel__download-button { width: 100%; - margin: 0 0; + margin: 0; justify-content: center; } @@ -61,7 +61,7 @@ } .content { - margin: auto auto; + auto auto; } span { @@ -70,7 +70,7 @@ } .projects-panel__save-status { - margin: auto auto; + auto auto; width: fit-content; } } diff --git a/src/assets/stylesheets/PythonRunner.scss b/src/assets/stylesheets/PythonRunner.scss index fbae78848..e3a82983f 100644 --- a/src/assets/stylesheets/PythonRunner.scss +++ b/src/assets/stylesheets/PythonRunner.scss @@ -12,7 +12,7 @@ .pythonrunner-console { padding: $space-0-5 $space-1-5; - margin: 0 0; + margin: 0; white-space: pre-wrap; white-space: -moz-pre-wrap; white-space: -pre-wrap; diff --git a/src/assets/stylesheets/SaveStatus.scss b/src/assets/stylesheets/SaveStatus.scss index a23ffaa4c..660acd114 100644 --- a/src/assets/stylesheets/SaveStatus.scss +++ b/src/assets/stylesheets/SaveStatus.scss @@ -11,7 +11,7 @@ } .save-status--mobile { - margin: unset unset; + margin: unset; .save-status__text { @include font-size-1(regular); diff --git a/src/assets/stylesheets/SelectButtons.scss b/src/assets/stylesheets/SelectButtons.scss index 327c868b0..136413298 100644 --- a/src/assets/stylesheets/SelectButtons.scss +++ b/src/assets/stylesheets/SelectButtons.scss @@ -4,7 +4,7 @@ .select-buttons { border: none; - margin: 0 0; + margin: 0; padding: 0; } diff --git a/src/assets/stylesheets/Sidebar.scss b/src/assets/stylesheets/Sidebar.scss index 58641d29b..b49cb1d64 100644 --- a/src/assets/stylesheets/Sidebar.scss +++ b/src/assets/stylesheets/Sidebar.scss @@ -43,7 +43,7 @@ } .sidebar__panel-heading { - margin: 0 0; + margin: 0; @include font-size-1-5(regular); } @@ -76,10 +76,10 @@ justify-content: center; box-sizing: border-box; border-radius: 100%; - margin: 0 0; + margin: 0; svg { - margin: 0 0; + margin: 0; } } @@ -97,7 +97,7 @@ } svg { - margin: 0 0; + margin: 0; } } diff --git a/src/assets/stylesheets/Tabs.scss b/src/assets/stylesheets/Tabs.scss index a340ef7dc..f51975e5a 100644 --- a/src/assets/stylesheets/Tabs.scss +++ b/src/assets/stylesheets/Tabs.scss @@ -16,7 +16,7 @@ border: none; background-color: transparent; padding: 0; - margin: 0 0; + margin: 0; inset-block-start: 0; inset-block-end: 0; height: $space-3; @@ -64,7 +64,7 @@ &__tab-text { height: fit-content; width: fit-content; - margin: 0 0; + margin: 0; padding: 0 $space-0-75; white-space: nowrap; @@ -101,7 +101,7 @@ box-sizing: border-box; display: flex; overflow-y: hidden; - margin: 0 0; + margin: 0; padding: 0 $space-0-25 0 0; } diff --git a/src/assets/stylesheets/index.scss b/src/assets/stylesheets/index.scss index cb1d30506..5a4806c93 100644 --- a/src/assets/stylesheets/index.scss +++ b/src/assets/stylesheets/index.scss @@ -1,6 +1,6 @@ html, body { - margin: 0 0; + margin: 0; } :host { From a76ae9e188112cd11196c05f555ea4668ca07158 Mon Sep 17 00:00:00 2001 From: Magdalena Jadach Date: Fri, 17 Nov 2023 10:21:11 +0000 Subject: [PATCH 08/10] Linter --- src/assets/stylesheets/Button.scss | 50 +++++++++++++++-------- src/assets/stylesheets/InfoPanel.scss | 10 ++--- src/assets/stylesheets/MobileProject.scss | 12 ++++-- src/assets/stylesheets/SaveStatus.scss | 11 +++-- 4 files changed, 51 insertions(+), 32 deletions(-) diff --git a/src/assets/stylesheets/Button.scss b/src/assets/stylesheets/Button.scss index 025839a65..67eae2afa 100644 --- a/src/assets/stylesheets/Button.scss +++ b/src/assets/stylesheets/Button.scss @@ -1,11 +1,19 @@ -@use './rpf_design_system/spacing' as *; -@use './rpf_design_system/font-weight' as *; -@use './rpf_design_system/colours' as *; - -@mixin button-styling($bg, $active-bg, $dis-bg, $dis-c, $focus-bg, $hover-bg, $c: default) { +@use "./rpf_design_system/spacing" as *; +@use "./rpf_design_system/font-weight" as *; +@use "./rpf_design_system/colours" as *; + +@mixin button-styling( + $bg, + $active-bg, + $dis-bg, + $dis-c, + $focus-bg, + $hover-bg, + $c: default +) { background-color: $bg; - @if $c == 'default' { + @if $c == "default" { color: $rpf-text-primary; svg { @@ -19,7 +27,8 @@ } } - &:active, .btn-outer:active & { + &:active, + .btn-outer:active & { background-color: $active-bg; @content; } @@ -33,12 +42,14 @@ } } - &:focus-visible, .btn-outer:focus-visible & { + &:focus-visible, + .btn-outer:focus-visible & { background-color: $focus-bg; @content; } - &:hover, .btn-outer:hover & { + &:hover, + .btn-outer:hover & { background-color: $hover-bg; @content; } @@ -83,7 +94,8 @@ // Variants &--primary { - $colours: $rpf-teal-800, $rpf-teal-600, $rpf-teal-200, $rpf-grey-600, $rpf-teal-800, $rpf-teal-900; + $colours: $rpf-teal-800, $rpf-teal-600, $rpf-teal-200, $rpf-grey-600, + $rpf-teal-800, $rpf-teal-900; @include button-styling($colours...); } @@ -111,9 +123,10 @@ } &--tertiary { - $colours: inherit, inherit, inherit, $rpf-grey-600, inherit, inherit, inherit; + $colours: inherit, inherit, inherit, $rpf-grey-600, inherit, inherit, + inherit; @include button-styling($colours...); - margin: 0; + margin: 0; &:active { color: $rpf-teal-900; @@ -133,7 +146,8 @@ } &--danger { - $colours: $rpf-alert-error, $rpf-alert-error, $rpf-alert-error, $rpf-white, $rpf-alert-error, $rpf-alerts-error-tint, $rpf-white; + $colours: $rpf-alert-error, $rpf-alert-error, $rpf-alert-error, $rpf-white, + $rpf-alert-error, $rpf-alerts-error-tint, $rpf-white; @include button-styling($colours...); &:focus-visible { @@ -218,12 +232,14 @@ } .btn--primary { - $colours: $rpf-teal-400, $rpf-teal-200, $rpf-grey-200, $rpf-grey-700, $rpf-teal-400, $rpf-teal-600; + $colours: $rpf-teal-400, $rpf-teal-200, $rpf-grey-200, $rpf-grey-700, + $rpf-teal-400, $rpf-teal-600; @include button-styling($colours...); } .btn--secondary { - $colours: inherit, inherit, $rpf-grey-700, $rpf-grey-100, inherit, inherit, $rpf-white; + $colours: inherit, inherit, $rpf-grey-700, $rpf-grey-100, inherit, inherit, + $rpf-white; @include button-styling($colours...); border: 2px solid $rpf-teal-400; @@ -246,7 +262,8 @@ } .btn--tertiary { - $colours: inherit, inherit, inherit, $rpf-grey-100, inherit, inherit, $rpf-white; + $colours: inherit, inherit, inherit, $rpf-grey-100, inherit, inherit, + $rpf-white; @include button-styling($colours...); &:active { @@ -266,4 +283,3 @@ } } } - diff --git a/src/assets/stylesheets/InfoPanel.scss b/src/assets/stylesheets/InfoPanel.scss index b9f2c86aa..5746b3a7e 100644 --- a/src/assets/stylesheets/InfoPanel.scss +++ b/src/assets/stylesheets/InfoPanel.scss @@ -1,7 +1,7 @@ -@use './rpf_design_system/spacing' as *; -@use './rpf_design_system/font-size' 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-size" as *; +@use "./rpf_design_system/font-weight" as *; +@use "./rpf_design_system/colours" as *; .info-panel { border-radius: $space-0-5; @@ -9,7 +9,7 @@ margin-block-end: $space-0-5; p { - margin: 0; + margin: 0; } } diff --git a/src/assets/stylesheets/MobileProject.scss b/src/assets/stylesheets/MobileProject.scss index 77ccc24dd..c183f7944 100644 --- a/src/assets/stylesheets/MobileProject.scss +++ b/src/assets/stylesheets/MobileProject.scss @@ -1,5 +1,5 @@ -@use './rpf_design_system/spacing' as *; -@use './rpf_design_system/colours' as *; +@use "./rpf_design_system/spacing" as *; +@use "./rpf_design_system/colours" as *; .proj-container--mobile { margin: 0; @@ -14,7 +14,8 @@ border-radius: 8px; } -#app, #wc { +#app, +#wc { .mobile-nav { display: flex; width: 100%; @@ -79,7 +80,10 @@ } } -#app.--light, #app.--dark, #wc.--light, #wc.--dark { +#app.--light, +#app.--dark, +#wc.--light, +#wc.--dark { .mobile-nav { border-bottom: none; diff --git a/src/assets/stylesheets/SaveStatus.scss b/src/assets/stylesheets/SaveStatus.scss index 660acd114..24b89a8bb 100644 --- a/src/assets/stylesheets/SaveStatus.scss +++ b/src/assets/stylesheets/SaveStatus.scss @@ -1,13 +1,13 @@ -@use './rpf_design_system/spacing' as *; -@use './rpf_design_system/font-size' as *; -@use './rpf_design_system/colours' as *; +@use "./rpf_design_system/spacing" as *; +@use "./rpf_design_system/font-size" as *; +@use "./rpf_design_system/colours" as *; .save-status { align-items: center; display: flex; justify-content: flex-end; - margin-block: 0; - margin-inline: $space-1 $space-0-5; + margin-block: 0; + margin-inline: $space-1 $space-0-5; } .save-status--mobile { @@ -20,5 +20,4 @@ .save-status__icon { display: flex; - } From 891f842c64e610e311004de7a1e7235c54d014b3 Mon Sep 17 00:00:00 2001 From: Magdalena Jadach Date: Fri, 17 Nov 2023 13:58:40 +0000 Subject: [PATCH 09/10] Fix a few issues --- src/assets/stylesheets/ContextMenu.scss | 3 ++- src/assets/stylesheets/MobileProjectBar.scss | 3 +-- src/assets/stylesheets/Modal.scss | 2 +- src/assets/stylesheets/ProjectsPanel.scss | 4 ++-- 4 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/assets/stylesheets/ContextMenu.scss b/src/assets/stylesheets/ContextMenu.scss index 816dcf47a..f2110b2db 100644 --- a/src/assets/stylesheets/ContextMenu.scss +++ b/src/assets/stylesheets/ContextMenu.scss @@ -14,7 +14,8 @@ .context-menu { list-style-type: none; padding: 0; - margin-inline-start: $space-0-5; + margin-inline-start: $space-0-5 0; + margin-block: 0; border-radius: 5px; display: flex; flex-direction: column; diff --git a/src/assets/stylesheets/MobileProjectBar.scss b/src/assets/stylesheets/MobileProjectBar.scss index 305d63aec..aa38aac83 100644 --- a/src/assets/stylesheets/MobileProjectBar.scss +++ b/src/assets/stylesheets/MobileProjectBar.scss @@ -15,8 +15,7 @@ .mobile-project-bar__name { @include font-size-0-75(regular); font-weight: $font-weight-bold; - margin-block: auto 0; - margin-inline: auto; + margin: auto 0; } .--dark { diff --git a/src/assets/stylesheets/Modal.scss b/src/assets/stylesheets/Modal.scss index c47f89004..c06afef81 100644 --- a/src/assets/stylesheets/Modal.scss +++ b/src/assets/stylesheets/Modal.scss @@ -59,7 +59,7 @@ .modal-content__heading { @include font-size-1-5(regular); - margin-block: $space-0-5 $space-0-5; + margin-block: $space-0-5; margin-inline: $space-0-5 0; } diff --git a/src/assets/stylesheets/ProjectsPanel.scss b/src/assets/stylesheets/ProjectsPanel.scss index ee8229de5..f255affc8 100644 --- a/src/assets/stylesheets/ProjectsPanel.scss +++ b/src/assets/stylesheets/ProjectsPanel.scss @@ -61,7 +61,7 @@ } .content { - auto auto; + margin: auto; } span { @@ -70,7 +70,7 @@ } .projects-panel__save-status { - auto auto; + margin: auto; width: fit-content; } } From 0d567b024e9c4ec0d473674a533761021cdb9026 Mon Sep 17 00:00:00 2001 From: Magdalena Jadach Date: Fri, 17 Nov 2023 15:58:37 +0000 Subject: [PATCH 10/10] Remove the inline bit --- src/assets/stylesheets/ContextMenu.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/assets/stylesheets/ContextMenu.scss b/src/assets/stylesheets/ContextMenu.scss index f2110b2db..ef5151861 100644 --- a/src/assets/stylesheets/ContextMenu.scss +++ b/src/assets/stylesheets/ContextMenu.scss @@ -14,7 +14,7 @@ .context-menu { list-style-type: none; padding: 0; - margin-inline-start: $space-0-5 0; + margin-inline: $space-0-5 0; margin-block: 0; border-radius: 5px; display: flex;