npm - @acorex/styles - Versions diffs - 7.23.2 → 7.23.3 - Mend

@acorex/styles 7.23.2 → 7.23.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (32) hide show

package/icons/fontawesome/fontawesome.scss +68 -68
package/icons/index.scss +207 -207
package/icons/material/material.scss +73 -73
package/index.css +2623 -0
package/index.min.css +1 -0
package/index.scss +9 -9
package/package.json +1 -1
package/src/base/_preflight.scss +417 -417
package/src/base/index.scss +13 -13
package/src/mixins/_look.scss +84 -84
package/src/mixins/_media.scss +27 -27
package/src/mixins/_util.scss +19 -19
package/src/mixins/index.scss +3 -3
package/src/shared/_actionsheet.scss +23 -23
package/src/shared/_check-box.scss +59 -59
package/src/shared/_color-look.scss +696 -696
package/src/shared/_drop-down.scss +76 -76
package/src/shared/_editor-container.scss +257 -257
package/src/shared/_general-button.scss +87 -87
package/src/shared/_inputs.scss +16 -16
package/src/shared/_list.scss +211 -211
package/src/shared/_radio.scss +56 -56
package/src/shared/_table.scss +149 -149
package/src/shared/_utils.scss +75 -75
package/src/shared/index.scss +11 -11
package/src/utility/index.scss +24 -24
package/src/variables/_colors.scss +2 -2
package/src/variables/_degrees.scss +1 -1
package/src/variables/index.scss +2 -2
package/tailwind-base.js +235 -235
package/themes/default.css +1 -0
package/themes/default.scss +141 -141

package/src/shared/_general-button.scss CHANGED Viewed

@@ -1,87 +1,87 @@
-.ax-general-button {
-  // @apply ax-inline-flex ax-h-default ax-cursor-pointer ax-items-center ax-justify-center ax-rounded-default ax-px-4 ax-text-sm ax-text-default/75;
-  display: inline-flex;
-  height: var(--ax-size-default);
-  cursor: pointer;
-  align-items: center;
-  justify-content: center;
-  border-radius: var(--ax-rounded-border-default);
-  padding-left: 1rem /* 16px */;
-  padding-right: 1rem /* 16px */;
-  font-size: 0.875rem /* 14px */;
-  line-height: 1.25rem /* 20px */;
-  color: rgb(var(--ax-color-text-default), 0.75);
-  &:hover {
-    &:not(&:disabled, .ax-state-disabled) {
-      // @apply ax-text-primary-500;
-      color: rgba(var(--ax-color-primary-500), var(--tw-text-opacity));
-    }
-  }
-  &:focus,
-  &:focus-visible {
-    &:not(&:disabled, .ax-state-disabled) {
-      // @apply ax-text-primary-700;
-      color: rgba(var(--ax-color-primary-700), var(--tw-text-opacity));
-    }
-  }
-  &:active {
-    &:not(&:disabled, .ax-state-disabled) {
-      // @apply ax-text-primary-300;
-      color: rgba(var(--ax-color-primary-300), var(--tw-text-opacity));
-    }
-  }
-  &.ax-button-icon {
-    // @apply ax-px-2 ax-text-lg;
-    padding-left: 0.5rem /* 8px */;
-    padding-right: 0.5rem /* 8px */;
-    > button {
-      // @apply ax-flex;
-      display: flex;
-    }
-  }
-  &.ax-button-rounded {
-    // @apply ax-rounded-default;
-    border-radius: var(--ax-rounded-border-default);
-  }
-  &:disabled,
-  &.ax-state-disabled {
-    // @apply ax-cursor-not-allowed ax-opacity-50;
-    cursor: not-allowed;
-    opacity: 0.5;
-  }
-}
-.ax-clear-button {
-  // @apply ax-inline-flex ax-h-default ax-items-center ax-justify-center ax-px-3 ax-text-base ax-leading-none ax-text-default/75;
-  display: inline-flex;
-  height: var(--ax-size-default);
-  align-items: center;
-  justify-content: center;
-  margin-left: 0.25rem;
-  margin-right: 0.25rem;
-  font-size: 1rem /* 16px */;
-  line-height: 1.5rem /* 24px */;
-  line-height: 1;
-  color: rgb(var(--ax-color-text-default), 0.75);
-  > button {
-    // @apply ax-flex;
-    display: flex;
-  }
-  &:hover {
-    &:not(&:disabled, .ax-state-disabled) {
-      // @apply ax-text-default/50;
-      color: rgb(var(--ax-color-text-default), 0.5);
-    }
-  }
-  &:focus,
-  &:focus-visible {
-    &:not(&:disabled, .ax-state-disabled) {
-      // @apply ax-text-default;
-      color: rgb(var(--ax-color-text-default));
-    }
-  }
-}
+.ax-general-button {
+  // @apply ax-inline-flex ax-h-default ax-cursor-pointer ax-items-center ax-justify-center ax-rounded-default ax-px-4 ax-text-sm ax-text-default/75;
+  display: inline-flex;
+  height: var(--ax-size-default);
+  cursor: pointer;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--ax-rounded-border-default);
+  padding-left: 1rem /* 16px */;
+  padding-right: 1rem /* 16px */;
+  font-size: 0.875rem /* 14px */;
+  line-height: 1.25rem /* 20px */;
+  color: rgb(var(--ax-color-text-default), 0.75);
+  &:hover {
+    &:not(&:disabled, .ax-state-disabled) {
+      // @apply ax-text-primary-500;
+      color: rgba(var(--ax-color-primary-500), var(--tw-text-opacity));
+    }
+  }
+  &:focus,
+  &:focus-visible {
+    &:not(&:disabled, .ax-state-disabled) {
+      // @apply ax-text-primary-700;
+      color: rgba(var(--ax-color-primary-700), var(--tw-text-opacity));
+    }
+  }
+  &:active {
+    &:not(&:disabled, .ax-state-disabled) {
+      // @apply ax-text-primary-300;
+      color: rgba(var(--ax-color-primary-300), var(--tw-text-opacity));
+    }
+  }
+  &.ax-button-icon {
+    // @apply ax-px-2 ax-text-lg;
+    padding-left: 0.5rem /* 8px */;
+    padding-right: 0.5rem /* 8px */;
+    > button {
+      // @apply ax-flex;
+      display: flex;
+    }
+  }
+  &.ax-button-rounded {
+    // @apply ax-rounded-default;
+    border-radius: var(--ax-rounded-border-default);
+  }
+  &:disabled,
+  &.ax-state-disabled {
+    // @apply ax-cursor-not-allowed ax-opacity-50;
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+}
+.ax-clear-button {
+  // @apply ax-inline-flex ax-h-default ax-items-center ax-justify-center ax-px-3 ax-text-base ax-leading-none ax-text-default/75;
+  display: inline-flex;
+  height: var(--ax-size-default);
+  align-items: center;
+  justify-content: center;
+  margin-left: 0.25rem;
+  margin-right: 0.25rem;
+  font-size: 1rem /* 16px */;
+  line-height: 1.5rem /* 24px */;
+  line-height: 1;
+  color: rgb(var(--ax-color-text-default), 0.75);
+  > button {
+    // @apply ax-flex;
+    display: flex;
+  }
+  &:hover {
+    &:not(&:disabled, .ax-state-disabled) {
+      // @apply ax-text-default/50;
+      color: rgb(var(--ax-color-text-default), 0.5);
+    }
+  }
+  &:focus,
+  &:focus-visible {
+    &:not(&:disabled, .ax-state-disabled) {
+      // @apply ax-text-default;
+      color: rgb(var(--ax-color-text-default));
+    }
+  }
+}

package/src/shared/_inputs.scss CHANGED Viewed

@@ -1,16 +1,16 @@
-.ax-input {
-  // @apply ax-p-0 ax-outline-0;
-  font-size: inherit;
-  padding: 0px;
-  outline-width: 0px;
-  &:focus {
-    // @apply ax-outline-transparent;
-    outline-color: transparent;
-  }
-  // &.ax-state-disabled {
-  //   // @apply ax-cursor-not-allowed ax-opacity-50;
-  //   cursor: not-allowed;
-  //   opacity: 0.5;
-  // }
-}
+.ax-input {
+  // @apply ax-p-0 ax-outline-0;
+  font-size: inherit;
+  padding: 0px;
+  outline-width: 0px;
+  &:focus {
+    // @apply ax-outline-transparent;
+    outline-color: transparent;
+  }
+  // &.ax-state-disabled {
+  //   // @apply ax-cursor-not-allowed ax-opacity-50;
+  //   cursor: not-allowed;
+  //   opacity: 0.5;
+  // }
+}

package/src/shared/_list.scss CHANGED Viewed

@@ -1,211 +1,211 @@
-@import '../mixins/index.scss';
-@include darkMode() {
-  .ax-list-item {
-    &.ax-state-selected {
-      // @apply ax-bg-primary-800 ax-text-primary-fore #{!important};
-      background-color: rgba(var(--ax-color-primary-800)) !important;
-      color: rgba(var(--ax-color-primary-fore)) !important;
-      .ax-selected-icon {
-        // @apply ax-text-primary-fore;
-        color: rgba(var(--ax-color-primary-fore));
-      }
-    }
-  }
-}
-.ax-list {
-  // @apply ax-flex ax-h-full ax-flex-col ax-overflow-hidden ax-bg-surface ax-text-sm md:ax-max-h-80;
-  display: flex;
-  height: 100%;
-  flex-direction: column;
-  overflow: hidden;
-  background-color: rgba(var(--ax-color-surface));
-  font-size: 0.875rem /* 14px */;
-  line-height: 1.25rem /* 20px */;
-  @media (min-width: 768px) {
-    max-height: 20rem /* 320px */;
-  }
-  ax-header,
-  ax-footer {
-    // @apply ax-flex ax-items-center ax-justify-between ax-border-default ax-bg-surface;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    border-color: rgba(
-      var(--ax-color-border-default),
-      var(--tw-border-opacity)
-    );
-    background-color: rgba(var(--ax-color-surface), var(--tw-bg-opacity));
-  }
-  ax-header {
-    // @apply ax-border-b ax-border-default ax-p-4 ax-text-base ax-font-medium md:ax-text-lg;
-    border-bottom-width: 1px;
-    border-color: rgba(
-      var(--ax-color-border-default),
-      var(--tw-border-opacity)
-    );
-    padding: 1rem /* 16px */;
-    font-size: 1rem /* 16px */;
-    line-height: 1.5rem /* 24px */;
-    font-weight: 500;
-    @media (min-width: 768px) {
-      font-size: 1.125rem /* 18px */;
-      line-height: 1.75rem /* 28px */;
-    }
-    ax-prefix,
-    ax-suffix {
-      // @apply ax-flex ax-flex-col ax-justify-items-start;
-      display: flex;
-      flex-direction: column;
-      justify-items: start;
-    }
-    ax-prefix {
-      // @apply ax-items-start;
-      align-items: flex-start;
-    }
-    ax-suffix {
-      // @apply ax-items-end;
-      align-items: flex-end;
-    }
-  }
-  ax-footer {
-    // @apply ax-border-t;
-    border-top-width: 1px;
-  }
-  .ax-content {
-    // @apply ax-flex-1 ax-overflow-y-auto ax-overflow-x-hidden;
-    flex: 1 1 0%;
-    overflow-y: auto;
-    overflow-x: hidden;
-    &.ax-list-items-container {
-      // @apply ax-h-full ax-overflow-y-auto ax-py-2;
-      height: 100%;
-      overflow-y: auto;
-      padding-top: 0.5rem /* 8px */;
-      padding-bottom: 0.5rem /* 8px */;
-      &.ax-vertical {
-        // @apply ax-grid ax-grid-cols-1;
-        display: grid;
-        grid-template-columns: repeat(1, minmax(0, 1fr));
-        &.ax-divide {
-          // @apply ax-border-y;
-          border-top-width: 1px;
-          border-bottom-width: 1px;
-        }
-      }
-      &.ax-default {
-        // @apply ax-cursor-pointer;
-        cursor: pointer;
-        .ax-list-item-group {
-          & > span {
-            // @apply ax-flex ax-items-center ax-p-3 ax-font-medium;
-            display: flex;
-            align-items: center;
-            padding: 0.75rem /* 12px */;
-            font-weight: 500;
-          }
-          & > ul {
-            // @apply ax-px-3;
-            padding-left: 0.75rem /* 12px */;
-            padding-right: 0.75rem /* 12px */;
-          }
-          .ax-list-item {
-            // @apply ax-mb-1 ax-rounded-default;
-            margin-bottom: 0.25rem /* 4px */;
-            border-radius: var(--ax-rounded-border-default);
-          }
-        }
-        .ax-list-item {
-          // @apply ax-relative ax-flex ax-h-default ax-select-none ax-items-center ax-justify-between ax-pe-4 ax-ps-3 ax-text-base;
-          position: relative;
-          display: flex;
-          height: var(--ax-size-default);
-          user-select: none;
-          align-items: center;
-          justify-content: space-between;
-          padding-inline-end: 1rem /* 16px */;
-          padding-inline-start: 0.75rem /* 12px */;
-          font-size: 1rem /* 16px */;
-          line-height: 1.5rem /* 24px */;
-          &:focus,
-          &:focus-visible {
-            // @apply ax-outline-2 ax-outline-offset-2;
-            outline-width: 2px;
-            outline-offset: 2px;
-          }
-          &.ax-state-checkbox {
-            .ax-checkbox-label {
-              // @apply ax-ms-2;
-              margin-inline-start: 0.5rem /* 8px */;
-            }
-          }
-          &.ax-state-selected {
-            // @apply ax-bg-primary-500 ax-text-primary-fore #{!important};
-            background-color: rgba(
-              var(--ax-color-primary-500),
-              var(--tw-bg-opacity)
-            ) !important;
-            color: rgba(
-              var(--ax-color-primary-fore),
-              var(--tw-text-opacity)
-            ) !important;
-            .ax-selected-icon {
-              // @apply ax-text-2xl ax-text-primary-500;
-              font-size: 1.5rem /* 24px */;
-              line-height: 2rem /* 32px */;
-              color: rgba(var(--ax-color-primary-500));
-            }
-          }
-          // &:not(.ax-check-box) {
-          //     &.ax-state-selected {
-          //     }
-          // }
-          &.ax-state-disabled {
-            // @apply ax-cursor-not-allowed ax-opacity-50;
-            cursor: not-allowed;
-            opacity: 0.5;
-          }
-          &:focus-visible,
-          &:hover {
-            // @apply ax-bg-on-surface;
-            background-color: rgba(var(--ax-color-on-surface));
-          }
-          &.ax-state-focus {
-            // @apply ax-bg-on-surface;
-            background-color: rgba(var(--ax-color-on-surface));
-          }
-        }
-      }
-      .ax-list-loading-container {
-        // @apply ax-flex ax-justify-center ax-p-2;
-        display: flex;
-        justify-content: center;
-        padding: 0.5rem /* 8px */;
-      }
-    }
-  }
-  .ax-search-box-container {
-    // @apply ax-p-2;
-    padding: 0.5rem /* 8px */;
-    &.ax-state-hidden {
-      // @apply ax-hidden;
-      display: none;
-    }
-  }
-}
+@import '../mixins/index.scss';
+@include darkMode() {
+  .ax-list-item {
+    &.ax-state-selected {
+      // @apply ax-bg-primary-800 ax-text-primary-fore #{!important};
+      background-color: rgba(var(--ax-color-primary-800)) !important;
+      color: rgba(var(--ax-color-primary-fore)) !important;
+      .ax-selected-icon {
+        // @apply ax-text-primary-fore;
+        color: rgba(var(--ax-color-primary-fore));
+      }
+    }
+  }
+}
+.ax-list {
+  // @apply ax-flex ax-h-full ax-flex-col ax-overflow-hidden ax-bg-surface ax-text-sm md:ax-max-h-80;
+  display: flex;
+  height: 100%;
+  flex-direction: column;
+  overflow: hidden;
+  background-color: rgba(var(--ax-color-surface));
+  font-size: 0.875rem /* 14px */;
+  line-height: 1.25rem /* 20px */;
+  @media (min-width: 768px) {
+    max-height: 20rem /* 320px */;
+  }
+  ax-header,
+  ax-footer {
+    // @apply ax-flex ax-items-center ax-justify-between ax-border-default ax-bg-surface;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    border-color: rgba(
+      var(--ax-color-border-default),
+      var(--tw-border-opacity)
+    );
+    background-color: rgba(var(--ax-color-surface), var(--tw-bg-opacity));
+  }
+  ax-header {
+    // @apply ax-border-b ax-border-default ax-p-4 ax-text-base ax-font-medium md:ax-text-lg;
+    border-bottom-width: 1px;
+    border-color: rgba(
+      var(--ax-color-border-default),
+      var(--tw-border-opacity)
+    );
+    padding: 1rem /* 16px */;
+    font-size: 1rem /* 16px */;
+    line-height: 1.5rem /* 24px */;
+    font-weight: 500;
+    @media (min-width: 768px) {
+      font-size: 1.125rem /* 18px */;
+      line-height: 1.75rem /* 28px */;
+    }
+    ax-prefix,
+    ax-suffix {
+      // @apply ax-flex ax-flex-col ax-justify-items-start;
+      display: flex;
+      flex-direction: column;
+      justify-items: start;
+    }
+    ax-prefix {
+      // @apply ax-items-start;
+      align-items: flex-start;
+    }
+    ax-suffix {
+      // @apply ax-items-end;
+      align-items: flex-end;
+    }
+  }
+  ax-footer {
+    // @apply ax-border-t;
+    border-top-width: 1px;
+  }
+  .ax-content {
+    // @apply ax-flex-1 ax-overflow-y-auto ax-overflow-x-hidden;
+    flex: 1 1 0%;
+    overflow-y: auto;
+    overflow-x: hidden;
+    &.ax-list-items-container {
+      // @apply ax-h-full ax-overflow-y-auto ax-py-2;
+      height: 100%;
+      overflow-y: auto;
+      padding-top: 0.5rem /* 8px */;
+      padding-bottom: 0.5rem /* 8px */;
+      &.ax-vertical {
+        // @apply ax-grid ax-grid-cols-1;
+        display: grid;
+        grid-template-columns: repeat(1, minmax(0, 1fr));
+        &.ax-divide {
+          // @apply ax-border-y;
+          border-top-width: 1px;
+          border-bottom-width: 1px;
+        }
+      }
+      &.ax-default {
+        // @apply ax-cursor-pointer;
+        cursor: pointer;
+        .ax-list-item-group {
+          & > span {
+            // @apply ax-flex ax-items-center ax-p-3 ax-font-medium;
+            display: flex;
+            align-items: center;
+            padding: 0.75rem /* 12px */;
+            font-weight: 500;
+          }
+          & > ul {
+            // @apply ax-px-3;
+            padding-left: 0.75rem /* 12px */;
+            padding-right: 0.75rem /* 12px */;
+          }
+          .ax-list-item {
+            // @apply ax-mb-1 ax-rounded-default;
+            margin-bottom: 0.25rem /* 4px */;
+            border-radius: var(--ax-rounded-border-default);
+          }
+        }
+        .ax-list-item {
+          // @apply ax-relative ax-flex ax-h-default ax-select-none ax-items-center ax-justify-between ax-pe-4 ax-ps-3 ax-text-base;
+          position: relative;
+          display: flex;
+          height: var(--ax-size-default);
+          user-select: none;
+          align-items: center;
+          justify-content: space-between;
+          padding-inline-end: 1rem /* 16px */;
+          padding-inline-start: 0.75rem /* 12px */;
+          font-size: 1rem /* 16px */;
+          line-height: 1.5rem /* 24px */;
+          &:focus,
+          &:focus-visible {
+            // @apply ax-outline-2 ax-outline-offset-2;
+            outline-width: 2px;
+            outline-offset: 2px;
+          }
+          &.ax-state-checkbox {
+            .ax-checkbox-label {
+              // @apply ax-ms-2;
+              margin-inline-start: 0.5rem /* 8px */;
+            }
+          }
+          &.ax-state-selected {
+            // @apply ax-bg-primary-500 ax-text-primary-fore #{!important};
+            background-color: rgba(
+              var(--ax-color-primary-500),
+              var(--tw-bg-opacity)
+            ) !important;
+            color: rgba(
+              var(--ax-color-primary-fore),
+              var(--tw-text-opacity)
+            ) !important;
+            .ax-selected-icon {
+              // @apply ax-text-2xl ax-text-primary-500;
+              font-size: 1.5rem /* 24px */;
+              line-height: 2rem /* 32px */;
+              color: rgba(var(--ax-color-primary-500));
+            }
+          }
+          // &:not(.ax-check-box) {
+          //     &.ax-state-selected {
+          //     }
+          // }
+          &.ax-state-disabled {
+            // @apply ax-cursor-not-allowed ax-opacity-50;
+            cursor: not-allowed;
+            opacity: 0.5;
+          }
+          &:focus-visible,
+          &:hover {
+            // @apply ax-bg-on-surface;
+            background-color: rgba(var(--ax-color-on-surface));
+          }
+          &.ax-state-focus {
+            // @apply ax-bg-on-surface;
+            background-color: rgba(var(--ax-color-on-surface));
+          }
+        }
+      }
+      .ax-list-loading-container {
+        // @apply ax-flex ax-justify-center ax-p-2;
+        display: flex;
+        justify-content: center;
+        padding: 0.5rem /* 8px */;
+      }
+    }
+  }
+  .ax-search-box-container {
+    // @apply ax-p-2;
+    padding: 0.5rem /* 8px */;
+    &.ax-state-hidden {
+      // @apply ax-hidden;
+      display: none;
+    }
+  }
+}