@acorex/styles 18.12.27 → 18.12.29

package/src/shared/_general-button.scss

@@ -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-input-surface-fore), 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-input-surface-fore), 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

@@ -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

@@ -1,199 +1,199 @@
-@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;
+    }
+  }
+}