mirror of
https://github.com/Mr-Wiseguy/Zelda64Recomp.git
synced 2024-11-22 12:59:14 +01:00
updated conf menu styling
This commit is contained in:
parent
8510bb9109
commit
7a27d6555c
@ -30,90 +30,92 @@
|
||||
<body class="window">
|
||||
<!-- <handle move_target="#document"> -->
|
||||
<div id="window" style="display:flex; flex-flow: column; text-align:center; background-color:rgba(0,0,0,0)">
|
||||
<div style="flex:1 1 auto">
|
||||
<tabset>
|
||||
<tab id="tab_graphics" autofocus>Graphics</tab>
|
||||
<panel data-model="graphics_model">
|
||||
<form>
|
||||
<div class="option_container">
|
||||
<div style="flex: 1 1 100%">
|
||||
<tabset class="centered-page tabs">
|
||||
<tab class="tab" id="tab_graphics" autofocus>Graphics</tab>
|
||||
<panel class="config" data-model="graphics_model">
|
||||
<form class="config__form">
|
||||
<div class="config__wrapper">
|
||||
<div class="option_row">
|
||||
<div class="option">
|
||||
<label class="option_title">Resolution</label><br/>
|
||||
<hr/>
|
||||
<div class="option_list">
|
||||
<div class="config-option">
|
||||
<label class="config-option__title">Resolution</label>
|
||||
<div class="config-option__list config-option__list">
|
||||
<input type="radio" name="resolution" data-checked="res_option" value="Original" id="res_original"/>
|
||||
<label for="res_original">Original</label>
|
||||
<label class="config-option__tab-label" for="res_original">Original</label>
|
||||
<input type="radio" name="resolution" data-checked="res_option" value="Original2x" id="res_2x" style="nav-down:#ar_expand"/>
|
||||
<label for="res_2x">Original 2x</label>
|
||||
<label class="config-option__tab-label" for="res_2x">Original 2x</label>
|
||||
<input type="radio" name="resolution" data-checked="res_option" value="Auto" id="res_auto" style="nav-down:#ar_expand"/>
|
||||
<label for="res_auto">Auto</label>
|
||||
<label class="config-option__tab-label" for="res_auto">Auto</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="option">
|
||||
<label class="option_title">Window Mode</label><br/>
|
||||
<hr/>
|
||||
<div class="option_list">
|
||||
<div class="config-option">
|
||||
<label class="config-option__title">Window Mode</label>
|
||||
<div class="config-option__list config-option__list">
|
||||
<input type="radio" name="windowmode" data-checked="wm_option" value="Windowed" id="wm_windowed" style="nav-down:#msaa_none"/>
|
||||
<label for="wm_windowed">Windowed</label>
|
||||
<label class="config-option__tab-label" for="wm_windowed">Windowed</label>
|
||||
<input type="radio" name="windowmode" data-checked="wm_option" value="Fullscreen" id="wm_fullscreen" style="nav-right:none"/>
|
||||
<label for="wm_fullscreen">Fullscreen</label>
|
||||
<label class="config-option__tab-label" for="wm_fullscreen">Fullscreen</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="option_row">
|
||||
<div class="option">
|
||||
<label class="option_title">Aspect Ratio</label><br/>
|
||||
<hr/>
|
||||
<div class="option_list">
|
||||
<div class="config-option">
|
||||
<label class="config-option__title">Aspect Ratio</label>
|
||||
<div class="config-option__list config-option__list">
|
||||
<input type="radio" name="aspectratio" data-checked="ar_option" value="Original" id="ar_original" style="nav-left:none"/>
|
||||
<label for="ar_original">Original</label>
|
||||
<label class="config-option__tab-label" for="ar_original">Original</label>
|
||||
<input type="radio" name="aspectratio" data-checked="ar_option" value="Expand" id="ar_expand" style="nav-up:#res_2x"/>
|
||||
<label for="ar_expand">Expand</label>
|
||||
<label class="config-option__tab-label" for="ar_expand">Expand</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="option">
|
||||
<label class="option_title">MS Anti-Aliasing</label><br/>
|
||||
<hr/>
|
||||
<div class="option_list">
|
||||
<div class="config-option">
|
||||
<label class="config-option__title">MS Anti-Aliasing</label>
|
||||
<div class="config-option__list config-option__list">
|
||||
<input type="radio" name="antialiasing" data-checked="msaa_option" value="None" id="msaa_none" style="nav-up:#wm_windowed;nav-down:#rr_manual"/>
|
||||
<label for="msaa_none">None</label>
|
||||
<label class="config-option__tab-label" for="msaa_none">None</label>
|
||||
<input type="radio" name="antialiasing" data-checked="msaa_option" value="MSAA2X" id="msaa_2x" style="nav-down:#rr_manual"/>
|
||||
<label for="msaa_2x">2x</label>
|
||||
<label class="config-option__tab-label" for="msaa_2x">2x</label>
|
||||
<input type="radio" name="antialiasing" data-checked="msaa_option" value="MSAA4X" id="msaa_4x" style="nav-down:#rr_manual"/>
|
||||
<label for="msaa_4x">4x</label>
|
||||
<label class="config-option__tab-label" for="msaa_4x">4x</label>
|
||||
<input type="radio" name="antialiasing" data-checked="msaa_option" value="MSAA8X" id="msaa_8x" style="nav-right:none;nav-down:#rr_manual"/>
|
||||
<label for="msaa_8x">8x</label>
|
||||
<label class="config-option__tab-label" for="msaa_8x">8x</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="option_row">
|
||||
<div class="option">
|
||||
<label class="option_title">Framerate</label><br/>
|
||||
<hr/>
|
||||
<div class="option_list">
|
||||
<div class="config-option">
|
||||
<label class="config-option__title">Framerate</label>
|
||||
<div class="config-option__list config-option__list">
|
||||
<input type="radio" name="refreshrate" data-checked="rr_option" value="Original" id="rr_original" style="nav-up:#ar_expand"/>
|
||||
<label for="rr_original">Original</label>
|
||||
<label class="config-option__tab-label" for="rr_original">Original</label>
|
||||
<input type="radio" name="refreshrate" data-checked="rr_option" value="Display" id="rr_display" style="nav-up:#ar_expand"/>
|
||||
<label for="rr_display">Display</label>
|
||||
<label class="config-option__tab-label" for="rr_display">Display</label>
|
||||
<input type="radio" name="refreshrate" data-checked="rr_option" value="Manual" id="rr_manual" style="nav-up:#msaa_none;nav-right:none"/>
|
||||
<label for="rr_manual">Manual</label>
|
||||
<label class="config-option__tab-label" for="rr_manual">Manual</label>
|
||||
</div>
|
||||
<div data-if="rr_option=='Manual'" class="option_list" style="padding:10dp">
|
||||
<input id="rr_manual_input" type="range" min="20" max="1000" style="flex:1;margin-left:30dp;margin-right:30dp;nav-up:auto;nav-down:auto;" data-value="rr_manual_value"/>
|
||||
<label style="flex:0 0 50dp">{{rr_manual_value}}</label>
|
||||
<div data-if="rr_option=='Manual'" class="config-option__list">
|
||||
<label class="config-option__range-label">{{rr_manual_value}}</label>
|
||||
<input id="rr_manual_input" type="range" min="20" max="360" style="flex:1;margin: 0dp;nav-up:auto;nav-down:auto;" data-value="rr_manual_value"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button nav-return="rr_manual" style="margin-top:10dp;margin-left:auto;margin-right:auto;width:100dp" data-attrif-disabled="!options_changed" onclick="apply_options">Apply</button>
|
||||
<button
|
||||
class="button"
|
||||
nav-return="rr_manual"
|
||||
data-attrif-disabled="!options_changed"
|
||||
onclick="apply_options"
|
||||
>
|
||||
<div>Apply</div>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</panel>
|
||||
<tab>Controls</tab>
|
||||
<tab class="tab">Controls</tab>
|
||||
<panel>
|
||||
</panel>
|
||||
<tab>Sound</tab>
|
||||
<tab class="tab">Sound</tab>
|
||||
<panel>
|
||||
</panel>
|
||||
</tabset>
|
||||
|
File diff suppressed because one or more lines are too long
@ -6,6 +6,7 @@
|
||||
"scripts": {
|
||||
"start": "sass --no-source-map --style=compressed main.scss ..\\recomp.rcss",
|
||||
"watch": "sass --no-source-map --style=compressed main.scss ..\\recomp.rcss --watch",
|
||||
"watch-debug": "sass --no-source-map main.scss ..\\recomp.rcss --watch",
|
||||
"lint": "stylelint '.\\**\\*.scss'"
|
||||
},
|
||||
"author": "",
|
||||
|
@ -1,2 +1,4 @@
|
||||
@import "./vars/colors";
|
||||
@import "./vars/transitions";
|
||||
@import "./mixins/typography";
|
||||
@import "./mixins/helpers";
|
||||
|
30
assets/scss/styles/components/Button.scss
Normal file
30
assets/scss/styles/components/Button.scss
Normal file
@ -0,0 +1,30 @@
|
||||
|
||||
.button {
|
||||
@extend %label-md;
|
||||
margin: auto;
|
||||
display: block;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 12dp;
|
||||
background-color: $color-primary-d;
|
||||
color: $color-text;
|
||||
border-radius: 8dp;
|
||||
|
||||
&:not([disabled]) {
|
||||
@extend %nav-all;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
color: $color-primary-l;
|
||||
}
|
||||
|
||||
&:disabled,&[disabled] {
|
||||
opacity: 0.5;
|
||||
background-color: $color-primary-d;
|
||||
color: $color-text-inactive;
|
||||
}
|
||||
|
||||
&:active {
|
||||
color: $color-error-l;
|
||||
}
|
||||
}
|
18
assets/scss/styles/components/CenteredPage.scss
Normal file
18
assets/scss/styles/components/CenteredPage.scss
Normal file
@ -0,0 +1,18 @@
|
||||
|
||||
$page-margin: 16;
|
||||
|
||||
.centered-page {
|
||||
@extend %nav-all;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
margin: #{$page-margin}dp auto;
|
||||
// 16:9
|
||||
// max-width: 1280dp;
|
||||
// 4:3
|
||||
max-width: #{960 - ($page-margin * 2)}dp;
|
||||
width: 100%;
|
||||
height: #{720 - ($page-margin * 2)}dp;
|
||||
background: $color-bg-shadow-2;
|
||||
border-radius: 16dp;
|
||||
}
|
122
assets/scss/styles/components/Config.scss
Normal file
122
assets/scss/styles/components/Config.scss
Normal file
@ -0,0 +1,122 @@
|
||||
|
||||
.config__form {
|
||||
display: flex;
|
||||
flex: 1 1 100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: $color-bg-shadow;
|
||||
}
|
||||
|
||||
.config__wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-radius: 0dp;
|
||||
flex: 1 1 100%;
|
||||
height: 100%;
|
||||
padding: 16dp;
|
||||
text-align: left;
|
||||
background: $color-bg-shadow;
|
||||
}
|
||||
|
||||
.config-option {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.config-option__title {
|
||||
@extend %label-md;
|
||||
padding: 16dp 12dp 0;
|
||||
}
|
||||
|
||||
.config-option__list {
|
||||
display: flex;
|
||||
padding: 0;
|
||||
flex-direction: row;
|
||||
// flex: 1 1 100%;
|
||||
// height: auto;
|
||||
width: 100%;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-start;
|
||||
// background-color: $color-error-d;
|
||||
|
||||
.config-option__tab-label {
|
||||
@extend %label-sm;
|
||||
display: block;
|
||||
padding: 8dp 0;
|
||||
margin: 0 12dp;
|
||||
margin-right: 16dp;
|
||||
color: $color-text-inactive;
|
||||
tab-index: none;
|
||||
transition: color $transition-quick;
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
input.radio {
|
||||
@extend %nav-all;
|
||||
visibility: hidden;
|
||||
width: 0;
|
||||
height: 0;
|
||||
|
||||
&:checked + .config-option__tab-label {
|
||||
border-bottom: 1dp;
|
||||
border-color: $color-border-hard;
|
||||
|
||||
&:hover {
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
|
||||
&:focus + .config-option__tab-label {
|
||||
color: $color-text;
|
||||
}
|
||||
}
|
||||
|
||||
input.range slidertrack {
|
||||
margin-top: 7dp;
|
||||
height: 2dp;
|
||||
background-color: $color-border;
|
||||
}
|
||||
|
||||
input.range sliderbar {
|
||||
margin-left: -8dp;
|
||||
margin-right: -6dp;
|
||||
width: 16dp;
|
||||
height: 16dp;
|
||||
background-color: $color-text-dim;
|
||||
border-radius: 8dp;
|
||||
transition: background-color $transition-quick;
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
background-color: $color-text;
|
||||
}
|
||||
}
|
||||
|
||||
input.range sliderbar:active,
|
||||
input.range slidertrack:active + sliderbar {
|
||||
background-color: $color-secondary;
|
||||
}
|
||||
|
||||
input.range sliderarrowdec,
|
||||
input.range sliderarrowinc {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.config-option__range-label {
|
||||
@extend %label-sm;
|
||||
flex: 0 0 16dp;
|
||||
|
||||
display: block;
|
||||
padding: 0;
|
||||
margin: 0 12dp;
|
||||
margin-right: 16dp;
|
||||
color: $color-text;
|
||||
tab-index: none;
|
||||
}
|
34
assets/scss/styles/components/Tabs.scss
Normal file
34
assets/scss/styles/components/Tabs.scss
Normal file
@ -0,0 +1,34 @@
|
||||
.tabs tabs {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.tab {
|
||||
@extend %nav-all;
|
||||
display: block;
|
||||
padding: 24dp 24dp;
|
||||
background-color: rgba(0,0,0,0);
|
||||
margin: 0;
|
||||
color: $color-text-inactive;
|
||||
transition: color $transition-quick;
|
||||
|
||||
&:selected {
|
||||
border-bottom: 2dp;
|
||||
border-color: $color-border-solid;
|
||||
color: $color-text;
|
||||
|
||||
&:hover {
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
color: $color-text;
|
||||
}
|
||||
}
|
4
assets/scss/styles/components/_components.scss
Normal file
4
assets/scss/styles/components/_components.scss
Normal file
@ -0,0 +1,4 @@
|
||||
@import "./CenteredPage";
|
||||
@import "./Tabs";
|
||||
@import "./Config";
|
||||
@import "./Button";
|
@ -1,5 +1,6 @@
|
||||
@import "./base";
|
||||
@import "./globals/old";
|
||||
@import "./components/components";
|
||||
|
||||
|
||||
$font-stack: chiaro;
|
||||
|
@ -21,45 +21,13 @@ body {
|
||||
focus:none;
|
||||
tab-index:none;
|
||||
} */
|
||||
form {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
div.option_container {
|
||||
display:flex;
|
||||
flex-direction: column;
|
||||
border-radius:0dp;
|
||||
width: 100%;
|
||||
height:auto;
|
||||
padding:16dp;
|
||||
text-align:left;
|
||||
background: $color-bg-shadow;
|
||||
}
|
||||
|
||||
div.option_row {
|
||||
display:flex;
|
||||
display: flex;
|
||||
gap: 2dp;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
div.option {
|
||||
flex:1;
|
||||
padding:4dp;
|
||||
text-align:center;
|
||||
}
|
||||
|
||||
div.option_list {
|
||||
padding:2dp;
|
||||
text-align:center;
|
||||
display:flex;
|
||||
justify-content:center;
|
||||
}
|
||||
|
||||
label.option_title {
|
||||
@extend %label-md;
|
||||
padding: 16dp 0dp;
|
||||
}
|
||||
|
||||
div#title_bar {
|
||||
z-index: 1;
|
||||
position: absolute;
|
||||
@ -94,9 +62,8 @@ div#window {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 10dp 15dp;
|
||||
background-color: #004164;
|
||||
border-color: red
|
||||
background-color: $color-background-2;
|
||||
border-color: $color-border;
|
||||
}
|
||||
|
||||
div#content {
|
||||
@ -130,70 +97,6 @@ input.submit {
|
||||
margin-left: 0
|
||||
}
|
||||
|
||||
button,
|
||||
input.submit {
|
||||
display: inline-block;
|
||||
/* width: 100dp;
|
||||
padding: 4dp; */
|
||||
text-align: center;
|
||||
/* tab-index: auto; */
|
||||
/* border-radius: 5dp; */
|
||||
background-color: rgb(120, 120, 120);
|
||||
/* vertical-align: center; */
|
||||
height: auto;
|
||||
width: 100%;
|
||||
focus:auto;
|
||||
tab-index:auto;
|
||||
nav-up:auto;
|
||||
nav-down:auto;
|
||||
nav-right:auto;
|
||||
nav-left:auto;
|
||||
}
|
||||
|
||||
button:focus,
|
||||
input.submit:focus {
|
||||
/* font-effect: blur(3dp #fff); */
|
||||
color: #329696;
|
||||
}
|
||||
|
||||
button:active,
|
||||
input.submit:active {
|
||||
background-color: rgb(100, 100, 100);
|
||||
}
|
||||
|
||||
input.submit:disabled {
|
||||
/* decorator: image(button); */
|
||||
image-color: #329696;
|
||||
cursor: unavailable
|
||||
}
|
||||
|
||||
button[disabled] {
|
||||
/* decorator: image(button); */
|
||||
/* image-color: #329696; */
|
||||
/* color:black; */
|
||||
color:rgb(100,100,100);
|
||||
background-color: rgb(50, 50, 50);
|
||||
/* focus:none;
|
||||
tab-index:none;
|
||||
nav-up:none;
|
||||
nav-down:none;
|
||||
nav-right:none;
|
||||
nav-left:none; */
|
||||
}
|
||||
|
||||
button:focus[disabled] {
|
||||
/* decorator: image(button); */
|
||||
/* image-color: #329696; */
|
||||
/* color:black; */
|
||||
color:#329696;
|
||||
background-color: rgb(50, 50, 50);
|
||||
/* focus:none;
|
||||
tab-index:none;
|
||||
nav-up:none;
|
||||
nav-down:none;
|
||||
nav-right:none;
|
||||
nav-left:none; */
|
||||
}
|
||||
|
||||
input.text,
|
||||
input.password {
|
||||
@ -336,90 +239,6 @@ input.checkbox {
|
||||
width:0dp;
|
||||
}
|
||||
|
||||
input.radio + label {
|
||||
/* background: rgb(120,120,120); */
|
||||
/* font-effect: outline(2dp black); */
|
||||
color: gray;
|
||||
/* flex: 1; */
|
||||
text-align:center;
|
||||
tab-index:none;
|
||||
focus:auto;
|
||||
margin-left:10dp;
|
||||
margin-right:10dp;
|
||||
/* display:none; */
|
||||
/* decorator: image(radio) */
|
||||
}
|
||||
|
||||
input.radio:checked + label {
|
||||
/* background: rgb(72, 102, 255); */
|
||||
color: white;
|
||||
border-bottom:1dp;
|
||||
/* decorator: image(radio-checked) */
|
||||
}
|
||||
|
||||
input.radio:focus + label {
|
||||
color:#329696;
|
||||
/* background: rgb(150,150,150); */
|
||||
}
|
||||
|
||||
tabset {
|
||||
display: block;
|
||||
position: relative;
|
||||
margin: 0 auto;
|
||||
max-width: 1280dp;
|
||||
focus:auto;
|
||||
nav-up:auto;
|
||||
nav-down:auto;
|
||||
nav-right:auto;
|
||||
nav-left:auto;
|
||||
}
|
||||
|
||||
tabset tabs {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
tabset panel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
tab {
|
||||
display: block;
|
||||
padding: 24dp 16dp;
|
||||
background-color: rgba(0,0,0,0);
|
||||
margin: 0;
|
||||
tab-index:auto;
|
||||
focus:auto;
|
||||
nav-up:auto;
|
||||
nav-down:auto;
|
||||
nav-right:auto;
|
||||
nav-left:auto;
|
||||
}
|
||||
|
||||
tab:selected {
|
||||
background-color: $color-border-soft;
|
||||
border-bottom: 2dp;
|
||||
border-color: $color-border-solid;
|
||||
|
||||
&:hover {
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
|
||||
tab:focus {
|
||||
color:#329696;
|
||||
}
|
||||
|
||||
tab:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* input.radio:checked:hover + label {
|
||||
background: rgb(150,150,150);
|
||||
} */
|
||||
@ -452,71 +271,6 @@ input.checkbox:checked:active {
|
||||
decorator: image(checkbox-checked-active)
|
||||
} */
|
||||
|
||||
input.range slidertrack {
|
||||
margin-top: 7dp;
|
||||
height: 6dp;
|
||||
image-color: #ecc;
|
||||
/* decorator: ninepatch(range-track, range-track-inner, 1) */
|
||||
background-color:white;
|
||||
border-width:1dp;
|
||||
border-color:black;
|
||||
}
|
||||
|
||||
input.range sliderbar {
|
||||
margin-left: -8dp;
|
||||
margin-right: -8dp;
|
||||
/* margin-top: -3dp; */
|
||||
width: 20dp;
|
||||
height: 20dp;
|
||||
background-color:white;
|
||||
border-color:black;
|
||||
border-width:3dp;
|
||||
border-radius:10dp;
|
||||
/* decorator: image(range-bar) */
|
||||
}
|
||||
|
||||
input.range sliderbar:hover,
|
||||
input.range slidertrack:hover+sliderbar {
|
||||
image-color: #cc0
|
||||
}
|
||||
|
||||
input.range sliderbar:active,
|
||||
input.range sliderbar:focus {
|
||||
background-color:#329696;
|
||||
}
|
||||
|
||||
input.range sliderarrowdec,
|
||||
input.range sliderarrowinc {
|
||||
/* width: 17dp;
|
||||
height: 17dp;
|
||||
margin-top: 6dp; */
|
||||
display:none;
|
||||
}
|
||||
|
||||
/* input.range sliderarrowdec {
|
||||
decorator: image(range-dec)
|
||||
}
|
||||
|
||||
input.range sliderarrowinc {
|
||||
decorator: image(range-inc)
|
||||
}
|
||||
|
||||
input.range sliderarrowdec:hover {
|
||||
decorator: image(range-dec-hover)
|
||||
}
|
||||
|
||||
input.range sliderarrowinc:hover {
|
||||
decorator: image(range-inc-hover)
|
||||
}
|
||||
|
||||
input.range sliderarrowdec:active {
|
||||
decorator: image(range-dec-active)
|
||||
}
|
||||
|
||||
input.range sliderarrowinc:active {
|
||||
decorator: image(range-inc-active)
|
||||
} */
|
||||
|
||||
thead tr {
|
||||
height: 35dp;
|
||||
/* decorator: tiled-horizontal(tableheader-l, tableheader-c, tableheader-r) */
|
||||
|
17
assets/scss/styles/mixins/_helpers.scss
Normal file
17
assets/scss/styles/mixins/_helpers.scss
Normal file
@ -0,0 +1,17 @@
|
||||
|
||||
%nav-dir {
|
||||
nav-up: auto;
|
||||
nav-down: auto;
|
||||
nav-right: auto;
|
||||
nav-left: auto;
|
||||
}
|
||||
|
||||
%nav-foc {
|
||||
focus: auto;
|
||||
tab-index: auto;
|
||||
}
|
||||
|
||||
%nav-all {
|
||||
@extend %nav-dir;
|
||||
@extend %nav-foc;
|
||||
}
|
2
assets/scss/styles/vars/_transitions.scss
Normal file
2
assets/scss/styles/vars/_transitions.scss
Normal file
@ -0,0 +1,2 @@
|
||||
// see: lib/RmlUi/Source/Core/PropertyParserAnimation.cpp
|
||||
$transition-quick: 0.033s linear-in-out;
|
Loading…
Reference in New Issue
Block a user