testio-tailwind 0.1.0 → 0.2.1

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

@@ -1,212 +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;
-}
+.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

@@ -1,76 +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;
-    }
-  }
-}
-
+
+/*///////// 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;
+    }
+  }
+}
+