testio-tailwind 0.2.0 → 0.2.2

package/src/pages/forms/checkboxes.haml

@@ -1,64 +1,64 @@
----
-tags: forms
-title: Checkboxes
----
-
-.form-grid.single.narrow.mb-3
-  .form-check
-    %input#check1{type:"checkbox", checked:"true"}
-    %label{for:"check1"} Checkbox
-  .form-check
-    %input#check3{type:"checkbox"}
-    %label{for:"check3"} Checkbox
-  .form-check
-    .field_with_errors
-      %input#check3{type:"checkbox"}
-    %label{for:"check3"} Checkbox with error
-  .form-check.disabled
-    %input#check4{type:'checkbox', disabled:'true', checked:'true'}
-    %label{for:'check4'} Disabled checked
-  .form-check.disabled
-    %input#check5{type:'checkbox', disabled:'true'}
-    %label{for:'check5'} Disabled
-  .form-check.sm
-    %input#check1sm{type:'checkbox'}
-    %label{for:'check1sm'} Checkbox SM
-  .form-check.sm
-    %input#check2sm{type:'checkbox', checked:'true'}
-    %label{for:'check2sm'} Checkbox SM
-  .form-check.sm
-    %input#check3sm{type:'checkbox', disabled:"true"}
-    %label{for:'check3sm'} Checkbox SM
-  .form-check.sm
-    %input#check4sm{type:'checkbox', checked:'true', disabled:"true"}
-    %label{for:'check4sm'} Checkbox SM
-
-.form-grid.single.narrow.bg-black.p-3
-  .form-check.inverted
-    %input#check5inv{type:'checkbox', checked:'true'}
-    %label{for:'check5inv'} Inverted
-  .form-check.inverted
-    %input#check6inv{type:'checkbox'}
-    %label{for:'check6inv'} Checkbox
-  .form-check.inverted.disabled
-    %input#check7inv{type:'checkbox', disabled:'true', checked:'true'}
-    %label{for:'check7inv'} Disabled checked
-  .form-check.inverted.disabled
-    %input#check7{type:'checkbox', disabled:'true'}
-    %label{for:'check7'} Disabled
-  .form-check.sm.inverted
-    %input#check7sm{type:'checkbox'}
-    %label{for:'check7sm'} Checkbox SM
-  .form-check.sm.inverted
-    %input#check10sm{type:'checkbox', checked:'true', disabled:"true"}
-    %label{for:'check10sm'} Checkbox SM
-  .form-check.sm.inverted
-    %input#check8sm{type:'checkbox'}
-    %label{for:'check8sm'}
-      %span.icon.icon-circle-filled.mr-icon-spacing
-      Checkbox SM
-  .form-check.sm.inverted
-    %input#check9sm{type:'checkbox', checked:'true', disabled:"true"}
-    %label{for:'check9sm'}
-      %span.icon.icon-circle-filled.mr-icon-spacing
-      Checkbox SM
+---
+tags: forms
+title: Checkboxes
+---
+
+.form-grid.single.narrow.mb-3
+  .form-check
+    %input#check1{type:"checkbox", checked:"true"}
+    %label{for:"check1"} Checkbox
+  .form-check
+    %input#check3{type:"checkbox"}
+    %label{for:"check3"} Checkbox
+  .form-check
+    .field_with_errors
+      %input#check3{type:"checkbox"}
+    %label{for:"check3"} Checkbox with error
+  .form-check.disabled
+    %input#check4{type:'checkbox', disabled:'true', checked:'true'}
+    %label{for:'check4'} Disabled checked
+  .form-check.disabled
+    %input#check5{type:'checkbox', disabled:'true'}
+    %label{for:'check5'} Disabled
+  .form-check.sm
+    %input#check1sm{type:'checkbox'}
+    %label{for:'check1sm'} Checkbox SM
+  .form-check.sm
+    %input#check2sm{type:'checkbox', checked:'true'}
+    %label{for:'check2sm'} Checkbox SM
+  .form-check.sm
+    %input#check3sm{type:'checkbox', disabled:"true"}
+    %label{for:'check3sm'} Checkbox SM
+  .form-check.sm
+    %input#check4sm{type:'checkbox', checked:'true', disabled:"true"}
+    %label{for:'check4sm'} Checkbox SM
+
+.form-grid.single.narrow.bg-black.p-3
+  .form-check.inverted
+    %input#check5inv{type:'checkbox', checked:'true'}
+    %label{for:'check5inv'} Inverted
+  .form-check.inverted
+    %input#check6inv{type:'checkbox'}
+    %label{for:'check6inv'} Checkbox
+  .form-check.inverted.disabled
+    %input#check7inv{type:'checkbox', disabled:'true', checked:'true'}
+    %label{for:'check7inv'} Disabled checked
+  .form-check.inverted.disabled
+    %input#check7{type:'checkbox', disabled:'true'}
+    %label{for:'check7'} Disabled
+  .form-check.sm.inverted
+    %input#check7sm{type:'checkbox'}
+    %label{for:'check7sm'} Checkbox SM
+  .form-check.sm.inverted
+    %input#check10sm{type:'checkbox', checked:'true', disabled:"true"}
+    %label{for:'check10sm'} Checkbox SM
+  .form-check.sm.inverted
+    %input#check8sm{type:'checkbox'}
+    %label{for:'check8sm'}
+      %span.icon.icon-circle-filled.mr-icon-spacing
+      Checkbox SM
+  .form-check.sm.inverted
+    %input#check9sm{type:'checkbox', checked:'true', disabled:"true"}
+    %label{for:'check9sm'}
+      %span.icon.icon-circle-filled.mr-icon-spacing
+      Checkbox SM

package/src/pages/forms/checkboxes_devices.haml

@@ -1,45 +1,45 @@
----
-tags: forms
-title: Checkboxes for devices
----
-
-.form-grid.single.narrow.mb-3
-  .form-check.sm
-    %input#devicecheck1{type:"checkbox", checked:"true"}
-    %label{for:"devicecheck1"}
-      .device
-        .device-icon.icon-lg.icon-computer-windows-lg
-        .device-info
-          Desktop | Windows 11
-          %ul.browser-list
-            %li.icon.icon-chrome
-            %li.icon.icon-edge-chromium
-  .form-check.sm
-    %input#devicecheck2{type:"checkbox"}
-    %label{for:"devicecheck2"}
-      .device
-        .device-icon.icon-lg.icon-smartphone-apple-lg
-        .device-info
-          Smartphone | iOS 11
-          %ul.browser-list
-            %li.icon.icon-chrome
-            %li.icon.icon-edge-chromium
-  .form-check.sm.disabled
-    %input#devicecheck3{type:'checkbox', disabled:'true', checked:'true'}
-    %label{for:'devicecheck3'}
-      .device
-        .device-icon.icon-lg.icon-tablet-android-lg
-        .device-info
-          Tablet | iOS 11
-          %ul.browser-list
-            %li.icon.icon-chrome
-            %li.icon.icon-edge-chromium
-  .form-check.sm.disabled
-    %input#devicecheck4{type:'checkbox', disabled:'true'}
-    %label{for:'devicecheck4'}
-      .device
-        .device-icon.icon-lg.icon-console-lg
-        .device-info
-          Console | Nintendo Switch
-
-
+---
+tags: forms
+title: Checkboxes for devices
+---
+
+.form-grid.single.narrow.mb-3
+  .form-check.sm
+    %input#devicecheck1{type:"checkbox", checked:"true"}
+    %label{for:"devicecheck1"}
+      .device
+        .device-icon.icon-lg.icon-computer-windows-lg
+        .device-info
+          Desktop | Windows 11
+          %ul.browser-list
+            %li.icon.icon-chrome
+            %li.icon.icon-edge-chromium
+  .form-check.sm
+    %input#devicecheck2{type:"checkbox"}
+    %label{for:"devicecheck2"}
+      .device
+        .device-icon.icon-lg.icon-smartphone-apple-lg
+        .device-info
+          Smartphone | iOS 11
+          %ul.browser-list
+            %li.icon.icon-chrome
+            %li.icon.icon-edge-chromium
+  .form-check.sm.disabled
+    %input#devicecheck3{type:'checkbox', disabled:'true', checked:'true'}
+    %label{for:'devicecheck3'}
+      .device
+        .device-icon.icon-lg.icon-tablet-android-lg
+        .device-info
+          Tablet | iOS 11
+          %ul.browser-list
+            %li.icon.icon-chrome
+            %li.icon.icon-edge-chromium
+  .form-check.sm.disabled
+    %input#devicecheck4{type:'checkbox', disabled:'true'}
+    %label{for:'devicecheck4'}
+      .device
+        .device-icon.icon-lg.icon-console-lg
+        .device-info
+          Console | Nintendo Switch
+
+

package/src/pages/forms/form-addon.haml

@@ -1,16 +1,16 @@
----
-tags: "forms"
-title: Form addon
----
-
-.form-grid
-  .form-group.with-addon
-    %label.form-label Input with addon
-    %input.form-control{type:"text", placeholder:"Placeholder"}
-    .form-addon
-      .text-label EUR
-  .form-group.with-addon
-    %label.form-label Input with icon addon
-    %input.form-control{type:"text", placeholder:"Placeholder"}
-    .form-addon
-      %span.icon.icon-check-circle-filled.text-success
+---
+tags: "forms"
+title: Form addon
+---
+
+.form-grid
+  .form-group.with-addon
+    %label.form-label Input with addon
+    %input.form-control{type:"text", placeholder:"Placeholder"}
+    .form-addon
+      .text-label EUR
+  .form-group.with-addon
+    %label.form-label Input with icon addon
+    %input.form-control{type:"text", placeholder:"Placeholder"}
+    .form-addon
+      %span.icon.icon-check-circle-filled.text-success

package/src/pages/forms/form-card.haml

@@ -1,36 +1,36 @@
----
-tags: forms
-title: Form card
----
-
-.form-card
-  .form-card-heading
-    .form-card-title Form card title
-    .form-card-actions
-      %button.btn.btn-square.btn-sm.btn-primary
-        .icon.icon-arrow-upward
-      %button.btn.btn-square.btn-sm.btn-primary
-        .icon.icon-arrow-downward
-      %button.btn.btn-square.btn-sm.btn-primary
-        .icon.icon-remove
-  .form-grid
-    .form-group
-      %label.form-label Input
-      %input.form-control{type:'text', placeholder:"Some delicious placeholder text"}
-    .form-group
-      %label.form-label Input disabled
-      %input.form-control{type:'text', value:"Some delicious readonly value text", disabled:"true"}
-    .form-group
-      %label.form-label Textarea
-      %textarea.form-control{rows:'1', placeholder:"Enter some long form content"}
-    .form-group.form-select
-      %label.form-label Select
-      %select{placeholder: "Please select"}
-        %option{value: ""}
-        %option{value:"Option 1"} Option 1
-        %option{value:"Option 2"} Option 2
-        %option{value:"Option 3"} Option 3
-        %option{value:"Option 4"} ABC
-        %option{value:"Option 5"} DEF
-        %option{value:"Option 6"} WHY
-        %option{value:"Option 7"} XYZ
+---
+tags: forms
+title: Form card
+---
+
+.form-card
+  .form-card-heading
+    .form-card-title Form card title
+    .form-card-actions
+      %button.btn.btn-square.btn-sm.btn-primary
+        .icon.icon-arrow-upward
+      %button.btn.btn-square.btn-sm.btn-primary
+        .icon.icon-arrow-downward
+      %button.btn.btn-square.btn-sm.btn-primary
+        .icon.icon-remove
+  .form-grid
+    .form-group
+      %label.form-label Input
+      %input.form-control{type:'text', placeholder:"Some delicious placeholder text"}
+    .form-group
+      %label.form-label Input disabled
+      %input.form-control{type:'text', value:"Some delicious readonly value text", disabled:"true"}
+    .form-group
+      %label.form-label Textarea
+      %textarea.form-control{rows:'1', placeholder:"Enter some long form content"}
+    .form-group.form-select
+      %label.form-label Select
+      %select{placeholder: "Please select"}
+        %option{value: ""}
+        %option{value:"Option 1"} Option 1
+        %option{value:"Option 2"} Option 2
+        %option{value:"Option 3"} Option 3
+        %option{value:"Option 4"} ABC
+        %option{value:"Option 5"} DEF
+        %option{value:"Option 6"} WHY
+        %option{value:"Option 7"} XYZ

package/src/pages/forms/form-grid.haml

@@ -1,17 +1,17 @@
----
-tags: "forms"
-title: Form grid
----
-
-.form-grid
-  .bg-gray-lighter.p-sm.rounded
-  .bg-gray-lighter.p-sm.rounded
-  .bg-gray-lighter.p-sm.rounded
-.p-xs
-.form-grid
-  .form-group
-    .form-label.bg-gray-lightest.p-xs.rounded form-label
-    .form-control.bg-gray-lighter.p-xs.rounded form-control
-  .form-group
-    .form-label.bg-gray-lightest.p-xs.rounded form-label
+---
+tags: "forms"
+title: Form grid
+---
+
+.form-grid
+  .bg-gray-lighter.p-sm.rounded
+  .bg-gray-lighter.p-sm.rounded
+  .bg-gray-lighter.p-sm.rounded
+.p-xs
+.form-grid
+  .form-group
+    .form-label.bg-gray-lightest.p-xs.rounded form-label
+    .form-control.bg-gray-lighter.p-xs.rounded form-control
+  .form-group
+    .form-label.bg-gray-lightest.p-xs.rounded form-label
     .form-control.bg-gray-lighter.p-xs.rounded form-control

package/src/pages/forms/form_grid_narrow.haml

@@ -1,19 +1,19 @@
----
-tags: "forms"
-title: Form grid narrow
----
-
-%p.mb-heading Use the narrow version of form-grid for checkboxes and radio buttons to get a tighter spacing.
-
-.form-grid.narrow
-  .bg-gray-lighter.p-sm.rounded
-  .bg-gray-lighter.p-sm.rounded
-  .bg-gray-lighter.p-sm.rounded
-.p-xs
-.form-grid.narrow
-  .form-group
-    .form-label.bg-gray-lightest.p-xs.rounded form-label
-    .form-control.bg-gray-lighter.p-xs.rounded form-control
-  .form-group
-    .form-label.bg-gray-lightest.p-xs.rounded form-label
+---
+tags: "forms"
+title: Form grid narrow
+---
+
+%p.mb-heading Use the narrow version of form-grid for checkboxes and radio buttons to get a tighter spacing.
+
+.form-grid.narrow
+  .bg-gray-lighter.p-sm.rounded
+  .bg-gray-lighter.p-sm.rounded
+  .bg-gray-lighter.p-sm.rounded
+.p-xs
+.form-grid.narrow
+  .form-group
+    .form-label.bg-gray-lightest.p-xs.rounded form-label
+    .form-control.bg-gray-lighter.p-xs.rounded form-control
+  .form-group
+    .form-label.bg-gray-lightest.p-xs.rounded form-label
     .form-control.bg-gray-lighter.p-xs.rounded form-control

package/src/pages/forms/forms.haml

@@ -1,23 +1,23 @@
----
-tags: "forms"
-title: Forms
----
-
-.form-grid
-  .form-group
-    %label.form-label Input
-    %input.form-control{type:'text', placeholder:"Some delicious placeholder text"}
-  .form-group
-    %label.form-label Input disabled
-    %input.form-control{type:'text', value:"Some delicious readonly value text", disabled:"true"}
-  .form-group
-    %label.form-label Input with form hint
-    %div
-      %input.form-control{type:'text', placeholder:"Some delicious placeholder text"}
-      .form-hint Form-hint with some helpful 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.
-  .form-group
-    .field_with_errors
-      %label.form-label Input with errors
-    .field_with_errors
-      %input.form-control{type:'text', value:""}
+---
+tags: "forms"
+title: Forms
+---
+
+.form-grid
+  .form-group
+    %label.form-label Input
+    %input.form-control{type:'text', placeholder:"Some delicious placeholder text"}
+  .form-group
+    %label.form-label Input disabled
+    %input.form-control{type:'text', value:"Some delicious readonly value text", disabled:"true"}
+  .form-group
+    %label.form-label Input with form hint
+    %div
+      %input.form-control{type:'text', placeholder:"Some delicious placeholder text"}
+      .form-hint Form-hint with some helpful 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.
+  .form-group
+    .field_with_errors
+      %label.form-label Input with errors
+    .field_with_errors
+      %input.form-control{type:'text', value:""}
       .form-hint.error You made a mistake, which is why you see this form validation error message with some helpful 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.

package/src/pages/forms/index.njk

@@ -1,7 +1,7 @@
----
-layout: base
-permalink: forms/
----
-
-{% set collection = collections.forms %}
+---
+layout: base
+permalink: forms/
+---
+
+{% set collection = collections.forms %}
 {% include "page-with-sidebar.njk" %}

package/src/pages/forms/radiobuttons.haml

@@ -1,50 +1,50 @@
----
-tags: forms
-title: Radiobuttons
----
-
-.form-grid.single.narrow.mb-3
-  .form-radio
-    %input#radio1{type:'radio', checked:'true', name:'radio-group', value:'1'}
-    %label{for:'radio1'} Option 1
-  .form-radio
-    %input#radio2{type:'radio', name:'radio-group', value:'2'}
-    %label{for:'radio2'} Option 2
-  .form-radio
-    %input#radio3{type:'radio', name:'radio-group', value:'3'}
-    %label{for:'radio3'} Option 3
-  .form-radio.disabled
-    %input#radio4{type:'radio', name:'radio-group', value:'4', disabled:'true'}
-    %label{for:'radio4'} Disabled
-
-.form-grid.single.narrow.mb-3
-  .form-radio
-    .field_with_errors
-      %input#radio1{type:'radio', name:'radio-group', value:'1'}
-    %label{for:'radio1'} Option 1
-  .form-radio
-    .field_with_errors
-      %input#radio2{type:'radio', name:'radio-group', value:'2'}
-    %label{for:'radio2'} Option 2
-  .form-radio.disabled
-    .field_with_errors
-      %input#radio4{type:'radio', name:'radio-group', value:'4', disabled:'true'}
-    %label{for:'radio4'} Disabled
-  .form-hint.error
-    You made a mistake, which is why you see this form validation error message with some helpful 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.
-
-
-
-.form-grid.single.narrow.bg-black.p-3
-  .form-radio.inverted
-    %input#radio6{type:'radio', checked:'true', name:'radio-group2', value:'1'}
-    %label{for:'radio6'} Option 1
-  .form-radio.inverted
-    %input#radio7{type:'radio', name:'radio-group2', value:'2'}
-    %label{for:'radio7'} Option 2
-  .form-radio.inverted
-    %input#radio8{type:'radio', name:'radio-group2', value:'3'}
-    %label{for:'radio8'} Option 3
-  .form-radio.inverted.disabled
-    %input#radio9{type:'radio', name:'radio-group2', value:'4', disabled:'true'}
-    %label{for:'radio9'} Disabled
+---
+tags: forms
+title: Radiobuttons
+---
+
+.form-grid.single.narrow.mb-3
+  .form-radio
+    %input#radio1{type:'radio', checked:'true', name:'radio-group', value:'1'}
+    %label{for:'radio1'} Option 1
+  .form-radio
+    %input#radio2{type:'radio', name:'radio-group', value:'2'}
+    %label{for:'radio2'} Option 2
+  .form-radio
+    %input#radio3{type:'radio', name:'radio-group', value:'3'}
+    %label{for:'radio3'} Option 3
+  .form-radio.disabled
+    %input#radio4{type:'radio', name:'radio-group', value:'4', disabled:'true'}
+    %label{for:'radio4'} Disabled
+
+.form-grid.single.narrow.mb-3
+  .form-radio
+    .field_with_errors
+      %input#radio1{type:'radio', name:'radio-group', value:'1'}
+    %label{for:'radio1'} Option 1
+  .form-radio
+    .field_with_errors
+      %input#radio2{type:'radio', name:'radio-group', value:'2'}
+    %label{for:'radio2'} Option 2
+  .form-radio.disabled
+    .field_with_errors
+      %input#radio4{type:'radio', name:'radio-group', value:'4', disabled:'true'}
+    %label{for:'radio4'} Disabled
+  .form-hint.error
+    You made a mistake, which is why you see this form validation error message with some helpful 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.
+
+
+
+.form-grid.single.narrow.bg-black.p-3
+  .form-radio.inverted
+    %input#radio6{type:'radio', checked:'true', name:'radio-group2', value:'1'}
+    %label{for:'radio6'} Option 1
+  .form-radio.inverted
+    %input#radio7{type:'radio', name:'radio-group2', value:'2'}
+    %label{for:'radio7'} Option 2
+  .form-radio.inverted
+    %input#radio8{type:'radio', name:'radio-group2', value:'3'}
+    %label{for:'radio8'} Option 3
+  .form-radio.inverted.disabled
+    %input#radio9{type:'radio', name:'radio-group2', value:'4', disabled:'true'}
+    %label{for:'radio9'} Disabled