1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192 |
- // media aliases and breakpoints
- $screen-sm-min: 600px;
- $screen-md-min: 960px;
- $screen-lg-min: 1280px;
- $screen-xl-min: 1920px;
- $screen-xs-max: 599px;
- $screen-sm-max: 959px;
- $screen-md-max: 1279px;
- $screen-lg-max: 1919px;
- $screen-xl-max: 5000px;
- // media devices
- @mixin xs {
- @media screen and (max-width: #{$screen-xs-max}) {
- @content;
- }
- }
- @mixin sm {
- @media screen and (min-width: #{$screen-sm-min}) and (max-width: #{$screen-sm-max}) {
- @content;
- }
- }
- @mixin md {
- @media screen and (min-width: #{$screen-md-min}) and (max-width: #{$screen-md-max}) {
- @content;
- }
- }
- @mixin lg {
- @media screen and (min-width: #{$screen-lg-min}) and (max-width: #{$screen-lg-max}) {
- @content;
- }
- }
- @mixin xl {
- @media screen and (min-width: #{$screen-xl-min}) and (max-width: #{$screen-xl-max}) {
- @content;
- }
- }
- // media lt queries
- @mixin lt-sm {
- @media screen and (max-width: #{$screen-xs-max}) {
- @content;
- }
- }
- @mixin lt-md {
- @media screen and (max-width: #{$screen-sm-max}) {
- @content;
- }
- }
- @mixin lt-lg {
- @media screen and (max-width: #{$screen-md-max}) {
- @content;
- }
- }
- @mixin lt-xl {
- @media screen and (max-width: #{$screen-lg-max}) {
- @content;
- }
- }
- // media gt queries
- @mixin gt-xs {
- @media screen and (min-width: #{$screen-sm-min}) {
- @content;
- }
- }
- @mixin gt-sm {
- @media screen and (min-width: #{$screen-md-min}) {
- @content;
- }
- }
- @mixin gt-md {
- @media screen and (min-width: #{$screen-lg-min}) {
- @content;
- }
- }
- @mixin gt-lg {
- @media screen and (min-width: #{$screen-xl-min}) {
- @content;
- }
- }
|