@tsed/tailwind-formio 3.0.0 → 3.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tsed/tailwind-formio",
-  "version": "3.0.0",
+  "version": "3.0.2",
   "description": "Tailwind templates for form.io forms.",
   "type": "module",
   "main": "dist/index.js",

package/styles/choices.css

@@ -24,9 +24,11 @@
     overflow: visible;
   }
 
-  &__inner {
-    @apply appearance-none bg-white leading-normal px-3 py-2 pb-0 block w-full rounded-md border-1 border-gray-300 shadow-sm;
-    min-height: 42px;
+  .form-control.ui,
+  .choices__inner {
+    @apply shadow-none;
+    @apply appearance-none bg-white leading-normal pb-0 block w-full rounded-md border-1 border-gray-300;
+    min-height: 38px;
     font-size: inherit;
     line-height: inherit;
   }
@@ -59,6 +61,7 @@
   }
 
   &.is-disabled {
+    .form-control.ui,
     .choices__inner,
     .choices__input {
       @apply bg-gray-300 opacity-100 cursor-not-allowed;
@@ -80,14 +83,17 @@
   }
 
   &[data-type*=select-one] {
-    @apply cursor-pointer;
-  }
-
-  &[data-type*=select-one] {
-    position: relative;
+    @apply cursor-pointer relative;
 
+    .form-control.ui,
     .choices__inner {
-      @apply pb-2;
+      @apply flex items-center;
+      padding: 0;
+
+      .choices__list {
+        @apply block;
+        padding: 0 16px 0 8px;
+      }
     }
 
     .choices__input {
@@ -164,6 +170,23 @@
   }
 
   &[data-type=select-multiple] {
+    .form-control.ui,
+    .choices__inner {
+      @apply flex gap-1 flex-wrap;
+      padding-top: 6px;
+
+      .choices__item {
+        @apply rounded-md bg-primary border-0 text-xs py-1 px-2;
+        font-weight: 600;
+      }
+
+      > .choices__input {
+        margin: 0;
+        padding: 0;
+        height: 24px;
+      }
+    }
+
     &:after {
       @apply h-0 w-0 border-solid absolute border-0 h-full top-0 m-0 right-1.5;
       background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
@@ -178,11 +201,6 @@
       @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 {
@@ -386,27 +404,30 @@
  */
 .form-group.-size-small {
   .choices {
+
+    .form-control.ui,
     .choices__inner {
-      @apply px-2;
-      padding-top: 3px;
       min-height: 32px;
       font-size: 14px;
     }
 
-    &[data-type*=select-one] .choices__inner {
-      padding-bottom: 1px;
+    &[data-type*=select-multiple] .choices__inner {
+      padding-top: 3px;
     }
 
-    .choices__list--multiple .choices__item {
-      @apply py-0.5 px-1 text-xs;
-      margin-bottom: 3px;
+    .choices__list--multiple {
+      .choices__item {
+        @apply py-0.5 px-1 text-xs;
+        margin-bottom: 3px;
+      }
     }
 
     .choices__input {
       margin-bottom: 1px;
     }
+
     &[data-type*=select-multiple] .choices__button,
-    &[data-type*=text] .choices__button{
+    &[data-type*=text] .choices__button {
       margin: 0 -2px 0 6px;
     }
   }

package/styles/form.css

@@ -23,6 +23,12 @@
   @apply mb-5;
 }
 
+input.form-control,
+select.form-control {
+  min-height: 38px;
+  padding-top: 3px;
+  padding-bottom: 3px;
+}
 
 .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;
@@ -32,6 +38,7 @@
   .form-control {
     @apply px-2 py-1 text-sm;
     min-height: 32px;
+    height: 32px;
   }
 }
 

package/styles/input-group.css

@@ -2,9 +2,6 @@
   @apply flex relative flex-wrap items-stretch w-full shadow-sm rounded;
   > .choices {
     @apply flex-1 mb-0;
-    .choices__inner {
-      @apply shadow-none;
-    }
   }
 }
 
@@ -12,8 +9,7 @@
 .input-group > .form-control-plaintext,
 .input-group > .custom-select,
 .input-group > .custom-file {
-  @apply relative flex-auto mb-0 mt-0 shadow-none;
-  width: 1%;
+  @apply relative mb-0 mt-0 shadow-none;
 
   + .form-control,
   + .custom-select,
@@ -104,45 +100,6 @@
   }
 }
 
-/*.input-group-lg > .form-control:not(textarea),
-.input-group-lg > .custom-select {
-  height: $input-height-lg;
-}*/
-
-/*.input-group-lg > .form-control,
-.input-group-lg > .custom-select,
-.input-group-lg > .input-group-prepend > .input-group-text,
-.input-group-lg > .input-group-append > .input-group-text,
-.input-group-lg > .input-group-prepend > .btn,
-.input-group-lg > .input-group-append > .btn {
-  padding: $input-padding-y-lg $input-padding-x-lg;
-  @include font-size($input-font-size-lg);
-  line-height: $input-line-height-lg;
-  @include border-radius($input-border-radius-lg);
-}
-
-.input-group-sm > .form-control:not(textarea),
-.input-group-sm > .custom-select {
-  height: $input-height-sm;
-}
-
-.input-group-sm > .form-control,
-.input-group-sm > .custom-select,
-.input-group-sm > .input-group-prepend > .input-group-text,
-.input-group-sm > .input-group-append > .input-group-text,
-.input-group-sm > .input-group-prepend > .btn,
-.input-group-sm > .input-group-append > .btn {
-  padding: $input-padding-y-sm $input-padding-x-sm;
-  @include font-size($input-font-size-sm);
-  line-height: $input-line-height-sm;
-  @include border-radius($input-border-radius-sm);
-}
-
-.input-group-lg > .custom-select,
-.input-group-sm > .custom-select {
-  padding-right: $custom-select-padding-x + $custom-select-indicator-padding;
-}*/
-
 .input-group > .input-group-prepend > .btn,
 .input-group > .input-group-prepend > .input-group-text,
 .input-group > .input-group-append:not(:last-child) > .btn,