Skip to content

Commit 6fc24f1

Browse files
author
madalingorbanescu
committed
More adjustments for Nova Blocks 1.12.0
1 parent 1924b6f commit 6fc24f1

File tree

8 files changed

+795
-16
lines changed

8 files changed

+795
-16
lines changed

‎assets/scss/blocks/nova-blocks/hero/_custom.scss‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,9 @@
2424
}
2525

2626
.novablocks-hero {
27+
28+
--novablocks-hero-text-color: #FFF;
29+
2730
.novablocks-u-content-padding {
2831
@include below(tablet) {
2932
padding-top: var(--theme-spacing-xxl);

‎assets/scss/blocks/nova-blocks/media/_block-colors.scss‎

Lines changed: 234 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,234 @@
1+
:root {
2+
--novablocks-color-1: #203AB6;
3+
--novablocks-color-2: #FFE42E;
4+
--novablocks-color-3: #323067;
5+
6+
--novablocks-dark-1: #323067;
7+
--novablocks-dark-2: #272743;
8+
--novablocks-dark-3: #000043;
9+
10+
--novablocks-light-1: #FFFFFF;
11+
--novablocks-light-2: #EDF0F1;
12+
--novablocks-light-3: #EDF0F1;
13+
14+
--novablocks-color-primary: var(--novablocks-color-1);
15+
--novablocks-color-secondary: var(--novablocks-color-2);
16+
--novablocks-color-tertiary: var(--novablocks-color-3);
17+
18+
--novablocks-dark-primary: var(--novablocks-dark-1);
19+
--novablocks-dark-secondary: var(--novablocks-dark-2);
20+
--novablocks-dark-tertiary: var(--novablocks-dark-3);
21+
22+
--novablocks-light-primary: var(--novablocks-light-1);
23+
--novablocks-light-secondary: var(--novablocks-light-2);
24+
--novablocks-light-tertiary: var(--novablocks-light-3);
25+
26+
@include variation( default, novablocks-current, novablocks );
27+
28+
--novablocks-spacing: 24px;
29+
--novablocks-sides-spacings: var(--novablocks-spacing);
30+
--novablocks-media-spacing: var(--novablocks-spacing);
31+
--novablocks-media-gutter: var(--novablocks-spacing);
32+
--novablocks-media-background-direction: 90deg;
33+
34+
--novablocks-transition-duration: 0.5s;
35+
--novablocks-transition-easing: ease;
36+
--novablocks-transition: all var(--novablocks-transition-duration) var(--novablocks-transition-easing);
37+
38+
--novablocks-element-spacing-level-1-multiplier: 1;
39+
--novablocks-element-spacing-level-2-multiplier: 0.5;
40+
--novablocks-element-spacing-level-3-multiplier: 0.25;
41+
42+
--novablocks-block-content-box-shadow:
43+
0 32px 128px rgba(42, 54, 52, 0.1),
44+
0 16px 64px rgba(42, 54, 52, 0.1),
45+
0 8px 16px rgba(42, 54, 52, 0.1);
46+
}
47+
48+
49+
.novablocks-block {
50+
--novablocks-block-text-color: var(--novablocks-current-dark-secondary);
51+
--novablocks-block-accent-color: var(--novablocks-block-current-accent-color);
52+
--novablocks-block-titles-color: var(--novablocks-current-dark-secondary);
53+
--novablocks-block-background-color: var(--novablocks-current-light-primary);
54+
55+
--novablocks-block-padding: var(--novablocks-spacing);
56+
--novablocks-block-content-padding: var(--novablocks-spacing);
57+
58+
--novablocks-block-content-text-color: var(--novablocks-current-dark-secondary);
59+
--novablocks-block-content-titles-color: var(--novablocks-current-dark-secondary);
60+
--novablocks-block-content-accent-color: var(--novablocks-block-current-accent-color);
61+
--novablocks-block-content-background-color: transparent;
62+
--novablocks-block-content-background-opacity: 1;
63+
64+
--novablocks-block-content-current-box-shadow: none;
65+
--novablocks-block-current-accent-color: var(--novablocks-current-color-primary);
66+
67+
.has-secondary-accent-color & {
68+
--novablocks-block-current-accent-color: var(--novablocks-current-color-secondary);
69+
}
70+
71+
.has-tertiary-accent-color & {
72+
--novablocks-block-current-accent-color: var(--novablocks-current-color-tertiary);
73+
}
74+
}
75+
76+
.novablocks-media {
77+
position: relative;
78+
z-index: var(--novablocks-block-zindex);
79+
}
80+
81+
.novablocks-block {
82+
--block-padding: 0;
83+
--block-content-padding: 0;
84+
85+
&[class] {
86+
color: var(--novablocks-block-text-color);
87+
background-color: var(--novablocks-block-background-color);
88+
89+
transition: var(--novablocks-transition);
90+
transition-property: background-color, padding, margin;
91+
92+
h1, h2, h3, h4, h5, h6 {
93+
transition: var(--novablocks-transition);
94+
transition-property: color;
95+
}
96+
97+
h1, h2, h3 {
98+
color: var(--novablocks-block-titles-color);
99+
}
100+
101+
h4, h5, h6 {
102+
color: var(--novablocks-block-accent-color);
103+
}
104+
}
105+
}
106+
107+
.novablocks-block__content {
108+
109+
&[class] {
110+
position: relative;
111+
padding: var(--block-content-padding);
112+
113+
color: var(--novablocks-block-content-text-color);
114+
transform: translateZ(0);
115+
116+
transition: var(--novablocks-transition);
117+
transition-property: padding, box-shadow;
118+
119+
h1, h2, h3 {
120+
color: var(--novablocks-block-content-titles-color);
121+
}
122+
123+
h4, h5, h6 {
124+
color: var(--novablocks-block-content-accent-color);
125+
}
126+
}
127+
128+
129+
h1, h2, h3, h4, h5, h6 {
130+
width: 100%;
131+
}
132+
133+
@include above(tablet) {
134+
box-shadow: var(--novablocks-block-content-current-box-shadow);
135+
136+
&:before {
137+
content: '';
138+
position: absolute;
139+
top: 0;
140+
right: 0;
141+
bottom: 0;
142+
left: 0;
143+
z-index: -1;
144+
145+
display: block;
146+
background-color: var(--novablocks-block-content-background-color);
147+
opacity: var(--novablocks-block-content-background-opacity);
148+
pointer-events: none;
149+
150+
transition: var(--novablocks-transition);
151+
transition-property: background-color, opacity;
152+
}
153+
}
154+
}
155+
156+
@include below(tablet) {
157+
158+
.block-is-moderate.content-is-basic {
159+
--novablocks-block-background-color: var(--novablocks-current-light-tertiary);
160+
--block-padding: var(--novablocks-block-padding);
161+
}
162+
163+
.block-is-highlighted.content-is-basic,
164+
.block-is-highlighted.content-is-moderate,
165+
.block-is-basic.content-is-highlighted,
166+
.block-is-moderate.content-is-highlighted {
167+
--novablocks-block-background-color: var(--novablocks-current-dark-primary);
168+
--novablocks-block-content-text-color: var(--novablocks-current-light-primary);
169+
--novablocks-block-content-titles-color: var(--novablocks-current-light-primary);
170+
--novablocks-block-content-accent-color: var(--novablocks-current-light-primary);
171+
--novablocks-block-text-color: var(--novablocks-block-content-text-color);
172+
--novablocks-block-titles-color: var(--novablocks-block-content-titles-color);
173+
--novablocks-block-accent-color: var(--novablocks-block-content-accent-color);
174+
--block-padding: var(--novablocks-block-padding);
175+
176+
.is-style-alternate & {
177+
--novablocks-block-background-color: var(--novablocks-block-current-accent-color);
178+
--novablocks-block-accent-color: var(--novablocks-current-light-primary);
179+
}
180+
}
181+
}
182+
183+
@include above(tablet) {
184+
185+
.block-is-moderate {
186+
--novablocks-block-background-color: var(--novablocks-current-light-tertiary);
187+
--block-padding: var(--novablocks-block-padding);
188+
}
189+
190+
.block-is-highlighted {
191+
--novablocks-block-background-color: var(--novablocks-current-dark-primary);
192+
--novablocks-block-text-color: var(--novablocks-current-light-primary);
193+
--novablocks-block-titles-color: var(--novablocks-current-light-primary);
194+
--novablocks-block-accent-color: var(--novablocks-current-light-primary);
195+
--block-padding: var(--novablocks-block-padding);
196+
197+
.is-style-alternate & {
198+
--novablocks-block-background-color: var(--novablocks-block-current-accent-color);
199+
--novablocks-block-accent-color: var(--novablocks-current-light-primary);
200+
201+
&:not(.content-is-highlighted) {
202+
--novablocks-block-content-accent-color: var(--novablocks-current-light-primary);
203+
}
204+
}
205+
}
206+
207+
.content-is-moderate,
208+
.content-is-highlighted {
209+
--block-content-padding: calc( var(--novablocks-block-content-padding) * var(--novablocks-block-content-padding-multiplier, 1) );
210+
}
211+
212+
.content-is-moderate.block-is-moderate {
213+
--novablocks-block-content-background-color: var(--novablocks-current-light-primary);
214+
}
215+
216+
.content-is-highlighted.block-is-highlighted {
217+
--novablocks-block-content-background-color: var(--novablocks-current-light-primary);
218+
}
219+
220+
.block-is-highlighted:not(.content-is-highlighted),
221+
.content-is-highlighted:not(.block-is-highlighted) {
222+
--novablocks-block-content-text-color: var(--novablocks-current-light-primary);
223+
--novablocks-block-content-titles-color: var(--novablocks-block-content-text-color);
224+
}
225+
226+
.content-is-highlighted:not(.block-is-highlighted) {
227+
--novablocks-block-content-background-color: var(--novablocks-current-dark-primary);
228+
229+
.is-style-alternate & {
230+
--novablocks-block-content-background-color: var(--novablocks-block-current-accent-color);
231+
--novablocks-block-content-accent-color: var(--novablocks-current-light-primary);
232+
}
233+
}
234+
}

‎assets/scss/blocks/nova-blocks/media/_style.scss‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
@import 'block-colors';
2+
13
// hack to contain negative margin-top of .novablocks-media__layout
24
.novablocks-media > .wp-block-group__inner-container {
35
padding-top: 1px;
@@ -54,3 +56,16 @@
5456
flex-direction: row-reverse;
5557
}
5658
}
59+
60+
.novablocks-media {
61+
62+
.novablocks-block[class] {
63+
background: linear-gradient(
64+
var(--novablocks-media-background-direction),
65+
var(--novablocks-block-background-color) 0,
66+
var(--novablocks-block-background-color) calc(var(--emphasis-area) * 1%),
67+
transparent calc(var(--emphasis-area) * 1%)
68+
);
69+
background-size: 100% 100%;
70+
}
71+
}

‎assets/scss/setup/mixins/_variation.scss‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -100,10 +100,6 @@ $variations: (
100100
);
101101

102102
@mixin variation( $variation-name, $destination: current, $source: sm ) {
103-
@if ( $source != theme and $source != sm ) {
104-
@warn '$source parameter can be either "theme" or "sm"';
105-
}
106-
107103
$variation: map-get( $variations, $variation-name );
108104
@each $destination-color in $destinations {
109105
$source-color: map-deep-get($variations, $variation-name, $destination-color);

0 commit comments

Comments
 (0)