parsley/app/javascript/styles/_responsive_controls.scss

@mixin responsive-button-size($size) {
  &.is-small-#{$size} {
    @include button-small;
  }

  &.is-medium-#{$size} {
    @include button-medium;
  }

  &.is-large-#{$size} {
    @include button-large;
  }
}

@mixin responsive-label-size($size) {
  &.is-small-#{$size} {
    font-size: $size-small;
  }

  &.is-medium-#{$size} {
    font-size: $size-medium;
  }

  &.is-large-#{$size} {
    font-size: $size-large;
  }
}

@mixin responsive-control-size($size) {
  &.is-small-#{$size} {
    @include control-small;
  }

  &.is-medium-#{$size} {
    @include control-medium;
  }

  &.is-large-#{$size} {
    @include control-large;
  }
}

.button {
  @include mobile {
    @include responsive-button-size("mobile");
  }

  @include tablet {
    @include responsive-button-size("tablet");
  }

  @include desktop {
    @include responsive-button-size("desktop");
  }

  @include widescreen {
    @include responsive-button-size("widescreen");
  }

  @include fullhd {
    @include responsive-button-size("fullhd");
  }
}

.label {
  @include mobile {
    @include responsive-label-size("mobile");
  }

  @include tablet {
    @include responsive-label-size("tablet");
  }

  @include desktop {
    @include responsive-label-size("desktop");
  }

  @include widescreen {
    @include responsive-label-size("widescreen");
  }

  @include fullhd {
    @include responsive-label-size("fullhd");
  }
}

.input, .textarea {
  @include mobile {
    @include responsive-control-size("mobile");
  }

  @include tablet {
    @include responsive-control-size("tablet");
  }

  @include desktop {
    @include responsive-control-size("desktop");
  }

  @include widescreen {
    @include responsive-control-size("widescreen");
  }

  @include fullhd {
    @include responsive-control-size("fullhd");
  }
}