@acorex/styles 6.1.0 → 6.1.2

package/src/components/_avatar.scss

@@ -58,10 +58,10 @@
             .ax-default {
                 @apply ax-fill-success-500;
             }
-            .ax-text {
+            ax-text {
                 @apply ax-bg-success-100 ax-text-success-500 dark:ax-bg-success-500 dark:ax-text-success-fore;
             }
-            .ax-icon {
+            ax-icon {
                 @apply ax-bg-success-500;
             }
         }

package/src/components/_button.scss

@@ -11,14 +11,15 @@
                 @apply ax-outline-none;
                 outline: none;
             }
-            .ax-button-text{
+            .ax-button-text {
                 @apply ax-px-2;
             }
         }
         &:focus {
             @apply ax-outline-none;
         }
-        .ax-prefix,.ax-suffix {
+        .ax-prefix,
+        .ax-suffix {
             @apply ax-flex ax-flex-row;
         }
 
@@ -29,7 +30,7 @@
             @apply ax-text-xs;
         }
 
-        &.ax-lg{
+        &.ax-lg {
             @apply ax-text-base #{!important};
         }
 
@@ -910,4 +911,14 @@
             }
         }
     }
+
+    .ax-button-control {
+        @apply ax-text-default-color ax-cursor-pointer ax-text-sm ax-p-2 ax-rounded-default ax-flex ax-items-center ax-justify-center;
+        ax-icon {
+            @apply ax-text-2xl ax-leading-none;
+        }
+        &:hover {
+            @apply ax-bg-light-200 dark:ax-bg-white/[0.12];
+        }
+    }
 }

package/src/components/_calendar.scss

@@ -4,7 +4,7 @@
         @include screen(mobile) {
             @apply ax-w-full;
         }
-     
+
         &.ax-rtl {
             .ax-calendar-header {
                 .ax-calendar-header-buttons {
@@ -175,7 +175,7 @@
         }
 
         .ax-calendar-footer {
-            @apply ax-flex ax-justify-center ax-p-2 ax-bg-light-100 dark:ax-bg-transparent dark:ax-border-transparent;
+            @apply ax-flex ax-justify-center ax-p-2 ax-border-t ax-border-black/[0.12] dark:ax-border-white/[0.12];
         }
     }
     .ax-calendar-picker {

package/src/components/_decoration.scss

@@ -1,37 +1,38 @@
 @layer components {
-    
     .ax-decoration-container,
     .ax-header,
-    .ax-footer
-    {
+    .ax-footer {
         @apply ax-flex ax-justify-between ax-items-center ax-gap-2 ax-bg-white;
         @include control-states("surface");
-        &>.ax-prefix,
-        &>.ax-suffix {
-            @apply ax-flex ax-flex-auto ax-flex-row ax-gap-2 ax-items-center ;
+        & > .ax-prefix,
+        & > .ax-suffix {
+            @apply ax-flex ax-flex-auto ax-flex-row ax-gap-2 ax-items-center;
         }
-        &>.ax-prefix{
-            @apply ax-order-first ax-justify-start ax-items-center ;
+        & > .ax-prefix {
+            @apply ax-order-first ax-justify-start ax-items-center;
         }
-        &>.ax-suffix {
-            @apply ax-order-last ax-justify-end ax-items-center ;
+        & > .ax-suffix {
+            @apply ax-order-last ax-justify-end ax-items-center;
         }
-
-    }
-
-    .ax-title {
-        @apply ax-font-normal;
     }
 
+    .ax-title,
     .ax-icon {
         @apply ax-font-medium;
     }
 
+    .ax-title{
+        @apply ax-text-base ax-text-black/[0.87] dark:ax-text-white;
+    }
+    .ax-sub-title {
+        @apply ax-text-sm ax-font-normal ax-text-black/60 dark:ax-text-white;
+    }
     .ax-close-button {
+        @apply ax-w-6 ax-h-6 ax-grid ax-place-items-center ax-cursor-pointer;
         .ax-icon {
-            @apply ax-text-light-500 dark:ax-text-light-200 ax-cursor-pointer ax-text-xl;
+            @apply ax-text-black/50 dark:ax-text-white ax-text-xl;
             &:hover {
-                @apply ax-text-light-700 dark:ax-text-light-100;
+                @apply ax-text-black/75 dark:ax-text-white;
             }
         }
     }

package/src/components/_editor-container.scss

@@ -32,7 +32,7 @@
             line-height: 1 !important;
         }
         .ax-input,
-        .ax-textare {
+        .ax-textarea {
             &::-webkit-input-placeholder {
                 @apply ax-text-sm;
             }

package/src/components/_list.scss

@@ -38,7 +38,7 @@
                     }
 
                     .ax-list-item {
-                        height: calc(var(--ax-base-size) * var(--ax-base-ratio) - 5px) !important;
+                        height: calc(var(--ax-base-size) * var(--ax-base-ratio)) !important;
                         @apply ax-text-sm ax-flex ax-items-center ax-px-3 ax-text-light-700 dark:ax-text-light-100;
 
                         &:focus,

package/src/components/_textarea.scss

@@ -1,11 +1,11 @@
 @layer components {
     .ax-textarea {
         min-height: calc(var(--ax-base-size) * var(--ax-base-ratio));
-        @apply ax-relative ax-flex ax-flex-col ax-rounded ax-bg-white ax-shadow-sm ax-border ax-border-solid ax-border-light-300 ax-overflow-hidden ax-w-full;
+        @apply ax-relative ax-h-auto ax-flex ax-flex-col ax-rounded ax-bg-white ax-shadow-sm ax-border ax-border-solid ax-border-light-300 ax-overflow-hidden ax-w-full;
         @include control-states("editor");
 
         &:focus-within {
-            @apply ax-ring-2 ax-ring-primary-500 ax-ring-opacity-100 ax-border-transparent;
+            @apply ax-ring-2 ax-ring-primary-500 ax-ring-opacity-100 ;
         }
         textarea {
             min-height: calc(var(--ax-base-size) * var(--ax-base-ratio)) !important;

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;
+}
+

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

@@ -1,30 +1,30 @@
-if (!('boxShadow' in document.body.style)) {
-    document.body.setAttribute('class', 'noBoxShadow');
-}
-
-document.body.addEventListener("click", function(e) {
-    var target = e.target;
-    if (target.tagName === "INPUT" &&
-        target.getAttribute('class').indexOf('liga') === -1) {
-        target.select();
-    }
-});
-
-(function() {
-    var fontSize = document.getElementById('fontSize'),
-        testDrive = document.getElementById('testDrive'),
-        testText = document.getElementById('testText');
-    function updateTest() {
-        testDrive.innerHTML = testText.value || String.fromCharCode(160);
-        if (window.icomoonLiga) {
-            window.icomoonLiga(testDrive);
-        }
-    }
-    function updateSize() {
-        testDrive.style.fontSize = fontSize.value + 'px';
-    }
-    fontSize.addEventListener('change', updateSize, false);
-    testText.addEventListener('input', updateTest, false);
-    testText.addEventListener('change', updateTest, false);
-    updateSize();
-}());
+if (!('boxShadow' in document.body.style)) {
+    document.body.setAttribute('class', 'noBoxShadow');
+}
+
+document.body.addEventListener("click", function(e) {
+    var target = e.target;
+    if (target.tagName === "INPUT" &&
+        target.getAttribute('class').indexOf('liga') === -1) {
+        target.select();
+    }
+});
+
+(function() {
+    var fontSize = document.getElementById('fontSize'),
+        testDrive = document.getElementById('testDrive'),
+        testText = document.getElementById('testText');
+    function updateTest() {
+        testDrive.innerHTML = testText.value || String.fromCharCode(160);
+        if (window.icomoonLiga) {
+            window.icomoonLiga(testDrive);
+        }
+    }
+    function updateSize() {
+        testDrive.style.fontSize = fontSize.value + 'px';
+    }
+    fontSize.addEventListener('change', updateSize, false);
+    testText.addEventListener('input', updateTest, false);
+    testText.addEventListener('change', updateTest, false);
+    updateSize();
+}());