breakpoints.scss (4666B)
1 /** 2 * Responsive Styles 3 */ 4 5 /** 6 * Required Variables 7 */ 8 9 $default_width: 610px; 10 $max_content_width: 1240px; 11 $breakpoint_sm: 482px; 12 $breakpoint_md: 592px; 13 $breakpoint_lg: 652px; 14 $breakpoint_xl: 822px; 15 $breakpoint_xxl: 1024px; 16 17 // Responsive breakpoints mixin 18 @mixin media( $res ) { 19 20 @if mobile-only == $res { 21 @media only screen and (max-width: #{$breakpoint_sm - 1}) { 22 @content; 23 } 24 } 25 26 @if mobile == $res { 27 @media only screen and (min-width: #{$breakpoint_sm}) { 28 @content; 29 } 30 } 31 32 @if tablet-only == $res { 33 @media only screen and (max-width: #{$breakpoint_md - 1}) { 34 @content; 35 } 36 } 37 38 @if tablet == $res { 39 @media only screen and (min-width: #{$breakpoint_md}) { 40 @content; 41 } 42 } 43 44 @if laptop-only == $res { 45 @media only screen and (max-width: #{$breakpoint_lg - 1}) { 46 @content; 47 } 48 } 49 50 @if laptop == $res { 51 @media only screen and (min-width: #{$breakpoint_lg}) { 52 @content; 53 } 54 } 55 56 @if desktop-only == $res { 57 @media only screen and (max-width: #{$breakpoint_xl - 1}) { 58 @content; 59 } 60 } 61 62 @if desktop == $res { 63 @media only screen and (min-width: #{$breakpoint_xl}) { 64 @content; 65 } 66 } 67 68 @if wide-only == $res { 69 @media only screen and (max-width: #{$breakpoint_xxl - 1}) { 70 @content; 71 } 72 } 73 74 @if wide == $res { 75 @media only screen and (min-width: #{$breakpoint_xxl}) { 76 @content; 77 } 78 } 79 } 80 81 /** 82 * Root Media Query Variables 83 */ 84 :root { 85 --responsive--spacing-horizontal: calc(2 * var(--global--spacing-horizontal) * 0.6); 86 --responsive--aligndefault-width: calc(100vw - var(--responsive--spacing-horizontal)); 87 --responsive--alignwide-width: calc(100vw - var(--responsive--spacing-horizontal)); 88 --responsive--alignfull-width: 100%; 89 --responsive--alignright-margin: var(--global--spacing-horizontal); 90 --responsive--alignleft-margin: var(--global--spacing-horizontal); 91 } 92 93 @include media(mobile) { 94 95 :root { 96 --responsive--aligndefault-width: min(calc(100vw - 4 * var(--global--spacing-horizontal)), #{$default_width}); 97 --responsive--alignwide-width: calc(100vw - 4 * var(--global--spacing-horizontal)); 98 --responsive--alignright-margin: calc(0.5 * (100vw - var(--responsive--aligndefault-width))); 99 --responsive--alignleft-margin: calc(0.5 * (100vw - var(--responsive--aligndefault-width))); 100 } 101 } 102 103 @include media(desktop) { 104 105 :root { 106 --responsive--aligndefault-width: min(calc(100vw - 8 * var(--global--spacing-horizontal)), #{$default_width}); 107 --responsive--alignwide-width: min(calc(100vw - 8 * var(--global--spacing-horizontal)), #{$max_content_width}); 108 } 109 } 110 111 /** 112 * Extends 113 */ 114 %responsive-aligndefault-width { 115 max-width: var(--responsive--aligndefault-width); 116 margin-left: auto; 117 margin-right: auto; 118 } 119 120 %responsive-alignwide-width { 121 max-width: var(--responsive--alignwide-width); 122 margin-left: auto; 123 margin-right: auto; 124 } 125 126 %responsive-alignfull-width-mobile { 127 max-width: var(--responsive--alignfull-width); 128 width: var(--responsive--alignfull-width); 129 margin-left: auto; 130 margin-right: auto; 131 } 132 133 @include media(mobile) { 134 %responsive-alignfull-width { 135 max-width: var(--responsive--alignfull-width); 136 width: auto; 137 margin-left: auto; 138 margin-right: auto; 139 } 140 } 141 142 %responsive-alignwide-width-nested { 143 margin-left: auto; 144 margin-right: auto; 145 width: var(--responsive--alignwide-width); 146 max-width: var(--responsive--alignfull-width); 147 } 148 149 %responsive-alignfull-width-nested { 150 margin-left: auto; 151 margin-right: auto; 152 width: calc(var(--responsive--alignfull-width) - calc(2 * var(--responsive--spacing-horizontal))); 153 max-width: var(--responsive--alignfull-width); 154 } 155 156 @include media(desktop) { 157 %responsive-alignfull-width-nested { 158 margin-left: auto; 159 margin-right: auto; 160 width: calc(var(--responsive--alignfull-width) - calc(4 * var(--responsive--spacing-horizontal))); 161 max-width: var(--responsive--alignfull-width); 162 } 163 } 164 165 166 %responsive-alignleft-mobile { 167 168 /*rtl:ignore*/ 169 margin-left: 0; 170 171 /*rtl:ignore*/ 172 margin-right: var(--responsive--spacing-horizontal); 173 } 174 175 @include media(mobile) { 176 %responsive-alignleft { 177 178 /*rtl:ignore*/ 179 margin-left: var(--responsive--alignleft-margin); 180 181 /*rtl:ignore*/ 182 margin-right: var(--global--spacing-horizontal); 183 } 184 } 185 186 %responsive-alignright-mobile { 187 188 /*rtl:ignore*/ 189 margin-left: var(--responsive--spacing-horizontal); 190 191 /*rtl:ignore*/ 192 margin-right: 0; 193 } 194 195 @include media(mobile) { 196 %responsive-alignright { 197 198 /*rtl:ignore*/ 199 margin-left: var(--global--spacing-horizontal); 200 201 /*rtl:ignore*/ 202 margin-right: var(--responsive--alignright-margin); 203 } 204 } 205 206 // Output 207 .default-max-width { 208 @extend %responsive-aligndefault-width; 209 } 210 211 .wide-max-width { 212 @extend %responsive-alignwide-width; 213 } 214 215 .full-max-width { 216 @extend %responsive-alignfull-width; 217 }