New plans page
This commit is contained in:
parent
7e42915755
commit
06806c97dd
2 changed files with 229 additions and 35 deletions
|
@ -662,42 +662,163 @@ i.toggle-icon:hover {
|
|||
|
||||
.plans-list .plan {
|
||||
vertical-align: top;
|
||||
|
||||
padding: 10px;
|
||||
border: 1px solid #eee;
|
||||
border-top: 4px solid #94C9F7;
|
||||
font-size: 1.4em;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.plans-list .plan.business-plan {
|
||||
border: 1px solid #eee;
|
||||
border-top: 4px solid #94F794;
|
||||
}
|
||||
|
||||
.plans-list .plan.bus-small {
|
||||
border: 1px solid #ddd;
|
||||
border-top: 4px solid #47A447;
|
||||
margin-top: 0px;
|
||||
font-size: 1.6em;
|
||||
border-top: 6px solid #46ac39;
|
||||
margin-top: -10px;
|
||||
}
|
||||
|
||||
.plans-list .plan.bus-small .plan-box {
|
||||
background: black !important;
|
||||
}
|
||||
|
||||
.plans-list .plan:last-child {
|
||||
margin-right: 0px;
|
||||
}
|
||||
|
||||
.plans-list .plan .plan-box {
|
||||
background: #444;
|
||||
padding: 10px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.plans-list .plan .plan-title {
|
||||
text-transform: uppercase;
|
||||
padding-top: 25px;
|
||||
padding-bottom: 20px;
|
||||
margin-bottom: 10px;
|
||||
display: block;
|
||||
font-weight: bold;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
.visible-sm-inline {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.hidden-sm-inline {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
@media (max-width: 991px) and (min-width: 768px) {
|
||||
.visible-sm-inline {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.hidden-sm-inline {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.plans-list .plan-box .description {
|
||||
color: white;
|
||||
margin-top: 6px;
|
||||
font-size: 12px !important;
|
||||
}
|
||||
|
||||
.plans-list .plan button {
|
||||
margin-top: 6px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.plans-list .plan.bus-small button {
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
.plans-list .features-bar {
|
||||
padding-top: 248px;
|
||||
}
|
||||
|
||||
.plans-list .features-bar .feature .count {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.plans-list .features-bar .feature {
|
||||
height: 43px;
|
||||
text-align: right;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.plans-list .features-bar .feature .feature-tooltip {
|
||||
border-bottom: 1px dotted black;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.plans-list .features-bar .feature i {
|
||||
margin-left: 16px;
|
||||
float: right;
|
||||
width: 16px;
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.plans-list .plan .features {
|
||||
padding: 6px;
|
||||
background: #eee;
|
||||
padding-bottom: 0px;
|
||||
}
|
||||
|
||||
.plans-list .plan .feature {
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
border-bottom: 1px solid #ddd;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.plans-list .plan .feature:after {
|
||||
content: "";
|
||||
border-radius: 50%;
|
||||
display: inline-block;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.plans-list .plan .visible-xs .feature {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.plans-list .plan .visible-xs .feature:after {
|
||||
float: left;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.plans-list .plan .feature.notpresent {
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.plans-list .plan .feature.present:after {
|
||||
background: #428bca;
|
||||
}
|
||||
|
||||
.plans-list .plan.business-plan .feature.present:after {
|
||||
background: #46ac39;
|
||||
}
|
||||
|
||||
.plans-list .plan .count, .plans-list .features-bar .count {
|
||||
background: white;
|
||||
border-bottom: 0px;
|
||||
text-align: center !important;
|
||||
}
|
||||
|
||||
.plans-list .plan .count b, .plans-list .features-bar .count b {
|
||||
font-size: 1.5em;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.plans-list .plan .feature:last-child {
|
||||
border-bottom: 0px;
|
||||
}
|
||||
|
||||
.plans-list .plan-price {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.plan-price {
|
||||
margin-bottom: 10px;
|
||||
display: block;
|
||||
font-weight: bold;
|
||||
font-size: 1.8em;
|
||||
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
|
Reference in a new issue