digitransit-ui/sass/base/_base.scss

/* Override foundation base */
$column-gutter: 20px;
$global-padding: 10px;
$foundation-version: $font-family;

/* Transparency settings */
$transparency: 0.5;
$transparent-color: $white;
$spinner-size: 68px;

/* Link-button-color defaults to link-color */
$link-button-color: if(
  global-variable-exists(link-button-color),
  $link-button-color,
  $link-color
);

html {
  /* Fix font display on webkit based browsers */
  -webkit-font-smoothing: antialiased;

  /* Disable touch delay on ms-devices */
  touch-action: manipulation;
  font-size: 15px !important;
}

@media screen and (min-width: 320px) {
  html {
    font-size: calc(14px + 7 * (100vw - 320px) / 500) !important;
  }
}

@media screen and (min-width: 900px) {
  html {
    font-size: 16px !important;
  }
}

@media print {
  @page {
    size: a4 portrait;
  }

  /* TODO: Remove after foundation is removed */
  @for $i from 1 through 12 {
    div.small-#{$i} {
      width: calc(#{$i} * 100% / 12);
    }
  }
}

body {
  background-color: $background-color !important;
  font-family: $font-family;
  font-weight: $font-weight-medium;
  letter-spacing: $letter-spacing;

  /* Remove Mobile Safari automatic font size adjustments */
  text-size-adjust: 100%;
}

#main {
  background-color: $background-color;
}

#app {
  height: 100%;
  display: flex;
  flex-direction: column;

  @media print {
    display: block;
    height: auto;
  }
}

p {
  font-family: $font-family;
  font-weight: $font-weight-book;
  font-size: $font-size-normal;
  color: $black;

  /* Remove Android FontBoosting */
  max-height: 999999px;
}

a {
  color: $link-color;
}

/* HEADINGS */
h1,
.h1 {
  font-family: $heading-font-family;
  font-size: $font-size-large;
  font-weight: $font-weight-medium;
  letter-spacing: $letter-spacing-front-page;
  color: $black;
  text-transform: none;
}

h2,
.h2 {
  font-family: $heading-font-family;
  font-size: $font-size-large;
  font-weight: $font-weight-medium;
  letter-spacing: $letter-spacing-front-page;
  color: $black;
  text-transform: none;
}

h3,
.h3 {
  color: $black;
  font-family: $heading-font-family;
  font-weight: $font-weight-medium;
  font-size: $font-size-normal;
  line-height: $line-height-normal;
  margin: 0;
  text-transform: none;
}

h4,
.h4 {
  font-family: $heading-font-family;
  font-weight: $font-weight-medium;
  font-size: $font-size-xsmall;
  text-transform: uppercase;
  line-height: $line-height-normal;
  color: $black;
}

a h4,
a .h4 {
  color: $link-color;
}

h1 a {
  color: inherit;
  text-decoration: none;
}

/* SUB HEADERS */
.sub-header-h4 {
  font-family: $heading-font-family;
  font-weight: $font-weight-book;
  font-size: $font-size-small;
  margin: 0 !important;
  color: $gray;
}

.sub-header-h5 {
  font-family: $heading-font-family;
  font-weight: $font-weight-book;
  font-size: $font-size-xsmall;
  margin: 0;
  color: $gray;
}

.route-list {
  padding: 0 1em 0.25em;

  div {
    @include font-narrow-medium;

    font-size: 12pt;
    line-height: $line-height-normal;
  }
}

.transparent {
  background: rgba(0, 0, 0, $transparency) !important;
  color: $transparent-color !important;
}

div.spinner-loader {
  z-index: 40000;
  position: absolute;
  left: 50%;
  margin: $spinner-size * 0.25 0 0 $spinner-size * -0.5;
  width: $spinner-size;
  height: $spinner-size;
  background-image: $spinner-image;
  animation: spin 4s linear infinite;
  background-size: cover;
}

@keyframes spin {
  100% {
    transform: rotate(360deg);
  }
}

hr {
  clear: both;
}

body select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='9' height='9' viewBox='0 0 1024 1024'><path stroke='#{rgba($primary-font-color, 1)}' fill='#{rgba($primary-font-color, 1)}' class='path1' d='M845.224 212.621l-333.221 333.235-333.224-333.235c-40.901-40.901-107.212-40.901-148.113 0v0c-40.901 40.901-40.897 107.212 0 148.109l481.333 481.326 481.333-481.326c40.901-40.901 40.901-107.212 0-148.109v0c-40.897-40.904-107.212-40.901-148.109 0z'></path></svg>");
  background-position: right 10px top 50%;
  margin-bottom: 0;
}

.no-select {
  user-select: none;
}

/*
  Style Guidelines Page
*/
.code {
  font-family: monospace;
  font-weight: 400;
  font-size: 16px;
  color: crimson;
  padding: 0 10px;
}

.color-code {
  display: inline-block;
  padding-bottom: 20px;
}

.color-palette {
  margin-bottom: -20px;
}

.sub-header {
  font-weight: $font-weight-medium;
  font-size: 20px;
  text-transform: uppercase;
  padding: 10px 0;
}

.leaflet-container a {
  color: currentcolor;
}

.subicon-caution,
.subicon-info {
  font-size: 65%;
  position: absolute;
  bottom: -4px;
  left: -2px;

  .icon {
    display: block;
    overflow: visible;
  }
}

.subicon-caution {
  .icon {
    color: white;
    fill: $disruption-color;
    height: 13px;
    width: 13px;
  }
}

.ReactModal__Body--open {
  width: 100%;
}

.subicon-info {
  .icon {
    fill: $gray;
    height: 11px;
    width: 11px;
  }

  .icon-circle {
    stroke: white;
    stroke-width: 12;
  }
}

/*
  Use this for content only intended for screen readers
*/
.sr-only:not(:focus, :active) {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

header nav a,
header nav button {
  margin: 0;
}