xref: /template/writr/css/plugins/wrap.less (revision 5af1e315c205f50dbfe924f61f774b4095ee1a9e) 
1/* =Wrap Plugin
2----------------------------------------------- */
3
4div.wrap_info,
5div.wrap_tip,
6div.wrap_important,
7div.wrap_alert,
8div.wrap_help,
9div.wrap_download,
10div.wrap_todo,
11span.wrap_info,
12span.wrap_tip,
13span.wrap_important,
14span.wrap_alert,
15span.wrap_help,
16span.wrap_download,
17span.wrap_todo {
18    background-image: none!important;
19
20    &::before {
21        font-family: 'bootstrap-icons';
22    }
23}
24
25div.wrap_info,
26div.wrap_tip,
27div.wrap_important,
28div.wrap_alert,
29div.wrap_help,
30div.wrap_download,
31div.wrap_todo {
32    min-height: 68px;
33
34    &::before {
35        position: absolute;
36        font-size: 48px;
37        margin-left: -56px;
38        margin-top: -16px;
39    }
40}
41
42span.wrap_info,
43span.wrap_tip,
44span.wrap_important,
45span.wrap_alert,
46span.wrap_help,
47span.wrap_download,
48span.wrap_todo {
49
50    &::before {
51        position: inline-block;
52        font-size: 16px;
53        margin-left: 8px;
54        margin-right: 8px;
55    }
56}
57
58div.wrap_info {
59    background-color: rgba(13, 202, 240, 0.25);
60
61    &::before {
62        content: '\F431';
63        color: rgb(13, 202, 240);
64    }
65}
66
67div.wrap_tip {
68    background-color: rgba(255, 193, 7, 0.25);
69
70    &::before {
71        content: '\F46B';
72        color: rgb(255, 193, 7);
73    }
74}
75
76div.wrap_important {
77    background-color: rgba(253, 126, 20, 0.25);
78
79    &::before {
80        content: '\F33B';
81        color: rgb(253, 126, 20);
82    }
83}
84
85div.wrap_alert {
86    background-color: rgba(220, 53, 69, 0.25);
87
88    &::before {
89        content: '\F627';
90        color: rgb(220, 53, 69);
91    }
92}
93
94div.wrap_help {
95    background-color: rgba(111, 66, 193, 0.25);
96
97    &::before {
98        content: '\F505';
99        color: rgb(111, 66, 193);
100    }
101}
102
103div.wrap_download {
104    background-color: rgba(25, 135, 84, 0.25);
105
106    &::before {
107        content: '\F30A';
108        color: rgb(25, 135, 84);
109    }
110}
111
112div.wrap_todo {
113    background-color: rgba(32, 201, 151, 0.25);
114
115    &::before {
116        content: '\F2D2';
117        color: rgb(32, 201, 151);
118    }
119}
120
121.wrap_button {
122
123    a {
124        -webkit-text-size-adjust: 100%;
125        word-wrap: break-word;
126        margin: 2px;
127        padding: 10px 20px !important;
128        border: none!important;
129        background: @ini_theme_color !important;
130        color: @ini_background !important;
131        font-size: 14px;
132        line-height: 1.5;
133        font-weight: bold;
134        text-transform: uppercase;
135        cursor: pointer;
136        -webkit-appearance: button;
137        box-sizing: border-box;
138        border-radius: 20px !important;
139        vertical-align: middle;
140        text-decoration: none;
141    }
142}
143
144.wrap_button a:visited,
145.centeralign a:visited {
146    background-color: @ini_theme_color !important;
147    color: @ini_background !important;
148    border-radius: 20px !important;
149    border: none !important;
150    padding: 10px 20px !important;
151}
152
153.wrap_float-right {
154    float: right;
155}
156.wrap_float-left {
157    float: left;
158}
159
160.wrap_float-right { float: right; }
161.wrap_float-left { float: left; }
162.wrap_p-0 { padding: 0px; }
163.wrap_p-1 { padding: 4px; }
164.wrap_p-2 { padding: 8px; }
165.wrap_p-3 { padding: 16px; }
166.wrap_p-4 { padding: 32px; }
167.wrap_p-5 { padding: 64px; }
168.wrap_pt-0 { padding-top: 0px!important; }
169.wrap_pt-1 { padding-top: 4px!important; }
170.wrap_pt-2 { padding-top: 8px!important; }
171.wrap_pt-3 { padding-top: 16px!important; }
172.wrap_pt-4 { padding-top: 32px!important; }
173.wrap_pt-5 { padding-top: 64px!important; }
174.wrap_pb-0 { padding-bottom: 0px!important; }
175.wrap_pb-1 { padding-bottom: 4px!important; }
176.wrap_pb-2 { padding-bottom: 8px!important; }
177.wrap_pb-3 { padding-bottom: 16px!important; }
178.wrap_pb-4 { padding-bottom: 32px!important; }
179.wrap_pb-5 { padding-bottom: 64px!important; }
180.wrap_ps-0 { padding-left: 0px!important; }
181.wrap_ps-1 { padding-left: 4px!important; }
182.wrap_ps-2 { padding-left: 8px!important; }
183.wrap_ps-3 { padding-left: 16px!important; }
184.wrap_ps-4 { padding-left: 32px!important; }
185.wrap_ps-5 { padding-left: 64px!important; }
186.wrap_pe-0 { padding-right: 0px!important; }
187.wrap_pe-1 { padding-right: 4px!important; }
188.wrap_pe-2 { padding-right: 8px!important; }
189.wrap_pe-3 { padding-right: 16px!important; }
190.wrap_pe-4 { padding-right: 32px!important; }
191.wrap_pe-5 { padding-right: 64px!important; }
192.wrap_article-image { margin: 0px -40px; height: 400px; }
193.wrap_article-image p { margin: 0px; }
194.wrap_article-image img {
195    margin: 0px;
196    height: 400px;
197    width: 100%;
198    object-fit: cover;
199    display: block;
200}
201