source: spip-zone/_themes_/spipr/v2/patisson/css/composants/_navbar.scss @ 119791

Last change on this file since 119791 was 119791, checked in by cedric@…, 2 years ago

navbar + searchbar

File size: 2.1 KB
Line 
1
2.navbar-wrap {
3  border-top: 1px solid $border-color;
4  border-bottom: 1px solid $border-color;
5  margin-bottom: $rem-vert-margin;
6  #nav {
7    margin-bottom: 0;
8    .navbar-nav {
9      text-transform: uppercase;
10      font-family: $font-family-alt;
11      font-size: 16rem/18;
12      margin-left: -1rem;
13      .nav-item {
14        .nav-link {
15          padding-top: 1rem;
16          padding-bottom: 1rem;
17          @include link-nav(inherit, $primary) {
18            background: $gray-100;
19          }
20        }
21        &.active {
22          font-weight: normal;
23          color: $primary;
24          .nav-link {
25            color: inherit;
26          }
27        }
28      }
29    }
30  }
31  .container {
32    position: relative;
33    .btn-search {
34      z-index: 3;
35      position: absolute;
36      right: $grid-gutter-width / 2;
37      top: 0;
38      height: 100%;
39      @include button-variant(transparent,transparent,$gray-100);
40      color: inherit;
41      text-align: center;
42      width: 3em;
43      .icon-search {
44        font-size: 1.25em;
45      }
46      .icon-close {
47        font-size: 0.75em;
48        display: none;
49      }
50    }
51  }
52  .formulaire_recherche {
53    display: none;
54    margin: 0;
55    position: absolute;
56    top:0;
57    left: $grid-gutter-width / 2;
58    right: $grid-gutter-width;
59    bottom: 0;
60    label {
61      position: absolute;
62      height: 1px;
63      line-height: 1px;
64      width: 1px;
65      font-size: 1px;
66      left: -5000em;
67    }
68    .btn {
69      visibility: hidden;
70    }
71    input.search {
72      border-color:$gray-900;
73      background:$gray-900;
74      box-shadow: none;
75      color: $white;
76      font-family: $font-family-alt;
77      font-size: 16rem/18;
78      padding-left: 0;
79      padding-right: 0;
80      text-transform: uppercase;
81    }
82  }
83  &.searching {
84    background: $gray-900;
85    color: $white;
86    .navbar {
87      visibility: hidden;
88    }
89    .formulaire_recherche {
90      display: flex;
91      flex-direction: column;
92      justify-content: center;
93    }
94    .btn-search {
95      @include button-variant(transparent,transparent,$gray-800);
96      .icon-close {
97        display: inline-block;
98      }
99      .icon-search {
100        display: none;
101      }
102    }
103  }
104}
Note: See TracBrowser for help on using the repository browser.