tyler.durden/dashy
1
0
Fork 0
mirror of https://github.com/Lissy93/dashy.git synced 2025-07-26 15:14:22 +02:00
Code Issues Packages Projects Releases Wiki Activity

📱 Responsive mobile-support for form elements

Browse Source
This commit is contained in:
Alicia Sykes 2021-10-18 21:57:28 +01:00
parent e6bb509e57
commit 6f0ee82821
2 changed files with 36 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
src/components/FormElements/Input.vue
View File

@ -54,6 +54,8 @@ export default {
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
@import '@/styles/media-queries.scss';
div.input-container { div.input-container {
margin: 0.25rem auto; margin: 0.25rem auto;
display: flex; display: flex;
@ -62,18 +64,20 @@ div.input-container {
flex-direction: column; flex-direction: column;
} }
&.horizontal { &.horizontal {
flex-direction: row; @include tablet-up {
justify-content: space-between; flex-direction: row;
align-items: center; justify-content: space-between;
label.input-label, align-items: center;
input.input-field, label.input-label,
p.input-description { input.input-field,
margin: 0.25rem; p.input-description {
flex-basis: 8rem; margin: 0.25rem;
flex-grow: 1; flex-basis: 8rem;
flex-grow: 1;
}
input.input-field { flex-grow: 2; }
p.input-description { flex-grow: 3; }
} }
input.input-field { flex-grow: 2; }
p.input-description { flex-grow: 3; }
} }
input.input-field { input.input-field {
@ -99,6 +103,14 @@ div.input-container {
p.input-description { p.input-description {
opacity: var(--dimming-factor); opacity: var(--dimming-factor);
} }
@include tablet-down {
flex-direction: column;
align-items: start;
input.input-field {
margin: 0.5rem;
}
}
} }
</style> </style>

13
src/components/FormElements/Select.vue
View File

@ -43,6 +43,8 @@ export default {
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
@import '@/styles/media-queries.scss';
div.select-container { div.select-container {
margin: 0.25rem auto; margin: 0.25rem auto;
display: flex; display: flex;
@ -78,11 +80,22 @@ div.select-container {
outline: none; outline: none;
} }
} }
@include tablet-down {
flex-direction: column;
align-items: start;
label.select-label,
.form-dropdown,
p.select-description {
margin: 0.5rem;
flex-basis: auto;
}
}
} }
</style> </style>
<style lang="scss"> <style lang="scss">
@import '@/styles/style-helpers.scss'; @import '@/styles/style-helpers.scss';
.form-dropdown { .form-dropdown {
margin: 1rem auto; margin: 1rem auto;
ul.vs__dropdown-menu { ul.vs__dropdown-menu {