source: spip-zone/_squelettes_/html5up_solid_state/css/layout/_header.scss @ 106004

Last change on this file since 106004 was 106004, checked in by marcimat@…, 3 years ago

Différentes adaptations pour le mobile.
Principalement le menu de langue est visible par défaut en grand écran, mais passe dans le menu hamburger en petit écran.

File size: 2.8 KB
Line 
1///
2/// Solid State by HTML5 UP
3/// html5up.net | @ajlkn
4/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
5///
6
7/* Header */
8
9#header {
10        @include vendor('transition', 'background-color #{_duration(transition)} ease-in-out');
11        background-color: transparentize(desaturate(lighten(_palette(bg), 3), 1.5), 0.05);
12        height:           3.5em;
13        left:             0;
14        line-height:      3.5em;
15        padding:          0 1.25em;
16        position:         fixed;
17        top:              0;
18        width:            100%;
19        z-index:          _misc(z-index-base);
20
21        h1 {
22                @include vendor('transition', (
23                                'opacity #{_duration(transition)} ease-in-out',
24                                'visibility #{_duration(transition)}'
25                ));
26                border-bottom: 0;
27                font-size:     0.8em;
28                margin-bottom: 0;
29                opacity:       1;
30                visibility:    visible;
31
32                a {
33                        border: 0;
34                }
35        }
36
37        nav {
38                font-family:    _font(family-heading);
39                font-size:      0.8em;
40                font-weight:    _font(weight-heading-bold);
41                height:         3em;
42                letter-spacing: _font(kern-heading);
43                line-height:    3em;
44                position:       absolute;
45                right:          0.7em;
46                text-transform: uppercase;
47                top:            0.7em;
48
49                a {
50                        border:  0;
51                        display: inline-block;
52                        padding: 0 1em;
53
54                        &:before {
55                                float:       right;
56                                margin-left: 0.75em;
57                        }
58
59                        &.open_menu {
60                                @include icon;
61                                @include vendor('transition', 'background-color #{_duration(transition)} ease-in-out');
62                                border-radius: _size(border-radius);
63                                box-shadow:    inset 0 0 0 2px _palette(border);
64                                padding:       0 1.35em;
65
66                                &:before {
67                                        content: '\f0c9';
68                                }
69
70                                &:hover {
71                                        background-color: _palette(border-bg);
72                                }
73
74                                &:active {
75                                        background-color: _palette(border2-bg);
76                                }
77                        }
78                }
79        }
80
81        &.alt {
82                background-color: transparent;
83
84                h1 {
85                        opacity:    0;
86                        visibility: hidden;
87                }
88        }
89
90        @include breakpoint(small) {
91                height:      2.75em;
92                line-height: 2.75em;
93
94                nav {
95                        top:         0;
96                        right:       0;
97                        height:      inherit;
98                        line-height: inherit;
99
100                        a {
101                                height:      inherit;
102                                line-height: inherit;
103
104                                &.open_menu {
105                                        box-shadow:    none;
106                                        padding:       0 1em;
107                                        border-radius: 0;
108
109                                        &:hover, &:active {
110                                                background-color: inherit;
111                                        }
112                                }
113                        }
114                }
115        }
116        @include breakpoint(small) {
117                nav.menu_lang { display:none; }
118        }
119        @include breakpoint(xsmall) {
120                nav {
121                        a {
122                                &.open_menu {
123                                        width:       4em;
124                                        white-space: nowrap;
125                                        text-indent: 4em;
126                                        position:    relative;
127
128                                        &:before {
129                                                width:         inherit;
130                                                position:      absolute;
131                                                top:           0;
132                                                left:          0;
133                                                text-indent:   0;
134                                                text-align:    right;
135                                                margin-left:   0;
136                                                padding-right: 1.25em;
137                                        }
138                                }
139                        }
140                }
141        }
142}
Note: See TracBrowser for help on using the repository browser.