patternfly-sass 2.4.0 → 2.5.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/README.md +1 -1
- data/assets/stylesheets/patternfly/_alerts.scss +20 -9
- data/assets/stylesheets/patternfly/_cards.scss +80 -2
- data/assets/stylesheets/patternfly/_ext-bootstrap-datepicker.scss +1 -1
- data/assets/stylesheets/patternfly/_ext-bootstrap-select.scss +19 -10
- data/assets/stylesheets/patternfly/_progress-bars.scss +46 -10
- data/assets/stylesheets/patternfly/_spinner.scss +19 -0
- data/assets/stylesheets/patternfly/_variables.scss +12 -7
- data/bower.json +2 -2
- data/lib/patternfly-sass/version.rb +2 -2
- data/package.json +1 -1
- data/patternfly-sass.gemspec +1 -1
- data/spec/html/alerts.html +1 -0
- data/spec/html/cards.html +659 -22
- data/spec/html/charts.html +11 -10
- data/spec/html/dist/css/patternfly-additions.css +95 -8
- data/spec/html/dist/css/patternfly-additions.css.map +1 -1
- data/spec/html/dist/css/patternfly-additions.min.css +1 -1
- data/spec/html/dist/css/patternfly-additions.min.css.map +1 -1
- data/spec/html/dist/css/patternfly.css +64 -19
- 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/layout-alt-fixed-inner-scroll.html +659 -22
- data/spec/html/layout-alt-fixed-with-footer-inner-scroll.html +659 -22
- data/spec/html/layout-alt-fixed-with-footer.html +659 -22
- data/spec/html/layout-alt-fixed.html +659 -22
- data/spec/html/popovers.html +10 -9
- data/spec/html/progress-bars.html +61 -10
- data/spec/html/spinner.html +5 -0
- data/spec/html/tooltip.html +4 -3
- metadata +4 -4
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA1:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 1dd5f5f7e4792b9da5f557a71b00e8905116c327
|
4
|
+
data.tar.gz: 986607a3b2893727f83f0469c3272712700c42fe
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 4d48a43f7c51ca83a84ee67f379478c9ab47516125a63dde8787642a5f6a9bcd825e05e45d3f7920dd4c577c779bd6936b11a82ee3d4542658a2593c58b3f34b
|
7
|
+
data.tar.gz: 6196989cfe0b3c4123efb5f2d5f3436353a499563daed3eea5588f04195a4d6e774f032480919a32a10468fef7ed4e705c3ffdf84e4f29d321c18c5a7a3c1085
|
data/README.md
CHANGED
@@ -19,7 +19,7 @@ Please see the appropriate guide for your environment of choice:
|
|
19
19
|
In your Gemfile you need to add the `patternfly-sass` gem, and ensure that the `sass-rails` gem is present - it is added to new Rails applications by default.
|
20
20
|
|
21
21
|
```ruby
|
22
|
-
gem 'patternfly-sass', '~> 2.
|
22
|
+
gem 'patternfly-sass', '~> 2.5.0'
|
23
23
|
gem 'sass-rails', '>= 3.2'
|
24
24
|
```
|
25
25
|
|
@@ -3,8 +3,9 @@
|
|
3
3
|
// --------------------------------------------------
|
4
4
|
|
5
5
|
.alert {
|
6
|
-
border-width:
|
7
|
-
padding-left:
|
6
|
+
border-width: 1px;
|
7
|
+
padding-left: 47px;
|
8
|
+
padding-right: ($alert-padding + 3);
|
8
9
|
position: relative;
|
9
10
|
.alert-link {
|
10
11
|
color: $link-color;
|
@@ -16,17 +17,27 @@
|
|
16
17
|
margin-top: -3px;
|
17
18
|
}
|
18
19
|
> .pficon {
|
19
|
-
font-size:
|
20
|
+
font-size: 22px;
|
20
21
|
position: absolute;
|
21
|
-
left:
|
22
|
-
top:
|
22
|
+
left: 13px;
|
23
|
+
top: 10px;
|
24
|
+
}
|
25
|
+
.close {
|
26
|
+
@include opacity(.85);
|
27
|
+
&:hover,
|
28
|
+
&:focus {
|
29
|
+
@include opacity(1);
|
30
|
+
}
|
23
31
|
}
|
24
32
|
.pficon-info {
|
25
|
-
color: #
|
33
|
+
color: #4d5258;
|
26
34
|
}
|
27
35
|
}
|
28
36
|
|
29
|
-
.alert-dismissable
|
30
|
-
right: -
|
31
|
-
|
37
|
+
.alert-dismissable {
|
38
|
+
padding-right: ($alert-padding + 17);
|
39
|
+
.close {
|
40
|
+
right: -13px;
|
41
|
+
top: 1px;
|
42
|
+
}
|
32
43
|
}
|
@@ -12,7 +12,8 @@
|
|
12
12
|
border-top-color: $card-pf-accented-border-top-color;
|
13
13
|
}
|
14
14
|
&.card-pf-aggregate-status {
|
15
|
-
.card-pf-
|
15
|
+
.card-pf-aggregate-status-notifications,
|
16
|
+
.card-pf-title {
|
16
17
|
a {
|
17
18
|
color: $text-color;
|
18
19
|
&.add {
|
@@ -78,6 +79,9 @@
|
|
78
79
|
right: ($grid-gutter-width / 2);
|
79
80
|
top: 15px;
|
80
81
|
}
|
82
|
+
.card-pf-utilization .card-pf-title + & {
|
83
|
+
margin-top: -8px;
|
84
|
+
}
|
81
85
|
> *:last-child {
|
82
86
|
margin-bottom: 0;
|
83
87
|
}
|
@@ -89,16 +93,62 @@
|
|
89
93
|
margin: 0 (-($grid-gutter-width / 2)) !important;
|
90
94
|
padding: ($grid-gutter-width / 2) ($grid-gutter-width / 2) ($grid-gutter-width / 4);
|
91
95
|
a > {
|
92
|
-
.fa,
|
96
|
+
.fa,
|
97
|
+
.pficon {
|
93
98
|
margin-right: 5px;
|
94
99
|
}
|
95
100
|
}
|
101
|
+
.card-pf-time-frame-filter {
|
102
|
+
margin-top: -2px;
|
103
|
+
}
|
104
|
+
}
|
105
|
+
|
106
|
+
.card-pf-link-with-icon {
|
107
|
+
padding-left: 21px;
|
108
|
+
position: relative;
|
109
|
+
.fa,
|
110
|
+
.pficon {
|
111
|
+
font-size: 16px;
|
112
|
+
left: 0;
|
113
|
+
position: absolute;
|
114
|
+
top: 0;
|
115
|
+
}
|
116
|
+
}
|
117
|
+
|
118
|
+
.card-pf-time-frame-filter {
|
119
|
+
.card-pf-heading &,
|
120
|
+
.card-pf-footer & {
|
121
|
+
float: right;
|
122
|
+
margin-left: 20px;
|
123
|
+
}
|
96
124
|
}
|
97
125
|
|
98
126
|
.card-pf-heading {
|
99
127
|
border-bottom: 1px solid $card-pf-border-color;
|
100
128
|
margin: 0 (-($grid-gutter-width / 2)) ($grid-gutter-width / 2);
|
101
129
|
padding: 0 ($grid-gutter-width / 2) 0;
|
130
|
+
& .card-pf-time-frame-filter {
|
131
|
+
margin-top: -5px;
|
132
|
+
}
|
133
|
+
}
|
134
|
+
|
135
|
+
.card-pf-heading-details {
|
136
|
+
float: right;
|
137
|
+
font-size: ($font-size-small - 1);
|
138
|
+
}
|
139
|
+
|
140
|
+
.card-pf-subtitle {
|
141
|
+
font-size: $font-size-h3;
|
142
|
+
margin-top: $line-height-computed;
|
143
|
+
margin-bottom: ($line-height-computed / 2);
|
144
|
+
[class^='col'] & {
|
145
|
+
margin-top: 0;
|
146
|
+
}
|
147
|
+
@media (max-width: $screen-xs-max) {
|
148
|
+
.card-pf-body [class^='col'] + [class^='col'] > & {
|
149
|
+
margin-top: ($grid-gutter-width);
|
150
|
+
}
|
151
|
+
}
|
102
152
|
}
|
103
153
|
|
104
154
|
.card-pf-title {
|
@@ -143,6 +193,34 @@
|
|
143
193
|
}
|
144
194
|
}
|
145
195
|
|
196
|
+
.card-pf-utilization-details {
|
197
|
+
border-bottom: 1px solid $card-pf-border-color;
|
198
|
+
display: table;
|
199
|
+
margin: 12px 0 15px;
|
200
|
+
padding: 0 0 15px;
|
201
|
+
width: 100%;
|
202
|
+
.card-pf-utilization-card-details-count,
|
203
|
+
.card-pf-utilization-card-details-description {
|
204
|
+
display: table-cell;
|
205
|
+
float: left;
|
206
|
+
line-height: 1;
|
207
|
+
vertical-align: middle;
|
208
|
+
}
|
209
|
+
.card-pf-utilization-card-details-count {
|
210
|
+
font-size: ($font-size-base * 2 + 2); // 26px
|
211
|
+
font-weight: 300;
|
212
|
+
margin-right: 10px;
|
213
|
+
}
|
214
|
+
.card-pf-utilization-card-details-line-1,
|
215
|
+
.card-pf-utilization-card-details-line-2 {
|
216
|
+
display: block;
|
217
|
+
}
|
218
|
+
.card-pf-utilization-card-details-line-1 {
|
219
|
+
font-size: ($font-size-small - 1);
|
220
|
+
margin-bottom: 2px;
|
221
|
+
}
|
222
|
+
}
|
223
|
+
|
146
224
|
.cards-pf {
|
147
225
|
background: $card-pf-container-bg-color;
|
148
226
|
}
|
@@ -1,10 +1,10 @@
|
|
1
|
-
/*!
|
2
|
-
* Bootstrap-select v1.7.
|
3
|
-
*
|
4
|
-
* Copyright 2013-2015 bootstrap-select
|
5
|
-
* Licensed under MIT (https://github.com/silviomoreto/bootstrap-select/blob/master/LICENSE)
|
6
|
-
*/
|
7
|
-
|
1
|
+
/*!
|
2
|
+
* Bootstrap-select v1.7.5 (http://silviomoreto.github.io/bootstrap-select)
|
3
|
+
*
|
4
|
+
* Copyright 2013-2015 bootstrap-select
|
5
|
+
* Licensed under MIT (https://github.com/silviomoreto/bootstrap-select/blob/master/LICENSE)
|
6
|
+
*/
|
7
|
+
|
8
8
|
.bootstrap-select {
|
9
9
|
width: 220px \0;
|
10
10
|
/*IE9 and below*/
|
@@ -70,6 +70,12 @@
|
|
70
70
|
.bootstrap-select.btn-group > .disabled:focus {
|
71
71
|
outline: none !important;
|
72
72
|
}
|
73
|
+
.bootstrap-select.btn-group.bs-container {
|
74
|
+
position: absolute;
|
75
|
+
}
|
76
|
+
.bootstrap-select.btn-group.bs-container .dropdown-menu {
|
77
|
+
z-index: 1060;
|
78
|
+
}
|
73
79
|
.bootstrap-select.btn-group .dropdown-toggle .filter-option {
|
74
80
|
display: inline-block;
|
75
81
|
overflow: hidden;
|
@@ -88,7 +94,6 @@
|
|
88
94
|
}
|
89
95
|
.bootstrap-select.btn-group .dropdown-menu {
|
90
96
|
min-width: 100%;
|
91
|
-
z-index: 1035;
|
92
97
|
-webkit-box-sizing: border-box;
|
93
98
|
-moz-box-sizing: border-box;
|
94
99
|
box-sizing: border-box;
|
@@ -114,6 +119,10 @@
|
|
114
119
|
}
|
115
120
|
.bootstrap-select.btn-group .dropdown-menu li a {
|
116
121
|
cursor: pointer;
|
122
|
+
-webkit-user-select: none;
|
123
|
+
-moz-user-select: none;
|
124
|
+
-ms-user-select: none;
|
125
|
+
user-select: none;
|
117
126
|
}
|
118
127
|
.bootstrap-select.btn-group .dropdown-menu li a.opt {
|
119
128
|
position: relative;
|
@@ -169,7 +178,7 @@
|
|
169
178
|
margin-right: 34px;
|
170
179
|
}
|
171
180
|
.bootstrap-select.show-menu-arrow.open > .dropdown-toggle {
|
172
|
-
z-index:
|
181
|
+
z-index: 1061;
|
173
182
|
}
|
174
183
|
.bootstrap-select.show-menu-arrow .dropdown-toggle:before {
|
175
184
|
content: '';
|
@@ -221,7 +230,6 @@
|
|
221
230
|
padding: 4px 8px;
|
222
231
|
}
|
223
232
|
.bs-actionsbox {
|
224
|
-
float: left;
|
225
233
|
width: 100%;
|
226
234
|
-webkit-box-sizing: border-box;
|
227
235
|
-moz-box-sizing: border-box;
|
@@ -246,6 +254,7 @@
|
|
246
254
|
.bs-searchbox .form-control {
|
247
255
|
margin-bottom: 0;
|
248
256
|
width: 100%;
|
257
|
+
float: none;
|
249
258
|
}
|
250
259
|
select.bs-select-hidden,
|
251
260
|
select.selectpicker {
|
@@ -16,7 +16,8 @@
|
|
16
16
|
|
17
17
|
.progress {
|
18
18
|
@include box-shadow(inset 0 0 1px rgba(0, 0, 0, 0.25));
|
19
|
-
&.progress-label-left,
|
19
|
+
&.progress-label-left,
|
20
|
+
&.progress-label-top-right {
|
20
21
|
overflow: visible;
|
21
22
|
position: relative;
|
22
23
|
}
|
@@ -39,26 +40,40 @@
|
|
39
40
|
|
40
41
|
.progress-bar {
|
41
42
|
box-shadow: none;
|
42
|
-
.progress-label-left & span,
|
43
|
+
.progress-label-left & span,
|
44
|
+
.progress-label-right & span,
|
45
|
+
.progress-label-top-right & span {
|
43
46
|
color: $text-color;
|
44
|
-
font-size: $font-size-large;
|
45
47
|
position: absolute;
|
46
48
|
text-align: right;
|
47
49
|
}
|
48
50
|
.progress-label-left & span {
|
51
|
+
font-size: $font-size-large;
|
49
52
|
left: -40px;
|
50
53
|
top: 0;
|
51
54
|
width: 35px;
|
52
55
|
}
|
56
|
+
.progress-label-right & span,
|
53
57
|
.progress-label-top-right & span {
|
54
|
-
|
58
|
+
font-size: $font-size-small;
|
55
59
|
overflow: hidden;
|
56
60
|
right: 0;
|
57
61
|
text-overflow: ellipsis;
|
58
|
-
top: -($line-height-computed*1.5+1);
|
59
62
|
white-space: nowrap;
|
63
|
+
strong {
|
64
|
+
font-weight: 600;
|
65
|
+
}
|
66
|
+
}
|
67
|
+
.progress-label-right & span {
|
68
|
+
max-width: $progress-description-label-width;
|
69
|
+
top: 0;
|
60
70
|
}
|
61
|
-
.progress-label-
|
71
|
+
.progress-label-top-right & span {
|
72
|
+
max-width: 47%;
|
73
|
+
top: (-($line-height-computed * 1.5)); // -30px
|
74
|
+
}
|
75
|
+
.progress-label-left.progress-sm & span,
|
76
|
+
.progress-label-top-right.progress-sm & span {
|
62
77
|
font-size: $font-size-base;
|
63
78
|
}
|
64
79
|
.progress-sm & {
|
@@ -69,14 +84,28 @@
|
|
69
84
|
}
|
70
85
|
}
|
71
86
|
|
87
|
+
.progress-bar-remaining {
|
88
|
+
background: transparent;
|
89
|
+
}
|
90
|
+
|
91
|
+
.progress-container {
|
92
|
+
position: relative;
|
93
|
+
&.progress-description-left {
|
94
|
+
padding-left :($progress-description-label-width + 5);
|
95
|
+
}
|
96
|
+
&.progress-label-right {
|
97
|
+
padding-right :($progress-description-label-width + 5);
|
98
|
+
}
|
99
|
+
}
|
100
|
+
|
72
101
|
.progress-description {
|
73
|
-
margin-bottom: $line-height-computed/2;
|
74
|
-
max-width:
|
102
|
+
margin-bottom: ($line-height-computed / 2); // 10px
|
103
|
+
max-width: 52%;
|
75
104
|
overflow: hidden;
|
76
105
|
text-overflow: ellipsis;
|
77
106
|
white-space: nowrap;
|
78
107
|
.count {
|
79
|
-
font-size: $font-size-base*1.667;
|
108
|
+
font-size: ($font-size-base * 1.667); // 20px
|
80
109
|
font-weight: 300;
|
81
110
|
line-height: 1;
|
82
111
|
margin-right: 5px;
|
@@ -85,7 +114,14 @@
|
|
85
114
|
font-size: 14px;
|
86
115
|
margin-right: 3px;
|
87
116
|
}
|
117
|
+
.progress-description-left & {
|
118
|
+
left: 0;
|
119
|
+
margin-bottom: 0;
|
120
|
+
max-width: $progress-description-label-width;
|
121
|
+
position: absolute;
|
122
|
+
top: 0;
|
123
|
+
}
|
88
124
|
.tooltip {
|
89
125
|
white-space: normal;
|
90
126
|
}
|
91
|
-
}
|
127
|
+
}
|
@@ -43,11 +43,29 @@
|
|
43
43
|
height: $font-size-base;
|
44
44
|
width: $font-size-base;
|
45
45
|
}
|
46
|
+
&.spinner-inverse {
|
47
|
+
border-bottom-color: rgba(255, 255, 255, 0.25);
|
48
|
+
border-left-color: rgba(255, 255, 255, 0.25);
|
49
|
+
border-right-color: rgba(255, 255, 255, 0.25);
|
50
|
+
border-top-color: rgba(255, 255, 255, 0.75);
|
51
|
+
}
|
46
52
|
}
|
47
53
|
|
48
54
|
.ie9 .spinner {
|
49
55
|
background: url("#{$img-path}/#{$img-spinner}") no-repeat;
|
50
56
|
border: 0;
|
57
|
+
&.spinner-inverse {
|
58
|
+
background-image: url("#{$img-path}/#{$img-spinner-inverse}");
|
59
|
+
}
|
60
|
+
&.spinner-inverse-lg {
|
61
|
+
background-image: url("#{$img-path}/#{$img-spinner-inverse-lg}");
|
62
|
+
}
|
63
|
+
&.spinner-inverse-sm {
|
64
|
+
background-image: url("#{$img-path}/#{$img-spinner-inverse-sm}");
|
65
|
+
}
|
66
|
+
&.spinner-inverse-xs {
|
67
|
+
background-image: url("#{$img-path}/#{$img-spinner-inverse-xs}");
|
68
|
+
}
|
51
69
|
&.spinner-lg {
|
52
70
|
background-image: url("#{$img-path}/#{$img-spinner-lg}");
|
53
71
|
}
|
@@ -58,3 +76,4 @@
|
|
58
76
|
background-image: url("#{$img-path}/#{$img-spinner-xs}");
|
59
77
|
}
|
60
78
|
}
|
79
|
+
|
@@ -37,6 +37,10 @@ $icon-prefix: pficon !defa
|
|
37
37
|
$img-bg-login: "bg-login.jpg" !default;
|
38
38
|
$img-path: if($patternfly-sass-asset-helper, "patternfly", "../images/patternfly") !default;
|
39
39
|
$img-spinner: "spinner.gif" !default;
|
40
|
+
$img-spinner-inverse: "spinner-inverse.gif" !default;
|
41
|
+
$img-spinner-inverse-lg: "spinner-inverse-lg.gif" !default;
|
42
|
+
$img-spinner-inverse-sm: "spinner-inverse-sm.gif" !default;
|
43
|
+
$img-spinner-inverse-xs: "spinner-inverse-xs.gif" !default;
|
40
44
|
$img-spinner-lg: "spinner-lg.gif" !default;
|
41
45
|
$img-spinner-sm: "spinner-sm.gif" !default;
|
42
46
|
$img-spinner-xs: "spinner-xs.gif" !default;
|
@@ -85,6 +89,7 @@ $navbar-pf-navbar-navbar-brand-padding: 8px 0 7px !d
|
|
85
89
|
$navbar-pf-navbar-navbar-persistent-bg-color: #f6f6f6 !default;
|
86
90
|
$navbar-pf-navbar-navbar-persistent-border-color: #cecdcd !default;
|
87
91
|
$pagination-padding-small-vertical: 0 !default;
|
92
|
+
$panel-default-border-color: #bebdbd !default;
|
88
93
|
$pficon-var-add-circle-o: "\e61b" !default;
|
89
94
|
$pficon-var-builder-image: "\e800" !default;
|
90
95
|
$pficon-var-close: "\e60b" !default;
|
@@ -122,7 +127,7 @@ $pficon-var-topology: "\e608" !def
|
|
122
127
|
$pficon-var-user: "\e60e" !default;
|
123
128
|
$pficon-var-users: "\e60f" !default;
|
124
129
|
$pficon-var-warning-triangle-o: "\e61c" !default;
|
125
|
-
$
|
130
|
+
$progress-description-label-width: 85px !default;
|
126
131
|
$sidebar-pf-bg: #fafafa !default;
|
127
132
|
$sidebar-pf-border-color: #d0d0d0 !default;
|
128
133
|
$table-border-hover: #a7cadf !default;
|
@@ -174,9 +179,9 @@ $navbar-pf-navbar-primary-context-active-border-right-color: $navbar-pf-n
|
|
174
179
|
|
175
180
|
// Bootstrap overrides
|
176
181
|
// -------------------
|
177
|
-
$alert-info-border: #
|
182
|
+
$alert-info-border: #8b8d8f !default;
|
178
183
|
$alert-link-font-weight: 500 !default;
|
179
|
-
$alert-padding:
|
184
|
+
$alert-padding: 11px !default;
|
180
185
|
$body-bg: #ffffff !default;
|
181
186
|
$border-radius-base: 1px !default;
|
182
187
|
$brand-danger: #cc0000 !default;
|
@@ -239,15 +244,15 @@ $tooltip-arrow-width: 8px !default
|
|
239
244
|
$tooltip-bg: #434343 !default;
|
240
245
|
$tooltip-max-width: 220px !default;
|
241
246
|
// Reference variables declared in block above
|
242
|
-
$alert-danger-bg:
|
247
|
+
$alert-danger-bg: #fbe7e7 !default;
|
243
248
|
$alert-danger-border: $brand-danger !default;
|
244
249
|
$alert-danger-text: $gray-dark !default;
|
245
|
-
$alert-info-bg:
|
250
|
+
$alert-info-bg: #f2f2f2 !default;
|
246
251
|
$alert-info-text: $gray-dark !default;
|
247
|
-
$alert-success-bg:
|
252
|
+
$alert-success-bg: #e8f9e7 !default;
|
248
253
|
$alert-success-border: $brand-success !default;
|
249
254
|
$alert-success-text: $gray-dark !default;
|
250
|
-
$alert-warning-bg:
|
255
|
+
$alert-warning-bg: #fdf4ea !default;
|
251
256
|
$alert-warning-border: $brand-warning !default;
|
252
257
|
$alert-warning-text: $gray-dark !default;
|
253
258
|
$badge-border-radius: $border-radius-base !default;
|