sq: tab and plan clean up

This commit is contained in:
Rob Szumski 2015-10-23 01:12:24 +00:00 committed by Joseph Schorr
parent bbffe66387
commit 8e44c7b280
2 changed files with 44 additions and 22 deletions

View file

@ -13,8 +13,8 @@
.plans-panel .plan-tabs {
text-align: center;
margin-left: 30px;
margin-right: 30px;
padding-left: 30px;
padding-right: 30px;
margin-bottom: 40px;
}
@ -24,10 +24,16 @@
width: 49%;
}
.plans-panel .plans-tab a {
.plans-panel .plan-tabs a {
padding-bottom: 25px;
}
.plans-panel .plan-tabs a:hover {
background-color: transparent;
border: 0px;
cursor: pointer;
}
.plans-panel .plan-tabs a .tab-logo {
display: block;
margin-bottom: 25px;
@ -43,7 +49,12 @@
display: block;
text-align: center;
font-size: 16px;
color: #888;
color: #1D314F;
font-weight: 300;
}
.plans-panel .plan-tabs a:hover .tab-title {
color: #51A3D9;
}
@media (max-width: 767px) {
@ -68,17 +79,20 @@
content: "-";
text-transform: uppercase;
color: white;
height: 25px;
}
.plans-panel .plan-col.popular:before {
content: "Most Popular";
color: #2276ad;
height: 25px;
line-height: 25px;
background-color: #c1dff3;
}
.plans-panel .plan-box {
background-color: #1d3447;
color: #ddd;
color: #fff;
padding: 20px;
}
@ -106,7 +120,7 @@
.plans-panel .plan-box .plan-header .plan-box-price {
float: right;
width: 60px;
font-size: 22px;
font-size: 18px;
position: relative;
}
@ -116,6 +130,10 @@
width: 100%;
}
.plans-panel .plan-box .trial-button .fa {
padding-left: 5px;
}
.plans-panel .plan-box select {
margin-bottom: 10px;
}
@ -123,15 +141,7 @@
.plans-panel .plan-box ul {
padding: 0px;
padding-left: 16px;
}
.plans-panel .plan-box .plan-header .plan-box-price:after {
content: "/ mo";
position: absolute;
top: 9px;
right: 0px;
font-size: 12px;
color: #aaa;
list-style: square;
}
.plans-panel .plan-features {

View file

@ -34,7 +34,7 @@
<div class="col-md-3 plan-col">
<div class="plan-box">
<div class="plan-header">
<span class="plan-box-price">$12</span>
<span class="plan-box-price">$12/mo</span>
<b>Personal</b>
</div>
<ul>
@ -42,7 +42,10 @@
<li>Unlimited public repos</li>
</ul>
<div class="plan-description">Great for individuals</div>
<button class="btn btn-primary trial-button" ng-click="buyNow('personal-30')">Start Free Trial</button>
<a href="javascript:void(0)" class="btn btn-primary trial-button" ng-click="buyNow('personal-30')">
Start Free Trial
<span class="fa fa-angle-double-right"></span>
</a>
</div>
<ul class="plan-features">
@ -54,7 +57,7 @@
<div class="col-md-3 plan-col">
<div class="plan-box">
<div class="plan-header">
<span class="plan-box-price">$25</span>
<span class="plan-box-price">$25/mo</span>
<b>Skiff</b>
</div>
<ul>
@ -63,7 +66,10 @@
<li>Team-based permissions</li>
</ul>
<div class="plan-description">Great for startups</div>
<button class="btn btn-primary trial-button" ng-click="buyNow('bus-micro-30')">Start Free Trial</button>
<a href="javascript:void(0)" class="btn btn-primary trial-button" ng-click="buyNow('bus-micro-30')">
Start Free Trial
<span class="fa fa-angle-double-right"></span>
</a>
</div>
<ul class="plan-features">
@ -75,7 +81,7 @@
<div class="col-md-3 plan-col popular">
<div class="plan-box">
<div class="plan-header">
<span class="plan-box-price">$50</span>
<span class="plan-box-price">$50/mo</span>
<b>Yacht</b>
</div>
<ul>
@ -84,7 +90,10 @@
<li>Team-based permissions</li>
</ul>
<div class="plan-description">Great for small businesses</div>
<button class="btn btn-primary trial-button" ng-click="buyNow('bus-small-30')">Start Free Trial</button>
<a href="javascript:void(0)" class="btn btn-primary trial-button" ng-click="buyNow('bus-small-30')">
Start Free Trial
<span class="fa fa-angle-double-right"></span>
</a>
</div>
<ul class="plan-features">
@ -111,7 +120,10 @@
<li>Team-based permissions</li>
</ul>
<div class="plan-description">Great for enterprises</div>
<button class="btn btn-primary trial-button" ng-click="buyNow(dropdownPlan)">Start Free Trial</button>
<a href="javascript:void(0)" class="btn btn-primary trial-button" ng-click="buyNow(dropdownPlan)">
Start Free Trial
<span class="fa fa-angle-double-right"></span>
</a>
</div>
<ul class="plan-features">