testio-tailwind 0.8.7 → 1.0.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/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',

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
+
+  

package/src/pages/components/tags.haml

@@ -10,3 +10,54 @@ title: Tags
   .tag.teamleader-verified
     .icon.icon-verify-check.mr-xxs
     TL
+.list-tags.mt-xs
+  %details.popover-wrapper
+    %summary
+      .tag.popover-tag
+        .icon.icon-clock
+        Popover-tag
+    .popover-menu.info
+      .popover-title Popover title
+      .popover-content Popover content 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.
+      .popover-actions
+        .btn.btn-sm.btn-inverted Action
+  %details.popover-wrapper
+    %summary
+      .tag.popover-tag.bg-gray-lighter
+        .icon.icon-check-thick-centered.text-success
+        Popover-tag
+    .popover-menu.info
+      .popover-title Popover title
+      .popover-content Popover content 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.
+      .popover-actions
+        .btn.btn-sm.btn-inverted Action
+  %details.popover-wrapper
+    %summary
+      .tag.popover-tag.bg-info.text-white
+        .icon.icon-exclamation-circle-filled
+        Popover-tag
+    .popover-menu.info
+      .popover-title Popover title
+      .popover-content Popover content 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.
+      .popover-actions
+        .btn.btn-sm.btn-inverted Action
+  %details.popover-wrapper
+    %summary
+      .tag.popover-tag.bg-black.text-white
+        .icon.icon-blocked
+        Popover-tag
+    .popover-menu.info
+      .popover-title Popover title
+      .popover-content Popover content 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.
+      .popover-actions
+        .btn.btn-sm.btn-inverted Action
+  %details.popover-wrapper
+    %summary
+      .tag.popover-tag.bg-danger.text-white
+        .icon.icon-cancelled
+        Popover-tag
+    .popover-menu.info
+      .popover-title Popover title
+      .popover-content Popover content 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.
+      .popover-actions
+        .btn.btn-sm.btn-inverted Action

package/src/pages/typography/trix_styles.haml

@@ -51,18 +51,18 @@ title: Trix content styles
     %li Unordered list item
     %li Unordered list item with much more text and some serious lorem ipsum
     %li
-      %p Nesting lists is never a good idea, but should look nice anyway.  
+      Nesting lists is never a good idea, but should look nice anyway.  
       %ul
         %li Unordered nested list item
         %li Unordered nested list item with much more text and some serious lorem ipsum
         %li
-          %p Another level of nesting because why be constrained by reason? 
+          Another level of nesting because why be constrained by reason? 
           %ul
             %li Unordered nested list item
             %li Unordered nested list item with much more text and some serious lorem ipsum
             %li Another nested unordered list item
     %li
-      %p Let's nest an ordered OL just for fun
+      Let's nest an ordered OL just for fun
       %ol
         %li Ordered nested list item
         %li Ordered nested list item with much more text and some serious lorem ipsum
@@ -76,23 +76,23 @@ title: Trix content styles
     %li Ordered list item
     %li Ordered list item with much more text and some serious lorem ipsum
     %li
-      %p Nobody is save from nesting lists!
+      Nobody is save from nesting lists!
       %ol
         %li Ordered nested list item
         %li Ordered nested list item with much more text and some serious lorem ipsum
         %li
-          %p Won't ever stop nesting!
+          Won't ever stop nesting!
           %ol
             %li Ordered nested list item
             %li Ordered nested list item with much more text and some serious lorem ipsum
             %li Another nested Ordered list item
     %li
-      %p Nesting is fun, so let's ignore reason and put in more sublists
+      Nesting is fun, so let's ignore reason and put in more sublists
       %ul
         %li Unordered nested list item
         %li Unordered nested list item with much more text and some serious lorem ipsum
         %li
-          %p Multiverse nesting fun!
+          Multiverse nesting fun!
           %ul
             %li Unordered nested list item
             %li Unordered nested list item with much more text and some serious lorem ipsum