@acorex/styles 16.0.2 → 17.0.1

package/src/mixins/_look.scss

@@ -0,0 +1,83 @@
+@mixin solid-look() {
+  // @apply ax-rounded-default ax-border ax-border-default ax-bg-input-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-input-surface));
+
+  &:focus-within {
+    // @apply ax-border-primary ax-ring-1 ax-ring-primary-500;
+    box-shadow: 0px 0px 0 1px rgba(var(--ax-color-primary-500));
+    border-color: rgba(var(--ax-color-primary-500));
+  }
+
+  &.ax-state-error {
+    // @apply ax-border-danger-500;
+    border-color: rgba(var(--ax-color-danger-500));
+    &:focus-within {
+      // @apply ax-ring-1 ax-ring-danger-500;
+      box-shadow: 0px 0px 0 1px rgba(var(--ax-color-danger-500));
+      border-color: rgba(var(--ax-color-danger-500));
+    }
+    .ax-input {
+      &::placeholder {
+        color: rgba(var(--ax-color-danger-500));
+      }
+    }
+  }
+}
+@mixin flat-look() {
+  // @apply ax-rounded-none ax-border-b ax-border-default;
+  border-radius: 0px;
+  border-bottom-width: 1px;
+  border-color: rgba(var(--ax-color-border-default));
+
+  &:focus-within {
+    // @apply ax-border-primary-500;
+    border-color: rgba(var(--ax-color-primary-500));
+  }
+  &.ax-state-error {
+    // @apply ax-border-danger-500;
+    border-color: rgba(var(--ax-color-danger-500));
+
+    .ax-input {
+      &::placeholder {
+        // @apply ax-text-danger-500;
+        color: rgba(var(--ax-color-danger-500));
+      }
+    }
+  }
+}
+
+@mixin outline-look() {
+  // @apply ax-bg-transparent #{!important};
+  background-color: transparent !important;
+}
+
+@mixin fill-look() {
+  // @apply ax-rounded-default ax-bg-on-surface;
+  border-radius: var(--ax-rounded-border-default);
+  background-color: rgba(var(--ax-color-on-surface));
+
+  &:focus-within {
+    // @apply ax-ring-2 ax-ring-primary-500;
+
+    box-shadow: 0px 0px 0 2px rgba(var(--ax-color-primary-500));
+  }
+  &.ax-state-error {
+    // @apply ax-bg-danger-200 ax-text-danger-fore-tint;
+    background-color: rgba(var(--ax-color-danger-50));
+    color: rgba(var(--ax-color-danger-fore-tint));
+
+    &:focus-within {
+      // @apply ax-ring-2 ax-ring-primary-500;
+      box-shadow: 0px 0px 0 2px rgba(var(--ax-color-danger-500));
+    }
+    .ax-input {
+      &::placeholder {
+        // @apply ax-text-danger-500;
+        color: rgba(var(--ax-color-danger-500));
+      }
+    }
+  }
+}

package/src/mixins/_media.scss

@@ -0,0 +1,27 @@
+@mixin media($media) {
+  @if $media == 'phone' {
+    @media (max-width: 599px) {
+      @content;
+    }
+  }
+  @if $media == 'tablet' {
+    @media (min-width: 600px) {
+      @content;
+    }
+  }
+  @if $media == 'tablet-landscape' {
+    @media (min-width: 900px) {
+      @content;
+    }
+  }
+  @if $media == 'desktop' {
+    @media (min-width: 1200px) {
+      @content;
+    }
+  }
+  @if $media == 'desktop-large' {
+    @media (min-width: 1800px) {
+      @content;
+    }
+  }
+}

package/src/mixins/_util.scss

@@ -0,0 +1,19 @@
+@mixin darkMode() {
+  .ax-dark {
+    @content;
+  }
+}
+@mixin direction($dir) {
+  html {
+    @if ($dir == 'rtl') {
+      &[dir='rtl'] {
+        @content;
+      }
+    }
+    @if ($dir == 'ltr') {
+      &[dir='ltr'] {
+        @content;
+      }
+    }
+  }
+}

package/src/mixins/index.scss

@@ -0,0 +1,3 @@
+@import './look';
+@import './media';
+@import './util';

package/src/shared/_actionsheet.scss

@@ -0,0 +1,23 @@
+.ax-actionsheet-panel {
+  // @apply ax-animate-fadeInUp ax-overflow-hidden ax-rounded-t-default ax-bg-surface ax-shadow-lg ax-animate-2xfaster;
+  overflow: hidden;
+  border-top-left-radius: var(--ax-rounded-border-default);
+  border-top-right-radius: var(--ax-rounded-border-default);
+  background-color: rgba(var(--ax-color-surface));
+  --ax-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1),
+    0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --ax-shadow-colored: 0 10px 15px -3px var(--ax-shadow-color),
+    0 4px 6px -4px var(--ax-shadow-color);
+  box-shadow: var(--ax-ring-offset-shadow, 0 0 #0000),
+    var(--ax-ring-shadow, 0 0 #0000), var(--ax-shadow);
+
+  animation: 1s both ax-fadeInUp;
+  animation-duration: 250ms;
+
+  @keyframes ax-fadeInUp {
+    from {
+      transform: translate3d(0, 100%, 0);
+      opacity: 0;
+    }
+  }
+}

package/src/shared/_check-box.scss

@@ -0,0 +1,59 @@
+@import '../mixins/index.scss';
+
+.ax-checkbox {
+  // @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 */;
+  width: 1rem /* 16px */;
+  cursor: pointer;
+  appearance: none;
+  border-radius: 0.25rem /* 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,
+  &:indeterminate {
+    // @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%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");
+  }
+
+  &:indeterminate {
+    background-image: url('data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2Ij48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2ZmZjt9PC9zdHlsZT48L2RlZnM+PHJlY3QgY2xhc3M9ImNscy0xIiB4PSIzIiB5PSI3IiB3aWR0aD0iMTAiIGhlaWdodD0iMiIvPjwvc3ZnPg==');
+  }
+
+  &: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");
+//     }
+//   }
+// }