mirror_php/patternlab-php
1
0
Fork 0
mirror of https://github.com/pattern-lab/patternlab-php.git synced 2025-01-17 22:29:12 +01:00
Code Issues Releases Wiki Activity

Merge branch 'dev' of https://github.com/pattern-lab/patternlab-php into dev

Browse Source
This commit is contained in:
Dave Olsen 2014-03-06 09:37:48 -05:00
commit 6aadb16e16
4 changed files with 152 additions and 174 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

114
core/styleguide/css/styleguide.css
View File

@ -49,7 +49,6 @@
/*------------------------------------*\ /*------------------------------------*\
$PATTERN LAB INTERFACE $PATTERN LAB INTERFACE
\*------------------------------------*/ \*------------------------------------*/
#patternlab-html, #patternlab-body { #patternlab-html, #patternlab-body {
margin: 0; margin: 0;
padding: 0; padding: 0;
@ -70,7 +69,7 @@
clip: rect(1px, 1px, 1px, 1px); } clip: rect(1px, 1px, 1px, 1px); }
.sg-cf, .sg-pattern { .sg-cf, .sg-pattern {
/*zoom: 1;*/ } /**zoom: 1;*/ }
.sg-cf:before, .sg-pattern:before, .sg-cf:after, .sg-pattern:after { .sg-cf:before, .sg-pattern:before, .sg-cf:after, .sg-pattern:after {
content: " "; content: " ";
display: table; } display: table; }
@ -227,6 +226,9 @@
min-width: 0; } min-width: 0; }
.sg-controls .sg-nav-phases .sg-acc-panel.active { .sg-controls .sg-nav-phases .sg-acc-panel.active {
max-height: none; } max-height: none; }
@media all and (min-width: 69.5em) {
.sg-controls {
width: 41.5em; } }
.sg-control-trigger { .sg-control-trigger {
border-bottom: 1px solid rgba(255, 255, 255, 0.05); } border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
@ -263,7 +265,7 @@
.sg-current-size:hover .sg-input { .sg-current-size:hover .sg-input {
background: #999999; background: #999999;
color: #000; } color: #000; }
@media all and (min-width: 72.5em) { @media all and (min-width: 69.5em) {
.sg-current-size { .sg-current-size {
float: left; } } float: left; } }
@ -273,7 +275,7 @@
.sg-size { .sg-size {
width: auto; } } width: auto; } }
@media all and (min-width: 72.5em) { @media all and (min-width: 69.5em) {
.sg-size-options { .sg-size-options {
float: left; float: left;
position: static; position: static;
@ -284,16 +286,12 @@
border: 0; border: 0;
border-left: 1px solid rgba(255, 255, 255, 0.05); } } border-left: 1px solid rgba(255, 255, 255, 0.05); } }
.sg-find, .sg-mqs { .sg-find {
display: none; display: none; }
}
@media all and (min-width: 48em) { @media all and (min-width: 48em) {
.sg-find, .sg-mqs { .sg-find {
display: block; display: block; } }
}
}
#sg-form { #sg-form {
margin: 0; margin: 0;
border: 0; border: 0;
@ -322,7 +320,7 @@
top: 2em; top: 2em;
left: 0; } left: 0; }
.sg-iconitem:before { .sg-checkbox:before {
display: inline-block; display: inline-block;
margin-right: 0.4em; } margin-right: 0.4em; }
@ -338,8 +336,7 @@
bottom: 0; bottom: 0;
left: 0; left: 0;
right: 0; right: 0;
z-index: 0; z-index: 0; }
}
#sg-vp-wrap.wrap-animate { #sg-vp-wrap.wrap-animate {
-webkit-transition: left 0.3s ease-out; -webkit-transition: left 0.3s ease-out;
-moz-transition: left 0.3s ease-out; -moz-transition: left 0.3s ease-out;
@ -358,8 +355,7 @@
bottom: 0; bottom: 0;
left: 0; left: 0;
right: 0; right: 0;
background-color: white; background-color: white; }
}
#sg-viewport.hay-mode { #sg-viewport.hay-mode {
-webkit-transition: all 40s linear; -webkit-transition: all 40s linear;
-moz-transition: all 40s linear; -moz-transition: all 40s linear;
@ -387,8 +383,7 @@
margin: 0 auto; margin: 0 auto;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
overflow-y: auto; overflow-y: auto;
overflow-x: hidden; overflow-x: hidden; }
}
#sg-gen-container.hay-mode { #sg-gen-container.hay-mode {
-webkit-transition: all 40s linear; -webkit-transition: all 40s linear;
-moz-transition: all 40s linear; -moz-transition: all 40s linear;
@ -401,8 +396,7 @@
float: right; float: right;
margin: 0; margin: 0;
height: 100%; height: 100%;
cursor: col-resize; cursor: col-resize; }
}
#sg-rightpull { #sg-rightpull {
margin: 0; margin: 0;
@ -432,7 +426,8 @@
\*------------------------------------*/ \*------------------------------------*/
/* Section Pattern */ /* Section Pattern */
.sg-pattern { .sg-pattern {
margin-bottom: 2em; } margin-bottom: 2em;
position: relative; }
/* Section Head */ /* Section Head */
.sg-pattern-head { .sg-pattern-head {
@ -527,8 +522,7 @@
.has-annotation { .has-annotation {
cursor: help !important; cursor: help !important;
box-shadow: 0 0 10px gray; box-shadow: 0 0 10px gray; }
}
.has-annotation a, .has-annotation input { .has-annotation a, .has-annotation input {
cursor: help !important; } cursor: help !important; }
.has-annotation:hover { .has-annotation:hover {
@ -549,8 +543,7 @@
color: #fff !important; color: #fff !important;
font-weight: bold !important; font-weight: bold !important;
font-size: 16px !important; font-size: 16px !important;
z-index: 100; z-index: 100; }
}
#sg-comments-container { #sg-comments-container {
max-width: 60em; max-width: 60em;
@ -641,26 +634,24 @@ div.clear {
.spinner { .spinner {
height: 30px; height: 30px;
width: 30px; width: 30px;
margin-left: auto; margin-right: auto; margin-left: auto;
margin-right: auto;
background-position: center center; background-position: center center;
background-repeat: no-repeat; background-repeat: no-repeat;
background: url('../images/spinner.gif'); background: url("../images/spinner.gif");
border-radius: 50%; border-radius: 50%;
opacity: .7; } opacity: .7; }
/* Pattern Lab icon fonts */
/* Pattern Lab icon fonts */ /* Pattern Lab icon fonts */
@font-face { @font-face {
font-family: 'icomoon'; font-family: 'icomoon';
src:url('../fonts/icomoon.eot?srsv7g'); src: url("../fonts/icomoon.eot?srsv7g");
src:url('../fonts/icomoon.eot?#iefixsrsv7g') format('embedded-opentype'), 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");
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-weight: normal;
font-style: normal; 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-iconitem { .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 {
font-family: 'icomoon'; font-family: 'icomoon';
speak: none; speak: none;
font-style: normal; font-style: normal;
@ -668,48 +659,45 @@ div.clear {
font-variant: normal; font-variant: normal;
text-transform: none; text-transform: none;
line-height: 1; line-height: 1;
/* Better Font Rendering =========== */ /* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale; }
}
.icon-search:before { .icon-search:before {
content: "\e600"; content: "\e600"; }
}
.icon-cog:before { .icon-cog:before {
content: "\e601"; content: "\e601"; }
}
.icon-minus:before { .icon-minus:before {
content: "\e602"; content: "\e602"; }
}
.icon-plus:before { .icon-plus:before {
content: "\e603"; content: "\e603"; }
}
.icon-menu:before { .icon-menu:before {
content: "\e604"; content: "\e604"; }
}
.icon-radio-checked:before, .sg-checkbox.active:before { .icon-radio-checked:before, .sg-checkbox.active:before {
content: "\e605"; content: "\e605"; }
}
.icon-radio-unchecked:before, .sg-checkbox:before { .icon-radio-unchecked:before, .sg-checkbox:before {
content: "\e606"; content: "\e606"; }
}
.icon-file:before { .icon-file:before {
content: "\e607"; content: "\e607"; }
}
.icon-link:before { .icon-link:before {
content: "\e608"; content: "\e608"; }
}
.icon-keyboard:before { .icon-keyboard:before {
content: "\e609"; content: "\e609"; }
}
.icon-qrcode:before { .icon-qrcode:before {
content: "\e60a"; content: "\e60a"; }
}
.icon-eye:before { .icon-eye:before {
content: "\e60b"; content: "\e60b"; }
}
/******************************************************************/ /******************************************************************/
/* End Pattern Lab Interface code */ /* End Pattern Lab Interface code */

1
core/styleguide/css/styleguide.scss
View File

@ -611,6 +611,7 @@ $animate-quick: 0.2s;
/* Section Pattern */ /* Section Pattern */
.sg-pattern { .sg-pattern {
margin-bottom: $sg-doublespace; margin-bottom: $sg-doublespace;
position: relative; //Prevents absolutely-positioned elements from floating to the top
@extend .sg-cf; @extend .sg-cf;
} }

114
public/styleguide/css/styleguide.css
View File

@ -49,7 +49,6 @@
/*------------------------------------*\ /*------------------------------------*\
$PATTERN LAB INTERFACE $PATTERN LAB INTERFACE
\*------------------------------------*/ \*------------------------------------*/
#patternlab-html, #patternlab-body { #patternlab-html, #patternlab-body {
margin: 0; margin: 0;
padding: 0; padding: 0;
@ -70,7 +69,7 @@
clip: rect(1px, 1px, 1px, 1px); } clip: rect(1px, 1px, 1px, 1px); }
.sg-cf, .sg-pattern { .sg-cf, .sg-pattern {
/*zoom: 1;*/ } /**zoom: 1;*/ }
.sg-cf:before, .sg-pattern:before, .sg-cf:after, .sg-pattern:after { .sg-cf:before, .sg-pattern:before, .sg-cf:after, .sg-pattern:after {
content: " "; content: " ";
display: table; } display: table; }
@ -227,6 +226,9 @@
min-width: 0; } min-width: 0; }
.sg-controls .sg-nav-phases .sg-acc-panel.active { .sg-controls .sg-nav-phases .sg-acc-panel.active {
max-height: none; } max-height: none; }
@media all and (min-width: 69.5em) {
.sg-controls {
width: 41.5em; } }
.sg-control-trigger { .sg-control-trigger {
border-bottom: 1px solid rgba(255, 255, 255, 0.05); } border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
@ -263,7 +265,7 @@
.sg-current-size:hover .sg-input { .sg-current-size:hover .sg-input {
background: #999999; background: #999999;
color: #000; } color: #000; }
@media all and (min-width: 72.5em) { @media all and (min-width: 69.5em) {
.sg-current-size { .sg-current-size {
float: left; } } float: left; } }
@ -273,7 +275,7 @@
.sg-size { .sg-size {
width: auto; } } width: auto; } }
@media all and (min-width: 72.5em) { @media all and (min-width: 69.5em) {
.sg-size-options { .sg-size-options {
float: left; float: left;
position: static; position: static;
@ -284,16 +286,12 @@
border: 0; border: 0;
border-left: 1px solid rgba(255, 255, 255, 0.05); } } border-left: 1px solid rgba(255, 255, 255, 0.05); } }
.sg-find, .sg-mqs { .sg-find {
display: none; display: none; }
}
@media all and (min-width: 48em) { @media all and (min-width: 48em) {
.sg-find, .sg-mqs { .sg-find {
display: block; display: block; } }
}
}
#sg-form { #sg-form {
margin: 0; margin: 0;
border: 0; border: 0;
@ -322,7 +320,7 @@
top: 2em; top: 2em;
left: 0; } left: 0; }
.sg-iconitem:before { .sg-checkbox:before {
display: inline-block; display: inline-block;
margin-right: 0.4em; } margin-right: 0.4em; }
@ -338,8 +336,7 @@
bottom: 0; bottom: 0;
left: 0; left: 0;
right: 0; right: 0;
z-index: 0; z-index: 0; }
}
#sg-vp-wrap.wrap-animate { #sg-vp-wrap.wrap-animate {
-webkit-transition: left 0.3s ease-out; -webkit-transition: left 0.3s ease-out;
-moz-transition: left 0.3s ease-out; -moz-transition: left 0.3s ease-out;
@ -358,8 +355,7 @@
bottom: 0; bottom: 0;
left: 0; left: 0;
right: 0; right: 0;
background-color: white; background-color: white; }
}
#sg-viewport.hay-mode { #sg-viewport.hay-mode {
-webkit-transition: all 40s linear; -webkit-transition: all 40s linear;
-moz-transition: all 40s linear; -moz-transition: all 40s linear;
@ -387,8 +383,7 @@
margin: 0 auto; margin: 0 auto;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
overflow-y: auto; overflow-y: auto;
overflow-x: hidden; overflow-x: hidden; }
}
#sg-gen-container.hay-mode { #sg-gen-container.hay-mode {
-webkit-transition: all 40s linear; -webkit-transition: all 40s linear;
-moz-transition: all 40s linear; -moz-transition: all 40s linear;
@ -401,8 +396,7 @@
float: right; float: right;
margin: 0; margin: 0;
height: 100%; height: 100%;
cursor: col-resize; cursor: col-resize; }
}
#sg-rightpull { #sg-rightpull {
margin: 0; margin: 0;
@ -432,7 +426,8 @@
\*------------------------------------*/ \*------------------------------------*/
/* Section Pattern */ /* Section Pattern */
.sg-pattern { .sg-pattern {
margin-bottom: 2em; } margin-bottom: 2em;
position: relative; }
/* Section Head */ /* Section Head */
.sg-pattern-head { .sg-pattern-head {
@ -527,8 +522,7 @@
.has-annotation { .has-annotation {
cursor: help !important; cursor: help !important;
box-shadow: 0 0 10px gray; box-shadow: 0 0 10px gray; }
}
.has-annotation a, .has-annotation input { .has-annotation a, .has-annotation input {
cursor: help !important; } cursor: help !important; }
.has-annotation:hover { .has-annotation:hover {
@ -549,8 +543,7 @@
color: #fff !important; color: #fff !important;
font-weight: bold !important; font-weight: bold !important;
font-size: 16px !important; font-size: 16px !important;
z-index: 100; z-index: 100; }
}
#sg-comments-container { #sg-comments-container {
max-width: 60em; max-width: 60em;
@ -641,26 +634,24 @@ div.clear {
.spinner { .spinner {
height: 30px; height: 30px;
width: 30px; width: 30px;
margin-left: auto; margin-right: auto; margin-left: auto;
margin-right: auto;
background-position: center center; background-position: center center;
background-repeat: no-repeat; background-repeat: no-repeat;
background: url('../images/spinner.gif'); background: url("../images/spinner.gif");
border-radius: 50%; border-radius: 50%;
opacity: .7; } opacity: .7; }
/* Pattern Lab icon fonts */
/* Pattern Lab icon fonts */ /* Pattern Lab icon fonts */
@font-face { @font-face {
font-family: 'icomoon'; font-family: 'icomoon';
src:url('../fonts/icomoon.eot?srsv7g'); src: url("../fonts/icomoon.eot?srsv7g");
src:url('../fonts/icomoon.eot?#iefixsrsv7g') format('embedded-opentype'), 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");
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-weight: normal;
font-style: normal; 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-iconitem { .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 {
font-family: 'icomoon'; font-family: 'icomoon';
speak: none; speak: none;
font-style: normal; font-style: normal;
@ -668,48 +659,45 @@ div.clear {
font-variant: normal; font-variant: normal;
text-transform: none; text-transform: none;
line-height: 1; line-height: 1;
/* Better Font Rendering =========== */ /* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale; }
}
.icon-search:before { .icon-search:before {
content: "\e600"; content: "\e600"; }
}
.icon-cog:before { .icon-cog:before {
content: "\e601"; content: "\e601"; }
}
.icon-minus:before { .icon-minus:before {
content: "\e602"; content: "\e602"; }
}
.icon-plus:before { .icon-plus:before {
content: "\e603"; content: "\e603"; }
}
.icon-menu:before { .icon-menu:before {
content: "\e604"; content: "\e604"; }
}
.icon-radio-checked:before, .sg-checkbox.active:before { .icon-radio-checked:before, .sg-checkbox.active:before {
content: "\e605"; content: "\e605"; }
}
.icon-radio-unchecked:before, .sg-checkbox:before { .icon-radio-unchecked:before, .sg-checkbox:before {
content: "\e606"; content: "\e606"; }
}
.icon-file:before { .icon-file:before {
content: "\e607"; content: "\e607"; }
}
.icon-link:before { .icon-link:before {
content: "\e608"; content: "\e608"; }
}
.icon-keyboard:before { .icon-keyboard:before {
content: "\e609"; content: "\e609"; }
}
.icon-qrcode:before { .icon-qrcode:before {
content: "\e60a"; content: "\e60a"; }
}
.icon-eye:before { .icon-eye:before {
content: "\e60b"; content: "\e60b"; }
}
/******************************************************************/ /******************************************************************/
/* End Pattern Lab Interface code */ /* End Pattern Lab Interface code */

1
public/styleguide/css/styleguide.scss
View File

@ -611,6 +611,7 @@ $animate-quick: 0.2s;
/* Section Pattern */ /* Section Pattern */
.sg-pattern { .sg-pattern {
margin-bottom: $sg-doublespace; margin-bottom: $sg-doublespace;
position: relative; //Prevents absolutely-positioned elements from floating to the top
@extend .sg-cf; @extend .sg-cf;
} }