testio-tailwind 0.1.0

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

@@ -0,0 +1,327 @@
+---
+layout: page-example-tester.njk
+title: "Layout chat page"
+tags: "examples"
+---
+
+%nav.sidebar.tester{arialabel:'Sidebar'}
+  .profilepicture-wrapper
+    %details.profilepicture-actions
+      %summary
+        %img.testerlevel-medal{src:'/assets/images/testerlevel-medals/medal_testerlevel_1_md.png', alt:''}
+        %img.profilepicture{src:'/assets/images/placeholders/profile_supergirl.png', alt:''}
+      .popover-menu
+        %a.popover-action{href:'#'}
+          %span.icon.text-icon-default.icon-cloud-upload.mr-icon-spacing
+          Upload picture
+        %a.popover-action{href:'#'}
+          %span.icon.text-icon-default.icon-remove.mr-icon-spacing
+          Remove picture
+  .sidebar-title Anja Berger
+  .navlinks
+    %a.navlink.active{href:'#'}
+      %span.icon.icon-home
+      Navlink active
+    %a.navlink{href:'#'}
+      %span.icon.icon-ranking
+      Ranking
+    %a.navlink{href:'#'}
+      .icon-wrapper
+        %span.icon.icon-test
+        %span.icon.icon-circle-sm-filled.recording-icon
+      .text-wrapper
+        .div #123321 Customer
+        .label-sm Test Session active 00:15
+  .banner-install-testnow
+    Install testNow
+    %a.icon.icon-apple.ml-auto{href:'#'}
+    %a.icon.icon-android.ml-xs{href:'#'}
+%header.test-header.tester
+  %h1.test-title Customer name
+  .test-progress-wrapper
+    .meta-info #123321 | Focused Test | Ends in 8 hours
+    %progress.test-progress{value:"32", max:"100"} 32%
+  .test-actions
+    %a.btn.btn-recording{href:""}
+      .icon.icon-circle-filled
+  %nav.nav-tabs
+    .navlink.active{href:""} Navlink active
+    .navlink{href:""} Navlink
+    .navlink{href:""} Navlink
+    .navlink{href:""}
+      Counter
+      .counter 99
+    .navlink.disabled{href:""} Disabled
+%main.main-content.main-content-padding
+  %h1.mb-heading Layout chat page
+  %section.section
+    %section
+      .section-header
+        %h2.section-title Announcements
+      .list-chat-messages
+        .chat-message-item.announcement
+          %img.chat-avatar{src:"/assets/images/placeholders/profile_supergirl.png"}
+          .chat-header
+            2 hours by 
+            .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:"#chat-announcement"} 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
+  %section.section
+    .section-header
+      %h2.section-title Messages
+    .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
+          2 hours by 
+          .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
+          2 hours by 
+          .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
+          2 hours by 
+          .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
+          2 hours by 
+          .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
+          2 hours by 
+          .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-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.announcement#chat-announcement
+        %img.chat-avatar{src:"/assets/images/placeholders/profile_supergirl.png"}
+        .chat-header
+          2 hours by 
+          .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
+            %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
+          2 hours by 
+          .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.floating-chatinput
+    %textarea.form-control{rows:'1', placeholder:"Enter your chat message here"}
+    .btn.btn-primary.btn-square.btn-sendmessage{type:'submit', value:'Input btn'}
+      .icon.icon-sendmessage
+%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

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

@@ -0,0 +1,190 @@
+---
+layout: page-example-customer.njk
+title: "Layout Customer UI"
+tags: "examples"
+---
+
+%nav.sidebar.customer.ds-removethisclass-flex{arialabel:'Sidebar'}
+  .profilepicture-wrapper
+    %details.profilepicture-actions
+      %summary
+        %img.profilepicture{src:'/assets/images/logo-testio/testio_symbol_purpleteal_square.png', alt:''}
+      .popover-menu
+        %a.popover-action{href:'#'}
+          %span.icon.text-icon-default.icon-cloud-upload.mr-icon-spacing
+          Upload picture
+        %a.popover-action{href:'#'}
+          %span.icon.text-icon-default.icon-remove.mr-icon-spacing
+          Remove picture
+  .sidebar-title Purple IO
+  .navlinks
+    %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
+        Collapse
+      %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
+    %details.marked-collapse.purple
+      %summary.navlink
+        %span.icon.icon-product
+        Collapse purple
+      %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
+    %details.marked-collapse.orange
+      %summary.navlink
+        %span.icon.icon-product
+        Collapse orange
+      %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
+    %details.marked-collapse.yellow
+      %summary.navlink
+        %span.icon.icon-product
+        Collapse yellow
+      %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
+    %details.marked-collapse.red-light
+      %summary.navlink
+        %span.icon.icon-product
+        Collapse red-light
+      %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
+    %details.marked-collapse.pink
+      %summary.navlink
+        %span.icon.icon-product
+        Collapse pink
+      %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
+    %details.marked-collapse.blue
+      %summary.navlink
+        %span.icon.icon-product
+        Collapse blue
+      %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
+
+%main.main-content.main-content-padding
+  %h1.mb-heading Layout Customer UI
+  %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.customer
+      .grid.grid-cols-2-auto-fr.gap-1px
+        .bg-petrol-dark.text-white.p-xs.pl-md.w-sidebar.rounded-bl nav.sidebar.customer
+        .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 customer&quot&#62
+      .ml-md &#60nav class=&quotsidebar customer&quot&#62
+      .ml-md &#60header class=&quottest-header customer&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