@tsed/tailwind-formio 3.0.0-alpha.8 → 3.0.0-rc.1

package/styles/animations.css

@@ -0,0 +1,341 @@
+@-webkit-keyframes spin {
+  0% {
+    -webkit-transform: rotate(0);
+    transform: rotate(0);
+  }
+  100% {
+    -webkit-transform: rotate(359deg);
+    transform: rotate(359deg);
+  }
+}
+
+@keyframes spin {
+  0% {
+    -webkit-transform: rotate(0);
+    transform: rotate(0);
+  }
+  100% {
+    -webkit-transform: rotate(359deg);
+    transform: rotate(359deg);
+  }
+}
+
+@-webkit-keyframes burst {
+  0% {
+    -webkit-transform: scale(1);
+    transform: scale(1);
+
+    opacity: 1;
+  }
+  90% {
+    -webkit-transform: scale(1.5);
+    transform: scale(1.5);
+
+    opacity: 0;
+  }
+}
+
+@keyframes burst {
+  0% {
+    -webkit-transform: scale(1);
+    transform: scale(1);
+
+    opacity: 1;
+  }
+  90% {
+    -webkit-transform: scale(1.5);
+    transform: scale(1.5);
+
+    opacity: 0;
+  }
+}
+
+@-webkit-keyframes flashing {
+  0% {
+    opacity: 1;
+  }
+  45% {
+    opacity: 0;
+  }
+  90% {
+    opacity: 1;
+  }
+}
+
+@keyframes flashing {
+  0% {
+    opacity: 1;
+  }
+  45% {
+    opacity: 0;
+  }
+  90% {
+    opacity: 1;
+  }
+}
+
+@-webkit-keyframes fade-left {
+  0% {
+    -webkit-transform: translateX(0);
+    transform: translateX(0);
+
+    opacity: 1;
+  }
+  75% {
+    -webkit-transform: translateX(-20px);
+    transform: translateX(-20px);
+
+    opacity: 0;
+  }
+}
+
+@keyframes fade-left {
+  0% {
+    -webkit-transform: translateX(0);
+    transform: translateX(0);
+
+    opacity: 1;
+  }
+  75% {
+    -webkit-transform: translateX(-20px);
+    transform: translateX(-20px);
+
+    opacity: 0;
+  }
+}
+
+@-webkit-keyframes fade-right {
+  0% {
+    -webkit-transform: translateX(0);
+    transform: translateX(0);
+
+    opacity: 1;
+  }
+  75% {
+    -webkit-transform: translateX(20px);
+    transform: translateX(20px);
+
+    opacity: 0;
+  }
+}
+
+@keyframes fade-right {
+  0% {
+    -webkit-transform: translateX(0);
+    transform: translateX(0);
+
+    opacity: 1;
+  }
+  75% {
+    -webkit-transform: translateX(20px);
+    transform: translateX(20px);
+
+    opacity: 0;
+  }
+}
+
+@-webkit-keyframes fade-up {
+  0% {
+    -webkit-transform: translateY(0);
+    transform: translateY(0);
+
+    opacity: 1;
+  }
+  75% {
+    -webkit-transform: translateY(-20px);
+    transform: translateY(-20px);
+
+    opacity: 0;
+  }
+}
+
+@keyframes fade-up {
+  0% {
+    -webkit-transform: translateY(0);
+    transform: translateY(0);
+
+    opacity: 1;
+  }
+  75% {
+    -webkit-transform: translateY(-20px);
+    transform: translateY(-20px);
+
+    opacity: 0;
+  }
+}
+
+@-webkit-keyframes fade-down {
+  0% {
+    -webkit-transform: translateY(0);
+    transform: translateY(0);
+
+    opacity: 1;
+  }
+  75% {
+    -webkit-transform: translateY(20px);
+    transform: translateY(20px);
+
+    opacity: 0;
+  }
+}
+
+@keyframes fade-down {
+  0% {
+    -webkit-transform: translateY(0);
+    transform: translateY(0);
+
+    opacity: 1;
+  }
+  75% {
+    -webkit-transform: translateY(20px);
+    transform: translateY(20px);
+
+    opacity: 0;
+  }
+}
+
+@-webkit-keyframes tada {
+  from {
+    -webkit-transform: scale3d(1, 1, 1);
+    transform: scale3d(1, 1, 1);
+  }
+
+  10%,
+  20% {
+    -webkit-transform: scale3d(.95, .95, .95) rotate3d(0, 0, 1, -10deg);
+    transform: scale3d(.95, .95, .95) rotate3d(0, 0, 1, -10deg);
+  }
+
+  30%,
+  50%,
+  70%,
+  90% {
+    -webkit-transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 10deg);
+    transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 10deg);
+  }
+
+  40%,
+  60%,
+  80% {
+    -webkit-transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, -10deg);
+    transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, -10deg);
+  }
+
+  to {
+    -webkit-transform: scale3d(1, 1, 1);
+    transform: scale3d(1, 1, 1);
+  }
+}
+
+@keyframes tada {
+  from {
+    -webkit-transform: scale3d(1, 1, 1);
+    transform: scale3d(1, 1, 1);
+  }
+
+  10%,
+  20% {
+    -webkit-transform: scale3d(.95, .95, .95) rotate3d(0, 0, 1, -10deg);
+    transform: scale3d(.95, .95, .95) rotate3d(0, 0, 1, -10deg);
+  }
+
+  30%,
+  50%,
+  70%,
+  90% {
+    -webkit-transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 10deg);
+    transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 10deg);
+  }
+
+  40%,
+  60%,
+  80% {
+    -webkit-transform: rotate3d(0, 0, 1, -10deg);
+    transform: rotate3d(0, 0, 1, -10deg);
+  }
+
+  to {
+    -webkit-transform: scale3d(1, 1, 1);
+    transform: scale3d(1, 1, 1);
+  }
+}
+
+.animate-spin {
+  -webkit-animation: spin 2s linear infinite;
+  animation: spin 2s linear infinite;
+}
+
+.animate-spin-hover:hover {
+  -webkit-animation: spin 2s linear infinite;
+  animation: spin 2s linear infinite;
+}
+
+.animate-tada {
+  -webkit-animation: tada 1.5s ease infinite;
+  animation: tada 1.5s ease infinite;
+}
+
+.animate-tada-hover:hover {
+  -webkit-animation: tada 1.5s ease infinite;
+  animation: tada 1.5s ease infinite;
+}
+
+.animate-flashing {
+  -webkit-animation: flashing 1.5s infinite linear;
+  animation: flashing 1.5s infinite linear;
+}
+
+.animate-flashing-hover:hover {
+  -webkit-animation: flashing 1.5s infinite linear;
+  animation: flashing 1.5s infinite linear;
+}
+
+.animate-burst {
+  -webkit-animation: burst 1.5s infinite linear;
+  animation: burst 1.5s infinite linear;
+}
+
+.animate-burst-hover:hover {
+  -webkit-animation: burst 1.5s infinite linear;
+  animation: burst 1.5s infinite linear;
+}
+
+.animate-fade-up {
+  -webkit-animation: fade-up 1.5s infinite linear;
+  animation: fade-up 1.5s infinite linear;
+}
+
+.animate-fade-up-hover:hover {
+  -webkit-animation: fade-up 1.5s infinite linear;
+  animation: fade-up 1.5s infinite linear;
+}
+
+.animate-fade-down {
+  -webkit-animation: fade-down 1.5s infinite linear;
+  animation: fade-down 1.5s infinite linear;
+}
+
+.animate-fade-down-hover:hover {
+  -webkit-animation: fade-down 1.5s infinite linear;
+  animation: fade-down 1.5s infinite linear;
+}
+
+.animate-fade-left {
+  -webkit-animation: fade-left 1.5s infinite linear;
+  animation: fade-left 1.5s infinite linear;
+}
+
+.animate-fade-left-hover:hover {
+  -webkit-animation: fade-left 1.5s infinite linear;
+  animation: fade-left 1.5s infinite linear;
+}
+
+.animate-fade-right {
+  -webkit-animation: fade-right 1.5s infinite linear;
+  animation: fade-right 1.5s infinite linear;
+}
+
+.animate-fade-right-hover:hover {
+  -webkit-animation: fade-right 1.5s infinite linear;
+  animation: fade-right 1.5s infinite linear;
+}

package/styles/badge.css

@@ -4,7 +4,7 @@ Requires one of the contextual, color modifier classes for `color` and
  */
 
 .badge {
-  @apply inline-flex  py-px px-1.5 font-bold text-center whitespace-nowrap items-center rounded transition-colors;
+  @apply inline-flex px-1.5 font-bold text-center whitespace-nowrap items-center rounded transition-colors;
   font-size: 75%;
 
   &:empty {
@@ -17,8 +17,8 @@ Requires one of the contextual, color modifier classes for `color` and
 }
 
 a .badge {
-  &:hover, &:focus {
-    @apply no-underline
+  &:hover, &:focus, &:active {
+    @apply no-underline text-white;
   }
 }
 
@@ -46,7 +46,7 @@ a .badge.bg-primary, .badge-hover.bg-primary {
 
 a .badge.bg-secondary, .badge-hover.bg-secondary {
   &:hover, &:focus {
-    @apply hover:text-white hover:bg-secondary-800 focus:bg-secondary-800 hover:border-secondary-800 focus:border-secondary-800 focus:text-secondary-800;
+    @apply hover:text-white hover:bg-secondary-800 focus:bg-secondary-800 hover:border-secondary-800 focus:border-secondary-800;
   }
 }
 

package/styles/choices.css

@@ -26,15 +26,6 @@
     line-height: inherit;
   }
 
-  &__small {
-    .choices__inner {
-      @apply px-2;
-      padding-top: 2px;
-      min-height: 0;
-      font-size: 14px;
-    }
-  }
-
   &__input {
     @apply bg-white;
   }
@@ -91,10 +82,6 @@
       @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;
     }
@@ -182,6 +169,7 @@
       @apply pb-0;
     }
   }
+
   .choices__list--multiple .choices__item {
     @apply rounded-md bg-primary border-0 text-xs py-1 px-2;
     font-weight: 600;
@@ -189,7 +177,6 @@
 }
 
 
-
 .is-open .choices__inner, .is-flipped.is-open .choices__inner {
   @apply rounded-md;
 }
@@ -298,16 +285,6 @@
 }
 
 @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;
@@ -338,7 +315,6 @@
   }
 }
 
-
 .choices__heading {
   @apply font-semibold p-2.5 border-solid border-gray-200 text-gray-600;
   font-size: inherit;
@@ -365,3 +341,34 @@
 .choices__placeholder {
   @apply opacity-50;
 }
+
+/**
+ * Choices Size rendering
+ */
+.form-group.-size-small {
+  .choices {
+    .choices__inner {
+      @apply px-2;
+      padding-top: 3px;
+      min-height: 32px;
+      font-size: 14px;
+    }
+
+    &[data-type*=select-one] .choices__inner {
+      padding-bottom: 1px;
+    }
+
+    .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{
+      margin: 0 -2px 0 6px;
+    }
+  }
+}

package/styles/form.css

@@ -23,14 +23,19 @@
   @apply mb-5;
 }
 
+
 .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-small {
+.form-group.-size-small {
+  .form-control {
     @apply px-2 py-1 text-sm;
+    min-height: 32px;
   }
 }
 
+
 .form-control:disabled, .form-control[readonly] {
   @apply bg-gray-200 border-transparent shadow-none;
 }
@@ -148,7 +153,7 @@ textarea.form-control {
 }
 
 .field-required:after {
-  @apply z-1 ml-1;
+  @apply z-0 ml-1;
 }
 
 .formio-component hr,

package/styles/icon.css

@@ -0,0 +1,33 @@
+.wrapper-icon {
+  line-height: 1;
+  display: inline-block;
+}
+
+[class^="icon-"], [class*=" icon-"] {
+  font-weight: normal;
+  font-style: normal;
+  font-variant: normal;
+  line-height: 1;
+  display: inline-block;
+  text-transform: none;
+  speak: none;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.bx-question-mark[ref="tooltip"],
+.icon-circle-question-mark[ref="tooltip"] {
+  @apply rounded-full ml-2 text-xs relative;
+  top: 1px;
+  width: 14px;
+  height: 14px;
+  line-height: 14px;
+  text-align: center;
+}
+.icon-circle-question-mark[ref="tooltip"] {
+  @apply text-gray-400;
+
+}
+.bx-question-mark[ref="tooltip"]{
+  @apply bg-gray-400;
+}

package/styles/index.css

@@ -19,3 +19,4 @@
 @import "grid.css";
 @import "tabs.css";
 @import "fieldset.css";
+@import "icon.css";

package/styles/react-select.css

@@ -4,7 +4,7 @@
   flex: 1;
 
   .react-select__control {
-    @apply appearance-none bg-white leading-normal w-full rounded-md border-1 border-gray-300 shadow-sm;
+    @apply appearance-none bg-white leading-normal w-full rounded-md border-1 border-gray-300;
 
     &--is-focused {
       @apply outline-none border-primary-300 ring ring-primary-50 ring-opacity-50;
@@ -23,7 +23,8 @@
     }
 
     &__remove {
-      @apply  opacity-80;
+      @apply opacity-80;
+
       &:hover {
         @apply bg-transparent text-white opacity-100;
       }
@@ -35,7 +36,70 @@
   }
 }
 
-.input-group-prepend + .react-select-container .react-select__control {
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
+.form-group.-with-before {
+  .react-select-container .react-select__control {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+}
+
+.form-group.-with-after {
+  .react-select-container .react-select__control {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+}
+
+/**
+ * React Select size rendering
+ */
+.form-group.-size-small {
+  .react-select-container {
+    .react-select__control {
+      min-height: 28px;
+    }
+
+    .react-select__value-container {
+      padding-top: 0;
+      padding-bottom: 0;
+    }
+
+    .react-select__indicator {
+      padding: 3px;
+    }
+
+    .react-select__multi-value {
+      &__label {
+        @apply text-white text-xs py-0.5 px-1;
+        font-weight: 600;
+      }
+
+      &__remove {
+        @apply opacity-80;
+
+        &:hover {
+          @apply bg-transparent text-white opacity-100;
+        }
+      }
+    }
+
+    .react-select__input-container {
+      margin-top: 1px;
+      margin-bottom: 1px;
+    }
+
+    .react-select__placeholder {
+      @apply text-gray-500;
+    }
+
+    .react-select__option,
+    .react-select__placeholder,
+    .react-select__single-value {
+      @apply text-sm;
+    }
+
+    .react-select__value-container.react-select__value-container--is-multi {
+      @apply px-1 py-0;
+    }
+  }
 }