mirror of
https://github.com/overleaf/overleaf.git
synced 2024-11-07 20:31:06 -05:00
Merge pull request #19084 from overleaf/jel-light-touch-rename-css
[web] Rename CSS variables for light touch redesign GitOrigin-RevId: c84eb75a45af8270895795ceffef944696037881
This commit is contained in:
Jessica Lawshe
Copybot
parent
90d7925a02
commit
07d1f26731
4 changed files with 132 additions and 148 deletions
|
|
@ -51,7 +51,7 @@ include ./_mixins
|
|||
|
||||
+table_sticky_header_all(plansConfig)
|
||||
|
||||
.row.plans-v2-table-container(hidden data-ol-plans-v2-period='monthly')
|
||||
.row.plans-table-container(hidden data-ol-plans-v2-period='monthly')
|
||||
.col-sm-12(data-ol-plans-v2-view='individual' role="tabpanel")
|
||||
.row
|
||||
+table_individual('monthly')
|
||||
|
|
@ -59,7 +59,7 @@ include ./_mixins
|
|||
.row
|
||||
+table_student('monthly')
|
||||
|
||||
.row.plans-v2-table-container(data-ol-plans-v2-period='annual')
|
||||
.row.plans-table-container(data-ol-plans-v2-period='annual')
|
||||
.col-sm-12(data-ol-plans-v2-view='individual' id="panel-individual" role="tabpanel")
|
||||
.row
|
||||
+table_individual('annual')
|
||||
|
|
|
|||
|
|
@ -27,11 +27,11 @@ mixin currency_and_payment_methods()
|
|||
span.sr-only #{translate('payment_method_accepted', { paymentMethod: 'Paypal' })}
|
||||
|
||||
|
||||
mixin plans_v2_table(period, config)
|
||||
mixin plans_table(period, config)
|
||||
- var baseColspan = config.baseColspan || 1
|
||||
- var maxColumn = config.maxColumn || 4
|
||||
- var tableHeadKeys = Object.keys(config.tableHead)
|
||||
tr(class=`plans-v2-table-cols-${tableHeadKeys.length}`)
|
||||
tr(class=`plans-table-cols-${tableHeadKeys.length}`)
|
||||
th(colspan=baseColspan)
|
||||
- for (var i = 0; i < maxColumn; i++)
|
||||
- var tableHeadKey = tableHeadKeys[i]
|
||||
|
|
@ -42,13 +42,13 @@ mixin plans_v2_table(period, config)
|
|||
- var additionalEventSegmentation = config.additionalEventSegmentation || {}
|
||||
-
|
||||
if (highlighted) {
|
||||
var thClass = 'plans-v2-table-green-highlighted'
|
||||
var thClass = 'plans-table-green-highlighted'
|
||||
} else if (i === config.highlightedColumn.index - 1) {
|
||||
var thClass = 'plans-v2-table-cell-before-green-highlighted-column'
|
||||
var thClass = 'plans-table-cell-before-green-highlighted-column'
|
||||
} else {
|
||||
var thClass = ''
|
||||
}
|
||||
thClass += ' plans-v2-table-column-header'
|
||||
thClass += ' plans-table-column-header'
|
||||
if (colspan > 1) {
|
||||
var scopeValue = 'colgroup'
|
||||
}
|
||||
|
|
@ -82,9 +82,9 @@ mixin plans_v2_table(period, config)
|
|||
colspan=colspan
|
||||
scope=scopeValue
|
||||
)
|
||||
.plans-v2-table-th
|
||||
.plans-table-th
|
||||
if (highlighted)
|
||||
p.plans-v2-table-green-highlighted-text #{translate(config.highlightedColumn.text[period]).toUpperCase()}
|
||||
p.plans-table-green-highlighted-text #{translate(config.highlightedColumn.text[period]).toUpperCase()}
|
||||
case tableHeadKey
|
||||
when 'individual_free'
|
||||
+table_head_individual_free(highlighted, period)
|
||||
|
|
@ -133,10 +133,10 @@ mixin plans_v2_table(period, config)
|
|||
span.sr-only #{translate(featuresPerSection.dividerInfo)}
|
||||
for feature, featureIndex in featuresPerSection.items
|
||||
tr(
|
||||
class=(featureIndex === (featuresPerSection.items.length - 1) ? `plans-v2-table-row-last-row-per-section plans-v2-table-cols-${tableHeadKeys.length}` : `plans-v2-table-cols-${tableHeadKeys.length}`)
|
||||
class=(featureIndex === (featuresPerSection.items.length - 1) ? `plans-table-row-last-row-per-section plans-table-cols-${tableHeadKeys.length}` : `plans-table-cols-${tableHeadKeys.length}`)
|
||||
)
|
||||
th(
|
||||
class="plans-v2-table-row-header"
|
||||
class="plans-table-row-header"
|
||||
event-tracking="plans-page-table"
|
||||
event-tracking-trigger="hover"
|
||||
event-tracking-ga="subscription-funnel"
|
||||
|
|
@ -170,9 +170,9 @@ mixin plans_v2_table(period, config)
|
|||
- var colspan = tableHeadOptions.colspan || baseColspan
|
||||
-
|
||||
if (planIndex === config.highlightedColumn.index) {
|
||||
var tdClass = 'plans-v2-table-green-highlighted'
|
||||
var tdClass = 'plans-table-green-highlighted'
|
||||
} else if (planIndex === config.highlightedColumn.index - 1) {
|
||||
var tdClass = 'plans-v2-table-cell-before-green-highlighted-column'
|
||||
var tdClass = 'plans-table-cell-before-green-highlighted-column'
|
||||
} else {
|
||||
var tdClass = ''
|
||||
}
|
||||
|
|
@ -183,55 +183,55 @@ mixin plans_v2_table(period, config)
|
|||
+table_cell(feature, plan)
|
||||
|
||||
mixin table_individual(period)
|
||||
table.card.plans-v2-table.plans-v2-table-individual
|
||||
+plans_v2_table(period, plansConfig.individual)
|
||||
table.card.plans-table.plans-table-individual
|
||||
+plans_table(period, plansConfig.individual)
|
||||
|
||||
mixin table_group
|
||||
table.card.plans-v2-table.plans-v2-table-group
|
||||
+plans_v2_table('annual', plansConfig.group)
|
||||
table.card.plans-table.plans-table-group
|
||||
+plans_table('annual', plansConfig.group)
|
||||
|
||||
mixin table_student(period)
|
||||
table.card.plans-v2-table.plans-v2-table-student
|
||||
+plans_v2_table(period, plansConfig.student)
|
||||
table.card.plans-table.plans-table-student
|
||||
+plans_table(period, plansConfig.student)
|
||||
|
||||
mixin table_head_individual_free(highlighted, period)
|
||||
.plans-v2-table-th-content
|
||||
p.plans-v2-table-th-content-title #{translate("free")}
|
||||
.plans-table-th-content
|
||||
p.plans-table-th-content-title #{translate("free")}
|
||||
+table_head_price('free', period)
|
||||
.plans-v2-table-btn-buy-container-mobile
|
||||
.plans-table-btn-buy-container-mobile
|
||||
+btn_buy_individual_free(highlighted)
|
||||
ul.plans-v2-table-th-content-benefit
|
||||
ul.plans-table-th-content-benefit
|
||||
li #{translate("one_collaborator")}
|
||||
.plans-v2-table-btn-buy-container-desktop
|
||||
.plans-table-btn-buy-container-desktop
|
||||
+btn_buy_individual_free(highlighted)
|
||||
|
||||
mixin table_head_individual_collaborator(highlighted, eventTrackingKey, additionalEventSegmentation, period)
|
||||
.plans-v2-table-th-content
|
||||
p.plans-v2-table-th-content-title #{translate("standard")}
|
||||
.plans-table-th-content
|
||||
p.plans-table-th-content-title #{translate("standard")}
|
||||
+table_head_price('collaborator', period)
|
||||
.plans-v2-table-btn-buy-container-mobile
|
||||
.plans-table-btn-buy-container-mobile
|
||||
+btn_buy_individual_collaborator(highlighted, eventTrackingKey, additionalEventSegmentation, period)
|
||||
ul.plans-v2-table-th-content-benefit
|
||||
ul.plans-table-th-content-benefit
|
||||
li !{translate("x_collaborators_per_project", {collaboratorsCount: '10'})}
|
||||
li #{translate("all_premium_features")}
|
||||
.plans-v2-table-btn-buy-container-desktop
|
||||
.plans-table-btn-buy-container-desktop
|
||||
+btn_buy_individual_collaborator(highlighted, eventTrackingKey, additionalEventSegmentation, period)
|
||||
|
||||
mixin table_head_individual_professional(highlighted, eventTrackingKey, additionalEventSegmentation, period)
|
||||
.plans-v2-table-th-content
|
||||
p.plans-v2-table-th-content-title #{translate("professional")}
|
||||
.plans-table-th-content
|
||||
p.plans-table-th-content-title #{translate("professional")}
|
||||
+table_head_price('professional', period)
|
||||
.plans-v2-table-btn-buy-container-mobile
|
||||
.plans-table-btn-buy-container-mobile
|
||||
+btn_buy_individual_professional(highlighted, eventTrackingKey, additionalEventSegmentation, period)
|
||||
ul.plans-v2-table-th-content-benefit
|
||||
ul.plans-table-th-content-benefit
|
||||
li !{translate("unlimited_collabs_rt",{},["b"])}
|
||||
li #{translate("all_premium_features")}
|
||||
.plans-v2-table-btn-buy-container-desktop
|
||||
.plans-table-btn-buy-container-desktop
|
||||
+btn_buy_individual_professional(highlighted, eventTrackingKey, additionalEventSegmentation, period)
|
||||
|
||||
mixin table_head_group_collaborator(highlighted, eventTrackingKey, additionalEventSegmentation)
|
||||
.plans-v2-table-th-content
|
||||
p.plans-v2-table-th-content-title #{translate("group_standard")}
|
||||
.plans-table-th-content
|
||||
p.plans-table-th-content-title #{translate("group_standard")}
|
||||
.plans-v2-table-price-container
|
||||
strike.plans-v2-table-price-before-discount
|
||||
+gen_localized_price_for_plan_view('collaborator', 'annual')
|
||||
|
|
@ -239,20 +239,20 @@ mixin table_head_group_collaborator(highlighted, eventTrackingKey, additionalEve
|
|||
span(data-ol-plans-v2-group-price-per-user='collaborator') #{initialLocalizedGroupPrice.pricePerUser.collaborator}
|
||||
p.plans-v2-table-price-period-label
|
||||
| #{translate('per_user_year')}
|
||||
.plans-v2-table-btn-buy-container-mobile
|
||||
.plans-table-btn-buy-container-mobile
|
||||
+btn_buy_group_collaborator(highlighted, eventTrackingKey)
|
||||
+additional_link_group(eventTrackingKey, additionalEventSegmentation, 'group_collaborator')
|
||||
ul.plans-v2-table-th-content-benefit
|
||||
ul.plans-table-th-content-benefit
|
||||
li #{translate("up_to")} !{translate("x_collaborators_per_project", {collaboratorsCount: '10'})}
|
||||
li
|
||||
+table_head_group_total_per_year('collaborator')
|
||||
.plans-v2-table-btn-buy-container-desktop
|
||||
.plans-table-btn-buy-container-desktop
|
||||
+btn_buy_group_collaborator(highlighted, eventTrackingKey)
|
||||
+additional_link_group(eventTrackingKey, additionalEventSegmentation, 'group_collaborator')
|
||||
|
||||
mixin table_head_group_professional(highlighted, eventTrackingKey, additionalEventSegmentation)
|
||||
.plans-v2-table-th-content
|
||||
p.plans-v2-table-th-content-title #{translate("group_professional")}
|
||||
.plans-table-th-content
|
||||
p.plans-table-th-content-title #{translate("group_professional")}
|
||||
.plans-v2-table-price-container
|
||||
strike.plans-v2-table-price-before-discount
|
||||
+gen_localized_price_for_plan_view('professional', 'annual')
|
||||
|
|
@ -260,14 +260,14 @@ mixin table_head_group_professional(highlighted, eventTrackingKey, additionalEve
|
|||
span(data-ol-plans-v2-group-price-per-user='professional') #{initialLocalizedGroupPrice.pricePerUser.professional}
|
||||
p.plans-v2-table-price-period-label
|
||||
| #{translate('per_user_year')}
|
||||
.plans-v2-table-btn-buy-container-mobile
|
||||
.plans-table-btn-buy-container-mobile
|
||||
+btn_buy_group_professional(highlighted, eventTrackingKey)
|
||||
+additional_link_group(eventTrackingKey, additionalEventSegmentation, 'group_professional')
|
||||
ul.plans-v2-table-th-content-benefit
|
||||
ul.plans-table-th-content-benefit
|
||||
li #{translate("unlimited_collaborators_in_each_project")}
|
||||
li
|
||||
+table_head_group_total_per_year('professional')
|
||||
.plans-v2-table-btn-buy-container-desktop
|
||||
.plans-table-btn-buy-container-desktop
|
||||
+btn_buy_group_professional(highlighted, eventTrackingKey)
|
||||
+additional_link_group(eventTrackingKey, additionalEventSegmentation, 'group_professional')
|
||||
|
||||
|
|
@ -283,14 +283,14 @@ mixin table_head_group_total_per_year(groupPlan)
|
|||
|
||||
mixin table_head_group_organization(highlighted, eventTrackingKey, additionalEventSegmentation)
|
||||
- var segmentation = JSON.stringify(Object.assign({}, {button: 'group_organization-link', location: 'table-header-list', period: 'annual'}, additionalEventSegmentation))
|
||||
.plans-v2-table-th-content
|
||||
p.plans-v2-table-th-content-title #{translate("organization")}
|
||||
.plans-table-th-content
|
||||
p.plans-table-th-content-title #{translate("organization")}
|
||||
.plans-v2-table-comments-icon
|
||||
i.fa.fa-comments-o
|
||||
.plans-v2-table-btn-buy-container-mobile
|
||||
.plans-table-btn-buy-container-mobile
|
||||
+btn_buy_group_organization(highlighted, eventTrackingKey)
|
||||
small.plans-v2-table-th-content-additional-link.invisible(aria-hidden="true")
|
||||
ul.plans-v2-table-th-content-benefit
|
||||
small.plans-table-th-content-additional-link.invisible(aria-hidden="true")
|
||||
ul.plans-table-th-content-benefit
|
||||
li #{translate("best_choices_companies_universities_non_profits")}
|
||||
li #{translate("for_groups_or_site_wide")}
|
||||
li
|
||||
|
|
@ -302,46 +302,46 @@ mixin table_head_group_organization(highlighted, eventTrackingKey, additionalEve
|
|||
event-tracking-trigger="click"
|
||||
event-segmentation=segmentation
|
||||
) #{translate("also_available_as_on_premises")}
|
||||
.plans-v2-table-btn-buy-container-desktop
|
||||
.plans-table-btn-buy-container-desktop
|
||||
+btn_buy_group_organization(highlighted, eventTrackingKey)
|
||||
small.plans-v2-table-th-content-additional-link.invisible(aria-hidden="true")
|
||||
small.plans-table-th-content-additional-link.invisible(aria-hidden="true")
|
||||
|
||||
mixin table_head_student_free(highlighted, period)
|
||||
div.plans-v2-table-th-content
|
||||
p.plans-v2-table-th-content-title #{translate("free")}
|
||||
div.plans-table-th-content
|
||||
p.plans-table-th-content-title #{translate("free")}
|
||||
+table_head_price('free', period)
|
||||
.plans-v2-table-btn-buy-container-mobile
|
||||
.plans-table-btn-buy-container-mobile
|
||||
+btn_buy_student_free(highlighted)
|
||||
ul.plans-v2-table-th-content-benefit
|
||||
ul.plans-table-th-content-benefit
|
||||
li #{translate("one_collaborator")}
|
||||
.plans-v2-table-btn-buy-container-desktop
|
||||
.plans-table-btn-buy-container-desktop
|
||||
+btn_buy_student_free(highlighted)
|
||||
|
||||
mixin table_head_student_student(highlighted, eventTrackingKey, additionalEventSegmentation, period, showExtraContent)
|
||||
div.plans-v2-table-th-content
|
||||
p.plans-v2-table-th-content-title #{translate("student")}
|
||||
div.plans-table-th-content
|
||||
p.plans-table-th-content-title #{translate("student")}
|
||||
+table_head_price('student', period)
|
||||
.plans-v2-table-btn-buy-container-mobile
|
||||
.plans-table-btn-buy-container-mobile
|
||||
+btn_buy_student_student(highlighted, eventTrackingKey, additionalEventSegmentation, period)
|
||||
ul.plans-v2-table-th-content-benefit
|
||||
ul.plans-table-th-content-benefit
|
||||
li !{translate("x_collaborators_per_project", {collaboratorsCount: '6'})}
|
||||
li #{translate("all_premium_features")}
|
||||
if showExtraContent
|
||||
li
|
||||
b !{translate("for_students_only")}
|
||||
|
||||
.plans-v2-table-btn-buy-container-desktop
|
||||
.plans-table-btn-buy-container-desktop
|
||||
+btn_buy_student_student(highlighted, eventTrackingKey, additionalEventSegmentation, period)
|
||||
|
||||
mixin table_head_student_university(highlighted, eventTrackingKey, additionalEventSegmentation, period)
|
||||
div.plans-v2-table-th-content
|
||||
p.plans-v2-table-th-content-title #{translate("university")}
|
||||
div.plans-table-th-content
|
||||
p.plans-table-th-content-title #{translate("university")}
|
||||
div.plans-v2-table-comments-icon
|
||||
i.fa.fa-comments-o
|
||||
.plans-v2-table-btn-buy-container-mobile
|
||||
.plans-table-btn-buy-container-mobile
|
||||
+btn_buy_student_university(highlighted, eventTrackingKey, additionalEventSegmentation, period)
|
||||
p.plans-v2-table-th-content-benefit !{translate("all_our_group_plans_offer_educational_discount", {}, [{name: 'b'}, {name: 'b'}])}
|
||||
.plans-v2-table-btn-buy-container-desktop
|
||||
p.plans-table-th-content-benefit !{translate("all_our_group_plans_offer_educational_discount", {}, [{name: 'b'}, {name: 'b'}])}
|
||||
.plans-table-btn-buy-container-desktop
|
||||
+btn_buy_student_university(highlighted, eventTrackingKey, additionalEventSegmentation, period)
|
||||
|
||||
mixin table_head_price(plan, period)
|
||||
|
|
@ -361,8 +361,8 @@ mixin table_cell(feature, plan)
|
|||
- var planValue = feature.plans[plan]
|
||||
- var featureName = feature.feature
|
||||
|
||||
.plans-v2-table-cell
|
||||
.plans-v2-table-cell-content(
|
||||
.plans-table-cell
|
||||
.plans-table-cell-content(
|
||||
data-ol-plans-v2-table-cell-plan=plan
|
||||
data-ol-plans-v2-table-cell-feature=featureName
|
||||
)
|
||||
|
|
@ -538,7 +538,7 @@ mixin btn_buy_student_university(highlighted, eventTrackingKey, additionalEventS
|
|||
mixin additional_link_group(eventTrackingKey, additionalEventSegmentation, plan)
|
||||
- var buttonSegmentation = plan + '-link'
|
||||
- var segmentation = JSON.stringify(Object.assign({}, {button: buttonSegmentation, location: 'table-header'}, additionalEventSegmentation))
|
||||
small.plans-v2-table-th-content-additional-link
|
||||
small.plans-table-th-content-additional-link
|
||||
| #{translate("or")}
|
||||
a(
|
||||
href="/for/contact-sales"
|
||||
|
|
@ -555,7 +555,7 @@ mixin additional_link_buy(eventTrackingKey, additionalEventSegmentation, plan, p
|
|||
- var itmCampaign = itm_campaign ? { itm_campaign } : {itm_campaign: 'plans'}
|
||||
- var itmReferrer = itm_referrer ? { itm_referrer } : {}
|
||||
- var qs = new URLSearchParams({planCode: plan, currency: recommendedCurrency, itm_content: 'card', ...itmCampaign, ...itmReferrer})
|
||||
small.plans-v2-table-th-content-additional-link
|
||||
small.plans-table-th-content-additional-link
|
||||
| #{translate("or")}
|
||||
a(
|
||||
href=`/user/subscription/new?${qs.toString()}`
|
||||
|
|
|
|||
|
|
@ -342,7 +342,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
.plans-v2-table-container {
|
||||
.plans-table-container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
|
@ -434,23 +434,23 @@
|
|||
}
|
||||
}
|
||||
|
||||
.plans-v2-table-individual,
|
||||
.plans-v2-table-student {
|
||||
.plans-table-individual,
|
||||
.plans-table-student {
|
||||
margin-top: 40px + @plans-highlighted-text-height-desktop;
|
||||
|
||||
@media (max-width: @screen-xs-max) {
|
||||
margin-top: 60px + @plans-highlighted-text-height-desktop;
|
||||
|
||||
th .plans-v2-table-th-content {
|
||||
th .plans-table-th-content {
|
||||
min-height: 280px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.plans-v2-table-student {
|
||||
.plans-table-student {
|
||||
tr {
|
||||
// "hide" the last column on desktop by making the background-color as the default background color
|
||||
th:last-of-type > .plans-v2-table-th {
|
||||
th:last-of-type > .plans-table-th {
|
||||
background-color: @ol-blue-gray-0;
|
||||
}
|
||||
|
||||
|
|
@ -470,7 +470,7 @@
|
|||
td:last-child {
|
||||
background-color: @ol-blue-gray-0;
|
||||
|
||||
.plans-v2-table-cell {
|
||||
.plans-table-cell {
|
||||
border-bottom-right-radius: @plans-table-border-radius;
|
||||
|
||||
@media (max-width: @screen-xs-max) {
|
||||
|
|
@ -482,8 +482,8 @@
|
|||
}
|
||||
|
||||
// only make corners have round borders if the column is not highlighted
|
||||
th:not(.plans-v2-table-green-highlighted) {
|
||||
&:nth-last-child(2) .plans-v2-table-th {
|
||||
th:not(.plans-table-green-highlighted) {
|
||||
&:nth-last-child(2) .plans-table-th {
|
||||
border-top-right-radius: @plans-table-border-radius;
|
||||
|
||||
@media (max-width: @screen-xs-max) {
|
||||
|
|
@ -491,7 +491,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
&:nth-child(2) .plans-v2-table-th {
|
||||
&:nth-child(2) .plans-table-th {
|
||||
border-top-left-radius: @plans-table-border-radius;
|
||||
|
||||
@media (max-width: @screen-xs-max) {
|
||||
|
|
@ -512,7 +512,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
.plans-v2-table-individual {
|
||||
.plans-table-individual {
|
||||
tr {
|
||||
&:last-child {
|
||||
td:first-child {
|
||||
|
|
@ -530,7 +530,7 @@
|
|||
td:last-child {
|
||||
background-color: @ol-blue-gray-0;
|
||||
|
||||
.plans-v2-table-cell {
|
||||
.plans-table-cell {
|
||||
border-bottom-right-radius: @plans-table-border-radius;
|
||||
|
||||
@media (max-width: @screen-xs-max) {
|
||||
|
|
@ -546,7 +546,7 @@
|
|||
}
|
||||
|
||||
th {
|
||||
&:last-child .plans-v2-table-th {
|
||||
&:last-child .plans-table-th {
|
||||
border-top-right-radius: @plans-table-border-radius;
|
||||
|
||||
@media (max-width: @screen-xs-max) {
|
||||
|
|
@ -554,7 +554,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
&:nth-child(2) .plans-v2-table-th {
|
||||
&:nth-child(2) .plans-table-th {
|
||||
border-top-left-radius: @plans-table-border-radius;
|
||||
|
||||
@media (max-width: @screen-xs-max) {
|
||||
|
|
@ -564,10 +564,10 @@
|
|||
}
|
||||
}
|
||||
|
||||
.plans-v2-table-group {
|
||||
.plans-table-group {
|
||||
margin-top: 26px + @plans-highlighted-text-height-desktop;
|
||||
|
||||
p.plans-v2-table-th-content-title {
|
||||
p.plans-table-th-content-title {
|
||||
// Reduce font size of table heading for screen size >= @screen-lg (1200px) from 20px to 19px
|
||||
// In the English version of overleaf, 20px is enough for the text to not be wrapped to the next line, the longest text is the 2nd column of group tab: "Group Professional".
|
||||
// In the English version, "Group Professional" won't be wrapped to two separate lines with 20px font size for big screen.
|
||||
|
|
@ -588,7 +588,7 @@
|
|||
tr {
|
||||
// top right border radius on desktop only
|
||||
&:first-of-type {
|
||||
th:last-child > .plans-v2-table-th {
|
||||
th:last-child > .plans-table-th {
|
||||
border-top-right-radius: @plans-table-border-radius;
|
||||
|
||||
@media (max-width: @screen-xs-max) {
|
||||
|
|
@ -599,7 +599,7 @@
|
|||
|
||||
// bottom right border radius on desktop only
|
||||
&:last-of-type {
|
||||
td:last-child > .plans-v2-table-cell {
|
||||
td:last-child > .plans-table-cell {
|
||||
border-bottom-right-radius: @plans-table-border-radius;
|
||||
|
||||
@media (max-width: @screen-xs-max) {
|
||||
|
|
@ -610,15 +610,15 @@
|
|||
}
|
||||
}
|
||||
|
||||
.plans-v2-table {
|
||||
.plans-table {
|
||||
background-color: @ol-blue-gray-0;
|
||||
margin-bottom: 15px;
|
||||
table-layout: fixed;
|
||||
width: 100%;
|
||||
// We want these `div` inside `th` and `td` to have a 100% height since
|
||||
// white backgrounds are defined here:
|
||||
// 1. `td > div.plans-v2-table-cell`
|
||||
// 2. `th > div.plans-v2-table-th`
|
||||
// 1. `td > div.plans-table-cell`
|
||||
// 2. `th > div.plans-table-th`
|
||||
//
|
||||
// To make both of them have 100% height of their respective `td` and `th`,
|
||||
// we need to have the `table` has an explicit `height` rule.
|
||||
|
|
@ -627,7 +627,7 @@
|
|||
// See https://stackoverflow.com/a/56913789 for more details
|
||||
height: 100%;
|
||||
|
||||
.plans-v2-table-row-header {
|
||||
.plans-table-row-header {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
|
|
@ -635,13 +635,13 @@
|
|||
height: 100%;
|
||||
}
|
||||
|
||||
.plans-v2-table-column-header,
|
||||
.plans-table-column-header,
|
||||
td {
|
||||
background-clip: padding-box; /* needed for firefox when there is bg color */
|
||||
text-align: center;
|
||||
|
||||
&:not(.plans-v2-table-cell-before-green-highlighted-column):not(
|
||||
.plans-v2-table-green-highlighted
|
||||
&:not(.plans-table-cell-before-green-highlighted-column):not(
|
||||
.plans-table-green-highlighted
|
||||
):not(.plans-v2-table-divider-highlighted) {
|
||||
border-right: 1px solid @ol-blue-gray-0;
|
||||
|
||||
|
|
@ -651,7 +651,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
.plans-v2-table-column-header {
|
||||
.plans-table-column-header {
|
||||
border-top: 0;
|
||||
font-family: @headings-font-family;
|
||||
font-size: @font-size-h2;
|
||||
|
|
@ -675,7 +675,7 @@
|
|||
vertical-align: middle;
|
||||
height: 100%;
|
||||
|
||||
&:last-child:not(.plans-v2-table-green-highlighted):not(
|
||||
&:last-child:not(.plans-table-green-highlighted):not(
|
||||
.plans-v2-table-divider-highlighted
|
||||
) {
|
||||
border-right: 0;
|
||||
|
|
@ -690,7 +690,7 @@
|
|||
|
||||
// css hack for table border-radius on the first feature name
|
||||
&:nth-child(2) {
|
||||
.plans-v2-table-row-header:first-child {
|
||||
.plans-table-row-header:first-child {
|
||||
background-color: @ol-blue-gray-0;
|
||||
|
||||
.plans-v2-table-feature-name {
|
||||
|
|
@ -703,12 +703,12 @@
|
|||
}
|
||||
}
|
||||
|
||||
&:not(.plans-v2-table-row-last-row-per-section):not(
|
||||
&:not(.plans-table-row-last-row-per-section):not(
|
||||
.plans-v2-table-divider
|
||||
):not(:last-of-type) {
|
||||
th > .plans-v2-table-th > .plans-v2-table-th-content,
|
||||
th > .plans-table-th > .plans-table-th-content,
|
||||
td > .plans-v2-table-feature-name,
|
||||
td > .plans-v2-table-cell > .plans-v2-table-cell-content {
|
||||
td > .plans-table-cell > .plans-table-cell-content {
|
||||
border-bottom: 1px solid @ol-blue-gray-0;
|
||||
|
||||
@media (max-width: @screen-xs-max) {
|
||||
|
|
@ -718,8 +718,8 @@
|
|||
}
|
||||
|
||||
// this will show highlghted border-bottom on the last row
|
||||
&:last-child td.plans-v2-table-green-highlighted {
|
||||
> .plans-v2-table-cell {
|
||||
&:last-child td.plans-table-green-highlighted {
|
||||
> .plans-table-cell {
|
||||
border-bottom: 2px solid @ol-green;
|
||||
|
||||
@media (max-width: @screen-xs-max) {
|
||||
|
|
@ -739,7 +739,7 @@
|
|||
background-color: @table-hover-bg;
|
||||
|
||||
.plans-v2-table-feature-name,
|
||||
.plans-v2-table-cell {
|
||||
.plans-table-cell {
|
||||
background-color: @table-hover-bg;
|
||||
}
|
||||
}
|
||||
|
|
@ -760,31 +760,31 @@
|
|||
justify-content: space-around;
|
||||
}
|
||||
|
||||
// The forced width below (plans-v2-table-cols-n) is to ensure the table columns have an equal width
|
||||
// The forced width below (plans-table-cols-n) is to ensure the table columns have an equal width
|
||||
// because on mobile, the first column (empty cell on first `tr` and feature name on the rest of `tr`) will be shown as its own row
|
||||
// and the rest of the `tr` will incorporate a full width of the viewport
|
||||
tr.plans-v2-table-cols-4:not(.plans-v2-table-divider) {
|
||||
tr.plans-table-cols-4:not(.plans-v2-table-divider) {
|
||||
td,
|
||||
th:not(:first-of-type) {
|
||||
width: 25%;
|
||||
}
|
||||
}
|
||||
|
||||
tr.plans-v2-table-cols-3:not(.plans-v2-table-divider) {
|
||||
tr.plans-table-cols-3:not(.plans-v2-table-divider) {
|
||||
td,
|
||||
th:not(:first-of-type) {
|
||||
width: calc(100% / 3);
|
||||
}
|
||||
}
|
||||
|
||||
tr.plans-v2-table-cols-2:not(.plans-v2-table-divider) {
|
||||
tr.plans-table-cols-2:not(.plans-v2-table-divider) {
|
||||
td,
|
||||
th:not(:first-of-type) {
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.plans-v2-table-column-header {
|
||||
.plans-table-column-header {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
|
|
@ -797,7 +797,7 @@
|
|||
// the width: 100vw rule will enhance the flex-flow on the tr by ensuring the feature name (first column of each feature row)
|
||||
// will have the full width of viewport,
|
||||
// and making the first td appear like the it is in its own row (although it's technically still on the same tr as the other tds)
|
||||
.plans-v2-table-row-header {
|
||||
.plans-table-row-header {
|
||||
background: @gray-lightest;
|
||||
width: 100vw;
|
||||
|
||||
|
|
@ -812,14 +812,14 @@
|
|||
}
|
||||
}
|
||||
|
||||
// plans-v2-table-cell class only appears for the inner `div` of a `td`
|
||||
// plans-table-cell class only appears for the inner `div` of a `td`
|
||||
// that doesn't contain divider or feature name
|
||||
// (i.e it contains either check mark icon or a dash)
|
||||
.plans-v2-table-cell {
|
||||
.plans-table-cell {
|
||||
background-color: @white;
|
||||
height: 100%;
|
||||
|
||||
.plans-v2-table-cell-content {
|
||||
.plans-table-cell-content {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -827,18 +827,18 @@
|
|||
}
|
||||
|
||||
@media (max-width: @screen-xs-max) {
|
||||
.plans-v2-table-cell-content {
|
||||
.plans-table-cell-content {
|
||||
padding: 6px;
|
||||
min-height: @plans-table-td-mobile-min-height;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.plans-v2-table-th {
|
||||
.plans-table-th {
|
||||
height: 100%;
|
||||
background-color: @white;
|
||||
|
||||
.plans-v2-table-th-content {
|
||||
.plans-table-th-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 321px;
|
||||
|
|
@ -856,7 +856,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
.plans-v2-table-btn-buy-container-desktop {
|
||||
.plans-table-btn-buy-container-desktop {
|
||||
margin-top: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -867,7 +867,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
.plans-v2-table-btn-buy-container-mobile {
|
||||
.plans-table-btn-buy-container-mobile {
|
||||
display: none;
|
||||
|
||||
@media (max-width: @screen-xs-max) {
|
||||
|
|
@ -901,7 +901,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
p.plans-v2-table-th-content-title {
|
||||
p.plans-table-th-content-title {
|
||||
font-size: @font-size-large;
|
||||
padding-bottom: @padding-sm;
|
||||
border-bottom: 1px solid @gray-lighter;
|
||||
|
|
@ -911,10 +911,10 @@
|
|||
font-size: @font-size-base;
|
||||
}
|
||||
|
||||
// `plans-v2-table-th-content-title` is visually invisible on screen size less than @screen-xs-max
|
||||
// `plans-table-th-content-title` is visually invisible on screen size less than @screen-xs-max
|
||||
// because there is a sticky header (`plans-v2-table-sticky-header` class) that "replace" the content visually
|
||||
// (see the `@plans-table-sticky-header-z-index` variable that make the sticky header element is "above" the whole table)
|
||||
// however, we still need to properly styling the `plans-v2-table-th-content-title` for small screen size to
|
||||
// however, we still need to properly styling the `plans-table-th-content-title` for small screen size to
|
||||
// fit this element to the size of the sticky header
|
||||
// this trick is used because th element can not have a `position: sticky` rule, at least for our use case
|
||||
@media (max-width: @screen-xs-max) {
|
||||
|
|
@ -925,8 +925,8 @@
|
|||
}
|
||||
}
|
||||
|
||||
p.plans-v2-table-th-content-benefit,
|
||||
ul.plans-v2-table-th-content-benefit {
|
||||
p.plans-table-th-content-benefit,
|
||||
ul.plans-table-th-content-benefit {
|
||||
padding-top: 15px;
|
||||
font-size: @font-size-small;
|
||||
font-family: @font-family-sans-serif;
|
||||
|
|
@ -934,7 +934,7 @@
|
|||
hyphens: auto;
|
||||
}
|
||||
|
||||
ul.plans-v2-table-th-content-benefit {
|
||||
ul.plans-table-th-content-benefit {
|
||||
padding-left: 15px;
|
||||
text-align: left;
|
||||
margin-bottom: 0;
|
||||
|
|
@ -992,7 +992,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
small.plans-v2-table-th-content-additional-link {
|
||||
small.plans-table-th-content-additional-link {
|
||||
text-transform: lowercase;
|
||||
margin-top: @margin-xs;
|
||||
font-size: @font-size-extra-small;
|
||||
|
|
@ -1116,10 +1116,10 @@
|
|||
}
|
||||
}
|
||||
|
||||
// the `.plans-v2-table-green-highlighted` class below can be applied to both `th` and `td`
|
||||
.plans-v2-table-green-highlighted {
|
||||
> .plans-v2-table-cell,
|
||||
> .plans-v2-table-th {
|
||||
// the `.plans-table-green-highlighted` class below can be applied to both `th` and `td`
|
||||
.plans-table-green-highlighted {
|
||||
> .plans-table-cell,
|
||||
> .plans-table-th {
|
||||
border-left: 2px solid @ol-green;
|
||||
border-right: 2px solid @ol-green;
|
||||
|
||||
|
|
@ -1130,7 +1130,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
p.plans-v2-table-green-highlighted-text {
|
||||
p.plans-table-green-highlighted-text {
|
||||
border: 2px solid @ol-green;
|
||||
position: absolute;
|
||||
top: -1 * @plans-highlighted-text-height-desktop;
|
||||
|
|
@ -1284,8 +1284,8 @@
|
|||
margin-top: var(--spacing-09);
|
||||
}
|
||||
|
||||
.plans-v2-table,
|
||||
.plans-v2-table-column-header {
|
||||
.plans-table,
|
||||
.plans-table-column-header {
|
||||
background-color: transparent; // remove colors set by default variant
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1348,22 +1348,6 @@ p.plans-v2-table-green-highlighted-text {
|
|||
}
|
||||
}
|
||||
|
||||
.website-redesign {
|
||||
.plans-page {
|
||||
padding-top: calc(var(--spacing-16) + var(--header-height));
|
||||
|
||||
h1 {
|
||||
margin-top: 0;
|
||||
margin-bottom: var(--spacing-08);
|
||||
}
|
||||
|
||||
.plans-v2-table,
|
||||
.plans-v2-table-column-header {
|
||||
background-color: transparent; // remove colors set by default variant
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.plans-page-quote-row {
|
||||
margin: var(--spacing-13) 0;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue