From e5e275b036f2a48a3b9d61e4997ee41b434a155f Mon Sep 17 00:00:00 2001 From: Arthur Khachatryan Date: Mon, 25 Sep 2023 12:57:02 -0700 Subject: [PATCH 1/2] chore(global): refactored RTL blocks to use css logical props --- dist/button/button.css | 21 +++-------- dist/carousel/carousel.css | 26 +++----------- dist/combobox/combobox.css | 8 +++-- dist/cta-button/cta-button.css | 6 ++-- dist/details/details.css | 7 ++-- dist/drawer-dialog/drawer-dialog.css | 3 +- dist/field/field.css | 4 +-- .../filter-menu-button/filter-menu-button.css | 7 ++-- dist/fullscreen-dialog/fullscreen-dialog.css | 3 +- dist/inline-notice/inline-notice.css | 6 ++-- dist/lightbox-dialog/lightbox-dialog.css | 10 +++--- dist/listbox-button/listbox-button.css | 7 ++-- dist/listbox/listbox.css | 7 ++-- dist/page-notice/page-notice.css | 13 +++---- dist/pagination/pagination.css | 16 +++------ dist/panel-dialog/panel-dialog.css | 3 +- dist/progress-stepper/progress-stepper.css | 15 ++++---- dist/section-notice/section-notice.css | 13 +++---- dist/section-title/section-title.css | 5 ++- dist/segmented-buttons/segmented-buttons.css | 13 ++++--- dist/snackbar-dialog/snackbar-dialog.css | 14 +++----- dist/tabs/tabs.css | 8 ++--- dist/textbox/textbox.css | 7 ++-- dist/toast-dialog/toast-dialog.css | 9 +++-- dist/variables/variables.less | 1 + dist/video/video.css | 7 ++-- docs/_includes/button.html | 8 ++--- docs/custom-styles.html | 13 ++----- src/less/button/button.less | 18 ---------- src/less/carousel/carousel.less | 35 ++----------------- src/less/combobox/combobox.less | 8 +++-- src/less/details/details.less | 7 +--- src/less/field/field.less | 3 +- .../filter-menu-button.less | 7 +--- src/less/inline-notice/inline-notice.less | 8 +---- src/less/lightbox-dialog/lightbox-dialog.less | 6 +--- src/less/listbox-button/listbox-button.less | 7 +--- src/less/listbox/listbox.less | 7 +--- src/less/mixins/private/button-mixins.less | 4 +-- src/less/mixins/private/dialog-mixins.less | 2 +- src/less/page-notice/page-notice.less | 13 ++----- src/less/pagination/pagination.less | 15 ++------ .../progress-stepper/progress-stepper.less | 12 ++----- src/less/section-notice/section-notice.less | 13 ++----- src/less/section-title/section-title.less | 4 +-- .../segmented-buttons/segmented-buttons.less | 9 +---- src/less/snackbar-dialog/snackbar-dialog.less | 14 ++------ src/less/tabs/tabs.less | 12 +------ src/less/textbox/textbox.less | 7 +--- src/less/toast-dialog/toast-dialog.less | 11 ++---- src/less/variables/variables.less | 1 + src/less/video/video.less | 9 +---- 52 files changed, 123 insertions(+), 369 deletions(-) diff --git a/dist/button/button.css b/dist/button/button.css index 6abf258a7..d94685d65 100644 --- a/dist/button/button.css +++ b/dist/button/button.css @@ -118,11 +118,13 @@ a.fake-btn svg.icon { } button.btn svg.icon:first-child, a.fake-btn svg.icon:first-child { - margin-right: 8px; + -webkit-margin-end: 8px; + margin-inline-end: 8px; } button.btn svg.icon:last-child, a.fake-btn svg.icon:last-child { - margin-left: 8px; + -webkit-margin-start: 8px; + margin-inline-start: 8px; } button.btn svg.icon:only-child, a.fake-btn svg.icon:only-child { @@ -471,21 +473,6 @@ button.btn--floating-label .btn__floating-label--inline { position: unset; transform: translate(0, -6px); } -[dir="rtl"] button.btn svg.icon--chevron-down-12:first-child, -[dir="rtl"] a.fake-btn svg.icon--chevron-down-12:first-child { - margin-left: 8px; - margin-right: 0; -} -[dir="rtl"] button.btn svg.icon--chevron-down-12:last-child, -[dir="rtl"] a.fake-btn svg.icon--chevron-down-12:last-child { - margin-left: 0; - margin-right: 8px; -} -[dir="rtl"] button.btn svg.icon--chevron-down-12:only-child, -[dir="rtl"] a.fake-btn svg.icon--chevron-down-12:only-child { - margin-left: 0; - margin-right: 0; -} [dir="rtl"] button.btn--split-start, [dir="rtl"] a.fake-btn--split-start { border-radius: 0 24px 24px 0; diff --git a/dist/carousel/carousel.css b/dist/carousel/carousel.css index 6fdde8358..54fe96631 100644 --- a/dist/carousel/carousel.css +++ b/dist/carousel/carousel.css @@ -122,17 +122,13 @@ div.carousel { .carousel__control--next { right: -16px; } -.carousel__control .icon--chevron-right-24 { - margin-left: 2px; -} -.carousel__control .icon--chevron-left-24 { - margin-left: -2px; -} .carousel__control .icon--chevron-right-12 { - margin-left: 1px; + -webkit-margin-start: 1px; + margin-inline-start: 1px; } .carousel__control .icon--chevron-left-12 { - margin-left: -1px; + -webkit-margin-end: 1px; + margin-inline-end: 1px; } .carousel__control svg { color: var(--carousel-paddle-foreground-color, var(--color-foreground-primary)); @@ -189,24 +185,10 @@ span.carousel__container { left: unset; right: -16px; } -[dir="rtl"] .carousel__control .icon--chevron-left-24 { - margin-left: 2px; -} -[dir="rtl"] .carousel__control .icon--chevron-left-12 { - margin-left: 1px; -} [dir="rtl"] .carousel__control--next { left: -16px; right: unset; } -[dir="rtl"] .carousel__control .icon--chevron-right-24 { - margin-left: -2px; -} -[dir="rtl"] .carousel__control .icon--chevron-right-12 { - margin-left: -1px; -} -[dir="rtl"] .carousel__control .icon--chevron-left-24, -[dir="rtl"] .carousel__control .icon--chevron-right-24, [dir="rtl"] .carousel__control .icon--chevron-left-12, [dir="rtl"] .carousel__control .icon--chevron-right-12 { transform: rotate(180deg); diff --git a/dist/combobox/combobox.css b/dist/combobox/combobox.css index 5617f3789..90b684c3b 100644 --- a/dist/combobox/combobox.css +++ b/dist/combobox/combobox.css @@ -46,6 +46,11 @@ span.combobox { left: 0; right: unset; } +.combobox__control > svg.icon, +.combobox__control > button { + -webkit-margin-start: 8px; + margin-inline-start: 8px; +} .combobox__option[role^="option"] { background-color: transparent; border-style: solid; @@ -132,7 +137,6 @@ span.combobox { } .combobox__control > svg.icon--chevron-down-12 { color: var(--combobox-textbox-icon-color, var(--color-foreground-primary)); - margin-left: 8px; pointer-events: none; position: absolute; right: 17px; @@ -227,8 +231,6 @@ span.combobox { } [dir="rtl"] .combobox__control > svg.icon, [dir="rtl"] .combobox__control > button { - margin-left: 0; - margin-right: 8px; right: unset; } [dir="rtl"] .combobox__control > svg.icon { diff --git a/dist/cta-button/cta-button.css b/dist/cta-button/cta-button.css index ac102b09c..1e043d8eb 100644 --- a/dist/cta-button/cta-button.css +++ b/dist/cta-button/cta-button.css @@ -76,10 +76,12 @@ a.cta-btn svg.icon { width: 10px; } a.cta-btn svg.icon:first-child { - margin-right: 8px; + -webkit-margin-end: 8px; + margin-inline-end: 8px; } a.cta-btn svg.icon:last-child { - margin-left: 8px; + -webkit-margin-start: 8px; + margin-inline-start: 8px; } a.cta-btn svg.icon:only-child { margin: 0; diff --git a/dist/details/details.css b/dist/details/details.css index dcea89c8c..e8ec73dc5 100644 --- a/dist/details/details.css +++ b/dist/details/details.css @@ -28,15 +28,12 @@ summary.details__summary--small { padding: 4px 8px; } span.details__icon { - margin-left: 8px; + -webkit-margin-start: 8px; + margin-inline-start: 8px; } span.details__icon[hidden] { display: inline-block; } -[dir="rtl"] span.details__icon { - margin-left: 0; - margin-right: 8px; -} details.details[open] span.details__icon { transform: rotate(180deg); } diff --git a/dist/drawer-dialog/drawer-dialog.css b/dist/drawer-dialog/drawer-dialog.css index 2df161f74..993b54aa6 100644 --- a/dist/drawer-dialog/drawer-dialog.css +++ b/dist/drawer-dialog/drawer-dialog.css @@ -42,7 +42,8 @@ white-space: nowrap; } .drawer-dialog__header > :last-child:not(:only-child) { - margin-left: 16px; + -webkit-margin-start: 16px; + margin-inline-start: 16px; } .drawer-dialog__header .fake-link { text-decoration: none; diff --git a/dist/field/field.css b/dist/field/field.css index f133c7f48..ae2db2a20 100644 --- a/dist/field/field.css +++ b/dist/field/field.css @@ -25,7 +25,8 @@ div.field--table { justify-content: flex-end; } .field__description--group > :last-child { - margin-left: 5px; + -webkit-margin-start: 5px; + margin-inline-start: 5px; text-align: right; } .field__description--group > :first-child { @@ -115,6 +116,5 @@ div.field__description { margin-top: 16px; } [dir="rtl"] .field__description--group > :last-child { - margin-right: 5px; text-align: left; } diff --git a/dist/filter-menu-button/filter-menu-button.css b/dist/filter-menu-button/filter-menu-button.css index 52d2c1c1d..65f88178c 100644 --- a/dist/filter-menu-button/filter-menu-button.css +++ b/dist/filter-menu-button/filter-menu-button.css @@ -46,7 +46,8 @@ button.filter-menu-button__button:active { .filter-menu-button__button-cell svg.icon--chevron-down-12 { align-self: center; color: var(--filter-menu-button-icon-color, var(--color-foreground-primary)); - margin-left: 8px; + -webkit-margin-start: 8px; + margin-inline-start: 8px; } .filter-menu-button__button-text { display: inline-block; @@ -264,10 +265,6 @@ button.filter-menu-button__footer:hover { div.filter-menu-button__item[role^="menuitem"]:focus:not(:focus-visible) { outline: none; } -[dir="rtl"] .filter-menu-button__button-cell .icon--chevron-down-12 { - margin-left: 0; - margin-right: 8px; -} [dir="rtl"] .filter-menu-button__checkbox { margin-left: 8px; } diff --git a/dist/fullscreen-dialog/fullscreen-dialog.css b/dist/fullscreen-dialog/fullscreen-dialog.css index 6793c8910..386745850 100644 --- a/dist/fullscreen-dialog/fullscreen-dialog.css +++ b/dist/fullscreen-dialog/fullscreen-dialog.css @@ -52,7 +52,8 @@ white-space: nowrap; } .fullscreen-dialog__header > :last-child:not(:only-child) { - margin-left: 16px; + -webkit-margin-start: 16px; + margin-inline-start: 16px; } .fullscreen-dialog__header .fake-link { outline-offset: 4px; diff --git a/dist/inline-notice/inline-notice.css b/dist/inline-notice/inline-notice.css index 2543c8ca7..9a21ca80c 100644 --- a/dist/inline-notice/inline-notice.css +++ b/dist/inline-notice/inline-notice.css @@ -9,7 +9,8 @@ span.inline-notice { } .inline-notice__header { display: flex; - margin-right: 8px; + -webkit-margin-end: 8px; + margin-inline-end: 8px; margin-top: 4px; } .inline-notice p { @@ -19,6 +20,3 @@ span.inline-notice { .inline-notice button.fake-link { color: var(--color-foreground-primary); } -[dir="rtl"] .inline-notice__header .icon.icon--confirmation-filled-16 { - margin-left: 8px; -} diff --git a/dist/lightbox-dialog/lightbox-dialog.css b/dist/lightbox-dialog/lightbox-dialog.css index f231e314e..94c4efaa5 100644 --- a/dist/lightbox-dialog/lightbox-dialog.css +++ b/dist/lightbox-dialog/lightbox-dialog.css @@ -57,7 +57,8 @@ white-space: nowrap; } .lightbox-dialog__header > :last-child:not(:only-child) { - margin-left: 16px; + -webkit-margin-start: 16px; + margin-inline-start: 16px; } .lightbox-dialog__main { box-sizing: border-box; @@ -116,7 +117,8 @@ button.icon-btn.lightbox-dialog__close { z-index: 1; } button.icon-btn.lightbox-dialog__prev { - margin-right: 16px; + -webkit-margin-end: 16px; + margin-inline-end: 16px; } .lightbox-dialog--expressive button.icon-btn.lightbox-dialog__prev, .lightbox-dialog--expressive button.icon-btn.lightbox-dialog__close { @@ -213,10 +215,6 @@ button.icon-btn.lightbox-dialog__prev { height: 95%; max-height: 95%; } -[dir="rtl"] button.icon-btn.lightbox-dialog__prev { - margin-left: 16px; - margin-right: 0; -} [dir="rtl"] button.icon-btn.lightbox-dialog__prev .icon--chevron-left-16 { transform: rotate(180deg); } diff --git a/dist/listbox-button/listbox-button.css b/dist/listbox-button/listbox-button.css index 6e5589f0f..c6c3c1c15 100644 --- a/dist/listbox-button/listbox-button.css +++ b/dist/listbox-button/listbox-button.css @@ -96,7 +96,8 @@ button.expand-btn[aria-expanded="true"] ~ div.listbox-button__listbox, opacity: 0; stroke: currentColor; stroke-width: 0; - margin-left: 8px; + -webkit-margin-start: 8px; + margin-inline-start: 8px; } div.listbox-button__option[role="option"][aria-selected="true"] svg.icon { opacity: 1; @@ -157,10 +158,6 @@ span.listbox-button__value { .listbox-button__options:focus:not(:focus-visible) { outline: none; } -[dir="rtl"] .listbox-button__option svg.icon { - margin-left: 0; - margin-right: 8px; -} [dir="rtl"] .listbox-button .btn__label { color: var(--listbox-button-label-color, var(--color-foreground-secondary)); margin-left: 3px; diff --git a/dist/listbox/listbox.css b/dist/listbox/listbox.css index 879358433..8f008e21f 100644 --- a/dist/listbox/listbox.css +++ b/dist/listbox/listbox.css @@ -66,11 +66,8 @@ div.listbox__option svg.icon { opacity: 0; stroke: currentColor; stroke-width: 0; - margin-left: 8px; -} -[dir="rtl"] div.listbox__option svg.icon { - margin-left: 0; - margin-right: 8px; + -webkit-margin-start: 8px; + margin-inline-start: 8px; } div.listbox__options[role="listbox"]:focus .listbox__option--active[role="option"] { background-color: var(--color-state-primary-hover); diff --git a/dist/page-notice/page-notice.css b/dist/page-notice/page-notice.css index bf8e1aef3..f32947038 100644 --- a/dist/page-notice/page-notice.css +++ b/dist/page-notice/page-notice.css @@ -79,12 +79,14 @@ span[role="region"].page-notice { .page-notice__header { grid-column: 1; grid-row: 1; - padding-right: 16px; + -webkit-margin-end: 16px; + margin-inline-end: 16px; } .page-notice__main { grid-column: 1 / 3; grid-row: 1; - padding-right: 16px; + -webkit-margin-end: 16px; + margin-inline-end: 16px; } .page-notice__header + .page-notice__main { grid-column: 2; @@ -130,13 +132,6 @@ p.page-notice__cta { margin-top: 0; } } -[dir="rtl"] .page-notice__header { - padding-left: 16px; - padding-right: 0; -} -[dir="rtl"] .page-notice__main { - padding-right: 0; -} [dir="rtl"] .page-notice__footer { margin-left: initial; margin-right: auto; diff --git a/dist/pagination/pagination.css b/dist/pagination/pagination.css index a5a477fb2..7fcdb63bd 100644 --- a/dist/pagination/pagination.css +++ b/dist/pagination/pagination.css @@ -38,11 +38,13 @@ button.pagination__previous { } a.pagination__next, button.pagination__next { - margin-left: 8px; + -webkit-margin-start: 8px; + margin-inline-start: 8px; } a.pagination__previous, button.pagination__previous { - margin-right: 8px; + -webkit-margin-end: 8px; + margin-inline-end: 8px; } .pagination__item { align-items: center; @@ -127,16 +129,6 @@ nav.pagination--fluid ol.pagination__items li { [dir="rtl"] nav.pagination svg.icon--arrow-left-16 { transform: rotate(180deg); } -[dir="rtl"] a.pagination__next, -[dir="rtl"] button.pagination__next { - margin-left: 0; - margin-right: 8px; -} -[dir="rtl"] a.pagination__previous, -[dir="rtl"] button.pagination__previous { - margin-left: 8px; - margin-right: 0; -} @media (min-width: 768px) { nav.pagination { margin: 16px 0; diff --git a/dist/panel-dialog/panel-dialog.css b/dist/panel-dialog/panel-dialog.css index 05f2059bc..05b175a85 100644 --- a/dist/panel-dialog/panel-dialog.css +++ b/dist/panel-dialog/panel-dialog.css @@ -57,7 +57,8 @@ white-space: nowrap; } .panel-dialog__header > :last-child:not(:only-child) { - margin-left: 16px; + -webkit-margin-start: 16px; + margin-inline-start: 16px; } .panel-dialog__header .fake-link { outline-offset: 4px; diff --git a/dist/progress-stepper/progress-stepper.css b/dist/progress-stepper/progress-stepper.css index 0884b782b..4049d59a9 100644 --- a/dist/progress-stepper/progress-stepper.css +++ b/dist/progress-stepper/progress-stepper.css @@ -86,12 +86,14 @@ hr.progress-stepper__separator { } .progress-stepper__item:first-child .progress-stepper__text { align-self: flex-start; - margin-left: 4px; + -webkit-margin-start: 4px; + margin-inline-start: 4px; text-align: left; } .progress-stepper__item:last-child .progress-stepper__text { align-self: flex-end; - margin-right: 4px; + -webkit-margin-end: 4px; + margin-inline-end: 4px; text-align: right; } .progress-stepper--vertical .progress-stepper__item { @@ -113,7 +115,8 @@ hr.progress-stepper__separator { } .progress-stepper--vertical .progress-stepper__item .progress-stepper__text { align-self: center; - margin-left: 16px; + -webkit-margin-start: 16px; + margin-inline-start: 16px; margin-top: 0; text-align: left; white-space: nowrap; @@ -136,8 +139,6 @@ hr.progress-stepper__separator { width: 4px; } [dir="rtl"] .progress-stepper__item:first-child .progress-stepper__text { - margin-left: 0; - margin-right: 4px; text-align: right; } [dir="rtl"] .progress-stepper__item[aria-current] + hr.progress-stepper__separator { @@ -155,13 +156,9 @@ hr.progress-stepper__separator { background-image: none; } [dir="rtl"] .progress-stepper__item:last-child .progress-stepper__text { - margin-left: 4px; - margin-right: 0; text-align: left; } [dir="rtl"] .progress-stepper--vertical .progress-stepper__item .progress-stepper__text { - margin-left: inherit; - margin-right: 16px; text-align: right; } [dir="rtl"] .progress-stepper--vertical .progress-stepper__separator { diff --git a/dist/section-notice/section-notice.css b/dist/section-notice/section-notice.css index deb51827c..81f49b9b3 100644 --- a/dist/section-notice/section-notice.css +++ b/dist/section-notice/section-notice.css @@ -50,13 +50,15 @@ span[role="region"].section-notice { grid-column: 1; grid-row: 1; height: 16px; + -webkit-margin-end: 16px; + margin-inline-end: 16px; margin-top: 1px; - padding-right: 16px; } .section-notice__main { grid-column: 1 / 3; grid-row: 1; - padding-right: 16px; + -webkit-margin-end: 16px; + margin-inline-end: 16px; } .section-notice__header + .section-notice__main { grid-column: 2; @@ -98,10 +100,6 @@ p.section-notice__cta { padding-left: 16px; } } -[dir="rtl"] .section-notice__header { - padding-left: 16px; - padding-right: 0; -} [dir="rtl"] .section-notice__footer { justify-self: flex-start; margin-left: initial; @@ -109,9 +107,6 @@ p.section-notice__cta { padding-left: initial; padding-right: 0; } -[dir="rtl"] .section-notice__main { - padding-right: 0; -} [dir="rtl"] p.page-notice__cta { margin-left: 16px; padding-left: 16px; diff --git a/dist/section-title/section-title.css b/dist/section-title/section-title.css index 4239ba8c4..f444bad7d 100644 --- a/dist/section-title/section-title.css +++ b/dist/section-title/section-title.css @@ -20,7 +20,8 @@ .section-title__title svg.icon { background-color: var(--color-background-secondary); border-radius: 12px; - margin-left: 8px; + -webkit-margin-start: 8px; + margin-inline-start: 8px; padding: 7px; } .section-title__info { @@ -59,8 +60,6 @@ height: 32px; } [dir="rtl"] .section-title__title svg.icon { - margin-left: 0; - margin-right: 8px; transform: rotate(180deg); } [dir="rtl"] .section-title__cta { diff --git a/dist/segmented-buttons/segmented-buttons.css b/dist/segmented-buttons/segmented-buttons.css index e40db97e4..bdfa82ab7 100644 --- a/dist/segmented-buttons/segmented-buttons.css +++ b/dist/segmented-buttons/segmented-buttons.css @@ -16,7 +16,8 @@ flex: 1; } .segmented-buttons > ul > li:not(:first-child) { - margin-left: 8px; + -webkit-margin-start: 8px; + margin-inline-start: 8px; } .segmented-buttons__button { background-color: transparent; @@ -41,10 +42,12 @@ align-self: center; } .segmented-buttons__button svg.icon:first-child { - margin-right: 8px; + -webkit-margin-end: 8px; + margin-inline-end: 8px; } .segmented-buttons__button svg.icon:last-child { - margin-left: 8px; + -webkit-margin-start: 8px; + margin-inline-start: 8px; } .segmented-buttons__button svg.icon:only-child { margin: 0; @@ -60,7 +63,3 @@ .segmented-buttons__button:not([aria-current]):focus { background-color: var(--color-state-primary-hover); } -[dir="rtl"] .segmented-buttons > ul > li:not(:first-child) { - margin-left: 0; - margin-right: 8px; -} diff --git a/dist/snackbar-dialog/snackbar-dialog.css b/dist/snackbar-dialog/snackbar-dialog.css index 021d120e6..dc2f26a97 100644 --- a/dist/snackbar-dialog/snackbar-dialog.css +++ b/dist/snackbar-dialog/snackbar-dialog.css @@ -42,13 +42,15 @@ flex-direction: column; } .snackbar-dialog__main { - margin-right: 32px; + -webkit-margin-end: 32px; + margin-inline-end: 32px; } .snackbar-dialog__main p { margin: 0; } .snackbar-dialog__actions { - margin-left: auto; + -webkit-margin-start: auto; + margin-inline-start: auto; } .snackbar-dialog__window--column .snackbar-dialog__actions { margin-top: 16px; @@ -73,11 +75,3 @@ left: auto; right: 0; } -[dir="rtl"] .snackbar-dialog__main { - margin-left: 32px; - margin-right: 0; -} -[dir="rtl"] .snackbar-dialog__actions { - margin-left: 0; - margin-right: auto; -} diff --git a/dist/tabs/tabs.css b/dist/tabs/tabs.css index 1add2fd97..dc395efe1 100644 --- a/dist/tabs/tabs.css +++ b/dist/tabs/tabs.css @@ -27,7 +27,8 @@ li.fake-tabs__item { } div.tabs__item[role="tab"]:not(:last-child), li.fake-tabs__item:not(:last-child) { - margin-right: 36px; + -webkit-margin-end: 36px; + margin-inline-end: 36px; } li.fake-tabs__item > a { padding: 1px 0; @@ -80,8 +81,3 @@ li.fake-tabs__item > a:not([aria-current]):hover::after { .fake-tabs__cell { margin: 16px 0; } -[dir="rtl"] .tabs div.tabs__item[role="tab"]:not(:last-child), -[dir="rtl"] .tabs li.fake-tabs__item:not(:last-child) { - margin-left: 40px; - margin-right: 0; -} diff --git a/dist/textbox/textbox.css b/dist/textbox/textbox.css index f12f624bc..8672b7a8c 100644 --- a/dist/textbox/textbox.css +++ b/dist/textbox/textbox.css @@ -101,7 +101,8 @@ input.textbox__control--large { } .textbox--icon-end input.textbox__control, .textbox--icon-end textarea.textbox__control { - padding-right: 40px; + -webkit-padding-end: 40px; + padding-inline-end: 40px; } .textbox--icon-end > svg:last-child { right: 16px; @@ -133,10 +134,6 @@ textarea.textbox__control[readonly]:focus { [dir="rtl"] .textbox > svg:first-child + textarea.textbox__control { padding-right: 40px; } -[dir="rtl"] .textbox--icon-end input.textbox__control, -[dir="rtl"] .textbox--icon-end textarea.textbox__control { - padding-left: 40px; -} [dir="rtl"] .textbox--icon-end button.icon-btn { left: 0; right: auto; diff --git a/dist/toast-dialog/toast-dialog.css b/dist/toast-dialog/toast-dialog.css index 00c9be7d1..8b8c8e8a8 100644 --- a/dist/toast-dialog/toast-dialog.css +++ b/dist/toast-dialog/toast-dialog.css @@ -55,7 +55,8 @@ button.toast-dialog__close { align-self: center; border: 0; color: var(--toast-dialog-foreground-color, var(--color-foreground-on-information)); - margin: 0 0 0 auto; + -webkit-margin-start: auto; + margin-inline-start: auto; outline-offset: -8px; padding: 0; } @@ -91,7 +92,8 @@ button.toast-dialog__close > svg { background-color: transparent; color: var(--toast-dialog-foreground-color, var(--color-background-primary)); font-weight: 700; - margin-right: 8px; + -webkit-margin-end: 8px; + margin-inline-end: 8px; } .toast-dialog__footer button.btn--primary:focus, .toast-dialog__footer button.btn--secondary:focus { @@ -130,6 +132,3 @@ button.toast-dialog__close > svg { margin: 16px 24px 24px; } } -[dir="rtl"] .toast-dialog__footer .btn--primary { - margin-right: 7px; -} diff --git a/dist/variables/variables.less b/dist/variables/variables.less index 6a592b627..0a3417e20 100644 --- a/dist/variables/variables.less +++ b/dist/variables/variables.less @@ -55,6 +55,7 @@ @spacing-250: @spacing-100 * 2.5; @spacing-300: @spacing-100 * 3; @spacing-400: @spacing-100 * 4; +@spacing-450: @spacing-100 * 4.5; @spacing-600: @spacing-100 * 6; @spacing-800: @spacing-100 * 8; diff --git a/dist/video/video.css b/dist/video/video.css index 67fbd195e..94da0f980 100644 --- a/dist/video/video.css +++ b/dist/video/video.css @@ -27,7 +27,8 @@ display: none; } .video-player__report-button > svg { - margin-right: 4px; + -webkit-margin-end: 4px; + margin-inline-end: 4px; } .video-player .shaka-overflow-menu svg { height: 24px; @@ -54,7 +55,3 @@ .video-player--poster .shaka-scrim-container { visibility: hidden; } -[dir="rtl"] .video-player__report-button > svg { - margin-left: 4px; - margin-right: 0; -} diff --git a/docs/_includes/button.html b/docs/_includes/button.html index 667ff5538..1681ca54e 100644 --- a/docs/_includes/button.html +++ b/docs/_includes/button.html @@ -268,8 +268,8 @@

Flexible Button

Select Any - @@ -283,8 +283,8 @@

Flexible Button

Select Any - diff --git a/docs/custom-styles.html b/docs/custom-styles.html index 872409286..64ab638d2 100644 --- a/docs/custom-styles.html +++ b/docs/custom-styles.html @@ -43,21 +43,12 @@ font-weight: bold; height: 300px; line-height: 300px; - margin-right: 16px; + margin-inline-end: 16px; text-align: center; width: 100%; } .carousel__list--slideshow-demo li:last-child { - margin-right: 0; - } - - [dir="rtl"] .carousel__list--slideshow-demo li { - margin-right: 0; - margin-left: 16px; - } - - [dir="rtl"] .carousel__list--slideshow-demo li:last-child { - margin-left: 0; + margin-inline-end: 0; } \ No newline at end of file diff --git a/src/less/button/button.less b/src/less/button/button.less index 3085efff8..006d82df7 100644 --- a/src/less/button/button.less +++ b/src/less/button/button.less @@ -479,24 +479,6 @@ button.btn--floating-label .btn__floating-label--inline { transform: translate(0, -6px); } -[dir="rtl"] button.btn svg.icon--chevron-down-12, -[dir="rtl"] a.fake-btn svg.icon--chevron-down-12 { - &:first-child { - margin-left: 8px; - margin-right: 0; - } - - &:last-child { - margin-left: 0; - margin-right: 8px; - } - - &:only-child { - margin-left: 0; - margin-right: 0; - } -} - [dir="rtl"] { button.btn--split-start, a.fake-btn--split-start { diff --git a/src/less/carousel/carousel.less b/src/less/carousel/carousel.less index 5e207e254..0e8bf2ec6 100644 --- a/src/less/carousel/carousel.less +++ b/src/less/carousel/carousel.less @@ -24,22 +24,12 @@ right: -@spacing-200; } - // deprecated - .icon--chevron-right-24 { - margin-left: 2px; - } - - // deprecated - .icon--chevron-left-24 { - margin-left: -2px; - } - .icon--chevron-right-12 { - margin-left: 1px; + margin-inline-start: 1px; } .icon--chevron-left-12 { - margin-left: -1px; + margin-inline-end: 1px; } align-items: center; @@ -208,32 +198,11 @@ span.carousel__container { right: -@spacing-200; } - // deprecated - .carousel__control .icon--chevron-left-24 { - margin-left: 2px; - } - - .carousel__control .icon--chevron-left-12 { - margin-left: 1px; - } - .carousel__control--next { left: -@spacing-200; right: unset; } - // deprecated - .carousel__control .icon--chevron-right-24 { - margin-left: -2px; - } - - .carousel__control .icon--chevron-right-12 { - margin-left: -1px; - } - - // deprecated (first two selectors only) - .carousel__control .icon--chevron-left-24, - .carousel__control .icon--chevron-right-24, .carousel__control .icon--chevron-left-12, .carousel__control .icon--chevron-right-12 { transform: rotate(180deg); diff --git a/src/less/combobox/combobox.less b/src/less/combobox/combobox.less index 024b6bc22..25f1cbdae 100644 --- a/src/less/combobox/combobox.less +++ b/src/less/combobox/combobox.less @@ -35,6 +35,11 @@ span.combobox { .dropdown-reverse(); } +.combobox__control > svg.icon, +.combobox__control > button { + margin-inline-start: 8px; +} + .combobox__option[role^="option"] { .listbox-option-base(); .dropdown-item-border-radius(combobox-listbox); @@ -88,7 +93,6 @@ span.combobox { .combobox__control > svg.icon--chevron-down-12 { .color-token(combobox-textbox-icon-color, color-foreground-primary); - margin-left: 8px; pointer-events: none; position: absolute; right: 17px; // +1 px for the border on the input box @@ -205,8 +209,6 @@ span.combobox { .combobox__control > svg.icon, .combobox__control > button { - margin-left: 0; - margin-right: 8px; right: unset; } diff --git a/src/less/details/details.less b/src/less/details/details.less index 7cd094616..2e1701f58 100644 --- a/src/less/details/details.less +++ b/src/less/details/details.less @@ -36,7 +36,7 @@ summary.details__summary--small { } span.details__icon { - margin-left: 8px; + margin-inline-start: 8px; } // progressive enhancement - override hidden SVG @@ -44,11 +44,6 @@ span.details__icon[hidden] { display: inline-block; } -[dir="rtl"] span.details__icon { - margin-left: 0; - margin-right: 8px; -} - details.details[open] { span.details__icon { transform: rotate(180deg); diff --git a/src/less/field/field.less b/src/less/field/field.less index 44e81132c..177a4cbe1 100644 --- a/src/less/field/field.less +++ b/src/less/field/field.less @@ -40,7 +40,7 @@ div.field--table { } .field__description--group > :last-child { - margin-left: 5px; + margin-inline-start: 5px; text-align: right; } @@ -167,7 +167,6 @@ div.field__description { [dir="rtl"] { .field__description--group > :last-child { - margin-right: 5px; text-align: left; } } diff --git a/src/less/filter-menu-button/filter-menu-button.less b/src/less/filter-menu-button/filter-menu-button.less index 669b57226..536a4e610 100644 --- a/src/less/filter-menu-button/filter-menu-button.less +++ b/src/less/filter-menu-button/filter-menu-button.less @@ -38,7 +38,7 @@ button.filter-menu-button__button { svg.icon--chevron-down-12 { align-self: center; .color-token(filter-menu-button-icon-color, color-foreground-primary); - margin-left: 8px; + margin-inline-start: 8px; } } @@ -252,11 +252,6 @@ div.filter-menu-button__item[role^="menuitem"]:focus:not(:focus-visible) { } [dir="rtl"] { - .filter-menu-button__button-cell .icon--chevron-down-12 { - margin-left: 0; - margin-right: 8px; - } - .filter-menu-button__checkbox { margin-left: 8px; } diff --git a/src/less/inline-notice/inline-notice.less b/src/less/inline-notice/inline-notice.less index f56fe1410..fb2174457 100644 --- a/src/less/inline-notice/inline-notice.less +++ b/src/less/inline-notice/inline-notice.less @@ -15,7 +15,7 @@ span.inline-notice { .inline-notice__header { display: flex; - margin-right: @spacing-100; + margin-inline-end: @spacing-100; margin-top: @spacing-50; } @@ -27,9 +27,3 @@ span.inline-notice { .inline-notice button.fake-link { .color-token(color-foreground-primary); } - -[dir="rtl"] { - .inline-notice__header .icon.icon--confirmation-filled-16 { - margin-left: @spacing-100; - } -} diff --git a/src/less/lightbox-dialog/lightbox-dialog.less b/src/less/lightbox-dialog/lightbox-dialog.less index ee55f0abe..30cb21ae4 100644 --- a/src/less/lightbox-dialog/lightbox-dialog.less +++ b/src/less/lightbox-dialog/lightbox-dialog.less @@ -71,7 +71,7 @@ button.icon-btn.lightbox-dialog__close { } button.icon-btn.lightbox-dialog__prev { - margin-right: 16px; + margin-inline-end: @spacing-200; } .lightbox-dialog--expressive button.icon-btn.lightbox-dialog__prev, @@ -185,10 +185,6 @@ button.icon-btn.lightbox-dialog__prev { } [dir="rtl"] { - button.icon-btn.lightbox-dialog__prev { - margin-left: 16px; - margin-right: 0; - } button.icon-btn.lightbox-dialog__prev .icon--chevron-left-16 { transform: rotate(180deg); } diff --git a/src/less/listbox-button/listbox-button.less b/src/less/listbox-button/listbox-button.less index f7d35300c..1e6971435 100644 --- a/src/less/listbox-button/listbox-button.less +++ b/src/less/listbox-button/listbox-button.less @@ -100,7 +100,7 @@ button.expand-btn[aria-expanded="true"] ~ div.listbox-button__listbox, .listbox-button__option svg.icon { .listbox-option-status(); - margin-left: @spacing-100; + margin-inline-start: @spacing-100; } div.listbox-button__option[role="option"][aria-selected="true"] svg.icon { @@ -131,11 +131,6 @@ span.listbox-button__value { // stylelint-disable no-descending-specificity [dir="rtl"] { - .listbox-button__option svg.icon { - margin-left: 0; - margin-right: @spacing-100; - } - .listbox-button .btn__label { .color-token(listbox-button-label-color, color-foreground-secondary); margin-left: 3px; diff --git a/src/less/listbox/listbox.less b/src/less/listbox/listbox.less index ace916b15..7469413b3 100644 --- a/src/less/listbox/listbox.less +++ b/src/less/listbox/listbox.less @@ -43,12 +43,7 @@ span.listbox__value { div.listbox__option svg.icon { .listbox-option-status(); - margin-left: @spacing-100; -} - -[dir="rtl"] div.listbox__option svg.icon { - margin-left: 0; - margin-right: @spacing-100; + margin-inline-start: @spacing-100; } div.listbox__options[role="listbox"]:focus diff --git a/src/less/mixins/private/button-mixins.less b/src/less/mixins/private/button-mixins.less index 02d4a8f52..4646a0c77 100644 --- a/src/less/mixins/private/button-mixins.less +++ b/src/less/mixins/private/button-mixins.less @@ -46,11 +46,11 @@ align-self: center; &:first-child { - margin-right: 8px; // when icon is placed before button text + margin-inline-end: 8px; // when icon is placed before button text } &:last-child { - margin-left: 8px; // when icon is placed after button text + margin-inline-start: 8px; // when icon is placed after button text } &:only-child { diff --git a/src/less/mixins/private/dialog-mixins.less b/src/less/mixins/private/dialog-mixins.less index 250c52024..2525e1ef5 100644 --- a/src/less/mixins/private/dialog-mixins.less +++ b/src/less/mixins/private/dialog-mixins.less @@ -77,7 +77,7 @@ } & > :last-child:not(:only-child) { - margin-left: @spacing-200; + margin-inline-start: @spacing-200; } } diff --git a/src/less/page-notice/page-notice.less b/src/less/page-notice/page-notice.less index 5b5ad7552..1d973e8eb 100644 --- a/src/less/page-notice/page-notice.less +++ b/src/less/page-notice/page-notice.less @@ -107,13 +107,13 @@ span[role="region"].page-notice { .page-notice__header { grid-column: 1; grid-row: 1; - padding-right: @spacing-200; + margin-inline-end: @spacing-200; } .page-notice__main { grid-column: 1 / 3; grid-row: 1; - padding-right: @spacing-200; + margin-inline-end: @spacing-200; } .page-notice__header + .page-notice__main { @@ -170,15 +170,6 @@ p.page-notice__cta { } [dir="rtl"] { - .page-notice__header { - padding-left: 16px; - padding-right: 0; - } - - .page-notice__main { - padding-right: 0; - } - .page-notice__footer { margin-left: initial; margin-right: auto; diff --git a/src/less/pagination/pagination.less b/src/less/pagination/pagination.less index 16f911687..d3ab98225 100644 --- a/src/less/pagination/pagination.less +++ b/src/less/pagination/pagination.less @@ -41,12 +41,12 @@ button.pagination__previous { a.pagination__next, button.pagination__next { - margin-left: @spacing-100; + margin-inline-start: @spacing-100; } a.pagination__previous, button.pagination__previous { - margin-right: @spacing-100; + margin-inline-end: @spacing-100; } .pagination__item { @@ -143,17 +143,6 @@ nav.pagination--fluid ol.pagination__items li { nav.pagination svg.icon--arrow-left-16 { transform: rotate(180deg); } - - a.pagination__next, - button.pagination__next { - margin-left: 0; - margin-right: @spacing-100; - } - a.pagination__previous, - button.pagination__previous { - margin-left: @spacing-100; - margin-right: 0; - } } @media (min-width: @_screen-size-MD) { diff --git a/src/less/progress-stepper/progress-stepper.less b/src/less/progress-stepper/progress-stepper.less index b3e48724a..3075ef0fc 100644 --- a/src/less/progress-stepper/progress-stepper.less +++ b/src/less/progress-stepper/progress-stepper.less @@ -144,13 +144,13 @@ hr.progress-stepper__separator { .progress-stepper__item:first-child .progress-stepper__text { align-self: flex-start; - margin-left: @spacing-50; + margin-inline-start: @spacing-50; text-align: left; } .progress-stepper__item:last-child .progress-stepper__text { align-self: flex-end; - margin-right: @spacing-50; + margin-inline-end: @spacing-50; text-align: right; } @@ -190,7 +190,7 @@ hr.progress-stepper__separator { .progress-stepper--vertical .progress-stepper__item .progress-stepper__text { align-self: center; - margin-left: @spacing-200; + margin-inline-start: @spacing-200; margin-top: 0; text-align: left; white-space: nowrap; @@ -217,8 +217,6 @@ hr.progress-stepper__separator { [dir="rtl"] { .progress-stepper__item:first-child .progress-stepper__text { - margin-left: 0; - margin-right: @spacing-50; text-align: right; } @@ -261,16 +259,12 @@ hr.progress-stepper__separator { } .progress-stepper__item:last-child .progress-stepper__text { - margin-left: @spacing-50; - margin-right: 0; text-align: left; } .progress-stepper--vertical .progress-stepper__item .progress-stepper__text { - margin-left: inherit; - margin-right: @spacing-200; text-align: right; } diff --git a/src/less/section-notice/section-notice.less b/src/less/section-notice/section-notice.less index d3685ebec..2f520a742 100644 --- a/src/less/section-notice/section-notice.less +++ b/src/less/section-notice/section-notice.less @@ -68,14 +68,14 @@ span[role="region"].section-notice { grid-column: 1; grid-row: 1; height: @spacing-200; + margin-inline-end: @spacing-200; margin-top: 1px; - padding-right: @spacing-200; } .section-notice__main { grid-column: 1 / 3; grid-row: 1; - padding-right: @spacing-200; + margin-inline-end: @spacing-200; } .section-notice__header + .section-notice__main { @@ -130,11 +130,6 @@ p.section-notice__cta { } [dir="rtl"] { - .section-notice__header { - padding-left: @spacing-200; - padding-right: 0; - } - .section-notice__footer { justify-self: flex-start; margin-left: initial; @@ -143,10 +138,6 @@ p.section-notice__cta { padding-right: 0; } - .section-notice__main { - padding-right: 0; - } - p.page-notice__cta { margin-left: 16px; padding-left: 16px; diff --git a/src/less/section-title/section-title.less b/src/less/section-title/section-title.less index cf1e4c25b..34c211712 100644 --- a/src/less/section-title/section-title.less +++ b/src/less/section-title/section-title.less @@ -26,7 +26,7 @@ .section-title__title svg.icon { .background-color-token(color-background-secondary); border-radius: 12px; - margin-left: @spacing-100; + margin-inline-start: @spacing-100; padding: 7px; } @@ -74,8 +74,6 @@ [dir="rtl"] { .section-title__title svg.icon { - margin-left: 0; - margin-right: @spacing-100; transform: rotate(180deg); } diff --git a/src/less/segmented-buttons/segmented-buttons.less b/src/less/segmented-buttons/segmented-buttons.less index e38aa0eab..fac72d995 100644 --- a/src/less/segmented-buttons/segmented-buttons.less +++ b/src/less/segmented-buttons/segmented-buttons.less @@ -27,7 +27,7 @@ } .segmented-buttons > ul > li:not(:first-child) { - margin-left: @spacing-100; + margin-inline-start: @spacing-100; } .segmented-buttons__button { @@ -70,10 +70,3 @@ background-color: var(--color-state-primary-hover); } } - -[dir="rtl"] { - .segmented-buttons > ul > li:not(:first-child) { - margin-left: 0; - margin-right: @spacing-100; - } -} diff --git a/src/less/snackbar-dialog/snackbar-dialog.less b/src/less/snackbar-dialog/snackbar-dialog.less index 0a04d42f0..c8d624e25 100644 --- a/src/less/snackbar-dialog/snackbar-dialog.less +++ b/src/less/snackbar-dialog/snackbar-dialog.less @@ -50,7 +50,7 @@ } .snackbar-dialog__main { - margin-right: @spacing-400; + margin-inline-end: @spacing-400; } .snackbar-dialog__main p { @@ -58,7 +58,7 @@ } .snackbar-dialog__actions { - margin-left: auto; + margin-inline-start: auto; } .snackbar-dialog__window--column .snackbar-dialog__actions { @@ -91,14 +91,4 @@ left: auto; right: 0; } - - .snackbar-dialog__main { - margin-left: @spacing-400; - margin-right: 0; - } - - .snackbar-dialog__actions { - margin-left: 0; - margin-right: auto; - } } diff --git a/src/less/tabs/tabs.less b/src/less/tabs/tabs.less index 701a6a7ab..59f449008 100644 --- a/src/less/tabs/tabs.less +++ b/src/less/tabs/tabs.less @@ -34,7 +34,7 @@ li.fake-tabs__item { -webkit-tap-highlight-color: var(--color-background-secondary); &:not(:last-child) { - margin-right: 36px; + margin-inline-end: @spacing-450; } } @@ -96,13 +96,3 @@ li.fake-tabs__item > a:not([aria-current]):hover { .fake-tabs__cell { margin: @spacing-200 0; } - -[dir="rtl"] .tabs { - div.tabs__item[role="tab"], - li.fake-tabs__item { - &:not(:last-child) { - margin-left: 40px; - margin-right: 0; - } - } -} diff --git a/src/less/textbox/textbox.less b/src/less/textbox/textbox.less index aca56b522..a1921ddc2 100644 --- a/src/less/textbox/textbox.less +++ b/src/less/textbox/textbox.less @@ -121,7 +121,7 @@ input.textbox__control--large { .textbox--icon-end { input.textbox__control, textarea.textbox__control { - padding-right: 40px; + padding-inline-end: 40px; } > svg:last-child { @@ -166,11 +166,6 @@ textarea.textbox__control[readonly]:focus { } .textbox--icon-end { - input.textbox__control, - textarea.textbox__control { - padding-left: 40px; - } - button.icon-btn { left: 0; right: auto; diff --git a/src/less/toast-dialog/toast-dialog.less b/src/less/toast-dialog/toast-dialog.less index aea2e6348..7da6a6699 100644 --- a/src/less/toast-dialog/toast-dialog.less +++ b/src/less/toast-dialog/toast-dialog.less @@ -68,7 +68,8 @@ button.toast-dialog__close { align-self: center; border: 0; .color-token(toast-dialog-foreground-color, color-foreground-on-information); - margin: 0 0 0 auto; + // margin: 0 0 0 auto; + margin-inline-start: auto; outline-offset: -@spacing-100; padding: 0; @@ -111,7 +112,7 @@ button.toast-dialog__close > svg { background-color: transparent; .color-token(toast-dialog-foreground-color, color-background-primary); font-weight: 700; - margin-right: @spacing-100; + margin-inline-end: @spacing-100; } button.btn--primary:focus, @@ -160,9 +161,3 @@ button.toast-dialog__close > svg { margin: @spacing-200 @spacing-300 @spacing-300; } } - -[dir="rtl"] { - .toast-dialog__footer .btn--primary { - margin-right: 7px; - } -} diff --git a/src/less/variables/variables.less b/src/less/variables/variables.less index 6a592b627..0a3417e20 100644 --- a/src/less/variables/variables.less +++ b/src/less/variables/variables.less @@ -55,6 +55,7 @@ @spacing-250: @spacing-100 * 2.5; @spacing-300: @spacing-100 * 3; @spacing-400: @spacing-100 * 4; +@spacing-450: @spacing-100 * 4.5; @spacing-600: @spacing-100 * 6; @spacing-800: @spacing-100 * 8; diff --git a/src/less/video/video.less b/src/less/video/video.less index 309426347..ecccd8caf 100644 --- a/src/less/video/video.less +++ b/src/less/video/video.less @@ -35,7 +35,7 @@ } .video-player__report-button > svg { - margin-right: @spacing-50; + margin-inline-end: @spacing-50; } .video-player .shaka-overflow-menu svg { @@ -67,10 +67,3 @@ .video-player--poster .shaka-scrim-container { visibility: hidden; } - -[dir="rtl"] { - .video-player__report-button > svg { - margin-left: @spacing-50; - margin-right: 0; - } -} From 0c111bb3593c459ff80a5056c5005ca2af6838a8 Mon Sep 17 00:00:00 2001 From: Arthur Khachatryan Date: Thu, 28 Sep 2023 10:02:10 -0700 Subject: [PATCH 2/2] fix(global): fixed some RTL cases and textbox stories --- dist/button/button.css | 5 ----- dist/textbox/textbox.css | 7 ++----- src/less/button/button.less | 6 ------ src/less/textbox/stories/rtl/textbox.stories.js | 2 +- src/less/textbox/stories/textbox.stories.js | 2 +- src/less/textbox/textbox.less | 10 +++++----- 6 files changed, 9 insertions(+), 23 deletions(-) diff --git a/dist/button/button.css b/dist/button/button.css index d94685d65..988c75509 100644 --- a/dist/button/button.css +++ b/dist/button/button.css @@ -499,8 +499,3 @@ button.btn--floating-label .btn__floating-label--inline { border-left-color: var(--btn-primary-border-color, var(--color-stroke-accent)); border-right-color: var(--primary-border-split-color, var(--color-stroke-subtle)); } -[dir="rtl"] button.btn svg.icon, -[dir="rtl"] a.fake-btn svg.icon { - margin-left: 8px; - margin-right: 0; -} diff --git a/dist/textbox/textbox.css b/dist/textbox/textbox.css index 8672b7a8c..7fa305eab 100644 --- a/dist/textbox/textbox.css +++ b/dist/textbox/textbox.css @@ -122,7 +122,8 @@ textarea.textbox__control[readonly]:focus { } .textbox > svg:first-child + input.textbox__control, .textbox > svg:first-child + textarea.textbox__control { - padding-left: 40px; + -webkit-padding-start: 40px; + padding-inline-start: 40px; } .textbox__control--fluid { width: 100%; @@ -130,10 +131,6 @@ textarea.textbox__control[readonly]:focus { [dir="rtl"] .textbox > svg:first-child { right: 16px; } -[dir="rtl"] .textbox > svg:first-child + input.textbox__control, -[dir="rtl"] .textbox > svg:first-child + textarea.textbox__control { - padding-right: 40px; -} [dir="rtl"] .textbox--icon-end button.icon-btn { left: 0; right: auto; diff --git a/src/less/button/button.less b/src/less/button/button.less index 006d82df7..239b7a313 100644 --- a/src/less/button/button.less +++ b/src/less/button/button.less @@ -508,10 +508,4 @@ button.btn--floating-label .btn__floating-label--inline { .border-right-color-token(primary-border-split-color, color-stroke-subtle); } } - - button.btn svg.icon, - a.fake-btn svg.icon { - margin-left: 8px; - margin-right: 0; - } } diff --git a/src/less/textbox/stories/rtl/textbox.stories.js b/src/less/textbox/stories/rtl/textbox.stories.js index b28fef713..9c793e17c 100644 --- a/src/less/textbox/stories/rtl/textbox.stories.js +++ b/src/less/textbox/stories/rtl/textbox.stories.js @@ -1,4 +1,4 @@ -export default { title: "Skin/Textbox/RTL" }; +export default { title: "Skin/Textbox/RTL/Base" }; export const singleLine = () => `
diff --git a/src/less/textbox/stories/textbox.stories.js b/src/less/textbox/stories/textbox.stories.js index 214659ccb..297834922 100644 --- a/src/less/textbox/stories/textbox.stories.js +++ b/src/less/textbox/stories/textbox.stories.js @@ -1,4 +1,4 @@ -export default { title: "Skin/Textbox" }; +export default { title: "Skin/Textbox/Base" }; export const singleLine = () => ` diff --git a/src/less/textbox/textbox.less b/src/less/textbox/textbox.less index a1921ddc2..4e21d343d 100644 --- a/src/less/textbox/textbox.less +++ b/src/less/textbox/textbox.less @@ -146,7 +146,7 @@ textarea.textbox__control[readonly]:focus { + input.textbox__control, + textarea.textbox__control { - padding-left: 40px; + padding-inline-start: 40px; } } @@ -159,10 +159,10 @@ textarea.textbox__control[readonly]:focus { .textbox > svg:first-child { right: @spacing-200; - & + input.textbox__control, - & + textarea.textbox__control { - padding-right: 40px; - } + // & + input.textbox__control, + // & + textarea.textbox__control { + // padding-right: 40px; + // } } .textbox--icon-end {