alihan/openmct
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[Frontend] WIP Style Guide

Browse Source 
Fixes #1233
Add major new content, glyphs page and display code;
minor layout tweaks;
This commit is contained in:
Charles Hacskaylo
2017-01-31 16:07:40 -08:00
parent 563b02bb1d
commit 43117a7ebe
6 changed files with 342 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
example/styleguide/res/sass/_style-guide-base.scss
View File

@@ -32,12 +32,12 @@
font-size: 1.25em;
}
h3 {
//border-bottom: 1px solid $colorInteriorBorder;
font-size: 0.9em;
margin: $interiorMargin 0;
&:not(:first-child) { margin-top: $interiorMarginLg * 2; }
&:not(:first-child) {
margin-top: $interiorMarginLg * 2;
}
text-transform: uppercase;
}
@@ -85,7 +85,9 @@
padding-right: $v;
}
min-width: 300px;
img { width: 100%; }
img {
width: 100%;
}
}
&.cols1-1 {
@@ -97,14 +99,48 @@
&.cols1-2 {
// 3 cols, first is 1/3 of the width
.col:first-child { width: 33%; }
.col:last-child { width: 66%; }
.col:first-child {
width: 33%;
}
.col:last-child {
width: 66%;
}
}
&.cols2-1 {
// 3 cols, first is 2/3 of the width
.col:first-child { width: 66%; }
.col:last-child { width: 33%; }
.col:first-child {
width: 66%;
}
.col:last-child {
width: 33%;
}
}
}
}
// Example grid of glyphs
.items-holder.grid {
.item.glyph-item {
$d: 200px;
margin-bottom: 50px;
margin-right: 10px;
height: $d;
width: $d;
text-align: left;
.glyph {
//@include test();
color: pullForward($colorBodyFg, 30%);
font-size: 5em;
margin: $interiorMarginLg 0;
text-align: center;
}
table.details td.label {
color: pushBack($colorBodyFg, 10%);
text-transform: uppercase;
white-space: nowrap;
//width: 33%;
}
}
}