@oat-sa/tao-core-ui 3.16.1 → 3.16.2

package/src/css/basic.css

@@ -15,6 +15,11 @@ Usage:
    first param - color, second - position. Also you can use px or other valid units for set position.
 */
 /* based on "visually-hidden" mixin in LDS for accessibility goals */
+/*
+ * Every style defined here must be mirrored with `writing-mode-horizontal-tb` mixin.
+   Because writing-mode can be defined on 2 levels: a) item, b) text block or interaction;
+     so if there's a horizontal block inside vertical item, vertical styles should *not* be used for it.
+ */
 /* Do not edit */
 @font-face {
   font-family: "Source Sans Pro";
@@ -1058,8 +1063,7 @@ html {
   - Uses counter-reset for automatic item numbering
   - Supports base styles (disc, decimal etc.) and suffix variants (-period ".", -parenthesis ")")
   - Easy addition of new styles using $list_styles array and new suffixes and $suffixes map
-  */
-  /* fake table stuff */
+  */ /* fake table stuff */
 }
 html *,
 html *:before,
@@ -1476,30 +1480,94 @@ html .txt-strike {
 html .qti-item ruby rt span.txt-underline, html .qti-item ruby rt span.txt-dashed, html .qti-item ruby rt span.txt-wavy, html .qti-item ruby rt span.txt-strike {
   text-decoration: none;
 }
-html .writing-mode-vertical-rl {
-  text-underline-position: right;
+html .writing-mode-horizontal-tb {
+  writing-mode: horizontal-tb;
 }
-html .writing-mode-vertical-rl .txt-dashed,
-html .writing-mode-vertical-rl .txt-underline {
-  text-underline-offset: 0.1em;
+html .writing-mode-vertical-rl {
+  writing-mode: vertical-rl;
 }
 html .writing-mode-vertical-rl .txt-subscript {
   inset-block-start: -0.9em;
   bottom: 0;
 }
+
+html .txt-subscript {
+  inset-block-start: auto;
+  bottom: auto;
+}
+html .writing-mode-vertical-rl .writing-mode-horizontal-tb .txt-subscript {
+  inset-block-start: auto;
+  bottom: auto;
+}
+
 html .writing-mode-vertical-rl .txt-superscript {
   inset-block-end: -0.4em;
   top: 0;
 }
-html .writing-mode-vertical-rl .txt-underline ruby rt,
-html .writing-mode-vertical-rl .txt-dashed ruby rt,
-html .writing-mode-vertical-rl .txt-wavy ruby rt {
+
+html .txt-superscript {
+  inset-block-end: auto;
+  top: auto;
+}
+html .writing-mode-vertical-rl .writing-mode-horizontal-tb .txt-superscript {
+  inset-block-end: auto;
+  top: auto;
+}
+
+html .writing-mode-vertical-rl .txt-underline, html .writing-mode-vertical-rl .txt-dashed, html .writing-mode-vertical-rl .txt-wavy {
+  text-underline-position: right;
+}
+
+html .txt-underline,
+html .txt-dashed,
+html .txt-wavy {
+  text-underline-position: auto;
+}
+html .writing-mode-vertical-rl .writing-mode-horizontal-tb .txt-underline, html .writing-mode-vertical-rl .writing-mode-horizontal-tb .txt-dashed, html .writing-mode-vertical-rl .writing-mode-horizontal-tb .txt-wavy {
+  text-underline-position: auto;
+}
+
+html .txt-underline ruby rt,
+html .txt-dashed ruby rt {
   position: relative;
-  inset-block-start: -0.8em;
 }
-html .writing-mode-vertical-rl[data-useragent-browser=safari] .txt-dashed,
-html .txt-underline {
-  text-underline-offset: 0;
+html .writing-mode-vertical-rl .txt-underline ruby rt, html .writing-mode-vertical-rl .txt-dashed ruby rt {
+  inset-block-start: -0.3em;
+}
+
+html .txt-underline ruby rt,
+html .txt-dashed ruby rt {
+  inset-block-start: auto;
+}
+html .writing-mode-vertical-rl .writing-mode-horizontal-tb .txt-underline ruby rt, html .writing-mode-vertical-rl .writing-mode-horizontal-tb .txt-dashed ruby rt {
+  inset-block-start: auto;
+}
+
+html .txt-wavy ruby rt {
+  position: relative;
+}
+html .writing-mode-vertical-rl .txt-wavy ruby rt {
+  inset-block-start: -0.7em;
+}
+
+html .txt-wavy ruby rt {
+  inset-block-start: auto;
+}
+html .writing-mode-vertical-rl .writing-mode-horizontal-tb .txt-wavy ruby rt {
+  inset-block-start: auto;
+}
+
+html [data-useragent-browser=safari].writing-mode-vertical-rl .txt-underline,
+html [data-useragent-browser=safari].writing-mode-vertical-rl .txt-dashed,
+html [data-useragent-browser=safari] .writing-mode-vertical-rl .txt-underline,
+html [data-useragent-browser=safari] .writing-mode-vertical-rl .txt-dashed {
+  text-underline-offset: -0.1em;
+}
+html [data-useragent-browser=safari] .txt-underline,
+html [data-useragent-browser=safari] .txt-dashed,
+html [data-useragent-browser=safari] .writing-mode-horizontal-tb .txt-underline,
+html [data-useragent-browser=safari] .writing-mode-horizontal-tb .txt-dashed {
+  text-underline-offset: auto;
 }
 html .txt-combine-upright-all {
   text-combine-upright: all;
@@ -1576,9 +1644,25 @@ html nav ul {
 html .writing-mode-vertical-rl ol li::marker {
   text-combine-upright: all;
 }
+
+html ol li::marker {
+  text-combine-upright: none;
+}
+html .writing-mode-vertical-rl .writing-mode-horizontal-tb ol li::marker {
+  text-combine-upright: none;
+}
+
 html .writing-mode-vertical-rl ol li {
   padding-inline-start: 6px;
 }
+
+html ol li {
+  padding-inline-start: 0px;
+}
+html .writing-mode-vertical-rl .writing-mode-horizontal-tb ol li {
+  padding-inline-start: 0px;
+}
+
 html [class^=list-style-],
 html [class*=" list-style-"] {
   counter-reset: custom-counter;
@@ -2234,6 +2318,11 @@ Usage:
    first param - color, second - position. Also you can use px or other valid units for set position.
 */
 /* based on "visually-hidden" mixin in LDS for accessibility goals */
+/*
+ * Every style defined here must be mirrored with `writing-mode-horizontal-tb` mixin.
+   Because writing-mode can be defined on 2 levels: a) item, b) text block or interaction;
+     so if there's a horizontal block inside vertical item, vertical styles should *not* be used for it.
+ */
 /* Do not edit */
 .select2-container * {
   text-decoration: none !important;
@@ -2767,7 +2856,8 @@ disabled look for disabled choices in the results dropdown
 }
 
 /* end multiselect */
-.select2-offscreen, .select2-offscreen:focus {
+.select2-offscreen,
+.select2-offscreen:focus {
   clip: rect(0 0 0 0) !important;
   width: 1px !important;
   height: 1px !important;
@@ -2873,7 +2963,7 @@ disabled look for disabled choices in the results dropdown
   border-top-width: 1px;
   border-block-start-width: 0;
 }
-.writing-mode-vertical-rl .select2-results {
+.writing-mode-vertical-rl:where(.select2-drop) .select2-results {
   max-height: none;
   max-block-size: 200px;
   margin-block: 4px;
@@ -2881,13 +2971,13 @@ disabled look for disabled choices in the results dropdown
   overflow-x: auto;
   overflow-y: hidden;
 }
-.writing-mode-vertical-rl .select2-results .select2-result-label {
+.writing-mode-vertical-rl:where(.select2-drop) .select2-results .select2-result-label {
   min-height: auto;
   min-block-size: 1em;
   padding-block: 3px 4px;
   padding-inline: 7px;
 }
-.writing-mode-vertical-rl .select2-results .select2-no-results {
+.writing-mode-vertical-rl:where(.select2-drop) .select2-results .select2-no-results {
   padding-left: 0;
   padding-inline-start: 7px;
 }
@@ -2957,6 +3047,11 @@ Usage:
    first param - color, second - position. Also you can use px or other valid units for set position.
 */
 /* based on "visually-hidden" mixin in LDS for accessibility goals */
+/*
+ * Every style defined here must be mirrored with `writing-mode-horizontal-tb` mixin.
+   Because writing-mode can be defined on 2 levels: a) item, b) text block or interaction;
+     so if there's a horizontal block inside vertical item, vertical styles should *not* be used for it.
+ */
 /* Do not edit */
 /* The box that holds each toolbar. */
 .cke_toolbar, .tlb-spacer, .tlb-bar {
@@ -3282,6 +3377,11 @@ Usage:
    first param - color, second - position. Also you can use px or other valid units for set position.
 */
 /* based on "visually-hidden" mixin in LDS for accessibility goals */
+/*
+ * Every style defined here must be mirrored with `writing-mode-horizontal-tb` mixin.
+   Because writing-mode can be defined on 2 levels: a) item, b) text block or interaction;
+     so if there's a horizontal block inside vertical item, vertical styles should *not* be used for it.
+ */
 /* Do not edit */
 /* "Reset" styles, necessary to avoid the editor UI being broken by external CSS. */
 /*
@@ -3323,6 +3423,11 @@ Usage:
    first param - color, second - position. Also you can use px or other valid units for set position.
 */
 /* based on "visually-hidden" mixin in LDS for accessibility goals */
+/*
+ * Every style defined here must be mirrored with `writing-mode-horizontal-tb` mixin.
+   Because writing-mode can be defined on 2 levels: a) item, b) text block or interaction;
+     so if there's a horizontal block inside vertical item, vertical styles should *not* be used for it.
+ */
 /* Do not edit */
 /* Reset for single elements, not their children. */
 .cke_reset {
@@ -3507,14 +3612,15 @@ Special outer level classes used in this file:
   position: relative;
   border: 1px solid #ddd;
   border-radius: 2px;
-  -webkit-border-radius: 2px; /*
-  border-top: 1px solid #bfbfbf;
+  -webkit-border-radius: 2px;
+  /*
+    border-top: 1px solid #bfbfbf;
 
-  box-shadow: 0 1px 0 #fff inset;
+    box-shadow: 0 1px 0 #fff inset;
 
-  background: #cfd1cf;
-  background-image: linear-gradient(top, #ebebeb, #cfd1cf);
-  filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#ebebeb', endColorstr='#cfd1cf');*/
+    background: #cfd1cf;
+    background-image: linear-gradient(top, #ebebeb, #cfd1cf);
+    filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#ebebeb', endColorstr='#cfd1cf');*/
 }
 
 /* On iOS we need to manually enable scrolling in the contents block. (#9945) */
@@ -3643,6 +3749,11 @@ Usage:
    first param - color, second - position. Also you can use px or other valid units for set position.
 */
 /* based on "visually-hidden" mixin in LDS for accessibility goals */
+/*
+ * Every style defined here must be mirrored with `writing-mode-horizontal-tb` mixin.
+   Because writing-mode can be defined on 2 levels: a) item, b) text block or interaction;
+     so if there's a horizontal block inside vertical item, vertical styles should *not* be used for it.
+ */
 /* Do not edit */
 /* The box that holds an IFRAME. It's inserted into a host document and positioned
    absolutely by the application. It floats above the host document/editor. */
@@ -3993,6 +4104,11 @@ Usage:
    first param - color, second - position. Also you can use px or other valid units for set position.
 */
 /* based on "visually-hidden" mixin in LDS for accessibility goals */
+/*
+ * Every style defined here must be mirrored with `writing-mode-horizontal-tb` mixin.
+   Because writing-mode can be defined on 2 levels: a) item, b) text block or interaction;
+     so if there's a horizontal block inside vertical item, vertical styles should *not* be used for it.
+ */
 /* Do not edit */
 /* The box that holds each toolbar. */
 .cke_toolbar, .tlb-spacer, .tlb-bar {
@@ -4526,6 +4642,11 @@ Usage:
    first param - color, second - position. Also you can use px or other valid units for set position.
 */
 /* based on "visually-hidden" mixin in LDS for accessibility goals */
+/*
+ * Every style defined here must be mirrored with `writing-mode-horizontal-tb` mixin.
+   Because writing-mode can be defined on 2 levels: a) item, b) text block or interaction;
+     so if there's a horizontal block inside vertical item, vertical styles should *not* be used for it.
+ */
 /* Do not edit */
 /* The box that hold the entire combo widget */
 .cke_combo, .tlb-text-button-box {
@@ -4829,6 +4950,11 @@ Usage:
    first param - color, second - position. Also you can use px or other valid units for set position.
 */
 /* based on "visually-hidden" mixin in LDS for accessibility goals */
+/*
+ * Every style defined here must be mirrored with `writing-mode-horizontal-tb` mixin.
+   Because writing-mode can be defined on 2 levels: a) item, b) text block or interaction;
+     so if there's a horizontal block inside vertical item, vertical styles should *not* be used for it.
+ */
 /* Do not edit */
 /* "Source" button label */
 .cke_button__source_label,
@@ -4879,6 +5005,11 @@ Usage:
    first param - color, second - position. Also you can use px or other valid units for set position.
 */
 /* based on "visually-hidden" mixin in LDS for accessibility goals */
+/*
+ * Every style defined here must be mirrored with `writing-mode-horizontal-tb` mixin.
+   Because writing-mode can be defined on 2 levels: a) item, b) text block or interaction;
+     so if there's a horizontal block inside vertical item, vertical styles should *not* be used for it.
+ */
 /* Do not edit */
 [class^=icon-], [class*=" icon-"] {
   text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
@@ -4969,6 +5100,11 @@ Usage:
    first param - color, second - position. Also you can use px or other valid units for set position.
 */
 /* based on "visually-hidden" mixin in LDS for accessibility goals */
+/*
+ * Every style defined here must be mirrored with `writing-mode-horizontal-tb` mixin.
+   Because writing-mode can be defined on 2 levels: a) item, b) text block or interaction;
+     so if there's a horizontal block inside vertical item, vertical styles should *not* be used for it.
+ */
 /* Do not edit */
 .cke .cke_top .cke_toolbar .cke_button_icon, .cke .cke_top .tlb-spacer .cke_button_icon, .cke .tlb-top .cke_toolbar .cke_button_icon, .cke .tlb-top .tlb-spacer .cke_button_icon, .cke .cke_top .tlb-bar .cke_button_icon, .cke .tlb-top .tlb-bar .cke_button_icon, .cke .cke_top .tlb .tlb-bar .tlb-button-on [class^=icon-], .cke .tlb-top .tlb .tlb-bar .tlb-button-on [class^=icon-], .cke .cke_top .tlb .tlb-bar .tlb-button-on [class*=" icon-"], .cke .tlb-top .tlb .tlb-bar .tlb-button-on [class*=" icon-"],
 .cke .cke_top .tlb .tlb-bar .tlb-button-off [class^=icon-],
@@ -5355,6 +5491,11 @@ Usage:
    first param - color, second - position. Also you can use px or other valid units for set position.
 */
 /* based on "visually-hidden" mixin in LDS for accessibility goals */
+/*
+ * Every style defined here must be mirrored with `writing-mode-horizontal-tb` mixin.
+   Because writing-mode can be defined on 2 levels: a) item, b) text block or interaction;
+     so if there's a horizontal block inside vertical item, vertical styles should *not* be used for it.
+ */
 /* Do not edit */
 [class^=icon-], [class*=" icon-"] {
   text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
@@ -5534,14 +5675,15 @@ Special outer level classes used in this file:
   position: relative;
   border: 1px solid #ddd;
   border-radius: 2px;
-  -webkit-border-radius: 2px; /*
-  border-top: 1px solid #bfbfbf;
+  -webkit-border-radius: 2px;
+  /*
+    border-top: 1px solid #bfbfbf;
 
-  box-shadow: 0 1px 0 #fff inset;
+    box-shadow: 0 1px 0 #fff inset;
 
-  background: #cfd1cf;
-  background-image: linear-gradient(top, #ebebeb, #cfd1cf);
-  filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#ebebeb', endColorstr='#cfd1cf');*/
+    background: #cfd1cf;
+    background-image: linear-gradient(top, #ebebeb, #cfd1cf);
+    filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#ebebeb', endColorstr='#cfd1cf');*/
 }
 
 /* On iOS we need to manually enable scrolling in the contents block. (#9945) */
@@ -5629,6 +5771,11 @@ Usage:
    first param - color, second - position. Also you can use px or other valid units for set position.
 */
 /* based on "visually-hidden" mixin in LDS for accessibility goals */
+/*
+ * Every style defined here must be mirrored with `writing-mode-horizontal-tb` mixin.
+   Because writing-mode can be defined on 2 levels: a) item, b) text block or interaction;
+     so if there's a horizontal block inside vertical item, vertical styles should *not* be used for it.
+ */
 /* Do not edit */
 .cke .cke_top .cke_toolbar .cke_button_icon, .cke .cke_top .tlb-spacer .cke_button_icon, .cke .tlb-top .cke_toolbar .cke_button_icon, .cke .tlb-top .tlb-spacer .cke_button_icon, .cke .cke_top .tlb-bar .cke_button_icon, .cke .tlb-top .tlb-bar .cke_button_icon, .cke .cke_top .tlb .tlb-bar .tlb-button-on [class^=icon-], .cke .tlb-top .tlb .tlb-bar .tlb-button-on [class^=icon-], .cke .cke_top .tlb .tlb-bar .tlb-button-on [class*=" icon-"], .cke .tlb-top .tlb .tlb-bar .tlb-button-on [class*=" icon-"],
 .cke .cke_top .tlb .tlb-bar .tlb-button-off [class^=icon-],
@@ -6024,6 +6171,11 @@ Usage:
    first param - color, second - position. Also you can use px or other valid units for set position.
 */
 /* based on "visually-hidden" mixin in LDS for accessibility goals */
+/*
+ * Every style defined here must be mirrored with `writing-mode-horizontal-tb` mixin.
+   Because writing-mode can be defined on 2 levels: a) item, b) text block or interaction;
+     so if there's a horizontal block inside vertical item, vertical styles should *not* be used for it.
+ */
 /* Do not edit */
 .tooltip .tooltip-inner {
   border-radius: 4px 4px 0 0;