This is an automated email from the ASF dual-hosted git repository.
mcgilman pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/nifi-fds.git
The following commit(s) were added to refs/heads/master by this push:
new 605e950 [NIFI-6263] theme links style color [NIFI-6263] update
typography demo documentation
605e950 is described below
commit 605e9507a93e78dcdf80180ac578a4afff351cd0
Author: Scott Aslan <[email protected]>
AuthorDate: Fri May 3 15:51:04 2019 -0400
[NIFI-6263] theme links style color
[NIFI-6263] update typography demo documentation
This closes #20
---
platform/core/common/styles/_links.scss | 35 +++++---
platform/core/theming/_all-theme.scss | 2 +
webapp/components/flow-design-system/fds-demo.html | 97 +++++++---------------
3 files changed, 56 insertions(+), 78 deletions(-)
diff --git a/platform/core/common/styles/_links.scss
b/platform/core/common/styles/_links.scss
index 1a5896d..e46bd1f 100644
--- a/platform/core/common/styles/_links.scss
+++ b/platform/core/common/styles/_links.scss
@@ -17,19 +17,28 @@
/* Links */
-body[fds] .link {
- color: $linkColor;
- font-size: 14px;
- text-decoration: none;
- line-height: 24px;
- cursor: pointer;
-}
+@mixin fds-links-theme($theme) {
+ $primaryColor: map-get(map-get($theme, primary), 500);
+ $primaryColorHover: map-get(map-get($theme, primary), 100);
+ $accentColor: map-get(map-get($theme, accent), 500);
+ $accentColorHover: map-get(map-get($theme, accent), 100);
-body[fds] .link:hover {
- text-decoration: underline;
-}
+ body[fds] {
+ .link {
+ color: $accentColor;
+ font-size: 14px;
+ text-decoration: none;
+ line-height: 24px;
+ cursor: pointer;
+ }
+
+ .link:hover {
+ text-decoration: underline;
+ }
-body[fds] .link .disabled {
- color: $linkColorDisabled;
- text-decoration: none;
+ .link .disabled {
+ color: $linkColorDisabled;
+ text-decoration: none;
+ }
+ }
}
diff --git a/platform/core/theming/_all-theme.scss
b/platform/core/theming/_all-theme.scss
index f19a91b..27682ca 100644
--- a/platform/core/theming/_all-theme.scss
+++ b/platform/core/theming/_all-theme.scss
@@ -23,6 +23,7 @@
@import '../common/styles/inputs';
@import '../common/styles/checkboxes';
@import '../common/styles/tables';
+@import '../common/styles/links';
// Create a theme.
@mixin fds-theme($theme) {
@@ -37,4 +38,5 @@
@include fds-input-element-theme($theme);
@include fds-checkboxes-theme($theme);
@include fds-tables-theme($theme);
+ @include fds-links-theme($theme);
}
diff --git a/webapp/components/flow-design-system/fds-demo.html
b/webapp/components/flow-design-system/fds-demo.html
index c5d0a44..2f16d1e 100644
--- a/webapp/components/flow-design-system/fds-demo.html
+++ b/webapp/components/flow-design-system/fds-demo.html
@@ -43,11 +43,11 @@ limitations under the License.
// other imports
...
new ngCore.NgModule({
- imports: [
- fdsCore,
- // (optional) Additional imports
- ],
- ...
+ imports: [
+ fdsCore,
+ // (optional) Additional imports
+ ],
+ ...
})
]]>
</pre>
@@ -73,87 +73,68 @@ limitations under the License.
<mat-card-title class="pad-bottom-sm">Typography</mat-card-title>
<mat-divider></mat-divider>
<mat-card-content>
- <p class="mat-body-1">Angular Material provides <a
class="link" href="https://material.io/guidelines/style/typography.html";
target="_blank">typography</a> CSS classes you can use to create visual
consistency across your application.</p>
- <p class="mat-body-1">
- <strong>Note:</strong>
- <span>Base font size is 10px for easy rem units (1.2rem =
12px). Body font size is 14px. sp = scalable pixels.</span>
- </p>
- <h3 class="mat-title">Header Styles</h3>
- <p class="mat-body-1">To preserve semantic structures, you can
optionally style the <code><h1></code> - <code><h6></code> heading
tags with the styling classes shown below:</p>
- <p>CSS:</p>
+ <p class="mat-body-1">FDS provides typography CSS classes you
can use to create visual consistency across your application. Optionally style
tags with the classes shown below:</p>
<div layout-align="center end">
<div layout="row" layout-align="start center">
<code flex="15">.mat-display-4</code>
- <span class="mat-display-4">Light 112px</span>
+ <span class="mat-display-4">Display 4</span>
</div>
<div layout="row" layout-align="start center">
<code flex="15">.mat-display-3</code>
- <span class="mat-display-3">Regular 56px</span>
+ <span class="mat-display-3">Display 3</span>
</div>
<div layout="row" layout-align="start center">
<code flex="15">.mat-display-2</code>
- <span class="mat-display-2">Regular 45px</span>
+ <span class="mat-display-2">Display 2</span>
</div>
<div layout="row" layout-align="start center">
<code flex="15">.mat-display-1</code>
- <span class="mat-display-1">Regular 34px</span>
+ <span class="mat-display-1">Display 1</span>
</div>
<div layout="row" layout-align="start center">
<code flex="15">.mat-headline</code>
- <span class="mat-headline">Regular 24px</span>
+ <span class="mat-headline">Headline</span>
</div>
<div layout="row" layout-align="start center">
<code flex="15">.mat-title</code>
- <span class="mat-title">Medium 20px</span>
+ <span class="mat-title">Title</span>
</div>
<div layout="row" layout-align="start center">
<code flex="15">.md-subhead</code>
- <span class="md-subhead">Regular 16px</span>
+ <span class="md-subhead">Subhead</span>
</div>
- </div>
- <h3 class="mat-title">Usage</h3>
- <p>HTML:</p>
- <pre lang="html">
- <![CDATA[
- <!-- Large Heading -->
- <h1 class="mat-display-4">Roboto is the standard typeface on
Android.</h1>
- <h2 class="mat-display-3">Roboto and Noto are the standard typefaces
on Android and Chrome.</h2>
- <h3 class="mat-display-2">Noto is the standard typeface for all
languages on Chrome and Android for all languages not covered by Roboto.</h3>
- <!-- Medium Heading -->
- <h1 class="mat-display-1">Roboto is the standard typeface on
Android.</h1>
- <h2 class="mat-headline">Roboto and Noto are the standard typefaces on
Android and Chrome.</h2>
- <h3 class="md-subhead">Noto is the standard typeface for all languages
on Chrome and Android for all languages not covered by Roboto.</h3>
- ]]>
- </pre>
- <h3 class="mat-title">Body Copy</h3>
- <p>CSS:</p>
- <div class="mat-body-1" layout-align="center end">
<div layout="row" layout-align="start center">
- <code flex="15">.mat-body-1</code>
- <span class="mat-body-1">Regular 14px</span>
+ <code flex="15">.link</code>
+ <span class="link">Link</span>
</div>
<div layout="row" layout-align="start center">
- <code flex="15">.mat-body-2</code>
- <span class="mat-body-2">Medium 14px</span>
+ <code flex="15">.mat-body-1</code>
+ <span class="mat-body-1">Body 1</span>
</div>
<div layout="row" layout-align="start center">
- <code flex="15">.mat-button</code>
- <span class="mat-button mat-raised">Medium 14px</span>
+ <code flex="15">.mat-body-2</code>
+ <span class="mat-body-2">Body 2</span>
</div>
<div layout="row" layout-align="start center">
<code flex="15">.mat-caption</code>
- <span class="mat-caption">Regular 12px</span>
+ <span class="mat-caption">Caption</span>
</div>
</div>
<h3 class="mat-title">Usage</h3>
<p>HTML:</p>
- <pre lang="html">
+ <pre lang="html">
<![CDATA[
- <!-- body copy -->
- <p class="mat-body-1">Roboto is the standard typeface on Android.</p>
- <p class="mat-body-2">Roboto and Noto are the standard typefaces on
Android and Chrome.</p>
- <p class="mat-button">Roboto and Noto are the standard typefaces on
Android and Chrome.</p>
- <p class="mat-caption">Noto is the standard typeface for all languages
on Chrome and Android for all languages not covered by Roboto.</p>
+ <span class="mat-display-4">Display 4</span>
+ <span class="mat-display-3">Display 3</span>
+ <span class="mat-display-2">Display 2</span>
+ <span class="mat-display-1">Display 1</span>
+ <span class="mat-headline">Headline</span>
+ <span class="md-title">Title</span>
+ <span class="md-subhead">Subhead</span>
+ <span class="link">Link</span>
+ <span class="mat-body-1">Body 1</span>
+ <span class="mat-body-2">Body 2</span>
+ <span class="mat-caption">Caption</span>
]]>
</pre>
</mat-card-content>
@@ -206,20 +187,6 @@ limitations under the License.
</mat-card-content>
</mat-card>
<mat-card>
- <mat-card-title class="pad-bottom-sm">Links</mat-card-title>
- <mat-divider></mat-divider>
- <mat-card-content>
- <a class="link" href="https://material.angular.io";
target="_blank">Angular Material</a>
- <h3 class="mat-title">Usage</h3>
- <p>HTML:</p>
- <pre lang="html">
- <![CDATA[
- <a class="link" href="https://material.angular.io";
target="_blank">Angular Material</a>
- ]]>
- </pre>
- </mat-card-content>
- </mat-card>
- <mat-card>
<mat-card-title class="pad-bottom-sm">Flat Buttons</mat-card-title>
<mat-divider></mat-divider>
<mat-card-content>
