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

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

finalisation header/navbar

File size: 3.0 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      @include media-breakpoint-up(md) {
13        margin-left: -1rem;
14      }
15      .nav-item {
16        .nav-link {
17          @include media-breakpoint-up(md) {
18            padding-top: 1rem;
19            padding-bottom: 1rem;
20          }
21          background: transparent;
22          @include link-nav(inherit, $primary) {
23            background: $gray-100;
24          }
25        }
26        &.active {
27          font-weight: normal;
28          color: $primary;
29          .nav-link {
30            color: inherit;
31          }
32        }
33      }
34    }
35    @include media-breakpoint-down(sm) {
36      .navbar-toggler {
37        border: 0;
38      }
39      .navbar-collapse {
40        position: absolute;
41        width: 100%;
42        background: $gray-900;
43        z-index: 1000;
44        color: $gray-300;
45        .nav-item {
46          border-top: 1px solid $gray-800;
47          .nav-link {
48            @include link-nav(inherit, $primary) {
49              background: $gray-800;
50            }
51          }
52        }
53      }
54    }
55  }
56  .container {
57    position: relative;
58    @include media-breakpoint-down(sm) {
59      max-width: none;
60      padding: 0;
61      color: $gray-300;
62    }
63    .btn-search {
64      z-index: 3;
65      position: absolute;
66      right: $grid-gutter-width / 2;
67      top: 0;
68      height: 100%;
69      @include button-variant(transparent,transparent,$gray-100);
70      color: inherit;
71      text-align: center;
72      width: 3em;
73      .icon-search {
74        font-size: 1.25em;
75      }
76      .icon-close {
77        font-size: 0.75em;
78        display: none;
79      }
80    }
81  }
82  .formulaire_recherche {
83    display: none;
84    margin: 0;
85    position: absolute;
86    top:0;
87    left: $grid-gutter-width / 2;
88    right: $grid-gutter-width;
89    bottom: 0;
90    label {
91      position: absolute;
92      height: 1px;
93      line-height: 1px;
94      width: 1px;
95      font-size: 1px;
96      left: -5000em;
97    }
98    .btn {
99      visibility: hidden;
100    }
101    input.search {
102      border-color:$gray-900;
103      background:$gray-900;
104      box-shadow: none;
105      color: $white;
106      font-family: $font-family-alt;
107      font-size: 16rem/18;
108      padding-left: 0;
109      padding-right: 0;
110      text-transform: uppercase;
111    }
112  }
113  &.searching {
114    background: $gray-900;
115    color: $white;
116    .navbar {
117      visibility: hidden;
118    }
119    .formulaire_recherche {
120      display: flex;
121      flex-direction: column;
122      justify-content: center;
123    }
124    .btn-search {
125      @include button-variant(transparent,transparent,$gray-800);
126      .icon-close {
127        display: inline-block;
128      }
129      .icon-search {
130        display: none;
131      }
132    }
133  }
134  @include media-breakpoint-down(sm) {
135    background: $gray-900;
136    #nav {
137      background: $gray-900 !important;
138    }
139  }
140}
Note: See TracBrowser for help on using the repository browser.