diff --git a/services/web/app/views/subscriptions/_plans_page_mixins.pug b/services/web/app/views/subscriptions/_plans_page_mixins.pug
index 7c4d2eb158..5a86a22806 100644
--- a/services/web/app/views/subscriptions/_plans_page_mixins.pug
+++ b/services/web/app/views/subscriptions/_plans_page_mixins.pug
@@ -141,17 +141,17 @@ mixin currency_dropdown
mixin plan_switch(location)
ul.nav.nav-pills
li(ng-class="{'active': ui.view == 'monthly'}")
- a(
+ a.btn.btn-default-outline(
href="#"
ng-click="switchToMonthly($event,'" + location + "')"
) #{translate("monthly")}
li(ng-class="{'active': ui.view == 'annual'}")
- a(
+ a.btn.btn-default-outline(
href="#"
ng-click="switchToAnnual($event,'" + location + "')"
) #{translate("annual")}
li(ng-class="{'active': ui.view == 'student'}")
- a(
+ a.btn.btn-default-outline(
href="#"
ng-click="switchToStudent($event,'" + location + "')"
) #{translate("half_price_student")}
diff --git a/services/web/app/views/subscriptions/plans.pug b/services/web/app/views/subscriptions/plans.pug
index 9752c25919..6cf6b51a9d 100644
--- a/services/web/app/views/subscriptions/plans.pug
+++ b/services/web/app/views/subscriptions/plans.pug
@@ -3,13 +3,16 @@ extends ../layout
include _plans_page_mixins
include _plans_page_tables
+block vars
+ - metadata = { viewport: true }
+
block scripts
script(type='text/javascript').
window.recomendedCurrency = '#{recomendedCurrency}'
window.abCurrencyFlag = '#{abCurrencyFlag}'
block content
- .content.content-alt
+ .content.content-alt.content-page
.plans(ng-controller="PlansController")
.container(ng-cloak)
.row
@@ -75,11 +78,12 @@ block content
+card_student_monthly
.row.row-spaced-large.text-centered
- i.fa.fa-cc-mastercard.fa-2x
- i.fa.fa-cc-visa.fa-2x
- i.fa.fa-cc-amex.fa-2x
- i.fa.fa-cc-paypal.fa-2x
- div.text-centered #{translate('change_plans_any_time')}
#{translate('billed_after_x_days', {len:'{{trial_len}}'})}
+ .col-xs-12
+ i.fa.fa-cc-mastercard.fa-2x
+ i.fa.fa-cc-visa.fa-2x
+ i.fa.fa-cc-amex.fa-2x
+ i.fa.fa-cc-paypal.fa-2x
+ div.text-centered #{translate('change_plans_any_time')}
#{translate('billed_after_x_days', {len:'{{trial_len}}'})}
.row.row-spaced-large
.col-md-8.col-md-offset-2
@@ -117,7 +121,7 @@ block content
.row.row-spaced-large
.col-md-12
.plans-header.plans-subheader.text-centered
- h2 #{translate('still_have_questions')}
+ h2.header-with-btn #{translate('still_have_questions')}
button.btn.btn-default.btn-header.text-capitalize(
ng-controller="ContactGeneralModal"
ng-click="openModal()"
diff --git a/services/web/public/stylesheets/app/plans.less b/services/web/public/stylesheets/app/plans.less
index 7a56afcef1..4fae853662 100644
--- a/services/web/public/stylesheets/app/plans.less
+++ b/services/web/public/stylesheets/app/plans.less
@@ -84,6 +84,9 @@
margin: 0
}
}
+ .header-with-btn {
+ line-height: 1.6;
+ }
.plans-header{
h1, h2, p {
text-shadow: 0 -1px 1px white;
@@ -101,11 +104,6 @@
.tagline {
margin-bottom: 20px;
}
- .top-switch {
- .currency-dropdown {
- margin-right: -15px;
- }
- }
ul.nav-pills {
text-align: center;
margin-bottom: @line-height-computed;
@@ -161,14 +159,26 @@
/* Media Queries */
@media (max-width: @screen-sm-max) {
.plans {
- .card-highlighted {
+ .card-group {
/*override style in cards.less */
- margin-top: @line-height-computed!important;
+ .card {
+ margin-left: 0;
+ margin-right: 0;
+ }
+ .card-highlighted {
+ margin-top: @line-height-computed!important;
+ }
}
.circle-img {
float: left;
margin: 0 15px;
}
+ ul.nav-pills {
+ margin-bottom: @margin-xs;
+ li {
+ margin-bottom: @margin-sm;
+ }
+ }
}
}
@media (min-width: @screen-md-min) {
@@ -183,6 +193,11 @@
}
}
}
+ .top-switch {
+ .currency-dropdown {
+ margin-right: -15px;
+ }
+ }
}
}
@@ -221,6 +236,7 @@
font-family: @headings-font-family;
font-size: @font-size-h2;
font-weight: @headings-font-weight;
+ hyphens: auto;
line-height: @headings-line-height;
padding: 18px;
}
@@ -344,4 +360,33 @@
.tooltip.in {
min-width: 200px
}
+
+ /* Media Queries */
+ @media (max-width: @screen-sm-max) {
+ font-size: @font-size-small;
+ hyphens: auto;
+ margin-top: @best-val-height*2;
+ th {
+ font-size: @font-size-base;
+ padding-left: @padding-xs;
+ padding-right: @padding-xs;
+ }
+ td:first-child {
+ padding-left: @padding-xs;
+ }
+ tr:last-child {
+ td {
+ padding: @padding-xs;
+ .btn {
+ word-break: normal;
+ }
+ }
+ }
+ .best-value {
+ line-height: 1;
+ }
+ .btn {
+ font-size: @font-size-small;
+ }
+ }
}
\ No newline at end of file
diff --git a/services/web/public/stylesheets/components/buttons.less b/services/web/public/stylesheets/components/buttons.less
index 07ddf58f5a..998c10e6e3 100755
--- a/services/web/public/stylesheets/components/buttons.less
+++ b/services/web/public/stylesheets/components/buttons.less
@@ -58,6 +58,9 @@
.btn-default {
.button-variant(@btn-default-color; @btn-default-bg; @btn-default-border);
}
+.btn-default-outline {
+ .button-outline-variant(@btn-default-bg);
+}
.btn-primary {
.button-variant(@btn-primary-color; @btn-primary-bg; @btn-primary-border);
}
diff --git a/services/web/public/stylesheets/components/dropdowns.less b/services/web/public/stylesheets/components/dropdowns.less
index 8744c1f35c..b8b4db6118 100755
--- a/services/web/public/stylesheets/components/dropdowns.less
+++ b/services/web/public/stylesheets/components/dropdowns.less
@@ -82,7 +82,7 @@
&:hover,
&:focus {
text-decoration: none;
- color: @dropdown-link-hover-color;
+ color: @dropdown-link-hover-color!important;
background-color: @dropdown-link-hover-bg;
.subdued {
color: @dropdown-link-hover-color;
diff --git a/services/web/public/stylesheets/core/_common-variables.less b/services/web/public/stylesheets/core/_common-variables.less
index e446c10df4..1acf8daceb 100644
--- a/services/web/public/stylesheets/core/_common-variables.less
+++ b/services/web/public/stylesheets/core/_common-variables.less
@@ -81,6 +81,7 @@
@padding-xs-vertical: 1px;
@padding-xs-horizontal: 5px;
+@padding-xs: 5px;
@padding-sm: 10px;
@padding-md: 20px;
@padding-lg: 30px;
diff --git a/services/web/public/stylesheets/core/mixins.less b/services/web/public/stylesheets/core/mixins.less
index fa2bf76e40..bc704119d2 100755
--- a/services/web/public/stylesheets/core/mixins.less
+++ b/services/web/public/stylesheets/core/mixins.less
@@ -552,6 +552,51 @@
background-color: @color;
}
}
+.button-outline-variant(@color) {
+ color: @color;
+ background-color: transparent;
+ border-color: @color;
+
+ .alert & when (@is-overleaf = true) {
+ background-color: transparent;
+ }
+
+ &:hover,
+ &:focus,
+ &:active,
+ &.active,
+ &.checked,
+ .open .dropdown-toggle& {
+ color: @color;
+ background-color: transparent;
+ border-color: darken(@color, 12%);
+ .alert & when (@is-overleaf = true) {
+ background-color: transparent;
+ }
+ }
+ &:active,
+ &.active,
+ .open .dropdown-toggle& {
+ background-image: none;
+ }
+ &.disabled,
+ &[disabled],
+ fieldset[disabled] & {
+ &,
+ &:hover,
+ &:focus,
+ &:active,
+ &.active {
+ background-color: transparent;
+ border-color: @color;
+ }
+ }
+
+ .badge {
+ color: transparent;
+ background-color: @color;
+ }
+}
// Button sizes
// -------------------------