testio-tailwind 0.1.0

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

@@ -0,0 +1,173 @@
+/*///// Checkboxes and Radiobuttons /////*/
+
+.form-check, 
+.form-radio {
+  display: flex;
+  align-items: start;
+  position: relative;
+  padding-left: 0;
+}
+
+.form-radio label, 
+.form-check label  {
+  @apply relative ml-xs font-normal text-black;
+  padding-top: 0.25rem;
+  cursor: pointer;
+  &:hover, &:focus {
+    @apply text-label-color;
+  }
+}
+
+.form-check input {
+  @apply rounded bg-transparent;
+  cursor: pointer;
+  flex-shrink: 0;
+}
+
+.form-check input {
+  @apply h-btn-sm w-btn-sm border border-primary rounded;
+}
+
+.form-check.sm input {
+  @apply w-md h-md;
+}
+
+.form-check.sm input + label {
+  padding-top: 0;
+}
+
+.form-radio input {
+  cursor: pointer;
+  border-radius: 50%;
+  background-color: transparent;
+}
+
+.form-check input[type=checkbox]:checked {
+  @apply text-white border-info bg-info overflow-hidden;
+  background-image: none;
+
+  &::after {
+    @apply block bg-white;
+    height: 100%;
+    width: 100%;
+    content: "";
+    mask-image: url("/assets/images/checkbox-background.svg");
+    mask-repeat: no-repeat;
+  }
+}
+
+.form-check.sm input[type=checkbox]:checked::after {
+  mask-image: url("/assets/images/checkbox-background-sm.svg");
+}
+
+.form-check input[type=checkbox]:checked:disabled,
+.form-check.disabled input[type=checkbox]:checked,
+.form-check.disabled input,
+.form-check input:disabled,
+.form-check input.disabled,
+.form-check input.disabled[type=checkbox]:checked {
+  @apply border-disabled;
+  background-image: url("/assets/images/pattern-striped-bright.png");
+  background-repeat: repeat;
+  background-color: transparent;
+  cursor: not-allowed;
+  background-size: auto;
+
+  &::after {
+    @apply bg-disabled;
+  }
+}
+
+.form-check.inverted input:checked:disabled,
+.form-check.inverted.disabled input:checked,
+.form-check.inverted.disabled input,
+.form-check.inverted input:disabled,
+.form-check.inverted input.disabled,
+.form-check.inverted input.disabled:checked,
+.form-check.inverted.sm input:checked:disabled,
+.form-check.inverted.sm.disabled input:checked,
+.form-check.inverted.sm.disabled input,
+.form-check.inverted.sm input:disabled,
+.form-check.inverted.sm input.disabled,
+.form-check.inverted.sm input.disabled:checked {
+  @apply border-gray-dark;
+  background-image: url("/assets/images/pattern-striped-dark.png");
+
+  &::after {
+    @apply bg-gray-dark;
+  }
+}
+
+.form-check.disabled label,
+.form-check input[type=checkbox]:disabled + label,
+.form-check input[type=checkbox]:checked:disabled + label {
+  @apply text-disabled cursor-not-allowed;
+}
+
+
+.form-check.inverted.disabled label,
+.form-check.inverted input:disabled + label,
+.form-check.inverted input:checked:disabled + label,
+.form-check.inverted.sm.disabled label,
+.form-check.inverted.sm input:disabled + label,
+.form-check.inverted.sm input:checked:disabled + label {
+  @apply text-disabled-dark; 
+}
+
+.form-check.inverted input {
+  @apply border-white;
+}
+
+.form-check.inverted input[type=checkbox]:checked {
+  @apply text-black border-white bg-white;
+  
+  &::after {
+    @apply bg-black;
+  }
+}
+
+
+.form-radio input {
+  @apply w-btn-sm h-btn-sm border border-primary;
+
+  &:disabled {
+    @apply border-disabled;
+    background-image: url("/assets/images/pattern-striped-bright.png");
+    background-repeat: repeat;
+    background-color: transparent;
+    cursor: not-allowed;
+    background-size: auto;
+  }
+}
+
+.form-radio input[type=radio]:checked {
+  @apply border-info bg-info;
+
+  &::after {
+    @apply block h-full w-full bg-white;
+    content: "";
+    mask-image: url("/assets/images/radio-checked-white.svg");
+    mask-repeat: no-repeat;
+    background-image: url("");
+  }
+}
+
+.form-radio.inverted label, 
+.form-check.inverted label  {
+  @apply text-white;
+}
+
+.form-radio.inverted input {
+  @apply border-white;
+
+  &:disabled {
+    @apply border-gray-dark;
+    background-image: url("/assets/images/pattern-striped-dark.png");
+  }
+}
+
+.form-radio.inverted input[type=radio]:checked {
+  @apply text-black border-white bg-white;
+  background-image: url("/assets/images/radio-checked-white.svg");
+}
+

package/src/assets/stylesheets/components/customer/customer_header.css

@@ -0,0 +1,98 @@
+
+/*///////// Customer Header /////////*/
+
+.header.customer {
+  @apply bg-navigation-customer-color;
+}
+.header.customer .navlink.active {
+  @apply text-navigation-customer-color bg-navlink-customer-active-bg;
+}
+
+.header.customer .navlink.active .icon {
+  @apply text-navigation-customer-color;
+}
+
+.header.customer .navlink:hover,
+.header.customer .navlink:focus,
+.header.customer .navlink.active:focus,
+.header.customer .navlink.active:hover,
+.header.customer .dropdown-link:focus,
+.header.customer .header-dropdown .dropdown-link:hover {
+  @apply text-navlink-customer-hover-color bg-navlink-customer-hover-bg;
+
+  & .icon {
+    @apply text-navlink-customer-hover-color;
+  }
+}
+
+.header.customer .header-dropdown summary:hover:after, 
+.header.customer .header-dropdown summary:focus:after {
+  @apply bg-navlink-customer-hover-color;
+}
+
+
+/*///// Customer product dropdown /////*/
+
+.header-dropdown[open] .dropdown-menu.products-dropdown {
+  @apply fixed flex flex-row flex-wrap w-screen max-h-screen left-0 top-header pb-lg rounded-tl-none rounded-tr-none border-t-1 border-gray-darkest;
+}
+
+.header-dropdown .navlink.product {
+  @apply flex-col text-center;
+  max-width: 200px;
+
+  & .icon {
+    @apply flex justify-center items-center h-xxl w-xxl mb-xs mr-0 bg-primary rounded text-white;
+  }
+  & .icon::before {
+    @apply text-icon-lg;
+  }
+  & .icon:first-child {
+    @apply mr-0;
+  }
+}
+
+.header-dropdown .navlink.product img {
+  @apply h-xxl w-xxl mb-xs rounded;
+}
+
+.navlink.product.dashed .icon {
+  @apply bg-transparent border-dashed border-white;
+}
+
+.navlink.product.dashed:hover .icon {
+  @apply border-navlink-customer-hover-color;
+}
+
+.navlink.product.website .icon {
+  @apply bg-color-product-website;
+}
+
+.navlink.product.android .icon {
+  @apply bg-color-product-android;
+}
+
+.navlink.product.apple .icon {
+  @apply bg-color-product-apple;
+}
+
+.navlink.product.gaming .icon {
+  @apply bg-color-product-gaming;
+}
+
+.navlink.product.streaming .icon {
+  @apply bg-color-product-streaming;
+}
+
+.navlink.product.windows .icon {
+  @apply bg-color-product-windows;
+}
+
+.navlink.product.website:hover .icon,
+.navlink.product.android:hover .icon,
+.navlink.product.apple:hover .icon,
+.navlink.product.gaming:hover .icon,
+.navlink.product.streaming:hover .icon,
+.navlink.product.windows:hover .icon {
+  @apply text-white;
+}

package/src/assets/stylesheets/components/customer/customer_productcards.css

@@ -0,0 +1,212 @@
+.grid-productcards {
+  @apply grid gap-grid-gutter;
+  @screen sm {
+    grid-template-columns: 1fr 1fr;
+  }
+  @screen xl {
+    grid-template-columns: 1fr 1fr 1fr;
+  }
+  @screen 3xl {
+    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
+  }
+}
+
+.product-card {
+  @apply text-sm;
+}
+
+.product-card .card-header {
+  @apply flex flex-row pl-0 pt-0 bg-card border-0;
+}
+
+.product-card .card-icon {
+  @apply flex justify-center items-center flex-shrink-0 w-xxl min-h-xxl bg-primary rounded-tl text-white;
+
+  & .icon {
+    @apply text-icon-lg h-icon-lg;
+  }
+}
+
+.product-card.product-website .card-icon {
+  @apply bg-color-product-website;
+}
+
+.product-card.product-ios .card-icon {
+  @apply bg-color-product-apple;
+}
+
+.product-card.product-android .card-icon {
+  @apply bg-color-product-android;
+}
+
+.product-card.product-streaming .card-icon {
+  @apply bg-color-product-streaming;
+}
+
+.product-card.product-gaming .card-icon {
+  @apply bg-color-product-gaming;
+}
+
+.product-card .card-icon,
+.product-card.product-website .card-icon,
+.product-card.product-ios .card-icon,
+.product-card.product-android .card-icon,
+.product-card.product-streaming .card-icon,
+.product-card.product-gaming .card-icon {
+  &:hover, &:focus, &:active {
+    @apply bg-link-hover;
+  }
+}
+
+
+.product-card .card-info {
+  @apply flex flex-col p-sm pr-spacing;
+  line-height: 1;
+}
+
+.product-card .card-title {
+  @apply mb-xxs p-0 text-black overflow-hidden;
+  vertical-align: auto;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+  line-clamp: 3;
+  &:hover, &:focus, &:active {
+    @apply text-link-hover;
+  }
+  & h2, & h3, & h4, & h5 {
+    @apply text-heading-5 mb-0;
+  }
+}
+
+.product-card .badge-producttype {
+  @apply absolute top-xs right-xs text-gray-darker;
+}
+
+.product-card .card-content {
+  @apply relative p-sm bg-card border-t border-white;
+}
+
+.product-card .card-test-item {
+  @apply relative flex mt-xs first:mt-0 flex-shrink-0;
+}
+
+.card-test-item .test-label {
+  @apply ml-xs text-label-color text-label-sm;
+  margin-top: 3px;
+}
+
+.card-test-item .metrics {
+  @apply ml-auto pl-sm;
+}
+
+.card-test-item .progress {
+  @apply absolute appearance-none w-full pl-spacing;
+  height: 2px;
+  bottom: -2px;
+  
+  &::-webkit-progress-bar {
+    @apply bg-gray-light;
+  }
+  &::-webkit-progress-value {
+    @apply bg-success;
+  }
+}
+
+
+/*/ Product sections */
+
+.card-section {
+  @apply relative flex flex-col flex-shrink-0 bg-card border-t border-white;
+}
+
+.card-section:last-child {
+  @apply flex-grow;
+}
+
+.card-section::before {
+  @apply absolute w-full top-0 left-0 bg-info rounded-bl;
+  content: "";
+  width: 2px;
+}
+
+.card-section-header {
+  @apply relative flex flex-row flex-shrink-0 pl-sm w-full;
+}
+
+.card-section-header::before {
+  @apply absolute inline-block w-icon h-icon top-xs left-sm bg-info;
+  content: "";
+  mask-image: url("/assets/images/section.svg");
+  mask-repeat: no-repeat;
+}
+
+.section-info {
+  @apply py-xs pl-spacing;
+}
+
+.card-section-actions {
+  @apply flex ml-auto;
+}
+
+.card-section-actions .btn {
+  @apply h-full w-btn-sm p-0 pt-xs rounded-none justify-center items-start;
+}
+
+.product-card .btn-collapse:hover,
+.product-card .btn-collapse:focus,
+.product-card .btn-collapse:active {
+  &::before {
+    @apply bg-white;
+  }
+}
+
+.product-card .btn-collapse::before {
+  @apply inline-block h-icon bg-primary;
+  content: "";
+  width: 14px;
+  mask-image: url("/assets/images/arrow-down.svg");
+  mask-repeat: no-repeat;
+}
+
+details.card-section[open] .btn-collapse::before {
+  mask-image: url("/assets/images/arrow-up.svg");
+}
+
+details.card-section[open] .card-section-header {
+  margin-bottom: 1px;
+}
+
+.card-section-content {
+  @apply p-sm pt-0;
+}
+
+.card-section.orange::before,
+.card-section.orange .card-section-header::before {
+  @apply bg-orange-500;
+}
+
+.card-section.green::before,
+.card-section.green .card-section-header::before {
+  @apply bg-green-500;
+}
+
+.card-section.yellow::before,
+.card-section.yellow .card-section-header::before {
+  @apply bg-yellow-500;
+}
+
+.card-section.red::before,
+.card-section.red .card-section-header::before {
+  @apply bg-red-200;
+}
+
+.card-section.pink::before,
+.card-section.pink .card-section-header::before {
+  @apply bg-pink-500;
+}
+
+.card-section.purple::before,
+.card-section.purple .card-section-header::before {
+  @apply bg-purple-500;
+}

package/src/assets/stylesheets/components/customer/customer_sidebar.css

@@ -0,0 +1,76 @@
+
+/*///////// Customer Sidebar /////////*/
+ 
+.sidebar.customer,
+.header.customer .sidebar {
+  @apply bg-navigation-customer-color;
+}
+
+.sidebar.customer .navlink,
+.sidebar.customer .navlink .icon,
+.header.customer .sidebar .navlink,
+.header.customer .sidebar .navlink .icon {
+  @apply text-white;
+}
+
+.sidebar.customer summary:after,
+.header.customer summary:after {
+  @apply bg-white;
+}
+
+.sidebar.customer .navlink.active,
+.header.customer .navlink.active {
+  @apply text-navigation-customer-color bg-navlink-customer-active-bg;
+  & .icon {
+    @apply text-navigation-customer-color;
+  }
+}
+
+.sidebar.customer .navlink:hover,
+.sidebar.customer .navlink:focus,
+.sidebar.customer .navlink.active:focus,
+.sidebar.customer .navlink.active:hover,
+.header.customer .sidebar .navlink:hover,
+.header.customer .sidebar .navlink:focus,
+.header.customer .sidebar .navlink.active:focus,
+.header.customer .sidebar .navlink.active:hover {
+  @apply text-navlink-customer-hover-color bg-navlink-customer-hover-bg;
+
+  & .icon {
+    @apply text-navlink-customer-hover-color;
+  }
+}
+
+.sidebar.customer details[open],
+.header.customer .sidebar details[open],
+.header.customer .sidebar .header-dropdown[open] {
+  @apply bg-gray-800;
+}
+
+.sidebar.customer details summary.navlink:hover,
+.sidebar.customer details summary.navlink:focus,
+.header.customer .sidebar details summary.navlink:hover,
+.header.customer .sidebar details summary.navlink:focus,
+.sidebar.customer .sidebar-divider,
+.header.customer .sidebar-divider,
+.header.customer .sidebar .sidebar-divider,
+.header.customer .header .sidebar-divider {
+  @apply bg-gray-800;
+}
+
+.sidebar.customer details .navlink,
+.sidebar.customer details .navlink.active,
+.header.customer .sidebar .navlink,
+.header.customer .sidebar .navlink.active {
+  &:hover, &:focus {
+    @apply text-navlink-customer-active-bg bg-gray-700;
+
+    .icon {
+      @apply text-navlink-customer-active-bg;
+    }
+    &:after {
+      @apply bg-navlink-customer-active-bg;
+    }
+  }
+}
+

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

@@ -0,0 +1,84 @@
+.list-devices {
+  @apply flex flex-wrap;
+}
+
+.list-devices .device,
+.list-devices .device-wrapper {
+  @apply mr-sm mb-xs;
+}
+
+.device {
+  @apply inline-flex flex-wrap;
+  user-select: none;
+}
+
+.device.white {
+  @apply text-white;
+  & .clouddevice-info::before {
+    @apply bg-white;
+  }
+}
+
+.device.outline {
+  @apply p-sm border border-bordercolor rounded;
+}
+
+.device-icon {
+  @apply mr-xs;
+}
+
+.device-info {
+  @apply leading-tight;
+}
+
+.browser-list {
+  @apply flex mt-xxs;
+}
+
+.browser-list li {
+  @apply mr-xxs;
+}
+
+.clouddevice-info {
+  @apply flex items-center w-full flex-shrink-0 mt-xxs text-label;
+}
+
+.clouddevice-info::before {
+  @apply inline-block bg-black h-icon mr-icon-spacing;
+  content: "";
+  mask-image: url("/assets/images/logo-mobile-cloud.svg");
+  mask-repeat: no-repeat;
+  width: 27px;
+} 
+
+/*/ Device with actions /*/
+
+.device-wrapper {
+  @apply flex;
+}
+
+.device-wrapper .device {
+  @apply p-sm m-0 text-white border-0 rounded-l bg-primary;
+  & .clouddevice-info::before {
+    @apply bg-white;
+  }
+}
+
+.device-wrapper .device-actions {
+  @apply flex flex-col flex-shrink-0 w-spacing ml-1px text-white bg-primary rounded-r;
+
+}
+
+.device-wrapper .device-actions a {
+  @apply flex items-center justify-center flex-1 min-h-spacing text-white border-t-1 border-white;
+
+  &:hover {
+    @apply bg-link-hover;
+  }
+  &:first-child {
+    @apply border-t-0 rounded-r;
+  }
+  &:last-child {
+    @apply rounded-r;
+  }
+}