From 659ba75d65c4a3bf45524318758972ca2d794d16 Mon Sep 17 00:00:00 2001 From: Yohn Date: Sun, 19 Jan 2025 13:59:55 -0500 Subject: [PATCH 1/4] -right: change to -inline-end: --- scss/components/_card.scss | 2 +- scss/components/_group.scss | 4 ++-- scss/components/_modal.scss | 2 +- scss/components/_nav.scss | 4 ++-- scss/components/_tab.scss | 2 +- scss/components/_timeline.scss | 2 +- scss/components/_tooltip.scss | 4 ++-- scss/content/_typography.scss | 2 +- scss/forms/_basics.scss | 6 +++--- scss/forms/_input-date.scss | 6 +++--- scss/forms/_input-file.scss | 2 +- scss/forms/_validation.scss | 10 +++++----- scss/layout/_container.scss | 6 +++--- scss/layout/_landmarks.scss | 4 ++-- 14 files changed, 28 insertions(+), 28 deletions(-) diff --git a/scss/components/_card.scss b/scss/components/_card.scss index 6d5da281e..f1845fbb2 100644 --- a/scss/components/_card.scss +++ b/scss/components/_card.scss @@ -19,7 +19,7 @@ > header, > footer { - margin-right: calc(var(#{$css-var-prefix}block-spacing-horizontal) * -1); + margin-inline-end: calc(var(#{$css-var-prefix}block-spacing-horizontal) * -1); margin-left: calc(var(#{$css-var-prefix}block-spacing-horizontal) * -1); padding: calc(var(#{$css-var-prefix}block-spacing-vertical) * 0.66) var(#{$css-var-prefix}block-spacing-horizontal); diff --git a/scss/components/_group.scss b/scss/components/_group.scss index a9152f65a..4f4a5102e 100644 --- a/scss/components/_group.scss +++ b/scss/components/_group.scss @@ -174,7 +174,7 @@ > legend, > details > summary { &:not(:first-child) { - margin-right: 0; + margin-inline-end: 0; margin-left: auto; border-top-right-radius: 0; border-top-left-radius: var(#{$css-var-prefix}border-radius); @@ -201,7 +201,7 @@ > legend, > details > summary { &:not(:first-child) { - margin-right: calc(var(#{$css-var-prefix}border-width) * -1); + margin-inline-end: calc(var(#{$css-var-prefix}border-width) * -1); margin-left: auto; } } diff --git a/scss/components/_modal.scss b/scss/components/_modal.scss index c1cc8c6ac..fdce1c50b 100644 --- a/scss/components/_modal.scss +++ b/scss/components/_modal.scss @@ -131,7 +131,7 @@ // Utilities @if $enable-classes { .modal-is-open { - padding-right: var(#{$css-var-prefix}scrollbar-width, 0px); + padding-inline-end: var(#{$css-var-prefix}scrollbar-width, 0px); overflow: hidden; pointer-events: none; touch-action: none; diff --git a/scss/components/_nav.scss b/scss/components/_nav.scss index 1281c2551..136583cec 100644 --- a/scss/components/_nav.scss +++ b/scss/components/_nav.scss @@ -41,7 +41,7 @@ margin-left: calc(var(#{$css-var-prefix}nav-element-spacing-horizontal) * -1); } &:last-of-type { - margin-right: calc(var(#{$css-var-prefix}nav-element-spacing-horizontal) * -1); + margin-inline-end: calc(var(#{$css-var-prefix}nav-element-spacing-horizontal) * -1); } } @@ -71,7 +71,7 @@ input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]), select { height: auto; - margin-right: inherit; + margin-inline-end: inherit; margin-bottom: 0; margin-left: inherit; padding: calc( diff --git a/scss/components/_tab.scss b/scss/components/_tab.scss index 3251e1288..f4da00e82 100644 --- a/scss/components/_tab.scss +++ b/scss/components/_tab.scss @@ -93,7 +93,7 @@ button { width: 100%; margin-top: 0.2rem; - margin-right: 0; + margin-inline-end: 0; } } } diff --git a/scss/components/_timeline.scss b/scss/components/_timeline.scss index 830ae3c35..ab9257d70 100644 --- a/scss/components/_timeline.scss +++ b/scss/components/_timeline.scss @@ -103,7 +103,7 @@ > .point { // Full-width containers width: 100%; - padding-right: 25px; + padding-inline-end: 25px; padding-left: 40px; // Make all right containers behave like the left ones diff --git a/scss/components/_tooltip.scss b/scss/components/_tooltip.scss index ff4dccf15..f17584d81 100644 --- a/scss/components/_tooltip.scss +++ b/scss/components/_tooltip.scss @@ -51,7 +51,7 @@ padding: 0; transform: translate(-50%, 0rem); border-top: 0.3rem solid; - border-right: 0.3rem solid transparent; + border-inline-end: 0.3rem solid transparent; border-left: 0.3rem solid transparent; border-radius: 0; background-color: transparent; @@ -104,7 +104,7 @@ &:after { transform: translate(-0.3rem, -50%); border: 0.3rem solid transparent; - border-right: 0.3rem solid; + border-inline-end: 0.3rem solid; } } diff --git a/scss/content/_typography.scss b/scss/content/_typography.scss index e96aace3d..1e35ae17a 100644 --- a/scss/content/_typography.scss +++ b/scss/content/_typography.scss @@ -145,7 +145,7 @@ display: block; margin: var(#{$css-var-prefix}typography-spacing-vertical) 0; padding: var(#{$css-var-prefix}spacing); - border-right: none; + border-inline-end: none; border-left: 0.25rem solid var(#{$css-var-prefix}blockquote-border-color); border-inline-start: 0.25rem solid var(#{$css-var-prefix}blockquote-border-color); border-inline-end: none; diff --git a/scss/forms/_basics.scss b/scss/forms/_basics.scss index 6badf5a30..75d250709 100644 --- a/scss/forms/_basics.scss +++ b/scss/forms/_basics.scss @@ -278,7 +278,7 @@ ) { &[aria-invalid] { @if $enable-important { - padding-right: calc( + padding-inline-end: calc( var(#{$css-var-prefix}form-element-spacing-horizontal) + 1.5rem ) !important; padding-left: var(#{$css-var-prefix}form-element-spacing-horizontal); @@ -287,7 +287,7 @@ var(#{$css-var-prefix}form-element-spacing-horizontal) + 1.5rem ) !important; } @else { - padding-right: calc(var(#{$css-var-prefix}form-element-spacing-horizontal) + 1.5rem); + padding-inline-end: calc(var(#{$css-var-prefix}form-element-spacing-horizontal) + 1.5rem); padding-left: var(#{$css-var-prefix}form-element-spacing-horizontal); padding-inline-start: var(#{$css-var-prefix}form-element-spacing-horizontal); padding-inline-end: calc(var(#{$css-var-prefix}form-element-spacing-horizontal) + 1.5rem); @@ -412,7 +412,7 @@ } &:not([multiple], [size]) { - padding-right: calc(var(#{$css-var-prefix}form-element-spacing-horizontal) + 1.5rem); + padding-inline-end: calc(var(#{$css-var-prefix}form-element-spacing-horizontal) + 1.5rem); padding-left: var(#{$css-var-prefix}form-element-spacing-horizontal); padding-inline-start: var(#{$css-var-prefix}form-element-spacing-horizontal); padding-inline-end: calc(var(#{$css-var-prefix}form-element-spacing-horizontal) + 1.5rem); diff --git a/scss/forms/_input-date.scss b/scss/forms/_input-date.scss index 823910752..c8a60884e 100644 --- a/scss/forms/_input-date.scss +++ b/scss/forms/_input-date.scss @@ -11,7 +11,7 @@ &:is([type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"]) { #{$css-var-prefix}icon-position: 0.75rem; #{$css-var-prefix}icon-width: 1rem; - padding-right: calc(var(#{$css-var-prefix}icon-width) + var(#{$css-var-prefix}icon-position)); + padding-inline-end: calc(var(#{$css-var-prefix}icon-width) + var(#{$css-var-prefix}icon-position)); background-image: var(#{$css-var-prefix}icon-date); background-position: center right var(#{$css-var-prefix}icon-position); background-size: var(#{$css-var-prefix}icon-width) auto; @@ -32,7 +32,7 @@ #{$parent-selector} [type="week"] { &::-webkit-calendar-picker-indicator { width: var(#{$css-var-prefix}icon-width); - margin-right: calc(var(#{$css-var-prefix}icon-width) * -1); + margin-inline-end: calc(var(#{$css-var-prefix}icon-width) * -1); margin-left: var(#{$css-var-prefix}icon-position); opacity: 0; } @@ -46,7 +46,7 @@ #{$parent-selector} [type="month"], #{$parent-selector} [type="time"], #{$parent-selector} [type="week"] { - padding-right: var(#{$css-var-prefix}form-element-spacing-horizontal) !important; + padding-inline-end: var(#{$css-var-prefix}form-element-spacing-horizontal) !important; background-image: none !important; } } diff --git a/scss/forms/_input-file.scss b/scss/forms/_input-file.scss index a758dc4a2..130933890 100644 --- a/scss/forms/_input-file.scss +++ b/scss/forms/_input-file.scss @@ -18,7 +18,7 @@ background: none; &::file-selector-button { - margin-right: calc(var(#{$css-var-prefix}spacing) / 2); + margin-inline-end: calc(var(#{$css-var-prefix}spacing) / 2); padding: calc(var(#{$css-var-prefix}form-element-spacing-vertical) * 0.5) var(#{$css-var-prefix}form-element-spacing-horizontal); } diff --git a/scss/forms/_validation.scss b/scss/forms/_validation.scss index d14a18ffb..a69ea3fa3 100644 --- a/scss/forms/_validation.scss +++ b/scss/forms/_validation.scss @@ -9,7 +9,7 @@ #{$parent-selector} form:not([novalidate]) { input:user-valid:not(#{$excluded-elements}), input:user-invalid:not(#{$excluded-elements}) { - padding-right: calc(1.5em + 0.75rem); + padding-inline-end: calc(1.5em + 0.75rem); background-position: right calc(0.375em + 0.1875rem) center; background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem); background-repeat: no-repeat; @@ -17,8 +17,8 @@ select:user-valid:not([multiple], [size]), select:user-invalid:not([multiple], [size]) { - padding-right: calc(1.5em + 0.75rem); - padding-right: 4.2rem; + padding-inline-end: calc(1.5em + 0.75rem); + padding-inline-end: 4.2rem; background-position: right 0.75rem center, center right 2.25rem; @@ -35,7 +35,7 @@ textarea:user-valid:not(:placeholder-shown), textarea:user-invalid:not(:placeholder-shown) { - padding-right: calc(1.5em + 0.75rem); + padding-inline-end: calc(1.5em + 0.75rem); background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem); background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem); background-repeat: no-repeat; @@ -123,7 +123,7 @@ display: inline-block; width: 1rem; height: 1rem; - margin-right: 10px; + margin-inline-end: 10px; padding: 0; padding-top: calc(var(#{$css-var-prefix}spacing) * 0.25); border: none; diff --git a/scss/layout/_container.scss b/scss/layout/_container.scss index 8c74f84f9..93bd6c7d0 100644 --- a/scss/layout/_container.scss +++ b/scss/layout/_container.scss @@ -9,9 +9,9 @@ #{$parent-selector} .container, #{$parent-selector} .container-fluid { width: 100%; - margin-right: auto; + margin-inline-end: auto; margin-left: auto; - padding-right: var(#{$css-var-prefix}spacing); + padding-inline-end: var(#{$css-var-prefix}spacing); padding-left: var(#{$css-var-prefix}spacing); } @@ -23,7 +23,7 @@ max-width: map.get($values, "viewport"); @if $first-breakpoint { $first-breakpoint: false; - padding-right: 0; + padding-inline-end: 0; padding-left: 0; } } diff --git a/scss/layout/_landmarks.scss b/scss/layout/_landmarks.scss index 30dcac1c3..d51f193c8 100644 --- a/scss/layout/_landmarks.scss +++ b/scss/layout/_landmarks.scss @@ -37,7 +37,7 @@ @if $enable-semantic-container { $first-breakpoint: true; width: 100%; - margin-right: auto; + margin-inline-end: auto; margin-left: auto; padding: var(#{$css-var-prefix}block-spacing-vertical) var(#{$css-var-prefix}block-spacing-horizontal); @@ -49,7 +49,7 @@ max-width: map.get($values, "viewport"); @if $first-breakpoint { $first-breakpoint: false; - padding-right: 0; + padding-inline-end: 0; padding-left: 0; } } From ed230e2c3c46673d598a6efaf423fef6c98ad998 Mon Sep 17 00:00:00 2001 From: Yohn Date: Sun, 19 Jan 2025 14:01:35 -0500 Subject: [PATCH 2/4] -left: change to -inline-start: --- scss/components/_card.scss | 2 +- scss/components/_group.scss | 12 ++++++------ scss/components/_modal.scss | 6 +++--- scss/components/_nav.scss | 4 ++-- scss/components/_timeline.scss | 4 ++-- scss/components/_tooltip.scss | 4 ++-- scss/content/_typography.scss | 2 +- scss/forms/_basics.scss | 6 +++--- scss/forms/_input-date.scss | 2 +- scss/forms/_input-file.scss | 4 ++-- scss/forms/_validation.scss | 2 +- scss/layout/_container.scss | 6 +++--- scss/layout/_landmarks.scss | 4 ++-- 13 files changed, 29 insertions(+), 29 deletions(-) diff --git a/scss/components/_card.scss b/scss/components/_card.scss index f1845fbb2..777a1c83a 100644 --- a/scss/components/_card.scss +++ b/scss/components/_card.scss @@ -20,7 +20,7 @@ > header, > footer { margin-inline-end: calc(var(#{$css-var-prefix}block-spacing-horizontal) * -1); - margin-left: calc(var(#{$css-var-prefix}block-spacing-horizontal) * -1); + margin-inline-start: calc(var(#{$css-var-prefix}block-spacing-horizontal) * -1); padding: calc(var(#{$css-var-prefix}block-spacing-vertical) * 0.66) var(#{$css-var-prefix}block-spacing-horizontal); background-color: var(#{$css-var-prefix}card-sectioning-background-color); diff --git a/scss/components/_group.scss b/scss/components/_group.scss index 4f4a5102e..5d1cbeb29 100644 --- a/scss/components/_group.scss +++ b/scss/components/_group.scss @@ -39,7 +39,7 @@ margin-bottom: 0; &:not(:first-child) { - margin-left: 0; + margin-inline-start: 0; border-top-left-radius: 0; border-bottom-left-radius: 0; } @@ -56,7 +56,7 @@ > details { &:not(:first-child) > summary { - margin-left: 0; + margin-inline-start: 0; border-top-left-radius: 0; border-bottom-left-radius: 0; } @@ -82,7 +82,7 @@ > legend, > details > summary { &:not(:first-child) { - margin-left: calc(var(#{$css-var-prefix}border-width) * -1); + margin-inline-start: calc(var(#{$css-var-prefix}border-width) * -1); } } @@ -175,7 +175,7 @@ > details > summary { &:not(:first-child) { margin-inline-end: 0; - margin-left: auto; + margin-inline-start: auto; border-top-right-radius: 0; border-top-left-radius: var(#{$css-var-prefix}border-radius); border-bottom-right-radius: 0; @@ -202,7 +202,7 @@ > details > summary { &:not(:first-child) { margin-inline-end: calc(var(#{$css-var-prefix}border-width) * -1); - margin-left: auto; + margin-inline-start: auto; } } } @@ -244,7 +244,7 @@ > label, > legend, > details > summary { - margin-left: 0; + margin-inline-start: 0; border-top-left-radius: 0; border-bottom-left-radius: 0; } diff --git a/scss/components/_modal.scss b/scss/components/_modal.scss index fdce1c50b..917480014 100644 --- a/scss/components/_modal.scss +++ b/scss/components/_modal.scss @@ -71,7 +71,7 @@ #{$close-selector} { margin: 0; - margin-left: var(#{$css-var-prefix}spacing); + margin-inline-start: var(#{$css-var-prefix}spacing); padding: 0; float: right; } @@ -85,7 +85,7 @@ margin-bottom: 0; &:not(:first-of-type) { - margin-left: calc(var(#{$css-var-prefix}spacing) * 0.5); + margin-inline-start: calc(var(#{$css-var-prefix}spacing) * 0.5); } } } @@ -97,7 +97,7 @@ height: 1rem; margin-top: calc(var(#{$css-var-prefix}spacing) * -1); margin-bottom: var(#{$css-var-prefix}spacing); - margin-left: auto; + margin-inline-start: auto; border: none; background-image: var(#{$css-var-prefix}icon-close); background-position: center; diff --git a/scss/components/_nav.scss b/scss/components/_nav.scss index 136583cec..667451c1c 100644 --- a/scss/components/_nav.scss +++ b/scss/components/_nav.scss @@ -38,7 +38,7 @@ list-style: none; &:first-of-type { - margin-left: calc(var(#{$css-var-prefix}nav-element-spacing-horizontal) * -1); + margin-inline-start: calc(var(#{$css-var-prefix}nav-element-spacing-horizontal) * -1); } &:last-of-type { margin-inline-end: calc(var(#{$css-var-prefix}nav-element-spacing-horizontal) * -1); @@ -73,7 +73,7 @@ height: auto; margin-inline-end: inherit; margin-bottom: 0; - margin-left: inherit; + margin-inline-start: inherit; padding: calc( var(#{$css-var-prefix}nav-link-spacing-vertical) - (var(#{$css-var-prefix}border-width) * 2) diff --git a/scss/components/_timeline.scss b/scss/components/_timeline.scss index ab9257d70..ed2aad725 100644 --- a/scss/components/_timeline.scss +++ b/scss/components/_timeline.scss @@ -16,7 +16,7 @@ bottom: 0; left: 50%; width: 6px; - margin-left: -3px; + margin-inline-start: -3px; background-color: var(#{$css-var-prefix}timeline-line-color); content: ""; } @@ -104,7 +104,7 @@ // Full-width containers width: 100%; padding-inline-end: 25px; - padding-left: 40px; + padding-inline-start: 40px; // Make all right containers behave like the left ones &.right { diff --git a/scss/components/_tooltip.scss b/scss/components/_tooltip.scss index f17584d81..723138d16 100644 --- a/scss/components/_tooltip.scss +++ b/scss/components/_tooltip.scss @@ -52,7 +52,7 @@ transform: translate(-50%, 0rem); border-top: 0.3rem solid; border-inline-end: 0.3rem solid transparent; - border-left: 0.3rem solid transparent; + border-inline-start: 0.3rem solid transparent; border-radius: 0; background-color: transparent; content: ""; @@ -87,7 +87,7 @@ &:after { transform: translate(0.3rem, -50%); border: 0.3rem solid transparent; - border-left: 0.3rem solid; + border-inline-start: 0.3rem solid; } } diff --git a/scss/content/_typography.scss b/scss/content/_typography.scss index 1e35ae17a..c880fddf0 100644 --- a/scss/content/_typography.scss +++ b/scss/content/_typography.scss @@ -146,7 +146,7 @@ margin: var(#{$css-var-prefix}typography-spacing-vertical) 0; padding: var(#{$css-var-prefix}spacing); border-inline-end: none; - border-left: 0.25rem solid var(#{$css-var-prefix}blockquote-border-color); + border-inline-start: 0.25rem solid var(#{$css-var-prefix}blockquote-border-color); border-inline-start: 0.25rem solid var(#{$css-var-prefix}blockquote-border-color); border-inline-end: none; diff --git a/scss/forms/_basics.scss b/scss/forms/_basics.scss index 75d250709..eb3a7e887 100644 --- a/scss/forms/_basics.scss +++ b/scss/forms/_basics.scss @@ -281,14 +281,14 @@ padding-inline-end: calc( var(#{$css-var-prefix}form-element-spacing-horizontal) + 1.5rem ) !important; - padding-left: var(#{$css-var-prefix}form-element-spacing-horizontal); + padding-inline-start: var(#{$css-var-prefix}form-element-spacing-horizontal); padding-inline-start: var(#{$css-var-prefix}form-element-spacing-horizontal) !important; padding-inline-end: calc( var(#{$css-var-prefix}form-element-spacing-horizontal) + 1.5rem ) !important; } @else { padding-inline-end: calc(var(#{$css-var-prefix}form-element-spacing-horizontal) + 1.5rem); - padding-left: var(#{$css-var-prefix}form-element-spacing-horizontal); + padding-inline-start: var(#{$css-var-prefix}form-element-spacing-horizontal); padding-inline-start: var(#{$css-var-prefix}form-element-spacing-horizontal); padding-inline-end: calc(var(#{$css-var-prefix}form-element-spacing-horizontal) + 1.5rem); } @@ -413,7 +413,7 @@ &:not([multiple], [size]) { padding-inline-end: calc(var(#{$css-var-prefix}form-element-spacing-horizontal) + 1.5rem); - padding-left: var(#{$css-var-prefix}form-element-spacing-horizontal); + padding-inline-start: var(#{$css-var-prefix}form-element-spacing-horizontal); padding-inline-start: var(#{$css-var-prefix}form-element-spacing-horizontal); padding-inline-end: calc(var(#{$css-var-prefix}form-element-spacing-horizontal) + 1.5rem); background-image: var(#{$css-var-prefix}icon-chevron); diff --git a/scss/forms/_input-date.scss b/scss/forms/_input-date.scss index c8a60884e..15308c074 100644 --- a/scss/forms/_input-date.scss +++ b/scss/forms/_input-date.scss @@ -33,7 +33,7 @@ &::-webkit-calendar-picker-indicator { width: var(#{$css-var-prefix}icon-width); margin-inline-end: calc(var(#{$css-var-prefix}icon-width) * -1); - margin-left: var(#{$css-var-prefix}icon-position); + margin-inline-start: var(#{$css-var-prefix}icon-position); opacity: 0; } } diff --git a/scss/forms/_input-file.scss b/scss/forms/_input-file.scss index 130933890..8ecb84488 100644 --- a/scss/forms/_input-file.scss +++ b/scss/forms/_input-file.scss @@ -10,9 +10,9 @@ // with the forced overflow hidden on the input[type="file"] element. #{$parent-selector} [type="file"] { #{$css-var-prefix}color: var(#{$css-var-prefix}muted-color); - margin-left: calc(var(#{$css-var-prefix}outline-width) * -1); // 1 + margin-inline-start: calc(var(#{$css-var-prefix}outline-width) * -1); // 1 padding: calc(var(#{$css-var-prefix}form-element-spacing-vertical) * 0.5) 0; - padding-left: var(#{$css-var-prefix}outline-width); // 1 + padding-inline-start: var(#{$css-var-prefix}outline-width); // 1 border: 0; border-radius: 0; background: none; diff --git a/scss/forms/_validation.scss b/scss/forms/_validation.scss index a69ea3fa3..856d58b77 100644 --- a/scss/forms/_validation.scss +++ b/scss/forms/_validation.scss @@ -103,7 +103,7 @@ /* File list when selected from the file input */ .file-list { - padding-left: 0; + padding-inline-start: 0; li { display: flex; align-items: center; diff --git a/scss/layout/_container.scss b/scss/layout/_container.scss index 93bd6c7d0..de53d7bae 100644 --- a/scss/layout/_container.scss +++ b/scss/layout/_container.scss @@ -10,9 +10,9 @@ #{$parent-selector} .container-fluid { width: 100%; margin-inline-end: auto; - margin-left: auto; + margin-inline-start: auto; padding-inline-end: var(#{$css-var-prefix}spacing); - padding-left: var(#{$css-var-prefix}spacing); + padding-inline-start: var(#{$css-var-prefix}spacing); } #{$parent-selector} .container { @@ -24,7 +24,7 @@ @if $first-breakpoint { $first-breakpoint: false; padding-inline-end: 0; - padding-left: 0; + padding-inline-start: 0; } } } diff --git a/scss/layout/_landmarks.scss b/scss/layout/_landmarks.scss index d51f193c8..7be55bcbf 100644 --- a/scss/layout/_landmarks.scss +++ b/scss/layout/_landmarks.scss @@ -38,7 +38,7 @@ $first-breakpoint: true; width: 100%; margin-inline-end: auto; - margin-left: auto; + margin-inline-start: auto; padding: var(#{$css-var-prefix}block-spacing-vertical) var(#{$css-var-prefix}block-spacing-horizontal); @@ -50,7 +50,7 @@ @if $first-breakpoint { $first-breakpoint: false; padding-inline-end: 0; - padding-left: 0; + padding-inline-start: 0; } } } From 55fb77fb0fe761ed16df8b1f444a07182341bde6 Mon Sep 17 00:00:00 2001 From: Yohn Date: Sun, 19 Jan 2025 14:02:45 -0500 Subject: [PATCH 3/4] -top: changed to -block-start: --- scss/components/_card.scss | 6 +++--- scss/components/_dropdown.scss | 6 +++--- scss/components/_group.scss | 2 +- scss/components/_modal.scss | 4 ++-- scss/components/_popover-toast.scss | 2 +- scss/components/_popover.scss | 2 +- scss/components/_tab.scss | 2 +- scss/components/_tooltip.scss | 2 +- scss/content/_misc.scss | 2 +- scss/content/_table.scss | 2 +- scss/content/_typography.scss | 12 ++++++------ scss/forms/_basics.scss | 4 ++-- scss/forms/_checkbox-radio-switch.scss | 2 +- scss/forms/_input-range.scss | 2 +- scss/forms/_validation.scss | 2 +- scss/themes/default/_styles.scss | 12 ++++++------ 16 files changed, 32 insertions(+), 32 deletions(-) diff --git a/scss/components/_card.scss b/scss/components/_card.scss index 777a1c83a..871181081 100644 --- a/scss/components/_card.scss +++ b/scss/components/_card.scss @@ -27,7 +27,7 @@ } > header { - margin-top: calc(var(#{$css-var-prefix}block-spacing-vertical) * -1); + margin-block-start: calc(var(#{$css-var-prefix}block-spacing-vertical) * -1); margin-bottom: var(#{$css-var-prefix}block-spacing-vertical); border-bottom: var(#{$css-var-prefix}border-width) solid @@ -57,9 +57,9 @@ } > footer { - margin-top: var(#{$css-var-prefix}block-spacing-vertical); + margin-block-start: var(#{$css-var-prefix}block-spacing-vertical); margin-bottom: calc(var(#{$css-var-prefix}block-spacing-vertical) * -1); - border-top: var(#{$css-var-prefix}border-width) + border-block-start: var(#{$css-var-prefix}border-width) solid var(#{$css-var-prefix}card-border-color); border-bottom-right-radius: var(#{$css-var-prefix}border-radius); diff --git a/scss/components/_dropdown.scss b/scss/components/_dropdown.scss index 58b3ed073..a2d53bf09 100644 --- a/scss/components/_dropdown.scss +++ b/scss/components/_dropdown.scss @@ -138,7 +138,7 @@ min-width: 200px; min-width: fit-content; margin: 0; - margin-top: var(#{$css-var-prefix}outline-width); + margin-block-start: var(#{$css-var-prefix}outline-width); padding: 0; border: var(#{$css-var-prefix}border-width) solid @@ -169,7 +169,7 @@ list-style: none; &:first-of-type { - margin-top: calc(var(#{$css-var-prefix}form-element-spacing-vertical) * 0.5); + margin-block-start: calc(var(#{$css-var-prefix}form-element-spacing-vertical) * 0.5); } &:last-of-type { @@ -292,6 +292,6 @@ // Label // –––––––––––––––––––– #{$parent-selector} label > details.dropdown { - margin-top: calc(var(#{$css-var-prefix}spacing) * 0.25); + margin-block-start: calc(var(#{$css-var-prefix}spacing) * 0.25); } } diff --git a/scss/components/_group.scss b/scss/components/_group.scss index 5d1cbeb29..f42fe5706 100644 --- a/scss/components/_group.scss +++ b/scss/components/_group.scss @@ -233,7 +233,7 @@ + label { z-index: 10; // label was positioned above placeholder.. - margin-top: 5px; + margin-block-start: 5px; } } diff --git a/scss/components/_modal.scss b/scss/components/_modal.scss index 917480014..59b3adae9 100644 --- a/scss/components/_modal.scss +++ b/scss/components/_modal.scss @@ -95,7 +95,7 @@ display: block; width: 1rem; height: 1rem; - margin-top: calc(var(#{$css-var-prefix}spacing) * -1); + margin-block-start: calc(var(#{$css-var-prefix}spacing) * -1); margin-bottom: var(#{$css-var-prefix}spacing); margin-inline-start: auto; border: none; @@ -192,7 +192,7 @@ > footer { display: flex; justify-content: flex-end; - margin-top: auto; + margin-block-start: auto; } } } diff --git a/scss/components/_popover-toast.scss b/scss/components/_popover-toast.scss index 309dd03fe..234334176 100644 --- a/scss/components/_popover-toast.scss +++ b/scss/components/_popover-toast.scss @@ -25,7 +25,7 @@ background: rgba(0, 0, 0, 0.7); } button { - margin-top: -10px; + margin-block-start: -10px; padding: 0; border: 0 none; background: transparent; diff --git a/scss/components/_popover.scss b/scss/components/_popover.scss index f251a219a..3f803460f 100644 --- a/scss/components/_popover.scss +++ b/scss/components/_popover.scss @@ -14,7 +14,7 @@ background: rgba(0, 0, 0, 0.7); } button { - margin-top: -10px; + margin-block-start: -10px; padding: 0; border: 0 none; background: transparent; diff --git a/scss/components/_tab.scss b/scss/components/_tab.scss index f4da00e82..bab2b7539 100644 --- a/scss/components/_tab.scss +++ b/scss/components/_tab.scss @@ -92,7 +92,7 @@ [role="tabpanel"], button { width: 100%; - margin-top: 0.2rem; + margin-block-start: 0.2rem; margin-inline-end: 0; } } diff --git a/scss/components/_tooltip.scss b/scss/components/_tooltip.scss index 723138d16..36cfcefef 100644 --- a/scss/components/_tooltip.scss +++ b/scss/components/_tooltip.scss @@ -50,7 +50,7 @@ width: 0; padding: 0; transform: translate(-50%, 0rem); - border-top: 0.3rem solid; + border-block-start: 0.3rem solid; border-inline-end: 0.3rem solid transparent; border-inline-start: 0.3rem solid transparent; border-radius: 0; diff --git a/scss/content/_misc.scss b/scss/content/_misc.scss index d8af7bb82..602f0f340 100644 --- a/scss/content/_misc.scss +++ b/scss/content/_misc.scss @@ -17,7 +17,7 @@ height: 0; // 2 margin: var(#{$css-var-prefix}typography-spacing-vertical) 0; border: 0; - border-top: 1px solid var(#{$css-var-prefix}muted-border-color); + border-block-start: 1px solid var(#{$css-var-prefix}muted-border-color); color: inherit; // 1 } diff --git a/scss/content/_table.scss b/scss/content/_table.scss index 990094169..054015c11 100644 --- a/scss/content/_table.scss +++ b/scss/content/_table.scss @@ -51,7 +51,7 @@ #{$parent-selector} table > tfoot { th, td { - border-top: var(#{$css-var-prefix}border-width) + border-block-start: var(#{$css-var-prefix}border-width) solid var(#{$css-var-prefix}table-border-color); border-bottom: 0; diff --git a/scss/content/_typography.scss b/scss/content/_typography.scss index c880fddf0..6fc6643b3 100644 --- a/scss/content/_typography.scss +++ b/scss/content/_typography.scss @@ -43,7 +43,7 @@ #{$parent-selector} pre, #{$parent-selector} table, #{$parent-selector} ul { - margin-top: 0; + margin-block-start: 0; margin-bottom: var(#{$css-var-prefix}typography-spacing-vertical); color: var(#{$css-var-prefix}color); font-style: normal; @@ -57,7 +57,7 @@ #{$parent-selector} h4, #{$parent-selector} h5, #{$parent-selector} h6 { - margin-top: 0; + margin-block-start: 0; margin-bottom: var(#{$css-var-prefix}typography-spacing-vertical); color: var(#{$css-var-prefix}color); font-weight: var(#{$css-var-prefix}font-weight); @@ -89,7 +89,7 @@ #{$parent-selector} :where(article, address, blockquote, dl, figure, form, ol, p, pre, table, ul) { ~ :is(h1, h2, h3, h4, h5, h6) { - margin-top: var(#{$css-var-prefix}typography-spacing-top); + margin-block-start: var(#{$css-var-prefix}typography-spacing-top); } } @@ -103,7 +103,7 @@ margin-bottom: var(#{$css-var-prefix}typography-spacing-vertical); > * { - margin-top: 0; + margin-block-start: 0; margin-bottom: 0; } @@ -125,7 +125,7 @@ // 1. Remove the margin on nested lists in Chrome, Edge, IE, and Safari #{$parent-selector} :where(dl, ol, ul) :where(dl, ol, ul) { margin: 0; // 1 - margin-top: calc(var(#{$css-var-prefix}typography-spacing-vertical) * 0.25); + margin-block-start: calc(var(#{$css-var-prefix}typography-spacing-vertical) * 0.25); } #{$parent-selector} ul li { @@ -151,7 +151,7 @@ border-inline-end: none; footer { - margin-top: calc(var(#{$css-var-prefix}typography-spacing-vertical) * 0.5); + margin-block-start: calc(var(#{$css-var-prefix}typography-spacing-vertical) * 0.5); color: var(#{$css-var-prefix}blockquote-footer-color); } } diff --git a/scss/forms/_basics.scss b/scss/forms/_basics.scss index eb3a7e887..f92a10ff7 100644 --- a/scss/forms/_basics.scss +++ b/scss/forms/_basics.scss @@ -470,7 +470,7 @@ + small { display: block; width: 100%; - margin-top: calc(var(#{$css-var-prefix}spacing) * -0.75); + margin-block-start: calc(var(#{$css-var-prefix}spacing) * -0.75); margin-bottom: var(#{$css-var-prefix}spacing); color: var(#{$css-var-prefix}muted-color); } @@ -489,7 +489,7 @@ // Styles for Input inside a label #{$parent-selector} label { > :where(input, select, textarea) { - margin-top: calc(var(#{$css-var-prefix}spacing) * 0.25); + margin-block-start: calc(var(#{$css-var-prefix}spacing) * 0.25); } } } diff --git a/scss/forms/_checkbox-radio-switch.scss b/scss/forms/_checkbox-radio-switch.scss index 88542d0d4..5f2621c1b 100644 --- a/scss/forms/_checkbox-radio-switch.scss +++ b/scss/forms/_checkbox-radio-switch.scss @@ -22,7 +22,7 @@ appearance: none; width: 1.25em; height: 1.25em; - margin-top: -0.125em; + margin-block-start: -0.125em; margin-inline-end: 0.5em; border-width: var(#{$css-var-prefix}border-width); vertical-align: middle; diff --git a/scss/forms/_input-range.scss b/scss/forms/_input-range.scss index 40fec1597..bf51755b4 100644 --- a/scss/forms/_input-range.scss +++ b/scss/forms/_input-range.scss @@ -25,7 +25,7 @@ $border-thumb: 2px; -webkit-appearance: none; width: $height-thumb; height: $height-thumb; - margin-top: #{(-($height-thumb * 0.5) + ($height-track * 0.5))}; + margin-block-start: #{(-($height-thumb * 0.5) + ($height-track * 0.5))}; border: $border-thumb solid var(#{$css-var-prefix}range-thumb-border-color); border-radius: 50%; background-color: var(#{$css-var-prefix}range-thumb-color); diff --git a/scss/forms/_validation.scss b/scss/forms/_validation.scss index 856d58b77..8365de3f0 100644 --- a/scss/forms/_validation.scss +++ b/scss/forms/_validation.scss @@ -125,7 +125,7 @@ height: 1rem; margin-inline-end: 10px; padding: 0; - padding-top: calc(var(#{$css-var-prefix}spacing) * 0.25); + padding-block-start: calc(var(#{$css-var-prefix}spacing) * 0.25); border: none; background-image: var(#{$css-var-prefix}icon-red-close); background-position: center; diff --git a/scss/themes/default/_styles.scss b/scss/themes/default/_styles.scss index f23e0a2c6..4c2c54d76 100644 --- a/scss/themes/default/_styles.scss +++ b/scss/themes/default/_styles.scss @@ -249,37 +249,37 @@ h1 { #{$css-var-prefix}font-size: 2rem; #{$css-var-prefix}line-height: 1.125; - #{$css-var-prefix}typography-spacing-top: 3rem; + #{$css-var-prefix}typography-spacing-block-start: 3rem; } h2 { #{$css-var-prefix}font-size: 1.75rem; #{$css-var-prefix}line-height: 1.15; - #{$css-var-prefix}typography-spacing-top: 2.625rem; + #{$css-var-prefix}typography-spacing-block-start: 2.625rem; } h3 { #{$css-var-prefix}font-size: 1.5rem; #{$css-var-prefix}line-height: 1.175; - #{$css-var-prefix}typography-spacing-top: 2.25rem; + #{$css-var-prefix}typography-spacing-block-start: 2.25rem; } h4 { #{$css-var-prefix}font-size: 1.25rem; #{$css-var-prefix}line-height: 1.2; - #{$css-var-prefix}typography-spacing-top: 1.874rem; + #{$css-var-prefix}typography-spacing-block-start: 1.874rem; } h5 { #{$css-var-prefix}font-size: 1.125rem; #{$css-var-prefix}line-height: 1.225; - #{$css-var-prefix}typography-spacing-top: 1.6875rem; + #{$css-var-prefix}typography-spacing-block-start: 1.6875rem; } h6 { #{$css-var-prefix}font-size: 1rem; #{$css-var-prefix}line-height: 1.25; - #{$css-var-prefix}typography-spacing-top: 1.5rem; + #{$css-var-prefix}typography-spacing-block-start: 1.5rem; } } From b5c6487a176f0795601fd97efc144b3fc743d3b3 Mon Sep 17 00:00:00 2001 From: Yohn Date: Sun, 19 Jan 2025 14:03:56 -0500 Subject: [PATCH 4/4] -bottom: change to -block-end: --- scss/components/_accordion.scss | 4 ++-- scss/components/_card.scss | 18 +++++++++--------- scss/components/_dropdown.scss | 12 ++++++------ scss/components/_group.scss | 4 ++-- scss/components/_modal.scss | 6 +++--- scss/components/_nav-hamburger.scss | 2 +- scss/components/_nav.scss | 4 ++-- scss/components/_progress.scss | 2 +- scss/components/_tab-region.scss | 10 +++++----- scss/components/_tab.scss | 6 +++--- scss/components/_tooltip.scss | 4 ++-- scss/content/_button.scss | 2 +- scss/content/_code.scss | 2 +- scss/content/_table.scss | 4 ++-- scss/content/_typography.scss | 14 +++++++------- scss/forms/_basics.scss | 10 +++++----- scss/forms/_checkbox-radio-switch.scss | 2 +- scss/forms/_floating.scss | 2 +- scss/layout/_section.scss | 2 +- 19 files changed, 55 insertions(+), 55 deletions(-) diff --git a/scss/components/_accordion.scss b/scss/components/_accordion.scss index 2b2b715ca..b5015ddb5 100644 --- a/scss/components/_accordion.scss +++ b/scss/components/_accordion.scss @@ -8,7 +8,7 @@ #{$parent-selector} details { display: block; - margin-bottom: var(#{$css-var-prefix}spacing); + margin-block-end: var(#{$css-var-prefix}spacing); summary { line-height: 1rem; @@ -88,7 +88,7 @@ // Open &[open] { > summary { - margin-bottom: var(#{$css-var-prefix}spacing); + margin-block-end: var(#{$css-var-prefix}spacing); &:not([role]) { &:not(:focus) { diff --git a/scss/components/_card.scss b/scss/components/_card.scss index 871181081..ebe7a3c38 100644 --- a/scss/components/_card.scss +++ b/scss/components/_card.scss @@ -10,7 +10,7 @@ #{$parent-selector} [role="article"]:not(:has(> form:first-child)), #{$parent-selector} article > form, #{$parent-selector} [role="article"] > form { - margin-bottom: var(#{$css-var-prefix}block-spacing-vertical); + margin-block-end: var(#{$css-var-prefix}block-spacing-vertical); padding: var(#{$css-var-prefix}block-spacing-vertical) var(#{$css-var-prefix}block-spacing-horizontal); border-radius: var(#{$css-var-prefix}border-radius); @@ -28,8 +28,8 @@ > header { margin-block-start: calc(var(#{$css-var-prefix}block-spacing-vertical) * -1); - margin-bottom: var(#{$css-var-prefix}block-spacing-vertical); - border-bottom: var(#{$css-var-prefix}border-width) + margin-block-end: var(#{$css-var-prefix}block-spacing-vertical); + border-block-end: var(#{$css-var-prefix}border-width) solid var(#{$css-var-prefix}card-border-color); border-top-right-radius: var(#{$css-var-prefix}border-radius); @@ -41,7 +41,7 @@ > h4, > h5, > h6 { - margin-bottom: 0; + margin-block-end: 0; } > hgroup { @@ -51,14 +51,14 @@ > h4, > h5, > h6 { - margin-bottom: 0; + margin-block-end: 0; } } } > footer { margin-block-start: var(#{$css-var-prefix}block-spacing-vertical); - margin-bottom: calc(var(#{$css-var-prefix}block-spacing-vertical) * -1); + margin-block-end: calc(var(#{$css-var-prefix}block-spacing-vertical) * -1); border-block-start: var(#{$css-var-prefix}border-width) solid var(#{$css-var-prefix}card-border-color); @@ -74,15 +74,15 @@ nav, ul, ol { - margin-bottom: 0px; + margin-block-end: 0px; &:last-child { - margin-bottom: 0px; + margin-block-end: 0px; } /* Also remove if next input after button is a hidden input */ &:has(+ [type="hidden"]) { - margin-bottom: 0px; + margin-block-end: 0px; } } } diff --git a/scss/components/_dropdown.scss b/scss/components/_dropdown.scss index a2d53bf09..0ac815000 100644 --- a/scss/components/_dropdown.scss +++ b/scss/components/_dropdown.scss @@ -10,7 +10,7 @@ // –––––––––––––––––––– #{$parent-selector} details.dropdown { position: relative; - border-bottom: none; + border-block-end: none; @if $enable-transitions { &[open] { @@ -163,7 +163,7 @@ li { width: 100%; - margin-bottom: 0; + margin-block-end: 0; padding: calc(var(#{$css-var-prefix}form-element-spacing-vertical) * 0.5) var(#{$css-var-prefix}form-element-spacing-horizontal); list-style: none; @@ -173,12 +173,12 @@ } &:last-of-type { - margin-bottom: calc(var(#{$css-var-prefix}form-element-spacing-vertical) * 0.5); + margin-block-end: calc(var(#{$css-var-prefix}form-element-spacing-vertical) * 0.5); } details { width: 100%; - margin-bottom: 0; + margin-block-end: 0; > summary { line-height: var(#{$css-var-prefix}line-height); } @@ -224,7 +224,7 @@ // Button opened // inside container type accordion // –––––––––––––––––––– - margin-bottom: 0; + margin-block-end: 0; // Close for dropdown // inside container type accordion @@ -263,7 +263,7 @@ display: inline; margin: calc(var(#{$css-var-prefix}nav-element-spacing-vertical) * -1) 0; // Override height - margin-bottom: 0; + margin-block-end: 0; > summary { &:not([role]) { diff --git a/scss/components/_group.scss b/scss/components/_group.scss index f42fe5706..4e6e252e9 100644 --- a/scss/components/_group.scss +++ b/scss/components/_group.scss @@ -15,7 +15,7 @@ display: inline-flex; position: relative; width: 100%; - margin-bottom: var(#{$css-var-prefix}spacing); + margin-block-end: var(#{$css-var-prefix}spacing); border-radius: var(#{$css-var-prefix}border-radius); box-shadow: var(#{$css-var-prefix}group-box-shadow, 0 0 0 rgba(0, 0, 0, 0)); vertical-align: middle; @@ -36,7 +36,7 @@ > details { position: relative; flex: 1 1 auto; - margin-bottom: 0; + margin-block-end: 0; &:not(:first-child) { margin-inline-start: 0; diff --git a/scss/components/_modal.scss b/scss/components/_modal.scss index 59b3adae9..f09a018ab 100644 --- a/scss/components/_modal.scss +++ b/scss/components/_modal.scss @@ -66,7 +66,7 @@ > header { > * { - margin-bottom: 0; + margin-block-end: 0; } #{$close-selector} { @@ -82,7 +82,7 @@ button, [role="button"] { - margin-bottom: 0; + margin-block-end: 0; &:not(:first-of-type) { margin-inline-start: calc(var(#{$css-var-prefix}spacing) * 0.5); @@ -96,7 +96,7 @@ width: 1rem; height: 1rem; margin-block-start: calc(var(#{$css-var-prefix}spacing) * -1); - margin-bottom: var(#{$css-var-prefix}spacing); + margin-block-end: var(#{$css-var-prefix}spacing); margin-inline-start: auto; border: none; background-image: var(#{$css-var-prefix}icon-close); diff --git a/scss/components/_nav-hamburger.scss b/scss/components/_nav-hamburger.scss index dd930bda8..dd4fb6f7d 100644 --- a/scss/components/_nav-hamburger.scss +++ b/scss/components/_nav-hamburger.scss @@ -68,7 +68,7 @@ a { display: block; margin: 0; - border-bottom: 1px solid transparent; + border-block-end: 1px solid transparent; border-radius: 0; transition: border-color var(#{$css-var-prefix}transition), diff --git a/scss/components/_nav.scss b/scss/components/_nav.scss index 667451c1c..edd0ada50 100644 --- a/scss/components/_nav.scss +++ b/scss/components/_nav.scss @@ -33,7 +33,7 @@ ol, ul { align-items: center; - margin-bottom: 0; + margin-block-end: 0; padding: 0; list-style: none; @@ -72,7 +72,7 @@ select { height: auto; margin-inline-end: inherit; - margin-bottom: 0; + margin-block-end: 0; margin-inline-start: inherit; padding: calc( var(#{$css-var-prefix}nav-link-spacing-vertical) - diff --git a/scss/components/_progress.scss b/scss/components/_progress.scss index d7e0a9fd6..66700885c 100644 --- a/scss/components/_progress.scss +++ b/scss/components/_progress.scss @@ -31,7 +31,7 @@ appearance: none; width: 100%; height: 0.5rem; - margin-bottom: calc(var(#{$css-var-prefix}spacing) * 0.5); + margin-block-end: calc(var(#{$css-var-prefix}spacing) * 0.5); overflow: hidden; // Remove Firefox and Opera border diff --git a/scss/components/_tab-region.scss b/scss/components/_tab-region.scss index f89886ed3..601a736c9 100644 --- a/scss/components/_tab-region.scss +++ b/scss/components/_tab-region.scss @@ -10,12 +10,12 @@ #{$parent-selector} section[role="region"] { display: flex; flex-wrap: wrap; - margin-bottom: 0; + margin-block-end: 0; details { display: contents; - margin-bottom: 0; - padding-bottom: 0; + margin-block-end: 0; + padding-block-end: 0; summary { flex-grow: 1; @@ -23,7 +23,7 @@ margin: 0; padding: calc(var(#{$css-var-prefix}block-spacing-vertical) * 0.75) calc(var(#{$css-var-prefix}block-spacing-horizontal) * 1.5); - border-bottom: 1px solid transparent; //(#{$css-var-prefix}primary-background); + border-block-end: 1px solid transparent; //(#{$css-var-prefix}primary-background); background-color: var(#{$css-var-prefix}card-sectioning-background-color); list-style-type: none; touch-action: manipulation; @@ -69,7 +69,7 @@ order: 1; width: 100%; padding: var(#{$css-var-prefix}spacing); - padding-bottom: 0; + padding-block-end: 0; opacity: 1; transition: opacity var(#{$css-var-prefix}transition); } diff --git a/scss/components/_tab.scss b/scss/components/_tab.scss index bab2b7539..3a32abab2 100644 --- a/scss/components/_tab.scss +++ b/scss/components/_tab.scss @@ -25,14 +25,14 @@ #{$parent-selector} [role="tablist"] { display: flex; flex-wrap: wrap; // make sure it wraps - padding-bottom: 0; + padding-block-end: 0; > button[role="tab"] { flex-grow: 1; order: 1; // Put the labels first padding: calc(var(#{$css-var-prefix}spacing) * 0.625); border: 0; - border-bottom: 1px solid var(#{$css-var-prefix}primary-background); + border-block-end: 1px solid var(#{$css-var-prefix}primary-background); border-bottom-right-radius: 0; border-bottom-left-radius: 0; background: transparent; @@ -77,7 +77,7 @@ display: none; } > *:last-of-type { - margin-bottom: 0; + margin-block-end: 0; } } } diff --git a/scss/components/_tooltip.scss b/scss/components/_tooltip.scss index 36cfcefef..3732843f7 100644 --- a/scss/components/_tooltip.scss +++ b/scss/components/_tooltip.scss @@ -10,7 +10,7 @@ position: relative; &:not(:has(a, button, input, [role="button"])):not(a, button, input, [role="button"]) { - border-bottom: 1px dotted; + border-block-end: 1px dotted; text-decoration: none; cursor: help; } @@ -70,7 +70,7 @@ &:after { transform: translate(-50%, -0.3rem); border: 0.3rem solid transparent; - border-bottom: 0.3rem solid; + border-block-end: 0.3rem solid; } } diff --git a/scss/content/_button.scss b/scss/content/_button.scss index e1b2377a3..eb2e6220c 100644 --- a/scss/content/_button.scss +++ b/scss/content/_button.scss @@ -88,7 +88,7 @@ #{$parent-selector} [type="submit"], #{$parent-selector} [type="reset"], #{$parent-selector} [type="button"] { - margin-bottom: var(#{$css-var-prefix}spacing); + margin-block-end: var(#{$css-var-prefix}spacing); } // .secondary, .contrast & .outline diff --git a/scss/content/_code.scss b/scss/content/_code.scss index 6543d88e6..709445ce0 100644 --- a/scss/content/_code.scss +++ b/scss/content/_code.scss @@ -54,7 +54,7 @@ #{$parent-selector} pre { display: block; - margin-bottom: var(#{$css-var-prefix}spacing); + margin-block-end: var(#{$css-var-prefix}spacing); > code { display: block; diff --git a/scss/content/_table.scss b/scss/content/_table.scss index 054015c11..6dc930451 100644 --- a/scss/content/_table.scss +++ b/scss/content/_table.scss @@ -27,7 +27,7 @@ #{$parent-selector} table th, #{$parent-selector} table td { padding: calc(var(#{$css-var-prefix}spacing) / 2) var(#{$css-var-prefix}spacing); - border-bottom: var(#{$css-var-prefix}border-width) + border-block-end: var(#{$css-var-prefix}border-width) solid var(#{$css-var-prefix}table-border-color); background-color: var(#{$css-var-prefix}background-color); @@ -54,7 +54,7 @@ border-block-start: var(#{$css-var-prefix}border-width) solid var(#{$css-var-prefix}table-border-color); - border-bottom: 0; + border-block-end: 0; } } diff --git a/scss/content/_typography.scss b/scss/content/_typography.scss index 6fc6643b3..39dc05518 100644 --- a/scss/content/_typography.scss +++ b/scss/content/_typography.scss @@ -44,7 +44,7 @@ #{$parent-selector} table, #{$parent-selector} ul { margin-block-start: 0; - margin-bottom: var(#{$css-var-prefix}typography-spacing-vertical); + margin-block-end: var(#{$css-var-prefix}typography-spacing-vertical); color: var(#{$css-var-prefix}color); font-style: normal; font-weight: var(#{$css-var-prefix}font-weight); @@ -58,7 +58,7 @@ #{$parent-selector} h5, #{$parent-selector} h6 { margin-block-start: 0; - margin-bottom: var(#{$css-var-prefix}typography-spacing-vertical); + margin-block-end: var(#{$css-var-prefix}typography-spacing-vertical); color: var(#{$css-var-prefix}color); font-weight: var(#{$css-var-prefix}font-weight); font-size: var(#{$css-var-prefix}font-size); @@ -95,16 +95,16 @@ // Paragraphs #{$parent-selector} p { - margin-bottom: var(#{$css-var-prefix}typography-spacing-vertical); + margin-block-end: var(#{$css-var-prefix}typography-spacing-vertical); } // Heading group #{$parent-selector} hgroup { - margin-bottom: var(#{$css-var-prefix}typography-spacing-vertical); + margin-block-end: var(#{$css-var-prefix}typography-spacing-vertical); > * { margin-block-start: 0; - margin-bottom: 0; + margin-block-end: 0; } > *:not(:first-child):last-child { @@ -117,7 +117,7 @@ // Lists #{$parent-selector} :where(ol, ul) { li { - margin-bottom: calc(var(#{$css-var-prefix}typography-spacing-vertical) * 0.25); + margin-block-end: calc(var(#{$css-var-prefix}typography-spacing-vertical) * 0.25); } } @@ -159,7 +159,7 @@ // Abbreviations // 1. Remove underline decoration in Chrome, Edge, IE, Opera, and Safari #{$parent-selector} abbr[title] { - border-bottom: 1px dotted; + border-block-end: 1px dotted; text-decoration: none; // 1 cursor: help; } diff --git a/scss/forms/_basics.scss b/scss/forms/_basics.scss index f92a10ff7..0e607893d 100644 --- a/scss/forms/_basics.scss +++ b/scss/forms/_basics.scss @@ -132,7 +132,7 @@ #{$parent-selector} fieldset { width: 100%; margin: 0; - margin-bottom: var(#{$css-var-prefix}spacing); + margin-block-end: var(#{$css-var-prefix}spacing); padding: 0; border: 0; } @@ -141,13 +141,13 @@ #{$parent-selector} *:not([role="group"]) > label, #{$parent-selector} fieldset:not([role="group"]) > legend { display: block; - margin-bottom: calc(var(#{$css-var-prefix}spacing) * 0.375); + margin-block-end: calc(var(#{$css-var-prefix}spacing) * 0.375); color: var(#{$css-var-prefix}color); font-weight: var(#{$css-var-prefix}form-label-font-weight, var(#{$css-var-prefix}font-weight)); } #{$parent-selector} fieldset:not([role="group"]) > legend { - margin-bottom: calc(var(#{$css-var-prefix}spacing) * 0.5); + margin-block-end: calc(var(#{$css-var-prefix}spacing) * 0.5); } // Blocks, 100% @@ -400,7 +400,7 @@ #{$parent-selector} textarea, #{$parent-selector} [role="group"] > label, #{$parent-selector} [role="group"] > legend { - margin-bottom: var(#{$css-var-prefix}spacing); + margin-block-end: var(#{$css-var-prefix}spacing); } // Select @@ -471,7 +471,7 @@ display: block; width: 100%; margin-block-start: calc(var(#{$css-var-prefix}spacing) * -0.75); - margin-bottom: var(#{$css-var-prefix}spacing); + margin-block-end: var(#{$css-var-prefix}spacing); color: var(#{$css-var-prefix}muted-color); } &[aria-invalid="false"] { diff --git a/scss/forms/_checkbox-radio-switch.scss b/scss/forms/_checkbox-radio-switch.scss index 5f2621c1b..4f4b60d31 100644 --- a/scss/forms/_checkbox-radio-switch.scss +++ b/scss/forms/_checkbox-radio-switch.scss @@ -45,7 +45,7 @@ & ~ label { display: inline-block; - margin-bottom: 0; + margin-block-end: 0; cursor: pointer; &:not(:last-of-type) { diff --git a/scss/forms/_floating.scss b/scss/forms/_floating.scss index 69333f891..d6411882d 100644 --- a/scss/forms/_floating.scss +++ b/scss/forms/_floating.scss @@ -7,7 +7,7 @@ #{$parent-selector} section[role="form"] { position: relative; - margin-bottom: 0; + margin-block-end: 0; > input::placeholder, > textarea::placeholder { diff --git a/scss/layout/_section.scss b/scss/layout/_section.scss index d938df712..3e3b75623 100644 --- a/scss/layout/_section.scss +++ b/scss/layout/_section.scss @@ -7,6 +7,6 @@ */ #{$parent-selector} section { - margin-bottom: var(#{$css-var-prefix}block-spacing-vertical); + margin-block-end: var(#{$css-var-prefix}block-spacing-vertical); } }