translucencss 0.1.2 → 0.1.3

Sign up to get free protection for your applications and to get access to all the features.
Files changed (5) hide show
  1. data/stylesheets/translucencss/_util.scss +2 -0
  2. data/stylesheets/translucencss/util/_alignment.scss +33 -0
  3. data/stylesheets/translucencss/util/_aspect-ratio.scss +6 -0
  4. data/stylesheets/translucencss/util/_ellipsis.scss +2 -1
  5. metadata +3 -1
data/stylesheets/translucencss/_util.scss CHANGED
@@ -1,3 +1,5 @@
1
+ @import "util/alignment";
2
+ @import "util/aspect-ratio";
1
3
  @import "util/colors";
2
4
  @import "util/clearfix";
3
5
  @import "util/ie";
data/stylesheets/translucencss/util/_alignment.scss ADDED
@@ -0,0 +1,33 @@
1
+ @import "compass/css3/transform";
2
+
3
+ // http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/
4
+ @mixin vertical-center($position: relative) {
5
+ position: $position;
6
+ top: 50%;
7
+ @include transform(translateY(-50%));
8
+ }
9
+
10
+ @mixin block-centering {
11
+ margin-left: auto;
12
+ margin-right: auto;
13
+ }
14
+
15
+ // http://www.sitepoint.com/css-extend-full-width-bars/
16
+ @mixin full-width-overflow($align: center, $fallback: -50em) {
17
+ margin-left: $fallback;
18
+ margin-left: -50vw;
19
+ margin-right: $fallback;
20
+ margin-right: -50vw;
21
+
22
+ text-align: $align;
23
+
24
+ @if $align == left or $align == justify {
25
+ padding-left: $fallback;
26
+ padding-left: -50vw;
27
+ }
28
+
29
+ @if $align == right or $align == justify {
30
+ padding-right: $fallback;
31
+ padding-right: -50vw;
32
+ }
33
+ }
data/stylesheets/translucencss/util/_aspect-ratio.scss ADDED
@@ -0,0 +1,6 @@
1
+ // @ratio: 3 / 4 | 75%
2
+ @mixin aspect-ratio($ratio) {
3
+ content: '';
4
+ display: block;
5
+ padding-bottom: if(unitless($ratio), percentage($ratio), $ratio);
6
+ }
data/stylesheets/translucencss/util/_ellipsis.scss CHANGED
@@ -2,7 +2,8 @@
2
2
 
3
3
  $text-overflow-support: not webkit, not moz, o, not ms, not khtml;
4
4
 
5
- @mixin single-line-ellipsis {
5
+ @mixin single-line-ellipsis($width: null) {
6
+ max-width: $width;
6
7
  text-overflow: ellipsis;
7
8
  white-space: nowrap;
8
9
  overflow: hidden;
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: translucencss
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.1.2
4
+ version: 0.1.3
5
5
  prerelease:
6
6
  platform: ruby
7
7
  authors:
@@ -51,7 +51,9 @@ files:
51
51
  - stylesheets/translucencss/util/_ie.scss
52
52
  - stylesheets/translucencss/util/_images.scss
53
53
  - stylesheets/translucencss/util/_ellipsis.scss
54
+ - stylesheets/translucencss/util/_alignment.scss
54
55
  - stylesheets/translucencss/util/_spacing.scss
56
+ - stylesheets/translucencss/util/_aspect-ratio.scss
55
57
  - stylesheets/translucencss/css3/_object-fit.scss
56
58
  - stylesheets/translucencss/css3/_flexbox.scss
57
59
  - stylesheets/translucencss/css3/_flexbox_old.scss