This is an automated email from the ASF dual-hosted git repository.

carlosrovira pushed a commit to branch develop
in repository https://gitbox.apache.org/repos/asf/royale-asjs.git


The following commit(s) were added to refs/heads/develop by this push:
     new 232b0c7  responsive visible/hidden class selectors
232b0c7 is described below

commit 232b0c7ad8a1b9a789e0a44ee8680ee856cd1cf4
Author: Carlos Rovira <carlosrov...@apache.org>
AuthorDate: Wed Jul 11 18:13:35 2018 +0200

    responsive visible/hidden class selectors
---
 .../projects/Jewel/src/main/resources/defaults.css | 356 ++++++++++++---------
 .../projects/Jewel/src/main/sass/_mixins.sass      |  12 +-
 .../projects/Jewel/src/main/sass/_variables.sass   |  22 +-
 .../Jewel/src/main/sass/components/_layout.sass    |  46 +--
 4 files changed, 244 insertions(+), 192 deletions(-)

diff --git a/frameworks/projects/Jewel/src/main/resources/defaults.css 
b/frameworks/projects/Jewel/src/main/resources/defaults.css
index eb8babc..963c0fd 100644
--- a/frameworks/projects/Jewel/src/main/resources/defaults.css
+++ b/frameworks/projects/Jewel/src/main/resources/defaults.css
@@ -777,6 +777,14 @@ j|Label {
     width: 100%;
   }
 }
+@media (max-width: 767px) {
+  .layout.grid .visible-phone {
+    display: flex !important;
+  }
+  .layout.grid .hidden-phone {
+    display: none !important;
+  }
+}
 @media (min-width: 768px) {
   .layout.grid .tablet-col-1-1 {
     width: 100%;
@@ -1013,6 +1021,14 @@ j|Label {
     width: 100%;
   }
 }
+@media (min-width: 768px) and (max-width: 991px) {
+  .layout.grid .visible-tablet {
+    display: flex !important;
+  }
+  .layout.grid .hidden-tablet {
+    display: none !important;
+  }
+}
 @media (min-width: 992px) {
   .layout.grid .desktop-col-1-1 {
     width: 100%;
@@ -1249,242 +1265,258 @@ j|Label {
     width: 100%;
   }
 }
+@media (min-width: 992px) and (max-width: 1199px) {
+  .layout.grid .visible-desktop {
+    display: flex !important;
+  }
+  .layout.grid .hidden-desktop {
+    display: none !important;
+  }
+}
 @media (min-width: 1200px) {
-  .layout.grid .lg-col-1-1 {
+  .layout.grid .widescreen-col-1-1 {
     width: 100%;
   }
-  .layout.grid .lg-col-1-2 {
+  .layout.grid .widescreen-col-1-2 {
     width: 50%;
   }
-  .layout.grid .lg-col-2-2 {
+  .layout.grid .widescreen-col-2-2 {
     width: 100%;
   }
-  .layout.grid .lg-col-1-3 {
+  .layout.grid .widescreen-col-1-3 {
     width: 33.3333333333%;
   }
-  .layout.grid .lg-col-2-3 {
+  .layout.grid .widescreen-col-2-3 {
     width: 66.6666666667%;
   }
-  .layout.grid .lg-col-3-3 {
+  .layout.grid .widescreen-col-3-3 {
     width: 100%;
   }
-  .layout.grid .lg-col-1-4 {
+  .layout.grid .widescreen-col-1-4 {
     width: 25%;
   }
-  .layout.grid .lg-col-2-4 {
+  .layout.grid .widescreen-col-2-4 {
     width: 50%;
   }
-  .layout.grid .lg-col-3-4 {
+  .layout.grid .widescreen-col-3-4 {
     width: 75%;
   }
-  .layout.grid .lg-col-4-4 {
+  .layout.grid .widescreen-col-4-4 {
     width: 100%;
   }
-  .layout.grid .lg-col-1-5 {
+  .layout.grid .widescreen-col-1-5 {
     width: 20%;
   }
-  .layout.grid .lg-col-2-5 {
+  .layout.grid .widescreen-col-2-5 {
     width: 40%;
   }
-  .layout.grid .lg-col-3-5 {
+  .layout.grid .widescreen-col-3-5 {
     width: 60%;
   }
-  .layout.grid .lg-col-4-5 {
+  .layout.grid .widescreen-col-4-5 {
     width: 80%;
   }
-  .layout.grid .lg-col-5-5 {
+  .layout.grid .widescreen-col-5-5 {
     width: 100%;
   }
-  .layout.grid .lg-col-1-6 {
+  .layout.grid .widescreen-col-1-6 {
     width: 16.6666666667%;
   }
-  .layout.grid .lg-col-2-6 {
+  .layout.grid .widescreen-col-2-6 {
     width: 33.3333333333%;
   }
-  .layout.grid .lg-col-3-6 {
+  .layout.grid .widescreen-col-3-6 {
     width: 50%;
   }
-  .layout.grid .lg-col-4-6 {
+  .layout.grid .widescreen-col-4-6 {
     width: 66.6666666667%;
   }
-  .layout.grid .lg-col-5-6 {
+  .layout.grid .widescreen-col-5-6 {
     width: 83.3333333333%;
   }
-  .layout.grid .lg-col-6-6 {
+  .layout.grid .widescreen-col-6-6 {
     width: 100%;
   }
-  .layout.grid .lg-col-1-7 {
+  .layout.grid .widescreen-col-1-7 {
     width: 14.2857142857%;
   }
-  .layout.grid .lg-col-2-7 {
+  .layout.grid .widescreen-col-2-7 {
     width: 28.5714285714%;
   }
-  .layout.grid .lg-col-3-7 {
+  .layout.grid .widescreen-col-3-7 {
     width: 42.8571428571%;
   }
-  .layout.grid .lg-col-4-7 {
+  .layout.grid .widescreen-col-4-7 {
     width: 57.1428571429%;
   }
-  .layout.grid .lg-col-5-7 {
+  .layout.grid .widescreen-col-5-7 {
     width: 71.4285714286%;
   }
-  .layout.grid .lg-col-6-7 {
+  .layout.grid .widescreen-col-6-7 {
     width: 85.7142857143%;
   }
-  .layout.grid .lg-col-7-7 {
+  .layout.grid .widescreen-col-7-7 {
     width: 100%;
   }
-  .layout.grid .lg-col-1-8 {
+  .layout.grid .widescreen-col-1-8 {
     width: 12.5%;
   }
-  .layout.grid .lg-col-2-8 {
+  .layout.grid .widescreen-col-2-8 {
     width: 25%;
   }
-  .layout.grid .lg-col-3-8 {
+  .layout.grid .widescreen-col-3-8 {
     width: 37.5%;
   }
-  .layout.grid .lg-col-4-8 {
+  .layout.grid .widescreen-col-4-8 {
     width: 50%;
   }
-  .layout.grid .lg-col-5-8 {
+  .layout.grid .widescreen-col-5-8 {
     width: 62.5%;
   }
-  .layout.grid .lg-col-6-8 {
+  .layout.grid .widescreen-col-6-8 {
     width: 75%;
   }
-  .layout.grid .lg-col-7-8 {
+  .layout.grid .widescreen-col-7-8 {
     width: 87.5%;
   }
-  .layout.grid .lg-col-8-8 {
+  .layout.grid .widescreen-col-8-8 {
     width: 100%;
   }
-  .layout.grid .lg-col-1-9 {
+  .layout.grid .widescreen-col-1-9 {
     width: 11.1111111111%;
   }
-  .layout.grid .lg-col-2-9 {
+  .layout.grid .widescreen-col-2-9 {
     width: 22.2222222222%;
   }
-  .layout.grid .lg-col-3-9 {
+  .layout.grid .widescreen-col-3-9 {
     width: 33.3333333333%;
   }
-  .layout.grid .lg-col-4-9 {
+  .layout.grid .widescreen-col-4-9 {
     width: 44.4444444444%;
   }
-  .layout.grid .lg-col-5-9 {
+  .layout.grid .widescreen-col-5-9 {
     width: 55.5555555556%;
   }
-  .layout.grid .lg-col-6-9 {
+  .layout.grid .widescreen-col-6-9 {
     width: 66.6666666667%;
   }
-  .layout.grid .lg-col-7-9 {
+  .layout.grid .widescreen-col-7-9 {
     width: 77.7777777778%;
   }
-  .layout.grid .lg-col-8-9 {
+  .layout.grid .widescreen-col-8-9 {
     width: 88.8888888889%;
   }
-  .layout.grid .lg-col-9-9 {
+  .layout.grid .widescreen-col-9-9 {
     width: 100%;
   }
-  .layout.grid .lg-col-1-10 {
+  .layout.grid .widescreen-col-1-10 {
     width: 10%;
   }
-  .layout.grid .lg-col-2-10 {
+  .layout.grid .widescreen-col-2-10 {
     width: 20%;
   }
-  .layout.grid .lg-col-3-10 {
+  .layout.grid .widescreen-col-3-10 {
     width: 30%;
   }
-  .layout.grid .lg-col-4-10 {
+  .layout.grid .widescreen-col-4-10 {
     width: 40%;
   }
-  .layout.grid .lg-col-5-10 {
+  .layout.grid .widescreen-col-5-10 {
     width: 50%;
   }
-  .layout.grid .lg-col-6-10 {
+  .layout.grid .widescreen-col-6-10 {
     width: 60%;
   }
-  .layout.grid .lg-col-7-10 {
+  .layout.grid .widescreen-col-7-10 {
     width: 70%;
   }
-  .layout.grid .lg-col-8-10 {
+  .layout.grid .widescreen-col-8-10 {
     width: 80%;
   }
-  .layout.grid .lg-col-9-10 {
+  .layout.grid .widescreen-col-9-10 {
     width: 90%;
   }
-  .layout.grid .lg-col-10-10 {
+  .layout.grid .widescreen-col-10-10 {
     width: 100%;
   }
-  .layout.grid .lg-col-1-11 {
+  .layout.grid .widescreen-col-1-11 {
     width: 9.0909090909%;
   }
-  .layout.grid .lg-col-2-11 {
+  .layout.grid .widescreen-col-2-11 {
     width: 18.1818181818%;
   }
-  .layout.grid .lg-col-3-11 {
+  .layout.grid .widescreen-col-3-11 {
     width: 27.2727272727%;
   }
-  .layout.grid .lg-col-4-11 {
+  .layout.grid .widescreen-col-4-11 {
     width: 36.3636363636%;
   }
-  .layout.grid .lg-col-5-11 {
+  .layout.grid .widescreen-col-5-11 {
     width: 45.4545454545%;
   }
-  .layout.grid .lg-col-6-11 {
+  .layout.grid .widescreen-col-6-11 {
     width: 54.5454545455%;
   }
-  .layout.grid .lg-col-7-11 {
+  .layout.grid .widescreen-col-7-11 {
     width: 63.6363636364%;
   }
-  .layout.grid .lg-col-8-11 {
+  .layout.grid .widescreen-col-8-11 {
     width: 72.7272727273%;
   }
-  .layout.grid .lg-col-9-11 {
+  .layout.grid .widescreen-col-9-11 {
     width: 81.8181818182%;
   }
-  .layout.grid .lg-col-10-11 {
+  .layout.grid .widescreen-col-10-11 {
     width: 90.9090909091%;
   }
-  .layout.grid .lg-col-11-11 {
+  .layout.grid .widescreen-col-11-11 {
     width: 100%;
   }
-  .layout.grid .lg-col-1-12 {
+  .layout.grid .widescreen-col-1-12 {
     width: 8.3333333333%;
   }
-  .layout.grid .lg-col-2-12 {
+  .layout.grid .widescreen-col-2-12 {
     width: 16.6666666667%;
   }
-  .layout.grid .lg-col-3-12 {
+  .layout.grid .widescreen-col-3-12 {
     width: 25%;
   }
-  .layout.grid .lg-col-4-12 {
+  .layout.grid .widescreen-col-4-12 {
     width: 33.3333333333%;
   }
-  .layout.grid .lg-col-5-12 {
+  .layout.grid .widescreen-col-5-12 {
     width: 41.6666666667%;
   }
-  .layout.grid .lg-col-6-12 {
+  .layout.grid .widescreen-col-6-12 {
     width: 50%;
   }
-  .layout.grid .lg-col-7-12 {
+  .layout.grid .widescreen-col-7-12 {
     width: 58.3333333333%;
   }
-  .layout.grid .lg-col-8-12 {
+  .layout.grid .widescreen-col-8-12 {
     width: 66.6666666667%;
   }
-  .layout.grid .lg-col-9-12 {
+  .layout.grid .widescreen-col-9-12 {
     width: 75%;
   }
-  .layout.grid .lg-col-10-12 {
+  .layout.grid .widescreen-col-10-12 {
     width: 83.3333333333%;
   }
-  .layout.grid .lg-col-11-12 {
+  .layout.grid .widescreen-col-11-12 {
     width: 91.6666666667%;
   }
-  .layout.grid .lg-col-12-12 {
+  .layout.grid .widescreen-col-12-12 {
     width: 100%;
   }
 }
+@media (min-width: 1200px) {
+  .layout.grid .visible-widescreen {
+    display: flex !important;
+  }
+  .layout.grid .hidden-widescreen {
+    display: none !important;
+  }
+}
 .layout.grid.gap > * {
   margin: 5px;
 }
@@ -2197,242 +2229,254 @@ j|Label {
   }
 }
 @media (min-width: 1200px) {
-  .layout.grid.gap .lg-col-1-1 {
+  .layout.grid.gap .widescreen-col-1-1 {
     width: calc(100% - 10px);
   }
-  .layout.grid.gap .lg-col-1-2 {
+  .layout.grid.gap .widescreen-col-1-2 {
     width: calc(50% - 10px);
   }
-  .layout.grid.gap .lg-col-2-2 {
+  .layout.grid.gap .widescreen-col-2-2 {
     width: calc(100% - 10px);
   }
-  .layout.grid.gap .lg-col-1-3 {
+  .layout.grid.gap .widescreen-col-1-3 {
     width: calc(33.3333333333% - 10px);
   }
-  .layout.grid.gap .lg-col-2-3 {
+  .layout.grid.gap .widescreen-col-2-3 {
     width: calc(66.6666666667% - 10px);
   }
-  .layout.grid.gap .lg-col-3-3 {
+  .layout.grid.gap .widescreen-col-3-3 {
     width: calc(100% - 10px);
   }
-  .layout.grid.gap .lg-col-1-4 {
+  .layout.grid.gap .widescreen-col-1-4 {
     width: calc(25% - 10px);
   }
-  .layout.grid.gap .lg-col-2-4 {
+  .layout.grid.gap .widescreen-col-2-4 {
     width: calc(50% - 10px);
   }
-  .layout.grid.gap .lg-col-3-4 {
+  .layout.grid.gap .widescreen-col-3-4 {
     width: calc(75% - 10px);
   }
-  .layout.grid.gap .lg-col-4-4 {
+  .layout.grid.gap .widescreen-col-4-4 {
     width: calc(100% - 10px);
   }
-  .layout.grid.gap .lg-col-1-5 {
+  .layout.grid.gap .widescreen-col-1-5 {
     width: calc(20% - 10px);
   }
-  .layout.grid.gap .lg-col-2-5 {
+  .layout.grid.gap .widescreen-col-2-5 {
     width: calc(40% - 10px);
   }
-  .layout.grid.gap .lg-col-3-5 {
+  .layout.grid.gap .widescreen-col-3-5 {
     width: calc(60% - 10px);
   }
-  .layout.grid.gap .lg-col-4-5 {
+  .layout.grid.gap .widescreen-col-4-5 {
     width: calc(80% - 10px);
   }
-  .layout.grid.gap .lg-col-5-5 {
+  .layout.grid.gap .widescreen-col-5-5 {
     width: calc(100% - 10px);
   }
-  .layout.grid.gap .lg-col-1-6 {
+  .layout.grid.gap .widescreen-col-1-6 {
     width: calc(16.6666666667% - 10px);
   }
-  .layout.grid.gap .lg-col-2-6 {
+  .layout.grid.gap .widescreen-col-2-6 {
     width: calc(33.3333333333% - 10px);
   }
-  .layout.grid.gap .lg-col-3-6 {
+  .layout.grid.gap .widescreen-col-3-6 {
     width: calc(50% - 10px);
   }
-  .layout.grid.gap .lg-col-4-6 {
+  .layout.grid.gap .widescreen-col-4-6 {
     width: calc(66.6666666667% - 10px);
   }
-  .layout.grid.gap .lg-col-5-6 {
+  .layout.grid.gap .widescreen-col-5-6 {
     width: calc(83.3333333333% - 10px);
   }
-  .layout.grid.gap .lg-col-6-6 {
+  .layout.grid.gap .widescreen-col-6-6 {
     width: calc(100% - 10px);
   }
-  .layout.grid.gap .lg-col-1-7 {
+  .layout.grid.gap .widescreen-col-1-7 {
     width: calc(14.2857142857% - 10px);
   }
-  .layout.grid.gap .lg-col-2-7 {
+  .layout.grid.gap .widescreen-col-2-7 {
     width: calc(28.5714285714% - 10px);
   }
-  .layout.grid.gap .lg-col-3-7 {
+  .layout.grid.gap .widescreen-col-3-7 {
     width: calc(42.8571428571% - 10px);
   }
-  .layout.grid.gap .lg-col-4-7 {
+  .layout.grid.gap .widescreen-col-4-7 {
     width: calc(57.1428571429% - 10px);
   }
-  .layout.grid.gap .lg-col-5-7 {
+  .layout.grid.gap .widescreen-col-5-7 {
     width: calc(71.4285714286% - 10px);
   }
-  .layout.grid.gap .lg-col-6-7 {
+  .layout.grid.gap .widescreen-col-6-7 {
     width: calc(85.7142857143% - 10px);
   }
-  .layout.grid.gap .lg-col-7-7 {
+  .layout.grid.gap .widescreen-col-7-7 {
     width: calc(100% - 10px);
   }
-  .layout.grid.gap .lg-col-1-8 {
+  .layout.grid.gap .widescreen-col-1-8 {
     width: calc(12.5% - 10px);
   }
-  .layout.grid.gap .lg-col-2-8 {
+  .layout.grid.gap .widescreen-col-2-8 {
     width: calc(25% - 10px);
   }
-  .layout.grid.gap .lg-col-3-8 {
+  .layout.grid.gap .widescreen-col-3-8 {
     width: calc(37.5% - 10px);
   }
-  .layout.grid.gap .lg-col-4-8 {
+  .layout.grid.gap .widescreen-col-4-8 {
     width: calc(50% - 10px);
   }
-  .layout.grid.gap .lg-col-5-8 {
+  .layout.grid.gap .widescreen-col-5-8 {
     width: calc(62.5% - 10px);
   }
-  .layout.grid.gap .lg-col-6-8 {
+  .layout.grid.gap .widescreen-col-6-8 {
     width: calc(75% - 10px);
   }
-  .layout.grid.gap .lg-col-7-8 {
+  .layout.grid.gap .widescreen-col-7-8 {
     width: calc(87.5% - 10px);
   }
-  .layout.grid.gap .lg-col-8-8 {
+  .layout.grid.gap .widescreen-col-8-8 {
     width: calc(100% - 10px);
   }
-  .layout.grid.gap .lg-col-1-9 {
+  .layout.grid.gap .widescreen-col-1-9 {
     width: calc(11.1111111111% - 10px);
   }
-  .layout.grid.gap .lg-col-2-9 {
+  .layout.grid.gap .widescreen-col-2-9 {
     width: calc(22.2222222222% - 10px);
   }
-  .layout.grid.gap .lg-col-3-9 {
+  .layout.grid.gap .widescreen-col-3-9 {
     width: calc(33.3333333333% - 10px);
   }
-  .layout.grid.gap .lg-col-4-9 {
+  .layout.grid.gap .widescreen-col-4-9 {
     width: calc(44.4444444444% - 10px);
   }
-  .layout.grid.gap .lg-col-5-9 {
+  .layout.grid.gap .widescreen-col-5-9 {
     width: calc(55.5555555556% - 10px);
   }
-  .layout.grid.gap .lg-col-6-9 {
+  .layout.grid.gap .widescreen-col-6-9 {
     width: calc(66.6666666667% - 10px);
   }
-  .layout.grid.gap .lg-col-7-9 {
+  .layout.grid.gap .widescreen-col-7-9 {
     width: calc(77.7777777778% - 10px);
   }
-  .layout.grid.gap .lg-col-8-9 {
+  .layout.grid.gap .widescreen-col-8-9 {
     width: calc(88.8888888889% - 10px);
   }
-  .layout.grid.gap .lg-col-9-9 {
+  .layout.grid.gap .widescreen-col-9-9 {
     width: calc(100% - 10px);
   }
-  .layout.grid.gap .lg-col-1-10 {
+  .layout.grid.gap .widescreen-col-1-10 {
     width: calc(10% - 10px);
   }
-  .layout.grid.gap .lg-col-2-10 {
+  .layout.grid.gap .widescreen-col-2-10 {
     width: calc(20% - 10px);
   }
-  .layout.grid.gap .lg-col-3-10 {
+  .layout.grid.gap .widescreen-col-3-10 {
     width: calc(30% - 10px);
   }
-  .layout.grid.gap .lg-col-4-10 {
+  .layout.grid.gap .widescreen-col-4-10 {
     width: calc(40% - 10px);
   }
-  .layout.grid.gap .lg-col-5-10 {
+  .layout.grid.gap .widescreen-col-5-10 {
     width: calc(50% - 10px);
   }
-  .layout.grid.gap .lg-col-6-10 {
+  .layout.grid.gap .widescreen-col-6-10 {
     width: calc(60% - 10px);
   }
-  .layout.grid.gap .lg-col-7-10 {
+  .layout.grid.gap .widescreen-col-7-10 {
     width: calc(70% - 10px);
   }
-  .layout.grid.gap .lg-col-8-10 {
+  .layout.grid.gap .widescreen-col-8-10 {
     width: calc(80% - 10px);
   }
-  .layout.grid.gap .lg-col-9-10 {
+  .layout.grid.gap .widescreen-col-9-10 {
     width: calc(90% - 10px);
   }
-  .layout.grid.gap .lg-col-10-10 {
+  .layout.grid.gap .widescreen-col-10-10 {
     width: calc(100% - 10px);
   }
-  .layout.grid.gap .lg-col-1-11 {
+  .layout.grid.gap .widescreen-col-1-11 {
     width: calc(9.0909090909% - 10px);
   }
-  .layout.grid.gap .lg-col-2-11 {
+  .layout.grid.gap .widescreen-col-2-11 {
     width: calc(18.1818181818% - 10px);
   }
-  .layout.grid.gap .lg-col-3-11 {
+  .layout.grid.gap .widescreen-col-3-11 {
     width: calc(27.2727272727% - 10px);
   }
-  .layout.grid.gap .lg-col-4-11 {
+  .layout.grid.gap .widescreen-col-4-11 {
     width: calc(36.3636363636% - 10px);
   }
-  .layout.grid.gap .lg-col-5-11 {
+  .layout.grid.gap .widescreen-col-5-11 {
     width: calc(45.4545454545% - 10px);
   }
-  .layout.grid.gap .lg-col-6-11 {
+  .layout.grid.gap .widescreen-col-6-11 {
     width: calc(54.5454545455% - 10px);
   }
-  .layout.grid.gap .lg-col-7-11 {
+  .layout.grid.gap .widescreen-col-7-11 {
     width: calc(63.6363636364% - 10px);
   }
-  .layout.grid.gap .lg-col-8-11 {
+  .layout.grid.gap .widescreen-col-8-11 {
     width: calc(72.7272727273% - 10px);
   }
-  .layout.grid.gap .lg-col-9-11 {
+  .layout.grid.gap .widescreen-col-9-11 {
     width: calc(81.8181818182% - 10px);
   }
-  .layout.grid.gap .lg-col-10-11 {
+  .layout.grid.gap .widescreen-col-10-11 {
     width: calc(90.9090909091% - 10px);
   }
-  .layout.grid.gap .lg-col-11-11 {
+  .layout.grid.gap .widescreen-col-11-11 {
     width: calc(100% - 10px);
   }
-  .layout.grid.gap .lg-col-1-12 {
+  .layout.grid.gap .widescreen-col-1-12 {
     width: calc(8.3333333333% - 10px);
   }
-  .layout.grid.gap .lg-col-2-12 {
+  .layout.grid.gap .widescreen-col-2-12 {
     width: calc(16.6666666667% - 10px);
   }
-  .layout.grid.gap .lg-col-3-12 {
+  .layout.grid.gap .widescreen-col-3-12 {
     width: calc(25% - 10px);
   }
-  .layout.grid.gap .lg-col-4-12 {
+  .layout.grid.gap .widescreen-col-4-12 {
     width: calc(33.3333333333% - 10px);
   }
-  .layout.grid.gap .lg-col-5-12 {
+  .layout.grid.gap .widescreen-col-5-12 {
     width: calc(41.6666666667% - 10px);
   }
-  .layout.grid.gap .lg-col-6-12 {
+  .layout.grid.gap .widescreen-col-6-12 {
     width: calc(50% - 10px);
   }
-  .layout.grid.gap .lg-col-7-12 {
+  .layout.grid.gap .widescreen-col-7-12 {
     width: calc(58.3333333333% - 10px);
   }
-  .layout.grid.gap .lg-col-8-12 {
+  .layout.grid.gap .widescreen-col-8-12 {
     width: calc(66.6666666667% - 10px);
   }
-  .layout.grid.gap .lg-col-9-12 {
+  .layout.grid.gap .widescreen-col-9-12 {
     width: calc(75% - 10px);
   }
-  .layout.grid.gap .lg-col-10-12 {
+  .layout.grid.gap .widescreen-col-10-12 {
     width: calc(83.3333333333% - 10px);
   }
-  .layout.grid.gap .lg-col-11-12 {
+  .layout.grid.gap .widescreen-col-11-12 {
     width: calc(91.6666666667% - 10px);
   }
-  .layout.grid.gap .lg-col-12-12 {
+  .layout.grid.gap .widescreen-col-12-12 {
     width: calc(100% - 10px);
   }
 }
 
+.visible-phone, .visible-tablet, .visible-desktop, .visible-widescreen {
+  display: none !important;
+}
+
+.hidden-phone, .hidden-tablet, .hidden-desktop, .hidden-widescreen {
+  display: block !important;
+}
+
+.hidden-flex-phone, .hidden-flex-tablet, .hidden-flex-desktop, 
.hidden-flex-widescreen {
+  display: flex !important;
+}
+
 .jewel.list, .jewel.navigation {
   align-items: stretch;
   align-content: flex-start;
diff --git a/frameworks/projects/Jewel/src/main/sass/_mixins.sass 
b/frameworks/projects/Jewel/src/main/sass/_mixins.sass
index 430bd51..f5bb271 100644
--- a/frameworks/projects/Jewel/src/main/sass/_mixins.sass
+++ b/frameworks/projects/Jewel/src/main/sass/_mixins.sass
@@ -24,8 +24,10 @@
        -ms-appearance: $val
        appearance: $val
 
-//=trans($val...)
-//     -webkit-transition: $val
-//     -moz-transition: $val
-//     -o-transition: $val
-//     transition: $val
\ No newline at end of file
+// VISIBLE / HIDDEN responive rules
+=visible-classes($size)
+       .visible-#{$size}
+               display: flex !important
+
+       .hidden-#{$size}
+               display: none !important
diff --git a/frameworks/projects/Jewel/src/main/sass/_variables.sass 
b/frameworks/projects/Jewel/src/main/sass/_variables.sass
index a1e88af..e3b8259 100644
--- a/frameworks/projects/Jewel/src/main/sass/_variables.sass
+++ b/frameworks/projects/Jewel/src/main/sass/_variables.sass
@@ -21,4 +21,24 @@
 $phone: 0px
 $tablet: 768px
 $desktop: 992px
-$widescreen: 1200px
\ No newline at end of file
+$widescreen: 1200px
+
+$devices: (phone: $phone, tablet: $tablet) !default
+$computers: (desktop: $desktop, widescreen: $widescreen) !default
+$sizes: map-merge($devices, $computers)
+$size-names: map-keys($sizes)
+
+// VIISBLE rules for responsive 
+$visible-sizes: ()
+@each $size in $size-names
+       $visible-sizes: append($visible-sizes, ".visible-#{$size}", comma)
+
+// HIDDEN rules for responsive 
+$hidden-sizes: ()
+@each $size in $size-names
+       $hidden-sizes: append($hidden-sizes, ".hidden-#{$size}", comma)
+
+// HIDDEN FLEX rules for responsive 
+$hidden-flex-sizes: ()
+@each $size in $size-names
+       $hidden-flex-sizes: append($hidden-flex-sizes, ".hidden-flex-#{$size}", 
comma)
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_layout.sass 
b/frameworks/projects/Jewel/src/main/sass/components/_layout.sass
index f9094a0..cef8518 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_layout.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_layout.sass
@@ -87,12 +87,6 @@ $gap: 0px
 $grid-columns: 12 !default
 $gap-size: 10px !default
 
-
-$devices: (phone: $phone, tablet: $tablet) !default
-$computers: (desktop: $desktop, lg: $widescreen) !default
-$sizes: map-merge($devices, $computers)
-$size-names: map-keys($sizes)
-
 .layout.grid
        flex-flow: row wrap
        align-items: stretch
@@ -111,7 +105,16 @@ $size-names: map-keys($sizes)
                                @for $j from 1 through $i
                                        .#{$size}-col-#{$j}-#{$i}
                                                width: percentage($j / $i)
-       
+                                               
+               @if index($size-names, $size) == 1
+                       @media (max-width: nth(nth($sizes, 2), 2) - 1)
+                               +visible-classes($size)
+               @else if index($size-names, $size) != 1 and index($size-names, 
$size) < length($sizes)
+                       @media (min-width: map-get($sizes, $size)) and 
(max-width: nth(nth($sizes, index($size-names, $size) + 1), 2) - 1)
+                               +visible-classes($size)
+               @else if index($size-names, $size) == length($sizes)
+                       @media (min-width: nth(nth($sizes, length($sizes)), 2))
+                               +visible-classes($size)
        &.gap   
                > *
                        margin: $gap-size / 2
@@ -121,30 +124,13 @@ $size-names: map-keys($sizes)
                                        @for $j from 1 through $i
                                                .#{$size}-col-#{$j}-#{$i}
                                                        width: 
calc(#{percentage($j / $i)} - #{$gap-size})
-                                                       
-               
-       // // Visible classes
-       // =visible-classes($size)
-       // .visible-#{$size}
-       // display: block !important
-
-       // .frow.visible-#{$size}
-       // display: flex !important
-
-       // .hidden-#{$size},
-       // .frow.hidden-#{$size}
-       // display: none !important
 
-       // // Reponsive flex direction classes
-       // =flex-directions($size)
-       // .direction-row-#{$size}
-       // flex-direction: row
+#{$visible-sizes}
+       display: none !important
 
-       // .direction-reverse-#{$size}
-       // flex-direction: row-reverse
+#{$hidden-sizes}
+       display: block !important
 
-       // .direction-column-#{$size}
-       // flex-direction: column
+#{$hidden-flex-sizes}
+       display: flex !important
 
-       // .direction-column-reverse-#{$size}
-       // flex-direction: column-reverse
\ No newline at end of file

Reply via email to