testio-tailwind 0.1.0

package/src/pages/components/listitems.haml

@@ -0,0 +1,137 @@
+---
+tags: components
+title: List item
+---
+
+.list-listitems
+  .listitem
+    .listitem-title
+      List-item
+  .listitem
+    .listitem-badge
+      .icon.icon-feature
+    .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
+  .listitem
+    .listitem-title
+      List-item
+      .listitem-label with action
+    .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.btn-primary Action
+  .listitem
+    .listitem-title
+      List-item title with an almost endless amount of  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-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
+    .listitem-actions
+      %a.btn.btn-primary Action
+  .listitem
+    .listitem-title
+      List-item
+      .listitem-label with more actions
+    .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
+    .listitem-title
+      List-item
+      .listitem-label with many more actions
+    .listitem-actions
+      %a.btn.btn-secondary.hidden-xs-down
+        .icon.icon-check-circle-filled.mr-icon-spacing
+        Action
+      %a.btn.btn-secondary.hidden-xs-down
+        .icon.icon-check-circle-filled.mr-icon-spacing
+        Action
+      %a.btn.btn-primary
+        .icon.icon-cloud-upload.mr-icon-spacing
+        Primary action
+      %details.dropdown-actions.dropright
+        %summary
+          .btn.btn-primary.btn-square
+            %span.icon.text-icon-default.icon-more
+        .listitem-more-menu.popover-menu
+          %a.popover-action.hidden-xs-up
+            .icon.icon-check-circle-filled
+            Action
+          %a.popover-action.hidden-xs-up
+            .icon.icon-check-circle-filled
+            Action
+          %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
+
+.list-listitems
+  %a.listitem{href:"#"}
+    .listitem-title
+      %span.icon.icon-user-story.mr-icon-spacing
+      List item
+      .listitem-label linked
+    .listitem-metrics
+      .listitem-metric
+        .icon.icon-user-outline-plus.text-success
+        99
+      .listitem-metric
+        .icon.icon-user-outline-cross.text-danger
+        99
+      .listitem-metric
+        .icon.icon-user-outline-blocked.text-danger
+        99
+      .listitem-metric
+        .icon.icon-clock
+        99

package/src/pages/components/listitems_badge.haml

@@ -0,0 +1,36 @@
+---
+tags: components
+title: List item badges
+---
+
+.list-listitems
+  .listitem
+    .listitem-badge
+      .icon.icon-feature
+    .listitem-title
+      List-item with badge
+  .listitem
+    .listitem-badge.success
+      .icon.icon-feature
+    .listitem-title
+      List-item with success badge
+  .listitem
+    .listitem-badge.danger
+      .icon.icon-feature
+    .listitem-title
+      List-item with danger badge
+  .listitem
+    .listitem-badge
+      .counter 99
+    .listitem-title
+      List-item with counter
+  .listitem
+    .listitem-badge.success
+      .counter 99
+    .listitem-title
+      List-item with counter and success badge
+  .listitem
+    .listitem-badge.danger
+      .counter 99
+    .listitem-title
+      List-item with counter and danger badge

package/src/pages/components/listitems_collapsable.haml

@@ -0,0 +1,117 @@
+---
+tags: components
+title: List item collapsable
+---
+
+.list-listitems
+  %details.listitem
+    %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
+        %a.btn.btn-primary Action
+    .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
+    %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
+        %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"}
+  %details.listitem
+    %summary.listitem-header
+      .listitem-badge
+        .icon.icon-feature
+      .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/listitems_nested.haml

@@ -0,0 +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. 

package/src/pages/components/listitems_selectable.haml

@@ -0,0 +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"}

package/src/pages/components/listitems_white.haml

@@ -0,0 +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"}

package/src/pages/components/loading_spinner.haml

@@ -0,0 +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'}

package/src/pages/components/metasidebar.haml

@@ -0,0 +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.

package/src/pages/components/modal_details.haml

@@ -0,0 +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
+
+

package/src/pages/components/notification_center.haml

@@ -0,0 +1,48 @@
+---
+tags: components
+title: Notification Center
+---
+
+%details.drawer-wrapper
+  %summary.drawer-trigger
+    .btn.btn-primary
+      .icon.icon-bell.mr-icon-spacing
+      5
+  .drawer
+    .drawer-header
+      .drawer-title Notifications
+    .drawer-content.notifications
+      .notification
+        %input#notification1{type:"checkbox"}
+        %label.notification-content{for:"notification1"}
+          .notification-badge
+            .icon.icon-test-lg
+          .notification-label Notification type
+          %a.notification-text{href:"https://www.tonnenvonhall.com"} You received a great lorem ipsum dolor sit amet, con sec tetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
+          .notification-metainfo 30 min ago 
+      .notification
+        %input#notification2{type:"checkbox"}
+        %label.notification-content{for:"notification2"}
+          .notification-badge
+            %img{src:"/assets/images/logo-testio/testio_symbol_tealpurple_square-1000px.png"}
+          .notification-label Notification type
+          %a.notification-text{href:"#"} You received a great lorem ipsum dolor sit amet, con sec tetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
+          .notification-metainfo 30 min ago 
+      .notification
+        %input#notification3{type:"checkbox"}
+        %label.notification-content{for:"notification3"}
+          .notification-badge
+            %img.profile-thumb{src:"/assets/images/placeholders/profile_supergirl.png"}
+          .notification-label Notification type
+          %a.notification-text{href:"#"} You received a great lorem ipsum dolor sit amet, con sec tetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
+          .notification-metainfo 30 min ago 
+      .notification
+        %input#notification4{type:"checkbox"}
+        %label.notification-content{for:"notification4"}
+          .notification-badge
+            %img.profile-thumb{src:"/assets/images/placeholders/profile_supergirl.png"}
+            %img.profile-thumb{src:"/assets/images/placeholders/profile_supergirl.png"}
+            %img.profile-thumb{src:"/assets/images/placeholders/profile_supergirl.png"}
+          .notification-label Notification type
+          %a.notification-text{href:"#"} You received a great lorem ipsum dolor sit amet, con sec tetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
+          .notification-metainfo 30 min ago 

package/src/pages/components/notifications.haml

@@ -0,0 +1,42 @@
+---
+tags: components
+title: Notifications
+---
+
+%p.mb-heading.prose remove the classes <code>relative z-0 top-0</code> in production
+
+.notification-container.relative.top-0.z-0
+  .notification{href:""}
+    .notification-title Info Notififaction
+    .notification-content
+      .notification-message You have 60 min left to finish this task. Be sure to pick it up and finish it soon.
+      .btn.btn-sm.btn-inverted Go to page button
+    %button.btn.btn-close
+      %span.icon.icon-cross
+  .notification{href:""}
+    .notification-badge
+      .icon.icon-devices-lg
+    .notification-title Info Notififaction with icon
+    .notification-content
+      .notification-message You have 60 min left to finish this task. Be sure to pick it up and finish it soon.
+      .btn.btn-sm.btn-inverted Update devices
+    %button.btn.btn-close
+      %span.icon.icon-cross
+  .notification.success{href:""}
+    .notification-title Success Alert
+    .notification-content
+      .notification-message You have 60 min left to finish this task. Be sure to pick it up and finish it soon.
+    %button.btn.btn-close
+      %span.icon.icon-cross
+  .notification.warning{href:""}
+    .notification-title Warning Notififaction
+    .notification-content
+      .notification-message You have 60 min left to finish this task. Be sure to pick it up and finish it soon.
+    %button.btn.btn-close
+      %span.icon.icon-cross
+  .notification.error{href:""}
+    .notification-title Error Notififaction
+    .notification-content
+      .notification-message You have 60 min left to finish this task. Be sure to pick it up and finish it soon.
+    %button.btn.btn-close
+      %span.icon.icon-cross