7 background-color: rgba(0, 0, 0, .4);
20 transform: translateX(-50%);
22 font-weight: 300 !important;
23 color: $blue-grey-900;
28 font-weight: 700 !important;
35 background-image: url('../img/ipfire-tux.png');
36 background-repeat: no-repeat;
37 background-position: center center;
38 background-size: contain;
39 display: inline-block;
45 transition: opacity .25s ease-in-out;
50 transition: opacity .35s ease-in-out;
54 transition: background-color .25s linear;
56 @include media-breakpoint-up(sm) {
59 @include media-breakpoint-up(lg) {
65 color: $blue-grey-900;
66 @include media-breakpoint-up(sm) {
70 .navbar-toggler-left {
73 @include media-breakpoint-up(sm) {
88 transition: opacity .7s linear;
89 @include media-breakpoint-up(lg) {
98 transform: translateY(-5px);
101 @include media-breakpoint-up(lg) {
108 background-color: rgba(255, 255, 255, .96);
109 box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.25);
111 @include media-breakpoint-up(sm) {
114 @include media-breakpoint-up(lg) {
123 background-color: rgba(100, 100, 100, .5);
132 #navbarSupportedContent {
134 @include media-breakpoint-down(md) {
142 transform: translateX(-256px);
143 transition: all .15s ease-in-out;
145 transform: translateX(0);
146 transition: all .15s ease-in-out;
147 box-shadow: 14px 0 28px 0 rgba(0, 0, 0, 0.25), 10px 0 10px 0 rgba(0, 0, 0, 0.26);
153 @include media-breakpoint-up(lg) {
159 .navbar-nav .nav-link {
160 color: $blue-grey-900;
161 padding: 16px !important;
164 @include media-breakpoint-up(lg) {
170 border-bottom: 2px solid $red_900;
172 transform: scaleX(0);
177 transition: transform .3s ease-out, color .3s ease-out;
182 .navbar-nav .nav-link:active {
183 @include media-breakpoint-down(lg) {
188 .navbar-nav .nav-link:active:before {
189 @include media-breakpoint-down(lg) {
191 border-left: 2px solid $red_900;
195 transform: translateY(-4px);
199 .navbar-nav .nav-link:hover {
200 @include media-breakpoint-up(lg) {
205 .navbar-nav .nav-link:hover:after {
206 @include media-breakpoint-up(lg) {
207 transform: scaleX(1);
211 body.About li.nav-item a.about,
212 body.Download li.nav-item a.download,
213 body.Support li.nav-item a.support,
214 body.Involved li.nav-item a.community {
215 @include media-breakpoint-up(lg) {
219 border-bottom: 2px solid $red_900;
232 @include media-breakpoint-down(sm) {
233 box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16),
234 0 1px 2px 0 rgba(0, 0, 0, 0.23);
238 background-color: white;
248 outline: 1px solid grey;
263 color: $blue-grey-900;
269 border-left: 2px solid $red_900;
270 padding: 0 8px 0 6px;
277 // Feature mobile Menu
279 /* Fix for Android */
281 -webkit-animation: bugfix infinite 1s;
283 @-webkit-keyframes bugfix {
288 /* default checkbox */
289 input[type=checkbox] {
300 nav[role="dropdown"] {
301 label { display: none; }
304 @media screen and (max-width: 44em) {
305 nav[role="dropdown"] {
318 font-family: FontAwesome;
327 padding: 12px 12px 0;
331 input:checked ~ label:after {