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.
- data/.gitignore +17 -0
- data/Gemfile +5 -0
- data/Gemfile.lock +94 -0
- data/Guardfile +6 -0
- data/LICENSE.txt +22 -0
- data/README.md +29 -0
- data/Rakefile +1 -0
- data/bin/zitgit +4 -0
- data/lib/zitgit/version.rb +3 -0
- data/lib/zitgit.rb +57 -0
- data/public/coffee/application.coffee +54 -0
- data/public/css/app.css +4071 -0
- data/public/images/loader.gif +0 -0
- data/public/js/application.js +69 -0
- data/public/js/jquery.js +5 -0
- data/public/js/jquery.nicescroll.js +111 -0
- data/public/scss/app.scss +155 -0
- data/public/scss/foundation/foundation/_variables.scss +1037 -0
- data/public/scss/foundation/foundation/components/_alert-boxes.scss +106 -0
- data/public/scss/foundation/foundation/components/_block-grid.scss +70 -0
- data/public/scss/foundation/foundation/components/_breadcrumbs.scss +124 -0
- data/public/scss/foundation/foundation/components/_button-groups.scss +88 -0
- data/public/scss/foundation/foundation/components/_buttons.scss +226 -0
- data/public/scss/foundation/foundation/components/_clearing.scss +211 -0
- data/public/scss/foundation/foundation/components/_custom-forms.scss +240 -0
- data/public/scss/foundation/foundation/components/_dropdown-buttons.scss +114 -0
- data/public/scss/foundation/foundation/components/_dropdown.scss +149 -0
- data/public/scss/foundation/foundation/components/_flex-video.scss +45 -0
- data/public/scss/foundation/foundation/components/_forms.scss +348 -0
- data/public/scss/foundation/foundation/components/_global.scss +267 -0
- data/public/scss/foundation/foundation/components/_grid.scss +184 -0
- data/public/scss/foundation/foundation/components/_inline-lists.scss +52 -0
- data/public/scss/foundation/foundation/components/_joyride.scss +208 -0
- data/public/scss/foundation/foundation/components/_keystrokes.scss +56 -0
- data/public/scss/foundation/foundation/components/_labels.scss +84 -0
- data/public/scss/foundation/foundation/components/_magellan.scss +21 -0
- data/public/scss/foundation/foundation/components/_orbit.scss +207 -0
- data/public/scss/foundation/foundation/components/_pagination.scss +99 -0
- data/public/scss/foundation/foundation/components/_panels.scss +76 -0
- data/public/scss/foundation/foundation/components/_pricing-tables.scss +130 -0
- data/public/scss/foundation/foundation/components/_progress-bars.scss +70 -0
- data/public/scss/foundation/foundation/components/_reveal.scss +131 -0
- data/public/scss/foundation/foundation/components/_section.scss +303 -0
- data/public/scss/foundation/foundation/components/_side-nav.scss +68 -0
- data/public/scss/foundation/foundation/components/_split-buttons.scss +159 -0
- data/public/scss/foundation/foundation/components/_sub-nav.scss +67 -0
- data/public/scss/foundation/foundation/components/_switch.scss +249 -0
- data/public/scss/foundation/foundation/components/_tables.scss +80 -0
- data/public/scss/foundation/foundation/components/_thumbs.scss +47 -0
- data/public/scss/foundation/foundation/components/_tooltips.scss +113 -0
- data/public/scss/foundation/foundation/components/_top-bar.scss +462 -0
- data/public/scss/foundation/foundation/components/_type.scss +422 -0
- data/public/scss/foundation/foundation/components/_visibility.scss +320 -0
- data/public/scss/foundation/foundation.scss +46 -0
- data/public/scss/foundation/normalize.scss +402 -0
- data/views/branch.slim +1 -0
- data/views/commits/detail.slim +12 -0
- data/views/commits/labels.slim +9 -0
- data/views/commits/list.slim +22 -0
- data/views/diffs/list.slim +39 -0
- data/views/index.slim +36 -0
- data/views/layout.slim +9 -0
- data/views/refs/dropdown.slim +3 -0
- data/zitgit.gemspec +30 -0
- 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
|
+
}
|