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

package/lib/assets/styles/select.scss

@@ -1,159 +0,0 @@
-@import "commons.scss";
-@import "effects.scss";
-
-.select-component {
-  width: 100%;
-  display: block;
-  position: relative;
-
-  .selectwrapper {
-    height: auto;
-  }
-
-  .selectwrapper .actionbuttonsselect {
-    display: flex;
-    flex-direction: row;
-
-    .actionbutton {
-      all: unset;
-      cursor: pointer;
-      display: flex;
-      align-items: center;
-      padding: 0 4px;
-    }
-  }
-
-  .selectwrapper > .multiselect {
-    flex-wrap: wrap;
-
-    > .textinput {
-      order: 1;
-      display: inline-block;
-    }
-
-    > .selecteditem {
-      background-color: #f2f9fc;
-      border: 1px solid #c9e6f2;
-      border-radius: 3px;
-      color: #08c;
-      display: flex;
-      justify-content: space-between;
-      height: auto;
-      line-height: 14px;
-      font-size: 12px;
-      float: left;
-      margin: 2px;
-      padding: 0px 8px 0px 5px;
-      &.-disabled {
-        @extend %component-disabled;
-        opacity: 0.7;
-        border: solid 1px $font-color-disabled;
-      }
-      .close {
-        all: unset;
-      }
-    }
-  }
-
-  .selectwrapper > .multiselect > .selecteditem > .close {
-    cursor: pointer;
-
-    &:after {
-      content: "×";
-      font-size: 16px;
-      font-weight: bold;
-      margin-left: 10px;
-    }
-  }
-}
-
-.dropdown-component > .select-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;
-  margin-top: 2px;
-
-  > .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;
-  }
-
-  > .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;
-    }
-
-    &.-disabled {
-      @extend %component-menu-disabled;
-
-      &:hover {
-        background-color: transparent;
-      }
-    }
-
-    &.-striped:nth-child(even) {
-      background-color: #eee;
-    }
-
-    .menubutton {
-      all: unset;
-      background-color: transparent;
-      border: 0;
-      padding: 0;
-      margin: 0;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      width: 100%;
-    }
-
-    .menubutton {
-      > .label {
-        flex-grow: 1;
-      }
-
-      > .menuicon {
-        margin-right: 5px;
-      }
-    }
-  }
-
-  > .notfound {
-    text-indent: 10px;
-    color: graytext;
-    font-style: italic;
-    font-size: 13px;
-  }
-}

package/lib/assets/styles/selectfield.scss

@@ -1,411 +0,0 @@
-@import "commons.scss";
-@import "colors.scss";
-@import "effects.scss";
-@import "fonts.scss";
-
-/* Chrome, Safari, Edge, Opera */
-input::-webkit-outer-spin-button,
-input::-webkit-inner-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
-}
-
-.select-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 {
-      @extend %input-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;
-      }
-      &[aria-disabled=true], &[aria-readonly=true] {
-        pointer-events: none;
-      }
-    }
-    >button {
-      width: 20px;
-      height: auto;
-      margin: 0px !important;
-    }
-  }
-  .container {
-    position: relative;
-    width: 100%;
-    min-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;
-    &[data-state-skeletonize=true] {
-      @extend %skeleton-component;
-      color: transparent;
-      border: 1px solid transparent;
-      background-color: transparent;
-    }
-    &:has(input[data-state-undigitable=true], input[data-state-multiple-with-checkboxes=true]) {
-      caret-color: transparent;
-      background-color: #f9fcf7;
-      background: -moz-linear-gradient(top, #f6f6f6 0%, #fafafa 100%);
-      background: -webkit-linear-gradient(top, #f6f6f6 0%,#fafafa 100%);
-      background: linear-gradient(to bottom, #f6f6f6 0%,#fafafa 100%);
-    }
-    &:has(input[data-state-read-only=true]) {
-      cursor: default;
-      pointer-events: none;
-      background: $input-read-only-bg-color;
-    }
-    &:has(input[data-state-error=true]):has(input[data-state-skeletonize=false]) {
-      border-color: $input-error-border-color;
-      background: $input-error-bg-color;
-    }
-    &:has(input:focus) {
-      box-shadow: 0 3px 0 $component-selected-color;
-      transition: box-shadow 250ms cubic-bezier(.19, .62, .58, .98) 100ms;
-    }
-    &:has(input:disabled) {
-      input {
-        color: $font-color-disabled;
-      }
-      transition: color 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
-      background-color: $input-disabled-bg-color;
-      cursor: not-allowed;
-    }
-    .input-root {
-      flex: 1;
-      display: flex;
-      flex-direction: column-reverse;
-      justify-content: start;
-      gap: 1px;
-      .input {
-        @extend %input-placeholder;
-        @extend %component-fonts;
-        flex: 1;
-        width: 100%;
-        height: 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;
-        }
-      }
-      .selections {
-        visibility: hidden;
-        display: none;
-        &[data-state-multiple-selections=true] {
-          visibility: initial;
-          display: flex;
-          flex-direction: row;
-          justify-content: start;
-          flex-wrap: wrap;
-          gap: 5px;
-          text-indent: 0.375rem;
-          padding: 4px 6px;
-          .selected {
-            height: 18px;
-            padding: 0px 5px;
-            background-color: $selectfield-bg-selected;
-            border: 1px solid $selectfield-border-color;
-            border-radius: 3px;
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            gap: 5px;
-            .label {
-              pointer-events: none;
-              user-select: text;
-              color: $primary-actived-color;
-              font-size: 0.75rem;
-              line-height: 14px;
-            }
-            .remove {
-              all: unset;
-              cursor: pointer;
-              display: flex;
-              align-items: center;
-              justify-content: center;
-              svg {
-                width: 12px;
-                height: 12px;
-                pointer-events: none;
-                fill: $primary-actived-color;
-              }
-              &:disabled {
-                cursor: not-allowed;
-                svg {
-                  fill: $font-color-disabled;
-                }
-              }
-              &[data-state-read-only=true] {
-                svg {
-                  visibility: hidden;
-                  display: none;
-                }
-              }
-            }
-            &[data-state-disabled=true] {
-              @extend %component-disabled;
-              opacity: 0.7;
-              border: solid 1px $font-color-disabled;
-              .label {
-                color: $font-color-disabled;
-              }
-            }
-            &[data-state-read-only=true] {
-              background-color: $input-read-only-bg-color;
-              border-color: $component-border-color;
-              .label {
-                color: $placeholder-color;
-              }
-            }
-          }
-        }
-      }
-    }
-    .triggers {
-      display: inline-flex;
-      padding: 0;
-      margin: 0;
-      align-items: center;
-      flex-direction: row;
-      justify-content: flex-end;
-      &[data-state-skeletonize=true] {
-        @extend %skeleton-component;
-        display: none;
-        visibility: hidden;
-      }
-      button {
-        position: relative;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        width: 22px;
-        height: 100%;
-        padding: 0;
-        margin: 0px 4px;
-        outline: none;
-        border: none;
-        vertical-align: bottom;
-        color: inherit;
-        background-color: inherit;
-        cursor: pointer;
-        &.open-listbox[aria-expanded="true"] svg {
-          transform: rotate(180deg) translate(0, 0px);
-          transition: all 250ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
-        }
-        &.open-listbox[aria-expanded="false"] svg {
-          transform: rotate(0deg) translate(0, 0px);
-          transition: all 250ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
-        }
-        &.open-listbox {
-          svg {
-            pointer-events: none;
-            width: 80%;
-            height: 80%;
-          }
-        }
-        &.clear[data-state-visible=true] {
-          display: inherit;
-          visibility: initial;
-          svg {
-            pointer-events: none;
-            width: 70%;
-            height: 70%;
-          }
-        }
-        &.clear[data-state-visible=false] {
-          display: none;
-          visibility: hidden;
-        }
-        &:disabled {
-          cursor: not-allowed;
-        }
-      }
-      &[data-state-read-only=true], 
-      &[data-state-disabled=true] {
-        button {
-          opacity: 0.5;
-        }
-      }
-      &[data-state-read-only=true] {
-        display: none;
-        visibility: hidden;
-      }
-    }
-  }
-  .hint {
-    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;
-    }
-  }
-}
-
-.select-field-listbox[aria-expanded=true] {
-  z-index: auto;
-  display: flex;
-  flex-direction: column;
-  margin: 5px 0px;
-  border: 1px solid $component-border-color;
-  animation: 0.3s ease-in 0s 1 slideDown, revealelement 0.3s forwards ease-in-out;
-  box-shadow: -6px 6px 50px -12px rgba(51, 51, 51, 0.4);
-}
-
-.select-field-listbox {
-  display: none;
-  ul[role="listbox"] {
-    @extend %component-fonts;
-    display: block;
-    width: 100%;
-    height: auto;
-    margin: 0;
-    padding: 0;
-    font-size: 87.5%;
-    list-style: none;
-    background-color: $component-bg-default;
-    overflow: scroll;
-    overflow-x: hidden;
-  }
-  ul[role="listbox"] li[role="option"] {
-    margin: 0;
-    padding: 6px 10px;
-    display: flex;
-    cursor: pointer;
-    justify-content: stretch;
-    color: $font-color-soft;
-    svg {
-      pointer-events: none;
-    }
-    &:hover,
-    &[data-state-in-focus="true"],
-    &[data-state-in-focus="true"]:hover {
-      background-color: $component-bg-selected-color !important;
-    }
-    &:hover {
-      transition: background-color 0.1s;
-    }
-    &:not(:last-child) {
-      border-bottom: 1px solid $component-border-color;
-    }
-    &.not-found-values {
-      text-indent: 10px;
-      font-size: 85%;
-      color: $font-color-soft;
-      font-style: italic;
-      user-select: none;
-      cursor: not-allowed;
-      &:hover {
-        background-color: transparent !important;
-      }
-    }
-    &[data-state-striped="true"]:nth-child(even) {
-      background-color: $list-striped-bg;
-    }
-    &[data-state-multiple-with-checkboxes=true] {
-      align-items: center;
-      justify-content: start;
-      gap: 6px;
-      > div {
-        margin: 0px;
-        div {
-          margin: 0px;
-          width: fit-content;
-          height: fit-content;
-        }
-      }
-    }
-  }
-  li[role="option"][data-state-multiple-with-default=true][aria-selected="true"]  {
-    color: rgba(0, 0, 0, 0.35);
-    cursor: not-allowed;
-  }
-  [role="listbox"] [role="option"][aria-selected="true"],
-  [role="listbox"] [role="option"][aria-selected="true"]:hover {
-    background-color: $default-hover-color !important;
-  }
-  [role="listbox"] [role="option"][data-state-filtered="false"] {
-    display: none;
-    visibility: hidden;
-  }
-  .select-field-search {
-    width: 100%;
-    display: inline-flex;
-    padding: 5px;
-    list-style: none;
-    background-color: $component-bg-default;
-    border-bottom: 1px solid $component-border-color;
-    div.grid-container {
-      width: 100%;
-      margin: 0;
-    }
-    .select-field-search-input {
-      width: 100%;
-    }
-  }
-}

package/lib/assets/styles/shortcuts.scss

@@ -1,59 +0,0 @@
-@import "colors.scss";
-@import "commons.scss";
-
-p.shortcut-description {
-  margin-bottom: .3rem;
-  color: $font-color-default;
-  font-family: 'Roboto', sans-serif;
-  font-size: 14px;
-  font-weight: 400;
-  overflow-wrap: break-word;
-}
-
-.shortcut-component {
-  user-select: none;
-  display: inline-block;
-  padding: 0.1rem 0.3rem;
-  color: $font-color-default;
-  vertical-align: middle;
-  background-color: $default-color;
-  border: solid 1px $default-border-color;
-  border-radius: 3px;
-  box-shadow: inset 0 -1px 0 $default-border-color;
-  font-size: .9rem;
-
-  &.-danger {
-    background-color: $danger-color;
-    color: $font-color-second;
-    box-shadow: inset 0 -1px 0 $danger-actived-color;
-    border-color: $danger-color;
-  }
-
-  &.-primary {
-    background-color: $primary-color;
-    color: $font-color-second;
-    box-shadow: inset 0 -1px 0 $primary-actived-color;
-    border-color: $primary-border-color;
-  }
-
-  &.-warning {
-    background-color: $warning-color;
-    color: $font-color-second;
-    box-shadow: inset 0 -1px 0 $warning-actived-color;
-    border-color: $warning-color;
-  }
-
-  &.-success {
-    background-color: $success-color;
-    color: $font-color-second;
-    box-shadow: inset 0 -1px 0 $success-actived-color;
-    border-color: $success-color;
-  }
-
-  &.-info {
-    background-color: $info-color;
-    color: $font-color-second;
-    box-shadow: inset 0 -1px 0 $info-actived-color;
-    border-color: $info-color;
-  }
-}