intelicoreact 1.0.29 → 1.0.30

package/dist/Atomic/FormElements/InputDateRange/InputDateRange.scss

@@ -2,29 +2,30 @@
   --input-height: 28px;
   --label-line-height: 16px;
   // --border-color: rgba(0, 0, 0, 0.3);
-  --border-color: #e2e5ec;
-  --calendar-range-point-color: #6b81dd;
-  --font-family: "Roboto";
+  --border-color: #E2E5EC;
+  --calendar-range-point-color: #6B81DD;
+  --font-family: roboto, sans-serif;
   --font-size: 13px;
   --line-height: 20px;
   --border-radius: 3px;
 
-  /*position: relative;
+  /* position: relative;
   width: 335px;
   //height: calc(var(--input-height) + var(--label-line-height));
 
   display: flex;
   flex-flow: column nowrap;
   justify-content: flex-end;
-  align-items: flex-start;*/
+  align-items: flex-start; */
 
   input::-webkit-outer-spin-button,
   input::-webkit-inner-spin-button {
-    -webkit-appearance: none;
+    appearance: none;
   }
 
   &__label {
     margin-bottom: 2px;
+
     font-family: var(--font-family);
     font-size: var(--font-size);
     line-height: var(--label-line-height);
@@ -32,82 +33,90 @@
 
   &__wraper {
     position: relative;
+
     box-sizing: border-box;
     width: 100%;
     height: 100%;
   }
 
   &__absolut-wraper {
-    width: 100%;
-    height: fit-content;
     position: relative;
+    z-index: 1;
+
     display: flex;
+    align-items: flex-start;
     flex-flow: column nowrap;
     justify-content: flex-start;
-    align-items: flex-start;
+
+    width: 100%;
+    height: fit-content;
+
     background: transparent;
-    z-index: 1;
 
     &_right-position {
-      left: auto;
       right: 0;
+      left: auto;
     }
   }
 
   &__static-part {
-    box-sizing: border-box;
-    width: 100%;
-    height: var(--input-height);
-    border-radius: var(--border-radius);
-
     display: flex;
+    align-items: flex-start;
     flex-flow: row nowrap;
     justify-content: flex-end;
-    align-items: flex-start;
 
-    background: #ffffff;
+    box-sizing: border-box;
+    width: 100%;
+    height: var(--input-height);
+
     border: 1px solid var(--border-color);
+    border-radius: var(--border-radius);
+
+    background: #FFF;
   }
 
   &_focused {
     .date-range-input__static-part {
       border: 1px solid blue;
-      filter: drop-shadow(0px 0px 4px rgba(93, 120, 255, 0.5));
+      filter: drop-shadow(0 0 4px rgb(93 120 255 / 50%));
     }
   }
 
   &__toggle-button {
-    width: 100%;
-    height: 100%;
-    padding: 0 10px;
-
     display: flex;
-    flex-direction: row;
+    align-items: center;
     flex-flow: row nowrap;
+    flex-direction: row;
     justify-content: flex-start;
-    align-items: center;
+
+    width: 100%;
+    height: 100%;
+    padding: 0 10px;
 
     cursor: pointer;
   }
 
   &__interval-key {
     display: inline-block;
+
     margin-right: 5px;
-    text-transform: capitalize;
-    white-space: nowrap;
+
     text-align: left;
+    white-space: nowrap;
+    text-transform: capitalize;
     pointer-events: none;
   }
 
   &__range {
     display: inline-block;
-    pointer-events: none;
-    word-wrap: break-word;
 
     display: flex;
+    align-items: center;
     flex-flow: row wrap;
     justify-content: flex-start;
-    align-items: center;
+
+    word-wrap: break-word;
+    pointer-events: none;
 
     &-text {
       display: inline-block;
@@ -123,23 +132,22 @@
   }
 
   &__arrows-block {
-    box-sizing: border-box;
-    width: fit-content;
-    height: 100%;
     display: flex;
+    align-items: center;
     flex-flow: row nowrap;
     justify-content: flex-start;
-    align-items: center;
+
+    box-sizing: border-box;
+    width: fit-content;
+    height: 100%;
   }
 
   &__arrow {
     box-sizing: border-box;
     width: auto;
     height: 100%;
-    cursor: pointer;
 
-    &:active {
-    }
+    cursor: pointer;
   }
 
   &__compact {
@@ -150,20 +158,21 @@
 
   &_hide-arrows {
     .date-range-input__toggle-button {
-      padding: 9px 18px 9px 18px;
+      padding: 9px 18px;
     }
   }
 
   &_error {
     .date-range-input__wraper {
-      border-color: #fa564c;
+      border-color: #FA564C;
     }
   }
 
   &_disabled {
     .date-range-input__wraper {
-      opacity: 0.7;
       pointer-events: none;
+
+      opacity: 0.7;
     }
 
     .date-range-input__toggle-button {
@@ -173,16 +182,19 @@
 
   &__error-block {
     position: absolute;
-    left: 8px;
     bottom: -20px;
+    left: 8px;
+
+    color: #FA564C;
+
     font-size: var(--font-size);
     line-height: var(--line-height);
-    color: #fa564c;
   }
 
   &__opened-part {
     width: fit-content;
     height: fit-content;
+
     background-color: transparent;
   }
 }
@@ -194,13 +206,15 @@
 
   &__wrapper {
     display: flex;
+    align-items: stretch;
     flex-flow: row nowrap;
     justify-content: flex-start;
-    align-items: stretch;
+
     border: 1px solid var(--border-color);
     border-radius: var(--border-radius);
-    background: #ffffff;
-    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.25);
+    background: #FFF;
+    box-shadow: 0 4px 25px rgb(0 0 0 / 25%);
+
     &_right-position-once-element {
       justify-content: flex-end;
     }
@@ -209,58 +223,65 @@
   &__intervals-list {
     width: fit-content;
     padding: 6px 0;
+
     border-right: 1px solid var(--border-color);
   }
 
   &__intervals-item {
-    box-sizing: border-box;
     position: relative;
 
+    display: flex;
+    align-items: center;
+    flex-flow: row nowrap;
+    justify-content: flex-start;
+
+    box-sizing: border-box;
+
     width: 100%;
     padding: 0 20px 0 30px;
 
-    text-transform: capitalize;
+    cursor: pointer;
     white-space: nowrap;
-    font-style: normal;
-    font-weight: 300;
+
+    text-transform: capitalize;
+
     font-family: var(--font-family);
     font-size: 12px;
+    font-weight: 300;
+    font-style: normal;
     line-height: 24px;
-    cursor: pointer;
-
-    display: flex;
-    flex-flow: row nowrap;
-    justify-content: flex-start;
-    align-items: center;
 
     &:hover {
       // background-color: rgba(128, 128, 128, 0.1);
-      background-color: #f2f2f8;
+      background-color: #F2F2F8;
     }
+
     &_active {
-      background: #f2f2f8;
+      background: #F2F2F8;
     }
 
     &-icon-active {
       position: absolute;
-      left: 10px;
       top: 5px;
+      left: 10px;
     }
 
     &_disabled {
       pointer-events: none;
-      color: rgba($color: #000000, $alpha: 0.3);
+
+      color: rgba($color: #000, $alpha: 30%);
     }
   }
 
   &__date-picker {
     width: fit-content;
+
     border: none;
   }
 
   &--left {
+    right: 0;
     left: auto;
-    right: 0
   }
 
   &--top {
@@ -271,41 +292,44 @@
 
 .date-picker {
   display: flex;
+  align-items: flex-start;
   flex-flow: column nowrap;
   justify-content: space-between;
-  align-items: flex-start;
 
   &__header {
+    display: flex;
+    align-items: flex-start;
+    flex-flow: column nowrap;
+    justify-content: flex-start;
+
     box-sizing: border-box;
     width: 100%;
     height: fit-content;
     padding: 7.5px 15px;
-    border: none;
-    background-color: #f7fafc;
 
-    display: flex;
-    flex-flow: column nowrap;
-    justify-content: flex-start;
-    align-items: flex-start;
+    border: none;
+    background-color: #F7FAFC;
   }
 
   &__inputs-block {
-    width: 100%;
-    height: fit-content;
     display: flex;
+    align-items: center;
     flex-flow: row nowrap;
     justify-content: flex-start;
-    align-items: center;
+
+    width: 100%;
+    height: fit-content;
+
     font-size: var(--font-size);
     line-height: var(--line-height);
 
     & > div:not(.date-picker__inputs-separator) {
+      box-sizing: border-box;
       width: 110px;
       min-height: 100%;
       margin-right: 9px;
 
       border: 1px solid var(--border-color);
-      box-sizing: border-box;
 
       &:last-child {
         margin-right: 0;
@@ -313,8 +337,9 @@
 
       &.input__wrap {
         box-sizing: border-box;
-        box-shadow: none;
+
         border-radius: var(--border-radius);
+        box-shadow: none;
 
         &_focus {
           border: 1px solid blue;
@@ -325,12 +350,14 @@
 
     & > div.dropdown {
       width: 80px;
+
       border-radius: var(--border-radius);
     }
 
     .date-picker__inputs-separator {
       margin-right: 9px;
     }
+
     input {
       font-weight: 300;
     }
@@ -341,49 +368,55 @@
     width: fit-content;
     height: fit-content;
     padding: 3px 10px;
+
+    letter-spacing: inherit;
+
+    color: inherit;
     border-radius: var(--border-radius);
 
     font-family: var(--font-family);
-    font-style: normal;
-    font-weight: 300;
     font-size: var(--font-size);
+    font-weight: 300;
+    font-style: normal;
     line-height: var(--input-height);
-    letter-spacing: inherit;
-    color: inherit;
   }
 
   &__hour-select-input {
     width: 70px;
     height: fit-content;
+
     border-radius: var(--border-radius);
 
     & > .dropdown__trigger {
+      box-sizing: border-box;
       width: 100%;
       height: 28px;
-      padding-left: 10px;
       padding-right: 15px;
+      padding-left: 10px;
 
-      font-family: inherit;
-      font-style: inherit;
-      font-weight: inherit;
-      font-size: inherit;
-      line-height: inherit;
       letter-spacing: inherit;
-      color: inherit;
 
-      box-sizing: border-box;
-      box-shadow: none;
+      color: inherit;
       border: none;
-    }
+      box-shadow: none;
 
-    & .dropdown__list-item {
       font-family: inherit;
-      font-style: inherit;
-      font-weight: inherit;
       font-size: inherit;
+      font-weight: inherit;
+      font-style: inherit;
       line-height: inherit;
+    }
+
+    & .dropdown__list-item {
       letter-spacing: inherit;
+
       color: inherit;
+
+      font-family: inherit;
+      font-size: inherit;
+      font-weight: inherit;
+      font-style: inherit;
+      line-height: inherit;
     }
   }
 
@@ -392,26 +425,28 @@
   // }
 
   &__calendars {
+    display: flex;
+    align-items: flex-start;
+    flex-flow: row nowrap;
+    justify-content: center;
+
     box-sizing: border-box;
     width: 100%;
     height: 100%;
     padding: 10px 16px;
+
     border-top: 1px solid var(--border-color);
     border-bottom: 1px solid var(--border-color);
-    background-color: #ffffff;
-
-    display: flex;
-    flex-flow: row nowrap;
-    justify-content: center;
-    align-items: flex-start;
+    background-color: #FFF;
 
     &-wrapper {
-      width: 100%;
       // width: fit-content;
       display: flex;
+      align-items: flex-start;
       flex-flow: row nowrap;
       justify-content: space-between;
-      align-items: flex-start;
+
+      width: 100%;
     }
 
     .date-picker__calendar {
@@ -426,18 +461,18 @@
       height: fit-content;
 
       &-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+
         height: fit-content;
         margin-bottom: 12px;
 
         font-size: calc(var(--font-size) + 2px);
-        line-height: calc(var(--line-height) + 4px);
-
-        font-style: normal;
         font-weight: 500;
 
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
+        font-style: normal;
+        line-height: calc(var(--line-height) + 4px);
 
         &__title {
           text-align: center;
@@ -445,8 +480,9 @@
 
         &__next,
         &__prev {
-          background-color: transparent;
           cursor: pointer;
+
+          background-color: transparent;
         }
       }
 
@@ -460,35 +496,38 @@
 
       &__day {
         position: relative;
+
+        display: flex;
+        align-items: center;
+        flex-basis: 0;
+        flex-grow: 1;
+        justify-content: center;
+
         box-sizing: border-box;
         width: 29px;
         height: 22px;
         margin: 1px 0;
-        flex-grow: 1;
-        flex-basis: 0;
-        user-select: none;
 
-        display: flex;
-        justify-content: center;
-        align-items: center;
+        user-select: none;
+        text-align: center;
 
         font-size: var(--font-size);
         line-height: var(--line-height);
-        text-align: center;
 
         &--clickable {
           cursor: pointer;
 
           &:hover {
-            background: #e2e6f8;
+            background: #E2E6F8;
           }
         }
 
         &--disabled {
           cursor: default;
-          opacity: 0.2;
           pointer-events: none;
 
+          opacity: 0.2;
+
           &:hover {
             background: inherit;
           }
@@ -521,29 +560,30 @@
 
         &--range-start,
         &--range-end {
-          background: var(--calendar-range-point-color);
-          border: 1px solid var(--calendar-range-point-color);
           box-sizing: border-box;
+
+          color: #F8FBFF;
+          border: 1px solid var(--calendar-range-point-color);
           border-radius: var(--border-radius);
-          color: #f8fbff;
+          background: var(--calendar-range-point-color);
 
           &:hover {
+            color: #F8FBFF;
             background: var(--calendar-range-point-color);
-            color: #f8fbff;
           }
         }
 
         &--range-inside {
-          background: #eaf2ff;
+          background: #EAF2FF;
         }
 
         &--prev-range-end {
-          background: #e2e5ec;
           border-radius: var(--border-radius);
+          background: #E2E5EC;
         }
 
         &--prev-range-inside {
-          background: #f7f8fa;
+          background: #F7F8FA;
         }
 
         &--title {
@@ -559,17 +599,18 @@
   }
 
   &__footer {
+    display: flex;
+    align-items: center;
+    flex-flow: row nowrap;
+    justify-content: space-between;
+
     box-sizing: border-box;
     width: 100%;
     padding: 8px 16px;
-    border-radius: 0 0 var(--border-radius) 0;
-    border: none;
-    background-color: #f7fafc;
 
-    display: flex;
-    flex-flow: row nowrap;
-    justify-content: space-between;
-    align-items: center;
+    border: none;
+    border-radius: 0 0 var(--border-radius) 0;
+    background-color: #F7FAFC;
 
     &_once-element {
       justify-content: flex-end;
@@ -588,13 +629,15 @@
     &:first-child {
       width: 80px;
       margin-right: 16px;
-      background-color: #ffffff;
-      border: 1px solid #a6acb1;
+
+      border: 1px solid #A6ACB1;
       border-radius: var(--border-radius);
+      background-color: #FFF;
     }
 
     &:last-child {
       width: 110px;
+
       border-radius: var(--border-radius);
     }
   }
@@ -620,12 +663,15 @@
   .date-picker__header {
     flex-flow: row wrap;
   }
+
   .date-picker__calendars-wrapper {
     display: block;
+
     margin: auto;
   }
+
   .date-picker__calendars .range-calendar {
-    margin: 0 !important;
     width: 100%;
+    margin: 0 !important;
   }
 }