linear-react-components-ui 1.1.20-beta.33 → 1.1.20-beta.34

package/lib/assets/styles/sidenav.scss

@@ -0,0 +1,408 @@
+/**
+Atenção... mudar nome das classes abaixo poderá quebrar as aplicações
+que utilizam. Em caso de mudança, ficar atento para os refatores.
+*/
+
+@import "commons.scss";
+@import "effects.scss";
+@import "colors.scss";
+
+.sidenav-component {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+  background-color: transparent;
+  border: 1px solid #eee;
+
+  &.-expanded {
+    display: block;
+    flex-direction: row;
+  }
+
+  &.-blocked {
+    opacity: 0.4;
+    pointer-events: none;
+  }
+
+  > .expandedmenu,
+  > .collapsedmenu {
+    height: auto;
+    width: 100%;
+
+    > .help-item {
+      border-top: 1px solid #eee;
+    }
+
+    > .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;
+        }
+
+        > .helpmenubutton {
+          width: 100%;
+          height: 100%;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+      }
+
+      &.-customsidenavitem:hover {
+        background-color: white;
+      }
+
+      &.-disabled {
+        @extend %component-disabled;
+      }
+    }
+
+    > .item:hover {
+      background-color: #eee;
+    }
+
+    > .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 {
+      color: rgb(114, 114, 114);
+    }
+  }
+
+  > .expandedmenu.customscroll,
+  > .collapsedmenu.customscroll {
+    overflow-y: auto;
+
+    &::-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%;
+    height: 25px;
+    cursor: pointer;
+    display: grid;
+    grid-template-rows: 1fr;
+    align-items: center;
+    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;
+    position: fixed;
+    margin-left: 0px;
+    border: 0px solid #c6e4f8;
+  }
+}
+
+.sidenav-component > .expandedmenu {
+  animation: revealelement 0.3s;
+  -moz-animation: revealelement 0.3s;
+  background-color: #fff;
+  overflow: none;
+  width: 100%;
+  -moz-box-flex: 0;
+  -webkit-box-flex: 0;
+  -ms-flex: 0 0 70px;
+  flex: 0 0 70px;
+
+  > .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 {
+      justify-self: center;
+    }
+
+    > .title,
+    > .menulink > .title {
+      color: #666;
+      align-self: center;
+      justify-self: left;
+      text-indent: 5px;
+    }
+  }
+}
+
+.sidenav-component > .collapsedmenu {
+  display: flex;
+  flex-wrap: wrap;
+  align-content: flex-start;
+
+  > .item {
+    height: 50px;
+    display: grid;
+    grid-template-rows: 1fr;
+    align-items: center;
+    align-content: center;
+
+    &.-withlink {
+      align-items: stretch;
+    }
+
+    > .menulink {
+      display: grid;
+      grid-template-rows: 1fr;
+      align-items: center;
+    }
+
+    > .menuicon,
+    > .menulink > .menuicon {
+      justify-self: center;
+    }
+  }
+
+  &.-small {
+    width: 55px;
+
+    > .item {
+      height: 40px;
+    }
+
+    .-iconcenter {
+      width: 55px !important;
+    }
+  }
+
+  &.-medium {
+    width: 55px;
+
+    > .item {
+      height: 50px;
+    }
+
+    .-iconcenter {
+      width: 65px !important;
+    }
+  }
+
+  &.-large {
+    width: 75px;
+
+    > .item {
+      height: 60px;
+    }
+
+    .-iconcenter {
+      width: 75px !important;
+    }
+  }
+}
+
+.sidenav-component > .collapsedmenu > .item > .submenu-container,
+.sidenav-component > .expandedmenu > .item > .submenu-container {
+  animation: 0.5s ease-in 0s 1 slideLeft;
+  -moz-animation: 0.5s ease-in 0s 1 slideLeft;
+  background-color: #eee;
+  height: auto;
+  width: auto;
+  float: right;
+  padding: 10px 20px 20px;
+  position: absolute;
+  -webkit-box-shadow: 3px 1px 6px 0px rgba(50, 50, 50, 0.35);
+  -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 {
+    color: #777777;
+    font-size: 24px;
+    font-weight: bold;
+    width: 100;
+    height: 36px;
+    line-height: 36px;
+  }
+
+  .submenu {
+    margin: 4px 0;
+    overflow-y: auto;
+    overflow-x: clip;
+    color: #808080;
+    display: grid;
+    column-gap: 16px;
+    grid-template-columns: repeat(2, 1fr);
+    align-items: flex-start;
+
+    > .item {
+      display: grid;
+      min-height: 40px;
+      align-content: center;
+      display: grid;
+      margin-left: 20px;
+
+      &.-disabled {
+        @extend %component-disabled;
+        background-color: #eee !important;
+      }
+    }
+
+    > .item:hover {
+      color: #333;
+    }
+
+    > .item:before {
+      position: absolute;
+      content: "";
+      left: -15px;
+      top: 15px;
+      border-top: 5px solid transparent;
+      border-bottom: 5px solid transparent;
+      border-left: 5px solid #808080;
+    }
+
+    > .item:nth-child(even) {
+      padding-left: 5px;
+    }
+
+    > .item > .menulink {
+      grid-template-columns: 1fr;
+      text-decoration: none;
+    }
+
+    &::-webkit-scrollbar {
+      width: 5px;
+    }
+
+    &::-webkit-scrollbar-track {
+      box-shadow: inset 0 0 5px grey;
+      border-radius: 10px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background: rgb(151, 142, 142);
+      border-radius: 10px;
+    }
+  }
+}
+
+.searchmenu {
+  background-color: #fff;
+  border: solid 1px $component-border-color;
+  border-radius: 4px;
+  width: 300px;
+  position: absolute;
+  padding: 20px;
+
+  > .closebutton {
+    cursor: pointer;
+    float: right;
+    margin: -21px -33px 15px 0px;
+  }
+}
+
+.popup-help {
+  border: 1px solid $list-container-border;
+
+  > .list-component {
+    box-shadow: none;
+    overflow: hidden;
+    border-radius: 0px;
+
+    > .helpheader {
+      background-color: #bdbdbda6;
+
+      > .title {
+        line-height: 35px;
+      }
+    }
+
+    > .item-container > .item > .text {
+      font-size: 12px;
+    }
+  }
+
+  .infomartion > .help-information {
+    color: rgba(0, 0, 0, 0.54);
+    font-size: 12px;
+    line-height: 16px;
+  }
+}
+
+.nodata-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  width: 100%;
+
+  > .text,
+  .subtext {
+    color: #a8a8a8;
+    text-align: center;
+  }
+
+  > .text {
+    font-size: 26px;
+    margin-top: 20px;
+  }
+
+  > .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;
+    }
+  }
+}

package/lib/assets/styles/spinner.scss

@@ -0,0 +1,34 @@
+%font-style {
+  color: #4e4c4c;
+  font-weight: 500;
+  font-size: 14px;
+}
+
+.spinner-component {
+  width: 100% !important;
+  height: 100% !important;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  &.-heightauto {
+    height: auto !important;
+  }
+}
+
+.-left {
+  display: flex;
+  justify-content: flex-start;
+  @extend %font-style;
+} 
+
+.-center {
+  display: flex;
+  justify-content: center;
+  @extend %font-style;
+}
+
+.-right {
+  display: flex;
+  justify-content: flex-end;
+  @extend %font-style;
+}

package/lib/assets/styles/split.scss

@@ -0,0 +1,80 @@
+.split-component {
+  font-family: 'Roboto', sans-serif;
+  font-size: 14px;
+  line-height: 1.6em;
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  p {
+    font-size: 14px;
+  }
+  & .layout-changing {
+    cursor: col-resize;
+    > .layout-splitter {
+      background-color: rgb(221, 221, 221);
+    }
+  }
+  & .layout-pane {
+    position: relative;
+    flex: 0 0 auto;
+    overflow: auto;
+    > .layoutpanecontent {
+      padding: 2px;
+    }
+  }
+  & .layout-pane.layout-pane-primary {
+    flex: 1 1 auto;
+  }
+  > .layout-splitter {
+    flex: 0 0 auto;
+    width: 5px;
+    height: 100%;
+    cursor: col-resize;
+    background: rgb(221, 221, 221);
+    > .toggler-horizontal {
+      position: relative;
+      display: block;
+      padding: 0px;
+      margin: 0px;
+      overflow: hidden;
+      text-align: center;
+      font-size: 1px;
+      z-index: 1;
+      background: #aaaaaa;
+      visibility: visible;
+      height: 50px;
+      width: 7px;
+      top: 45%;
+      left: -1px;
+      cursor: pointer;
+    }
+
+    &.layout-splitter:hover {
+      background-color: #bbb;
+    }
+  }
+  & .layout-changing > .layout-splitter {
+    background-color: #aaa;
+  }
+  &.splitter-layout-vertical {
+    flex-direction: column;
+    > .layout-splitter {
+      width: 100%;
+      height: 5px;
+      cursor: row-resize;
+      > .toggler-vertical {
+        border-radius: 2px;
+        align-items: center;
+        height: 7px;
+        width: 54px;
+        align-self: center;
+        margin-left: 47%;
+        background: #aaaaaa;
+        margin-top: -1px;
+        cursor: pointer;
+      }
+    }
+  }
+}