Projekt

Obecné

Profil

Stáhnout (2.79 KB) Statistiky
| Větev: | Tag: | Revize:
1 9d2007f1 lmoucka@students.zcu.cz
.navbar-wrapper {
2
  height: 90px;
3 8ca45faf lmoucka@students.zcu.cz
  border-bottom: 1px solid $primary;
4 9d2007f1 lmoucka@students.zcu.cz
  background: #F2F2F2;
5
6
  h1 {
7 8ca45faf lmoucka@students.zcu.cz
    margin: 0;
8 9d2007f1 lmoucka@students.zcu.cz
    font-size: 0;
9
  }
10
11
  h2 {
12
    margin: 0 5px;
13
    color: #0B1226;
14
    text-transform: uppercase;
15
    font-size: 18px;
16 8ca45faf lmoucka@students.zcu.cz
17
    @include media-breakpoint-down(lg) {
18
      margin: 0 3px;
19
      font-size: 15px;
20
    }
21
22
    @include media-breakpoint-down(md) {
23
      font-size: 18px;
24
    }
25 9d2007f1 lmoucka@students.zcu.cz
  }
26 c5edcbf5 lmoucka@students.zcu.cz
27
  .container {
28
    padding: 0;
29
    height: 100%;
30 47c41706 lmoucka@students.zcu.cz
31
    @include media-breakpoint-down(md) {
32
      max-width: 100%;
33
    }
34 c5edcbf5 lmoucka@students.zcu.cz
  }
35 8ca45faf lmoucka@students.zcu.cz
}
36
37
.navbar {
38
  position: relative;
39
  height: 100%;
40
  background: #F2F2F2;
41 9d2007f1 lmoucka@students.zcu.cz
42 8ca45faf lmoucka@students.zcu.cz
  button {
43
    outline: none;
44
    border: 0;
45 9d2007f1 lmoucka@students.zcu.cz
  }
46
}
47
48
.navbar-nav {
49
  width: 40%;
50
51 8ca45faf lmoucka@students.zcu.cz
  @include media-breakpoint-down(md) {
52
    width: 100%;
53
    text-align: center;
54
  }
55
56 9d2007f1 lmoucka@students.zcu.cz
  &.right {
57
    justify-content: flex-end;
58
  }
59
60
  &.left {
61
    justify-content: flex-start;
62
  }
63
}
64
65 8ca45faf lmoucka@students.zcu.cz
.nav-link {
66
  cursor: pointer;
67
}
68
69 9d2007f1 lmoucka@students.zcu.cz
.navbar-brand {
70 8ca45faf lmoucka@students.zcu.cz
  margin: 0;
71
72
  img {
73
    width: 200px;
74
75
    @include media-breakpoint-down(xs) {
76
      width: 150px;
77
    }
78
  }
79
80
  &.mobile {
81
    @include media-breakpoint-up(lg) {
82
      display: none;
83
    }
84
85
    @include media-breakpoint-down(md) {
86
      position: absolute;
87
      top: 50%;
88
      left: 50%;
89
      transform: translate(-50%,-50%);
90
    }
91
  }
92
  &.desktop {
93
    @include media-breakpoint-down(md) {
94
      display: none;
95
    }
96
  }
97 9d2007f1 lmoucka@students.zcu.cz
}
98
99 8ca45faf lmoucka@students.zcu.cz
.navbar-toggler {
100
  position: absolute;
101
  top: 50%;
102
  right: $grid-gutter-width / 2;
103
  width: 60px;
104
  height: 45px;
105
  z-index: 1;
106
  transform: translateY(-50%);
107
108
  span {
109
    display: block;
110
    position: absolute;
111
    height: 5px;
112
    width: 100%;
113
    background: $primary;
114
    border-radius: 9px;
115
    opacity: 1;
116
    left: 0;
117
    transition: .25s ease-in-out;
118
    z-index: 2;
119
120
    &:nth-child(1) {
121
      top: 0;
122
    }
123
    &:nth-child(2) {
124
      top: 18px;
125
    }
126
    &:nth-child(3) {
127
      top: 36px;
128
    }
129
  }
130 9d2007f1 lmoucka@students.zcu.cz
}
131 a9363970 mlacha
132 8ca45faf lmoucka@students.zcu.cz
.navbar-toggler.open {
133
  span {
134
    &:nth-child(1) {
135
      top: 18px;
136
      transform: rotate(135deg);
137
    }
138
    &:nth-child(2) {
139
      opacity: 0;
140
      left: -60px;
141
    }
142
    &:nth-child(3) {
143
      top: 18px;
144
      transform: rotate(-135deg);
145
    }
146
  }
147
}
148
149
.navbar-collapse {
150 47c41706 lmoucka@students.zcu.cz
  width: calc(100% + 20px);
151 8ca45faf lmoucka@students.zcu.cz
  padding-bottom: 1px;
152
  justify-content: space-between;
153
  transition-duration: 0.2s;
154
155
  @include media-breakpoint-down(md) {
156
    position: absolute;
157
    left: -($grid-gutter-width / 2);
158
    top: 90px;
159
    width: calc(100% + 20px);
160
    background: $primary;
161
    z-index: 2;
162
163
    .nav-link h2 {
164
      margin: 12px 0;
165
      color: #F2F2F2;
166
    }
167
  }
168
}
169
170
.nav-link-user {
171
  display: flex;
172
  align-items: center;
173
  cursor: default;
174
175
  @include media-breakpoint-down(md) {
176
    justify-content: center;
177
  }
178
179
  h2 {
180
    color: $secondary;
181
182
    @include media-breakpoint-down(md) {
183
      margin: 12px 0;
184
      color: #F2F2F2;
185
    }
186
  }
187
188
  @include hover_focus() {
189
    color: $secondary;
190
  }
191 a9363970 mlacha
}