xref: /template/writr/css/plugins/wrap.less (revision 4c3d2fc846280553a7b37c11f276a938084b2a12) 
1/* =Wrap Plugin
2----------------------------------------------- */
3
4.plugin_wrap {
5    &.group {
6        display: flex;
7        flex-wrap: wrap;
8
9        > * {
10            flex: 1 1 auto;
11        }
12    }
13
14    &.wrap_twothirds,
15    &.wrap_quarter,
16    &.wrap_third,
17    &.wrap_half {
18        margin-right: 0px !important;
19    }
20
21    &.wrap_twothirds { width: 66.6667% !important; }
22    &.wrap_quarter { width: 25% !important; }
23    &.wrap_third { width: 33.3333% !important; }
24    &.wrap_half { width: 50% !important; }
25
26    &.wrap_box {
27        padding: 1em !important;
28
29        > *:last-child {
30            margin-bottom: 0px !important;
31
32            > img:last-of-type,
33            > a:last-child img:last-of-type {
34                margin-bottom: 0px !important;
35            }
36
37            img:last-of-type {
38                display: block;
39            }
40        }
41    }
42}
43
44div.wrap_info,
45div.wrap_tip,
46div.wrap_important,
47div.wrap_alert,
48div.wrap_help,
49div.wrap_download,
50div.wrap_todo,
51span.wrap_info,
52span.wrap_tip,
53span.wrap_important,
54span.wrap_alert,
55span.wrap_help,
56span.wrap_download,
57span.wrap_todo {
58    background-image: none!important;
59
60    &::before {
61        font-family: 'bootstrap-icons';
62    }
63}
64
65div.wrap_info,
66div.wrap_tip,
67div.wrap_important,
68div.wrap_alert,
69div.wrap_help,
70div.wrap_download,
71div.wrap_todo {
72    min-height: 68px;
73
74    &::before {
75        position: absolute;
76        font-size: 48px;
77        margin-left: -56px;
78        margin-top: -16px;
79    }
80}
81
82span.wrap_info,
83span.wrap_tip,
84span.wrap_important,
85span.wrap_alert,
86span.wrap_help,
87span.wrap_download,
88span.wrap_todo {
89
90    &::before {
91        position: inline-block;
92        font-size: 16px;
93        margin-left: 8px;
94        margin-right: 8px;
95    }
96}
97
98div.wrap_info,
99span.wrap_info {
100    background-color: rgba(13, 202, 240, 0.25);
101
102    &::before {
103        content: '\F431';
104        color: rgb(13, 202, 240);
105    }
106}
107
108div.wrap_tip,
109span.wrap_tip {
110    background-color: rgba(255, 193, 7, 0.25);
111
112    &::before {
113        content: '\F46B';
114        color: rgb(255, 193, 7);
115    }
116}
117
118div.wrap_important,
119span.wrap_important {
120    background-color: rgba(253, 126, 20, 0.25);
121
122    &::before {
123        content: '\F33B';
124        color: rgb(253, 126, 20);
125    }
126}
127
128div.wrap_alert,
129span.wrap_alert {
130    background-color: rgba(220, 53, 69, 0.25);
131
132    &::before {
133        content: '\F627';
134        color: rgb(220, 53, 69);
135    }
136}
137
138div.wrap_help,
139span.wrap_help {
140    background-color: rgba(111, 66, 193, 0.25);
141
142    &::before {
143        content: '\F505';
144        color: rgb(111, 66, 193);
145    }
146}
147
148div.wrap_download,
149span.wrap_download {
150    background-color: rgba(25, 135, 84, 0.25);
151
152    &::before {
153        content: '\F30A';
154        color: rgb(25, 135, 84);
155    }
156}
157
158div.wrap_todo,
159span.wrap_todo {
160    background-color: rgba(32, 201, 151, 0.25);
161
162    &::before {
163        content: '\F2D2';
164        color: rgb(32, 201, 151);
165    }
166}
167
168@media print {
169    div.wrap_info,
170    div.wrap_tip,
171    div.wrap_important,
172    div.wrap_alert,
173    div.wrap_help,
174    div.wrap_download,
175    div.wrap_todo,
176    span.wrap_info,
177    span.wrap_tip,
178    span.wrap_important,
179    span.wrap_alert,
180    span.wrap_help,
181    span.wrap_download,
182    span.wrap_todo {
183        background-repeat: no-repeat !important;
184    }
185
186    div.wrap_info,
187    div.wrap_tip,
188    div.wrap_important,
189    div.wrap_alert,
190    div.wrap_help,
191    div.wrap_download,
192    div.wrap_todo {
193        background-position: 10px 50% !important;
194        background-size: 48px 48px !important;
195        padding-left: 60px !important;
196    }
197
198    span.wrap_info,
199    span.wrap_tip,
200    span.wrap_important,
201    span.wrap_alert,
202    span.wrap_help,
203    span.wrap_download,
204    span.wrap_todo {
205        background-position: 2px 50% !important;
206        background-size: 16px 16px !important;
207        padding-left: 20px !important;
208    }
209
210    div.wrap_info,
211    span.wrap_info {
212        background-image: url(../../font/bootstrap-icons/info-circle.svg) !important;
213    }
214
215    div.wrap_tip,
216    span.wrap_tip {
217        background-image: url(../../font/bootstrap-icons/lightbulb.svg) !important;
218    }
219
220    div.wrap_important,
221    span.wrap_important {
222        background-image: url(../../font/bootstrap-icons/exclamation-triangle.svg) !important;
223    }
224
225    div.wrap_alert,
226    span.wrap_alert {
227        background-image: url(../../font/bootstrap-icons/x-octagon.svg) !important;
228    }
229
230    div.wrap_help,
231    span.wrap_help {
232        background-image: url(../../font/bootstrap-icons/question-circle.svg) !important;
233    }
234
235    div.wrap_download,
236    span.wrap_download {
237        background-image: url(../../font/bootstrap-icons/download.svg) !important;
238    }
239
240    div.wrap_todo,
241    span.wrap_todo {
242        background-image: url(../../font/bootstrap-icons/cone-striped.svg) !important;
243    }
244}
245
246.wrap_button {
247
248    a {
249        -webkit-text-size-adjust: 100%;
250        word-wrap: break-word;
251        margin: 2px;
252        padding: 10px 20px !important;
253        border: none!important;
254        background: @ini_theme_color !important;
255        color: @ini_background !important;
256        font-size: 14px;
257        line-height: 1.5;
258        font-weight: bold;
259        text-transform: uppercase;
260        cursor: pointer;
261        -webkit-appearance: button;
262        box-sizing: border-box;
263        border-radius: 20px !important;
264        vertical-align: middle;
265        text-decoration: none;
266    }
267}
268
269.wrap_button a:visited,
270.centeralign a:visited {
271    background-color: @ini_theme_color !important;
272    color: @ini_background !important;
273    border-radius: 20px !important;
274    border: none !important;
275    padding: 10px 20px !important;
276}
277
278.wrap_float-right {
279    float: right;
280}
281.wrap_float-left {
282    float: left;
283}
284
285.wrap_float-right { float: right; }
286.wrap_float-left { float: left; }
287.wrap_p-0 { padding: 0px; }
288.wrap_p-1 { padding: 4px; }
289.wrap_p-2 { padding: 8px; }
290.wrap_p-3 { padding: 16px; }
291.wrap_p-4 { padding: 32px; }
292.wrap_p-5 { padding: 64px; }
293.wrap_pt-0 { padding-top: 0px!important; }
294.wrap_pt-1 { padding-top: 4px!important; }
295.wrap_pt-2 { padding-top: 8px!important; }
296.wrap_pt-3 { padding-top: 16px!important; }
297.wrap_pt-4 { padding-top: 32px!important; }
298.wrap_pt-5 { padding-top: 64px!important; }
299.wrap_pb-0 { padding-bottom: 0px!important; }
300.wrap_pb-1 { padding-bottom: 4px!important; }
301.wrap_pb-2 { padding-bottom: 8px!important; }
302.wrap_pb-3 { padding-bottom: 16px!important; }
303.wrap_pb-4 { padding-bottom: 32px!important; }
304.wrap_pb-5 { padding-bottom: 64px!important; }
305.wrap_ps-0 { padding-left: 0px!important; }
306.wrap_ps-1 { padding-left: 4px!important; }
307.wrap_ps-2 { padding-left: 8px!important; }
308.wrap_ps-3 { padding-left: 16px!important; }
309.wrap_ps-4 { padding-left: 32px!important; }
310.wrap_ps-5 { padding-left: 64px!important; }
311.wrap_pe-0 { padding-right: 0px!important; }
312.wrap_pe-1 { padding-right: 4px!important; }
313.wrap_pe-2 { padding-right: 8px!important; }
314.wrap_pe-3 { padding-right: 16px!important; }
315.wrap_pe-4 { padding-right: 32px!important; }
316.wrap_pe-5 { padding-right: 64px!important; }
317.wrap_article-image { margin: 0px -40px; height: 400px; }
318.wrap_article-image p { margin: 0px; }
319.wrap_article-image img {
320    margin: 0px;
321    height: 400px;
322    width: 100%;
323    object-fit: cover;
324    display: block;
325    border-radius: 0px !important;
326    border: none !important;
327}
328.wrap_project-image { margin: 0px -40px; height: 400px; }
329.wrap_project-image p { margin: 0px; }
330.wrap_project-image img {
331    margin: 0px auto;
332    height: 400px;
333    display: block;
334    border-radius: 0px !important;
335    border: none !important;
336}
337