testio-tailwind 0.2.0 → 0.2.1

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

@@ -1,223 +1,223 @@
-
-.selectable-token input {
-  display: none;
-}
-
-.selectable-token label {
-  @apply relative inline-flex items-center justify-start h-btn m-0 py-xs px-md text-primary bg-transparent border border-primary rounded cursor-pointer;
-  line-height: normal;
-  &:hover, &:focus {
-    @apply text-white bg-link-hover border-link-hover;
-
-    & .icon {
-      @apply text-white;
-    }
-  }
-}
-
-.selectable-token.inverted label {
-  @apply text-primary;
-  &:hover, &:focus {
-    @apply text-white;
-  }
-}
-
-.selectable-token.square label {
-  @apply items-center justify-center p-xs w-btn h-btn;
-}
-
-.selectable-token input:checked + label,
-.selectable-token.inverted input:checked + label {
-  @apply text-white border-info bg-info;
-  background-image: none;
-
-  &::after {
-    @apply block absolute bg-white;
-    height: 6px;
-    width: 8px;
-    top: 3px;
-    left: 3px;
-    content: "";
-    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;
-    }
-  }
-}
-
-.selectable-token.success input:checked + label,
-.selectable-token.success.inverted input:checked + label {
-  @apply bg-success border-success;
-}
-
-.selectable-token.danger input:checked + label,
-.selectable-token.danger.inverted input:checked + label {
-  @apply bg-danger border-danger;
-}
-
-
-
-.selectable-token input:checked:disabled + label,
-.selectable-token.disabled input:checked + label,
-.selectable-token.disabled input + label,
-.selectable-token input:disabled + label,
-.selectable-token input.disabled + label,
-.selectable-token input.disabled:checked + label {
-  @apply text-disabled border-disabled bg-transparent cursor-not-allowed;
-  background-image: url("/assets/images/pattern-striped-bright.png");
-  background-repeat: repeat;
-
-  &::after {
-    @apply bg-disabled;
-  }
-  .icon {
-    @apply text-disabled;
-  }
-  &:hover, &:focus {
-    @apply bg-transparent;
-  }
-}
-
-.selectable-token.inverted input:checked:disabled + label,
-.selectable-token.inverted input:disabled + label,
-.selectable-token.inverted.disabled input:checked + label,
-.selectable-token.inverted.disabled input + label,
-.selectable-token.inverted input:disabled + label,
-.selectable-token.inverted input.disabled + label,
-.selectable-token.inverted input.disabled:checked + label {
-  @apply text-disabled-dark border-disabled-dark;
-  background-image: url("/assets/images/pattern-striped-dark.png");
-
-  &::after {
-    @apply bg-disabled-dark;
-  }
-  .icon {
-    @apply text-disabled-dark;
-  }
-  &:hover, &:focus {
-    @apply bg-transparent;
-  }
-}
-
-
-.toggle-btn-group {
-  @apply flex;
-}
-
-.toggle-btn-group .selectable-token label {
-  @apply rounded-none;
-}
-
-.toggle-btn-group .selectable-token:first-child label {
-  @apply rounded-l;
-}
-
-.toggle-btn-group .selectable-token:last-child label {
-  @apply rounded-r;
-}
-
-/*/ Rating scale /*/
-
-.rating-wrapper {
-  @apply flex flex-col min-w-0;
-}
-
-.rating-scale {
-  @apply grid grid-flow-col gap-xs;
-}
-
-.rating-scale .selectable-token {
-  @apply w-full;
-}
-
-.rating-scale .selectable-token label {
-  @apply justify-center w-full;
-}
-
-.rating-labels {
-  @apply flex justify-between mb-xxs text-label text-label-color leading-tight;
-}
-
-.rating-labels .label-max {
-  @apply text-right;
-}
-
-/*////// Token LG /////*/
-
-.selectable-token.lg label,
-.selectable-token.lg input:checked + label {
-  @apply flex-col w-btn-lg h-auto text-label p-0 text-primary bg-transparent;
-  line-height: 1;
-  text-align: center;
-  border: none;
-  border-radius: 0;
-
-  &:hover, &:focus {
-    @apply text-primary bg-transparent;
-
-    & .icon {
-      @apply text-white bg-link-hover border-link-hover;
-    }
-  }
-}
-
-.selectable-token.lg .icon {
-  @apply flex justify-center items-center mb-xxs w-btn-lg h-btn-lg text-icon-lg text-primary border border-primary rounded;
-}
-
-.selectable-token.lg input:checked + label .icon {
-  @apply text-white border-info bg-info;
-  background-image: none;
-}
-
-.selectable-token.lg input:disabled + label,
-.selectable-token.lg input.disabled + label,
-.selectable-token.lg input.disabled:checked + label {
-  @apply text-disabled;
-  background-image: none;
-
-  & .icon {
-    @apply text-disabled border-disabled bg-transparent;
-    background-image: url("/assets/images/pattern-striped-bright.png");
-    background-repeat: repeat;
-  }
-
-  &:hover, &:focus {
-    @apply text-disabled;
-  }
-  &:hover .icon, &:focus .icon {
-    @apply text-disabled border-disabled bg-transparent;
-  }
-}
-
-.selectable-token.inverted.lg input:disabled + label,
-.selectable-token.inverted.lg input.disabled + label,
-.selectable-token.inverted.lg input.disabled:checked {
-  @apply text-disabled-dark;
-  background-image: none;
-
-  & .icon {
-    @apply text-disabled-dark border-disabled-dark bg-transparent;
-    background-image: url("/assets/images/pattern-striped-dark.png");
-    background-repeat: repeat;
-  }
-}
-
-/*///// Token XL /////*/
-
-.selectable-token.xl label {
-  @apply inline-flex flex-col justify-center w-btn-xl h-btn-xl;
-
-  .icon {
-    @apply block text-icon-xl h-icon-xl my-xs;
-  }
-}
+
+.selectable-token input {
+  display: none;
+}
+
+.selectable-token label {
+  @apply relative inline-flex items-center justify-start h-btn m-0 py-xs px-md text-primary bg-transparent border border-primary rounded cursor-pointer;
+  line-height: normal;
+  &:hover, &:focus {
+    @apply text-white bg-link-hover border-link-hover;
+
+    & .icon {
+      @apply text-white;
+    }
+  }
+}
+
+.selectable-token.inverted label {
+  @apply text-primary;
+  &:hover, &:focus {
+    @apply text-white;
+  }
+}
+
+.selectable-token.square label {
+  @apply items-center justify-center p-xs w-btn h-btn;
+}
+
+.selectable-token input:checked + label,
+.selectable-token.inverted input:checked + label {
+  @apply text-white border-info bg-info;
+  background-image: none;
+
+  &::after {
+    @apply block absolute bg-white;
+    height: 6px;
+    width: 8px;
+    top: 3px;
+    left: 3px;
+    content: "";
+    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;
+    }
+  }
+}
+
+.selectable-token.success input:checked + label,
+.selectable-token.success.inverted input:checked + label {
+  @apply bg-success border-success;
+}
+
+.selectable-token.danger input:checked + label,
+.selectable-token.danger.inverted input:checked + label {
+  @apply bg-danger border-danger;
+}
+
+
+
+.selectable-token input:checked:disabled + label,
+.selectable-token.disabled input:checked + label,
+.selectable-token.disabled input + label,
+.selectable-token input:disabled + label,
+.selectable-token input.disabled + label,
+.selectable-token input.disabled:checked + label {
+  @apply text-disabled border-disabled bg-transparent cursor-not-allowed;
+  background-image: url("/assets/images/pattern-striped-bright.png");
+  background-repeat: repeat;
+
+  &::after {
+    @apply bg-disabled;
+  }
+  .icon {
+    @apply text-disabled;
+  }
+  &:hover, &:focus {
+    @apply bg-transparent;
+  }
+}
+
+.selectable-token.inverted input:checked:disabled + label,
+.selectable-token.inverted input:disabled + label,
+.selectable-token.inverted.disabled input:checked + label,
+.selectable-token.inverted.disabled input + label,
+.selectable-token.inverted input:disabled + label,
+.selectable-token.inverted input.disabled + label,
+.selectable-token.inverted input.disabled:checked + label {
+  @apply text-disabled-dark border-disabled-dark;
+  background-image: url("/assets/images/pattern-striped-dark.png");
+
+  &::after {
+    @apply bg-disabled-dark;
+  }
+  .icon {
+    @apply text-disabled-dark;
+  }
+  &:hover, &:focus {
+    @apply bg-transparent;
+  }
+}
+
+
+.toggle-btn-group {
+  @apply flex;
+}
+
+.toggle-btn-group .selectable-token label {
+  @apply rounded-none;
+}
+
+.toggle-btn-group .selectable-token:first-child label {
+  @apply rounded-l;
+}
+
+.toggle-btn-group .selectable-token:last-child label {
+  @apply rounded-r;
+}
+
+/*/ Rating scale /*/
+
+.rating-wrapper {
+  @apply flex flex-col min-w-0;
+}
+
+.rating-scale {
+  @apply grid grid-flow-col gap-xs;
+}
+
+.rating-scale .selectable-token {
+  @apply w-full;
+}
+
+.rating-scale .selectable-token label {
+  @apply justify-center w-full;
+}
+
+.rating-labels {
+  @apply flex justify-between mb-xxs text-label text-label-color leading-tight;
+}
+
+.rating-labels .label-max {
+  @apply text-right;
+}
+
+/*////// Token LG /////*/
+
+.selectable-token.lg label,
+.selectable-token.lg input:checked + label {
+  @apply flex-col w-btn-lg h-auto text-label p-0 text-primary bg-transparent;
+  line-height: 1;
+  text-align: center;
+  border: none;
+  border-radius: 0;
+
+  &:hover, &:focus {
+    @apply text-primary bg-transparent;
+
+    & .icon {
+      @apply text-white bg-link-hover border-link-hover;
+    }
+  }
+}
+
+.selectable-token.lg .icon {
+  @apply flex justify-center items-center mb-xxs w-btn-lg h-btn-lg text-icon-lg text-primary border border-primary rounded;
+}
+
+.selectable-token.lg input:checked + label .icon {
+  @apply text-white border-info bg-info;
+  background-image: none;
+}
+
+.selectable-token.lg input:disabled + label,
+.selectable-token.lg input.disabled + label,
+.selectable-token.lg input.disabled:checked + label {
+  @apply text-disabled;
+  background-image: none;
+
+  & .icon {
+    @apply text-disabled border-disabled bg-transparent;
+    background-image: url("/assets/images/pattern-striped-bright.png");
+    background-repeat: repeat;
+  }
+
+  &:hover, &:focus {
+    @apply text-disabled;
+  }
+  &:hover .icon, &:focus .icon {
+    @apply text-disabled border-disabled bg-transparent;
+  }
+}
+
+.selectable-token.inverted.lg input:disabled + label,
+.selectable-token.inverted.lg input.disabled + label,
+.selectable-token.inverted.lg input.disabled:checked {
+  @apply text-disabled-dark;
+  background-image: none;
+
+  & .icon {
+    @apply text-disabled-dark border-disabled-dark bg-transparent;
+    background-image: url("/assets/images/pattern-striped-dark.png");
+    background-repeat: repeat;
+  }
+}
+
+/*///// Token XL /////*/
+
+.selectable-token.xl label {
+  @apply inline-flex flex-col justify-center w-btn-xl h-btn-xl;
+
+  .icon {
+    @apply block text-icon-xl h-icon-xl my-xs;
+  }
+}