ode-csslib 4.0.0 → 4.0.1

package/scss/specifics/presences/components/_statements-absence-form.scss

@@ -0,0 +1,162 @@
+.statements-absence-form {
+  // margin space handling
+  margin: -18px -35px 0 0;
+  @include mobile {
+    margin: -8px -15px;
+  }
+
+  background: $presences-white;
+  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.21);
+
+  &-title {
+    display: flex;
+    background: $presences-main;
+    color: $presences-white;
+    padding: 16px;
+    justify-content: space-between;
+
+    &-content {
+      display: flex;
+      flex-direction: column;
+
+      &-name {
+        font-size: 24px;
+        margin-bottom: 8px;
+      }
+    }
+
+    img {
+      border-radius: 50%;
+    }
+  }
+
+  &-content {
+    padding: 8px 16px;
+
+    &-title {
+      color: $presences-black;
+    }
+
+    &-date {
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between
+    }
+
+    &-time {
+      display: flex;
+      justify-content: space-between;
+
+      &-start, &-end {
+        display: flex;
+        flex-direction: column;
+
+        time-picker {
+          input {
+            width: 62%;
+          }
+        }
+      }
+    }
+
+    &-description {
+      display: flex;
+      flex-direction: column;
+
+      input {
+        border: none;
+        background: none;
+        border-bottom: 1px dotted $presences-grey-heavy-light;
+        margin: 16px 0;
+
+        &:focus {
+          outline: none;
+        }
+      }
+
+      &-upload {
+        margin: 16px 0;
+        font-size: 1.25rem;
+        position: relative;
+        padding: 100px 20px;
+
+        outline: 2px dashed $presences-transparent-white;
+
+        &-box {
+          text-align: center;
+
+          input {
+            display: none;
+          }
+
+          label {
+            color: $presences-transparent-white;
+            cursor: pointer;
+          }
+        }
+      }
+    }
+
+    &-valid {
+      display: flex;
+      justify-content: flex-end;
+    }
+  }
+
+  .statements-history {
+
+    &-title {
+      color: $presences-black;
+      padding: 16px;
+    }
+
+    &-list {
+      max-height: 650px;
+      overflow-y: auto;
+      overflow-x: hidden;
+
+      &-item {
+        &:nth-child(odd) {
+          background: $presences-grey-light;
+        }
+        &-content {
+          padding: 16px;
+          &-student {
+            &-audience {
+              font-size: 12px;
+            }
+          }
+
+          &-infos {
+            display: flex;
+
+            &-absence {
+              width: 100%;
+
+              &-line {
+                display: flex;
+                font-size: 12px;
+                &-title {
+                  width: 24%;
+                  font-weight: bold;
+                }
+              }
+            }
+
+            &-download {
+              display: flex;
+              height: fit-content;
+              i {
+                transform: rotate(-90deg);
+                &:before {
+                  font-size: 32px;
+                }
+              }
+            }
+          }
+        }
+      }
+
+    }
+  }
+}

package/scss/specifics/presences/components/_table.scss

@@ -0,0 +1,74 @@
+table, .table {
+  width: 100%;
+  font-size: 15px;
+  text-align: left;
+  background-color: $white;
+
+  .text-center {
+    text-align: center;
+  }
+
+  .padding-sm {
+    padding: 5px;
+  }
+
+  .tr {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-evenly;
+    align-items: center;
+  }
+
+  .td, .th {
+    padding: 10px;
+    width: 100%;
+    height: 100%;
+    flex: 1;
+  }
+
+  .tbody .tr {
+    border-bottom: solid 1px $presences-grey-incident;
+  }
+
+  thead tr, .thead .tr {
+    background: $presences-white;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.12);
+
+    th, .th {
+      color: $presences-grey;
+      text-align: center;
+      font-weight: normal;
+      font-size: 17px;
+    }
+  }
+
+  tbody tr, .body .tr {
+    &:first-child {
+      border-top: none;
+    }
+
+    th {
+      padding: 5px 20px;
+      font-weight: normal;
+      font-size: 15px;
+
+      &.uppercase {
+        text-transform: uppercase;
+      }
+
+      &.highlight {
+        color: $presences-white;;
+        background: $presences-main;
+      }
+
+      &.playdown {
+        padding: 5px 10px;
+        font-size: 12px;
+      }
+
+      span.right {
+        float: right;
+      }
+    }
+  }
+}

package/scss/specifics/presences/components/_user-card.scss

@@ -0,0 +1,106 @@
+$avatar-size: 50px;
+
+@keyframes slideIn {
+  0% {
+    transform: translateY(1rem);
+    opacity: 0;
+  }
+  100% {
+    transform: translateY(0rem);
+    opacity: 1;
+  }
+  0% {
+    transform: translateY(1rem);
+    opacity: 0;
+  }
+}
+
+.user-cards {
+  position: fixed;
+  right: 0;
+  top: $portal-header-height;
+  z-index: 90001;
+
+  .users {
+    margin-top: 5px;
+    display: none;
+    opacity: 0;
+    animation-duration: 0.3s;
+    animation-fill-mode: both;
+
+    &.displayed {
+      display: block;
+      animation-name: slideIn;
+    }
+
+    .user-card {
+      box-shadow: 0 1px 1px rgba(0, 0, 0, 0.16);
+      background-color: $presences-white !important;
+      border-bottom: solid 1px $presences-grey;
+
+      h2 {
+        color: $presences-black !important;
+      }
+
+      &:first-child {
+        border-bottom: none;
+      }
+    }
+  }
+
+  .user-card {
+    background-color: $presences-main;
+    padding: 15px;
+    display: flex;
+    align-items: center;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.26);
+
+    .notify {
+      margin-left: 15px;
+
+      .notify-bell {
+        font-size: 32px;
+        color: $presences-white;
+      }
+    }
+
+    .avatar {
+      width: $avatar-size;
+      height: $avatar-size;
+      background-size: 100%;
+      background-position: center center;
+      border-radius: 50%;
+      margin-right: 10px;
+    }
+
+    h2 {
+      color: $presences-white;
+      margin-bottom: 0;
+      margin-top: 0;
+      line-height: inherit;
+
+
+      i.arrow {
+        margin-left: 10px;
+
+        &:before {
+          font-size: 16px;
+        }
+      }
+    }
+
+    .functions {
+      color: $presences-white;
+
+      .function {
+        &::after {
+          content: ' / ';
+        }
+
+        &:last-child::after {
+          content: ''
+        }
+      }
+    }
+  }
+}