ode-csslib 4.0.1 → 4.0.2

package/dist/version.txt

@@ -1 +1 @@
-entcore-css-lib=4.0.1 01/12/2022 16:05:16
+entcore-css-lib=4.0.2 09/12/2022 13:25:22

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ode-csslib",
-  "version": "4.0.1",
+  "version": "4.0.2",
   "description": "Open Digital Education Legacy CSS framework",
   "scripts": {
     "copy-fonts": "cpr node_modules/entcore-generic-icons/fonts/ assets/fonts/generic-icons/ -o",

package/scss/specifics/_.scss

@@ -1,6 +1,7 @@
 @import "./cahier-de-textes/cahier-de-textes";
 @import "./calendar/calendar";
 @import "./class-admin/class-admin";
+@import "./crre/crre";
 @import "./exercizer/exercizer";
 @import "./formulaire/formulaire";
 @import "./rbs/rbs";
@@ -29,6 +30,8 @@
 @import "./incidents/incidents";
 @import "./massmailing/massmailing";
 @import "./statistics-presences/statistics-presences";
+@import "./magneto/magneto";
+@import "./minibadge/minibadge";
 
 // TO DO: Remove these specifics rules for calendar (WB-870)
 

package/scss/specifics/calendar/_calendar.scss

@@ -1,7 +1,7 @@
 body.calendar {
 
-  @import "./mixins";
-  @import './components/index';
+  @import "mixins";
+  @import 'components/index';
 
   .calendar.widget {
 
@@ -32,8 +32,8 @@ body.calendar {
       }
     }
   }
+}
 
-  calendar .week-switcher .date-picker-icon {
-    margin-left: 0 !important;
-  }
+calendar .week-switcher .date-picker-icon {
+  margin-left: 0;
 }

package/scss/specifics/calendar/components/_edit-event.scss

@@ -1,4 +1,8 @@
 .editEvent {
+  &-time {
+    margin-bottom: 15px !important;
+  }
+
   &-itemColumn {
     width: max-content;
   }

package/scss/specifics/calendar/components/_index.scss

@@ -1,4 +1,4 @@
-@import "additional.scss";
+@import "additional";
 @import "calendar";
 @import "jquery.timepicker";
 @import "timepicker";

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

@@ -181,6 +181,10 @@ calendar {
     .calendar-current-week {
         max-height: unset;
     }
+
+    .day-number {
+        pointer-events: none !important;
+    }
 }
 
 h1 a {

package/scss/specifics/competences/_competences.scss

@@ -25,4 +25,16 @@
 @import "./sniplets/memento-notes";
 @import "./components/_radioPillbox";
 @import "./components/_tableNote";
-@import "./components/proportionSuiviCompetence";
+@import "./components/_materialize";
+@import "./components/proportionSuiviCompetence";
+@import "./sniplets/switch";
+@font-face {
+  font-family: 'material-icons';
+  src: url('/competences/public/font/material-design/fonts/materialdesignicons-webfont.eot');
+  src: url('/competences/public/font/material-design/fonts/materialdesignicons-webfont.eot') format('embedded-opentype'),
+  url('/competences/public/font/material-design/fonts/materialdesignicons-webfont.woff2') format('woff2'),
+  url('/competences/public/font/material-design/fonts/materialdesignicons-webfont.woff2') format('woff'),
+  url('/competences/public/font/material-design/fonts/materialdesignicons-webfont.ttf') format('truetype');
+  font-weight: normal;
+  font-style: normal;
+}

package/scss/specifics/competences/components/_competences.scss

@@ -292,6 +292,10 @@ body.evaluations {
 
   .disabled{
     opacity: 0.45;
+    cursor: default;
+  }
+  .noClick{
+    cursor: default;
   }
 
   @media screen and (min-device-width:$tablette ) {
@@ -1966,7 +1970,7 @@ body.evaluations {
     }
   }
 
-  @media screen and (min-width: $tablette) {
+  @media screen and(min-width: $tablette) {
     .addRemplacement {
       .addRemplacementTable {
         padding: 15px 40px;
@@ -1986,7 +1990,7 @@ body.evaluations {
     }
   }
 
-  @media screen and (min-width: $tablette) {
+  @media screen and(min-width: $tablette) {
     .addDevoir {
       .skills-list {
         margin: 0 0 0 5% !important;
@@ -3504,6 +3508,13 @@ body.evaluations {
     }
   }
 
+  .lightbox-reportmodel {
+    .warning {
+      width: 61%;
+      display: inline-block;
+    }
+  }
+
 }
 
 

package/scss/specifics/competences/components/_materialize.scss

@@ -0,0 +1,12 @@
+// material icon
+i {
+
+  &.mdi-book::before{
+    font-family:  'material-icons';
+    content: "\F0BC";
+    cursor: pointer;
+    color: lightgrey;
+    font-size: 21px;
+  }
+
+}

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

@@ -107,8 +107,8 @@ body.vsco--global {
     .rz-bar-wrapper {
       left: 0;
       box-sizing: border-box;
-      margin-top: calc($handleSize / -2);
-      padding-top: calc($handleSize / 2);
+      margin-top: -$handleSize / 2;
+      padding-top: $handleSize / 2;
       width: 100%;
       height: $handleSize;
       z-index: 1;
@@ -124,23 +124,23 @@ body.vsco--global {
       height: $barDimension;
       z-index: 1;
       background: $barNormalColor;
-      @include rounded(calc($barDimension/2));
+      @include rounded($barDimension/2);
     }
 
     .rz-selection {
       z-index: 2;
       background: $barFillColor;
-      @include rounded(calc($barDimension/2));
+      @include rounded($barDimension/2);
     }
 
     .rz-pointer {
       cursor: pointer;
       width: $handleSize;
       height: $handleSize;
-      top: calc(($handleSize/-2) + ($barDimension/-2));
+      top: -$handleSize/2 + $barDimension/2;
       background-color: $primary;
       z-index: 3;
-      @include rounded(calc($handleSize/2));
+      @include rounded($handleSize/2);
       @include box-shadow(rgba(0,0,0,0.26) 0 1px 3px);
       //  -webkit-transition:all linear 0.15s;
       //  -moz-transition:all linear 0.15s;
@@ -170,7 +170,7 @@ body.vsco--global {
 
     .rz-bubble {
       cursor: default;
-      bottom: calc($handleSize/2);
+      bottom: $handleSize/2;
       padding: $bubblePadding;
       color: $labelTextColor;
       &.rz-limit {
@@ -184,7 +184,7 @@ body.vsco--global {
       height: 0;
       position: absolute;
       left: 0;
-      top: calc(($ticksHeight - $barDimension) / -2);
+      top: -($ticksHeight - $barDimension) / 2;
       margin: 0;
       z-index: 1;
       list-style: none;
@@ -207,7 +207,7 @@ body.vsco--global {
       position: absolute;
       top: 0;
       left: 0;
-      margin-left: calc($handleSize / 2 - $ticksWidth / 2); // for centering*padding:
+      margin-left: $handleSize / 2 - $ticksWidth / 2; // for centering*padding:
       padding: 0;
       &.rz-selected {
         background: $selectedTicksColor;
@@ -245,8 +245,8 @@ body.vsco--global {
       .rz-bar-wrapper {
         top: auto;
         left: 0;
-        margin: 0 0 0 calc($handleSize / -2);
-        padding: 0 0 0 calc($handleSize / 2);
+        margin: 0 0 0 -$handleSize / 2;
+        padding: 0 0 0 $handleSize / 2;
         height: 100%;
         width: $handleSize;
       }
@@ -259,13 +259,13 @@ body.vsco--global {
       }
 
       .rz-pointer {
-        left: calc($handleSize/-2 + $barDimension/2) !important;
+        left: -$handleSize/2 + $barDimension/2 !important;
         top: auto;
         bottom: 0;
       }
 
       .rz-bubble {
-        left: calc($handleSize/2) !important;
+        left: $handleSize/2 !important;
         margin-left: 3px;
         bottom: 0;
       }
@@ -273,14 +273,14 @@ body.vsco--global {
       .rz-ticks {
         height: 100%;
         width: 0;
-        left: calc($ticksHeight - $barDimension / -2);
+        left: -($ticksHeight - $barDimension) / 2;
         top: 0;
         z-index: 1;
       }
       .rz-tick {
         vertical-align: middle;
         margin-left: auto;
-        margin-top: calc($handleSize / 2 - $ticksWidth / 2); // for centering
+        margin-top: $handleSize / 2 - $ticksWidth / 2; // for centering
       }
       .rz-tick-value {
         left: $ticksValuePositionOnVertical;

package/scss/specifics/competences/sniplets/_services.scss

@@ -8,6 +8,11 @@
   }
   .service-list-container{
     .serviceList {
+      .flex-row{
+        display: inline-flex!important;
+        flex-wrap: wrap;
+        flex-direction: row;
+      }
       &.active{
         box-shadow: -0.2em 0 3px rgba(10,10,10,0.2), 0.2em 0 3px rgba(10,10,10,0.2);
       }
@@ -140,15 +145,13 @@
     display: flex;
     align-items:center;
 
-    input {
+    input,i {
       padding-top: 5px;
+      margin-left: 1em;
     }
     .image-center{
       margin-left: 40%;
     }
-    input,i{
-      margin-left: 1em;
-    }
   }
 
 

package/scss/specifics/competences/sniplets/_switch.scss

@@ -0,0 +1,55 @@
+.switch {
+
+  .tick {
+    width: 40px;
+    height: 12px;
+    display: block;
+    border-radius: 10px;
+    background: $neutral-grey ;
+    position: relative;
+    overflow: visible;
+    margin: 5px;
+
+    &:before {
+      content: ' ';
+      width: 20px !important;
+      height: 20px !important;
+      left: 0 ;
+      display: block;
+      background: $white ;
+      border-radius: 50%;
+      position: absolute;
+      top: -4px;
+      box-shadow: 0 1px 1px $shadow;
+      margin-right: 0;
+      margin-top: 0 !important;
+      border: none;
+    }
+  }
+
+  input[type=checkbox]:checked + .tick {
+    background: $primary-light;
+    &:before {
+      left: 20px;
+      background: $primary-dark ;
+    }
+  }
+
+  input[type=checkbox]:disabled + .tick {
+    background: $disabled-color;
+
+    &:before {
+      background: $disabled-color;
+    }
+  }
+
+  input[type=checkbox]:disabled:checked + .tick {
+    background: $primary-lighter;
+
+    &:before {
+      background: $primary-lighter;
+    }
+  }
+
+}
+