yamlcss 1.0.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (213) hide show
  1. checksums.yaml +7 -0
  2. data/.travis.yml +12 -0
  3. data/Gemfile +10 -0
  4. data/Gemfile.lock +56 -0
  5. data/LICENSE.txt +59 -0
  6. data/Rakefile +23 -0
  7. data/Readme.md +120 -0
  8. data/VERSIONS.md +5 -0
  9. data/bin/yamlcss +6 -0
  10. data/lib/yamlcss.rb +22 -0
  11. data/lib/yamlcss/engine.rb +7 -0
  12. data/lib/yamlcss/generator.rb +84 -0
  13. data/lib/yamlcss/version.rb +4 -0
  14. data/vendor/assets/stylesheets/_iehacks.scss +3 -0
  15. data/vendor/assets/stylesheets/_yaml.scss +3 -0
  16. data/yaml/Gruntfile.js +199 -0
  17. data/yaml/License.txt +36 -0
  18. data/yaml/Readme.md +64 -0
  19. data/yaml/changelog.md +307 -0
  20. data/yaml/config.rb +25 -0
  21. data/yaml/demos/css/custom-grids.css +27 -0
  22. data/yaml/demos/css/flexible-columns.css +26 -0
  23. data/yaml/demos/css/flexible-grids.css +26 -0
  24. data/yaml/demos/css/rtl-support.css +31 -0
  25. data/yaml/demos/css/screen/screen-custom-grids.css +41 -0
  26. data/yaml/demos/css/screen/screen-rtl-support.css +182 -0
  27. data/yaml/demos/custom-grid.html +129 -0
  28. data/yaml/demos/flexible-columns.html +124 -0
  29. data/yaml/demos/flexible-grid.html +142 -0
  30. data/yaml/demos/rtl-support.html +127 -0
  31. data/yaml/docs/assets/css/icons/external_link.png +0 -0
  32. data/yaml/docs/assets/css/icons/hcalendar.png +0 -0
  33. data/yaml/docs/assets/css/icons/hcard.png +0 -0
  34. data/yaml/docs/assets/css/icons/icon-geo.png +0 -0
  35. data/yaml/docs/assets/css/icons/icon-hatom.png +0 -0
  36. data/yaml/docs/assets/css/icons/icon-haudio.png +0 -0
  37. data/yaml/docs/assets/css/icons/icon-hcalendar-add.png +0 -0
  38. data/yaml/docs/assets/css/icons/icon-hcalendar-download.png +0 -0
  39. data/yaml/docs/assets/css/icons/icon-hcalendar.png +0 -0
  40. data/yaml/docs/assets/css/icons/icon-hcard-add.png +0 -0
  41. data/yaml/docs/assets/css/icons/icon-hcard-download.png +0 -0
  42. data/yaml/docs/assets/css/icons/icon-hcard.png +0 -0
  43. data/yaml/docs/assets/css/icons/icon-hresume.png +0 -0
  44. data/yaml/docs/assets/css/icons/icon-rel-tag.png +0 -0
  45. data/yaml/docs/assets/css/icons/icon-xfn.png +0 -0
  46. data/yaml/docs/assets/css/icons/xfn/xfn-child.png +0 -0
  47. data/yaml/docs/assets/css/icons/xfn/xfn-colleague-met.png +0 -0
  48. data/yaml/docs/assets/css/icons/xfn/xfn-colleague.png +0 -0
  49. data/yaml/docs/assets/css/icons/xfn/xfn-friend-met.png +0 -0
  50. data/yaml/docs/assets/css/icons/xfn/xfn-friend.png +0 -0
  51. data/yaml/docs/assets/css/icons/xfn/xfn-me.png +0 -0
  52. data/yaml/docs/assets/css/icons/xfn/xfn-parent.png +0 -0
  53. data/yaml/docs/assets/css/icons/xfn/xfn-small.png +0 -0
  54. data/yaml/docs/assets/css/icons/xfn/xfn-spouse.png +0 -0
  55. data/yaml/docs/assets/css/icons/xfn/xfn-sweetheart-met.png +0 -0
  56. data/yaml/docs/assets/css/icons/xfn/xfn-sweetheart.png +0 -0
  57. data/yaml/docs/assets/css/layout-min.css +3 -0
  58. data/yaml/docs/assets/css/layout.css +3262 -0
  59. data/yaml/docs/assets/images/demo-custom-grid.png +0 -0
  60. data/yaml/docs/assets/images/demo-flex-column.png +0 -0
  61. data/yaml/docs/assets/images/demo-flex-grid.png +0 -0
  62. data/yaml/docs/assets/images/demo-rtl.png +0 -0
  63. data/yaml/docs/assets/images/yaml-solo-transparent-small.png +0 -0
  64. data/yaml/docs/assets/images/yaml-solo-transparent.png +0 -0
  65. data/yaml/docs/assets/js/domscript.js +209 -0
  66. data/yaml/docs/assets/js/jquery.gridbuilder.js +131 -0
  67. data/yaml/docs/assets/js/snippet/ZeroClipboard.swf +0 -0
  68. data/yaml/docs/assets/js/snippet/jquery.snippet.css +116 -0
  69. data/yaml/docs/assets/js/snippet/jquery.snippet.js +782 -0
  70. data/yaml/docs/assets/js/snippet/jquery.snippet.min.css +40 -0
  71. data/yaml/docs/assets/js/snippet/jquery.snippet.min.js +12 -0
  72. data/yaml/docs/assets/js/snippet/snippet.css +296 -0
  73. data/yaml/docs/index.html +3845 -0
  74. data/yaml/lib/html5shiv/html5shiv-printshiv.js +11 -0
  75. data/yaml/lib/html5shiv/html5shiv.js +8 -0
  76. data/yaml/lib/jquery-1.10.1.min.js +6 -0
  77. data/yaml/lib/jquery-migrate-1.2.1.min.js +2 -0
  78. data/yaml/package.json +20 -0
  79. data/yaml/sass/docs/assets/css/_screen.scss +786 -0
  80. data/yaml/sass/docs/assets/css/layout.scss +28 -0
  81. data/yaml/sass/static-build/add-ons/accessible-tabs/tabs.scss +15 -0
  82. data/yaml/sass/static-build/add-ons/microformats/microformats.scss +18 -0
  83. data/yaml/sass/static-build/add-ons/rtl-support/core/base-rtl.scss +20 -0
  84. data/yaml/sass/static-build/add-ons/rtl-support/forms/gray-theme-rtl.scss +16 -0
  85. data/yaml/sass/static-build/add-ons/rtl-support/navigation/hlist-rtl.scss +18 -0
  86. data/yaml/sass/static-build/add-ons/rtl-support/navigation/vlist-rtl.scss +18 -0
  87. data/yaml/sass/static-build/add-ons/rtl-support/screen/typography-rtl.scss +16 -0
  88. data/yaml/sass/static-build/core/base.scss +19 -0
  89. data/yaml/sass/static-build/core/iehacks.scss +19 -0
  90. data/yaml/sass/static-build/forms/gray-theme.scss +14 -0
  91. data/yaml/sass/static-build/navigation/hlist.scss +16 -0
  92. data/yaml/sass/static-build/navigation/vlist.scss +16 -0
  93. data/yaml/sass/static-build/print/print.scss +15 -0
  94. data/yaml/sass/static-build/screen/grid-960gs-12.scss +15 -0
  95. data/yaml/sass/static-build/screen/grid-960gs-16.scss +15 -0
  96. data/yaml/sass/static-build/screen/grid-blueprint.scss +15 -0
  97. data/yaml/sass/static-build/screen/grid-fluid-12col.scss +15 -0
  98. data/yaml/sass/static-build/screen/screen-FULLPAGE-layout.scss +15 -0
  99. data/yaml/sass/static-build/screen/screen-PAGE-layout.scss +15 -0
  100. data/yaml/sass/static-build/screen/typography.scss +16 -0
  101. data/yaml/sass/yaml-sass/_yaml-var-globals.scss +39 -0
  102. data/yaml/sass/yaml-sass/_yaml-var-typography.scss +80 -0
  103. data/yaml/sass/yaml-sass/add-ons/accessible-tabs/_tabs.scss +139 -0
  104. data/yaml/sass/yaml-sass/add-ons/accessible-tabs/jquery.tabs.js +266 -0
  105. data/yaml/sass/yaml-sass/add-ons/microformats/_microformats.scss +179 -0
  106. data/yaml/sass/yaml-sass/add-ons/microformats/icons/external_link.png +0 -0
  107. data/yaml/sass/yaml-sass/add-ons/microformats/icons/hcalendar.png +0 -0
  108. data/yaml/sass/yaml-sass/add-ons/microformats/icons/hcard.png +0 -0
  109. data/yaml/sass/yaml-sass/add-ons/microformats/icons/icon-geo.png +0 -0
  110. data/yaml/sass/yaml-sass/add-ons/microformats/icons/icon-hatom.png +0 -0
  111. data/yaml/sass/yaml-sass/add-ons/microformats/icons/icon-haudio.png +0 -0
  112. data/yaml/sass/yaml-sass/add-ons/microformats/icons/icon-hcalendar-add.png +0 -0
  113. data/yaml/sass/yaml-sass/add-ons/microformats/icons/icon-hcalendar-download.png +0 -0
  114. data/yaml/sass/yaml-sass/add-ons/microformats/icons/icon-hcalendar.png +0 -0
  115. data/yaml/sass/yaml-sass/add-ons/microformats/icons/icon-hcard-add.png +0 -0
  116. data/yaml/sass/yaml-sass/add-ons/microformats/icons/icon-hcard-download.png +0 -0
  117. data/yaml/sass/yaml-sass/add-ons/microformats/icons/icon-hcard.png +0 -0
  118. data/yaml/sass/yaml-sass/add-ons/microformats/icons/icon-hresume.png +0 -0
  119. data/yaml/sass/yaml-sass/add-ons/microformats/icons/icon-rel-tag.png +0 -0
  120. data/yaml/sass/yaml-sass/add-ons/microformats/icons/icon-xfn.png +0 -0
  121. data/yaml/sass/yaml-sass/add-ons/microformats/icons/xfn/xfn-child.png +0 -0
  122. data/yaml/sass/yaml-sass/add-ons/microformats/icons/xfn/xfn-colleague-met.png +0 -0
  123. data/yaml/sass/yaml-sass/add-ons/microformats/icons/xfn/xfn-colleague.png +0 -0
  124. data/yaml/sass/yaml-sass/add-ons/microformats/icons/xfn/xfn-friend-met.png +0 -0
  125. data/yaml/sass/yaml-sass/add-ons/microformats/icons/xfn/xfn-friend.png +0 -0
  126. data/yaml/sass/yaml-sass/add-ons/microformats/icons/xfn/xfn-me.png +0 -0
  127. data/yaml/sass/yaml-sass/add-ons/microformats/icons/xfn/xfn-parent.png +0 -0
  128. data/yaml/sass/yaml-sass/add-ons/microformats/icons/xfn/xfn-small.png +0 -0
  129. data/yaml/sass/yaml-sass/add-ons/microformats/icons/xfn/xfn-spouse.png +0 -0
  130. data/yaml/sass/yaml-sass/add-ons/microformats/icons/xfn/xfn-sweetheart-met.png +0 -0
  131. data/yaml/sass/yaml-sass/add-ons/microformats/icons/xfn/xfn-sweetheart.png +0 -0
  132. data/yaml/sass/yaml-sass/add-ons/rtl-support/core/_base-rtl.scss +177 -0
  133. data/yaml/sass/yaml-sass/add-ons/rtl-support/forms/_gray-theme-rtl.scss +34 -0
  134. data/yaml/sass/yaml-sass/add-ons/rtl-support/navigation/_hlist-rtl.scss +42 -0
  135. data/yaml/sass/yaml-sass/add-ons/rtl-support/navigation/_vlist-rtl.scss +45 -0
  136. data/yaml/sass/yaml-sass/add-ons/rtl-support/screen/_typography-rtl.scss +30 -0
  137. data/yaml/sass/yaml-sass/add-ons/syncheight/jquery.syncheight.js +112 -0
  138. data/yaml/sass/yaml-sass/core/_base.scss +15 -0
  139. data/yaml/sass/yaml-sass/core/_iehacks.scss +426 -0
  140. data/yaml/sass/yaml-sass/core/base-modules/_accessibility.scss +48 -0
  141. data/yaml/sass/yaml-sass/core/base-modules/_columns.scss +27 -0
  142. data/yaml/sass/yaml-sass/core/base-modules/_float-handling.scss +32 -0
  143. data/yaml/sass/yaml-sass/core/base-modules/_forms-core.scss +296 -0
  144. data/yaml/sass/yaml-sass/core/base-modules/_grids-core.scss +55 -0
  145. data/yaml/sass/yaml-sass/core/base-modules/_normalization.scss +165 -0
  146. data/yaml/sass/yaml-sass/core/base-modules/_print-core.scss +36 -0
  147. data/yaml/sass/yaml-sass/core/js/yaml-focusfix.js +70 -0
  148. data/yaml/sass/yaml-sass/forms/_gray-theme.scss +475 -0
  149. data/yaml/sass/yaml-sass/mixins/_yaml-mixins-core.scss +248 -0
  150. data/yaml/sass/yaml-sass/navigation/_hlist.scss +106 -0
  151. data/yaml/sass/yaml-sass/navigation/_vlist.scss +129 -0
  152. data/yaml/sass/yaml-sass/print/_print.scss +61 -0
  153. data/yaml/sass/yaml-sass/screen/_grid-960gs-12.scss +4 -0
  154. data/yaml/sass/yaml-sass/screen/_grid-960gs-16.scss +4 -0
  155. data/yaml/sass/yaml-sass/screen/_grid-blueprint.scss +4 -0
  156. data/yaml/sass/yaml-sass/screen/_grid-fluid-12col.scss +4 -0
  157. data/yaml/sass/yaml-sass/screen/_screen-FULLPAGE-layout.scss +171 -0
  158. data/yaml/sass/yaml-sass/screen/_screen-PAGE-layout.scss +165 -0
  159. data/yaml/sass/yaml-sass/screen/_typography.scss +485 -0
  160. data/yaml/yaml/add-ons/accessible-tabs/jquery.tabs.js +266 -0
  161. data/yaml/yaml/add-ons/accessible-tabs/tabs.css +136 -0
  162. data/yaml/yaml/add-ons/microformats/icons/external_link.png +0 -0
  163. data/yaml/yaml/add-ons/microformats/icons/hcalendar.png +0 -0
  164. data/yaml/yaml/add-ons/microformats/icons/hcard.png +0 -0
  165. data/yaml/yaml/add-ons/microformats/icons/icon-geo.png +0 -0
  166. data/yaml/yaml/add-ons/microformats/icons/icon-hatom.png +0 -0
  167. data/yaml/yaml/add-ons/microformats/icons/icon-haudio.png +0 -0
  168. data/yaml/yaml/add-ons/microformats/icons/icon-hcalendar-add.png +0 -0
  169. data/yaml/yaml/add-ons/microformats/icons/icon-hcalendar-download.png +0 -0
  170. data/yaml/yaml/add-ons/microformats/icons/icon-hcalendar.png +0 -0
  171. data/yaml/yaml/add-ons/microformats/icons/icon-hcard-add.png +0 -0
  172. data/yaml/yaml/add-ons/microformats/icons/icon-hcard-download.png +0 -0
  173. data/yaml/yaml/add-ons/microformats/icons/icon-hcard.png +0 -0
  174. data/yaml/yaml/add-ons/microformats/icons/icon-hresume.png +0 -0
  175. data/yaml/yaml/add-ons/microformats/icons/icon-rel-tag.png +0 -0
  176. data/yaml/yaml/add-ons/microformats/icons/icon-xfn.png +0 -0
  177. data/yaml/yaml/add-ons/microformats/icons/xfn/xfn-child.png +0 -0
  178. data/yaml/yaml/add-ons/microformats/icons/xfn/xfn-colleague-met.png +0 -0
  179. data/yaml/yaml/add-ons/microformats/icons/xfn/xfn-colleague.png +0 -0
  180. data/yaml/yaml/add-ons/microformats/icons/xfn/xfn-friend-met.png +0 -0
  181. data/yaml/yaml/add-ons/microformats/icons/xfn/xfn-friend.png +0 -0
  182. data/yaml/yaml/add-ons/microformats/icons/xfn/xfn-me.png +0 -0
  183. data/yaml/yaml/add-ons/microformats/icons/xfn/xfn-parent.png +0 -0
  184. data/yaml/yaml/add-ons/microformats/icons/xfn/xfn-small.png +0 -0
  185. data/yaml/yaml/add-ons/microformats/icons/xfn/xfn-spouse.png +0 -0
  186. data/yaml/yaml/add-ons/microformats/icons/xfn/xfn-sweetheart-met.png +0 -0
  187. data/yaml/yaml/add-ons/microformats/icons/xfn/xfn-sweetheart.png +0 -0
  188. data/yaml/yaml/add-ons/microformats/microformats.css +167 -0
  189. data/yaml/yaml/add-ons/rtl-support/core/base-rtl.css +167 -0
  190. data/yaml/yaml/add-ons/rtl-support/core/base-rtl.min.css +3 -0
  191. data/yaml/yaml/add-ons/rtl-support/forms/gray-theme-rtl.css +44 -0
  192. data/yaml/yaml/add-ons/rtl-support/navigation/hlist-rtl.css +48 -0
  193. data/yaml/yaml/add-ons/rtl-support/navigation/vlist-rtl.css +54 -0
  194. data/yaml/yaml/add-ons/rtl-support/screen/typography-rtl.css +38 -0
  195. data/yaml/yaml/add-ons/syncheight/jquery.syncheight.js +112 -0
  196. data/yaml/yaml/core/base.css +705 -0
  197. data/yaml/yaml/core/base.min.css +3 -0
  198. data/yaml/yaml/core/iehacks.css +468 -0
  199. data/yaml/yaml/core/iehacks.min.css +3 -0
  200. data/yaml/yaml/core/js/yaml-focusfix.js +70 -0
  201. data/yaml/yaml/forms/gray-theme.css +676 -0
  202. data/yaml/yaml/navigation/hlist.css +109 -0
  203. data/yaml/yaml/navigation/vlist.css +144 -0
  204. data/yaml/yaml/print/print.css +42 -0
  205. data/yaml/yaml/screen/grid-960gs-12.css +164 -0
  206. data/yaml/yaml/screen/grid-960gs-16.css +212 -0
  207. data/yaml/yaml/screen/grid-blueprint.css +308 -0
  208. data/yaml/yaml/screen/grid-fluid-12col.css +164 -0
  209. data/yaml/yaml/screen/screen-FULLPAGE-layout.css +184 -0
  210. data/yaml/yaml/screen/screen-PAGE-layout.css +196 -0
  211. data/yaml/yaml/screen/typography.css +486 -0
  212. data/yamlcss.gemspec +30 -0
  213. metadata +314 -0
@@ -0,0 +1,36 @@
1
+ @if $ym-base-print == true {
2
+
3
+ @if $ym-base-grids == true {
4
+ /**
5
+ * @section print adjustments for core modules
6
+ *
7
+ * (en) float containment for grids. Uses display:table to avoid bugs in FF & IE
8
+ * (de) Floats in Grids einschließen. Verwendet display:table, um Darstellungsprobleme im FF & IE zu vermeiden
9
+ *
10
+ * @bugfix
11
+ * @since 3.0
12
+ * @affected FF2.0, FF3.0, IE7
13
+ * @css-for all browsers
14
+ * @valid yes
15
+ */
16
+ .ym-grid > .ym-gl,
17
+ .ym-grid > .ym-gr {
18
+ overflow:visible;
19
+ display:table;
20
+ table-layout: fixed
21
+ }
22
+ }
23
+
24
+ /* (en) make .ym-print class visible */
25
+ /* (de) .ym-print-Klasse sichtbar schalten */
26
+ .ym-print {
27
+ position:static;
28
+ left:0;
29
+ }
30
+
31
+ /* (en) generic class to hide elements for print */
32
+ /* (de) Allgemeine CSS Klasse, um beliebige Elemente in der Druckausgabe auszublenden */
33
+ .ym-noprint {
34
+ display:none !important;
35
+ }
36
+ }
@@ -0,0 +1,70 @@
1
+ /**
2
+ * "Yet Another Multicolumn Layout" - YAML CSS Framework
3
+ *
4
+ * (en) Workaround for IE8 und Webkit browsers to fix focus problems when using skiplinks
5
+ * (de) Workaround für IE8 und Webkit browser, um den Focus zu korrigieren, bei Verwendung von Skiplinks
6
+ *
7
+ * @note inspired by Paul Ratcliffe's article
8
+ * http://www.communis.co.uk/blog/2009-06-02-skip-links-chrome-safari-and-added-wai-aria
9
+ * Many thanks to Mathias Schäfer (http://molily.de/) for his code improvements
10
+ *
11
+ * @copyright © 2005-2013, Dirk Jesse
12
+ * @license CC-BY 2.0 (http://creativecommons.org/licenses/by/2.0/),
13
+ * YAML-CDL (http://www.yaml.de/license.html)
14
+ * @link http://www.yaml.de
15
+ * @package yaml
16
+ * @version 4.0+
17
+ */
18
+
19
+ (function () {
20
+ var YAML_focusFix = {
21
+ skipClass : 'ym-skip',
22
+
23
+ init : function () {
24
+ var userAgent = navigator.userAgent.toLowerCase();
25
+ var is_webkit = userAgent.indexOf('webkit') > -1;
26
+ var is_ie = userAgent.indexOf('msie') > -1;
27
+
28
+ if (is_webkit || is_ie) {
29
+ var body = document.body,
30
+ handler = YAML_focusFix.click;
31
+ if (body.addEventListener) {
32
+ body.addEventListener('click', handler, false);
33
+ } else if (body.attachEvent) {
34
+ body.attachEvent('onclick', handler);
35
+ }
36
+ }
37
+ },
38
+
39
+ trim : function (str) {
40
+ return str.replace(/^\s\s*/, '').replace(/\s\s*$/, '');
41
+ },
42
+
43
+ click : function (e) {
44
+ e = e || window.event;
45
+ var target = e.target || e.srcElement;
46
+ var a = target.className.split(' ');
47
+
48
+ for (var i=0; i < a.length; i++) {
49
+ var cls = YAML_focusFix.trim(a[i]);
50
+ if ( cls === YAML_focusFix.skipClass) {
51
+ YAML_focusFix.focus(target);
52
+ break;
53
+ }
54
+ }
55
+ },
56
+
57
+ focus : function (link) {
58
+ if (link.href) {
59
+ var href = link.href,
60
+ id = href.substr(href.indexOf('#') + 1),
61
+ target = document.getElementById(id);
62
+ if (target) {
63
+ target.setAttribute("tabindex", "-1");
64
+ target.focus();
65
+ }
66
+ }
67
+ }
68
+ };
69
+ YAML_focusFix.init();
70
+ })();
@@ -0,0 +1,475 @@
1
+ @import "../yaml-var-globals";
2
+ @import "../mixins/yaml-mixins-core";
3
+
4
+ @media screen {
5
+ .ym-form {
6
+ background:#f4f4f4;
7
+ border:2px #fff solid;
8
+ margin: 0 0 1.5em 0;
9
+ @include ym-box-shadow(0,0,4px,#ddd);
10
+
11
+ fieldset {
12
+ position:static;
13
+ background:transparent;
14
+ margin: 0.75em 0 0.75em 0;
15
+ padding: 0 0.5em;
16
+ }
17
+
18
+ legend {
19
+ background:transparent;
20
+ color:#000;
21
+ font-size:1.2em;
22
+ line-height:1.25em;
23
+ font-weight:bold;
24
+ padding:0 0.5em;
25
+ }
26
+
27
+ label,
28
+ .ym-label {
29
+ color: #666;
30
+ line-height: 1.5;
31
+ padding-top: 0.25em;
32
+ }
33
+
34
+ .ym-fbox {
35
+ padding: 0 1em;
36
+ margin: 1em 0 0.5em 0;
37
+ }
38
+
39
+ .ym-fbox-footer {
40
+ background: #ececec;
41
+ border-top: 1px #e0e0e0 solid;
42
+ padding: 1.5em 1em;
43
+ margin: 0;
44
+ }
45
+
46
+ .ym-fbox + .ym-fbox {
47
+ margin: 0.5em 0;
48
+ }
49
+
50
+ .ym-fbox:last-child {
51
+ margin-bottom: 1em;
52
+ }
53
+
54
+ .ym-fbox + .ym-fbox-footer {
55
+ margin: 1em 0 0 0;
56
+ }
57
+
58
+ .ym-fbox :last-child,
59
+ .ym-fbox-footer :last-child {
60
+ margin-bottom: 0;
61
+ }
62
+
63
+ .ym-fbox-heading {
64
+ font-size: 1em;
65
+ font-size: 100%;
66
+ color: #000;
67
+ margin: 1em;
68
+ }
69
+
70
+ .ym-fbox-check:focus + label {
71
+ color:#000;
72
+ }
73
+
74
+ .ym-gbox-left {
75
+ padding: 0 4px 0 0;
76
+ }
77
+ .ym-gbox-right {
78
+ padding: 0 0 0 4px;
79
+ }
80
+ .ym-gbox {
81
+ padding: 0 2px 0 2px;
82
+ }
83
+ }
84
+
85
+ /**
86
+ * @section styling form elements
87
+ *
88
+ */
89
+
90
+ .ym-form {
91
+ input,
92
+ textarea,
93
+ select {
94
+ border:1px solid #ddd;
95
+ line-height: 1em;
96
+ font-family:Arial, Helvetica, sans-serif;
97
+ @include ym-box-shadow(0,0,4px,#eee,inset);
98
+ }
99
+
100
+ input,
101
+ textarea {
102
+ padding: 4px 0.3em;
103
+ }
104
+
105
+ select {
106
+ padding: 3px 2px 3px 1px;
107
+ }
108
+
109
+ input:focus,
110
+ select:focus,
111
+ textarea:focus,
112
+ input:hover,
113
+ select:hover,
114
+ textarea:hover,
115
+ input:active,
116
+ select:active,
117
+ textarea:active {
118
+ border:1px #888 solid;
119
+ background:#fff;
120
+ }
121
+
122
+ optgroup {
123
+ font-family:Arial, Helvetica, sans-serif;
124
+ font-style:normal;
125
+ font-weight:bold;
126
+ }
127
+
128
+ .ym-fbox-check input,
129
+ input[type="image"],
130
+ input[type="radio"],
131
+ input[type="checkbox"] {
132
+ border: 0 none !important;
133
+ background: transparent !important;
134
+ }
135
+
136
+ .ym-message {
137
+ color:#666;
138
+ margin-bottom: 0.5em;
139
+ }
140
+ .ym-required {
141
+ color:#800;
142
+ font-weight: bold;
143
+ }
144
+
145
+ // valid & invalid state
146
+ input:valid,
147
+ textarea:valid { background-color: #fff; }
148
+ input:invalid,
149
+ textarea:invalid { background-color: #fdd; }
150
+
151
+ .ym-error {
152
+ label {
153
+ color: #800;
154
+ font-weight: normal;
155
+ }
156
+ input,
157
+ select,
158
+ textarea {
159
+ border: 1px #800 solid;
160
+ }
161
+ input:hover,
162
+ input:focus,
163
+ select:hover,
164
+ select:focus,
165
+ textarea:hover,
166
+ textarea:focus {
167
+ border: 1px #800 solid !important;
168
+ }
169
+ .ym-message {
170
+ color: #800;
171
+ font-weight: bold;
172
+ margin-top: 0;
173
+ }
174
+ }
175
+ }
176
+
177
+ /**
178
+ * @section Buttons
179
+ * inspired from: Catalin Rosu (http://www.red-team-design.com/just-another-awesome-css3-buttons)
180
+ */
181
+
182
+ .ym-button,
183
+ .ym-form button,
184
+ .ym-form input[type="button"],
185
+ .ym-form input[type="reset"],
186
+ .ym-form input[type="submit"] {
187
+ display: inline-block;
188
+ white-space: nowrap;
189
+ @include ym-linear-gradient();
190
+
191
+ border: 1px solid #777;
192
+ border-radius: .2em;
193
+
194
+ -webkit-box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.15);
195
+ box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.15);
196
+ color: #333 !important;
197
+ cursor: pointer;
198
+ font: normal 1em/2em Arial, Helvetica;
199
+ margin: 0 0.75em 0 0;
200
+ padding: 0 1.5em;
201
+ overflow: visible; /* removes extra side spacing in IE */
202
+ text-decoration: none !important;
203
+ text-shadow: 0 1px 0 rgba(255,255,255,.8);
204
+
205
+ &:hover{
206
+ @include ym-linear-gradient("to bottom", #fafafa, #ddd);
207
+ }
208
+ &:active {
209
+ @include ym-box-shadow(2px, 2px, 3px, rgba(0,0,0,0.2), inset);
210
+ @include ym-linear-gradient("to bottom", #ccc, #bbb);
211
+ position: relative;
212
+ top: 1px;
213
+ }
214
+ &:focus {
215
+ outline: 0;
216
+ background: #fafafa;
217
+ }
218
+ }
219
+
220
+ /* Button size-scaling classes */
221
+ .ym-button {
222
+ &.ym-xlarge { font-size: 1.5em; } /* 21px */
223
+ &.ym-large { font-size: 1.2857em; } /* 18px */
224
+ &.ym-small { font-size: 0.8571em; } /* 12px */
225
+ &.ym-xsmall { font-size: 0.7143em; } /* 10px */
226
+ }
227
+
228
+ /* Button color scheme: primary */
229
+ .ym-button.ym-primary,
230
+ .ym-form button.ym-primary,
231
+ .ym-form input[type="button"].ym-primary,
232
+ .ym-form input[type="reset"].ym-primary,
233
+ .ym-form input[type="submit"].ym-primary {
234
+ -webkit-box-shadow: 0 0 1px 1px rgba(255,255,255,.3) inset, 0 1px 0 rgba(0,0,0,.15);
235
+ box-shadow: 0 0 1px 1px rgba(255,255,255,.3) inset, 0 1px 0 rgba(0,0,0,.15);
236
+
237
+ @include ym-linear-gradient("to bottom", #88e, #66c);
238
+
239
+ border: 1px solid #007;
240
+ color: #fff !important;
241
+ text-shadow: 0 1px 0 rgba(0,0,0,.8);
242
+
243
+ &:hover {
244
+ @include ym-linear-gradient("to bottom", #88f, #66d);
245
+ }
246
+
247
+ &:active {
248
+ @include ym-box-shadow(2px, 2px, 3px, rgba(0,0,0,0.2), inset);
249
+ @include ym-linear-gradient("to bottom", #88c, #66a);
250
+ }
251
+
252
+ &:focus {
253
+ outline: 0;
254
+ background: #88f;
255
+ }
256
+ }
257
+
258
+ /* Button color scheme: success */
259
+ .ym-button.ym-success,
260
+ .ym-form button.ym-success,
261
+ .ym-form input[type="button"].ym-success,
262
+ .ym-form input[type="reset"].ym-success,
263
+ .ym-form input[type="submit"].ym-success {
264
+ -webkit-box-shadow: 0 0 1px 1px rgba(255,255,255,.3) inset, 0 1px 0 rgba(0,0,0,.15);
265
+ box-shadow: 0 0 1px 1px rgba(255,255,255,.3) inset, 0 1px 0 rgba(0,0,0,.15);
266
+ @include ym-linear-gradient("to bottom", #6b6, #494);
267
+ border: 1px solid #070;
268
+ color: #fff !important;
269
+ text-shadow: 0 1px 0 rgba(0,0,0,.8);
270
+
271
+ &:hover {
272
+ @include ym-linear-gradient("to bottom", #6c6, #5a5);
273
+ }
274
+
275
+ &:active {
276
+ @include ym-box-shadow(2px, 2px, 3px, rgba(0,0,0,0.2), inset);
277
+ @include ym-linear-gradient("to bottom", #6a6, #484);
278
+ }
279
+
280
+ &:focus {
281
+ outline: 0;
282
+ background: #6c6;
283
+ }
284
+ }
285
+
286
+ /* Button color scheme: warning */
287
+ .ym-button.ym-warning,
288
+ .ym-form button.ym-warning,
289
+ .ym-form input[type="button"].ym-warning,
290
+ .ym-form input[type="reset"].ym-warning,
291
+ .ym-form input[type="submit"].ym-warning {
292
+ -webkit-box-shadow: 0 0 1px 1px rgba(255,255,255,.3) inset, 0 1px 0 rgba(0,0,0,.15);
293
+ box-shadow: 0 0 1px 1px rgba(255,255,255,.3) inset, 0 1px 0 rgba(0,0,0,.15);
294
+ @include ym-linear-gradient("to bottom", #da4, #b72);
295
+ border: 1px solid #970;
296
+ color: #fff !important;
297
+ text-shadow: 0 1px 0 rgba(0,0,0,.8);
298
+
299
+ &:hover {
300
+ @include ym-linear-gradient("to bottom", #eb5, #c83);
301
+ }
302
+
303
+ &:active {
304
+ @include ym-box-shadow(2px, 2px, 3px, rgba(0,0,0,0.2), inset);
305
+ @include ym-linear-gradient("to bottom", #c94, #a62);
306
+ }
307
+
308
+ &:focus {
309
+ outline: 0;
310
+ background: #da4;
311
+ }
312
+ }
313
+
314
+ /* Button color scheme: danger */
315
+ .ym-button.ym-danger,
316
+ .ym-form button.ym-danger,
317
+ .ym-form input[type="button"].ym-danger,
318
+ .ym-form input[type="reset"].ym-danger,
319
+ .ym-form input[type="submit"].ym-danger {
320
+ -webkit-box-shadow: 0 0 1px 1px rgba(255,255,255,.3) inset, 0 1px 0 rgba(0,0,0,.15);
321
+ box-shadow: 0 0 1px 1px rgba(255,255,255,.3) inset, 0 1px 0 rgba(0,0,0,.15);
322
+ @include ym-linear-gradient("to bottom", #b66, #944);
323
+ border: 1px solid #700;
324
+ color: #fff !important;
325
+ text-shadow: 0 1px 0 rgba(0,0,0,.8);
326
+
327
+ &:hover {
328
+ @include ym-linear-gradient("to bottom", #c66, #a55);
329
+ }
330
+
331
+ &:active {
332
+ @include ym-box-shadow(2px, 2px, 3px, rgba(0,0,0,0.2), inset);
333
+ @include ym-linear-gradient("to bottom", #a55, #844);
334
+ }
335
+
336
+ &:focus {
337
+ outline: 0;
338
+ background: #c66;
339
+ }
340
+ }
341
+
342
+ /* pseudo elements don't work on input */
343
+ .ym-form button:before,
344
+ .ym-button:before {
345
+ background: #ccc;
346
+ background: rgba(0,0,0,.1);
347
+ float: left;
348
+ width: 1em;
349
+ text-align: center;
350
+ font-size: 1.5em;
351
+ margin: 0 1em 0 -1em;
352
+ padding: 0 .2em;
353
+ -webkit-box-shadow: 1px 0 0 rgba(0,0,0,.5), 2px 0 0 rgba(255,255,255,.5);
354
+ box-shadow: 1px 0 0 rgba(0,0,0,.5), 2px 0 0 rgba(255,255,255,.5);
355
+ border-radius: .15em 0 0 .15em;
356
+ pointer-events: none;
357
+ }
358
+
359
+ .ym-add:before { content: "\271A"; }
360
+ .ym-delete:before { content: "\2718"; }
361
+ .ym-close:before { content: "\2715"; }
362
+ .ym-edit:before { content: "\270E"; }
363
+ .ym-email:before { content: "\2709"; }
364
+ .ym-like:before { content: "\2764"; }
365
+ .ym-next:before { content: "\279C"; }
366
+ .ym-play:before { content: "\25B6"; }
367
+ .ym-reply:before { content: "\27A5"; }
368
+ .ym-save:before { content: "\2714"; }
369
+ .ym-sign:before { content: "\270D"; }
370
+ .ym-spark:before { content: "\2737"; }
371
+ .ym-support:before { content: "\2706"; }
372
+ .ym-star:before { content: "\2605"; }
373
+ /* removes extra inner spacing in Firefox */
374
+ .ym-form button::-moz-focus-inner {
375
+ border: 0;
376
+ padding: 0;
377
+ }
378
+
379
+ /* If line-height can't be modified, then fix Firefox spacing with padding */
380
+ .ym-form input[type=button]::-moz-focus-inner,
381
+ .ym-form input[type=reset]::-moz-focus-inner,
382
+ .ym-form input[type=submit]::-moz-focus-inner {
383
+ padding: .4em;
384
+ }
385
+
386
+ /* The disabled styles */
387
+ .ym-form button[disabled],
388
+ .ym-form button[disabled]:hover,
389
+ .ym-form input[type=button][disabled],
390
+ .ym-form input[type=button][disabled]:hover,
391
+ .ym-form input[type=reset][disabled],
392
+ .ym-form input[type=reset][disabled]:hover,
393
+ .ym-form input[type=submit][disabled],
394
+ .ym-form input[type=submit][disabled]:hover,
395
+ .ym-button.ym-disabled,
396
+ .ym-button.ym-disabled:hover {
397
+ background: #eee;
398
+ color: #aaa !important;
399
+ border-color: #aaa;
400
+ cursor: default;
401
+ text-shadow: none;
402
+ position: static;
403
+ -webkit-box-shadow: none;
404
+ box-shadow: none;
405
+ }
406
+
407
+ /* ie6 support styles - redefined buttons, because of missing support for attribute selectors */
408
+ * html {
409
+ .ym-button,
410
+ .ym-form button {
411
+ display: inline-block;
412
+ white-space: nowrap;
413
+ background-color: #ccc;
414
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#eeeeee', EndColorStr='#cccccc');
415
+ border: 1px solid #777;
416
+ color: #333 !important;
417
+ cursor: pointer;
418
+ font: normal 1em/2em Arial, Helvetica;
419
+ margin: 1.5em 0.75em 0 0;
420
+ padding: 0 1.5em;
421
+ overflow: visible; /* removes extra side spacing in IE */
422
+ text-decoration: none !important;
423
+ }
424
+
425
+ .ym-form button:focus,
426
+ .ym-button:focus {
427
+ outline: 0;
428
+ background: #fafafa;
429
+ }
430
+
431
+ .ym-form button:hover,
432
+ .ym-button:hover {
433
+ background-color: #ddd;
434
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#fafafa', EndColorStr='#dddddd');
435
+ }
436
+
437
+ .ym-form button:active,
438
+ .ym-button:active {
439
+ background-color: #bbb;
440
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#cccccc', EndColorStr='#bbbbbb');
441
+ position: relative;
442
+ top: 1px;
443
+ }
444
+ .ym-button.ym-disabled,
445
+ .ym-button.ym-disabled:hover {
446
+ background: #eee;
447
+ color: #aaa !important;
448
+ border-color: #aaa;
449
+ cursor: default;
450
+ text-shadow: none;
451
+ position: static;
452
+ }
453
+
454
+ .ym-button {
455
+ &.ym-primary {
456
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#8888ee', EndColorStr='#6666cc');
457
+ }
458
+ &.ym-success {
459
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#66bb66', EndColorStr='#449944');
460
+ }
461
+ &.ym-warning {
462
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#ddaa44', EndColorStr='#BB7722');
463
+ }
464
+ &.ym-danger {
465
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#bb6666', EndColorStr='#994444');
466
+ }
467
+
468
+ /* Button size-scaling classes */
469
+ &.ym-xlarge { font-size: 1.5em; } /* 21px */
470
+ &.ym-large { font-size: 1.2857em; } /* 18px */
471
+ &.ym-small { font-size: 0.8571em; } /* 12px */
472
+ &.ym-xsmall { font-size: 0.7143em; } /* 10px */
473
+ }
474
+ }
475
+ }