testio-tailwind 0.8.7 → 1.1.0

package/src/assets/stylesheets/components/markdown_trix_styles.css

@@ -26,7 +26,7 @@
   }
 
   p {
-    @apply mb-xs;
+    @apply mb-xs leading-7;
   }
 
   em {
@@ -141,7 +141,7 @@
   }
 
   ol > li {
-    @apply mb-md;
+    @apply mb-md leading-6;
     counter-increment: list-counter;
     position: relative;
     padding-left: 40px;
@@ -150,7 +150,7 @@
   ol > li::before {
     @apply absolute block w-spacing h-spacing pt-xxs left-0 overflow-visible text-center bg-gray-lighter;
     content: counter(list-counter);
-    top: -8px;
+    top: -2px;
     font-size: 18px;
     line-height: 1;
     border-radius: 50%;
@@ -186,7 +186,7 @@
 
   ol ol > li::before, ul ol > li::before {
     @apply w-md h-md text-base font-medium;
-    top: -1px;
+    top: 2px;
     padding-top: 2px;
     line-height: 1.2;
   }

package/src/assets/stylesheets/components/modals.css

@@ -81,13 +81,6 @@
   opacity: 0.25;
 }
 
-.btn.disabled,
-:disabled.btn {
-  @apply bg-transparent text-disabled;
-  background-image: url("/assets/images/btn-disabled-petrol.png");
-  background-repeat: repeat;
-}
-
 /* prevent autoclosing when clicking on fade bg */
 
 .modal-wrapper[open].fade-close-disabled .modal-trigger::before {

package/src/assets/stylesheets/components/tables.css

@@ -4,7 +4,7 @@
 
   th,
   td {
-    @apply p-xs align-middle border-t border-bordercolor;
+    @apply py-xs px-sm align-middle border-t border-bordercolor;
   }
 
   thead th {
@@ -106,4 +106,282 @@
 
 .table tr:has(.highlight-parent-row:hover) {
   @apply text-white bg-link-hover cursor-pointer;
-}
+}
+
+
+.table-standard {
+  @apply w-full;
+}
+
+.table-standard th, .table-standard td {
+  @apply text-left w-0 md:whitespace-nowrap last:w-auto align-top;
+}
+
+.table-standard th.cell-full-width, .table-standard td.cell-full-width {
+  @apply w-full;
+}
+
+.table-standard th {
+  @apply pb-2.5 pr-spacing last:pr-0;
+}
+
+.table-standard tr {
+  @apply border-t first:border-0;
+}
+
+.table-standard tfoot {
+  @apply border-t;
+}
+
+.table-standard tfoot.sum {
+  @apply border-t-4 border-double;
+}
+
+.table-standard td {
+  @apply py-2.5 pr-spacing last:pr-0;
+}
+
+.table-standard th.wrap, 
+.table-standard td.wrap {
+  @apply whitespace-normal break-words;
+  word-break: break-word;
+}
+
+.table-standard th.pre, 
+.table-standard td.pre {
+  @apply whitespace-pre-line break-words;
+  word-break: break-word;
+}
+
+td.action-cell,
+.table-cellstyle td.action-cell {
+  @apply text-right min-w-auto space-x-1.5 whitespace-nowrap;
+}
+
+.table-cellstyle {
+  border-spacing: 2px;
+  border-collapse: separate;
+}
+
+.table-cellstyle th {
+  @apply relative align-middle pl-2.5 pr-0.5 py-1 text-sm font-normal;
+}
+
+.table-cellstyle th.missing,
+.table-cellstyle th.inprogress,
+.table-cellstyle th.completed {
+  @apply pr-14;
+}
+
+.table-cellstyle th label {
+  @apply text-sm;
+}
+
+.table-cellstyle th.missing::after, 
+.table-cellstyle th.inprogress::after, 
+.table-cellstyle th.complete::after, 
+.table-cellstyle .cell-editable::after {
+  @apply absolute inline-block w-icon-xs h-icon-xs right-2.5 top-2;
+  content: "";
+  mask-repeat: no-repeat;
+}
+
+.table-cellstyle th.missing::after {
+  @apply right-0 bg-gray-600;
+  -webkit-mask-image: url("$package_path/images/exclamation.svg");
+  mask-image: url("$package_path/images/exclamation.svg");
+}
+
+.table-cellstyle th.inprogress::after {
+  @apply bg-gray-600;
+  -webkit-mask-image: url("$package_path/images/clock.svg");
+  mask-image: url("$package_path/images/clock.svg");
+}
+
+.table-cellstyle th.completed::after {
+  @apply h-2.5 top-2.5 right-1.5 bg-success;
+  -webkit-mask-image: url("$package_path/images/check-thick.svg");
+  mask-image: url("$package_path/images/check-thick.svg");
+}
+
+.table-cellstyle td {
+  @apply relative px-2.5 py-1.5 last:pr-3 min-w-cell min-h-11 align-top text-sm bg-gray-100;
+}
+
+.table-cellstyle td label {
+  @apply text-sm;
+}
+
+.table-cellstyle td::after {
+  @apply absolute inline-block w-icon-xs h-icon-xs right-2.5 top-2;
+  content: "";
+  mask-repeat: no-repeat;
+}
+
+.table-cellstyle td.missing {
+  @apply italic bg-transparent text-disabled;
+}
+
+.table-cellstyle td.inprogress {
+  @apply pr-9 italic bg-gray-200;
+}
+
+.table-cellstyle td.inprogress::after {
+  @apply bg-gray-600;
+  -webkit-mask-image: url("$package_path/images/clock.svg");
+  mask-image: url("$package_path/images/clock.svg");
+}
+
+.table-cellstyle td.completed {
+  @apply pr-8;
+}
+
+.table-cellstyle .completed::after {
+  @apply h-2.5 top-2.5 right-1.5 bg-success;
+  -webkit-mask-image: url("$package_path/images/check-thick.svg");
+  mask-image: url("$package_path/images/check-thick.svg");
+}
+
+.table-cellstyle td.cell-editable, 
+.table-cellstyle td.cell-editable.missing, 
+.table-cellstyle td.cell-editable.inprogress, 
+.table-cellstyle td.cell-editable.completed {
+  @apply w-full h-full p-0;
+  word-break: break-all;
+
+  &::after {
+    content: none;
+  }
+}
+
+.cell-editable .btn {
+  @apply w-btn-sm items-start justify-center px-xxs py-xs text-white;
+}
+
+.cell-content-editable, a.cell-content-editable {
+  @apply flex justify-between w-full h-full pl-2.5 pr-9 py-1.5 text-black no-underline font-normal hover:bg-link-hover hover:text-white cursor-pointer;
+  word-break: break-word;
+  
+  &::after {
+    @apply absolute inline-block w-icon-xs h-icon-xs right-2.5 top-2 bg-primary;
+    content: "";
+    mask-repeat: round;
+    -webkit-mask-image: url("$package_path/images/edit.svg");
+    mask-image: url("$package_path/images/edit.svg");
+  }
+}
+
+.cell-content-editable:hover::after, a.cell-content-editable.cell-content-editable:hover::after  {
+  @apply bg-white;
+}
+
+.cell-edit-state {
+  @apply flex justify-between items-stretch w-full h-full p-0 border-2 border-bordercolor;
+}
+
+.cell-edit-state .edit-form {
+  @apply flex justify-between items-stretch h-full w-full;
+}
+
+.cell-edit-state textarea {
+  @apply min-h-full w-full text-sm rounded-none border-none;
+}
+
+.cell-actions {
+  @apply flex flex-col;
+}
+
+.cell-actions .btn {
+  @apply flex-1 w-btn-sm items-center border-0 first:border-b-1 border-white rounded-none;
+}
+
+/*////// Grid Tables //////*/
+
+.table-grid {
+  @apply grid grid-flow-col min-w-full place-items-stretch gap-0.5;
+  grid-auto-flow: row;
+}
+
+.table-grid thead,
+.table-grid tbody,
+.table-grid tr {
+  display: contents;
+}
+
+.table-grid th, 
+.table-grid td {
+  @apply w-full h-full whitespace-normal;
+}
+
+.table-grid th {
+  @apply flex justify-start items-center min-h-8;
+}
+
+.table-grid .cell-edit-state textarea {
+  @apply flex-1;
+}
+
+/*////// Selectable cells //////*/
+
+.table-cellstyle .cell-selectable {
+  @apply w-full h-full p-0;
+}
+
+.table-cellstyle .cell-selectable input {
+  @apply absolute left-2.5 top-1.5 h-5 w-5 border-black border rounded bg-transparent;
+}
+
+.table-cellstyle .cell-selectable label {
+  @apply block w-full h-full pl-10 py-1.5 pr-10 hover:bg-link-hover hover:text-white cursor-pointer;
+}
+
+.table-cellstyle .cell-selectable input[type=checkbox]:checked {
+  @apply text-white border-black bg-black;
+  background-image: none;
+
+  &::after {
+    @apply block w-full h-full bg-white;
+    content: "";
+    mask-image: url("$package_path/images/checkbox-background.svg");
+    -webkit-mask-image: url("$package_path/images/checkbox-background.svg");
+    mask-repeat: no-repeat;
+  }
+}
+
+.table-cellstyle .cell-selectable input:checked + label {
+  @apply bg-primary text-white hover:bg-link-hover;
+}
+
+.table-cellstyle td.cell-selectable.inprogress,
+.table-cellstyle td.cell-selectable.completed {
+  @apply pr-0;
+  &::after {
+    content: none;
+  }
+}
+
+.table-cellstyle td.cell-selectable label::after {
+  @apply absolute inline-block w-icon-xs h-icon-xs right-2.5 top-2;
+  content: "";
+  mask-repeat: no-repeat;
+}
+
+.table-cellstyle td.cell-selectable.inprogress label::after {
+  @apply bg-gray-600;
+  -webkit-mask-image: url("$package_path/images/clock.svg");
+  mask-image: url("$package_path/images/clock.svg");
+}
+
+.table-cellstyle .cell-selectable.completed label::after {
+  @apply h-2.5 top-2.5 right-1.5 bg-success;
+  -webkit-mask-image: url("$package_path/images/check-thick.svg");
+  mask-image: url("$package_path/images/check-thick.svg");
+}
+
+
+.table-cellstyle td.cell-selectable.inprogress label:hover::after,
+.table-cellstyle td.cell-selectable.completed label:hover::after,
+.table-cellstyle .cell-selectable.inprogress input:checked + label::after,
+.table-cellstyle .cell-selectable.completed input:checked + label::after {
+  @apply bg-white;
+}

package/src/assets/stylesheets/components/tags.css

@@ -13,7 +13,7 @@
 }
 
 .tag .icon {
-  @apply text-xxs h-icon-xxs;
+  @apply text-icon-xxs h-icon-xxs;
 }
 
 .tag.sm {
@@ -26,4 +26,18 @@
 
 .tag.teamleader-verified {
   @apply text-white bg-gray-dark;
-} 
+}
+
+.tag.popover-tag {
+  @apply text-base h-auto hover:text-white hover:bg-link-hover cursor-pointer;
+  padding-top: 4px;
+  padding-bottom: 4px;
+}
+
+.tag.popover-tag .icon {
+  @apply h-icon-xs mr-icon-spacing text-icon-xs;
+}
+
+.tag.popover-tag:hover .icon {
+  @apply text-white;
+}

package/src/assets/stylesheets/postcss.config.js

@@ -1,8 +1,16 @@
+const tailwindConfig = require('./tailwind.config');
+
 module.exports = {
   plugins: [
     require('postcss-import'),
     require('tailwindcss/nesting'),
-    require('tailwindcss')('./src/assets/stylesheets/tailwind.config.js'),
+    require('tailwindcss')({
+      content: [
+        './src/**/*.{html,js,haml,pug,njk}',
+      ],
+      theme: tailwindConfig.theme,
+      plugins: tailwindConfig.plugins,
+    }),
     require('postcss-simple-vars')(
       {
           variables: {

package/src/assets/stylesheets/tailwind.config.js

@@ -1,7 +1,4 @@
 module.exports = {
-  content: [
-    './src/**/*.{html,js,haml,pug}',
-  ],
   theme: {
     colors: {
       transparent: 'transparent',
@@ -175,6 +172,7 @@ module.exports = {
         'lg': '50px',
         'xl': '60px',
         'xxl': '90px',
+        'spacing-2xl': '120px',
         'spacing-3xl': '180px',
         'spacing-4xl': '240px',
         'spacing-5xl': '300px',
@@ -236,6 +234,20 @@ module.exports = {
         '36': '9rem',
         '56': '14rem',
         'spacing': '30px',
+        'xxs': '5px',
+        'xs': '10px',
+        'sm': '15px',
+        'md': '20px',
+        'lg': '50px',
+        'xl': '60px',
+        'xxl': '90px',
+        'spacing-2xl': '150px',
+        'spacing-3xl': '180px',
+        'spacing-4xl': '240px',
+        'spacing-5xl': '300px',
+        'spacing-6xl': '360px',
+        'spacing-7xl': '420px',
+        'spacing-8xl': '480px'
       },
       minHeight: {
         'auto': 'auto',

package/src/index.pug

@@ -18,14 +18,43 @@ main.main-content.main-content-padding.flex.flex-col.justify-start.items-center
         li PostCSS
     .section-header
       h3.section-title Integration
-    .trix-content
-      p.max-w-paragraph
-        | Import 
-        code app.css
-        | to get all relevant modules and files.
-        | Be sure to use 
-        code tailwind.config.js
-        | from the package to have all relevant variables ready to use. Otherwise you might get errors due to missing variables.
+    .trix-content.max-w-paragraph
+      ol
+        li
+          | Import 
+          code app.css
+          | to get all relevant modules and files.
+        li Use the following PostCss configuration in your 
+          code postcss.config.js 
+          | file:
+          pre.mt-xs
+            code.language-js
+              | const tailwindConfig = require('PATH_TO_TAILWINDCONFIG');
+              | 
+              | module.exports = {
+              |   plugins: [
+              |     require('postcss-import'),
+              |     require('tailwindcss/nesting'),
+              |     require('tailwindcss')({
+              |       content: [
+              |         './YOUR_PATH_HERE/**/*.{html,js,haml,pug,njk}',
+              |       ],
+              |       theme: tailwindConfig.theme,
+              |       plugins: tailwindConfig.plugins,
+              |     }),
+              |     require('autoprefixer')
+              |   ]
+              | }
+        li Change the path to the tailwind.config.js file from the package.
+          pre.mt-xs
+            code.language-js
+              | const tailwindConfig = require('PATH_TO_TAILWINDCONFIG');
+        li Add all paths to your layouts and components in the content block. Otherwise TailWind will not generate your required classes.
+          pre.mt-xs
+            code.language-js
+              |  content: [
+              |    './YOUR_PATH_HERE/**/*.{html,js,haml,pug,njk}',
+              |  ],
     .section-header
       h3.section-title Simple start
     p.max-w-paragraph.mb-heading To get started without any customization just download the current compiled CSS below and implement your components with the provided code.

package/src/pages/buttons/block.haml

@@ -28,7 +28,7 @@ tags: button
         %button.btn.btn-block{disabled: "disabled"} Disabled
 
   .col-sm-6
-    .bg-dark.p-2
+    .bg-petrol.p-2
       %ul.list-vertical
         %li
           %button.btn.btn-block.btn-primary-inverted primary-inverted

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

@@ -30,7 +30,7 @@ tags: button
   %li
     %button.btn.btn-sm.btn-link{disabled: "disabled"} Link
 
-.bg-dark.p-2
+.bg-petrol.p-2
   %ul.list-inline
     %li
       %button.btn.btn-sm.btn-primary-inverted primary-inverted

package/src/pages/buttons/buttons.haml

@@ -41,7 +41,7 @@ tags: button
   %li
     %button.btn{disabled: "disabled"} Disabled
 
-.bg-dark.p-2
+.bg-petrol.p-2
   %ul.list-inline
     %li
       %button.btn.btn-primary-inverted primary-inverted

package/src/pages/buttons/buttons_input.haml

@@ -25,7 +25,7 @@ tags: button
   %li
     %input.btn{type:'submit', value:'Disabled', disabled:"true"}
 
-.bg-dark.p-2
+.bg-petrol.p-2
   %ul.list-inline
     %li
       %input.btn.btn-primary-inverted{type:'submit', value:'primary-inverted'}

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

@@ -35,7 +35,7 @@ tags: button
     %button.btn.btn-primary.btn-square{disabled: "disabled"}
       .icon.icon-check-circle
 
-.bg-dark.p-2
+.bg-petrol.p-2
   %ul.list-inline
     %li
       %button.btn.btn-primary-inverted.btn-square

package/src/pages/ci.haml

@@ -0,0 +1,35 @@
+---
+layout: base
+permalink: "ci"
+---
+
+%main.main-content.main-content-padding
+  %h1.mb-heading-lg Corporate identity
+  %section.section
+    .grid.gap-10.grid-cols-2{class:"xl:grid-cols-3 2xl:grid-cols-6"}
+      %a.block{href:"/assets/images/logo-testio/testio_horizontal_black.svg"}
+        .flex.justify-center.bg-gray.p-md
+          %img.h-xl{src:"/assets/images/logo-testio/testio_horizontal_black.svg"}
+        .text-xs.mt-2 horizontal black
+      %a.block{href:"/assets/images/logo-testio/testio_horizontal_white.svg"}
+        .flex.justify-center.bg-gray.p-md
+          %img.h-xl{src:"/assets/images/logo-testio/testio_horizontal_white.svg"}
+        .text-xs.mt-2 horizontal white
+      %a.block{href:"/assets/images/logo-testio/testio_horizontal_purpleteal_white.svg"}
+        .flex.justify-center.bg-gray.p-md
+          %img.h-xl{src:"/assets/images/logo-testio/testio_horizontal_purpleteal_black.svg"}
+        .text-xs.mt-2 horizontal purple teal black
+      %a.block{href:"/assets/images/logo-testio/testio_horizontal_purpleteal_black.svg"}
+        .flex.justify-center.bg-gray.p-md
+          %img.h-xl{src:"/assets/images/logo-testio/testio_horizontal_purpleteal_white.svg"}
+        .text-xs.mt-2 horizontal purple teal white
+      %a.block{href:"/assets/images/logo-testio/testio_horizontal_tealpurple_white.svg"}
+        .flex.justify-center.bg-gray.p-md
+          %img.h-xl{src:"/assets/images/logo-testio/testio_horizontal_tealpurple_black.svg"}
+        .text-xs.mt-2 horizontal teal purple black
+      %a.block{href:"/assets/images/logo-testio/testio_horizontal_tealpurple_black.svg"}
+        .flex.justify-center.bg-gray.p-md
+          %img.h-xl{src:"/assets/images/logo-testio/testio_horizontal_tealpurple_white.svg"}
+        .text-xs.mt-2 horizontal teal purple white
+
+