testio-tailwind 0.1.0

package/src/pages/examples/layout-form-sidebar-actionbar-metasidebar.haml

@@ -0,0 +1,313 @@
+---
+layout: page-example.njk
+title: "Form layout with sidebar, metasidebar and actionbar"
+tags: "examples"
+---
+
+%nav.sidebar{arialabel:'Sidebar'}
+  %a.navlink.active{href:'#'}
+    %span.navlink-badge.icon.icon-home
+    Navlink active
+  %a.navlink{href:'#'}
+    %span.navlink-badge.icon.icon-bug
+    Navlink
+  %details
+    %summary.navlink-container
+      .navlink
+        %span.navlink-badge.icon.icon-product
+        Navlink collapsable
+    %a.navlink{href:'#'}
+      %span.navlink-badge.icon.icon-test
+      Navlink children
+    %a.navlink{href:'#'}
+      %span.navlink-badge.icon.icon-test
+      Navlink children
+    %a.navlink{href:'#'}
+      %span.navlink-badge.icon.icon-test
+      Navlink children
+    %a.navlink{href:'#'}
+      %span.navlink-badge.icon.icon-test
+      Navlink children
+  %a.navlink{href:'#'}
+    %span.navlink-badge.icon.icon-bug-reproduction
+    Navlink with a long title to see how things are breaking into several lines and don't cause a broken layout
+%form.form-page-wrapper
+  .main-content
+    %h1.mb-heading Form layout with sidebar, metasidebar and actionbar
+    %section.section
+      .grid.gap-1px.p-xs.bg-gray-lightest.rounded
+        %p .app-body
+        .p-xs.pl-md.bg-petrol-dark.text-white.rounded-top .header
+        .grid.grid-cols-2-auto-fr.gap-1px
+          .bg-petrol-dark.text-white.p-xs.pl-md.w-sidebar.rounded-bl nav.sidebar
+          .grid.grid-cols-2-fr-auto.gap-1px
+            %div
+              .grid.grid-cols-2-fr-auto
+                .bg-white.p-md
+                  %p form.form-page-wrapper
+                  .bg-gray.text-white.p-xs main.main-content
+                  .bg-petrol.text-white.p-xs footer.actionbar
+                .bg-gray-lighter.p-xs.pl-md.w-metasidebar aside.metasidebar
+              .bg-info.text-white.p-xs.pl-md.rounded-br .chat-container
+      %section.section
+        %h5.mb-heading HTML structure
+        %code
+          &#60body class=&quotapp-body&quot&#62
+          %br
+          .ml-md &#60header class=&quotheader&quot&#62
+          .ml-md &#60nav class=&quotsidebar&quot&#62
+          .ml-md &#60form class=&quotform-page-wrapper&quot&#62
+          .ml-lg &#60main class=&quotmain-content&quot&#62
+          .ml-lg &#60footer class=&quotactionbar&quot&#62
+          .ml-md &#60aside class=&quotmetasidebar&quot&#62
+          .ml-md &#60div class=&quotchat-container&quot&#62
+          &#60/body&#62
+      %section.section
+        %h2.mb-heading Dummy Content
+        %p Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur
+        %p Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur
+        %p Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur
+        %p Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur
+        %p Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur
+  %footer.actionbar
+    %input.btn.btn-default.btn-primary{type:"submit", value:"Submit"}
+    %button.btn.btn-default.btn-secondary
+      %span.icon.icon-check-circle-filled.mr-icon-spacing
+      Secondary action
+    %button.btn-intercom
+      .icon.icon-intercom
+%aside.metasidebar
+  %details.metasidebar-wrapper{open:"true"}
+    %summary.metasidebar-btn
+    .metasidebar-content
+      %h2.metasidebar-title Metasidebar title
+      %p Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur
+      %h3.metasidebar-subheading Metasidebar subheading
+      %p Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur
+      %p Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur
+      %p Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur
+      %p Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur
+.chat-container
+  %details.chat-window
+    %summary.chat-window-header
+      .chat-message-counter 999
+      %a{href:""} #123321
+      .chat-title Chat title
+      %button.btn.btn-xs.btn-ghost-inverted.btn-square
+        .icon.icon-xs.icon-cross
+    .list-chat-messages
+      .chat-message-item
+        %details.dropdown-actions.chat-avatar
+          %summary
+            .user-item.linked
+              %img{src:"/assets/images/placeholders/profile_supergirl.png"}
+          .popover-menu
+            %a.popover-action{href:'#'}
+              %span.icon.icon-user-story-test
+              Tester profile
+            %a.popover-action{href:'#'}
+              %span.icon.icon-review-exclamation
+              Report tester
+        .chat-header
+          %span 2 hours by 
+          %span.chat-author Message sender
+        .chat-message
+          Here's a short message.
+        .chat-actions
+          .btn
+            .icon.icon-heart
+      .chat-message-item
+        %details.dropdown-actions.chat-avatar
+          %summary
+            .user-item.linked
+              %img{src:"/assets/images/placeholders/profile_supergirl.png"}
+          .popover-menu
+            %a.popover-action{href:'#'}
+              %span.icon.icon-user-story-test
+              Tester profile
+            %a.popover-action{href:'#'}
+              %span.icon.icon-review-exclamation
+              Report tester
+        .chat-header
+          %span 2 hours by 
+          %span.chat-author Message sender with a much much longer name
+        .chat-message
+          Here's a short message which you liked.
+          .chat-message-addons
+            %details.popover-wrapper.dropup
+              %summary.btn
+                .icon.icon-heart-filled
+                1
+              .popover-menu.info
+                .popover-title 1 person likes this
+                .popover-content You
+        .chat-actions
+          .btn
+            .icon.icon-heart-filled
+      .chat-message-item
+        %details.dropdown-actions.chat-avatar
+          %summary
+            .user-item.linked
+              %img{src:"/assets/images/placeholders/profile_supergirl.png"}
+          .popover-menu
+            %a.popover-action{href:'#'}
+              %span.icon.icon-user-story-test
+              Tester profile
+            %a.popover-action{href:'#'}
+              %span.icon.icon-review-exclamation
+              Report tester
+        .chat-header
+          %span 2 hours by 
+          %span.chat-author Message sender
+        .chat-message
+          Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
+          .chat-message-addons
+            %details.popover-wrapper.dropup
+              %summary.btn
+                .icon.icon-heart-filled
+                10
+              .popover-menu.info
+                .popover-title 10 people like this
+                .popover-content Stephany77, HannaTester77, WonderTester, MerryJerryBerry, SuperTester3000, SomeTester, Torry444, UliaUsachova, TesterNumber9, TesterNumber10
+            %details.popover-wrapper.dropup
+              %summary.btn
+                .icon.icon-verify-check
+                TL
+              .popover-menu.info
+                .popover-title Verified by Team Leader
+                .popover-content Team Leader name
+        .chat-actions
+          %details.dropdown-actions.chat-message-actions
+            %summary
+              .btn
+                .icon.icon-more
+            .popover-menu
+              %a.popover-action{href:'#'}
+                %span.icon.icon-pencil
+                Action
+              %a.popover-action{href:'#'}
+                %span.icon.icon-remove
+                Action
+      .chat-message-item
+        %details.dropdown-actions.chat-avatar
+          %summary
+            .user-item.linked
+              %img{src:"/assets/images/placeholders/profile_supergirl.png"}
+          .popover-menu
+            %a.popover-action{href:'#'}
+              %span.icon.icon-user-story-test
+              Tester profile
+            %a.popover-action{href:'#'}
+              %span.icon.icon-review-exclamation
+              Report tester
+        .chat-header
+          %span 2 hours by 
+          %span.chat-author Message sender with a much much longer name
+        .chat-message
+          Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+        .chat-actions
+          %details.dropdown-actions.chat-message-actions
+            %summary
+              .btn
+                .icon.icon-more
+            .popover-menu
+              %a.popover-action{href:'#'}
+                %span.icon.icon-pencil
+                Action
+              %a.popover-action{href:'#'}
+                %span.icon.icon-remove
+                Action
+      .chat-message-item.your-message
+        %img.chat-avatar{src:"/assets/images/placeholders/profile_supergirl.png"}
+        .chat-header
+          %span 2 hours by 
+          %span.chat-author You
+        .chat-message
+          Your short chat message with no lorem ipsum.
+        .chat-actions
+          %details.dropdown-actions.chat-message-actions
+            %summary
+              .btn
+                .icon.icon-more
+            .popover-menu
+              %a.popover-action{href:'#'}
+                %span.icon.icon-pencil
+                Action
+              %a.popover-action{href:'#'}
+                %span.icon.icon-remove
+                Action
+      .chat-message-item.your-message
+        %img.chat-avatar{src:"/assets/images/placeholders/profile_supergirl.png"}
+        .chat-header
+          %span 2 hours by 
+          %span.chat-author You
+        .chat-message
+          Another message by you with a lot ofLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+          .chat-message-addons
+            %details.popover-wrapper.dropup
+              %summary.btn
+                .icon.icon-heart-filled
+                10
+              .popover-menu.info
+                .popover-title 10 people like this
+                .popover-content Stephany77, HannaTester77, WonderTester, MerryJerryBerry, SuperTester3000, SomeTester, Torry444, UliaUsachova, TesterNumber9, TesterNumber10
+            %details.popover-wrapper.dropup
+              %summary.btn
+                .icon.icon-verify-check
+                TL
+              .popover-menu.info
+                .popover-title Verified by Team Leader
+                .popover-content Team Leader name
+      .chat-message-item.announcement
+        %img.chat-avatar{src:"/assets/images/placeholders/profile_supergirl.png"}
+        .chat-header
+          %span 2 hours by 
+          %span.chat-author Team Leader
+        .chat-message
+          .message-banner.announcement Announcement
+          %span.text-mentioned @All
+          here's an announcement with a lot of Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
+          .chat-message-addons
+            %a.btn{href:""} Show in chat
+            %details.popover-wrapper.dropup
+              %summary.btn
+                .icon.icon-heart-filled
+                10
+              .popover-menu.info
+                .popover-title 10 people like this
+                .popover-content Stephany77, HannaTester77, WonderTester, MerryJerryBerry, SuperTester3000, SomeTester, Torry444, UliaUsachova, TesterNumber9, TesterNumber10
+            %details.popover-wrapper.dropup
+              %summary.btn
+                .icon.icon-verify-check
+                TL
+              .popover-menu.info
+                .popover-title Verified by Team Leader
+                .popover-content Team Leader name
+      .chat-message-item
+        %img.chat-avatar{src:"/assets/images/placeholders/profile_supergirl.png"}
+        .chat-header
+          %span 2 hours by 
+          %span.chat-author Team Leader
+        .chat-message
+          .message-banner.mentioned You were mentioned
+          %span.text-mentioned @You
+          here's an announcement with a lot of Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore.
+          .chat-message-addons
+            %details.popover-wrapper.dropup
+              %summary.btn
+                .icon.icon-heart-filled
+                10
+              .popover-menu.info
+                .popover-title 10 people like this
+                .popover-content Stephany77, HannaTester77, WonderTester, MerryJerryBerry, SuperTester3000, SomeTester, Torry444, UliaUsachova, TesterNumber9, TesterNumber10
+            %details.popover-wrapper.dropup
+              %summary.btn
+                .icon.icon-verify-check
+                TL
+              .popover-menu.info
+                .popover-title Verified by Team Leader
+                .popover-content Team Leader name
+    %form.chat-window-actions
+      %textarea.form-control{rows:'1', placeholder:"Enter your message"}
+      .btn.btn-sm.btn-square.btn-primary.btn-send-message
+        %input{type:"submit", value:""}

package/src/pages/examples/layout-manager.haml

@@ -0,0 +1,99 @@
+---
+layout: page-example-manager.njk
+title: "Layout Team Leader UI"
+tags: "examples"
+---
+
+%nav.sidebar.manager.ds-removethisclass-flex{arialabel:'Sidebar'}
+  %a.navlink.active{href:'#'}
+    %span.icon.icon-home
+    Navlink active
+  %a.navlink{href:'#'}
+    %span.icon.icon-bug
+    Navlink
+  %details
+    %summary.navlink
+      %span.icon.icon-product
+      Collapsable
+    %a.navlink{href:'#'}
+      %span.icon.icon-test
+      Navlink child
+    %a.navlink{href:'#'}
+      %span.icon.icon-test
+      Navlink child
+    %a.navlink{href:'#'}
+      %span.icon.icon-test
+      Navlink child
+    %a.navlink.active{href:'#'}
+      %span.icon.icon-test
+      Active child
+  %a.navlink{href:'#'}
+    %span.icon.icon-bug-reproduction
+    Navlink with a long title to see how things are breaking into several lines and don't cause a broken layout
+  .sidebar-divider
+  %a.navlink{href:'#'}
+    %span.icon.icon-check-circle-filled
+    Navlink
+  %a.navlink{href:'#'}
+    %span.icon.icon-check-circle-filled
+    Navlink
+  %a.navlink{href:'#'}
+    %span.icon.icon-check-circle-filled
+    Navlink
+  .sidebar-label Sidebar-label
+  %a.navlink{href:'#'}
+    %span.icon.icon-check-circle-filled
+    Navlink
+  %a.navlink{href:'#'} Navlink without icon
+
+%main.main-content.main-content-padding
+  %h1.mb-heading Layout Team Leader UI
+  %section.section
+    .grid.gap-1px.p-xs.bg-gray-lightest.rounded
+      %p .app-body
+      .p-xs.pl-md.bg-gray-light.rounded-top .header.teamleader
+      .grid.grid-cols-2-auto-fr.gap-1px
+        .bg-gray-light.p-xs.pl-md.w-sidebar.rounded-bl nav.sidebar.teamleader
+        .grid.gap-1px
+          .grid.grid-cols-2-fr-auto
+            .bg-white.p-xs.pl-md.h-xxl .main-content
+            .bg-gray-lighter.p-xs.pl-md.w-metasidebar aside.metasidebar
+          .bg-petrol.text-white.p-xs.pl-md.rounded-br footer.actionbar
+    %h5.mt-md HTML structure
+    %code
+      &#60body class=&quotapp-body&quot&#62
+      %br
+      .ml-md &#60header class=&quotheader teamleader&quot&#62
+      .ml-md &#60nav class=&quotsidebar teamleader&quot&#62
+      .ml-md &#60header class=&quottest-header teamleader&quot&#62
+      .ml-md &#60main class=&quotmain-content&quot&#62
+      .ml-md &#60aside class=&quotmetasidebar&quot&#62
+      .ml-md &#60footer class=&quotactionbar&quot&#62
+      &#60/body&quot&#62
+  %section.section
+    %h2.mb-heading Dummy Content
+    %p Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur
+    %p Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur
+    %p Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur
+    %p Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur
+    %p Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur
+%aside.metasidebar
+  %details.metasidebar-wrapper{open:"true"}
+    %summary.metasidebar-btn
+    .metasidebar-content
+      %h2.metasidebar-title Metasidebar title
+      %p Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur
+      %h3.metasidebar-subheading Metasidebar subheading
+      %p Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur
+      %p Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur
+      %p Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur
+      %p Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur
+%footer.actionbar
+  %button.btn.btn-default.btn-primary
+    %span.icon.icon-check-circle-filled.mr-icon-spacing
+    Primary action
+  %button.btn.btn-default.btn-secondary
+    %span.icon.icon-check-circle-filled.mr-icon-spacing
+    Secondary action
+  %button.btn-intercom
+    %span.icon.icon-intercom