@acorex/styles 21.0.1-next.89 → 21.0.1-next.90

package/components/_editor-container.css

@@ -1,47 +1,13 @@
 @import '../themes/default.css';
 
 @layer base {
-  .ax-xs {
-    .ax-editor-container {
-      @apply h-7 min-h-7 px-2 py-1.5 text-xs leading-4;
-
-      .ax-content {
-        @apply text-xs;
-      }
-    }
-  }
-  .ax-sm {
-    .ax-editor-container {
-      @apply h-8 min-h-8 px-3 py-2 text-sm leading-5;
-      .ax-content {
-        @apply text-sm;
-      }
-    }
-  }
-  .ax-md {
-    .ax-editor-container {
-      @apply h-9 min-h-9 px-3 py-3 text-sm leading-5;
-      .ax-content {
-        @apply text-sm;
-      }
-    }
-  }
-  .ax-lg {
-    .ax-editor-container {
-      @apply h-10 min-h-10 px-4 py-2.5 text-base leading-6;
-      .ax-content {
-        @apply text-base;
-      }
-    }
-  }
-  .ax-xl {
-    .ax-editor-container {
-      @apply h-11 min-h-11 px-4 py-2.5 text-xl leading-7;
-      .ax-content {
-        @apply text-xl;
-      }
+  .ax-editor-container {
+    @apply h-9 min-h-9 px-3 py-3 text-sm;
+    .ax-content {
+      @apply text-sm;
     }
   }
+
   .ax-editor-container {
     @apply rounded-default relative flex h-9 min-h-9 items-center justify-between overflow-hidden px-3 py-3 text-sm leading-5;
 
@@ -57,7 +23,7 @@
     .ax-editor {
       font-size: inherit;
 
-      @apply w-full py-2 outline-0 outline-transparent placeholder:opacity-50 flex-1;
+      @apply w-full flex-1 py-2 outline-0 outline-transparent placeholder:opacity-50;
     }
     .ax-placeholder {
       @apply opacity-50;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@acorex/styles",
-  "version": "21.0.1-next.89",
+  "version": "21.0.1-next.90",
   "main": "index.css",
   "author": "Ali Safari",
   "license": "ISC",

package/themes/default.css

@@ -3083,7 +3083,7 @@ html.ax-dark {
     }
   }
   &:not(.ax-state-disabled, .ax-state-loading, .ax-state-selected):active {
-    @apply bg-(--ax-comp-bg-darker,var(--color-light)) text-(--ax-comp-text-darker,var(--color-on-light)) ring-1 ring-(--ax-comp-bg-dark) ring-offset-2 dark:bg-(--ax-comp-bg-darker,var(--color-dark)) dark:text-(--ax-comp-text-darker,var(--color-on-dark));
+    @apply bg-(--ax-comp-bg-darker,var(--color-light)) text-(--ax-comp-text-darker,var(--color-on-light)) ring-1 ring-(--ax-comp-bg-dark) ring-offset-1 dark:bg-(--ax-comp-bg-darker,var(--color-dark)) dark:text-(--ax-comp-text-darker,var(--color-on-dark));
   }
 }
 

package/components/_editor-container copy.css

@@ -1,267 +0,0 @@
-.ax-editor-container {
-  @apply border-default rounded-default relative flex h-9 w-full items-center justify-between gap-2 overflow-hidden border px-2 text-sm;
-}
-
-.ax-editor-container .ax-icon {
-  font-size: var(--ax-comp-editor-icon-font-size);
-}
-
-.ax-editor-container:has(> ax-prefix) {
-  padding-inline-start: 0;
-}
-
-.ax-editor-container:has(> ax-prefix) > ax-prefix:has(ax-button, .ax-editor-container) {
-  --ax-comp-editor-space-start-size: 0px;
-}
-
-.ax-editor-container:has(> ax-prefix) > ax-prefix {
-  padding-inline-start: var(--ax-comp-editor-space-start-size);
-}
-
-.ax-editor-container:has(> ax-suffix) {
-  padding-inline-end: 0;
-}
-
-.ax-editor-container:has(> ax-suffix) > ax-suffix:has(ax-button, .ax-editor-container) {
-  --ax-comp-editor-space-end-size: 0px;
-}
-
-.ax-editor-container:has(> ax-suffix) > ax-suffix {
-  padding-inline-end: var(--ax-comp-editor-space-end-size);
-}
-
-.ax-editor-container:not(.ax-state-disabled):focus-within {
-  border-color: rgba(var(--ax-comp-editor-focused-border-color));
-  outline-width: var(--ax-comp-editor-box-outline-width);
-  outline-style: solid;
-  outline-color: rgba(var(--ax-comp-editor-focused-border-color));
-}
-
-.ax-editor-container.ax-state-error {
-  border-color: rgba(var(--ax-comp-editor-error-border-color));
-  outline-width: var(--ax-comp-editor-box-outline-width);
-  outline-color: rgba(var(--ax-comp-editor-error-border-color));
-  outline-style: solid;
-}
-
-.ax-editor-container.ax-state-error:focus-within {
-  border-color: rgba(var(--ax-comp-editor-error-border-color));
-}
-
-.ax-editor-container.ax-state-error .ax-input .ax-placeholder,
-.ax-editor-container.ax-state-error .ax-input::placeholder {
-  color: rgba(var(--ax-comp-editor-error-text-color), var(--ax-comp-editor-placeholder-opacity));
-}
-
-.ax-editor-container.ax-solid {
-  --ax-comp-editor-bg-color: var(--ax-sys-color-lightest-surface);
-  --ax-comp-editor-border-width: 1px;
-}
-
-.ax-editor-container.ax-outline {
-  --ax-comp-editor-bg-color: 0, 0, 0, 0;
-  --ax-comp-editor-border-width: 1px;
-}
-
-.ax-editor-container.ax-flat {
-  --ax-comp-editor-border-width: 2px;
-  --ax-comp-editor-border-radius: 0px;
-  --ax-comp-editor-box-outline-width: 0px;
-  border-width: 0px !important;
-  border-bottom-width: var(--ax-comp-editor-border-width) !important;
-}
-
-.ax-editor-container.ax-fill {
-  --ax-comp-editor-box-outline-width: 2px;
-  --ax-comp-editor-border-width: 0px;
-  --ax-comp-editor-bg-color: var(--ax-sys-color-surface);
-  --ax-comp-editor-text-color: var(--ax-sys-color-on-lighter-surface);
-  --ax-comp-editor-border-color: var(--ax-sys-color-border-lighter-surface);
-}
-
-.ax-editor-container.ax-none {
-  --ax-comp-editor-border-radius: 0px;
-  --ax-comp-editor-box-outline-width: 0px;
-  --ax-comp-editor-border-width: 0px;
-  --ax-comp-editor-bg-color: 0, 0, 0, 0;
-  --ax-comp-editor-border-color: 0, 0, 0, 0;
-  --ax-comp-editor-text-color: var(--ax-sys-color-on-lighter-surface);
-}
-
-.ax-editor-container .ax-editor-input {
-  height: 100%;
-  flex: 1 1 0%;
-}
-
-.ax-editor-container .ax-editor-input .ax-input {
-  height: 100%;
-}
-
-.ax-editor-container .ax-input {
-  font-size: var(--ax-comp-editor-font-size);
-  line-height: var(--ax-comp-editor-font-size);
-  color: rgba(var(--ax-comp-editor-text-color));
-  cursor: inherit;
-}
-
-.ax-editor-container .ax-input .ax-placeholder,
-.ax-editor-container .ax-input::placeholder {
-  font-size: inherit;
-  font-weight: 400;
-  color: rgb(var(--ax-comp-editor-text-color), var(--ax-comp-editor-placeholder-opacity));
-}
-
-.ax-editor-container .ax-input:focus,
-.ax-editor-container .ax-input:focus-visible,
-.ax-editor-container .ax-input:focus-within {
-  outline: none;
-}
-
-.ax-editor-container.ax-state-disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.ax-editor-container .ax-editor-control {
-  display: flex;
-  height: 100%;
-  align-items: center;
-  justify-content: center;
-  padding-inline-start: 0.5rem;
-  font-size: 1.125rem;
-  line-height: 1.75rem;
-  color: rgba(var(--ax-comp-editor-text-color));
-}
-
-.ax-editor-container.ax-button-icon {
-  padding: 0 0.5rem;
-}
-
-.ax-editor-container .ax-input,
-.ax-editor-container .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: inherit;
-}
-
-.ax-editor-container .ax-input:focus,
-.ax-editor-container .ax-text-area:focus {
-  box-shadow: none;
-}
-
-.ax-editor-container .ax-editor-button {
-  font-size: var(--ax-comp-editor-button-font-size, var(--ax-comp-editor-font-size));
-  height: var(--ax-comp-editor-button-height, 100%);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 1.5rem;
-}
-
-.ax-editor-container > ax-prefix,
-.ax-editor-container > ax-suffix {
-  height: 100%;
-  max-width: fit-content;
-}
-
-.ax-editor-container > ax-prefix ax-button,
-.ax-editor-container > ax-prefix ax-text,
-.ax-editor-container > ax-prefix ax-icon,
-.ax-editor-container > ax-prefix .ax-editor-container,
-.ax-editor-container > ax-suffix ax-button,
-.ax-editor-container > ax-suffix ax-text,
-.ax-editor-container > ax-suffix ax-icon,
-.ax-editor-container > ax-suffix .ax-editor-container {
-  display: flex;
-  height: 100%;
-  align-items: center;
-  justify-content: center;
-  border-radius: 0px;
-}
-
-.ax-editor-container > ax-prefix ax-title,
-.ax-editor-container > ax-suffix ax-title {
-  padding-left: 1rem;
-  padding-right: 1rem;
-}
-
-.ax-editor-container > ax-prefix > ax-text,
-.ax-editor-container > ax-suffix > ax-text {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.ax-editor-container .ax-button {
-  height: 100% !important;
-  border-radius: 0px !important;
-}
-
-.ax-editor-container .ax-button.ax-button-icon {
-  height: 100%;
-  width: var(--ax-comp-editor-height);
-}
-
-.ax-editor-container ax-popover {
-  position: absolute;
-}
-
-.ax-xs .ax-editor-container,
-.ax-editor-container.ax-xs {
-  --ax-comp-editor-font-size: 0.75rem;
-  --ax-comp-editor-space-start-size: 0.25rem;
-  --ax-comp-editor-space-end-size: 0.25rem;
-  --ax-comp-editor-button-font-size: 0.625rem;
-  --ax-comp-editor-gap: 0.25rem;
-  --ax-comp-editor-icon-font-size: 0.75rem;
-}
-
-.ax-sm .ax-editor-container,
-.ax-editor-container.ax-sm {
-  --ax-comp-editor-font-size: 0.875rem;
-  --ax-comp-editor-space-start-size: 0.5rem;
-  --ax-comp-editor-space-end-size: 0.5rem;
-  --ax-comp-editor-button-font-size: 0.75rem;
-  --ax-comp-editor-gap: 0.375rem;
-  --ax-comp-editor-icon-font-size: 0.875rem;
-}
-
-.ax-md .ax-editor-container,
-.ax-editor-container,
-.ax-editor-container.ax-md {
-  --ax-comp-editor-space-start-size: 0.75rem;
-  --ax-comp-editor-space-end-size: 0.75rem;
-  --ax-comp-editor-button-font-size: 0.875rem;
-  --ax-comp-editor-gap: 0.5rem;
-  --ax-comp-editor-icon-font-size: 1rem;
-}
-
-.ax-lg .ax-editor-container,
-.ax-editor-container.ax-lg {
-  --ax-comp-editor-font-size: 1.125rem;
-  --ax-comp-editor-space-start-size: 1.125rem;
-  --ax-comp-editor-space-end-size: 1.125rem;
-  --ax-comp-editor-button-font-size: 0.875rem;
-  --ax-comp-editor-gap: 0.625rem;
-  --ax-comp-editor-icon-font-size: 1.25rem;
-}
-
-.ax-xl .ax-editor-container,
-.ax-editor-container.ax-xl {
-  --ax-comp-editor-font-size: 1.5rem;
-  --ax-comp-editor-space-start-size: 1.5rem;
-  --ax-comp-editor-space-end-size: 1.5rem;
-  --ax-comp-editor-button-font-size: 1rem;
-  --ax-comp-editor-gap: 0.75rem;
-  --ax-comp-editor-icon-font-size: 1.5rem;
-}
-
-ax-validation-rule {
-  position: absolute;
-}