@tsed/tailwind-formio 3.0.0-alpha.7 → 3.0.0-alpha.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tsed/tailwind-formio",
-  "version": "3.0.0-alpha.7",
+  "version": "3.0.0-alpha.8",
   "description": "Tailwind templates for form.io forms.",
   "type": "module",
   "main": "dist/index.js",
@@ -52,11 +52,11 @@
   },
   "dependencies": {},
   "peerDependencies": {},
-  "repository": "https://github.com/TypedProject/tsed-formio",
+  "repository": "https://github.com/tsedio/tsed-formio",
   "bugs": {
-    "url": "https://github.com/TypedProject/tsed-formio/issues"
+    "url": "https://github.com/tsedio/tsed-formio/issues"
   },
-  "homepage": "https://github.com/TypedProject/tsed-formio/tree/master/packages/tailwind-formio",
+  "homepage": "https://github.com/tsedio/tsed-formio/tree/master/packages/tailwind-formio",
   "author": "Romain Lenzotti",
   "publishConfig": {
     "tag": "alpha"

package/styles/choices.css

@@ -26,6 +26,15 @@
     line-height: inherit;
   }
 
+  &__small {
+    .choices__inner {
+      @apply px-2;
+      padding-top: 2px;
+      min-height: 0;
+      font-size: 14px;
+    }
+  }
+
   &__input {
     @apply bg-white;
   }
@@ -82,6 +91,10 @@
       @apply pb-2;
     }
 
+    &.choices__small .choices__inner {
+      padding-bottom: 1px;
+    }
+
     .choices__input {
       @apply block w-full p-2.5 border-b-1 border-solid border-gray-300 bg-white m-0;
     }
@@ -153,6 +166,7 @@
       }
     }
   }
+
   &[data-type=select-multiple] {
     &:after {
       @apply h-0 w-0 border-solid absolute border-0 h-full top-0 m-0 right-1.5;
@@ -168,14 +182,16 @@
       @apply pb-0;
     }
   }
+  .choices__list--multiple .choices__item {
+    @apply rounded-md bg-primary border-0 text-xs py-1 px-2;
+    font-weight: 600;
+  }
 }
 
-.choices__list--multiple .choices__item {
-  @apply rounded-sm;
-}
 
-.is-open .choices__inner , .is-flipped.is-open .choices__inner {
-  @apply rounded-md rounded-b-none;
+
+.is-open .choices__inner, .is-flipped.is-open .choices__inner {
+  @apply rounded-md;
 }
 
 .choices__list {
@@ -188,7 +204,8 @@
     .choices__item {
       @apply w-full;
     }
-    .choices__item.choices__item--selectable{
+
+    .choices__item.choices__item--selectable {
       margin-bottom: -0.375rem;
     }
   }
@@ -207,6 +224,7 @@
 
       &.is-highlighted {
         @apply bg-secondary-500 border-secondary-600;
+
         .choices__button {
           @apply border-secondary-600;
         }
@@ -214,8 +232,8 @@
     }
   }
 
-  &--dropdown {
-    @apply invisible absolute z-5 w-full bg-white border-1 border-solid border-gray-300 rounded overflow-hidden break-all top-full;
+  &--dropdown[aria-expanded=true] {
+    @apply invisible absolute z-5 w-full bg-white border-1 border-solid border-gray-300 rounded-md overflow-hidden break-all top-full;
     will-change: visibility;
 
     &.is-active {
@@ -280,6 +298,16 @@
 }
 
 @media (min-width: 640px) {
+  .choices__small {
+    .choices__list--dropdown .choices__item--selectable {
+      padding: 5px 10px;
+
+      &:after {
+        display: none;
+      }
+    }
+  }
+
   .choices__list--dropdown {
     .choices__item--selectable {
       padding-right: 100px;

package/styles/form.css

@@ -26,7 +26,7 @@
 .form-control {
   @apply appearance-none bg-white leading-normal px-3 py-2 block w-full rounded-md border-1 border-gray-300 shadow-sm;
 
-  &.form-control-sm {
+  &.form-control-small {
     @apply px-2 py-1 text-sm;
   }
 }

package/styles/index.css

@@ -5,6 +5,7 @@
 @import "card.css";
 @import "form.css";
 @import "choices.css";
+@import "react-select.css";
 @import "input-group.css";
 @import "checkbox.css";
 @import "tooltip.css";

package/styles/react-select.css

@@ -0,0 +1,41 @@
+
+.react-select-container {
+  display: block;
+  flex: 1;
+
+  .react-select__control {
+    @apply appearance-none bg-white leading-normal w-full rounded-md border-1 border-gray-300 shadow-sm;
+
+    &--is-focused {
+      @apply outline-none border-primary-300 ring ring-primary-50 ring-opacity-50;
+      outline-offset: theme('outline.none[1]');
+      box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+      border-color: theme('colors.blue.600');
+    }
+  }
+
+  .react-select__multi-value {
+    @apply bg-primary-600 text-white rounded-md;
+
+    &__label {
+      @apply text-white text-xs py-1 px-2;
+      font-weight: 600;
+    }
+
+    &__remove {
+      @apply  opacity-80;
+      &:hover {
+        @apply bg-transparent text-white opacity-100;
+      }
+    }
+  }
+
+  .react-select__value-container.react-select__value-container--is-multi {
+    @apply px-2 py-1;
+  }
+}
+
+.input-group-prepend + .react-select-container .react-select__control {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}