KevinMidboe/seasoned
1
0
Fork 0
Code Issues 12 Pull Requests 1 Packages Projects Releases 1 Wiki Activity

Some style tweaks to toggle input. Also added a v-key to children

Browse Source
This commit is contained in:
Kevin
2022-03-04 18:25:38 +01:00
parent b9f39e690d
commit d49285f1e2
1 changed files with 4 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/ui/ToggleButton.vue
View File

@@ -2,6 +2,7 @@
<div class="toggle-container"> <div class="toggle-container">
<button <button
v-for="option in options" v-for="option in options"
:key="option"
class="toggle-button" class="toggle-button"
@click="toggle(option)" @click="toggle(option)"
:class="toggleValue === option ? 'selected' : null" :class="toggleValue === option ? 'selected' : null"
@@ -51,8 +52,8 @@ $background-selected: $background-color-secondary;
.toggle-container { .toggle-container {
width: 100%; width: 100%;
max-width: 15rem;
display: flex; display: flex;
overflow-x: scroll;
flex-direction: row; flex-direction: row;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
@@ -72,6 +73,8 @@ $background-selected: $background-color-secondary;
background-color: $background; background-color: $background;
text-transform: capitalize; text-transform: capitalize;
cursor: pointer; cursor: pointer;
display: block;
flex: 1 0 auto;
&.selected { &.selected {
color: $text-color; color: $text-color;