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.
- checksums.yaml +4 -4
- data/README.md +1 -1
- data/assets/fonts/patternfly/PatternFlyIcons-webfont.eot +0 -0
- data/assets/fonts/patternfly/PatternFlyIcons-webfont.svg +4 -2
- data/assets/fonts/patternfly/PatternFlyIcons-webfont.ttf +0 -0
- data/assets/fonts/patternfly/PatternFlyIcons-webfont.woff +0 -0
- data/assets/javascripts/patternfly.js +120 -0
- data/assets/javascripts/patternfly.min.js +1 -1
- data/assets/stylesheets/_patternfly.scss +5 -0
- data/assets/stylesheets/patternfly/_bootstrap-datepicker.scss +28 -1
- data/assets/stylesheets/patternfly/_footer.scss +19 -0
- data/assets/stylesheets/patternfly/_icons.scss +6 -0
- data/assets/stylesheets/patternfly/_layouts.scss +45 -0
- data/assets/stylesheets/patternfly/_nav-vertical-alt.scss +166 -0
- data/assets/stylesheets/patternfly/_navbar-alt.scss +128 -0
- data/assets/stylesheets/patternfly/_toolbar.scss +62 -0
- data/assets/stylesheets/patternfly/_variables.scss +35 -0
- data/bower.json +1 -1
- data/lib/patternfly-sass/version.rb +2 -2
- data/spec/compare_spec.rb +9 -20
- data/spec/html/bootstrap-datepicker.html +26 -0
- data/spec/html/dist/css/patternfly-additions.css +411 -9
- 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.map +1 -1
- data/spec/html/dist/css/patternfly.min.css.map +1 -1
- data/spec/html/icons.html +12 -0
- data/spec/html/index.html +20 -0
- data/spec/html/layout-alt-fixed-inner-scroll.html +350 -0
- data/spec/html/layout-alt-fixed-with-footer-inner-scroll.html +354 -0
- data/spec/html/layout-alt-fixed-with-footer.html +354 -0
- data/spec/html/layout-alt-fixed.html +350 -0
- data/spec/html/toolbar.html +190 -0
- metadata +17 -3
- 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
data/spec/compare_spec.rb
CHANGED
@@ -1,7 +1,6 @@
|
|
1
|
-
require '
|
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
|
-
|
13
|
-
|
14
|
-
driver = Selenium::WebDriver.for(:firefox)
|
11
|
+
before(:all) { @browser = Selenium::WebDriver.for(:firefox) }
|
15
12
|
|
16
|
-
|
17
|
-
html =
|
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
|
-
|
23
|
+
@browser.manage.window.resize_to(w, h)
|
33
24
|
CONTEXTS.each do |ctx|
|
34
|
-
|
35
|
-
|
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
|
-
|
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)
|
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]:
|
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 */
|