ode-csslib 4.0.0 → 4.0.1

package/scss/specifics/presences-common/components/_menu.scss

@@ -0,0 +1,36 @@
+.menu {
+  .menu-item > a {
+    color: $black;
+    font-size: 18px;
+    padding: 0 10px;
+    text-align: center;
+    margin: 0 5px;
+    height: 50px;
+    display: inline-block;
+    box-sizing: border-box;
+    line-height: 50px;
+
+    &::after {
+      content: " ";
+      display: block;
+      height: 3px;
+      background: $yellow-main;
+      border-radius: 2px;
+      margin-top: -10px;
+      width: 0;
+      transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
+    }
+
+    &.current-state {
+      color: $yellow-main;
+      background-color: $grey-white;
+      border-top-right-radius: 7px;
+      border-top-left-radius: 7px;
+      font-weight: bold;
+
+      &::after {
+        width: 100%;
+      }
+    }
+  }
+}

package/scss/specifics/presences-common/components/_pagination.scss

@@ -0,0 +1,66 @@
+$white: #fff;
+$black: #000000;
+$dark-grey: #7a7a7a;
+$yellow-main: #ffb600;
+
+$width-size: 24px;
+
+$font-size-item: 16px;
+$font-size-arrow: 24px;
+
+$line-heigh-size: 42px;
+
+
+.pagination {
+  font-size: 0;
+  text-align: center;
+
+  &-item {
+    display: inline-block;
+    vertical-align: top;
+    font-size: $font-size-item;
+    font-weight: bold;
+    margin: 0 2px;
+
+    &.arrow > .pagination-item-link {
+      font-size: $font-size-arrow;
+      color: $black;
+
+      &:hover {
+        background-color: $yellow-main;
+        border-color: $yellow-main;
+        color: $white;
+      }
+    }
+
+    &-link {
+      position: relative;
+      display: block;
+      text-align: center;
+      min-width: $width-size;
+      line-height: $line-heigh-size;
+      color: $dark-grey;
+      transition: 0.3s;
+
+      &:hover {
+        background-color: $yellow-main;
+        border-color: $yellow-main;
+        color: $white;
+      }
+    }
+
+    &.active > .pagination-item-link {
+      background-color: $yellow-main;
+      border-color: $yellow-main;
+      color: $white;
+    }
+
+    &:nth-child(3), &:nth-child(5) {
+      pointer-events: none;
+    }
+  }
+}
+
+.pagination-item:empty::before {
+  display: none;
+}

package/scss/specifics/presences-common/components/_presences-nav-bar.scss

@@ -0,0 +1,33 @@
+$presences-grey-light: #F0F0F0;
+
+.presences-nav-bar {
+  @include mobile {
+    margin-left: 30px;
+  }
+
+  nav {
+    height: 80px !important;
+  }
+
+  nav[side-nav] {
+    position: fixed;
+    left: 0;
+    top: 50px;
+    z-index: 10001;
+    transition: all 250ms ease;
+    box-sizing: border-box;
+    width: 0;
+    overflow: hidden;
+    padding: 0;
+    background-color: $presences-grey-light;
+    border-radius: 2px;
+    border-left: none;
+    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.26);
+
+    &.slide {
+      width: 155px;
+      padding: 0 10px;
+      overflow: unset;
+    }
+  }
+}

package/scss/specifics/presences-common/components/_select-children.scss

@@ -0,0 +1,7 @@
+.selected-child {
+  display: flex;
+
+  &-select {
+    margin: 0 15px 0 0;
+  }
+}

package/scss/specifics/presences-common/components/_select.scss

@@ -0,0 +1,3 @@
+option:disabled {
+  display: none;
+}

package/scss/specifics/presences-common/components/index.scss

@@ -0,0 +1,6 @@
+@import "pagination";
+@import "select";
+@import "select-children";
+@import "presences-nav-bar";
+@import "menu";
+@import "export-form";

package/scss/specifics/statistics-presences/_statistics-presences.scss

@@ -0,0 +1,18 @@
+$statistics-presences-main: #ffb600;
+$statistics-presences-yellow-sand: #d68227;
+$statistics-presences-middle-grey: #929292;
+$statistics-presences-black: rgba(68, 68, 68, .87);;
+$statistics-presences-grey-smoke: #f7f7f7;
+$statistics-presences-white: #ffffff;
+$statistics-presences-light-background: #f7f6f6;
+$statistics-presences-red: #e61610;
+$statistics-presences-pink: #ff8a84;
+$statistics-presences-purple: #9c29b7;
+$statistics-presences-light-purple: #f2c9fb;
+$statistics-presences-green: #72bb53;
+
+body.statistics-presences {
+  @import "../presences-common/common";
+  @import "components/index";
+  @import "indicators/index";
+}

package/scss/specifics/statistics-presences/components/_chart-statistics.scss

@@ -0,0 +1,103 @@
+.statistics-chart {
+  background-color: $statistics-presences-white;
+  display: flex;
+
+  &-graph {
+    margin: 20px;
+  }
+
+  &-legend {
+
+    margin: 20px;
+    width: 100%;
+
+    &-item {
+      margin-top: 20px;
+      margin-bottom: 20px;
+    }
+
+    label.checkbox {
+      input[type=checkbox] {
+
+        &.UNREGULARIZED {
+          + span:before {
+            border: 2px solid $statistics-presences-pink;
+          }
+
+          &:checked + span::before {
+            border-color: $statistics-presences-pink;
+            background-color: $statistics-presences-pink;
+          }
+        }
+
+        &.REGULARIZED {
+          + span:before {
+            border: 2px solid $statistics-presences-green;
+          }
+
+          &:checked + span::before {
+            border-color: $statistics-presences-green;
+            background-color: $statistics-presences-green;
+          }
+        }
+
+        &.NO_REASON {
+          + span:before {
+            border: 2px solid $statistics-presences-red;
+          }
+
+          &:checked + span::before {
+            border-color: $statistics-presences-red;
+            background-color: $statistics-presences-red;
+          }
+        }
+
+        &.DEPARTURE {
+          + span:before {
+            border: 2px solid $statistics-presences-light-purple;
+          }
+
+          &:checked + span::before {
+            border-color: $statistics-presences-light-purple;
+            background-color: $statistics-presences-light-purple;
+          }
+        }
+
+        &.LATENESS {
+          + span:before {
+            border: 2px solid $statistics-presences-purple;
+          }
+
+          &:checked + span::before {
+            border-color: $statistics-presences-purple;
+            background-color: $statistics-presences-purple;
+          }
+        }
+
+        &.PUNISHMENT {
+          + span:before {
+            border: 2px solid $statistics-presences-main;
+          }
+
+          &:checked + span::before {
+            border-color: $statistics-presences-main;
+            background-color: $statistics-presences-main;
+          }
+        }
+
+        &.SANCTION {
+          + span:before {
+            border: 2px solid $statistics-presences-yellow-sand;
+          }
+
+          &:checked + span::before {
+            border-color: $statistics-presences-yellow-sand;
+            background-color: $statistics-presences-yellow-sand;
+          }
+        }
+      }
+    }
+  }
+
+
+}

package/scss/specifics/statistics-presences/components/_display-statistics-mode.scss

@@ -0,0 +1,19 @@
+.displayStatisticsMode {
+  i {
+    font-size: 26px;
+    margin-right: 8px;
+    opacity: 50%;
+
+    &:last-child {
+      margin: 0;
+    }
+
+    &.selected {
+      opacity: 100%;
+    }
+
+    &:hover {
+      opacity: 100%;
+    }
+  }
+}

package/scss/specifics/statistics-presences/components/_export-csv-lightbox.scss

@@ -0,0 +1,19 @@
+.exportCSVLightbox {
+
+  /* Header part */
+  &-header {
+  }
+
+  /* Body part */
+  &-body {
+    padding: 20px;
+    background: $statistics-presences-grey-smoke;
+    justify-content: center;
+    display: flex
+  }
+
+  /* Footer part */
+  &-footer {
+    padding: 8px 8px 0 8px;
+  }
+}

package/scss/specifics/statistics-presences/components/_filters.scss

@@ -0,0 +1,57 @@
+.filter-row {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: center;
+
+  i {
+    font-size: 26px;
+  }
+
+
+  .indicator-switch {
+    select {
+      margin: 5px 0;
+    }
+  }
+
+  .displayRate {
+    &.selected {
+      color: $statistics-presences-main;
+    }
+
+    i {
+      position: relative;
+
+      &:hover .tooltip-top {
+        @include tooltipVisible();
+      }
+
+      .tooltip-top {
+        @include tooltipTemplate(190px);
+        bottom: 33px;
+        margin-left: -47px;
+
+        &:after {
+          @include tooltipBottomArrow();
+          top: 100%;
+          left: 15%;
+        }
+      }
+    }
+  }
+
+}
+
+.statistics-presences-filters {
+  h4.disabled {
+    color: $statistics-presences-middle-grey !important;
+  }
+
+  h4 {
+    input[type="number"] {
+      width: 30px;
+      text-align: center;
+    }
+  }
+}

package/scss/specifics/statistics-presences/components/_index.scss

@@ -0,0 +1,7 @@
+@import "tooltip";
+@import "filters";
+@import "display-statistics-mode";
+@import "monthly-table";
+@import "chart-statistics";
+@import "export-csv-lightbox";
+@import "containers/index";

package/scss/specifics/statistics-presences/components/_monthly-table.scss

@@ -0,0 +1,72 @@
+.monthly-indicator {
+
+  .flex-table {
+    .flex-head {
+      z-index: 1;
+
+      .audience-student-header {
+        justify-content: flex-start;
+
+        span {
+          padding-left: 20px;
+        }
+      }
+    }
+
+    .flex-col {
+      flex: 1;
+    }
+
+    .indicator-values-months {
+      padding: 0;
+      flex-grow: 0;
+      flex-shrink: 0;
+      flex-basis: 70%;
+    }
+
+    .flex-body {
+
+      background-color: $white;
+
+      .flex-collapse {
+
+        .student-name {
+          justify-content: flex-start;
+          white-space: nowrap;
+          overflow: hidden;
+          span {
+            padding-left: 20px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+          }
+        }
+      }
+
+      .max-value {
+        background-color: $statistics-presences-main !important;
+        color: $white;
+        font-weight: bold;
+      }
+
+      .total-count {
+        font-size: 18px;
+        font-weight: bold;
+        background-color: $white;
+      }
+
+      .audience-name {
+
+        justify-content: flex-start;
+
+        span {
+          font-weight: bold;
+          padding-left: 20px;
+        }
+      }
+
+      .indicator-value:nth-child(odd) {
+        background-color: $statistics-presences-light-background;
+      }
+    }
+  }
+}

package/scss/specifics/statistics-presences/components/_tooltip.scss

@@ -0,0 +1,36 @@
+@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: $statistics-presences-white;
+  color: $statistics-presences-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 $statistics-presences-white;
+}
+
+@mixin tooltipTopArrow() {
+  content: ' ';
+  position: absolute;
+  border-left: 5px solid transparent;
+  border-right: 5px solid transparent;
+  border-bottom: 10px solid $statistics-presences-white;
+}

package/scss/specifics/statistics-presences/components/containers/_calendar.scss

@@ -0,0 +1,66 @@
+$calendar-item-color: rgba(247, 246, 246, 1);
+$calendar-item-border-color: rgba(96, 96, 96, 0.15);
+$calendar-item-border-radius: 5px;
+
+.calendar {
+  &.calendar-statistics {
+    .week-switcher {
+      display: none;
+    }
+    .calendar-current-week {
+      display: none;
+    }
+    .schedule {
+      .days {
+        button {
+
+        }
+        .day {
+          legend {
+            top: -60px;
+            height: 40px;
+
+            div:nth-child(2) {
+              display: none;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  calendar {
+    .schedule {
+      .schedule-item {
+        .statistics-item-container {
+          display: flex;
+          flex-direction: row;
+          width: 100%;
+          height: 100%;
+        }
+
+        .statistics-item {
+          font-size: 11px;
+          display: flex;
+          width: 100%;
+          background-color: $calendar-item-color;
+          border: solid 1px $calendar-item-border-color;
+          border-radius: $calendar-item-border-radius;
+          flex-direction: column;
+          justify-content: center;
+
+          &.important {
+            background-color: $statistics-presences-main;
+            color: $statistics-presences-white;
+          }
+
+          .data {
+            p {
+              font-size: 2em;
+            }
+          }
+        }
+      }
+    }
+  }
+}

package/scss/specifics/statistics-presences/components/containers/_index.scss

@@ -0,0 +1 @@
+@import "calendar";

package/scss/specifics/statistics-presences/indicators/_global.scss

@@ -0,0 +1,63 @@
+.global-indicator {
+  font-size: 16px;
+
+  &.table {
+    position: relative;
+    padding-top: 45px;
+
+    .thead {
+      position: absolute;
+      width: 100%;
+      top: 0;
+    }
+
+    .th.student, .td.student {
+      flex: 1;
+    }
+  }
+
+  .indicator-value:nth-child(odd) {
+    background-color: $statistics-presences-light-background;
+  }
+
+  .max-value {
+    background-color: $statistics-presences-main !important;
+    color: $white;
+    font-weight: bold;
+  }
+
+  .tbody.count {
+    font-size: 18px;
+    font-weight: bold;
+    background-color: $white;
+
+    .student-count {
+      flex: 2;
+      padding: 10px 20px;
+    }
+  }
+
+  .em-slots-rate {
+    font-size: 9px;
+  }
+
+  .reload {
+    cursor: pointer;
+    &:hover {
+      color: $statistics-presences-main;
+    }
+    &.disabled {
+      color: $statistics-presences-middle-grey;
+      &:hover {
+        color: $statistics-presences-middle-grey;
+      }
+    }
+  }
+
+  .flex-row {
+    min-height: 0 !important;
+    padding-top: 0 !important;
+    padding-bottom: 0 !important;
+  }
+
+}

package/scss/specifics/statistics-presences/indicators/_index.scss

@@ -0,0 +1 @@
+@import "global";