toadstool 0.0.0.1 → 0.0.0.3

Sign up to get free protection for your applications and to get access to all the features.
Files changed (163) hide show
  1. data/lib/bin/toadstool +80 -33
  2. data/lib/stylesheets/_toadstool-styleguide.scss +33 -0
  3. data/lib/stylesheets/toadstool/_buttons.scss +22 -0
  4. data/lib/stylesheets/toadstool/_config.scss +228 -0
  5. data/lib/stylesheets/toadstool/_design.scss +55 -0
  6. data/lib/stylesheets/toadstool/_forms.scss +18 -0
  7. data/lib/stylesheets/toadstool/_grids.scss +48 -0
  8. data/lib/stylesheets/toadstool/_modules.scss +3 -0
  9. data/{sass → lib/stylesheets/toadstool}/_typography.scss +43 -11
  10. data/lib/stylesheets/toadstool/_ui_patterns.scss +3 -0
  11. data/lib/stylesheets/toadstool/_web_fonts.scss +11 -0
  12. data/lib/stylesheets/toadstool/modules/_footer.scss +7 -0
  13. data/lib/stylesheets/toadstool/modules/_header.scss +41 -0
  14. data/lib/stylesheets/toadstool/modules/_main_nav.scss +49 -0
  15. data/lib/stylesheets/toadstool/ui_patterns/_color_grid.scss +220 -0
  16. data/lib/stylesheets/toadstool/ui_patterns/_emBox.scss +16 -0
  17. data/lib/stylesheets/toadstool/ui_patterns/_prettify.scss +136 -0
  18. data/lib/templates/module/sass/_example_module.scss +4 -0
  19. data/{sass/modules/example_module → lib/templates/module/sass}/_extends.scss +0 -0
  20. data/{sass/modules/example_module → lib/templates/module/sass}/_mixins.scss +0 -0
  21. data/{views/modules/example_module → lib/templates/module/views}/module.erb +0 -0
  22. data/{views/modules/example_module → lib/templates/module/views}/module.js +0 -0
  23. data/{views/modules/example_module → lib/templates/module/views}/view.erb +0 -0
  24. data/{Gemfile → lib/templates/project/Gemfile} +1 -3
  25. data/lib/templates/project/Rakefile +21 -0
  26. data/{config.rb → lib/templates/project/config.rb} +5 -3
  27. data/lib/templates/project/config.ru +8 -0
  28. data/{doc-src → lib/templates/project/doc-src}/SASS-Guidelines.md +0 -0
  29. data/lib/templates/project/doc-src/changelog.md +22 -0
  30. data/{doc-src → lib/templates/project/doc-src}/mit_license.md +0 -0
  31. data/{sass/modules/example_module/readme.md → lib/templates/project/doc-src/module-sass-readme.md} +0 -0
  32. data/{public → lib/templates/project/public}/images/toadstool-logo.png +0 -0
  33. data/{public → lib/templates/project/public}/javascripts/application.js +12 -1
  34. data/lib/templates/project/public/javascripts/jquery-1.8.3.min.js +2 -0
  35. data/{public → lib/templates/project/public}/javascripts/lang-css.js +0 -0
  36. data/{public → lib/templates/project/public}/javascripts/lang-yaml.js +0 -0
  37. data/lib/templates/project/public/javascripts/modernizr-2.6.1.js +1384 -0
  38. data/{public → lib/templates/project/public}/javascripts/modernizr.mods.js +0 -0
  39. data/{public → lib/templates/project/public}/javascripts/prettify.js +0 -0
  40. data/lib/templates/project/readme.md +79 -0
  41. data/lib/templates/project/sass/_buttons.scss +37 -0
  42. data/{sass → lib/templates/project/sass}/_config.scss +81 -74
  43. data/{sass → lib/templates/project/sass}/_design.scss +0 -0
  44. data/lib/templates/project/sass/_forms.scss +41 -0
  45. data/{sass → lib/templates/project/sass}/_reset.scss +0 -0
  46. data/lib/templates/project/sass/_typography.scss +98 -0
  47. data/lib/templates/project/sass/buttons/_extends.scss +3 -0
  48. data/lib/templates/project/sass/buttons/_mixins.scss +2 -0
  49. data/lib/templates/project/sass/color/_color_defaults.scss +98 -0
  50. data/{sass → lib/templates/project/sass}/color/_color_math.scss +1 -1
  51. data/lib/templates/project/sass/color/_extends.scss +109 -0
  52. data/{sass → lib/templates/project/sass}/color/_grayscale_math.scss +0 -0
  53. data/lib/templates/project/sass/color/readme.md +63 -0
  54. data/lib/templates/project/sass/forms/_extends.scss +3 -0
  55. data/lib/templates/project/sass/forms/_mixins.scss +3 -0
  56. data/{sass/_ui_patterns.scss → lib/templates/project/sass/layouts/_example_layout.scss} +0 -0
  57. data/lib/templates/project/sass/readme.md +142 -0
  58. data/{sass → lib/templates/project/sass}/style.scss +6 -10
  59. data/{sass → lib/templates/project/sass}/toadstool.scss +1 -1
  60. data/lib/templates/project/sass/typography/_extends.scss +13 -0
  61. data/lib/templates/project/sass/typography/_mixins.scss +2 -0
  62. data/{sass → lib/templates/project/sass/typography}/_web_fonts.scss +2 -5
  63. data/lib/templates/project/toadstool.rb +94 -0
  64. data/lib/templates/project/views/color_palettes.erb +371 -0
  65. data/lib/templates/project/views/forms.erb +40 -0
  66. data/lib/templates/project/views/forms/disabled_button.erb +18 -0
  67. data/lib/templates/project/views/forms/password_input.erb +22 -0
  68. data/lib/templates/project/views/forms/primary_button.erb +18 -0
  69. data/lib/templates/project/views/forms/readme.md +2 -0
  70. data/{views → lib/templates/project/views}/forms/username_input.erb +0 -0
  71. data/{views → lib/templates/project/views}/grid.erb +0 -0
  72. data/{views → lib/templates/project/views}/grid24.erb +0 -0
  73. data/{views → lib/templates/project/views}/grids/grid_arguments.erb +0 -0
  74. data/{views → lib/templates/project/views}/grids/use_definition.erb +0 -0
  75. data/{views → lib/templates/project/views}/layout.erb +2 -2
  76. data/{views/modules/example_module → lib/templates/project/views/modules}/readme.md +6 -4
  77. data/lib/templates/project/views/shared/_code_toggle.erb +10 -0
  78. data/lib/templates/project/views/shared/_html_example.erb +5 -0
  79. data/{views → lib/templates/project/views}/shared/_main_footer.erb +0 -0
  80. data/{views → lib/templates/project/views}/shared/_main_header.erb +0 -0
  81. data/{views → lib/templates/project/views}/shared/_main_nav.erb +0 -0
  82. data/{views → lib/templates/project/views}/shared/_toadstool_subheader.erb +0 -0
  83. data/lib/templates/project/views/typography.erb +35 -0
  84. data/lib/templates/project/views/typography/body_copy.erb +2 -0
  85. data/{views → lib/templates/project/views}/typography/body_links.erb +0 -0
  86. data/{sass/ui_patterns/_example.scss → lib/templates/project/views/typography/general_typography.erb} +0 -0
  87. data/{views → lib/templates/project/views}/typography/headings.erb +0 -0
  88. data/{views → lib/templates/project/views}/typography/vertical_rhythm.erb +0 -0
  89. data/{views → lib/templates/project/views}/typography/web_fonts.erb +0 -0
  90. data/lib/templates/project/views/ui_patterns/forms/primary_buttons.erb +8 -0
  91. data/lib/templates/project/views/ui_patterns/forms/text_input.erb +11 -0
  92. data/lib/templates/project/views/ui_patterns/forms/text_input_error.erb +11 -0
  93. data/{views → lib/templates/project/views}/ui_patterns/readme.md +4 -3
  94. data/lib/templates/project/views/ui_patterns/typography/_body_copy.erb +2 -0
  95. data/lib/templates/project/views/ui_patterns/typography/_headings.erb +6 -0
  96. data/lib/templates/ui_pattern/sass/_example_pattern.scss +4 -0
  97. data/lib/templates/ui_pattern/sass/_extends.scss +0 -0
  98. data/lib/templates/ui_pattern/sass/_mixins.scss +0 -0
  99. data/{views/ui_patterns → lib/templates/ui_pattern/views}/example.erb +0 -0
  100. data/lib/toadstool.rb +4 -0
  101. data/lib/toadstool/version.rb +3 -0
  102. metadata +120 -109
  103. data/Rakefile +0 -4
  104. data/config.ru +0 -6
  105. data/doc-src/What-Is-Toadstool.md +0 -44
  106. data/doc-src/changelog.md +0 -29
  107. data/doc-src/config.md +0 -18
  108. data/doc-src/mixin_directory.md +0 -17
  109. data/doc-src/sass.md +0 -4
  110. data/lib/RackServer.rb +0 -93
  111. data/public/fonts/fontawesome-webfont.eot +0 -0
  112. data/public/fonts/fontawesome-webfont.svg +0 -255
  113. data/public/fonts/fontawesome-webfont.ttf +0 -0
  114. data/public/fonts/fontawesome-webfont.woff +0 -0
  115. data/public/fonts/zocial-regular-webfont.eot +0 -0
  116. data/public/fonts/zocial-regular-webfont.svg +0 -138
  117. data/public/fonts/zocial-regular-webfont.ttf +0 -0
  118. data/public/fonts/zocial-regular-webfont.woff +0 -0
  119. data/public/javascripts/css_browser_selector.js +0 -8
  120. data/public/javascripts/lang-apollo.js +0 -2
  121. data/public/javascripts/lang-clj.js +0 -18
  122. data/public/javascripts/lang-go.js +0 -1
  123. data/public/javascripts/lang-hs.js +0 -2
  124. data/public/javascripts/lang-lisp.js +0 -3
  125. data/public/javascripts/lang-lua.js +0 -2
  126. data/public/javascripts/lang-ml.js +0 -2
  127. data/public/javascripts/lang-n.js +0 -4
  128. data/public/javascripts/lang-proto.js +0 -1
  129. data/public/javascripts/lang-scala.js +0 -2
  130. data/public/javascripts/lang-sql.js +0 -2
  131. data/public/javascripts/lang-tex.js +0 -1
  132. data/public/javascripts/lang-vb.js +0 -2
  133. data/public/javascripts/lang-vhdl.js +0 -3
  134. data/public/javascripts/lang-wiki.js +0 -2
  135. data/public/javascripts/lang-xq.js +0 -3
  136. data/public/javascripts/selectivizr-min.js +0 -5
  137. data/public/stylesheets/style.css +0 -615
  138. data/public/stylesheets/toadstool.css +0 -1643
  139. data/readme.md +0 -37
  140. data/sass/_buttons.scss +0 -20
  141. data/sass/_forms.scss +0 -18
  142. data/sass/_modules.scss +0 -12
  143. data/sass/buttons/_cupid_config.scss +0 -20
  144. data/sass/buttons/_minimal_config.scss +0 -15
  145. data/sass/color/_extends.scss +0 -291
  146. data/sass/ui_patterns/_color_grid.scss +0 -286
  147. data/toadstool.rb +0 -84
  148. data/views/abstract_colors.erb +0 -1
  149. data/views/alerts.erb +0 -1
  150. data/views/buttons.erb +0 -1
  151. data/views/color_palettes.erb +0 -221
  152. data/views/forms.erb +0 -24
  153. data/views/forms/disabled_button.erb +0 -18
  154. data/views/forms/password_input.erb +0 -22
  155. data/views/forms/primary_button.erb +0 -18
  156. data/views/modules/readme.md +0 -10
  157. data/views/semantic_colors.erb +0 -1
  158. data/views/shared/_html_example.erb +0 -31
  159. data/views/shared/_sass_example.erb +0 -10
  160. data/views/typography.erb +0 -17
  161. data/views/typography/body_copy.erb +0 -19
  162. data/views/typography/general_typography.erb +0 -19
  163. data/views/ui_patterns/forms/text_input.erb +0 -10
data/lib/stylesheets/toadstool/_forms.scss ADDED
@@ -0,0 +1,18 @@
1
+ // Styled drop down menues
2
+ [class*="toadstool"] {
3
+ select {
4
+ border: 1px solid #555;
5
+ padding: 0.5em;
6
+ line-height: 1.2em;
7
+ padding: 0.5em 1em 0.5em 0.75em;
8
+ margin-top: em(3);
9
+ @include border_radius(0.5em);
10
+ .flexbox & {
11
+ -webkit-appearance: none;
12
+ background: #fff url("data:image/png,%89PNG%0D%0A%1A%0A%00%00%00%0DIHDR%00%00%0C%80%00%00%00%40%08%02%00%00%00W%AEz%EF%00%00%00%19tEXtSoftware%00Adobe%20ImageReadyq%C9e%3C%00%00%04%E5IDATx%DA%EC%DD%3DN%E3Z%18%06%E0%B1oD%82%A8%E8(%A8%D2Q%D2%D0%40%83%C4%12%D8%01%3Db%09P%81%A0%40%A2%60%05%D9%05%BB%A0%04%09!B%3A%9A%10%07%F2g%E7%22%90f(%98%E09%23Y7%E7%3EOi%1F%1FK_%FD%EA%FD%92%E9t%FA%03%00%00%00%00%00%00%00%00%80%3F%97%1A%01%00%00%00%00%00%00%00%00%40%98%9A%06%2C%00%00%00%00%00%00%00%00%20%0E%D5%A7%A14%60%01%00%00%00%00%00%00%00%00%04%D2%80%05%00%00%00%00%00%00%00%00DB%03%16%00%00%00%00%00%00%00%00%C0%DC%D0%80%05%00%00%00%00%00%00%00%00D%A2(%8A%8A%FF(%80%05%00%00%00%00%00%00%00%00D%C2%0AB%00%00%00%00%00%00%00%00%80%B9%A1%01%0B%00%00%00%00%00%00%00%00%88%84%15%84%00%00%00%00%00%00%00%00%00%81%AC%20%04%00%00%00%00%00%00%00%00%98%1B%1A%B0%00%00%00%00%00%00%00%00%80HXA%08%00%00%00%00%00%00%00%00%10%A8%FA4%94%00%16%00%00%00%00%00%00%00%00%10%09%0DX%00%00%00%00%00%00%00%00%00%81%AAOC%A5%86%0E%00%00%00%00%00%00%00%00%10F%03%16%00%00%00%00%00%00%00%00%10%09%2B%08%01%00%00%00%00%00%00%00%00%02U%9F%86%12%C0%02%00%00%00%00%00%00%00%00%22!%80%05%00%00%00%00%00%00%00%00%10%C8%0AB%00%00%00%00%00%00%00%00%80%40%1A%B0%00%00%00%00%00%00%00%00%00%02i%C0%02%00%00%00%00%00%00%00%00%08%A4%01%0B%00%00%00%00%00%00%00%00%20%90%06%2C%00%00%00%00%00%00%00%00%80%40%02X%00%00%00%00%00%00%00%00%00%81%AC%20%04%00%00%00%00%00%00%00%00%08%24%80%05%00%00%00%00%00%00%00%00%10%C8%0AB%00%00%00%00%00%00%00%00%80%40%1A%B0%00%00%00%00%00%00%00%00%00%02i%C0%02%00%00%00%00%00%00%00%00%084%3B%0Du%7B%7B%7Bzz%3A%18%0C%CA_%D8h4%F6%F6%F6677%F3%3C%FF%F2%40%D2%E9t%CC%1D%00%00%00%00%00%00%00%00%88%40%96e3%DE%26I2%18%0C%8E%8F%8F%EF%EE%EE%CA%DC%B6%BC%BC%7Cxx%D8l6_%5E%5EF%A3%D1%97%E9%AE%D4%D0%01%00%00%00%00%00%00%00%80%FF%83%E9t%BA%B8%B8xvv%B6%B3%B3%F3%ED%E1%F5%F5%F5V%AB%B5%B6%B66%99L~W%7F%F5%26y%7C%7C4Y%00%00%00%00%00%00%00%00%20%02%BD%5E%EF%DB3i%9A%D6%EB%F5%AB%AB%ABV%AB%F5%BBu%84%BB%BB%BB%FB%FB%FB%FD~%3F%CB%B2%B73%B3%02X%EDv%DB%DC%01%00%00%00%00%00%00%00%80%08%94%09%60%FDx%DFE%B8%B0%B0%D0n%B7%2F..%3A%9D%CE%E7W%8DF%E3%E8%E8hcc%23%7B7%1C%0E%BF%DC%3C%F8%EB%AA%87%87%07s%07%00%00%00%00%00%00%00%00%22%F0%FC%FC%5C%F2d%9A%A6%B5Zm2%99%9C%9F%9F___%7F%3C%5C%5D%5D%3D99YYY%E9%F5z%FD~%7F%3C%1E%17E1%FB%9E%7F%0E%0E%0E%CC%1D%00%00%00%00%00%00%00%00%88%C0p8%2Cyr%3A%9D%E6y%9E%A6%E9%F6%F6%F6h4%BA%B9%B9%D9%DA%DA%BA%BC%BC%AC%D5j%DDn7%CB%B2%B7%87%B3%BB%AF%3E%24%F7%F7%F7%E6%0E%00%00%00%00%00%00%00%00D%A0%7C%03%D6Oi%9A%D6%EB%F5n%B7%DBl6%C7%E3q%96e%AF%AF%AF%DF%16_%FDT%2B%93%D2%02%00%00%00%00%00%00%00%00%F8%EF%2B%1F%9C%FA%FC%C9%9B%A5%A5%A5%A7%A7%A7%3C%CF%CB%AC%1D%FCL%00%0B%00%00%00%00%00%00%00%00%88DX%1A*%7F%97%24I%C0%E7%02X%00%00%00%00%00%00%00%00%40%24%FE%26%0D%15%F6%AD%00%16%00%00%00%00%00%00%00%00%10%89%80%15%84%7FI%00%0B%00%00%00%00%00%00%00%00%88D%F5i(%01%2C%00%00%00%00%00%00%00%00%20%12%1A%B0%00%00%00%00%00%00%00%00%00%02i%C0%02%00%00%00%00%00%00%00%00%08%24%80%05%00%00%00%00%00%00%00%00%10%C8%0AB%00%00%00%00%00%00%00%00%80%40%D5%A7%A1RC%07%00%00%00%00%00%00%00%00%08%A3%01%0B%00%00%00%00%00%00%00%00%88%84%15%84%00%00%00%00%00%00%00%00%00%81%AAOC%09%60%01%00%00%00%00%00%00%00%00%91%10%C0%02%00%00%00%00%00%00%00%00%08T%FD%0A%C2%D4%D0%01%00%00%00%00%00%00%00%00%C2h%C0%02%00%00%00%00%00%00%00%00%22a%05!%00%00%00%00%00%00%00%00%40%A0%EA%D3PV%10%02%00%00%00%00%00%00%00%00%04%D2%80%05%00%00%00%00%00%00%00%00D%A2(%8A%8A%FF(%80%05%00%00%00%00%00%00%00%00D%C2%0AB%00%00%00%00%00%00%00%00%80%B9%A1%01%0B%00%00%00%00%00%00%00%00%88%84%06%2C%00%00%00%00%00%00%00%00%80%B9%A1%01%0B%00%00%00%00%00%00%00%00%88DQ%14%15%FF%F1_%01%06%00md%E2%BF%C9%C3%19%DA%00%00%00%00IEND%AEB%60%82") no-repeat right center;
13
+ background-size: 1600px 32px;
14
+ }
15
+ }
16
+ }
17
+
18
+
data/lib/stylesheets/toadstool/_grids.scss ADDED
@@ -0,0 +1,48 @@
1
+
2
+ .col_4_grid, .col_10_grid {
3
+ display: none;
4
+ }
5
+
6
+ @media #{$tablet_portrait} {
7
+ .col_10_grid {
8
+ display: block;
9
+ }
10
+ .col_12_grid {
11
+ display: none;
12
+ }
13
+ }
14
+
15
+ @media #{$mobile} {
16
+ .col_4_grid {
17
+ display: block;
18
+ }
19
+ .col_12_grid, .col_10_grid {
20
+ display: none;
21
+ }
22
+ }
23
+
24
+
25
+
26
+ // grid ----------------------
27
+ @for $i from 1 through 12 {
28
+ .grid-#{$i} {
29
+ @extend %grid_#{$i};
30
+ @extend %grid_display;
31
+ }
32
+ }
33
+
34
+ .grid-full {
35
+ @include full_width_block(12, $main_grid_align: left);
36
+ }
37
+
38
+ .grid-full_center {
39
+ @include full_width_block(12);
40
+ }
41
+
42
+
43
+ @for $i from 1 through 24 {
44
+ .grid-#{$i}-24 {
45
+ @extend %grid_#{$i}_24;
46
+ @extend %grid_display;
47
+ }
48
+ }
data/lib/stylesheets/toadstool/_modules.scss ADDED
@@ -0,0 +1,3 @@
1
+ @import "modules/header";
2
+ @import "modules/footer";
3
+ @import "modules/main_nav";
data/{sass → lib/stylesheets/toadstool}/_typography.scss RENAMED
@@ -20,7 +20,7 @@
20
20
 
21
21
  // Import of default text bootstrap settings
22
22
  // -----------------------------------------------------------------------
23
- @import "stipe/typography/default"; // Comment out if unwanted
23
+ // @import "stipe/typography/default"; // Comment out if unwanted
24
24
 
25
25
 
26
26
 
@@ -28,21 +28,43 @@
28
28
  // Commented out styles represent Toadstool's default bootstrap styles
29
29
  // -----------------------------------------------------------------------
30
30
  html {
31
- // font: em($font_size, 16) $primary_font_family;
32
- // line-height: baseline($font_size);
31
+ // font: #{$font_size / 16 * 1em}/$line_height $primary_font_family;
33
32
  // color: $primary_text;
34
33
  }
35
34
 
36
- h1 {
37
- // font-size: 2em; // user agent default
38
- // @extend %headings_1;
35
+ [class*="toadstool"] {
36
+ h1 {
37
+ @extend %headings_1;
38
+ font-weight: bold;
39
+ }
40
+ h2 {
41
+ @extend %headings_2;
42
+ color: $charlie_gray;
43
+ a {
44
+ font-size: 0.8em;
45
+ margin-left: em(5);
46
+ }
47
+ }
48
+ p, ul {
49
+ color: $charlie_gray;
50
+ @include text(14);
51
+ }
39
52
  }
40
53
 
41
- h2 {
42
- // font-size: 1.5em; // user agent default
43
- // @extend %headings_2;
54
+ // This is used to keep heading examples from poorly wrapping in mobile
55
+ .element_example {
56
+ @media #{$mobile} {
57
+ h1, h2, h3, h4, h5, h6 {
58
+ width: auto;
59
+ white-space: nowrap;
60
+ overflow: hidden;
61
+ text-overflow: ellipsis;
62
+ }
63
+ }
44
64
  }
45
65
 
66
+
67
+
46
68
  h3 {
47
69
  // font-size: 1.17em; // user agent default
48
70
  // @extend %headings_3;
@@ -66,8 +88,11 @@ h6 {
66
88
  // Standard body text support
67
89
  // --------------------------------
68
90
  p {
69
- // margin-bottom: baseline-margin($font_size);
91
+ // margin-bottom: 1em;
70
92
  // text-indent: 0;
93
+ // &:last-child {
94
+ // margin-bottom: 0;
95
+ // }
71
96
  }
72
97
 
73
98
  b {
@@ -90,4 +115,11 @@ a {
90
115
  // &:visited {
91
116
  // color: $href_color;
92
117
  // }
93
- }
118
+ }
119
+
120
+ // .toadstool_header {
121
+ // h1 {
122
+ // color: $bravo_primary;
123
+ // font-size: em($heading_1);
124
+ // }
125
+ // }
data/lib/stylesheets/toadstool/_ui_patterns.scss ADDED
@@ -0,0 +1,3 @@
1
+ @import "ui_patterns/prettify";
2
+ @import "ui_patterns/emBox";
3
+ @import "ui_patterns/color_grid";
data/lib/stylesheets/toadstool/_web_fonts.scss ADDED
@@ -0,0 +1,11 @@
1
+
2
+ // -----------------------------------------------------------
3
+ @import "stipe/typography/mixins"; // Do not edit, needed to pull in necessary mixin
4
+ $webfont_directory: "/fonts/" !default; // edit this directory in the '_config.scss' file if needed.
5
+
6
+
7
+ // Install your own
8
+ // -----------------------------------------------------------
9
+ //@font-face {
10
+ // @include font-face ($font_family: [name of family], $font-file: [name of file], $font_weight: [value], $font_style: [value]);
11
+ //}
data/lib/stylesheets/toadstool/modules/_footer.scss ADDED
@@ -0,0 +1,7 @@
1
+ .toadstool_main_footer {
2
+ padding: em(10) 0;
3
+ border-top: 1px solid $border_color;
4
+ @include grid(12, $grid_align: center);
5
+ clear: both;
6
+ text-align: center;
7
+ }
data/lib/stylesheets/toadstool/modules/_header.scss ADDED
@@ -0,0 +1,41 @@
1
+ .toadstool_main_header {
2
+ @extend %clearfix;
3
+ h1 {
4
+ color: $white;
5
+ float: left;
6
+ margin-bottom: 0;
7
+ }
8
+ background: $bravo_gray;
9
+ padding: rem(10) rem(10) rem(15) rem(10);
10
+ form {
11
+ display: inline-block;
12
+ float: right;
13
+ select {
14
+ min-width: rem(100);
15
+ }
16
+ @media #{$mobile} {
17
+ margin-top: em(10);
18
+ margin-right: em(10);
19
+ margin-left: em(2);
20
+ width: 80%;
21
+ float: none;
22
+ }
23
+ }
24
+ }
25
+
26
+ .toadstool_header {
27
+ h1 {
28
+ margin-top: rem(24);
29
+ }
30
+ }
31
+
32
+ .toadstool_subheader {
33
+ h2 {
34
+ margin-bottom: 0;
35
+ }
36
+ }
37
+
38
+
39
+
40
+
41
+
data/lib/stylesheets/toadstool/modules/_main_nav.scss ADDED
@@ -0,0 +1,49 @@
1
+ .toadstool_nav {
2
+ ol {
3
+ @include flexbox(100%, auto);
4
+ background: $bravo_gray;
5
+ font-weight: bold;
6
+ @media #{$mobile} {
7
+ @include flexbox(100%, auto, $orient: vertical);
8
+ @include linear_gradient_w3c ($bravo_gray, #{$bravo_gray 30%,$delta_gray 100%});
9
+ }
10
+ }
11
+ li {
12
+ @include flex(1);
13
+ text-align: center;
14
+ line-height: 3em;
15
+ background: $white;
16
+ color: $alpha_gray;
17
+ border-radius: em(5) em(5) 0 0;
18
+ @media #{$mobile} {
19
+ width: 100%;
20
+ border-radius: 0;
21
+ font-size: 1.2em;
22
+ background: transparent;
23
+ color: $echo_gray;
24
+ border-top: 1px solid $echo_gray;
25
+ }
26
+ }
27
+ a {
28
+ color: $white;
29
+ @include linear_gradient_w3c ($bravo_gray, #{$bravo_gray 50%,$delta_gray 100%});
30
+ .no-flexbox & {
31
+ padding: 0 em(10);
32
+ }
33
+ @media #{$mobile} {
34
+ background: transparent;
35
+ }
36
+ display: block;
37
+ &:hover {
38
+ text-decoration: none;
39
+ background: $white;
40
+ color: $alpha_gray;
41
+ border-radius: em(5) em(5) 0 0;
42
+ @media #{$mobile} {
43
+ border-radius: 0;
44
+ background: transparent;
45
+ color: $echo_gray;
46
+ }
47
+ }
48
+ }
49
+ }
data/lib/stylesheets/toadstool/ui_patterns/_color_grid.scss ADDED
@@ -0,0 +1,220 @@
1
+ // Toadstool's view
2
+ // ----------------------------------------------
3
+ .colorcode {
4
+ margin-bottom: 1.5em;
5
+ @extend %clearfix;
6
+ @media #{$mobile} {
7
+ @include grid(4, $grid_context: 4);
8
+ }
9
+ .toadstool_subheader {
10
+ margin-bottom: 1em;
11
+ }
12
+ section {
13
+ padding: em(10) 0 0 em(10);
14
+ margin: em(-10) 0 0 em(-10);
15
+ }
16
+ div {
17
+ @include box_sizing;
18
+ text-align: center;
19
+ float: left;
20
+ font-weight: bold;
21
+ width: em(75);
22
+ height: em(75);
23
+ border-radius: 50%;
24
+ margin: 0 em(50) em(70) em(50);
25
+ border: 1px solid $white;
26
+ box-shadow: 0 0 em(10) em(3) $shadow_color;
27
+ span {
28
+ display: block;
29
+ font-weight: normal;
30
+ }
31
+ }
32
+ p {
33
+ margin-bottom: 0;
34
+ margin-left: -25px;
35
+ width: 125px;
36
+ margin-top: 85px;
37
+ }
38
+ .border {
39
+ @include box_shadow (inset $alpha_gray, 0 0 1px);
40
+ }
41
+ @media #{$mobile} {
42
+ div {
43
+ width: 100%;
44
+ border-radius: 0;
45
+ margin-bottom: em(10);
46
+ box-shadow: 0 0 em(7) em(0) $shadow_color;
47
+ margin-left: 0;
48
+ text-align: left;
49
+ span {
50
+ margin: 0;
51
+ }
52
+ }
53
+ section {
54
+ position: relative;
55
+ top: em(-10);
56
+ }
57
+ p {
58
+ color: $white;
59
+ left: 0;
60
+ margin: em(10) 0 em(10) em(10);
61
+ line-height: 1.5em;
62
+ text-shadow: 2px 2px 4px black;
63
+ }
64
+ }
65
+ }
66
+
67
+
68
+ /////// OOCSS color blocks ////////
69
+ // ----------------------------------------------
70
+ @mixin extend_color_loop {
71
+ @each $name in $color_names {
72
+ $i: index($color_names, $name);
73
+ .#{$name} {
74
+ @extend %#{nth($color_names, $i)} !optional;
75
+ }
76
+ }
77
+ }
78
+
79
+
80
+ // To add new colors to the extended color loops below, simply add to the appropiate list
81
+
82
+ // Standard grayscale objects - in color view
83
+ // ----------------------------------------------
84
+ $color_names: alpha_gray
85
+ bravo_gray
86
+ charlie_gray
87
+ delta_gray
88
+ echo_gray
89
+ fox_gray
90
+ golf_gray
91
+ hotel_gray
92
+ india_gray;
93
+ @include extend_color_loop;
94
+
95
+
96
+ // Standard color objects - in color view
97
+ // ----------------------------------------------
98
+ $color_names:
99
+ alpha_color
100
+ alpha_color_bravo
101
+ alpha_color_charlie
102
+ alpha_color_delta
103
+ alpha_color_echo
104
+ alpha_color_fox
105
+ alpha_color_golf
106
+ alpha_color_hotel
107
+ alpha_color_india
108
+ alpha_color_juliet;
109
+ @include extend_color_loop;
110
+
111
+ $color_names:
112
+ bravo_color
113
+ bravo_color_bravo
114
+ bravo_color_charlie
115
+ bravo_color_delta
116
+ bravo_color_echo
117
+ bravo_color_fox
118
+ bravo_color_golf
119
+ bravo_color_hotel
120
+ bravo_color_india
121
+ bravo_color_juliet;
122
+ @include extend_color_loop;
123
+
124
+ $color_names:
125
+ charlie_color
126
+ charlie_color_bravo
127
+ charlie_color_charlie
128
+ charlie_color_delta
129
+ charlie_color_echo
130
+ charlie_color_fox
131
+ charlie_color_golf
132
+ charlie_color_hotel
133
+ charlie_color_india
134
+ charlie_color_juliet;
135
+ @include extend_color_loop;
136
+
137
+ $color_names:
138
+ delta_color
139
+ delta_color_bravo
140
+ delta_color_charlie
141
+ delta_color_delta
142
+ delta_color_echo
143
+ delta_color_fox
144
+ delta_color_golf
145
+ delta_color_hotel
146
+ delta_color_india
147
+ delta_color_juliet;
148
+ @include extend_color_loop;
149
+
150
+ $color_names:
151
+ echo_color
152
+ echo_color_bravo
153
+ echo_color_charlie
154
+ echo_color_delta
155
+ echo_color_echo
156
+ echo_color_fox
157
+ echo_color_golf
158
+ echo_color_hotel
159
+ echo_color_india
160
+ echo_color_juliet;
161
+ @include extend_color_loop;
162
+
163
+
164
+ /////// semantic color blocks ////////
165
+ // ----------------------------------------------
166
+ // Typography, borders, rules and shadows
167
+ $color_names:
168
+ 'white'
169
+ primary_header_color
170
+ primary_text
171
+ secondary_text href_color
172
+ shadow_color border_color
173
+ standard_hr_color
174
+ standard_border_color;
175
+ @include extend_color_loop;
176
+
177
+
178
+ /////// Config defaults for forms ///////
179
+ // ----------------------------------------------
180
+ $color_names:
181
+ alert_background_color
182
+ primary_button_border_color
183
+ secondary_button_border_color
184
+ button_text
185
+ input_disabled
186
+ input_disabled_bkg
187
+ input_disabled_border
188
+ input_disabled_text
189
+ form_field_background_color
190
+ form_field_focus_color
191
+ form_field_fail_bkg
192
+ form_field_border
193
+ form_field_border_fail
194
+ form_field_focus_border_color
195
+ form_field_text_fail
196
+ form_label_color
197
+ optional_field_text_color
198
+ instructional_text
199
+ placeholder_text
200
+ inline_alert_bkg_color
201
+ inline_alert_text_color;
202
+ @include extend_color_loop;
203
+
204
+ /////// Config defaults for buttons ///////
205
+ // ----------------------------------------------
206
+ $color_names:
207
+ button_color
208
+ primary_button_border_color
209
+ secondary_button_border_color
210
+ button_text;
211
+ @include extend_color_loop;
212
+
213
+ // HTML5 colors
214
+ $color_names:
215
+ webkit_tap_hightlight
216
+ ins_color
217
+ selection_color
218
+ selection_text_color
219
+ mark_color;
220
+ @include extend_color_loop;