testio-tailwind 3.18.0 → 3.20.0

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

@@ -18,10 +18,7 @@
 }
 
 .modal-wrapper[open] .modal {
-  @apply w-modal-md mt-spacing rounded bg-white dark:bg-gray-800;
-  position: relative;
-  display: flex;
-  flex-direction: column;
+  @apply relative flex flex-col w-modal-md mt-spacing rounded bg-white dark:bg-gray-800 dark:shadow-xl dark:border-1 dark:border-bordercolor;
   height: auto;
   max-width: 100vw;
   pointer-events: all;
@@ -37,40 +34,35 @@
 }
 
 .modal-wrapper[open] .modal-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: start;
-  padding: 0;
+  @apply flex justify-between items-start p-0;
 }
 
 .modal-wrapper[open] .modal-title {
-  @apply p-spacing text-heading-3;
+  @apply p-spacing text-heading-3 dark:grow dark:text-center dark:pl-lg dark:pr-0;
 }
 
 .modal-wrapper[open] .modal-header .close-btn {
-  @apply rounded-none rounded-tr cursor-pointer;
+  @apply rounded-none rounded-tr cursor-pointer dark:text-label-color dark:rounded dark:mt-xs dark:mr-xs;
 }
 
 .modal-wrapper[open] .modal-content {
-  @apply p-spacing pt-0;
+  @apply p-spacing pt-0 dark:text-center;
 }
 
 .modal-wrapper[open] .modal-footer {
-  @apply py-sm px-spacing bg-actionbar rounded-b;
-  display: flex;
-  justify-content: start;
+  @apply flex justify-start py-sm px-spacing bg-actionbar rounded-b dark:justify-center;
 }
 
 .modal-footer .btn {
-  @apply mr-xs;
+  @apply mr-xs last:mr-0;
 }
 
 .modal-footer .btn-primary {
-  @apply bg-white text-primary border-0 hover:bg-link-hover hover:border-link-hover hover:text-white dark:bg-primary dark:text-white;
+  @apply bg-white text-primary border-0 hover:bg-link-hover hover:border-link-hover hover:text-white dark:bg-primary dark:text-black;
 }
 
 .modal-footer .btn-secondary {
-  @apply bg-transparent text-white border-white hover:bg-link-hover hover:border-link-hover hover:text-white;
+  @apply bg-transparent text-white border-white hover:bg-link-hover hover:border-link-hover hover:text-white dark:border-primary dark:text-primary;
 }
 
 .modal-footer .btn.disabled,

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

@@ -13,7 +13,7 @@
 }
 
 .form-search.inverted input {
-  @apply text-white border-primary bg-transparent;
+  @apply text-white border-primary bg-transparent dark:border-bordercolor dark:bg-card focus:border-link-hover focus:outline-1 focus:outline-link-hover;
 }
 
 .form-search .btn-clear,
@@ -64,7 +64,7 @@
 
 .form-search.direct-input {
   &::before {
-    @apply absolute inline-block w-icon h-icon top-xs left-xs bg-gray;
+    @apply absolute inline-block w-icon h-icon top-xs left-sm bg-gray;
     content: "";
     mask-image: url("/assets/images/icons/search.svg");
     mask-repeat: no-repeat;

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

@@ -23,12 +23,11 @@ select {
 }
 
 .form-select-native select {
-  @apply relative flex flex-row w-full justify-start items-stretch min-h-btn py-xs px-sm text-base text-white rounded bg-primary outline-hidden border-0 cursor-pointer;
+  @apply relative flex flex-row w-full justify-start items-stretch min-h-btn py-xs px-sm text-base text-white rounded bg-primary outline-hidden border-0 cursor-pointer dark:bg-gray-700;
 }
 
 .form-select-native .select-wrapper select:disabled {
-  @apply border border-bordercolor text-disabled cursor-not-allowed hover:text-disabled bg-transparent;
-  background-image: url("/assets/images/pattern-striped-bright.png");
+  @apply border border-bordercolor text-disabled cursor-not-allowed hover:text-disabled bg-transparent bg-pattern-disabled-bright dark:bg-pattern-disabled-dark;
   background-repeat: repeat;
   &::after {
     @apply bg-disabled;
@@ -43,7 +42,7 @@ select {
 }
 
 .form-select-native option {
-  @apply appearance-none py-xxs;
+  @apply appearance-none py-xxs first:rounded-t last:rounded-b;
   &:hover,
   &:focus {
     @apply bg-link-hover;

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

@@ -4,7 +4,7 @@
 }
 
 .selectable-token label {
-  @apply relative inline-flex items-center justify-start h-btn m-0 py-xs px-md text-primary bg-transparent border border-primary rounded cursor-pointer;
+  @apply relative inline-flex items-center justify-start h-btn m-0 py-xs px-md text-primary bg-transparent border border-primary rounded cursor-pointer dark:border-bordercolor dark:rounded-md;
   line-height: normal;
   &:hover, &:focus {
     @apply text-white bg-link-hover border-link-hover;
@@ -106,23 +106,6 @@
   }
 }
 
-
-.toggle-btn-group {
-  @apply flex;
-}
-
-.toggle-btn-group .selectable-token label {
-  @apply rounded-none;
-}
-
-.toggle-btn-group .selectable-token:first-child label {
-  @apply rounded-l;
-}
-
-.toggle-btn-group .selectable-token:last-child label {
-  @apply rounded-r;
-}
-
 /*////// Token LG /////*/
 
 .selectable-token.lg label,
@@ -143,7 +126,7 @@
 }
 
 .selectable-token.lg .icon {
-  @apply flex justify-center items-center mb-xxs w-btn-lg h-btn-lg text-icon-lg text-primary border border-primary rounded;
+  @apply flex justify-center items-center mb-xxs w-btn-lg h-btn-lg text-icon-lg text-primary border border-primary rounded dark:rounded-md dark:border-bordercolor;
 }
 
 .selectable-token.lg input:checked + label .icon {
@@ -191,3 +174,23 @@
     @apply block text-icon-xl h-icon-xl my-xs;
   }
 }
+
+
+/*///// Toggle buttons /////*/
+
+
+.toggle-btn-group {
+  @apply flex;
+}
+
+.toggle-btn-group .selectable-token label {
+  @apply rounded-none;
+}
+
+.toggle-btn-group .selectable-token:first-child label {
+  @apply rounded-l dark:rounded-l-md;
+}
+
+.toggle-btn-group .selectable-token:last-child label {
+  @apply rounded-r dark:rounded-r-md;
+}

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

@@ -169,6 +169,8 @@
   word-break: break-word;
 }
 
+/*///// Cellstyle table /////*/
+
 td.action-cell,
 .table-cellstyle td.action-cell {
   @apply text-right min-w-auto space-x-1.5 whitespace-nowrap;
@@ -179,7 +181,8 @@ td.action-cell,
   border-collapse: separate;
 }
 
-.table-cellstyle th {
+.table-cellstyle th
+.table-cellstyle .th {
   @apply relative align-middle pl-2.5 pr-0.5 py-1 text-sm font-normal dark:text-base dark:uppercase;
 }
 
@@ -220,7 +223,8 @@ td.action-cell,
   mask-image: url("/assets/images/icons/check-thick.svg");
 }
 
-.table-cellstyle td {
+.table-cellstyle td,
+.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-card;
 }
 
@@ -320,16 +324,22 @@ td.action-cell,
 
 .table-grid thead,
 .table-grid tbody,
-.table-grid tr {
+.table-grid tr,
+.table-grid .thead,
+.table-grid .tbody,
+.table-grid .tr {
   display: contents;
 }
 
 .table-grid th, 
-.table-grid td {
+.table-grid td,
+.table-grid .th, 
+.table-grid .td {
   @apply w-full h-full whitespace-normal;
 }
 
-.table-grid th {
+.table-grid th,
+.table-grid .th {
   @apply flex justify-start items-center min-h-8;
 }
 
@@ -337,6 +347,50 @@ td.action-cell,
   @apply flex-1;
 }
 
+
+/*////// Table with Rowgroups, cells are visually merged, but rows are separated //////*/
+
+.table-rowgroups {
+  @apply gap-0;
+}
+
+.table-rowgroups th,
+.table-rowgroups .th {
+  @apply h-auto p-xs mb-xxs text-label-color dark:uppercase;
+}
+
+.table-rowgroups td,
+.table-rowgroups .td {
+  @apply h-auto p-md mb-xxs bg-card text-label-color text-base;
+}
+
+.table-rowgroups td.checkbox-column,
+.table-rowgroups .td.checkbox-column {
+  @apply pr-0;
+}
+
+.table-rowgroups td.action-column,
+.table-rowgroups .td.action-column {
+  @apply flex flex-row justify-end pl-xs pt-xs;
+}
+
+.table-rowgroups .formrow .td {
+  @apply mb-0 lg:mb-xxs pb-0 last:pb-md;
+}
+
+.table-rowgroups .formrow .checkbox-column {
+  @apply mb-xxs;
+}
+
+.table-rowgroups .formrow .formrow-actions {
+  @apply flex flex-row lg:flex-col mb-xxs;
+}
+
+.formrow .formrow-actions .btn {
+  @apply mr-xs last:mr-0 lg:mb-xxs lg:last:mb-0;
+}
+
+
 /*////// Selectable cells //////*/
 
 .table-cellstyle .cell-selectable {

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

@@ -9,7 +9,7 @@
 }
 
 .toggle-switch-label {
-  @apply inline-block ml-xs text-base font-normal text-black cursor-pointer;
+  @apply inline-block ml-xs text-base font-normal cursor-pointer dark:text-appbody-textcolor;
 }
 
 .toggle-switch input,
@@ -18,7 +18,7 @@
 }
 
 .toggle-switch .slider {
-  @apply absolute top-0 left-0 right-0 bottom-0 bg-gray-light transition-transform cursor-pointer;
+  @apply absolute top-0 left-0 right-0 bottom-0 bg-gray-light transition-transform cursor-pointer dark:bg-gray-700;
   border-radius: 20px;
 }
 
@@ -48,8 +48,7 @@
 }
 
 .toggle-switch.disabled .slider {
-  @apply border border-disabled;
-  background-image: url("/assets/images/pattern-striped-bright.png");
+  @apply border border-bordercolor bg-pattern-disabled-bright dark:bg-pattern-disabled-dark;
   background-repeat: repeat;
   background-color: transparent;
   cursor: not-allowed;
@@ -60,6 +59,10 @@
   }
 }
 
+.dark .toggle-switch.disabled .slider::before {
+  @apply bg-gray-700;
+}
+
 .toggle-switch input:disabled + .slider,
 .toggle-switch input:disabled + label {
   background-color: transparent;

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

@@ -48,6 +48,14 @@ a {
   @apply text-link font-semibold leading-5 hover:text-link-hover hover:underline cursor-pointer;
 }
 
+a.white {
+  @apply text-white hover:text-link-hover;
+}
+
+a.black {
+  @apply text-black hover:text-link-hover;
+}
+
 code {
   @apply font-mono not-italic text-sm;
 }

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

@@ -18,10 +18,10 @@
 }
 
 .attachment {
-  @apply relative inline-flex flex-col h-auto w-xxl overflow-visible rounded;
+  @apply relative inline-flex flex-col h-auto w-xxl overflow-visible rounded dark:rounded-md select-none;
 
   & .attachment-thumb {
-    @apply relative flex justify-center items-center w-xxl h-xxl overflow-hidden border-1 border-primary bg-primary rounded text-white dark:border-bordercolor;
+    @apply relative flex justify-center items-center w-xxl h-xxl overflow-hidden border-1 border-primary bg-primary text-white dark:border-bordercolor rounded dark:rounded-md;
 
     & .icon {
       @apply text-icon-lg;
@@ -37,11 +37,11 @@
   }
 
   & .attachment-name {
-    @apply mt-xxs text-xs font-normal text-center text-black line-clamp-3 leading-tight whitespace-normal break-all;
+    @apply mt-xxs text-xs font-normal text-center text-appbody-textcolor line-clamp-3 leading-tight whitespace-normal break-all;
   }
 
   & .attachment-btn {
-    @apply absolute flex justify-center top-0 right-0 w-btn-sm h-btn-sm p-0 text-icon rounded-tr;
+    @apply absolute flex justify-center top-0 right-0 w-btn-sm h-btn-sm p-0 text-icon rounded-tr dark:rounded-md;
   }
 }
 
@@ -54,7 +54,7 @@
 }
 
 
-/* Selectable / checkbox attachment */
+/*///// Selectable / checkbox attachment /////*/
 
 .attachment.selectable {
   @apply ml-spacing;
@@ -69,7 +69,7 @@
 }
 
 .attachment.selectable .attachment-thumb {
-  @apply bg-gray border border-bordercolor hover:border-link-hover hover:bg-link-hover;
+  @apply bg-gray border border-bordercolor hover:border-link-hover hover:bg-link-hover select-none;
 }
 
 .attachment.selectable label::before {
@@ -77,10 +77,19 @@
   content: "";
 }
 
+.dark .attachment.selectable label::before {
+  @apply border-label-color rounded-sm;
+}
+
 .attachment.selectable input:checked + label::before {
-  @apply bg-info;
-  mask-image: url("/assets/images/icons/checkbox-sm-checked.svg");
+  @apply bg-info border-info;
+}
+
+.attachment.selectable input:checked + label::after {
+  @apply absolute top-0 -left-spacing h-md w-md bg-white border-0;
+  mask-image: url("/assets/images/icons/checkbox-background-sm.svg");
   mask-repeat: no-repeat;
+  content: "";
 }
 
 .attachment.selectable input:checked + label .attachment-thumb {

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

@@ -0,0 +1,32 @@
+/*/// URL collapsable ///*/
+
+.url-collapsable {
+  @apply relative;
+}
+
+.url-collapsable .trigger {
+  @apply text-white hover:text-link-hover cursor-pointer;
+}
+
+.url-collapsable .trigger .text-open {
+  @apply hidden;
+}
+
+.url-collapsable[open] .trigger {
+  @apply absolute bottom-0;
+  .text-open {
+    @apply block;
+  }
+  .text-closed {
+    @apply hidden;
+  }
+}
+
+.url-collapsable[open] {
+  @apply pb-md;
+}
+
+.url-collapsable p {
+  @apply mb-xs text-label-color;
+  word-break: break-all;
+}

package/src/assets/stylesheets/plugin_themes/dropzone.css

@@ -2,7 +2,7 @@
 /* Dropzone plugin */
 
 .dropzone {
-  @apply relative flex justify-center items-start flex-wrap min-h-xxl p-md border border-dashed border-primary rounded text-black hover:border-link-hover hover:text-link-hover cursor-pointer;
+  @apply relative flex flex-col justify-center items-start flex-wrap min-h-xxl p-md border border-dashed border-primary rounded text-appbody-textcolor hover:border-link-hover hover:text-link-hover cursor-pointer;
 }
 
 .dz-preview {

package/src/assets/stylesheets/plugin_themes/select2.css

@@ -91,11 +91,11 @@ select.select2 {
 .select2-container {
   .select2-selection,
   .select2-search__field {
-    @apply bg-primary border-primary text-white;
+    @apply bg-primary border-primary text-white dark:text-white dark:bg-gray-700 dark:border-0;
   }
 
   .select2-dropdown {
-    @apply bg-primary border-link-hover text-white;
+    @apply bg-primary border-link-hover text-white dark:bg-gray-700 dark:border-0;
   }
 
   .select2-selection__arrow {
@@ -107,7 +107,7 @@ select.select2 {
   }
 
   .select2-search__field {
-    @apply bg-petrol-dark;
+    @apply bg-petrol-dark dark:bg-gray-800 dark:rounded-s-md;
   }
 
   .select2-results__option--highlighted {
@@ -116,15 +116,15 @@ select.select2 {
 
   &.select2-container--open {
     &.select2-container--below .select2-selection {
-      @apply border-primary;
+      @apply border-primary dark:border-0;
     }
 
     &.select2-container--above .select2-selection {
-      @apply border-primary;
+      @apply border-primary dark:border-0;
     }
 
     .select2-dropdown--below {
-      @apply border-t border-white;
+      @apply border-t border-white dark:border-bordercolor;
     }
 
     .select2-dropdown--above {
@@ -143,12 +143,12 @@ select.select2 {
   @apply min-h-btn p-xs;
 }
 
-.select2-container .select2-search--inline .select2-search__field {
-  @apply bg-transparent m-0 p-xxs;
+.select2-container .select2-selection--multiple .select2-search.select2-search--inline {
+  @apply relative w-full m-0 p-0;
 }
 
-.select2-search.select2-search--inline {
-  @apply relative;
+.select2-container .select2-selection--multiple .select2-search--inline .select2-search__field {
+  @apply m-0 px-sm py-xxs dark:bg-black;
 }
 
 .select2-container .select2-selection--multiple .select2-selection__rendered {
@@ -156,14 +156,14 @@ select.select2 {
 }
 
 .select2-container .select2-search--inline .select2-search__field {
-  @apply bg-petrol-dark text-white px-xs;
+  @apply bg-petrol-dark text-white px-xs dark:bg-transparent;
   width: 100% !important;
 }
 
 /*/ multi select items */
 
 .select2-container--testio li.select2-selection__choice {
-  @apply relative inline-flex flex-row-reverse flex-grow-0 items-stretch mr-xxs mb-xxs pl-xxs pr-0 text-sm text-black bg-white rounded;
+  @apply relative inline-flex flex-row-reverse flex-grow-0 items-stretch mr-xxs mb-xxs pl-xxs pr-0 text-sm text-black bg-white rounded dark:text-white dark:bg-gray-600 dark:border-0;
 }
 
 .select2-selection__choice__display {
@@ -171,9 +171,7 @@ select.select2 {
 }
 
 .select2-selection__choice__remove {
-  @apply flex justify-center items-center w-btn-xs text-primary rounded-r bg-transparent border-0;
-  margin-top: -2px;
-  margin-bottom: -2px;
+  @apply flex justify-center items-center w-btn-xs text-primary rounded-r bg-transparent border-0 dark:text-white cursor-pointer;
   font-size: 0;
   &::after {
     @apply bg-primary;
@@ -195,7 +193,7 @@ select.select2 {
 /*///// Optgroups /////*/
 
 .select2-results__group {
-  @apply py-xs px-sm;
+  @apply py-xs px-sm dark:pb-sm dark:text-label dark:text-label-color dark:uppercase dark:font-normal;
 }
 
 .select2-results__option.select2-results__option--group {
@@ -209,8 +207,7 @@ select.select2 {
 /*///// Disabled /////*/
 
 .select2-container--disabled .select2-selection {
-  @apply border border-bordercolor text-disabled cursor-not-allowed bg-transparent;
-  background-image: url("/assets/images/pattern-striped-bright.png");
+  @apply border border-bordercolor text-disabled cursor-not-allowed bg-transparent bg-pattern-disabled-bright dark:bg-pattern-disabled-dark;
   background-repeat: repeat;
   &:hover {
     @apply text-disabled;

package/src/assets/stylesheets/plugin_themes/tom_select.css

@@ -2,8 +2,9 @@
 /*///// Tom-Select theme https://tom-select.js.org /////*/
 
 .ts-control {
-  @apply relative overflow-hidden flex w-full justify-start items-stretch min-h-btn py-xs pl-sm text-base rounded text-white dark:text-white;
+  @apply relative overflow-hidden flex w-full justify-start items-stretch min-h-btn py-xs pl-sm text-base rounded text-white border-0 dark:text-white;
   padding-right: 40px !important;
+  line-height: 1.4;
 }
 
 .ts-control input {
@@ -95,6 +96,10 @@
 
 /* Multi select item */
 
+.ts-wrapper.multi.has-items .ts-control input {
+  @apply pt-xxs! pb-xxs!;
+}
+
 .ts-wrapper.multi .ts-control div.item {
   @apply relative flex-row flex-grow-0 items-stretch mr-xs pl-xs pr-0 text-sm text-black bg-white dark:text-white dark:bg-gray-600 rounded;
   margin-top: 2px;
@@ -108,7 +113,7 @@
   }
 
   a::after {
-    @apply inline-block w-xs h-xs bg-primary;
+    @apply inline-block w-xs h-xs bg-primary dark:bg-white;
     content: "";
     mask-image: url("/assets/images/icons/cross-thick.svg");
   }

package/src/assets/stylesheets/plugin_themes/trix_editor.css

@@ -46,7 +46,7 @@ trix-toolbar .trix-button-row {
 }
 
 trix-toolbar .trix-button {
-  @apply inline-flex justify-center items-center flex-shrink-0 w-btn-sm h-btn-sm min-w-btn-sm border-0 rounded-xs bg-transparent;
+  @apply inline-flex justify-center items-center flex-shrink-0 w-btn-sm h-btn-sm min-w-btn-sm border-0 rounded-xs bg-transparent dark:rounded-sm;
   font-size: 0; /* Fix for safari bug, we don't need to show any text in those buttons */
   &:hover,
   &:focus {

package/src/assets/stylesheets/tailwind_theme_dark.css

@@ -5,7 +5,7 @@
     --color-appbody: #181818;
     --color-appbody-textcolor: #f2f2f2;
     --color-header: #1d1d1d;
-    --color-actionbar: #343A40;
+    --color-actionbar: #222222;
     --color-metasidebar: #262626;
     --color-primary: #78eac1;
     --color-link: #8988eb;
@@ -34,6 +34,7 @@
     --card-padding: 30px;
     --spacing-grid-gutter: 40px;
     --spacing-formgrid: 1.25rem;
+    --spacing-actionbar: 5rem;
     
     /*//// Fontsize ////*/
     --fontsize-card-header: 1.125rem;

package/src/pages/agenticqa/email.njk

@@ -10,7 +10,7 @@ title: Email Template
   <details class="mt-3">
     <summary class="btn btn-sm btn-gray">
       <span class="icon icon-format-code mr-icon-spacing"></span>
-      <span>Show source</span>
+      <span>Show email source</span>
     </summary>
     <div class="ds-code-preview">
       <pre><code class="code html-preview">{{ section.templateContent | trim }}</code></pre>

package/src/pages/agenticqa/tables-formrow.haml

@@ -0,0 +1,68 @@
+---
+tags: ['agenticqa']
+title: Tables - form row
+---
+
+.table-grid.table-rowgroups{style:"grid-template-columns: repeat(3, auto) repeat(1, minmax(12rem, 1fr)) auto;"}
+  .thead
+    .tr
+      .th
+        .form-check.sm
+          %input{type:'checkbox'}
+      .th check title
+      .th page type
+      .th check description
+      .th
+  .tbody
+    .tr
+      .btn.btn-sm.btn-block.btn-subtile.mb-xxs.col-span-5
+        .icon.icon-plus.mr-icon-spacing
+        Add new check
+    %form.formrow.tr
+      .td.checkbox-column.row-span-4{class:"lg:row-span-1"}
+        .form-check.sm
+          %input{type:'checkbox', disabled:"true"}
+      .td.col-span-4{class:"lg:col-span-1"}
+        .label.mb-xxs{class:"lg:hidden"} Check title
+        %input.form-control{type:'text', placeholder:"An input field"}
+      .td.col-span-4{class:"lg:col-span-1"}
+        .label.mb-xxs{class:"lg:hidden"} Page type
+        %select.tom-select.min-w-spacing-4xl{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
+      .td.col-span-4{class:"lg:col-span-1"}
+        .label.mb-xxs{class:"lg:hidden"} Check description
+        %textarea.form-control{rows:'1', placeholder:"Textarea"}
+      .td.formrow-actions.col-span-4{class:"lg:col-span-1"}
+        %button.btn.btn-sm.btn-block.btn-primary Save changes  
+        %button.btn.btn-sm.btn-block.btn-danger Discard  
+    %form.formrow.tr
+      .td.checkbox-column.row-span-4{class:"lg:col-span-1"}
+        .form-check.sm
+          %input{type:'checkbox', disabled:"true"}
+      .td.col-span-4{class:"lg:col-span-1"}
+        .label.mb-xxs{class:"lg:hidden"} Check title
+        %input.form-control{type:'text', placeholder:"An input field"}
+      .td.col-span-4{class:"lg:col-span-1"}
+        .label.mb-xxs{class:"lg:hidden"} Page type
+        %select.tom-select.min-w-spacing-4xl{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
+      .td.col-span-4{class:"lg:col-span-1"}
+        .label.mb-xxs{class:"lg:hidden"} Check description
+        %textarea.form-control{rows:'1', placeholder:"Textarea"}
+      .td.formrow-actions.col-span-4{class:"lg:col-span-1"}
+        %button.btn.btn-sm.btn-block.btn-primary Save changes  
+        %button.btn.btn-sm.btn-block.btn-danger Discard