paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-11-02 21:13:36 +00:00
Code Issues Packages Projects Releases Wiki Activity

plans: Enable better collapsing of plans panes.

Browse Source
This commit is contained in:
Karl Stolley
2024-01-29 14:35:14 -06:00
committed by Tim Abbott
parent dc52194ecc
commit f361a9bb50
1 changed files with 77 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

93
web/styles/portico/pricing_plans.css
View File

@@ -29,8 +29,9 @@
--icon-right-outward-tab-curve: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 16 16'%3e%3cpath fill='white' d='M16 16H0V0c0 8.837 7.163 16 16 16Z'/%3e%3c/svg%3e");
--icon-question-header-swoosh: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='33' height='56' fill='none' viewBox='0 0 33 56'%3e%3cpath fill='%23E2EBF4' d='M33 37 1 56C1 35-3.5 0 33 0 7.5 3 7.776 37 33 37Z'/%3e%3c/svg%3e");
--icon-current-plan-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='none' viewBox='0 0 22 22'%3e%3cg fill='%230F8544'%3e%3cpath d='M14.396 9.813a.914.914 0 1 0-1.293-1.293l-3.02 3.02-1.186-1.186a.914.914 0 1 0-1.294 1.293l1.834 1.833a.914.914 0 0 0 1.293 0l3.666-3.667Z'/%3e%3cpath fill-rule='evenodd' d='M11 .923a4.58 4.58 0 0 0-3.495 1.62 4.581 4.581 0 0 0-4.961 4.949 4.58 4.58 0 0 0 0 7.016 4.58 4.58 0 0 0 4.96 4.949 4.583 4.583 0 0 0 7.003-.001 4.582 4.582 0 0 0 4.95-4.96 4.583 4.583 0 0 0 0-6.991 4.58 4.58 0 0 0-4.962-4.962A4.581 4.581 0 0 0 11 .923ZM9.678 3.09a2.752 2.752 0 0 1 3.64.932.914.914 0 0 0 .972.4 2.752 2.752 0 0 1 3.289 3.288.914.914 0 0 0 .4.971 2.753 2.753 0 0 1 0 4.638.914.914 0 0 0-.4.97 2.752 2.752 0 0 1-3.283 3.29.914.914 0 0 0-.97.401 2.75 2.75 0 0 1-4.644 0 .914.914 0 0 0-.971-.401 2.752 2.752 0 0 1-3.29-3.283.914.914 0 0 0-.403-.97 2.753 2.753 0 0 1 0-4.652.914.914 0 0 0 .404-.97A2.752 2.752 0 0 1 7.71 4.42a.914.914 0 0 0 .97-.4c.25-.389.592-.709.997-.93Z' clip-rule='evenodd'/%3e%3c/g%3e%3c/svg%3e");
--width-price-box-min: 285px;
--width-price-box-min: 240px;
--width-price-box-max: 355px;
--height-price-details-min: 53px;
padding: 102px 0 58px;
background: linear-gradient(
@@ -279,7 +280,7 @@
/* We use the plan count on the respective `.showing-` class
to determine a minimum width, at which point the plans scroll. */
min-width: calc(var(--count-plans) * var(--width-price-box-min));
padding: 20px;
padding: 20px 5px;
border-radius: 16px;
color: var(--color-box-copy);
background: var(--color-background-box);
@@ -410,12 +411,10 @@
.price,
.details {
&.no-discount {
/* Pad prices that do not have
a discount (e.g., Free, or a
customer's current plan). */
padding-bottom: 25px;
}
/* Preserve a height for allowing
price details to wrap as many
as three lines. */
min-height: var(--height-price-details-min);
}
}
}
@@ -740,7 +739,60 @@
}
}
@media screen and (width <= 1140px) {
.self-hosted-plan-pricing {
ul {
font-size: 14px;
}
.standard-price-box {
--height-price-details-min: 48px;
.price {
font-size: 32px;
}
.details {
p {
font-size: 13px;
line-height: 16px;
}
}
}
}
}
@media screen and (width <= 940px) {
/* This block of styles duplicates the adjustments
to .self-hosted-plan-pricing above; because of the
fewer number of Cloud plans, we don't need these
adjustments until this breakpoint. */
.cloud-plan-pricing {
ul {
font-size: 14px;
}
.standard-price-box {
--height-price-details-min: 48px;
--height-discounted-price-box: 91px;
.price {
font-size: 32px;
}
.details {
p {
font-size: 13px;
line-height: 16px;
}
}
.discount {
font-size: 13px;
}
}
}
h1 {
font-size: 40px;
}
@@ -749,19 +801,28 @@
font-size: 16px;
}
.pricing-tab h2 {
font-size: 24px;
line-height: 26px;
margin-bottom: 0;
.pricing-tab {
h2 {
font-size: 24px;
line-height: 26px;
margin-bottom: 5px;
}
p {
font-size: 14px;
padding-bottom: 10px;
}
}
.pricing-pane h2 {
font-size: 22px;
margin: 4px 0 12px;
.pricing-pane {
h2 {
font-size: 22px;
margin: 4px 0 12px;
}
}
}
@media screen and (width <= 900px) {
@media screen and (width <= 920px) {
.additional-pricing-information header h2 {
font-size: 24px;
}