rapido-css 0.0.3 → 0.0.4

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 (43) hide show
  1. checksums.yaml +15 -0
  2. data/README.md +44 -9
  3. data/stylesheets/_default-styles.scss +309 -138
  4. data/stylesheets/_functions.scss +67 -4
  5. data/stylesheets/_normalize.scss +39 -513
  6. data/stylesheets/_rapido.scss +17 -8
  7. data/stylesheets/_susy.scss +2 -5
  8. data/stylesheets/components/_alerts.scss +39 -5
  9. data/stylesheets/components/_breadcrumbs.scss +21 -4
  10. data/stylesheets/components/_button-groups.scss +42 -17
  11. data/stylesheets/components/_buttons.scss +69 -29
  12. data/stylesheets/components/_captions.scss +38 -19
  13. data/stylesheets/components/_close.scss +14 -3
  14. data/stylesheets/components/_dropdowns.scss +76 -28
  15. data/stylesheets/components/_forms.scss +477 -350
  16. data/stylesheets/components/_grids.scss +86 -0
  17. data/stylesheets/components/_labels.scss +26 -4
  18. data/stylesheets/components/_modals.scss +122 -38
  19. data/stylesheets/components/_navs.scss +51 -21
  20. data/stylesheets/components/_pager.scss +55 -10
  21. data/stylesheets/components/_pagination.scss +40 -25
  22. data/stylesheets/components/_responsive-navs.scss +141 -28
  23. data/stylesheets/components/_sliders.scss +45 -26
  24. data/stylesheets/components/_tables.scss +43 -16
  25. data/stylesheets/components/_tabs.scss +47 -9
  26. data/stylesheets/components/_type.scss +139 -73
  27. data/stylesheets/settings/_base.scss +73 -27
  28. data/stylesheets/settings/_colors.scss +43 -16
  29. data/stylesheets/settings/_components.scss +102 -43
  30. data/stylesheets/settings/_dimensions.scss +273 -92
  31. data/stylesheets/settings/_effects.scss +20 -12
  32. data/stylesheets/styleguide.md +33 -0
  33. data/stylesheets/utilities/_animations.scss +150 -129
  34. data/stylesheets/utilities/_debug.scss +29 -3
  35. data/stylesheets/utilities/_helper-classes.scss +135 -18
  36. data/stylesheets/utilities/_icon-fonts.scss +77 -80
  37. data/stylesheets/utilities/_mixins.scss +385 -63
  38. metadata +6 -13
  39. data/stylesheets/components/config.rb +0 -8
  40. data/stylesheets/settings/config.rb +0 -8
  41. data/stylesheets/utilities/_media-queries.scss +0 -50
  42. data/stylesheets/utilities/_sprites.scss +0 -22
  43. data/stylesheets/utilities/config.rb +0 -8
data/stylesheets/utilities/_animations.scss CHANGED
@@ -1,105 +1,126 @@
1
- // ====================================================================================================================
2
- // ANIMATIONS
3
- // ====================================================================================================================
1
+ /* =================================================================================================================
2
+
3
+ Animations
4
+
5
+ All the animations in [theCSSguru](https://twitter.com/theCSSguru)'s [Animate mixin](http://thecssguru.freeiz.com/animate/) are available with the same mixin.
6
+
7
+ #### Use
8
+
9
+ By default are only available `fadeIn` and `fadeOut`. To enable more animations add them to the `$animations` variable in `_effects.scss`.
10
+
11
+ #### Mixin
12
+
13
+ @include animate(fadeIn);
14
+
15
+ #### Silent classes
16
+
17
+ There are also available silent classes for all enabled animations to use with `@extend`
18
+
19
+ @extend %fadeIn;
20
+
21
+ Styleguide 20.
22
+
23
+ ================================================================================================================= */
4
24
 
5
- // ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
6
25
  // Disable all animations by default
7
26
  // --------------------------------------------------------------------------------------------------------------------
8
- $fadeIn: false !default;
9
- $fadeOut: false !default;
10
- $fadeInUp: false !default;
11
- $fadeOutUp: false !default;
12
- $fadeInDown: false !default;
13
- $fadeOutDown: false !default;
14
- $fadeInRight: false !default;
15
- $fadeOutLeft: false !default;
16
- $fadeInLeft: false !default;
17
- $fadeOutRight: false !default;
18
- $fadeInUpBig: false !default;
19
- $fadeOutUpBig: false !default;
20
- $fadeInDownBig: false !default;
21
- $fadeOutDownBig: false !default;
22
- $fadeInRightBig: false !default;
23
- $fadeOutLeftBig: false !default;
24
- $fadeInLeftBig: false !default;
25
- $fadeOutRightBig: false !default;
26
- $bounceIn: false !default;
27
- $bounceInDown: false !default;
28
- $bounceInUp: false !default;
29
- $bounceInRight: false !default;
30
- $bounceInLeft: false !default;
31
- $bounceOut: false !default;
32
- $bounceOutUp: false !default;
33
- $bounceOutDown: false !default;
34
- $bounceOutLeft: false !default;
35
- $bounceOutRight: false !default;
36
- $flash: false !default;
37
- $bounce: false !default;
38
- $shake: false !default;
39
- $rotateInDownLeft: false !default;
40
- $rotateInUpLeft: false !default;
41
- $rotateInUpRight: false !default;
42
- $rotateInDownRight: false !default;
43
- $rotateOutDownLeft: false !default;
44
- $rotateOutUpLeft: false !default;
45
- $rotateOutDownRight: false !default;
46
- $rotateOutUpRight: false !default;
47
- $rotateIn: false !default;
48
- $rotateOut: false !default;
49
- $tada: false !default;
50
27
 
51
- // ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
28
+ $fadeIn: false !default;
29
+ $fadeOut: false !default;
30
+ $fadeInUp: false !default;
31
+ $fadeOutUp: false !default;
32
+ $fadeInDown: false !default;
33
+ $fadeOutDown: false !default;
34
+ $fadeInRight: false !default;
35
+ $fadeOutLeft: false !default;
36
+ $fadeInLeft: false !default;
37
+ $fadeOutRight: false !default;
38
+ $fadeInUpBig: false !default;
39
+ $fadeOutUpBig: false !default;
40
+ $fadeInDownBig: false !default;
41
+ $fadeOutDownBig: false !default;
42
+ $fadeInRightBig: false !default;
43
+ $fadeOutLeftBig: false !default;
44
+ $fadeInLeftBig: false !default;
45
+ $fadeOutRightBig: false !default;
46
+ $bounceIn: false !default;
47
+ $bounceInDown: false !default;
48
+ $bounceInUp: false !default;
49
+ $bounceInRight: false !default;
50
+ $bounceInLeft: false !default;
51
+ $bounceOut: false !default;
52
+ $bounceOutUp: false !default;
53
+ $bounceOutDown: false !default;
54
+ $bounceOutLeft: false !default;
55
+ $bounceOutRight: false !default;
56
+ $flash: false !default;
57
+ $bounce: false !default;
58
+ $shake: false !default;
59
+ $rotateInDownLeft: false !default;
60
+ $rotateInUpLeft: false !default;
61
+ $rotateInUpRight: false !default;
62
+ $rotateInDownRight: false !default;
63
+ $rotateOutDownLeft: false !default;
64
+ $rotateOutUpLeft: false !default;
65
+ $rotateOutDownRight: false !default;
66
+ $rotateOutUpRight: false !default;
67
+ $rotateIn: false !default;
68
+ $rotateOut: false !default;
69
+ $tada: false !default;
70
+
52
71
  // Enable animation from the settings
53
72
  // --------------------------------------------------------------------------------------------------------------------
73
+
54
74
  @each $animation in $animations {
55
- @if $animation == 'fadeIn' {$fadeIn: true;}
56
- @if $animation == 'fadeOut' {$fadeOut: true;}
57
- @if $animation == 'fadeInUp' {$fadeInUp: true;}
58
- @if $animation == 'fadeOutUp' {$fadeOutUp: true;}
59
- @if $animation == 'fadeInDown' {$fadeInDown: true;}
60
- @if $animation == 'fadeOutDown' {$fadeOutDown: true;}
61
- @if $animation == 'fadeInRight' {$fadeInRight: true;}
62
- @if $animation == 'fadeOutLeft' {$fadeOutLeft: true;}
63
- @if $animation == 'fadeInLeft' {$fadeInLeft: true;}
64
- @if $animation == 'fadeOutRight' {$fadeOutRight: true;}
65
- @if $animation == 'fadeInUpBig' {$fadeInUpBig: true;}
66
- @if $animation == 'fadeOutUpBig' {$fadeOutUpBig: true;}
67
- @if $animation == 'fadeInDownBig' {$fadeInDownBig: true;}
68
- @if $animation == 'fadeOutDownBig' {$fadeOutDownBig: true;}
69
- @if $animation == 'fadeInRightBig' {$fadeInRightBig: true;}
70
- @if $animation == 'fadeOutLeftBig' {$fadeOutLeftBig: true;}
71
- @if $animation == 'fadeInLeftBig' {$fadeInLeftBig: true;}
72
- @if $animation == 'fadeOutRightBig' {$fadeOutRightBig: true;}
73
- @if $animation == 'bounceIn' {$bounceIn: true;}
74
- @if $animation == 'bounceInDown' {$bounceInDown: true;}
75
- @if $animation == 'bounceInUp' {$bounceInUp: true;}
76
- @if $animation == 'bounceInRight' {$bounceInRight: true;}
77
- @if $animation == 'bounceInLeft' {$bounceInLeft: true;}
78
- @if $animation == 'bounceOut' {$bounceOut: true;}
79
- @if $animation == 'bounceOutUp' {$bounceOutUp: true;}
80
- @if $animation == 'bounceOutDown' {$bounceOutDown: true;}
81
- @if $animation == 'bounceOutLeft' {$bounceOutLeft: true;}
82
- @if $animation == 'bounceOutRight' {$bounceOutRight: true;}
83
- @if $animation == 'flash' {$flash: true;}
84
- @if $animation == 'bounce' {$bounce: true;}
85
- @if $animation == 'shake' {$shake: true;}
86
- @if $animation == 'rotateInDownLeft' {$rotateInDownLeft: true;}
87
- @if $animation == 'rotateInUpLeft' {$rotateInUpLeft: true;}
88
- @if $animation == 'rotateInUpRight' {$rotateInUpRight: true;}
89
- @if $animation == 'rotateInDownRight' {$rotateInDownRight: true;}
90
- @if $animation == 'rotateOutDownLeft' {$rotateOutDownLeft: true;}
91
- @if $animation == 'rotateOutUpLeft' {$rotateOutUpLeft: true;}
92
- @if $animation == 'rotateOutDownRight' {$rotateOutDownRight: true;}
93
- @if $animation == 'rotateOutUpRight' {$rotateOutUpRight: true;}
94
- @if $animation == 'rotateIn' {$rotateIn: true;}
95
- @if $animation == 'rotateOut' {$rotateOut: true;}
96
- @if $animation == 'tada' {$tada: true;}
75
+ @if $animation == 'fadeIn' {$fadeIn: true;}
76
+ @if $animation == 'fadeOut' {$fadeOut: true;}
77
+ @if $animation == 'fadeInUp' {$fadeInUp: true;}
78
+ @if $animation == 'fadeOutUp' {$fadeOutUp: true;}
79
+ @if $animation == 'fadeInDown' {$fadeInDown: true;}
80
+ @if $animation == 'fadeOutDown' {$fadeOutDown: true;}
81
+ @if $animation == 'fadeInRight' {$fadeInRight: true;}
82
+ @if $animation == 'fadeOutLeft' {$fadeOutLeft: true;}
83
+ @if $animation == 'fadeInLeft' {$fadeInLeft: true;}
84
+ @if $animation == 'fadeOutRight' {$fadeOutRight: true;}
85
+ @if $animation == 'fadeInUpBig' {$fadeInUpBig: true;}
86
+ @if $animation == 'fadeOutUpBig' {$fadeOutUpBig: true;}
87
+ @if $animation == 'fadeInDownBig' {$fadeInDownBig: true;}
88
+ @if $animation == 'fadeOutDownBig' {$fadeOutDownBig: true;}
89
+ @if $animation == 'fadeInRightBig' {$fadeInRightBig: true;}
90
+ @if $animation == 'fadeOutLeftBig' {$fadeOutLeftBig: true;}
91
+ @if $animation == 'fadeInLeftBig' {$fadeInLeftBig: true;}
92
+ @if $animation == 'fadeOutRightBig' {$fadeOutRightBig: true;}
93
+ @if $animation == 'bounceIn' {$bounceIn: true;}
94
+ @if $animation == 'bounceInDown' {$bounceInDown: true;}
95
+ @if $animation == 'bounceInUp' {$bounceInUp: true;}
96
+ @if $animation == 'bounceInRight' {$bounceInRight: true;}
97
+ @if $animation == 'bounceInLeft' {$bounceInLeft: true;}
98
+ @if $animation == 'bounceOut' {$bounceOut: true;}
99
+ @if $animation == 'bounceOutUp' {$bounceOutUp: true;}
100
+ @if $animation == 'bounceOutDown' {$bounceOutDown: true;}
101
+ @if $animation == 'bounceOutLeft' {$bounceOutLeft: true;}
102
+ @if $animation == 'bounceOutRight' {$bounceOutRight: true;}
103
+ @if $animation == 'flash' {$flash: true;}
104
+ @if $animation == 'bounce' {$bounce: true;}
105
+ @if $animation == 'shake' {$shake: true;}
106
+ @if $animation == 'rotateInDownLeft' {$rotateInDownLeft: true;}
107
+ @if $animation == 'rotateInUpLeft' {$rotateInUpLeft: true;}
108
+ @if $animation == 'rotateInUpRight' {$rotateInUpRight: true;}
109
+ @if $animation == 'rotateInDownRight' {$rotateInDownRight: true;}
110
+ @if $animation == 'rotateOutDownLeft' {$rotateOutDownLeft: true;}
111
+ @if $animation == 'rotateOutUpLeft' {$rotateOutUpLeft: true;}
112
+ @if $animation == 'rotateOutDownRight' {$rotateOutDownRight: true;}
113
+ @if $animation == 'rotateOutUpRight' {$rotateOutUpRight: true;}
114
+ @if $animation == 'rotateIn' {$rotateIn: true;}
115
+ @if $animation == 'rotateOut' {$rotateOut: true;}
116
+ @if $animation == 'tada' {$tada: true;}
97
117
  }
98
118
 
99
119
 
100
- // ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
120
+
101
121
  // Animate Mixin Plugin;
102
122
  // --------------------------------------------------------------------------------------------------------------------
123
+
103
124
  @mixin animate($name, $duration: $animations-duration, $delay: $animations-delay, $function: $animations-function, $mode: $animations-mode) {
104
125
  @include experimental(animation, $name $duration $delay $function $mode);
105
126
  }
@@ -113,19 +134,19 @@ $tada: false !default;
113
134
  }
114
135
  }
115
136
 
116
- // ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
117
137
  // Keyframes
118
138
  // --------------------------------------------------------------------------------------------------------------------
139
+
119
140
  @if $fadeIn == true {
120
141
  @include keyframes(fadeIn) {
121
- 0% { opacity: 0; }
122
- 100% { opacity: 1; }
142
+ 0% { opacity: 0; }
143
+ 100% { opacity: 1; }
123
144
  }
124
145
  }
125
146
  @if $fadeOut == true {
126
147
  @include keyframes(fadeOut) {
127
- 0% { opacity: 1; }
128
- 100% { opacity: 0; }
148
+ 0% { opacity: 1; }
149
+ 100% { opacity: 0; }
129
150
  }
130
151
  }
131
152
  @if $fadeInUp == true {
@@ -490,37 +511,37 @@ $tada: false !default;
490
511
  }
491
512
  @if $flash == true {
492
513
  @include keyframes(flash) {
493
- 0% { opacity: 1; }
494
- 25% { opacity: 0; }
495
- 50% { opacity: 1; }
496
- 75% { opacity: 0; }
497
- 100% { opacity: 1; }
514
+ 0% { opacity: 1; }
515
+ 25% { opacity: 0; }
516
+ 50% { opacity: 1; }
517
+ 75% { opacity: 0; }
518
+ 100% { opacity: 1; }
498
519
  }
499
520
  }
500
521
  @if $bounce == true {
501
522
  @include keyframes(bounce) {
502
- 0% { @include transform(translateY(0)); }
503
- 20% { @include transform(translateY(0)); }
504
- 40% { @include transform(translateY(-30px)); }
505
- 50% { @include transform(translateY(0)); }
506
- 60% { @include transform(translateY(-15px)); }
507
- 80% { @include transform(translateY(0)); }
508
- 100% { @include transform(translateY(0)); }
523
+ 0% { @include transform(translateY(0)); }
524
+ 20% { @include transform(translateY(0)); }
525
+ 40% { @include transform(translateY(-30px)); }
526
+ 50% { @include transform(translateY(0)); }
527
+ 60% { @include transform(translateY(-15px)); }
528
+ 80% { @include transform(translateY(0)); }
529
+ 100% { @include transform(translateY(0)); }
509
530
  }
510
531
  }
511
532
  @if $shake == true {
512
533
  @include keyframes(shake) {
513
- 0% { @include transform(translateX(0)); }
514
- 10% { @include transform(translateX(-10px)); }
515
- 20% { @include transform(translateX(10px)); }
516
- 30% { @include transform(translateX(-10px)); }
517
- 40% { @include transform(translateX(10px)); }
518
- 50% { @include transform(translateX(-10px)); }
519
- 60% { @include transform(translateX(10px)); }
520
- 70% { @include transform(translateX(-10px)); }
521
- 80% { @include transform(translateX(10px)); }
522
- 90% { @include transform(translateX(-10px)); }
523
- 100% { @include transform(translateX(0)); }
534
+ 0% { @include transform(translateX(0)); }
535
+ 10% { @include transform(translateX(-10px)); }
536
+ 20% { @include transform(translateX(10px)); }
537
+ 30% { @include transform(translateX(-10px)); }
538
+ 40% { @include transform(translateX(10px)); }
539
+ 50% { @include transform(translateX(-10px)); }
540
+ 60% { @include transform(translateX(10px)); }
541
+ 70% { @include transform(translateX(-10px)); }
542
+ 80% { @include transform(translateX(10px)); }
543
+ 90% { @include transform(translateX(-10px)); }
544
+ 100% { @include transform(translateX(0)); }
524
545
  }
525
546
  }
526
547
  @if $rotateInDownLeft == true {
@@ -665,16 +686,16 @@ $tada: false !default;
665
686
  }
666
687
  @if $tada == true {
667
688
  @include keyframes(tada) {
668
- 0% { @include transform(scale(1)); }
669
- 10% { @include transform(scale(0.9) rotate(-3deg)); }
670
- 20% { @include transform(scale(0.9) rotate(-3deg)); }
671
- 30% { @include transform(scale(1.1) rotate(3deg)); }
672
- 40% { @include transform(scale(1.1) rotate(-3deg)); }
673
- 50% { @include transform(scale(1.1) rotate(3deg)); }
674
- 60% { @include transform(scale(1.1) rotate(-3deg)); }
675
- 70% { @include transform(scale(1.1) rotate(3deg)); }
676
- 80% { @include transform(scale(1.1) rotate(-3deg)); }
677
- 90% { @include transform(scale(1.1) rotate(3deg)); }
678
- 100% { @include transform(scale(1) rotate(0)); }
689
+ 0% { @include transform(scale(1)); }
690
+ 10% { @include transform(scale(0.9) rotate(-3deg)); }
691
+ 20% { @include transform(scale(0.9) rotate(-3deg)); }
692
+ 30% { @include transform(scale(1.1) rotate(3deg)); }
693
+ 40% { @include transform(scale(1.1) rotate(-3deg)); }
694
+ 50% { @include transform(scale(1.1) rotate(3deg)); }
695
+ 60% { @include transform(scale(1.1) rotate(-3deg)); }
696
+ 70% { @include transform(scale(1.1) rotate(3deg)); }
697
+ 80% { @include transform(scale(1.1) rotate(-3deg)); }
698
+ 90% { @include transform(scale(1.1) rotate(3deg)); }
699
+ 100% { @include transform(scale(1) rotate(0)); }
679
700
  }
680
701
  }
data/stylesheets/utilities/_debug.scss CHANGED
@@ -1,6 +1,15 @@
1
- // ====================================================================================================================
2
- // DEBUG MODE
3
- // ====================================================================================================================
1
+ /* ====================================================================================================================
2
+
3
+ Debug mode
4
+
5
+ Add different background colors and border for elements with different proprieties (has class, has id, has title, ect.),
6
+ usefull for debugging code and finding errors. Taken form [Inuit](https://github.com/csswizardry/inuit.css).
7
+
8
+ Enable it with `$debug-mode: true;`.
9
+
10
+ Styleguide 21.
11
+
12
+ ==================================================================================================================== */
4
13
 
5
14
  @if $debug-mode {
6
15
 
@@ -42,4 +51,21 @@
42
51
  [style] {outline: 5px solid yellow;}
43
52
  [id] {outline: 5px solid yellow;}
44
53
 
54
+
55
+ // btn-groups
56
+ // --------------------------------------------------------------------------------------------------------------------
57
+ .btn-group > li:first-child .btn { background: YellowGreen !important; }
58
+ .btn-group > li:last-child .btn { background: Wheat !important; }
59
+ div.btn-group .btn { background: Tomato !important; }
60
+
61
+ .form__controls--multi {
62
+ .btn-group:first-child > li:first-child .btn { background: red !important; }
63
+ .btn-group:first-child > li:last-child .btn { background: blue !important; }
64
+ div.btn-group:first-child .btn { background: green !important; }
65
+
66
+ .btn-group:last-child > li:first-child .btn { background: purple !important; }
67
+ .btn-group:last-child > li:last-child .btn { background: yellow !important; }
68
+ div.btn-group:last-child > .btn { background: teal !important; }
69
+ }
70
+
45
71
  }
data/stylesheets/utilities/_helper-classes.scss CHANGED
@@ -1,6 +1,59 @@
1
- // ====================================================================================================================
2
- // HELPER CLASSES
3
- // ====================================================================================================================
1
+ /* ====================================================================================================================
2
+
3
+ Helper Classes
4
+
5
+ There are provided some helper classes usually used with `@extend` for applying effects or common styles.
6
+
7
+ Styleguide 22.
8
+
9
+ ==================================================================================================================== */
10
+
11
+ /* --------------------------------------------------------------------------------------------------------------------
12
+
13
+ Generic
14
+
15
+ Add a a simple `transition all`, used as a generic extend for element that can accept transition on all attributes.
16
+ .transition
17
+ Simple divider class used in some components (like dropdowns).␣␣
18
+ .divider
19
+
20
+ Styleguide 22.1
21
+
22
+ -------------------------------------------------------------------------------------------------------------------- */
23
+
24
+ .clearfix {
25
+ &:after {
26
+ content: "";
27
+ display: table;
28
+ clear: both;
29
+ }
30
+ }
31
+
32
+ .transition {
33
+ @include transition();
34
+ }
35
+
36
+ .divider {
37
+ @include nav-divider();
38
+ }
39
+
40
+ /* --------------------------------------------------------------------------------------------------------------------
41
+
42
+ Wrappers
43
+
44
+ Flexible wrapper to center the layout, max-width width `$desk-end`.
45
+
46
+ .wrapper
47
+ .w
48
+
49
+ Same a `.wrapper` but with fixed width.
50
+
51
+ .fixed-wrapper
52
+ .fw
53
+
54
+ Styleguide 22.2
55
+
56
+ -------------------------------------------------------------------------------------------------------------------- */
4
57
 
5
58
  .wrapper, .w {
6
59
  @extend .clearfix;
@@ -16,32 +69,96 @@
16
69
  width: $desk-end;
17
70
  }
18
71
 
19
- // ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
20
- // Sizes
21
- // --------------------------------------------------------------------------------------------------------------------
72
+
73
+ .left {float: left;}
74
+ .right {float: right;}
75
+
76
+
77
+ /* --------------------------------------------------------------------------------------------------------------------
78
+
79
+ Elements width
80
+
81
+ Add `data-width="n"` to any html element to set the width.
82
+
83
+ [data-width="n"]
84
+
85
+ * **n**: Width in percentage in increments of 5 of the element.
86
+
87
+ Example:
88
+
89
+ data-width="50"
90
+
91
+ Corrispond to:
92
+
93
+ width: 50% !important;
94
+
95
+ Styleguide 22.3
96
+
97
+ -------------------------------------------------------------------------------------------------------------------- */
22
98
 
23
99
  $i: 100;
24
100
  @while $i > 0 {
25
101
  %width-#{$i} { width: $i * 1% !important; }
26
- [data-width="#{$i}"] { @extend %width-#{$i}; }
102
+ @if $width-helper-classes {
103
+ [data-width="#{$i}"] { @extend %width-#{$i}; }
104
+ }
27
105
  $i: $i - 1;
28
106
  }
29
107
 
30
- // ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
31
- // Transition class for @extend
32
- // --------------------------------------------------------------------------------------------------------------------
108
+ /* --------------------------------------------------------------------------------------------------------------------
33
109
 
34
- .transition {
35
- @include transition();
36
- }
110
+ Typography
37
111
 
38
- .divider {
39
- @include nav-divider();
112
+ Styleguide 22.4
113
+
114
+ -------------------------------------------------------------------------------------------------------------------- */
115
+
116
+ .lead { @include adjust-font-size-to($h4-size); }
117
+ .muted { color: $gray; }
118
+
119
+ .pull-left { float: left; }
120
+ .pull-right { float: right; }
121
+
122
+ .text-left { text-align: left; }
123
+ .text-right { text-align: right; }
124
+ .text-center { text-align: center; }
125
+
126
+ /* --------------------------------------------------------------------------------------------------------------------
127
+
128
+ Sprites
129
+
130
+ Styleguide 22.5
131
+
132
+ -------------------------------------------------------------------------------------------------------------------- */
133
+
134
+ .s {
135
+ content: "";
136
+ display: inline-block;
137
+ overflow:hidden;
138
+ vertical-align:middle;
139
+ text-align:center;
140
+ font-style:normal;
141
+ zoom:1;
142
+ text-indent:-9999px;
40
143
  }
41
144
 
42
- // ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
43
- // Text replacement (from http://html5boilerplate.com/)
44
- // --------------------------------------------------------------------------------------------------------------------
145
+ /* --------------------------------------------------------------------------------------------------------------------
146
+
147
+ Text replacement
148
+
149
+ All the text replacement classes from from [html5boilerplate](http://html5boilerplate.com/).
150
+
151
+ .ir
152
+ .ir
153
+ .hidden
154
+ .visuallyhidden
155
+ .visuallyhidden
156
+ .invisible
157
+
158
+ Styleguide 22.6
159
+
160
+ -------------------------------------------------------------------------------------------------------------------- */
161
+
45
162
  .ir{background-color:transparent;border:0;overflow:hidden;text-indent:-9999px;line-height:0;font-size:0;}
46
163
  .ir:before{content:"";display:block;width:0;height:150%}
47
164
  .hidden{display:none!important;visibility:hidden}