source: spip-zone/_galaxie_/galactic/galactic/scss/blocs/_header.scss @ 105541

Last change on this file since 105541 was 105541, checked in by nicolas.dorigny@…, 3 years ago

Un squelette basé sur le design créé par Jordan
cf la capture écran sur l'article https://contrib.spip.net/Refonte-de-l-identite-graphique

Ce squelette Z et SCSS est conçu pour être surchargé par des thèmes spécialisé, sous la forme d'autres plugins à installer.

Ce ne sont pas des thèmes au sens de ceux qui existent pour la dist ou pour Spipr, ces thèmes là peuvent déclarer des dépendances, des configurations, des options etc.
Ils s'installent donc comme des plugins et pas avec Zen-Garden.

Deux thèmes pour l'instant : programmer.spip.net, et spip.net

C'est un travail en cours, j'uploade tout ça sur la zone pour le partager et en discuter.

TODO : une documentation du squelette et de la façon de créer un thème (surcharges).

File size: 2.2 KB
Line 
1
2.page__header {
3
4  @include media($bp-small-up) {
5        @include flex();
6        justify-content: space-between;
7        margin-bottom:   em(16px);
8        .header__nav {
9          padding-left: em(8px);
10        }
11        .menu-lang {
12          display:   inline-block;
13          float:     right;
14          max-width: 50%;
15        }
16  }
17
18  @include media($bp-medium) {
19        .header__nav {
20          width:         100%;
21          padding-right: 1em;
22        }
23  }
24
25  @include media($bp-small) {
26        .header__nav,
27        .header__search {
28          margin-bottom: 1em;
29          padding-right: 0;
30        }
31        .menu-lang {
32          margin-top: 1em;
33        }
34  }
35
36  .header__nav .menu-lang,
37  .header__search {
38        height:     em(50px);
39        background: white;
40        @include ombre();
41  }
42
43  .header__nav .menu-lang .menu-items,
44  .header__search .formulaire_recherche {
45        position:  relative;
46        top:       50%;
47        transform: translateY(-50%);
48  }
49
50  .menu-lang {
51        position: relative;
52        padding:  0 2.5em 0 1em;
53        &:after {
54          content:      '';
55          position:     absolute;
56          top:          50%;
57          transform:    translateY(-50%);
58          right:        1em;
59          width:        0;
60          height:       0;
61          border-left:  5px solid transparent;
62          border-right: 5px solid transparent;
63          border-top:   6px solid $couleur-nav;
64          //transform:    rotate(-90deg);
65        }
66        .menu-lang__select {
67          display:     block;
68          height:      em(50px);
69          line-height: em(50px);
70          min-width:    10em;
71          color:       $couleur-nav;
72          font-weight: bold;
73          cursor:      pointer;
74        }
75        .menu-lang__items {
76          display:    none;
77          position:   absolute;
78          z-index:    10;
79          top:        em(50px);
80          left:       0;
81          right:      0;
82          margin:     0;
83          background: white;
84          @include ombre();
85        }
86        .menu-lang__item {
87          display: block;
88          margin:  0;
89          padding: 0.5em 1em;
90        }
91        .menu-lang__item.on {
92          font-weight: bold;
93        }
94  }
95
96  .header__search {
97        padding: 0;
98  }
99
100  .formulaire_recherche {
101        margin: 0;
102        form {
103          position: relative;
104          width:    100%;
105        }
106        .icone-svg {
107          position:  absolute;
108          top:       50%;
109          transform: translateY(-50%);
110          left:      em(12px);
111          width:     em(12px);
112          height:    em(12px);
113        }
114        div.search {
115          width: 100%;
116        }
117        div.submit {
118          display: none;
119        }
120        input[type="search"] {
121          border:        none;
122          height:        em(50px);
123          width:         100%;
124          padding-left:  em(36px);
125          padding-right: 15%;
126        }
127  }
128
129}
130
131
Note: See TracBrowser for help on using the repository browser.