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

Controls

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

Glyphs

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:

    -
  • Symbols should be created at 512 pixels high, and no more than 512 pixels wide. This size is based on a "crisp" 16px approach.
  • +
  • Symbols should be created at 512 pixels high, and no more than 512 pixels wide. This size is based on a "crisp" 16px approach. Find out more about crisp symbol fonts.
  • In general, the symbol should occupy most of a square area as possible; avoid symbol aspect ratios that are squat or tall.
  • For consistency and legibility, symbols are designed as mostly solid shapes. Avoid using thin lines or fine detail that will be lost when the icon is sized down. In general, no stroke should be less than 32 pixels.
  • Symbols should be legible down to a minimum of 12 x 12 pixels.
  • diff --git a/example/styleguide/res/templates/input.html b/example/styleguide/res/templates/input.html index f93abfc6f1..1984e42d6b 100644 --- a/example/styleguide/res/templates/input.html +++ b/example/styleguide/res/templates/input.html @@ -20,7 +20,7 @@ at runtime from the About dialog for additional information. -->
    -

    Open MCT Style Guide: Text Input

    +

    Open MCT Style Guide

    Text Input

    Intro about text input elements.