resources/scss/common/_typography.scss

   1 /**
   2  * ============LICENSE_START=======================================================
   3  * org.onap.aai
   4  * ================================================================================
   5  * Copyright © 2017-2018 AT&T Intellectual Property. All rights reserved.
   6  * Copyright © 2017-2018 Amdocs
   7  * ================================================================================
   8  * Licensed under the Apache License, Version 2.0 (the "License");
   9  * you may not use this file except in compliance with the License.
  10  * You may obtain a copy of the License at
  11  *
  12  *       http://www.apache.org/licenses/LICENSE-2.0
  13  *
  14  * Unless required by applicable law or agreed to in writing, software
  15  * distributed under the License is distributed on an "AS IS" BASIS,
  16  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  17  * See the License for the specific language governing permissions and
  18  * limitations under the License.
  19  * ============LICENSE_END=========================================================
  20  */
  21 $base-font-regular: "Arial";
  22 $base-font-light: "Arial";
  23 $base-font-medium: "Arial";
  24 $base-font-bold: "Arial";
  25
  26 $heading-font-1: 24px;
  27 $heading-font-2: 20px;
  28 $heading-font-3: 18px;
  29 $heading-font-4: 16px;
  30
  31 $body-font-1: 16px;
  32 $body-font-2: 14px;
  33 $body-font-3: 13px;
  34 $body-font-4: 12px;
  35
  36 $focus-font-1: 55px;
  37 $focus-font-2: 50px;
  38 $focus-font-3: 45px;
  39 $focus-font-4: 40px;
  40
  41 .heading-1 {
  42   font-family: $base-font-light;
  43   font-size: $heading-font-1;
  44 }
  45
  46 .heading-2 {
  47   font-family: $base-font-light;
  48   font-size: $heading-font-2;
  49 }
  50
  51 .heading-3 {
  52   font-family: $base-font-regular;
  53   font-size: $heading-font-3;
  54 }
  55
  56 .heading-3-medium {
  57   font-family: $base-font-medium;
  58   font-size: $heading-font-3;
  59 }
  60
  61 .heading-4 {
  62   font-family: $base-font-regular;
  63   font-size: $heading-font-4;
  64 }
  65
  66 .heading-4-medium {
  67   font-family: $base-font-medium;
  68   font-size: $heading-font-4;
  69 }
  70
  71 .body-1 {
  72   font-family: $base-font-regular;
  73   font-size: $body-font-1;
  74 }
  75
  76 .body-1-medium {
  77   font-family: $base-font-medium;
  78   font-size: $body-font-1;
  79 }
  80
  81 .body-2 {
  82   font-family: $base-font-regular;
  83   font-size: $body-font-2;
  84 }
  85
  86 .body-2-medium {
  87   font-family: $base-font-medium;
  88   font-size: $body-font-2;
  89 }
  90
  91 .body-3 {
  92   font-family: $base-font-regular;
  93   font-size: $body-font-3;
  94 }
  95
  96 .body-3-medium {
  97   font-family: $base-font-medium;
  98   font-size: $body-font-3;
  99 }
 100