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

package/src/css/basic.css

@@ -1107,7 +1107,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 {
@@ -1753,7 +1753,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 +1771,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 +1785,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 +1795,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 +1805,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 +1815,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 +1825,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 +1835,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 +1845,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 +1855,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 +1865,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 +1875,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 +1885,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 +2125,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 +2147,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 +2155,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 +2574,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 +3271,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 +5280,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 +5788,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 +6498,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,