@acorex/styles 5.4.0 → 5.7.0

package/src/components/_range-slider.scss

@@ -1,7 +1,8 @@
 @layer components {
-    .ax-range-slider {
+    ax-range-slider {
         @apply ax-w-full;
-        .ax-range-slider-input {
+        --ax-current-value:0%;
+        input {
             @apply ax-appearance-none ax-w-full ax-h-2 ax-bg-light-100 ax-rounded-full ax-outline-none ax-transition-all dark:ax-bg-light-600;
             &::-webkit-slider-thumb {
                 @apply ax-appearance-none ax-w-5 ax-h-5 ax-bg-white ax-shadow-sm ax-border ax-border-solid ax-border-light-300 ax-rounded-full ax-cursor-pointer dark:ax-bg-light-500;
@@ -11,5 +12,61 @@
             }
             
         }
+
+        &.ax-primary-default
+        {
+            input {
+                 background: linear-gradient(to right, rgb(var(--ax-color-primary-500)) 0%, rgb(var(--ax-color-primary-500)) var(--ax-current-value),rgb(var(--ax-color-light-100)) var(--ax-current-value), rgb(var(--ax-color-light-100)) 100%);
+            }
+        }
+
+        &.ax-secondary-default
+        {
+            input {
+                 background: linear-gradient(to right, rgb(var(--ax-color-secondary-500)) 0%, rgb(var(--ax-color-secondary-500)) var(--ax-current-value),rgb(var(--ax-color-light-100)) var(--ax-current-value), rgb(var(--ax-color-light-100)) 100%);
+            }
+        }
+
+        &.ax-danger-default
+        {
+            input {
+                 background: linear-gradient(to right, rgb(var(--ax-color-danger-500)) 0%, rgb(var(--ax-color-danger-500)) var(--ax-current-value),rgb(var(--ax-color-light-100)) var(--ax-current-value), rgb(var(--ax-color-light-100)) 100%);
+            }
+        }
+
+        &.ax-success-default
+        {
+            input {
+                 background: linear-gradient(to right, rgb(var(--ax-color-success-500)) 0%, rgb(var(--ax-color-success-500)) var(--ax-current-value),rgb(var(--ax-color-light-100)) var(--ax-current-value), rgb(var(--ax-color-light-100)) 100%);
+            }
+        }
+
+        &.ax-warning-default
+        {
+            input {
+                 background: linear-gradient(to right, rgb(var(--ax-color-warning-500)) 0%, rgb(var(--ax-color-warning-500)) var(--ax-current-value),rgb(var(--ax-color-light-100)) var(--ax-current-value), rgb(var(--ax-color-light-100)) 100%);
+            }
+        }
+
+        &.ax-info-default
+        {
+            input {
+                 background: linear-gradient(to right, rgb(var(--ax-color-info-500)) 0%, rgb(var(--ax-color-info-500)) var(--ax-current-value),rgb(var(--ax-color-light-100)) var(--ax-current-value), rgb(var(--ax-color-light-100)) 100%);
+            }
+        }
+
+        &.ax-light-default
+        {
+            input {
+                 background: linear-gradient(to right, rgb(var(--ax-color-light-500)) 0%, rgb(var(--ax-color-light-500)) var(--ax-current-value),rgb(var(--ax-color-light-100)) var(--ax-current-value), rgb(var(--ax-color-light-100)) 100%);
+            }
+        }
+
+        &.ax-dark-default
+        {
+            input {
+                 background: linear-gradient(to right, rgb(var(--ax-color-dark-500)) 0%, rgb(var(--ax-color-dark-500)) var(--ax-current-value),rgb(var(--ax-color-light-100)) var(--ax-current-value), rgb(var(--ax-color-light-100)) 100%);
+            }
+        }
     }
 }

package/src/components/_table.scss

@@ -1,26 +1,59 @@
 @layer components {
     .ax-table {
-        @apply  ax-w-full ax-rounded-md ax-border-collapse ax-border ax-border-light-200 dark:ax-border-dark-400;
+        @apply ax-w-full ax-rounded-md ax-border-collapse ax-border ax-border-light-200 dark:ax-border-white/[0.06] ;
         td {
-            @apply ax-border-b ax-border-light-200 dark:ax-border-dark-400 ax-px-6 ax-py-4 ax-text-sm;
+            @apply ax-border-b ax-border-light-200 dark:ax-border-white/[0.06] ax-px-6 ax-py-4 ax-text-sm;
         }
         thead {
+            @apply ax-bg-light-100 dark:ax-bg-light-700 ax-shadow-sm ax-border-b ax-border-light-200 dark:ax-border-white/[0.06];
             th {
                 @apply ax-text-sm ax-font-bold ax-text-start ax-py-4 ax-px-6;
             }
-            tr {
-                @apply ax-border-b ax-border-light-200 dark:ax-border-dark-400;
-            }
+           
         }
         &.ax-table-alternate {
             tbody {
                 tr {
-                    &:nth-child(odd) {
+                    &:nth-child(even) {
                         @apply ax-bg-light-100 dark:ax-bg-dark-400/20;
                     }
                 }
             }
         }
+        &.ax-table-bordered {
+            thead {
+                th {
+                    @apply ax-border-t-0 #{!important};
+                }
+            }
+            tbody {
+                
+                tr {
+                    &:last-child {
+                        td {
+                            @apply ax-border-b-0;
+                        }
+                    }
+                    td {
+                        &:last-child {
+                            @apply ax-border-b-0;
+                        }
+                    }
+                }
+            }
+
+            td,
+            th {
+                @apply ax-border ax-border-light-200 dark:ax-border-white/[0.06];
+                &:first-child {
+                    @apply ax-border-s-0;
+                }
+                &:last-child {
+                    @apply ax-border-e-0;
+                }
+            }
+           
+        }
         @media screen and (max-width: 601px) {
             &.ax-table-responsive {
                 @apply ax-break-words ax-block ax-border-0;
@@ -36,7 +69,7 @@
                     }
                 }
                 tr {
-                    @apply ax-border ax-border-light-200 dark:ax-border-dark-400;
+                    @apply ax-border ax-border-light-200 dark:ax-border-white/[0.06];
                 }
                 tr,
                 tbody {

package/src/components/_tabs.scss

@@ -11,9 +11,9 @@
                 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;
-                    cursor: not-allowed !important;
+                    // 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 {
@@ -49,22 +49,26 @@
                 @include control-states("editor");
 
                 ax-tab-item {
-                    @apply ax-bg-white ax-border-r ax-border-b-2 ax-border-solid ax-border-light-300 dark:ax-text-light-200;
+                    @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 {
-                        @apply ax-rounded-l;
+                        @apply ax-rounded-s;
                     }
 
                     &:last-child {
-                        @apply ax-rounded-r ax-border-r-0;
+                        @apply ax-rounded-e ax-border-e-0;
                     }
 
                     &:hover,
-                    &.ax-state-active {
-                        border-bottom-color: rgb(var(--ax-color-primary)) !important;
+                    &.ax-state-active,
+                    {
+                        &:not(.ax-state-disabled){
+                            border-bottom-color: rgb(var(--ax-color-primary)) !important;
+
+                        }
                     }
                 }
             }

package/src/components/index.scss

@@ -42,4 +42,5 @@
 @import "./toast";
 @import "./tooltip";
 @import "./treeview";
-@import "./decoration";
+@import "./decoration";
+@import "./data-table";

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

package/src/icons/demo.html

@@ -9,10 +9,66 @@
     <link rel="stylesheet" href="style.css"></head>
 <body>
     <div class="bgc1 clearfix">
-        <h1 class="mhmm mvm"><span class="fgc1">Font Name:</span> acorex-icon <small class="fgc1">(Glyphs:&nbsp;33)</small></h1>
+        <h1 class="mhmm mvm"><span class="fgc1">Font Name:</span> acorex-icon <small class="fgc1">(Glyphs:&nbsp;37)</small></h1>
     </div>
     <div class="clearfix mhl ptl">
         <h1 class="mvm mtn fgc1">Grid Size: 16</h1>
+        <div class="glyph fs1">
+            <div class="clearfix bshadow0 pbs">
+                <span class="ax-ic-empty-box"></span>
+                <span class="mls"> ax-ic-empty-box</span>
+            </div>
+            <fieldset class="fs0 size1of1 clearfix hidden-false">
+                <input type="text" readonly value="e924" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe924;" class="unitRight size1of2 talign-right" />
+            </fieldset>
+            <div class="fs0 bshadow0 clearfix hidden-true">
+                <span class="unit pvs fgc1">liga: </span>
+                <input type="text" readonly value="" class="liga unitRight" />
+            </div>
+        </div>
+        <div class="glyph fs1">
+            <div class="clearfix bshadow0 pbs">
+                <span class="ax-ic-colorize"></span>
+                <span class="mls"> ax-ic-colorize</span>
+            </div>
+            <fieldset class="fs0 size1of1 clearfix hidden-false">
+                <input type="text" readonly value="e921" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe921;" class="unitRight size1of2 talign-right" />
+            </fieldset>
+            <div class="fs0 bshadow0 clearfix hidden-true">
+                <span class="unit pvs fgc1">liga: </span>
+                <input type="text" readonly value="" class="liga unitRight" />
+            </div>
+        </div>
+        <div class="glyph fs1">
+            <div class="clearfix bshadow0 pbs">
+                <span class="ax-ic-pase"></span>
+                <span class="mls"> ax-ic-pase</span>
+            </div>
+            <fieldset class="fs0 size1of1 clearfix hidden-false">
+                <input type="text" readonly value="e922" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe922;" class="unitRight size1of2 talign-right" />
+            </fieldset>
+            <div class="fs0 bshadow0 clearfix hidden-true">
+                <span class="unit pvs fgc1">liga: </span>
+                <input type="text" readonly value="" class="liga unitRight" />
+            </div>
+        </div>
+        <div class="glyph fs1">
+            <div class="clearfix bshadow0 pbs">
+                <span class="ax-ic-copy"></span>
+                <span class="mls"> ax-ic-copy</span>
+            </div>
+            <fieldset class="fs0 size1of1 clearfix hidden-false">
+                <input type="text" readonly value="e923" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe923;" class="unitRight size1of2 talign-right" />
+            </fieldset>
+            <div class="fs0 bshadow0 clearfix hidden-true">
+                <span class="unit pvs fgc1">liga: </span>
+                <input type="text" readonly value="" class="liga unitRight" />
+            </div>
+        </div>
         <div class="glyph fs1">
             <div class="clearfix bshadow0 pbs">
                 <span class="ax-ic-star-filled"></span>

package/src/icons/fonts/acorex-icon.svg

@@ -40,4 +40,8 @@
 <glyph unicode="&#xe91e;" glyph-name="star-filled" d="M512 223.147l263.68-159.147-69.973 299.947 232.96 201.813-306.773 26.027-119.893 282.88-119.893-282.88-306.773-26.027 232.96-201.813-69.973-299.947 263.68 159.147z" />
 <glyph unicode="&#xe91f;" glyph-name="star-half-filled" d="M512 580.693l40.107-132.693h120.32l-96.853-69.12 39.68-128.427-103.253 78.507-103.253-78.507 39.68 128.427-96.853 69.12h120.32l40.107 132.693zM512 874.667l-103.253-341.333h-323.413l263.253-188.16-99.84-323.84 263.253 200.107 263.68-200.107-100.267 323.84 263.253 188.16h-323.413l-103.253 341.333z" />
 <glyph unicode="&#xe920;" glyph-name="star-outline" d="M938.667 565.76l-306.773 26.453-119.893 282.453-119.893-282.88-306.773-26.027 232.96-201.813-69.973-299.947 263.68 159.147 263.68-159.147-69.547 299.947 232.533 201.813zM512 302.933l-160.427-96.853 42.667 182.613-141.653 122.88 186.88 16.213 72.533 171.947 72.96-172.373 186.88-16.213-141.653-122.88 42.667-182.613-160.853 97.28z" />
+<glyph unicode="&#xe921;" glyph-name="colorize" d="M128 64v179.2l402.133 402.133-76.8 76.8 43.733 43.733 98.133-98.133 151.467 151.467q11.733 11.733 25.067 11.733t25.067-11.733l86.4-86.4q11.733-11.733 11.733-25.067t-11.733-25.067l-151.467-151.467 98.133-98.133-43.733-43.733-76.8 76.8-402.133-402.133zM192 128h92.8l378.667 378.667-92.8 92.8-378.667-378.667zM685.867 576l132.267 132.267-45.867 45.867-132.267-132.267zM685.867 576v0z" />
+<glyph unicode="&#xe922;" glyph-name="pase" d="M512 768q18.133 0 30.4 12.267t12.267 30.4-12.267 30.4-30.4 12.267-30.4-12.267-12.267-30.4 12.267-30.4 30.4-12.267zM192 64q-27.733 0-45.867 18.133t-18.133 45.867v640q0 27.733 18.133 45.867t45.867 18.133h215.467q7.467 37.333 36.8 61.333t67.733 24 67.733-24 36.8-61.333h215.467q27.733 0 45.867-18.133t18.133-45.867v-640q0-27.733-18.133-45.867t-45.867-18.133zM192 128h640q0 0 0 0t0 0v640q0 0 0 0t0 0h-64v-96h-512v96h-64q0 0 0 0t0 0v-640q0 0 0 0t0 0z" />
+<glyph unicode="&#xe923;" glyph-name="copy" d="M320 150.4q-25.6 0-44.8 19.2t-19.2 44.8v597.333q0 25.6 19.2 44.8t44.8 19.2h469.333q25.6 0 44.8-19.2t19.2-44.8v-597.333q0-25.6-19.2-44.8t-44.8-19.2zM320 214.4h469.333q0 0 0 0t0 0v597.333q0 0 0 0t0 0h-469.333q0 0 0 0t0 0v-597.333q0 0 0 0t0 0zM192 22.4q-25.6 0-44.8 19.2t-19.2 44.8v643.2h64v-643.2q0 0 0 0t0 0h505.6v-64zM320 811.733q0 0 0 0t0 0v-597.333q0 0 0 0t0 0 0 0 0 0v597.333q0 0 0 0t0 0z" />
+<glyph unicode="&#xe924;" glyph-name="empty-box" d="M1014.681 608.85c-0.047 0.062-0.073 0.129-0.126 0.193l-111.222 138.473c-1.25 1.554-2.662 2.892-4.164 4.089-4.787 5.678-11.868 9.364-19.873 9.364h-734.589c-8.012 0-15.080-3.681-19.869-9.364-1.503-1.197-2.917-2.522-4.178-4.089l-111.209-138.473c-0.051-0.064-0.075-0.131-0.126-0.193-5.656-4.789-9.324-11.848-9.324-19.834v-427.898c0-14.406 11.68-26.088 26.086-26.088h971.831c14.406 0 26.086 11.682 26.086 26.088v427.898c0.002 7.985-3.668 15.044-9.322 19.834zM905.387 661.655l37.395-46.553h-37.395v46.553zM853.213 708.795v-93.691h-195.332c-5.572 0-10.982-1.784-15.467-5.082l-130.399-95.963-130.426 95.976c-4.484 3.285-9.898 5.069-15.465 5.069h-195.334v93.691h682.424zM118.622 615.102h-37.395l37.395 46.553v-46.553zM971.835 187.205h-919.664v375.726h305.395l138.985-102.277c9.198-6.751 21.731-6.764 30.926 0.011l138.956 102.268h305.401v-375.729z" />
 </font></defs></svg>