_responsive.scss 1.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112
  1. // Responsive
  2. // small mobile
  3. $screen-xs-min: 371px;
  4. // mobile
  5. $screen-sm-min: 576px;
  6. // tablets (portrait view)
  7. $screen-md-min: 768px;
  8. // small desktops
  9. $screen-lg-min: 992px;
  10. // tablets (Landscap view)
  11. $screen-tl-min: 1024px;
  12. // Large desktops
  13. $screen-xl-min: 1200px;
  14. // Large desktops
  15. $screen-xxl-min: 1440px;
  16. // Large desktops
  17. $screen-xxxl-min: 1599px;
  18. // max-width 370
  19. @mixin screen-small {
  20. @media (max-width: #{$screen-xs-min - 1px}) {
  21. @content;
  22. }
  23. }
  24. // max-width 575
  25. @mixin screen-xs {
  26. @media (max-width: #{$screen-sm-min - 1px}) {
  27. @content;
  28. }
  29. }
  30. // min-width 576
  31. @mixin screen-sm {
  32. @media (min-width: #{$screen-sm-min}) {
  33. @content;
  34. }
  35. }
  36. // max-width 767
  37. @mixin screen-sm-max {
  38. @media (max-width: #{$screen-md-min - 1px}) {
  39. @content;
  40. }
  41. }
  42. // min-width 768
  43. @mixin screen-md {
  44. @media (min-width: #{$screen-md-min}) {
  45. @content;
  46. }
  47. }
  48. // max-width 991
  49. @mixin screen-md-max {
  50. @media (max-width: #{$screen-lg-min - 1px}) {
  51. @content;
  52. }
  53. }
  54. // min-width 992
  55. @mixin screen-lg {
  56. @media (min-width: #{$screen-lg-min}) {
  57. @content;
  58. }
  59. }
  60. // max-width 1024
  61. @mixin screen-tl {
  62. @media (max-width: #{$screen-tl-min}) {
  63. @content;
  64. }
  65. }
  66. // max-width 1199
  67. @mixin screen-lg-max {
  68. @media (max-width: #{$screen-xl-min - 1px}) {
  69. @content;
  70. }
  71. }
  72. // Extra large devices (min-width 1200)
  73. @mixin screen-xl {
  74. @media (min-width: #{$screen-xl-min}) {
  75. @content;
  76. }
  77. }
  78. // Extra large devices (min-width 1400)
  79. @mixin screen-xxl {
  80. @media (min-width: #{$screen-xxl-min}) {
  81. @content;
  82. }
  83. }
  84. // Extra large devices (min-width 1599)
  85. @mixin screen-xxxl {
  86. @media (min-width: #{$screen-xxxl-min}) {
  87. @content;
  88. }
  89. }