linear-react-components-ui 1.1.26-beta.17 → 1.1.26-beta.18

package/lib/assets/styles/error.scss

@@ -0,0 +1,9 @@
+@import "colors.scss";
+
+p.errormessages-component {
+  width: 100%;
+  color: $error-color;
+  font-size: 13px!important;
+  line-height: 13px;
+  margin-top: 3px;
+}

package/lib/assets/styles/fieldset.scss

@@ -0,0 +1,96 @@
+@import 'colors.scss';
+.fieldset-component {
+  font-family: 'Roboto', sans-serif;
+  border: 1px solid $component-border-color;
+  padding: 5px;
+  width: 100%;
+  margin-bottom: 5px;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  &.-danger {
+    border: 1px solid $danger-color;
+    > .legend {
+      background-color: $danger-color;
+      color: $font-color-second;
+      border: 1px solid $danger-color;
+    }
+  }
+  &.-primary {
+    border: 1px solid $primary-border-color;
+    > .legend {
+      background-color: $primary-color;
+      color: $font-color-second;
+      border: 1px solid $primary-border-color;
+    }
+  }
+  &.-warning {
+    border: 1px solid $warning-color;
+    > .legend {
+      background-color: $warning-color;
+      color: $font-color-second;
+      border: 1px solid $warning-color;
+    }
+  }
+  &.-success {
+    border: 1px solid $success-color;
+    > .legend {
+      background-color: $success-color;
+      color: $font-color-second;
+      border: 1px solid $success-color;
+    }
+  }
+  &.-info {
+    border: 1px solid $info-color;
+    > .legend {
+      background-color: $info-color;
+      color: $font-color-second;
+      border: 1px solid $info-color;
+    }
+  }
+  &.-witherror {
+    border: 1px solid $input-error-border-color;
+    > .legend {
+      border: 1px solid $input-error-border-color;
+      background-color: $input-error-bg-color;
+    }
+  }
+  > .legend {
+    border: 1px solid #eee;
+    padding: 2px 15px 0;
+    font-size: 11px;
+    font-weight: bold;
+    color: $font-color-soft;
+    background-color: $fieldset-default;
+    text-transform: uppercase;
+    border-radius: 0px 10px 0px 0px;
+    z-index: 0;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+  > .errormessage {
+    position: relative;
+    float: right;
+    right: 20px;
+    background: #fff;
+    line-height: 1.2em;
+  }
+  > .contentfieldset {
+    font-size: 16px;
+    line-height: 26px;
+    height: 100%;
+    overflow: auto;
+    padding-bottom: 3px;
+    &.-templatecolumns {
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+      grid-column-gap: 5px;
+    }
+    &.-templaterows {
+      display: grid;
+      grid-template-rows: repeat(2, 1fr);
+      grid-row-gap: 5px;
+    }
+  }
+}

package/lib/assets/styles/file.scss

@@ -0,0 +1,229 @@
+@import "colors.scss";
+@import "effects";
+@import "commons.scss";
+
+::-webkit-file-upload-button {
+    display: none;
+}
+
+.button-component {
+  &.-transparentWithoutShadow {
+    border: none;
+    box-shadow: none;
+    background-color: transparent;
+  }
+}
+
+.input-dragdrop-container {
+  width: 100%;
+  height: 100%;
+  > .drag-content {
+    height: 100%;
+    width: 100%;
+    max-width: 100%;
+    text-align: center;
+    > .drag-position-element {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      border-radius: 1rem;
+      top: 0px;
+      right: 0px;
+      bottom: 0px;
+      left: 0px;
+    }
+    > .content {
+      padding: 2rem 1rem;
+      box-sizing: border-box;
+      flex-direction: column;
+      width: 100%;
+      height: 100%;
+      min-height: 150px;
+      display: flex;
+      margin: 0px;
+      align-items: center;
+      justify-content: center;
+      border-width: 2px;
+      border-radius: 1rem;
+      border-style: dashed;
+      border-color: #cbd5e1;
+      background-color: #f8fafc;
+      &.disapprovedFile {
+        background-color: #eec8c4;
+        border-color: $danger-border-color;
+        cursor: no-drop;
+      }
+      &.approvedFile {
+        background-color: #d1f0d7;
+        border-color: $success-border-color;
+      }
+      > img {
+        width: 50%;
+        object-fit: cover;
+        height: 150px;
+      }
+      > label {
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        > .title {
+          font-weight: bold;
+          font-size: 24px;
+          color: #4f4e4e;
+        }
+        > .subtitle {
+          font-size: 14px !important;
+          color: #777777;
+          padding-bottom: 10px;
+        }
+      }
+      > .file-list {
+        display: flex;
+        flex: 1;
+        gap: 20px;
+        overflow: auto;
+        width: 100%;
+        position: relative;
+        padding: 0 0 10px 0;
+        > .file-card {
+          width: 150px;
+          position: relative;
+          border-radius: 10px;
+          background-color: #dadada;
+          box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
+          padding: 10px 10px;
+          height: 125px;
+          &:hover .delete-button{
+            opacity: 1;
+            pointer-events: all;
+          }
+          > .delete-button{
+            position: absolute;
+            padding: 0;
+            right: 0px;
+            opacity: 0;
+            pointer-events: none;
+            top: 8px;
+            & svg {
+              fill: $danger-color;
+              background-color: white;
+              border-radius: 10px;
+            }
+          }
+          > .image-content {
+            img {
+              width: 130px;
+              object-fit: cover;
+              height: 80px;
+              max-height: 75px;
+            }
+          }
+          > .description-file {
+            width: 100%;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            > .subtitle {
+              font-size: 14px !important;
+              color: #777777;
+              padding-bottom: 10px;
+            }
+          }
+          & .color-icon-upload {
+            border-radius: 10px;
+          }
+        }
+      }
+      > .image-preview-solo {
+        img {
+          width: 100%;
+          object-fit: contain;
+          height: 150px;
+          padding: 10px;
+        }
+      }
+      > .footer-button-action {
+        gap: 15px;
+        display: flex;
+        padding-top: 10px;
+      }
+    }
+  }
+  > .errormessages {
+    width: 100%;
+    color: red;
+    font-size: 13px!important;
+    line-height: 13px;
+    margin-top: 3px;
+  }
+  > .-skeletonized {
+    @extend %skeleton-component;
+    height: 180px !important;
+    color: transparent !important;
+    text-shadow: none;
+    box-shadow: none;
+    border-color: transparent !important;
+    transition: none;
+  }  
+}
+
+.input-simple-file-container {
+  .file-content {
+    flex: 1;
+  }
+
+  .file-wrapper {
+    align-items: center;
+  }
+
+  .-disabledVisualApply {
+    background: #fff5e5 !important;
+    > .size-position-icon {
+      > .button-component {
+        width: 25px;
+        height: 25px;
+        padding-top: 7px;
+        padding-bottom: 7px;
+        text-align: -webkit-center;
+        pointer-events: all;
+      }
+    }
+  }
+  .-disabled-popover {
+    > button{
+      pointer-events: none !important;
+      opacity: 0.5;
+    }
+  }
+  > .errormessages {
+    width: 100%;
+    color: red;
+    font-size: 13px!important;
+    line-height: 13px;
+    margin-top: 3px;
+  }
+}
+
+.popovercontainer{
+    width: 178px;
+    > p {
+      > .list-simple-file {
+          width: 100%;
+          overflow: hidden;
+          white-space: nowrap;
+          background-color: #a5a3a3;
+          border-radius: 5px;
+          padding: 5px;
+          margin-bottom: 10px;
+          > .file-name {
+              overflow: hidden;
+              text-overflow: ellipsis;
+              > span{ 
+                  font-size: 12px;
+              }
+          }
+      }
+  }
+}

package/lib/assets/styles/filefield.scss

@@ -0,0 +1,42 @@
+@import "colors.scss";
+@import "effects";
+@import "commons.scss";
+
+::-webkit-file-upload-button {
+  display: none;
+}
+
+.file-container {
+  &:has(input[type="text"], input.file-input) {
+    background-color: $input-read-only-bg-color;
+  }
+
+  .file-input[type="text"] {
+    line-height: normal;
+    caret-color: transparent;
+    &::selection {
+      color: inherit;
+    }
+  }
+
+  .file-right-slot {
+    display: flex;
+    flex-direction: row;
+
+    .show-files-selected-list,
+    .clear-files-selected,
+    .select-files {
+      padding: 8px;
+
+      svg {
+        margin: 0px;
+      }
+
+      &.select-files {
+        border-radius: 0;
+        border: 0px;
+        border-left: 1px solid $component-border-color;
+      }
+    }
+  }
+}

package/lib/assets/styles/floatMenu.scss

@@ -0,0 +1,15 @@
+@import "colors.scss";
+@import "commons.scss";
+@import "effects.scss";
+.floatmenu-component {
+  display: flex;
+  justify-content: center;
+  >.buttonfloat {
+    padding: 8px;
+    width: 100%;
+    text-align: center;
+    >.icon-component {
+      margin: 0;
+    }
+  }
+}

package/lib/assets/styles/fonts.scss

@@ -0,0 +1,86 @@
+%component-fonts {
+  color: #666;
+  font-size: 16px;
+  font-family: 'Roboto';
+  font-weight: 400;
+  outline: none;
+}
+
+%component-font-headers {
+  @extend %component-fonts;
+  font-size: 16px;
+  font-weight: bold;
+}
+
+@font-face {
+  font-family: 'Roboto';
+  src: url('../fonts/Roboto-Thin.woff2') format('woff2'), url('../fonts/Roboto-Thin.woff') format('woff');
+  font-weight: 100;
+  font-style: normal;
+}
+@font-face {
+  font-family: 'Roboto';
+  src: url('../fonts/Roboto-Light.woff2') format('woff2'), url('../fonts/Roboto-Light.woff') format('woff');
+  font-weight: 300;
+  font-style: normal;
+}
+@font-face {
+  font-family: 'Roboto';
+  src: url('../fonts/Roboto-Bold.woff2') format('woff2'), url('../fonts/Roboto-Bold.woff') format('woff');
+  font-weight: bold;
+  font-style: normal;
+}
+@font-face {
+  font-family: 'Roboto';
+  src: url('../fonts/Roboto-Medium.woff2') format('woff2'), url('../fonts/Roboto-Medium.woff') format('woff');
+  font-weight: 500;
+  font-style: normal;
+}
+@font-face {
+  font-family: 'Roboto';
+  src: url('../fonts/Roboto-Black.woff2') format('woff2'), url('../fonts/Roboto-Black.woff') format('woff');
+  font-weight: 900;
+  font-style: normal;
+}
+@font-face {
+  font-family: 'Titillium Web';
+  src: url('../fonts/TitilliumWeb-Regular.woff2') format('woff2'), url('../fonts/TitilliumWeb-Regular.woff') format('woff');
+  font-weight: normal;
+  font-style: normal;
+}
+@font-face {
+  font-family: 'Titillium Web';
+  src: url('../fonts/TitilliumWeb-ExtraLight.woff2') format('woff2'), url('../fonts/TitilliumWeb-ExtraLight.woff') format('woff');
+  font-weight: 200;
+  font-style: normal;
+}
+@font-face {
+  font-family: 'Titillium Web';
+  src: url('../fonts/TitilliumWeb-Bold.woff2') format('woff2'), url('../fonts/TitilliumWeb-Bold.woff') format('woff');
+  font-weight: bold;
+  font-style: normal;
+}
+@font-face {
+  font-family: 'Roboto';
+  src: url('../fonts/Roboto-Regular.woff2') format('woff2'), url('../fonts/Roboto-Regular.woff') format('woff');
+  font-weight: normal;
+  font-style: normal;
+}
+@font-face {
+  font-family: 'Titillium Web';
+  src: url('../fonts/TitilliumWeb-Light.woff2') format('woff2'), url('../fonts/TitilliumWeb-Light.woff') format('woff');
+  font-weight: 300;
+  font-style: normal;
+}
+@font-face {
+  font-family: 'Titillium Web';
+  src: url('../fonts/TitilliumWeb-Black.woff2') format('woff2'), url('../fonts/TitilliumWeb-Black.woff') format('woff');
+  font-weight: 900;
+  font-style: normal;
+}
+@font-face {
+  font-family: 'Titillium Web';
+  src: url('../fonts/TitilliumWeb-SemiBold.woff2') format('woff2'), url('../fonts/TitilliumWeb-SemiBold.woff') format('woff');
+  font-weight: 600;
+  font-style: normal;
+}

package/lib/assets/styles/form.scss

@@ -0,0 +1,23 @@
+@import "commons.scss";
+@import "colors.scss";
+.form-component {
+  .arraycontainer {
+    margin-bottom: 5px;
+    border: 0;
+    &.-bordered {
+      border-radius: 2px;
+      border: 1px solid  $component-border-color;
+      padding: 5px;
+      > .label {
+        padding: 0 4px;
+      }
+    }
+    > .label {
+      @extend %input-label;
+      border: 0;
+      background-color: transparent;
+      text-transform: none;
+      font-weight: normal;
+    }
+  }
+}