github/overleaf
1
0
Fork 0
mirror of https://github.com/overleaf/overleaf.git synced 2025-01-10 09:33:02 +00:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #20324 from overleaf/jel-plans-toggle

Browse source 
[web] Use input for period toggle on new plans

GitOrigin-RevId: 0e1b76d92aa2143eb6721b9b2cd19505803fb153
This commit is contained in:
Jessica Lawshe 2024-11-20 10:38:09 -06:00 committed by Copybot
parent 44e0428496
commit 5df8cf7ce4
2 changed files with 26 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

46
services/web/frontend/stylesheets/app/plans/plans-new-design.less
View file

@ -214,8 +214,8 @@
} }
.plans-new-period-switcher-container { .plans-new-period-switcher-container {
position: relative;
display: inline-flex; display: inline-flex;
justify-content: center;
background-color: var(--neutral-10); background-color: var(--neutral-10);
border-radius: var(--border-radius-full-new); border-radius: var(--border-radius-full-new);
padding: var(--spacing-03); padding: var(--spacing-03);
@ -227,46 +227,50 @@
margin-bottom: var(--spacing-09); margin-bottom: var(--spacing-09);
} }
.plans-new-period-switcher { label {
display: inline-flex;
align-items: center;
margin: 0;
font-size: var(--font-size-05); font-size: var(--font-size-05);
font-weight: 600; font-weight: 600;
line-height: var(--line-height-04); line-height: var(--line-height-04);
text-align: center; text-align: center;
padding: var(--spacing-01) var(--spacing-04); padding: var(--spacing-01) var(--spacing-04);
border-radius: var(--border-radius-full-new); border-radius: var(--border-radius-full-new);
display: flex;
align-items: center;
border: unset;
background-color: unset;
&:hover { &:hover {
background-color: var(--neutral-20); background-color: var(--neutral-20);
cursor: pointer;
} }
}
&.active { input[type='radio'] {
background-color: var(--green-50); position: absolute;
color: white; left: -9999px;
box-shadow: 0px 2px 4px 0px rgba(30, 37, 48, 0.16);
.plans-new-discount-badge {
background-color: var(--green-10);
color: var(--green-60);
}
}
&:focus, &:focus,
&:focus-visible { &:focus-visible {
outline: 0; outline: 0;
} }
}
&:focus-visible { input[type='radio']:focus-visible + label,
.box-shadow-button-input(); input[type='radio']:checked:focus-visible + label {
} .box-shadow-button-input();
}
input[type='radio']:checked + label {
background-color: var(--green-50);
color: white;
box-shadow: 0px 2px 4px 0px rgba(30, 37, 48, 0.16);
.plans-new-discount-badge { .plans-new-discount-badge {
margin-left: 6px; background-color: var(--green-10);
color: var(--green-60);
} }
} }
.plans-new-discount-badge {
margin-left: var(--spacing-03);
}
} }
.plans-new-discount-badge { .plans-new-discount-badge {

1
services/web/locales/en.json
View file

@ -209,6 +209,7 @@
"beta_program_opt_out_action": "Opt-Out of Beta Program", "beta_program_opt_out_action": "Opt-Out of Beta Program",
"better_bibliographies": "Better bibliographies", "better_bibliographies": "Better bibliographies",
"bibliographies": "Bibliographies", "bibliographies": "Bibliographies",
"billing_period_sentence_case": "Billing period",
"binary_history_error": "Preview not available for this file type", "binary_history_error": "Preview not available for this file type",
"blank_project": "Blank Project", "blank_project": "Blank Project",
"blocked_filename": "This file name is blocked.", "blocked_filename": "This file name is blocked.",