scinote-web/app/assets/stylesheets/shared_styles/constants/fonts.scss

// scss-lint:disable ImportantRule

$font-family-inter: "SN Inter";
$font-family-sans-serif: "Open Sans", Arial, Helvetica, sans-serif;
$font-family-serif: Georgia, "Times New Roman", Times, serif;
$font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace;
$font-family-base: $font-family-inter;
$font-family-icons: "Font Awesome 5 Free";
$font-size-base: 16px;
$headings-font-weight: bold;

$font-size-h1: 24px;
$font-size-h2: 18px;
$font-size-h3: $font-size-base;
$font-size-h4: $font-size-base;
$font-size-h5: $font-size-base;
$font-size-h6: 12px;

$font-fas-check: "\f00c";
$font-fas-exclamation-triangle: "\f071";
$font-fas-lock: "\f023";
$font-fas-angle-left: "\f104";
$font-fas-angle-right: "\f105";
$font-fas-angle-double-left: "\f100";
$font-fas-angle-double-right: "\f101";
$font-fas-exclamation-circle: "\f06a";
$font-fas-caret-up: "\f0d8";
$font-fas-plus: "\f02b";

$sn-icon-left: "\e932";
$sn-icon-right: "\e931";
$sn-icon-check: "\e95f";


/// Hack for old icons
.fas {
  align-items: center;
  display: inline-flex !important;
  justify-content: center;
  height: 24px;
  width: 24px;

}

.sn-icon {
  font-size: 24px !important;
  vertical-align: middle;

  &.mini {
    font-size: 16px !important;
  }
}

.sn-checkbox-icon {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  height: 1rem;
  width: 1rem;

  &.unchecked {
    background-image: asset-url("checkbox/default.svg");
  }

  &.checked {
    background-image: asset-url("checkbox/checked.svg");
  }

  &.disabled {
    background-image: asset-url("checkbox/disabled.svg");
  }

  &.indeterminate {
    background-image: asset-url("checkbox/indeterminate.svg");
  }
}

@mixin font-h1 {
  font-size: 24px;
  font-weight: bold;
}

@mixin font-h2 {
  font-size: 18px;
  font-weight: bold;
}

@mixin font-h3 {
  font-size: $font-size-base;
  font-weight: bold;
}

@mixin font-main {
  font-size: $font-size-base;
}

@mixin font-button {
  font-size: 14px;
}

@mixin font-small {
  font-size: 12px;
}

@mixin font-awesome {
  font-family: "Font Awesome 5 Free";
  font-weight: 501;
}

@mixin font-sn-icon {
  font-family: "SN-icon-font";
  font-size: 24px !important;
}

html {
  font-size: 16px !important;
}

// $font-size-large: ceil(($font-size-base * 1.1)); //16px
// $font-size-small: ceil(($font-size-base * .9)); //13px
// $font-size-h1: floor(($font-size-base * 2.6)); //36px
// $font-size-h2: floor(($font-size-base * 2.15)); //30px
// $font-size-h3: ceil(($font-size-base * 1.7)); //24px
// $font-size-h4: ceil(($font-size-base * 1.25)); //18px
// $font-size-h5: $font-size-base; //14px
// $font-size-h6: ceil(($font-size-base * .85)); //12px
// $line-height-base: 1.428571429;
// $line-height-computed: floor(($font-size-base * $line-height-base));
// $headings-font-family: inherit;
// $headings-font-weight: 500;
// $headings-line-height: 1.1;
// $headings-color: inherit;

h1 {
  @include font-h1;
}

h2 {
  @include font-h2;
}

h3 {
  @include font-h3;
}

h4 {
  @include font-h3;
}

h5 {
  @include font-h3;
}

h6 {
  @include font-h3;
}