testio-tailwind 0.1.0

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

@@ -0,0 +1,304 @@
+.splitview-layout {
+  @apply relative grid overflow-hidden max-h-full;
+  grid-template-areas:  "splitview-header splitview-header"
+                        "splitview-list-header splitview-details"
+                        "splitview-list splitview-details"
+                        "splitview-list-actionbar splitview-details-actionbar";
+  grid-template-columns: 1fr;
+  grid-template-rows: auto auto 1fr auto;
+  grid-area: main;
+  @screen lg {
+    grid-template-columns: 1fr 1fr;
+  }
+  @screen xl {
+    grid-template-columns: 1fr 2fr;
+  }
+  @screen 2xl {
+    grid-template-columns: 1fr 3fr;
+  }
+}
+
+.splitview-layout .splitview-details {
+  @apply hidden lg:block;
+}
+
+/*/ hide content when no item is selected */
+.splitview-layout .splitview-details-content {
+  @apply hidden; 
+}
+
+.splitview-layout.item-selected .splitview-list-header {
+  @apply hidden lg:flex;
+}
+
+.splitview-layout.item-selected .splitview-list {
+  @apply hidden lg:block overflow-x-hidden;
+}
+
+.splitview-layout.item-selected {
+
+  .splitview-details {
+    display: block;
+  }
+  .splitview-details-content  {
+    display: block; /*/ Show content when items are selected */
+  }
+  .splitview-details-emptystate {
+    display: none;
+  }
+  .splitview-details {
+    @apply border-info;
+  }
+  .splitview-list-actionbar {
+    display: none;
+  }
+  .splitview-details-actionbar {
+    display: flex;
+  }
+  .splitview-list {
+    grid-row-start: 3;
+    grid-row-end: 5;
+  }
+}
+
+.splitview-header {
+  @apply relative px-body-padding-mobile pt-body-padding-mobile pb-md sm:px-body-padding-tablet sm:pt-body-padding-tablet xl:px-body-padding-desktop xl:pt-body-padding-desktop;
+  grid-area: splitview-header;
+}
+
+.splitview-list {
+  @apply relative h-full max-h-full min-h-0 pl-body-padding-mobile pb-xl sm:pl-body-padding-tablet xl:pl-body-padding-desktop overflow-y-scroll overflow-x-hidden;
+  grid-area: splitview-list;
+}
+
+.splitview-list-header {
+  @apply relative flex flex-row mr-spacing mb-xs ml-body-padding-mobile sm:ml-body-padding-tablet xl:ml-body-padding-desktop;
+  grid-area: splitview-list-header;
+}
+
+.splitview-list-header::before {
+  @apply absolute block left-0 bottom-xxs w-full h-1px border-b border-bordercolor;
+  content: "";
+}
+
+.splitview-list-header-title {
+  @apply relative inline-block pr-sm mt-xxs text-heading-3 bg-appbody;
+  line-height: 1.1;
+}
+
+.splitview-list-header .form-check {
+  @apply pr-xs bg-white;
+  margin-top: 8px;
+}
+
+.splitview-list-header-actions {
+  @apply flex flex-row justify-end ml-auto;
+}
+
+.splitview-list-header-actions .linked-icon {
+  @apply ml-sm;
+}
+
+/*///// Splitview Details /////*/
+
+.splitview-details {
+  @apply px-spacing pb-xl overflow-y-scroll overflow-x-hidden h-full max-h-full min-h-0 max-w-full min-w-0 border-l-2 border-bordercolor;
+  grid-area: splitview-details;
+}
+
+.splitview-details-header {
+  @apply grid gap-xs mb-md;
+  grid-template-columns: auto 1fr auto;
+}
+
+.splitview-details-title {
+  @apply text-heading-3;
+}
+
+.splitview-details-header .btn-close-detailview {
+  @apply lg:hidden;
+}
+
+.list-splitview-meta {
+  @apply grid content-start gap-xs mb-xs;
+  grid-template-columns: 1fr 2fr;
+
+  dd {
+    margin-bottom: 0;
+  }
+  @screen xl {
+    grid-template-columns: 1fr 2fr 1fr 2fr;
+  }
+}
+
+.meta-collapsable {
+  @apply border-b border-bordercolor mb-md;
+
+  .summary-closed {
+    @apply block;
+  }
+  .summary-open {
+    @apply hidden;
+  }
+}
+
+.meta-collapsable > summary {
+  @apply flex items-center justify-center h-btn-sm text-primary cursor-pointer;
+
+  &:hover, &:focus {
+    @apply text-white bg-link-hover border-link-hover;
+  }
+}
+
+.meta-collapsable[open] {
+  @apply flex flex-col-reverse;
+  .summary-open {
+    @apply block;
+  }
+  .summary-closed {
+    @apply hidden;
+  }
+}
+
+.splitview-details-content-grid {
+  @apply grid gap-xs mb-md;
+
+  @screen xl {
+    grid-template-columns: 1fr 3fr;
+    .label {
+      padding-top: 2px;
+    }
+  }
+}
+
+/*///// Splitview actionbars /////*/
+
+.splitview-list-actionbar {
+  @apply flex px-body-padding-mobile sm:px-body-padding-tablet xl:px-body-padding-desktop bg-primary;
+  grid-area: splitview-list-actionbar;
+  grid-column-start: 1;
+  grid-column-end: 3;
+}
+
+.splitview-details-actionbar {
+  @apply hidden bg-info px-body-padding-mobile sm:px-body-padding-tablet;
+
+  .popover-menu {
+    @apply bg-info;
+  }
+}
+
+
+/*///// Splitview item /////*/
+
+.splitview-item {
+  @apply grid p-xs pr-spacing -mx-xs cursor-pointer;
+  grid-template-areas: "split-check split-icon split-text split-status";
+  grid-template-columns: auto auto 1fr auto;
+}
+
+.splitview-item.selected {
+  @apply text-white bg-info;
+  .splitview-item-icon, 
+  .splitview-item-metainfo {
+    @apply text-white;
+  }
+  .status-icon {
+    @apply bg-white;
+  }
+  .splitview-item-checkbox input {
+    @apply border-white;
+  }
+  .splitview-item-checkbox input[type=checkbox]:checked {
+    @apply bg-white;
+  }
+  .splitview-item-checkbox input[type=checkbox]:checked::after {
+    @apply bg-info;
+  }
+}
+
+.splitview-item:hover {
+  @apply text-white bg-link-hover;
+
+  .splitview-item-icon, 
+  .splitview-item-metainfo {
+    @apply text-white;
+  }
+  .status-icon {
+    @apply bg-white;
+  }
+  .splitview-item-checkbox input {
+    @apply border-white;
+  }
+  .splitview-item-checkbox input[type=checkbox]:checked {
+    @apply border-white bg-white;
+  }
+  .splitview-item-checkbox input[type=checkbox]:checked::after {
+    @apply bg-info;
+  }
+}
+
+.splitview-item-checkbox {
+  grid-area: split-check;
+  & input {
+    @apply mr-xs;
+  }
+}
+
+.splitview-item-icon {
+  @apply w-spacing;
+  grid-area: split-icon;
+}
+
+.splitview-item-text {
+  @apply pr-xs;
+  grid-area: split-text;
+  line-height: 1.3;
+}
+
+.splitview-item-title {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  line-clamp: 4;
+  -webkit-line-clamp: 4;
+}
+
+.splitview-item-metainfo {
+  @apply mt-xxs text-label text-label-color;
+  line-height: 1.3;
+}
+
+.splitview-item-status {
+  @apply flex flex-col items-end w-spacing;
+  grid-area: split-status;
+}
+
+.splitview-item-status .status-icon {
+  @apply mb-xxs;
+}
+
+.splitview-item .list-tags {
+  @apply mt-xxs;
+}
+
+/*///// Collapsable splitview item/group /////*/
+
+.splitview-group > summary::before {
+  @apply inline-block w-icon h-icon mr-xxs bg-primary;
+  content: "";
+  mask-repeat: no-repeat;
+  mask-image: url("/assets/images/triangle-centered-right.svg");
+}
+
+.splitview-group[open] > summary::before {
+  mask-image: url("/assets/images/triangle-centered-down.svg");
+}
+
+.splitview-group > summary:hover::before {
+  @apply bg-white;
+}
+
+.splitview-group .splitview-item:not(summary) {
+  padding-left: 65px;
+}

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

@@ -0,0 +1,109 @@
+
+.table {
+  @apply w-full mb-spacing;
+
+  th,
+  td {
+    @apply p-xs align-middle border-t border-bordercolor;
+  }
+
+  thead th {
+    @apply text-left align-bottom border-b border-bordercolor;
+  }
+
+  tbody + tbody {
+    @apply border-t border-bordercolor;
+  }
+}
+
+.table-bordered {
+  @apply border border-bordercolor;
+
+  th,
+  td {
+    @apply border border-bordercolor;
+  }
+
+  thead {
+    th,
+    td {
+      @apply border-b border-bordercolor;
+    }
+  }
+}
+
+.table td {
+
+  &.td-fixed-width {
+    max-width: 150px;
+  }
+
+  &.td-actions {
+    min-width: 120px;
+    max-width: 150px;
+  }
+
+  &.title {
+    max-width: 500px;
+  }
+}
+
+.table.table-borderless {
+  th {
+    border: 0;
+  }
+
+  td {
+    border: 0;
+  }
+}
+
+.table.table-sm td {
+  @apply pr-spacing;
+  &:last-child {
+    padding-right: 0;
+  }
+}
+
+.table th,
+.table thead th {
+  @apply py-xxs text-label font-semibold border-b border-bordercolor;
+}
+
+.table tr:first-child td,
+.table.tbody tr:first-child td {
+  border-top: 0;
+}
+
+.td-title {
+  @apply inline pr-xs text-black hover:text-link-hover;
+}
+
+.table-bordered,
+.table-bordered thead,
+.table-bordered tbody {
+  border: 0;
+}
+
+.table-bordered tr th:first-child,
+.table-bordered tr td:first-child {
+  border-left: 0;
+}
+
+.table-bordered tr td:last-child,
+.table-bordered tr th:last-child {
+  border-right: 0;
+}
+
+.table td.cell-with-buttons {
+  @apply py-xxs;
+}
+
+.table .linked-cell:hover,
+.table .linked-row:hover {
+  @apply text-white bg-link-hover cursor-pointer;
+}
+
+.table tr:has(.highlight-parent-row:hover) {
+  @apply text-white bg-link-hover cursor-pointer;
+}

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

@@ -0,0 +1,122 @@
+
+.nav-tabs,
+.nav-pills {
+  @apply relative flex flex-row mb-spacing overflow-x-scroll overflow-y-hidden;
+}
+
+.nav-tabs {
+  @apply border-b border-bordercolor;
+}
+
+.nav-tabs::after {
+  @apply absolute block top-0 right-0 h-full w-spacing;
+  content: "";
+  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 90%);
+}
+
+.nav-tabs::-webkit-scrollbar,
+.nav-pills::-webkit-scrollbar,
+.nav-tabs .navlinks::-webkit-scrollbar {
+  display: none;
+  -ms-overflow-style: none;  /* IE and Edge */
+  scrollbar-width: none;  /* Firefox */
+}
+
+.nav-tabs .navlink, 
+.nav-tabs .nav-link {
+  @apply inline-flex items-start whitespace-nowrap mr-md h-spacing text-primary text-heading-5 font-headings border-b border-link-hover rounded-none cursor-pointer;
+  margin-bottom: -1px;
+  line-height: 1;
+  user-select: none;
+
+  &.active {
+    @apply border-b-4 border-info;
+  }
+
+  &:hover, &:focus {
+    @apply text-link-hover border-b-4 border-link-hover;
+  }
+
+  &.disabled, &.disabled:hover, &.disabled:focus {
+    @apply text-disabled;
+    cursor: not-allowed;
+    border-bottom: none;
+  } 
+
+  &:last-child {
+    margin-right: 0;
+  }
+}
+
+.nav-tabs .counter {
+  @apply ml-xxs mr-0 text-sm;
+}
+
+.nav-tabs:has(.nav-actions) {
+  display: grid;
+  grid-template-columns: 1fr auto;
+} 
+
+.nav-tabs:has(.nav-actions) .navlinks {
+  @apply pr-spacing;
+  overflow-x: scroll;
+  overflow-y: hidden;
+  white-space: nowrap;
+} 
+
+.nav-tabs:has(.nav-actions)::after  {
+  content: none;
+} 
+
+.nav-tabs:has(.nav-actions) .nav-actions::before {
+  @apply absolute block top-0 -left-spacing h-full w-spacing;
+  content: "";
+  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 90%);
+}
+
+.nav-tabs .nav-actions {
+  @apply relative flex flex-row justify-end self-end bottom-xxs ml-auto whitespace-nowrap;
+}
+
+.nav-tabs .nav-actions .link-with-icon,
+.nav-tabs .nav-actions .linked-icon {
+  @apply ml-sm;
+}
+
+
+/*/////// Nav pills ///////*/
+
+.nav-pills {
+  @apply relative flex mb-md;
+  overflow-x: scroll;
+  overflow-y: hidden;
+}
+
+.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;
+  &.active {
+    @apply text-white bg-info;
+  }
+
+  &:hover, &:focus {
+    @apply text-white bg-link-hover;
+  }
+
+  &.disabled, &.disabled:hover, &.disabled:focus {
+    @apply text-disabled cursor-not-allowed;
+  } 
+
+  &: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 {
+  @apply ml-xxs mr-0;
+}

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

@@ -0,0 +1,29 @@
+
+.list-tags {
+  @apply flex flex-row items-center flex-wrap;
+  .tag {
+    @apply mr-xxs mb-xxs;
+  }
+}
+
+.tag {
+  @apply inline-flex items-center flex-row h-md px-xs text-sm leading-none bg-gray-light rounded;
+  padding-top: 2px;
+  padding-bottom: 2px;
+}
+
+.tag .icon {
+  @apply text-xxs h-icon-xxs;
+}
+
+.tag.sm {
+  @apply h-sm text-xs px-xxs;
+}
+
+.tag.focus-group {
+  @apply text-white bg-orange-500;
+} 
+
+.tag.teamleader-verified {
+  @apply text-white bg-gray-dark;
+} 

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

@@ -0,0 +1,79 @@
+
+.list-tasks,
+.list-issues {
+  @apply gap-sm;
+  display: grid;
+}
+
+.task-item,
+.issue-item {
+  display: grid;
+  grid-template-areas: "item-icon item-title item-metrics"
+                       "item-icon item-info item-info";
+  grid-template-columns: auto 1fr;
+}
+
+.task-item-wrapper,
+.issue-item-wrapper {
+  display: grid;
+  grid-template-columns: 1fr auto;
+}
+
+.task-item:hover,
+.issue-item:hover {
+  .task-icon, 
+  .task-title, 
+  .task-info, 
+  .task-metrics .icon,
+  .issue-icon, 
+  .issue-title, 
+  .issue-info, 
+  .issue-metrics .icon {
+    @apply text-link-hover;
+  }
+}
+
+.task-item .task-icon,
+.issue-item .issue-icon {
+  @apply w-spacing mr-xxs;
+}
+
+.task-item .task-title,
+.issue-item .issue-title {
+  @apply text-black font-medium;
+  grid-area: item-title;
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  line-clamp: 3; 
+  -webkit-line-clamp: 3; 
+  line-height: 1.3;
+}
+
+.task-item .task-info,
+.issue-item .issue-info {
+  @apply text-xs text-label-color font-semibold;
+  grid-area: item-info;
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  line-clamp: 2; 
+  -webkit-line-clamp: 2; 
+  padding-top: 2px;
+  line-height: 1.2;
+}
+
+.task-item .task-action
+.issue-item .issue-action {
+  grid-area: item-actions;
+}
+
+.task-item .task-metrics,
+.issue-item .issue-metrics {
+  grid-area: item-metrics;
+}
+
+.task-item .metric-item,
+.issue-item .metric-item {
+  @apply ml-xs;
+}

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

@@ -0,0 +1,90 @@
+
+.list-test-items {
+  @apply grid gap-sm;
+}
+
+.test-item {
+  @apply relative grid pl-spacing;
+}
+
+.test-item .test-title::before {
+  @apply w-icon h-icon bg-black;
+  content: "";
+  position: absolute;
+  display: inline-block;
+  mask-repeat: no-repeat;
+  left: 0;
+  top: -2px;
+  mask-repeat: no-repeat;
+}
+
+.test-item.test-initialized .test-title::before {
+  mask-image: url("/assets/images/test-initialized.svg");
+} 
+
+.test-item.test-running .test-title::before {
+  mask-image: url("/assets/images/test-running.svg");
+} 
+
+.test-item.test-stopped .test-title::before {
+  mask-image: url("/assets/images/test-stopped.svg");
+} 
+
+.test-item.test-locked .test-title::before {
+  mask-image: url("/assets/images/test-locked.svg");
+} 
+
+.test-item.test-failed .test-title::before {
+  @apply bg-danger;
+  mask-image: url("/assets/images/test-failed.svg");
+} 
+
+.test-item.test-archived .test-title::before {
+  mask-image: url("/assets/images/test-archived.svg");
+} 
+
+.test-item.test-success .test-title::before {
+  @apply bg-success;
+  mask-image: url("/assets/images/test-check.svg");
+} 
+
+.test-item.test-promoted .test-title::before {
+  mask-image: url("/assets/images/test-promoted.svg");
+} 
+
+.test-item .test-title {
+  @apply text-black font-medium;
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3; 
+  line-height: 1.3;
+  &:hover, &:focus {
+    @apply text-link-hover;
+    &::before {
+      @apply bg-link-hover;
+    }
+  }
+}
+
+.test-item .test-info {
+  @apply text-xs text-label-color font-semibold;
+  overflow: hidden;
+  display: -webkit-box;
+  margin-top: 2px;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2; 
+  line-height: 1.3;
+}
+
+.test-item .test-progress {
+  @apply mt-xxs mb-xxs;
+}
+
+.test-item .test-metrics {
+  @apply pt-xxs;
+}
+
+.test-item .metric-item {
+  @apply mr-xs;
+}