patternfly-sass 3.0.0 → 3.1.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (41) hide show
  1. checksums.yaml +4 -4
  2. data/.travis.yml +7 -0
  3. data/README.md +1 -0
  4. data/assets/javascripts/patternfly.js +378 -0
  5. data/assets/javascripts/patternfly.min.js +1 -1
  6. data/assets/stylesheets/_patternfly.scss +2 -0
  7. data/assets/stylesheets/patternfly/_footer.scss +5 -5
  8. data/assets/stylesheets/patternfly/_layouts.scss +68 -3
  9. data/assets/stylesheets/patternfly/_navbar-vertical.scss +136 -0
  10. data/assets/stylesheets/patternfly/_tables.scss +20 -0
  11. data/assets/stylesheets/patternfly/_variables.scss +94 -31
  12. data/assets/stylesheets/patternfly/_vertical-nav.scss +428 -0
  13. data/assets/stylesheets/patternfly/lib/bootstrap-select.scss +7 -7
  14. data/bower.json +2 -2
  15. data/lib/patternfly-sass/version.rb +2 -2
  16. data/spec/html/basic.html +7 -0
  17. data/spec/html/bootstrap-treeview-2.html +7 -0
  18. data/spec/html/cards.html +7 -0
  19. data/spec/html/dashboard.html +7 -0
  20. data/spec/html/dist/css/patternfly-additions.css +562 -2
  21. data/spec/html/dist/css/patternfly-additions.css.map +1 -1
  22. data/spec/html/dist/css/patternfly-additions.min.css +1 -1
  23. data/spec/html/dist/css/patternfly-additions.min.css.map +1 -1
  24. data/spec/html/dist/css/patternfly.css +18 -0
  25. data/spec/html/dist/css/patternfly.css.map +1 -1
  26. data/spec/html/dist/css/patternfly.min.css +3 -3
  27. data/spec/html/dist/css/patternfly.min.css.map +1 -1
  28. data/spec/html/form.html +7 -0
  29. data/spec/html/index.html +6 -0
  30. data/spec/html/layout-alt-fixed-inner-scroll.html +7 -0
  31. data/spec/html/layout-alt-fixed-with-footer-inner-scroll.html +7 -0
  32. data/spec/html/layout-alt-fixed-with-footer.html +7 -0
  33. data/spec/html/layout-alt-fixed.html +7 -0
  34. data/spec/html/list-view.html +2 -2
  35. data/spec/html/login.html +8 -0
  36. data/spec/html/tab.html +7 -0
  37. data/spec/html/tables.html +127 -0
  38. data/spec/html/typography-2.html +8 -0
  39. data/spec/html/vertical-navigation-without-icons.html +960 -0
  40. data/spec/html/vertical-navigation.html +960 -0
  41. metadata +8 -2
data/assets/stylesheets/patternfly/_layouts.scss CHANGED
@@ -1,7 +1,72 @@
1
1
  //
2
2
  // Layouts
3
3
  // --------------------------------------------------
4
-
4
+ .layout-pf {
5
+ &,
6
+ & body {
7
+ min-height: 100%
8
+ }
9
+ &.layout-pf-fixed {
10
+ &.transitions .container-pf-nav-pf-vertical {
11
+ transition: $flyout-transition-pf;
12
+ }
13
+ body {
14
+ padding-top: $navbar-pf-height; // make space for the navbar
15
+ }
16
+ .container-pf-nav-pf-vertical {
17
+ margin-left: $nav-pf-vertical-width;
18
+ &.hidden-icons-pf {
19
+ margin-left: $nav-pf-vertical-hidden-icons-width;
20
+ }
21
+ &.collapsed-nav {
22
+ margin-left: 0; // adjust space for the collapsed left nav
23
+ }
24
+ &.hidden-nav {
25
+ margin-left: 0; // remove space as left nav is hidden
26
+ }
27
+ &.container-pf-nav-pf-vertical-with-secondary {
28
+ &.collapsed-nav {
29
+ margin-left: $nav-pf-vertical-collapsed-width;
30
+ &.hidden-icons-pf {
31
+ margin-left: 0;
32
+ }
33
+ }
34
+ &.secondary-visible-pf {
35
+ margin-left: $nav-pf-vertical-width;
36
+ &.hidden-icons-pf {
37
+ margin-left: $nav-pf-vertical-hidden-icons-width;
38
+ }
39
+ &.hidden-nav {
40
+ margin-left: 0; // remove space as left nav is hidden
41
+ }
42
+ &.collapsed-nav {
43
+ margin-left: $nav-pf-vertical-collapsed-width;
44
+ &.hidden-icons-pf {
45
+ margin-left: 0;
46
+ }
47
+ }
48
+ @media (min-width: 1200px) {
49
+ margin-left: ($nav-pf-vertical-width + $nav-pf-vertical-secondary-width);
50
+ &.hidden-icons-pf {
51
+ margin-left: ($nav-pf-vertical-hidden-icons-width + $nav-pf-vertical-secondary-width);
52
+ }
53
+ &.hidden-nav {
54
+ margin-left: 0; // remove space as left nav is hidden
55
+ }
56
+ }
57
+ }
58
+ &.hidden-nav {
59
+ margin-left: 0; // remove space as left nav is hidden
60
+ }
61
+ }
62
+ }
63
+ }
64
+ &.layout-pf-fixed-with-footer {
65
+ body {
66
+ padding-bottom: $footer-pf-height;
67
+ }
68
+ }
69
+ }
5
70
  .layout-pf-alt {
6
71
  &,
7
72
  & body {
@@ -9,8 +74,8 @@
9
74
  }
10
75
  &.layout-pf-alt-fixed {
11
76
  &.layout-pf-alt-fixed-inner-scroll {
12
- &,
13
- & body {
77
+ &,
78
+ & body {
14
79
  height: 100%;
15
80
  min-height: 0;
16
81
  }
data/assets/stylesheets/patternfly/_navbar-vertical.scss ADDED
@@ -0,0 +1,136 @@
1
+ //
2
+ // Navigation Bar for use with vertical navigation
3
+ // --------------------------------------------------
4
+
5
+ .navbar-pf-vertical {
6
+ background-color: $navbar-pf-vertical-bg-color;
7
+ border: none;
8
+ border-radius: 0;
9
+ border-top: $navbar-pf-vertical-border-width $navbar-pf-vertical-border-style $navbar-pf-vertical-border-color;
10
+ margin-bottom: 0;
11
+
12
+ .infotip.bottom-right .arrow {
13
+ left: 90%;
14
+ }
15
+
16
+ .layout-pf-fixed & {
17
+ left: 0;
18
+ position: fixed;
19
+ right: 0;
20
+ top: 0;
21
+ z-index: $zindex-navbar-fixed;
22
+ }
23
+
24
+ .nav {
25
+ &.navbar-nav > li > .dropdown-menu.infotip {
26
+ margin-top: 0;
27
+ }
28
+
29
+ .nav-item-iconic {
30
+ cursor: pointer;
31
+ line-height: 1;
32
+ max-height: ($navbar-pf-vertical-height - $navbar-pf-vertical-border-width); // to keep Firefox from oversizing icons
33
+ padding: $navbar-pf-vertical-nav-item-iconic-padding;
34
+ position: relative;
35
+
36
+ &:hover,
37
+ &:focus {
38
+ background-color: transparent;
39
+
40
+ .caret,
41
+ .fa,
42
+ .glyphicon,
43
+ .pf-icon {
44
+ color: $navbar-pf-vertical-active-color;
45
+ }
46
+ }
47
+
48
+ .badge {
49
+ background-color: $notification-badge-color;
50
+ border-radius: 20px;
51
+ color: $navbar-pf-vertical-active-color;
52
+ cursor: pointer;
53
+ font-size: ($font-size-base - 3);
54
+ font-weight: 700;
55
+ margin: 0 0 -11px -12px;
56
+ min-width: 0;
57
+ padding: 2px 4px;
58
+ }
59
+
60
+ .caret,
61
+ .fa,
62
+ .pf-icon {
63
+ color: $navbar-pf-vertical-color;
64
+ font-size: ($font-size-base + 4);
65
+ }
66
+
67
+ .caret {
68
+ font-size: $font-size-base;
69
+ width: auto;
70
+ }
71
+
72
+ }
73
+
74
+ .open > .nav-item-iconic {
75
+ &,
76
+ &:hover,
77
+ &:focus {
78
+ background: transparent;
79
+
80
+ .caret,
81
+ .fa,
82
+ .pf-icon {
83
+ color: $navbar-pf-vertical-active-color;
84
+ }
85
+ }
86
+ }
87
+ }
88
+
89
+ .navbar-brand {
90
+ color: $navbar-pf-vertical-navbar-brand-color;
91
+ height: auto;
92
+ margin: $navbar-pf-vertical-navbar-brand-margin;
93
+ min-height: $navbar-pf-vertical-navbar-brand-min-height;
94
+ padding: $navbar-pf-vertical-navbar-brand-padding;
95
+
96
+ .navbar-brand-name {
97
+ display: inline;
98
+ margin: $navbar-pf-vertical-navbar-brand-name-margin;
99
+ // hide once screen gets too small
100
+ @media (max-width: $navbar-pf-vertical-navbar-brand-name-breakpoint) {
101
+ display: none;
102
+ }
103
+ }
104
+
105
+ .navbar-brand-icon {
106
+ display: inline;
107
+ margin: $navbar-pf-vertical-navbar-brand-icon-margin;
108
+ }
109
+ }
110
+
111
+ .navbar-iconic {
112
+ margin-right: 0;
113
+ }
114
+
115
+ .navbar-toggle {
116
+ border: 0;
117
+ display: block;
118
+ float: left;
119
+ margin: $navbar-pf-vertical-navbar-toggle-margin;
120
+
121
+ &:hover,
122
+ &:focus {
123
+ .icon-bar {
124
+ background: $navbar-pf-vertical-navbar-toggle-icon-bar-hover-bg;
125
+ }
126
+ }
127
+
128
+ + .navbar-brand {
129
+ margin-left: 0;
130
+ }
131
+
132
+ .icon-bar {
133
+ background: $navbar-pf-vertical-color;
134
+ }
135
+ }
136
+ }
data/assets/stylesheets/patternfly/_tables.scss CHANGED
@@ -68,3 +68,23 @@
68
68
  }
69
69
  }
70
70
  }
71
+
72
+ .table-treegrid {
73
+ span.indent {
74
+ margin-left: 10px;
75
+ margin-right: 10px;
76
+ }
77
+ span.icon {
78
+ display: inline-block;
79
+ font-size: 13px;
80
+ margin-right: 5px;
81
+ min-width: 10px;
82
+ text-align: center;
83
+ }
84
+ span.expand-icon, span.collapse-icon {
85
+ cursor: pointer;
86
+ }
87
+ > tbody > tr.odd {
88
+ background-color: $table-bg-accent;
89
+ }
90
+ }
data/assets/stylesheets/patternfly/_variables.scss CHANGED
@@ -25,10 +25,10 @@ $dropdown-link-focus-color: #fff !defaul
25
25
  $flyout-transition-pf: all .2s cubic-bezier(.35,0,.25,1) !default;
26
26
  $font-family-monospace: Menlo, Monaco, Consolas, monospace !default;
27
27
  $font-path: if($patternfly-sass-asset-helper, "patternfly", "../fonts/patternfly") !default;
28
- $footer-pf-alt-bg-color: #030303 !default;
29
- $footer-pf-alt-padding-left: 25px !default;
30
- $footer-pf-alt-padding-top: 10px !default;
31
- $footer-pf-alt-height: 37px !default;
28
+ $footer-pf-bg-color: #030303 !default;
29
+ $footer-pf-padding-left: 25px !default;
30
+ $footer-pf-padding-top: 10px !default;
31
+ $footer-pf-height: 37px !default;
32
32
  $gray-light-pf: #aaa !default;
33
33
  $gray-pf: #4d5258 !default;
34
34
  $icon-font-name-fa: "FontAwesome" !default;
@@ -56,42 +56,73 @@ $login-container-bg-color: #181818 !def
56
56
  $login-container-bg-color-rgba: rgba(255, 255, 255, 0.055) !default;
57
57
  $modal-title-padding-horizontal: 18px !default;
58
58
  $modal-title-padding-vertical: 10px !default;
59
- $nav-pf-vertical-alt-active-color: #39a5dc !default;
60
- $nav-pf-vertical-alt-bg-color: #fff !default;
61
- $nav-pf-vertical-alt-badge-color: #fff !default;
62
- $nav-pf-vertical-alt-collapsed-width: 75px !default;
63
- $nav-pf-vertical-alt-color: #464952 !default;
64
- $nav-pf-vertical-alt-link-height: 63px !default;
65
- $nav-pf-vertical-alt-link-padding: 17px 20px 17px 25px !default;
66
- $nav-pf-vertical-alt-width: 250px !default;
67
59
  $navbar-pf-active-color: #f1f1f1 !default;
68
60
  $navbar-pf-alt-active-color: #fff !default;
69
61
  $navbar-pf-alt-bg-color: #030303 !default;
70
62
  $navbar-pf-alt-bg-img: url("../img/bg-navbar-pf-alt.svg") !default;
71
- $navbar-pf-alt-bg-repeat: no-repeat !default;
72
- $navbar-pf-alt-bg-size: auto 100% !default;
73
- $navbar-pf-alt-border-style: solid !default;
74
- $navbar-pf-alt-border-width: 2px !default;
75
- $navbar-pf-alt-color: #cfcfcf !default;
76
- $navbar-pf-alt-height: 60px !default;
77
- $navbar-pf-alt-nav-item-iconic-padding: 21px 12px !default;
78
- $navbar-pf-alt-navbar-brand-color: #fff !default;
79
- $navbar-pf-alt-navbar-brand-icon-margin: 0 15px 0 0 !default;
80
- $navbar-pf-alt-navbar-brand-margin: 0 0 0 25px !default;
81
- $navbar-pf-alt-navbar-brand-min-height: 35px !default;
82
- $navbar-pf-alt-navbar-brand-name-breakpoint: 480px !default;
83
- $navbar-pf-alt-navbar-brand-name-margin: 0 15px 0 0 !default;
84
- $navbar-pf-alt-navbar-brand-padding: 11px 0 12px !default;
85
- $navbar-pf-alt-navbar-toggle-margin: 13px 15px !default;
86
- $navbar-pf-alt-navbar-toggle-icon-bar-hover-bg: #fff !default;
87
63
  $navbar-pf-bg-color: #030303 !default; //#393F45
88
64
  $navbar-pf-border-color: #199dde !default;
89
65
  $navbar-pf-color: #cfcfcf !default;
66
+ $navbar-pf-height: 60px !default;
90
67
  $navbar-pf-icon-bar-bg-color: #fff !default;
91
68
  $navbar-pf-navbar-navbar-brand-min-width: 270px !default;
92
69
  $navbar-pf-navbar-navbar-brand-padding: 8px 0 7px !default;
93
70
  $navbar-pf-navbar-navbar-persistent-bg-color: #f6f6f6 !default;
94
71
  $navbar-pf-navbar-navbar-persistent-border-color: #cecdcd !default;
72
+ $navbar-pf-vertical-active-color: #fff !default;
73
+ $navbar-pf-vertical-bg-color: #1d1d1d !default;
74
+ $navbar-pf-vertical-bg-repeat: no-repeat !default;
75
+ $navbar-pf-vertical-bg-size: auto 100% !default;
76
+ $navbar-pf-vertical-border-color: #199dde !default;
77
+ $navbar-pf-vertical-border-style: solid !default;
78
+ $navbar-pf-vertical-border-width: 2px !default;
79
+ $navbar-pf-vertical-color: #cfcfcf !default;
80
+ $navbar-pf-vertical-height: 60px !default;
81
+ $navbar-pf-vertical-icon-bar-bg-color: #fff !default;
82
+ $navbar-pf-vertical-navbar-brand-color: #fff !default;
83
+ $navbar-pf-vertical-navbar-brand-icon-margin: 0 15px 0 0 !default;
84
+ $navbar-pf-vertical-navbar-brand-margin: 0 0 0 25px !default;
85
+ $navbar-pf-vertical-navbar-brand-min-height: 35px !default;
86
+ $navbar-pf-vertical-navbar-brand-name-breakpoint: 480px !default;
87
+ $navbar-pf-vertical-navbar-brand-name-margin: 0 15px 0 0 !default;
88
+ $navbar-pf-vertical-navbar-brand-padding: 11px 0 12px !default;
89
+ $navbar-pf-vertical-navbar-toggle-margin: 13px 15px !default;
90
+ $navbar-pf-vertical-navbar-toggle-icon-bar-hover-bg: #fff !default;
91
+ $navbar-pf-vertical-nav-item-iconic-padding: 21px 12px !default;
92
+ $nav-pf-vertical-active-color: #fff !default;
93
+ $nav-pf-vertical-active-before-color: #199dde !default;
94
+ $nav-pf-vertical-active-bg-color: #393f44 !default;
95
+ $nav-pf-vertical-active-border-color: #303030 !default;
96
+ $nav-pf-vertical-active-font-weight: 600 !default;
97
+ $nav-pf-vertical-active-icon-color: #199dde !default;
98
+ $nav-pf-vertical-badge-color: #fff !default;
99
+ $nav-pf-vertical-bg-color: #292e34 !default;
100
+ $nav-pf-vertical-border-color: #262626 !default;
101
+ $nav-pf-vertical-collapsed-width: 75px !default;
102
+ $nav-pf-vertical-color: #dbdada !default;
103
+ $nav-pf-vertical-font-weight: 400 !default;
104
+ $nav-pf-vertical-icon-color: #72767b !default;
105
+ $nav-pf-vertical-icon-width: 24px !default;
106
+ $nav-pf-vertical-item-border-color: #000000 !default;
107
+ $nav-pf-vertical-link-height: 63px !default;
108
+ $nav-pf-vertical-link-padding: 17px 20px 17px 25px !default;
109
+ $nav-pf-vertical-secondary-active-color: #fff !default;
110
+ $nav-pf-vertical-secondary-active-bg-color: #4d5258 !default;
111
+ $nav-pf-vertical-secondary-active-icon-color: #199dde !default;
112
+ $nav-pf-vertical-secondary-badge-color: #fff !default;
113
+ $nav-pf-vertical-secondary-badge-bg-color: #292e34 !default;
114
+ $nav-pf-vertical-secondary-border-color: #199dde !default;
115
+ $nav-pf-vertical-secondary-color: #fff !default;
116
+ $nav-pf-vertical-secondary-header-margin: 18px 20px 10px 20px !default;
117
+ $nav-pf-vertical-secondary-indicator-color: #72767b !default;
118
+ $nav-pf-vertical-secondayr-indicator-padding: 17px 0 !default;
119
+ $nav-pf-vertical-secondary-item-color: #dbdada !default;
120
+ $nav-pf-vertical-secondary-item-padding: 0 0 5px 0 !default;
121
+ $nav-pf-vertical-secondary-link-height: 63px !default;
122
+ $nav-pf-vertical-secondary-link-padding: 0 15px 0 20px !default;
123
+ $nav-pf-vertical-secondary-list-header-margin: 30px 20px 10px 20px !default;
124
+ $nav-pf-vertical-secondary-width: 250px !default;
125
+ $nav-pf-vertical-width: 200px !default;
95
126
  $pagination-padding-small-vertical: 0 !default;
96
127
  $panel-default-border-color: #bebdbd !default;
97
128
  $pficon-var-add-circle-o: "\e61b" !default;
@@ -158,9 +189,6 @@ $table-cell-padding-top: 2px !default
158
189
  // Reference variables declared in block above
159
190
  $bootstrap-switch-bg-color-start: $btn-default-bg-img-start !default;
160
191
  $bootstrap-switch-bg-color-stop: $btn-default-bg-img-stop !default;
161
- $img-path-alt: $img-path !default;
162
- $nav-pf-vertical-alt-border-color: $sidebar-pf-border-color !default;
163
- $navbar-pf-alt-border-color: $navbar-pf-border-color !default;
164
192
  $navbar-pf-navbar-header-border-color: lighten($navbar-pf-bg-color, 15%) !default;
165
193
  $navbar-pf-navbar-nav-active-active-bg-color: lighten($navbar-pf-bg-color, 8%) !default;
166
194
  $navbar-pf-navbar-nav-active-active-open-bg-color: lighten($navbar-pf-bg-color, 11%) !default;
@@ -170,6 +198,8 @@ $navbar-pf-navbar-primary-bg-color-stop: $navbar-pf-b
170
198
  $navbar-pf-navbar-utility-border-color: lighten($navbar-pf-bg-color, 15.5%) !default;
171
199
  $navbar-pf-navbar-utility-color: $navbar-pf-color !default;
172
200
  $navbar-pf-navbar-utility-hover-bg-color: lighten($navbar-pf-bg-color, 12.5%) !default;
201
+ $nav-pf-vertical-hidden-icons-width: ($nav-pf-vertical-width - $nav-pf-vertical-icon-width) !default;
202
+ $nav-pf-vertical-secondary-bg-color: $nav-pf-vertical-active-bg-color !default;
173
203
  $nav-tabs-color: $gray-pf !default;
174
204
  // Reference variables declared in block above
175
205
  $navbar-pf-navbar-primary-context-bg-color-start: lighten($navbar-pf-navbar-primary-bg-color-start, 8.5%) !default;
@@ -198,6 +228,39 @@ $navbar-pf-navbar-primary-context-active-border-top-color: lighten($nav
198
228
  // References variable declared in block above
199
229
  $navbar-pf-navbar-primary-context-active-border-right-color: $navbar-pf-navbar-primary-context-active-border-color !default;
200
230
 
231
+ // Alternate navigation layout - Kept for backwards compatibility
232
+ // --------------------------------------------------------------
233
+ $footer-pf-alt-bg-color: $footer-pf-bg-color !default;
234
+ $footer-pf-alt-padding-left: $footer-pf-padding-left !default;
235
+ $footer-pf-alt-padding-top: $footer-pf-padding-top !default;
236
+ $footer-pf-alt-height: $footer-pf-height !default;
237
+ $img-path-alt: $img-path !default;
238
+ $nav-pf-vertical-alt-active-color: #39a5dc !default;
239
+ $nav-pf-vertical-alt-bg-color: #fff !default;
240
+ $nav-pf-vertical-alt-badge-color: #fff !default;
241
+ $nav-pf-vertical-alt-border-color: $sidebar-pf-border-color !default;
242
+ $nav-pf-vertical-alt-collapsed-width: 75px !default;
243
+ $nav-pf-vertical-alt-color: #464952 !default;
244
+ $nav-pf-vertical-alt-link-height: 63px !default;
245
+ $nav-pf-vertical-alt-link-padding: 17px 20px 17px 25px !default;
246
+ $nav-pf-vertical-alt-width: 250px !default;
247
+ $navbar-pf-alt-bg-repeat: $navbar-pf-vertical-bg-repeat !default;
248
+ $navbar-pf-alt-bg-size: $navbar-pf-vertical-bg-size !default;
249
+ $navbar-pf-alt-border-color: $navbar-pf-vertical-border-color !default;
250
+ $navbar-pf-alt-border-style: $navbar-pf-vertical-border-style !default;
251
+ $navbar-pf-alt-border-width: $navbar-pf-vertical-border-width !default;
252
+ $navbar-pf-alt-color: $navbar-pf-vertical-color !default;
253
+ $navbar-pf-alt-height: $navbar-pf-vertical-height !default;
254
+ $navbar-pf-alt-nav-item-iconic-padding: $navbar-pf-vertical-nav-item-iconic-padding !default;
255
+ $navbar-pf-alt-navbar-brand-color: $navbar-pf-vertical-navbar-brand-color !default;
256
+ $navbar-pf-alt-navbar-brand-icon-margin: $navbar-pf-vertical-navbar-brand-icon-margin !default;
257
+ $navbar-pf-alt-navbar-brand-margin: $navbar-pf-vertical-navbar-brand-margin !default;
258
+ $navbar-pf-alt-navbar-brand-min-height: $navbar-pf-vertical-navbar-brand-min-height !default;
259
+ $navbar-pf-alt-navbar-brand-name-breakpoint: $navbar-pf-vertical-navbar-brand-name-breakpoint !default;
260
+ $navbar-pf-alt-navbar-brand-name-margin: $navbar-pf-vertical-navbar-brand-name-margin !default;
261
+ $navbar-pf-alt-navbar-brand-padding: $navbar-pf-vertical-navbar-brand-padding !default;
262
+ $navbar-pf-alt-navbar-toggle-margin: $navbar-pf-vertical-navbar-toggle-margin !default;
263
+ $navbar-pf-alt-navbar-toggle-icon-bar-hover-bg: $navbar-pf-vertical-navbar-toggle-icon-bar-hover-bg !default;
201
264
 
202
265
  // Bootstrap overrides
203
266
  // -------------------
data/assets/stylesheets/patternfly/_vertical-nav.scss ADDED
@@ -0,0 +1,428 @@
1
+ //
2
+ // Vertical navigation
3
+ // --------------------------------------------------
4
+ .layout-pf-fixedafdaf.transitions .nav-pf-vertical {
5
+ transition: $flyout-transition-pf;
6
+ &.collapsed .list-group-item .list-group-item-value {
7
+ transition: opacity 0s .1s, opacity .1s linear;
8
+ }
9
+ .list-group-item {
10
+ .badge {
11
+ transition: $flyout-transition-pf;
12
+ }
13
+
14
+ .list-group-item-value {
15
+ transition: opacity .5s ease-out;
16
+ transition-delay: .15s;
17
+ }
18
+ }
19
+ }
20
+ .nav-pf-vertical {
21
+ background: $nav-pf-vertical-bg-color;
22
+ border-right: 1px solid $nav-pf-vertical-border-color;
23
+ bottom: 0;
24
+ overflow-x: hidden;
25
+ overflow-y: auto;
26
+ left: 0;
27
+ position: fixed;
28
+ top: $navbar-pf-height;
29
+ width: $nav-pf-vertical-width;
30
+ z-index: $zindex-navbar-fixed;
31
+ .layout-pf-fixed-with-footer & {
32
+ bottom: $footer-pf-height;
33
+ }
34
+ .ie9.layout-pf-fixed & {
35
+ box-sizing: content-box; // IE9 incorrectly sizes the width if using padding-box
36
+ }
37
+ &.collapsed:not(.nav-pf-vertical-with-secondary-nav) {
38
+ display: none;
39
+ }
40
+ &.collapsed {
41
+ width: $nav-pf-vertical-collapsed-width;
42
+ > .list-group {
43
+ > .list-group-item {
44
+ > a {
45
+ margin-right: 0;
46
+ width: $nav-pf-vertical-collapsed-width;
47
+
48
+ > .list-group-item-value {
49
+ display: none;
50
+ width: 0;
51
+ }
52
+ }
53
+ &.persistent-secondary {
54
+ &.active > a, > a {
55
+ width: $nav-pf-vertical-collapsed-width;
56
+ &:after {
57
+ right: 10px;
58
+ }
59
+ }
60
+ &:hover {
61
+ > a {
62
+ width: ($nav-pf-vertical-collapsed-width + 1);
63
+ z-index: ($zindex-navbar-fixed + 2);
64
+ &:after {
65
+ right: 11px;
66
+ }
67
+ }
68
+ }
69
+ }
70
+ }
71
+ }
72
+ }
73
+ &.hidden-icons-pf {
74
+ width: $nav-pf-vertical-hidden-icons-width;
75
+ > .list-group > .list-group-item {
76
+ > a {
77
+ width: $nav-pf-vertical-hidden-icons-width;
78
+ .fa,
79
+ .glyphicon,
80
+ .pficon {
81
+ display: none;
82
+ }
83
+ }
84
+ &.persistent-secondary {
85
+ &.active, &:hover {
86
+ > a {
87
+ width: ($nav-pf-vertical-hidden-icons-width + 1);
88
+ z-index: ($zindex-navbar-fixed + 2);
89
+ &:after {
90
+ right: 21px;
91
+ }
92
+ }
93
+ }
94
+ }
95
+ }
96
+ &.nav-pf-vertical-with-secondary-nav {
97
+ .nav-pf-persistent-secondary {
98
+ left: $nav-pf-vertical-hidden-icons-width;
99
+ }
100
+ &.collapsed {
101
+ display: none;
102
+ }
103
+ &.hover-secondary-nav-pf {
104
+ width: ($nav-pf-vertical-hidden-icons-width + $nav-pf-vertical-secondary-width);
105
+ &.show-mobile-nav {
106
+ width: $nav-pf-vertical-hidden-icons-width;
107
+ }
108
+ }
109
+ &.secondary-visible-pf {
110
+ width: ($nav-pf-vertical-hidden-icons-width + $nav-pf-vertical-secondary-width);
111
+
112
+ &.show-mobile-nav {
113
+ width: $nav-pf-vertical-secondary-width;
114
+ }
115
+ }
116
+ }
117
+ }
118
+ &.hidden {
119
+ &.show-mobile-nav {
120
+ box-shadow: 0 0 3px rgba(0,0,0,0.15);
121
+ display: block !important;
122
+ }
123
+ > .list-group {
124
+ > .list-group-item {
125
+ &.persistent-secondary {
126
+ &:hover {
127
+ > a {
128
+ z-index: $zindex-navbar-fixed;
129
+ }
130
+ }
131
+ }
132
+ }
133
+ }
134
+ }
135
+ &.nav-pf-vertical-with-secondary-nav {
136
+ &.collapsed {
137
+ &.hover-secondary-nav-pf {
138
+ width: ($nav-pf-vertical-collapsed-width + $nav-pf-vertical-secondary-width);
139
+ }
140
+ }
141
+ &.hover-secondary-nav-pf {
142
+ width: ($nav-pf-vertical-width + $nav-pf-vertical-secondary-width);
143
+ &.show-mobile-nav {
144
+ width: $nav-pf-vertical-width;
145
+ }
146
+ }
147
+ &.secondary-visible-pf {
148
+ width: $nav-pf-vertical-width;
149
+ &.collapsed {
150
+ width: $nav-pf-vertical-collapsed-width;
151
+ }
152
+ &.show-mobile-nav {
153
+ width: $nav-pf-vertical-secondary-width;
154
+ }
155
+ @media (min-width: $screen-lg-min) {
156
+ width: ($nav-pf-vertical-width + $nav-pf-vertical-secondary-width);
157
+ &.collapsed {
158
+ width: $nav-pf-vertical-collapsed-width;
159
+ &.hover-secondary-nav-pf {
160
+ width: ($nav-pf-vertical-collapsed-width + $nav-pf-vertical-secondary-width);
161
+ }
162
+ }
163
+ }
164
+ }
165
+ }
166
+ .layout-pf-fixed-with-footer & {
167
+ bottom: $footer-pf-height;
168
+ }
169
+ > .list-group {
170
+ border-top: 0;
171
+ margin-bottom: 0;
172
+ > .list-group-item {
173
+ background-color: transparent;
174
+ border-color: $nav-pf-vertical-item-border-color;
175
+ padding: 0;
176
+ > a {
177
+ background-color: transparent;
178
+ color: $nav-pf-vertical-color;
179
+ display: block;
180
+ font-size: ($font-size-base + 2);
181
+ font-weight: $nav-pf-vertical-font-weight;
182
+ height: $nav-pf-vertical-link-height;
183
+ outline: 0;
184
+ padding: $nav-pf-vertical-link-padding;
185
+ position: relative;
186
+ white-space: nowrap;
187
+ width: $nav-pf-vertical-width;
188
+ .fa,
189
+ .glyphicon,
190
+ .pficon {
191
+ color: $nav-pf-vertical-icon-color;
192
+ float: left;
193
+ font-size: ($font-size-base + 2);
194
+ line-height: 30px;
195
+ margin-right: 10px;
196
+ text-align: center;
197
+ width: $nav-pf-vertical-icon-width;
198
+ }
199
+ &:hover, &:focus {
200
+ text-decoration: none;
201
+ }
202
+ }
203
+ &.active, &:hover {
204
+ > a {
205
+ background-color: $nav-pf-vertical-active-bg-color;
206
+ color: $nav-pf-vertical-active-color;
207
+ font-weight: $nav-pf-vertical-active-font-weight;
208
+ .fa,
209
+ .glyphicon,
210
+ .pficon {
211
+ color: $nav-pf-vertical-active-icon-color;
212
+ }
213
+ }
214
+ }
215
+ &.active {
216
+ > a {
217
+ .show-mobile-nav & {
218
+ z-index: $zindex-navbar-fixed;
219
+ }
220
+ }
221
+ > a:before {
222
+ background: $nav-pf-vertical-active-before-color;
223
+ content: " ";
224
+ height: 100%;
225
+ left: 0;
226
+ position: absolute;
227
+ top: 0;
228
+ width: 3px;
229
+ }
230
+ }
231
+ .list-group-item-value {
232
+ display: block;
233
+ line-height: 30px;
234
+ max-width: 120px;
235
+ overflow: hidden;
236
+ text-overflow: ellipsis;
237
+ width: 100%;
238
+ }
239
+ &.persistent-secondary {
240
+ > a:after {
241
+ color: $nav-pf-vertical-secondary-indicator-color;
242
+ content: "\f105";
243
+ display: block;
244
+ font-family: "FontAwesome";
245
+ font-size: ($font-size-base * 2);
246
+ line-height: 30px;
247
+ padding: $nav-pf-vertical-secondayr-indicator-padding;
248
+ position: absolute;
249
+ right: 20px;
250
+ top: 0;
251
+ }
252
+ &.active, &:hover {
253
+ > a {
254
+ width: ($nav-pf-vertical-width + 1);
255
+ z-index: ($zindex-navbar-fixed + 2);
256
+ &:after {
257
+ right: 21px;
258
+ }
259
+ }
260
+ }
261
+ }
262
+ }
263
+ }
264
+ .list-group-item-separator {
265
+ border-top-width: 2px;
266
+ border-top-color: $nav-pf-vertical-item-border-color;
267
+ }
268
+ }
269
+ .nav-pf-persistent-secondary {
270
+ background: $nav-pf-vertical-secondary-bg-color;
271
+ border: 1px solid $nav-pf-vertical-border-color;
272
+ border-bottom: none;
273
+ border-top: none;
274
+ bottom: 0;
275
+ display: none;
276
+ left: $nav-pf-vertical-width;
277
+ overflow-x: hidden;
278
+ overflow-y: auto;
279
+ position: fixed;
280
+ top: $navbar-pf-height;
281
+ width: $nav-pf-vertical-secondary-width;
282
+ z-index: $zindex-navbar-fixed;
283
+ .persistent-secondary.active &, .persistent-secondary.mobile-nav-item-pf & {
284
+ .secondary-visible-pf & {
285
+ display: block;
286
+ }
287
+ .secondary-visible-pf.collapsed & {
288
+ display: none;
289
+ }
290
+ .show-mobile-nav & {
291
+ left: 0;
292
+ z-index: ($zindex-navbar-fixed + 2);
293
+ }
294
+ }
295
+ .persistent-secondary:hover & {
296
+ display: block;
297
+ z-index: ($zindex-navbar-fixed + 1);
298
+ .collapsed & {
299
+ left: $nav-pf-vertical-collapsed-width;
300
+ }
301
+ }
302
+ .persistent-secondary:hover & {
303
+ .secondary-visible-pf.collapsed & {
304
+ display: block;
305
+ }
306
+ }
307
+ .ie9.layout-pf-fixed & {
308
+ box-sizing: content-box; // IE9 incorrectly sizes the width if using padding-box
309
+ }
310
+ .layout-pf-fixed-with-footer & {
311
+ bottom: $footer-pf-height;
312
+ }
313
+ .persistent-secondary-header {
314
+ color: $nav-pf-vertical-secondary-color;
315
+ font-size: ($font-size-base + 4);
316
+ margin: $nav-pf-vertical-secondary-header-margin;
317
+ > a {
318
+ margin-right: 7px;
319
+ &:hover {
320
+ text-decoration: none;
321
+ }
322
+ }
323
+ }
324
+ h5 {
325
+ color: $nav-pf-vertical-secondary-color;
326
+ cursor: default;
327
+ font-size: ($font-size-base + 1);
328
+ font-weight: 600;
329
+ margin: $nav-pf-vertical-secondary-list-header-margin;
330
+ }
331
+ > .list-group {
332
+ border-top: 0;
333
+ margin-bottom: 0;
334
+ > .list-group-item {
335
+ padding: $nav-pf-vertical-secondary-item-padding;
336
+ background-color: transparent;
337
+ border: none;
338
+ > a {
339
+ background-color: transparent;
340
+ color: $nav-pf-vertical-secondary-item-color;
341
+ display: block;
342
+ font-size: $font-size-base;
343
+ outline: 0;
344
+ padding: $nav-pf-vertical-secondary-link-padding;
345
+ position: relative;
346
+ white-space: nowrap;
347
+ &:hover {
348
+ > .list-group-item-value {
349
+ color: $nav-pf-vertical-active-color;
350
+ text-decoration: underline;
351
+ }
352
+ }
353
+ }
354
+ &.active {
355
+ .list-group-item-value {
356
+ background-color: $nav-pf-vertical-secondary-active-bg-color;
357
+ color: $nav-pf-vertical-active-color;
358
+ }
359
+ .fa,
360
+ .glyphicon,
361
+ .pficon {
362
+ color: $nav-pf-vertical-active-icon-color;
363
+ }
364
+ }
365
+ .badge-container-pf {
366
+ background-color: $nav-pf-vertical-secondary-badge-bg-color;
367
+ position: absolute;
368
+ right: 15px;
369
+ top: 0;
370
+ .badge {
371
+ background: $nav-pf-vertical-secondary-badge-bg-color;
372
+ color: $nav-pf-vertical-badge-color;
373
+ font-size: $font-size-base;
374
+ font-weight: 700;
375
+ float: left;
376
+ line-height: $line-height-base;
377
+ margin: 0;
378
+ padding: 0 7px;
379
+ text-align: center;
380
+ .pficon, .fa {
381
+ font-size: ($font-size-base + 2);
382
+ height: 20px;
383
+ line-height: $line-height-base;
384
+ margin-right: 3px;
385
+ margin-top: -1px;
386
+ }
387
+ }
388
+ }
389
+ .fa,
390
+ .glyphicon,
391
+ .pficon {
392
+ float: left;
393
+ font-size: 18px;
394
+ line-height: 30px;
395
+ margin-right: 10px;
396
+ text-align: center;
397
+ width: 18px;
398
+ }
399
+ .list-group-item-value {
400
+ display: inline-block;
401
+ line-height: 20px;
402
+ opacity: 1;
403
+ overflow: hidden;
404
+ padding-left: 5px;
405
+ text-overflow: ellipsis;
406
+ }
407
+ }
408
+ }
409
+ }
410
+ .show-mobile-nav {
411
+ .persistent-secondary:hover {
412
+ .nav-pf-persistent-secondary {
413
+ display: none;
414
+ }
415
+ }
416
+ .persistent-secondary.mobile-nav-item-pf:hover {
417
+ .nav-pf-persistent-secondary {
418
+ display: block;
419
+ }
420
+ }
421
+ }
422
+ .force-hide-secondary-nav-pf {
423
+ .persistent-secondary {
424
+ .nav-pf-persistent-secondary {
425
+ display: none !important;
426
+ }
427
+ }
428
+ }