zitgit 0.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (65) hide show
  1. data/.gitignore +17 -0
  2. data/Gemfile +5 -0
  3. data/Gemfile.lock +94 -0
  4. data/Guardfile +6 -0
  5. data/LICENSE.txt +22 -0
  6. data/README.md +29 -0
  7. data/Rakefile +1 -0
  8. data/bin/zitgit +4 -0
  9. data/lib/zitgit/version.rb +3 -0
  10. data/lib/zitgit.rb +57 -0
  11. data/public/coffee/application.coffee +54 -0
  12. data/public/css/app.css +4071 -0
  13. data/public/images/loader.gif +0 -0
  14. data/public/js/application.js +69 -0
  15. data/public/js/jquery.js +5 -0
  16. data/public/js/jquery.nicescroll.js +111 -0
  17. data/public/scss/app.scss +155 -0
  18. data/public/scss/foundation/foundation/_variables.scss +1037 -0
  19. data/public/scss/foundation/foundation/components/_alert-boxes.scss +106 -0
  20. data/public/scss/foundation/foundation/components/_block-grid.scss +70 -0
  21. data/public/scss/foundation/foundation/components/_breadcrumbs.scss +124 -0
  22. data/public/scss/foundation/foundation/components/_button-groups.scss +88 -0
  23. data/public/scss/foundation/foundation/components/_buttons.scss +226 -0
  24. data/public/scss/foundation/foundation/components/_clearing.scss +211 -0
  25. data/public/scss/foundation/foundation/components/_custom-forms.scss +240 -0
  26. data/public/scss/foundation/foundation/components/_dropdown-buttons.scss +114 -0
  27. data/public/scss/foundation/foundation/components/_dropdown.scss +149 -0
  28. data/public/scss/foundation/foundation/components/_flex-video.scss +45 -0
  29. data/public/scss/foundation/foundation/components/_forms.scss +348 -0
  30. data/public/scss/foundation/foundation/components/_global.scss +267 -0
  31. data/public/scss/foundation/foundation/components/_grid.scss +184 -0
  32. data/public/scss/foundation/foundation/components/_inline-lists.scss +52 -0
  33. data/public/scss/foundation/foundation/components/_joyride.scss +208 -0
  34. data/public/scss/foundation/foundation/components/_keystrokes.scss +56 -0
  35. data/public/scss/foundation/foundation/components/_labels.scss +84 -0
  36. data/public/scss/foundation/foundation/components/_magellan.scss +21 -0
  37. data/public/scss/foundation/foundation/components/_orbit.scss +207 -0
  38. data/public/scss/foundation/foundation/components/_pagination.scss +99 -0
  39. data/public/scss/foundation/foundation/components/_panels.scss +76 -0
  40. data/public/scss/foundation/foundation/components/_pricing-tables.scss +130 -0
  41. data/public/scss/foundation/foundation/components/_progress-bars.scss +70 -0
  42. data/public/scss/foundation/foundation/components/_reveal.scss +131 -0
  43. data/public/scss/foundation/foundation/components/_section.scss +303 -0
  44. data/public/scss/foundation/foundation/components/_side-nav.scss +68 -0
  45. data/public/scss/foundation/foundation/components/_split-buttons.scss +159 -0
  46. data/public/scss/foundation/foundation/components/_sub-nav.scss +67 -0
  47. data/public/scss/foundation/foundation/components/_switch.scss +249 -0
  48. data/public/scss/foundation/foundation/components/_tables.scss +80 -0
  49. data/public/scss/foundation/foundation/components/_thumbs.scss +47 -0
  50. data/public/scss/foundation/foundation/components/_tooltips.scss +113 -0
  51. data/public/scss/foundation/foundation/components/_top-bar.scss +462 -0
  52. data/public/scss/foundation/foundation/components/_type.scss +422 -0
  53. data/public/scss/foundation/foundation/components/_visibility.scss +320 -0
  54. data/public/scss/foundation/foundation.scss +46 -0
  55. data/public/scss/foundation/normalize.scss +402 -0
  56. data/views/branch.slim +1 -0
  57. data/views/commits/detail.slim +12 -0
  58. data/views/commits/labels.slim +9 -0
  59. data/views/commits/list.slim +22 -0
  60. data/views/diffs/list.slim +39 -0
  61. data/views/index.slim +36 -0
  62. data/views/layout.slim +9 -0
  63. data/views/refs/dropdown.slim +3 -0
  64. data/zitgit.gemspec +30 -0
  65. metadata +239 -0
@@ -0,0 +1,211 @@
1
+ //
2
+ // Clearing Variables
3
+ //
4
+
5
+ // We use these to set the background colors for parts of Clearing.
6
+ $clearing-bg: #111 !default;
7
+ $clearing-caption-bg: $clearing-bg !default;
8
+ $clearing-carousel-bg: #111 !default;
9
+ $clearing-img-bg: $clearing-bg !default;
10
+
11
+ // We use these to style the close button
12
+ $clearing-close-color: #fff !default;
13
+ $clearing-close-size: 40px !default;
14
+
15
+ // We use these to style the arrows
16
+ $clearing-arrow-size: 16px !default;
17
+ $clearing-arrow-color: $clearing-close-color !default;
18
+
19
+ // We use these to style captions
20
+ $clearing-caption-font-color: #fff !default;
21
+ $clearing-caption-padding: 10px 30px !default;
22
+
23
+ // We use these to make the image and carousel height and style
24
+ $clearing-active-img-height: 75% !default;
25
+ $clearing-carousel-height: 150px !default;
26
+ $clearing-carousel-thumb-width: 175px !default;
27
+ $clearing-carousel-thumb-active-border: 4px solid rgb(255,255,255) !default;
28
+
29
+
30
+ // We decided to not create a mixin for Clearing because it relies
31
+ // on predefined classes and structure to work properly.
32
+ // The variables above should give enough control.
33
+
34
+ /* Clearing Styles */
35
+ [data-clearing] {
36
+ @include clearfix;
37
+ margin-bottom: 0;
38
+ }
39
+
40
+ .clearing-blackout {
41
+ background: $clearing-bg;
42
+ position: fixed;
43
+ width: 100%;
44
+ height: 100%;
45
+ top: 0;
46
+ #{$default-float}: 0;
47
+ z-index: 998;
48
+
49
+ .clearing-close { display: block; }
50
+ }
51
+
52
+ .clearing-container {
53
+ position: relative;
54
+ z-index: 998;
55
+ height: 100%;
56
+ overflow: hidden;
57
+ margin: 0;
58
+ }
59
+
60
+ .visible-img {
61
+ height: 95%;
62
+ position: relative;
63
+
64
+ img {
65
+ position: absolute;
66
+ #{$default-float}: 50%;
67
+ top: 50%;
68
+ margin-#{$default-float}: -50%;
69
+ max-height: 100%;
70
+ max-width: 100%;
71
+ }
72
+ }
73
+
74
+ .clearing-caption {
75
+ color: $clearing-caption-font-color;
76
+ line-height: 1.3;
77
+ margin-bottom: 0;
78
+ text-align: center;
79
+ bottom: 0;
80
+ background: $clearing-caption-bg;
81
+ width: 100%;
82
+ padding: $clearing-caption-padding;
83
+ position: absolute;
84
+ #{$default-float}: 0;
85
+ }
86
+
87
+ .clearing-close {
88
+ z-index: 999;
89
+ padding-#{$default-float}: 20px;
90
+ padding-top: 10px;
91
+ font-size: $clearing-close-size;
92
+ line-height: 1;
93
+ color: $clearing-close-color;
94
+ display: none;
95
+
96
+ &:hover,
97
+ &:focus { color: #ccc; }
98
+ }
99
+
100
+ .clearing-assembled .clearing-container { height: 100%;
101
+ .carousel > ul { display: none; }
102
+ }
103
+
104
+
105
+ // Large screen overrides
106
+ @media #{$small} {
107
+ .clearing-main-prev,
108
+ .clearing-main-next {
109
+ position: absolute;
110
+ height: 100%;
111
+ width: 40px;
112
+ top: 0;
113
+ & > span {
114
+ position: absolute;
115
+ top: 50%;
116
+ display: block;
117
+ width: 0;
118
+ height: 0;
119
+ border: solid $clearing-arrow-size;
120
+ }
121
+ }
122
+ .clearing-main-prev {
123
+ #{$default-float}: 0;
124
+ & > span {
125
+ #{$default-float}: 5px;
126
+ border-color: transparent;
127
+ border-#{$opposite-direction}-color: $clearing-arrow-color;
128
+ }
129
+ }
130
+ .clearing-main-next {
131
+ #{$opposite-direction}: 0;
132
+ & > span {
133
+ border-color: transparent;
134
+ border-#{$default-float}-color: $clearing-arrow-color;
135
+ }
136
+ }
137
+
138
+ .clearing-main-prev.disabled,
139
+ .clearing-main-next.disabled { opacity: 0.5; }
140
+
141
+ // If you want to show a lightbox, but only have a single image come through as the thumbnail
142
+ .clearing-feature ~ li { display: none; }
143
+
144
+ .clearing-assembled .clearing-container {
145
+
146
+ .carousel {
147
+ background: $clearing-carousel-bg;
148
+ height: $clearing-carousel-height;
149
+ margin-top: 5px;
150
+
151
+ & > ul {
152
+ display: block;
153
+ z-index: 999;
154
+ width: 200%;
155
+ height: 100%;
156
+ margin-#{$default-float}: 0;
157
+ position: relative;
158
+ #{$default-float}: 0;
159
+
160
+ li {
161
+ display: block;
162
+ width: $clearing-carousel-thumb-width;
163
+ height: inherit;
164
+ padding: 0;
165
+ float: $default-float;
166
+ overflow: hidden;
167
+ margin-#{$opposite-direction}: 1px;
168
+ position: relative;
169
+ cursor: pointer;
170
+ opacity: 0.4;
171
+
172
+ &.fix-height {
173
+ img {
174
+ min-height: 100%;
175
+ height: 100%;
176
+ max-width: none;
177
+ }
178
+ }
179
+
180
+ a.th {
181
+ border: none;
182
+ -webkit-box-shadow: none;
183
+ box-shadow: none;
184
+ display: block;
185
+ }
186
+
187
+ img {
188
+ cursor: pointer !important;
189
+ min-width: 100% !important;
190
+ }
191
+
192
+ &.visible { opacity: 1; }
193
+ }
194
+ }
195
+ }
196
+
197
+ .visible-img {
198
+ background: $clearing-img-bg;
199
+ overflow: hidden;
200
+ height: $clearing-active-img-height;
201
+ }
202
+ }
203
+
204
+ .clearing-close {
205
+ position: absolute;
206
+ top: 10px;
207
+ #{$opposite-direction}: 20px;
208
+ padding-#{$default-float}: 0;
209
+ padding-top: 0;
210
+ }
211
+ }
@@ -0,0 +1,240 @@
1
+ //
2
+ // Custom Form Variables
3
+ //
4
+
5
+ // We use these to control the basic form styles input styles
6
+ $custom-form-border-color: #ccc !default;
7
+ $custom-form-bg: #fff !default;
8
+ $custom-form-bg-disabled: #ddd !default;
9
+ $custom-form-check-color: #222 !default;
10
+
11
+ // We use these to style the custom select form element.
12
+ $custom-select-bg: #fff !default;
13
+ $custom-select-fade-to-color: #f3f3f3 !default;
14
+ $custom-select-border-color: #ddd !default;
15
+ $custom-select-triangle-color: #aaa !default;
16
+ $custom-select-triangle-color-open: #222 !default;
17
+ $custom-select-height: emCalc(13px) + ($form-spacing * 1.5) !default;
18
+ $custom-select-margin-bottom: emCalc(20px) !default;
19
+ $custom-select-font-color-selected: #141414 !default;
20
+ $custom-select-disabled-color: #888 !default;
21
+
22
+ // We use these to control the style of the custom select dropdown element.
23
+ $custom-dropdown-height: 200px !default;
24
+ $custom-dropdown-bg: #fff !default;
25
+ $custom-dropdown-border-color: darken(#fff, 20%) !default;
26
+ $custom-dropdown-border-width: 1px !default;
27
+ $custom-dropdown-border-style: solid !default;
28
+ $custom-dropdown-font-color: #555 !default;
29
+ $custom-dropdown-font-size: emCalc(14px) !default;
30
+ $custom-dropdown-color-selected: #eeeeee !default;
31
+ $custom-dropdown-font-color-selected: #000 !default;
32
+ $custom-dropdown-shadow: 0 2px 2px 0px rgba(0,0,0,0.1) !default;
33
+ $custom-dropdown-offset-top: auto !default;
34
+ $custom-dropdown-list-padding: emCalc(4px) !default;
35
+ $custom-dropdown-default-float-padding: emCalc(6px) !default;
36
+ $custom-dropdown-opposite-padding: emCalc(38px) !default;
37
+ $custom-dropdown-list-item-min-height: emCalc(24px) !default;
38
+ $custom-dropdown-width-small: 134px !default;
39
+ $custom-dropdown-width-medium: 254px !default;
40
+ $custom-dropdown-width-large: 434px !default;
41
+
42
+ // We decided not to make a mixin for the custom forms because
43
+ // they rely on a very specific class naming structure.
44
+ // We may look at updating this in the future.
45
+
46
+ // Only include these classes if the variable is true, otherwise they'll be left out.
47
+ @if $include-html-button-classes != false {
48
+
49
+ /* Custom Checkbox and Radio Inputs */
50
+ form.custom {
51
+
52
+ .custom {
53
+ display: inline-block;
54
+ width: 16px;
55
+ height: 16px;
56
+ position: relative;
57
+ top: 2px;
58
+ border: solid 1px $custom-form-border-color;
59
+ background: $custom-form-bg;
60
+
61
+ &.radio { @include radius(1000px); }
62
+
63
+ &.checkbox {
64
+ &:before {
65
+ content: "";
66
+ display: block;
67
+ line-height: 0.8;
68
+ height: 14px;
69
+ width: 14px;
70
+ text-align: center;
71
+ position: absolute;
72
+ top: 0;
73
+ #{$default-float}: 0;
74
+ font-size: 14px;
75
+ color: #fff;
76
+ }
77
+ }
78
+
79
+ &.radio.checked {
80
+ &:before {
81
+ content: "";
82
+ display: block;
83
+ width: 8px;
84
+ height: 8px;
85
+ @include radius(1000px);
86
+ background: $custom-form-check-color;
87
+ position: relative;
88
+ top: 3px;
89
+ #{$default-float}: 3px;
90
+ }
91
+ }
92
+
93
+ &.checkbox.checked {
94
+ &:before {
95
+ content: "\00d7";
96
+ color: $custom-form-check-color;
97
+ }
98
+ }
99
+ }
100
+ }
101
+
102
+ /* Custom Select Options and Dropdowns */
103
+ form.custom {
104
+ .custom.dropdown {
105
+ display: block;
106
+ position: relative;
107
+ top: 0;
108
+ height: $custom-select-height;
109
+ margin-bottom: $custom-select-margin-bottom;
110
+ margin-top: 0px;
111
+ padding: 0px;
112
+ width: 100%;
113
+ background: $custom-dropdown-bg;
114
+ background: -moz-linear-gradient(top, $custom-dropdown-bg 0%, $custom-select-fade-to-color 100%);
115
+ background: -webkit-linear-gradient(top, $custom-dropdown-bg 0%,$custom-select-fade-to-color 100%);
116
+ background: linear-gradient(to bottom, $custom-dropdown-bg 0%,$custom-select-fade-to-color 100%);
117
+ -webkit-box-shadow: none;
118
+ box-shadow: none;
119
+ font-size: $custom-dropdown-font-size;
120
+ vertical-align: top;
121
+
122
+ ul {
123
+ overflow-y: auto;
124
+ max-height: $custom-dropdown-height;
125
+ }
126
+
127
+ .current {
128
+ cursor:default;
129
+ white-space: nowrap;
130
+ line-height: $custom-select-height - emCalc(1px);
131
+ color: $input-font-color;
132
+ text-decoration: none;
133
+ overflow: hidden;
134
+ display: block;
135
+ margin-#{$default-float}: $form-spacing / 2;
136
+ margin-#{$opposite-direction}: $custom-select-height;
137
+ }
138
+
139
+ .selector {
140
+ cursor:default;
141
+ position: absolute;
142
+ width: $form-spacing * 2.5;
143
+ height: $custom-select-height;
144
+ display: block;
145
+ #{$opposite-direction}: 0;
146
+ top: 0;
147
+ &:after {
148
+ content: "";
149
+ display: block;
150
+ @include css-triangle(5px, $custom-select-triangle-color, top);
151
+ position: absolute;
152
+ #{$default-float}: ($form-spacing * 2.5) / 2 - emCalc(5px);
153
+ top: 50%;
154
+ margin-top: -3px;
155
+ }
156
+ }
157
+
158
+ &:hover, &.open {
159
+ a.selector {
160
+ &:after { @include css-triangle(5px, $custom-select-triangle-color-open, top); }
161
+ }
162
+ }
163
+
164
+ .disabled {
165
+ color: $custom-select-disabled-color;
166
+ &:hover {
167
+ background: transparent;
168
+ color: $custom-select-disabled-color;
169
+ &:after { display: none; }
170
+ }
171
+ }
172
+
173
+ &.open ul {
174
+ display: block;
175
+ z-index: 10;
176
+ min-width:100%;
177
+ @include box-sizing(content-box);
178
+ }
179
+
180
+ &.small { max-width: $custom-dropdown-width-small; }
181
+ &.medium { max-width: $custom-dropdown-width-medium; }
182
+ &.large { max-width: $custom-dropdown-width-large; }
183
+ &.expand { width: 100% !important; }
184
+
185
+ &.open.small ul { min-width: $custom-dropdown-width-small; @include box-sizing(border-box); }
186
+ &.open.medium ul { min-width: $custom-dropdown-width-medium; @include box-sizing(border-box); }
187
+ &.open.large ul { min-width: $custom-dropdown-width-large; @include box-sizing(border-box); }
188
+ }
189
+
190
+ .custom.dropdown ul {
191
+ position: absolute;
192
+ width: auto;
193
+ display: none;
194
+ margin: 0;
195
+ #{$default-float}: -$input-border-width;
196
+ top: $custom-dropdown-offset-top;
197
+ -webkit-box-shadow: $custom-dropdown-shadow;
198
+ box-shadow: $custom-dropdown-shadow;
199
+ margin: 0;
200
+ padding: 0;
201
+ background: $custom-dropdown-bg;
202
+ border: $custom-dropdown-border-style $custom-dropdown-border-width $custom-dropdown-border-color;
203
+ font-size: $em-base;
204
+
205
+ li {
206
+ color: $custom-dropdown-font-color;
207
+ font-size: $custom-dropdown-font-size;
208
+ cursor: default;
209
+ padding-top: $custom-dropdown-list-padding;
210
+ padding-bottom: $custom-dropdown-list-padding;
211
+ padding-#{$default-float}: $custom-dropdown-default-float-padding;
212
+ padding-#{$opposite-direction}: $custom-dropdown-opposite-padding;
213
+ min-height: $custom-dropdown-list-item-min-height;
214
+ line-height: $custom-dropdown-list-item-min-height;
215
+ margin: 0;
216
+ white-space: nowrap;
217
+ list-style: none;
218
+
219
+ &.selected {
220
+ background: $custom-dropdown-color-selected;
221
+ color: $custom-dropdown-font-color-selected;
222
+ }
223
+ &:hover {
224
+ background-color: darken($custom-dropdown-color-selected, 4%);
225
+ color: $custom-dropdown-font-color-selected;
226
+ }
227
+ &.selected:hover {
228
+ background: $custom-dropdown-color-selected;
229
+ cursor: default;
230
+ color: $custom-dropdown-font-color-selected;
231
+ }
232
+ }
233
+
234
+ &.show { display: block; }
235
+ }
236
+
237
+ /* Custom input, disabled */
238
+ .custom.disabled { background-color: $custom-form-bg-disabled; }
239
+ }
240
+ }
@@ -0,0 +1,114 @@
1
+ //
2
+ // Dropdown Button Variables
3
+ //
4
+
5
+ // We use these to set the color of the pip in dropdown buttons
6
+ $dropdown-button-pip-color: #fff !default;
7
+ $dropdown-button-pip-color-alt: #333 !default;
8
+
9
+ // We use these to style tiny dropdown buttons
10
+ $dropdown-button-padding-tny: $button-tny * 5 !default;
11
+ $dropdown-button-pip-size-tny: $button-tny !default;
12
+ $dropdown-button-pip-opposite-tny: $button-tny * 2 !default;
13
+ $dropdown-button-pip-top-tny: -$button-tny / 2 + emCalc(1px) !default;
14
+
15
+ // We use these to style small dropdown buttons
16
+ $dropdown-button-padding-sml: $button-sml * 5 !default;
17
+ $dropdown-button-pip-size-sml: $button-sml !default;
18
+ $dropdown-button-pip-opposite-sml: $button-sml * 2 !default;
19
+ $dropdown-button-pip-top-sml: -$button-sml / 2 + emCalc(1px) !default;
20
+
21
+ // We use these to style medium dropdown buttons
22
+ $dropdown-button-padding-med: $button-med * 4 + emCalc(3px) !default;
23
+ $dropdown-button-pip-size-med: $button-med - emCalc(3px) !default;
24
+ $dropdown-button-pip-opposite-med: $button-med * 2 !default;
25
+ $dropdown-button-pip-top-med: -$button-med / 2 + emCalc(2px) !default;
26
+
27
+ // We use these to style large dropdown buttons
28
+ $dropdown-button-padding-lrg: $button-lrg * 4 !default;
29
+ $dropdown-button-pip-size-lrg: $button-lrg - emCalc(6px) !default;
30
+ $dropdown-button-pip-opposite-lrg: $button-lrg + emCalc(12px) !default;
31
+ $dropdown-button-pip-top-lrg: -$button-lrg / 2 + emCalc(3px) !default;
32
+
33
+ //
34
+ // Dropdown Button Mixin
35
+ //
36
+
37
+ // We use this mixin to build off of the button mixin and add dropdown button styles
38
+ @mixin dropdown-button($padding:medium, $pip-color:#fff, $base-style:true) {
39
+
40
+ // We add in base styles, but they can be negated by setting to 'false'.
41
+ @if $base-style {
42
+ position: relative;
43
+
44
+ // This creates the base styles for the triangle pip
45
+ &:before {
46
+ position: absolute;
47
+ content: "";
48
+ width: 0;
49
+ height: 0;
50
+ display: block;
51
+ border-style: solid;
52
+ border-color: $dropdown-button-pip-color transparent transparent transparent;
53
+ top: 50%;
54
+ }
55
+ }
56
+
57
+ // If we're dealing with tiny buttons, use these styles
58
+ @if $padding == tiny {
59
+ padding-#{$opposite-direction}: $dropdown-button-padding-tny;
60
+ &:before {
61
+ border-width: $dropdown-button-pip-size-tny;
62
+ #{$opposite-direction}: $dropdown-button-pip-opposite-tny;
63
+ margin-top: $dropdown-button-pip-top-tny;
64
+ }
65
+ }
66
+
67
+ // If we're dealing with small buttons, use these styles
68
+ @if $padding == small {
69
+ padding-#{$opposite-direction}: $dropdown-button-padding-sml;
70
+ &:before {
71
+ border-width: $dropdown-button-pip-size-sml;
72
+ #{$opposite-direction}: $dropdown-button-pip-opposite-sml;
73
+ margin-top: $dropdown-button-pip-top-sml;
74
+ }
75
+ }
76
+
77
+ // If we're dealing with default (medium) buttons, use these styles
78
+ @if $padding == medium {
79
+ padding-#{$opposite-direction}: $dropdown-button-padding-med;
80
+ &:before {
81
+ border-width: $dropdown-button-pip-size-med;
82
+ #{$opposite-direction}: $dropdown-button-pip-opposite-med;
83
+ margin-top: $dropdown-button-pip-top-med;
84
+ }
85
+ }
86
+
87
+ // If we're dealing with large buttons, use these styles
88
+ @if $padding == large {
89
+ padding-#{$opposite-direction}: $dropdown-button-padding-lrg;
90
+ &:before {
91
+ border-width: $dropdown-button-pip-size-lrg;
92
+ #{$opposite-direction}: $dropdown-button-pip-opposite-lrg;
93
+ margin-top: $dropdown-button-pip-top-lrg;
94
+ }
95
+ }
96
+
97
+ // We can control the pip color. We didn't use logic in this case, just set it and forget it.
98
+ @if $pip-color {
99
+ &:before { border-color: $pip-color transparent transparent transparent; }
100
+ }
101
+ }
102
+
103
+
104
+ @if $include-html-button-classes != false {
105
+
106
+ /* Dropdown Button */
107
+ .dropdown.button { @include dropdown-button;
108
+ &.tiny { @include dropdown-button(tiny,$base-style:false); }
109
+ &.small { @include dropdown-button(small,$base-style:false); }
110
+ &.large { @include dropdown-button(large,$base-style:false); }
111
+ &.secondary:before { border-color: $dropdown-button-pip-color-alt transparent transparent transparent; }
112
+ }
113
+
114
+ }
@@ -0,0 +1,149 @@
1
+ //
2
+ // Dropdown Variables
3
+ //
4
+
5
+ // We use these to controls height and width styles.
6
+ $f-dropdown-max-width: 200px !default;
7
+ $f-dropdown-height: auto !default;
8
+ $f-dropdown-max-height: none !default;
9
+ $f-dropdown-margin-top: 2px !default;
10
+
11
+ // We use this to control the background color
12
+ $f-dropdown-bg: #fff !default;
13
+
14
+ // We use this to set the border styles for dropdowns.
15
+ $f-dropdown-border-style: solid !default;
16
+ $f-dropdown-border-width: 1px !default;
17
+ $f-dropdown-border-color: darken(#fff, 20%) !default;
18
+
19
+ // We use these to style the triangle pip.
20
+ $f-dropdown-triangle-size: 6px !default;
21
+ $f-dropdown-triangle-color: #fff !default;
22
+ $f-dropdown-triangle-side-offset: 10px !default;
23
+
24
+ // We use these to control styles for the list elements.
25
+ $f-dropdown-list-style: none !default;
26
+ $f-dropdown-font-color: #555 !default;
27
+ $f-dropdown-font-size: emCalc(14px) !default;
28
+ $f-dropdown-list-padding: emCalc(5px) emCalc(10px) !default;
29
+ $f-dropdown-line-height: emCalc(18px) !default;
30
+ $f-dropdown-list-hover-bg: #eeeeee !default;
31
+ $dropdown-mobile-default-float: 0 !default;
32
+
33
+ // We use this to control the styles for when the dropdown has custom content.
34
+ $f-dropdown-content-padding: emCalc(20px) !default;
35
+
36
+ //
37
+ // Dropdown Mixins
38
+ //
39
+
40
+ // NOTE: Make default max-width change between list and content types. Can add more width with classes, maybe .small, .medium, .large, etc.;
41
+
42
+ // We use this to style the dropdown container element.
43
+ @mixin dropdown-container($content:list, $triangle:true, $max-width:$f-dropdown-max-width) {
44
+ position: absolute;
45
+ top: -9999px;
46
+ list-style: $f-dropdown-list-style;
47
+
48
+ *:first-child { margin-top: 0; }
49
+ *:last-child { margin-bottom: 0; }
50
+
51
+ @if $content == list {
52
+ width: 100%;
53
+ max-height: $f-dropdown-max-height;
54
+ height: $f-dropdown-height;
55
+ background: $f-dropdown-bg;
56
+ border: $f-dropdown-border-style $f-dropdown-border-width $f-dropdown-border-color;
57
+ font-size: $em-base;
58
+ z-index: 99;
59
+ }
60
+ @else if $content == content {
61
+ padding: $f-dropdown-content-padding;
62
+ width: 100%;
63
+ height: $f-dropdown-height;
64
+ max-height: $f-dropdown-max-height;
65
+ background: $f-dropdown-bg;
66
+ border: $f-dropdown-border-style $f-dropdown-border-width $f-dropdown-border-color;
67
+ font-size: $em-base;
68
+ z-index: 99;
69
+ }
70
+
71
+ @if $triangle {
72
+ margin-top: $f-dropdown-margin-top;
73
+
74
+ &:before {
75
+ @include css-triangle($f-dropdown-triangle-size, $f-dropdown-triangle-color, bottom);
76
+ position: absolute;
77
+ top: -($f-dropdown-triangle-size * 2);
78
+ #{$default-float}: $f-dropdown-triangle-side-offset;
79
+ z-index: 99;
80
+ }
81
+ &:after {
82
+ @include css-triangle($f-dropdown-triangle-size + 1, $f-dropdown-border-color, bottom);
83
+ position: absolute;
84
+ top: -(($f-dropdown-triangle-size + 1) * 2);
85
+ #{$default-float}: $f-dropdown-triangle-side-offset - 1;
86
+ z-index: 98;
87
+ }
88
+
89
+ &.right:before {
90
+ left: auto;
91
+ right: $f-dropdown-triangle-side-offset;
92
+ }
93
+ &.right:after {
94
+ left: auto;
95
+ right: $f-dropdown-triangle-side-offset - 1;
96
+ }
97
+ }
98
+
99
+ @if $max-width { max-width: $max-width; }
100
+ @else { max-width: $f-dropdown-max-width; }
101
+
102
+ }
103
+
104
+ // We use this to style the list elements or content inside the dropdown.
105
+ @mixin dropdown-style {
106
+ font-size: $f-dropdown-font-size;
107
+ cursor: pointer;
108
+
109
+ line-height: $f-dropdown-line-height;
110
+ margin: 0;
111
+
112
+ &:hover,
113
+ &:focus { background: $f-dropdown-list-hover-bg; }
114
+
115
+ a {
116
+ display: block;
117
+ padding: $f-dropdown-list-padding;
118
+ color: $f-dropdown-font-color;
119
+ }
120
+ }
121
+
122
+
123
+ @if $include-html-nav-classes != false {
124
+
125
+ @media only screen and (max-width: 767px) {
126
+ .f-dropdown {
127
+ max-width: 100%;
128
+ #{$default-float}: $dropdown-mobile-default-float;
129
+ }
130
+ }
131
+
132
+ /* Foundation Dropdowns */
133
+ .f-dropdown {
134
+ @include dropdown-container(content);
135
+ // max-width: none;
136
+
137
+ li { @include dropdown-style; }
138
+
139
+ // You can also put custom content in these dropdowns
140
+ &.content { @include dropdown-container(content, $triangle:false); }
141
+
142
+ // Sizes
143
+ &.tiny { max-width: 200px; }
144
+ &.small { max-width: 300px; }
145
+ &.medium { max-width: 500px; }
146
+ &.large { max-width: 800px; }
147
+ }
148
+
149
+ }