testio-tailwind 2.2.0 → 3.0.0

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

@@ -26,7 +26,7 @@
 
 .form-control,
 .form-control-static {
-  @apply h-btn w-full px-sm py-xxs text-base border border-bordercolor rounded;
+  @apply h-btn w-full px-sm py-xxs text-base border border-bordercolor rounded dark:bg-card;
 }
 
 .form-check .field_with_errors input[type="checkbox"],
@@ -80,7 +80,7 @@ textarea.form-control {
 }
 
 .form-control::placeholder {
-  @apply text-disabled italic;
+  @apply text-placeholder italic;
 }
 
 .form-control:disabled,

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

@@ -1,5 +1,5 @@
 .app-body {
-  @apply grid h-screen max-h-screen w-full overflow-hidden bg-white text-black;
+  @apply grid h-screen max-h-screen w-full overflow-hidden bg-appbody text-appbody-textcolor;
   grid-template-areas:  "header header header"
                         "sidebar test-header test-header"
                         "sidebar main aside"

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

@@ -20,7 +20,7 @@ details.listitem .listitem-title {
 }
 
 .listitem {
-  @apply bg-card rounded border;
+  @apply bg-listitem rounded;
 }
 
 details.listitem,
@@ -45,7 +45,7 @@ a.listitem:hover {
 
 .listitem[open] > .listitem-header,
 .listitem.listitem.seperate-header > .listitem-header {
-  @apply border-b-1 border-white rounded-t;
+  @apply border-b-1 border-appbody rounded-t;
 }
 
 .listitem .collapse-btn {
@@ -72,7 +72,7 @@ a.listitem:hover {
 }
 
 .listitem-badge {
-  @apply flex justify-center items-start w-btn p-xxs pt-xs text-white bg-black rounded-l;
+  @apply flex justify-center items-start w-btn p-xxs pt-xs text-white bg-black dark:bg-gray-700 rounded-l;
   grid-area: badge;
 }
 
@@ -142,7 +142,7 @@ a.listitem:hover {
 }
 
 .listitem-card {
-  @apply relative mb-md p-sm bg-white rounded last:mb-0;
+  @apply relative mb-md p-sm bg-appbody rounded last:mb-0;
 }
 
 .listitem-card img {
@@ -212,7 +212,7 @@ a.listitem:hover {
 }
 
 .listitem-check label {
-  @apply flex justify-center items-center cursor-pointer w-full h-full mb-0 bg-transparent rounded-l border-r-1 border-white;
+  @apply flex justify-center items-center cursor-pointer w-full h-full mb-0 bg-transparent rounded-l border-r-1 border-appbody;
 }
 
 .listitem-check label::after {
@@ -261,7 +261,7 @@ a.listitem:hover {
 }
 
 .listitem-actionbar {
-  @apply px-sm py-xs bg-primary rounded-b;
+  @apply px-sm py-xs bg-actionbar rounded-b;
 }
 
 .listitem-actionbar > .btn {
@@ -269,7 +269,7 @@ a.listitem:hover {
 }
 
 .listitem-with-footer .listitem-footer .btn {
-  @apply px-sm m-0 rounded-none border-l-1 border-white;
+  @apply px-sm m-0 rounded-none border-l-1 border-appbody;
 
   &:first-child {
     @apply rounded-bl border-l-0;
@@ -281,7 +281,7 @@ a.listitem:hover {
 }
 
 .listitem-with-footer .listitem-footer .dropdown-actions .btn {
-  @apply border-l-1 border-white rounded-bl-none;
+  @apply border-l-1 border-appbody rounded-bl-none;
 }
 
 .listitem-with-footer .listitem-footer .btn-primary {
@@ -289,7 +289,7 @@ a.listitem:hover {
 }
 
 .listitem-with-footer .listitem-footer .btn-secondary {
-  @apply flex-1 text-white bg-primary border-t-0 border-r-0 border-b-0;
+  @apply flex-1 text-appbody bg-primary border-t-0 border-r-0 border-b-0;
   &:hover, &:focus, &:active {
     @apply bg-link-hover;
   }

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

@@ -32,7 +32,7 @@ aside.metasidebar {
 
 
 .metasidebar-wrapper {
-  @apply relative grid h-full max-h-full min-h-0 bg-white;
+  @apply relative grid h-full max-h-full min-h-0 bg-metasidebar;
   grid-template-columns: auto 1fr;
   grid-template-rows: minmax(0, 1fr);
 }
@@ -45,6 +45,7 @@ aside.metasidebar {
 
 .metasidebar-content {
   @apply relative block sm:w-meta-sidebar-width max-h-full min-h-0 ml-md pt-spacing pr-spacing pb-xxl pl-xs overflow-y-scroll;
+  scrollbar-width: none;
 }
 
 .metasidebar-title {

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

@@ -88,6 +88,7 @@
 .notification-container {
   @apply fixed top-header right-0 overflow-y-scroll max-h-screen pt-xs pb-xl z-10;
   width: 280px;
+  scrollbar-width: none;
 }
 
 .notification-container::-webkit-scrollbar {

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

@@ -1,120 +1,22 @@
-.popover {
-  @apply p-0 text-white;
-}
-
-.popover .popover-header {
-  @apply whitespace-nowrap text-white font-bold leading-tight p-sm;
-}
-
-.popover .popover-title {
-  @apply pb-xs font-bold leading-tight text-white whitespace-nowrap;
-}
-
-.popover-header {
-  @apply text-label;
-  margin-top: -1px;
+/*/// Info popover  ///*/
 
-  .card {
-    @apply absolute border-link-hover;
-    top: -1px;
-  }
-
-  .popover-description {
-    @apply text-white font-normal mb-xxs leading-tight text-xs;
-  }
+.popover-menu.info, 
+.dropdown-menu.info {
+  @apply p-sm bg-petrol-800 dark:bg-gray-700 dark:text-appbody-textcolor;
 }
 
-.popover-content {
-  @apply overflow-hidden pb-0;
+.popover-menu.info .popover-title, 
+.dropdown-menu.info .popover-title {
+  @apply text-base font-semibold mb-xxs;
+  line-height: 1.1;
 }
 
-.popover hr {
-  @apply m-0 opacity-50 bg-white;
-}
-
-.popover.tester-profile {
-  @apply overflow-hidden pointer-events-none;
-  top: -1px;
-
-  .popover-header {
-    @apply h-auto;
-  }
-}
-
-.popover-content .section-headline {
-
-  position: relative;
-
-  .title {
-    display: inline-block;
-
-    &:after {
-      @apply opacity-50;
-      display: inline-block;
-      content: "";
-      position: absolute;
-      margin-left: 5px;
-      bottom: 19px;
-      width: 230px;
-      height: 1px;
-    }
-  }
+.popover-menu.info .popover-content, 
+.dropdown-menu.info .popover-content {
+  @apply text-sm;
 }
 
-.popover.left {
-  left: -1px;
-
-  .popover-header .card {
-    @apply rounded-tl; 
-    left: -1px;
-    &.tester-avatar img {
-      border-bottom-left-radius: 0;
-      border-top-right-radius: 0;
-      border-bottom-right-radius: 0;
-    }
-  }
-
-  .popover-header {
-    @apply pl-sm;
-  }
-  .popover-title {
-    padding-left: 0;
-  }
-}
-
-.popover.right {
-  left: auto;
-  right: -1px;
-
-  .popover-header .card {
-    @apply rounded-tr; 
-    margin: 0;
-    right: -1px;
-    &.tester-avatar img {
-      border-bottom-left-radius: 0;
-      border-top-left-radius: 0;
-    }
-  }
-
-  .popover-header {
-    @apply pl-sm;
-  }
-
-  .popover-title {
-    padding-left: 0;
-    padding-right: 0;
-  }
-}
-
-.popover.md {
-  @apply w-card-md max-w-card-md;
-}
-
-.popover.flexible {
-  width: 100%;
-  max-width: initial;
-}
-
-.popover_info_icon {
-  cursor:pointer !important;
-}
+.popover-menu.info .popover-actions, 
+.dropdown-menu.info .popover-actions {
+  @apply mt-xs;
+}

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

@@ -114,7 +114,7 @@ details.result-item .issue-item {
 }
 
 details.result-item .result-item {
-  @apply pl-lg mr-btn bg-gray-lightest border-b border-bordercolor last:border-b-0;
+  @apply pl-lg mr-btn bg-card border-b border-bordercolor last:border-b-0;
   &::before {
     @apply left-sm;
   }

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

@@ -0,0 +1,8 @@
+body {
+  scrollbar-width: thin;
+  scrollbar-color: #bfc1c5 #f2f2f2;
+}
+
+body.dark {
+  scrollbar-color: #1d1d1d #262626;
+}

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

@@ -5,7 +5,7 @@ nav.sidebar,
   overflow-x: auto;
   overflow-y: scroll;
   -ms-overflow-style: none;  /* IE and Edge */
-  scrollbar-width: none;  /* Firefox */
+  scrollbar-width: none;
   z-index: 0;
   border-right: none;
 }
@@ -14,11 +14,12 @@ nav.sidebar::-webkit-scrollbar,
 nav.sidebar .navlinks::-webkit-scrollbar {
   display: none;
   -ms-overflow-style: none;  /* IE and Edge */
-  scrollbar-width: none;  /* Firefox */
+  scrollbar-width: none;
 }
 
 .sidebar .navlinks {
   @apply overflow-y-scroll pb-spacing;
+  scrollbar-width: none;
 }
 
 .sidebar .navlink,

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

@@ -76,7 +76,7 @@
 }
 
 .td-title {
-  @apply inline pr-xs text-black hover:text-link-hover;
+  @apply inline pr-xs text-appbody-textcolor hover:text-link-hover;
 }
 
 .table-bordered,
@@ -205,7 +205,7 @@ td.action-cell,
 }
 
 .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;
+  @apply relative px-2.5 py-1.5 last:pr-3 min-w-cell min-h-11 align-top text-sm bg-card;
 }
 
 .table-cellstyle td label {
@@ -227,7 +227,7 @@ td.action-cell,
 }
 
 .table-cellstyle td.inprogress::after {
-  @apply bg-gray-600;
+  @apply bg-gray-600 dark:bg-gray-800;
   -webkit-mask-image: url("/assets/images/icons/clock.svg");
   mask-image: url("/assets/images/icons/clock.svg");
 }
@@ -259,7 +259,7 @@ td.action-cell,
 }
 
 .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;
+  @apply flex justify-between w-full h-full pl-2.5 pr-9 py-1.5 text-appbody-textcolor no-underline font-normal hover:bg-link-hover hover:text-white cursor-pointer;
   word-break: break-word;
   
   &::after {

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

@@ -2,6 +2,7 @@
 .nav-tabs,
 .nav-pills {
   @apply relative flex flex-row mb-spacing overflow-x-scroll overflow-y-hidden;
+  scrollbar-width: none;
 }
 
 .nav-tabs {
@@ -67,6 +68,7 @@
   overflow-x: scroll;
   overflow-y: hidden;
   white-space: nowrap;
+  scrollbar-width: none;
 } 
 
 .nav-tabs:has(.nav-actions)::after  {
@@ -98,7 +100,7 @@
 }
 
 .nav-pills .navlink {
-  @apply inline-flex items-start flex-shrink-0 whitespace-nowrap mr-xxs py-xxs px-sm bg-gray-lighter rounded cursor-pointer;
+  @apply inline-flex items-start flex-shrink-0 whitespace-nowrap mr-xxs py-xxs px-sm bg-card rounded cursor-pointer;
   &.active {
     @apply text-white bg-info;
   }
@@ -108,18 +110,13 @@
   }
 
   &.disabled, &.disabled:hover, &.disabled:focus {
-    @apply text-disabled cursor-not-allowed;
+    @apply text-disabled bg-transparent bg-pattern-disabled-bright dark:bg-pattern-disabled-dark border-bordercolor cursor-not-allowed;
+    background-repeat: repeat;
   } 
 
   &:last-child {
     margin-right: 0;
   }
-
-  &.disabled {
-    @apply text-disabled bg-transparent;
-    background-image: url("/assets/images/pattern-stripes-gray.png");
-    background-repeat: repeat;
-  }
 }
 
 .nav-pills .counter {

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

@@ -7,7 +7,7 @@
 }
 
 .tag {
-  @apply inline-flex items-center flex-row h-md px-xs text-sm leading-none bg-gray-light rounded;
+  @apply inline-flex items-center flex-row h-md px-xs text-sm leading-none bg-tag text-appbody-textcolor rounded;
   padding-top: 2px;
   padding-bottom: 2px;
 }

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

@@ -40,7 +40,7 @@
 
 .task-item .task-title,
 .issue-item .issue-title {
-  @apply text-black font-medium;
+  @apply text-appbody-textcolor font-medium;
   grid-area: item-title;
   overflow: hidden;
   display: -webkit-box;

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

@@ -52,6 +52,7 @@
 .test-header .nav-tabs {
   @apply mb-0 pb-xs border-b-0;
   grid-area: nav-tabs;
+  scrollbar-width: none;
 }
 
 .test-header.tester .nav-tabs::after {

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

@@ -8,7 +8,7 @@
 }
 
 .test-item .test-title::before {
-  @apply w-icon h-icon bg-black;
+  @apply w-icon h-icon bg-appbody-textcolor;
   content: "";
   position: absolute;
   display: inline-block;
@@ -53,7 +53,7 @@
 } 
 
 .test-item .test-title {
-  @apply text-black font-medium;
+  @apply text-appbody-textcolor font-medium;
   overflow: hidden;
   display: -webkit-box;
   -webkit-box-orient: vertical;

package/src/assets/stylesheets/components/tester/tester_cards.css

@@ -42,7 +42,7 @@
 }
 
 .tester-card .card-title {
-  @apply block m-0 p-0 text-black;
+  @apply block m-0 p-0 text-appbody-textcolor;
   margin-bottom: 2px;
   &:hover, &:focus, &:active {
     @apply text-link-hover;

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

@@ -2,7 +2,7 @@
 /*///// 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 bg-primary;
+  @apply relative overflow-hidden flex w-full justify-start items-stretch min-h-btn py-xs pl-sm text-base rounded;
   padding-right: 40px !important;
 }
 
@@ -13,9 +13,9 @@
 .ts-control,
 .full .ts-control, 
 .ts-wrapper.single.input-active .ts-control {
-  @apply bg-primary border-0 cursor-pointer;
+  @apply bg-primary dark:bg-card border-bordercolor cursor-pointer;
   &:hover {
-    @apply bg-link-hover;
+    @apply bg-link-hover text-white;
   }
   &:hover input::placeholder {
     @apply text-white;

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

@@ -32,6 +32,7 @@ trix-toolbar .trix-button-group {
 
 trix-toolbar .trix-button-row {
   @apply relative flex flex-row w-full p-xxs overflow-x-scroll;
+  scrollbar-width: none;
 }
 
 .trix-button-row::-webkit-scrollbar {
@@ -41,7 +42,7 @@ trix-toolbar .trix-button-row {
 }
 
 .trix-button-group.trix-button-group--history-tools {
-  @apply absolute right-0 pr-xs bg-white;
+  @apply absolute right-0 pr-xs bg-appbody;
 }
 
 trix-toolbar .trix-button {

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

@@ -15,7 +15,7 @@
 }
 
 a.user-item {
-  @apply text-black;
+  @apply text-appbody-textcolor;
 }
 
 a.user-item:hover,

package/src/assets/stylesheets/tailwind_config.css

@@ -50,20 +50,16 @@
   --color-purple-light: #8988eb;
   --color-purple-500: #7954ff;
   --color-purple-DEFAULT: #7954ff;
-  --border-DEFAULT: 1px;
-  --border-0: 0px;
-  --border-1: 1px;
-  --border-2: 2px;
-  --border-4: 4px;
-  --border-6: 6px;
-  --border-10: 10px;
+
+  /* Functional Colors */
   --color-appbody: #FFFFFF;
-  --color-black: #1d1d1d;
+  --color-appbody-textcolor: #1d1d1d;
   --color-primary: #236a84;
   --color-link: #236a84;
   --color-link-hover: #21bef4;
   --color-header: #1d1d1d;
   --color-actionbar: #236a84;
+  --color-metasidebar: #ffffff;
   --color-bordercolor: #e6e6e6;
   --color-bordercolor-dark: #D4D6DC;
   --color-success: #8cbd24;
@@ -76,6 +72,9 @@
   --color-label-inverted-color: #bfc1c5;
   --color-dark: #222222;
   --color-card: #e6e6e6;
+  --color-card-dark: #262626;
+  --color-listitem: #e6e6e6;
+  --color-tag: #e6e6e6;
   --color-critical: #ec0404;
   --color-high: #d8ce0d;
   --color-low: #9fa2a8;
@@ -144,9 +143,17 @@
   --font-weight-navlinks: 600;
   --font-weight-display: 200;
 
+  /*//// Border width ////*/
+  --border-DEFAULT: 1px;
+  --border-0: 0px;
+  --border-1: 1px;
+  --border-2: 2px;
+  --border-4: 4px;
+  --border-6: 6px;
+  --border-10: 10px;
+
   /*//// Border radius ////*/
-  --rounded-DEFAULT: 5px;
-  --rounded-default: 0.3rem;
+  --radius: 5px;
 
   /*//// Spacing ////*/
   --spacing-spacing: 1.875rem;

package/src/assets/stylesheets/tailwind_theme_dark.css

@@ -0,0 +1,22 @@
+@custom-variant dark (&:where(.dark, .dark *));
+@layer theme {
+  .dark {
+    /* Colors */
+    --color-appbody: #1d1d1d;
+    --color-appbody-textcolor: #f2f2f2;
+    --color-actionbar: #343A40;
+    --color-metasidebar: #262626;
+    --color-primary: #78eac1;
+    --color-link: #8988eb;
+    --color-link-hover: #7954ff;
+    --color-bordercolor: #343A40;
+    --color-card: #262626;
+    --color-disabled: #343A40;
+    --color-listitem: #343A40;
+    --color-placeholder: #5f656d;
+    --color-tag: #5f656d;
+
+    /*//// Border radius ////*/
+    --radius: 12px;
+  }
+}

package/src/pages/buttons/block.haml

@@ -3,37 +3,34 @@ title: Block Buttons
 tags: button
 ---
 
-.row
-  .col-sm-6
-    %ul.list-vertical.mb-2
-      %li
-        %button.btn.btn-block.btn-primary Primary
-      %li
-        %button.btn.btn-block.btn-secondary Secondary
-      %li
-        %button.btn.btn-block.btn-success Success
-      %li
-        %button.btn.btn-block.btn-danger Danger
-      %li
-        %button.btn.btn-block.btn-warning Warning
-      %li
-        %button.btn.btn-block.btn-info Info
-      %li
-        %button.btn.btn-block.btn-dashed Dashed
-      %li
-        %button.btn.btn-block.btn-link Link
-      %li
-        %button.btn.btn-block.btn-ghost Ghost
-      %li
-        %button.btn.btn-block{disabled: "disabled"} Disabled
+%ul.list-vertical.mb-md
+  %li
+    %button.btn.btn-block.btn-primary Primary
+  %li
+    %button.btn.btn-block.btn-secondary Secondary
+  %li
+    %button.btn.btn-block.btn-success Success
+  %li
+    %button.btn.btn-block.btn-danger Danger
+  %li
+    %button.btn.btn-block.btn-warning Warning
+  %li
+    %button.btn.btn-block.btn-info Info
+  %li
+    %button.btn.btn-block.btn-dashed Dashed
+  %li
+    %button.btn.btn-block.btn-link Link
+  %li
+    %button.btn.btn-block.btn-ghost Ghost
+  %li
+    %button.btn.btn-block{disabled: "disabled"} Disabled
 
-  .col-sm-6
-    .bg-petrol.p-2
-      %ul.list-vertical
-        %li
-          %button.btn.btn-block.btn-primary-inverted primary-inverted
-        %li
-          %button.btn.btn-block.btn-secondary-inverted Secondary
-        %li
-          %button.btn.btn-block.btn-outline-primary-inverted outline-primary-inverted
+.bg-actionbar.p-5
+  %ul.list-vertical
+    %li
+      %button.btn.btn-block.btn-primary-inverted primary-inverted
+    %li
+      %button.btn.btn-block.btn-secondary-inverted Secondary
+    %li
+      %button.btn.btn-block.btn-outline-primary-inverted outline-primary-inverted
 

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

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

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

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