Contents

@mixin bg($bgColor, $class, $titleColor, $itemColor, $btnColor, $secondBgColor) {
  @if $secondBgColor != null {
    .plan {
      &__header {
        background-image: linear-gradient(to bottom right, $bgColor, $secondBgColor);
      }
      &__term input:checked ~ .plan__checkmark {
        background-color: $bgColor;
      }
      &__button {
        background-color: $btnColor;
      }
    }
  } @else {
    .plan {
      &__header,
      &__term input:checked ~ .plan__checkmark {
        background-color: $bgColor;
      }

      &__button {
        background-color: $btnColor;
      }
    }
  }

  .plan__title--#{$class},
  .plan__brand--#{$class} {
    display: block;
    color: $titleColor;
  }

  .plan__text,
  .plan__value {
    color: $itemColor;
  }
}

.plan {
  &--classic {
    @include bg($venetianRed, 'classic', $cardinal, $coral, $venetianRed, $mediumVioletRed);
  }

  &--exclusive {
    @include bg($muddyWater, 'exclusive', $cardinal, $primary, $muddyWater, null);
  }

  &--prime {
    @include bg($ultramarine, 'prime', $darkPurple, $darkPurple, $ultramarine, null);
  }

  &--private {
    @include bg($wedgewood, 'private', $brightRed, $brightRed, $wedgewood, null);
  }
}

Version data entries

1 entries across 1 versions & 1 rubygems

Version	Path
veloe-landing-page-theme-0.1.0	_sass/components/plans.scss