ode-csslib 4.0.0 → 4.0.1

package/scss/specifics/presences/components/containers/events/_event-form-sniplet-lightbox.scss

@@ -0,0 +1,110 @@
+$textAreaHeight: 50px;
+
+.eventFormLightBox {
+
+  /* Header part */
+  &-head {
+    h3 {
+      margin-left: 5px;
+    }
+  }
+
+  /* SubHeader part */
+  &-subHead {
+    background: $presences-grey-smoke;
+    padding: 8px 20px;
+
+    h3 {
+      margin: 0;
+    }
+  }
+
+  /* toggle event type radio part */
+  &-eventsTypeRadio {
+    background: $presences-grey-smoke;
+    padding: 8px 8px 16px 20px;
+  }
+
+  /* Body part */
+  &-body {
+    background: $presences-grey-smoke;
+
+    &-title {
+      color: $black;
+    }
+
+    &-info {
+
+      &-startDate {
+        margin: 16px 0 8px 0;
+        &-datepicker {
+          margin-right: 24px;
+        }
+      }
+
+      &-endDate {
+        margin: 8px 0 16px 0;
+        &-datepicker {
+          margin-right: 24px;
+        }
+      }
+
+      &-reason {
+        padding-left: 0 !important;
+
+        select {
+          border: unset !important;
+        }
+      }
+    }
+
+    &-timeslot {
+      /* Select css */
+      @include select-timeslot(0, $box-shadow-1);
+
+      .select {
+        height: unset;
+      }
+
+      &-margin {
+        margin-right: 10px;
+
+        &-bottom {
+          margin-bottom: 7px;
+        }
+      }
+    }
+
+    &-timepicker {
+      display: inline-block;
+    }
+
+    &-description {
+      background: $white;
+
+      .latenessText {
+        display: flex;
+        padding: calc(#{$textAreaHeight} - 20px) 0 0 0;
+        height: $textAreaHeight;
+        resize: none;
+        border: none;
+
+        border-bottom: 1px solid $presences-grey-incident;
+
+        &::placeholder {
+          color: $presences-grey-incident
+        }
+      }
+    }
+  }
+
+  /* Footer part */
+  &-footer {
+    &-button {
+      padding: 8px;
+      button {
+        margin: 8px;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,8 @@
+.filterLightbox {
+
+  .overflow-y {
+    overflow-y: auto;
+    width: 100%;
+    max-height: 78px;
+  }
+}

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

@@ -0,0 +1,7 @@
+@import "bar-history";
+@import "content";
+@import "table";
+@import "event-form-sniplet-lightbox";
+@import "filter-lightbox";
+@import "action-lightbox";
+@import "planned-absences";

package/scss/specifics/presences/components/containers/events/_planned-absences.scss

@@ -0,0 +1,29 @@
+.planned-absences-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;
+  }
+}

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

@@ -0,0 +1,234 @@
+.events-table {
+  &-body {
+    border-bottom: 1px solid $presences-grey-light;
+
+    .regularized-absence .checkmark {
+      margin-top: -8px;
+    }
+
+    .massmail-status {
+      font-size: 20px;
+    }
+
+    &-student {
+      display: flex;
+      align-items: center;
+
+      &-content {
+        display: flex;
+        flex-direction: column;
+        margin-left: 24px;
+
+        .class-name {
+          color: $presences-grey;
+        }
+      }
+    }
+
+    &-date {
+      text-align: right !important;
+      padding-right: 8px;
+    }
+
+    &-period {
+      padding-left: 0 !important;
+      padding-right: 0 !important;
+
+      ul {
+        width: 370px;
+        padding-left: 0;
+        margin: 0;
+        display: flex;
+        justify-content: center;
+      }
+    }
+
+    &-file {
+      transform: rotate(-90deg);
+      -webkit-transform: rotate(-90deg);
+    }
+
+    &-description {
+      display: none;
+      background: $presences-grey-light;
+
+      &.open {
+        display: table-row;
+      }
+
+      &-content {
+        text-align: center;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        &-checkbox {
+          .checkmark {
+            margin-top: -1px !important;
+          }
+        }
+      }
+    }
+
+    &-color {
+      color: $presences-main;
+    }
+
+    &-colspan {
+      margin-bottom: 0;
+      background: $presences-grey-light;
+    }
+
+    &-td {
+      padding: 0;
+    }
+  }
+}
+
+.table-reason {
+  &-icon {
+    position: absolute;
+    top: -3px;
+    left: 8px;
+  }
+
+  &-select {
+    padding-left: 28px !important;
+  }
+
+  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;
+  }
+}
+
+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: 35px;
+    margin-left: -30px;
+
+    &:after {
+      @include tooltipBottomArrow();
+      top: 100%;
+      left: 15%;
+    }
+  }
+}
+
+i.attach:before {
+  font-size: 24px;
+}
+
+i.add:before {
+  font-size: 24px;
+}
+
+i.addMultiple:before {
+  font-size: 24px;
+}
+
+// Select design
+
+/* regularized-absence */
+.regularized-absence {
+  position: relative;
+  overflow: visible;
+  margin-bottom: 0;
+  cursor: pointer;
+  font-size: 22px;
+  width: 20px;
+  height: 20px;
+}
+
+/* Hide the browser's default checkbox */
+.regularized-absence input {
+  position: absolute;
+  opacity: 0;
+  cursor: pointer;
+  height: 0;
+  width: 0;
+}
+
+/* Create a custom regularized checkbox */
+.checkmark {
+  height: 18px;
+  width: 18px;
+  border: 2px solid $presences-main;
+  border-radius: 4px;
+
+  &.active {
+    background: $presences-main;
+
+    &:after {
+      display: block;
+      left: 7px;
+      top: 3px;
+      width: 6px;
+      height: 11px;
+      border: solid $white;
+      border-width: 0 3px 3px 0;
+      -webkit-transform: rotate(45deg);
+      -ms-transform: rotate(45deg);
+      transform: rotate(45deg);
+    }
+  }
+
+  &.half {
+    background: $presences-main;
+
+    &:after {
+      display: block;
+      left: 10px;
+      top: 5px;
+      height: 11px;
+      border: solid $white;
+      border-width: 0 3px 3px 0;
+      transform: rotate(91deg);
+    }
+  }
+}
+
+/* Create the checkmark/indicator (hidden when not checked) */
+.checkmark:before {
+  display: none;
+}
+
+.checkmark:after {
+  content: "";
+  position: absolute;
+  display: none;
+}

package/scss/specifics/presences/components/containers/registry/_event-card.scss

@@ -0,0 +1,63 @@
+#event-card {
+  display: none;
+  position: absolute;
+}
+
+.registry-event-card {
+  min-width: 400px;
+  background-color: $presences-white;
+  color: $presences-black;
+  border-radius: 5px;
+  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
+
+  &-header {
+    background-color: $presences-main;
+    color: $presences-white;
+    border-top-left-radius: inherit;
+    border-top-right-radius: inherit;
+    display: flex;
+    padding: 4px 8px 8px 8px;
+    flex-direction: column;
+
+    &-title {
+      display: flex;
+      justify-content: space-between;
+    }
+  }
+
+  &-body {
+    display: flex;
+    padding: 8px;
+
+    ul {
+      margin: 0;
+      padding: 0;
+
+      li {
+        padding-bottom: 16px;
+
+        &:last-child {
+          padding: 0;
+        }
+      }
+    }
+
+    &-description {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+
+      &-title {
+        padding: 0 16px;
+      }
+
+      &-date {
+        padding-right: 16px;
+      }
+
+      &-option {
+        padding-left: 32px;
+      }
+    }
+  }
+}

package/scss/specifics/presences/components/containers/registry/_header.scss

@@ -0,0 +1,33 @@
+.registry-header {
+  &-title {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 20px;
+    h1 {
+      margin-bottom: 0;
+    }
+    .search-input {
+      flex-shrink: 2;
+    }
+  }
+}
+
+.registry-eventTypeFilter {
+  display: flex;
+  justify-content: space-between;
+  padding-top: 8px;
+
+  ul {
+    padding-left: 10px !important;
+    padding-right: 10px !important;
+  }
+
+  .forgotten-notebook {
+    padding-left: 30px !important;
+
+    &:before {
+      background-color: $presences-water-green;
+    }
+  }
+}

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

@@ -0,0 +1,3 @@
+@import "header";
+@import "table";
+@import "event-card";

package/scss/specifics/presences/components/containers/registry/_table.scss

@@ -0,0 +1,160 @@
+$registry-line-height: 30px;
+
+ul {
+  list-style-type: none;
+}
+
+/* Empty state design */
+.registry-table-empty {
+  text-align: center;
+
+  &-description {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 24px;
+
+    &-title {
+      color: $presences-middle-grey;
+      padding: 0 12px;
+    }
+  }
+
+  img {
+    width: 32%;
+  }
+}
+
+/* Table design */
+.registry-table {
+  &-title {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    background-color: $presences-white;
+    color: $presences-grey;
+    position: relative;
+    box-shadow: 0 4px 10px -2px rgba(0, 0, 0, 0.3);
+    margin-bottom: 0;
+    padding: 0;
+    height: $registry-line-height;
+    border: 1px solid $presences-grey-clear;
+
+    &-student {
+      width: 100%;
+      text-align: center;
+    }
+
+    &-days {
+      width: 10%;
+      text-align: center;
+    }
+  }
+
+  &-event {
+    display: flex;
+    flex-direction: row;
+    color: $presences-black;
+    height: $registry-line-height;
+    padding: 0;
+    background-color: $presences-beige-light;
+
+    &:hover {
+      background: rgba(255, 182, 0, 0.5) !important;
+      color: $presences-white;
+    }
+
+    &:nth-child(even) {
+      background-color: $presences-white;
+    }
+
+    &-student {
+      display: flex;
+      align-items: center;
+      height: inherit;
+
+      &-name {
+        padding-left: 16px;
+        font-size: 14px;
+      }
+
+      &.m28 {
+        width: 26.3%;
+      }
+
+      &.m29 {
+        width: 25.8%;
+      }
+
+      &.m30 {
+        width: 24.9%;
+      }
+
+      &.m31 {
+        width: 24.4%;
+      }
+    }
+
+    &-period {
+      flex: 1;
+      display: flex;
+      flex-direction: row;
+      padding: 0;
+      margin: 0;
+      height: inherit;
+
+      &-list {
+        display: flex;
+        flex-direction: column;
+        width: 10%;
+        height: inherit;
+        text-align: center;
+        border-left: 1px solid $presences-grey-incident;
+
+        &.day-off {
+          background: $presences-body;
+          border: none;
+        }
+
+        .absent-followed {
+          background-color: $presences-heavy-black;
+        }
+
+        .absent {
+          background-color: $presences-red;
+        }
+
+        .absent-reason-unregularized {
+          background-color: $presences-pink;
+        }
+
+        .absent-reason-regularized {
+          background-color: $presences-green;
+        }
+
+        .lateness {
+          background-color: $presences-purple;
+        }
+
+        .departure {
+          background-color: $presences-light-purple;
+        }
+
+        .forgotten-notebook {
+          background-color: $presences-water-green;
+        }
+
+        .incident {
+          background-color: $presences-grey-incident;
+        }
+
+        @for $i from 1 through 6 {
+          .h#{$i} {
+            height: $registry-line-height / $i;
+          }
+        }
+      }
+    }
+  }
+}

package/scss/specifics/presences/components/containers/statement-absence/_content.scss

@@ -0,0 +1,56 @@
+.statement-absence-content {
+  &-titles {
+
+  }
+
+  &-list {
+    &-body {
+      &-content {
+        &-inside {
+          cursor: context-menu !important;
+
+          &-student {
+            display: flex !important;
+            flex-direction: column !important;
+            align-items: normal !important;
+
+            &-content {
+              display: flex;
+              justify-content: normal;
+
+              &-class {
+                font-family: 'Roboto Light', arial, sans-serif;
+                font-size: 14px;
+              }
+            }
+          }
+
+          &-date {
+            background-color: $presences-main;
+            color: $presences-white;
+            display: flex;
+            flex-direction: column;
+          }
+
+          &-download {
+            i {
+              transform: rotate(-90deg);
+            }
+          }
+        }
+      }
+    }
+  }
+
+  switch {
+    .switch {
+      input[type=checkbox]:checked + .tick {
+        background: $presences-light-green;
+      }
+
+      input[type=checkbox]:checked + .tick:before {
+        background: $presences-dark-green;
+      }
+    }
+  }
+}

package/scss/specifics/presences/components/containers/statement-absence/_index.scss

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

package/scss/specifics/presences/components/material/_index.scss

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