ode-csslib 1.0.0-dev-produit.202209220950

package/scss/specifics/edt/components/_mixins.scss

@@ -0,0 +1,71 @@
+$edt-dark-blue: rgba(22, 46, 174, 1);
+$edt-white: rgba(255, 255, 255, 1);
+$edt-black: rgba(0, 0, 0, 1);
+$edt-light-grey: rgba(170, 170, 170, 1);
+$edt-lighter-grey: rgba(246, 246, 246, 1);
+$edt-light-orange: rgba(254, 164, 127, 1);
+$edt-solid-orange: rgba(249, 127, 81, 1);
+$edt-spiro-blue: rgba(37, 204, 247, 1);
+$edt-honey-orange: rgba(234, 181, 67, 1);
+$edt-garden-blue: rgba(85, 230, 193, 1);
+$edt-sky-blue: rgba(27, 156, 252, 1);
+$edt-keppel-blue: rgba(88, 177, 159, 1);
+$edt-marine-black: rgba(44, 58, 71, 1);
+$edt-fuchsia: rgba(179, 55, 113, 1);
+$edt-indigo: rgba(59, 59, 152, 1);
+$edt-peach-orange: rgba(253, 114, 114, 1);
+$edt-light-purple: rgba(214, 162, 232, 1);
+$edt-magenta: rgba(109, 33, 79, 1);
+$edt-darker-blue: rgba(24, 44, 97, 1);
+$edt-pink: rgba(252, 66, 123, 1);
+$edt-solid-purple: rgba(130, 88, 159, 1);
+$edt-exceptionnal: rgba(153, 102, 51, 1);
+$edt-light-orange-lighter: rgba(254, 164, 127, 0.7);
+$edt-solid-orange-lighter: rgba(249, 127, 81, 0.7);
+$edt-spiro-blue-lighter: rgba(37, 204, 247, 0.7);
+$edt-garden-blue-lighter: rgba(85, 230, 193, 0.7);
+$edt-light-grey-lighter: rgba(202, 211, 200, 0.7);
+$edt-sky-blue-lighter: rgba(27, 156, 252, 0.7);
+$edt-keppel-blue-lighter: rgba(88, 177, 159, 0.7);
+$edt-marine-black-lighter: rgba(44, 58, 71, 0.7);
+$edt-fuchsia-lighter: rgba(179, 55, 113, 0.7);
+$edt-indigo-lighter: rgba(59, 59, 152, 0.7);
+$edt-peach-orange-lighter: rgba(253, 114, 114, 0.7);
+$edt-light-purple-lighter: rgba(214, 162, 232, 0.7);
+$edt-magenta-lighter: rgba(109, 33, 79, 0.7);
+$edt-darker-blue-lighter: rgba(24, 44, 97, 0.7);
+$edt-pink-lighter: rgba(252, 66, 123, 0.7);
+$edt-solid-purple-lighter: rgba(130, 88, 159, 0.7);
+$edt-filter-unactive : rgba(160, 167, 179, 1);
+
+@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);
+  }
+}
+
+@mixin mobile {
+  @media (max-width: 768px) {
+    @content;
+  }
+}
+@mixin mobileMini {
+  @media (max-width: 350px) {
+    @content;
+  }
+}

package/scss/specifics/edt/components/_searchbars.scss

@@ -0,0 +1,48 @@
+.search-bars {
+  padding: 10px;
+  display: flex;
+  margin-left: 50px;
+
+  &.small {
+    width: 45%;
+  }
+
+  &.full {
+    width: 60%;
+  }
+
+
+  label  {
+    margin-right: 10px;
+  }
+
+  .search-inputs {
+
+    display: flex;
+    width: 100%;
+
+    .search-input {
+      background: $white;
+      padding: 7px;
+      vertical-align: middle;
+      width: 100%;
+      height: fit-content;
+
+      input {
+        margin: auto;
+
+        &:focus {
+          box-shadow: 0 1px 0 0 $edt-dark-blue;
+        }
+      }
+
+      &.small {
+        margin-right: 15px;
+      }
+    }
+  }
+
+
+
+
+}

package/scss/specifics/edt/components/_select.scss

@@ -0,0 +1,16 @@
+select {
+  background-color: $white;
+  height: 34px;
+  padding: 0 5px;
+  border-radius: 2px;
+  transition: all 0.5s ease;
+  cursor: pointer;
+  outline: none;
+  min-width: 150px;
+  border: solid 1px $grey;
+  color: $darkest-grey;
+
+  &:hover {
+    border-color: $primary;
+  }
+}

package/scss/specifics/edt/components/_sidebar.scss

@@ -0,0 +1,113 @@
+#display-section {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+
+
+  .sidebar-header {
+    color: $edt-white;
+    background-color: $edt-dark-blue;
+    display: flex;
+    padding: 5px 0 5px 10px;
+    font-size: 12pt;
+    margin-bottom: 10px;
+
+    &.top {
+      border-radius: 8px 8px 0 0;
+    }
+  }
+
+  .sidebar-section {
+    &.full {
+      height: 83%;
+    }
+
+    &.half {
+      height: 38%;
+
+      .edt-filters {
+        height: 55% !important;
+      }
+
+    }
+
+    &#teacher-section {
+      height: fit-content;
+      max-height: 38%;
+
+      display: flex;
+      flex-direction: column;
+    }
+
+    &#group-section {
+      flex: auto !important;
+    }
+
+    .section-content {
+      padding: 10px;
+
+      &.scroll {
+        overflow-y: scroll;
+        height: 70%;
+      }
+
+      .teacher-results {
+        padding: 5px;
+        margin: 0;
+        font-weight: bold;
+        font-size: 14px;
+        list-style-type: none;
+        display: flow-root;
+
+        .teacher-name {
+          float: left;
+          max-width: 80%;
+        }
+
+        .close {
+          cursor: pointer;
+          float: right;
+        }
+      }
+    }
+
+    #select-all-groups {
+      height: 30px;
+      margin-left: 10px;
+    }
+  }
+
+
+  .deselect-button {
+    width: fit-content;
+    border-radius: 5px;
+  }
+
+  .edt-filters {
+
+    .class-filter {
+      font-weight: bold;
+      font-size: 14px;
+    }
+
+    .group-filter {
+      font-size: 11px;
+    }
+
+    .button-filter {
+      color: white;
+      border-radius: 20px;
+      padding-left: 10px;
+      padding-right: 10px;
+      margin-top: 3px;
+
+      &:hover {
+        cursor: pointer;
+      }
+
+      &.unactive {
+        background-color: $edt-filter-unactive !important;
+      }
+    }
+  }
+}

package/scss/specifics/edt/components/_stepper.scss

@@ -0,0 +1,114 @@
+@keyframes step-appearance {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+.steps {
+  position: relative;
+
+  &::before {
+    height: 100%;
+    position: absolute;
+    width: 2px;
+    background-color: $dark-grey;
+    left: -4.166665%;
+    top: 0;
+    content: ' ';
+  }
+
+  .a-step {
+    margin-bottom: 50px;
+
+    .a-step-content {
+      margin-bottom: 75px;
+      @include run-transition(all);
+      opacity: 0;
+      display: none;
+    }
+
+    &.active {
+      animation: step-appearance 0.5s ease;
+
+      .a-step-content {
+        margin-bottom: 0;
+        display: block;
+        opacity: 1;
+
+        article {
+          padding: 15px;
+        }
+      }
+    }
+
+    &:not(.active) {
+      .a-step-circle:before {
+        @include run-transition(color);
+        color: $white;
+        cursor: pointer;
+      }
+
+      .a-step-header {
+        &:hover {
+          .a-step-circle {
+            &::before {
+              color: $white;
+            }
+
+            &.valid::before {
+              background-color: $cyan;
+              color: $white;
+              content: '\e858';
+              font-size: 12px;
+            }
+          }
+        }
+      }
+    }
+
+
+    .a-step-header {
+      .a-step-circle {
+        &::before {
+          @include fonticon;
+          content: '\e858';
+          padding: 1px 7px;
+          background-color: $cyan;
+          display: block;
+          position: absolute;
+          margin-top: -10px;
+          border-radius: 50%;
+          left: calc(-4.166665% - 21px);
+          color: $cyan;
+          font-size: 12px;
+          border: solid 10px $lightest-grey;
+        }
+
+        &.valid{
+          &::before {
+            background-color: $green;
+            content: '\e871';
+            color: $white;
+            font-size: 10px;
+          }
+        }
+      }
+    }
+
+    &.disabled {
+      .a-step-circle::before, .a-step-circle:hover::before {
+        background-color: $medium-grey !important;
+        color: $medium-grey !important;
+      }
+    }
+
+    .a-step:last-child {
+      .a-step-content {
+        margin-bottom: 0;
+      }
+    }
+  }
+}

package/scss/specifics/edt/components/_switch.scss

@@ -0,0 +1,57 @@
+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;
+        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;
+        border: none;
+      }
+    }
+
+    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/edt/components/_update-courses-popup.scss

@@ -0,0 +1,6 @@
+.update-courses-popup {
+
+  &-choices {
+    line-height: 40px;
+  }
+}

package/scss/specifics/edt/components/_utils.scss

@@ -0,0 +1,121 @@
+.ellipsis {
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.centered {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.datepicker table thead tr {
+  background: $edt-dark-blue;
+
+  th:hover {
+    background: $edt-dark-blue;
+  }
+}
+
+
+.calendar-current-week {
+  background: $white;
+  padding-right: 0;
+  margin-bottom: 8px;
+  line-height: 39px;
+
+  .cyan {
+    background-color: $edt-dark-blue;
+
+    &:hover {
+      background-color: $edt-dark-blue;
+    }
+  }
+
+  .calendarFiltersButtons {
+
+    background: $edt-dark-blue;
+
+    .displayModeButtons {
+      margin: 0px;
+    }
+
+    .nextPrevious {
+      button {
+        background-color: $edt-dark-blue;
+
+        &:hover {
+          background-color: $edt-dark-blue;
+        }
+      }
+    }
+  }
+
+  button {
+    color: $white;
+    border-radius: 0px;
+    padding: 8px 15px 8px;
+
+    i18n {
+      text-transform: uppercase;
+    }
+  }
+
+  span[ng-if="display.mode === 'week'"] {
+    color: $white;
+    background: $edt-dark-blue;
+    height: 100%;
+    display: inline-block;
+    padding: 0 10px;
+  }
+
+}
+
+.next-timeslots, .previous-timeslots {
+  margin-bottom: 0;
+  background: $edt-light-grey;
+
+  &:hover {
+    background: $edt-light-grey;
+  }
+
+  &:disabled {
+    background: $edt-light-grey;
+
+    &:hover {
+      background: $edt-light-grey;
+    }
+
+    &::before {
+      content: " ";
+    }
+  }
+}
+
+
+.form-row {
+  padding: 10px 0;
+}
+
+.small {
+  font-size: 0.9em;
+}
+
+.normal {
+  font-size: 1em;
+}
+
+.large {
+  font-size: 1.1em;
+}
+
+.float-left {
+  float: left;
+}
+
+.pointer {
+  cursor: pointer;
+}
+*.one.cell.edit-icone{
+  cursor: pointer;
+}