totp/src/index.scss

@import 'bootstrap/scss/_functions.scss';
@import 'bootstrap/scss/_variables.scss';
@import 'bootstrap/scss/_variables-dark.scss';
@import 'bootstrap/scss/_maps.scss';
@import 'bootstrap/scss/_mixins.scss';
@import 'bootstrap/scss/_utilities.scss';

@import 'bootstrap/scss/_root.scss';
@import 'bootstrap/scss/_reboot.scss';
@import 'bootstrap/scss/_grid.scss';
@import 'bootstrap/scss/_containers.scss';
@import 'bootstrap/scss/_navbar.scss';
@import 'bootstrap/scss/_nav.scss';
@import 'bootstrap/scss/_dropdown.scss';
@import 'bootstrap/scss/_buttons.scss';
@import 'bootstrap/scss/_forms.scss';
@import 'bootstrap/scss/_type.scss';
@import 'bootstrap/scss/_helpers.scss';
@import 'bootstrap/scss/_transitions.scss';
@import 'bootstrap/scss/_popover.scss';
@import 'bootstrap/scss/_card.scss';

body {
  padding-top: $spacer * 4;
}

nav.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  background-color: $body-tertiary-bg;
}

.jumbotron {
  border-radius: $border-radius;
  padding: $spacer;
  background-color: $body-secondary-bg;
}

.totp-settings {
  margin-bottom: 0.5em;
}

@include media-breakpoint-up(sm) {
  .totp-app {
    @include make-row();
  }

  .totp-settings {
    @include make-col-ready();
    @include make-col($size: 1, $columns: 2);
  }

  .totp-output {
    @include make-col-ready();
    @include make-col($size: 1, $columns: 2);
  }
}

.totp-action-link {
  cursor: pointer;
  user-select: none;
}

.totp-input, .totp-select {
  label {
    font-weight: $font-weight-bold;
  }

  margin-bottom: 0.5em;
}

.totp-about .card {
  margin-top: 0.5em;
}

.totp-code {
  text-align: center;
  height: 1.5em;
  max-height: 1.5em;
  transition: transform 0.5s linear, max-height 0.5s linear, font-size 0.5s linear;

  &:first-child, &:last-child {
    max-height: 0;
    transform: scale(1, 0);
  }

  &.totp-current {
    font-size: 2em;
  }
}

.copy-button {
  margin-left: 0.25em;

  a {
    cursor: pointer;
  }

  svg {
    fill: $body-secondary-color;
    height: 1em;

    &:hover {
      fill: $body-color;
    }
  }
}

progress.totp-tick {
  display: block;
  width: 100%;
}

@include media-breakpoint-down(sm) {
  .totp-code {
    &.totp-far {
      display: none;
    }

    &.totp-near-first, &.totp-near-last {
      max-height: 0;
      transform: scale(1, 0);
    }
  }
}

h3.card-title {
  scroll-margin-top: $spacer * 5;
}

.footer {
  margin-top: $spacer;
  background: $body-tertiary-bg;
  min-height: $spacer * 4;
  padding: ($spacer * 4 - $font-size-base) / 2 0;

  .container {
    width: 100%;
    margin: 0 auto;
    padding: 0 1em;
  }
}