parsley/app/javascript/styles/_responsive_controls.scss
2024-09-29 09:44:40 -05:00

97 lines
1.8 KiB
SCSS

@use "bulma/sass/utilities" as bulma;
@use "bulma/sass/utilities/controls";
@use "bulma/sass/utilities/mixins";
@mixin responsive-label-size($size) {
&.is-small-#{$size} {
font-size: bulma.$size-small;
}
&.is-medium-#{$size} {
font-size: bulma.$size-medium;
}
&.is-large-#{$size} {
font-size: bulma.$size-large;
}
}
@mixin responsive-control-size($size) {
&.is-small-#{$size} {
@include controls.control-small;
}
&.is-medium-#{$size} {
@include controls.control-medium;
}
&.is-large-#{$size} {
@include controls.control-large;
}
}
.button {
@include mixins.mobile {
@include responsive-control-size("mobile");
}
@include mixins.tablet {
@include responsive-control-size("tablet");
}
@include mixins.desktop {
@include responsive-control-size("desktop");
}
@include mixins.widescreen {
@include responsive-control-size("widescreen");
}
@include mixins.fullhd {
@include responsive-control-size("fullhd");
}
}
.label {
@include mixins.mobile {
@include responsive-label-size("mobile");
}
@include mixins.tablet {
@include responsive-label-size("tablet");
}
@include mixins.desktop {
@include responsive-label-size("desktop");
}
@include mixins.widescreen {
@include responsive-label-size("widescreen");
}
@include mixins.fullhd {
@include responsive-label-size("fullhd");
}
}
.input, .textarea {
@include mixins.mobile {
@include responsive-control-size("mobile");
}
@include mixins.tablet {
@include responsive-control-size("tablet");
}
@include mixins.desktop {
@include responsive-control-size("desktop");
}
@include mixins.widescreen {
@include responsive-control-size("widescreen");
}
@include mixins.fullhd {
@include responsive-control-size("fullhd");
}
}