ode-csslib 4.0.0 → 4.0.2

package/scss/specifics/magneto/components/directives/_search-bar.scss

@@ -0,0 +1,25 @@
+.search-bar {
+
+  display: flex;
+  border: solid 1px $primary;
+  border-radius: 25px;
+  height: 40px;
+  width: 70%;
+  margin-left: auto;
+  margin-right: auto;
+
+  i.magneto-magnify {
+    font-size: 20px;
+    align-self: center;
+    margin-left: 5px;
+    color: $magneto-grey;
+  }
+
+  input {
+    width: 100%;
+    height: inherit;
+    border-bottom: none !important;
+    box-shadow: none !important;
+  }
+
+}

package/scss/specifics/magneto/components/directives/_toaster.scss

@@ -0,0 +1,8 @@
+.magneto-toaster {
+  button {
+    background: none;
+    &:hover {
+      background: $magneto-white;
+    }
+  }
+}

package/scss/specifics/magneto/generics/_index.scss

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

package/scss/specifics/magneto/generics/_loader.scss

@@ -0,0 +1,55 @@
+$loader-animation-duration: 1.8s;
+
+.loader-container {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  .loader {
+    margin: 50px;
+    transform: translate(-50%, -50%);
+    width: 50px;
+    height: 10px;
+    background: $magneto-yellow;
+    border-radius: 5px;
+    animation: load $loader-animation-duration ease-in-out infinite;
+
+    &:before, &:after {
+      position: absolute;
+      display: block;
+      content: "";
+      animation: load $loader-animation-duration ease-in-out infinite;
+      height: 10px;
+      border-radius: 5px;
+    }
+
+    &:before {
+      top: -20px;
+      left: 10px;
+      width: 40px;
+      background: $magneto-red;
+    }
+
+    &:after {
+      bottom: -20px;
+      width: 35px;
+      background: $magneto-dark-blue;
+    }
+  }
+}
+
+@keyframes load {
+  0% {
+    transform: translateX(40px);
+  }
+
+  50% {
+    transform: translateX(-30px);
+  }
+  100% {
+    transform: translateX(40px);
+  }
+}

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";

package/scss/specifics/massmailing/components/sniplets/_massmailing-manage.scss

@@ -0,0 +1,61 @@
+.sniplet-massmailing {
+  .massmailing {
+    display: flex;
+    justify-content: space-between;
+
+    &-editor {
+      width: 100%;
+      margin-right: 32px;
+      flex: 2;
+      display: flex;
+      flex-direction: column;
+      align-items: flex-end;
+      justify-content: space-between;
+
+      button {
+        margin: 0;
+      }
+
+      editor {
+        flex: 1 1 auto;
+        display: flex;
+        flex-direction: column;
+
+        popover + div {
+          flex: 1;
+
+          .drawing-zone {
+            height: 100%;
+            flex: 1;
+          }
+        }
+      }
+
+      &-textarea {
+        width: 100%;
+        flex: 1 1 auto;
+        margin-bottom: 20px;
+        display: flex;
+        flex-direction: column;
+
+        textarea {
+          flex: 1;
+        }
+      }
+    }
+
+    &-codes {
+      flex: 1;
+      font-size: 15px;
+
+      .content {
+        display: flex;
+        flex-direction: column;
+      }
+    }
+
+    .massmailing-type-content {
+      padding-bottom: 8px;
+    }
+  }
+}

package/scss/specifics/minetest/components/_index.scss

@@ -1,4 +1,5 @@
 @import 'mixins';
 @import 'containers/index';
 @import 'icons';
-@import 'toasts';
+@import 'toasts';
+@import 'switch';

package/scss/specifics/minetest/components/_mixins.scss

@@ -2,4 +2,6 @@ $minetest-white: #fff;
 $minetest-orange: #FF8500;
 $minetest-dark-orange: #b35d00;
 $minetest-blue: #c7edfc;
-$minetest-grey: #e9ebef;
+$minetest-grey: #e9ebef;
+$minetest-disable: #b1b6bf;
+$minetest-dark-disable: #8c939e;

package/scss/specifics/minetest/components/_switch.scss

@@ -0,0 +1,58 @@
+switch {
+  .switch {
+    cursor: pointer;
+
+    .tick {
+      width: 40px;
+      height: 12px;
+      display: block;
+      border-radius: 10px;
+      background: $grey;
+      position: relative;
+      overflow: visible;
+      margin: 5px;
+
+      &:before {
+        content: ' ';
+        width: 20px;
+        height: 20px !important;
+        left: 0;
+        display: block;
+        background: $white;
+        border-radius: 50%;
+        position: absolute;
+        top: -4px;
+        box-shadow: 0 1px 1px $shadow;
+        margin-right: 0;
+        margin-top: 0 !important;
+        border: none !important;
+      }
+    }
+
+    input[type=checkbox]:checked + .tick {
+      background: $primary-light;
+
+      &:before {
+        left: 20px;
+        background: $primary-dark;
+      }
+    }
+
+    input[type=checkbox]:disabled + .tick {
+      background: $disabled-color;
+
+      &:before {
+        background: $disabled-color;
+      }
+    }
+
+    input[type=checkbox]:disabled:checked + .tick {
+      background: $primary-lighter;
+
+      &:before {
+        background: $primary-lighter;
+      }
+    }
+
+  }
+}