mirror of
https://github.com/Mr-Wiseguy/Zelda64Recomp.git
synced 2024-09-05 20:07:35 +02:00
styled control options
This commit is contained in:
parent
3759688e72
commit
340b838001
@ -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
|
||||
class="input-config__map-row"
|
||||
id="input_row"
|
||||
data-for="input_bindings, i : inputs"
|
||||
data-event-mouseover="set_input_row_focus(i)"
|
||||
>
|
||||
<label
|
||||
class="config-option__title"
|
||||
style="display:inline-block;width:250dp"
|
||||
>{{get_input_name(i)}}</label>
|
||||
<button
|
||||
data-event-blur="set_input_row_focus(-1)"
|
||||
data-event-focus="set_input_row_focus(i)"
|
||||
data-for="cur_binding, j : input_bindings"
|
||||
data-event-click="set_input_binding(i,j)"
|
||||
class="button button--secondary label-md"
|
||||
style="font-family:promptfont;font-size:40dp;display:inline-block;height:50dp;width:150dp;padding:0dp;text-align:center"
|
||||
>{{cur_binding}}</button>
|
||||
<button
|
||||
data-event-blur="set_input_row_focus(-1)"
|
||||
data-event-focus="set_input_row_focus(i)"
|
||||
data-event-click="clear_input_bindings(i)"
|
||||
class="button button--secondary label-md"
|
||||
style="display:inline-block;height:50dp;width:150dp;padding:0dp;text-align:center"
|
||||
>Delete</button>
|
||||
<div class="input-config__mappings-wrapper">
|
||||
<div
|
||||
class="control-option"
|
||||
id="input_row"
|
||||
data-for="input_bindings, i : inputs"
|
||||
data-event-mouseover="set_input_row_focus(i)"
|
||||
>
|
||||
<label
|
||||
class="control-option__label"
|
||||
>{{get_input_name(i)}}</label>
|
||||
<div class="control-option__bindings">
|
||||
<button
|
||||
data-event-blur="set_input_row_focus(-1)"
|
||||
data-event-focus="set_input_row_focus(i)"
|
||||
data-for="cur_binding, j : input_bindings"
|
||||
data-event-click="set_input_binding(i,j)"
|
||||
class="prompt-font control-option__binding"
|
||||
>
|
||||
<div>{{cur_binding}}</div>
|
||||
</button>
|
||||
</div>
|
||||
<button
|
||||
data-event-blur="set_input_row_focus(-1)"
|
||||
data-event-focus="set_input_row_focus(i)"
|
||||
data-event-click="clear_input_bindings(i)"
|
||||
class="icon-button icon-button--danger"
|
||||
>
|
||||
<svg src="icons/Trash.svg" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
8
assets/icons/Trash.svg
Normal file
8
assets/icons/Trash.svg
Normal file
@ -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>
|
After Width: | Height: | Size: 738 B |
File diff suppressed because one or more lines are too long
84
assets/scss/styles/components/ControlOption.scss
Normal file
84
assets/scss/styles/components/ControlOption.scss
Normal file
@ -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;
|
||||
}
|
||||
}
|
83
assets/scss/styles/components/IconButton.scss
Normal file
83
assets/scss/styles/components/IconButton.scss
Normal file
@ -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);
|
||||
}
|
||||
}
|
@ -30,18 +30,8 @@ $visual-max-width: math.div($base-height*16, 9) - $page-margin - $page-margin -
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.input-config__map-row {
|
||||
display: flex;
|
||||
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__mappings-wrapper {
|
||||
padding: space(8);
|
||||
}
|
||||
|
||||
.input-config__visual-wrapper {
|
||||
|
@ -1,8 +1,10 @@
|
||||
@import "./CenteredPage";
|
||||
@import "./ControlOption";
|
||||
@import "./Tabs";
|
||||
@import "./Config";
|
||||
@import "./InputConfig";
|
||||
@import "./Button";
|
||||
@import "./IconButton";
|
||||
@import "./Launcher";
|
||||
@import "./MenuListItem";
|
||||
@import "./SubtitleTitle";
|
||||
|
@ -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;
|
||||
}
|
||||
|
@ -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);
|
||||
}
|
||||
|
@ -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);
|
||||
|
Loading…
Reference in New Issue
Block a user