From 93bb9c3e2daaddb20b33f3ee8f3e8298e0f81195 Mon Sep 17 00:00:00 2001 From: rdrew Date: Mon, 27 Nov 2023 12:43:49 -0400 Subject: [PATCH] type changes --- css/layout/region.css | 115 ++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 115 insertions(+) diff --git a/css/layout/region.css b/css/layout/region.css index e6a968d..64e80d6 100644 --- a/css/layout/region.css +++ b/css/layout/region.css @@ -25,3 +25,118 @@ margin-block-end: var(--sp3); } } + +/* + * DO NOT EDIT THIS FILE. + * See the following change record for more information, + * https://www.drupal.org/node/3084859 + * @preserve + */ + +/** + * @file + * Social Bar Region + . + */ + +@media (min-width: 75rem) { + .social-bar { + flex-shrink: 0; + width: var(--content-left); + background-color: var(--color--gray-100); + } +} + +.social-bar__inner { + position: relative; + padding-block: var(--sp0-5); + padding-inline-start: var(--sp); + padding-inline-end: var(--sp); +} + +@media (min-width: 75rem) { + .social-bar__inner { + position: relative; + width: var(--content-left); + padding-block: calc(5 * var(--sp)); + padding-inline-start: 0; + padding-inline-end: 0; + } + + .social-bar__inner.is-fixed { + position: fixed; + inset-block-start: var(--sp6); + inset-inline-start: 0; + height: calc(100vh - 6 * var(--sp)); + } +} + +.rotate > * { + margin-block-end: var(--sp2); +} + +@media (min-width: 75rem) { + .rotate > * { + display: flex; + align-items: center; + margin-block-end: 0; + } + + .rotate > *:not(:first-child) { + margin-inline-end: var(--sp2); + } +} + +@media (min-width: 75rem) { + .rotate .contextual { + inset-inline: 100% auto; + transform: rotate(90deg); /* LTR */ + transform-origin: top left; /* LTR */ + } + + .rotate .contextual .trigger { + float: left; /* LTR */ + + /** + * Chromium and Webkit do not yet support flow relative logical properties, + * such as float: inline-end. However, PostCSS Logical does not compile this + * value, so we accommodate by not using these. + * + * @see https://caniuse.com/mdn-css_properties_clear_flow_relative_values + * @see https://github.com/csstools/postcss-plugins/issues/632 + */ + } + [dir="rtl"] .rotate .contextual .trigger { + float: right; + } +} + +@media (min-width: 75rem) { + .rotate { + position: absolute; + inset-inline-start: 50%; + display: flex; + flex-direction: row-reverse; + width: 100vh; + transform: rotate(-90deg) translateX(-100%); /* LTR */ + transform-origin: left; /* LTR */ + } + + @supports (width: max-content) { + .rotate { + width: max-content; + } + } +} + +@media (min-width: 75rem) { + [dir="rtl"] .rotate { + transform: rotate(90deg) translateX(100%); + transform-origin: right; + } + + [dir="rtl"] .rotate .contextual { + transform: rotate(-90deg); + transform-origin: top right; + } +}