iErik

// Media queries helpers
$breakpoints: (
  mobile:  0px,
  tablet:  1024px,
  desktop: 1280px
);

@mixin xs-mobile {
  @media only screen and (max-width: #{map-get($breakpoints, mobile) - 1px}) { @content; }
}

iErik

<template>
  <c-input-container v-bind="$attrs" class="c-radio-button">
    <div class="inner" :style="rows">
      <div
        class="option"
        v-for="(option, index) in options"
        :key="index"
        @click="$emit('input', option)"
       >
        <div class="borderline">

iErik

<template>
  <form class="c-form" name="formData" @submit.prevent="submitForm">
    <div class="fields">
      <slot>
        <template v-for="(field, fieldName) in fields">
          <c-radio-button
            v-if="['radio', 'check'].includes(field.type)"
            class="radio field"
            :key="fieldName"
            :name="fieldName"

iErik

<template>
  <div
    ref="tabberEl"
    :class="['c-tabber', { '-full-width': fullWidth, '-alternative': alternative }]"
    @mousedown="!noSwipe && bindScroll($event)"
  >

    <div
      ref="wrapperEl"
      :class="[ 'wrapper', { '-resizable': resizable } ]"

iErik

<template>
  <c-card class="employee-info-card" no-border no-hover>
    <div class="heading">
      <slot>
        <c-title class="title" :grey="isMobile && hideContents">
          {{ title }}
        </c-title>

        <div class="actions">
          <c-button

iErik

<template>
  <c-input-container v-bind="$attrs" class="c-radio-button">
    <p v-if="description" class="text">{{  description }}</p>
    <div class="inner" :style="rows">
      <div
        class="option"
        v-for="(option, index) in options"
        :key="index"
        @click="emitInput"
       >

iErik

<template>
  <form class="c-form" :name="name" @submit.prevent="submitForm">
    <div class="fields">
      <slot>
        <template v-for="(field, fieldName) in fields">
          <component
            v-show="!isFieldHidden(fieldName)"
            :is="getFieldComponent(field.type)"
            :key="fieldName"
            :class="['field', field.type]"

iErik

<template>
  <div class="employee-info-timeline">
    <div ref="shadowed" class="wrapper">
      <info-timeline-item
        v-for="(item, index) in timelineItems"
        :key="index"
        :fields="item.fields"
        :item-info="item.itemInfo"
        v-on="$listeners"
      />

iErik

<template>
  <div class="employee-info-timeline">
    <div ref="shadowed" class="wrapper">
      <info-timeline-item
        v-for="(item, index) in timelineItems"
        :key="index"
        :fields="item.fields"
        :item-info="item.itemInfo"
        v-on="$listeners"
      />

iErik

const Collapsible = (refName = 'contentWrapper') => ({
  data: () => ({
    hideContents: false,
    contentObs: null,
    contentHeight: 0,
  }),

  mounted () {
    this.$nextTick(() => {
      const el = this.$refs[refName].childNodes[0]