ode-csslib 4.0.0 → 4.0.2

package/scss/specifics/presences/components/containers/_register.scss

@@ -0,0 +1,349 @@
+$student-height: 40px;
+$absence-button-width: 20px;
+
+.register {
+
+  .card-slider {
+    max-width: 100%;
+    overflow-x: auto;
+    height: 120px;
+    overflow-y: hidden;
+    display: flex;
+    margin-bottom: 10px;
+
+    .card {
+      min-width: 150px;
+      flex-basis: 150px;
+    }
+  }
+
+  .register-header {
+    text-align: center;
+    background-color: $white;
+    color: $presences-grey;
+    padding: 5px 0;
+    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.12);
+  }
+
+  .settings {
+    > div {
+      display: inline-block;
+      min-height: 40px;
+
+      &.view-settings {
+        display: inline-block;
+        min-height: 40px;
+        line-height: 40px;
+        font-size: 24px;
+        text-align: center;
+        margin-right: 10px;
+
+        i {
+          float: left;
+          height: 40px;
+          width: 40px;
+          position: relative;
+          color: $presences-grey;
+          opacity: 1 !important;
+          transition: all 0.25s ease;
+
+          &.split-view::before, &.show-list::before {
+            position: absolute;
+            //top: -2px;
+            left: 0;
+            height: 40px;
+            width: 100%;
+            line-height: 40px;
+          }
+
+          &.split-view::before {
+            font-size: 30px;
+          }
+
+          &.active {
+            color: $darkest-grey !important;
+          }
+        }
+      }
+    }
+
+    .valid-content {
+      display: flex !important;
+      align-items: flex-end;
+
+      .check-circle::before {
+        color: $presences-green;
+      }
+    }
+  }
+
+  .student {
+    background-color: $white;
+    margin: 4px 0;
+    padding: 0 10px;
+    height: $student-height;
+    line-height: $student-height;
+    font-size: 15px;
+    display: flex;
+    justify-content: space-between;
+
+    /* tooltip hover */
+    li {
+
+      &:hover .tooltip-top {
+        @include tooltipVisible();
+      }
+
+      .tooltip-top {
+        @include tooltipTemplate();
+        text-align: left;
+        max-width: 115px;
+        padding: 5px;
+        line-height: 20px;
+        transform: scale(0.80);
+        bottom: 20px;
+        margin-left: -23px;
+
+        &:after {
+          @include tooltipBottomArrow();
+          top: 100%;
+          left: 15%;
+        }
+      }
+    }
+
+
+    .student-name.last-course-absent {
+      color: $presences-red;
+    }
+
+    .history-container {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .history {
+      margin: 0;
+      padding: 0;
+      display: flex;
+      list-style-type: none;
+      justify-content: space-between;
+      position: relative;
+      width: 100%;
+      opacity: 1;
+      transition: all 0.25s ease;
+
+      &.disabled {
+        opacity: 0.15;
+      }
+
+      &::before {
+        content: "";
+        position: absolute;
+        top: 50%;
+        left: 0;
+        width: 100%;
+        height: 2px;
+        background-color: $presences-grey;
+        z-index: 0;
+      }
+
+      li {
+        width: $absence-button-width - 2;
+        height: $absence-button-width - 2;
+        display: block;
+        background-color: $presences-grey;
+        border-radius: ($absence-button-width - 2)/2;
+        z-index: 1;
+
+        &.current {
+          box-shadow: 0 0 0 rgba(0, 0, 0, 0.25), 0 5px 5px rgba(0, 0, 0, 0.22);
+          transform: scale(1.25);
+        }
+
+        &.absence {
+          background-color: $presences-red;
+        }
+
+        &.lateness {
+          background-color: $presences-purple;
+        }
+
+        &.departure {
+          background-color: $presences-light-purple;
+        }
+
+        &.remark {
+          background-color: $presences-remark;
+        }
+
+        &.incident {
+          background-color: $presences-grey;
+        }
+      }
+    }
+
+    .absence-button {
+      width: 26px;
+      height: $student-height;
+      display: block;
+      float: left;
+      margin-right: 10px;
+      position: relative;
+      cursor: pointer;
+
+      &::before {
+        content: " ";
+        width: $absence-button-width;
+        height: $absence-button-width;
+        display: block;
+        position: absolute;
+        top: 50%;
+        margin-top: -(($absence-button-width + 1)/2);
+        border-radius: ($absence-button-width/2)+1;
+        border: solid 1px #929292;
+        transition: all 0.3s ease;
+        background-color: $white;
+      }
+
+      &.active::before {
+        background-color: $presences-red;
+        border-color: $presences-red;
+      }
+
+
+      &.disabled::before {
+        background-color: $presences-grey !important;
+        border-color: $presences-grey !important;
+      }
+    }
+
+    .absence-student {
+      display: flex;
+
+      .last-absent {
+        padding-left: 8px;
+
+        &:before {
+          font-size: 17px;
+          color: $presences-red;
+        }
+      }
+
+      .forgotten-notebook {
+        padding-left: 8px;
+
+        &:before {
+          font-size: 17px;
+          color: $presences-water-green;
+        }
+      }
+    }
+
+    .register-event-status {
+      display: flex;
+      flex-direction: column;
+      justify-content: space-around;
+      align-items: center;
+      height: 100%;
+
+      > div {
+        width: 44px;
+        height: $student-height/3;
+        background-color: pink;
+        border-radius: $student-height/5;
+
+
+        &.absence {
+          background-color: $presences-red;
+        }
+
+        &.lateness {
+          background-color: $presences-purple;
+        }
+
+        &.departure {
+          background-color: $presences-light-purple;
+        }
+
+        &.remark {
+          background-color: $presences-remark;
+        }
+
+        &.incident {
+          background-color: $presences-grey;
+        }
+      }
+    }
+  }
+}
+
+.registers {
+  h2 {
+    color: $presences-black;
+  }
+}
+
+/* Button declare absence */
+.register-absence-button {
+  width: 26px;
+  height: 40px;
+  display: block;
+  float: left;
+  margin-right: 10px;
+  position: relative;
+  cursor: pointer;
+
+  &::before {
+    content: " ";
+    width: $absence-button-width;
+    height: $absence-button-width;
+    display: block;
+    position: absolute;
+    top: 50%;
+    margin-top: -(($absence-button-width + 1)/2);
+    border-radius: ($absence-button-width/2)+1;
+    border: solid 1px #929292;
+    transition: all 0.3s ease;
+    background-color: $white;
+  }
+
+  &.active::before {
+    background-color: $presences-red;
+    border-color: $presences-red;
+  }
+
+  &.disabled::before {
+    background-color: $presences-grey !important;
+    border-color: $presences-grey !important;
+  }
+}
+
+/* State color */
+.state {
+  width: 44px;
+  height: $student-height / 3;
+  border-radius: $student-height / 5;
+
+  &.absence {
+    background-color: $presences-red;
+  }
+
+  &.lateness {
+    background-color: $presences-purple;
+  }
+
+  &.departure {
+    background-color: $presences-light-purple;
+  }
+
+  &.remark {
+    background-color: $presences-remark;
+  }
+
+  &.incident {
+    background-color: $presences-grey;
+  }
+}

package/scss/specifics/presences/components/containers/collective-absences/_content.scss

@@ -0,0 +1,12 @@
+.collective-absences-content {
+  &-list {
+    tbody tr {
+      line-height: 50px;
+    }
+
+    .collective-comment-large {
+      position: absolute;
+      max-width: 28%;
+    }
+  }
+}

package/scss/specifics/presences/components/containers/collective-absences/_index.scss

@@ -0,0 +1 @@
+@import 'content';

package/scss/specifics/presences/components/containers/dashboard/_dashboard-student.scss

@@ -0,0 +1,32 @@
+.dashboard-student {
+
+  /**
+   * Remove navbar spacing
+   */
+  margin-left: $navbar-width-removed;
+
+  &-main {
+    flex: 1;
+
+    &-header {
+      display: flex;
+      align-items: center;
+
+      &-title {
+        display: flex;
+      }
+
+      h1 {
+        margin: 0;
+      }
+    }
+  }
+
+  &-statementAbsence {
+    width: 350px;
+    @include mobile {
+      width: stretch;
+    }
+  }
+
+}

package/scss/specifics/presences/components/containers/dashboard/_dashboard.scss

@@ -0,0 +1,134 @@
+.dashboard {
+  h2 {
+    color: $black;
+  }
+
+  .empty-title {
+    color: $presences-middle-grey;
+    font-size: 18px;
+    width: 80%;
+    text-align: center;
+  }
+
+  .tick-color {
+    min-width: 50px;
+    height: 16px;
+    border-radius: 8px;
+    display: inline-block;
+
+    &.purple {
+      background: $presences-purple;
+    }
+
+    &.red {
+      background: $presences-red;
+    }
+
+    &.yellow {
+      background: $presences-main;
+    }
+  }
+
+  .presences-title {
+    display: flex;
+    align-items: center;
+
+    img {
+      height: 60px;
+      max-width: none;
+    }
+
+    h1 {
+      font-size: 36px;
+    }
+
+    .structure {
+      min-width: 300px;
+      font-size: 18px;
+    }
+  }
+
+  &-search-row {
+
+    &-searchs {
+      display: flex;
+      justify-content: space-evenly;
+
+      .row {
+        width: 547px;
+      }
+
+      .search-registry {
+        .input-async-autocomplete {
+          &::before {
+            @include fonticon();
+            content: "\e812";
+          }
+
+          input[type="text"] {
+            border: solid 3px $presences-grey;
+
+            &:focus {
+              border-bottom: solid 3px $presences-grey !important;
+            }
+          }
+        }
+      }
+    }
+
+    .input-async-autocomplete {
+      line-height: 48px;
+
+
+      &::before {
+        @include fonticon();
+        content: "\e930";
+        font-size: 24px;
+        position: absolute;
+        z-index: 10;
+        margin-left: 10px;
+        left: 0;
+      }
+
+      input[type="text"] {
+        background-color: $white;
+        height: 48px;
+        line-height: 48px;
+        border: solid 3px $presences-main;
+        border-radius: 30px;
+        text-indent: 35px;
+        box-shadow: 0 1px 5px rgba(189, 189, 189, 0.75);
+
+        &:focus {
+          border-bottom: solid 3px $presences-main !important;
+        }
+      }
+    }
+  }
+
+  &-absences-counts {
+    display: flex;
+
+    .card {
+      margin-right: 6px;
+      padding: 3px;
+    }
+  }
+
+  .current-date {
+    text-transform: capitalize;
+    color: $black;
+    font-size: 20px;
+    font-weight: bold;
+  }
+
+  .sidebar-widgets {
+    position: fixed;
+    top: 64px;
+    right: 0;
+    height: calc(100% - 64px);
+    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.21);
+    z-index: 1001;
+  }
+
+}

package/scss/specifics/presences/components/containers/dashboard/_index.scss

@@ -0,0 +1,2 @@
+@import 'dashboard';
+@import 'dashboard-student';

package/scss/specifics/presences/components/containers/events/_action-lightbox.scss

@@ -0,0 +1,67 @@
+.actionLightbox {
+  i {
+    position: relative;
+
+    &:hover .tooltip-top {
+      @include tooltipVisible();
+    }
+
+    .tooltip-top {
+      @include tooltipTemplate();
+      bottom: 30px;
+      margin-left: -43px;
+
+      &:after {
+        @include tooltipBottomArrow();
+        top: 100%;
+        left: 15%;
+      }
+    }
+  }
+
+  .select-action {
+    label {
+      position: relative;
+    }
+
+    label::after {
+      content: '';
+      border-color: $presences-main transparent transparent;
+      background: $presences-white;
+      border-width: 11px;
+      border-style: solid;
+
+      pointer-events: none;
+      position: absolute;
+      right: 10px;
+      top: 3px;
+    }
+
+    select {
+      /* Remove default arrow */
+      -webkit-appearance: none;
+      -moz-appearance: none;
+
+      width: 208px;
+      padding: 0 14px;
+      font-size: 16px;
+      border: solid 1px $presences-grey-light;
+    }
+  }
+
+  .margin-top-sm {
+    margin-top: 5px;
+  }
+
+  .margin-top-md {
+    margin-top: 10px;
+  }
+
+  .margin-top-xlg {
+    margin-top: 50px;
+  }
+
+  .text-underline {
+    text-decoration: underline;
+  }
+}

package/scss/specifics/presences/components/containers/events/_bar-history.scss

@@ -0,0 +1,94 @@
+/* ----------------------------
+    Period bar history
+---------------------------- */
+
+.period li {
+  list-style: none;
+  float: left;
+  width: 2%;
+  position: relative;
+}
+
+.period li:before {
+  content: '';
+  width: 12px;
+  height: 12px;
+  border: 2px solid $presences-grey;
+  display: block;
+  z-index: 1;
+  position: relative;
+  border-radius: 50%;
+  background: $presences-grey;
+  color: $presences-grey;
+  text-align: center;
+  font-weight: bold;
+  top: 2px;
+}
+
+.period li:nth-child(4):after {
+  width: 64px;
+}
+
+.period li:after {
+  content: '';
+  position: absolute;
+  width: 100%;
+  height: 3px;
+  background: $presences-grey;
+  top: 18px;
+  left: -50%;
+
+}
+
+.period li:first-child:after, .period li:last-child:before {
+  content: none;
+}
+
+.tableEdit:after {
+  font-family: 'material-icons';
+  content: "\F4F0";
+  font-size: 25px;
+}
+
+.period li:last-child:after {
+  width: 25.5px;
+}
+
+.period li.empty:before {
+  cursor: not-allowed;
+}
+
+.period li.absent-followed:before {
+  border-color: $presences-heavy-black;
+  background: $presences-heavy-black;
+}
+
+.period li.absent:before, .period li.event-absent:before {
+  border-color: $presences-red;
+  background: $presences-red;
+}
+
+.period li.no-regularized:before, .period li.absent-no-regularized:before {
+  border-color: $presences-pink;
+  background: $presences-pink;
+}
+
+.period li.regularized:before, .period li.absent-regularized:before {
+  border-color: $presences-green;
+  background: $presences-green;
+}
+
+.period li.late:before {
+  border-color: $presences-purple;
+  background: $presences-purple;
+}
+
+.period li.departure:before {
+  border-color: $presences-light-purple;
+  background-color: $presences-light-purple;
+}
+
+.period li.action-drag-event:before {
+  border-color: $presences-heavy-pink;
+  background: $presences-heavy-pink;
+}

package/scss/specifics/presences/components/containers/events/_content.scss

@@ -0,0 +1,26 @@
+.events-content {
+  &-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%;
+    }
+  }
+
+  &-end {
+    display: flex;
+    justify-content: center;
+  }
+}