Skip to content

Commit 9c5acd9

Browse files
Justinabes007Justinabes007
committed
LSX Design New Block styles
Lists - 2 Versions + variation for Dark/Light Details Blocks Quotes Columns Seperator
1 parent 18adc4d commit 9c5acd9

File tree

8 files changed

+218
-11
lines changed

8 files changed

+218
-11
lines changed

‎assets/css/blocks/columns.css

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
.wp-block-columns.is-style-col-seperator .wp-block-column{border-right:1px solid #000;}
2+
.wp-block-columns.is-style-col-seperator .wp-block-column:last-child{border-right:0px solid #000;}
3+
4+
@media screen and (max-width:990px) {
5+
.wp-block-columns.is-style-col-seperator .wp-block-column{border-right:0px solid #000!important;}
6+
}

‎assets/css/blocks/details.css

+54-3
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818
user-select:none;
1919
display:block
2020
}
21-
.wp-block-details [open] summary{
21+
.wp-block-details[open] summary{
2222
border-bottom:1px solid #313535
2323
}
2424
.wp-block-details summary:after{
@@ -36,7 +36,7 @@
3636
color:inherit;
3737
font-size:40px;
3838
}
39-
.wp-block-details [open] summary:after{
39+
.wp-block-details[open] summary:after{
4040
content:"-"
4141
}
4242
.wp-block-details summary p{
@@ -54,4 +54,55 @@
5454
border-right:1px solid #313535;
5555
color:#000;}
5656
.wp-block-details[open] summary p{display:block!important;}
57-
.wp-block-details[open]{border-bottom:1px solid #313535;}
57+
.wp-block-details[open]{border-bottom:1px solid #313535;}
58+
59+
.wp-block-details.is-style-plain-arrow{border-bottom:1px solid #313535;margin-top:2px;}
60+
.wp-block-details.is-style-plain-arrow summary{
61+
border: 0;
62+
margin-bottom:20px;
63+
font-size:20px;
64+
font-weight:700;
65+
margin:0;
66+
padding:13px 56px 14px 12px;
67+
line-height:1.4;
68+
cursor:pointer;
69+
position:relative;
70+
-webkit-touch-callout:none;
71+
-webkit-user-select:none;
72+
-khtml-user-select:none;
73+
-moz-user-select:none;
74+
-ms-user-select:none;
75+
user-select:none;
76+
display:block
77+
}
78+
79+
.wp-block-details.is-style-plain-arrow [open] summary,.wp-block-details.is-style-plain-arrow [open]{
80+
border-bottom:0px solid #fff!important;
81+
}
82+
83+
.wp-block-details.is-style-plain-arrow>:not(summary){
84+
margin:0;
85+
padding:0 12px 12px;
86+
border-left:0px solid #313535;
87+
border-right:0px solid #313535;
88+
color:currentColor;}
89+
90+
.wp-block-details.is-style-plain-arrow summary:after{
91+
content:"";
92+
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='31' height='30' viewBox='0 0 31 30' fill='none'%3E%3Cpath d='M8 9L15.5 16.5L23 9L26 10.5L15.5 21L5 10.5L8 9Z' fill='black'/%3E%3C/svg%3E");
93+
position:absolute;
94+
top:50%;
95+
right:0;
96+
text-align:center;
97+
font-weight:700;
98+
color:inherit;
99+
font-size:40px;
100+
width:30px;
101+
height:30px;
102+
}
103+
104+
.wp-block-details[open] summary:after{
105+
content:"";
106+
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='31' height='30' viewBox='0 0 31 30' fill='none'%3E%3Cpath d='M23 21L15.5 13.5L8 21L5 19.5L15.5 9L26 19.5L23 21Z' fill='black'/%3E%3C/svg%3E")!important;
107+
position:absolute;
108+
}

‎assets/css/blocks/lists.css

+77
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
.is-style-list-arrow-light li,.is-style-list-tick-dark li,.is-style-list-tick-light li,.is-style-list-arrow-dark li{
2+
list-style: none;
3+
margin-left:0;
4+
}
5+
.is-style-list-tick-light li .block-editor-rich-text__editable{display:inline;}
6+
.block-editor-block-list__block.is-style-list-tick-light{padding:0!important;}
7+
8+
.is-style-list-arrow-light li:before{
9+
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='29' viewBox='0 0 28 29' fill='none'%3E%3Ccircle cx='14.5' cy='15' r='12' stroke='white' stroke-width='2'/%3E%3Cpath d='M13.4887 11.0045L16.3617 13.7766H9.41327C8.90717 13.7766 8.5 14.1863 8.5 14.6956V15.3082C8.5 15.8175 8.90717 16.2272 9.41327 16.2272H16.3617L13.4887 18.9994C13.1196 19.3555 13.112 19.9489 13.4735 20.3127L13.8921 20.7301C14.2498 21.09 14.8282 21.09 15.1821 20.7301L20.2317 15.6528C20.5894 15.2929 20.5894 14.7109 20.2317 14.3548L15.1821 9.26994C14.8244 8.91002 14.246 8.91002 13.8921 9.26994L13.4735 9.6873C13.112 10.0549 13.1196 10.6484 13.4887 11.0045Z' fill='white'/%3E%3C/svg%3E");
10+
stroke: #fff !important;
11+
fill: #fff !important;
12+
content: "";
13+
display: inline-block;
14+
height: 24px;
15+
width: 24px;
16+
background-repeat: no-repeat;
17+
background-position: center;
18+
background-size: contain;
19+
margin-right: 6px;
20+
margin-left: 6px;
21+
margin-top:-5px;
22+
vertical-align: middle;
23+
}
24+
25+
.is-style-list-arrow-dark li:before{
26+
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='29' viewBox='0 0 28 29' fill='none'%3E%3Ccircle cx='14.5' cy='15' r='12' stroke='black' stroke-width='2'/%3E%3Cpath d='M13.4887 11.0045L16.3617 13.7766H9.41327C8.90717 13.7766 8.5 14.1863 8.5 14.6956V15.3082C8.5 15.8175 8.90717 16.2272 9.41327 16.2272H16.3617L13.4887 18.9994C13.1196 19.3555 13.112 19.9489 13.4735 20.3127L13.8921 20.7301C14.2498 21.09 14.8282 21.09 15.1821 20.7301L20.2317 15.6528C20.5894 15.2929 20.5894 14.7109 20.2317 14.3548L15.1821 9.26994C14.8244 8.91002 14.246 8.91002 13.8921 9.26994L13.4735 9.6873C13.112 10.0549 13.1196 10.6484 13.4887 11.0045Z' fill='black'/%3E%3C/svg%3E");
27+
stroke: #000 !important;
28+
fill: #000 !important;
29+
content: "";
30+
display: inline-block;
31+
height: 24px;
32+
width: 24px;
33+
background-repeat: no-repeat;
34+
background-position: center;
35+
background-size: contain;
36+
margin-right: 6px;
37+
margin-left: 6px;
38+
margin-top:-5px;
39+
vertical-align: middle;
40+
}
41+
42+
.is-style-list-tick-dark li:before{
43+
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--%3E%3Cpath d='M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z'/%3E%3C/svg%3E");
44+
stroke: #000 !important;
45+
fill: #000 !important;
46+
content: "";
47+
display: inline-block;
48+
height: 24px;
49+
width: 24px;
50+
background-repeat: no-repeat;
51+
background-position: center;
52+
background-size: contain;
53+
margin-right: 6px;
54+
margin-left: 6px;
55+
margin-top:-5px;
56+
vertical-align: middle;
57+
}
58+
59+
.is-style-list-tick-light li:before{
60+
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--%3E%3Cpath d='M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z' fill='white'/%3E%3C/svg%3E");
61+
stroke: #fff !important;
62+
fill: #fff !important;
63+
content: "";
64+
display: inline-block;
65+
height: 24px;
66+
width: 24px;
67+
background-repeat: no-repeat;
68+
background-position: center;
69+
background-size: contain;
70+
margin-right: 6px;
71+
margin-left: 6px;
72+
margin-top:-5px;
73+
vertical-align: middle;
74+
}
75+
76+
77+

‎assets/css/blocks/quote.css

+51
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
/* Sizes
2+
--------------------------------------------- */
3+
.wp-block-quote.is-style-primary-background{margin-top:40px;position: relative;border-radius: 5px;border: 2px solid #ccc;}
4+
5+
.wp-block-quote.is-style-primary-background:before {
6+
background-color: #f6f6f6;
7+
color: #d84e2e;
8+
font-size: 92px;
9+
height: 80px;
10+
top: -50px;
11+
width: 80px;
12+
border-radius: 50%;
13+
content: "”";
14+
text-align: center;
15+
font-family: system;
16+
font-style: normal;
17+
left: 50%;
18+
line-height: 1.375;
19+
overflow: hidden;
20+
position: absolute;
21+
-webkit-transform: translateX(-50%);
22+
transform: translateX(-50%);}
23+
24+
.wp-block-quote.is-style-primary-background p{font-style:italic;}
25+
26+
.wp-block-quote.is-style-contrast-background{margin-top:40px;position: relative;border-radius: 5px;border: 2px solid #ccc;background:#000; }
27+
28+
.wp-block-quote.is-style-contrast-background:before {
29+
background-color: #f6f6f6;
30+
color: #d84e2e;
31+
font-size: 92px;
32+
height: 80px;
33+
top: -50px;
34+
width: 80px;
35+
border-radius: 50%;
36+
content: "”";
37+
text-align: center;
38+
font-family: system;
39+
font-style: normal;
40+
left: 50%;
41+
line-height: 1.375;
42+
overflow: hidden;
43+
position: absolute;
44+
-webkit-transform: translateX(-50%);
45+
transform: translateX(-50%);}
46+
47+
.wp-block-quote.is-style-contrast-background p{font-style:italic;color:#fff!important}
48+
.wp-block-quote.is-style-contrast-background cite{font-style:italic;color:#fff!important}
49+
50+
.wp-block-quote.is-style-plain{border-color: transparent!important;
51+
border-width: 0px!important;}

‎includes/.DS_Store

0 Bytes
Binary file not shown.

‎includes/classes/class-block-styles.php

+27
Original file line numberDiff line numberDiff line change
@@ -93,6 +93,18 @@ public function register_block_styles() {
9393
'heading-2' => __( 'Heading Medium', 'lsx-design' ),
9494
'heading-3' => __( 'Heading Small', 'lsx-design' ),
9595
),
96+
'core/details' => array(
97+
'plain-arrow' => __( 'Plain Arrow', 'lsx-design' ),
98+
),
99+
'core/list' => array(
100+
'list-tick-light' => __( 'Ticks Light', 'lsx-design' ),
101+
'list-tick-dark' => __( 'Ticks Dark', 'lsx-design' ),
102+
'list-arrow-light' => __( 'Arrow Light', 'lsx-design' ),
103+
'list-arrow-dark' => __( 'Arrow Dark', 'lsx-design' ),
104+
),
105+
'core/columns' => array(
106+
'col-seperator' => __( 'Seperator', 'lsx-design' ),
107+
),
96108
);
97109

98110
foreach ( $block_styles as $block => $styles ) {
@@ -154,6 +166,11 @@ private function get_block_assets() {
154166
'src' => get_template_directory_uri() . '/assets/css/blocks/pullquote.css',
155167
'path' => get_template_directory() . '/assets/css/blocks/pullquote.css',
156168
),
169+
'core/quote' => array(
170+
'handle' => 'lsxd-quote-block-styles',
171+
'src' => get_template_directory_uri() . '/assets/css/blocks/quote.css',
172+
'path' => get_template_directory() . '/assets/css/blocks/quote.css',
173+
),
157174
'core/paragraph' => array(
158175
'handle' => 'lsxd-paragraph-block-styles',
159176
'src' => get_template_directory_uri() . '/assets/css/blocks/paragraph.css',
@@ -164,6 +181,16 @@ private function get_block_assets() {
164181
'src' => get_template_directory_uri() . '/assets/css/blocks/details.css',
165182
'path' => get_template_directory() . '/assets/css/blocks/details.css',
166183
),
184+
'core/columns' => array(
185+
'handle' => 'lsxd-columns-block-styles',
186+
'src' => get_template_directory_uri() . '/assets/css/blocks/columns.css',
187+
'path' => get_template_directory() . '/assets/css/blocks/columns.css',
188+
),
189+
'core/list' => array(
190+
'handle' => 'lsxd-list-block-styles',
191+
'src' => get_template_directory_uri() . '/assets/css/blocks/lists.css',
192+
'path' => get_template_directory() . '/assets/css/blocks/lists.css',
193+
),
167194
'core/navigation' => array(
168195
'handle' => 'lsxd-navigation-block-styles',
169196
'src' => get_template_directory_uri() . '/assets/css/blocks/navigation.css',

‎style.css

+3-2
Original file line numberDiff line numberDiff line change
@@ -387,7 +387,8 @@ body .wp-block-navigation .wp-block-navigation-item__description {
387387
font-size:var(--wp--preset--font-size--small);
388388
}
389389
/* Forms --------------------------------------------- */
390-
.gform_button.button, .gform_next_button.gform-theme-button.button{
390+
footer .ginput_container_consent label{font-size:12px!important;line-height:12px; float:left;}
391+
.gform_button.button, .gform_next_button.gform-theme-button.button, #field_submit input[type="submit"]{
391392
background-color: var(--wp--preset--color--secondary);
392393
border-radius: 0;
393394
border-width: 0;
@@ -406,7 +407,7 @@ padding-bottom: 10px;
406407
padding-left: 20px;
407408
text-decoration: none;cursor: pointer;}
408409

409-
.gform_button.button:hover, .gform_next_button.gform-theme-button.button:hover{background-color: var(--wp--preset--color--primary);cursor: pointer;}
410+
.gform_button.button:hover, .gform_next_button.gform-theme-button.button:hover, #field_submit input[type="submit"]:hover{background-color: var(--wp--preset--color--primary);cursor: pointer;}
410411

411412
.gform_wrapper.gravity-theme .gform_previous_button.button, .gform_wrapper.gravity-theme .gform_save_link.button{
412413
color: var(--wp--preset--color--contrast);

‎theme.json

-6
Original file line numberDiff line numberDiff line change
@@ -652,12 +652,6 @@
652652
}
653653
},
654654
"core/heading": {
655-
"spacing": {
656-
"margin": {
657-
"top": "0px",
658-
"bottom": "0px"
659-
}
660-
},
661655
"typography": {
662656
"fontFamily": "var(--wp--preset--font-family--primary)",
663657
"fontWeight": "var(--wp--custom--font-weight--bold)",

0 commit comments

Comments
 (0)