custom checkboxes

This commit is contained in:
2023-10-31 03:17:24 +01:00
parent 94bfba2c49
commit f0ddd0e27f
2 changed files with 46 additions and 12 deletions
+40 -6
View File
@@ -80,19 +80,15 @@
</div>
<div class="stock_spawn-settings">
<label v-if="store.stockSupportsColdStart">
<label v-if="store.stockSupportsColdStart" :data-checked="store.isColdStart">
<input type="checkbox" v-model="store.isColdStart" />
{{ $t('stocklist.coldstart-info') }}
</label>
<label v-if="store.stockSupportsDoubleManning">
<label v-if="store.stockSupportsDoubleManning" :data-checked="store.isDoubleManned">
<input type="checkbox" v-model="store.isDoubleManned" />
{{ $t('stocklist.doublemanning-info') }}
</label>
<!-- <label v-if="store.stockList.length > 0 && locoSupportsDoubleManning(store.stockList[0].constructionType)">
<input type="checkbox" v-model="store.isDoubleManned" />
{{ $t('stocklist.coldstart-info') }}
</label> -->
</div>
<div class="stock_warnings" v-if="stockHasWarnings">
@@ -485,6 +481,44 @@ export default defineComponent({
}
}
.stock_spawn-settings {
display: flex;
gap: 0.5em;
label > input {
position: absolute;
clip: rect(1px, 1px, 1px, 1px);
padding: 0;
border: 0;
height: 1px;
width: 1px;
overflow: hidden;
}
label {
padding: 0.25em 0.5em;
border-radius: 0.25em;
background-color: #222;
color: #aaa;
cursor: pointer;
text-transform: uppercase;
transition: color 200ms;
&::before {
content: '\2716';
}
}
label[data-checked='true'] {
color: palegreen;
&::before {
content: '\2714';
}
}
}
.real-stock-info {
img {
height: 1.3ch;
+6 -6
View File
@@ -9,8 +9,8 @@ $accentColor: #e4c428;
@font-face {
font-family: 'Lato';
src:
url('$fonts/Lato-Light.woff2') format('woff2'),
url('$fonts/Lato-Light.woff') format('woff');
url('/fonts/Lato-Light.woff2') format('woff2'),
url('/fonts/Lato-Light.woff') format('woff');
font-weight: 300;
font-style: normal;
font-display: swap;
@@ -19,8 +19,8 @@ $accentColor: #e4c428;
@font-face {
font-family: 'Lato';
src:
url('$fonts/Lato-Bold.woff2') format('woff2'),
url('$fonts/Lato-Bold.woff') format('woff');
url('/fonts/Lato-Bold.woff2') format('woff2'),
url('/fonts/Lato-Bold.woff') format('woff');
font-weight: bold;
font-style: normal;
font-display: swap;
@@ -29,8 +29,8 @@ $accentColor: #e4c428;
@font-face {
font-family: 'Lato';
src:
url('$fonts/Lato-Regular.woff2') format('woff2'),
url('$fonts/Lato-Regular.woff') format('woff');
url('/fonts/Lato-Regular.woff2') format('woff2'),
url('/fonts/Lato-Regular.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap;