source: spip-zone/_galaxie_/galactic/galactic/scss/blocs/_nav.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: 3.0 KB
Line 
1.contentNav {
2
3}
4
5.contentNav__main {
6  background:    white;
7  padding:       em(24px);
8  margin-bottom: em(24px);
9
10  a {
11        color: $couleur-texte;
12        &:hover {
13          color: $couleur-nav;
14        }
15  }
16
17  ul, li {
18        list-style: none;
19        margin:     0;
20        padding:    0;
21  }
22  li {
23  }
24
25  .rubrique > a {
26        font-weight: 500; // medium
27  }
28  .rubrique > a > span {
29        position: relative;
30  }
31  .rubrique > a > span:before {
32        content:             '';
33        position:            absolute;
34        top:                 0.3em;
35        transform:           rotate(180deg);
36        left:                -0.8em;
37        width:               0;
38        height:              0;
39        border-left:         4px solid transparent;
40        border-right:        4px solid transparent;
41        transition-property: position, transform;
42        transition-duration: 0.2s;
43  }
44
45  .rubrique:not(.ouverte) > a > span:before {
46        // triangle vers le haut
47        transform:  rotate(0);
48        border-top: 6px solid #C8C8C8;
49  }
50  .rubrique:not(.ouverte) > a:hover > span:before {
51        transform:        rotate(180deg);
52        border-top-color: $couleur-nav;
53  }
54
55  .rubrique.ouverte > a > span:before {
56        // triangle vers le bas
57        transform:     rotate(0);
58        border-bottom: 6px solid $couleur-nav;
59  }
60  .rubrique.ouverte > a:hover > span:before {
61        transform:           rotate(180deg);
62        border-bottom-color: #C8C8C8;
63  }
64
65  .rubrique.active.ouverte > a > span:before {
66        border: none;
67  }
68
69  li.active > a {
70        margin: 0 em(-24px);
71  }
72  $padding-depart: 1.2em;
73  li {
74        a {
75          padding-left: $padding-depart;
76        }
77        &.active > a {
78          padding-left: $padding-depart - em(-24px);
79        }
80  }
81  li li {
82        a {
83          padding-left: $padding-depart *2;
84        }
85        &.active > a {
86          padding-left: $padding-depart *2 - em(-24px);
87        }
88  }
89  li li li {
90        a {
91          padding-left: $padding-depart *3;
92        }
93        &.active > a {
94          padding-left: $padding-depart *3 - em(-24px);
95        }
96  }
97  li li li li {
98        a {
99          padding-left: $padding-depart *4;
100        }
101        &.active > a {
102          padding-left: $padding-depart *4 - em(-24px);
103        }
104  }
105
106  a {
107        display: block;
108        padding: 0 0.5em;
109  }
110
111  .active > a {
112        background:  $couleur-nav-alt;
113        color:       white;
114        font-weight: normal;
115        &:hover {
116          color: white;
117        }
118  }
119
120}
121
122.contentNav__aside {
123  .bloc,
124  .menu {
125        background:    white;
126        padding:       1em;
127        margin-bottom: em(24px);
128  }
129  .bloc--liens {
130        ul {
131          list-style: none;
132          margin:     0;
133          li {
134                margin-bottom: 0.5em;
135          }
136        }
137        a {
138          display:      block;
139          position:     relative;
140          padding-left: 1em;
141          font-weight:  bold;
142          &:before {
143                content:      '';
144                position:     absolute;
145                top:          0.6em;
146                left:         0;
147                width:        0;
148                height:       0;
149                border-left:  4px solid transparent;
150                border-right: 4px solid transparent;
151                border-top:   6px solid $couleur-nav;
152                transform:    rotate(-90deg);
153          }
154        }
155  }
156  .menu {
157        margin-top:    em(-24px);
158        margin-bottom: em(48px);
159  }
160  .bouton {
161        position:      relative;
162        background:    white;
163        margin-bottom: em(4px);
164        padding-right: em(16px);
165        @include ombre();
166        a {
167          display: inline-block;
168          padding: 1em;
169          color:   $couleur-texte;
170          &:hover {
171                color: $couleur-lien;
172          }
173        }
174  }
175}
Note: See TracBrowser for help on using the repository browser.