styled control options

assets/config_menu.rml

@@ -129,31 +129,36 @@
 								<div class="input-config__horizontal-split">
 									<div class="input-config__mappings" data-event-mouseout="set_input_row_focus(-1)">
 										<div class="input-config__mappings-scroll">
-											<div
+											<div class="input-config__mappings-wrapper">
-												class="input-config__map-row"
+												<div
-												id="input_row"
+													class="control-option"
-												data-for="input_bindings, i : inputs"
+													id="input_row"
-												data-event-mouseover="set_input_row_focus(i)"
+													data-for="input_bindings, i : inputs"
-											>
+													data-event-mouseover="set_input_row_focus(i)"
-												<label
+												>
-													class="config-option__title"
+													<label
-													style="display:inline-block;width:250dp"
+														class="control-option__label"
-													>{{get_input_name(i)}}</label>
+														>{{get_input_name(i)}}</label>
-												<button
+													<div class="control-option__bindings">
-													data-event-blur="set_input_row_focus(-1)"
+														<button
-													data-event-focus="set_input_row_focus(i)"
+															data-event-blur="set_input_row_focus(-1)"
-													data-for="cur_binding, j : input_bindings"
+															data-event-focus="set_input_row_focus(i)"
-													data-event-click="set_input_binding(i,j)"
+															data-for="cur_binding, j : input_bindings"
-													class="button button--secondary label-md"
+															data-event-click="set_input_binding(i,j)"
-													style="font-family:promptfont;font-size:40dp;display:inline-block;height:50dp;width:150dp;padding:0dp;text-align:center"
+															class="prompt-font control-option__binding"
-													>{{cur_binding}}</button>
+														>
-												<button
+															<div>{{cur_binding}}</div>
-													data-event-blur="set_input_row_focus(-1)"
+														</button>
-													data-event-focus="set_input_row_focus(i)"
+													</div>
-													data-event-click="clear_input_bindings(i)"
+													<button
-													class="button button--secondary label-md"
+														data-event-blur="set_input_row_focus(-1)"
-													style="display:inline-block;height:50dp;width:150dp;padding:0dp;text-align:center"
+														data-event-focus="set_input_row_focus(i)"
-													>Delete</button>
+														data-event-click="clear_input_bindings(i)"
+														class="icon-button icon-button--danger"
+													>
+														<svg src="icons/Trash.svg" />
+													</button>
+												</div>
 											</div>
 										</div>
 									</div>

assets/icons/Trash.svg

@@ -0,0 +1,8 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M29 5L3 5" stroke="#ffffff" stroke-width="4" stroke-linecap="round"/>
+    <path d="M8 29L6 7" stroke="#ffffff" stroke-width="4" stroke-linecap="round"/>
+    <path d="M24 29L26 7" stroke="#ffffff" stroke-width="4" stroke-linecap="round"/>
+    <path d="M12 3L20 3" stroke="#ffffff" stroke-width="4" stroke-linecap="round"/>
+    <path d="M8 29L24 29" stroke="#ffffff" stroke-width="4" stroke-linecap="round"/>
+    <path d="M10.4403 25.2837L9.12975 9.55699C9.0599 8.71884 9.72133 8 10.5624 8C11.3564 8 12 8.64364 12 9.43761V25.2188C12 25.6502 11.6502 26 11.2188 26C10.8125 26 10.474 25.6886 10.4403 25.2837Z" fill="#F2F2F2"/>
+</svg>

assets/scss/styles/components/ControlOption.scss

@@ -0,0 +1,84 @@
+@use 'sass:color';
+
+.control-option {
+    @include set-color($color-text-dim);
+    display: flex;
+    position: relative;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    height: auto;
+    padding: space(8) space(16) space(8) space(20);
+    border-radius: $border-radius-sm;
+    background-color: rgba(0, 0, 0, 0);
+
+    &:focus-visible:not(:disabled, [disabled]),
+    &:hover:not(:disabled, [disabled]) {
+        @include set-color($color-text);
+        background-color: $color-bg-overlay;
+    }
+
+    &:disabled, &[disabled] {
+        opacity: 0.5;
+    }
+
+    .icon-button {
+        flex: 1 1 auto;
+    }
+}
+
+.control-option__label {
+    @extend %label-md;
+    flex: 2 1 space(300);
+    height: auto;
+    white-space: nowrap;
+}
+
+.control-option__bindings {
+    display: flex;
+    position: relative;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    flex: 2 1 space(400);
+    width: 100%;
+    height: space(72);
+    padding: 0 space(12) 0 space(4);
+}
+
+.control-option__binding {
+    @include set-color($color-text-dim);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 0 space(4);
+
+    flex: 1 1 100%;
+    width: 100%;
+    height: space(72);
+    padding: space(8);
+    background-color: $color-bg-overlay;
+    border-color: $color-bg-overlay;
+    border-width: space(1);
+    border-radius: $border-radius-sm;
+
+    &:focus, &:hover {
+        @include set-color($color-text);
+        background-color: $color-border-soft;
+        border-color: $color-text;
+    }
+
+    &:active {
+        @include set-color(color.scale($color-text, $lightness: 20%));
+    }
+
+    &:disabled, &[disabled] {
+        @include set-color($color-text-dim);
+        opacity: 0.5;
+    }
+
+    &:not([disabled]) {
+        @extend %nav-all;
+    }
+}

assets/scss/styles/components/IconButton.scss

@@ -0,0 +1,83 @@
+@use 'sass:color';
+
+@mixin create-icon-button-variation($base-col) {
+    background-color: rgba($base-col, 0.05);
+    border-color: rgba($base-col, 0.8);
+
+    &:focus, &:hover {
+        border-color: $base-col;
+        background-color: rgba($base-col, 0.3);
+    }
+
+    &:active {
+        background-color: rgba($base-col, 0.2);
+    }
+}
+
+$icon-button-size: 56;
+
+.icon-button {
+    @include set-color($color-text-dim);
+    @include create-icon-button-variation($color-primary);
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+
+    border-radius: space($icon-button-size * 0.5);
+    border-width: space(1.5);
+    width: space($icon-button-size);
+    height: space($icon-button-size);
+    min-width: space($icon-button-size);
+    min-height: space($icon-button-size);
+    max-width: space($icon-button-size);
+    max-height: space($icon-button-size);
+
+    &:focus, &:hover {
+        @include set-color($color-text);
+    }
+
+    &:active {
+        @include set-color(color.scale($color-text, $lightness: 20%));
+    }
+
+    &:disabled,&[disabled] {
+        @include set-color($color-text-dim);
+        opacity: 0.5;
+    }
+
+    &:not([disabled]) {
+        @extend %nav-all;
+    }
+
+    svg {
+        width: space(32);
+        height: space(32);
+    }
+
+    // Setting it by default for convenience
+    // &--primary {
+    //     @include create-icon-button-variation($color-primary);
+    // }
+
+    &--secondary {
+        @include create-icon-button-variation($color-secondary);
+    }
+
+    &--tertiary {
+        @include create-icon-button-variation($color-text);
+    }
+
+    &--success {
+        @include create-icon-button-variation($color-success);
+    }
+
+    &--danger {
+        @include create-icon-button-variation($color-error);
+    }
+
+    &--warning {
+        @include create-icon-button-variation($color-warning);
+    }
+}

assets/scss/styles/components/InputConfig.scss

@@ -30,18 +30,8 @@ $visual-max-width: math.div($base-height*16, 9) - $page-margin - $page-margin -
     overflow-y: auto;
 }
 
-.input-config__map-row {
+.input-config__mappings-wrapper {
-    display: flex;
+    padding: space(8);
-    flex-direction: row;
-    flex: 1 1 100%;
-    align-items: center;
-    justify-content: space-between;
-    border-radius: $border-radius-sm;
-    padding: space(4);
-
-    &:hover, &:focus-visible {
-        background-color: $color-primary-a20;
-    }
 }
 
 .input-config__visual-wrapper {

assets/scss/styles/components/_components.scss

@@ -1,8 +1,10 @@
 @import "./CenteredPage";
+@import "./ControlOption";
 @import "./Tabs";
 @import "./Config";
 @import "./InputConfig";
 @import "./Button";
+@import "./IconButton";
 @import "./Launcher";
 @import "./MenuListItem";
 @import "./SubtitleTitle";

assets/scss/styles/global.scss

@@ -2,8 +2,6 @@
 @import "./globals/old";
 @import "./components/components";
 
-
-$font-stack: chiaro;
 $font-size: 20dp;
 
 body
@@ -56,6 +54,10 @@ h3 {
     @extend %label-sm;
 }
 
+.prompt-font {
+    @extend %prompt-font;
+}
+
 button {
     background-color: $color-primary-d;
 }

assets/scss/styles/mixins/_typography.scss

@@ -1,5 +1,8 @@
 
+$font-stack: chiaro;
+
 @mixin set-font-sizing($sz, $spacing) {
+    // font-family: $font-stack;
     font-size: space($sz);
     letter-spacing: space($sz * $spacing);
     line-height: space($sz);
@@ -47,3 +50,11 @@
     font-style: normal;
 	font-weight: 400;
 }
+
+%prompt-font {
+    font-family: promptfont;
+    font-style: normal;
+    font-weight: 400;
+    font-size: space(40);
+    line-height: space(40);
+}

assets/scss/styles/vars/_colors.scss

@@ -3,7 +3,7 @@
 $color-background-1: #08070D;
 $color-background-2: #121018;
 $color-background-3: #191622;
-$color-bg-overlay: rgba(190, 184, 219, 0.0500);
+$color-bg-overlay: rgba(190, 184, 219, 0.1000);
 $color-modal-overlay: rgba(8, 7, 13, 0.8400);
 $color-bg-shadow: rgba(0, 0, 0, 0.3500);
 $color-bg-shadow-2: rgba(8, 7, 13, 0.7200);