[Summary view] [Print] [Text view]

   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 - 0.02}) {
  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 - 0.02}) {
  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 - 0.02}) {
  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 - 0.02}) {
  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 - 0.02}) {
  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  }