ode-csslib 4.0.0 → 4.0.1

package/scss/specifics/presences/components/sniplets/_presences-manage-absence.scss

@@ -0,0 +1,291 @@
+&.sniplet-presence-form {
+  .sniplet-form {
+
+    /* title */
+    .sniplet-header {
+      display: flex;
+      align-items: center;
+      padding: 32px 16px;
+
+      &-icon {
+        font-size: 40px;
+        padding-right: 24px;
+
+        i::before {
+          color: $presences-black;
+        }
+      }
+
+      &-title {
+        color: $presences-black;
+      }
+    }
+
+    /* input */
+    .sniplet-input {
+      padding: 0 16px 24px 16px;
+      display: flex;
+      flex-direction: column;
+
+      &-alert-rule {
+        input[type=checkbox]:checked+span::before {
+          background-color: unset !important;
+          border-color: $presences-orange !important;
+          content: "" !important;
+        }
+        input[type=checkbox]+span::before {
+          border-color: $presences-orange !important;
+          background-color: $presences-orange !important;
+          transform: rotate(0deg);
+          content: "\e871";
+        }
+      }
+
+      &-title {
+        padding-bottom: 16px;
+
+        &-large {
+          font-size: 24px;
+        }
+      }
+
+      &-color {
+        display: flex;
+        flex-direction: row;
+        list-style-type: none;
+        padding: 0;
+        align-items: center;
+
+        li {
+          margin-right: 24px;
+        }
+
+        li.active {
+          border-color: $presences-black;
+          border-style: solid;
+        }
+      }
+
+      &-flex {
+        display: flex;
+      }
+    }
+
+    /* add / lists */
+    .sniplet-addList {
+      padding: 0 16px 32px 16px;
+      display: flex;
+      flex-direction: column;
+
+      button {
+        width: 97px;
+        margin-bottom: 24px;
+        background-color: $presences-orange;
+
+        &:disabled {
+          background: $disabled-color;
+        }
+      }
+
+      &-content {
+        &-list {
+          list-style-type: none;
+          padding: 0;
+          font-weight: bold;
+          display: flex;
+          flex-flow: wrap;
+
+          &-item {
+            list-style: none;
+            display: flex;
+            width: 50%;
+            line-height: 25px;
+            justify-content: space-between;
+
+            &-icon {
+
+              &-orange {
+                color: $presences-orange;
+              }
+
+              &-yellow {
+                color: $presences-main;
+              }
+            }
+
+            &-title {
+              align-self: center;
+              display: flex;
+
+              .presence-edit {
+                visibility: hidden;
+                opacity: 0;
+                transition: visibility 0.3s linear, opacity 0.3s linear;
+              }
+
+              &:hover .presence-edit {
+                visibility: visible;
+                opacity: 1;
+              }
+
+              &-color {
+                margin: 0 8px;
+              }
+
+            }
+
+            &-icons {
+              width: 100px;
+            }
+          }
+
+          &-punishment-item {
+            list-style: none;
+            display: flex;
+            width: 500px;
+            line-height: 25px;
+            justify-content: space-between;
+          }
+        }
+
+        &-punishment-list {
+          list-style-type: none;
+          padding: 0;
+          font-weight: bold;
+        }
+      }
+    }
+
+    .codeMassmailing {
+      position: relative;
+      display: inline-block;
+    }
+
+    .codeMassmailing .tooltiptext {
+      font-family: Roboto;
+      visibility: hidden;
+      min-width: 120px;
+      font-size: 12px;
+      box-shadow: 0 2px 20px rgba(0, 0, 0, 0.26);
+      position: absolute;
+      background-color: $presences-white;
+      color: $presences-black;
+      padding: 5px;
+      text-align: center;
+      border-radius: 5px;
+      z-index: 1;
+      bottom: 140%;
+      left: -5%;
+      opacity: 0;
+      transition: opacity 0.3s;
+
+      &.tooltipDoubleLine {
+        bottom: 120% !important;
+      }
+    }
+
+    .codeMassmailing .tooltiptext::after {
+      content: "";
+      position: absolute;
+      top: 100%;
+      left: 50%;
+      margin-left: -5px;
+      border-left: 5px solid transparent;
+      border-right: 5px solid transparent;
+      border-top: 10px solid $presences-white;
+    }
+
+    .codeMassmailing:hover .tooltiptext {
+      visibility: visible;
+      opacity: 1;
+    }
+  }
+
+  .sniplet-form-lightbox {
+
+    .content {
+      padding: 0;
+    }
+
+    &-head {
+      background: $presences-blue !important;
+      margin-bottom: 8px;
+    }
+
+    &-body {
+      display: flex;
+      flex-direction: column;
+
+      &-warning {
+        color: $presences-red;
+      }
+
+      &-input {
+        margin: 16px 0;
+        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+      }
+
+      &-color {
+        ul {
+          display: flex;
+          flex-direction: row;
+          list-style-type: none;
+          padding: 0;
+        }
+
+        li {
+          margin-right: 24px;
+        }
+
+        li.active {
+          border-color: $presences-black;
+          border-style: solid;
+        }
+      }
+
+      &-regularisable, &-compliance, &-alert-rule {
+        display: flex;
+        margin: 16px 0;
+      }
+      &-alert-rule {
+        input[type=checkbox]:checked+span::before {
+          background-color: unset !important;
+          border-color: $presences-orange !important;
+          content: "" !important;
+        }
+        input[type=checkbox]+span::before {
+          border-color: $presences-orange !important;
+          background-color: $presences-orange !important;
+          transform: rotate(0deg);
+          content: "\e871";
+        }
+      }
+    }
+  }
+
+  editor {
+    lightbox {
+      .flex-row {
+        text-align: unset;
+        width: 80%;
+      }
+
+      .content {
+        padding: 15px;
+      }
+
+      .close-lightbox {
+        color: unset;
+      }
+    }
+
+    .mathjax {
+      lightbox {
+        .close-lightbox {
+          display: none;
+        }
+      }
+    }
+  }
+
+}

package/scss/specifics/presences/components/sniplets/_presences-manage-action.scss

@@ -0,0 +1,7 @@
+.sniplet-manage-action {
+  .sniplet-header-icon {
+    .add:before {
+      font-size: 40px;
+    }
+  }
+}

package/scss/specifics/presences/components/sniplets/_presences-manage-alert.scss

@@ -0,0 +1,45 @@
+.flex-column {
+  display: flex;
+  flex-direction: column;
+}
+
+i {
+  &.minus-sign {
+    font-size: 30px;
+  }
+
+  &.plus-sign{
+    font-size: 30px;
+  }
+}
+
+.format-input {
+  width: 60px;
+  height: 30px;
+  text-align: center;
+  border-bottom: 1px solid $presences-grey-incident;
+  border-bottom-width: thin;
+  border-top: none;
+  border-right: none;
+  border-left: none;
+}
+
+.flex-center-input {
+  display: flex;
+  align-items: center;
+}
+
+.flex-center-text-input {
+  display: flex;
+  align-items: center;
+}
+
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
+}
+
+input[type=number] {
+  -moz-appearance:textfield; /* Firefox */
+}

package/scss/specifics/presences/components/sniplets/_presences-manage-multiple-slots.scss

@@ -0,0 +1,22 @@
+.sniplet-manage-multiple-slots {
+
+  .sniplet-input {
+    display: flex;
+    flex-direction: row !important;
+
+    switch {
+      margin-left: 16px;
+
+      .switch {
+
+        input[type=checkbox]:checked + .tick {
+          background: $presences-orange;
+        }
+        input[type=checkbox]:checked + .tick:before {
+          background: $presences-orange;
+        }
+      }
+    }
+
+  }
+}

package/scss/specifics/presences/components/sniplets/_presences-manage-punishment.scss

@@ -0,0 +1,17 @@
+.sniplet-manage-punishment {
+  .sniplet-flex {
+    display: flex;
+  }
+
+  .sniplet-select-width {
+    width: 300px;
+  }
+
+  .sniplet-input-margin {
+    margin: 25px 0 30px;
+  }
+
+  .sniplet-punishment-margin-top-xlg {
+    margin-top: 50px;
+  }
+}

package/scss/specifics/presences/components/sniplets/_presences-manage.scss

@@ -0,0 +1,30 @@
+&.presences-manage {
+  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.1);
+  padding: 5px;
+
+  .presence-navigation-item {
+    color: $presences-black;
+    flex-direction: column;
+
+    &:hover {
+      color: $presences-orange;
+      transition: color 250ms ease;
+    }
+
+    .flex-row {
+      justify-content: center;
+      align-content: center;
+    }
+
+    .presence-icon {
+      font-size: 30px;
+      min-height: 0;
+      justify-content: center;
+
+      .add:before {
+        font-size: 30px;
+      }
+    }
+  }
+
+}

package/scss/specifics/presences/components/sniplets/_presences-statistics-manage.scss

@@ -0,0 +1,11 @@
+.sniplet-statistics {
+  .values-row {
+    .four {
+      flex: 0 0 20%;
+    }
+
+    .eight {
+      flex: 0 0 80%;
+    }
+  }
+}

package/scss/specifics/presences/components/widgets/_absences.scss

@@ -0,0 +1,68 @@
+.absences-widget {
+  .absence-widget-student-list {
+    height: 51px;
+    overflow-y: auto;
+  }
+
+  .widget-filters {
+    background: $presences-main;
+    color: $white;
+    padding: 0 15px 15px 15px;
+    text-transform: capitalize;
+    font-size: 14px;
+
+    .date-picker {
+      width: 85%;
+      box-shadow: 0 2px 3px rgba(0, 0, 0, 0.12);
+    }
+  }
+
+  .search-field {
+    height: 90px;
+  }
+
+  .absence-list {
+    overflow-y: scroll;
+    height: calc(100% - 90px - 71px - 54px);
+    display: block;
+
+    &.empty {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+
+      .tick-color {
+        &:first-child {
+          margin-bottom: 50px;
+        }
+
+        &:last-child {
+          margin-top: 50px;
+        }
+      }
+    }
+  }
+
+  .event {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    padding: 5px 10px;
+    box-sizing: border-box;
+
+    &:nth-child(odd) {
+      background: $presences-grey-light;
+    }
+
+    > div {
+      display: flex;
+      justify-content: space-between;
+    }
+
+    .regularized-absence {
+      display: inline-block;
+    }
+  }
+}
+

package/scss/specifics/presences/components/widgets/_alerts.scss

@@ -0,0 +1,133 @@
+$alert-height: 117px;
+
+.widget-alerts {
+  .grid {
+    display: grid;
+    grid-template-columns: auto auto auto auto;
+    grid-column-gap: 25px;
+    grid-template-rows: $alert-height;
+  }
+
+  .widget-alert {
+    border-radius: 7px;
+    background-color: $white;
+    position: relative;
+    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.21);
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    align-items: center;
+
+    &:after {
+      content: ' ';
+      width: 100%;
+      height: 10px;
+      position: absolute;
+      border-bottom-left-radius: 7px;
+      border-bottom-right-radius: 7px;
+      display: block;
+      bottom: 0;
+      right: 0;
+    }
+
+    &.absences:after, &.UNJUSTIFIED:after, &.ABSENCE:after {
+      background-color: $presences-red;
+    }
+
+    &.JUSTIFIED:after {
+      background-color: $presences-pink;
+    }
+
+    &.lateness:after, &.LATENESS:after {
+      background-color: $presences-purple;
+    }
+
+    &.incidents:after, &.INCIDENT:after {
+      background-color: $presences-grey;
+    }
+
+    &.textbooks:after, &.FORGOTTEN_NOTEBOOK:after {
+      background-color: $presences-water-green;
+    }
+
+    &.bold {
+      font-weight: bold;
+    }
+
+    .value {
+      font-size: 50px;
+      font-weight: bold;
+      margin-top: 25px;
+    }
+
+    .subtitle {
+      font-size: 14px;
+      margin-bottom: 10px;
+    }
+  }
+
+
+  .grid-block {
+    display: block;
+  }
+
+  .flex {
+    display: flex;
+  }
+
+  .padding-10 {
+    padding: 10px;
+  }
+
+  .padding-13 {
+    padding: 13px;
+  }
+
+  .margin-top-5 {
+    margin-top: 5px;
+  }
+
+  .margin-right-5 {
+    margin-right: 5px;
+  }
+
+  .card-alert {
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+    width: 245px;
+    height: 90px;
+    display: inline-table;
+    margin: 10px;
+
+    &:hover {
+      box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
+    }
+  }
+
+  .space-between {
+    justify-content: space-between;
+  }
+
+  .selected {
+    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
+    &:after {
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+    &.ABSENCE {
+      box-shadow: 0 0 0 5px $presences-red;
+    }
+
+    &.LATENESS {
+      box-shadow: 0 0 0 5px $presences-purple;
+    }
+
+    &.INCIDENT {
+      box-shadow: 0 0 0 5px $presences-grey;
+    }
+
+    &.FORGOTTEN_NOTEBOOK {
+      box-shadow: 0 0 0 5px $presences-water-green;
+    }
+  }
+
+}

package/scss/specifics/presences/components/widgets/_forgotten_register.scss

@@ -0,0 +1,60 @@
+.forgotten-registers-widget {
+  &-tooltip {
+    display: flex;
+    align-items: center;
+    padding: 8px 0;
+
+    i {
+      position: relative;
+
+      &:hover .tooltip-top {
+        @include tooltipVisible();
+      }
+
+      .tooltip-top {
+        @include tooltipTemplate();
+        bottom: 30px;
+        margin-left: -43px;
+
+        &:after {
+          @include tooltipBottomArrow();
+          top: 100%;
+          left: 15%;
+        }
+      }
+    }
+
+    &-text {
+      padding: 0 8px;
+    }
+
+    .switch input[type=checkbox]:checked + .tick {
+      background: $presences-light-green;
+
+      &:before {
+        background: $presences-dark-green;
+      }
+    }
+  }
+  .card-slider.empty {
+    display: flex;
+    align-items: center;
+    flex-direction: row;
+    width: 100%;
+    justify-content: center;
+
+    .empty-title {
+      width: auto !important;
+    }
+
+    .tick-color {
+      &:first-child {
+        margin-right: 50px;
+      }
+
+      &:last-child {
+        margin-left: 50px;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,7 @@
+@import "alerts";
+@import "statements";
+@import "remarks";
+@import "absences";
+@import "register";
+@import "presences";
+@import "forgotten_register";

package/scss/specifics/presences/components/widgets/_presences.scss

@@ -0,0 +1,24 @@
+.presences-widget {
+  .presence {
+    display: flex;
+    font-size: 18px;
+    font-weight: bold;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    color: $presences-grey;
+  }
+
+
+  .empty-state {
+    display: flex;
+    justify-content: center;
+    text-align: center;
+    align-items: center;
+
+    .empty-title {
+      width: auto;
+      margin: 0 50px;
+    }
+  }
+}