translucencss 0.1.1
Sign up to get free protection for your applications and to get access to all the features.
- data/lib/translucencss.rb +41 -0
- data/stylesheets/_translucencss.scss +7 -0
- data/stylesheets/translucencss/_core.scss +6 -0
- data/stylesheets/translucencss/_css3.scss +2 -0
- data/stylesheets/translucencss/_util.scss +6 -0
- data/stylesheets/translucencss/core/_font-stacks.scss +45 -0
- data/stylesheets/translucencss/core/_forms.scss +24 -0
- data/stylesheets/translucencss/core/_headlines.scss +48 -0
- data/stylesheets/translucencss/core/_lists.scss +76 -0
- data/stylesheets/translucencss/core/_tables.scss +16 -0
- data/stylesheets/translucencss/core/_typography.scss +55 -0
- data/stylesheets/translucencss/css3/_flexbox.scss +288 -0
- data/stylesheets/translucencss/css3/_flexbox_old.scss +315 -0
- data/stylesheets/translucencss/css3/_object-fit.scss +13 -0
- data/stylesheets/translucencss/util/_clearfix.scss +40 -0
- data/stylesheets/translucencss/util/_colors.scss +7 -0
- data/stylesheets/translucencss/util/_ellipsis.scss +34 -0
- data/stylesheets/translucencss/util/_ie.scss +7 -0
- data/stylesheets/translucencss/util/_images.scss +109 -0
- data/stylesheets/translucencss/util/_spacing.scss +14 -0
- data/templates/project/manifest.rb +11 -0
- metadata +83 -0
@@ -0,0 +1,41 @@
|
|
1
|
+
require 'compass'
|
2
|
+
#require 'normalize'
|
3
|
+
extension_path = File.expand_path(File.join(File.dirname(__FILE__), ".."))
|
4
|
+
Compass::Frameworks.register('translucencss', :path => extension_path)
|
5
|
+
|
6
|
+
module Sass::Script::Functions
|
7
|
+
|
8
|
+
def is_substring(string, substring)
|
9
|
+
assert_type string, :String
|
10
|
+
assert_type substring, :String
|
11
|
+
Sass::Script::Bool.new(string.value.include?(substring.value))
|
12
|
+
end
|
13
|
+
declare :is_substring, [:string, :substring]
|
14
|
+
|
15
|
+
#####################
|
16
|
+
# Number Manipulation
|
17
|
+
#####################
|
18
|
+
|
19
|
+
# https://github.com/nex3/sass/issues/740
|
20
|
+
# return a number without its unit
|
21
|
+
def strip_unit(number)
|
22
|
+
assert_type number, :Number
|
23
|
+
Sass::Script::Number.new(number.value)
|
24
|
+
end
|
25
|
+
#declare :strip_unit, [:number]
|
26
|
+
|
27
|
+
# return 1 * the unit of the input number
|
28
|
+
def one_unit(number)
|
29
|
+
assert_type number, :Number
|
30
|
+
Sass::Script::Number.new(1, ["#{number.unit_str}"])
|
31
|
+
end
|
32
|
+
#declare :one_unit, [:number]
|
33
|
+
|
34
|
+
# force the unit of a given number
|
35
|
+
def add_unit(number, unit)
|
36
|
+
assert_type number, :Number
|
37
|
+
assert_type unit, :String
|
38
|
+
Sass::Script::Number.new(number.value, ["#{unit}"])
|
39
|
+
end
|
40
|
+
#declare :add_unit, [:number]
|
41
|
+
end
|
@@ -0,0 +1,7 @@
|
|
1
|
+
// --------------------------------------------------------------------------------
|
2
|
+
// TranslucenCSS: Common CSS patterns abstracted as mixins and variables
|
3
|
+
// --------------------------------------------------------------------------------
|
4
|
+
|
5
|
+
@import "translucencss/core";
|
6
|
+
@import "translucencss/css3";
|
7
|
+
@import "translucencss/util";
|
@@ -0,0 +1,45 @@
|
|
1
|
+
// --------------------------------------------------------------------------------
|
2
|
+
// Balanced, attractive font stacks
|
3
|
+
// http://www.awayback.com/revised-font-stack/
|
4
|
+
// --------------------------------------------------------------------------------
|
5
|
+
|
6
|
+
// -------------------------------------------------------------------------------- SERIF
|
7
|
+
|
8
|
+
$arial: Arial, "Helvetica Neue", Helvetica, sans-serif;
|
9
|
+
$baskerville: Baskerville, "Baskerville old face", "Hoefler Text", Garamond, "Times New Roman", serif;
|
10
|
+
$bodini: "Bodoni MT", Didot, "Didot LT STD", "Hoefler Text", Garamond, "Times New Roman", serif;
|
11
|
+
$copperplate: "Copperplate Light", "Copperplate Gothic Light", serif;
|
12
|
+
$garamond: Garamond, Baskerville, "Baskerville Old Face", "Hoefler Text", "Times New Roman", serif;
|
13
|
+
$georgia: Georgia, Palatino, "Palatino Linotype", Times, "Times New Roman", serif;
|
14
|
+
$hoefler: "Hoefler Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
|
15
|
+
$palatino: Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif;
|
16
|
+
$times: Times, "Times New Roman", Georgia, serif;
|
17
|
+
|
18
|
+
// -------------------------------------------------------------------------------- SANS-SERIF
|
19
|
+
|
20
|
+
$calibri: GillSans, Calibri, Trebuchet, sans-serif;
|
21
|
+
$futura: "Futura Medium", Century Gothic, AppleGothic, sans-serif;
|
22
|
+
$gothic: "Century Gothic", "Apple Gothic", sans-serif;
|
23
|
+
$helvetica: "Helvetica Neue", Arial, Helvetica, sans-serif;
|
24
|
+
$impact: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
|
25
|
+
$lucida: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
|
26
|
+
$optima: Optima, Candara, Segoe, "Segoe UI", Arial, sans-serif;
|
27
|
+
$segoe: Segoe, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
|
28
|
+
$tahoma: Tahoma, Geneva, Verdana, sans-serif;
|
29
|
+
$verdana: Geneva, "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", Verdana, sans-serif;
|
30
|
+
|
31
|
+
// -------------------------------------------------------------------------------- MONOSPACE
|
32
|
+
|
33
|
+
$courier: "Courier New", Courier, monospace;
|
34
|
+
$lucida: Consolas, "Lucida Console", Monaco, monospace;
|
35
|
+
|
36
|
+
// -------------------------------------------------------------------------------- CURSIVE
|
37
|
+
|
38
|
+
$chancery: "Bradley Hand ITC", "Apple Chancery", "URW Chancery L", cursive;
|
39
|
+
|
40
|
+
// -------------------------------------------------------------------------------- DEFAULTS
|
41
|
+
|
42
|
+
$serif: $baskerville !default;
|
43
|
+
$sans-serif: $segoe !default;
|
44
|
+
$monospace: $courier !default;
|
45
|
+
$cursive: $chancery !default;
|
@@ -0,0 +1,24 @@
|
|
1
|
+
$form-input-text: unquote('input[type="text"], input[type="password"], input[type="search"], input[type="email"], input[type="tel"], input[type="url"]');
|
2
|
+
$form-input-buttons: unquote('input[type="submit"], input[type="reset"], input[type="button"], button');
|
3
|
+
$form-input-dates: unquote('input[type^="date"], input[type="month"], input[type="week"], input[type="time"]');
|
4
|
+
$form-input-not-radio: unquote('input:not([type="radio"]):not([type="checkbox"])');
|
5
|
+
|
6
|
+
@mixin input-placeholder {
|
7
|
+
&::-webkit-input-placeholder {
|
8
|
+
@content;
|
9
|
+
}
|
10
|
+
|
11
|
+
// Firefox <19
|
12
|
+
&:-moz-placeholder {
|
13
|
+
@content;
|
14
|
+
}
|
15
|
+
|
16
|
+
// Firefox >19
|
17
|
+
&::-moz-placeholder {
|
18
|
+
@content;
|
19
|
+
}
|
20
|
+
|
21
|
+
&:-ms-input-placeholder {
|
22
|
+
@content;
|
23
|
+
}
|
24
|
+
}
|
@@ -0,0 +1,48 @@
|
|
1
|
+
$headline-sizes: 2em 1.8em 1.4em 1.2em 1em .8em !default;
|
2
|
+
$gh-selectors: 'section, article' !default;
|
3
|
+
|
4
|
+
@mixin headings($from: 1, $to: 6) {
|
5
|
+
#{headings($from, $to)} {
|
6
|
+
@content;
|
7
|
+
}
|
8
|
+
}
|
9
|
+
|
10
|
+
@mixin headline-sizes($sizes: $headline-sizes, $margin: $baseline-block-margin) {
|
11
|
+
@warn "This mixin is deprecated";
|
12
|
+
@for $i from 1 through length($sizes) {
|
13
|
+
%h#{$i}-size {
|
14
|
+
$size: nth($sizes, $i);
|
15
|
+
font-size: $size;
|
16
|
+
@include rem(margin, $size, $margin)
|
17
|
+
}
|
18
|
+
}
|
19
|
+
}
|
20
|
+
|
21
|
+
@mixin graduated-headlines($hn, $sizes) {
|
22
|
+
@warn "This mixin is deprecated";
|
23
|
+
$sel: $gh-selectors;
|
24
|
+
@for $i from 1 through length($sizes) {
|
25
|
+
#{$sel} {
|
26
|
+
@for $j from 1 through $hn {
|
27
|
+
@if $i + $j - 1 <= length($sizes) {
|
28
|
+
h#{$j} {
|
29
|
+
font-size: nth($sizes, $i + $j - 1);
|
30
|
+
}
|
31
|
+
}
|
32
|
+
}
|
33
|
+
}
|
34
|
+
$sel: nest($sel, $gh-selectors);
|
35
|
+
}
|
36
|
+
}
|
37
|
+
|
38
|
+
@mixin graduated-headlines-extended($hn: 1, $min: 1, $max: 6) {
|
39
|
+
$sel: $gh-selectors;
|
40
|
+
@for $i from $min through $max {
|
41
|
+
#{$sel} {
|
42
|
+
@for $j from 1 through $hn {
|
43
|
+
h#{$j} { @extend h#{$i + $j - 1}%size !optional; }
|
44
|
+
}
|
45
|
+
}
|
46
|
+
$sel: nest($sel, $gh-selectors);
|
47
|
+
}
|
48
|
+
}
|
@@ -0,0 +1,76 @@
|
|
1
|
+
@mixin inline-menu($type: inline, $child: li) {
|
2
|
+
@if $type == float {
|
3
|
+
@include clearfix;
|
4
|
+
}
|
5
|
+
|
6
|
+
> #{$child} {
|
7
|
+
@if $type == float {
|
8
|
+
float: left;
|
9
|
+
//list-style: none;
|
10
|
+
} @else {
|
11
|
+
display: inline-block;
|
12
|
+
}
|
13
|
+
|
14
|
+
@content;
|
15
|
+
|
16
|
+
a { white-space: nowrap }
|
17
|
+
}
|
18
|
+
}
|
19
|
+
|
20
|
+
@mixin drop-menu($parent: ul) {
|
21
|
+
position: relative;
|
22
|
+
|
23
|
+
#{$parent} {
|
24
|
+
display: none;
|
25
|
+
}
|
26
|
+
|
27
|
+
&:hover #{$parent}, &.active #{$parent}, &.opened {
|
28
|
+
display: block;
|
29
|
+
position: absolute;
|
30
|
+
@content;
|
31
|
+
}
|
32
|
+
}
|
33
|
+
|
34
|
+
@mixin button-group($orientation: horizontal, $radius: .25em, $child: li) {
|
35
|
+
display: table;
|
36
|
+
|
37
|
+
> #{$child} {
|
38
|
+
@if $orientation == horizontal {
|
39
|
+
display: table-cell;
|
40
|
+
} @else {
|
41
|
+
list-style: none;
|
42
|
+
}
|
43
|
+
|
44
|
+
@content;
|
45
|
+
|
46
|
+
+ #{$child} {
|
47
|
+
@if $orientation == horizontal {
|
48
|
+
border-left: none;
|
49
|
+
} @else {
|
50
|
+
border-top: none;
|
51
|
+
}
|
52
|
+
}
|
53
|
+
|
54
|
+
@if $radius > 0 {
|
55
|
+
@include button-group-ends($orientation, $radius);
|
56
|
+
}
|
57
|
+
}
|
58
|
+
}
|
59
|
+
|
60
|
+
@mixin button-group-ends($orientation: horizontal, $radius: .25em) {
|
61
|
+
&:first-child {
|
62
|
+
@if $orientation == horizontal {
|
63
|
+
@include border-radius($radius 0 0 $radius);
|
64
|
+
} @else {
|
65
|
+
@include border-radius($radius $radius 0 0);
|
66
|
+
}
|
67
|
+
}
|
68
|
+
|
69
|
+
&:last-child {
|
70
|
+
@if $orientation == horizontal {
|
71
|
+
@include border-radius(0 $radius $radius 0);
|
72
|
+
} @else {
|
73
|
+
@include border-radius(0 0 $radius $radius);
|
74
|
+
}
|
75
|
+
}
|
76
|
+
}
|
@@ -0,0 +1,16 @@
|
|
1
|
+
@mixin bordered-table($border: 1px solid) {
|
2
|
+
border-collapse: collapse;
|
3
|
+
|
4
|
+
th, td {
|
5
|
+
border: $border;
|
6
|
+
padding: .25em;
|
7
|
+
|
8
|
+
@content;
|
9
|
+
}
|
10
|
+
}
|
11
|
+
|
12
|
+
@mixin zebra-striping($position: even) {
|
13
|
+
tbody:nth-of-type(#{$position}) tr, tbody:only-of-type tr:nth-child(#{$position}) {
|
14
|
+
@content;
|
15
|
+
}
|
16
|
+
}
|
@@ -0,0 +1,55 @@
|
|
1
|
+
$baseline-block-margin: 1rem 0 !default;
|
2
|
+
|
3
|
+
// $base-size 1em by default, but it might not be if you're nesting elements
|
4
|
+
// Example
|
5
|
+
// -------
|
6
|
+
// body: 1em
|
7
|
+
// p.special: 1.2em
|
8
|
+
// p.special strong: 1em
|
9
|
+
//
|
10
|
+
// If we want to scale `p.special strong` back to 1em, we need to feed $base-size as .83333 or scale-em(1.2, 1):
|
11
|
+
//
|
12
|
+
// p.special strong {
|
13
|
+
// @include rem(font-size, 1em, scale-em(1.2, 1));
|
14
|
+
// }
|
15
|
+
|
16
|
+
@mixin rem($property, $font-size, $desired-sizes: 1rem, $base-size: 1em) { // this mixin uses em and rem interchangeably
|
17
|
+
$ems: ();
|
18
|
+
$rems: ();
|
19
|
+
|
20
|
+
@each $s in $desired-sizes {
|
21
|
+
$s: strip-unit($s);
|
22
|
+
$ems: append($ems, scale-em($font-size, $s, $base-size)); // scale-em already returns it into em
|
23
|
+
$rems: append($rems, if($s == 0, 0, $s * 1rem));
|
24
|
+
}
|
25
|
+
|
26
|
+
#{$property}: $ems;
|
27
|
+
#{$property}: $rems;
|
28
|
+
}
|
29
|
+
|
30
|
+
// @font-size:
|
31
|
+
// the size of the current element (eg. `1.5em`)
|
32
|
+
// @desired-size:
|
33
|
+
// the desired output size (eg. `1em`)
|
34
|
+
// @base-size:
|
35
|
+
// the size of the parent element if you're trying to scale it back to the baseline size (eg. `1.5em` or `.8em`)
|
36
|
+
// otherwise use the default of `1em` to signify no additional scaling
|
37
|
+
@function scale-em($font-size, $desired-size, $parent-size: 1em) {
|
38
|
+
// @return if($desired-size == 0, 0, strip-unit($desired-size) / strip-unit($font-size) * strip-unit($parent-size) * 1em);
|
39
|
+
@return if($desired-size == 0, 0, strip-unit($desired-size) / strip-unit($font-size) * $parent-size);
|
40
|
+
}
|
41
|
+
|
42
|
+
// a map version of scale-em
|
43
|
+
// @function scale-em-list($font-size, $desired-sizes: 1em, $base-size: 1em) {
|
44
|
+
// $collector: ();
|
45
|
+
|
46
|
+
// @each $s in $desired-sizes {
|
47
|
+
// $collector: append($collector, scale-em($font-size, $s, $base-size));
|
48
|
+
// }
|
49
|
+
// @return $collector;
|
50
|
+
// }
|
51
|
+
|
52
|
+
//@mixin baseline-margins($font-size, $margin: $baseline-block-margin) {
|
53
|
+
// font-size: $font-size;
|
54
|
+
// margin: scale-em-list($font-size, $margin);
|
55
|
+
//}
|
@@ -0,0 +1,288 @@
|
|
1
|
+
@import "compass/support";
|
2
|
+
|
3
|
+
// $flexbox-support values:
|
4
|
+
// standard: Draft #3
|
5
|
+
// modern: Draft #2 or newer
|
6
|
+
// legacy: Draft #1 only
|
7
|
+
// wrap: versions that support wrapping (includes feature query on the display property on the unprefixed standard value)
|
8
|
+
// all: all versions
|
9
|
+
|
10
|
+
$flexbox-support-threshold: $critical-usage-threshold !default;
|
11
|
+
$flexbox-support: modern !default;
|
12
|
+
$flexbox-warnings: true !default;
|
13
|
+
|
14
|
+
// @private
|
15
|
+
@function flexbox-capability-options($support: $flexbox-support) {
|
16
|
+
@if type-of($flexbox-support) == list { // this might need to be here for users who are expecting the older format for this variable
|
17
|
+
@warn "The $flexbox-support variable as a list has been deprecated, setting $flexbox-support to `modern`";
|
18
|
+
$flexbox-support: modern !global;
|
19
|
+
}
|
20
|
+
|
21
|
+
@if $support == wrap {
|
22
|
+
@return (), ((spec-versions: 2), ), ((spec-versions: 3, partial-support: false), (full-support: true));
|
23
|
+
} @else if $support == standard {
|
24
|
+
@return (), (), ((spec-versions: 3), (full-support: true));
|
25
|
+
} @else if $support == legacy {
|
26
|
+
@return (spec-versions: 1), (), ();
|
27
|
+
} @else if $support == modern {
|
28
|
+
@return (), ((spec-versions: 2), ), ((spec-versions: 3, partial-support: false), (full-support: true));
|
29
|
+
} @else { // all
|
30
|
+
@return (spec-versions: 1), ((spec-versions: 2), ), ((spec-versions: 3), (full-support: true));
|
31
|
+
}
|
32
|
+
}
|
33
|
+
|
34
|
+
// @private
|
35
|
+
@function flexbox-translate-value($value, $version: 1) {
|
36
|
+
$value: unquote($value);
|
37
|
+
|
38
|
+
@if $value == flex {
|
39
|
+
@return if($version == 1, box, flexbox);
|
40
|
+
} @else if $value == inline-flex {
|
41
|
+
@return if($version == 1, inline-box, inline-flexbox);
|
42
|
+
} @else if $value == flex-start {
|
43
|
+
@return start;
|
44
|
+
} @else if $value == flex-end {
|
45
|
+
@return end;
|
46
|
+
} @else if $value == space-between {
|
47
|
+
@return justify;
|
48
|
+
} @else if $value == space-around { // @box doesn't have a value equivalent to `space-around`
|
49
|
+
@return if($version == 1, justify, distribute);
|
50
|
+
}
|
51
|
+
@return $value;
|
52
|
+
}
|
53
|
+
|
54
|
+
// @private
|
55
|
+
// TODO: do away with assuming that length($styles) == 1 means that we only want the modern properties?
|
56
|
+
@mixin flexbox($styles, $warnings: ()) {
|
57
|
+
// length($styles) == 3: v1, v2, v3
|
58
|
+
// length($styles) == 2: v1, v2 & v3
|
59
|
+
// length($styles) == 1: v3
|
60
|
+
$options: flexbox-capability-options($flexbox-support);
|
61
|
+
$versions: length($styles);
|
62
|
+
|
63
|
+
@if $versions == 1 {
|
64
|
+
$options: nth($options, 3);
|
65
|
+
} @else if $versions == 2 {
|
66
|
+
$options: nth($options, 1), join(nth($options, 2), nth($options, 3));
|
67
|
+
}
|
68
|
+
|
69
|
+
@for $i from 1 through $versions {
|
70
|
+
$current-options: nth($options, $i);
|
71
|
+
|
72
|
+
@if $flexbox-warnings and length($warnings) >= $i {
|
73
|
+
$warning-shown: false;
|
74
|
+
$prefixes: prefixes-for-capability(flexbox, $flexbox-support-threshold, nth($options, $i));
|
75
|
+
@each $browser, $min-ver in $prefixes {
|
76
|
+
@if not $warning-shown and ($min-ver or $i == $versions) and nth($warnings, $i) {
|
77
|
+
@warn nth($warnings, $i);
|
78
|
+
$warning-shown: true;
|
79
|
+
}
|
80
|
+
}
|
81
|
+
}
|
82
|
+
|
83
|
+
@include with-each-prefix(flexbox, $flexbox-support-threshold, $current-options) {
|
84
|
+
// length($current-options) == 0 when spitting out only v1 properties via `$flexbox-support: legacy`
|
85
|
+
// in order to show the unprefixed properties, it needs to be the most recent version *and* have something for $current-options
|
86
|
+
$show-unprefixed: $i == $versions and length($current-options) > 0;
|
87
|
+
@if $current-prefix or $show-unprefixed {
|
88
|
+
@each $prop, $value in nth($styles, $i) {
|
89
|
+
@if $prop == display {
|
90
|
+
@if $show-unprefixed and not $current-prefix {
|
91
|
+
@if $flexbox-support == wrap {
|
92
|
+
@supports (flex-wrap: wrap) { // hide Flexbox from versions of Firefox that do not support wrapping
|
93
|
+
display: $value;
|
94
|
+
}
|
95
|
+
} @else {
|
96
|
+
display: $value;
|
97
|
+
}
|
98
|
+
} @else {
|
99
|
+
display: prefix-identifier($value);
|
100
|
+
}
|
101
|
+
} @else {
|
102
|
+
@include prefix-prop($prop, $value);
|
103
|
+
}
|
104
|
+
}
|
105
|
+
}
|
106
|
+
}
|
107
|
+
}
|
108
|
+
}
|
109
|
+
|
110
|
+
// @public
|
111
|
+
@mixin flexbox-support($support: $flexbox-support) {
|
112
|
+
$previous-support: $flexbox-support !global;
|
113
|
+
$flexbox-support: $support !global;
|
114
|
+
@content;
|
115
|
+
$flexbox-support: $previous-support !global;
|
116
|
+
}
|
117
|
+
|
118
|
+
// @flex container properties
|
119
|
+
|
120
|
+
@mixin display-flex($value: flex) {
|
121
|
+
@include flexbox(
|
122
|
+
( (display: flexbox-translate-value($value, 1))
|
123
|
+
, (display: flexbox-translate-value($value, 2))
|
124
|
+
, (display: $value)
|
125
|
+
));
|
126
|
+
}
|
127
|
+
|
128
|
+
@mixin flex-direction($value: row) {
|
129
|
+
@include flexbox(
|
130
|
+
( ( box-orient: if($value == row or $value == row-reverse, horizontal, vertical)
|
131
|
+
, box-direction: if($value == row or $value == column, normal, reverse)
|
132
|
+
)
|
133
|
+
, (flex-direction: $value)
|
134
|
+
));
|
135
|
+
}
|
136
|
+
|
137
|
+
@mixin flex-wrap($value: nowrap) {
|
138
|
+
$warnings:
|
139
|
+
( "Flexbox v1 has properties for wrapping but no browser has implemented them, change your flexbox-support to `wrap` to hide Flexbox from them"
|
140
|
+
, "Firefox versions 22-28 do not support wrapping for Flexbox v3, change your flexbox-support to `wrap` to hide Flexbox from them"
|
141
|
+
);
|
142
|
+
@include flexbox(
|
143
|
+
( (box-lines: if($value == nowrap, single, multiple))
|
144
|
+
, (flex-wrap: $value)
|
145
|
+
), if($flexbox-support != wrap and $value != nowrap, $warnings, ()));
|
146
|
+
}
|
147
|
+
|
148
|
+
@mixin flex-flow($value: row nowrap) {
|
149
|
+
$warnings:
|
150
|
+
( "Flexbox v1 has properties for wrapping but no browser has implemented them, change your flexbox-support to `wrap` to hide Flexbox from them"
|
151
|
+
, "Firefox versions 22-28 do not support wrapping for Flexbox v3, change your flexbox-support to `wrap` to hide Flexbox from them"
|
152
|
+
);
|
153
|
+
$direction: null;
|
154
|
+
$wrap: null;
|
155
|
+
@if length($value) == 2 {
|
156
|
+
$direction: nth($value, 1);
|
157
|
+
$wrap: nth($value, 2);
|
158
|
+
} @else {
|
159
|
+
@if $value == nowrap or $value == wrap or $value == wrap-reverse {
|
160
|
+
$wrap: $value;
|
161
|
+
} @else {
|
162
|
+
$direction: $value;
|
163
|
+
}
|
164
|
+
}
|
165
|
+
@include flexbox(
|
166
|
+
( ( box-orient: if($direction == row or $direction == row-reverse, horizontal, vertical)
|
167
|
+
, box-direction: if($direction == row or $direction == column, normal, reverse)
|
168
|
+
, box-lines: if($wrap == nowrap, single, multiple)
|
169
|
+
)
|
170
|
+
, (flex-flow: $value)
|
171
|
+
), if($flexbox-support != wrap and ($wrap == wrap or $wrap == wrap-reverse), $warnings, ()));
|
172
|
+
}
|
173
|
+
|
174
|
+
@mixin justify-content($value: stretch) {
|
175
|
+
@include flexbox(
|
176
|
+
( (box-pack: flexbox-translate-value($value, 1))
|
177
|
+
, (flex-pack: flexbox-translate-value($value, 2))
|
178
|
+
, (justify-content: $value)
|
179
|
+
));
|
180
|
+
}
|
181
|
+
|
182
|
+
@mixin align-content($value: stretch) {
|
183
|
+
$warnings:
|
184
|
+
( "Flexbox v1 does not have an align-content property"
|
185
|
+
, null
|
186
|
+
, null
|
187
|
+
);
|
188
|
+
@include flexbox(
|
189
|
+
( null
|
190
|
+
, (flex-line-pack: flexbox-translate-value($value, 2))
|
191
|
+
, (align-content: $value)
|
192
|
+
), $warnings);
|
193
|
+
}
|
194
|
+
|
195
|
+
@mixin align-items($value: stretch) {
|
196
|
+
@include flexbox(
|
197
|
+
( (box-align: flexbox-translate-value($value, 1))
|
198
|
+
, (flex-align: flexbox-translate-value($value, 2))
|
199
|
+
, (align-items: $value)
|
200
|
+
));
|
201
|
+
}
|
202
|
+
|
203
|
+
// @flex item properties
|
204
|
+
|
205
|
+
@mixin align-self($value: stretch) {
|
206
|
+
$warnings:
|
207
|
+
( "Flexbox v1 does not have an align-self property, only align-content"
|
208
|
+
, null
|
209
|
+
, null
|
210
|
+
);
|
211
|
+
@include flexbox(
|
212
|
+
( ()
|
213
|
+
, (flex-item-align: flexbox-translate-value($value, 2))
|
214
|
+
, (align-self: $value)
|
215
|
+
), $warnings);
|
216
|
+
}
|
217
|
+
|
218
|
+
@mixin flex($value: 1 0 auto) {
|
219
|
+
$last-val: nth($value, length($value));
|
220
|
+
// TODO: determine what kind of warning makes sense here
|
221
|
+
// Flexbox v1 doesn't let you control flex-grow and flex-shrink values independently
|
222
|
+
// (minor issue), nor does it have a concept of flex-basis (moderate issue).
|
223
|
+
// `box-flex: 1` is equivalent to `flex: 1 1`. There's no way to recreate `flex: 1 0`
|
224
|
+
// or `flex: 0 1`, though there are few instances where this is actually a problem
|
225
|
+
// see: http://stackoverflow.com/questions/16130399/flexbox-in-safari-grow-and-shrink
|
226
|
+
$warnings:
|
227
|
+
( "Flexbox v1 does not support flex-basis for the `flex` property at all"
|
228
|
+
, null
|
229
|
+
, null
|
230
|
+
);
|
231
|
+
@include flexbox(
|
232
|
+
( (box-flex: nth($value, 1))
|
233
|
+
, (flex: $value)
|
234
|
+
, (flex: $value)
|
235
|
+
), if(length($value) > 2 or ($last-val != auto and not unitless($last-val)), $warnings, ()));
|
236
|
+
}
|
237
|
+
|
238
|
+
@mixin flex-grow($value: auto) {
|
239
|
+
$warnings:
|
240
|
+
( "Flexbox v1 does not have a flex-grow property, try using the `flex` property instead"
|
241
|
+
, "Flexbox v2 does not have a flex-grow property, use the `flex` shorthand instead"
|
242
|
+
, null
|
243
|
+
);
|
244
|
+
@include flexbox(
|
245
|
+
( ()
|
246
|
+
, ()
|
247
|
+
, (flex-grow: $value)
|
248
|
+
), $warnings);
|
249
|
+
}
|
250
|
+
|
251
|
+
@mixin flex-shrink($value: auto) {
|
252
|
+
$warnings:
|
253
|
+
( "Flexbox v1 does not have a flex-shrink property"
|
254
|
+
, "Flexbox v2 does not have a flex-grow property, use the `flex` shorthand instead"
|
255
|
+
, null
|
256
|
+
);
|
257
|
+
@include flexbox(
|
258
|
+
( ()
|
259
|
+
, ()
|
260
|
+
, (flex-shrink: $value)
|
261
|
+
), $warnings);
|
262
|
+
}
|
263
|
+
|
264
|
+
@mixin flex-basis($value: auto) {
|
265
|
+
$warnings:
|
266
|
+
( "Flexbox v1 does not have a flex-basis property"
|
267
|
+
, "Flexbox v2 does not have a flex-grow property, use the `flex` shorthand instead"
|
268
|
+
, null
|
269
|
+
);
|
270
|
+
@include flexbox(
|
271
|
+
( ()
|
272
|
+
, ()
|
273
|
+
, (flex-basis: $value)
|
274
|
+
), $warnings);
|
275
|
+
}
|
276
|
+
|
277
|
+
@mixin order($value: 0) {
|
278
|
+
$warnings:
|
279
|
+
( "Flexbox v1 does not support negative ordering, try increasing the order of the sibling elements instead"
|
280
|
+
, null
|
281
|
+
, null
|
282
|
+
);
|
283
|
+
@include flexbox(
|
284
|
+
( (box-ordinal-group: $value + 1)
|
285
|
+
, (flex-order: $value)
|
286
|
+
, (order: $value)
|
287
|
+
), if($value < 0, $warnings, ()));
|
288
|
+
}
|
@@ -0,0 +1,315 @@
|
|
1
|
+
@import "compass/css3/deprecated-support";
|
2
|
+
|
3
|
+
// NOTE:
|
4
|
+
// All mixins for the @box spec have been written assuming they'll be fed property values that
|
5
|
+
// correspond to the standard spec. Some mixins can be fed values from the @box spec, but don't
|
6
|
+
// rely on it. The `legacy-order` mixin will increment the value fed to it because the @box
|
7
|
+
// `box-ordinal-group` property begins indexing at 1, while the modern `order` property begins
|
8
|
+
// indexing at 0.
|
9
|
+
|
10
|
+
// if `true`, the @box properties will be emitted as part of the normal mixin call
|
11
|
+
// (if this is false, you're still free to explicitly call the legacy mixins yourself)
|
12
|
+
$flex-legacy-enabled: false !default;
|
13
|
+
|
14
|
+
// if `true`, `$flex-legacy-enabled` is treated as false and an `@supports` block is added to
|
15
|
+
// the display property to hide the standard value from versions of Firefox that support the
|
16
|
+
// unprefixed properties, but do not support wrapping
|
17
|
+
// (this includes suppressing the automatic emittion of @box properties)
|
18
|
+
$flex-wrap-required : false !default;
|
19
|
+
|
20
|
+
// The modern `flex-direction` property corresponds to two properties in the @box spec and the
|
21
|
+
// `legacy-flex-direction` mixin will emit both by default.
|
22
|
+
|
23
|
+
// This variable controls the emition of the `box-direction` property:
|
24
|
+
// true : always emit
|
25
|
+
// false : always suppress
|
26
|
+
// normal : only emit if the direction is `normal`
|
27
|
+
// reverse: only emit if the direction is `reverse`
|
28
|
+
$flex-legacy-direction: true !default;
|
29
|
+
|
30
|
+
// This variable controls the emition of the `box-orient` property:
|
31
|
+
// true : always emit
|
32
|
+
// false : always suppress
|
33
|
+
// horizontal: only emit if the orient is `horizontal`
|
34
|
+
// vertical : only emit if the orient is `vertical`
|
35
|
+
$flex-legacy-orient: true !default;
|
36
|
+
|
37
|
+
// @flex
|
38
|
+
// September 2012 Candidate Recommendation (http://www.w3.org/TR/2012/CR-css3-flexbox-20120918/)
|
39
|
+
// NOTE: FF did not support wrapping until version ??. Because the `display: flex` property
|
40
|
+
// is wrapped in a `@supports (flex-wrap: wrap)` block (when $flex-wrap-required or the $wrap
|
41
|
+
// argument to the `display-flex` mixin is set to `true`), it will Just Work(TM) when support is
|
42
|
+
// finally added
|
43
|
+
// Chrome 21 (prefixed)
|
44
|
+
// Opera 12.1 (unprefixed)
|
45
|
+
// Firefox 22 (unprefixed)
|
46
|
+
$flex-support: not -moz, -webkit, not -ms, not -o, not -khtml !default;
|
47
|
+
|
48
|
+
// @flexbox
|
49
|
+
// March 2012 Working Draft (http://www.w3.org/TR/2012/WD-css3-flexbox-20120322/)
|
50
|
+
// Chrome 17 (prefixed)
|
51
|
+
// Internet Explorer 10 (prefixed)
|
52
|
+
$flexbox-support: not -moz, -webkit, -ms, not -o, not -khtml, not standard !default;
|
53
|
+
|
54
|
+
// @box
|
55
|
+
// July 2009 Working Draft (http://www.w3.org/TR/2009/WD-css3-flexbox-20090723/)
|
56
|
+
// NOTE: no browser that implements this spec is known to support `box-lines: multiple`
|
57
|
+
// Chrome 4? (prefixed)
|
58
|
+
// Safari 3.1 (prefixed)
|
59
|
+
// Firefox <20 (prefixed)
|
60
|
+
$box-support: -moz, -webkit, not -ms, not -o, not -khtml, not standard !default;
|
61
|
+
|
62
|
+
// ====================================================================================================
|
63
|
+
// | Common
|
64
|
+
// ====================================================================================================
|
65
|
+
|
66
|
+
// function for converting a value from the standard specification to one that is comparable from
|
67
|
+
// an older specification
|
68
|
+
@function flex-translate-value($value, $version: box) {
|
69
|
+
$value: unquote($value);
|
70
|
+
|
71
|
+
@if $value == flex {
|
72
|
+
@return if($version == box, box, flexbox);
|
73
|
+
} @else if $value == inline-flex {
|
74
|
+
@return if($version == box, inline-box, inline-flexbox);
|
75
|
+
} @else if $value == flex-start {
|
76
|
+
@return start;
|
77
|
+
} @else if $value == flex-end {
|
78
|
+
@return end;
|
79
|
+
} @else if $value == space-between {
|
80
|
+
@return justify;
|
81
|
+
} @else if $value == space-around { // @box doesn't have a value equivalent to `space-around`
|
82
|
+
@return if($version == box, justify, distribute);
|
83
|
+
}
|
84
|
+
@return $value;
|
85
|
+
}
|
86
|
+
|
87
|
+
@function flex-support-common() {
|
88
|
+
$common: ();
|
89
|
+
@for $i from 1 through length($flex-support) {
|
90
|
+
$common: append($common, nth($flex-support, $i) or nth($flexbox-support, $i), comma);
|
91
|
+
}
|
92
|
+
@return $common;
|
93
|
+
}
|
94
|
+
|
95
|
+
// ====================================================================================================
|
96
|
+
// | Display Property
|
97
|
+
// ====================================================================================================
|
98
|
+
|
99
|
+
// $type: flex | inline-flex
|
100
|
+
@mixin display-flex($type: flex, $wrap: $flex-wrap-required, $legacy: $flex-legacy-enabled) {
|
101
|
+
@if $legacy and not $wrap {
|
102
|
+
@include legacy-display-flex($type);
|
103
|
+
}
|
104
|
+
|
105
|
+
@include experimental-value(display, flex-translate-value($type, flexbox), $flexbox-support...);
|
106
|
+
|
107
|
+
// if `$wrap` is true, then we need to suppress official support as generated by the `experimental()`
|
108
|
+
// mixin so that we can insert it inside an `@supports` block
|
109
|
+
$flex-support-standard: true;
|
110
|
+
$flex-support-list: $flex-support;
|
111
|
+
@if length($flex-support) > 5 {
|
112
|
+
$flex-support-standard: nth($flex-support, 6);
|
113
|
+
// a `slice()` function would really be handy here...
|
114
|
+
$flex-support-list: nth($flex-support, 1), nth($flex-support, 2), nth($flex-support, 3), nth($flex-support, 4), nth($flex-support, 5);
|
115
|
+
}
|
116
|
+
$flex-support-list: append($flex-support-list, if($wrap, false, $flex-support-standard));
|
117
|
+
@include experimental-value(display, $type, $flex-support-list...);
|
118
|
+
|
119
|
+
@if $wrap and $flex-support-standard {
|
120
|
+
@supports (flex-wrap: wrap) {
|
121
|
+
display: $type;
|
122
|
+
}
|
123
|
+
}
|
124
|
+
}
|
125
|
+
|
126
|
+
@mixin legacy-display-flex($type: flex) {
|
127
|
+
@include experimental-value(display, flex-translate-value($type, box), $box-support...);
|
128
|
+
}
|
129
|
+
|
130
|
+
// ====================================================================================================
|
131
|
+
// | Flex Container Properties
|
132
|
+
// ====================================================================================================
|
133
|
+
|
134
|
+
// $value: <'flex-direction'> || <'flex-wrap'>
|
135
|
+
@mixin flex-flow($value: row nowrap, $wrap: $flex-wrap-required, $legacy: $flex-legacy-enabled, $orient: $flex-legacy-orient, $direction: $flex-legacy-direction) {
|
136
|
+
@if $legacy and not $wrap {
|
137
|
+
@include legacy-flex-flow($value, $orient, $direction);
|
138
|
+
}
|
139
|
+
|
140
|
+
@include experimental(flex-flow, $value, flex-support-common()...);
|
141
|
+
}
|
142
|
+
|
143
|
+
@mixin legacy-flex-flow($value: row nowrap, $orient: $flex-legacy-orient, $direction: $flex-legacy-direction) {
|
144
|
+
@if length($value) > 1 { // @box version doesn't have a shorthand
|
145
|
+
@include legacy-flex-direction(nth($value, 1), $orient, $direction);
|
146
|
+
@include legacy-flex-wrap(nth($value, 2));
|
147
|
+
} @else {
|
148
|
+
$value: unquote($value);
|
149
|
+
@if $value == row or $value == row-reverse or $value == column or $value == column-reverse {
|
150
|
+
@include legacy-flex-direction($value);
|
151
|
+
} @else {
|
152
|
+
@include legacy-flex-wrap($value);
|
153
|
+
}
|
154
|
+
}
|
155
|
+
}
|
156
|
+
|
157
|
+
// ----------------------------------------------------------------------
|
158
|
+
|
159
|
+
// $value: row | row-reverse | column | column-reverse
|
160
|
+
@mixin flex-direction($value: row, $wrap: $flex-wrap-required, $legacy: $flex-legacy-enabled, $orient: $flex-legacy-orient, $direction: $flex-legacy-direction) {
|
161
|
+
@if $legacy and not $wrap {
|
162
|
+
@include legacy-flex-direction($value, $orient, $direction);
|
163
|
+
}
|
164
|
+
|
165
|
+
@include experimental(flex-direction, $value, flex-support-common()...);
|
166
|
+
}
|
167
|
+
|
168
|
+
@mixin legacy-flex-direction($value: row, $orient: $flex-legacy-orient, $direction: $flex-legacy-direction) {
|
169
|
+
$value: unquote($value);
|
170
|
+
$translated-orient: if($value == row or $value == row-reverse, horizontal, vertical);
|
171
|
+
$translated-direction: if($value == row or $value == column, normal, reverse);
|
172
|
+
|
173
|
+
@if $orient == true or $translated-orient == $orient {
|
174
|
+
@include experimental(box-orient, $translated-orient, $box-support...);
|
175
|
+
}
|
176
|
+
|
177
|
+
@if $direction == true or $translated-direction == $direction {
|
178
|
+
@include experimental(box-direction, $translated-direction, $box-support...);
|
179
|
+
}
|
180
|
+
}
|
181
|
+
|
182
|
+
// ----------------------------------------------------------------------
|
183
|
+
|
184
|
+
// $value: nowrap | wrap | wrap-reverse
|
185
|
+
@mixin flex-wrap($value: nowrap, $wrap: $flex-wrap-required, $legacy: $flex-legacy-enabled) {
|
186
|
+
@if $legacy and not $wrap {
|
187
|
+
@include legacy-flex-wrap($value);
|
188
|
+
}
|
189
|
+
|
190
|
+
@include experimental(flex-wrap, $value, flex-support-common()...);
|
191
|
+
}
|
192
|
+
|
193
|
+
@mixin legacy-flex-wrap($value: nowrap) {
|
194
|
+
// NOTE: @box has no equivalent of wrap-reverse
|
195
|
+
@include experimental(box-lines, if($value == nowrap, single, multiple), $box-support...);
|
196
|
+
}
|
197
|
+
|
198
|
+
// ----------------------------------------------------------------------
|
199
|
+
|
200
|
+
// Distributing extra space along the "main axis"
|
201
|
+
// $value: flex-start | flex-end | center | space-between | space-around
|
202
|
+
@mixin justify-content($value: flex-start, $wrap: $flex-wrap-required, $legacy: $flex-legacy-enabled) {
|
203
|
+
@if $legacy and not $wrap {
|
204
|
+
@include legacy-justify-content($value);
|
205
|
+
}
|
206
|
+
|
207
|
+
@include experimental(flex-pack, flex-translate-value($value, flexbox), $flexbox-support...);
|
208
|
+
@include experimental(justify-content, $value, $flex-support...);
|
209
|
+
}
|
210
|
+
|
211
|
+
@mixin legacy-justify-content($value: flex-start) {
|
212
|
+
@include experimental(box-pack, flex-translate-value($value, box), $box-support...);
|
213
|
+
}
|
214
|
+
|
215
|
+
// ----------------------------------------------------------------------
|
216
|
+
|
217
|
+
// Distributing extra space along the "cross axis"
|
218
|
+
// $value: flex-start | flex-end | center | space-between | space-around | stretch
|
219
|
+
@mixin align-content($value: flex-start, $wrap: $flex-wrap-required, $legacy: $flex-legacy-enabled) {
|
220
|
+
@if $legacy and not $wrap {
|
221
|
+
@include legacy-align-content($value);
|
222
|
+
}
|
223
|
+
|
224
|
+
@include experimental(flex-line-pack, flex-translate-value($value, flexbox), $flexbox-support...);
|
225
|
+
@include experimental(align-content, $value, $flex-support...);
|
226
|
+
}
|
227
|
+
|
228
|
+
@mixin legacy-align-content($value: flex-start) {
|
229
|
+
@include experimental(box-align, flex-translate-value($value, box), $box-support...);
|
230
|
+
}
|
231
|
+
|
232
|
+
// ----------------------------------------------------------------------
|
233
|
+
|
234
|
+
// Align items along the "cross axis"
|
235
|
+
// $value: flex-start | flex-end | center | baseline | stretch
|
236
|
+
@mixin align-items($value: stretch) { // the flex container
|
237
|
+
// There is no @box version of this property
|
238
|
+
@include experimental(flex-align, flex-translate-value($value, flexbox), $flexbox-support...);
|
239
|
+
@include experimental(align-items, $value, $flex-support...);
|
240
|
+
}
|
241
|
+
|
242
|
+
// ====================================================================================================
|
243
|
+
// | Flex Item Properties
|
244
|
+
// ====================================================================================================
|
245
|
+
|
246
|
+
// $value: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
|
247
|
+
@mixin flex($value: 0 1 auto, $wrap: $flex-wrap-required, $legacy: $flex-legacy-enabled) {
|
248
|
+
$value: unquote($value);
|
249
|
+
@if $legacy and unitless(nth($value, 1)) {
|
250
|
+
@include legacy-flex(nth($value, 1));
|
251
|
+
}
|
252
|
+
|
253
|
+
@include experimental(flex, $value, flex-support-common()...);
|
254
|
+
}
|
255
|
+
|
256
|
+
@mixin legacy-flex($value: 0) {
|
257
|
+
@include experimental(box-flex, $value, $box-support...);
|
258
|
+
}
|
259
|
+
|
260
|
+
// ----------------------------------------------------------------------
|
261
|
+
|
262
|
+
// $value: Integer
|
263
|
+
@mixin flex-grow($value: 0, $wrap: $flex-wrap-required, $legacy: $flex-legacy-enabled) {
|
264
|
+
@if $legacy and not $wrap {
|
265
|
+
@include legacy-flex-grow($value);
|
266
|
+
}
|
267
|
+
|
268
|
+
// There is no @flexbox version of this property
|
269
|
+
@include experimental(flex-grow, $value, $flex-support...);
|
270
|
+
}
|
271
|
+
|
272
|
+
// ----------------------------------------------------------------------
|
273
|
+
|
274
|
+
// $value: Integer
|
275
|
+
@mixin flex-shrink($value: 1) {
|
276
|
+
// There is no @box version of this property
|
277
|
+
// There is no @flexbox version of this property
|
278
|
+
@include experimental(flex-shrink, $value, $flex-support...);
|
279
|
+
}
|
280
|
+
|
281
|
+
// ----------------------------------------------------------------------
|
282
|
+
|
283
|
+
// $value: united number (eg: 100px)
|
284
|
+
@mixin flex-basis($value: auto) {
|
285
|
+
// There is no @box version of this property
|
286
|
+
// There is no @flexbox version of this property
|
287
|
+
@include experimental(flex-basis, $value, $flex-support...);
|
288
|
+
}
|
289
|
+
|
290
|
+
// ----------------------------------------------------------------------
|
291
|
+
|
292
|
+
// Align items along the "cross axis" -- overrides `align-items` value on individual items
|
293
|
+
// $value: auto | flex-start | flex-end | center | baseline | stretch
|
294
|
+
@mixin align-self($value: auto) { // children of flex containers
|
295
|
+
// There is no @box version of this property
|
296
|
+
@include experimental(flex-item-align, flex-translate-value($value, flexbox), $flexbox-support...);
|
297
|
+
@include experimental(align-self, $value, $flex-support...);
|
298
|
+
}
|
299
|
+
|
300
|
+
// ----------------------------------------------------------------------
|
301
|
+
|
302
|
+
// $value: Integer
|
303
|
+
@mixin order($value: 0, $wrap: $flex-wrap-required, $legacy: $flex-legacy-enabled) {
|
304
|
+
@if $legacy and not $wrap {
|
305
|
+
@include legacy-order($value);
|
306
|
+
}
|
307
|
+
|
308
|
+
@include experimental(flex-order, $value, $flexbox-support...);
|
309
|
+
@include experimental(order, $value, $flex-support...);
|
310
|
+
}
|
311
|
+
|
312
|
+
@mixin legacy-order($value: 0) {
|
313
|
+
// the @box spec starts the ordering at 1 instead of 0 like the modern specs
|
314
|
+
@include experimental(box-ordinal-group, $value + 1, $box-support...);
|
315
|
+
}
|
@@ -0,0 +1,13 @@
|
|
1
|
+
@import "compass/css3/deprecated-support";
|
2
|
+
|
3
|
+
// http://dev.opera.com/articles/view/css3-object-fit-object-position/
|
4
|
+
|
5
|
+
$object-fit-support: not webkit, not moz, o, not ms, not khtml;
|
6
|
+
|
7
|
+
@mixin object-fit($value: contain) {
|
8
|
+
@include experimental(object-fit, $value, $object-fit-support...);
|
9
|
+
}
|
10
|
+
|
11
|
+
@mixin object-position($value: 50% 50%) {
|
12
|
+
@include experimental(object-position, $value, $object-fit-support...);
|
13
|
+
}
|
@@ -0,0 +1,40 @@
|
|
1
|
+
// --------------------------------------------------------------------------------
|
2
|
+
// Clearfix: clear floats without using extra markup
|
3
|
+
// --------------------------------------------------------------------------------
|
4
|
+
|
5
|
+
$default-clearfix: modern !default;
|
6
|
+
|
7
|
+
@mixin clearfix($type: $default-clearfix) {
|
8
|
+
@if $type == modern {
|
9
|
+
@include clearfix-modern;
|
10
|
+
} @else if $type == traditional {
|
11
|
+
@include clearfix-traditional;
|
12
|
+
} @else {
|
13
|
+
@include clearfix-overflow;
|
14
|
+
}
|
15
|
+
}
|
16
|
+
|
17
|
+
// http://www.positioniseverything.net/easyclearing.html
|
18
|
+
@mixin clearfix-traditional {
|
19
|
+
zoom: 1; // fix for IE
|
20
|
+
|
21
|
+
&:after {
|
22
|
+
content: ' ';
|
23
|
+
display: block;
|
24
|
+
height: 0;
|
25
|
+
clear: both;
|
26
|
+
visibility: hidden;
|
27
|
+
}
|
28
|
+
}
|
29
|
+
|
30
|
+
// http://nicolasgallagher.com/micro-clearfix-hack/
|
31
|
+
@mixin clearfix-modern {
|
32
|
+
zoom: 1; // fix for IE
|
33
|
+
|
34
|
+
/*&:before,*/ &:after { content: ' '; display: table; }
|
35
|
+
&:after { clear: both; }
|
36
|
+
}
|
37
|
+
|
38
|
+
@mixin clearfix-overflow {
|
39
|
+
overflow: hidden;
|
40
|
+
}
|
@@ -0,0 +1,34 @@
|
|
1
|
+
@import "compass/css3/deprecated-support";
|
2
|
+
|
3
|
+
$text-overflow-support: not webkit, not moz, o, not ms, not khtml;
|
4
|
+
|
5
|
+
@mixin single-line-ellipsis {
|
6
|
+
text-overflow: ellipsis;
|
7
|
+
white-space: nowrap;
|
8
|
+
overflow: hidden;
|
9
|
+
}
|
10
|
+
|
11
|
+
@mixin multi-line-ellipsis($background: white, $height: 1.4em) {
|
12
|
+
overflow: hidden;
|
13
|
+
position: relative;
|
14
|
+
|
15
|
+
&:after {
|
16
|
+
display: block;
|
17
|
+
height: $height;
|
18
|
+
content: ' ';
|
19
|
+
@include background(linear-gradient(rgba($background, 0), $background));
|
20
|
+
position: absolute;
|
21
|
+
bottom: 0;
|
22
|
+
left: 0;
|
23
|
+
right: 0;
|
24
|
+
}
|
25
|
+
|
26
|
+
@supports (text-overflow: -o-ellipsis-lastline) {
|
27
|
+
text-overflow: -o-ellipsis-lastline;
|
28
|
+
// no standard version of this value yet
|
29
|
+
|
30
|
+
&:after {
|
31
|
+
display: none;
|
32
|
+
}
|
33
|
+
}
|
34
|
+
}
|
@@ -0,0 +1,109 @@
|
|
1
|
+
// --------------------------------------------------------------------------------
|
2
|
+
// Image Replacement: apply a background image and hide the original content
|
3
|
+
// --------------------------------------------------------------------------------
|
4
|
+
|
5
|
+
$default-ir-technique: indent !default;
|
6
|
+
|
7
|
+
// NOTE: pseudo and padding options need to be applied to inline elements,
|
8
|
+
// instead of their parent block level element if they are intended to be linked
|
9
|
+
// <h1><a href="#">Title Text Here</a></h1><!-- style the a, not the h1 -->
|
10
|
+
|
11
|
+
// -------------------------------------------------------------------------------- Aliases
|
12
|
+
|
13
|
+
// http://www.mezzoblue.com/tests/revised-image-replacement/#phark
|
14
|
+
@mixin image-replacement-indent($image, $width, $height) {
|
15
|
+
@include image-replacement($image, $width, $height, indent);
|
16
|
+
}
|
17
|
+
|
18
|
+
// http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/
|
19
|
+
@mixin image-replacement-overflow($image, $width, $height) {
|
20
|
+
@include image-replacement($image, $width, $height, overflow);
|
21
|
+
}
|
22
|
+
|
23
|
+
// http://nicolasgallagher.com/css-image-replacement-with-pseudo-elements/
|
24
|
+
@mixin image-replacement-pseudo($image, $width, $height) {
|
25
|
+
@include image-replacement($image, $width, $height, pseudo);
|
26
|
+
}
|
27
|
+
|
28
|
+
@mixin image-replacement-padding($image, $width, $height) {
|
29
|
+
@include image-replacement($image, $width, $height, padding);
|
30
|
+
}
|
31
|
+
|
32
|
+
// -------------------------------------------------------------------------------- Master Mixin
|
33
|
+
|
34
|
+
// $type options: pseudo, overflow, padding, fontsize, indent
|
35
|
+
@mixin image-replacement($image, $width, $height, $type: $default-ir-technique) {
|
36
|
+
@if $type != padding {
|
37
|
+
width: $width;
|
38
|
+
height: $height;
|
39
|
+
}
|
40
|
+
|
41
|
+
@if $type == pseudo {
|
42
|
+
padding: 0;
|
43
|
+
margin: 0;
|
44
|
+
overflow: hidden;
|
45
|
+
display: block;
|
46
|
+
|
47
|
+
&:before {
|
48
|
+
content: url($image);
|
49
|
+
display: inline-block;
|
50
|
+
font-size: 0;
|
51
|
+
line-height: 0;
|
52
|
+
}
|
53
|
+
} @else {
|
54
|
+
background: url($image) no-repeat;
|
55
|
+
@if $type == overflow {
|
56
|
+
text-indent: 100%;
|
57
|
+
white-space: nowrap;
|
58
|
+
overflow: hidden;
|
59
|
+
} @else if $type == padding {
|
60
|
+
width: 0;
|
61
|
+
height: 0;
|
62
|
+
padding-top: $height;
|
63
|
+
padding-left: $width;
|
64
|
+
overflow: hidden;
|
65
|
+
} @else { // indent
|
66
|
+
text-indent: -100em;
|
67
|
+
}
|
68
|
+
}
|
69
|
+
}
|
70
|
+
|
71
|
+
@mixin linked-image-replacement($width, $height, $image, $type: default) {
|
72
|
+
@include image-replacement($width, $height, $image, $type);
|
73
|
+
|
74
|
+
@if $type != pseudo and $type != padding {
|
75
|
+
a { display: block; width: 100%; height: 100% }
|
76
|
+
}
|
77
|
+
}
|
78
|
+
|
79
|
+
// --------------------------------------------------------------------------------
|
80
|
+
// SVG background: use background-size to hide the SVG background from older browsers
|
81
|
+
// --------------------------------------------------------------------------------
|
82
|
+
|
83
|
+
// This mixin expects the file to already have the `url()` around it,
|
84
|
+
// this allows it to be used with Compass helper functions like `image-url()`
|
85
|
+
@mixin svg-background($svg, $styles: 0 0 / auto auto no-repeat) {
|
86
|
+
background: $svg $styles;
|
87
|
+
}
|
88
|
+
|
89
|
+
// --------------------------------------------------------------------------------
|
90
|
+
// Center and clip an image to specific dimensions
|
91
|
+
// --------------------------------------------------------------------------------
|
92
|
+
|
93
|
+
@mixin center-clip ($parent-dims, $clip-dims) {
|
94
|
+
$parent-width: nth($parent-dims, 1);
|
95
|
+
$parent-height: nth($parent-dims, 2);
|
96
|
+
|
97
|
+
$clip-width: nth($clip-dims, 1);
|
98
|
+
$clip-height: nth($clip-dims, 2);
|
99
|
+
|
100
|
+
$top: ($parent-height - $clip-height) / 2;
|
101
|
+
$left: ($parent-width - $clip-width) / 2;
|
102
|
+
$bottom: $parent-height - $top;
|
103
|
+
$right: $parent-width - $left;
|
104
|
+
|
105
|
+
clip: rect($top $right $bottom $left);
|
106
|
+
top: -$top;
|
107
|
+
left: -$left;
|
108
|
+
}
|
109
|
+
|
@@ -0,0 +1,14 @@
|
|
1
|
+
@function even-spacing($val) {
|
2
|
+
$val: $val / 2;
|
3
|
+
@if $val == ceil($val) or unit($val) != px {
|
4
|
+
@return $val;
|
5
|
+
} @else {
|
6
|
+
@if $val > 0 {
|
7
|
+
@return ceil($val) ceil($val) floor($val) floor($val);
|
8
|
+
} @else {
|
9
|
+
// negative numbers have to be reversed otherwise they won't match up properly with positive numbers
|
10
|
+
// `-5px -5px -4px -4px` would get matched up with `4px 4px 5px 5px` otherwise
|
11
|
+
@return floor($val) floor($val) ceil($val) ceil($val);
|
12
|
+
}
|
13
|
+
}
|
14
|
+
}
|
@@ -0,0 +1,11 @@
|
|
1
|
+
description "Please provide description here"
|
2
|
+
|
3
|
+
# Make sure you list all the project template files here in the manifest.
|
4
|
+
#stylesheet 'screen.sass', :media => 'screen, projection'
|
5
|
+
|
6
|
+
#image 'dialog-boxes/spritemap.svg'
|
7
|
+
#image 'dialog-boxes/spritemap.png'
|
8
|
+
|
9
|
+
#require '../dialog-boxes'
|
10
|
+
|
11
|
+
#stylesheet '../../stylesheets/cimma/baseline/_core.scss', :to => 'cimma/_test.scss'
|
metadata
ADDED
@@ -0,0 +1,83 @@
|
|
1
|
+
--- !ruby/object:Gem::Specification
|
2
|
+
name: translucencss
|
3
|
+
version: !ruby/object:Gem::Version
|
4
|
+
version: 0.1.1
|
5
|
+
prerelease:
|
6
|
+
platform: ruby
|
7
|
+
authors:
|
8
|
+
- Chris Siepker
|
9
|
+
autorequire:
|
10
|
+
bindir: bin
|
11
|
+
cert_chain: []
|
12
|
+
date: 2013-05-30 00:00:00.000000000 Z
|
13
|
+
dependencies:
|
14
|
+
- !ruby/object:Gem::Dependency
|
15
|
+
name: compass
|
16
|
+
requirement: !ruby/object:Gem::Requirement
|
17
|
+
none: false
|
18
|
+
requirements:
|
19
|
+
- - ! '>='
|
20
|
+
- !ruby/object:Gem::Version
|
21
|
+
version: '0.11'
|
22
|
+
type: :runtime
|
23
|
+
prerelease: false
|
24
|
+
version_requirements: !ruby/object:Gem::Requirement
|
25
|
+
none: false
|
26
|
+
requirements:
|
27
|
+
- - ! '>='
|
28
|
+
- !ruby/object:Gem::Version
|
29
|
+
version: '0.11'
|
30
|
+
description: TranslucenCSS doesn't generate anything that you don't absolutely need
|
31
|
+
to get the desired effect, leaving you free to style your elements without constantly
|
32
|
+
undoing
|
33
|
+
email: chris@cimmanon.org
|
34
|
+
executables: []
|
35
|
+
extensions: []
|
36
|
+
extra_rdoc_files: []
|
37
|
+
files:
|
38
|
+
- lib/translucencss.rb
|
39
|
+
- stylesheets/_translucencss.scss
|
40
|
+
- stylesheets/translucencss/core/_tables.scss
|
41
|
+
- stylesheets/translucencss/core/_forms.scss
|
42
|
+
- stylesheets/translucencss/core/_lists.scss
|
43
|
+
- stylesheets/translucencss/core/_font-stacks.scss
|
44
|
+
- stylesheets/translucencss/core/_headlines.scss
|
45
|
+
- stylesheets/translucencss/core/_typography.scss
|
46
|
+
- stylesheets/translucencss/_util.scss
|
47
|
+
- stylesheets/translucencss/_css3.scss
|
48
|
+
- stylesheets/translucencss/_core.scss
|
49
|
+
- stylesheets/translucencss/util/_clearfix.scss
|
50
|
+
- stylesheets/translucencss/util/_colors.scss
|
51
|
+
- stylesheets/translucencss/util/_ie.scss
|
52
|
+
- stylesheets/translucencss/util/_images.scss
|
53
|
+
- stylesheets/translucencss/util/_ellipsis.scss
|
54
|
+
- stylesheets/translucencss/util/_spacing.scss
|
55
|
+
- stylesheets/translucencss/css3/_object-fit.scss
|
56
|
+
- stylesheets/translucencss/css3/_flexbox.scss
|
57
|
+
- stylesheets/translucencss/css3/_flexbox_old.scss
|
58
|
+
- templates/project/manifest.rb
|
59
|
+
homepage: http://www.cimmanon.org/
|
60
|
+
licenses: []
|
61
|
+
post_install_message:
|
62
|
+
rdoc_options: []
|
63
|
+
require_paths:
|
64
|
+
- lib
|
65
|
+
required_ruby_version: !ruby/object:Gem::Requirement
|
66
|
+
none: false
|
67
|
+
requirements:
|
68
|
+
- - ! '>='
|
69
|
+
- !ruby/object:Gem::Version
|
70
|
+
version: '0'
|
71
|
+
required_rubygems_version: !ruby/object:Gem::Requirement
|
72
|
+
none: false
|
73
|
+
requirements:
|
74
|
+
- - ! '>='
|
75
|
+
- !ruby/object:Gem::Version
|
76
|
+
version: '0'
|
77
|
+
requirements: []
|
78
|
+
rubyforge_project:
|
79
|
+
rubygems_version: 1.8.23
|
80
|
+
signing_key:
|
81
|
+
specification_version: 3
|
82
|
+
summary: ! 'TranslucenCSS: common CSS patterns abstracted as mixins and variables'
|
83
|
+
test_files: []
|