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.
- data/lib/bin/toadstool +80 -33
- data/lib/stylesheets/_toadstool-styleguide.scss +33 -0
- data/lib/stylesheets/toadstool/_buttons.scss +22 -0
- data/lib/stylesheets/toadstool/_config.scss +228 -0
- data/lib/stylesheets/toadstool/_design.scss +55 -0
- data/lib/stylesheets/toadstool/_forms.scss +18 -0
- data/lib/stylesheets/toadstool/_grids.scss +48 -0
- data/lib/stylesheets/toadstool/_modules.scss +3 -0
- data/{sass → lib/stylesheets/toadstool}/_typography.scss +43 -11
- data/lib/stylesheets/toadstool/_ui_patterns.scss +3 -0
- data/lib/stylesheets/toadstool/_web_fonts.scss +11 -0
- data/lib/stylesheets/toadstool/modules/_footer.scss +7 -0
- data/lib/stylesheets/toadstool/modules/_header.scss +41 -0
- data/lib/stylesheets/toadstool/modules/_main_nav.scss +49 -0
- data/lib/stylesheets/toadstool/ui_patterns/_color_grid.scss +220 -0
- data/lib/stylesheets/toadstool/ui_patterns/_emBox.scss +16 -0
- data/lib/stylesheets/toadstool/ui_patterns/_prettify.scss +136 -0
- data/lib/templates/module/sass/_example_module.scss +4 -0
- data/{sass/modules/example_module → lib/templates/module/sass}/_extends.scss +0 -0
- data/{sass/modules/example_module → lib/templates/module/sass}/_mixins.scss +0 -0
- data/{views/modules/example_module → lib/templates/module/views}/module.erb +0 -0
- data/{views/modules/example_module → lib/templates/module/views}/module.js +0 -0
- data/{views/modules/example_module → lib/templates/module/views}/view.erb +0 -0
- data/{Gemfile → lib/templates/project/Gemfile} +1 -3
- data/lib/templates/project/Rakefile +21 -0
- data/{config.rb → lib/templates/project/config.rb} +5 -3
- data/lib/templates/project/config.ru +8 -0
- data/{doc-src → lib/templates/project/doc-src}/SASS-Guidelines.md +0 -0
- data/lib/templates/project/doc-src/changelog.md +22 -0
- data/{doc-src → lib/templates/project/doc-src}/mit_license.md +0 -0
- data/{sass/modules/example_module/readme.md → lib/templates/project/doc-src/module-sass-readme.md} +0 -0
- data/{public → lib/templates/project/public}/images/toadstool-logo.png +0 -0
- data/{public → lib/templates/project/public}/javascripts/application.js +12 -1
- data/lib/templates/project/public/javascripts/jquery-1.8.3.min.js +2 -0
- data/{public → lib/templates/project/public}/javascripts/lang-css.js +0 -0
- data/{public → lib/templates/project/public}/javascripts/lang-yaml.js +0 -0
- data/lib/templates/project/public/javascripts/modernizr-2.6.1.js +1384 -0
- data/{public → lib/templates/project/public}/javascripts/modernizr.mods.js +0 -0
- data/{public → lib/templates/project/public}/javascripts/prettify.js +0 -0
- data/lib/templates/project/readme.md +79 -0
- data/lib/templates/project/sass/_buttons.scss +37 -0
- data/{sass → lib/templates/project/sass}/_config.scss +81 -74
- data/{sass → lib/templates/project/sass}/_design.scss +0 -0
- data/lib/templates/project/sass/_forms.scss +41 -0
- data/{sass → lib/templates/project/sass}/_reset.scss +0 -0
- data/lib/templates/project/sass/_typography.scss +98 -0
- data/lib/templates/project/sass/buttons/_extends.scss +3 -0
- data/lib/templates/project/sass/buttons/_mixins.scss +2 -0
- data/lib/templates/project/sass/color/_color_defaults.scss +98 -0
- data/{sass → lib/templates/project/sass}/color/_color_math.scss +1 -1
- data/lib/templates/project/sass/color/_extends.scss +109 -0
- data/{sass → lib/templates/project/sass}/color/_grayscale_math.scss +0 -0
- data/lib/templates/project/sass/color/readme.md +63 -0
- data/lib/templates/project/sass/forms/_extends.scss +3 -0
- data/lib/templates/project/sass/forms/_mixins.scss +3 -0
- data/{sass/_ui_patterns.scss → lib/templates/project/sass/layouts/_example_layout.scss} +0 -0
- data/lib/templates/project/sass/readme.md +142 -0
- data/{sass → lib/templates/project/sass}/style.scss +6 -10
- data/{sass → lib/templates/project/sass}/toadstool.scss +1 -1
- data/lib/templates/project/sass/typography/_extends.scss +13 -0
- data/lib/templates/project/sass/typography/_mixins.scss +2 -0
- data/{sass → lib/templates/project/sass/typography}/_web_fonts.scss +2 -5
- data/lib/templates/project/toadstool.rb +94 -0
- data/lib/templates/project/views/color_palettes.erb +371 -0
- data/lib/templates/project/views/forms.erb +40 -0
- data/lib/templates/project/views/forms/disabled_button.erb +18 -0
- data/lib/templates/project/views/forms/password_input.erb +22 -0
- data/lib/templates/project/views/forms/primary_button.erb +18 -0
- data/lib/templates/project/views/forms/readme.md +2 -0
- data/{views → lib/templates/project/views}/forms/username_input.erb +0 -0
- data/{views → lib/templates/project/views}/grid.erb +0 -0
- data/{views → lib/templates/project/views}/grid24.erb +0 -0
- data/{views → lib/templates/project/views}/grids/grid_arguments.erb +0 -0
- data/{views → lib/templates/project/views}/grids/use_definition.erb +0 -0
- data/{views → lib/templates/project/views}/layout.erb +2 -2
- data/{views/modules/example_module → lib/templates/project/views/modules}/readme.md +6 -4
- data/lib/templates/project/views/shared/_code_toggle.erb +10 -0
- data/lib/templates/project/views/shared/_html_example.erb +5 -0
- data/{views → lib/templates/project/views}/shared/_main_footer.erb +0 -0
- data/{views → lib/templates/project/views}/shared/_main_header.erb +0 -0
- data/{views → lib/templates/project/views}/shared/_main_nav.erb +0 -0
- data/{views → lib/templates/project/views}/shared/_toadstool_subheader.erb +0 -0
- data/lib/templates/project/views/typography.erb +35 -0
- data/lib/templates/project/views/typography/body_copy.erb +2 -0
- data/{views → lib/templates/project/views}/typography/body_links.erb +0 -0
- data/{sass/ui_patterns/_example.scss → lib/templates/project/views/typography/general_typography.erb} +0 -0
- data/{views → lib/templates/project/views}/typography/headings.erb +0 -0
- data/{views → lib/templates/project/views}/typography/vertical_rhythm.erb +0 -0
- data/{views → lib/templates/project/views}/typography/web_fonts.erb +0 -0
- data/lib/templates/project/views/ui_patterns/forms/primary_buttons.erb +8 -0
- data/lib/templates/project/views/ui_patterns/forms/text_input.erb +11 -0
- data/lib/templates/project/views/ui_patterns/forms/text_input_error.erb +11 -0
- data/{views → lib/templates/project/views}/ui_patterns/readme.md +4 -3
- data/lib/templates/project/views/ui_patterns/typography/_body_copy.erb +2 -0
- data/lib/templates/project/views/ui_patterns/typography/_headings.erb +6 -0
- data/lib/templates/ui_pattern/sass/_example_pattern.scss +4 -0
- data/lib/templates/ui_pattern/sass/_extends.scss +0 -0
- data/lib/templates/ui_pattern/sass/_mixins.scss +0 -0
- data/{views/ui_patterns → lib/templates/ui_pattern/views}/example.erb +0 -0
- data/lib/toadstool.rb +4 -0
- data/lib/toadstool/version.rb +3 -0
- metadata +120 -109
- data/Rakefile +0 -4
- data/config.ru +0 -6
- data/doc-src/What-Is-Toadstool.md +0 -44
- data/doc-src/changelog.md +0 -29
- data/doc-src/config.md +0 -18
- data/doc-src/mixin_directory.md +0 -17
- data/doc-src/sass.md +0 -4
- data/lib/RackServer.rb +0 -93
- data/public/fonts/fontawesome-webfont.eot +0 -0
- data/public/fonts/fontawesome-webfont.svg +0 -255
- data/public/fonts/fontawesome-webfont.ttf +0 -0
- data/public/fonts/fontawesome-webfont.woff +0 -0
- data/public/fonts/zocial-regular-webfont.eot +0 -0
- data/public/fonts/zocial-regular-webfont.svg +0 -138
- data/public/fonts/zocial-regular-webfont.ttf +0 -0
- data/public/fonts/zocial-regular-webfont.woff +0 -0
- data/public/javascripts/css_browser_selector.js +0 -8
- data/public/javascripts/lang-apollo.js +0 -2
- data/public/javascripts/lang-clj.js +0 -18
- data/public/javascripts/lang-go.js +0 -1
- data/public/javascripts/lang-hs.js +0 -2
- data/public/javascripts/lang-lisp.js +0 -3
- data/public/javascripts/lang-lua.js +0 -2
- data/public/javascripts/lang-ml.js +0 -2
- data/public/javascripts/lang-n.js +0 -4
- data/public/javascripts/lang-proto.js +0 -1
- data/public/javascripts/lang-scala.js +0 -2
- data/public/javascripts/lang-sql.js +0 -2
- data/public/javascripts/lang-tex.js +0 -1
- data/public/javascripts/lang-vb.js +0 -2
- data/public/javascripts/lang-vhdl.js +0 -3
- data/public/javascripts/lang-wiki.js +0 -2
- data/public/javascripts/lang-xq.js +0 -3
- data/public/javascripts/selectivizr-min.js +0 -5
- data/public/stylesheets/style.css +0 -615
- data/public/stylesheets/toadstool.css +0 -1643
- data/readme.md +0 -37
- data/sass/_buttons.scss +0 -20
- data/sass/_forms.scss +0 -18
- data/sass/_modules.scss +0 -12
- data/sass/buttons/_cupid_config.scss +0 -20
- data/sass/buttons/_minimal_config.scss +0 -15
- data/sass/color/_extends.scss +0 -291
- data/sass/ui_patterns/_color_grid.scss +0 -286
- data/toadstool.rb +0 -84
- data/views/abstract_colors.erb +0 -1
- data/views/alerts.erb +0 -1
- data/views/buttons.erb +0 -1
- data/views/color_palettes.erb +0 -221
- data/views/forms.erb +0 -24
- data/views/forms/disabled_button.erb +0 -18
- data/views/forms/password_input.erb +0 -22
- data/views/forms/primary_button.erb +0 -18
- data/views/modules/readme.md +0 -10
- data/views/semantic_colors.erb +0 -1
- data/views/shared/_html_example.erb +0 -31
- data/views/shared/_sass_example.erb +0 -10
- data/views/typography.erb +0 -17
- data/views/typography/body_copy.erb +0 -19
- data/views/typography/general_typography.erb +0 -19
- data/views/ui_patterns/forms/text_input.erb +0 -10
data/lib/bin/toadstool
CHANGED
@@ -6,61 +6,105 @@ require "thor"
|
|
6
6
|
require "thor/group"
|
7
7
|
require 'pathname'
|
8
8
|
|
9
|
-
APP_PATH = File.expand_path('
|
9
|
+
APP_PATH = File.expand_path(File.join(__FILE__, '../../templates'))
|
10
10
|
|
11
11
|
module Toadstool
|
12
12
|
class Install < Thor::Group
|
13
13
|
include Thor::Actions
|
14
14
|
|
15
15
|
# Define arguments and options
|
16
|
-
argument :name
|
17
|
-
|
16
|
+
argument :name, {:default => './'}
|
17
|
+
|
18
18
|
def self.source_root
|
19
19
|
APP_PATH
|
20
20
|
end
|
21
21
|
|
22
22
|
def install_app
|
23
|
-
|
24
|
-
directory
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
copy_file "
|
23
|
+
# Per https://github.com/wycats/thor/pull/175#issuecomment-2250270
|
24
|
+
# If any empty directory is found, it's copied and all .empty_directory files are ignored.
|
25
|
+
# If any file name is wrapped within % signs, the text within the % signs will be executed
|
26
|
+
# as a method and replaced with the returned value.
|
27
|
+
|
28
|
+
directory "project/doc-src", "#{name}/doc-src"
|
29
|
+
directory "project/public", "#{name}/public"
|
30
|
+
directory "project/sass", "#{name}/sass"
|
31
|
+
directory "project/views", "#{name}/views"
|
32
|
+
|
33
|
+
copy_file "project/config.rb", "#{name}/config.rb"
|
34
|
+
copy_file "project/config.ru", "#{name}/config.ru"
|
35
|
+
copy_file "project/Gemfile", "#{name}/Gemfile"
|
36
|
+
copy_file "project/Rakefile", "#{name}/Rakefile"
|
37
|
+
copy_file "project/readme.md", "#{name}/readme.md"
|
38
|
+
copy_file "project/toadstool.rb", "#{name}/toadstool.rb"
|
39
|
+
end
|
40
|
+
end
|
41
|
+
|
42
|
+
class Server < Thor::Group
|
43
|
+
def exec_script_rails!
|
44
|
+
cwd = Dir.pwd
|
45
|
+
return unless in_rails_application? || in_rails_application_subdirectory?
|
46
|
+
exec 'rackup', *ARGV if in_rails_application?
|
47
|
+
Dir.chdir("..") do
|
48
|
+
# Recurse in a chdir block: if the search fails we want to be sure
|
49
|
+
# the application is generated in the original working directory.
|
50
|
+
exec_script_rails! unless cwd == Dir.pwd
|
51
|
+
end
|
52
|
+
rescue SystemCallError
|
53
|
+
# could not chdir, no problem just return
|
34
54
|
end
|
35
55
|
end
|
36
56
|
|
37
|
-
|
38
|
-
def exec_script_rails!
|
39
|
-
cwd = Dir.pwd
|
40
|
-
return unless in_rails_application? || in_rails_application_subdirectory?
|
41
|
-
exec 'rackup', *ARGV if in_rails_application?
|
42
|
-
Dir.chdir("..") do
|
43
|
-
# Recurse in a chdir block: if the search fails we want to be sure
|
44
|
-
# the application is generated in the original working directory.
|
45
|
-
exec_script_rails! unless cwd == Dir.pwd
|
46
|
-
end
|
47
|
-
rescue SystemCallError
|
48
|
-
# could not chdir, no problem just return
|
49
|
-
end
|
50
|
-
|
51
|
-
no_tasks do
|
57
|
+
# no_tasks do
|
52
58
|
def in_rails_application?
|
53
59
|
File.exists?('config.ru')
|
54
60
|
end
|
55
|
-
|
56
|
-
|
61
|
+
|
62
|
+
|
57
63
|
def in_rails_application_subdirectory?(path = Pathname.new(Dir.pwd))
|
58
64
|
File.exists?(File.join(path, 'config.ru')) || !path.root? && in_rails_application_subdirectory?(path.parent)
|
59
65
|
end
|
60
|
-
end
|
61
|
-
|
66
|
+
# end
|
67
|
+
|
68
|
+
# end
|
69
|
+
#
|
70
|
+
#
|
71
|
+
# module Toadstool
|
72
|
+
class Generator < Thor
|
73
|
+
include Thor::Actions
|
74
|
+
argument :name
|
75
|
+
argument :state
|
76
|
+
|
77
|
+
desc 'ts_module', "Generate a module"
|
78
|
+
def ts_module
|
79
|
+
create_file "views/modules/#{name}/_#{state}.erb"
|
80
|
+
create_file "views/modules/#{name}/readme.md"
|
81
|
+
create_file "sass/modules/#{name}/#{state}/_#{state}.sass", "@import 'mixins'\n@import 'extends'"
|
82
|
+
create_file "sass/modules/#{name}/#{state}/_extends.sass"
|
83
|
+
create_file "sass/modules/#{name}/#{state}/_mixins.scss"
|
84
|
+
|
85
|
+
create_file 'sass/_modules.sass' if !File.exist?('sass/_modules.sass')
|
86
|
+
|
87
|
+
append_file 'sass/_modules.sass', "@import 'modules/#{name}/#{state}/#{state}'"
|
88
|
+
end
|
89
|
+
|
90
|
+
desc 'ts_pattern', "Generate a module"
|
91
|
+
def ts_pattern
|
92
|
+
create_file "views/ui_patterns/#{name}/_#{state}.erb"
|
93
|
+
create_file "views/ui_patterns/#{name}/readme.md"
|
94
|
+
create_file "sass/ui_patterns/#{name}/#{state}/_#{state}.sass", "@import 'mixins'\n@import 'extends'"
|
95
|
+
create_file "sass/ui_patterns/#{name}/#{state}/_extends.sass"
|
96
|
+
create_file "sass/ui_patterns/#{name}/#{state}/_mixins.scss"
|
97
|
+
|
98
|
+
create_file 'sass/_ui_patterns.sass' if !File.exist?('sass/_ui_patterns.sass')
|
99
|
+
|
100
|
+
append_file 'sass/_ui_patterns.sass', "@import 'ui_patterns/#{name}/#{state}/#{state}'"
|
101
|
+
end
|
102
|
+
end
|
62
103
|
end
|
63
104
|
|
105
|
+
|
106
|
+
|
107
|
+
|
64
108
|
ARGV << '--help' if ARGV.empty?
|
65
109
|
|
66
110
|
aliases = {
|
@@ -89,6 +133,9 @@ when 'install'
|
|
89
133
|
Toadstool::Install.start
|
90
134
|
when 'server'
|
91
135
|
Toadstool::Server.start
|
136
|
+
|
137
|
+
when 'generate'
|
138
|
+
Toadstool::Generator.start
|
92
139
|
else
|
93
140
|
puts "Error: Command '#{command}' not recognized"
|
94
141
|
if %x{rake #{command} --dry-run 2>&1 } && $?.success?
|
@@ -0,0 +1,33 @@
|
|
1
|
+
// App Config - this is where most of your magic will happen
|
2
|
+
// ------------------------------------------------------------------------------
|
3
|
+
@import "toadstool/config"; // Editing defaults here will override any set in the Stipe gem
|
4
|
+
|
5
|
+
|
6
|
+
// Want web fonts? We got those too.
|
7
|
+
// ------------------------------------------------------------------------------
|
8
|
+
@import "toadstool/web_fonts";
|
9
|
+
|
10
|
+
|
11
|
+
|
12
|
+
// Following sequence will load the necessary Stipe libraries
|
13
|
+
// ------------------------------------------------------------------------------
|
14
|
+
@import "stipe/media";
|
15
|
+
@import "stipe/stipe";
|
16
|
+
@import "stipe/media";
|
17
|
+
@import "stipe/typography";
|
18
|
+
@import "stipe/grid";
|
19
|
+
@import "stipe/forms";
|
20
|
+
@import "stipe/color";
|
21
|
+
@import "stipe/gradients";
|
22
|
+
|
23
|
+
|
24
|
+
|
25
|
+
// This where you start building your own styles.
|
26
|
+
// ------------------------------------------------------------------------------
|
27
|
+
@import "toadstool/typography";
|
28
|
+
@import "toadstool/design";
|
29
|
+
@import "toadstool/forms";
|
30
|
+
@import "toadstool/buttons";
|
31
|
+
@import "toadstool/grids";
|
32
|
+
@import "toadstool/ui_patterns";
|
33
|
+
@import "toadstool/modules";
|
@@ -0,0 +1,22 @@
|
|
1
|
+
[class*="toadstool"] {
|
2
|
+
.nav_toggle {
|
3
|
+
@include linear_gradient_w3c ($alpha_gray, #{$delta_gray 0%, $alpha_gray 100%});
|
4
|
+
&:hover {
|
5
|
+
@include linear_gradient_w3c ($alpha_gray, #{$alpha_gray 0%, $delta_gray 100%});
|
6
|
+
border-color: $alpha_gray;
|
7
|
+
box-shadow: 0 0 0;
|
8
|
+
}
|
9
|
+
text-shadow: 0 0 0;
|
10
|
+
box-shadow: 0 0 0;
|
11
|
+
border-color: $alpha_gray;
|
12
|
+
float: right;
|
13
|
+
display: none;
|
14
|
+
color: $white;
|
15
|
+
@media #{$mobile} {
|
16
|
+
display: block;
|
17
|
+
width: auto;
|
18
|
+
padding: rem(15) rem(10) rem(10) rem(10);
|
19
|
+
font-weight: normal;
|
20
|
+
}
|
21
|
+
}
|
22
|
+
}
|
@@ -0,0 +1,228 @@
|
|
1
|
+
// The config file is intended to allow users to quickly redefine core elements of the design
|
2
|
+
// that will cascade throughout the css to get your design up and running FAST!
|
3
|
+
|
4
|
+
|
5
|
+
|
6
|
+
///// Typography configuration /////
|
7
|
+
// -----------------------------------------------------------------------------
|
8
|
+
// $font_size: 12 !default;
|
9
|
+
//
|
10
|
+
$heading_1: 32 !default;
|
11
|
+
$heading_2: 24 !default;
|
12
|
+
// $heading_3: 28 !default;
|
13
|
+
// $heading_4: 18 !default;
|
14
|
+
// $heading_5: 18 !default;
|
15
|
+
// $heading_6: 18 !default;
|
16
|
+
//
|
17
|
+
// $line: $font_size * 1.5 !default;
|
18
|
+
//
|
19
|
+
// $small_point_size: 10 !default;
|
20
|
+
// $large_point_size: 14 !default;
|
21
|
+
//
|
22
|
+
// $primary_font_family: #{"Helvetica Neue", Arial, sans-serif} !default;
|
23
|
+
// $secondary_font_family: #{"Helvetica Neue", Arial, sans-serif} !default;
|
24
|
+
$heading_font_family: #{"Helvetica Neue", Arial, sans-serif} !default;
|
25
|
+
|
26
|
+
|
27
|
+
|
28
|
+
///// Default webfont directory /////
|
29
|
+
// -----------------------------------------------------------------------------
|
30
|
+
// $webfont_directory: "/fonts/" !default;
|
31
|
+
|
32
|
+
|
33
|
+
|
34
|
+
///// default image directory /////
|
35
|
+
// -----------------------------------------------------------------------------
|
36
|
+
// In Sinatra, the images folder resides in the public directory. This directory is not made publically accessible,
|
37
|
+
// so simply referencing the images directory will be fine.
|
38
|
+
// $imgDir: "/images/" !default;
|
39
|
+
|
40
|
+
|
41
|
+
|
42
|
+
/////// OOCSS generic base colors ////////
|
43
|
+
// -----------------------------------------------------------------------------
|
44
|
+
// Red, green, yellow, blue, accent and black is not law, but a common theme in most designs.
|
45
|
+
// Using Toadstool, all you need to do is edit these 6 hex values and everything else is created
|
46
|
+
// by magic, unicorns and fairy dust!
|
47
|
+
// $alpha_primary: #5a2e2e !default; // red
|
48
|
+
// $bravo_primary: #3e4147 !default; // green
|
49
|
+
// $charlie_primary: #fffedf !default; // yellow
|
50
|
+
// $delta_primary: #2a2c31 !default; // blue
|
51
|
+
// $echo_primary: #dfba69 !default; // accent
|
52
|
+
|
53
|
+
// $alpha_gray: #333 !default; //black
|
54
|
+
|
55
|
+
|
56
|
+
|
57
|
+
/////// Toadstool color math ////////
|
58
|
+
// -----------------------------------------------------------------------------
|
59
|
+
// This is a bootstrap template for creating an array of colors
|
60
|
+
// If this is not for you, feel free to comment out
|
61
|
+
@import "stipe/color/default_color_palette";
|
62
|
+
|
63
|
+
// Don't like Stipe's color pallet, no worries. Uncomment these lines and go for it!
|
64
|
+
// @import "color/color_math";
|
65
|
+
// @import "color/grayscale_math";
|
66
|
+
|
67
|
+
|
68
|
+
/////// Grid configuration ////////
|
69
|
+
// -----------------------------------------------------------------------------
|
70
|
+
// setting default units of measurement for Toadstool grid solution
|
71
|
+
// $grid_type: 12 !default; // sets default column grid
|
72
|
+
// $grid_uom: percent !default; // use either ``em`` or ``percent``
|
73
|
+
// $grid_padding_l: 0 !default; // sets default left/right padding inside grid block
|
74
|
+
// $grid_padding_r: 0 !default; // sets default left/right padding inside grid block
|
75
|
+
// $grid_padding_tb: 0 !default; // sets default top/bottom padding inside grid block
|
76
|
+
// $grid_border: 0 !default; // sets default border width on all grid blocks
|
77
|
+
// $grid_child: none !default; // sets parent child relationship between grid blocks
|
78
|
+
// $grid_align: default !default; // by default grids float left. Optional argument is ``center``
|
79
|
+
// $col_base: 10 !default; // equal to 10px in the standard 960.gs
|
80
|
+
// $col_gutter: $col_base * 2 !default; // sets default grid gutter width
|
81
|
+
// $grid_960: 960 / 100% !default; // grid math for percentages
|
82
|
+
|
83
|
+
|
84
|
+
|
85
|
+
|
86
|
+
/////// Toadstool's semantic combinations ////////
|
87
|
+
// Semantic variables should always be matched up with abstract values, never semantic to semantic
|
88
|
+
// -----------------------------------------------------------------------------
|
89
|
+
|
90
|
+
// abstract 'white' value to easily applied to semantic class objects
|
91
|
+
// $white: #fff !default;
|
92
|
+
|
93
|
+
// default shadow colors
|
94
|
+
// $shadow_color: fade-out($alpha_gray, 0.5) !default;
|
95
|
+
|
96
|
+
// primary header font color
|
97
|
+
// $primary_header_color: $alpha_gray !default;
|
98
|
+
|
99
|
+
// primary font color for the app
|
100
|
+
// $primary_text: $bravo_gray !default;
|
101
|
+
|
102
|
+
// default <a href="#"> link color
|
103
|
+
// $href_color: $alpha_color_delta !default;
|
104
|
+
// $href_color_alt: $delta_color_bravo !default;
|
105
|
+
|
106
|
+
// used with the <ins> tag
|
107
|
+
// http://www.w3schools.com/tags/tag_ins.asp
|
108
|
+
// $ins_color: $charlie_color !default;
|
109
|
+
|
110
|
+
// used with the <mark> tag
|
111
|
+
// http://www.w3schools.com/html5/tag_mark.asp
|
112
|
+
// $mark_color: $charlie_color !default;
|
113
|
+
|
114
|
+
// webkit tap highlight color
|
115
|
+
// $webkit_tap_hightlight: $delta_color_bravo !default;
|
116
|
+
|
117
|
+
// overrides the default content selection color in the browser
|
118
|
+
// $selection_color: $charlie_color !default;
|
119
|
+
// $selection_text_color: $primary_text !default;
|
120
|
+
|
121
|
+
// default border color
|
122
|
+
// $border_color: $charlie_gray !default;
|
123
|
+
|
124
|
+
|
125
|
+
|
126
|
+
// Config defaults for forms
|
127
|
+
// -----------------------------------------------------------------------------
|
128
|
+
// $alert_background_color: $alpha_color !default;
|
129
|
+
|
130
|
+
// $input_disabled: $bravo_gray !default;
|
131
|
+
// $input_disabled_bkg: lighten($input_disabled, 75%) !default;
|
132
|
+
// $input_disabled_border: lighten($input_disabled, 50%) !default;
|
133
|
+
// $input_disabled_text: lighten($input_disabled, 50%) !default;
|
134
|
+
//
|
135
|
+
// $form_field_background_color: $white !default;
|
136
|
+
// $form_field_focus_color: $white !default;
|
137
|
+
// $form_field_fail_bkg: $white !default;
|
138
|
+
//
|
139
|
+
// $form_field_border: $charlie_gray !default;
|
140
|
+
// $form_field_border_fail: $alpha_color !default;
|
141
|
+
// $form_field_focus_border_color: $charlie_gray !default;
|
142
|
+
//
|
143
|
+
// $form_field_text: $primary_text !default;
|
144
|
+
// $error_text: $alpha_color !default;
|
145
|
+
// $form_field_fail: $alpha_color !default;
|
146
|
+
// $form_field_text_fail: $alpha_color !default;
|
147
|
+
// $instructional_text: $charlie_gray !default;
|
148
|
+
|
149
|
+
|
150
|
+
|
151
|
+
// Config defaults for buttons
|
152
|
+
// -----------------------------------------------------------------------------
|
153
|
+
// $primary_button_border_color: $bravo_color !default;
|
154
|
+
// $secondary_button_border_color: $bravo_gray !default;
|
155
|
+
// $button_text: $white !default;
|
156
|
+
|
157
|
+
|
158
|
+
|
159
|
+
// Config defaults for ``standard_rounded_border`` mixin
|
160
|
+
// -----------------------------------------------------------------------------
|
161
|
+
$standard_round_corner: 3 !default; // sets default border radius
|
162
|
+
$standard_corner_width: 1px !default; // sets default border width
|
163
|
+
$standard_border_color: $border_color !default; // sets default border color
|
164
|
+
|
165
|
+
|
166
|
+
|
167
|
+
// Config defaults for ``standard_block_spacing`` mixin
|
168
|
+
// -----------------------------------------------------------------------------
|
169
|
+
$default_block_spacing: 20 !default; // sets margin-bottom
|
170
|
+
|
171
|
+
|
172
|
+
|
173
|
+
// Config defaults for site border style
|
174
|
+
// -----------------------------------------------------------------------------
|
175
|
+
$standard_border_style: solid !default;
|
176
|
+
|
177
|
+
|
178
|
+
|
179
|
+
// Config defaults for ``standard_hr`` mixin
|
180
|
+
// -----------------------------------------------------------------------------
|
181
|
+
$standard_hr_spacing: 40 !default; // sets padding and margin bottom
|
182
|
+
$standard_hr_color: $delta_gray !default;
|
183
|
+
$standard_hr_width: 1px !default;
|
184
|
+
|
185
|
+
|
186
|
+
|
187
|
+
// Config values for all default shadows
|
188
|
+
// -----------------------------------------------------------------------------
|
189
|
+
$h-shadow: 0 !default; // horizontal shadow settings
|
190
|
+
$v-shadow: 2 !default; // vertical shaddow settings
|
191
|
+
$blur: 3 !default; // blur settings
|
192
|
+
|
193
|
+
$inset_color: $shadow_color !default; // for use with ``dual_box_shadow`` mixin
|
194
|
+
$ih-shadow: 0 !default; // inset horizontal shadow settings
|
195
|
+
$iv-shadow: 2 !default; // inset vertical shaddow settings
|
196
|
+
$is-shadow: 2 !default; // inset spread shaddow settings
|
197
|
+
$iblur: 3 !default; // inset blur settings
|
198
|
+
|
199
|
+
|
200
|
+
|
201
|
+
|
202
|
+
/////////////// UI @media breakpoint defaults ////////////////
|
203
|
+
// -----------------------------------------------------------------------------
|
204
|
+
// $tablet: "screen and (max-width: 64em)" !default;
|
205
|
+
// $tablet_portrait: "screen and (max-width: 50em) and (orientation: portrait)" !default;
|
206
|
+
// $tablet_landscape: "screen and (max-width: 50em) and (orientation: landscape)" !default;
|
207
|
+
//
|
208
|
+
// $mobile: "screen and (max-width: 30em)" !default;
|
209
|
+
// $mobile_portrait: "screen and (max-width: 30em) and (orientation : portrait)" !default;
|
210
|
+
// $mobile_landscape: "screen and (max-width: 30em) and (orientation : landscape)" !default;
|
211
|
+
|
212
|
+
|
213
|
+
// Compass function for creating grid background
|
214
|
+
// -----------------------------------------------------------------------------
|
215
|
+
// @import "compass/layout/grid-background";
|
216
|
+
// $grid-background-total-columns: 12;
|
217
|
+
// $grid-background-column-width: 60px;
|
218
|
+
// $grid-background-gutter-width: 20px;
|
219
|
+
// $grid-background-offset: 10px;
|
220
|
+
// $grid-background-column-color: scale-color($echo_primary,$lightness:80%);
|
221
|
+
|
222
|
+
|
223
|
+
|
224
|
+
|
225
|
+
|
226
|
+
|
227
|
+
|
228
|
+
|
@@ -0,0 +1,55 @@
|
|
1
|
+
|
2
|
+
|
3
|
+
.styleguide_main_content {
|
4
|
+
@include full_width_block(12);
|
5
|
+
|
6
|
+
.styleguide_article, .element_example {
|
7
|
+
@include grid(12.25, alphaomega, $grid_align: center, $grid_uom: em);
|
8
|
+
|
9
|
+
@media #{$tablet_portrait} {
|
10
|
+
@include grid(12.25, alphaomega, $grid_align: center);
|
11
|
+
}
|
12
|
+
|
13
|
+
@media #{$mobile} {
|
14
|
+
@include grid(12.25, alphaomega, $grid_align: center);
|
15
|
+
}
|
16
|
+
|
17
|
+
.toadstool_header, .toadstool_subheader {
|
18
|
+
@include grid(12);
|
19
|
+
@media #{$mobile} {
|
20
|
+
@include grid(4, $grid_context: 4);
|
21
|
+
}
|
22
|
+
}
|
23
|
+
|
24
|
+
section {
|
25
|
+
clear: both;
|
26
|
+
&:nth-of-type(1n+2) {
|
27
|
+
border-top: 1px dotted;
|
28
|
+
padding-top: em(20);
|
29
|
+
}
|
30
|
+
}
|
31
|
+
}
|
32
|
+
.element_example {
|
33
|
+
margin-bottom: em(20);
|
34
|
+
float: left;
|
35
|
+
background-image: url(data:image/gif;base64,R0lGODlhUAABAIAAAP/////l5SwAAAAAUAABAAACC4SPocvtD6NsqIICADs=);
|
36
|
+
&.col_24_grid {
|
37
|
+
background-image: url(data:image/gif;base64,R0lGODlhKAABAIAAAP/////l5SH5BAAAAAAALAAAAAAoAAEAAAIIhB2py+15TAEAOw==);
|
38
|
+
}
|
39
|
+
}
|
40
|
+
}
|
41
|
+
|
42
|
+
.hidden {
|
43
|
+
display: none;
|
44
|
+
}
|
45
|
+
|
46
|
+
.mobi_hidden {
|
47
|
+
@media #{$mobile} {
|
48
|
+
display: none;
|
49
|
+
}
|
50
|
+
}
|
51
|
+
|
52
|
+
code {
|
53
|
+
padding: em(2) em(5);
|
54
|
+
background: $charlie_color_hotel;
|
55
|
+
}
|