testio-tailwind 0.2.0 → 0.2.2

package/src/pages/components/listitems_nested.haml

@@ -1,50 +1,50 @@
----
-tags: components
-title: List items nested
----
-
-.list-listitems
-  %details.listitem
-    %summary.listitem-header
-      .listitem-badge.success
-        .counter 99
-      .listitem-title List item collapsable with nested list items inside
-      .listitem-metrics
-        .listitem-metric
-          .icon.icon-testcase-bug
-          99
-      .listitem-actions
-        .btn.collapse-btn
-    .listitem-content
-      .listitem-subheadline Step description
-      .listitem-card
-        %p Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. 
-      .listitem-subheadline Bugs
-      %details.listitem
-        %summary.listitem-header
-          .listitem-badge
-            .icon.icon-testcase-bug
-          .listitem-title A nested List item collapsable with cards
-          .listitem-actions
-            .btn.collapse-btn
-        .listitem-content
-          .listitem-subheadline Listitem-card
-          .listitem-card
-            %p Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. 
-          .listitem-subheadline Listitem-card
-          .listitem-card
-            %p Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. 
-      %details.listitem
-        %summary.listitem-header
-          .listitem-badge
-            .icon.icon-testcase-bug
-          .listitem-title A nested listitem with bug content
-          .listitem-actions
-            .btn.collapse-btn
-        .listitem-content
-          .listitem-subheadline Listitem-card
-          .listitem-card
-            %p Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. 
-          .listitem-subheadline Listitem-card
-          .listitem-card
-            %p Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. 
+---
+tags: components
+title: List items nested
+---
+
+.list-listitems
+  %details.listitem
+    %summary.listitem-header
+      .listitem-badge.success
+        .counter 99
+      .listitem-title List item collapsable with nested list items inside
+      .listitem-metrics
+        .listitem-metric
+          .icon.icon-testcase-bug
+          99
+      .listitem-actions
+        .btn.collapse-btn
+    .listitem-content
+      .listitem-subheadline Step description
+      .listitem-card
+        %p Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. 
+      .listitem-subheadline Bugs
+      %details.listitem
+        %summary.listitem-header
+          .listitem-badge
+            .icon.icon-testcase-bug
+          .listitem-title A nested List item collapsable with cards
+          .listitem-actions
+            .btn.collapse-btn
+        .listitem-content
+          .listitem-subheadline Listitem-card
+          .listitem-card
+            %p Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. 
+          .listitem-subheadline Listitem-card
+          .listitem-card
+            %p Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. 
+      %details.listitem
+        %summary.listitem-header
+          .listitem-badge
+            .icon.icon-testcase-bug
+          .listitem-title A nested listitem with bug content
+          .listitem-actions
+            .btn.collapse-btn
+        .listitem-content
+          .listitem-subheadline Listitem-card
+          .listitem-card
+            %p Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. 
+          .listitem-subheadline Listitem-card
+          .listitem-card
+            %p Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. 

package/src/pages/components/listitems_selectable.haml

@@ -1,59 +1,59 @@
----
-tags: components
-title: List item selectable
----
-
-.list-listitems
-  .listitem
-    .listitem-check
-      %input#itemcheck1{type:"checkbox", checked:"true"}
-      %label{for:"itemcheck1"}
-    .listitem-title
-      List-item title
-      .listitem-label List-item Label
-    .listitem-metrics
-      .listitem-metric
-        .icon.icon-critical
-        99
-      .listitem-metric
-        .icon.icon-high
-        99
-      .listitem-metric
-        .icon.icon-low
-        99
-      .listitem-metric
-        .icon.icon-user-story
-        99/99
-
-.list-listitems
-  %details.listitem
-    %summary.listitem-header
-      .listitem-check
-        %input#itemcheck2{type:"checkbox", checked:"true"}
-        %label{for:"itemcheck2"}
-      .listitem-title
-        List item
-        .listitem-label collapsable
-      .listitem-metrics
-        .listitem-metric
-          .icon.icon-critical
-          99
-        .listitem-metric
-          .icon.icon-high
-          99
-        .listitem-metric
-          .icon.icon-low
-          99
-        .listitem-metric
-          .icon.icon-user-story
-          99/99
-      .listitem-actions
-        %a.btn.collapse-btn
-    .listitem-content
-      .listitem-subheadline Subheadline
-      .listitem-card
-        %p This is a listitem-card with some Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. 
-      .listitem-subheadline Subheadline
-      .listitem-card
-        %p Another listitem-card with some Lorem Ipsum and a nice placeholder image.
-        %img{src:"/assets/images/placeholders/security-jira-server.png"}
+---
+tags: components
+title: List item selectable
+---
+
+.list-listitems
+  .listitem
+    .listitem-check
+      %input#itemcheck1{type:"checkbox", checked:"true"}
+      %label{for:"itemcheck1"}
+    .listitem-title
+      List-item title
+      .listitem-label List-item Label
+    .listitem-metrics
+      .listitem-metric
+        .icon.icon-critical
+        99
+      .listitem-metric
+        .icon.icon-high
+        99
+      .listitem-metric
+        .icon.icon-low
+        99
+      .listitem-metric
+        .icon.icon-user-story
+        99/99
+
+.list-listitems
+  %details.listitem
+    %summary.listitem-header
+      .listitem-check
+        %input#itemcheck2{type:"checkbox", checked:"true"}
+        %label{for:"itemcheck2"}
+      .listitem-title
+        List item
+        .listitem-label collapsable
+      .listitem-metrics
+        .listitem-metric
+          .icon.icon-critical
+          99
+        .listitem-metric
+          .icon.icon-high
+          99
+        .listitem-metric
+          .icon.icon-low
+          99
+        .listitem-metric
+          .icon.icon-user-story
+          99/99
+      .listitem-actions
+        %a.btn.collapse-btn
+    .listitem-content
+      .listitem-subheadline Subheadline
+      .listitem-card
+        %p This is a listitem-card with some Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. 
+      .listitem-subheadline Subheadline
+      .listitem-card
+        %p Another listitem-card with some Lorem Ipsum and a nice placeholder image.
+        %img{src:"/assets/images/placeholders/security-jira-server.png"}

package/src/pages/components/listitems_white.haml

@@ -1,82 +1,82 @@
----
-tags: components
-title: List item white
----
-
-.list-listitems
-  .listitem.white
-    .listitem-title
-      List-item
-    .listitem-metrics
-      .listitem-metric
-        .icon.icon-critical
-        99
-  %details.listitem.white
-    %summary.listitem-header
-      .listitem-title List item collapsable
-      .listitem-metrics
-        .listitem-metric
-          .icon.icon-critical
-          99
-        .listitem-metric
-          .icon.icon-high
-          99
-        .listitem-metric
-          .icon.icon-low
-          99
-        .listitem-metric
-          .icon.icon-user-story
-          99/99
-      .listitem-actions
-        .btn.collapse-btn
-    .listitem-content
-      .listitem-subheadline Subheadline
-      .listitem-card
-        %p This is a listitem-card with some Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. 
-      .listitem-subheadline Subheadline
-      .listitem-card
-        %p Another listitem-card with some Lorem Ipsum and a nice placeholder image.
-        %img{src:"/assets/images/placeholders/security-jira-server.png"}
-  %details.listitem.white
-    %summary.listitem-header
-      .listitem-badge
-        .icon.icon-testcase-bug
-      .listitem-title List item collapsable
-      .listitem-metrics
-        .listitem-metric
-          .icon.icon-critical
-          99
-        .listitem-metric
-          .icon.icon-high
-          99
-        .listitem-metric
-          .icon.icon-low
-          99
-        .listitem-metric
-          .icon.icon-user-story
-          99/99
-      .listitem-actions
-        .btn.collapse-btn
-        %a.btn.btn-primary Action
-        %details.dropdown-actions.dropright
-          %summary
-            .btn.btn-primary.btn-square
-              %span.icon.text-icon-default.icon-more
-          .popover-menu
-            %a.popover-action
-              %span.icon.text-icon-default.icon-pencil
-              Edit
-            %a.popover-action
-              %span.icon.text-icon-default.icon-duplicate
-              Duplicate
-            %a.popover-action
-              %span.icon.text-icon-default.icon-remove
-              Delete
-    .listitem-content
-      .listitem-subheadline Subheadline
-      .listitem-card
-        %p This is a listitem-card with some Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. 
-      .listitem-subheadline Subheadline
-      .listitem-card
-        %p Another listitem-card with some Lorem Ipsum and a nice placeholder image.
-        %img{src:"/assets/images/placeholders/security-jira-server.png"}
+---
+tags: components
+title: List item white
+---
+
+.list-listitems
+  .listitem.white
+    .listitem-title
+      List-item
+    .listitem-metrics
+      .listitem-metric
+        .icon.icon-critical
+        99
+  %details.listitem.white
+    %summary.listitem-header
+      .listitem-title List item collapsable
+      .listitem-metrics
+        .listitem-metric
+          .icon.icon-critical
+          99
+        .listitem-metric
+          .icon.icon-high
+          99
+        .listitem-metric
+          .icon.icon-low
+          99
+        .listitem-metric
+          .icon.icon-user-story
+          99/99
+      .listitem-actions
+        .btn.collapse-btn
+    .listitem-content
+      .listitem-subheadline Subheadline
+      .listitem-card
+        %p This is a listitem-card with some Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. 
+      .listitem-subheadline Subheadline
+      .listitem-card
+        %p Another listitem-card with some Lorem Ipsum and a nice placeholder image.
+        %img{src:"/assets/images/placeholders/security-jira-server.png"}
+  %details.listitem.white
+    %summary.listitem-header
+      .listitem-badge
+        .icon.icon-testcase-bug
+      .listitem-title List item collapsable
+      .listitem-metrics
+        .listitem-metric
+          .icon.icon-critical
+          99
+        .listitem-metric
+          .icon.icon-high
+          99
+        .listitem-metric
+          .icon.icon-low
+          99
+        .listitem-metric
+          .icon.icon-user-story
+          99/99
+      .listitem-actions
+        .btn.collapse-btn
+        %a.btn.btn-primary Action
+        %details.dropdown-actions.dropright
+          %summary
+            .btn.btn-primary.btn-square
+              %span.icon.text-icon-default.icon-more
+          .popover-menu
+            %a.popover-action
+              %span.icon.text-icon-default.icon-pencil
+              Edit
+            %a.popover-action
+              %span.icon.text-icon-default.icon-duplicate
+              Duplicate
+            %a.popover-action
+              %span.icon.text-icon-default.icon-remove
+              Delete
+    .listitem-content
+      .listitem-subheadline Subheadline
+      .listitem-card
+        %p This is a listitem-card with some Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. 
+      .listitem-subheadline Subheadline
+      .listitem-card
+        %p Another listitem-card with some Lorem Ipsum and a nice placeholder image.
+        %img{src:"/assets/images/placeholders/security-jira-server.png"}

package/src/pages/components/loading_spinner.haml

@@ -1,11 +1,11 @@
----
-tags: components
-title: Loading spinner
----
-
-.testio-loader-wrapper.d-inline-block
-  %svg.testio-loader-i{viewbox:'0 0 50 50'}
-    %line.anim-bar.stroke{x1:'4px', y1:'5px', x2:'4px', y2:'45px'}
-  .testio-loader-o-wrapper
-    %svg.testio-loader-o{viewbox:'25 25 50 50'}
-      %circle.anim-circle.stroke{cx:'50', cy:'50', r:'20', fill:'none'}
+---
+tags: components
+title: Loading spinner
+---
+
+.testio-loader-wrapper.d-inline-block
+  %svg.testio-loader-i{viewbox:'0 0 50 50'}
+    %line.anim-bar.stroke{x1:'4px', y1:'5px', x2:'4px', y2:'45px'}
+  .testio-loader-o-wrapper
+    %svg.testio-loader-o{viewbox:'25 25 50 50'}
+      %circle.anim-circle.stroke{cx:'50', cy:'50', r:'20', fill:'none'}

package/src/pages/components/metasidebar.haml

@@ -1,13 +1,13 @@
----
-tags: components
-title: Metasidebar
----
-
-%aside.metasidebar
-  %details.metasidebar-wrapper{open:"true"}
-    %summary.metasidebar-btn
-    .metasidebar-content
-      %h2.metasidebar-title Metasidebar title
-      %p.mb-md Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam. Totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
-      %h3.metasidebar-subheading Metasidebar subheading
-      %p.mb-xs 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 vel illum qui dolorem eum fugiat quo voluptas nulla pariatur.
+---
+tags: components
+title: Metasidebar
+---
+
+%aside.metasidebar
+  %details.metasidebar-wrapper{open:"true"}
+    %summary.metasidebar-btn
+    .metasidebar-content
+      %h2.metasidebar-title Metasidebar title
+      %p.mb-md Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam. Totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
+      %h3.metasidebar-subheading Metasidebar subheading
+      %p.mb-xs 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 vel illum qui dolorem eum fugiat quo voluptas nulla pariatur.

package/src/pages/components/modal_details.haml

@@ -1,68 +1,68 @@
----
-tags: components
-title: Modal - based on details tag
----
-
-%p.mb-heading Add the class .modal-close-btn to an element to make it close it's parent modal.
-
-%details.modal-wrapper.mb-md
-  %summary.modal-trigger
-    .btn.btn-primary Open modal
-  .modal-container
-    .modal
-      .modal-header
-        %h2.modal-title Modal
-        .btn.btn-square.close-btn
-          .icon.icon-cross
-      .modal-content
-        %p.mb-xs Some cool modal content going on here: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
-        .form-grid
-          .form-group
-            %label.form-label Input
-            %input.form-control{type:'text', placeholder:''}
-      .modal-footer
-        %a.btn.btn-primary{href:''} Primary
-        %a.btn.btn-secondary{href:''} Secondary
-        %a.btn.btn-success{href:''} Success
-        %a.btn.btn-danger{href:''} Danger
-        %a.btn.btn-primary.disabled{href:''} Disabled
-        %a.btn.btn-secondary.close-btn{href:''} Close
-%details.modal-wrapper.mb-md
-  %summary.modal-trigger
-    .btn.btn-primary Open modal-lg
-  .modal-container
-    .modal.modal-lg
-      .modal-header
-        %h2.modal-title Modal
-        .btn.btn-square.close-btn
-          .icon.icon-cross
-      .modal-content
-        %p.mb-xs Some cool modal content going on here: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
-        .form-grid
-          .form-group
-            %label.form-label Input
-            %input.form-control{type:'text', placeholder:''}
-      .modal-footer
-        %a.btn.btn-primary{href:''} Primary
-        %a.btn.btn-secondary{href:''} Secondary
-        %a.btn.btn-success{href:''} Success
-        %a.btn.btn-danger{href:''} Danger
-        %a.btn.btn-primary.disabled{href:''} Disabled
-        %a.btn.btn-secondary.close-btn{href:''} Close
-%details.modal-wrapper
-  %summary.modal-trigger
-    .btn.btn-primary Open confirmation dialog
-  .modal-container
-    .modal.modal-sm
-      .modal-header
-        %h2.modal-title Modal
-        .btn.btn-square.close-btn
-          .icon.icon-cross
-      .modal-content
-        %p.mb-xs Some cool modal content going on here: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
-      .modal-footer
-        %a.btn.btn-success{href:''} Success
-        %a.btn.btn-danger{href:''} Danger
-        %a.btn.btn-secondary.close-btn{href:''} Close
-
-
+---
+tags: components
+title: Modal - based on details tag
+---
+
+%p.mb-heading Add the class .modal-close-btn to an element to make it close it's parent modal.
+
+%details.modal-wrapper.mb-md
+  %summary.modal-trigger
+    .btn.btn-primary Open modal
+  .modal-container
+    .modal
+      .modal-header
+        %h2.modal-title Modal
+        .btn.btn-square.close-btn
+          .icon.icon-cross
+      .modal-content
+        %p.mb-xs Some cool modal content going on here: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
+        .form-grid
+          .form-group
+            %label.form-label Input
+            %input.form-control{type:'text', placeholder:''}
+      .modal-footer
+        %a.btn.btn-primary{href:''} Primary
+        %a.btn.btn-secondary{href:''} Secondary
+        %a.btn.btn-success{href:''} Success
+        %a.btn.btn-danger{href:''} Danger
+        %a.btn.btn-primary.disabled{href:''} Disabled
+        %a.btn.btn-secondary.close-btn{href:''} Close
+%details.modal-wrapper.mb-md
+  %summary.modal-trigger
+    .btn.btn-primary Open modal-lg
+  .modal-container
+    .modal.modal-lg
+      .modal-header
+        %h2.modal-title Modal
+        .btn.btn-square.close-btn
+          .icon.icon-cross
+      .modal-content
+        %p.mb-xs Some cool modal content going on here: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
+        .form-grid
+          .form-group
+            %label.form-label Input
+            %input.form-control{type:'text', placeholder:''}
+      .modal-footer
+        %a.btn.btn-primary{href:''} Primary
+        %a.btn.btn-secondary{href:''} Secondary
+        %a.btn.btn-success{href:''} Success
+        %a.btn.btn-danger{href:''} Danger
+        %a.btn.btn-primary.disabled{href:''} Disabled
+        %a.btn.btn-secondary.close-btn{href:''} Close
+%details.modal-wrapper
+  %summary.modal-trigger
+    .btn.btn-primary Open confirmation dialog
+  .modal-container
+    .modal.modal-sm
+      .modal-header
+        %h2.modal-title Modal
+        .btn.btn-square.close-btn
+          .icon.icon-cross
+      .modal-content
+        %p.mb-xs Some cool modal content going on here: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
+      .modal-footer
+        %a.btn.btn-success{href:''} Success
+        %a.btn.btn-danger{href:''} Danger
+        %a.btn.btn-secondary.close-btn{href:''} Close
+
+