digitransit-ui/sass/base/_helper-classes-after-foundations.scss

/*
  Helper Classes
  These classes may be used through out the application on any DOM-element
  Foundation css is loaded before this
*/

@media #{$small-up} {
  // https://css-tricks.com/snippets/css/momentum-scrolling-on-ios-overflow-elements/
  .momentum-scroll {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}

@media #{$large-up} {
  .momentum-scroll {
    overflow-y: auto;
    overflow-anchor: none;
  }
}

@media #{$small-only} {
  #app .modal {
    width: 90%;
  }
}

@media screen and (max-width: 480px) {
  @viewport {
    width: 330px;
  }
}

button.noborder {
  border: 0;
  margin: 0;
  padding: 0;
  font-size: 100%;
  display: flex;
  justify-content: center;
  text-align: left;
  background: none;
  border-style: none;
  border-width: 0;
  cursor: pointer;
  font-family: inherit;
  position: relative;
  background-color: transparent;
  transition: none;
  color: inherit;

  &:focus {
    background-color: transparent;
    color: inherit;
  }

  &:active {
    background-color: transparent;
    color: inherit;
  }

  &:hover {
    background-color: transparent;
    color: inherit;
  }
}

.before-scrollable-area {
  position: relative;
  z-index: index($zindex, 'before-scrollable-area');
  height: 16px;

  &.scrolled {
    box-shadow: 0 8px 6px -6px rgba(0, 0, 0, 0.2);
  }

  background-color: rgba(0, 0, 0, 0);
  margin-top: -16px;

  @media print {
    display: none;
  }
}