Mirrors
/
Zelda64Recomp
mirror of https://github.com/Mr-Wiseguy/Zelda64Recomp.git
0
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

styled control options

This commit is contained in:
thecozies 2024-01-18 14:49:29 -06:00
parent 3759688e72
commit 340b838001
10 changed files with 226 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
assets/config_menu.rml
View File

@ -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
View 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>
Side by Side

After

Width:  |  Height:  |  Size: 738 B

2
assets/recomp.rcss
View File

File diff suppressed because one or more lines are too long

84
assets/scss/styles/components/ControlOption.scss Normal file
View 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
View 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);
}
}

14
assets/scss/styles/components/InputConfig.scss
View File

@ -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 {

2
assets/scss/styles/components/_components.scss
View File

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

6
assets/scss/styles/global.scss
View File

@ -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;
}

11
assets/scss/styles/mixins/_typography.scss
View File

@ -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);
}

2
assets/scss/styles/vars/_colors.scss
View File

@ -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);