testio-tailwind 0.1.0 → 0.2.1

package/src/pages/components/notification_center.haml

@@ -1,48 +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 
+---
+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

@@ -1,42 +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
+---
+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

package/src/pages/components/profilethumb.haml

@@ -1,27 +1,27 @@
----
-tags: components
-title: Profile thumbnail
----
-
-%dl.list-inline
-  %dt profile-thumb
-  %dd
-    %img.profile-thumb{src:"/assets/images/placeholders/profile_supergirl.png"}
-  %dt round
-  %dd
-    %img.profile-thumb.round{src:"/assets/images/placeholders/profile_supergirl.png"}
-  %dt md
-  %dd
-    %img.profile-thumb.round.md{src:"/assets/images/placeholders/profile_supergirl.png"}
-  %dt sm
-  %dd
-    %img.profile-thumb.round.sm{src:"/assets/images/placeholders/profile_supergirl.png"}
-  %dt lg
-  %dd
-    %img.profile-thumb.round.lg{src:"/assets/images/placeholders/profile_supergirl.png"}
-  %dt xl
-  %dd
-    %img.profile-thumb.round.xl{src:"/assets/images/placeholders/profile_supergirl.png"}
-  %dt xxl
-  %dd
-    %img.profile-thumb.round.xxl{src:"/assets/images/placeholders/profile_supergirl.png"}
+---
+tags: components
+title: Profile thumbnail
+---
+
+%dl.list-inline
+  %dt profile-thumb
+  %dd
+    %img.profile-thumb{src:"/assets/images/placeholders/profile_supergirl.png"}
+  %dt round
+  %dd
+    %img.profile-thumb.round{src:"/assets/images/placeholders/profile_supergirl.png"}
+  %dt md
+  %dd
+    %img.profile-thumb.round.md{src:"/assets/images/placeholders/profile_supergirl.png"}
+  %dt sm
+  %dd
+    %img.profile-thumb.round.sm{src:"/assets/images/placeholders/profile_supergirl.png"}
+  %dt lg
+  %dd
+    %img.profile-thumb.round.lg{src:"/assets/images/placeholders/profile_supergirl.png"}
+  %dt xl
+  %dd
+    %img.profile-thumb.round.xl{src:"/assets/images/placeholders/profile_supergirl.png"}
+  %dt xxl
+  %dd
+    %img.profile-thumb.round.xxl{src:"/assets/images/placeholders/profile_supergirl.png"}

package/src/pages/components/progress.haml

@@ -1,23 +1,23 @@
----
-tags: components
-title: Progress bars
----
-
-%dl.list-inline
-  %dt Progress bar
-  %dd
-    %progress.progress{value:"32", max:"100"} 32%
-  %dt Progress bar success
-  %dd
-    %progress.progress.progress-bar-success{value:"32", max:"100"} 32%
-  %dt Progress bar danger
-  %dd
-    %progress.progress.progress-bar-danger{value:"32", max:"100"} 32%
-  %dt Test progress
-  %dd
-    %progress.progress.test-progress{value:"32", max:"100"} 32%
-  %dt Progress bar thick
-  %dd
-    %progress.progress.thick{value:"32", max:"100"} 32%
-
-
+---
+tags: components
+title: Progress bars
+---
+
+%dl.list-inline
+  %dt Progress bar
+  %dd
+    %progress.progress{value:"32", max:"100"} 32%
+  %dt Progress bar success
+  %dd
+    %progress.progress.progress-bar-success{value:"32", max:"100"} 32%
+  %dt Progress bar danger
+  %dd
+    %progress.progress.progress-bar-danger{value:"32", max:"100"} 32%
+  %dt Test progress
+  %dd
+    %progress.progress.test-progress{value:"32", max:"100"} 32%
+  %dt Progress bar thick
+  %dd
+    %progress.progress.thick{value:"32", max:"100"} 32%
+
+

package/src/pages/components/resultmodule.haml

@@ -1,151 +1,151 @@
----
-tags: components
-title: Resultmodule
----
-
-.result-module
-  .result-item.feature
-    .result-item-title Result title
-  .result-item.feature-passed
-    .result-item-title Result title
-  %details.result-item.feature-failed
-    %summary
-      .result-item-title Result title
-      .result-item-metrics
-        %a.metric-item{href:""}
-          .icon.icon-critical
-          1
-        %a.metric-item{href:""}
-          .icon.icon-high
-          1
-        %a.metric-item{href:""}
-          .icon.icon-low
-          1
-      .btn.collapse-btn
-    %a.issue-item{href:""}
-      .issue-icon.icon.icon-critical
-      .issue-title Issue title with a lot of Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore.
-      .issue-info #123321 | Critical
-    %a.issue-item{href:""}
-      .issue-icon.icon.icon-high
-      .issue-title Issue title with a lot of Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore.
-      .issue-info #123321 | High
-    %a.issue-item{href:""}
-      .issue-icon.icon.icon-low
-      .issue-title Issue title with a lot of Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore.
-      .issue-info #123321 | Low
-  %details.result-item.feature-failed
-    %summary
-      .result-item-title Result title
-      .result-item-metrics
-        %a.metric-item{href:""}
-          .icon.icon-critical
-          99
-        %a.metric-item{href:""}
-          .icon.icon-high
-          99
-        %a.metric-item{href:""}
-          .icon.icon-low
-          99
-      .btn.collapse-btn
-    %a.issue-item{href:""}
-      .issue-icon.icon.icon-critical
-      .issue-title Issue title with a lot of Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore.
-      .issue-info #123321 | Critical
-    %a.issue-item{href:""}
-      .issue-icon.icon.icon-high
-      .issue-title Issue title with a lot of Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore.
-      .issue-info #123321 | High
-    %a.issue-item{href:""}
-      .issue-icon.icon.icon-low
-      .issue-title Issue title with a lot of Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore.
-      .issue-info #123321 | Low
-
-%h5.mb-xs.mt-md Resultmodule with User Stories
-.result-module
-  .result-item.pending
-    .result-item-title Feature title
-  .result-item.pending
-    .result-item-title Feature title
-  %details.result-item.feature
-    %summary
-      .result-item-title Feature title
-      .result-item-metrics
-        %a.metric-item{href:""}
-          .icon.icon-user-outline-check.success
-          99
-        %a.metric-item{href:""}
-          .icon.icon-user-outline-cross.danger
-          99
-        %a.metric-item{href:""}
-          .icon.icon-user-outline-blocked.danger
-          99
-        %a.metric-item{href:""}
-          .icon.icon-clock
-          99
-      .btn.collapse-btn
-    %a.issue-item{href:""}
-      .issue-icon.icon.icon-user-story-check.success
-      .issue-title Issue title with a lot of Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore.
-      .issue-metrics
-        .metric-item
-          .icon.icon-user-outline-check.success
-          99
-    %a.issue-item{href:""}
-      .issue-icon.icon.icon-user-story-cross.danger
-      .issue-title Issue title with a lot of Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore.
-      .issue-metrics
-        .metric-item
-          .icon.icon-user-outline-cross.danger
-          99
-        .metric-item
-          .icon.icon-user-outline-blocked.danger
-          99
-    %a.issue-item{href:""}
-      .issue-icon.icon.icon-user-story-clock
-      .issue-title Issue title with a lot of Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore.
-      .issue-metrics
-        .metric-item
-          .icon.icon-clock
-          99
-  %details.result-item.feature
-    %summary
-      .result-item-title Feature title
-      .result-item-metrics
-        %a.metric-item{href:""}
-          .icon.icon-user-outline-check.success
-          99
-        %a.metric-item{href:""}
-          .icon.icon-user-outline-cross.danger
-          99
-        %a.metric-item{href:""}
-          .icon.icon-user-outline-blocked.danger
-          99
-        %a.metric-item{href:""}
-          .icon.icon-clock
-          99
-      .btn.collapse-btn
-    %a.issue-item{href:""}
-      .issue-icon.icon.icon-user-story-check.success
-      .issue-title Issue title with a lot of Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore.
-      .issue-metrics
-        .metric-item
-          .icon.icon-user-outline-check.success
-          99
-    %a.issue-item{href:""}
-      .issue-icon.icon.icon-user-story-cross.danger
-      .issue-title Issue title with a lot of Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore.
-      .issue-metrics
-        .metric-item
-          .icon.icon-user-outline-cross.danger
-          99
-        .metric-item
-          .icon.icon-user-outline-blocked.danger
-          99
-    %a.issue-item{href:""}
-      .issue-icon.icon.icon-user-story-clock
-      .issue-title Issue title with a lot of Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore.
-      .issue-metrics
-        .metric-item
-          .icon.icon-clock
+---
+tags: components
+title: Resultmodule
+---
+
+.result-module
+  .result-item.feature
+    .result-item-title Result title
+  .result-item.feature-passed
+    .result-item-title Result title
+  %details.result-item.feature-failed
+    %summary
+      .result-item-title Result title
+      .result-item-metrics
+        %a.metric-item{href:""}
+          .icon.icon-critical
+          1
+        %a.metric-item{href:""}
+          .icon.icon-high
+          1
+        %a.metric-item{href:""}
+          .icon.icon-low
+          1
+      .btn.collapse-btn
+    %a.issue-item{href:""}
+      .issue-icon.icon.icon-critical
+      .issue-title Issue title with a lot of Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore.
+      .issue-info #123321 | Critical
+    %a.issue-item{href:""}
+      .issue-icon.icon.icon-high
+      .issue-title Issue title with a lot of Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore.
+      .issue-info #123321 | High
+    %a.issue-item{href:""}
+      .issue-icon.icon.icon-low
+      .issue-title Issue title with a lot of Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore.
+      .issue-info #123321 | Low
+  %details.result-item.feature-failed
+    %summary
+      .result-item-title Result title
+      .result-item-metrics
+        %a.metric-item{href:""}
+          .icon.icon-critical
+          99
+        %a.metric-item{href:""}
+          .icon.icon-high
+          99
+        %a.metric-item{href:""}
+          .icon.icon-low
+          99
+      .btn.collapse-btn
+    %a.issue-item{href:""}
+      .issue-icon.icon.icon-critical
+      .issue-title Issue title with a lot of Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore.
+      .issue-info #123321 | Critical
+    %a.issue-item{href:""}
+      .issue-icon.icon.icon-high
+      .issue-title Issue title with a lot of Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore.
+      .issue-info #123321 | High
+    %a.issue-item{href:""}
+      .issue-icon.icon.icon-low
+      .issue-title Issue title with a lot of Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore.
+      .issue-info #123321 | Low
+
+%h5.mb-xs.mt-md Resultmodule with User Stories
+.result-module
+  .result-item.pending
+    .result-item-title Feature title
+  .result-item.pending
+    .result-item-title Feature title
+  %details.result-item.feature
+    %summary
+      .result-item-title Feature title
+      .result-item-metrics
+        %a.metric-item{href:""}
+          .icon.icon-user-outline-check.success
+          99
+        %a.metric-item{href:""}
+          .icon.icon-user-outline-cross.danger
+          99
+        %a.metric-item{href:""}
+          .icon.icon-user-outline-blocked.danger
+          99
+        %a.metric-item{href:""}
+          .icon.icon-clock
+          99
+      .btn.collapse-btn
+    %a.issue-item{href:""}
+      .issue-icon.icon.icon-user-story-check.success
+      .issue-title Issue title with a lot of Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore.
+      .issue-metrics
+        .metric-item
+          .icon.icon-user-outline-check.success
+          99
+    %a.issue-item{href:""}
+      .issue-icon.icon.icon-user-story-cross.danger
+      .issue-title Issue title with a lot of Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore.
+      .issue-metrics
+        .metric-item
+          .icon.icon-user-outline-cross.danger
+          99
+        .metric-item
+          .icon.icon-user-outline-blocked.danger
+          99
+    %a.issue-item{href:""}
+      .issue-icon.icon.icon-user-story-clock
+      .issue-title Issue title with a lot of Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore.
+      .issue-metrics
+        .metric-item
+          .icon.icon-clock
+          99
+  %details.result-item.feature
+    %summary
+      .result-item-title Feature title
+      .result-item-metrics
+        %a.metric-item{href:""}
+          .icon.icon-user-outline-check.success
+          99
+        %a.metric-item{href:""}
+          .icon.icon-user-outline-cross.danger
+          99
+        %a.metric-item{href:""}
+          .icon.icon-user-outline-blocked.danger
+          99
+        %a.metric-item{href:""}
+          .icon.icon-clock
+          99
+      .btn.collapse-btn
+    %a.issue-item{href:""}
+      .issue-icon.icon.icon-user-story-check.success
+      .issue-title Issue title with a lot of Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore.
+      .issue-metrics
+        .metric-item
+          .icon.icon-user-outline-check.success
+          99
+    %a.issue-item{href:""}
+      .issue-icon.icon.icon-user-story-cross.danger
+      .issue-title Issue title with a lot of Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore.
+      .issue-metrics
+        .metric-item
+          .icon.icon-user-outline-cross.danger
+          99
+        .metric-item
+          .icon.icon-user-outline-blocked.danger
+          99
+    %a.issue-item{href:""}
+      .issue-icon.icon.icon-user-story-clock
+      .issue-title Issue title with a lot of Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore.
+      .issue-metrics
+        .metric-item
+          .icon.icon-clock
           99