testio-tailwind 0.1.0 → 0.2.1

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

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

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