|
8 | 8 |
|
9 | 9 | // Webkit-style focus |
10 | 10 | // ------------------ |
11 | | -.tab-focus() { |
| 11 | +@mixintab-focus() { |
12 | 12 | // Default |
13 | 13 | outline: thin dotted #333; |
14 | 14 | // Webkit |
|
18 | 18 |
|
19 | 19 | // Center-align a block level element |
20 | 20 | // ---------------------------------- |
21 | | -.center-block() { |
| 21 | +@mixincenter-block() { |
22 | 22 | display: block; |
23 | 23 | margin-left: auto; |
24 | 24 | margin-right: auto; |
25 | 25 | } |
26 | 26 |
|
27 | | -// IE7 inline-block |
28 | | -// ---------------- |
29 | | -.ie7-inline-block() { |
30 | | - *display: inline; /* IE7 inline-block hack */ |
31 | | - *zoom: 1; |
32 | | -} |
33 | | - |
34 | | -// IE7 likes to collapse whitespace on either side of the inline-block elements. |
35 | | -// Ems because we're attempting to match the width of a space character. Left |
36 | | -// version is for form buttons, which typically come after other elements, and |
37 | | -// right version is for icons, which come before. Applying both is ok, but it will |
38 | | -// mean that space between those elements will be .6em (~2 space characters) in IE7, |
39 | | -// instead of the 1 space in other browsers. |
40 | | -.ie7-restore-left-whitespace() { |
41 | | - *margin-left: .3em; |
42 | | - |
43 | | - &:first-child { |
44 | | - *margin-left: 0; |
45 | | - } |
46 | | -} |
47 | | - |
48 | | -.ie7-restore-right-whitespace() { |
49 | | - *margin-right: .3em; |
50 | | -} |
51 | | - |
52 | 27 | // Sizing shortcuts |
53 | 28 | // ------------------------- |
54 | | -.size(@height, @width) { |
55 | | - width: @width; |
56 | | - height: @height; |
| 29 | +@mixinsize($height, $width) { |
| 30 | + width: $width; |
| 31 | + height: $height; |
57 | 32 | } |
58 | | -.square(@size) { |
59 | | - .size(@size, @size); |
| 33 | + |
| 34 | +@mixin square($size) { |
| 35 | + @include size($size, $size); |
60 | 36 | } |
61 | 37 |
|
62 | 38 | // Placeholder text |
63 | 39 | // ------------------------- |
64 | | -.placeholder(@color) { |
| 40 | +@mixinplaceholder($color) { |
65 | 41 | &:-moz-placeholder { |
66 | | - color: @color; |
| 42 | + color: $color; |
67 | 43 | } |
68 | 44 | &:-ms-input-placeholder { |
69 | | - color: @color; |
| 45 | + color: $color; |
70 | 46 | } |
71 | 47 | &::-webkit-input-placeholder { |
72 | | - color: @color; |
| 48 | + color: $color; |
73 | 49 | } |
74 | 50 | } |
75 | 51 |
|
76 | 52 | // Text overflow |
77 | 53 | // ------------------------- |
78 | 54 | // Requires inline-block or block for proper styling |
79 | | -.text-overflow() { |
| 55 | +@mixintext-overflow() { |
80 | 56 | overflow: hidden; |
81 | 57 | text-overflow: ellipsis; |
82 | 58 | white-space: nowrap; |
|
85 | 61 | // CSS image replacement |
86 | 62 | // ------------------------- |
87 | 63 | // Source: https://github.com/h5bp/html5-boilerplate/commit/aa0396eae757 |
88 | | -.hide-text { |
| 64 | +@mixinhide-text { |
89 | 65 | font: 0/0 a; |
90 | 66 | color: transparent; |
91 | 67 | text-shadow: none; |
|
98 | 74 | // ----------------------------------- |
99 | 75 | // Používáme např. v .out-of-box--blur |
100 | 76 |
|
101 | | -.out-of-box-white-text() { |
| 77 | +@mixinout-of-box-white-text() { |
102 | 78 |
|
103 | 79 | &, |
104 | 80 | h1, |
|
0 commit comments