mirror of https://github.com/juliancwirko/abc.git
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
150 lines
4.2 KiB
150 lines
4.2 KiB
// Foundation by ZURB |
|
// foundation.zurb.com |
|
// Licensed under MIT Open Source |
|
|
|
@import 'global'; |
|
|
|
// |
|
// @variables |
|
// |
|
$include-html-pricing-classes: $include-html-classes !default; |
|
|
|
// We use this to control the border color |
|
$price-table-border: solid 1px $gainsboro !default; |
|
|
|
// We use this to control the bottom margin of the pricing table |
|
$price-table-margin-bottom: rem-calc(20) !default; |
|
|
|
// We use these to control the title styles |
|
$price-title-bg: $oil !default; |
|
$price-title-padding: rem-calc(15 20) !default; |
|
$price-title-align: center !default; |
|
$price-title-color: $smoke !default; |
|
$price-title-weight: $font-weight-normal !default; |
|
$price-title-size: rem-calc(16) !default; |
|
$price-title-font-family: $body-font-family !default; |
|
|
|
// We use these to control the price styles |
|
$price-money-bg: $vapor !default; |
|
$price-money-padding: rem-calc(15 20) !default; |
|
$price-money-align: center !default; |
|
$price-money-color: $oil !default; |
|
$price-money-weight: $font-weight-normal !default; |
|
$price-money-size: rem-calc(32) !default; |
|
$price-money-font-family: $body-font-family !default; |
|
|
|
|
|
// We use these to control the description styles |
|
$price-bg: $white !default; |
|
$price-desc-color: $monsoon !default; |
|
$price-desc-padding: rem-calc(15) !default; |
|
$price-desc-align: center !default; |
|
$price-desc-font-size: rem-calc(12) !default; |
|
$price-desc-weight: $font-weight-normal !default; |
|
$price-desc-line-height: 1.4 !default; |
|
$price-desc-bottom-border: dotted 1px $gainsboro !default; |
|
|
|
// We use these to control the list item styles |
|
$price-item-color: $oil !default; |
|
$price-item-padding: rem-calc(15) !default; |
|
$price-item-align: center !default; |
|
$price-item-font-size: rem-calc(14) !default; |
|
$price-item-weight: $font-weight-normal !default; |
|
$price-item-bottom-border: dotted 1px $gainsboro !default; |
|
|
|
// We use these to control the CTA area styles |
|
$price-cta-bg: $white !default; |
|
$price-cta-align: center !default; |
|
$price-cta-padding: rem-calc(20 20 0) !default; |
|
|
|
// @mixins |
|
// |
|
// We use this to create the container element for the pricing tables |
|
@mixin pricing-table-container { |
|
border: $price-table-border; |
|
margin-#{$default-float}: 0; |
|
margin-bottom: $price-table-margin-bottom; |
|
|
|
& * { |
|
list-style: none; |
|
line-height: 1; |
|
} |
|
} |
|
// @mixins |
|
// |
|
// We use this mixin to create the pricing table title styles |
|
@mixin pricing-table-title { |
|
background-color: $price-title-bg; |
|
color: $price-title-color; |
|
font-family: $price-title-font-family; |
|
font-size: $price-title-size; |
|
font-weight: $price-title-weight; |
|
padding: $price-title-padding; |
|
text-align: $price-title-align; |
|
} |
|
|
|
// @mixins |
|
// |
|
// We use this mixin to control the pricing table price styles |
|
@mixin pricing-table-price { |
|
background-color: $price-money-bg; |
|
color: $price-money-color; |
|
font-family: $price-money-font-family; |
|
font-size: $price-money-size; |
|
font-weight: $price-money-weight; |
|
padding: $price-money-padding; |
|
text-align: $price-money-align; |
|
} |
|
|
|
// @mixins |
|
// |
|
// We use this mixin to create the description styles for the pricing table |
|
@mixin pricing-table-description { |
|
background-color: $price-bg; |
|
border-bottom: $price-desc-bottom-border; |
|
color: $price-desc-color; |
|
font-size: $price-desc-font-size; |
|
font-weight: $price-desc-weight; |
|
line-height: $price-desc-line-height; |
|
padding: $price-desc-padding; |
|
text-align: $price-desc-align; |
|
} |
|
|
|
// @mixins |
|
// |
|
// We use this mixin to style the bullet items in the pricing table |
|
@mixin pricing-table-bullet { |
|
background-color: $price-bg; |
|
border-bottom: $price-item-bottom-border; |
|
color: $price-item-color; |
|
font-size: $price-item-font-size; |
|
font-weight: $price-item-weight; |
|
padding: $price-item-padding; |
|
text-align: $price-item-align; |
|
} |
|
|
|
// @mixins |
|
// |
|
// We use this mixin to style the CTA area of the pricing tables |
|
@mixin pricing-table-cta { |
|
background-color: $price-cta-bg; |
|
padding: $price-cta-padding; |
|
text-align: $price-cta-align; |
|
} |
|
|
|
@include exports("pricing-table") { |
|
@if $include-html-pricing-classes { |
|
|
|
/* Pricing Tables */ |
|
.pricing-table { |
|
@include pricing-table-container; |
|
|
|
.title { @include pricing-table-title; } |
|
.price { @include pricing-table-price; } |
|
.description { @include pricing-table-description; } |
|
.bullet-item { @include pricing-table-bullet; } |
|
.cta-button { @include pricing-table-cta; } |
|
} |
|
|
|
} |
|
}
|
|
|