mirror of
https://github.com/pattern-lab/patternlab-php.git
synced 2025-01-17 06:08:23 +01:00
Merge branch 'dev' of https://github.com/pattern-lab/patternlab-php into dev
This commit is contained in:
Dave Olsen
commit
768ddc9740
14
.gitignore
vendored
14
.gitignore
vendored
@ -10,3 +10,17 @@ latest-change.txt
|
||||
*-ck.js
|
||||
|
||||
/core/source/css/.sass-cache/
|
||||
|
||||
/public/styleguide/css/styleguide.css
|
||||
/public/styleguide/css/styleguide.scss
|
||||
|
||||
/core/styleguide/css/.sass-cache/
|
||||
|
||||
/public/styleguide/js/styleguide.js
|
||||
|
||||
/public/styleguide/js/annotations-viewer.js
|
||||
/public/styleguide/js/code-viewer.js
|
||||
|
||||
/public/styleguide/css/states.css
|
||||
/public/styleguide/css/static.css
|
||||
/public/styleguide/css/static.scss
|
||||
|
||||
10
README.md
10
README.md
@ -1,15 +1,13 @@
|
||||
## About the PHP Version of Pattern Lab
|
||||
|
||||
The PHP version of Pattern Lab is, at its core, a static site generator. It combines platform-agnostic assets, like the [Mustache](http://mustache.github.io/)-based patterns and the JavaScript-based viewer, with a PHP-based "builder" that transforms and dynamically builds the Pattern Lab site. By making it a static site generator, the PHP version of Pattern Lab strongly separates patterns, data, and presentation from build logic. The PHP version should be seen as a reference for other developers to improve upon as they build their own Pattern Lab Builders in their language of choice.
|
||||
The PHP version of Pattern Lab is, at its core, a static site generator. It combines platform-agnostic assets, like the [Mustache](http://mustache.github.io/)-based patterns and the JavaScript-based viewer, with a PHP-based "builder" that transforms and dynamically builds the Pattern Lab site. By making it a static site generator, Pattern Lab strongly separates patterns, data, and presentation from build logic.
|
||||
|
||||
## Demo
|
||||
|
||||
You can play with a demo of the front-end of the PHP version of Pattern Lab at [demo.pattern-lab.info](http://demo.pattern-lab.info).
|
||||
You can play with a demo of the front-end of Pattern Lab at [demo.pattern-lab.info](http://demo.pattern-lab.info).
|
||||
|
||||
## Getting Started
|
||||
|
||||
The PHP version of Pattern Lab should be relatively easy for anyone to get up and running.
|
||||
|
||||
* [Requirements](http://pattern-lab.info/docs/requirements.html)
|
||||
* [Installing the PHP Version of Pattern Lab](http://pattern-lab.info/docs/installation.html)
|
||||
* [Upgrading the PHP Version of Pattern Lab](http://pattern-lab.info/docs/upgrading.html)
|
||||
@ -46,7 +44,7 @@ The PHP version of Pattern Lab utilizes Mustache as the template language for pa
|
||||
|
||||
## Using Pattern Lab's Advanced Features
|
||||
|
||||
By default, the Pattern Lab assets can be manually generated and the Pattern Lab site manually refreshed but who wants to waste time doing that? Here are some ways that the PHP version of Pattern Lab can make your development workflow a little smoother:
|
||||
By default, the Pattern Lab assets can be manually generated and the Pattern Lab site manually refreshed but who wants to waste time doing that? Here are some ways that Pattern Lab can make your development workflow a little smoother:
|
||||
|
||||
* [Watching for Changes and Auto-Regenerating Patterns](http://pattern-lab.info/docs/advanced-auto-regenerate.html)
|
||||
* [Auto-Reloading the Browser Window When Changes Are Made](http://pattern-lab.info/docs/advanced-reload-browser.html)
|
||||
@ -56,4 +54,4 @@ By default, the Pattern Lab assets can be manually generated and the Pattern Lab
|
||||
* [Preventing the Cleaning of public/](http://pattern-lab.info/docs/advanced-clean-public.html)
|
||||
* [Generating CSS](http://pattern-lab.info/docs/advanced-generating-css.html)
|
||||
* [Modifying the Pattern Lab Nav](http://pattern-lab.info/docs/advanced-pattern-lab-nav.html)
|
||||
* [Integration with Compass](http://pattern-lab.info/docs/advanced-integration-with-compass.html)
|
||||
* [Integration with Compass](http://pattern-lab.info/docs/advanced-integration-with-compass.html)
|
||||
|
||||
@ -22,7 +22,7 @@ cleanPublic = "true"
|
||||
xipHostname = "http://patternlab.*.xip.io"
|
||||
|
||||
// which, if any, controls to hide in the nav
|
||||
ishControlsHide = ""
|
||||
ishControlsHide = "hay"
|
||||
|
||||
// the order of pattern states
|
||||
patternStates = "inprogress,inreview,complete"
|
||||
|
||||
@ -75,5 +75,19 @@
|
||||
"author" : {
|
||||
"first-name": "Author",
|
||||
"last-name": "Name"
|
||||
}
|
||||
},
|
||||
"hero": true,
|
||||
"emergency" : false,
|
||||
"touts" : [
|
||||
{ },
|
||||
{ },
|
||||
{ }
|
||||
],
|
||||
"latest-posts" : [
|
||||
{ },
|
||||
{ },
|
||||
{ },
|
||||
{ },
|
||||
{ }
|
||||
]
|
||||
}
|
||||
@ -2,7 +2,7 @@
|
||||
{{> organisms-header }}
|
||||
<div role="main">
|
||||
{{# emergency }}
|
||||
{{> molecules-alert }}
|
||||
{{> molecules-alert:error }}
|
||||
{{/ emergency }}
|
||||
{{# hero }}
|
||||
{{> molecules-block-hero }}
|
||||
@ -23,17 +23,18 @@
|
||||
<section class="section latest-posts">
|
||||
<h2 class="section-title">Latest Posts</h2>
|
||||
<ul class="post-list">
|
||||
{{# latest-posts}}
|
||||
{{# latest-posts }}
|
||||
<li>{{> molecules-media-block }}</li>
|
||||
{{/ latest-posts}}
|
||||
{{/ latest-posts }}
|
||||
</ul>
|
||||
<a href="#" class="text-btn">View more posts</a>
|
||||
</section>
|
||||
</div>
|
||||
</div><!--end .l-main-->
|
||||
|
||||
<div class="l-sidebar">
|
||||
{{> organisms-recent-tweets }}
|
||||
</div><!--end l-sidebar-->
|
||||
</div><!--end .l-sidebar-->
|
||||
</div><!--end .l-two-col-->
|
||||
</div><!--End role=main-->
|
||||
{{> organisms-footer }}
|
||||
</div>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 8.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 16 KiB After Width: | Height: | Size: 3.6 KiB |
@ -1,47 +0,0 @@
|
||||
/* basic styling */
|
||||
.sg-pattern-state:before {
|
||||
margin-right: 4px;
|
||||
content: "\2022";
|
||||
display: inline-block;
|
||||
margin-bottom: -4px;
|
||||
font-size: 18px;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
/* nav styling */
|
||||
.sg-nav .sg-pattern-state:before {
|
||||
margin-top: -4px;
|
||||
margin-bottom: 0;
|
||||
margin-left: -4px;
|
||||
height: 20px;
|
||||
display: block;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.sg-sub-nav .sg-pattern-state:before {
|
||||
margin-left: -11px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
/* call out for pattern's pattern state */
|
||||
span.sg-pattern-state {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
span.sg-pattern-state:before {
|
||||
margin-bottom: -3px;
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
/* pattern states */
|
||||
.inprogress:before {
|
||||
color: #FF4136 !important;
|
||||
}
|
||||
|
||||
.inreview:before {
|
||||
color: #FFCC00 !important;
|
||||
}
|
||||
|
||||
.complete:before {
|
||||
color: #2ECC40 !important;
|
||||
}
|
||||
@ -1,404 +0,0 @@
|
||||
/*
|
||||
colors
|
||||
red: $orange; rgb(229,24,55)
|
||||
gray: #808080;
|
||||
*/
|
||||
|
||||
$orange : #bededf;
|
||||
|
||||
$max-width: 60em;
|
||||
|
||||
/************Reset**************/
|
||||
* {
|
||||
-moz-box-sizing: border-box;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
html, body, div, object, iframe, fieldset {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
}
|
||||
ol, ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
header, footer, nav, section, article, hgroup, figure {
|
||||
display: block;
|
||||
}
|
||||
legend {
|
||||
display: none;
|
||||
}
|
||||
/************End Reset**************/
|
||||
|
||||
/************Global**************/
|
||||
body {
|
||||
background: #fff;
|
||||
color: #000;
|
||||
font: 100%/1.4 "HelveticaNeue", "Helvetica", "Arial", sans-serif;
|
||||
padding: 0;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
border-top: 20px solid #000;
|
||||
border-bottom: 20px solid #000;
|
||||
}
|
||||
a {
|
||||
color: #808080;
|
||||
text-decoration: none;
|
||||
}
|
||||
a:hover, a:focus {
|
||||
color: $orange;
|
||||
}
|
||||
p {
|
||||
margin: 0 0 1em;
|
||||
}
|
||||
img, object, video {
|
||||
max-width: 100%;
|
||||
border: 0;
|
||||
}
|
||||
a img {
|
||||
border: 0;
|
||||
outline: 0;
|
||||
}
|
||||
h1 {
|
||||
font-size: 3em;
|
||||
line-height: 1;
|
||||
letter-spacing: -0.02em;
|
||||
margin-bottom: 0.2em;
|
||||
}
|
||||
h2 {
|
||||
font-size: 2em;
|
||||
line-height: 1.1;
|
||||
margin-bottom: 0.2em;
|
||||
}
|
||||
h3 {
|
||||
font-weight: normal;
|
||||
line-height: 1.1;
|
||||
padding-bottom: 0.4em;
|
||||
border-bottom: 1px solid #ccc;
|
||||
}
|
||||
h1 a, h2 a, h3 a {
|
||||
display: block;
|
||||
color: #000;
|
||||
}
|
||||
h1 a:hover, h2 a:hover, h3 a:hover {
|
||||
color: $orange;
|
||||
}
|
||||
blockquote {
|
||||
border-left: 0.5em solid #ddd;
|
||||
padding-left: 1em;
|
||||
margin-left: 1em;
|
||||
}
|
||||
small {
|
||||
color: $orange;
|
||||
}
|
||||
input[type=search] {
|
||||
-webkit-appearance: none;
|
||||
border-radius: 0;
|
||||
}
|
||||
::-webkit-input-placeholder {
|
||||
color: #808080;
|
||||
}
|
||||
:-moz-placeholder {
|
||||
color: #808080;
|
||||
}
|
||||
/************End Global**************/
|
||||
|
||||
/************Classes**************/
|
||||
.inactive {
|
||||
color: #ddd;
|
||||
}
|
||||
/************End Classes**************/
|
||||
|
||||
/************Structure**************/
|
||||
.container {
|
||||
max-width: $max-width;
|
||||
margin: 0 auto;
|
||||
padding: 0 1em;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
[role=main] {
|
||||
padding-bottom: 1em;
|
||||
}
|
||||
|
||||
/*Footer*/
|
||||
[role=contentinfo] {
|
||||
color: #fff;
|
||||
background: #000;
|
||||
margin: 0 -1em;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
|
||||
> div {
|
||||
max-width: $max-width;
|
||||
padding: 0 1em;
|
||||
margin: 0 auto;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
/*End Footer*/
|
||||
|
||||
/*Grid*/
|
||||
.grid {
|
||||
margin: 0 -1em;
|
||||
overflow: hidden;
|
||||
}
|
||||
.grid:target {
|
||||
-webkit-animation: fadeout 5s 1 ease-out;
|
||||
-moz-animation: fadeout 5s 1 ease-out;
|
||||
-o-animation: fadeout 5s 1 ease-out;
|
||||
animation: fadeout 5s 1 ease-out;
|
||||
}
|
||||
.grid > h2 {
|
||||
margin-left: 0.45em;
|
||||
}
|
||||
.grid > section {
|
||||
padding: 1em 1em 0.5em;
|
||||
}
|
||||
.grid > section:target {
|
||||
-webkit-animation: fadeout 5s 1 ease-out;
|
||||
-moz-animation: fadeout 5s 1 ease-out;
|
||||
-o-animation: fadeout 5s 1 ease-out;
|
||||
animation: fadeout 5s 1 ease-out;
|
||||
}
|
||||
.grid ul {
|
||||
overflow: hidden;
|
||||
}
|
||||
.grid ul li {
|
||||
margin-bottom: 0.3em;
|
||||
}
|
||||
.featured:after {
|
||||
content: "*";
|
||||
color: $orange;
|
||||
}
|
||||
|
||||
/*Fluid*/
|
||||
.fluid {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
max-width: 40em;
|
||||
}
|
||||
|
||||
/*Homepage*/
|
||||
.home h1 {
|
||||
margin-bottom: 0.2em;
|
||||
}
|
||||
.intro {
|
||||
font-size: 1.8em;
|
||||
line-height: 1.2;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.intro a:hover ,.intro a:focus {
|
||||
color: #000;
|
||||
border-bottom-color: #000;
|
||||
}
|
||||
|
||||
.ani {
|
||||
position: relative;
|
||||
height: 15em;
|
||||
margin: 1em 0 0;
|
||||
width: 100%;
|
||||
z-index: 0;
|
||||
}
|
||||
.ani div {
|
||||
width: 100%;
|
||||
}
|
||||
.ani div b {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 5%;
|
||||
right: 5%;
|
||||
bottom: 5%;
|
||||
left: 5%;
|
||||
background: rgba(229,24,55,0.22);
|
||||
}
|
||||
|
||||
|
||||
/*Patterns*/
|
||||
.mod {
|
||||
padding: 1em;
|
||||
}
|
||||
.pattern {
|
||||
background: #f7f7f7;
|
||||
border-bottom: 1px solid #808080;
|
||||
margin-bottom: 1em;
|
||||
overflow: hidden;
|
||||
}
|
||||
.pattern-description h1 {
|
||||
font-size: 3.4em;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
.pattern-description {
|
||||
max-width: 40em;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.pattern-description ul, .pattern-description ol {
|
||||
margin-bottom: 2em;
|
||||
}
|
||||
.pattern-description li {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
|
||||
/*Blog*/
|
||||
/*Blog Header*/
|
||||
.blog .container {
|
||||
max-width: 62em;
|
||||
}
|
||||
.blog header[role=banner] {
|
||||
overflow: hidden;
|
||||
margin-bottom: 2em;
|
||||
padding: 2em 0 1em;
|
||||
border-bottom: 1px solid #000;
|
||||
}
|
||||
.blog-logo {
|
||||
font-weight: normal;
|
||||
font-size: 1.2em;
|
||||
margin: 0 0 1em;
|
||||
}
|
||||
.blog-logo img {
|
||||
width: 3.3em;
|
||||
}
|
||||
.blog-logo a {
|
||||
color: #000;
|
||||
}
|
||||
.search-form {
|
||||
width: 100%;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
.search-field {
|
||||
width: 100%;
|
||||
padding: 0.5em 0;
|
||||
border: 0;
|
||||
border-bottom: 1px solid #808080;
|
||||
outline: none;
|
||||
}
|
||||
.search-field:focus {
|
||||
background: $orange;
|
||||
color: #fff;
|
||||
}
|
||||
.search-field:focus::-webkit-input-placeholder {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.search-field:focus :-moz-placeholder {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.blog .nav {
|
||||
clear: both;
|
||||
}
|
||||
.blog .nav a {
|
||||
display: block;
|
||||
font-weight: bold;
|
||||
color: #000;
|
||||
}
|
||||
.blog .nav a:hover {
|
||||
color: $orange;
|
||||
}
|
||||
|
||||
/*Posts*/
|
||||
.posts ol > li {
|
||||
padding-bottom: 1em;
|
||||
border-bottom: 1px solid #ccc;
|
||||
margin-bottom: 1em;
|
||||
overflow: hidden;
|
||||
}
|
||||
.posts h2 {
|
||||
font-size: 1.4em;
|
||||
margin: 0.28em 0 0.1em;
|
||||
font-weight: normal;
|
||||
}
|
||||
.posts h2 a {
|
||||
color: #000;
|
||||
}
|
||||
.posts h2 a:hover, .posts h2 a:focus {
|
||||
color: $orange;
|
||||
}
|
||||
.permalink {
|
||||
display: block;
|
||||
font-size: 0.8em;
|
||||
margin-bottom: 1.2em;
|
||||
}
|
||||
.post-body a {
|
||||
border-bottom: 1px solid #ccc;
|
||||
}
|
||||
.posts blockquote {
|
||||
margin: 0 0 1em;
|
||||
color: #666;
|
||||
border-left: 0.25em solid #ccc;
|
||||
padding-left: 1em;
|
||||
}
|
||||
.tags {
|
||||
float: left;
|
||||
}
|
||||
.tags li {
|
||||
display: inline-block;
|
||||
font-size: 0.8em;
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
|
||||
.posts ol > li .tags a, .permalink {
|
||||
color: #ccc;
|
||||
-webkit-transition: color 0.3s ease-out;
|
||||
-moz-transition: color 0.3s ease-out;
|
||||
-ms-transition: color 0.3s ease-out;
|
||||
-o-transition: color 0.3s ease-out;
|
||||
transition: color 0.3s ease-out;
|
||||
}
|
||||
.posts ol > li:hover .tags a, .posts ol > li:hover .permalink {
|
||||
color: #808080;
|
||||
}
|
||||
.blog-nav {
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
padding: 1em 0;
|
||||
}
|
||||
.posts .blog-nav a {
|
||||
border: 0;
|
||||
}
|
||||
.nav-next {
|
||||
float: right;
|
||||
}
|
||||
.nav-prev {
|
||||
float: left;
|
||||
}
|
||||
|
||||
/* Sidebar */
|
||||
.sidebar {
|
||||
font-size: 0.8em;
|
||||
padding-bottom: 1.4em;
|
||||
}
|
||||
.sidebar div {
|
||||
margin-bottom: 2em;
|
||||
}
|
||||
.sidebar h3 {
|
||||
font-weight: bold;
|
||||
font-size: 0.9em;
|
||||
line-height: 1;
|
||||
border-bottom: 1px solid #000;
|
||||
}
|
||||
.sidebar a {
|
||||
color: #808080;
|
||||
}
|
||||
.sidebar a:hover, .sidebar a:focus {
|
||||
color: $orange;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.top {
|
||||
clear: both;
|
||||
display: block;
|
||||
padding: 1em 0;
|
||||
}
|
||||
.top:before {
|
||||
content: '▲';
|
||||
}
|
||||
|
||||
80
core/styleguide/css/styleguide-specific.css
Normal file
80
core/styleguide/css/styleguide-specific.css
Normal file
@ -0,0 +1,80 @@
|
||||
/*------------------------------------*\
|
||||
$PATTERN LAB-SPECIFIC STYLES
|
||||
\*------------------------------------*/
|
||||
/**
|
||||
* This stylesheet is for styles you want to include only when the interface is being viewed within Pattern Lab.
|
||||
* This is helpful for displaying demo styles for grids, animations, color swatches, etc
|
||||
* It's also helpful for overriding context-specific styles like fixed or absolutely positioned elements
|
||||
* These styles will not be your production CSS.
|
||||
*/
|
||||
/* Style Guide Interface Colors */
|
||||
/* Typography */
|
||||
/* Defaults */
|
||||
/* Dimensions */
|
||||
/* Breakpoints */
|
||||
.demo {
|
||||
overflow: hidden;
|
||||
margin-bottom: 1rem; }
|
||||
|
||||
.demo .gi, .demo .demo-block {
|
||||
background: #dddddd;
|
||||
color: gray;
|
||||
text-align: center;
|
||||
margin-bottom: 0.5em;
|
||||
padding: 1em !important; }
|
||||
.demo .gi:nth-of-type(2n), .demo .demo-block:nth-of-type(2n) {
|
||||
color: #dddddd;
|
||||
background: gray; }
|
||||
.demo .gi .gi, .demo .demo-block .gi {
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
color: #dddddd; }
|
||||
.demo .gi .gi:nth-of-type(2n), .demo .demo-block .gi:nth-of-type(2n) {
|
||||
background: rgba(0, 0, 0, 0.3); }
|
||||
|
||||
.demo-animate {
|
||||
background: #ddd;
|
||||
padding: 1em;
|
||||
margin-bottom: 1em;
|
||||
text-align: center; }
|
||||
|
||||
.animate-move {
|
||||
position: relative; }
|
||||
.animate-move .demo-shape {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 20px;
|
||||
background: gray; }
|
||||
.animate-move:hover > .demo-shape {
|
||||
left: 100%;
|
||||
margin-left: -20px; }
|
||||
|
||||
.sg-colors {
|
||||
overflow: hidden; }
|
||||
.sg-colors li {
|
||||
overflow: hidden;
|
||||
border: 1px solid #dddddd;
|
||||
padding: 0.3em;
|
||||
margin: 0 0.2em 0.2em 0; }
|
||||
@media all and (min-width: 30em) {
|
||||
.sg-colors li {
|
||||
float: left;
|
||||
width: 5em; } }
|
||||
|
||||
.sg-swatch {
|
||||
display: block;
|
||||
height: 1.5em;
|
||||
width: 50%; }
|
||||
@media all and (max-width: 30em) {
|
||||
.sg-swatch {
|
||||
float: left;
|
||||
margin-right: 0.3em; } }
|
||||
@media all and (min-width: 30em) {
|
||||
.sg-swatch {
|
||||
width: 100%;
|
||||
height: 4em;
|
||||
margin-bottom: 0.2em; } }
|
||||
|
||||
.sg-label {
|
||||
line-height: 1; }
|
||||
141
core/styleguide/css/styleguide-specific.scss
Normal file
141
core/styleguide/css/styleguide-specific.scss
Normal file
@ -0,0 +1,141 @@
|
||||
/*------------------------------------*\
|
||||
$PATTERN LAB-SPECIFIC STYLES
|
||||
\*------------------------------------*/
|
||||
/**
|
||||
* This stylesheet is for styles you want to include only when the interface is being viewed within Pattern Lab.
|
||||
* This is helpful for displaying demo styles for grids, animations, color swatches, etc
|
||||
* It's also helpful for overriding context-specific styles like fixed or absolutely positioned elements
|
||||
* These styles will not be your production CSS.
|
||||
*/
|
||||
|
||||
|
||||
/* Style Guide Interface Colors */
|
||||
$sg-primary : #222;
|
||||
$sg-secondary : #808080;
|
||||
$sg-tertiary : #ddd;
|
||||
$sg-quaternary : #fff;
|
||||
$sg-quinary : #999;
|
||||
$sg-tint : rgba(255,255,255,0.05);
|
||||
$sg-tint-2 : rgba(255,255,255,0.25);
|
||||
$sg-tone : rgba(0,0,0,0.1);
|
||||
$sg-tone-2 : rgba(0,0,0,0.3);
|
||||
|
||||
/* Typography */
|
||||
$sg-font-size-norm : 100%;
|
||||
$sg-font-size-sm : 70%;
|
||||
$sg-font-size-large : 120%;
|
||||
|
||||
/* Defaults */
|
||||
$sg-space : 1em;
|
||||
$sg-doublespace : $sg-space*2;
|
||||
$sg-pad : 1em;
|
||||
$sg-pad-half : $sg-pad/2;
|
||||
|
||||
/* Dimensions */
|
||||
$offset-top: 2em;
|
||||
|
||||
/* Breakpoints */
|
||||
$sg-bp-small : 24em;
|
||||
$sg-bp-small-2 : 30em;
|
||||
$sg-bp-med : 48em;
|
||||
$sg-bp-large : 72em;
|
||||
$sg-bp-xl : 80em;
|
||||
|
||||
$animate-quick: 0.2s;
|
||||
|
||||
|
||||
// Demo to show grid system - in this stylesheet because it shouldn't be included in the production styles
|
||||
.demo {
|
||||
overflow: hidden;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.demo .gi, .demo .demo-block {
|
||||
background: $sg-tertiary;
|
||||
color: $sg-secondary;
|
||||
text-align: center;
|
||||
margin-bottom: $sg-pad-half;
|
||||
padding: 1em !important;
|
||||
|
||||
&:nth-of-type(2n) {
|
||||
color: $sg-tertiary;
|
||||
background: $sg-secondary;
|
||||
}
|
||||
|
||||
.gi {
|
||||
background: $sg-tone;
|
||||
color: $sg-tertiary;
|
||||
|
||||
&:nth-of-type(2n) {
|
||||
background: $sg-tone-2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//Demo box for animation
|
||||
.demo-animate {
|
||||
background: #ddd;
|
||||
padding: $sg-pad;
|
||||
margin-bottom: $sg-space;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
//Animate Demo to show
|
||||
.animate-move {
|
||||
position: relative;
|
||||
|
||||
.demo-shape {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 20px;
|
||||
background: $sg-secondary;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
> .demo-shape {
|
||||
left: 100%;
|
||||
margin-left: -20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Style Guide color swatches
|
||||
.sg-colors {
|
||||
overflow: hidden;
|
||||
|
||||
li {
|
||||
overflow: hidden;
|
||||
border: 1px solid $sg-tertiary;
|
||||
padding: 0.3em;
|
||||
margin: 0 0.2em 0.2em 0;
|
||||
|
||||
@media all and (min-width: $sg-bp-small-2) {
|
||||
float: left;
|
||||
width: 5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sg-swatch {
|
||||
display: block;
|
||||
height: 1.5em;
|
||||
width: 50%;
|
||||
|
||||
@media all and (max-width: $sg-bp-small-2) {
|
||||
float: left;
|
||||
margin-right: 0.3em;
|
||||
}
|
||||
|
||||
@media all and (min-width: $sg-bp-small-2) {
|
||||
width: 100%;
|
||||
height: 4em;
|
||||
margin-bottom: 0.2em;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.sg-label {
|
||||
line-height: 1;
|
||||
}
|
||||
@ -89,10 +89,7 @@
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 2;
|
||||
width: 100%;
|
||||
-webkit-box-shadow: inset 0 1px 0 #5f6164, inset 0 -1px 0 #2e2f2f, 0 1px 3px rgba(0, 0, 0, 0.3);
|
||||
-moz-box-shadow: inset 0 1px 0 #5f6164, inset 0 -1px 0 #2e2f2f, 0 1px 3px rgba(0, 0, 0, 0.3);
|
||||
box-shadow: inset 0 1px 0 #5f6164, inset 0 -1px 0 #2e2f2f, 0 1px 3px rgba(0, 0, 0, 0.3); }
|
||||
width: 100%; }
|
||||
.sg-header * {
|
||||
-moz-box-sizing: border-box;
|
||||
-webkit-box-sizing: border-box;
|
||||
@ -197,14 +194,15 @@
|
||||
overflow: hidden;
|
||||
max-height: 0;
|
||||
min-width: 10em;
|
||||
background: #222222;
|
||||
-webkit-transition: max-height 0.1s ease-out;
|
||||
-moz-transition: max-height 0.1s ease-out;
|
||||
-ms-transition: max-height 0.1s ease-out;
|
||||
-o-transition: max-height 0.1s ease-out;
|
||||
transition: max-height 0.1s ease-out; }
|
||||
.sg-acc-panel li {
|
||||
background: #222222; }
|
||||
.sg-acc-panel.active {
|
||||
max-height: 50em;
|
||||
max-height: 120em;
|
||||
overflow: auto; }
|
||||
.sg-acc-panel.sg-right {
|
||||
position: absolute;
|
||||
@ -213,7 +211,7 @@
|
||||
.sg-acc-panel.sg-left {
|
||||
position: absolute;
|
||||
left: auto; }
|
||||
.sg-acc-panel [class^="icon-"]:before, .sg-acc-panel [class*=" icon-"]:before {
|
||||
.sg-acc-panel [class^="sg-icon-"]:before {
|
||||
display: inline-block;
|
||||
margin-right: 0.4em; }
|
||||
|
||||
@ -224,9 +222,6 @@
|
||||
top: 0;
|
||||
right: 0;
|
||||
z-index: 2; }
|
||||
@media all and (min-width: 72em) {
|
||||
.sg-controls {
|
||||
width: 44em; } }
|
||||
|
||||
.sg-control-trigger {
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
|
||||
@ -280,16 +275,16 @@
|
||||
max-height: none;
|
||||
max-width: none; }
|
||||
.sg-size-options > li {
|
||||
display: inline-block;
|
||||
float: left;
|
||||
border: 0;
|
||||
border-left: 1px solid rgba(255, 255, 255, 0.05); } }
|
||||
|
||||
.sg-find {
|
||||
#sg-size-mq {
|
||||
display: none; }
|
||||
@media all and (min-width: 72em) {
|
||||
#sg-size-mq {
|
||||
display: block; } }
|
||||
|
||||
@media all and (min-width: 48em) {
|
||||
.sg-find {
|
||||
display: block; } }
|
||||
#sg-form {
|
||||
margin: 0;
|
||||
border: 0;
|
||||
@ -322,6 +317,46 @@
|
||||
display: inline-block;
|
||||
margin-right: 0.4em; }
|
||||
|
||||
/* basic styling */
|
||||
.sg-pattern-state:before {
|
||||
margin-right: 4px;
|
||||
content: "\2022";
|
||||
display: inline-block;
|
||||
margin-bottom: -4px;
|
||||
font-size: 18px;
|
||||
vertical-align: bottom; }
|
||||
|
||||
/* nav styling */
|
||||
.sg-nav .sg-pattern-state:before {
|
||||
margin-top: -4px;
|
||||
margin-bottom: 0;
|
||||
margin-left: -4px;
|
||||
height: 20px;
|
||||
display: block;
|
||||
float: left; }
|
||||
|
||||
.sg-sub-nav .sg-pattern-state:before {
|
||||
margin-left: -11px;
|
||||
margin-right: 4px; }
|
||||
|
||||
/* call out for pattern's pattern state */
|
||||
span.sg-pattern-state {
|
||||
color: #999; }
|
||||
|
||||
span.sg-pattern-state:before {
|
||||
margin-bottom: -3px;
|
||||
margin-left: 4px; }
|
||||
|
||||
/* pattern states */
|
||||
.inprogress:before {
|
||||
color: #FF4136 !important; }
|
||||
|
||||
.inreview:before {
|
||||
color: #FFCC00 !important; }
|
||||
|
||||
.complete:before {
|
||||
color: #2ECC40 !important; }
|
||||
|
||||
/*------------------------------------*\
|
||||
$PATTERN LAB VIEWPORT
|
||||
\*------------------------------------*/
|
||||
@ -443,39 +478,6 @@
|
||||
.sg-pattern-head a:hover {
|
||||
color: #222222; }
|
||||
|
||||
/* Clean View */
|
||||
.sg-clean .sg-main {
|
||||
padding: 0; }
|
||||
|
||||
.sg-colors {
|
||||
overflow: hidden; }
|
||||
.sg-colors li {
|
||||
overflow: hidden;
|
||||
border: 1px solid #dddddd;
|
||||
padding: 0.3em;
|
||||
margin: 0 0.2em 0.2em 0; }
|
||||
@media all and (min-width: 30em) {
|
||||
.sg-colors li {
|
||||
float: left;
|
||||
width: 5em; } }
|
||||
|
||||
.sg-swatch {
|
||||
display: block;
|
||||
height: 1.5em;
|
||||
width: 50%; }
|
||||
@media all and (max-width: 30em) {
|
||||
.sg-swatch {
|
||||
float: left;
|
||||
margin-right: 0.3em; } }
|
||||
@media all and (min-width: 30em) {
|
||||
.sg-swatch {
|
||||
width: 100%;
|
||||
height: 4em;
|
||||
margin-bottom: 0.2em; } }
|
||||
|
||||
.sg-label {
|
||||
line-height: 1; }
|
||||
|
||||
.sg-view-container {
|
||||
-moz-box-sizing: border-box;
|
||||
-webkit-box-sizing: border-box;
|
||||
@ -640,7 +642,6 @@ div.clear {
|
||||
border-radius: 50%;
|
||||
opacity: .7; }
|
||||
|
||||
/* Pattern Lab icon fonts */
|
||||
/* Pattern Lab icon fonts */
|
||||
@font-face {
|
||||
font-family: 'icomoon';
|
||||
@ -649,7 +650,7 @@ div.clear {
|
||||
font-weight: normal;
|
||||
font-style: normal; }
|
||||
|
||||
.icon-search, .icon-cog, .icon-minus, .icon-plus, .icon-menu, .icon-radio-checked, .sg-checkbox.active, .icon-radio-unchecked, .sg-checkbox, .icon-file, .icon-link, .icon-keyboard, .icon-qrcode, .icon-eye, .sg-checkbox {
|
||||
.sg-icon-search, .sg-icon-cog, .sg-icon-minus, .sg-icon-plus, .sg-icon-menu, .sg-icon-radio-checked, .sg-checkbox.active, .sg-icon-radio-unchecked, .sg-checkbox, .sg-icon-file, .sg-icon-link, .sg-icon-keyboard, .sg-icon-qrcode, .sg-icon-eye, .sg-checkbox {
|
||||
font-family: 'icomoon';
|
||||
speak: none;
|
||||
font-style: normal;
|
||||
@ -661,79 +662,42 @@ div.clear {
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale; }
|
||||
|
||||
.icon-search:before {
|
||||
.sg-icon-search:before {
|
||||
content: "\e600";
|
||||
font-size: 85%; }
|
||||
|
||||
.icon-cog:before {
|
||||
.sg-icon-cog:before {
|
||||
content: "\e601"; }
|
||||
|
||||
.icon-minus:before {
|
||||
.sg-icon-minus:before {
|
||||
content: "\e602"; }
|
||||
|
||||
.icon-plus:before {
|
||||
.sg-icon-plus:before {
|
||||
content: "\e603"; }
|
||||
|
||||
.icon-menu:before {
|
||||
.sg-icon-menu:before {
|
||||
content: "\e604"; }
|
||||
|
||||
.icon-radio-checked:before, .sg-checkbox.active:before, .sg-checkbox.active:before {
|
||||
.sg-icon-radio-checked:before, .sg-checkbox.active:before, .sg-checkbox.active:before {
|
||||
content: "\e605"; }
|
||||
|
||||
.icon-radio-unchecked:before, .sg-checkbox:before, .sg-checkbox:before {
|
||||
.sg-icon-radio-unchecked:before, .sg-checkbox:before, .sg-checkbox:before {
|
||||
content: "\e606"; }
|
||||
|
||||
.icon-file:before {
|
||||
.sg-icon-file:before {
|
||||
content: "\e607"; }
|
||||
|
||||
.icon-link:before {
|
||||
.sg-icon-link:before {
|
||||
content: "\e608"; }
|
||||
|
||||
.icon-keyboard:before {
|
||||
.sg-icon-keyboard:before {
|
||||
content: "\e609"; }
|
||||
|
||||
.icon-qrcode:before {
|
||||
.sg-icon-qrcode:before {
|
||||
content: "\e60a"; }
|
||||
|
||||
.icon-eye:before {
|
||||
.sg-icon-eye:before {
|
||||
content: "\e60b"; }
|
||||
|
||||
/******************************************************************/
|
||||
/* End Pattern Lab Interface code */
|
||||
.demo {
|
||||
overflow: hidden;
|
||||
margin-bottom: 1rem; }
|
||||
|
||||
.demo .gi, .demo .demo-block {
|
||||
background: #dddddd;
|
||||
color: gray;
|
||||
text-align: center;
|
||||
margin-bottom: 0.5em;
|
||||
padding: 1em !important; }
|
||||
.demo .gi:nth-of-type(2n), .demo .demo-block:nth-of-type(2n) {
|
||||
color: #dddddd;
|
||||
background: gray; }
|
||||
.demo .gi .gi, .demo .demo-block .gi {
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
color: #dddddd; }
|
||||
.demo .gi .gi:nth-of-type(2n), .demo .demo-block .gi:nth-of-type(2n) {
|
||||
background: rgba(0, 0, 0, 0.3); }
|
||||
|
||||
.demo-animate {
|
||||
background: #dddddd;
|
||||
padding: 1em;
|
||||
margin-bottom: 1em;
|
||||
text-align: center; }
|
||||
|
||||
.animate-move {
|
||||
position: relative; }
|
||||
.animate-move .demo-shape {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 20px;
|
||||
background: gray; }
|
||||
.animate-move:hover > .demo-shape {
|
||||
left: 100%;
|
||||
margin-left: -20px; }
|
||||
|
||||
@ -159,10 +159,6 @@ $animate-quick: 0.2s;
|
||||
z-index: 2;
|
||||
width: 100%;
|
||||
|
||||
-webkit-box-shadow: inset 0 1px 0 #5f6164,inset 0 -1px 0 #2e2f2f,0 1px 3px rgba(0,0,0,0.3);
|
||||
-moz-box-shadow: inset 0 1px 0 #5f6164,inset 0 -1px 0 #2e2f2f,0 1px 3px rgba(0,0,0,0.3);
|
||||
box-shadow: inset 0 1px 0 #5f6164,inset 0 -1px 0 #2e2f2f,0 1px 3px rgba(0,0,0,0.3);
|
||||
|
||||
* {
|
||||
-moz-box-sizing: border-box;
|
||||
-webkit-box-sizing: border-box;
|
||||
@ -294,11 +290,14 @@ $animate-quick: 0.2s;
|
||||
overflow: hidden;
|
||||
max-height: 0;
|
||||
min-width: 10em;
|
||||
background: $sg-primary;
|
||||
@include sg-transition(max-height,0.1s,ease-out);
|
||||
|
||||
li {
|
||||
background: $sg-primary;
|
||||
}
|
||||
|
||||
&.active {
|
||||
max-height: 50em;
|
||||
max-height: 120em;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
@ -313,7 +312,7 @@ $animate-quick: 0.2s;
|
||||
left: auto;
|
||||
}
|
||||
|
||||
[class^="icon-"], [class*=" icon-"] {
|
||||
[class^="sg-icon-"] {
|
||||
&:before {
|
||||
display: inline-block;
|
||||
margin-right: 0.4em;
|
||||
@ -328,10 +327,6 @@ $animate-quick: 0.2s;
|
||||
top: 0;
|
||||
right: 0;
|
||||
z-index: 2;
|
||||
|
||||
@media all and (min-width: $sg-bp-large) {
|
||||
width: 44em;
|
||||
}
|
||||
}
|
||||
|
||||
.sg-control-trigger {
|
||||
@ -407,19 +402,18 @@ $animate-quick: 0.2s;
|
||||
max-width: none;
|
||||
|
||||
> li {
|
||||
display: inline-block;
|
||||
float: left;
|
||||
border: 0;
|
||||
border-left: 1px solid $sg-tint;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sg-find {
|
||||
//Media Queries Dropdown
|
||||
#sg-size-mq {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media all and (min-width: $sg-bp-med) {
|
||||
.sg-find {
|
||||
@media all and (min-width: $sg-bp-large) {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
@ -429,6 +423,7 @@ $animate-quick: 0.2s;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.sg-input {
|
||||
margin: -2px 0 0 0;
|
||||
padding: 0;
|
||||
@ -460,7 +455,7 @@ $animate-quick: 0.2s;
|
||||
|
||||
//Checklist dropdown lists
|
||||
.sg-checkbox {
|
||||
@extend .icon-radio-unchecked;
|
||||
@extend .sg-icon-radio-unchecked;
|
||||
|
||||
&:before {
|
||||
display: inline-block;
|
||||
@ -468,10 +463,60 @@ $animate-quick: 0.2s;
|
||||
}
|
||||
|
||||
&.active {
|
||||
@extend .icon-radio-checked;
|
||||
@extend .sg-icon-radio-checked;
|
||||
}
|
||||
}
|
||||
|
||||
//Pattern States (active, inprogress, complete, etc)
|
||||
|
||||
/* basic styling */
|
||||
.sg-pattern-state:before {
|
||||
margin-right: 4px;
|
||||
content: "\2022";
|
||||
display: inline-block;
|
||||
margin-bottom: -4px;
|
||||
font-size: 18px;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
/* nav styling */
|
||||
.sg-nav .sg-pattern-state:before {
|
||||
margin-top: -4px;
|
||||
margin-bottom: 0;
|
||||
margin-left: -4px;
|
||||
height: 20px;
|
||||
display: block;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.sg-sub-nav .sg-pattern-state:before {
|
||||
margin-left: -11px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
/* call out for pattern's pattern state */
|
||||
span.sg-pattern-state {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
span.sg-pattern-state:before {
|
||||
margin-bottom: -3px;
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
/* pattern states */
|
||||
.inprogress:before {
|
||||
color: #FF4136 !important;
|
||||
}
|
||||
|
||||
.inreview:before {
|
||||
color: #FFCC00 !important;
|
||||
}
|
||||
|
||||
.complete:before {
|
||||
color: #2ECC40 !important;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*------------------------------------*\
|
||||
@ -632,50 +677,6 @@ $animate-quick: 0.2s;
|
||||
}
|
||||
}
|
||||
|
||||
/* Clean View */
|
||||
.sg-clean .sg-main {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
// Style Guide color swatches
|
||||
.sg-colors {
|
||||
overflow: hidden;
|
||||
|
||||
li {
|
||||
overflow: hidden;
|
||||
border: 1px solid $sg-tertiary;
|
||||
padding: 0.3em;
|
||||
margin: 0 0.2em 0.2em 0;
|
||||
|
||||
@media all and (min-width: $sg-bp-small-2) {
|
||||
float: left;
|
||||
width: 5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sg-swatch {
|
||||
display: block;
|
||||
height: 1.5em;
|
||||
width: 50%;
|
||||
|
||||
@media all and (max-width: $sg-bp-small-2) {
|
||||
float: left;
|
||||
margin-right: 0.3em;
|
||||
}
|
||||
|
||||
@media all and (min-width: $sg-bp-small-2) {
|
||||
width: 100%;
|
||||
height: 4em;
|
||||
margin-bottom: 0.2em;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.sg-label {
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
//Annotations and code view container
|
||||
.sg-view-container {
|
||||
-moz-box-sizing: border-box;
|
||||
@ -729,7 +730,7 @@ $animate-quick: 0.2s;
|
||||
display: block;
|
||||
}
|
||||
|
||||
//Visually emphasize annotated elements
|
||||
//Annotated elements Styles
|
||||
.has-annotation {
|
||||
cursor: help !important;
|
||||
box-shadow: 0 0 10px $sg-secondary;
|
||||
@ -884,7 +885,6 @@ div.clear {
|
||||
opacity: .7;
|
||||
}
|
||||
|
||||
/* Pattern Lab icon fonts */
|
||||
/* Pattern Lab icon fonts */
|
||||
@font-face {
|
||||
font-family: 'icomoon';
|
||||
@ -897,7 +897,7 @@ div.clear {
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.icon-search, .icon-cog, .icon-minus, .icon-plus, .icon-menu, .icon-radio-checked, .icon-radio-unchecked, .icon-file, .icon-link, .icon-keyboard, .icon-qrcode, .icon-eye, .sg-checkbox {
|
||||
.sg-icon-search, .sg-icon-cog, .sg-icon-minus, .sg-icon-plus, .sg-icon-menu, .sg-icon-radio-checked, .sg-icon-radio-unchecked, .sg-icon-file, .sg-icon-link, .sg-icon-keyboard, .sg-icon-qrcode, .sg-icon-eye, .sg-checkbox {
|
||||
font-family: 'icomoon';
|
||||
speak: none;
|
||||
font-style: normal;
|
||||
@ -911,99 +911,43 @@ div.clear {
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.icon-search:before {
|
||||
.sg-icon-search:before {
|
||||
content: "\e600";
|
||||
font-size: 85%;
|
||||
}
|
||||
.icon-cog:before {
|
||||
.sg-icon-cog:before {
|
||||
content: "\e601";
|
||||
}
|
||||
.icon-minus:before {
|
||||
.sg-icon-minus:before {
|
||||
content: "\e602";
|
||||
}
|
||||
.icon-plus:before {
|
||||
.sg-icon-plus:before {
|
||||
content: "\e603";
|
||||
}
|
||||
.icon-menu:before {
|
||||
.sg-icon-menu:before {
|
||||
content: "\e604";
|
||||
}
|
||||
.icon-radio-checked:before, .sg-checkbox.active:before {
|
||||
.sg-icon-radio-checked:before, .sg-checkbox.active:before {
|
||||
content: "\e605";
|
||||
}
|
||||
.icon-radio-unchecked:before, .sg-checkbox:before {
|
||||
.sg-icon-radio-unchecked:before, .sg-checkbox:before {
|
||||
content: "\e606";
|
||||
}
|
||||
.icon-file:before {
|
||||
.sg-icon-file:before {
|
||||
content: "\e607";
|
||||
}
|
||||
.icon-link:before {
|
||||
.sg-icon-link:before {
|
||||
content: "\e608";
|
||||
}
|
||||
.icon-keyboard:before {
|
||||
.sg-icon-keyboard:before {
|
||||
content: "\e609";
|
||||
}
|
||||
.icon-qrcode:before {
|
||||
.sg-icon-qrcode:before {
|
||||
content: "\e60a";
|
||||
}
|
||||
.icon-eye:before {
|
||||
.sg-icon-eye:before {
|
||||
content: "\e60b";
|
||||
}
|
||||
|
||||
/******************************************************************/
|
||||
/* End Pattern Lab Interface code */
|
||||
|
||||
// Demo to show grid system - in this stylesheet because it shouldn't be included in the production styles
|
||||
.demo {
|
||||
overflow: hidden;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.demo .gi, .demo .demo-block {
|
||||
background: $sg-tertiary;
|
||||
color: $sg-secondary;
|
||||
text-align: center;
|
||||
margin-bottom: $sg-pad-half;
|
||||
padding: 1em !important;
|
||||
|
||||
&:nth-of-type(2n) {
|
||||
color: $sg-tertiary;
|
||||
background: $sg-secondary;
|
||||
}
|
||||
|
||||
.gi {
|
||||
background: $sg-tone;
|
||||
color: $sg-tertiary;
|
||||
|
||||
&:nth-of-type(2n) {
|
||||
background: $sg-tone-2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//Demo box for animation
|
||||
.demo-animate {
|
||||
background: $sg-tertiary;
|
||||
padding: $sg-pad;
|
||||
margin-bottom: $sg-space;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
//Animate Demo to show
|
||||
.animate-move {
|
||||
position: relative;
|
||||
|
||||
.demo-shape {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 20px;
|
||||
background: $sg-secondary;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
> .demo-shape {
|
||||
left: 100%;
|
||||
margin-left: -20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
/* End Pattern Lab Interface code */
|
||||
@ -16,6 +16,7 @@
|
||||
<meta http-equiv="pragma" content="no-cache" />
|
||||
|
||||
<link rel="stylesheet" href="../../styleguide/css/styleguide.css?1393212425" media="all">
|
||||
<link rel="stylesheet" href="styleguide/css/styleguide-specific.css?1393212425" media="all" />
|
||||
|
||||
|
||||
<!-- End Pattern Lab -->
|
||||
|
||||
@ -21,6 +21,13 @@ var annotationsViewer = {
|
||||
|
||||
// not sure this is used anymore...
|
||||
$('body').addClass('comments-ready');
|
||||
|
||||
$(window).resize(function() {
|
||||
if(!annotationsViewer.commentsActive) {
|
||||
annotationsViewer.slideComment($('#sg-annotation-container').outerHeight());
|
||||
}
|
||||
});
|
||||
|
||||
$('#sg-t-annotations').click(function(e) {
|
||||
|
||||
e.preventDefault();
|
||||
|
||||
@ -25,6 +25,12 @@ var codeViewer = {
|
||||
|
||||
// not sure this is needed anymore...
|
||||
$('body').addClass('code-ready');
|
||||
|
||||
$(window).resize(function() {
|
||||
if(!codeViewer.codeActive) {
|
||||
codeViewer.slideCode($('#sg-code-container').outerHeight());
|
||||
}
|
||||
});
|
||||
|
||||
// add the onclick handler
|
||||
$('#sg-t-code').click(function(e) {
|
||||
|
||||
@ -1,14 +1,15 @@
|
||||
(function (w) {
|
||||
|
||||
var sw = document.body.clientWidth, //Viewport Width
|
||||
sh = document.body.clientHeight, //Viewport Height
|
||||
sh = $(document).height(), //Viewport Height
|
||||
minViewportWidth = 240, //Minimum Size for Viewport
|
||||
maxViewportWidth = 2600, //Maxiumum Size for Viewport
|
||||
viewportResizeHandleWidth = 14, //Width of the viewport drag-to-resize handle
|
||||
$sgViewport = $('#sg-viewport'), //Viewport element
|
||||
$sizePx = $('.sg-size-px'), //Px size input element in toolbar
|
||||
$sizeEms = $('.sg-size-em'), //Em size input element in toolbar
|
||||
$bodySize = parseInt($('body').css('font-size')), //Body size of the document
|
||||
$bodySize = parseInt($('body').css('font-size')), //Body size of the document,
|
||||
$headerHeight = $('.sg-header').height(),
|
||||
discoID = false,
|
||||
discoMode = false,
|
||||
hayMode = false;
|
||||
@ -16,10 +17,12 @@
|
||||
//Update dimensions on resize
|
||||
$(w).resize(function() {
|
||||
sw = document.body.clientWidth;
|
||||
sh = document.body.clientHeight;
|
||||
sh = $(document).height();
|
||||
|
||||
setAccordionHeight();
|
||||
});
|
||||
|
||||
/* Accordion dropdown */
|
||||
// Accordion dropdown
|
||||
$('.sg-acc-handle').on("click", function(e){
|
||||
e.preventDefault();
|
||||
|
||||
@ -36,14 +39,24 @@
|
||||
//Activate selected panel
|
||||
$this.toggleClass('active');
|
||||
$panel.toggleClass('active');
|
||||
setAccordionHeight();
|
||||
});
|
||||
|
||||
//Accordion Height
|
||||
function setAccordionHeight() {
|
||||
var $activeAccordion = $('.sg-acc-panel.active').first(),
|
||||
accordionHeight = $activeAccordion.height(),
|
||||
availableHeight = sh-$headerHeight; //Screen height minus the height of the header
|
||||
|
||||
$activeAccordion.height(availableHeight); //Set height of accordion to the available height
|
||||
}
|
||||
|
||||
$('.sg-nav-toggle').on("click", function(e){
|
||||
e.preventDefault();
|
||||
$('.sg-nav-container').toggleClass('active');
|
||||
});
|
||||
|
||||
//"View (containing clean, code, raw, etc options) Trigger
|
||||
// "View (containing clean, code, raw, etc options) Trigger
|
||||
$('#sg-t-toggle').on("click", function(e){
|
||||
e.preventDefault();
|
||||
$(this).parents('ul').toggleClass('active');
|
||||
@ -608,5 +621,4 @@
|
||||
}
|
||||
});
|
||||
|
||||
})(this);
|
||||
|
||||
})(this);
|
||||
@ -13,12 +13,11 @@
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="stylesheet" href="styleguide/css/styleguide.css?{{ cacheBuster }}" media="all" />
|
||||
<link rel="stylesheet" href="styleguide/css/styleguide-specific.css?{{ cacheBuster }}" media="all" />
|
||||
<link rel="stylesheet" href="styleguide/css/vendor/typeahead.css?{{ cacheBuster }}" media="all" />
|
||||
<link rel="stylesheet" href="styleguide/css/states.css?{{ cacheBuster }}" media="all" />
|
||||
<link rel="stylesheet" href="styleguide/css/vendor/prism.css?{{ cacheBuster }}" media="all" />
|
||||
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
|
||||
<script>window.jQuery || document.write('<script src="styleguide/js/vendor/jquery.js"><\/script>')</script>
|
||||
<script src="styleguide/js/vendor/jquery.js"></script>
|
||||
</head>
|
||||
<body id="patternlab-body">
|
||||
<!--Style Guide Header-->
|
||||
@ -87,7 +86,7 @@
|
||||
<div id="sg-comments-container"></div>
|
||||
</script>
|
||||
|
||||
<!-- the mess of javascript that is included to make things work -->
|
||||
<!-- Included JavaScript that makes everything work -->
|
||||
<script src="styleguide/js/vendor/prism.js?{{ cacheBuster }}"></script>
|
||||
<script src="styleguide/js/vendor/jwerty.js?{{ cacheBuster }}"></script>
|
||||
<script src="styleguide/js/vendor/classlist-polyfill.js?{{ cacheBuster}}"></script>
|
||||
|
||||
@ -10,18 +10,18 @@
|
||||
</form><!--end #sg-form-->
|
||||
</div><!--end #sg-current-size-->
|
||||
<ul class="sg-acc-panel sg-size-options">
|
||||
{{^ ishControlsHide.s }}<li class="sg-quarter"><a href="#" id="sg-size-s">S</a></li>{{/ ishControlsHide.s }}
|
||||
{{^ ishControlsHide.m }}<li class="sg-quarter"><a href="#" id="sg-size-m">M</a></li>{{/ ishControlsHide.m }}
|
||||
{{^ ishControlsHide.l }}<li class="sg-quarter"><a href="#" id="sg-size-l">L</a></li>{{/ ishControlsHide.l }}
|
||||
{{^ ishControlsHide.full }}<li class="sg-half"><a href="#" id="sg-size-full">Full</a></li>{{/ ishControlsHide.full }}
|
||||
{{^ ishControlsHide.random }}<li class="sg-half"><a href="#" id="sg-size-random">Random</a></li>{{/ ishControlsHide.random }}
|
||||
{{^ ishControlsHide.disco }}<li class="sg-half"><a href="#" class="mode-link" id="sg-size-disco">Disco</a></li>{{/ ishControlsHide.disco }}
|
||||
{{^ ishControlsHide.hay }}<li class="sg-half"><a href="#" class="mode-link" id="sg-size-hay">Hay!</a></li>{{/ ishControlsHide.hay }}
|
||||
{{^ ishControlsHide.s }}<li><a href="#" id="sg-size-s">S</a></li>{{/ ishControlsHide.s }}
|
||||
{{^ ishControlsHide.m }}<li><a href="#" id="sg-size-m">M</a></li>{{/ ishControlsHide.m }}
|
||||
{{^ ishControlsHide.l }}<li><a href="#" id="sg-size-l">L</a></li>{{/ ishControlsHide.l }}
|
||||
{{^ ishControlsHide.full }}<li><a href="#" id="sg-size-full">Full</a></li>{{/ ishControlsHide.full }}
|
||||
{{^ ishControlsHide.random }}<li><a href="#" id="sg-size-random">Random</a></li>{{/ ishControlsHide.random }}
|
||||
{{^ ishControlsHide.disco }}<li><a href="#" class="mode-link" id="sg-size-disco">Disco</a></li>{{/ ishControlsHide.disco }}
|
||||
{{^ ishControlsHide.hay }}<li><a href="#" class="mode-link" id="sg-size-hay">Hay!</a></li>{{/ ishControlsHide.hay }}
|
||||
</ul>
|
||||
</li>
|
||||
{{^ ishControlsHide.mqs }}
|
||||
<li class="sg-mqs">
|
||||
<a href="#" class="mode-link sg-acc-handle" id="sg-size-mq" title="Media query values found in stylesheet">MQ</a>
|
||||
<a href="#" class="mode-link sg-acc-handle" id="sg-size-mq" title="Media queries in stylesheet">MQ</a>
|
||||
<ul class="sg-acc-panel sg-left" id="sg-mq">
|
||||
{{# mqs }}
|
||||
<li><a href="#">{{ . }}</a></li>
|
||||
@ -31,30 +31,30 @@
|
||||
{{/ ishControlsHide.mqs }}
|
||||
{{^ ishControlsHide.find }}
|
||||
<li class="sg-find">
|
||||
<a href="#" class="sg-acc-handle sg-control-trigger sg-icon icon-search" id="sg-f-toggle" title="Find stuff"><span class="is-vishidden">F</span></a>
|
||||
<a href="#" class="sg-acc-handle sg-control-trigger sg-icon sg-icon-search" id="sg-f-toggle" title="Search Patterns"><span class="is-vishidden">Search Patterns</span></a>
|
||||
<ul class="sg-view sg-acc-panel sg-right sg-checklist" id="sg-find" style="margin-top: 33px;">
|
||||
<li><input class="typeahead" type="text" placeholder="search for a pattern..."></li>
|
||||
<li><input class="typeahead" id="typeahead" type="text" placeholder="search for a pattern..."></li>
|
||||
</ul>
|
||||
</li>
|
||||
{{/ ishControlsHide.find }}
|
||||
{{^ ishControlsHide.views-all }}
|
||||
<li class="sg-view">
|
||||
<a href="#" class="sg-acc-handle sg-control-trigger sg-icon icon-eye" id="sg-t-toggle"><span class="is-vishidden">View</span></a>
|
||||
<a href="#" class="sg-acc-handle sg-control-trigger sg-icon sg-icon-eye" id="sg-t-toggle" title="View"><span class="is-vishidden">View</span></a>
|
||||
<ul class="sg-view sg-acc-panel sg-right sg-checklist" id="sg-view">
|
||||
{{^ ishControlsHide.views-annotations }}<li><a href="#" class="sg-checkbox sg-iconitem" id="sg-t-annotations">Annotations</a></li>{{/ ishControlsHide.views-annotations }}
|
||||
{{^ ishControlsHide.views-code }}<li><a href="#" class="sg-checkbox sg-iconitem" id="sg-t-code">Code</a></li>{{/ ishControlsHide.views-code }}
|
||||
{{^ ishControlsHide.views-new }}<li><a href="#" target="_blank" id="sg-raw" class="sg-iconitem icon-link">Open in new window</a></li>{{/ ishControlsHide.views-new }}
|
||||
{{^ ishControlsHide.views-annotations }}<li><a href="#" class="sg-checkbox" id="sg-t-annotations">Annotations</a></li>{{/ ishControlsHide.views-annotations }}
|
||||
{{^ ishControlsHide.views-code }}<li><a href="#" class="sg-checkbox" id="sg-t-code">Code</a></li>{{/ ishControlsHide.views-code }}
|
||||
{{^ ishControlsHide.views-new }}<li><a href="#" target="_blank" id="sg-raw" class="sg-icon-link">Open in new window</a></li>{{/ ishControlsHide.views-new }}
|
||||
</ul>
|
||||
</li>
|
||||
{{/ ishControlsHide.views-all }}
|
||||
{{^ ishControlsHide.tools-all }}
|
||||
<li class="sg-tools">
|
||||
<a href="#" class="sg-acc-handle sg-tools-toggle sg-icon icon-cog" id="sg-tools-toggle"><span class="is-vishidden">Tools</span></a>
|
||||
<a href="#" class="sg-acc-handle sg-tools-toggle sg-icon sg-icon-cog" id="sg-tools-toggle" title="Tools"><span class="is-vishidden">Tools</span></a>
|
||||
<ul class="sg-acc-panel sg-right sg-checklist">
|
||||
{{^ ishControlsHide.tools-follow }}<li><a href="#" id="navSyncButton" class="sg-checkbox sg-iconitem sg-page-follow" data-state="off">Page Follow</a></li>{{/ ishControlsHide.tools-follow }}
|
||||
{{^ ishControlsHide.tools-reload }}<li><a href="#" id="contentSyncButton" class="sg-checkbox sg-iconitem sg-auto-reload" data-state="off">Auto-reload</a></li>{{/ ishControlsHide.tools-reload }}
|
||||
{{^ ishControlsHide.tools-shortcuts }}<li><a href="http://pattern-lab.info/docs/advanced-keyboard-shortcuts.html" class="icon-keyboard sg-iconitem" target="_blank">Keyboard Shortcuts</a>{{/ ishControlsHide.tools-shortcuts }}
|
||||
{{^ ishControlsHide.tools-docs }}<li><a href="http://pattern-lab.info/docs/" class="icon-file sg-iconitem" target="_blank">Pattern Lab Docs</a>{{/ ishControlsHide.tools-docs }}
|
||||
{{^ ishControlsHide.tools-follow }}<li><a href="#" id="navSyncButton" class="sg-checkbox sg-page-follow" data-state="off">Page Follow</a></li>{{/ ishControlsHide.tools-follow }}
|
||||
{{^ ishControlsHide.tools-reload }}<li><a href="#" id="contentSyncButton" class="sg-checkbox sg-auto-reload" data-state="off">Auto-reload</a></li>{{/ ishControlsHide.tools-reload }}
|
||||
{{^ ishControlsHide.tools-shortcuts }}<li><a href="http://pattern-lab.info/docs/advanced-keyboard-shortcuts.html" class="sg-icon-keyboard" target="_blank">Keyboard Shortcuts</a>{{/ ishControlsHide.tools-shortcuts }}
|
||||
{{^ ishControlsHide.tools-docs }}<li><a href="http://pattern-lab.info/docs/" class="sg-icon-file" target="_blank">Pattern Lab Docs</a>{{/ ishControlsHide.tools-docs }}
|
||||
</ul>
|
||||
</li>
|
||||
{{/ ishControlsHide.tools-all }}
|
||||
|
||||
@ -6,4 +6,5 @@
|
||||
<meta http-equiv="pragma" content="no-cache" />
|
||||
|
||||
<link rel="stylesheet" href="../../styleguide/css/styleguide.css?{{ cacheBuster }}" media="all">
|
||||
<link rel="stylesheet" href="../../styleguide/css/styleguide-specific.css?{{ cacheBuster }}" media="all" />
|
||||
|
||||
|
||||
@ -1,47 +0,0 @@
|
||||
/* basic styling */
|
||||
.sg-pattern-state:before {
|
||||
margin-right: 4px;
|
||||
content: "\2022";
|
||||
display: inline-block;
|
||||
margin-bottom: -4px;
|
||||
font-size: 18px;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
/* nav styling */
|
||||
.sg-nav .sg-pattern-state:before {
|
||||
margin-top: -4px;
|
||||
margin-bottom: 0;
|
||||
margin-left: -4px;
|
||||
height: 20px;
|
||||
display: block;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.sg-sub-nav .sg-pattern-state:before {
|
||||
margin-left: -11px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
/* call out for pattern's pattern state */
|
||||
span.sg-pattern-state {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
span.sg-pattern-state:before {
|
||||
margin-bottom: -3px;
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
/* pattern states */
|
||||
.inprogress:before {
|
||||
color: #FF4136 !important;
|
||||
}
|
||||
|
||||
.inreview:before {
|
||||
color: #FFCC00 !important;
|
||||
}
|
||||
|
||||
.complete:before {
|
||||
color: #2ECC40 !important;
|
||||
}
|
||||
@ -1,374 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
/*
|
||||
colors
|
||||
red: $orange; rgb(229,24,55)
|
||||
gray: #808080;
|
||||
*/
|
||||
/************Reset**************/
|
||||
* {
|
||||
-moz-box-sizing: border-box;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box; }
|
||||
|
||||
html, body, div, object, iframe, fieldset {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0; }
|
||||
|
||||
ol, ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0; }
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0; }
|
||||
|
||||
header, footer, nav, section, article, hgroup, figure {
|
||||
display: block; }
|
||||
|
||||
legend {
|
||||
display: none; }
|
||||
|
||||
/************End Reset**************/
|
||||
/************Global**************/
|
||||
body {
|
||||
background: #fff;
|
||||
color: #000;
|
||||
font: 100%/1.4 "HelveticaNeue", "Helvetica", "Arial", sans-serif;
|
||||
padding: 0;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
border-top: 20px solid #000;
|
||||
border-bottom: 20px solid #000; }
|
||||
|
||||
a {
|
||||
color: #808080;
|
||||
text-decoration: none; }
|
||||
|
||||
a:hover, a:focus {
|
||||
color: #bededf; }
|
||||
|
||||
p {
|
||||
margin: 0 0 1em; }
|
||||
|
||||
img, object, video {
|
||||
max-width: 100%;
|
||||
border: 0; }
|
||||
|
||||
a img {
|
||||
border: 0;
|
||||
outline: 0; }
|
||||
|
||||
h1 {
|
||||
font-size: 3em;
|
||||
line-height: 1;
|
||||
letter-spacing: -0.02em;
|
||||
margin-bottom: 0.2em; }
|
||||
|
||||
h2 {
|
||||
font-size: 2em;
|
||||
line-height: 1.1;
|
||||
margin-bottom: 0.2em; }
|
||||
|
||||
h3 {
|
||||
font-weight: normal;
|
||||
line-height: 1.1;
|
||||
padding-bottom: 0.4em;
|
||||
border-bottom: 1px solid #ccc; }
|
||||
|
||||
h1 a, h2 a, h3 a {
|
||||
display: block;
|
||||
color: #000; }
|
||||
|
||||
h1 a:hover, h2 a:hover, h3 a:hover {
|
||||
color: #bededf; }
|
||||
|
||||
blockquote {
|
||||
border-left: 0.5em solid #ddd;
|
||||
padding-left: 1em;
|
||||
margin-left: 1em; }
|
||||
|
||||
small {
|
||||
color: #bededf; }
|
||||
|
||||
input[type=search] {
|
||||
-webkit-appearance: none;
|
||||
border-radius: 0; }
|
||||
|
||||
::-webkit-input-placeholder {
|
||||
color: #808080; }
|
||||
|
||||
:-moz-placeholder {
|
||||
color: #808080; }
|
||||
|
||||
/************End Global**************/
|
||||
/************Classes**************/
|
||||
.inactive {
|
||||
color: #ddd; }
|
||||
|
||||
/************End Classes**************/
|
||||
/************Structure**************/
|
||||
.container {
|
||||
max-width: 60em;
|
||||
margin: 0 auto;
|
||||
padding: 0 1em;
|
||||
overflow: hidden; }
|
||||
|
||||
[role=main] {
|
||||
padding-bottom: 1em; }
|
||||
|
||||
/*Footer*/
|
||||
[role=contentinfo] {
|
||||
color: #fff;
|
||||
background: #000;
|
||||
margin: 0 -1em;
|
||||
position: relative;
|
||||
z-index: 2; }
|
||||
[role=contentinfo] > div {
|
||||
max-width: 60em;
|
||||
padding: 0 1em;
|
||||
margin: 0 auto;
|
||||
overflow: hidden; }
|
||||
|
||||
/*End Footer*/
|
||||
/*Grid*/
|
||||
.grid {
|
||||
margin: 0 -1em;
|
||||
overflow: hidden; }
|
||||
|
||||
.grid:target {
|
||||
-webkit-animation: fadeout 5s 1 ease-out;
|
||||
-moz-animation: fadeout 5s 1 ease-out;
|
||||
-o-animation: fadeout 5s 1 ease-out;
|
||||
animation: fadeout 5s 1 ease-out; }
|
||||
|
||||
.grid > h2 {
|
||||
margin-left: 0.45em; }
|
||||
|
||||
.grid > section {
|
||||
padding: 1em 1em 0.5em; }
|
||||
|
||||
.grid > section:target {
|
||||
-webkit-animation: fadeout 5s 1 ease-out;
|
||||
-moz-animation: fadeout 5s 1 ease-out;
|
||||
-o-animation: fadeout 5s 1 ease-out;
|
||||
animation: fadeout 5s 1 ease-out; }
|
||||
|
||||
.grid ul {
|
||||
overflow: hidden; }
|
||||
|
||||
.grid ul li {
|
||||
margin-bottom: 0.3em; }
|
||||
|
||||
.featured:after {
|
||||
content: "*";
|
||||
color: #bededf; }
|
||||
|
||||
/*Fluid*/
|
||||
.fluid {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
max-width: 40em; }
|
||||
|
||||
/*Homepage*/
|
||||
.home h1 {
|
||||
margin-bottom: 0.2em; }
|
||||
|
||||
.intro {
|
||||
font-size: 1.8em;
|
||||
line-height: 1.2;
|
||||
margin: 0 auto; }
|
||||
|
||||
.intro a:hover, .intro a:focus {
|
||||
color: #000;
|
||||
border-bottom-color: #000; }
|
||||
|
||||
.ani {
|
||||
position: relative;
|
||||
height: 15em;
|
||||
margin: 1em 0 0;
|
||||
width: 100%;
|
||||
z-index: 0; }
|
||||
|
||||
.ani div {
|
||||
width: 100%; }
|
||||
|
||||
.ani div b {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 5%;
|
||||
right: 5%;
|
||||
bottom: 5%;
|
||||
left: 5%;
|
||||
background: rgba(229, 24, 55, 0.22); }
|
||||
|
||||
/*Patterns*/
|
||||
.mod {
|
||||
padding: 1em; }
|
||||
|
||||
.pattern {
|
||||
background: #f7f7f7;
|
||||
border-bottom: 1px solid #808080;
|
||||
margin-bottom: 1em;
|
||||
overflow: hidden; }
|
||||
|
||||
.pattern-description h1 {
|
||||
font-size: 3.4em;
|
||||
margin-bottom: 0.5em; }
|
||||
|
||||
.pattern-description {
|
||||
max-width: 40em;
|
||||
margin: 0 auto; }
|
||||
|
||||
.pattern-description ul, .pattern-description ol {
|
||||
margin-bottom: 2em; }
|
||||
|
||||
.pattern-description li {
|
||||
margin-bottom: 1em; }
|
||||
|
||||
/*Blog*/
|
||||
/*Blog Header*/
|
||||
.blog .container {
|
||||
max-width: 62em; }
|
||||
|
||||
.blog header[role=banner] {
|
||||
overflow: hidden;
|
||||
margin-bottom: 2em;
|
||||
padding: 2em 0 1em;
|
||||
border-bottom: 1px solid #000; }
|
||||
|
||||
.blog-logo {
|
||||
font-weight: normal;
|
||||
font-size: 1.2em;
|
||||
margin: 0 0 1em; }
|
||||
|
||||
.blog-logo img {
|
||||
width: 3.3em; }
|
||||
|
||||
.blog-logo a {
|
||||
color: #000; }
|
||||
|
||||
.search-form {
|
||||
width: 100%;
|
||||
margin-bottom: 1em; }
|
||||
|
||||
.search-field {
|
||||
width: 100%;
|
||||
padding: 0.5em 0;
|
||||
border: 0;
|
||||
border-bottom: 1px solid #808080;
|
||||
outline: none; }
|
||||
|
||||
.search-field:focus {
|
||||
background: #bededf;
|
||||
color: #fff; }
|
||||
|
||||
.search-field:focus::-webkit-input-placeholder {
|
||||
color: #fff; }
|
||||
|
||||
.search-field:focus :-moz-placeholder {
|
||||
color: #fff; }
|
||||
|
||||
.blog .nav {
|
||||
clear: both; }
|
||||
|
||||
.blog .nav a {
|
||||
display: block;
|
||||
font-weight: bold;
|
||||
color: #000; }
|
||||
|
||||
.blog .nav a:hover {
|
||||
color: #bededf; }
|
||||
|
||||
/*Posts*/
|
||||
.posts ol > li {
|
||||
padding-bottom: 1em;
|
||||
border-bottom: 1px solid #ccc;
|
||||
margin-bottom: 1em;
|
||||
overflow: hidden; }
|
||||
|
||||
.posts h2 {
|
||||
font-size: 1.4em;
|
||||
margin: 0.28em 0 0.1em;
|
||||
font-weight: normal; }
|
||||
|
||||
.posts h2 a {
|
||||
color: #000; }
|
||||
|
||||
.posts h2 a:hover, .posts h2 a:focus {
|
||||
color: #bededf; }
|
||||
|
||||
.permalink {
|
||||
display: block;
|
||||
font-size: 0.8em;
|
||||
margin-bottom: 1.2em; }
|
||||
|
||||
.post-body a {
|
||||
border-bottom: 1px solid #ccc; }
|
||||
|
||||
.posts blockquote {
|
||||
margin: 0 0 1em;
|
||||
color: #666;
|
||||
border-left: 0.25em solid #ccc;
|
||||
padding-left: 1em; }
|
||||
|
||||
.tags {
|
||||
float: left; }
|
||||
|
||||
.tags li {
|
||||
display: inline-block;
|
||||
font-size: 0.8em;
|
||||
margin-right: 0.5em; }
|
||||
|
||||
.posts ol > li .tags a, .permalink {
|
||||
color: #ccc;
|
||||
-webkit-transition: color 0.3s ease-out;
|
||||
-moz-transition: color 0.3s ease-out;
|
||||
-ms-transition: color 0.3s ease-out;
|
||||
-o-transition: color 0.3s ease-out;
|
||||
transition: color 0.3s ease-out; }
|
||||
|
||||
.posts ol > li:hover .tags a, .posts ol > li:hover .permalink {
|
||||
color: #808080; }
|
||||
|
||||
.blog-nav {
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
padding: 1em 0; }
|
||||
|
||||
.posts .blog-nav a {
|
||||
border: 0; }
|
||||
|
||||
.nav-next {
|
||||
float: right; }
|
||||
|
||||
.nav-prev {
|
||||
float: left; }
|
||||
|
||||
/* Sidebar */
|
||||
.sidebar {
|
||||
font-size: 0.8em;
|
||||
padding-bottom: 1.4em; }
|
||||
|
||||
.sidebar div {
|
||||
margin-bottom: 2em; }
|
||||
|
||||
.sidebar h3 {
|
||||
font-weight: bold;
|
||||
font-size: 0.9em;
|
||||
line-height: 1;
|
||||
border-bottom: 1px solid #000; }
|
||||
|
||||
.sidebar a {
|
||||
color: #808080; }
|
||||
|
||||
.sidebar a:hover, .sidebar a:focus {
|
||||
color: #bededf; }
|
||||
|
||||
.top {
|
||||
clear: both;
|
||||
display: block;
|
||||
padding: 1em 0; }
|
||||
|
||||
.top:before {
|
||||
content: '▲'; }
|
||||
@ -1,404 +0,0 @@
|
||||
/*
|
||||
colors
|
||||
red: $orange; rgb(229,24,55)
|
||||
gray: #808080;
|
||||
*/
|
||||
|
||||
$orange : #bededf;
|
||||
|
||||
$max-width: 60em;
|
||||
|
||||
/************Reset**************/
|
||||
* {
|
||||
-moz-box-sizing: border-box;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
html, body, div, object, iframe, fieldset {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
}
|
||||
ol, ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
header, footer, nav, section, article, hgroup, figure {
|
||||
display: block;
|
||||
}
|
||||
legend {
|
||||
display: none;
|
||||
}
|
||||
/************End Reset**************/
|
||||
|
||||
/************Global**************/
|
||||
body {
|
||||
background: #fff;
|
||||
color: #000;
|
||||
font: 100%/1.4 "HelveticaNeue", "Helvetica", "Arial", sans-serif;
|
||||
padding: 0;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
border-top: 20px solid #000;
|
||||
border-bottom: 20px solid #000;
|
||||
}
|
||||
a {
|
||||
color: #808080;
|
||||
text-decoration: none;
|
||||
}
|
||||
a:hover, a:focus {
|
||||
color: $orange;
|
||||
}
|
||||
p {
|
||||
margin: 0 0 1em;
|
||||
}
|
||||
img, object, video {
|
||||
max-width: 100%;
|
||||
border: 0;
|
||||
}
|
||||
a img {
|
||||
border: 0;
|
||||
outline: 0;
|
||||
}
|
||||
h1 {
|
||||
font-size: 3em;
|
||||
line-height: 1;
|
||||
letter-spacing: -0.02em;
|
||||
margin-bottom: 0.2em;
|
||||
}
|
||||
h2 {
|
||||
font-size: 2em;
|
||||
line-height: 1.1;
|
||||
margin-bottom: 0.2em;
|
||||
}
|
||||
h3 {
|
||||
font-weight: normal;
|
||||
line-height: 1.1;
|
||||
padding-bottom: 0.4em;
|
||||
border-bottom: 1px solid #ccc;
|
||||
}
|
||||
h1 a, h2 a, h3 a {
|
||||
display: block;
|
||||
color: #000;
|
||||
}
|
||||
h1 a:hover, h2 a:hover, h3 a:hover {
|
||||
color: $orange;
|
||||
}
|
||||
blockquote {
|
||||
border-left: 0.5em solid #ddd;
|
||||
padding-left: 1em;
|
||||
margin-left: 1em;
|
||||
}
|
||||
small {
|
||||
color: $orange;
|
||||
}
|
||||
input[type=search] {
|
||||
-webkit-appearance: none;
|
||||
border-radius: 0;
|
||||
}
|
||||
::-webkit-input-placeholder {
|
||||
color: #808080;
|
||||
}
|
||||
:-moz-placeholder {
|
||||
color: #808080;
|
||||
}
|
||||
/************End Global**************/
|
||||
|
||||
/************Classes**************/
|
||||
.inactive {
|
||||
color: #ddd;
|
||||
}
|
||||
/************End Classes**************/
|
||||
|
||||
/************Structure**************/
|
||||
.container {
|
||||
max-width: $max-width;
|
||||
margin: 0 auto;
|
||||
padding: 0 1em;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
[role=main] {
|
||||
padding-bottom: 1em;
|
||||
}
|
||||
|
||||
/*Footer*/
|
||||
[role=contentinfo] {
|
||||
color: #fff;
|
||||
background: #000;
|
||||
margin: 0 -1em;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
|
||||
> div {
|
||||
max-width: $max-width;
|
||||
padding: 0 1em;
|
||||
margin: 0 auto;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
/*End Footer*/
|
||||
|
||||
/*Grid*/
|
||||
.grid {
|
||||
margin: 0 -1em;
|
||||
overflow: hidden;
|
||||
}
|
||||
.grid:target {
|
||||
-webkit-animation: fadeout 5s 1 ease-out;
|
||||
-moz-animation: fadeout 5s 1 ease-out;
|
||||
-o-animation: fadeout 5s 1 ease-out;
|
||||
animation: fadeout 5s 1 ease-out;
|
||||
}
|
||||
.grid > h2 {
|
||||
margin-left: 0.45em;
|
||||
}
|
||||
.grid > section {
|
||||
padding: 1em 1em 0.5em;
|
||||
}
|
||||
.grid > section:target {
|
||||
-webkit-animation: fadeout 5s 1 ease-out;
|
||||
-moz-animation: fadeout 5s 1 ease-out;
|
||||
-o-animation: fadeout 5s 1 ease-out;
|
||||
animation: fadeout 5s 1 ease-out;
|
||||
}
|
||||
.grid ul {
|
||||
overflow: hidden;
|
||||
}
|
||||
.grid ul li {
|
||||
margin-bottom: 0.3em;
|
||||
}
|
||||
.featured:after {
|
||||
content: "*";
|
||||
color: $orange;
|
||||
}
|
||||
|
||||
/*Fluid*/
|
||||
.fluid {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
max-width: 40em;
|
||||
}
|
||||
|
||||
/*Homepage*/
|
||||
.home h1 {
|
||||
margin-bottom: 0.2em;
|
||||
}
|
||||
.intro {
|
||||
font-size: 1.8em;
|
||||
line-height: 1.2;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.intro a:hover ,.intro a:focus {
|
||||
color: #000;
|
||||
border-bottom-color: #000;
|
||||
}
|
||||
|
||||
.ani {
|
||||
position: relative;
|
||||
height: 15em;
|
||||
margin: 1em 0 0;
|
||||
width: 100%;
|
||||
z-index: 0;
|
||||
}
|
||||
.ani div {
|
||||
width: 100%;
|
||||
}
|
||||
.ani div b {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 5%;
|
||||
right: 5%;
|
||||
bottom: 5%;
|
||||
left: 5%;
|
||||
background: rgba(229,24,55,0.22);
|
||||
}
|
||||
|
||||
|
||||
/*Patterns*/
|
||||
.mod {
|
||||
padding: 1em;
|
||||
}
|
||||
.pattern {
|
||||
background: #f7f7f7;
|
||||
border-bottom: 1px solid #808080;
|
||||
margin-bottom: 1em;
|
||||
overflow: hidden;
|
||||
}
|
||||
.pattern-description h1 {
|
||||
font-size: 3.4em;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
.pattern-description {
|
||||
max-width: 40em;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.pattern-description ul, .pattern-description ol {
|
||||
margin-bottom: 2em;
|
||||
}
|
||||
.pattern-description li {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
|
||||
/*Blog*/
|
||||
/*Blog Header*/
|
||||
.blog .container {
|
||||
max-width: 62em;
|
||||
}
|
||||
.blog header[role=banner] {
|
||||
overflow: hidden;
|
||||
margin-bottom: 2em;
|
||||
padding: 2em 0 1em;
|
||||
border-bottom: 1px solid #000;
|
||||
}
|
||||
.blog-logo {
|
||||
font-weight: normal;
|
||||
font-size: 1.2em;
|
||||
margin: 0 0 1em;
|
||||
}
|
||||
.blog-logo img {
|
||||
width: 3.3em;
|
||||
}
|
||||
.blog-logo a {
|
||||
color: #000;
|
||||
}
|
||||
.search-form {
|
||||
width: 100%;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
.search-field {
|
||||
width: 100%;
|
||||
padding: 0.5em 0;
|
||||
border: 0;
|
||||
border-bottom: 1px solid #808080;
|
||||
outline: none;
|
||||
}
|
||||
.search-field:focus {
|
||||
background: $orange;
|
||||
color: #fff;
|
||||
}
|
||||
.search-field:focus::-webkit-input-placeholder {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.search-field:focus :-moz-placeholder {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.blog .nav {
|
||||
clear: both;
|
||||
}
|
||||
.blog .nav a {
|
||||
display: block;
|
||||
font-weight: bold;
|
||||
color: #000;
|
||||
}
|
||||
.blog .nav a:hover {
|
||||
color: $orange;
|
||||
}
|
||||
|
||||
/*Posts*/
|
||||
.posts ol > li {
|
||||
padding-bottom: 1em;
|
||||
border-bottom: 1px solid #ccc;
|
||||
margin-bottom: 1em;
|
||||
overflow: hidden;
|
||||
}
|
||||
.posts h2 {
|
||||
font-size: 1.4em;
|
||||
margin: 0.28em 0 0.1em;
|
||||
font-weight: normal;
|
||||
}
|
||||
.posts h2 a {
|
||||
color: #000;
|
||||
}
|
||||
.posts h2 a:hover, .posts h2 a:focus {
|
||||
color: $orange;
|
||||
}
|
||||
.permalink {
|
||||
display: block;
|
||||
font-size: 0.8em;
|
||||
margin-bottom: 1.2em;
|
||||
}
|
||||
.post-body a {
|
||||
border-bottom: 1px solid #ccc;
|
||||
}
|
||||
.posts blockquote {
|
||||
margin: 0 0 1em;
|
||||
color: #666;
|
||||
border-left: 0.25em solid #ccc;
|
||||
padding-left: 1em;
|
||||
}
|
||||
.tags {
|
||||
float: left;
|
||||
}
|
||||
.tags li {
|
||||
display: inline-block;
|
||||
font-size: 0.8em;
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
|
||||
.posts ol > li .tags a, .permalink {
|
||||
color: #ccc;
|
||||
-webkit-transition: color 0.3s ease-out;
|
||||
-moz-transition: color 0.3s ease-out;
|
||||
-ms-transition: color 0.3s ease-out;
|
||||
-o-transition: color 0.3s ease-out;
|
||||
transition: color 0.3s ease-out;
|
||||
}
|
||||
.posts ol > li:hover .tags a, .posts ol > li:hover .permalink {
|
||||
color: #808080;
|
||||
}
|
||||
.blog-nav {
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
padding: 1em 0;
|
||||
}
|
||||
.posts .blog-nav a {
|
||||
border: 0;
|
||||
}
|
||||
.nav-next {
|
||||
float: right;
|
||||
}
|
||||
.nav-prev {
|
||||
float: left;
|
||||
}
|
||||
|
||||
/* Sidebar */
|
||||
.sidebar {
|
||||
font-size: 0.8em;
|
||||
padding-bottom: 1.4em;
|
||||
}
|
||||
.sidebar div {
|
||||
margin-bottom: 2em;
|
||||
}
|
||||
.sidebar h3 {
|
||||
font-weight: bold;
|
||||
font-size: 0.9em;
|
||||
line-height: 1;
|
||||
border-bottom: 1px solid #000;
|
||||
}
|
||||
.sidebar a {
|
||||
color: #808080;
|
||||
}
|
||||
.sidebar a:hover, .sidebar a:focus {
|
||||
color: $orange;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.top {
|
||||
clear: both;
|
||||
display: block;
|
||||
padding: 1em 0;
|
||||
}
|
||||
.top:before {
|
||||
content: '▲';
|
||||
}
|
||||
|
||||
@ -1,739 +0,0 @@
|
||||
/*------------------------------------*\
|
||||
$PATTERN LAB STYLES
|
||||
\*------------------------------------*/
|
||||
/**
|
||||
* NOTE: These styles are specific to Pattern Lab and should not be modified.
|
||||
* Edit all project styles in /source/css/
|
||||
*
|
||||
* Second note: Any important declarations are to prevent brand styles from overriding style guide
|
||||
*/
|
||||
/*------------------------------------*\
|
||||
$CONTENTS
|
||||
\*------------------------------------*/
|
||||
/**
|
||||
* STYLE GUIDE VARIABLES------------------Declarations of Sass variables
|
||||
* -----Font
|
||||
* -----Colors
|
||||
* -----Typography
|
||||
* -----Defaults
|
||||
* -----Breakpoints
|
||||
* MIXINS---------------------------------Sass mixins
|
||||
* GLOBAL ELEMENTS------------------------Establish global styles
|
||||
* -----Main
|
||||
* -----Headings
|
||||
* -----Text-related elements (p, blockquote, lists)
|
||||
* -----Defaults
|
||||
* -----Breakpoints
|
||||
* STYLE GUIDE INTERFACE------------------CSS for the Pattern Lab Container.
|
||||
* -----Header
|
||||
* -----Navigation
|
||||
* -----Controls
|
||||
* -----Main Container
|
||||
* -----Viewport
|
||||
* -----Section Headers
|
||||
* -----Code View
|
||||
* -----Icon Fonts
|
||||
*/
|
||||
/*------------------------------------*\
|
||||
$PATTERN LAB VARIABLES
|
||||
\*------------------------------------*/
|
||||
/*Fonts*/
|
||||
/* Style Guide Interface Colors */
|
||||
/* Typography */
|
||||
/* Defaults */
|
||||
/* Dimensions */
|
||||
/* Breakpoints */
|
||||
/*------------------------------------*\
|
||||
$PATTERN LAB MIXINS
|
||||
\*------------------------------------*/
|
||||
/*------------------------------------*\
|
||||
$PATTERN LAB INTERFACE
|
||||
\*------------------------------------*/
|
||||
#patternlab-html, #patternlab-body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: #dddddd;
|
||||
-webkit-text-size-adjust: 100%; }
|
||||
|
||||
.sg-nav-wrapper {
|
||||
overflow: hidden;
|
||||
background: #dddddd; }
|
||||
|
||||
.is-vishidden {
|
||||
position: absolute !important;
|
||||
overflow: hidden;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
clip: rect(1px, 1px, 1px, 1px); }
|
||||
|
||||
.sg-cf, .sg-pattern {
|
||||
/**zoom: 1;*/ }
|
||||
.sg-cf:before, .sg-pattern:before, .sg-cf:after, .sg-pattern:after {
|
||||
content: " ";
|
||||
display: table; }
|
||||
.sg-cf:after, .sg-pattern:after {
|
||||
clear: both; }
|
||||
|
||||
/*------------------------------------*\
|
||||
$PATTERN LAB HEADER
|
||||
\*------------------------------------*/
|
||||
/* Header */
|
||||
.sg-header {
|
||||
background: #222222;
|
||||
color: white;
|
||||
font-family: "HelveticaNeue", "Helvetica", "Arial", sans-serif;
|
||||
text-transform: uppercase;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 2;
|
||||
width: 100%;
|
||||
-webkit-box-shadow: inset 0 1px 0 #5f6164, inset 0 -1px 0 #2e2f2f, 0 1px 3px rgba(0, 0, 0, 0.3);
|
||||
-moz-box-shadow: inset 0 1px 0 #5f6164, inset 0 -1px 0 #2e2f2f, 0 1px 3px rgba(0, 0, 0, 0.3);
|
||||
box-shadow: inset 0 1px 0 #5f6164, inset 0 -1px 0 #2e2f2f, 0 1px 3px rgba(0, 0, 0, 0.3); }
|
||||
.sg-header * {
|
||||
-moz-box-sizing: border-box;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box; }
|
||||
.sg-header ul, .sg-header ol {
|
||||
padding: 0;
|
||||
margin: 0; }
|
||||
.sg-header li {
|
||||
list-style: none;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
|
||||
.sg-header a {
|
||||
font-size: 70%;
|
||||
color: gray;
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
line-height: 1;
|
||||
padding: 1em;
|
||||
-webkit-transition: background 0.15s ease-out;
|
||||
-moz-transition: background 0.15s ease-out;
|
||||
-ms-transition: background 0.15s ease-out;
|
||||
-o-transition: background 0.15s ease-out;
|
||||
transition: background 0.15s ease-out;
|
||||
-webkit-transition: color 0.15s ease-out;
|
||||
-moz-transition: color 0.15s ease-out;
|
||||
-ms-transition: color 0.15s ease-out;
|
||||
-o-transition: color 0.15s ease-out;
|
||||
transition: color 0.15s ease-out; }
|
||||
.sg-header a:hover, .sg-header a:focus, .sg-header a.active {
|
||||
color: white;
|
||||
background: rgba(255, 255, 255, 0.05); }
|
||||
.sg-header ol ol ol a {
|
||||
padding-left: 2em;
|
||||
text-transform: none; }
|
||||
|
||||
/* Navigation */
|
||||
.sg-header .sg-nav-toggle {
|
||||
display: inline-block;
|
||||
padding: 0.9em 1em;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0);
|
||||
position: relative;
|
||||
text-transform: uppercase;
|
||||
z-index: 2; }
|
||||
.sg-header .sg-nav-toggle span {
|
||||
display: inline-block;
|
||||
padding-right: 0.2em; }
|
||||
@media all and (min-width: 48em) {
|
||||
.sg-header .sg-nav-toggle {
|
||||
display: none; } }
|
||||
|
||||
@media all and (max-width: 48em) {
|
||||
.sg-nav-container {
|
||||
overflow: hidden;
|
||||
max-height: 0;
|
||||
-webkit-transition: max-height 0.1s ease-out;
|
||||
-moz-transition: max-height 0.1s ease-out;
|
||||
-ms-transition: max-height 0.1s ease-out;
|
||||
-o-transition: max-height 0.1s ease-out;
|
||||
transition: max-height 0.1s ease-out; }
|
||||
.sg-nav-container.active {
|
||||
max-height: 50em; } }
|
||||
|
||||
.sg-nav {
|
||||
z-index: 1;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none; }
|
||||
.sg-nav > li {
|
||||
cursor: pointer; }
|
||||
@media all and (min-width: 48em) {
|
||||
.sg-nav > li {
|
||||
border-bottom: 0;
|
||||
border-right: 1px solid rgba(255, 255, 255, 0.05);
|
||||
float: left;
|
||||
position: relative; }
|
||||
.sg-nav > li > ol {
|
||||
position: absolute;
|
||||
top: 2em;
|
||||
left: 0; } }
|
||||
|
||||
/* Accordion */
|
||||
.sg-acc-handle:after {
|
||||
content: ' +';
|
||||
float: right;
|
||||
font-size: 70%; }
|
||||
@media all and (min-width: 48em) {
|
||||
.sg-acc-handle:after {
|
||||
float: none; } }
|
||||
.sg-acc-handle.active {
|
||||
color: white;
|
||||
background: rgba(255, 255, 255, 0.05); }
|
||||
.sg-acc-handle.active:after {
|
||||
content: ' -'; }
|
||||
.sg-acc-handle.sg-icon:after {
|
||||
content: ""; }
|
||||
|
||||
.sg-header .sg-icon {
|
||||
width: auto;
|
||||
font-size: 1rem;
|
||||
padding: 0.5rem 1rem; }
|
||||
|
||||
.sg-acc-panel {
|
||||
overflow: hidden;
|
||||
max-height: 0;
|
||||
min-width: 10em;
|
||||
background: #222222;
|
||||
-webkit-transition: max-height 0.1s ease-out;
|
||||
-moz-transition: max-height 0.1s ease-out;
|
||||
-ms-transition: max-height 0.1s ease-out;
|
||||
-o-transition: max-height 0.1s ease-out;
|
||||
transition: max-height 0.1s ease-out; }
|
||||
.sg-acc-panel.active {
|
||||
max-height: 50em;
|
||||
overflow: auto; }
|
||||
.sg-acc-panel.sg-right {
|
||||
position: absolute;
|
||||
left: auto;
|
||||
right: 0; }
|
||||
.sg-acc-panel.sg-left {
|
||||
position: absolute;
|
||||
left: auto; }
|
||||
.sg-acc-panel [class^="icon-"]:before, .sg-acc-panel [class*=" icon-"]:before {
|
||||
display: inline-block;
|
||||
margin-right: 0.4em; }
|
||||
|
||||
/* Controls (sizing, view mode) */
|
||||
.sg-controls {
|
||||
border: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
z-index: 2; }
|
||||
@media all and (min-width: 72em) {
|
||||
.sg-controls {
|
||||
width: 44em; } }
|
||||
|
||||
.sg-control-trigger {
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
|
||||
@media all and (min-width: 48em) {
|
||||
.sg-control-trigger {
|
||||
border: 0; } }
|
||||
@media all and (min-width: 72em) {
|
||||
.sg-control-trigger {
|
||||
float: left;
|
||||
width: 6em; } }
|
||||
|
||||
.sg-control > li {
|
||||
float: left; }
|
||||
@media all and (min-width: 48em) {
|
||||
.sg-control > li {
|
||||
border-bottom: 0;
|
||||
border-left: 1px solid rgba(255, 255, 255, 0.05); } }
|
||||
.sg-control .sg-input {
|
||||
padding: 0.1em;
|
||||
-webkit-transition: all 0.2s ease-out;
|
||||
-moz-transition: all 0.2s ease-out;
|
||||
-ms-transition: all 0.2s ease-out;
|
||||
-o-transition: all 0.2s ease-out;
|
||||
transition: all 0.2s ease-out; }
|
||||
.sg-control .sg-input:active, .sg-control .sg-input:focus {
|
||||
outline: 0;
|
||||
background: #999999;
|
||||
color: #000; }
|
||||
|
||||
.sg-current-size {
|
||||
font-size: 70%;
|
||||
color: gray;
|
||||
padding: 0.85em 0.7em; }
|
||||
.sg-current-size:hover .sg-input {
|
||||
background: #999999;
|
||||
color: #000; }
|
||||
@media all and (min-width: 72em) {
|
||||
.sg-current-size {
|
||||
float: left; } }
|
||||
|
||||
.sg-size {
|
||||
width: 135px; }
|
||||
@media all and (min-width: 48em) {
|
||||
.sg-size {
|
||||
width: auto; } }
|
||||
|
||||
@media all and (min-width: 72em) {
|
||||
.sg-size-options {
|
||||
float: left;
|
||||
position: static;
|
||||
max-height: none;
|
||||
max-width: none; }
|
||||
.sg-size-options > li {
|
||||
display: inline-block;
|
||||
border: 0;
|
||||
border-left: 1px solid rgba(255, 255, 255, 0.05); } }
|
||||
|
||||
.sg-find {
|
||||
display: none; }
|
||||
|
||||
@media all and (min-width: 48em) {
|
||||
.sg-find {
|
||||
display: block; } }
|
||||
#sg-form {
|
||||
margin: 0;
|
||||
border: 0;
|
||||
padding: 0; }
|
||||
|
||||
.sg-input {
|
||||
margin: -2px 0 0 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
background-color: #222;
|
||||
color: gray;
|
||||
width: 25px;
|
||||
text-align: right; }
|
||||
@media all and (min-width: 48em) {
|
||||
.sg-input {
|
||||
width: 35px; } }
|
||||
|
||||
.sg-input-active {
|
||||
background-color: #fff;
|
||||
color: #000; }
|
||||
|
||||
.sg-view {
|
||||
position: relative; }
|
||||
.sg-view > ul {
|
||||
position: absolute;
|
||||
top: 2em;
|
||||
left: 0; }
|
||||
|
||||
.sg-checkbox:before {
|
||||
display: inline-block;
|
||||
margin-right: 0.4em; }
|
||||
|
||||
/*------------------------------------*\
|
||||
$PATTERN LAB VIEWPORT
|
||||
\*------------------------------------*/
|
||||
/* Viewport */
|
||||
#sg-vp-wrap {
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
top: 2em;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 0; }
|
||||
#sg-vp-wrap.wrap-animate {
|
||||
-webkit-transition: left 0.3s ease-out;
|
||||
-moz-transition: left 0.3s ease-out;
|
||||
-ms-transition: left 0.3s ease-out;
|
||||
-o-transition: left 0.3s ease-out;
|
||||
transition: left 0.3s ease-out; }
|
||||
|
||||
#sg-viewport {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: white; }
|
||||
#sg-viewport.hay-mode {
|
||||
-webkit-transition: all 40s linear;
|
||||
-moz-transition: all 40s linear;
|
||||
-ms-transition: all 40s linear;
|
||||
-o-transition: all 40s linear;
|
||||
transition: all 40s linear; }
|
||||
|
||||
.no-resize #sg-cover, .no-resize #sg-rightpull-container {
|
||||
display: none; }
|
||||
.no-resize #sg-viewport {
|
||||
overflow: hidden !important; }
|
||||
|
||||
#sg-cover {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: none;
|
||||
position: absolute;
|
||||
z-index: 20;
|
||||
cursor: col-resize; }
|
||||
|
||||
#sg-gen-container {
|
||||
height: 100%;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
margin: 0 auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden; }
|
||||
#sg-gen-container.hay-mode {
|
||||
-webkit-transition: all 40s linear;
|
||||
-moz-transition: all 40s linear;
|
||||
-ms-transition: all 40s linear;
|
||||
-o-transition: all 40s linear;
|
||||
transition: all 40s linear; }
|
||||
|
||||
#sg-rightpull-container {
|
||||
width: 14px;
|
||||
float: right;
|
||||
margin: 0;
|
||||
height: 100%;
|
||||
cursor: col-resize; }
|
||||
|
||||
#sg-rightpull {
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #999;
|
||||
-webkit-transition: background 0.2s ease-out;
|
||||
-moz-transition: background 0.2s ease-out;
|
||||
-ms-transition: background 0.2s ease-out;
|
||||
-o-transition: background 0.2s ease-out;
|
||||
transition: background 0.2s ease-out; }
|
||||
#sg-rightpull:hover {
|
||||
background: #666; }
|
||||
#sg-rightpull:active {
|
||||
cursor: col-resize;
|
||||
background: #444; }
|
||||
|
||||
.vp-animate {
|
||||
-webkit-transition: width 0.8s ease-out;
|
||||
-moz-transition: width 0.8s ease-out;
|
||||
-ms-transition: width 0.8s ease-out;
|
||||
-o-transition: width 0.8s ease-out;
|
||||
transition: width 0.8s ease-out; }
|
||||
|
||||
/*------------------------------------*\
|
||||
$PATTERN LAB CONTENT
|
||||
\*------------------------------------*/
|
||||
/* Section Pattern */
|
||||
.sg-pattern {
|
||||
margin-bottom: 2em;
|
||||
position: relative; }
|
||||
|
||||
/* Section Head */
|
||||
.sg-pattern-head {
|
||||
margin: 2em 0;
|
||||
font-family: "HelveticaNeue", "Helvetica", "Arial", sans-serif;
|
||||
font-size: 70%;
|
||||
font-weight: normal;
|
||||
padding: 1em 0;
|
||||
border-bottom: 1px solid gray; }
|
||||
.sg-pattern-head a {
|
||||
display: block;
|
||||
color: gray;
|
||||
text-decoration: none;
|
||||
cursor: pointer; }
|
||||
.sg-pattern-head a:hover {
|
||||
color: #222222; }
|
||||
|
||||
/* Clean View */
|
||||
.sg-clean .sg-main {
|
||||
padding: 0; }
|
||||
|
||||
.sg-colors {
|
||||
overflow: hidden; }
|
||||
.sg-colors li {
|
||||
overflow: hidden;
|
||||
border: 1px solid #dddddd;
|
||||
padding: 0.3em;
|
||||
margin: 0 0.2em 0.2em 0; }
|
||||
@media all and (min-width: 30em) {
|
||||
.sg-colors li {
|
||||
float: left;
|
||||
width: 5em; } }
|
||||
|
||||
.sg-swatch {
|
||||
display: block;
|
||||
height: 1.5em;
|
||||
width: 50%; }
|
||||
@media all and (max-width: 30em) {
|
||||
.sg-swatch {
|
||||
float: left;
|
||||
margin-right: 0.3em; } }
|
||||
@media all and (min-width: 30em) {
|
||||
.sg-swatch {
|
||||
width: 100%;
|
||||
height: 4em;
|
||||
margin-bottom: 0.2em; } }
|
||||
|
||||
.sg-label {
|
||||
line-height: 1; }
|
||||
|
||||
.sg-view-container {
|
||||
-moz-box-sizing: border-box;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
font-family: "HelveticaNeue", "Helvetica", "Arial", sans-serif;
|
||||
line-height: 1.4;
|
||||
font-size: 90%;
|
||||
background: #222222;
|
||||
color: gray;
|
||||
position: fixed;
|
||||
top: auto;
|
||||
padding: 1em;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 2;
|
||||
width: 100%;
|
||||
height: 50%;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden; }
|
||||
.sg-view-container a {
|
||||
color: #999999; }
|
||||
.sg-view-container pre {
|
||||
padding: 0 1em; }
|
||||
.sg-view-container.anim-ready {
|
||||
-webkit-transition: bottom 0.3s ease-out;
|
||||
-moz-transition: bottom 0.3s ease-out;
|
||||
-webkit-transition: bottom 0.3s ease-out;
|
||||
-ms-transition: bottom 0.3s ease-out;
|
||||
-o-transition: bottom 0.3s ease-out;
|
||||
transition: bottom 0.3s ease-out; }
|
||||
|
||||
.sg-view-close {
|
||||
width: 100%;
|
||||
margin-bottom: -10px; }
|
||||
|
||||
.sg-view-close-btn {
|
||||
color: #fff;
|
||||
text-transform: uppercase;
|
||||
text-decoration: none;
|
||||
text-align: right;
|
||||
display: block; }
|
||||
|
||||
.has-annotation {
|
||||
cursor: help !important;
|
||||
box-shadow: 0 0 10px gray; }
|
||||
.has-annotation a, .has-annotation input {
|
||||
cursor: help !important; }
|
||||
.has-annotation:hover {
|
||||
box-shadow: 0 0 10px #222222; }
|
||||
.has-annotation.active {
|
||||
box-shadow: inset 0 0 20px gray; }
|
||||
|
||||
.annotation-tip {
|
||||
display: block;
|
||||
position: absolute;
|
||||
margin-top: -10px !important;
|
||||
margin-left: -10px !important;
|
||||
width: 25px !important;
|
||||
height: 25px !important;
|
||||
border-radius: 13px !important;
|
||||
text-align: center !important;
|
||||
background: #444 !important;
|
||||
color: #fff !important;
|
||||
font-weight: bold !important;
|
||||
font-size: 16px !important;
|
||||
z-index: 100; }
|
||||
|
||||
#sg-comments-container {
|
||||
max-width: 60em;
|
||||
margin: 0 auto; }
|
||||
|
||||
.sg-comment-container {
|
||||
padding-bottom: 2em;
|
||||
margin-bottom: 1em;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.25); }
|
||||
.sg-comment-container p:last-child {
|
||||
margin-bottom: 0; }
|
||||
.sg-comment-container h2 {
|
||||
margin-bottom: 0.25em; }
|
||||
|
||||
.sg-code, .sg-annotations {
|
||||
clear: both;
|
||||
background: #dddddd;
|
||||
color: #222222;
|
||||
padding: 1em 0.5em;
|
||||
margin: 1em 0; }
|
||||
.sg-code a, .sg-annotations a {
|
||||
text-decoration: underline; }
|
||||
|
||||
.sg-code pre {
|
||||
white-space: -moz-pre-line;
|
||||
white-space: -pre-line;
|
||||
white-space: -o-pre-line;
|
||||
word-wrap: break-word;
|
||||
white-space: pre-line;
|
||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||
padding: 0.5em; }
|
||||
|
||||
.sg-code-contains {
|
||||
margin-bottom: 1rem;
|
||||
font-size: 85%;
|
||||
color: gray; }
|
||||
.sg-code-contains code {
|
||||
padding: 0.2em;
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
color: #999999;
|
||||
position: relative;
|
||||
top: -2px; }
|
||||
|
||||
.sg-code-head {
|
||||
color: gray;
|
||||
font-size: 1em; }
|
||||
|
||||
#sg-code-markup {
|
||||
padding-top: 10px; }
|
||||
|
||||
#sg-code-tabs {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0; }
|
||||
|
||||
#sg-code-tabs li {
|
||||
float: left;
|
||||
background-color: #333;
|
||||
font-size: 1.3em;
|
||||
font-weight: bold;
|
||||
padding: 5px 15px;
|
||||
border-top: 2px solid #666;
|
||||
margin-right: 2px;
|
||||
cursor: pointer; }
|
||||
|
||||
.sg-code-title-active {
|
||||
color: #bbb;
|
||||
background-color: #272822 !important; }
|
||||
|
||||
div.clear {
|
||||
clear: both; }
|
||||
|
||||
.sg-code-patternname {
|
||||
color: #aaa; }
|
||||
|
||||
#sg-code-loader {
|
||||
display: none;
|
||||
position: absolute;
|
||||
left: 45%;
|
||||
top: 20%;
|
||||
width: 150px;
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
border-radius: 10px;
|
||||
background-color: #000;
|
||||
z-index: 100; }
|
||||
|
||||
.spinner {
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
background-position: center center;
|
||||
background-repeat: no-repeat;
|
||||
background: url("../images/spinner.gif");
|
||||
border-radius: 50%;
|
||||
opacity: .7; }
|
||||
|
||||
/* Pattern Lab icon fonts */
|
||||
/* Pattern Lab icon fonts */
|
||||
@font-face {
|
||||
font-family: 'icomoon';
|
||||
src: url("../fonts/icomoon.eot?srsv7g");
|
||||
src: url("../fonts/icomoon.eot?#iefixsrsv7g") format("embedded-opentype"), url("../fonts/icomoon.woff?srsv7g") format("woff"), url("../fonts/icomoon.ttf?srsv7g") format("truetype"), url("../fonts/icomoon.svg?srsv7g#icomoon") format("svg");
|
||||
font-weight: normal;
|
||||
font-style: normal; }
|
||||
|
||||
.icon-search, .icon-cog, .icon-minus, .icon-plus, .icon-menu, .icon-radio-checked, .sg-checkbox.active, .icon-radio-unchecked, .sg-checkbox, .icon-file, .icon-link, .icon-keyboard, .icon-qrcode, .icon-eye, .sg-checkbox {
|
||||
font-family: 'icomoon';
|
||||
speak: none;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-variant: normal;
|
||||
text-transform: none;
|
||||
line-height: 1;
|
||||
/* Better Font Rendering =========== */
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale; }
|
||||
|
||||
.icon-search:before {
|
||||
content: "\e600";
|
||||
font-size: 85%; }
|
||||
|
||||
.icon-cog:before {
|
||||
content: "\e601"; }
|
||||
|
||||
.icon-minus:before {
|
||||
content: "\e602"; }
|
||||
|
||||
.icon-plus:before {
|
||||
content: "\e603"; }
|
||||
|
||||
.icon-menu:before {
|
||||
content: "\e604"; }
|
||||
|
||||
.icon-radio-checked:before, .sg-checkbox.active:before, .sg-checkbox.active:before {
|
||||
content: "\e605"; }
|
||||
|
||||
.icon-radio-unchecked:before, .sg-checkbox:before, .sg-checkbox:before {
|
||||
content: "\e606"; }
|
||||
|
||||
.icon-file:before {
|
||||
content: "\e607"; }
|
||||
|
||||
.icon-link:before {
|
||||
content: "\e608"; }
|
||||
|
||||
.icon-keyboard:before {
|
||||
content: "\e609"; }
|
||||
|
||||
.icon-qrcode:before {
|
||||
content: "\e60a"; }
|
||||
|
||||
.icon-eye:before {
|
||||
content: "\e60b"; }
|
||||
|
||||
/******************************************************************/
|
||||
/* End Pattern Lab Interface code */
|
||||
.demo {
|
||||
overflow: hidden;
|
||||
margin-bottom: 1rem; }
|
||||
|
||||
.demo .gi, .demo .demo-block {
|
||||
background: #dddddd;
|
||||
color: gray;
|
||||
text-align: center;
|
||||
margin-bottom: 0.5em;
|
||||
padding: 1em !important; }
|
||||
.demo .gi:nth-of-type(2n), .demo .demo-block:nth-of-type(2n) {
|
||||
color: #dddddd;
|
||||
background: gray; }
|
||||
.demo .gi .gi, .demo .demo-block .gi {
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
color: #dddddd; }
|
||||
.demo .gi .gi:nth-of-type(2n), .demo .demo-block .gi:nth-of-type(2n) {
|
||||
background: rgba(0, 0, 0, 0.3); }
|
||||
|
||||
.demo-animate {
|
||||
background: #dddddd;
|
||||
padding: 1em;
|
||||
margin-bottom: 1em;
|
||||
text-align: center; }
|
||||
|
||||
.animate-move {
|
||||
position: relative; }
|
||||
.animate-move .demo-shape {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 20px;
|
||||
background: gray; }
|
||||
.animate-move:hover > .demo-shape {
|
||||
left: 100%;
|
||||
margin-left: -20px; }
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,282 +0,0 @@
|
||||
/*!
|
||||
* Annotations Support for the Viewer - v0.3
|
||||
*
|
||||
* Copyright (c) 2013 Brad Frost, http://bradfrostweb.com & Dave Olsen, http://dmolsen.com
|
||||
* Licensed under the MIT license
|
||||
*
|
||||
*/
|
||||
|
||||
var annotationsViewer = {
|
||||
|
||||
// set-up default sections
|
||||
commentsActive: false,
|
||||
commentsViewAllActive: false,
|
||||
targetOrigin: (window.location.protocol === "file:") ? "*" : window.location.protocol+"//"+window.location.host,
|
||||
moveToOnInit: 0,
|
||||
|
||||
/**
|
||||
* add the onclick handler to the annotations link in the main nav
|
||||
*/
|
||||
onReady: function() {
|
||||
|
||||
// not sure this is used anymore...
|
||||
$('body').addClass('comments-ready');
|
||||
$('#sg-t-annotations').click(function(e) {
|
||||
|
||||
e.preventDefault();
|
||||
|
||||
// remove the class from the "eye" nav item
|
||||
$('#sg-t-toggle').removeClass('active');
|
||||
|
||||
// turn the annotations section on and off
|
||||
annotationsViewer.toggleComments();
|
||||
|
||||
});
|
||||
|
||||
// initialize the annotations viewer
|
||||
annotationsViewer.commentContainerInit();
|
||||
|
||||
// load the query strings in case code view has to show by default
|
||||
var queryStringVars = urlHandler.getRequestVars();
|
||||
if ((queryStringVars.view !== undefined) && ((queryStringVars.view === "annotations") || (queryStringVars.view === "a"))) {
|
||||
annotationsViewer.openComments();
|
||||
if (queryStringVars.number !== undefined) {
|
||||
annotationsViewer.moveToOnInit = queryStringVars.number;
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* decide on if the annotations panel should be open or closed
|
||||
*/
|
||||
toggleComments: function() {
|
||||
|
||||
if (!annotationsViewer.commentsActive) {
|
||||
annotationsViewer.openComments();
|
||||
} else {
|
||||
annotationsViewer.closeComments();
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* open the annotations panel
|
||||
*/
|
||||
openComments: function() {
|
||||
|
||||
// make sure the code view overlay is off before showing the annotations view
|
||||
$('#sg-t-code').removeClass('active');
|
||||
codeViewer.codeActive = false;
|
||||
var obj = JSON.stringify({ "codeToggle": "off" });
|
||||
document.getElementById('sg-viewport').contentWindow.postMessage(obj,annotationsViewer.targetOrigin);
|
||||
codeViewer.slideCode(999);
|
||||
|
||||
// tell the iframe annotation view has been turned on
|
||||
var obj = JSON.stringify({ "commentToggle": "on" });
|
||||
document.getElementById('sg-viewport').contentWindow.postMessage(obj,annotationsViewer.targetOrigin);
|
||||
|
||||
// note that it's turned on in the viewer
|
||||
annotationsViewer.commentsActive = true;
|
||||
$('#sg-t-annotations').addClass('active');
|
||||
},
|
||||
|
||||
/**
|
||||
* close the annotations panel
|
||||
*/
|
||||
closeComments: function() {
|
||||
annotationsViewer.commentsActive = false;
|
||||
var obj = JSON.stringify({ "commentToggle": "off" });
|
||||
document.getElementById('sg-viewport').contentWindow.postMessage(obj,annotationsViewer.targetOrigin);
|
||||
annotationsViewer.slideComment($('#sg-annotation-container').outerHeight());
|
||||
$('#sg-t-annotations').removeClass('active');
|
||||
},
|
||||
|
||||
/**
|
||||
* add the basic mark-up and events for the annotations container
|
||||
*/
|
||||
commentContainerInit: function() {
|
||||
|
||||
// the bulk of this template is in core/templates/index.mustache
|
||||
if (document.getElementById("sg-annotation-container") === null) {
|
||||
$('<div id="sg-annotation-container" class="sg-view-container"></div>').html($("#annotations-template").html()).appendTo('body').css('bottom',-$(document).outerHeight());
|
||||
setTimeout(function(){ $('#sg-annotation-container').addClass('anim-ready'); },50); //Add animation class once container is positioned out of frame
|
||||
}
|
||||
|
||||
// make sure the close button handles the click
|
||||
$('body').delegate('#sg-annotation-close-btn','click',function() {
|
||||
annotationsViewer.commentsActive = false;
|
||||
$('#sg-t-annotations').removeClass('active');
|
||||
annotationsViewer.slideComment($('#sg-annotation-container').outerHeight());
|
||||
var obj = JSON.stringify({ "commentToggle": "off" });
|
||||
document.getElementById('sg-viewport').contentWindow.postMessage(obj,annotationsViewer.targetOrigin);
|
||||
return false;
|
||||
});
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* slides the panel
|
||||
*/
|
||||
slideComment: function(pos) {
|
||||
$('#sg-annotation-container').css('bottom',-pos);
|
||||
},
|
||||
|
||||
/**
|
||||
* moves to a particular item in the viewer
|
||||
*/
|
||||
moveTo: function(number) {
|
||||
if (document.getElementById("annotation-"+number) !== undefined) {
|
||||
var top = document.getElementById("annotation-"+number).offsetTop;
|
||||
$('#sg-annotation-container').animate({scrollTop: top - 10}, 600);
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* when turning on or switching between patterns with annotations view on make sure we get
|
||||
* the annotations from from the pattern via post message
|
||||
*/
|
||||
updateComments: function(comments) {
|
||||
|
||||
var commentsContainer = document.getElementById("sg-comments-container");
|
||||
|
||||
// clear out the comments container
|
||||
if (commentsContainer.innerHTML !== "") {
|
||||
commentsContainer.innerHTML = "";
|
||||
}
|
||||
|
||||
// see how many comments this pattern might have. if more than zero write them out. if not alert the user to the fact their aren't any
|
||||
var count = Object.keys(comments).length;
|
||||
if (count > 0) {
|
||||
|
||||
for (i = 1; i <= count; i++) {
|
||||
|
||||
var displayNum = comments[i].number;
|
||||
|
||||
var span = document.createElement("span");
|
||||
span.id = "annotation-state-" + displayNum;
|
||||
span.style.fontSize = "0.8em";
|
||||
span.style.color = "#666";
|
||||
if (comments[i].state === false) {
|
||||
span.innerHTML = " hidden";
|
||||
}
|
||||
|
||||
var h2 = document.createElement("h2");
|
||||
h2.innerHTML = displayNum + ". " + comments[i].title;
|
||||
h2.appendChild(span);
|
||||
|
||||
var div = document.createElement("div");
|
||||
div.innerHTML = comments[i].comment;
|
||||
|
||||
var commentDiv = document.createElement("div");
|
||||
commentDiv.classList.add("sg-comment-container");
|
||||
commentDiv.id = "annotation-" + displayNum;
|
||||
commentDiv.appendChild(h2);
|
||||
commentDiv.appendChild(div);
|
||||
|
||||
commentsContainer.appendChild(commentDiv);
|
||||
|
||||
}
|
||||
|
||||
} else {
|
||||
|
||||
var h2 = document.createElement("h2");
|
||||
h2.innerHTML = "No Annotations";
|
||||
|
||||
var div = document.createElement("div");
|
||||
div.innerHTML = "There are no annotations for this pattern.";
|
||||
|
||||
var commentDiv = document.createElement("div");
|
||||
commentDiv.classList.add("sg-comment-container");
|
||||
commentDiv.appendChild(h2);
|
||||
commentDiv.appendChild(div);
|
||||
|
||||
commentsContainer.appendChild(commentDiv);
|
||||
|
||||
}
|
||||
|
||||
// slide the comment section into view
|
||||
annotationsViewer.slideComment(0);
|
||||
|
||||
if (annotationsViewer.moveToOnInit != "0") {
|
||||
annotationsViewer.moveTo(annotationsViewer.moveToOnInit);
|
||||
annotationsViewer.moveToOnInit = "0";
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* toggle the comment pop-up based on a user clicking on the pattern
|
||||
* based on the great MDN docs at https://developer.mozilla.org/en-US/docs/Web/API/window.postMessage
|
||||
* @param {Object} event info
|
||||
*/
|
||||
receiveIframeMessage: function(event) {
|
||||
|
||||
var data = (typeof event.data !== "string") ? event.data : JSON.parse(event.data);
|
||||
|
||||
// does the origin sending the message match the current host? if not dev/null the request
|
||||
if ((window.location.protocol !== "file:") && (event.origin !== window.location.protocol+"//"+window.location.host)) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (data.commentOverlay !== undefined) {
|
||||
if (data.commentOverlay === "on") {
|
||||
annotationsViewer.updateComments(data.comments);
|
||||
} else {
|
||||
annotationsViewer.slideComment($('#sg-annotation-container').outerHeight());
|
||||
}
|
||||
} else if (data.annotationState !== undefined) {
|
||||
document.getElementById("annotation-state-"+data.displayNumber).innerHTML = (data.annotationState == true) ? "" : " hidden";
|
||||
} else if (data.displaynumber !== undefined) {
|
||||
annotationsViewer.moveTo(data.displaynumber);
|
||||
} else if (data.keyPress !== undefined) {
|
||||
if (data.keyPress == 'ctrl+shift+a') {
|
||||
annotationsViewer.toggleComments();
|
||||
return false;
|
||||
} else if (data.keyPress == 'esc') {
|
||||
if (annotationsViewer.commentsActive) {
|
||||
annotationsViewer.closeComments();
|
||||
return false;
|
||||
}
|
||||
}
|
||||
} else if (data.patternpartial !== undefined) {
|
||||
if (annotationsViewer.commentsViewAllActive && (data.patternpartial.indexOf("viewall-") != -1)) {
|
||||
var obj = JSON.stringify({ "commentToggle": "on" });
|
||||
document.getElementById('sg-viewport').contentWindow.postMessage(obj,annotationsViewer.targetOrigin);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
$(document).ready(function() { annotationsViewer.onReady(); });
|
||||
window.addEventListener("message", annotationsViewer.receiveIframeMessage, false);
|
||||
|
||||
// make sure if a new pattern or view-all is loaded that comments are turned on as appropriate
|
||||
$('#sg-viewport').load(function() {
|
||||
if (annotationsViewer.commentsActive) {
|
||||
var obj = JSON.stringify({ "commentToggle": "on" });
|
||||
document.getElementById('sg-viewport').contentWindow.postMessage(obj,annotationsViewer.targetOrigin);
|
||||
}
|
||||
});
|
||||
|
||||
// no idea why this has to be outside. there's something funky going on with the JS pattern
|
||||
$('#sg-view li a').click(function() {
|
||||
$(this).parent().parent().removeClass('active');
|
||||
$(this).parent().parent().parent().parent().removeClass('active');
|
||||
});
|
||||
|
||||
// toggle the annotations panel
|
||||
jwerty.key('ctrl+shift+a', function (e) {
|
||||
annotationsViewer.toggleComments();
|
||||
return false;
|
||||
});
|
||||
|
||||
// close the annotations panel if using escape
|
||||
jwerty.key('esc', function (e) {
|
||||
if (annotationsViewer.commentsActive) {
|
||||
annotationsViewer.closeComments();
|
||||
return false;
|
||||
}
|
||||
});
|
||||
@ -1,435 +0,0 @@
|
||||
/*!
|
||||
* Code View Support for the Viewer - v0.1
|
||||
*
|
||||
* Copyright (c) 2013 Brad Frost, http://bradfrostweb.com & Dave Olsen, http://dmolsen.com
|
||||
* Licensed under the MIT license
|
||||
*
|
||||
*/
|
||||
|
||||
var codeViewer = {
|
||||
|
||||
// set up some defaults
|
||||
codeActive: false,
|
||||
tabActive: "e",
|
||||
encoded: "",
|
||||
mustache: "",
|
||||
css: "",
|
||||
ids: { "e": "#sg-code-title-html", "m": "#sg-code-title-mustache", "c": "#sg-code-title-css" },
|
||||
targetOrigin: (window.location.protocol === "file:") ? "*" : window.location.protocol+"//"+window.location.host,
|
||||
copyOnInit: false,
|
||||
|
||||
/**
|
||||
* add the onclick handler to the code link in the main nav
|
||||
*/
|
||||
onReady: function() {
|
||||
|
||||
// not sure this is needed anymore...
|
||||
$('body').addClass('code-ready');
|
||||
|
||||
// add the onclick handler
|
||||
$('#sg-t-code').click(function(e) {
|
||||
|
||||
e.preventDefault();
|
||||
|
||||
// remove the class from the "eye" nav item
|
||||
$('#sg-t-toggle').removeClass('active');
|
||||
|
||||
// if the code link in the main nav is active close the panel. otherwise open
|
||||
if ($(this).hasClass('active')) {
|
||||
codeViewer.closeCode();
|
||||
} else {
|
||||
codeViewer.openCode();
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
// initialize the code viewer
|
||||
codeViewer.codeContainerInit();
|
||||
|
||||
// load the query strings in case code view has to show by default
|
||||
var queryStringVars = urlHandler.getRequestVars();
|
||||
if ((queryStringVars.view !== undefined) && ((queryStringVars.view === "code") || (queryStringVars.view === "c"))) {
|
||||
codeViewer.copyOnInit = ((queryStringVars.copy !== undefined) && (queryStringVars.copy === "true")) ? true : false;
|
||||
codeViewer.openCode();
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* decide on if the code panel should be open or closed
|
||||
*/
|
||||
toggleCode: function() {
|
||||
|
||||
if (!codeViewer.codeActive) {
|
||||
codeViewer.openCode();
|
||||
} else {
|
||||
codeViewer.closeCode();
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* after clicking the code view link open the panel
|
||||
*/
|
||||
openCode: function() {
|
||||
|
||||
// make sure the annotations overlay is off before showing code view
|
||||
$('#sg-t-annotations').removeClass('active');
|
||||
annotationsViewer.commentsActive = false;
|
||||
var obj = JSON.stringify({ "commentToggle": "off" });
|
||||
document.getElementById('sg-viewport').contentWindow.postMessage(obj,codeViewer.targetOrigin);
|
||||
annotationsViewer.slideComment(999);
|
||||
|
||||
// tell the iframe code view has been turned on
|
||||
var obj = JSON.stringify({ "codeToggle": "on" });
|
||||
document.getElementById('sg-viewport').contentWindow.postMessage(obj,codeViewer.targetOrigin);
|
||||
|
||||
// note it's turned on in the viewer
|
||||
codeViewer.codeActive = true;
|
||||
$('#sg-t-code').addClass('active');
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* after clicking the code view link close the panel
|
||||
*/
|
||||
closeCode: function() {
|
||||
var obj = JSON.stringify({ "codeToggle": "off" });
|
||||
document.getElementById('sg-viewport').contentWindow.postMessage(obj,codeViewer.targetOrigin);
|
||||
codeViewer.codeActive = false;
|
||||
codeViewer.slideCode($('#sg-code-container').outerHeight());
|
||||
$('#sg-t-code').removeClass('active');
|
||||
},
|
||||
|
||||
/**
|
||||
* add the basic mark-up and events for the code container
|
||||
*/
|
||||
codeContainerInit: function() {
|
||||
|
||||
// the bulk of this template is in core/templates/index.mustache
|
||||
if (document.getElementById("sg-code-container") === null) {
|
||||
$('<div id="sg-code-container" class="sg-view-container"></div>').html($("#code-template").html()).appendTo('body').css('bottom',-$(document).outerHeight());
|
||||
setTimeout(function(){ $('#sg-code-container').addClass('anim-ready'); },50); //Add animation class once container is positioned out of frame
|
||||
}
|
||||
|
||||
// make sure the close button handles the click
|
||||
$('body').delegate('#sg-code-close-btn','click',function() {
|
||||
codeViewer.closeCode();
|
||||
return false;
|
||||
});
|
||||
|
||||
// make sure the click events are handled on the HTML tab
|
||||
$(codeViewer.ids["e"]).click(function() {
|
||||
codeViewer.swapCode("e");
|
||||
});
|
||||
|
||||
// make sure the click events are handled on the Mustache tab
|
||||
$(codeViewer.ids["m"]).click(function() {
|
||||
codeViewer.swapCode("m");
|
||||
});
|
||||
|
||||
// make sure the click events are handled on the CSS tab
|
||||
$(codeViewer.ids["c"]).click(function() {
|
||||
codeViewer.swapCode("c");
|
||||
});
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* depending on what tab is clicked this swaps out the code container. makes sure prism highlight is added.
|
||||
*/
|
||||
swapCode: function(type) {
|
||||
|
||||
codeViewer.clearSelection();
|
||||
var fill = "";
|
||||
var className = (type == "c") ? "css" : "markup";
|
||||
$("#sg-code-fill").removeClass().addClass("language-"+className);
|
||||
if (type == "m") {
|
||||
fill = codeViewer.mustache;
|
||||
} else if (type == "e") {
|
||||
fill = codeViewer.encoded;
|
||||
} else if (type == "c") {
|
||||
fill = codeViewer.css;
|
||||
}
|
||||
$("#sg-code-fill").html(fill).text();
|
||||
codeViewer.tabActive = type;
|
||||
Prism.highlightElement(document.getElementById("sg-code-fill"));
|
||||
$('.sg-code-title-active').removeClass('sg-code-title-active');
|
||||
$(codeViewer.ids[type]).toggleClass("sg-code-title-active");
|
||||
},
|
||||
|
||||
/**
|
||||
* select the code where using cmd+a/ctrl+a
|
||||
*/
|
||||
selectCode: function() {
|
||||
if (codeViewer.codeActive) {
|
||||
selection = window.getSelection();
|
||||
range = document.createRange();
|
||||
range.selectNodeContents(document.getElementById("sg-code-fill"));
|
||||
selection.removeAllRanges();
|
||||
selection.addRange(range);
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* clear any selection of code when swapping tabs or opening a new pattern
|
||||
*/
|
||||
clearSelection: function() {
|
||||
if (codeViewer.codeActive) {
|
||||
if (window.getSelection().empty) {
|
||||
window.getSelection().empty();
|
||||
} else if (window.getSelection().removeAllRanges) {
|
||||
window.getSelection().removeAllRanges();
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* slides the panel
|
||||
*/
|
||||
slideCode: function(pos) {
|
||||
$('#sg-code-container').css('bottom',-pos);
|
||||
},
|
||||
|
||||
/**
|
||||
* once the AJAX request for the encoded mark-up is finished this runs.
|
||||
* if the encoded tab is the current active tab it adds the content to the default code container
|
||||
*/
|
||||
saveEncoded: function() {
|
||||
codeViewer.encoded = this.responseText;
|
||||
if (codeViewer.tabActive == "e") {
|
||||
codeViewer.activateDefaultTab("e",this.responseText);
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* once the AJAX request for the mustache mark-up is finished this runs.
|
||||
* if the mustache tab is the current active tab it adds the content to the default code container
|
||||
*/
|
||||
saveMustache: function() {
|
||||
codeViewer.mustache = this.responseText;
|
||||
if (codeViewer.tabActive == "m") {
|
||||
codeViewer.activateDefaultTab("m",this.responseText);
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* once the AJAX request for the css mark-up is finished this runs. if this function is running then css has been enabled
|
||||
* if the css tab is the current active tab it adds the content to the default code container
|
||||
*/
|
||||
saveCSS: function() {
|
||||
$('#sg-code-title-css').css("display","block");
|
||||
codeViewer.css = this.responseText;
|
||||
if (codeViewer.tabActive == "c") {
|
||||
codeViewer.activateDefaultTab("c",this.responseText);
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* when loading the code view make sure the active tab is highlighted and filled in appropriately
|
||||
*/
|
||||
activateDefaultTab: function(type,code) {
|
||||
var typeName = "";
|
||||
var className = (type == "c") ? "css" : "markup";
|
||||
if (type == "m") {
|
||||
typeName = "mustache";
|
||||
} else if (type == "e") {
|
||||
typeName = "html";
|
||||
} else if (type == "c") {
|
||||
typeName = "css";
|
||||
}
|
||||
$('.sg-code-title-active').removeClass('sg-code-title-active');
|
||||
$('#sg-code-title-'+typeName).addClass('sg-code-title-active');
|
||||
$("#sg-code-fill").removeClass().addClass("language-"+className);
|
||||
$("#sg-code-fill").html(code).text();
|
||||
Prism.highlightElement(document.getElementById("sg-code-fill"));
|
||||
if (codeViewer.copyOnInit) {
|
||||
codeViewer.selectCode();
|
||||
codeViewer.copyOnInit = false;
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* when turning on or switching between patterns with code view on make sure we get
|
||||
* the code from from the pattern via post message
|
||||
*/
|
||||
updateCode: function(lineage,lineageR,patternPartial,patternState,cssEnabled) {
|
||||
|
||||
// clear any selections that might have been made
|
||||
codeViewer.clearSelection();
|
||||
|
||||
// draw lineage
|
||||
if (lineage.length !== 0) {
|
||||
var lineageList = "";
|
||||
$("#sg-code-lineage").css("display","block");
|
||||
for (var i = 0; i < lineage.length; i++) {
|
||||
lineageList += (i === 0) ? "" : ", ";
|
||||
var cssClass = (lineage[i].lineageState != undefined) ? "sg-pattern-state "+lineage[i].lineageState : "";
|
||||
lineageList += "<a href='"+lineage[i].lineagePath+"' class='"+cssClass+"' data-patternPartial='"+lineage[i].lineagePattern+"'>"+lineage[i].lineagePattern+"</a>";
|
||||
}
|
||||
$("#sg-code-lineage-fill").html(lineageList);
|
||||
} else {
|
||||
$("#sg-code-lineage").css("display","none");
|
||||
}
|
||||
|
||||
// draw reverse lineage
|
||||
if (lineageR.length !== 0) {
|
||||
var lineageRList = "";
|
||||
$("#sg-code-lineager").css("display","block");
|
||||
for (var i = 0; i < lineageR.length; i++) {
|
||||
lineageRList += (i === 0) ? "" : ", ";
|
||||
var cssClass = (lineageR[i].lineageState != undefined) ? "sg-pattern-state "+lineageR[i].lineageState : "";
|
||||
lineageRList += "<a href='"+lineageR[i].lineagePath+"' class='"+cssClass+"' data-patternPartial='"+lineageR[i].lineagePattern+"'>"+lineageR[i].lineagePattern+"</a>";
|
||||
}
|
||||
$("#sg-code-lineager-fill").html(lineageRList);
|
||||
} else {
|
||||
$("#sg-code-lineager").css("display","none");
|
||||
}
|
||||
|
||||
// when clicking on a lineage item change the iframe source
|
||||
$('#sg-code-lineage-fill a, #sg-code-lineager-fill a').on("click", function(e){
|
||||
e.preventDefault();
|
||||
$("#sg-code-loader").css("display","block");
|
||||
var obj = JSON.stringify({ "path": urlHandler.getFileName($(this).attr("data-patternpartial")) });
|
||||
document.getElementById("sg-viewport").contentWindow.postMessage(obj,codeViewer.targetOrigin);
|
||||
});
|
||||
|
||||
// show pattern state
|
||||
if (patternState != "") {
|
||||
$("#sg-code-patternstate").css("display","block");
|
||||
var patternStateItem = "<span class=\"sg-pattern-state "+patternState+"\">"+patternState+"</span>";
|
||||
$("#sg-code-patternstate-fill").html(patternStateItem);
|
||||
} else {
|
||||
$("#sg-code-patternstate").css("display","none");
|
||||
}
|
||||
|
||||
// fill in the name of the pattern
|
||||
$('#sg-code-lineage-patternname, #sg-code-lineager-patternname, #sg-code-patternstate-patternname').html(patternPartial);
|
||||
|
||||
// get the file name of the pattern so we can get the various editions of the code that can show in code view
|
||||
var fileName = urlHandler.getFileName(patternPartial);
|
||||
|
||||
// request the encoded markup version of the pattern
|
||||
var e = new XMLHttpRequest();
|
||||
e.onload = this.saveEncoded;
|
||||
e.open("GET", fileName.replace(/\.html/,".escaped.html") + "?" + (new Date()).getTime(), true);
|
||||
e.send();
|
||||
|
||||
// request the mustache markup version of the pattern
|
||||
var m = new XMLHttpRequest();
|
||||
m.onload = this.saveMustache;
|
||||
m.open("GET", fileName.replace(/\.html/,".mustache") + "?" + (new Date()).getTime(), true);
|
||||
m.send();
|
||||
|
||||
// if css is enabled request the css for the pattern
|
||||
if (cssEnabled) {
|
||||
var c = new XMLHttpRequest();
|
||||
c.onload = this.saveCSS;
|
||||
c.open("GET", fileName.replace(/\.html/,".css") + "?" + (new Date()).getTime(), true);
|
||||
c.send();
|
||||
}
|
||||
|
||||
// move the code into view
|
||||
codeViewer.slideCode(0);
|
||||
|
||||
$("#sg-code-loader").css("display","none");
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* toggle the comment pop-up based on a user clicking on the pattern
|
||||
* based on the great MDN docs at https://developer.mozilla.org/en-US/docs/Web/API/window.postMessage
|
||||
* @param {Object} event info
|
||||
*/
|
||||
receiveIframeMessage: function(event) {
|
||||
|
||||
var data = (typeof event.data !== "string") ? event.data : JSON.parse(event.data);
|
||||
|
||||
// does the origin sending the message match the current host? if not dev/null the request
|
||||
if ((window.location.protocol !== "file:") && (event.origin !== window.location.protocol+"//"+window.location.host)) {
|
||||
return;
|
||||
}
|
||||
|
||||
// switch based on stuff related to the postmessage
|
||||
if (data.codeOverlay !== undefined) {
|
||||
if (data.codeOverlay === "on") {
|
||||
codeViewer.updateCode(data.lineage,data.lineageR,data.patternPartial,data.patternState,data.cssEnabled);
|
||||
} else {
|
||||
codeViewer.slideCode($('#sg-code-container').outerHeight());
|
||||
}
|
||||
} else if (data.keyPress !== undefined) {
|
||||
if (data.keyPress == 'ctrl+shift+c') {
|
||||
codeViewer.toggleCode();
|
||||
return false;
|
||||
} else if (data.keyPress == 'cmd+a') {
|
||||
codeViewer.selectCode();
|
||||
return false;
|
||||
} else if (data.keyPress == 'ctrl+shift+u') {
|
||||
if (codeViewer.codeActive) {
|
||||
codeViewer.swapCode("m");
|
||||
return false;
|
||||
}
|
||||
} else if (data.keyPress == 'ctrl+shift+y') {
|
||||
if (codeViewer.codeActive) {
|
||||
codeViewer.swapCode("e");
|
||||
return false;
|
||||
}
|
||||
} else if (data.keyPress == 'esc') {
|
||||
if (codeViewer.codeActive) {
|
||||
codeViewer.closeCode();
|
||||
return false;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
// when the document is ready make the codeViewer ready
|
||||
$(document).ready(function() { codeViewer.onReady(); });
|
||||
window.addEventListener("message", codeViewer.receiveIframeMessage, false);
|
||||
|
||||
// make sure if a new pattern or view-all is loaded that comments are turned on as appropriate
|
||||
$('#sg-viewport').load(function() {
|
||||
if (codeViewer.codeActive) {
|
||||
var obj = JSON.stringify({ "codeToggle": "on" });
|
||||
document.getElementById('sg-viewport').contentWindow.postMessage(obj,codeViewer.targetOrigin);
|
||||
}
|
||||
});
|
||||
|
||||
// toggle the code panel
|
||||
jwerty.key('ctrl+shift+c', function (e) {
|
||||
codeViewer.toggleCode();
|
||||
return false;
|
||||
});
|
||||
|
||||
// when the code panel is open hijack cmd+a so that it only selects the code view
|
||||
jwerty.key('cmd+a/ctrl+a', function (e) {
|
||||
codeViewer.selectCode();
|
||||
return false;
|
||||
});
|
||||
|
||||
// open the mustache panel
|
||||
jwerty.key('ctrl+shift+u', function (e) {
|
||||
if (codeViewer.codeActive) {
|
||||
codeViewer.swapCode("m");
|
||||
return false;
|
||||
}
|
||||
});
|
||||
|
||||
// open the html panel
|
||||
jwerty.key('ctrl+shift+y', function (e) {
|
||||
if (codeViewer.codeActive) {
|
||||
codeViewer.swapCode("e");
|
||||
return false;
|
||||
}
|
||||
});
|
||||
|
||||
// close the code panel if using escape
|
||||
jwerty.key('esc', function (e) {
|
||||
if (codeViewer.codeActive) {
|
||||
codeViewer.closeCode();
|
||||
return false;
|
||||
}
|
||||
});
|
||||
@ -1,612 +0,0 @@
|
||||
(function (w) {
|
||||
|
||||
var sw = document.body.clientWidth, //Viewport Width
|
||||
sh = document.body.clientHeight, //Viewport Height
|
||||
minViewportWidth = 240, //Minimum Size for Viewport
|
||||
maxViewportWidth = 2600, //Maxiumum Size for Viewport
|
||||
viewportResizeHandleWidth = 14, //Width of the viewport drag-to-resize handle
|
||||
$sgViewport = $('#sg-viewport'), //Viewport element
|
||||
$sizePx = $('.sg-size-px'), //Px size input element in toolbar
|
||||
$sizeEms = $('.sg-size-em'), //Em size input element in toolbar
|
||||
$bodySize = parseInt($('body').css('font-size')), //Body size of the document
|
||||
discoID = false,
|
||||
discoMode = false,
|
||||
hayMode = false;
|
||||
|
||||
//Update dimensions on resize
|
||||
$(w).resize(function() {
|
||||
sw = document.body.clientWidth;
|
||||
sh = document.body.clientHeight;
|
||||
});
|
||||
|
||||
/* Accordion dropdown */
|
||||
$('.sg-acc-handle').on("click", function(e){
|
||||
e.preventDefault();
|
||||
|
||||
var $this = $(this),
|
||||
$panel = $this.next('.sg-acc-panel'),
|
||||
subnav = $this.parent().parent().hasClass('sg-acc-panel');
|
||||
|
||||
//Close other panels if link isn't a subnavigation item
|
||||
if (!subnav) {
|
||||
$('.sg-acc-handle').not($this).removeClass('active');
|
||||
$('.sg-acc-panel').not($panel).removeClass('active');
|
||||
}
|
||||
|
||||
//Activate selected panel
|
||||
$this.toggleClass('active');
|
||||
$panel.toggleClass('active');
|
||||
});
|
||||
|
||||
$('.sg-nav-toggle').on("click", function(e){
|
||||
e.preventDefault();
|
||||
$('.sg-nav-container').toggleClass('active');
|
||||
});
|
||||
|
||||
//"View (containing clean, code, raw, etc options) Trigger
|
||||
$('#sg-t-toggle').on("click", function(e){
|
||||
e.preventDefault();
|
||||
$(this).parents('ul').toggleClass('active');
|
||||
});
|
||||
|
||||
//Size Trigger
|
||||
$('#sg-size-toggle').on("click", function(e){
|
||||
e.preventDefault();
|
||||
$(this).parents('ul').toggleClass('active');
|
||||
});
|
||||
|
||||
//Phase View Events
|
||||
$('.sg-size[data-size]').on("click", function(e){
|
||||
e.preventDefault();
|
||||
killDisco();
|
||||
killHay();
|
||||
|
||||
var val = $(this).attr('data-size');
|
||||
|
||||
if (val.indexOf('px') > -1) {
|
||||
$bodySize = 1;
|
||||
}
|
||||
|
||||
val = val.replace(/[^\d.-]/g,'');
|
||||
sizeiframe(Math.floor(val*$bodySize));
|
||||
});
|
||||
|
||||
//Size View Events
|
||||
|
||||
// handle small button
|
||||
function goSmall() {
|
||||
killDisco();
|
||||
killHay();
|
||||
sizeiframe(getRandom(minViewportWidth,500));
|
||||
}
|
||||
|
||||
$('#sg-size-s').on("click", function(e){
|
||||
e.preventDefault();
|
||||
goSmall();
|
||||
});
|
||||
|
||||
jwerty.key('ctrl+shift+s', function(e) {
|
||||
goSmall();
|
||||
return false;
|
||||
});
|
||||
|
||||
// handle medium button
|
||||
function goMedium() {
|
||||
killDisco();
|
||||
killHay();
|
||||
sizeiframe(getRandom(500,800));
|
||||
}
|
||||
|
||||
$('#sg-size-m').on("click", function(e){
|
||||
e.preventDefault();
|
||||
goMedium();
|
||||
});
|
||||
|
||||
jwerty.key('ctrl+shift+m', function(e) {
|
||||
goLarge();
|
||||
return false;
|
||||
});
|
||||
|
||||
// handle large button
|
||||
function goLarge() {
|
||||
killDisco();
|
||||
killHay();
|
||||
sizeiframe(getRandom(800,1200));
|
||||
}
|
||||
|
||||
$('#sg-size-l').on("click", function(e){
|
||||
e.preventDefault();
|
||||
goLarge();
|
||||
});
|
||||
|
||||
jwerty.key('ctrl+shift+l', function(e) {
|
||||
goLarge();
|
||||
return false;
|
||||
});
|
||||
|
||||
//Click Full Width Button
|
||||
$('#sg-size-full').on("click", function(e){ //Resets
|
||||
e.preventDefault();
|
||||
killDisco();
|
||||
killHay();
|
||||
sizeiframe(sw);
|
||||
});
|
||||
|
||||
//Click Random Size Button
|
||||
$('#sg-size-random').on("click", function(e){
|
||||
e.preventDefault();
|
||||
killDisco();
|
||||
killHay();
|
||||
sizeiframe(getRandom(minViewportWidth,sw));
|
||||
});
|
||||
|
||||
//Click for Disco Mode, which resizes the viewport randomly
|
||||
$('#sg-size-disco').on("click", function(e){
|
||||
e.preventDefault();
|
||||
killHay();
|
||||
|
||||
if (discoMode) {
|
||||
killDisco();
|
||||
|
||||
} else {
|
||||
startDisco();
|
||||
}
|
||||
});
|
||||
|
||||
/* Disco Mode */
|
||||
function disco() {
|
||||
sizeiframe(getRandom(minViewportWidth,sw));
|
||||
}
|
||||
|
||||
function killDisco() {
|
||||
discoMode = false;
|
||||
clearInterval(discoID);
|
||||
discoID = false;
|
||||
}
|
||||
|
||||
function startDisco() {
|
||||
discoMode = true;
|
||||
discoID = setInterval(disco, 800);
|
||||
}
|
||||
|
||||
jwerty.key('ctrl+shift+d', function(e) {
|
||||
if (!discoMode) {
|
||||
startDisco();
|
||||
} else {
|
||||
killDisco();
|
||||
}
|
||||
return false;
|
||||
});
|
||||
|
||||
//Stephen Hay Mode - "Start with the small screen first, then expand until it looks like shit. Time for a breakpoint!"
|
||||
$('#sg-size-hay').on("click", function(e){
|
||||
e.preventDefault();
|
||||
killDisco();
|
||||
if (hayMode) {
|
||||
killHay();
|
||||
} else {
|
||||
startHay();
|
||||
}
|
||||
});
|
||||
|
||||
//Stop Hay! Mode
|
||||
function killHay() {
|
||||
var currentWidth = $sgViewport.width();
|
||||
hayMode = false;
|
||||
$sgViewport.removeClass('hay-mode');
|
||||
$('#sg-gen-container').removeClass('hay-mode');
|
||||
sizeiframe(Math.floor(currentWidth));
|
||||
}
|
||||
|
||||
// start Hay! mode
|
||||
function startHay() {
|
||||
hayMode = true;
|
||||
$('#sg-gen-container').removeClass("vp-animate").width(minViewportWidth+viewportResizeHandleWidth);
|
||||
$sgViewport.removeClass("vp-animate").width(minViewportWidth);
|
||||
|
||||
var timeoutID = window.setTimeout(function(){
|
||||
$('#sg-gen-container').addClass('hay-mode').width(maxViewportWidth+viewportResizeHandleWidth);
|
||||
$sgViewport.addClass('hay-mode').width(maxViewportWidth);
|
||||
|
||||
setInterval(function(){ var vpSize = $sgViewport.width(); updateSizeReading(vpSize); },100);
|
||||
}, 200);
|
||||
}
|
||||
|
||||
// start hay from a keyboard shortcut
|
||||
jwerty.key('ctrl+shift+h', function(e) {
|
||||
if (!hayMode) {
|
||||
startHay();
|
||||
} else {
|
||||
killHay();
|
||||
}
|
||||
});
|
||||
|
||||
//Pixel input
|
||||
$sizePx.on('keydown', function(e){
|
||||
var val = Math.floor($(this).val());
|
||||
|
||||
if(e.keyCode === 38) { //If the up arrow key is hit
|
||||
val++;
|
||||
sizeiframe(val,false);
|
||||
} else if(e.keyCode === 40) { //If the down arrow key is hit
|
||||
val--;
|
||||
sizeiframe(val,false);
|
||||
} else if(e.keyCode === 13) { //If the Enter key is hit
|
||||
e.preventDefault();
|
||||
sizeiframe(val); //Size Iframe to value of text box
|
||||
$(this).blur();
|
||||
}
|
||||
});
|
||||
|
||||
$sizePx.on('keyup', function(){
|
||||
var val = Math.floor($(this).val());
|
||||
updateSizeReading(val,'px','updateEmInput');
|
||||
});
|
||||
|
||||
//Em input
|
||||
$sizeEms.on('keydown', function(e){
|
||||
var val = parseFloat($(this).val());
|
||||
|
||||
if(e.keyCode === 38) { //If the up arrow key is hit
|
||||
val++;
|
||||
sizeiframe(Math.floor(val*$bodySize),false);
|
||||
} else if(e.keyCode === 40) { //If the down arrow key is hit
|
||||
val--;
|
||||
sizeiframe(Math.floor(val*$bodySize),false);
|
||||
} else if(e.keyCode === 13) { //If the Enter key is hit
|
||||
e.preventDefault();
|
||||
sizeiframe(Math.floor(val*$bodySize)); //Size Iframe to value of text box
|
||||
}
|
||||
});
|
||||
|
||||
$sizeEms.on('keyup', function(){
|
||||
var val = parseFloat($(this).val());
|
||||
updateSizeReading(val,'em','updatePxInput');
|
||||
});
|
||||
|
||||
// set 0 to 320px as a default
|
||||
jwerty.key('ctrl+shift+0', function(e) {
|
||||
e.preventDefault();
|
||||
sizeiframe(320,true);
|
||||
return false;
|
||||
});
|
||||
|
||||
// handle the MQ click
|
||||
var mqs = [];
|
||||
$('#sg-mq a').each(function(i) {
|
||||
|
||||
mqs.push($(this).html());
|
||||
|
||||
// bind the click
|
||||
$(this).on("click", function(i,k) {
|
||||
return function(e) {
|
||||
e.preventDefault();
|
||||
var val = $(k).html();
|
||||
var type = (val.indexOf("px") !== -1) ? "px" : "em";
|
||||
val = val.replace(type,"");
|
||||
var width = (type === "px") ? val*1 : val*$bodySize;
|
||||
sizeiframe(width,true);
|
||||
}
|
||||
}(i,this));
|
||||
|
||||
// bind the keyboard shortcut. can't use cmd on a mac because 3 & 4 are for screenshots
|
||||
jwerty.key('ctrl+shift+'+(i+1), function (k) {
|
||||
return function(e) {
|
||||
var val = $(k).html();
|
||||
var type = (val.indexOf("px") !== -1) ? "px" : "em";
|
||||
val = val.replace(type,"");
|
||||
var width = (type === "px") ? val*1 : val*$bodySize;
|
||||
sizeiframe(width,true);
|
||||
return false;
|
||||
}
|
||||
}(this));
|
||||
|
||||
});
|
||||
|
||||
//Resize the viewport
|
||||
//'size' is the target size of the viewport
|
||||
//'animate' is a boolean for switching the CSS animation on or off. 'animate' is true by default, but can be set to false for things like nudging and dragging
|
||||
function sizeiframe(size,animate) {
|
||||
var theSize;
|
||||
|
||||
if(size>maxViewportWidth) { //If the entered size is larger than the max allowed viewport size, cap value at max vp size
|
||||
theSize = maxViewportWidth;
|
||||
} else if(size<minViewportWidth) { //If the entered size is less than the minimum allowed viewport size, cap value at min vp size
|
||||
theSize = minViewportWidth;
|
||||
} else {
|
||||
theSize = size;
|
||||
}
|
||||
|
||||
//Conditionally remove CSS animation class from viewport
|
||||
if(animate===false) {
|
||||
$('#sg-gen-container,#sg-viewport').removeClass("vp-animate"); //If aninate is set to false, remove animate class from viewport
|
||||
} else {
|
||||
$('#sg-gen-container,#sg-viewport').addClass("vp-animate");
|
||||
}
|
||||
|
||||
$('#sg-gen-container').width(theSize+viewportResizeHandleWidth); //Resize viewport wrapper to desired size + size of drag resize handler
|
||||
$sgViewport.width(theSize); //Resize viewport to desired size
|
||||
|
||||
var targetOrigin = (window.location.protocol === "file:") ? "*" : window.location.protocol+"//"+window.location.host;
|
||||
var obj = JSON.stringify({ "resize": "true" });
|
||||
document.getElementById('sg-viewport').contentWindow.postMessage(obj,targetOrigin);
|
||||
|
||||
updateSizeReading(theSize); //Update values in toolbar
|
||||
saveSize(theSize); //Save current viewport to cookie
|
||||
}
|
||||
|
||||
$("#sg-gen-container").on('transitionend webkitTransitionEnd', function(e){
|
||||
var targetOrigin = (window.location.protocol === "file:") ? "*" : window.location.protocol+"//"+window.location.host;
|
||||
var obj = JSON.stringify({ "resize": "true" });
|
||||
document.getElementById('sg-viewport').contentWindow.postMessage(obj,targetOrigin);
|
||||
});
|
||||
|
||||
function saveSize(size) {
|
||||
if (!DataSaver.findValue('vpWidth')) {
|
||||
DataSaver.addValue("vpWidth",size);
|
||||
} else {
|
||||
DataSaver.updateValue("vpWidth",size);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//Update Pixel and Em inputs
|
||||
//'size' is the input number
|
||||
//'unit' is the type of unit: either px or em. Default is px. Accepted values are 'px' and 'em'
|
||||
//'target' is what inputs to update. Defaults to both
|
||||
function updateSizeReading(size,unit,target) {
|
||||
var emSize, pxSize;
|
||||
|
||||
if(unit==='em') { //If size value is in em units
|
||||
emSize = size;
|
||||
pxSize = Math.floor(size*$bodySize);
|
||||
} else { //If value is px or absent
|
||||
pxSize = size;
|
||||
emSize = size/$bodySize;
|
||||
}
|
||||
|
||||
if (target === 'updatePxInput') {
|
||||
$sizePx.val(pxSize);
|
||||
} else if (target === 'updateEmInput') {
|
||||
$sizeEms.val(emSize.toFixed(2));
|
||||
} else {
|
||||
$sizeEms.val(emSize.toFixed(2));
|
||||
$sizePx.val(pxSize);
|
||||
}
|
||||
}
|
||||
|
||||
/* Returns a random number between min and max */
|
||||
function getRandom (min, max) {
|
||||
return Math.floor(Math.random() * (max - min) + min);
|
||||
}
|
||||
|
||||
//Update The viewport size
|
||||
function updateViewportWidth(size) {
|
||||
$("#sg-viewport").width(size);
|
||||
$("#sg-gen-container").width(size*1 + 14);
|
||||
|
||||
updateSizeReading(size);
|
||||
}
|
||||
|
||||
//Detect larger screen and no touch support
|
||||
/*
|
||||
if('ontouchstart' in document.documentElement && window.matchMedia("(max-width: 700px)").matches) {
|
||||
$('body').addClass('no-resize');
|
||||
$('#sg-viewport ').width(sw);
|
||||
|
||||
alert('workit');
|
||||
} else {
|
||||
|
||||
}
|
||||
*/
|
||||
|
||||
$('#sg-gen-container').on('touchstart', function(event){});
|
||||
|
||||
// handles widening the "viewport"
|
||||
// 1. on "mousedown" store the click location
|
||||
// 2. make a hidden div visible so that it can track mouse movements and make sure the pointer doesn't get lost in the iframe
|
||||
// 3. on "mousemove" calculate the math, save the results to a cookie, and update the viewport
|
||||
$('#sg-rightpull').mousedown(function(event) {
|
||||
|
||||
// capture default data
|
||||
var origClientX = event.clientX;
|
||||
var origViewportWidth = $sgViewport.width();
|
||||
|
||||
// show the cover
|
||||
$("#sg-cover").css("display","block");
|
||||
|
||||
// add the mouse move event and capture data. also update the viewport width
|
||||
$('#sg-cover').mousemove(function(event) {
|
||||
var viewportWidth;
|
||||
|
||||
viewportWidth = (origClientX > event.clientX) ? origViewportWidth - (origClientX - event.clientX) : origViewportWidth + (event.clientX - origClientX);
|
||||
|
||||
if (viewportWidth > minViewportWidth) {
|
||||
|
||||
if (!DataSaver.findValue('vpWidth')) {
|
||||
DataSaver.addValue("vpWidth",viewportWidth);
|
||||
} else {
|
||||
DataSaver.updateValue("vpWidth",viewportWidth);
|
||||
}
|
||||
|
||||
sizeiframe(viewportWidth,false);
|
||||
}
|
||||
});
|
||||
|
||||
return false;
|
||||
|
||||
});
|
||||
|
||||
// on "mouseup" we unbind the "mousemove" event and hide the cover again
|
||||
$('body').mouseup(function() {
|
||||
$('#sg-cover').unbind('mousemove');
|
||||
$('#sg-cover').css("display","none");
|
||||
});
|
||||
|
||||
|
||||
// capture the viewport width that was loaded and modify it so it fits with the pull bar
|
||||
var origViewportWidth = $("#sg-viewport").width();
|
||||
$("#sg-gen-container").width(origViewportWidth);
|
||||
|
||||
var testWidth = screen.width;
|
||||
if (window.orientation !== undefined) {
|
||||
testWidth = (window.orientation == 0) ? screen.width : screen.height;
|
||||
}
|
||||
if (($(window).width() == testWidth) && ('ontouchstart' in document.documentElement) && ($(window).width() <= 1024)) {
|
||||
$("#sg-rightpull-container").width(0);
|
||||
} else {
|
||||
$("#sg-viewport").width(origViewportWidth - 14);
|
||||
}
|
||||
updateSizeReading($("#sg-viewport").width());
|
||||
|
||||
// get the request vars
|
||||
var oGetVars = urlHandler.getRequestVars();
|
||||
|
||||
// pre-load the viewport width
|
||||
var vpWidth = 0;
|
||||
var trackViewportWidth = true; // can toggle this feature on & off
|
||||
|
||||
if ((oGetVars.h !== undefined) || (oGetVars.hay !== undefined)) {
|
||||
startHay();
|
||||
} else if ((oGetVars.d !== undefined) || (oGetVars.disco !== undefined)) {
|
||||
startDisco();
|
||||
} else if ((oGetVars.w !== undefined) || (oGetVars.width !== undefined)) {
|
||||
vpWidth = (oGetVars.w !== undefined) ? oGetVars.w : oGetVars.width;
|
||||
vpWidth = (vpWidth.indexOf("em") !== -1) ? Math.floor(Math.floor(vpWidth.replace("em",""))*$bodySize) : Math.floor(vpWidth.replace("px",""));
|
||||
DataSaver.updateValue("vpWidth",vpWidth);
|
||||
updateViewportWidth(vpWidth);
|
||||
} else if (trackViewportWidth && (vpWidth = DataSaver.findValue("vpWidth"))) {
|
||||
updateViewportWidth(vpWidth);
|
||||
}
|
||||
|
||||
// load the iframe source
|
||||
var patternName = "all";
|
||||
var patternPath = "";
|
||||
var iFramePath = window.location.protocol+"//"+window.location.host+window.location.pathname.replace("index.html","")+"styleguide/html/styleguide.html";
|
||||
if ((oGetVars.p !== undefined) || (oGetVars.pattern !== undefined)) {
|
||||
patternName = (oGetVars.p !== undefined) ? oGetVars.p : oGetVars.pattern;
|
||||
patternPath = urlHandler.getFileName(patternName);
|
||||
iFramePath = (patternPath !== "") ? window.location.protocol+"//"+window.location.host+window.location.pathname.replace("index.html","")+patternPath : iFramePath;
|
||||
}
|
||||
|
||||
if (patternName !== "all") {
|
||||
document.getElementById("title").innerHTML = "Pattern Lab - "+patternName;
|
||||
history.replaceState({ "pattern": patternName }, null, null);
|
||||
}
|
||||
|
||||
if (document.getElementById("sg-raw") != undefined) {
|
||||
document.getElementById("sg-raw").setAttribute("href",urlHandler.getFileName(patternName));
|
||||
}
|
||||
|
||||
urlHandler.skipBack = true;
|
||||
document.getElementById("sg-viewport").contentWindow.location.replace(iFramePath);
|
||||
|
||||
//Close all dropdowns and navigation
|
||||
function closePanels() {
|
||||
$('.sg-nav-container, .sg-nav-toggle, .sg-acc-handle, .sg-acc-panel').removeClass('active');
|
||||
patternFinder.closeFinder();
|
||||
}
|
||||
|
||||
// update the iframe with the source from clicked element in pull down menu. also close the menu
|
||||
// having it outside fixes an auto-close bug i ran into
|
||||
$('.sg-nav a').not('.sg-acc-handle').on("click", function(e){
|
||||
e.preventDefault();
|
||||
// update the iframe via the history api handler
|
||||
var obj = JSON.stringify({ "path": urlHandler.getFileName($(this).attr("data-patternpartial")) });
|
||||
document.getElementById("sg-viewport").contentWindow.postMessage(obj, urlHandler.targetOrigin);
|
||||
closePanels();
|
||||
});
|
||||
|
||||
// handle when someone clicks on the grey area of the viewport so it auto-closes the nav
|
||||
$('#sg-vp-wrap').click(function() {
|
||||
closePanels();
|
||||
});
|
||||
|
||||
// Listen for resize changes
|
||||
if (window.orientation !== undefined) {
|
||||
var origOrientation = window.orientation;
|
||||
window.addEventListener("orientationchange", function() {
|
||||
if (window.orientation != origOrientation) {
|
||||
$("#sg-gen-container").width($(window).width());
|
||||
$("#sg-viewport").width($(window).width());
|
||||
updateSizeReading($(window).width());
|
||||
origOrientation = window.orientation;
|
||||
}
|
||||
}, false);
|
||||
|
||||
}
|
||||
|
||||
// watch the iframe source so that it can be sent back to everyone else.
|
||||
// based on the great MDN docs at https://developer.mozilla.org/en-US/docs/Web/API/window.postMessage
|
||||
function receiveIframeMessage(event) {
|
||||
|
||||
var data = (typeof event.data !== "string") ? event.data : JSON.parse(event.data);
|
||||
|
||||
// does the origin sending the message match the current host? if not dev/null the request
|
||||
if ((window.location.protocol !== "file:") && (event.origin !== window.location.protocol+"//"+window.location.host)) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (data.bodyclick !== undefined) {
|
||||
|
||||
closePanels();
|
||||
|
||||
} else if (data.patternpartial !== undefined) {
|
||||
|
||||
if (!urlHandler.skipBack) {
|
||||
|
||||
if ((history.state === undefined) || (history.state === null) || (history.state.pattern !== data.patternpartial)) {
|
||||
urlHandler.pushPattern(data.patternpartial, data.path);
|
||||
}
|
||||
|
||||
if (wsnConnected) {
|
||||
var iFramePath = urlHandler.getFileName(data.patternpartial);
|
||||
wsn.send( '{"url": "'+iFramePath+'", "patternpartial": "'+event.data.patternpartial+'" }' );
|
||||
}
|
||||
}
|
||||
|
||||
// reset the defaults
|
||||
urlHandler.skipBack = false;
|
||||
|
||||
} else if (data.keyPress !== undefined) {
|
||||
if (data.keyPress == 'ctrl+shift+s') {
|
||||
goSmall();
|
||||
} else if (data.keyPress == 'ctrl+shift+m') {
|
||||
goMedium();
|
||||
} else if (data.keyPress == 'ctrl+shift+l') {
|
||||
goLarge();
|
||||
} else if (data.keyPress == 'ctrl+shift+d') {
|
||||
if (!discoMode) {
|
||||
startDisco();
|
||||
} else {
|
||||
killDisco();
|
||||
}
|
||||
} else if (data.keyPress == 'ctrl+shift+h') {
|
||||
if (!hayMode) {
|
||||
startHay();
|
||||
} else {
|
||||
killHay();
|
||||
}
|
||||
} else if (data.keyPress == 'ctrl+shift+0') {
|
||||
sizeiframe(320,true);
|
||||
} else if (found = data.keyPress.match(/ctrl\+shift\+([1-9])/)) {
|
||||
var val = mqs[(found[1]-1)];
|
||||
var type = (val.indexOf("px") !== -1) ? "px" : "em";
|
||||
val = val.replace(type,"");
|
||||
var width = (type === "px") ? val*1 : val*$bodySize;
|
||||
sizeiframe(width,true);
|
||||
}
|
||||
return false;
|
||||
}
|
||||
}
|
||||
window.addEventListener("message", receiveIframeMessage, false);
|
||||
|
||||
$('.sg-tools').click(function() {
|
||||
if ((qrCodeGenerator.lastGenerated == "") || (qrCodeGenerator.lastGenerated != window.location.search)) {
|
||||
qrCodeGenerator.getQRCode();
|
||||
qrCodeGenerator.lastGenerated = window.location.search;
|
||||
}
|
||||
});
|
||||
|
||||
})(this);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user