_responsive-logic.scss 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118
  1. /**
  2. * Repsonsive Styles
  3. */
  4. @import '../abstracts/mixins';
  5. /**
  6. * Root Media Query Variables
  7. */
  8. :root {
  9. --responsive--spacing-horizontal: calc(2 * var(--global--spacing-horizontal));
  10. --responsive--aligndefault-width: calc(100vw - var(--responsive--spacing-horizontal));
  11. --responsive--alignwide-width: calc(100vw - var(--responsive--spacing-horizontal));
  12. --responsive--alignfull-width: 100%;
  13. --responsive--alignwide-width-multiplier: calc(16 * var(--global--spacing-horizontal));
  14. --responsive--alignright-margin: var(--global--spacing-horizontal);
  15. --responsive--alignleft-margin: var(--global--spacing-horizontal);
  16. }
  17. @include media(mobile) {
  18. :root {
  19. --responsive--alignright-margin: calc( 0.5 * (100vw - var(--responsive--aligndefault-width)));
  20. --responsive--alignleft-margin: calc( 0.5 * (100vw - var(--responsive--aligndefault-width)));
  21. }
  22. }
  23. @include media(laptop) {
  24. :root {
  25. --responsive--aligndefault-width: min(calc(100vw - 2 * var(--global--spacing-horizontal)), #{$default_width});
  26. --responsive--alignwide-width: min(calc(100vw - 2 * var(--global--spacing-horizontal)), #{$alignwide_width});
  27. }
  28. }
  29. /**
  30. * Extends
  31. */
  32. %responsive-aligndefault-width {
  33. max-width: var(--responsive--aligndefault-width);
  34. margin-left: auto;
  35. margin-right: auto;
  36. }
  37. %responsive-alignwide-width {
  38. max-width: var(--responsive--alignwide-width);
  39. margin-left: auto;
  40. margin-right: auto;
  41. }
  42. @include media(mobile) {
  43. %responsive-alignfull-width {
  44. max-width: var(--responsive--alignfull-width);
  45. width: auto;
  46. margin-left: auto;
  47. margin-right: auto;
  48. }
  49. }
  50. %responsive-alignwide-width-nested {
  51. margin-left: auto;
  52. margin-right: auto;
  53. width: var(--responsive--alignwide-width);
  54. max-width: var(--responsive--alignfull-width);
  55. }
  56. %responsive-alignfull-width-nested {
  57. margin-left: auto;
  58. margin-right: auto;
  59. width: calc(var(--responsive--alignfull-width) - calc(2 * var(--responsive--spacing-horizontal)));
  60. max-width: var(--responsive--alignfull-width);
  61. }
  62. %responsive-alignleft-mobile {
  63. /*rtl:ignore*/
  64. margin-left: 0;
  65. /*rtl:ignore*/
  66. margin-right: var(--responsive--spacing-horizontal);
  67. }
  68. @include media(mobile) {
  69. %responsive-alignleft {
  70. /*rtl:ignore*/
  71. margin-left: var(--responsive--alignleft-margin);
  72. /*rtl:ignore*/
  73. margin-right: var(--global--spacing-horizontal);
  74. }
  75. }
  76. %responsive-alignright-mobile {
  77. /*rtl:ignore*/
  78. margin-left: var(--responsive--spacing-horizontal);
  79. /*rtl:ignore*/
  80. margin-right: 0;
  81. }
  82. @include media(mobile) {
  83. %responsive-alignright {
  84. /*rtl:ignore*/
  85. margin-left: var(--global--spacing-horizontal);
  86. /*rtl:ignore*/
  87. margin-right: var(--responsive--alignright-margin);
  88. }
  89. }
  90. /**
  91. * Output
  92. */
  93. .default-max-width {
  94. @extend %responsive-aligndefault-width;
  95. }
  96. .wide-max-width {
  97. @extend %responsive-alignwide-width;
  98. }
  99. .full-max-width {
  100. @extend %responsive-alignfull-width;
  101. }