procode-vs-template 1.0.0

package/src/Widgets/GridToolBar/scss/index.scss

@@ -0,0 +1,834 @@
+.tmpl-popup-animation {
+  animation: fadeInWithNavigation 0.3s ease-in-out;
+}
+
+.tmpl-popup-animation-2 {
+  animation: fadeIn 0.3s ease-in-out;
+}
+
+.tmpl-popup-animation-reverse {
+  animation: fadeOutWithNavigation 0.25s ease-in-out !important;
+}
+
+.tmpl-popup-animation-2-reverse {
+  animation: fadeOut 0.3s ease-in-out;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes fadeInWithNavigation {
+  from {
+    opacity: 0;
+    transform: translateY(-20px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes fadeOut {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes fadeOutWithNavigation {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+
+  to {
+    opacity: 0;
+    transform: translateY(-20px);
+  }
+}
+
+.tmpl-grid-toolbar-container {
+  display: flex;
+  flex-wrap: nowrap;
+  justify-content: space-between;
+  width: 100%;
+  gap: $space-sm;
+  font-family: $font-family-primary;
+
+  .tmpl-global-search {
+    flex: 1;
+  }
+  .tmpl-advanced-search-container {
+    position: relative;
+  }
+  .tmpl-advanced-popup {
+    @extend .tmpl-popup-animation;
+    position: absolute;
+    right: 0;
+    top: 42px;
+    width: 650px;
+    z-index: 3;
+    background-color: $background-default;
+    border: $border-width-sm solid $border-default;
+    border-radius: $border-radius-md;
+    box-shadow: -10px 0 50px rgba(0, 0, 0, 0.15);
+
+    .tmpl-filter-container {
+      max-height: 313px;
+      overflow-y: auto;
+      padding: 0 $space-lg $space-lg;
+
+      .tmpl-filter {
+        display: flex;
+        gap: $space-sm;
+        align-items: center;
+        color: $text-default;
+        font-size: $font-size-sm;
+        line-height: $line-height-sm;
+        font-weight: $font-weight-regular;
+
+        &:first-of-type {
+          font-weight: $font-weight-medium;
+          font-size: $font-size-lg;
+          line-height: $line-height-lg;
+          padding-top: $space-lg;
+          padding-bottom: $space-lg;
+          margin-bottom: 12px;
+          position: sticky;
+          top: 0;
+          background-color: $background-default;
+          z-index: 1001;
+          // box-shadow: 0 0 8px 0 $boxshadow-primary;
+        }
+
+        &.tmpl-filter-border {
+          //  border-bottom: $border-width-sm solid $border-default;
+          //  border-top: $border-width-sm solid $border-default;
+          //  padding: $space-xl $space-lg $space-lg;
+          position: relative;
+
+          & > .tmpl-filter-id {
+            position: absolute;
+            transform: translate(-50%, -50%);
+            top: 0;
+            left: 0;
+            z-index: 10;
+            padding: 2px;
+            font-size: $font-size-xxs;
+            line-height: $line-height-xxs;
+            font-weight: $font-weight-bold;
+            color: $text-dark;
+            background-color: $background-secondary;
+            border: $border-width-sm solid $border-default;
+            border-radius: $border-radius-md;
+          }
+        }
+
+        & > .tmpl-dropdown-container,
+        .tmpl-advanced-input {
+          flex: 1;
+
+          input {
+            border: $border-width-sm solid $border-default;
+            height: $size-md;
+          }
+
+          .k-radio-label {
+            margin-left: 4px;
+          }
+        }
+
+        .tmpl-advanced-ranged-input {
+          max-width: 230px;
+          height: $size-md;
+        }
+
+        & > .tmpl-button {
+          flex: 0 0 25px;
+        }
+
+        & > .tmpl-header-title {
+          flex: 1;
+
+          &:nth-child(4) {
+            flex: 0 0 25px;
+          }
+
+          &:last-child {
+            flex: 0 0 25px;
+          }
+        }
+      }
+
+      .tmpl-criteria {
+        display: inline-block;
+        text-align: center;
+        margin: $space-xl 0;
+        /*   border: $border-width-sm solid $border-default;
+        border-radius: $border-radius-sm; */
+        font-size: $font-size-sm;
+        line-height: $line-height-sm;
+        font-weight: $font-weight-bold;
+        color: $text-dark;
+        min-width: 45px;
+        cursor: pointer;
+        position: relative;
+        &:last-child {
+          display: none;
+        }
+
+        &::before {
+          content: "";
+          position: absolute;
+          top: -20px;
+          left: 50%;
+          height: 20px;
+          width: 1.5px;
+          transform: translateX(-50%);
+          background-color: $border-default;
+        }
+
+        &::after {
+          content: "";
+          position: absolute;
+          bottom: -20px;
+          height: 20px;
+          width: 1.5px;
+          left: 50%;
+          transform: translateX(-50%);
+          background-color: $border-default;
+        }
+      }
+    }
+
+    .tmpl-action-container {
+      display: flex;
+      height: 65px;
+      gap: $space-sm;
+      align-items: center;
+      justify-content: space-between;
+      padding: 0 $space-lg;
+      box-shadow: 0 0 8px 0 $boxshadow-primary;
+      //  border-top: 1px solid hsla(0, 0%, 67%, 0.6);
+
+      .k-button {
+        height: $size-md;
+      }
+
+      .tmpl-criteria-input-container {
+        border: $border-width-sm solid $border-default;
+        border-radius: $border-radius-md;
+        padding: $space-sm;
+
+        .tmpl-criteria-input {
+          font-size: $font-size-sm;
+          line-height: $line-height-sm;
+          font-weight: $font-weight-bold;
+          color: $text-dark;
+          outline: none;
+          display: -webkit-box;
+          -webkit-line-clamp: 2;
+          -webkit-box-orient: vertical;
+          max-height: 34px;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+
+        .tmpl-criteria-input-icon {
+          height: 20px;
+          width: 20px;
+          padding: 2px;
+        }
+      }
+
+      div {
+        display: flex;
+        align-items: center;
+        gap: $space-sm;
+
+        .tmpl-cancel-action {
+          color: $text-danger;
+          cursor: pointer;
+          font-size: $font-size-md;
+          line-height: $line-height-md;
+          font-weight: $font-weight-regular;
+
+          &:hover {
+            color: $text-danger-hover;
+          }
+        }
+      }
+    }
+  }
+
+  .tmpl-export-container {
+    flex: 0 0 32px;
+    height: 100%;
+    position: relative;
+
+    .tmpl-export {
+      height: 100%;
+      width: 100%;
+    }
+
+    .tmpl-export-popup {
+      @extend .tmpl-popup-animation;
+      position: absolute;
+      right: 3px;
+      top: 42px;
+      width: 320px;
+      z-index: 10;
+      background-color: $background-default;
+      border: $border-width-sm solid $border-default;
+      border-radius: $border-radius-md;
+      box-shadow: 0 0 8px 0 $boxshadow-primary;
+      padding: $space-md;
+      .tmpl-export-popup-header {
+        display: flex;
+        gap: $space-sm;
+        align-items: flex-start;
+        //margin-bottom: 10px;
+      }
+      .tmpl-export-item-container {
+        max-height: 200px;
+        overflow-y: auto;
+        color: $text-dark;
+        cursor: pointer;
+        font-size: $font-size-md;
+        line-height: $line-height-md;
+        font-weight: $font-weight-regular;
+        .tmpl-export-item {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          gap: $space-sm;
+          margin-bottom: 2px;
+          padding-bottom: 2px;
+          border-bottom: $border-width-sm solid $border-default;
+          & > div {
+            display: flex;
+            gap: $space-sm;
+            align-items: center;
+          }
+        }
+      }
+      .tmpl-export-divider {
+        padding-top: $space-sm;
+        display: flex;
+        justify-content: flex-end;
+      }
+      h4 {
+        color: $text-dark;
+        margin-bottom: $space-sm;
+      }
+      .tmpl-export-history-items-container {
+        max-height: 200px;
+        overflow-y: auto;
+        .tmpl-export-history-item {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          gap: $space-sm;
+          margin-bottom: 2px;
+          padding-bottom: 2px;
+          border-bottom: $border-width-sm solid $border-default;
+          .tmpl-export-history-item-info {
+            p {
+              &:first-of-type {
+                font-size: $font-size-sm;
+                font-weight: $font-weight-regular;
+                line-height: $line-height-sm;
+                color: $text-dark;
+              }
+              &:last-of-type {
+                font-size: $font-size-xxs;
+                font-weight: $font-weight-medium;
+                line-height: $line-height-xxs;
+                color: $text-default;
+              }
+            }
+          }
+          .tmpl-export-history-item-action {
+            display: flex;
+            align-items: center;
+          }
+        }
+      }
+    }
+  }
+
+  .tmpl-setting-container {
+    flex: 0 0 32px;
+    height: 100%;
+    position: relative;
+
+    .tmpl-setting {
+      height: 100%;
+      width: 100%;
+    }
+
+    .tmpl-setting-popup {
+      @extend .tmpl-popup-animation;
+      position: absolute;
+      right: 0;
+      top: 42px;
+      width: 200px;
+      z-index: 3;
+      background-color: $background-default;
+      border: $border-width-sm solid $border-default;
+      border-radius: $border-radius-md;
+      box-shadow: 0 0 8px 0 $boxshadow-primary;
+
+      div {
+        padding: $space-sm;
+        cursor: pointer;
+        transition: background-color 0.25s ease-in-out;
+        color: $text-dark;
+        cursor: pointer;
+        font-size: $font-size-md;
+        line-height: $line-height-md;
+        font-weight: $font-weight-regular;
+
+        &:first-of-type {
+          border-bottom: $border-width-sm solid $border-default;
+        }
+
+        &:hover {
+          background-color: hsla(0, 0%, 67%, 0.6);
+        }
+      }
+    }
+
+    .tmpl-columnchooser-popup {
+      @extend .tmpl-popup-animation-2;
+      position: fixed;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+      width: calc(80vw * 0.66);
+      z-index: 4;
+      background-color: #fff;
+      border: none;
+      border-radius: 4px;
+      padding: 16.5px;
+      box-shadow: -10px 0 50px rgba(0, 0, 0, 0.15);
+
+      .tmpl-chooser-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        border-bottom: 1px solid hsla(0, 0%, 67%, 0.6);
+        padding-bottom: 16.5px;
+        margin-bottom: 16.5px;
+
+        h2 {
+          color: #333;
+          font-size: 18px;
+          font-weight: 500;
+          line-height: 23px;
+        }
+
+        .k-button {
+          height: 32px;
+
+          &:first-of-type {
+            margin-right: 10px;
+          }
+        }
+      }
+
+      .tmpl-chooser-body {
+        display: flex;
+        font-size: 11px;
+        line-height: 14px;
+        gap: 10px;
+
+        & > div {
+          height: 300px;
+          overflow-y: auto;
+          position: relative;
+
+          &:first-of-type {
+            flex: 0 0 30%;
+            padding: 0 12.5px 12.5px;
+            display: flex;
+            flex-direction: column;
+
+            .tmpl-column {
+              height: 25px;
+            }
+          }
+
+          &:last-of-type {
+            flex: 0 0 70%;
+            padding: 0 12.5px 12.5px;
+            background-color: #f7f7f7;
+
+            .tmpl-chooser-setting-container {
+              height: 32px;
+              display: flex;
+              align-items: center;
+              justify-content: space-between;
+              background-color: #fff;
+              padding: 10px;
+              margin-bottom: 10px;
+              .tmpl-chooser-setting-label {
+                flex: 1;
+              }
+
+              & > div {
+                display: flex;
+                align-items: center;
+                gap: 20px;
+
+                .k-i-close {
+                  cursor: pointer;
+                }
+              }
+            }
+          }
+
+          .tmpl-search-container {
+            height: 50px;
+            border-bottom: 1px solid hsla(0, 0%, 67%, 0.6);
+            padding-bottom: 16px;
+            margin-bottom: 16px;
+            position: sticky;
+            top: 0;
+            background-color: #fff;
+            width: 100%;
+            z-index: 1;
+
+            .tmpl-search {
+              height: 32px;
+            }
+          }
+
+          .tmpl-title {
+            padding-bottom: 16px;
+            padding-top: 16px;
+            border-bottom: 1px solid hsla(0, 0%, 67%, 0.6);
+            margin-bottom: 16px;
+            position: sticky;
+            top: -1px;
+            background-color: #f7f7f7;
+            width: 100%;
+            z-index: 1;
+
+            p {
+              font-size: 16px;
+              line-height: 18px;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .tmpl-screen-view {
+    width: 225px;
+    height: 100%;
+
+    & > button {
+      border: none;
+      color: #575757;
+      font-size: 11px;
+      font-weight: 400;
+      line-height: 14px;
+
+      &:first-of-type {
+        width: calc(100% - 40px);
+        height: 100%;
+      }
+
+      &:last-of-type {
+        width: 40px;
+        height: 100%;
+      }
+    }
+  }
+
+  .tmpl-reset {
+    flex: 0 0 32px;
+    height: 100%;
+  }
+
+  .tmpl-quick-filter-container {
+    flex: 0 0 32px;
+    height: 100%;
+    position: relative;
+
+    .tmpl-quick-filter {
+      height: 100%;
+      width: 100%;
+    }
+
+    .tmpl-quick-filter-popup {
+      @extend .tmpl-popup-animation;
+      position: absolute;
+      right: 0;
+      top: 42px;
+      width: 225px;
+      z-index: 3;
+      background-color: #fff;
+      border: 1px solid hsla(0, 0%, 67%, 0.6);
+      border-radius: 2px;
+      box-shadow: -10px 0 50px rgba(0, 0, 0, 0.15);
+
+      .tmpl-dropdown-container {
+        padding: 7px;
+
+        span {
+          &:first-of-type {
+            color: #575757;
+            font-size: 12px;
+            font-weight: 400;
+            line-height: 16px;
+          }
+        }
+
+        &:not(:last-of-type) {
+          border-bottom: 1px solid hsla(0, 0%, 67%, 0.6);
+        }
+      }
+    }
+  }
+
+  .tmpl-group-filter-container {
+    height: 100%;
+    position: relative;
+    .tmpl-group-filter-popup {
+      @extend .tmpl-popup-animation-2;
+      position: fixed;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+      width: 650px;
+      z-index: 3;
+      background-color: #fff;
+      border: 1px solid hsla(0, 0%, 67%, 0.6);
+      border-radius: 20px;
+      padding: 16px;
+      box-shadow: -10px 0 50px rgba(0, 0, 0, 0.15);
+
+      .tmpl-group-filter-popup-header {
+        display: flex;
+        justify-content: space-between;
+        border-bottom: 1px solid hsla(0, 0%, 67%, 0.6);
+        margin-bottom: 16px;
+        align-items: center;
+
+        h2 {
+          font-size: 20px;
+          line-height: 23px;
+          margin-bottom: 10px;
+          font-weight: 500;
+          color: #464646;
+        }
+
+        p {
+          color: #464646;
+          font-size: 12px;
+          font-weight: 400;
+          line-height: 16px;
+          margin-bottom: 10px;
+        }
+      }
+
+      .tmpl-group-filter-popup-body {
+        .tmpl-dropdown-container {
+          width: 40%;
+          margin-bottom: 16px;
+
+          .tmpl-dropdown {
+            border: 1px solid #ccc !important;
+            border-radius: 2px;
+          }
+
+          & > span {
+            &:first-of-type {
+              color: #4d4d4d;
+              display: block;
+              font-size: 11px;
+              font-weight: 300;
+              line-height: 14px;
+              margin: 0 0 6px;
+            }
+          }
+        }
+
+        .tmpl-group-filter-popup-footer {
+          padding-top: 16px;
+          border-top: 1px solid hsla(0, 0%, 67%, 0.6);
+          display: flex;
+          justify-content: flex-end;
+        }
+      }
+    }
+  }
+}
+
+.tmpl-button-popup {
+  border-radius: $border-radius-md;
+  margin-top: 5px;
+  max-height: calc(26px * 5);
+  overflow-y: auto;
+}
+
+.tmpl-screen-view-item {
+  display: flex;
+  width: 100%;
+  height: 26px;
+  padding: 8px;
+  gap: 8px;
+  align-items: center;
+  transition: background-color 0.25s ease-in-out;
+
+  &:hover {
+    .tmpl-set-default {
+      display: inline-block;
+    }
+
+    .tmpl-delete-icon {
+      display: inline-block;
+    }
+  }
+
+  .tmpl-screen-view-name {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .tmpl-delete-icon {
+    flex: 0 0 16px;
+    width: 20px;
+    height: 20px;
+
+    font-size: 11px;
+    line-height: 16px;
+    display: none;
+  }
+
+  .tmpl-set-default {
+    flex: 0 0 16px;
+    width: 20px;
+    height: 20px;
+
+    font-size: 11px;
+    line-height: 14px;
+    display: none;
+  }
+}
+.tmpl-screen-view-footer {
+  padding: 8px;
+}
+.tmpl-screen-creater-popup {
+  @extend .tmpl-popup-animation-2;
+  position: fixed;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  width: 650px;
+  z-index: 3;
+  background-color: #fff;
+  border: 1px solid hsla(0, 0%, 67%, 0.6);
+  border-radius: 20px;
+  padding: 16px;
+  box-shadow: -10px 0 50px rgba(0, 0, 0, 0.15);
+
+  .tmpl-screen-creater-popup-header {
+    display: flex;
+    justify-content: space-between;
+    border-bottom: 1px solid hsla(0, 0%, 67%, 0.6);
+    margin-bottom: 16px;
+    padding: 10px 0;
+
+    h2 {
+      font-size: 20px;
+      line-height: 23px;
+      font-weight: 500;
+      color: #464646;
+    }
+
+    p {
+      color: #464646;
+      font-size: 12px;
+      font-weight: 400;
+      line-height: 16px;
+      margin-bottom: 10px;
+    }
+  }
+
+  .tmpl-screen-creater-popup-body {
+    .tmpl-dropdown-container {
+      width: 40%;
+      margin-bottom: 16px;
+
+      .tmpl-input {
+        input {
+          height: 100%;
+        }
+      }
+
+      span {
+        display: block;
+        margin-bottom: 5px;
+      }
+    }
+
+    .tmpl-screen-creater-popup-footer {
+      padding-top: 16px;
+      border-top: 1px solid hsla(0, 0%, 67%, 0.6);
+      display: flex;
+      justify-content: flex-end;
+    }
+  }
+}
+.tmpl-dropdown {
+  align-items: center;
+  background-image: none;
+  height: $size-md;
+  width: 100%;
+  box-shadow: none !important;
+  border: $border-width-sm solid $border-default;
+  border-radius: $border-radius-md;
+  height: $size-md;
+}
+
+.tmpl-button {
+  border: $border-width-sm solid $border-default;
+  border-radius: $border-radius-md;
+  text-align: center;
+  background-color: $background-default;
+  box-shadow: none !important;
+  height: $size-md;
+}
+
+.tmpl-button-sm {
+  border: $border-width-sm solid $border-default;
+  border-radius: $border-radius-md;
+  text-align: center;
+  background-color: $background-default;
+  box-shadow: none !important;
+  height: $size-sm;
+  width: $size-sm;
+}
+
+.tmpl-input {
+  border-radius: $border-radius-md;
+  padding: 5px 11px 5px 5px;
+  box-shadow: none !important;
+  height: $size-md;
+}