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

package/lib/assets/styles/table.scss

@@ -1,179 +0,0 @@
-@import "colors.scss";
-@import "effects.scss";
-@import "commons.scss";
-
-.table-component {
-  width: 100%;
-  max-width: 100%;
-  background-color: transparent;
-  color: $font-color-soft;
-  font-size: 14px;
-  max-height: 20em;
-  position: relative;
-  > .headercontainer,
-  .bodycontainer {
-    width: 100%;
-    .innertable {
-      width: 100%;
-    }
-  }
-  > .bodycontainer {
-    overflow-y: auto;
-  }
-  > .bodycontainer > .innertable > .tbody,
-  > .tbody {
-    position: relative;
-    &.skeleton-transparency::before {
-      @extend %skeleton-transparency;
-    }
-    &.-disabled{
-      @extend %component-disabled;
-    }
-  }
-  > .headercontainer > .innertable > .theader > .trow,
-  > .bodycontainer > .innertable > .tbody > .trow,
-  > .theader > .trow,
-  > .tbody > .trow {
-    height: 45px;
-  }  
-  > .tbody > .trow-divider {
-    height: 45px;
-  }
-  > .headercontainer > .innertable > .theader > .trow > .headercolumn,
-  > .bodycontainer > .innertable > .tbody > .trow > .rowcolumn,
-  > .theader > .trow > .headercolumn,
-  > .tbody > .trow > .rowcolumn {
-    padding: 0 0.35rem;
-    vertical-align: middle;
-    border-bottom: 1px solid $component-border-color-soft;
-    line-height: 18px;
-    > .rowskeleton {
-      margin: 10px 0;
-    }
-    > .hidden,
-    > .rowhover {
-      display: none;
-      animation: revealelement 0.2s forwards ease-in-out;
-    }
-    &.-noborder {
-      border-bottom: 0;
-    }
-  }
-
-  .menu-column {
-    text-align: center; 
-    width: 96px;
-    svg {
-      margin: 0;
-    }
-    span {
-      width: 100%;
-    }
-  }
-
-  > .bodycontainer > .innertable > .tbody > .trow,
-  > .tbody > .trow {
-    &.-selected,
-    &[data-uitour="selected"] {
-      background-color: $component-bg-selected-color !important;
-      color: $font-selected-color;
-    }
-    .-divider {
-      color: $font-color-second;
-      font-family: 'Titillium Web';
-      font-weight: 700;
-      font-size: 16px;
-      text-align: center;
-      padding: .35rem;
-      &.-primary {
-        background-color: $primary-color;
-      }
-      &.-warning {
-        background-color: $warning-color;
-      }
-      &.-danger {
-        background-color: $danger-color;
-      }
-      &.-success {
-        background-color: $success-color;
-      }
-      &.-info {
-        background-color: $info-color;
-      }
-    }
-    
-    &:hover {
-      > .rowcolumn > .rowhover {
-        display: table;
-      }
-    }
-  }
-  &.-condensed {
-    > .headercontainer > .innertable > .theader > .trow,
-    > .bodycontainer > .innertable > .tbody > .trow,
-    > .theader > .trow,
-    > .tbody > .trow {
-      height: 35px;
-    }
-  }
-  &.-bordered {
-    border: 1px solid $border-container;
-    > .bodycontainer > .innertable > .tbody > .trow:last-child > .rowcolumn,
-    > .tbody > .trow:last-child > .rowcolumn {
-      border-bottom: 0;
-    }
-  }
-  &.-striped {
-    > .bodycontainer > .innertable > .tbody > .trow:nth-of-type(odd),
-    > .tbody > .trow:nth-of-type(odd) {
-      background-color: $table-striped-bg-color;
-    }
-  }
-  &.-hovered {
-    > .bodycontainer > .innertable > .tbody > .trow:hover,
-    > .tbody > .trow:hover {
-      background-color: $component-item-hover;
-    }
-  } 
-  &.-headercolor {
-    > .headercontainer {
-      background: $header-container-bg;
-    }
-    > .headercontainer > .innertable > .theader,
-    > .theader {
-      background: $header-container-bg;
-    }
-  }
-}
-
-.table-component.-scrollable {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-}
-
-.table-component.-vertical {
-  > .tbody > .trow > .headercolumn {
-    background-color: $table-vertical-header-bg-color;
-    vertical-align: middle;
-    padding-left: 5px;
-    border-bottom: 1px solid $component-border-color-soft;
-  }
-  > .tbody > .trow > .rowcolumn {
-    background-color: $table-vertical-row-bg-color;
-    border-bottom: 1px solid $component-border-color-soft;
-    border-style: dashed;
-  }
-  > .tbody > .trow {
-    &.-selected > .rowcolumn {
-      background-color: $component-bg-selected-color !important;
-      color: $font-selected-color;
-    }
-  }
-}
-
-.table-component.-skeletonized {
-  > .bodycontainer {
-    overflow: hidden;
-  }
-}

package/lib/assets/styles/tabs.scss

@@ -1,266 +0,0 @@
-@import "colors.scss";
-
-$dropdown-width: 38px;
-
-%tab-closepanel {
-  background-color: transparent;
-  border: 0;
-  height: 20px;
-  margin-right: 5px;
-  padding: 0;
-  text-shadow: 0 1px 0 $font-color-second;
-  width: 20px;
-  visibility: hidden;
-  transition: all 0.2s ease-in-out;
-  border-radius: 4px;
-  &:after {
-    content: "×";
-    font-size: 20px;
-    text-shadow: none;
-    color: $font-color-soft;
-    transition: all 0.2s ease-in-out;
-  }
-  &:hover {
-    background-color: $color-light-dark;
-    &:after {
-      color: $font-color-second;
-    }
-  }
-}
-
-%tab-component-menus {
-  -webkit-box-shadow: 0px -1px 0px $component-border-color inset;
-  -moz-box-shadow: 0px -1px 0px $component-border-color inset;
-  box-shadow: 0px -1px 0px $component-border-color inset;
-  .menu {
-    display: flex;
-    flex: 1;
-    overflow: hidden;
-
-    &.-firsttabident>.menuitem:first-child {
-      margin-left: 15px;
-    }
-  }
-  .menu>.menuitem {
-    border-bottom: 0;
-    border-radius: 5px 5px 0px 0px;
-    -moz-border-radius: 5px 5px 0px 0px;
-    -webkit-border-radius: 5px 5px 0px 0px;
-    text-shadow: 0 1px $font-color-second;
-    cursor: pointer;
-    line-height: 20px;
-    margin-right: 1px;
-    padding: 0;
-    width: auto;
-    min-width: 100px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    &.selected {
-      border: 1px solid $component-border-color;
-      background: $font-color-second;
-      border-bottom: 1px solid $font-color-second;
-      border-top: 2px solid $component-selected-color;
-      box-shadow: 0;
-      font-weight: bold;
-    }
-    &.selected>.closepanel,
-    &:hover>.closepanel {
-      visibility: visible;
-    }
-  }
-
-  .menu>.menuitem>.menubutton {
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    background: transparent;
-    border: 0;
-    width: 100%;
-    text-align: left
-  }
-
-  .menu>.menuitem>.closepanel {
-    @extend %tab-closepanel;
-  }
-
-  .menubar {
-    width: auto;
-    border-bottom: 1px solid #dae1e8;
-  }
-}
-
-/*
-  Tab default configuration with menu on top, left
-*/
-
-.tabs-component {
-  display: grid;
-  grid-template-rows: auto 1fr;
-  width: 100%;
-  height: 100%;
-  overflow: auto;
-  @extend %tab-component-menus;
-  >.menucontainer {
-    width: 100%;
-    display: flex;
-    min-height: 35px;
-    overflow: hidden;
-    @extend %tab-component-menus;
-    >.dropdownbutton {
-      border-bottom: 1px solid $component-border-color;
-      padding: 0;
-      width: $dropdown-width;
-      visibility: hidden;
-      pointer-events: none;
-      opacity: 0;
-      &.show {
-        visibility: visible;
-        pointer-events: all;
-        opacity: 1;
-      }
-      > svg {
-        margin: 0;
-        float: none;
-      }
-    }
-    .toolbar-component {
-      width: auto;
-    }
-  }
-
-  >.panel {
-    background-color: $font-color-second;
-    border: 1px solid $component-border-color;
-    border-top: 0;
-    padding: 10px;
-    overflow: auto;
-  }
-
-  .hidepanel {
-    display: none;
-  }
-}
-
-/* 
-  Menu align on panels's left
-*/
-.tabs-component.menu-left {
-  grid-template-columns: auto 1fr;
-  grid-template-rows: none;
-
-  >.menucontainer {
-    >.menu {
-      box-shadow: -1px 0px 0px 0px $component-border-color inset;
-      flex-direction: column;
-      justify-content: center;
-    }
-
-    >.menu>.menuitem {
-      border-radius: 5px 0px 0px 5px;
-      -moz-border-radius: 5px 0px 0px 5px;
-      -webkit-border-radius: 5px 0px 0px 5px;
-
-      &.selected {
-        border: 1px solid $component-border-color;
-        border-right: 1px solid $font-color-second;
-        border-left: 2px solid $component-selected-color;
-        width: 100%;
-      }
-    }
-
-    >.menu>.menuitem>.closepanel {
-      float: left;
-    }
-  }
-
-  >.panel {
-    border-top: 1px solid $component-border-color;
-    border-left: 0;
-  }
-}
-
-/* 
-  Menu align on panels's bottom
-*/
-.tabs-component.menu-bottom {
-  grid-template-rows: 1fr auto;
-
-  .menucontainer {
-    >.menu {
-      box-shadow: 0 1px 1px 0px $component-border-color inset;
-    }
-
-    >.menu>.menuitem {
-      border-radius: 0px 0px 5px 5px;
-      -moz-border-radius: 0px 0px 5px 5px;
-      -webkit-border-radius: 0px 0px 5px 5px;
-
-      &.selected {
-        border: 1px solid $component-border-color;
-        border-top: 1px solid $font-color-second;
-        border-bottom: 2px solid $component-selected-color;
-        height: 100%;
-      }
-    }
-  }
-
-  >.panel {
-    border-top: 1px solid $component-border-color;
-    border-bottom: 0;
-  }
-}
-
-/* 
-  Menu align on panels's right
-*/
-.tabs-component.menu-right {
-  grid-template-columns: 1fr auto;
-  grid-template-rows: none;
-
-  .menucontainer {
-    >.menu {
-      box-shadow: 2px 0 0px -1px $component-border-color inset;
-      flex-direction: column;
-      justify-content: center;
-    }
-
-    >.menu>.menuitem {
-      border-radius: 0px 5px 5px 0px;
-      -moz-border-radius: 0px 5px 5px 0px;
-      -webkit-border-radius: 0px 5px 5px 0px;
-
-      &.selected {
-        border: 1px solid $component-border-color;
-        border-left: 1px solid $font-color-second;
-        border-right: 2px solid $component-selected-color;
-        width: 100%;
-      }
-    }
-  }
-
-  >.panel {
-    border-top: 1px solid $component-border-color;
-    border-right: 0;
-  }
-}
-
-/*
-  Dropdown hide tabs
-*/
-.dropdown-hide-tabs .menuitem {
-  cursor: pointer;
-  line-height: 20px;
-  margin-right: 1px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  min-height: 50px;
-
-  >.closepanel {
-    @extend %tab-closepanel;
-  }
-
-  &:hover>.closepanel {
-    visibility: visible;
-  }
-}

package/lib/assets/styles/textContent.scss

@@ -1,9 +0,0 @@
-@import "colors.scss";
-@import "fonts.scss";
-
-.text-content-component {
-  @extend %component-fonts;
-  &[data-textcontent="strong"] {
-    font-weight: bold;
-  }
-}

package/lib/assets/styles/toolbar.scss

@@ -1,74 +0,0 @@
-@import "colors.scss";
-.toolbar-component {
-  float: left;
-  width: 100%;
-  > .buttonbar {
-    margin-right: 5px;
-    float: left
-  }
-  > .labelbar {
-    margin-right: 5px;
-    float: left
-  }
-  .separator {
-    background-color: #d7d7da;
-    display: inline-block;
-    width: 1px;
-    margin: 0 5px;
-    height: 100%;
-    border-left: 1px solid #e2e8ea;
-    border-right: 1px solid #ffffff;
-    border-radius: 50%;
-  }
-  .toolbar-group {
-    display: flex;
-    align-content: center;
-    float: right;
-    height: 100%;
-    > .input-base-component:has(+.buttonbar) .inputwrapper {
-      border-right-width: 0;
-    }
-    > .buttonbar {
-      border-radius: 0;
-      border-width: 1px;
-      border: 1px solid #efe9e9;
-      border-right-width: 0px;
-      margin-right: 0;
-    }
-    > .buttonbar:first-child {
-      border-top-left-radius: 3px;
-      border-bottom-left-radius: 3px;
-    }
-    > .buttonbar:last-child {
-      border-top-right-radius: 3px;
-      border-bottom-right-radius: 3px;
-      border-right-width: 1px;
-    }
-    > .labelbar {
-      border-radius: 0;
-      border-width: 1px;
-      border-right-width: 0px;
-      margin-right: 0;
-    }
-    > .labelbar:first-child {
-      border-top-left-radius: 3px;
-      border-bottom-left-radius: 3px;
-    }
-    > .labelbar:last-child {
-      border-top-right-radius: 3px;
-      border-bottom-right-radius: 3px;
-      border-right-width: 1px;
-    }
-  }
-}
-
-.toolbar-component.small-bar {
-  height: 34px;
-  padding: 3px;
-}
-
-.toolbar-component.large-bar {
-  height: 56px;
-  padding: 3px;
-}
-

package/lib/assets/styles/tooltip.scss

@@ -1,95 +0,0 @@
-@import "colors.scss";
-
-.tooltip-component {
-  font-family: 'Roboto', sans-serif;
-  position: absolute;
-  padding: 8px;
-  background: rgba(black, 0.85);
-  border-radius: 5px;
-  color: white;
-  box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.3);
-  text-align: center;
-  font-size: 13px;
-  z-index: 999999;
-  pointer-events: none;
-  max-width: 300px;
-  word-break: break-word;
-  &.left::after {
-    content: " ";
-    position: absolute;
-    top: 50%;
-    left: 100%;
-    margin-top: -5px;
-    border-width: 5px;
-    border-style: solid;
-    border-color: transparent transparent transparent rgba(black, 0.85);
-  }
-  &.right::after {
-    content: " ";
-    position: absolute;
-    top: 50%;
-    right: 100%;
-    margin-top: -5px;
-    border-width: 5px;
-    border-style: solid;
-    border-color: transparent rgba(black, 0.85) transparent transparent;
-  }
-  &.top::after {
-    content: " ";
-    position: absolute;
-    top: 100%;
-    left: 50%;
-    margin-left: -5px;
-    border-width: 5px;
-    border-style: solid;
-    border-color: rgba(black, 0.85) transparent transparent transparent;
-  }
-  &.bottom::after {
-    content: " ";
-    position: absolute;
-    bottom: 100%;
-    left: 50%;
-    margin-left: -5px;
-    border-width: 5px;
-    border-style: solid;
-    border-color: transparent transparent rgba(black, 0.85) transparent;
-  }
-  &.tooltip-error {
-    background: $danger-hover-color;
-    color: $default-color;
-    z-index: 99999;
-    &::before {
-      content: '';
-      position: absolute;
-      left: 0;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      height: 100%;
-      width: 100%;
-      background: inherit;
-      border-radius: inherit;
-      z-index: -1;
-      opacity: 0.7;
-      animation: tooltip-component 2s ease-out infinite;
-    }
-    @keyframes tooltip-component {
-      100% {
-        transform: scale(1.05, 1.25);
-        opacity: 0;
-      }
-    }
-    &.left::after {
-      border-left-color: $danger-hover-color;
-    }
-    &.right::after {
-      border-right-color: $danger-hover-color;
-    }
-    &.top::after {
-      border-top-color: $danger-hover-color;
-    }
-    &.bottom::after {
-      border-bottom-color: $danger-hover-color;
-    }
-  }
-}

package/lib/assets/styles/treetable.scss

@@ -1,100 +0,0 @@
-@import "commons.scss";
-@import "colors.scss";
-@import "effects.scss";
-
-.treetable-container {
-  width: 100%;
-  height: auto;
-  padding: 0px;
-  margin: 12px 0;
-}
-
-table {
-  tbody {
-    .tree-row-element {
-      animation: revealelement 0.3s forwards ease-in-out;
-    }
-
-    .open-close-children {
-      outline: 0;
-      border: 0;
-      display: flex;
-      align-items: center;
-      width: auto;
-      height: auto;
-      background-color: transparent;
-      border-radius: 4px;
-      font-size: 0px;
-      padding: 4px 4px 4px 0;
-      cursor: pointer;
-    }
-
-    .value-button {
-      margin-left: 6px;
-
-      &:hover {
-        text-decoration: underline;
-        cursor: pointer;
-      }
-    }
-
-    tr td.td-loading-childrens {
-      border-bottom: 1px solid $component-border-color-soft;
-    }
-
-    .tr-loading-childrens {
-      animation: revealelement 0.3s forwards ease-in-out;
-    }
-
-    .td-loading-childrens-container {
-      width: 100%;
-      height: 35px;
-      display: flex;
-      align-items: center;
-      flex-direction: row;
-      justify-content: center;
-    }
-
-    .column-more-childrens {
-      width: auto;
-      max-height: 24px;
-      display: flex;
-      align-items: center;
-    }
-
-    .line-path-decoration::before {
-      content: "";
-      height: 34px;
-      position: relative;
-      right: 0.5rem;
-      border-left: 2px solid $component-border-color-soft;
-    }
-
-    span.children-row {
-      margin-left: 8px;
-    }
-
-    div.column-container {
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-    }
-
-    span.container-toolbar-buttons {
-      width: 100%;
-      height: auto;
-      margin-left: 4px;
-      margin-right: 16px;
-    }
-
-    .row-toolbar {
-      width: 100%;
-      height: auto;
-      margin-left: 4px;
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      justify-content: space-between;
-    }
-  }
-}