magic_stylez 0.0.0.13 → 0.0.0.19

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 (77) hide show
  1. checksums.yaml +4 -4
  2. data/.gitignore +2 -1
  3. data/lib/magic_stylez/engine.rb +3 -6
  4. data/lib/magic_stylez/version.rb +1 -1
  5. data/test/dummy/app/assets/javascripts/app.js.coffee +41 -18
  6. data/test/dummy/app/assets/javascripts/application.js +1 -0
  7. data/test/dummy/app/assets/javascripts/assets.js.coffee.erb +29 -0
  8. data/test/dummy/app/assets/javascripts/blank.js +14 -0
  9. data/test/dummy/app/assets/javascripts/views/app/start.jst.eco +13 -3
  10. data/test/dummy/app/assets/javascripts/views/effects/shadows.jst.eco +24 -24
  11. data/test/dummy/app/assets/javascripts/views/elements/buttons.jst.eco +131 -0
  12. data/test/dummy/app/assets/javascripts/views/elements/circle_diagram.jst.eco +67 -0
  13. data/test/dummy/app/assets/javascripts/views/elements/inputs.jst.eco +185 -0
  14. data/test/dummy/app/assets/javascripts/views/{elements → helper}/arrow_infos.jst.eco +5 -5
  15. data/test/dummy/app/assets/javascripts/views/helper/crossed_text.jst.eco +33 -0
  16. data/test/dummy/app/assets/javascripts/views/helper/divider.jst.eco +82 -0
  17. data/test/dummy/app/assets/javascripts/views/helper/three_previews.jst.eco +46 -0
  18. data/test/dummy/app/assets/javascripts/views/icons/glyphicons.jst.eco +24 -0
  19. data/test/dummy/app/assets/javascripts/views/icons/icomoon.jst.eco +24 -0
  20. data/test/dummy/app/assets/javascripts/views/icons/magicons.jst.eco +25 -0
  21. data/test/dummy/app/assets/javascripts/views/icons/olicons.jst.eco +1774 -0
  22. data/test/dummy/app/assets/javascripts/views/templates/fixed_header.jst.eco +5 -0
  23. data/test/dummy/app/assets/javascripts/views/templates/responsive_slidebar.jst.eco +5 -0
  24. data/test/dummy/app/assets/stylesheets/application.css.scss +80 -31
  25. data/test/dummy/app/controllers/front_controller.rb +11 -0
  26. data/test/dummy/app/views/front/_aside.html.erb +27 -28
  27. data/test/dummy/app/views/front/start.html.erb +13 -3
  28. data/test/dummy/app/views/front/templates.html.erb +85 -0
  29. data/test/dummy/app/views/layouts/application.html.erb +0 -2
  30. data/test/dummy/app/views/layouts/blank.html.erb +17 -0
  31. data/test/dummy/app/views/templates/_lorem.html.erb +89 -0
  32. data/test/dummy/app/views/templates/fixed-header.html.erb +53 -0
  33. data/test/dummy/app/views/templates/responsive-slidebar.html.erb +55 -0
  34. data/test/dummy/config/application.rb +1 -0
  35. data/test/dummy/config/routes.rb +7 -0
  36. data/test/dummy/public/html/fixed-header.html.erb +158 -0
  37. data/test/dummy/public/html/index.html +173 -0
  38. data/test/dummy/public/html/responsive-slidebar.html.erb +160 -0
  39. data/vendor/assets/fonts/magic/icomoon.eot +0 -0
  40. data/vendor/assets/fonts/magic/icomoon.svg +461 -0
  41. data/vendor/assets/fonts/magic/icomoon.ttf +0 -0
  42. data/vendor/assets/fonts/magic/icomoon.woff +0 -0
  43. data/vendor/assets/images/magic/helper/blank_10.png +0 -0
  44. data/vendor/assets/images/magic/helper/white_10.png +0 -0
  45. data/vendor/assets/javascripts/magic/circle_diagram.js.coffee +146 -0
  46. data/vendor/assets/javascripts/magic/collapse.js.coffee +11 -0
  47. data/vendor/assets/javascripts/magic/helper.js.coffee +19 -0
  48. data/vendor/assets/javascripts/magic-min.js.coffee +22 -0
  49. data/vendor/assets/javascripts/magic-stylez.js.coffee +5 -0
  50. data/vendor/assets/stylesheets/magic/content/_box.scss +14 -5
  51. data/vendor/assets/stylesheets/magic/content/_buttons.scss +285 -0
  52. data/vendor/assets/stylesheets/magic/content/_forms.scss +2 -70
  53. data/vendor/assets/stylesheets/magic/content/_inputs.scss +149 -0
  54. data/vendor/assets/stylesheets/magic/content/_navbar.scss +59 -0
  55. data/vendor/assets/stylesheets/magic/corporate/_fonts.scss +1 -1
  56. data/vendor/assets/stylesheets/magic/corporate/_typo.scss +8 -1
  57. data/vendor/assets/stylesheets/magic/corporate/_variables.scss +1 -3
  58. data/vendor/assets/stylesheets/magic/effects/_noise.scss +36 -0
  59. data/vendor/assets/stylesheets/magic/effects/_shadows.scss +22 -22
  60. data/vendor/assets/stylesheets/magic/elements/_circle_diagram.scss +214 -0
  61. data/vendor/assets/stylesheets/magic/helper/_all.scss +5 -0
  62. data/vendor/assets/stylesheets/magic/helper/_arrow_hints.scss +28 -0
  63. data/vendor/assets/stylesheets/magic/helper/_crossed.scss +22 -0
  64. data/vendor/assets/stylesheets/magic/helper/_divider.scss +48 -0
  65. data/vendor/assets/stylesheets/magic/helper/_dots.scss +26 -0
  66. data/vendor/assets/stylesheets/magic/helper/_three_previews.scss +33 -0
  67. data/vendor/assets/stylesheets/magic/icons/icomoon.scss +1392 -0
  68. data/vendor/assets/stylesheets/magic/layout/_section.scss +18 -2
  69. data/vendor/assets/stylesheets/magic/lib/_animation.scss +0 -6
  70. data/vendor/assets/stylesheets/magic/lib/_helper.scss +92 -0
  71. data/vendor/assets/stylesheets/magic/{layout → xxx}/_body.scss +0 -0
  72. data/vendor/assets/stylesheets/magic/{content → xxx}/_header.scss +0 -0
  73. data/vendor/assets/stylesheets/magic-stylez.scss +18 -79
  74. metadata +103 -41
  75. data/test/dummy/app/assets/javascripts/views/elements/icons.jst.eco +0 -9004
  76. data/test/dummy/public/xindex.html +0 -136
  77. data/vendor/assets/stylesheets/magic/content/_helper.scss +0 -70
@@ -0,0 +1,146 @@
1
+ class CircleDiagram
2
+
3
+ constructor: (options) ->
4
+ @opt = if options then options else {}
5
+ @options = $.extend {}, defaults, @opt
6
+ # @circle = $(@options.circle)
7
+ @circle = @options.circle
8
+ @el = @circle.find(@options.el)
9
+ @percent = @options.percent
10
+ @degree = @options.deg
11
+ @rotating = @options.rotating
12
+ @timer = @options.timer
13
+ @setup()
14
+
15
+
16
+
17
+ defaults =
18
+ el: '.inner_half_one'
19
+ circle: '.circle-diagram'
20
+ percent: 0
21
+ deg: 0
22
+ rotating: false
23
+ precision: "ungenau"
24
+ timeStep: 20
25
+ fastStep: 5
26
+ slowStep: 50
27
+ timer: undefined
28
+
29
+
30
+ rotate: ->
31
+ @clean_percent
32
+ @set_rotation @percent
33
+ @timer = setTimeout(->
34
+ ++@percent
35
+ @rotate()
36
+ , @options.timeStep)
37
+
38
+
39
+ rotate_to: (value) =>
40
+ @clean_percent
41
+ # console?.log? "rotate_to ::: #{@percent}% (#{@degree}°) -- #{value}"
42
+ deg = parseInt( 360 / 100 * value )
43
+ @set_rotation @percent, @degree
44
+ unless @degree is deg
45
+ if @degree < deg
46
+ new_value = @degree + 1
47
+ timerStep = deg - @degree
48
+ else
49
+ new_value = @degree - 1
50
+ timerStep = @degree - deg
51
+ @degree = new_value
52
+ if @options.precision is "genau"
53
+ @percent = ( Math.round( new_value / 360 * 100 * 10 ) / 10 ).toFixed(1)
54
+ else
55
+ @percent = parseInt( new_value / 360 * 100 )
56
+ @timer = setTimeout(=>
57
+ @rotate_to(value)
58
+ , @getTimeStep(timerStep))
59
+ else
60
+ clearTimeout @timer
61
+ @set_rotation value, @degree
62
+
63
+
64
+
65
+ set_rotation: (value, deg) =>
66
+ circ = deg + 90
67
+
68
+ # $elie.css WebkitTransform: "rotate(" + circ + "deg)"
69
+ @el.css "-webkit-transform": "rotate(" + circ + "deg)"
70
+ @el.css "-moz-transform": "rotate(" + circ + "deg)"
71
+ @el.css "-ms-transform": "rotate(" + circ + "deg)"
72
+ @el.css "-o-transform": "rotate(" + circ + "deg)"
73
+ @el.css "transform": "rotate(" + circ + "deg)"
74
+
75
+ @circle.attr "data-deg", deg
76
+ @circle.attr "data-percent", value
77
+
78
+ if @options.precision is "genau"
79
+ @circle.find(".middle_full").html (Math.round(value * 10) / 10).toFixed(1) + " %"
80
+ else
81
+ @circle.find(".middle_full").html parseInt(value) + " %"
82
+
83
+ if deg >= 180
84
+ @circle.addClass "halfplus"
85
+ else
86
+ @circle.removeClass "halfplus"
87
+
88
+ clean_percent: ->
89
+ @percent = @percent - 100 if @percent > 100
90
+ @percent
91
+
92
+
93
+
94
+ setup: ->
95
+ percent = parseInt( @circle.attr("data-percent") ) or 0
96
+ @rotate_to percent unless percent is @percent
97
+
98
+
99
+
100
+
101
+ getTimeStep: (valu) ->
102
+ if valu > 60
103
+ @options.fastStep
104
+ else if valu > 18
105
+ @options.timeStep
106
+ else
107
+ @options.slowStep
108
+
109
+
110
+ window.CircleDiagram = CircleDiagram
111
+
112
+ # $(".animate_knopf").click ->
113
+ # console.log "klicked"
114
+ # if rotating
115
+ # clearTimeout timer
116
+ # rotating = false
117
+ # else
118
+ # rotate()
119
+ # rotating = true
120
+ #
121
+ # $(".set_deg_knopf").click ->
122
+ # console.log "klicked"
123
+ # rotate_to parseInt($("#wished_deg").val())
124
+ # $("#wished_percent").val $("#wished_deg").val() / 360 * 100
125
+ #
126
+ # $(".set_percent_knopf").click ->
127
+ # console.log "klicked"
128
+ # field = $(@).closest("tr").find(".wished_percent")
129
+ # newval = parseInt( field.val() )
130
+ # window.circles[ parseInt( field.attr("data-circle") ) ].rotate_to newval
131
+
132
+
133
+
134
+
135
+
136
+ # $ ->
137
+ # if $('.circle-diagram').length > 1
138
+ # window.circles = {}
139
+ # count = 0
140
+ # $('.circle-diagram').each ->
141
+ # window.circles[count] = new CircleDiagram( circle: $(@) )
142
+ # count = count + 1
143
+ # else if $('.circle-diagram').length > 0
144
+ # window.circleDiagram = new CircleDiagram( circle: $('.circle-diagram') )
145
+
146
+
@@ -0,0 +1,11 @@
1
+ $ ->
2
+ $("body").on "click", ".navbar-slidebar .navbar-toggle", (ev) ->
3
+ ev.preventDefault()
4
+ $(@).closest(".navbar-slidebar").find(".navbar-collapse").toggleClass("on")
5
+ false
6
+
7
+ # $("body").on "click", ".navbar .slidebar-toggle", (ev) ->
8
+ # ev.preventDefault()
9
+ # header = $(@).closest(".navbar-slidebar")
10
+ # slidebar = header.find(".navbar-collapse")
11
+ # slidebar.toggleClass("on")
@@ -0,0 +1,19 @@
1
+ @to_currency = ( number ) ->
2
+ unless isNaN number
3
+ (Math.round( parseFloat( number ) * 100 ) / 100).toFixed(2)
4
+ else
5
+ (0).toFixed(2)
6
+
7
+ @to_euro = (number) ->
8
+ "#{to_currency(number)} €"
9
+
10
+ @to_dollar = (number) ->
11
+ "$ #{to_currency(number)}"
12
+
13
+
14
+ $ ->
15
+
16
+ # replace komma with dot (german uses komma instead of dot)
17
+ $("body").on "keyup", "input.number_field", ->
18
+ if jQuery(@).val().indexOf(",") isnt -1
19
+ jQuery(@).val( jQuery(@).val().replace(',','.') )
@@ -0,0 +1,22 @@
1
+ ## Load bootstrap
2
+ #= require bootstrap/affix
3
+ #= require bootstrap/alert
4
+ #= require bootstrap/button
5
+ #= require bootstrap/carousel
6
+ #= require bootstrap/collapse
7
+ #= require bootstrap/dropdown
8
+ #= require bootstrap/tab
9
+ #= require bootstrap/transition
10
+ #= require bootstrap/scrollspy
11
+ #= require bootstrap/modal
12
+ #= require bootstrap/tooltip
13
+ #= require bootstrap/popover
14
+
15
+ ## Load magic
16
+ #= require magic/helper
17
+ #= require magic/collapse
18
+
19
+ icon = (icn) ->
20
+ "<i class='icon icon-#{icn}'></i>"
21
+
22
+
@@ -12,6 +12,11 @@
12
12
  #= require bootstrap/tooltip
13
13
  #= require bootstrap/popover
14
14
 
15
+ ## Load magic
16
+ #= require magic/circle_diagram
17
+ #= require magic/helper
18
+ #= require magic/collapse
19
+
15
20
  icon = (icn) ->
16
21
  "<i class='icon icon-#{icn}'></i>"
17
22
 
@@ -1,5 +1,9 @@
1
- .box {
1
+ .box, .box > .header, .box > .body, .box > .pic {
2
2
  display: block; position: relative;
3
+ margin: 0; padding: 0;
4
+ }
5
+
6
+ .box {
3
7
  margin: 0 0 20px; padding: 10px;
4
8
  border: solid 1px #ccc;
5
9
  @include border-radius(3px);
@@ -12,7 +16,7 @@
12
16
 
13
17
 
14
18
  & > .pic {
15
- padding: 0; margin: 0 10px 0 -100px;
19
+ margin: 0 10px 0 -100px;
16
20
  width: 100px;
17
21
  float: left;
18
22
  border: solid 1px #ccc;
@@ -20,9 +24,14 @@
20
24
  & > .header {
21
25
  padding: 5px 10px 5px;
22
26
  border-bottom: solid 1px #ccc;
23
- color: #a0c775;
24
- line-height: 30px;
25
- font-size: 18px;
27
+
28
+ &, h1, h2, h3, h4, h5, h6, p, span, .h1, .h2, .h3, .h4, .h5, .h6 {
29
+ margin: 0; padding: 0 5px 2px;
30
+ color: #a0c775;
31
+ line-height: 30px;
32
+ font-size: 18px;
33
+ }
34
+
26
35
  &.blank { border-bottom: solid 1px transparent; }
27
36
  i, i:before {
28
37
  color: #999;
@@ -0,0 +1,285 @@
1
+ @mixin btn_icn_width( $lineHeight: 20px, $verticalPadding: 10px ) {
2
+ $wdth: 5 + $lineHeight + $verticalPadding * 2;
3
+ min-width: $wdth;
4
+ max-width: $wdth;
5
+ }
6
+
7
+
8
+ .btn-splited, .btn-divided {
9
+ display: table;
10
+ width: auto;
11
+ width: 100%;
12
+ // margin: 0 0 10px;
13
+ padding: 0;
14
+ & > * {
15
+ display: table-cell; position: relative;
16
+ padding: $padding-base-vertical $padding-base-horizontal;
17
+ font-size: inherit;
18
+ line-height: inherit;
19
+ text-shadow: inherit;
20
+ color: inherit;
21
+ width: auto;
22
+ width: 98%;
23
+ @include border-left-radius(0);
24
+ vertical-align: middle;
25
+ &:first-child { @include border-left-radius($border-radius-base); }
26
+ &:last-child { @include border-right-radius($border-radius-base); }
27
+ &.icn {
28
+ width: 2%;
29
+ font-size: $font-size-base * 1.1;
30
+ @include horizontal-padding(2px);
31
+ text-align: center;
32
+ @include btn_icn_width( $line-height-computed, $padding-base-vertical );
33
+ }
34
+ }
35
+
36
+ &.btn-lg > * {
37
+ padding: $padding-large-vertical $padding-large-horizontal;
38
+ // font-size: $font-size-large;
39
+ // line-height: $line-height-large;
40
+ &:first-child { @include border-left-radius($border-radius-large); }
41
+ &:last-child { @include border-right-radius($border-radius-large); }
42
+ &.icn { font-size: $font-size-large * 1.1; @include btn_icn_width($line-height-computed-lg, $padding-large-vertical);}
43
+ }
44
+ &.btn-sm > * {
45
+ padding: $padding-small-vertical $padding-small-horizontal;
46
+ // font-size: $font-size-small;
47
+ // line-height: $line-height-small;
48
+ &:first-child { @include border-left-radius($border-radius-small); }
49
+ &:last-child { @include border-right-radius($border-radius-small); }
50
+ &.icn { font-size: $font-size-small * 1.1; @include btn_icn_width($line-height-computed-sm, $padding-small-vertical);}
51
+ }
52
+ &.btn-xs > * {
53
+ padding: $padding-xs-vertical $padding-xs-horizontal;
54
+ // font-size: $font-size-small;
55
+ // line-height: $line-height-small;
56
+ &:first-child { @include border-left-radius($border-radius-small); }
57
+ &:last-child { @include border-right-radius($border-radius-small); }
58
+ &.icn { font-size: $font-size-small * 1.1; @include btn_icn_width($line-height-computed-xs, $padding-xs-vertical); }
59
+ }
60
+
61
+ & > .icn {
62
+ width: 2%;
63
+ @include horizontal-padding(2px);
64
+ text-align: center;
65
+ }
66
+
67
+ }
68
+ .btn-divided {
69
+ & > * {
70
+ border-right-style: solid;
71
+ border-right-width: 1px;
72
+ border-right-color: inherit;
73
+ @include box-shadow( inset -1px 0 1px 0 rgba(255,255,255,.32) );
74
+ &:last-child {
75
+ @include box-shadow( none );
76
+ border-right: none;
77
+ }
78
+ }
79
+ }
80
+
81
+ //
82
+ // Social - Buttons
83
+ //
84
+ .btn-app, .btn-google, .btn-facebook, .btn-twitter, .btn-paypal,
85
+ .btn-app-nice, .btn-google-nice, .btn-facebook-nice, .btn-twitter-nice, .btn-paypal-nice {
86
+ color: #fff;
87
+ vertical-align: middle;
88
+ &:hover, &:active { color: #fff; }
89
+ }
90
+
91
+ //.btn-socials {
92
+ // padding: 5px 22px !important;
93
+ //}
94
+
95
+ // Flat Colors
96
+ $facebook-color: #3b5998;
97
+ $google-color: #dd4b39;
98
+ $twitter-color: #00aced;
99
+ $paypal-color: #12398c;
100
+ $paypal-color: #1784cb;
101
+ // Gradient Colors
102
+ $facebook-nice-top: lighten($facebook-color, 7%);
103
+ $facebook-nice-bottom: darken($facebook-color, 7%);
104
+ $google-nice-top: lighten($google-color, 7%);
105
+ $google-nice-bottom: darken($google-color, 7%);
106
+ $twitter-nice-top: lighten($twitter-color, 7%);
107
+ $twitter-nice-bottom: darken($twitter-color, 7%);
108
+ $paypal-nice-top: #52b9f4;
109
+ $paypal-nice-bottom: darken(#1784cb, 5%);
110
+
111
+
112
+
113
+ // Flat Buttons
114
+ .btn-facebook {
115
+ background: $facebook-color;
116
+ text-shadow: 0 1px 0 darken($facebook-color, 20%);
117
+ border-color: darken($facebook-color, 10%);
118
+ &:active {
119
+ background: darken($facebook-color, 10%);
120
+ }
121
+ &:hover {
122
+ background: darken($facebook-color, 5%);
123
+ border-color: darken($facebook-color, 15%);
124
+ }
125
+ }
126
+ .btn-google {
127
+ background: $google-color;
128
+ text-shadow: 0 1px 0 darken($google-color, 20%);
129
+ border-color: darken($google-color, 10%);
130
+ &:active {
131
+ background: darken($google-color, 10%);
132
+ }
133
+ &:hover {
134
+ background: darken($google-color, 5%);
135
+ border-color: darken($google-color, 15%);
136
+ }
137
+ }
138
+ .btn-twitter {
139
+ background: $twitter-color;
140
+ text-shadow: 0 1px 0 darken($twitter-color, 20%);
141
+ border-color: darken($twitter-color, 10%);
142
+ &:active {
143
+ background: darken($twitter-color, 10%);
144
+ }
145
+ &:hover {
146
+ background: darken($twitter-color, 5%);
147
+ border-color: darken($twitter-color, 15%);
148
+ }
149
+ }
150
+ .btn-paypal {
151
+ background: $paypal-color;
152
+ text-shadow: 0 1px 0 darken($paypal-color, 20%);
153
+ border-color: darken($paypal-color, 10%);
154
+ &:active {
155
+ background: darken($paypal-color, 10%);
156
+ }
157
+ &:hover {
158
+ background: darken($paypal-color, 5%);
159
+ border-color: darken($paypal-color, 15%);
160
+ }
161
+ }
162
+
163
+
164
+ // Nice Buttons
165
+ .btn-facebook-nice, .btn-google-nice, .btn-twitter-nice, .btn-paypal-nice {
166
+ color: #fff;
167
+ @include box-shadow( inset 0 1px 0 0 rgba(255,255,255,.42), 0 1px 1px 0 rgba(0,0,0,.42) );
168
+ &.btn-icn, & > .btn-icn {
169
+ @include box-shadow( inset 0 1px 0 0 rgba(255,255,255,.42), 0 1px 1px 0 rgba(0,0,0,.42), inset -1px 0 1px 0 rgba(255,255,255,.32) );
170
+ }
171
+ &:hover { color: #fff; }
172
+ }
173
+
174
+ .btn-facebook-nice, .btn-facebook-nice > .btn {
175
+ @include linear-gradient($facebook-nice-top, $facebook-nice-bottom);
176
+ text-shadow: 0 1px 0 darken($facebook-nice-bottom, 20%);
177
+ border-color: darken($facebook-nice-top, 10%);
178
+ &:active {
179
+ @include linear-gradient( darken($facebook-nice-top, 10%), darken($facebook-nice-bottom, 10%));
180
+ }
181
+ &:hover {
182
+ @include linear-gradient( darken($facebook-nice-top, 5%), darken($facebook-nice-bottom, 5%));
183
+ }
184
+ }
185
+ .btn-google-nice, .btn-google-nice > .btn {
186
+ @include linear-gradient($google-nice-top, $google-nice-bottom);
187
+ text-shadow: 0 1px 0 darken($google-nice-bottom, 20%);
188
+ border-color: darken($google-nice-top, 10%);
189
+ border-bottom-color: darken($google-nice-bottom, 5%);
190
+ &:active {
191
+ @include linear-gradient( darken($google-nice-top, 10%), darken($google-nice-bottom, 10%));
192
+ }
193
+ &:hover {
194
+ @include linear-gradient( darken($google-nice-top, 5%), darken($google-nice-bottom, 5%));
195
+ }
196
+ }
197
+ .btn-twitter-nice, .btn-twitter-nice > .btn {
198
+ @include linear-gradient($twitter-nice-top, $twitter-nice-bottom);
199
+ text-shadow: 0 1px 0 darken($twitter-nice-bottom, 20%);
200
+ border-color: darken($twitter-nice-top, 10%);
201
+ &:active {
202
+ @include linear-gradient( darken($twitter-nice-top, 10%), darken($twitter-nice-bottom, 10%));
203
+ }
204
+ &:hover {
205
+ @include linear-gradient( darken($twitter-nice-top, 5%), darken($twitter-nice-bottom, 5%));
206
+ }
207
+ }
208
+ .btn-paypal-nice, .btn-paypal-nice > .btn {
209
+ @include linear-gradient($paypal-nice-top, $paypal-nice-bottom);
210
+ text-shadow: 0 1px 0 darken($paypal-nice-bottom, 20%);
211
+ border-color: darken($paypal-nice-top, 20%);
212
+ &:active {
213
+ @include linear-gradient( darken($paypal-nice-top, 10%), darken($paypal-nice-bottom, 10%));
214
+ }
215
+ &:hover {
216
+ @include linear-gradient( darken($paypal-nice-top, 5%), darken($paypal-nice-bottom, 5%));
217
+ }
218
+ }
219
+
220
+
221
+
222
+
223
+
224
+
225
+
226
+ // # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # #
227
+ //
228
+ // D E P R E A C A T E D . . . will be removed soon !
229
+ //
230
+ // # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # #
231
+
232
+
233
+ .btn-group-block.input-group {
234
+ .btn {
235
+ text-align: left;
236
+ padding: 10px;
237
+ &.icn {
238
+ text-align: center;
239
+ }
240
+ }
241
+ }
242
+
243
+ .btn-group-block {
244
+ @include box-sizing(border-box);
245
+ display: table;
246
+ width: 100%;
247
+ margin: 0 0 10px;
248
+ text-decoration: none;
249
+ .btn {
250
+ display: table-cell;
251
+ width: auto;
252
+ width: 95%;
253
+ &.btn-icn {
254
+ width: 5%;
255
+ font-size: 18px;
256
+ @include box-shadow( inset -1px 0 1px 0 rgba(255,255,255,.32) );
257
+ min-width: 42px;
258
+ max-width: 44px;
259
+ text-align: center;
260
+ @include horizontal-padding(5px);
261
+ }
262
+ border-collapse: separate;
263
+ border-spacing: 0;
264
+ @include border-radius(0);
265
+
266
+ &:first-child { @include border-left-radius(5px); }
267
+ &:last-child { @include border-right-radius(5px); }
268
+ }
269
+ .btn + .btn {
270
+ border-left: none;
271
+ }
272
+
273
+ &.lineless {
274
+ .btn {
275
+ border-left-width: 0;
276
+ border-right-width: 0;
277
+ @include box-shadow( none );
278
+ &:first-child { border-left-width: 0; }
279
+ &:last-child { border-right-width: 0; }
280
+ }
281
+ }
282
+
283
+ &.half { width: 50%; margin-left: auto; margin-right: auto; }
284
+ &:hover { text-decoration: none !important; }
285
+ }