qdouze2-wordpress-theme/scss/mixins/_responsive.scss

84 lines
1.1 KiB
SCSS

// MIXINS RESPONSIVES
// Small devices
@mixin sm {
@media (min-width: #{$screen-sm-min}) {
@content;
}
}
// Medium devices
@mixin md {
@media (min-width: #{$screen-md-min}) {
@content;
}
}
// Large devices
@mixin lg {
@media (min-width: #{$screen-lg-min}) {
@content;
}
}
// Extra large devices
@mixin xl {
@media (min-width: #{$screen-xl-min}) {
@content;
}
}
// Extra large desktops
@mixin xxl {
@media (min-width: #{$screen-xxl-min}) {
@content;
}
}
// Custom devices
@mixin rwd($screen) {
@media (min-width: $screen+'px' ) {
@content;
}
}
@mixin container($size, $padding) {
padding-left: $padding;
padding-right: $padding;
max-width: $size;
margin:auto;
}
@mixin responsive() {
@content;
&-sm {
@include sm() {
@content;
}
}
&-md {
@include md() {
@content;
}
}
&-lg {
@include lg() {
@content;
}
}
&-xl {
@include xl() {
@content;
}
}
&-xxl {
@include xxl() {
@content;
}
}
}