Contents

.collapse{
  @media(min-width: @media-bp){
    flex-direction: row-reverse;
    .toggle { visibility: hidden }
    * :not(.toggle){
      margin-left: 5px;
      margin-right: 5px;
    }
  }

  @media (max-width: @media-bp) and (min-width: 480px),
  (max-device-width: 8in){
    flex-direction: row;
    align-items: center;
    .toggle {
      visibility: visible;
    }

    .collapses {
      visibility: hidden;

      position: absolute;
      top: @header-height + 10px;
      width: 100%;
      left: 0px;
      margin: 0px;
      padding: 0px;
      flex-direction: column;

      float: none;
      z-index: 100;

      li,div:not(.toggle){
        padding: 0px 10px;
        position: relative;
        width: 100%;
        min-height: @header-height;
        left: 0px;
        border-bottom: 1px solid @clprim2;
      }
    }
  }

  .rolled-down{
    visibility: visible;
    transform-origin: 50% 0;
    animation: rollDown 0.1s ease-in-out forwards;
  }

  .rotated{
    transform-origin: 50% 50%;
    animation: rotate 0.1s ease-in-out forwards;
  }
}

@keyframes rollDown{
  from { transform: scaleY(0) }
  to   { transform: scaleY(1) }
}

@keyframes rotate{
  from { }
  to {   transform: rotate(-90deg) }
}

Version data entries

3 entries across 3 versions & 2 rubygems

Version	Path
more_responsive_less_u_i-rails-0.0.7	app/assets/stylesheets/elements/collapse.less
more-responsive-less-ui-0.0.3	app/assets/stylesheets/elements/collapse.less
more-responsive-less-ui-0.0.2	app/assets/stylesheets/elements/collapse.less