ode-csslib 4.0.0 → 4.0.1

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

@@ -0,0 +1,89 @@
+.register-widget {
+  margin: 16px;
+
+  .search-field {
+    display: flex;
+    flex-direction: column;
+
+    .search-input {
+      box-shadow: 0 2px 2px rgba(0, 0, 0, 0.21);
+      box-sizing: border-box;
+      margin-bottom: 8px;
+
+      input {
+        color: $presences-black-light;
+        width: 100%;
+        background: transparent;
+        height: 25px;
+        padding-left: 5px;
+        font-size: 14px;
+        border: none;
+        border-bottom: 1px solid $presences-grey-incident;
+
+        &:focus {
+          outline: 0;
+          border-bottom: 2px solid $presences-main;
+        }
+      }
+    }
+
+    .search-input-ul {
+      padding: 0;
+      margin: 0;
+      font-weight: bold;
+    }
+  }
+
+  .students {
+    box-sizing: border-box;
+    height: calc(100% - 130px);
+    overflow-x: hidden;
+  }
+
+  .student {
+    height: 38px;
+    background: $presences-grey-smoke;
+    display: flex;
+    align-items: center;
+    color: $presences-black;
+    font-size: 15px;
+    margin: 4px 0;
+    padding-left: 8px;
+    line-height: 16px;
+    
+    &-info {
+      flex: 0.7;
+    }
+
+    &-state {
+      flex: 0.3;
+      display: flex;
+      height: 100%;
+      align-items: center;
+      flex-direction: column;
+      justify-content: space-around;
+    }
+
+    &-submit {
+      position: sticky;
+      bottom: 100px;
+      left: 50%;
+      transform: translate(-50%);
+      box-shadow: 0 4px 4px rgba(0, 0, 0, 0.21);
+    }
+  }
+
+  .empty-state {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    text-align: center;
+    align-items: center;
+    height: inherit;
+
+    .empty-title {
+      width: 70%;
+      margin: 24px 0;
+    }
+  }
+}

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

@@ -0,0 +1,23 @@
+.remarks-widgets {
+  .remark {
+    display: flex;
+    padding: 15px;
+    justify-content: space-between;
+    align-items: center;
+    height: 74px;
+    box-sizing: border-box;
+
+    > div {
+      color: $presences-grey;
+      font-size: 18px;
+      font-weight: bold;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+
+    img {
+      height: 57px;
+    }
+  }
+}

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

@@ -0,0 +1,81 @@
+.statements-widgets {
+  &-content {
+    display: flex;
+    flex-flow: row wrap;
+    justify-content: left;
+  }
+
+  /* content each card css */
+  .statement {
+    display: flex;
+    height: 110px;
+    border-radius: 7px;
+    box-shadow: $box-shadow;
+    margin: 0 16px 16px 0;
+    width: 30%;
+    cursor: pointer;
+
+    &:hover {
+      background: $presences-main;
+      color: $presences-white;
+    }
+
+    &-description {
+      padding: 8px 16px;
+      flex: 2;
+
+      &-title {
+        margin-bottom: 8px;
+      }
+
+      /* description */
+      &-inside {
+      }
+    }
+
+    &-date {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: space-between;
+      margin: 7px;
+      border-left: 1px solid $presences-grey-incident;
+
+      &.same {
+        justify-content: center;
+      }
+
+      &-time {
+        display: flex;
+        flex-direction: column;
+      }
+    }
+  }
+
+  /* empty state css */
+  .empty-state {
+    display: flex;
+    align-items: center;
+    flex-direction: row;
+    width: 100%;
+    justify-content: center;
+
+    &-title {
+      width: auto;
+      color: $presences-middle-grey;
+      font-size: 18px;
+      text-align: center;
+    }
+
+    .tick-color {
+      &:first-child {
+        margin-right: 50px;
+      }
+
+      &:last-child {
+        margin-left: 50px;
+      }
+    }
+  }
+}

package/scss/specifics/presences/generic/_async-autocomplete.scss

@@ -0,0 +1,60 @@
+.async-autocomplete {
+  .input-async-autocomplete {
+    input[type="text"]:focus {
+      border-bottom: 2px solid $presences-main !important;
+    }
+
+    &.loading {
+      @include fonticon();
+
+      &::after {
+        content: '\e85a';
+        position: absolute;
+        right: 10px;
+        color: $primary;
+        animation: spinner 1.25s linear infinite;
+      }
+    }
+  }
+
+  .scroll.drop-down {
+    overflow-y: scroll;
+    display: block;
+
+    li:hover {
+      background-color: $presences-main;
+    }
+  }
+
+  .drop-down.empty {
+    display: block;
+  }
+
+  .drop-down {
+    top: 80%;
+    max-height: 200px;
+    width: 100%;
+    display: none;
+  }
+}
+
+@mixin keyframes($animationName) {
+  @-webkit-keyframes #{$animationName} {
+    @content;
+  }
+  @-moz-keyframes #{$animationName} {
+    @content;
+  }
+  @-o-keyframes #{$animationName} {
+    @content;
+  }
+  @keyframes #{$animationName} {
+    @content;
+  }
+}
+
+@include keyframes(spinner) {
+  to {
+    transform: rotate(360deg);
+  }
+}

package/scss/specifics/presences/generic/_ellipsis.scss

@@ -0,0 +1,23 @@
+@mixin ellipsis-multiline($multiline) {
+  display: block;
+  display: -webkit-box;
+  margin: 0 auto;
+  -webkit-line-clamp: $multiline;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  /*! autoprefixer: off */
+  -webkit-box-orient: vertical;
+  /* autoprefixer: on */
+}
+
+.ellipsis {
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.ellipsis-multiline {
+  &-three {
+    @include ellipsis-multiline(3);
+  }
+}

package/scss/specifics/presences/generic/_flex.scss

@@ -0,0 +1,92 @@
+.flex-row {
+  display: flex;
+  flex-flow: row wrap;
+  width: 100%;
+  flex-grow: 1;
+  text-align: center;
+  min-height: 42px;
+
+  .flex-col {
+    display: flex;
+    padding-top: 5px;
+    padding-bottom: 5px;
+    justify-content: left;
+    align-items: center;
+  }
+
+  @for $i from 1 through 16 {
+    &.row__#{$i} {
+      .flex-col {
+        @for $j from 1 through 16 {
+          &.col__#{$j} {
+            width: percentage($j / $i);
+          }
+        }
+      }
+    }
+  }
+}
+
+.flex-content, .flex-collapse {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+.flex-collapse {
+  .flex-content {
+    visibility: hidden;
+    opacity: 0;
+    max-height: 0;
+    transition: visibility 0.25s, opacity 0.25s ease-out, max-height 0.2s;
+  }
+
+  &.open-details {
+    .flex-content {
+      opacity: 1;
+      visibility: visible;
+      max-height: 100%;
+      transition: visibility 0.25s, opacity 0.25s ease-in;
+    }
+  }
+}
+
+.flex-table {
+  display: flex;
+  flex-flow: row wrap;
+  width: 100%;
+  background-color: $presences-grey-smoke;
+
+  .flex-row {
+    .flex-col {
+      justify-content: center;
+      align-items: center;
+      text-align: start;
+    }
+  }
+
+  .flex-head {
+    display: flex;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.12);
+    color: rgba($presences-grey, 0.7);
+    align-items: center;
+  }
+
+  .flex-body {
+    align-items: center;
+    justify-content: center;
+    display: flex;
+    width: 100%;
+    flex-direction: column;
+
+    .flex-row {
+      box-shadow: 0 -1px 1px rgba(0, 0, 0, 0.08);
+
+      &:hover {
+        background-color: rgba($presences-grey, 0.2);
+        cursor: pointer;
+      }
+    }
+  }
+}

package/scss/specifics/presences/generic/_index.scss

@@ -0,0 +1,7 @@
+@import "async-autocomplete";
+@import "switch";
+@import "toasts";
+@import "tooltip";
+@import "flex";
+@import "select-timeslots";
+@import "ellipsis";

package/scss/specifics/presences/generic/_select-timeslots.scss

@@ -0,0 +1,29 @@
+@mixin select-timeslot($padding-value, $box-shadow-value) {
+  padding-top: 8px;
+
+  .timeslot-select {
+    display: inline-flex;
+    padding: $padding-value;
+    margin: 0 24px 8px 0;
+    text-align: center;
+    box-shadow: $box-shadow-value;
+    background: $presences-white;
+    border: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+
+    .time-picker {
+      padding-left: 8px;
+      text-indent: 0;
+    }
+
+    select {
+      -webkit-appearance: none;
+      -moz-appearance: none;
+      border: none;
+      margin: 0;
+      min-width: 0;
+      padding: 0 8px;
+    }
+  }
+}

package/scss/specifics/presences/generic/_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;
+      }
+    }
+
+  }
+}

package/scss/specifics/presences/generic/_toasts.scss

@@ -0,0 +1,102 @@
+.toasts {
+  position: fixed;
+  top: 74px;
+  right: 25px;
+  width: 350px;
+  z-index: 1000;
+  box-sizing: border-box;
+
+  .toast-content {
+    //@include material-card();
+    margin-bottom: 10px;
+    position: relative;
+    opacity: 0;
+    margin-top: 40px;
+    box-sizing: border-box;
+    font-size: 16px !important;
+    border-left: none !important;
+    height: 0 !important;
+    overflow: hidden;
+    transition: all 0.25s ease;
+
+    .content {
+      padding: 15px 10px;
+      line-height: 28px;
+
+      &:before {
+        @include fonticon();
+        margin-right: 10px;
+      }
+    }
+
+    &.show {
+      margin-top: 10px !important;
+      opacity: 1;
+      height: auto !important;
+      overflow: auto !important;
+    }
+
+    &.confirm {
+      color: darken($green, 35%);
+      background-color: lighten($green, 30%);
+
+      .content:before {
+        content: '\e871';
+      }
+
+      .timer {
+        background-color: darken($green, 15%);
+      }
+    }
+
+    &.info {
+      color: darken($cyan, 35%);
+      background-color: lighten($cyan, 30%);
+
+      .content:before {
+        content: '\e84b';
+      }
+
+      .timer {
+        background-color: darken($cyan, 15%);
+      }
+    }
+
+    &.warning {
+      color: darken($warning-color, 35%);
+      background-color: lighten($warning-color, 30%);
+
+      .content:before {
+        content: '\e903';
+      }
+
+      .timer {
+        background-color: darken($warning-color, 15%);
+      }
+    }
+
+    &.info, &.warning {
+      .content:before {
+        font-size: 20px !important;
+      }
+    }
+
+    .timer {
+      width: 100%;
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      height: 4px;
+      border-bottom-left-radius: 2px;
+      border-bottom-right-radius: 2px;
+      transition-timing-function: linear;
+      transition-property: all;
+      transition-duration: 3s;
+
+      &.animation {
+        width: 0;
+        border-bottom-right-radius: 0;
+      }
+    }
+  }
+}

package/scss/specifics/presences/generic/_tooltip.scss

@@ -0,0 +1,36 @@
+@mixin tooltipTemplate() {
+  font-family: Roboto;
+  visibility: hidden;
+  width: 180px;
+  font-size: 12px;
+  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.26);
+  position: absolute;
+  background-color: $presences-white;
+  color: $presences-black;
+  padding: 10px;
+  border-radius: 5px;
+  z-index: 1;
+  opacity: 0;
+}
+
+@mixin tooltipVisible() {
+  visibility: visible;
+  opacity: 1;
+  transition: opacity .6s;
+}
+
+@mixin tooltipBottomArrow() {
+  content: ' ';
+  position: absolute;
+  border-left: 5px solid transparent;
+  border-right: 5px solid transparent;
+  border-top: 10px solid $presences-white;
+}
+
+@mixin tooltipTopArrow() {
+  content: ' ';
+  position: absolute;
+  border-left: 5px solid transparent;
+  border-right: 5px solid transparent;
+  border-bottom: 10px solid $presences-white;
+}

package/scss/specifics/presences/memento/_absences.scss

@@ -0,0 +1,83 @@
+#memento-absence-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;
+  }
+
+  .content {
+    display: flex;
+
+    .absence-rate {
+      font-size: 15px;
+    }
+
+    > div {
+      flex: 1;
+    }
+
+    .summary {
+      display: flex;
+      justify-content: space-between;
+
+      > div {
+        flex: 1;
+        max-width: 24%;
+        height: 96px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: 7px;
+        box-shadow: 0 5px 5px rgba(0, 0, 0, 0.21);
+        position: relative;
+        font-size: 12px;
+
+        &:after {
+          content: ' ';
+          width: 100%;
+          height: 10px;
+          position: absolute;
+          border-bottom-left-radius: 7px;
+          border-bottom-right-radius: 7px;
+          display: block;
+          bottom: 0;
+        }
+
+        &.UNJUSTIFIED:after {
+          background-color: $presences-red;
+        }
+
+        &.JUSTIFIED:after {
+          background-color: $presences-pink;
+        }
+
+        &.REGULARIZED:after {
+          background-color: $presences-green;
+        }
+
+        &.LATENESS:after {
+          background-color: $presences-purple;
+        }
+
+        &.DEPARTURE:after {
+          background-color: $presences-light-purple;
+        }
+
+        .number {
+          font-size: 40px;
+          margin-bottom: 5px;
+          font-weight: bold;
+        }
+      }
+    }
+  }
+}

package/scss/specifics/presences/memento/_index.scss

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

package/scss/specifics/presences-common/common.scss

@@ -0,0 +1,16 @@
+$yellow-main: #ffb600;
+$grey-white: #ffffff99;
+
+@mixin mobile {
+  @media (max-width: 768px) {
+    @content;
+  }
+}
+
+@mixin mobileMini {
+  @media (max-width: 350px) {
+    @content;
+  }
+}
+
+@import "components/index";

package/scss/specifics/presences-common/components/_export-form.scss

@@ -0,0 +1,5 @@
+export-form {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+}