@acorex/styles 18.12.29 → 18.12.30

package/src/shared/_drop-down.scss

@@ -1,76 +1,76 @@
-@import '../variables/index.scss';
-
-.ax-drop-down {
-  // @apply ax-contents;
-  display: contents;
-
-  .ax-dropdown-content {
-    // @apply ax-flex ax-flex-1 ax-items-center ax-overflow-x-auto ax-overflow-y-hidden ax-text-sm ax-capitalize;
-    display: flex;
-    flex: 1 1 0%;
-    align-items: center;
-    overflow-x: auto;
-    overflow-y: hidden;
-    font-size: 0.875rem /* 14px */;
-    line-height: 1.25rem /* 20px */;
-    text-transform: capitalize;
-
-    &.ax-state-disabled {
-      // @apply ax-cursor-not-allowed ax-opacity-50;
-      cursor: not-allowed;
-      opacity: 0.5;
-    }
-  }
-}
-
-.ax-overlay-pane {
-  // @apply ax-mt-1 ax-h-fit ax-overflow-hidden ax-rounded-none ax-border ax-border-default ax-bg-surface ax-shadow-md md:ax-rounded-default;
-  margin-top: 0.25rem /* 4px */;
-  min-width: 10rem;
-  height: fit-content;
-  overflow: hidden;
-  border-radius: 0px;
-  border-width: 1px;
-  border-color: rgba(var(--ax-color-border-default));
-  background-color: rgba(var(--ax-color-surface));
-  --ax-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
-  --ax-shadow-colored: 0 4px 6px -1px var(--ax-shadow-color), 0 2px 4px -2px var(--ax-shadow-color);
-  box-shadow: var(--ax-ring-offset-shadow, 0 0 #0000), var(--ax-ring-shadow, 0 0 #0000), var(--ax-shadow);
-  @media (min-width: 768px) {
-    border-radius: var(--ax-rounded-border-default);
-  }
-  ax-header,
-  ax-footer {
-    // @apply ax-bg-surface ax-p-3;
-    background-color: rgba(var(--ax-color-surface));
-    padding: 0.75rem /* 12px */;
-  }
-
-  &.ax-overlay-center {
-    // @apply ax-h-fit ax-w-[80vw] ax-max-w-[90vh];
-    height: fit-content;
-    width: 80vw;
-    max-width: 90vh;
-  }
-
-  &.ax-overlay-actionsheet {
-    // @apply ax-h-auto ax-max-h-[85vh] ax-w-full ax-bg-surface;
-    height: auto;
-    max-height: 85vh;
-    width: 100%;
-    background-color: rgba(var(--ax-color-surface));
-    border-top-left-radius: var(--ax-rounded-border-default);
-    border-top-right-radius: var(--ax-rounded-border-default);
-    &.ax-full {
-      // @apply ax-h-[95vh] ax-max-h-[95vh];
-      height: 95vh;
-      max-height: 95vh;
-    }
-  }
-
-  &.ax-overlay-full {
-    width: 100vw;
-    height: 100vh;
-    // @apply ax-h-screen ax-w-screen;
-  }
-}
+@import '../variables/index.scss';
+
+.ax-drop-down {
+  // @apply ax-contents;
+  display: contents;
+
+  .ax-dropdown-content {
+    // @apply ax-flex ax-flex-1 ax-items-center ax-overflow-x-auto ax-overflow-y-hidden ax-text-sm ax-capitalize;
+    display: flex;
+    flex: 1 1 0%;
+    align-items: center;
+    overflow-x: auto;
+    overflow-y: hidden;
+    font-size: 0.875rem /* 14px */;
+    line-height: 1.25rem /* 20px */;
+    text-transform: capitalize;
+
+    &.ax-state-disabled {
+      // @apply ax-cursor-not-allowed ax-opacity-50;
+      cursor: not-allowed;
+      opacity: 0.5;
+    }
+  }
+}
+
+.ax-overlay-pane {
+  // @apply ax-mt-1 ax-h-fit ax-overflow-hidden ax-rounded-none ax-border ax-border-default ax-bg-surface ax-shadow-md md:ax-rounded-default;
+  margin-top: 0.25rem /* 4px */;
+  min-width: 10rem;
+  height: fit-content;
+  overflow: hidden;
+  border-radius: 0px;
+  border-width: 1px;
+  border-color: rgba(var(--ax-color-border-default));
+  background-color: rgba(var(--ax-color-surface));
+  --ax-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --ax-shadow-colored: 0 4px 6px -1px var(--ax-shadow-color), 0 2px 4px -2px var(--ax-shadow-color);
+  box-shadow: var(--ax-ring-offset-shadow, 0 0 #0000), var(--ax-ring-shadow, 0 0 #0000), var(--ax-shadow);
+  @media (min-width: 768px) {
+    border-radius: var(--ax-rounded-border-default);
+  }
+  ax-header,
+  ax-footer {
+    // @apply ax-bg-surface ax-p-3;
+    background-color: rgba(var(--ax-color-surface));
+    padding: 0.75rem /* 12px */;
+  }
+
+  &.ax-overlay-center {
+    // @apply ax-h-fit ax-w-[80vw] ax-max-w-[90vh];
+    height: fit-content;
+    width: 80vw;
+    max-width: 90vh;
+  }
+
+  &.ax-overlay-actionsheet {
+    // @apply ax-h-auto ax-max-h-[85vh] ax-w-full ax-bg-surface;
+    height: auto;
+    max-height: 85vh;
+    width: 100%;
+    background-color: rgba(var(--ax-color-surface));
+    border-top-left-radius: var(--ax-rounded-border-default);
+    border-top-right-radius: var(--ax-rounded-border-default);
+    &.ax-full {
+      // @apply ax-h-[95vh] ax-max-h-[95vh];
+      height: 95vh;
+      max-height: 95vh;
+    }
+  }
+
+  &.ax-overlay-full {
+    width: 100vw;
+    height: 100vh;
+    // @apply ax-h-screen ax-w-screen;
+  }
+}

package/src/shared/_editor-container.scss

@@ -1,258 +1,258 @@
-@import '../mixins/look';
-
-@include darkMode() {
-  .ax-editor-container {
-    &.ax-look-fill {
-      &.ax-state-error {
-        // @apply ax-bg-danger-500/25;
-        background-color: rgba(var(--ax-color-danger-500), 0.25);
-      }
-    }
-  }
-}
-.ax-editor-container {
-  // @apply ax-flex ax-h-default ax-w-full ax-items-center ax-overflow-hidden ax-text-sm ax-leading-none ax-text-input-surface-fore;
-  display: flex;
-  height: var(--ax-size-default);
-  width: 100%;
-  align-items: center;
-  overflow: hidden;
-  font-size: 0.875rem /* 14px */;
-  line-height: 1;
-  color: rgba(var(--ax-color-input-surface-fore));
-  .ax-editor-container {
-    // background-color: rgba(var(--ax-color-on-surface)) !important;
-    border-radius: 0 !important;
-    border: 0px !important;
-    height: 100% !important;
-    .ax-select-box-selection,
-    .ax-content {
-      padding-top: 0 !important;
-    }
-    &:focus-within {
-      box-shadow: none !important;
-    }
-    &:focus {
-      box-shadow: 0px 0px 0 1px rgba(var(--ax-color-primary-500));
-    }
-  }
-  &.ax-state-disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-  &.ax-look-solid,
-  &.ax-look-outline {
-    @include solid-look();
-  }
-  &.ax-look-flat {
-    @include flat-look();
-  }
-  &.ax-look-outline {
-    @include outline-look();
-  }
-  &.ax-look-fill {
-    @include fill-look();
-  }
-
-  .ax-editor-input {
-    // @apply ax-h-full ax-flex-1;
-    height: 100%;
-    flex: 1 1 0%;
-
-    .ax-input {
-      // @apply ax-h-full;
-      height: 100%;
-    }
-  }
-  .ax-input {
-    // @apply ax-px-3;
-    padding-left: 0.75rem /* 12px */;
-    padding-right: 0.75rem /* 12px */;
-    &::placeholder {
-      // @apply ax-font-normal ax-text-default/50;
-      font-size: inherit;
-      font-weight: 400;
-      color: rgb(var(--ax-color-input-surface-fore), 0.5);
-    }
-    &:focus,
-    &:focus-visible,
-    &:focus-within {
-      outline: none;
-    }
-  }
-
-  &.ax-xs {
-    .ax-input {
-      // @apply ax-p-2 ax-text-xs;
-      padding: 0.5rem /* 8px */;
-      font-size: 0.75rem /* 12px */;
-      line-height: 1rem /* 16px */;
-    }
-  }
-  &.ax-sm {
-    .ax-input {
-      // @apply ax-p-2 ax-text-sm;
-      padding: 0.5rem /* 8px */;
-      font-size: 0.875rem /* 14px */;
-      line-height: 1.25rem /* 20px */;
-    }
-  }
-  &.ax-md {
-    .ax-input {
-      // @apply ax-text-sm;
-      font-size: 0.875rem /* 14px */;
-      line-height: 1.25rem /* 20px */;
-    }
-  }
-  &.ax-lg {
-    .ax-input {
-      // @apply ax-text-lg;
-      font-size: 1rem /* 18px */;
-      line-height: 1.25rem /* 28px */;
-    }
-  }
-  &.ax-xl {
-    .ax-input {
-      // @apply ax-text-lg;
-      font-size: 1.125rem /* 18px */;
-      line-height: 1.75rem /* 28px */;
-    }
-  }
-
-  .ax-editor-control {
-    // @apply ax-flex ax-h-full ax-items-center ax-justify-center ax-ps-2 ax-text-lg ax-text-input-surface-fore;
-    display: flex;
-    height: 100%;
-    align-items: center;
-    justify-content: center;
-    padding-inline-start: 0.5rem /* 8px */;
-    font-size: 1.125rem /* 18px */;
-    line-height: 1.75rem /* 28px */;
-    font-size: 1.125rem /* 18px */;
-    line-height: 1.75rem /* 28px */;
-    color: rgba(var(--ax-color-input-surface-fore));
-  }
-
-  &.ax-button-icon {
-    // @apply ax-px-2;
-    padding-left: 0.5rem /* 8px */;
-    padding-right: 0.5rem /* 8px */;
-  }
-  .ax-input,
-  .ax-text-area {
-    text-align: inherit;
-    font-family: inherit;
-    font-size: inherit;
-    line-height: inherit;
-    height: 100%;
-    width: 100%;
-    flex: 1 1 0%;
-    background-color: transparent;
-    font-weight: 400;
-
-    // @apply ax-h-full ax-w-full ax-flex-1 ax-bg-transparent ax-font-normal;
-
-    &:focus {
-      // @apply ax-shadow-none;
-      box-shadow: none;
-    }
-  }
-
-  .ax-text-area {
-    // @apply ax-p-2.5;
-    padding: 0.625rem /* 10px */;
-  }
-  & > ax-prefix {
-    *,
-    .ax-button,
-    ax-title {
-      // @apply ax-rounded-es ax-rounded-ss;
-      border-end-start-radius: 0.25rem /* 4px */;
-      border-start-start-radius: 0.25rem /* 4px */;
-    }
-
-    ax-icon {
-      // @apply ax-px-3;
-      padding-left: 0.75rem /* 12px */;
-      padding-right: 0.75rem /* 12px */;
-    }
-  }
-
-  & > ax-suffix {
-    *,
-    .ax-button,
-    ax-title {
-      // @apply ax-rounded-ee ax-rounded-se;
-      border-end-end-radius: 0.25rem /* 4px */;
-      border-start-end-radius: 0.25rem /* 4px */;
-    }
-    ax-icon {
-      // @apply ax-pe-3;
-      // padding-inline-end: 0.75rem /* 12px */;
-    }
-  }
-
-  & > ax-prefix,
-  & > ax-suffix {
-    // @apply ax-h-full;
-    height: 100%;
-
-    + .ax-input {
-      // @apply ax-px-0.5 #{!important};
-      padding-left: 0.375rem !important;
-      padding-right: 0.375rem !important;
-    }
-    * {
-      // @apply ax-flex ax-h-full ax-items-center ax-justify-center ax-rounded-none;
-      display: flex;
-      height: 100%;
-      align-items: center;
-      justify-content: center;
-      border-radius: 0px;
-    }
-
-    ax-title {
-      // @apply ax-px-4;
-      padding-left: 1rem /* 16px */;
-      padding-right: 1rem /* 16px */;
-    }
-
-    & > ax-text {
-      // @apply ax-flex ax-items-center ax-justify-center ax-bg-transparent ax-px-2 ax-text-sm;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      background-color: transparent;
-      padding-left: 0.5rem /* 8px */;
-      padding-right: 0.5rem /* 8px */;
-      font-size: 0.875rem /* 14px */;
-      line-height: 1.25rem /* 20px */;
-    }
-  }
-
-  .ax-button {
-    // @apply ax-h-full ax-rounded-none #{!important};
-    height: 100% !important;
-    border-radius: 0px !important;
-
-    &.ax-button-icon {
-      // @apply ax-h-full ax-w-default;
-      height: 100%;
-      width: var(--ax-size-default);
-    }
-  }
-}
-.ax-ripple {
-  // @apply ax-absolute ax-rounded-full;
-  transform: scale(0);
-  animation: ripple 500ms linear;
-  position: absolute;
-  border-radius: 9999rem !important;
-
-  @keyframes ripple {
-    to {
-      transform: scale(4);
-      opacity: 0;
-    }
-  }
-}
+@import '../mixins/look';
+
+@include darkMode() {
+  .ax-editor-container {
+    &.ax-look-fill {
+      &.ax-state-error {
+        // @apply ax-bg-danger-500/25;
+        background-color: rgba(var(--ax-color-danger-500), 0.25);
+      }
+    }
+  }
+}
+.ax-editor-container {
+  // @apply ax-flex ax-h-default ax-w-full ax-items-center ax-overflow-hidden ax-text-sm ax-leading-none ax-text-input-surface-fore;
+  display: flex;
+  height: var(--ax-size-default);
+  width: 100%;
+  align-items: center;
+  overflow: hidden;
+  font-size: 0.875rem /* 14px */;
+  line-height: 1;
+  color: rgba(var(--ax-color-input-surface-fore));
+  .ax-editor-container {
+    // background-color: rgba(var(--ax-color-on-surface)) !important;
+    border-radius: 0 !important;
+    border: 0px !important;
+    height: 100% !important;
+    .ax-select-box-selection,
+    .ax-content {
+      padding-top: 0 !important;
+    }
+    &:focus-within {
+      box-shadow: none !important;
+    }
+    &:focus {
+      box-shadow: 0px 0px 0 1px rgba(var(--ax-color-primary-500));
+    }
+  }
+  &.ax-state-disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+  &.ax-look-solid,
+  &.ax-look-outline {
+    @include solid-look();
+  }
+  &.ax-look-flat {
+    @include flat-look();
+  }
+  &.ax-look-outline {
+    @include outline-look();
+  }
+  &.ax-look-fill {
+    @include fill-look();
+  }
+
+  .ax-editor-input {
+    // @apply ax-h-full ax-flex-1;
+    height: 100%;
+    flex: 1 1 0%;
+
+    .ax-input {
+      // @apply ax-h-full;
+      height: 100%;
+    }
+  }
+  .ax-input {
+    // @apply ax-px-3;
+    padding-left: 0.75rem /* 12px */;
+    padding-right: 0.75rem /* 12px */;
+    &::placeholder {
+      // @apply ax-font-normal ax-text-default/50;
+      font-size: inherit;
+      font-weight: 400;
+      color: rgb(var(--ax-color-input-surface-fore), 0.5);
+    }
+    &:focus,
+    &:focus-visible,
+    &:focus-within {
+      outline: none;
+    }
+  }
+
+  &.ax-xs {
+    .ax-input {
+      // @apply ax-p-2 ax-text-xs;
+      padding: 0.5rem /* 8px */;
+      font-size: 0.75rem /* 12px */;
+      line-height: 1rem /* 16px */;
+    }
+  }
+  &.ax-sm {
+    .ax-input {
+      // @apply ax-p-2 ax-text-sm;
+      padding: 0.5rem /* 8px */;
+      font-size: 0.875rem /* 14px */;
+      line-height: 1.25rem /* 20px */;
+    }
+  }
+  &.ax-md {
+    .ax-input {
+      // @apply ax-text-sm;
+      font-size: 0.875rem /* 14px */;
+      line-height: 1.25rem /* 20px */;
+    }
+  }
+  &.ax-lg {
+    .ax-input {
+      // @apply ax-text-lg;
+      font-size: 1rem /* 18px */;
+      line-height: 1.25rem /* 28px */;
+    }
+  }
+  &.ax-xl {
+    .ax-input {
+      // @apply ax-text-lg;
+      font-size: 1.125rem /* 18px */;
+      line-height: 1.75rem /* 28px */;
+    }
+  }
+
+  .ax-editor-control {
+    // @apply ax-flex ax-h-full ax-items-center ax-justify-center ax-ps-2 ax-text-lg ax-text-input-surface-fore;
+    display: flex;
+    height: 100%;
+    align-items: center;
+    justify-content: center;
+    padding-inline-start: 0.5rem /* 8px */;
+    font-size: 1.125rem /* 18px */;
+    line-height: 1.75rem /* 28px */;
+    font-size: 1.125rem /* 18px */;
+    line-height: 1.75rem /* 28px */;
+    color: rgba(var(--ax-color-input-surface-fore));
+  }
+
+  &.ax-button-icon {
+    // @apply ax-px-2;
+    padding-left: 0.5rem /* 8px */;
+    padding-right: 0.5rem /* 8px */;
+  }
+  .ax-input,
+  .ax-text-area {
+    text-align: inherit;
+    font-family: inherit;
+    font-size: inherit;
+    line-height: inherit;
+    height: 100%;
+    width: 100%;
+    flex: 1 1 0%;
+    background-color: transparent;
+    font-weight: 400;
+
+    // @apply ax-h-full ax-w-full ax-flex-1 ax-bg-transparent ax-font-normal;
+
+    &:focus {
+      // @apply ax-shadow-none;
+      box-shadow: none;
+    }
+  }
+
+  .ax-text-area {
+    // @apply ax-p-2.5;
+    padding: 0.625rem /* 10px */;
+  }
+  & > ax-prefix {
+    *,
+    .ax-button,
+    ax-title {
+      // @apply ax-rounded-es ax-rounded-ss;
+      border-end-start-radius: 0.25rem /* 4px */;
+      border-start-start-radius: 0.25rem /* 4px */;
+    }
+
+    ax-icon {
+      // @apply ax-px-3;
+      padding-left: 0.75rem /* 12px */;
+      padding-right: 0.75rem /* 12px */;
+    }
+  }
+
+  & > ax-suffix {
+    *,
+    .ax-button,
+    ax-title {
+      // @apply ax-rounded-ee ax-rounded-se;
+      border-end-end-radius: 0.25rem /* 4px */;
+      border-start-end-radius: 0.25rem /* 4px */;
+    }
+    ax-icon {
+      // @apply ax-pe-3;
+      // padding-inline-end: 0.75rem /* 12px */;
+    }
+  }
+
+  & > ax-prefix,
+  & > ax-suffix {
+    // @apply ax-h-full;
+    height: 100%;
+
+    + .ax-input {
+      // @apply ax-px-0.5 #{!important};
+      padding-left: 0.375rem !important;
+      padding-right: 0.375rem !important;
+    }
+    * {
+      // @apply ax-flex ax-h-full ax-items-center ax-justify-center ax-rounded-none;
+      display: flex;
+      height: 100%;
+      align-items: center;
+      justify-content: center;
+      border-radius: 0px;
+    }
+
+    ax-title {
+      // @apply ax-px-4;
+      padding-left: 1rem /* 16px */;
+      padding-right: 1rem /* 16px */;
+    }
+
+    & > ax-text {
+      // @apply ax-flex ax-items-center ax-justify-center ax-bg-transparent ax-px-2 ax-text-sm;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background-color: transparent;
+      padding-left: 0.5rem /* 8px */;
+      padding-right: 0.5rem /* 8px */;
+      font-size: 0.875rem /* 14px */;
+      line-height: 1.25rem /* 20px */;
+    }
+  }
+
+  .ax-button {
+    // @apply ax-h-full ax-rounded-none #{!important};
+    height: 100% !important;
+    border-radius: 0px !important;
+
+    &.ax-button-icon {
+      // @apply ax-h-full ax-w-default;
+      height: 100%;
+      width: var(--ax-size-default);
+    }
+  }
+}
+.ax-ripple {
+  // @apply ax-absolute ax-rounded-full;
+  transform: scale(0);
+  animation: ripple 500ms linear;
+  position: absolute;
+  border-radius: 9999rem !important;
+
+  @keyframes ripple {
+    to {
+      transform: scale(4);
+      opacity: 0;
+    }
+  }
+}