// Variables //—————————————————— $pricing-primary: $aqua-light !default; $pricing-success: $grass-light !default; $pricing-warning: $sunflower-light !default;
$pricing-foot-background-color: $lightgray-dark !default; $pricing-shadow: 0 1px 2px rgba(0, 0, 0, .2) !default; $pricing-shadow-active: 0 0 8px rgba(0, 0, 0, .6) !default; $pricing-radius: 4px !default;
// Exports //——————————————————
@include exports(“pricing”) {
/** * pricing * -------------------------------------------------- */ .pricing { & ul { list-style: none; padding: 0; } & .unit { position: relative; display: inline-block; text-align: center; min-width: 250px; @include radius($type: border-radius, $value: $pricing-radius); @include box-shadow($value: $pricing-shadow); &.active { top: 5px; margin-left: -36px; margin-right: -36px; z-index: 1; @include box-shadow($value: $pricing-shadow-active); & .price-title h3 { font-size: 40px; } } } @media screen and (max-width: 767px) { & .unit { display: block; margin-bottom: 20px; &.active { top: 0; margin-left: 0; margin-right: 0; & .price-title h3 { font-size: 30px; } } } } & .price-title { padding: 20px 20px 10px; @include radius($type: border-top-left-radius, $value: $pricing-radius); @include radius($type: border-top-right-radius, $value: $pricing-radius); color: #FFF; & h3, & h3 > p { margin: 0; } } & .price-body { padding: 20px 20px 10px; & ul { padding-top: 10px; } & li { margin-bottom: 10px; } & h4 { margin: 0; } } & .price-foot { padding: 20px; @include radius($type: border-bottom-left-radius, $value: $pricing-radius); @include radius($type: border-bottom-right-radius, $value: $pricing-radius); background-color: $pricing-foot-background-color; } & .price-primary { & .price-title { background-color: $pricing-primary; } & .price-body { background-color: lighten($pricing-primary, 30%); & ul { border-top: 1px solid lighten($pricing-primary, 20%); } } } & .price-success { & .price-title { background-color: $pricing-success; } & .price-body { background-color: lighten($pricing-success, 30%); & ul { border-top: 1px solid lighten($pricing-success, 20%); } } } & .price-warning { & .price-title { background-color: $pricing-warning; } & .price-body { background-color: lighten($pricing-warning, 30%); & ul { border-top: 1px solid lighten($pricing-warning, 20%); } } } }
}