clipbucket/upload/styles/cb_27/theme/assets/css/less/page.pricing.less

153 lines
2.3 KiB
Text
Raw Normal View History

2014-01-30 08:21:55 +00:00
/* pricing table */
.pricing-box {
&:not(:first-child) {
padding-left:7px;
}
&:not(:last-child) {
padding-right:7px;
}
.price{
font-size:22px;
line-height:20px; height:28px;
text-align:center;
color:#555;
small { font-size:14px; }
}
.btn { font-size:16px; } /* the purchase button */
.widget-header {/* the title */
text-align:center;
padding-left:0;
}
}
@media only screen and (max-width: @screen-tablet) {
.pricing-box {
margin: 0;
margin-bottom:16px;
padding-left:0 !important;
padding-right:0 !important;
margin-left: -1px;
&:nth-child(odd) {
padding-left: @grid-gutter-width / 2 !important;
}
&:nth-child(even) {
padding-right: @grid-gutter-width / 2 !important;
}
}
}
@media only screen and (max-width: @screen-topbar-down) {
.pricing-box {
margin: 0;
margin-bottom:16px;
width:100%;
padding-left:@grid-gutter-width / 2 !important;
padding-right:@grid-gutter-width / 2 !important;
}
}
.pricing-table-header {
padding-top:0;
margin-top:0;
text-align:left;
> li {
padding:7px 0 7px 11px;
font-size:13px;
}
}
.pricing-table {
margin-top:0;
> li {
text-align:center;
padding:7px 0;
font-size:13px;
}
}
.list-striped {
> li {
&:nth-child(odd) {
background-color:#FFF;
}
&:nth-child(even) {
background-color:#F2F3EB;
}
}
&.pricing-table-header > li:nth-child(even) {
background-color:#EEE;
}
}
.pricing-box-small {
box-shadow:none;
margin-left:-2px;
background-color:#FFF;
position:relative;
z-index:10;
.price {
line-height:20px; height:28px;
text-align:center;
.label {
&:before, &:after {
margin-top:-2px;
.opacity(0.9);
}
}
}
&:hover {
box-shadow:0 0 4px 2px rgba(0,0,0,0.15);
z-index:11;
.scale(1.04);
//-webkit-transform:none;/*chrome blurs when scaled, so disable it!*/
.price > .label {
.scale(0.96);
//-webkit-transform:none;
}
}
}
.pricing-span {
margin:0;
width:19%;
max-width:150px !important;
min-width:110px !important;
float:left !important;
}
.pricing-span-header {
padding-right: 0;
}
@media only screen and (min-width: @screen-xs-min) {
.pricing-span-body {
padding-left: 0;
padding-right: 0;
}
}
@media only screen and (max-width: @screen-xs) {
.pricing-span-header , .pricing-span-body {
width: 100%;
padding-right: @grid-gutter-width / 2;
}
}