123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118 |
- /**
- * Repsonsive Styles
- */
- @import '../abstracts/mixins';
- /**
- * Root Media Query Variables
- */
- :root {
- --responsive--spacing-horizontal: calc(2 * var(--global--spacing-horizontal));
- --responsive--aligndefault-width: calc(100vw - var(--responsive--spacing-horizontal));
- --responsive--alignwide-width: calc(100vw - var(--responsive--spacing-horizontal));
- --responsive--alignfull-width: 100%;
- --responsive--alignwide-width-multiplier: calc(16 * var(--global--spacing-horizontal));
- --responsive--alignright-margin: var(--global--spacing-horizontal);
- --responsive--alignleft-margin: var(--global--spacing-horizontal);
- }
- @include media(mobile) {
- :root {
- --responsive--alignright-margin: calc( 0.5 * (100vw - var(--responsive--aligndefault-width)));
- --responsive--alignleft-margin: calc( 0.5 * (100vw - var(--responsive--aligndefault-width)));
- }
- }
- @include media(laptop) {
- :root {
- --responsive--aligndefault-width: min(calc(100vw - 2 * var(--global--spacing-horizontal)), #{$default_width});
- --responsive--alignwide-width: min(calc(100vw - 2 * var(--global--spacing-horizontal)), #{$alignwide_width});
- }
- }
- /**
- * Extends
- */
- %responsive-aligndefault-width {
- max-width: var(--responsive--aligndefault-width);
- margin-left: auto;
- margin-right: auto;
- }
- %responsive-alignwide-width {
- max-width: var(--responsive--alignwide-width);
- margin-left: auto;
- margin-right: auto;
- }
- @include media(mobile) {
- %responsive-alignfull-width {
- max-width: var(--responsive--alignfull-width);
- width: auto;
- margin-left: auto;
- margin-right: auto;
- }
- }
- %responsive-alignwide-width-nested {
- margin-left: auto;
- margin-right: auto;
- width: var(--responsive--alignwide-width);
- max-width: var(--responsive--alignfull-width);
- }
- %responsive-alignfull-width-nested {
- margin-left: auto;
- margin-right: auto;
- width: calc(var(--responsive--alignfull-width) - calc(2 * var(--responsive--spacing-horizontal)));
- max-width: var(--responsive--alignfull-width);
- }
- %responsive-alignleft-mobile {
- /*rtl:ignore*/
- margin-left: 0;
- /*rtl:ignore*/
- margin-right: var(--responsive--spacing-horizontal);
- }
- @include media(mobile) {
- %responsive-alignleft {
- /*rtl:ignore*/
- margin-left: var(--responsive--alignleft-margin);
- /*rtl:ignore*/
- margin-right: var(--global--spacing-horizontal);
- }
- }
- %responsive-alignright-mobile {
- /*rtl:ignore*/
- margin-left: var(--responsive--spacing-horizontal);
- /*rtl:ignore*/
- margin-right: 0;
- }
- @include media(mobile) {
- %responsive-alignright {
- /*rtl:ignore*/
- margin-left: var(--global--spacing-horizontal);
- /*rtl:ignore*/
- margin-right: var(--responsive--alignright-margin);
- }
- }
- /**
- * Output
- */
- .default-max-width {
- @extend %responsive-aligndefault-width;
- }
- .wide-max-width {
- @extend %responsive-alignwide-width;
- }
- .full-max-width {
- @extend %responsive-alignfull-width;
- }
|