Subnav responsivity

patternlab-config.json

-{
-  "paths" : {
-    "source" : {
-      "root": "./source/",
-      "patterns" : "./source/_patterns/",
-      "data" : "./source/_data/",
-      "meta": "./source/_meta/",
-      "annotations" : "./source/_annotations/",
-      "styleguide" : "./node_modules/styleguidekit-assets-default/dist/",
-      "patternlabFiles" : "./node_modules/styleguidekit-mustache-default/views/",
-      "js" : "./source/js",
-      "images" : "./source/images",
-      "fonts" : "./source/fonts",
-      "css" : "./source/css/"
-    },
-    "public" : {
-      "root" : "./public/",
-      "patterns" : "./public/patterns/",
-      "data" : "./public/styleguide/data/",
-      "annotations" : "./public/annotations/",
-      "styleguide" : "./public/styleguide/",
-      "js" : "./public/js",
-      "images" : "./public/images",
-      "fonts" : "./public/fonts",
-      "css" : "./public/css"
-    }
-  },
-  "styleGuideExcludes": [
-  ],
-  "defaultPattern": "all",
-  "defaultShowPatternInfo": false,
-  "cleanPublic" : true,
-  "patternExtension": "mustache",
-  "ignored-extensions" : ["scss", "DS_Store", "less"],
-  "ignored-directories" : ["scss"],
-  "debug": false,
-  "ishControlsHide": {
-    "s": false,
-    "m": false,
-    "l": false,
-    "full": false,
-    "random": false,
-    "disco": false,
-    "hay": true,
-    "mqs": false,
-    "find": false,
-    "views-all": false,
-    "views-annotations": false,
-    "views-code": false,
-    "views-new": false,
-    "tools-all": false,
-    "tools-docs": false
-  },
-  "ishMinimum": "240",
-  "ishMaximum": "2600",
-  "patternStateCascade": ["inprogress", "inreview", "complete"],
-  "patternStates": {
-  },
-  "patternExportPatternPartials": [],
-  "patternExportDirectory": "./pattern_exports/",
-  "cacheBust": true,
-  "starterkitSubDir": "dist",
-  "outputFileSuffixes": {
-    "rendered": ".rendered",
-    "rawTemplate": "",
-    "markupOnly": ".markup-only"
-  },
-  "cleanOutputHtml": true
-}
+{
+  "paths" : {
+    "source" : {
+      "root": "./source/",
+      "patterns" : "./source/_patterns/",
+      "data" : "./source/_data/",
+      "meta": "./source/_meta/",
+      "annotations" : "./source/_annotations/",
+      "styleguide" : "./node_modules/styleguidekit-assets-default/dist/",
+      "patternlabFiles" : "./node_modules/styleguidekit-mustache-default/views/",
+      "js" : "./source/js",
+      "images" : "./source/images",
+      "fonts" : "./source/fonts",
+      "css" : "./source/css/"
+    },
+    "public" : {
+      "root" : "./public/",
+      "patterns" : "./public/patterns/",
+      "data" : "./public/styleguide/data/",
+      "annotations" : "./public/annotations/",
+      "styleguide" : "./public/styleguide/",
+      "js" : "./public/js",
+      "images" : "./public/images",
+      "fonts" : "./public/fonts",
+      "css" : "./public/css"
+    }
+  },
+  "styleGuideExcludes": [
+  ],
+  "defaultPattern": "all",
+  "defaultShowPatternInfo": false,
+  "cleanPublic" : true,
+  "patternExtension": "mustache",
+  "ignored-extensions" : ["scss", "DS_Store", "less"],
+  "ignored-directories" : ["scss"],
+  "debug": false,
+  "ishControlsHide": {
+    "s": false,
+    "m": false,
+    "l": false,
+    "full": false,
+    "random": false,
+    "disco": false,
+    "hay": true,
+    "mqs": false,
+    "find": false,
+    "views-all": false,
+    "views-annotations": false,
+    "views-code": false,
+    "views-new": false,
+    "tools-all": false,
+    "tools-docs": false
+  },
+  "ishMinimum": "360",
+  "ishMaximum": "2600",
+  "ishViewportRange": {
+    "s": [360, 576],
+    "m": [577, 768],
+    "l": [769, 2600]
+  },
+  "patternStateCascade": ["inprogress", "inreview", "complete"],
+  "patternStates": {
+  },
+  "patternExportPatternPartials": [],
+  "patternExportDirectory": "./pattern_exports/",
+  "cacheBust": true,
+  "starterkitSubDir": "dist",
+  "outputFileSuffixes": {
+    "rendered": ".rendered",
+    "rawTemplate": "",
+    "markupOnly": ".markup-only"
+  },
+  "cleanOutputHtml": true
+}

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;
 }