form.styl

form.styl

.form
  display: flex
  min-width: 300px
  width: 100%
  flex-wrap: wrap
  flex-flow: row wrap
  .field
    padding: 5px
    width: 100%
    &.half
      max-width: 50%
    &.one-quarter
      max-width: 25%
    &.two-quarters // is half, I know
      max-width: 50%
    &.three-quarters
      max-width: 75%
    &.one-fifth
      max-width: 20%
    &.two-fifths
      max-width: 40%
    &.three-fifths
      max-width: 60%
    &.four-fifths
      max-width: 80%
  .debug
    background: #e0e0e0
    padding: 10px
    margin: 10px 0
    border-radius: 2px
  .label
    font-size: 14px;
    padding: 2px 0 4px 0;
    display: block
    color: #757575
    margin: 0 0 5px 0

  .fill
    .textfield, textarea
      width: 100%

@media (max-width: 768px)
  .form
    .field
      &.half
        max-width: 100%
      &.one-quarter
        max-width: 100%
      &.two-quarters
        max-width: 100%
      &.three-quarters
        max-width: 100%
      &.one-fifth
        max-width: 100%
      &.two-fifths
        max-width: 100%
      &.three-fifths
        max-width: 100%
      &.four-fifths
        max-width: 100%

form.vue

<template>
  <div class="form fill">
    <div class="field  one-quarter">
      <label class="title">Label</label>
      <label>
        <q-radio v-model="option" val="opt1"></q-radio>
        Option 1
      </label>
      <label>
        <q-radio v-model="option" val="opt2"></q-radio>
        Option 2
      </label>
    </div>
    <div class="field one-quarter">
      <label class="title">Label</label>
      <label>
        <q-checkbox v-model="checked"></q-checkbox>
        Checkbox Label
      </label>
    </div>
    <div class="field half">
      <label class="title">Label</label>
      <q-chips v-model="chips" placeholder="Type some names"></q-chips>
    </div>
    <div class="field two-fifths">
      <div class="floating-label">
        <textarea required></textarea>
        <label>Floating Label</label>
      </div>
    </div>
    <div class="field half">
      <label class="title">Label</label>
      <q-dialog-select type="checkbox" v-model="select" :options="selectOptions" ok-label="Pick" cancel-label="Neah"
                       title="Checkboxes"></q-dialog-select>
    </div>
    <div class="field half">
      <div class="floating-label">
        <input required class="full-width">
        <label>Floating Label</label>
      </div>
    </div>
    <div class="field half">
      <label class="title">Label</label>
      <q-datetime v-model="date" type="date"></q-datetime>
    </div>
  </div>
</template>


<script type="text/javascript">
  import Common from 'components/common';

  // noinspection ReservedWordAsName
  export default {
    extends: Common,
    name: 'widget-remember',
    data () {
      return {
        option: '',
        checked: false,
        chips: ['Joe'],
        username: '',
        date: '',
        select: [],
        selectOptions: [
          {
            label: 'Google',
            value: 'goog'
          },
          {
            label: 'Facebook',
            value: 'fb'
          },
          {
            label: 'Twitter',
            value: 'twtr'
          },
          {
            label: 'Apple Inc.',
            value: 'appl'
          },
          {
            label: 'Oracle',
            value: 'ora'
          }
        ]
      };
    },
    computed: {},
    mounted () {
    },
    methods: {}
  };
</script>

<style lang="stylus" rel="stylesheet/stylus">
  .form .field
    border: 1px dotted #cacaca
</style>