linear-react-components-ui 1.1.27-rc.1 → 2.0.0-beta.1

package/lib/assets/styles/table.scss

@@ -1,185 +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;
-  }
-}
-
-div:has(table.table-component).horizontal-scroll-container {
-  height: auto;
-  width: 100%;
-  overflow-x: scroll;
-}

package/lib/assets/styles/tabs.scss

@@ -1,308 +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: 2px;
-    padding: 0;
-    width: auto;
-    min-width: 112px;
-    display: flex;
-    align-items: center;
-    border: 1px solid $font-color-second;
-    border-top: 2px solid $font-color-second;
-    border-bottom: 1px solid $component-border-color;
-    &.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;
-    }
-    &.witherrorcontent {
-      border: 1px solid $input-error-border-color;
-      border-top: 2px solid $input-error-border-color;
-      border-bottom: 1px solid transparent;
-      background-color: $input-error-bg-color;
-      &.selected {
-        border-top: 2px solid $component-selected-color;
-      }
-    }
-    &.selected>.closepanel,
-    &:hover>.closepanel {
-      visibility: visible;
-    }
-  }
-
-  .menu>.menuitem>.menubutton {
-    background: transparent;
-    border: 0;
-    width: 100%;
-    text-align: left;
-    justify-content: flex-start;
-    box-shadow: none !important;
-
-    .button-container {
-      overflow: hidden;
-      justify-content: flex-start;
-      > svg {
-        margin-right: 10px;
-      }
-      .button-content {
-        overflow: hidden;
-        white-space: nowrap;
-        text-overflow: ellipsis;
-      }
-    }
-  }
-
-  .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;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      &.show {
-        visibility: visible;
-        pointer-events: all;
-        opacity: 1;
-      }
-      &.has-selected {
-        border: 1px solid $component-selected-color !important;
-      }
-      > 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  {
-  .item-container > .item {
-    width: auto;
-    padding-left: 10px;
-  }
-  .menuitem {
-    cursor: pointer;
-    line-height: 20px;
-    margin-right: 1px;
-    display: flex;
-    align-items: center;
-    min-height: 50px;
-    gap: 8px;
-    > svg {
-      margin: 0;
-    }
-    > .menubutton {
-      padding: 0;
-    }  
-    >.closepanel {
-      @extend %tab-closepanel;
-      margin-left: auto;
-      margin-right: 0;
-    }
-    &: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/textfield.scss

@@ -1,186 +0,0 @@
-@import "colors.scss";
-@import "effects.scss";
-@import "commons.scss";
-@import "fonts.scss";
-
-/* Chrome, Safari, Edge, Opera */
-input::-webkit-outer-spin-button,
-input::-webkit-inner-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
-}
-
-/* Firefox */
-input[type="number"] {
-  appearance: textfield;
-}
-
-.text-field-root {
-  display: flex;
-  flex-direction: column;
-  text-align: start;
-  .root-label {
-    display: inline-flex;
-    padding: 0;
-    margin-bottom: 3px;
-    gap: 5px;
-    align-items: center;
-    flex-direction: row;
-    justify-content: flex-start;
-    &[data-state-skeletonize="true"] {
-      @extend %skeleton-component;
-      .label {
-        color: transparent;
-      }
-    }
-    .label {
-      font-size: 0.875rem;
-      line-height: normal;
-      color: $font-color-default;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      &[data-state-input-required="true"]::after {
-        content: "*";
-        color: $font-color-default;
-      }
-      &[data-state-uppercase="true"] {
-        text-transform: uppercase;
-      }
-      &[data-state-required-label="true"] {
-        color: $error-color;
-        font-weight: 600;
-        font-size: 0.875rem;
-        margin-left: 1px;
-      }
-    }
-    > button {
-      width: 20px;
-      height: auto;
-      margin: 0px !important;
-    }
-  }
-  .container {
-    width: 100%;
-    height: 31px;
-    margin: 0;
-    padding: 0;
-    overflow: hidden;
-    display: flex;
-    flex-direction: row;
-    gap: 0;
-    justify-content: space-between;
-    border-radius: 2px;
-    border: 1px solid $component-border-color;
-    background-color: $component-bg-default;
-    &:has(textarea) {
-      height: auto;
-    }
-    &[data-state-skeletonize="true"] {
-      @extend %skeleton-component;
-      color: transparent;
-      border: 1px solid transparent;
-      background-color: transparent;
-    }
-    &:has(input[data-state-error="true"]):has(input[data-state-skeletonize="false"]),
-    &:has(textarea[data-state-error="true"]):has(textarea[data-state-skeletonize="false"]) {
-      border-color: $input-error-border-color;
-      background-color: $input-error-bg-color;
-    }
-    &:has(input[data-state-read-only="true"]),
-    &:has(textarea[data-state-read-only="true"]) {
-      > input {
-        cursor: default;
-      }
-      background-color: $input-read-only-bg-color;
-    }
-    &:has(input:focus:not([data-state-read-only="true"])),
-    &:has(textarea:focus:not([data-state-read-only="true"])) {
-      box-shadow: 0 3px 0 $component-selected-color;
-      transition: box-shadow 250ms cubic-bezier(0.19, 0.62, 0.58, 0.98) 100ms;
-    }
-    &:has(input:disabled),
-    &:has(textarea:disabled) {
-      color: $font-color-disabled;
-      transition: color 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
-      background-color: $input-disabled-bg-color;
-    }
-    .input {
-      @extend %input-placeholder;
-      @extend %component-fonts;
-      flex: 1;
-      height: 100%;
-      width: 100%;
-      padding: 6px;
-      font-size: 0.875rem;
-      text-indent: 0.375rem;
-      line-height: 0.875rem;
-      border: none;
-      background-color: transparent;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      &[data-state-text-align="left"] {
-        text-align: left;
-      }
-      &[data-state-text-align="right"] {
-        text-align: right;
-      }
-      &[data-state-text-align="center"] {
-        text-align: center;
-      }
-      &[data-state-skeletonize="true"] {
-        @extend %input-placeholder-transparent;
-      }
-      &:disabled {
-        cursor: not-allowed;
-      }
-      &:is(textarea) {
-        text-indent: 0rem;
-        min-height: 30px;
-      }
-    }
-  }
-  .footer {
-    min-height: 0px;
-    margin-top: 5px;
-    overflow: hidden;
-    display: flex;
-    gap: 5px;
-    &[data-state-has-hint="true"][data-state-has-max-length="true"] {
-      justify-content: space-between;
-    }
-    &[data-state-has-hint="true"][data-state-has-max-length="false"] {
-      justify-content: start;
-    }
-    &[data-state-has-hint="false"][data-state-has-max-length="true"] {
-      justify-content: end;
-    }
-    &[data-state-has-hint="false"][data-state-has-max-length="false"] {
-      margin-top: 0px;
-    }
-    .max-length-counter {
-      text-align: right;
-      font-size: 0.75rem;
-      line-height: normal;
-    }
-    .hint {
-      margin: 0px;
-      span {
-        display: inline-block;
-        width: 100%;
-      }
-    }
-  }
-  .error {
-    width: 100%;
-    color: $error-color;
-    margin-top: 5px;
-    font-size: 0.8125rem;
-    line-height: 0.8125rem;
-    &[data-state-skeletonize="true"] {
-      @extend %skeleton-component;
-      color: transparent;
-    }
-  }
-}