testio-tailwind 0.1.0 → 0.2.1

package/src/pages/colors.pug

@@ -1,147 +1,147 @@
----
-layout: base
-permalink: "|/colors/"
----
-
-main.main-content.main-content-padding
-
-  h1.mb-8 Colors
-
-  .grid.gap-5(class='md:grid-cols-4')
-    .flex.flex-col
-      .color-cell.bg-appbody
-        p appbody
-        p #FFFFFF
-      .color-cell.bg-primary.text-white
-        p Primary
-        p #236a84
-      .color-cell.bg-link.text-white
-        p link
-        p #236a84
-      .color-cell.bg-link-hover.text-white
-        p link-hover
-        p #4860E5
-      .color-cell.bg-header.text-white
-        p header
-        p #1d1d1d
-      .color-cell.bg-actionbar.text-white
-        p header
-        p #236a84
-      .color-cell.bg-bordercolor
-        p bordercolor
-        p #e6e6e6
-      .color-cell.bg-bordercolor-dark
-        p bordercolor-dark
-        p #D4D6DC
-      .color-cell.bg-success
-        p success
-        p #8cbd24
-      .color-cell.bg-danger
-        p danger
-        p #ec0404
-      .color-cell.bg-disabled
-        p disabled
-        p #bfc1c5
-      .color-cell.bg-disabled-dark
-        p disabled-dark
-        p #5f656d
-      .color-cell.bg-placeholder
-        p placeholder
-        p #bfc1c5
-      .color-cell.bg-info
-        p info
-        p #326dd1
-      .color-cell.bg-label-color
-        p label-color
-        p #5f656d
-      .color-cell.bg-label-inverted-color
-        p label-inverted-color
-        p #bfc1c5
-
-    .flex.flex-col
-      .color-cell.bg-blue-500.text-white
-        p blue-500
-        p #4860E5
-      .color-cell.bg-blue-200.text-white
-        p blue-200
-        p #3F50B4
-      .color-cell.bg-petrol-500.text-white
-        p petrol-500
-        p #2C3252
-      .color-cell.bg-petrol-600.text-white
-        p petrol-600
-        p #2C3252
-      .color-cell.bg-petrol-700.text-white
-        p petrol-700
-        p #2C3252
-      .color-cell.bg-petrol-800.text-white
-        p petrol-800
-        p #2C3252
-      .color-cell.bg-red-500.text-white
-        p red-500
-        p #FD1525
-      .color-cell.bg-orange-500.text-white
-        p orange-500
-        p #FF9D00
-      .color-cell.bg-yellow-500.text-white
-        p yellow-500
-        p #FFCB00
-      .color-cell.bg-green-500.text-white
-        p green-500
-        p #AFB42A
-
-    .flex.flex-col
-      .color-cell.bg-black.text-white
-        p black
-        p #000000
-      .color-cell.bg-gray-darkest.text-white
-        p gray-darkest
-        p #7c8188
-      .color-cell.bg-gray-darker.text-white
-        p gray-darker
-        p #5f656d
-      .color-cell.bg-gray-dark
-        p gray-dark
-        p #7c8188
-      .color-cell.bg-gray
-        p gray
-        p #9fa2a8
-      .color-cell.bg-gray-light
-        p gray-light
-        p #bfc1c5
-      .color-cell.bg-gray-lighter
-        p gray-lighter
-        p #e6e6e6
-      .color-cell.bg-gray-lightest
-        p gray-lightest
-        p #f2f2f2
-
-
-    .flex.flex-col
-      .color-cell.bg-gray-900.text-white
-        p gray-900
-        p #222222
-      .color-cell.bg-gray-800.text-white
-        p gray-800
-        p #262626
-      .color-cell.bg-gray-700.text-white
-        p gray-700
-        p #343A40
-      .color-cell.bg-gray-600.text-white
-        p gray-600
-        p #5f656d
-      .color-cell.bg-gray-500
-        p gray-500
-        p #7c8188
-      .color-cell.bg-gray-400
-        p gray-400
-        p #9fa2a8
-      .color-cell.bg-gray-300
-        p gray-300
-        p #bfc1c5
-      .color-cell.bg-gray-200
-        p gray-200
-        p #e6e6e6
-      .color-cell.bg-gray-100
-        p gray-100
-        p #f2f2f2
+---
+layout: base
+permalink: "|/colors/"
+---
+
+main.main-content.main-content-padding
+
+  h1.mb-8 Colors
+
+  .grid.gap-5(class='md:grid-cols-4')
+    .flex.flex-col
+      .color-cell.bg-appbody
+        p appbody
+        p #FFFFFF
+      .color-cell.bg-primary.text-white
+        p Primary
+        p #236a84
+      .color-cell.bg-link.text-white
+        p link
+        p #236a84
+      .color-cell.bg-link-hover.text-white
+        p link-hover
+        p #4860E5
+      .color-cell.bg-header.text-white
+        p header
+        p #1d1d1d
+      .color-cell.bg-actionbar.text-white
+        p header
+        p #236a84
+      .color-cell.bg-bordercolor
+        p bordercolor
+        p #e6e6e6
+      .color-cell.bg-bordercolor-dark
+        p bordercolor-dark
+        p #D4D6DC
+      .color-cell.bg-success
+        p success
+        p #8cbd24
+      .color-cell.bg-danger
+        p danger
+        p #ec0404
+      .color-cell.bg-disabled
+        p disabled
+        p #bfc1c5
+      .color-cell.bg-disabled-dark
+        p disabled-dark
+        p #5f656d
+      .color-cell.bg-placeholder
+        p placeholder
+        p #bfc1c5
+      .color-cell.bg-info
+        p info
+        p #326dd1
+      .color-cell.bg-label-color
+        p label-color
+        p #5f656d
+      .color-cell.bg-label-inverted-color
+        p label-inverted-color
+        p #bfc1c5
+
+    .flex.flex-col
+      .color-cell.bg-blue-500.text-white
+        p blue-500
+        p #4860E5
+      .color-cell.bg-blue-200.text-white
+        p blue-200
+        p #3F50B4
+      .color-cell.bg-petrol-500.text-white
+        p petrol-500
+        p #2C3252
+      .color-cell.bg-petrol-600.text-white
+        p petrol-600
+        p #2C3252
+      .color-cell.bg-petrol-700.text-white
+        p petrol-700
+        p #2C3252
+      .color-cell.bg-petrol-800.text-white
+        p petrol-800
+        p #2C3252
+      .color-cell.bg-red-500.text-white
+        p red-500
+        p #FD1525
+      .color-cell.bg-orange-500.text-white
+        p orange-500
+        p #FF9D00
+      .color-cell.bg-yellow-500.text-white
+        p yellow-500
+        p #FFCB00
+      .color-cell.bg-green-500.text-white
+        p green-500
+        p #AFB42A
+
+    .flex.flex-col
+      .color-cell.bg-black.text-white
+        p black
+        p #000000
+      .color-cell.bg-gray-darkest.text-white
+        p gray-darkest
+        p #7c8188
+      .color-cell.bg-gray-darker.text-white
+        p gray-darker
+        p #5f656d
+      .color-cell.bg-gray-dark
+        p gray-dark
+        p #7c8188
+      .color-cell.bg-gray
+        p gray
+        p #9fa2a8
+      .color-cell.bg-gray-light
+        p gray-light
+        p #bfc1c5
+      .color-cell.bg-gray-lighter
+        p gray-lighter
+        p #e6e6e6
+      .color-cell.bg-gray-lightest
+        p gray-lightest
+        p #f2f2f2
+
+
+    .flex.flex-col
+      .color-cell.bg-gray-900.text-white
+        p gray-900
+        p #222222
+      .color-cell.bg-gray-800.text-white
+        p gray-800
+        p #262626
+      .color-cell.bg-gray-700.text-white
+        p gray-700
+        p #343A40
+      .color-cell.bg-gray-600.text-white
+        p gray-600
+        p #5f656d
+      .color-cell.bg-gray-500
+        p gray-500
+        p #7c8188
+      .color-cell.bg-gray-400
+        p gray-400
+        p #9fa2a8
+      .color-cell.bg-gray-300
+        p gray-300
+        p #bfc1c5
+      .color-cell.bg-gray-200
+        p gray-200
+        p #e6e6e6
+      .color-cell.bg-gray-100
+        p gray-100
+        p #f2f2f2

package/src/pages/components/alerts.haml

@@ -1,32 +1,32 @@
----
-tags: components
-title: Alerts
----
-
-.alert-container
-  .alert
-    .alert-message Alert
-    %button.close
-      .icon.icon-cross
-  .alert.alert-info
-    .alert-message Info Alert 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.
-    %button.close
-      .icon.icon-cross
-  .alert
-    .alert-message
-      Info Alert 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.
-      %button.btn.btn-white Alert action
-    %button.close
-      .icon.icon-cross
-  .alert.alert-success
-    .alert-message Success Alert
-    %button.close
-      .icon.icon-cross
-  .alert.alert-warning
-    .alert-message Warning Alert
-    %button.close
-      .icon.icon-cross
-  .alert.alert-error
-    .alert-message Error Alert
-    %button.close
+---
+tags: components
+title: Alerts
+---
+
+.alert-container
+  .alert
+    .alert-message Alert
+    %button.close
+      .icon.icon-cross
+  .alert.alert-info
+    .alert-message Info Alert 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.
+    %button.close
+      .icon.icon-cross
+  .alert
+    .alert-message
+      Info Alert 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.
+      %button.btn.btn-white Alert action
+    %button.close
+      .icon.icon-cross
+  .alert.alert-success
+    .alert-message Success Alert
+    %button.close
+      .icon.icon-cross
+  .alert.alert-warning
+    .alert-message Warning Alert
+    %button.close
+      .icon.icon-cross
+  .alert.alert-error
+    .alert-message Error Alert
+    %button.close
       .icon.icon-cross

package/src/pages/components/banner_cards.haml

@@ -1,46 +1,46 @@
----
-tags: components
-title: Banner cards
----
-
-.banner-card.welcome
-  %img.welcome-image{src:"/assets/images/logo-testio/testio_symbol_purpleteal_square.svg"}
-  .card-content
-    %h3.card-title Welcome to Test IO!
-    %p We are glad to have you here. To get started earning money with us please complete some onboarding modules. Also check out this Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
-    .card-actions
-      %a.btn.btn-inverted{href:""} Dismiss
-.banner-card
-  .card-chart
-    .piechart-example
-    .chart-value 0/3
-    .chart-label madatory modules completed
-  .card-content
-    %h5.card-title Mandatory onboarding modules available
-    %p You received mandatory onboarding modules which are required for receiving customer tasks and test invitations. Please complete them soon.
-    .card-actions
-      %a.btn.btn-primary{href:""} Go to learning portal
-.banner-card
-  .card-image
-    %img{src:"/assets/images/tester-badges/testIO-testerbadge-cybersecurity.svg"}
-  .card-content
-    %h5.card-title Mandatory cybersecurity course
-    %p.mb-xxs You received the mandatory onboarding course Cybersecurity which is required for receiving customer tasks and test invitations.
-    .text-with-icon.mb-xxs
-      .icon.icon-exclamation-circle
-      All approved testers must complete this course to achieve bronze level and above.
-    .text-with-icon
-      .icon.icon-exclamation-circle
-      All approved testers will have a one-month transition period to complete it. If they do not pass, even Diamond testers will be downgraded to copper level.
-    .card-actions
-      %a.btn.btn-primary{href:""} Go to course
-      %a.btn.btn-secondary{href:""} Remind me later
-.banner-card
-  .card-image
-    .icon-xxl.icon-bug-sad-xl.text-danger
-  .card-content
-    %h5.card-title Level downgrade
-    %p Unfortunatly you didn’t finish the onboarding course Cybersecurity in the required timeframe. As a result you have been downgraded to level 2.
-    .card-actions
-      %a.btn.btn-primary{href:""} Go to course
+---
+tags: components
+title: Banner cards
+---
+
+.banner-card.welcome
+  %img.welcome-image{src:"/assets/images/logo-testio/testio_symbol_purpleteal_square.svg"}
+  .card-content
+    %h3.card-title Welcome to Test IO!
+    %p We are glad to have you here. To get started earning money with us please complete some onboarding modules. Also check out this Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
+    .card-actions
+      %a.btn.btn-inverted{href:""} Dismiss
+.banner-card
+  .card-chart
+    .piechart-example
+    .chart-value 0/3
+    .chart-label madatory modules completed
+  .card-content
+    %h5.card-title Mandatory onboarding modules available
+    %p You received mandatory onboarding modules which are required for receiving customer tasks and test invitations. Please complete them soon.
+    .card-actions
+      %a.btn.btn-primary{href:""} Go to learning portal
+.banner-card
+  .card-image
+    %img{src:"/assets/images/tester-badges/testIO-testerbadge-cybersecurity.svg"}
+  .card-content
+    %h5.card-title Mandatory cybersecurity course
+    %p.mb-xxs You received the mandatory onboarding course Cybersecurity which is required for receiving customer tasks and test invitations.
+    .text-with-icon.mb-xxs
+      .icon.icon-exclamation-circle
+      All approved testers must complete this course to achieve bronze level and above.
+    .text-with-icon
+      .icon.icon-exclamation-circle
+      All approved testers will have a one-month transition period to complete it. If they do not pass, even Diamond testers will be downgraded to copper level.
+    .card-actions
+      %a.btn.btn-primary{href:""} Go to course
+      %a.btn.btn-secondary{href:""} Remind me later
+.banner-card
+  .card-image
+    .icon-xxl.icon-bug-sad-xl.text-danger
+  .card-content
+    %h5.card-title Level downgrade
+    %p Unfortunatly you didn’t finish the onboarding course Cybersecurity in the required timeframe. As a result you have been downgraded to level 2.
+    .card-actions
+      %a.btn.btn-primary{href:""} Go to course
       %a.btn.btn-secondary{href:""} Remind me later