@tsed/tailwind-formio 3.0.0-alpha.10 → 3.0.0-alpha.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/package.json +1 -1
  2. package/styles/tables.css +4 -0
  3. package/styles/tabs.css +67 -49
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tsed/tailwind-formio",
3
- "version": "3.0.0-alpha.10",
3
+ "version": "3.0.0-alpha.11",
4
4
  "description": "Tailwind templates for form.io forms.",
5
5
  "type": "module",
6
6
  "main": "dist/index.js",
package/styles/tables.css CHANGED
@@ -101,6 +101,10 @@
101
101
  .table-group {
102
102
  @apply border-1 border-gray-300 dark:border-gray-700;
103
103
 
104
+ &.border-top-0 {
105
+ @apply border-t-0;
106
+ }
107
+
104
108
  .table {
105
109
  @apply border-t-0 mb-0;
106
110
  thead th {
package/styles/tabs.css CHANGED
@@ -1,63 +1,81 @@
1
1
  .tw-tabs {
2
- &__header {
3
- @apply overflow-auto;
2
+ &__header {
3
+ @apply overflow-auto;
4
4
 
5
- &-wrapper {
6
- @apply relative flex items-center pt-1 px-1;
7
- }
8
- &-border {
9
- @apply border-b-1 border-gray-300 absolute bottom-0 left-0 right-0 z-1;
10
- }
11
- }
5
+ &-wrapper{
6
+ @apply relative flex items-center pt-1 gap-1;
12
7
 
13
- &__button {
14
- @apply flex items-center border-1 border-b-0 border-gray-300 relative outline-none focus:outline-none bg-gray-100 text-gray-700 hover:text-secondary focus:text-secondary px-4 py-2;
8
+ > [role="tablist"] {
9
+ @apply relative flex items-center gap-1;
10
+ }
11
+ }
15
12
 
16
- &-label {
17
- @apply text-sm whitespace-nowrap;
18
- }
19
- &-icon {
20
- @apply mr-2 -ml-1 -mt-px;
21
- }
13
+ .btn {
14
+ @apply px-3;
15
+ }
22
16
 
23
- &-border {
24
- @apply border-transparent z-1 absolute top-0 right-0 left-0 border-t-2;
25
- &.-active {
26
- @apply border-primary;
27
- }
28
- }
29
- &-wrapper {
30
- @apply relative mr-1;
31
-
32
- &:last-child{
33
- @apply mr-0;
34
- }
35
-
36
- &.-active {
37
- @apply z-2;
38
- }
39
- &.-back{
40
- @apply -ml-2 mr-0;
41
- }
17
+ &-border {
18
+ @apply border-b-1 border-gray-300 absolute bottom-0 left-0 right-0 z-1;
19
+ }
42
20
  }
43
21
 
44
- &.-active {
45
- @apply text-primary bg-white;
22
+ &__button {
23
+ @apply flex items-center border-1 border-b-0 border-gray-300 relative outline-none focus:outline-none bg-gray-100 text-gray-700 hover:text-secondary focus:text-secondary px-4 py-2;
24
+
25
+ &-label {
26
+ @apply text-sm whitespace-nowrap;
27
+ }
28
+
29
+ &-icon {
30
+ @apply mr-2 -ml-1 -mt-px;
31
+ }
32
+
33
+ &-border {
34
+ @apply border-transparent z-1 absolute top-0 right-0 left-0 border-t-2;
35
+ }
36
+
37
+ &-wrapper {
38
+ @apply relative ;
39
+
40
+ &.-active {
41
+ @apply z-2;
42
+
43
+ .tw-tabs__button {
44
+ @apply text-primary bg-white;
45
+ }
46
+
47
+ .tw-tabs__button-border {
48
+ @apply border-primary;
49
+ }
50
+ }
51
+
52
+ &.-reverse {
53
+ .tw-tabs__button {
54
+ @apply bg-white;
55
+
56
+ &.-active {
57
+ @apply bg-gray-100;
58
+ }
59
+ }
60
+ }
61
+ }
46
62
  }
47
63
 
48
- &.-reverse {
49
- @apply bg-white;
50
- &.-active {
51
- @apply bg-gray-100;
52
- }
64
+ &__body {
65
+ @apply grid grid-rows-1 overflow-hidden;
53
66
  }
54
67
 
55
- &.-back {
56
- @apply text-secondary bg-white px-2 border-transparent;
68
+ &__panel {
69
+ @apply col-start-1 col-end-1 row-start-1 row-end-1 transition-all duration-300 ease-in-out;
70
+
71
+ &.-active {
72
+ @apply z-1 opacity-100 visible;
73
+ height: auto;
74
+ }
57
75
 
58
- .tabs__button-icon {
59
- @apply m-0;
60
- }
76
+ &:not(.-active) {
77
+ @apply z-0 opacity-0 invisible;
78
+ height: 0;
79
+ }
61
80
  }
62
- }
63
81
  }