wikijs/client/scss/base/base.scss

html {
  box-sizing: border-box;
  height: 100%;
  overflow-y: auto !important;
}
*, *:before, *:after {
  box-sizing: inherit;
}

[v-cloak], .is-hidden {
  display: none;
}

#root {
  position: relative;
  min-height: 100%;

  &.is-fullscreen {
    height: 100vh;
  }
}

.v-application--wrap {
  transition: all 1.2s ease;
  transform-origin: 50% 50%;
  // background-color: #FFF;

  @at-root .theme--dark & {
    background-color: mc('grey', '900');
  }
}

#root .v-application {
  .overline {
    line-height: 1rem;
    font-size: .625rem!important;
    font-weight: 400;
    letter-spacing: .1666666667em!important;
  }

  @for $i from 0 through 25 {
    .radius-#{$i} {
      border-radius: #{$i}px;
    }
  }

  @for $i from 1 through 5 {
    .grey.darken-2-d#{$i} {
      background-color: darken(mc('grey', '700'), percentage($i/100)) !important;
      border-color: darken(mc('grey', '700'), percentage($i/100)) !important;
    }
    .grey.darken-2-l#{$i} {
      background-color: lighten(mc('grey', '700'), percentage($i/100)) !important;
      border-color: lighten(mc('grey', '700'), percentage($i/100)) !important;
    }
    .grey.darken-3-d#{$i} {
      background-color: darken(mc('grey', '800'), percentage($i/100)) !important;
      border-color: darken(mc('grey', '800'), percentage($i/100)) !important;
    }
    .grey.darken-3-l#{$i} {
      background-color: lighten(mc('grey', '800'), percentage($i/100)) !important;
      border-color: lighten(mc('grey', '800'), percentage($i/100)) !important;
    }
    .grey.darken-4-d#{$i} {
      background-color: darken(mc('grey', '900'), percentage($i/100)) !important;
      border-color: darken(mc('grey', '900'), percentage($i/100)) !important;
    }
    .grey.darken-4-l#{$i} {
      background-color: lighten(mc('grey', '900'), percentage($i/100)) !important;
      border-color: lighten(mc('grey', '900'), percentage($i/100)) !important;
    }
  }
  .grey.darken-5 {
    background-color: #0C0C0C !important;
    border-color: #0C0C0C !important;
  }

  .blue.darken-5 {
    background-color: darken(mc('blue', '900'), 20%) !important;
    border-color: darken(mc('blue', '900'), 20%) !important;
  }
  .indigo.darken-5 {
    background-color: darken(mc('indigo', '900'), 10%) !important;
    border-color: darken(mc('indigo', '900'), 10%) !important;
  }
}