diff --git a/example/styleguide/bundle.js b/example/styleguide/bundle.js index 17d8a2c478..43135f0ac3 100644 --- a/example/styleguide/bundle.js +++ b/example/styleguide/bundle.js @@ -13,36 +13,16 @@ define([ "extensions": { "types": [ - { - "key": "styleguide.intro", - "name": "Introduction", - "cssclass": "icon-page", - "description": "Introduction and overview to the style guide." - }, - { - "key": "styleguide.controls", - "name": "Controls", - "cssclass": "icon-page", - "description": "Open MCT Controls" - } + { "key": "styleguide.intro", "name": "Introduction", "cssclass": "icon-page", "description": "Introduction and overview to the style guide" }, + { "key": "styleguide.controls", "name": "Controls", "cssclass": "icon-page", "description": "Buttons, selects, menus, etc." }, + { "key": "styleguide.input", "name": "Text Inputs", "cssclass": "icon-page", "description": "Various text inputs" }, + { "key": "styleguide.glyphs", "name": "Glyphs", "cssclass": "icon-page", "description": "Glyphs overview" } ], "views": [ - { - "key": "styleguide.intro", - "type": "styleguide.intro", - "cssclass": "icon-page", - "name": "Introduction", - "templateUrl": "templates/intro.html", - "editable": false - }, - { - "key": "styleguide.controls", - "type": "styleguide.controls", - "cssclass": "icon-page", - "name": "Controls", - "templateUrl": "templates/controls.html", - "editable": false - } + { "key": "styleguide.intro", "type": "styleguide.intro", "name": "Introduction", "cssclass": "icon-page", "templateUrl": "templates/intro.html", "editable": false }, + { "key": "styleguide.controls", "type": "styleguide.controls", "name": "Controls", "cssclass": "icon-page", "templateUrl": "templates/controls.html", "editable": false }, + { "key": "styleguide.input", "type": "styleguide.input", "name": "Text Inputs", "cssclass": "icon-page", "templateUrl": "templates/input.html", "editable": false }, + { "key": "styleguide.glyphs", "type": "styleguide.glyphs", "name": "Glyphs", "cssclass": "icon-page", "templateUrl": "templates/glyphs.html", "editable": false } ], "roots": [ { @@ -58,7 +38,9 @@ define([ "name": "Style Guide", "composition": [ "intro", - "controls" + "controls", + "input", + "glyphs" ] } } diff --git a/example/styleguide/res/sass/_style-guide-base.scss b/example/styleguide/res/sass/_style-guide-base.scss index 8280bcae9a..449a7f0e3b 100644 --- a/example/styleguide/res/sass/_style-guide-base.scss +++ b/example/styleguide/res/sass/_style-guide-base.scss @@ -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%; } } } diff --git a/example/styleguide/res/templates/controls.html b/example/styleguide/res/templates/controls.html index a24d597094..28a36ba4aa 100644 --- a/example/styleguide/res/templates/controls.html +++ b/example/styleguide/res/templates/controls.html @@ -33,9 +33,9 @@

Use a standard button in locations where there's sufficient room and you must make it clear that the element is an interactive button element. Buttons can be displayed with only an icon, only text, or with icon and text combined.

Use an icon whenever possible to aid the user's recognition and recall. If both and icon and text are to be used, the text must be within a span with class .title-label.

- -Edit - + +Edit + Edit @@ -70,6 +70,16 @@ +
+

Icon-only Buttons

+
+
+

When a button is presented within another control it may be advantageous to avoid visual clutter by using an icon-only button. These type of controls present an icon without the "base" of standard buttons. Icon-only buttons should only be used in a context where they are clearly an interactive element and not an object-type identifier, and should not be used with text.

+
+ + +
+

Checkboxes

@@ -133,30 +143,6 @@
- -
-
- -
-

Text Inputs

-
-
-

Text inputs have a consistent look-and-feel across the application. The input's placeholder is styled to appear visually different from an entered value.

-

A variety of size styles are available: .lg, .med and .sm. Numeric inputs that benefit from right-alignment can be styled by adding .numeric.

-
- -

- -

- -

- -

- -

- -

-
diff --git a/example/styleguide/res/templates/glyphs.html b/example/styleguide/res/templates/glyphs.html new file mode 100644 index 0000000000..17d9c3baf4 --- /dev/null +++ b/example/styleguide/res/templates/glyphs.html @@ -0,0 +1,193 @@ + +
+ +
+

Open MCT Style Guide: Glyphs

+

Glyphs

+
+

Intro about glyphs.

+
+ +
+

How to Use Glyphs

+
+
+

The best utilization of glyphs is to just include their class in the button or other element you want to use them in.

+
+ + +
+
+ +
+

General User Interface Glyphs

+

Glyphs suitable for denoting general user interface verbs and nouns.

+
+
+
+ + + + + +
Meaning{{glyph.meaning}}
Class.{{glyph.cssClass}}
CSS Content\{{glyph.cssContent}}
HTML Entity{{glyph.htmlEntity}}
+
+
+
+ +
+

Control Glyphs

+

Glyphs created for use in various controls.

+
+
+
+ + + + + +
Meaning{{glyph.meaning}}
Class.{{glyph.cssClass}}
CSS Content\{{glyph.cssContent}}
HTML Entity{{glyph.htmlEntity}}
+
+
+
+ +
+

Object Type Glyphs

+

These glyphs are reserved exclusively to denote types of objects in the application. Only use them if you are referring to a pre-existing object type.

+
+
+
+ + + + + +
Meaning{{glyph.meaning}}
Class.{{glyph.cssClass}}
CSS Content\{{glyph.cssContent}}
HTML Entity{{glyph.htmlEntity}}
+
+
+
+ +
+ diff --git a/example/styleguide/res/templates/input.html b/example/styleguide/res/templates/input.html new file mode 100644 index 0000000000..7b99536bac --- /dev/null +++ b/example/styleguide/res/templates/input.html @@ -0,0 +1,77 @@ + +
+

Open MCT Style Guide: Text Input

+

Text Input

+
+

Intro about text input elements.

+
+ +
+

Text Inputs

+
+
+

Text inputs have a consistent look-and-feel across the application. The input's placeholder is styled to appear visually different from an entered value.

+

A variety of size styles are available: .lg, .med and .sm. Numeric inputs that benefit from right-alignment can be styled by adding .numeric.

+
+ +

+ +

+ +

+ +

+ +

+ +

+ + +
+
+ +
+

Textareas

+
+
+

Textareas are styled in a similar fashion to text inputs. The textarea's placeholder is styled to appear visually different from an entered value.

+

By default, textareas are styled to expand to 100% of the width and height of their container; additionally there are three size styles available that control the height of the element: .lg, .med and .sm.

+
+
+ +
+
+
+ +
+

+ +

+ +

+ + +
+
+
+ diff --git a/example/styleguide/src/ExampleStyleGuideModelProvider.js b/example/styleguide/src/ExampleStyleGuideModelProvider.js index 7e3ef635c6..b7fbac6fd7 100644 --- a/example/styleguide/src/ExampleStyleGuideModelProvider.js +++ b/example/styleguide/src/ExampleStyleGuideModelProvider.js @@ -30,15 +30,10 @@ define( var pages = {}; // Add pages - pages['intro'] = { - name: "Intro", - type: "styleguide.intro" - }; - - pages['controls'] = { - name: "Controls", - type: "styleguide.controls" - }; + pages['intro'] = { name: "Introduction", type: "styleguide.intro" }; + pages['controls'] = { name: "Controls", type: "styleguide.controls" }; + pages['input'] = { name: "Text Inputs", type: "styleguide.input" }; + pages['glyphs'] = { name: "Glyphs", type: "styleguide.glyphs" }; return { getModels: function () {