PluginProbe
SellKit – Funnel builder and checkout optimizer for WooCommerce to sell more, faster / 2.7.0
SellKit – Funnel builder and checkout optimizer for WooCommerce to sell more, faster v2.7.0
2.7.0 2.6.0 trunk 1.1.0 1.1.4 1.2.1 1.2.2 1.2.3 1.2.5 1.2.9 1.3.1 1.3.2 1.5.0 1.5.1 1.5.4 1.5.7 1.5.8 1.5.9 1.6.2 1.6.5 1.6.8 1.7.2 1.7.4 1.7.5 1.7.9 All 43 releases
sellkit / assets / dist / css / promotion-banner.css

promotion-banner.css in SellKit – Funnel builder and checkout optimizer for WooCommerce to sell more, faster 2.7.0, at assets/dist/css/promotion-banner.css

241 lines 5.5 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 @charset "UTF-8";
2 .sellkit-promotion-banner {
3 position: relative;
4 display: -webkit-box;
5 display: -ms-flexbox;
6 display: flex;
7 -webkit-box-align: center;
8 -ms-flex-align: center;
9 align-items: center;
10 height: 52px;
11 padding: 0 24px;
12 margin: 20px 20px 12px 2px;
13 border-radius: 5px;
14 overflow: hidden;
15 color: #ffffff;
16 background-color: #000000;
17 background-repeat: no-repeat;
18 background-size: cover;
19 background-position: center center;
20 font-family: "Poppins", sans-serif;
21 }
22 .sellkit-promotion-banner--has-image {
23 -webkit-padding-start: 0;
24 padding-inline-start: 0;
25 }
26 .sellkit-promotion-banner__inner {
27 display: -webkit-box;
28 display: -ms-flexbox;
29 display: flex;
30 -webkit-box-align: center;
31 -ms-flex-align: center;
32 align-items: center;
33 width: 100%;
34 -webkit-margin-start: 12px;
35 margin-inline-start: 12px;
36 }
37 .sellkit-promotion-banner__image {
38 position: relative;
39 display: -webkit-box;
40 display: -ms-flexbox;
41 display: flex;
42 -webkit-box-align: center;
43 -ms-flex-align: center;
44 align-items: center;
45 -webkit-box-pack: center;
46 -ms-flex-pack: center;
47 justify-content: center;
48 -ms-flex-item-align: stretch;
49 align-self: stretch;
50 -ms-flex-negative: 0;
51 flex-shrink: 0;
52 height: 52px;
53 }
54 .sellkit-promotion-banner__image img {
55 max-height: 100%;
56 width: auto;
57 height: auto;
58 display: block;
59 }
60 .sellkit-promotion-banner__content {
61 display: -webkit-box;
62 display: -ms-flexbox;
63 display: flex;
64 -webkit-box-orient: vertical;
65 -webkit-box-direction: normal;
66 -ms-flex-direction: column;
67 flex-direction: column;
68 gap: 4px;
69 -webkit-box-flex: 1;
70 -ms-flex: 1 1 auto;
71 flex: 1 1 auto;
72 font-size: 11px;
73 line-height: 1.2;
74 }
75 .sellkit-promotion-banner__top-row {
76 display: -webkit-box;
77 display: -ms-flexbox;
78 display: flex;
79 -webkit-box-align: baseline;
80 -ms-flex-align: baseline;
81 align-items: baseline;
82 gap: 12px;
83 -ms-flex-wrap: wrap;
84 flex-wrap: wrap;
85 }
86 .sellkit-promotion-banner__title {
87 -ms-flex-item-align: center;
88 align-self: center;
89 font-size: 16px;
90 font-weight: 800;
91 white-space: nowrap;
92 }
93 .sellkit-promotion-banner__description-cell {
94 -webkit-box-align: end;
95 -ms-flex-align: end;
96 align-items: flex-end;
97 -webkit-margin-start: 70px;
98 margin-inline-start: 70px;
99 display: -webkit-box;
100 display: -ms-flexbox;
101 display: flex;
102 -webkit-box-orient: vertical;
103 -webkit-box-direction: normal;
104 -ms-flex-direction: column;
105 flex-direction: column;
106 gap: 4px;
107 }
108 .sellkit-promotion-banner__description {
109 font-size: 12px;
110 font-weight: 400;
111 opacity: 0.8;
112 white-space: nowrap;
113 }
114 .sellkit-promotion-banner__description strong,
115 .sellkit-promotion-banner__description b {
116 font-weight: 800;
117 text-decoration: underline;
118 }
119 .sellkit-promotion-banner__code {
120 font-size: 11px;
121 line-height: 1;
122 text-decoration: underline;
123 }
124 .sellkit-promotion-banner__cta .button {
125 padding: 8px 12px;
126 font-family: "Poppins", sans-serif;
127 font-size: 11px;
128 font-weight: 800;
129 text-transform: uppercase;
130 letter-spacing: 0.08em;
131 background-color: #f0f0f1;
132 color: #000000;
133 border: none;
134 -webkit-box-shadow: none;
135 box-shadow: none;
136 line-height: 1;
137 display: -webkit-box;
138 display: -ms-flexbox;
139 display: flex;
140 -webkit-box-align: center;
141 -ms-flex-align: center;
142 align-items: center;
143 -webkit-box-orient: vertical;
144 -webkit-box-direction: normal;
145 -ms-flex-direction: column;
146 flex-direction: column;
147 gap: 4px;
148 }
149 .sellkit-promotion-banner__cta .button .cta-text {
150 font-size: 12px;
151 font-weight: 800;
152 }
153 .sellkit-promotion-banner__cta .button .cta-subtext {
154 font-size: 9px;
155 font-weight: 400;
156 white-space: nowrap;
157 }
158 .sellkit-promotion-banner__cta .button:hover, .sellkit-promotion-banner__cta .button:focus {
159 background-color: #f5f5f5;
160 color: #000000;
161 }
162 .sellkit-promotion-banner__dismiss {
163 position: absolute;
164 top: 50%;
165 right: 10px;
166 -webkit-transform: translateY(-50%);
167 transform: translateY(-50%);
168 width: 24px;
169 height: 24px;
170 padding: 0;
171 border: none;
172 background: transparent;
173 cursor: pointer;
174 color: #ffffff;
175 opacity: 0.8;
176 }
177 .sellkit-promotion-banner__dismiss:hover, .sellkit-promotion-banner__dismiss:focus {
178 opacity: 1;
179 outline: none;
180 }
181 .sellkit-promotion-banner__dismiss:before {
182 content: "�
183 �";
184 font: normal 16px/1 dashicons;
185 speak: never;
186 -webkit-font-smoothing: antialiased;
187 -moz-osx-font-smoothing: grayscale;
188 }
189
190 @media (max-width: 782px) {
191 .sellkit-promotion-banner {
192 -webkit-box-orient: vertical;
193 -webkit-box-direction: normal;
194 -ms-flex-direction: column;
195 flex-direction: column;
196 -webkit-box-align: start;
197 -ms-flex-align: start;
198 align-items: flex-start;
199 height: auto;
200 padding: 12px 24px;
201 }
202 .sellkit-promotion-banner--has-image {
203 -webkit-padding-start: 24px;
204 padding-inline-start: 24px;
205 }
206 .sellkit-promotion-banner__image {
207 position: relative;
208 height: auto;
209 padding: 0;
210 margin-bottom: 8px;
211 }
212 .sellkit-promotion-banner__image img {
213 max-height: 32px;
214 }
215 .sellkit-promotion-banner__inner {
216 -webkit-box-orient: vertical;
217 -webkit-box-direction: normal;
218 -ms-flex-direction: column;
219 flex-direction: column;
220 -webkit-box-align: start;
221 -ms-flex-align: start;
222 align-items: flex-start;
223 gap: 12px;
224 }
225 .sellkit-promotion-banner__top-row {
226 -webkit-box-orient: vertical;
227 -webkit-box-direction: normal;
228 -ms-flex-direction: column;
229 flex-direction: column;
230 -webkit-box-align: center;
231 -ms-flex-align: center;
232 align-items: center;
233 gap: 4px;
234 }
235 .sellkit-promotion-banner__dismiss {
236 top: 10px;
237 right: 10px;
238 -webkit-transform: none;
239 transform: none;
240 }
241 }