- Styling: migrated comms wizard start step styles to less file.

Author: jnevius

RockWeb/Styles/_blocks-communication.less

@@ -68,6 +68,99 @@ iframe.email-body {
 // 4. Communication Wizard
 // -------------------------
 
+// Wizard Start Step
+.wizard-start-step {
+
+  .panel-body-wizard {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+
+      .panel-body-contents {
+        flex: 1;
+        overflow-x: hidden;
+        overflow-y: auto;
+
+        .mediums-section {
+          display: grid;
+          grid-template-columns: repeat(auto-fill, minmax(200px, 250px));
+          grid-template-rows: auto auto auto auto auto;
+          gap: var(--spacing-large);
+          padding-left: 2px; /* Adjustment for focus state & border */
+        }
+
+        .medium {
+            display: grid;
+            grid-template-rows: subgrid;
+            grid-row: span 5;
+            gap: var(--spacing-xsmall);
+
+            cursor: pointer;
+            padding: var(--spacing-medium);
+            text-align: center;
+            border: 1px solid var(--color-interface-soft);
+            border-radius: var(--rounded-small);
+            transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
+        }
+
+        .medium.selected {
+            border: var(--focus-state-border);
+            box-shadow: var(--focus-state-shadow);
+        }
+
+        .medium-content {
+            display: grid;
+            grid-template-rows: subgrid;
+            gap: var(--spacing-xsmall);
+            grid-row: span 5;
+        }
+
+        .medium-content .label {
+            margin-left: auto;
+            margin-right: auto;
+            width: fit-content;
+        }
+
+        .medium-content small {
+            color: var(--color-interface-medium);
+        }
+
+        .medium-content h5 {
+            margin: 0;
+        }
+
+        .medium-content i {
+            color: var(--color-interface-stronger);
+        }
+
+        .medium .ti-circle-dot {
+            color: var(--color-primary);
+        }
+
+        .wizard-start-container {
+            display: flex;
+            flex-direction: column;
+            height: 100%;
+        }
+
+        .communication-list-group-container {
+            display: flex;
+            flex-direction: row;
+            gap: var(--spacing-xsmall);
+        }
+
+        .communication-list-container {
+            flex: 1;
+        }
+
+      }
+
+  }
+
+}
+
+// Communication Template Selection
 .communication-template {
   position: relative;
   display: block;