testio-tailwind 0.1.0

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

@@ -0,0 +1,144 @@
+.grid-testercards {
+  @apply grid gap-grid-gutter;
+
+  @screen sm {
+    grid-template-columns: 1fr 1fr;
+  }
+  @screen lg {
+    grid-template-columns: 1fr 1fr 1fr;
+  }
+  @screen xl {
+    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
+  }
+  @screen 3xl {
+    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
+  }
+}
+
+.tester-card {
+  @apply text-center bg-card;
+}
+
+.tester-card .card-header {
+  @apply flex justify-center items-center p-sm overflow-hidden rounded-t;
+}
+
+.tester-card.running .card-header {
+  @apply bg-petrol-dark;
+}
+
+.tester-card a.card-header:hover, 
+.tester-card a.card-header:focus, 
+.tester-card a.card-header:active {
+  @apply bg-link-hover;
+}
+
+.tester-card .card-image {
+  @apply inline-block w-xxl h-xxl rounded overflow-hidden shadow;
+}
+
+.tester-card .card-badge {
+  @apply absolute top-0 right-0;
+}
+
+.tester-card .card-badge::before {
+  @apply absolute block bg-gray-darker;
+  content: "";
+  transform: rotate(45deg);
+  width: 100px;
+  height: 25px;
+  right: -25px;
+  top: 10px;
+}
+
+.tester-card .card-badge::after {
+  @apply absolute inline-block w-icon-xs h-icon-xs bg-white;
+  content: "";
+  right: 14px;
+  top: 17px;
+  mask-image: url("/assets/images/exclamation-circle-filled.svg");
+  mask-repeat: no-repeat;
+}
+
+.tester-card .card-badge.high-priority {
+  &::before {
+    @apply bg-danger;
+  }
+  &::after {
+    mask-image: url("/assets/images/exclamation-circle-filled.svg");
+  }
+}
+
+.tester-card .card-badge.opportunity {
+  &::before {
+    @apply bg-info;
+  }
+  &::after {
+    mask-image: url("/assets/images/verify-exclamation.svg");
+  }
+}
+
+.tester-card .card-label {
+  @apply text-xs;
+}
+
+.tester-card .card-title {
+  @apply block m-0 p-0 text-black;
+  margin-bottom: 2px;
+  &:hover, &:focus, &:active {
+    @apply text-link-hover;
+  }
+  h2, h3, h4, h5 {
+    @apply text-base font-semibold m-0;
+  }
+}
+
+.tester-card .card-info {
+  @apply relative p-xxs py-xs border-b border-gray-light;
+}
+
+.tester-card .card-content {
+  @apply p-xs pb-sm first:pt-xxs;
+  line-height: 1.2;
+}
+
+.tester-card .test-status-icons {
+  @apply flex justify-center flex-wrap mt-xxs;
+  span {
+    @apply mr-xs mb-xxs last:mr-0;
+  }
+}
+
+.tester-card .progress {
+  @apply absolute appearance-none w-full left-0;
+  height: 2px;
+  bottom: -2px;
+  
+  &::-webkit-progress-bar {
+    @apply bg-gray-light;
+  }
+  &::-webkit-progress-value {
+    @apply bg-info;
+  }
+}
+
+.tester-card .card-perks-list {
+  @apply inline-block w-auto;
+}
+
+.tester-card .card-perks {
+  @apply flex justify-end items-center flex-col pb-sm;
+  flex: 1 1 auto;
+}
+
+.tester-card .card-perks-list li {
+  @apply flex mt-xxs first:mt-0;
+}
+
+.tester-card .card-content p:first-child {
+  @apply mb-xxs;
+}
+
+.tester-card .bullet-list {
+  @apply inline-block;
+}

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

@@ -0,0 +1,37 @@
+
+/*///////// tester Header /////////*/
+
+.header.tester .header-logo::before {
+  content: url("/assets/images/logo-testio/testio_horizontal_purpleteal_white.svg");
+}
+
+.header.tester {
+  @apply bg-navigation-tester-color;
+}
+.header.tester .navlink.active {
+  @apply text-navigation-tester-color bg-navlink-tester-active-bg;
+}
+
+.header.tester .navlink.active .icon {
+  @apply text-navigation-tester-color;
+}
+
+.header.tester .navlink:hover,
+.header.tester .navlink:focus,
+.header.tester .navlink.active:focus,
+.header.tester .navlink.active:hover,
+.header.tester .dropdown-link:focus,
+.header.tester .header-dropdown .dropdown-link:hover {
+  @apply text-navlink-tester-hover-color bg-navlink-tester-hover-bg;
+
+  & .icon {
+    @apply text-navlink-tester-hover-color;
+  }
+}
+
+.header.tester .header-dropdown summary:hover:after, 
+.header.tester .header-dropdown summary:focus:after {
+  @apply bg-navlink-tester-hover-color;
+}
+
+

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

@@ -0,0 +1,93 @@
+
+/*///////// tester Sidebar /////////*/
+ 
+.sidebar.tester,
+.header.tester .sidebar {
+  @apply bg-navigation-tester-color;
+}
+
+.sidebar.tester .navlink,
+.sidebar.tester .navlink .icon,
+.header.tester .sidebar .navlink,
+.header.tester .sidebar .navlink .icon {
+  @apply text-white;
+}
+
+.sidebar.tester summary:after,
+.header.tester summary:after {
+  @apply bg-white;
+}
+
+.sidebar.tester .navlink.active,
+.header.tester .navlink.active {
+  @apply text-white bg-navlink-tester-active-bg;
+  & .icon {
+    @apply text-white;
+  }
+}
+
+.sidebar.tester .navlink:hover,
+.sidebar.tester .navlink:focus,
+.sidebar.tester .navlink.active:focus,
+.sidebar.tester .navlink.active:hover,
+.header.tester .sidebar .navlink:hover,
+.header.tester .sidebar .navlink:focus,
+.header.tester .sidebar .navlink.active:focus,
+.header.tester .sidebar .navlink.active:hover {
+  @apply text-navlink-tester-hover-color bg-navlink-tester-hover-bg;
+
+  & .icon {
+    @apply text-navlink-tester-hover-color;
+  }
+}
+
+.sidebar.tester details[open],
+.header.tester .sidebar details[open],
+.header.tester .sidebar .header-dropdown[open] {
+  @apply bg-gray-800;
+}
+
+.sidebar.tester details summary.navlink:hover,
+.sidebar.tester details summary.navlink:focus,
+.header.tester .sidebar details summary.navlink:hover,
+.header.tester .sidebar details summary.navlink:focus,
+.sidebar.tester .sidebar-divider,
+.header.tester .sidebar-divider,
+.header.tester .sidebar .sidebar-divider,
+.header.tester .header .sidebar-divider {
+  @apply bg-gray-800;
+}
+
+.sidebar.tester details .navlink,
+.sidebar.tester details .navlink.active,
+.header.tester .sidebar .navlink,
+.header.tester .sidebar .navlink.active {
+  &:hover, &:focus {
+    @apply text-navlink-tester-active-bg bg-gray-700;
+
+    .icon {
+      @apply text-navlink-tester-active-bg;
+    }
+    &:after {
+      @apply bg-navlink-tester-active-bg;
+    }
+  }
+}
+
+.sidebar.tester .navlink.test-cycle:hover .navlink-info {
+  @apply text-navlink-tester-hover-color;
+}
+
+.sidebar.tester .sidebar-divider,
+.header.tester .sidebar-divider,
+.header.tester .sidebar .sidebar-divider,
+.header.tester .header .sidebar-divider {
+  @apply bg-gray-800;
+}
+
+.sidebar.tester .test-cycle .dropdown-actions .btn,
+.header.tester .sidebar .test-cycle .dropdown-actions .btn {
+  &:hover, &:focus {
+    @apply text-white;
+  }
+}

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

@@ -0,0 +1,119 @@
+
+.form-toggle {
+  @apply relative flex flex-row items-center h-auto;
+}
+
+.toggle-switch {
+  @apply relative inline-block h-btn-sm w-xl mb-0;
+  color: inherit;
+}
+
+.toggle-switch-label {
+  @apply inline-block ml-xs text-base font-normal text-black cursor-pointer;
+}
+
+.toggle-switch input,
+.translation-header-toggle input {
+  @apply hidden w-0 h-0;
+}
+
+.toggle-switch .slider {
+  @apply absolute top-0 left-0 right-0 bottom-0 bg-gray-light transition-transform cursor-pointer;
+  border-radius: 20px;
+}
+
+.toggle-switch .slider:before {
+  @apply absolute bg-white transition-transform ;
+  border-radius: 100%;
+  content: "";
+  height: 26px;
+  width: 26px;
+  left: 2px;
+  bottom: 2px;
+  top: 2px;
+}
+
+.toggle-switch input:checked + .slider {
+  @apply bg-info;
+}
+
+.toggle-switch input:focus + .slider {
+  box-shadow: 0 0 1px #21bef4;
+}
+
+.toggle-switch input:checked + .slider:before {
+  -webkit-transform: translateX(30px);
+  -ms-transform: translateX(30px);
+  transform: translateX(30px);
+}
+
+.toggle-switch.disabled .slider {
+  @apply border border-disabled;
+  background-image: url("/assets/images/pattern-striped-bright.png");
+  background-repeat: repeat;
+  background-color: transparent;
+  cursor: not-allowed;
+
+  &::before {
+    @apply bg-disabled;
+    top: 1px;
+  }
+}
+
+.toggle-switch input:disabled + .slider,
+.toggle-switch input:disabled + label {
+  background-color: transparent;
+}
+
+.toggle-switch input:checked { 
+  &:disabled + .slider:before {
+    -webkit-transform: translateX(29px);
+    -ms-transform: translateX(29px);
+    transform: translateX(29px);
+  }
+}
+
+.toggle-switch.disabled .toggle-switch-label {
+  cursor: not-allowed;
+}
+
+.form-toggle.inverted .toggle-switch .slider:before {
+  @apply bg-dark;
+}
+
+.form-toggle.inverted .toggle-switch .slider {
+  @apply bg-gray-dark;
+}
+
+.form-toggle.inverted .toggle-switch input:checked + .slider {
+  @apply bg-gray;
+}
+
+.form-toggle.inverted .toggle-switch-label {
+  @apply text-white;
+}
+
+.form-toggle.sm .toggle-switch {
+  border-radius: 10px;
+  width: 44px;
+  height: 24px;
+}
+
+.form-toggle.sm .toggle-switch .slider:before {
+  width: 20px;
+  height: 20px;
+}
+
+.form-toggle.sm .toggle-switch input:checked + .slider:before {
+  -webkit-transform: translateX(20px);
+  -ms-transform: translateX(20px);
+  transform: translateX(20px);
+}
+
+.form-toggle.sm {
+  @apply items-center;
+}
+
+.form-toggle .toggle-label {
+  @apply text-label;
+}

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

@@ -0,0 +1,186 @@
+
+/*///// 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;
+  padding-right: 40px !important;
+}
+
+.ts-control input {
+  @apply text-base text-white;
+}
+
+.ts-control,
+.full .ts-control, 
+.ts-wrapper.single.input-active .ts-control {
+  @apply bg-primary border-0 cursor-pointer;
+  &:hover {
+    @apply bg-link-hover;
+  }
+  &:hover input::placeholder {
+    @apply text-white;
+  }
+}
+
+.ts-control input::placeholder {
+  @apply text-placeholder italic text-base;
+}
+
+.ts-control::before {
+  @apply absolute right-0 top-0 w-btn h-full;
+  content: "";
+}
+
+.ts-control::after {
+  @apply absolute inline-block right-md bg-white;
+  content: "";
+  -webkit-mask-image: url("/assets/images/caret-down.svg");
+  mask-image: url("/assets/images/caret-down.svg");
+  width: 9px;
+  height: 20px;
+  z-index: 1;
+  top: 50%;
+  margin-top: -10px;
+}
+
+.ts-wrapper .ts-control:hover,
+.ts-wrapper.focus .ts-control:hover,
+.ts-control:hover, 
+.form-select.inverted .ts-control:hover, 
+.form-group.inverted .ts-control:hover, 
+.multi-select.inverted .ts-control:hover {
+  @apply bg-link-hover text-white cursor-pointer;
+
+  &::before {
+    @apply bg-link-hover;
+
+  }
+  &::after {
+    @apply bg-white;
+  }
+}
+
+.ts-wrapper.dropdown-active .ts-control {
+  @apply rounded-t rounded-b-none;
+}
+
+.ts-wrapper .ts-dropdown {
+  @apply m-0 bg-petrol-500 text-white border-0 overflow-hidden rounded-b;
+}
+
+.ts-dropdown-content {
+  scrollbar-width: thin;
+}
+
+.ts-dropdown .option {
+  @apply flex items-center w-full py-xs px-sm text-white bg-transparent;
+  &:hover {
+    @apply bg-link-hover;
+  }
+}
+
+.ts-dropdown .option.selected {
+  @apply text-white bg-primary;
+
+  &::before {
+    @apply inline-block w-icon h-icon mr-icon-spacing bg-white;
+    content: "";
+    mask-image: url("/assets/images/check-circle-filled.svg");
+  } 
+}
+
+.ts-dropdown .option.selected:hover {
+  @apply bg-link-hover;
+}
+
+
+/* Multi select item */
+
+.ts-wrapper.multi .ts-control div.item {
+  @apply relative flex-row flex-grow-0 items-stretch mr-xxs mb-xxs pl-xxs pr-0 text-sm text-black bg-white rounded;
+  line-height: 25px;
+
+  a {
+    @apply flex justify-center items-center text-primary rounded-r;
+    margin-top: -2px;
+    margin-bottom: -2px;
+  }
+
+  a::after {
+    @apply inline-block w-xs h-xs bg-primary;
+    content: "";
+    mask-image: url("/assets/images/cross-thick.svg");
+  }
+
+  a:hover {
+    @apply bg-danger;
+  }
+
+  a:hover::after {
+    @apply bg-white;
+  }
+}
+
+.ts-wrapper.multi .ts-control {
+  padding-right: 40px !important;
+}
+
+.ts-wrapper.multi .ts-control div.item.active {
+  @apply bg-link-hover;
+}
+
+
+.ts-wrapper .optgroup-header {
+  @apply pt-xs px-sm pb-xxs text-sm text-gray-light bg-transparent;
+}
+
+
+/*///// Validation errors /////*/
+
+.field_with_errors .ts-control,
+.field_with_errors .ts-wrapper.focus .ts-control,
+.form-select.inverted .field_with_errors .ts-control,
+.form-group.inverted .field_with_errors .ts-control {
+  @apply bg-danger;
+}
+
+.field_with_errors .ts-wrapper .ts-dropdown,
+.form-select.inverted .field_with_errors .ts-wrapper .ts-dropdown, 
+.form-group.inverted .field_with_errors .ts-wrapper .ts-dropdown {
+  @apply border-danger;
+}
+
+.field_with_errors .ts-control::before,
+.form-select.inverted .field_with_errors .ts-control::before,
+.form-group.inverted .field_with_errors .ts-control::before {
+  @apply text-white bg-danger cursor-pointer;
+  content: "";
+}
+
+.field_with_errors .form-label,
+.form-select.inverted .field_with_errors .form-label,
+.form-group.inverted .field_with_errors .form-label {
+  @apply text-danger;
+}
+
+
+/*///// Disabled /////*/
+
+.ts-wrapper.disabled .ts-control,
+.ts-wrapper.locked .ts-control {
+  @apply text-disabled-dark border border-disabled cursor-not-allowed bg-transparent;
+  background-image: url("/assets/images/pattern-striped-bright.png");
+  background-repeat: repeat;
+  &:hover{
+    @apply text-disabled;
+  }
+  &::before {
+    @apply bg-transparent;
+  }
+  &::after {
+    @apply bg-disabled-dark;
+  }
+  & input::placeholder {
+    @apply text-disabled-dark;
+  }
+}