mirror of
https://github.com/overleaf/overleaf.git
synced 2025-01-09 20:21:21 +00:00
Merge pull request #20324 from overleaf/jel-plans-toggle
[web] Use input for period toggle on new plans GitOrigin-RevId: 0e1b76d92aa2143eb6721b9b2cd19505803fb153
This commit is contained in:
parent
44e0428496
commit
5df8cf7ce4
2 changed files with 26 additions and 21 deletions
services/web
|
@ -214,8 +214,8 @@
|
|||
}
|
||||
|
||||
.plans-new-period-switcher-container {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
background-color: var(--neutral-10);
|
||||
border-radius: var(--border-radius-full-new);
|
||||
padding: var(--spacing-03);
|
||||
|
@ -227,46 +227,50 @@
|
|||
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-weight: 600;
|
||||
line-height: var(--line-height-04);
|
||||
text-align: center;
|
||||
padding: var(--spacing-01) var(--spacing-04);
|
||||
border-radius: var(--border-radius-full-new);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border: unset;
|
||||
background-color: unset;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--neutral-20);
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
background-color: var(--green-50);
|
||||
color: white;
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
input[type='radio'] {
|
||||
position: absolute;
|
||||
left: -9999px;
|
||||
&:focus,
|
||||
&:focus-visible {
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
.box-shadow-button-input();
|
||||
}
|
||||
input[type='radio']:focus-visible + label,
|
||||
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 {
|
||||
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 {
|
||||
|
|
|
@ -209,6 +209,7 @@
|
|||
"beta_program_opt_out_action": "Opt-Out of Beta Program",
|
||||
"better_bibliographies": "Better bibliographies",
|
||||
"bibliographies": "Bibliographies",
|
||||
"billing_period_sentence_case": "Billing period",
|
||||
"binary_history_error": "Preview not available for this file type",
|
||||
"blank_project": "Blank Project",
|
||||
"blocked_filename": "This file name is blocked.",
|
||||
|
|
Loading…
Reference in a new issue