commit 8350077f3d20bf4647728af5935f5b9303c0b948 parent 7cc26d5bd4eeb9935a62420a63581997182c42e2 Author: Maxx Crawford <mcrawford@mozilla.com> Date: Tue, 9 Dec 2025 18:50:34 +0000 Bug 2001446 - Update border-color to use logical properties r=home-newtab-reviewers,ini Differential Revision: https://phabricator.services.mozilla.com/D273487 Diffstat:
11 files changed, 40 insertions(+), 40 deletions(-)
diff --git a/browser/extensions/newtab/content-src/components/Card/_Card.scss b/browser/extensions/newtab/content-src/components/Card/_Card.scss @@ -90,7 +90,7 @@ position: relative; &::after { - border-bottom: 1px solid var(--newtab-card-hairline-color); + border-block-end: 1px solid var(--newtab-card-hairline-color); inset-block-end: 0; content: ''; position: absolute; @@ -293,7 +293,7 @@ &::after { border: 1px solid var(--newtab-card-hairline-color); - border-bottom: 0; + border-block-end: 0; border-radius: var(--border-radius-medium); content: ''; position: absolute; diff --git a/browser/extensions/newtab/content-src/components/ContextMenu/_ContextMenu.scss b/browser/extensions/newtab/content-src/components/ContextMenu/_ContextMenu.scss @@ -24,7 +24,7 @@ width: 100%; &.separator { - border-bottom: 1px solid var(--border-color); + border-block-end: 1px solid var(--border-color); margin: var(--space-xsmall) 0; } diff --git a/browser/extensions/newtab/content-src/components/CustomizeMenu/_CustomizeMenu.scss b/browser/extensions/newtab/content-src/components/CustomizeMenu/_CustomizeMenu.scss @@ -353,7 +353,7 @@ } .divider { - border-top: 1px var(--border-color) solid; + border-block-start: 1px var(--border-color) solid; margin: 0 calc(var(--space-large) * -1); } diff --git a/browser/extensions/newtab/content-src/components/DiscoveryStreamAdmin/DiscoveryStreamAdmin.scss b/browser/extensions/newtab/content-src/components/DiscoveryStreamAdmin/DiscoveryStreamAdmin.scss @@ -119,13 +119,13 @@ .message-item { &:first-child td { - border-top: 1px solid var(--border-color); + border-block-start: 1px solid var(--border-color); } td { vertical-align: top; padding: var(--space-small); - border-bottom: 1px solid var(--border-color); + border-block-end: 1px solid var(--border-color); &.min { width: 1%; diff --git a/browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/Navigation/_Navigation.scss b/browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/Navigation/_Navigation.scss @@ -127,7 +127,7 @@ grid-template: repeat(8, 1fr) / repeat(1, 1fr); li { - border-top: 1px solid var(--border-color); + border-block-start: 1px solid var(--border-color); line-height: 24px; font-size: var(--font-size-small); @@ -149,7 +149,7 @@ } &:nth-last-child(1) { - border-bottom: 1px solid var(--border-color); + border-block-end: 1px solid var(--border-color); } } @@ -158,7 +158,7 @@ li { &:nth-child(3) { - border-bottom: 1px solid var(--border-color); + border-block-end: 1px solid var(--border-color); } } } @@ -169,11 +169,11 @@ li { &:nth-child(odd) { - border-bottom: 0; + border-block-end: 0; } &:nth-child(even) { - border-bottom: 1px solid var(--border-color); + border-block-end: 1px solid var(--border-color); } } } diff --git a/browser/extensions/newtab/content-src/components/ModalOverlay/_ModalOverlay.scss b/browser/extensions/newtab/content-src/components/ModalOverlay/_ModalOverlay.scss @@ -65,7 +65,7 @@ $modal-scrollbar-z-index: 1100; } .footer { - border-top: 1px solid var(--border-color); + border-block-start: 1px solid var(--border-color); border-radius: var(--border-radius-small); height: 70px; width: 100%; diff --git a/browser/extensions/newtab/content-src/components/Search/_Search.scss b/browser/extensions/newtab/content-src/components/Search/_Search.scss @@ -362,7 +362,7 @@ $glyph-forward: url('chrome://browser/skin/forward.svg'); $search-icon-padding: 16px; $search-header-bar-height: 95px; - border-bottom: solid 1px var(--border-color); + border-block-end: solid 1px var(--border-color); padding: var(--space-xlarge) 0; background-color: var(--newtab-overlay-color); min-height: $search-header-bar-height; @@ -436,7 +436,7 @@ $glyph-forward: url('chrome://browser/skin/forward.svg'); } .contentSearchOneOffsTable { - border-top: solid 1px var(--border-color); + border-block-start: solid 1px var(--border-color); background-color: var(--newtab-background-color); } diff --git a/browser/extensions/newtab/content-src/components/Weather/_Weather.scss b/browser/extensions/newtab/content-src/components/Weather/_Weather.scss @@ -303,8 +303,8 @@ outline: var(--focus-outline); &::after { - border-bottom: var(--focus-outline); - border-right: var(--focus-outline); + border-block-end: var(--focus-outline); + border-inline-end: var(--focus-outline); } } } diff --git a/browser/extensions/newtab/content-src/styles/_mixins.scss b/browser/extensions/newtab/content-src/styles/_mixins.scss @@ -28,20 +28,20 @@ @content; @include dark-theme-only { - border-top: 1px solid $grey-60; + border-block-start: 1px solid $grey-60; } - border-top: 1px solid $grey-30; + border-block-start: 1px solid $grey-30; } @mixin ds-border-bottom { @content; @include dark-theme-only { - border-bottom: 1px solid $grey-60; + border-block-end: 1px solid $grey-60; } - border-bottom: 1px solid $grey-30; + border-block-end: 1px solid $grey-30; } @mixin ds-fade-in($halo-color: $blue-50-30) { diff --git a/browser/extensions/newtab/content-src/styles/activity-stream.scss b/browser/extensions/newtab/content-src/styles/activity-stream.scss @@ -83,7 +83,7 @@ h2 { } .actions { - border-top: 1px solid var(--border-color); + border-block-start: 1px solid var(--border-color); display: flex; flex-direction: row; flex-wrap: wrap; diff --git a/browser/extensions/newtab/css/activity-stream.css b/browser/extensions/newtab/css/activity-stream.css @@ -382,7 +382,7 @@ h2 { } .actions { - border-top: 1px solid var(--border-color); + border-block-start: 1px solid var(--border-color); display: flex; flex-direction: row; flex-wrap: wrap; @@ -1765,7 +1765,7 @@ main section { @media (height > 700px) { .activity-stream .fixed-search .search-wrapper { - border-bottom: solid 1px var(--border-color); + border-block-end: solid 1px var(--border-color); padding: var(--space-xlarge) 0; background-color: var(--newtab-overlay-color); min-height: 95px; @@ -1823,7 +1823,7 @@ main section { border: 0; } .contentSearchSuggestionTable .contentSearchOneOffsTable { - border-top: solid 1px var(--border-color); + border-block-start: solid 1px var(--border-color); background-color: var(--newtab-background-color); } .contentSearchSuggestionTable .contentSearchSearchWithHeaderSearchText { @@ -1885,7 +1885,7 @@ main section { width: 100%; } .context-menu > ul > li.separator { - border-bottom: 1px solid var(--border-color); + border-block-end: 1px solid var(--border-color); margin: var(--space-xsmall) 0; } .context-menu > ul > li > a, @@ -2256,7 +2256,7 @@ main section { color: var(--newtab-primary-action-background); } .home-section .divider { - border-top: 1px var(--border-color) solid; + border-block-start: 1px var(--border-color) solid; margin: 0 calc(var(--space-large) * -1); } .home-section .external-link { @@ -2982,8 +2982,8 @@ main section { outline: var(--focus-outline); } .weatherOptIn dialog:focus-visible::after { - border-bottom: var(--focus-outline); - border-right: var(--focus-outline); + border-block-end: var(--focus-outline); + border-inline-end: var(--focus-outline); } .weatherOptIn dialog .weatherOptInContent { display: flex; @@ -3617,7 +3617,7 @@ dialog:dir(rtl)::after { position: relative; } .card-outer .card-preview-image-outer::after { - border-bottom: 1px solid var(--newtab-card-hairline-color); + border-block-end: 1px solid var(--newtab-card-hairline-color); inset-block-end: 0; content: ""; position: absolute; @@ -3773,7 +3773,7 @@ dialog:dir(rtl)::after { } .compact-cards .card-outer .card-context::after { border: 1px solid var(--newtab-card-hairline-color); - border-bottom: 0; + border-block-end: 0; border-radius: var(--border-radius-medium); content: ""; position: absolute; @@ -4016,12 +4016,12 @@ dialog:dir(rtl)::after { overflow-y: scroll; } .discoverystream-admin .message-item:first-child td { - border-top: 1px solid var(--border-color); + border-block-start: 1px solid var(--border-color); } .discoverystream-admin .message-item td { vertical-align: top; padding: var(--space-small); - border-bottom: 1px solid var(--border-color); + border-block-end: 1px solid var(--border-color); } .discoverystream-admin .message-item td.min { width: 1%; @@ -4293,7 +4293,7 @@ dialog:dir(rtl)::after { } } .modalOverlayInner .footer { - border-top: 1px solid var(--border-color); + border-block-start: 1px solid var(--border-color); border-radius: var(--border-radius-small); height: 70px; width: 100%; @@ -6889,11 +6889,11 @@ dialog:dir(rtl)::after { .ds-hr { border: 0; - border-top: 1px solid #D7D7DB; + border-block-start: 1px solid #D7D7DB; height: 0; } [lwt-newtab-brighttext] .ds-hr { - border-top: 1px solid #4A4A4F; + border-block-start: 1px solid #4A4A4F; } /* stylelint-disable max-nesting-depth */ @@ -7007,7 +7007,7 @@ dialog:dir(rtl)::after { grid-template: repeat(8, 1fr)/repeat(1, 1fr); } .ds-navigation.ds-navigation-new-topics ul li { - border-top: 1px solid var(--border-color); + border-block-start: 1px solid var(--border-color); line-height: 24px; font-size: var(--font-size-small); /** @@ -7025,14 +7025,14 @@ dialog:dir(rtl)::after { display: none; } .ds-navigation.ds-navigation-new-topics ul li:nth-last-child(1) { - border-bottom: 1px solid var(--border-color); + border-block-end: 1px solid var(--border-color); } @media (min-width: 610px) { .ds-navigation.ds-navigation-new-topics ul { grid-template: repeat(3, 1fr)/repeat(2, 1fr); } .ds-navigation.ds-navigation-new-topics ul li:nth-child(3) { - border-bottom: 1px solid var(--border-color); + border-block-end: 1px solid var(--border-color); } } @media (min-width: 866px) { @@ -7040,10 +7040,10 @@ dialog:dir(rtl)::after { grid-template: repeat(2, 1fr)/repeat(3, 1fr); } .ds-navigation.ds-navigation-new-topics ul li:nth-child(odd) { - border-bottom: 0; + border-block-end: 0; } .ds-navigation.ds-navigation-new-topics ul li:nth-child(even) { - border-bottom: 1px solid var(--border-color); + border-block-end: 1px solid var(--border-color); } } @media (min-width: 1122px) {