source: spip-zone/_squelettes_/html5up_editorial/css/components/_list.scss @ 107733

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

corrections css

File size: 4.3 KB
Line 
1///
2/// Editorial 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/* List */
8
9        ol {
10                list-style: decimal;
11                margin: 0 0 _size(element-margin) 0;
12                padding-left: 1.25em;
13
14                li {
15                        padding-left: 0.25em;
16                }
17        }
18
19        ul {
20                list-style: disc;
21                margin: 0 0 _size(element-margin) 0;
22                padding-left: 1em;
23
24                li {
25                        padding-left: 0.5em;
26                }
27
28                &.alt {
29                        list-style: none;
30                        padding-left: 0;
31
32                        li {
33                                border-top: solid 1px _palette(border);
34                                padding: 0.5em 0;
35
36                                &:first-child {
37                                        border-top: 0;
38                                        padding-top: 0;
39                                }
40                        }
41                }
42
43                &.icons {
44                        cursor: default;
45                        list-style: none;
46                        padding-left: 0;
47
48                        li {
49                                display: inline-block;
50                                padding: 0 1em 0 0;
51
52                                &:last-child {
53                                        padding-right: 0;
54                                }
55
56                                .icon {
57                                        color: inherit;
58
59                                        &:before {
60                                                font-size: 1.25em;
61                                        }
62                                }
63                        }
64                }
65
66                &.contact {
67                        list-style: none;
68                        padding: 0;
69
70                        li {
71                                @include icon;
72                                border-top: solid 1px _palette(border);
73                                margin: 1.5em 0 0 0;
74                                padding: 1.5em 0 0 3em;
75                                position: relative;
76
77                                &:before {
78                                        color: _palette(accent);
79                                        display: inline-block;
80                                        font-size: 1.5em;
81                                        height: 1.125em;
82                                        left: 0;
83                                        line-height: 1.125em;
84                                        position: absolute;
85                                        text-align: center;
86                                        top: (1.5em / 1.5);
87                                        width: 1.5em;
88                                }
89
90                                &:first-child {
91                                        border-top: 0;
92                                        margin-top: 0;
93                                        padding-top: 0;
94
95                                        &:before {
96                                                top: 0;
97                                        }
98                                }
99
100                                a {
101                                        color: inherit;
102                                }
103                        }
104                }
105
106                &.actions {
107                        cursor: default;
108                        list-style: none;
109                        padding-left: 0;
110
111                        li {
112                                display: inline-block;
113                                padding: 0 (_size(element-margin) * 0.5) 0 0;
114                                vertical-align: middle;
115
116                                &:last-child {
117                                        padding-right: 0;
118                                }
119                        }
120
121                        &.small {
122                                li {
123                                        padding: 0 (_size(element-margin) * 0.25) 0 0;
124                                }
125                        }
126
127                        &.vertical {
128                                li {
129                                        display: block;
130                                        padding: (_size(element-margin) * 0.5) 0 0 0;
131
132                                        &:first-child {
133                                                padding-top: 0;
134                                        }
135
136                                        > * {
137                                                margin-bottom: 0;
138                                        }
139                                }
140
141                                &.small {
142                                        li {
143                                                padding: (_size(element-margin) * 0.25) 0 0 0;
144
145                                                &:first-child {
146                                                        padding-top: 0;
147                                                }
148                                        }
149                                }
150                        }
151
152                        &.fit {
153                                display: table;
154                                margin-left: (_size(element-margin) * -0.5);
155                                padding: 0;
156                                table-layout: fixed;
157                                width: calc(100% + #{(_size(element-margin) * 0.5)});
158
159                                li {
160                                        display: table-cell;
161                                        padding: 0 0 0 (_size(element-margin) * 0.5);
162
163                                        > * {
164                                                margin-bottom: 0;
165                                        }
166                                }
167
168                                &.small {
169                                        margin-left: (_size(element-margin) * -0.25);
170                                        width: calc(100% + #{(_size(element-margin) * 0.25)});
171
172                                        li {
173                                                padding: 0 0 0 (_size(element-margin) * 0.25);
174                                        }
175                                }
176                        }
177                }
178
179                &.pagination {
180                        cursor: default;
181                        list-style: none;
182                        padding-left: 0;
183
184                        li {
185                                display: inline-block;
186                                padding-left: 0;
187                                vertical-align: middle;
188
189                                > .page {
190                                        @include vendor('transition', (
191                                                'background-color #{_duration(transition)} ease-in-out',
192                                                'color #{_duration(transition)} ease-in-out'
193                                        ));
194                                        border-bottom: 0;
195                                        border-radius: _size(border-radius);
196                                        display: inline-block;
197                                        font-size: 0.8em;
198                                        font-weight: _font(weight-bold);
199                                        height: 2em;
200                                        line-height: 2em;
201                                        margin: 0 0.125em;
202                                        min-width: 2em;
203                                        padding: 0 0.5em;
204                                        text-align: center;
205
206                                        &.active {
207                                                background-color: _palette(accent);
208                                                color: _palette(bg) !important;
209
210                                                &:hover {
211                                                        background-color: lighten(_palette(accent), 3);
212                                                }
213
214                                                &:active {
215                                                        background-color: darken(_palette(accent), 3);
216                                                }
217                                        }
218                                }
219
220                                &:first-child {
221                                        padding-right: 0.75em;
222                                }
223
224                                &:last-child {
225                                        padding-left: 0.75em;
226                                }
227                        }
228
229/*                      @include breakpoint(xsmall) {
230                                li {
231                                        &:nth-child(n+2):nth-last-child(n+2) {
232                                                display: none;
233                                        }
234
235                                        &:first-child {
236                                                padding-right: 0;
237                                        }
238                                }
239                        }*/
240                }
241        }
242
243        dl {
244                margin: 0 0 _size(element-margin) 0;
245
246                dt {
247                        display: block;
248                        font-weight: _font(weight-bold);
249                        margin: 0 0 (_size(element-margin) * 0.5) 0;
250                }
251
252                dd {
253                        margin-left: _size(element-margin);
254                }
255        }
Note: See TracBrowser for help on using the repository browser.