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 deleted file mode 100644 index 2289501ffa..0000000000 --- a/services/web/frontend/stylesheets/app/plans/plans-light-touch-redesign.less +++ /dev/null @@ -1,1309 +0,0 @@ -// m-a stands for: monthly annual -@plans-m-a-switch-height: 34px; -@plans-m-a-switch-padding: 2px; -@plans-highlighted-text-height-desktop: 32px; -@plans-highlighted-text-height-mobile: 41px; -@plans-learn-more-link-color: hsl(206, 100%, 52%); -@plans-table-border-radius: var(--border-radius-medium-new); -@plans-table-td-mobile-min-height: 34px; -@highlighted-border: var(--border-width-base) solid var(--green-50); -@table-border-size: 2px; -@table-border: @table-border-size solid var(--neutral-10); -@plans-table-sticky-header-size: 60px; - -.plans-page { - p { - color: @neutral-70; - margin-bottom: @line-height-computed; - } - - .plans-header { - h1, - h2 { - color: @neutral-70; - } - } - - .group-customize-subscription-modal { - .modal-footer { - .btn-lg { - margin-bottom: var(--spacing-05); - } - } - - .btn-inline-link { - font-weight: normal; - // TODO: add to .website-redesign - // copied .inline-green-link style - color: var(--green-50); - text-decoration: underline; - // text-decoration-;skip-ink is for letter with descender (like 'g' and 'y') - // this will force underline to not skip the descender - text-decoration-skip-ink: none; - - &:hover { - color: var(--green-60); - } - - // for accessibility with keyboard navigation - &:focus { - outline: 2px solid var(--green-50); - outline-offset: 1px; - } - } - .circle { - font-size: var(--font-size-05); - line-height: var(--line-height-04); - padding: 46px 18px; - margin: 0 auto @line-height-computed; - width: 120px; - height: 120px; - border-radius: 50%; - background-color: var(--green-50); - color: white; - white-space: nowrap; - - .group-price { - font-weight: 600; - } - .group-price-per-user { - font-size: var(--font-size-02); - line-height: var(--line-height-02); - font-weight: 400; - } - } - - .circle-lg { - height: 180px; - padding: 70px 8px; - width: 180px; - } - - .group-plan-option { - display: block; - margin-bottom: var(--spacing-04); - } - - label span { - font-size: var(--font-size-03); - line-height: var(--line-height-03); - font-weight: 400; - padding-left: var( - --spacing-04 - ); // TODO: move to standard input styling for checkbox and radio - } - - input[type='checkbox'], - input[type='radio'] { - // TODO: move to standard input styling for checkbox - accent-color: var(--green-50); - } - - input[type='checkbox'] { - // TODO: move to standard input styling for checkbox - - height: 16px; - width: 16px; - } - - .form-group { - margin-bottom: var(--spacing-06); // TODO: move to main .form-group CSS - } - - .group-plan-educational-discount { - font-weight: normal; - } - - .educational-discount-section { - margin-top: var(--spacing-06); - } - - .group-modal-features { - font-size: var(--font-size-02); - line-height: var(--line-height-02); - - ul { - margin-bottom: 0; - } - - ul, - .list-item-pro-features-header { - margin-top: var(--spacing-06); - } - } - } - - .plans-top-switch ul { - background-color: var(--neutral-10); - display: inline-flex; - justify-content: center; - margin: var(--spacing-09) auto 0 auto; - border-radius: var(--border-radius-full-new); - padding: var(--spacing-01); - - li { - display: flex; - margin-right: var(--spacing-02); - &:last-child { - margin-right: 0; - } - button { - background-color: var(--neutral-10); - color: var(--neutral-70); - border-radius: var(--border-radius-full-new); - font-size: var(--font-size-03); - font-weight: 600; - line-height: var(--line-height-03); - padding: 0 var(--spacing-04); - - // remove bootstrap default - &.btn:active { - box-shadow: none; - } - - &:hover { - // same background as btn-secondary hover - background-color: var(--neutral-20); - color: var(--neutral-70); - } - - &:focus { - outline: 0; - } - &:focus-visible { - outline: 0; - .box-shadow-button-input(); - } - } - - &.active { - button { - cursor: pointer; - background-color: var(--neutral-70); - border-color: var(--neutral-70); - color: var(--white); - } - } - } - - @media (max-width: @screen-xs-max) { - border-radius: var(--border-radius-base-new); - - li { - button { - font-size: var(--font-size-01); - line-height: var(--line-height-01); - text-wrap: auto; - padding: var(--spacing-02) var(--spacing-04); - border-radius: var(--border-radius-base-new); - } - - &.plans-switch-group { - // force newline for the second span - span:first-child::after { - content: ''; - display: block; - } - - span:last-child { - font-weight: 400; - } - } - } - } - } - - a.btn.plans-v2-btn-header-light, - button.plans-v2-btn-header-light { - font-family: @font-family-sans-serif; - } - - .monthly-annual-switch { - display: flex; - align-items: center; - justify-content: center; - position: relative; - margin-top: var(--spacing-10); - - .underline { - text-decoration: underline; - } - - &.disabled { - display: none; - } - - @media (max-width: @screen-xs-max) { - margin-top: var(--spacing-08); - } - - label { - position: relative; - display: inline-block; - width: 60px; - height: @plans-m-a-switch-height; - margin: 0 var(--spacing-05); - - input { - opacity: 0; - width: 0; - height: 0; - } - - input + span { - background-color: var(--green-50); - } - - input:checked + span { - background-color: var(--neutral-70); - } - - input:checked + span::before { - transform: translateX(26px); - } - - span { - position: absolute; - cursor: pointer; - top: 0; - left: 0; - right: 0; - bottom: 0; - transition: 0.4s; - border-radius: @plans-m-a-switch-height; - - &::before { - position: absolute; - content: ''; - height: @plans-m-a-switch-height - @plans-m-a-switch-padding - - @plans-m-a-switch-padding; - width: @plans-m-a-switch-height - @plans-m-a-switch-padding - - @plans-m-a-switch-padding; - left: @plans-m-a-switch-padding; - bottom: @plans-m-a-switch-padding; - background-color: @white; - transition: 0.4s; - border-radius: 50%; - } - } - } - } - - .monthly-annual-switch-text { - position: relative; - - .tooltip { - opacity: 1; - position: absolute; - color: @white; - width: auto; - border-radius: var(--border-radius-base-new); - margin-right: var(--spacing-05); - right: 100%; - top: 0; - z-index: 0; - font-weight: 600; - - &.tooltip.in.left { - .tooltip-inner { - background-color: var(--green-50); - } - - .tooltip-arrow { - border-left-color: var(--green-50); - } - } - - span { - white-space: nowrap; - } - - @media (max-width: @screen-xs-max) { - right: -31%; - top: unset; - - &.tooltip.in.bottom { - .tooltip-inner { - background-color: var(--green-50); - } - - .tooltip-arrow { - border-left-color: unset; - border-bottom-color: var(--green-50); - } - } - - //- class toggled by JS - &.plans-v2-m-a-tooltip-monthly-selected { - right: -119%; - } - - span { - font-size: @font-size-extra-small; - position: relative; - } - } - } - } - - .page-header.top-page-header { - // remove page-header border & margin on mobile - @media (max-width: @screen-xs-max) { - border-bottom: none; - margin-bottom: 0; - padding-bottom: 0; - - h1 { - margin-top: 0; - } - } - } - - .plans-table-comments-icon { - i { - font-size: 64px; - } - } - - .plans-table-container { - position: relative; - } - - .plans-license-picker-form { - margin-top: var(--spacing-08); - display: flex; - align-items: center; - justify-content: center; - width: 100%; - font-size: var(--font-size-03); - line-height: var(--line-height-03); - - .plans-license-picker-select-container { - span { - font-weight: 700; - } - } - - select { - background-color: @white; - border: 1px solid var(--neutral-60); - border-radius: var(--border-radius-base-new); - height: 31px; - margin-left: var(--spacing-04); - padding: 5.5px var(--spacing-04); - font-size: var(--font-size-02); - line-height: var(--line-height-02); - - @media (max-width: @screen-xs-max) { - margin: 0 15px; - } - } - - i { - margin-left: var(--spacing-04); - - @media (max-width: @screen-xs-max) { - display: none; - } - } - - //- element is selected by shared JS with default variant - .plans-v2-license-picker-educational-discount { - display: flex; - align-items: center; - margin-left: var(--spacing-06); - - &.total-licenses-not-eligible-for-discount { - display: none; - } - - @media (max-width: @screen-xs-max) { - margin-top: 15px; - } - } - - label { - margin-bottom: 0; - display: flex; - align-items: center; - font-weight: normal; - - &.disabled span { - color: var(--neutral-40); - } - } - - input[type='checkbox'].plans-v2-license-picker-educational-discount-checkbox { - margin-top: 0; - margin-right: var(--spacing-04); - - @media (max-width: @screen-xs-max) { - margin-right: 25px; - // scale the checkbox to around 30px width and height - transform: scale(2.307); - } - } - - span.plans-v2-license-picker-educational-discount-learn-more-container { - display: none; - - @media (max-width: @screen-xs-max) { - margin-left: 5px; - display: inline; - // this white-space is important to ensure the "learn more" text won't get separated by a newline - white-space: nowrap; - - span.plans-v2-license-picker-educational-discount-learn-more-text { - color: @plans-learn-more-link-color; - } - - .tooltip { - // force white-space to have initial value since the `white-space: nowrap` rule - // on .plans-v2-license-picker-educational-discount-learn-more-container selector (the current code block) above - // will also affect every child inside of it, including the generated tooltip - white-space: initial; - } - } - } - - @media (max-width: @screen-xs-max) { - font-size: var(--font-size-02); - margin-top: var(--spacing-06); - flex-direction: column; - } - } - - .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; - } - } - - .plans-table-student { - @media (max-width: @screen-md-max) { - tr:first-of-type { - th:last-of-type { - // Last column is only a UI placeholder for desktop view. - // We need to hide it for mobile to have the full table fully visible on mobile - // without any empty horizontal space. - display: none; - } - } - } - } - - .plans-table-group { - margin-top: 40px + @plans-highlighted-text-height-desktop; - - @media (max-width: @screen-xs-max) { - margin-top: 40px + @plans-highlighted-text-height-mobile; - } - } - - .plans-table { - background-color: white; - margin-bottom: 15px; - table-layout: fixed; - width: 100%; - - .plans-table-th-content, - .plans-table-price, - .plans-table-comments-icon { - color: var(--neutral-90); - } - - .plans-table-short-feature-list ul { - color: var(--neutral-70); - font-size: var(--font-size-02); - line-height: var(--line-height-02); - hyphens: auto; - padding-left: 15px; - text-align: left; - margin-bottom: 0; - } - - // Table BORDER and PADDING - // Cannot add border to td, th directly due to highlighted column border. - // The outer div handles the border (see exception below for highlighted column). - // The inner div handles the padding. - // The 2 layers of divs make the highlighted column border appears - // as a solid vertical line across the table. - // The highlighted column's border handling is an exception. The inner div (div > div) - // of the highlighted column handles the horizontal border (gray) so that it appears as - // behind the vertical border (green). - // On mobile, there is no vertical border for the highighted column - td > div, - th > div { - // border - border-left: @table-border; - border-top: @table-border; - border-right: @table-border; - border-bottom: 0; - // border adjustments - &.plans-table-cell-cta-desktop, - &.plans-table-cell-cta-mobile, - &.plans-table-cell-short-feature-list, - &.plans-table-cell-price, - &.plans-table-cell-divider { - border-top: 0; - } - &.plans-table-cell-divider { - border-bottom: 0; - } - @media (max-width: @screen-xs-max) { - border: 0; - &.plans-table-th { - border-top: @table-border; - } - } - - // padding - > div { - padding: var(--spacing-05) var(--spacing-08); - @media (max-width: @screen-sm-max) { - padding: var(--spacing-05); - } - @media (max-width: @screen-xs-max) { - padding: var(--spacing-03); - } - } - // padding adjustments - &.plans-table-th > div { - padding-top: var(--spacing-06); - padding-bottom: var(--spacing-04); - } - &.plans-table-cell-price > div { - padding-top: 0; - padding-bottom: var(--spacing-06); - @media (max-width: @screen-xs-max) { - padding-top: var(--spacing-05); - } - } - &.plans-table-cell-short-feature-list > div { - padding-top: 0; - padding-bottom: 0; - - @media (max-width: @screen-xs-max) { - padding-bottom: var(--spacing-06); - } - } - &.plans-table-cell-cta-desktop > div { - padding-top: var(--spacing-08); - } - &.plans-table-cell-cta-mobile > div { - padding-top: 0; - padding-bottom: var(--spacing-06); - } - &.plans-table-feature-name > div { - padding-left: var(--spacing-05); - } - &.plans-table-cell-divider > div { - padding: var(--spacing-05) var(--spacing-08); - } - } - - // border adjustments for highlighted column - // remove left border for all col after highlighted column - .plans-table-green-highlighted ~ td > div, - .plans-table-green-highlighted ~ th > div { - border-left: 0; - } - // remove right border for all col before highlighted column - td:has(~ .plans-table-green-highlighted) > div, - th:has(~ .plans-table-green-highlighted) > div { - border-right: 0; - } - // highlighted column border - th.plans-table-green-highlighted > div, - td.plans-table-green-highlighted > div { - border-left: @highlighted-border; - border-right: @highlighted-border; - // remove top gray border so that there is - // no shared corner with left/right green border - // and then apply the gray top border to the inner div, .plans-table-cell-content - border-top: 0; - - &.plans-table-th { - border-top: @table-border-size solid var(--green-50); - } - - .plans-table-cell-content { - border-top: @table-border; - } - - @media (max-width: @screen-xs-max) { - // column is not highlighted on mobile - border: 0; - .plans-table-cell-content { - border: 0; - } - } - } - tr.plans-table-divider { - // highlighted divider will only show if the highlighted column is on the last visible column - .plans-table-last-col-highlighted > div { - border-right: @highlighted-border; - } - } - // add border for last row - tr:last-child { - td > div, - th > div { - border-bottom: @table-border; - } - td.plans-table-green-highlighted > div { - border-bottom: @highlighted-border; - - @media (max-width: @screen-xs-max) { - // column is not highlighted on mobile, so - // match non-highlighted column border on mobile - border-bottom: @table-border; - } - } - } - - // remove borders - tr.plans-table-divider + tr { - td > div, - th > div { - border-top: 0; - } - .plans-table-green-highlighted { - .plans-table-cell-content { - border-top: 0; - } - } - } - tr.plans-table-cols-2 { - th:last-child { - div { - border: 0; - } - } - } - - // border radius - - tr { - th { - &:nth-child(2):not(.plans-table-green-highlighted) .plans-table-th { - border-top-left-radius: @plans-table-border-radius; - - @media (max-width: @screen-xs-max) { - border-top-left-radius: 0; - } - } - } - // top right border radius on desktop only - &:first-of-type { - th:last-child > .plans-table-th { - border-top-right-radius: @plans-table-border-radius; - - @media (max-width: @screen-xs-max) { - border-top-right-radius: 0; - } - } - } - - // bottom right border radius on desktop only - &:last-child { - td:last-child { - .plans-table-cell { - border-bottom-right-radius: @plans-table-border-radius; - - @media (max-width: @screen-xs-max) { - border-bottom-right-radius: 0; - } - } - } - - th { - .plans-table-feature-name { - @media (min-width: @screen-sm-min) { - border-bottom-left-radius: @plans-table-border-radius; - } - } - } - } - - // top left border radius on first feature row - .plans-table-first-feature-header > .plans-table-feature-name { - border-top-left-radius: @plans-table-border-radius; - - @media (max-width: @screen-xs-max) { - border-top-left-radius: 0; - } - } - } - - // We want these `div` inside `th` and `td` to have a 100% height so - // that their borders are all the full height of their row. - // - // 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. - // The value can be arbitrary, since it will be ignored by the browser - // - // See https://stackoverflow.com/a/56913789 for more details - height: 100%; - - th[scope='row'] { - font-weight: 500; - } - - tr { - height: 100%; - } - - th[scope='col'], - td { - text-align: center; - } - - th[scope='col'] { - font-family: 'Noto Sans', sans-serif; - font-size: var(--font-size-05); - font-weight: 600; - line-height: var(--line-height-04); - vertical-align: top; - position: relative; - } - - td { - vertical-align: middle; - @media (min-width: @screen-sm-min) { - height: 100%; - } - } - - tr { - &:first-child th { - // keep the position here, otherwise messes up border on safari - position: relative; - } - } - - tr.plans-table-divider { - background-color: var(--neutral-10); - - .plans-table-cell-divider-content { - display: flex; - align-items: center; - justify-content: center; - } - - // direct child selector to NOT affect the generated tooltip - td > div { - text-align: center; - - .plans-table-divider-label { - margin-bottom: 0; - margin-right: 5px; - } - - .plans-table-divider-learn-more-container { - display: none; - } - } - - @media (max-width: @screen-xs-max) { - padding-top: 0; - padding-right: 0; - padding-left: 0; - background-color: var(--neutral-20); - border: 0; - - .plans-table-cell-divider-content { - display: block; - } - - // direct child selector to NOT affect the generated tooltip - th > div, - td > div { - background-color: var(--neutral-20); - border: 0; - i { - display: none; - } - - .plans-table-divider-learn-more-container { - display: inline; - // this white-space is important to ensure the "learn more" text won't get separated by a newline - white-space: nowrap; - - span.plans-table-divider-learn-more-text { - color: @plans-learn-more-link-color; - } - - // force white-space to have initial value since the `white-space: nowrap` rule - // on .plans-table-divider-learn-more-container selector (the current code block) above - // will also affect every child inside of it, including the generated tooltip - .tooltip { - white-space: initial; - } - } - } - - .plans-table-last-col-highlighted > div { - border-right: none; - } - } - } - - .fa-check { - color: @green; - } - - @media (min-width: @screen-sm-min) { - // highlight rows on hover - .plans-table-feature-row:hover { - .plans-table-feature-name, - .plans-table-cell { - background-color: @table-hover-bg; - } - } - } - - @media (max-width: @screen-sm-max) { - font-size: @font-size-small; - } - - @media (max-width: @screen-xs-max) { - tr { - display: flex; - // for mobile, we need to show the feature name (the first column) as its own row - // the flex-flow will make the whole tr overflow to a next row if - // total td width combined is bigger than viewport width - // so, one tr can have multiple "visible" row depending on the total width. - flex-flow: row wrap; - justify-content: space-around; - } - - td, - th { - align-self: stretch; - } - - // 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-table-cols-4:not(.plans-table-divider) { - td, - th:not(:first-of-type) { - width: 25%; - } - } - - tr.plans-table-cols-3:not(.plans-table-divider) { - td, - th:not(:first-of-type) { - width: calc(100% / 3); - } - } - - tr.plans-table-cols-2:not(.plans-table-divider) { - td, - th:not(:first-of-type) { - width: 50%; - } - } - - th[scope='col'] { - font-size: 12px; - } - - // hide the first cell (which has no content) - tr:first-child, - .plans-table-price-row, - .plans-table-cta-mobile, - .plans-table-short-feature-list { - th:first-child, - td:first-child { - display: none; - } - } - - // for mobile, we need to show the feature name (the first td) as its own row - // 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) - th[scope='row'] { - width: 100vw; - - span.plans-table-feature-name { - width: 100%; - - span { - text-align: left; - } - } - } - } - } - - // 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-table-cell { - height: 100%; - - .plans-table-cell-content { - height: 100%; - display: flex; - align-items: center; - justify-content: center; - } - - @media (max-width: @screen-xs-max) { - .plans-table-cell-content { - min-height: @plans-table-td-mobile-min-height; - } - } - } - - .plans-table-th { - height: 100%; - - .plans-table-th-content { - height: 100%; - } - } - - .plans-table-btn-buy-container-desktop, - .plans-table-btn-buy-container-mobile { - gap: var(--spacing-04); - } - - .plans-table-btn-buy-container-desktop { - display: flex; - flex-direction: column; - @media (max-width: @screen-xs-max) { - display: none; - } - } - - .plans-table-btn-buy-container-mobile { - display: none; - - @media (max-width: @screen-xs-max) { - display: flex; - flex-direction: column; - - .btn { - .btn-xs; - } - } - } - - .visible-desktop, - .visible-mobile-and-tablet { - display: none; - } - @media (min-width: (@screen-lg-min)) { - .visible-desktop { - display: inline-block; - } - } - @media (max-width: @screen-md-max) { - .visible-mobile-and-tablet { - display: inline-block; - } - } - - // this class should only appear on the group table - .plans-group-total-price { - font-weight: 700; - } - - .plans-table-price-row { - .match-non-discounted-price-alignment, - s { - display: block; - font-weight: 600; - font-size: var(--font-size-02); - line-height: var(--line-height-02); - color: var(--neutral-60); - } - - .plans-table-price-container { - p.plans-table-price-period-label { - margin: 0; - font-size: var(--font-size-02); - line-height: var(--line-height-02); - color: @ol-blue-gray-3; - font-weight: 400; - } - - p.plans-table-price { - margin: 0; - - span { - font-weight: 600; - font-size: var(--font-size-07); - line-height: var(--line-height-06); - } - } - } - } - - .plans-table-feature-name-content { - display: flex; - justify-content: space-between; - align-items: center; - - i.plans-table-feature-question-icon { - margin-left: 10px; - } - - span.plans-table-feature-learn-more-container { - display: none; - } - - @media (max-width: @screen-xs-max) { - display: inline-block; - text-align: left; - width: 100%; - background-color: @ol-blue-gray-0; - min-height: @plans-table-td-mobile-min-height; - - i.plans-table-feature-question-icon { - display: none; - } - - span.plans-table-feature-learn-more-container { - margin-left: 5px; - display: inline; - // this white-space is important to ensure the "learn more" text won't get separated by a newline - white-space: nowrap; - - span.plans-table-feature-learn-more-text { - color: @plans-learn-more-link-color; - } - - .tooltip { - // force white-space to have initial value since the `white-space: nowrap` rule - // on .plans-table-feature-learn-more-container selector (the current code block) above - // will also affect every child inside of it, including the generated tooltip - white-space: initial; - } - } - } - } - - p.plans-table-green-highlighted-text { - border: 2px solid var(--green-50); - position: absolute; - top: -1 * @plans-highlighted-text-height-desktop; - left: 0; - display: flex; - justify-content: center; - align-items: center; - font-size: var(--font-size-03); - line-height: var(--line-height-02); - font-weight: 600; - background-color: var(--green-50); - border-radius: var(--border-radius-large-new) var(--border-radius-large-new) - 0 0; - color: @white; - height: @plans-highlighted-text-height-desktop; - margin: 0; - width: 100%; - - @media (max-width: @screen-sm-max) { - top: -1 * @plans-highlighted-text-height-mobile; - height: @plans-highlighted-text-height-mobile; - font-size: var(--font-size-01); - line-height: var(--line-height-01); - } - } - - .plans-table-th-content { - @media (max-width: @screen-xs-max) { - height: @plans-table-sticky-header-size!important; - overflow: hidden; - } - } - .plans-table-sticky-header-container { - @media (max-width: @screen-xs-max) { - // `height: 60%` is just an arbitrary percentage - // since we need to cover the whole plans_v2_table - // but not too much so it vertically overflows the page - // and it's not trivial to calculate the precise table height - height: 60%; - width: 100%; - position: absolute; - } - - .plans-table-sticky-header-without-switch { - margin-bottom: -107px; - margin-top: @plans-highlighted-text-height-mobile + 40px + - @table-border-size; - } - - .plans-table-sticky-header-with-switch { - margin-bottom: -140px; - margin-top: @plans-table-sticky-header-size + 34px; - } - - .plans-table-sticky-header { - display: none; - - @media (max-width: @screen-xs-max) { - display: flex; - width: 100%; - top: 0; - left: 0; - z-index: @z-index-plans-page-table-header-mobile; - height: @plans-table-sticky-header-size; - border-bottom: @table-border; - - // separate sticky class because we want to remove the class (to visually remove the sticky header) - // with javascript whenever the table is not visible anymore - &.sticky { - position: sticky; - } - } - } - - .plans-table-sticky-header-item { - background-color: @white; - flex: 1 1 0px; - - span { - height: 100%; - display: flex; - align-items: center; - justify-content: center; - padding: 0 var(--spacing-01); - color: var(--neutral-90); - font-size: var(--font-size-03); - font-weight: 600; - text-align: center; - line-height: var(--line-height-02); - } - } - - .plans-table-sticky-header-item-green-highlighted span { - color: var(--green-50); - } - } - - .plans-v2-faq { - p { - margin: 0; - } - - // need for specificity to override default a color - p > a { - color: @ol-blue; - - &:hover { - color: @ol-dark-blue; - } - } - } - - .plans-v2-university-info-light { - padding: @padding-lg @padding-xxl; - background-color: var(--white); - border-radius: 20px; - max-width: @screen-sm-max; // 991px - margin: auto; - display: flex; - align-items: center; - gap: var(--spacing-07); // 20px - - @media (max-width: @screen-sm-max) { - flex-direction: column; - align-items: start; - } - - h3.plans-v2-university-info-header-light { - margin: 0; - } - - p.plans-v2-university-info-text-light { - margin: 0; - margin-top: @margin-sm; - } - - a.plans-v2-btn-university-info { - margin-top: @margin-md; - } - - @media (max-width: @screen-sm-max) { - h3.plans-v2-university-info-header-light { - margin: 0 0 @margin-md 0; - } - - p.plans-v2-university-info-text-light { - margin: 0; - } - } - - @media (max-width: @screen-xs-max) { - padding: @padding-lg; - } - } - - padding-top: calc(var(--spacing-16) + var(--header-height)); - - h1 { - margin-top: 0; - margin-bottom: var(--spacing-08); - } - .plans-v2-top-switch { - margin-top: var(--spacing-09); - } - - .plans-page-quote-row { - margin: var(--spacing-13) 0; - } - - .plans-payment-methods { - margin-top: var(--spacing-08); - margin-bottom: var(--spacing-09); - p { - margin-bottom: 0; - } - .plans-payment-methods-icons { - display: flex; - gap: var(--spacing-04); - justify-content: center; - margin-top: var(--spacing-05); - } - } -} - -.plans-page-interstitial { - padding-bottom: var(--spacing-09); - h1 { - margin-bottom: var(--spacing-13); - } - .monthly-annual-switch { - margin-top: 0; - } - - .plans-table-btn-buy-container-mobile { - @media (max-width: @screen-xs-max) { - .btn { - // interstitial page is a 4 column layout and CTA text cannot fit without adjustments - font-size: 11px; - text-wrap: auto; - } - } - } - - &.plans-page - .plans-table-price-row - .plans-table-price-container - .plans-table-price - span { - @media (max-width: @screen-xs-max) { - font-size: var(--font-size-05); - line-height: var(--line-height-05); - } - } -} 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 cea9b102e6..f825922ce9 100644 --- a/services/web/frontend/stylesheets/app/plans/plans-new-design.less +++ b/services/web/frontend/stylesheets/app/plans/plans-new-design.less @@ -24,6 +24,8 @@ @plans-m-a-new-switch-height: 20px; +@plans-m-a-switch-padding: 2px; + .plans-new-design { padding-top: var(--header-height); diff --git a/services/web/frontend/stylesheets/app/plans/plans-v2.less b/services/web/frontend/stylesheets/app/plans/plans-v2.less deleted file mode 100644 index df68237c80..0000000000 --- a/services/web/frontend/stylesheets/app/plans/plans-v2.less +++ /dev/null @@ -1,1298 +0,0 @@ -// m-a stands for: monthly annual - -@plans-v2-top-switch-item-height: 34px; -@plans-v2-top-switch-item-border-radius: @plans-v2-top-switch-item-height / 2; -@plans-v2-m-a-switch-height: 34px; -@plans-v2-highlighted-text-height-desktop: 30px; -@plans-v2-highlighted-text-height-mobile: 41px; -@plans-v2-learn-more-link-color: hsl(206, 100%, 52%); -@plans-v2-top-switch-group-width-mobile: 46%; -@plans-v2-table-border-radius: 20px; -@plans-v2-table-td-mobile-min-height: 34px; - -.plans { - p { - color: @neutral-70; - margin-bottom: @line-height-computed; - } - - blockquote { - footer { - /* accessibility fix */ - color: #6d6d6d; - } - - @media (min-width: @screen-md-min) { - margin-bottom: 0; - } - } - - .plans-header { - h1, - h2 { - color: @neutral-70; - } - } - - .circle { - font-size: 1.5rem; - font-weight: 700; - padding: 46px 18px; - margin: 0 auto @line-height-computed; - text-shadow: 0 -1px 1px darken(@link-color, 10%); - width: 120px; - height: 120px; - border-radius: 50%; - background-color: @brand-secondary; - color: white; - white-space: nowrap; - line-height: 1; - - .small { - color: rgba(255, 255, 255, 0.85); - font-size: @font-size-base * 0.8; - } - } - - .circle-lg { - height: 180px; - padding: 70px 8px; - width: 180px; - } - - .circle-subtext { - font-size: 1rem; - } - - .circle-img { - float: right; - - @media (max-width: @screen-sm-max) { - float: left; - margin: 0 15px; - } - } - - @media (max-width: @screen-xs-max) { - [data-ol-current-view='group'] [data-ol-plans-v2-m-a-switch-container] { - display: none; - } - } -} - -.plans-v2-top-switch ul.plans-v2-nav { - display: flex; - justify-content: center; - - li { - border-top: 1px solid @ol-blue-gray-3; - border-bottom: 1px solid @ol-blue-gray-3; - height: @plans-v2-top-switch-item-height; - - &.plans-v2-top-switch-individual { - border-right: 1px solid @ol-blue-gray-3; - border-left: 1px solid @ol-blue-gray-3; - border-top-left-radius: @plans-v2-top-switch-item-border-radius; - border-bottom-left-radius: @plans-v2-top-switch-item-border-radius; - } - - &.plans-v2-top-switch-student { - border-right: 1px solid @ol-blue-gray-3; - border-left: 1px solid @ol-blue-gray-3; - border-top-right-radius: @plans-v2-top-switch-item-border-radius; - border-bottom-right-radius: @plans-v2-top-switch-item-border-radius; - } - - button { - padding: 4px 16px; - height: 100%; - - // remove bootstrap default - &.btn:active { - box-shadow: none; - } - - // on Firefox, there will be a visible dotted border on the li element - // when it's `active` / `focus` - // `outline: none` rule intends to eliminate that border - &:active, - &:focus { - outline: none; - } - } - - &.active { - background-color: @ol-blue-gray-4; - - button.btn-default-outline { - color: @white; - } - } - - &:not(.active) { - background-color: @white; - } - } - - @media (max-width: @screen-xs-max) { - margin: 0 13px; - - li { - height: unset; - - &.plans-v2-top-switch-individual, - &.plans-v2-top-switch-student { - width: (100% - @plans-v2-top-switch-group-width-mobile) / 2; - } - - &.plans-v2-top-switch-group { - width: @plans-v2-top-switch-group-width-mobile; - - // force newline for the second span - span:first-child::after { - content: ''; - display: block; - } - - span:last-child { - font-weight: 400; - } - } - - &.plans-v2-top-switch-individual, - &.plans-v2-top-switch-student { - button { - display: flex; - align-items: center; - justify-content: center; - text-align: center; - } - } - - button { - white-space: unset; - padding: 4px 8px; - font-size: 14px; - width: 100%; - } - } - } -} - -a.btn.plans-v2-btn-header, -button.plans-v2-btn-header { - font-family: @font-family-sans-serif; - margin-top: @margin-sm; - text-shadow: 0 0 0; - background-color: @ol-blue; - color: @white; - - &:hover { - color: @white; - } -} - -.plans-v2-m-a-switch-container { - display: flex; - align-items: center; - justify-content: center; - position: relative; - margin-top: @margin-xl; - - .underline { - text-decoration: underline; - } - - &.disabled { - span { - color: @ol-blue-gray-2; - } - - .plans-v2-m-a-switch { - input + span { - background-color: @ol-blue-gray-2; - cursor: not-allowed; - } - } - } - - @media (max-width: @screen-xs-max) { - margin-top: 25px; - - &[data-ol-current-view='group'] { - display: none; - } - } -} - -.plans-v2-m-a-switch { - position: relative; - display: inline-block; - width: 60px; - height: @plans-v2-m-a-switch-height; - margin: 0 @margin-lg; - - input { - opacity: 0; - width: 0; - height: 0; - } - - input + span { - background-color: @ol-green; - } - - input:checked + span { - background-color: @ol-blue-gray-4; - } - - input:checked + span::before { - transform: translateX(26px); - } - - span { - position: absolute; - cursor: pointer; - top: 0; - left: 0; - right: 0; - bottom: 0; - background-color: @ol-blue-gray-1; - transition: 0.4s; - border-radius: @plans-v2-m-a-switch-height; - - &::before { - position: absolute; - content: ''; - height: 32px; - width: 32px; - left: 1px; - bottom: 1px; - background-color: @white; - transition: 0.4s; - border-radius: 50%; - } - } -} - -.plans-v2-m-a-switch-annual-text-container { - position: relative; -} - -.plans-v2-m-a-tooltip { - position: absolute; - color: @white; - width: auto; - padding: @padding-xs @padding-sm; - border-radius: 4px; - right: 110%; - top: 0; - z-index: 0; - - &.tooltip.in.left { - .tooltip-inner { - background-color: @ol-green; - } - - .tooltip-arrow { - border-left-color: @ol-green; - } - } - - span { - white-space: nowrap; - } - - @media (max-width: @screen-xs-max) { - right: -31%; - top: unset; - - &.tooltip.in.bottom { - .tooltip-inner { - background-color: @ol-green; - } - - .tooltip-arrow { - border-left-color: unset; - border-bottom-color: @ol-green; - } - } - - &.plans-v2-m-a-tooltip-monthly-selected { - right: -119%; - } - - span { - font-size: @font-size-extra-small; - position: relative; - } - } -} - -.page-header.top-page-header { - // remove page-header border & margin on mobile - @media (max-width: @screen-xs-max) { - border-bottom: none; - margin-bottom: 0; - padding-bottom: 0; - - h1 { - margin-top: 0; - } - } -} - -.plans-v2-table-comments-icon { - height: 65px; - - i { - font-size: 50px; - } - - @media (max-width: @screen-xs-max) { - height: 58px; - } -} - -.plans-v2-table-container { - position: relative; -} - -.plans-v2-license-picker-form { - margin-top: 25px; - display: flex; - align-items: center; - justify-content: center; - width: 100%; - - @media (max-width: @screen-xs-max) { - font-size: @font-size-small; - margin-top: 15px; - flex-direction: column; - } -} - -.plans-v2-license-picker-select { - background-color: @white; - border: 1px solid #cccccc; - width: 64px; - height: 30px; - margin: 0 @margin-sm; - padding-left: @padding-sm; - - @media (max-width: @screen-xs-max) { - margin: 0 15px; - } -} - -.plans-v2-license-picker-educational-discount { - display: flex; - align-items: center; - - @media (max-width: @screen-xs-max) { - margin-top: 15px; - } -} - -.plans-v2-license-picker-educational-discount-label { - margin-bottom: 0; - display: flex; - align-items: center; - font-weight: normal; - - &.disabled span { - color: @ol-blue-gray-2; - } -} - -input[type='checkbox'].plans-v2-license-picker-educational-discount-checkbox { - margin-top: 0; - margin-right: @margin-sm; - - @media (max-width: @screen-xs-max) { - margin-right: 25px; - // scale the checkbox to around 30px width and height - transform: scale(2.307); - } -} - -i.plans-v2-license-picker-educational-discount-question-icon { - margin-left: @margin-xs; - - @media (max-width: @screen-xs-max) { - display: none; - } -} - -span.plans-v2-license-picker-educational-discount-learn-more-container { - display: none; - - @media (max-width: @screen-xs-max) { - margin-left: 5px; - display: inline; - // this white-space is important to ensure the "learn more" text won't get separated by a newline - white-space: nowrap; - - span.plans-v2-license-picker-educational-discount-learn-more-text { - color: @plans-v2-learn-more-link-color; - } - - .tooltip { - // force white-space to have initial value since the `white-space: nowrap` rule - // on .plans-v2-license-picker-educational-discount-learn-more-container selector (the current code block) above - // will also affect every child inside of it, including the generated tooltip - white-space: initial; - } - } -} - -.plans-v2-table-individual, -.plans-v2-table-student { - margin-top: 40px + @plans-v2-highlighted-text-height-desktop; - - @media (max-width: @screen-xs-max) { - margin-top: 60px + @plans-v2-highlighted-text-height-desktop; - - th .plans-v2-table-th-content { - min-height: 280px; - } - } -} - -.plans-v2-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 { - background-color: @ol-blue-gray-0; - } - - &:last-child { - td:first-child { - background-color: @ol-blue-gray-0; - - .plans-v2-table-feature-name { - border-bottom-left-radius: @plans-v2-table-border-radius; - - @media (max-width: @screen-xs-max) { - border-bottom-left-radius: 0; - } - } - } - - td:last-child { - background-color: @ol-blue-gray-0; - - .plans-v2-table-cell { - border-bottom-right-radius: @plans-v2-table-border-radius; - - @media (max-width: @screen-xs-max) { - border-bottom-right-radius: 0; - } - } - } - } - } - - // 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 { - border-top-right-radius: @plans-v2-table-border-radius; - - @media (max-width: @screen-xs-max) { - border-top-right-radius: 0; - } - } - - &:nth-child(2) .plans-v2-table-th { - border-top-left-radius: @plans-v2-table-border-radius; - - @media (max-width: @screen-xs-max) { - border-top-right-radius: 0; - } - } - } - - @media (max-width: @screen-md-max) { - tr:first-of-type { - th:last-of-type { - // Last column is only a UI placeholder for desktop view. - // We need to hide it for mobile to have the full table fully visible on mobile - // without any empty horizontal space. - display: none; - } - } - } -} - -.plans-v2-table-individual { - tr { - &:last-child { - td:first-child { - background-color: @ol-blue-gray-0; - - .plans-v2-table-feature-name { - border-bottom-left-radius: @plans-v2-table-border-radius; - - @media (max-width: @screen-xs-max) { - border-bottom-left-radius: 0; - } - } - } - - td:last-child { - background-color: @ol-blue-gray-0; - - .plans-v2-table-cell { - border-bottom-right-radius: @plans-v2-table-border-radius; - - @media (max-width: @screen-xs-max) { - border-bottom-right-radius: 0; - } - } - } - } - - &:not(.plans-v2-table-divider) td { - background-color: @white; - } - } - - th { - &:last-child .plans-v2-table-th { - border-top-right-radius: @plans-v2-table-border-radius; - - @media (max-width: @screen-xs-max) { - border-top-right-radius: 0; - } - } - - &:nth-child(2) .plans-v2-table-th { - border-top-left-radius: @plans-v2-table-border-radius; - - @media (max-width: @screen-xs-max) { - border-top-left-radius: 0; - } - } - } -} - -.plans-v2-table-group { - margin-top: 26px + @plans-v2-highlighted-text-height-desktop; - - p.plans-v2-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. - // In other languages, for example, German (subdomain `de`), 20px is too big so the text is wrapped and breaks the UI. 19px is enough to fit the text on one line on the German site. - // This font-size reduction is a case-to-case basis since we don't have any way to know the max length of every language unless we've translated them all. - // There's probably a smarter way to do it, but probably also more complex. This change in font should be acceptable and we can revisit it every time there's a longer text. - font-size: 19px; - - @media (max-width: @screen-md-max) { - font-size: @font-size-base; - } - - @media (max-width: @screen-xs-max) { - font-size: @font-size-small; - } - } - - tr { - // top right border radius on desktop only - &:first-of-type { - th:last-child > .plans-v2-table-th { - border-top-right-radius: @plans-v2-table-border-radius; - - @media (max-width: @screen-xs-max) { - border-top-right-radius: 0; - } - } - } - - // bottom right border radius on desktop only - &:last-of-type { - td:last-child > .plans-v2-table-cell { - border-bottom-right-radius: @plans-v2-table-border-radius; - - @media (max-width: @screen-xs-max) { - border-bottom-right-radius: 0; - } - } - } - } -} - -.plans-v2-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` - // - // 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. - // The value can be arbitrary, since it will be ignored by the browser - // - // See https://stackoverflow.com/a/56913789 for more details - height: 100%; - - .plans-v2-table-row-header { - font-weight: 500; - } - - tr { - height: 100%; - } - - .plans-v2-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-v2-table-divider-highlighted) { - border-right: 1px solid @ol-blue-gray-0; - - @media (max-width: @screen-xs-max) { - border-right: none; - } - } - } - - .plans-v2-table-column-header { - border-top: 0; - font-family: @headings-font-family; - font-size: @font-size-h2; - font-weight: @headings-font-weight; - line-height: @headings-line-height; - vertical-align: top; - padding: 0; - position: relative; - background-color: @ol-blue-gray-0; - - &:first-child { - border-left: 0; - } - - &:last-child { - border-right: 0; - } - } - - td { - vertical-align: middle; - height: 100%; - - &:last-child:not(.plans-v2-table-green-highlighted):not( - .plans-v2-table-divider-highlighted - ) { - border-right: 0; - } - } - - tr { - &:first-child th { - // keep the position here, otherwise messes up border on safari - position: relative; - } - - // css hack for table border-radius on the first feature name - &:nth-child(2) { - .plans-v2-table-row-header:first-child { - background-color: @ol-blue-gray-0; - - .plans-v2-table-feature-name { - border-top-left-radius: @plans-v2-table-border-radius; - - @media (max-width: @screen-xs-max) { - border-top-left-radius: 0; - } - } - } - } - - &:not(.plans-v2-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, - td > .plans-v2-table-feature-name, - td > .plans-v2-table-cell > .plans-v2-table-cell-content { - border-bottom: 1px solid @ol-blue-gray-0; - - @media (max-width: @screen-xs-max) { - border-bottom: unset; - } - } - } - - // this will show highlghted border-bottom on the last row - &:last-child td.plans-v2-table-green-highlighted { - > .plans-v2-table-cell { - border-bottom: 2px solid @ol-green; - - @media (max-width: @screen-xs-max) { - border-bottom: unset; - } - } - } - } - - .fa-check { - color: @green; - } - - @media (min-width: @screen-sm-min) { - // highlight rows on hover - tr:not(.plans-v2-table-divider):not(:first-child):hover { - background-color: @table-hover-bg; - - .plans-v2-table-feature-name, - .plans-v2-table-cell { - background-color: @table-hover-bg; - } - } - } - - @media (max-width: @screen-sm-max) { - font-size: @font-size-small; - } - - @media (max-width: @screen-xs-max) { - tr { - display: flex; - // for mobile, we need to show the feature name (the first column) as its own row - // the flex-flow will make the whole tr overflow to a next row if - // total td width combined is bigger than viewport width - // so, one tr can have multiple "visible" row depending on the total width. - flex-flow: row wrap; - justify-content: space-around; - } - - // The forced width below (plans-v2-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) { - td, - th:not(:first-of-type) { - width: 25%; - } - } - - tr.plans-v2-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) { - td, - th:not(:first-of-type) { - width: 50%; - } - } - - .plans-v2-table-column-header { - font-size: 12px; - } - - // hide the first column header - tr:first-child th:first-child { - display: none; - } - - // for mobile, we need to show the feature name (the first td) as its own row - // 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 { - background: @gray-lightest; - width: 100vw; - - span.plans-v2-table-feature-name { - width: 100%; - - span { - text-align: left; - } - } - } - } -} - -// plans-v2-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 { - background-color: @white; - height: 100%; - - .plans-v2-table-cell-content { - height: 100%; - display: flex; - align-items: center; - justify-content: center; - } - - @media (max-width: @screen-xs-max) { - .plans-v2-table-cell-content { - padding: 6px; - min-height: @plans-v2-table-td-mobile-min-height; - } - } -} - -.plans-v2-table-th { - height: 100%; - background-color: @white; - - .plans-v2-table-th-content { - display: flex; - flex-direction: column; - min-height: 321px; - height: 100%; - padding: 10px 13px; - - @media (max-width: @screen-md-max) { - min-height: 330px; - } - - @media (max-width: @screen-sm-max) { - padding-left: @padding-xs; - padding-right: @padding-xs; - } - } -} - -.plans-v2-table-btn-buy-container-desktop { - margin-top: auto; - display: flex; - flex-direction: column; - min-height: 60px; - - @media (max-width: @screen-xs-max) { - display: none; - } -} - -.plans-v2-table-btn-buy-container-mobile { - display: none; - - @media (max-width: @screen-xs-max) { - display: flex; - flex-direction: column; - min-height: 50px; - margin-top: @padding-sm; - } -} - -.plans-v2-table-btn-buy { - font-family: @font-family-sans-serif; - padding: 4px 15px 5px; - - @media (min-width: (@screen-xs-max+1)) { - .hidden-desktop { - display: none; - } - } - - @media (max-width: @screen-sm-max) { - font-size: @font-size-small; - } - - @media (max-width: @screen-xs-max) { - padding-left: 9px; - padding-right: 9px; - // truncating group plans long button text for mobile - .hidden-mobile { - display: none; - } - } -} - -p.plans-v2-table-th-content-title { - font-size: @font-size-large; - padding-bottom: @padding-sm; - border-bottom: 1px solid @gray-lighter; - margin-bottom: @margin-lg; - - @media (max-width: @screen-md-max) { - font-size: @font-size-base; - } - - // `plans-v2-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-v2-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 - // 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) { - min-height: 40px; - margin-bottom: @margin-md; - font-size: @font-size-small; - padding-bottom: 0; - } -} - -p.plans-v2-table-th-content-benefit, -ul.plans-v2-table-th-content-benefit { - padding-top: 15px; - font-size: @font-size-small; - font-family: @font-family-sans-serif; - line-height: 23px; - hyphens: auto; -} - -ul.plans-v2-table-th-content-benefit { - padding-left: 15px; - text-align: left; - margin-bottom: 0; - - li a { - color: @ol-blue-gray-3; - text-decoration: underline; - } -} - -// this class should only appear on the group table -.plans-v2-group-total-price { - font-weight: 700; -} - -.plans-v2-table-price-container { - position: relative; -} - -p.plans-v2-table-price-period-label { - margin: 0; - font-size: @font-size-small; - line-height: 23px; - color: @ol-blue-gray-3; - font-family: @font-family-sans-serif; -} - -p.plans-v2-table-price { - margin: 0; - - span { - font-weight: 700; - font-size: 32px; - line-height: 42px; - - @media (max-width: @screen-xs-max) { - line-height: 35px; - font-size: @font-size-large; - } - } -} - -s.plans-v2-table-price-before-discount { - position: absolute; - top: -27px; - font-weight: 700; - font-size: @font-size-small; - line-height: 42px; - display: flex; - justify-content: center; - width: 100%; - color: @ol-blue-gray-2; - - @media (max-width: @screen-xs-max) { - font-size: @font-size-extra-small; - } -} - -small.plans-v2-table-th-content-additional-link { - text-transform: lowercase; - margin-top: @margin-xs; - font-size: @font-size-extra-small; - height: 16px; - font-family: @font-family-sans-serif; - - a { - color: @ol-blue-gray-5; - text-decoration: underline; - } -} - -.plans-v2-table-feature-name { - background-color: @white; - display: flex; - justify-content: space-between; - align-items: center; - padding: 6px 6px 6px 18px; - - i.plans-v2-table-feature-name-question-icon { - margin-left: 10px; - } - - span.plans-v2-table-feature-name-learn-more-container { - display: none; - } - - @media (max-width: @screen-xs-max) { - display: inline-block; - text-align: left; - padding: 6px; - width: 100%; - background-color: @ol-blue-gray-0; - min-height: @plans-v2-table-td-mobile-min-height; - - i.plans-v2-table-feature-name-question-icon { - display: none; - } - - span.plans-v2-table-feature-name-learn-more-container { - margin-left: 5px; - display: inline; - // this white-space is important to ensure the "learn more" text won't get separated by a newline - white-space: nowrap; - - span.plans-v2-table-feature-name-learn-more-text { - color: @plans-v2-learn-more-link-color; - } - - .tooltip { - // force white-space to have initial value since the `white-space: nowrap` rule - // on .plans-v2-table-feature-name-learn-more-container selector (the current code block) above - // will also affect every child inside of it, including the generated tooltip - white-space: initial; - } - } - } -} - -tr.plans-v2-table-divider { - background-color: @ol-blue-gray-1; - - // direct child selector to NOT affect the generated tooltip - td > div { - text-align: center; - padding: 6px; - - .plans-v2-table-divider-label { - margin-bottom: 0; - margin-right: 5px; - } - - .plans-v2-table-divider-learn-more-container { - display: none; - } - } - - // highlighted divider will only show if the highlighted column is on the last visible column - .plans-v2-table-divider-highlighted > div { - border-right: 2px solid @ol-green; - } - - @media (max-width: @screen-xs-max) { - // need the colspan attribute selector to increase specificity to override more specific css rule on another selector - td[colspan] { - padding-top: 0; - padding-right: 0; - padding-left: 0; - - // direct child selector to NOT affect the generated tooltip - > div { - background-color: @ol-blue-gray-1; - padding: 15px 5px; - - i.plans-v2-table-divider-question-icon { - display: none; - } - - .plans-v2-table-divider-learn-more-container { - display: inline; - // this white-space is important to ensure the "learn more" text won't get separated by a newline - white-space: nowrap; - - span.plans-v2-table-divider-learn-more-text { - color: @plans-v2-learn-more-link-color; - } - - // force white-space to have initial value since the `white-space: nowrap` rule - // on .plans-v2-table-divider-learn-more-container selector (the current code block) above - // will also affect every child inside of it, including the generated tooltip - .tooltip { - white-space: initial; - } - } - } - } - - .plans-v2-table-divider-highlighted > div { - border-right: none; - } - } -} - -// 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 { - border-left: 2px solid @ol-green; - border-right: 2px solid @ol-green; - - @media (max-width: @screen-xs-max) { - border-left: unset; - border-right: unset; - } - } -} - -p.plans-v2-table-green-highlighted-text { - border: 2px solid @ol-green; - position: absolute; - top: -1 * @plans-v2-highlighted-text-height-desktop; - left: 0; - display: flex; - justify-content: center; - align-items: center; - width: 100%; - font-family: @font-family-sans-serif; - font-size: @font-size-small; - line-height: 19px; - font-weight: 700; - background-color: @ol-green; - border-radius: @plans-v2-table-border-radius @plans-v2-table-border-radius 0 0; - color: @white; - height: @plans-v2-highlighted-text-height-desktop; - margin: 0; - - @media (max-width: @screen-sm-max) { - top: -1 * @plans-v2-highlighted-text-height-mobile; - height: @plans-v2-highlighted-text-height-mobile; - } - - @media (max-width: @screen-xs-max) { - padding-left: 5px; - padding-right: 5px; - font-size: @font-size-extra-small; - line-height: 15px; - } -} - -.plans-v2-table-sticky-header-container { - @media (max-width: @screen-xs-max) { - // `height: 60%` is just an arbitrary percentage - // since we need to cover the whole plans_v2_table - // but not too much so it vertically overflows the page - // and it's not trivial to calculate the precise table height - height: 60%; - width: 100%; - position: absolute; - } -} - -.plans-v2-table-sticky-header-without-switch { - margin-bottom: -107px; - margin-top: 67px; -} - -.plans-v2-table-sticky-header-with-switch { - margin-bottom: -140px; - margin-top: 100px; -} - -.plans-v2-table-sticky-header { - display: none; - - @media (max-width: @screen-xs-max) { - display: flex; - width: 100vw; - top: 0; - left: 0; - z-index: @z-index-plans-page-table-header-mobile; - height: 40px; - - // separate sticky class because we want to remove the class (to visually remove the sticky header) - // with javascript whenever the table is not visible anymore - &.sticky { - position: sticky; - } - } -} - -.plans-v2-table-sticky-header-item { - background-color: @white; - flex: 1 1 0px; - - span { - margin: 0px @margin-xs; - border-bottom: 1px solid #cccccc; - height: 100%; - display: flex; - align-items: center; - justify-content: center; - font-family: @font-family-serif; - - @media (max-width: @screen-xs-max) { - font-size: @font-size-small; - text-align: center; - line-height: 19px; - } - } -} - -.plans-v2-table-sticky-header-item-green-highlighted span { - color: @ol-green; -} - -.plans-v2-faq { - p { - margin: 0; - } - - // need for specificity to override default a color - p > a { - color: @ol-blue; - - &:hover { - color: @ol-dark-blue; - } - } -} - -.plans-v2-university-info { - padding: @padding-lg @padding-xxl; - background-color: @ol-blue-gray-1; - border-radius: 20px; - - h3.plans-v2-university-info-header { - margin: 0 @margin-xl @margin-md @margin-xl; - } - - p.plans-v2-university-info-text { - margin: 0 @margin-xl; - } - - a.plans-v2-btn-university-info { - margin-top: @margin-md; - } - - @media (max-width: @screen-sm-max) { - h3.plans-v2-university-info-header { - margin: 0 0 @margin-md 0; - } - - p.plans-v2-university-info-text { - margin: 0; - } - } - - @media (max-width: @screen-xs-max) { - padding: @padding-lg; - } -} - -.plans-page-quote-row { - margin: var(--spacing-13) 0; -} - -.plans-page-quote-row-hidden { - display: none; -} diff --git a/services/web/frontend/stylesheets/main-style.less b/services/web/frontend/stylesheets/main-style.less index ae118aa3f4..3594633327 100644 --- a/services/web/frontend/stylesheets/main-style.less +++ b/services/web/frontend/stylesheets/main-style.less @@ -105,8 +105,6 @@ @import 'app/project-list-react.less'; @import 'app/editor.less'; @import 'app/homepage.less'; -@import 'app/plans/plans-v2.less'; -@import 'app/plans/plans-light-touch-redesign.less'; @import 'app/plans/plans-new-design.less'; @import 'app/recurly.less'; @import 'app/bonus.less';