UNPKG

cirrus-ui/tests/internal/_size.spec.scss

Version:

1// _mixins.scss unit tests
2@use '../test_base' as *;
3
4@use '../../src/internal/size';
5
6// TODO: Move some tests to _exported.spec.scss
7
8/******************
* screen-above() *
******************/
11@include describe('screen-above()') {
  @include it('should return screen-above 640px given $xs') {
      @include assert {
          @include output {
              .test {
                  @include size.screen-above($xs) {
                      color: #fff;
                  }
              }
          }
          @include expect {
              @media screen and (min-width: 640px) {
                  .test {
                      color: #fff;
                  }
              }
          }
      }
  }
  @include it('should return screen-above 768px given $sm') {
      @include assert {
          @include output {
              .test {
                  @include size.screen-above($sm) {
                      color: #fff;
                  }
              }
          }
          @include expect {
              @media screen and (min-width: 768px) {
                  .test {
                      color: #fff;
                  }
              }
          }
      }
  }
  @include it('should return screen-above 1024px given $md') {
      @include assert {
          @include output {
              .test {
                  @include size.screen-above($md) {
                      color: #fff;
                  }
              }
          }
          @include expect {
              @media screen and (min-width: 1024px) {
                  .test {
                      color: #fff;
                  }
              }
          }
      }
  }
  @include it('should return screen-above 1280px given $lg') {
      @include assert {
          @include output {
              .test {
                  @include size.screen-above($lg) {
                      color: #fff;
                  }
              }
          }
          @include expect {
              @media screen and (min-width: 1280px) {
                  .test {
                      color: #fff;
                  }
              }
          }
      }
  }
  @include it('should return screen-above 1536px given $xl') {
      @include assert {
          @include output {
              .test {
                  @include size.screen-above($xl) {
                      color: #fff;
                  }
              }
          }
          @include expect {
              @media screen and (min-width: 1536px) {
                  .test {
                      color: #fff;
                  }
              }
          }
      }
  }
102}
103
104/********************
* screen-between() *
********************/
107@include describe('screen-between()') {
  @include it('should return screen-above 768px and screen-below 1279px given $sm and $lg') {
      @include assert {
          @include output {
              .test {
                  @include size.screen-between($sm, $lg) {
                      color: #fff;
                  }
              }
          }
          @include expect {
              @media screen and (min-width: 768px) and (max-width: 1279px) {
                  .test {
                      color: #fff;
                  }
              }
          }
      }
  }
126}
127
128/******************
* screen-below() *
******************/
131@include describe('screen-below()') {
  @include it('should return screen-below 639px given $xs') {
      @include assert {
          @include output {
              .test {
                  @include size.screen-below($xs) {
                      color: #fff;
                  }
              }
          }
          @include expect {
              @media screen and (max-width: 639px) {
                  .test {
                      color: #fff;
                  }
              }
          }
      }
  }
  @include it('should return screen-below 767px given $sm') {
      @include assert {
          @include output {
              .test {
                  @include size.screen-below($sm) {
                      color: #fff;
                  }
              }
          }
          @include expect {
              @media screen and (max-width: 767px) {
                  .test {
                      color: #fff;
                  }
              }
          }
      }
  }
  @include it('should return screen-below 1023px given $md') {
      @include assert {
          @include output {
              .test {
                  @include size.screen-below($md) {
                      color: #fff;
                  }
              }
          }
          @include expect {
              @media screen and (max-width: 1023px) {
                  .test {
                      color: #fff;
                  }
              }
          }
      }
  }
  @include it('should return screen-below 1279px given $lg') {
      @include assert {
          @include output {
              .test {
                  @include size.screen-below($lg) {
                      color: #fff;
                  }
              }
          }
          @include expect {
              @media screen and (max-width: 1279px) {
                  .test {
                      color: #fff;
                  }
              }
          }
      }
  }
  @include it('should return screen-below 1535px given $xl') {
      @include assert {
          @include output {
              .test {
                  @include size.screen-below($xl) {
                      color: #fff;
                  }
              }
          }
          @include expect {
              @media screen and (max-width: 1535px) {
                  .test {
                      color: #fff;
                  }
              }
          }
      }
  }
222}
223
224/***********************************
* generate-classes-for-viewport() *
***********************************/
227$generate-classes-for-viewport-classes: row, row-reverse, column, column-reverse;
228$generate-classes-for-viewport-property: 'flex-direction';
229$generate-classes-for-viewport-prefix: 'u#{delimitize('flex')}';
230@include describe('generate-classes-for-viewport()') {
  @include it('should return classes without viewport variants') {
      @include assert {
          @include output {
              @include size.generate-classes-for-viewport(
                  $generate-classes-for-viewport-classes,
                  $generate-classes-for-viewport-property,
                  $generate-classes-for-viewport-prefix,
                  false
              );
          }
          @include expect {
              .u-flex-row {
                  flex-direction: row !important;
              }
245
              .u-flex-row-reverse {
                  flex-direction: row-reverse !important;
              }
249
              .u-flex-column {
                  flex-direction: column !important;
              }
253
              .u-flex-column-reverse {
                  flex-direction: column-reverse !important;
              }
          }
      }
  }
  @include it('should return classes with viewport variants') {
      @include assert {
          @include output {
              @include size.generate-classes-for-viewport(
                  $generate-classes-for-viewport-classes,
                  $generate-classes-for-viewport-property,
                  $generate-classes-for-viewport-prefix,
                  $generate-viewports: 'true'
              );
          }
          @include expect {
              .u-flex-row {
                  flex-direction: row !important;
              }
274
              .u-flex-row-reverse {
                  flex-direction: row-reverse !important;
              }
278
              .u-flex-column {
                  flex-direction: column !important;
              }
282
              .u-flex-column-reverse {
                  flex-direction: column-reverse !important;
              }
286
              @media screen and (min-width: 640px) {
                  .u-flex-row-sm {
                      flex-direction: row !important;
                  }
              }
              @media screen and (min-width: 640px) {
                  .u-flex-row-reverse-sm {
                      flex-direction: row-reverse !important;
                  }
              }
              @media screen and (min-width: 640px) {
                  .u-flex-column-sm {
                      flex-direction: column !important;
                  }
              }
              @media screen and (min-width: 640px) {
                  .u-flex-column-reverse-sm {
                      flex-direction: column-reverse !important;
                  }
              }
              @media screen and (min-width: 768px) {
                  .u-flex-row-md {
                      flex-direction: row !important;
                  }
              }
              @media screen and (min-width: 768px) {
                  .u-flex-row-reverse-md {
                      flex-direction: row-reverse !important;
                  }
              }
              @media screen and (min-width: 768px) {
                  .u-flex-column-md {
                      flex-direction: column !important;
                  }
              }
              @media screen and (min-width: 768px) {
                  .u-flex-column-reverse-md {
                      flex-direction: column-reverse !important;
                  }
              }
              @media screen and (min-width: 1024px) {
                  .u-flex-row-lg {
                      flex-direction: row !important;
                  }
              }
              @media screen and (min-width: 1024px) {
                  .u-flex-row-reverse-lg {
                      flex-direction: row-reverse !important;
                  }
              }
              @media screen and (min-width: 1024px) {
                  .u-flex-column-lg {
                      flex-direction: column !important;
                  }
              }
              @media screen and (min-width: 1024px) {
                  .u-flex-column-reverse-lg {
                      flex-direction: column-reverse !important;
                  }
              }
              @media screen and (min-width: 1280px) {
                  .u-flex-row-xl {
                      flex-direction: row !important;
                  }
              }
              @media screen and (min-width: 1280px) {
                  .u-flex-row-reverse-xl {
                      flex-direction: row-reverse !important;
                  }
              }
              @media screen and (min-width: 1280px) {
                  .u-flex-column-xl {
                      flex-direction: column !important;
                  }
              }
              @media screen and (min-width: 1280px) {
                  .u-flex-column-reverse-xl {
                      flex-direction: column-reverse !important;
                  }
              }
          }
      }
  }
  @include it('should return classes with viewport variants with a custom prefix') {
      @include assert {
          @include output {
              @include size.generate-classes-for-viewport(
                  $generate-classes-for-viewport-classes,
                  $generate-classes-for-viewport-property,
                  'flex-',
                  $generate-viewports: 'true'
              );
          }
          @include expect {
              .flex-row {
                  flex-direction: row !important;
              }
384
              .flex-row-reverse {
                  flex-direction: row-reverse !important;
              }
388
              .flex-column {
                  flex-direction: column !important;
              }
392
              .flex-column-reverse {
                  flex-direction: column-reverse !important;
              }
396
              @media screen and (min-width: 640px) {
                  .flex-row-sm {
                      flex-direction: row !important;
                  }
              }
              @media screen and (min-width: 640px) {
                  .flex-row-reverse-sm {
                      flex-direction: row-reverse !important;
                  }
              }
              @media screen and (min-width: 640px) {
                  .flex-column-sm {
                      flex-direction: column !important;
                  }
              }
              @media screen and (min-width: 640px) {
                  .flex-column-reverse-sm {
                      flex-direction: column-reverse !important;
                  }
              }
              @media screen and (min-width: 768px) {
                  .flex-row-md {
                      flex-direction: row !important;
                  }
              }
              @media screen and (min-width: 768px) {
                  .flex-row-reverse-md {
                      flex-direction: row-reverse !important;
                  }
              }
              @media screen and (min-width: 768px) {
                  .flex-column-md {
                      flex-direction: column !important;
                  }
              }
              @media screen and (min-width: 768px) {
                  .flex-column-reverse-md {
                      flex-direction: column-reverse !important;
                  }
              }
              @media screen and (min-width: 1024px) {
                  .flex-row-lg {
                      flex-direction: row !important;
                  }
              }
              @media screen and (min-width: 1024px) {
                  .flex-row-reverse-lg {
                      flex-direction: row-reverse !important;
                  }
              }
              @media screen and (min-width: 1024px) {
                  .flex-column-lg {
                      flex-direction: column !important;
                  }
              }
              @media screen and (min-width: 1024px) {
                  .flex-column-reverse-lg {
                      flex-direction: column-reverse !important;
                  }
              }
              @media screen and (min-width: 1280px) {
                  .flex-row-xl {
                      flex-direction: row !important;
                  }
              }
              @media screen and (min-width: 1280px) {
                  .flex-row-reverse-xl {
                      flex-direction: row-reverse !important;
                  }
              }
              @media screen and (min-width: 1280px) {
                  .flex-column-xl {
                      flex-direction: column !important;
                  }
              }
              @media screen and (min-width: 1280px) {
                  .flex-column-reverse-xl {
                      flex-direction: column-reverse !important;
                  }
              }
          }
      }
  }
  @include it(
      'should return classes with viewport variants without important! if $include-important is set to false'
  ) {
      @include assert {
          @include output {
              @include size.generate-classes-for-viewport(
                  $generate-classes-for-viewport-classes,
                  $generate-classes-for-viewport-property,
                  $generate-classes-for-viewport-prefix,
                  $generate-viewports: 'true',
                  $include-important: 'false'
              );
          }
          @include expect {
              .u-flex-row {
                  flex-direction: row;
              }
497
              .u-flex-row-reverse {
                  flex-direction: row-reverse;
              }
501
              .u-flex-column {
                  flex-direction: column;
              }
505
              .u-flex-column-reverse {
                  flex-direction: column-reverse;
              }
509
              @media screen and (min-width: 640px) {
                  .u-flex-row-sm {
                      flex-direction: row;
                  }
              }
              @media screen and (min-width: 640px) {
                  .u-flex-row-reverse-sm {
                      flex-direction: row-reverse;
                  }
              }
              @media screen and (min-width: 640px) {
                  .u-flex-column-sm {
                      flex-direction: column;
                  }
              }
              @media screen and (min-width: 640px) {
                  .u-flex-column-reverse-sm {
                      flex-direction: column-reverse;
                  }
              }
              @media screen and (min-width: 768px) {
                  .u-flex-row-md {
                      flex-direction: row;
                  }
              }
              @media screen and (min-width: 768px) {
                  .u-flex-row-reverse-md {
                      flex-direction: row-reverse;
                  }
              }
              @media screen and (min-width: 768px) {
                  .u-flex-column-md {
                      flex-direction: column;
                  }
              }
              @media screen and (min-width: 768px) {
                  .u-flex-column-reverse-md {
                      flex-direction: column-reverse;
                  }
              }
              @media screen and (min-width: 1024px) {
                  .u-flex-row-lg {
                      flex-direction: row;
                  }
              }
              @media screen and (min-width: 1024px) {
                  .u-flex-row-reverse-lg {
                      flex-direction: row-reverse;
                  }
              }
              @media screen and (min-width: 1024px) {
                  .u-flex-column-lg {
                      flex-direction: column;
                  }
              }
              @media screen and (min-width: 1024px) {
                  .u-flex-column-reverse-lg {
                      flex-direction: column-reverse;
                  }
              }
              @media screen and (min-width: 1280px) {
                  .u-flex-row-xl {
                      flex-direction: row;
                  }
              }
              @media screen and (min-width: 1280px) {
                  .u-flex-row-reverse-xl {
                      flex-direction: row-reverse;
                  }
              }
              @media screen and (min-width: 1280px) {
                  .u-flex-column-xl {
                      flex-direction: column;
                  }
              }
              @media screen and (min-width: 1280px) {
                  .u-flex-column-reverse-xl {
                      flex-direction: column-reverse;
                  }
              }
          }
      }
  }
593}
594
595/********************************************
* generate-classes-for-viewport-with-map() *
********************************************/
598$generate-classes-for-viewport-with-map-classes: (
  '0': 0,
  '10': 0.1,
601);
602$generate-classes-for-viewport-with-map-property: 'opacity';
603$generate-classes-for-viewport-with-map-prefix: 'u#{delimitize('opacity')}';
604@include describe('generate-classes-for-viewport-with-map()') {
  @include it('should return classes without viewport variants') {
      @include assert {
          @include output {
              @include size.generate-classes-for-viewport-with-map(
                  $generate-classes-for-viewport-with-map-classes,
                  $generate-classes-for-viewport-with-map-property,
                  $generate-classes-for-viewport-with-map-prefix,
                  'false'
              );
          }
          @include expect {
              .u-opacity-0 {
                  opacity: 0 !important;
              }
              .u-opacity-10 {
                  opacity: 0.1 !important;
              }
          }
      }
  }
  @include it('should return classes with viewport variants') {
      @include assert {
          @include output {
              @include size.generate-classes-for-viewport-with-map(
                  $generate-classes-for-viewport-with-map-classes,
                  $generate-classes-for-viewport-with-map-property,
                  $generate-classes-for-viewport-with-map-prefix,
                  'true'
              );
          }
          @include expect {
              .u-opacity-0 {
                  opacity: 0 !important;
              }
              .u-opacity-10 {
                  opacity: 0.1 !important;
              }
              @media screen and (min-width: 640px) {
                  .u-opacity-0-sm {
                      opacity: 0 !important;
                  }
              }
              @media screen and (min-width: 640px) {
                  .u-opacity-10-sm {
                      opacity: 0.1 !important;
                  }
              }
              @media screen and (min-width: 768px) {
                  .u-opacity-0-md {
                      opacity: 0 !important;
                  }
              }
              @media screen and (min-width: 768px) {
                  .u-opacity-10-md {
                      opacity: 0.1 !important;
                  }
              }
              @media screen and (min-width: 1024px) {
                  .u-opacity-0-lg {
                      opacity: 0 !important;
                  }
              }
              @media screen and (min-width: 1024px) {
                  .u-opacity-10-lg {
                      opacity: 0.1 !important;
                  }
              }
              @media screen and (min-width: 1280px) {
                  .u-opacity-0-xl {
                      opacity: 0 !important;
                  }
              }
              @media screen and (min-width: 1280px) {
                  .u-opacity-10-xl {
                      opacity: 0.1 !important;
                  }
              }
          }
      }
  }
  @include it('should return classes with viewport variants with a custom prefix') {
      @include assert {
          @include output {
              @include size.generate-classes-for-viewport-with-map(
                  $generate-classes-for-viewport-with-map-classes,
                  $generate-classes-for-viewport-with-map-property,
                  'opacity-',
                  'true'
              );
          }
          @include expect {
              .opacity-0 {
                  opacity: 0 !important;
              }
              .opacity-10 {
                  opacity: 0.1 !important;
              }
              @media screen and (min-width: 640px) {
                  .opacity-0-sm {
                      opacity: 0 !important;
                  }
              }
              @media screen and (min-width: 640px) {
                  .opacity-10-sm {
                      opacity: 0.1 !important;
                  }
              }
              @media screen and (min-width: 768px) {
                  .opacity-0-md {
                      opacity: 0 !important;
                  }
              }
              @media screen and (min-width: 768px) {
                  .opacity-10-md {
                      opacity: 0.1 !important;
                  }
              }
              @media screen and (min-width: 1024px) {
                  .opacity-0-lg {
                      opacity: 0 !important;
                  }
              }
              @media screen and (min-width: 1024px) {
                  .opacity-10-lg {
                      opacity: 0.1 !important;
                  }
              }
              @media screen and (min-width: 1280px) {
                  .opacity-0-xl {
                      opacity: 0 !important;
                  }
              }
              @media screen and (min-width: 1280px) {
                  .opacity-10-xl {
                      opacity: 0.1 !important;
                  }
              }
          }
      }
  }
  @include it(
      'should return classes with viewport variants without important! if $include-important is set to false'
  ) {
      @include assert {
          @include output {
              @include size.generate-classes-for-viewport-with-map(
                  $generate-classes-for-viewport-with-map-classes,
                  $generate-classes-for-viewport-with-map-property,
                  $generate-classes-for-viewport-with-map-prefix,
                  'true',
                  'false'
              );
          }
          @include expect {
              .u-opacity-0 {
                  opacity: 0;
              }
              .u-opacity-10 {
                  opacity: 0.1;
              }
              @media screen and (min-width: 640px) {
                  .u-opacity-0-sm {
                      opacity: 0;
                  }
              }
              @media screen and (min-width: 640px) {
                  .u-opacity-10-sm {
                      opacity: 0.1;
                  }
              }
              @media screen and (min-width: 768px) {
                  .u-opacity-0-md {
                      opacity: 0;
                  }
              }
              @media screen and (min-width: 768px) {
                  .u-opacity-10-md {
                      opacity: 0.1;
                  }
              }
              @media screen and (min-width: 1024px) {
                  .u-opacity-0-lg {
                      opacity: 0;
                  }
              }
              @media screen and (min-width: 1024px) {
                  .u-opacity-10-lg {
                      opacity: 0.1;
                  }
              }
              @media screen and (min-width: 1280px) {
                  .u-opacity-0-xl {
                      opacity: 0;
                  }
              }
              @media screen and (min-width: 1280px) {
                  .u-opacity-10-xl {
                      opacity: 0.1;
                  }
              }
          }
      }
  }
808}
809
810/**********************************
* generate-styles-with-viewports() *
**********************************/
813@include describe('generate-styles-with-viewports()') {
  @include it('should return CSS suffixed with viewports given a valid CSS block') {
      @include assert {
          @include output {
              @include size.generate-styles-with-viewports('true') using ($viewport) {
                  $suffix: if($viewport != '', '-#{$viewport}', '');
                  .outer#{$suffix} {
                      background: #222;
                      .inner#{$suffix} {
                          color: #fff;
                      }
                  }
              }
          }
          @include expect {
              .outer {
                  background: #222;
              }
              .outer .inner {
                  color: #fff;
              }
              @media screen and (min-width: 640px) {
                  .outer-sm {
                      background: #222;
                  }
                  .outer-sm .inner-sm {
                      color: #fff;
                  }
              }
              @media screen and (min-width: 768px) {
                  .outer-md {
                      background: #222;
                  }
                  .outer-md .inner-md {
                      color: #fff;
                  }
              }
              @media screen and (min-width: 1024px) {
                  .outer-lg {
                      background: #222;
                  }
                  .outer-lg .inner-lg {
                      color: #fff;
                  }
              }
              @media screen and (min-width: 1280px) {
                  .outer-xl {
                      background: #222;
                  }
                  .outer-xl .inner-xl {
                      color: #fff;
                  }
              }
          }
      }
  }
869}

1	`// _mixins.scss unit tests`
2	`@use '../test_base' as *;`
3
4	`@use '../../src/internal/size';`
5
6	`// TODO: Move some tests to _exported.spec.scss`
7
8	`/******************`
9	`* screen-above() *`
10	`******************/`
11	`@include describe('screen-above()') {`
12	`@include it('should return screen-above 640px given $xs') {`
13	`@include assert {`
14	`@include output {`
15	`.test {`
16	`@include size.screen-above($xs) {`
17	`color: #fff;`
18	`}`
19	`}`
20	`}`
21	`@include expect {`
22	`@media screen and (min-width: 640px) {`
23	`.test {`
24	`color: #fff;`
25	`}`
26	`}`
27	`}`
28	`}`
29	`}`
30	`@include it('should return screen-above 768px given $sm') {`
31	`@include assert {`
32	`@include output {`
33	`.test {`
34	`@include size.screen-above($sm) {`
35	`color: #fff;`
36	`}`
37	`}`
38	`}`
39	`@include expect {`
40	`@media screen and (min-width: 768px) {`
41	`.test {`
42	`color: #fff;`
43	`}`
44	`}`
45	`}`
46	`}`
47	`}`
48	`@include it('should return screen-above 1024px given $md') {`
49	`@include assert {`
50	`@include output {`
51	`.test {`
52	`@include size.screen-above($md) {`
53	`color: #fff;`
54	`}`
55	`}`
56	`}`
57	`@include expect {`
58	`@media screen and (min-width: 1024px) {`
59	`.test {`
60	`color: #fff;`
61	`}`
62	`}`
63	`}`
64	`}`
65	`}`
66	`@include it('should return screen-above 1280px given $lg') {`
67	`@include assert {`
68	`@include output {`
69	`.test {`
70	`@include size.screen-above($lg) {`
71	`color: #fff;`
72	`}`
73	`}`
74	`}`
75	`@include expect {`
76	`@media screen and (min-width: 1280px) {`
77	`.test {`
78	`color: #fff;`
79	`}`
80	`}`
81	`}`
82	`}`
83	`}`
84	`@include it('should return screen-above 1536px given $xl') {`
85	`@include assert {`
86	`@include output {`
87	`.test {`
88	`@include size.screen-above($xl) {`
89	`color: #fff;`
90	`}`
91	`}`
92	`}`
93	`@include expect {`
94	`@media screen and (min-width: 1536px) {`
95	`.test {`
96	`color: #fff;`
97	`}`
98	`}`
99	`}`
100	`}`
101	`}`
102	`}`
103
104	`/********************`
105	`* screen-between() *`
106	`********************/`
107	`@include describe('screen-between()') {`
108	`@include it('should return screen-above 768px and screen-below 1279px given $sm and $lg') {`
109	`@include assert {`
110	`@include output {`
111	`.test {`
112	`@include size.screen-between($sm, $lg) {`
113	`color: #fff;`
114	`}`
115	`}`
116	`}`
117	`@include expect {`
118	`@media screen and (min-width: 768px) and (max-width: 1279px) {`
119	`.test {`
120	`color: #fff;`
121	`}`
122	`}`
123	`}`
124	`}`
125	`}`
126	`}`
127
128	`/******************`
129	`* screen-below() *`
130	`******************/`
131	`@include describe('screen-below()') {`
132	`@include it('should return screen-below 639px given $xs') {`
133	`@include assert {`
134	`@include output {`
135	`.test {`
136	`@include size.screen-below($xs) {`
137	`color: #fff;`
138	`}`
139	`}`
140	`}`
141	`@include expect {`
142	`@media screen and (max-width: 639px) {`
143	`.test {`
144	`color: #fff;`
145	`}`
146	`}`
147	`}`
148	`}`
149	`}`
150	`@include it('should return screen-below 767px given $sm') {`
151	`@include assert {`
152	`@include output {`
153	`.test {`
154	`@include size.screen-below($sm) {`
155	`color: #fff;`
156	`}`
157	`}`
158	`}`
159	`@include expect {`
160	`@media screen and (max-width: 767px) {`
161	`.test {`
162	`color: #fff;`
163	`}`
164	`}`
165	`}`
166	`}`
167	`}`
168	`@include it('should return screen-below 1023px given $md') {`
169	`@include assert {`
170	`@include output {`
171	`.test {`
172	`@include size.screen-below($md) {`
173	`color: #fff;`
174	`}`
175	`}`
176	`}`
177	`@include expect {`
178	`@media screen and (max-width: 1023px) {`
179	`.test {`
180	`color: #fff;`
181	`}`
182	`}`
183	`}`
184	`}`
185	`}`
186	`@include it('should return screen-below 1279px given $lg') {`
187	`@include assert {`
188	`@include output {`
189	`.test {`
190	`@include size.screen-below($lg) {`
191	`color: #fff;`
192	`}`
193	`}`
194	`}`
195	`@include expect {`
196	`@media screen and (max-width: 1279px) {`
197	`.test {`
198	`color: #fff;`
199	`}`
200	`}`
201	`}`
202	`}`
203	`}`
204	`@include it('should return screen-below 1535px given $xl') {`
205	`@include assert {`
206	`@include output {`
207	`.test {`
208	`@include size.screen-below($xl) {`
209	`color: #fff;`
210	`}`
211	`}`
212	`}`
213	`@include expect {`
214	`@media screen and (max-width: 1535px) {`
215	`.test {`
216	`color: #fff;`
217	`}`
218	`}`
219	`}`
220	`}`
221	`}`
222	`}`
223
224	`/***********************************`
225	`* generate-classes-for-viewport() *`
226	`***********************************/`
227	`$generate-classes-for-viewport-classes: row, row-reverse, column, column-reverse;`
228	`$generate-classes-for-viewport-property: 'flex-direction';`
229	`$generate-classes-for-viewport-prefix: 'u#{delimitize('flex')}';`
230	`@include describe('generate-classes-for-viewport()') {`
231	`@include it('should return classes without viewport variants') {`
232	`@include assert {`
233	`@include output {`
234	`@include size.generate-classes-for-viewport(`
235	`$generate-classes-for-viewport-classes,`
236	`$generate-classes-for-viewport-property,`
237	`$generate-classes-for-viewport-prefix,`
238	`false`
239	`);`
240	`}`
241	`@include expect {`
242	`.u-flex-row {`
243	`flex-direction: row !important;`
244	`}`
245
246	`.u-flex-row-reverse {`
247	`flex-direction: row-reverse !important;`
248	`}`
249
250	`.u-flex-column {`
251	`flex-direction: column !important;`
252	`}`
253
254	`.u-flex-column-reverse {`
255	`flex-direction: column-reverse !important;`
256	`}`
257	`}`
258	`}`
259	`}`
260	`@include it('should return classes with viewport variants') {`
261	`@include assert {`
262	`@include output {`
263	`@include size.generate-classes-for-viewport(`
264	`$generate-classes-for-viewport-classes,`
265	`$generate-classes-for-viewport-property,`
266	`$generate-classes-for-viewport-prefix,`
267	`$generate-viewports: 'true'`
268	`);`
269	`}`
270	`@include expect {`
271	`.u-flex-row {`
272	`flex-direction: row !important;`
273	`}`
274
275	`.u-flex-row-reverse {`
276	`flex-direction: row-reverse !important;`
277	`}`
278
279	`.u-flex-column {`
280	`flex-direction: column !important;`
281	`}`
282
283	`.u-flex-column-reverse {`
284	`flex-direction: column-reverse !important;`
285	`}`
286
287	`@media screen and (min-width: 640px) {`
288	`.u-flex-row-sm {`
289	`flex-direction: row !important;`
290	`}`
291	`}`
292	`@media screen and (min-width: 640px) {`
293	`.u-flex-row-reverse-sm {`
294	`flex-direction: row-reverse !important;`
295	`}`
296	`}`
297	`@media screen and (min-width: 640px) {`
298	`.u-flex-column-sm {`
299	`flex-direction: column !important;`
300	`}`
301	`}`
302	`@media screen and (min-width: 640px) {`
303	`.u-flex-column-reverse-sm {`
304	`flex-direction: column-reverse !important;`
305	`}`
306	`}`
307	`@media screen and (min-width: 768px) {`
308	`.u-flex-row-md {`
309	`flex-direction: row !important;`
310	`}`
311	`}`
312	`@media screen and (min-width: 768px) {`
313	`.u-flex-row-reverse-md {`
314	`flex-direction: row-reverse !important;`
315	`}`
316	`}`
317	`@media screen and (min-width: 768px) {`
318	`.u-flex-column-md {`
319	`flex-direction: column !important;`
320	`}`
321	`}`
322	`@media screen and (min-width: 768px) {`
323	`.u-flex-column-reverse-md {`
324	`flex-direction: column-reverse !important;`
325	`}`
326	`}`
327	`@media screen and (min-width: 1024px) {`
328	`.u-flex-row-lg {`
329	`flex-direction: row !important;`
330	`}`
331	`}`
332	`@media screen and (min-width: 1024px) {`
333	`.u-flex-row-reverse-lg {`
334	`flex-direction: row-reverse !important;`
335	`}`
336	`}`
337	`@media screen and (min-width: 1024px) {`
338	`.u-flex-column-lg {`
339	`flex-direction: column !important;`
340	`}`
341	`}`
342	`@media screen and (min-width: 1024px) {`
343	`.u-flex-column-reverse-lg {`
344	`flex-direction: column-reverse !important;`
345	`}`
346	`}`
347	`@media screen and (min-width: 1280px) {`
348	`.u-flex-row-xl {`
349	`flex-direction: row !important;`
350	`}`
351	`}`
352	`@media screen and (min-width: 1280px) {`
353	`.u-flex-row-reverse-xl {`
354	`flex-direction: row-reverse !important;`
355	`}`
356	`}`
357	`@media screen and (min-width: 1280px) {`
358	`.u-flex-column-xl {`
359	`flex-direction: column !important;`
360	`}`
361	`}`
362	`@media screen and (min-width: 1280px) {`
363	`.u-flex-column-reverse-xl {`
364	`flex-direction: column-reverse !important;`
365	`}`
366	`}`
367	`}`
368	`}`
369	`}`
370	`@include it('should return classes with viewport variants with a custom prefix') {`
371	`@include assert {`
372	`@include output {`
373	`@include size.generate-classes-for-viewport(`
374	`$generate-classes-for-viewport-classes,`
375	`$generate-classes-for-viewport-property,`
376	`'flex-',`
377	`$generate-viewports: 'true'`
378	`);`
379	`}`
380	`@include expect {`
381	`.flex-row {`
382	`flex-direction: row !important;`
383	`}`
384
385	`.flex-row-reverse {`
386	`flex-direction: row-reverse !important;`
387	`}`
388
389	`.flex-column {`
390	`flex-direction: column !important;`
391	`}`
392
393	`.flex-column-reverse {`
394	`flex-direction: column-reverse !important;`
395	`}`
396
397	`@media screen and (min-width: 640px) {`
398	`.flex-row-sm {`
399	`flex-direction: row !important;`
400	`}`
401	`}`
402	`@media screen and (min-width: 640px) {`
403	`.flex-row-reverse-sm {`
404	`flex-direction: row-reverse !important;`
405	`}`
406	`}`
407	`@media screen and (min-width: 640px) {`
408	`.flex-column-sm {`
409	`flex-direction: column !important;`
410	`}`
411	`}`
412	`@media screen and (min-width: 640px) {`
413	`.flex-column-reverse-sm {`
414	`flex-direction: column-reverse !important;`
415	`}`
416	`}`
417	`@media screen and (min-width: 768px) {`
418	`.flex-row-md {`
419	`flex-direction: row !important;`
420	`}`
421	`}`
422	`@media screen and (min-width: 768px) {`
423	`.flex-row-reverse-md {`
424	`flex-direction: row-reverse !important;`
425	`}`
426	`}`
427	`@media screen and (min-width: 768px) {`
428	`.flex-column-md {`
429	`flex-direction: column !important;`
430	`}`
431	`}`
432	`@media screen and (min-width: 768px) {`
433	`.flex-column-reverse-md {`
434	`flex-direction: column-reverse !important;`
435	`}`
436	`}`
437	`@media screen and (min-width: 1024px) {`
438	`.flex-row-lg {`
439	`flex-direction: row !important;`
440	`}`
441	`}`
442	`@media screen and (min-width: 1024px) {`
443	`.flex-row-reverse-lg {`
444	`flex-direction: row-reverse !important;`
445	`}`
446	`}`
447	`@media screen and (min-width: 1024px) {`
448	`.flex-column-lg {`
449	`flex-direction: column !important;`
450	`}`
451	`}`
452	`@media screen and (min-width: 1024px) {`
453	`.flex-column-reverse-lg {`
454	`flex-direction: column-reverse !important;`
455	`}`
456	`}`
457	`@media screen and (min-width: 1280px) {`
458	`.flex-row-xl {`
459	`flex-direction: row !important;`
460	`}`
461	`}`
462	`@media screen and (min-width: 1280px) {`
463	`.flex-row-reverse-xl {`
464	`flex-direction: row-reverse !important;`
465	`}`
466	`}`
467	`@media screen and (min-width: 1280px) {`
468	`.flex-column-xl {`
469	`flex-direction: column !important;`
470	`}`
471	`}`
472	`@media screen and (min-width: 1280px) {`
473	`.flex-column-reverse-xl {`
474	`flex-direction: column-reverse !important;`
475	`}`
476	`}`
477	`}`
478	`}`
479	`}`
480	`@include it(`
481	`'should return classes with viewport variants without important! if $include-important is set to false'`
482	`) {`
483	`@include assert {`
484	`@include output {`
485	`@include size.generate-classes-for-viewport(`
486	`$generate-classes-for-viewport-classes,`
487	`$generate-classes-for-viewport-property,`
488	`$generate-classes-for-viewport-prefix,`
489	`$generate-viewports: 'true',`
490	`$include-important: 'false'`
491	`);`
492	`}`
493	`@include expect {`
494	`.u-flex-row {`
495	`flex-direction: row;`
496	`}`
497
498	`.u-flex-row-reverse {`
499	`flex-direction: row-reverse;`
500	`}`
501
502	`.u-flex-column {`
503	`flex-direction: column;`
504	`}`
505
506	`.u-flex-column-reverse {`
507	`flex-direction: column-reverse;`
508	`}`
509
510	`@media screen and (min-width: 640px) {`
511	`.u-flex-row-sm {`
512	`flex-direction: row;`
513	`}`
514	`}`
515	`@media screen and (min-width: 640px) {`
516	`.u-flex-row-reverse-sm {`
517	`flex-direction: row-reverse;`
518	`}`
519	`}`
520	`@media screen and (min-width: 640px) {`
521	`.u-flex-column-sm {`
522	`flex-direction: column;`
523	`}`
524	`}`
525	`@media screen and (min-width: 640px) {`
526	`.u-flex-column-reverse-sm {`
527	`flex-direction: column-reverse;`
528	`}`
529	`}`
530	`@media screen and (min-width: 768px) {`
531	`.u-flex-row-md {`
532	`flex-direction: row;`
533	`}`
534	`}`
535	`@media screen and (min-width: 768px) {`
536	`.u-flex-row-reverse-md {`
537	`flex-direction: row-reverse;`
538	`}`
539	`}`
540	`@media screen and (min-width: 768px) {`
541	`.u-flex-column-md {`
542	`flex-direction: column;`
543	`}`
544	`}`
545	`@media screen and (min-width: 768px) {`
546	`.u-flex-column-reverse-md {`
547	`flex-direction: column-reverse;`
548	`}`
549	`}`
550	`@media screen and (min-width: 1024px) {`
551	`.u-flex-row-lg {`
552	`flex-direction: row;`
553	`}`
554	`}`
555	`@media screen and (min-width: 1024px) {`
556	`.u-flex-row-reverse-lg {`
557	`flex-direction: row-reverse;`
558	`}`
559	`}`
560	`@media screen and (min-width: 1024px) {`
561	`.u-flex-column-lg {`
562	`flex-direction: column;`
563	`}`
564	`}`
565	`@media screen and (min-width: 1024px) {`
566	`.u-flex-column-reverse-lg {`
567	`flex-direction: column-reverse;`
568	`}`
569	`}`
570	`@media screen and (min-width: 1280px) {`
571	`.u-flex-row-xl {`
572	`flex-direction: row;`
573	`}`
574	`}`
575	`@media screen and (min-width: 1280px) {`
576	`.u-flex-row-reverse-xl {`
577	`flex-direction: row-reverse;`
578	`}`
579	`}`
580	`@media screen and (min-width: 1280px) {`
581	`.u-flex-column-xl {`
582	`flex-direction: column;`
583	`}`
584	`}`
585	`@media screen and (min-width: 1280px) {`
586	`.u-flex-column-reverse-xl {`
587	`flex-direction: column-reverse;`
588	`}`
589	`}`
590	`}`
591	`}`
592	`}`
593	`}`
594
595	`/********************************************`
596	`* generate-classes-for-viewport-with-map() *`
597	`********************************************/`
598	`$generate-classes-for-viewport-with-map-classes: (`
599	`'0': 0,`
600	`'10': 0.1,`
601	`);`
602	`$generate-classes-for-viewport-with-map-property: 'opacity';`
603	`$generate-classes-for-viewport-with-map-prefix: 'u#{delimitize('opacity')}';`
604	`@include describe('generate-classes-for-viewport-with-map()') {`
605	`@include it('should return classes without viewport variants') {`
606	`@include assert {`
607	`@include output {`
608	`@include size.generate-classes-for-viewport-with-map(`
609	`$generate-classes-for-viewport-with-map-classes,`
610	`$generate-classes-for-viewport-with-map-property,`
611	`$generate-classes-for-viewport-with-map-prefix,`
612	`'false'`
613	`);`
614	`}`
615	`@include expect {`
616	`.u-opacity-0 {`
617	`opacity: 0 !important;`
618	`}`
619	`.u-opacity-10 {`
620	`opacity: 0.1 !important;`
621	`}`
622	`}`
623	`}`
624	`}`
625	`@include it('should return classes with viewport variants') {`
626	`@include assert {`
627	`@include output {`
628	`@include size.generate-classes-for-viewport-with-map(`
629	`$generate-classes-for-viewport-with-map-classes,`
630	`$generate-classes-for-viewport-with-map-property,`
631	`$generate-classes-for-viewport-with-map-prefix,`
632	`'true'`
633	`);`
634	`}`
635	`@include expect {`
636	`.u-opacity-0 {`
637	`opacity: 0 !important;`
638	`}`
639	`.u-opacity-10 {`
640	`opacity: 0.1 !important;`
641	`}`
642	`@media screen and (min-width: 640px) {`
643	`.u-opacity-0-sm {`
644	`opacity: 0 !important;`
645	`}`
646	`}`
647	`@media screen and (min-width: 640px) {`
648	`.u-opacity-10-sm {`
649	`opacity: 0.1 !important;`
650	`}`
651	`}`
652	`@media screen and (min-width: 768px) {`
653	`.u-opacity-0-md {`
654	`opacity: 0 !important;`
655	`}`
656	`}`
657	`@media screen and (min-width: 768px) {`
658	`.u-opacity-10-md {`
659	`opacity: 0.1 !important;`
660	`}`
661	`}`
662	`@media screen and (min-width: 1024px) {`
663	`.u-opacity-0-lg {`
664	`opacity: 0 !important;`
665	`}`
666	`}`
667	`@media screen and (min-width: 1024px) {`
668	`.u-opacity-10-lg {`
669	`opacity: 0.1 !important;`
670	`}`
671	`}`
672	`@media screen and (min-width: 1280px) {`
673	`.u-opacity-0-xl {`
674	`opacity: 0 !important;`
675	`}`
676	`}`
677	`@media screen and (min-width: 1280px) {`
678	`.u-opacity-10-xl {`
679	`opacity: 0.1 !important;`
680	`}`
681	`}`
682	`}`
683	`}`
684	`}`
685	`@include it('should return classes with viewport variants with a custom prefix') {`
686	`@include assert {`
687	`@include output {`
688	`@include size.generate-classes-for-viewport-with-map(`
689	`$generate-classes-for-viewport-with-map-classes,`
690	`$generate-classes-for-viewport-with-map-property,`
691	`'opacity-',`
692	`'true'`
693	`);`
694	`}`
695	`@include expect {`
696	`.opacity-0 {`
697	`opacity: 0 !important;`
698	`}`
699	`.opacity-10 {`
700	`opacity: 0.1 !important;`
701	`}`
702	`@media screen and (min-width: 640px) {`
703	`.opacity-0-sm {`
704	`opacity: 0 !important;`
705	`}`
706	`}`
707	`@media screen and (min-width: 640px) {`
708	`.opacity-10-sm {`
709	`opacity: 0.1 !important;`
710	`}`
711	`}`
712	`@media screen and (min-width: 768px) {`
713	`.opacity-0-md {`
714	`opacity: 0 !important;`
715	`}`
716	`}`
717	`@media screen and (min-width: 768px) {`
718	`.opacity-10-md {`
719	`opacity: 0.1 !important;`
720	`}`
721	`}`
722	`@media screen and (min-width: 1024px) {`
723	`.opacity-0-lg {`
724	`opacity: 0 !important;`
725	`}`
726	`}`
727	`@media screen and (min-width: 1024px) {`
728	`.opacity-10-lg {`
729	`opacity: 0.1 !important;`
730	`}`
731	`}`
732	`@media screen and (min-width: 1280px) {`
733	`.opacity-0-xl {`
734	`opacity: 0 !important;`
735	`}`
736	`}`
737	`@media screen and (min-width: 1280px) {`
738	`.opacity-10-xl {`
739	`opacity: 0.1 !important;`
740	`}`
741	`}`
742	`}`
743	`}`
744	`}`
745	`@include it(`
746	`'should return classes with viewport variants without important! if $include-important is set to false'`
747	`) {`
748	`@include assert {`
749	`@include output {`
750	`@include size.generate-classes-for-viewport-with-map(`
751	`$generate-classes-for-viewport-with-map-classes,`
752	`$generate-classes-for-viewport-with-map-property,`
753	`$generate-classes-for-viewport-with-map-prefix,`
754	`'true',`
755	`'false'`
756	`);`
757	`}`
758	`@include expect {`
759	`.u-opacity-0 {`
760	`opacity: 0;`
761	`}`
762	`.u-opacity-10 {`
763	`opacity: 0.1;`
764	`}`
765	`@media screen and (min-width: 640px) {`
766	`.u-opacity-0-sm {`
767	`opacity: 0;`
768	`}`
769	`}`
770	`@media screen and (min-width: 640px) {`
771	`.u-opacity-10-sm {`
772	`opacity: 0.1;`
773	`}`
774	`}`
775	`@media screen and (min-width: 768px) {`
776	`.u-opacity-0-md {`
777	`opacity: 0;`
778	`}`
779	`}`
780	`@media screen and (min-width: 768px) {`
781	`.u-opacity-10-md {`
782	`opacity: 0.1;`
783	`}`
784	`}`
785	`@media screen and (min-width: 1024px) {`
786	`.u-opacity-0-lg {`
787	`opacity: 0;`
788	`}`
789	`}`
790	`@media screen and (min-width: 1024px) {`
791	`.u-opacity-10-lg {`
792	`opacity: 0.1;`
793	`}`
794	`}`
795	`@media screen and (min-width: 1280px) {`
796	`.u-opacity-0-xl {`
797	`opacity: 0;`
798	`}`
799	`}`
800	`@media screen and (min-width: 1280px) {`
801	`.u-opacity-10-xl {`
802	`opacity: 0.1;`
803	`}`
804	`}`
805	`}`
806	`}`
807	`}`
808	`}`
809
810	`/**********************************`
811	`* generate-styles-with-viewports() *`
812	`**********************************/`
813	`@include describe('generate-styles-with-viewports()') {`
814	`@include it('should return CSS suffixed with viewports given a valid CSS block') {`
815	`@include assert {`
816	`@include output {`
817	`@include size.generate-styles-with-viewports('true') using ($viewport) {`
818	`$suffix: if($viewport != '', '-#{$viewport}', '');`
819	`.outer#{$suffix} {`
820	`background: #222;`
821	`.inner#{$suffix} {`
822	`color: #fff;`
823	`}`
824	`}`
825	`}`
826	`}`
827	`@include expect {`
828	`.outer {`
829	`background: #222;`
830	`}`
831	`.outer .inner {`
832	`color: #fff;`
833	`}`
834	`@media screen and (min-width: 640px) {`
835	`.outer-sm {`
836	`background: #222;`
837	`}`
838	`.outer-sm .inner-sm {`
839	`color: #fff;`
840	`}`
841	`}`
842	`@media screen and (min-width: 768px) {`
843	`.outer-md {`
844	`background: #222;`
845	`}`
846	`.outer-md .inner-md {`
847	`color: #fff;`
848	`}`
849	`}`
850	`@media screen and (min-width: 1024px) {`
851	`.outer-lg {`
852	`background: #222;`
853	`}`
854	`.outer-lg .inner-lg {`
855	`color: #fff;`
856	`}`
857	`}`
858	`@media screen and (min-width: 1280px) {`
859	`.outer-xl {`
860	`background: #222;`
861	`}`
862	`.outer-xl .inner-xl {`
863	`color: #fff;`
864	`}`
865	`}`
866	`}`
867	`}`
868	`}`
869	`}`