Sha256: 0fea33a79cc3488a6716b10bb062a5cd9b91c5a03f8f1c325751e4b0eb7de743

Contents?: true

Size: 2 KB

Versions: 6

Compression:

Stored size: 2 KB

Contents

@mixin colors($name, $value) {
  .c-#{$name}, .c-xs-#{$name},
  .c-#{$name}-hover:hover, .c-xs-#{$name}-hover:hover,
  .active .c-#{$name}-active, .active .c-xs-#{$name}-active {
    color: $value;
  }

  .bg-#{$name}, .bg-xs-#{$name},
  .bg-#{$name}-hover:hover, .bg-xs-#{$name}-hover:hover,
  .active .bg-#{$name}-active, .active .bg-xs-#{$name}-active {
    background-color: $value;
  }

  .bc-#{$name}, .bc-xs-#{$name},
  .bc-#{$name}-hover:hover, .bc-xs-#{$name}-hover:hover,
  .active .bc-#{$name}-active, .active .bc-xs-#{$name}-active {
    border-color: $value;
  }

  @media (min-width: $screen-sm-min) {
    .c-sm-#{$name},
    .c-sm-#{$name}-hover:hover,
    .active .c-sm-#{$name}-active {
      color: $value;
    }

    .bg-sm-#{$name},
    .bg-sm-#{$name}-hover:hover,
    .active .bg-sm-#{$name}-active {
      background-color: $value;
    }

    .bc-sm-#{$name},
    .bc-sm-#{$name}-hover:hover,
    .active .bc-sm-#{$name}-active {
      border-color: $value;
    }
  }

  @media (min-width: $screen-md-min) {
    .c-md-#{$name},
    .c-md-#{$name}-hover:hover,
    .active .c-md-#{$name}-active {
      color: $value;
    }

    .bg-md-#{$name},
    .bg-md-#{$name}-hover:hover,
    .active .bg-md-#{$name}-active {
      background-color: $value;
    }

    .bc-md-#{$name},
    .bc-md-#{$name}-hover:hover,
    .active .bc-md-#{$name}-active {
      border-color: $value;
    }
  }

  @media (min-width: $screen-lg-min) {
    .c-lg-#{$name},
    .c-lg-#{$name}-hover:hover,
    .active .c-lg-#{$name}-active {
      color: $value;
    }

    .bg-lg-#{$name},
    .bg-lg-#{$name}-hover:hover,
    .active .bg-lg-#{$name}-active {
      background-color: $value;
    }

    .bc-lg-#{$name},
    .bc-lg-#{$name}-hover:hover,
    .active .bc-lg-#{$name}-active {
      border-color: $value;
    }
  }
}

@include colors(n, none);

@for $color-index from 1 through length($helio-shades) {
  $color-name: $color-index - 1;
  $color-value: nth($helio-shades, $color-index);

  @include colors(#{$color-name}, #{$color-value});
}

Version data entries

6 entries across 6 versions & 1 rubygems

Version Path
helio-0.1.10 assets/stylesheets/helio/_colors.scss
helio-0.1.9 assets/stylesheets/helio/_colors.scss
helio-0.1.8 assets/stylesheets/helio/_colors.scss
helio-0.1.7 assets/stylesheets/helio/_colors.scss
helio-0.1.6 assets/stylesheets/helio/_colors.scss
helio-0.0.1.5 assets/stylesheets/helio/_colors.scss