ode-csslib 4.0.0 → 4.0.2

package/scss/specifics/presences/components/_events-card.scss

@@ -0,0 +1,192 @@
+@mixin listStyleSquare() {
+  content: "■";
+  font-weight: bold;
+  display: inline-block;
+  width: 2em;
+  margin-left: -1.2em;
+  position: absolute;
+  border-bottom: 1px solid $presences-grey-light;
+}
+
+.events-card {
+  flex-direction: column;
+  border-radius: 7px;
+  background-color: $presences-white;
+  box-shadow: $box-shadow;
+  display: flex;
+  justify-content: center;
+
+  &-content {
+    padding: 8px 16px;
+
+    &-title {
+      color: $presences-grey-average;
+      margin-bottom: 8px;
+    }
+
+    &-inside {
+      display: flex;
+
+      &-side {
+        display: flex;
+        flex-direction: column;
+        text-align: center;
+        width: 80px;
+
+        &-eventCount {
+          font-size: 48px;
+          min-height: 48px;
+          font-weight: bold;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+
+        &-eventOption {
+          margin-top: 8px;
+          color: $presences-grey-average;
+          font-size: 11px;
+          white-space: nowrap;
+        }
+      }
+
+      &-list {
+        width: 100%;
+        margin: 0;
+        @include mobile {
+          font-size: 10px;
+        }
+
+        li {
+          display: flex;
+          justify-content: space-between;
+          border-bottom: 1px solid $presences-grey-light;
+          line-height: 32px;
+          margin-bottom: 8px;
+
+          &.red-event::before {
+            @include listStyleSquare();
+            color: $presences-red;
+          }
+
+          &.pink-event::before {
+            @include listStyleSquare();
+            color: $presences-pink;
+          }
+
+          &.purple-event::before {
+            @include listStyleSquare();
+            color: $presences-purple;
+          }
+
+          &.yellow-event::before {
+            @include listStyleSquare();
+            color: $presences-main;
+          }
+
+          &.turquoise-event::before {
+            @include listStyleSquare();
+            color: $presences-water-green;
+          }
+
+          &.lightpurple-event::before {
+            @include listStyleSquare();
+            color: $presences-light-purple;
+          }
+
+          &.green-event::before {
+            @include listStyleSquare();
+            color: $presences-green;
+          }
+
+          &.grey-event::before {
+            @include listStyleSquare();
+            color: $presences-grey-incident;
+          }
+        }
+
+        &-first {
+          li {
+            &:last-child {
+              border-bottom: 0;
+              margin: 0;
+
+              &:before {
+                border-bottom: 0;
+              }
+            }
+          }
+
+          &.collapsed {
+            li {
+              &:last-child {
+                border-bottom: 1px solid $presences-grey-light;
+                margin-bottom: 8px;
+
+                &:before {
+                  border-bottom: 1px solid $presences-grey-light;
+
+                }
+              }
+            }
+          }
+        }
+
+        &-full {
+          li {
+            &:last-child {
+              border-bottom: 0;
+              margin: 0;
+
+              &:before {
+                border-bottom: 0;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  &-toggle {
+    display: flex;
+    flex-direction: column;
+    text-align: center;
+    color: $presences-white;
+    border-bottom-left-radius: 7px;
+    border-bottom-right-radius: 7px;
+    height: 23px;
+
+    &.red-event {
+      background-color: $presences-red;
+    }
+
+    &.pink-event {
+      background-color: $presences-pink;
+    }
+
+    &.purple-event {
+      background-color: $presences-purple;
+    }
+
+    &.yellow-event {
+      background-color: $presences-main;
+    }
+
+    &.turquoise-event {
+      background-color: $presences-water-green;
+    }
+
+    &.lightpurple-event {
+      background-color: $presences-light-purple;
+    }
+
+    &.green-event {
+      background-color: $presences-green;
+    }
+
+    &.grey-event {
+      background-color: $presences-grey-incident;
+    }
+  }
+}

package/scss/specifics/presences/components/_events-legend.scss

@@ -0,0 +1,105 @@
+.event-legend {
+  box-sizing: border-box;
+  float: left;
+  display: block;
+  position: relative;
+  border-radius: 5px;
+  background: $white;
+  box-shadow: $box-shadow-1;
+  font-size: 14px;
+  margin-left: 5px;
+  padding-right: 5px;
+  height: fit-content;
+
+  ul {
+    list-style-type: none;
+    display: flex;
+    padding: 0;
+    margin-top: 10px;
+    margin-bottom: 10px;
+
+    > li {
+      padding-left: 30px;
+      position: relative;
+      display: inline-block;
+
+      &.absence-no-reason:before {
+        background-color: $presences-red;
+      }
+
+      &.absence-not-regularized:before {
+        background-color: $presences-pink;
+      }
+
+      &.absence-followed:before {
+        background-color: $presences-heavy-black;
+      }
+
+      &.absence-regularized:before {
+        background-color: $presences-green;
+      }
+
+      &.lateness:before {
+        background-color: $presences-purple;
+      }
+
+      &.departure:before {
+        background-color: $presences-light-purple;
+      }
+
+      &.remark:before {
+        background-color: $presences-remark;
+      }
+
+      &.incident:before {
+        background-color: $presences-grey;
+      }
+
+      &.last-absent {
+        display: inline-flex;
+        padding-left: 8px;
+
+        i {
+          font-size: 20px;
+          padding-right: 4px;
+
+          &:before {
+            color: $presences-red;
+          }
+        }
+      }
+
+      &.forgotten-notebook {
+        display: inline-flex;
+        padding-left: 8px;
+
+        i {
+          font-size: 20px;
+          padding-right: 4px;
+
+          &:before {
+            color: $presences-water-green;
+          }
+        }
+      }
+
+      &:before {
+        content: ' ';
+        width: 17px;
+        height: 17px;
+        display: inline-block;
+        border-radius: 50%;
+        position: absolute;
+        margin-top: -9px;
+        top: 50%;
+        margin-left: -24px;
+      }
+    }
+  }
+}
+
+.events-legend-event-list {
+  width: 52%;
+  display: flex;
+  justify-content: flex-end;
+}

package/scss/specifics/presences/components/_events-table.scss

@@ -0,0 +1,98 @@
+.events-table-component {
+  &-empty {
+    text-align: center;
+
+    &-description {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding-bottom: 24px;
+
+      &-title {
+        color: $presences-middle-grey;
+        padding: 0 12px;
+      }
+    }
+
+    img {
+      width: 25%;
+    }
+  }
+
+  .planned-absences-legend {
+    &-day-students {
+      padding-left: 0 !important;
+    }
+
+    i:before {
+      font-size: 20px;
+    }
+  }
+
+  &-list {
+
+    &-head {
+      &-calendar, &-followed, &-action, &-regularized {
+        max-width: 5%;
+      }
+    }
+
+    .flex-col {
+      flex: 1;
+    }
+
+    &-item {
+      .flag:before {
+        font-size: 25px;
+        color: $presences-main;
+      }
+
+      .flag-outline:before {
+        font-size: 25px;
+      }
+
+      &-student {
+        display: flex;
+        flex-direction: row;
+
+        &-item {
+
+          background-color: transparent !important;
+          box-shadow: none !important;
+
+          &-picture {
+            max-width: 20%;
+            align-self: center;
+          }
+
+          &-name {
+            display: flex;
+            flex-direction: column;
+            align-items: flex-start !important;
+
+            &-audience {
+              color: $presences-grey;
+              font-size: 14px;
+            }
+          }
+
+          span {
+            align-self: flex-start;
+          }
+        }
+      }
+
+      .table-reason {
+        label::after {
+          top: 12px;
+        }
+      }
+
+      &-calendar, &-followed, &-action, &-regularized {
+        max-width: 5%;
+      }
+
+    }
+  }
+}
+

package/scss/specifics/presences/components/_icons.scss

@@ -0,0 +1,326 @@
+i {
+  &.presence-home::before {
+    font-family: 'material-icons';
+    content: "\F56E";
+  }
+
+  &.register::before {
+    font-family: 'material-icons';
+    content: "\F0E6";
+  }
+
+  &.absence::before {
+    font-family: 'material-icons';
+    content: "\F413";
+  }
+
+  &.lateness::before {
+    font-family: 'material-icons';
+    content: "\F413";
+  }
+
+  &.presence:before {
+    font-family: 'material-icons';
+    content: "\F5C7";
+  }
+
+  &.events:before {
+    font-family: 'material-icons';
+    content: "\F005";
+  }
+
+  &.calendar-remove:before {
+    font-family: 'material-icons';
+    content: "\F0F4";
+  }
+
+  &.uncolored-time-picker:before {
+    content: "\F017";
+  }
+
+  &.collective-absences::before {
+    font-family: 'material-icons';
+    content: "\e7fb";
+  }
+
+  &.permission::before {
+    font-family: 'material-icons';
+    content: "\f02f";
+  }
+
+  &.incident::before {
+    font-family: 'material-icons';
+    content: "\F026";
+  }
+
+  &.punishment::before {
+    font-family: 'material-icons';
+    content: "\F6D4";
+  }
+
+  &.sanction::before {
+    font-family: 'material-icons';
+    content: "\f29b";
+  }
+
+  &.mass-mailing::before {
+    font-family: 'material-icons';
+    content: "\fab8";
+  }
+
+  &.statistics-presences::before {
+    font-family: 'material-icons';
+    content: "\f128";
+  }
+
+  &.testimony::before {
+    font-family: 'material-icons';
+    content: "\f362";
+  }
+
+  &.collective-absences::before {
+    font-family: 'material-icons';
+    content: "\fb34";
+  }
+
+  &.split-view::before {
+    font-family: 'material-icons';
+    content: "\f575";
+  }
+
+  &.show-list::before {
+    font-family: 'material-icons';
+    content: "\F279";
+  }
+
+  &.notify-bell::before {
+    font-family: 'material-icons';
+    content: "\F09E";
+  }
+
+  &.notify-bell.active::before {
+    font-family: 'material-icons';
+    content: "\F09F";
+  }
+
+  &.attach:before {
+    font-family: 'material-icons';
+    content: '\F066';
+  }
+
+  &.add:before {
+    font-family: 'material-icons';
+    content: '\F416';
+  }
+
+  &.addMultiple:before {
+    font-family: 'material-icons';
+    content: '\F334';
+  }
+
+  &.account:before {
+    font-family: 'material-icons';
+    content: "\F004";
+  }
+
+  &.account-outline:before {
+    font-family: 'material-icons';
+    content: "\F013";
+  }
+
+  &.table-edit:before {
+    font-family: 'material-icons';
+    content: "\F4F0";
+  }
+
+  &.alertes:before {
+    font-family: 'material-icons';
+    content: "\F149";
+  }
+
+  &.punishment-active:before {
+    font-family: 'material-icons';
+    content: "\F241";
+  }
+
+  &.publipostage:before {
+    font-family: 'material-icons';
+    content: "\F214";
+  }
+
+  &.presences-statistics:before {
+    font-family: 'material-icons';
+    content: "\F128";
+  }
+
+  &.file-checked:before {
+    font-family: 'material-icons';
+    content: "\F216";
+  }
+
+  &.visible:before {
+    font-family: 'material-icons';
+    content: "\F208";
+  }
+
+  &.invisible:before {
+    font-family: 'material-icons';
+    content: "\F6D0";
+  }
+
+  &.delete:before {
+    font-family: 'material-icons';
+    content: "\F5AD";
+  }
+
+  &.presence-edit:before {
+    font-family: 'material-icons';
+    content: '\F3EB';
+  }
+
+  &.filter:before {
+    font-family: 'material-icons';
+    content: '\F236';
+  }
+
+  &.percent:before {
+    font-family: 'material-icons';
+    content: '\F3f0';
+  }
+
+  &.last-absent:before {
+    font-family: 'material-icons';
+    content: '\F99A';
+  }
+
+  &.forgotten-notebook:before {
+    font-family: 'material-icons';
+    content: '\F0C6';
+  }
+
+  &.close-xs:before {
+    font-family: 'material-icons';
+    content: '\F156';
+  }
+
+  &.help:before {
+    font-family: 'material-icons';
+    content: '\F2D7';
+  }
+
+  &.plus-sign:before {
+    font-family: 'material-icons';
+    content: '\F415';
+  }
+
+  &.minus-sign:before {
+    font-family: 'material-icons';
+    content: '\F374';
+  }
+
+  &.disciplines:before {
+    font-family: 'material-icons';
+    content: '\F5C7';
+  }
+
+  &.circle:before {
+    font-family: 'material-icons';
+    content: '\F9DD';
+  }
+
+  &.comments:before {
+    font-family: 'material-icons';
+    content: '\F188';
+  }
+
+  &.phone-android:before {
+    font-family: 'material-icons';
+    content: '\F11D';
+  }
+
+  &.presences-email:before {
+    font-family: 'material-icons';
+    content: '\F1EE';
+  }
+
+  &.pdf:before {
+    font-family: 'material-icons';
+    content: '\F225';
+  }
+
+  &.arrow-right:before {
+    font-family: 'material-icons';
+    content: '\F054';
+  }
+
+  &.open-in-new:before {
+    font-family: 'material-icons';
+    content: '\F3CC';
+  }
+
+  &.check-circle:before {
+    font-family: 'material-icons';
+    content: '\F5E0';
+  }
+
+  &.cross-circle:before {
+    font-family: 'material-icons';
+    content: '\F15A';
+  }
+
+  &.chevron-right:before {
+    font-family: 'material-icons';
+    content: '\F142';
+  }
+
+  &.chevron-left:before {
+    font-family: 'material-icons';
+    content: '\F141';
+  }
+
+  &.chevron-up:before {
+    font-family: 'material-icons';
+    content: '\F143';
+  }
+
+  &.chevron-down:before {
+    font-family: 'material-icons';
+    content: '\F140';
+  }
+
+  &.alert-octagon:before {
+    font-family: 'material-icons';
+    content: '\F029';
+  }
+
+  &.presences-table:before {
+    font-family: 'material-icons';
+    content: '\f4eb';
+  }
+
+  &.clipboard-alert-outline:before {
+    font-family: 'material-icons';
+    content: '\fcd3';
+  }
+
+  &.flag:before {
+    font-family: 'material-icons';
+    content: '\f23b';
+  }
+
+  &.flag-outline:before {
+    font-family: 'material-icons';
+    content: '\f23d';
+  }
+
+  &.silverware:before {
+    font-family: 'material-icons';
+    content: '\f4a3';
+  }
+
+  &.hotel:before {
+    font-family: 'material-icons';
+    content: '\f2e3';
+  }
+
+}