Proyectos de Subversion LeadersLinked - Backend

Rev

| Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
16825 efrain 1 
.horizontal-menu {
2 
  .navbar {
3 
    width: 100%;
4 
    height: $navbar-height;
5 
    background: $card-bg;
6 
    border-bottom: 1px solid $border-color;
7 
    display: flex;
8 
    align-items: stretch;
9 
    padding: 0;
10 
    position: relative;
11 
    z-index: 978;
12 
    -webkit-transition: width .1s ease, left .1s ease;
13 
    transition: width .1s ease, left .1s ease;
14 
 
15 
    @media(max-width: 991px) {
16 
      width: 100%;
17 
      left: 0;
18 
      .navbar-content {
19 
        width: 100%;
20 
      }
21 
    }
22 
 
23 
    .navbar-content {
24 
      display: flex;
25 
      width: 100%;
26 
      height: 100%;
27 
      @media(max-width: 991px) {
28 
        width: 100%;
29 
      }
30 
      .navbar-brand {
31 
        opacity: 1;
32 
        visibility: visible;
33 
        -webkit-transition: opacity .5s ease;
34 
        transition: opacity .5s ease;
35 
        font-weight: 700;
36 
        font-size: 25px;
37 
        color: $body-color;
38 
        display: flex;
39 
        align-items: center;
40 
        direction: ltr#{'/*rtl:ignore*/'};
41 
        span {
42 
          color: $primary;
43 
          font-weight: 300;
44 
        }
45 
      }
46 
 
47 
      .search-form {
48 
        @extend .d-none;
49 
        @extend .d-md-flex;
50 
        @extend .align-items-center;
51 
        width: 100%;
52 
        margin-right: 60px;
53 
        margin-left: 20px;
54 
        .input-group {
55 
          .input-group-text {
56 
            padding: 0;
57 
            border: 0;
58 
            color: $text-muted;
59 
            background: $input-bg;
60 
            svg {
61 
              width: 20px;
62 
              height: 20px;
63 
              cursor: pointer;
64 
            }
65 
          }
66 
          .form-control {
67 
            border: 0;
68 
            margin-top: 3px;
69 
            &::-webkit-input-placeholder {
70 
              color: $text-muted
71 
            }
72 
            &:-ms-input-placeholder {
73 
              color: $text-muted
74 
            }
75 
            &::-ms-input-placeholder {
76 
              color: $text-muted
77 
            }
78 
            &::placeholder {
79 
              color: $text-muted
80 
            }
81 
          }
82 
        }
83 
      }
84 
      .navbar-nav {
85 
        display: flex;
86 
        flex-direction: row;
87 
        margin-left: auto;
88 
        .nav-item {
89 
          position: relative;
90 
          margin-left: 5px;
91 
          margin-right: 5px;
92 
          min-width: 30px;
93 
          display: flex;
94 
          align-items: center;
95 
          @media(max-width: 767px) {
96 
            min-width: 21px;
97 
          }
98 
          .nav-link {
99 
            color: $text-muted;
100 
            padding: 0;
101 
            position: relative;
102 
            margin-left: auto;
103 
            margin-right: auto;
104 
            &:hover,
105 
            &[aria-expanded="true"] {
106 
              color: $primary;
107 
            }
108 
            &::after {
109 
              display: none;
110 
            }
111 
            svg {
112 
              width: 20px;
113 
              height: 20px;
114 
            }
115 
            .indicator {
116 
              position: absolute;
117 
              top: 0px;
118 
              right: 2px;
119 
              .circle {
120 
                  background: $primary;
121 
                  width: 7px;
122 
                  height: 7px;
123 
                  border-radius: 50%;
124 
                  &::before {
125 
                      background-color: $primary;
126 
                      content: "";
127 
                      display: table;
128 
                      border-radius: 50%;
129 
                      position: absolute;
130 
                      @extend .pulse;
131 
                  }
132 
              }
133 
            }
134 
          }
135 
          &.dropdown {
136 
            @media(max-width: 767px) {
137 
              position: static;
138 
            }
139 
            .dropdown-menu {
140 
              width: max-content;
141 
              position: absolute;
142 
              right: -20px;
143 
              left: auto;
144 
              @extend .dropdownAnimation;
145 
              font-size: .875rem;
146 
              &::before {
147 
                content: '';
148 
                width: 13px;
149 
                height: 13px;
150 
                background: $dropdown-bg;
151 
                position: absolute;
152 
                top: -7px;
153 
                right: 28px;
154 
                -webkit-transform: rotate(45deg);
155 
                        transform: rotate(45deg);
156 
                border-top: 1px solid $dropdown-border-color;
157 
                border-left: 1px solid $dropdown-border-color;
158 
              }
159 
              @media(max-width: 767px) {
160 
                right: 20px;
161 
                width: calc(100% - 40px);
162 
                &::before{
163 
                  display: none;
164 
                }
165 
              }
166 
            }
167 
          }
168 
        }
169 
      }
170 
      .navbar-toggler {
171 
        &:focus {
172 
          box-shadow: none;
173 
        }
174 
        svg {
175 
          width: 20px;
176 
          height: 20px;
177 
          color: $text-muted;
178 
        }
179 
      }
180 
    }
181 
  }
182 
  .bottom-navbar {
183 
    background: $card-bg;
184 
    position: relative;
185 
    width: 100%;
186 
    display: flex;
187 
    align-items: center;
188 
    transition-duration: 3s;
189 
    transition-property: position,left,right,top,z-index;
190 
    box-shadow: 3px 0 10px 0 #03060b;
191 
    -webkit-box-shadow: 3px 0 10px 0 #03060b;
192 
    -moz-box-shadow: 3px 0 10px 0 #03060b;
193 
    @include media-breakpoint-down(lg) {
194 
      display: none;
195 
      &.header-toggled {
196 
        display: block;
197 
      }
198 
    }
199 
    @include media-breakpoint-down(md) {
200 
      &.header-toggled {
201 
        max-height: calc(100vh - #{$navbar-height});
202 
        overflow: auto;
203 
      }
204 
    }
205 
 
206 
    .page-navigation {
207 
      position: relative;
208 
      width: 100%;
209 
      z-index: 99;
210 
      justify-content: space-between;
211 
      transition-duration: 0.2s;
212 
      transition-property: background, box-shadow;
213 
      @include media-breakpoint-down(md) {
214 
        border: none;
215 
      }
216 
 
217 
      > .nav-item {
218 
        line-height: 1;
219 
        text-align: left;
220 
        @include media-breakpoint-down(md) {
221 
          display: block;
222 
          width: 100%;
223 
          border-right: none;
224 
        }
225 
 
226 
        &:first-child {
227 
          @include media-breakpoint-up(lg) {
228 
            >.nav-link {
229 
              padding-left: 0;
230 
            }
231 
          }
232 
        }
233 
 
234 
        &:last-child {
235 
          border-right: none;
236 
          @include media-breakpoint-up(lg) {
237 
            >.nav-link {
238 
              padding-right: 0;
239 
            }
240 
          }
241 
        }
242 
 
243 
        .category-heading {
244 
          font-size: .875rem;
245 
          font-weight: 500;
246 
          text-align: left;
247 
          color: $black;
248 
          padding: 1rem 0 .3rem 0;
249 
          margin-bottom: 0;
250 
          @extend .text-primary;
251 
        }
252 
 
253 
        > .nav-link {
254 
          color: $text-muted;
255 
          padding: 22px 10px;
256 
          line-height: 1;
257 
          font-weight: 400;
258 
          @extend .d-flex;
259 
          @extend .align-items-center;
260 
          .menu-title {
261 
            font-size: 14px;
262 
          }
263 
          .link-icon {
264 
            margin-right: 10px;
265 
            font-weight: 400;
266 
            width: 18px;
267 
            height: 18px;
268 
            fill: none;
269 
            color: inherit;
270 
          }
271 
 
272 
          .link-arrow {
273 
            margin-left: 5px;
274 
            display: inline-block;
275 
            @include transform(rotate(0deg));
276 
            @include transform-origin(center);
277 
            transition-duration: $action-transition-duration;
278 
 
279 
            &:before {
280 
              content: "\e845";
281 
              font-family: "feather";
282 
              font-style: normal;
283 
              display: block;
284 
              font-size: 12px;
285 
              line-height: 10px;
286 
            }
287 
          }
288 
        }
289 
 
290 
        &:hover {
291 
          .submenu {
292 
            display: block;
293 
          }
294 
 
295 
          > .nav-link {
296 
            background: transparent;
297 
            .link-arrow,
298 
            .link-icon,
299 
            .menu-title {
300 
              color: $primary;
301 
              -webkit-transition: color .3s ease;
302 
              transition: color .3s ease;
303 
            }
304 
            .link-arrow {
305 
              @include transform(rotate(-180deg));
306 
              @include transform-origin(center);
307 
              transition-duration: $action-transition-duration;
308 
            }
309 
          }
310 
        }
311 
 
312 
        @include media-breakpoint-down(md) {
313 
          .submenu {
314 
            display: block;
315 
          }
316 
 
317 
          > .nav-link {
318 
            background: transparent;
319 
            .link-arrow {
320 
              @include transform(rotate(-180deg));
321 
              @include transform-origin(center);
322 
              transition-duration: $action-transition-duration;
323 
            }
324 
          }
325 
        }
326 
 
327 
        &.active {
328 
          > .nav-link {
329 
            position: relative;
330 
            &:before {
331 
              position: absolute;
332 
              content: "";
333 
              left: 0;
334 
              bottom: -2px;
335 
              width: 100%;
336 
              height: 5px;
337 
              @media (max-width: 991px) {
338 
                left: -15px;
339 
                top: 0;
340 
                bottom: 0;
341 
                height: 100%;
342 
                width: 5px;
343 
              }
344 
            }
345 
            .menu-title,
346 
            .link-icon,
347 
            .link-arrow {
348 
              color: $primary;
349 
            }
350 
          }
351 
        }
352 
 
353 
        .submenu {
354 
          display: none;
355 
          @extend .dropdownAnimation;
356 
          border: 1px solid $border-color;
357 
          ul {
358 
            list-style-type: none;
359 
            padding-left: 0;
360 
 
361 
            li {
362 
              display: block;
363 
              line-height: 20px;
364 
 
365 
              a {
366 
                display: block;
367 
                padding: 3px 10px;
368 
                color: $text-muted;
369 
                text-decoration: none;
370 
                text-align: left;
371 
                margin: 4px 0;
372 
                white-space: nowrap;
373 
 
374 
                &:hover {
375 
                  color: $primary;
376 
                  @include transition (color .1s linear);
377 
                  &:before {
378 
                    background: $primary;
379 
                  }
380 
                }
381 
                &.active {
382 
                  color: $primary;
383 
                }
384 
              }
385 
 
386 
              &.active {
387 
                a {
388 
                  color: $primary;
389 
                  &:before {
390 
                    background: $primary;
391 
                  }
392 
                }
393 
              }
394 
            }
395 
          }
396 
        }
397 
 
398 
        &:not(.mega-menu) {
399 
          position: relative;
400 
          .submenu {
401 
            left: 0;
402 
            width: -moz-max-content;
403 
            width: -webkit-max-content;
404 
            width: -o-max-content;
405 
            width: -ms-max-content;
406 
            min-width: 180px;
407 
            @include media-breakpoint-up(md) {
408 
              position: absolute;
409 
              top: 61px;
410 
              z-index: 999;
411 
              background: $card-bg;
412 
              border-top: none;
413 
              border-radius: $border-radius;
414 
              box-shadow: 1px 0px 20px rgba(0, 0, 0, 0.08);
415 
              -webkit-box-shadow: 1px 0px 20px rgba(0, 0, 0, 0.08);
416 
              li {
417 
                a {
418 
                  position: relative;
419 
                  padding-left: 20px;
420 
                  &::before {
421 
                    position: absolute;
422 
                    content: "";
423 
                    width: 4px;
424 
                    height: 4px;
425 
                    border-radius: 100%;
426 
                    background: $secondary;
427 
                    top: 12px;
428 
                    left: 0;
429 
                  }
430 
                }
431 
              }
432 
            }
433 
            @include media-breakpoint-down(md) {
434 
              position: relative;
435 
              top:0;
436 
              -webkit-box-shadow: none;
437 
                      box-shadow: none;
438 
              width: 100%;
439 
            }
440 
            ul {
441 
              width: auto;
442 
              padding: 15px 30px;
443 
              @include media-breakpoint-down(md) {
444 
                padding: 0 35px;
445 
              }
446 
            }
447 
          }
448 
        }
449 
 
450 
        &.mega-menu {
451 
          .submenu {
452 
            @include media-breakpoint-up(md) {
453 
              position: absolute;
454 
              top: 61px;
455 
              z-index: 999;
456 
              background: $card-bg;
457 
              border-top: none;
458 
              border-radius: 4px;
459 
              box-shadow: 1px 0px 20px rgba(0, 0, 0, 0.08);
460 
              -webkit-box-shadow: 1px 0px 20px rgba(0, 0, 0, 0.08);
461 
              li {
462 
                a {
463 
                  position: relative;
464 
                  padding-left: 20px;
465 
                  &::before {
466 
                    position: absolute;
467 
                    content: "";
468 
                    width: 4px;
469 
                    height: 4px;
470 
                    border-radius: 100%;
471 
                    background: $secondary;
472 
                    top: 12px;
473 
                    left: 0;
474 
                  }
475 
                }
476 
              }
477 
            }
478 
            @include media-breakpoint-down(md) {
479 
              position: relative;
480 
              top:0;
481 
              -webkit-box-shadow: none;
482 
                      box-shadow: none;
483 
            }
484 
            width: 100%;
485 
            left: 0;
486 
            right: 0;
487 
            padding: 15px 25px;
488 
 
489 
            .col-group-wrapper {
490 
              padding: 0 1rem;
491 
            }
492 
            @include media-breakpoint-down(md) {
493 
              padding: 0 32px;
494 
 
495 
              .col-group-wrapper {
496 
                margin-left: 0;
497 
                margin-right: 0;
498 
                padding: 0;
499 
 
500 
                .col-group {
501 
                  padding-left: 0;
502 
                  padding-right: 0;
503 
                  margin-bottom: 20px;
504 
 
505 
                  .category-heading {
506 
                    &:after {
507 
                      display: none;
508 
                    }
509 
                  }
510 
                }
511 
              }
512 
            }
513 
          }
514 
        }
515 
      }
516 
    }
517 
  }
518 
  &.fixed-on-scroll {
519 
    + .page-wrapper {
520 
      padding-top: $navbar-height;
521 
    }
522 
    .bottom-navbar {
523 
      @extend .fixed-top;
524 
      border-bottom: 1px solid $border-color;
525 
    }
526 
  }
527 
  @media (max-width: 991px) {
528 
    position: fixed;
529 
    z-index: 1030;
530 
    top: 0;
531 
    left: 0;
532 
    right: 0;
533 
  }
534 
}