@tsed/tailwind-formio 3.0.0-alpha.9 → 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

@@ -350,7 +350,7 @@
     .choices__inner {
       @apply px-2;
       padding-top: 3px;
-      min-height: 0;
+      min-height: 32px;
       font-size: 14px;
     }
 

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;
@@ -58,9 +58,16 @@
     .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;
@@ -77,9 +84,16 @@
     }
 
     .react-select__input-container {
-      margin-top:1px;
+      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;
     }

package/styles/tables.css

@@ -5,7 +5,7 @@
 
   th,
   td {
-    @apply p-3 align-top text-left border-t-1 border-solid border-gray-300;
+    @apply p-3 align-top text-left border-t-1 border-solid border-gray-300 dark:border-gray-700;
 
     &.align-middle {
       vertical-align: middle;
@@ -17,23 +17,30 @@
   }
 
   thead th {
-    @apply border-b-2 border-solid border-gray-300;
+    @apply border-b-2 border-solid border-gray-300 dark:border-gray-700;
     border-style: solid;
   }
 
   tbody + tbody {
-    @apply border-t-2 border-solid border-gray-300;
+    @apply border-t-2 border-solid border-gray-300 dark:border-gray-700;
     border-style: solid;
   }
 }
 
 .table-cell-header {
+  @apply flex flex-col space-y-2;
   &__label {
-    @apply flex;
+    @apply flex items-center justify-center;
+
     > span:first-child {
       @apply flex-1;
     }
   }
+
+  &__sort {
+    @apply flex items-center justify-center;
+  }
+
   &__filter {
     @apply mt-1;
   }
@@ -51,11 +58,11 @@
 /* Border versions - Add or remove borders all around the table and between all the columns. */
 
 .table-bordered {
-  @apply border-1 border-solid border-gray-300;
+  @apply border-1 border-solid border-gray-300 dark:border-gray-700;
 
   th,
   td {
-    @apply border-1 border-solid border-gray-300;
+    @apply border-1 border-solid border-gray-300 dark:border-gray-700;
   }
 
   thead {
@@ -79,7 +86,7 @@
 
 .table-striped {
   tbody tr:nth-of-type(odd) {
-    @apply bg-gray-100;
+    @apply bg-gray-100 dark:bg-gray-800;
   }
 }
 
@@ -87,69 +94,29 @@
 
 .table-hover {
   tbody tr {
-    @apply hover:text-gray-900 hover:bg-gray-200;
+    @apply hover:text-gray-900 hover:bg-gray-200 dark:hover:bg-gray-700 dark:hover:text-gray-100;
   }
 }
 
 .table-group {
-  @apply border-1 border-gray-300;
+  @apply border-1 border-gray-300 dark:border-gray-700;
+
+  &.border-top-0 {
+    @apply border-t-0;
+  }
+
   .table {
     @apply border-t-0 mb-0;
     thead th {
       @apply border-t-0;
     }
   }
+
   .pagination-group {
-    @apply border-t-1 border-gray-300 p-3;
+    @apply border-t-1 border-gray-300 dark:border-gray-700 p-3;
   }
 }
-/*
-// Dark styles
-//
-// Same table markup, but inverted color scheme: dark background and light text.
-
-// stylelint-disable-next-line no-duplicate-selectors
-//.table {
-//  .thead-dark {
-//    th {
-//      color: $table-dark-color;
-//      background-color: $table-dark-bg;
-//      border-color: $table-dark-border-color;
-//    }
-//  }
-//
-//  .thead-light {
-//    th {
-//      color: $table-head-color;
-//      background-color: $table-head-bg;
-//      border-color: $table-border-color;
-//    }
-//  }
-//}*/
-/*
-// Responsive tables
-//
-// Generate series of `.table-responsive-*` classes for configuring the screen
-// size of where your table will overflow.
 
 .table-responsive {
-  @each $breakpoint in map-keys($grid-breakpoints) {
-    $next: breakpoint-next($breakpoint, $grid-breakpoints);
-    $infix: breakpoint-infix($next, $grid-breakpoints);
-
-    &#{$infix} {
-      @include media-breakpoint-down($breakpoint) {
-        display: block;
-        width: 100%;
-        overflow-x: auto;
-        -webkit-overflow-scrolling: touch;
-
-        // Prevent double border on horizontal scroll due to use of `display: block;`
-        > .table-bordered {
-          border: 0;
-        }
-      }
-    }
-  }
+  @apply block w-full overflow-x-auto;
 }
-*/