@acorex/styles 18.12.29 → 18.12.33

package/src/base/index.scss

@@ -1,13 +1,13 @@
-@import '../mixins/index.scss';
-
-:root {
-  --ax-overlay-full-width: 93;
-  --ax-color-white: 255, 255, 255;
-  --ax-color-black: 0, 0, 0;
-}
-
-html,
-body {
-  background-color: rgba(var(--ax-color-background-default));
-  color: rgba(var(--ax-color-text-default));
-}
+@import '../mixins/index.scss';
+
+:root {
+  --ax-overlay-full-width: 93;
+  --ax-color-white: 255, 255, 255;
+  --ax-color-black: 0, 0, 0;
+}
+
+html,
+body {
+  background-color: rgba(var(--ax-color-background-default));
+  color: rgba(var(--ax-color-text-default));
+}

package/src/mixins/_look.scss

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

@@ -1,73 +1,73 @@
-@mixin media($media) {
-  // phone -> xs
-  @if $media == 'xs' {
-    @media (min-width: 320px) and (max-width: 600px) {
-      @content;
-    }
-  }
-
-  // tablet -> md
-  @if $media == 'md' {
-    @media (min-width: 768px) {
-      @content;
-    }
-  }
-
-  // tablet-landscape  -> lg
-  @if $media == 'lg' {
-    @media (min-width: 1024px) {
-      @content;
-    }
-  }
-
-  // desktop  -> xl
-  @if $media == 'xl' {
-    @media (min-width: 1280px) {
-      @content;
-    }
-  }
-
-  // desktop-large  -> 2xl
-  @if $media == '2xl' {
-    @media (min-width: 1536px) {
-      @content;
-    }
-  }
-}
-
-@mixin mediaLessThan($media) {
-  // phone -> xs
-  @if $media == 'xs' {
-    @media screen and (max-width: 600px) {
-      @content;
-    }
-  }
-
-  // tablet -> md
-  @if $media == 'md' {
-    @media screen and (max-width: 768px) {
-      @content;
-    }
-  }
-
-  // tablet-landscape  -> lg
-  @if $media == 'lg' {
-    @media screen and (max-width: 1024px) {
-      @content;
-    }
-  }
-
-  // desktop  -> xl
-  @if $media == 'xl' {
-    @media screen and (max-width: 1280px) {
-      @content;
-    }
-  }
-
-  // desktop-large  -> 2xl
-  @if $media == '2xl' {
-    @media screen and (max-width: 1536px) {
-      @content;
-    }
-  }
-}
+@mixin media($media) {
+  // phone -> xs
+  @if $media == 'xs' {
+    @media (min-width: 320px) and (max-width: 600px) {
+      @content;
+    }
+  }
+
+  // tablet -> md
+  @if $media == 'md' {
+    @media (min-width: 768px) {
+      @content;
+    }
+  }
+
+  // tablet-landscape  -> lg
+  @if $media == 'lg' {
+    @media (min-width: 1024px) {
+      @content;
+    }
+  }
+
+  // desktop  -> xl
+  @if $media == 'xl' {
+    @media (min-width: 1280px) {
+      @content;
+    }
+  }
+
+  // desktop-large  -> 2xl
+  @if $media == '2xl' {
+    @media (min-width: 1536px) {
+      @content;
+    }
+  }
+}
+
+@mixin mediaLessThan($media) {
+  // phone -> xs
+  @if $media == 'xs' {
+    @media screen and (max-width: 600px) {
+      @content;
+    }
+  }
+
+  // tablet -> md
+  @if $media == 'md' {
+    @media screen and (max-width: 768px) {
+      @content;
+    }
+  }
+
+  // tablet-landscape  -> lg
+  @if $media == 'lg' {
+    @media screen and (max-width: 1024px) {
+      @content;
+    }
+  }
+
+  // desktop  -> xl
+  @if $media == 'xl' {
+    @media screen and (max-width: 1280px) {
+      @content;
+    }
+  }
+
+  // desktop-large  -> 2xl
+  @if $media == '2xl' {
+    @media screen and (max-width: 1536px) {
+      @content;
+    }
+  }
+}

package/src/mixins/_util.scss

@@ -1,19 +1,19 @@
-@mixin darkMode() {
-  .ax-dark {
-    @content;
-  }
-}
-@mixin direction($dir) {
-  html {
-    @if ($dir == 'rtl') {
-      &[dir='rtl'] {
-        @content;
-      }
-    }
-    @if ($dir == 'ltr') {
-      &[dir='ltr'] {
-        @content;
-      }
-    }
-  }
-}
+@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

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

package/src/shared/_action-item.scss

@@ -1,109 +1,109 @@
-.ax-action-list {
-  &.ax-action-list-horizontal {
-    display: flex;
-    flex-direction: row;
-
-    ax-divider {
-      margin-inline: 0.25rem;
-      width: 1px;
-      height: auto;
-    }
-  }
-  &.ax-action-list-vertical {
-    display: flex;
-    flex-direction: column;
-
-    .ax-action-item {
-      & > div {
-        &.ax-action-item-prefix {
-          ax-prefix {
-            min-width: 1rem;
-          }
-        }
-      }
-    }
-
-    ax-divider {
-      margin-block: 0.25rem;
-      height: 1px;
-      width: 100%;
-    }
-  }
-
-  ax-title {
-    display: block;
-    padding-inline: 0.875rem;
-    padding-block: 0.25rem;
-    font-size: 0.75rem;
-    line-height: 1rem;
-    font-weight: bolder;
-    text-transform: uppercase;
-    opacity: 0.5;
-  }
-
-  ax-divider {
-    display: block;
-    background-color: rgba(var(--ax-color-border-default));
-  }
-
-  .ax-action-item {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    font-size: 0.875rem;
-    line-height: 1.25rem;
-    height: 2.25rem;
-    width: 100%;
-    cursor: pointer;
-    padding-inline-end: 1rem;
-    &.ax-state-disabled {
-      cursor: not-allowed;
-      opacity: 0.5;
-    }
-
-    &:hover {
-      &:not(&.ax-state-disabled) {
-        background-color: rgba(var(--ax-color-on-surface));
-        ax-prefix,
-        ax-suffix {
-          opacity: 1;
-        }
-      }
-    }
-
-    & > div {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-
-      &.ax-action-item-prefix {
-        padding-inline-start: 0.875rem;
-        & > ax-text {
-          padding-inline-start: 0.5rem;
-          white-space: nowrap;
-        }
-      }
-
-      &.ax-action-item-suffix {
-        &:not(&:empty) {
-          padding-inline-end: 0.875rem;
-          margin-inline-start: 1rem;
-        }
-      }
-    }
-
-    ax-prefix {
-      display: flex;
-      gap: 0.5rem;
-    }
-
-    ax-suffix {
-      ax-text {
-        color: rgba(var(--ax-color-text-default));
-        opacity: 0.5;
-        font-weight: lighter;
-        padding-inline: 0.5rem;
-      }
-    }
-  }
-}
+.ax-action-list {
+  &.ax-action-list-horizontal {
+    display: flex;
+    flex-direction: row;
+
+    ax-divider {
+      margin-inline: 0.25rem;
+      width: 1px;
+      height: auto;
+    }
+  }
+  &.ax-action-list-vertical {
+    display: flex;
+    flex-direction: column;
+
+    .ax-action-item {
+      & > div {
+        &.ax-action-item-prefix {
+          ax-prefix {
+            min-width: 1rem;
+          }
+        }
+      }
+    }
+
+    ax-divider {
+      margin-block: 0.25rem;
+      height: 1px;
+      width: 100%;
+    }
+  }
+
+  ax-title {
+    display: block;
+    padding-inline: 0.875rem;
+    padding-block: 0.25rem;
+    font-size: 0.75rem;
+    line-height: 1rem;
+    font-weight: bolder;
+    text-transform: uppercase;
+    opacity: 0.5;
+  }
+
+  ax-divider {
+    display: block;
+    background-color: rgba(var(--ax-color-border-default));
+  }
+
+  .ax-action-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    height: 2.25rem;
+    width: 100%;
+    cursor: pointer;
+    padding-inline-end: 1rem;
+    &.ax-state-disabled {
+      cursor: not-allowed;
+      opacity: 0.5;
+    }
+
+    &:hover {
+      &:not(&.ax-state-disabled, &.ax-state-selected) {
+        background-color: rgba(var(--ax-color-on-surface));
+        ax-prefix,
+        ax-suffix {
+          opacity: 1;
+        }
+      }
+    }
+
+    & > div {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      &.ax-action-item-prefix {
+        padding-inline-start: 0.875rem;
+        & > ax-text {
+          padding-inline-start: 0.5rem;
+          white-space: nowrap;
+        }
+      }
+
+      &.ax-action-item-suffix {
+        &:not(&:empty) {
+          padding-inline-end: 0.875rem;
+          margin-inline-start: 1rem;
+        }
+      }
+    }
+
+    ax-prefix {
+      display: flex;
+      gap: 0.5rem;
+    }
+
+    ax-suffix {
+      ax-text {
+        color: rgba(var(--ax-color-text-default));
+        opacity: 0.5;
+        font-weight: lighter;
+        padding-inline: 0.5rem;
+      }
+    }
+  }
+}

package/src/shared/_actionsheet.scss

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