ode-csslib 1.0.0-dev-produit.202209220950

package/scss/specifics/edt/_edt.scss

@@ -0,0 +1,294 @@
+body.edt, .sniplet.edt {
+
+  input[type="radio"], .contentTab {
+    display: inline-block;
+  }
+
+  @import './components/index';
+  @import './generics/index';
+
+  .schedule .days .day.single {
+    width: 100%
+  }
+
+  div.date {
+    &-loading {
+      padding: 0 0 300px 0;
+    }
+  }
+
+  div.selecting-timeslot {
+    position: relative;
+
+    &::before {
+      content: '';
+      position: absolute;
+      left: 0;
+      top: 0;
+      bottom: 0;
+      right: 0;
+      z-index: 999;
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  #group-list-teacher {
+    display: contents;
+  }
+
+  .selected-timeslot {
+    position: relative;
+
+    &::after {
+      content: '';
+      position: absolute;
+      border: 1px $green dashed;
+      left: 0;
+      top: 0;
+      bottom: 0;
+      right: 0;
+      z-index: 400;
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  .border-left-right-selected {
+    border-left: 1px $orange solid !important;
+    border-right: 1px $orange solid !important;
+  }
+
+  .border-top-selected {
+    border-top: 1px $orange solid !important;
+  }
+
+  .border-bottom-selected {
+    border-bottom: 1px $orange solid !important;
+  }
+
+  .sm-margin-right {
+    margin-right: 10px !important;
+  }
+
+  .tooltip-cours {
+    padding: 11px;
+    text-align: center;
+
+    .header {
+      color: white;
+      border-radius: 9px;
+      padding: 1px 6px;
+    }
+  }
+
+  .cyan {
+    background: $cyan;
+    color: $white;
+  }
+
+  .green {
+    background: $green !important;
+    color: $white !important;
+  }
+
+  .orange {
+    background: $orange !important;
+    color: $white !important;
+  }
+
+  .pink {
+    background: $pink !important;
+    color: $white !important;
+  }
+
+  .yellow {
+    background: $yellow !important;
+    color: $white !important;
+  }
+
+  .purple {
+    background: $purple !important;
+    color: $white !important;
+  }
+
+  .grey {
+    background: $dark-grey !important;
+    color: $white !important;
+  }
+
+  span.tick:before {
+    height: 20px !important;
+    width: 20px;
+    margin-top: 0px !important;
+  }
+
+  div.illustration {
+    height: 100px;
+    margin-left: auto;
+    margin-right: auto;
+    position: relative;
+    display: grid;
+    padding-top: 20px;
+  }
+
+  div.time-barre {
+    width: 400px;
+    height: 4px;
+    border: #aaa 1px solid;
+    border-radius: 15px;
+    background: #ddd;
+    margin: 45px auto;
+
+    .startCourse {
+      position: absolute;
+      top: -10px;
+      background: black;
+      border: black 0.5px solid;
+      width: 2px;
+      height: 20px;
+
+      p {
+        margin-left: -40px;
+      }
+    }
+
+    .startEdition {
+      position: absolute;
+      background: $green;
+      width: 300px;
+      height: 3px;
+      margin-left: 100px;
+
+      &:before {
+        content: "";
+        border: black 1px solid;
+        background: black;
+        position: fixed;
+        margin-top: -12px;
+        width: 1px;
+        height: 20px;
+      }
+
+      p {
+        margin-left: -40px;
+        margin-top: -32px;
+      }
+    }
+
+    div p {
+      color: black;
+      position: fixed;
+      display: block;
+      margin-top: -22px;
+    }
+
+    .middle {
+      position: absolute;
+      background: $green;
+      width: 20px;
+      height: 3px;
+      border-right: 1px black solid;
+      margin-left: 200px;
+      border-left: 1px black solid;
+
+      p {
+        margin-left: -30px;
+      }
+    }
+
+    .end {
+      position: absolute;
+      top: -10px;
+      background: black;
+      border: black 0.5px solid;
+      width: 2px;
+      height: 20px;
+      margin-left: 396px;
+
+      p {
+        margin-left: -40px;
+      }
+
+    }
+  }
+
+  .width-7 {
+    width: 7em;
+  }
+
+  .format-select {
+    min-width: 50px;
+    height: 35px;
+    font-size: 14.4px;
+    padding: 0px 10px;
+    text-align: left;
+    width: 100%;
+    max-width: 400px;
+  }
+
+  .datepicker {
+    display: none;
+  }
+
+}
+
+.edt-settings {
+  table {
+    th {
+      i::before {
+        font-size: 10px !important;
+        margin-left: 5px;
+        position: absolute;
+      }
+    }
+  }
+
+  .report-lightbox lightbox .content {
+    max-width: 100%;
+    width: fit-content;
+  }
+}
+
+.times-slot {
+  .float-left {
+    float: left;
+  }
+
+  .margin-md {
+    margin: 10px;
+  }
+
+  .margin-bottom-lg {
+    margin-bottom: 20px;
+  }
+}
+
+.month-day .n-more {
+  display: none;
+}
+
+.margin-left-2 {
+  margin-left: 2px;
+}
+
+.border-radius-5 {
+  border-radius: 5px;
+}
+
+.display-flex {
+  display: flex
+}
+
+.space-between {
+  justify-content: space-between;
+}
+
+.margin-select-child {
+  margin-top: 15px;
+  margin-left: 35px;
+}
+
+.remove-border-select-child {
+  border: none !important;
+}

package/scss/specifics/edt/components/_atomic.scss

@@ -0,0 +1,230 @@
+.text-ellipsis {
+  text-overflow: ellipsis;
+}
+
+.overflow-hidden {
+  overflow: hidden;
+}
+
+.vertical-align-top {
+  vertical-align: top;
+}
+
+.display-table {
+  display: table;
+}
+
+.table-cell-middle {
+  display: table-cell;
+  vertical-align: middle;
+}
+
+.empty-take-space:after {
+  content: '\200b';
+}
+
+.table-layout-fixed {
+  table-layout: fixed;
+}
+
+.inline-child{
+  >div{
+    display: inline-block;
+  }
+}
+
+.space-between-child{
+  >div:before{
+    content: " ";
+    white-space: pre;
+  }
+}
+
+.float-none{
+  float: none;
+}
+
+.min-width-unset {
+  min-width: unset !important;
+}
+
+.resize-vertical {
+  resize: vertical;
+}
+
+.resize-none {
+  resize: none;
+}
+
+.display-inline-block {
+  display:inline-block;
+}
+
+.overflow-y- {
+  overflow-y: auto;
+}
+
+.pull-left {
+  float: left !important;
+}
+
+.pull-right {
+  float: right !important;;
+}
+
+.text-center {
+  text-align: center;
+}
+
+.text-right {
+  text-align: right;
+}
+
+.text-left {
+  text-align: left;
+}
+
+// Color
+.orange-text {
+  color: #ff8500;
+}
+
+.yellow-text {
+  color: #ffd900;
+}
+
+.green-text {
+  color: #30b32f;
+}
+
+.red-text {
+  color: red;
+}
+
+.lightgray {
+  color: #999;
+}
+
+.gray {
+  color: #666;
+}
+
+.bg-lightgrey {
+  background-color: lightgrey;
+}
+
+
+// Opacity
+
+.opacity-icon {
+  opacity: 0.2;
+}
+
+
+
+// Margin
+
+.remove-margin{
+  margin: 0px;
+}
+
+.remove-margin-bottom {
+  margin-bottom: 0;
+}
+
+.margin-sm{
+  margin: 5px;
+}
+
+.margin-md{
+  margin: 10px;
+}
+
+.margin-bottom-sm {
+  margin-bottom: 5px;
+}
+.margin-top-sm {
+  margin-top: 5px;
+}
+.margin-left-sm {
+  margin-left: 5px !important;
+}
+.margin-right-sm {
+  margin-right: 5px;
+}
+
+.margin-bottom-md {
+  margin-bottom: 10px;
+}
+.margin-top-md {
+  margin-top: 10px;
+}
+.margin-left-md {
+  margin-left: 10px;
+}
+.margin-right-md {
+  margin-right: 10px;
+}
+.margin-bottom-mid {
+  margin-bottom: 15px;
+}
+.margin-bottom-lg {
+  margin-bottom: 20px;
+}
+.margin-top-lg {
+  margin-top: 20px !important;
+}
+.margin-left-lg {
+  margin-left: 20px;
+}
+.margin-right-lg {
+  margin-right: 20px;
+}
+
+
+
+// Padding
+
+.remove-padding {
+  padding: 0px;
+}
+
+.remove-padding-bottom {
+  padding-bottom: 0px;
+}
+
+
+.padding-sm {
+  padding: 5px;
+}
+
+
+.padding-bottom-sm {
+  padding-bottom: 5px;
+}
+.padding-top-sm {
+  padding-top: 5px;
+}
+.padding-left-sm {
+  padding-left: 5px;
+}
+.padding-right-sm {
+  padding-right: 5px;
+}
+
+.padding-md {
+  padding: 10px;
+}
+
+.padding-bottom-md {
+  padding-bottom: 10px;
+}
+.padding-top-md {
+  padding-top: 10px;
+}
+.padding-left-md {
+  padding-left: 10px;
+}
+.padding-right-md {
+  padding-right: 10px;
+}

package/scss/specifics/edt/components/_buttons.scss

@@ -0,0 +1,18 @@
+button, a.button {
+  color: $edt-white;
+  background: $edt-dark-blue;
+  box-shadow: none;
+
+  &:hover {
+    background-color: $edt-dark-blue;
+  }
+
+  &:disabled {
+    background: $edt-light-grey;
+  }
+
+  &.cancel {
+    background: $edt-light-grey;
+    color: $edt-white;
+  }
+}

package/scss/specifics/edt/components/_circleInfo.scss

@@ -0,0 +1,20 @@
+.circleInfo {
+  width: 30px;
+  height: 30px;
+  text-align: center;
+  border-radius: 50%;
+  background: #87CEFA;
+  padding-top: 4px;
+  @include fonticon();
+
+    &.infoLetter{
+      display: block;
+      &:after{
+        content: '\e8bb';
+        color: $white;
+        font-size: 20px;
+      }
+    }
+}
+
+

package/scss/specifics/edt/components/_custom.scss

@@ -0,0 +1,58 @@
+multi-combo .multi-combo-root-button {
+  min-width: 50px;
+  color: black;
+  border: none !important;
+}
+
+multi-combo .multi-combo-root-panel {
+  position: fixed;
+  top: 128px !important;
+}
+.schedule .next-timeslots {
+  width: 100%;
+  position: relative;
+  z-index: 800;
+  height: 20px;
+  margin: 0;
+}
+.schedule .previous-timeslots {
+  width: 100%;
+  position: absolute;
+  height: 20px;
+  left: 0;
+  top: 60px;
+  z-index: 800;
+}
+
+.schedule {
+  .legend {
+    .month-day {
+      background-color: $edt-dark-blue;
+    }
+  }
+}
+
+#occurrences-creation {
+  td {
+    background: $edt-white;
+    color: black;
+  }
+}
+
+.manage-title {
+  display: contents;
+}
+
+.sidebar {
+  padding: 0;
+  margin-right: 10px;
+  border-radius: 8px;
+  height: 550px;
+  display: flex;
+}
+
+.no-cursor {
+  .timeslot {
+    cursor: default;
+  }
+}

package/scss/specifics/edt/components/_icons.scss

@@ -0,0 +1,21 @@
+i {
+  &.visible:before {
+    font-family: 'material-icons';
+    content: "\F208";
+  }
+
+  &.invisible:before {
+    font-family: 'material-icons';
+    content: "\F6D0";
+  }
+
+  &.delete:before {
+    font-family: 'material-icons';
+    content: "\F5AD";
+  }
+
+  &.edit:before {
+    font-family: 'material-icons';
+    content: '\F3EB';
+  }
+}

package/scss/specifics/edt/components/_index.scss

@@ -0,0 +1,18 @@
+@import 'mixins';
+@import 'main/index';
+@import 'select';
+@import 'utils';
+@import 'custom';
+@import 'switch';
+@import 'atomic';
+@import 'fixCalendarHRFirefox';
+@import 'circleInfo';
+@import 'calendar/index';
+@import 'buttons';
+@import 'sidebar';
+@import 'searchbars';
+@import 'loader';
+@import 'lightbox';
+@import 'snippets/index';
+@import 'icons';
+@import 'update-courses-popup';

package/scss/specifics/edt/components/_lightbox.scss

@@ -0,0 +1,42 @@
+section.lightbox {
+  .content {
+    padding: 0;
+
+    .lightbox-container {
+      padding: 15px;
+    }
+
+    .lightbox-header {
+      color: $edt-white;
+      background-color: $edt-dark-blue;
+      width: 100%;
+      display: inline-block;
+      padding: 5px 0 5px 10px;
+      font-size: 15pt;
+      margin-bottom: 10px;
+
+      &.top {
+        border-radius: 8px 8px 0 0;
+      }
+    }
+
+    .close-lightbox {
+      color: $edt-white;
+    }
+  }
+
+  section.head {
+    background: $edt-dark-blue;
+    padding: 1px 15px !important;
+    border-radius: 5px 5px 0 0;
+
+    h1, h2, h3, h4, h5, h6 {
+      color: $edt-white;
+    }
+  }
+
+  section.body {
+    padding: 8px 20px;
+  }
+}
+

package/scss/specifics/edt/components/_loader.scss

@@ -0,0 +1,22 @@
+.loader {
+  display: flex;
+  height: 100%;
+  width: 100%;
+  position: absolute;
+  background-color: $edt-white;
+  z-index: 1000;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  margin: auto;
+
+  i.spinner{
+    color: $edt-dark-blue;
+    animation: spinner 1.25s linear infinite;
+    font-size: 22px;
+
+    &::before {
+      content: '\e85a';
+    }
+  }
+}