panel/resources/styles/components/navigation.css at 4cb4dfecc88191f474d1f20e4408fc23d6fbb721 · ghzhost/panel · 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
#navigation {
    @apply .w-full .bg-neutral-900 .shadow-md;

    & > div {
        @apply .mx-auto .w-full .flex .items-center;
    }

    & #logo {
        @apply .flex-1;

        & > a {
            @apply .text-2xl .font-header .px-4 .no-underline .text-neutral-200;
            transition: color 150ms linear;

            &:hover {
                @apply .text-neutral-100;
            }
        }
    }

    & .right-navigation {
        @apply .flex .h-full .items-center .justify-center;

        & > a, & > .navigation-link {
            @apply .flex .items-center .h-full .no-underline .text-neutral-300 .px-6 .cursor-pointer;
            transition: background-color 150ms linear, color 150ms linear, box-shadow 150ms ease-in;

            /*! purgecss start ignore */
            &.active, &:hover {
                @apply .text-neutral-100 .bg-black;
                box-shadow: inset 0 -2px config('colors.cyan-700');
            }

            &.active {
                box-shadow: inset 0 -2px config('colors.cyan-500');
            }
            /*! purgecss end ignore */
        }
    }
}

#sub-navigation {
    @apply .w-full .bg-neutral-700 .shadow;

    .items {
        @apply .flex .items-center .text-sm .mx-auto .px-2;
        max-width: 1200px;

        /*! purgecss start ignore */
        & > a, & > div {
            @apply .inline-block .py-3 .px-4 .text-neutral-300 .no-underline;
            transition: color 150ms linear, box-shadow 150ms ease-in;

            &:not(:first-of-type) {
                @apply .ml-2;
            }

            &.active, &:hover {
                @apply .text-neutral-100;
                box-shadow: inset 0 -2px config('colors.cyan-700');
            }

            &.active {
                box-shadow: inset 0 -2px config('colors.cyan-500');
            }
        }
        /*! purgecss end ignore */
    }
}