diff --git a/services/web/app/views/subscriptions/plans/_faq_new.pug b/services/web/app/views/subscriptions/plans/_faq_new.pug index 910326a89b..d5fc6d3b05 100644 --- a/services/web/app/views/subscriptions/plans/_faq_new.pug +++ b/services/web/app/views/subscriptions/plans/_faq_new.pug @@ -10,51 +10,53 @@ include ../../_mixins/eyebrow h2 +eyebrow(translate("frequently_asked_questions")) | #{translate("your_questions_answered")} - .row.plans-faq-header-section - .col-xs-12.website-redesign-ol-tabs - ul.nav.nav-tabs - li.active(role="presentation") - a( - role="tab" - data-toggle="tab" - href='#' + managingYourSubscription - aria-controls=managingYourSubscription + + .row + .col-xs-12 + .ol-tabs-scrollable + .nav-tabs-container + ul.nav.nav-tabs + li.active(role="presentation") + a( + role="tab" + data-toggle="tab" + href='#' + managingYourSubscription + aria-controls=managingYourSubscription + ) + | #{translate('managing_your_subscription')} + li(role="presentation") + a( + role="tab" + data-toggle="tab" + href='#' + overleafIndividualPlans + aria-controls=overleafIndividualPlans + ) + | #{translate('overleaf_individual_plans')} + li(role="presentation") + a( + role="tab" + data-toggle="tab" + href='#' + overleafGroupPlans + aria-controls=overleafGroupPlans + ) + | #{translate('overleaf_group_plans')} + + .tab-content + .tab-pane.active( + role="tabpanel" + id=managingYourSubscription + data-ol-faq-tab-content=managingYourSubscription ) - | #{translate('managing_your_subscription')} - li(role="presentation") - a( - role="tab" - data-toggle="tab" - href='#' + overleafIndividualPlans - aria-controls=overleafIndividualPlans + +managingYourSubscription() + .tab-pane( + role="tabpanel" + id=overleafIndividualPlans + data-ol-faq-tab-content=overleafIndividualPlans ) - | #{translate('overleaf_individual_plans')} - li(role="presentation") - a( - role="tab" - data-toggle="tab" - href='#' + overleafGroupPlans - aria-controls=overleafGroupPlans + +overleafIndividualPlans() + .tab-pane( + role="tabpanel" + id=overleafGroupPlans + data-ol-faq-tab-content=overleafGroupPlans ) - | #{translate('overleaf_group_plans')} - .row.plans-faq-questions-section - .col-xs-12.faq-questions-container - .tab-content - .tab-pane.active( - role="tabpanel" - id=managingYourSubscription - data-ol-faq-tab-content=managingYourSubscription - ) - +managingYourSubscription() - .tab-pane( - role="tabpanel" - id=overleafIndividualPlans - data-ol-faq-tab-content=overleafIndividualPlans - ) - +overleafIndividualPlans() - .tab-pane( - role="tabpanel" - id=overleafGroupPlans - data-ol-faq-tab-content=overleafGroupPlans - ) - +overleafGroupPlans() + +overleafGroupPlans() diff --git a/services/web/app/views/subscriptions/plans/_plans_faq_tabs.pug b/services/web/app/views/subscriptions/plans/_plans_faq_tabs.pug index 3352829061..ea6f519240 100644 --- a/services/web/app/views/subscriptions/plans/_plans_faq_tabs.pug +++ b/services/web/app/views/subscriptions/plans/_plans_faq_tabs.pug @@ -1,5 +1,5 @@ mixin managingYourSubscription() - .accordions-container + .ol-accordions-container .custom-accordion-item button.custom-accordion-header.collapsed(type="button" data-toggle="collapse" data-target="#managingYourSubscriptionQ1" aria-expanded="false" aria-controls="managingYourSubscriptionQ1") | Can I change plans or cancel later? @@ -32,7 +32,7 @@ mixin managingYourSubscription() mixin overleafIndividualPlans() - .accordions-container + .ol-accordions-container .custom-accordion-item button.custom-accordion-header.collapsed(type="button" data-toggle="collapse" data-target="#overleafIndividualPlansQ1" aria-expanded="false" aria-controls="overleafIndividualPlansQ1") | How does the free trial work? @@ -103,7 +103,7 @@ mixin overleafIndividualPlans() mixin overleafGroupPlans() - .accordions-container + .ol-accordions-container .custom-accordion-item button.custom-accordion-header.collapsed(type="button" data-toggle="collapse" data-target="#overleafGroupPlansQ1" aria-expanded="false" aria-controls="overleafGroupPlansQ1") | What’s the difference between users and collaborators on an Overleaf group subscription? diff --git a/services/web/frontend/stylesheets/app/plans/plans-new-design.less b/services/web/frontend/stylesheets/app/plans/plans-new-design.less index 65e80b4407..e00b00e9f2 100644 --- a/services/web/frontend/stylesheets/app/plans/plans-new-design.less +++ b/services/web/frontend/stylesheets/app/plans/plans-new-design.less @@ -616,99 +616,10 @@ .plans-faq { .faq-heading-container { text-align: center; + margin-bottom: var(--spacing-13); @media (max-width: @screen-xs-max) { text-align: unset; } } - - .plans-faq-header-section { - text-align: center; - max-width: 900px; - margin-top: var(--spacing-13); - margin-left: auto; - margin-right: auto; - - .website-redesign-ol-tabs { - overflow-x: auto; - - @media (max-width: @screen-xs-max) { - padding: unset; - } - - .nav-tabs { - min-width: max-content; // This is for horizontal scrolling - - @media (max-width: @screen-xs-max) { - display: flex; - } - } - } - } - - .plans-faq-questions-section { - max-width: 850px; - margin: auto; - - .faq-questions-container { - @media (max-width: @screen-xs-max) { - padding: unset; - } - } - - .tab-content { - border: 0px; - } - } - - .accordions-container :last-child { - border: 0px !important; - } - - .accordions-container { - .custom-accordion-item { - width: 100%; - padding-top: var(--spacing-08); - padding-bottom: var(--spacing-09); - border-bottom: 1px solid var(--neutral-20); - - .custom-accordion-header { - text-align: left; - width: 100%; - font-size: var(--font-size-04); - font-weight: 600; - line-height: var(--line-height-03); - color: var(--neutral-90); - background-color: unset; - border: unset; - display: flex; - justify-content: space-between; - padding: unset; - - .custom-accordion-icon { - display: flex; - align-items: center; - transition: transform 0.35s ease; - margin-left: var(--spacing-08); - } - - &:not(.collapsed) { - .custom-accordion-icon { - transform: rotate(180deg); - transition: transform 0.35s ease; - } - } - } - - .custom-accordion-body { - background-color: unset; - text-align: left; - padding: unset; - padding-right: 2rem; - margin-top: var(--spacing-04); - font-size: var(--font-size-body-base); - line-height: var(--line-height-03); - } - } - } } diff --git a/services/web/frontend/stylesheets/components/accordion.less b/services/web/frontend/stylesheets/components/accordion.less new file mode 100644 index 0000000000..df22305493 --- /dev/null +++ b/services/web/frontend/stylesheets/components/accordion.less @@ -0,0 +1,50 @@ +.ol-accordions-container :last-child { + border: 0px !important; +} + +.ol-accordions-container { + .custom-accordion-item { + width: 100%; + padding-top: var(--spacing-08); + padding-bottom: var(--spacing-09); + border-bottom: 1px solid var(--neutral-20); + + .custom-accordion-header { + text-align: left; + width: 100%; + font-size: var(--font-size-04); + font-weight: 600; + line-height: var(--line-height-03); + color: var(--neutral-90); + background-color: unset; + border: unset; + display: flex; + justify-content: space-between; + padding: unset; + + .custom-accordion-icon { + display: flex; + align-items: center; + transition: transform 0.35s ease; + margin-left: var(--spacing-08); + } + + &:not(.collapsed) { + .custom-accordion-icon { + transform: rotate(180deg); + transition: transform 0.35s ease; + } + } + } + + .custom-accordion-body { + background-color: unset; + text-align: left; + padding: unset; + padding-right: 2rem; + margin-top: var(--spacing-04); + font-size: var(--font-size-body-base); + line-height: var(--line-height-03); + } + } +} diff --git a/services/web/frontend/stylesheets/components/tabs.less b/services/web/frontend/stylesheets/components/tabs.less index 7bf0841497..641e908557 100644 --- a/services/web/frontend/stylesheets/components/tabs.less +++ b/services/web/frontend/stylesheets/components/tabs.less @@ -39,49 +39,67 @@ } } -.website-redesign-ol-tabs { +.ol-tabs-scrollable { // Styling for Website redesign, it will be used in CMS Later on. - .nav-tabs { - border: 0 !important; - margin-bottom: 0; - margin-top: -@line-height-computed; //- adjusted for portal-name - padding: @padding-lg 0 @padding-md; - text-align: center; - } + max-width: 800px; + margin: 0 auto; - .nav-tabs > li { - display: inline-block; - float: none; + .nav-tabs-container { + overflow-x: auto; + margin-bottom: var(--spacing-11); - a { - border: 0; - color: @neutral-70; - border-bottom: 3px solid @neutral-20 !important; - margin-right: unset; - padding: var(--spacing-04); + .nav-tabs { + border: 0 !important; + margin: 0 auto; + padding: 0; + text-align: center; + min-width: max-content; // This is for horizontal scrolling - &:focus, - &:hover { + li { + display: inline-block; + float: none; + margin-bottom: 0; //override navs.less + + a { + border: 0; + color: @neutral-70; + border-bottom: 3px solid @neutral-20 !important; + margin-right: unset; + padding: var(--spacing-04); + + &:focus, + &:hover { + background-color: transparent !important; + border: 0; + } + } + } + + li.active > a { background-color: transparent !important; - border: 0; + border: 0 !important; + border-bottom: 3px solid @emerald-green !important; + color: @neutral-90 !important; + + &:hover { + border-bottom: 3px solid @emerald-green !important; + } + } + + @media (max-width: @screen-xs-max) { + text-align: left; } } } - li.active > a { - background-color: transparent !important; - border: 0 !important; - border-bottom: 3px solid @emerald-green !important; - color: @neutral-90 !important; - - &:hover { - border-bottom: 3px solid @emerald-green !important; - } + .tab-content { + border: 0 !important; //override navs.less + padding: 0 !important; //override navs.less } - .tab-content:extend(.container) { - background-color: transparent !important; - border: none !important; + .ol-accordions-container :first-child { + // remove top padding so we have spacing-11 between tab nav and tab content + padding-top: 0px !important; } } diff --git a/services/web/frontend/stylesheets/main-style.less b/services/web/frontend/stylesheets/main-style.less index ab84ed1ff3..1bcda9774b 100644 --- a/services/web/frontend/stylesheets/main-style.less +++ b/services/web/frontend/stylesheets/main-style.less @@ -78,6 +78,7 @@ @import 'components/interstitial.less'; // Components w/ JavaScript +@import 'components/accordion.less'; @import 'components/modals.less'; @import 'components/tooltip.less'; @import 'components/popovers.less';