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,207 @@
1
+ // Orbit Settings
2
+
3
+ // We use these to control the caption styles
4
+ $orbit-container-bg: #f5f5f5 !default;
5
+ $orbit-caption-bg-old-browser: #000 !default;
6
+ $orbit-caption-bg-old: rgb(0,0,0) !default;
7
+ $orbit-caption-bg: rgba(0,0,0,0.6) !default;
8
+ $orbit-caption-font-color: #fff !default;
9
+
10
+ // We use these to control the left/right nav styles
11
+ $orbit-nav-bg-old: rgb(0,0,0) !default;
12
+ $orbit-nav-bg: rgba(0,0,0,0.6) !default;
13
+
14
+ // We use these to control the timer styles
15
+ $orbit-timer-bg-old: rgb(0,0,0) !default;
16
+ $orbit-timer-bg: rgba(0,0,0,0.6) !default;
17
+
18
+ // We use these to control the bullet nav styles
19
+ $orbit-bullet-nav-color: #999 !default;
20
+ $orbit-bullet-nav-color-active: #222 !default;
21
+
22
+ // We use thes to controls the style of slide numbers
23
+ $orbit-slide-number-bg: rgba(0,0,0,0) !default;
24
+ $orbit-slide-number-font-color: #fff !default;
25
+ $orbit-slide-number-padding: emCalc(5px) !default;
26
+
27
+ // Margin for when Orbit is stacked on small screens
28
+ $stack-on-small-margin-bottom: emCalc(20px) !default;
29
+
30
+
31
+ .orbit-container {
32
+ overflow: hidden;
33
+ width: 100%;
34
+ position: relative;
35
+ background: $orbit-container-bg;
36
+
37
+ .orbit-slides-container {
38
+ list-style: none;
39
+ margin: 0;
40
+ padding: 0;
41
+ position: relative;
42
+
43
+ img { display: block; }
44
+
45
+ &>* {
46
+ position: relative;
47
+ float: $default-float;
48
+ height: 100%;
49
+
50
+ .orbit-caption {
51
+ position: absolute;
52
+ bottom: 0;
53
+ background-color: $orbit-caption-bg-old;
54
+ background-color: $orbit-caption-bg;
55
+ color: #fff;
56
+ width: 100%;
57
+ padding: 10px 14px;
58
+ font-size: emCalc(14px);
59
+
60
+ * { color: $orbit-caption-font-color; }
61
+ }
62
+ }
63
+ }
64
+
65
+ .orbit-slide-number {
66
+ position: absolute;
67
+ top: 10px;
68
+ #{$default-float}: 10px;
69
+ font-size: 12px;
70
+ span { font-weight: 700; padding: $orbit-slide-number-padding;}
71
+ color: $orbit-slide-number-font-color;
72
+ background: $orbit-slide-number-bg;
73
+ }
74
+
75
+ .orbit-timer {
76
+ position: absolute;
77
+ top: 10px;
78
+ #{$opposite-direction}: 10px;
79
+ height: 6px;
80
+ width: 100px;
81
+ .orbit-progress {
82
+ height: 100%;
83
+ background-color: $orbit-timer-bg-old;
84
+ background-color: $orbit-timer-bg;
85
+ display: block;
86
+ width: 0%;
87
+ }
88
+
89
+ & > span {
90
+ display: none;
91
+ position: absolute;
92
+ top: 10px;
93
+ #{$opposite-direction}: 0px;
94
+ width: 11px;
95
+ height: 14px;
96
+ border: solid 4px #000;
97
+ border-top: none;
98
+ border-bottom: none;
99
+ }
100
+
101
+ &.paused {
102
+ & > span {
103
+ #{$opposite-direction}: -6px;
104
+ top: 9px;
105
+ width: 11px;
106
+ height: 14px;
107
+ border: solid 8px;
108
+ border-color: transparent transparent transparent #000;
109
+ }
110
+ }
111
+ }
112
+
113
+ &:hover .orbit-timer > span { display: block; }
114
+
115
+ // Let's get those controls to be right in the center on each side
116
+ .orbit-prev,
117
+ .orbit-next {
118
+ position: absolute;
119
+ top: 50%;
120
+ margin-top: -25px;
121
+ background-color: $orbit-nav-bg-old;
122
+ background-color: $orbit-nav-bg;
123
+ width: 50px;
124
+ height: 60px;
125
+ line-height: 50px;
126
+ color: white;
127
+ text-indent: -9999px !important;
128
+
129
+ & > span {
130
+ position: absolute;
131
+ top: 50%;
132
+ margin-top: -16px;
133
+ display: block;
134
+ width: 0;
135
+ height: 0;
136
+ border: solid 16px;
137
+ }
138
+ }
139
+ .orbit-prev { #{$default-float}: 0;
140
+ & > span {
141
+ border-color: transparent;
142
+ border-#{$opposite-direction}-color: #fff;
143
+ }
144
+ &:hover > span {
145
+ border-#{$opposite-direction}-color: #ccc;
146
+ }
147
+ }
148
+ .orbit-next { #{$opposite-direction}: 0;
149
+ & > span {
150
+ border-color: transparent;
151
+ border-#{$default-float}-color: #fff;
152
+ #{$default-float}: 50%;
153
+ margin-#{$default-float}: -8px;
154
+ }
155
+ &:hover > span {
156
+ border-#{$default-float}-color: #ccc;
157
+ }
158
+ }
159
+ }
160
+
161
+ .orbit-bullets {
162
+ margin: 0 auto 30px auto;
163
+ overflow: hidden;
164
+ position: relative;
165
+ top: 10px;
166
+
167
+ li {
168
+ display: block;
169
+ width: 18px;
170
+ height: 18px;
171
+ background: $orbit-bullet-nav-color;
172
+ float: $default-float;
173
+ margin-#{$opposite-direction}: 6px;
174
+ border: solid 2px $orbit-bullet-nav-color;
175
+ @include radius(1000px);
176
+
177
+ &.active {
178
+ background: $orbit-bullet-nav-color-active;
179
+ border: solid 2px $orbit-bullet-nav-color-active;
180
+ }
181
+
182
+ &:last-child { margin-#{$opposite-direction}: 0; }
183
+ }
184
+ }
185
+
186
+ .touch {
187
+ .orbit-container {
188
+ .orbit-prev,
189
+ .orbit-next { display: none; }
190
+ }
191
+
192
+ .orbit-bullets { display: none; }
193
+ }
194
+
195
+
196
+ @media #{$small} {
197
+
198
+ .touch {
199
+ .orbit-container {
200
+ .orbit-prev,
201
+ .orbit-next { display: inherit; }
202
+ }
203
+
204
+ .orbit-bullets { display: block; }
205
+ }
206
+
207
+ }
@@ -0,0 +1,99 @@
1
+ //
2
+ // Pagination Variables
3
+ //
4
+
5
+ // We use these to control the pagination container
6
+ $pagination-height: emCalc(24px) !default;
7
+ $pagination-margin: emCalc(-5px) !default;
8
+
9
+ // We use these to set the list-item properties
10
+ $pagination-li-float: $default-float;
11
+ $pagination-li-height: emCalc(24px) !default;
12
+ $pagination-li-font-color: #222 !default;
13
+ $pagination-li-font-size: emCalc(14px) !default;
14
+ $pagination-li-margin: emCalc(5px) !default;
15
+
16
+ // We use these for the pagination anchor links
17
+ $pagination-link-pad: emCalc(1px) emCalc(7px) emCalc(1px) !default;
18
+ $pagination-link-font-color: #999 !default;
19
+ $pagination-link-active-bg: darken(#fff, 10%) !default;
20
+
21
+ // We use these for disabled anchor links
22
+ $pagination-link-unavailable-cursor: default !default;
23
+ $pagination-link-unavailable-font-color: #999 !default;
24
+ $pagination-link-unavailable-bg-active: transparent !default;
25
+
26
+ // We use these for currently selected anchor links
27
+ $pagination-link-current-background: $primary-color !default;
28
+ $pagination-link-current-font-color: #fff !default;
29
+ $pagination-link-current-font-weight: bold !default;
30
+ $pagination-link-current-cursor: default !default;
31
+ $pagination-link-current-active-bg: $primary-color !default;
32
+
33
+ //
34
+ // Pagination Mixin
35
+ //
36
+
37
+ // We use this mixin to set the properties for the creating Foundation pagination
38
+ @mixin pagination($center:false, $base-style:true) {
39
+
40
+ @if $base-style {
41
+ display: block;
42
+ height: $pagination-height;
43
+ margin-#{$default-float}: $pagination-margin;
44
+
45
+ li {
46
+ display: block;
47
+ float: $pagination-li-float;
48
+ height: $pagination-li-height;
49
+ color: $pagination-li-font-color;
50
+ font-size: $pagination-li-font-size;
51
+ margin-#{$default-float}: $pagination-li-margin;
52
+
53
+ a {
54
+ display: block;
55
+ padding: $pagination-link-pad;
56
+ color: $pagination-link-font-color;
57
+ }
58
+
59
+ &:hover a,
60
+ a:focus { background: $pagination-link-active-bg; }
61
+
62
+ &.unavailable a {
63
+ cursor: $pagination-link-unavailable-cursor;
64
+ color: $pagination-link-unavailable-font-color;
65
+ }
66
+
67
+ &.unavailable:hover a, &.unavailable a:focus { background: $pagination-link-unavailable-bg-active; }
68
+
69
+ &.current a {
70
+ background: $pagination-link-current-background;
71
+ color: $pagination-link-current-font-color;
72
+ font-weight: $pagination-link-current-font-weight;
73
+ cursor: $pagination-link-current-cursor;
74
+
75
+ &:hover,
76
+ &:focus { background: $pagination-link-current-active-bg; }
77
+ }
78
+ }
79
+ }
80
+
81
+ @if $center {
82
+ & { text-align: center;
83
+ ul > li {
84
+ float: none;
85
+ display: inline-block;
86
+ }
87
+ }
88
+ }
89
+ }
90
+
91
+
92
+
93
+
94
+ @if $include-html-nav-classes != false {
95
+
96
+ /* Pagination */
97
+ .pagination { @include pagination; }
98
+ .pagination-centered { @include pagination(true,false); }
99
+ }
@@ -0,0 +1,76 @@
1
+ //
2
+ // Panel Variables
3
+ //
4
+
5
+ // We use these to control the background and border styles
6
+ $panel-bg: darken(#fff, 5%) !default;
7
+ $panel-border-style: solid !default;
8
+ $panel-border-size: 1px !default;
9
+
10
+ // We use this % to control how much we darken things on hover
11
+ $panel-function-factor: 10% !default;
12
+ $panel-border-color: darken($panel-bg, $panel-function-factor) !default;
13
+
14
+ // We use these to set default inner padding and bottom margin
15
+ $panel-margin-bottom: emCalc(20px) !default;
16
+ $panel-padding: emCalc(20px) !default;
17
+
18
+ // We use these to set default font colors
19
+ $panel-font-color: #333 !default;
20
+ $panel-font-color-alt: #fff !default;
21
+
22
+
23
+ //
24
+ // Panel Mixins
25
+ //
26
+
27
+ // We use this mixin to create panels.
28
+ @mixin panel($bg:$panel-bg, $padding:$panel-padding) {
29
+
30
+ @if $bg {
31
+ $bg-lightness: lightness($bg);
32
+
33
+ border-style: $panel-border-style;
34
+ border-width: $panel-border-size;
35
+ border-color: darken($bg, $panel-function-factor);
36
+ margin-bottom: $panel-margin-bottom;
37
+ padding: $padding;
38
+
39
+ background: $bg;
40
+
41
+ // We set the font color based on the darkness of the bg.
42
+ @if $bg-lightness >= 50% and $bg == blue { h1,h2,h3,h4,h5,h6,p { color: $panel-font-color-alt; } }
43
+ @else if $bg-lightness >= 50% { h1,h2,h3,h4,h5,h6,p { color: $panel-font-color; } }
44
+ @else { h1,h2,h3,h4,h5,h6,p { color: $panel-font-color-alt; } }
45
+
46
+ // Respect the padding, fool.
47
+ &>:first-child { margin-top: 0; }
48
+ &>:last-child { margin-bottom: 0; }
49
+
50
+ // reset header line-heights for panels
51
+ h1,h2,h3,h4,h5,h6 {
52
+ line-height: 1; margin-bottom: emCalc(20px) / 2;
53
+ &.subheader { line-height: 1.4; }
54
+ }
55
+ }
56
+ }
57
+
58
+ // Only include these classes if the option exists
59
+ @if $include-html-panel-classes != false {
60
+
61
+ /* Panels */
62
+ .panel { @include panel;
63
+
64
+ &.callout {
65
+ @include panel($primary-color);
66
+ @include inset-shadow($active:false);
67
+ }
68
+
69
+ &.radius {
70
+ @include panel($bg:false);
71
+ @include radius;
72
+ }
73
+
74
+ }
75
+
76
+ }
@@ -0,0 +1,130 @@
1
+ //
2
+ // Pricing Table Variables
3
+ //
4
+
5
+ // We use this to control the border color
6
+ $price-table-border: solid 1px #ddd !default;
7
+
8
+ // We use this to control the bottom margin of the pricing table
9
+ $price-table-margin-bottom: emCalc(20px) !default;
10
+
11
+ // We use these to control the title styles
12
+ $price-title-bg: #ddd !default;
13
+ $price-title-padding: emCalc(15px) emCalc(20px) !default;
14
+ $price-title-align: center !default;
15
+ $price-title-color: #333 !default;
16
+ $price-title-weight: bold !default;
17
+ $price-title-size: emCalc(16px) !default;
18
+
19
+ // We use these to control the price styles
20
+ $price-money-bg: #eee !default;
21
+ $price-money-padding: emCalc(15px) emCalc(20px) !default;
22
+ $price-money-align: center !default;
23
+ $price-money-color: #333 !default;
24
+ $price-money-weight: normal !default;
25
+ $price-money-size: emCalc(20px) !default;
26
+
27
+ // We use these to control the description styles
28
+ $price-bg: #fff !default;
29
+ $price-desc-color: #777 !default;
30
+ $price-desc-padding: emCalc(15px) !default;
31
+ $price-desc-align: center !default;
32
+ $price-desc-font-size: emCalc(12px) !default;
33
+ $price-desc-weight: normal !default;
34
+ $price-desc-line-height: 1.4 !default;
35
+ $price-desc-bottom-border: dotted 1px #ddd !default;
36
+
37
+ // We use these to control the list item styles
38
+ $price-item-color: #333 !default;
39
+ $price-item-padding: emCalc(15px) !default;
40
+ $price-item-align: center !default;
41
+ $price-item-font-size: emCalc(14px) !default;
42
+ $price-item-weight: normal !default;
43
+ $price-item-bottom-border: dotted 1px #ddd !default;
44
+
45
+ // We use these to control the CTA area styles
46
+ $price-cta-bg: #f5f5f5 !default;
47
+ $price-cta-align: center !default;
48
+ $price-cta-padding: emCalc(20px) emCalc(20px) 0 !default;
49
+
50
+ //
51
+ // Pricing Table Mixins
52
+ //
53
+
54
+ // We use this to create the container element for the pricing tables
55
+ @mixin pricing-table-container {
56
+ border: $price-table-border;
57
+ margin-#{$default-float}: 0;
58
+ margin-bottom: $price-table-margin-bottom;
59
+
60
+ & * {
61
+ list-style: none;
62
+ line-height: 1;
63
+ }
64
+ }
65
+
66
+ // We use this mixin to create the pricing table title styles
67
+ @mixin pricing-table-title {
68
+ background-color: $price-title-bg;
69
+ padding: $price-title-padding;
70
+ text-align: $price-title-align;
71
+ color: $price-title-color;
72
+ font-weight: $price-title-weight;
73
+ font-size: $price-title-size;
74
+ }
75
+
76
+ // We use this mixin to control the pricing table price styles
77
+ @mixin pricing-table-price {
78
+ background-color: $price-money-bg;
79
+ padding: $price-money-padding;
80
+ text-align: $price-money-align;
81
+ color: $price-money-color;
82
+ font-weight: $price-money-weight;
83
+ font-size: $price-money-size;
84
+ }
85
+
86
+ // We use this mixin to create the description styles for the pricing table
87
+ @mixin pricing-table-description {
88
+ background-color: $price-bg;
89
+ padding: $price-desc-padding;
90
+ text-align: $price-desc-align;
91
+ color: $price-desc-color;
92
+ font-size: $price-desc-font-size;
93
+ font-weight: $price-desc-weight;
94
+ line-height: $price-desc-line-height;
95
+ border-bottom: $price-desc-bottom-border;
96
+ }
97
+
98
+ // We use this mixin to style the bullet items in the pricing table
99
+ @mixin pricing-table-bullet {
100
+ background-color: $price-bg;
101
+ padding: $price-item-padding;
102
+ text-align: $price-item-align;
103
+ color: $price-item-color;
104
+ font-size: $price-item-font-size;
105
+ font-weight: $price-item-weight;
106
+ border-bottom: $price-item-bottom-border;
107
+ }
108
+
109
+ // We use this mixin to style the CTA area of the pricing tables
110
+ @mixin pricing-table-cta {
111
+ background-color: $price-cta-bg;
112
+ text-align: $price-cta-align;
113
+ padding: $price-cta-padding;
114
+ }
115
+
116
+
117
+ @if $include-html-pricing-classes != false {
118
+
119
+ /* Pricing Tables */
120
+ .pricing-table {
121
+ @include pricing-table-container;
122
+
123
+ .title { @include pricing-table-title; }
124
+ .price { @include pricing-table-price; }
125
+ .description { @include pricing-table-description; }
126
+ .bullet-item { @include pricing-table-bullet; }
127
+ .cta-button { @include pricing-table-cta; }
128
+ }
129
+
130
+ }
@@ -0,0 +1,70 @@
1
+ //
2
+ // Progress Bar Variables
3
+ //
4
+
5
+ // We use this to se the prog bar height
6
+ $progress-bar-height: emCalc(25px) !default;
7
+ $progress-bar-color: transparent !default;
8
+
9
+ // We use these to control the border styles
10
+ $progress-bar-border-color: darken(#fff, 20%) !default;
11
+ $progress-bar-border-size: 1px !default;
12
+ $progress-bar-border-style: solid !default;
13
+ $progress-bar-border-radius: $global-radius !default;
14
+
15
+ // We use these to control the margin & padding
16
+ $progress-bar-pad: emCalc(2px) !default;
17
+ $progress-bar-margin-bottom: emCalc(10px) !default;
18
+
19
+ // We use these to set the meter colors
20
+ $progress-meter-color: $primary-color !default;
21
+ $progress-meter-secondary-color: $secondary-color !default;
22
+ $progress-meter-success-color: $success-color !default;
23
+ $progress-meter-alert-color: $alert-color !default;
24
+
25
+
26
+ //
27
+ // Progress Bar Mixins
28
+ //
29
+
30
+ // We use this to set up the progress bar container
31
+ @mixin progress-container {
32
+ background-color: $progress-bar-color;
33
+ height: $progress-bar-height;
34
+ border: $progress-bar-border-size $progress-bar-border-style $progress-bar-border-color;
35
+ padding: $progress-bar-pad;
36
+ margin-bottom: $progress-bar-margin-bottom;
37
+ }
38
+
39
+ @mixin progress-meter($bg:$progress-meter-color) {
40
+ background: $bg;
41
+ height: 100%;
42
+ display: block;
43
+ }
44
+
45
+
46
+ @if $include-html-media-classes != false {
47
+
48
+ /* Progress Bar */
49
+ .progress {
50
+ @include progress-container;
51
+
52
+ // Meter
53
+ .meter {
54
+ @include progress-meter;
55
+ }
56
+ &.secondary .meter { @include progress-meter($bg:$progress-meter-secondary-color); }
57
+ &.success .meter { @include progress-meter($bg:$progress-meter-success-color); }
58
+ &.alert .meter { @include progress-meter($bg:$progress-meter-alert-color); }
59
+
60
+ &.radius { @include radius($global-radius);
61
+ .meter { @include radius($global-radius - 1); }
62
+ }
63
+
64
+ &.round { @include radius(1000px);
65
+ .meter { @include radius(999px); }
66
+ }
67
+
68
+ }
69
+
70
+ }
@@ -0,0 +1,131 @@
1
+ // NEED TO FINISH THE LOGIC HERE
2
+
3
+ //
4
+ // Reveal Variables
5
+ //
6
+
7
+ // We use these to control the style of the reveal overlay.
8
+ $reveal-overlay-bg: rgba(#000, .45) !default;
9
+ $reveal-overlay-bg-old: #000 !default;
10
+
11
+ // We use these to control the style of the modal itself.
12
+ $reveal-modal-bg: #fff !default;
13
+ $reveal-position-top: 50px !default;
14
+ $reveal-default-width: 80% !default;
15
+ $reveal-modal-padding: emCalc(20px) !default;
16
+ $reveal-box-shadow: 0 0 10px rgba(#000,.4) !default;
17
+
18
+ // We use these to style the reveal close button
19
+ $reveal-close-font-size: emCalc(22px) !default;
20
+ $reveal-close-top: emCalc(8px) !default;
21
+ $reveal-close-side: emCalc(11px) !default;
22
+ $reveal-close-color: #aaa !default;
23
+ $reveal-close-weight: bold !default;
24
+
25
+ // We use these to control the modal border
26
+ $reveal-border-style: solid !default;
27
+ $reveal-border-width: 1px !default;
28
+ $reveal-border-color: #666 !default;
29
+
30
+ //
31
+ // Reveal Mixins
32
+ //
33
+
34
+ // We use this to create the reveal background overlay styles
35
+ @mixin reveal-bg {
36
+ position: fixed;
37
+ height: 100%;
38
+ width: 100%;
39
+ background: $reveal-overlay-bg-old;
40
+ background: $reveal-overlay-bg;
41
+ z-index: 98;
42
+ display: none;
43
+ top: 0;
44
+ #{$default-float}: 0;
45
+ }
46
+
47
+ // We use this mixin to create the structure of a reveal modal
48
+ @mixin reveal-modal-base($base-style:true, $width:$reveal-default-width) {
49
+ @if $base-style {
50
+ visibility: hidden;
51
+ display: none;
52
+ position: absolute;
53
+ #{$default-float}: 50%;
54
+ z-index: 99;
55
+ height: auto;
56
+ background-color: #fff;
57
+
58
+ // Make sure rows don't have a min-width on them
59
+ .column,
60
+ .columns { min-width: 0; }
61
+
62
+ // Get rid of margin from first and last element inside modal
63
+ & > :first-child { margin-top: 0; }
64
+ & > :last-child { margin-bottom: 0; }
65
+ }
66
+
67
+ @if $width {
68
+ margin-#{$default-float}: -($width / 2);
69
+ width: $width;
70
+ }
71
+ }
72
+
73
+ // We use this to style the reveal modal defaults
74
+ @mixin reveal-modal-style($bg:$reveal-modal-bg, $padding:$reveal-modal-padding, $border:true, $border-style:$reveal-border-style, $border-width:$reveal-border-width, $border-color:$reveal-border-color, $box-shadow:true, $top-offset:$reveal-position-top) {
75
+
76
+ @if $bg { background-color: $bg; }
77
+ @if $padding { padding: $padding; }
78
+
79
+ @if $border { border: $border-style $border-width $border-color; }
80
+
81
+ // We can choose whether or not to include the default box-shadow.
82
+ @if $box-shadow {
83
+ -webkit-box-shadow: $reveal-box-shadow;
84
+ box-shadow: $reveal-box-shadow;
85
+ }
86
+
87
+ @if $top-offset { top: $top-offset; }
88
+ }
89
+
90
+ // We use this to create a close button for the reveal modal
91
+ @mixin reveal-close($color:$reveal-close-color) {
92
+ font-size: $reveal-close-font-size;
93
+ line-height: 1;
94
+ position: absolute;
95
+ top: $reveal-close-top;
96
+ #{$opposite-direction}: $reveal-close-side;
97
+ color: $color;
98
+ font-weight: $reveal-close-weight;
99
+ cursor: pointer;
100
+ }
101
+
102
+ @if $include-html-reveal-classes != false {
103
+ // Reveal Modals
104
+ .reveal-modal-bg { @include reveal-bg; }
105
+
106
+ .reveal-modal {
107
+ @include reveal-modal-base;
108
+ @include reveal-modal-style;
109
+
110
+ .close-reveal-modal { @include reveal-close; }
111
+ }
112
+
113
+ // Large Screen Styles
114
+ @media #{$small} {
115
+
116
+ .reveal-modal {
117
+ @include reveal-modal-style(false, emCalc(30px), false, $box-shadow: false, $top-offset: emCalc(100px));
118
+
119
+ &.small { @include reveal-modal-base(false, 30%); }
120
+ &.medium { @include reveal-modal-base(false, 40%); }
121
+ &.large { @include reveal-modal-base(false, 60%); }
122
+ &.xlarge { @include reveal-modal-base(false, 70%); }
123
+ &.expand { @include reveal-modal-base(false, 95%); }
124
+ }
125
+ }
126
+
127
+ // Reveal Print Styles
128
+ @media print {
129
+ div:not(.reveal-modal) { display: none; }
130
+ }
131
+ }