@acorex/styles 5.0.50 → 5.0.53

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@acorex/styles",
-    "version": "5.0.50",
+    "version": "5.0.53",
     "description": "",
     "main": "index.js",
     "scripts": {

package/src/base/index.scss

@@ -6,11 +6,12 @@
 }
 
 :root {
-    --ax-base:8px;
+    --ax-base: 8px;
     --ax-base-size: 8px;
     --ax-base-ratio: 6;
     --ax-color-default-background: 255, 255, 255;
     --ax-color-default-color: 107, 114, 128;
+    --ax-overlay-full-width: 93;
     @include colors($theme-colors);
 }
 
@@ -22,7 +23,6 @@ body {
     font-size: 16px;
 }
 
-
 html.ax-dark,
 html.ax-dark * {
     --tw-ring-offset-color: #151b24;

package/src/components/_avatar.scss

@@ -0,0 +1,130 @@
+@layer components {
+    ax-avatar-group,
+    .ax-avatar-group {
+        @apply ax-flex;
+        ax-avatar{
+            @apply ax-border-2 ax-border-white -ax-m-1 dark:ax-border-dark-500;
+        }
+    }
+    ax-avatar,
+    .ax-avatar {
+        @apply ax-relative ax-flex ax-items-center ax-justify-center ax-w-16 ax-h-16;
+        ax-badge{
+            @apply ax-absolute -ax-top-1.5 ;
+            right: -6px;
+        }
+        .ax-avatar-container {
+            @apply ax-w-full ax-h-full ax-rounded-md;
+            .ax-default-avatar,
+            .ax-text-avatar,
+            .ax-icon-avatar,
+            .ax-image-avatar {
+                @apply ax-w-full ax-h-full ax-flex ax-items-center ax-justify-center ax-bg-light-200 dark:ax-bg-dark-500 ax-overflow-hidden;
+            }
+        }
+        &.ax-primary-default {
+            .ax-default-avatar {
+                svg {
+                    @apply ax-fill-primary-500;
+                }
+            }
+            .ax-text-avatar {
+                @apply ax-bg-primary-100 ax-text-primary-500 dark:ax-bg-primary-500 dark:ax-text-primary-fore;
+            }
+            .ax-icon-avatar {
+                @apply ax-bg-primary-500;
+            }
+        }
+        &.ax-secondary-default {
+            .ax-default-avatar {
+                svg {
+                    @apply ax-fill-secondary-500;
+                }
+            }
+            .ax-text-avatar {
+                @apply ax-bg-secondary-100 ax-text-secondary-500 dark:ax-bg-secondary-500 dark:ax-text-secondary-fore;
+            }
+            .ax-icon-avatar {
+                @apply ax-bg-secondary-500;
+            }
+        }
+        &.ax-success-default {
+            .ax-default-avatar {
+                svg {
+                    @apply ax-fill-success-500;
+                }
+            }
+            .ax-text-avatar {
+                @apply ax-bg-success-100 ax-text-success-500 dark:ax-bg-success-500 dark:ax-text-success-fore;
+            }
+            .ax-icon-avatar {
+                @apply ax-bg-success-500;
+            }
+        }
+        &.ax-warning-default {
+            .ax-default-avatar {
+                svg {
+                    @apply ax-fill-warning-500;
+                }
+            }
+            .ax-text-avatar {
+                @apply ax-bg-warning-100 ax-text-warning-500 dark:ax-bg-warning-500 dark:ax-text-warning-fore;
+            }
+            .ax-icon-avatar {
+                @apply ax-bg-warning-500;
+            }
+        }
+        &.ax-danger-default {
+            .ax-default-avatar {
+                svg {
+                    @apply ax-fill-danger-500;
+                }
+            }
+            .ax-text-avatar {
+                @apply ax-bg-danger-100 ax-text-danger-500 dark:ax-bg-danger-500 dark:ax-text-danger-fore;
+            }
+            .ax-icon-avatar {
+                @apply ax-bg-danger-500;
+            }
+        }
+        &.ax-info-default {
+            .ax-default-avatar {
+                svg {
+                    @apply ax-fill-info-500;
+                }
+            }
+            .ax-text-avatar {
+                @apply ax-bg-info-100 ax-text-info-500 dark:ax-bg-info-500 dark:ax-text-info-fore;
+            }
+            .ax-icon-avatar {
+                @apply ax-bg-info-500;
+            }
+        }
+        &.ax-light-default {
+            .ax-default-avatar {
+                svg {
+                    @apply ax-fill-light-400;
+                }
+            }
+            .ax-text-avatar {
+                @apply ax-bg-light-100 ax-text-light-500 dark:ax-bg-light-500 dark:ax-text-light-fore;
+            }
+            .ax-icon-avatar {
+                @apply ax-bg-light-500;
+            }
+        }
+        &.ax-dark-default {
+            .ax-default-avatar {
+                svg {
+                    @apply ax-fill-dark-500;
+                }
+            }
+            .ax-text-avatar {
+                @apply ax-bg-dark-100 ax-text-dark-500 dark:ax-bg-dark-500 dark:ax-text-dark-fore;
+            }
+            .ax-icon-avatar {
+                @apply ax-bg-dark-500;
+            }
+        }
+    }
+}

package/src/components/_breadcrumbs.scss

@@ -0,0 +1,24 @@
+@layer components {
+    ax-breadcrumbs,
+    .ax-breadcrumbs {
+        @apply ax-flex ax-items-center;
+        ax-breadcrumbs-item,
+        .ax-breadcrumbs-item {
+            ax-prefix {
+                @apply ax-pe-2;
+            }
+            ax-suffix {
+                @apply ax-ps-2;
+            }
+            @apply ax-relative ax-flex ax-items-center ax-ps-3 ax-pe-3.5 ax-text-sm ax-cursor-pointer first:ax-ps-0;
+
+            &:not(:last-child) {
+                &::after {
+                    @apply ax-absolute ax-text-light-300 dark:ax-opacity-30;
+                    inset-inline-end:0px;
+                    content: "/";
+                }
+            }
+        }
+    }
+}

package/src/components/_button.scss

@@ -217,14 +217,14 @@
         }
         // twotone
         &.ax-primary-twotone {
-            @apply ax-bg-primary-50 ax-text-primary-500 ax-border-transparent dark:ax-bg-primary-300 dark:ax-text-primary-700;
+            @apply ax-bg-primary-100 ax-text-primary-500 ax-border-transparent dark:ax-bg-primary-300 dark:ax-text-primary-700;
             &:not(.ax-state-disabled) {
                 &:hover,
                 &:focus {
-                    @apply ax-bg-primary-100 ax-text-primary-700;
+                    @apply ax-bg-primary-200 ax-text-primary-700;
                 }
                 &:active {
-                    @apply ax-bg-primary-200 ax-text-primary-700;
+                    @apply ax-bg-primary-300 ax-text-primary-700;
                 }
             }
 
@@ -233,14 +233,14 @@
             }
         }
         &.ax-secondary-twotone {
-            @apply ax-bg-secondary-50 ax-text-secondary-500 ax-border-transparent dark:ax-bg-secondary-300 dark:ax-text-secondary-700;
+            @apply ax-bg-secondary-100 ax-text-secondary-500 ax-border-transparent dark:ax-bg-secondary-300 dark:ax-text-secondary-700;
             &:not(.ax-state-disabled) {
                 &:hover,
                 &:focus {
-                    @apply ax-bg-secondary-100 ax-text-secondary-700;
+                    @apply ax-bg-secondary-200 ax-text-secondary-700;
                 }
                 &:active {
-                    @apply ax-bg-secondary-200 ax-text-secondary-700;
+                    @apply ax-bg-secondary-300 ax-text-secondary-700;
                 }
             }
 
@@ -249,14 +249,14 @@
             }
         }
         &.ax-warning-twotone {
-            @apply ax-bg-warning-50 ax-text-warning-500 ax-border-transparent dark:ax-bg-warning-300 dark:ax-text-warning-700;
+            @apply ax-bg-warning-100 ax-text-warning-500 ax-border-transparent dark:ax-bg-warning-300 dark:ax-text-warning-700;
             &:not(.ax-state-disabled) {
                 &:hover,
                 &:focus {
-                    @apply ax-bg-warning-100 ax-text-warning-700;
+                    @apply ax-bg-warning-200 ax-text-warning-700;
                 }
                 &:active {
-                    @apply ax-bg-warning-200 ax-text-warning-700;
+                    @apply ax-bg-warning-300 ax-text-warning-700;
                 }
             }
 
@@ -265,14 +265,14 @@
             }
         }
         &.ax-danger-twotone {
-            @apply ax-bg-danger-50 ax-text-danger-500 ax-border-transparent dark:ax-bg-danger-300 dark:ax-text-danger-700;
+            @apply ax-bg-danger-100 ax-text-danger-500 ax-border-transparent dark:ax-bg-danger-300 dark:ax-text-danger-700;
             &:not(.ax-state-disabled) {
                 &:hover,
                 &:focus {
-                    @apply ax-bg-danger-100 ax-text-danger-700;
+                    @apply ax-bg-danger-200 ax-text-danger-700;
                 }
                 &:active {
-                    @apply ax-bg-danger-200 ax-text-danger-700;
+                    @apply ax-bg-danger-300 ax-text-danger-700;
                 }
             }
 
@@ -281,14 +281,14 @@
             }
         }
         &.ax-success-twotone {
-            @apply ax-bg-success-50 ax-text-success-500 ax-border-transparent dark:ax-bg-success-300 dark:ax-text-success-700;
+            @apply ax-bg-success-100 ax-text-success-500 ax-border-transparent dark:ax-bg-success-300 dark:ax-text-success-700;
             &:not(.ax-state-disabled) {
                 &:hover,
                 &:focus {
-                    @apply ax-bg-success-100 ax-text-success-700;
+                    @apply ax-bg-success-200 ax-text-success-700;
                 }
                 &:active {
-                    @apply ax-bg-success-200 ax-text-success-700;
+                    @apply ax-bg-success-300 ax-text-success-700;
                 }
             }
 
@@ -297,14 +297,14 @@
             }
         }
         &.ax-info-twotone {
-            @apply ax-bg-info-50 ax-text-info-500 ax-border-transparent dark:ax-bg-info-300 dark:ax-text-info-700;
+            @apply ax-bg-info-100 ax-text-info-500 ax-border-transparent dark:ax-bg-info-300 dark:ax-text-info-700;
             &:not(.ax-state-disabled) {
                 &:hover,
                 &:focus {
-                    @apply ax-bg-info-100 ax-text-info-700;
+                    @apply ax-bg-info-200 ax-text-info-700;
                 }
                 &:active {
-                    @apply ax-bg-info-200 ax-text-info-700;
+                    @apply ax-bg-info-300 ax-text-info-700;
                 }
             }
 

package/src/components/_calendar.scss

@@ -9,16 +9,16 @@
         }
 
         .ax-calendar-header {
-            @apply ax-grid ax-grid-cols-12 ax-py-1 ax-px-2 ax-border-b ax-border-light-300 ax-border-solid dark:ax-border-transparent;
+            @apply ax-flex ax-justify-between ax-py-1 ax-px-2 ax-border-b ax-border-light-300 ax-border-solid dark:ax-border-transparent;
 
-            .ax-nav-button {
-                @apply ax-col-span-8 ax-justify-start;
-            }
+            // .ax-nav-button {
+            //     @apply ax-col-span-8 ax-justify-start;
+            // }
 
-            .ax-prev-button,
-            .ax-next-button {
-                @apply ax-col-span-2 ax-justify-center ax-ms-1;
-            }
+            // .ax-prev-button,
+            // .ax-next-button {
+            //     @apply ax-col-span-2 ax-justify-center ax-ms-1;
+            // }
         }
 
         .ax-calendar-body {

package/src/components/_collapse.scss

@@ -0,0 +1,52 @@
+@layer components {
+    ax-collpase,
+    .ax-collapse {
+        @apply ax-border ax-border-light-200 ax-block ax-text-sm ax-rounded ax-overflow-hidden;
+
+        .ax-collapse-header {
+            @apply ax-cursor-pointer ax-select-none;
+         
+            &.ax-state-collapsed {
+                .ax-collapse-header-container {
+                    @apply ax-border-b-0;
+                    .ax-collapse-arrow {
+                        @apply -ax-rotate-90;
+                    }
+                }
+                .ax-collapse-custom-header-container{
+                    @apply ax-border-b-0;
+                }
+            }
+            .ax-collapse-custom-header-container{
+                @apply ax-bg-light-50 ax-border-b ax-border-light-200;
+            }
+            .ax-collapse-header-container {
+                @apply ax-flex ax-justify-between ax-px-3 ax-py-1.5 ax-bg-light-50 ax-border-b ax-border-light-200;
+                .ax-collapse-arrow {
+                    @apply ax-inline-block ax-text-xl ax-me-2 ax-rotate-90;
+                }
+            }
+        }
+        .ax-collapse-body {
+            @apply ax-p-3;
+        }
+    }
+    .ax-collapse-group {
+        @apply ax-block ax-border ax-border-light-200 ax-rounded ax-overflow-hidden;
+
+        ax-collpase,
+        .ax-collapse {
+            @apply ax-rounded-none ax-border-none;
+            .ax-collapse-header-container {
+                @apply ax-border-t ax-border-light-200;
+            }
+        }
+        ax-collapse {
+            &:first-child {
+                .ax-collapse-header-container {
+                    @apply ax-border-t-0;
+                }
+            }
+        }
+    }
+}

package/src/components/_dialog.scss

@@ -1,13 +1,15 @@
 @layer components {
     .ax-dialog {
         @apply ax-grid ax-grid-cols-12 ax-gap-4 ax-px-6 ax-py-5 ax-relative ax-bg-white ax-shadow-md ax-border ax-border-solid ax-border-light-300 ax-rounded-lg ax-outline-none ax-overflow-hidden;
-        @include control-states('surface');
-        @screen sm {
-            width: 98vw;
+        width: 25vw;
+        @include control-states("surface");
+        @include screen("mobile"){
+            width: calc(var(--ax-overlay-full-width) * 1vw);
         }
-        @screen md {
-            width: 25vw;
+        @include screen("tablet"){
+            width: 60vw;
         }
+
         .ax-dialog-icon-side {
             @apply ax-flex ax-justify-center ax-col-span-2;
             .ax-dialog-icon {
@@ -56,6 +58,6 @@
                 @apply ax-text-info-500 ax-bg-info-50;
             }
         }
-     
     }
-}
+    
+}

package/src/components/_drawer.scss

@@ -35,7 +35,7 @@
                 }
 
                 &.ax-collapsed {
-                    margin-inline-start: calc(-1 * var(--attr-width));
+                    margin-inline-start: calc(-2 * var(--attr-width));
                 }
 
                 &.ax-expanded {
@@ -51,17 +51,17 @@
 
                 &.ax-drawer-overlay {
                     &.ax-collapsed {
-                        right: calc(-1 * var(--attr-width));
+                        right: calc(-2 * var(--attr-width));
                     }
 
                     &.ax-expanded {
-                        right: calc(-1 * var(--attr-diff));
+                        right: calc(-2 * var(--attr-diff));
                     }
                 }
 
                 &.ax-drawer-push {
                     &.ax-collapsed {
-                        margin-inline-end: calc(-1 * var(--attr-width));
+                        margin-inline-end: calc(-2 * var(--attr-width));
                     }
 
                     &.ax-expanded {

package/src/components/_popup.scss

@@ -21,7 +21,7 @@
     }
 
     .ax-popup {
-        @apply ax-flex ax-flex-col ax-bg-white ax-w-6/12 ax-shadow-lg ax-border ax-border-solid ax-border-light-300 ax-rounded ax-outline-none ax-p-0 ax-max-h-[98vh] ax-min-h-fit;
+        @apply ax-flex ax-flex-col ax-bg-white ax-w-6/12 ax-shadow-lg ax-border ax-border-solid ax-border-light-300 ax-rounded ax-outline-none ax-p-0 ax-max-h-[98vh] ax-min-h-fit ax-mx-auto;
         @include control-states("surface");
 
         .ax-popup-header {
@@ -42,14 +42,12 @@
         .ax-popup-main-container {
             @apply ax-overflow-auto ax-flex-1;
         }
-        .ax-popup-footer-container{
-
+        .ax-popup-footer-container {
         }
         &.ax-popup-full {
             @apply ax-w-screen;
             height: calc(100 * var(--ax-vh));
             max-height: calc(100 * var(--ax-vh));
-
         }
 
         &.ax-fit {
@@ -89,18 +87,9 @@
         }
 
         @media all and (min-width: 768px) and (max-width: 1023px) {
-            &.ax-popup-sm {
-                width: 100vw;
-                max-height: calc(100 * var(--ax-vh));
-                .ax-popup-main {
-                    @apply ax-h-screen;
-                }
-            }
-
             &.ax-popup-md {
                 width: 500px !important;
             }
-
             &.ax-popup-lg {
                 width: 700px !important;
             }
@@ -123,12 +112,11 @@
         }
 
         @media all and (min-width: 0px) and (max-width: 424px) {
-            &.ax-popup-sm,
             &.ax-popup-md,
             &.ax-popup-lg {
-                width: 100vw;
-                height: calc(100 * var(--ax-vh));
-                max-height: calc(100 * var(--ax-vh));
+                width: calc(var(--ax-overlay-full-width) * 1vw);
+                height: calc(var(--ax-overlay-full-width) * var(--ax-vh));
+                max-height: calc(var(--ax-overlay-full-width) * var(--ax-vh));
                 .ax-popup-main {
                     @apply ax-h-screen;
                 }
@@ -136,28 +124,3 @@
         }
     }
 }
-
-// @layer components {
-//     ax-popup {
-//         @apply ax-bg-white ax-rounded-md;
-//         // ax-page-footer,
-//         // ax-page-header {
-//         //     @apply ax-grid ax-grid-cols-12 ax-gap-2 ax-px-3 ax-py-2 ax-border-solid ax-border-light-300 dark:ax-border-light-700;
-
-//         //     ax-prefix {
-//         //         @apply ax-flex ax-col-span-6 ax-col-start-1 ax-col-end-7 ax-justify-start;
-//         //     }
-
-//         //     ax-suffix {
-//         //         @apply ax-flex ax-col-span-6 ax-col-start-7 ax-col-end-13 ax-justify-end;
-//         //     }
-//         // }
-//         // ax-page-footer {
-//         //     @apply ax-border-t;
-//         // }
-
-//         // ax-page-header {
-//         //     @apply ax-border-b;
-//         // }
-//     }
-// }

package/src/components/_progress.scss

@@ -0,0 +1,62 @@
+@layer components {
+    ax-progress-bar,
+    .ax-progress-bar {
+        @apply ax-flex ax-justify-between ax-items-center ax-text-sm;
+        @include control-states("editor");
+        ax-prefix{
+            @apply ax-pe-2;
+        }
+        ax-suffix{
+            @apply ax-ps-2;
+        }
+        .ax-progress-bar-container {
+            @apply ax-w-full ax-h-2 ax-relative ax-bg-light-200 ax-flex ax-rounded-full;
+            .ax-progress-bar-rise {
+                max-width: 100%;
+                transition: width 1s;
+                @apply ax-bg-primary-500 ax-h-full ax-absolute ax-start-0 ax-rounded-full;
+            }
+        }
+
+        &.ax-primary-default {
+            .ax-progress-bar-rise {
+                @apply ax-bg-primary-500;
+            }
+        }
+        &.ax-secondary-default {
+            .ax-progress-bar-rise {
+                @apply ax-bg-secondary-500;
+            }
+        }
+        &.ax-success-default {
+            .ax-progress-bar-rise {
+                @apply ax-bg-success-500;
+            }
+        }
+        &.ax-warning-default {
+            .ax-progress-bar-rise {
+                @apply ax-bg-warning-500;
+            }
+        }
+        &.ax-danger-default {
+            .ax-progress-bar-rise {
+                @apply ax-bg-danger-500;
+            }
+        }
+        &.ax-info-default {
+            .ax-progress-bar-rise {
+                @apply ax-bg-info-500;
+            }
+        }
+        &.ax-light-default {
+            .ax-progress-bar-rise {
+                @apply ax-bg-light-300;
+            }
+        }
+        &.ax-dark-default {
+            .ax-progress-bar-rise {
+                @apply ax-bg-dark-500 dark:ax-bg-dark-300;
+            }
+        }
+    }
+}

package/src/components/_rating.scss

@@ -0,0 +1,14 @@
+@layer components {
+    .ax-rating-start {
+        &:hover {
+            &::before {
+                content: "\e91f" !important; // half filled 
+            }
+        }
+        &.ax-state-selected{
+            &::before {
+                content: "\e91e" !important;
+            }
+        }
+    }
+}

package/src/components/_result.scss

@@ -0,0 +1,25 @@
+@layer components {
+    ax-result,
+    .ax-result {
+        @apply ax-flex ax-flex-col;
+        .ax-result-icon {
+            @apply ax-text-6xl ax-text-center;
+        }
+        .ax-result-title,
+        .ax-result-description {
+            @apply ax-mt-4 ax-text-center;
+        }
+        .ax-result-title {
+            @apply ax-text-2xl ax-font-semibold ax-text-light-700 dark:ax-text-light-50;
+        }
+        .ax-result-description {
+            @apply ax-text-sm ax-text-light-500 dark:ax-text-light-100;
+        }
+        .ax-custom-icon,.ax-custom-image{
+            @apply ax-flex ax-items-center ax-justify-center;
+        }
+        .ax-result-content {
+            @apply ax-mt-4;
+        }
+    }
+}

package/src/components/_selection-list.scss

@@ -39,13 +39,13 @@
       }
     }
   }
-  .ax-boxed-style {
+  .ax-card-style {
     .ax-selection-list {
-      &.ax-vertical {
+      &.ax-vertical,&.ax-horizontal {
         & > div {
-          @apply ax-p-4 ax-border ax-border-light-300 ax-rounded-md;
+          @apply ax-p-4 ax-border ax-border-light-300 ax-rounded-md ax-shadow-sm;
           &.ax-state-selected {
-            @apply ax-border-primary-500 ax-ring-1 ax-ring-primary-500; 
+            @apply ax-border-primary-500 ax-ring-1 ax-ring-primary-500 ax-shadow-primary-500; 
           }
         }
       }

package/src/components/_table.scss

@@ -32,7 +32,7 @@
                     @apply ax-block ax-float-left ax-w-full ax-clear-both ax-bg-white ax-px-1.5 ax-py-2.5 ax-box-border last:ax-border-0;
                     &:before {
                         content: attr(data-label);
-                        @apply ax-block;
+                        @apply ax-block ax-font-bold;
                     }
                 }
                 tr {

package/src/components/_tabs.scss

@@ -126,7 +126,7 @@
 
             &.ax-look-pills-color {
                 ax-tab-item {
-                    @apply ax-text-light-fore ax-mr-1 ax-rounded dark:ax-text-primary-200;
+                    @apply ax-text-light-fore ax-me-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;

package/src/components/_treeview.scss

@@ -32,14 +32,14 @@
                                 right: 12px;
                                 bottom: -4px;
                                 margin-left: -1px;
-                                border-right: 1px solid #d9d9d9;
+                                // border-right: 1px solid #d9d9d9;
                                 content: " ";
                             }
                             &::after {
                                 position: absolute;
                                 width: 10px;
                                 height: 14px;
-                                border-bottom: 1px solid #d9d9d9;
+                                // border-bottom: 1px solid #d9d9d9;
                                 content: " ";
                             }
                         }

package/src/components/index.scss

@@ -1,9 +1,12 @@
 @import "./alert";
+@import "./avatar";
 @import "./badge";
+@import "./breadcrumbs";
 @import "./button";
 @import "./calendar";
 @import "./carousel";
 @import "./checkbox";
+@import "./collapse";
 @import "./datapager";
 @import "./datepicker";
 @import "./dialog";
@@ -19,8 +22,11 @@
 @import "./loading";
 @import "./menu";
 @import "./popup";
+@import "./progress";
 @import "./radio";
 @import "./range-slider";
+@import "./rating";
+@import "./result";
 @import "./selectbox";
 @import "./selection-list";
 @import "./side-menu";

package/src/icons/demo.html

@@ -9,10 +9,52 @@
     <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;30)</small></h1>
+        <h1 class="mhmm mvm"><span class="fgc1">Font Name:</span> acorex-icon <small class="fgc1">(Glyphs:&nbsp;33)</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-star-filled"></span>
+                <span class="mls"> ax-ic-star-filled</span>
+            </div>
+            <fieldset class="fs0 size1of1 clearfix hidden-false">
+                <input type="text" readonly value="e91e" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe91e;" 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-half-filled"></span>
+                <span class="mls"> ax-ic-star-half-filled</span>
+            </div>
+            <fieldset class="fs0 size1of1 clearfix hidden-false">
+                <input type="text" readonly value="e91f" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe91f;" 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-outline"></span>
+                <span class="mls"> ax-ic-star-outline</span>
+            </div>
+            <fieldset class="fs0 size1of1 clearfix hidden-false">
+                <input type="text" readonly value="e920" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe920;" 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-remove"></span>

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

@@ -37,4 +37,7 @@
 <glyph unicode="&#xe91b;" glyph-name="remove" d="M810.667 405.333h-597.333v85.333h597.333v-85.333z" />
 <glyph unicode="&#xe91c;" glyph-name="plus" d="M810.667 405.333h-256v-256h-85.333v256h-256v85.333h256v256h85.333v-256h256v-85.333z" />
 <glyph unicode="&#xe91d;" glyph-name="magnify" d="M661.333 362.667h-33.707l-11.947 11.52c41.813 48.64 66.987 111.787 66.987 180.48 0 153.173-124.16 277.333-277.333 277.333s-277.333-124.16-277.333-277.333 124.16-277.333 277.333-277.333c68.693 0 131.84 25.173 180.48 66.987l11.52-11.947v-33.707l213.333-212.907 63.573 63.573-212.907 213.333zM405.333 362.667c-106.24 0-192 85.76-192 192s85.76 192 192 192 192-85.76 192-192-85.76-192-192-192z" />
+<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" />
 </font></defs></svg>

package/src/icons/selection.json

@@ -1 +1 @@
-{"IcoMoonType":"selection","icons":[{"icon":{"paths":["M810.667 554.667h-597.333v-85.333h597.333v85.333z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["remove"]},"attrs":[{}],"properties":{"order":4,"id":29,"name":"remove","prevSize":32,"code":59675},"setIdx":0,"setId":2,"iconIdx":0},{"icon":{"paths":["M810.667 554.667h-256v256h-85.333v-256h-256v-85.333h256v-256h85.333v256h256v85.333z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["plus"]},"attrs":[{}],"properties":{"order":3,"id":28,"name":"plus","prevSize":32,"code":59676},"setIdx":0,"setId":2,"iconIdx":1},{"icon":{"paths":["M661.333 597.333h-33.707l-11.947-11.52c41.813-48.64 66.987-111.787 66.987-180.48 0-153.173-124.16-277.333-277.333-277.333s-277.333 124.16-277.333 277.333 124.16 277.333 277.333 277.333c68.693 0 131.84-25.173 180.48-66.987l11.52 11.947v33.707l213.333 212.907 63.573-63.573-212.907-213.333zM405.333 597.333c-106.24 0-192-85.76-192-192s85.76-192 192-192 192 85.76 192 192-85.76 192-192 192z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["search"]},"attrs":[{}],"properties":{"order":2,"id":27,"name":"magnify","prevSize":32,"code":59677},"setIdx":0,"setId":2,"iconIdx":2},{"icon":{"paths":["M853.333 512c0 188.16-153.173 341.333-341.333 341.333s-341.333-153.173-341.333-341.333 153.173-341.333 341.333-341.333 341.333 153.173 341.333 341.333zM938.667 512c0-235.52-191.147-426.667-426.667-426.667s-426.667 191.147-426.667 426.667c0 235.52 191.147 426.667 426.667 426.667s426.667-191.147 426.667-426.667v0zM512 554.667h170.667v-85.333h-170.667v-128l-170.667 170.667 170.667 170.667v-128z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"tags":["arrow-circle"],"grid":16},"attrs":[{}],"properties":{"order":29,"id":0,"name":"arrow-circle","prevSize":32,"code":59665},"setIdx":0,"setId":2,"iconIdx":3},{"icon":{"paths":["M85.333 512c0 235.52 191.147 426.667 426.667 426.667s426.667-191.147 426.667-426.667c0-235.52-191.147-426.667-426.667-426.667s-426.667 191.147-426.667 426.667zM512 469.333h170.667v85.333h-170.667v128l-170.667-170.667 170.667-170.667v128z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"tags":["arrow-circle-fill"],"grid":16},"attrs":[{}],"properties":{"order":30,"id":1,"name":"arrow-circle-fill","prevSize":32,"code":59666},"setIdx":0,"setId":2,"iconIdx":4},{"icon":{"paths":["M853.333 469.333h-519.253l238.507-238.507-60.587-60.16-341.333 341.333 341.333 341.333 60.16-60.16-238.080-238.507h519.253v-85.333z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"tags":["arrow-half"],"grid":16},"attrs":[{}],"properties":{"order":31,"id":2,"name":"arrow-half","prevSize":32,"code":59667},"setIdx":0,"setId":2,"iconIdx":5},{"icon":{"paths":["M597.333 298.667l-213.333 213.333 213.333 213.333v-426.667z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"tags":["arrow-fill"],"grid":16},"attrs":[{}],"properties":{"order":32,"id":3,"name":"arrow-fill","prevSize":32,"code":59668},"setIdx":0,"setId":2,"iconIdx":6},{"icon":{"paths":["M896 469.333h-604.587l152.747-153.173-60.16-60.16-256 256 256 256 60.16-60.16-152.747-153.173h604.587z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"tags":["arrow"],"grid":16},"attrs":[{}],"properties":{"order":33,"id":4,"name":"arrow","prevSize":32,"code":59669},"setIdx":0,"setId":2,"iconIdx":7},{"icon":{"paths":["M512 248.747l135.253 135.253 60.16-60.16-195.413-195.84-195.84 195.84 60.587 60.16 135.253-135.253zM512 775.253l-135.253-135.253-60.16 60.16 195.413 195.84 195.84-195.84-60.587-60.16-135.253 135.253z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"tags":["unfold"],"grid":16},"attrs":[{}],"properties":{"order":34,"id":5,"name":"unfold","prevSize":32,"code":59670},"setIdx":0,"setId":2,"iconIdx":8},{"icon":{"paths":["M853.333 512l-60.16-60.16-238.507 238.080v-519.253h-85.333v519.253l-238.080-238.507-60.587 60.587 341.333 341.333 341.333-341.333z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"tags":["half-arrow"],"grid":16},"attrs":[{}],"properties":{"order":35,"id":6,"name":"half-arrow","prevSize":32,"code":59671},"setIdx":0,"setId":2,"iconIdx":9},{"icon":{"paths":["M896 469.333v-341.333h-341.333l140.373 140.373-426.667 426.667-140.373-140.373v341.333h341.333l-140.373-140.373 426.667-426.667z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"tags":["fullscreen"],"grid":16},"attrs":[{}],"properties":{"order":36,"id":7,"name":"fullscreen","prevSize":32,"code":59672},"setIdx":0,"setId":2,"iconIdx":10},{"icon":{"paths":["M938.667 145.493l-225.707 225.707 140.373 140.8h-341.333v-341.333l140.373 140.373 226.133-225.707 60.16 60.16zM145.493 938.667l225.707-225.707 140.8 140.373v-341.333h-341.333l140.373 140.373-225.707 226.133 60.16 60.16z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"tags":["close-fullscreen"],"grid":16},"attrs":[{}],"properties":{"order":37,"id":8,"name":"close-fullscreen","prevSize":32,"code":59673},"setIdx":0,"setId":2,"iconIdx":11},{"icon":{"paths":["M316.16 793.173l60.587 60.16 135.253-135.253 135.253 135.253 60.16-60.16-195.413-195.84-195.84 195.84zM707.84 230.827l-60.587-60.16-135.253 135.253-135.253-135.253-60.587 60.16 195.84 195.84 195.84-195.84z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"tags":["fold"],"grid":16},"attrs":[{}],"properties":{"order":38,"id":9,"name":"fold","prevSize":32,"code":59674},"setIdx":0,"setId":2,"iconIdx":12},{"icon":{"paths":["M512 256c161.707 0 305.92 90.88 376.32 234.667-70.4 143.787-214.613 234.667-376.32 234.667s-305.92-90.88-376.32-234.667c70.4-143.787 214.613-234.667 376.32-234.667zM512 170.667c-213.333 0-395.52 132.693-469.333 320 73.813 187.307 256 320 469.333 320s395.52-132.693 469.333-320c-73.813-187.307-256-320-469.333-320zM512 384c58.88 0 106.667 47.787 106.667 106.667s-47.787 106.667-106.667 106.667-106.667-47.787-106.667-106.667 47.787-106.667 106.667-106.667zM512 298.667c-105.813 0-192 86.187-192 192s86.187 192 192 192 192-86.187 192-192-86.187-192-192-192z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"tags":["eye"],"grid":16},"attrs":[{}],"properties":{"order":27,"id":10,"name":"eye","prevSize":32,"code":59649},"setIdx":0,"setId":2,"iconIdx":13},{"icon":{"paths":["M512 256c161.707 0 305.92 90.88 376.32 234.667-25.173 52.053-60.587 96.853-102.827 133.12l60.16 60.16c59.307-52.48 106.24-118.187 135.68-193.28-73.813-187.307-256-320-469.333-320-54.187 0-106.24 8.533-155.307 24.32l70.4 70.4c27.733-5.547 55.893-9.387 84.907-9.387zM466.347 304.64l88.32 88.32c24.32 10.667 43.947 30.293 54.613 54.613l88.32 88.32c3.413-14.507 5.973-29.867 5.973-45.653 0.427-105.813-85.76-191.573-191.573-191.573-15.787 0-30.72 2.133-45.653 5.973zM85.76 165.12l114.347 114.347c-69.547 54.613-124.587 127.147-157.44 211.2 73.813 187.307 256 320 469.333 320 64.853 0 127.147-12.373 184.32-34.987l145.92 145.92 60.16-60.16-756.48-756.907-60.16 60.587zM405.76 485.12l111.36 111.36c-1.707 0.427-3.413 0.853-5.12 0.853-58.88 0-106.667-47.787-106.667-106.667 0-2.133 0.427-3.413 0.427-5.547zM260.693 340.053l74.667 74.667c-9.813 23.467-15.36 49.067-15.36 75.947 0 105.813 86.187 192 192 192 26.88 0 52.48-5.547 75.52-15.36l41.813 41.813c-37.547 10.24-76.8 16.213-117.333 16.213-161.707 0-305.92-90.88-376.32-234.667 29.867-61.013 73.387-111.36 125.013-150.613z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"tags":["eye-off"],"grid":16},"attrs":[{}],"properties":{"order":10,"id":11,"name":"eye-off","prevSize":32,"code":59650},"setIdx":0,"setId":2,"iconIdx":14},{"icon":{"paths":["M853.333 128h-42.667v-85.333h-85.333v85.333h-426.667v-85.333h-85.333v85.333h-42.667c-46.933 0-85.333 38.4-85.333 85.333v682.667c0 46.933 38.4 85.333 85.333 85.333h682.667c46.933 0 85.333-38.4 85.333-85.333v-682.667c0-46.933-38.4-85.333-85.333-85.333zM853.333 896h-682.667v-554.667h682.667v554.667z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"tags":["calendar"],"grid":16},"attrs":[{}],"properties":{"order":11,"id":12,"name":"calendar","prevSize":32,"code":59651},"setIdx":0,"setId":2,"iconIdx":15},{"icon":{"paths":["M511.573 85.333c-235.52 0-426.24 191.147-426.24 426.667s190.72 426.667 426.24 426.667c235.947 0 427.093-191.147 427.093-426.667s-191.147-426.667-427.093-426.667zM512 853.333c-188.587 0-341.333-152.747-341.333-341.333s152.747-341.333 341.333-341.333 341.333 152.747 341.333 341.333-152.747 341.333-341.333 341.333z","M533.333 298.667h-64v256l224 134.4 32-52.48-192-113.92z"],"attrs":[{},{}],"isMulticolor":false,"isMulticolor2":false,"tags":["time"],"grid":16},"attrs":[{},{}],"properties":{"order":25,"id":13,"name":"time","prevSize":32,"code":59648},"setIdx":0,"setId":2,"iconIdx":16},{"icon":{"paths":["M384 689.92l-177.92-177.92-60.587 60.16 238.507 238.507 512-512-60.16-60.16z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"tags":["check"],"grid":16},"attrs":[{}],"properties":{"order":12,"id":14,"name":"check","prevSize":32,"code":59652},"setIdx":0,"setId":2,"iconIdx":17},{"icon":{"paths":["M512 85.333c-235.52 0-426.667 191.147-426.667 426.667s191.147 426.667 426.667 426.667 426.667-191.147 426.667-426.667-191.147-426.667-426.667-426.667zM426.667 725.333l-213.333-213.333 60.16-60.16 153.173 152.747 323.84-323.84 60.16 60.587-384 384z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"tags":["check-filled"],"grid":16},"attrs":[{}],"properties":{"order":13,"id":15,"name":"check-filled","prevSize":32,"code":59653},"setIdx":0,"setId":2,"iconIdx":18},{"icon":{"paths":["M657.493 316.16l-60.16-60.16-256 256 256 256 60.16-60.16-195.413-195.84 195.413-195.84z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"tags":["chevron"],"grid":16},"attrs":[{}],"properties":{"order":14,"id":16,"name":"chevron","prevSize":32,"code":59654},"setIdx":0,"setId":2,"iconIdx":19},{"icon":{"paths":["M810.667 273.493l-60.16-60.16-238.507 238.507-238.507-238.507-60.16 60.16 238.507 238.507-238.507 238.507 60.16 60.16 238.507-238.507 238.507 238.507 60.16-60.16-238.507-238.507 238.507-238.507z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"tags":["close"],"grid":16},"attrs":[{}],"properties":{"order":15,"id":17,"name":"close","prevSize":32,"code":59655},"setIdx":0,"setId":2,"iconIdx":20},{"icon":{"paths":["M512 85.333c-235.52 0-426.667 191.147-426.667 426.667s191.147 426.667 426.667 426.667 426.667-191.147 426.667-426.667-191.147-426.667-426.667-426.667zM554.667 725.333h-85.333v-85.333h85.333v85.333zM554.667 554.667h-85.333v-256h85.333v256z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"tags":["error-filled"],"grid":16},"attrs":[{}],"properties":{"order":16,"id":18,"name":"error-filled","prevSize":32,"code":59656},"setIdx":0,"setId":2,"iconIdx":21},{"icon":{"paths":["M785.493 707.84l-195.84-195.84 195.84-195.84-60.16-60.16-256 256 256 256zM256 256h85.333v512h-85.333z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"tags":["chevron-page"],"grid":16},"attrs":[{}],"properties":{"order":17,"id":19,"name":"chevron-page","prevSize":32,"code":59657},"setIdx":0,"setId":2,"iconIdx":22},{"icon":{"paths":["M512 85.333c-235.52 0-426.667 191.147-426.667 426.667s191.147 426.667 426.667 426.667 426.667-191.147 426.667-426.667-191.147-426.667-426.667-426.667zM554.667 725.333h-85.333v-256h85.333v256zM554.667 384h-85.333v-85.333h85.333v85.333z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"tags":["info-filled"],"grid":16},"attrs":[{}],"properties":{"order":18,"id":20,"name":"info-filled","prevSize":32,"code":59658},"setIdx":0,"setId":2,"iconIdx":23},{"icon":{"paths":["M750.507 768l60.16-60.16-195.413-195.84 195.413-195.84-60.16-60.16-256 256z","M469.333 768l60.16-60.16-195.413-195.84 195.413-195.84-60.16-60.16-256 256z"],"attrs":[{},{}],"isMulticolor":false,"isMulticolor2":false,"tags":["chevron-double"],"grid":16},"attrs":[{},{}],"properties":{"order":19,"id":21,"name":"chevron-double","prevSize":32,"code":59659},"setIdx":0,"setId":2,"iconIdx":24},{"icon":{"paths":["M128 768h768v-85.333h-768v85.333zM128 554.667h768v-85.333h-768v85.333zM128 256v85.333h768v-85.333h-768z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"tags":["menu"],"grid":16},"attrs":[{}],"properties":{"order":20,"id":22,"name":"menu","prevSize":32,"code":59660},"setIdx":0,"setId":2,"iconIdx":25},{"icon":{"paths":["M512 341.333c46.933 0 85.333-38.4 85.333-85.333s-38.4-85.333-85.333-85.333-85.333 38.4-85.333 85.333 38.4 85.333 85.333 85.333zM512 426.667c-46.933 0-85.333 38.4-85.333 85.333s38.4 85.333 85.333 85.333 85.333-38.4 85.333-85.333-38.4-85.333-85.333-85.333zM512 682.667c-46.933 0-85.333 38.4-85.333 85.333s38.4 85.333 85.333 85.333 85.333-38.4 85.333-85.333-38.4-85.333-85.333-85.333z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"tags":["more"],"grid":16},"attrs":[{}],"properties":{"order":21,"id":23,"name":"more","prevSize":32,"code":59661},"setIdx":0,"setId":2,"iconIdx":26},{"icon":{"paths":["M42.667 896h938.667l-469.333-810.667-469.333 810.667zM554.667 768h-85.333v-85.333h85.333v85.333zM554.667 597.333h-85.333v-170.667h85.333v170.667z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"tags":["warning-filled"],"grid":16},"attrs":[{}],"properties":{"order":22,"id":24,"name":"warning-filled","prevSize":32,"code":59662},"setIdx":0,"setId":2,"iconIdx":27},{"icon":{"paths":["M256 256h85.333v512h-85.333zM405.333 512l362.667 256v-512z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"tags":["chevron-page-filled"],"grid":16},"attrs":[{}],"properties":{"order":23,"id":25,"name":"chevron-page-filled","prevSize":32,"code":59663},"setIdx":0,"setId":2,"iconIdx":28},{"icon":{"paths":["M810.667 128h-42.667v-85.333h-85.333v85.333h-341.333v-85.333h-85.333v85.333h-42.667c-47.36 0-85.333 38.4-85.333 85.333v597.333c0 46.933 37.973 85.333 85.333 85.333h597.333c46.933 0 85.333-38.4 85.333-85.333v-597.333c0-46.933-38.4-85.333-85.333-85.333zM810.667 810.667h-597.333v-426.667h597.333v426.667zM810.667 298.667h-597.333v-85.333h597.333v85.333zM298.667 469.333h213.333v213.333h-213.333z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"tags":["calendar-today"],"grid":16},"attrs":[{}],"properties":{"order":24,"id":26,"name":"calendar-today","prevSize":32,"code":59664},"setIdx":0,"setId":2,"iconIdx":29}],"height":1024,"metadata":{"name":"acorex-icon"},"preferences":{"showGlyphs":true,"showQuickUse":true,"showQuickUse2":true,"showSVGs":true,"fontPref":{"prefix":"ax-ic-","metadata":{"fontFamily":"acorex-icon","majorVersion":5,"minorVersion":29},"metrics":{"emSize":1024,"baseline":6.25,"whitespace":50},"embed":false,"noie8":true,"ie7":false,"showSelector":true,"showMetrics":true,"showMetadata":true,"showVersion":true,"selector":"","classSelector":".icon","cssVars":true,"cssVarsFormat":"scss"},"imagePref":{"prefix":"icon-","png":true,"useClassSelector":true,"color":0,"bgColor":16777215,"classSelector":".icon"},"historySize":50,"showCodes":true,"gridSize":16,"showGrid":false,"showLiga":false}}
+{"IcoMoonType":"selection","icons":[{"icon":{"paths":["M512 736.853l263.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"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["star-filled"]},"attrs":[{}],"properties":{"order":3,"id":32,"name":"star-filled","prevSize":32,"code":59678},"setIdx":0,"setId":2,"iconIdx":0},{"icon":{"paths":["M512 379.307l40.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 85.333l-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"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["star-half-filled"]},"attrs":[{}],"properties":{"order":4,"id":31,"name":"star-half-filled","prevSize":32,"code":59679},"setIdx":0,"setId":2,"iconIdx":1},{"icon":{"paths":["M938.667 394.24l-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 657.067l-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"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["star-outline"]},"attrs":[{}],"properties":{"order":6,"id":30,"name":"star-outline","prevSize":32,"code":59680},"setIdx":0,"setId":2,"iconIdx":2},{"icon":{"paths":["M810.667 554.667h-597.333v-85.333h597.333v85.333z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"tags":["remove"],"grid":16},"attrs":[{}],"properties":{"order":4,"id":0,"name":"remove","prevSize":32,"code":59675},"setIdx":0,"setId":2,"iconIdx":3},{"icon":{"paths":["M810.667 554.667h-256v256h-85.333v-256h-256v-85.333h256v-256h85.333v256h256v85.333z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"tags":["plus"],"grid":16},"attrs":[{}],"properties":{"order":3,"id":1,"name":"plus","prevSize":32,"code":59676},"setIdx":0,"setId":2,"iconIdx":4},{"icon":{"paths":["M661.333 597.333h-33.707l-11.947-11.52c41.813-48.64 66.987-111.787 66.987-180.48 0-153.173-124.16-277.333-277.333-277.333s-277.333 124.16-277.333 277.333 124.16 277.333 277.333 277.333c68.693 0 131.84-25.173 180.48-66.987l11.52 11.947v33.707l213.333 212.907 63.573-63.573-212.907-213.333zM405.333 597.333c-106.24 0-192-85.76-192-192s85.76-192 192-192 192 85.76 192 192-85.76 192-192 192z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"tags":["search"],"grid":16},"attrs":[{}],"properties":{"order":2,"id":2,"name":"magnify","prevSize":32,"code":59677},"setIdx":0,"setId":2,"iconIdx":5},{"icon":{"paths":["M853.333 512c0 188.16-153.173 341.333-341.333 341.333s-341.333-153.173-341.333-341.333 153.173-341.333 341.333-341.333 341.333 153.173 341.333 341.333zM938.667 512c0-235.52-191.147-426.667-426.667-426.667s-426.667 191.147-426.667 426.667c0 235.52 191.147 426.667 426.667 426.667s426.667-191.147 426.667-426.667v0zM512 554.667h170.667v-85.333h-170.667v-128l-170.667 170.667 170.667 170.667v-128z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"tags":["arrow-circle"],"grid":16},"attrs":[{}],"properties":{"order":29,"id":3,"name":"arrow-circle","prevSize":32,"code":59665},"setIdx":0,"setId":2,"iconIdx":6},{"icon":{"paths":["M85.333 512c0 235.52 191.147 426.667 426.667 426.667s426.667-191.147 426.667-426.667c0-235.52-191.147-426.667-426.667-426.667s-426.667 191.147-426.667 426.667zM512 469.333h170.667v85.333h-170.667v128l-170.667-170.667 170.667-170.667v128z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"tags":["arrow-circle-fill"],"grid":16},"attrs":[{}],"properties":{"order":30,"id":4,"name":"arrow-circle-fill","prevSize":32,"code":59666},"setIdx":0,"setId":2,"iconIdx":7},{"icon":{"paths":["M853.333 469.333h-519.253l238.507-238.507-60.587-60.16-341.333 341.333 341.333 341.333 60.16-60.16-238.080-238.507h519.253v-85.333z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"tags":["arrow-half"],"grid":16},"attrs":[{}],"properties":{"order":31,"id":5,"name":"arrow-half","prevSize":32,"code":59667},"setIdx":0,"setId":2,"iconIdx":8},{"icon":{"paths":["M597.333 298.667l-213.333 213.333 213.333 213.333v-426.667z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"tags":["arrow-fill"],"grid":16},"attrs":[{}],"properties":{"order":32,"id":6,"name":"arrow-fill","prevSize":32,"code":59668},"setIdx":0,"setId":2,"iconIdx":9},{"icon":{"paths":["M896 469.333h-604.587l152.747-153.173-60.16-60.16-256 256 256 256 60.16-60.16-152.747-153.173h604.587z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"tags":["arrow"],"grid":16},"attrs":[{}],"properties":{"order":33,"id":7,"name":"arrow","prevSize":32,"code":59669},"setIdx":0,"setId":2,"iconIdx":10},{"icon":{"paths":["M512 248.747l135.253 135.253 60.16-60.16-195.413-195.84-195.84 195.84 60.587 60.16 135.253-135.253zM512 775.253l-135.253-135.253-60.16 60.16 195.413 195.84 195.84-195.84-60.587-60.16-135.253 135.253z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"tags":["unfold"],"grid":16},"attrs":[{}],"properties":{"order":34,"id":8,"name":"unfold","prevSize":32,"code":59670},"setIdx":0,"setId":2,"iconIdx":11},{"icon":{"paths":["M853.333 512l-60.16-60.16-238.507 238.080v-519.253h-85.333v519.253l-238.080-238.507-60.587 60.587 341.333 341.333 341.333-341.333z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"tags":["half-arrow"],"grid":16},"attrs":[{}],"properties":{"order":35,"id":9,"name":"half-arrow","prevSize":32,"code":59671},"setIdx":0,"setId":2,"iconIdx":12},{"icon":{"paths":["M896 469.333v-341.333h-341.333l140.373 140.373-426.667 426.667-140.373-140.373v341.333h341.333l-140.373-140.373 426.667-426.667z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"tags":["fullscreen"],"grid":16},"attrs":[{}],"properties":{"order":36,"id":10,"name":"fullscreen","prevSize":32,"code":59672},"setIdx":0,"setId":2,"iconIdx":13},{"icon":{"paths":["M938.667 145.493l-225.707 225.707 140.373 140.8h-341.333v-341.333l140.373 140.373 226.133-225.707 60.16 60.16zM145.493 938.667l225.707-225.707 140.8 140.373v-341.333h-341.333l140.373 140.373-225.707 226.133 60.16 60.16z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"tags":["close-fullscreen"],"grid":16},"attrs":[{}],"properties":{"order":37,"id":11,"name":"close-fullscreen","prevSize":32,"code":59673},"setIdx":0,"setId":2,"iconIdx":14},{"icon":{"paths":["M316.16 793.173l60.587 60.16 135.253-135.253 135.253 135.253 60.16-60.16-195.413-195.84-195.84 195.84zM707.84 230.827l-60.587-60.16-135.253 135.253-135.253-135.253-60.587 60.16 195.84 195.84 195.84-195.84z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"tags":["fold"],"grid":16},"attrs":[{}],"properties":{"order":38,"id":12,"name":"fold","prevSize":32,"code":59674},"setIdx":0,"setId":2,"iconIdx":15},{"icon":{"paths":["M512 256c161.707 0 305.92 90.88 376.32 234.667-70.4 143.787-214.613 234.667-376.32 234.667s-305.92-90.88-376.32-234.667c70.4-143.787 214.613-234.667 376.32-234.667zM512 170.667c-213.333 0-395.52 132.693-469.333 320 73.813 187.307 256 320 469.333 320s395.52-132.693 469.333-320c-73.813-187.307-256-320-469.333-320zM512 384c58.88 0 106.667 47.787 106.667 106.667s-47.787 106.667-106.667 106.667-106.667-47.787-106.667-106.667 47.787-106.667 106.667-106.667zM512 298.667c-105.813 0-192 86.187-192 192s86.187 192 192 192 192-86.187 192-192-86.187-192-192-192z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"tags":["eye"],"grid":16},"attrs":[{}],"properties":{"order":27,"id":13,"name":"eye","prevSize":32,"code":59649},"setIdx":0,"setId":2,"iconIdx":16},{"icon":{"paths":["M512 256c161.707 0 305.92 90.88 376.32 234.667-25.173 52.053-60.587 96.853-102.827 133.12l60.16 60.16c59.307-52.48 106.24-118.187 135.68-193.28-73.813-187.307-256-320-469.333-320-54.187 0-106.24 8.533-155.307 24.32l70.4 70.4c27.733-5.547 55.893-9.387 84.907-9.387zM466.347 304.64l88.32 88.32c24.32 10.667 43.947 30.293 54.613 54.613l88.32 88.32c3.413-14.507 5.973-29.867 5.973-45.653 0.427-105.813-85.76-191.573-191.573-191.573-15.787 0-30.72 2.133-45.653 5.973zM85.76 165.12l114.347 114.347c-69.547 54.613-124.587 127.147-157.44 211.2 73.813 187.307 256 320 469.333 320 64.853 0 127.147-12.373 184.32-34.987l145.92 145.92 60.16-60.16-756.48-756.907-60.16 60.587zM405.76 485.12l111.36 111.36c-1.707 0.427-3.413 0.853-5.12 0.853-58.88 0-106.667-47.787-106.667-106.667 0-2.133 0.427-3.413 0.427-5.547zM260.693 340.053l74.667 74.667c-9.813 23.467-15.36 49.067-15.36 75.947 0 105.813 86.187 192 192 192 26.88 0 52.48-5.547 75.52-15.36l41.813 41.813c-37.547 10.24-76.8 16.213-117.333 16.213-161.707 0-305.92-90.88-376.32-234.667 29.867-61.013 73.387-111.36 125.013-150.613z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"tags":["eye-off"],"grid":16},"attrs":[{}],"properties":{"order":10,"id":14,"name":"eye-off","prevSize":32,"code":59650},"setIdx":0,"setId":2,"iconIdx":17},{"icon":{"paths":["M853.333 128h-42.667v-85.333h-85.333v85.333h-426.667v-85.333h-85.333v85.333h-42.667c-46.933 0-85.333 38.4-85.333 85.333v682.667c0 46.933 38.4 85.333 85.333 85.333h682.667c46.933 0 85.333-38.4 85.333-85.333v-682.667c0-46.933-38.4-85.333-85.333-85.333zM853.333 896h-682.667v-554.667h682.667v554.667z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"tags":["calendar"],"grid":16},"attrs":[{}],"properties":{"order":11,"id":15,"name":"calendar","prevSize":32,"code":59651},"setIdx":0,"setId":2,"iconIdx":18},{"icon":{"paths":["M511.573 85.333c-235.52 0-426.24 191.147-426.24 426.667s190.72 426.667 426.24 426.667c235.947 0 427.093-191.147 427.093-426.667s-191.147-426.667-427.093-426.667zM512 853.333c-188.587 0-341.333-152.747-341.333-341.333s152.747-341.333 341.333-341.333 341.333 152.747 341.333 341.333-152.747 341.333-341.333 341.333z","M533.333 298.667h-64v256l224 134.4 32-52.48-192-113.92z"],"attrs":[{},{}],"isMulticolor":false,"isMulticolor2":false,"tags":["time"],"grid":16},"attrs":[{},{}],"properties":{"order":25,"id":16,"name":"time","prevSize":32,"code":59648},"setIdx":0,"setId":2,"iconIdx":19},{"icon":{"paths":["M384 689.92l-177.92-177.92-60.587 60.16 238.507 238.507 512-512-60.16-60.16z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"tags":["check"],"grid":16},"attrs":[{}],"properties":{"order":12,"id":17,"name":"check","prevSize":32,"code":59652},"setIdx":0,"setId":2,"iconIdx":20},{"icon":{"paths":["M512 85.333c-235.52 0-426.667 191.147-426.667 426.667s191.147 426.667 426.667 426.667 426.667-191.147 426.667-426.667-191.147-426.667-426.667-426.667zM426.667 725.333l-213.333-213.333 60.16-60.16 153.173 152.747 323.84-323.84 60.16 60.587-384 384z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"tags":["check-filled"],"grid":16},"attrs":[{}],"properties":{"order":13,"id":18,"name":"check-filled","prevSize":32,"code":59653},"setIdx":0,"setId":2,"iconIdx":21},{"icon":{"paths":["M657.493 316.16l-60.16-60.16-256 256 256 256 60.16-60.16-195.413-195.84 195.413-195.84z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"tags":["chevron"],"grid":16},"attrs":[{}],"properties":{"order":14,"id":19,"name":"chevron","prevSize":32,"code":59654},"setIdx":0,"setId":2,"iconIdx":22},{"icon":{"paths":["M810.667 273.493l-60.16-60.16-238.507 238.507-238.507-238.507-60.16 60.16 238.507 238.507-238.507 238.507 60.16 60.16 238.507-238.507 238.507 238.507 60.16-60.16-238.507-238.507 238.507-238.507z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"tags":["close"],"grid":16},"attrs":[{}],"properties":{"order":15,"id":20,"name":"close","prevSize":32,"code":59655},"setIdx":0,"setId":2,"iconIdx":23},{"icon":{"paths":["M512 85.333c-235.52 0-426.667 191.147-426.667 426.667s191.147 426.667 426.667 426.667 426.667-191.147 426.667-426.667-191.147-426.667-426.667-426.667zM554.667 725.333h-85.333v-85.333h85.333v85.333zM554.667 554.667h-85.333v-256h85.333v256z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"tags":["error-filled"],"grid":16},"attrs":[{}],"properties":{"order":16,"id":21,"name":"error-filled","prevSize":32,"code":59656},"setIdx":0,"setId":2,"iconIdx":24},{"icon":{"paths":["M785.493 707.84l-195.84-195.84 195.84-195.84-60.16-60.16-256 256 256 256zM256 256h85.333v512h-85.333z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"tags":["chevron-page"],"grid":16},"attrs":[{}],"properties":{"order":17,"id":22,"name":"chevron-page","prevSize":32,"code":59657},"setIdx":0,"setId":2,"iconIdx":25},{"icon":{"paths":["M512 85.333c-235.52 0-426.667 191.147-426.667 426.667s191.147 426.667 426.667 426.667 426.667-191.147 426.667-426.667-191.147-426.667-426.667-426.667zM554.667 725.333h-85.333v-256h85.333v256zM554.667 384h-85.333v-85.333h85.333v85.333z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"tags":["info-filled"],"grid":16},"attrs":[{}],"properties":{"order":18,"id":23,"name":"info-filled","prevSize":32,"code":59658},"setIdx":0,"setId":2,"iconIdx":26},{"icon":{"paths":["M750.507 768l60.16-60.16-195.413-195.84 195.413-195.84-60.16-60.16-256 256z","M469.333 768l60.16-60.16-195.413-195.84 195.413-195.84-60.16-60.16-256 256z"],"attrs":[{},{}],"isMulticolor":false,"isMulticolor2":false,"tags":["chevron-double"],"grid":16},"attrs":[{},{}],"properties":{"order":19,"id":24,"name":"chevron-double","prevSize":32,"code":59659},"setIdx":0,"setId":2,"iconIdx":27},{"icon":{"paths":["M128 768h768v-85.333h-768v85.333zM128 554.667h768v-85.333h-768v85.333zM128 256v85.333h768v-85.333h-768z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"tags":["menu"],"grid":16},"attrs":[{}],"properties":{"order":20,"id":25,"name":"menu","prevSize":32,"code":59660},"setIdx":0,"setId":2,"iconIdx":28},{"icon":{"paths":["M512 341.333c46.933 0 85.333-38.4 85.333-85.333s-38.4-85.333-85.333-85.333-85.333 38.4-85.333 85.333 38.4 85.333 85.333 85.333zM512 426.667c-46.933 0-85.333 38.4-85.333 85.333s38.4 85.333 85.333 85.333 85.333-38.4 85.333-85.333-38.4-85.333-85.333-85.333zM512 682.667c-46.933 0-85.333 38.4-85.333 85.333s38.4 85.333 85.333 85.333 85.333-38.4 85.333-85.333-38.4-85.333-85.333-85.333z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"tags":["more"],"grid":16},"attrs":[{}],"properties":{"order":21,"id":26,"name":"more","prevSize":32,"code":59661},"setIdx":0,"setId":2,"iconIdx":29},{"icon":{"paths":["M42.667 896h938.667l-469.333-810.667-469.333 810.667zM554.667 768h-85.333v-85.333h85.333v85.333zM554.667 597.333h-85.333v-170.667h85.333v170.667z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"tags":["warning-filled"],"grid":16},"attrs":[{}],"properties":{"order":22,"id":27,"name":"warning-filled","prevSize":32,"code":59662},"setIdx":0,"setId":2,"iconIdx":30},{"icon":{"paths":["M256 256h85.333v512h-85.333zM405.333 512l362.667 256v-512z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"tags":["chevron-page-filled"],"grid":16},"attrs":[{}],"properties":{"order":23,"id":28,"name":"chevron-page-filled","prevSize":32,"code":59663},"setIdx":0,"setId":2,"iconIdx":31},{"icon":{"paths":["M810.667 128h-42.667v-85.333h-85.333v85.333h-341.333v-85.333h-85.333v85.333h-42.667c-47.36 0-85.333 38.4-85.333 85.333v597.333c0 46.933 37.973 85.333 85.333 85.333h597.333c46.933 0 85.333-38.4 85.333-85.333v-597.333c0-46.933-38.4-85.333-85.333-85.333zM810.667 810.667h-597.333v-426.667h597.333v426.667zM810.667 298.667h-597.333v-85.333h597.333v85.333zM298.667 469.333h213.333v213.333h-213.333z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"tags":["calendar-today"],"grid":16},"attrs":[{}],"properties":{"order":24,"id":29,"name":"calendar-today","prevSize":32,"code":59664},"setIdx":0,"setId":2,"iconIdx":32}],"height":1024,"metadata":{"name":"acorex-icon"},"preferences":{"showGlyphs":true,"showQuickUse":true,"showQuickUse2":true,"showSVGs":true,"fontPref":{"prefix":"ax-ic-","metadata":{"fontFamily":"acorex-icon","majorVersion":1,"minorVersion":0},"metrics":{"emSize":1024,"baseline":6.25,"whitespace":50},"embed":false,"showSelector":false,"cssVars":true,"cssVarsFormat":"scss"},"imagePref":{"prefix":"icon-","png":true,"useClassSelector":true,"color":0,"bgColor":16777215,"classSelector":".icon"},"historySize":50,"showCodes":true,"gridSize":16}}

package/src/icons/style.css

@@ -1,9 +1,10 @@
 @font-face {
   font-family: 'acorex-icon';
-  src:
-    url('fonts/acorex-icon.ttf?hruqb5') format('truetype'),
-    url('fonts/acorex-icon.woff?hruqb5') format('woff'),
-    url('fonts/acorex-icon.svg?hruqb5#acorex-icon') format('svg');
+  src:  url('fonts/acorex-icon.eot?ymfsk5');
+  src:  url('fonts/acorex-icon.eot?ymfsk5#iefix') format('embedded-opentype'),
+    url('fonts/acorex-icon.ttf?ymfsk5') format('truetype'),
+    url('fonts/acorex-icon.woff?ymfsk5') format('woff'),
+    url('fonts/acorex-icon.svg?ymfsk5#acorex-icon') format('svg');
   font-weight: normal;
   font-style: normal;
   font-display: block;
@@ -24,6 +25,15 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.ax-ic-star-filled:before {
+  content: "\e91e";
+}
+.ax-ic-star-half-filled:before {
+  content: "\e91f";
+}
+.ax-ic-star-outline:before {
+  content: "\e920";
+}
 .ax-ic-remove:before {
   content: "\e91b";
 }

package/src/icons/style.scss

@@ -2,10 +2,11 @@
 
 @font-face {
   font-family: '#{$icomoon-font-family}';
-  src:
-    url('#{$icomoon-font-path}/#{$icomoon-font-family}.ttf?hruqb5') format('truetype'),
-    url('#{$icomoon-font-path}/#{$icomoon-font-family}.woff?hruqb5') format('woff'),
-    url('#{$icomoon-font-path}/#{$icomoon-font-family}.svg?hruqb5##{$icomoon-font-family}') format('svg');
+  src:  url('#{$icomoon-font-path}/#{$icomoon-font-family}.eot?ymfsk5');
+  src:  url('#{$icomoon-font-path}/#{$icomoon-font-family}.eot?ymfsk5#iefix') format('embedded-opentype'),
+    url('#{$icomoon-font-path}/#{$icomoon-font-family}.ttf?ymfsk5') format('truetype'),
+    url('#{$icomoon-font-path}/#{$icomoon-font-family}.woff?ymfsk5') format('woff'),
+    url('#{$icomoon-font-path}/#{$icomoon-font-family}.svg?ymfsk5##{$icomoon-font-family}') format('svg');
   font-weight: normal;
   font-style: normal;
   font-display: block;
@@ -26,6 +27,21 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.ax-ic-star-filled {
+  &:before {
+    content: $ax-ic-star-filled; 
+  }
+}
+.ax-ic-star-half-filled {
+  &:before {
+    content: $ax-ic-star-half-filled; 
+  }
+}
+.ax-ic-star-outline {
+  &:before {
+    content: $ax-ic-star-outline; 
+  }
+}
 .ax-ic-remove {
   &:before {
     content: $ax-ic-remove; 

package/src/icons/variables.scss

@@ -1,6 +1,9 @@
 $icomoon-font-family: "acorex-icon" !default;
 $icomoon-font-path: "fonts" !default;
 
+$ax-ic-star-filled: "\e91e";
+$ax-ic-star-half-filled: "\e91f";
+$ax-ic-star-outline: "\e920";
 $ax-ic-remove: "\e91b";
 $ax-ic-plus: "\e91c";
 $ax-ic-magnify: "\e91d";

package/src/utility/_mixins.scss

@@ -1,17 +1,23 @@
-@mixin respond($breakpoint) {
+@mixin screen($breakpoint) {
     // $breakpoint is simply a variable that can have several values
 
     @if $breakpoint == tablet {
         // here `laptop` is the value of $breakpoint
         // when call laptop, we mean the following piece of code
 
-        @media only screen and (max-width: 600px) {
+        @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) {
             @content;
         }
     }
 
     @if $breakpoint == mobile {
-        @media only screen and (max-width: 480px) {
+        @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {
+            @content;
+        }
+    }
+
+    @if $breakpoint == laptop {
+        @media screen and (min-device-width: 1200px) and (max-device-width: 1600px) and (-webkit-min-device-pixel-ratio: 1) {
             @content;
         }
     }