ode-csslib 4.0.5 → 4.0.6

package/dist/version.txt

@@ -1 +1 @@
-entcore-css-lib=4.0.2 13/01/2023 16:11:43
+entcore-css-lib=4.0.6 27/01/2023 08:53:44

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ode-csslib",
-  "version": "4.0.5",
+  "version": "4.0.6",
   "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/minibadge/_minibadge.scss

@@ -1,3 +1,14 @@
+@font-face {
+  font-family: 'minibadge-icons';
+  src: url('/minibadge/public/font/material-design/fonts/materialdesignicons-webfont.eot');
+  src: url('/minibadge/public/font/material-design/fonts/materialdesignicons-webfont.eot') format('embedded-opentype'),
+  url('/minibadge/public/font/material-design/fonts/materialdesignicons-webfont.woff2') format('woff2'),
+  url('/minibadge/public/font/material-design/fonts/materialdesignicons-webfont.woff2') format('woff'),
+  url('/minibadge/public/font/material-design/fonts/materialdesignicons-webfont.ttf') format('truetype');
+  font-weight: normal;
+  font-style: normal;
+}
+
 body.minibadge, .sniplet.minibadge {
   @import "mixins";
 
@@ -11,6 +22,12 @@ body.minibadge, .sniplet.minibadge {
     }
   }
 
+  .desktop-disabled {
+    @include desktop {
+      display: none;
+    }
+  }
+
   portal > div.main > section.main {
     @include mobile {
       padding: 0;
@@ -18,12 +35,24 @@ body.minibadge, .sniplet.minibadge {
     }
   }
 
-  .minibadge-main-title {
-    font-family: $minibadge-font-secondary;
-    color: $minibadge-red;
+  .minibadge-button-title-settings {
+    margin-left: auto;
+    background: $minibadge-blue-dark;
+    right: 0;
+    @include mobile {
+      margin-right: 10px;
+    }
+  }
+
+  .minibadge-main {
+    &-title {
+      margin: 0;
+      font-family: $minibadge-font-secondary;
+      color: $minibadge-red;
 
-    img {
-      width: 34px;
+      img {
+        width: 34px;
+      }
     }
   }
 

package/scss/specifics/minibadge/_mixins.scss

@@ -30,7 +30,7 @@ $minibadge-font-secondary: 'Comfortaa', cursive;
 }
 
 @mixin tablet {
-  @media (min-width: 769px) and (max-width:992px) {
+  @media (min-width: 769px) and (max-width: 992px) {
     @content;
   }
 }
@@ -81,4 +81,8 @@ $minibadge-font-secondary: 'Comfortaa', cursive;
 
 .minibadge-delete-button {
   background-color: $minibadge-grey-light;
+}
+
+.cursor-default {
+  cursor: default;
 }

package/scss/specifics/minibadge/components/_card.scss

@@ -5,6 +5,15 @@
     & * {
       cursor: default;
     }
+
+    .minibadge-card-footer {
+      background: $minibadge-blue-light;
+
+      &:hover {
+        background: initial;
+      }
+    }
+
   }
 
   &-list {
@@ -76,9 +85,11 @@
 
 minibadge-card-type-statistic {
   width: 100%;
+  height: 90px;
 
   .minibadge-card {
     flex: 1;
+    align-self: stretch;
 
     &-title {
       flex: none;

package/scss/specifics/minibadge/components/_container-header.scss

@@ -0,0 +1,9 @@
+.minibadge-container-header {
+  button {
+    margin-right: 10px;
+
+    i {
+      line-height: 19px;
+    }
+  }
+}

package/scss/specifics/minibadge/components/_container.scss

@@ -3,7 +3,7 @@
     flex: 1;
     row-gap: 8px;
     background: $minibadge-white;
-    @include paddingXY(8px, 16px);
+    padding: 30px;
 
     &.disabled {
       opacity: 0.5;

package/scss/specifics/minibadge/components/_given-array.scss

@@ -2,6 +2,7 @@
   background-color: $minibadge-white;
   padding: 1em;
   border-radius: 10px;
+  margin-top: 30px;
 
   & i {
     margin: 0 1%;

package/scss/specifics/minibadge/components/_icon.scss

@@ -1,114 +1,110 @@
 i {
   &.calendar-month::before{
-    font-family: 'material-icons';
-    content: "\FDFA";
+    font-family: 'minibadge-icons';
+    content: "\F0E17";
   }
   &.calendar-range::before {
-    font-family: 'material-icons';
-    content: "\F678";
+    font-family: 'minibadge-icons';
+    content: "\F0679";
   }
   &.trash::before{
-    font-family: "material-icons";
-    content: "\FA79";
+    font-family: "minibadge-icons";
+    content: "\F0A79";
   }
   &.sort-arrow-up::before{
-    font-family: 'material-icons';
-    content: "\F4BC";
+    font-family: 'minibadge-icons';
+    content: "\F04BD";
 
   }
   &.sort-arrow-down::before{
-    font-family: 'material-icons';
-    content: "\F4BD";
-  }
-  &.sort-arrow-up::before{
-    font-family: 'material-icons';
-    content: "\F4BC";
-
-  }
-  &.sort-arrow-down::before{
-    font-family: 'material-icons';
-    content: "\F4BD";
+    font-family: 'minibadge-icons';
+    content: "\F04BC";
   }
 
   &.user-circle::before {
-    font-family: 'material-icons';
-    content: "\F009";
+    font-family: 'minibadge-icons';
+    content: "\F0009";
   }
 
   &.close::before {
-    font-family: 'material-icons';
-    content: "\F156";
+    font-family: 'minibadge-icons';
+    content: "\F0156";
   }
 
   &.chevron-left::before {
-    font-family: 'material-icons';
-    content: "\F141";
+    font-family: 'minibadge-icons';
+    content: "\F0141";
   }
   &.target::before{
-    font-family: "material-icons";
-    content: "\F8C8";
+    font-family: "minibadge-icons";
+    content: "\F08C9";
   }
   &.human-arrow::before{
-    font-family: "material-icons";
-    content: "\FB2F";
+    font-family: "minibadge-icons";
+    content: "\F0B53";
   }
   &.star::before {
-    font-family: 'material-icons';
-    content: "\F4CE";
+    font-family: 'minibadge-icons';
+    content: "\F04CE";
   }
 
   &.icon-info::before {
-    font-family: 'material-icons';
-    content: "\F2FC";
+    font-family: 'minibadge-icons';
+    content: "\F02FC";
   }
 
   &.icon-info-circle::before {
-    font-family: 'material-icons';
-    content: "\F2FD";
+    font-family: 'minibadge-icons';
+    content: "\F02FD";
   }
 
   &.earth::before {
-    font-family: 'material-icons';
-    content: "\F1E7";
+    font-family: 'minibadge-icons';
+    content: "\F01E7";
   }
 
   &.dots-vertical::before {
-    font-family: 'material-icons';
-    content: "\F1D9";
+    font-family: 'minibadge-icons';
+    content: "\F01D9";
   }
 
   &.refused::before {
-    font-family: 'material-icons';
-    content: "\F697";
+    font-family: 'minibadge-icons';
+    content: "\F0376";
   }
 
   &.settings::before {
-    font-family: 'material-icons';
-    content: "\F493";
+    font-family: 'minibadge-icons';
+    content: "\F0493";
   }
 
   &.close-circle::before {
-    font-family: 'material-icons';
-    content: "\F159";
+    font-family: 'minibadge-icons';
+    content: "\F0159";
   }
 
   &.check-circle::before {
-    font-family: 'material-icons';
-    content: "\F5E0";
+    font-family: 'minibadge-icons';
+    content: "\F05E0";
   }
 
   &.check-decagram::before {
-    font-family: 'material-icons';
-    content: "\F790";
+    font-family: 'minibadge-icons';
+    content: "\F0791";
   }
 
   &.chevron::before {
-    font-family: 'material-icons';
-    content: "\F142";
+    font-family: 'minibadge-icons';
+    content: "\F0142";
   }
 
   &.trophy::before {
-    font-family: 'material-icons';
-    content: "\F538";
+    font-family: 'minibadge-icons';
+    content: "\F0538";
+  }
+
+  &.icon-badge::before {
+    font-family: 'minibadge-icons';
+    content: "\F0987";
   }
 }

package/scss/specifics/minibadge/components/_index.scss

@@ -13,4 +13,5 @@
 @import "list";
 @import "user-list";
 @import "paging";
-@import "container";
+@import "container";
+@import "container-header";

package/scss/specifics/minibadge/components/_list.scss

@@ -10,8 +10,26 @@
     align-items: center;
     overflow: hidden;
 
+    &-number {
+      align-self: baseline;
+    }
+
+    &-img {
+      margin-top: 0;
+      padding: 5px 0;
+      border-radius: 50%;
+      border: 1px solid transparent;
+      width: 30px;
+      height: 30px;
+      vertical-align: middle;
+    }
+
     &-distinction {
       color: $minibadge-grey;
+      flex-shrink: 0;
+      &-italic {
+        font-style: italic;
+      }
     }
 
   }

package/scss/specifics/minibadge/components/_navbar.scss

@@ -3,6 +3,7 @@
   background: $minibadge-white;
 
   @include desktop {
+    margin-top: 20px;
     text-transform: uppercase;
   }
 

package/scss/specifics/minibadge/components/_periode-picker.scss

@@ -1,7 +1,6 @@
 .periode-picker {
   &-container {
     position: relative;
-    float: left;
     display: flex;
     align-items: center;
     column-gap: 10px;
@@ -15,7 +14,7 @@
     font-size: 16px;
     font-family: Roboto;
     color: $minibadge-grey-dark;
-    border: none;
+    border: solid #ebebeb 2px;
     border-radius: 3px;
     @include mobile {
       width: 128px;

package/scss/specifics/minibadge/components/_type.scss

@@ -2,8 +2,7 @@
   margin-top: 20px;
   background: $minibadge-white;
   height: 100%;
-  @include paddingY(15px);
-  @include paddingX(15px);
+  padding: 15px;
 
   @include desktop {
     flex-direction: column;
@@ -13,6 +12,7 @@
 
   @include mobile {
     font-size: 16px;
+    margin-top: 10px;
   }
 
   > h2, h3 {
@@ -32,6 +32,8 @@
   }
 
   &-id {
+    margin-top: 10px;
+
     @include desktop {
       height: auto;
       width: auto;
@@ -49,6 +51,8 @@
   }
 
   &-description {
+    margin-top: 10px;
+
     @include desktop {
       flex: 1;
     }

package/scss/specifics/minibadge/components/_user-list.scss

@@ -18,16 +18,6 @@
     align-items: center;
     overflow: hidden;
 
-    &-avatar {
-      margin-top: 0;
-      padding: 5px 0;
-      border-radius: 50%;
-      border: 1px solid transparent;
-      width: 30px;
-      height: 30px;
-      vertical-align: middle;
-    }
-
     &-precision {
       font-style: italic;
     }

package/scss/specifics/minibadge/containers/_badge-given.scss

@@ -1,14 +1,18 @@
 .badge-given{
   &-filter{
     display: flex;
-    column-gap: 1%;
-    align-items: center;
-    margin: 1em 0;
+    align-items: end;
+    margin-top: 10px;
+
     @include mobile{
       margin-left: 8px;
     }
+
+    .periode-picker-container {
+      margin-right: 10px;
+    }
   }
   &-search{
-    margin: 0;
+    margin-top: revert;
   }
 }

package/scss/specifics/minibadge/containers/_container.scss

@@ -19,9 +19,5 @@
       @include marginX(10px);
     }
   }
-
-  i.settings:hover {
-    color: $minibadge-orange;
-  }
 }
 

package/scss/specifics/minibadge/containers/_statistics.scss

@@ -1,10 +1,12 @@
 .minibadge-statistics {
+  line-height: 30px;
+
   .minibadge-container-component {
     h3 > .minibadge-title {
       font-weight: bold;
     }
 
-    &-body > container-body {
+    &-body > container-body, .minibadge-statistics-cards, .minibadge-statistics-badges {
       gap: 50px
     }
   }
@@ -25,6 +27,7 @@
     .minibadge-container-card {
       flex: 1;
       justify-content: center;
+      padding: 30px;
 
       .minibadge-title {
         font-size: 30px;
@@ -43,13 +46,15 @@
 
   &-top-structures {
     flex: 5;
+  }
 
-    .minibadge-container-card-title {
-      display: none;
-    }
+  &-top-assigning, &-top-receiving {
+    flex: 1;
+  }
 
+
+  &-top-structures, &-top-assigning, &-top-receiving {
     .minibadge-card {
-      flex: 1;
       background: $minibadge-white;
       border: none;
       color: $minibadge-orange;
@@ -67,11 +72,11 @@
     }
 
     &-list {
-      flex: 3;
+      flex: 1;
     }
   }
 
-  &-most-allowed {
+  &-top-most-allowed {
     flex: 5;
 
     .check-circle {
@@ -79,7 +84,7 @@
     }
   }
 
-  &-most-refused {
+  &-top-most-refused {
     flex: 4;
 
     .close-circle {
@@ -97,33 +102,69 @@
 
       .minibadge-most-assigned {
         padding: 10px;
-        align-items: stretch;
+        align-items: center;
+
+        &-detail {
+          flex: 3;
+        }
+
+        &-others {
+          flex: 3;
+        }
+
+        minibadge-card-type {
+          flex: 2;
+        }
+
+        .minibadge-list-item-display, .minibadge-list-item-distinction {
+          flex: 1;
+          overflow: auto;
+        }
       }
     }
 
-    .minibadge-most-assigned-detail, .minibadge-most-assigned-others {
-      flex: 1;
-      line-height: 30px;
+    .minibadge-most-assigned-detail {
+      flex: 2;
+    }
+
+    .minibadge-most-assigned-others {
+      flex: 3;
     }
 
     minibadge-card-type {
       .minibadge-card {
-        height: 146px;
-        width: 176px;
+        height: 176px;
+        width: 100%;
       }
     }
 
   }
+
+  .minibadge-statistics-most-allowed {
+    i.trophy {
+      color: $minibadge-orange;
+    }
+  }
+
 }
 
 minibadge-card-type-statistic {
+  padding: 10px;
+
   .minibadge-card {
     height: auto;
+
     .minibadge-card-body {
-      flex: revert;
+      align-self: stretch;
+
+      container-body {
+        align-self: stretch;
+      }
+
       .minibadge-card-picture {
         flex: revert;
         @include marginX(10px);
+        height: 100%;
       }
     }
   }

package/scss/specifics/rbs/_rbs.scss

@@ -6,8 +6,9 @@ $rbs-dimgrey: #696969;
 $rbs-green: #09ac00;
 $rbs-red: #dd0000;
 
-body.rbs {
-  @import "./components/index";
+
+body.rbs, .sniplet.rbs {
+  @import "components/index";
 
   .input-size {
     width: 40px;

package/scss/specifics/rbs/components/_index.scss

@@ -1,4 +1,5 @@
 @import "icons";
 @import "check-boxes";
 @import "resource-table";
-@import "calendar";
+@import "calendar";
+@import "sniplets";

package/scss/specifics/rbs/components/_sniplets.scss

@@ -0,0 +1,17 @@
+.sniplet.calendarBooking {
+
+  &-bookingFormBody {
+    float: unset !important;
+  }
+
+  &-bookingInfoBox {
+    border: 1px solid;
+    border-color: rgba($darkest-grey, 0.2);
+    border-radius: 2px;
+
+    &-bookingInfo {
+      color: unset;
+    }
+  }
+
+}