mirror/Zelda64Recomp
1
0
Fork 0
mirror of https://github.com/Zelda64Recomp/Zelda64Recomp synced 2026-06-30 03:49:11 -04:00
Code Issues Packages Projects Releases Wiki Activity

Added dropdown option type

Browse Source
This commit is contained in:
thecozies
2024-07-22 09:46:04 -05:00
parent 4f02b48cd5
commit cb7122909e
12 changed files with 246 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/recomp.rcss
+1 -1
View File
File diff suppressed because one or more lines are too long
assets/scss/styles/components/ConfigOption.scss
+74
View File
@@ -318,3 +318,77 @@
color: $color-text;
tab-index: none;
}
.config-option-dropdown {
display: flex;
position: relative;
flex: 1 1 100%;
flex-direction: row;
align-items: center;
justify-content: flex-start;
width: auto;
max-width: space(500);
height: auto;
padding: space(8) space(12);
&__select {
@extend %body;
@extend %nav-all;
@include trans-colors-border;
@include border($color-white-a50);
display: block;
position: relative;
box-sizing: border-box;
flex: 1 1 100%;
align-items: center;
justify-content: flex-start;
width: auto;
height: space(48);
padding: space(14);
border-radius: $border-radius-md;
background-color: $color-white-a5;
cursor: pointer;
&:hover, &:focus {
@include border($color-white-a80);
background-color: $color-white-a20;
}
selectvalue {
display: inline;
height: auto;
margin: auto 0;
}
selectbox {
@include border($color-border);
margin-top: space(2);
padding: space(4) 0;
border-radius: $border-radius-md;
background-color: $color-background-3;
option {
@extend %nav-all;
@include trans-colors;
padding: space(8) space(12);
background-color: $color-transparent;
color: $color-text-dim;
font-weight: 400;
&:hover, &:focus {
background-color: $color-white-a20;
}
&:hover:not(:checked) {
cursor: pointer;
}
&:checked {
background-color: $color-white-a5;
color: $color-white;
}
}
}
}
}