PluginProbe
Smart Post – Post Grid, Post Carousel, Post Slider Gutenberg Blocks for Blog & News / 4.0.8
Smart Post – Post Grid, Post Carousel, Post Slider Gutenberg Blocks for Blog & News v4.0.8
4.0.8 4.0.7 4.0.6 4.0.5 4.0.4 4.0.3 4.0.2 4.0.1 2.3.5 2.3.6 2.4.0 2.4.1 2.4.10 2.4.11 2.4.12 2.4.13 2.4.14 2.4.15 2.4.16 2.4.17 2.4.18 2.4.19 2.4.2 2.4.20 2.4.21 All 88 releases
post-carousel / src / admin / styles / _cards.scss

_cards.scss in Smart Post – Post Grid, Post Carousel, Post Slider Gutenberg Blocks for Blog & News 4.0.8, at src/admin/styles/_cards.scss

309 lines 7.5 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 .sp-pcp-change-log {
2 position: fixed;
3 width: 350px;
4 height: 100%;
5 right: -350px;
6 background: #fff;
7 z-index: 99;
8 overflow-y: auto;
9 font-size: 20px;
10 transition: all .3s;
11 box-shadow: 0 1px 2px 0 hsla(0,0%,7%,.2);
12 }
13
14 .show-change-log .sp-pcp-change-log {
15 right: 0;
16 }
17
18 .sp-smart-changelog-details {
19 padding: 0px 15px 50px 15px;
20 }
21
22 .sp-smart-changelog-details ul {
23 font-size: 13px;
24 list-style: disc;
25
26 li {
27 margin-bottom: 5px;
28 margin-left: 18px;
29
30 }
31 }
32
33 .sp-pcp-change-log-header {
34 display: flex;
35 padding: 15px;
36 justify-content: space-between;
37 position: sticky;
38 top: 0;
39 left: 0;
40 background: #fff;
41 z-index: 9;
42 box-shadow: 0 1px 2px 0 hsla(0,0%,7%,.2);
43
44 h4 {
45 margin: 0;
46 }
47 }
48
49 .sp-pcp-change-log-close {
50 cursor: pointer;
51 svg path {
52 fill: currentColor;
53 }
54 }
55
56 .sp-smart-changelog-details .markdown-body>p,
57 .sp-smart-changelog-details>p {
58 font-size: 16px;
59 margin: 20px 0px;
60 }
61
62 @media screen and (max-width: 1199px) {
63 .sp-smart-post-blocks-settings-page .sp-pcp-blocks-setting-wrapper .sp-pcp-blocks-setting-blocks-page {
64 grid-template-columns: repeat(2, 1fr);
65 }
66 .sp-smart-post-blocks-settings-page .sp-pcp-blocks-setting-wrapper .sp-pcp-blocks-setting-modules-page {
67 grid-template-columns: repeat(2, 1fr);
68 }
69
70 .sp-smart-post-blocks-settings-page .sp-pcp-blocks-setting-wrapper .sp-pcp-blocks-setting-title {
71 grid-column: 1 / 3;
72 }
73 }
74
75 @media screen and (max-width: 1023px) {
76 .sp-smart-post-blocks-settings-page .sp-pcp-block-settings-start-page-wrapper {
77 flex-direction: column;
78
79 .sp-pcp-sidebar-section,
80 .sp-pcp-video-section {
81 width: auto;
82 }
83 .sp-pcp-sidebar-section {
84 margin: auto;
85 }
86 }
87 .sp-pcp-blocks-setting-saved-template-content-table-wrapper {
88 overflow-x: auto;
89 .sp-pcp-blocks-setting-saved-template-content-table {
90 width: 1200px;
91 }
92 }
93 }
94
95 @media screen and (max-width: 765px) {
96 .sp-smart-post-blocks-settings-page .sp-pcp-block-settings-start-page-wrapper .sp-pcp-video-section {
97 padding: 25px 15px;
98 }
99 .sp-smart-post-blocks-settings-page .sp-pcp-block-settings-start-page-wrapper .sp-pcp-video-section-btn ul {
100 flex-direction: column;
101 }
102 .sp-smart-post-blocks-settings-page .sp-pcp-block-settings-start-page-wrapper .sp-pcp-video-section-btn ul li a {
103 text-align: center;
104 justify-content: center;
105 width: 100%;
106 }
107 .sp-smart-post-blocks-settings-page .sp-pcp-blocks-setting-wrapper .sp-pcp-blocks-setting-blocks-page {
108 grid-template-columns: repeat(1, 1fr);
109 }
110 .sp-smart-post-blocks-settings-page .sp-pcp-blocks-setting-wrapper .sp-pcp-blocks-setting-modules-page {
111 grid-template-columns: repeat(1, 1fr);
112 }
113
114 .sp-smart-post-blocks-settings-page .sp-pcp-blocks-setting-wrapper .sp-pcp-blocks-setting-title {
115 grid-column: 1 / 2;
116 }
117 }
118
119 .sp-pcp-blocks-setting-builder-page {
120 background-color: #FFF;
121
122 .sp-pcp-builder-dashboard {
123 .sp-pcp-builder-dashboard__content {
124 &.sp-pcp-builder-tab {
125 display: grid;
126 grid-template-columns: 220px 1fr;
127 border: 1px solid #E0E0E0;
128 border-radius: 4px;
129 width: 100%;
130
131 .sp-pcp-builder-tab-option {
132 width: 220px;
133 min-height: 100vh;
134
135 ul .sp-pcp-tab-sub-option {
136 border-top: 1px solid #E0E0E0;
137 }
138
139 ul .sp-pcp-tab-sub-option li {
140 padding-left: 40px;
141
142 &.active {
143 border-radius: 0;
144 }
145 }
146
147 ul {
148 margin: 0;
149 padding: 0;
150 }
151
152 ul li {
153 display: flex;
154 // justify-content: space-between;
155 gap: 8px;
156 align-items: center;
157 border-top: 1px solid #E0E0E0;
158 border-right: 1px solid #E0E0E0;
159 background: #F0F0F0;
160 color: #2F2F2F;
161 font-size: 13px;
162 font-style: normal;
163 font-weight: 500;
164 line-height: 153.846%;
165 cursor: pointer;
166 margin: 0;
167 padding: 12px 14px;
168 box-sizing: border-box;
169 border-left: 3px solid transparent;
170
171 &.active {
172 background: #FFF;
173 border-left: 3px solid var(--sp-smart-primary-2-600);
174 border-right: 0;
175 border-radius: 0;
176 color: var(--sp-smart-primary-2-600);
177 }
178
179 &:first-child {
180 border-radius: 4px 0 0 0;
181 border-top: 0;
182 }
183 }
184
185 ul {
186 li.child-tab {
187 max-height: 0;
188 overflow: hidden;
189 opacity: 0;
190 transition: all 0.4s ease;
191 padding: 0;
192 pointer-events: none;
193 border: none;
194
195 }
196
197 li.archive.open-submenu~li.child-tab {
198 max-height: 50px;
199 opacity: 1;
200 pointer-events: auto;
201 padding: 12px 14px 12px 40px;
202 border-top: 1px solid #E0E0E0;
203 border-right: 1px solid #E0E0E0;
204 border-left: 3px solid transparent;
205 }
206
207 li.archive.open-submenu~li.child-tab.active {
208 border-left: 3px solid var(--sp-smart-primary-2-600);
209 }
210
211 li.archive {
212 position: relative;
213 }
214
215 li.archive .submenu-arrow {
216 position: absolute;
217 right: 14px;
218 display: flex;
219 }
220
221 li.archive.open-submenu .submenu-arrow {
222 rotate: 0deg;
223 transition: 0.3s ease-in-out;
224 }
225
226 li.archive .submenu-arrow {
227 rotate: -90deg;
228 transition: 0.3s ease-in-out;
229 }
230 }
231 }
232
233 .sp-pcp-builder-tab-content {
234 display: flex;
235 padding: 32px 24px;
236 flex-direction: column;
237 gap: 24px;
238 align-self: stretch;
239
240 .sp-pcp-builder-tab__heading {
241 display: flex;
242 flex-direction: row;
243 align-items: center;
244 justify-content: space-between;
245
246 button {
247 display: flex;
248 justify-content: center;
249 align-items: center;
250 padding: 10px 24px 10px 20px;
251 gap: 8px;
252 color: #FFF;
253 font-size: 16px;
254 font-style: normal;
255 font-weight: 600;
256 line-height: 28px;
257 /* 175% */
258 border: 0;
259 border-radius: 4px;
260 background: var(--sp-smart-primary-2-600);
261 cursor: pointer;
262 }
263 }
264
265 .sp-pcp-builder-tab__heading h3 {
266 color: #2F2F2F;
267
268 font-size: 24px;
269 font-style: normal;
270 font-weight: 600;
271 line-height: 116.667%;
272 margin: 0;
273
274 a {
275 display: flex;
276 align-items: center;
277 color: #2F2F2F;
278
279 font-size: 24px;
280 font-style: normal;
281 font-weight: 600;
282 line-height: 28px;
283 /* 116.667% */
284 text-decoration: none;
285 cursor: pointer;
286 }
287 }
288
289 .sp-pcp-builder-tab__content-items-* {
290 display: none;
291
292 &.active {
293 display: block;
294 }
295 }
296
297 // .sp-pcp-builder-tab__content-items-home {
298 // display: none;
299 // &.active {
300 // display: block;
301 // }
302 // }
303 }
304 }
305 }
306 }
307 }
308
309