ode-csslib 1.0.0-dev-produit.202209220950

package/scss/specifics/lystore/components/_async-autocomplete.scss

@@ -0,0 +1,45 @@
+.async-autocomplete {
+  .input-async-autocomplete {
+    &.loading {
+      @include fonticon();
+      &::after {
+        content: '\e85a';
+        position: absolute;
+        right: 10px;
+        color: $primary;
+        animation: spinner 1.25s linear infinite;
+      }
+    }
+  }
+
+  .scroll.drop-down {
+    top: 80%;
+    max-height: 200px;
+    overflow-y: scroll;
+  }
+
+  .drop-down {
+    top: 80%;
+  }
+}
+
+@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/lystore/components/_cloud-loader.scss

@@ -0,0 +1,169 @@
+@include keyframes(movingData) {
+  from {
+    top: 125px;
+    opacity: 1;
+  }
+  to {
+    top: 0;
+    opacity: 0;
+  }
+}
+
+.cloud-loader {
+  width: 100%;
+  height: 200px;
+
+  .cloud {
+    height: 115px;
+    margin: 40px auto;
+    position: relative;
+    width: 200px;
+
+    &:before {
+      background-color: $white;
+      border-radius: 50%;
+      content: '';
+      height: 50px;
+      left: 35px;
+      position: absolute;
+      top: 45px;
+      width: 50px;
+      z-index: 1;
+    }
+
+    &:after {
+      position: absolute;
+      top: 30px;
+      left: 80px;
+      background-color: $white;
+      border-radius: 50%;
+      content: '';
+      width: 75px;
+      height: 75px;
+      z-index: 1;
+    }
+
+    div {
+      border: solid 10px $primary-dark;
+    }
+
+    .bottom_cloud, .animation-container {
+      border-radius: 50px;
+      height: 75px;
+      position: absolute;
+      width: 175px;
+      overflow: hidden;
+    }
+
+    .bottom_cloud {
+      z-index: 0;
+      top: 60px;
+      left: 10px;
+      background-color: $white;
+    }
+
+    .animation-container {
+      z-index: 2;
+      border: none;
+      left: 20px;
+      top: 20px;
+      height: 125px;
+
+      .data {
+        position: absolute;
+        top: 125px;
+        border: none;
+        color: $primary-dark;
+        opacity: 1;
+        animation: movingData 1.25s ease-out infinite;
+
+        &:nth-child(0) {
+          left: 20px;
+          font-size: 12px;
+          animation-delay: 0.5s;
+        }
+
+        &:nth-child(1) {
+          left: 50px;
+          font-size: 10px;
+          animation-delay: 0.75s;
+        }
+
+        &:nth-child(2) {
+          left: 75px;
+          font-size: 16px;
+          animation-delay: 0.25s;
+        }
+
+        &:nth-child(3) {
+          left: 100px;
+          font-size: 12px;
+        }
+
+        &:nth-child(4) {
+          left: 140px;
+          font-size: 10px;
+          animation-delay: 0.15s;
+        }
+      }
+
+      .arrow {
+        border: none;
+        width: 15px;
+        height: 50px;
+        background-color: $primary-dark;
+        margin: 95px auto;
+        z-index: 2;
+        position: relative;
+
+        &:before {
+          content: '';
+          background-color: $primary-dark;
+          width: 48px;
+          height: 15px;
+          display: block;
+          position: absolute;
+          left: -28px;
+          transform: rotate(-45deg);
+          top: -4px;
+          border-radius: 15px;
+        }
+
+        &:after {
+          content: '';
+          background-color: $primary-dark;
+          width: 48px;
+          height: 15px;
+          display: block;
+          position: absolute;
+          left: -5px;
+          transform: rotate(45deg);
+          top: -4px;
+          border-radius: 15px;
+        }
+      }
+    }
+
+    .right_cloud {
+      background-color: $white;
+      border-radius: 100%;
+      height: 75px;
+      left: 70px;
+      position: absolute;
+      top: 20px;
+      width: 75px;
+      z-index: -1;
+    }
+
+    .left_cloud {
+      background-color: $white;
+      border-radius: 100%;
+      height: 50px;
+      left: 25px;
+      position: absolute;
+      top: 35px;
+      width: 50px;
+      z-index: -1;
+    }
+  }
+}

package/scss/specifics/lystore/components/_dropdown-menu.scss

@@ -0,0 +1,49 @@
+drop-down-menu {
+  position: relative;
+
+  .title {
+    position: relative;
+    padding: 5px 15px;
+    cursor: pointer;
+
+    &::after {
+      content: ' ';
+      width: 0;
+      height: 0;
+      border-left: 5px solid transparent;
+      border-right: 5px solid transparent;
+      border-top: 6px solid $darkest-grey;
+      position: absolute;
+      right: -6px;
+      top: 50%;
+      margin-top: -4px;
+    }
+  }
+
+  .options {
+    position: absolute;
+    background: $white;
+    padding: 10px;
+    margin-top: 15px;
+    left: 0;
+    @include material-card(5px, 10px);
+    z-index: 1;
+
+    &.hidden {
+      display: none;
+    }
+
+    opt {
+      cursor: pointer;
+      padding: 10px;
+      display: block;
+      white-space: nowrap;
+      text-align: left;
+      color: $primary;
+
+      &:hover {
+        color: $accent;
+      }
+    }
+  }
+}

package/scss/specifics/lystore/components/_index.scss

@@ -0,0 +1,9 @@
+@import './dropdown-menu';
+@import './switch';
+@import './toasts';
+@import './async-autocomplete';
+@import './upload-files';
+@import './cloud-loader';
+@import './parameter-table';
+@import './search-and-select';
+@import "./tabs";

package/scss/specifics/lystore/components/_parameter-table.scss

@@ -0,0 +1,53 @@
+parameter-table
+{
+  .parameter-table{
+    position: fixed;
+    display: block;
+    right: -250px;
+    top: 146px;
+    width: 290px;
+    &.show{
+      right: 0px;
+      transition: right 250ms ease;
+    }
+    &.hide{
+      right: -250px;
+      transition: right 250ms ease;
+    }
+  }
+
+  .button-puce{
+    width: 40px;
+    height: 40px;
+    background: #FF8500;
+    border-radius: 15px 0 0 15px;
+    i.param{
+      &:before{
+        content: '\e854';
+        font-size: 25px;
+        color: white;
+        position: absolute;
+        margin-left: 10px;
+        margin-top: 6.5px;
+      }
+    }
+  }
+
+  .parameter-table::-webkit-scrollbar{
+    width: 9px;
+    background-color: #F5F5F5;
+  }
+  .parameter-table::-webkit-scrollbar-thumb
+  {
+    border-radius: 10px;
+    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
+    background-color: #aaa;
+  }
+  article{
+    display: block;
+    width: 250px ;
+    overflow-y: auto;
+    height: 60vh;
+  }
+
+}

package/scss/specifics/lystore/components/_search-and-select.scss

@@ -0,0 +1,129 @@
+search-and-select{
+  display: block;
+  height: 35px;
+  position: relative;
+
+  .search-and-select-button{
+    min-width: 50px;
+    background-color: white;
+    color: #333;
+    box-shadow: none;
+    border: solid 1px #aaa;
+    transition: all 0.5s ease;
+    border-radius: 0;
+    text-transform: inherit !important;
+    height: 40px;
+    font-size: 14.4px;
+    padding: 0px 10px;
+    text-align: left;
+    width: 100%;
+    max-width: 500px;
+
+
+    &:after{
+      content: '\25B2';
+      font-size: 10px;
+      margin-left: 10px;
+      float: right;
+      transition: transform .25s ease-in-out;
+      transform: rotate(-180deg);
+    }
+
+    .opened{
+    }
+  }
+
+
+  .search-and-select-panel{
+    width: 100%;
+    max-width: 500px;
+    box-sizing: border-box;
+    position: absolute;
+    z-index: 10000;
+    max-height: 500px;
+    transition: max-height .25s ease-in-out;
+    background: #fff;
+    box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.26);
+    border-bottom-left-radius: 2px;
+    border-bottom-right-radius: 2px;
+    padding: 0 10px;
+    margin-left: 2px;
+    &.hidden{
+      max-height: 0px;
+    }
+
+    ul::-webkit-scrollbar-track
+    {
+      -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
+      border-radius: 10px;
+      background-color: white;
+    }
+
+    ul::-webkit-scrollbar
+    {
+      width: 8px;
+      height: 10px;
+      background-color: #F5F5F5;
+    }
+
+    ul::-webkit-scrollbar-thumb
+    {
+      border-radius: 10px;
+      -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
+      background-color: #dadada;
+    }
+    ul{
+      list-style: none;
+      padding: 0;
+      overflow: auto;
+      max-height: 415px;
+      li{
+        line-height: 25px;
+        font-size: 13px;
+        white-space: nowrap;
+        margin-bottom: 5px;
+        padding: 0px 10px;
+        border-radius: 2px;
+          &:hover{
+            background: #f0f0f0;
+          }
+      }
+    }
+  }
+  button.search-and-select-button.disabled{
+    background-color: #ebebe4 !important;
+  }
+  button.search-and-select-button.ng-binding.disabled{
+    background-color: #ebebe4;
+  }
+  .search-and-select-bar{
+    width: 100%;
+    position: relative;
+    margin: 10px 0;
+    border-bottom: 1px solid #F0F0F0;
+    input{
+      min-width: 100px;
+      width: 90%;
+      height: 30px;
+      box-sizing: border-box;
+      border: none;
+      outline: none;
+      text-indent: 10px;
+      transition: border 0.25s ease-in-out
+    }
+    i .icon-search-cancel{
+      width: 5%;
+      right: 0px;
+      position: absolute;
+      &:before{
+        right: 0;
+        content: '\e866';
+        width: 20px;
+        height: 20px;
+        font-size: small;
+        color: #2a9cc8;
+      }
+    }
+
+  }
+}

package/scss/specifics/lystore/components/_switch.scss

@@ -0,0 +1,57 @@
+switch-toggle {
+  .switch {
+    cursor: pointer;
+
+    .tick {
+      width: 40px;
+      height: 12px;
+      display: block;
+      border-radius: 10px;
+      background: $neutral-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/lystore/components/_tabs.scss

@@ -0,0 +1,127 @@
+.tabs-container{
+  height: 40px;
+  border-bottom: #ddd 1px solid;
+  padding: 0;
+  margin-bottom: 10px;
+  .menu{
+    background: white;
+    margin: 0;
+    height: 34px;
+    max-height: 40px;
+    padding: 5px 15px 0 15px;
+    border: #ccc 0.5px solid;
+    border-radius: 15px 15px 0% 0%;
+    line-height: 30px;
+    z-index: 0;
+    position: relative;
+    &.selected{
+      cursor: context-menu;
+      background: #4bafd5 !important;
+      color: white;
+      margin-left: -5px;
+      margin-right: -5px;
+      z-index: 2 !important;
+    }
+  }
+}
+
+.tr-warning{
+  background: #ffe7cc;
+}
+.warning-icon{
+  @include fonticon();
+  &:before {
+    content: '\e903';
+  }
+}
+
+.valid-icon{
+  @include fonticon();
+  &:before {
+    content: '\e871';
+  }
+}
+.tr-valid{
+  background: #c7f0c7;
+}
+.tr-error{
+  background-color: #ffa6a6;
+  .content:before {
+    content: '\e903';
+  }
+}
+.one-small{
+  width: 4%;
+}
+.two-small{
+  width: 8%;
+}
+.three-small{
+  width: 12%;
+}
+.four-small{
+  width: 16%;
+}
+.five-small{
+  width: 20%;
+}
+.six-small{
+  width: 24%;
+}
+.seven-small{
+ width: 28%;
+}
+.eight-small{
+  width: 32%;
+}
+.nine-small{
+  width:  36%;
+}
+.ten-small{
+  width:  40%;
+}
+.eleven-small{
+  width: 44%;
+}
+.twelve-small{
+ width:  48%;
+}
+.thirteen-small{
+  width:  52%;
+}
+.fourteen-small{
+  width: 56%;
+}
+.fifteen-small{
+  width: 60%;
+}
+.sixteen-small{
+  width: 64%;
+}
+.seventeen-small{
+  width: 68%;
+}
+.eighteen-small{
+  width: 72%;
+}
+.nineteen-small{
+  width: 76%;
+}
+.twenty-small{
+  width: 80%;
+}
+.twenty-one-small{
+  width: 84%;
+}
+.twenty-two-small{
+  width: 88%;
+}
+.twenty-three-small{
+  width: 92%;
+}
+.twenty-four-small{
+  width: 96%;
+}
+.twenty-five-small{
+  width: 100%;
+}