ode-csslib 4.0.0 → 4.0.1

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

@@ -0,0 +1,59 @@
+$md-radio-checked-color: $presences-orange;
+$md-radio-border-color: $presences-orange;
+$md-radio-size: 20px;
+$md-radio-checked-size: 10px;
+$md-radio-ripple-size: 15px;
+
+
+.md-radio {
+
+  &.md-radio-inline {
+    display: inline-block;
+  }
+
+  input[type="radio"] {
+    display: none;
+    &:checked + label:before {
+      border-color: $md-radio-checked-color;
+    }
+    &:checked + label:after {
+      transform: scale(1);
+    }
+  }
+
+  label {
+    display: inline-block;
+    height:$md-radio-size;
+    position: relative;
+    padding: 0 ($md-radio-size + 10px);
+    margin-bottom: 0;
+    cursor: pointer;
+    vertical-align: bottom;
+    &:before, &:after {
+      position: absolute;
+      content: '';
+      border-radius: 50%;
+      transition: all .3s ease;
+    }
+    &:before {
+      left: 0;
+      top: 0;
+      width: $md-radio-size;
+      height: $md-radio-size;
+      border: 2px solid $md-radio-border-color;
+    }
+    &:after {
+      top: $md-radio-size / 2 - $md-radio-checked-size / 2 - 0.2;
+      left: $md-radio-size / 2 - $md-radio-checked-size / 2 - 0.2;
+      width:$md-radio-checked-size;
+      height:$md-radio-checked-size;
+      transform: scale(0);
+      background:$md-radio-checked-color;
+    }
+  }
+
+  *, *:before, *:after {
+    box-sizing: border-box;
+  }
+}
+

package/scss/specifics/presences/components/sniplets/_collective-absence-form.scss

@@ -0,0 +1,195 @@
+.collectiveAbsencesLightbox {
+
+  .content {
+
+    width: 750px;
+
+    .body {
+      h3 {
+        color: $presences-heavy-black;
+      }
+    }
+
+    .form-context {
+      background: $presences-grey-smoke;
+
+      .timeslots {
+        margin-bottom: 7px;
+
+        time-picker {
+          background-color: $presences-white;
+          display: inline-block;
+        }
+
+        select {
+          border: none;
+          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+        }
+      }
+
+      .form-row-2 {
+
+        display: flex;
+        flex-direction: row;
+
+        &-col-1 {
+
+          padding-left: 0 !important;
+
+          .timeslot-choice {
+            margin-bottom: 16px;
+          }
+
+          .table-reason {
+            background: $presences-white;
+            margin-bottom: 16px;
+
+            select {
+              border: none;
+              height: 30px;
+            }
+          }
+
+          .regularisation-check {
+            margin-bottom: 16px;
+          }
+        }
+
+        &-col-2 {
+
+          display: flex;
+          flex-direction: column;
+          margin-top: 5px;
+
+          .comment-info {
+            margin-bottom: 12px;
+          }
+
+          .comment-input {
+            height: 40px;
+            background: $presences-white;
+          }
+        }
+      }
+    }
+
+    .form-absents {
+
+      min-height: 155px;
+
+      &-header {
+        display: flex;
+        flex-direction: row;
+
+        h3 {
+          margin-right: 30px;
+        }
+
+      }
+
+      .count-issues {
+        color: $presences-red;
+        float: right;
+        margin-bottom: 5px;
+      }
+
+      .list-audiences {
+        max-height: 185px;
+        overflow-y: auto;
+
+        &-item {
+
+
+          &-audience {
+
+            &-header {
+
+              .audience-collapse-icon {
+                font-size: 20pt;
+              }
+
+              .audience-name {
+                font-weight: bold;
+                text-align: center;
+              }
+
+              .audience-counts {
+                font-weight: bold;
+              }
+            }
+
+            &-student {
+              background-color: $presences-grey-smoke !important;
+              align-items: center;
+
+              .student-photo {
+                margin-right: 5px;
+                img {
+                  border-radius: 50%;
+                }
+              }
+
+              .student-issue {
+                color: $presences-red;
+              }
+
+              .flex-col {
+                padding: 0;
+              }
+
+            }
+
+            .flex-row {
+              width: 98%;
+              height: 40px;
+              line-height: 40px;
+              padding: 0 5px;
+              background-color: $presences-white;
+              white-space: nowrap;
+              overflow: hidden;
+
+              > div {
+                display: inline-block;
+              }
+            }
+
+            .student-row {
+
+              &-active {
+                &:hover {
+                  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.26);
+                  background-color: $presences-grey-clear;
+                  font-weight: bold;
+                }
+              }
+
+              &-inactive {
+                background-color: $presences-grey-light !important;
+              }
+            }
+          }
+        }
+      }
+    }
+    .nb-students {
+      float: right;
+      margin: 10px 15px 10px 0;
+      font-weight: bold;
+    }
+  }
+
+  .confirm-context {
+    padding: 40px 20px;
+
+    &-text {
+      .nb-absences {
+        font-weight: bold;
+      }
+
+      .nb-issues {
+        font-weight: bold;
+      }
+    }
+  }
+
+}

package/scss/specifics/presences/components/sniplets/_forgotten-notebook-form.scss

@@ -0,0 +1,65 @@
+.forgotten-notebook-form {
+  .content {
+    width: 600px;
+  }
+
+  &-body {
+    &.lightbox-form {
+      padding: 0 20px !important;
+
+      h3 {
+        color: $presences-black;
+        text-align: end;
+        font-weight: bold;
+        margin-bottom: 0;
+      }
+    }
+
+    &-dateTitle {
+      padding-bottom: 8px;
+    }
+
+    &-date {
+      padding-bottom: 8px;
+
+      .date-picker {
+        margin-left: 8px;
+      }
+    }
+
+    &-forgottenNotebook {
+      padding: 16px 0;
+
+      ul {
+        display: flex;
+        align-content: center;
+        justify-content: center;
+        align-items: center;
+        padding: 0;
+      }
+    }
+  }
+
+  &-footer {
+    padding: 0 20px 8px 18px;
+
+    button {
+      margin-right: 8px;
+      padding: 8px 12px;
+    }
+  }
+}
+
+.forgotten-notebook-node {
+  width: 28px;
+  height: 28px;
+  display: inline-block;
+  border-radius: 50%;
+  background: $presences-grey;
+  margin: 0 8px;
+
+  &.active {
+    background: $presences-water-green;
+    box-shadow: $box-shadow-2;
+  }
+}

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

@@ -0,0 +1,10 @@
+@import 'presences-manage';
+@import 'presences-manage-absence';
+@import 'forgotten-notebook-form';
+@import 'presences-statistics-manage';
+@import 'presences-manage-multiple-slots';
+@import 'presences-manage-alert';
+@import 'presences-manage-action';
+@import 'presence-form';
+@import 'presences-manage-punishment';
+@import 'collective-absence-form';

package/scss/specifics/presences/components/sniplets/_presence-form.scss

@@ -0,0 +1,167 @@
+.presenceLightbox {
+
+  /* Body part */
+  &-body {
+    padding: 1px 20px;
+    background: $presences-grey-smoke;
+
+    &-title {
+      color: $black;
+    }
+
+    &-info {
+      &-date {
+        display: flex;
+        align-items: center;
+        margin: 16px 0;
+
+        &-datepicker {
+          margin: 0 40px 0 8px;
+        }
+      }
+
+      &-choice {
+        margin-bottom: 16px;
+
+        .follow-checkbox {
+          margin-left: 16px;
+        }
+      }
+
+      &-time {
+        margin-left: 40px;
+
+        &-start {
+          margin-right: 16px;
+        }
+
+        &-end {
+          margin-left: 16px;
+        }
+      }
+
+      &-timeslot {
+        /* Select css */
+        @include select-timeslot(0, $box-shadow-1);
+
+        .select {
+          height: unset;
+        }
+      }
+
+      &-discipline {
+        display: flex;
+        align-items: center;
+
+        &-select {
+          width: 172px;
+          margin-right: 40px;
+
+          select {
+            margin: 16px 0;
+            border: unset !important;
+          }
+        }
+
+        &-owner {
+          display: flex;
+          flex-direction: column;
+
+          &-info {
+            margin: 24px 0;
+            font-weight: bolder;
+          }
+        }
+      }
+    }
+  }
+
+  /* Footer part */
+  &-footer {
+    padding: 8px 8px 0 8px;
+
+    &-body {
+      &-search {
+        display: flex;
+        align-items: center;
+
+        &-title {
+          color: $presences-black;
+          flex: 1;
+        }
+
+        &-global {
+          flex: 3;
+
+          input {
+            margin: auto;
+          }
+        }
+
+        &-space {
+          flex: 2;
+          visibility: collapse;
+        }
+      }
+
+      .list-students {
+        max-height: 252px;
+        overflow-y: auto;
+
+        /* Comment */
+
+        &-comment {
+          position: relative;
+
+          &-markedStudentComment {
+            background: none;
+            border: 0 solid rgba(170, 170, 170, 0.2);
+            box-sizing: unset;
+            padding: 0;
+            margin: 0;
+            height: auto;
+
+            &:focus {
+              outline: none;
+            }
+          }
+
+          &-icon {
+            position: absolute;
+          }
+        }
+      }
+    }
+
+    &-submit {
+      display: flex;
+      align-items: center;
+      flex-wrap: wrap;
+      justify-content: space-between;
+      padding-top: 16px;
+
+      &-right {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        &-students {
+          font-weight: bold;
+          padding-right: 16px;
+        }
+      }
+
+      &.create {
+        justify-content: flex-end;
+      }
+
+      .button {
+        padding: 8px;
+      }
+    }
+  }
+}
+
+.markedStudents-displayName {
+  justify-content: start !important;
+}