Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix #255: Do not pollute previews with inheritable styles #260

Merged
merged 1 commit into from
Nov 25, 2014
Merged

Fix #255: Do not pollute previews with inheritable styles #260

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
99 changes: 48 additions & 51 deletions lib/app/sass/app.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
@import 'reset';
$fa-font-path: '../assets/fonts';
@import 'components/font-awesome/font-awesome';
@import 'bourbon';
Expand All @@ -9,32 +8,20 @@ $fa-font-path: '../assets/fonts';
@import 'components/github';

@mixin reset {
font-size: 14px;
font-weight: 400;

display: block;

margin: 0;
padding: 0;

color: black;
border: 0;
background: transparent;
}

@mixin pre-label($text) {
font-family: $secondary-font;
font-size: .8rem;

position: absolute;
top: 0;
left: 0;

padding: 1em;

content: $text;

color: rgba(#000, .4);
// We need to denite fonts separatedly to every element since we do not want to pollute previews
// with inherited styles
@mixin default-font {
font-family: $primary-font;
font-size: 14px;
line-height: 1.45;
color: #222;
font-weight: 400;
}

html,
Expand All @@ -49,13 +36,7 @@ body.sg {
}

.sg {
font-family: $primary-font;
line-height: 1.45;

box-sizing: border-box;

color: rgba(#222, 1);

@include reset;
}

Expand Down Expand Up @@ -84,13 +65,13 @@ body.sg {
//
// markup:
// <h1 class="sg">Heading 1</h1>
// <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa ipsum, tincidunt vel convallis in, suscipit et risus. Morbi erat dolor, mattis at dignissim sed, feugiat sed lorem.
// <p class="sg">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa ipsum, tincidunt vel convallis in, suscipit et risus. Morbi erat dolor, mattis at dignissim sed, feugiat sed lorem.
// <h2 class="sg">Heading 2</h2>
// <p>Mauris feugiat suscipit turpis, ut rhoncus lectus finibus sed. Etiam suscipit consectetur eros vitae venenatis.</p>
// <p class="sg">Mauris feugiat suscipit turpis, ut rhoncus lectus finibus sed. Etiam suscipit consectetur eros vitae venenatis.</p>
// <h3 class="sg">Heading 3</h3>
// <p>Ut leo ipsum, tincidunt vel mauris eget, convallis egestas justo. Nunc ligula neque, porta ac lorem id, ultrices dapibus dolor.</p>
// <p class="sg">Ut leo ipsum, tincidunt vel mauris eget, convallis egestas justo. Nunc ligula neque, porta ac lorem id, ultrices dapibus dolor.</p>
// <h4 class="sg">Heading 4</h4>
// <p> Phasellus interdum massa ante, ac placerat felis ultricies at. Fusce vulputate, odio sed convallis laoreet, tortor orci venenatis massa, a placerat ligula nisl vitae felis. In pellentesque ornare eleifend. Suspendisse potenti. Quisque eget mauris enim.</p>
// <p class="sg"> Phasellus interdum massa ante, ac placerat felis ultricies at. Fusce vulputate, odio sed convallis laoreet, tortor orci venenatis massa, a placerat ligula nisl vitae felis. In pellentesque ornare eleifend. Suspendisse potenti. Quisque eget mauris enim.</p>
// <h5 class="sg">Heading 5</h5>
//
// Styleguide 1.2
Expand All @@ -100,12 +81,11 @@ h2.sg,
h3.sg,
h4.sg,
h5.sg {
@include default-font;
font-family: $primary-font;
font-weight: inherit;
line-height: 1.2;

margin: 1.414em 0 .5em;

color: #444;
}

Expand Down Expand Up @@ -153,11 +133,10 @@ h5.sg {
// Styleguide 2.1

a.sg {
@include default-font;
display: inline;

cursor: pointer;
text-decoration: none;

color: $default-action-color;
}

Expand All @@ -170,6 +149,7 @@ a.sg:active {
}

p.sg {
@include default-font;
line-height: 1.5em;
margin-top: 1.3em;
margin-bottom: 1.3em;
Expand All @@ -178,24 +158,26 @@ p.sg {

code.sg,
pre.sg {
@include default-font;
font-family: 'Lucida Console', Monaco, monospace;
font-size: .8em;
font-size: 1.0em;
white-space: pre-wrap;
}

li.sg {
@include default-font;
margin-left: 1em;
padding: .2em 0;
}

.sg {
strong {
font-weight: 700;
}
strong.sg {
@include default-font;
font-weight: 700;
}

small {
color: #888;
}
small.sg {
@include default-font;
color: #888;
}
// Buttons
//
Expand All @@ -211,6 +193,7 @@ li.sg {
// Styleguide 2.3

button.sg {
@include default-font;
display: inline;

margin-right: 8px;
Expand Down Expand Up @@ -265,6 +248,7 @@ button.sg {
// Styleguide 2.4

input.sg {
@include default-font;
font-family: $secondary-font;
font-weight: 300;

Expand Down Expand Up @@ -306,8 +290,7 @@ $mobile: new-breakpoint(max-width 480px);

.sg.wrapper {
position: relative;

padding-top: 2em;
padding: 2em 13px 2em 13px;

@include outer-container;
}
Expand Down Expand Up @@ -351,7 +334,6 @@ $mobile: new-breakpoint(max-width 480px);

.sg.wrapper.desigerToolVisible {
margin-right: $designer-tool-width;
padding-right: 13px;
}


Expand Down Expand Up @@ -383,7 +365,7 @@ $mobile: new-breakpoint(max-width 480px);
.sg.header {
width: 100%;
height: $header-height;

padding-left: 13px;
color: rgba(#fff, 1);
background: rgba($primary-color, 1);

Expand Down Expand Up @@ -566,8 +548,9 @@ $mobile: new-breakpoint(max-width 480px);
vertical-align: top;

ul {
margin-top: 2em;

list-style: none;
margin: 2em 0 0 0;
padding: 0;
background: rgba(#fff, 1);
}

Expand Down Expand Up @@ -832,6 +815,8 @@ $mobile: new-breakpoint(max-width 480px);
}

.sg.modifier-list {
@include default-font;
list-style: none;
padding: 1em;
> .item {
line-height: 1.8em;
Expand Down Expand Up @@ -869,6 +854,7 @@ $mobile: new-breakpoint(max-width 480px);
}

.sg.label {
@include default-font;
position: absolute;
z-index: 8000;
top: 0;
Expand All @@ -881,6 +867,7 @@ $mobile: new-breakpoint(max-width 480px);

span,
p {
@include default-font;
font-weight: 500;

display: inline;
Expand All @@ -891,6 +878,7 @@ $mobile: new-breakpoint(max-width 480px);
}

a {
@include default-font;
display: inline-block;

padding: .4em .7em;
Expand Down Expand Up @@ -966,6 +954,7 @@ $mobile: new-breakpoint(max-width 480px);
@include transition(left .3s ease-out);

.handle {
@include default-font;
position: absolute;
top: 220px;
left: -30px;
Expand Down Expand Up @@ -1016,6 +1005,7 @@ $mobile: new-breakpoint(max-width 480px);
}

.sg.design-content {
@include default-font;
position: relative;
z-index: 9000;

Expand All @@ -1028,6 +1018,12 @@ $mobile: new-breakpoint(max-width 480px);

background: white;

ul {
margin: 0;
padding: 0;
list-style: none;
}

label {
display: block;

Expand All @@ -1043,15 +1039,15 @@ $mobile: new-breakpoint(max-width 480px);
}

input[type='text'] {
box-sizing: borderbox;
box-sizing: border-box;
width: 100%;
}

input[type='color'] {
position: absolute;
right: 0;

box-sizing: borderbox;
box-sizing: border-box;
width: 36px;
height: 36px;
padding: 0;
Expand Down Expand Up @@ -1141,6 +1137,7 @@ $mobile: new-breakpoint(max-width 480px);
// Styleguide 5.1

.styleguide-color {
@include default-font;
font-weight: 300;

display: block;
Expand Down