The-Homebrew-Cloud/Zelda64Recomp
2
0
Fork 0
mirror of https://github.com/Mr-Wiseguy/Zelda64Recomp.git synced 2024-11-05 22:35:06 +01:00
Code Issues Packages Projects Releases Wiki Activity

input conf header swap and rounded container

Browse Source
This commit is contained in:
thecozies 2024-01-29 09:42:23 -06:00 committed by Mr-Wiseguy
parent 28104fa76d
commit 66f184eec4
5 changed files with 45 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
assets/config_menu.rml
View File

@ -128,6 +128,27 @@
</tab>
<panel class="config" data-model="controls_model">
<form class="config__form" data-attr-cur-input="cur_input_row">
<div class="config__header">
<div class="config__header-left">
<button
class="button button--primary"
>
<div class="button__label">Controller</div>
</button>
<button
class="button button--secondary"
>
<div class="button__label">Keyboard</div>
</button>
</div>
<div>
<button
class="button button--warning"
>
<div class="button__label">Reset to defaults</div>
</button>
</div>
</div>
<div class="config__wrapper input-config">
<div class="input-config__horizontal-split">
<div class="input-config__mappings" data-event-mouseout="set_input_row_focus(-1)">
@ -296,27 +317,6 @@
</div>
</div>
</div>
<div class="config__footer">
<div class="config__footer-left">
<button
class="button button--primary"
>
<div class="button__label">Controller</div>
</button>
<button
class="button button--secondary"
>
<div class="button__label">Keyboard</div>
</button>
</div>
<div>
<button
class="button button--warning"
>
<div class="button__label">Reset to defaults</div>
</button>
</div>
</div>
</form>
</panel>
<tab class="tab">

2
assets/recomp.rcss
View File

File diff suppressed because one or more lines are too long

16
assets/scss/styles/components/Config.scss
View File

@ -28,19 +28,27 @@
background-color: $color-bg-shadow;
}
.config__footer {
@include border-top($color-border-soft);
.config__header, .config__footer {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
padding: space(20) space(20);
background-color: $color-bg-shadow;
}
.config__header {
@include border-bottom($color-border-soft);
padding: space(12) space(20);
}
.config__footer {
@include border-top($color-border-soft);
padding: space(20) space(20);
border-bottom-left-radius: $border-radius-modal;
border-bottom-right-radius: $border-radius-modal;
}
.config__footer-left {
.config__header-left {
display: flex;
flex-direction: row;
flex: 1 1 auto;

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

@ -55,10 +55,12 @@ $visual-max-width: $base-modal-max-width - $mapping-min-width - $scrollbar-width
display: flex;
flex-direction: column;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
top: space(16);
right: space(16);
bottom: space(16);
left: space(16);
border-radius: space(108);
background-color: $color-white-a5;
}
.input-config__visual-half {

5
assets/scss/styles/vars/_borders.scss
View File

@ -18,3 +18,8 @@ $border-width-thickness: space($border-width-thickness-num);
border-top-color: $col;
border-top-width: $border-width-thickness;
}
@mixin border-bottom($col: $color-border) {
border-bottom-color: $col;
border-bottom-width: $border-width-thickness;
}