ode-csslib 4.0.1 → 4.0.3

package/scss/specifics/crre/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/crre/components/_index.scss

@@ -0,0 +1,6 @@
+@import 'dropdown-menu';
+@import 'switch';
+@import 'toasts';
+@import 'search-and-select';
+@import "tabs";
+@import "loader";

package/scss/specifics/crre/components/_loader.scss

@@ -0,0 +1,55 @@
+$loader-animation-duration: 1.8s;
+
+.loader-container {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  .loader {
+    margin: 50px;
+    transform: translate(-50%, -50%);
+    width: 50px;
+    height: 10px;
+    background: #38a4cd;
+    border-radius: 5px;
+    animation: load $loader-animation-duration ease-in-out infinite;
+
+    &:before, &:after {
+      position: absolute;
+      display: block;
+      content: "";
+      animation: load $loader-animation-duration ease-in-out infinite;
+      height: 10px;
+      border-radius: 5px;
+    }
+
+    &:before {
+      top: -20px;
+      left: 10px;
+      width: 40px;
+      background: grey;
+    }
+
+    &:after {
+      bottom: -20px;
+      width: 35px;
+      background: rgb(3, 32, 48);;
+    }
+  }
+}
+
+@keyframes load {
+  0% {
+    transform: translateX(40px);
+  }
+
+  50% {
+    transform: translateX(-30px);
+  }
+  100% {
+    transform: translateX(40px);
+  }
+}

package/scss/specifics/crre/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/crre/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/crre/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%;
+}

package/scss/specifics/crre/components/_toasts.scss

@@ -0,0 +1,102 @@
+.toasts {
+  position: fixed;
+  top: 74px;
+  right: 25px;
+  width: 350px;
+  z-index: 999999;
+  box-sizing: border-box;
+
+  .toast-content {
+    @include material-card();
+    margin-bottom: 10px;
+    position: relative;
+    opacity: 0;
+    margin-top: 40px;
+    box-sizing: border-box;
+    font-size: 16px !important;
+    border-left: none !important;
+    height: 0 !important;
+    overflow: hidden;
+    transition: all 0.25s ease;
+
+    .content {
+      padding: 15px 10px;
+      line-height: 28px;
+
+      &:before {
+        @include fonticon();
+        margin-right: 10px;
+      }
+    }
+
+    &.show {
+      margin-top: 10px !important;
+      opacity: 1;
+      height: auto !important;
+      overflow: auto !important;
+    }
+
+    &.confirm {
+      color: darken($green, 35%);
+      background-color: lighten($green, 30%);
+
+      .content:before {
+        content: '\e871';
+      }
+
+      .timer {
+        background-color: darken($green, 15%);
+      }
+    }
+
+    &.info {
+      color: darken($cyan, 35%);
+      background-color: lighten($cyan, 30%);
+
+      .content:before {
+        content: '\e84b';
+      }
+
+      .timer {
+        background-color: darken($cyan, 15%);
+      }
+    }
+
+    &.warning {
+      color: darken($warning-color, 35%);
+      background-color: lighten($warning-color, 30%);
+
+      .content:before {
+        content: '\e903';
+      }
+
+      .timer {
+        background-color: darken($warning-color, 15%);
+      }
+    }
+
+    &.info, &.warning {
+      .content:before {
+        font-size: 20px !important;
+      }
+    }
+
+    .timer {
+      width: 100%;
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      height: 4px;
+      border-bottom-left-radius: 2px;
+      border-bottom-right-radius: 2px;
+      transition-timing-function: linear;
+      transition-property: all;
+      transition-duration: 3s;
+
+      &.animation {
+        width: 0;
+        border-bottom-right-radius: 0;
+      }
+    }
+  }
+}

package/scss/specifics/crre/fragments/_index.scss

@@ -0,0 +1,3 @@
+@import 'responsive';
+@import "status-circle";
+@import "_statusBar";

package/scss/specifics/crre/fragments/_responsive.scss

@@ -0,0 +1,69 @@
+@media screen and (max-width: $tablette) {
+  .block-mobile {
+    display: block !important;
+  }
+
+  .mobile-navigation {
+    display: block !important;
+  }
+
+  nav.mobile-navigation {
+    .notification-bull {
+      top: 0;
+      height: 20px;
+      width: 20px;
+      line-height: 20px;
+      font-size: 14px;
+      border-radius: 10px;
+      padding: 2px;
+      margin-left: 10px;
+    }
+  }
+
+  .responsive-table {
+    table {
+      td {
+        text-align: center !important;
+      }
+
+      tfoot {
+        display: block;
+      }
+    }
+  }
+
+  .log-view{
+
+    table {
+      thead td {
+        label.checkbox {
+          position: relative !important;
+        }
+      }
+    }
+
+    .color-tag {
+      margin: 0 auto;
+    }
+  }
+
+  .catalog-list {
+    .dominos {
+      .item {
+        max-width: unset !important;
+        width: 50% !important;
+      }
+    }
+
+    &.border-list {
+      display: none;
+    }
+  }
+
+  .detail-box {
+    left: 0 !important;
+    float: none !important;
+    width: 100% !important;
+    position: relative !important;
+  }
+}

package/scss/specifics/crre/fragments/_status-circle.scss

@@ -0,0 +1,108 @@
+.status-circle {
+  width:30px;
+  height:30px;
+  border-radius:50%;
+  margin-right: 10px;
+  > i {
+    margin-bottom: 3px;
+    color: $white;
+    display: block;
+    text-align: center;
+    margin-top: 3px;
+    margin-left: 3px;
+    font-size: 25px;
+    text-align: center;
+    background-repeat: no-repeat;
+
+    height: 90%;
+    width: 80%;
+    &:after {
+      color: $white;
+    }
+  }
+
+  &.WAITING {
+    background: $yellow;
+    > i {
+      background-image: url(/crre/public/img/scss/send.svg);
+    }
+  }
+
+  &.NEW {
+    background: $black;
+    > i {
+      background-image: url(/crre/public/img/scss/send.svg);
+    }
+  }
+
+  &.PROGRESS, &.PARTIALLYVALIDED, &.PARTIALLYREJECTED, &.RESUBMIT, &.PARTIALLYRESUBMIT {
+    background: $yellow;
+
+    > i {
+      background-image: url(/crre/public/img/scss/sync.svg);
+    }
+  }
+
+  &.SENT {
+    background: $green;
+
+    > i {
+      background-image: url(/crre/public/img/scss/truck.svg);
+    }
+  }
+
+  &.DONE {
+    background: $green;
+    > i {
+      background-image: url(/crre/public/img/scss/check-all.svg);
+      fill: white;
+    }
+  }
+  &.REJECTED, &.CANCELED {
+    background: $red;
+    >i:after{
+      content: '\e866';
+    }
+  }
+
+  &.WAITING_FOR_ACCEPTANCE{
+    background: $orange;
+    >i:after{
+      content: "?";
+      font-size: 44px;
+      font-family: "Roboto";
+    }
+  }
+
+  &.VALID {
+    background: $green;
+    >i{
+      background-image: url(/crre/public/img/scss/check.svg);
+    }
+  }
+  &.BLUE {
+    background: blue;
+    >i{
+      background-image: url(/crre/public/img/scss/check.svg);
+    }
+  }
+
+  &.GRAY {
+    background: gray;
+    >i{
+      background-image: url(/crre/public/img/scss/check.svg);
+    }
+  }
+}
+
+.myOrder{
+  width: 15px;
+  height: 15px;
+  margin-top: 2px;
+}
+
+.justification-rejected{
+  filter: invert(31%) sepia(50%) saturate(4547%) hue-rotate(337deg) brightness(100%) contrast(128%);
+}
+
+