added recording icon while actively mapping

assets/config_menu.rml

@@ -127,7 +127,7 @@
 							<div class="tab__indicator"></div>
 						</tab>
 						<panel class="config" data-model="controls_model">
-							<form class="config__form" data-attr-cur-input="cur_input_row">
+							<form class="config__form" data-attr-cur-input="cur_input_row" data-attr-cur-binding-slot="active_binding_slot">
 								<div class="config__header">
 									<div class="config__header-left">
 										<button
@@ -161,6 +161,7 @@
 														id="input_row"
 														data-for="input_bindings, i : inputs.array"
 														data-event-mouseover="set_input_row_focus(i)"
+														data-class-control-option--active="get_input_enum_name(i)==cur_input_row"
 													>
 														<label
 															class="control-option__label"
@@ -172,8 +173,15 @@
 																data-for="cur_binding, j : input_bindings"
 																data-event-click="set_input_binding(i,j)"
 																class="prompt-font control-option__binding"
+																data-attr-bind-slot="j"
 															>
-																<div>{{cur_binding}}</div>
+																<div class="control-option__binding-recording">
+																	<div class="control-option__binding-circle" />
+																	<div class="control-option__binding-edge">
+																		<svg class="control-option__binding-edge-svg" src="icons/RecordBorder.svg" />
+																	</div>
+																</div>
+																<div class="control-option__binding-icon">{{cur_binding}}</div>
 															</button>
 														</div>
 														<button

assets/icons/RecordBorder.svg

@@ -0,0 +1,3 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <circle cx="20" cy="20" r="18" stroke="#FFFFFF" stroke-opacity="1.0" stroke-width="3"/>
+</svg>

assets/scss/styles/components/ControlOption.scss

@@ -1,4 +1,5 @@
 @use 'sass:color';
+@use 'sass:math';
 
 .control-option {
     @include set-color($color-text-dim);
@@ -24,6 +25,25 @@
         opacity: 0.5;
     }
 
+    &--active {
+        // while actively looking for inputs, set styles to the correct slots
+        $valid-binding-slots: 0, 1;
+        @each $slot in $valid-binding-slots {
+            // global attr -> this active row -> binding slot
+            [cur-binding-slot="#{$slot}"] & .control-option__binding[bind-slot="#{$slot}"] {
+                border-color: $color-error;
+
+                .control-option__binding-icon {
+                    opacity: 0;
+                }
+
+                .control-option__binding-recording {
+                    opacity: 1;
+                }
+            }
+        }
+    }
+
     .icon-button {
         flex: 1 1 auto;
     }
@@ -52,6 +72,7 @@
     @include set-color($color-text-dim);
     @include trans-colors-border;
     display: flex;
+    position: relative;
     align-items: center;
     justify-content: center;
     margin: 0 space(4);
@@ -85,3 +106,63 @@
         cursor: pointer;
     }
 }
+
+.control-option__binding-icon {
+    @include trans-colors-opa;
+    opacity: 1;
+}
+
+@keyframes control-option__binding-recording-scale {
+	0% {
+		transform: scale(1);
+	}
+	50% {
+		transform: scale(0.85);
+	}
+	to { 
+		transform: scale(1);
+	}
+}
+
+.control-option__binding-recording {
+    @include trans-colors-opa;
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    opacity: 0;
+
+    .control-option__binding-circle {
+        $rec-size: 24;
+
+        width: space($rec-size);
+        height: space($rec-size);
+        background-color: $color-error;
+        border-radius: space($rec-size);
+        animation: 1.5s sine-in-out infinite control-option__binding-recording-scale;
+    }
+
+    .control-option__binding-edge {
+        $edge-size: 36;
+        $h-edge-size: math.div($edge-size, 2);
+
+        position: absolute;
+
+        transform: translate(-50%, -50%);
+
+        top: 50%;
+        left: 50%;
+        width: space($edge-size);
+        height: space($edge-size);
+        
+        > svg.control-option__binding-edge-svg {
+            width: space($edge-size);
+            height: space($edge-size);
+            image-color: $color-error;
+        }
+    }
+}