testio-tailwind 0.4.0 → 0.5.1
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/README.md +1 -1
- package/package.json +1 -1
- package/src/assets/stylesheets/app.css +1 -0
- package/src/assets/stylesheets/components/buttons.css +1 -1
- package/src/assets/stylesheets/components/chat.css +1 -0
- package/src/assets/stylesheets/components/checkboxes_radiobuttons.css +1 -1
- package/src/assets/stylesheets/components/layout.css +1 -1
- package/src/assets/stylesheets/components/list_item.css +24 -8
- package/src/assets/stylesheets/components/ratingscale.css +24 -0
- package/src/assets/stylesheets/components/selectable_token.css +0 -26
- package/src/assets/stylesheets/components/tabs.css +5 -0
- package/src/assets/stylesheets/components/typography.css +5 -3
- package/src/pages/components/listitem_with_actionbar.haml +73 -0
- package/src/pages/components/listitems_header.haml +100 -0
- package/src/pages/forms/rating_scale.haml +6 -6
- package/src/pages/navigation/tabnavigation_sm.haml +22 -0
package/README.md
CHANGED
package/package.json
CHANGED
|
@@ -5,7 +5,7 @@ input[type="submit"].btn {
|
|
|
5
5
|
@apply inline-flex justify-start items-center h-btn px-md text-buttons whitespace-nowrap text-primary border-0 rounded cursor-pointer select-none;
|
|
6
6
|
|
|
7
7
|
&:hover, &:focus, &:active {
|
|
8
|
-
@apply text-white bg-link-hover;
|
|
8
|
+
@apply text-white bg-link-hover border-link-hover;
|
|
9
9
|
.icon {
|
|
10
10
|
@apply text-white;
|
|
11
11
|
}
|
|
@@ -10,7 +10,7 @@
|
|
|
10
10
|
}
|
|
11
11
|
|
|
12
12
|
.main-content {
|
|
13
|
-
@apply relative overflow-x-hidden overflow-y-scroll max-h-full p-body-padding-mobile pb-lg sm:px-body-padding-tablet xl:px-body-padding-desktop;
|
|
13
|
+
@apply relative overflow-x-hidden overflow-y-scroll max-h-full p-body-padding-mobile pt-spacing pb-lg sm:px-body-padding-tablet xl:px-body-padding-desktop;
|
|
14
14
|
grid-area: main;
|
|
15
15
|
}
|
|
16
16
|
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
}
|
|
6
6
|
|
|
7
7
|
.listitem,
|
|
8
|
-
|
|
8
|
+
.listitem .listitem-header {
|
|
9
9
|
@apply relative grid items-stretch border-0 grid-rows-auto-auto grid-cols-auto-fr-auto sm:grid-cols-auto-fr-2-auto select-none;
|
|
10
10
|
grid-template-areas: "badge title actions"
|
|
11
11
|
"badge metrics actions";
|
|
@@ -24,7 +24,8 @@ details.listitem .listitem-title {
|
|
|
24
24
|
@apply bg-card rounded border;
|
|
25
25
|
}
|
|
26
26
|
|
|
27
|
-
details.listitem
|
|
27
|
+
details.listitem,
|
|
28
|
+
.listitem.seperate-header {
|
|
28
29
|
grid: none;
|
|
29
30
|
}
|
|
30
31
|
|
|
@@ -43,7 +44,8 @@ a.listitem:hover {
|
|
|
43
44
|
}
|
|
44
45
|
}
|
|
45
46
|
|
|
46
|
-
.listitem[open] > .listitem-header
|
|
47
|
+
.listitem[open] > .listitem-header,
|
|
48
|
+
.listitem.listitem.seperate-header > .listitem-header {
|
|
47
49
|
@apply border-b-1 border-white rounded-t;
|
|
48
50
|
}
|
|
49
51
|
|
|
@@ -83,7 +85,8 @@ a.listitem:hover {
|
|
|
83
85
|
@apply bg-danger;
|
|
84
86
|
}
|
|
85
87
|
|
|
86
|
-
.listitem[open] > .listitem-header .listitem-badge
|
|
88
|
+
.listitem[open] > .listitem-header .listitem-badge,
|
|
89
|
+
.listitem.seperate-header > .listitem-header .listitem-badge {
|
|
87
90
|
border-bottom-left-radius: 0;
|
|
88
91
|
}
|
|
89
92
|
|
|
@@ -151,7 +154,8 @@ a.listitem:hover {
|
|
|
151
154
|
@apply mb-xs text-label font-semibold uppercase;
|
|
152
155
|
}
|
|
153
156
|
|
|
154
|
-
.listitem[open] > .listitem-header .listitem-actions .btn
|
|
157
|
+
.listitem[open] > .listitem-header .listitem-actions .btn,
|
|
158
|
+
.listitem.seperate-header > .listitem-header .listitem-actions .btn {
|
|
155
159
|
@apply rounded-b-none;
|
|
156
160
|
}
|
|
157
161
|
|
|
@@ -175,7 +179,9 @@ a.listitem:hover {
|
|
|
175
179
|
}
|
|
176
180
|
|
|
177
181
|
.listitem-content .listitem[open] > .listitem-header,
|
|
178
|
-
.listitem.white[open] > .listitem-header
|
|
182
|
+
.listitem.white[open] > .listitem-header,
|
|
183
|
+
.listitem-content .listitem.seperate-header > .listitem-header,
|
|
184
|
+
.listitem.seperate-header > .listitem-header {
|
|
179
185
|
@apply border-b-1 border-card;
|
|
180
186
|
}
|
|
181
187
|
|
|
@@ -230,7 +236,8 @@ a.listitem:hover {
|
|
|
230
236
|
mask-repeat: no-repeat;
|
|
231
237
|
}
|
|
232
238
|
|
|
233
|
-
.listitem[open] .listitem-check label
|
|
239
|
+
.listitem[open] .listitem-check label,
|
|
240
|
+
.listitem.seperate-header .listitem-check label {
|
|
234
241
|
@apply rounded-bl-none;
|
|
235
242
|
}
|
|
236
243
|
|
|
@@ -249,10 +256,19 @@ a.listitem:hover {
|
|
|
249
256
|
@apply rounded-br-none;
|
|
250
257
|
}
|
|
251
258
|
|
|
252
|
-
.listitem-with-footer .listitem-footer
|
|
259
|
+
.listitem-with-footer .listitem-footer,
|
|
260
|
+
.listitem-actionbar {
|
|
253
261
|
@apply flex w-full;
|
|
254
262
|
}
|
|
255
263
|
|
|
264
|
+
.listitem-actionbar {
|
|
265
|
+
@apply px-sm py-xs bg-primary rounded-b;
|
|
266
|
+
}
|
|
267
|
+
|
|
268
|
+
.listitem-actionbar > .btn {
|
|
269
|
+
@apply mr-xs;
|
|
270
|
+
}
|
|
271
|
+
|
|
256
272
|
.listitem-with-footer .listitem-footer .btn {
|
|
257
273
|
@apply px-sm m-0 rounded-none border-l-1 border-white;
|
|
258
274
|
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
|
|
2
|
+
.rating-wrapper {
|
|
3
|
+
@apply flex flex-col min-w-0;
|
|
4
|
+
}
|
|
5
|
+
|
|
6
|
+
.rating-scale {
|
|
7
|
+
@apply grid grid-flow-col gap-xxs md:gap-xs;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
.rating-scale .selectable-token {
|
|
11
|
+
@apply w-full;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
.rating-scale .selectable-token label {
|
|
15
|
+
@apply justify-center w-full px-xxs;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
.rating-labels {
|
|
19
|
+
@apply flex justify-between mt-xxs text-label text-label-color leading-tight;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
.rating-labels .label-max {
|
|
23
|
+
@apply text-right;
|
|
24
|
+
}
|
|
@@ -125,32 +125,6 @@
|
|
|
125
125
|
@apply rounded-r;
|
|
126
126
|
}
|
|
127
127
|
|
|
128
|
-
/*/ Rating scale /*/
|
|
129
|
-
|
|
130
|
-
.rating-wrapper {
|
|
131
|
-
@apply flex flex-col min-w-0;
|
|
132
|
-
}
|
|
133
|
-
|
|
134
|
-
.rating-scale {
|
|
135
|
-
@apply grid grid-flow-col gap-xs;
|
|
136
|
-
}
|
|
137
|
-
|
|
138
|
-
.rating-scale .selectable-token {
|
|
139
|
-
@apply w-full;
|
|
140
|
-
}
|
|
141
|
-
|
|
142
|
-
.rating-scale .selectable-token label {
|
|
143
|
-
@apply justify-center w-full;
|
|
144
|
-
}
|
|
145
|
-
|
|
146
|
-
.rating-labels {
|
|
147
|
-
@apply flex justify-between mb-xxs text-label text-label-color leading-tight;
|
|
148
|
-
}
|
|
149
|
-
|
|
150
|
-
.rating-labels .label-max {
|
|
151
|
-
@apply text-right;
|
|
152
|
-
}
|
|
153
|
-
|
|
154
128
|
/*////// Token LG /////*/
|
|
155
129
|
|
|
156
130
|
.selectable-token.lg label,
|
|
@@ -51,7 +51,7 @@ code {
|
|
|
51
51
|
@apply font-mono not-italic text-sm;
|
|
52
52
|
}
|
|
53
53
|
|
|
54
|
-
|
|
54
|
+
.label, .form-label, dt {
|
|
55
55
|
@apply text-label-color text-label font-semibold;
|
|
56
56
|
}
|
|
57
57
|
|
|
@@ -63,7 +63,8 @@ label, .label, .form-label, dt {
|
|
|
63
63
|
}
|
|
64
64
|
}
|
|
65
65
|
|
|
66
|
-
.link-with-icon .icon
|
|
66
|
+
.link-with-icon .icon,
|
|
67
|
+
.link-with-icon .status-icon {
|
|
67
68
|
@apply mr-icon-spacing;
|
|
68
69
|
}
|
|
69
70
|
|
|
@@ -71,7 +72,8 @@ label, .label, .form-label, dt {
|
|
|
71
72
|
@apply inline-flex items-start;
|
|
72
73
|
}
|
|
73
74
|
|
|
74
|
-
.text-with-icon .icon
|
|
75
|
+
.text-with-icon .icon,
|
|
76
|
+
.text-with-icon .status-icon {
|
|
75
77
|
@apply mr-icon-spacing;
|
|
76
78
|
}
|
|
77
79
|
|
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
---
|
|
2
|
+
tags: components
|
|
3
|
+
title: List-item with actionbar
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
.list-listitems
|
|
7
|
+
.listitem-with-footer
|
|
8
|
+
%details.listitem
|
|
9
|
+
%summary.listitem-header
|
|
10
|
+
.listitem-title List item collapsable with actionbar
|
|
11
|
+
.listitem-actions
|
|
12
|
+
.btn.collapse-btn
|
|
13
|
+
.listitem-content
|
|
14
|
+
.listitem-subheadline Subheadline
|
|
15
|
+
.listitem-card
|
|
16
|
+
%p This is a listitem-card with some Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source.
|
|
17
|
+
.listitem-subheadline Subheadline
|
|
18
|
+
.listitem-card
|
|
19
|
+
%p Another listitem-card with some Lorem Ipsum and a nice placeholder image.
|
|
20
|
+
%img{src:"/assets/images/placeholders/security-jira-server.png"}
|
|
21
|
+
.listitem-actionbar
|
|
22
|
+
%a.btn.btn-inverted{href: ""}
|
|
23
|
+
%span.icon.icon-explorative.mr-icon-spacing
|
|
24
|
+
Primary
|
|
25
|
+
%a.btn.btn-secondary-inverted{href: ""}
|
|
26
|
+
Secondary
|
|
27
|
+
%details.dropdown-actions.dropright.dropup
|
|
28
|
+
%summary
|
|
29
|
+
.btn.btn-secondary-inverted.btn-square
|
|
30
|
+
%span.icon.text-icon-default.icon-more
|
|
31
|
+
.listitem-more-menu.popover-menu
|
|
32
|
+
%a.popover-action
|
|
33
|
+
%span.icon.text-icon-default.icon-pencil
|
|
34
|
+
Action
|
|
35
|
+
%a.popover-action
|
|
36
|
+
%span.icon.text-icon-default.icon-duplicate
|
|
37
|
+
Action
|
|
38
|
+
%a.popover-action
|
|
39
|
+
%span.icon.text-icon-default.icon-remove
|
|
40
|
+
Action
|
|
41
|
+
%details.listitem
|
|
42
|
+
%summary.listitem-header
|
|
43
|
+
.listitem-title List item collapsable with actionbar inside content
|
|
44
|
+
.listitem-actions
|
|
45
|
+
.btn.collapse-btn
|
|
46
|
+
.listitem-content
|
|
47
|
+
.listitem-subheadline Subheadline
|
|
48
|
+
.listitem-card
|
|
49
|
+
%p This is a listitem-card with some Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source.
|
|
50
|
+
.listitem-subheadline Subheadline
|
|
51
|
+
.listitem-card
|
|
52
|
+
%p Another listitem-card with some Lorem Ipsum and a nice placeholder image.
|
|
53
|
+
%img{src:"/assets/images/placeholders/security-jira-server.png"}
|
|
54
|
+
.listitem-actionbar
|
|
55
|
+
%a.btn.btn-inverted{href: ""}
|
|
56
|
+
%span.icon.icon-explorative.mr-icon-spacing
|
|
57
|
+
Primary
|
|
58
|
+
%a.btn.btn-secondary-inverted{href: ""}
|
|
59
|
+
Secondary
|
|
60
|
+
%details.dropdown-actions.dropright.dropup
|
|
61
|
+
%summary
|
|
62
|
+
.btn.btn-secondary-inverted.btn-square
|
|
63
|
+
%span.icon.text-icon-default.icon-more
|
|
64
|
+
.listitem-more-menu.popover-menu
|
|
65
|
+
%a.popover-action
|
|
66
|
+
%span.icon.text-icon-default.icon-pencil
|
|
67
|
+
Action
|
|
68
|
+
%a.popover-action
|
|
69
|
+
%span.icon.text-icon-default.icon-duplicate
|
|
70
|
+
Action
|
|
71
|
+
%a.popover-action
|
|
72
|
+
%span.icon.text-icon-default.icon-remove
|
|
73
|
+
Action
|
|
@@ -0,0 +1,100 @@
|
|
|
1
|
+
---
|
|
2
|
+
tags: components
|
|
3
|
+
title: List item with seperate header
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
.list-listitems
|
|
7
|
+
.listitem.seperate-header
|
|
8
|
+
.listitem-header
|
|
9
|
+
.listitem-title List item with seperate header
|
|
10
|
+
.listitem-metrics
|
|
11
|
+
.listitem-metric
|
|
12
|
+
.icon.icon-critical
|
|
13
|
+
99
|
|
14
|
+
.listitem-metric
|
|
15
|
+
.icon.icon-high
|
|
16
|
+
99
|
|
17
|
+
.listitem-metric
|
|
18
|
+
.icon.icon-low
|
|
19
|
+
99
|
|
20
|
+
.listitem-metric
|
|
21
|
+
.icon.icon-user-story
|
|
22
|
+
99/99
|
|
23
|
+
.listitem-actions
|
|
24
|
+
%a.btn.btn-primary Action
|
|
25
|
+
.listitem-content
|
|
26
|
+
.listitem-subheadline Subheadline
|
|
27
|
+
.listitem-card
|
|
28
|
+
%p This is a listitem-card with some Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source.
|
|
29
|
+
.listitem-subheadline Subheadline
|
|
30
|
+
.listitem-card
|
|
31
|
+
%p Another listitem-card with some Lorem Ipsum and a nice placeholder image.
|
|
32
|
+
%img{src:"/assets/images/placeholders/security-jira-server.png"}
|
|
33
|
+
.listitem.seperate-header
|
|
34
|
+
.listitem-header
|
|
35
|
+
.listitem-badge
|
|
36
|
+
.icon.icon-feature
|
|
37
|
+
.listitem-title List item with seperate header
|
|
38
|
+
.listitem-metrics
|
|
39
|
+
.listitem-metric
|
|
40
|
+
.icon.icon-critical
|
|
41
|
+
99
|
|
42
|
+
.listitem-metric
|
|
43
|
+
.icon.icon-high
|
|
44
|
+
99
|
|
45
|
+
.listitem-metric
|
|
46
|
+
.icon.icon-low
|
|
47
|
+
99
|
|
48
|
+
.listitem-metric
|
|
49
|
+
.icon.icon-user-story
|
|
50
|
+
99/99
|
|
51
|
+
.listitem-actions
|
|
52
|
+
%a.btn.btn-primary Action
|
|
53
|
+
%details.dropdown-actions.dropright
|
|
54
|
+
%summary
|
|
55
|
+
.btn.btn-primary.btn-square
|
|
56
|
+
%span.icon.text-icon-default.icon-more
|
|
57
|
+
.popover-menu
|
|
58
|
+
%a.popover-action
|
|
59
|
+
%span.icon.text-icon-default.icon-pencil
|
|
60
|
+
Edit
|
|
61
|
+
%a.popover-action
|
|
62
|
+
%span.icon.text-icon-default.icon-duplicate
|
|
63
|
+
Duplicate
|
|
64
|
+
%a.popover-action
|
|
65
|
+
%span.icon.text-icon-default.icon-remove
|
|
66
|
+
Delete
|
|
67
|
+
.listitem-content
|
|
68
|
+
.listitem-subheadline Subheadline
|
|
69
|
+
.listitem-card
|
|
70
|
+
%p This is a listitem-card with some Lorem Ipsum.
|
|
71
|
+
.listitem-subheadline Bugs
|
|
72
|
+
%details.listitem
|
|
73
|
+
%summary.listitem-header
|
|
74
|
+
.listitem-badge
|
|
75
|
+
.icon.icon-testcase-bug
|
|
76
|
+
.listitem-title A nested List item collapsable with cards
|
|
77
|
+
.listitem-actions
|
|
78
|
+
.btn.collapse-btn
|
|
79
|
+
.listitem-content
|
|
80
|
+
.listitem-subheadline Listitem-card
|
|
81
|
+
.listitem-card
|
|
82
|
+
%p Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source.
|
|
83
|
+
.listitem-subheadline Listitem-card
|
|
84
|
+
.listitem-card
|
|
85
|
+
%p Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source.
|
|
86
|
+
%details.listitem
|
|
87
|
+
%summary.listitem-header
|
|
88
|
+
.listitem-badge
|
|
89
|
+
.icon.icon-testcase-bug
|
|
90
|
+
.listitem-title A nested listitem with bug content
|
|
91
|
+
.listitem-actions
|
|
92
|
+
.btn.collapse-btn
|
|
93
|
+
.listitem-content
|
|
94
|
+
.listitem-subheadline Listitem-card
|
|
95
|
+
.listitem-card
|
|
96
|
+
%p Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin.
|
|
97
|
+
.listitem-subheadline Listitem-card
|
|
98
|
+
.listitem-card
|
|
99
|
+
%p Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source.
|
|
100
|
+
|
|
@@ -5,9 +5,6 @@ title: Rating scale
|
|
|
5
5
|
|
|
6
6
|
.form-grid
|
|
7
7
|
.rating-wrapper
|
|
8
|
-
.rating-labels
|
|
9
|
-
.label-min Minimum
|
|
10
|
-
.label-max Maximum
|
|
11
8
|
.rating-scale
|
|
12
9
|
.selectable-token
|
|
13
10
|
%input#rating1{type:'radio', checked:'', name:'radio-togglegroup1', value:'1'}
|
|
@@ -24,10 +21,10 @@ title: Rating scale
|
|
|
24
21
|
.selectable-token
|
|
25
22
|
%input#rating5{type:'radio', name:'radio-togglegroup1', value:'3'}
|
|
26
23
|
%label{for:'rating5'} 5
|
|
27
|
-
.rating-wrapper
|
|
28
24
|
.rating-labels
|
|
29
|
-
.label-min Minimum
|
|
30
|
-
.label-max Maximum
|
|
25
|
+
.label-min Minimum
|
|
26
|
+
.label-max Maximum
|
|
27
|
+
.rating-wrapper
|
|
31
28
|
.rating-scale
|
|
32
29
|
.selectable-token
|
|
33
30
|
%input#rating11{type:'radio', checked:'', name:'radio-togglegroup1', value:'1'}
|
|
@@ -59,4 +56,7 @@ title: Rating scale
|
|
|
59
56
|
.selectable-token
|
|
60
57
|
%input#rating20{type:'radio', name:'radio-togglegroup1', value:'3'}
|
|
61
58
|
%label{for:'rating20'} 10
|
|
59
|
+
.rating-labels
|
|
60
|
+
.label-min Minimum label with a lot of redundant text showing how things break
|
|
61
|
+
.label-max Maximum label with a lot of redundant text showing how things break
|
|
62
62
|
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
---
|
|
2
|
+
tags: navigation
|
|
3
|
+
title: Tab navigation SM
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
%nav.nav-tabs.sm
|
|
7
|
+
.navlinks
|
|
8
|
+
.navlink.active{href:""} Navlink active
|
|
9
|
+
.navlink{href:""} Navlink
|
|
10
|
+
.navlink{href:""} Navlink
|
|
11
|
+
.navlink{href:""}
|
|
12
|
+
Counter
|
|
13
|
+
.counter 99
|
|
14
|
+
.navlink.disabled{href:""} Disabled
|
|
15
|
+
.nav-actions
|
|
16
|
+
%a.link-with-icon{href:""}
|
|
17
|
+
.icon.icon-sort-descending
|
|
18
|
+
Severity (desc)
|
|
19
|
+
%a.linked-icon{href:""}
|
|
20
|
+
.icon.icon-filter
|
|
21
|
+
%a.linked-icon{href:""}
|
|
22
|
+
.icon.icon-search
|