ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-02-20 09:26:45 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

[Frontend] WIP Style Guide

Browse Source 
Fixes #1233
Adds to text inputs content;
Mods to MCTExample to allow a padded
wrapper around <pre> element;
Fixed snow theme css file reference;
This commit is contained in:
Charles Hacskaylo 2017-01-31 17:21:22 -08:00
parent 3c81398865
commit 7543faa577
7 changed files with 36 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
example/styleguide/bundle.js
View File

@ -67,7 +67,7 @@ define([
"theme": "espresso"
},
{
"stylesheetUrl": "css/time-conductor-snow.css",
"stylesheetUrl": "css/style-guide-snow.css",
"theme": "snow"
}
]

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

@ -41,24 +41,32 @@
text-transform: uppercase;
}
.w-markup {
//Wrap markup example "pre" element
background-color: $colorCode;
border-radius: $interiorMargin;
display: block;
padding: $interiorMargin $interiorMarginLg;
position: relative;
}
code,
pre {
background-color: pushBack($colorBodyBg, 20%);
display: inline-block;
font-size: 0.8rem;
}
code {
background-color: $colorCode;
border-radius: $controlCr;
display: inline-block;
padding: 1px $interiorMargin;
}
pre {
border-radius: $interiorMargin;
display: block;
margin: 0;
overflow: auto;
padding: $interiorMargin $interiorMarginLg;
padding-bottom: $interiorMarginLg;
white-space: pre;
}
@ -129,8 +137,7 @@
width: $d;
text-align: left;
.glyph {
//@include test();
color: pullForward($colorBodyFg, 30%);
color: $colorGlyphExample;
font-size: 5em;
margin: $interiorMarginLg 0;
text-align: center;
@ -140,7 +147,6 @@
color: pushBack($colorBodyFg, 10%);
text-transform: uppercase;
white-space: nowrap;
//width: 33%;
}
}
}

3
example/styleguide/res/sass/style-guide-espresso.scss
View File

@ -28,6 +28,7 @@
@import "../../../../platform/commonUI/general/res/sass/icons";
// Thematic constants
//$colorHeaders: pullForward($colorBodyFg, 30%);
$colorCode: rgba(black, 0.1);
$colorGlyphExample: #fff;
@import "style-guide-base";

3
example/styleguide/res/sass/style-guide-snow.scss
View File

@ -28,6 +28,7 @@
@import "../../../../platform/commonUI/general/res/sass/icons";
// Thematic constants
//$colorHeaders: pullForward($colorBodyFg, 30%);
$colorCode: rgba(black, 0.1);
$colorGlyphExample: darken($colorBodyBg, 30%);
@import "style-guide-base";

24
example/styleguide/res/templates/input.html
View File

@ -31,21 +31,19 @@
<div class="cols cols1-1">
<div class="col">
<p>Text inputs have a consistent look-and-feel across the application. The input's <code>placeholder</code> is styled to appear visually different from an entered value.</p>
<p>A variety of size styles are available: <code>.lg</code>, <code>.med</code> and <code>.sm</code>. Numeric inputs that benefit from right-alignment can be styled by adding <code>.numeric</code>.</p>
<p>A variety of size styles are available: <code>.lg</code>, <code>.med</code> and <code>.sm</code>. <code>.lg</code> text inputs dynamically scale their width to 100% of their container's width. Numeric inputs that benefit from right-alignment can be styled by adding <code>.numeric</code>.</p>
</div>
<mct-example><input type="text" />
<mct-example><input type="text" placeholder="Enter a value" />
<br /><br />
<input type="text" placeholder="Enter a value" />
<input type="text" placeholder="Enter a value" value="An entered value" />
<br /><br />
<input type="text" placeholder="Enter a value" value="A previously entered value" />
<br /><br />
<input type="text" placeholder="Enter a value" class="numeric" value="Numeric" />
<br /><br />
<input type="text" placeholder="Enter a value" class="lg" value="A large input" />
<input type="text" placeholder="Enter a value" class="sm" value="Small" />
<br /><br />
<input type="text" placeholder="Enter a value" class="med" value="A medium input" />
<br /><br />
<input type="text" placeholder="Enter a value" class="sm" value="Small" />
<input type="text" placeholder="Enter a value" class="lg" value="A large input" />
<br /><br />
<input type="text" placeholder="Enter a value" class="sm numeric" value="10.9" />
</mct-example>
</div>
</div>
@ -62,14 +60,14 @@
</div>
<br />
<div style="position: relative; height: 100px">
<textarea placeholder="Enter a value">A previously entered value</textarea>
<textarea placeholder="Enter a value">An entered value</textarea>
</div>
<br /><br />
<textarea placeholder="Enter a value" class="sm">A sm textarea</textarea>
<textarea placeholder="Enter a value" class="sm">A small textarea</textarea>
<br /><br />
<textarea placeholder="Enter a value" class="med">A med textarea</textarea>
<textarea placeholder="Enter a value" class="med">A medium textarea</textarea>
<br /><br />
<textarea placeholder="Enter a value" class="lg">A lg textarea</textarea>
<textarea placeholder="Enter a value" class="lg">A large textarea</textarea>
</mct-example>
</div>
</div>

10
example/styleguide/res/templates/mct-example.html
View File

@ -1,6 +1,8 @@
<div class="col">
<h3>Markup</h3>
<pre><code></code></pre>
<h3>Example</h3>
<div></div>
<h3>Markup</h3>
<span class="w-markup">
<pre></pre>
</span>
<h3>Example</h3>
<div></div>
</div>

2
example/styleguide/src/MCTExample.js
View File

@ -6,7 +6,7 @@ define([
function MCTExample() {
function link($scope, $element, $attrs, controller, $transclude) {
var codeEl = $element.find('code');
var codeEl = $element.find('pre');
var exampleEl = $element.find('div');
$transclude(function (clone) {