diff --git a/.stylelintrc.json b/.stylelintrc.json index 7bf7ad0..b9c6b34 100644 --- a/.stylelintrc.json +++ b/.stylelintrc.json @@ -2,9 +2,11 @@ "extends": "stylelint-config-standard", "plugins": [ "stylelint-no-browser-hacks/lib", + "stylelint-use-logical", "stylelint-order" ], "rules": { + "csstools/use-logical": true, "comment-empty-line-before": null, "function-linear-gradient-no-nonstandard-direction": null, "function-whitespace-after": null, @@ -110,15 +112,15 @@ "min-height", "max-height", "margin", - "margin-top", - "margin-right", - "margin-bottom", - "margin-left", + "margin-block-start", + "margin-block-end", + "margin-inline-start", + "margin-inline-end", "padding", - "padding-top", - "padding-right", - "padding-bottom", - "padding-left", + "padding-block-start", + "padding-block-end", + "padding-inline-start", + "padding-inline-end", "table-layout", "-webkit-columns", @@ -309,37 +311,37 @@ "border-width", "border-style", "border-color", - "border-top", - "border-top-width", - "border-top-style", - "border-top-color", - "border-right", - "border-right-width", - "border-right-style", - "border-right-color", - "border-bottom", - "border-bottom-width", - "border-bottom-style", - "border-bottom-color", - "border-left", - "border-left-width", - "border-left-style", - "border-left-color", + "border-block-start", + "border-block-start-width", + "border-block-start-style", + "border-block-start-color", + "border-inline-end", + "border-inline-end-width", + "border-inline-end-style", + "border-inline-end-color", + "border-block-end", + "border-block-end-width", + "border-block-end-style", + "border-block-end-color", + "border-inline-start", + "border-inline-start-width", + "border-inline-start-style", + "border-inline-start-color", "-webkit-border-radius", "-moz-border-radius", "border-radius", - "-webkit-border-top-left-radius", + "-webkit-border-block-start-left-radius", "-moz-border-radius-topleft", - "border-top-left-radius", - "-webkit-border-top-right-radius", + "border-block-start-left-radius", + "-webkit-border-block-start-right-radius", "-moz-border-radius-topright", - "border-top-right-radius", - "-webkit-border-bottom-right-radius", + "border-block-start-right-radius", + "-webkit-border-block-end-right-radius", "-moz-border-radius-bottomright", - "border-bottom-right-radius", - "-webkit-border-bottom-left-radius", + "border-block-end-right-radius", + "-webkit-border-block-end-left-radius", "-moz-border-radius-bottomleft", - "border-bottom-left-radius", + "border-block-end-left-radius", "-webkit-border-image", "-moz-border-image", "-o-border-image", diff --git a/.tugboat/config.yml b/.tugboat/config.yml index 1b630b0..5c146d2 100644 --- a/.tugboat/config.yml +++ b/.tugboat/config.yml @@ -91,6 +91,22 @@ services: $TUGBOAT_ROOT/.tugboat/build.sh preloaded $TUGBOAT_ROOT/.tugboat/build.sh minimal $TUGBOAT_ROOT/.tugboat/build.sh standard + visualdiffs: + - / + - /node/7 + - /node/6 + - /node/4 + - /node/1 + - /node/3 + - /form/job-application + - /form/registration + - /form/session-evaluation + - /form/user-profile + - /grid-view + - /node/31 + - /table + - /contact + - /search/node?keys=drupal mysql: image: tugboatqa/mariadb diff --git a/css/base/base.css b/css/base/base.css index 9926703..bd2be7c 100644 --- a/css/base/base.css +++ b/css/base/base.css @@ -93,22 +93,18 @@ sans-serif; } body { - color: #313637; -} - -[dir] body { margin: 0; + color: #313637; background-color: #f7f9fa; background-image: url("../../images/background.svg"); -} - -[dir=ltr] body { background-position: top left; } -[dir=rtl] body { - background-position: top right; -} +/* LTR */ + +[dir="rtl"] body { + background-position: top right; + } body.js-fixed { position: fixed; @@ -133,6 +129,8 @@ video { } h1 { + margin-top: 18px; + margin-bottom: 18px; letter-spacing: -0.01em; color: #0d1214; font-size: 1.5rem; @@ -140,25 +138,19 @@ h1 { line-height: 1.6875rem; } -[dir] h1 { - margin-top: 18px; - margin-bottom: 18px; -} - @media (min-width: 700px) { h1 { + margin-top: 36px; + margin-bottom: 36px; font-size: 3.75rem; line-height: 4.5rem } - -[dir] h1 { - margin-top: 36px; - margin-bottom: 36px -} } h2 { + margin-top: 18px; + margin-bottom: 18px; letter-spacing: -0.01em; color: #0d1214; font-size: 1.5rem; @@ -166,37 +158,53 @@ h2 { line-height: 1.6875rem; } -[dir] h2 { - margin-top: 18px; - margin-bottom: 18px; -} - @media (min-width: 700px) { h2 { + margin-top: 36px; + margin-bottom: 36px; font-size: 2.25rem; line-height: 3.375rem } + } -[dir] h2 { - margin-top: 36px; - margin-bottom: 36px +[dir="ltr"] ul { + margin-left: 1.5em; +} + +[dir="rtl"] ul { + margin-right: 1.5em; +} + +[dir="ltr"] ul { + margin-right: 0; +} + +[dir="rtl"] ul { + margin-left: 0; +} + +[dir="ltr"] ul { + padding-left: 0; +} + +[dir="rtl"] ul { + padding-right: 0; } - } ul { + margin-top: 0.25em; + margin-bottom: 0.25em; list-style-type: disc; list-style-image: none; } -[dir=ltr] ul { - margin: 0.25em 0 0.25em 1.5em; - padding-left: 0; +[dir="ltr"] .overlay { + left: 0; } -[dir=rtl] ul { - margin: 0.25em 1.5em 0.25em 0; - padding-right: 0; +[dir="rtl"] .overlay { + right: 0; } .overlay { @@ -206,20 +214,9 @@ ul { width: 100%; height: 100vh; opacity: 0.2; -} - -[dir] .overlay { background: #0d77b5; } -[dir=ltr] .overlay { - left: 0; -} - -[dir=rtl] .overlay { - right: 0; -} - .js-overlay-active .overlay { display: block; } diff --git a/css/base/base.pcss.css b/css/base/base.pcss.css index 68f4d0d..1c8f0f8 100644 --- a/css/base/base.pcss.css +++ b/css/base/base.pcss.css @@ -24,7 +24,11 @@ body { color: var(--color--gray-10); background-color: var(--color--gray-95); background-image: url("../../images/background.svg"); - background-position: top left; + background-position: top left; /* LTR */ + + [dir="rtl"] & { + background-position: top right; + } &.js-fixed { position: fixed; @@ -50,8 +54,7 @@ video { } h1 { - margin-top: var(--sp); - margin-bottom: var(--sp); + margin-block: var(--sp); letter-spacing: -0.01em; color: var(--color--gray-0); font-size: 24px; @@ -59,16 +62,14 @@ h1 { line-height: var(--sp1-5); @media (--md) { - margin-top: var(--sp2); - margin-bottom: var(--sp2); + margin-block: var(--sp2); font-size: 60px; line-height: var(--sp4); } } h2 { - margin-top: var(--sp); - margin-bottom: var(--sp); + margin-block: var(--sp); letter-spacing: -0.01em; color: var(--color--gray-0); font-size: 24px; @@ -76,24 +77,26 @@ h2 { line-height: var(--sp1-5); @media (--md) { - margin-top: var(--sp2); - margin-bottom: var(--sp2); + margin-block: var(--sp2); font-size: 36px; line-height: var(--sp3); } } ul { - margin: 0.25em 0 0.25em 1.5em; - padding-left: 0; + margin-block-start: 0.25em; + margin-block-end: 0.25em; + margin-inline-start: 1.5em; + margin-inline-end: 0; + padding-inline-start: 0; list-style-type: disc; list-style-image: none; } .overlay { position: fixed; - top: 0; - left: 0; + inset-block-start: 0; + inset-inline-start: 0; display: none; width: 100%; height: 100vh; diff --git a/css/components/_debug.css b/css/components/_debug.css index fc56abd..c25a34c 100644 --- a/css/components/_debug.css +++ b/css/components/_debug.css @@ -76,62 +76,73 @@ /* Form */ } +[dir="ltr"] .olivero-debug { + right: 0; +} + +[dir="rtl"] .olivero-debug { + left: 0; +} + +[dir="ltr"] .olivero-debug { + padding-left: 27px; +} + +[dir="rtl"] .olivero-debug { + padding-right: 27px; +} + +[dir="ltr"] .olivero-debug { + padding-right: 27px; +} + +[dir="rtl"] .olivero-debug { + padding-left: 27px; +} + .olivero-debug { position: fixed; bottom: 0; overflow: auto; max-width: 100%; + padding-top: 18px; + padding-bottom: 18px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; color: #fff; -} - -[dir] .olivero-debug { - padding: 18px 27px; border: solid 1px transparent; background-color: rgba(0, 0, 0, 0.5); } -[dir=ltr] .olivero-debug { - right: 0; -} - -[dir=rtl] .olivero-debug { - left: 0; -} - .olivero-debug a { color: inherit; } .olivero-debug label { width: 300px; - vertical-align: top; - font-size: 1.125rem; - } - -[dir] .olivero-debug label { margin-top: 5px; padding: 5px 0; cursor: pointer; + vertical-align: top; + font-size: 1.125rem; } -[dir] .olivero-debug input[type="checkbox"] { - margin-top: 10px; - cursor: pointer; - } - -[dir=ltr] .olivero-debug input[type="checkbox"] { - margin-right: 10px; - } +[dir="ltr"] .olivero-debug input[type="checkbox"] { + margin-right: 10px; +} -[dir=rtl] .olivero-debug input[type="checkbox"] { +[dir="rtl"] .olivero-debug input[type="checkbox"] { margin-left: 10px; +} + +.olivero-debug input[type="checkbox"] { + margin-top: 10px; + cursor: pointer; } -[dir] .olivero-debug .description { +.olivero-debug .description { margin-top: 18px; } @@ -139,56 +150,40 @@ display: flex; } +[dir="ltr"] .olivero-debug__close { + right: 0; +} + +[dir="rtl"] .olivero-debug__close { + left: 0; +} + .olivero-debug__close { position: absolute; top: 0; display: block; width: 40px; height: 40px; - text-indent: -999px; -} - -[dir] .olivero-debug__close { cursor: pointer; + text-indent: -999px; border: 0; background: transparent; } -[dir=ltr] .olivero-debug__close { - right: 0; -} - -[dir=rtl] .olivero-debug__close { - left: 0; -} - .olivero-debug__close:before, .olivero-debug__close:after { position: absolute; + /* stylelint-disable csstools/use-logical */ top: 50%; + left: 50%; + /* stylelint-enable csstools/use-logical */ width: 18px; height: 3px; content: ""; - } - -[dir] .olivero-debug__close:before, [dir] .olivero-debug__close:after { + transform: translate(-50%, -50%) rotate(45deg); background-color: #fff; } -[dir=ltr] .olivero-debug__close:before, [dir=ltr] .olivero-debug__close:after { - left: 50%; - transform: translate(-50%, -50%) rotate(45deg); - } - -[dir=rtl] .olivero-debug__close:before, [dir=rtl] .olivero-debug__close:after { - right: 50%; - transform: translate(50%, -50%) rotate(-45deg); - } - -[dir=ltr] .olivero-debug__close:after { - transform: translate(-50%, -50%) rotate(-45deg); - } - -[dir=rtl] .olivero-debug__close:after { - transform: translate(50%, -50%) rotate(45deg); +.olivero-debug__close:after { + transform: translate(-50%, -50%) rotate(-45deg); } diff --git a/css/components/_debug.pcss.css b/css/components/_debug.pcss.css index 7cdc65e..314bb14 100644 --- a/css/components/_debug.pcss.css +++ b/css/components/_debug.pcss.css @@ -7,11 +7,13 @@ .olivero-debug { position: fixed; - right: 0; - bottom: 0; + inset-block-end: 0; + inset-inline-end: 0; overflow: auto; max-width: 100%; - padding: var(--sp) var(--sp1-5); + padding-block: var(--sp); + padding-inline-start: var(--sp1-5); + padding-inline-end: var(--sp1-5); user-select: none; color: var(--color--white); border: solid 1px transparent; @@ -23,7 +25,7 @@ label { width: 300px; - margin-top: 5px; + margin-block-start: 5px; padding: 5px 0; cursor: pointer; vertical-align: top; @@ -31,13 +33,13 @@ } input[type="checkbox"] { - margin-top: 10px; - margin-right: 10px; + margin-block-start: 10px; + margin-inline-end: 10px; cursor: pointer; } .description { - margin-top: var(--sp); + margin-block-start: var(--sp); } } @@ -47,8 +49,8 @@ .olivero-debug__close { position: absolute; - top: 0; - right: 0; + inset-block-start: 0; + inset-inline-end: 0; display: block; width: 40px; height: 40px; @@ -60,8 +62,10 @@ &:before, &:after { position: absolute; + /* stylelint-disable csstools/use-logical */ top: 50%; left: 50%; + /* stylelint-enable csstools/use-logical */ width: 18px; height: 3px; content: ""; diff --git a/css/components/action-links.css b/css/components/action-links.css index 894873f..30a17ce 100644 --- a/css/components/action-links.css +++ b/css/components/action-links.css @@ -67,13 +67,37 @@ /* Form */ } +[dir="ltr"] .action-links { + margin-left: 0; +} +[dir="rtl"] .action-links { + margin-right: 0; +} +[dir="ltr"] .action-links { + margin-right: 0; +} +[dir="rtl"] .action-links { + margin-left: 0; +} +[dir="ltr"] .action-links { + padding-left: 0; +} +[dir="rtl"] .action-links { + padding-right: 0; +} +[dir="ltr"] .action-links { + padding-right: 0; +} +[dir="rtl"] .action-links { + padding-left: 0; +} .action-links { + margin-top: 0; + margin-bottom: 0; + padding-top: 0; + padding-bottom: 0; list-style: none; } -[dir] .action-links { - margin: 0; - padding: 0; -} .action-links li { display: inline-block; } diff --git a/css/components/action-links.pcss.css b/css/components/action-links.pcss.css index 41e423d..26551d1 100644 --- a/css/components/action-links.pcss.css +++ b/css/components/action-links.pcss.css @@ -5,8 +5,12 @@ @import "../base/variables.pcss.css"; .action-links { - margin: 0; - padding: 0; + margin-block: 0; + margin-inline-start: 0; + margin-inline-end: 0; + padding-block: 0; + padding-inline-start: 0; + padding-inline-end: 0; list-style: none; li { diff --git a/css/components/ajax-progress.module.css b/css/components/ajax-progress.module.css index bc8b31c..8b9400a 100644 --- a/css/components/ajax-progress.module.css +++ b/css/components/ajax-progress.module.css @@ -84,35 +84,47 @@ * Throbber. */ +[dir="ltr"] .ajax-progress-throbber { + margin-left: 9px; +} + +[dir="rtl"] .ajax-progress-throbber { + margin-right: 9px; +} + +[dir="ltr"] .ajax-progress-throbber { + margin-right: 9px; +} + +[dir="rtl"] .ajax-progress-throbber { + margin-left: 9px; +} + .ajax-progress-throbber { position: relative; display: inline-flex; align-content: center; height: 1.125rem; + margin-top: -3px; + margin-bottom: 0; vertical-align: middle; white-space: nowrap; line-height: 1.125rem; } -[dir] .ajax-progress-throbber { - margin: -3px 9px 0; -} - .ajax-progress-throbber .throbber { width: 1.125rem; height: 1.125rem; -} - -[dir] .ajax-progress-throbber .throbber { border-width: 2px; + border-color: #2494db transparent #2494db #2494db; } -[dir=ltr] .ajax-progress-throbber .throbber { - border-color: #2494db transparent #2494db #2494db; +[dir="ltr"] .ajax-progress-throbber .message { + padding-left: 9px; } -[dir=rtl] .ajax-progress-throbber .throbber { - border-color: #2494db #2494db #2494db transparent; +[dir="rtl"] .ajax-progress-throbber .message { + padding-right: 9px; } .ajax-progress-throbber .message { @@ -121,27 +133,24 @@ font-weight: 400; } -[dir=ltr] .ajax-progress-throbber .message { - padding-left: 9px; -} - -[dir=rtl] .ajax-progress-throbber .message { - padding-right: 9px; -} - /** * Full screen throbber. */ +[dir="ltr"] .ajax-progress-fullscreen { + left: 50%; +} + +[dir="rtl"] .ajax-progress-fullscreen { + right: 50%; +} + .ajax-progress-fullscreen { position: fixed; z-index: 1000; top: 50%; width: 3.5rem; height: 3.5rem; -} - -[dir] .ajax-progress-fullscreen { margin: -1.75rem; border: 1px solid #afb8be; border-radius: 3.5rem; @@ -149,12 +158,16 @@ box-shadow: 0 0.25rem 0.625rem rgba(34, 35, 48, 0.1); } -[dir=ltr] .ajax-progress-fullscreen { - left: 50%; +[dir="rtl"] .ajax-progress-fullscreen { + box-shadow: 0 -0.25rem 0.625rem rgba(34, 35, 48, 0.1); + } + +[dir="ltr"] .ajax-progress-fullscreen:before { + left: 50%; } -[dir=rtl] .ajax-progress-fullscreen { - right: 50%; +[dir="rtl"] .ajax-progress-fullscreen:before { + right: 50%; } .ajax-progress-fullscreen:before { @@ -162,40 +175,21 @@ top: 50%; width: 1.75rem; height: 1.75rem; - content: ""; - } - -[dir] .ajax-progress-fullscreen:before { margin: -0.875rem; + content: ""; border-width: 3px; } -[dir=ltr] .ajax-progress-fullscreen:before { - left: 50%; - } - -[dir=rtl] .ajax-progress-fullscreen:before { - right: 50%; - } - /** * Common styles for all kinds of throbbers. */ -[dir] .ajax-progress-throbber .throbber, [dir] .ajax-progress-fullscreen:before { - border-radius: 50%; -} - -[dir=ltr] .ajax-progress-throbber .throbber, [dir=ltr] .ajax-progress-fullscreen:before { - animation: olivero-throbber-ltr 0.75s linear infinite; +.ajax-progress-throbber .throbber, +.ajax-progress-fullscreen:before { + animation: olivero-throbber 0.75s linear infinite; border-style: solid dotted solid solid; border-color: #2494db transparent #2494db #2494db; -} - -[dir=rtl] .ajax-progress-throbber .throbber, [dir=rtl] .ajax-progress-fullscreen:before { - animation: olivero-throbber-rtl 0.75s linear infinite; - border-style: solid solid solid dotted; - border-color: #2494db #2494db #2494db transparent; + border-radius: 50%; } /** @@ -203,15 +197,15 @@ * have a large margin set. */ -html[dir=ltr].js .button:not(.js-hide) + .ajax-progress-throbber { +html[dir="ltr"].js .button:not(.js-hide) + .ajax-progress-throbber { margin-left: 0; } -html[dir=rtl].js .button:not(.js-hide) + .ajax-progress-throbber { +html[dir="rtl"].js .button:not(.js-hide) + .ajax-progress-throbber { margin-right: 0; } -@keyframes olivero-throbber-ltr { +@keyframes olivero-throbber { 0% { transform: rotateZ(0); } @@ -220,13 +214,3 @@ html[dir=rtl].js .button:not(.js-hide) + .ajax-progress-throbber { transform: rotateZ(360deg); } } - -@keyframes olivero-throbber-rtl { - 0% { - transform: rotateZ(0); - } - - 100% { - transform: rotateZ(-360deg); - } -} diff --git a/css/components/ajax-progress.module.pcss.css b/css/components/ajax-progress.module.pcss.css index 96bf667..f8612ad 100644 --- a/css/components/ajax-progress.module.pcss.css +++ b/css/components/ajax-progress.module.pcss.css @@ -17,7 +17,10 @@ display: inline-flex; align-content: center; height: 1.125rem; - margin: -3px var(--sp0-5) 0; + margin-block-start: -3px; + margin-block-end: 0; + margin-inline-start: var(--sp0-5); + margin-inline-end: var(--sp0-5); vertical-align: middle; white-space: nowrap; line-height: 1.125rem; @@ -32,7 +35,7 @@ .ajax-progress-throbber .message { display: inline-block; - padding-left: var(--sp0-5); + padding-inline-start: var(--sp0-5); font-size: var(--font-size-s); font-weight: 400; } @@ -43,8 +46,8 @@ .ajax-progress-fullscreen { position: fixed; z-index: 1000; - top: 50%; - left: 50%; + inset-block-start: 50%; + inset-inline-start: 50%; width: 3.5rem; height: 3.5rem; margin: -1.75rem; @@ -53,10 +56,14 @@ background-color: var(--color--white); box-shadow: 0 0.25rem 0.625rem rgba(34, 35, 48, 0.1); + [dir="rtl"] & { + box-shadow: 0 -0.25rem 0.625rem rgba(34, 35, 48, 0.1); + } + &:before { position: absolute; - top: 50%; - left: 50%; + inset-block-start: 50%; + inset-inline-start: 50%; width: 1.75rem; height: 1.75rem; margin: -0.875rem; @@ -81,7 +88,7 @@ * have a large margin set. */ html.js .button:not(.js-hide) + .ajax-progress-throbber { - margin-left: 0; + margin-inline-start: 0; } @keyframes olivero-throbber { diff --git a/css/components/autocomplete-loading.module.css b/css/components/autocomplete-loading.module.css index 147d267..7ee20b5 100644 --- a/css/components/autocomplete-loading.module.css +++ b/css/components/autocomplete-loading.module.css @@ -79,82 +79,88 @@ :root { /* 18 18 */ } -html[dir=ltr].js .form-autocomplete { - padding-right: 54px; - background: - url("../../images/magnifying-glass.svg") no-repeat right 18px top 16px, - linear-gradient(to right, #7e96a7 6px, transparent 6px, transparent 100%) #f7f9fa; - } +html[dir="ltr"].js .form-autocomplete { + padding-right: 54px; +} -html[dir=rtl].js .form-autocomplete { +html[dir="rtl"].js .form-autocomplete { padding-left: 54px; +} + +html.js .form-autocomplete { background: - url("../../images/magnifying-glass.svg") no-repeat left 18px top 16px, - linear-gradient(to left, #7e96a7 6px, transparent 6px, transparent 100%) #f7f9fa; + url("../../images/magnifying-glass.svg") no-repeat right 18px top 16px, + linear-gradient(to right, #7e96a7 6px, transparent 6px, transparent 100%) #f7f9fa; } -html[dir=ltr].js .form-autocomplete:hover { - background: +html.js .form-autocomplete:hover { + background: url("../../images/magnifying-glass.svg") no-repeat right 18px top 16px, linear-gradient(to right, #53b0eb 6px, transparent 6px, transparent 100%), linear-gradient(to left, #53b0eb 2px, transparent 2px, transparent 100%) #f7f9fa; } -html[dir=rtl].js .form-autocomplete:hover { +html.js .form-autocomplete:focus { background: - url("../../images/magnifying-glass.svg") no-repeat left 18px top 16px, - linear-gradient(to left, #53b0eb 6px, transparent 6px, transparent 100%), - linear-gradient(to right, #53b0eb 2px, transparent 2px, transparent 100%) #f7f9fa; - } - -html[dir=ltr].js .form-autocomplete:focus { - background: url("../../images/magnifying-glass.svg") no-repeat right 18px top 16px, linear-gradient(to right, #53b0eb 6px, transparent 6px, transparent 100%), linear-gradient(to left, #53b0eb 2px, transparent 2px, transparent 100%) #f7f9fa; } -html[dir=rtl].js .form-autocomplete:focus { +html.js .form-autocomplete.ui-autocomplete-loading { + background: + url("../../images/throbber.svg") no-repeat right 18px top 16px, + linear-gradient(to right, #7e96a7 6px, transparent 6px, transparent 100%) #f7f9fa; + } + +html.js .form-autocomplete.ui-autocomplete-loading:hover { + background: + url("../../images/throbber.svg") no-repeat right 18px top 16px, + linear-gradient(to right, #53b0eb 6px, transparent 6px, transparent 100%), + linear-gradient(to left, #53b0eb 2px, transparent 2px, transparent 100%) #f7f9fa; + } + +html.js .form-autocomplete.ui-autocomplete-loading:focus { + background: + url("../../images/throbber.svg") no-repeat right 18px top 16px, + linear-gradient(to right, #53b0eb 6px, transparent 6px, transparent 100%), + linear-gradient(to left, #53b0eb 2px, transparent 2px, transparent 100%) #f7f9fa; + } + +html.js[dir="rtl"] .form-autocomplete { + background: + url("../../images/magnifying-glass.svg") no-repeat left 18px top 16px, + linear-gradient(to left, #7e96a7 6px, transparent 6px, transparent 100%) #f7f9fa; + } + +html.js[dir="rtl"] .form-autocomplete:hover { background: url("../../images/magnifying-glass.svg") no-repeat left 18px top 16px, linear-gradient(to left, #53b0eb 6px, transparent 6px, transparent 100%), linear-gradient(to right, #53b0eb 2px, transparent 2px, transparent 100%) #f7f9fa; } -html[dir=ltr].js .form-autocomplete.ui-autocomplete-loading { - background: - url("../../images/throbber.svg") no-repeat right 18px top 16px, - linear-gradient(to right, #7e96a7 6px, transparent 6px, transparent 100%) #f7f9fa; +html.js[dir="rtl"] .form-autocomplete:focus { + background: + url("../../images/magnifying-glass.svg") no-repeat left 18px top 16px, + linear-gradient(to left, #53b0eb 6px, transparent 6px, transparent 100%), + linear-gradient(to right, #53b0eb 2px, transparent 2px, transparent 100%) #f7f9fa; } -html[dir=rtl].js .form-autocomplete.ui-autocomplete-loading { +html.js[dir="rtl"] .form-autocomplete.ui-autocomplete-loading { background: url("../../images/throbber.svg") no-repeat left 18px top 16px, linear-gradient(to left, #7e96a7 6px, transparent 6px, transparent 100%) #f7f9fa; } -html[dir=ltr].js .form-autocomplete.ui-autocomplete-loading:hover { - background: - url("../../images/throbber.svg") no-repeat right 18px top 16px, - linear-gradient(to right, #53b0eb 6px, transparent 6px, transparent 100%), - linear-gradient(to left, #53b0eb 2px, transparent 2px, transparent 100%) #f7f9fa; - } - -html[dir=rtl].js .form-autocomplete.ui-autocomplete-loading:hover { +html.js[dir="rtl"] .form-autocomplete.ui-autocomplete-loading:hover { background: url("../../images/throbber.svg") no-repeat left 18px top 16px, linear-gradient(to left, #53b0eb 6px, transparent 6px, transparent 100%), linear-gradient(to right, #53b0eb 2px, transparent 2px, transparent 100%) #f7f9fa; } -html[dir=ltr].js .form-autocomplete.ui-autocomplete-loading:focus { - background: - url("../../images/throbber.svg") no-repeat right 18px top 16px, - linear-gradient(to right, #53b0eb 6px, transparent 6px, transparent 100%), - linear-gradient(to left, #53b0eb 2px, transparent 2px, transparent 100%) #f7f9fa; - } - -html[dir=rtl].js .form-autocomplete.ui-autocomplete-loading:focus { +html.js[dir="rtl"] .form-autocomplete.ui-autocomplete-loading:focus { background: url("../../images/throbber.svg") no-repeat left 18px top 16px, linear-gradient(to left, #53b0eb 6px, transparent 6px, transparent 100%), @@ -163,6 +169,8 @@ html[dir=rtl].js .form-autocomplete.ui-autocomplete-loading:focus { /* IE11 does not animate inline SVG. */ +/* rtl:begin:ignore */ + /* stylelint-disable-next-line selector-type-no-unknown */ _:-ms-fullscreen, @@ -220,3 +228,5 @@ html[dir=rtl].js .form-autocomplete.ui-autocomplete-loading:focus { linear-gradient(to left, #53b0eb 6px, transparent 6px, transparent 100%), linear-gradient(to right, #53b0eb 2px, transparent 2px, transparent 100%) #f7f9fa; } + +/* rtl:end:ignore */ diff --git a/css/components/autocomplete-loading.module.pcss.css b/css/components/autocomplete-loading.module.pcss.css index c79480e..e91b437 100644 --- a/css/components/autocomplete-loading.module.pcss.css +++ b/css/components/autocomplete-loading.module.pcss.css @@ -16,7 +16,7 @@ .form-autocomplete { html.js & { - padding-right: var(--sp3); + padding-inline-end: var(--sp3); background: var(--autocomplete-search-icon-url) no-repeat right var(--autocomplete-icon-right-offset) top var(--autocomplete-icon-top-offset), linear-gradient(to right, var(--color--gray-30) var(--form-element-border-size-left), transparent var(--form-element-border-size-left), transparent 100%) var(--color--gray-95); @@ -55,6 +55,46 @@ } } } + + html.js[dir="rtl"] & { + background: + var(--autocomplete-search-icon-url) no-repeat left var(--autocomplete-icon-right-offset) top var(--autocomplete-icon-top-offset), + linear-gradient(to left, var(--color--gray-30) var(--form-element-border-size-left), transparent var(--form-element-border-size-left), transparent 100%) var(--color--gray-95); + + &:hover { + background: + var(--autocomplete-search-icon-url) no-repeat left var(--autocomplete-icon-right-offset) top var(--autocomplete-icon-top-offset), + linear-gradient(to left, var(--color--blue-70) var(--form-element-border-size-left), transparent var(--form-element-border-size-left), transparent 100%), + linear-gradient(to right, var(--color--blue-70) var(--form-element-border-size-base), transparent var(--form-element-border-size-base), transparent 100%) var(--color--gray-95); + } + + &:focus { + background: + var(--autocomplete-search-icon-url) no-repeat left var(--autocomplete-icon-right-offset) top var(--autocomplete-icon-top-offset), + linear-gradient(to left, var(--color--blue-70) var(--form-element-border-size-left), transparent var(--form-element-border-size-left), transparent 100%), + linear-gradient(to right, var(--color--blue-70) var(--form-element-border-size-base), transparent var(--form-element-border-size-base), transparent 100%) var(--color--gray-95); + } + + &.ui-autocomplete-loading { + background: + var(--autocomplete-throbber-icon-url) no-repeat left var(--autocomplete-icon-right-offset) top var(--autocomplete-icon-top-offset), + linear-gradient(to left, var(--color--gray-30) var(--form-element-border-size-left), transparent var(--form-element-border-size-left), transparent 100%) var(--color--gray-95); + + &:hover { + background: + var(--autocomplete-throbber-icon-url) no-repeat left var(--autocomplete-icon-right-offset) top var(--autocomplete-icon-top-offset), + linear-gradient(to left, var(--color--blue-70) var(--form-element-border-size-left), transparent var(--form-element-border-size-left), transparent 100%), + linear-gradient(to right, var(--color--blue-70) var(--form-element-border-size-base), transparent var(--form-element-border-size-base), transparent 100%) var(--color--gray-95); + } + + &:focus { + background: + var(--autocomplete-throbber-icon-url) no-repeat left var(--autocomplete-icon-right-offset) top var(--autocomplete-icon-top-offset), + linear-gradient(to left, var(--color--blue-70) var(--form-element-border-size-left), transparent var(--form-element-border-size-left), transparent 100%), + linear-gradient(to right, var(--color--blue-70) var(--form-element-border-size-base), transparent var(--form-element-border-size-base), transparent 100%) var(--color--gray-95); + } + } + } } /* IE11 does not animate inline SVG. */ diff --git a/css/components/block.css b/css/components/block.css index cb2f0f0..d1d8ad3 100644 --- a/css/components/block.css +++ b/css/components/block.css @@ -77,17 +77,14 @@ } .block__title { + margin-top: 0; + margin-bottom: 18px; letter-spacing: 0.02em; color: #6e7172; font-size: 0.875rem; line-height: 1.125rem; } -[dir] .block__title { - margin-top: 0; - margin-bottom: 18px; -} - .site-footer .block__title { color: #9ea0a1; } diff --git a/css/components/block.pcss.css b/css/components/block.pcss.css index 57f2e2f..0cbc2a2 100644 --- a/css/components/block.pcss.css +++ b/css/components/block.pcss.css @@ -6,8 +6,7 @@ @import "../base/variables.pcss.css"; .block__title { - margin-top: 0; - margin-bottom: var(--sp); + margin-block: 0 var(--sp); letter-spacing: 0.02em; color: var(--color--gray-20); font-size: var(--font-size-s); diff --git a/css/components/book.css b/css/components/book.css index ed84998..01df5c0 100644 --- a/css/components/book.css +++ b/css/components/book.css @@ -76,16 +76,46 @@ /* Form */ } +[dir="ltr"] .book-pager { + margin-left: 0; +} + +[dir="rtl"] .book-pager { + margin-right: 0; +} + +[dir="ltr"] .book-pager { + margin-right: 0; +} + +[dir="rtl"] .book-pager { + margin-left: 0; +} + +[dir="ltr"] .book-pager { + padding-left: 0; +} + +[dir="rtl"] .book-pager { + padding-right: 0; +} + +[dir="ltr"] .book-pager { + padding-right: 0; +} + +[dir="rtl"] .book-pager { + padding-left: 0; +} + .book-pager { display: flex; flex-wrap: wrap; justify-content: space-between; + margin-top: 0 18px; + padding-top: 0; + padding-bottom: 18px; list-style: none; -} - -[dir] .book-pager { - margin: 0 0 18px; - padding: 0 0 18px; border-bottom: solid 1px #0d77b5; } @@ -114,22 +144,28 @@ serif; @media (min-width: 500px) { -[dir] .book-pager__item--center { +.book-pager__item--center { text-align: center } } @media (min-width: 500px) { -[dir=ltr] .book-pager__item--next { +[dir="ltr"] .book-pager__item--next { margin-left: auto; - text-align: right -} + } -[dir=rtl] .book-pager__item--next { +[dir="rtl"] .book-pager__item--next { margin-right: auto; - text-align: left -} + } + +[dir="ltr"] .book-pager__item--next { + text-align: right; + } + +[dir="rtl"] .book-pager__item--next { + text-align: left; + } } .book-pager__link { @@ -137,66 +173,116 @@ serif; align-items: center; } +[dir="ltr"] .book-pager__link--previous:before { + margin-right: 0.25em; +} + +[dir="rtl"] .book-pager__link--previous:before { + margin-left: 0.25em; +} + +[dir="ltr"] .book-pager__link--previous:before { + border-left: solid 3px currentColor; +} + +[dir="rtl"] .book-pager__link--previous:before { + border-right: solid 3px currentColor; +} + .book-pager__link--previous:before { display: block; width: 9px; height: 9px; content: ""; - } - -[dir] .book-pager__link--previous:before { + transform: rotate(-45deg); border-top: solid 3px currentColor; } -[dir=ltr] .book-pager__link--previous:before { - margin-right: 0.25em; - transform: rotate(-45deg); - border-left: solid 3px currentColor; - } - -[dir=rtl] .book-pager__link--previous:before { +[dir="ltr"] .book-pager__link--next:after { margin-left: 0.25em; - transform: rotate(45deg); +} + +[dir="rtl"] .book-pager__link--next:after { + margin-right: 0.25em; +} + +[dir="ltr"] .book-pager__link--next:after { + border-left: solid 3px currentColor; +} + +[dir="rtl"] .book-pager__link--next:after { border-right: solid 3px currentColor; - } +} .book-pager__link--next:after { display: block; width: 9px; height: 9px; content: ""; - } - -[dir] .book-pager__link--next:after { + transform: rotate(135deg); border-top: solid 3px currentColor; } -[dir=ltr] .book-pager__link--next:after { - margin-left: 0.25em; - transform: rotate(135deg); - border-left: solid 3px currentColor; - } +[dir="ltr"] .book-navigation .menu { + margin-left: 0; +} -[dir=rtl] .book-pager__link--next:after { - margin-right: 0.25em; - transform: rotate(-135deg); - border-right: solid 3px currentColor; - } +[dir="rtl"] .book-navigation .menu { + margin-right: 0; +} + +[dir="ltr"] .book-navigation .menu { + margin-right: 0; +} + +[dir="rtl"] .book-navigation .menu { + margin-left: 0; +} + +[dir="ltr"] .book-navigation .menu { + padding-left: 0; +} + +[dir="rtl"] .book-navigation .menu { + padding-right: 0; +} + +[dir="ltr"] .book-navigation .menu { + padding-right: 0; +} + +[dir="rtl"] .book-navigation .menu { + padding-left: 0; +} .book-navigation .menu { + margin-top: 36px; + margin-bottom: 36px; + padding-top: 0; + padding-bottom: 0; list-style: none; } -[dir] .book-navigation .menu { - margin: 36px 0; - padding: 0; - } +[dir="ltr"] .book-navigation .menu li { + padding-left: 0; +} + +[dir="rtl"] .book-navigation .menu li { + padding-right: 0; +} + +[dir="ltr"] .book-navigation .menu li { + padding-right: 0; +} + +[dir="rtl"] .book-navigation .menu li { + padding-left: 0; +} .book-navigation .menu li { + margin-top: 0; + margin-bottom: 0; + padding-top: 0; + padding-bottom: 0; list-style: none; } - -[dir] .book-navigation .menu li { - margin: 0; - padding: 0; - } diff --git a/css/components/book.pcss.css b/css/components/book.pcss.css index 731cc7e..df38647 100644 --- a/css/components/book.pcss.css +++ b/css/components/book.pcss.css @@ -9,10 +9,14 @@ display: flex; flex-wrap: wrap; justify-content: space-between; - margin: 0 0 var(--sp); - padding: 0 0 var(--sp); + margin-block-start: 0 var(--sp); + margin-inline-start: 0; + margin-inline-end: 0; + padding-block: 0 var(--sp); + padding-inline-start: 0; + padding-inline-end: 0; list-style: none; - border-bottom: solid 1px var(--color--blue-20); + border-block-end: solid 1px var(--color--blue-20); a { text-decoration: none; @@ -39,8 +43,8 @@ .book-pager__item--next { @media (--sm) { - margin-left: auto; - text-align: right; + margin-inline-start: auto; + text-align: end; } } @@ -54,11 +58,11 @@ display: block; width: var(--sp0-5); height: var(--sp0-5); - margin-right: 0.25em; + margin-inline-end: 0.25em; content: ""; transform: rotate(-45deg); - border-top: solid 3px currentColor; - border-left: solid 3px currentColor; + border-block-start: solid 3px currentColor; + border-inline-start: solid 3px currentColor; } } @@ -67,23 +71,29 @@ display: block; width: var(--sp0-5); height: var(--sp0-5); - margin-left: 0.25em; + margin-inline-start: 0.25em; content: ""; transform: rotate(135deg); - border-top: solid 3px currentColor; - border-left: solid 3px currentColor; + border-block-start: solid 3px currentColor; + border-inline-start: solid 3px currentColor; } } .book-navigation { .menu { - margin: var(--sp2) 0; - padding: 0; + margin-block: var(--sp2); + margin-inline-start: 0; + margin-inline-end: 0; + padding-block: 0; + padding-inline-start: 0; + padding-inline-end: 0; list-style: none; li { - margin: 0; - padding: 0; + margin-block: 0; + padding-block: 0; + padding-inline-start: 0; + padding-inline-end: 0; list-style: none; } } diff --git a/css/components/breadcrumb.css b/css/components/breadcrumb.css index 2b9fab3..31134eb 100644 --- a/css/components/breadcrumb.css +++ b/css/components/breadcrumb.css @@ -85,23 +85,28 @@ /* Shadow on the right side of breadcrumbs for narrow screens. */ +[dir="ltr"] .breadcrumb:after { + right: -18px; +} + +[dir="rtl"] .breadcrumb:after { + left: -18px; +} + .breadcrumb:after { position: absolute; top: 0; width: 54px; height: 18px; content: ""; + background: linear-gradient(to left, #fff 0%, rgba(255, 255, 255, 0) 100%); } -[dir=ltr] .breadcrumb:after { - right: -18px; - background: linear-gradient(to left, #fff 0%, rgba(255, 255, 255, 0) 100%); - } +/* LTR */ -[dir=rtl] .breadcrumb:after { - left: -18px; - background: linear-gradient(to right, #fff 0%, rgba(255, 255, 255, 0) 100%); - } +[dir="rtl"] .breadcrumb:after { + background: linear-gradient(to right, #fff 0%, rgba(255, 255, 255, 0) 100%); + } @media (min-width: 1000px) { @@ -117,104 +122,154 @@ } } +[dir="ltr"] .breadcrumb__content { + margin-right: -18px; +} + +[dir="rtl"] .breadcrumb__content { + margin-left: -18px; +} + .breadcrumb__content { overflow: auto; -webkit-overflow-scrolling: touch; } -[dir=ltr] .breadcrumb__content { +@media (min-width: 1000px) { + +.breadcrumb__content { + margin: 0 +} + } + +[dir="ltr"] .breadcrumb__list { + margin-left: -18px; +} + +[dir="rtl"] .breadcrumb__list { margin-right: -18px; } -[dir=rtl] .breadcrumb__content { +[dir="ltr"] .breadcrumb__list { + margin-right: -18px; +} + +[dir="rtl"] .breadcrumb__list { margin-left: -18px; } -@media (min-width: 1000px) { +[dir="ltr"] .breadcrumb__list { + padding-left: 18px; +} -[dir] .breadcrumb__content { - margin: 0 +[dir="rtl"] .breadcrumb__list { + padding-right: 18px; +} + +[dir="ltr"] .breadcrumb__list { + padding-right: 0; +} + +[dir="rtl"] .breadcrumb__list { + padding-left: 0; } - } .breadcrumb__list { overflow-x: auto; width: -webkit-max-content; width: max-content; + margin-top: 0; + margin-bottom: 0; + padding-top: 0; + padding-bottom: 18px; list-style: none; white-space: nowrap; } -[dir] .breadcrumb__list { - margin: 0 -18px; -} +@media (min-width: 1000px) { -[dir=ltr] .breadcrumb__list { - padding: 0 0 18px 18px; -} +[dir="ltr"] .breadcrumb__list { + margin-left: 0; + } -[dir=rtl] .breadcrumb__list { - padding: 0 18px 18px 0; -} +[dir="rtl"] .breadcrumb__list { + margin-right: 0; + } -@media (min-width: 1000px) { +[dir="ltr"] .breadcrumb__list { + margin-right: 0; + } + +[dir="rtl"] .breadcrumb__list { + margin-left: 0; + } + +[dir="ltr"] .breadcrumb__list { + padding-left: 0; + } + +[dir="rtl"] .breadcrumb__list { + padding-right: 0; + } .breadcrumb__list { overflow: visible; + padding-bottom: 0; white-space: normal } - -[dir] .breadcrumb__list { - margin: 0; - padding: 0 -} } .breadcrumb__item { display: inline-block; } +[dir="ltr"] .breadcrumb__item:nth-child(n+2):before { + margin-left: 16px; + margin-right: 20px; +} + +[dir="rtl"] .breadcrumb__item:nth-child(n+2):before { + margin-right: 16px; + margin-left: 20px; +} + +[dir="ltr"] .breadcrumb__item:nth-child(n+2):before { + border-right: 2px solid #5d7585; +} + +[dir="rtl"] .breadcrumb__item:nth-child(n+2):before { + border-left: 2px solid #5d7585; +} + .breadcrumb__item:nth-child(n+2):before { display: inline-block; width: 8px; height: 8px; content: ""; - } - -[dir] .breadcrumb__item:nth-child(n+2):before { + transform: rotate(45deg); border-top: 2px solid #5d7585; } -[dir=ltr] .breadcrumb__item:nth-child(n+2):before { - margin-right: 20px; - margin-left: 16px; - transform: rotate(45deg); - border-right: 2px solid #5d7585; - } - -[dir=rtl] .breadcrumb__item:nth-child(n+2):before { - margin-left: 20px; - margin-right: 16px; - transform: rotate(-45deg); - border-left: 2px solid #5d7585; - } +[dir="rtl"] .breadcrumb__item:nth-child(n+2):before { + transform: rotate(-45deg); + } -[dir=ltr] .breadcrumb__item:last-child { - margin-right: 54px; - } +[dir="ltr"] .breadcrumb__item:last-child { + margin-right: 54px; +} -[dir=rtl] .breadcrumb__item:last-child { +[dir="rtl"] .breadcrumb__item:last-child { margin-left: 54px; - } +} @media (min-width: 1000px) { -[dir=ltr] .breadcrumb__item:last-child { - margin-right: 0 +[dir="ltr"] .breadcrumb__item:last-child { + margin-right: 0; } -[dir=rtl] .breadcrumb__item:last-child { - margin-left: 0 +[dir="rtl"] .breadcrumb__item:last-child { + margin-left: 0; } } diff --git a/css/components/breadcrumb.pcss.css b/css/components/breadcrumb.pcss.css index a64e616..4a24fe0 100644 --- a/css/components/breadcrumb.pcss.css +++ b/css/components/breadcrumb.pcss.css @@ -14,12 +14,16 @@ /* Shadow on the right side of breadcrumbs for narrow screens. */ &:after { position: absolute; - top: 0; - right: calc(var(--sp1) * -1); + inset-block-start: 0; + inset-inline-end: calc(var(--sp1) * -1); width: var(--sp3); height: var(--sp1); content: ""; - background: linear-gradient(to left, var(--color--white) 0%, rgba(255, 255, 255, 0) 100%); + background: linear-gradient(to left, var(--color--white) 0%, rgba(255, 255, 255, 0) 100%); /* LTR */ + + [dir="rtl"] & { + background: linear-gradient(to right, var(--color--white) 0%, rgba(255, 255, 255, 0) 100%); + } @media (--lg) { content: none; @@ -33,7 +37,7 @@ .breadcrumb__content { overflow: auto; - margin-right: calc(var(--sp1) * -1); + margin-inline-end: calc(var(--sp1) * -1); -webkit-overflow-scrolling: touch; @media (--lg) { @@ -44,15 +48,21 @@ .breadcrumb__list { overflow-x: auto; width: max-content; - margin: 0 calc(var(--sp1) * -1); - padding: 0 0 var(--sp1) var(--sp1); + margin-block: 0; + margin-inline-start: calc(var(--sp1) * -1); + margin-inline-end: calc(var(--sp1) * -1); + padding-block: 0 var(--sp1); + padding-inline-start: var(--sp1); + padding-inline-end: 0; list-style: none; white-space: nowrap; @media (--lg) { overflow: visible; - margin: 0; - padding: 0; + margin-inline-start: 0; + margin-inline-end: 0; + padding-block-end: 0; + padding-inline-start: 0; white-space: normal; } } @@ -64,19 +74,22 @@ display: inline-block; width: 8px; height: 8px; - margin-right: 20px; - margin-left: 16px; + margin-inline: 16px 20px; content: ""; transform: rotate(45deg); - border-top: 2px solid var(--color--gray-25); - border-right: 2px solid var(--color--gray-25); + border-block-start: 2px solid var(--color--gray-25); + border-inline-end: 2px solid var(--color--gray-25); + + [dir="rtl"] & { + transform: rotate(-45deg); + } } &:last-child { - margin-right: var(--sp3); + margin-inline-end: var(--sp3); @media (--lg) { - margin-right: 0; + margin-inline-end: 0; } } } diff --git a/css/components/button.css b/css/components/button.css index 7ed7a21..65fdc5b 100644 --- a/css/components/button.css +++ b/css/components/button.css @@ -76,11 +76,52 @@ /* Form */ } +[dir="ltr"] .button { + margin-left: 0; +} + +[dir="rtl"] .button { + margin-right: 0; +} + +[dir="ltr"] .button { + margin-right: 18px; +} + +[dir="rtl"] .button { + margin-left: 18px; +} + +[dir="ltr"] .button { + padding-left: 27px; +} + +[dir="rtl"] .button { + padding-right: 27px; +} + +[dir="ltr"] .button { + padding-right: 27px; +} + +[dir="rtl"] .button { + padding-left: 27px; +} + .button { display: inline-block; height: 54px; + margin-top: 18px; + margin-bottom: 18px; + padding-top: 18px; + padding-bottom: 18px; + cursor: pointer; + text-align: center; text-decoration: none; color: #0d77b5; + border: 2px solid #0d77b5; + border-radius: 2px; + background-color: #fff; font-family: inherit; font-size: 0.875rem; font-weight: 700; @@ -91,30 +132,10 @@ -webkit-font-smoothing: antialiased; } -[dir] .button { - padding: 18px 27px; - cursor: pointer; - text-align: center; - border: 2px solid #0d77b5; - border-radius: 2px; - background-color: #fff; -} - -[dir=ltr] .button { - margin: 18px 18px 18px 0; -} - -[dir=rtl] .button { - margin: 18px 0 18px 18px; -} - .button:hover, .button:focus { text-decoration: none; color: #2494db; - } - -[dir] .button:hover, [dir] .button:focus { border-color: #2494db; } @@ -123,9 +144,6 @@ solid #53b0eb; outline-offset: 2px; - } - -[dir] .button:focus { box-shadow: 0 0 0 @@ -146,27 +164,38 @@ rgba(83, 176, 235, 0.25); .button:active { color: #0d77b5; - } - -[dir] .button:active { border-color: #0d77b5; box-shadow: none; } .button:disabled, .button.is-disabled { - color: #d7e1e8; - } - -[dir] .button:disabled, [dir] .button.is-disabled { cursor: default; + color: #d7e1e8; border-color: #d7e1e8; } /* No margin if is part of a menu. */ -[dir] .menu .button { - margin: 0; +[dir="ltr"] .menu .button { + margin-left: 0; +} + +[dir="rtl"] .menu .button { + margin-right: 0; +} + +[dir="ltr"] .menu .button { + margin-right: 0; +} + +[dir="rtl"] .menu .button { + margin-left: 0; +} + +.menu .button { + margin-top: 0; + margin-bottom: 0; } /* @@ -176,80 +205,92 @@ rgba(83, 176, 235, 0.25); @supports (display: inline-flex) { +[dir="ltr"] .button { + padding-left: 27px; + } + +[dir="rtl"] .button { + padding-right: 27px; + } + +[dir="ltr"] .button { + padding-right: 27px; + } + +[dir="rtl"] .button { + padding-left: 27px; + } + .button { display: inline-flex; align-items: center; /* Top padding accounts for font not being vertically centered within line-height. */ + padding-top: 1px; + padding-bottom: 0; line-height: 1.125rem } + } -[dir] .button { - padding: 1px 27px 0 +[dir="ltr"] .button--small { + padding-left: 27px; } - } -.button--small { - height: 45px; +[dir="rtl"] .button--small { + padding-right: 27px; } -[dir] .button--small { - padding: 13.5px 27px; +[dir="ltr"] .button--small { + padding-right: 27px; } -.button--primary { - color: #fff; +[dir="rtl"] .button--small { + padding-left: 27px; +} + +.button--small { + height: 45px; + padding-top: 13.5px; + padding-bottom: 13.5px; } -[dir] .button--primary { +.button--primary { + color: #fff; background-color: #0d77b5; } .button--primary:hover, .button--primary:focus { color: #fff; - } - -[dir] .button--primary:hover, [dir] .button--primary:focus { background-color: #2494db; } .button--primary:active { color: #fff; - } - -[dir] .button--primary:active { background-color: #0d77b5; } .button--primary:disabled, .button--primary.is-disabled { color: #fff; - } - -[dir] .button--primary:disabled, [dir] .button--primary.is-disabled { background-color: #d7e1e8; } +[dir="ltr"] .button--icon-back:before { + margin-right: 0.5em; +} + +[dir="rtl"] .button--icon-back:before { + margin-left: 0.5em; +} + .button--icon-back:before { display: block; width: 0.5em; height: 0.5em; content: ""; - } - -[dir] .button--icon-back:before { + transform: rotate(45deg); + /* Intentionaly not using CSS logical properties. */ border-bottom: solid 2px currentColor; - } - -[dir=ltr] .button--icon-back:before { - margin-right: 0.5em; - transform: rotate(45deg); - border-left: solid 2px currentColor; - } - -[dir=rtl] .button--icon-back:before { - margin-left: 0.5em; - transform: rotate(-45deg); - border-right: solid 2px currentColor; + border-left: solid 2px currentColor; } diff --git a/css/components/button.pcss.css b/css/components/button.pcss.css index 5c5920e..4cc0433 100644 --- a/css/components/button.pcss.css +++ b/css/components/button.pcss.css @@ -12,8 +12,12 @@ .button { display: inline-block; height: var(--sp3); - margin: var(--sp1) var(--sp1) var(--sp1) 0; - padding: calc((var(--sp3) - var(--line-height-s)) / 2) var(--sp1-5); + margin-block: var(--sp1); + margin-inline-start: 0; + margin-inline-end: var(--sp1); + padding-block: calc((var(--sp3) - var(--line-height-s)) / 2); + padding-inline-start: var(--sp1-5); + padding-inline-end: var(--sp1-5); cursor: pointer; text-align: center; text-decoration: none; @@ -56,7 +60,9 @@ /* No margin if is part of a menu. */ .menu & { - margin: 0; + margin-block: 0; + margin-inline-start: 0; + margin-inline-end: 0; } /* @@ -68,14 +74,18 @@ align-items: center; /* Top padding accounts for font not being vertically centered within line-height. */ - padding: 1px var(--sp1-5) 0; + padding-block: 1px 0; + padding-inline-start: var(--sp1-5); + padding-inline-end: var(--sp1-5); line-height: var(--line-height-s); } } .button--small { height: var(--sp2-5); - padding: calc((var(--sp2-5) - var(--line-height-s)) / 2) var(--sp1-5); + padding-block: calc((var(--sp2-5) - var(--line-height-s)) / 2); + padding-inline-start: var(--sp1-5); + padding-inline-end: var(--sp1-5); } .button--primary { @@ -105,9 +115,10 @@ display: block; width: 0.5em; height: 0.5em; - margin-right: 0.5em; + margin-inline-end: 0.5em; content: ""; transform: rotate(45deg); + /* Intentionaly not using CSS logical properties. */ border-bottom: solid 2px currentColor; border-left: solid 2px currentColor; } diff --git a/css/components/cke-dialog.css b/css/components/cke-dialog.css index b7e3457..22d9a3c 100644 --- a/css/components/cke-dialog.css +++ b/css/components/cke-dialog.css @@ -76,15 +76,56 @@ /* Form */ } -[dir] .cke_dialog td, [dir] .cke_dialog th { - padding: 4.5px; +[dir="ltr"] .cke_dialog td,[dir="ltr"] + .cke_dialog th { + padding-left: 4.5px; +} + +[dir="rtl"] .cke_dialog td,[dir="rtl"] + .cke_dialog th { + padding-right: 4.5px; +} + +[dir="ltr"] .cke_dialog td,[dir="ltr"] + .cke_dialog th { + padding-right: 4.5px; +} + +[dir="rtl"] .cke_dialog td,[dir="rtl"] + .cke_dialog th { + padding-left: 4.5px; +} + +.cke_dialog td, + .cke_dialog th { + padding-top: 4.5px; + padding-bottom: 4.5px; } -[dir] .cke_dialog .cke_dialog_ui_hbox_last { - padding: 1px 0 0 0; +[dir="ltr"] .cke_dialog .cke_dialog_ui_hbox_last { + padding-left: 0; +} + +[dir="rtl"] .cke_dialog .cke_dialog_ui_hbox_last { + padding-right: 0; +} + +[dir="ltr"] .cke_dialog .cke_dialog_ui_hbox_last { + padding-right: 0; +} + +[dir="rtl"] .cke_dialog .cke_dialog_ui_hbox_last { + padding-left: 0; +} + +.cke_dialog .cke_dialog_ui_hbox_last { + padding-top: 1px; + padding-bottom: 0; } -[dir] .cke_dialog .cke_dialog_contents_body .cke_dialog_ui_text, [dir] .cke_dialog .cke_dialog_contents_body .cke_dialog_ui_select, [dir] .cke_dialog .cke_dialog_contents_body .cke_dialog_ui_hbox_last > a.cke_dialog_ui_button { +.cke_dialog .cke_dialog_contents_body .cke_dialog_ui_text, + .cke_dialog .cke_dialog_contents_body .cke_dialog_ui_select, + .cke_dialog .cke_dialog_contents_body .cke_dialog_ui_hbox_last > a.cke_dialog_ui_button { margin-top: 9px; } @@ -92,34 +133,45 @@ width: 100% !important; /* Override inline width. */ } +[dir="ltr"] .cke_dialog input.cke_dialog_ui_input_text,[dir="ltr"] + .cke_dialog input.cke_dialog_ui_input_password,[dir="ltr"] + .cke_dialog input.cke_dialog_ui_input_tel,[dir="ltr"] + .cke_dialog textarea.cke_dialog_ui_input_textarea { + padding-left: 24px; +} + +[dir="rtl"] .cke_dialog input.cke_dialog_ui_input_text,[dir="rtl"] + .cke_dialog input.cke_dialog_ui_input_password,[dir="rtl"] + .cke_dialog input.cke_dialog_ui_input_tel,[dir="rtl"] + .cke_dialog textarea.cke_dialog_ui_input_textarea { + padding-right: 24px; +} + +[dir="ltr"] .cke_dialog input.cke_dialog_ui_input_text,[dir="ltr"] + .cke_dialog input.cke_dialog_ui_input_password,[dir="ltr"] + .cke_dialog input.cke_dialog_ui_input_tel,[dir="ltr"] + .cke_dialog textarea.cke_dialog_ui_input_textarea { + padding-right: 20px; +} + +[dir="rtl"] .cke_dialog input.cke_dialog_ui_input_text,[dir="rtl"] + .cke_dialog input.cke_dialog_ui_input_password,[dir="rtl"] + .cke_dialog input.cke_dialog_ui_input_tel,[dir="rtl"] + .cke_dialog textarea.cke_dialog_ui_input_textarea { + padding-left: 20px; +} + .cke_dialog input.cke_dialog_ui_input_text, .cke_dialog input.cke_dialog_ui_input_password, .cke_dialog input.cke_dialog_ui_input_tel, .cke_dialog textarea.cke_dialog_ui_input_textarea { + padding-top: 13px; + padding-bottom: 13px; color: #313637; - } - -[dir] .cke_dialog input.cke_dialog_ui_input_text, [dir] .cke_dialog input.cke_dialog_ui_input_password, [dir] .cke_dialog input.cke_dialog_ui_input_tel, [dir] .cke_dialog textarea.cke_dialog_ui_input_textarea { border-width: 2px 0; } -[dir=ltr] .cke_dialog input.cke_dialog_ui_input_text, [dir=ltr] .cke_dialog input.cke_dialog_ui_input_password, [dir=ltr] .cke_dialog input.cke_dialog_ui_input_tel, [dir=ltr] .cke_dialog textarea.cke_dialog_ui_input_textarea { - padding: - 13px - 20px - 13px - 24px; - } - -[dir=rtl] .cke_dialog input.cke_dialog_ui_input_text, [dir=rtl] .cke_dialog input.cke_dialog_ui_input_password, [dir=rtl] .cke_dialog input.cke_dialog_ui_input_tel, [dir=rtl] .cke_dialog textarea.cke_dialog_ui_input_textarea { - padding: - 13px - 24px - 13px - 20px; - } - -[dir] .cke_dialog input.cke_dialog_ui_input_text:hover, [dir] .cke_dialog input.cke_dialog_ui_input_password:hover, [dir] .cke_dialog input.cke_dialog_ui_input_tel:hover, [dir] .cke_dialog textarea.cke_dialog_ui_input_textarea:hover { +.cke_dialog input.cke_dialog_ui_input_text:hover, .cke_dialog input.cke_dialog_ui_input_password:hover, .cke_dialog input.cke_dialog_ui_input_tel:hover, .cke_dialog textarea.cke_dialog_ui_input_textarea:hover { border-width: 2px 0; } @@ -127,37 +179,110 @@ display: block; } +[dir="ltr"] .cke_dialog .cke_dialog_ui_input_select select,[dir="ltr"] + .cke_dialog .cke_dialog_ui_input_select .cke_dialog_ui_input_select { + margin-left: 0; +} + +[dir="rtl"] .cke_dialog .cke_dialog_ui_input_select select,[dir="rtl"] + .cke_dialog .cke_dialog_ui_input_select .cke_dialog_ui_input_select { + margin-right: 0; +} + +[dir="ltr"] .cke_dialog .cke_dialog_ui_input_select select,[dir="ltr"] + .cke_dialog .cke_dialog_ui_input_select .cke_dialog_ui_input_select { + margin-right: 0; +} + +[dir="rtl"] .cke_dialog .cke_dialog_ui_input_select select,[dir="rtl"] + .cke_dialog .cke_dialog_ui_input_select .cke_dialog_ui_input_select { + margin-left: 0; +} + +[dir="ltr"] .cke_dialog .cke_dialog_ui_input_select select,[dir="ltr"] + .cke_dialog .cke_dialog_ui_input_select .cke_dialog_ui_input_select { + padding-left: 19.5px; +} + +[dir="rtl"] .cke_dialog .cke_dialog_ui_input_select select,[dir="rtl"] + .cke_dialog .cke_dialog_ui_input_select .cke_dialog_ui_input_select { + padding-right: 19.5px; +} + +[dir="ltr"] .cke_dialog .cke_dialog_ui_input_select select,[dir="ltr"] + .cke_dialog .cke_dialog_ui_input_select .cke_dialog_ui_input_select { + padding-right: 58.5px; +} + +[dir="rtl"] .cke_dialog .cke_dialog_ui_input_select select,[dir="rtl"] + .cke_dialog .cke_dialog_ui_input_select .cke_dialog_ui_input_select { + padding-left: 58.5px; +} + +[dir="ltr"] .cke_dialog .cke_dialog_ui_input_select select,[dir="ltr"] + .cke_dialog .cke_dialog_ui_input_select .cke_dialog_ui_input_select { + border-top-left-radius: 0; +} + +[dir="rtl"] .cke_dialog .cke_dialog_ui_input_select select,[dir="rtl"] + .cke_dialog .cke_dialog_ui_input_select .cke_dialog_ui_input_select { + border-top-right-radius: 0; +} + +[dir="ltr"] .cke_dialog .cke_dialog_ui_input_select select,[dir="ltr"] + .cke_dialog .cke_dialog_ui_input_select .cke_dialog_ui_input_select { + border-top-right-radius: 2px; +} + +[dir="rtl"] .cke_dialog .cke_dialog_ui_input_select select,[dir="rtl"] + .cke_dialog .cke_dialog_ui_input_select .cke_dialog_ui_input_select { + border-top-left-radius: 2px; +} + +[dir="ltr"] .cke_dialog .cke_dialog_ui_input_select select,[dir="ltr"] + .cke_dialog .cke_dialog_ui_input_select .cke_dialog_ui_input_select { + border-bottom-left-radius: 0; +} + +[dir="rtl"] .cke_dialog .cke_dialog_ui_input_select select,[dir="rtl"] + .cke_dialog .cke_dialog_ui_input_select .cke_dialog_ui_input_select { + border-bottom-right-radius: 0; +} + +[dir="ltr"] .cke_dialog .cke_dialog_ui_input_select select,[dir="ltr"] + .cke_dialog .cke_dialog_ui_input_select .cke_dialog_ui_input_select { + border-bottom-right-radius: 2px; +} + +[dir="rtl"] .cke_dialog .cke_dialog_ui_input_select select,[dir="rtl"] + .cke_dialog .cke_dialog_ui_input_select .cke_dialog_ui_input_select { + border-bottom-left-radius: 2px; +} + .cke_dialog .cke_dialog_ui_input_select select, .cke_dialog .cke_dialog_ui_input_select .cke_dialog_ui_input_select { width: 100% !important; height: 45px; + margin-top: 0; + margin-bottom: 0; + padding-top: 0; + padding-bottom: 0; color: #313637; - outline: 1px -solid -transparent; - line-height: 2.8125rem; - } - -[dir] .cke_dialog .cke_dialog_ui_input_select select, [dir] .cke_dialog .cke_dialog_ui_input_select .cke_dialog_ui_input_select { - margin: 0; border: 1px solid transparent; border-width: 2px 0; border-style: solid; border-color: transparent; + outline: 1px +solid +transparent; background-color: #f7f9fa; + line-height: 2.8125rem; } -[dir=ltr] .cke_dialog .cke_dialog_ui_input_select select, [dir=ltr] .cke_dialog .cke_dialog_ui_input_select .cke_dialog_ui_input_select { - padding: 0 58.5px 0 19.5px; - border-radius: 0 2px 2px 0; - } - -[dir=rtl] .cke_dialog .cke_dialog_ui_input_select select, [dir=rtl] .cke_dialog .cke_dialog_ui_input_select .cke_dialog_ui_input_select { - padding: 0 19.5px 0 58.5px; - border-radius: 2px 0 0 2px; - } - -[dir] .cke_dialog .cke_dialog_ui_input_select select:hover, [dir] .cke_dialog .cke_dialog_ui_input_select select:focus, [dir] .cke_dialog .cke_dialog_ui_input_select .cke_dialog_ui_input_select:hover, [dir] .cke_dialog .cke_dialog_ui_input_select .cke_dialog_ui_input_select:focus { +.cke_dialog .cke_dialog_ui_input_select select:hover, + .cke_dialog .cke_dialog_ui_input_select select:focus, + .cke_dialog .cke_dialog_ui_input_select .cke_dialog_ui_input_select:hover, + .cke_dialog .cke_dialog_ui_input_select .cke_dialog_ui_input_select:focus { border-color: #53b0eb; background-image: url("../../images/chevron-down.svg"), @@ -171,23 +296,80 @@ dashed transparent; } -[dir=ltr] .cke_dialog .cke_dialog_footer_buttons { - margin: 9px 9px 9px 0; - } +[dir="ltr"] .cke_dialog .cke_dialog_footer_buttons { + margin-left: 0; +} + +[dir="rtl"] .cke_dialog .cke_dialog_footer_buttons { + margin-right: 0; +} + +[dir="ltr"] .cke_dialog .cke_dialog_footer_buttons { + margin-right: 9px; +} + +[dir="rtl"] .cke_dialog .cke_dialog_footer_buttons { + margin-left: 9px; +} -[dir=rtl] .cke_dialog .cke_dialog_footer_buttons { - margin: 9px 0 9px 9px; +.cke_dialog .cke_dialog_footer_buttons { + margin-top: 9px; + margin-bottom: 9px; } -[dir] .cke_dialog .cke_dialog_footer_buttons .cke_dialog_ui_hbox_last { - padding: 4.5px; +[dir="ltr"] .cke_dialog .cke_dialog_footer_buttons .cke_dialog_ui_hbox_last { + padding-left: 4.5px; +} + +[dir="rtl"] .cke_dialog .cke_dialog_footer_buttons .cke_dialog_ui_hbox_last { + padding-right: 4.5px; +} + +[dir="ltr"] .cke_dialog .cke_dialog_footer_buttons .cke_dialog_ui_hbox_last { + padding-right: 4.5px; +} + +[dir="rtl"] .cke_dialog .cke_dialog_footer_buttons .cke_dialog_ui_hbox_last { + padding-left: 4.5px; +} + +.cke_dialog .cke_dialog_footer_buttons .cke_dialog_ui_hbox_last { + padding-top: 4.5px; + padding-bottom: 4.5px; } +[dir="ltr"] .cke_dialog .cke_dialog_footer_buttons a,[dir="ltr"] + .cke_dialog .cke_dialog_footer_buttons .acke_dialog_ui_button { + margin-left: 0; +} + +[dir="rtl"] .cke_dialog .cke_dialog_footer_buttons a,[dir="rtl"] + .cke_dialog .cke_dialog_footer_buttons .acke_dialog_ui_button { + margin-right: 0; +} + +[dir="ltr"] .cke_dialog .cke_dialog_footer_buttons a,[dir="ltr"] + .cke_dialog .cke_dialog_footer_buttons .acke_dialog_ui_button { + margin-right: 4.5px; +} + +[dir="rtl"] .cke_dialog .cke_dialog_footer_buttons a,[dir="rtl"] + .cke_dialog .cke_dialog_footer_buttons .acke_dialog_ui_button { + margin-left: 4.5px; +} + .cke_dialog .cke_dialog_footer_buttons a, .cke_dialog .cke_dialog_footer_buttons .acke_dialog_ui_button { display: inline-block; + margin-top: 4.5px; + margin-bottom: 4.5px; + cursor: pointer; + text-align: center; text-decoration: none; color: #0d77b5; + border: 2px solid #0d77b5; + border-radius: 2px; + background-color: #fff; font-family: inherit; font-size: 0.875rem; font-weight: 700; @@ -198,31 +380,12 @@ transparent; -webkit-font-smoothing: antialiased; } -[dir] .cke_dialog .cke_dialog_footer_buttons a, [dir] .cke_dialog .cke_dialog_footer_buttons .acke_dialog_ui_button { - cursor: pointer; - text-align: center; - border: 2px solid #0d77b5; - border-radius: 2px; - background-color: #fff; - } - -[dir=ltr] .cke_dialog .cke_dialog_footer_buttons a, [dir=ltr] .cke_dialog .cke_dialog_footer_buttons .acke_dialog_ui_button { - margin: 4.5px 4.5px 4.5px 0; - } - -[dir=rtl] .cke_dialog .cke_dialog_footer_buttons a, [dir=rtl] .cke_dialog .cke_dialog_footer_buttons .acke_dialog_ui_button { - margin: 4.5px 0 4.5px 4.5px; - } - .cke_dialog .cke_dialog_footer_buttons a:hover, .cke_dialog .cke_dialog_footer_buttons a:focus, .cke_dialog .cke_dialog_footer_buttons .acke_dialog_ui_button:hover, .cke_dialog .cke_dialog_footer_buttons .acke_dialog_ui_button:focus { text-decoration: none; color: #2494db; - } - -[dir] .cke_dialog .cke_dialog_footer_buttons a:hover, [dir] .cke_dialog .cke_dialog_footer_buttons a:focus, [dir] .cke_dialog .cke_dialog_footer_buttons .acke_dialog_ui_button:hover, [dir] .cke_dialog .cke_dialog_footer_buttons .acke_dialog_ui_button:focus { border-color: #2494db; } @@ -231,9 +394,6 @@ transparent; solid #53b0eb; outline-offset: 2px; - } - -[dir] .cke_dialog .cke_dialog_footer_buttons a:focus, [dir] .cke_dialog .cke_dialog_footer_buttons .acke_dialog_ui_button:focus { box-shadow: 0 0 0 @@ -254,9 +414,6 @@ rgba(83, 176, 235, 0.25); .cke_dialog .cke_dialog_footer_buttons a.cke_dialog_ui_button_ok, .cke_dialog .cke_dialog_footer_buttons .acke_dialog_ui_button.cke_dialog_ui_button_ok { color: #fff; - } - -[dir] .cke_dialog .cke_dialog_footer_buttons a.cke_dialog_ui_button_ok, [dir] .cke_dialog .cke_dialog_footer_buttons .acke_dialog_ui_button.cke_dialog_ui_button_ok { background-color: #0d77b5; } @@ -265,8 +422,5 @@ rgba(83, 176, 235, 0.25); .cke_dialog .cke_dialog_footer_buttons .acke_dialog_ui_button.cke_dialog_ui_button_ok:hover, .cke_dialog .cke_dialog_footer_buttons .acke_dialog_ui_button.cke_dialog_ui_button_ok:focus { color: #fff; - } - -[dir] .cke_dialog .cke_dialog_footer_buttons a.cke_dialog_ui_button_ok:hover, [dir] .cke_dialog .cke_dialog_footer_buttons a.cke_dialog_ui_button_ok:focus, [dir] .cke_dialog .cke_dialog_footer_buttons .acke_dialog_ui_button.cke_dialog_ui_button_ok:hover, [dir] .cke_dialog .cke_dialog_footer_buttons .acke_dialog_ui_button.cke_dialog_ui_button_ok:focus { background-color: #2494db; } diff --git a/css/components/cke-dialog.pcss.css b/css/components/cke-dialog.pcss.css index 4d1c936..634e5cf 100644 --- a/css/components/cke-dialog.pcss.css +++ b/css/components/cke-dialog.pcss.css @@ -14,17 +14,22 @@ .cke_dialog { td, th { - padding: var(--sp0-25); + padding-block: var(--sp0-25); + padding-inline-start: var(--sp0-25); + padding-inline-end: var(--sp0-25); } .cke_dialog_ui_hbox_last { - padding: 1px 0 0 0; + padding-block-start: 1px; + padding-block-end: 0; + padding-inline-start: 0; + padding-inline-end: 0; } .cke_dialog_contents_body .cke_dialog_ui_text, .cke_dialog_contents_body .cke_dialog_ui_select, .cke_dialog_contents_body .cke_dialog_ui_hbox_last > a.cke_dialog_ui_button { - margin-top: var(--sp0-5); + margin-block-start: var(--sp0-5); } .cke_dialog_body label + .cke_dialog_ui_labeled_content { @@ -35,11 +40,9 @@ input.cke_dialog_ui_input_password, input.cke_dialog_ui_input_tel, textarea.cke_dialog_ui_input_textarea { - padding: - calc((var(--sp3) - (var(--font-size-base) * 1.5) - (var(--form-element-border-size-base) * 2)) / 2) - calc(var(--sp1) + var(--form-element-border-size-base)) - calc((var(--sp3) - (var(--font-size-base) * 1.5) - (var(--form-element-border-size-base) * 2)) / 2) - calc(var(--sp1) + var(--form-element-border-size-left)); + padding-block: calc((var(--sp3) - (var(--font-size-base) * 1.5) - (var(--form-element-border-size-base) * 2)) / 2); + padding-inline-start: calc(var(--sp1) + var(--form-element-border-size-left)); + padding-inline-end: calc(var(--sp1) + var(--form-element-border-size-base)); color: var(--color--gray-10); border-width: var(--form-element-border-size-base) 0; @@ -55,14 +58,21 @@ .cke_dialog_ui_input_select { width: 100% !important; height: var(--sp2-5); - margin: 0; - padding: 0 calc(var(--sp2-5) + var(--sp0-75)) 0 calc(var(--sp0-75) + var(--form-element-border-size-left)); + margin-block: 0; + margin-inline-start: 0; + margin-inline-end: 0; + padding-block: 0; + padding-inline-start: calc(var(--sp0-75) + var(--form-element-border-size-left)); + padding-inline-end: calc(var(--sp2-5) + var(--sp0-75)); color: var(--color--gray-10); border: 1px solid transparent; border-width: var(--form-element-border-size-base) 0; border-style: solid; border-color: transparent; - border-radius: 0 var(--border-radius-base) var(--border-radius-base) 0; + border-start-start-radius: 0; + border-start-end-radius: var(--border-radius-base); + border-end-start-radius: 0; + border-end-end-radius: var(--border-radius-base); outline: var(--outline--thin); background-color: var(--color--gray-95); line-height: var(--sp2-5); @@ -83,16 +93,23 @@ } .cke_dialog_footer_buttons { - margin: var(--sp0-5) var(--sp0-5) var(--sp0-5) 0; + margin-block-start: var(--sp0-5); + margin-block-end: var(--sp0-5); + margin-inline-start: 0; + margin-inline-end: var(--sp0-5); .cke_dialog_ui_hbox_last { - padding: var(--sp0-25); + padding-block: var(--sp0-25); + padding-inline-start: var(--sp0-25); + padding-inline-end: var(--sp0-25); } a, .acke_dialog_ui_button { display: inline-block; - margin: var(--sp0-25) var(--sp0-25) var(--sp0-25) 0; + margin-block: var(--sp0-25); + margin-inline-start: 0; + margin-inline-end: var(--sp0-25); cursor: pointer; text-align: center; text-decoration: none; diff --git a/css/components/comments.css b/css/components/comments.css index 38f0bfe..22f8155 100644 --- a/css/components/comments.css +++ b/css/components/comments.css @@ -76,38 +76,82 @@ /* Form */ } -[dir] .comments > .comment { +.comments > .comment { border-top: 2px solid #e7edf1; } -[dir] .comments > .comment ~ .comment { +.comments > .comment ~ .comment { margin-top: 36px; } .comments__title { display: flex; align-items: center; + margin-top: 0; } -[dir] .comments__title { - margin-top: 0; +[dir="ltr"] .comments__count { + margin-left: 18px; +} + +[dir="rtl"] .comments__count { + margin-right: 18px; +} + +[dir="ltr"] .comments__count { + margin-right: 18px; +} + +[dir="rtl"] .comments__count { + margin-left: 18px; +} + +[dir="ltr"] .comments__count { + padding-left: 5px; +} + +[dir="rtl"] .comments__count { + padding-right: 5px; +} + +[dir="ltr"] .comments__count { + padding-right: 5px; +} + +[dir="rtl"] .comments__count { + padding-left: 5px; } .comments__count { position: relative; display: inline-block; min-width: 34px; + margin-top: 0; + margin-bottom: 9px; + padding-top: 0; + padding-bottom: 0; + text-align: center; color: #fff; + border-radius: 2px; + background-color: #0d77b5; font-size: 0.6875rem; line-height: 1.3125rem; } -[dir] .comments__count { - margin: 0 18px 9px 18px; - padding: 0 5px; - text-align: center; - border-radius: 2px; - background-color: #0d77b5; +[dir="ltr"] .comments__count:after { + left: 8px; +} + +[dir="rtl"] .comments__count:after { + right: 8px; +} + +[dir="ltr"] .comments__count:after { + border-right: 8px solid transparent; +} + +[dir="rtl"] .comments__count:after { + border-left: 8px solid transparent; } .comments__count:after { @@ -116,72 +160,87 @@ width: 0; height: 0; content: ""; - } - -[dir] .comments__count:after { border-top: 7px solid #0d77b5; } -[dir=ltr] .comments__count:after { - left: 8px; - border-right: 8px solid transparent; - } - -[dir=rtl] .comments__count:after { - right: 8px; - border-left: 8px solid transparent; - } - -[dir] .comment-form { +.comment-form { padding-bottom: 36px; } -[dir=ltr] .add-comment__form { +[dir="ltr"] .add-comment__form { padding-left: 54px; } -[dir=rtl] .add-comment__form { +[dir="rtl"] .add-comment__form { padding-right: 54px; } @media (min-width: 700px) { -[dir=ltr] .add-comment__form { - padding-left: 0 +[dir="ltr"] .add-comment__form { + padding-left: 0; + } + +[dir="rtl"] .add-comment__form { + padding-right: 0; + } + } + +[dir="ltr"] .comment { + padding-left: 54px; } -[dir=rtl] .add-comment__form { - padding-right: 0 +[dir="rtl"] .comment { + padding-right: 54px; } - } .comment { position: relative; + padding-top: 36px; } -[dir] .comment { - padding-top: 36px; +.comment .text-content { + padding-bottom: 0; + font-size: 1rem; + } + +[dir="ltr"] .comment .links { + margin-left: 0; } -[dir=ltr] .comment { - padding-left: 54px; +[dir="rtl"] .comment .links { + margin-right: 0; } -[dir=rtl] .comment { - padding-right: 54px; +[dir="ltr"] .comment .links { + margin-right: 0; } -.comment .text-content { - font-size: 1rem; - } +[dir="rtl"] .comment .links { + margin-left: 0; +} -[dir] .comment .text-content { - padding-bottom: 0; - } +[dir="ltr"] .comment .links { + padding-left: 0; +} + +[dir="rtl"] .comment .links { + padding-right: 0; +} -[dir] .comment .links { - margin: 18px 0 0 0; - padding: 0; +[dir="ltr"] .comment .links { + padding-right: 0; +} + +[dir="rtl"] .comment .links { + padding-left: 0; +} + +.comment .links { + margin-top: 18px; + margin-bottom: 0; + padding-top: 0; + padding-bottom: 0; } .comment .links a { @@ -197,66 +256,63 @@ text-decoration: underline; } -.comment .links li { - display: inline-block; - } - -[dir=ltr] .comment .links li { - margin-right: 18px; - } +[dir="ltr"] .comment .links li { + margin-right: 18px; +} -[dir=rtl] .comment .links li { +[dir="rtl"] .comment .links li { margin-left: 18px; +} + +.comment .links li { + display: inline-block; } @media (min-width: 700px) { -[dir=ltr] .comment { - padding-left: 0 -} +[dir="ltr"] .comment { + padding-left: 0; + } -[dir=rtl] .comment { - padding-right: 0 -} +[dir="rtl"] .comment { + padding-right: 0; + } } .add-comment__picture-wrapper.comment-picture { top: 36px; } +[dir="ltr"] .comment-picture__image { + left: 0; +} + +[dir="rtl"] .comment-picture__image { + right: 0; +} + .comment-picture__image { position: absolute; overflow: hidden; width: 36px; height: 36px; -} - -[dir] .comment-picture__image { border-radius: 50%; background-color: #e7edf1; } -[dir=ltr] .comment-picture__image { - left: 0; -} - -[dir=rtl] .comment-picture__image { - right: 0; -} - @media (min-width: 700px) { -.indented .comment-picture__image { - width: 36px; - height: 36px +[dir="ltr"] .indented .comment-picture__image { + left: -72px; } -[dir=ltr] .indented .comment-picture__image { - left: -72px +[dir="rtl"] .indented .comment-picture__image { + right: -72px; } -[dir=rtl] .indented .comment-picture__image { - right: -72px +.indented .comment-picture__image { + width: 36px; + height: 36px } } @@ -279,36 +335,30 @@ .comment-picture__image img { position: absolute; + /* stylelint-disable csstools/use-logical */ top: 50%; + left: 50%; + /* stylelint-enable csstools/use-logical */ width: 100%; - height: auto + height: auto; + transform: translate(-50%, -50%) } + } -[dir=ltr] .comment-picture__image img { - left: 50%; - transform: translate(-50%, -50%) - } +@media (min-width: 700px) { -[dir=rtl] .comment-picture__image img { - right: 50%; - transform: translate(50%, -50%) +[dir="ltr"] .comment-picture__image { + left: -90px; } - } -@media (min-width: 700px) { +[dir="rtl"] .comment-picture__image { + right: -90px; + } .comment-picture__image { width: 54px; height: 54px } - -[dir=ltr] .comment-picture__image { - left: -90px -} - -[dir=rtl] .comment-picture__image { - right: -90px -} } @media all and (-ms-high-contrast: active), (-ms-high-contrast: none) { @@ -322,6 +372,14 @@ display: inline; } +[dir="ltr"] .comment__author { + margin-right: 18px; +} + +[dir="rtl"] .comment__author { + margin-left: 18px; +} + .comment__author { font-family: "metropolis" , @@ -331,19 +389,12 @@ sans-serif; line-height: 1.125rem; } -[dir=ltr] .comment__author { - margin-right: 18px; -} - -[dir=rtl] .comment__author { - margin-left: 18px; -} - .comment__author a { text-decoration: none; } .comment__time { + margin: 0; color: #6e7172; font-family: "metropolis" , @@ -352,18 +403,30 @@ sans-serif; line-height: 1.125rem; } -[dir] .comment__time { - margin: 0; -} - -[dir=ltr] .indented { +[dir="ltr"] .indented { margin-left: 36px; } -[dir=rtl] .indented { +[dir="rtl"] .indented { margin-right: 36px; } +[dir="ltr"] .indented > .comment:not(:last-of-type):not(.has-children):before { + left: -54px; +} + +[dir="rtl"] .indented > .comment:not(:last-of-type):not(.has-children):before { + right: -54px; +} + +[dir="ltr"] .indented > .comment:not(:last-of-type):not(.has-children):before { + border-left: solid 1px #e7edf1; +} + +[dir="rtl"] .indented > .comment:not(:last-of-type):not(.has-children):before { + border-right: solid 1px #e7edf1; +} + .indented > .comment:not(:last-of-type):not(.has-children):before { position: absolute; top: 36px; /* Comment's padding-top */ @@ -372,40 +435,69 @@ sans-serif; content: ""; } -[dir=ltr] .indented > .comment:not(:last-of-type):not(.has-children):before { - left: -54px; - border-left: solid 1px #e7edf1; +@media (min-width: 700px) { + +[dir="ltr"] .indented > .comment:not(:last-of-type):not(.has-children):before { + left: -54px; } -[dir=rtl] .indented > .comment:not(:last-of-type):not(.has-children):before { - right: -54px; - border-right: solid 1px #e7edf1; +[dir="rtl"] .indented > .comment:not(:last-of-type):not(.has-children):before { + right: -54px; } + } @media (min-width: 700px) { -[dir=ltr] .indented > .comment:not(:last-of-type):not(.has-children):before { - left: -54px +[dir="ltr"] .indented { + margin-left: 72px; } -[dir=rtl] .indented > .comment:not(:last-of-type):not(.has-children):before { - right: -54px +[dir="rtl"] .indented { + margin-right: 72px; + } } - } -@media (min-width: 700px) { +[dir="ltr"] .show-hide-btn { + margin-left: 54px; +} -[dir=ltr] .indented { - margin-left: 72px +[dir="rtl"] .show-hide-btn { + margin-right: 54px; } -[dir=rtl] .indented { - margin-right: 72px +[dir="ltr"] .show-hide-btn { + margin-right: 0; +} + +[dir="rtl"] .show-hide-btn { + margin-left: 0; +} + +[dir="ltr"] .show-hide-btn { + padding-left: 0; +} + +[dir="rtl"] .show-hide-btn { + padding-right: 0; +} + +[dir="ltr"] .show-hide-btn { + padding-right: 0; +} + +[dir="rtl"] .show-hide-btn { + padding-left: 0; } - } .show-hide-btn { + margin-top: 36px; + margin-bottom: 0; + padding-top: 0; + padding-bottom: 0; + cursor: pointer; color: #313637; + border: 0; + background: none; font-size: 0.875rem; font-weight: 600; line-height: 1.125rem; @@ -414,21 +506,6 @@ sans-serif; appearance: none; } -[dir] .show-hide-btn { - padding: 0; - cursor: pointer; - border: 0; - background: none; -} - -[dir=ltr] .show-hide-btn { - margin: 36px 0 0 54px; -} - -[dir=rtl] .show-hide-btn { - margin: 36px 54px 0 0; -} - .show-hide-btn[aria-expanded="true"]:after { content: "\0020 -"; } @@ -439,11 +516,11 @@ sans-serif; @media (min-width: 700px) { -[dir=ltr] .show-hide-btn { - margin-left: 0 -} +[dir="ltr"] .show-hide-btn { + margin-left: 0; + } -[dir=rtl] .show-hide-btn { - margin-right: 0 -} +[dir="rtl"] .show-hide-btn { + margin-right: 0; + } } diff --git a/css/components/comments.pcss.css b/css/components/comments.pcss.css index e56bffc..1dcac9d 100644 --- a/css/components/comments.pcss.css +++ b/css/components/comments.pcss.css @@ -12,10 +12,10 @@ .comments { > .comment { - border-top: 2px solid var(--color--gray-80); + border-block-start: 2px solid var(--color--gray-80); ~ .comment { - margin-top: var(--sp2); + margin-block-start: var(--sp2); } } } @@ -23,15 +23,20 @@ .comments__title { display: flex; align-items: center; - margin-top: 0; + margin-block-start: 0; } .comments__count { position: relative; display: inline-block; min-width: 34px; - margin: 0 var(--sp) var(--sp0-5) var(--sp); - padding: 0 5px; + margin-block-start: 0; + margin-block-end: var(--sp0-5); + margin-inline-start: var(--sp); + margin-inline-end: var(--sp); + padding-block: 0; + padding-inline-start: 5px; + padding-inline-end: 5px; text-align: center; color: var(--color--white); border-radius: 2px; @@ -41,41 +46,45 @@ &:after { position: absolute; - bottom: -7px; - left: 8px; + inset-block-end: -7px; + inset-inline-start: 8px; width: 0; height: 0; content: ""; - border-top: 7px solid var(--color--blue-20); - border-right: 8px solid transparent; + border-block-start: 7px solid var(--color--blue-20); + border-inline-end: 8px solid transparent; } } .comment-form { - padding-bottom: var(--sp2); + padding-block-end: var(--sp2); } .add-comment__form { - padding-left: var(--sp3); + padding-inline-start: var(--sp3); @media (--grid-md) { - padding-left: 0; + padding-inline-start: 0; } } .comment { position: relative; - padding-top: var(--sp2); - padding-left: var(--sp3); + padding-block-start: var(--sp2); + padding-inline-start: var(--sp3); .text-content { - padding-bottom: 0; + padding-block-end: 0; font-size: 16px; } .links { - margin: var(--sp) 0 0 0; - padding: 0; + margin-block: var(--sp) 0; + margin-inline-start: 0; + margin-inline-end: 0; + padding-block: 0; + padding-inline-start: 0; + padding-inline-end: 0; a { text-decoration: none; @@ -92,22 +101,22 @@ li { display: inline-block; - margin-right: var(--sp); + margin-inline-end: var(--sp); } } @media (--grid-md) { - padding-left: 0; + padding-inline-start: 0; } } .add-comment__picture-wrapper.comment-picture { - top: calc(var(--line-height-base) + var(--sp0-5)); + inset-block-start: calc(var(--line-height-base) + var(--sp0-5)); } .comment-picture__image { position: absolute; - left: 0; + inset-inline-start: 0; overflow: hidden; width: var(--sp2); height: var(--sp2); @@ -116,7 +125,7 @@ .indented & { @media (--grid-md) { - left: calc(-1 * var(--sp4)); + inset-inline-start: calc(-1 * var(--sp4)); width: var(--sp2); height: var(--sp2); } @@ -136,8 +145,10 @@ /* @TODO: create image-style for profile's avatar to have image squared by default. */ @media all and (-ms-high-contrast: active), (-ms-high-contrast: none) { position: absolute; + /* stylelint-disable csstools/use-logical */ top: 50%; left: 50%; + /* stylelint-enable csstools/use-logical */ width: 100%; height: auto; transform: translate(-50%, -50%); @@ -145,7 +156,7 @@ } @media (--grid-md) { - left: calc(-1 * var(--sp5)); + inset-inline-start: calc(-1 * var(--sp5)); width: var(--sp3); height: var(--sp3); } @@ -162,7 +173,7 @@ } .comment__author { - margin-right: var(--sp); + margin-inline-end: var(--sp); font-family: var(--font-sans); font-size: 16px; font-weight: 700; @@ -182,30 +193,35 @@ } .indented { - margin-left: var(--comment-indentation); + margin-inline-start: var(--comment-indentation); > .comment:not(:last-of-type):not(.has-children):before { position: absolute; - top: var(--sp2); /* Comment's padding-top */ - left: calc(-1 * var(--comment-indentation) - var(--sp)); + inset-block-start: var(--sp2); + inset-inline-start: calc(-1 * var(--comment-indentation) - var(--sp)); /* Comment's padding-top */ width: 0; height: 100%; content: ""; - border-left: solid 1px var(--color--gray-80); + border-inline-start: solid 1px var(--color--gray-80); @media (--md) { - left: calc(-1 * var(--comment-indentation--md) + var(--sp)); + inset-inline-start: calc(-1 * var(--comment-indentation--md) + var(--sp)); } } @media (--md) { - margin-left: var(--comment-indentation--md); + margin-inline-start: var(--comment-indentation--md); } } .show-hide-btn { - margin: var(--sp2) 0 0 var(--sp3); - padding: 0; + margin-block-start: var(--sp2); + margin-block-end: 0; + margin-inline-start: var(--sp3); + margin-inline-end: 0; + padding-block: 0; + padding-inline-start: 0; + padding-inline-end: 0; cursor: pointer; color: var(--color--gray-10); border: 0; @@ -224,6 +240,6 @@ } @media (--grid-md) { - margin-left: 0; + margin-inline-start: 0; } } diff --git a/css/components/container-inline.module.css b/css/components/container-inline.module.css index 3c96146..806276c 100644 --- a/css/components/container-inline.module.css +++ b/css/components/container-inline.module.css @@ -15,19 +15,13 @@ display: inline-block; } -.form-items-inline { /* 2px */ -} - -[dir] .form-items-inline { +.form-items-inline { margin-top: -0.125em; - margin-bottom: -0.125em; + margin-bottom: -0.125em; /* 2px */ } .form-items-inline > .form-item { display: inline-block; -} - -[dir] .form-items-inline > .form-item { margin-top: 0.125em; margin-bottom: 0.125em; } diff --git a/css/components/container-inline.module.pcss.css b/css/components/container-inline.module.pcss.css index 1de39bb..f6d46f1 100644 --- a/css/components/container-inline.module.pcss.css +++ b/css/components/container-inline.module.pcss.css @@ -9,12 +9,10 @@ } .form-items-inline { - margin-top: -0.125em; /* 2px */ - margin-bottom: -0.125em; + margin-block: -0.125em; /* 2px */ } .form-items-inline > .form-item { display: inline-block; - margin-top: 0.125em; - margin-bottom: 0.125em; + margin-block: 0.125em; } diff --git a/css/components/details.css b/css/components/details.css index a0a4a4a..e37c838 100644 --- a/css/components/details.css +++ b/css/components/details.css @@ -78,12 +78,9 @@ .olivero-details { display: block; - color: inherit; -} - -[dir] .olivero-details { margin-top: 18px; margin-bottom: 18px; + color: inherit; border: 1px solid #e7edf1; border-radius: 2px; box-shadow: 0 1px 4px #d7e1e8; @@ -91,9 +88,28 @@ /* Details summary styles */ +[dir="ltr"] .olivero-details__summary { + padding-left: 36px; +} + +[dir="rtl"] .olivero-details__summary { + padding-right: 36px; +} + +[dir="ltr"] .olivero-details__summary { + padding-right: 18px; +} + +[dir="rtl"] .olivero-details__summary { + padding-left: 18px; +} + .olivero-details__summary { position: relative; + padding-top: 18px; + padding-bottom: 18px; list-style: none; + cursor: pointer; transition: background-color 0.12s ease-in-out; @@ -102,26 +118,24 @@ ease-in-out; -ms-hyphens: auto; hyphens: auto; color: inherit; + background-color: #f7f9fa; font-size: 1.125rem; font-weight: 700; line-height: 1.125rem; } -[dir] .olivero-details__summary { - cursor: pointer; - background-color: #f7f9fa; -} +/* Arrow icon */ -[dir=ltr] .olivero-details__summary { - padding: 18px 18px 18px 36px; +[dir="ltr"] .olivero-details__summary:before,[dir="ltr"] +.collapse-processed > .olivero-details__summary .details-title:before { + left: 13.5px; } -[dir=rtl] .olivero-details__summary { - padding: 18px 36px 18px 18px; +[dir="rtl"] .olivero-details__summary:before,[dir="rtl"] +.collapse-processed > .olivero-details__summary .details-title:before { + right: 13.5px; } -/* Arrow icon */ - .olivero-details__summary:before, .collapse-processed > .olivero-details__summary .details-title:before { position: absolute; @@ -131,26 +145,16 @@ ease-in-out; height: 18px; content: ""; transition: 0.2s ease; -} - -[dir] .olivero-details__summary:before, [dir] .collapse-processed > .olivero-details__summary .details-title:before { transform: rotate(0); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M5.2109375,1.3144531 3.7890625,2.7226562 9.0917969,8.0761719 3.7890625,13.429688 5.2109375,14.837891 11.908203,8.0761719Z' fill='%23313637'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: 50% 50%; } -[dir=ltr] .olivero-details__summary:before, [dir=ltr] .collapse-processed > .olivero-details__summary .details-title:before { - left: 13.5px; -} - -[dir=rtl] .olivero-details__summary:before, [dir=rtl] .collapse-processed > .olivero-details__summary .details-title:before { - right: 13.5px; -} - @media screen and (-ms-high-contrast: active) { -[dir] .olivero-details__summary:before, [dir] .collapse-processed > .olivero-details__summary .details-title:before { +.olivero-details__summary:before, +.collapse-processed > .olivero-details__summary .details-title:before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M5.2109375,1.3144531 3.7890625,2.7226562 9.0917969,8.0761719 3.7890625,13.429688 5.2109375,14.837891 11.908203,8.0761719Z' fill='%23ffffff'/%3E%3C/svg%3E") } } @@ -161,27 +165,16 @@ ease-in-out; .collapse-processed > .olivero-details__summary .details-title:after { position: absolute; top: -1px; + right: -1px; bottom: -1px; + left: -1px; content: ""; pointer-events: none; opacity: 0; -} - -[dir] .olivero-details__summary:after, [dir] .collapse-processed > .olivero-details__summary .details-title:after { border-radius: 2px; box-shadow: inset 0 0 0 2px #53b0eb; } -[dir=ltr] .olivero-details__summary:after, [dir=ltr] .collapse-processed > .olivero-details__summary .details-title:after { - right: -1px; - left: -1px; -} - -[dir=rtl] .olivero-details__summary:after, [dir=rtl] .collapse-processed > .olivero-details__summary .details-title:after { - left: -1px; - right: -1px; -} - /* Hide the marker on Chrome */ .olivero-details__summary::-webkit-details-marker { @@ -196,7 +189,7 @@ ease-in-out; /* Details summary, hover state */ -[dir] .olivero-details__summary:hover { +.olivero-details__summary:hover { background-color: #e7edf1; } @@ -211,14 +204,11 @@ ease-in-out; /* Rotate arrow icon of the details summary, when details expanded */ -[dir=ltr] .olivero-details[open] > .olivero-details__summary::before, [dir=ltr] .collapse-processed[open] > .olivero-details__summary .details-title::before { +.olivero-details[open] > .olivero-details__summary::before, +.collapse-processed[open] > .olivero-details__summary .details-title::before { transform: rotate(90deg); } -[dir=rtl] .olivero-details[open] > .olivero-details__summary::before, [dir=rtl] .collapse-processed[open] > .olivero-details__summary .details-title::before { - transform: rotate(-90deg); -} - /** * Safari (at least version 12.1) cannot handle details summary arrow * icon transition properly. @@ -248,8 +238,25 @@ ease-in-out; /* Collapse processed for non-supporting browsers like IE or Edge */ -[dir] .collapse-processed > .olivero-details__summary { - padding: 0; +[dir="ltr"] .collapse-processed > .olivero-details__summary { + padding-left: 0; +} + +[dir="rtl"] .collapse-processed > .olivero-details__summary { + padding-right: 0; +} + +[dir="ltr"] .collapse-processed > .olivero-details__summary { + padding-right: 0; +} + +[dir="rtl"] .collapse-processed > .olivero-details__summary { + padding-left: 0; +} + +.collapse-processed > .olivero-details__summary { + padding-top: 0; + padding-bottom: 0; } .collapse-processed > .olivero-details__summary:before { @@ -260,75 +267,88 @@ ease-in-out; content: none; } +[dir="ltr"] .collapse-processed > .olivero-details__summary .details-title { + padding-left: 36px; +} + +[dir="rtl"] .collapse-processed > .olivero-details__summary .details-title { + padding-right: 36px; +} + +[dir="ltr"] .collapse-processed > .olivero-details__summary .details-title { + padding-right: 18px; +} + +[dir="rtl"] .collapse-processed > .olivero-details__summary .details-title { + padding-left: 18px; +} + .collapse-processed > .olivero-details__summary .details-title { position: relative; display: block; + padding-top: 18px; + padding-bottom: 18px; transition: background-color 0.12s ease-in-out; text-decoration: none; color: inherit; -} - -[dir] .collapse-processed > .olivero-details__summary .details-title { background-color: #f7f9fa; } -[dir=ltr] .collapse-processed > .olivero-details__summary .details-title { - padding: 18px 18px 18px 36px; -} - -[dir=rtl] .collapse-processed > .olivero-details__summary .details-title { - padding: 18px 36px 18px 18px; -} - .collapse-processed > .olivero-details__summary .details-title:focus { outline: none; } -[dir] .collapse-processed > .olivero-details__summary .details-title:hover { +.collapse-processed > .olivero-details__summary .details-title:hover { background-color: #e7edf1; } @media screen and (-ms-high-contrast: active) { .collapse-processed > .olivero-details__summary .details-title::after { top: -5px; - bottom: -5px; - } - [dir] .collapse-processed > .olivero-details__summary .details-title::after { - border: 2px dotted; - } - [dir=ltr] .collapse-processed > .olivero-details__summary .details-title::after { right: -5px; + bottom: -5px; left: -5px; - } - [dir=rtl] .collapse-processed > .olivero-details__summary .details-title::after { - left: -5px; - right: -5px; + border: 2px dotted; } } /* Details content wrapper */ -[dir] .olivero-details__wrapper { +.olivero-details__wrapper { margin: 18px; } @media (min-width: 1000px) { -[dir] .olivero-details__wrapper { - margin: 27px 36px +[dir="ltr"] .olivero-details__wrapper { + margin-left: 36px; + } + +[dir="rtl"] .olivero-details__wrapper { + margin-right: 36px; + } + +[dir="ltr"] .olivero-details__wrapper { + margin-right: 36px; + } + +[dir="rtl"] .olivero-details__wrapper { + margin-left: 36px; + } + +.olivero-details__wrapper { + margin-top: 27px; + margin-bottom: 27px } } /* Description */ .olivero-details__description { + margin-bottom: 18px; color: #313637; font-size: 0.8125rem; line-height: 1.125rem; } - -[dir] .olivero-details__description { - margin-bottom: 18px; -} diff --git a/css/components/details.pcss.css b/css/components/details.pcss.css index bddc9e2..45d7dfa 100644 --- a/css/components/details.pcss.css +++ b/css/components/details.pcss.css @@ -12,8 +12,7 @@ .olivero-details { display: block; - margin-top: var(--sp1); - margin-bottom: var(--sp1); + margin-block: var(--sp1); color: inherit; border: var(--details-border-width) solid var(--color--gray-80); border-radius: var(--border-radius-base); @@ -23,7 +22,9 @@ /* Details summary styles */ .olivero-details__summary { position: relative; - padding: var(--sp1) var(--sp1) var(--sp1) var(--sp2); + padding-block: var(--sp1); + padding-inline-start: var(--sp2); + padding-inline-end: var(--sp1); list-style: none; cursor: pointer; transition: var(--details-summary-transition); @@ -40,8 +41,8 @@ .olivero-details__summary:before, .collapse-processed > .olivero-details__summary .details-title:before { position: absolute; - top: var(--sp1); - left: var(--sp0-75); + inset-block-start: var(--sp1); + inset-inline-start: var(--sp0-75); display: inline-block; width: var(--sp1); height: var(--sp1); @@ -61,10 +62,7 @@ .olivero-details__summary:after, .collapse-processed > .olivero-details__summary .details-title:after { position: absolute; - top: calc(var(--details-border-width) * -1); - right: calc(var(--details-border-width) * -1); - bottom: calc(var(--details-border-width) * -1); - left: calc(var(--details-border-width) * -1); + inset: calc(var(--details-border-width) * -1); content: ""; pointer-events: none; opacity: 0; @@ -128,7 +126,9 @@ /* Collapse processed for non-supporting browsers like IE or Edge */ .collapse-processed > .olivero-details__summary { - padding: 0; + padding-block: 0; + padding-inline-start: 0; + padding-inline-end: 0; &:before { content: none; @@ -142,7 +142,9 @@ .collapse-processed > .olivero-details__summary .details-title { position: relative; display: block; - padding: var(--sp1) var(--sp1) var(--sp1) var(--sp2); + padding-block: var(--sp1) ; + padding-inline-start: var(--sp2); + padding-inline-end: var(--sp1); transition: var(--details-summary-transition); text-decoration: none; color: inherit; @@ -159,10 +161,7 @@ @media screen and (-ms-high-contrast: active) { .collapse-processed > .olivero-details__summary .details-title::after { - top: -5px; - right: -5px; - bottom: -5px; - left: -5px; + inset: -5px; border: 2px dotted; } } @@ -172,13 +171,16 @@ margin: var(--sp1); @media (--lg) { - margin: var(--sp1-5) var(--sp2); + margin-block-start: var(--sp1-5); + margin-block-end: var(--sp1-5); + margin-inline-start: var(--sp2); + margin-inline-end: var(--sp2); } } /* Description */ .olivero-details__description { - margin-bottom: var(--sp1); + margin-block-end: var(--sp1); color: var(--color--gray-10); font-size: var(--font-size-xs); line-height: var(--line-height-s); diff --git a/css/components/dropbutton.css b/css/components/dropbutton.css index 40fb8c2..4e362d4 100644 --- a/css/components/dropbutton.css +++ b/css/components/dropbutton.css @@ -76,16 +76,40 @@ /* Form */ } -[dir] .dropbutton { - background-color: #0d77b5; +[dir="ltr"] .dropbutton { + border-top-left-radius: 2px; +} + +[dir="rtl"] .dropbutton { + border-top-right-radius: 2px; +} + +[dir="ltr"] .dropbutton { + border-top-right-radius: 0; +} + +[dir="rtl"] .dropbutton { + border-top-left-radius: 0; +} + +[dir="ltr"] .dropbutton { + border-bottom-left-radius: 2px; +} + +[dir="rtl"] .dropbutton { + border-bottom-right-radius: 2px; +} + +[dir="ltr"] .dropbutton { + border-bottom-right-radius: 0; } -[dir=ltr] .dropbutton { - border-radius: 2px 0 0 2px; +[dir="rtl"] .dropbutton { + border-bottom-left-radius: 0; } -[dir=rtl] .dropbutton { - border-radius: 0 2px 2px 0; +.dropbutton { + background-color: #0d77b5; } .js .dropbutton-widget .dropbutton { @@ -97,24 +121,62 @@ line-height: 1.125rem; } -.dropbutton-action a { - text-decoration: none; - color: #fff; - } +[dir="ltr"] .dropbutton-action a { + padding-left: 18px; +} -[dir] .dropbutton-action a { - padding: 4.5px 18px; - } +[dir="rtl"] .dropbutton-action a { + padding-right: 18px; +} -[dir=ltr] .dropbutton-action a { - border-radius: 2px 0 0 2px; - } +[dir="ltr"] .dropbutton-action a { + padding-right: 18px; +} + +[dir="rtl"] .dropbutton-action a { + padding-left: 18px; +} + +[dir="ltr"] .dropbutton-action a { + border-top-left-radius: 2px; +} + +[dir="rtl"] .dropbutton-action a { + border-top-right-radius: 2px; +} + +[dir="ltr"] .dropbutton-action a { + border-top-right-radius: 0; +} + +[dir="rtl"] .dropbutton-action a { + border-top-left-radius: 0; +} + +[dir="ltr"] .dropbutton-action a { + border-bottom-left-radius: 2px; +} + +[dir="rtl"] .dropbutton-action a { + border-bottom-right-radius: 2px; +} + +[dir="ltr"] .dropbutton-action a { + border-bottom-right-radius: 0; +} -[dir=rtl] .dropbutton-action a { - border-radius: 0 2px 2px 0; +[dir="rtl"] .dropbutton-action a { + border-bottom-left-radius: 0; +} + +.dropbutton-action a { + padding-top: 4.5px; + padding-bottom: 4.5px; + text-decoration: none; + color: #fff; } -[dir] .dropbutton-action a:hover { +.dropbutton-action a:hover { background-color: #2494db; } @@ -123,9 +185,6 @@ solid #53b0eb; outline-offset: 2px; - } - -[dir] .dropbutton-action a:focus { background-color: #2494db; box-shadow: var(--shadow-focusable-with-outline); } @@ -136,62 +195,103 @@ solid #53b0eb; } -[dir] .dropbutton-toggle { - background-color: #0d77b5; -} - -[dir=ltr] .dropbutton-toggle { +[dir="ltr"] .dropbutton-toggle { border-left: 1px solid #fff; - border-radius: 0 2px 2px 0; } -[dir=rtl] .dropbutton-toggle { +[dir="rtl"] .dropbutton-toggle { border-right: 1px solid #fff; - border-radius: 2px 0 0 2px; } -[dir] .dropbutton-toggle:hover { +[dir="ltr"] .dropbutton-toggle { + border-top-left-radius: 0; +} + +[dir="rtl"] .dropbutton-toggle { + border-top-right-radius: 0; +} + +[dir="ltr"] .dropbutton-toggle { + border-top-right-radius: 2px; +} + +[dir="rtl"] .dropbutton-toggle { + border-top-left-radius: 2px; +} + +[dir="ltr"] .dropbutton-toggle { + border-bottom-left-radius: 0; +} + +[dir="rtl"] .dropbutton-toggle { + border-bottom-right-radius: 0; +} + +[dir="ltr"] .dropbutton-toggle { + border-bottom-right-radius: 2px; +} + +[dir="rtl"] .dropbutton-toggle { + border-bottom-left-radius: 2px; +} + +.dropbutton-toggle { + background-color: #0d77b5; +} + +.dropbutton-toggle:hover { background-color: #2494db; } -[dir=ltr] .dropbutton-toggle button { - border-radius: 0 2px 2px 0; - } +[dir="ltr"] .dropbutton-toggle button { + border-top-left-radius: 0; +} -[dir=rtl] .dropbutton-toggle button { - border-radius: 2px 0 0 2px; - } +[dir="rtl"] .dropbutton-toggle button { + border-top-right-radius: 0; +} + +[dir="ltr"] .dropbutton-toggle button { + border-top-right-radius: 2px; +} + +[dir="rtl"] .dropbutton-toggle button { + border-top-left-radius: 2px; +} + +[dir="ltr"] .dropbutton-toggle button { + border-bottom-left-radius: 0; +} + +[dir="rtl"] .dropbutton-toggle button { + border-bottom-right-radius: 0; +} + +[dir="ltr"] .dropbutton-toggle button { + border-bottom-right-radius: 2px; +} + +[dir="rtl"] .dropbutton-toggle button { + border-bottom-left-radius: 2px; +} .dropbutton-toggle button:focus { outline: 2px solid #53b0eb; outline-offset: 2px; - } - -[dir] .dropbutton-toggle button:focus { background-color: #2494db; box-shadow: var(--shadow-focusable-with-outline); } -[dir] .dropbutton-arrow { - border-top-color: #fff; -} - -[dir=ltr] .dropbutton-arrow { - right: 0; - left: 0; - margin-right: auto; - margin-left: auto; -} - -[dir=rtl] .dropbutton-arrow { +.dropbutton-arrow { left: 0; right: 0; margin-left: auto; margin-right: auto; + border-top-color: #fff; } -[dir] .dropbutton-multiple.open .dropbutton-arrow { +.dropbutton-multiple.open .dropbutton-arrow { border-bottom-color: #fff; } diff --git a/css/components/dropbutton.pcss.css b/css/components/dropbutton.pcss.css index 35d37a5..b7c0042 100644 --- a/css/components/dropbutton.pcss.css +++ b/css/components/dropbutton.pcss.css @@ -6,7 +6,10 @@ @import "../base/variables.pcss.css"; .dropbutton { - border-radius: var(--border-radius) 0 0 var(--border-radius); + border-start-start-radius: var(--border-radius-base); + border-start-end-radius: 0; + border-end-start-radius: var(--border-radius-base); + border-end-end-radius: 0; background-color: var(--color--blue-20); .js .dropbutton-widget & { @@ -19,10 +22,15 @@ line-height: var(--line-height-s); a { - padding: var(--sp0-25) var(--sp1); + padding-block: var(--sp0-25); + padding-inline-start: var(--sp1); + padding-inline-end: var(--sp1); text-decoration: none; color: var(--color--white); - border-radius: var(--border-radius) 0 0 var(--border-radius); + border-start-start-radius: var(--border-radius); + border-start-end-radius: 0; + border-end-start-radius: var(--border-radius); + border-end-end-radius: 0; &:hover { background-color: var(--color--blue-50); @@ -42,8 +50,11 @@ } .dropbutton-toggle { - border-left: 1px solid var(--color--white); - border-radius: 0 var(--border-radius) var(--border-radius) 0; + border-inline-start: 1px solid var(--color--white); + border-start-start-radius: 0; + border-start-end-radius: var(--border-radius-base); + border-end-start-radius: 0; + border-end-end-radius: var(--border-radius-base); background-color: var(--color--blue-20); &:hover { @@ -51,7 +62,10 @@ } button { - border-radius: 0 var(--border-radius) var(--border-radius) 0; + border-start-start-radius: 0; + border-start-end-radius: var(--border-radius-base); + border-end-start-radius: 0; + border-end-end-radius: var(--border-radius-base); &:focus { outline: var(--outline--base); @@ -63,10 +77,8 @@ } .dropbutton-arrow { - right: 0; - left: 0; - margin-right: auto; - margin-left: auto; + inset-inline: 0; + margin-inline: auto; border-top-color: var(--color--white); .dropbutton-multiple.open & { diff --git a/css/components/embedded-media.css b/css/components/embedded-media.css index f39a9eb..c8c2658 100644 --- a/css/components/embedded-media.css +++ b/css/components/embedded-media.css @@ -76,12 +76,31 @@ /* Form */ } -[dir] figure { +figure { background: #f7f9fa; } +[dir="ltr"] figcaption { + padding-left: 9px; +} + +[dir="rtl"] figcaption { + padding-right: 9px; +} + +[dir="ltr"] figcaption { + padding-right: 9px; +} + +[dir="rtl"] figcaption { + padding-left: 9px; +} + figcaption { + padding-top: 9px; + padding-bottom: 9px; color: #313637; + background: #f7f9fa; font-family: "Lora" , "georgia" @@ -92,168 +111,253 @@ serif; line-height: 1.125rem; } -[dir] figcaption { - padding: 9px; - background: #f7f9fa; -} - @media (min-width: 500px) { -[dir] figcaption { - padding: 18px +[dir="ltr"] figcaption { + padding-left: 18px; + } + +[dir="rtl"] figcaption { + padding-right: 18px; + } + +[dir="ltr"] figcaption { + padding-right: 18px; + } + +[dir="rtl"] figcaption { + padding-left: 18px; + } + +figcaption { + padding-top: 18px; + padding-bottom: 18px } } -.align-right { /* Override core's align.module.css. */ - max-width: 100%; +[dir="ltr"] .align-right { + margin-left: 0; +} + +[dir="rtl"] .align-right { + margin-right: 0; +} + +[dir="ltr"] .align-right { + margin-right: 0; +} + +[dir="rtl"] .align-right { + margin-left: 0; } -[dir] .align-right { - float: none; - margin: 54px 0; +.align-right { + float: none; /* Override core's align.module.css. */ + max-width: 100%; + margin-top: 54px; + margin-bottom: 54px; } /* Pull out of grid if nested in content narrow layout. */ @media (min-width: 700px) { -[dir=ltr] .layout--content-narrow .align-right, [dir=ltr] .layout--pass--content-narrow > * .align-right { - margin-right: calc(-1*((100vw - 504px)/14 + 36px)) +[dir="ltr"] .layout--content-narrow .align-right,[dir="ltr"] + .layout--pass--content-narrow > * .align-right { + margin-right: calc(-1*((100vw - 504px)/14 + 36px)); } -[dir=rtl] .layout--content-narrow .align-right, [dir=rtl] .layout--pass--content-narrow > * .align-right { - margin-left: calc(-1*((100vw - 504px)/14 + 36px)) +[dir="rtl"] .layout--content-narrow .align-right,[dir="rtl"] + .layout--pass--content-narrow > * .align-right { + margin-left: calc(-1*((100vw - 504px)/14 + 36px)); } } @media (min-width: 1000px) { -[dir=ltr] .layout--content-narrow .align-right, [dir=ltr] .layout--pass--content-narrow > * .align-right { - margin-right: calc(-2*((100vw - 519px)/14 + 36px)) +[dir="ltr"] .layout--content-narrow .align-right,[dir="ltr"] + .layout--pass--content-narrow > * .align-right { + margin-right: calc(-2*((100vw - 519px)/14 + 36px)); } -[dir=rtl] .layout--content-narrow .align-right, [dir=rtl] .layout--pass--content-narrow > * .align-right { - margin-left: calc(-2*((100vw - 519px)/14 + 36px)) +[dir="rtl"] .layout--content-narrow .align-right,[dir="rtl"] + .layout--pass--content-narrow > * .align-right { + margin-left: calc(-2*((100vw - 519px)/14 + 36px)); } } @media (min-width: 1200px) { -[dir=ltr] .layout--content-narrow .align-right, [dir=ltr] .layout--pass--content-narrow > * .align-right { - margin-right: calc(-3*((100vw - 645px)/14 + 36px)) +[dir="ltr"] .layout--content-narrow .align-right,[dir="ltr"] + .layout--pass--content-narrow > * .align-right { + margin-right: calc(-3*((100vw - 645px)/14 + 36px)); } -[dir=rtl] .layout--content-narrow .align-right, [dir=rtl] .layout--pass--content-narrow > * .align-right { - margin-left: calc(-3*((100vw - 645px)/14 + 36px)) +[dir="rtl"] .layout--content-narrow .align-right,[dir="rtl"] + .layout--pass--content-narrow > * .align-right { + margin-left: calc(-3*((100vw - 645px)/14 + 36px)); } } @media (min-width: 1440px) { -[dir=ltr] .layout--content-narrow .align-right, [dir=ltr] .layout--pass--content-narrow > * .align-right { - margin-right: -281.57143px +[dir="ltr"] .layout--content-narrow .align-right,[dir="ltr"] + .layout--pass--content-narrow > * .align-right { + margin-right: -281.57143px; } -[dir=rtl] .layout--content-narrow .align-right, [dir=rtl] .layout--pass--content-narrow > * .align-right { - margin-left: -281.57143px +[dir="rtl"] .layout--content-narrow .align-right,[dir="rtl"] + .layout--pass--content-narrow > * .align-right { + margin-left: -281.57143px; } } @media (min-width: 700px) { +[dir="ltr"] .align-right { + float: right; + } + +[dir="rtl"] .align-right { + float: left; + } + +[dir="ltr"] .align-right { + margin-left: 18px; + } + +[dir="rtl"] .align-right { + margin-right: 18px; + } + +[dir="ltr"] .align-right { + margin-right: 0; + } + +[dir="rtl"] .align-right { + margin-left: 0; + } + .align-right { - max-width: 50% + max-width: 50%; + margin-top: 18px; + margin-bottom: 18px +} + } + +[dir="ltr"] .align-left { + margin-left: 0; } -[dir=ltr] .align-right { - float: right; - margin: 18px 0 18px 18px +[dir="rtl"] .align-left { + margin-right: 0; } -[dir=rtl] .align-right { - float: left; - margin: 18px 18px 18px 0 +[dir="ltr"] .align-left { + margin-right: 0; } - } -.align-left { /* Override core's align.module.css. */ - max-width: 100%; +[dir="rtl"] .align-left { + margin-left: 0; } -[dir] .align-left { - float: none; - margin: 54px 0; +.align-left { + float: none; /* Override core's align.module.css. */ + max-width: 100%; + margin-top: 54px; + margin-bottom: 54px; } /* Pull out of grid if nested in content narrow layout. */ @media (min-width: 700px) { -[dir=ltr] .layout--content-narrow .align-left, [dir=ltr] .layout--pass--content-narrow > * .align-left { - margin-left: calc(-1*((100vw - 504px)/14 + 36px)) +[dir="ltr"] .layout--content-narrow .align-left,[dir="ltr"] + .layout--pass--content-narrow > * .align-left { + margin-left: calc(-1*((100vw - 504px)/14 + 36px)); } -[dir=rtl] .layout--content-narrow .align-left, [dir=rtl] .layout--pass--content-narrow > * .align-left { - margin-right: calc(-1*((100vw - 504px)/14 + 36px)) +[dir="rtl"] .layout--content-narrow .align-left,[dir="rtl"] + .layout--pass--content-narrow > * .align-left { + margin-right: calc(-1*((100vw - 504px)/14 + 36px)); } } @media (min-width: 1000px) { -[dir=ltr] .layout--content-narrow .align-left, [dir=ltr] .layout--pass--content-narrow > * .align-left { - margin-left: calc(-1*((100vw - 519px)/14 + 36px)) +[dir="ltr"] .layout--content-narrow .align-left,[dir="ltr"] + .layout--pass--content-narrow > * .align-left { + margin-left: calc(-1*((100vw - 519px)/14 + 36px)); } -[dir=rtl] .layout--content-narrow .align-left, [dir=rtl] .layout--pass--content-narrow > * .align-left { - margin-right: calc(-1*((100vw - 519px)/14 + 36px)) +[dir="rtl"] .layout--content-narrow .align-left,[dir="rtl"] + .layout--pass--content-narrow > * .align-left { + margin-right: calc(-1*((100vw - 519px)/14 + 36px)); } } @media (min-width: 1200px) { -[dir=ltr] .layout--content-narrow .align-left, [dir=ltr] .layout--pass--content-narrow > * .align-left { - margin-left: calc(-1*((100vw - 645px)/14 + 36px)) +[dir="ltr"] .layout--content-narrow .align-left,[dir="ltr"] + .layout--pass--content-narrow > * .align-left { + margin-left: calc(-1*((100vw - 645px)/14 + 36px)); } -[dir=rtl] .layout--content-narrow .align-left, [dir=rtl] .layout--pass--content-narrow > * .align-left { - margin-right: calc(-1*((100vw - 645px)/14 + 36px)) +[dir="rtl"] .layout--content-narrow .align-left,[dir="rtl"] + .layout--pass--content-narrow > * .align-left { + margin-right: calc(-1*((100vw - 645px)/14 + 36px)); } } @media (min-width: 1440px) { -[dir=ltr] .layout--content-narrow .align-left, [dir=ltr] .layout--pass--content-narrow > * .align-left { - margin-left: -93.85714px +[dir="ltr"] .layout--content-narrow .align-left,[dir="ltr"] + .layout--pass--content-narrow > * .align-left { + margin-left: -93.85714px; } -[dir=rtl] .layout--content-narrow .align-left, [dir=rtl] .layout--pass--content-narrow > * .align-left { - margin-right: -93.85714px +[dir="rtl"] .layout--content-narrow .align-left,[dir="rtl"] + .layout--pass--content-narrow > * .align-left { + margin-right: -93.85714px; } } @media (min-width: 700px) { -.align-left { - max-width: 50% /* Extra right margins in case of aligning next to lists. */ -} - -[dir=ltr] .align-left { +[dir="ltr"] .align-left { float: left; - margin: 18px 36px 18px 0 -} + } -[dir=rtl] .align-left { +[dir="rtl"] .align-left { float: right; - margin: 18px 0 18px 36px -} } -[dir=ltr] .align-center img, [dir=ltr] .align-center video, [dir=ltr] .align-center audio { - margin-right: auto; - margin-left: auto; +[dir="ltr"] .align-left { + margin-left: 0; + } + +[dir="rtl"] .align-left { + margin-right: 0; + } + +[dir="ltr"] .align-left { + margin-right: 36px; + } + +[dir="rtl"] .align-left { + margin-left: 36px; + } + +.align-left { + max-width: 50%; + margin-top: 18px; + margin-bottom: 18px /* Extra right margins in case of aligning next to lists. */ } + } -[dir=rtl] .align-center img, [dir=rtl] .align-center video, [dir=rtl] .align-center audio { +.align-center img, +.align-center video, +.align-center audio { margin-left: auto; margin-right: auto; } diff --git a/css/components/embedded-media.pcss.css b/css/components/embedded-media.pcss.css index b037ad9..ebd8825 100644 --- a/css/components/embedded-media.pcss.css +++ b/css/components/embedded-media.pcss.css @@ -10,7 +10,9 @@ figure { } figcaption { - padding: var(--sp0-5); + padding-block: var(--sp0-5); + padding-inline-start: var(--sp0-5); + padding-inline-end: var(--sp0-5); color: var(--color--gray-10); background: var(--color--gray-95); font-family: var(--font-serif); @@ -19,79 +21,91 @@ figcaption { line-height: var(--sp); @media (--sm) { - padding: var(--sp); + padding-block: var(--sp); + padding-inline-start: var(--sp); + padding-inline-end: var(--sp); } } .align-right { float: none; /* Override core's align.module.css. */ max-width: 100%; - margin: var(--sp3) 0; + margin-block: var(--sp3); + margin-inline-start: 0; + margin-inline-end: 0; /* Pull out of grid if nested in content narrow layout. */ .layout--content-narrow &, .layout--pass--content-narrow > * & { @media (--grid-md) { - margin-right: calc(-1 * ((var(--grid-col-width--md) + var(--grid-gap--md)))); + margin-inline-end: calc(-1 * ((var(--grid-col-width--md) + var(--grid-gap--md)))); } @media (--lg) { - margin-right: calc(-2 * ((var(--grid-col-width--lg) + var(--grid-gap--lg)))); + margin-inline-end: calc(-2 * ((var(--grid-col-width--lg) + var(--grid-gap--lg)))); } @media (--nav) { - margin-right: calc(-3 * ((var(--grid-col-width--nav) + var(--grid-gap--nav)))); + margin-inline-end: calc(-3 * ((var(--grid-col-width--nav) + var(--grid-gap--nav)))); } @media (--grid-max) { - margin-right: calc(-3 * ((var(--grid-col-width--max) + var(--grid-gap--max)))); + margin-inline-end: calc(-3 * ((var(--grid-col-width--max) + var(--grid-gap--max)))); } } @media (--grid-md) { - float: right; + float: inline-end; max-width: 50%; - margin: var(--sp) 0 var(--sp) var(--sp); + margin-block-start: var(--sp); + margin-block-end: var(--sp); + margin-inline-start: var(--sp); + margin-inline-end: 0; } } .align-left { float: none; /* Override core's align.module.css. */ max-width: 100%; - margin: var(--sp3) 0; + margin-block-start: var(--sp3); + margin-block-end: var(--sp3); + margin-inline-start: 0; + margin-inline-end: 0; /* Pull out of grid if nested in content narrow layout. */ .layout--content-narrow &, .layout--pass--content-narrow > * & { @media (--grid-md) { - margin-left: calc(-1 * ((var(--grid-col-width--md) + var(--grid-gap--md)))); + margin-inline-start: calc(-1 * ((var(--grid-col-width--md) + var(--grid-gap--md)))); } @media (--lg) { - margin-left: calc(-1 * ((var(--grid-col-width--lg) + var(--grid-gap--lg)))); + margin-inline-start: calc(-1 * ((var(--grid-col-width--lg) + var(--grid-gap--lg)))); } @media (--nav) { - margin-left: calc(-1 * ((var(--grid-col-width--nav) + var(--grid-gap--nav)))); + margin-inline-start: calc(-1 * ((var(--grid-col-width--nav) + var(--grid-gap--nav)))); } @media (--grid-max) { - margin-left: calc(-1 * ((var(--grid-col-width--max) + var(--grid-gap--max)))); + margin-inline-start: calc(-1 * ((var(--grid-col-width--max) + var(--grid-gap--max)))); } } @media (--grid-md) { - float: left; + float: inline-start; max-width: 50%; - margin: var(--sp) var(--sp2) var(--sp) 0; /* Extra right margins in case of aligning next to lists. */ + margin-block-start: var(--sp); + margin-block-end: var(--sp); + margin-inline-start: 0; + margin-inline-end: var(--sp2); /* Extra right margins in case of aligning next to lists. */ } } .align-center img, .align-center video, .align-center audio { - margin-right: auto; - margin-left: auto; + margin-inline: auto; } .media-oembed-content { diff --git a/css/components/feed.css b/css/components/feed.css index 62ffe91..2fca8d6 100644 --- a/css/components/feed.css +++ b/css/components/feed.css @@ -94,6 +94,14 @@ font-weight: 600; } +[dir="ltr"] .feed-icon__icon { + margin-left: 9px; +} + +[dir="rtl"] .feed-icon__icon { + margin-right: 9px; +} + .feed-icon__icon { display: flex; flex-shrink: 0; @@ -102,20 +110,9 @@ width: 27px; height: 27px; color: #fff; -} - -[dir] .feed-icon__icon { background-color: #2494db; } -[dir=ltr] .feed-icon__icon { - margin-left: 9px; -} - -[dir=rtl] .feed-icon__icon { - margin-right: 9px; -} - .feed-icon__icon svg { vertical-align: top; fill: currentColor; diff --git a/css/components/feed.pcss.css b/css/components/feed.pcss.css index 3de1ca5..af59757 100644 --- a/css/components/feed.pcss.css +++ b/css/components/feed.pcss.css @@ -30,7 +30,7 @@ justify-content: center; width: var(--sp1-5); height: var(--sp1-5); - margin-left: var(--sp0-5); + margin-inline-start: var(--sp0-5); color: var(--color--white); background-color: var(--color--blue-50); diff --git a/css/components/field-image.css b/css/components/field-image.css index 4d31c69..cfa7d38 100644 --- a/css/components/field-image.css +++ b/css/components/field-image.css @@ -76,72 +76,86 @@ /* Form */ } -[dir] .page-node-type-article .field--name-field-image { - margin: 9px 0 36px; - } +[dir="ltr"] .page-node-type-article .field--name-field-image { + margin-left: 0; +} -@media (min-width: 700px) { +[dir="rtl"] .page-node-type-article .field--name-field-image { + margin-right: 0; +} + +[dir="ltr"] .page-node-type-article .field--name-field-image { + margin-right: 0; +} + +[dir="rtl"] .page-node-type-article .field--name-field-image { + margin-left: 0; +} .page-node-type-article .field--name-field-image { - width: calc(14*(100vw - 504px)/14 + 468px) + margin-top: 9px; + margin-bottom: 36px; } -[dir] .page-node-type-article .field--name-field-image { - margin-top: 36px; - margin-bottom: 72px +@media (min-width: 700px) { + +[dir="ltr"] .page-node-type-article .field--name-field-image { + margin-left: calc(-1*((100vw - 504px)/14 + 36px)); } -[dir=ltr] .page-node-type-article .field--name-field-image { - margin-left: calc(-1*((100vw - 504px)/14 + 36px)) +[dir="rtl"] .page-node-type-article .field--name-field-image { + margin-right: calc(-1*((100vw - 504px)/14 + 36px)); } -[dir=rtl] .page-node-type-article .field--name-field-image { - margin-right: calc(-1*((100vw - 504px)/14 + 36px)) +.page-node-type-article .field--name-field-image { + width: calc(14*(100vw - 504px)/14 + 468px); + margin-top: 36px; + margin-bottom: 72px } } @media (min-width: 1000px) { -.page-node-type-article .field--name-field-image { - width: calc(12*(100vw - 519px)/14 + 396px) +[dir="ltr"] .page-node-type-article .field--name-field-image { + margin-left: calc(-1*((100vw - 519px)/14 + 36px)); } -[dir=ltr] .page-node-type-article .field--name-field-image { - margin-left: calc(-1*((100vw - 519px)/14 + 36px)) +[dir="rtl"] .page-node-type-article .field--name-field-image { + margin-right: calc(-1*((100vw - 519px)/14 + 36px)); } -[dir=rtl] .page-node-type-article .field--name-field-image { - margin-right: calc(-1*((100vw - 519px)/14 + 36px)) +.page-node-type-article .field--name-field-image { + width: calc(12*(100vw - 519px)/14 + 396px) } } @media (min-width: 1200px) { -.page-node-type-article .field--name-field-image { - width: calc(12*(100vw - 645px)/14 + 396px) +[dir="ltr"] .page-node-type-article .field--name-field-image { + margin-left: calc(-1*((100vw - 645px)/14 + 36px)); } -[dir=ltr] .page-node-type-article .field--name-field-image { - margin-left: calc(-1*((100vw - 645px)/14 + 36px)) +[dir="rtl"] .page-node-type-article .field--name-field-image { + margin-right: calc(-1*((100vw - 645px)/14 + 36px)); } -[dir=rtl] .page-node-type-article .field--name-field-image { - margin-right: calc(-1*((100vw - 645px)/14 + 36px)) +.page-node-type-article .field--name-field-image { + width: calc(12*(100vw - 645px)/14 + 396px) } } @media (min-width: 1440px) { -.page-node-type-article .field--name-field-image { - width: 1090.28571px +[dir="ltr"] .page-node-type-article .field--name-field-image { + margin-left: -93.85714px; } -[dir=ltr] .page-node-type-article .field--name-field-image { - margin-left: -93.85714px +[dir="rtl"] .page-node-type-article .field--name-field-image { + margin-right: -93.85714px; } -[dir=rtl] .page-node-type-article .field--name-field-image { - margin-right: -93.85714px +.page-node-type-article .field--name-field-image { + width: 1090.28571px } } diff --git a/css/components/field-image.pcss.css b/css/components/field-image.pcss.css index 6d17557..75e5d91 100644 --- a/css/components/field-image.pcss.css +++ b/css/components/field-image.pcss.css @@ -7,28 +7,30 @@ .page-node-type-article { .field--name-field-image { - margin: var(--sp0-5) 0 var(--sp2); + margin-block-start: var(--sp0-5); + margin-block-end: var(--sp2); + margin-inline-start: 0; + margin-inline-end: 0; @media (--grid-md) { width: calc(14 * var(--grid-col-width--md) + 13 * var(--grid-gap--md)); - margin-top: var(--sp2); - margin-bottom: var(--sp4); - margin-left: calc(-1 * ((var(--grid-col-width--md) + var(--grid-gap--md)))); + margin-block: var(--sp2) var(--sp4); + margin-inline-start: calc(-1 * ((var(--grid-col-width--md) + var(--grid-gap--md)))); } @media (--lg) { width: calc(12 * var(--grid-col-width--lg) + 11 * var(--grid-gap--lg)); - margin-left: calc(-1 * (var(--grid-col-width--lg) + var(--grid-gap--lg))); + margin-inline-start: calc(-1 * (var(--grid-col-width--lg) + var(--grid-gap--lg))); } @media (--nav) { width: calc(12 * var(--grid-col-width--nav) + 11 * var(--grid-gap--nav)); - margin-left: calc(-1 * (var(--grid-col-width--nav) + var(--grid-gap--nav))); + margin-inline-start: calc(-1 * (var(--grid-col-width--nav) + var(--grid-gap--nav))); } @media (--grid-max) { width: calc(12 * var(--grid-col-width--max) + 11 * var(--grid-gap--max)); - margin-left: calc(-1 * (var(--grid-col-width--max) + var(--grid-gap--max))); + margin-inline-start: calc(-1 * (var(--grid-col-width--max) + var(--grid-gap--max))); } } diff --git a/css/components/field.css b/css/components/field.css index 751a234..487db4d 100644 --- a/css/components/field.css +++ b/css/components/field.css @@ -76,7 +76,7 @@ /* Form */ } -[dir] .field:not(:last-child) { +.field:not(:last-child) { margin-bottom: 36px; } @@ -84,19 +84,25 @@ font-weight: bold; } -[dir=ltr] .field--label-inline .field__label, [dir=ltr] .field--label-inline .field__items { +[dir="ltr"] .field--label-inline .field__label,[dir="ltr"] +.field--label-inline .field__items { float: left; } -[dir=rtl] .field--label-inline .field__label, [dir=rtl] .field--label-inline .field__items { +[dir="rtl"] .field--label-inline .field__label,[dir="rtl"] +.field--label-inline .field__items { float: right; } -[dir=ltr] .field--label-inline .field__label, [dir=ltr] .field--label-inline > .field__item, [dir=ltr] .field--label-inline .field__items { +[dir="ltr"] .field--label-inline .field__label,[dir="ltr"] +.field--label-inline > .field__item,[dir="ltr"] +.field--label-inline .field__items { padding-right: 0.5em; } -[dir=rtl] .field--label-inline .field__label, [dir=rtl] .field--label-inline > .field__item, [dir=rtl] .field--label-inline .field__items { +[dir="rtl"] .field--label-inline .field__label,[dir="rtl"] +.field--label-inline > .field__item,[dir="rtl"] +.field--label-inline .field__items { padding-left: 0.5em; } diff --git a/css/components/field.pcss.css b/css/components/field.pcss.css index 96a0bcd..26a1631 100644 --- a/css/components/field.pcss.css +++ b/css/components/field.pcss.css @@ -6,7 +6,7 @@ @import "../base/variables.pcss.css"; .field:not(:last-child) { - margin-bottom: var(--sp2); + margin-block-end: var(--sp2); } .field__label { @@ -15,13 +15,13 @@ .field--label-inline .field__label, .field--label-inline .field__items { - float: left; + float: inline-start; } .field--label-inline .field__label, .field--label-inline > .field__item, .field--label-inline .field__items { - padding-right: 0.5em; + padding-inline-end: 0.5em; } .field--label-inline .field__label::after { diff --git a/css/components/fieldset.css b/css/components/fieldset.css index 71ba130..90932de 100644 --- a/css/components/fieldset.css +++ b/css/components/fieldset.css @@ -76,14 +76,45 @@ /* Form */ } +[dir="ltr"] .fieldset { + margin-left: 0; +} + +[dir="rtl"] .fieldset { + margin-right: 0; +} + +[dir="ltr"] .fieldset { + margin-right: 0; +} + +[dir="rtl"] .fieldset { + margin-left: 0; +} + +[dir="ltr"] .fieldset { + padding-left: 0; +} + +[dir="rtl"] .fieldset { + padding-right: 0; +} + +[dir="ltr"] .fieldset { + padding-right: 0; +} + +[dir="rtl"] .fieldset { + padding-left: 0; +} + .fieldset { min-width: 0; + margin-top: 18px; + margin-bottom: 18px; + padding-top: 0; + padding-bottom: 0; color: inherit; -} - -[dir] .fieldset { - margin: 18px 0; - padding: 0; border: 2px solid #7e96a7; border-radius: 2px; background-color: #fff; @@ -92,9 +123,6 @@ .fieldset--group { width: 100%; color: inherit; -} - -[dir] .fieldset--group { border: 0; border-radius: 0; background: none; @@ -110,40 +138,34 @@ _:-ms-fullscreen, width: 100%; } +[dir="ltr"] .fieldset__legend { + float: left; +} + +[dir="rtl"] .fieldset__legend { + float: right; +} + .fieldset__legend { width: 100%; + margin-bottom: 18px; color: inherit; + background-color: #7e96a7; font-size: 1.125rem; font-weight: 700; line-height: 1.6875rem; } -[dir] .fieldset__legend { - margin-bottom: 18px; - background-color: #7e96a7; -} - -[dir=ltr] .fieldset__legend { - float: left; -} - -[dir=rtl] .fieldset__legend { - float: right; -} - -[dir] .fieldset__legend .fieldset__label.form-required:after { +.fieldset__legend .fieldset__label.form-required:after { background-image: url("data:image/svg+xml,%3Csvg height='16' width='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m0 7.562 1.114-3.438c2.565.906 4.43 1.688 5.59 2.35-.306-2.921-.467-4.93-.484-6.027h3.511c-.05 1.597-.234 3.6-.558 6.003 1.664-.838 3.566-1.613 5.714-2.325l1.113 3.437c-2.05.678-4.06 1.131-6.028 1.356.984.856 2.372 2.381 4.166 4.575l-2.906 2.059c-.935-1.274-2.041-3.009-3.316-5.206-1.194 2.275-2.244 4.013-3.147 5.206l-2.856-2.059c1.872-2.307 3.211-3.832 4.017-4.575-2.081-.402-4.058-.856-5.93-1.356' fill='%23ffffff'/%3E%3C/svg%3E%0A"); } .fieldset__legend--composite { - color: inherit; -} - -[dir] .fieldset__legend--composite { margin-top: 2px; + color: inherit; } -[dir] .fieldset__legend--invisible { +.fieldset__legend--invisible { margin: 0; } @@ -151,79 +173,141 @@ _:-ms-fullscreen, color: inherit; } +[dir="ltr"] .fieldset__label { + padding-left: 18px; +} + +[dir="rtl"] .fieldset__label { + padding-right: 18px; +} + +[dir="ltr"] .fieldset__label { + padding-right: 18px; +} + +[dir="rtl"] .fieldset__label { + padding-left: 18px; +} + .fieldset__label { display: block; + padding-top: 9px; + padding-bottom: 9px; color: #fff; line-height: 1.125rem; } -[dir] .fieldset__label { - padding: 9px 18px; -} - .fieldset__label.is-disabled { color: #7e96a7; } .fieldset__description { - font-size: 0.8125rem; - line-height: 1.125rem; -} - -[dir] .fieldset__description { margin-top: 9px; margin-bottom: 9px; + font-size: 0.8125rem; + line-height: 1.125rem; } .fieldset__description.is-disabled { color: var(--input--disabled-fg-color); } -.fieldset__error-message { - color: #e33f1e; - font-size: 0.875rem; - line-height: 1.125rem; +[dir="ltr"] .fieldset__error-message { + padding-left: 27px; +} + +[dir="rtl"] .fieldset__error-message { + padding-right: 27px; } -[dir] .fieldset__error-message { +.fieldset__error-message { margin-top: 9px; margin-bottom: 9px; + color: #e33f1e; background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23E33F1E' d='M9 0C4.03125 0 0 4.03125 0 9C0 13.9688 4.03125 18 9 18C13.9687 18 18 13.9688 18 9C18 4.03125 13.9687 0 9 0ZM10.5 14.6133C10.5 14.8242 10.3359 15 10.1367 15H7.88672C7.67578 15 7.5 14.8242 7.5 14.6133V12.3867C7.5 12.1758 7.67578 12 7.88672 12H10.1367C10.3359 12 10.5 12.1758 10.5 12.3867V14.6133ZM10.4766 10.582C10.4648 10.7461 10.2891 10.875 10.0781 10.875H7.91016C7.6875 10.875 7.51172 10.7461 7.51172 10.582L7.3125 3.30469C7.3125 3.22266 7.34766 3.14063 7.42969 3.09375C7.5 3.03516 7.60547 3 7.71094 3H10.2891C10.3945 3 10.5 3.03516 10.5703 3.09375C10.6523 3.14063 10.6875 3.22266 10.6875 3.30469L10.4766 10.582Z'/%3E%3C/svg%3E"); background-repeat: no-repeat; + background-position: left top; /* LTR */ background-size: 18px 18px; + font-size: 0.875rem; + line-height: 1.125rem; } -[dir=ltr] .fieldset__error-message { - padding-left: 27px; - background-position: left top; -} - -[dir=rtl] .fieldset__error-message { - padding-right: 27px; - background-position: right top; -} +[dir="rtl"] .fieldset__error-message { + background-position: left top; + } @media screen and (-ms-high-contrast: active) { -[dir] .fieldset__error-message { +.fieldset__error-message { background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23ffffff' d='M9 0C4.03125 0 0 4.03125 0 9C0 13.9688 4.03125 18 9 18C13.9687 18 18 13.9688 18 9C18 4.03125 13.9687 0 9 0ZM10.5 14.6133C10.5 14.8242 10.3359 15 10.1367 15H7.88672C7.67578 15 7.5 14.8242 7.5 14.6133V12.3867C7.5 12.1758 7.67578 12 7.88672 12H10.1367C10.3359 12 10.5 12.1758 10.5 12.3867V14.6133ZM10.4766 10.582C10.4648 10.7461 10.2891 10.875 10.0781 10.875H7.91016C7.6875 10.875 7.51172 10.7461 7.51172 10.582L7.3125 3.30469C7.3125 3.22266 7.34766 3.14063 7.42969 3.09375C7.5 3.03516 7.60547 3 7.71094 3H10.2891C10.3945 3 10.5 3.03516 10.5703 3.09375C10.6523 3.14063 10.6875 3.22266 10.6875 3.30469L10.4766 10.582Z'/%3E%3C/svg%3E") } } -[dir] .fieldset__legend--visible ~ .fieldset__wrapper { +[dir="ltr"] .fieldset__legend--visible ~ .fieldset__wrapper { + padding-left: 18px; +} + +[dir="rtl"] .fieldset__legend--visible ~ .fieldset__wrapper { + padding-right: 18px; +} + +[dir="ltr"] .fieldset__legend--visible ~ .fieldset__wrapper { + padding-right: 18px; +} + +[dir="rtl"] .fieldset__legend--visible ~ .fieldset__wrapper { + padding-left: 18px; +} + +.fieldset__legend--visible ~ .fieldset__wrapper { margin-top: 0; - padding: 18px; + padding-top: 18px; + padding-bottom: 18px; } -[dir] .fieldset--group .fieldset__legend--visible ~ .fieldset__wrapper { +.fieldset--group .fieldset__legend--visible ~ .fieldset__wrapper { border: 2px solid #7e96a7; border-radius: 2px; } -[dir] .fieldset__wrapper--group { - margin: 0; +[dir="ltr"] .fieldset__wrapper--group { + margin-left: 0; +} + +[dir="rtl"] .fieldset__wrapper--group { + margin-right: 0; +} + +[dir="ltr"] .fieldset__wrapper--group { + margin-right: 0; +} + +[dir="rtl"] .fieldset__wrapper--group { + margin-left: 0; +} + +.fieldset__wrapper--group { + margin-top: 0; + margin-bottom: 0; +} + +[dir="ltr"] .fieldset__wrapper > .container-inline { + padding-left: 0; +} + +[dir="rtl"] .fieldset__wrapper > .container-inline { + padding-right: 0; +} + +[dir="ltr"] .fieldset__wrapper > .container-inline { + padding-right: 0; +} + +[dir="rtl"] .fieldset__wrapper > .container-inline { + padding-left: 0; } -[dir] .fieldset__wrapper > .container-inline { - padding: 0; +.fieldset__wrapper > .container-inline { + padding-top: 0; + padding-bottom: 0; } diff --git a/css/components/fieldset.pcss.css b/css/components/fieldset.pcss.css index c7d519f..af59952 100644 --- a/css/components/fieldset.pcss.css +++ b/css/components/fieldset.pcss.css @@ -7,8 +7,12 @@ .fieldset { min-width: 0; - margin: var(--sp1) 0; - padding: 0; + margin-block: var(--sp1); + margin-inline-start: 0; + margin-inline-end: 0; + padding-block: 0; + padding-inline-start: 0; + padding-inline-end: 0; color: inherit; border: var(--form-element-border-size-base) solid var(--color--gray-30); border-radius: var(--border-radius-base); @@ -33,9 +37,9 @@ _:-ms-fullscreen, } .fieldset__legend { - float: left; + float: inline-start; width: 100%; - margin-bottom: var(--sp1); + margin-block-end: var(--sp1); color: inherit; background-color: var(--color--gray-30); font-size: var(--font-size-l); @@ -52,7 +56,7 @@ _:-ms-fullscreen, } .fieldset__legend--composite { - margin-top: 2px; + margin-block-start: 2px; color: inherit; } @@ -66,7 +70,9 @@ _:-ms-fullscreen, .fieldset__label { display: block; - padding: var(--sp0-5) var(--sp1); + padding-block: var(--sp0-5); + padding-inline-start: var(--sp1); + padding-inline-end: var(--sp1); color: var(--color--white); line-height: var(--line-height-s); } @@ -76,8 +82,7 @@ _:-ms-fullscreen, } .fieldset__description { - margin-top: var(--sp0-5); - margin-bottom: var(--sp0-5); + margin-block: var(--sp0-5); font-size: var(--font-size-xs); line-height: var(--line-height-s); } @@ -87,25 +92,30 @@ _:-ms-fullscreen, } .fieldset__error-message { - margin-top: var(--sp0-5); - margin-bottom: var(--sp0-5); - padding-left: var(--sp1-5); + margin-block: var(--sp0-5); + padding-inline-start: var(--sp1-5); color: var(--color--red); background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23E33F1E' d='M9 0C4.03125 0 0 4.03125 0 9C0 13.9688 4.03125 18 9 18C13.9687 18 18 13.9688 18 9C18 4.03125 13.9687 0 9 0ZM10.5 14.6133C10.5 14.8242 10.3359 15 10.1367 15H7.88672C7.67578 15 7.5 14.8242 7.5 14.6133V12.3867C7.5 12.1758 7.67578 12 7.88672 12H10.1367C10.3359 12 10.5 12.1758 10.5 12.3867V14.6133ZM10.4766 10.582C10.4648 10.7461 10.2891 10.875 10.0781 10.875H7.91016C7.6875 10.875 7.51172 10.7461 7.51172 10.582L7.3125 3.30469C7.3125 3.22266 7.34766 3.14063 7.42969 3.09375C7.5 3.03516 7.60547 3 7.71094 3H10.2891C10.3945 3 10.5 3.03516 10.5703 3.09375C10.6523 3.14063 10.6875 3.22266 10.6875 3.30469L10.4766 10.582Z'/%3E%3C/svg%3E"); background-repeat: no-repeat; - background-position: left top; + background-position: left top; /* LTR */ background-size: var(--sp1) var(--sp1); font-size: var(--font-size-s); line-height: var(--line-height-s); + [dir="rtl"] & { + background-position: left top; + } + @media screen and (-ms-high-contrast: active) { background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23ffffff' d='M9 0C4.03125 0 0 4.03125 0 9C0 13.9688 4.03125 18 9 18C13.9687 18 18 13.9688 18 9C18 4.03125 13.9687 0 9 0ZM10.5 14.6133C10.5 14.8242 10.3359 15 10.1367 15H7.88672C7.67578 15 7.5 14.8242 7.5 14.6133V12.3867C7.5 12.1758 7.67578 12 7.88672 12H10.1367C10.3359 12 10.5 12.1758 10.5 12.3867V14.6133ZM10.4766 10.582C10.4648 10.7461 10.2891 10.875 10.0781 10.875H7.91016C7.6875 10.875 7.51172 10.7461 7.51172 10.582L7.3125 3.30469C7.3125 3.22266 7.34766 3.14063 7.42969 3.09375C7.5 3.03516 7.60547 3 7.71094 3H10.2891C10.3945 3 10.5 3.03516 10.5703 3.09375C10.6523 3.14063 10.6875 3.22266 10.6875 3.30469L10.4766 10.582Z'/%3E%3C/svg%3E"); } } .fieldset__legend--visible ~ .fieldset__wrapper { - margin-top: 0; - padding: var(--sp); + margin-block-start: 0; + padding-block: var(--sp); + padding-inline-start: var(--sp); + padding-inline-end: var(--sp); .fieldset--group & { border: var(--form-element-border-size-base) solid var(--color--gray-30); @@ -114,9 +124,13 @@ _:-ms-fullscreen, } .fieldset__wrapper--group { - margin: 0; + margin-block: 0; + margin-inline-start: 0; + margin-inline-end: 0; } .fieldset__wrapper > .container-inline { - padding: 0; + padding-block: 0; + padding-inline-start: 0; + padding-inline-end: 0; } diff --git a/css/components/footer.css b/css/components/footer.css index 47ad2a5..6a14f13 100644 --- a/css/components/footer.css +++ b/css/components/footer.css @@ -81,37 +81,30 @@ color: #9ea0a1; /* @todo - #0c0d0e and #171e23 aren't currently variables */ + background: linear-gradient(180deg, #0c0d0e 0%, #171e23 100%); } -[dir=ltr] .site-footer { - background: linear-gradient(180deg, #0c0d0e 0%, #171e23 100%); +[dir="ltr"] .site-footer .menu { + margin-left: 0; } -[dir=rtl] .site-footer { - background: linear-gradient(-180deg, #0c0d0e 0%, #171e23 100%); +[dir="rtl"] .site-footer .menu { + margin-right: 0; } .site-footer .menu { list-style: none; } -[dir=ltr] .site-footer .menu { - margin-left: 0; - } - -[dir=rtl] .site-footer .menu { - margin-right: 0; - } - -[dir=ltr] .site-footer .menu ul { - margin-left: 18px; - } +[dir="ltr"] .site-footer .menu ul { + margin-left: 18px; +} -[dir=rtl] .site-footer .menu ul { +[dir="rtl"] .site-footer .menu ul { margin-right: 18px; - } +} -[dir] .site-footer .menu li { +.site-footer .menu li { margin-bottom: 9px; } @@ -125,10 +118,10 @@ } @media (min-width: 1200px) { - [dir=ltr] body:not(.is-always-mobile-nav) .site-footer { - border-left: solid 90px #000; - } - [dir=rtl] body:not(.is-always-mobile-nav) .site-footer { + [dir="ltr"] body:not(.is-always-mobile-nav) .site-footer { + border-left: solid 90px #000; + } + [dir="rtl"] body:not(.is-always-mobile-nav) .site-footer { border-right: solid 90px #000; - } + } } diff --git a/css/components/footer.pcss.css b/css/components/footer.pcss.css index ba3cc2d..d2f1a59 100644 --- a/css/components/footer.pcss.css +++ b/css/components/footer.pcss.css @@ -13,15 +13,15 @@ background: linear-gradient(180deg, #0c0d0e 0%, #171e23 100%); .menu { - margin-left: 0; + margin-inline-start: 0; list-style: none; ul { - margin-left: var(--sp); + margin-inline-start: var(--sp); } li { - margin-bottom: var(--sp0-5); + margin-block-end: var(--sp0-5); } } @@ -36,7 +36,7 @@ @media (--nav) { body:not(.is-always-mobile-nav) & { - border-left: solid var(--content-left) var(--color--black); + border-inline-start: solid var(--content-left) var(--color--black); } } } diff --git a/css/components/form-boolean.css b/css/components/form-boolean.css index 687a967..4d73638 100644 --- a/css/components/form-boolean.css +++ b/css/components/form-boolean.css @@ -82,27 +82,21 @@ input[type="radio"] { width: 27px; height: 27px; vertical-align: text-bottom; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; -} - -[dir] input[type="checkbox"], [dir] input[type="radio"] { border: 2px solid #7e96a7; border-radius: 2px; background-color: #f7f9fa; background-repeat: no-repeat; background-position: 50% 50%; background-size: 18px 18px; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; } input[type="checkbox"]:focus, input[type="radio"]:focus { outline: 6px dashed transparent; - } - -[dir] input[type="checkbox"]:focus, [dir] input[type="radio"]:focus { box-shadow: 0 0 0 @@ -128,7 +122,7 @@ input[type="checkbox"]:focus, input[type="radio"]:focus { } } -[dir] input[type="checkbox"]:hover, [dir] input[type="radio"]:hover { +input[type="checkbox"]:hover, input[type="radio"]:hover { border-color: #53b0eb; } @@ -136,104 +130,99 @@ input[type="checkbox"][disabled], input[type="radio"][disabled] { opacity: 0.3; } -.form-type--boolean input[type="checkbox"], .form-type--boolean input[type="radio"] { - position: relative; - top: 9px; - } +[dir="ltr"] .form-type--boolean input[type="checkbox"],[dir="ltr"] .form-type--boolean input[type="radio"] { + float: left; +} -[dir] .form-type--boolean input[type="checkbox"], [dir] .form-type--boolean input[type="radio"] { - transform: translateY(-50%); - } +[dir="rtl"] .form-type--boolean input[type="checkbox"],[dir="rtl"] .form-type--boolean input[type="radio"] { + float: right; +} -[dir=ltr] .form-type--boolean input[type="checkbox"], [dir=ltr] .form-type--boolean input[type="radio"] { - float: left; - margin-left: -36px; - } +[dir="ltr"] .form-type--boolean input[type="checkbox"],[dir="ltr"] .form-type--boolean input[type="radio"] { + margin-left: -36px; +} -[dir=rtl] .form-type--boolean input[type="checkbox"], [dir=rtl] .form-type--boolean input[type="radio"] { - float: right; +[dir="rtl"] .form-type--boolean input[type="checkbox"],[dir="rtl"] .form-type--boolean input[type="radio"] { margin-right: -36px; +} + +.form-type--boolean input[type="checkbox"], .form-type--boolean input[type="radio"] { + position: relative; + /* stylelint-disable-next-line csstools/use-logical */ + top: 9px; + transform: translateY(-50%); } .form-type--boolean.form-no-label input[type="checkbox"], .form-type--boolean.form-no-label input[type="radio"] { position: static; - } - -[dir] .form-type--boolean.form-no-label input[type="checkbox"], [dir] .form-type--boolean.form-no-label input[type="radio"] { float: none; - transform: none; - } - -[dir=ltr] .form-type--boolean.form-no-label input[type="checkbox"], [dir=ltr] .form-type--boolean.form-no-label input[type="radio"] { - margin-right: 0; - margin-left: 0; - } - -[dir=rtl] .form-type--boolean.form-no-label input[type="checkbox"], [dir=rtl] .form-type--boolean.form-no-label input[type="radio"] { margin-left: 0; margin-right: 0; + transform: none; } -[dir] input[type="checkbox"].error, [dir] input[type="radio"].error { +input[type="checkbox"].error, input[type="radio"].error { border-color: #e33f1e; } /* Specific pseudo-element to apply red borders for IE11 bool elements in case of error */ -[dir] input[type="checkbox"].error::-ms-check, [dir] input[type="radio"].error::-ms-check { +input[type="checkbox"].error::-ms-check, input[type="radio"].error::-ms-check { border: 1px solid #e33f1e; } -[dir] input[type="checkbox"]:checked { +input[type="checkbox"]:checked { background-image: url("data:image/svg+xml,%3Csvg width='18' height='14' viewBox='0 0 18 14' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%232494DB' d='M14.8232 0.176777C14.9209 0.0791457 15.0791 0.0791455 15.1768 0.176777L16.9445 1.94454C17.0422 2.04217 17.0422 2.20047 16.9445 2.2981L6.23744 13.0052C6.13981 13.1028 5.98151 13.1028 5.88388 13.0052L0.176777 7.2981C0.0791456 7.20047 0.0791456 7.04218 0.176777 6.94454L1.94454 5.17678C2.04217 5.07915 2.20047 5.07915 2.2981 5.17678L5.88388 8.76256C5.98151 8.86019 6.13981 8.86019 6.23744 8.76256L14.8232 0.176777Z'/%3E%3C/svg%3E%0A"); } -[dir] input[type="radio"] { +input[type="radio"] { border-radius: 50%; } -[dir] input[type="radio"]:checked { +input[type="radio"]:checked { background-image: url("data:image/svg+xml,%3Csvg width='17' height='17' viewBox='0 0 17 17' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8.5' cy='8.5' r='8.5' fill='%232494DB'/%3E%3C/svg%3E%0A"); background-size: 17px 17px; } -[dir] .form-type--boolean { - clear: both; -} - -[dir=ltr] .form-type--boolean { +[dir="ltr"] .form-type--boolean { margin-left: 36px; } -[dir=rtl] .form-type--boolean { +[dir="rtl"] .form-type--boolean { margin-right: 36px; } -[dir=ltr] .form-type--boolean.form-no-label { - margin-left: 0; - } +.form-type--boolean { + clear: both; +} -[dir=rtl] .form-type--boolean.form-no-label { +[dir="ltr"] .form-type--boolean.form-no-label { + margin-left: 0; +} + +[dir="rtl"] .form-type--boolean.form-no-label { margin-right: 0; - } +} -[dir] .form-boolean-group .form-type--boolean { +.form-boolean-group .form-type--boolean { margin-top: 18px; margin-bottom: 18px; } -[dir=ltr] .container-inline .form-boolean-group .form-type--boolean:not(:last-child) { - margin-right: 18px; - } +[dir="ltr"] .container-inline .form-boolean-group .form-type--boolean:not(:last-child) { + margin-right: 18px; +} -[dir=rtl] .container-inline .form-boolean-group .form-type--boolean:not(:last-child) { +[dir="rtl"] .container-inline .form-boolean-group .form-type--boolean:not(:last-child) { margin-left: 18px; - } +} -[dir=ltr] .form-type--boolean .form-item__description, [dir=ltr] .form-type--boolean .form-item--error-message { - margin-left: -36px; - } +[dir="ltr"] .form-type--boolean .form-item__description,[dir="ltr"] + .form-type--boolean .form-item--error-message { + margin-left: -36px; +} -[dir=rtl] .form-type--boolean .form-item__description, [dir=rtl] .form-type--boolean .form-item--error-message { +[dir="rtl"] .form-type--boolean .form-item__description,[dir="rtl"] + .form-type--boolean .form-item--error-message { margin-right: -36px; - } +} diff --git a/css/components/form-boolean.pcss.css b/css/components/form-boolean.pcss.css index 8325c9f..d747605 100644 --- a/css/components/form-boolean.pcss.css +++ b/css/components/form-boolean.pcss.css @@ -42,17 +42,17 @@ input[type="radio"] { .form-type--boolean & { position: relative; + /* stylelint-disable-next-line csstools/use-logical */ top: var(--sp0-5); - float: left; - margin-left: calc(var(--sp2) * -1); + float: inline-start; + margin-inline-start: calc(var(--sp2) * -1); transform: translateY(-50%); } .form-type--boolean.form-no-label & { position: static; float: none; - margin-right: 0; - margin-left: 0; + margin-inline: 0; transform: none; } @@ -83,25 +83,24 @@ input[type="radio"] { .form-type--boolean { clear: both; - margin-left: var(--sp2); + margin-inline-start: var(--sp2); &.form-no-label { - margin-left: 0; + margin-inline-start: 0; } .form-boolean-group & { - margin-top: var(--sp1); - margin-bottom: var(--sp1); + margin-block: var(--sp1); &:not(:last-child) { .container-inline & { - margin-right: var(--sp); + margin-inline-end: var(--sp); } } } .form-item__description, .form-item--error-message { - margin-left: calc(var(--sp2) * -1); + margin-inline-start: calc(var(--sp2) * -1); } } diff --git a/css/components/form-select.css b/css/components/form-select.css index 82cb283..bb0c51f 100644 --- a/css/components/form-select.css +++ b/css/components/form-select.css @@ -76,10 +76,63 @@ /* Form */ } +[dir="ltr"] select { + padding-left: 24px; +} + +[dir="rtl"] select { + padding-right: 24px; +} + +[dir="ltr"] select { + padding-right: 72px; +} + +[dir="rtl"] select { + padding-left: 72px; +} + +[dir="ltr"] select { + border-top-left-radius: 0; +} + +[dir="rtl"] select { + border-top-right-radius: 0; +} + +[dir="ltr"] select { + border-top-right-radius: 2px; +} + +[dir="rtl"] select { + border-top-left-radius: 2px; +} + +[dir="ltr"] select { + border-bottom-left-radius: 0; +} + +[dir="rtl"] select { + border-bottom-right-radius: 0; +} + +[dir="ltr"] select { + border-bottom-right-radius: 2px; +} + +[dir="rtl"] select { + border-bottom-left-radius: 2px; +} + select { max-width: 100%; height: 54px; + padding-top: 0; + padding-bottom: 0; color: #313637; + border-width: 2px 0; + border-style: solid; + border-color: transparent; outline: 1px solid transparent; @@ -95,49 +148,33 @@ transparent; @todo - look at inlining some of the SVGs with an eye on CSS filesize. */ - font-family: inherit; - font-size: 1rem; - line-height: 3.125rem; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; -} - -[dir] select { - border-width: 2px 0; - border-style: solid; - border-color: transparent; background-color: #f7f9fa; background-image: url("../../images/chevron-down.svg"), url("../../images/select-chevron-bg-default.svg"), url("../../images/select-chevron-bg-default.svg"); background-repeat: no-repeat; -} - -[dir=ltr] select { - padding: 0 72px 0 24px; - border-radius: 0 2px 2px 0; - background-position: + background-position: /* LTR */ right 18px center, right 0 top -2px, left -48px top -2px; + font-family: inherit; + font-size: 1rem; + line-height: 3.125rem; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; } -[dir=rtl] select { - padding: 0 24px 0 72px; - border-radius: 2px 0 0 2px; - background-position: - left 18px center, - left 0 top -2px, - right -48px top -2px; -} +[dir="rtl"] select { + background-position: + left 18px center, + left 0 top -2px, + right -48px top -2px; + } select:focus { + border-color: #7e96a7; outline: 6px dashed transparent; - } - -[dir] select:focus { - border-color: #7e96a7; box-shadow: 0 0 0 @@ -163,7 +200,7 @@ select:focus { } } -[dir] select:hover { +select:hover { border-color: #53b0eb; background-image: url("../../images/chevron-down.svg"), @@ -182,7 +219,7 @@ select[disabled] { opacity: 0.6; } -[dir] select.error { +select.error { border-color: #e33f1e; background-image: url("../../images/chevron-down.svg"), @@ -190,38 +227,78 @@ select[disabled] { url("../../images/select-chevron-bg-error.svg"); } +[dir="ltr"] select[multiple] { + padding-left: 9px; +} + +[dir="rtl"] select[multiple] { + padding-right: 9px; +} + +[dir="ltr"] select[multiple] { + padding-right: 9px; +} + +[dir="rtl"] select[multiple] { + padding-left: 9px; +} + +[dir="ltr"] select[multiple] { + border-right: solid 2px transparent; +} + +[dir="rtl"] select[multiple] { + border-left: solid 2px transparent; +} + +[dir="ltr"] select[multiple] { + border-left: solid 6px #7e96a7; +} + +[dir="rtl"] select[multiple] { + border-right: solid 6px #7e96a7; +} + select[multiple] { height: auto; - line-height: 1; - } - -[dir] select[multiple] { - padding: 9px; + padding-top: 9px; + padding-bottom: 9px; border-top: 0; border-bottom: 0; background-image: none; background-repeat: repeat-y; + background-position: left -48px top -2px; + line-height: 1; } -[dir=ltr] select[multiple] { - border-right: solid 2px transparent; - border-left: solid 6px #7e96a7; - background-position: left -48px top -2px; - } +/* Needed by non-Chromium based MS Edge browsers. */ -[dir=rtl] select[multiple] { - border-left: solid 2px transparent; - border-right: solid 6px #7e96a7; - background-position: right -48px top -2px; - } +[dir="rtl"] select[multiple] { + background-position: right -48px top -2px; + } -/* Needed by non-Chromium based MS Edge browsers. */ +[dir="ltr"] select[multiple] option { + padding-left: 9px; +} -[dir] select[multiple] option { - padding: 9px; +[dir="rtl"] select[multiple] option { + padding-right: 9px; +} + +[dir="ltr"] select[multiple] option { + padding-right: 9px; +} + +[dir="rtl"] select[multiple] option { + padding-left: 9px; +} + +select[multiple] option { + padding-top: 9px; + padding-bottom: 9px; } -[dir] select[multiple]:focus { +select[multiple]:focus { border-color: #7e96a7; box-shadow: 0 -2px 0 #7e96a7, @@ -236,14 +313,14 @@ select[multiple] { rgba(83, 176, 235, 0.25); } -[dir] select[multiple]:hover { +select[multiple]:hover { border-color: #53b0eb; box-shadow: 0 -2px 0 #53b0eb, 0 2px 0 #53b0eb; } -[dir] select[multiple]:focus:hover { +select[multiple]:focus:hover { box-shadow: 0 -2px 0 #53b0eb, 0 2px 0 #53b0eb, @@ -257,14 +334,14 @@ select[multiple] { rgba(83, 176, 235, 0.25); } -[dir] select[multiple].error { +select[multiple].error { border-color: #e33f1e; box-shadow: 0 -2px 0 #e33f1e, 0 2px 0 #e33f1e; } -[dir] select[multiple].error:focus { +select[multiple].error:focus { box-shadow: 0 -2px 0 #e33f1e, 0 2px 0 #e33f1e, @@ -278,28 +355,31 @@ select[multiple] { rgba(83, 176, 235, 0.25); } +[dir="ltr"] select.form-element--small { + padding-left: 19.5px; + padding-right: 58.5px; +} + +[dir="rtl"] select.form-element--small { + padding-right: 19.5px; + padding-left: 58.5px; +} + select.form-element--small { height: 45px; + background-position: right 13.5px center, right -10px top -2px, left -48px top -2px; line-height: 2.5625rem; } -[dir=ltr] select.form-element--small { - padding-right: 58.5px; - padding-left: 19.5px; - background-position: right 13.5px center, right -10px top -2px, left -48px top -2px; - } - -[dir=rtl] select.form-element--small { - padding-left: 58.5px; - padding-right: 19.5px; - background-position: left 13.5px center, left -10px top -2px, right -48px top -2px; - } +[dir="rtl"] select.form-element--small { + background-position: left 13.5px center, right -10px top -2px, left -48px top -2px; + } /* Necessary for IE11 to show chevron. */ @media screen and (-ms-high-contrast: active) { -[dir] select { +select { background-image: url("../../images/chevron-down.svg") } } diff --git a/css/components/form-select.pcss.css b/css/components/form-select.pcss.css index e59255b..653b3b1 100644 --- a/css/components/form-select.pcss.css +++ b/css/components/form-select.pcss.css @@ -18,12 +18,17 @@ select { max-width: 100%; height: var(--form-element-select-height); - padding: 0 calc(var(--sp1) + var(--form-element-select-border-size-right)) 0 calc(var(--sp1) + var(--form-element-border-size-left)); + padding-block: 0; + padding-inline-start: calc(var(--sp1) + var(--form-element-border-size-left)); + padding-inline-end: calc(var(--sp1) + var(--form-element-select-border-size-right)); color: var(--color--gray-10); border-width: var(--form-element-border-size-base) 0; border-style: solid; border-color: transparent; - border-radius: 0 var(--border-radius-base) var(--border-radius-base) 0; + border-start-start-radius: 0; + border-start-end-radius: var(--border-radius-base); + border-end-start-radius: 0; + border-end-end-radius: var(--border-radius-base); outline: var(--outline--thin); /* Couple of notes here: @@ -40,7 +45,7 @@ select { background-color: var(--color--gray-95); background-image: var(--form-element-select-icon), var(--form-element-select-bg), var(--form-element-select-bg); background-repeat: no-repeat; - background-position: + background-position: /* LTR */ right var(--sp1) center, right 0 top calc(-1 * var(--form-element-border-size-base)), left -48px top calc(-1 * var(--form-element-border-size-base)); @@ -49,6 +54,13 @@ select { line-height: calc(var(--form-element-select-height) - 2 * var(--form-element-border-size-base)); appearance: none; + [dir="rtl"] & { + background-position: + left var(--sp1) center, + left 0 top calc(-1 * var(--form-element-border-size-base)), + right -48px top calc(-1 * var(--form-element-border-size-base)); + } + &:focus { border-color: var(--color--gray-30); outline: var(--outline--thick); @@ -87,18 +99,26 @@ select { &[multiple] { height: auto; - padding: var(--sp0-5); - border-top: 0; - border-right: solid 2px transparent; - border-bottom: 0; - border-left: solid 6px var(--color--gray-30); + padding-block: var(--sp0-5); + padding-inline-start: var(--sp0-5); + padding-inline-end: var(--sp0-5); + border-block-start: 0; + border-inline-end: solid 2px transparent; + border-block-end: 0; + border-inline-start: solid 6px var(--color--gray-30); background-image: none; background-repeat: repeat-y; background-position: left -48px top calc(-1 * var(--form-element-border-size-base)); line-height: 1; /* Needed by non-Chromium based MS Edge browsers. */ + [dir="rtl"] & { + background-position: right -48px top calc(-1 * var(--form-element-border-size-base)); + } + option { - padding: var(--sp0-5); + padding-block: var(--sp0-5); + padding-inline-start: var(--sp0-5); + padding-inline-end: var(--sp0-5); } &:focus { @@ -152,10 +172,13 @@ select { &.form-element--small { height: var(--form-element-select-height--small); - padding-right: calc(var(--form-element-select-height--small) + var(--sp0-75)); - padding-left: calc(var(--sp0-75) + var(--form-element-border-size-left)); + padding-inline: calc(var(--sp0-75) + var(--form-element-border-size-left)) calc(var(--form-element-select-height--small) + var(--sp0-75)); background-position: right var(--sp0-75) center, right -10px top -2px, left -48px top -2px; line-height: calc(var(--form-element-select-height--small) - 2 * var(--form-element-border-size-base)); + + [dir="rtl"] & { + background-position: left var(--sp0-75) center, right -10px top -2px, left -48px top -2px; + } } /* Necessary for IE11 to show chevron. */ diff --git a/css/components/form-text.css b/css/components/form-text.css index a92e838..f6a6ae1 100644 --- a/css/components/form-text.css +++ b/css/components/form-text.css @@ -76,6 +76,222 @@ /* Form */ } +[dir="ltr"] [type="color"],[dir="ltr"] +[type="date"],[dir="ltr"] +[type="datetime-local"],[dir="ltr"] +[type="email"],[dir="ltr"] +[type="file"],[dir="ltr"] +[type="month"],[dir="ltr"] +[type="number"],[dir="ltr"] +[type="password"],[dir="ltr"] +[type="search"],[dir="ltr"] +[type="tel"],[dir="ltr"] +[type="text"],[dir="ltr"] +[type="time"],[dir="ltr"] +[type="url"],[dir="ltr"] +[type="week"],[dir="ltr"] +textarea { + padding-left: 24px; +} + +[dir="rtl"] [type="color"],[dir="rtl"] +[type="date"],[dir="rtl"] +[type="datetime-local"],[dir="rtl"] +[type="email"],[dir="rtl"] +[type="file"],[dir="rtl"] +[type="month"],[dir="rtl"] +[type="number"],[dir="rtl"] +[type="password"],[dir="rtl"] +[type="search"],[dir="rtl"] +[type="tel"],[dir="rtl"] +[type="text"],[dir="rtl"] +[type="time"],[dir="rtl"] +[type="url"],[dir="rtl"] +[type="week"],[dir="rtl"] +textarea { + padding-right: 24px; +} + +[dir="ltr"] [type="color"],[dir="ltr"] +[type="date"],[dir="ltr"] +[type="datetime-local"],[dir="ltr"] +[type="email"],[dir="ltr"] +[type="file"],[dir="ltr"] +[type="month"],[dir="ltr"] +[type="number"],[dir="ltr"] +[type="password"],[dir="ltr"] +[type="search"],[dir="ltr"] +[type="tel"],[dir="ltr"] +[type="text"],[dir="ltr"] +[type="time"],[dir="ltr"] +[type="url"],[dir="ltr"] +[type="week"],[dir="ltr"] +textarea { + padding-right: 20px; +} + +[dir="rtl"] [type="color"],[dir="rtl"] +[type="date"],[dir="rtl"] +[type="datetime-local"],[dir="rtl"] +[type="email"],[dir="rtl"] +[type="file"],[dir="rtl"] +[type="month"],[dir="rtl"] +[type="number"],[dir="rtl"] +[type="password"],[dir="rtl"] +[type="search"],[dir="rtl"] +[type="tel"],[dir="rtl"] +[type="text"],[dir="rtl"] +[type="time"],[dir="rtl"] +[type="url"],[dir="rtl"] +[type="week"],[dir="rtl"] +textarea { + padding-left: 20px; +} + +[dir="ltr"] [type="color"],[dir="ltr"] +[type="date"],[dir="ltr"] +[type="datetime-local"],[dir="ltr"] +[type="email"],[dir="ltr"] +[type="file"],[dir="ltr"] +[type="month"],[dir="ltr"] +[type="number"],[dir="ltr"] +[type="password"],[dir="ltr"] +[type="search"],[dir="ltr"] +[type="tel"],[dir="ltr"] +[type="text"],[dir="ltr"] +[type="time"],[dir="ltr"] +[type="url"],[dir="ltr"] +[type="week"],[dir="ltr"] +textarea { + border-top-left-radius: 0; +} + +[dir="rtl"] [type="color"],[dir="rtl"] +[type="date"],[dir="rtl"] +[type="datetime-local"],[dir="rtl"] +[type="email"],[dir="rtl"] +[type="file"],[dir="rtl"] +[type="month"],[dir="rtl"] +[type="number"],[dir="rtl"] +[type="password"],[dir="rtl"] +[type="search"],[dir="rtl"] +[type="tel"],[dir="rtl"] +[type="text"],[dir="rtl"] +[type="time"],[dir="rtl"] +[type="url"],[dir="rtl"] +[type="week"],[dir="rtl"] +textarea { + border-top-right-radius: 0; +} + +[dir="ltr"] [type="color"],[dir="ltr"] +[type="date"],[dir="ltr"] +[type="datetime-local"],[dir="ltr"] +[type="email"],[dir="ltr"] +[type="file"],[dir="ltr"] +[type="month"],[dir="ltr"] +[type="number"],[dir="ltr"] +[type="password"],[dir="ltr"] +[type="search"],[dir="ltr"] +[type="tel"],[dir="ltr"] +[type="text"],[dir="ltr"] +[type="time"],[dir="ltr"] +[type="url"],[dir="ltr"] +[type="week"],[dir="ltr"] +textarea { + border-top-right-radius: 2px; +} + +[dir="rtl"] [type="color"],[dir="rtl"] +[type="date"],[dir="rtl"] +[type="datetime-local"],[dir="rtl"] +[type="email"],[dir="rtl"] +[type="file"],[dir="rtl"] +[type="month"],[dir="rtl"] +[type="number"],[dir="rtl"] +[type="password"],[dir="rtl"] +[type="search"],[dir="rtl"] +[type="tel"],[dir="rtl"] +[type="text"],[dir="rtl"] +[type="time"],[dir="rtl"] +[type="url"],[dir="rtl"] +[type="week"],[dir="rtl"] +textarea { + border-top-left-radius: 2px; +} + +[dir="ltr"] [type="color"],[dir="ltr"] +[type="date"],[dir="ltr"] +[type="datetime-local"],[dir="ltr"] +[type="email"],[dir="ltr"] +[type="file"],[dir="ltr"] +[type="month"],[dir="ltr"] +[type="number"],[dir="ltr"] +[type="password"],[dir="ltr"] +[type="search"],[dir="ltr"] +[type="tel"],[dir="ltr"] +[type="text"],[dir="ltr"] +[type="time"],[dir="ltr"] +[type="url"],[dir="ltr"] +[type="week"],[dir="ltr"] +textarea { + border-bottom-left-radius: 0; +} + +[dir="rtl"] [type="color"],[dir="rtl"] +[type="date"],[dir="rtl"] +[type="datetime-local"],[dir="rtl"] +[type="email"],[dir="rtl"] +[type="file"],[dir="rtl"] +[type="month"],[dir="rtl"] +[type="number"],[dir="rtl"] +[type="password"],[dir="rtl"] +[type="search"],[dir="rtl"] +[type="tel"],[dir="rtl"] +[type="text"],[dir="rtl"] +[type="time"],[dir="rtl"] +[type="url"],[dir="rtl"] +[type="week"],[dir="rtl"] +textarea { + border-bottom-right-radius: 0; +} + +[dir="ltr"] [type="color"],[dir="ltr"] +[type="date"],[dir="ltr"] +[type="datetime-local"],[dir="ltr"] +[type="email"],[dir="ltr"] +[type="file"],[dir="ltr"] +[type="month"],[dir="ltr"] +[type="number"],[dir="ltr"] +[type="password"],[dir="ltr"] +[type="search"],[dir="ltr"] +[type="tel"],[dir="ltr"] +[type="text"],[dir="ltr"] +[type="time"],[dir="ltr"] +[type="url"],[dir="ltr"] +[type="week"],[dir="ltr"] +textarea { + border-bottom-right-radius: 2px; +} + +[dir="rtl"] [type="color"],[dir="rtl"] +[type="date"],[dir="rtl"] +[type="datetime-local"],[dir="rtl"] +[type="email"],[dir="rtl"] +[type="file"],[dir="rtl"] +[type="month"],[dir="rtl"] +[type="number"],[dir="rtl"] +[type="password"],[dir="rtl"] +[type="search"],[dir="rtl"] +[type="tel"],[dir="rtl"] +[type="text"],[dir="rtl"] +[type="time"],[dir="rtl"] +[type="url"],[dir="rtl"] +[type="week"],[dir="rtl"] +textarea { + border-bottom-left-radius: 2px; +} + [type="color"], [type="date"], [type="datetime-local"], @@ -93,10 +309,16 @@ textarea { max-width: 100%; min-height: 54px; + padding-top: 13px; + padding-bottom: 13px; color: #313637; + border-width: 2px 0; + border-style: solid; + border-color: transparent; outline: 1px solid transparent; + background: linear-gradient(to right, #7e96a7 6px, transparent 6px, transparent 100%) #f7f9fa; /* LTR */ font-family: inherit; font-size: 1rem; line-height: 1.5rem; @@ -105,40 +327,18 @@ transparent; appearance: none; } -[dir] [type="color"], [dir] [type="date"], [dir] [type="datetime-local"], [dir] [type="email"], [dir] [type="file"], [dir] [type="month"], [dir] [type="number"], [dir] [type="password"], [dir] [type="search"], [dir] [type="tel"], [dir] [type="text"], [dir] [type="time"], [dir] [type="url"], [dir] [type="week"], [dir] textarea { - border-width: 2px 0; - border-style: solid; - border-color: transparent; -} - -[dir=ltr] [type="color"], [dir=ltr] [type="date"], [dir=ltr] [type="datetime-local"], [dir=ltr] [type="email"], [dir=ltr] [type="file"], [dir=ltr] [type="month"], [dir=ltr] [type="number"], [dir=ltr] [type="password"], [dir=ltr] [type="search"], [dir=ltr] [type="tel"], [dir=ltr] [type="text"], [dir=ltr] [type="time"], [dir=ltr] [type="url"], [dir=ltr] [type="week"], [dir=ltr] textarea { - padding: - 13px - 20px - 13px - 24px; - border-radius: 0 2px 2px 0; - background: linear-gradient(to right, #7e96a7 6px, transparent 6px, transparent 100%) #f7f9fa; -} - -[dir=rtl] [type="color"], [dir=rtl] [type="date"], [dir=rtl] [type="datetime-local"], [dir=rtl] [type="email"], [dir=rtl] [type="file"], [dir=rtl] [type="month"], [dir=rtl] [type="number"], [dir=rtl] [type="password"], [dir=rtl] [type="search"], [dir=rtl] [type="tel"], [dir=rtl] [type="text"], [dir=rtl] [type="time"], [dir=rtl] [type="url"], [dir=rtl] [type="week"], [dir=rtl] textarea { - padding: - 13px - 24px - 13px - 20px; - border-radius: 2px 0 0 2px; - background: linear-gradient(to left, #7e96a7 6px, transparent 6px, transparent 100%) #f7f9fa; -} +[dir="rtl"] [type="color"], [dir="rtl"] [type="date"], [dir="rtl"] [type="datetime-local"], [dir="rtl"] [type="email"], [dir="rtl"] [type="file"], [dir="rtl"] [type="month"], [dir="rtl"] [type="number"], [dir="rtl"] [type="password"], [dir="rtl"] [type="search"], [dir="rtl"] [type="tel"], [dir="rtl"] [type="text"], [dir="rtl"] [type="time"], [dir="rtl"] [type="url"], [dir="rtl"] [type="week"], [dir="rtl"] textarea { + background: linear-gradient(to left, #7e96a7 6px, transparent 6px, transparent 100%) #f7f9fa; + } [type="color"]:focus, [type="date"]:focus, [type="datetime-local"]:focus, [type="email"]:focus, [type="file"]:focus, [type="month"]:focus, [type="number"]:focus, [type="password"]:focus, [type="search"]:focus, [type="tel"]:focus, [type="text"]:focus, [type="time"]:focus, [type="url"]:focus, [type="week"]:focus, textarea:focus { + border-color: #7e96a7; outline: 6px dashed transparent; - } - -[dir] [type="color"]:focus, [dir] [type="date"]:focus, [dir] [type="datetime-local"]:focus, [dir] [type="email"]:focus, [dir] [type="file"]:focus, [dir] [type="month"]:focus, [dir] [type="number"]:focus, [dir] [type="password"]:focus, [dir] [type="search"]:focus, [dir] [type="tel"]:focus, [dir] [type="text"]:focus, [dir] [type="time"]:focus, [dir] [type="url"]:focus, [dir] [type="week"]:focus, [dir] textarea:focus { - border-color: #7e96a7; + background: /* LTR */ + linear-gradient(to right, #7e96a7 6px, transparent 6px, transparent 100%), + linear-gradient(to left, #7e96a7 2px, transparent 2px, transparent 100%) #f7f9fa; box-shadow: 0 0 0 @@ -157,13 +357,11 @@ transparent; rgba(83, 176, 235, 0.25); } -[dir=ltr] [type="color"]:focus, [dir=ltr] [type="date"]:focus, [dir=ltr] [type="datetime-local"]:focus, [dir=ltr] [type="email"]:focus, [dir=ltr] [type="file"]:focus, [dir=ltr] [type="month"]:focus, [dir=ltr] [type="number"]:focus, [dir=ltr] [type="password"]:focus, [dir=ltr] [type="search"]:focus, [dir=ltr] [type="tel"]:focus, [dir=ltr] [type="text"]:focus, [dir=ltr] [type="time"]:focus, [dir=ltr] [type="url"]:focus, [dir=ltr] [type="week"]:focus, [dir=ltr] textarea:focus { - background: linear-gradient(to right, #7e96a7 6px, transparent 6px, transparent 100%), linear-gradient(to left, #7e96a7 2px, transparent 2px, transparent 100%) #f7f9fa; - } - -[dir=rtl] [type="color"]:focus, [dir=rtl] [type="date"]:focus, [dir=rtl] [type="datetime-local"]:focus, [dir=rtl] [type="email"]:focus, [dir=rtl] [type="file"]:focus, [dir=rtl] [type="month"]:focus, [dir=rtl] [type="number"]:focus, [dir=rtl] [type="password"]:focus, [dir=rtl] [type="search"]:focus, [dir=rtl] [type="tel"]:focus, [dir=rtl] [type="text"]:focus, [dir=rtl] [type="time"]:focus, [dir=rtl] [type="url"]:focus, [dir=rtl] [type="week"]:focus, [dir=rtl] textarea:focus { - background: linear-gradient(to left, #7e96a7 6px, transparent 6px, transparent 100%), linear-gradient(to right, #7e96a7 2px, transparent 2px, transparent 100%) #f7f9fa; - } +[dir="rtl"] [type="color"]:focus, [dir="rtl"] [type="date"]:focus, [dir="rtl"] [type="datetime-local"]:focus, [dir="rtl"] [type="email"]:focus, [dir="rtl"] [type="file"]:focus, [dir="rtl"] [type="month"]:focus, [dir="rtl"] [type="number"]:focus, [dir="rtl"] [type="password"]:focus, [dir="rtl"] [type="search"]:focus, [dir="rtl"] [type="tel"]:focus, [dir="rtl"] [type="text"]:focus, [dir="rtl"] [type="time"]:focus, [dir="rtl"] [type="url"]:focus, [dir="rtl"] [type="week"]:focus, [dir="rtl"] textarea:focus { + background: + linear-gradient(to left, #7e96a7 6px, transparent 6px, transparent 100%), + linear-gradient(to right, #7e96a7 2px, transparent 2px, transparent 100%) #f7f9fa; + } @supports (outline-style: double) { @@ -172,17 +370,18 @@ rgba(83, 176, 235, 0.25); } } -[dir] [type="color"]:hover, [dir] [type="date"]:hover, [dir] [type="datetime-local"]:hover, [dir] [type="email"]:hover, [dir] [type="file"]:hover, [dir] [type="month"]:hover, [dir] [type="number"]:hover, [dir] [type="password"]:hover, [dir] [type="search"]:hover, [dir] [type="tel"]:hover, [dir] [type="text"]:hover, [dir] [type="time"]:hover, [dir] [type="url"]:hover, [dir] [type="week"]:hover, [dir] textarea:hover { +[type="color"]:hover, [type="date"]:hover, [type="datetime-local"]:hover, [type="email"]:hover, [type="file"]:hover, [type="month"]:hover, [type="number"]:hover, [type="password"]:hover, [type="search"]:hover, [type="tel"]:hover, [type="text"]:hover, [type="time"]:hover, [type="url"]:hover, [type="week"]:hover, textarea:hover { border-color: #53b0eb; + background: /* LTR */ + linear-gradient(to right, #53b0eb 6px, transparent 6px, transparent 100%), + linear-gradient(to left, #53b0eb 2px, transparent 2px, transparent 100%) #f7f9fa; } -[dir=ltr] [type="color"]:hover, [dir=ltr] [type="date"]:hover, [dir=ltr] [type="datetime-local"]:hover, [dir=ltr] [type="email"]:hover, [dir=ltr] [type="file"]:hover, [dir=ltr] [type="month"]:hover, [dir=ltr] [type="number"]:hover, [dir=ltr] [type="password"]:hover, [dir=ltr] [type="search"]:hover, [dir=ltr] [type="tel"]:hover, [dir=ltr] [type="text"]:hover, [dir=ltr] [type="time"]:hover, [dir=ltr] [type="url"]:hover, [dir=ltr] [type="week"]:hover, [dir=ltr] textarea:hover { - background: linear-gradient(to right, #53b0eb 6px, transparent 6px, transparent 100%), linear-gradient(to left, #53b0eb 2px, transparent 2px, transparent 100%) #f7f9fa; - } - -[dir=rtl] [type="color"]:hover, [dir=rtl] [type="date"]:hover, [dir=rtl] [type="datetime-local"]:hover, [dir=rtl] [type="email"]:hover, [dir=rtl] [type="file"]:hover, [dir=rtl] [type="month"]:hover, [dir=rtl] [type="number"]:hover, [dir=rtl] [type="password"]:hover, [dir=rtl] [type="search"]:hover, [dir=rtl] [type="tel"]:hover, [dir=rtl] [type="text"]:hover, [dir=rtl] [type="time"]:hover, [dir=rtl] [type="url"]:hover, [dir=rtl] [type="week"]:hover, [dir=rtl] textarea:hover { - background: linear-gradient(to left, #53b0eb 6px, transparent 6px, transparent 100%), linear-gradient(to right, #53b0eb 2px, transparent 2px, transparent 100%) #f7f9fa; - } +[dir="rtl"] [type="color"]:hover, [dir="rtl"] [type="date"]:hover, [dir="rtl"] [type="datetime-local"]:hover, [dir="rtl"] [type="email"]:hover, [dir="rtl"] [type="file"]:hover, [dir="rtl"] [type="month"]:hover, [dir="rtl"] [type="number"]:hover, [dir="rtl"] [type="password"]:hover, [dir="rtl"] [type="search"]:hover, [dir="rtl"] [type="tel"]:hover, [dir="rtl"] [type="text"]:hover, [dir="rtl"] [type="time"]:hover, [dir="rtl"] [type="url"]:hover, [dir="rtl"] [type="week"]:hover, [dir="rtl"] textarea:hover { + background: + linear-gradient(to left, #53b0eb 6px, transparent 6px, transparent 100%), + linear-gradient(to right, #53b0eb 2px, transparent 2px, transparent 100%) #f7f9fa; + } [type="color"]::-ms-clear, [type="date"]::-ms-clear, [type="datetime-local"]::-ms-clear, [type="email"]::-ms-clear, [type="file"]::-ms-clear, [type="month"]::-ms-clear, [type="number"]::-ms-clear, [type="password"]::-ms-clear, [type="search"]::-ms-clear, [type="tel"]::-ms-clear, [type="text"]::-ms-clear, [type="time"]::-ms-clear, [type="url"]::-ms-clear, [type="week"]::-ms-clear, textarea::-ms-clear { display: none; @@ -190,33 +389,30 @@ rgba(83, 176, 235, 0.25); [type="color"][disabled], [type="date"][disabled], [type="datetime-local"][disabled], [type="email"][disabled], [type="file"][disabled], [type="month"][disabled], [type="number"][disabled], [type="password"][disabled], [type="search"][disabled], [type="tel"][disabled], [type="text"][disabled], [type="time"][disabled], [type="url"][disabled], [type="week"][disabled], textarea[disabled] { color: #7e96a7; - } - -[dir] [type="color"][disabled], [dir] [type="date"][disabled], [dir] [type="datetime-local"][disabled], [dir] [type="email"][disabled], [dir] [type="file"][disabled], [dir] [type="month"][disabled], [dir] [type="number"][disabled], [dir] [type="password"][disabled], [dir] [type="search"][disabled], [dir] [type="tel"][disabled], [dir] [type="text"][disabled], [dir] [type="time"][disabled], [dir] [type="url"][disabled], [dir] [type="week"][disabled], [dir] textarea[disabled] { border-color: transparent; + background: linear-gradient(to right, #d7e1e8 6px, transparent 6px, transparent 100%) #f7f9fa; } -[dir=ltr] [type="color"][disabled], [dir=ltr] [type="date"][disabled], [dir=ltr] [type="datetime-local"][disabled], [dir=ltr] [type="email"][disabled], [dir=ltr] [type="file"][disabled], [dir=ltr] [type="month"][disabled], [dir=ltr] [type="number"][disabled], [dir=ltr] [type="password"][disabled], [dir=ltr] [type="search"][disabled], [dir=ltr] [type="tel"][disabled], [dir=ltr] [type="text"][disabled], [dir=ltr] [type="time"][disabled], [dir=ltr] [type="url"][disabled], [dir=ltr] [type="week"][disabled], [dir=ltr] textarea[disabled] { - background: linear-gradient(to right, #d7e1e8 6px, transparent 6px, transparent 100%) #f7f9fa; - } +/* LTR */ -[dir=rtl] [type="color"][disabled], [dir=rtl] [type="date"][disabled], [dir=rtl] [type="datetime-local"][disabled], [dir=rtl] [type="email"][disabled], [dir=rtl] [type="file"][disabled], [dir=rtl] [type="month"][disabled], [dir=rtl] [type="number"][disabled], [dir=rtl] [type="password"][disabled], [dir=rtl] [type="search"][disabled], [dir=rtl] [type="tel"][disabled], [dir=rtl] [type="text"][disabled], [dir=rtl] [type="time"][disabled], [dir=rtl] [type="url"][disabled], [dir=rtl] [type="week"][disabled], [dir=rtl] textarea[disabled] { - background: linear-gradient(to left, #d7e1e8 6px, transparent 6px, transparent 100%) #f7f9fa; - } +[dir="rtl"] [type="color"][disabled], [dir="rtl"] [type="date"][disabled], [dir="rtl"] [type="datetime-local"][disabled], [dir="rtl"] [type="email"][disabled], [dir="rtl"] [type="file"][disabled], [dir="rtl"] [type="month"][disabled], [dir="rtl"] [type="number"][disabled], [dir="rtl"] [type="password"][disabled], [dir="rtl"] [type="search"][disabled], [dir="rtl"] [type="tel"][disabled], [dir="rtl"] [type="text"][disabled], [dir="rtl"] [type="time"][disabled], [dir="rtl"] [type="url"][disabled], [dir="rtl"] [type="week"][disabled], [dir="rtl"] textarea[disabled] { + background: linear-gradient(to left, #d7e1e8 6px, transparent 6px, transparent 100%) #f7f9fa; + } -[dir] [type="color"].error, [dir] [type="date"].error, [dir] [type="datetime-local"].error, [dir] [type="email"].error, [dir] [type="file"].error, [dir] [type="month"].error, [dir] [type="number"].error, [dir] [type="password"].error, [dir] [type="search"].error, [dir] [type="tel"].error, [dir] [type="text"].error, [dir] [type="time"].error, [dir] [type="url"].error, [dir] [type="week"].error, [dir] textarea.error { +[type="color"].error, [type="date"].error, [type="datetime-local"].error, [type="email"].error, [type="file"].error, [type="month"].error, [type="number"].error, [type="password"].error, [type="search"].error, [type="tel"].error, [type="text"].error, [type="time"].error, [type="url"].error, [type="week"].error, textarea.error { border-color: #e33f1e; + background: /* LTR */ + linear-gradient(to right, #e33f1e 6px, transparent 6px, transparent 100%), + linear-gradient(to left, #e33f1e 2px, transparent 2px, transparent 100%) #f7f9fa; } -[dir=ltr] [type="color"].error, [dir=ltr] [type="date"].error, [dir=ltr] [type="datetime-local"].error, [dir=ltr] [type="email"].error, [dir=ltr] [type="file"].error, [dir=ltr] [type="month"].error, [dir=ltr] [type="number"].error, [dir=ltr] [type="password"].error, [dir=ltr] [type="search"].error, [dir=ltr] [type="tel"].error, [dir=ltr] [type="text"].error, [dir=ltr] [type="time"].error, [dir=ltr] [type="url"].error, [dir=ltr] [type="week"].error, [dir=ltr] textarea.error { - background: linear-gradient(to right, #e33f1e 6px, transparent 6px, transparent 100%), linear-gradient(to left, #e33f1e 2px, transparent 2px, transparent 100%) #f7f9fa; - } - -[dir=rtl] [type="color"].error, [dir=rtl] [type="date"].error, [dir=rtl] [type="datetime-local"].error, [dir=rtl] [type="email"].error, [dir=rtl] [type="file"].error, [dir=rtl] [type="month"].error, [dir=rtl] [type="number"].error, [dir=rtl] [type="password"].error, [dir=rtl] [type="search"].error, [dir=rtl] [type="tel"].error, [dir=rtl] [type="text"].error, [dir=rtl] [type="time"].error, [dir=rtl] [type="url"].error, [dir=rtl] [type="week"].error, [dir=rtl] textarea.error { - background: linear-gradient(to left, #e33f1e 6px, transparent 6px, transparent 100%), linear-gradient(to right, #e33f1e 2px, transparent 2px, transparent 100%) #f7f9fa; - } +[dir="rtl"] [type="color"].error, [dir="rtl"] [type="date"].error, [dir="rtl"] [type="datetime-local"].error, [dir="rtl"] [type="email"].error, [dir="rtl"] [type="file"].error, [dir="rtl"] [type="month"].error, [dir="rtl"] [type="number"].error, [dir="rtl"] [type="password"].error, [dir="rtl"] [type="search"].error, [dir="rtl"] [type="tel"].error, [dir="rtl"] [type="text"].error, [dir="rtl"] [type="time"].error, [dir="rtl"] [type="url"].error, [dir="rtl"] [type="week"].error, [dir="rtl"] textarea.error { + background: + linear-gradient(to left, #e33f1e 6px, transparent 6px, transparent 100%), + linear-gradient(to right, #e33f1e 2px, transparent 2px, transparent 100%) #f7f9fa; + } -[dir] [type="color"].error:focus, [dir] [type="date"].error:focus, [dir] [type="datetime-local"].error:focus, [dir] [type="email"].error:focus, [dir] [type="file"].error:focus, [dir] [type="month"].error:focus, [dir] [type="number"].error:focus, [dir] [type="password"].error:focus, [dir] [type="search"].error:focus, [dir] [type="tel"].error:focus, [dir] [type="text"].error:focus, [dir] [type="time"].error:focus, [dir] [type="url"].error:focus, [dir] [type="week"].error:focus, [dir] textarea.error:focus { +[type="color"].error:focus, [type="date"].error:focus, [type="datetime-local"].error:focus, [type="email"].error:focus, [type="file"].error:focus, [type="month"].error:focus, [type="number"].error:focus, [type="password"].error:focus, [type="search"].error:focus, [type="tel"].error:focus, [type="text"].error:focus, [type="time"].error:focus, [type="url"].error:focus, [type="week"].error:focus, textarea.error:focus { box-shadow: 0 0 0 @@ -235,20 +431,47 @@ rgba(83, 176, 235, 0.25); rgba(83, 176, 235, 0.25); } +[dir="ltr"] [type="color"].form-element--small,[dir="ltr"] [type="date"].form-element--small,[dir="ltr"] [type="datetime-local"].form-element--small,[dir="ltr"] [type="email"].form-element--small,[dir="ltr"] [type="file"].form-element--small,[dir="ltr"] [type="month"].form-element--small,[dir="ltr"] [type="number"].form-element--small,[dir="ltr"] [type="password"].form-element--small,[dir="ltr"] [type="search"].form-element--small,[dir="ltr"] [type="tel"].form-element--small,[dir="ltr"] [type="text"].form-element--small,[dir="ltr"] [type="time"].form-element--small,[dir="ltr"] [type="url"].form-element--small,[dir="ltr"] [type="week"].form-element--small,[dir="ltr"] textarea.form-element--small { + padding-left: 19.5px; +} + +[dir="rtl"] [type="color"].form-element--small,[dir="rtl"] [type="date"].form-element--small,[dir="rtl"] [type="datetime-local"].form-element--small,[dir="rtl"] [type="email"].form-element--small,[dir="rtl"] [type="file"].form-element--small,[dir="rtl"] [type="month"].form-element--small,[dir="rtl"] [type="number"].form-element--small,[dir="rtl"] [type="password"].form-element--small,[dir="rtl"] [type="search"].form-element--small,[dir="rtl"] [type="tel"].form-element--small,[dir="rtl"] [type="text"].form-element--small,[dir="rtl"] [type="time"].form-element--small,[dir="rtl"] [type="url"].form-element--small,[dir="rtl"] [type="week"].form-element--small,[dir="rtl"] textarea.form-element--small { + padding-right: 19.5px; +} + +[dir="ltr"] [type="color"].form-element--small,[dir="ltr"] [type="date"].form-element--small,[dir="ltr"] [type="datetime-local"].form-element--small,[dir="ltr"] [type="email"].form-element--small,[dir="ltr"] [type="file"].form-element--small,[dir="ltr"] [type="month"].form-element--small,[dir="ltr"] [type="number"].form-element--small,[dir="ltr"] [type="password"].form-element--small,[dir="ltr"] [type="search"].form-element--small,[dir="ltr"] [type="tel"].form-element--small,[dir="ltr"] [type="text"].form-element--small,[dir="ltr"] [type="time"].form-element--small,[dir="ltr"] [type="url"].form-element--small,[dir="ltr"] [type="week"].form-element--small,[dir="ltr"] textarea.form-element--small { + padding-right: 15.5px; +} + +[dir="rtl"] [type="color"].form-element--small,[dir="rtl"] [type="date"].form-element--small,[dir="rtl"] [type="datetime-local"].form-element--small,[dir="rtl"] [type="email"].form-element--small,[dir="rtl"] [type="file"].form-element--small,[dir="rtl"] [type="month"].form-element--small,[dir="rtl"] [type="number"].form-element--small,[dir="rtl"] [type="password"].form-element--small,[dir="rtl"] [type="search"].form-element--small,[dir="rtl"] [type="tel"].form-element--small,[dir="rtl"] [type="text"].form-element--small,[dir="rtl"] [type="time"].form-element--small,[dir="rtl"] [type="url"].form-element--small,[dir="rtl"] [type="week"].form-element--small,[dir="rtl"] textarea.form-element--small { + padding-left: 15.5px; +} + [type="color"].form-element--small, [type="date"].form-element--small, [type="datetime-local"].form-element--small, [type="email"].form-element--small, [type="file"].form-element--small, [type="month"].form-element--small, [type="number"].form-element--small, [type="password"].form-element--small, [type="search"].form-element--small, [type="tel"].form-element--small, [type="text"].form-element--small, [type="time"].form-element--small, [type="url"].form-element--small, [type="week"].form-element--small, textarea.form-element--small { min-height: 45px; + padding-top: 8.5px; + padding-bottom: 8.5px; } -[dir=ltr] [type="color"].form-element--small, [dir=ltr] [type="date"].form-element--small, [dir=ltr] [type="datetime-local"].form-element--small, [dir=ltr] [type="email"].form-element--small, [dir=ltr] [type="file"].form-element--small, [dir=ltr] [type="month"].form-element--small, [dir=ltr] [type="number"].form-element--small, [dir=ltr] [type="password"].form-element--small, [dir=ltr] [type="search"].form-element--small, [dir=ltr] [type="tel"].form-element--small, [dir=ltr] [type="text"].form-element--small, [dir=ltr] [type="time"].form-element--small, [dir=ltr] [type="url"].form-element--small, [dir=ltr] [type="week"].form-element--small, [dir=ltr] textarea.form-element--small { - padding: 8.5px 15.5px 8.5px 19.5px; - } +/* Ensure that date field isn't larger than other fields. */ -[dir=rtl] [type="color"].form-element--small, [dir=rtl] [type="date"].form-element--small, [dir=rtl] [type="datetime-local"].form-element--small, [dir=rtl] [type="email"].form-element--small, [dir=rtl] [type="file"].form-element--small, [dir=rtl] [type="month"].form-element--small, [dir=rtl] [type="number"].form-element--small, [dir=rtl] [type="password"].form-element--small, [dir=rtl] [type="search"].form-element--small, [dir=rtl] [type="tel"].form-element--small, [dir=rtl] [type="text"].form-element--small, [dir=rtl] [type="time"].form-element--small, [dir=rtl] [type="url"].form-element--small, [dir=rtl] [type="week"].form-element--small, [dir=rtl] textarea.form-element--small { - padding: 8.5px 19.5px 8.5px 15.5px; - } +[dir="ltr"] [type="date"]::-webkit-datetime-edit-fields-wrapper { + padding-left: 0; +} -/* Ensure that date field isn't larger than other fields. */ +[dir="rtl"] [type="date"]::-webkit-datetime-edit-fields-wrapper { + padding-right: 0; +} + +[dir="ltr"] [type="date"]::-webkit-datetime-edit-fields-wrapper { + padding-right: 0; +} + +[dir="rtl"] [type="date"]::-webkit-datetime-edit-fields-wrapper { + padding-left: 0; +} -[dir] [type="date"]::-webkit-datetime-edit-fields-wrapper { - padding: 0; +[type="date"]::-webkit-datetime-edit-fields-wrapper { + padding-top: 0; + padding-bottom: 0; } diff --git a/css/components/form-text.pcss.css b/css/components/form-text.pcss.css index c020413..2dde759 100644 --- a/css/components/form-text.pcss.css +++ b/css/components/form-text.pcss.css @@ -22,29 +22,42 @@ textarea { max-width: 100%; min-height: var(--sp3); - padding: - calc((var(--sp3) - (var(--font-size-base) * 1.5) - (var(--form-element-border-size-base) * 2)) / 2) - calc(var(--sp1) + var(--form-element-border-size-base)) - calc((var(--sp3) - (var(--font-size-base) * 1.5) - (var(--form-element-border-size-base) * 2)) / 2) - calc(var(--sp1) + var(--form-element-border-size-left)); + padding-block: calc((var(--sp3) - (var(--font-size-base) * 1.5) - (var(--form-element-border-size-base) * 2)) / 2); + padding-inline-start: calc(var(--sp1) + var(--form-element-border-size-left)); + padding-inline-end: calc(var(--sp1) + var(--form-element-border-size-base)); color: var(--color--gray-10); border-width: var(--form-element-border-size-base) 0; border-style: solid; border-color: transparent; - border-radius: 0 var(--border-radius-base) var(--border-radius-base) 0; + border-start-start-radius: 0; + border-start-end-radius: var(--border-radius-base); + border-end-start-radius: 0; + border-end-end-radius: var(--border-radius-base); outline: var(--outline--thin); - background: linear-gradient(to right, var(--color--gray-30) var(--form-element-border-size-left), transparent var(--form-element-border-size-left), transparent 100%) var(--color--gray-95); + background: linear-gradient(to right, var(--color--gray-30) var(--form-element-border-size-left), transparent var(--form-element-border-size-left), transparent 100%) var(--color--gray-95); /* LTR */ font-family: inherit; font-size: var(--font-size-base); line-height: calc(var(--font-size-base) * 1.5); appearance: none; + [dir="rtl"] & { + background: linear-gradient(to left, var(--color--gray-30) var(--form-element-border-size-left), transparent var(--form-element-border-size-left), transparent 100%) var(--color--gray-95); + } + &:focus { border-color: var(--color--gray-30); outline: var(--outline--thick); - background: linear-gradient(to right, var(--color--gray-30) var(--form-element-border-size-left), transparent var(--form-element-border-size-left), transparent 100%), linear-gradient(to left, var(--color--gray-30) var(--form-element-border-size-base), transparent var(--form-element-border-size-base), transparent 100%) var(--color--gray-95); + background: /* LTR */ + linear-gradient(to right, var(--color--gray-30) var(--form-element-border-size-left), transparent var(--form-element-border-size-left), transparent 100%), + linear-gradient(to left, var(--color--gray-30) var(--form-element-border-size-base), transparent var(--form-element-border-size-base), transparent 100%) var(--color--gray-95); box-shadow: var(--shadow-focusable); + [dir="rtl"] & { + background: + linear-gradient(to left, var(--color--gray-30) var(--form-element-border-size-left), transparent var(--form-element-border-size-left), transparent 100%), + linear-gradient(to right, var(--color--gray-30) var(--form-element-border-size-base), transparent var(--form-element-border-size-base), transparent 100%) var(--color--gray-95); + } + @supports (outline-style: double) { outline-style: double; } @@ -52,7 +65,15 @@ textarea { &:hover { border-color: var(--color--blue-70); - background: linear-gradient(to right, var(--color--blue-70) var(--form-element-border-size-left), transparent var(--form-element-border-size-left), transparent 100%), linear-gradient(to left, var(--color--blue-70) var(--form-element-border-size-base), transparent var(--form-element-border-size-base), transparent 100%) var(--color--gray-95); + background: /* LTR */ + linear-gradient(to right, var(--color--blue-70) var(--form-element-border-size-left), transparent var(--form-element-border-size-left), transparent 100%), + linear-gradient(to left, var(--color--blue-70) var(--form-element-border-size-base), transparent var(--form-element-border-size-base), transparent 100%) var(--color--gray-95); + + [dir="rtl"] & { + background: + linear-gradient(to left, var(--color--blue-70) var(--form-element-border-size-left), transparent var(--form-element-border-size-left), transparent 100%), + linear-gradient(to right, var(--color--blue-70) var(--form-element-border-size-base), transparent var(--form-element-border-size-base), transparent 100%) var(--color--gray-95); + } } &::-ms-clear { @@ -62,12 +83,24 @@ textarea { &[disabled] { color: var(--color--gray-30); border-color: transparent; - background: linear-gradient(to right, var(--color--gray-70) var(--form-element-border-size-left), transparent var(--form-element-border-size-left), transparent 100%) var(--color--gray-95); + background: linear-gradient(to right, var(--color--gray-70) var(--form-element-border-size-left), transparent var(--form-element-border-size-left), transparent 100%) var(--color--gray-95); /* LTR */ + + [dir="rtl"] & { + background: linear-gradient(to left, var(--color--gray-70) var(--form-element-border-size-left), transparent var(--form-element-border-size-left), transparent 100%) var(--color--gray-95); + } } &.error { border-color: var(--color--red); - background: linear-gradient(to right, var(--color--red) var(--form-element-border-size-left), transparent var(--form-element-border-size-left), transparent 100%), linear-gradient(to left, var(--color--red) var(--form-element-border-size-base), transparent var(--form-element-border-size-base), transparent 100%) var(--color--gray-95); + background: /* LTR */ + linear-gradient(to right, var(--color--red) var(--form-element-border-size-left), transparent var(--form-element-border-size-left), transparent 100%), + linear-gradient(to left, var(--color--red) var(--form-element-border-size-base), transparent var(--form-element-border-size-base), transparent 100%) var(--color--gray-95); + + [dir="rtl"] & { + background: + linear-gradient(to left, var(--color--red) var(--form-element-border-size-left), transparent var(--form-element-border-size-left), transparent 100%), + linear-gradient(to right, var(--color--red) var(--form-element-border-size-base), transparent var(--form-element-border-size-base), transparent 100%) var(--color--gray-95); + } &:focus { box-shadow: var(--shadow-focusable); @@ -76,13 +109,17 @@ textarea { &.form-element--small { min-height: var(--sp2-5); - padding: calc((var(--sp2-5) - (var(--font-size-base) * 1.5) - (var(--form-element-border-size-base) * 2)) / 2) calc(var(--sp0-75) + var(--form-element-border-size-base)) calc((var(--sp2-5) - (var(--font-size-base) * 1.5) - (var(--form-element-border-size-base) * 2)) / 2) calc(var(--sp0-75) + var(--form-element-border-size-left)); + padding-block: calc((var(--sp2-5) - (var(--font-size-base) * 1.5) - (var(--form-element-border-size-base) * 2)) / 2); + padding-inline-start: calc(var(--sp0-75) + var(--form-element-border-size-left)); + padding-inline-end: calc(var(--sp0-75) + var(--form-element-border-size-base)); } } [type="date"] { /* Ensure that date field isn't larger than other fields. */ &::-webkit-datetime-edit-fields-wrapper { - padding: 0; + padding-block: 0; + padding-inline-start: 0; + padding-inline-end: 0; } } diff --git a/css/components/form.css b/css/components/form.css index a1b974d..06005f5 100644 --- a/css/components/form.css +++ b/css/components/form.css @@ -94,29 +94,27 @@ * General form item. */ -[dir] .form-item { +.form-item { margin-top: 18px; margin-bottom: 18px; } .form-item__label--multiple-value-form { + margin-top: 0; + margin-bottom: 0; font-size: inherit; font-weight: inherit; line-height: inherit; } -[dir] .form-item__label--multiple-value-form { - margin-top: 0; - margin-bottom: 0; -} - /** * When a table row or a container-inline has a single form item, prevent it * from adding unnecessary extra spacing. * If it has multiple form items, allow spacing between them, overriding Classy. */ -[dir] tr .form-item, [dir] .container-inline .form-item { +tr .form-item, +.container-inline .form-item { margin-top: 9px; margin-bottom: 9px; } @@ -127,35 +125,29 @@ .form-item__label { display: table; + margin-top: 9px; + margin-bottom: 9px; font-size: 1.125rem; font-weight: 700; } -[dir] .form-item__label { - margin-top: 9px; - margin-bottom: 9px; +[dir="ltr"] .container-inline .form-item__label { + margin-right: 1em; } -[dir=ltr] .container-inline .form-item__label { - margin-right: 1em; - } - -[dir=rtl] .container-inline .form-item__label { +[dir="rtl"] .container-inline .form-item__label { margin-left: 1em; - } +} .form-item__label--multiple-value-form { + margin-top: 0; + margin-bottom: 0; font-size: inherit; font-weight: inherit; line-height: inherit; } -[dir] .form-item__label--multiple-value-form { - margin-top: 0; - margin-bottom: 0; -} - -[dir] .form-item__label[for] { +.form-item__label[for] { cursor: pointer; } @@ -167,11 +159,8 @@ /* Label states. */ .form-item__label.is-disabled { - color: #afb8be; -} - -[dir] .form-item__label.is-disabled { cursor: default; + color: #afb8be; } /* Form required star icon */ @@ -182,30 +171,21 @@ display: inline-block; width: 0.5rem; height: 0.5rem; + margin-left: 0.3em; + margin-right: 0.3em; content: ""; vertical-align: text-top; /* Use a background image to prevent screen readers from announcing the text. */ -} - -[dir] .form-item__label.form-required::after, [dir] .fieldset__label.form-required::after, [dir] .required-mark::after { background-image: url("data:image/svg+xml,%3Csvg height='16' width='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m0 7.562 1.114-3.438c2.565.906 4.43 1.688 5.59 2.35-.306-2.921-.467-4.93-.484-6.027h3.511c-.05 1.597-.234 3.6-.558 6.003 1.664-.838 3.566-1.613 5.714-2.325l1.113 3.437c-2.05.678-4.06 1.131-6.028 1.356.984.856 2.372 2.381 4.166 4.575l-2.906 2.059c-.935-1.274-2.041-3.009-3.316-5.206-1.194 2.275-2.244 4.013-3.147 5.206l-2.856-2.059c1.872-2.307 3.211-3.832 4.017-4.575-2.081-.402-4.058-.856-5.93-1.356' fill='%232494DB'/%3E%3C/svg%3E%0A"); background-repeat: no-repeat; background-size: 0.5rem 0.5rem; } -[dir=ltr] .form-item__label.form-required::after, [dir=ltr] .fieldset__label.form-required::after, [dir=ltr] .required-mark::after { - margin-right: 0.3em; - margin-left: 0.3em; -} - -[dir=rtl] .form-item__label.form-required::after, [dir=rtl] .fieldset__label.form-required::after, [dir=rtl] .required-mark::after { - margin-left: 0.3em; - margin-right: 0.3em; -} - @media screen and (-ms-high-contrast: active) { -[dir] .form-item__label.form-required::after, [dir] .fieldset__label.form-required::after, [dir] .required-mark::after { +.form-item__label.form-required::after, +.fieldset__label.form-required::after, +.required-mark::after { background-image: url("data:image/svg+xml,%3Csvg height='16' width='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m0 7.562 1.114-3.438c2.565.906 4.43 1.688 5.59 2.35-.306-2.921-.467-4.93-.484-6.027h3.511c-.05 1.597-.234 3.6-.558 6.003 1.664-.838 3.566-1.613 5.714-2.325l1.113 3.437c-2.05.678-4.06 1.131-6.028 1.356.984.856 2.372 2.381 4.166 4.575l-2.906 2.059c-.935-1.274-2.041-3.009-3.316-5.206-1.194 2.275-2.244 4.013-3.147 5.206l-2.856-2.059c1.872-2.307 3.211-3.832 4.017-4.575-2.081-.402-4.058-.856-5.93-1.356' fill='%23ffffff'/%3E%3C/svg%3E%0A") } } @@ -215,16 +195,13 @@ */ .form-item__description { - font-size: 0.875rem; - line-height: 1.125rem; -} - -[dir] .form-item__description { margin-top: 9px; margin-bottom: 9px; + font-size: 0.875rem; + line-height: 1.125rem; } -[dir] .field-multiple-table + .form-item__description { +.field-multiple-table + .form-item__description { margin-top: 0; } @@ -232,33 +209,33 @@ * Error message (Inline form errors). */ -.form-item--error-message { - color: #e33f1e; - font-size: 0.875rem; - line-height: 1.125rem; +[dir="ltr"] .form-item--error-message { + padding-left: 27px; } -[dir] .form-item--error-message { +[dir="rtl"] .form-item--error-message { + padding-right: 27px; +} + +.form-item--error-message { margin-top: 9px; margin-bottom: 9px; + color: #e33f1e; background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23E33F1E' d='M9 0C4.03125 0 0 4.03125 0 9C0 13.9688 4.03125 18 9 18C13.9687 18 18 13.9688 18 9C18 4.03125 13.9687 0 9 0ZM10.5 14.6133C10.5 14.8242 10.3359 15 10.1367 15H7.88672C7.67578 15 7.5 14.8242 7.5 14.6133V12.3867C7.5 12.1758 7.67578 12 7.88672 12H10.1367C10.3359 12 10.5 12.1758 10.5 12.3867V14.6133ZM10.4766 10.582C10.4648 10.7461 10.2891 10.875 10.0781 10.875H7.91016C7.6875 10.875 7.51172 10.7461 7.51172 10.582L7.3125 3.30469C7.3125 3.22266 7.34766 3.14063 7.42969 3.09375C7.5 3.03516 7.60547 3 7.71094 3H10.2891C10.3945 3 10.5 3.03516 10.5703 3.09375C10.6523 3.14063 10.6875 3.22266 10.6875 3.30469L10.4766 10.582Z'/%3E%3C/svg%3E"); background-repeat: no-repeat; + background-position: left top; /* LTR */ background-size: 18px 18px; + font-size: 0.875rem; + line-height: 1.125rem; } -[dir=ltr] .form-item--error-message { - padding-left: 27px; - background-position: left top; -} - -[dir=rtl] .form-item--error-message { - padding-right: 27px; - background-position: right top; -} +[dir="rtl"] .form-item--error-message { + background-position: right top; + } @media screen and (-ms-high-contrast: active) { -[dir] .form-item--error-message { +.form-item--error-message { background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23ffffff' d='M9 0C4.03125 0 0 4.03125 0 9C0 13.9688 4.03125 18 9 18C13.9687 18 18 13.9688 18 9C18 4.03125 13.9687 0 9 0ZM10.5 14.6133C10.5 14.8242 10.3359 15 10.1367 15H7.88672C7.67578 15 7.5 14.8242 7.5 14.6133V12.3867C7.5 12.1758 7.67578 12 7.88672 12H10.1367C10.3359 12 10.5 12.1758 10.5 12.3867V14.6133ZM10.4766 10.582C10.4648 10.7461 10.2891 10.875 10.0781 10.875H7.91016C7.6875 10.875 7.51172 10.7461 7.51172 10.582L7.3125 3.30469C7.3125 3.22266 7.34766 3.14063 7.42969 3.09375C7.5 3.03516 7.60547 3 7.71094 3H10.2891C10.3945 3 10.5 3.03516 10.5703 3.09375C10.6523 3.14063 10.6875 3.22266 10.6875 3.30469L10.4766 10.582Z'/%3E%3C/svg%3E") } } @@ -271,14 +248,12 @@ display: flex; flex-wrap: wrap; align-items: flex-start; -} - -[dir] .form-actions { margin-top: 9px; margin-bottom: 9px; } -[dir] .form-actions .button, [dir] .form-actions .action-link { +.form-actions .button, +.form-actions .action-link { margin-top: 9px; margin-bottom: 9px; } @@ -306,11 +281,15 @@ min-width: 1px; } -[dir=ltr] .form-item--editor-format .form-item__label, [dir=ltr] .form-item--editor-format .form-item__prefix, [dir=ltr] .form-item--editor-format .form-item__suffix { +[dir="ltr"] .form-item--editor-format .form-item__label,[dir="ltr"] +.form-item--editor-format .form-item__prefix,[dir="ltr"] +.form-item--editor-format .form-item__suffix { margin-right: 9px; } -[dir=rtl] .form-item--editor-format .form-item__label, [dir=rtl] .form-item--editor-format .form-item__prefix, [dir=rtl] .form-item--editor-format .form-item__suffix { +[dir="rtl"] .form-item--editor-format .form-item__label,[dir="rtl"] +.form-item--editor-format .form-item__prefix,[dir="rtl"] +.form-item--editor-format .form-item__suffix { margin-left: 9px; } diff --git a/css/components/form.pcss.css b/css/components/form.pcss.css index 5227895..2cdd20c 100644 --- a/css/components/form.pcss.css +++ b/css/components/form.pcss.css @@ -18,13 +18,11 @@ * General form item. */ .form-item { - margin-top: var(--sp1); - margin-bottom: var(--sp1); + margin-block: var(--sp1); } .form-item__label--multiple-value-form { - margin-top: 0; - margin-bottom: 0; + margin-block: 0; font-size: inherit; font-weight: inherit; line-height: inherit; @@ -37,8 +35,7 @@ */ tr .form-item, .container-inline .form-item { - margin-top: var(--sp0-5); - margin-bottom: var(--sp0-5); + margin-block: var(--sp0-5); } /** @@ -46,19 +43,17 @@ tr .form-item, */ .form-item__label { display: table; - margin-top: var(--sp0-5); - margin-bottom: var(--sp0-5); + margin-block: var(--sp0-5); font-size: var(--font-size-l); font-weight: 700; .container-inline & { - margin-right: 1em; + margin-inline-end: 1em; } } .form-item__label--multiple-value-form { - margin-top: 0; - margin-bottom: 0; + margin-block: 0; font-size: inherit; font-weight: inherit; line-height: inherit; @@ -86,8 +81,7 @@ tr .form-item, display: inline-block; width: 0.5rem; height: 0.5rem; - margin-right: 0.3em; - margin-left: 0.3em; + margin-inline: 0.3em; content: ""; vertical-align: text-top; /* Use a background image to prevent screen readers from announcing the text. */ @@ -104,31 +98,33 @@ tr .form-item, * Form item description. */ .form-item__description { - margin-top: var(--sp0-5); - margin-bottom: var(--sp0-5); + margin-block: var(--sp0-5); font-size: var(--font-size-s); line-height: var(--line-height-s); } .field-multiple-table + .form-item__description { - margin-top: 0; + margin-block-start: 0; } /** * Error message (Inline form errors). */ .form-item--error-message { - margin-top: var(--sp0-5); - margin-bottom: var(--sp0-5); - padding-left: var(--sp1-5); + margin-block: var(--sp0-5); + padding-inline-start: var(--sp1-5); color: var(--color--red); background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23E33F1E' d='M9 0C4.03125 0 0 4.03125 0 9C0 13.9688 4.03125 18 9 18C13.9687 18 18 13.9688 18 9C18 4.03125 13.9687 0 9 0ZM10.5 14.6133C10.5 14.8242 10.3359 15 10.1367 15H7.88672C7.67578 15 7.5 14.8242 7.5 14.6133V12.3867C7.5 12.1758 7.67578 12 7.88672 12H10.1367C10.3359 12 10.5 12.1758 10.5 12.3867V14.6133ZM10.4766 10.582C10.4648 10.7461 10.2891 10.875 10.0781 10.875H7.91016C7.6875 10.875 7.51172 10.7461 7.51172 10.582L7.3125 3.30469C7.3125 3.22266 7.34766 3.14063 7.42969 3.09375C7.5 3.03516 7.60547 3 7.71094 3H10.2891C10.3945 3 10.5 3.03516 10.5703 3.09375C10.6523 3.14063 10.6875 3.22266 10.6875 3.30469L10.4766 10.582Z'/%3E%3C/svg%3E"); background-repeat: no-repeat; - background-position: left top; + background-position: left top; /* LTR */ background-size: var(--sp1) var(--sp1); font-size: var(--font-size-s); line-height: var(--line-height-s); + [dir="rtl"] & { + background-position: right top; + } + @media screen and (-ms-high-contrast: active) { background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23ffffff' d='M9 0C4.03125 0 0 4.03125 0 9C0 13.9688 4.03125 18 9 18C13.9687 18 18 13.9688 18 9C18 4.03125 13.9687 0 9 0ZM10.5 14.6133C10.5 14.8242 10.3359 15 10.1367 15H7.88672C7.67578 15 7.5 14.8242 7.5 14.6133V12.3867C7.5 12.1758 7.67578 12 7.88672 12H10.1367C10.3359 12 10.5 12.1758 10.5 12.3867V14.6133ZM10.4766 10.582C10.4648 10.7461 10.2891 10.875 10.0781 10.875H7.91016C7.6875 10.875 7.51172 10.7461 7.51172 10.582L7.3125 3.30469C7.3125 3.22266 7.34766 3.14063 7.42969 3.09375C7.5 3.03516 7.60547 3 7.71094 3H10.2891C10.3945 3 10.5 3.03516 10.5703 3.09375C10.6523 3.14063 10.6875 3.22266 10.6875 3.30469L10.4766 10.582Z'/%3E%3C/svg%3E"); } @@ -141,14 +137,12 @@ tr .form-item, display: flex; flex-wrap: wrap; align-items: flex-start; - margin-top: var(--sp0-5); - margin-bottom: var(--sp0-5); + margin-block: var(--sp0-5); } .form-actions .button, .form-actions .action-link { - margin-top: var(--sp0-5); - margin-bottom: var(--sp0-5); + margin-block: var(--sp0-5); } .form-actions .ajax-progress--throbber { @@ -175,7 +169,7 @@ tr .form-item, .form-item--editor-format .form-item__label, .form-item--editor-format .form-item__prefix, .form-item--editor-format .form-item__suffix { - margin-right: var(--sp0-5); + margin-inline-end: var(--sp0-5); } .form-item--editor-format .form-item__description, diff --git a/css/components/header-buttons-mobile.css b/css/components/header-buttons-mobile.css index db22f18..ab6c703 100644 --- a/css/components/header-buttons-mobile.css +++ b/css/components/header-buttons-mobile.css @@ -76,35 +76,35 @@ /* Form */ } -[dir] .mobile-buttons { - margin-top: 9px; -} - -[dir=ltr] .mobile-buttons { +[dir="ltr"] .mobile-buttons { margin-left: auto; } -[dir=rtl] .mobile-buttons { +[dir="rtl"] .mobile-buttons { margin-right: auto; } +.mobile-buttons { + margin-top: 9px; +} + @media (min-width: 500px) { -[dir] .mobile-buttons { +.mobile-buttons { margin-top: 36px } } @media (min-width: 700px) { -[dir] .mobile-buttons { +.mobile-buttons { margin-top: 72px } } @media (min-width: 1200px) { -[dir] .mobile-buttons { +.mobile-buttons { margin-top: 108px } diff --git a/css/components/header-buttons-mobile.pcss.css b/css/components/header-buttons-mobile.pcss.css index 8079271..f6d352b 100644 --- a/css/components/header-buttons-mobile.pcss.css +++ b/css/components/header-buttons-mobile.pcss.css @@ -6,19 +6,19 @@ @import "../base/variables.pcss.css"; .mobile-buttons { - margin-top: var(--sp0-5); - margin-left: auto; + margin-block-start: var(--sp0-5); + margin-inline-start: auto; @media (--sm) { - margin-top: var(--sp2); + margin-block-start: var(--sp2); } @media (--md) { - margin-top: var(--sp4); + margin-block-start: var(--sp4); } @media (--nav) { - margin-top: var(--sp6); + margin-block-start: var(--sp6); body:not(.is-always-mobile-nav) & { display: none; diff --git a/css/components/header-navigation.css b/css/components/header-navigation.css index 427a33d..c5f677f 100644 --- a/css/components/header-navigation.css +++ b/css/components/header-navigation.css @@ -76,6 +76,30 @@ /* Form */ } +[dir="ltr"] .header-nav { + right: 0; +} + +[dir="rtl"] .header-nav { + left: 0; +} + +[dir="ltr"] .header-nav { + padding-left: 18px; +} + +[dir="rtl"] .header-nav { + padding-right: 18px; +} + +[dir="ltr"] .header-nav { + padding-right: 18px; +} + +[dir="rtl"] .header-nav { + padding-left: 18px; +} + .header-nav { position: fixed; z-index: 5; /* appear above overlay */ @@ -89,37 +113,27 @@ width: 100%; max-width: 500px; height: 100%; - transition: all 0.2s; /* Create room for the "close" button. */ -} - -[dir] .header-nav { - padding: 0 18px 18px; - border-top: solid #fff 54px; + padding-top: 0; + padding-bottom: 18px; + transition: all 0.2s; + transform: translateX(101%); + border-top: solid #fff 54px; /* Create room for the "close" button. */ background-color: #fff; box-shadow: 0 0 72px rgba(0, 0, 0, 0.1); } -[dir=ltr] .header-nav { - right: 0; - transform: translateX(101%); -} - -[dir=rtl] .header-nav { - left: 0; - transform: translateX(-101%); -} +[dir="rtl"] .header-nav { + transform: translateX(-101%); + } /* Toolbar is fixed, and tray is vertical. */ -[dir] body.toolbar-vertical .header-nav { +body.toolbar-vertical .header-nav { border-top-width: 93px; } .header-nav.is-active { visibility: visible; - } - -[dir] .header-nav.is-active { transform: translateX(0); } @@ -133,43 +147,38 @@ @media (min-width: 500px) { .header-nav { + border-top-width: 90px /* Toolbar is fixed, and tray is vertical. */ } - -[dir] .header-nav { - border-top-width: 90px -} - [dir] body.toolbar-vertical .header-nav { + body.toolbar-vertical .header-nav { border-top-width: 129px; } } @media (min-width: 700px) { -.header-nav { - - /* Toolbar is fixed, and tray is vertical or toolbar is horizontal and tray is closed. */ +[dir="ltr"] .header-nav { + padding-left: 54px; + } - /* Toolbar is horizontal fixed, and tray is open. */ -} +[dir="rtl"] .header-nav { + padding-right: 54px; + } -[dir] .header-nav { +.header-nav { padding-bottom: 54px; border-top-width: 126px -} -[dir=ltr] .header-nav { - padding-left: 54px -} + /* Toolbar is fixed, and tray is vertical or toolbar is horizontal and tray is closed. */ -[dir=rtl] .header-nav { - padding-right: 54px + /* Toolbar is horizontal fixed, and tray is open. */ } - [dir] body.toolbar-vertical .header-nav, [dir] body.toolbar-horizontal.toolbar-fixed .header-nav { + body.toolbar-vertical .header-nav, + body.toolbar-horizontal.toolbar-fixed .header-nav { border-top-width: 165px; } - [dir] body.toolbar-horizontal.toolbar-fixed.toolbar-tray-open .header-nav { + body.toolbar-horizontal.toolbar-fixed.toolbar-tray-open .header-nav { border-top-width: 205px; } } @@ -191,6 +200,18 @@ /* Toolbar is horizontal fixed, and tray is open. */ } + [dir="ltr"] body:not(.is-always-mobile-nav) .header-nav { + padding-left: 0; + } + [dir="rtl"] body:not(.is-always-mobile-nav) .header-nav { + padding-right: 0; + } + [dir="ltr"] body:not(.is-always-mobile-nav) .header-nav { + padding-right: 0; + } + [dir="rtl"] body:not(.is-always-mobile-nav) .header-nav { + padding-left: 0; + } body:not(.is-always-mobile-nav) .header-nav { position: static; display: flex; @@ -203,61 +224,60 @@ justify-content: flex-end; max-width: none; height: 108px; - transition: transform 0.2s; - } - [dir] body:not(.is-always-mobile-nav) .header-nav { margin-top: auto; - padding: 0; + padding-top: 0; + padding-bottom: 0; + transition: transform 0.2s; transform: none; border-top: 0; box-shadow: none; } + [dir="ltr"] body.is-always-mobile-nav .header-nav { + left: 100vw; + right: auto; + } + + [dir="rtl"] body.is-always-mobile-nav .header-nav { + right: 100vw; + left: auto; + } + + [dir="ltr"] body.is-always-mobile-nav .header-nav { + padding-right: 18px; + } + + [dir="rtl"] body.is-always-mobile-nav .header-nav { + padding-left: 18px; + } + body.is-always-mobile-nav .header-nav { overflow: auto; max-width: calc(7*((100vw - 645px)/14 + 36px)); transition: transform 0.2s, visibility 0.2s; - } - - [dir] body.is-always-mobile-nav .header-nav { border-top-width: 198px; } - [dir=ltr] body.is-always-mobile-nav .header-nav { - right: auto; - left: 100vw; - padding-right: 18px; - } - - [dir=rtl] body.is-always-mobile-nav .header-nav { - left: auto; - right: 100vw; - padding-left: 18px; - } - - [dir=ltr] body.is-always-mobile-nav .header-nav.is-active { - transform: translateX(-100%); - } - - [dir=rtl] body.is-always-mobile-nav .header-nav.is-active { - transform: translateX(100%); + body.is-always-mobile-nav .header-nav.is-active { + transform: translateX(-100%); } - [dir] body.is-always-mobile-nav.toolbar-vertical .header-nav, [dir] body.is-always-mobile-nav.toolbar-horizontal.toolbar-fixed .header-nav { + body.is-always-mobile-nav.toolbar-vertical .header-nav, + body.is-always-mobile-nav.toolbar-horizontal.toolbar-fixed .header-nav { border-top-width: 237px; } - [dir] body.is-always-mobile-nav.toolbar-horizontal.toolbar-fixed.toolbar-tray-open .header-nav { + body.is-always-mobile-nav.toolbar-horizontal.toolbar-fixed.toolbar-tray-open .header-nav { border-top-width: 277px; } } @media (min-width: 1440px) { + [dir="ltr"] body.is-always-mobile-nav .header-nav { + padding-right: calc(100vw - 1422px); + } + [dir="rtl"] body.is-always-mobile-nav .header-nav { + padding-left: calc(100vw - 1422px); + } body.is-always-mobile-nav .header-nav { max-width: calc(100vw - 783px); } - [dir=ltr] body.is-always-mobile-nav .header-nav { - padding-right: calc(100vw - 1422px); - } - [dir=rtl] body.is-always-mobile-nav .header-nav { - padding-left: calc(100vw - 1422px); - } } diff --git a/css/components/header-navigation.pcss.css b/css/components/header-navigation.pcss.css index 12e30ad..8efa8e2 100644 --- a/css/components/header-navigation.pcss.css +++ b/css/components/header-navigation.pcss.css @@ -8,8 +8,8 @@ .header-nav { position: fixed; z-index: 5; /* appear above overlay */ - top: 0; - right: 0; + inset-block-start: 0; + inset-inline-end: 0; visibility: hidden; overflow: auto; /* Ensure that header nav not use additional space and force @@ -19,13 +19,19 @@ width: 100%; max-width: var(--mobile-nav-width); height: 100%; - padding: 0 var(--sp) var(--sp); + padding-block: 0 var(--sp); + padding-inline-start: var(--sp); + padding-inline-end: var(--sp); transition: all 0.2s; transform: translateX(101%); - border-top: solid var(--color--white) var(--sp3); /* Create room for the "close" button. */ + border-block-start: solid var(--color--white) var(--sp3); /* Create room for the "close" button. */ background-color: var(--color--white); box-shadow: 0 0 72px rgba(0, 0, 0, 0.1); + [dir="rtl"] & { + transform: translateX(-101%); + } + /* Toolbar is fixed, and tray is vertical. */ body.toolbar-vertical & { border-top-width: calc(var(--toolbar-height) + var(--sp3)); @@ -50,8 +56,8 @@ } @media (--md) { - padding-bottom: var(--sp3); - padding-left: var(--sp3); + padding-block-end: var(--sp3); + padding-inline-start: var(--sp3); border-top-width: var(--sp7); /* Toolbar is fixed, and tray is vertical or toolbar is horizontal and tray is closed. */ @@ -81,20 +87,21 @@ justify-content: flex-end; max-width: none; height: var(--header-height-wide-when-fixed); - margin-top: auto; - padding: 0; + margin-block-start: auto; + padding-block: 0; + padding-inline-start: 0; + padding-inline-end: 0; transition: transform 0.2s; transform: none; - border-top: 0; + border-block-start: 0; box-shadow: none; } body.is-always-mobile-nav & { - right: auto; - left: 100vw; + inset-inline: 100vw auto; overflow: auto; max-width: calc((7 * (var(--grid-col-width--nav) + var(--grid-gap--nav)))); - padding-right: var(--sp); + padding-inline-end: var(--sp); transition: transform 0.2s, visibility 0.2s; border-top-width: var(--sp11); @@ -118,7 +125,7 @@ @media (--grid-max) { body.is-always-mobile-nav & { max-width: calc(100vw - (var(--max-width) + var(--content-left)) + ((7 * (var(--grid-col-width--max) + var(--grid-gap--max))))); - padding-right: calc(100vw - (var(--max-width) + var(--content-left) - var(--sp))); + padding-inline-end: calc(100vw - (var(--max-width) + var(--content-left) - var(--sp))); } } } diff --git a/css/components/header-search-narrow.css b/css/components/header-search-narrow.css index a97cd68..c96fd99 100644 --- a/css/components/header-search-narrow.css +++ b/css/components/header-search-narrow.css @@ -76,19 +76,11 @@ /* Form */ } -[dir] .search-narrow__wrapper { - margin-bottom: 36px; - background: #000; -} - -[dir=ltr] .search-narrow__wrapper { - margin-right: -18px; - margin-left: -18px; -} - -[dir=rtl] .search-narrow__wrapper { +.search-narrow__wrapper { margin-left: -18px; margin-right: -18px; + margin-bottom: 36px; + background: #000; } .search-narrow__wrapper form { @@ -97,54 +89,55 @@ .search-narrow__wrapper .form-item { flex-grow: 1; - } - -[dir] .search-narrow__wrapper .form-item { margin: 0; } -[dir] .search-narrow__wrapper .form-actions { +.search-narrow__wrapper .form-actions { margin: 0; } -.search-narrow__wrapper input[type="search"] { +[dir="ltr"] [dir] .search-narrow__wrapper input[type="search"] { + padding-left: 18px; +} + +[dir="rtl"] [dir] .search-narrow__wrapper input[type="search"] { + padding-right: 18px; +} + +[dir="ltr"] [dir] .search-narrow__wrapper input[type="search"] { + padding-right: 18px; +} + +[dir="rtl"] [dir] .search-narrow__wrapper input[type="search"] { + padding-left: 18px; +} + +[dir] .search-narrow__wrapper input[type="search"] { width: calc(100% + 36px); height: 54px; + padding-top: 0; + padding-bottom: 0; transition: background-size 0.4s; - color: #fff; /* Two values are needed for IE11 support. */ - font-family: serif; - font-size: 1rem; - -webkit-appearance: none; - } - -[dir] .search-narrow__wrapper input[type="search"] { - padding: 0 18px; + color: #fff; border: solid 1px transparent; background-color: transparent; - background-image: linear-gradient(#2494db, #2494db); + background-image: linear-gradient(#2494db, #2494db); /* Two values are needed for IE11 support. */ background-repeat: no-repeat; + background-position: bottom left; /* LTR */ background-size: 0% 5px; box-shadow: none; + font-family: serif; + font-size: 1rem; + -webkit-appearance: none; } -[dir=ltr] .search-narrow__wrapper input[type="search"] { - background-position: bottom left; - } - -[dir=rtl] .search-narrow__wrapper input[type="search"] { - background-position: bottom right; - } - -.search-narrow__wrapper input[type="search"]::-ms-clear { +[dir] .search-narrow__wrapper input[type="search"]::-ms-clear { width: 40px; opacity: 0.5; } -.search-narrow__wrapper input[type="search"]:focus { - outline: 0; - } - [dir] .search-narrow__wrapper input[type="search"]:focus { + outline: 0; background-size: 100% 5px; } @@ -162,11 +155,64 @@ @media (min-width: 700px) { +[dir="ltr"] [dir] .search-narrow__wrapper input[type="search"] { + padding-left: 36px; + } + +[dir="rtl"] [dir] .search-narrow__wrapper input[type="search"] { + padding-right: 36px; + } + +[dir="ltr"] [dir] .search-narrow__wrapper input[type="search"] { + padding-right: 36px; + } + +[dir="rtl"] [dir] .search-narrow__wrapper input[type="search"] { + padding-left: 36px; + } + [dir] .search-narrow__wrapper input[type="search"] { - padding: 36px + padding-top: 36px; + padding-bottom: 36px } } +[dir="rtl"] .search-narrow__wrapper input[type="search"] { + background-position: bottom right; + } + +[dir="ltr"] .search-narrow__wrapper .search-form__submit { + margin-left: 0; +} + +[dir="rtl"] .search-narrow__wrapper .search-form__submit { + margin-right: 0; +} + +[dir="ltr"] .search-narrow__wrapper .search-form__submit { + margin-right: 0; +} + +[dir="rtl"] .search-narrow__wrapper .search-form__submit { + margin-left: 0; +} + +[dir="ltr"] .search-narrow__wrapper .search-form__submit { + padding-left: 0; +} + +[dir="rtl"] .search-narrow__wrapper .search-form__submit { + padding-right: 0; +} + +[dir="ltr"] .search-narrow__wrapper .search-form__submit { + padding-right: 0; +} + +[dir="rtl"] .search-narrow__wrapper .search-form__submit { + padding-left: 0; +} + .search-narrow__wrapper .search-form__submit { position: relative; overflow: hidden; @@ -174,11 +220,10 @@ align-self: stretch; width: 54px; height: auto; - } - -[dir] .search-narrow__wrapper .search-form__submit { - margin: 0; - padding: 0; + margin-top: 0; + margin-bottom: 0; + padding-top: 0; + padding-bottom: 0; cursor: pointer; border-color: transparent; background-color: transparent; @@ -189,6 +234,14 @@ images or SVGs that are nested directly within a