ode-csslib 4.0.0 → 4.0.1

package/scss/specifics/incidents/components/punishments/form/_index.scss

@@ -0,0 +1,3 @@
+@import "punishment-duty-form";
+@import "punishment-exclude-form";
+@import "punishment-detention-form";

package/scss/specifics/incidents/components/punishments/form/_punishment-detention-form.scss

@@ -0,0 +1,38 @@
+.punishment-detention-form {
+  &-dates {
+    margin: $spacing-LXS 0;
+
+    &-date {
+      padding-bottom: $spacing-LXS;
+
+      .timeslot-select {
+        margin-right: $spacing-M;
+      }
+    }
+
+    &-place {
+      input {
+        border: none;
+        background: none;
+        border-bottom: 1px dotted $grey-light;
+
+        &:focus {
+          outline: none;
+        }
+      }
+    }
+  }
+
+  &-createSlot {
+    margin-bottom: $spacing-L;
+
+    &:hover {
+      color: $yellow-main;
+    }
+
+    &-icon {
+      font-size: 2em;
+      margin-right: $spacing-LXS;
+    }
+  }
+}

package/scss/specifics/incidents/components/punishments/form/_punishment-duty-form.scss

@@ -0,0 +1,14 @@
+.punishment-duty-form {
+  &-date {
+    padding-bottom: $spacing-M;
+  }
+
+  &-instruction {
+    padding: $spacing-LXS 0 $spacing-M 0;
+
+    textarea {
+      background: none;
+      margin: $spacing-M 0
+    }
+  }
+}

package/scss/specifics/incidents/components/punishments/form/_punishment-exclude-form.scss

@@ -0,0 +1,55 @@
+.punishment-exclude-form {
+  &-date {
+    padding-bottom: $spacing-M;
+
+    date-picker {
+      margin-right: $spacing-L;
+    }
+  }
+
+  &-mandatory {
+    padding: $spacing-LXS 0 $spacing-L 0;
+    display: inline-flex;
+    align-items: center;
+  }
+
+  &-absence {
+    display: inline-flex;
+    align-items: center;
+    margin-bottom: $spacing-L;
+
+    &.add-absence {
+      margin-bottom: $spacing-XXS;
+    }
+
+  }
+
+  &-absence-anomaly {
+    color: $deep-red;
+    span {
+      font-weight: bold;
+      color: $dark-red;
+    }
+  }
+
+  &-absence-reason {
+    margin-top: $spacing-LXS;
+    margin-bottom: $spacing-L;
+
+    &-follow {
+      padding-left: $spacing-M;
+    }
+  }
+
+  switch {
+    .switch {
+      input[type=checkbox]:checked + .tick {
+        background: $green;
+      }
+
+      input[type=checkbox]:checked + .tick:before {
+        background: $deep-green;
+      }
+    }
+  }
+}

package/scss/specifics/incidents/memento/_incidents.scss

@@ -0,0 +1,77 @@
+#memento-incidents-sniplet {
+  position: relative;
+
+  .disabled {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: rgba(255, 255, 255, 0.8);
+    z-index: 1;
+  }
+
+  .text-align-center {
+    text-align: center;
+  }
+
+  .background-yellow {
+    background-color: $yellow-main;
+  }
+
+  .text-white {
+    color: $white;
+  }
+
+  .min-height-45 {
+    min-height: 45px !important;
+  }
+
+  .max-height-80 {
+    max-height: 80px !important;
+  }
+
+  .overflow-y {
+    overflow: auto;
+    max-height: 200px;
+  }
+
+  .pagination-sniplet {
+    > ul {
+      float: none !important;
+      text-align: right;
+    }
+  }
+
+  .open-in-new::before {
+    font-size: 25px;
+    margin-right: 0;
+  }
+
+  .incident-flex {
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .incident-filters {
+    font-size: 14px;
+  }
+
+  .checkbox {
+    margin-left: 20px;
+  }
+
+  .check-circle::before {
+    font-size: 25px;
+    color: $incident-light-green;
+  }
+
+  .absences::before {
+    font-size: 25px;
+    color: $incidents-grey-average;
+  }
+
+}

package/scss/specifics/massmailing/_massmailing.scss

@@ -0,0 +1,105 @@
+@import "variables";
+
+$massmailing-main: #ffb600;
+$massmailing-bgcolor: rgba(255, 255, 255, 0.6);
+$massmailing-grey: #c0c0c0;
+
+body.massmailing, .sniplet.presences {
+  @import "components/index";
+
+  .text-align-left {
+    text-align: left;
+  }
+
+  .text-align-right {
+    text-align: right;
+  }
+
+  .red-text {
+    color: $presences-red;
+  }
+
+  .hr {
+    width: 100%;
+    height: 2px;
+    background: $massmailing-grey;
+    opacity: 0.5;
+    border-radius: 1px;
+  }
+
+  h1.title {
+    padding: 0 10px;
+    margin-left: 5px;
+  }
+
+  .massmailing-content {
+    padding: 0 10px;
+    margin: 0 5px;
+    background-color: $massmailing-bgcolor;
+  }
+
+  .date-filters {
+    padding-top: 10px;
+  }
+
+  i.filter {
+    font-size: 26px;
+  }
+
+  .massmailing-filters {
+    h4 {
+      font-size: 20px;
+      font-weight: normal;
+
+      input[type="number"] {
+        width: 50px;
+        font-size: 20px;
+      }
+    }
+  }
+
+  .counters-cell {
+    padding: 0;
+    position: relative;
+
+    .counters {
+      height: 100%;
+      display: flex;
+      position: absolute;
+      top: 0;
+      left: 0;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+
+      .counter {
+        width: 40px;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: $white;
+
+        &.REGULARIZED {
+          background: $presences-green;
+        }
+
+        &.UNREGULARIZED {
+          background: $presences-pink;
+        }
+
+        &.PUNISHMENT, &.SANCTION {
+          background: $presences-main;
+        }
+
+        &.NO_REASON {
+          background: $presences-red;
+        }
+
+        &.LATENESS {
+          background: $presences-purple;
+        }
+      }
+    }
+  }
+}

package/scss/specifics/massmailing/_variables.scss

@@ -0,0 +1,34 @@
+$presences-main: #ffb600;
+$presences-orange: #FF8500;
+$presences-red: #e61610;
+$presences-pink: #ff8a84;
+$presences-beige-light: #fff8eb;
+$presences-purple: #9c29b7;
+$presences-green: #72bb53;
+$presences-water-green: #b0ead5;
+$presences-blue: #2a9cc8;
+$presences-remark: #2f5be0;
+$presences-grey: #aaaaaa;
+$presences-grey-clear: #eeeeee;
+$presences-grey-incident: #d6d6d6;
+$presences-grey-light: #f0f0f0;
+$presences-grey-smoke: #f7f7f7;
+$presences-white: #ffffff;
+$presences-middle-grey: #929292;
+$presences-black: rgba(0, 0, 0, .87);
+
+$massmailing-card-shadow: 0 5px 5px rgba(0, 0, 0, 0.21);
+
+/* ----------------------------
+    Spacing
+---------------------------- */
+$spacing-XXL: 68px;
+$spacing-XML: 60px;
+$spacing-XM: 48px;
+$spacing-XL: 42px;
+$spacing-L: 24px;
+$spacing-M: 16px;
+$spacing-S: 12px;
+$spacing-XLXS: 10px;
+$spacing-LXS: 8px;
+$spacing-XXS: 4px;

package/scss/specifics/massmailing/components/_anomalies.scss

@@ -0,0 +1,6 @@
+.massmail-anomalies {
+  .title {
+    font-size: 18px;
+    font-weight: normal;
+  }
+}

package/scss/specifics/massmailing/components/_card.scss

@@ -0,0 +1,106 @@
+.massmailing-card {
+  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: 8px 16px;
+    flex-direction: column;
+
+    &-title {
+      display: flex;
+    }
+  }
+
+  &-body {
+    display: flex;
+    padding: 8px 16px;
+    overflow-y: auto;
+    max-height: 400px;
+
+    &-descriptionHTML {
+      tr {
+        background: none;
+        box-shadow: none;
+        color: unset;
+      }
+      a {
+        //color: $presences-black;
+        color: $dark-grey;
+        &:hover {
+          color: $presences-main
+        }
+      }
+    }
+  }
+}
+
+.massmailing-card-stats {
+
+  &-item {
+    height: 120px;
+    border-radius: 7px;
+    background-color: $white;
+    position: relative;
+    box-shadow: $massmailing-card-shadow;
+    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, &.NO_REASON:after, &.ABSENCE:after {
+      background-color: $presences-red;
+    }
+
+    &.REGULARIZED:after {
+      background-color: $presences-green;
+    }
+
+    &.PUNISHMENT:after, &.SANCTION:after {
+      background-color: $presences-main;
+    }
+
+    &.UNREGULARIZED:after {
+      background-color: $presences-pink;
+    }
+
+    &.lateness:after, &.LATENESS:after {
+      background-color: $presences-purple;
+    }
+
+    &.bold {
+      font-weight: bold;
+    }
+
+    .value {
+      color: $black;
+      font-size: 33px;
+      font-weight: bold;
+      margin-top: 20px;
+    }
+
+    .subtitle {
+      font-size: 14px;
+      margin: 8px 0;
+      text-align: center;
+    }
+  }
+}

package/scss/specifics/massmailing/components/_index.scss

@@ -0,0 +1,6 @@
+@import "status";
+@import "anomalies";
+@import "prefetch";
+@import "card";
+@import "sniplets/index";
+@import "history/index";

package/scss/specifics/massmailing/components/_prefetch.scss

@@ -0,0 +1,65 @@
+.massmailing-prefetch {
+  table {
+    margin-bottom: 0;
+  }
+
+  .head-table {
+    z-index: 1;
+    position: relative;
+  }
+
+  .list-table {
+    z-index: 0;
+    position: relative;
+  }
+
+  .students {
+    max-height: 200px;
+    overflow-y: auto;
+  }
+
+  .sub-row {
+    background: rgba(235, 235, 235, 0.4);
+  }
+
+  i {
+    &.mail::before {
+      font-family: 'material-icons';
+      content: "\F1EE";
+      color: $presences-black;
+    }
+  }
+
+  .massmailing-counters {
+    .counter {
+      height: 53px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 16px;
+      margin-right: 25px;
+
+      i.incident {
+        color: $presences-red;
+        margin-right: 10px;
+        font-size: 20px;
+      }
+
+      .number {
+        font-size: 30px;
+        margin-right: 5px;
+        font-weight: bold;
+      }
+    }
+  }
+
+  .template-preview {
+    height: 75px;
+    overflow-y: auto;
+    padding: 5px;
+    color: rgba(0, 0, 0, 0.4);
+    border: solid 1px rgba(192, 192, 192, 0.25);
+    border-radius: 5px;
+    font-size: 14px;
+  }
+}

package/scss/specifics/massmailing/components/_status.scss

@@ -0,0 +1,48 @@
+$status-height: 120px;
+$status-max-width: 250px;
+
+.massmail-status {
+  &.grid {
+    display: grid;
+    grid-template-columns: repeat(4, minmax(auto, $status-max-width));
+    grid-column-gap: 25px;
+    grid-gap: 16px;
+    grid-template-rows: $status-height;
+
+    .widget-alert {
+      height: 100%;
+
+      .value {
+        font-size: 33px;
+        color: $black;
+        margin-top: 20px;
+      }
+
+      .subtitle {
+        width: 85%;
+        text-align: center;
+        font-size: 15px;
+      }
+    }
+  }
+
+  .empty-content {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .description {
+      height: 120px;
+    }
+  }
+
+  .empty-content-evenly {
+    display: flex;
+    align-items: center;
+    justify-content: space-evenly;
+
+    .empty-content {
+      margin: 0;
+    }
+  }
+}

package/scss/specifics/massmailing/components/history/_header.scss

@@ -0,0 +1,11 @@
+.history-header {
+  &-search {
+    padding: 8px 0 0 0;
+    display: flex;
+    justify-content: space-between;
+
+    &-bar {
+      width: 45%;
+    }
+  }
+}

package/scss/specifics/massmailing/components/history/_history-lightbox.scss

@@ -0,0 +1,15 @@
+.history-lightbox {
+
+  .header-lightbox {
+    margin-bottom: 0;
+  }
+
+  /* reajdust padding list students/groups */
+  .search-input-ul {
+    padding: 8px 0 0 0;
+  }
+
+  input {
+    margin-bottom: 0;
+  }
+}

package/scss/specifics/massmailing/components/history/_history-list.scss

@@ -0,0 +1,66 @@
+/* body */
+.history-body {
+  .pagination {
+    margin: 0 8px 8px;
+  }
+}
+
+/* history-list */
+.history-body-content {
+  display: flex;
+  justify-content: center;
+  align-items: start;
+
+  &-history {
+    margin-right: 16px;
+    flex: 1 0 auto;
+    width: 60em !important;
+
+    &.flex-table {
+      background-color: $presences-white;
+    }
+
+    // student list section
+    &-list {
+      &-date {
+        background-color: $presences-grey-clear;
+        border-bottom: 1px solid $presences-white;
+      }
+
+      &-student {
+        border-bottom: solid 1px $presences-grey-clear;
+
+        &.active {
+          background-color: $presences-grey-clear;
+          border-bottom: solid 1px $presences-white;
+        }
+
+        &-info {
+          text-align: center !important;
+          justify-content: space-around !important;
+        }
+      }
+    }
+  }
+
+  // side card
+  &-card {
+    padding-left: 16px;
+    display: flex;
+    flex: 0 1 auto;
+    width: 100%;
+
+    &-clickDisplay {
+      display: flex;
+      flex-direction: column;
+      text-align: center;
+      margin: 72px;
+    }
+
+    .arrow-right {
+      margin-top: 24px;
+      font-size: 24px;
+      transform: rotate(180deg);
+    }
+  }
+}

package/scss/specifics/massmailing/components/history/_index.scss

@@ -0,0 +1,3 @@
+@import "header";
+@import "history-list";
+@import "history-lightbox";

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

@@ -0,0 +1 @@
+@import "massmailing-manage";