testio-tailwind 0.2.0 → 0.2.2

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

@@ -1,51 +1,51 @@
-
-.form-select {
-  @apply w-full;
-}
-
-select {
-  @apply appearance-none;
-  background-image: none;
-  background-size: auto;
-}
-
-/*//// Select native ////*/
-
-.form-select-native .select-wrapper {
-  @apply relative;
-}
-
-.form-select-native .select-wrapper::after {
-  @apply absolute inline-block h-md top-xs right-sm bg-white;
-  content: "";
-  mask-image: url("/assets/images/caret-down.svg");
-  width: 9px;
-  z-index: 1;
-}
-
-.form-select-native select {
-  @apply relative flex flex-row w-full justify-start items-stretch min-h-btn py-xs px-sm text-base text-white rounded bg-primary outline-none border-0 cursor-pointer;
-}
-
-.form-select-native .select-wrapper select:disabled {
-  @apply border border-bordercolor text-disabled cursor-not-allowed hover:text-disabled bg-transparent;
-  background-image: url("/assets/images/pattern-striped-bright.png");
-  background-repeat: repeat;
-  &::after {
-    @apply bg-disabled;
-  }
-  & input::placeholder {
-    @apply text-disabled;
-  }
-}
-
-.form-select-native select::placeholder {
-  @apply text-placeholder italic text-base;
-}
-
-.form-select-native option {
-  @apply appearance-none py-xxs;
-  &:hover, &:focus {
-    @apply bg-link-hover;
-  }
+
+.form-select {
+  @apply w-full;
+}
+
+select {
+  @apply appearance-none;
+  background-image: none;
+  background-size: auto;
+}
+
+/*//// Select native ////*/
+
+.form-select-native .select-wrapper {
+  @apply relative;
+}
+
+.form-select-native .select-wrapper::after {
+  @apply absolute inline-block h-md top-xs right-sm bg-white;
+  content: "";
+  mask-image: url("/assets/images/caret-down.svg");
+  width: 9px;
+  z-index: 1;
+}
+
+.form-select-native select {
+  @apply relative flex flex-row w-full justify-start items-stretch min-h-btn py-xs px-sm text-base text-white rounded bg-primary outline-none border-0 cursor-pointer;
+}
+
+.form-select-native .select-wrapper select:disabled {
+  @apply border border-bordercolor text-disabled cursor-not-allowed hover:text-disabled bg-transparent;
+  background-image: url("/assets/images/pattern-striped-bright.png");
+  background-repeat: repeat;
+  &::after {
+    @apply bg-disabled;
+  }
+  & input::placeholder {
+    @apply text-disabled;
+  }
+}
+
+.form-select-native select::placeholder {
+  @apply text-placeholder italic text-base;
+}
+
+.form-select-native option {
+  @apply appearance-none py-xxs;
+  &:hover, &:focus {
+    @apply bg-link-hover;
+  }
 }

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

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