testio-tailwind 3.16.0 → 3.17.0

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.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "testio-tailwind",
3
- "version": "3.16.0",
3
+ "version": "3.17.0",
4
4
  "description": "Tailwind based design system for Test IO",
5
5
  "scripts": {
6
6
  "clean": "del dist --force",
@@ -1,17 +1,17 @@
1
1
  .alert {
2
- @apply relative overflow-hidden flex flex-row items-start w-full mb-xs p-xxs text-left text-white bg-info border-0 rounded;
2
+ @apply relative overflow-hidden flex flex-row items-start w-full mb-xs p-xxs text-left text-white bg-info border-0 rounded dark:bg-listitem;
3
3
  }
4
4
 
5
5
  .alert-message {
6
- @apply flex flex-col sm:flex-row sm:flex-grow items-start justify-between w-full p-xs;
6
+ @apply flex flex-col sm:flex-row sm:flex-grow items-start justify-between w-full p-xs dark:px-md;
7
7
  }
8
8
 
9
9
  .alert-message .btn {
10
- @apply mt-xs sm:-my-xs ml-0 sm:ml-xs -mr-xxs text-primary bg-white hover:text-white hover:bg-link-hover;
10
+ @apply mt-xs dark:sm:-mt-xxs sm:-my-xs ml-0 sm:ml-xs -mr-xxs text-primary bg-white hover:text-white hover:bg-link-hover dark:h-btn-sm dark:text-black;
11
11
  }
12
12
 
13
13
  .alert .close {
14
- @apply flex justify-center items-center flex-shrink-0 w-btn h-btn top-xxs right-xxs text-info bg-white hover:bg-link-hover rounded opacity-100;
14
+ @apply flex justify-center items-center flex-shrink-0 w-btn h-btn text-info bg-white hover:bg-link-hover rounded opacity-100 dark:h-btn-sm dark:w-btn-sm dark:mr-xs dark:mt-xxs dark:bg-transparent dark:text-white;
15
15
  .icon {
16
16
  @apply text-icon;
17
17
  }
@@ -34,9 +34,9 @@
34
34
  }
35
35
 
36
36
  .alert-success {
37
- @apply bg-success;
37
+ @apply bg-success dark:text-black;
38
38
  .icon {
39
- @apply text-success;
39
+ @apply text-success dark:text-white;
40
40
  }
41
41
  }
42
42
 
@@ -45,6 +45,6 @@
45
45
  .alert-error {
46
46
  @apply bg-danger;
47
47
  .icon {
48
- @apply text-danger;
48
+ @apply text-danger dark:text-white;
49
49
  }
50
50
  }
@@ -19,10 +19,10 @@
19
19
  --color-label-color: #888888;
20
20
  --color-success: #33BA9E;
21
21
  --color-danger: #FF3131;
22
+ --color-info: #2A25F5;
22
23
  --color-blocked: #F48D21;
23
24
  --color-pending: #888888;
24
25
  --color-chart-empty: #2E2E2E;
25
- --color-info: #326dd1;
26
26
  --color-dark: #222222;
27
27
  --color-card: #1D1D1D;
28
28
 
@@ -8,16 +8,27 @@ title: Alerts
8
8
  .alert-message Alert
9
9
  %button.close
10
10
  .icon.icon-cross
11
- .alert.alert-info
12
- .alert-message Info Alert with a lot of Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
11
+ .alert
12
+ .alert-message
13
+ Alert with a button and some Lorem ipsum dolor sit amet
14
+ %button.btn.btn-white Alert action
13
15
  %button.close
14
16
  .icon.icon-cross
15
17
  .alert
16
18
  .alert-message
17
- Info Alert with a lot of Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
19
+ %div
20
+ .font-semibold.mb-xs Alert with a button and some formatting
21
+ %span
22
+ We can even apply some formatting with
23
+ %code consetetur sadipscing elitr
24
+ , sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
18
25
  %button.btn.btn-white Alert action
19
26
  %button.close
20
27
  .icon.icon-cross
28
+ .alert.alert-info
29
+ .alert-message Info Alert with a lot of Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
30
+ %button.close
31
+ .icon.icon-cross
21
32
  .alert.alert-success
22
33
  .alert-message Success Alert
23
34
  %button.close