ode-csslib 1.0.0-dev-produit.202209220950

package/scss/specifics/competences/sniplets/_memento-notes.scss

@@ -0,0 +1,210 @@
+$memento-light-grey: #e3e3e3;
+$memento-competences-indicator-shadow-color: #545454;
+$memento-grey: #7a7a7a;
+$memento-white: #FFF;
+$memento-disable-background-color: rgba(255, 255, 255, 0.8);
+
+.mementoNotes {
+
+  &-disableSelect {
+    user-select: none;
+  }
+
+  &-disabled {
+    position: absolute !important;
+    background-color: $memento-disable-background-color;
+    z-index: 1;
+  }
+
+  &-title {
+
+    &-lastNotes {
+      font-size: 0.9em;
+      padding: 28px 16px 0;
+    }
+
+    &-periodsNav {
+      &-arrow {
+        font-size: 3em;
+        margin: 14px 16px;
+      }
+
+      &-lastNotes {
+        margin: 0 10px;
+      }
+
+      &-subjectDetailSubject {
+        margin: 10px 0 -6px;
+      }
+
+      &-subjectDetailPeriod {
+        font-size: 0.8em;
+        margin: 0;
+      }
+    }
+  }
+
+  &-data {
+    overflow-y: scroll;
+    height: 426px;
+
+    &-lastNotes {
+      filter: drop-shadow(0px 0px 2px $memento-light-grey);
+
+      &-note {
+        background-color: $memento-white;
+        border-radius: 10px;
+        height: 100px;
+
+        &-competencesInfo {
+          right: 140px;
+
+          &-container {
+            background: $memento-white;
+            z-index: 1;
+            width: 250px;
+            font-size: 0.8em;
+            color: $memento-grey;
+            border-radius: 10px 3px 3px 10px;
+            filter: drop-shadow(0px 5px 5px $memento-competences-indicator-shadow-color);
+            max-height: 300px;
+            overflow-y: scroll;
+
+            &-text {
+              &-competencesChip {
+                height: 28px;
+                width: 28px;
+                border-radius: 100px;
+                margin: auto 10px;
+              }
+            }
+          }
+        }
+
+        &-info {
+          &-content {
+            padding: 4px 10px;
+
+            > p {
+              margin: 0;
+            }
+
+            > p:first-child {
+              text-transform: uppercase;
+            }
+
+            > p:not([class*="font-bold"]) {
+              font-size: 0.8em;
+            }
+          }
+
+          &-competencesIndicator {
+            width: 30px;
+            border-radius: 100px;
+            padding-left: 16px;
+            padding-right: 16px;
+            border-width: 2px;
+            filter: drop-shadow(-1px 0px 1px $memento-grey);
+            background: $memento-white;
+            margin: 20px;
+            right: -50px;
+
+            &:hover + .mementoNotes-data-lastNotes-note-competencesInfo {
+              display: block;
+            }
+          }
+        }
+
+        &-value {
+          border-radius: 10px;
+          color: $memento-white;
+          width: 100px;
+          z-index: 1;
+          padding: 10px;
+
+          > p:first-child {
+            font-size: 0.9em;
+          }
+
+          > p:not(:first-child) {
+            font-size: 0.7em;
+            height: 1.4em;
+            margin: 0;
+          }
+
+          &-content {
+            font-size: 1.5em;
+            margin: 0 8px;
+          }
+        }
+      }
+    }
+
+    &-subjects {
+      padding: 0 55px;
+
+      &-content {
+        background-color: $memento-white;
+        border-radius: 5px;
+        border: 0 solid;
+        border-left-width: 10px;
+
+        &-info {
+          padding-left: 10px;
+
+          > p {
+            margin: 0;
+            text-transform: uppercase;
+            font-size: 0.8em;
+          }
+        }
+
+        &-value {
+          margin-bottom: auto;
+          margin-top: auto;
+          padding-right: 30px;
+
+          > p {
+            width: 50px;
+          }
+        }
+      }
+
+      &-separator {
+        margin: 5px 0;
+        border-radius: 10px;
+        border: 0 solid $memento-light-grey;
+        border-top-width: 2px;
+      }
+
+      &-detailedSubject {
+        margin: 5px 0;
+
+        p {
+          margin: 0;
+          font-size: 0.8em;
+        }
+
+        &-value {
+          margin: auto;
+
+          span {
+            font-size: 1.5em;
+          }
+
+          &-average {
+            font-size: 2.2em;
+          }
+        }
+      }
+    }
+
+    &-noContent {
+      margin-top: 166px;
+
+      h4 {
+        font-weight: normal;
+      }
+    }
+  }
+}

package/scss/specifics/competences/sniplets/_orderShowSubject.scss

@@ -0,0 +1,88 @@
+.orderShowSubject {
+
+  @mixin dropZone() {
+    transition-duration: 0.3s;
+    cursor: grabbing;
+  }
+  @mixin loader() {
+    border: 6px solid #f3f3f3;
+    border-top: 6px solid #3498db;
+    border-radius: 50%;
+    width: 30px;
+    margin: 0 45%;
+    height: 30px;
+    animation: spin 2s linear infinite;
+    margin: 20% 50%;
+  }
+  $default-margin-between: 20px;
+
+  i.move-row {
+    &::after {
+      content: "\e847";
+    }
+  }
+
+  .container-arrow {
+    display: flex;
+    justify-content: space-around;
+
+    .rotateDown {
+      transform: rotate(-90deg);
+      cursor: pointer;
+    }
+
+    .rotateUp {
+      transform: rotate(90deg);
+    }
+
+    i.arrow-simple:before {
+      content: "\e87b";
+    }
+  }
+
+  .loaderList {
+    @include loader;
+  }
+
+  ul {
+    list-style: none;
+    height: auto;
+    padding: 0px 15%;
+
+    .hidden {
+      visibility: hidden;
+    }
+
+    .row-shadow-effect {
+      background: white;
+      border-radius: 5px;
+      padding: 10px;
+      box-shadow: -2px 5px 5px #bfbfbf;
+      z-index: 0;
+      cursor: grab;
+    }
+
+    .row-dragged {
+      z-index: 1;
+      margin-bottom: 0;
+    }
+    .drop-zone:first-child:hover,
+    li:hover > div.drop-zone {
+      height: 60px;
+      @include dropZone;
+    }
+
+    .drop-zone {
+      height: $default-margin-between;
+    }
+
+    .no-drop-zone:first-child,
+    .drop-zone:first-child{
+      height: 40px;
+    }
+
+    .no-drop-zone {
+      height: $default-margin-between;
+    }
+  }
+}

package/scss/specifics/competences/sniplets/_services.scss

@@ -0,0 +1,256 @@
+.paramServices {
+
+
+  .selectable-list {
+    width: 80%;
+    height: 100%;
+    margin: auto;
+  }
+  .service-list-container{
+    .serviceList {
+      &.active{
+        box-shadow: -0.2em 0 3px rgba(10,10,10,0.2), 0.2em 0 3px rgba(10,10,10,0.2);
+      }
+      padding-top: 0.6%;
+      border-top: 0.5px solid darkgrey;
+      & > * {
+        vertical-align: middle;
+        display: inline-block !important;
+      }
+
+      & > label:not(.select) {
+        text-align: center
+      }
+      .cellTab-left:first-child{
+        padding-left: 1em;
+      }
+    }
+    .subList{
+      background-color: #f7f6f6;
+      div{
+        .tabulation{
+          padding-left: 3em;
+        }
+      }
+    }
+    .serviceList:nth-child(2){
+      box-shadow: inset 0 0.2em 3px  rgba(10, 10, 10, .2);
+    }
+  }
+  .cellTab{
+    select{
+      margin: 0;
+    }
+  }
+  .select:not(button){
+    margin:0 !important;
+    select{
+      min-width: 0 !important;
+    }
+  }
+
+  i.eye-open-orange::before {
+    content: '\e873';
+    color: #FF8500;
+  }
+
+  .delete {
+    @include fonticon;
+    font-size: 15px;
+    color: $red;
+    font-weight: 300;
+    opacity: 0.8;
+    border: none;
+    background-color: inherit;
+
+    &::after {
+      content: '\e866';
+    }
+  }
+  input[type=number]{
+    height: 2em;
+    width: 80%;
+    margin-bottom: 0.2em;
+    padding-left: 5px;
+  }
+  .padding-top {
+    padding-top: 5px;
+  }
+  .lightboxCreate, .lightboxUpdate {
+    margin: 20px;
+  }
+
+  .lightboxCreate > .row:last-child > * {
+    display: inline-block;
+  }
+
+  .lightboxUpdate > .row > * {
+    display: inline-block;
+    vertical-align: middle;
+  }
+  .labels-in-line {
+    display: inline-flex;
+
+    div {
+      margin-left: 2px;
+      display: inline-table;
+      margin-right: 2px;
+    }
+  }
+  .filterButton {
+
+    & > * {
+      margin: 0 10px 15px;
+    }
+
+    & > input {
+      font-size: 1em;
+      font-style: italic;
+    }
+  }
+  .filter-down{
+    &::after {
+      content: ' ';
+      width: 0;
+      height: 0;
+      border-left: 5px solid transparent;
+      border-right: 5px solid transparent;
+      border-top: 6px solid #222222;
+      position: absolute;
+      margin-left: 0.5em;
+      top: 50%;
+      margin-top: -4px;
+    }
+  }
+  .filter-up{
+    &::after {
+      content: ' ';
+      width: 0;
+      height: 0;
+      border-left: 5px solid transparent;
+      border-right: 5px solid transparent;
+      border-bottom: 6px solid #222222;
+      position: absolute;
+      margin-left: 0.5em;
+      top: 50%;
+      margin-top: -4px;
+    }
+  }
+  .svg-image{
+    display: flex;
+    align-items:center;
+
+    input {
+      padding-top: 5px;
+    }
+    .image-center{
+      margin-left: 40%;
+    }
+    input,i{
+      margin-left: 1em;
+    }
+  }
+
+
+  .loaderCenter{
+    margin: 0 45%;
+  }
+  .loaderArray {
+    border: 6px solid #f3f3f3; /* Light grey */
+    border-top: 6px solid #3498db; /* Blue */
+    border-radius: 50%;
+    width: 30px;
+    height: 30px;
+    animation: spin 2s linear infinite;
+  }
+  .filterButton{
+    border-radius: 30em;
+    background-color: white;
+    color: #FF8500;
+    border:solid 1px #FF8500;
+    margin: 0.5em;
+    padding: 5px 15px;
+  }
+
+  .selected{
+    background-color: #FF8500;
+    color: white;
+  }
+
+  .tab-header{
+    position: -webkit-sticky;
+    position: sticky;
+    background: white;
+    left: 355.5px;
+    top: 64px;
+    margin-top: 0;
+    height: 50px;
+    z-index: 2;
+  }
+
+  .filterArea{
+    input{
+      border: none; /* <-- Mandatory  */
+      border:solid 1px #ccc;
+      border-radius: 10px;
+      margin-right: 10em ;
+    }
+    select{
+      border-radius: 5px;
+    }
+  }
+
+  .trash {
+    padding: 10px;
+  }
+  .service-tab-header-center{
+    padding-left: 0.6%;
+    text-align: center;
+  }
+  .service-tab-header-left{
+    padding-left: 0.6%;
+    text-align: left;
+  }
+  .fit-font-size {
+    font-size : 1vw;
+  }
+  .inline-block{
+    display: inline-block;
+  }
+  .cellTab-center{
+    text-align: center;
+  }
+  .lightboxCreate {
+    ul {
+      padding-left: 1.33em;
+      margin-top: 0.4em;
+
+      li {
+        font-size: 1.2em;
+        list-style-type: none;
+        padding-top: 10px;
+      }
+    }
+
+    .buttonAbsolute {
+      bottom: 0;
+      position: absolute;
+      right: 0;
+
+    }
+
+    .fullBorder {
+      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5) !important;
+    }
+
+    .buttonMargin {
+      margin-top: 10px
+    }
+  }
+
+  .disabled-eye {
+    opacity: 50%;
+    cursor: default;
+  }
+
+}