154 lines
3.4 KiB
SCSS
Executable File
154 lines
3.4 KiB
SCSS
Executable File
/* ---------------------------------------------------------------------- */
|
|
/* Pricing Tables
|
|
/* ---------------------------------------------------------------------- */
|
|
.pricing-table {
|
|
.plan {
|
|
border: none;
|
|
margin: 20px 0;
|
|
position: relative;
|
|
padding: 0;
|
|
list-style: none;
|
|
border: 1px solid lighten($grey, 10%);
|
|
border-bottom: none;
|
|
text-align: center;
|
|
|
|
li {
|
|
padding: 10px 15px;
|
|
color: $text-color;
|
|
border-bottom: 1px solid lighten($grey, 10%);
|
|
|
|
&.plan-name {
|
|
padding: 15px;
|
|
font-size: 18px;
|
|
line-height: 18px;
|
|
color: #fff;
|
|
background: lighten($grey,5%);
|
|
border-top: 0;
|
|
border-bottom: 0;
|
|
}
|
|
|
|
&.plan-price {
|
|
background: $grey;
|
|
color: $white;
|
|
font-size: 18px;
|
|
padding: 6px 20px;
|
|
border-bottom: none;
|
|
|
|
h3 {
|
|
margin-bottom: 0;
|
|
margin-top: 0;
|
|
font-size: 2em;
|
|
padding: 30px 0;
|
|
font-weight: 600;
|
|
color: $white;
|
|
|
|
.price-cents {
|
|
font-size: 50%;
|
|
vertical-align: super;
|
|
margin-left: -10px;
|
|
}
|
|
|
|
.price-month {
|
|
font-size: 30%;
|
|
font-style: italic;
|
|
margin-left: -20px;
|
|
font-weight: 300;
|
|
color: $white;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.plan-action {
|
|
margin-top: 10px;
|
|
border-top: 0;
|
|
}
|
|
}
|
|
|
|
&.featured {
|
|
-webkit-transform: scale(1.05);
|
|
-ms-transform: scale(1.05);
|
|
transform: scale(1.05);
|
|
box-shadow: 0 3px 25px -4px rgba(0, 0, 0, 0.9) !important;
|
|
|
|
.plan-name {
|
|
background: darken($grey, 20%);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.pricing-green {
|
|
.plan {
|
|
li {
|
|
strong {
|
|
color: $red;
|
|
}
|
|
|
|
&.plan-name {
|
|
background: lighten($green,5%);
|
|
}
|
|
|
|
&.plan-price {
|
|
background: $green;
|
|
color: $white;
|
|
}
|
|
}
|
|
|
|
&.featured {
|
|
.plan-name {
|
|
background: darken($green, 20%);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.pricing-blue {
|
|
.plan {
|
|
li {
|
|
strong {
|
|
color: $blue;
|
|
}
|
|
|
|
&.plan-name {
|
|
background: lighten($blue,5%);
|
|
}
|
|
|
|
&.plan-price {
|
|
background: $blue;
|
|
color: $white;
|
|
}
|
|
}
|
|
|
|
&.featured {
|
|
.plan-name {
|
|
background: darken($blue, 20%);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.pricing-red {
|
|
.plan {
|
|
li {
|
|
strong {
|
|
color: $red;
|
|
}
|
|
|
|
&.plan-name {
|
|
background: lighten($red,5%);
|
|
}
|
|
|
|
&.plan-price {
|
|
background: $red;
|
|
color: $white;
|
|
}
|
|
}
|
|
|
|
&.featured {
|
|
.plan-name {
|
|
background: darken($red, 20%);
|
|
}
|
|
}
|
|
}
|
|
}
|