AnimatingAppBar.module.scss

@use 'react-md' as *;

.container {
  @include rmd-elevation(6);
  @include rmd-utils-block-centered;

  max-width: 20rem;
  position: relative;

  // when it's in the mobile full page view, reset some of the styles again
  :global .rmd-dialog--full-page :local & {
    height: 100%;
    margin: 0;
    max-width: none;
    position: static;

    .header {
      position: fixed;
    }

    .content {
      height: 100%;
    }
  }
}

.header {
  $width: 20 * 16; // 20rem
  $height: (3.5 * 16) + 96; // app-bar-height (3.5rem) + 96 for custom offset

  @include rmd-button-theme-update-var(color, $rmd-white-base);
  @include rmd-theme(color, text-primary-on-dark);

  background-image: url(#{'https://picsum.photos/#{$width}/#{$height}?image=811'});
  height: auto;
  padding-bottom: var(--offset);

  // this is for the demo only since I don't want to move to
  // a different page for this demo to have a fixed app bar.
  // you wouldn't normally need to do this
  position: absolute;
  z-index: 3;
}

.title {
  transform: translateY(var(--offset));
}

.content {
  @include rmd-utils-scroll;

  height: 35rem;
  padding-top: calc(#{rmd-app-bar-theme-var(height)} + var(--offset));
}