testio-tailwind 2.2.0 → 3.0.0

package/src/pages/buttons/buttons.haml

@@ -3,7 +3,7 @@ title: Buttons
 tags: button
 ---
 
-%ul.list-inline
+%ul.list-inline.mb-md
   %li
     %button.btn.btn-primary Primary
   %li
@@ -41,7 +41,7 @@ tags: button
   %li
     %button.btn{disabled: "disabled"} Disabled
 
-.bg-petrol.p-2
+.bg-actionbar.p-5
   %ul.list-inline
     %li
       %button.btn.btn-primary-inverted primary-inverted

package/src/pages/buttons/buttons_input.haml

@@ -3,7 +3,7 @@ title: Input buttons
 tags: button
 ---
 
-%ul.list-inline
+%ul.list-inline.mb-md
   %li
     %input.btn.btn-primary{type:'submit', value:'Input btn'}
   %li
@@ -25,7 +25,7 @@ tags: button
   %li
     %input.btn{type:'submit', value:'Disabled', disabled:"true"}
 
-.bg-petrol.p-2
+.bg-actionbar.p-5
   %ul.list-inline
     %li
       %input.btn.btn-primary-inverted{type:'submit', value:'primary-inverted'}

package/src/pages/buttons/square-buttons.haml

@@ -3,7 +3,7 @@ title: Square Buttons
 tags: button
 ---
 
-%ul.list-inline
+%ul.list-inline.mb-md
   %li
     %button.btn.btn-primary.btn-square
       .icon.icon-check-circle
@@ -35,7 +35,7 @@ tags: button
     %button.btn.btn-primary.btn-square{disabled: "disabled"}
       .icon.icon-check-circle
 
-.bg-petrol.p-2
+.bg-actionbar.p-5
   %ul.list-inline
     %li
       %button.btn.btn-primary-inverted.btn-square

package/src/pages/charts/area.haml

@@ -114,7 +114,7 @@ title: Area
           }
 .row
   .col-xl-6
-    .card.bg-gray-lightest.p-md.mb-xs
+    .card.p-md.mb-xs
       .echarts-container#echarts-area-1
     %details.listitem.mb-md
       %summary.listitem-header
@@ -164,7 +164,7 @@ title: Area
             :plain
               export const colorBlueLight = '#21bef4';
   .col-xl-6
-    .card.bg-gray-lightest.mb-xs.p-xs
+    .card.mb-xs.p-xs
       .echarts-container#echarts-area-2
     %details.listitem.mb-md
       %summary.listitem-header

package/src/pages/charts/bar_horizontal.haml

@@ -118,7 +118,7 @@ title: Bar chart horizontal
             left: 'center',
             bottom: 'bottom'
           };
-.card.bg-gray-lightest.p-md.mb-xs
+.card.p-md.mb-xs
   .echarts-container#echarts-bar-horizontal-1
 %details.listitem.mb-lg
   %summary.listitem-header
@@ -203,7 +203,7 @@ title: Bar chart horizontal
             }
           ];
 %p.mt-md.mb-xs With legend and long feature names
-.card.bg-gray-lightest.p-md.mb-xs
+.card.p-md.mb-xs
   .echarts-container#echarts-bar-horizontal-2
 %details.listitem.mb-lg
   %summary.listitem-header

package/src/pages/charts/bar_vertical.haml

@@ -103,7 +103,7 @@ title: Bar chart vertical
             }
 
 %p.mt-md.mb-xs With adaptive item width
-.card.bg-gray-lightest.p-md.mb-xs
+.card.p-md.mb-xs
   .echarts-container#echarts-bar-vertical-1
 %details.listitem.mb-md
   %summary.listitem-header
@@ -159,7 +159,7 @@ title: Bar chart vertical
           export const colorNeutral = '#e6e6e6';
           export const colorInfo = '#326dd1';
           export const colorBlueLight = '#21bef4';
-.card.bg-gray-lightest.p-md.mb-xs
+.card.p-md.mb-xs
   .echarts-container#echarts-bar-vertical-2
 %details.listitem.mb-md
   %summary.listitem-header
@@ -209,7 +209,7 @@ title: Bar chart vertical
           export const colorNeutral = '#e6e6e6';
           export const colorInfo = '#326dd1';
           export const colorBlueLight = '#21bef4';
-.card.bg-gray-lightest.p-xs.mb-xs
+.card.p-xs.mb-xs
   .echarts-container#echarts-bar-vertical-3
 %details.listitem.mb-md
   %summary.listitem-header
@@ -247,7 +247,7 @@ title: Bar chart vertical
             'Just another feature name'
           ];
 %p.mt-md.mb-xs With fixed item width
-.card.bg-gray-lightest.p-md.mb-md
+.card.p-md.mb-md
   .echarts-container#echarts-bar-vertical-1-fixed
 %details.listitem.mb-md
   %summary.listitem-header
@@ -303,7 +303,7 @@ title: Bar chart vertical
           export const colorNeutral = '#e6e6e6';
           export const colorInfo = '#326dd1';
           export const colorBlueLight = '#21bef4';
-.card.bg-gray-lightest.p-md.mb-md
+.card.p-md.mb-md
   .echarts-container#echarts-bar-vertical-2-fixed
 %details.listitem.mb-md
   %summary.listitem-header
@@ -353,7 +353,7 @@ title: Bar chart vertical
           export const colorNeutral = '#e6e6e6';
           export const colorInfo = '#326dd1';
           export const colorBlueLight = '#21bef4';
-.card.bg-gray-lightest.p-md
+.card.p-md
   .echarts-container#echarts-bar-vertical-3-fixed
 %details.listitem.mb-md
   %summary.listitem-header

package/src/pages/charts/donut.haml

@@ -125,7 +125,7 @@ title: Donut chart
             };
 .row
   .col-lg-6.col-xl-4
-    .card.bg-gray-lightest.p-md.mb-xs
+    .card.p-md.mb-xs
       .echarts-container#echarts-donut-1
     %details.listitem.mb-md
       %summary.listitem-header
@@ -174,7 +174,7 @@ title: Donut chart
               export const colorInfo = '#326dd1';
               export const colorBlueLight = '#21bef4';
   .col-lg-6.col-xl-4
-    .card.bg-gray-lightest.p-md.mb-xs
+    .card.p-md.mb-xs
       .echarts-container#echarts-donut-2
     %details.listitem.mb-md
       %summary.listitem-header
@@ -223,7 +223,7 @@ title: Donut chart
               export const colorInfo = '#326dd1';
               export const colorBlueLight = '#21bef4';
   .col-lg-6.col-xl-4
-    .card.bg-gray-lightest.p-md.mb-xs
+    .card.p-md.mb-xs
       .echarts-container#echarts-donut-testcases
     %details.listitem.mb-md
       %summary.listitem-header

package/src/pages/charts/gauge.haml

@@ -97,7 +97,7 @@ title: Gauge
             }
 .row
   .col-lg-6.col-xl-4
-    .card.bg-gray-lightest.p-md.mb-xs
+    .card.p-md.mb-xs
       .echarts-container#echarts-gauge-1
     %details.listitem.mb-md
       %summary.listitem-header
@@ -136,7 +136,7 @@ title: Gauge
             :plain
               export const colorSuccess = '#8cbd24';
   .col-lg-6.col-xl-4
-    .card.bg-gray-lightest.p-md.mb-xs
+    .card.p-md.mb-xs
       .echarts-container#echarts-gauge-2
     %details.listitem.mb-md
       %summary.listitem-header
@@ -175,7 +175,7 @@ title: Gauge
             :plain
               export const colorDanger = '#FF3131';
   .col-lg-6.col-xl-4
-    .card.bg-gray-lightest.p-md.mb-xs
+    .card.p-md.mb-xs
       .echarts-container#echarts-gauge-3
     %details.listitem.mb-md
       %summary.listitem-header

package/src/pages/examples/layout-actionbar.haml

@@ -8,7 +8,7 @@ tags: "examples"
   %h1.mb-heading Layout with actionbar
   %section.section
     %h4.mb-heading Structure
-    .grid.gap-1px.p-xs.bg-gray-lightest.rounded
+    .grid.gap-1px.p-xs.bg-gray-lightest.rounded.text-black
       %p .app-body
       .p-xs.pl-md.bg-petrol-dark.text-white.rounded-top .header
       .bg-white.p-xs.pl-md.h-xxl .main-content

package/src/pages/examples/layout-basic.haml

@@ -8,7 +8,7 @@ tags: "examples"
   %h1.mb-heading Basic layout
   %section.section
     %h4.mb-heading Structure
-    .grid.gap-1px.p-xs.bg-gray-lightest.rounded
+    .grid.gap-1px.p-xs.bg-gray-lightest.rounded.text-black
       %p .app-body
       .p-xs.pl-md.bg-petrol-dark.text-white.rounded-top .header
       .bg-white.p-xs.pl-md.h-xxl .main-content

package/src/pages/examples/layout-sidebar.haml

@@ -34,7 +34,7 @@ tags: "examples"
 %main.main-content.main-content-padding
   %h1.mb-heading Layout with sidebar
   %section.section
-    .grid.gap-1px.p-xs.bg-gray-lightest.rounded
+    .grid.gap-1px.p-xs.bg-gray-lightest.rounded.text-black
       %p .app-body
       .p-xs.pl-md.bg-petrol-dark.text-white.rounded-top .header
       .grid.grid-cols-2-auto-fr.gap-1px

package/src/pages/forms/form_grid.haml

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

package/src/pages/forms/form_grid_narrow.haml

@@ -6,14 +6,14 @@ 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
+  .bg-card.p-sm.rounded
+  .bg-card.p-sm.rounded
+  .bg-card.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-label.bg-card.p-xs.rounded form-label
+    .form-control.bg-card.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
+    .form-label.bg-card.p-xs.rounded form-label
+    .form-control.bg-card.p-xs.rounded form-control

package/src/pages/issuing/brand_logos.haml

@@ -20,3 +20,7 @@ title: Brand logos
     .flex.justify-center.bg-gray.p-md
       %img.h-xl{src:"/assets/images/assets_issuing/logo_discover.svg"}
     .text-xs.mt-2 Discover white SVG
+  %a.block{href:"/assets/images/assets_issuing/logo_bancontact.svg"}
+    .flex.justify-center.bg-gray.p-md
+      %img.h-xl{src:"/assets/images/assets_issuing/logo_bancontact.svg"}
+    .text-xs.mt-2 Bancontact white SVG

package/src/pages/layout/app_layout.haml

@@ -3,7 +3,7 @@ tags: layout
 title: App layout structure
 ---
 
-.grid.gap-1px.p-xs.bg-gray-lightest.rounded
+.grid.gap-1px.p-xs.bg-card.rounded
   %p.mb-heading .app-body
   .p-xs.pl-md.bg-petrol-dark.text-white.rounded-t .header
   .grid.grid-cols-auto-fr.gap-1px

package/src/pages/layout/margins.haml

@@ -5,49 +5,49 @@ title: Margins
 
 %dl.list-inline
   %dd xxs
-  %dt.flex.flex-row.bg-gray-lightest
+  %dt.flex.flex-row.bg-card
     .h-xs.w-xs.bg-gray.mt-xxs.mr-xxs
     .h-xs.w-xs.bg-gray.mr-xxs
     .h-xs.w-xs.bg-gray.mb-xxs
     .h-xs.w-xs.bg-gray.ml-xxs
   %dd xs
-  %dt.flex.flex-row.bg-gray-lightest
+  %dt.flex.flex-row.bg-card
     .h-xs.w-xs.bg-gray.mt-xs.mr-xs
     .h-xs.w-xs.bg-gray.mr-xs
     .h-xs.w-xs.bg-gray.mb-xs
     .h-xs.w-xs.bg-gray.ml-xs
   %dd sm
-  %dt.flex.flex-row.bg-gray-lightest
+  %dt.flex.flex-row.bg-card
     .h-xs.w-xs.bg-gray.mt-sm.mr-sm
     .h-xs.w-xs.bg-gray.mr-sm
     .h-xs.w-xs.bg-gray.mb-sm
     .h-xs.w-xs.bg-gray.ml-sm
   %dd md
-  %dt.flex.flex-row.bg-gray-lightest
+  %dt.flex.flex-row.bg-card
     .h-xs.w-xs.bg-gray.mt-md.mr-md
     .h-xs.w-xs.bg-gray.mr-md
     .h-xs.w-xs.bg-gray.mb-md
     .h-xs.w-xs.bg-gray.ml-md
   %dd spacing
-  %dt.flex.flex-row.bg-gray-lightest
+  %dt.flex.flex-row.bg-card
     .h-xs.w-xs.bg-gray.mt-spacing.mr-spacing
     .h-xs.w-xs.bg-gray.mr-spacing
     .h-xs.w-xs.bg-gray.mb-spacing
     .h-xs.w-xs.bg-gray.ml-spacing
   %dd lg
-  %dt.flex.flex-row.bg-gray-lightest
+  %dt.flex.flex-row.bg-card
     .h-xs.w-xs.bg-gray.mt-lg.mr-lg
     .h-xs.w-xs.bg-gray.mr-lg
     .h-xs.w-xs.bg-gray.mb-lg
     .h-xs.w-xs.bg-gray.ml-lg
   %dd xl
-  %dt.flex.flex-row.bg-gray-lightest
+  %dt.flex.flex-row.bg-card
     .h-xs.w-xs.bg-gray.mt-xl.mr-xl
     .h-xs.w-xs.bg-gray.mr-xl
     .h-xs.w-xs.bg-gray.mb-xl
     .h-xs.w-xs.bg-gray.ml-xl
   %dd xxl
-  %dt.flex.flex-row.bg-gray-lightest
+  %dt.flex.flex-row.bg-card
     .h-xs.w-xs.bg-gray.mt-xxl.mr-xxl
     .h-xs.w-xs.bg-gray.mr-xxl
     .h-xs.w-xs.bg-gray.mb-xxl

package/src/pages/layout/max_width.haml

@@ -3,7 +3,7 @@ tags: layout
 title: Max-width capped
 ---
 
-.card.bg-gray-lighter.p-sm.max-w-capped.mb-spacing
+.card.bg-card.p-sm.max-w-capped.mb-spacing
   %p Card with the class .max-width-capped. The card width will be capped to ensure readability. 
 %p.mb-sm.max-w-capped This class should also be applied to text elements to ensure readability in the case of an endless amount 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. 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.mb-sm.max-w-capped

package/src/pages/layout/paddings.haml

@@ -5,7 +5,7 @@ title: Paddings
 
 %dl.list-inline
   %dd xxs
-  %dt.flex.flex-row.items-start.bg-gray-lightest
+  %dt.flex.flex-row.items-start.bg-card
     .bg-gray-light.mr-xs.pt-xxs
       .bg-gray.h-xs.w-xs
     .bg-gray-light.mr-xs.pb-xxs
@@ -15,7 +15,7 @@ title: Paddings
     .bg-gray-light.mr-xs.pl-xxs
       .bg-gray.h-xs.w-xs
   %dd xs
-  %dt.flex.flex-row.items-start.bg-gray-lightest
+  %dt.flex.flex-row.items-start.bg-card
     .bg-gray-light.mr-xs.pt-xs
       .bg-gray.h-xs.w-xs
     .bg-gray-light.mr-xs.pb-xs
@@ -25,7 +25,7 @@ title: Paddings
     .bg-gray-light.mr-xs.pl-xs
       .bg-gray.h-xs.w-xs
   %dd sm
-  %dt.flex.flex-row.items-start.bg-gray-lightest
+  %dt.flex.flex-row.items-start.bg-card
     .bg-gray-light.mr-xs.pt-sm
       .bg-gray.h-xs.w-xs
     .bg-gray-light.mr-xs.pb-sm
@@ -35,7 +35,7 @@ title: Paddings
     .bg-gray-light.mr-xs.pl-sm
       .bg-gray.h-xs.w-xs
   %dd md
-  %dt.flex.flex-row.items-start.bg-gray-lightest
+  %dt.flex.flex-row.items-start.bg-card
     .bg-gray-light.mr-xs.pt-md
       .bg-gray.h-xs.w-xs
     .bg-gray-light.mr-xs.pb-md
@@ -45,7 +45,7 @@ title: Paddings
     .bg-gray-light.mr-xs.pl-md
       .bg-gray.h-xs.w-xs
   %dd spacing
-  %dt.flex.flex-row.items-start.bg-gray-lightest
+  %dt.flex.flex-row.items-start.bg-card
     .bg-gray-light.mr-xs.pt-spacing
       .bg-gray.h-xs.w-xs
     .bg-gray-light.mr-xs.pb-spacing
@@ -55,7 +55,7 @@ title: Paddings
     .bg-gray-light.mr-xs.pl-spacing
       .bg-gray.h-xs.w-xs
   %dd lg
-  %dt.flex.flex-row.items-start.bg-gray-lightest
+  %dt.flex.flex-row.items-start.bg-card
     .bg-gray-light.mr-xs.pt-lg
       .bg-gray.h-xs.w-xs
     .bg-gray-light.mr-xs.pb-lg
@@ -65,7 +65,7 @@ title: Paddings
     .bg-gray-light.mr-xs.pl-lg
       .bg-gray.h-xs.w-xs
   %dd xl
-  %dt.flex.flex-row.items-start.bg-gray-lightest
+  %dt.flex.flex-row.items-start.bg-card
     .bg-gray-light.mr-xs.pt-xl
       .bg-gray.h-xs.w-xs
     .bg-gray-light.mr-xs.pb-xl
@@ -75,7 +75,7 @@ title: Paddings
     .bg-gray-light.mr-xs.pl-xl
       .bg-gray.h-xs.w-xs
   %dd xxl
-  %dt.flex.flex-row.items-start.bg-gray-lightest
+  %dt.flex.flex-row.items-start.bg-card
     .bg-gray-light.mr-xs.pt-xxl
       .bg-gray.h-xs.w-xs
     .bg-gray-light.mr-xs.pb-xxl

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

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