Contents

@mixin notice {
  @include radius;
  background: #98c17b;
  color: #fff;
  margin: 0 auto $sp;
  padding: $sp 14px $sp 68px;
  position: relative;
  max-width: $page-width - $sp2;
  min-height: 60px;
  &:before {
    @include entypo-icon;
    @extend .icon-circled-info:before;
    color: #fff;
    font-size: 40px;
    margin: -12px 0 0;
    position: absolute;
    top: 50%;
    left: 15px;
  }
  &.success:before {
    @extend .icon-thumbs-up:before;
  }
  &.error {
    background: #e46c67;
    &:before {
      @extend .icon-warning:before;
    }
  }
  &.warning {
    background: #e4cb5d;
    &:before {
      @extend .icon-warning:before;
    }
  }
  .close {
    color: #000;
    float: right;
    font-size: 20px;
    font-weight: bold;
    line-height: 22px;
    opacity: 0.2;
    text-decoration: none;
    &:hover, &:focus {
      color: #000;
      cursor: pointer;
      opacity: 0.4;
      text-decoration: none;
    }
    &:before {
      content: "\00d7";
    }
  }
  a {
    color: #fff;
    font-weight: normal;
    text-decoration: underline;
  }
}

@mixin callout {
  @include radius;
  background: #eff2f3;
  border: 1px solid #bdc4cb;
  border-left-width: 50px;
  font-weight: normal;
  margin: 0 0 $sp2;
  padding: $sp;
  position: relative;
  &:before {
    @include entypo-icon;
    @extend .icon-info:before;
    color: #fff;
    font-size: 20px;
    margin: -13px 0 0 -60px;
    position: absolute;
    top: 50%;
    text-align: center;
    width: 50px;
  }
  &.warning:before {
    @extend .icon-warning:before;
  }
  p, ol {
    font: inherit;
  }
  > p:last-child {
    margin: 0;
  }
}

@if $moovui-init {
[data-alert] {
  @include notice;
}

.callout {
  @include callout;
}

.text-success {
  color: $green;
}

.text-error {
  color: $red;
}

.text-warning {
  color: mix($orange, $yellow);
}
}

Version data entries

4 entries across 4 versions & 1 rubygems

Version	Path
moovui-0.1.2	app/assets/stylesheets/modules/_notice.scss
moovui-0.1.1	app/assets/stylesheets/modules/_notice.scss
moovui-0.0.2	modules/_notice.scss
moovui-0.0.1	modules/_notice.scss