ultimate-helpers 0.1.0.0
Sign up to get free protection for your applications and to get access to all the features.
- data/.gitignore +8 -0
- data/.rvmrc +1 -0
- data/.rvmrc.example +1 -0
- data/Gemfile +10 -0
- data/Gemfile.lock +126 -0
- data/LICENSE +19 -0
- data/README.md +25 -0
- data/Rakefile +1 -0
- data/app/assets/javascripts/ultimate/base.js.coffee +11 -0
- data/app/assets/javascripts/ultimate/helpers/asset_tag.js.coffee +82 -0
- data/app/assets/javascripts/ultimate/helpers/base.js.coffee +3 -0
- data/app/assets/javascripts/ultimate/helpers/decor.js.coffee +19 -0
- data/app/assets/javascripts/ultimate/helpers/form_options.js.coffee +106 -0
- data/app/assets/javascripts/ultimate/helpers/form_tag.js.coffee +175 -0
- data/app/assets/javascripts/ultimate/helpers/javascript.js.coffee +31 -0
- data/app/assets/javascripts/ultimate/helpers/number.js.coffee +600 -0
- data/app/assets/javascripts/ultimate/helpers/record_tag.js.coffee +81 -0
- data/app/assets/javascripts/ultimate/helpers/tag.js.coffee +91 -0
- data/app/assets/javascripts/ultimate/helpers/url.js.coffee +152 -0
- data/app/assets/javascripts/ultimate/helpers.js.coffee +122 -0
- data/app/assets/javascripts/ultimate/jquery.base.js.coffee +85 -0
- data/app/assets/javascripts/ultimate/underscore/underscore.inflection.js +176 -0
- data/app/assets/javascripts/ultimate/underscore/underscore.js +1204 -0
- data/app/assets/javascripts/ultimate/underscore/underscore.outcasts.js.coffee +158 -0
- data/app/assets/javascripts/ultimate/underscore/underscore.string.js +600 -0
- data/config/routes.rb +2 -0
- data/lib/ultimate/helpers/engine.rb +7 -0
- data/lib/ultimate/helpers/version.rb +5 -0
- data/lib/ultimate/helpers.rb +8 -0
- data/scripts/rails +8 -0
- data/test/dummy/Rakefile +7 -0
- data/test/dummy/_emfile +18 -0
- data/test/dummy/app/assets/images/.gitkeep +0 -0
- data/test/dummy/app/assets/javascripts/application.js +3 -0
- data/test/dummy/app/assets/stylesheets/application.css +13 -0
- data/test/dummy/app/assets/stylesheets/global/forms.css.scss +65 -0
- data/test/dummy/app/assets/stylesheets/global/layout/footer.scss +18 -0
- data/test/dummy/app/assets/stylesheets/global/layout/header.scss +13 -0
- data/test/dummy/app/assets/stylesheets/global/layout/main-menu.scss +68 -0
- data/test/dummy/app/assets/stylesheets/global/layout.css.scss +46 -0
- data/test/dummy/app/assets/stylesheets/global/reserved.css.scss +79 -0
- data/test/dummy/app/assets/stylesheets/global/reset.css.scss +85 -0
- data/test/dummy/app/assets/stylesheets/global/structures.css.scss +9 -0
- data/test/dummy/app/assets/stylesheets/import/base.scss +36 -0
- data/test/dummy/app/assets/stylesheets/plugins/qunit.css.scss +3 -0
- data/test/dummy/app/controllers/application_controller.rb +4 -0
- data/test/dummy/app/controllers/main_controller.rb +8 -0
- data/test/dummy/app/helpers/application_helper.rb +2 -0
- data/test/dummy/app/mailers/.gitkeep +0 -0
- data/test/dummy/app/models/.gitkeep +0 -0
- data/test/dummy/app/views/application/_footer.html.haml +3 -0
- data/test/dummy/app/views/application/_header.html.haml +4 -0
- data/test/dummy/app/views/application/_main_menu.html.haml +11 -0
- data/test/dummy/app/views/layouts/application.html.haml +24 -0
- data/test/dummy/app/views/main/index.html.haml +13 -0
- data/test/dummy/app/views/main/qunit.html.haml +7 -0
- data/test/dummy/config/application.rb +58 -0
- data/test/dummy/config/boot.rb +10 -0
- data/test/dummy/config/database.yml +25 -0
- data/test/dummy/config/environment.rb +5 -0
- data/test/dummy/config/environments/development.rb +40 -0
- data/test/dummy/config/environments/production.rb +67 -0
- data/test/dummy/config/environments/test.rb +37 -0
- data/test/dummy/config/initializers/backtrace_silencers.rb +7 -0
- data/test/dummy/config/initializers/inflections.rb +15 -0
- data/test/dummy/config/initializers/mime_types.rb +5 -0
- data/test/dummy/config/initializers/qunit-rails.rb +1 -0
- data/test/dummy/config/initializers/secret_token.rb +7 -0
- data/test/dummy/config/initializers/session_store.rb +8 -0
- data/test/dummy/config/initializers/wrap_parameters.rb +14 -0
- data/test/dummy/config/locales/en.yml +5 -0
- data/test/dummy/config/routes.rb +63 -0
- data/test/dummy/config.ru +4 -0
- data/test/dummy/log/.gitkeep +0 -0
- data/test/dummy/public/404.html +26 -0
- data/test/dummy/public/422.html +26 -0
- data/test/dummy/public/500.html +25 -0
- data/test/dummy/public/favicon.ico +0 -0
- data/test/dummy/script/rails +6 -0
- data/test/javascripts/all_tests.js.coffee +12 -0
- data/test/javascripts/test_helper.js.coffee +3 -0
- data/test/javascripts/tests/helpers/asset_tag_test.js.coffee +51 -0
- data/test/javascripts/tests/helpers/form_options_test.js.coffee +170 -0
- data/test/javascripts/tests/helpers/form_tag_test.js.coffee +226 -0
- data/test/javascripts/tests/helpers/javascript_test.js.coffee +25 -0
- data/test/javascripts/tests/helpers/number_test.js.coffee +250 -0
- data/test/javascripts/tests/helpers/record_tag_test.js.coffee +60 -0
- data/test/javascripts/tests/helpers/tag_test.js.coffee +58 -0
- data/test/javascripts/tests/helpers/url_test.js.coffee +76 -0
- data/test/javascripts/tests/underscore/underscore.outcasts.test.js.coffee +47 -0
- data/test/javascripts/vendors/backbone.js +1533 -0
- data/test/javascripts/vendors/i18n-lite.js.coffee +20 -0
- data/test/stylesheets/test_helper.css +4 -0
- data/test/stylesheets/vendors/ultimate/mixins/_routines.scss +120 -0
- data/test/stylesheets/vendors/ultimate/mixins/_vendors.scss +44 -0
- data/test/stylesheets/vendors/ultimate/mixins/css3/_text-shadow.scss +40 -0
- data/test/stylesheets/vendors/ultimate/mixins/css3.scss +350 -0
- data/test/stylesheets/vendors/ultimate/mixins/fonts.scss +100 -0
- data/test/stylesheets/vendors/ultimate/mixins/microstructures.scss +239 -0
- data/ultimate-helpers.gemspec +25 -0
- metadata +193 -0
@@ -0,0 +1,20 @@
|
|
1
|
+
# TODO list:
|
2
|
+
# * load all locales
|
3
|
+
# * pluralize
|
4
|
+
|
5
|
+
@I18n = $.extend true,
|
6
|
+
{
|
7
|
+
locale: "en"
|
8
|
+
translations: {}
|
9
|
+
|
10
|
+
translate: (path, options = {}) ->
|
11
|
+
path = path.split('.') if _.isString(path)
|
12
|
+
scope = @translations
|
13
|
+
for step in path
|
14
|
+
scope = scope[step]
|
15
|
+
return options['default'] ? path.join('.') unless scope?
|
16
|
+
scope
|
17
|
+
|
18
|
+
t: -> @translate arguments...
|
19
|
+
|
20
|
+
}, @I18n
|
@@ -0,0 +1,120 @@
|
|
1
|
+
@mixin deprecate($subject, $instead: false) {
|
2
|
+
@warn "\"#{$subject}\" DEPRECATED!#{if($instead, " Use instead: \"#{$instead}\"", '')}";
|
3
|
+
}
|
4
|
+
|
5
|
+
@function isset($v) {
|
6
|
+
@return $v != none and $v != false;
|
7
|
+
}
|
8
|
+
|
9
|
+
@function complex-isset($list, $l: length($list)) {
|
10
|
+
$i: 1;
|
11
|
+
@while $i <= $l and isset(nth($list, $i)) {
|
12
|
+
$i: $i + 1;
|
13
|
+
}
|
14
|
+
@return $i > $l;
|
15
|
+
}
|
16
|
+
|
17
|
+
@function list-rtrim($list, $count: 1) {
|
18
|
+
$r: ();
|
19
|
+
$l: length($list) - $count;
|
20
|
+
$i: 1;
|
21
|
+
@while $i <= $l {
|
22
|
+
$r: append($r, nth($list, $i));
|
23
|
+
$i: $i + 1;
|
24
|
+
}
|
25
|
+
@return $r;
|
26
|
+
}
|
27
|
+
|
28
|
+
@function complex-list($params) {
|
29
|
+
$l: length($params);
|
30
|
+
@if $l > 1 and nth($params, $l) == !important {
|
31
|
+
$params: list-rtrim($params);
|
32
|
+
$l: $l - 1;
|
33
|
+
}
|
34
|
+
@if $l < 4 {
|
35
|
+
@if $l < 3 {
|
36
|
+
$params: join($params, nth($params, 1));
|
37
|
+
}
|
38
|
+
@if $l > 1 {
|
39
|
+
$params: join($params, nth($params, 2));
|
40
|
+
} @else {
|
41
|
+
$params: join($params, $params);
|
42
|
+
}
|
43
|
+
}
|
44
|
+
@return $params;
|
45
|
+
}
|
46
|
+
|
47
|
+
@mixin complex-property($property, $params, $complex-params: false) {
|
48
|
+
@if isset($params) {
|
49
|
+
$l: length($params);
|
50
|
+
@if $l == 1 or complex-isset($params) {
|
51
|
+
#{$property}: $params;
|
52
|
+
} @else {
|
53
|
+
@if $l < 4 {
|
54
|
+
$params: if(length($complex-params) >= 4, $complex-params, complex-list($params));
|
55
|
+
}
|
56
|
+
$i: 0;
|
57
|
+
@each $side in top, right, bottom, left {
|
58
|
+
$i: $i + 1;
|
59
|
+
$p: nth($params, $i);
|
60
|
+
@if isset($p) {
|
61
|
+
#{$property}-#{$side}: $p;
|
62
|
+
}
|
63
|
+
}
|
64
|
+
}
|
65
|
+
}
|
66
|
+
}
|
67
|
+
|
68
|
+
@function strip-px($v) {
|
69
|
+
@return if(unit($v) == "px", $v / 1px, $v);
|
70
|
+
}
|
71
|
+
|
72
|
+
@function list-to-string($list, $separator: "") {
|
73
|
+
$result: "";
|
74
|
+
$first: true;
|
75
|
+
@each $cut in $list {
|
76
|
+
@if $first {
|
77
|
+
$first: false;
|
78
|
+
$result: $cut;
|
79
|
+
} @else {
|
80
|
+
$result: "#{$result}#{$separator}#{$cut}"
|
81
|
+
}
|
82
|
+
}
|
83
|
+
@return $result;
|
84
|
+
}
|
85
|
+
|
86
|
+
@function change-separator($list, $separator: comma) {
|
87
|
+
$result: ();
|
88
|
+
@each $value in $list {
|
89
|
+
$result: append($result, $value, $separator);
|
90
|
+
}
|
91
|
+
@return $result;
|
92
|
+
}
|
93
|
+
|
94
|
+
@function compact-list($list, $separator: comma) {
|
95
|
+
$result: ();
|
96
|
+
@each $value in $list {
|
97
|
+
@if isset($value) {
|
98
|
+
$result: append($result, $value, $separator);
|
99
|
+
}
|
100
|
+
}
|
101
|
+
@return $result;
|
102
|
+
}
|
103
|
+
|
104
|
+
@function hack-ie8($params) {
|
105
|
+
@return unquote("#{$params}\0/");
|
106
|
+
}
|
107
|
+
|
108
|
+
@function contains($list, $var) {
|
109
|
+
@each $item in $list { @if $item == $var { @return true; } }
|
110
|
+
@return false;
|
111
|
+
}
|
112
|
+
|
113
|
+
@function find-typed-item($list, $type, $default: false) {
|
114
|
+
@each $item in $list { @if type-of($item) == $type { @return $item; } }
|
115
|
+
@return $default;
|
116
|
+
}
|
117
|
+
|
118
|
+
@function find-color($list, $default: false) {
|
119
|
+
@return find-typed-item($list, color, $default);
|
120
|
+
}
|
@@ -0,0 +1,44 @@
|
|
1
|
+
// This mixin provides basic support for CSS properties with custom vendors implementations
|
2
|
+
// are identical except for the property prefix.
|
3
|
+
// example:
|
4
|
+
// @include vendors(webkit moz, border-radius, 5px);
|
5
|
+
// produce:
|
6
|
+
// -webkit-border-radius: 5px;
|
7
|
+
// -moz-border-radius: 5px;
|
8
|
+
// border-radius: 5px;
|
9
|
+
@mixin vendors($vendors, $property, $params, $origin: true) {
|
10
|
+
@each $vendor in $vendors {
|
11
|
+
-#{$vendor}-#{$property}: $params;
|
12
|
+
}
|
13
|
+
@if $origin {
|
14
|
+
#{$property}: $params;
|
15
|
+
}
|
16
|
+
}
|
17
|
+
|
18
|
+
// Same as vendors(), but for cases when the property is the same and the value is vendorized.
|
19
|
+
// examples:
|
20
|
+
// @include vendors-param(webkit moz ms o, background-image, linear-gradient(left top, #F00, #FF0 50%, #0F0));
|
21
|
+
// produce:
|
22
|
+
// background-image: -webkit-linear-gradient(left top, #F00, #FF0 50%, #0F0);
|
23
|
+
// background-image: -moz-linear-gradient(left top, #F00, #FF0 50%, #0F0);
|
24
|
+
// background-image: -ms-linear-gradient(left top, #F00, #FF0 50%, #0F0);
|
25
|
+
// background-image: -o-linear-gradient(left top, #F00, #FF0 50%, #0F0);
|
26
|
+
// background-image: linear-gradient(left top, #F00, #FF0 50%, #0F0);
|
27
|
+
@mixin vendors-param($vendors, $property, $params, $origin: true) {
|
28
|
+
@each $vendor in $vendors {
|
29
|
+
#{$property}: -#{$vendor}-#{$params};
|
30
|
+
}
|
31
|
+
@if $origin {
|
32
|
+
#{$property}: $params;
|
33
|
+
}
|
34
|
+
}
|
35
|
+
|
36
|
+
// TODO docs
|
37
|
+
@mixin vendors-full($vendors, $property, $params, $origin: true) {
|
38
|
+
@each $vendor in $vendors {
|
39
|
+
-#{$vendor}-#{$property}: -#{$vendor}-#{$params};
|
40
|
+
}
|
41
|
+
@if $origin {
|
42
|
+
#{$property}: $params;
|
43
|
+
}
|
44
|
+
}
|
@@ -0,0 +1,40 @@
|
|
1
|
+
|
2
|
+
$support-ie: true !default;
|
3
|
+
|
4
|
+
// Provide cross-browser CSS text-shadow with hardcore ie-hack.
|
5
|
+
// example:
|
6
|
+
// @include text-shadow(#3b3b3b 1px 1px 1px);
|
7
|
+
// produce:
|
8
|
+
// text-shadow: 0 2px #000;
|
9
|
+
// filter: shadow(Color=#3b3b3b, Direction=135, Strength=1.414);
|
10
|
+
@mixin text-shadow_hard($params) {
|
11
|
+
$l: length($params);
|
12
|
+
$color: nth($params, $l);
|
13
|
+
@if $color == none {
|
14
|
+
text-shadow: none;
|
15
|
+
@if $support-ie {
|
16
|
+
filter: shadow(enabled=false);
|
17
|
+
}
|
18
|
+
} @else {
|
19
|
+
text-shadow: $params;
|
20
|
+
@if $support-ie {
|
21
|
+
$params-offset: 0;
|
22
|
+
@if type-of($color) != 'color' {
|
23
|
+
$color: nth($params, 1);
|
24
|
+
@if type-of($color) == 'color' {
|
25
|
+
$params-offset: 1;
|
26
|
+
} @else {
|
27
|
+
$color: #000;
|
28
|
+
}
|
29
|
+
}
|
30
|
+
$offset-x: 0;
|
31
|
+
$offset-y: 0;
|
32
|
+
@if $l > 2 {
|
33
|
+
$offset-x : nth($params, $params-offset + 1);
|
34
|
+
$offset-y : nth($params, $params-offset + 2);
|
35
|
+
}
|
36
|
+
$polar: polar($offset-x, $offset-y);
|
37
|
+
filter: shadow(Color=$color, Direction=nth($polar, 1), Strength=nth($polar, 2));
|
38
|
+
}
|
39
|
+
}
|
40
|
+
}
|
@@ -0,0 +1,350 @@
|
|
1
|
+
// Use compatibility tables from http://caniuse.com/
|
2
|
+
// http://css3pie.com/documentation/supported-css3-features/#pie-lazy-init
|
3
|
+
|
4
|
+
$support-ie: true !default;
|
5
|
+
$pie-url: asset-url("polyfills/PIE.htc", '') !default;
|
6
|
+
$boxsizing-url: asset-url("polyfills/boxsizing.htc", '') !default;
|
7
|
+
|
8
|
+
|
9
|
+
@mixin pie($poll: none, $watch-ancestors: 0) {
|
10
|
+
@if $support-ie and $pie-url {
|
11
|
+
behavior: $pie-url;
|
12
|
+
// http://css3pie.com/documentation/supported-css3-features/#pie-poll
|
13
|
+
@if $poll != none {
|
14
|
+
-pie-poll: $poll;
|
15
|
+
}
|
16
|
+
// http://css3pie.com/documentation/supported-css3-features/#pie-watch-ancestors
|
17
|
+
@if $watch-ancestors > 0 {
|
18
|
+
-pie-watch-ancestors: $watch-ancestors;
|
19
|
+
}
|
20
|
+
}
|
21
|
+
}
|
22
|
+
|
23
|
+
@import 'vendors/ultimate/mixins/vendors';
|
24
|
+
@import 'vendors/ultimate/mixins/routines';
|
25
|
+
@import 'vendors/ultimate/mixins/css3/text-shadow';
|
26
|
+
|
27
|
+
// Round all corners by a specific amount.
|
28
|
+
// example:
|
29
|
+
// @include border-radius(5px 5px 0 0);
|
30
|
+
// produce:
|
31
|
+
// -webkit-border-radius: 5px 5px 0 0; // iOS-Safari <= 3.2, Android <= 2.1
|
32
|
+
// border-radius: 5px 5px 0 0;
|
33
|
+
@mixin border-radius($params) {
|
34
|
+
@include vendors(webkit, border-radius, $params);
|
35
|
+
}
|
36
|
+
|
37
|
+
// Round mentioned corners by a specific amounts without muted corners by none or false.
|
38
|
+
// example:
|
39
|
+
// @include border-radius__complex(5px 7px none);
|
40
|
+
// produce:
|
41
|
+
// -webkit-border-top-left-radius: 5px; // iOS-Safari <= 3.2, Android <= 2.1
|
42
|
+
// border-top-left-radius: 5px;
|
43
|
+
// -webkit-border-top-right-radius: 7px;
|
44
|
+
// border-top-right-radius: 7px;
|
45
|
+
// -webkit-border-bottom-left-radius: 7px;
|
46
|
+
// border-bottom-left-radius: 7px;
|
47
|
+
@mixin border-radius_complex($params) {
|
48
|
+
@if isset($params) {
|
49
|
+
$l: length($params);
|
50
|
+
@if $l == 1 or complex-isset($params) {
|
51
|
+
@include border-radius($params);
|
52
|
+
} @else {
|
53
|
+
@if $l < 4 {
|
54
|
+
$params: complex-list($params);
|
55
|
+
}
|
56
|
+
$i: 0;
|
57
|
+
@each $corner in top-left, top-right, bottom-right, bottom-left {
|
58
|
+
$i: $i + 1;
|
59
|
+
$p: nth($params, $i);
|
60
|
+
@if isset($p) {
|
61
|
+
@include vendors(webkit, border-#{$corner}-radius, $p);
|
62
|
+
}
|
63
|
+
}
|
64
|
+
}
|
65
|
+
}
|
66
|
+
}
|
67
|
+
|
68
|
+
// Provide CSS3 box-shadow property.
|
69
|
+
// example:
|
70
|
+
// @include box-shadow(#00F -10px 0 10px, #F00 10px 0 10px);
|
71
|
+
// produce:
|
72
|
+
// -webkit-box-shadow: #00F -10px 0 10px, #F00 10px 0 10px; // Safari 5.0, iOS-Safari <= 4.3, Android <= 4.0 missing "inset" and blur radius value support for iOS-Safari <= 3.2, Android <= 3.0
|
73
|
+
// box-shadow: #00F -10px 0 10px, #F00 10px 0 10px;
|
74
|
+
@mixin box-shadow($shadow0, $shadow1: false, $shadow2: false, $shadow3: false, $shadow4: false, $shadow5: false, $shadow6: false, $shadow7: false, $shadow8: false, $shadow9: false) {
|
75
|
+
$shadows: compact-list($shadow0 $shadow1 $shadow2 $shadow3 $shadow4 $shadow5 $shadow6 $shadow7 $shadow8 $shadow9);
|
76
|
+
@if length($shadows) == 0 {
|
77
|
+
$shadows: none;
|
78
|
+
}
|
79
|
+
@include vendors(webkit, box-shadow, $shadows);
|
80
|
+
}
|
81
|
+
|
82
|
+
// Change the box model of element.
|
83
|
+
// example:
|
84
|
+
// @include box-sizing;
|
85
|
+
// produce:
|
86
|
+
// -webkit-box-sizing: border-box; // Safari <= 5.0, iOS-Safari <= 4.3, Android <= 3.0
|
87
|
+
// -moz-box-sizing: border-box; // actual
|
88
|
+
// box-sizing: border-box; //
|
89
|
+
// *behavior: url("/assets/polyfills/boxsizing.htc"); // IE 6-7
|
90
|
+
@mixin box-sizing($params: border-box) {
|
91
|
+
@include vendors(webkit moz, box-sizing, $params);
|
92
|
+
@if $support-ie and $boxsizing-url {
|
93
|
+
// https://github.com/Schepp/box-sizing-polyfill
|
94
|
+
*behavior: $boxsizing-url; // IE 6-7
|
95
|
+
}
|
96
|
+
}
|
97
|
+
|
98
|
+
// Provide CSS3 linear-gradient as background image.
|
99
|
+
// params:
|
100
|
+
// $corner:
|
101
|
+
// Represents the position of the starting-point of the gradient line.
|
102
|
+
// It consists of two keywords: the first one indicates the horizontal side, `left` or `right`,
|
103
|
+
// and the second one the vertical side, `top` or `bottom`.
|
104
|
+
// The order is not relevant and each of the keyword is optional.
|
105
|
+
// The values `to top`, `to bottom`, `to left` and `to right`
|
106
|
+
// are translated into the angles `0deg`, `180deg`, `270deg`, `90deg` respectively.
|
107
|
+
// The others are translated into an angle that let the starting-point to be in the same quadrant
|
108
|
+
// than the described corner and so that the line defined by the starting-point and the corner
|
109
|
+
// is perpendicular to the gradient line. That way, the color described by the <color-stop>
|
110
|
+
// will exactly apply to the corner point. This is sometimes called the "magic corner" property.
|
111
|
+
// The end-point of the gradient line is the symmetrical point of the starting-point
|
112
|
+
// on the other direction of the center box.
|
113
|
+
// _angle:
|
114
|
+
// An angle of direction for the gradient. See <angle> (https://developer.mozilla.org/en/CSS/angle).
|
115
|
+
// $stops:
|
116
|
+
// This value is comprised of a <color> value, followed by an optional stop position
|
117
|
+
// (either a percentage between 0% and 100% or a <length> along the gradient axis).
|
118
|
+
// Rendering of color-stops in CSS gradients follows the same rules as color-stops in SVG gradients.
|
119
|
+
// example:
|
120
|
+
// @include linear-gradient(right, (green, orange 20%, red 100%));
|
121
|
+
// produce:
|
122
|
+
// background-color: $bg-color;
|
123
|
+
// background-image: -webkit-gradient(linear, right top, left top, color-stop(0%, green), color-stop(20%, orange), color-stop(100%, red)); // old webkit (Safari <= 5.0, iOS-Safari <= 4.3, Android <= 3.0)
|
124
|
+
// background-image: -webkit-linear-gradient(right, green, orange 20%, red 100%); // Chrome 10+, Safari 5.1+, Android 4.0+
|
125
|
+
// background-image: -moz-linear-gradient(right, green, orange 20%, red 100%); // FF 3.6+
|
126
|
+
// background-image: -ms-linear-gradient(right, green, orange 20%, red 100%); // IE 10+
|
127
|
+
// background-image: -o-linear-gradient(right, green, orange 20%, red 100%); // Opera 11.1+
|
128
|
+
// background-image: linear-gradient(right, green, orange 20%, red 100%); // future
|
129
|
+
// -pie-background: $bg-c linear-gradient(right, green, orange 20%, red 100%); // IE 6-9
|
130
|
+
@mixin linear-gradient($corner_angle, $stops) {
|
131
|
+
$wk_start: left top;
|
132
|
+
$wk_end: left bottom;
|
133
|
+
$start: nth($corner_angle, 1);
|
134
|
+
@if $start == top {
|
135
|
+
$wk_start: left top;
|
136
|
+
$wk_end: left bottom;
|
137
|
+
} @else if $start == bottom {
|
138
|
+
$wk_start: left bottom;
|
139
|
+
$wk_end: left top;
|
140
|
+
} @else if $start == left {
|
141
|
+
$wk_start: left top;
|
142
|
+
$wk_end: right top;
|
143
|
+
} @else if $start == right {
|
144
|
+
$wk_start: right top;
|
145
|
+
$wk_end: left top;
|
146
|
+
}
|
147
|
+
$wk_stops: ();
|
148
|
+
$stops_length: length($stops);
|
149
|
+
$percents-by-stop: 100 / ($stops_length - 1);
|
150
|
+
$i: 0;
|
151
|
+
$p: 0;
|
152
|
+
@each $stop in $stops {
|
153
|
+
$i: $i + 1;
|
154
|
+
$cp: "#{$p}%";
|
155
|
+
@if length($stop) > 1 {
|
156
|
+
$cp: nth($stop, 2);
|
157
|
+
}
|
158
|
+
$stop: "#{$cp}, #{nth($stop, 1)}";
|
159
|
+
$wk_stops: append($wk_stops, color-stop(#{$stop}), comma);
|
160
|
+
$p: $p + $percents-by-stop;
|
161
|
+
}
|
162
|
+
$bg-color: nth(nth($stops, 1), 1);
|
163
|
+
background-color: $bg-color;
|
164
|
+
background-image: -webkit-gradient(linear, $wk_start, $wk_end, $wk_stops);
|
165
|
+
$linear-gradient: linear-gradient($corner_angle, change-separator($stops));
|
166
|
+
@include vendors-param(webkit moz ms o, background-image, $linear-gradient);
|
167
|
+
@if $support-ie and $pie-url {
|
168
|
+
-pie-background: $bg-color $linear-gradient;
|
169
|
+
}
|
170
|
+
}
|
171
|
+
|
172
|
+
// Provide CSS3 radial-gradient as background image.
|
173
|
+
// params:
|
174
|
+
// $position:
|
175
|
+
// A position, interpreted in the same way as background-position or transform-origin. If omitted, the default is center.
|
176
|
+
// _angle:
|
177
|
+
// An angle establishing the gradient line, which extends from the starting point at this angle; this is 0deg by default.
|
178
|
+
// $shape:
|
179
|
+
// circle Meaning that the gradient's shape is a circle with constant radius.
|
180
|
+
// ellipse Meaning that the shape is an axis-aligned ellipse.
|
181
|
+
// _size:
|
182
|
+
// closest-side The gradient's shape meets the side of the box closest to its center (for circles) or meets both the vertical and horizontal sides closest to the center (for ellipses).
|
183
|
+
// closest-corner The gradient's shape is sized so it exactly meets the closest corner of the box from its center.
|
184
|
+
// farthest-side Similar to closest-side, except the shape is sized to meet the side of the box farthest from its center (or vertical and horizontal sides).
|
185
|
+
// farthest-corner The gradient's shape is sized so it exactly meets the farthest corner of the box from its center.
|
186
|
+
// contain A synonym for closest-side.
|
187
|
+
// cover A synonym for farthest-corner.
|
188
|
+
// example:
|
189
|
+
// @include radial-gradient(center 45deg, circle closest-side, (orange 0%, red 100%));
|
190
|
+
// produce:
|
191
|
+
// background-image: -webkit-radial-gradient(center 45deg, circle closest-side, orange 0%, red 100%); // Chrome 10+, Safari 5.1+, Android 4.0+
|
192
|
+
// background-image: -moz-radial-gradient(center 45deg, circle closest-side, orange 0%, red 100%); // FF 3.6+
|
193
|
+
// background-image: -ms-radial-gradient(center 45deg, circle closest-side, orange 0%, red 100%); // IE 10+
|
194
|
+
// background-image: -o-radial-gradient(center 45deg, circle closest-side, orange 0%, red 100%); // Opera 11.6+
|
195
|
+
// background-image: radial-gradient(center 45deg, circle closest-side, orange 0%, red 100%); // future
|
196
|
+
@mixin radial-gradient($position_angle, $shape_size, $stops) {
|
197
|
+
@include vendors-param(webkit moz ms o, background-image, radial-gradient($position_angle, $shape_size, change-separator($stops)));
|
198
|
+
}
|
199
|
+
|
200
|
+
@mixin border-gradient_simple($color_start, $color_stop, $is_horizontal: false) {
|
201
|
+
$color_mix: mix($color_start, $color_stop);
|
202
|
+
@if $is_horizontal {
|
203
|
+
border-color: $color_mix $color_stop $color_mix $color_start;
|
204
|
+
} @else {
|
205
|
+
border-color: $color_start $color_mix $color_stop;
|
206
|
+
}
|
207
|
+
}
|
208
|
+
|
209
|
+
// EXPERIMENTAL
|
210
|
+
// Temporary remove webkit support, because find bug in Chromium 20
|
211
|
+
@mixin border-gradient($color_start, $color_stop, $is_horizontal: false) {
|
212
|
+
@include border-gradient_simple($color_start, $color_stop, $is_horizontal);
|
213
|
+
$start: top;
|
214
|
+
//$wk_start: left top;
|
215
|
+
//$wk_stop: left bottom;
|
216
|
+
@if $is_horizontal {
|
217
|
+
$start: left;
|
218
|
+
//$wk_stop: right top;
|
219
|
+
}
|
220
|
+
// -webkit-border-image: -webkit-gradient(linear, $wk_start, $wk_stop, from($color_start), to($color_stop)); // old webkit (Safari <= 5.0, iOS-Safari <= 4.3, Android <= 3.0)
|
221
|
+
@include vendors-full(moz ms o, border-image, linear-gradient($start, $color_start, $color_stop));
|
222
|
+
//-webkit-border-image: -webkit-linear-gradient($start, $color_start, $color_stop); // Chrome 10+, Safari 5.1+, Android 4.0+
|
223
|
+
// -moz-border-image: -moz-linear-gradient($start, $color_start, $color_stop); // FF 3.5+
|
224
|
+
// -ms-border-image: -ms-linear-gradient($start, $color_start, $color_stop); // IE 10+
|
225
|
+
// -o-border-image: -o-linear-gradient($start, $color_start, $color_stop); // Opera 11.0+
|
226
|
+
// border-image: linear-gradient($start, $color_start, $color_stop); // future
|
227
|
+
}
|
228
|
+
|
229
|
+
// Provide cross-browser CSS opacity.
|
230
|
+
// example:
|
231
|
+
// @include opacity(0.3);
|
232
|
+
// produce:
|
233
|
+
// opacity: 0.3;
|
234
|
+
// filter: progid:DXImageTransform.Microsoft.Alpha(opacity=30); // IE <= 8.0
|
235
|
+
@mixin opacity($value: 0.5) {
|
236
|
+
opacity: $value;
|
237
|
+
@if $support-ie {
|
238
|
+
$value: round($value * 100);
|
239
|
+
@if $value < 100 {
|
240
|
+
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=#{$value});
|
241
|
+
} @else {
|
242
|
+
filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
|
243
|
+
}
|
244
|
+
}
|
245
|
+
}
|
246
|
+
|
247
|
+
// For rgba()
|
248
|
+
@mixin pie-bg($bg) {
|
249
|
+
background: $bg;
|
250
|
+
@if $support-ie and $pie-url and type-of($bg) == "color" and alpha($bg) < 1 {
|
251
|
+
-pie-background: $bg;
|
252
|
+
}
|
253
|
+
}
|
254
|
+
|
255
|
+
// example:
|
256
|
+
// @include ellipsis;
|
257
|
+
// produce:
|
258
|
+
// overflow: hidden; // need to work text-overflow
|
259
|
+
// white-space: nowrap; // need to work text-overflow
|
260
|
+
// -o-text-overflow: ellipsis; // Opera Mini and Opera Mobile
|
261
|
+
// text-overflow: ellipsis; // all
|
262
|
+
@mixin ellipsis($overflow: hidden, $nowrap: true) {
|
263
|
+
@if $overflow != false {
|
264
|
+
overflow: $overflow;
|
265
|
+
}
|
266
|
+
@if $nowrap {
|
267
|
+
white-space: nowrap;
|
268
|
+
}
|
269
|
+
@include vendors(o, text-overflow, ellipsis);
|
270
|
+
}
|
271
|
+
|
272
|
+
// $param: none || text || all || element
|
273
|
+
// example:
|
274
|
+
// @include user-select;
|
275
|
+
// produce:
|
276
|
+
// -webkit-user-select: none;
|
277
|
+
// -moz-user-select: none;
|
278
|
+
// -ms-user-select: none; // IE 10+
|
279
|
+
// -o-user-select: none;
|
280
|
+
// user-select: none;
|
281
|
+
@mixin user-select($param: none) {
|
282
|
+
@include vendors(webkit moz ms o, user-select, $param);
|
283
|
+
}
|
284
|
+
|
285
|
+
// Provide vendorized CSS transition.
|
286
|
+
// example:
|
287
|
+
// @include transition(all, 0.5s);
|
288
|
+
// produce:
|
289
|
+
// -webkit-transition: all 0.5s ease; // actual
|
290
|
+
// -moz-transition: all 0.5s ease; // FF 8+
|
291
|
+
// -ms-transition: all 0.5s ease; // IE 10+
|
292
|
+
// -o-transition: all 0.5s ease; // Opera 11.6+
|
293
|
+
// without:
|
294
|
+
// transition: all 0.5s ease; // future
|
295
|
+
@mixin transition($what, $time, $method: ease) {
|
296
|
+
@include vendors(webkit moz ms o, transition, $what $time $method, false);
|
297
|
+
}
|
298
|
+
|
299
|
+
// Provide vendorized CSS transform.
|
300
|
+
// example:
|
301
|
+
// @include transform(scale(1.2, 1.2));
|
302
|
+
// produce:
|
303
|
+
// -webkit-transform: scale(1.2, 1.2); // actual
|
304
|
+
// -moz-transform: scale(1.2, 1.2); // actual
|
305
|
+
// -ms-transform: scale(1.2, 1.2); // IE 9+
|
306
|
+
// -o-transform: scale(1.2, 1.2); // actual
|
307
|
+
// without:
|
308
|
+
// transform: scale(1.2, 1.2); // future
|
309
|
+
@mixin transform($params) {
|
310
|
+
@include vendors(webkit moz ms o, transform, $params, false);
|
311
|
+
}
|
312
|
+
|
313
|
+
// Scale an object along the x and y axis. IE < 9 only proportional scale by $scale-x.
|
314
|
+
// example:
|
315
|
+
// @include scale(1.2);
|
316
|
+
// produce:
|
317
|
+
// -webkit-transform: scale(1.2, 1.2); // actual
|
318
|
+
// -moz-transform: scale(1.2, 1.2); // actual
|
319
|
+
// -ms-transform: scale(1.2, 1.2); // IE 9+
|
320
|
+
// -o-transform: scale(1.2, 1.2); // actual
|
321
|
+
// *zoom: 1.2; // IE 5.5-7
|
322
|
+
// zoom: 1.2\0/; // IE 8
|
323
|
+
// without:
|
324
|
+
// transform: scale(1.2, 1.2); // future
|
325
|
+
@mixin scale($scale-x, $scale-y: $scale-x) {
|
326
|
+
@include transform(scale($scale-x, $scale-y));
|
327
|
+
@if $support-ie {
|
328
|
+
*zoom: $scale-x;
|
329
|
+
//zoom: hack-ie8($scale-x); TODO temp!
|
330
|
+
}
|
331
|
+
}
|
332
|
+
|
333
|
+
@mixin rotate($angle) {
|
334
|
+
@include transform(rotate($angle));
|
335
|
+
//filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); === -90deg
|
336
|
+
}
|
337
|
+
|
338
|
+
// Style the html5 input placeholder in browsers that support it.
|
339
|
+
// The styles for the input placeholder are passed as mixin content.
|
340
|
+
// Mostly supported properties: color, font-*, letter-spacing.
|
341
|
+
// example:
|
342
|
+
// @include input-placeholder {
|
343
|
+
// color: #bfbfbf;
|
344
|
+
// font-style: italic;
|
345
|
+
// }
|
346
|
+
@mixin input-placeholder {
|
347
|
+
&::-webkit-input-placeholder { @content; }
|
348
|
+
&:-moz-placeholder { @content; }
|
349
|
+
&:-ms-input-placeholder { @content; }
|
350
|
+
}
|
@@ -0,0 +1,100 @@
|
|
1
|
+
// === overloadable in base.scss settings =========
|
2
|
+
|
3
|
+
$font-family_base: Tahoma, Verdana, sans-serif;
|
4
|
+
$font-size_base: 11px;
|
5
|
+
$font-family_custom: "PFDinTextCondProThin", Tahoma, Arial, Verdana, sans-serif;
|
6
|
+
$font-family_custom_bold: "PFDinTextCondProRegular", Verdana, sans-serif;
|
7
|
+
// DEPRECATED:
|
8
|
+
$line-height-addition_base: 3px;
|
9
|
+
$font-family_accident: "PFDinTextCondProThin", Tahoma, Arial, Verdana, sans-serif;
|
10
|
+
$font-family_accident_bold: "PFDinTextCondProRegular", Verdana, sans-serif;
|
11
|
+
|
12
|
+
|
13
|
+
@mixin font-face($family, $url-without-ext, $font-weight: normal, $font-style: normal) {
|
14
|
+
@font-face {
|
15
|
+
font-family: "#{$family}";
|
16
|
+
src: font-url("#{$url-without-ext}.eot");
|
17
|
+
src: font-url("#{$url-without-ext}.eot?#iefix") format("embedded-opentype"),
|
18
|
+
font-url("#{$url-without-ext}.woff") format("woff"),
|
19
|
+
font-url("#{$url-without-ext}.ttf") format("truetype"),
|
20
|
+
font-url("#{$url-without-ext}.svg##{$family}") format("svg");
|
21
|
+
font-weight: $font-weight;
|
22
|
+
font-style: $font-style;
|
23
|
+
}
|
24
|
+
}
|
25
|
+
|
26
|
+
@mixin font($font-family, $font-size: false, $line-height: false) {
|
27
|
+
font-family: $font-family;
|
28
|
+
@if $font-size {
|
29
|
+
font-size: $font-size;
|
30
|
+
}
|
31
|
+
@if $line-height {
|
32
|
+
line-height: $line-height;
|
33
|
+
}
|
34
|
+
}
|
35
|
+
|
36
|
+
@mixin g-font_base($font-size: $font-size_base, $line-height: false) {
|
37
|
+
@include deprecate("g-font_base", "font_base");
|
38
|
+
font-family: $font-family_base;
|
39
|
+
@if $font-size {
|
40
|
+
font-size: $font-size;
|
41
|
+
}
|
42
|
+
@if $line-height {
|
43
|
+
line-height: $line-height;
|
44
|
+
} @else {
|
45
|
+
@if $font-size {
|
46
|
+
line-height: $font-size + $line-height-addition_base;
|
47
|
+
}
|
48
|
+
}
|
49
|
+
}
|
50
|
+
|
51
|
+
@mixin font_base($font-size: $font-size_base, $line-height: false) {
|
52
|
+
@include font($font-family_base, $font-size, $line-height);
|
53
|
+
}
|
54
|
+
|
55
|
+
@mixin font_custom($font-size: false, $line-height: false, $font-family: $font-family_custom) {
|
56
|
+
font-weight: normal;
|
57
|
+
font-style: normal;
|
58
|
+
@include font($font-family, $font-size, $line-height);
|
59
|
+
}
|
60
|
+
|
61
|
+
// TODO http://paulirish.com/2010/font-face-gotchas/
|
62
|
+
// TODO -webkit-font-smoothing: antialiased; /* This needs to be set or some font faced fonts look bold on Mac. */
|
63
|
+
@mixin g-font_accident_bold($font-size: false, $line-height: false) {
|
64
|
+
@include deprecate("g-font_accident_bold", "font_custom");
|
65
|
+
font-family: $font-family_accident_bold;
|
66
|
+
font-weight: normal;
|
67
|
+
font-style: normal;
|
68
|
+
@if $font-size {
|
69
|
+
font-size: $font-size;
|
70
|
+
}
|
71
|
+
@if $line-height {
|
72
|
+
line-height: $line-height;
|
73
|
+
} @else {
|
74
|
+
@if $font-size {
|
75
|
+
line-height: $font-size + $line-height-addition_base;
|
76
|
+
}
|
77
|
+
}
|
78
|
+
}
|
79
|
+
|
80
|
+
@mixin g-font_accident($font-size: false, $line-height: false) {
|
81
|
+
@include deprecate("g-font_accident", "font_custom");
|
82
|
+
font-family: $font-family_accident;
|
83
|
+
font-weight: normal;
|
84
|
+
font-style: normal;
|
85
|
+
@if $font-size {
|
86
|
+
font-size: $font-size;
|
87
|
+
}
|
88
|
+
@if $line-height {
|
89
|
+
line-height: $line-height;
|
90
|
+
} @else {
|
91
|
+
@if $font-size {
|
92
|
+
line-height: $font-size + $line-height-addition_base;
|
93
|
+
}
|
94
|
+
}
|
95
|
+
@if $font-family_accident_bold {
|
96
|
+
.bold {
|
97
|
+
@include g-font_accident_bold;
|
98
|
+
}
|
99
|
+
}
|
100
|
+
}
|