@oat-sa/tao-core-ui 3.13.0 → 3.13.2

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@oat-sa/tao-core-ui",
-    "version": "3.13.0",
+    "version": "3.13.2",
     "displayName": "TAO Core UI",
     "description": "UI libraries of TAO",
     "scripts": {

package/scss/ckeditor/skins/tao/scss/inc/_presets.scss

@@ -8,6 +8,9 @@ For licensing, see LICENSE.md or http://ckeditor.com/license
 .cke_button__sourcedialog_label {
   display: inline;
 }
+.cke_button__interactionsource_label {
+    display: inline;
+}
 
 /* "Font Size" combo width */
 .cke_combo__fontsize .cke_combo_text {

package/scss/inc/_base.scss

@@ -1,7 +1,7 @@
 // this combines the most common features from normalize, h5bp main and tao base
 
 //these vars enables you to include this base in a scoped env.
-$mainContainer : html !default;
+$mainContainer: html !default;
 
 // Those styles can't be scoped because it's the base to use REM
 html {
@@ -29,17 +29,21 @@ body {
 }
 
 // cannot be scoped
-::-webkit-scrollbar-corner { background-color: ThreeDHighlight;}
+::-webkit-scrollbar-corner {
+    background-color: ThreeDHighlight;
+}
 
 #{$mainContainer} {
-
-    *, *:before, *:after {
+    *,
+    *:before,
+    *:after {
         -moz-box-sizing: border-box;
         -webkit-box-sizing: border-box;
         box-sizing: border-box;
     }
 
-    &, body{
+    &,
+    body {
         color: $textColor;
         font-family: $regularFont;
         font-weight: normal;
@@ -51,61 +55,115 @@ body {
         line-height: 1.4;
         background: white;
         border-width: 1px;
-        @if($mainContainer != html){
+        @if ($mainContainer != html) {
             @include font-size(14);
         }
     }
 
-    address, article, aside, audio, blockquote, dd, div, dl, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header,
-    hr, noscript, ol, output, p, pre, section, summary, ul, main {
-        margin-top: 0;
-        padding-top: 0;
-        padding-bottom: 0;
+    address,
+    article,
+    aside,
+    audio,
+    blockquote,
+    dd,
+    div,
+    dl,
+    fieldset,
+    figcaption,
+    figure,
+    footer,
+    form,
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6,
+    header,
+    hr,
+    noscript,
+    ol,
+    output,
+    p,
+    pre,
+    section,
+    summary,
+    ul,
+    main {
+        margin-block-start: 0;
+        padding-block-start: 0;
+        padding-block-end: 0;
         white-space: normal;
     }
 
     h1 {
         font-size: 2em;
-        margin: 0.67em 0;
+        margin-block: 0.67em;
+        margin-inline: 0;
     }
 
     h2 {
         font-size: 1.5em;
-        margin: 0.83em 0;
+        margin-block: 0.83em;
+        margin-inline: 0;
     }
 
     h3 {
         font-size: 1.17em;
-        margin: 1em 0;
+        margin-block: 1em;
+        margin-inline: 0;
     }
 
     h4 {
         font-size: 1em;
-        margin: 1.33em 0;
+        margin-block: 1.33em;
+        margin-inline: 0;
     }
 
     h5 {
         font-size: 0.83em;
-        margin: 1.67em 0;
+        margin-block: 1.67em;
+        margin-inline: 0;
     }
 
     h6 {
         font-size: 0.67em;
-        margin: 2.33em 0;
+        margin-block: 2.33em;
+        margin-inline: 0;
     }
 
     blockquote {
-        margin: 1em 40px;
-    }
-
-    blockquote, dd, dl, fieldset, figure, h1, h2, h3, h4, h5, h6,
-    hr, ol, p, pre, ul {
+        margin-block: 1em;
+        margin-inline: 40px;
+    }
+
+    blockquote,
+    dd,
+    dl,
+    fieldset,
+    figure,
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6,
+    hr,
+    ol,
+    p,
+    pre,
+    ul {
         display: block;
         margin-block-end: 10px;
         white-space: normal;
     }
 
-    h1, h2, h3, h4, h5, h6 {
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
         font-weight: normal;
         font-style: normal;
     }
@@ -140,7 +198,8 @@ body {
         &:hover {
             text-decoration: underline;
             color: $info;
-            &:before, &:after {
+            &:before,
+            &:after {
                 text-decoration: none !important;
             }
         }
@@ -149,7 +208,7 @@ body {
             text-decoration: none;
             display: block;
         }
-        &[rel="external"] span.icon-external {
+        &[rel='external'] span.icon-external {
             &:before {
                 @include font-size(11);
                 padding: 0 0 0 4px;
@@ -159,15 +218,25 @@ body {
         }
     }
 
-    b, .b, strong, .strong {
+    b,
+    .b,
+    strong,
+    .strong {
         font-weight: bold;
     }
 
-    i, .i, em, .em, dfn {
+    i,
+    .i,
+    em,
+    .em,
+    dfn {
         font-style: italic;
     }
 
-    code, pre, kdb, samp {
+    code,
+    pre,
+    kdb,
+    samp {
         font-family: $monospaceFont;
         @include font-size(14);
     }
@@ -179,7 +248,7 @@ body {
     }
 
     code {
-        background: whiten($lightBlueGrey, .5);
+        background: whiten($lightBlueGrey, 0.5);
         padding: 2px 6px;
         display: inline-block;
         margin: 0 3px;
@@ -196,7 +265,7 @@ body {
     }
 
     q {
-        quotes: "\201C" "\201D" "\2018" "\2019";
+        quotes: '\201C''\201D''\2018''\2019';
         &:before,
         &:after {
             content: '';
@@ -210,7 +279,7 @@ body {
 
     sub,
     sup {
-        font-size: .75em;
+        font-size: 0.75em;
         position: relative;
         vertical-align: baseline;
     }
@@ -232,7 +301,6 @@ body {
         overflow: hidden;
     }
 
-
     fieldset {
         border: 0;
         margin: 0;
@@ -250,7 +318,8 @@ body {
         resize: vertical;
     }
 
-    label, button {
+    label,
+    button {
         cursor: pointer;
     }
 
@@ -261,7 +330,8 @@ body {
         border: none;
     }
 
-    button, input {
+    button,
+    input {
         &::-moz-focus-inner {
             border: 0;
             padding: 0;
@@ -287,9 +357,9 @@ body {
     }
 
     button,
-    html input[type="button"],
-    input[type="reset"],
-    input[type="submit"] {
+    html input[type='button'],
+    input[type='reset'],
+    input[type='submit'] {
         -webkit-appearance: button;
         cursor: pointer;
     }
@@ -298,7 +368,7 @@ body {
         @include simple-border();
         @include border-radius(1);
 
-        &[type="search"] {
+        &[type='search'] {
             -webkit-appearance: textfield;
             -moz-box-sizing: content-box;
             -webkit-box-sizing: content-box;
@@ -309,8 +379,8 @@ body {
             }
         }
 
-        &[type="checkbox"],
-        &[type="radio"] {
+        &[type='checkbox'],
+        &[type='radio'] {
             box-sizing: border-box;
             padding: 0;
         }
@@ -321,9 +391,12 @@ body {
     }
 
     audio:not([controls]),
-    [hidden], template,
-    .hidden, .deleted,
-    .js, .js-hide {
+    [hidden],
+    template,
+    .hidden,
+    .deleted,
+    .js,
+    .js-hide {
         display: none !important;
     }
 
@@ -359,13 +432,15 @@ body {
         top: -10000px;
     }
 
-    %clearfix-before, .clearfix:before {
-        content: " ";
+    %clearfix-before,
+    .clearfix:before {
+        content: ' ';
         display: table;
     }
 
-    %clearfix-after, .clearfix:after {
-        content: " ";
+    %clearfix-after,
+    .clearfix:after {
+        content: ' ';
         display: table;
         clear: both;
     }
@@ -375,7 +450,6 @@ body {
         clear: both;
     }
 
-
     .lft,
     .wrap-left {
         display: inline;
@@ -389,15 +463,18 @@ body {
     }
 
     .wrap-left {
-        margin: 20px 20px 20px 0;
+        margin-block: 20px;
+        margin-inline: 0 20px;
     }
 
     .wrap-right {
-        margin: 20px 0 20px 20px;
+        margin-block: 20px;
+        margin-inline: 20px 0;
     }
 
     .tao-centered {
-        margin: 20px auto;
+        margin-block: 20px;
+        margin-inline: auto;
         display: block;
     }
 
@@ -420,12 +497,24 @@ body {
     // added to make _u_ in ck QTI compatible
     .txt-underline {
         text-decoration: underline;
-        font-size : inherit;
+        font-size: inherit;
+    }
+    .writing-mode-vertical-rl .txt-underline {
+        text-underline-position: right;
+    }
+    .writing-mode-vertical-rl[data-useragent-browser='safari'] .txt-underline {
+        // for Safari < 18.2 which doesn't support "text-underline-position: right"
+        text-decoration: none;
+        border-right: 1px solid currentColor;
+    }
+
+    .txt-combine-upright-all {
+        text-combine-upright: all;
     }
 
     .txt-highlight {
         padding: 0 5px;
-        background: #FF6416;
+        background: #ff6416;
         color: white;
     }
 
@@ -461,13 +550,15 @@ body {
         text-overflow: ellipsis;
     }
 
-    .disabled, *:disabled {
+    .disabled,
+    *:disabled {
         cursor: default;
-        opacity: .7;
+        opacity: 0.7;
     }
 
-    .overlay, .ui-widget-overlay {
-        background: white(.9);
+    .overlay,
+    .ui-widget-overlay {
+        background: white(0.9);
     }
 
     .ui-widget {
@@ -479,13 +570,14 @@ body {
         font-size: 1.4rem !important;
     }
 
-    .ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button {
+    .ui-widget input,
+    .ui-widget select,
+    .ui-widget textarea,
+    .ui-widget button {
         font-family: $regularFont;
         font-size: 1.4rem !important;
     }
 
-
-
     // everything on list styles and counters
     @import 'base/list-style';
 
@@ -497,5 +589,4 @@ body {
 
     // everything user highlight
     @import 'base/highlight';
-
 }

package/scss/inc/_grid.scss

@@ -1,4 +1,5 @@
-[class*=" col-"], [class^="col-"] {
+[class*=' col-'],
+[class^='col-'] {
     float: left;
     min-block-size: 1rem;
     &:first-child {
@@ -17,7 +18,8 @@
     overflow-x: hidden;
 }
 
-.grid-row, .fixed-grid-row {
+.grid-row,
+.fixed-grid-row {
     @extend .clearfix;
     inline-size: widthPerc(852, 840);
 }
@@ -29,17 +31,19 @@
         @include grid-unit($i, 12, 12);
         margin-block-end: 12px;
     }
-    .alpha {
-        margin-left: 0 !important
-    }
+}
+.alpha {
+    margin-inline-start: 0 !important;
 }
 
 .writing-mode-vertical-rl {
-    .grid-row.grid-row, .fixed-grid-row.fixed-grid-row {
+    .grid-row.grid-row,
+    .fixed-grid-row.fixed-grid-row {
         block-size: auto;
         inline-size: 100%;
     }
-    [class*=" col-"], [class^="col-"] {
+    [class*=' col-'],
+    [class^='col-'] {
         &:first-child {
             margin-inline-start: 0;
             margin-block-end: 12px;
@@ -48,10 +52,15 @@
             margin-inline-end: 0;
         }
     }
+    .grid-row:last-child {
+        [class*=' col-'],
+        [class^='col-'] {
+            margin-block-end: 0;
+        }
+    }
 }
 
 #icon-editor {
-
     .grid-row {
         @extend .clearfix;
         width: 100%;

package/scss/inc/_normalize.scss

@@ -125,32 +125,38 @@ a:hover {
 
 h1 {
     font-size: 2em;
-    margin: 0.67em 0;
+    margin-block: 0.67em;
+    margin-inline: 0;
 }
 
 h2 {
     font-size: 1.5em;
-    margin: 0.83em 0;
+    margin-block: 0.83em;
+    margin-inline: 0;
 }
 
 h3 {
     font-size: 1.17em;
-    margin: 1em 0;
+    margin-block: 1em;
+    margin-inline: 0;
 }
 
 h4 {
     font-size: 1em;
-    margin: 1.33em 0;
+    margin-block: 1.33em;
+    margin-inline: 0;
 }
 
 h5 {
     font-size: 0.83em;
-    margin: 1.67em 0;
+    margin-block: 1.67em;
+    margin-inline: 0;
 }
 
 h6 {
     font-size: 0.67em;
-    margin: 2.33em 0;
+    margin-block: 2.33em;
+    margin-inline: 0;
 }
 
 /**
@@ -158,7 +164,7 @@ h6 {
  */
 
 abbr[title] {
-    border-bottom: 1px dotted;
+    border-block-end: 1px dotted;
 }
 
 /**
@@ -171,7 +177,8 @@ strong {
 }
 
 blockquote {
-    margin: 1em 40px;
+    margin-block: 1em;
+    margin-inline: 40px;
 }
 
 /**
@@ -462,8 +469,8 @@ html input[disabled] {
  *    Known issue: excess padding remains in IE 6.
  */
 
-input[type="checkbox"],
-input[type="radio"] {
+input[type='checkbox'],
+input[type='radio'] {
     box-sizing: border-box; /* 1 */
     padding: 0; /* 2 */
     *height: 13px; /* 3 */
@@ -476,7 +483,7 @@ input[type="radio"] {
  *    (include `-moz` to future-proof).
  */
 
-input[type="search"] {
+input[type='search'] {
     -webkit-appearance: textfield; /* 1 */
     -moz-box-sizing: content-box;
     -webkit-box-sizing: content-box; /* 2 */
@@ -488,8 +495,8 @@ input[type="search"] {
  * on OS X.
  */
 
-input[type="search"]::-webkit-search-cancel-button,
-input[type="search"]::-webkit-search-decoration {
+input[type='search']::-webkit-search-cancel-button,
+input[type='search']::-webkit-search-decoration {
     -webkit-appearance: none;
 }
 
@@ -525,4 +532,3 @@ table {
     border-collapse: collapse;
     border-spacing: 0;
 }
-

package/scss/inc/base/_list-style.scss

@@ -1,6 +1,8 @@
-ul, ol {
-    padding-left: 40px;
-    &.plain, &.none {
+ul,
+ol {
+    padding-inline-start: 40px;
+    &.plain,
+    &.none {
         padding: 0;
         margin: 0;
         list-style: none;
@@ -27,18 +29,21 @@ This SCSS generates CSS classes for custom list styling, it:
 */
 
 //https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type
-$list_styles: disc, circle, square, decimal, decimal-leading-zero, lower-roman, upper-roman,
-lower-greek, lower-latin, upper-latin, armenian, georgian, lower-alpha, upper-alpha;
+$list_styles: disc, circle, square, decimal, decimal-leading-zero, lower-roman, upper-roman, lower-greek, lower-latin,
+    upper-latin, armenian, georgian, lower-alpha, upper-alpha;
 
 $suffixes: (
     'parenthesis': ')',
     'period': '.'
 );
 
-[class^="list-style-"], [class*=" list-style-"] {
+[class^='list-style-'],
+[class*=' list-style-'] {
     counter-reset: custom-counter;
 
-    &>p, &>div, &>li.qti-choice {
+    & > p,
+    & > div,
+    & > li.qti-choice {
         position: relative;
         &::before {
             counter-increment: custom-counter;
@@ -52,7 +57,9 @@ $suffixes: (
 
     @each $style in $list_styles {
         &.list-style-#{$style} {
-            &>p, &>div, &>li.qti-choice::before {
+            & > p,
+            & > div,
+            & > li.qti-choice::before {
                 content: counter(custom-counter, #{$style});
             }
         }
@@ -61,7 +68,7 @@ $suffixes: (
     @each $style in $list_styles {
         @each $suffix, $symbol in $suffixes {
             &.list-style-#{$style}-#{$suffix} > li.qti-choice::before {
-                content: counter(custom-counter, #{$style}) "#{$symbol}";
+                content: counter(custom-counter, #{$style}) '#{$symbol}';
             }
         }
     }