diff --git a/services/web/app/views/subscriptions/plans/light-redesign/_cards_controls_tables.pug b/services/web/app/views/subscriptions/plans/light-redesign/_cards_controls_tables.pug index 597ffea026..47991ed48b 100644 --- a/services/web/app/views/subscriptions/plans/light-redesign/_cards_controls_tables.pug +++ b/services/web/app/views/subscriptions/plans/light-redesign/_cards_controls_tables.pug @@ -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') diff --git a/services/web/app/views/subscriptions/plans/light-redesign/_mixins.pug b/services/web/app/views/subscriptions/plans/light-redesign/_mixins.pug index 1e70396548..ba98fa7276 100644 --- a/services/web/app/views/subscriptions/plans/light-redesign/_mixins.pug +++ b/services/web/app/views/subscriptions/plans/light-redesign/_mixins.pug @@ -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()}` diff --git a/services/web/frontend/stylesheets/app/plans/plans-light-touch-redesign.less b/services/web/frontend/stylesheets/app/plans/plans-light-touch-redesign.less index 19b8877ef2..c969aa2947 100644 --- a/services/web/frontend/stylesheets/app/plans/plans-light-touch-redesign.less +++ b/services/web/frontend/stylesheets/app/plans/plans-light-touch-redesign.less @@ -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 } diff --git a/services/web/frontend/stylesheets/app/plans/plans-v2.less b/services/web/frontend/stylesheets/app/plans/plans-v2.less index 59592b4df8..88608cd1ac 100644 --- a/services/web/frontend/stylesheets/app/plans/plans-v2.less +++ b/services/web/frontend/stylesheets/app/plans/plans-v2.less @@ -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; }