webpack-bootstrap-ui-kit/src/scss/layout/main/base.scss

html,
body {
  min-height: 100%;
  min-height: 100vh;
}

html {
  overflow-y: scroll; // prevent content jumps produced by scroll bar
}

// sticky footer
body {
  display: flex;
  flex-direction: column;
  --body-gutter-x: #{inspect($body-gutter-x)};
  --body-gutter-y: #{inspect($body-gutter-y)};
  --body-double-gutter-x: #{inspect($body-double-gutter-x)};
  --body-double-gutter-y: #{inspect($body-double-gutter-y)};
  --body-gutter-reduced-x: #{inspect($body-gutter-reduced-x)};
  --body-gutter-reduced-y: #{inspect($body-gutter-reduced-y)};
  --body-gutter-reduced-d-x: #{inspect($body-gutter-reduced-d-x)};
  --body-gutter-reduced-d-y: #{inspect($body-gutter-reduced-d-y)};
  overflow-y: hidden; // prevent content jumps produced by scroll bar

  .wrapper {
    flex: 1 0 auto;
    margin-bottom: $element-spacer-y;
  }

  .footer {
    flex-shrink: 0;
    margin-top: $element-spacer-y;
  }
}

@media (min-width: $extra-large-screen) {

  html,
  body {
    font-size: 0.9vw !important;
  }

  .container {
    max-width: 80vw;
  }
}

// don't let images be wider than the parent layer
div,
a,
span,
button,
i {
  background-repeat: no-repeat;
  background-size: contain;
}

iframe,
img {
  max-width: 100%;
}

ul,
table,
p {
  &:first-child {
    margin-top: 0;
  }

  &:last-child {
    margin-bottom: 0;
  }
}

.a {
  cursor: pointer;
  color: $link-color;
  text-decoration: $link-decoration;

  &:hover,
  &:focus {
    text-decoration: $link-hover-decoration;
    color: $link-hover-color;
  }
}

// transactions
a,
.a,
button,
input,
optgroup,
select,
textarea,
option,
.btn,
.transition {
  transition: all 0.4s ease;
}

a,
.a,
.btn {

  &:hover,
  &.active {
    opacity: 0.8;

    >.fa,
    >.svg-inline--fa {
      transform: scale(1.5);
    }
  }

  &.disabled {
    opacity: 0.8;
    cursor: default;
  }
}

[data-toggle][aria-expanded="true"] {
  opacity: 0.8;

  >.fa,
  >.svg-inline--fa {
    transform: scale(1.5);
  }
}