summaryrefslogtreecommitdiffstats
path: root/openecomp-ui/resources/scss/common/_typography.scss
diff options
context:
space:
mode:
authorAviZi <avi.ziv@amdocs.com>2017-06-09 02:39:56 +0300
committerAviZi <avi.ziv@amdocs.com>2017-06-09 02:39:56 +0300
commit280f8015d06af1f41a3ef12e8300801c7a5e0d54 (patch)
tree9c1d3978c04cd28068f02073038c936bb49ca9e0 /openecomp-ui/resources/scss/common/_typography.scss
parentfd3821dad11780d33c5373d74c957c442489945e (diff)
[SDC-29] Amdocs OnBoard 1707 initial commit.
Change-Id: Ie4d12a3f574008b792899b368a0902a8b46b5370 Signed-off-by: AviZi <avi.ziv@amdocs.com>
Diffstat (limited to 'openecomp-ui/resources/scss/common/_typography.scss')
-rw-r--r--openecomp-ui/resources/scss/common/_typography.scss84
1 files changed, 50 insertions, 34 deletions
diff --git a/openecomp-ui/resources/scss/common/_typography.scss b/openecomp-ui/resources/scss/common/_typography.scss
index 46edfb03de..1543f0adcd 100644
--- a/openecomp-ui/resources/scss/common/_typography.scss
+++ b/openecomp-ui/resources/scss/common/_typography.scss
@@ -1,28 +1,20 @@
/* Fonts */
-@font-face {
- font-family: Omnes-Light;
- src: url('../fonts/omnes-att-light.otf');
-}
-@font-face {
- font-family: Omnes-Regular;
- src: url('../fonts/omnes-att-regular.otf');
+@mixin base-font-regular() {
+ font-family: omnes-regular, Arial, sans-serif;
}
-@font-face {
- font-family: Omnes-Medium;
- src: url('../fonts/omnes-att-medium.otf');
+@mixin base-font-light() {
+ font-family: omnes-light, Arial, sans-serif;
}
-@font-face {
- font-family: Omnes-Bold;
- src: url('../fonts/omnes-att-bold.otf');
+@mixin base-font-medium() {
+ font-family: omnes-medium, Arial, sans-serif;
}
-$base-font-regular: omnes-regular, "Omnes-Regular";
-$base-font-light: omnes-light, "Omnes-Light";
-$base-font-medium: omnes-medium, "Omnes-Medium";
-$base-font-bold: omnes-bold, "Omnes-Bold";
+@mixin base-font-bold() {
+ font-family: omnes-bold, Arial, sans-serif;
+}
$heading-font-1: 36px;
$heading-font-2: 24px;
@@ -34,82 +26,106 @@ $body-font-1: 14px;
$body-font-2: 13px;
$body-font-3: 12px;
-$icon-font-size: 10px;
-$icon-font-family: FontAwesome;
+$icon-font-size: 11px;
+$icon-font-family: Arial;
$radio-font-family: Arial;
.heading-1 {
- font-family: $base-font-light;
+ @include base-font-light;
font-size: $heading-font-1;
}
.heading-2 {
- font-family: $base-font-light;
+ @include base-font-light;
font-size: $heading-font-2;
}
.heading-3-light {
- font-family: $base-font-light;
+ @include base-font-light;
font-size: $heading-font-3;
+ @extend .text-uppercase !optional;
}
.heading-3 {
- font-family: $base-font-regular;
+ @include base-font-regular;
font-size: $heading-font-3;
+ @extend .text-uppercase !optional;
}
.heading-3-medium {
- font-family: $base-font-medium;
+ @include base-font-medium;
font-size: $heading-font-3;
+ @extend .text-uppercase !optional;
}
.heading-4 {
- font-family: $base-font-regular;
+ @include base-font-regular;
font-size: $heading-font-4;
}
.heading-4-medium {
- font-family: $base-font-medium;
+ @include base-font-medium;
font-size: $heading-font-4;
}
.heading-5 {
- font-family: $base-font-regular;
+ @include base-font-regular;
font-size: $heading-font-5;
}
.heading-5-medium {
- font-family: $base-font-medium;
+ @include base-font-medium;
font-size: $heading-font-5;
}
.body-1 {
- font-family: $base-font-regular;
+ @include base-font-regular;
font-size: $body-font-1;
}
.body-1-medium {
- font-family: $base-font-medium;
+ @include base-font-medium;
+ font-size: $body-font-1;
+}
+
+.body-1-light {
+ @include base-font-light;
font-size: $body-font-1;
}
.body-2 {
- font-family: $base-font-regular;
+ @include base-font-regular;
font-size: $body-font-2;
}
.body-2-medium {
- font-family: $base-font-medium;
+ @include base-font-medium;
font-size: $body-font-2;
}
.body-3 {
- font-family: $base-font-regular;
+ @include base-font-regular;
font-size: $body-font-3;
}
.body-3-medium {
- font-family: $base-font-medium;
+ @include base-font-medium;
font-size: $body-font-3;
}
+.body-3-light {
+ @include base-font-light;
+ font-size: $body-font-3;
+}
+
+.circle-icon-text {
+ @include base-font-medium;
+ font-size: $body-font-1;
+}
+
+.warning-text {
+ color: $orange;
+}
+.error-text {
+ color: $red;
+}