mirror/Zelda64Recomp
1
0
Fork 0
mirror of https://github.com/Zelda64Recomp/Zelda64Recomp synced 2026-09-01 10:12:51 -04:00
Code Issues Packages Projects Releases Wiki Activity

init mod menu + bem class + button presets

Browse Source
This commit is contained in:
thecozies
2024-09-13 10:13:52 -05:00
committed by Mr-Wiseguy
parent b67da848f3
commit a05ac15dcd
16 changed files with 264 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/config_menu/controls.rml
+2 -2
View File
@@ -71,7 +71,7 @@
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"
class="icon-button icon-button--error"
data-attr-style="i == 0 ? 'nav-up:#cont_kb_toggle' : 'nav-up:auto'"
>
<svg src="icons/Trash.svg" />
@@ -81,7 +81,7 @@
data-event-blur="set_input_row_focus(-1)"
data-event-focus="set_input_row_focus(i)"
data-event-click="reset_single_input_binding_to_default(i)"
class="icon-button icon-button--danger"
class="icon-button icon-button--error"
data-attr-style="i == 0 ? 'nav-up:#cont_kb_toggle' : 'nav-up:auto'"
>
<svg src="icons/Reset.svg" />
assets/launcher.rml
+1
View File
@@ -61,6 +61,7 @@
<label>v{{version_number}}</label>
</div>
</div>
<recomp-mod-menu />
</div>
</body>
</rml>
assets/recomp.rcss
+1 -1
View File
File diff suppressed because one or more lines are too long
assets/scss/styles/components/IconButton.scss
+2 -2
View File
@@ -2,7 +2,7 @@
/*
<button
class="icon-button icon-button--danger"
class="icon-button icon-button--error"
>
<svg src="icons/Trash.svg" />
</button>
@@ -82,7 +82,7 @@ $icon-button-size: 56 - ($border-width-thickness-num * 2);
@include create-icon-button-variation($color-success);
}
&--danger {
&--error {
@include create-icon-button-variation($color-error);
}
assets/scss/styles/components/ModMenu.scss
+87
View File
@@ -0,0 +1,87 @@
.mod-menu {
display: flex;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
flex-direction: row;
align-items: center;
justify-content: center;
padding: space($page-margin);
background-color: $color-modal-overlay;
&__modal-wrapper {
display: flex;
position: relative;
flex: 1 1 100%;
flex-direction: column;
width: 100%;
max-width: space($base-modal-max-width);
height: 100%;
margin: auto;
border-width: $border-width-thickness;
border-radius: $border-radius-modal;
border-color: $color-border;
background: $color-bg-shadow;
}
&__modal-header {
display: flex;
position: relative;
flex: 1 1 auto;
flex-direction: row;
align-items: center;
justify-content: space-between;
width: 100%;
height: auto;
padding: space(16);
border-bottom-width: $border-width-thickness;
border-top-left-radius: $border-radius-modal;
border-top-right-radius: $border-radius-modal;
border-bottom-color: $color-border;
background-color: $color-bg-overlay;
}
&__modal-body {
display: flex;
position: relative;
flex: 1 1 auto;
flex-direction: row;
align-items: center;
justify-content: center;
width: 100%;
height: auto;
}
&__list {
display: block;
position: relative;
flex: 1 1 100%;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
margin: 0;
padding: 0;
border-bottom-left-radius: $border-radius-modal;
background-color: $color-bg-shadow;
}
&__list-scroll {
flex: 1 1 100%;
width: 100%;
height: 100%;
max-height: 100%;
overflow-y: auto;
}
&__details {
display: block;
position: relative;
flex: 1 1 100%;
height: 100%;
border-bottom-right-radius: $border-radius-modal;
background-color: $color-bg-overlay;
}
}
assets/scss/styles/components/_components.scss
+1
View File
@@ -14,3 +14,4 @@
@import "./Toggle";
@import "./BottomLeft";
@import "./Prompt";
@import "./ModMenu";