filament/packages/widgets/resources/css/chart-widget.css at 1e8e06e7e4aa7239357087fa2d73924d998767ba · filamentphp/filament · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
.fi-wi-chart {
    & .fi-wi-chart-canvas-ctn {
        @apply mx-auto;

        &:not(.fi-wi-chart-canvas-ctn-no-aspect-ratio) {
            @apply aspect-square;
        }
    }

    @supports (container-type: inline-size) {
        & .fi-section-content {
            @apply @container;
        }

        & .fi-wi-chart-canvas-ctn:not(.fi-wi-chart-canvas-ctn-no-aspect-ratio) {
            @apply @sm:aspect-[1.5];
        }
    }

    @supports not (container-type: inline-size) {
        & .fi-wi-chart-canvas-ctn:not(.fi-wi-chart-canvas-ctn-no-aspect-ratio) {
            @apply sm:aspect-[1.5];
        }
    }

    & .fi-wi-chart-filter {
        &.fi-input-wrp {
            @apply w-max sm:-my-2;
        }

        &.fi-dropdown {
            & .fi-wi-chart-filter-content {
                @apply grid gap-y-4 p-6;
            }

            & .fi-wi-chart-filter-content-actions-ctn {
                @apply flex gap-3;
            }
        }
    }

    & .fi-color {
        & .fi-wi-chart-bg-color {
            @apply text-color-50 dark:text-color-400/10;
        }

        & .fi-wi-chart-border-color {
            @apply text-color-500 dark:text-color-400;
        }
    }

    & .fi-wi-chart-bg-color {
        @apply text-gray-100 dark:text-gray-800;
    }

    & .fi-wi-chart-border-color {
        @apply text-gray-400;
    }

    & .fi-wi-chart-grid-color {
        @apply text-gray-200 dark:text-gray-800;
    }

    & .fi-wi-chart-text-color {
        @apply text-gray-500 dark:text-gray-400;
    }

    & .fi-wi-chart-empty-state {
        @apply -m-6 px-6 py-12;

        & .fi-wi-chart-empty-state-content {
            @apply mx-auto grid max-w-lg justify-items-center text-center;
        }

        & .fi-wi-chart-empty-state-icon-bg {
            @apply mb-4 rounded-full bg-gray-100 p-3 dark:bg-gray-500/20;

            & .fi-icon {
                @apply text-gray-500 dark:text-gray-400;
            }
        }

        & .fi-wi-chart-empty-state-heading {
            @apply text-base leading-6 font-semibold text-gray-950 dark:text-white;
        }

        & .fi-wi-chart-empty-state-description {
            @apply mt-1 text-sm text-gray-500 dark:text-gray-400;
        }

        & .fi-wi-chart-actions {
            @apply mt-6;
        }
    }
}