ode-csslib 4.0.9 → 4.0.10-dev.202304211435

package/dist/version.txt

@@ -1 +1 @@
-entcore-css-lib=4.0.9 27/03/2023 11:34:46
+entcore-css-lib=4.0.10 21/04/2023 14:35:49

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ode-csslib",
-  "version": "4.0.9",
+  "version": "4.0.10-dev.202304211435",
   "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/calendar/components/calendar.scss

@@ -26,7 +26,7 @@
     background-color: #ec6045 !important;
 }
 .color-selector .cyan, .row .cyan , nav.vertical ul li a.cyan, .calendarTooltip>.cyan {
-    background-color: $calendar-blue !important;
+    background-color: $calendar-blue;
 }
 .color-selector .grey, .row .grey, nav.vertical ul li a.grey, .calendarTooltip>.grey {
     background-color: #b7b8ba !important;
@@ -156,10 +156,14 @@ calendar {
         }
     }
 
-    legend, .legend>.month-day, button.cyan {
+    legend, .legend>.month-day {
         background: $calendar-blue !important;
     }
 
+    button.cyan {
+        background: $calendar-blue;
+    }
+
     button.previous-timeslots, button.next-timeslots {
         margin-right: 0px;
         margin-left: 0px;
@@ -187,10 +191,6 @@ calendar {
     }
 }
 
-h1 a {
-    color: $calendar-blue !important;
-}
-
 .top-spacing-four {
     margin-top: 0px !important;
 }

package/scss/specifics/crre/_crre.scss

@@ -1759,6 +1759,17 @@ body.crre {
   }
 
   .crre {
+    &-display-duplicate-basket {
+      display: flex;
+      flex-wrap: nowrap;
+      gap: 4px;
+    }
+
+    &-display-duplicate-basket::before {
+      content: "\2022"; /* code unicode pour le point */
+      margin-right: 10px;
+    }
+
     &-order-waiting {
       &-header {
         display: flex;

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

@@ -105,9 +105,11 @@
           }
 
           .question-type {
-            font-size: 12px;
+            question-type-date, question-type-time, question-type-file {
+              font-size: 12px;
+            }
 
-            h4 {
+            h4, .add-choice {
               font-size: 16px;
             }
 
@@ -140,6 +142,12 @@
               resize: none;
               background: none;
             }
+
+            .add-choice {
+              display: flex;
+              flex-direction: column;
+              align-items: center;
+            }
           }
 
           .question-bottom, .section-bottom {

package/scss/specifics/formulaire/components/_icon.scss

@@ -82,9 +82,17 @@ i {
     }
   }
 
+  &.cursor {
+    &-pointer {
+      &:hover {
+        cursor: pointer;
+      }
+    }
+  }
+
   // Icons content
 
-  &.dropbtn::before{
+  &.dropbtn::before {
     content: '\e912';
   }
 
@@ -218,4 +226,9 @@ i {
     font-family: 'formulaire-mdi';
     content: "\F453";
   }
+
+  &.i-restore::before {
+    font-family: 'formulaire-mdi';
+    content: "\F99A";
+  }
 }

package/scss/specifics/formulaire/components/_main.scss

@@ -0,0 +1,3 @@
+.margin-auto {
+    margin: auto;
+}

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

@@ -98,6 +98,10 @@
       &-camembert, &-histogram {
         display: flex;
         justify-content: center;
+
+        &-cursor {
+          flex-direction: column;
+        }
       }
 
       .apexcharts-toolbar {
@@ -105,6 +109,14 @@
       }
     }
 
+    .custom-answers {
+      margin-top: 2%;
+
+      &-title {
+        font-style: italic;
+      }
+    }
+
     .buttons {
       display: flex;
       justify-content: space-between;

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

@@ -16,7 +16,7 @@
         display: flex;
 
         @media screen and (min-width: $formulaire-screen-tablet) {
-          width: 20%;
+          width: 30%;
         }
       }
     }
@@ -44,7 +44,7 @@
     &-wrapper {
       display: flex;
       justify-content: space-between;
-      margin-bottom: 2%;
+      margin: 2% 0;
     }
     
     &-label {
@@ -108,6 +108,8 @@
         height: 16px;
         width: 16px;
         cursor: grabbing;
+        position: relative;
+        bottom: -3px;
         z-index: 2;
       }
 
@@ -118,6 +120,8 @@
         height: 16px;
         width: 16px;
         cursor: grabbing;
+        position: relative;
+        bottom: -3px;
         z-index: 2;
       }
 
@@ -140,9 +144,11 @@
       /***** Pin cursor styles *****/
       .pin {
         position: absolute;
-        left: calc((((var(--value) - var(--min)) / (var(--max) - var(--min))) * 100%) - 10px);
+        left: calc(((var(--value) - var(--min)) / (var(--max) - var(--min))) * 100%
+                    - calc(((var(--value) - var(--min)) / (var(--max) - var(--min))) * 15px)
+                    - 2px);
         bottom: 35px;
-        width: 23px;
+        width: 22px;
         height: 20px;
         background-color: $formulaire-blue;
 
@@ -170,9 +176,10 @@
         &::before {
           position: absolute;
           height: 10px;
-          width: calc(((var(--value) - var(--min)) / (var(--max) - var(--min))) * 100%);
+          width: calc((var(--value) - var(--min))/(var(--max) - var(--min)) * 100%
+                      - calc((var(--value) - var(--min))/(var(--max) - var(--min)) * 15px));
           bottom: 8px;
-          left: 3px;
+          left: 9px;
           background-color: $formulaire-blue;
           border-radius: 5px;
           content: '';
@@ -182,9 +189,9 @@
         &::after {
           position: absolute;
           height: 10px;
-          width: calc(100% - 3px);
+          width: calc(100% - 16px);
           bottom: 8px;
-          left: 3px;
+          left: 9px;
           background-color: #efefef;
           border-radius: 5px;
           content: '';

package/scss/specifics/lystore/components/_index.scss

@@ -11,4 +11,6 @@
 @import "./icons";
 @import "./directives/order-preview";
 @import "./directives/equipment-card";
-@import "./directives/equipment-detail";
+@import "./directives/equipment-detail";
+@import "./directives/campaign-titles-card";
+@import "./title/title-delete-lightbox";

package/scss/specifics/lystore/components/directives/_campaign-titles-card.scss

@@ -0,0 +1,21 @@
+.campaign-titles-card{
+  &-elem{
+    margin-right: 2px;
+    padding: 5px 30px 5px 10px;
+    border-radius: 10px;
+    margin-bottom: 5px;
+    background-color: #e9ebef;
+    color: #8c939e;
+    transition: all .25s ease-in-out;
+    position: relative;
+    font-size: 12px;
+    font-weight: bold;
+    &:hover{
+      border: orange solid 1px;
+    }
+    &-selected {
+      background-color: #8c939e;
+      color: $white;
+    }
+  }
+}

package/scss/specifics/lystore/components/title/_title-delete-lightbox.scss

@@ -0,0 +1,6 @@
+.title-delete-lightbox{
+  &-ul{
+    margin-top: 4px;
+    margin-bottom: 1em;
+  }
+}

package/scss/specifics/support/_mixins.scss

@@ -0,0 +1,48 @@
+/*Calendar module colors*/
+$calendar-blue: #39a5ce;
+$calendar-white: #ffffff;
+$calendar-orange: #ff8500;
+$calendar-black: #000000;
+$calendar-grey: #8c939e;
+$calendar-ode-grey: #3F454F;
+
+
+/*Tooltip mixins*/
+
+
+@mixin tooltipTemplate($width) {
+  font-family: Roboto;
+  visibility: hidden;
+  width: $width;
+  font-size: 12px;
+  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.26);
+  position: absolute;
+  background-color: $calendar-white;
+  color: $calendar-black;
+  padding: 10px;
+  border-radius: 5px;
+  z-index: 1;
+  opacity: 0;
+}
+
+@mixin tooltipVisible() {
+  visibility: visible;
+  opacity: 1;
+  transition: opacity .6s;
+}
+
+@mixin tooltipBottomArrow() {
+  content: ' ';
+  position: absolute;
+  border-left: 5px solid transparent;
+  border-right: 5px solid transparent;
+  border-top: 10px solid $calendar-white;
+}
+
+@mixin tooltipTopArrow() {
+  content: ' ';
+  position: absolute;
+  border-left: 5px solid transparent;
+  border-right: 5px solid transparent;
+  border-bottom: 10px solid $calendar-white;
+}

package/scss/specifics/support/_support.scss

@@ -1,3 +1,4 @@
 body.support {
+  @import "mixins";
   @import "./generic/index";
 }

package/scss/specifics/support/generic/_edit-event.scss

@@ -0,0 +1,73 @@
+.editEvent {
+  &-time {
+    margin-bottom: 15px !important;
+  }
+
+  &-itemColumn {
+    width: max-content;
+  }
+
+  &-attachments {
+    display: flex;
+    flex-direction: column;
+
+    &-buttonSection {
+      display: flex;
+      justify-content: left;
+
+      i {
+        transform: rotate(-45deg);
+      }
+
+    }
+    &-fileSection {
+      display: flex;
+      flex-wrap: wrap;
+      flex-direction: column;
+
+      &-list {
+        max-width: 150px;
+
+        &-item {
+          display: flex;
+
+          &-title {
+            color: $calendar-blue;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+
+          &-cross {
+            font-size: 10px;
+          }
+        }
+
+        &:hover .tooltip-title {
+          @include tooltipVisible();
+        }
+
+        .tooltip-title {
+          @include tooltipTemplate(150px);
+          bottom: 33px;
+          margin-left: -47px;
+
+          &:after {
+            @include tooltipBottomArrow();
+            top: 100%;
+            left: 15%;
+          }
+        }
+
+      }
+    }
+  }
+
+  .content .flex-row {
+    height: 150px;
+  }
+
+  .content::after {
+    content: unset;
+  }
+}

package/scss/specifics/support/generic/_icons.scss

@@ -0,0 +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/support/generic/_index.scss

@@ -1 +1,3 @@
 @import "./toasts";
+@import "./icons";
+@import "./edit-event";