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.
Files changed (33) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +1 -1
  3. data/assets/stylesheets/patternfly/_alerts.scss +20 -9
  4. data/assets/stylesheets/patternfly/_cards.scss +80 -2
  5. data/assets/stylesheets/patternfly/_ext-bootstrap-datepicker.scss +1 -1
  6. data/assets/stylesheets/patternfly/_ext-bootstrap-select.scss +19 -10
  7. data/assets/stylesheets/patternfly/_progress-bars.scss +46 -10
  8. data/assets/stylesheets/patternfly/_spinner.scss +19 -0
  9. data/assets/stylesheets/patternfly/_variables.scss +12 -7
  10. data/bower.json +2 -2
  11. data/lib/patternfly-sass/version.rb +2 -2
  12. data/package.json +1 -1
  13. data/patternfly-sass.gemspec +1 -1
  14. data/spec/html/alerts.html +1 -0
  15. data/spec/html/cards.html +659 -22
  16. data/spec/html/charts.html +11 -10
  17. data/spec/html/dist/css/patternfly-additions.css +95 -8
  18. data/spec/html/dist/css/patternfly-additions.css.map +1 -1
  19. data/spec/html/dist/css/patternfly-additions.min.css +1 -1
  20. data/spec/html/dist/css/patternfly-additions.min.css.map +1 -1
  21. data/spec/html/dist/css/patternfly.css +64 -19
  22. data/spec/html/dist/css/patternfly.css.map +1 -1
  23. data/spec/html/dist/css/patternfly.min.css +2 -2
  24. data/spec/html/dist/css/patternfly.min.css.map +1 -1
  25. data/spec/html/layout-alt-fixed-inner-scroll.html +659 -22
  26. data/spec/html/layout-alt-fixed-with-footer-inner-scroll.html +659 -22
  27. data/spec/html/layout-alt-fixed-with-footer.html +659 -22
  28. data/spec/html/layout-alt-fixed.html +659 -22
  29. data/spec/html/popovers.html +10 -9
  30. data/spec/html/progress-bars.html +61 -10
  31. data/spec/html/spinner.html +5 -0
  32. data/spec/html/tooltip.html +4 -3
  33. metadata +4 -4
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA1:
3
- metadata.gz: dd88f689013cf68ebe49033d1bab701e3b8ca780
4
- data.tar.gz: 7ae04f4eb8257b80ff110df2bc98021ae1c8bd71
3
+ metadata.gz: 1dd5f5f7e4792b9da5f557a71b00e8905116c327
4
+ data.tar.gz: 986607a3b2893727f83f0469c3272712700c42fe
5
5
  SHA512:
6
- metadata.gz: 27ff1639b9fa69557b2ec03593847938fb2c3e2088a8ab74520bfcf1fe74cdd22d7747b7efc5eacefe12d5f201980c045309c33ab070a2ef57097fc709dd07a4
7
- data.tar.gz: 83f7c3c874526b231bfffe7ae46b266da152c8e594c5a709be1c682061250966d9348f390bd92d20ef40ebafaa80bb0bfc857f9aad996023d91067808f0799d1
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.3.0'
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: 2px;
7
- padding-left: 34px;
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: 20px;
20
+ font-size: 22px;
20
21
  position: absolute;
21
- left: 7px;
22
- top: 7px;
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: #72767b;
33
+ color: #4d5258;
26
34
  }
27
35
  }
28
36
 
29
- .alert-dismissable .close {
30
- right: -16px;
31
- top: 1px;
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-title, .card-pf-aggregate-status-notifications {
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, .pficon {
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,5 +1,5 @@
1
1
  /*!
2
- * Datepicker for Bootstrap v1.4.0 (https://github.com/eternicode/bootstrap-datepicker)
2
+ * Datepicker for Bootstrap v1.4.1 (https://github.com/eternicode/bootstrap-datepicker)
3
3
  *
4
4
  * Copyright 2012 Stefan Petre
5
5
  * Improvements by Andrew Rowls
@@ -1,10 +1,10 @@
1
- /*!
2
- * Bootstrap-select v1.7.3 (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
-
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: 1036;
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, &.progress-label-top-right {
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, .progress-label-top-right & 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
- max-width: 25%;
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-left.progress-sm & span, .progress-label-top-right.progress-sm & span {
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: 74%;
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
- $panel-default-border-color: #bebdbd !default;
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: #ccc !default;
182
+ $alert-info-border: #8b8d8f !default;
178
183
  $alert-link-font-weight: 500 !default;
179
- $alert-padding: 7px !default;
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: $body-bg !default;
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: $body-bg !default;
250
+ $alert-info-bg: #f2f2f2 !default;
246
251
  $alert-info-text: $gray-dark !default;
247
- $alert-success-bg: $body-bg !default;
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: $body-bg !default;
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;