mirror of
https://github.com/Lissy93/dashy.git
synced 2025-07-23 05:35:07 +02:00
📱 Responsive mobile-support for form elements
This commit is contained in:
parent
e6bb509e57
commit
6f0ee82821
@ -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>
|
||||||
|
@ -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 {
|
||||||
|
Loading…
x
Reference in New Issue
Block a user