rapido-css 0.0.1 → 0.0.2.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 (40) hide show
  1. data/README.mkdn +1 -2
  2. data/stylesheets/_rapido.scss +50 -3
  3. data/stylesheets/_susy.scss +1 -1
  4. data/stylesheets/components/_alerts.scss +8 -8
  5. data/stylesheets/components/_breadcrumbs.scss +3 -3
  6. data/stylesheets/components/_button-groups.scss +6 -9
  7. data/stylesheets/components/_buttons.scss +75 -74
  8. data/stylesheets/components/_captions.scss +4 -0
  9. data/stylesheets/components/_close.scss +3 -3
  10. data/stylesheets/components/_dropdowns.scss +10 -57
  11. data/stylesheets/components/_forms.scss +279 -439
  12. data/stylesheets/components/_labels.scss +39 -0
  13. data/stylesheets/components/_modals.scss +29 -13
  14. data/stylesheets/components/_navs.scss +55 -57
  15. data/stylesheets/components/_pager.scss +13 -10
  16. data/stylesheets/components/_pagination.scss +29 -24
  17. data/stylesheets/components/_responsive-navs.scss +5 -0
  18. data/stylesheets/components/_sliders.scss +40 -35
  19. data/stylesheets/components/_tables.scss +29 -31
  20. data/stylesheets/components/_tabs.scss +4 -0
  21. data/stylesheets/components/_type.scss +76 -60
  22. data/stylesheets/settings/_base.scss +17 -10
  23. data/stylesheets/settings/_colors.scss +4 -4
  24. data/stylesheets/settings/_components.scss +7 -8
  25. data/stylesheets/settings/_dimensions.scss +9 -7
  26. data/stylesheets/settings/_effects.scss +8 -5
  27. data/stylesheets/utilities/_animations.scss +15 -7
  28. data/stylesheets/utilities/_debug.scss +4 -0
  29. data/stylesheets/utilities/_helper-classes.scss +14 -1
  30. data/stylesheets/utilities/_icon-fonts.scss +33 -8
  31. data/stylesheets/utilities/_media-queries.scss +5 -0
  32. data/stylesheets/utilities/_mixins.scss +78 -103
  33. data/stylesheets/utilities/_sprites.scss +5 -9
  34. metadata +3 -8
  35. data/stylesheets/_components.scss +0 -24
  36. data/stylesheets/_settings.scss +0 -5
  37. data/stylesheets/_utilities.scss +0 -8
  38. data/stylesheets/components/_images.scss +0 -0
  39. data/stylesheets/components/_pills.scss +0 -91
  40. data/stylesheets/utilities/_retina-sprites.scss +0 -70
@@ -1,13 +1,14 @@
1
-
2
- // ********************************************************************************************************************
1
+ // ====================================================================================================================
3
2
  // DIMENSIONS
4
- // ********************************************************************************************************************
3
+ // ====================================================================================================================
4
+
5
5
  $base-border-radius: 4px !default;
6
6
  $horizontal-offset: 180px !default;
7
7
 
8
8
  // ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
9
9
  // Text
10
10
  // --------------------------------------------------------------------------------------------------------------------
11
+
11
12
  $giga-size: $base-font-size * 7 !default;
12
13
  $mega-size: $base-font-size * 5 !default;
13
14
  $kilo-size: $base-font-size * 3.4 !default;
@@ -25,6 +26,7 @@ $micro-size: $base-font-size * .7 !default;
25
26
  // ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
26
27
  // Forms
27
28
  // --------------------------------------------------------------------------------------------------------------------
29
+
28
30
  $control-margin-bottom: $base-line-height !default;
29
31
  $label-margin-bottom: 10px !default;
30
32
  $input-border: 1px !default;
@@ -36,7 +38,6 @@ $input-padding: em($input-padding-top) em($input-padding-side) ;
36
38
  $input-height: em($base-font-size + ($input-padding-top * 2) + ($input-border * 2)) ;
37
39
  $control-min-height: em($base-line-height + $label-margin-bottom) + $input-height - em(5px) ;
38
40
 
39
-
40
41
  // ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
41
42
  // Paddings
42
43
  // --------------------------------------------------------------------------------------------------------------------
@@ -60,10 +61,10 @@ $tables-padding: $input-padding !default;
60
61
  $tabs-content-padding: $input-padding !default;
61
62
  $tabs-tab-padding: $input-padding !default;
62
63
 
63
-
64
64
  // ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
65
65
  // Media Queries
66
66
  // --------------------------------------------------------------------------------------------------------------------
67
+
67
68
  $lap-start: 481px !default;
68
69
  $desk-start: 768px !default;
69
70
  $desk-end: 1080px !default;
@@ -74,16 +75,17 @@ $lap-end: $desk-start - 1px;
74
75
  // ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
75
76
  // Grid (Susy)
76
77
  // --------------------------------------------------------------------------------------------------------------------
78
+
77
79
  $total-columns: 12 !default;
78
80
  $column-width: 50px !default;
79
81
  $gutter-width: 30px !default;
80
82
  $grid-padding: 10px !default;
81
83
  $container-style: fluid !default;
82
84
 
83
-
84
85
  // ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
85
86
  // Nav (resposnive-nav)
86
87
  // --------------------------------------------------------------------------------------------------------------------
88
+
87
89
  $responsive-nav-breakpoint: palm !default;
88
90
  $responsive-nav-type: slide !default;
89
91
  $responsive-nav-outside-wrapper: 'body' !default;
@@ -92,10 +94,10 @@ $responsive-nav-offset: 70% !default;
92
94
  $responsive-nav-dropdown-pos: right !default;
93
95
  $responsive-nav-toggle-size: 30px !default;
94
96
 
95
-
96
97
  // ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
97
98
  // Z-INDEX order
98
99
  // --------------------------------------------------------------------------------------------------------------------
100
+
99
101
  $zindex-dropdown: 1000 !default;
100
102
  $zindex-popover: 1010 !default;
101
103
  $zindex-tooltip: 1030 !default;
@@ -1,6 +1,7 @@
1
- // ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
2
- // ANIMAZIONI @include animate(...)
3
- // ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
1
+ // ====================================================================================================================
2
+ // ANIMATIONS w/ @include animate(...)
3
+ // --------------------------------------------------------------------------------------------------------------------
4
+
4
5
  $animations: fadeIn, fadeOut !default;
5
6
  $animations-classes: true !default;
6
7
 
@@ -9,7 +10,9 @@ $animations-delay: 0s !default;
9
10
  $animations-function: ease-out !default;
10
11
  $animations-mode: both !default;
11
12
 
12
- // Transizioni @include transition(...)
13
- // ------------------------------------------------------------------------------------------------------------------------
13
+ // ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
14
+ // Transitions w/ @include transition(...)
15
+ // --------------------------------------------------------------------------------------------------------------------
16
+
14
17
  $default-transition-duration: $animations-duration !default;
15
18
  $default-transition-function: toBezier($animations-function) !default;
@@ -1,6 +1,10 @@
1
+ // ====================================================================================================================
2
+ // ANIMATIONS
3
+ // ====================================================================================================================
1
4
 
2
- // FALSE per tutte le animazione
3
- // ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
5
+ // ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
6
+ // Disable all animations by default
7
+ // --------------------------------------------------------------------------------------------------------------------
4
8
  $fadeIn: false !default;
5
9
  $fadeOut: false !default;
6
10
  $fadeInUp: false !default;
@@ -44,9 +48,9 @@ $rotateIn: false !default;
44
48
  $rotateOut: false !default;
45
49
  $tada: false !default;
46
50
 
47
-
48
- // ATTIVA ANIMAZIONI
49
- // ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
51
+ // ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
52
+ // Enable animation from the settings
53
+ // --------------------------------------------------------------------------------------------------------------------
50
54
  @each $animation in $animations {
51
55
  @if $animation == 'fadeIn' {$fadeIn: true;}
52
56
  @if $animation == 'fadeOut' {$fadeOut: true;}
@@ -92,12 +96,15 @@ $tada: false !default;
92
96
  @if $animation == 'tada' {$tada: true;}
93
97
  }
94
98
 
99
+
100
+ // ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
95
101
  // Animate Mixin Plugin;
102
+ // --------------------------------------------------------------------------------------------------------------------
96
103
  @mixin animate($name, $duration: $animations-duration, $delay: $animations-delay, $function: $animations-function, $mode: $animations-mode) {
97
104
  @include experimental(animation, $name $duration $delay $function $mode);
98
105
  }
99
106
 
100
- // Classi sileziose per le animazioni da usare con @extend;
107
+ // Classes that can be used with @extend;
101
108
  @if $animations-classes {
102
109
  @each $animation in $animations {
103
110
  %#{$animation} {
@@ -106,8 +113,9 @@ $tada: false !default;
106
113
  }
107
114
  }
108
115
 
109
-
116
+ // ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
110
117
  // Keyframes
118
+ // --------------------------------------------------------------------------------------------------------------------
111
119
  @if $fadeIn == true {
112
120
  @include keyframes(fadeIn) {
113
121
  0% { opacity: 0; }
@@ -1,3 +1,7 @@
1
+ // ====================================================================================================================
2
+ // DEBUG MODE
3
+ // ====================================================================================================================
4
+
1
5
  @if $debug-mode {
2
6
 
3
7
  :empty { outline:5px solid yellow;}
@@ -1,3 +1,7 @@
1
+ // ====================================================================================================================
2
+ // HELPER CLASSES
3
+ // ====================================================================================================================
4
+
1
5
  .wrapper, .w {
2
6
  @extend .clearfix;
3
7
  margin: 0 auto;
@@ -12,18 +16,27 @@
12
16
  width: $desk-end;
13
17
  }
14
18
 
19
+ // ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
20
+ // Sizes
21
+ // --------------------------------------------------------------------------------------------------------------------
22
+
15
23
  $i: 100;
16
24
  @while $i > 0 {
17
25
  .width-#{$i} { width: $i * 1% !important; }
18
26
  $i: $i - 5;
19
27
  }
20
28
 
29
+ // ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
30
+ // Transition class for @extend
31
+ // --------------------------------------------------------------------------------------------------------------------
32
+
21
33
  .transition {
22
34
  @include transition();
23
35
  }
24
36
 
37
+ // ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
25
38
  // Text replacement
26
- // ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
39
+ // --------------------------------------------------------------------------------------------------------------------
27
40
  .ir{background-color:transparent;border:0;overflow:hidden;text-indent:-9999px;line-height:0;font-size:0;}
28
41
  .ir:before{content:"";display:block;width:0;height:150%}
29
42
  .hidden{display:none!important;visibility:hidden}
@@ -1,3 +1,10 @@
1
+ // ====================================================================================================================
2
+ // ICON FONTS
3
+ // ====================================================================================================================
4
+
5
+ // ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
6
+ // Brandico
7
+ // --------------------------------------------------------------------------------------------------------------------
1
8
  @if $use-brandico {
2
9
  @font-face {
3
10
  font-family: 'brandico';
@@ -11,6 +18,10 @@
11
18
  }
12
19
  }
13
20
 
21
+
22
+ // ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
23
+ // Entypo
24
+ // --------------------------------------------------------------------------------------------------------------------
14
25
  @if $use-entypo {
15
26
  @font-face {
16
27
  font-family: 'entypo';
@@ -24,6 +35,10 @@
24
35
  }
25
36
  }
26
37
 
38
+
39
+ // ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
40
+ // Fontawesome
41
+ // --------------------------------------------------------------------------------------------------------------------
27
42
  @if $use-fontawesome {
28
43
  @font-face {
29
44
  font-family: 'FontAwesome';
@@ -37,6 +52,10 @@
37
52
  }
38
53
  }
39
54
 
55
+
56
+ // ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
57
+ // Fontelico
58
+ // --------------------------------------------------------------------------------------------------------------------
40
59
  @if $use-fontelico {
41
60
  @font-face {
42
61
  font-family: 'fontelico';
@@ -50,6 +69,10 @@
50
69
  }
51
70
  }
52
71
 
72
+
73
+ // ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
74
+ // Maki
75
+ // --------------------------------------------------------------------------------------------------------------------
53
76
  @if $use-maki {
54
77
  @font-face {
55
78
  font-family: 'maki';
@@ -63,6 +86,9 @@
63
86
  }
64
87
  }
65
88
 
89
+ // ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
90
+ // Openweb Icons
91
+ // --------------------------------------------------------------------------------------------------------------------
66
92
  @if $use-openweb-icons {
67
93
  @font-face {
68
94
  font-family: 'OpenWeb Icons';
@@ -76,6 +102,9 @@
76
102
  }
77
103
  }
78
104
 
105
+ // ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
106
+ // Typicons
107
+ // --------------------------------------------------------------------------------------------------------------------
79
108
  @if $use-typicons {
80
109
  @font-face {
81
110
  font-family: 'Typicons';
@@ -89,6 +118,10 @@
89
118
  }
90
119
  }
91
120
 
121
+
122
+ // ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
123
+ // Zocial
124
+ // --------------------------------------------------------------------------------------------------------------------
92
125
  @if $use-zocial {
93
126
  @font-face {
94
127
  font-family: 'zocial';
@@ -100,12 +133,4 @@
100
133
  url('http://weloveiconfonts.com/api/fonts/zocial/zocial-regular-webfont.ttf') format('truetype'),
101
134
  url('http://weloveiconfonts.com/api/fonts/zocial/zocial-regular-webfont.svg#zocialregular') format('svg');
102
135
  }
103
- }
104
-
105
-
106
-
107
- @mixin icon-font($char: '\f013', $font: 'FontAwesome') {
108
- display: inline-block;
109
- font-family: $font;
110
- content: "#{$char}";
111
136
  }
@@ -1,3 +1,8 @@
1
+ // ====================================================================================================================
2
+ // MEDIA QUERY
3
+ // ====================================================================================================================
4
+
5
+
1
6
  @mixin media($media-query){
2
7
 
3
8
  @if $media-query == palm{
@@ -1,22 +1,16 @@
1
- //
2
- // Mixins
3
- // --------------------------------------------------
1
+ // ====================================================================================================================
2
+ // MIXINS
3
+ // ====================================================================================================================
4
4
 
5
-
6
- // UTILITY MIXINS
7
- // --------------------------------------------------
8
-
9
- // Clearfix
10
- // --------
11
- // For clearing floats like a boss h5bp.com/q
5
+ // ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
6
+ // Base
7
+ // --------------------------------------------------------------------------------------------------------------------
12
8
  @mixin clearfix {
13
9
  *zoom: 1;
14
10
  &:before,
15
11
  &:after {
16
12
  display: table;
17
13
  content: "";
18
- // Fixes Opera/contenteditable bug:
19
- // http://nicolasgallagher.com/micro-clearfix-hack/#comment-36952
20
14
  line-height: 0;
21
15
  }
22
16
  &:after {
@@ -24,21 +18,12 @@
24
18
  }
25
19
  }
26
20
 
27
- // Webkit-style focus
28
- // ------------------
29
- @mixin tab-focus() {}
30
21
 
31
- // Center-align a block level element
32
- // ----------------------------------
33
- @mixin center-block() {
34
- display: block;
35
- margin-left: auto;
36
- margin-right: auto;
37
- }
38
22
 
39
23
 
40
- // Sizing shortcuts
41
- // -------------------------
24
+ // ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
25
+ // Shortcuts
26
+ // --------------------------------------------------------------------------------------------------------------------
42
27
  @mixin size($height, $width) {
43
28
  width: $width;
44
29
  height: $height;
@@ -47,41 +32,6 @@
47
32
  @include size($size, $size);
48
33
  }
49
34
 
50
- // Placeholder text
51
- // -------------------------
52
- @mixin placeholder($color: $gray) {
53
- &:-moz-placeholder {
54
- color: $color;
55
- }
56
- &:-ms-input-placeholder {
57
- color: $color;
58
- }
59
- &::-webkit-input-placeholder {
60
- color: $color;
61
- }
62
- }
63
-
64
- // Text overflow
65
- // -------------------------
66
- // Requires inline-block or block for proper styling
67
- @mixin text-overflow() {
68
- overflow: hidden;
69
- text-overflow: ellipsis;
70
- white-space: nowrap;
71
- }
72
-
73
-
74
- @mixin hide-text {
75
- color: transparent;
76
- font: 0/0 a;
77
- text-shadow: none;
78
- }
79
-
80
- // @mixin reset-filter() {
81
- // filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
82
- // }
83
-
84
-
85
35
  @mixin position ($position: relative, $coordinates: 0 0 0 0) {
86
36
 
87
37
  @if type-of($position) == list {
@@ -125,6 +75,11 @@
125
75
  }
126
76
  }
127
77
 
78
+ @mixin center-block() {
79
+ display: block;
80
+ margin-left: auto;
81
+ margin-right: auto;
82
+ }
128
83
 
129
84
  @mixin center ($width, $height: null) {
130
85
  @include position(absolute, 50% 0 0 50%);
@@ -133,7 +88,42 @@
133
88
  @else { margin-top: -($width / 2); }
134
89
  }
135
90
 
91
+ // ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
92
+ // Forms
93
+ // --------------------------------------------------------------------------------------------------------------------
94
+ @mixin placeholder($color: $gray) {
95
+ &:-moz-placeholder {
96
+ color: $color;
97
+ }
98
+ &:-ms-input-placeholder {
99
+ color: $color;
100
+ }
101
+ &::-webkit-input-placeholder {
102
+ color: $color;
103
+ }
104
+ }
105
+
106
+ @mixin tab-focus() {}
107
+
108
+ // ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
109
+ // Text overflow
110
+ // --------------------------------------------------------------------------------------------------------------------
111
+ @mixin text-overflow() {
112
+ overflow: hidden;
113
+ text-overflow: ellipsis;
114
+ white-space: nowrap;
115
+ }
136
116
 
117
+
118
+ @mixin hide-text {
119
+ color: transparent;
120
+ font: 0/0 a;
121
+ text-shadow: none;
122
+ }
123
+
124
+ // ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
125
+ // Pseudo Elements
126
+ // --------------------------------------------------------------------------------------------------------------------
137
127
  @mixin triangle ($size, $color, $direction) {
138
128
  height: 0;
139
129
  width: 0;
@@ -183,7 +173,6 @@
183
173
  // For now only side triangles with border
184
174
  @mixin triangle_border($size, $color, $border-color, $border-width, $direction) {
185
175
 
186
- // $border-width-fix: '';
187
176
  $border-width-fix: '';
188
177
 
189
178
  @if $border-width == 1px {
@@ -218,16 +207,14 @@
218
207
  }
219
208
 
220
209
 
210
+ // ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
211
+ // Colors
212
+ // --------------------------------------------------------------------------------------------------------------------
221
213
  @mixin text-inset-shadow($bg: #fff, $textcolor: #054d4a, $contrast: #f43059) {
222
214
  $shadow: darken($textcolor, 30%);
223
215
 
224
216
  color: rgba($textcolor, 0.8);
225
217
  text-shadow: 1px 5px 7px $bg, 0 0 0 rgba($shadow,.8);
226
- // ::-moz-selection, ::selection {
227
- // background: $contrast;
228
- // color: $bg;
229
- // text-shadow: none;
230
- // }
231
218
  }
232
219
 
233
220
  @mixin alpha-color($color: #fff, $alpha: .5, $attribute: background) {
@@ -240,51 +227,31 @@
240
227
  }
241
228
  }
242
229
 
243
-
244
- // Adds keyframes blocks for supported prefixes, removing redundant prefixes in the block's content
230
+ // ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
231
+ // Keyframes support
232
+ // --------------------------------------------------------------------------------------------------------------------
245
233
  @mixin keyframes($name) {
246
- // $original-prefix-for-webkit: $prefix-for-webkit;
247
- // $original-prefix-for-mozilla: $prefix-for-mozilla;
248
- // $original-prefix-for-opera: $prefix-for-opera;
249
- // $original-prefix-for-spec: $prefix-for-spec;
250
-
251
- // @if $original-prefix-for-webkit {
252
- // @include disable-prefix-for-all();
253
- // $prefix-for-webkit: true;
254
234
  @-webkit-keyframes #{$name} {
255
235
  @content;
256
236
  }
257
- // }
258
- // @if $original-prefix-for-mozilla {
259
- // @include disable-prefix-for-all();
260
- // $prefix-for-mozilla: true;
237
+
261
238
  @-moz-keyframes #{$name} {
262
239
  @content;
263
240
  }
264
- // }
265
- // @if $original-prefix-for-opera {
266
- // @include disable-prefix-for-all();
267
- // $prefix-for-opera: true;
241
+
268
242
  @-o-keyframes #{$name} {
269
243
  @content;
270
244
  }
271
- // }
272
- // @if $original-prefix-for-spec {
273
- // @include disable-prefix-for-all();
274
- // $prefix-for-spec: true;
275
245
  @keyframes #{$name} {
276
246
  @content;
277
247
  }
278
- // }
279
-
280
248
  }
281
249
 
282
- // COMPONENT MIXINS
283
- // --------------------------------------------------
284
250
 
285
- // Horizontal dividers
286
- // -------------------------
287
- // Dividers (basically an hr) within dropdowns and nav lists
251
+ // ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
252
+ // Components
253
+ // --------------------------------------------------------------------------------------------------------------------
254
+
288
255
  @mixin nav-divider($top: #e5e5e5, $bottom: false) {
289
256
  *width: 100%;
290
257
 
@@ -293,16 +260,15 @@
293
260
  } @else {
294
261
  height: 1px;
295
262
  }
296
- // margin: (($base-line-height / 2) - 1) 0; // 8px 1px
297
- // *margin: -5px 0 5px;
263
+
298
264
  overflow: hidden;
299
265
  background-color: $top;
300
266
  @if $bottom { border-bottom: 1px solid $bottom; }
301
267
  }
302
268
 
303
-
269
+ // ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
304
270
  // Images
305
- // ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
271
+ // --------------------------------------------------------------------------------------------------------------------
306
272
  @mixin shadow-comicbook($padding: 5px, $color: #bbb, $size: 15px, $distance: 10px) {
307
273
 
308
274
  $lightColor: lighten($color, 8);
@@ -337,8 +303,20 @@
337
303
  }
338
304
  }
339
305
 
306
+
307
+ // ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
308
+ // Icon Fonts
309
+ // --------------------------------------------------------------------------------------------------------------------
310
+ @mixin icon-font($char: '\f013', $font: 'FontAwesome') {
311
+ display: inline-block;
312
+ font-family: $font;
313
+ content: "#{$char}";
314
+ }
315
+
316
+
317
+ // ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
340
318
  // GRID
341
- // ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
319
+ // --------------------------------------------------------------------------------------------------------------------
342
320
  // @include columns( $cols, $cols-container: $total-columns, $omega: false, $nth-omega: false, $remove-omega: false, $from: left, $media: all, $highlight-omega: false );
343
321
 
344
322
  @mixin columns (
@@ -355,15 +333,12 @@
355
333
  @include media($media) {
356
334
  $direction: left;
357
335
 
358
- @if $from != left {
359
- $direction: right;
360
- }
336
+ @if $from != left { $direction: right; }
361
337
 
362
338
  @include span-columns($cols, $cols-container, $from: $direction);
363
339
  @if $omega { @include omega($from: $direction); }
364
340
  @if $nth-omega { @include nth-omega($nth-omega, $from: $direction); }
365
341
  @if $remove-omega { @include remove-omega; }
366
- // background: red;
367
342
  @if $highlight-omega {
368
343
  @if $omega { background: blue; }
369
344
  @if $nth-omega { &:nth-child(#{$nth-omega}) {background: blue;} }