czydojade/front/styles/main.scss

$border-radius:    0;
$border-radius-lg: $border-radius;
$border-radius-sm: $border-radius;

$danger: #cd2e12;

@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";

$primary: #005ea8;
$primary-gradient: linear-gradient(120deg, #0083c5 10%, #005ea8 90%);
$danger-gradient: linear-gradient(120deg, $danger 10%, darken($danger, 10%) 90%);

$custom-control-indicator-checked-bg: $dark;
$custom-control-indicator-active-bg: $dark;
$small-font-size: $font-size-base * 0.8;

$line-types: (
  'trolleybus': #419517,
  'tram':       #cd2e12,
  'bus':        $primary,
  'train':      $yellow,
  'unknown':    $dark
);

$default-spacing: .5rem;

$alert-margin-bottom:    $default-spacing;
$headings-margin-bottom: $default-spacing;

$container-max-widths: map-merge($container-max-widths, ( xl: 1320px ));

$link-color: #005ea8;
$grid-gutter-width: $spacer * 2;

@import "~bootstrap/scss/bootstrap";

@mixin headings {
  h1, h2, h3, h4, h5, h6 {
    @content
  }
}

@mixin direct-headings {
  > h1, > h2, > h3, > h4, > h5, > h6 {
    @content
  }
}

@mixin spacing($spacing: .25em) {
  margin-left: $spacing;
  &:first-child {
    margin-left: 0;
  }
}

@mixin no-scrollbars {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none;  /* Internet Explorer 10+ */

  &::-webkit-scrollbar { /* WebKit */
    width: 0;
    height: 0;
  }
}

@mixin active {
  &:hover, &:active, &:focus, #{&}--active {
    @content
  }
}

@mixin flex-with-spacing($spacing) {
  display: flex;

  & > *:not(:last-child) {
    margin-right: $spacing;
  }
}

@mixin position($position, $top: inherit, $right: inherit, $bottom: inherit, $left: inherit) {
  $right:  if($right == inherit, $top, $right);
  $bottom: if($bottom == inherit, $top, $bottom);
  $left:   if($left == inherit, $right, $left);

  position: $position;

  top: $top;
  right: $right;
  left: $left;
  bottom: $bottom;
}

@import "common";
@import "stop";
@import "departure";
@import "line";
@import "controls";
@import "animations";
@import "form";
@import "favourites";
@import "trip";
@import "dragscroll";
@import "map";

@import "ui/switch";
@import "ui/popup";
@import "ui/modal";

@import "page/provider-picker";

html, body {
  overscroll-behavior-y: contain;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: url("../images/background.png") repeat-x center bottom 63px;

  &.contains-modal {
    overflow-y: hidden;
  }

  main {
    flex: 1 1 auto;
    position: relative;

    > * {
      transition: opacity .3s ease-in-out;
    }
  }

  main::after {
    transition: opacity .3s ease-in-out;
    position: absolute;
    top: 2rem;
    bottom: 2rem;
    right: 2rem;
    left: 2rem;
    content: "";
    opacity: 0;
    background: url("../images/logo.png") center center no-repeat;
    background-size: contain;
    display: none;
  }

  main.not-ready {
    > * {
      opacity: 0;
    }

    &::after {
      opacity: 1 !important;
      display: block;
    }
  }

  .attribution {
    font-size: small;
    color: $text-muted;
    text-align: right;
    margin-top: 0.5rem;
  }

  footer {
    @extend .flex;
    flex-wrap: wrap;

    font-size: $font-size-sm;
    padding: $alert-padding-y $alert-padding-y;
    transition: all .5s ease;
    opacity: .15;
    filter: grayscale(100%);

    &:hover {
      opacity: 1;
      filter: grayscale(0%);
    }

    img {
      height: 1.5rem;
    }

    > * {
      flex: 1 1 auto;
      padding: .4rem 0;
    }
  }
}

#app {
  margin-top: $grid-gutter-width / 2;
}

@include media-breakpoint-up('md') {
  #app {
    padding-top: 4rem;
    padding-top: 2rem;
  }

  body footer > * {
    flex: 0 1 auto;
  }
}