@acorex/styles 4.0.24 → 5.0.4

package/src/components/_toast.scss

@@ -0,0 +1,94 @@
+@import "../variables/mixins";
+
+@layer components {
+    .ax-toast {
+        @apply ax-grid ax-grid-cols-12 ax-gap-4 ax-relative ax-bg-white ax-shadow-md ax-border-default ax-border ax-border-solid ax-rounded-lg ax-px-4 ax-py-2 ax-overflow-hidden ax-items-center;
+        width: max(20vw, 350px);
+        @include respond(mobile) {
+            width: 98vw;
+        }
+
+        @include respond(tablet) {
+            width: 35vw;
+        }
+        .ax-toast-icon-side {
+            @apply ax-col-span-1 ax-h-full;
+        }
+        .ax-toast-content-side {
+            @apply ax-col-span-10;
+            .ax-toast-title {
+                @apply ax-text-sm ax-font-semibold ax-text-gray-700;
+            }
+            .ax-toast-content {
+                @apply ax-py-2 ax-text-sm ax-text-gray-400;
+            }
+        }
+        .ax-toast-dismiss-icon {
+            @apply ax-col-span-1 ax-cursor-pointer ax-h-full;
+            .ax-ic {
+                @apply ax-text-base;
+            }
+        }
+        .ax-toast-dismiss-icon {
+            @apply ax-text-gray-400;
+        }
+        .ax-toast-buttons {
+            @apply ax-col-span-12;
+        }
+        .ax-toast-progress {
+            @apply ax-absolute ax-bottom-0 ax-h-1 ax-w-0;
+            animation-duration: 4s;
+            animation-timing-function: linear;
+            animation-name: progressBar;
+        }
+        @keyframes progressBar {
+            0% {
+                width: 100%;
+            }
+            100% {
+                width: 0%;
+            }
+        }
+
+        &.ax-success {
+            @apply ax-bg-white ax-text-gray-500;
+            .ax-toast-icon {
+                @apply ax-text-success;
+            }
+
+            .ax-toast-progress {
+                @apply ax-bg-success;
+            }
+        }
+
+        &.ax-danger {
+            .ax-toast-icon {
+                @apply ax-text-danger;
+            }
+
+            .ax-toast-progress {
+                @apply ax-bg-danger-400;
+            }
+        }
+
+        &.ax-warning {
+            .ax-toast-icon {
+                @apply ax-text-warning;
+            }
+
+            .ax-toast-progress {
+                @apply ax-bg-warning-400;
+            }
+        }
+
+        &.ax-info {
+            .ax-toast-icon {
+                @apply ax-text-info;
+            }
+
+            .ax-toast-progress {
+                @apply ax-bg-info-400;
+            }
+        }
+    }
+}

package/src/components/_tooltip.scss

@@ -0,0 +1,44 @@
+@layer components {
+    .ax-tooltip-container {
+        @apply ax-relative;
+        .ax-tooltip {
+            @apply ax-block ax-p-1 ax-bg-black ax-text-white ax-rounded;
+        }
+        .ax-tooltip-tringle {
+            width: 0;
+            height: 0;
+            border-left: 5px solid transparent;
+            border-right: 5px solid transparent;
+            border-top: 5px solid #000;
+            position: absolute;
+
+            &.ax-tooltip-tringle-bottom {
+                transform: rotate(180deg);
+                left: 0;
+                right: 0;
+                margin: auto;
+                top: -5px;
+            }
+            &.ax-tooltip-tringle-right {
+                transform: rotate(90deg);
+                top: 0;
+                bottom: 0;
+                margin: auto;
+                left: -7px;
+            }
+            &.ax-tooltip-tringle-top {
+                transform: rotate(0deg);
+                left: 0;
+                right: 0;
+                margin: auto;
+            }
+            &.ax-tooltip-tringle-left {
+                transform: rotate(270deg);
+                top: 0;
+                bottom: 0;
+                margin: auto;
+                right: -7px;
+            }
+        }
+    }
+}

package/src/components/index.scss

@@ -0,0 +1,29 @@
+@import "./alert";
+@import "./badge";
+@import "./button";
+@import "./calendar";
+@import "./carousel";
+@import "./checkbox";
+@import "./datapager";
+@import "./datepicker";
+@import "./dialog";
+@import "./drawer";
+@import "./dropdown";
+@import "./editor-container";
+@import "./form";
+@import "./input";
+@import "./label";
+@import "./list";
+@import "./loading";
+@import "./popup";
+@import "./radio";
+@import "./range-slider";
+@import "./selectbox";
+@import "./selection-list";
+@import "./side-menu";
+@import "./skeleton";
+@import "./switch";
+@import "./table";
+@import "./tabs";
+@import "./toast";
+@import "./tooltip";

package/{variables/bases/_color.scss → src/variables/_colors.scss}

@@ -1,135 +1,135 @@
-$theme-colors: (
-    "white": "255, 255, 255",
-    "black": "0, 0, 0",
-    "placeholder": "156, 163, 175",
-    "border": "218, 220, 224",
-    "disabled": "224, 224, 224",
-    "disabled-fore": "117, 117, 117",
-    "disabled-border": "191, 191, 191",
-    "primary": (
-        "": "59, 130, 246",
-        "fore": "255, 255, 255",
-        "50": "239, 246, 255",
-        "100": "219, 234, 254",
-        "200": "191, 219, 254",
-        "300": "147, 197, 253",
-        "400": "96, 165, 250",
-        "500": "59, 130, 246",
-        "600": "7, 99, 235",
-        "700": "29 ,78, 216",
-        "800": "30, 64 ,175",
-        "900": "30, 58, 138",
-    ),
-    "secondary": (
-        "": "236, 72, 153",
-        "fore": "255, 255, 255",
-        "50": "253, 242, 248",
-        "100": "252, 231, 243",
-        "200": "251, 207, 232",
-        "300": "249, 168, 212",
-        "400": "249, 168, 212",
-        "500": "236, 72, 153",
-        "600": "219, 39, 119",
-        "700": "190, 24, 93",
-        "800": "157,23,77",
-        "900": "131, 24, 67",
-    ),
-    "success": (
-        "": "76, 175, 80",
-        "fore": "255, 255, 255",
-        "50": "236, 253, 245",
-        "100": "209, 250, 229",
-        "200": "167, 243, 208",
-        "300": "110, 231, 183",
-        "400": "52, 211, 153",
-        "500": "16, 185, 129",
-        "600": "5, 150, 105",
-        "700": "4, 120, 87",
-        "800": "6, 95, 70",
-        "900": "6, 78, 89",
-    ),
-    "danger": (
-        "": "239, 68, 68",
-        "fore": "255, 255, 255",
-        "50": "255, 242, 242",
-        "100": "254, 226, 226",
-        "200": "254, 202, 202",
-        "300": "252, 165, 165",
-        "400": "248, 113, 113",
-        "500": "239, 68, 68",
-        "600": "220, 38, 38",
-        "700": "185, 28, 28",
-        "800": "153, 27, 27",
-        "900": "127, 29, 29",
-    ),
-    "warning": (
-        "": "251, 191, 36",
-        "fore": "120, 53, 15",
-        "50": "255, 251, 235",
-        "100": "254, 243, 199",
-        "200": "253, 230, 138",
-        "300": "252, 211, 77",
-        "400": "251, 191, 36",
-        "500": "245, 158, 11",
-        "600": "217, 119, 6",
-        "700": "180, 83, 9",
-        "800": "146, 64, 14",
-        "900": "120, 53, 15",
-    ),
-    "info": (
-        "": "139, 92, 246",
-        "fore": "255, 255, 255",
-        "50": "245, 243, 255",
-        "100": "224, 231, 255",
-        "200": "221, 214,254",
-        "300": "196, 181, 253",
-        "400": "167, 139, 250",
-        "500": "139, 92, 246",
-        "600": "124, 58, 237",
-        "700": "109, 40, 217",
-        "800": "91, 33, 182",
-        "900": "76, 29, 149",
-    ),
-    "dark": (
-        "": "21, 21, 21",
-        "fore": "255, 255, 255",
-        "50": "227, 227, 227",
-        "100": "185, 185, 185",
-        "200": "138, 138, 138",
-        "300": "91, 91, 91",
-        "400": "56, 56, 56",
-        "500": "21, 21, 21",
-        "600": "18, 18, 18",
-        "700": "15, 15, 15",
-        "800": "12, 12, 12",
-        "900": "6, 6, 6",
-    ),
-    "light": (
-        "": "224, 224, 224",
-        "fore": "33, 33, 33",
-        "50": "250, 250, 250",
-        "100": "245, 245, 245",
-        "200": "238, 238, 238",
-        "300": "224, 224, 224",
-        "400": "189, 189, 189",
-        "500": "158, 158, 158",
-        "600": "117, 117, 117",
-        "700": "97, 97, 97",
-        "800": "66, 66, 66",
-        "900": "33, 33, 33",
-    ),
-    "gray": (
-        "": "107, 114, 128",
-        "fore": "66, 66, 66",
-        "50": "249, 250, 251",
-        "100": "243, 244, 246",
-        "200": "229, 231, 235",
-        "300": "209, 213, 219",
-        "400": "156, 163, 175",
-        "500": "107, 114, 128",
-        "600": "75, 85, 99",
-        "700": "55, 65, 81",
-        "800": "31, 41, 55",
-        "900": "17, 24, 39",
-    ),
-);
+$theme-colors: (
+    "white": "255, 255, 255",
+    "black": "0, 0, 0",
+    "placeholder": "156, 163, 175",
+    "border": "209, 213, 219",
+    "disabled": "224, 224, 224",
+    "disabled-fore": "117, 117, 117",
+    "disabled-border": "191, 191, 191",
+    "primary": (
+        "": "59, 130, 246",
+        "fore": "255, 255, 255",
+        "50": "239, 246, 255",
+        "100": "219, 234, 254",
+        "200": "191, 219, 254",
+        "300": "147, 197, 253",
+        "400": "96, 165, 250",
+        "500": "59, 130, 246",
+        "600": "37, 99, 235",
+        "700": "29 ,78, 216",
+        "800": "30, 64 ,175",
+        "900": "30, 58, 138",
+    ),
+    "secondary": (
+        "": "236, 72, 153",
+        "fore": "255, 255, 255",
+        "50": "253, 242, 248",
+        "100": "252, 231, 243",
+        "200": "251, 207, 232",
+        "300": "249, 168, 212",
+        "400": "244, 114, 182",
+        "500": "236, 72, 153",
+        "600": "219, 39, 119",
+        "700": "190, 24, 93",
+        "800": "157,23,77",
+        "900": "131, 24, 67",
+    ),
+    "success": (
+        "": "76, 175, 80",
+        "fore": "255, 255, 255",
+        "50": "236, 253, 245",
+        "100": "209, 250, 229",
+        "200": "167, 243, 208",
+        "300": "110, 231, 183",
+        "400": "52, 211, 153",
+        "500": "16, 185, 129",
+        "600": "5, 150, 105",
+        "700": "4, 120, 87",
+        "800": "6, 95, 70",
+        "900": "6, 78, 59",
+    ),
+    "danger": (
+        "": "239, 68, 68",
+        "fore": "255, 255, 255",
+        "50": "254, 242, 242",
+        "100": "254, 226, 226",
+        "200": "254, 202, 202",
+        "300": "252, 165, 165",
+        "400": "248, 113, 113",
+        "500": "239, 68, 68",
+        "600": "220, 38, 38",
+        "700": "185, 28, 28",
+        "800": "153, 27, 27",
+        "900": "127, 29, 29",
+    ),
+    "warning": (
+        "": "251, 191, 36",
+        "fore": "120, 53, 15",
+        "50": "255, 251, 235",
+        "100": "254, 243, 199",
+        "200": "253, 230, 138",
+        "300": "252, 211, 77",
+        "400": "251, 191, 36",
+        "500": "245, 158, 11",
+        "600": "217, 119, 6",
+        "700": "180, 83, 9",
+        "800": "146, 64, 14",
+        "900": "120, 53, 15",
+    ),
+    "info": (
+        "": "139, 92, 246",
+        "fore": "255, 255, 255",
+        "50": "245, 243, 255",
+        "100": "237, 233, 254",
+        "200": "221, 214,254",
+        "300": "196, 181, 253",
+        "400": "167, 139, 250",
+        "500": "139, 92, 246",
+        "600": "124, 58, 237",
+        "700": "109, 40, 217",
+        "800": "91, 33, 182",
+        "900": "76, 29, 149",
+    ),
+    "dark": (
+        "": "21, 21, 21",
+        "fore": "255, 255, 255",
+        "50": "227, 227, 227",
+        "100": "185, 185, 185",
+        "200": "138, 138, 138",
+        "300": "91, 91, 91",
+        "400": "56, 56, 56",
+        "500": "21, 21, 21",
+        "600": "18, 18, 18",
+        "700": "15, 15, 15",
+        "800": "12, 12, 12",
+        "900": "6, 6, 6",
+    ),
+    "light": (
+        "": "107, 114, 128",
+        "fore": "17, 24, 39",
+        "50": "249, 250, 251",
+        "100": "243, 244, 246",
+        "200": "229, 231, 235",
+        "300": "209, 213, 219",
+        "400": "156, 163, 175",
+        "500": "107, 114, 128",
+        "600": "75, 85, 99",
+        "700": "55, 65, 81",
+        "800": "31, 41, 55",
+        "900": "17, 24, 39",
+    ),
+    "gray": (
+        "": "107, 114, 128",
+        "fore": "17, 24, 39",
+        "50": "249, 250, 251",
+        "100": "243, 244, 246",
+        "200": "229, 231, 235",
+        "300": "209, 213, 219",
+        "400": "156, 163, 175",
+        "500": "107, 114, 128",
+        "600": "75, 85, 99",
+        "700": "55, 65, 81",
+        "800": "31, 41, 55",
+        "900": "17, 24, 39",
+    ),
+);

package/src/variables/_mixins.scss

@@ -0,0 +1,18 @@
+@mixin respond($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) {
+            @content;
+        }
+    }
+
+    @if $breakpoint == mobile {
+        @media only screen and (max-width: 480px) {
+            @content;
+        }
+    }
+}