@c10t/nice-component-library 0.0.1-beta

package/src/styles/components/cva-multi-upload.scss

@@ -0,0 +1,145 @@
+.cva-multi-upload {
+  background-color: transparent;
+  margin: 0;
+  border: none;
+
+  button {
+    border-radius: 0;
+    border: 1px solid rgba(0, 0, 0, 0.12);
+  }
+
+  .required-label-outside {
+    color: red;
+  }
+
+  .uploadArea {
+    margin-bottom: 15px;
+
+    input[type="file"] {
+      display: none;
+    }
+
+    mat-card {
+      background-color: transparent;
+      border: none;
+      height: 100%;
+      margin: 0;
+      padding: 0;
+      box-shadow: none !important;
+
+      mat-card-actions {
+        height: 100%;
+        padding: 0;
+        margin: 0;
+
+        button {
+          height: 100%;
+          width: 100%;
+        }
+
+        mat-label {
+          word-break: break-word;
+          margin-bottom: 20px;
+          max-width: 128px;
+          display: block;
+        }
+      }
+    }
+
+    .upload-button {
+      background-color: transparent;
+      border: 1px dashed #3366FF;
+      border-radius: 10px;
+      width: 150px;
+      height: 150px;
+      float: left;
+      min-height: 45px;
+      margin-bottom: 10px;
+      padding: 10px;
+
+      .mat-button-wrapper {
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        place-content: center;
+        align-items: center;
+
+        .preview-image {
+          background-size: contain;
+          background-repeat: no-repeat;
+          background-position: center;
+          width: 100%;
+          height: 100%;
+          border-radius: 10px;
+          z-index: 1;
+        }
+      }
+
+      mat-icon {
+        color: #3366FF;
+      }
+
+      mat-label {
+        display: block;
+        width: 150px;
+      }
+
+      .fa-plus {
+        color: #3366FF;
+      }
+
+      .fa-file-alt {
+        position: absolute;
+        top: 20px;
+        left: 20px;
+        color: rgba(51, 102, 255, 0.4);
+        font-size: 90px;
+        font-weight: 100;
+      }
+
+      .fa-eye {
+        position: absolute;
+        bottom: 5px;
+        left: 5px;
+        color: #3366ff;
+        font-size: 16px;
+        font-weight: bold;
+        background-color: #FFF0EF;
+        border: 1px solid #E6F2FC;
+        border-radius: 50%;
+        height: 32px;
+        width: 32px;
+        display: flex;
+        place-content: center;
+        align-items: center;
+        z-index: 2;
+      }
+
+      .fa-eye:hover {
+        border: 1px solid #0088f8;
+      }
+
+      .fa-trash-alt {
+        position: absolute;
+        bottom: 5px;
+        right: 5px;
+        color: #ff837d;
+        font-size: 16px;
+        font-weight: bold;
+        background-color: #FFF0EF;
+        border: 1px solid #E6F2FC;
+        border-radius: 50%;
+        height: 32px;
+        width: 32px;
+        display: flex;
+        place-content: center;
+        align-items: center;
+        z-index: 2;
+      }
+
+      .fa-trash-alt:hover {
+        border: 1px solid #ff4036;
+      }
+    }
+  }
+}

package/src/styles/components/cva-radio-button.scss

@@ -0,0 +1,58 @@
+.cva-radiobutton {
+  .required-label-outside {
+    color: red;
+  }
+
+  div:first-child {
+    align-items: center;
+  }
+
+  .label {
+    display: inline-block;
+  }
+
+  .mat-radio-group {
+    &.example-radio-group {
+      display: flex;
+      flex-direction: column;
+      margin: 15px 0;
+    }
+
+    mat-radio-button {
+      &.example-radio-button {
+        margin-right: 15px;
+      }
+
+      label.mat-radio-label {
+        -webkit-user-select: none;
+        -moz-user-select: none;
+        -ms-user-select: none;
+        user-select: none;
+        cursor: pointer;
+        display: inline-flex;
+        align-items: center;
+        vertical-align: middle;
+        width: 100%;
+      }
+    }
+  }
+
+  mat-hint {
+    color: red!important;
+    width: 100%;
+  }
+
+  &.labelOutside {
+    label {
+      height: 48px;
+      display: flex;
+      place-content: center;
+    }
+
+    mat-radio-group {
+      height: 48px;
+      align-items: center;
+      margin: 0 0 15px 0 !important;
+    }
+  }
+}

package/src/styles/components/cva-smart-table.scss

@@ -0,0 +1,129 @@
+.cva-smart-table {
+  mat-header-cell {
+    padding-left: 0.5rem;
+
+    div {
+      width: 100%;
+      color: rgb(99, 94, 94);
+      font-size: 12px;
+      font-weight: 700;
+    }
+  }
+
+  mat-cell {
+    padding-left: 0.5rem;
+    font-size: small;
+    display: flex;
+
+    .viewData {
+      width: 100%;
+      min-width: 100%;
+      overflow: hidden !important;
+      text-overflow: ellipsis;
+
+      display: flex;
+      place-content: flex-start;
+      align-content: center;
+
+      white-space: pre-line;
+      word-break: break-word;
+
+      &.break-word-style-view {
+        word-break: initial;
+      }
+    }
+
+    .inputNumber {
+      width: 100%;
+      min-width: 100%;
+      overflow: hidden !important;
+      text-overflow: ellipsis;
+
+      display: flex;
+      place-content: center;
+      align-content: center;
+    }
+
+    .multiSelectAutocomplete {
+      min-width: 100%;
+      width: 100%;
+      overflow: hidden !important;
+      text-overflow: ellipsis;
+      display: flex;
+    }
+  }
+
+  mat-footer-cell {
+    padding-left: 0.5rem;
+    font-size: small;
+    display: flex;
+
+    .viewData {
+      width: 100%;
+      min-width: 100%;
+      overflow: hidden !important;
+      text-overflow: ellipsis;
+
+      display: flex;
+      place-content: flex-start;
+      align-content: center;
+
+      white-space: pre-line;
+      word-break: break-word;
+    }
+  }
+
+  mat-header-cell, mat-cell, mat-footer-cell {
+    &:first-child {
+      padding-left: 0.5rem;
+    }
+  }
+
+  .mat-column-stt, .mat-column-STT {
+    //max-width: 5%;
+    padding: 0;
+  }
+
+  mat-checkbox {
+    width: 1rem;
+  }
+
+  .checkbox-cell {
+    width: 100%;
+  }
+
+  .img-view.viewData img {
+    height: 40px;
+    width: 40px;
+    border: 1px solid #D3D3D3;
+    border-radius: 6px;
+  }
+
+  mat-form-field {
+    .mat-form-field-wrapper {
+      margin: 0 !important;
+      padding: 0 !important;
+    }
+  }
+}
+
+cva-smart-table {
+  &.flashSaleRangeTime {
+    .mat-header-cell {
+      background-color: #E6F6F3 !important;
+
+      > div {
+        color: #222222 !important;
+        font-weight: 500 !important;
+      }
+    }
+
+    .mat-row {
+      background-color: white !important;
+
+      .mat-cell {
+        border: 1px solid #E9E9E9;
+      }
+    }
+  }
+}

package/src/styles/components/cva-table.scss

@@ -0,0 +1,98 @@
+.cva-table {
+  .mat-column-stt, .mat-column-STT {
+    max-width: 5%;
+    padding: 0;
+
+    .viewData {
+      min-width: 100%;
+    }
+  }
+
+  mat-header-cell {
+    padding-left: 0.5rem;
+    place-content: center;
+    align-items: center;
+
+    .viewData {
+      width: 100%;
+      color: rgb(99, 94, 94);
+      font-size: small;
+      font-weight: 700;
+    }
+
+    mat-checkbox {
+      width: 100%;
+    }
+  }
+
+  mat-cell {
+    padding-left: 0.5rem;
+
+    .viewData {
+      font-size: small;
+      width: 100%;
+      overflow: hidden !important;
+      text-overflow: ellipsis;
+      display: flex;
+      place-content: center;
+      align-content: center;
+      white-space: pre-line;
+
+      &.break-word-style-view {
+        word-break: break-word;
+      }
+    }
+
+    mat-checkbox {
+      width: 100%;
+    }
+  }
+
+  mat-cell:first-child, mat-header-cell:first-child {
+    max-width: 5%;
+    padding: 0;
+  }
+
+  mat-cell:last-of-type, mat-header-cell:last-of-type {
+    padding-right: 0;
+  }
+
+  cva-header-expand-button {
+    .expand-column-header-button {
+      z-index: 2;
+    }
+  }
+
+  .img-view.viewData img {
+    height: 4rem;
+    width: 4rem;
+    border-radius: 6px;
+  }
+}
+
+:host ::ng-deep h2 {
+  padding: 1rem 0.5rem 1rem 0.5rem;
+  margin: 0px;
+}
+
+:host ::ng-deep .mat-custom-page {
+  display: flex;
+  place-content: center;
+  align-items: center;
+}
+
+:host ::ng-deep .expand-column-header-button {
+  position: absolute;
+  right: 1rem !important;
+}
+
+:host ::ng-deep .menu-expand-column {
+  height: 27rem;
+}
+
+:host ::ng-deep .menu-expand-column .header-menu-expand {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  background: white
+}

package/src/styles/components/cva-tree.scss

@@ -0,0 +1,76 @@
+.cva-tree {
+  .example-tree-invisible {
+    display: none;
+  }
+
+  .example-tree ul,
+  .example-tree li {
+    margin-top: 0;
+    margin-bottom: 0;
+    list-style-type: none;
+    height: 100%;
+    width: 100%;
+    width: -moz-available; /* WebKit-based browsers will ignore this. */
+    width: -webkit-fill-available; /* Mozilla-based browsers will ignore this. */
+    width: fill-available;
+  }
+
+  .parent-mat-tree {
+    min-height: calc(100% - 53px);
+    max-height: calc(100% - 53px);
+    overflow: auto;
+    transition: box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1);
+    margin: 1px;
+    border-radius: 2px;
+  }
+
+  .parent-mat-tree mat-tree {
+    height: 100%;
+  }
+
+  .parent-mat-tree mat-tree mat-nested-tree-node {
+    height: 100%;
+  }
+
+  mat-tree mat-nested-tree-node div.mat-tree-node {
+    display: flex;
+    align-items: center;
+    min-height: 36px;
+    height: 36px;
+    flex: 1;
+    word-wrap: break-word;
+  }
+
+  mat-tree mat-nested-tree-node ul mat-tree-node.mat-tree-node {
+    display: flex;
+    align-items: center;
+    min-height: 36px;
+    height: 36px;
+    flex: 1;
+    word-wrap: break-word;
+  }
+
+  .box-search {
+    margin: 1px;
+    border-radius: 2px;
+    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.08);
+    transition: box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1);
+    display: flex;
+  }
+
+  .box-search .expand_collapse button {
+    padding-top: 6px;
+  }
+
+  .box-search cva-multi-select-autocomplete {
+    flex: 1;
+    border: none;
+    outline: none;
+    padding-left: 1rem;
+  }
+
+  label.item-focused {
+    font-weight: bold;
+    color: #ff9800;
+  }
+}