testio-tailwind 0.1.0

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

@@ -0,0 +1,252 @@
+
+select.select2 {
+  display: none !important;
+}
+
+.select2-container {
+  width: 100% !important;
+}
+
+.select2-results__option .select2-results__option--group {
+  padding: 0;
+  overflow: visible;
+}
+
+.select2-results__options .select2-results__options--nested {
+  @apply w-full m-0 p-0 overflow-hidden;
+}
+
+.select2-selection--single {
+  @apply min-h-btn h-auto;
+}
+
+.select2-container .select2-selection--single .select2-selection__rendered {
+  @apply py-xs pl-sm pr-lg;
+}
+
+.select2-container .select2-selection {
+  @apply p-0;
+}
+
+.select2-container {
+
+  .select2-selection,
+  .select2-dropdown,
+  .select2-search__field {
+    @apply rounded border overflow-hidden;
+  }
+
+  .select2-selection__arrow {
+    @apply absolute flex justify-center items-center h-full w-btn right-0 top-0 rounded-r;
+
+    b {
+      @apply absolute inline-block h-md top-xs right-sm bg-white;
+      content: "";
+      mask-image: url("/assets/images/caret-down.svg");
+      width: 9px;
+    }
+  }
+
+  .select2-search--dropdown {
+    @apply py-xs px-sm;
+  }
+
+  .select2-search__field {
+    @apply h-btn-sm pl-xs outline-none;
+  }
+
+  .select2-results__options {
+    max-height: 200px;
+    overflow-y: auto;
+  }
+
+  li {
+    margin-bottom: 0;
+  }
+
+  /*/ Dropdown open */
+
+  &.select2-container--open {
+
+    .select2-selection {
+      @apply border-link-hover;
+    }
+
+    &.select2-container--below .select2-selection {
+      @apply rounded-b-none rounded-t border-link-hover;
+    }
+
+    .select2-selection__arrow b {
+      background-image: url("/assets/images/pattern-striped-bright.png");
+      mask-repeat: no-repeat;
+    }
+  }
+}
+
+.select2-container .select2-dropdown {
+  @apply border-0;
+}
+
+.select2-dropdown.select2-dropdown--below {
+  @apply rounded-t-none;
+}
+
+.select2-container {
+
+  .select2-selection,
+  .select2-search__field {
+    @apply bg-primary border-primary text-white;
+  }
+
+  .select2-dropdown {
+    @apply bg-primary border-link-hover text-white;
+  }
+
+  .select2-selection__arrow {
+    @apply border-white;
+
+    b {
+      @apply text-white;
+    }
+  }
+
+  .select2-search__field {
+    @apply bg-petrol-dark;
+  }
+
+  .select2-results__option--highlighted {
+    @apply bg-link-hover text-white;
+  }
+
+  &.select2-container--open {
+
+    &.select2-container--below .select2-selection {
+      @apply border-primary;
+    }
+
+    &.select2-container--above .select2-selection {
+      @apply border-primary;
+    }
+
+    .select2-dropdown--below {
+      @apply border-t border-white;
+    }
+
+    .select2-dropdown--above {
+      @apply border-b border-white;
+    }
+  }
+}
+
+.select2-results__option {
+  @apply py-xs px-sm;
+}
+
+
+/*///// Multi select /////*/
+
+
+.select2-selection.select2-selection--multiple {
+  @apply min-h-btn p-xs;
+}
+
+.select2-container .select2-search--inline .select2-search__field {
+  @apply bg-transparent m-0 p-xxs;
+}
+
+.select2-search.select2-search--inline {
+  @apply relative;
+}
+
+.select2-container .select2-selection--multiple .select2-selection__rendered {
+  @apply flex flex-row flex-wrap;
+}
+
+.select2-container .select2-search--inline .select2-search__field {
+  @apply bg-petrol-dark text-white px-xs;
+  width: 100% !important;
+}
+
+
+/*/ multi select items */
+
+.select2-container--testio li.select2-selection__choice {
+  @apply relative inline-flex flex-row-reverse flex-grow-0 items-stretch mr-xxs mb-xxs pl-xxs pr-0 text-sm text-black bg-white rounded;
+}
+
+.select2-selection__choice__display {
+  @apply p-xxs;
+}
+
+.select2-selection__choice__remove {
+  @apply flex justify-center items-center w-btn-xs text-primary rounded-r bg-transparent border-0;
+  margin-top: -2px;
+  margin-bottom: -2px;
+  font-size: 0;
+  &::after {
+    @apply bg-primary;
+    content: "";
+    display: inline-block;
+    mask-image: url("/assets/images/cross-thick.svg");
+    width: 10px;
+    height: 10px;
+  }
+  &:hover {
+    @apply bg-danger;
+  }
+
+  &:hover::after {
+    @apply bg-white;
+  }
+}
+
+
+/*///// Optgroups /////*/
+
+.select2-results__group {
+  @apply py-xs px-sm;
+}
+
+.select2-results__option.select2-results__option--group {
+  padding: 0;
+}
+
+.select2-results__options.select2-results__options--nested {
+  overflow: visible;
+}
+
+
+/*///// Disabled /////*/
+
+.select2-container--disabled .select2-selection {
+  @apply border border-bordercolor text-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;
+  }
+  & input::placeholder {
+    @apply text-disabled;
+  }
+  .select2-selection__arrow {
+    @apply border-bordercolor;
+  }
+}
+
+.select2-container--disabled .select2-selection__arrow b {
+  @apply bg-disabled;
+}
+
+.multi-select-inputs {
+  @apply flex;
+}
+
+.multi-select-inputs .select2-container {
+  @apply m-xs mr-0;
+}

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

@@ -0,0 +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;
+  }
+}