diff --git a/lib/app/sass/app.scss b/lib/app/sass/app.scss
index fc6f7b12..a846d79c 100644
--- a/lib/app/sass/app.scss
+++ b/lib/app/sass/app.scss
@@ -1,4 +1,3 @@
-@import 'reset';
$fa-font-path: '../assets/fonts';
@import 'components/font-awesome/font-awesome';
@import 'bourbon';
@@ -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,
@@ -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;
}
@@ -84,13 +65,13 @@ body.sg {
//
// markup:
// Heading 1
-// 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.
+//
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.
//
Heading 2
-// Mauris feugiat suscipit turpis, ut rhoncus lectus finibus sed. Etiam suscipit consectetur eros vitae venenatis.
+// Mauris feugiat suscipit turpis, ut rhoncus lectus finibus sed. Etiam suscipit consectetur eros vitae venenatis.
// Heading 3
-// Ut leo ipsum, tincidunt vel mauris eget, convallis egestas justo. Nunc ligula neque, porta ac lorem id, ultrices dapibus dolor.
+// Ut leo ipsum, tincidunt vel mauris eget, convallis egestas justo. Nunc ligula neque, porta ac lorem id, ultrices dapibus dolor.
// Heading 4
-// 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.
+// 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.
// Heading 5
//
// Styleguide 1.2
@@ -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;
}
@@ -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;
}
@@ -170,6 +149,7 @@ a.sg:active {
}
p.sg {
+ @include default-font;
line-height: 1.5em;
margin-top: 1.3em;
margin-bottom: 1.3em;
@@ -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
//
@@ -211,6 +193,7 @@ li.sg {
// Styleguide 2.3
button.sg {
+ @include default-font;
display: inline;
margin-right: 8px;
@@ -265,6 +248,7 @@ button.sg {
// Styleguide 2.4
input.sg {
+ @include default-font;
font-family: $secondary-font;
font-weight: 300;
@@ -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;
}
@@ -351,7 +334,6 @@ $mobile: new-breakpoint(max-width 480px);
.sg.wrapper.desigerToolVisible {
margin-right: $designer-tool-width;
- padding-right: 13px;
}
@@ -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);
@@ -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);
}
@@ -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;
@@ -869,6 +854,7 @@ $mobile: new-breakpoint(max-width 480px);
}
.sg.label {
+ @include default-font;
position: absolute;
z-index: 8000;
top: 0;
@@ -881,6 +867,7 @@ $mobile: new-breakpoint(max-width 480px);
span,
p {
+ @include default-font;
font-weight: 500;
display: inline;
@@ -891,6 +878,7 @@ $mobile: new-breakpoint(max-width 480px);
}
a {
+ @include default-font;
display: inline-block;
padding: .4em .7em;
@@ -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;
@@ -1016,6 +1005,7 @@ $mobile: new-breakpoint(max-width 480px);
}
.sg.design-content {
+ @include default-font;
position: relative;
z-index: 9000;
@@ -1028,6 +1018,12 @@ $mobile: new-breakpoint(max-width 480px);
background: white;
+ ul {
+ margin: 0;
+ padding: 0;
+ list-style: none;
+ }
+
label {
display: block;
@@ -1043,7 +1039,7 @@ $mobile: new-breakpoint(max-width 480px);
}
input[type='text'] {
- box-sizing: borderbox;
+ box-sizing: border-box;
width: 100%;
}
@@ -1051,7 +1047,7 @@ $mobile: new-breakpoint(max-width 480px);
position: absolute;
right: 0;
- box-sizing: borderbox;
+ box-sizing: border-box;
width: 36px;
height: 36px;
padding: 0;
@@ -1141,6 +1137,7 @@ $mobile: new-breakpoint(max-width 480px);
// Styleguide 5.1
.styleguide-color {
+ @include default-font;
font-weight: 300;
display: block;