intelicoreact 0.0.6 → 0.0.9

package/src/Atomic/FormElements/InputDateRange/{components/InputDateRange.scss → InputDateRange.scss}

@@ -1,12 +1,24 @@
+:root {
+  --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';
+  --font-size: 13px;
+  --line-height: 20px;
+  --border-radius: 3px;
+}
+
 .date-range-input {
-  position: relative;
-  width: 430px;
-  height: fit-content;
+  /*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 {
@@ -15,21 +27,16 @@
 
   &__label {
     margin-bottom: 2px;
-    margin-left: 8px;
-    font-family: Sarabun;
-    font-style: normal;
-    font-weight: 500;
-    font-size: 12px;
-    line-height: 18px;
-    letter-spacing: 0.2px;
-    color: #757F8C;
+    font-family: var(--font-family);
+    font-size: var(--font-size);
+    line-height: var(--label-line-height);
   }
 
   &__wraper {
     position: relative;
     box-sizing: border-box;
     width: 100%;
-    height: 42px;
+    height: 100%;
   }
 
   &__absolut-wraper {
@@ -43,11 +50,11 @@
     flex-flow: column nowrap;
     justify-content: flex-start;
     align-items: flex-start;
-  
+
     background: transparent;
     z-index: 1;
 
-    
+
     &_right-position {
       left: auto;
       right: 0;
@@ -58,71 +65,42 @@
   &__static-part{
     box-sizing: border-box;
     width: 100%;
-    height: 42px;
-    word-break: break-all;
+    height: var(--input-height);
+    border-radius: var(--border-radius);
 
     display: flex;
     flex-flow: row nowrap;
     justify-content: flex-end;
     align-items: flex-start;
-  
+
     background: #FFFFFF;
-    border: 1px solid #EAF2FF;
-    box-sizing: border-box;
-    border-radius: 6px;
+    border: 1px solid var(--border-color);
   }
 
   &_focused {
     .date-range-input__static-part {
-      border: 1px solid #1F7499;
-    }
-  }
-
-  &__arrows-block{
-    box-sizing: border-box;
-    width: fit-content;
-    height: 100%;
-    padding: 1px 0;
-    display: flex;
-    flex-flow: row nowrap;
-    justify-content: flex-start;
-    align-items: flex-start;
-  }
-
-  &__arrow {
-    box-sizing: border-box;
-    width: 40px;
-    height: 100%;
-    border-left: 2px solid #EAF2FF;
-    cursor: pointer;
-
-    &:active {
-      background-color: #EAF2FF;
+      border: 1px solid blue;
+      filter: drop-shadow(0px 0px 4px rgba(93, 120, 255, 0.5));
     }
   }
 
   &__toggle-button {
     width: 100%;
     height: 100%;
-    padding: 9px 0 9px 18px;
-    
+    padding: 0 10px;
+
     display: flex;
+    flex-direction: row;
     flex-flow: row nowrap;
     justify-content: flex-start;
     align-items: center;
 
     cursor: pointer;
   }
-  
+
   &__interval-key {
-    margin-right: 10px;
-    font-family: 'Sarabun';
-    font-style: normal;
-    font-weight: normal;
-    font-size: 16px;
-    line-height: 24px;
-    letter-spacing: 0.2px;
-    color: #A6AAB4;
+    display: inline-block;
+    margin-right: 5px;
     text-transform: capitalize;
     white-space: nowrap;
     text-align: left;
@@ -130,13 +108,7 @@
   }
 
   &__range{
-    font-family: 'Sarabun';
-    font-style: normal;
-    font-weight: normal;
-    font-size: 16px;
-    line-height: 24px;
-    letter-spacing: 0.2px;
-    color: #171D33;
+    display: inline-block;
     pointer-events: none;
     word-wrap: break-word;
 
@@ -153,11 +125,31 @@
       }
 
       &_little {
-        font-size: 12px;
+        font-size: calc(var(--font-size) - 2px);
       }
     }
   }
 
+  &__arrows-block{
+    box-sizing: border-box;
+    width: fit-content;
+    height: 100%;
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: flex-start;
+    align-items: center;
+  }
+
+  &__arrow {
+    box-sizing: border-box;
+    width: auto;
+    height: 100%;
+    cursor: pointer;
+
+    &:active {
+    }
+  }
+
   &__compact {
     .date-range-input__toggle-button {
       padding-right: 18px;
@@ -172,16 +164,13 @@
 
   &_error {
     .date-range-input__wraper {
-      // border-color: #f06d8d;
       border-color: #FA564C;
     }
   }
 
   &_disabled {
     .date-range-input__wraper {
-      background: #f7f8fa;
-      opacity: 0.5;
-      border-color: #a6acb1;
+      opacity: 0.7;
       pointer-events: none;
     }
 
@@ -194,12 +183,8 @@
     position: absolute;
     left: 8px;
     bottom: -20px;
-    font-family: 'Sarabun';
-    font-style: normal;
-    font-weight: 500;
-    font-size: 12px;
-    line-height: 18px;
-    letter-spacing: 0.2px;
+    font-size: var(--font-size);
+    line-height: var(--line-height);
     color: #FA564C;
   }
 
@@ -217,10 +202,10 @@
     flex-flow: row nowrap;
     justify-content: flex-start;
     align-items: stretch;
-    border: 1px solid #E8E9EC;
-    background: #F7F8FA;
-    border-radius: 16px;
-
+    border: 1px solid var(--border-color);
+    border-radius: var(--border-radius);
+    background: #FFFFFF;
+    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.25);
     &_right-position-once-element {
       justify-content: flex-end;
     }
@@ -228,9 +213,8 @@
 
   &__intervals-list {
     width: fit-content;
-    height: fit-content;
     padding: 6px 0;
-    border-right: 1px solid #E8E9EC;
+    border-right: 1px solid var(--border-color);
   }
 
   &__intervals-item {
@@ -238,27 +222,28 @@
     position: relative;
 
     width: 100%;
-    padding: 4px 8px 4px 32px;
-    // margin-bottom: 8px;
+    padding: 0 20px 0 30px;
 
     text-transform: capitalize;
-    font-family: Sarabun;
-    font-style: normal;
-    font-weight: normal;
     white-space: nowrap;
-    font-size: 14px;
-    line-height: 20px;
-    letter-spacing: 0.2px;
-    color: #171D33;
+    font-style: normal;
+    font-weight: 300;
+    font-family: var(--font-family);
+    font-size: 12px;
+    line-height: 24px;
     cursor: pointer;
-   
+
     display: flex;
     flex-flow: row nowrap;
     justify-content: flex-start;
     align-items: center;
 
     &:hover {
-      background-color: #e7efff;
+      // background-color: rgba(128, 128, 128, 0.1);
+      background-color: #F2F2F8;
+    }
+    &_active {
+      background: #f2f2f8;
     }
 
     &-icon-active {
@@ -269,8 +254,7 @@
 
     &_disabled {
       pointer-events: none;
-      color: #A6AAB4;
-      // opacity: 0.3;
+      color: rgba($color: #000000, $alpha: 0.3);
     }
   }
 
@@ -281,8 +265,6 @@
 }
 
 .date-picker {
-  width: 670px;
-  min-height: 400px;
   display: flex;
   flex-flow: column nowrap;
   justify-content: space-between;
@@ -291,11 +273,10 @@
   &__header {
     box-sizing: border-box;
     width: 100%;
-    min-height: 74px;
     height: fit-content;
-    padding: 17px 16px;
-    border-radius: 0 16px 0 0;
+    padding: 7.5px 15px;
     border: none;
+    background-color: #F7FAFC;
 
     display: flex;
     flex-flow: column nowrap;
@@ -305,68 +286,99 @@
 
   &__inputs-block {
     width: 100%;
-    height: 40px;
+    height: fit-content;
     display: flex;
     flex-flow: row nowrap;
     justify-content: flex-start;
     align-items: center;
-
-    font-family: 'Sarabun';
-    font-style: normal;
-    font-weight: 500;
-    font-size: 16px;
-    line-height: 22px;
-    letter-spacing: 0.2px;
-    color: #3B414B;
+    font-size: var(--font-size);
+    line-height: var(--line-height);
 
     &>div:not(.date-picker__inputs-separator) {
-      height: 100%;
+      width: 110px;
+      min-height: 100%;
       margin-right: 9px;
 
-      background: #FFFFFF;
-      border: 1px solid #EAF2FF;
-      // border: 1px solid #1F7499;
+      border: 1px solid var(--border-color);
       box-sizing: border-box;
-      border-radius: 6px;
 
       &:last-child {
         margin-right: 0;
       }
 
-      &.input__wrap_focus {
-        border: 1px solid #1F7499;
+      &.input__wrap {
+        box-sizing: border-box;
         box-shadow: none;
+        border-radius: var(--border-radius);
+
+        &_focus {
+          border: 1px solid blue;
+          box-shadow: none;
+        }
       }
     }
 
+    &>div.dropdown {
+      width: 80px;
+      border-radius: var(--border-radius);
+    }
+
     .date-picker__inputs-separator {
       margin-right: 9px;
     }
+    input {
+      font-weight: 300;
+    }
   }
 
   &__date-input {
     box-sizing: border-box;
-    width: 180px;
-    height: 100%;
-    padding: 8px 16px;
+    width: fit-content;
+    height: fit-content;
+    padding: 3px 10px;
+    border-radius: var(--border-radius);
 
-    font-family: inherit;
-    font-style: inherit;
-    font-weight: inherit;
-    font-size: inherit;
-    line-height: inherit;
+    font-family: var(--font-family);
+    font-style: normal;
+    font-weight: 300;
+    font-size: var(--font-size);
+    line-height: var(--input-height);
     letter-spacing: inherit;
     color: inherit;
   }
 
   &__hour-select-input {
-    width: 110px;
-    height: 40px;
-    
+    width: 70px;
+    height: fit-content;
+    border-radius: var(--border-radius);
+
     &>.dropdown__trigger {
-      box-sizing: border-box;
       width: 100%;
-      height: 100%;
+      height: 28px;
+      padding-left: 10px;
+      padding-right: 15px;
+
+      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;
+      border: none;
+    }
+
+    & .dropdown__list-item{
+      font-family: inherit;
+      font-style: inherit;
+      font-weight: inherit;
+      font-size: inherit;
+      line-height: inherit;
+      letter-spacing: inherit;
+      color: inherit;
     }
   }
 
@@ -377,172 +389,160 @@
   &__calendars {
     box-sizing: border-box;
     width: 100%;
-    height: fit-content;
-    padding: 0 16px;
-    border-top: 1px solid #E8E9EC;
-    border-bottom: 1px solid #E8E9EC;
+    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: flex-start;
-    align-items: center;
+    justify-content: center;
+    align-items: flex-start;
+
+    &-wrapper {
+      width: 100%;
+      // width: fit-content;
+      display: flex;
+      flex-flow: row nowrap;
+      justify-content: space-between;
+      align-items: flex-start;
+    }
 
     .date-picker__calendar {
       &:first-child{
-        margin-right: 24px;
+        margin-right: 10px;
       }
     }
 
     .range-calendar {
       box-sizing: border-box;
-      width: 310px;
-      height: 300px;
-    
+      width: fit-content;
+      height: fit-content;
+
       &-header {
-        height: 40px;
+        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;
-      
+
         &__title {
-          font-family: 'Sarabun';
-          font-style: normal;
-          font-weight: 500;
-          font-size: 16px;
-          line-height: 22px;
           text-align: center;
-          letter-spacing: 0.2px;
-          color: #3B414B;
         }
-      
+
         &__next, &__prev {
-          width: 32px;
-          height: 32px;
-          background-color: #EAF2FF;
-          border-radius: 10px;
-          color: #171D33;
+          background-color: transparent;
           cursor: pointer;
         }
       }
-    
+
       &__week {
         display: flex;
-    
+
         &-title {
           margin-bottom: 5px;
         }
       }
-    
+
       &__day {
         position: relative;
         box-sizing: border-box;
-        width: 42px;
-        height: 30px;
-        // margin: 1px 0;
+        width: 29px;
+        height: 22px;
+        margin: 1px 0;
         flex-grow: 1;
         flex-basis: 0;
-        // padding: 1px 6px;
         user-select: none;
-    
+
         display: flex;
         justify-content: center;
         align-items: center;
-    
-        font-family: Roboto;
-        font-style: normal;
-        font-weight: 500;
-        font-size: 16px;
-        line-height: 22px;
+
+        font-size: var(--font-size);
+        line-height: var(--line-height);
         text-align: center;
-        letter-spacing: 0.2px;
-        color: #3B414B;
-    
+
         &--clickable {
           cursor: pointer;
-    
+
           &:hover {
             background: #E2E6F8;
           }
         }
-    
+
         &--disabled {
           cursor: default;
           opacity: 0.2;
           pointer-events: none;
-    
-          &:hover {
-            background: inherit;
-          }
-        }
-    
-        &--range-end {
-          background: #EAF2FF;
-          border: 1px solid #EAF2FF;
-          border-radius: 0 24px 24px 0;
-          color: #1F7499;
-
-          &::before {
-            content: '';
-            display: block;
-            width: 100%;
-            height: 100%;
-            box-sizing: border-box;
-            position: absolute;
-            border: 1px solid #1F7499;
-            border-radius: 24px;
-            pointer-events: none;
-          }
 
           &:hover {
-            color: #F8FBFF;
-            background-color: #1F7499;
-            border-radius: 24px;
+            background: inherit;
           }
         }
 
-        &--range-start {
-          background: #1F7499;
-          border: 1px solid #1F7499;
+        // &--range-end {
+        //   background: #EAF2FF;
+        //   border: 1px solid #EAF2FF;
+        //   border-radius: 0 24px 24px 0;
+        //   color: var(--calendar-range-point-color);
+
+        //   &::before {
+        //     content: '';
+        //     display: block;
+        //     width: 100%;
+        //     height: 100%;
+        //     box-sizing: border-box;
+        //     position: absolute;
+        //     border: 1px solid var(--calendar-range-point-color);
+        //     border-radius: 24px;
+        //     pointer-events: none;
+        //   }
+
+        //   &:hover {
+        //     color: #F8FBFF;
+        //     background-color: var(--calendar-range-point-color);
+        //     border-radius: 24px;
+        //   }
+        // }
+
+        &--range-start, &--range-end {
+          background: var(--calendar-range-point-color);
+          border: 1px solid var(--calendar-range-point-color);
           box-sizing: border-box;
-          border-radius: 24px;
+          border-radius: var(--border-radius);
           color: #F8FBFF;
-    
+
           &:hover {
-            background: #1F7499;
+            background: var(--calendar-range-point-color);
             color: #F8FBFF;
           }
         }
-    
+
         &--range-inside {
           background: #EAF2FF;
         }
-    
+
         &--prev-range-end {
           background: #E2E5EC;
-          border-radius: 4px;
+          border-radius: var(--border-radius);
         }
-    
+
         &--prev-range-inside {
           background: #F7F8FA;
         }
-    
+
         &--title {
-          // font-size: 10px;
-          // color: #9AA0B9;
-          // font-weight: normal;
-    
-          font-family: Sarabun;
-          font-style: normal;
-          font-weight: 500;
-          font-size: 16px;
-          line-height: 22px;
-          text-align: center;
-          letter-spacing: 0.2px;
-          color: #757F8C;
-    
+          font-size: var(--font-size);
+          line-height: var(--line-height);
+
           &:hover {
             background: inherit;
           }
@@ -554,11 +554,10 @@
   &__footer {
     box-sizing: border-box;
     width: 100%;
-    height: 56px;
-    min-height: 56px;
     padding: 8px 16px;
-    border-radius: 0 0 16px 0;
+    border-radius: 0 0 var(--border-radius) 0;
     border: none;
+    background-color: #F7FAFC;
 
     display: flex;
     flex-flow: row nowrap;
@@ -577,16 +576,19 @@
   }
 
   &__button {
-    height: 100%;
     text-transform: capitalize;
-    
+
     &:first-child {
       width: 80px;
       margin-right: 16px;
+      background-color: #FFFFFF;
+      border: 1px solid #A6ACB1;
+      border-radius: var(--border-radius);
     }
 
     &:last-child {
-     width: 120px;
+      width: 110px;
+      border-radius: var(--border-radius);
     }
   }
 
@@ -596,3 +598,27 @@
     height: 100%;
   }
 }
+
+@media screen and (max-width: 992px) {
+  .opened-part__intervals-list {
+    display: none;
+  }
+}
+
+@media screen and (max-width: 745px) {
+  .date-picker__inputs-block {
+    flex-flow: wrap;
+  }
+
+  .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%;
+  }
+}