patternfly-sass 3.11.0 → 3.12.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.
- checksums.yaml +4 -4
- data/assets/stylesheets/patternfly/_bootstrap-treeview.scss +28 -6
- data/assets/stylesheets/patternfly/_dropdowns.scss +11 -0
- data/assets/stylesheets/patternfly/_forms.scss +14 -0
- data/assets/stylesheets/patternfly/_list-view.scss +63 -0
- data/assets/stylesheets/patternfly/_toolbar.scss +11 -3
- data/assets/stylesheets/patternfly/_wizard.scss +44 -8
- data/assets/stylesheets/patternfly/lib/bootstrap-datetimepicker.scss +4 -4
- data/bower.json +2 -2
- data/lib/patternfly-sass/version.rb +2 -2
- data/spec/html/bootstrap-treeview-2.html +1 -1
- data/spec/html/bootstrap-treeview.html +16 -3
- data/spec/html/card-view-multi-select.html +6 -24
- data/spec/html/card-view-single-select.html +6 -24
- data/spec/html/cards.html +3 -0
- data/spec/html/dist/css/patternfly-additions.css +194 -118
- data/spec/html/dist/css/patternfly-additions.css.map +1 -1
- data/spec/html/dist/css/patternfly-additions.min.css +2 -2
- data/spec/html/dist/css/patternfly-additions.min.css.map +1 -1
- data/spec/html/dist/css/patternfly.css +20 -38
- data/spec/html/dist/css/patternfly.css.map +1 -1
- data/spec/html/dist/css/patternfly.min.css +2 -2
- data/spec/html/dist/css/patternfly.min.css.map +1 -1
- data/spec/html/forms.html +365 -226
- data/spec/html/horizontal-navigation.html +3 -0
- data/spec/html/index.html +6 -0
- data/spec/html/list-view-compound-expansion.html +1716 -0
- data/spec/html/list-view-rows.html +4 -0
- data/spec/html/list-view-simple-expansion.html +999 -0
- data/spec/html/list-view.html +6 -24
- data/spec/html/notification-drawer-horizontal-nav.html +3 -0
- data/spec/html/notification-drawer-vertical-nav.html +3 -0
- data/spec/html/toolbar.html +8 -11
- data/spec/html/vertical-navigation-primary-only.html +3 -0
- data/spec/html/vertical-navigation-with-badges.html +3 -0
- data/spec/html/vertical-navigation-with-secondary.html +3 -0
- data/spec/html/vertical-navigation-with-tertiary-no-icons.html +3 -0
- data/spec/html/vertical-navigation-with-tertiary-pins.html +3 -0
- data/spec/html/wizard.html +574 -318
- metadata +6 -2
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA1:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 789aa9b7e858b5ab2198fcc13bcce5f62ea95314
|
4
|
+
data.tar.gz: 78c9c37750fddd9125e8ac6e1bf2d6f690f7292c
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 52f5098deb333720a77efdb6748a46943500060bc9c76149bd7ff48bdbc6ea1134f06299523a728886f398fefc40e377f8d5f854af64332af0a487c1b0da3a38
|
7
|
+
data.tar.gz: c9cf52de9d0689efea1b326877a32d6f52accda346b75dfea785ff2a2958fe3dd7d34caee542922ff2d54e8e2874a9ff4fdff2571512ac45b507b67992e4e523
|
@@ -10,20 +10,19 @@
|
|
10
10
|
background: transparent;
|
11
11
|
border-bottom: 1px solid transparent !important;
|
12
12
|
border-top: 1px solid transparent !important;
|
13
|
+
cursor: default !important;
|
13
14
|
margin-bottom: 0;
|
14
15
|
overflow: hidden;
|
15
16
|
padding: 0 10px;
|
16
17
|
text-overflow: ellipsis;
|
17
18
|
white-space: nowrap;
|
18
|
-
|
19
19
|
&:hover {
|
20
|
-
background:
|
21
|
-
border-color: $dropdown-link-hover-border-color !important;
|
20
|
+
background: none !important;
|
22
21
|
}
|
23
22
|
&.node-selected {
|
24
|
-
background:
|
25
|
-
border-color:
|
26
|
-
color:
|
23
|
+
background: none !important;
|
24
|
+
border-color: transparent !important;
|
25
|
+
color: inherit !important;
|
27
26
|
}
|
28
27
|
&.node-check-changed {
|
29
28
|
span.node-icon,
|
@@ -43,6 +42,9 @@
|
|
43
42
|
&.check-icon {
|
44
43
|
margin-right: 10px;
|
45
44
|
}
|
45
|
+
&.expand-icon {
|
46
|
+
cursor: pointer !important;
|
47
|
+
}
|
46
48
|
}
|
47
49
|
span.image {
|
48
50
|
background-repeat: no-repeat;
|
@@ -60,8 +62,28 @@
|
|
60
62
|
.node-disabled {
|
61
63
|
color: $color-pf-black-300;
|
62
64
|
cursor: not-allowed;
|
65
|
+
span.expand-icon {
|
66
|
+
cursor: default !important;
|
67
|
+
}
|
63
68
|
}
|
64
69
|
.node-hidden {
|
65
70
|
display:none;
|
66
71
|
}
|
67
72
|
}
|
73
|
+
|
74
|
+
.treeview-pf-hover .list-group-item {
|
75
|
+
cursor: pointer !important;
|
76
|
+
&:hover {
|
77
|
+
background-color: $dropdown-link-hover-bg !important;
|
78
|
+
border-color: $dropdown-link-hover-border-color !important;
|
79
|
+
}
|
80
|
+
}
|
81
|
+
|
82
|
+
.treeview-pf-select .list-group-item {
|
83
|
+
cursor: pointer !important;
|
84
|
+
&.node-selected {
|
85
|
+
background: $dropdown-link-active-bg !important;
|
86
|
+
border-color: $dropdown-link-active-border-color !important;
|
87
|
+
color: $dropdown-link-active-color !important;
|
88
|
+
}
|
89
|
+
}
|
@@ -78,6 +78,17 @@
|
|
78
78
|
border-color: transparent;
|
79
79
|
}
|
80
80
|
}
|
81
|
+
|
82
|
+
// Selected state
|
83
|
+
.dropdown-menu > .selected > a {
|
84
|
+
background-color: $dropdown-link-active-bg;
|
85
|
+
border-color: $dropdown-link-active-border-color;
|
86
|
+
color: $color-pf-white;
|
87
|
+
small {
|
88
|
+
color: rgba($color-pf-white, 0.5);
|
89
|
+
}
|
90
|
+
}
|
91
|
+
|
81
92
|
// Nuke hover/focus effects
|
82
93
|
.dropdown-menu > .disabled > a {
|
83
94
|
&:hover,
|
@@ -10,6 +10,11 @@
|
|
10
10
|
color: $brand-danger;
|
11
11
|
}
|
12
12
|
|
13
|
+
.fields-status-pf {
|
14
|
+
color: $color-pf-black-500;
|
15
|
+
margin-bottom: 15px;
|
16
|
+
}
|
17
|
+
|
13
18
|
.form-control {
|
14
19
|
&[disabled],
|
15
20
|
&[readonly],
|
@@ -58,4 +63,13 @@
|
|
58
63
|
|
59
64
|
label {
|
60
65
|
font-weight: 600;
|
66
|
+
&.required-pf:after {
|
67
|
+
color: $brand-danger;
|
68
|
+
content: "*";
|
69
|
+
margin-left: 3px;
|
70
|
+
}
|
71
|
+
}
|
72
|
+
|
73
|
+
span.required-pf {
|
74
|
+
color: $brand-danger;
|
61
75
|
}
|
@@ -6,17 +6,38 @@
|
|
6
6
|
.list-view-pf {
|
7
7
|
.list-group-item {
|
8
8
|
align-items: flex-start;
|
9
|
+
background-clip: padding-box;
|
10
|
+
border-color: transparent #fff;
|
11
|
+
border-style: solid;
|
12
|
+
border-width: 1px;
|
9
13
|
@include clearfix; //IE9 fallback
|
10
14
|
display: flex;
|
15
|
+
flex-wrap: wrap;
|
11
16
|
padding-bottom: 0;
|
12
17
|
padding-top: 0;
|
18
|
+
&.list-view-pf-expand-active {
|
19
|
+
background-color: $list-view-hover-bg;
|
20
|
+
}
|
13
21
|
&.active {
|
14
22
|
color: $list-group-link-color;
|
15
23
|
background-color: $list-view-active-bg;
|
24
|
+
background-clip: border-box;
|
25
|
+
border-color: $color-pf-blue-300 transparent transparent;
|
16
26
|
z-index:auto;
|
17
27
|
}
|
18
28
|
&:hover {
|
19
29
|
background-color: $list-view-hover-bg;
|
30
|
+
border-left-color: transparent;
|
31
|
+
border-right-color: transparent;
|
32
|
+
}
|
33
|
+
&.list-view-pf-expand-active {
|
34
|
+
border: solid 1px $list-group-active-border;
|
35
|
+
&:first-child {
|
36
|
+
border-top-color: $color-pf-blue-300;
|
37
|
+
}
|
38
|
+
}
|
39
|
+
&:first-child {
|
40
|
+
border-top: 1px solid transparent;
|
20
41
|
}
|
21
42
|
@media (min-width: $screen-md-min) {
|
22
43
|
align-items: center;
|
@@ -230,5 +251,47 @@
|
|
230
251
|
}
|
231
252
|
}
|
232
253
|
.list-view-pf-view {
|
254
|
+
background: $list-group-top-border;
|
255
|
+
border: none;
|
233
256
|
margin-top: 30px;
|
234
257
|
}
|
258
|
+
.list-group-item-header {
|
259
|
+
box-sizing: content-box;
|
260
|
+
cursor: pointer;
|
261
|
+
margin: 0 -15px;
|
262
|
+
padding: 0 15px; //filling the width of the list item
|
263
|
+
width: 100%;
|
264
|
+
}
|
265
|
+
.list-view-pf-expand {
|
266
|
+
cursor: pointer;
|
267
|
+
float: left; //IE9 fallback
|
268
|
+
margin-bottom: ($grid-gutter-width/2);
|
269
|
+
margin-right: 2px;
|
270
|
+
margin-top: ($grid-gutter-width/2);
|
271
|
+
padding: 3px 0;
|
272
|
+
&.active,
|
273
|
+
&:hover {
|
274
|
+
color: $link-color;
|
275
|
+
}
|
276
|
+
.list-view-pf-additional-info-item & {
|
277
|
+
margin: 0;
|
278
|
+
padding: 0;
|
279
|
+
}
|
280
|
+
.fa-angle-right {
|
281
|
+
cursor: pointer;
|
282
|
+
font-size: ($font-size-large+3);
|
283
|
+
margin-right: 5px;
|
284
|
+
margin-top: 2px;
|
285
|
+
width: 10px;
|
286
|
+
}
|
287
|
+
}
|
288
|
+
.list-group-item-container {
|
289
|
+
background: #fff;
|
290
|
+
border-top: solid 1px $list-group-active-border;
|
291
|
+
box-sizing: content-box;
|
292
|
+
margin: -1px -15px 0;
|
293
|
+
order: 3;
|
294
|
+
padding: 10px 15px;
|
295
|
+
position: relative;
|
296
|
+
width: 100%;
|
297
|
+
}
|
@@ -71,7 +71,7 @@
|
|
71
71
|
background: $color-pf-white;
|
72
72
|
border: solid 1px $color-pf-black-400;
|
73
73
|
display: none;
|
74
|
-
|
74
|
+
right: -20px;
|
75
75
|
padding: 5px;
|
76
76
|
position: absolute;
|
77
77
|
top: 35px;
|
@@ -91,13 +91,17 @@
|
|
91
91
|
border-bottom:11px solid $color-pf-black-400;
|
92
92
|
border-left:11px solid transparent;
|
93
93
|
border-right:11px solid transparent;
|
94
|
-
|
94
|
+
right: 35px;
|
95
|
+
.toolbar-pf-find:last-child & {
|
96
|
+
right: 15px;
|
97
|
+
}
|
95
98
|
top: -12px;
|
96
99
|
@media (max-width: $grid-float-breakpoint) {
|
97
100
|
border-bottom:11px solid transparent;
|
98
101
|
border-right:11px solid $color-pf-black-400;
|
99
102
|
border-top:11px solid transparent;
|
100
103
|
left: -22px;
|
104
|
+
right: initial;
|
101
105
|
top: 8px;
|
102
106
|
}
|
103
107
|
}
|
@@ -105,13 +109,17 @@
|
|
105
109
|
border-bottom:10px solid $color-pf-white;
|
106
110
|
border-left:10px solid transparent;
|
107
111
|
border-right:10px solid transparent;
|
108
|
-
|
112
|
+
right: 36px;
|
113
|
+
.toolbar-pf-find:last-child & {
|
114
|
+
right: 16px;
|
115
|
+
}
|
109
116
|
top: -10px;
|
110
117
|
@media (max-width: $grid-float-breakpoint) {
|
111
118
|
border-bottom:10px solid transparent;
|
112
119
|
border-right:10px solid $color-pf-white;
|
113
120
|
border-top:10px solid transparent;
|
114
121
|
left: -20px;
|
122
|
+
right: initial;
|
115
123
|
top: 9px;
|
116
124
|
}
|
117
125
|
}
|
@@ -1,26 +1,34 @@
|
|
1
1
|
//
|
2
2
|
// Wizard
|
3
3
|
// --------------------------------------------------
|
4
|
+
.wizard-pf {
|
5
|
+
height:100%;
|
6
|
+
margin: 0 auto;
|
7
|
+
max-height: 900px;
|
8
|
+
padding: 10px;
|
9
|
+
width: auto;
|
10
|
+
.modal-content {
|
11
|
+
height:100%;
|
12
|
+
}
|
13
|
+
}
|
4
14
|
|
5
15
|
// Wizard header
|
6
16
|
// Top section of the wizard w/ title and dismiss
|
7
17
|
|
8
18
|
.wizard-pf-body {
|
9
19
|
padding: 0;
|
20
|
+
position: static;
|
10
21
|
}
|
11
22
|
/* styles the sidebard containing the sub-steps */
|
12
23
|
.wizard-pf-sidebar {
|
13
24
|
background: $color-pf-black-100;
|
14
25
|
border-right: 1px solid $color-pf-black-300;
|
15
26
|
bottom: 0;
|
16
|
-
display: table-cell;
|
17
27
|
left: 0;
|
18
28
|
overflow-x: hidden;
|
19
29
|
overflow-y: auto;
|
20
|
-
position:
|
30
|
+
position: absolute;
|
21
31
|
top: 0;
|
22
|
-
vertical-align: top;
|
23
|
-
|
24
32
|
.list-group {
|
25
33
|
border-top: 0;
|
26
34
|
margin-bottom: 0;
|
@@ -41,7 +49,7 @@
|
|
41
49
|
padding-left: 20px;
|
42
50
|
position: relative;
|
43
51
|
white-space: nowrap;
|
44
|
-
width:
|
52
|
+
width: 14em;
|
45
53
|
&:hover {
|
46
54
|
text-decoration: none;
|
47
55
|
}
|
@@ -99,7 +107,7 @@
|
|
99
107
|
/* styles the steps indicator across the top of the wizard */
|
100
108
|
.wizard-pf-steps {
|
101
109
|
border-bottom: solid 1px $color-pf-black-300;
|
102
|
-
text-align:center;
|
110
|
+
text-align: center;
|
103
111
|
}
|
104
112
|
.wizard-pf-steps-indicator {
|
105
113
|
font-size: ceil(($font-size-base * 1.3333));
|
@@ -192,10 +200,13 @@
|
|
192
200
|
|
193
201
|
/* styles the main content portion of the wizard */
|
194
202
|
.wizard-pf-main {
|
195
|
-
display: table-cell;
|
203
|
+
// display: table-cell;
|
204
|
+
height: 100%;
|
205
|
+
margin-left: 253px; /* this value is updated by js */
|
206
|
+
overflow: auto;
|
196
207
|
padding: 3em;
|
197
208
|
vertical-align: top;
|
198
|
-
width: 10000px;
|
209
|
+
// width: 10000px;
|
199
210
|
.blank-slate-pf {
|
200
211
|
background-color: transparent;
|
201
212
|
border: none;
|
@@ -322,10 +333,35 @@
|
|
322
333
|
/* styles the footer */
|
323
334
|
.wizard-pf-footer {
|
324
335
|
border-top: 1px solid $color-pf-black-300;
|
336
|
+
bottom: 0;
|
337
|
+
left: 0;
|
325
338
|
margin-top: 0;
|
326
339
|
padding-bottom: 17px;
|
340
|
+
position: absolute;
|
341
|
+
right: 0;
|
327
342
|
|
328
343
|
.btn-cancel {
|
329
344
|
margin-right:25px;
|
330
345
|
}
|
331
346
|
}
|
347
|
+
|
348
|
+
.wizard-pf-row {
|
349
|
+
bottom: 58px; /* this value is updated by js */
|
350
|
+
position: absolute;
|
351
|
+
overflow: hidden;
|
352
|
+
top: 172px; /* this value is updated by js */
|
353
|
+
width:100%;
|
354
|
+
}
|
355
|
+
|
356
|
+
// Scale up the modal
|
357
|
+
@media (min-width: $screen-md-min) {
|
358
|
+
// increasing space around modal for larger viewports
|
359
|
+
.wizard-pf {
|
360
|
+
padding: 30px 0;
|
361
|
+
width: 900px;
|
362
|
+
}
|
363
|
+
// increasing width of sidebar for larger viewports
|
364
|
+
.wizard-pf-sidebar .list-group-item > a {
|
365
|
+
width: 18em;
|
366
|
+
}
|
367
|
+
}
|
@@ -35,7 +35,7 @@
|
|
35
35
|
.bootstrap-datetimepicker-widget.dropdown-menu.bottom:before {
|
36
36
|
border-left: 7px solid transparent;
|
37
37
|
border-right: 7px solid transparent;
|
38
|
-
border-bottom: 7px solid #
|
38
|
+
border-bottom: 7px solid #ccc;
|
39
39
|
border-bottom-color: rgba(0, 0, 0, 0.2);
|
40
40
|
top: -7px;
|
41
41
|
left: 7px;
|
@@ -50,7 +50,7 @@
|
|
50
50
|
.bootstrap-datetimepicker-widget.dropdown-menu.top:before {
|
51
51
|
border-left: 7px solid transparent;
|
52
52
|
border-right: 7px solid transparent;
|
53
|
-
border-top: 7px solid #
|
53
|
+
border-top: 7px solid #ccc;
|
54
54
|
border-top-color: rgba(0, 0, 0, 0.2);
|
55
55
|
bottom: -7px;
|
56
56
|
left: 6px;
|
@@ -310,7 +310,7 @@
|
|
310
310
|
.bootstrap-datetimepicker-widget table td.active,
|
311
311
|
.bootstrap-datetimepicker-widget table td.active:hover {
|
312
312
|
background-color: #337ab7;
|
313
|
-
color: #
|
313
|
+
color: #fff;
|
314
314
|
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
|
315
315
|
}
|
316
316
|
.bootstrap-datetimepicker-widget table td.active.today:before {
|
@@ -336,7 +336,7 @@
|
|
336
336
|
}
|
337
337
|
.bootstrap-datetimepicker-widget table td span.active {
|
338
338
|
background-color: #337ab7;
|
339
|
-
color: #
|
339
|
+
color: #fff;
|
340
340
|
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
|
341
341
|
}
|
342
342
|
.bootstrap-datetimepicker-widget table td span.old {
|
data/bower.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "patternfly-sass",
|
3
|
-
"version": "3.
|
3
|
+
"version": "3.12.0",
|
4
4
|
"license": "Apache-2.0",
|
5
5
|
"homepage": "https://www.patternfly.org",
|
6
6
|
"authors": [
|
@@ -45,6 +45,6 @@
|
|
45
45
|
"matchHeight": "~0.7.0",
|
46
46
|
"eonasdan-bootstrap-datetimepicker": "~4.17.37",
|
47
47
|
"moment": "~2.14.1",
|
48
|
-
"patternfly-bootstrap-treeview": "~2.
|
48
|
+
"patternfly-bootstrap-treeview": "~2.1.0"
|
49
49
|
}
|
50
50
|
}
|
@@ -28,7 +28,7 @@
|
|
28
28
|
<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
|
29
29
|
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
|
30
30
|
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/bootstrap-select.min.js"></script>
|
31
|
-
<script src="//rawgit.com/patternfly/patternfly-bootstrap-treeview/
|
31
|
+
<script src="//rawgit.com/patternfly/patternfly-bootstrap-treeview/v2.1.0/dist/bootstrap-treeview.min.js"></script>
|
32
32
|
<script src="../../dist/js/patternfly.min.js"></script>
|
33
33
|
</head>
|
34
34
|
<div class="toast-notifications-list-pf">
|
@@ -27,7 +27,7 @@
|
|
27
27
|
<link rel="stylesheet" href="../../dist/css/patternfly-additions.min.css" >
|
28
28
|
<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
|
29
29
|
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
|
30
|
-
<script src="//rawgit.com/patternfly/patternfly-bootstrap-treeview/
|
30
|
+
<script src="//rawgit.com/patternfly/patternfly-bootstrap-treeview/v2.1.0/dist/bootstrap-treeview.min.js"></script>
|
31
31
|
<script src="../../dist/js/patternfly.min.js"></script>
|
32
32
|
</head>
|
33
33
|
|
@@ -93,11 +93,15 @@
|
|
93
93
|
<div id="treeview10"></div>
|
94
94
|
</div><!--/col-->
|
95
95
|
<div class="col-sm-4">
|
96
|
-
<h2>
|
97
|
-
<div id="
|
96
|
+
<h2>Hover and Select</h2>
|
97
|
+
<div id="treeview13" class="treeview-pf-hover treeview-pf-select"></div>
|
98
98
|
</div><!--/col-->
|
99
99
|
</div>
|
100
100
|
<div class="row">
|
101
|
+
<div class="col-sm-4">
|
102
|
+
<h2>Prevent Unselection</h2>
|
103
|
+
<div id="treeview11" class="treeview-pf-select"></div>
|
104
|
+
</div><!--/col-->
|
101
105
|
<div class="col-sm-4">
|
102
106
|
<h2>Disabled Nodes</h2>
|
103
107
|
<div id="treeview12"></div>
|
@@ -361,6 +365,15 @@
|
|
361
365
|
});
|
362
366
|
tree12.treeview('disableAll');
|
363
367
|
|
368
|
+
//Hover and Select
|
369
|
+
$('#treeview13').treeview({
|
370
|
+
collapseIcon: collapseIcon,
|
371
|
+
data: defaultData,
|
372
|
+
expandIcon: expandIcon,
|
373
|
+
nodeIcon: nodeIcon,
|
374
|
+
showBorder: false
|
375
|
+
});
|
376
|
+
|
364
377
|
});
|
365
378
|
</script>
|
366
379
|
|