patternfly-sass 2.1.0 → 2.2.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (36) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +1 -1
  3. data/assets/fonts/patternfly/PatternFlyIcons-webfont.eot +0 -0
  4. data/assets/fonts/patternfly/PatternFlyIcons-webfont.svg +4 -2
  5. data/assets/fonts/patternfly/PatternFlyIcons-webfont.ttf +0 -0
  6. data/assets/fonts/patternfly/PatternFlyIcons-webfont.woff +0 -0
  7. data/assets/javascripts/patternfly.js +120 -0
  8. data/assets/javascripts/patternfly.min.js +1 -1
  9. data/assets/stylesheets/_patternfly.scss +5 -0
  10. data/assets/stylesheets/patternfly/_bootstrap-datepicker.scss +28 -1
  11. data/assets/stylesheets/patternfly/_footer.scss +19 -0
  12. data/assets/stylesheets/patternfly/_icons.scss +6 -0
  13. data/assets/stylesheets/patternfly/_layouts.scss +45 -0
  14. data/assets/stylesheets/patternfly/_nav-vertical-alt.scss +166 -0
  15. data/assets/stylesheets/patternfly/_navbar-alt.scss +128 -0
  16. data/assets/stylesheets/patternfly/_toolbar.scss +62 -0
  17. data/assets/stylesheets/patternfly/_variables.scss +35 -0
  18. data/bower.json +1 -1
  19. data/lib/patternfly-sass/version.rb +2 -2
  20. data/spec/compare_spec.rb +9 -20
  21. data/spec/html/bootstrap-datepicker.html +26 -0
  22. data/spec/html/dist/css/patternfly-additions.css +411 -9
  23. data/spec/html/dist/css/patternfly-additions.css.map +1 -1
  24. data/spec/html/dist/css/patternfly-additions.min.css +1 -1
  25. data/spec/html/dist/css/patternfly-additions.min.css.map +1 -1
  26. data/spec/html/dist/css/patternfly.css.map +1 -1
  27. data/spec/html/dist/css/patternfly.min.css.map +1 -1
  28. data/spec/html/icons.html +12 -0
  29. data/spec/html/index.html +20 -0
  30. data/spec/html/layout-alt-fixed-inner-scroll.html +350 -0
  31. data/spec/html/layout-alt-fixed-with-footer-inner-scroll.html +354 -0
  32. data/spec/html/layout-alt-fixed-with-footer.html +354 -0
  33. data/spec/html/layout-alt-fixed.html +350 -0
  34. data/spec/html/toolbar.html +190 -0
  35. metadata +17 -3
  36. data/TODO.md +0 -13
@@ -0,0 +1,128 @@
1
+ //
2
+ // Navbar Alt
3
+ // --------------------------------------------------
4
+
5
+ .navbar-pf-alt {
6
+ background-color: $navbar-pf-alt-bg-color;
7
+ background-image: $navbar-pf-alt-bg-img;
8
+ background-repeat: $navbar-pf-alt-bg-repeat;
9
+ background-size: $navbar-pf-alt-bg-size;
10
+ border: none;
11
+ border-radius: 0;
12
+ border-top: $navbar-pf-alt-border-width $navbar-pf-alt-border-style $navbar-pf-alt-border-color;
13
+ margin-bottom: 0;
14
+
15
+ .infotip.bottom-right .arrow {
16
+ left: 90%;
17
+ }
18
+
19
+ .layout-pf-alt-fixed & {
20
+ left: 0;
21
+ position: fixed;
22
+ right: 0;
23
+ top: 0;
24
+ z-index: $zindex-navbar-fixed;
25
+ }
26
+
27
+ .nav {
28
+ &.navbar-nav > li > .dropdown-menu.infotip {
29
+ margin-top: 0;
30
+ }
31
+
32
+ .nav-item-iconic {
33
+ cursor: pointer;
34
+ line-height: 1;
35
+ max-height: ($navbar-pf-alt-height - $navbar-pf-alt-border-width); // to keep Firefox from oversizing icons
36
+ padding: $navbar-pf-alt-nav-item-iconic-padding;
37
+ position: relative;
38
+
39
+ &:hover, &:focus {
40
+ background-color: transparent;
41
+
42
+ .caret, .fa, .glyphicon, .pf-icon {
43
+ color: $navbar-pf-alt-active-color;
44
+ }
45
+ }
46
+
47
+ .badge {
48
+ background-color: $notification-badge-color;
49
+ border-radius: 20px;
50
+ color: $navbar-pf-alt-active-color;
51
+ cursor: pointer;
52
+ font-size: $font-size-base - 3;
53
+ font-weight: 700;
54
+ margin: 0 0 -11px -12px;
55
+ min-width: 0;
56
+ padding: 2px 4px;
57
+ }
58
+
59
+ .caret, .fa, .pf-icon {
60
+ color: $navbar-pf-alt-color;
61
+ font-size: $font-size-base + 4;
62
+ }
63
+
64
+ .caret {
65
+ font-size: $font-size-base;
66
+ width: auto;
67
+ }
68
+
69
+ }
70
+
71
+ .open > .nav-item-iconic {
72
+ &, &:hover, &:focus {
73
+ background: transparent;
74
+
75
+ .caret, .fa, .pf-icon {
76
+ color: $navbar-pf-alt-active-color;
77
+ }
78
+ }
79
+ }
80
+ }
81
+
82
+ .navbar-brand {
83
+ color: $navbar-pf-alt-navbar-brand-color;
84
+ height: auto;
85
+ margin: $navbar-pf-alt-navbar-brand-margin;
86
+ min-height: $navbar-pf-alt-navbar-brand-min-height;
87
+ padding: $navbar-pf-alt-navbar-brand-padding;
88
+
89
+ .navbar-brand-name {
90
+ display: inline;
91
+ margin: $navbar-pf-alt-navbar-brand-name-margin;
92
+ // hide once screen gets too small
93
+ @media (max-width: $navbar-pf-alt-navbar-brand-name-breakpoint) {
94
+ display: none;
95
+ }
96
+ }
97
+
98
+ .navbar-brand-icon {
99
+ display: inline;
100
+ margin: $navbar-pf-alt-navbar-brand-icon-margin;
101
+ }
102
+ }
103
+
104
+ .navbar-iconic {
105
+ margin-right: 0;
106
+ }
107
+
108
+ .navbar-toggle {
109
+ border: 0;
110
+ display: block;
111
+ float: left;
112
+ margin: $navbar-pf-alt-navbar-toggle-margin;
113
+
114
+ &:hover, &:focus {
115
+ .icon-bar {
116
+ background: $navbar-pf-alt-navbar-toggle-icon-bar-hover-bg;
117
+ }
118
+ }
119
+
120
+ + .navbar-brand {
121
+ margin-left: 0;
122
+ }
123
+
124
+ .icon-bar {
125
+ background: $navbar-pf-alt-color;
126
+ }
127
+ }
128
+ }
@@ -0,0 +1,62 @@
1
+ //
2
+ // Toolbar (Filter and view options)
3
+ // --------------------------------------------------
4
+
5
+ .toolbar-pf {
6
+ background: #fff;
7
+ border-bottom: 1px solid $sidebar-pf-border-color;
8
+ box-shadow: 0 1px 0px rgba(0,0,0,0.045);
9
+ padding-top: $grid-gutter-width/4;
10
+ .form-group {
11
+ margin-bottom: 0;
12
+ width: 200px;
13
+ @media (min-width: $screen-sm-min){
14
+ width: 300px;
15
+ }
16
+ }
17
+ }
18
+ .toolbar-pf-results {
19
+ border-top: 1px solid $sidebar-pf-border-color;
20
+ margin-top: $grid-gutter-width/4;
21
+ h5, p, ul {
22
+ display: inline-block;
23
+ line-height: $grid-gutter-width/1.5;
24
+ margin-bottom: 0;
25
+ margin-top: 0;
26
+ @media (min-width: $screen-sm-min){
27
+ line-height: $grid-gutter-width;
28
+ }
29
+ }
30
+ h5 {
31
+ font-weight: 700;
32
+ margin-right: 20px;
33
+ }
34
+ .label {
35
+ font-size: $font-size-base - 1;
36
+ a {
37
+ color: #fff;
38
+ display: inline-block;
39
+ margin-left: 5px;
40
+ }
41
+ }
42
+ .list-inline {
43
+ margin: 0 10px 0 5px;
44
+ li {
45
+ padding-left: 0;
46
+ padding-right: 0;
47
+ }
48
+ }
49
+ }
50
+ .toolbar-pf-view-selector {
51
+ font-size: $font-size-base + 4;
52
+ .active a {
53
+ color: $link-color;
54
+ cursor: default;
55
+ }
56
+ a {
57
+ color: $gray-darker;
58
+ &:hover{
59
+ color: $link-color;
60
+ }
61
+ }
62
+ }
@@ -20,8 +20,13 @@ $dropdown-divider-margin: 4px 1px !def
20
20
  $dropdown-link-active-border-color: #0076b7 !default;
21
21
  $dropdown-link-hover-border-color: #b3d3e7 !default;
22
22
  $dropdown-link-focus-color: #fff !default;
23
+ $flyout-transition-pf: all .2s cubic-bezier(.35,0,.25,1) !default;
23
24
  $font-family-monospace: Menlo, Monaco, Consolas, monospace !default;
24
25
  $font-path: if($patternfly-sass-asset-helper, "patternfly", "../fonts/patternfly") !default;
26
+ $footer-pf-alt-bg-color: #030303 !default;
27
+ $footer-pf-alt-padding-left: 25px !default;
28
+ $footer-pf-alt-padding-top: 10px !default;
29
+ $footer-pf-alt-height: 37px !default;
25
30
  $gray-light-pf: #aaa !default;
26
31
  $gray-pf: #4d5258 !default;
27
32
  $icon-font-name-fa: "FontAwesome" !default;
@@ -41,10 +46,37 @@ $login-container-bg-color: #181818 !def
41
46
  $login-container-bg-color-rgba: rgba(255, 255, 255, 0.055) !default;
42
47
  $modal-title-padding-horizontal: 18px !default;
43
48
  $modal-title-padding-vertical: 10px !default;
49
+ $nav-pf-vertical-alt-active-color: #39a5dc !default;
50
+ $nav-pf-vertical-alt-bg-color: #fff !default;
51
+ $nav-pf-vertical-alt-badge-color: #fff !default;
52
+ $nav-pf-vertical-alt-collapsed-width: 75px !default;
53
+ $nav-pf-vertical-alt-color: #464952 !default;
54
+ $nav-pf-vertical-alt-link-height: 63px !default;
55
+ $nav-pf-vertical-alt-link-padding: 17px 20px 17px 25px !default;
56
+ $nav-pf-vertical-alt-width: 250px !default;
44
57
  $navbar-pf-active-color: #f1f1f1 !default;
45
58
  $navbar-pf-bg-color: #030303 !default; //#393F45
46
59
  $navbar-pf-border-color: #199dde !default;
47
60
  $navbar-pf-color: #cfcfcf !default;
61
+ $navbar-pf-alt-active-color: #fff !default;
62
+ $navbar-pf-alt-bg-color: #030303 !default;
63
+ $navbar-pf-alt-bg-img: url("../img/bg-navbar-pf-alt.svg") !default;
64
+ $navbar-pf-alt-bg-repeat: no-repeat !default;
65
+ $navbar-pf-alt-bg-size: auto 100% !default;
66
+ $navbar-pf-alt-border-style: solid !default;
67
+ $navbar-pf-alt-border-width: 2px !default;
68
+ $navbar-pf-alt-color: #cfcfcf !default;
69
+ $navbar-pf-alt-height: 60px !default;
70
+ $navbar-pf-alt-nav-item-iconic-padding: 21px 12px !default;
71
+ $navbar-pf-alt-navbar-brand-color: #fff !default;
72
+ $navbar-pf-alt-navbar-brand-icon-margin: 0 15px 0 0 !default;
73
+ $navbar-pf-alt-navbar-brand-margin: 0 0 0 25px !default;
74
+ $navbar-pf-alt-navbar-brand-min-height: 35px !default;
75
+ $navbar-pf-alt-navbar-brand-name-breakpoint: 480px !default;
76
+ $navbar-pf-alt-navbar-brand-name-margin: 0 15px 0 0 !default;
77
+ $navbar-pf-alt-navbar-brand-padding: 11px 0 12px !default;
78
+ $navbar-pf-alt-navbar-toggle-margin: 13px 15px !default;
79
+ $navbar-pf-alt-navbar-toggle-icon-bar-hover-bg: #fff !default;
48
80
  $navbar-pf-icon-bar-bg-color: #fff !default;
49
81
  $navbar-pf-navbar-navbar-brand-min-width: 270px !default;
50
82
  $navbar-pf-navbar-navbar-brand-padding: 8px 0 7px !default;
@@ -59,6 +91,8 @@ $table-cell-padding-bottom: 3px !default
59
91
  $table-cell-padding-top: 2px !default;
60
92
  // Reference variables declared in block above
61
93
  $img-path-alt: $img-path !default;
94
+ $nav-pf-vertical-alt-border-color: $sidebar-pf-border-color !default;
95
+ $navbar-pf-alt-border-color: $navbar-pf-border-color !default;
62
96
  $navbar-pf-navbar-header-border-color: lighten($navbar-pf-bg-color, 15%) !default;
63
97
  $navbar-pf-navbar-nav-active-active-bg-color: lighten($navbar-pf-bg-color, 8%) !default;
64
98
  $navbar-pf-navbar-nav-active-active-open-bg-color: lighten($navbar-pf-bg-color, 11%) !default;
@@ -221,6 +255,7 @@ $btn-primary-bg-img-start: $brand-prima
221
255
  $btn-primary-bg-img-stop: $btn-primary-bg !default;
222
256
  $dropdown-link-focus-bg: $link-color !default;
223
257
  $line-height-computed: floor(($font-size-base * $line-height-base)) !default;
258
+ $notification-badge-color: $brand-danger !default;
224
259
  $progress-sm: $line-height-computed - 6 !default;
225
260
  $progress-xs: $line-height-computed - 14 !default;
226
261
  $syntax-1: $btn-danger-bg !default;
data/bower.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "patternfly-sass",
3
- "version": "2.1.0",
3
+ "version": "2.2.0",
4
4
  "license": "Apache-2.0",
5
5
  "homepage": "https://www.patternfly.org",
6
6
  "authors": [
@@ -1,4 +1,4 @@
1
1
  module Patternfly
2
- VERSION = '2.1.0'
3
- PATTERNFLY_SHA = 'a1d30bc68f1fdf320ea9c16bf6b2b4cc050ac8a8'
2
+ VERSION = '2.2.0'
3
+ PATTERNFLY_SHA = '9e8a54f9b81397d52bad7521afc2aaee1e97630f'
4
4
  end
@@ -1,7 +1,6 @@
1
- require 'net/http'
1
+ require 'selenium-webdriver'
2
2
  require 'nokogiri'
3
3
  require 'rmagick'
4
- require 'selenium-webdriver'
5
4
 
6
5
  RSpec.describe "compare SASS with LESS screenshots" do
7
6
  BASEURL = "http://localhost:9000"
@@ -9,18 +8,10 @@ RSpec.describe "compare SASS with LESS screenshots" do
9
8
  CONTEXTS = %w(less sass)
10
9
  TOLERANCE = ENV['TOLERANCE'].to_f || 0.00
11
10
 
12
- puts "Starting tests with TOLERANCE=#{TOLERANCE}"
13
-
14
- driver = Selenium::WebDriver.for(:firefox)
11
+ before(:all) { @browser = Selenium::WebDriver.for(:firefox) }
15
12
 
16
- # Give some time for the testing server to start
17
- html = nil
18
- 5.times do |t|
19
- html = Net::HTTP.get(URI("#{BASEURL}/less/patternfly/index.html")) rescue nil
20
- break unless html.nil?
21
- sleep(t + 1)
22
- end
23
- raise Errno::ECONNREFUSED if html.nil?
13
+ puts "Starting tests with TOLERANCE=#{TOLERANCE}"
14
+ html = File.read('spec/html/index.html')
24
15
  document = Nokogiri::HTML(html)
25
16
 
26
17
  document.css(".row a").each do |link|
@@ -29,16 +20,16 @@ RSpec.describe "compare SASS with LESS screenshots" do
29
20
  title = file.sub('.html', '')
30
21
  RESOLUTIONS.each do |w, h|
31
22
  it "#{w}x#{h}" do
32
- driver.manage.window.resize_to(w, h)
23
+ @browser.manage.window.resize_to(w, h)
33
24
  CONTEXTS.each do |ctx|
34
- driver.navigate.to("#{BASEURL}/#{ctx}/patternfly/#{file}")
35
- driver.execute_script("
25
+ @browser.navigate.to("#{BASEURL}/#{ctx}/patternfly/#{file}")
26
+ @browser.execute_script("
36
27
  var style = document.createElement('style');
37
28
  style.innerHTML = '* { -moz-animation: none !important; -moz-transition: none !important;';
38
29
  document.body.appendChild(style);
39
30
  ")
40
31
  sleep(1)
41
- driver.save_screenshot("spec/results/#{ctx}/#{title}-#{w}x#{h}.png")
32
+ @browser.save_screenshot("spec/results/#{ctx}/#{title}-#{w}x#{h}.png")
42
33
  end
43
34
  img_less = Magick::Image.read("spec/results/less/#{title}-#{w}x#{h}.png").first
44
35
  img_sass = Magick::Image.read("spec/results/sass/#{title}-#{w}x#{h}.png").first
@@ -61,7 +52,5 @@ RSpec.describe "compare SASS with LESS screenshots" do
61
52
  end
62
53
  end
63
54
 
64
- after(:all) do
65
- driver.quit
66
- end
55
+ after(:all) { @browser.quit }
67
56
  end
@@ -55,6 +55,19 @@
55
55
  <span class="input-group-addon">to</span>
56
56
  <input type="text" class="form-control bootstrap-datepicker" name="end" readonly>
57
57
  </div>
58
+ <h3>Validation States</h3>
59
+ <div class="form-group has-success">
60
+ <label class="control-label" for="boostrap-datepicker-success-readonly">With success</label>
61
+ <input type="text" class="form-control bootstrap-datepicker" id="boostrap-datepicker-success-readonly" readonly>
62
+ </div>
63
+ <div class="form-group has-warning">
64
+ <label class="control-label" for="boostrap-datepicker-warning-readonly">With warning</label>
65
+ <input type="text" class="form-control bootstrap-datepicker" id="boostrap-datepicker-warning-readonly" readonly>
66
+ </div>
67
+ <div class="form-group has-error">
68
+ <label class="control-label" for="boostrap-datepicker-error-readonly">With error</label>
69
+ <input type="text" class="form-control bootstrap-datepicker" id="boostrap-datepicker-error-readonly" readonly>
70
+ </div>
58
71
  <hr>
59
72
  <h2>Normal Inputs</h2>
60
73
  <p><span class="text-warning">Not recommended.</span> For comparison only.</p>
@@ -72,6 +85,19 @@
72
85
  <span class="input-group-addon">to</span>
73
86
  <input type="text" class="form-control bootstrap-datepicker" name="end">
74
87
  </div>
88
+ <h3>Validation States</h3>
89
+ <div class="form-group has-success">
90
+ <label class="control-label" for="boostrap-datepicker-success">With success</label>
91
+ <input type="text" class="form-control bootstrap-datepicker" id="boostrap-datepicker-success">
92
+ </div>
93
+ <div class="form-group has-warning">
94
+ <label class="control-label" for="boostrap-datepicker-warning">With warning</label>
95
+ <input type="text" class="form-control bootstrap-datepicker" id="boostrap-datepicker-warning">
96
+ </div>
97
+ <div class="form-group has-error">
98
+ <label class="control-label" for="boostrap-datepicker-error">With error</label>
99
+ <input type="text" class="form-control bootstrap-datepicker" id="boostrap-datepicker-error">
100
+ </div>
75
101
  <script>
76
102
  // Initialize Boostrap-Datepicker
77
103
  $('.bootstrap-datepicker, .input-group.date, .bootstrap-datepicker-inline').datepicker({
@@ -1663,31 +1663,58 @@ fieldset[disabled] .combobox-container .input-group-addon.active {
1663
1663
  -webkit-box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.2);
1664
1664
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.2);
1665
1665
  }
1666
- .bootstrap-datepicker[readonly] {
1666
+ .bootstrap-datepicker.form-control[readonly] {
1667
1667
  background-color: #ffffff;
1668
1668
  border-color: #bababa !important;
1669
1669
  color: #333333;
1670
1670
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
1671
1671
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
1672
1672
  }
1673
- .bootstrap-datepicker[readonly]:focus {
1673
+ .bootstrap-datepicker.form-control[readonly]:focus {
1674
+ border-color: #66afe9;
1675
+ outline: 0;
1676
+ -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
1677
+ box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
1678
+ }
1679
+ .bootstrap-datepicker.form-control[readonly]:focus {
1674
1680
  border-color: #66afe9 !important;
1675
- outline: 0 !important;
1676
- -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6) !important;
1677
- box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6) !important;
1678
1681
  }
1679
- .bootstrap-datepicker[readonly]:hover {
1682
+ .has-error .bootstrap-datepicker.form-control[readonly]:focus {
1683
+ border-color: #843534;
1684
+ -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ce8483;
1685
+ box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ce8483;
1686
+ }
1687
+ .has-success .bootstrap-datepicker.form-control[readonly]:focus {
1688
+ border-color: #2b542c;
1689
+ -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #67b168;
1690
+ box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #67b168;
1691
+ }
1692
+ .has-warning .bootstrap-datepicker.form-control[readonly]:focus {
1693
+ border-color: #bb6106;
1694
+ -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #faad60;
1695
+ box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #faad60;
1696
+ }
1697
+ .bootstrap-datepicker.form-control[readonly]:hover {
1680
1698
  border-color: #7bb2dd !important;
1681
1699
  }
1682
- .has-error .bootstrap-datepicker[readonly]:hover {
1700
+ .has-error .bootstrap-datepicker.form-control[readonly]:hover {
1683
1701
  border-color: #843534 !important;
1684
1702
  }
1685
- .has-success .bootstrap-datepicker[readonly]:hover {
1703
+ .has-success .bootstrap-datepicker.form-control[readonly]:hover {
1686
1704
  border-color: #2b542c !important;
1687
1705
  }
1688
- .has-warning .bootstrap-datepicker[readonly]:hover {
1706
+ .has-warning .bootstrap-datepicker.form-control[readonly]:hover {
1689
1707
  border-color: #bb6106 !important;
1690
1708
  }
1709
+ .has-error .bootstrap-datepicker.form-control[readonly] {
1710
+ border-color: #a94442 !important;
1711
+ }
1712
+ .has-success .bootstrap-datepicker.form-control[readonly] {
1713
+ border-color: #3c763d !important;
1714
+ }
1715
+ .has-warning .bootstrap-datepicker.form-control[readonly] {
1716
+ border-color: #ec7a08 !important;
1717
+ }
1691
1718
  .datepicker {
1692
1719
  border-radius: 1px;
1693
1720
  }
@@ -2279,6 +2306,21 @@ table.datatable thead .sorting_asc:after {
2279
2306
  table.datatable th:active {
2280
2307
  outline: none;
2281
2308
  }
2309
+ .footer-pf-alt {
2310
+ background-color: #030303;
2311
+ color: #999999;
2312
+ font-size: 11px;
2313
+ line-height: 17px;
2314
+ padding-left: 25px;
2315
+ padding-top: 10px;
2316
+ }
2317
+ .layout-pf-alt-fixed-with-footer .footer-pf-alt {
2318
+ bottom: 0;
2319
+ left: 0;
2320
+ position: fixed;
2321
+ right: 0;
2322
+ z-index: 1030;
2323
+ }
2282
2324
  @font-face {
2283
2325
  font-family: 'PatternFlyIcons-webfont';
2284
2326
  src: url('../fonts/PatternFlyIcons-webfont.eot');
@@ -2326,6 +2368,12 @@ table.datatable th:active {
2326
2368
  .pficon-folder-close:before {
2327
2369
  content: "\e607";
2328
2370
  }
2371
+ .pficon-topology:before {
2372
+ content: "\e608";
2373
+ }
2374
+ .pficon-thumb-tack-o:before {
2375
+ content: "\e609";
2376
+ }
2329
2377
  .pficon-edit:before {
2330
2378
  content: "\e60a";
2331
2379
  }
@@ -2538,6 +2586,41 @@ table.datatable th:active {
2538
2586
  content: " ";
2539
2587
  right: 1px;
2540
2588
  }
2589
+ .layout-pf-alt,
2590
+ .layout-pf-alt body {
2591
+ min-height: 100%;
2592
+ }
2593
+ .layout-pf-alt.layout-pf-alt-fixed.layout-pf-alt-fixed-inner-scroll,
2594
+ .layout-pf-alt.layout-pf-alt-fixed.layout-pf-alt-fixed-inner-scroll body {
2595
+ height: 100%;
2596
+ min-height: 0;
2597
+ }
2598
+ .layout-pf-alt.layout-pf-alt-fixed.layout-pf-alt-fixed-inner-scroll .container-pf-alt-nav-pf-vertical-alt {
2599
+ height: 100%;
2600
+ overflow: auto;
2601
+ }
2602
+ .layout-pf-alt.layout-pf-alt-fixed.layout-pf-alt-fixed-inner-scroll .container-pf-alt-nav-pf-vertical-alt.container-cards-pf {
2603
+ margin-top: 0;
2604
+ padding-top: 20px;
2605
+ }
2606
+ .layout-pf-alt.layout-pf-alt-fixed.transitions .container-pf-alt-nav-pf-vertical-alt {
2607
+ transition: all 0.2s cubic-bezier(0.35, 0, 0.25, 1);
2608
+ }
2609
+ .layout-pf-alt.layout-pf-alt-fixed body {
2610
+ padding-top: 60px;
2611
+ }
2612
+ .layout-pf-alt.layout-pf-alt-fixed .container-pf-alt-nav-pf-vertical-alt {
2613
+ margin-left: 250px;
2614
+ }
2615
+ .layout-pf-alt.layout-pf-alt-fixed .container-pf-alt-nav-pf-vertical-alt.collapsed-nav {
2616
+ margin-left: 75px;
2617
+ }
2618
+ .layout-pf-alt.layout-pf-alt-fixed .container-pf-alt-nav-pf-vertical-alt.hidden-nav {
2619
+ margin-left: 0;
2620
+ }
2621
+ .layout-pf-alt.layout-pf-alt-fixed-with-footer body {
2622
+ padding-bottom: 37px;
2623
+ }
2541
2624
  .login-pf {
2542
2625
  height: 100%;
2543
2626
  }
@@ -3195,6 +3278,259 @@ table.datatable th:active {
3195
3278
  padding-left: 0;
3196
3279
  }
3197
3280
  }
3281
+ .navbar-pf-alt {
3282
+ background-color: #030303;
3283
+ background-image: url("../img/bg-navbar-pf-alt.svg");
3284
+ background-repeat: no-repeat;
3285
+ background-size: auto 100%;
3286
+ border: none;
3287
+ border-radius: 0;
3288
+ border-top: 2px solid #199dde;
3289
+ margin-bottom: 0;
3290
+ }
3291
+ .navbar-pf-alt .infotip.bottom-right .arrow {
3292
+ left: 90%;
3293
+ }
3294
+ .layout-pf-alt-fixed .navbar-pf-alt {
3295
+ left: 0;
3296
+ position: fixed;
3297
+ right: 0;
3298
+ top: 0;
3299
+ z-index: 1030;
3300
+ }
3301
+ .navbar-pf-alt .nav.navbar-nav > li > .dropdown-menu.infotip {
3302
+ margin-top: 0;
3303
+ }
3304
+ .navbar-pf-alt .nav .nav-item-iconic {
3305
+ cursor: pointer;
3306
+ line-height: 1;
3307
+ max-height: 58px;
3308
+ padding: 21px 12px;
3309
+ position: relative;
3310
+ }
3311
+ .navbar-pf-alt .nav .nav-item-iconic:hover,
3312
+ .navbar-pf-alt .nav .nav-item-iconic:focus {
3313
+ background-color: transparent;
3314
+ }
3315
+ .navbar-pf-alt .nav .nav-item-iconic:hover .caret,
3316
+ .navbar-pf-alt .nav .nav-item-iconic:focus .caret,
3317
+ .navbar-pf-alt .nav .nav-item-iconic:hover .fa,
3318
+ .navbar-pf-alt .nav .nav-item-iconic:focus .fa,
3319
+ .navbar-pf-alt .nav .nav-item-iconic:hover .glyphicon,
3320
+ .navbar-pf-alt .nav .nav-item-iconic:focus .glyphicon,
3321
+ .navbar-pf-alt .nav .nav-item-iconic:hover .pf-icon,
3322
+ .navbar-pf-alt .nav .nav-item-iconic:focus .pf-icon {
3323
+ color: #ffffff;
3324
+ }
3325
+ .navbar-pf-alt .nav .nav-item-iconic .badge {
3326
+ background-color: #cc0000;
3327
+ border-radius: 20px;
3328
+ color: #ffffff;
3329
+ cursor: pointer;
3330
+ font-size: 9px;
3331
+ font-weight: 700;
3332
+ margin: 0 0 -11px -12px;
3333
+ min-width: 0;
3334
+ padding: 2px 4px;
3335
+ }
3336
+ .navbar-pf-alt .nav .nav-item-iconic .caret,
3337
+ .navbar-pf-alt .nav .nav-item-iconic .fa,
3338
+ .navbar-pf-alt .nav .nav-item-iconic .pf-icon {
3339
+ color: #cfcfcf;
3340
+ font-size: 16px;
3341
+ }
3342
+ .navbar-pf-alt .nav .nav-item-iconic .caret {
3343
+ font-size: 12px;
3344
+ width: auto;
3345
+ }
3346
+ .navbar-pf-alt .nav .open > .nav-item-iconic,
3347
+ .navbar-pf-alt .nav .open > .nav-item-iconic:hover,
3348
+ .navbar-pf-alt .nav .open > .nav-item-iconic:focus {
3349
+ background: transparent;
3350
+ }
3351
+ .navbar-pf-alt .nav .open > .nav-item-iconic .caret,
3352
+ .navbar-pf-alt .nav .open > .nav-item-iconic:hover .caret,
3353
+ .navbar-pf-alt .nav .open > .nav-item-iconic:focus .caret,
3354
+ .navbar-pf-alt .nav .open > .nav-item-iconic .fa,
3355
+ .navbar-pf-alt .nav .open > .nav-item-iconic:hover .fa,
3356
+ .navbar-pf-alt .nav .open > .nav-item-iconic:focus .fa,
3357
+ .navbar-pf-alt .nav .open > .nav-item-iconic .pf-icon,
3358
+ .navbar-pf-alt .nav .open > .nav-item-iconic:hover .pf-icon,
3359
+ .navbar-pf-alt .nav .open > .nav-item-iconic:focus .pf-icon {
3360
+ color: #ffffff;
3361
+ }
3362
+ .navbar-pf-alt .navbar-brand {
3363
+ color: #ffffff;
3364
+ height: auto;
3365
+ margin: 0 0 0 25px;
3366
+ min-height: 35px;
3367
+ padding: 11px 0 12px;
3368
+ }
3369
+ .navbar-pf-alt .navbar-brand .navbar-brand-name {
3370
+ display: inline;
3371
+ margin: 0 15px 0 0;
3372
+ }
3373
+ @media (max-width: 480px) {
3374
+ .navbar-pf-alt .navbar-brand .navbar-brand-name {
3375
+ display: none;
3376
+ }
3377
+ }
3378
+ .navbar-pf-alt .navbar-brand .navbar-brand-icon {
3379
+ display: inline;
3380
+ margin: 0 15px 0 0;
3381
+ }
3382
+ .navbar-pf-alt .navbar-iconic {
3383
+ margin-right: 0;
3384
+ }
3385
+ .navbar-pf-alt .navbar-toggle {
3386
+ border: 0;
3387
+ display: block;
3388
+ float: left;
3389
+ margin: 13px 15px;
3390
+ }
3391
+ .navbar-pf-alt .navbar-toggle:hover .icon-bar,
3392
+ .navbar-pf-alt .navbar-toggle:focus .icon-bar {
3393
+ background: #ffffff;
3394
+ }
3395
+ .navbar-pf-alt .navbar-toggle + .navbar-brand {
3396
+ margin-left: 0;
3397
+ }
3398
+ .navbar-pf-alt .navbar-toggle .icon-bar {
3399
+ background: #cfcfcf;
3400
+ }
3401
+ .layout-pf-alt-fixed.transitions .nav-pf-vertical-alt {
3402
+ transition: all 0.2s cubic-bezier(0.35, 0, 0.25, 1);
3403
+ }
3404
+ .layout-pf-alt-fixed.transitions .nav-pf-vertical-alt.collapsed .list-group-item .list-group-item-value {
3405
+ transition: opacity 0s .1s, opacity .1s linear;
3406
+ }
3407
+ .layout-pf-alt-fixed.transitions .nav-pf-vertical-alt .list-group-item .badge {
3408
+ transition: all 0.2s cubic-bezier(0.35, 0, 0.25, 1);
3409
+ }
3410
+ .layout-pf-alt-fixed.transitions .nav-pf-vertical-alt .list-group-item .list-group-item-value {
3411
+ transition: opacity 0.5s ease-out;
3412
+ transition-delay: .15s;
3413
+ }
3414
+ .nav-pf-vertical-alt {
3415
+ background: #ffffff;
3416
+ }
3417
+ .ie9.layout-pf-alt-fixed .nav-pf-vertical-alt {
3418
+ box-sizing: content-box;
3419
+ }
3420
+ .layout-pf-alt-fixed .nav-pf-vertical-alt {
3421
+ border-right: 1px solid #d0d0d0;
3422
+ bottom: 0;
3423
+ overflow-x: hidden;
3424
+ overflow-y: auto;
3425
+ left: 0;
3426
+ position: fixed;
3427
+ top: 60px;
3428
+ width: 250px;
3429
+ z-index: 1030;
3430
+ }
3431
+ .layout-pf-alt-fixed .nav-pf-vertical-alt.collapsed {
3432
+ width: 75px !important;
3433
+ }
3434
+ .layout-pf-alt-fixed .nav-pf-vertical-alt.collapsed .list-group-item .badge {
3435
+ padding: 2px 3px;
3436
+ right: 21px;
3437
+ top: 36px;
3438
+ }
3439
+ .layout-pf-alt-fixed .nav-pf-vertical-alt.collapsed .list-group-item .list-group-item-value {
3440
+ opacity: 0;
3441
+ }
3442
+ .layout-pf-alt-fixed .nav-pf-vertical-alt.hidden {
3443
+ display: none;
3444
+ }
3445
+ .layout-pf-alt-fixed .nav-pf-vertical-alt.hidden.show-mobile-nav {
3446
+ box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);
3447
+ display: block !important;
3448
+ }
3449
+ .layout-pf-alt-fixed-with-footer .nav-pf-vertical-alt {
3450
+ bottom: 37px;
3451
+ }
3452
+ .nav-pf-vertical-alt .list-group {
3453
+ border-top: 0;
3454
+ margin-bottom: 0;
3455
+ }
3456
+ .nav-pf-vertical-alt .list-group-item {
3457
+ padding: 0;
3458
+ }
3459
+ .nav-pf-vertical-alt .list-group-item a {
3460
+ color: #333333;
3461
+ display: block;
3462
+ font-size: 14px;
3463
+ height: 63px;
3464
+ padding: 17px 20px 17px 25px;
3465
+ position: relative;
3466
+ white-space: nowrap;
3467
+ }
3468
+ .nav-pf-vertical-alt .list-group-item a:focus {
3469
+ color: #333333;
3470
+ text-decoration: none;
3471
+ }
3472
+ .nav-pf-vertical-alt .list-group-item a:hover {
3473
+ color: #39a5dc;
3474
+ text-decoration: none;
3475
+ }
3476
+ .nav-pf-vertical-alt .list-group-item.active {
3477
+ background-color: #ffffff;
3478
+ border-color: #f2f2f2;
3479
+ }
3480
+ .nav-pf-vertical-alt .list-group-item.active:before {
3481
+ background: #39a5dc;
3482
+ content: " ";
3483
+ display: block;
3484
+ height: 100%;
3485
+ left: 0;
3486
+ position: absolute;
3487
+ top: 0;
3488
+ width: 5px;
3489
+ }
3490
+ .nav-pf-vertical-alt .list-group-item.active a {
3491
+ color: #39a5dc;
3492
+ }
3493
+ .nav-pf-vertical-alt .list-group-item .badge {
3494
+ background: #333333;
3495
+ border: 1px solid #ffffff;
3496
+ border-radius: 3px;
3497
+ color: #ffffff;
3498
+ font-weight: 700;
3499
+ font-size: 9px;
3500
+ padding: 5px;
3501
+ position: absolute;
3502
+ right: 15px;
3503
+ text-align: center;
3504
+ top: 21px;
3505
+ }
3506
+ .nav-pf-vertical-alt .list-group-item .badge.notifications {
3507
+ background: #cc0000;
3508
+ }
3509
+ .nav-pf-vertical-alt .list-group-item .fa,
3510
+ .nav-pf-vertical-alt .list-group-item .glyphicon,
3511
+ .nav-pf-vertical-alt .list-group-item .pficon {
3512
+ float: left;
3513
+ font-size: 18px;
3514
+ line-height: 30px;
3515
+ margin-right: 10px;
3516
+ text-align: center;
3517
+ width: 18px;
3518
+ }
3519
+ .nav-pf-vertical-alt .list-group-item .list-group-item-value {
3520
+ display: inline-block;
3521
+ line-height: 30px;
3522
+ opacity: 1;
3523
+ overflow: hidden;
3524
+ text-overflow: ellipsis;
3525
+ width: 140px;
3526
+ }
3527
+ .nav-pf-vertical-alt .list-group-item-separator {
3528
+ border-top-width: 5px;
3529
+ }
3530
+ .sidebar-pf .nav-pf-vertical-alt {
3531
+ margin-left: -20px;
3532
+ margin-right: -20px;
3533
+ }
3198
3534
  .search-pf.has-button {
3199
3535
  border-collapse: separate;
3200
3536
  display: table;
@@ -3499,4 +3835,70 @@ table.datatable th:active {
3499
3835
  .prettyprint ol.linenums {
3500
3836
  margin-bottom: 0;
3501
3837
  }
3838
+ .toolbar-pf {
3839
+ background: #fff;
3840
+ border-bottom: 1px solid #d0d0d0;
3841
+ box-shadow: 0 1px 0px rgba(0, 0, 0, 0.045);
3842
+ padding-top: 10px;
3843
+ }
3844
+ .toolbar-pf .form-group {
3845
+ margin-bottom: 0;
3846
+ width: 200px;
3847
+ }
3848
+ @media (min-width: 768px) {
3849
+ .toolbar-pf .form-group {
3850
+ width: 300px;
3851
+ }
3852
+ }
3853
+ .toolbar-pf-results {
3854
+ border-top: 1px solid #d0d0d0;
3855
+ margin-top: 10px;
3856
+ }
3857
+ .toolbar-pf-results h5,
3858
+ .toolbar-pf-results p,
3859
+ .toolbar-pf-results ul {
3860
+ display: inline-block;
3861
+ line-height: 26.66666667px;
3862
+ margin-bottom: 0;
3863
+ margin-top: 0;
3864
+ }
3865
+ @media (min-width: 768px) {
3866
+ .toolbar-pf-results h5,
3867
+ .toolbar-pf-results p,
3868
+ .toolbar-pf-results ul {
3869
+ line-height: 40px;
3870
+ }
3871
+ }
3872
+ .toolbar-pf-results h5 {
3873
+ font-weight: 700;
3874
+ margin-right: 20px;
3875
+ }
3876
+ .toolbar-pf-results .label {
3877
+ font-size: 11px;
3878
+ }
3879
+ .toolbar-pf-results .label a {
3880
+ color: #fff;
3881
+ display: inline-block;
3882
+ margin-left: 5px;
3883
+ }
3884
+ .toolbar-pf-results .list-inline {
3885
+ margin: 0 10px 0 5px;
3886
+ }
3887
+ .toolbar-pf-results .list-inline li {
3888
+ padding-left: 0;
3889
+ padding-right: 0;
3890
+ }
3891
+ .toolbar-pf-view-selector {
3892
+ font-size: 16px;
3893
+ }
3894
+ .toolbar-pf-view-selector .active a {
3895
+ color: #0099d3;
3896
+ cursor: default;
3897
+ }
3898
+ .toolbar-pf-view-selector a {
3899
+ color: #222222;
3900
+ }
3901
+ .toolbar-pf-view-selector a:hover {
3902
+ color: #0099d3;
3903
+ }
3502
3904
  /*# sourceMappingURL=patternfly-additions.css.map */