linear-react-components-ui 0.4.76-rc.9 → 0.4.77-beta.10

package/lib/assets/styles/multiSelect.scss

@@ -0,0 +1,105 @@
+@import "commons.scss";
+@import "effects.scss";
+.multiSelect-component {
+  width: 100%;
+  display: block;
+  .selectwrapper {
+    height: auto;
+
+    > .multiselect {
+      flex-wrap: wrap;
+      position: relative;
+      > .textinput {
+        order: 1;
+        display: inline-block;
+      }
+      > .selecteditem {
+        font-size: 14px;
+        position: absolute;
+        top: 50%;
+        left: 10px;
+        transform: translateY(-50%);
+      }
+    }
+
+    > .actionbutton {
+      display: flex;
+      align-items: center;
+      cursor: pointer;
+      margin: 0 3px;
+      padding: 0 3px;
+
+      > svg {
+        margin: 0;
+      }
+    }
+  }
+}
+
+.multiSelect-component > .dropdown {
+  animation: 0.5s ease-in 0s 1 slideDown;
+  background-color: #fff;
+  border: $component-border-color;
+  @extend %component-menu-dropdown;
+  display: grid;
+  grid-template-rows: auto;
+  height: auto;
+  overflow-y: auto;
+  overflow-x: hidden;
+  position: absolute;
+  z-index: 9999;
+  > .filtercontainer {
+    position: relative;
+    display: grid;
+    grid-template-columns: 1fr 20px;
+    border: 1px solid $component-border-color;
+    margin: 4px;
+    > .filterinput {
+      border: 0;
+      font-size: 13px;
+      text-indent: 4px;
+      padding: 10px 5px;
+    }
+    > .filtericon {
+      position: absolute;
+      right: 5px;
+      top: 10px;
+    }
+  }
+  > .listcontainer > .item {
+    margin: 0;
+    padding: 6px 10px;
+    display: flex;
+    cursor: pointer;
+    justify-content: stretch;
+    border-bottom: solid 1px #e1e1e1;
+    &:last-child {
+      border-bottom: none;
+    }
+    &:hover {
+      background-color: $default-hover-color;
+    }
+    &.-selected {
+      background-color: $default-hover-color;
+    }
+    .menubutton {
+      background-color: transparent;
+      border: 0;
+      padding: 0;
+      margin: 0;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      width: 100%;
+      > .checkboxicon {
+        margin-right: 5px;
+      }
+      > .label {
+        flex-grow: 1;
+      }
+      > .menuicon {
+        margin-right: 5px;
+      }
+    }
+  }
+}

package/lib/assets/styles/panel.scss

@@ -6,6 +6,8 @@
   height: 100%;
   margin-bottom: 20px;
   border: solid 1px $component-border-color;
+  display: flex;
+  flex-direction: column;
   &.panel-shadow {
     box-shadow: 0 2px 5px 0 rgba(0,0,0,.16), 0 2px 10px 0 rgba(0,0,0,.12);
   }
@@ -47,7 +49,7 @@
     }
   }
   > .panel-content {
-    height: auto;
+    flex: 1;
     overflow: auto;
     padding: 15px;
   }

package/lib/assets/styles/periodpicker.scss

@@ -0,0 +1,65 @@
+@import "commons.scss";
+@import "effects.scss";
+.periodpicker-component {
+  height: auto;
+  position: relative;
+  display: flex;
+  border-radius: 2px;
+  border: 1px solid #dae1e8;
+
+  .inputwrapper {
+      border: none;
+  }
+
+  .separation_icon {
+    font-size: 16px;
+    flex: 0 0 10px;
+  }
+
+  .calendar-button {
+    flex: 0 0 20px;
+    padding: 4px;
+    border: none;
+  }
+ 
+  .input-base-component {
+    flex: 1;
+  }
+
+}
+
+.dropdown-period>.item {
+  margin: 0;
+  padding: 6px 10px;
+  display: flex;
+  cursor: pointer;
+  justify-content: stretch;
+  border-bottom: solid 1px #e1e1e1;
+
+  &:hover {
+    background-color: $default-hover-color;
+  }
+  &.-selected {
+    background-color: $default-hover-color;
+  }
+  &.-disabled {
+    @extend %component-menu-disabled;
+    &:hover {
+      background-color: transparent;
+    }
+  }
+}
+
+.dropdown-period {
+  width: 100%;
+  /* animation: 0.5s ease-in 0s 1 slideDown; */
+  background-color: #FFF;
+  border: #dae1e8;
+  display: grid;
+  grid-template-rows: auto;
+  height: auto;
+  overflow-y: auto;
+  overflow-x: hidden;
+  /* margin-top: 2px; */
+  z-index: 99999999999;
+}

package/lib/assets/styles/progress.scss

@@ -1,14 +1,15 @@
 @import "colors.scss";
 @import "commons.scss";
+
 .container-progress {
   display: flex;
   overflow: hidden;
-  height: 24px;
   margin-bottom: 20px;
   background-color: #f5f5f5; 
   border-radius: 4px;
   -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
   box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
+  position: relative;
 }
 
 .bar {
@@ -50,6 +51,12 @@
     -o-animation: progress-bar-stripes 2s linear infinite;
     animation: progress-bar-stripes 2s linear infinite;
   }
+  &.-indeterminate {
+    animation: slideWithPositionFromLeft infinite;
+    position: absolute;
+    left: -100%;
+    top: 0;
+  }
   >.progressbar-label {
     display: flex;
     align-items: center;

package/lib/assets/styles/radio.scss

@@ -89,3 +89,22 @@ $radio-button-ripple-size: 15px;
   -webkit-transform: scale(1);
   transform: scale(1);
 }
+
+.radio-button.-skeletonized {
+  > .radio-component:not(:checked) +.description,
+  > .radio-component:checked +.description {
+    cursor: initial;
+  }
+
+  > .radio-component:checked + .description:before,
+  > .radio-component:checked +.description:after,
+  > .radio-component:not(:checked) + .description:before,
+  > .radio-component:not(:checked) +.description:after {
+    @extend %skeleton-component;
+    border-color: transparent;
+  }
+
+  > .description > span {
+    @extend %skeleton-component;
+  }
+}

package/lib/assets/styles/select.scss

@@ -3,6 +3,7 @@
 .select-component {
   width: 100%;
   display: block;
+  position: relative;
   .selectwrapper {
     height: auto;
   }
@@ -47,7 +48,7 @@
   }
 }
 
-.select-component > .dropdown {
+.dropdown-component > .select-dropdown {
   animation: 0.5s ease-in 0s 1 slideDown;
   background-color: #FFF;
   border: $component-border-color;
@@ -57,17 +58,17 @@
   height: auto;
   overflow-y: auto;
   overflow-x: hidden;
-  position: absolute;
   margin-top: 2px;
-  z-index: 99999999999;
   > .filtercontainer {
     display: grid;
     grid-template-columns: 1fr 20px;
+    align-items: center;
     border: 1px solid $component-border-color;
     margin: 4px;
   }
   > .filtercontainer > .filterinput {
     border: 0;
+    width: 100%;
     font-size: 13px;
     text-indent: 4px;
     padding: 10px 5px;

package/lib/assets/styles/sidenav.scss

@@ -6,68 +6,95 @@ que utilizam. Em caso de mudança, ficar atento para os refatores.
 @import "commons.scss";
 @import "effects.scss";
 @import "colors.scss";
+
 .sidenav-component {
   height: 100%;
   width: 100%;
   overflow: hidden;
   background-color: transparent;
   border: 1px solid #eee;
-  > .expandedmenu,
-  > .collapsedmenu {
+
+  &.-blocked {
+    opacity: 0.4;
+    pointer-events: none;
+  }
+
+  >.expandedmenu,
+  >.collapsedmenu {
     height: auto;
     width: 100%;
-    > .item {
+
+    >.item {
       cursor: pointer;
       border-bottom: 1px solid #eee;
       width: 100%;
       transition: all 0.2s ease-in-out;
+
       &.-customsidenavitem {
         display: flex;
         align-items: center;
         justify-content: center;
         padding-left: 0px;
+
+        >.searchmenubutton {
+          width: 100%;
+          height: 100%;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
       }
+
       &.-customsidenavitem:hover {
         background-color: white;
-        cursor: text;
       }
+
       &.-disabled {
         @extend %component-disabled;
       }
     }
-    > .item:hover {
+
+    >.item:hover {
       background-color: #eee;
     }
-    > .item:hover > .menuicon,
-    > .item:hover .searchmenuicon,
-    > .item:hover > .menulink > .menuicon,
-    > .item:hover > .menulink .searchmenuicon {
+
+    >.item:hover>.menuicon,
+    >.item:hover .searchmenuicon,
+    >.item:hover>.menulink>.menuicon,
+    >.item:hover>.menulink .searchmenuicon {
       fill: rgb(114, 114, 114);
     }
-    > .item:hover > .title,
-    > .item:hover > .menulink > .title {
+
+    >.item:hover>.title,
+    >.item:hover>.menulink>.title {
       color: rgb(114, 114, 114);
     }
   }
-  > .expandedmenu.customscroll,
-  > .collapsedmenu.customscroll {
+
+  >.expandedmenu.customscroll,
+  >.collapsedmenu.customscroll {
     overflow-y: auto;
     height: 100%;
+
     &::-webkit-scrollbar {
       width: 5px;
     }
+
     &::-webkit-scrollbar-track {
       background: rgba(196, 222, 247, 0.5);
       border-radius: 10px;
     }
+
     &::-webkit-scrollbar-thumb {
       box-shadow: inset 0 0 5px #cecece;
       border-radius: 10px;
     }
+
     &::-webkit-scrollbar-thumb:hover {
       background: rgb(0, 195, 255);
     }
   }
+
   .openclosemenu {
     background: #f5f5f5;
     width: 100%;
@@ -79,14 +106,17 @@ que utilizam. Em caso de mudança, ficar atento para os refatores.
     align-content: center;
     text-align: center;
     transition: all 0.2s ease-in-out;
+
     &:hover {
       background: $border-container;
     }
+
     .icon-component {
       justify-self: center;
       width: 12px;
     }
   }
+
   &.closefromexpanded {
     background: transparent;
     margin-top: 2px;
@@ -96,7 +126,7 @@ que utilizam. Em caso de mudança, ficar atento para os refatores.
   }
 }
 
-.sidenav-component > .expandedmenu {
+.sidenav-component>.expandedmenu {
   animation: revealelement 0.3s;
   background-color: #fff;
   overflow: none;
@@ -104,27 +134,32 @@ que utilizam. Em caso de mudança, ficar atento para os refatores.
   -webkit-box-flex: 0;
   -ms-flex: 0 0 70px;
   flex: 0 0 70px;
-  > .item {
+
+  >.item {
     align-content: center;
     background-color: #fff;
     display: grid;
     grid-template-columns: 30px 1fr;
     height: 45px;
     padding-left: 5px;
+
     &.-withlink {
       grid-template-columns: 1fr;
     }
+
     .menulink {
       display: grid;
       grid-template-columns: 30px 1fr;
       align-items: center;
       text-decoration: none;
     }
-    > .menuicon {
+
+    >.menuicon {
       justify-self: center;
     }
-    > .title,
-    > .menulink > .title {
+
+    >.title,
+    >.menulink>.title {
       color: #666;
       align-self: center;
       justify-self: left;
@@ -133,62 +168,75 @@ que utilizam. Em caso de mudança, ficar atento para os refatores.
   }
 }
 
-.sidenav-component > .collapsedmenu {
+.sidenav-component>.collapsedmenu {
   display: flex;
   flex-wrap: wrap;
   align-content: flex-start;
-  > .item {
+
+  >.item {
     height: 50px;
     display: grid;
     grid-template-rows: 1fr;
     align-items: center;
-    align-content: center; 
+    align-content: center;
+
     &.-withlink {
       align-items: stretch;
     }
-    > .menulink {
+
+    >.menulink {
       display: grid;
       grid-template-rows: 1fr;
       align-items: center;
     }
-    > .menuicon,
-    > .menulink > .menuicon {
+
+    >.menuicon,
+    >.menulink>.menuicon {
       justify-self: center;
     }
   }
+
   &.-small {
     width: 55px;
-    > .item {
+
+    >.item {
       height: 40px;
     }
+
     .-iconcenter {
       width: 55px !important;
     }
   }
+
   &.-medium {
     width: 55px;
-    > .item {
+
+    >.item {
       height: 50px;
     }
+
     .-iconcenter {
       width: 65px !important;
     }
   }
+
   &.-large {
     width: 75px;
-    > .item {
+
+    >.item {
       height: 60px;
     }
+
     .-iconcenter {
       width: 75px !important;
     }
   }
 }
 
-.sidenav-component > .collapsedmenu > .item > .submenu-container,
-.sidenav-component > .expandedmenu > .item > .submenu-container {
+.sidenav-component>.collapsedmenu>.item>.submenu-container,
+.sidenav-component>.expandedmenu>.item>.submenu-container {
   animation: 0.5s ease-in 0s 1 slideLeft;
-  background-color: #eee ;
+  background-color: #eee;
   height: auto;
   width: auto;
   float: right;
@@ -198,7 +246,8 @@ que utilizam. Em caso de mudança, ficar atento para os refatores.
   -moz-box-shadow: 3px 1px 6px 0px rgba(50, 50, 50, 0.35);
   box-shadow: 3px 1px 6px 0px rgba(50, 50, 50, 0.35);
   z-index: 9999999;
-  > .title {
+
+  >.title {
     color: #777777;
     font-size: 24px;
     font-weight: bold;
@@ -206,28 +255,33 @@ que utilizam. Em caso de mudança, ficar atento para os refatores.
     height: 36px;
     line-height: 36px;
   }
+
   .submenu {
     color: #808080;
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     align-content: center;
     align-items: flex-start;
-    > .item {
+
+    >.item {
       display: grid;
       min-height: 40px;
       /* height: 40px; */
       align-content: center;
       display: grid;
       margin-left: 20px;
+
       &.-disabled {
         @extend %component-disabled;
         background-color: #eee !important;
       }
     }
-    > .item:hover {
+
+    >.item:hover {
       color: #333;
     }
-    > .item:before {
+
+    >.item:before {
       position: absolute;
       content: '';
       left: -15px;
@@ -236,24 +290,27 @@ que utilizam. Em caso de mudança, ficar atento para os refatores.
       border-bottom: 5px solid transparent;
       border-left: 5px solid #808080;
     }
-    > .item:nth-child(even) {
+
+    >.item:nth-child(even) {
       padding-left: 5px;
     }
-    > .item > .menulink {
+
+    >.item>.menulink {
       grid-template-columns: 1fr;
       text-decoration: none;
     }
   }
 }
-  
+
 .searchmenu {
-  background-color: #fff ;
+  background-color: #fff;
   border: solid 1px $component-border-color;
   border-radius: 4px;
   width: 300px;
   position: absolute;
   padding: 20px;
-  > .closebutton {
+
+  >.closebutton {
     cursor: pointer;
     float: right;
     margin: -21px -33px 15px 0px;
@@ -267,15 +324,19 @@ que utilizam. Em caso de mudança, ficar atento para os refatores.
   justify-content: center;
   height: 100%;
   width: 100%;
-  > .text, .subtext {
+
+  >.text,
+  .subtext {
     color: #a8a8a8;
     text-align: center;
   }
-  > .text {
+
+  >.text {
     font-size: 26px;
     margin-top: 20px;
   }
-  > .subtext {
+
+  >.subtext {
     font-size: 15px;
     margin-top: 5px;
   }

package/lib/assets/styles/skeleton.scss

@@ -0,0 +1,48 @@
+@import "commons.scss";
+@import "colors.scss";
+@import "effects.scss";
+
+.skeletoncontainer-component {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+
+  &.-row {
+    flex-direction: row;
+  }
+}
+
+.skeleton-component {
+  width: 100%;
+  height: 100%;
+  flex-grow: 1;
+  margin-bottom: 10px;
+  @extend %skeleton-component;
+
+  &.-round {
+    flex-grow: 0;
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    border-radius: 50%;
+
+    &.-mini {
+      width: 36px;
+      height: 36px;
+    }
+    &.-small {
+      width: 48px;
+      height: 48px;
+    }
+    &.-medium {
+      width: 64px;
+      height: 64px;
+    }
+    &.-large {
+      width: 96px;
+      height: 96px;
+    }
+  }
+}