ultimate-mixins 0.1.0.0
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.
- data/.gitignore +5 -0
- data/Gemfile +3 -0
- data/LICENSE +19 -0
- data/README.md +26 -0
- data/Rakefile +1 -0
- data/app/assets/stylesheets/polyfills/PIE.htc +96 -0
- data/app/assets/stylesheets/polyfills/boxsizing.htc +501 -0
- data/app/assets/stylesheets/ultimate/mixins/_routines.scss +130 -0
- data/app/assets/stylesheets/ultimate/mixins/_text-shadow_hard.scss +40 -0
- data/app/assets/stylesheets/ultimate/mixins/_vendors.scss +44 -0
- data/app/assets/stylesheets/ultimate/mixins/css3.scss +357 -0
- data/app/assets/stylesheets/ultimate/mixins/fonts.scss +42 -0
- data/app/assets/stylesheets/ultimate/mixins/microstructures.scss +223 -0
- data/lib/ultimate/extensions/sass_script_functions.rb +26 -0
- data/lib/ultimate/mixins.rb +9 -0
- data/lib/ultimate/mixins/engine.rb +7 -0
- data/lib/ultimate/mixins/version.rb +5 -0
- data/ultimate-mixins.gemspec +21 -0
- metadata +65 -0
|
@@ -0,0 +1,42 @@
|
|
|
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
|
+
|
|
8
|
+
// TODO: more flexible
|
|
9
|
+
@mixin font-face($family, $url-without-ext, $font-weight: normal, $font-style: normal) {
|
|
10
|
+
@font-face {
|
|
11
|
+
font-family: "#{$family}";
|
|
12
|
+
src: font-url("#{$url-without-ext}.eot");
|
|
13
|
+
src: font-url("#{$url-without-ext}.eot?#iefix") format("embedded-opentype"),
|
|
14
|
+
font-url("#{$url-without-ext}.woff") format("woff"),
|
|
15
|
+
font-url("#{$url-without-ext}.ttf") format("truetype"),
|
|
16
|
+
font-url("#{$url-without-ext}.svg##{$family}") format("svg");
|
|
17
|
+
font-weight: $font-weight;
|
|
18
|
+
font-style: $font-style;
|
|
19
|
+
}
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
@mixin font($font-family, $font-size: false, $line-height: false) {
|
|
23
|
+
font-family: $font-family;
|
|
24
|
+
@if $font-size {
|
|
25
|
+
font-size: $font-size;
|
|
26
|
+
}
|
|
27
|
+
@if $line-height {
|
|
28
|
+
line-height: $line-height;
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
@mixin font_base($font-size: $font-size_base, $line-height: false) {
|
|
33
|
+
@include font($font-family_base, $font-size, $line-height);
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
// TODO http://paulirish.com/2010/font-face-gotchas/
|
|
37
|
+
// TODO -webkit-font-smoothing: antialiased; /* This needs to be set or some font faced fonts look bold on Mac. */
|
|
38
|
+
@mixin font_custom($font-size: false, $line-height: false, $font-family: $font-family_custom) {
|
|
39
|
+
font-weight: normal;
|
|
40
|
+
font-style: normal;
|
|
41
|
+
@include font($font-family, $font-size, $line-height);
|
|
42
|
+
}
|
|
@@ -0,0 +1,223 @@
|
|
|
1
|
+
@import "ultimate/mixins/routines";
|
|
2
|
+
|
|
3
|
+
$support-ie: true !default;
|
|
4
|
+
|
|
5
|
+
// example:
|
|
6
|
+
// @include complex-padding(10px 20px none);
|
|
7
|
+
// same:
|
|
8
|
+
// padding: {
|
|
9
|
+
// top: 10px;
|
|
10
|
+
// right: 20px;
|
|
11
|
+
// left: 20px;
|
|
12
|
+
// }
|
|
13
|
+
// produce:
|
|
14
|
+
// padding-top: 10px;
|
|
15
|
+
// padding-right: 20px;
|
|
16
|
+
// padding-left: 20px;
|
|
17
|
+
@mixin complex-padding($params) {
|
|
18
|
+
$params: complex-list($params);
|
|
19
|
+
@include complex-property(padding, $params);
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
// Provide complex box metrics.
|
|
23
|
+
// example:
|
|
24
|
+
// @include box(400px, none, 10px 20px none, 0 auto);
|
|
25
|
+
// produce:
|
|
26
|
+
// padding-top: 10px;
|
|
27
|
+
// padding-right: 20px;
|
|
28
|
+
// padding-left: 20px;
|
|
29
|
+
// margin: 0 auto;
|
|
30
|
+
// width: 360px;
|
|
31
|
+
@mixin box($width,
|
|
32
|
+
$height : false,
|
|
33
|
+
$padding : false,
|
|
34
|
+
$margin : false,
|
|
35
|
+
$border : false,
|
|
36
|
+
$include-padding : true,
|
|
37
|
+
$include-margin : false,
|
|
38
|
+
$include-border : true) {
|
|
39
|
+
@if length($width) == 2 {
|
|
40
|
+
$height: nth($width, 2);
|
|
41
|
+
$width: nth($width, 1);
|
|
42
|
+
}
|
|
43
|
+
$properties: $padding $margin nth($border, 1);
|
|
44
|
+
$include-properties: $include-padding $include-margin $include-border;
|
|
45
|
+
$i: 0;
|
|
46
|
+
@each $property-name in padding, margin, border-width {
|
|
47
|
+
$i: $i + 1;
|
|
48
|
+
$property: nth($properties, $i);
|
|
49
|
+
@if $property {
|
|
50
|
+
$complex: false;
|
|
51
|
+
@if nth($include-properties, $i) and $property {
|
|
52
|
+
$complex: complex-list($property);
|
|
53
|
+
@if isset($width) {
|
|
54
|
+
$width: _dec-size($width, nth($complex, 2), nth($complex, 4));
|
|
55
|
+
}
|
|
56
|
+
@if isset($height) {
|
|
57
|
+
$height: _dec-size($height, nth($complex, 1), nth($complex, 3));
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
@if $property-name == border-width and length($property) == 1 {
|
|
61
|
+
border: $border;
|
|
62
|
+
} @else {
|
|
63
|
+
@include complex-property($property-name, $property, $complex);
|
|
64
|
+
@if $property-name == border-width {
|
|
65
|
+
border-style: nth($border, 2);
|
|
66
|
+
border-color: nth($border, 3);
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
}
|
|
71
|
+
@if isset($width) {
|
|
72
|
+
width: $width;
|
|
73
|
+
}
|
|
74
|
+
@if isset($height) {
|
|
75
|
+
height: $height;
|
|
76
|
+
}
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
@mixin position($top: false, $right: false, $bottom: false, $left: false, $position: absolute) {
|
|
80
|
+
@if length($top) == 4 {
|
|
81
|
+
$left : nth($top, 4);
|
|
82
|
+
$bottom : nth($top, 3);
|
|
83
|
+
$right : nth($top, 2);
|
|
84
|
+
$top : nth($top, 1);
|
|
85
|
+
}
|
|
86
|
+
@if isset($position) { position: $position; }
|
|
87
|
+
@if isset($top) { top: $top; }
|
|
88
|
+
@if isset($right) { right: $right; }
|
|
89
|
+
@if isset($bottom) { bottom: $bottom; }
|
|
90
|
+
@if isset($left) { left: $left; }
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
@mixin before($display: block, $content: '') {
|
|
94
|
+
&:before {
|
|
95
|
+
display: $display;
|
|
96
|
+
content: $content;
|
|
97
|
+
@content;
|
|
98
|
+
}
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
@mixin after($display: block, $content: '') {
|
|
102
|
+
&:after {
|
|
103
|
+
display: $display;
|
|
104
|
+
content: $content;
|
|
105
|
+
@content;
|
|
106
|
+
}
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
@mixin both($display: block, $content: '') {
|
|
110
|
+
&:before, &:after {
|
|
111
|
+
display: $display;
|
|
112
|
+
content: $content;
|
|
113
|
+
@content;
|
|
114
|
+
}
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
// Adapted from: [A new micro clearfix hack](http://nicolasgallagher.com/micro-clearfix-hack/)
|
|
118
|
+
@mixin clearfix($clear: both) {
|
|
119
|
+
@include both(table) {
|
|
120
|
+
clear: $clear;
|
|
121
|
+
}
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
// Provides a cross-browser method to implement `display: inline-block;`
|
|
125
|
+
// example:
|
|
126
|
+
// @include inline-block(80px, 20px);
|
|
127
|
+
// produce:
|
|
128
|
+
// display: inline-block;
|
|
129
|
+
// *display: inline;
|
|
130
|
+
// *zoom: 1;
|
|
131
|
+
// width: 80px;
|
|
132
|
+
// height: 20px;
|
|
133
|
+
// vertical-align: middle;
|
|
134
|
+
@mixin inline-block($width: false, $height: false, $vertical-align: middle) {
|
|
135
|
+
display: inline-block;
|
|
136
|
+
@if $support-ie {
|
|
137
|
+
*display: inline;
|
|
138
|
+
*zoom: 1;
|
|
139
|
+
}
|
|
140
|
+
@if isset($width) {
|
|
141
|
+
width: $width;
|
|
142
|
+
}
|
|
143
|
+
@if isset($height) {
|
|
144
|
+
height: $height;
|
|
145
|
+
}
|
|
146
|
+
@if isset($vertical-align) {
|
|
147
|
+
vertical-align: $vertical-align;
|
|
148
|
+
}
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
// TODO: rename to "justify"
|
|
152
|
+
@mixin g-justify($item: ".item") {
|
|
153
|
+
text-align: justify;
|
|
154
|
+
@if $support-ie {
|
|
155
|
+
text-justify: newspaper;
|
|
156
|
+
text-align-last: justify;
|
|
157
|
+
}
|
|
158
|
+
font-size: 2px;
|
|
159
|
+
line-height: 0;
|
|
160
|
+
> #{$item}, &:after {
|
|
161
|
+
@include inline-block;
|
|
162
|
+
text-align: left;
|
|
163
|
+
}
|
|
164
|
+
&:after {
|
|
165
|
+
content: "";
|
|
166
|
+
height: 0;
|
|
167
|
+
width: 99%;
|
|
168
|
+
}
|
|
169
|
+
}
|
|
170
|
+
|
|
171
|
+
@mixin inline-block-list($item: "li") {
|
|
172
|
+
position: relative;
|
|
173
|
+
list-style: none;
|
|
174
|
+
margin: 0;
|
|
175
|
+
padding: 0;
|
|
176
|
+
#{$item} {
|
|
177
|
+
@include inline-block;
|
|
178
|
+
}
|
|
179
|
+
}
|
|
180
|
+
|
|
181
|
+
@mixin block-list($item: "li") {
|
|
182
|
+
overflow: hidden;
|
|
183
|
+
position: relative;
|
|
184
|
+
list-style: none;
|
|
185
|
+
margin: 0;
|
|
186
|
+
padding: 0;
|
|
187
|
+
#{$item} {
|
|
188
|
+
display: block;
|
|
189
|
+
position: relative;
|
|
190
|
+
float: left;
|
|
191
|
+
}
|
|
192
|
+
}
|
|
193
|
+
|
|
194
|
+
@mixin simple-block-list($item: "li") {
|
|
195
|
+
position: relative;
|
|
196
|
+
list-style: none;
|
|
197
|
+
margin: 0;
|
|
198
|
+
padding: 0;
|
|
199
|
+
#{$item} {
|
|
200
|
+
display: block;
|
|
201
|
+
position: relative;
|
|
202
|
+
}
|
|
203
|
+
}
|
|
204
|
+
|
|
205
|
+
@mixin sticky-footer($layout-padding-bottom, $footer-selector: ".l-page__footer", $layout-selector: ".l-page") {
|
|
206
|
+
html {
|
|
207
|
+
height: 100%;
|
|
208
|
+
}
|
|
209
|
+
body {
|
|
210
|
+
position: relative;
|
|
211
|
+
min-height: 100%;
|
|
212
|
+
}
|
|
213
|
+
#{$layout-selector} {
|
|
214
|
+
position: static;
|
|
215
|
+
padding-bottom: $layout-padding-bottom;
|
|
216
|
+
#{$footer-selector} {
|
|
217
|
+
position: absolute;
|
|
218
|
+
bottom: 0;
|
|
219
|
+
left: 0;
|
|
220
|
+
width: 100%;
|
|
221
|
+
}
|
|
222
|
+
}
|
|
223
|
+
}
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
require 'sass'
|
|
2
|
+
|
|
3
|
+
module Ultimate
|
|
4
|
+
module Extensions
|
|
5
|
+
module SassScriptFunctions
|
|
6
|
+
def polar(x, y)
|
|
7
|
+
assert_type x, :Number
|
|
8
|
+
assert_type y, :Number
|
|
9
|
+
|
|
10
|
+
theta = Sass::Script::Number.new(Math.atan2(y.value, x.value) / Math::PI * 180 + 90)
|
|
11
|
+
r = Sass::Script::Number.new(Math.hypot(x.value, y.value))
|
|
12
|
+
Sass::Script::List.new([theta, r], :comma)
|
|
13
|
+
end
|
|
14
|
+
|
|
15
|
+
Sass::Script::Functions.declare :polar, [:x, :y]
|
|
16
|
+
end
|
|
17
|
+
end
|
|
18
|
+
end
|
|
19
|
+
|
|
20
|
+
module Sass::Script::Functions
|
|
21
|
+
include Ultimate::Extensions::SassScriptFunctions
|
|
22
|
+
end
|
|
23
|
+
|
|
24
|
+
class Sass::Script::Functions::EvaluationContext
|
|
25
|
+
include Sass::Script::Functions
|
|
26
|
+
end
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
# -*- encoding: utf-8 -*-
|
|
2
|
+
$:.push File.expand_path('../lib', __FILE__)
|
|
3
|
+
require 'ultimate/mixins/version'
|
|
4
|
+
|
|
5
|
+
Gem::Specification.new do |s|
|
|
6
|
+
s.name = 'ultimate-mixins'
|
|
7
|
+
s.version = Ultimate::Mixins::VERSION
|
|
8
|
+
s.authors = ['Dmitry KODer Karpunin']
|
|
9
|
+
s.email = ['koderfunk@gmail.com']
|
|
10
|
+
s.homepage = 'https://github.com/evrone/ultimate-mixins'
|
|
11
|
+
s.summary = %q{Simple library of SASS functions, mixins and basic polyfills}
|
|
12
|
+
s.description = %q{Simple and minimalistic library of SASS functions, mixins and basic polyfills to create cross browser CSS-styles.}
|
|
13
|
+
|
|
14
|
+
s.rubyforge_project = 'ultimate-mixins'
|
|
15
|
+
|
|
16
|
+
s.files = `git ls-files`.split("\n")
|
|
17
|
+
s.test_files = `git ls-files -- {test,spec,features}/*`.split("\n")
|
|
18
|
+
s.executables = `git ls-files -- bin/*`.split("\n").map{ |f| File.basename(f) }
|
|
19
|
+
s.require_paths = ['lib']
|
|
20
|
+
|
|
21
|
+
end
|
metadata
ADDED
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
--- !ruby/object:Gem::Specification
|
|
2
|
+
name: ultimate-mixins
|
|
3
|
+
version: !ruby/object:Gem::Version
|
|
4
|
+
version: 0.1.0.0
|
|
5
|
+
prerelease:
|
|
6
|
+
platform: ruby
|
|
7
|
+
authors:
|
|
8
|
+
- Dmitry KODer Karpunin
|
|
9
|
+
autorequire:
|
|
10
|
+
bindir: bin
|
|
11
|
+
cert_chain: []
|
|
12
|
+
date: 2013-03-31 00:00:00.000000000 Z
|
|
13
|
+
dependencies: []
|
|
14
|
+
description: Simple and minimalistic library of SASS functions, mixins and basic polyfills
|
|
15
|
+
to create cross browser CSS-styles.
|
|
16
|
+
email:
|
|
17
|
+
- koderfunk@gmail.com
|
|
18
|
+
executables: []
|
|
19
|
+
extensions: []
|
|
20
|
+
extra_rdoc_files: []
|
|
21
|
+
files:
|
|
22
|
+
- .gitignore
|
|
23
|
+
- Gemfile
|
|
24
|
+
- Gemfile.lock
|
|
25
|
+
- LICENSE
|
|
26
|
+
- README.md
|
|
27
|
+
- Rakefile
|
|
28
|
+
- app/assets/stylesheets/polyfills/PIE.htc
|
|
29
|
+
- app/assets/stylesheets/polyfills/boxsizing.htc
|
|
30
|
+
- app/assets/stylesheets/ultimate/mixins/_routines.scss
|
|
31
|
+
- app/assets/stylesheets/ultimate/mixins/_text-shadow_hard.scss
|
|
32
|
+
- app/assets/stylesheets/ultimate/mixins/_vendors.scss
|
|
33
|
+
- app/assets/stylesheets/ultimate/mixins/css3.scss
|
|
34
|
+
- app/assets/stylesheets/ultimate/mixins/fonts.scss
|
|
35
|
+
- app/assets/stylesheets/ultimate/mixins/microstructures.scss
|
|
36
|
+
- lib/ultimate/extensions/sass_script_functions.rb
|
|
37
|
+
- lib/ultimate/mixins.rb
|
|
38
|
+
- lib/ultimate/mixins/engine.rb
|
|
39
|
+
- lib/ultimate/mixins/version.rb
|
|
40
|
+
- ultimate-mixins.gemspec
|
|
41
|
+
homepage: https://github.com/evrone/ultimate-mixins
|
|
42
|
+
licenses: []
|
|
43
|
+
post_install_message:
|
|
44
|
+
rdoc_options: []
|
|
45
|
+
require_paths:
|
|
46
|
+
- lib
|
|
47
|
+
required_ruby_version: !ruby/object:Gem::Requirement
|
|
48
|
+
none: false
|
|
49
|
+
requirements:
|
|
50
|
+
- - ! '>='
|
|
51
|
+
- !ruby/object:Gem::Version
|
|
52
|
+
version: '0'
|
|
53
|
+
required_rubygems_version: !ruby/object:Gem::Requirement
|
|
54
|
+
none: false
|
|
55
|
+
requirements:
|
|
56
|
+
- - ! '>='
|
|
57
|
+
- !ruby/object:Gem::Version
|
|
58
|
+
version: '0'
|
|
59
|
+
requirements: []
|
|
60
|
+
rubyforge_project: ultimate-mixins
|
|
61
|
+
rubygems_version: 1.8.25
|
|
62
|
+
signing_key:
|
|
63
|
+
specification_version: 3
|
|
64
|
+
summary: Simple library of SASS functions, mixins and basic polyfills
|
|
65
|
+
test_files: []
|