Gitiles
Code Review Sign In
git.clicks.codes / Clicks / clicks.codes / a0e4b9be48e22c7dbbfb7430887b17b3cd206f6d / . / styles / navbar.module.css
blob: 01055a4b6b909840004f9c123ddc91291879e3c2 [file] [log] [blame]
pineafana5ce9102021-09-02 17:21:31 +0100[diff] [blame]1.container {
2 display: flex;
3 flex-direction: column;
4 justify-content: top;
5 align-items: center;
6
7 position: fixed;
8 top: 0;
9 left: 0;
10 overflow: hidden;
11 margin: 20px;
12
13 width: 64px;
14 max-height: 64px;
15 height: auto;
pineafana5ce9102021-09-02 17:21:31 +0100[diff] [blame]16
17 border-radius: 32px;
18 transition: 0.5s ease-in-out;
19}
pineafana5ce9102021-09-02 17:21:31 +0100[diff] [blame]20.group {
21 display: flex;
22 flex-direction: column;
23 justify-content: top;
24 align-items: center;
25
26 background-color: var(--card-background-color);
Samuel Shuert52f37772021-09-02 12:29:40 -0500[diff] [blame]27 backdrop-filter: blur(7px), brightness(0.1);
pineafana5ce9102021-09-02 17:21:31 +0100[diff] [blame]28 border-radius: 32px;
29
30 width: 64px;
31 margin-bottom: 20px;
32 padding-top: 7px;
33}
34
35.headerIcon {
36 height: 64px;
37 width: 64px;
38 margin-bottom: 20px;
39 margin-right: 0;
40 margin-top: -7px;
Samuel Shuert604e31d2021-09-02 16:06:20 -0500[diff] [blame]41
42 cursor: pointer;
pineafana5ce9102021-09-02 17:21:31 +0100[diff] [blame]43}
44
45.icon {
46 height: 50px;
47 width: 50px;
48 margin-bottom: 5px;
pineafandf39fd42021-09-04 16:05:27 +0100[diff] [blame]49 cursor: pointer;
pineafana5ce9102021-09-02 17:21:31 +0100[diff] [blame]50}
51
52.containerOpen {
pineafand494b852021-09-03 19:49:49 +0100[diff] [blame]53 max-height: 460px;
pineafana5ce9102021-09-02 17:21:31 +0100[diff] [blame]54}
55
pineafand494b852021-09-03 19:49:49 +0100[diff] [blame]56.containerDesktop {
57 animation-name: containerCloseOnStart;
58 animation-duration: 0.5s;
59 animation-direction: forwards;
60 animation-timing-function: ease-in-out;
61}
62
63@keyframes containerCloseOnStart {
64 from { max-height: 460px; }
65 to { max-height: 64px ; }
66}
67
68.containerDesktop:hover {
69 max-height: 460px;
70 animation-name: none;
71}
72
73@media screen and (min-width: 450px) {
pineafana5ce9102021-09-02 17:21:31 +0100[diff] [blame]74 .container {
75 flex-direction: row;
76 justify-content: left;
77
78 margin: 20px;
79
80 height: 64px;
81 max-width: 64px;
82 width: auto;
83 border-radius: 32px;
84
85 border-radius: 32px;
86 transition: 0.5s ease-in-out;
87 }
88 .group {
89 flex-direction: row;
90 justify-content: left;
91
92 height: 64px;
93 width: auto;
94 padding-right: 7px;
95 margin-bottom: 0;
96 padding-top: 7px;
97 margin-right: 20px;
Samuel Shuert52f37772021-09-02 12:29:40 -0500[diff] [blame]98 padding-left: 3px;
pineafana5ce9102021-09-02 17:21:31 +0100[diff] [blame]99 }
100 .headerIcon {
101 height: 64px;
102 width: 64px;
103 margin-top: 12px;
Samuel Shuert52f37772021-09-02 12:29:40 -0500[diff] [blame]104 margin-left: -3px;
pineafana5ce9102021-09-02 17:21:31 +0100[diff] [blame]105 }
106 .containerOpen {
pineafand494b852021-09-03 19:49:49 +0100[diff] [blame]107 max-width: 460px;
108 max-height: 64px;
109 }
110 .containerDesktop:hover {
111 max-width: 460px;
pineafana5ce9102021-09-02 17:21:31 +0100[diff] [blame]112 max-height: 64px;
113 }
114 .icon {
115 height: 50px;
116 width: 50px;
117 margin-left: 5px;
118 }
pineafand494b852021-09-03 19:49:49 +0100[diff] [blame]119 @keyframes containerCloseOnStart {
120 from { max-width: 460px; }
121 to { max-width: 64px ; }
122 }
pineafandf39fd42021-09-04 16:05:27 +0100[diff] [blame]123}