testio-tailwind 0.1.0

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

@@ -0,0 +1,120 @@
+.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;
+
+  .card {
+    @apply absolute border-link-hover;
+    top: -1px;
+  }
+
+  .popover-description {
+    @apply text-white font-normal mb-xxs leading-tight text-xs;
+  }
+}
+
+.popover-content {
+  @apply overflow-hidden pb-0;
+}
+
+.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.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;
+}

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

@@ -0,0 +1,70 @@
+.progress {
+  @apply h-progress-bar-thin-height;
+  appearance: none;
+  display: block;
+  overflow: hidden;
+  width: 100%;
+  border-radius: 0;
+  &::-webkit-progress-bar {
+    @apply h-progress-bar-thin-height bg-gray-lighter;
+  }
+  &::-webkit-progress-value {
+    @apply h-progress-bar-thin-height bg-info;
+  }
+}
+
+.progress.thick,
+.progress.thick {
+  @apply h-progress-bar-thick-height rounded;
+  &::-webkit-progress-value,
+  &::-webkit-progress-bar {
+    @apply h-progress-bar-thick-height;
+  } 
+}
+
+.progress.empty,
+.progress.empty-progress-bar {
+  @apply border border-white;
+}
+
+.progress .progress-bar  {
+  float: left;
+  height: 100%;
+}
+
+.progress-vertical {
+  @apply rounded bg-gray-lighter w-progress-bar-thick-height;
+  overflow: hidden;
+  margin: auto;
+
+  &.thin-progress-bar {
+    @apply w-progress-bar-thin-height;
+  }
+
+  .progress-bar {
+    width: 100%;
+  }
+}
+
+.progress-bar-blue {
+  @apply bg-info;
+}
+
+.progress-bar-success,
+.progress-bar-success::-webkit-progress-value {
+  @apply bg-success;
+}
+
+.progress-bar-danger,
+.progress-bar-danger::-webkit-progress-value {
+  @apply bg-danger;
+}
+
+.progress.test-progress {
+  &::-webkit-progress-bar {
+    @apply h-progress-bar-thin-height bg-gray-lighter;
+  }
+  &::-webkit-progress-value {
+    @apply h-progress-bar-thin-height bg-info;
+  }
+}

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

@@ -0,0 +1,59 @@
+.radio-tabs {
+  @apply flex flex-wrap;
+}
+
+.radio-tab {
+  @apply hidden;
+}
+
+.radio-tabs .radio-tab-btn {
+  @apply inline-flex justify-start items-center h-btn py-xs px-md text-primary bg-transparent border border-primary;
+  line-height: normal;
+  &:hover, &:focus {
+    @apply text-white bg-link-hover border-link-hover;
+    & .icon {
+      @apply text-white;
+    }
+  }
+  &:first-of-type {
+    @apply rounded-l;
+  }
+  &:last-of-type {
+    @apply rounded-r;
+  }
+}
+
+.radio-tab:checked + .radio-tab-btn {
+  @apply relative text-white border-info bg-info;
+  background-image: none;
+
+  &::after {
+    @apply absolute block bg-white;
+    content: "";
+    height: 6px;
+    width: 8px;
+    top: 3px;
+    left: 3px;
+    mask-image: url("/assets/images/check-selectable-items.svg");
+    mask-repeat: no-repeat;
+  }
+
+  & .icon-low, & .icon-high, & .icon-critical {
+    @apply text-white;
+  }
+  &:hover, &:focus {
+    @apply text-white bg-link-hover border-link-hover;
+    & .icon {
+      @apply text-white;
+    }
+  }
+}
+
+.radio-tabs .radio-tab-content {
+  @apply hidden w-full mt-xs p-sm bg-card rounded;
+  order: 99;
+}
+
+.radio-tab:checked + .radio-tab-btn + .radio-tab-content {
+  @apply block; 
+}

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

@@ -0,0 +1,27 @@
+/* Remove default styles */
+
+details summary {
+  list-style: none;
+}
+
+ul, ol {
+  list-style: none;
+}
+
+a {
+  text-decoration: none !important;
+}
+
+a:hover,
+a:hover .icon::before,
+a.icon, 
+a.icon-xs, 
+a.icon-sm, 
+a.icon-lg, 
+a.icon-xl {
+  @apply no-underline hover:no-underline;
+}
+
+input {
+  appearance: none;
+}

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

@@ -0,0 +1,133 @@
+.result-module {
+  @apply relative;
+}
+
+.result-item {
+  @apply relative grid pl-spacing select-none;
+  grid-template-columns: auto 1fr auto;
+}
+
+.result-module > .result-item {
+  @apply border-t border-bordercolor first:border-t-0;
+}
+
+.result-header {
+  @apply flex flex-row justify-end pr-btn;
+}
+
+.result-header-item {
+  @apply flex flex-row;
+}
+
+.result-header-item.vertical-labels {
+  @apply flex-col-reverse flex-wrap justify-start content-center w-btn pb-xs select-none;
+  white-space: nowrap;
+  & .label {
+    @apply pt-xxs;
+    writing-mode: vertical-rl;
+    transform: rotate(180deg);
+  }
+}
+
+.result-item-buttons {
+  display: flex;
+  flex-direction: row;
+  margin-left: auto;
+}
+
+.result-item-buttons .btn {
+  @apply items-center justify-center w-btn h-full p-xxs border-l border-bordercolor rounded-none;
+  border-top: none;
+  border-bottom: none;
+}
+
+details.result-item {
+  grid: none;
+}
+
+details.result-item > summary {
+  @apply cursor-pointer;
+  position: relative;
+  display: grid;
+  grid-template-columns: 1fr auto auto;
+}
+
+details.result-item[open] > summary {
+  @apply border-b border-bordercolor;
+}
+
+details.result-item > summary:hover .result-item-title {
+  @apply text-link-hover;
+}
+
+.result-item::before {
+  @apply absolute inline-block w-icon h-icon top-xs left-0;
+  content: "";
+  mask-repeat: no-repeat;
+}
+
+.result-item.feature::before {
+  @apply bg-gray-dark;
+  mask-image: url("/assets/images/feature.svg");
+}
+
+.result-item.feature-passed::before {
+  @apply bg-success;
+  mask-image: url("/assets/images/feature-check.svg");
+}
+
+.result-item.feature-failed::before {
+  @apply bg-danger;
+  mask-image: url("/assets/images/feature-cross.svg");
+}
+
+.result-item.pending::before {
+  @apply bg-gray-dark;
+  mask-image: url("/assets/images/clock.svg");
+}
+
+.result-item.testcase::before {
+  @apply bg-black;
+  mask-image: url("/assets/images/testcase.svg");
+}
+
+details.result-item .collapse-btn {
+  @apply w-btn p-xxs justify-center top-0 -right-btn h-full border-l rounded-none border-bordercolor;
+  &:hover:after {
+    @apply bg-white;
+  }
+}
+
+details.result-item .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;
+}
+
+details.result-item[open] .collapse-btn:after {
+  mask-image: url("/assets/images/arrow-up.svg");
+}
+
+details.result-item .issue-item {
+  @apply mr-btn py-xs border-b border-bordercolor last:border-b-0;
+}
+
+details.result-item .result-item {
+  @apply pl-lg mr-btn bg-gray-lightest border-b border-bordercolor last:border-b-0;
+  &::before {
+    @apply left-sm;
+  }
+}
+
+.result-item-title {
+  @apply py-xs pr-md;
+}
+
+.result-item-metrics {
+  @apply py-xs pr-xxs;
+}
+
+.result-item-metrics .metric-item {
+  @apply mr-xs;
+}

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

@@ -0,0 +1,110 @@
+.form-search {
+  @apply relative;
+}
+
+.form-search input[type=search] {
+  appearance: none;
+  &::-ms-clear { display: none; width: 0; height: 0; }
+  &::-ms-reveal { display: none; width: 0; height: 0; }
+  &::-webkit-search-decoration,
+  &::-webkit-search-cancel-button,
+  &::-webkit-search-results-button,
+  &::-webkit-search-results-decoration { display: none; }
+}
+
+.form-search.inverted input {
+  @apply text-white border-primary bg-transparent;
+}
+
+.form-search .btn-clear,
+.form-search .btn-submit {
+  @apply absolute justify-center w-btn top-0 px-xxs rounded-none;
+  &::before {
+    @apply inline-block w-icon h-icon bg-primary;
+    content: "";
+    mask-repeat: no-repeat;
+  }
+  &:hover::before, &:focus::before {
+    @apply bg-white;
+  }
+  &:last-child {
+    @apply rounded-r;
+  }
+}
+
+.form-search .btn-clear {
+  @apply right-btn;
+}
+
+.form-search .btn-clear::before {
+  mask-image: url("/assets/images/cross.svg");
+}
+
+.form-search .btn-submit {
+  @apply right-0 bg-primary;
+  &::before {
+    @apply bg-white;
+  }
+  &:hover, &:focus {
+    @apply bg-link-hover;
+  }
+}
+
+.form-search .btn-submit::before {
+  mask-image: url("/assets/images/search.svg");
+}
+
+.form-search.direct-input {
+  &::before {
+    @apply absolute inline-block w-icon h-icon top-xs left-xs bg-gray;
+    content: "";
+    mask-image: url("/assets/images/search.svg");
+    mask-repeat: no-repeat;
+  }
+  .form-control {
+    @apply pl-lg pr-lg;
+  }
+  .btn-clear {
+    @apply right-0;
+  }
+}
+
+
+/*/ Search popover /*/
+
+.popover-menu.search, 
+.dropdown-menu.search {
+  @apply w-popover-width bg-petrol-800;
+  input {
+    border: none;
+  }
+  .btn {
+    @apply rounded;
+  }
+}
+
+.popover-menu .list-searchresults,
+.dropdown-menu .list-searchresults {
+  @apply mt-xs p-sm pt-xs border-t-1 border-black overflow-y-scroll;
+  max-height: 500px;
+  &::-webkit-scrollbar {
+    display: none;
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+  }
+}
+
+.popover-menu .list-searchresults .issue-item,
+.dropdown-menu .list-searchresults .issue-item {
+  @apply mt-xs;
+}
+
+.popover-menu .issue-title,
+.dropdown-menu .issue-title {
+  @apply text-white;
+}
+
+.popover-menu .issue-info,
+.dropdown-menu .issue-info {
+  @apply text-label-inverted-color;
+}

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

@@ -0,0 +1,98 @@
+
+.section {
+  @apply mb-section-margin;
+}
+
+.section-header {
+  @apply relative flex flex-row mb-md;
+
+  &::after {
+    @apply block absolute h-1px w-full left-0 bottom-0 border-bordercolor border-b-1;
+    content: "";
+  }
+}
+
+.section-header .section-title {
+  @apply pr-sm bg-appbody overflow-hidden inline-block relative align-bottom m-0;
+  bottom: -6px;
+  line-height: 1.2;
+  z-index: 1;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1; 
+  
+  .icon { 
+    vertical-align: middle;  
+  }
+  .count {
+    margin-left: 2px;
+    font-size: 60%;
+  }
+}
+
+.section-header .section-label {
+  @apply text-label relative self-end ml-auto whitespace-nowrap;
+}
+
+.section-header .section-detail {
+  @apply relative inline-block text-label;
+}
+
+.section-header .section-time-frame {
+  @apply absolute top-xs right-0;
+}
+
+.section-actions {
+  @apply relative flex flex-row justify-end self-end ml-auto whitespace-nowrap bottom-xxs;
+}
+
+.section-actions .link-with-icon,
+.section-actions .linked-icon {
+  @apply ml-sm;
+}
+
+
+/* collapsable section */
+
+.section-collapsable {
+  @apply mb-section-margin;
+}
+
+.section-collapsable .section-header {
+  @apply mb-0;
+}
+
+.section-collapsable[open] .section-header {
+  @apply mb-heading;
+}
+
+.section-collapsable[open] .section-title::before {
+  mask-image: url("/assets/images/caret-down.svg");
+}
+
+.section-collapsable .section-title {
+  @apply pl-sm text-primary;
+  user-select: none;
+}
+
+.section-collapsable .section-title::before {
+  @apply absolute inline-block h-icon w-icon bg-primary;
+  content: "";
+  top: 50%;
+  left: 0;
+  margin-top: -11px;
+  mask-image: url("/assets/images/caret-right.svg");
+  mask-repeat: no-repeat;
+  z-index: 1;
+}
+
+.section-collapsable .section-header:hover,
+.section-collapsable .section-header:focus,
+.section-collapsable .section-header:active {
+  .section-title {
+    @apply text-link-hover;
+  }
+  .section-title::before {
+    @apply bg-link-hover;
+  }
+}

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

@@ -0,0 +1,51 @@
+
+.form-select {
+  @apply w-full;
+}
+
+select {
+  @apply appearance-none;
+  background-image: none;
+  background-size: auto;
+}
+
+/*//// Select native ////*/
+
+.form-select-native .select-wrapper {
+  @apply relative;
+}
+
+.form-select-native .select-wrapper::after {
+  @apply absolute inline-block h-md top-xs right-sm bg-white;
+  content: "";
+  mask-image: url("/assets/images/caret-down.svg");
+  width: 9px;
+  z-index: 1;
+}
+
+.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-none border-0 cursor-pointer;
+}
+
+.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");
+  background-repeat: repeat;
+  &::after {
+    @apply bg-disabled;
+  }
+  & input::placeholder {
+    @apply text-disabled;
+  }
+}
+
+.form-select-native select::placeholder {
+  @apply text-placeholder italic text-base;
+}
+
+.form-select-native option {
+  @apply appearance-none py-xxs;
+  &:hover, &:focus {
+    @apply bg-link-hover;
+  }
+}