mirror of
https://github.com/pattern-lab/patternlab-php.git
synced 2025-01-17 06:08:23 +01:00
Right-aligned sizing styles
This commit is contained in:
Brad Frost
parent
facce7ee0e
commit
69896a1d27
3
.gitignore
vendored
3
.gitignore
vendored
@ -10,3 +10,6 @@ latest-change.txt
|
||||
*-ck.js
|
||||
|
||||
/core/source/css/.sass-cache/
|
||||
|
||||
/public/styleguide/css/styleguide.css
|
||||
/public/styleguide/css/styleguide.scss
|
||||
|
||||
@ -407,19 +407,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-med) {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
@ -429,6 +428,7 @@ $animate-quick: 0.2s;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.sg-input {
|
||||
margin: -2px 0 0 0;
|
||||
padding: 0;
|
||||
|
||||
@ -10,13 +10,13 @@
|
||||
</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 }}
|
||||
|
||||
@ -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
Loading…
x
Reference in New Issue
Block a user