@acorex/styles 18.12.29 → 18.12.30

package/src/shared/_radio.scss

@@ -1,57 +1,57 @@
-@import '../mixins/index.scss';
-
-.ax-radio {
-  // @apply ax-m-0 ax-h-4 ax-w-4 ax-cursor-pointer ax-appearance-none ax-rounded ax-border ax-border-default ax-bg-input-surface ax-align-middle ax-outline-none;
-  margin: 0px;
-  height: 1rem /* 16px */;
-  min-height: 1rem /* 16px */;
-  min-width: 1rem /* 16px */;
-  width: 1rem /* 16px */;
-  cursor: pointer;
-  appearance: none;
-  border-radius: 9999px /* 4px */;
-  border-width: 1px;
-  border-color: rgba(var(--ax-color-border-default));
-  background-color: rgba(var(--ax-color-input-surface));
-  vertical-align: middle;
-  outline: 2px solid transparent;
-  outline-offset: 2px;
-
-  &:checked {
-    // @apply ax-border-primary-500 ax-bg-primary-500 #{!important};
-    border-color: rgba(var(--ax-color-primary-500)) !important;
-    background-color: rgba(var(--ax-color-primary-500)) !important;
-    background-size: contain;
-    background-repeat: no-repeat;
-
-    // @apply ax-bg-contain ax-bg-no-repeat;
-  }
-
-  &:checked {
-    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
-  }
-
-  &:focus-visible,
-  &:focus {
-    // @apply ax-ring-2 ax-ring-primary-500 ax-ring-offset-2 ax-ring-offset-surface;
-    box-shadow:
-      0px 0px 0px 2px rgba(var(--ax-color-surface)),
-      0px 0px 0px 4px rgba(var(--ax-color-primary-500));
-  }
-
-  &:disabled {
-    // @apply ax-cursor-not-allowed ax-opacity-50;
-    cursor: not-allowed;
-    opacity: 0.5;
-  }
-}
-
-// @include darkMode() {
-//   .ax-checkbox {
-//     &:checked {
-//       border-color: rgba(var(--ax-color-primary-200)) !important;
-//       background-color: rgba(var(--ax-color-primary-200)) !important;
-//       background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='black' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
-//     }
-//   }
-// }
+@import '../mixins/index.scss';
+
+.ax-radio {
+  // @apply ax-m-0 ax-h-4 ax-w-4 ax-cursor-pointer ax-appearance-none ax-rounded ax-border ax-border-default ax-bg-input-surface ax-align-middle ax-outline-none;
+  margin: 0px;
+  height: 1rem /* 16px */;
+  min-height: 1rem /* 16px */;
+  min-width: 1rem /* 16px */;
+  width: 1rem /* 16px */;
+  cursor: pointer;
+  appearance: none;
+  border-radius: 9999px /* 4px */;
+  border-width: 1px;
+  border-color: rgba(var(--ax-color-border-default));
+  background-color: rgba(var(--ax-color-input-surface));
+  vertical-align: middle;
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+
+  &:checked {
+    // @apply ax-border-primary-500 ax-bg-primary-500 #{!important};
+    border-color: rgba(var(--ax-color-primary-500)) !important;
+    background-color: rgba(var(--ax-color-primary-500)) !important;
+    background-size: contain;
+    background-repeat: no-repeat;
+
+    // @apply ax-bg-contain ax-bg-no-repeat;
+  }
+
+  &:checked {
+    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
+  }
+
+  &:focus-visible,
+  &:focus {
+    // @apply ax-ring-2 ax-ring-primary-500 ax-ring-offset-2 ax-ring-offset-surface;
+    box-shadow:
+      0px 0px 0px 2px rgba(var(--ax-color-surface)),
+      0px 0px 0px 4px rgba(var(--ax-color-primary-500));
+  }
+
+  &:disabled {
+    // @apply ax-cursor-not-allowed ax-opacity-50;
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+}
+
+// @include darkMode() {
+//   .ax-checkbox {
+//     &:checked {
+//       border-color: rgba(var(--ax-color-primary-200)) !important;
+//       background-color: rgba(var(--ax-color-primary-200)) !important;
+//       background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='black' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
+//     }
+//   }
+// }

package/src/shared/_table.scss

@@ -1,149 +1,149 @@
-@import '../mixins/index.scss';
-@include darkMode() {
-  .ax-table {
-    thead {
-      // @apply ax-bg-on-surface;
-      background-color: rgba(var(--ax-color-on-surface));
-    }
-  }
-}
-.ax-table {
-  // @apply ax-w-full ax-border-collapse ax-border-spacing-0 ax-overflow-hidden ax-rounded-default ax-border ax-border-default ax-text-sm;
-  width: 100%;
-  border-collapse: collapse;
-  border-spacing: 0;
-  overflow: hidden;
-  border-radius: var(--ax-rounded-border-default);
-  border-width: 1px;
-  border-color: rgba(var(--ax-color-border-default));
-  font-size: 0.875rem /* 14px */;
-  line-height: 1.25rem /* 20px */;
-  td {
-    // @apply ax-border-b ax-border-default ax-px-4 ax-py-3;
-    border-bottom-width: 1px;
-    border-color: rgba(var(--ax-color-border-default));
-    padding-left: 1rem /* 16px */;
-    padding-right: 1rem /* 16px */;
-    padding-top: 0.75rem /* 12px */;
-    padding-bottom: 0.75rem /* 12px */;
-  }
-  thead {
-    // @apply ax-border-b ax-border-default ax-bg-on-surface;
-    border-bottom-width: 1px;
-    border-color: rgba(var(--ax-color-border-default));
-    background-color: rgba(var(--ax-color-on-surface));
-
-    th {
-      // @apply ax-px-4 ax-py-3.5 ax-text-start ax-font-medium ax-uppercase;
-      padding-left: 1rem /* 16px */;
-      padding-right: 1rem /* 16px */;
-      padding-top: 0.875rem /* 14px */;
-      padding-bottom: 0.875rem /* 14px */;
-      text-align: start;
-      font-weight: 500;
-      text-transform: uppercase;
-    }
-  }
-  &.ax-table-alternate {
-    tbody {
-      tr {
-        &:nth-child(even) {
-          // @apply ax-bg-on-surface;
-          background-color: rgba(var(--ax-color-on-surface));
-        }
-      }
-    }
-  }
-  &.ax-table-bordered {
-    thead {
-      th {
-        // @apply ax-border-t-0 #{!important};
-        border-top-width: 0px !important;
-      }
-    }
-    tbody {
-      tr {
-        &:last-child {
-          td {
-            // @apply ax-border-b-0 #{!important};
-            border-bottom-width: 0px !important;
-          }
-        }
-        td {
-          &:last-child {
-            // @apply ax-border-b-0 #{!important};
-            border-bottom-width: 0px !important;
-          }
-        }
-      }
-    }
-
-    td,
-    th {
-      // @apply ax-border ax-border-default;
-      border-width: 1px;
-      border-color: rgba(var(--ax-color-border-default));
-
-      &:first-child {
-        // @apply ax-border-s-0;
-        border-inline-start-width: 0px;
-      }
-      &:last-child {
-        // @apply ax-border-e-0;
-        border-inline-end-width: 0px;
-      }
-    }
-  }
-  @media screen and (max-width: 601px) {
-    &.ax-table-responsive {
-      // @apply ax-block ax-break-words ax-border-0;
-      display: block;
-      overflow-wrap: break-word;
-      border-width: 0px;
-
-      thead {
-        // @apply ax-absolute -ax-start-full -ax-top-full;
-        position: absolute;
-        inset-inline-start: -100%;
-        top: -100%;
-      }
-
-      td {
-        // @apply ax-clear-both ax-box-border ax-block ax-w-full ax-px-2.5 ax-py-1.5;
-
-        float: inline-start;
-        clear: both;
-        box-sizing: border-box;
-        display: block;
-        width: 100%;
-        padding-left: 0.625rem /* 10px */;
-        padding-right: 0.625rem /* 10px */;
-        padding-top: 0.375rem /* 6px */;
-        padding-bottom: 0.375rem /* 6px */;
-        &:last-child {
-          // @apply ax-border-0;
-          border-width: 0px;
-        }
-        &:before {
-          // @apply ax-block ax-font-bold;
-
-          content: attr(data-label);
-          display: block;
-          font-weight: 700;
-        }
-      }
-      tr {
-        // @apply ax-border ax-border-default;
-        border-width: 1px;
-        border-color: rgba(var(--ax-color-border-default));
-      }
-      tr,
-      tbody {
-        // @apply ax-mb-2.5 ax-block ax-w-full;
-        float: inline-start;
-        margin-bottom: 0.625rem /* 10px */;
-        width: 100%;
-      }
-    }
-  }
-}
+@import '../mixins/index.scss';
+@include darkMode() {
+  .ax-table {
+    thead {
+      // @apply ax-bg-on-surface;
+      background-color: rgba(var(--ax-color-on-surface));
+    }
+  }
+}
+.ax-table {
+  // @apply ax-w-full ax-border-collapse ax-border-spacing-0 ax-overflow-hidden ax-rounded-default ax-border ax-border-default ax-text-sm;
+  width: 100%;
+  border-collapse: collapse;
+  border-spacing: 0;
+  overflow: hidden;
+  border-radius: var(--ax-rounded-border-default);
+  border-width: 1px;
+  border-color: rgba(var(--ax-color-border-default));
+  font-size: 0.875rem /* 14px */;
+  line-height: 1.25rem /* 20px */;
+  td {
+    // @apply ax-border-b ax-border-default ax-px-4 ax-py-3;
+    border-bottom-width: 1px;
+    border-color: rgba(var(--ax-color-border-default));
+    padding-left: 1rem /* 16px */;
+    padding-right: 1rem /* 16px */;
+    padding-top: 0.75rem /* 12px */;
+    padding-bottom: 0.75rem /* 12px */;
+  }
+  thead {
+    // @apply ax-border-b ax-border-default ax-bg-on-surface;
+    border-bottom-width: 1px;
+    border-color: rgba(var(--ax-color-border-default));
+    background-color: rgba(var(--ax-color-on-surface));
+
+    th {
+      // @apply ax-px-4 ax-py-3.5 ax-text-start ax-font-medium ax-uppercase;
+      padding-left: 1rem /* 16px */;
+      padding-right: 1rem /* 16px */;
+      padding-top: 0.875rem /* 14px */;
+      padding-bottom: 0.875rem /* 14px */;
+      text-align: start;
+      font-weight: 500;
+      text-transform: uppercase;
+    }
+  }
+  &.ax-table-alternate {
+    tbody {
+      tr {
+        &:nth-child(even) {
+          // @apply ax-bg-on-surface;
+          background-color: rgba(var(--ax-color-on-surface));
+        }
+      }
+    }
+  }
+  &.ax-table-bordered {
+    thead {
+      th {
+        // @apply ax-border-t-0 #{!important};
+        border-top-width: 0px !important;
+      }
+    }
+    tbody {
+      tr {
+        &:last-child {
+          td {
+            // @apply ax-border-b-0 #{!important};
+            border-bottom-width: 0px !important;
+          }
+        }
+        td {
+          &:last-child {
+            // @apply ax-border-b-0 #{!important};
+            border-bottom-width: 0px !important;
+          }
+        }
+      }
+    }
+
+    td,
+    th {
+      // @apply ax-border ax-border-default;
+      border-width: 1px;
+      border-color: rgba(var(--ax-color-border-default));
+
+      &:first-child {
+        // @apply ax-border-s-0;
+        border-inline-start-width: 0px;
+      }
+      &:last-child {
+        // @apply ax-border-e-0;
+        border-inline-end-width: 0px;
+      }
+    }
+  }
+  @media screen and (max-width: 601px) {
+    &.ax-table-responsive {
+      // @apply ax-block ax-break-words ax-border-0;
+      display: block;
+      overflow-wrap: break-word;
+      border-width: 0px;
+
+      thead {
+        // @apply ax-absolute -ax-start-full -ax-top-full;
+        position: absolute;
+        inset-inline-start: -100%;
+        top: -100%;
+      }
+
+      td {
+        // @apply ax-clear-both ax-box-border ax-block ax-w-full ax-px-2.5 ax-py-1.5;
+
+        float: inline-start;
+        clear: both;
+        box-sizing: border-box;
+        display: block;
+        width: 100%;
+        padding-left: 0.625rem /* 10px */;
+        padding-right: 0.625rem /* 10px */;
+        padding-top: 0.375rem /* 6px */;
+        padding-bottom: 0.375rem /* 6px */;
+        &:last-child {
+          // @apply ax-border-0;
+          border-width: 0px;
+        }
+        &:before {
+          // @apply ax-block ax-font-bold;
+
+          content: attr(data-label);
+          display: block;
+          font-weight: 700;
+        }
+      }
+      tr {
+        // @apply ax-border ax-border-default;
+        border-width: 1px;
+        border-color: rgba(var(--ax-color-border-default));
+      }
+      tr,
+      tbody {
+        // @apply ax-mb-2.5 ax-block ax-w-full;
+        float: inline-start;
+        margin-bottom: 0.625rem /* 10px */;
+        width: 100%;
+      }
+    }
+  }
+}

package/src/shared/_utils.scss

@@ -1,84 +1,84 @@
-@import '../variables/index.scss';
-
-[class*=' ax-icon-'],
-[class^='ax-icon-'] {
-  vertical-align: middle;
-}
-
-.ax-bold {
-  font-weight: bold !important;
-}
-
-.ax-fieldset {
-  // @apply ax-rounded-default ax-border ax-border-default ax-p-3;
-  border-radius: var(--ax-rounded-border-default);
-  border-width: 1px;
-  border-color: rgba(var(--ax-color-border-default));
-  padding: 0.75rem /* 12px */;
-
-  legend {
-    // @apply ax-px-1 ax-text-sm;
-    padding-left: 0.25rem /* 4px */;
-    padding-right: 0.25rem /* 4px */;
-    font-size: 0.875rem /* 14px */;
-    line-height: 1.25rem /* 20px */;
-  }
-}
-
-.ax-card {
-  // @apply ax-rounded-default ax-border ax-border-default ax-bg-surface;
-  border-radius: var(--ax-rounded-border-default);
-  border-width: 1px;
-  border-color: rgba(var(--ax-color-border-default));
-  background-color: rgba(var(--ax-color-surface));
-}
-
-.ax-drop-zone {
-  > input {
-    // @apply ax-absolute ax-h-full ax-w-full ax-cursor-pointer ax-opacity-0;
-    position: absolute;
-    height: 100%;
-    width: 100%;
-    cursor: pointer;
-    opacity: 0;
-  }
-}
-.ax-uploader-overlay-state {
-  // @apply ax-pointer-events-none ax-absolute ax-start-0 ax-top-0 ax-z-10 ax-flex ax-h-full ax-w-full ax-cursor-pointer ax-flex-col ax-items-center ax-justify-center ax-gap-2 ax-bg-primary-200/75 ax-text-sm ax-text-primary-fore-tint ax-outline-dashed ax-outline-2 -ax-outline-offset-4 ax-transition-all;
-  border-radius: inherit;
-  pointer-events: none;
-  position: absolute;
-  inset-inline-start: 0px;
-  top: 0px;
-  z-index: 10;
-  display: flex;
-  height: 100%;
-  width: 100%;
-  cursor: pointer;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 0.5rem /* 8px */;
-  background-color: rgba(var(--ax-color-primary-200), 0.75);
-  font-size: 0.875rem /* 14px */;
-  line-height: 1.25rem /* 20px */;
-  color: rgba(var(--ax-color-primary-fore-tint));
-  outline-style: dashed;
-  outline-offset: -4px;
-  transition-property: all;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 150ms;
-}
-
-.ax-select-none,
-.ax-select-none * {
-  user-select: none !important;
-}
-@include darkMode() {
-  .ax-uploader-overlay-state {
-    // @apply ax-bg-primary-800/75 ax-text-primary-fore ax-outline-primary-fore;
-    background-color: rgba(var(--ax-color-primary-800), 0.75);
-    color: rgba(var(--ax-color-primary-fore));
-    outline-color: rgba(var(--ax-color-primary-fore));
-  }
-}
+@import '../variables/index.scss';
+
+[class*=' ax-icon-'],
+[class^='ax-icon-'] {
+  vertical-align: middle;
+}
+
+.ax-bold {
+  font-weight: bold !important;
+}
+
+.ax-fieldset {
+  // @apply ax-rounded-default ax-border ax-border-default ax-p-3;
+  border-radius: var(--ax-rounded-border-default);
+  border-width: 1px;
+  border-color: rgba(var(--ax-color-border-default));
+  padding: 0.75rem /* 12px */;
+
+  legend {
+    // @apply ax-px-1 ax-text-sm;
+    padding-left: 0.25rem /* 4px */;
+    padding-right: 0.25rem /* 4px */;
+    font-size: 0.875rem /* 14px */;
+    line-height: 1.25rem /* 20px */;
+  }
+}
+
+.ax-card {
+  // @apply ax-rounded-default ax-border ax-border-default ax-bg-surface;
+  border-radius: var(--ax-rounded-border-default);
+  border-width: 1px;
+  border-color: rgba(var(--ax-color-border-default));
+  background-color: rgba(var(--ax-color-surface));
+}
+
+.ax-drop-zone {
+  > input {
+    // @apply ax-absolute ax-h-full ax-w-full ax-cursor-pointer ax-opacity-0;
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    cursor: pointer;
+    opacity: 0;
+  }
+}
+.ax-uploader-overlay-state {
+  // @apply ax-pointer-events-none ax-absolute ax-start-0 ax-top-0 ax-z-10 ax-flex ax-h-full ax-w-full ax-cursor-pointer ax-flex-col ax-items-center ax-justify-center ax-gap-2 ax-bg-primary-200/75 ax-text-sm ax-text-primary-fore-tint ax-outline-dashed ax-outline-2 -ax-outline-offset-4 ax-transition-all;
+  border-radius: inherit;
+  pointer-events: none;
+  position: absolute;
+  inset-inline-start: 0px;
+  top: 0px;
+  z-index: 10;
+  display: flex;
+  height: 100%;
+  width: 100%;
+  cursor: pointer;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem /* 8px */;
+  background-color: rgba(var(--ax-color-primary-200), 0.75);
+  font-size: 0.875rem /* 14px */;
+  line-height: 1.25rem /* 20px */;
+  color: rgba(var(--ax-color-primary-fore-tint));
+  outline-style: dashed;
+  outline-offset: -4px;
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+.ax-select-none,
+.ax-select-none * {
+  user-select: none !important;
+}
+@include darkMode() {
+  .ax-uploader-overlay-state {
+    // @apply ax-bg-primary-800/75 ax-text-primary-fore ax-outline-primary-fore;
+    background-color: rgba(var(--ax-color-primary-800), 0.75);
+    color: rgba(var(--ax-color-primary-fore));
+    outline-color: rgba(var(--ax-color-primary-fore));
+  }
+}

package/src/shared/index.scss

@@ -1,12 +1,12 @@
-@import './action-item';
-@import './actionsheet';
-@import './check-box';
-@import './color-look';
-@import './drop-down';
-@import './editor-container';
-@import './general-button';
-@import './inputs';
-@import './list';
-@import './radio';
-@import './table';
-@import './utils';
+@import './action-item';
+@import './actionsheet';
+@import './check-box';
+@import './color-look';
+@import './drop-down';
+@import './editor-container';
+@import './general-button';
+@import './inputs';
+@import './list';
+@import './radio';
+@import './table';
+@import './utils';

package/src/utility/index.scss

@@ -1,24 +1,24 @@
-.ax-xs {
-  --ax-size-default: calc(var(--ax-size-base) - 0.75rem);
-}
-
-.ax-sm {
-  --ax-size-default: calc(var(--ax-size-base) - 0.5rem);
-}
-
-.ax-md {
-  --ax-size-default: var(--ax-size-base);
-}
-
-.ax-lg {
-  --ax-size-default: calc(var(--ax-size-base) + 0.5rem);
-}
-
-.ax-xl {
-  --ax-size-default: calc(var(--ax-size-base) + 1rem);
-}
-
-.ax-placeholder {
-  color: rgba(var(--ax-color-input-surface-fore), 0.5);
-  font-weight: 500;
-}
+.ax-xs {
+  --ax-size-default: calc(var(--ax-size-base) - 0.75rem);
+}
+
+.ax-sm {
+  --ax-size-default: calc(var(--ax-size-base) - 0.5rem);
+}
+
+.ax-md {
+  --ax-size-default: var(--ax-size-base);
+}
+
+.ax-lg {
+  --ax-size-default: calc(var(--ax-size-base) + 0.5rem);
+}
+
+.ax-xl {
+  --ax-size-default: calc(var(--ax-size-base) + 1rem);
+}
+
+.ax-placeholder {
+  color: rgba(var(--ax-color-input-surface-fore), 0.5);
+  font-weight: 500;
+}

package/src/variables/_colors.scss

@@ -1,2 +1,2 @@
-$color_names: 'primary', 'secondary', 'success', 'warning', 'danger', 'info';
-$look_names: 'solid', 'twotone', 'outline', 'blank', 'link';
+$color_names: 'primary', 'secondary', 'success', 'warning', 'danger', 'info';
+$look_names: 'solid', 'twotone', 'outline', 'blank', 'link';

package/src/variables/_degrees.scss

@@ -1 +1 @@
-$degrees: 45, 90, 130, 180;
+$degrees: 45, 90, 130, 180;

package/src/variables/index.scss

@@ -1,2 +1,2 @@
-@import './colors';
-@import './degrees';
+@import './colors';
+@import './degrees';