@oat-sa/tao-core-ui 3.9.10 → 3.11.0

package/src/css/basic.css

@@ -1052,6 +1052,13 @@ body {
 }
 
 html {
+  /*
+  This SCSS generates CSS classes for custom list styling, it:
+  - For classes like .list-style-disc, .list-style-decimal-period etc.
+  - 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 */
 }
 html *, html *:before, html *:after {
@@ -1107,7 +1114,7 @@ html blockquote {
 html blockquote, html dd, html dl, html fieldset, html figure, html h1, html h2, html h3, html h4, html h5, html h6,
 html hr, html ol, html p, html pre, html ul {
   display: block;
-  margin-bottom: 10px;
+  margin-block-end: 10px;
   white-space: normal;
 }
 html h1, html h2, html h3, html h4, html h5, html h6 {
@@ -1428,104 +1435,145 @@ html nav ul {
   margin: 0;
   list-style: none;
 }
-html ul.disc, html ol.disc {
-  list-style-type: disc;
-}
-html ul.circle, html ol.circle {
-  list-style-type: circle;
-}
-html ul.square, html ol.square {
-  list-style-type: square;
-}
-html ul.decimal, html ol.decimal {
-  list-style-type: decimal;
-}
-html ul.decimal-leading-zero, html ol.decimal-leading-zero {
-  list-style-type: decimal-leading-zero;
-}
-html ul.lower-roman, html ol.lower-roman {
-  list-style-type: lower-roman;
-}
-html ul.upper-roman, html ol.upper-roman {
-  list-style-type: upper-roman;
-}
-html ul.lower-greek, html ol.lower-greek {
-  list-style-type: lower-greek;
-}
-html ul.lower-latin, html ol.lower-latin {
-  list-style-type: lower-latin;
-}
-html ul.upper-latin, html ol.upper-latin {
-  list-style-type: upper-latin;
-}
-html ul.armenian, html ol.armenian {
-  list-style-type: armenian;
-}
-html ul.georgian, html ol.georgian {
-  list-style-type: georgian;
-}
-html ul.lower-alpha, html ol.lower-alpha {
-  list-style-type: lower-alpha;
-}
-html ul.upper-alpha, html ol.upper-alpha {
-  list-style-type: upper-alpha;
-}
-html ul.none, html ol.none {
-  list-style-type: none;
-}
 html [class^=list-style-], html [class*=" list-style-"] {
   counter-reset: custom-counter;
 }
-html [class^=list-style-] > p::before, html [class^=list-style-] > div::before, html [class^=list-style-] > li::before, html [class*=" list-style-"] > p::before, html [class*=" list-style-"] > div::before, html [class*=" list-style-"] > li::before {
+html [class^=list-style-] > p, html [class^=list-style-] > div, html [class^=list-style-] > li.qti-choice, html [class*=" list-style-"] > p, html [class*=" list-style-"] > div, html [class*=" list-style-"] > li.qti-choice {
+  position: relative;
+}
+html [class^=list-style-] > p::before, html [class^=list-style-] > div::before, html [class^=list-style-] > li.qti-choice::before, html [class*=" list-style-"] > p::before, html [class*=" list-style-"] > div::before, html [class*=" list-style-"] > li.qti-choice::before {
   counter-increment: custom-counter;
+  position: absolute;
+  left: -25px;
   width: 20px;
   display: inline-block;
   text-align: center;
 }
-html [class^=list-style-].list-style-disc > p::before, html [class^=list-style-].list-style-disc > div::before, html [class^=list-style-].list-style-disc > li::before, html [class*=" list-style-"].list-style-disc > p::before, html [class*=" list-style-"].list-style-disc > div::before, html [class*=" list-style-"].list-style-disc > li::before {
+html [class^=list-style-].list-style-disc > p, html [class^=list-style-].list-style-disc > div, html [class^=list-style-].list-style-disc > li.qti-choice::before, html [class*=" list-style-"].list-style-disc > p, html [class*=" list-style-"].list-style-disc > div, html [class*=" list-style-"].list-style-disc > li.qti-choice::before {
   content: counter(custom-counter, disc);
 }
-html [class^=list-style-].list-style-circle > p::before, html [class^=list-style-].list-style-circle > div::before, html [class^=list-style-].list-style-circle > li::before, html [class*=" list-style-"].list-style-circle > p::before, html [class*=" list-style-"].list-style-circle > div::before, html [class*=" list-style-"].list-style-circle > li::before {
+html [class^=list-style-].list-style-circle > p, html [class^=list-style-].list-style-circle > div, html [class^=list-style-].list-style-circle > li.qti-choice::before, html [class*=" list-style-"].list-style-circle > p, html [class*=" list-style-"].list-style-circle > div, html [class*=" list-style-"].list-style-circle > li.qti-choice::before {
   content: counter(custom-counter, circle);
 }
-html [class^=list-style-].list-style-square > p::before, html [class^=list-style-].list-style-square > div::before, html [class^=list-style-].list-style-square > li::before, html [class*=" list-style-"].list-style-square > p::before, html [class*=" list-style-"].list-style-square > div::before, html [class*=" list-style-"].list-style-square > li::before {
+html [class^=list-style-].list-style-square > p, html [class^=list-style-].list-style-square > div, html [class^=list-style-].list-style-square > li.qti-choice::before, html [class*=" list-style-"].list-style-square > p, html [class*=" list-style-"].list-style-square > div, html [class*=" list-style-"].list-style-square > li.qti-choice::before {
   content: counter(custom-counter, square);
 }
-html [class^=list-style-].list-style-decimal > p::before, html [class^=list-style-].list-style-decimal > div::before, html [class^=list-style-].list-style-decimal > li::before, html [class*=" list-style-"].list-style-decimal > p::before, html [class*=" list-style-"].list-style-decimal > div::before, html [class*=" list-style-"].list-style-decimal > li::before {
+html [class^=list-style-].list-style-decimal > p, html [class^=list-style-].list-style-decimal > div, html [class^=list-style-].list-style-decimal > li.qti-choice::before, html [class*=" list-style-"].list-style-decimal > p, html [class*=" list-style-"].list-style-decimal > div, html [class*=" list-style-"].list-style-decimal > li.qti-choice::before {
   content: counter(custom-counter, decimal);
 }
-html [class^=list-style-].list-style-decimal-leading-zero > p::before, html [class^=list-style-].list-style-decimal-leading-zero > div::before, html [class^=list-style-].list-style-decimal-leading-zero > li::before, html [class*=" list-style-"].list-style-decimal-leading-zero > p::before, html [class*=" list-style-"].list-style-decimal-leading-zero > div::before, html [class*=" list-style-"].list-style-decimal-leading-zero > li::before {
+html [class^=list-style-].list-style-decimal-leading-zero > p, html [class^=list-style-].list-style-decimal-leading-zero > div, html [class^=list-style-].list-style-decimal-leading-zero > li.qti-choice::before, html [class*=" list-style-"].list-style-decimal-leading-zero > p, html [class*=" list-style-"].list-style-decimal-leading-zero > div, html [class*=" list-style-"].list-style-decimal-leading-zero > li.qti-choice::before {
   content: counter(custom-counter, decimal-leading-zero);
 }
-html [class^=list-style-].list-style-lower-roman > p::before, html [class^=list-style-].list-style-lower-roman > div::before, html [class^=list-style-].list-style-lower-roman > li::before, html [class*=" list-style-"].list-style-lower-roman > p::before, html [class*=" list-style-"].list-style-lower-roman > div::before, html [class*=" list-style-"].list-style-lower-roman > li::before {
+html [class^=list-style-].list-style-lower-roman > p, html [class^=list-style-].list-style-lower-roman > div, html [class^=list-style-].list-style-lower-roman > li.qti-choice::before, html [class*=" list-style-"].list-style-lower-roman > p, html [class*=" list-style-"].list-style-lower-roman > div, html [class*=" list-style-"].list-style-lower-roman > li.qti-choice::before {
   content: counter(custom-counter, lower-roman);
 }
-html [class^=list-style-].list-style-upper-roman > p::before, html [class^=list-style-].list-style-upper-roman > div::before, html [class^=list-style-].list-style-upper-roman > li::before, html [class*=" list-style-"].list-style-upper-roman > p::before, html [class*=" list-style-"].list-style-upper-roman > div::before, html [class*=" list-style-"].list-style-upper-roman > li::before {
+html [class^=list-style-].list-style-upper-roman > p, html [class^=list-style-].list-style-upper-roman > div, html [class^=list-style-].list-style-upper-roman > li.qti-choice::before, html [class*=" list-style-"].list-style-upper-roman > p, html [class*=" list-style-"].list-style-upper-roman > div, html [class*=" list-style-"].list-style-upper-roman > li.qti-choice::before {
   content: counter(custom-counter, upper-roman);
 }
-html [class^=list-style-].list-style-lower-greek > p::before, html [class^=list-style-].list-style-lower-greek > div::before, html [class^=list-style-].list-style-lower-greek > li::before, html [class*=" list-style-"].list-style-lower-greek > p::before, html [class*=" list-style-"].list-style-lower-greek > div::before, html [class*=" list-style-"].list-style-lower-greek > li::before {
+html [class^=list-style-].list-style-lower-greek > p, html [class^=list-style-].list-style-lower-greek > div, html [class^=list-style-].list-style-lower-greek > li.qti-choice::before, html [class*=" list-style-"].list-style-lower-greek > p, html [class*=" list-style-"].list-style-lower-greek > div, html [class*=" list-style-"].list-style-lower-greek > li.qti-choice::before {
   content: counter(custom-counter, lower-greek);
 }
-html [class^=list-style-].list-style-lower-latin > p::before, html [class^=list-style-].list-style-lower-latin > div::before, html [class^=list-style-].list-style-lower-latin > li::before, html [class*=" list-style-"].list-style-lower-latin > p::before, html [class*=" list-style-"].list-style-lower-latin > div::before, html [class*=" list-style-"].list-style-lower-latin > li::before {
+html [class^=list-style-].list-style-lower-latin > p, html [class^=list-style-].list-style-lower-latin > div, html [class^=list-style-].list-style-lower-latin > li.qti-choice::before, html [class*=" list-style-"].list-style-lower-latin > p, html [class*=" list-style-"].list-style-lower-latin > div, html [class*=" list-style-"].list-style-lower-latin > li.qti-choice::before {
   content: counter(custom-counter, lower-latin);
 }
-html [class^=list-style-].list-style-upper-latin > p::before, html [class^=list-style-].list-style-upper-latin > div::before, html [class^=list-style-].list-style-upper-latin > li::before, html [class*=" list-style-"].list-style-upper-latin > p::before, html [class*=" list-style-"].list-style-upper-latin > div::before, html [class*=" list-style-"].list-style-upper-latin > li::before {
+html [class^=list-style-].list-style-upper-latin > p, html [class^=list-style-].list-style-upper-latin > div, html [class^=list-style-].list-style-upper-latin > li.qti-choice::before, html [class*=" list-style-"].list-style-upper-latin > p, html [class*=" list-style-"].list-style-upper-latin > div, html [class*=" list-style-"].list-style-upper-latin > li.qti-choice::before {
   content: counter(custom-counter, upper-latin);
 }
-html [class^=list-style-].list-style-armenian > p::before, html [class^=list-style-].list-style-armenian > div::before, html [class^=list-style-].list-style-armenian > li::before, html [class*=" list-style-"].list-style-armenian > p::before, html [class*=" list-style-"].list-style-armenian > div::before, html [class*=" list-style-"].list-style-armenian > li::before {
+html [class^=list-style-].list-style-armenian > p, html [class^=list-style-].list-style-armenian > div, html [class^=list-style-].list-style-armenian > li.qti-choice::before, html [class*=" list-style-"].list-style-armenian > p, html [class*=" list-style-"].list-style-armenian > div, html [class*=" list-style-"].list-style-armenian > li.qti-choice::before {
   content: counter(custom-counter, armenian);
 }
-html [class^=list-style-].list-style-georgian > p::before, html [class^=list-style-].list-style-georgian > div::before, html [class^=list-style-].list-style-georgian > li::before, html [class*=" list-style-"].list-style-georgian > p::before, html [class*=" list-style-"].list-style-georgian > div::before, html [class*=" list-style-"].list-style-georgian > li::before {
+html [class^=list-style-].list-style-georgian > p, html [class^=list-style-].list-style-georgian > div, html [class^=list-style-].list-style-georgian > li.qti-choice::before, html [class*=" list-style-"].list-style-georgian > p, html [class*=" list-style-"].list-style-georgian > div, html [class*=" list-style-"].list-style-georgian > li.qti-choice::before {
   content: counter(custom-counter, georgian);
 }
-html [class^=list-style-].list-style-lower-alpha > p::before, html [class^=list-style-].list-style-lower-alpha > div::before, html [class^=list-style-].list-style-lower-alpha > li::before, html [class*=" list-style-"].list-style-lower-alpha > p::before, html [class*=" list-style-"].list-style-lower-alpha > div::before, html [class*=" list-style-"].list-style-lower-alpha > li::before {
+html [class^=list-style-].list-style-lower-alpha > p, html [class^=list-style-].list-style-lower-alpha > div, html [class^=list-style-].list-style-lower-alpha > li.qti-choice::before, html [class*=" list-style-"].list-style-lower-alpha > p, html [class*=" list-style-"].list-style-lower-alpha > div, html [class*=" list-style-"].list-style-lower-alpha > li.qti-choice::before {
   content: counter(custom-counter, lower-alpha);
 }
-html [class^=list-style-].list-style-upper-alpha > p::before, html [class^=list-style-].list-style-upper-alpha > div::before, html [class^=list-style-].list-style-upper-alpha > li::before, html [class*=" list-style-"].list-style-upper-alpha > p::before, html [class*=" list-style-"].list-style-upper-alpha > div::before, html [class*=" list-style-"].list-style-upper-alpha > li::before {
+html [class^=list-style-].list-style-upper-alpha > p, html [class^=list-style-].list-style-upper-alpha > div, html [class^=list-style-].list-style-upper-alpha > li.qti-choice::before, html [class*=" list-style-"].list-style-upper-alpha > p, html [class*=" list-style-"].list-style-upper-alpha > div, html [class*=" list-style-"].list-style-upper-alpha > li.qti-choice::before {
   content: counter(custom-counter, upper-alpha);
 }
-html [class^=list-style-].list-style-none > p::before, html [class^=list-style-].list-style-none > div::before, html [class^=list-style-].list-style-none > li::before, html [class*=" list-style-"].list-style-none > p::before, html [class*=" list-style-"].list-style-none > div::before, html [class*=" list-style-"].list-style-none > li::before {
-  content: counter(custom-counter, none);
+html [class^=list-style-].list-style-disc-parenthesis > li.qti-choice::before, html [class*=" list-style-"].list-style-disc-parenthesis > li.qti-choice::before {
+  content: counter(custom-counter, disc) ")";
+}
+html [class^=list-style-].list-style-disc-period > li.qti-choice::before, html [class*=" list-style-"].list-style-disc-period > li.qti-choice::before {
+  content: counter(custom-counter, disc) ".";
+}
+html [class^=list-style-].list-style-circle-parenthesis > li.qti-choice::before, html [class*=" list-style-"].list-style-circle-parenthesis > li.qti-choice::before {
+  content: counter(custom-counter, circle) ")";
+}
+html [class^=list-style-].list-style-circle-period > li.qti-choice::before, html [class*=" list-style-"].list-style-circle-period > li.qti-choice::before {
+  content: counter(custom-counter, circle) ".";
+}
+html [class^=list-style-].list-style-square-parenthesis > li.qti-choice::before, html [class*=" list-style-"].list-style-square-parenthesis > li.qti-choice::before {
+  content: counter(custom-counter, square) ")";
+}
+html [class^=list-style-].list-style-square-period > li.qti-choice::before, html [class*=" list-style-"].list-style-square-period > li.qti-choice::before {
+  content: counter(custom-counter, square) ".";
+}
+html [class^=list-style-].list-style-decimal-parenthesis > li.qti-choice::before, html [class*=" list-style-"].list-style-decimal-parenthesis > li.qti-choice::before {
+  content: counter(custom-counter, decimal) ")";
+}
+html [class^=list-style-].list-style-decimal-period > li.qti-choice::before, html [class*=" list-style-"].list-style-decimal-period > li.qti-choice::before {
+  content: counter(custom-counter, decimal) ".";
+}
+html [class^=list-style-].list-style-decimal-leading-zero-parenthesis > li.qti-choice::before, html [class*=" list-style-"].list-style-decimal-leading-zero-parenthesis > li.qti-choice::before {
+  content: counter(custom-counter, decimal-leading-zero) ")";
+}
+html [class^=list-style-].list-style-decimal-leading-zero-period > li.qti-choice::before, html [class*=" list-style-"].list-style-decimal-leading-zero-period > li.qti-choice::before {
+  content: counter(custom-counter, decimal-leading-zero) ".";
+}
+html [class^=list-style-].list-style-lower-roman-parenthesis > li.qti-choice::before, html [class*=" list-style-"].list-style-lower-roman-parenthesis > li.qti-choice::before {
+  content: counter(custom-counter, lower-roman) ")";
+}
+html [class^=list-style-].list-style-lower-roman-period > li.qti-choice::before, html [class*=" list-style-"].list-style-lower-roman-period > li.qti-choice::before {
+  content: counter(custom-counter, lower-roman) ".";
+}
+html [class^=list-style-].list-style-upper-roman-parenthesis > li.qti-choice::before, html [class*=" list-style-"].list-style-upper-roman-parenthesis > li.qti-choice::before {
+  content: counter(custom-counter, upper-roman) ")";
+}
+html [class^=list-style-].list-style-upper-roman-period > li.qti-choice::before, html [class*=" list-style-"].list-style-upper-roman-period > li.qti-choice::before {
+  content: counter(custom-counter, upper-roman) ".";
+}
+html [class^=list-style-].list-style-lower-greek-parenthesis > li.qti-choice::before, html [class*=" list-style-"].list-style-lower-greek-parenthesis > li.qti-choice::before {
+  content: counter(custom-counter, lower-greek) ")";
+}
+html [class^=list-style-].list-style-lower-greek-period > li.qti-choice::before, html [class*=" list-style-"].list-style-lower-greek-period > li.qti-choice::before {
+  content: counter(custom-counter, lower-greek) ".";
+}
+html [class^=list-style-].list-style-lower-latin-parenthesis > li.qti-choice::before, html [class*=" list-style-"].list-style-lower-latin-parenthesis > li.qti-choice::before {
+  content: counter(custom-counter, lower-latin) ")";
+}
+html [class^=list-style-].list-style-lower-latin-period > li.qti-choice::before, html [class*=" list-style-"].list-style-lower-latin-period > li.qti-choice::before {
+  content: counter(custom-counter, lower-latin) ".";
+}
+html [class^=list-style-].list-style-upper-latin-parenthesis > li.qti-choice::before, html [class*=" list-style-"].list-style-upper-latin-parenthesis > li.qti-choice::before {
+  content: counter(custom-counter, upper-latin) ")";
+}
+html [class^=list-style-].list-style-upper-latin-period > li.qti-choice::before, html [class*=" list-style-"].list-style-upper-latin-period > li.qti-choice::before {
+  content: counter(custom-counter, upper-latin) ".";
+}
+html [class^=list-style-].list-style-armenian-parenthesis > li.qti-choice::before, html [class*=" list-style-"].list-style-armenian-parenthesis > li.qti-choice::before {
+  content: counter(custom-counter, armenian) ")";
+}
+html [class^=list-style-].list-style-armenian-period > li.qti-choice::before, html [class*=" list-style-"].list-style-armenian-period > li.qti-choice::before {
+  content: counter(custom-counter, armenian) ".";
+}
+html [class^=list-style-].list-style-georgian-parenthesis > li.qti-choice::before, html [class*=" list-style-"].list-style-georgian-parenthesis > li.qti-choice::before {
+  content: counter(custom-counter, georgian) ")";
+}
+html [class^=list-style-].list-style-georgian-period > li.qti-choice::before, html [class*=" list-style-"].list-style-georgian-period > li.qti-choice::before {
+  content: counter(custom-counter, georgian) ".";
+}
+html [class^=list-style-].list-style-lower-alpha-parenthesis > li.qti-choice::before, html [class*=" list-style-"].list-style-lower-alpha-parenthesis > li.qti-choice::before {
+  content: counter(custom-counter, lower-alpha) ")";
+}
+html [class^=list-style-].list-style-lower-alpha-period > li.qti-choice::before, html [class*=" list-style-"].list-style-lower-alpha-period > li.qti-choice::before {
+  content: counter(custom-counter, lower-alpha) ".";
+}
+html [class^=list-style-].list-style-upper-alpha-parenthesis > li.qti-choice::before, html [class*=" list-style-"].list-style-upper-alpha-parenthesis > li.qti-choice::before {
+  content: counter(custom-counter, upper-alpha) ")";
+}
+html [class^=list-style-].list-style-upper-alpha-period > li.qti-choice::before, html [class*=" list-style-"].list-style-upper-alpha-period > li.qti-choice::before {
+  content: counter(custom-counter, upper-alpha) ".";
 }
 html table {
   border-collapse: collapse;
@@ -1753,7 +1801,7 @@ textarea + .feedback-info, textarea + .tooltip-blue {
 
 [class*=" col-"], [class^=col-] {
   float: left;
-  min-height: 1rem;
+  min-block-size: 1rem;
 }
 [class*=" col-"]:first-child, [class^=col-]:first-child {
   margin-left: 0;
@@ -1771,13 +1819,13 @@ textarea + .feedback-info, textarea + .tooltip-blue {
 }
 
 .grid-row, .fixed-grid-row {
-  width: 101.4285714286%;
+  inline-size: 101.4285714286%;
 }
 
 .col-1 {
-  margin-left: 1.4285714286%;
-  width: 6.9047619048%;
-  margin-bottom: 12px;
+  margin-inline-start: 1.4285714286%;
+  inline-size: 6.9047619048%;
+  margin-block-end: 12px;
 }
 
 .alpha {
@@ -1785,9 +1833,9 @@ textarea + .feedback-info, textarea + .tooltip-blue {
 }
 
 .col-2 {
-  margin-left: 1.4285714286%;
-  width: 15.2380952381%;
-  margin-bottom: 12px;
+  margin-inline-start: 1.4285714286%;
+  inline-size: 15.2380952381%;
+  margin-block-end: 12px;
 }
 
 .alpha {
@@ -1795,9 +1843,9 @@ textarea + .feedback-info, textarea + .tooltip-blue {
 }
 
 .col-3 {
-  margin-left: 1.4285714286%;
-  width: 23.5714285714%;
-  margin-bottom: 12px;
+  margin-inline-start: 1.4285714286%;
+  inline-size: 23.5714285714%;
+  margin-block-end: 12px;
 }
 
 .alpha {
@@ -1805,9 +1853,9 @@ textarea + .feedback-info, textarea + .tooltip-blue {
 }
 
 .col-4 {
-  margin-left: 1.4285714286%;
-  width: 31.9047619048%;
-  margin-bottom: 12px;
+  margin-inline-start: 1.4285714286%;
+  inline-size: 31.9047619048%;
+  margin-block-end: 12px;
 }
 
 .alpha {
@@ -1815,9 +1863,9 @@ textarea + .feedback-info, textarea + .tooltip-blue {
 }
 
 .col-5 {
-  margin-left: 1.4285714286%;
-  width: 40.2380952381%;
-  margin-bottom: 12px;
+  margin-inline-start: 1.4285714286%;
+  inline-size: 40.2380952381%;
+  margin-block-end: 12px;
 }
 
 .alpha {
@@ -1825,9 +1873,9 @@ textarea + .feedback-info, textarea + .tooltip-blue {
 }
 
 .col-6 {
-  margin-left: 1.4285714286%;
-  width: 48.5714285714%;
-  margin-bottom: 12px;
+  margin-inline-start: 1.4285714286%;
+  inline-size: 48.5714285714%;
+  margin-block-end: 12px;
 }
 
 .alpha {
@@ -1835,9 +1883,9 @@ textarea + .feedback-info, textarea + .tooltip-blue {
 }
 
 .col-7 {
-  margin-left: 1.4285714286%;
-  width: 56.9047619048%;
-  margin-bottom: 12px;
+  margin-inline-start: 1.4285714286%;
+  inline-size: 56.9047619048%;
+  margin-block-end: 12px;
 }
 
 .alpha {
@@ -1845,9 +1893,9 @@ textarea + .feedback-info, textarea + .tooltip-blue {
 }
 
 .col-8 {
-  margin-left: 1.4285714286%;
-  width: 65.2380952381%;
-  margin-bottom: 12px;
+  margin-inline-start: 1.4285714286%;
+  inline-size: 65.2380952381%;
+  margin-block-end: 12px;
 }
 
 .alpha {
@@ -1855,9 +1903,9 @@ textarea + .feedback-info, textarea + .tooltip-blue {
 }
 
 .col-9 {
-  margin-left: 1.4285714286%;
-  width: 73.5714285714%;
-  margin-bottom: 12px;
+  margin-inline-start: 1.4285714286%;
+  inline-size: 73.5714285714%;
+  margin-block-end: 12px;
 }
 
 .alpha {
@@ -1865,9 +1913,9 @@ textarea + .feedback-info, textarea + .tooltip-blue {
 }
 
 .col-10 {
-  margin-left: 1.4285714286%;
-  width: 81.9047619048%;
-  margin-bottom: 12px;
+  margin-inline-start: 1.4285714286%;
+  inline-size: 81.9047619048%;
+  margin-block-end: 12px;
 }
 
 .alpha {
@@ -1875,9 +1923,9 @@ textarea + .feedback-info, textarea + .tooltip-blue {
 }
 
 .col-11 {
-  margin-left: 1.4285714286%;
-  width: 90.2380952381%;
-  margin-bottom: 12px;
+  margin-inline-start: 1.4285714286%;
+  inline-size: 90.2380952381%;
+  margin-block-end: 12px;
 }
 
 .alpha {
@@ -1885,87 +1933,99 @@ textarea + .feedback-info, textarea + .tooltip-blue {
 }
 
 .col-12 {
-  margin-left: 1.4285714286%;
-  width: 98.5714285714%;
-  margin-bottom: 12px;
+  margin-inline-start: 1.4285714286%;
+  inline-size: 98.5714285714%;
+  margin-block-end: 12px;
 }
 
 .alpha {
   margin-left: 0 !important;
 }
 
+.writing-mode-vertical-rl .grid-row.grid-row, .writing-mode-vertical-rl .fixed-grid-row.fixed-grid-row {
+  block-size: auto;
+  inline-size: 100%;
+}
+.writing-mode-vertical-rl [class*=" col-"]:first-child, .writing-mode-vertical-rl [class^=col-]:first-child {
+  margin-inline-start: 0;
+  margin-block-end: 12px;
+}
+.writing-mode-vertical-rl [class*=" col-"]:last-child, .writing-mode-vertical-rl [class^=col-]:last-child {
+  margin-inline-end: 0;
+}
+
 #icon-editor .grid-row {
   width: 100%;
 }
 #icon-editor .col-1 {
-  margin-left: 0%;
-  width: 8.3333333333%;
+  margin-inline-start: 0%;
+  inline-size: 8.3333333333%;
   margin-top: 0 !important;
   margin-bottom: 0 !important;
 }
 #icon-editor .col-2 {
-  margin-left: 0%;
-  width: 16.6666666667%;
+  margin-inline-start: 0%;
+  inline-size: 16.6666666667%;
   margin-top: 0 !important;
   margin-bottom: 0 !important;
 }
 #icon-editor .col-3 {
-  margin-left: 0%;
-  width: 25%;
+  margin-inline-start: 0%;
+  inline-size: 25%;
   margin-top: 0 !important;
   margin-bottom: 0 !important;
 }
 #icon-editor .col-4 {
-  margin-left: 0%;
-  width: 33.3333333333%;
+  margin-inline-start: 0%;
+  inline-size: 33.3333333333%;
   margin-top: 0 !important;
   margin-bottom: 0 !important;
 }
 #icon-editor .col-5 {
-  margin-left: 0%;
-  width: 41.6666666667%;
+  margin-inline-start: 0%;
+  inline-size: 41.6666666667%;
   margin-top: 0 !important;
   margin-bottom: 0 !important;
 }
 #icon-editor .col-6 {
-  margin-left: 0%;
-  width: 50%;
+  margin-inline-start: 0%;
+  inline-size: 50%;
   margin-top: 0 !important;
   margin-bottom: 0 !important;
 }
 #icon-editor .col-7 {
-  margin-left: 0%;
-  width: 58.3333333333%;
+  margin-inline-start: 0%;
+  inline-size: 58.3333333333%;
   margin-top: 0 !important;
   margin-bottom: 0 !important;
 }
 #icon-editor .col-8 {
-  margin-left: 0%;
-  width: 66.6666666667%;
+  margin-inline-start: 0%;
+  inline-size: 66.6666666667%;
   margin-top: 0 !important;
   margin-bottom: 0 !important;
 }
 #icon-editor .col-9 {
-  margin-left: 0%;
-  width: 75%;
+  margin-inline-start: 0%;
+  inline-size: 75%;
   margin-top: 0 !important;
   margin-bottom: 0 !important;
 }
 #icon-editor .col-10 {
-  margin-left: 0%;
-  width: 83.3333333333%;
+  margin-inline-start: 0%;
+  inline-size: 83.3333333333%;
   margin-top: 0 !important;
   margin-bottom: 0 !important;
 }
 #icon-editor .col-11 {
-  margin-left: 0%;
-  width: 91.6666666667%;
+  margin-inline-start: 0%;
+  inline-size: 91.6666666667%;
   margin-top: 0 !important;
   margin-bottom: 0 !important;
 }
 #icon-editor .col-12 {
-  margin-left: 0%;
-  width: 100%;
+  margin-inline-start: 0%;
+  inline-size: 100%;
   margin-top: 0 !important;
   margin-bottom: 0 !important;
 }
@@ -2113,7 +2173,7 @@ Usage:
   border: 1px solid #ddd;
   border-radius: 2px;
   -webkit-border-radius: 2px;
-  border-top: 0;
+  border-top-width: 0;
   border-radius: 0 0 2px 2px;
 }
 .select2-drop.rtl {
@@ -2135,7 +2195,7 @@ Usage:
 .select2-drop.select2-drop-above {
   margin-top: 1px;
   border-top: 1px solid #ddd;
-  border-bottom: 0;
+  border-bottom-width: 0;
   border-radius: 2px 2px 0 0;
 }
 
@@ -2143,7 +2203,7 @@ Usage:
   border: 1px solid #ddd;
   border-radius: 2px;
   -webkit-border-radius: 2px;
-  border-top: none;
+  border-top-width: 0;
 }
 
 .select2-container .select2-choice .select2-arrow {
@@ -2562,6 +2622,88 @@ disabled look for disabled choices in the results dropdown
   padding-left: 5px;
 }
 
+/* writing-mode vertical-rl, only for single select without search */
+.writing-mode-vertical-rl.select2-container .select2-choice {
+  height: auto;
+  block-size: 26px;
+  padding-block: 0;
+  padding-inline: 8px 0;
+}
+.writing-mode-vertical-rl.select2-container.select2-allowclear .select2-choice .select2-chosen {
+  margin-right: 0;
+  margin-inline-end: 42px;
+}
+.writing-mode-vertical-rl.select2-container .select2-choice > .select2-chosen {
+  margin-right: 0;
+  margin-inline-end: 26px;
+}
+.writing-mode-vertical-rl.select2-container .select2-choice .select2-arrow {
+  width: auto;
+  height: auto;
+  right: auto;
+  top: auto;
+  inline-size: 18px;
+  block-size: 100%;
+  inset-inline-end: 0;
+  inset-block-start: 0;
+}
+.writing-mode-vertical-rl.select2-container .select2-choice .select2-arrow b {
+  overflow: hidden;
+}
+.writing-mode-vertical-rl.select2-container .select2-choice .select2-arrow b:before {
+  display: inline-block;
+  transform: rotate(90deg);
+}
+.writing-mode-vertical-rl.select2-drop {
+  writing-mode: vertical-rl;
+  width: auto;
+  margin-top: 0;
+  top: auto;
+  border-top-width: 1px;
+  inline-size: 100%;
+  margin-block-start: -1px;
+  inset-block-start: 100%;
+  border-block-start-width: 0;
+  border-start-start-radius: 0;
+  border-start-end-radius: 0;
+  border-end-end-radius: 2px;
+  border-end-start-radius: 2px;
+}
+.writing-mode-vertical-rl.select2-drop.select2-drop-above {
+  margin-top: 0;
+  border-top-width: 1px;
+  border-bottom-width: 1px;
+  margin-block-start: 1px;
+  border-block-start-width: 1px;
+  border-block-end-width: 0;
+  border-start-start-radius: 2px;
+  border-start-end-radius: 2px;
+  border-end-end-radius: 0;
+  border-end-start-radius: 0;
+}
+.writing-mode-vertical-rl.select2-drop-active {
+  border-top-width: 1px;
+  border-block-start-width: 0;
+}
+.writing-mode-vertical-rl .select2-results {
+  max-height: none;
+  max-block-size: 200px;
+  margin-block: 4px;
+  margin-inline: 0;
+  overflow-x: auto;
+  overflow-y: hidden;
+}
+.writing-mode-vertical-rl .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 {
+  padding-left: 0;
+  padding-inline-start: 7px;
+}
+
 /*
 Copyright (c) 2003-2013, CKSource - Frederico Knabben. All rights reserved.
 For licensing, see LICENSE.md or http://ckeditor.com/license
@@ -3177,15 +3319,14 @@ 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) */
@@ -5187,15 +5328,14 @@ 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) */
@@ -5696,11 +5836,12 @@ Usage:
   position: absolute;
   /*background: #FFC107;*/
   color: black;
-  min-width: 100px;
-  max-width: 250px;
+  min-inline-size: 100px;
+  max-inline-size: 250px;
   /*box-shadow: 0 0 2px rgba(0,0,0,0.5);*/
   box-shadow: none;
-  padding: 2px 5px;
+  padding-block: 2px;
+  padding-inline: 5px;
   text-align: left;
   font-size: 0.8em;
   z-index: 2000;
@@ -6405,10 +6546,10 @@ select {
   border-radius: 2px;
   font-family: "Source Sans Pro", sans-serif;
   padding: 4px;
-  min-width: 150px;
+  min-inline-size: 150px;
   background-color: white;
   color: #222;
-  max-width: 300px;
+  max-inline-size: 300px;
 }
 input[type=color].disabled, input[type=color][disabled], input[type=color][readonly],
 input[type=date].disabled,