ode-csslib 4.0.4 → 4.0.5

package/dist/version.txt

@@ -1 +1 @@
-entcore-css-lib=4.0.2 13/12/2022 16:48:33
+entcore-css-lib=4.0.2 13/01/2023 16:11:43

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ode-csslib",
-  "version": "4.0.4",
+  "version": "4.0.5",
   "description": "Open Digital Education Legacy CSS framework",
   "scripts": {
     "copy-fonts": "cpr node_modules/entcore-generic-icons/fonts/ assets/fonts/generic-icons/ -o",
@@ -43,7 +43,7 @@
     "sass": "^1.49.9"
   },
   "dependencies": {
-    "entcore-generic-icons": "git+https://github.com/opendigitaleducation/generic-icons.git"
+    "entcore-generic-icons": "git+https://github.com/opendigitaleducation/generic-icons.git#master"
   },
   "files": ["assets", "scss", "dist"]
 }

package/scss/_app.scss

@@ -73,6 +73,23 @@ html.print {
   cursor: pointer;
 }
 
+.back-lightbox {
+    margin: 0;
+    display: flex;
+    color: #4A4A4A;
+    align-items: center;
+
+    .icon-left {
+      fill: #4A4A4A;
+      margin-right: 5px;
+      margin-top: 3px;
+    }
+
+    span {
+      font-size: 14px;
+    }
+}
+
 .lightbox-view {
   @include lightbox-window;
   width: 800px;

package/scss/icons/_pictos.scss

@@ -528,7 +528,7 @@ i.website,
 i.website-large {
   @include fonticon;
   &::before {
-    content: "\e94a";
+    content: "\e90a";
   }
 }
 
@@ -587,3 +587,39 @@ i.recurrent {
     content: "\e958";
   }
 }
+
+i.forms,
+i.forms-large,
+i.formulaire,
+i.formulaire-large {
+  @include fonticon;
+  &::before {
+    content: "\e95c";
+  }
+}
+
+i.presences,
+i.presences-large,
+i.absences,
+i.absences-large {
+  @include fonticon;
+  &::before {
+    content: "\e95d";
+  }
+}
+
+i.competences,
+i.competences-large {
+  @include fonticon;
+  &::before {
+    content: "\e927";
+  }
+}
+
+i.web-conference,
+i.web-conference-large {
+  @include fonticon;
+  &::before {
+    content: "\e957";
+  }
+}

package/scss/modules/_lists.scss

@@ -1,3 +1,7 @@
+.list-ctn {
+  overflow-x: scroll;
+}
+
 .list-view {
   margin-top: 15px;
 

package/scss/modules/_modules.scss

@@ -66,6 +66,7 @@
 @import "pick-files";
 @import "pills";
 @import "popover";
+@import "profil";
 @import "progress-bar";
 @import "pull-down-menu";
 @import "pulsar";

package/scss/modules/_profil.scss

@@ -0,0 +1,85 @@
+@media screen and (min-width: $wide-screen) {
+    .profil-flex {
+        .email-ellipsis {
+            @include cell-ellipsis;
+            max-width: 410px;
+        }
+    }
+}
+
+@media screen and (min-width: $fat-tablette) and (max-width: $wide-screen) {
+    .profil-flex {
+        .email-ellipsis {
+            @include cell-ellipsis;
+            max-width: 310px;
+        }
+    }
+}
+
+@media screen and (min-width: $tablette) and (max-width: $fat-tablette) {
+    .profil-flex {
+        .email-ellipsis {
+            @include cell-ellipsis;
+            max-width: 180px;
+        }
+    }
+}
+
+@media screen and (min-width: $fat-mobile) and (max-width: $tablette) {
+    .profil-flex {
+        .email-ellipsis {
+            @include cell-ellipsis;
+            max-width: 250px;
+        }
+    }
+}
+
+@media screen and (max-width: $fat-mobile) {
+    .profil-flex {
+        .email-ellipsis {
+            @include cell-ellipsis;
+            max-width: 150px;
+        }
+    }
+}
+
+.h2-hobbies {
+    margin-bottom: 10px!important;
+}
+
+.bloc-hobbies {
+    display: flex;
+    align-items: center;
+    margin-bottom: 15px;
+}
+
+.profil-flex {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    .flex-flow {
+        flex-flow: wrap;
+    }
+
+    em {
+        color: #8c939e;
+    }
+
+    .one {
+        display: flex;
+        justify-content: center;
+    }
+
+    .email-ellipsis {
+        margin-right: 20px;
+    }
+
+    .email-ellipsis + .icon-verified {
+        margin-right: 20px;
+    }
+
+    input[type=text]:placeholder-shown {
+        text-overflow: ellipsis;
+    }
+}

package/scss/specifics/calendar/_calendar.scss

@@ -1,3 +1,14 @@
+@font-face {
+  font-family: 'calendar-material-icons';
+  src: url('/calendar/public/font/material-design/fonts/materialdesignicons-webfont.eot');
+  src: url('/calendar/public/font/material-design/fonts/materialdesignicons-webfont.eot') format('embedded-opentype'),
+  url('/calendar/public/font/material-design/fonts/materialdesignicons-webfont.woff2') format('woff2'),
+  url('/calendar/public/font/material-design/fonts/materialdesignicons-webfont.woff2') format('woff'),
+  url('/calendar/public/font/material-design/fonts/materialdesignicons-webfont.ttf') format('truetype');
+  font-weight: normal;
+  font-style: normal;
+}
+
 body.calendar {
   @import "mixins";
   @import "components/index";

package/scss/specifics/calendar/components/_icons.scss

@@ -1,9 +1,21 @@
 i {
   &.attachment::before {
     content: "\e805";
+    font-family: 'generic-icons';
   }
 
   &.cross::before {
     content: "\e866";
+    font-family: 'generic-icons';
+  }
+
+  &.sync::before {
+    content: "\F04E6";
+    font-family: 'calendar-material-icons';
+  }
+
+  &.loading::before {
+    content: '\e85a';
+    font-family: 'generic-icons';
   }
 }

package/scss/specifics/calendar/components/sidebar.scss

@@ -8,6 +8,21 @@
       font-weight: normal;
       color: $calendar-white;
       padding-left: 10px !important;
+
+      &-sync {
+        transform: rotate(-45deg);
+        opacity: 1 !important;
+      }
+
+      &-sync-in-progress {
+        text-indent: unset !important;
+        opacity: 1 !important;
+      }
+
+      &-center-text {
+        text-align: center;
+      }
+
     }
   }
 
@@ -52,6 +67,10 @@
         top: 100%;
         left: 15%;
       }
+
+      &-text {
+        font-weight: initial !important;
+      }
     }
 
   }

package/scss/specifics/class-admin/components/_choose-class.scss

@@ -1,11 +1,6 @@
 @import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300;400;500;600;700&display=swap');
 
 .choose-class {
-    h2 {
-        color: $grey-black;
-        font-family: 'Comfortaa';
-    }
-
     .step-hint {
         color: $grey-black;
         line-height: 24px;

package/scss/specifics/competences/components/_slider.scss

@@ -140,7 +140,7 @@ body.vsco--global {
       background-color: $primary;
       z-index: 3;
       @include rounded(calc($handleSize/2));
-      @include box-shadow(rgba(0, 0, 0, 0.26) 0 1px 3px);
+      @include box-shadow(rgba(0,0,0,0.26) 0 1px 3px);
       //  -webkit-transition:all linear 0.15s;
       //  -moz-transition:all linear 0.15s;
       //  -o-transition:all linear 0.15s;
@@ -206,9 +206,7 @@ body.vsco--global {
       position: absolute;
       top: 0;
       left: 0;
-      margin-left: calc(
-        $handleSize / 2 - $ticksWidth / 2
-      ); // for centering*padding:
+      margin-left: calc($handleSize / 2 - $ticksWidth / 2); // for centering*padding:
       padding: 0;
       &.rz-selected {
         background: $selectedTicksColor;

package/scss/specifics/exercizer/_exercizer.scss

@@ -1,5 +1,3 @@
-@import url("https://fonts.googleapis.com/css2?family=Comfortaa:wght@300;400;500;600;700&display=swap");
-
 body.exercizer {
   -webkit-text-size-adjust: 100%;
   -ms-text-size-adjust: 100%;
@@ -92,7 +90,6 @@ body.exercizer {
 
   .lightbox > .content h2 {
     font-size: 1.125rem;
-    color: $grey-black;
   }
 
   button {

package/scss/specifics/formulaire/_formulaire.scss

@@ -330,6 +330,6 @@ body.formulaire section.main {
   }
 }
 
-body.formulaire section.lightbox {
-  z-index: 10003;
-}
+popover {
+  z-index: 2;
+}

package/scss/specifics/formulaire/components/_dominos.scss

@@ -29,11 +29,11 @@
         align-items: center;
         justify-content: center;
         background: $formulaire-white;
-        
+
         &.empty {
           background: $formulaire-blue;
         }
-        
+
         img {
           max-height: 135px;
         }

package/scss/specifics/formulaire/components/_edit-form.scss

@@ -12,8 +12,12 @@
   &-fixed {
     position: sticky;
     background: linear-gradient(to bottom right, $formulaire-grey-lighter, $formulaire-grey-very-light) fixed;
+    z-index: 3;
     top: 64px;
-    z-index: 10003;
+
+    @media screen and (max-width: $formulaire-screen-tablet) {
+      top: 49px;
+    }
   }
 
   &-title {

package/scss/specifics/formulaire/components/_index.scss

@@ -8,4 +8,5 @@
 @import "prop-form";
 @import "respond-question";
 @import "result-form";
-@import "sortable";
+@import "sortable";
+@import 'containers/index';

package/scss/specifics/formulaire/components/containers/_index.scss

@@ -0,0 +1 @@
+@import 'cursor/index';

package/scss/specifics/formulaire/components/containers/cursor/_index.scss

@@ -0,0 +1 @@
+@import './question-type-cursor';

package/scss/specifics/formulaire/components/containers/cursor/_question-type-cursor.scss

@@ -0,0 +1,202 @@
+.formulaire-cursor {
+
+  &-form  {
+    display: flex;
+    flex-direction: column;
+
+    .cursor-line {
+      display: flex;
+
+      @media screen and (max-width: $formulaire-screen-tablet) {
+        flex-direction: column;
+        margin-top: 3%;
+      }
+
+      .cursor-value-min, .cursor-value-max, .cursor-value-step {
+        display: flex;
+
+        @media screen and (min-width: $formulaire-screen-tablet) {
+          width: 20%;
+        }
+      }
+    }
+
+    em {
+      color: $formulaire-red;
+    }
+
+    input[type="number"] {
+      width: 40px;
+      height: 20px;
+      text-align: center;
+      -moz-appearance: textfield;
+      margin-left: 10px;
+    }
+
+    input::-webkit-outer-spin-button,
+    input::-webkit-inner-spin-button {
+      -webkit-appearance: none;
+      margin: 0;
+    }
+  }
+
+  &-input {
+    &-wrapper {
+      display: flex;
+      justify-content: space-between;
+      margin-bottom: 2%;
+    }
+
+    &-range {
+      display: flex;
+      flex-direction: column;
+      flex-grow: 1;
+      margin: 0 2%;
+
+      .range-slider {
+        position: relative;
+
+        &::before {
+          content: var(--min);
+          pointer-events: none;
+          position: absolute;
+          bottom: 0;
+          left: 0;
+        }
+
+        &::after {
+          content: var(--max);
+          pointer-events: none;
+          position: absolute;
+          bottom: 0;
+          right: 0;
+        }
+      }
+
+      /***** Remove old Styles *****/
+      input[type="range"] {
+        -webkit-appearance: none;
+        appearance: none;
+        background: transparent;
+      }
+
+      /***** Track Styles *****/
+      /* Chrome, Safari, Opera, and Edge Chromium */
+      input[type="range"]::-webkit-slider-runnable-track {
+        background: transparent;
+        z-index: 5;
+      }
+
+      /* Firefox */
+      input[type="range"]::-moz-range-track {
+        background: transparent;
+        z-index: 5;
+      }
+
+
+      /***** Thumb Styles *****/
+      /* Chrome, Safari, Opera, and Edge Chromium */
+      input[type="range"]::-webkit-slider-thumb,  {
+        -webkit-appearance: none; /* Override default look */
+        appearance: none;
+        margin-top: -4px; /* Centers thumb on the track with formula (track height in pixels / 2) - (thumb height in pixels /2) - border size*/
+        background-color: $formulaire-grey-very-light;
+        border: $formulaire-grey-dark 1px solid;
+        border-radius: 100px;
+        height: 16px;
+        width: 16px;
+        cursor: grabbing;
+        z-index: 2;
+      }
+
+      /* Firefox */
+      input[type="range"]::-moz-range-thumb {
+        background-color: $formulaire-grey-very-light;
+        border: $formulaire-grey-dark 1px solid;
+        border-radius: 100px;
+        height: 16px;
+        width: 16px;
+        cursor: grabbing;
+        z-index: 2;
+      }
+
+      /***** Removes default focus *****/
+      /* Removes default focus */
+      input[type="range"]:focus {
+        outline: none;
+      }
+
+      /* Chrome, Safari, Opera, and Edge Chromium */
+      input[type="range"]:focus::-webkit-slider-thumb {
+        outline: none;
+      }
+
+      /* Firefox */
+      input[type="range"]:focus::-moz-range-thumb {
+        outline: none;
+      }
+
+      /***** Pin cursor styles *****/
+      .pin {
+        position: absolute;
+        left: calc((((var(--value) - var(--min)) / (var(--max) - var(--min))) * 100%) - 10px);
+        bottom: 35px;
+        width: 20px;
+        height: 20px;
+        background-color: $formulaire-blue;
+
+        &-content {
+          text-align: center;
+          font-size: 10px;
+          color: white;
+        }
+
+        &::after {
+          position: absolute;
+          left: 0;
+          top: 20px;
+          width: 0;
+          height: 0;
+          border-left: 10px solid transparent;
+          border-right: 10px solid transparent;
+          border-top: 10px solid $formulaire-blue;
+          content: '';
+        }
+      }
+
+      /***** Progress bar styles *****/
+      .filler {
+        &::before {
+          position: absolute;
+          height: 10px;
+          width: calc(((var(--value) - var(--min)) / (var(--max) - var(--min))) * 100%);
+          bottom: 9px;
+          left: 3px;
+          background-color: $formulaire-blue;
+          border-radius: 5px;
+          content: '';
+          z-index: 2;
+        }
+
+        &::after {
+          position: absolute;
+          height: 10px;
+          width: calc(100% - 3px);
+          bottom: 8px;
+          left: 3px;
+          background-color: #efefef;
+          border-radius: 5px;
+          border: #4a4a4a 1px solid;
+          content: '';
+          z-index: 1;
+        }
+      }
+
+      &-values {
+        display: flex;
+        justify-content: space-between;
+        margin: 0 5px;
+      }
+    }
+  }
+}

package/scss/specifics/incidents/components/incidents/_sniplets.scss

@@ -1,11 +1,11 @@
 &.incidents {
- .incident-sniplet {
+  .incident-sniplet {
     &-form {
       display: flex;
       align-items: center;
       button {
         background-color: $orange;
-        margin: 0 ($spacing-M + $spacing-M);
+        margin: 0 calc($spacing-M + $spacing-M);
         &:disabled{
           background: $disabled-color;
         }

package/scss/specifics/magneto/components/_index.scss

@@ -3,4 +3,5 @@
  @import 'switch';
  @import 'buttons';
  @import 'icons';
+ @import 'toasts';
  @import 'lightbox';

package/scss/specifics/magneto/components/_toasts.scss

@@ -0,0 +1,103 @@
+.toasts {
+  position: fixed;
+  top: 74px;
+  right: 25px;
+  width: 350px;
+  z-index: 999999;
+  box-sizing: border-box;
+
+  .toast-content {
+    //@include material-card();
+    margin-bottom: 10px;
+    position: relative;
+    opacity: 0;
+    margin-top: 40px;
+    box-sizing: border-box;
+    font-size: 16px !important;
+    border-left: none !important;
+    height: 0 !important;
+    overflow: hidden;
+    transition: all 0.25s ease;
+
+    .content {
+      padding: 15px 10px;
+      line-height: 28px;
+
+      &:before {
+        @include fonticon();
+        margin-right: 10px;
+      }
+    }
+
+    &.show {
+      margin-top: 10px !important;
+      opacity: 1;
+      height: auto !important;
+      overflow: auto !important;
+    }
+
+    &.confirm {
+      color: darken($green, 35%);
+      background-color: lighten($green, 30%);
+
+      .content:before {
+        content: "\e871";
+      }
+
+      .timer {
+        background-color: darken($green, 15%);
+      }
+    }
+
+    &.info {
+      color: darken($cyan, 35%);
+      background-color: lighten($cyan, 30%);
+
+      .content:before {
+        content: "\e84b";
+      }
+
+      .timer {
+        background-color: darken($cyan, 15%);
+      }
+    }
+
+    &.warning {
+      color: darken($warning-color, 35%);
+      background-color: lighten($warning-color, 30%);
+
+      .content:before {
+        content: "\e903";
+      }
+
+      .timer {
+        background-color: darken($warning-color, 15%);
+      }
+    }
+
+    &.info,
+    &.warning {
+      .content:before {
+        font-size: 20px !important;
+      }
+    }
+
+    .timer {
+      width: 100%;
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      height: 4px;
+      border-bottom-left-radius: 2px;
+      border-bottom-right-radius: 2px;
+      transition-timing-function: linear;
+      transition-property: all;
+      transition-duration: 3s;
+
+      &.animation {
+        width: 0;
+        border-bottom-right-radius: 0;
+      }
+    }
+  }
+}