@acorex/styles 6.0.12 → 6.1.1

package/src/components/_tabs copy.scss

@@ -0,0 +1,235 @@
+@layer components {
+    .ax-tabs {
+        @apply ax-p-0 ax-overflow-y-hidden ax-overflow-x-auto ax-w-max ax-block;
+
+        .ax-items-wrapper {
+            @apply ax-flex;
+        }
+
+        &:not(.ax-look-custom) {
+            ax-tab-item {
+                @apply ax-text-center ax-px-5 ax-cursor-pointer ax-whitespace-nowrap ax-flex ax-items-center ax-justify-center ax-relative ax-text-sm ax-font-medium;
+                min-height: calc(var(--ax-base-size) * var(--ax-base-ratio));
+                line-height: calc((var(--ax-base-size) * var(--ax-base-ratio)) / 2);
+
+                &.ax-state-disabled {
+                    // background-color: rgb(var(--ax-color-disabled)) !important;
+                    // color: rgb(var(--ax-color-disabled-fore)) !important;
+                    @apply ax-opacity-50 ax-cursor-not-allowed #{!important};
+                }
+
+                &.ax-state-active {
+                    @apply ax-text-black;
+                }
+
+                .ax-prefix {
+                    @apply ax-flex ax-flex-row ax-pe-2;
+                }
+
+                .ax-suffix {
+                    @apply ax-flex ax-flex-row ax-ps-2;
+                }
+            }
+        }
+
+        &.ax-tabs-fit {
+            .ax-items-wrapper ax-tab-item {
+                @apply ax-flex-1;
+            }
+        }
+
+        & > .ax-tab-controll {
+            @apply ax-flex ax-items-center ax-justify-center ax-px-1 ax-cursor-pointer;
+            box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14),
+                0 1px 10px 0 rgba(0, 0, 0, 0.12);
+        }
+
+        &.ax-horizontal {
+            &.ax-look-default {
+                @apply ax-border ax-border-solid ax-border-light-300 ax-shadow-sm ax-overflow-hidden ax-rounded-default;
+                @include control-states("editor");
+
+                ax-tab-item {
+                    @apply ax-bg-white ax-border-e ax-border-b-2  ax-border-solid ax-border-light-300 dark:ax-text-light-200;
+                    @include control-states("editor");
+
+                    border-bottom-color: transparent !important;
+
+                    &:first-child {
+                    }
+
+                    &:last-child {
+                        @apply ax-border-e-0;
+                    }
+
+                    &:hover,
+                    &.ax-state-active {
+                        &:not(.ax-state-disabled) {
+                            border-bottom-color: rgb(var(--ax-color-primary-500)) !important;
+                        }
+                    }
+                }
+            }
+
+            &.ax-look-start-line {
+                @apply ax-border-t ax-border-solid ax-border-light-300 dark:ax-border-light-200/10 ax-w-full;
+                ax-tab-item {
+                    &.ax-state-active {
+                        @apply ax-text-primary-500;
+                        &::after {
+                            @apply ax-absolute ax-top-0 ax-w-full ax-h-0.5 ax-bg-primary-500 ax-block;
+                            content: "";
+                        }
+                    }
+                    &:hover {
+                        &::after {
+                            @apply ax-absolute ax-top-0 ax-w-full ax-h-0.5 ax-bg-primary-500 ax-block;
+                            content: "";
+                        }
+                    }
+                }
+            }
+
+            &.ax-look-end-line {
+                @apply ax-border-b ax-border-solid ax-border-light-300 dark:ax-border-light-200/10 ax-w-full;
+                ax-tab-item {
+                    &.ax-state-active {
+                        @apply ax-text-primary-500;
+                        &::after {
+                            @apply ax-absolute ax-bottom-0 ax-w-full ax-h-0.5 ax-bg-primary-500 ax-block;
+                            content: "";
+                        }
+                    }
+                    &:hover {
+                        &::after {
+                            @apply ax-absolute ax-bottom-0 ax-w-full ax-h-0.5 ax-bg-primary-500 ax-block;
+                            content: "";
+                        }
+                    }
+                }
+            }
+
+            &.ax-look-pills {
+                ax-tab-item {
+                    @apply ax-text-light-fore ax-mr-1 ax-rounded dark:ax-text-light-200;
+
+                    &:hover {
+                        @apply ax-bg-light-300 ax-text-light-fore dark:ax-text-light-50 dark:ax-bg-light-600;
+                    }
+
+                    &.ax-state-active {
+                        @apply ax-bg-light-200 ax-text-light-fore dark:ax-text-light-50 dark:ax-bg-light-600;
+                    }
+                }
+            }
+
+            &.ax-look-pills-color {
+                ax-tab-item {
+                    @apply ax-text-light-fore ax-mr-1 ax-rounded dark:ax-text-primary-200;
+
+                    &:hover {
+                        @apply ax-bg-primary-100 ax-text-primary-500 dark:ax-text-primary-50 dark:ax-bg-primary-500;
+                    }
+
+                    &.ax-state-active {
+                        @apply ax-bg-primary-100 ax-text-primary-500 dark:ax-text-primary-50 dark:ax-bg-primary-500;
+                    }
+                }
+            }
+        }
+
+        &.ax-vertical {
+            .ax-items-wrapper {
+                @apply ax-flex-col ax-h-full;
+
+                ax-tab-item {
+                    @apply ax-text-center ax-justify-start ax-py-2;
+                }
+            }
+
+            &.ax-look-default {
+                @apply ax-border ax-border-solid ax-border-light-300 ax-shadow-sm ax-rounded ax-overflow-hidden;
+                @include control-states("editor");
+
+                ax-tab-item {
+                    @apply ax-bg-white ax-border-s ax-border-solid ax-border-light-300 ax-border-b-0  dark:ax-text-light-200 ax-mb-1;
+                    &:last-child {
+                        @apply ax-mb-0;
+                    }
+                    &:hover,
+                    &.ax-state-active {
+                        border-inline-start-color: rgb(var(--ax-color-primary-500)) !important;
+                    }
+                }
+            }
+
+            &.ax-look-start-line {
+                ax-tab-item {
+                    @apply ax-border-s-2 ax-border-solid ax-border-light-300 dark:ax-border-light-200/10;
+
+                    &.ax-state-active {
+                        @apply ax-border-primary-500 ax-text-primary-500;
+
+                        &:hover {
+                            @apply ax-border-primary-500;
+                        }
+                    }
+
+                    &:hover {
+                        @apply ax-border-primary-500 ax-text-primary-500;
+                    }
+                }
+            }
+
+            &.ax-look-end-line {
+                ax-tab-item {
+                    @apply ax-border-e-2 ax-border-solid ax-border-light-300 dark:ax-border-light-200/10;
+
+                    &.ax-state-active {
+                        @apply ax-border-primary-500 ax-text-primary-500;
+
+                        &:hover {
+                            @apply ax-border-primary-500;
+                        }
+                    }
+
+                    &:hover {
+                        @apply ax-border-primary-500 ax-text-primary-500;
+                    }
+                }
+            }
+
+            &.ax-look-pills {
+                ax-tab-item {
+                    @apply ax-text-light-fore ax-mr-1 ax-rounded dark:ax-text-light-200 ax-mb-1;
+                    &:last-child {
+                        @apply ax-mb-0;
+                    }
+                    &:hover {
+                        @apply ax-bg-light-300 ax-text-light-fore dark:ax-text-light-100;
+                    }
+
+                    &.ax-state-active {
+                        @apply ax-bg-light-300 ax-text-light-fore dark:ax-text-light-50;
+                    }
+                }
+            }
+
+            &.ax-look-pills-color {
+                ax-tab-item {
+                    @apply ax-text-light-fore ax-mr-1 ax-rounded dark:ax-text-light-200 ax-mb-1;
+                    &:last-child {
+                        @apply ax-mb-0;
+                    }
+                    &:hover {
+                        @apply ax-bg-primary-100 ax-text-primary-500 dark:ax-text-light-100;
+                    }
+
+                    &.ax-state-active {
+                        @apply ax-bg-primary-100 ax-text-primary-500 dark:ax-text-light-50;
+                    }
+                }
+            }
+        }
+    }
+}

package/src/components/_tabs.scss

@@ -8,7 +8,7 @@
 
         &:not(.ax-look-custom) {
             ax-tab-item {
-                @apply ax-text-center ax-px-5 ax-cursor-pointer ax-whitespace-nowrap ax-flex ax-items-center ax-justify-center ax-relative ax-text-sm ax-font-medium;
+                @apply ax-text-center ax-px-5 ax-cursor-pointer ax-whitespace-nowrap ax-flex ax-items-center ax-justify-center ax-relative ax-text-sm ax-font-medium ax-select-none;
                 min-height: calc(var(--ax-base-size) * var(--ax-base-ratio));
                 line-height: calc((var(--ax-base-size) * var(--ax-base-ratio)) / 2);
 
@@ -65,7 +65,7 @@
                     &:hover,
                     &.ax-state-active {
                         &:not(.ax-state-disabled) {
-                            border-bottom-color: rgb(var(--ax-color-primary)) !important;
+                            border-bottom-color: rgb(var(--ax-color-primary-500)) !important;
                         }
                     }
                 }
@@ -158,7 +158,7 @@
                     }
                     &:hover,
                     &.ax-state-active {
-                        border-inline-start-color: rgb(var(--ax-color-primary)) !important;
+                        border-inline-start-color: rgb(var(--ax-color-primary-500)) !important;
                     }
                 }
             }
@@ -226,7 +226,7 @@
                     }
 
                     &.ax-state-active {
-                        @apply ax-bg-primary-100 ax-text-primary-500 dark:ax-text-light-50;
+                        @apply ax-bg-primary-200 ax-text-primary-900 dark:ax-text-light-50;
                     }
                 }
             }

package/src/components/_textarea.scss

@@ -10,7 +10,8 @@
         textarea {
             min-height: calc(var(--ax-base-size) * var(--ax-base-ratio)) !important;
             height: fit-content;
-            @apply ax-w-full ax-text-sm ax-p-1.5;
+            line-height:1.7;
+            @apply ax-w-full ax-text-sm ax-p-2.5;
             @include control-states("editor");
           
             &:focus {
@@ -19,19 +20,13 @@
         }
         > .ax-prefix,
         > .ax-suffix {
-            @apply ax-mb-2 ax-p-1.5 ax-absolute;
+            @apply ax-mb-2 ax-p-1.5;
             @include control-states("editor");
             .ax-button {
                 @apply ax-text-sm;
                 --ax-base-size: 5px;
             }
         }
-        > .ax-prefix {
-            @apply ax-top-0 ax-end-0;
-        }
-        > .ax-suffix {
-            @apply ax-bottom-0 ax-end-0;
-        }
 
         &.ax-state-disabled {
             @include control-states("editor-disabled");

package/src/components/_uploader.scss

@@ -1,16 +1,18 @@
 @layer components {
     ax-uploader {
-        @apply ax-relative ax-w-full ax-rounded-default ax-border-2 ax-border-dashed ax-border-light-200 ax-flex ax-items-center ax-justify-center ax-cursor-pointer ax-text-light-400 ax-transition-all ax-bg-center ax-bg-cover;
-        &:hover,
-        &.ax-state-hover {
-            @apply ax-border-primary-500 ax-text-primary-500;
-        }
-        &::before {
-            content: "";
-            @apply ax-pb-[100%];
-        }
-        .upload-icon {
-            @apply ax-text-5xl;
+        &.ax-look-default {
+            @apply ax-relative ax-w-full ax-rounded-default ax-border-2 ax-border-dashed ax-border-light-200 dark:ax-border-white/30 ax-flex ax-items-center ax-justify-center ax-cursor-pointer ax-text-light-400 ax-transition-all ax-bg-center ax-bg-cover;
+            &:hover,
+            &.ax-state-hover {
+                @apply ax-border-primary-500 ax-text-primary-500;
+            }
+            &::before {
+                content: "";
+                @apply ax-pb-[100%];
+            }
+            .upload-icon {
+                @apply ax-text-5xl;
+            }
         }
     }
 }

package/src/icons/Read Me.txt

@@ -1,7 +1,7 @@
-Open *demo.html* to see a list of all the glyphs in your font along with their codes/ligatures.
-
-To use the generated font in desktop programs, you can install the TTF font. In order to copy the character associated with each icon, refer to the text box at the bottom right corner of each glyph in demo.html. The character inside this text box may be invisible; but it can still be copied. See this guide for more info: https://icomoon.io/#docs/local-fonts
-
-You won't need any of the files located under the *demo-files* directory when including the generated font in your own projects.
-
-You can import *selection.json* back to the IcoMoon app using the *Import Icons* button (or via Main Menu → Manage Projects) to retrieve your icon selection.
+Open *demo.html* to see a list of all the glyphs in your font along with their codes/ligatures.
+
+To use the generated font in desktop programs, you can install the TTF font. In order to copy the character associated with each icon, refer to the text box at the bottom right corner of each glyph in demo.html. The character inside this text box may be invisible; but it can still be copied. See this guide for more info: https://icomoon.io/#docs/local-fonts
+
+You won't need any of the files located under the *demo-files* directory when including the generated font in your own projects.
+
+You can import *selection.json* back to the IcoMoon app using the *Import Icons* button (or via Main Menu → Manage Projects) to retrieve your icon selection.

package/src/icons/demo-files/demo.css

@@ -1,152 +1,152 @@
-body {
-  padding: 0;
-  margin: 0;
-  font-family: sans-serif;
-  font-size: 1em;
-  line-height: 1.5;
-  color: #555;
-  background: #fff;
-}
-h1 {
-  font-size: 1.5em;
-  font-weight: normal;
-}
-small {
-  font-size: .66666667em;
-}
-a {
-  color: #e74c3c;
-  text-decoration: none;
-}
-a:hover, a:focus {
-  box-shadow: 0 1px #e74c3c;
-}
-.bshadow0, input {
-  box-shadow: inset 0 -2px #e7e7e7;
-}
-input:hover {
-  box-shadow: inset 0 -2px #ccc;
-}
-input, fieldset {
-  font-family: sans-serif;
-  font-size: 1em;
-  margin: 0;
-  padding: 0;
-  border: 0;
-}
-input {
-  color: inherit;
-  line-height: 1.5;
-  height: 1.5em;
-  padding: .25em 0;
-}
-input:focus {
-  outline: none;
-  box-shadow: inset 0 -2px #449fdb;
-}
-.glyph {
-  font-size: 16px;
-  width: 15em;
-  padding-bottom: 1em;
-  margin-right: 4em;
-  margin-bottom: 1em;
-  float: left;
-  overflow: hidden;
-}
-.liga {
-  width: 80%;
-  width: calc(100% - 2.5em);
-}
-.talign-right {
-  text-align: right;
-}
-.talign-center {
-  text-align: center;
-}
-.bgc1 {
-  background: #f1f1f1;
-}
-.fgc1 {
-  color: #999;
-}
-.fgc0 {
-  color: #000;
-}
-p {
-  margin-top: 1em;
-  margin-bottom: 1em;
-}
-.mvm {
-  margin-top: .75em;
-  margin-bottom: .75em;
-}
-.mtn {
-  margin-top: 0;
-}
-.mtl, .mal {
-  margin-top: 1.5em;
-}
-.mbl, .mal {
-  margin-bottom: 1.5em;
-}
-.mal, .mhl {
-  margin-left: 1.5em;
-  margin-right: 1.5em;
-}
-.mhmm {
-  margin-left: 1em;
-  margin-right: 1em;
-}
-.mls {
-  margin-left: .25em;
-}
-.ptl {
-  padding-top: 1.5em;
-}
-.pbs, .pvs {
-  padding-bottom: .25em;
-}
-.pvs, .pts {
-  padding-top: .25em;
-}
-.unit {
-  float: left;
-}
-.unitRight {
-  float: right;
-}
-.size1of2 {
-  width: 50%;
-}
-.size1of1 {
-  width: 100%;
-}
-.clearfix:before, .clearfix:after {
-  content: " ";
-  display: table;
-}
-.clearfix:after {
-  clear: both;
-}
-.hidden-true {
-  display: none;
-}
-.textbox0 {
-  width: 3em;
-  background: #f1f1f1;
-  padding: .25em .5em;
-  line-height: 1.5;
-  height: 1.5em;
-}
-#testDrive {
-  display: block;
-  padding-top: 24px;
-  line-height: 1.5;
-}
-.fs0 {
-  font-size: 16px;
-}
-.fs1 {
-  font-size: 32px;
-}
-
+body {
+  padding: 0;
+  margin: 0;
+  font-family: sans-serif;
+  font-size: 1em;
+  line-height: 1.5;
+  color: #555;
+  background: #fff;
+}
+h1 {
+  font-size: 1.5em;
+  font-weight: normal;
+}
+small {
+  font-size: .66666667em;
+}
+a {
+  color: #e74c3c;
+  text-decoration: none;
+}
+a:hover, a:focus {
+  box-shadow: 0 1px #e74c3c;
+}
+.bshadow0, input {
+  box-shadow: inset 0 -2px #e7e7e7;
+}
+input:hover {
+  box-shadow: inset 0 -2px #ccc;
+}
+input, fieldset {
+  font-family: sans-serif;
+  font-size: 1em;
+  margin: 0;
+  padding: 0;
+  border: 0;
+}
+input {
+  color: inherit;
+  line-height: 1.5;
+  height: 1.5em;
+  padding: .25em 0;
+}
+input:focus {
+  outline: none;
+  box-shadow: inset 0 -2px #449fdb;
+}
+.glyph {
+  font-size: 16px;
+  width: 15em;
+  padding-bottom: 1em;
+  margin-right: 4em;
+  margin-bottom: 1em;
+  float: left;
+  overflow: hidden;
+}
+.liga {
+  width: 80%;
+  width: calc(100% - 2.5em);
+}
+.talign-right {
+  text-align: right;
+}
+.talign-center {
+  text-align: center;
+}
+.bgc1 {
+  background: #f1f1f1;
+}
+.fgc1 {
+  color: #999;
+}
+.fgc0 {
+  color: #000;
+}
+p {
+  margin-top: 1em;
+  margin-bottom: 1em;
+}
+.mvm {
+  margin-top: .75em;
+  margin-bottom: .75em;
+}
+.mtn {
+  margin-top: 0;
+}
+.mtl, .mal {
+  margin-top: 1.5em;
+}
+.mbl, .mal {
+  margin-bottom: 1.5em;
+}
+.mal, .mhl {
+  margin-left: 1.5em;
+  margin-right: 1.5em;
+}
+.mhmm {
+  margin-left: 1em;
+  margin-right: 1em;
+}
+.mls {
+  margin-left: .25em;
+}
+.ptl {
+  padding-top: 1.5em;
+}
+.pbs, .pvs {
+  padding-bottom: .25em;
+}
+.pvs, .pts {
+  padding-top: .25em;
+}
+.unit {
+  float: left;
+}
+.unitRight {
+  float: right;
+}
+.size1of2 {
+  width: 50%;
+}
+.size1of1 {
+  width: 100%;
+}
+.clearfix:before, .clearfix:after {
+  content: " ";
+  display: table;
+}
+.clearfix:after {
+  clear: both;
+}
+.hidden-true {
+  display: none;
+}
+.textbox0 {
+  width: 3em;
+  background: #f1f1f1;
+  padding: .25em .5em;
+  line-height: 1.5;
+  height: 1.5em;
+}
+#testDrive {
+  display: block;
+  padding-top: 24px;
+  line-height: 1.5;
+}
+.fs0 {
+  font-size: 16px;
+}
+.fs1 {
+  font-size: 32px;
+}
+