raise-common-lib-new 0.0.2

package/src/assets/style/reset/button.scss

@@ -0,0 +1,187 @@
+.e-btn{
+	box-shadow: none !important;
+}
+.e-btn:not(.e-lib):not(.e-icon-btn) {
+  font-family: var(--rs-font-family);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 6px;
+  font-style: normal;
+  border: 1px solid #adb5bd !important;
+  background: transparent !important;
+  color: var(--rs-cancel-btn-color) !important;
+  height: 32px;
+  min-width: 80px;
+  padding: 0 8px;
+  font-size: 12px;
+  border-radius: 4px;
+  box-shadow: none !important;
+  line-height: normal;
+  &.small {
+    height: 26px;
+    min-width: 64px;
+    font-size: 12px;
+  }
+  &.large {
+    height: 40px;
+    min-width: 110px;
+    font-size: 15px;
+  }
+  &.extra-large {
+    height: 48px;
+    min-width: 112px;
+    font-size: 16px;
+  }
+  &:not([disabled]):hover,
+  &:not([disabled]):active,
+  &:not([disabled]):focus {
+    border-color: #6c7c90 !important;
+    background: #fff !important;
+    color: var(--rs-cancel-btn-color) !important;
+  }
+  &[disabled] {
+    opacity: 0.4;
+    color: var(--rs-cancel-btn-color) !important;
+    border: 1px solid #adb5bd !important;
+    background-color: #fff !important;
+  }
+  &.e-primary {
+    color: #fff !important;
+    border-color: var(--rs-primary-btn-bg) !important;
+    background: var(--rs-primary-btn-bg) !important;
+    font-weight: 700;
+    &:not([disabled]):hover,
+    &:not([disabled]):active,
+    &:not([disabled]):focus {
+      border-color: var(--rs-primary-btn-hover-bg) !important;
+      background: var(--rs-primary-btn-hover-bg) !important;
+      color: #fff !important;
+    }
+    &[disabled] {
+      color: #fff !important;
+      background: var(--rs-primary-btn-bg) !important;
+      border-color: var(--rs-primary-btn-bg) !important;
+    }
+  }
+  &.text {
+    border-color: transparent !important;
+    &:not([disabled]):hover,
+    &:not([disabled]):active,
+    &:not([disabled]):focus {
+      border-color: transparent !important;
+      background: rgba(31, 123, 255, 0.04) !important;
+      color: #1364b3 !important;
+    }
+  }
+}
+
+.e-dropdown-btn[ejs-dropdownbutton] {
+  font-family: var(--rs-font-family);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 6px;
+  font-style: normal;
+  background: transparent !important;
+  color: var(--rs-cancel-btn-color) !important;
+  border-color: transparent !important;
+  height: 32px;
+  min-width: 80px;
+  padding: 0 10px;
+  font-size: 12px;
+  border-radius: 4px;
+  box-shadow: none !important;
+  line-height: normal;
+  &.e-active,&:hover {
+    border-color: transparent !important;
+    background: rgba(31, 123, 255, 0.04) !important;
+    color: #1364b3 !important;
+  }
+  .e-btn-icon {
+    padding: 0 !important;
+    &::before {
+      content: "" !important;
+      display: block;
+      width: 16px;
+      height: 16px;
+      background-image: url("/assets/img/dropdown-arrow.svg");
+      background-size: cover;
+      background-position: center;
+    }
+  }
+}
+
+.e-dropdown-popup {
+  border-radius: 10px;
+  background: #fff;
+  padding: 8px;
+  box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.25);
+  ul {
+    border: 0;
+    padding: 0;
+    .e-item {
+      height: 28px;
+      padding: 4px 8px;
+      color: #44566c;
+      font-size: 12px;
+      font-weight: 400;
+      line-height: 16px;
+      align-items: center;
+      &:hover,
+      &:active {
+        border-radius: 4px;
+        background: rgba(31, 123, 255, 0.04);
+        color: #44566c;
+      }
+    }
+  }
+}
+
+ejs-splitbutton.e-split-btn-wrapper {
+  &.e-splitbtn-disabled{
+    opacity: 0.4;
+    color: var(--rs-cancel-btn-color) !important;
+    border:0 !important;
+    background-color: #fff !important;
+  }
+  .e-btn {
+    color: #fff !important;
+    border-color: var(--rs-primary-btn-bg) !important;
+    background: var(--rs-primary-btn-bg) !important;
+    font-weight: 400;
+    font-size: 12px;
+    min-width: 60px;
+    &:not([disabled]):hover,
+    &:not([disabled]):active,
+    &:not([disabled]):focus {
+      border-color: var(--rs-primary-btn-hover-bg) !important;
+      background: var(--rs-primary-btn-hover-bg) !important;
+      border-right-color: rgba(255, 255, 255, 0.2) !important;
+      color: #fff !important;
+    }
+    &.e-split-btn {
+      border-right-color: rgba(255, 255, 255, 0.2) !important;
+      &:disabled {
+        border-right-color: #ccc !important;
+      }
+    }
+    &.e-icon-btn {
+      min-width: auto;
+      padding: 4px 6px !important;
+      box-shadow: none;
+      .e-btn-icon {
+        font-size: 16px;
+        &::before {
+          background-image: url("/assets/img/split-button-arrow.svg");
+          content: "" !important;
+          display: block;
+          width: 16px;
+          height: 16px;
+          background-size: cover;
+          background-position: center;
+        }
+      }
+    }
+  }
+}

package/src/assets/style/reset/checkbox.scss

@@ -0,0 +1,33 @@
+.e-checkbox-wrapper {
+  .e-label {
+    color: var(--rs-label-color);
+    font-family: var(--rs-font-family);
+    font-size: var(--rs-font-size);
+    font-weight: 400;
+    line-height: 14px;
+  }
+  .e-checkbox-wrapper.e-checkbox-disabled {
+    .e-icons {
+      border-color: rgba(209, 209, 209, 0.5);
+      background-color: rgba(234, 237, 240, 0.35);
+    }
+  }
+  .e-icons {
+    box-shadow: none !important;
+    &.e-check {
+      background-color: var(--rs-active-color) !important;
+      border-color: var(--rs-active-color) !important;
+      &::before {
+        content: "" !important;
+        display: block;
+        width: 10px;
+        height: 8px;
+        background-image: url("/assets/img/checked-vector.svg");
+        background-size: cover;
+        background-position: center;
+        background-color: transparent;
+        margin: 2px auto;
+      }
+    }
+  }
+}