Merge pull request #19662 from overleaf/jel-light-touch-tabs

[web] Update plan tab buttons for light touch redesign

GitOrigin-RevId: 0ee3e7a9c277097abd32dcae2cc49a1a4b01e6f0
This commit is contained in:
Jessica Lawshe 2024-07-31 09:47:05 -05:00 committed by Copybot
parent 580111b984
commit 28c0ab80ad
2 changed files with 48 additions and 69 deletions

View file

@ -1,6 +1,6 @@
include ./_mixins include ./_mixins
.row.plans-top-switch .row.plans-top-switch.text-center
.col-xs-12 .col-xs-12
ul.nav(role="tablist") ul.nav(role="tablist")
li.active.plans-switch-individual( li.active.plans-switch-individual(
@ -11,7 +11,11 @@ include ./_mixins
event-segmentation='{"button": "individual"}' event-segmentation='{"button": "individual"}'
role="presentation" role="presentation"
) )
button.btn.btn-default-outline(role="tab" aria-controls="panel-individual" aria-selected="true") #{translate("indvidual_plans")} button.btn(
role="tab"
aria-controls="panel-individual"
aria-selected="true"
) #{translate("indvidual_plans")}
li.plans-switch-group( li.plans-switch-group(
data-ol-plans-v2-view-tab='group' data-ol-plans-v2-view-tab='group'
event-tracking="plans-page-toggle-plan" event-tracking="plans-page-toggle-plan"
@ -20,9 +24,8 @@ include ./_mixins
event-segmentation='{"button": "group"}' event-segmentation='{"button": "group"}'
role="presentation" role="presentation"
) )
button.btn.btn-default-outline( button.btn(
aria-controls="panel-group" aria-controls="panel-group"
href="#"
role="tab" role="tab"
aria-selected="false" aria-selected="false"
) )
@ -36,9 +39,8 @@ include ./_mixins
event-segmentation='{"button": "student"}' event-segmentation='{"button": "student"}'
role="presentation" role="presentation"
) )
button.btn.btn-default-outline( button.btn(
aria-controls="panel-student" aria-controls="panel-student"
href="#"
role="tab" role="tab"
aria-selected="false" aria-selected="false"
) #{translate("student_plans")} ) #{translate("student_plans")}

View file

@ -1,11 +1,8 @@
// m-a stands for: monthly annual // m-a stands for: monthly annual
@plans-top-switch-item-height: 34px;
@plans-top-switch-item-border-radius: @plans-top-switch-item-height / 2;
@plans-m-a-switch-height: 20px; @plans-m-a-switch-height: 20px;
@plans-highlighted-text-height-desktop: 32px; @plans-highlighted-text-height-desktop: 32px;
@plans-highlighted-text-height-mobile: 41px; @plans-highlighted-text-height-mobile: 41px;
@plans-learn-more-link-color: hsl(206, 100%, 52%); @plans-learn-more-link-color: hsl(206, 100%, 52%);
@plans-top-switch-group-width-mobile: 46%;
@plans-table-border-radius: var(--border-radius-medium-new); @plans-table-border-radius: var(--border-radius-medium-new);
@plans-table-td-mobile-min-height: 34px; @plans-table-td-mobile-min-height: 34px;
@highlighted-border: var(--border-width-base) solid var(--green-50); @highlighted-border: var(--border-width-base) solid var(--green-50);
@ -72,74 +69,71 @@
} }
.plans-top-switch ul { .plans-top-switch ul {
display: flex; background-color: var(--neutral-10);
display: inline-flex;
justify-content: center; justify-content: center;
margin-top: var(--spacing-09); margin: var(--spacing-09) auto 0 auto;
border-radius: var(--border-radius-full-new);
padding: var(--spacing-01);
li { li {
border-top: 1px solid @ol-blue-gray-3; display: flex;
border-bottom: 1px solid @ol-blue-gray-3; margin-right: var(--spacing-02);
height: @plans-top-switch-item-height; &:last-child {
margin-right: 0;
&.plans-switch-individual {
border-right: 1px solid @ol-blue-gray-3;
border-left: 1px solid @ol-blue-gray-3;
border-top-left-radius: @plans-top-switch-item-border-radius;
border-bottom-left-radius: @plans-top-switch-item-border-radius;
} }
&.plans-switch-student {
border-right: 1px solid @ol-blue-gray-3;
border-left: 1px solid @ol-blue-gray-3;
border-top-right-radius: @plans-top-switch-item-border-radius;
border-bottom-right-radius: @plans-top-switch-item-border-radius;
}
button { button {
padding: 4px 16px; background-color: var(--neutral-10);
height: 100%; 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 // remove bootstrap default
&.btn:active { &.btn:active {
box-shadow: none; box-shadow: none;
} }
// on Firefox, there will be a visible dotted border on the li element &:hover {
// when it's `active` / `focus` // same background as btn-secondary hover
// `outline: none` rule intends to eliminate that border background-color: var(--neutral-20);
&:active, color: var(--neutral-70);
}
&:focus { &:focus {
outline: none; outline: 0;
}
&:focus-visible {
outline: 0;
.box-shadow-button-input();
} }
} }
&.active { &.active {
background-color: @ol-blue-gray-4; button {
cursor: pointer;
button.btn-default-outline { background-color: var(--neutral-70);
color: @white; border-color: var(--neutral-70);
color: var(--white);
} }
} }
&:not(.active) {
background-color: @white;
}
} }
@media (max-width: @screen-xs-max) { @media (max-width: @screen-xs-max) {
margin: 0 13px; border-radius: var(--border-radius-base-new);
li { li {
height: unset; button {
font-size: var(--font-size-01);
&.plans-switch-individual, line-height: var(--line-height-01);
&.plans-switch-student { text-wrap: auto;
width: (100% - @plans-top-switch-group-width-mobile) / 2; padding: var(--spacing-02) var(--spacing-04);
border-radius: var(--border-radius-base-new);
} }
&.plans-switch-group { &.plans-switch-group {
width: @plans-top-switch-group-width-mobile;
// force newline for the second span // force newline for the second span
span:first-child::after { span:first-child::after {
content: ''; content: '';
@ -150,23 +144,6 @@
font-weight: 400; font-weight: 400;
} }
} }
&.plans-switch-individual,
&.plans-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%;
}
} }
} }
} }