_responsive.less 1.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566
  1. // /**
  2. // * Copyright © Magento, Inc. All rights reserved.
  3. // * See COPYING.txt for license details.
  4. // */
  5. //
  6. // Media variables, that can be used for splitting styles into several files
  7. // _____________________________________________
  8. // Sets whether to output common styles (true|false)
  9. @media-common: true;
  10. // Sets target device for styles output ('all' | 'desktop' | 'mobile')
  11. @media-target: 'all';
  12. //
  13. // Media width mixin used to group styles output based on media queries
  14. // _____________________________________________
  15. .media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__s) {
  16. }
  17. //
  18. // Style groups for 'mobile' devices
  19. // _____________________________________________
  20. & when (@media-target = 'desktop'),
  21. (@media-target = 'all') {
  22. @media all and (max-width: (@screen__l - 1)) {
  23. .media-width('max', @screen__l);
  24. }
  25. @media all and (min-width: @screen__m) {
  26. .media-width('min', @screen__m);
  27. }
  28. @media all and (min-width: @screen__l) {
  29. .media-width('min', @screen__l);
  30. }
  31. @media all and (min-width: @screen__xl) {
  32. .media-width('min', @screen__xl);
  33. }
  34. }
  35. //
  36. // Style groups for 'desktop' devices
  37. // _____________________________________________
  38. & when (@media-target = 'mobile'),
  39. (@media-target = 'all') {
  40. @media all and (min-width: @screen__s) {
  41. .media-width('min', @screen__s);
  42. }
  43. @media all and (max-width: (@screen__m - 1)) {
  44. .media-width('max', @screen__m);
  45. }
  46. @media all and (max-width: (@screen__s - 1)) {
  47. .media-width('max', @screen__s);
  48. }
  49. @media all and (max-width: (@screen__xs - 1)) {
  50. .media-width('max', @screen__xs);
  51. }
  52. }