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.
Files changed (40) hide show
  1. checksums.yaml +4 -4
  2. data/assets/stylesheets/patternfly/_bootstrap-treeview.scss +28 -6
  3. data/assets/stylesheets/patternfly/_dropdowns.scss +11 -0
  4. data/assets/stylesheets/patternfly/_forms.scss +14 -0
  5. data/assets/stylesheets/patternfly/_list-view.scss +63 -0
  6. data/assets/stylesheets/patternfly/_toolbar.scss +11 -3
  7. data/assets/stylesheets/patternfly/_wizard.scss +44 -8
  8. data/assets/stylesheets/patternfly/lib/bootstrap-datetimepicker.scss +4 -4
  9. data/bower.json +2 -2
  10. data/lib/patternfly-sass/version.rb +2 -2
  11. data/spec/html/bootstrap-treeview-2.html +1 -1
  12. data/spec/html/bootstrap-treeview.html +16 -3
  13. data/spec/html/card-view-multi-select.html +6 -24
  14. data/spec/html/card-view-single-select.html +6 -24
  15. data/spec/html/cards.html +3 -0
  16. data/spec/html/dist/css/patternfly-additions.css +194 -118
  17. data/spec/html/dist/css/patternfly-additions.css.map +1 -1
  18. data/spec/html/dist/css/patternfly-additions.min.css +2 -2
  19. data/spec/html/dist/css/patternfly-additions.min.css.map +1 -1
  20. data/spec/html/dist/css/patternfly.css +20 -38
  21. data/spec/html/dist/css/patternfly.css.map +1 -1
  22. data/spec/html/dist/css/patternfly.min.css +2 -2
  23. data/spec/html/dist/css/patternfly.min.css.map +1 -1
  24. data/spec/html/forms.html +365 -226
  25. data/spec/html/horizontal-navigation.html +3 -0
  26. data/spec/html/index.html +6 -0
  27. data/spec/html/list-view-compound-expansion.html +1716 -0
  28. data/spec/html/list-view-rows.html +4 -0
  29. data/spec/html/list-view-simple-expansion.html +999 -0
  30. data/spec/html/list-view.html +6 -24
  31. data/spec/html/notification-drawer-horizontal-nav.html +3 -0
  32. data/spec/html/notification-drawer-vertical-nav.html +3 -0
  33. data/spec/html/toolbar.html +8 -11
  34. data/spec/html/vertical-navigation-primary-only.html +3 -0
  35. data/spec/html/vertical-navigation-with-badges.html +3 -0
  36. data/spec/html/vertical-navigation-with-secondary.html +3 -0
  37. data/spec/html/vertical-navigation-with-tertiary-no-icons.html +3 -0
  38. data/spec/html/vertical-navigation-with-tertiary-pins.html +3 -0
  39. data/spec/html/wizard.html +574 -318
  40. metadata +6 -2
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA1:
3
- metadata.gz: eff261dc3f4fedfedfb809d528ec7043ba4b1f4f
4
- data.tar.gz: d7c47c44493021b04e11fc83d21eafe527cc1d77
3
+ metadata.gz: 789aa9b7e858b5ab2198fcc13bcce5f62ea95314
4
+ data.tar.gz: 78c9c37750fddd9125e8ac6e1bf2d6f690f7292c
5
5
  SHA512:
6
- metadata.gz: 7a8ab47181b8270aa4ca5174b179aad50ee05660b5259aeafef401420a1e21557e60b992785bfb8ddd7d32db05d4c9becc0f9e1f0f5d2953cfd1048f8cf43da9
7
- data.tar.gz: 18a98cbb49d597f6f66f4c8e3c7fbd2aa12ed26b6f2d3c9dbff0620083aea13bcee2fa06e024b24867b45b67c974cc44c7c3cd18663f9c13e5262626d59ffc0b
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: $dropdown-link-hover-bg !important;
21
- border-color: $dropdown-link-hover-border-color !important;
20
+ background: none !important;
22
21
  }
23
22
  &.node-selected {
24
- background: $dropdown-link-active-bg !important;
25
- border-color: $dropdown-link-active-border-color !important;
26
- color: $dropdown-link-active-color !important;
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
- left: -200px;
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
- left: 215px;
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
- left: 216px;
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: relative;
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: 18em;
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 #cccccc;
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 #cccccc;
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: #ffffff;
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: #ffffff;
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.11.0",
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.0.0"
48
+ "patternfly-bootstrap-treeview": "~2.1.0"
49
49
  }
50
50
  }
@@ -1,4 +1,4 @@
1
1
  module Patternfly
2
- VERSION = '3.11.0'
3
- PATTERNFLY_SHA = '426ce331ebd13da52d2e8f0c75be4db6c1366236'
2
+ VERSION = '3.12.0'
3
+ PATTERNFLY_SHA = 'de1f20465eea2d8678f4134665e9ac494a5b81a1'
4
4
  end
@@ -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/v1.0.0/dist/bootstrap-treeview.min.js"></script>
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/patternfly/dist/bootstrap-treeview.min.js"></script>
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>Prevent Unselection</h2>
97
- <div id="treeview11"></div>
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