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,
   5         sans-serif;
   6 }
   7
   8 @mixin base-font-light() {
   9     font-family: OpenSans-Light, 'Open Sans', omnes-light, Arial, sans-serif;
  10 }
  11
  12 @mixin base-font-italic() {
  13     font-family: OpenSans-Italic, 'Open Sans', omnes-italic, Arial, sans-serif;
  14 }
  15
  16 @mixin base-font-semibold() {
  17     font-family: OpenSans-Semibold, 'Open Sans', omnes-medium, Arial, sans-serif;
  18 }
  19
  20 @mixin base-font-bold() {
  21     font-family: OpenSans-Bold, 'Open Sans', omnes-bold, Arial, sans-serif;
  22 }
  23
  24 $heading-font-1: 28px;
  25 $heading-font-2: 24px;
  26 $heading-font-3: 20px;
  27 $heading-font-4: 18px;
  28 $heading-font-5: 16px;
  29
  30 $body-font-1: 14px;
  31 $body-font-2: 13px;
  32 $body-font-3: 12px;
  33 $body-font-4: 10px;
  34
  35 $icon-font-size: 10px;
  36 $icon-font-family: Arial;
  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 .warning-text {
 137     color: $yellow;
 138 }
 139 .error-text {
 140     color: $red;
 141 }