Added Workaround.scss

JarekToro · JarekToro · commit 166d9ed2370c · 2017-05-30T11:55:53.000-04:00
Issues #36
diff --git a/src/main/java/com/jarektoro/responsivelayout/ResponsiveLayout.java b/src/main/java/com/jarektoro/responsivelayout/ResponsiveLayout.java
@@ -61,10 +61,10 @@ public void setScrollable(boolean scrollable) {
             removeStyleName(CSS_CONTAINER_SCROLLABLE);
         }
     }
-    
+
     public ResponsiveLayout withStyleName(String styleName) {
-        addStyleName(styleName); 
-        return this; 
+        addStyleName(styleName);
+        return this;
     }
 
     /**
diff --git a/src/main/resources/com/jarektoro/responsivelayout/_alignment.scss b/src/main/resources/com/jarektoro/responsivelayout/_alignment.scss
@@ -1,3 +1,4 @@
+@import "vars";
 @mixin alignment {
 
   &-start-xs {
@@ -62,7 +63,7 @@
     order: 1;
   }
 
-  @media only screen and (min-width: 48em) {
+  @media only screen and (min-width: $sm-breakpoint) {
 
     &-start-sm {
       -ms-flex-pack: start;
@@ -118,7 +119,7 @@
     }
   }
 
-  @media only screen and (min-width: 62em) {
+  @media only screen and (min-width: $md-breakpoint) {
 
     &-start-md {
       -ms-flex-pack: start;
@@ -174,7 +175,7 @@
     }
   }
 
-  @media only screen and (min-width: 75em) {
+  @media only screen and (min-width: $lg-breakpoint) {
 
     &-start-lg {
       -ms-flex-pack: start;
diff --git a/src/main/resources/com/jarektoro/responsivelayout/_col.scss b/src/main/resources/com/jarektoro/responsivelayout/_col.scss
@@ -1,5 +1,11 @@
+@import "vars";
+
+
 @mixin col {
 
+  $special_value:77775555px;
+
+
   &-col {
 
     .col-container {
@@ -163,7 +169,7 @@
       margin-left: 91.667%;
     }
 
-    @media only screen and (min-width: 48em) {
+    @media only screen and (min-width: $sm-breakpoint) {
       &-sm, &-sm-1, &-sm-2, &-sm-3, &-sm-4, &-sm-5, &-sm-6, &-sm-7, &-sm-8, &-sm-9, &-sm-10, &-sm-11, &-sm-12 {
         box-sizing: border-box;
         -ms-flex: 0 0 auto;
@@ -274,7 +280,7 @@
       }
     }
 
-    @media only screen and (min-width: 62em) {
+    @media only screen and (min-width: $md-breakpoint) {
 
       &-md, &-md-1, &-md-2, &-md-3, &-md-4, &-md-5, &-md-6, &-md-7, &-md-8, &-md-9, &-md-10, &-md-11, &-md-12 {
         box-sizing: border-box;
@@ -389,7 +395,7 @@
 
     }
 
-    @media only screen and (min-width: 75em) {
+    @media only screen and (min-width: $lg-breakpoint) {
       &-lg, &-lg-1, &-lg-2, &-lg-3, &-lg-4, &-lg-5, &-lg-6, &-lg-7, &-lg-8, &-lg-9, &-lg-10, &-lg-11, &-lg-12 {
         box-sizing: border-box;
         -ms-flex: 0 0 auto;
diff --git a/src/main/resources/com/jarektoro/responsivelayout/_container.scss b/src/main/resources/com/jarektoro/responsivelayout/_container.scss
@@ -1,3 +1,5 @@
+@import "vars";
+
 @mixin container {
 
   &-container {
@@ -13,19 +15,19 @@
       width: 100%;
     }
 
-    @media only screen and (min-width: 48em) {
+    @media only screen and (min-width: $sm-breakpoint) {
       &-fixed {
         width: 46rem;
       }
     }
 
-    @media only screen and (min-width: 62em) {
+    @media only screen and (min-width: $md-breakpoint) {
       &-fixed {
         width: 61rem;
       }
     }
 
-    @media only screen and (min-width: 75em) {
+    @media only screen and (min-width: $lg-breakpoint) {
       &-fixed {
         width: 71rem;
       }
diff --git a/src/main/resources/com/jarektoro/responsivelayout/_row.scss b/src/main/resources/com/jarektoro/responsivelayout/_row.scss
@@ -1,3 +1,4 @@
+@import "vars";
 @mixin row {
 
   &-row {
@@ -98,7 +99,7 @@
         padding-bottom: .3rem;
       }
       @media only screen and (max-width: 47em) {
-
+//needs to be one less then md-breakpoint
         &.margin-xs {
           margin: 2rem !important;
 
@@ -140,7 +141,7 @@
         }
       }
 
-      @media only screen and (min-width: 48em) {
+      @media only screen and (min-width: $sm-breakpoint) {
         //SM
         &.margin-sm {
           margin: 2rem !important;
@@ -184,7 +185,7 @@
 
       }
 
-      @media only screen and (min-width: 62em) {
+      @media only screen and (min-width: $md-breakpoint) {
         //MD
         &.margin-md {
           margin: 2rem !important;
@@ -227,7 +228,7 @@
         }
       }
 
-      @media only screen and (min-width: 75em) {
+      @media only screen and (min-width: $lg-breakpoint) {
         //LG
         &.margin-lg {
           margin: 2rem !important;
diff --git a/src/main/resources/com/jarektoro/responsivelayout/_vars.scss b/src/main/resources/com/jarektoro/responsivelayout/_vars.scss
@@ -0,0 +1,4 @@
+//$xs-max-width: 12345px;
+$sm-breakpoint: 23456px; // 48em default
+$md-breakpoint: 34567px; // 62em default
+$lg-breakpoint: 45678px; // 75em default
diff --git a/src/main/resources/com/jarektoro/responsivelayout/_visibility.scss b/src/main/resources/com/jarektoro/responsivelayout/_visibility.scss
@@ -1,10 +1,12 @@
+@import "vars";
 @mixin visibility {
 
   &-visible-xs, &-visible-sm, &-visible-md, &-visible-lg, &-visible-xs-block, &-visible-xs-inline, &-visible-xs-inline-block, &-visible-sm-block, &-visible-sm-inline, &-visible-sm-inline-block, &-visible-md-block, &-visible-md-inline, &-visible-md-inline-block, &-visible-lg-block, &-visible-lg-inline, &-visible-lg-inline-block {
     display: none !important;
   }
 
   @media (max-width: 767px) {
+    // one less then md-breakpoint
     &-visible-xs {
       display: block !important;
       &.col.col-content-center {
@@ -23,24 +25,31 @@
   }
 
   @media (max-width: 767px) {
+    // one less then md-breakpoint
+
     &-visible-xs-block {
       display: block !important;
     }
   }
 
   @media (max-width: 767px) {
+    // one less then md-breakpoint
+
     &-visible-xs-inline {
       display: inline !important;
     }
   }
 
   @media (max-width: 767px) {
+    // one less then md-breakpoint
+
     &-visible-xs-inline-block {
       display: inline-block !important;
     }
   }
 
-  @media (min-width: 768px) and (max-width: 991px) {
+  @media (min-width: $sm-breakpoint) and (max-width: 991px) {
+    // one less then md-breakpoint
     &-visible-sm {
       display: block !important;
       &.col.col-content-center {
@@ -58,25 +67,33 @@
     }
   }
 
-  @media (min-width: 768px) and (max-width: 991px) {
+  @media (min-width: $sm-breakpoint) and (max-width: 991px) {
+    // one less then md-breakpoint
+
     &-visible-sm-block {
       display: block !important;
     }
   }
 
-  @media (min-width: 768px) and (max-width: 991px) {
+  @media (min-width: $sm-breakpoint) and (max-width: 991px) {
+    // one less then md-breakpoint
+
     &-visible-sm-inline {
       display: inline !important;
     }
   }
 
-  @media (min-width: 768px) and (max-width: 991px) {
+  @media (min-width: $sm-breakpoint) and (max-width: 991px) {
+    // one less then md-breakpoint
+
     &-visible-sm-inline-block {
       display: inline-block !important;
     }
   }
 
-  @media (min-width: 992px) and (max-width: 1199px) {
+  @media (min-width: $md-breakpoint) and (max-width: 1199px) {
+    // one less then lg-breakpoint
+
     &-visible-md {
       display: block !important;
       &.col.col-content-center {
@@ -94,25 +111,31 @@
     }
   }
 
-  @media (min-width: 992px) and (max-width: 1199px) {
+  @media (min-width: $md-breakpoint) and (max-width: 1199px) {
+    // one less then lg-breakpoint
+
     &-visible-md-block {
       display: block !important;
     }
   }
 
-  @media (min-width: 992px) and (max-width: 1199px) {
+  @media (min-width: $md-breakpoint) and (max-width: 1199px) {
+    // one less then lg-breakpoint
+
     &-visible-md-inline {
       display: inline !important;
     }
   }
 
-  @media (min-width: 992px) and (max-width: 1199px) {
+  @media (min-width: $md-breakpoint) and (max-width: 1199px) {
+    // one less then lg-breakpoint
+
     &-visible-md-inline-block {
       display: inline-block !important;
     }
   }
 
-  @media (min-width: 1200px) {
+  @media (min-width: $lg-breakpoint) {
     &-visible-lg {
       display: block !important;
       &.col.col-content-center {
@@ -130,43 +153,48 @@
     }
   }
 
-  @media (min-width: 1200px) {
+  @media (min-width: $lg-breakpoint) {
     &-visible-lg-block {
       display: block !important;
     }
   }
 
-  @media (min-width: 1200px) {
+  @media (min-width: $lg-breakpoint) {
     &-visible-lg-inline {
       display: inline !important;
     }
   }
 
-  @media (min-width: 1200px) {
+  @media (min-width: $lg-breakpoint) {
     &-visible-lg-inline-block {
       display: inline-block !important;
     }
   }
 
   @media (max-width: 767px) {
+    // one less then sm-breakpoint
     &-hidden-xs {
       display: none !important;
     }
   }
 
-  @media (min-width: 768px) and (max-width: 991px) {
+  @media (min-width: $sm-breakpoint) and (max-width: 991px) {
+    // one less then md-breakpoint
+
     &-hidden-sm {
       display: none !important;
     }
   }
 
-  @media (min-width: 992px) and (max-width: 1199px) {
+  @media (min-width: $md-breakpoint) and (max-width: 1199px) {
+    // one less then lg-breakpoint
+
     &-hidden-md {
       display: none !important;
     }
   }
 
-  @media (min-width: 1200px) {
+  @media (min-width: $lg-breakpoint) {
     &-hidden-lg {
       display: none !important;
     }
diff --git a/src/main/resources/com/jarektoro/responsivelayout/styles.css b/src/main/resources/com/jarektoro/responsivelayout/styles.css
diff --git a/src/main/resources/com/jarektoro/responsivelayout/workaround.css b/src/main/resources/com/jarektoro/responsivelayout/workaround.css
diff --git a/src/main/resources/com/jarektoro/responsivelayout/workaround.scss b/src/main/resources/com/jarektoro/responsivelayout/workaround.scss

Original file line number	Diff line number	Diff line change
`@@ -61,10 +61,10 @@ public void setScrollable(boolean scrollable) {`
`61`	`61`	`removeStyleName(CSS_CONTAINER_SCROLLABLE);`
`62`	`62`	`}`
`63`	`63`	`}`
`64`		`-`
	`64`	`+`
`65`	`65`	`public ResponsiveLayout withStyleName(String styleName) {`
`66`		`- addStyleName(styleName);`
`67`		`- return this;`
	`66`	`+ addStyleName(styleName);`
	`67`	`+ return this;`
`68`	`68`	`}`
`69`	`69`
`70`	`70`	`/**`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,4 @@`
	`1`	`+@import "vars";`
`1`	`2`	`@mixin alignment {`
`2`	`3`
`3`	`4`	`&-start-xs {`
`@@ -62,7 +63,7 @@`
`62`	`63`	`order: 1;`
`63`	`64`	`}`
`64`	`65`
`65`		`- @media only screen and (min-width: 48em) {`
	`66`	`+ @media only screen and (min-width: $sm-breakpoint) {`
`66`	`67`
`67`	`68`	`&-start-sm {`
`68`	`69`	`-ms-flex-pack: start;`
`@@ -118,7 +119,7 @@`
`118`	`119`	`}`
`119`	`120`	`}`
`120`	`121`
`121`		`- @media only screen and (min-width: 62em) {`
	`122`	`+ @media only screen and (min-width: $md-breakpoint) {`
`122`	`123`
`123`	`124`	`&-start-md {`
`124`	`125`	`-ms-flex-pack: start;`
`@@ -174,7 +175,7 @@`
`174`	`175`	`}`
`175`	`176`	`}`
`176`	`177`
`177`		`- @media only screen and (min-width: 75em) {`
	`178`	`+ @media only screen and (min-width: $lg-breakpoint) {`
`178`	`179`
`179`	`180`	`&-start-lg {`
`180`	`181`	`-ms-flex-pack: start;`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,5 @@`
	`1`	`+@import "vars";`
	`2`	`+`
`1`	`3`	`@mixin container {`
`2`	`4`
`3`	`5`	`&-container {`
`@@ -13,19 +15,19 @@`
`13`	`15`	`width: 100%;`
`14`	`16`	`}`
`15`	`17`
`16`		`- @media only screen and (min-width: 48em) {`
	`18`	`+ @media only screen and (min-width: $sm-breakpoint) {`
`17`	`19`	`&-fixed {`
`18`	`20`	`width: 46rem;`
`19`	`21`	`}`
`20`	`22`	`}`
`21`	`23`
`22`		`- @media only screen and (min-width: 62em) {`
	`24`	`+ @media only screen and (min-width: $md-breakpoint) {`
`23`	`25`	`&-fixed {`
`24`	`26`	`width: 61rem;`
`25`	`27`	`}`
`26`	`28`	`}`
`27`	`29`
`28`		`- @media only screen and (min-width: 75em) {`
	`30`	`+ @media only screen and (min-width: $lg-breakpoint) {`
`29`	`31`	`&-fixed {`
`30`	`32`	`width: 71rem;`
`31`	`33`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,4 @@`
	`1`	`+@import "vars";`
`1`	`2`	`@mixin row {`
`2`	`3`
`3`	`4`	`&-row {`
`@@ -98,7 +99,7 @@`
`98`	`99`	`padding-bottom: .3rem;`
`99`	`100`	`}`
`100`	`101`	`@media only screen and (max-width: 47em) {`
`101`		`-`
	`102`	`+//needs to be one less then md-breakpoint`
`102`	`103`	`&.margin-xs {`
`103`	`104`	`margin: 2rem !important;`
`104`	`105`
`@@ -140,7 +141,7 @@`
`140`	`141`	`}`
`141`	`142`	`}`
`142`	`143`
`143`		`- @media only screen and (min-width: 48em) {`
	`144`	`+ @media only screen and (min-width: $sm-breakpoint) {`
`144`	`145`	`//SM`
`145`	`146`	`&.margin-sm {`
`146`	`147`	`margin: 2rem !important;`
`@@ -184,7 +185,7 @@`
`184`	`185`
`185`	`186`	`}`
`186`	`187`
`187`		`- @media only screen and (min-width: 62em) {`
	`188`	`+ @media only screen and (min-width: $md-breakpoint) {`
`188`	`189`	`//MD`
`189`	`190`	`&.margin-md {`
`190`	`191`	`margin: 2rem !important;`
`@@ -227,7 +228,7 @@`
`227`	`228`	`}`
`228`	`229`	`}`
`229`	`230`
`230`		`- @media only screen and (min-width: 75em) {`
	`231`	`+ @media only screen and (min-width: $lg-breakpoint) {`
`231`	`232`	`//LG`
`232`	`233`	`&.margin-lg {`
`233`	`234`	`margin: 2rem !important;`
Original file line number	Diff line number	Diff line change
`@@ -1,10 +1,12 @@`
	`1`	`+@import "vars";`
`1`	`2`	`@mixin visibility {`
`2`	`3`
`3`	`4`	`&-visible-xs, &-visible-sm, &-visible-md, &-visible-lg, &-visible-xs-block, &-visible-xs-inline, &-visible-xs-inline-block, &-visible-sm-block, &-visible-sm-inline, &-visible-sm-inline-block, &-visible-md-block, &-visible-md-inline, &-visible-md-inline-block, &-visible-lg-block, &-visible-lg-inline, &-visible-lg-inline-block {`
`4`	`5`	`display: none !important;`
`5`	`6`	`}`
`6`	`7`
`7`	`8`	`@media (max-width: 767px) {`
	`9`	`+ // one less then md-breakpoint`
`8`	`10`	`&-visible-xs {`
`9`	`11`	`display: block !important;`
`10`	`12`	`&.col.col-content-center {`
`@@ -23,24 +25,31 @@`
`23`	`25`	`}`
`24`	`26`
`25`	`27`	`@media (max-width: 767px) {`
	`28`	`+ // one less then md-breakpoint`
	`29`	`+`
`26`	`30`	`&-visible-xs-block {`
`27`	`31`	`display: block !important;`
`28`	`32`	`}`
`29`	`33`	`}`
`30`	`34`
`31`	`35`	`@media (max-width: 767px) {`
	`36`	`+ // one less then md-breakpoint`
	`37`	`+`
`32`	`38`	`&-visible-xs-inline {`
`33`	`39`	`display: inline !important;`
`34`	`40`	`}`
`35`	`41`	`}`
`36`	`42`
`37`	`43`	`@media (max-width: 767px) {`
	`44`	`+ // one less then md-breakpoint`
	`45`	`+`
`38`	`46`	`&-visible-xs-inline-block {`
`39`	`47`	`display: inline-block !important;`
`40`	`48`	`}`
`41`	`49`	`}`
`42`	`50`
`43`		`- @media (min-width: 768px) and (max-width: 991px) {`
	`51`	`+ @media (min-width: $sm-breakpoint) and (max-width: 991px) {`
	`52`	`+ // one less then md-breakpoint`
`44`	`53`	`&-visible-sm {`
`45`	`54`	`display: block !important;`
`46`	`55`	`&.col.col-content-center {`
`@@ -58,25 +67,33 @@`
`58`	`67`	`}`
`59`	`68`	`}`
`60`	`69`
`61`		`- @media (min-width: 768px) and (max-width: 991px) {`
	`70`	`+ @media (min-width: $sm-breakpoint) and (max-width: 991px) {`
	`71`	`+ // one less then md-breakpoint`
	`72`	`+`
`62`	`73`	`&-visible-sm-block {`
`63`	`74`	`display: block !important;`
`64`	`75`	`}`
`65`	`76`	`}`
`66`	`77`
`67`		`- @media (min-width: 768px) and (max-width: 991px) {`
	`78`	`+ @media (min-width: $sm-breakpoint) and (max-width: 991px) {`
	`79`	`+ // one less then md-breakpoint`
	`80`	`+`
`68`	`81`	`&-visible-sm-inline {`
`69`	`82`	`display: inline !important;`
`70`	`83`	`}`
`71`	`84`	`}`
`72`	`85`
`73`		`- @media (min-width: 768px) and (max-width: 991px) {`
	`86`	`+ @media (min-width: $sm-breakpoint) and (max-width: 991px) {`
	`87`	`+ // one less then md-breakpoint`
	`88`	`+`
`74`	`89`	`&-visible-sm-inline-block {`
`75`	`90`	`display: inline-block !important;`
`76`	`91`	`}`
`77`	`92`	`}`
`78`	`93`
`79`		`- @media (min-width: 992px) and (max-width: 1199px) {`
	`94`	`+ @media (min-width: $md-breakpoint) and (max-width: 1199px) {`
	`95`	`+ // one less then lg-breakpoint`
	`96`	`+`
`80`	`97`	`&-visible-md {`
`81`	`98`	`display: block !important;`
`82`	`99`	`&.col.col-content-center {`
`@@ -94,25 +111,31 @@`
`94`	`111`	`}`
`95`	`112`	`}`
`96`	`113`
`97`		`- @media (min-width: 992px) and (max-width: 1199px) {`
	`114`	`+ @media (min-width: $md-breakpoint) and (max-width: 1199px) {`
	`115`	`+ // one less then lg-breakpoint`
	`116`	`+`
`98`	`117`	`&-visible-md-block {`
`99`	`118`	`display: block !important;`
`100`	`119`	`}`
`101`	`120`	`}`
`102`	`121`
`103`		`- @media (min-width: 992px) and (max-width: 1199px) {`
	`122`	`+ @media (min-width: $md-breakpoint) and (max-width: 1199px) {`
	`123`	`+ // one less then lg-breakpoint`
	`124`	`+`
`104`	`125`	`&-visible-md-inline {`
`105`	`126`	`display: inline !important;`
`106`	`127`	`}`
`107`	`128`	`}`
`108`	`129`
`109`		`- @media (min-width: 992px) and (max-width: 1199px) {`
	`130`	`+ @media (min-width: $md-breakpoint) and (max-width: 1199px) {`
	`131`	`+ // one less then lg-breakpoint`
	`132`	`+`
`110`	`133`	`&-visible-md-inline-block {`
`111`	`134`	`display: inline-block !important;`
`112`	`135`	`}`
`113`	`136`	`}`
`114`	`137`
`115`		`- @media (min-width: 1200px) {`
	`138`	`+ @media (min-width: $lg-breakpoint) {`
`116`	`139`	`&-visible-lg {`
`117`	`140`	`display: block !important;`
`118`	`141`	`&.col.col-content-center {`
`@@ -130,43 +153,48 @@`
`130`	`153`	`}`
`131`	`154`	`}`
`132`	`155`
`133`		`- @media (min-width: 1200px) {`
	`156`	`+ @media (min-width: $lg-breakpoint) {`
`134`	`157`	`&-visible-lg-block {`
`135`	`158`	`display: block !important;`
`136`	`159`	`}`
`137`	`160`	`}`
`138`	`161`
`139`		`- @media (min-width: 1200px) {`
	`162`	`+ @media (min-width: $lg-breakpoint) {`
`140`	`163`	`&-visible-lg-inline {`
`141`	`164`	`display: inline !important;`
`142`	`165`	`}`
`143`	`166`	`}`
`144`	`167`
`145`		`- @media (min-width: 1200px) {`
	`168`	`+ @media (min-width: $lg-breakpoint) {`
`146`	`169`	`&-visible-lg-inline-block {`
`147`	`170`	`display: inline-block !important;`
`148`	`171`	`}`
`149`	`172`	`}`
`150`	`173`
`151`	`174`	`@media (max-width: 767px) {`
	`175`	`+ // one less then sm-breakpoint`
`152`	`176`	`&-hidden-xs {`
`153`	`177`	`display: none !important;`
`154`	`178`	`}`
`155`	`179`	`}`
`156`	`180`
`157`		`- @media (min-width: 768px) and (max-width: 991px) {`
	`181`	`+ @media (min-width: $sm-breakpoint) and (max-width: 991px) {`
	`182`	`+ // one less then md-breakpoint`
	`183`	`+`
`158`	`184`	`&-hidden-sm {`
`159`	`185`	`display: none !important;`
`160`	`186`	`}`
`161`	`187`	`}`
`162`	`188`
`163`		`- @media (min-width: 992px) and (max-width: 1199px) {`
	`189`	`+ @media (min-width: $md-breakpoint) and (max-width: 1199px) {`
	`190`	`+ // one less then lg-breakpoint`
	`191`	`+`
`164`	`192`	`&-hidden-md {`
`165`	`193`	`display: none !important;`
`166`	`194`	`}`
`167`	`195`	`}`
`168`	`196`
`169`		`- @media (min-width: 1200px) {`
	`197`	`+ @media (min-width: $lg-breakpoint) {`
`170`	`198`	`&-hidden-lg {`
`171`	`199`	`display: none !important;`
`172`	`200`	`}`