testio-tailwind 0.1.0

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

@@ -0,0 +1,143 @@
+
+/*/ Icon sizes and spacing /*/
+
+.icon {
+  @apply h-icon text-icon align-bottom;
+}
+
+.icon-xs {
+  @apply h-icon-xs text-icon-xs;
+}
+
+.icon-sm {
+  @apply h-icon-sm text-icon-sm;
+}
+
+.icon-lg {
+  @apply h-icon-lg text-icon-lg;
+}
+
+.icon-xl {
+  @apply h-icon-xl text-icon-xl;
+}
+
+.icon-functional {
+  @apply text-danger;
+}
+
+.icon-critical,
+.icon-bug-reproduction.critical,
+.icon-review-bug-check.critical,
+.icon-testcase-bug.critical,
+.icon-bug-fix-confirmation.critical {
+  @apply text-critical;
+}
+
+.icon-high,
+.icon-bug-reproduction.high,
+.icon-review-bug-check.high,
+.icon-testcase-bug.high,
+.icon-bug-fix-confirmation.high {
+  @apply text-high;
+}
+
+.icon-low,
+.icon-bug-reproduction.low,
+.icon-review-bug-check.low,
+.icon-testcase-bug.low,
+.icon-bug-fix-confirmation.low {
+  @apply text-low;
+}
+
+.icon-visual {
+  @apply text-visual;
+}
+
+.icon-content {
+  @apply text-content;
+}
+
+.icon-usability {
+  @apply text-usability;
+}
+
+.icon-user-outline-check.success,
+.icon-user-story-check.success {
+  @apply text-success;
+}
+
+.icon-user-outline-cross.danger,
+.icon-user-outline-blocked.danger,
+.icon-user-story-cross.danger {
+  @apply text-danger;
+}
+
+.icon.success {
+  @apply text-success;
+}
+
+.icon.danger {
+  @apply text-danger;
+}
+
+/*///// Status Icons /////*/
+
+.status-icon {
+  @apply inline-block w-icon h-icon bg-black;
+  mask-repeat: no-repeat;
+  mask-size: 20px 20px;
+}
+
+.status-submitted {
+  mask-image: url("/assets/images/exclamation-circle.svg");
+}
+
+.status-manager-approved {
+  @apply bg-success;
+  mask-image: url("/assets/images/check-circle.svg");
+}
+
+.status-customer-approved {
+  mask-image: url("/assets/images/check-circle-filled.svg");
+  @apply bg-success;
+}
+
+.status-forwarded {
+  mask-image: url("/assets/images/forward.svg");
+  @apply bg-danger;
+}
+
+.status-manager-rejected {
+  mask-image: url("/assets/images/cross-circle.svg");
+  @apply bg-danger;
+}
+
+.status-customer-rejected {
+  mask-image: url("/assets/images/cross-circle-filled.svg");
+  @apply bg-danger;
+}
+
+.status-manager-question {
+  mask-image: url("/assets/images/message-question.svg");
+}
+
+.status-withheld {
+  mask-image: url("/assets/images/blocked.svg");
+  @apply bg-danger;
+}
+
+.status-reproduction {
+  mask-image: url("/assets/images/bug-reproduction.svg");
+  width: 23px;
+  mask-size: 23px 20px;
+}
+
+.status-testcase-passed {
+  mask-image: url("/assets/images/check-circle-filled.svg");
+  @apply bg-success;
+}
+
+.status-testcase-failed {
+  mask-image: url("/assets/images/cross-circle-filled.svg");
+  @apply bg-danger;
+}

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

@@ -0,0 +1,27 @@
+
+.profile-thumb {
+  @apply w-spacing h-spacing;
+}
+
+.profile-thumb.round {
+  @apply rounded-full;
+}
+
+.profile-thumb.sm {
+  @apply w-md h-md;
+}
+
+.profile-thumb.lg {
+  height: 80px; 
+  width: 80px;
+}
+
+.profile-thumb.xl {
+  height: 130px;
+  width: 130px;
+}
+
+.profile-thumb.xxl {
+  height: 200px;
+  width: 200px;
+}

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

@@ -0,0 +1,82 @@
+.app-body {
+  @apply grid h-screen max-h-screen w-full overflow-hidden bg-white text-black;
+  grid-template-areas:  "header header header"
+                        "sidebar test-header test-header"
+                        "sidebar main aside"
+                        "sidebar chat-container chat-container"
+                        "sidebar footer footer";
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  grid-template-rows: auto auto minmax(0, 1fr) auto auto;
+}
+
+.main-content {
+  @apply relative overflow-x-hidden overflow-y-scroll max-h-full p-body-padding-mobile pb-lg sm:px-body-padding-tablet xl:px-body-padding-desktop;
+  grid-area: main;
+}
+
+.form-page-wrapper {
+  display: contents;
+}
+
+.page-content {
+  @apply mt-header pb-lg;
+}
+
+.content-wrapper {
+  @apply w-full overflow-x-hidden mt-header pb-lg;
+}
+
+.navbar-margin-top {
+  @apply mt-header;
+}
+
+.actionbar-padding-bottom {
+  @apply pb-lg;
+}
+
+/* @media (max-width: $sidebar-breakpoint) {
+  .offset .content-wrapper, .meta-header {
+    transition: all .25s ease-out;
+
+  }
+  .content-wrapper, .meta-header {
+    transition: all .25s ease-out;
+  }
+} */
+
+/* @media (min-width: $sidebar-breakpoint) {
+  .content-wrapper {
+    padding-left: $sidebar-width;
+    overflow-x: hidden;
+  }
+  .meta-header {
+    padding-left: $sidebar-width;
+  }
+} */
+
+
+/* .page-header {
+  padding: $spacing $body-padding-desktop;
+
+  .page-title {
+    margin: 0;
+
+    .label {
+      padding: 0;
+      vertical-align: super;
+      color: $gray;
+      background: transparent;
+      font-weight:normal;
+      font-size:.35em;
+      position:relative;
+      top:-7px;
+    }
+
+  }
+
+  @include media-breakpoint-down(sm) {
+    padding: $spacing $body-padding-mobile;
+  }
+} */
+
+

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

@@ -0,0 +1,281 @@
+
+.list-listitems .listitem,
+.list-listitems .listitem-with-footer {
+  @apply mb-xs; 
+}
+
+.listitem, 
+details.listitem .listitem-header {
+  @apply relative grid items-stretch border-0 grid-rows-auto-auto grid-cols-auto-fr-auto sm:grid-cols-auto-fr-2-auto;
+  grid-template-areas:  "badge title actions"
+                        "badge metrics actions";
+  grid-template-columns: auto 1fr auto;
+
+  @screen sm {
+    grid-template-areas:  "badge title metrics actions";
+  }
+}
+
+.listitem {
+  @apply bg-card rounded border;
+}
+
+details.listitem {
+  grid: none;
+}
+
+.listitem-with-footer {
+  @apply grid;
+}
+
+.listitem.white {
+  @apply text-black bg-white;
+}
+
+a.listitem:hover {
+  @apply text-white bg-link-hover border-link-hover;
+  .icon {
+    @apply text-white;
+  }
+}
+
+.listitem[open] > .listitem-header {
+  @apply border-b-1 border-white rounded-t;
+}
+
+.listitem .collapse-btn {
+  @apply justify-center items-start w-btn p-xxs pt-xs;
+  &:hover:after {
+    @apply bg-white;
+  }
+}
+
+.listitem[open] > .listitem-header .collapse-btn {
+  @apply rounded-none last:rounded-tr;
+  border-radius: 0;
+}
+
+.listitem .collapse-btn:after {
+  @apply inline-block w-sm h-icon bg-primary;
+  content: "";
+  mask-image: url("/assets/images/arrow-down.svg");
+  mask-repeat: no-repeat;
+}
+
+.listitem[open] > .listitem-header .collapse-btn:after {
+  mask-image: url("/assets/images/arrow-up.svg");
+}
+
+.listitem-badge {
+  @apply flex justify-center items-start w-btn p-xxs pt-xs text-white bg-black rounded-l;
+  grid-area: badge;
+}
+
+.listitem-badge.success {
+  @apply bg-success;
+}
+
+.listitem-badge.danger {
+  @apply bg-danger;
+}
+
+.listitem[open] > .listitem-header .listitem-badge {
+  border-bottom-left-radius: 0;
+}
+
+.listitem-badge .counter {
+  @apply flex justify-center items-center text-center w-icon h-icon m-0 font-semibold text-black bg-white;
+  border-radius: 50%;
+}
+
+.listitem-title {
+  @apply flex-grow pt-xs px-sm overflow-hidden mb-xs text-base;
+  grid-area: title;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  line-height: 1.4;
+}
+
+.listitem-label {
+  @apply inline text-label ml-xs;
+}
+
+.listitem-metrics {
+  @apply relative flex flex-wrap px-sm sm:pt-xs;
+  grid-area: metrics;
+}
+
+.listitem-metric {
+  @apply flex mr-xs mb-xs last:mr-0;
+  & .icon {
+    @apply mr-xxs; 
+  }
+}
+
+.listitem-actions {
+  @apply flex relative items-stretch justify-end -mt-1px -mr-1px;
+  grid-area: actions;
+}
+
+.listitem-actions summary {
+  @apply contents;
+}
+
+.listitem-actions .btn {
+  @apply h-full rounded-none ml-1px last:rounded-r;
+}
+
+.listitem-actions .btn-secondary {
+  @apply px-xs border-transparent;
+}
+
+.listitem-content {
+  @apply p-sm;
+}
+
+.listitem-card {
+  @apply relative mb-md p-sm bg-white rounded last:mb-0;
+}
+
+.listitem-card img {
+  @apply max-w-full;
+}
+
+.listitem-subheadline {
+  @apply mb-xs text-label font-semibold uppercase;
+}
+
+.listitem[open] > .listitem-header .listitem-actions .btn {
+  @apply rounded-b-none;
+}
+
+.listitem .section-collapsable {
+  @apply mb-md;
+}
+
+.listitem .section-header::after {
+  @apply border-gray-light;
+}
+
+.listitem .section-header .section-title {
+  @apply bg-card;
+} 
+
+
+/* ////// Nested listitems, Styles for white listitems ////// */
+
+.listitem-content .listitem {
+  @apply bg-white;
+}
+
+.listitem-content .listitem[open] > .listitem-header,
+.listitem.white[open] > .listitem-header {
+  @apply border-b-1 border-card;
+}
+
+.listitem-content .listitem .listitem-card,
+.listitem.white .listitem-card {
+  @apply bg-gray-lightest;
+}
+
+.listitem-content .listitem .section-header::after,
+.listitem.white .section-header::after {
+  @apply border-b-1 border-bordercolor;
+}
+
+.listitem-content .listitem .section-header .section-title,
+.listitem.white .section-header .section-title {
+  @apply bg-white;
+}
+
+
+/*//////// Listitem selectable ////////*/
+
+.listitem-check input {
+  @apply hidden;
+}
+
+.listitem-check {
+  @apply flex justify-center items-center w-btn;
+  grid-area: badge;
+}
+
+.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;
+}
+
+.listitem-check label::after {
+  @apply inline-block h-md w-md bg-white border-1 border-primary rounded;
+  content: "";
+}
+
+.listitem-check input:checked + label {
+  @apply bg-info;
+}
+
+.listitem-check input:checked + label::after {
+  border: none;
+}
+
+.listitem-check input:checked + label::before {
+  @apply absolute inline-block h-md w-md bg-info;
+  content: "";
+  mask-image: url("/assets/images/checkbox-background-white.svg");
+  mask-repeat: no-repeat;
+}
+
+.listitem[open] .listitem-check label {
+  @apply rounded-bl-none;
+}
+
+
+/*////// Listitem with action footer //////*/
+
+.listitem-with-footer .listitem {
+  @apply mb-0 rounded-b-none;
+}
+
+.listitem-with-footer .listitem-badge {
+  @apply rounded-bl-none;
+}
+
+.listitem-with-footer .listitem-actions .btn:last-child {
+  @apply rounded-br-none;
+}
+
+.listitem-with-footer .listitem-footer {
+  @apply flex w-full;
+}
+
+.listitem-with-footer .listitem-footer .btn {
+  @apply px-sm m-0 rounded-none border-l-1 border-white;
+
+  &:first-child {
+    @apply rounded-bl border-l-0;
+  }
+
+  &:last-child {
+    @apply rounded-br;
+  }
+}
+
+.listitem-with-footer .listitem-footer .dropdown-actions .btn {
+  @apply border-l-1 border-white rounded-bl-none;
+}
+
+.listitem-with-footer .listitem-footer .btn-primary {
+  @apply flex-grow;
+}
+
+.listitem-with-footer .listitem-footer .btn-secondary {
+  @apply flex-1 text-white bg-primary border-t-0 border-r-0 border-b-0;
+  &:hover, &:focus, &:active {
+    @apply bg-link-hover;
+  }
+}
+
+.listitem-with-footer .listitem-footer .btn-square {
+  @apply flex-auto flex-grow-0 flex-shrink-0;
+}

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

@@ -0,0 +1,68 @@
+
+.list-inline {
+  @apply flex flex-wrap;
+}
+
+.list-inline li {
+  @apply inline-block mr-xxs mb-xxs last:mr-0 align-top;
+}
+
+.list-vertical {
+  @apply grid gap-xs;
+}
+
+
+/*/////// Description List ///////*/
+
+dl dd {
+  @apply mb-xs last:mb-0;
+}
+
+dl.list-inline {
+  @apply grid gap-xs content-start;
+  grid-template-columns: auto 1fr;
+}
+
+dl.list-inline dt {
+  @apply pr-spacing;
+}
+
+dl.list-inline dd {
+  @apply mb-0;
+}
+
+dl.list-inline.responsive {
+  grid-template-columns: 1fr;
+  dd {
+    @apply mb-xs;
+  }
+  @screen lg {
+    grid-template-columns: auto 1fr;
+    dd {
+      margin-bottom: 0;
+    }
+  }
+}
+
+dl.list-vertical {
+  @apply grid gap-xs;
+}
+
+
+/*/////// Bullet List //////*/
+
+ul.bullet-list {
+  @apply relative text-left;
+}
+
+ul.bullet-list li {
+  @apply relative pl-md;
+}
+
+ul.bullet-list li::before {
+  @apply absolute inline-block w-icon-xs h-icon-xs left-0 bg-black;
+  content: "";
+  top: -1px;
+  mask-image: url("/assets/images/circle-sm-filled.svg");
+  mask-repeat: no-repeat;
+}

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

@@ -0,0 +1,104 @@
+.testio-loader-wrapper {
+  overflow: hidden;
+  position: relative;
+
+  .stroke {
+    stroke-linecap: round;
+    stroke-miterlimit: 10;
+    stroke-width: 180px;
+  }
+
+  .anim-bar {
+    animation: dash-line 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
+    stroke: e6e6e6;
+  }
+
+  .anim-circle {
+    animation: dash-circle 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
+    stroke-dasharray: 1, 200;
+    stroke-dashoffset: 0;
+  }
+
+  @keyframes rotate {
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+
+  @keyframes dash-line {
+    0% {
+      stroke-dasharray: 1, 200;
+      stroke-dashoffset: -180px;
+    }
+
+    50% {
+      stroke-dasharray: 50, 200;
+    }
+
+    100% {
+      stroke-dasharray: 0, 200;
+      stroke-dashoffset: 180px;
+    }
+  }
+
+  @keyframes dash-circle {
+    0% {
+      stroke-dasharray: 1, 200;
+      stroke-dashoffset: 0;
+    }
+
+    50% {
+      stroke-dasharray: 89, 200;
+      stroke-dashoffset: -35px;
+    }
+
+    100% {
+      stroke-dasharray: 89, 200;
+      stroke-dashoffset: -124px;
+    }
+  }
+
+  @keyframes color {
+    100%,
+    0% {
+      stroke: #e6e6e6;
+    }
+
+    99% {
+      stroke: #21bef4;
+    }
+  }
+}
+
+.testio-loader-i {
+  height: 180px;
+  left: 0;
+  position: absolute;
+  top: 0;
+  width: 180px;
+}
+
+.testio-loader-o-wrapper {
+  height: 180px;
+  margin-left: 20;
+  position: relative;
+  width: 180px;
+
+  &::before {
+    content: "";
+    display: block;
+    padding-top: 100%;
+  }
+
+  .testio-loader-o {
+    animation: rotate 2s linear infinite;
+    bottom: 0;
+    height: 180px;
+    left: 0;
+    position: absolute;
+    right: 0;
+    top: 0;
+    transform-origin: center center;
+  }
+}
+