agw/overleaf-cep
1
0
Fork 0
mirror of https://github.com/yu-i-i/overleaf-cep.git synced 2026-05-31 12:51:35 +02:00
Code Issues Packages Projects Releases Wiki Activity

Move style from winning test variant to main class

Browse Source 
`.more-details` contained style for the winning variant. Move these CSS declarations to main class of page, `.plans`.

Also alphabetize CSS classes.

Remove .more-details and extra .container from layout

CSS statements for .more-details were moved to .plans
This commit is contained in:
Jessica Lawshe
2018-08-27 09:26:19 -05:00
parent ae85bfafef
commit e1fbef6910
2 changed files with 88 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
services/web/app/views/subscriptions/plans.pug
View File

@@ -10,8 +10,8 @@ block scripts
block content
.content.content-alt
.content.plans(ng-controller="PlansController")
.container(class="more-details" ng-cloak)
.plans(ng-controller="PlansController")
.container(ng-cloak)
.row
.col-md-12
.page-header.centered.plans-header.text-centered

178
services/web/public/stylesheets/app/plans.less
View File

@@ -3,20 +3,23 @@
color: @gray-dark;
margin-bottom: @line-height-computed;
}
.plans-header{
h1, h2, p {
text-shadow: 0 -1px 1px white;
}
h1, h2 {
color: @red;
}
p {
margin-bottom: 0;
.best-value {
color: @red;
line-height: @line-height-computed;
}
blockquote {
footer{
/* accessibility fix */
color: @gray-med;
}
}
.plans-subheader {
margin-bottom: @line-height-computed;
.btn-header {
font-family: @font-family-sans-serif;
margin-left: 10px;
margin-top: -10px;
text-shadow: 0 0 0;
}
.card .btn { white-space:normal; }
.card.features {
margin-top: @line-height-computed;
i {
@@ -32,7 +35,22 @@
padding-bottom: @line-height-computed * 2;
}
}
.card-first, .card-last {
background: @white-med;
}
.card-highlighted {
border: @highlight-border solid @gray-lighter;
padding-top: 10px!important;
.best-value {
margin-bottom: 15px;
}
.card-header {
padding-bottom: 22px; /* align hr with other plans */
}
}
.card-header {
margin-bottom: 15px;
}
.circle {
font-size: 1.5rem;
font-weight: 700;
@@ -46,10 +64,56 @@
color: white;
white-space: nowrap;
span.small {
color: rgba(255, 255, 255, 0.75);
color: rgba(255, 255, 255, 0.85);
font-size: @font-size-base * .8;
}
}
.circle-img {
border-radius: 50%;
float: right;
height: 100px;
overflow: hidden;
position: relative;
width: 100px;
img {
display: inline;
margin: 0 auto;
width: 100%;
}
}
.faq {
p {
margin: 0
}
}
.plans-header{
h1, h2, p {
text-shadow: 0 -1px 1px white;
}
h1, h2 {
color: @red;
}
p {
margin-bottom: 0;
}
}
.plans-subheader {
margin-bottom: @line-height-computed;
}
.questions-header {
color: @red;
line-height: 37px;
margin: 0;
text-align: right;
}
.tagline {
margin-bottom: 20px;
}
.top-switch {
.currency-dropdown {
margin-right: -15px;
}
}
ul.nav-pills {
text-align: center;
margin-bottom: @line-height-computed;
@@ -61,14 +125,6 @@
margin-left: @line-height-computed / 2;
}
}
.card .btn { white-space:normal; }
.top-switch {
.currency-dropdown {
margin-right: -15px;
}
}
}
#changePlanSection {
@@ -141,74 +197,10 @@ input.paymentTypeOption.ng-valid {
@highlight-color: #d3584b;
@gray-med: #6d6d6d;
@white-med: #fdfdfd;
.more-details {
.best-value {
color: @red;
line-height: @line-height-computed;
}
blockquote {
footer{
/* accessibility fix */
color: @gray-med;
}
}
.btn-header {
font-family: @font-family-sans-serif;
margin-left: 10px;
margin-top: -10px;
text-shadow: 0 0 0;
}
.card-first, .card-last {
background: @white-med;
}
.card-highlighted {
border: @highlight-border solid @gray-lighter;
padding-top: 10px!important;
.best-value {
margin-bottom: 15px;
}
.card-header {
padding-bottom: 22px; /* align hr with other plans */
}
}
.card-header {
margin-bottom: 15px;
}
.circle {
/* accessibility fix */
span.small {
color: rgba(255, 255, 255, 0.85)
}
}
.circle-img {
border-radius: 50%;
float: right;
height: 100px;
overflow: hidden;
position: relative;
width: 100px;
img {
display: inline;
margin: 0 auto;
width: 100%;
}
}
.faq:last-child {
p {
margin-bottom: 0;
}
}
.questions-header {
color: @red;
line-height: 37px;
margin: 0;
text-align: right;
}
.tagline {
margin-bottom: 20px;
}
/* Media Queries */
@media (max-width: @screen-md-min) {
/* Media Queries */
@media (max-width: @screen-sm-max) {
.plans {
.card-highlighted {
/*override style in cards.less */
margin-top: @line-height-computed!important;
@@ -217,8 +209,10 @@ input.paymentTypeOption.ng-valid {
float: left;
margin: 0 15px;
}
}
@media (min-width: @screen-md-min) {
}
}
@media (min-width: @screen-md-min) {
.plans {
blockquote {
margin-bottom: 0;
}
@@ -390,4 +384,4 @@ input.paymentTypeOption.ng-valid {
.tooltip.in {
min-width: 200px
}
}
}