paint-rails 0.6.7 → 0.7.24
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/README.md +5 -4
- data/lib/paint-rails/version.rb +1 -1
- data/paint-rails.gemspec +2 -2
- data/vendor/assets/stylesheets/Brocfile.js +3 -0
- data/vendor/assets/stylesheets/Gemfile +3 -0
- data/vendor/assets/stylesheets/Gemfile.lock +14 -0
- data/vendor/assets/stylesheets/bin/ci +6 -0
- data/vendor/assets/stylesheets/bin/lint +5 -0
- data/vendor/assets/stylesheets/bin/setup +7 -0
- data/vendor/assets/stylesheets/bower_components/fontawesome/.bower.json +5 -5
- data/vendor/assets/stylesheets/bower_components/fontawesome/.gitignore +1 -0
- data/vendor/assets/stylesheets/bower_components/fontawesome/bower.json +1 -1
- data/vendor/assets/stylesheets/bower_components/fontawesome/css/font-awesome.css +133 -4
- data/vendor/assets/stylesheets/bower_components/fontawesome/css/font-awesome.css.map +7 -0
- data/vendor/assets/stylesheets/bower_components/fontawesome/css/font-awesome.min.css +2 -2
- data/vendor/assets/stylesheets/bower_components/fontawesome/fonts/FontAwesome.otf +0 -0
- data/vendor/assets/stylesheets/bower_components/fontawesome/fonts/fontawesome-webfont.eot +0 -0
- data/vendor/assets/stylesheets/bower_components/fontawesome/fonts/fontawesome-webfont.svg +53 -8
- data/vendor/assets/stylesheets/bower_components/fontawesome/fonts/fontawesome-webfont.ttf +0 -0
- data/vendor/assets/stylesheets/bower_components/fontawesome/fonts/fontawesome-webfont.woff +0 -0
- data/vendor/assets/stylesheets/bower_components/fontawesome/fonts/fontawesome-webfont.woff2 +0 -0
- data/vendor/assets/stylesheets/bower_components/fontawesome/less/{spinning.less → animated.less} +6 -1
- data/vendor/assets/stylesheets/bower_components/fontawesome/less/core.less +3 -1
- data/vendor/assets/stylesheets/bower_components/fontawesome/less/font-awesome.less +2 -2
- data/vendor/assets/stylesheets/bower_components/fontawesome/less/icons.less +45 -1
- data/vendor/assets/stylesheets/bower_components/fontawesome/less/mixins.less +3 -1
- data/vendor/assets/stylesheets/bower_components/fontawesome/less/path.less +1 -0
- data/vendor/assets/stylesheets/bower_components/fontawesome/less/variables.less +47 -2
- data/vendor/assets/stylesheets/bower_components/fontawesome/scss/{_spinning.scss → _animated.scss} +5 -0
- data/vendor/assets/stylesheets/bower_components/fontawesome/scss/_core.scss +3 -1
- data/vendor/assets/stylesheets/bower_components/fontawesome/scss/_icons.scss +45 -1
- data/vendor/assets/stylesheets/bower_components/fontawesome/scss/_mixins.scss +3 -1
- data/vendor/assets/stylesheets/bower_components/fontawesome/scss/_path.scss +2 -1
- data/vendor/assets/stylesheets/bower_components/fontawesome/scss/_variables.scss +47 -2
- data/vendor/assets/stylesheets/bower_components/fontawesome/scss/font-awesome.scss +2 -2
- data/vendor/assets/stylesheets/bower_components/foundation/.bower.json +5 -5
- data/vendor/assets/stylesheets/bower_components/foundation/bower.json +1 -1
- data/vendor/assets/stylesheets/bower_components/foundation/css/foundation.css +1855 -1667
- data/vendor/assets/stylesheets/bower_components/foundation/css/foundation.css.map +7 -0
- data/vendor/assets/stylesheets/bower_components/foundation/css/foundation.min.css +1 -0
- data/vendor/assets/stylesheets/bower_components/foundation/css/normalize.css +11 -12
- data/vendor/assets/stylesheets/bower_components/foundation/css/normalize.css.map +7 -0
- data/vendor/assets/stylesheets/bower_components/foundation/css/normalize.min.css +1 -0
- data/vendor/assets/stylesheets/bower_components/foundation/js/foundation/foundation.abide.js +156 -62
- data/vendor/assets/stylesheets/bower_components/foundation/js/foundation/foundation.accordion.js +35 -13
- data/vendor/assets/stylesheets/bower_components/foundation/js/foundation/foundation.alert.js +8 -8
- data/vendor/assets/stylesheets/bower_components/foundation/js/foundation/foundation.clearing.js +93 -65
- data/vendor/assets/stylesheets/bower_components/foundation/js/foundation/foundation.dropdown.js +203 -66
- data/vendor/assets/stylesheets/bower_components/foundation/js/foundation/foundation.equalizer.js +57 -27
- data/vendor/assets/stylesheets/bower_components/foundation/js/foundation/foundation.interchange.js +61 -46
- data/vendor/assets/stylesheets/bower_components/foundation/js/foundation/foundation.joyride.js +93 -78
- data/vendor/assets/stylesheets/bower_components/foundation/js/foundation/foundation.js +177 -77
- data/vendor/assets/stylesheets/bower_components/foundation/js/foundation/foundation.magellan.js +81 -55
- data/vendor/assets/stylesheets/bower_components/foundation/js/foundation/foundation.offcanvas.js +28 -28
- data/vendor/assets/stylesheets/bower_components/foundation/js/foundation/foundation.orbit.js +135 -131
- data/vendor/assets/stylesheets/bower_components/foundation/js/foundation/foundation.reveal.js +119 -65
- data/vendor/assets/stylesheets/bower_components/foundation/js/foundation/foundation.slider.js +113 -71
- data/vendor/assets/stylesheets/bower_components/foundation/js/foundation/foundation.tab.js +67 -35
- data/vendor/assets/stylesheets/bower_components/foundation/js/foundation/foundation.tooltip.js +76 -37
- data/vendor/assets/stylesheets/bower_components/foundation/js/foundation/foundation.topbar.js +71 -58
- data/vendor/assets/stylesheets/bower_components/foundation/js/foundation.js +1570 -919
- data/vendor/assets/stylesheets/bower_components/foundation/js/foundation.min.js +5 -4
- data/vendor/assets/stylesheets/bower_components/foundation/js/vendor/fastclick.js +8 -9
- data/vendor/assets/stylesheets/bower_components/foundation/js/vendor/jquery.js +10 -9
- data/vendor/assets/stylesheets/bower_components/foundation/js/vendor/modernizr.js +1 -1
- data/vendor/assets/stylesheets/bower_components/foundation/js/vendor/placeholder.js +2 -2
- data/vendor/assets/stylesheets/bower_components/foundation/package.json +53 -0
- data/vendor/assets/stylesheets/bower_components/foundation/scss/foundation/_functions.scss +76 -22
- data/vendor/assets/stylesheets/bower_components/foundation/scss/foundation/_settings.scss +152 -107
- data/vendor/assets/stylesheets/bower_components/foundation/scss/foundation/components/_accordion.scss +8 -8
- data/vendor/assets/stylesheets/bower_components/foundation/scss/foundation/components/_alert-boxes.scss +12 -12
- data/vendor/assets/stylesheets/bower_components/foundation/scss/foundation/components/_block-grid.scss +14 -13
- data/vendor/assets/stylesheets/bower_components/foundation/scss/foundation/components/_breadcrumbs.scss +18 -19
- data/vendor/assets/stylesheets/bower_components/foundation/scss/foundation/components/_button-groups.scss +35 -25
- data/vendor/assets/stylesheets/bower_components/foundation/scss/foundation/components/_buttons.scss +16 -19
- data/vendor/assets/stylesheets/bower_components/foundation/scss/foundation/components/_clearing.scss +60 -47
- data/vendor/assets/stylesheets/bower_components/foundation/scss/foundation/components/_dropdown-buttons.scss +15 -15
- data/vendor/assets/stylesheets/bower_components/foundation/scss/foundation/components/_dropdown.scss +42 -36
- data/vendor/assets/stylesheets/bower_components/foundation/scss/foundation/components/_flex-video.scss +7 -7
- data/vendor/assets/stylesheets/bower_components/foundation/scss/foundation/components/_forms.scss +103 -79
- data/vendor/assets/stylesheets/bower_components/foundation/scss/foundation/components/_global.scss +95 -53
- data/vendor/assets/stylesheets/bower_components/foundation/scss/foundation/components/_grid.scss +42 -25
- data/vendor/assets/stylesheets/bower_components/foundation/scss/foundation/components/_icon-bar.scss +371 -204
- data/vendor/assets/stylesheets/bower_components/foundation/scss/foundation/components/_inline-lists.scss +8 -8
- data/vendor/assets/stylesheets/bower_components/foundation/scss/foundation/components/_joyride.scss +40 -42
- data/vendor/assets/stylesheets/bower_components/foundation/scss/foundation/components/_keystrokes.scss +2 -3
- data/vendor/assets/stylesheets/bower_components/foundation/scss/foundation/components/_labels.scss +7 -7
- data/vendor/assets/stylesheets/bower_components/foundation/scss/foundation/components/_magellan.scss +2 -2
- data/vendor/assets/stylesheets/bower_components/foundation/scss/foundation/components/_offcanvas.scss +184 -179
- data/vendor/assets/stylesheets/bower_components/foundation/scss/foundation/components/_orbit.scss +90 -70
- data/vendor/assets/stylesheets/bower_components/foundation/scss/foundation/components/_pagination.scss +15 -15
- data/vendor/assets/stylesheets/bower_components/foundation/scss/foundation/components/_panels.scss +27 -15
- data/vendor/assets/stylesheets/bower_components/foundation/scss/foundation/components/_pricing-tables.scss +16 -16
- data/vendor/assets/stylesheets/bower_components/foundation/scss/foundation/components/_progress-bars.scss +4 -4
- data/vendor/assets/stylesheets/bower_components/foundation/scss/foundation/components/_range-slider.scss +28 -19
- data/vendor/assets/stylesheets/bower_components/foundation/scss/foundation/components/_reveal.scss +37 -50
- data/vendor/assets/stylesheets/bower_components/foundation/scss/foundation/components/_side-nav.scss +15 -11
- data/vendor/assets/stylesheets/bower_components/foundation/scss/foundation/components/_split-buttons.scss +26 -14
- data/vendor/assets/stylesheets/bower_components/foundation/scss/foundation/components/_sub-nav.scss +14 -12
- data/vendor/assets/stylesheets/bower_components/foundation/scss/foundation/components/_switches.scss +32 -21
- data/vendor/assets/stylesheets/bower_components/foundation/scss/foundation/components/_tables.scss +8 -8
- data/vendor/assets/stylesheets/bower_components/foundation/scss/foundation/components/_tabs.scss +50 -31
- data/vendor/assets/stylesheets/bower_components/foundation/scss/foundation/components/_thumbs.scss +8 -8
- data/vendor/assets/stylesheets/bower_components/foundation/scss/foundation/components/_tooltips.scss +25 -25
- data/vendor/assets/stylesheets/bower_components/foundation/scss/foundation/components/_top-bar.scss +197 -145
- data/vendor/assets/stylesheets/bower_components/foundation/scss/foundation/components/_type.scss +20 -81
- data/vendor/assets/stylesheets/bower_components/foundation/scss/foundation/components/_visibility.scss +99 -15
- data/vendor/assets/stylesheets/bower_components/foundation/scss/foundation.scss +37 -38
- data/vendor/assets/stylesheets/bower_components/foundation/scss/normalize.scss +8 -11
- data/vendor/assets/stylesheets/bower_components/jquery/.bower.json +5 -4
- data/vendor/assets/stylesheets/bower_components/jquery/bower.json +2 -1
- data/vendor/assets/stylesheets/bower_components/jquery/dist/jquery.js +9 -4
- data/vendor/assets/stylesheets/bower_components/jquery/dist/jquery.min.js +4 -4
- data/vendor/assets/stylesheets/bower_components/jquery/dist/jquery.min.map +1 -1
- data/vendor/assets/stylesheets/bower_components/jquery/src/core.js +6 -1
- data/vendor/assets/stylesheets/circle.yml +17 -0
- data/vendor/assets/stylesheets/components/_button.scss +120 -21
- data/vendor/assets/stylesheets/components/_dropdown.scss +316 -14
- data/vendor/assets/stylesheets/components/_flip-panel.scss +191 -0
- data/vendor/assets/stylesheets/components/_form.scss +346 -0
- data/vendor/assets/stylesheets/components/_layout.scss +261 -121
- data/vendor/assets/stylesheets/components/_panel.scss +91 -0
- data/vendor/assets/stylesheets/components/_quick-jump.scss +267 -0
- data/vendor/assets/stylesheets/components/_side-panel.scss +154 -0
- data/vendor/assets/stylesheets/components/_table.scss +105 -0
- data/vendor/assets/stylesheets/components/_typography.scss +34 -3
- data/vendor/assets/stylesheets/components/_vertical-align.scss +9 -0
- data/vendor/assets/stylesheets/globals/_functions.scss +69 -0
- data/vendor/assets/stylesheets/globals/_mixins.scss +23 -1
- data/vendor/assets/stylesheets/globals/_settings.scss +35 -36
- data/vendor/assets/stylesheets/paint.scss +22 -14
- metadata +29 -8
- data/vendor/assets/stylesheets/bower_components/fontawesome/less/extras.less +0 -2
- data/vendor/assets/stylesheets/bower_components/fontawesome/scss/_extras.scss +0 -44
- data/vendor/assets/stylesheets/bower_components/foundation/scss/foundation/components/_toolbar.scss +0 -70
data/vendor/assets/stylesheets/bower_components/foundation/scss/foundation/components/_top-bar.scss
CHANGED
@@ -2,10 +2,10 @@
|
|
2
2
|
// foundation.zurb.com
|
3
3
|
// Licensed under MIT Open Source
|
4
4
|
|
5
|
-
@import
|
6
|
-
@import
|
7
|
-
@import
|
8
|
-
@import
|
5
|
+
@import 'global';
|
6
|
+
@import 'grid';
|
7
|
+
@import 'buttons';
|
8
|
+
@import 'forms';
|
9
9
|
|
10
10
|
//
|
11
11
|
// Top Bar Variables
|
@@ -17,7 +17,7 @@ $topbar-bg-color: $oil !default;
|
|
17
17
|
$topbar-bg: $topbar-bg-color !default;
|
18
18
|
|
19
19
|
// Height and margin
|
20
|
-
$topbar-height:
|
20
|
+
$topbar-height: rem-calc(45) !default;
|
21
21
|
$topbar-margin-bottom: 0 !default;
|
22
22
|
|
23
23
|
// Controlling the styles for the title in the top bar
|
@@ -33,16 +33,16 @@ $topbar-link-weight: $font-weight-normal !default;
|
|
33
33
|
$topbar-link-font-size: rem-calc(13) !default;
|
34
34
|
$topbar-link-hover-lightness: -10% !default; // Darken by 10%
|
35
35
|
$topbar-link-bg: $topbar-bg !default;
|
36
|
-
$topbar-link-bg-hover:
|
36
|
+
$topbar-link-bg-hover: $jet !default;
|
37
37
|
$topbar-link-bg-color-hover: $charcoal !default;
|
38
38
|
$topbar-link-bg-active: $primary-color !default;
|
39
39
|
$topbar-link-bg-active-hover: scale-color($primary-color, $lightness: -14%) !default;
|
40
40
|
$topbar-link-font-family: $body-font-family !default;
|
41
41
|
$topbar-link-text-transform: none !default;
|
42
|
-
$topbar-link-padding: $topbar-height / 3 !default;
|
42
|
+
$topbar-link-padding: ($topbar-height / 3) !default;
|
43
43
|
$topbar-back-link-size: rem-calc(18) !default;
|
44
|
-
$topbar-link-dropdown-padding:
|
45
|
-
$topbar-button-font-size:
|
44
|
+
$topbar-link-dropdown-padding: rem-calc(20) !default;
|
45
|
+
$topbar-button-font-size: .75rem !default;
|
46
46
|
$topbar-button-top: 7px !default;
|
47
47
|
|
48
48
|
// Style the top bar dropdown elements
|
@@ -50,10 +50,11 @@ $topbar-dropdown-bg: $oil !default;
|
|
50
50
|
$topbar-dropdown-link-color: $white !default;
|
51
51
|
$topbar-dropdown-link-color-hover: $topbar-link-color-hover !default;
|
52
52
|
$topbar-dropdown-link-bg: $oil !default;
|
53
|
+
$topbar-dropdown-link-bg-hover: $jet !default;
|
53
54
|
$topbar-dropdown-link-weight: $font-weight-normal !default;
|
54
55
|
$topbar-dropdown-toggle-size: 5px !default;
|
55
56
|
$topbar-dropdown-toggle-color: $white !default;
|
56
|
-
$topbar-dropdown-toggle-alpha:
|
57
|
+
$topbar-dropdown-toggle-alpha: .4 !default;
|
57
58
|
|
58
59
|
$topbar-dropdown-label-color: $monsoon !default;
|
59
60
|
$topbar-dropdown-label-text-transform: uppercase !default;
|
@@ -69,12 +70,16 @@ $topbar-menu-link-color: $white !default;
|
|
69
70
|
$topbar-menu-icon-color: $white !default;
|
70
71
|
$topbar-menu-link-color-toggled: $jumbo !default;
|
71
72
|
$topbar-menu-icon-color-toggled: $jumbo !default;
|
73
|
+
$topbar-menu-icon-position: $opposite-direction !default; // Change to $default-float for a left menu icon
|
72
74
|
|
73
75
|
// Transitions and breakpoint styles
|
74
76
|
$topbar-transition-speed: 300ms !default;
|
75
77
|
// Using rem-calc for the below breakpoint causes issues with top bar
|
76
78
|
$topbar-breakpoint: #{lower-bound($medium-range)} !default; // Change to 9999px for always mobile layout
|
77
|
-
$topbar-media-query: $
|
79
|
+
$topbar-media-query: "#{$screen} and (min-width:#{lower-bound($topbar-breakpoint)})";
|
80
|
+
|
81
|
+
// Top-bar input styles
|
82
|
+
$topbar-input-height: rem-calc(28) !default;
|
78
83
|
|
79
84
|
// Divider Styles
|
80
85
|
$topbar-divider-border-bottom: solid 1px scale-color($topbar-bg-color, $lightness: 13%) !default;
|
@@ -88,13 +93,13 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
|
|
88
93
|
// Accessibility mixins for hiding and showing the menu dropdown items
|
89
94
|
@mixin topbar-hide-dropdown {
|
90
95
|
// Makes an element visually hidden by default, but visible when focused.
|
91
|
-
display: block;
|
92
96
|
@include element-invisible();
|
97
|
+
display: block;
|
93
98
|
}
|
94
99
|
|
95
100
|
@mixin topbar-show-dropdown {
|
96
|
-
display: block;
|
97
101
|
@include element-invisible-off();
|
102
|
+
display: block;
|
98
103
|
position: absolute !important; // Reset the position from static to absolute
|
99
104
|
}
|
100
105
|
|
@@ -115,64 +120,78 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
|
|
115
120
|
width: 100%;
|
116
121
|
background: $topbar-bg;
|
117
122
|
|
118
|
-
.top-bar {
|
123
|
+
.top-bar {
|
124
|
+
margin-bottom: $topbar-margin-bottom;
|
125
|
+
}
|
119
126
|
}
|
120
127
|
|
121
128
|
// Wrapped around .top-bar to make it stick to the top
|
122
129
|
.fixed {
|
123
|
-
width: 100%;
|
124
|
-
#{$default-float}: 0;
|
125
130
|
position: fixed;
|
126
131
|
top: 0;
|
132
|
+
width: 100%;
|
127
133
|
z-index: 99;
|
134
|
+
#{$default-float}: 0;
|
128
135
|
|
129
136
|
&.expanded:not(.top-bar) {
|
130
|
-
|
131
|
-
|
132
|
-
|
133
|
-
|
137
|
+
height: auto;
|
138
|
+
max-height: 100%;
|
139
|
+
overflow-y: auto;
|
140
|
+
width: 100%;
|
134
141
|
|
135
142
|
.title-area {
|
136
143
|
position: fixed;
|
137
144
|
width: 100%;
|
138
145
|
z-index: 99;
|
139
146
|
}
|
147
|
+
|
140
148
|
// Ensure you can scroll the menu on small screens
|
141
149
|
.top-bar-section {
|
142
|
-
z-index: 98;
|
143
150
|
margin-top: $topbar-height;
|
151
|
+
z-index: 98;
|
144
152
|
}
|
145
153
|
}
|
146
154
|
}
|
147
155
|
|
148
156
|
.top-bar {
|
149
|
-
|
157
|
+
background: $topbar-bg;
|
150
158
|
height: $topbar-height;
|
151
159
|
line-height: $topbar-height;
|
152
|
-
position: relative;
|
153
|
-
background: $topbar-bg;
|
154
160
|
margin-bottom: $topbar-margin-bottom;
|
161
|
+
overflow: hidden;
|
162
|
+
position: relative;
|
155
163
|
|
156
164
|
// Topbar Global list Styles
|
157
165
|
ul {
|
158
|
-
margin-bottom: 0;
|
159
166
|
list-style: none;
|
167
|
+
margin-bottom: 0;
|
160
168
|
}
|
161
169
|
|
162
|
-
.row {
|
170
|
+
.row {
|
171
|
+
max-width: none;
|
172
|
+
}
|
163
173
|
|
164
174
|
form,
|
165
|
-
input
|
175
|
+
input,
|
176
|
+
select {
|
177
|
+
margin-bottom: 0;
|
178
|
+
}
|
166
179
|
|
167
|
-
input
|
180
|
+
input,
|
181
|
+
select {
|
182
|
+
font-size: $topbar-button-font-size;
|
183
|
+
height: $topbar-input-height;
|
184
|
+
padding-bottom: .35rem;
|
185
|
+
padding-top: .35rem;
|
186
|
+
}
|
168
187
|
|
169
188
|
.button, button {
|
170
|
-
padding-top: .35rem + rem-calc(1);
|
171
|
-
padding-bottom: .35rem + rem-calc(1);
|
172
|
-
margin-bottom: 0;
|
173
189
|
font-size: $topbar-button-font-size;
|
174
|
-
|
175
|
-
|
190
|
+
margin-bottom: 0;
|
191
|
+
padding-bottom: .35rem + rem-calc(1);
|
192
|
+
padding-top: .35rem + rem-calc(1);
|
193
|
+
// position: relative;
|
194
|
+
// top: -1px;
|
176
195
|
|
177
196
|
// Corrects a slight misalignment when put next to an input field
|
178
197
|
@media #{$small-only} {
|
@@ -183,25 +202,26 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
|
|
183
202
|
|
184
203
|
// Title Area
|
185
204
|
.title-area {
|
186
|
-
position: relative;
|
187
205
|
margin: 0;
|
206
|
+
position: relative;
|
188
207
|
}
|
189
208
|
|
190
209
|
.name {
|
210
|
+
font-size: $rem-base;
|
191
211
|
height: $topbar-height;
|
192
212
|
margin: 0;
|
193
|
-
font-size: $rem-base;
|
194
213
|
|
195
|
-
h1 {
|
196
|
-
line-height: $topbar-height;
|
214
|
+
h1, h2, h3, h4, p, span {
|
197
215
|
font-size: $topbar-title-font-size;
|
216
|
+
line-height: $topbar-height;
|
198
217
|
margin: 0;
|
218
|
+
|
199
219
|
a {
|
200
|
-
font-weight: $topbar-title-weight;
|
201
220
|
color: $topbar-link-color;
|
202
|
-
width: 75%;
|
203
221
|
display: block;
|
222
|
+
font-weight: $topbar-title-weight;
|
204
223
|
padding: 0 $topbar-link-padding;
|
224
|
+
width: 75%;
|
205
225
|
}
|
206
226
|
}
|
207
227
|
}
|
@@ -209,72 +229,78 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
|
|
209
229
|
// Menu toggle button on small devices
|
210
230
|
.toggle-topbar {
|
211
231
|
position: absolute;
|
212
|
-
#{$
|
232
|
+
#{$topbar-menu-icon-position}: 0;
|
213
233
|
top: 0;
|
214
234
|
|
215
235
|
a {
|
216
236
|
color: $topbar-link-color;
|
217
|
-
|
237
|
+
display: block;
|
218
238
|
font-size: $topbar-menu-link-font-size;
|
219
239
|
font-weight: $topbar-menu-link-weight;
|
220
|
-
position: relative;
|
221
|
-
display: block;
|
222
|
-
padding: 0 $topbar-link-padding;
|
223
240
|
height: $topbar-height;
|
224
241
|
line-height: $topbar-height;
|
242
|
+
padding: 0 $topbar-link-padding;
|
243
|
+
position: relative;
|
244
|
+
text-transform: $topbar-menu-link-transform;
|
225
245
|
}
|
226
246
|
|
227
247
|
// Adding the class "menu-icon" will add the 3-line icon people love and adore.
|
228
248
|
&.menu-icon {
|
229
|
-
top: 50%;
|
230
249
|
margin-top: -16px;
|
250
|
+
top: 50%;
|
231
251
|
|
232
252
|
a {
|
253
|
+
@include hamburger(16px, false, 0, 1px, 6px, $topbar-menu-icon-color, "", false);
|
254
|
+
|
233
255
|
@if $text-direction == rtl {
|
234
256
|
text-indent: -58px;
|
235
257
|
}
|
258
|
+
color: $topbar-menu-link-color;
|
236
259
|
height: 34px;
|
237
260
|
line-height: 33px;
|
238
|
-
padding: 0 $topbar-link-padding+25 0 $topbar-link-padding;
|
239
|
-
color: $topbar-menu-link-color;
|
261
|
+
padding: 0 $topbar-link-padding+rem-calc(25) 0 $topbar-link-padding;
|
240
262
|
position: relative;
|
241
|
-
|
242
|
-
& {
|
243
|
-
// @include hamburger icon
|
244
|
-
//
|
245
|
-
// We use this to create the icon with three lines aka the hamburger icon, the menu-icon or the navicon
|
246
|
-
// $width - Width of hamburger icon
|
247
|
-
// $left - If false, icon will be centered horizontally || explicitly set value in rem
|
248
|
-
// $top - If false, icon will be centered vertically || explicitly set value in rem
|
249
|
-
// $thickness - thickness of lines in hamburger icon, set value in px
|
250
|
-
// $gap - spacing between the lines in hamburger icon, set value in px
|
251
|
-
// $color - icon color
|
252
|
-
// $hover-color - icon color during hover, here it isn't set b/c it would override $topbar-menu-icon-color-toggled
|
253
|
-
// $offcanvas - Set to false of @include in topbar
|
254
|
-
@include hamburger(16px, false, 0, 1px, 6px, $topbar-menu-icon-color, "", false);
|
255
|
-
}
|
256
263
|
}
|
257
264
|
}
|
258
265
|
}
|
259
266
|
|
260
267
|
// Change things up when the top-bar is expanded
|
261
268
|
&.expanded {
|
262
|
-
height: auto;
|
263
269
|
background: transparent;
|
270
|
+
height: auto;
|
264
271
|
|
265
|
-
.title-area {
|
272
|
+
.title-area {
|
273
|
+
background: $topbar-bg;
|
274
|
+
}
|
266
275
|
|
267
276
|
.toggle-topbar {
|
268
|
-
a {
|
269
|
-
|
277
|
+
a {
|
278
|
+
color: $topbar-menu-link-color-toggled;
|
279
|
+
|
280
|
+
span::after {
|
270
281
|
// Shh, don't tell, but box-shadows create the menu icon :)
|
271
282
|
// Change the color of the bars when the menu is expanded, using given thickness from hamburger() above
|
272
|
-
box-shadow: 0
|
283
|
+
box-shadow: 0 0 0 1px $topbar-menu-icon-color-toggled,
|
273
284
|
0 7px 0 1px $topbar-menu-icon-color-toggled,
|
274
285
|
0 14px 0 1px $topbar-menu-icon-color-toggled;
|
275
286
|
}
|
276
287
|
}
|
277
288
|
}
|
289
|
+
|
290
|
+
// Fixes an issue with Desktop and Mobile Safari where deeply-nested menus don't appear
|
291
|
+
@media screen and (-webkit-min-device-pixel-ratio:0) {
|
292
|
+
.top-bar-section {
|
293
|
+
.has-dropdown.moved > .dropdown,
|
294
|
+
.dropdown {
|
295
|
+
clip: initial;
|
296
|
+
}
|
297
|
+
|
298
|
+
// This was needed as parent ul's had padding, and the clip: was allowing content to peak through
|
299
|
+
.has-dropdown:not(.moved) > ul {
|
300
|
+
padding: 0;
|
301
|
+
}
|
302
|
+
}
|
303
|
+
}
|
278
304
|
}
|
279
305
|
}
|
280
306
|
|
@@ -286,12 +312,12 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
|
|
286
312
|
@include single-transition($default-float, $topbar-transition-speed);
|
287
313
|
|
288
314
|
ul {
|
289
|
-
padding: 0;
|
290
|
-
width: 100%;
|
291
|
-
height: auto;
|
292
315
|
display: block;
|
293
316
|
font-size: $rem-base;
|
317
|
+
height: auto;
|
294
318
|
margin: 0;
|
319
|
+
padding: 0;
|
320
|
+
width: 100%;
|
295
321
|
}
|
296
322
|
|
297
323
|
.divider,
|
@@ -304,75 +330,82 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
|
|
304
330
|
|
305
331
|
ul li {
|
306
332
|
background: $topbar-dropdown-bg;
|
307
|
-
|
308
|
-
|
309
|
-
width: 100%;
|
333
|
+
|
334
|
+
> a {
|
310
335
|
color: $topbar-link-color;
|
311
|
-
|
312
|
-
padding-#{$default-float}: $topbar-link-padding;
|
336
|
+
display: block;
|
313
337
|
font-family: $topbar-link-font-family;
|
314
338
|
font-size: $topbar-link-font-size;
|
315
339
|
font-weight: $topbar-link-weight;
|
340
|
+
padding-#{$default-float}: $topbar-link-padding;
|
341
|
+
padding: 12px 0 12px $topbar-link-padding;
|
316
342
|
text-transform: $topbar-link-text-transform;
|
317
|
-
|
343
|
+
width: 100%;
|
318
344
|
|
319
345
|
&.button {
|
320
346
|
font-size: $topbar-link-font-size;
|
321
|
-
padding-#{$opposite-direction}: $topbar-link-padding;
|
322
347
|
padding-#{$default-float}: $topbar-link-padding;
|
348
|
+
padding-#{$opposite-direction}: $topbar-link-padding;
|
323
349
|
@include button-style($bg:$primary-color);
|
324
350
|
}
|
351
|
+
|
325
352
|
&.button.secondary { @include button-style($bg:$secondary-color); }
|
326
353
|
&.button.success { @include button-style($bg:$success-color); }
|
327
354
|
&.button.alert { @include button-style($bg:$alert-color); }
|
328
355
|
&.button.warning { @include button-style($bg:$warning-color); }
|
356
|
+
&.button.info { @include button-style($bg:$info-color); }
|
329
357
|
}
|
330
358
|
|
331
359
|
> button {
|
332
360
|
font-size: $topbar-link-font-size;
|
333
|
-
padding-#{$opposite-direction}: $topbar-link-padding;
|
334
361
|
padding-#{$default-float}: $topbar-link-padding;
|
362
|
+
padding-#{$opposite-direction}: $topbar-link-padding;
|
335
363
|
@include button-style($bg:$primary-color);
|
336
364
|
|
337
365
|
&.secondary { @include button-style($bg:$secondary-color); }
|
338
366
|
&.success { @include button-style($bg:$success-color); }
|
339
367
|
&.alert { @include button-style($bg:$alert-color); }
|
340
368
|
&.warning { @include button-style($bg:$warning-color); }
|
369
|
+
&.info { @include button-style($bg:$info-color); }
|
341
370
|
}
|
342
371
|
|
343
372
|
// Apply the hover link color when it has that class
|
344
373
|
&:hover:not(.has-form) > a {
|
345
374
|
background-color: $topbar-link-bg-color-hover;
|
375
|
+
color: $topbar-link-color-hover;
|
376
|
+
|
346
377
|
@if ($topbar-link-bg-hover) {
|
347
378
|
background: $topbar-link-bg-hover;
|
348
379
|
}
|
349
|
-
color: $topbar-link-color-hover;
|
350
|
-
|
351
380
|
}
|
352
381
|
|
353
382
|
// Apply the active link color when it has that class
|
354
383
|
&.active > a {
|
355
384
|
background: $topbar-link-bg-active;
|
356
385
|
color: $topbar-link-color-active;
|
386
|
+
|
357
387
|
&:hover {
|
358
|
-
|
359
|
-
|
388
|
+
background: $topbar-link-bg-active-hover;
|
389
|
+
color: $topbar-link-color-active-hover;
|
360
390
|
}
|
361
391
|
}
|
362
392
|
}
|
363
393
|
|
364
394
|
// Add some extra padding for list items contains buttons
|
365
|
-
.has-form {
|
395
|
+
.has-form {
|
396
|
+
padding: $topbar-link-padding;
|
397
|
+
}
|
366
398
|
|
367
399
|
// Styling for list items that have a dropdown within them.
|
368
400
|
.has-dropdown {
|
369
401
|
position: relative;
|
370
402
|
|
371
|
-
|
403
|
+
> a {
|
372
404
|
&:after {
|
373
|
-
@if ($topbar-arrows){
|
405
|
+
@if ($topbar-arrows) {
|
374
406
|
@include css-triangle($topbar-dropdown-toggle-size, rgba($topbar-dropdown-toggle-color, $topbar-dropdown-toggle-alpha), $default-float);
|
375
407
|
}
|
408
|
+
|
376
409
|
margin-#{$opposite-direction}: $topbar-link-padding;
|
377
410
|
margin-top: -($topbar-dropdown-toggle-size / 2) - 2;
|
378
411
|
position: absolute;
|
@@ -381,12 +414,15 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
|
|
381
414
|
}
|
382
415
|
}
|
383
416
|
|
384
|
-
&.moved {
|
385
|
-
|
417
|
+
&.moved {
|
418
|
+
position: static;
|
419
|
+
|
420
|
+
> .dropdown {
|
386
421
|
@include topbar-show-dropdown();
|
387
422
|
width: 100%;
|
388
423
|
}
|
389
|
-
|
424
|
+
|
425
|
+
> a:after {
|
390
426
|
display: none;
|
391
427
|
}
|
392
428
|
}
|
@@ -394,16 +430,16 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
|
|
394
430
|
|
395
431
|
// Styling elements inside of dropdowns
|
396
432
|
.dropdown {
|
433
|
+
@include topbar-hide-dropdown();
|
397
434
|
padding: 0;
|
398
435
|
position: absolute;
|
399
|
-
#{$default-float}: 100%;
|
400
436
|
top: 0;
|
401
437
|
z-index: 99;
|
402
|
-
|
438
|
+
#{$default-float}: 100%;
|
403
439
|
|
404
440
|
li {
|
405
|
-
width: 100%;
|
406
441
|
height: auto;
|
442
|
+
width: 100%;
|
407
443
|
|
408
444
|
a {
|
409
445
|
font-weight: $topbar-dropdown-link-weight;
|
@@ -413,29 +449,37 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
|
|
413
449
|
}
|
414
450
|
}
|
415
451
|
|
416
|
-
&.title h5,
|
452
|
+
&.title h5,
|
453
|
+
&.parent-link {
|
417
454
|
// Back Button
|
418
455
|
margin-bottom: 0;
|
419
456
|
margin-top: 0;
|
420
457
|
font-size: $topbar-back-link-size;
|
421
458
|
a {
|
422
459
|
color: $topbar-link-color;
|
423
|
-
// line-height: $topbar-height / 2;
|
460
|
+
// line-height: ($topbar-height / 2);
|
424
461
|
display: block;
|
425
462
|
&:hover { background:none; }
|
426
463
|
}
|
427
464
|
}
|
428
|
-
|
429
|
-
|
465
|
+
|
466
|
+
&.has-form {
|
467
|
+
padding: 8px $topbar-link-padding;
|
468
|
+
}
|
469
|
+
|
470
|
+
.button,
|
471
|
+
button {
|
472
|
+
top: auto;
|
473
|
+
}
|
430
474
|
}
|
431
475
|
|
432
476
|
label {
|
433
|
-
padding: 8px $topbar-link-padding 2px;
|
434
|
-
margin-bottom: 0;
|
435
|
-
text-transform: $topbar-dropdown-label-text-transform;
|
436
477
|
color: $topbar-dropdown-label-color;
|
437
|
-
font-weight: $topbar-dropdown-label-font-weight;
|
438
478
|
font-size: $topbar-dropdown-label-font-size;
|
479
|
+
font-weight: $topbar-dropdown-label-font-weight;
|
480
|
+
margin-bottom: 0;
|
481
|
+
padding: 8px $topbar-link-padding 2px;
|
482
|
+
text-transform: $topbar-dropdown-label-text-transform;
|
439
483
|
}
|
440
484
|
}
|
441
485
|
}
|
@@ -446,30 +490,39 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
|
|
446
490
|
// Top Bar styles intended for screen sizes above the breakpoint.
|
447
491
|
@media #{$topbar-media-query} {
|
448
492
|
.top-bar {
|
449
|
-
background: $topbar-bg;
|
450
493
|
@include clearfix;
|
494
|
+
background: $topbar-bg;
|
451
495
|
overflow: visible;
|
452
496
|
|
453
497
|
.toggle-topbar { display: none; }
|
454
498
|
|
455
499
|
.title-area { float: $default-float; }
|
456
|
-
.name h1 a
|
500
|
+
.name h1 a,
|
501
|
+
.name h2 a,
|
502
|
+
.name h3 a,
|
503
|
+
.name h4 a,
|
504
|
+
.name h5 a,
|
505
|
+
.name h6 a { width: auto; }
|
457
506
|
|
458
507
|
input,
|
508
|
+
select,
|
459
509
|
.button,
|
460
510
|
button {
|
461
511
|
font-size: rem-calc(14);
|
512
|
+
height: $topbar-input-height;
|
462
513
|
position: relative;
|
463
|
-
top: $topbar-
|
514
|
+
top: (($topbar-height - $topbar-input-height) / 2);
|
464
515
|
}
|
465
516
|
|
466
|
-
&.expanded {
|
517
|
+
&.expanded {
|
518
|
+
background: $topbar-bg;
|
519
|
+
}
|
467
520
|
}
|
468
521
|
|
469
522
|
.contain-to-grid .top-bar {
|
470
|
-
max-width: $row-width;
|
471
|
-
margin: 0 auto;
|
472
523
|
margin-bottom: $topbar-margin-bottom;
|
524
|
+
margin: 0 auto;
|
525
|
+
max-width: $row-width;
|
473
526
|
}
|
474
527
|
|
475
528
|
.top-bar-section {
|
@@ -477,9 +530,9 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
|
|
477
530
|
#{$default-float}: 0 !important;
|
478
531
|
|
479
532
|
ul {
|
480
|
-
width: auto;
|
481
|
-
height: auto !important;
|
482
533
|
display: inline;
|
534
|
+
height: auto !important;
|
535
|
+
width: auto;
|
483
536
|
|
484
537
|
li {
|
485
538
|
float: $default-float;
|
@@ -497,11 +550,12 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
|
|
497
550
|
color: $topbar-link-color-hover;
|
498
551
|
}
|
499
552
|
}
|
553
|
+
|
500
554
|
&:not(.has-form) {
|
501
555
|
a:not(.button) {
|
502
|
-
padding: 0 $topbar-link-padding;
|
503
|
-
line-height: $topbar-height;
|
504
556
|
background: $topbar-link-bg;
|
557
|
+
line-height: $topbar-height;
|
558
|
+
padding: 0 $topbar-link-padding;
|
505
559
|
&:hover {
|
506
560
|
background-color: $topbar-link-bg-color-hover;
|
507
561
|
@if ($topbar-link-bg-hover) {
|
@@ -510,12 +564,13 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
|
|
510
564
|
}
|
511
565
|
}
|
512
566
|
}
|
567
|
+
|
513
568
|
&.active:not(.has-form) {
|
514
569
|
a:not(.button) {
|
515
|
-
padding: 0 $topbar-link-padding;
|
516
|
-
line-height: $topbar-height;
|
517
|
-
color: $topbar-link-color-active;
|
518
570
|
background: $topbar-link-bg-active;
|
571
|
+
color: $topbar-link-color-active;
|
572
|
+
line-height: $topbar-height;
|
573
|
+
padding: 0 $topbar-link-padding;
|
519
574
|
&:hover {
|
520
575
|
background: $topbar-link-bg-active-hover;
|
521
576
|
color: $topbar-link-color-active-hover;
|
@@ -525,85 +580,81 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
|
|
525
580
|
}
|
526
581
|
|
527
582
|
.has-dropdown {
|
528
|
-
|
529
|
-
|
530
|
-
|
531
|
-
& > a {
|
583
|
+
@if $topbar-arrows {
|
584
|
+
> a {
|
532
585
|
padding-#{$opposite-direction}: $topbar-link-padding + $topbar-link-dropdown-padding !important;
|
533
586
|
&:after {
|
534
587
|
@include css-triangle($topbar-dropdown-toggle-size, rgba($topbar-dropdown-toggle-color, $topbar-dropdown-toggle-alpha), top);
|
535
588
|
margin-top: -($topbar-dropdown-toggle-size / 2);
|
536
|
-
top: $topbar-height / 2;
|
589
|
+
top: ($topbar-height / 2);
|
537
590
|
}
|
538
591
|
}
|
539
|
-
|
540
592
|
}
|
541
593
|
|
542
594
|
&.moved { position: relative;
|
543
|
-
|
595
|
+
> .dropdown {
|
544
596
|
@include topbar-hide-dropdown();
|
545
597
|
}
|
546
598
|
}
|
547
599
|
|
548
600
|
&.hover, &.not-click:hover {
|
549
|
-
|
601
|
+
> .dropdown {
|
550
602
|
@include topbar-show-dropdown();
|
551
603
|
}
|
552
604
|
}
|
605
|
+
|
553
606
|
> a:focus + .dropdown {
|
554
607
|
@include topbar-show-dropdown();
|
555
608
|
}
|
556
609
|
|
557
610
|
.dropdown li.has-dropdown {
|
558
|
-
|
559
|
-
|
560
|
-
|
561
|
-
|
562
|
-
|
563
|
-
|
564
|
-
|
565
|
-
|
566
|
-
|
567
|
-
}
|
611
|
+
> a {
|
612
|
+
@if ($topbar-dropdown-arrows) {
|
613
|
+
&:after {
|
614
|
+
border: none;
|
615
|
+
content: "\00bb";
|
616
|
+
top: rem-calc(3);
|
617
|
+
|
618
|
+
#{$opposite-direction}: 5px;
|
619
|
+
}
|
568
620
|
}
|
569
621
|
}
|
570
622
|
}
|
571
|
-
|
572
623
|
}
|
573
624
|
|
574
625
|
.dropdown {
|
575
626
|
#{$default-float}: 0;
|
576
|
-
top: auto;
|
577
627
|
background: transparent;
|
578
628
|
min-width: 100%;
|
629
|
+
top: auto;
|
579
630
|
|
580
631
|
li {
|
581
632
|
a {
|
633
|
+
background: $topbar-dropdown-link-bg;
|
582
634
|
color: $topbar-dropdown-link-color;
|
583
635
|
line-height: $topbar-height;
|
584
|
-
white-space: nowrap;
|
585
636
|
padding: 12px $topbar-link-padding;
|
586
|
-
|
637
|
+
white-space: nowrap;
|
587
638
|
}
|
588
639
|
|
589
640
|
&:not(.has-form):not(.active) {
|
590
|
-
|
591
|
-
color: $topbar-dropdown-link-color;
|
641
|
+
> a:not(.button) {
|
592
642
|
background: $topbar-dropdown-link-bg;
|
643
|
+
color: $topbar-dropdown-link-color;
|
593
644
|
}
|
594
645
|
|
595
646
|
&:hover > a:not(.button) {
|
596
|
-
color: $topbar-dropdown-link-color-hover;
|
597
647
|
background-color: $topbar-link-bg-color-hover;
|
598
|
-
|
599
|
-
|
648
|
+
color: $topbar-dropdown-link-color-hover;
|
649
|
+
@if ($topbar-dropdown-link-bg-hover) {
|
650
|
+
background: $topbar-dropdown-link-bg-hover;
|
600
651
|
}
|
601
652
|
}
|
602
653
|
}
|
603
654
|
|
604
655
|
label {
|
605
|
-
white-space: nowrap;
|
606
656
|
background: $topbar-dropdown-label-bg;
|
657
|
+
white-space: nowrap;
|
607
658
|
}
|
608
659
|
|
609
660
|
// Second Level Dropdowns
|
@@ -614,11 +665,11 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
|
|
614
665
|
}
|
615
666
|
}
|
616
667
|
|
617
|
-
|
618
|
-
|
668
|
+
> ul > .divider,
|
669
|
+
> ul > [role="separator"] {
|
670
|
+
border-#{$opposite-direction}: $topbar-divider-border-bottom;
|
619
671
|
border-bottom: none;
|
620
672
|
border-top: none;
|
621
|
-
border-#{$opposite-direction}: $topbar-divider-border-bottom;
|
622
673
|
clear: none;
|
623
674
|
height: $topbar-height;
|
624
675
|
width: 0;
|
@@ -626,8 +677,8 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
|
|
626
677
|
|
627
678
|
.has-form {
|
628
679
|
background: $topbar-link-bg;
|
629
|
-
padding: 0 $topbar-height / 3;
|
630
680
|
height: $topbar-height;
|
681
|
+
padding: 0 $topbar-link-padding;
|
631
682
|
}
|
632
683
|
|
633
684
|
// Position overrides for ul.right and ul.left
|
@@ -671,10 +722,11 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
|
|
671
722
|
|
672
723
|
.has-dropdown {
|
673
724
|
&:hover {
|
674
|
-
|
725
|
+
> .dropdown {
|
675
726
|
@include topbar-show-dropdown();
|
676
727
|
}
|
677
728
|
}
|
729
|
+
|
678
730
|
> a:focus + .dropdown {
|
679
731
|
@include topbar-show-dropdown();
|
680
732
|
}
|