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

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