diff --git a/example/styleguide/res/sass/_style-guide-base.scss b/example/styleguide/res/sass/_style-guide-base.scss index 678da448a4..cc273e8ba1 100644 --- a/example/styleguide/res/sass/_style-guide-base.scss +++ b/example/styleguide/res/sass/_style-guide-base.scss @@ -24,6 +24,10 @@ text-align: justify; margin: auto 10%; + a.link { + color: $colorKey; + } + h1, h2 { color: pullForward($colorBodyFg, 20%); } @@ -130,11 +134,10 @@ // Example grid of glyphs .items-holder.grid { .item.glyph-item { - $d: 200px; margin-bottom: 50px; margin-right: 10px; - height: $d; - width: $d; + height: 200px; + width: 225px; text-align: left; .glyph { color: $colorGlyphExample; @@ -143,10 +146,13 @@ text-align: center; } - table.details td.label { - color: pushBack($colorBodyFg, 10%); - text-transform: uppercase; - white-space: nowrap; + table.details td { + font-size: inherit; + &.label { + color: pushBack($colorBodyFg, 10%); + text-transform: uppercase; + white-space: nowrap; + } } } } diff --git a/example/styleguide/res/sass/style-guide-espresso.scss b/example/styleguide/res/sass/style-guide-espresso.scss index d043d1009b..9ceb5a5906 100644 --- a/example/styleguide/res/sass/style-guide-espresso.scss +++ b/example/styleguide/res/sass/style-guide-espresso.scss @@ -28,7 +28,7 @@ @import "../../../../platform/commonUI/general/res/sass/icons"; // Thematic constants -$colorCode: rgba(black, 0.1); +$colorCode: rgba(black, 0.2); $colorGlyphExample: #fff; @import "style-guide-base"; \ No newline at end of file diff --git a/example/styleguide/res/templates/controls.html b/example/styleguide/res/templates/controls.html index 28a36ba4aa..8dab7368e7 100644 --- a/example/styleguide/res/templates/controls.html +++ b/example/styleguide/res/templates/controls.html @@ -20,7 +20,7 @@ at runtime from the About dialog for additional information. -->
Open MCT Style Guide: Controls
+Open MCT Style Guide
Intro about controls
diff --git a/example/styleguide/res/templates/glyphs.html b/example/styleguide/res/templates/glyphs.html index d841467618..372b7ec94d 100644 --- a/example/styleguide/res/templates/glyphs.html +++ b/example/styleguide/res/templates/glyphs.html @@ -124,13 +124,13 @@ ">Open MCT Style Guide: Glyphs
+Open MCT Style Guide
Symbolic glyphs are used extensively in Open MCT to call attention to interactive elements, identify objects, and aid in visual recall. Glyphs are made available in a custom symbols font, and have associated CSS classes for their usage. Using a font in this way (versus using images or sprites) has advantages in that each symbol is in effect a scalable vector that can be sized up or down as needed. Color can also quite easily be applied via CSS.
New glyphs can be added if needed. Take care to observe the following guidelines:
Open MCT Style Guide: Text Input
+Open MCT Style Guide
Intro about text input elements.