Menu icon Foundation
Reveal modal sizes CSS media Query issues

Hi,
We had some SCSS compiler issues with respect to reveal modal sizes. when we compile locally we get the following compiled CSS with respect to the reveal modal sizes:

@media only screen and (min-width:40.063em) and only screen and (min-width:40.063em) {
  dialog, .reveal-modal {
    top: 50px;
  }
}
@media only screen and (min-width:40.063em) and only screen and (min-width:40.063em) {
  dialog.tiny, .reveal-modal.tiny {
    margin-left: -15%;
    width: 30%;
  }
}
@media only screen and (min-width:40.063em) and only screen and (min-width:40.063em) {
  dialog.small, .reveal-modal.small {
    margin-left: -20%;
    width: 40%;
  }
}
@media only screen and (min-width:40.063em) and only screen and (min-width:40.063em) {
  dialog.medium, .reveal-modal.medium {
    margin-left: -30%;
    width: 60%;
  }
}
@media only screen and (min-width:40.063em) and only screen and (min-width:40.063em) {
  dialog.large, .reveal-modal.large {
    margin-left: -35%;
    width: 70%;
  }
}
@media only screen and (min-width:40.063em) and only screen and (min-width:40.063em) {
  dialog.xlarge, .reveal-modal.xlarge {
    margin-left: -47.5%;
    width: 95%;
  }
}
@media only screen and (min-width:40.063em) and only screen and (min-width:40.063em) {
  dialog.full, .reveal-modal.full {
    margin-left: -50vw;
    width: 100vw;
  }
}
            

         

We thought it was an issue with the compiler we were using but when we cross checked this with the default compiled version from the foundation site (default download) we got the following:

@media only screen and (min-width: 40.063em) and (min-width: 40.063em) {
    dialog, .reveal-modal {
      top: 6.25rem; } }
  @media only screen and (min-width: 40.063em) and (min-width: 40.063em) {
    dialog.tiny, .reveal-modal.tiny {
      margin-left: -15%;
      width: 30%; } }
  @media only screen and (min-width: 40.063em) and (min-width: 40.063em) {
    dialog.small, .reveal-modal.small {
      margin-left: -20%;
      width: 40%; } }
  @media only screen and (min-width: 40.063em) and (min-width: 40.063em) {
    dialog.medium, .reveal-modal.medium {
      margin-left: -30%;
      width: 60%; } }
  @media only screen and (min-width: 40.063em) and (min-width: 40.063em) {
    dialog.large, .reveal-modal.large {
      margin-left: -35%;
      width: 70%; } }
  @media only screen and (min-width: 40.063em) and (min-width: 40.063em) {
    dialog.xlarge, .reveal-modal.xlarge {
      margin-left: -47.5%;
      width: 95%; } }

  @media only screen and (min-width: 40.063em) and (min-width: 40.063em) {
    dialog.full, .reveal-modal.full {
      margin-left: -50vw;
      width: 100vw; } }
            

         

This is causing reveal only open in default size and the specified size class does not take effect.
I think we need to ammend the _reveal.scss to make sure that the "(min-width: 40.063em)" is not repeated.

revealmodal

Hi,
We had some SCSS compiler issues with respect to reveal modal sizes. when we compile locally we get the following compiled CSS with respect to the reveal modal sizes:

@media only screen and (min-width:40.063em) and only screen and (min-width:40.063em) {
  dialog, .reveal-modal {
    top: 50px;
  }
}
@media only screen and (min-width:40.063em) and only screen and (min-width:40.063em) {
  dialog.tiny, .reveal-modal.tiny {
    margin-left: -15%;
    width: 30%;
  }
}
@media only screen and (min-width:40.063em) and only screen and (min-width:40.063em) {
  dialog.small, .reveal-modal.small {
    margin-left: -20%;
    width: 40%;
  }
}
@media only screen and (min-width:40.063em) and only screen and (min-width:40.063em) {
  dialog.medium, .reveal-modal.medium {
    margin-left: -30%;
    width: 60%;
  }
}
@media only screen and (min-width:40.063em) and only screen and (min-width:40.063em) {
  dialog.large, .reveal-modal.large {
    margin-left: -35%;
    width: 70%;
  }
}
@media only screen and (min-width:40.063em) and only screen and (min-width:40.063em) {
  dialog.xlarge, .reveal-modal.xlarge {
    margin-left: -47.5%;
    width: 95%;
  }
}
@media only screen and (min-width:40.063em) and only screen and (min-width:40.063em) {
  dialog.full, .reveal-modal.full {
    margin-left: -50vw;
    width: 100vw;
  }
}
            

         

We thought it was an issue with the compiler we were using but when we cross checked this with the default compiled version from the foundation site (default download) we got the following:

@media only screen and (min-width: 40.063em) and (min-width: 40.063em) {
    dialog, .reveal-modal {
      top: 6.25rem; } }
  @media only screen and (min-width: 40.063em) and (min-width: 40.063em) {
    dialog.tiny, .reveal-modal.tiny {
      margin-left: -15%;
      width: 30%; } }
  @media only screen and (min-width: 40.063em) and (min-width: 40.063em) {
    dialog.small, .reveal-modal.small {
      margin-left: -20%;
      width: 40%; } }
  @media only screen and (min-width: 40.063em) and (min-width: 40.063em) {
    dialog.medium, .reveal-modal.medium {
      margin-left: -30%;
      width: 60%; } }
  @media only screen and (min-width: 40.063em) and (min-width: 40.063em) {
    dialog.large, .reveal-modal.large {
      margin-left: -35%;
      width: 70%; } }
  @media only screen and (min-width: 40.063em) and (min-width: 40.063em) {
    dialog.xlarge, .reveal-modal.xlarge {
      margin-left: -47.5%;
      width: 95%; } }

  @media only screen and (min-width: 40.063em) and (min-width: 40.063em) {
    dialog.full, .reveal-modal.full {
      margin-left: -50vw;
      width: 100vw; } }
            

         

This is causing reveal only open in default size and the specified size class does not take effect.
I think we need to ammend the _reveal.scss to make sure that the "(min-width: 40.063em)" is not repeated.