Subversion-Projekte lars-tiefland.faltradxxs.de

Revision

Details | Letzte Änderung | Log anzeigen | RSS feed

Revision Autor Zeilennr. Zeile
2 lars 1 
.display-share-text() {
2 
    li {
3 
        min-width: 110px;
4 
        max-width: 160px;
5 
        .share_text {
6 
            text-indent: 0;
7 
            display: inline;
8 
        }
9 
    }
10 
}
11 
 
12 
.shariff {
13 
    &::after,
14 
    &::before {
15 
        content: " ";
16 
        display: table;
17 
    }
18 
    &::after {
19 
        clear: both;
20 
    }
21 
    ul {
22 
        padding: 0;
23 
        margin: 0;
24 
        list-style: none;
25 
    }
26 
    li {
27 
        height: 35px;
28 
        box-sizing: border-box;
29 
        overflow: hidden;
30 
        a {
31 
            color: #fff;
32 
            position: relative;
33 
            display: block;
34 
            height: 35px;
35 
            text-decoration: none;
36 
            box-sizing: border-box;
37 
        }
38 
        .share_text,
39 
        .share_count {
40 
            font-family: Arial, Helvetica, sans-serif;
41 
            font-size: 12px;
42 
            vertical-align: middle;
43 
            line-height: 35px;
44 
        }
45 
        .fa {
46 
            width: 35px;
47 
            line-height: 35px;
48 
            text-align: center;
49 
            vertical-align: middle;
50 
        }
51 
        .share_count {
52 
            padding: 0 8px;
53 
            height: 33px;
54 
            position: absolute;
55 
            top: 1px;
56 
            right: 1px;
57 
        }
58 
    }
59 
 
60 
    // ------------- horizontal alignment (standard)
61 
    .orientation-horizontal {
62 
        /* autoprefixer: off */
63 
        display: -webkit-box;
64 
        li {
65 
            -webkit-box-flex: 1;
66 
        }
67 
        .info {
68 
            -webkit-box-flex: 0;
69 
        }
70 
    }
71 
    .orientation-horizontal {
72 
        display: flex;
73 
        flex-wrap: wrap;
74 
        li {
75 
            float: left;
76 
            flex: none;
77 
            width: 35px;
78 
            margin-right: 3%;
79 
            margin-bottom: 10px;
80 
            &:last-child {
81 
                margin-right: 0;
82 
            }
83 
            .share_text {
84 
                display: block;
85 
                text-indent: -9999px;
86 
                padding-left: 3px;
87 
            }
88 
            .share_count {
89 
                display: none;
90 
            }
91 
        }
92 
    }
93 
 
94 
    // ------------------------- colourless design
95 
 
96 
    .theme-grey {
97 
        .shariff-button {
98 
            a {
99 
                background-color: #b0b0b0;
100 
            }
101 
            .share_count {
102 
                background-color: #ccc;
103 
                color: #333;
104 
            }
105 
        }
106 
    }
107 
 
108 
    // ------------------------- even less colorful design
109 
 
110 
    .theme-white {
111 
        .shariff-button {
112 
            border: 1px solid #ddd;
113 
            a {
114 
                background-color: #fff;
115 
                &:hover {
116 
                    background-color: #eee;
117 
                }
118 
            }
119 
            .share_count {
120 
                background-color: #fff;
121 
                color: #999;
122 
            }
123 
        }
124 
    }
125 
 
126 
    // ------------------------- vertical alignment
127 
 
128 
    .orientation-vertical {
129 
        min-width: 110px;
130 
        li {
131 
            display: block;
132 
            width: 100%;
133 
            margin: 5px 0;
134 
            .share_count {
135 
                width: 24px;
136 
                text-align: right;
137 
            }
138 
        }
139 
    }
140 
}
141 
 
142 
// ---------------  adjustments for small devices
143 
 
144 
@media only screen and (min-width: 360px) {
145 
    .shariff .orientation-horizontal {
146 
        li {
147 
            margin-right: 1.8%;
148 
            min-width: 80px;
149 
            width: auto;
150 
            flex: 1;
151 
            .share_count {
152 
                display: block;
153 
            }
154 
        }
155 
        &.col-1, &.col-2 {
156 
            .display-share-text;
157 
        }
158 
        &.col-5, &.col-6 {
159 
            li {
160 
                flex: none;
161 
            }
162 
        }
163 
    }
164 
}
165 
 
166 
@media only screen and (min-width: 640px) {
167 
    .shariff .orientation-horizontal.col-3 {
168 
        .display-share-text;
169 
    }
170 
}
171 
 
172 
@media only screen and (min-width: 768px) {
173 
    .shariff .orientation-horizontal {
174 
        .display-share-text;
175 
        &.col-5, &.col-6 {
176 
            li {
177 
                flex: 1;
178 
            }
179 
        }
180 
    }
181 
}
182 
 
183 
// --------------- desktop layout
184 
 
185 
@media only screen and (min-width: 1024px) {
186 
    .shariff {
187 
        li {
188 
            height: 30px;
189 
            a {
190 
                height: 30px;
191 
            }
192 
            .fa {
193 
                width: 30px;
194 
                line-height: 30px;
195 
            }
196 
            .share_text,
197 
            .share_count {
198 
                line-height: 30px;
199 
            }
200 
            .share_count {
201 
                height: 28px;
202 
            }
203 
        }
204 
    }
205 
}