Skip to content

Commit b9c5400

Browse files
jneviusjnevius
committed
- Styling: removed scoped styles from Comms Wizard start page and migrated to scss.
1 parent c2026c1 commit b9c5400

File tree

3 files changed

+167
-86
lines changed

3 files changed

+167
-86
lines changed

‎Rock.JavaScript.Obsidian.Blocks/src/Communication/CommunicationEntryWizard/wizardStartStep.partial.obs‎

Lines changed: 0 additions & 86 deletions
Original file line numberDiff line numberDiff line change
@@ -263,92 +263,6 @@
263263
<style scoped>
264264
@import "/Styles/RockFont/style.css";
265265
@import "/Styles/Blocks/Shared/Devices.css";
266-
267-
.mediums-section {
268-
display: grid;
269-
grid-template-columns: repeat(auto-fill, minmax(200px, 250px));
270-
grid-template-rows: auto auto auto auto auto;
271-
gap: var(--spacing-large);
272-
padding-left: 2px; /* Adjustment for focus state & border */
273-
274-
}
275-
276-
.medium {
277-
display: grid;
278-
grid-template-rows: subgrid;
279-
grid-row: span 5;
280-
gap: var(--spacing-xsmall);
281-
282-
cursor: pointer;
283-
padding: var(--spacing-medium);
284-
text-align: center;
285-
border: 1px solid var(--color-interface-soft);
286-
border-radius: var(--rounded-small);
287-
transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
288-
}
289-
290-
.medium.selected {
291-
border: var(--focus-state-border);
292-
box-shadow: var(--focus-state-shadow);
293-
}
294-
295-
.medium-content {
296-
display: grid;
297-
grid-template-rows: subgrid;
298-
gap: var(--spacing-xsmall);
299-
grid-row: span 5;
300-
}
301-
302-
.medium-content .label {
303-
margin-left: auto;
304-
margin-right: auto;
305-
width: fit-content;
306-
}
307-
308-
.medium-content small {
309-
color: var(--color-interface-medium);
310-
}
311-
312-
.medium-content h5 {
313-
margin: 0;
314-
}
315-
316-
.medium-content i {
317-
color: var(--color-interface-stronger);
318-
}
319-
320-
.medium .ti-circle-dot {
321-
color: var(--color-primary);
322-
}
323-
324-
.wizard-start-container {
325-
display: flex;
326-
flex-direction: column;
327-
height: 100%;
328-
}
329-
330-
.communication-list-group-container {
331-
display: flex;
332-
flex-direction: row;
333-
gap: var(--spacing-xsmall);
334-
}
335-
336-
.communication-list-container {
337-
flex: 1;
338-
}
339-
340-
:deep(.panel-body-wizard) {
341-
flex: 1;
342-
display: flex;
343-
flex-direction: column;
344-
overflow: hidden;
345-
}
346-
347-
.panel-body-contents {
348-
flex: 1;
349-
overflow-x: hidden;
350-
overflow-y: auto;
351-
}
352266
</style>
353267

354268

‎RockWeb/Styles/styles-v2/blocks/_blocks-communication.scss‎

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -85,6 +85,102 @@ iframe.email-body {
8585

8686

8787
// ======================== COMMUNICATION WIZARD ========================
88+
89+
// Wizard Start Page
90+
91+
.wizard-start-step {
92+
93+
.panel-body-wizard {
94+
flex: 1;
95+
display: flex;
96+
flex-direction: column;
97+
overflow: hidden;
98+
99+
.panel-body-contents {
100+
flex: 1;
101+
overflow-x: hidden;
102+
overflow-y: auto;
103+
104+
.mediums-section {
105+
display: grid;
106+
grid-template-columns: repeat(auto-fill, minmax(200px, 250px));
107+
grid-template-rows: auto auto auto auto auto;
108+
gap: var(--spacing-large);
109+
padding-left: 2px; /* Adjustment for focus state & border */
110+
}
111+
112+
.medium {
113+
display: grid;
114+
grid-template-rows: subgrid;
115+
grid-row: span 5;
116+
gap: var(--spacing-xsmall);
117+
118+
cursor: pointer;
119+
padding: var(--spacing-medium);
120+
text-align: center;
121+
border: 1px solid var(--color-interface-soft);
122+
border-radius: var(--rounded-small);
123+
transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
124+
}
125+
126+
.medium.selected {
127+
border: var(--focus-state-border);
128+
box-shadow: var(--focus-state-shadow);
129+
}
130+
131+
.medium-content {
132+
display: grid;
133+
grid-template-rows: subgrid;
134+
gap: var(--spacing-xsmall);
135+
grid-row: span 5;
136+
}
137+
138+
.medium-content .label {
139+
margin-left: auto;
140+
margin-right: auto;
141+
width: fit-content;
142+
}
143+
144+
.medium-content small {
145+
color: var(--color-interface-medium);
146+
}
147+
148+
.medium-content h5 {
149+
margin: 0;
150+
}
151+
152+
.medium-content i {
153+
color: var(--color-interface-stronger);
154+
}
155+
156+
.medium .ti-circle-dot {
157+
color: var(--color-primary);
158+
}
159+
160+
.wizard-start-container {
161+
display: flex;
162+
flex-direction: column;
163+
height: 100%;
164+
}
165+
166+
.communication-list-group-container {
167+
display: flex;
168+
flex-direction: row;
169+
gap: var(--spacing-xsmall);
170+
}
171+
172+
.communication-list-container {
173+
flex: 1;
174+
}
175+
176+
}
177+
178+
}
179+
180+
}
181+
182+
183+
// Communication Template Selection
88184
.communication-template {
89185
position: relative;
90186
display: block;

‎RockWeb/Themes/RockNextGen/Styles/theme.css‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21902,6 +21902,77 @@ iframe.email-body {
2190221902
content: "AI";
2190321903
}
2190421904

21905+
.wizard-start-step .panel-body-wizard {
21906+
flex: 1;
21907+
display: flex;
21908+
flex-direction: column;
21909+
overflow: hidden;
21910+
}
21911+
.wizard-start-step .panel-body-wizard .panel-body-contents {
21912+
flex: 1;
21913+
overflow-x: hidden;
21914+
overflow-y: auto;
21915+
}
21916+
.wizard-start-step .panel-body-wizard .panel-body-contents .mediums-section {
21917+
display: grid;
21918+
grid-template-columns: repeat(auto-fill, minmax(200px, 250px));
21919+
grid-template-rows: auto auto auto auto auto;
21920+
gap: var(--spacing-large);
21921+
padding-left: 2px; /* Adjustment for focus state & border */
21922+
}
21923+
.wizard-start-step .panel-body-wizard .panel-body-contents .medium {
21924+
display: grid;
21925+
grid-template-rows: subgrid;
21926+
grid-row: span 5;
21927+
gap: var(--spacing-xsmall);
21928+
cursor: pointer;
21929+
padding: var(--spacing-medium);
21930+
text-align: center;
21931+
border: 1px solid var(--color-interface-soft);
21932+
border-radius: var(--rounded-small);
21933+
transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
21934+
}
21935+
.wizard-start-step .panel-body-wizard .panel-body-contents .medium.selected {
21936+
border: var(--focus-state-border);
21937+
box-shadow: var(--focus-state-shadow);
21938+
}
21939+
.wizard-start-step .panel-body-wizard .panel-body-contents .medium-content {
21940+
display: grid;
21941+
grid-template-rows: subgrid;
21942+
gap: var(--spacing-xsmall);
21943+
grid-row: span 5;
21944+
}
21945+
.wizard-start-step .panel-body-wizard .panel-body-contents .medium-content .label {
21946+
margin-left: auto;
21947+
margin-right: auto;
21948+
width: fit-content;
21949+
}
21950+
.wizard-start-step .panel-body-wizard .panel-body-contents .medium-content small {
21951+
color: var(--color-interface-medium);
21952+
}
21953+
.wizard-start-step .panel-body-wizard .panel-body-contents .medium-content h5 {
21954+
margin: 0;
21955+
}
21956+
.wizard-start-step .panel-body-wizard .panel-body-contents .medium-content i {
21957+
color: var(--color-interface-stronger);
21958+
}
21959+
.wizard-start-step .panel-body-wizard .panel-body-contents .medium .ti-circle-dot {
21960+
color: var(--color-primary);
21961+
}
21962+
.wizard-start-step .panel-body-wizard .panel-body-contents .wizard-start-container {
21963+
display: flex;
21964+
flex-direction: column;
21965+
height: 100%;
21966+
}
21967+
.wizard-start-step .panel-body-wizard .panel-body-contents .communication-list-group-container {
21968+
display: flex;
21969+
flex-direction: row;
21970+
gap: var(--spacing-xsmall);
21971+
}
21972+
.wizard-start-step .panel-body-wizard .panel-body-contents .communication-list-container {
21973+
flex: 1;
21974+
}
21975+
2190521976
.communication-template {
2190621977
position: relative;
2190721978
display: block;

0 commit comments

Comments
 (0)