Subnav responsivity

patternlab-config.json

@@ -51,8 +51,13 @@
     "tools-all": false,
     "tools-docs": false
   },
-  "ishMinimum": "240",
+  "ishMinimum": "360",
   "ishMaximum": "2600",
+  "ishViewportRange": {
+    "s": [360, 576],
+    "m": [577, 768],
+    "l": [769, 2600]
+  },
   "patternStateCascade": ["inprogress", "inreview", "complete"],
   "patternStates": {
   },

source/_patterns/02-organisms/00-global/subnav.mustache

@@ -8,14 +8,26 @@
         </div>
       </button>
 
-      {{> atoms-overlay-button(cta: "Krajský kalendář", baseColor: "btn--grey-500", overlayColor: "btn--overlay-red-100", classes: "btn--condensed text-sm", icon: "fas fa-calendar-alt") }}
-      <a href="#" class="btn text-sm max-w-full">
+      <button class="btn btn--inline-icon btn--condensed btn--overlay btn--grey-500 btn--overlay-red-100 text-sm">
+        <div class="btn__body">
+          <i class="btn__inline-icon fas fa-calendar-alt mr-0 md:mr-1"></i>
+          <span class="hidden md:block">Krajský kalendář</span>
+        </div>
+      </button>
+
+      <a href="#" class="btn text-sm max-w-full hidden lg:block">
         <div class="btn__body bg-grey-800 text-grey-200 flex divide-x">
           <span class="pr-2">{{ event.title }}</span>
           <span class="pl-2">{{ event.date }}</span>
         </div>
       </a>
-      {{> atoms-overlay-button(cta: "Pardubický kraj", baseColor: "btn--grey-500", overlayColor: "btn--overlay-brands-facebook", classes: "ml-1 btn--condensed text-sm", icon: "fab fa-facebook-f") }}
+
+      <button class="btn btn--inline-icon btn--condensed btn--overlay btn--grey-500 btn--overlay-brands-facebook text-sm ml-1">
+        <div class="btn__body">
+          <i class="btn__inline-icon fab fa-facebook-f mr-0 md:mr-1"></i>
+          <span class="hidden md:block">Pardubický kraj</span>
+        </div>
+      </button>
     </div>
   </div>
 </div>

source/css/atoms/button.pcss

@@ -56,7 +56,7 @@
   }
 }
 
-.btn.btn--inline-icon .btn__inline-icon {
+.btn__inline-icon {
   @apply mr-1;
 }