psique 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +7 -0
- data/.gitignore +14 -0
- data/Gemfile +5 -0
- data/LICENSE +22 -0
- data/README.md +2 -0
- data/Rakefile +34 -0
- data/assets/fonts/psique/roboto-bold.eot +0 -0
- data/assets/fonts/psique/roboto-bold.svg +593 -0
- data/assets/fonts/psique/roboto-bold.ttf +0 -0
- data/assets/fonts/psique/roboto-bold.woff +0 -0
- data/assets/fonts/psique/roboto-regular.eot +0 -0
- data/assets/fonts/psique/roboto-regular.svg +621 -0
- data/assets/fonts/psique/roboto-regular.ttf +0 -0
- data/assets/fonts/psique/roboto-regular.woff +0 -0
- data/assets/fonts/psique/sourcesanspro-bold.eot +0 -0
- data/assets/fonts/psique/sourcesanspro-bold.svg +954 -0
- data/assets/fonts/psique/sourcesanspro-bold.ttf +0 -0
- data/assets/fonts/psique/sourcesanspro-bold.woff +0 -0
- data/assets/fonts/psique/sourcesanspro-regular.eot +0 -0
- data/assets/fonts/psique/sourcesanspro-regular.svg +977 -0
- data/assets/fonts/psique/sourcesanspro-regular.ttf +0 -0
- data/assets/fonts/psique/sourcesanspro-regular.woff +0 -0
- data/assets/images/psique/.keep +0 -0
- data/assets/javascripts/psique.js.coffee +2 -0
- data/assets/javascripts/psique/panels.js.coffee +7 -0
- data/assets/stylesheets/psique.scss +19 -0
- data/assets/stylesheets/psique/_buttons.scss +222 -0
- data/assets/stylesheets/psique/_forms.scss +92 -0
- data/assets/stylesheets/psique/_grid.scss +20 -0
- data/assets/stylesheets/psique/_lists.scss +160 -0
- data/assets/stylesheets/psique/_mixins.scss +69 -0
- data/assets/stylesheets/psique/_panels.scss +148 -0
- data/assets/stylesheets/psique/_settings.scss +127 -0
- data/assets/stylesheets/psique/_summaries.scss +188 -0
- data/assets/stylesheets/psique/_typography.scss +70 -0
- data/doc/assets/_footer.html +7 -0
- data/doc/assets/_header.html +66 -0
- data/doc/assets/brick.png +0 -0
- data/doc/assets/css/doc.css +132 -0
- data/doc/assets/css/github.css +61 -0
- data/doc/assets/css/screen.css +16 -0
- data/doc/assets/script/components.js +89 -0
- data/doc/public/styleguide/brick.png +0 -0
- data/doc/public/styleguide/components.html +593 -0
- data/doc/public/styleguide/core.html +105 -0
- data/doc/public/styleguide/css/doc.css +132 -0
- data/doc/public/styleguide/css/github.css +61 -0
- data/doc/public/styleguide/css/screen.css +16 -0
- data/doc/public/styleguide/index.html +105 -0
- data/doc/public/styleguide/script/components.js +89 -0
- data/hologram_config.yml +28 -0
- data/lib/psique.rb +8 -0
- data/lib/psique/engine.rb +17 -0
- data/lib/psique/version.rb +3 -0
- data/psique.gemspec +33 -0
- data/test/dummy/README.rdoc +3 -0
- data/test/dummy/Rakefile +6 -0
- data/test/dummy/app/assets/images/.keep +0 -0
- data/test/dummy/app/assets/javascripts/application.js +2 -0
- data/test/dummy/app/assets/stylesheets/application.css.scss +1 -0
- data/test/dummy/app/controllers/application_controller.rb +5 -0
- data/test/dummy/app/controllers/styleguide_controller.rb +4 -0
- data/test/dummy/app/views/layouts/application.html.haml +15 -0
- data/test/dummy/app/views/styleguide/index.html.haml +17 -0
- data/test/dummy/bin/bundle +3 -0
- data/test/dummy/bin/rails +4 -0
- data/test/dummy/bin/rake +4 -0
- data/test/dummy/config.ru +4 -0
- data/test/dummy/config/application.rb +10 -0
- data/test/dummy/config/boot.rb +5 -0
- data/test/dummy/config/database.yml +25 -0
- data/test/dummy/config/environment.rb +5 -0
- data/test/dummy/config/environments/development.rb +37 -0
- data/test/dummy/config/environments/production.rb +78 -0
- data/test/dummy/config/environments/test.rb +39 -0
- data/test/dummy/config/initializers/assets.rb +8 -0
- data/test/dummy/config/initializers/backtrace_silencers.rb +7 -0
- data/test/dummy/config/initializers/cookies_serializer.rb +3 -0
- data/test/dummy/config/initializers/filter_parameter_logging.rb +4 -0
- data/test/dummy/config/initializers/inflections.rb +16 -0
- data/test/dummy/config/initializers/mime_types.rb +4 -0
- data/test/dummy/config/initializers/session_store.rb +3 -0
- data/test/dummy/config/initializers/wrap_parameters.rb +14 -0
- data/test/dummy/config/locales/en.yml +23 -0
- data/test/dummy/config/routes.rb +3 -0
- data/test/dummy/config/secrets.yml +22 -0
- data/test/psique_test.rb +7 -0
- data/test/test_helper.rb +15 -0
- metadata +1185 -0
|
@@ -0,0 +1,105 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html>
|
|
3
|
+
<head>
|
|
4
|
+
<title>My Style Guide Core</title>
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
|
|
6
|
+
<link rel="shortcut icon" href="./brick.png" />
|
|
7
|
+
|
|
8
|
+
<!-- Styleguide CSS -->
|
|
9
|
+
<link rel="stylesheet" href="/styleguide/css/doc.css">
|
|
10
|
+
<link rel="stylesheet" href="/styleguide/css/github.css">
|
|
11
|
+
<link rel="stylesheet" href="/styleguide/css/screen.css">
|
|
12
|
+
|
|
13
|
+
<!-- CSS to be documented -->
|
|
14
|
+
<link rel="stylesheet" href="/assets/psique.scss">
|
|
15
|
+
|
|
16
|
+
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
|
|
17
|
+
<!--[if lt IE 9]>
|
|
18
|
+
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv.min.js"></script>
|
|
19
|
+
<script src="//oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
|
|
20
|
+
<![endif]-->
|
|
21
|
+
|
|
22
|
+
<!-- Main libraries -->
|
|
23
|
+
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
|
|
24
|
+
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js"></script>
|
|
25
|
+
<script src="/styleguide/script/components.js"></script>
|
|
26
|
+
<script src="/assets/psique.js"></script>
|
|
27
|
+
</head>
|
|
28
|
+
|
|
29
|
+
<body class="styleguide">
|
|
30
|
+
<header class="header pbn" role="banner">
|
|
31
|
+
<div class="backgroundHighlight typeReversed1">
|
|
32
|
+
<div class="container">
|
|
33
|
+
<h1 class="h2 mvs">My Style Guide</h1>
|
|
34
|
+
</div>
|
|
35
|
+
</div>
|
|
36
|
+
<div class="backgroundLowlight typeReversed1">
|
|
37
|
+
<div class="container">
|
|
38
|
+
<span>
|
|
39
|
+
<ul class="docNav listInline">
|
|
40
|
+
|
|
41
|
+
<li><a href="/styleguide/components.html">Components</a></li>
|
|
42
|
+
|
|
43
|
+
<li><a href="/styleguide/core.html">Core</a></li>
|
|
44
|
+
|
|
45
|
+
</ul>
|
|
46
|
+
</span>
|
|
47
|
+
</div>
|
|
48
|
+
</div>
|
|
49
|
+
<!-- //header/container -->
|
|
50
|
+
</header>
|
|
51
|
+
|
|
52
|
+
<div class="content">
|
|
53
|
+
<section class="container">
|
|
54
|
+
<div class="line">
|
|
55
|
+
|
|
56
|
+
<div class="col cols4">
|
|
57
|
+
<div class="componentMenu box boxBasic backgroundBasic">
|
|
58
|
+
<div class="boxBody pan">
|
|
59
|
+
<ul class="componentList listBorderedHover">
|
|
60
|
+
|
|
61
|
+
<li><a href="#typography">Typography</a></li>
|
|
62
|
+
|
|
63
|
+
</ul>
|
|
64
|
+
</div>
|
|
65
|
+
</div>
|
|
66
|
+
</div>
|
|
67
|
+
|
|
68
|
+
<div class="main col cols20 lastCol">
|
|
69
|
+
<h1 id="typography">Typography</h1>
|
|
70
|
+
|
|
71
|
+
<p><br/></p>
|
|
72
|
+
|
|
73
|
+
<h2>Headings</h2>
|
|
74
|
+
|
|
75
|
+
<p>All HTML headings, <code><h1></code> through <code><h6></code>, are available.</p>
|
|
76
|
+
|
|
77
|
+
<h1>H1. Lorem ipsum dolor sit amet, consectetur adipisicing</h1>
|
|
78
|
+
|
|
79
|
+
<h2>H2. Lorem ipsum dolor sit amet, consectetur adipisicing</h2>
|
|
80
|
+
|
|
81
|
+
<h3>H3. Lorem ipsum dolor sit amet, consectetur adipisicing</h3>
|
|
82
|
+
|
|
83
|
+
<h4>H4. Lorem ipsum dolor sit amet, consectetur adipisicing</h4>
|
|
84
|
+
|
|
85
|
+
<h5>H5. Lorem ipsum dolor sit amet, consectetur adipisicing</h5>
|
|
86
|
+
|
|
87
|
+
<h6>H6. Lorem ipsum dolor sit amet, consectetur adipisicing</h6>
|
|
88
|
+
|
|
89
|
+
<p><br/></p>
|
|
90
|
+
|
|
91
|
+
<h2>Body copy</h2>
|
|
92
|
+
|
|
93
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
|
|
94
|
+
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
|
95
|
+
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
|
96
|
+
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
|
|
97
|
+
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
|
|
98
|
+
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
|
99
|
+
</section>
|
|
100
|
+
<footer>
|
|
101
|
+
<p>This documentation generated using <a href="http://github.com/trulia/hologram">Hologram</a>
|
|
102
|
+
</footer>
|
|
103
|
+
</div>
|
|
104
|
+
</body>
|
|
105
|
+
</html>
|
|
@@ -0,0 +1,132 @@
|
|
|
1
|
+
.container {
|
|
2
|
+
max-width: 1128px;
|
|
3
|
+
width: auto;
|
|
4
|
+
margin: 0 auto;
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
.content {
|
|
8
|
+
margin-top: 5px;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
.main > h1 {
|
|
13
|
+
margin-top: 30px;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
.main > h1:first-child {
|
|
17
|
+
margin-top: 0;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
footer {
|
|
21
|
+
margin-top: 20px;
|
|
22
|
+
text-align: center;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
|
|
26
|
+
.componentMenu {
|
|
27
|
+
max-height: 535px;
|
|
28
|
+
width: 175px;
|
|
29
|
+
overflow-y: auto;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
blockquote:before {
|
|
33
|
+
content: "Design Note:";
|
|
34
|
+
font-weight: bold;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
blockquote {
|
|
38
|
+
border: 1px solid #eee;
|
|
39
|
+
border-radius: 4px;
|
|
40
|
+
font-family: "Comic Sans MS";
|
|
41
|
+
font-size:16px;
|
|
42
|
+
margin: 10px 0;
|
|
43
|
+
padding: 5px;
|
|
44
|
+
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
|
|
48
|
+
code {
|
|
49
|
+
padding: 2px 4px;
|
|
50
|
+
color: #d14;
|
|
51
|
+
white-space: nowrap;
|
|
52
|
+
background-color: #f9f9f9;
|
|
53
|
+
border: 1px solid #ccc;
|
|
54
|
+
border-radius: 4px;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
div.codeExample, div.jsExample {
|
|
58
|
+
border: 1px solid #ccc;
|
|
59
|
+
border-radius: 4px;
|
|
60
|
+
margin: 10px 0;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
div.jsExample {
|
|
64
|
+
border-top: 0px;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
div.codeExample:before, div.jsExample:before {
|
|
68
|
+
font-family: "OpenSans", sans-serif;
|
|
69
|
+
color: #222;
|
|
70
|
+
border: 1px solid #ccc;
|
|
71
|
+
border-radius: 4px;
|
|
72
|
+
border-bottom-left-radius: 0;
|
|
73
|
+
border-top-right-radius: 0;
|
|
74
|
+
position: relative;
|
|
75
|
+
padding: 2px;
|
|
76
|
+
display: block;
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
div.codeExample:before {
|
|
80
|
+
content: "Example";
|
|
81
|
+
background-color: #f9f9f9;
|
|
82
|
+
width: 60px;
|
|
83
|
+
top: -1px;
|
|
84
|
+
left: -1px;
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
div.jsExample:before {
|
|
88
|
+
content: "JS Example";
|
|
89
|
+
background-color: #fff;
|
|
90
|
+
width: 80px;
|
|
91
|
+
top: -11px;
|
|
92
|
+
left: -11px;
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
div.codeBlock, div.exampleOutput {
|
|
96
|
+
padding: 10px;
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
div.codeBlock {
|
|
100
|
+
background-color: #f9f9f9;
|
|
101
|
+
border-top: 1px solid #ccc;
|
|
102
|
+
border-bottom-left-radius: 4px;
|
|
103
|
+
border-bottom-right-radius: 4px;
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
.docSwatch {
|
|
107
|
+
min-height: 218.21px;
|
|
108
|
+
border: 1px solid #ccc;
|
|
109
|
+
padding: 10px 0 0 10px;
|
|
110
|
+
font-size: 12px;
|
|
111
|
+
margin-bottom: 5px;
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
.codeExample .line > div:after {
|
|
115
|
+
content: attr(class);
|
|
116
|
+
display: block;
|
|
117
|
+
min-height: 40px;
|
|
118
|
+
line-height: 40px;
|
|
119
|
+
background-color: #EEE;
|
|
120
|
+
text-align: center;
|
|
121
|
+
border-radius: 3px;
|
|
122
|
+
font-size: 12px;
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
table, table tr, table td, table th {
|
|
126
|
+
padding: 7px;
|
|
127
|
+
border: 1px solid #ccc;
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
table th {
|
|
131
|
+
font-weight: bold;
|
|
132
|
+
}
|
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
hll { background-color: #ffffcc }
|
|
2
|
+
.c { color: #999988; font-style: italic } /* Comment */
|
|
3
|
+
.err { color: #a61717; background-color: #e3d2d2 } /* Error */
|
|
4
|
+
.k { color: #000000; font-weight: bold } /* Keyword */
|
|
5
|
+
.o { color: #000000; font-weight: bold } /* Operator */
|
|
6
|
+
.cm { color: #999988; font-style: italic } /* Comment.Multiline */
|
|
7
|
+
.cp { color: #999999; font-weight: bold; font-style: italic } /* Comment.Preproc */
|
|
8
|
+
.c1 { color: #999988; font-style: italic } /* Comment.Single */
|
|
9
|
+
.cs { color: #999999; font-weight: bold; font-style: italic } /* Comment.Special */
|
|
10
|
+
.gd { color: #000000; background-color: #ffdddd } /* Generic.Deleted */
|
|
11
|
+
.ge { color: #000000; font-style: italic } /* Generic.Emph */
|
|
12
|
+
.gr { color: #aa0000 } /* Generic.Error */
|
|
13
|
+
.gh { color: #999999 } /* Generic.Heading */
|
|
14
|
+
.gi { color: #000000; background-color: #ddffdd } /* Generic.Inserted */
|
|
15
|
+
.go { color: #888888 } /* Generic.Output */
|
|
16
|
+
.gp { color: #555555 } /* Generic.Prompt */
|
|
17
|
+
.gs { font-weight: bold } /* Generic.Strong */
|
|
18
|
+
.gu { color: #aaaaaa } /* Generic.Subheading */
|
|
19
|
+
.gt { color: #aa0000 } /* Generic.Traceback */
|
|
20
|
+
.kc { color: #000000; font-weight: bold } /* Keyword.Constant */
|
|
21
|
+
.kd { color: #000000; font-weight: bold } /* Keyword.Declaration */
|
|
22
|
+
.kn { color: #000000; font-weight: bold } /* Keyword.Namespace */
|
|
23
|
+
.kp { color: #000000; font-weight: bold } /* Keyword.Pseudo */
|
|
24
|
+
.kr { color: #000000; font-weight: bold } /* Keyword.Reserved */
|
|
25
|
+
.kt { color: #445588; font-weight: bold } /* Keyword.Type */
|
|
26
|
+
.m { color: #009999 } /* Literal.Number */
|
|
27
|
+
.s { color: #d01040 } /* Literal.String */
|
|
28
|
+
.na { color: #008080 } /* Name.Attribute */
|
|
29
|
+
.nb { color: #0086B3 } /* Name.Builtin */
|
|
30
|
+
.nc { color: #445588; font-weight: bold } /* Name.Class */
|
|
31
|
+
.no { color: #008080 } /* Name.Constant */
|
|
32
|
+
.nd { color: #3c5d5d; font-weight: bold } /* Name.Decorator */
|
|
33
|
+
.ni { color: #800080 } /* Name.Entity */
|
|
34
|
+
.ne { color: #990000; font-weight: bold } /* Name.Exception */
|
|
35
|
+
.nf { color: #990000; font-weight: bold } /* Name.Function */
|
|
36
|
+
.nl { color: #990000; font-weight: bold } /* Name.Label */
|
|
37
|
+
.nn { color: #555555 } /* Name.Namespace */
|
|
38
|
+
.nt { color: #000080 } /* Name.Tag */
|
|
39
|
+
.nv { color: #008080 } /* Name.Variable */
|
|
40
|
+
.ow { color: #000000; font-weight: bold } /* Operator.Word */
|
|
41
|
+
.w { color: #bbbbbb } /* Text.Whitespace */
|
|
42
|
+
.mf { color: #009999 } /* Literal.Number.Float */
|
|
43
|
+
.mh { color: #009999 } /* Literal.Number.Hex */
|
|
44
|
+
.mi { color: #009999 } /* Literal.Number.Integer */
|
|
45
|
+
.mo { color: #009999 } /* Literal.Number.Oct */
|
|
46
|
+
.sb { color: #d01040 } /* Literal.String.Backtick */
|
|
47
|
+
.sc { color: #d01040 } /* Literal.String.Char */
|
|
48
|
+
.sd { color: #d01040 } /* Literal.String.Doc */
|
|
49
|
+
.s2 { color: #d01040 } /* Literal.String.Double */
|
|
50
|
+
.se { color: #d01040 } /* Literal.String.Escape */
|
|
51
|
+
.sh { color: #d01040 } /* Literal.String.Heredoc */
|
|
52
|
+
.si { color: #d01040 } /* Literal.String.Interpol */
|
|
53
|
+
.sx { color: #d01040 } /* Literal.String.Other */
|
|
54
|
+
.sr { color: #009926 } /* Literal.String.Regex */
|
|
55
|
+
.s1 { color: #d01040 } /* Literal.String.Single */
|
|
56
|
+
.ss { color: #990073 } /* Literal.String.Symbol */
|
|
57
|
+
.bp { color: #999999 } /* Name.Builtin.Pseudo */
|
|
58
|
+
.vc { color: #008080 } /* Name.Variable.Class */
|
|
59
|
+
.vg { color: #008080 } /* Name.Variable.Global */
|
|
60
|
+
.vi { color: #008080 } /* Name.Variable.Instance */
|
|
61
|
+
.il { color: #009999 } /* Literal.Number.Integer.Long */
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
@charset "UTF-8";article,aside,details,figcaption,figure,footer,header,hgroup,nav,section,summary{display:block}audio,canvas,video{display:inline-block;*display:inline;*zoom:1}audio:not([controls]){display:none;height:0}[hidden]{display:none}html{font-size:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}body{margin:0}a:focus{outline:thin dotted}a:active,a:hover{outline:0}b,strong{font-weight:bold}dfn{font-style:italic}pre{white-space:pre;white-space:pre-wrap;word-wrap:break-word}q{quotes:none}q:before,q:after{content:'';content:none}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}dl,dt,dd,menu,ol,ul{margin:0;padding:0;list-style-type:none}img{border:0;-ms-interpolation-mode:bicubic}svg:not(:root){overflow:hidden}figure{margin:0}form{margin:0}fieldset{margin:0;padding:0}legend{border:0;padding:0;white-space:normal;*margin-left:-7px}button,input,select,textarea{font-size:100%;margin:0;vertical-align:baseline;*vertical-align:middle}button,input{line-height:normal}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;*overflow:visible}button[disabled],input[disabled]{cursor:default}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;*height:13px;*width:13px}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}th{font-weight:normal}.main{overflow:hidden;*overflow:visible;zoom:1}.line .lastCol{display:table-cell;vertical-align:top;width:10000px!important;*display:block;*zoom:1;*width:auto!important}.line,.box,.box .boxHead,.box .boxFoot,.content>section,.container{zoom:1}.line:before,.box:before,.box .boxHead:before,.box .boxFoot:before,.content>section:before,.container:before,.line:after,.box:after,.box .boxHead:after,.box .boxFoot:after,.content>section:after,.container:after{content:" ";display:table}.line:after,.box:after,.box .boxHead:after,.box .boxFoot:after,.content>section:after,.container:after{clear:both}.listInline>li{display:inline-block;*display:inline;*zoom:1}.hideVisually{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.hideVisually.focusable:active,.hideVisually.focusable:focus{clip:auto;height:auto;margin:0;overflow:visible;position:static;width:auto}.hideText{background-color:transparent;border:0;overflow:hidden;*text-indent:-9999px}.hideText:before{content:"";display:block;width:0;height:100%}.hideFully{display:none!important;visibility:hidden}.txtC,table .txtC,table tr .txtC{text-align:center}.txtL,table .txtL,table tr .txtL{text-align:left}.txtR,table .txtR,table tr .txtR{text-align:right}.txtT,table .txtT,table tr .txtT{vertical-align:top}.txtB,table .txtB,table tr .txtB{vertical-align:bottom}.txtM,table .txtM,table tr .txtM{vertical-align:middle}p,.headingDoubleSub,ol,ul,.table{margin-top:5px;margin-bottom:5px}.box{margin-top:21px;margin-bottom:21px}table h1,table h2,table h3,table h4,table h5,table h6,table p,table ul,table ol,table dl,table blockquote,table .media,table pre{margin-left:0;margin-right:0}.pan{padding:0!important}.man{margin:0!important}.pas{padding:5px!important}.mas{margin:5px!important}.pam{padding:10px!important}.mam{margin:10px!important}.pal{padding:21px!important}.mal{margin:21px!important}.pvn{padding-top:0!important;padding-bottom:0!important}.mvn{margin-top:0!important;margin-bottom:0!important}.pvs{padding-top:5px!important;padding-bottom:5px!important}.mvs{margin-top:5px!important;margin-bottom:5px!important}.pvm{padding-top:10px!important;padding-bottom:10px!important}.mvm{margin-top:10px!important;margin-bottom:10px!important}.pvl{padding-top:21px!important;padding-bottom:21px!important}.mvl{margin-top:21px!important;margin-bottom:21px!important}.phn{padding-left:0!important;padding-right:0!important}.mhn{margin-left:0!important;margin-right:0!important}.phs{padding-left:5px!important;padding-right:5px!important}.mhs{margin-left:5px!important;margin-right:5px!important}.phm{padding-left:10px!important;padding-right:10px!important}.mhm{margin-left:10px!important;margin-right:10px!important}.phl{padding-left:21px!important;padding-right:21px!important}.mhl{margin-left:21px!important;margin-right:21px!important}.ptn{padding-top:0!important}.mtn{margin-top:0!important}.pts{padding-top:5px!important}.mts{margin-top:5px!important}.ptm{padding-top:10px!important}.mtm{margin-top:10px!important}.ptl{padding-top:21px!important}.mtl{margin-top:21px!important}.prn{padding-right:0!important}.mrn{margin-right:0!important}.prs{padding-right:5px!important}.mrs{margin-right:5px!important}.prm{padding-right:10px!important}.mrm{margin-right:10px!important}.prl{padding-right:21px!important}.mrl{margin-right:21px!important}.pbn{padding-bottom:0!important}.mbn{margin-bottom:0!important}.pbs{padding-bottom:5px!important}.mbs{margin-bottom:5px!important}.pbm{padding-bottom:10px!important}.mbm{margin-bottom:10px!important}.pbl{padding-bottom:21px!important}.mbl{margin-bottom:21px!important}.pln{padding-left:0!important}.mln{margin-left:0!important}.pls{padding-left:5px!important}.mls{margin-left:5px!important}.plm{padding-left:10px!important}.mlm{margin-left:10px!important}.pll{padding-left:21px!important}.mll{margin-left:21px!important}@font-face{font-family:"OpenSans";src:url("http://static.trulia-cdn.com/images/fonts/OpenSans/OpenSans-Light-webfont.eot");src:url("http://static.trulia-cdn.com/images/fonts/OpenSans/OpenSans-Light-webfont.eot?#iefix") format("embedded-opentype"),url("http://static.trulia-cdn.com/images/fonts/OpenSans/OpenSans-Light-webfont.woff") format("woff"),url("http://static.trulia-cdn.com/images/fonts/OpenSans/OpenSans-Light-webfont.ttf") format("truetype"),url("http://static.trulia-cdn.com/images/fonts/OpenSans/OpenSans-Light-webfont.svg#OpenSansLight") format("svg");font-weight:300;font-style:normal}@font-face{font-family:"OpenSans";src:url("http://static.trulia-cdn.com/images/fonts/OpenSans/OpenSans-Regular-webfont.eot");src:url("http://static.trulia-cdn.com/images/fonts/OpenSans/OpenSans-Regular-webfont.eot?#iefix") format("embedded-opentype"),url("http://static.trulia-cdn.com/images/fonts/OpenSans/OpenSans-Regular-webfont.woff") format("woff"),url("http://static.trulia-cdn.com/images/fonts/OpenSans/OpenSans-Regular-webfont.ttf") format("truetype"),url("http://static.trulia-cdn.com/images/fonts/OpenSans/OpenSans-Regular-webfont.svg#OpenSansRegular") format("svg");font-weight:400;font-style:normal}@font-face{font-family:"OpenSans";src:url("http://static.trulia-cdn.com/images/fonts/OpenSans/OpenSans-Bold-webfont.eot");src:url("http://static.trulia-cdn.com/images/fonts/OpenSans/OpenSans-Bold-webfont.eot?#iefix") format("embedded-opentype"),url("http://static.trulia-cdn.com/images/fonts/OpenSans/OpenSans-Bold-webfont.woff") format("woff"),url("http://static.trulia-cdn.com/images/fonts/OpenSans/OpenSans-Bold-webfont.ttf") format("truetype"),url("http://static.trulia-cdn.com/images/fonts/OpenSans/OpenSans-Bold-webfont.svg#OpenSansBold") format("svg");font-weight:600;font-style:normal}body{font-size:14px;font-size:.875rem;line-height:1.5em;color:#222}body,input,select,textarea,button{font-family:OpenSans,sans-serif}h1,.h1,h2,.h2,h3,.h3,h4,.h4,h5,.h5,h6,.h6{font-weight:300;font-style:normal}h1,.h1{font-size:36px;font-size:2.25rem;line-height:1.3;margin:5px 0;font-weight:bold}h2,.h2{font-size:28px;font-size:1.75rem;line-height:1.4;margin:5px 0}h3,.h3{font-size:24px;font-size:1.5rem;line-height:1.4;margin:5px 0}h4,.h4{font-size:20px;font-size:1.25rem;line-height:1.4;margin:5px 0}h5,.h5{font-size:16px;font-size:1rem;line-height:1.5;margin:5px 0;font-weight:bold}h6,.h6{font-size:14px;font-size:.875rem;line-height:1.5;margin:5px 0;font-weight:bold}.h7{font-size:12px;font-size:.75rem;line-height:1.6;margin:5px 0}.headingDoubleSuper{display:block;clear:both;min-width:10px}.headingDoubleSub{font-size:14px;font-size:.875rem;display:block;float:left;font-weight:normal;line-height:1.5}.headingDoubleInline{display:inline-block}pre,code{font-family:Menlo,Consolas,Monaco,"Lucida Console",monospace}.typeWarning{color:#cc2114}.typeHighlight{color:#5eab1f}.typeLowlight{color:#999}.typeReversed1{color:white}.typeReversed2{color:#eff6e9}.typeDeemphasize{font-weight:300!important}.typeWeightNormal{font-weight:normal!important}.typeEmphasize{font-weight:bold!important}.cols1{width:4.16667%!important;*width:2.30496%!important}.cols2{width:8.33333%!important;*width:6.47163%!important}.cols3{width:12.5%!important;*width:10.6383%!important}.cols4{width:16.66667%!important;*width:14.80496%!important}.cols5{width:20.83333%!important;*width:18.97163%!important}.cols6{width:25%!important;*width:23.1383%!important}.cols7{width:29.16667%!important;*width:27.30496%!important}.cols8{width:33.33333%!important;*width:31.47163%!important}.cols9{width:37.5%!important;*width:35.6383%!important}.cols10{width:41.66667%!important;*width:39.80496%!important}.cols11{width:45.83333%!important;*width:43.97163%!important}.cols12{width:50%!important;*width:48.1383%!important}.cols13{width:54.16667%!important;*width:52.30496%!important}.cols14{width:58.33333%!important;*width:56.47163%!important}.cols15{width:62.5%!important;*width:60.6383%!important}.cols16{width:66.66667%!important;*width:64.80496%!important}.cols17{width:70.83333%!important;*width:68.97163%!important}.cols18{width:75%!important;*width:73.1383%!important}.cols19{width:79.16667%!important;*width:77.30496%!important}.cols20{width:83.33333%!important;*width:81.47163%!important}.cols21{width:87.5%!important;*width:85.6383%!important}.cols22{width:91.66667%!important;*width:89.80496%!important}.cols23{width:95.83333%!important;*width:93.97163%!important}.cols24{width:100%!important;*width:98.1383%!important}.line{margin-left:-21px}.line .col{min-height:1px;float:left;zoom:1;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;padding-left:21px}.line .colExt{float:right;zoom:1;padding:0 0 0 21px}.line .lastCol{float:none;*display:block;*width:auto!important;*zoom:1}.line .col:last-child{display:table-cell;float:none;vertical-align:top;width:10000px!important}a,a:hover,a:focus,.linkLowlight{text-decoration:none}a{color:#1885f0}a:hover,a:focus{color:#5eab1f}.linkLowlight{color:#999}.linkLowlight:hover,.linkLowlight:focus{color:#5eab1f}.linkForward:after{margin-left:.35714em;content:"\00BB"}.linkBack:before{margin-right:.35714em;content:"\00AB"}.backgroundBasic{background-color:white}.backgroundLowlight{background-color:#f9f9f9}.backgroundHighlight{background-color:#5eab1f}.backgroundInverse{background-color:#222}.box{position:relative}.box .boxHead,.box .boxFoot{padding:0;margin:0 21px}.box .boxBody{padding:0 21px 1px}.boxHighlight{border:1px solid #e9e9e9;-webkit-border-radius:6px;-moz-border-radius:6px;-ms-border-radius:6px;-o-border-radius:6px;border-radius:6px;-webkit-box-shadow:0 0 5px rgba(0,0,0,0.17);-moz-box-shadow:0 0 5px rgba(0,0,0,0.17);box-shadow:0 0 5px rgba(0,0,0,0.17)}.boxBasic{border:1px solid #e9e9e9;-webkit-border-radius:6px;-moz-border-radius:6px;-ms-border-radius:6px;-o-border-radius:6px;border-radius:6px}.boxHeadBasic{border-bottom:solid 1px #e9e9e9}.boxFootBasic{border-top:solid 1px #e9e9e9}.boxClose{border:0;position:absolute;cursor:pointer;background-color:transparent}.boxClose{top:3px;right:6px;width:20px;height:20px;text-align:center;color:#999;font-size:14px;font-size:.875rem}.boxClose:hover,.boxClose:focus{color:#222}ol,ul{list-style-type:none}ol>li,ul>li{margin:.2em 0}.listBordered>li,.listBorderedHover>li{padding:10px;border-top:1px solid #e9e9e9}.listBordered>li:first-child,.listBorderedHover>li:first-child{border-top:1px solid transparent}.listBorderedHover>li{margin:0}.listBorderedHover>li:hover{background-color:#f9f9f9}.listInline>li{vertical-align:middle;padding-right:10px}.lvn>li{padding-top:0;padding-bottom:0}.lvs>li{padding-top:5px;padding-bottom:5px}.lvm>li{padding-top:10px;padding-bottom:10px}.lvl>li{padding-top:21px;padding-bottom:21px}.lhn>li{padding-left:0;padding-right:0}.lhs>li{padding-left:5px;padding-right:5px}.lhm>li{padding-left:10px;padding-right:10px}.lhl>li{padding-left:21px;padding-right:21px}.toggle{position:relative;cursor:pointer}.toggleArrow .before,.toggleArrow:before{content:"\25BA";display:inline-block;width:1.3em;font-size:.9em;text-align:center}.toggleArrowActive:before{content:"\25BC"}.toggleArrow:hover .before{text-decoration:none}.toggleArrow .active,.toggleActive .inactive{display:none}.toggleActive .active{display:inline-block}.toggleActive .inactive{display:none}.frameThumb,.frameSmall,.frameStandard,.frameStacked{display:inline-block;*display:inline;*zoom:1;*border:1px solid #e9e9e9;-webkit-box-shadow:0 0 1px 1px rgba(0,0,0,0.2);-moz-box-shadow:0 0 1px 1px rgba(0,0,0,0.2);box-shadow:0 0 1px 1px rgba(0,0,0,0.2)}.frameThumb img,.frameSmall img,.frameStandard img,.frameStacked img{display:block}.frameThumb .polaroid,.frameSmall .polaroid,.frameStandard .polaroid,.frameStacked .polaroid{margin-top:5px}.frameThumb{padding:2px}.frameSmall{padding:6px}.frameStandard{padding:8px}.frameStacked{padding:8px;position:relative;background-color:#fff}.frameStacked:before,.frameStacked:after{-webkit-box-shadow:0 0 1px 1px rgba(0,0,0,0.2);-moz-box-shadow:0 0 1px 1px rgba(0,0,0,0.2);box-shadow:0 0 1px 1px rgba(0,0,0,0.2);width:100%;height:100%;position:absolute;z-index:-999;content:"";background-color:#f9f9f9}.frameStacked:before{left:5px;top:0;-webkit-transform:rotate(1deg);-moz-transform:rotate(1deg);-ms-transform:rotate(1deg);-o-transform:rotate(1deg);transform:rotate(1deg)}.frameStacked:after{right:5px;top:0;-webkit-transform:rotate(-1deg);-moz-transform:rotate(-1deg);-ms-transform:rotate(-1deg);-o-transform:rotate(-1deg);transform:rotate(-1deg)}.badgeStandard,.badgePrimary,.badgeSecondary,.badgeTertiary{-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;-o-border-radius:3px;border-radius:3px;font-size:12px;font-size:.75rem;padding:.35714em .42857em .21429em;display:inline-block;color:white;line-height:1;text-transform:uppercase}.badgeStandard{background-color:#999}.badgePrimary{background-color:#ff5c00}.badgeSecondary{background-color:#5eab1f}.badgeTertiary{background-color:#cc2114}button{background:0;border:0}.btn{padding:.5em 1em;margin:0;display:inline-block;font-weight:normal;line-height:normal;font-size:14px;font-size:.875rem;text-decoration:none;cursor:pointer;border:0;background:0;text-align:center;border:1px solid #ccc;-webkit-border-radius:4px;-moz-border-radius:4px;-ms-border-radius:4px;-o-border-radius:4px;border-radius:4px}.btnSml{font-size:12px;font-size:.75rem;-webkit-border-radius:4px;-moz-border-radius:4px;-ms-border-radius:4px;-o-border-radius:4px;border-radius:4px}.btnLrg{font-size:16px;font-size:1rem;line-height:1.6;-webkit-border-radius:4px;-moz-border-radius:4px;-ms-border-radius:4px;-o-border-radius:4px;border-radius:4px}.btnFullWidth{width:100%}.btnDefault,a.btnDefault{border:1px #d7d7d7 solid;background:#f3f3f3;color:#222;text-shadow:0 1px 0 white;-webkit-box-shadow:0 1px 0 #ccc;-moz-box-shadow:0 1px 0 #ccc;box-shadow:0 1px 0 #ccc}.btnDefault:hover,.btnDefault:focus{background:#f6f6f6}.btnDefault:active{position:relative;top:1px;-webkit-box-shadow:inset 0 3px 7px rgba(0,0,0,0.1),0 1px 2px rgba(0,0,0,0.05);-moz-box-shadow:inset 0 3px 7px rgba(0,0,0,0.1),0 1px 2px rgba(0,0,0,0.05);box-shadow:inset 0 3px 7px rgba(0,0,0,0.1),0 1px 2px rgba(0,0,0,0.05)}.btnPrimary,a.btnPrimary,.btnDanger,a.btnDanger{color:white;text-shadow:0}.btnPrimary,a.btnPrimary{border:1px #d14b00 solid;background:#ff5c00;-webkit-box-shadow:0 1px 0 #d35500;-moz-box-shadow:0 1px 0 #d35500;box-shadow:0 1px 0 #d35500}.btnPrimary:hover,.btnPrimary:focus{background:#ff660f}.btnPrimary:active{position:relative;top:1px;-webkit-box-shadow:inset 0 3px 7px rgba(0,0,0,0.1),0 1px 2px rgba(0,0,0,0.05);-moz-box-shadow:inset 0 3px 7px rgba(0,0,0,0.1),0 1px 2px rgba(0,0,0,0.05);box-shadow:inset 0 3px 7px rgba(0,0,0,0.1),0 1px 2px rgba(0,0,0,0.05)}.btnDanger,a.btnDanger{border:1px #a21a10 solid;background:#cc2114;-webkit-box-shadow:0 1px 0 #d35500;-moz-box-shadow:0 1px 0 #d35500;box-shadow:0 1px 0 #d35500}.btnDanger:hover,.btnDanger:focus{background:#da2315}.btnDanger:active{position:relative;top:1px;-webkit-box-shadow:inset 0 3px 7px rgba(0,0,0,0.1),0 1px 2px rgba(0,0,0,0.05);-moz-box-shadow:inset 0 3px 7px rgba(0,0,0,0.1),0 1px 2px rgba(0,0,0,0.05);box-shadow:inset 0 3px 7px rgba(0,0,0,0.1),0 1px 2px rgba(0,0,0,0.05)}.btn[disabled],.btn[disabled]:hover,.btn[disabled]:focus .btn[disabled]:active,.btnDisabled,a.btnDisabled,.btnDisabled:hover,.btnDisabled:focus,.btnDisabled:active{border:0;background:#ccc;color:#999;text-shadow:0;cursor:default}.btn[disabled]:active,.btnDisabled:active{position:static;color:#999;box-shadow:none}.btnLink{color:#1885f0;border:1px solid transparent}.btnLink:hover,.btnLink:focus{color:#5eab1f}.table{width:100%}.table thead th{font-weight:bold;color:#222}.table th,.table td{padding:8px}.tableBasic th,.tableBasic td{border:1px solid #e9e9e9}.tan td,.tan th{padding:0}.tas td,.tas th{padding:5px}.tam td,.tam th{padding:10px}.tal td,.tal th{padding:21px}.tvn td,.tvn th{padding-top:0;padding-bottom:0}.tvs td,.tvs th{padding-top:5px;padding-bottom:5px}.tvm td,.tvm th{padding-top:10px;padding-bottom:10px}.tvl td,.tvl th{padding-top:21px;padding-bottom:21px}.thn td,.thn th{padding-left:0;padding-right:0}.ths td,.ths th{padding-left:5px;padding-right:5px}.thm td,.thm th{padding-left:10px;padding-right:10px}.thl td,.thl th{padding-left:21px;padding-right:21px}body{background:white}.content>section,.container{width:1128px;margin:0 auto}.main[role="main"]{position:relative;top:-10px}.content>section,.content .container{margin-top:0}.skipLink:focus{width:100%;padding:5px 0;display:block;position:absolute;z-index:100;text-indent:5px;color:#fff;background:#5eab1f}.header{padding-bottom:15px;*position:relative;*z-index:100;background:white;border-bottom:1px solid #ccc}.headerSubSection{margin:1px 0;font-size:11px;font-size:.6875rem;text-align:right;line-height:1}.headerSubSection a{color:#222}.headerSubSection .highlight{display:inline-block;padding:2px 10px;color:#fff;-webkit-border-radius:5px 5px 0 0;-moz-border-radius:5px 5px 0 0;-ms-border-radius:5px 5px 0 0;-o-border-radius:5px 5px 0 0;border-radius:5px 5px 0 0;background:#888}.headerSubSection .listInline{margin:0}.headerMainSection{position:relative}.headerMainSection .logo{position:absolute;left:0;top:-1px}.menuWrap{margin-left:97px}.content{padding-top:5px}.content>section{margin-top:5px}.sideBar{width:185px;margin-right:20px;float:left}.main{float:none;*display:block;*width:auto;*zoom:1}.aside{width:300px;margin-left:20px;float:right}.footer{clear:both;margin-top:40px;font-size:12px;font-size:.75rem}.footerBox{border-top:5px solid #5eab1f}.footerBox .boxBody{margin:10px 0}.footerGroup a{color:#222}.footerGroup a:hover,.footerGroup a:focus{color:#5eab1f;text-decoration:underline}.footerCol{width:125px}.footerGroupHeading{float:left}.footerGroupHeading{width:120px;margin:0;clear:right;font-weight:bold}.footerGroupList{margin:0}.footerGroupList>li{margin:0}.footerDisclaimer{float:left}.footerNoteAside{float:right}
|
|
2
|
+
|
|
3
|
+
.styleguide .exampleOutput .summary.medium,
|
|
4
|
+
.styleguide .exampleOutput .summary.new,
|
|
5
|
+
.styleguide .exampleOutput .summary.default {
|
|
6
|
+
width: 50%;
|
|
7
|
+
}
|
|
8
|
+
.styleguide .exampleOutput .summary.featured {
|
|
9
|
+
width: 70%;
|
|
10
|
+
}
|
|
11
|
+
.styleguide .exampleOutput .summary {
|
|
12
|
+
margin-bottom: 2em;
|
|
13
|
+
}
|
|
14
|
+
.styleguide .exampleOutput .panel {
|
|
15
|
+
width: 45%;
|
|
16
|
+
}
|
|
@@ -0,0 +1,105 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html>
|
|
3
|
+
<head>
|
|
4
|
+
<title>My Style Guide Core</title>
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
|
|
6
|
+
<link rel="shortcut icon" href="./brick.png" />
|
|
7
|
+
|
|
8
|
+
<!-- Styleguide CSS -->
|
|
9
|
+
<link rel="stylesheet" href="/styleguide/css/doc.css">
|
|
10
|
+
<link rel="stylesheet" href="/styleguide/css/github.css">
|
|
11
|
+
<link rel="stylesheet" href="/styleguide/css/screen.css">
|
|
12
|
+
|
|
13
|
+
<!-- CSS to be documented -->
|
|
14
|
+
<link rel="stylesheet" href="/assets/psique.scss">
|
|
15
|
+
|
|
16
|
+
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
|
|
17
|
+
<!--[if lt IE 9]>
|
|
18
|
+
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv.min.js"></script>
|
|
19
|
+
<script src="//oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
|
|
20
|
+
<![endif]-->
|
|
21
|
+
|
|
22
|
+
<!-- Main libraries -->
|
|
23
|
+
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
|
|
24
|
+
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js"></script>
|
|
25
|
+
<script src="/styleguide/script/components.js"></script>
|
|
26
|
+
<script src="/assets/psique.js"></script>
|
|
27
|
+
</head>
|
|
28
|
+
|
|
29
|
+
<body class="styleguide">
|
|
30
|
+
<header class="header pbn" role="banner">
|
|
31
|
+
<div class="backgroundHighlight typeReversed1">
|
|
32
|
+
<div class="container">
|
|
33
|
+
<h1 class="h2 mvs">My Style Guide</h1>
|
|
34
|
+
</div>
|
|
35
|
+
</div>
|
|
36
|
+
<div class="backgroundLowlight typeReversed1">
|
|
37
|
+
<div class="container">
|
|
38
|
+
<span>
|
|
39
|
+
<ul class="docNav listInline">
|
|
40
|
+
|
|
41
|
+
<li><a href="/styleguide/components.html">Components</a></li>
|
|
42
|
+
|
|
43
|
+
<li><a href="/styleguide/core.html">Core</a></li>
|
|
44
|
+
|
|
45
|
+
</ul>
|
|
46
|
+
</span>
|
|
47
|
+
</div>
|
|
48
|
+
</div>
|
|
49
|
+
<!-- //header/container -->
|
|
50
|
+
</header>
|
|
51
|
+
|
|
52
|
+
<div class="content">
|
|
53
|
+
<section class="container">
|
|
54
|
+
<div class="line">
|
|
55
|
+
|
|
56
|
+
<div class="col cols4">
|
|
57
|
+
<div class="componentMenu box boxBasic backgroundBasic">
|
|
58
|
+
<div class="boxBody pan">
|
|
59
|
+
<ul class="componentList listBorderedHover">
|
|
60
|
+
|
|
61
|
+
<li><a href="#typography">Typography</a></li>
|
|
62
|
+
|
|
63
|
+
</ul>
|
|
64
|
+
</div>
|
|
65
|
+
</div>
|
|
66
|
+
</div>
|
|
67
|
+
|
|
68
|
+
<div class="main col cols20 lastCol">
|
|
69
|
+
<h1 id="typography">Typography</h1>
|
|
70
|
+
|
|
71
|
+
<p><br/></p>
|
|
72
|
+
|
|
73
|
+
<h2>Headings</h2>
|
|
74
|
+
|
|
75
|
+
<p>All HTML headings, <code><h1></code> through <code><h6></code>, are available.</p>
|
|
76
|
+
|
|
77
|
+
<h1>H1. Lorem ipsum dolor sit amet, consectetur adipisicing</h1>
|
|
78
|
+
|
|
79
|
+
<h2>H2. Lorem ipsum dolor sit amet, consectetur adipisicing</h2>
|
|
80
|
+
|
|
81
|
+
<h3>H3. Lorem ipsum dolor sit amet, consectetur adipisicing</h3>
|
|
82
|
+
|
|
83
|
+
<h4>H4. Lorem ipsum dolor sit amet, consectetur adipisicing</h4>
|
|
84
|
+
|
|
85
|
+
<h5>H5. Lorem ipsum dolor sit amet, consectetur adipisicing</h5>
|
|
86
|
+
|
|
87
|
+
<h6>H6. Lorem ipsum dolor sit amet, consectetur adipisicing</h6>
|
|
88
|
+
|
|
89
|
+
<p><br/></p>
|
|
90
|
+
|
|
91
|
+
<h2>Body copy</h2>
|
|
92
|
+
|
|
93
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
|
|
94
|
+
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
|
95
|
+
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
|
96
|
+
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
|
|
97
|
+
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
|
|
98
|
+
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
|
99
|
+
</section>
|
|
100
|
+
<footer>
|
|
101
|
+
<p>This documentation generated using <a href="http://github.com/trulia/hologram">Hologram</a>
|
|
102
|
+
</footer>
|
|
103
|
+
</div>
|
|
104
|
+
</body>
|
|
105
|
+
</html>
|
|
@@ -0,0 +1,89 @@
|
|
|
1
|
+
(function ($) {
|
|
2
|
+
var setArrow = function ($el) {
|
|
3
|
+
if ($el.hasClass('toggleArrow'))
|
|
4
|
+
{
|
|
5
|
+
$el.toggleClass('toggleArrowActive');
|
|
6
|
+
}
|
|
7
|
+
};
|
|
8
|
+
|
|
9
|
+
var methods = {
|
|
10
|
+
init: function () {
|
|
11
|
+
return this.each(function () {
|
|
12
|
+
if ($(this).data('toggleInit') !== true) {
|
|
13
|
+
//Prevent multiple initializations
|
|
14
|
+
$(this).data('toggleInit', true);
|
|
15
|
+
|
|
16
|
+
$(this).click(function (event) {
|
|
17
|
+
event.preventDefault();
|
|
18
|
+
methods.toggle.apply(this);
|
|
19
|
+
});
|
|
20
|
+
}
|
|
21
|
+
});
|
|
22
|
+
},
|
|
23
|
+
|
|
24
|
+
toggle: function (activate) {
|
|
25
|
+
return $(this).each(function () {
|
|
26
|
+
var $toggle,
|
|
27
|
+
data,
|
|
28
|
+
container,
|
|
29
|
+
toggled = false;
|
|
30
|
+
|
|
31
|
+
$toggle = $(this);
|
|
32
|
+
|
|
33
|
+
container = $($toggle.attr('href'));
|
|
34
|
+
|
|
35
|
+
if (activate || activate === false)
|
|
36
|
+
{
|
|
37
|
+
// forced state toggle
|
|
38
|
+
toggled = container.hasClass('hideVisually') === activate;
|
|
39
|
+
$toggle.toggleClass('toggleActive', activate);
|
|
40
|
+
container.toggleClass('hideVisually', !activate);
|
|
41
|
+
}
|
|
42
|
+
else
|
|
43
|
+
{
|
|
44
|
+
// toggle
|
|
45
|
+
toggled = true;
|
|
46
|
+
$toggle.toggleClass('toggleActive');
|
|
47
|
+
container.toggleClass('hideVisually');
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
if (toggled)
|
|
51
|
+
{
|
|
52
|
+
// update arrow status
|
|
53
|
+
setArrow($toggle);
|
|
54
|
+
|
|
55
|
+
// update the label
|
|
56
|
+
data = $toggle.data();
|
|
57
|
+
if (data.toggleText) {
|
|
58
|
+
var show = data.toggleText;
|
|
59
|
+
|
|
60
|
+
//store our current text
|
|
61
|
+
$toggle.data('toggleText', $toggle.text());
|
|
62
|
+
|
|
63
|
+
//switch to our toggle text
|
|
64
|
+
$toggle.text(show);
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
$toggle.trigger('toggle', [(activate || $toggle.hasClass('toggleActive'))]);
|
|
68
|
+
}
|
|
69
|
+
});
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
};
|
|
73
|
+
|
|
74
|
+
$.fn.truliaToggle = function (method) {
|
|
75
|
+
if (typeof method === 'string' && typeof methods[method] === 'function')
|
|
76
|
+
{
|
|
77
|
+
return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
|
|
78
|
+
}
|
|
79
|
+
else if (typeof method === 'object' || !method)
|
|
80
|
+
{
|
|
81
|
+
return methods.init.apply(this, arguments);
|
|
82
|
+
}
|
|
83
|
+
else
|
|
84
|
+
{
|
|
85
|
+
$.error('Method ' + method + ' does not exist on jQuery.truliaToggle');
|
|
86
|
+
}
|
|
87
|
+
};
|
|
88
|
+
|
|
89
|
+
}(jQuery));
|