7 background-color: rgba(0, 0, 0, .4);
21 transform: translateX(-50%);
23 font-weight: 300 !important;
24 color: $blue-grey-900;
29 font-weight: 700 !important;
36 background-image: url('img/ipfire-tux.png');
37 background-repeat: no-repeat;
38 background-position: center center;
39 background-size: contain;
40 display: inline-block;
46 transition: opacity .25s ease-in-out;
51 transition: opacity .35s ease-in-out;
55 transition: background-color .25s linear;
57 @include media-breakpoint-up(sm) {
60 @include media-breakpoint-up(lg) {
67 color: $blue-grey-900;
68 @include media-breakpoint-up(sm) {
72 .navbar-toggler-left {
75 @include media-breakpoint-up(sm) {
90 transition: opacity .7s linear;
91 @include media-breakpoint-up(lg) {
100 transform: translateY(-5px);
103 @include media-breakpoint-up(lg) {
110 background-color: rgba(255, 255, 255, .96);
111 box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.25);
113 @include media-breakpoint-up(sm) {
116 @include media-breakpoint-up(lg) {
125 background-color: rgba(100, 100, 100, .5);
134 #navbarSupportedContent {
136 @include media-breakpoint-down(md) {
144 transform: translateX(-256px);
145 transition: all .15s ease-in-out;
147 transform: translateX(0);
148 transition: all .15s ease-in-out;
149 box-shadow: 14px 0 28px 0 rgba(0, 0, 0, 0.25), 10px 0 10px 0 rgba(0, 0, 0, 0.26);
155 @include media-breakpoint-up(lg) {
161 .navbar-nav .nav-link {
162 color: $blue-grey-900;
163 padding: 16px !important;
166 @include media-breakpoint-up(lg) {
172 border-bottom: 2px solid $red_900;
174 transform: scaleX(0);
179 transition: transform .3s ease-out, color .3s ease-out;
184 .navbar-nav .nav-link:active {
185 @include media-breakpoint-down(lg) {
190 .navbar-nav .nav-link:active:before {
191 @include media-breakpoint-down(lg) {
193 border-left: 2px solid $red_900;
197 transform: translateY(-4px);
201 .navbar-nav .nav-link:hover {
202 @include media-breakpoint-up(lg) {
207 .navbar-nav .nav-link:hover:after {
208 @include media-breakpoint-up(lg) {
209 transform: scaleX(1);
213 body.About li.nav-item a.about,
214 body.Download li.nav-item a.download,
215 body.Support li.nav-item a.support,
216 body.Involved li.nav-item a.community,
217 body.Phonebook li.nav-item a.phonebook,
218 body.Diagnosis li.nav-item a.diagnosis {
219 @include media-breakpoint-up(lg) {
223 border-bottom: 2px solid $red_900;
236 @include media-breakpoint-down(sm) {
237 box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16),
238 0 1px 2px 0 rgba(0, 0, 0, 0.23);
242 background-color: white;
252 outline: 1px solid grey;
267 color: $blue-grey-900;
273 border-left: 2px solid $red_900;
274 padding: 0 8px 0 6px;
281 // Feature mobile Menu
283 /* Fix for Android */
285 -webkit-animation: bugfix infinite 1s;
287 @-webkit-keyframes bugfix {
292 /* default checkbox */
293 input[type=checkbox] {
304 nav[role="dropdown"] {
305 label { display: none; }
308 @media screen and (max-width: 44em) {
309 nav[role="dropdown"] {
322 font-family: FontAwesome;
331 padding: 12px 12px 0;
335 input:checked ~ label:after {