Contents

$spacing_width: 3px;

$first_col_width: 1024px;
$second_col_width: 1480px - $first_col_width - $spacing_width;
$third_col_width: $styleguide_width - $second_col_width - $first_col_width - 2*$spacing_width;

@mixin __mq_font_styles {
  text-align: center;
  font-size: 0.8em;
  font-weight: bold;
  color: #333;
  padding-top: 0.2em;
}

@mixin __mq_step_markers {
  border: 3px solid red;
  border-bottom: none;
  margin-left: $spacing_width;

  &:first-child { margin-left: 0; }

// < 1024px
  &.one { width: $first_col_width; border-color: #a1ff2c; }
//1025px <> 1480px
  &.two { width: $second_col_width; border-color: #50c7ff; }
// > 1480px
  &.three { width: $third_col_width; border-color: #e43b37; }
}

.__mq_presenter {
  height: 5em;

  .__mq_screen_size_list {
    height: 3em;
    padding: 1em 0;
    overflow: hidden;
    position: fixed;
    background: #fff;
    border-bottom: 1px solid #ccc;
    width: $styleguide_width;
  }

  .__mq_step {
    @include box-sizing(border-box);
    float: left;
    @include __mq_font_styles;
    @include __mq_step_markers;
  }
}

Version data entries

2 entries across 2 versions & 1 rubygems

Version	Path
styleus-0.0.3	app/assets/stylesheets/styleus/components/_mq_presenter.css.scss
styleus-0.0.2	app/assets/stylesheets/styleus/components/_mq_presenter.css.scss