my-layout.scss

// Material Theme Builder layout

body {
  display: flex;
  margin: 0;
}

.remix-fab {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 200;
  
}

// Theme Builder drawer content

.theme-builder-drawer {
  @include mdc-drawer-surface-fill-color(white);
  @include mdc-drawer-shape-radius(0);
  width: 400px;
  height: auto;
  z-index: 999;

  &.mdc-drawer--modal {
    height: 100%;
  }

  .mdc-drawer__header {
    padding: 24px;
  }

  .theme-builder-drawer-divider {
    margin: -1px;
  }
  
  .mdc-drawer__content {
    padding: 24px;
    color: rgba(0, 0, 0, .87);
  }
  
  h6 {
    color: rgba(0, 0, 0, .6);
    margin: 0;
  }
  p {
    margin-block-start: 0.5em;
    margin-block-end: 1.25em;
  }
  
  .mdc-tab {
    font-family: Roboto, sans-serif;
    @include mdc-tab-active-text-label-color(#6200ee)
    @include mdc-tab-states-color(#6200ee)
    @include mdc-tab-text-label-color(black)
    
    .mdc-tab-indicator--active {
      @include mdc-tab-ink-color(#6200ee);
    }
    
    .mdc-tab-indicator {
      @include mdc-tab-indicator-underline-color(#6200ee);
    }
  }
  
  a {
    color: #6200ee;
    text-decoration: none;
    font-family: Roboto, sans-serif;

    &:hover, &:focus {
      text-decoration: underline;
      outline: none;
    }
  }
  
  code {
    font-family: 'Roboto mono';
    background: $material-color-grey-200;
  }
  
  .mdc-form-field {
    margin: 12px 0;
    
    .rtl-switch {
      @include mdc-switch-toggled-off-color(white);
      @include mdc-switch-toggled-off-track-color(black);
      margin-right: 16px;
    }
  }
  
  .section-header a {
    color: rgba(0, 0, 0, 0.54);
  
    &:hover, &:focus {
      color: rgba(0, 0, 0, 0.87);
    }
  }
}
  
.theme-builder-title {
  color: $material-color-grey-800;
  font-family: 'Roboto', sans-serif;
  font-style: italic;
  font-weight: 800;

  svg {
    vertical-align: -3px;
    margin-right: 4px;
  }
}

.drawer-content--theme-summary {
  display: none;
}

.theme-name {
  margin-bottom: 0;

  &:focus {
    outline: 1px solid rgba(0, 0, 0, .12);
  }

  &:empty:before {
    content: attr(placeholder);
    color: rgba(0, 0, 0, .6);
  }
}

.glitch-url {
  color: #6200ee;
  font-size: 0.65rem;
  font-family: Roboto, sans-serif;
}

// Theme Summary content

.mdc-list-divider.theme-summary-divider {
  border-bottom-width: 2px;
  margin: 20px 0;
}

.theme-summary-line {
  @include mdc-typography(caption);

  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 8px 0;

  figure {
    margin: 0;
  }

  .theme-summary-code {
    background: none;
  }

  .theme-summary-color {
    width: 20px;
    height: 20px;
    border: 1px solid $material-color-grey-400;
    border-radius: 50%;
  }

  .theme-summary-shape {
    @include mdc-typography(button);

    width: 48px;
    height: 36px;
    line-height: 36px;
    text-align: center;
    background: $material-color-grey-100;
    border: 1px solid $material-color-grey-600;
  }
  
  &.theme-summary-line--typography {
    margin: 0;
  }

  .theme-summary-typography {
    width: 120px;

    // Draw typography baselines
    &.mdc-typography--headline1 {
      $line-height: 6rem;
      @include mdc-typography-baseline-top($line-height);
      @include mdc-typography-baseline-bottom($line-height);
    }
    &.mdc-typography--headline2 {
      $line-height: 3.75rem;
      @include mdc-typography-baseline-top($line-height);
      @include mdc-typography-baseline-bottom($line-height);
    }
    &.mdc-typography--headline3 {
      $line-height: 3.125rem;
      @include mdc-typography-baseline-top($line-height);
      @include mdc-typography-baseline-bottom($line-height);
    }
    &.mdc-typography--headline4 {
      $line-height: 2.5rem;
      @include mdc-typography-baseline-top($line-height);
      @include mdc-typography-baseline-bottom($line-height);
    }
    &.mdc-typography--headline5 {
      $line-height: 2rem;
      @include mdc-typography-baseline-top($line-height);
      @include mdc-typography-baseline-bottom($line-height);
    }
    &.mdc-typography--headline6,
    &.mdc-typography--subtitle1,
    &.mdc-typography--subtitle2,
    &.mdc-typography--body1,
    &.mdc-typography--body2,
    &.mdc-typography--caption,
    &.mdc-typography--button,
    &.mdc-typography--overline {
      $line-height: 2rem;
      @include mdc-typography-baseline-top($line-height);
      @include mdc-typography-baseline-bottom($line-height);
    }
  }

  // Application of color
  .theme-summary-color--primary {
    background: $mdc-theme-primary;
  }
  .theme-summary-color--on-primary {
    background: $mdc-theme-on-primary;
  }
  .theme-summary-color--secondary {
    background: $mdc-theme-secondary;
  }
  .theme-summary-color--on-secondary {
    background: $mdc-theme-on-secondary;
  }
  .theme-summary-color--error {
    background: $mdc-theme-error;
  }
  .theme-summary-color--on-error {
    background: $mdc-theme-on-error;
  }
  .theme-summary-color--surface {
    background: $mdc-theme-surface;
  }
  .theme-summary-color--on-surface {
    background: $mdc-theme-on-surface;
  }
  .theme-summary-color--background {
    background: $mdc-theme-background;
  }

  // Application of shape
  .theme-summary-shape--small {
    @include mdc-shape-radius($mdc-shape-small-component-radius);
  }
  .theme-summary-shape--medium {
    @include mdc-shape-radius($mdc-shape-medium-component-radius);
  }
  .theme-summary-shape--large {
    @include mdc-shape-radius($mdc-shape-large-component-radius);
  }
}

.mdc-list-divider.typography-baseline-divider {
  margin-top: 0;
  margin-bottom: 12px;
  border-bottom-color: $material-color-grey-200;
}

// Theme Builder app bar

.theme-builder-app-bar {
  display: none; // hide on >1310px screens
  position: fixed;

  @include mdc-top-app-bar-fill-color(white);
  @include mdc-top-app-bar-icon-ink-color($material-color-grey-800);
  @include mdc-elevation(1);

  .mdc-top-app-bar__title {
    width: 100%;
    text-align: center;
    padding: 0;
  }
}

.mdc-drawer-app-content {
  width: 100%;
}

.theme-builder-desc-banner {
  display: none; // hide on >1310px screens
  width: 100%;
  text-align: center;
  background: $material-color-grey-100;
  color: rgba(0, 0, 0, .87);
  padding: 10px;
}

// Breakpoint <1310px
@media (max-width: 1310px) {
  .theme-builder-app-bar, .theme-builder-desc-banner {
    display: block;
  }
}

// Main content layout

.main-content {
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
  background: mdc-theme-prop-value(background);

  &:not(.mdc-top-app-bar--fixed-adjust) {
    padding: 2vh 0;
  }
  
  .column {
    width: 420px;
  }
}

.component-section-row {
  display: flex;

  .component-section:first-child {
    width: 200px;
  }
}

.component-section {
  margin: 16px 20px 40px 20px;

  &.dialog-component-section {
    margin-bottom: 60px; // To avoid overshadowing Image List
  }
}

@media only screen and (max-width: 600px) {
  .component-section {
    margin-left: auto;
    margin-right: auto;
  }
  
  .mdc-image-list {
    width: auto;
  }
  
  .mdc-drawer {
    width: 60%;
    min-width: calc(100% - 56px);
  }
  
  .column {
    width: auto;
    max-width: 420px;
    padding-right: 8px;
    padding-left: 8px;
  } 
}

@media only screen and (max-width: 485px) {
  .column {
    overflow: hidden;
  }
  
  .remix-fab {
  position: fixed;
  bottom: 16px;
  right: auto;
  margin: 0;
  z-index: 200;
  
}
  
   .mdc-dialog .mdc-dialog__surface {
    max-width: calc(100% - 100px);
  }
}
  
.section-header {
  display: flex;
  height: 36px;
  font-family: Roboto, sans-serif;
  
  a {
    display: flex;
    align-items: center;
    color: if(mdc-theme-contrast-tone($mdc-theme-background) == "dark",
      rgba(0, 0, 0, 0.54),
      rgba(255, 255, 255, 0.54));
  
    &:hover, &:focus {
    color: if(mdc-theme-contrast-tone($mdc-theme-background) == "dark",
      rgba(0, 0, 0, 0.87),
      rgba(255, 255, 255, 0.87));
      text-decoration: none;
    }
  }
  
  .material-icons {
    font-size: 1rem;
    padding: 8px;

    &.leading-icon {
      padding-left: 0;
    }
  }
}

.component-wrapper {
  margin: 16px 0;
}

// Extra padding for printing

.print {
  .column {
    width: 30vw;
  }

  .component-wrapper {
    margin-bottom: 60px;
  
    &.text-field-component-wrapper, &.chips-component-wrapper {
      margin-bottom: 96px;
    }
  }
  
  .theme-name {
    margin-bottom: 8px;
  }
  
  .glitch-url {
    font-size: 1rem;
  }
  
  .drawer-content--instructions {
    .mdc-typography--overline {
      font-size: 0.9rem;
    }
    
    .mdc-typography--body2 {
      font-size: 1.2rem;
      line-height: 1.75rem;
    }
  }
  
  .drawer-content--options {
    display: none;
  }
  
    // Print adjustments
  
  .button-component-wrapper,
  .fab-component-wrapper {
    margin: 24px 0 44px;
  }
  
  .top-bar-component-wrapper {
    margin: 24px 0 52px;
  }
  
  .switch-component-wrapper {
    margin-left: -8px;
    margin-top: 24px;
  }
  
  .component-wrapper.checkbox-component-wrapper {
    margin-left: -18px;
  }
  
  .component-wrapper.chips-component-wrapper-1 {
    margin: 12px 0 92px -8px;
  }
  
  .select-component {
    margin: 0 20px 40px 20px;
  }
  
  .column-2 {
    transform: translate(-16px);
  }
  
  .card-component-wrapper {
    margin: 16px 0 38px;
  }
  
  .component-wrapper.text-field-component-wrapper-1 {
    margin: 22px 0 90px;
  }
  
  .dialog-component-wrapper {
    margin: 8px 0 52px;
  }
  
  .linear-progress-section {
    margin-top: -8px;
  }
  
  .tabs-section {
    margin-top: -16px;
  }
  
  .radio-row {
    margin-top: -24px;
    margin-bottom: -16px;
  }
  
  .snackbar-section {
    margin-top: -16px;
  }
  
  .image-section {
    margin-top: -4px;
  }
  
  .switch-section {
    margin-top: 0;
  }
  
  .short-app-bar-section,
  .menu-section {
    margin-top: 0px;
  }
  
  .switch-checkbox-row {
    margin-bottom: 16px;
  }
  
  .list-section {
    margin-top: 8px;
  }
  
  .dialog-component-section {
    margin-bottom: 52px;
    margin-top: -16px;
  }
  
  .chips-section {
    margin: 16px 20px -32px 20px;
  }
  
  .image-list-section {
    transform: translateY(-8px);
  }
}

// Theme Summary Typography
.typography-callout {
  font-size: 12px;
  padding: 16px;
  border: 1px solid $material-color-grey-300;
  background-color: $material-color-grey-200;
}

.font-link {
  font-size: 12px;
  margin-top: 8px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-bottom: -16px;
}

.font-link i {
  font-size: 16px;
  margin-left: 8px;
}

.theme-shape .varValue {
  display: block;
}

.varValue {
  font-weight: 600;
}