From f00182968b6d3b10aac49a62c18117b737dbdd81 Mon Sep 17 00:00:00 2001 From: Charles Hacskaylo Date: Fri, 27 Jan 2017 18:19:44 -0800 Subject: [PATCH] [Frontend] WIP Style Guide Fixes #1233 Theme-based styling added; significant mods to layout; Content for controls page; --- example/styleguide/bundle.js | 8 ++- ...tyle-guide.scss => _style-guide-base.scss} | 43 ++++++++++++-- .../res/sass/style-guide-espresso.scss | 33 +++++++++++ .../styleguide/res/sass/style-guide-snow.scss | 33 +++++++++++ .../styleguide/res/templates/controls.html | 58 ++++++++++++++++++- 5 files changed, 165 insertions(+), 10 deletions(-) rename example/styleguide/res/sass/{style-guide.scss => _style-guide-base.scss} (70%) create mode 100644 example/styleguide/res/sass/style-guide-espresso.scss create mode 100644 example/styleguide/res/sass/style-guide-snow.scss diff --git a/example/styleguide/bundle.js b/example/styleguide/bundle.js index 15a6089e99..af1ada711d 100644 --- a/example/styleguide/bundle.js +++ b/example/styleguide/bundle.js @@ -73,8 +73,12 @@ define([ ], "stylesheets": [ { - "stylesheetUrl": "css/style-guide.css", - "priority": "mandatory" + "stylesheetUrl": "css/style-guide-espresso.css", + "theme": "espresso" + }, + { + "stylesheetUrl": "css/time-conductor-snow.css", + "theme": "snow" } ] } diff --git a/example/styleguide/res/sass/style-guide.scss b/example/styleguide/res/sass/_style-guide-base.scss similarity index 70% rename from example/styleguide/res/sass/style-guide.scss rename to example/styleguide/res/sass/_style-guide-base.scss index 8d79c1847c..23a6443e62 100644 --- a/example/styleguide/res/sass/style-guide.scss +++ b/example/styleguide/res/sass/_style-guide-base.scss @@ -19,16 +19,44 @@ * this source code distribution or the Licensing information page available * at runtime from the About dialog for additional information. *****************************************************************************/ -@import "bourbon"; -@import "../../../../platform/commonUI/general/res/sass/constants"; - .l-style-guide { font-size: 0.9em; text-align: justify; margin: auto 10%; - h1, h2, h3 { + h1, h2 { + color: pullForward($colorBodyFg, 20%); + } + h2 { + font-size: 1.25em; + } + + + h3 { + //border-bottom: 1px solid $colorInteriorBorder; + font-size: 0.9em; + margin: $interiorMargin 0; + &:not(first-child) { margin-top: $interiorMargin * 2; } + text-transform: uppercase; + } + + code, + pre { + background-color: pushBack($colorBodyBg, 20%); + display: inline-block; + font-size: 0.8em; + } + + code { + border-radius: $controlCr; + padding: 1px $interiorMargin; + } + + pre { + border-radius: $interiorMargin; + margin: 0; + padding: $interiorMargin $interiorMarginLg; } .doc-title { @@ -47,7 +75,12 @@ .col { @include flex(1 1 auto); - &:not(:last-child) { margin-right: $interiorMargin * 4; } + &:not(:last-child) { + $v: $interiorMargin * 4; + border-right: 1px solid $colorInteriorBorder; + margin-right: $v; + padding-right: $v; + } min-width: 300px; img { width: 100%; } } diff --git a/example/styleguide/res/sass/style-guide-espresso.scss b/example/styleguide/res/sass/style-guide-espresso.scss new file mode 100644 index 0000000000..0ed5025d71 --- /dev/null +++ b/example/styleguide/res/sass/style-guide-espresso.scss @@ -0,0 +1,33 @@ +/***************************************************************************** + * Open MCT, Copyright (c) 2014-2015, United States Government + * as represented by the Administrator of the National Aeronautics and Space + * Administration. All rights reserved. + * + * Open MCT is licensed under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * http://www.apache.org/licenses/LICENSE-2.0. + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT + * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the + * License for the specific language governing permissions and limitations + * under the License. + * + * Open MCT includes source code licensed under additional open source + * licenses. See the Open Source Licenses file (LICENSES.md) included with + * this source code distribution or the Licensing information page available + * at runtime from the About dialog for additional information. + *****************************************************************************/ +@import "bourbon"; +@import "../../../../platform/commonUI/general/res/sass/constants"; +@import "../../../../platform/commonUI/general/res/sass/mixins"; +@import "../../../../platform/commonUI/themes/espresso/res/sass/constants"; +@import "../../../../platform/commonUI/themes/espresso/res/sass/mixins"; +@import "../../../../platform/commonUI/general/res/sass/glyphs"; +@import "../../../../platform/commonUI/general/res/sass/icons"; + +// Thematic constants +//$colorHeaders: pullForward($colorBodyFg, 30%); + +@import "style-guide-base"; \ No newline at end of file diff --git a/example/styleguide/res/sass/style-guide-snow.scss b/example/styleguide/res/sass/style-guide-snow.scss new file mode 100644 index 0000000000..5caa7b0307 --- /dev/null +++ b/example/styleguide/res/sass/style-guide-snow.scss @@ -0,0 +1,33 @@ +/***************************************************************************** + * Open MCT, Copyright (c) 2014-2015, United States Government + * as represented by the Administrator of the National Aeronautics and Space + * Administration. All rights reserved. + * + * Open MCT is licensed under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * http://www.apache.org/licenses/LICENSE-2.0. + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT + * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the + * License for the specific language governing permissions and limitations + * under the License. + * + * Open MCT includes source code licensed under additional open source + * licenses. See the Open Source Licenses file (LICENSES.md) included with + * this source code distribution or the Licensing information page available + * at runtime from the About dialog for additional information. + *****************************************************************************/ +@import "bourbon"; +@import "../../../../platform/commonUI/general/res/sass/constants"; +@import "../../../../platform/commonUI/general/res/sass/mixins"; +@import "../../../../platform/commonUI/themes/snow/res/sass/constants"; +@import "../../../../platform/commonUI/themes/snow/res/sass/mixins"; +@import "../../../../platform/commonUI/general/res/sass/glyphs"; +@import "../../../../platform/commonUI/general/res/sass/icons"; + +// Thematic constants +//$colorHeaders: pullForward($colorBodyFg, 30%); + +@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 5ae3a2f221..a92d86e6ab 100644 --- a/example/styleguide/res/templates/controls.html +++ b/example/styleguide/res/templates/controls.html @@ -19,7 +19,59 @@ this source code distribution or the Licensing information page available at runtime from the About dialog for additional information. --> -
-

Open MCT Style Guide: Controls

-

This will be the Style Guide Controls page.

+
+

Open MCT Style Guide: Controls

+

Controls

+
+

Intro about controls

+
+ +
+

Standard Buttons

+
+
+

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 text is to be included, it must be within a span with class title-label.

+
+
+

Markup

+ 
+<a class="s-button icon-pencil"></a>
+<a class="s-button">Edit</a>
+<a class="s-button icon-pencil">
+    <span class="title-label">Edit</span>
+</a>
+

Examples

+ + Edit + + Edit + +
+
+
+ +
+

Button Sets

+
+
+

Notes about button sets

+
+
+

Markup

+ 
+<span class="l-btn-set">
+    <a class="s-button icon-magnify"></a>
+    <a class="s-button icon-magnify-in"></a>
+    <a class="s-button icon-magnify-out"></a>
+</span>
+

Example

+ + + + + +
+
+
\ No newline at end of file