openecomp-ui/resources/scss/common/_typography.scss

   1 /* Fonts */
   2
   3 @mixin base-font-regular() {
   4   font-family: OpenSans, OpenSans-Regular, 'Open Sans',omnes-regular, Arial, sans-serif;
   5 }
   6
   7 @mixin base-font-light() {
   8   font-family: OpenSans-Light, 'Open Sans', omnes-light, Arial, sans-serif;
   9 }
  10
  11 @mixin base-font-italic(){
  12   font-family: OpenSans-Italic, 'Open Sans', omnes-italic, Arial, sans-serif;
  13 }
  14
  15 @mixin base-font-semibold() {
  16   font-family: OpenSans-Semibold, 'Open Sans', omnes-medium, Arial, sans-serif;
  17 }
  18
  19 @mixin base-font-bold() {
  20   font-family: OpenSans-Bold, 'Open Sans', omnes-bold, Arial, sans-serif;
  21 }
  22
  23 $heading-font-1: 28px;
  24 $heading-font-2: 24px;
  25 $heading-font-3: 20px;
  26 $heading-font-4: 18px;
  27 $heading-font-5: 16px;
  28
  29 $body-font-1: 14px;
  30 $body-font-2: 13px;
  31 $body-font-3: 12px;
  32 $body-font-4: 10px;
  33
  34 $icon-font-size: 10px;
  35 $icon-font-family: Arial;
  36
  37
  38 .heading-1 {
  39   @include base-font-light;
  40   font-size: $heading-font-1;
  41 }
  42
  43 .heading-2 {
  44   @include base-font-light;
  45   font-size: $heading-font-2;
  46 }
  47
  48 .heading-3-light {
  49   @include base-font-light;
  50   font-size: $heading-font-3;
  51   @extend .text-uppercase !optional;
  52 }
  53
  54 .heading-3 {
  55   @include base-font-regular;
  56   font-size: $heading-font-3;
  57   @extend .text-uppercase !optional;
  58 }
  59
  60 .heading-3-semibold {
  61   @include base-font-semibold;
  62   font-size: $heading-font-3;
  63   @extend .text-uppercase !optional;
  64 }
  65
  66 .heading-4 {
  67   @include base-font-regular;
  68   font-size: $heading-font-4;
  69 }
  70
  71 .heading-4-semibold {
  72   @include base-font-semibold;
  73   font-size: $heading-font-4;
  74 }
  75
  76 .heading-5 {
  77   @include base-font-regular;
  78   font-size: $heading-font-5;
  79 }
  80
  81 .heading-5-semibold {
  82   @include base-font-semibold;
  83   font-size: $heading-font-5;
  84 }
  85
  86 .body-1 {
  87   @include base-font-regular;
  88   font-size: $body-font-1;
  89 }
  90
  91 .body-1-semibold {
  92   @include base-font-semibold;
  93   font-size: $body-font-1;
  94 }
  95
  96 .body-1-light {
  97   @include base-font-light;
  98   font-size: $body-font-1;
  99 }
 100
 101 .body-2 {
 102   @include base-font-regular;
 103   font-size: $body-font-2;
 104 }
 105
 106 .body-2-semibold {
 107   @include base-font-semibold;
 108   font-size: $body-font-2;
 109 }
 110
 111 .body-3 {
 112   @include base-font-regular;
 113   font-size: $body-font-3;
 114 }
 115
 116 .body-3-semibold {
 117   @include base-font-semibold;
 118   font-size: $body-font-3;
 119 }
 120
 121 .body-4 {
 122   @include base-font-regular;
 123   font-size: $body-font-4;
 124 }
 125
 126 .body-4-semibold {
 127   @include base-font-semibold;
 128   font-size: $body-font-4;
 129 }
 130
 131 .body-3-light {
 132   @include base-font-light;
 133   font-size: $body-font-3;
 134 }
 135
 136
 137 .warning-text {
 138   color: $yellow;
 139 }
 140 .error-text {
 141   color: $red;
 142 }