Skip to content

Instantly share code, notes, and snippets.

@kmelkon
Last active January 28, 2016 13:00
Show Gist options
  • Save kmelkon/14a626aa8990248e7836 to your computer and use it in GitHub Desktop.
Save kmelkon/14a626aa8990248e7836 to your computer and use it in GitHub Desktop.
this will be changed according to the latest comments
$dark-primary: #0097A7;
$primary: #00BCD4;
$light-primary: #B2EBF2;
$text: #FFFFFF;
$accent: #FF5252;
$primary-text: #212121;
$secondary-text: #727272;
$divider: #b6b6b6;
.section-pricing {
padding: 100px 0;
color: $secondary-text;
font-weight: 400;
.pricing-cell-inner {
transition: all 0.2s ease-in-out;
&:hover {
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}
&.free {
background-color: $free-color;
}
&.standard {
background-color: $standard-color;
}
&.plus {
background-color: $plus-color;
}
&.enterprise {
background-color: $enterprise-color;
}
.cell-mid {
background-color: #fff;
padding-top: 20px;
padding-bottom: 9px;
margin-bottom: 10px;
&.last {
padding-bottom: 0;
}
ul {
li {
padding: 15px;
}
.smaller-item {
// font-size: 11px;
}
}
}
.cell-header {
margin-bottom: 2rem;
color: $text;
h2 {
font-weight: 700;
}
}
.currency {
position: relative;
top: -1.75rem;
font-weight: 600;
font-size: 4rem;
letter-spacing: 0;
}
.price {
position: relative;
font-size: 5.5rem;
font-weight: 900;
height: 6rem;
margin-bottom: 2rem;
}
.permonth {
font-size: 4rem;
}
.cell-footer {
.btn-free {
white-space: normal;
color: white;
background-color: darken($free-color, 5);
&:hover, &:active, &:focus {
background-color: darken($free-color, 10);
}
}
.btn-standard {
white-space: normal;
color: white;
background-color: darken($standard-color, 5);
&:hover, &:active, &:focus {
background-color: darken($standard-color, 10);
}
}
.btn-plus {
white-space: normal;
color: white;
background-color: darken($plus-color, 5);
&:hover, &:active, &:focus {
background-color: darken($plus-color, 10);
}
}
.btn-enterprise {
white-space: normal;
color: white;
background-color: darken($enterprise-color, 5);
&:hover, &:active, &:focus {
background-color: darken($enterprise-color, 10);
}
}
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment