mirror of
https://github.com/qdrant/landing_page.git
synced 2026-10-07 03:48:30 +02:00
fixes
This commit is contained in:
trean
@@ -17,7 +17,7 @@
|
||||
transition:
|
||||
all 0.3s ease-in-out,
|
||||
color 0.1s linear;
|
||||
padding-right: $icon-width;
|
||||
padding-right: calc($icon-width + 6px);
|
||||
|
||||
&:before {
|
||||
display: block;
|
||||
@@ -52,7 +52,6 @@
|
||||
}
|
||||
|
||||
&:hover {
|
||||
padding-right: calc($icon-width + 6px);
|
||||
&:after {
|
||||
animation: dash 0.3s ease-in-out forwards;
|
||||
}
|
||||
|
||||
@@ -4,6 +4,7 @@
|
||||
@import 'qdrant-pricing-doors-a';
|
||||
@import 'qdrant-pricing-doors-b';
|
||||
@import 'qdrant-pricing-marketplaces';
|
||||
@import 'pricing-table';
|
||||
@import 'qdrant-pricing-features';
|
||||
@import 'qdrant-pricing-faq';
|
||||
@import 'qdrant-pricing-comparison';
|
||||
|
||||
@@ -0,0 +1,303 @@
|
||||
@use '../../helpers/functions' as *;
|
||||
|
||||
/* Shared pricing table styles – used by qdrant-pricing-features and qdrant-pricing-comparison */
|
||||
|
||||
.pricing-table {
|
||||
&__table {
|
||||
// border: 0.5px solid $neutral-80;
|
||||
// border-radius: pxToRem(8);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
&__table-header {
|
||||
display: flex;
|
||||
|
||||
& .pricing-table__table-cell {
|
||||
border-bottom: 0;
|
||||
&:first-child {
|
||||
border-right: 0;
|
||||
}
|
||||
&:nth-child(2) {
|
||||
border-left: 0.5px solid $neutral-80;
|
||||
border-top-left-radius: pxToRem(8);
|
||||
}
|
||||
&:not(:first-of-type) {
|
||||
border-top: 0.5px solid $neutral-80;
|
||||
}
|
||||
&:last-child {
|
||||
border-right: 0.5px solid $neutral-80;
|
||||
border-top-right-radius: pxToRem(8);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__table-section {
|
||||
&:first-of-type &-header {
|
||||
border-top: 0.5px solid $neutral-80;
|
||||
border-top-left-radius: pxToRem(8);
|
||||
}
|
||||
|
||||
&:last-of-type.pricing-table__table-section--collapsed &-header {
|
||||
border-bottom-left-radius: pxToRem(8);
|
||||
}
|
||||
|
||||
&-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: $spacer * 1.5 $spacer * 2;
|
||||
background-color: #f5f8ff;
|
||||
border-bottom: 0.5px solid $neutral-80;
|
||||
border-right: 0.5px solid $neutral-80;
|
||||
border-left: 0.5px solid $neutral-80;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
&-title {
|
||||
font-size: pxToRem(16);
|
||||
font-weight: 500;
|
||||
color: $neutral-20;
|
||||
}
|
||||
|
||||
&-rows {
|
||||
overflow: hidden;
|
||||
transition: max-height 0.35s ease;
|
||||
}
|
||||
|
||||
&--collapsed {
|
||||
.pricing-table__chevron {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__chevron {
|
||||
color: $neutral-20;
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
&__table-row {
|
||||
display: flex;
|
||||
background-color: $neutral-98;
|
||||
border-bottom: 0.5px solid $neutral-80;
|
||||
border-right: 0.5px solid $neutral-80;
|
||||
border-left: 0.5px solid $neutral-80;
|
||||
}
|
||||
|
||||
&__table-body {
|
||||
.pricing-table__table-section:last-of-type
|
||||
.pricing-table__table-section-rows
|
||||
.pricing-table__table-row:last-child {
|
||||
border-bottom-left-radius: pxToRem(8);
|
||||
}
|
||||
}
|
||||
|
||||
&__table-cell {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: pxToRem(200);
|
||||
padding: $spacer $spacer * 2;
|
||||
font-size: pxToRem(14);
|
||||
line-height: 1.5;
|
||||
color: $neutral-30;
|
||||
border-right: 0.5px solid $neutral-80;
|
||||
text-align: center;
|
||||
|
||||
&:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
&--feature {
|
||||
flex: 1;
|
||||
justify-content: flex-start;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
&--tier {
|
||||
padding: $spacer $spacer * 2;
|
||||
font-size: pxToRem(20);
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.2px;
|
||||
color: $neutral-20;
|
||||
background-color: $neutral-98;
|
||||
border-bottom: 0.5px solid $neutral-80;
|
||||
}
|
||||
|
||||
&--highlight {
|
||||
background-color: #f5f8ff;
|
||||
|
||||
&.pricing-table__table-cell--tier {
|
||||
border-left: 0.5px solid $neutral-80;
|
||||
border-right: 0.5px solid $neutral-80;
|
||||
}
|
||||
}
|
||||
|
||||
&--cta {
|
||||
padding: $spacer * 2;
|
||||
background-color: $neutral-98;
|
||||
|
||||
.button {
|
||||
white-space: nowrap;
|
||||
padding: $spacer * 0.5 $spacer * 1.375;
|
||||
font-size: pxToRem(16);
|
||||
}
|
||||
|
||||
.button_outlined {
|
||||
color: $neutral-20;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__table-footer {
|
||||
display: flex;
|
||||
|
||||
// .pricing-table__table-cell--feature {
|
||||
// border-right: 0.5px solid $neutral-80;
|
||||
// }
|
||||
.pricing-table__table-cell {
|
||||
&:first-child {
|
||||
border-right: 0;
|
||||
}
|
||||
&:not(:first-child) {
|
||||
border-bottom: 0.5px solid $neutral-80;
|
||||
}
|
||||
&:nth-child(2) {
|
||||
border-left: 0.5px solid $neutral-80;
|
||||
border-bottom-left-radius: pxToRem(8);
|
||||
}
|
||||
&:last-child {
|
||||
border-right: 0.5px solid $neutral-80;
|
||||
border-bottom-right-radius: pxToRem(8);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__check {
|
||||
color: $neutral-30;
|
||||
}
|
||||
|
||||
&__x {
|
||||
color: $neutral-60;
|
||||
}
|
||||
|
||||
&__text {
|
||||
font-size: pxToRem(14);
|
||||
color: $neutral-30;
|
||||
|
||||
&--bold {
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
&__tier-tabs {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(xl) {
|
||||
&__table {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
&__table-header,
|
||||
&__table-row,
|
||||
&__table-footer {
|
||||
min-width: pxToRem(900);
|
||||
}
|
||||
|
||||
&__table-cell {
|
||||
min-width: pxToRem(160);
|
||||
|
||||
&--feature {
|
||||
min-width: pxToRem(260);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(lg) {
|
||||
&__tier-tabs {
|
||||
display: flex;
|
||||
gap: 0;
|
||||
padding: pxToRem(4);
|
||||
margin-bottom: $spacer * 1.5;
|
||||
background-color: $neutral-98;
|
||||
border: 1px solid $neutral-90;
|
||||
border-radius: pxToRem(8);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&__tier-tab {
|
||||
flex: 1;
|
||||
padding: $spacer * 0.5 $spacer;
|
||||
font-size: pxToRem(14);
|
||||
font-weight: 400;
|
||||
line-height: 1.5;
|
||||
color: $neutral-30;
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-radius: pxToRem(8);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
|
||||
&--active {
|
||||
font-weight: 600;
|
||||
color: $neutral-20;
|
||||
background-color: $neutral-94;
|
||||
}
|
||||
}
|
||||
|
||||
&__table {
|
||||
overflow-x: visible;
|
||||
}
|
||||
|
||||
&__table-header {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&__table-header,
|
||||
&__table-row,
|
||||
&__table-footer {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
&__table-row {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
&__table-cell {
|
||||
min-width: 0;
|
||||
|
||||
&[data-tier-col] {
|
||||
display: none;
|
||||
|
||||
&.pricing-table__table-cell--mobile-active {
|
||||
display: flex;
|
||||
flex: 0 0 auto;
|
||||
width: pxToRem(144);
|
||||
}
|
||||
}
|
||||
|
||||
&--feature {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__table-footer {
|
||||
.pricing-table__table-cell--feature {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.pricing-table__table-cell--cta {
|
||||
width: 100%;
|
||||
|
||||
&[data-tier-col].pricing-table__table-cell--mobile-active {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
+23
-27
@@ -44,18 +44,18 @@
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: $spacer * 1.5;
|
||||
padding: $spacer * 1.5 $spacer * 3.5;
|
||||
padding: $spacer * 1.5 $spacer * 3.5 $spacer * 1.5 $spacer * 3;
|
||||
background-color: $neutral-98;
|
||||
border: 1px solid $neutral-90;
|
||||
border-radius: pxToRem(8);
|
||||
max-width: pxToRem(600);
|
||||
margin: 0 auto;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
&__icon {
|
||||
flex-shrink: 0;
|
||||
width: 76px;
|
||||
height: 64px;
|
||||
height: pxToRem(100);
|
||||
margin-bottom: -$spacer * 1.5;
|
||||
|
||||
img {
|
||||
display: block;
|
||||
@@ -68,7 +68,6 @@
|
||||
&__content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $spacer * 0.5;
|
||||
}
|
||||
|
||||
&__title {
|
||||
@@ -78,6 +77,7 @@
|
||||
letter-spacing: -0.5px;
|
||||
margin: 0;
|
||||
color: $neutral-20;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
&__link-wrapper {
|
||||
@@ -95,25 +95,7 @@
|
||||
}
|
||||
|
||||
&__link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
font-weight: 500;
|
||||
color: $primary-50;
|
||||
text-decoration: none;
|
||||
transition: color 0.2s ease;
|
||||
|
||||
svg {
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $primary-60;
|
||||
|
||||
svg {
|
||||
transform: translateX(2px);
|
||||
}
|
||||
}
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
@@ -121,23 +103,37 @@
|
||||
|
||||
&__container {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
padding: $spacer * 1.5 $spacer * 1.25;
|
||||
gap: $spacer * 1.5;
|
||||
}
|
||||
|
||||
&__icon {
|
||||
width: 76px;
|
||||
height: 64px;
|
||||
margin: 0 auto;
|
||||
width: pxToRem(100);
|
||||
height: pxToRem(84);
|
||||
margin: 0;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
|
||||
&__content {
|
||||
align-items: center;
|
||||
gap: $spacer * 0.5;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: pxToRem(20);
|
||||
font-weight: 600;
|
||||
line-height: 1.3;
|
||||
letter-spacing: -0.5px;
|
||||
text-align: center;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
&__link-wrapper {
|
||||
|
||||
+6
-253
@@ -109,8 +109,13 @@
|
||||
color: $primary-50;
|
||||
text-decoration: none;
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
height: calc(1ex + 3px);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
color: $primary-50;
|
||||
}
|
||||
|
||||
svg {
|
||||
@@ -151,259 +156,7 @@
|
||||
padding: 0 0 $spacer * 5;
|
||||
background-color: $neutral-94;
|
||||
|
||||
&__table {
|
||||
border-radius: pxToRem(8);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
&__table-header {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
&__table-section {
|
||||
&-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: $spacer * 1.5 $spacer * 2;
|
||||
background-color: #f5f8ff;
|
||||
border-top: 0.5px solid $neutral-80;
|
||||
border-bottom: 0.5px solid $neutral-80;
|
||||
border-right: 0.5px solid $neutral-80;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
&-title {
|
||||
font-size: pxToRem(16);
|
||||
font-weight: 500;
|
||||
color: $neutral-20;
|
||||
}
|
||||
|
||||
&-rows {
|
||||
overflow: hidden;
|
||||
transition: max-height 0.35s ease;
|
||||
}
|
||||
|
||||
&--collapsed {
|
||||
.qdrant-pricing-comparison__chevron {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__chevron {
|
||||
color: $neutral-20;
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
&__table-body {
|
||||
border-left: 0.5px solid $neutral-80;
|
||||
}
|
||||
|
||||
&__table-row {
|
||||
display: flex;
|
||||
background-color: $neutral-98;
|
||||
border-bottom: 0.5px solid $neutral-80;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
&__table-cell {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: pxToRem(200);
|
||||
padding: $spacer $spacer * 2;
|
||||
font-size: pxToRem(14);
|
||||
line-height: 1.5;
|
||||
color: $neutral-30;
|
||||
border-right: 0.5px solid $neutral-80;
|
||||
text-align: center;
|
||||
|
||||
&--feature {
|
||||
flex: 1;
|
||||
justify-content: flex-start;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
&--tier {
|
||||
padding: $spacer $spacer * 2;
|
||||
font-size: pxToRem(20);
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.2px;
|
||||
color: $neutral-20;
|
||||
background-color: $neutral-98;
|
||||
border-top: 0.5px solid $neutral-80;
|
||||
border-left: 0.5px solid $neutral-80;
|
||||
|
||||
&:first-of-type {
|
||||
border-top-left-radius: pxToRem(8);
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-top-right-radius: pxToRem(8);
|
||||
}
|
||||
}
|
||||
|
||||
&--highlight {
|
||||
background-color: #f5f8ff;
|
||||
}
|
||||
|
||||
&--cta {
|
||||
padding: $spacer * 1.5 $spacer * 2 $spacer * 1.25;
|
||||
background-color: $neutral-98;
|
||||
border-bottom: 0.5px solid $neutral-80;
|
||||
|
||||
&:last-child {
|
||||
border-bottom-right-radius: pxToRem(8);
|
||||
}
|
||||
|
||||
.button {
|
||||
width: pxToRem(160);
|
||||
padding: $spacer * 0.5 $spacer * 1.375;
|
||||
font-size: pxToRem(16);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__table-footer {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
&__check {
|
||||
color: $secondary-blue-50;
|
||||
}
|
||||
|
||||
&__x {
|
||||
color: $neutral-60;
|
||||
}
|
||||
|
||||
&__text {
|
||||
font-size: pxToRem(14);
|
||||
color: $neutral-30;
|
||||
|
||||
&--bold {
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
&__tier-tabs {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(xl) {
|
||||
&__table {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
&__table-header,
|
||||
&__table-row,
|
||||
&__table-footer {
|
||||
min-width: pxToRem(900);
|
||||
}
|
||||
|
||||
&__table-cell {
|
||||
min-width: pxToRem(160);
|
||||
|
||||
&--feature {
|
||||
min-width: pxToRem(260);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(lg) {
|
||||
padding: 0 0 $spacer * 4;
|
||||
|
||||
&__tier-tabs {
|
||||
display: flex;
|
||||
gap: 0;
|
||||
padding: pxToRem(4);
|
||||
margin-bottom: $spacer * 1.5;
|
||||
background-color: $neutral-98;
|
||||
border: 1px solid $neutral-90;
|
||||
border-radius: pxToRem(8);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&__tier-tab {
|
||||
flex: 1;
|
||||
padding: $spacer * 0.5 $spacer;
|
||||
font-size: pxToRem(14);
|
||||
font-weight: 400;
|
||||
line-height: 1.5;
|
||||
color: $neutral-30;
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-radius: pxToRem(8);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
|
||||
&--active {
|
||||
font-weight: 600;
|
||||
color: $neutral-20;
|
||||
background-color: $neutral-94;
|
||||
}
|
||||
}
|
||||
|
||||
&__table {
|
||||
overflow-x: visible;
|
||||
}
|
||||
|
||||
&__table-header {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&__table-header,
|
||||
&__table-row,
|
||||
&__table-footer {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
&__table-row {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
&__table-cell {
|
||||
min-width: 0;
|
||||
|
||||
&[data-tier-col] {
|
||||
display: none;
|
||||
|
||||
&.qdrant-pricing-comparison__table-cell--mobile-active {
|
||||
display: flex;
|
||||
flex: 0 0 auto;
|
||||
width: pxToRem(144);
|
||||
}
|
||||
}
|
||||
|
||||
&--feature {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__table-section-header {
|
||||
border-top-left-radius: pxToRem(8);
|
||||
border-top-right-radius: pxToRem(8);
|
||||
}
|
||||
|
||||
&__table-footer {
|
||||
.qdrant-pricing-comparison__table-cell--feature {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.qdrant-pricing-comparison__table-cell--cta {
|
||||
width: 100%;
|
||||
|
||||
&[data-tier-col].qdrant-pricing-comparison__table-cell--mobile-active {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
+46
-6
@@ -43,8 +43,16 @@
|
||||
}
|
||||
}
|
||||
|
||||
&__doors {
|
||||
&__doors-wrapper {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&__doors {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
grid-template-rows: auto auto 1fr auto;
|
||||
width: 100%;
|
||||
max-width: pxToRem(1110);
|
||||
margin: 0 auto;
|
||||
@@ -52,13 +60,26 @@
|
||||
&--hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&[data-doors-tab='on-premise'] {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
grid-template-rows: auto auto 1fr 1fr auto;
|
||||
max-width: pxToRem(1300);
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
}
|
||||
|
||||
&__door {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
display: grid;
|
||||
grid-template-rows: subgrid;
|
||||
grid-row: span 4;
|
||||
background-color: $neutral-98;
|
||||
|
||||
[data-doors-tab='on-premise'] & {
|
||||
grid-row: span 5;
|
||||
grid-template-rows: subgrid;
|
||||
}
|
||||
border: 1px solid $neutral-90;
|
||||
border-right: none;
|
||||
|
||||
@@ -163,6 +184,10 @@
|
||||
padding: $spacer $spacer * 2;
|
||||
border-bottom: 0.5px solid $neutral-80;
|
||||
min-height: pxToRem(168);
|
||||
|
||||
[data-doors-tab='on-premise'] & {
|
||||
min-height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
&__feature-group-label {
|
||||
@@ -199,7 +224,7 @@
|
||||
&__check-icon {
|
||||
flex-shrink: 0;
|
||||
margin-top: 3px;
|
||||
color: $neutral-30;
|
||||
color: $primary-50;
|
||||
}
|
||||
|
||||
&__marketplace {
|
||||
@@ -304,12 +329,27 @@
|
||||
@include media-breakpoint-down(lg) {
|
||||
padding: 0 0 $spacer * 2;
|
||||
|
||||
&__doors-wrapper {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&__doors {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
grid-template-columns: unset;
|
||||
grid-template-rows: unset;
|
||||
gap: $spacer * 1.5;
|
||||
|
||||
&--hidden {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&__door {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
grid-row: unset;
|
||||
grid-template-rows: unset;
|
||||
border-radius: pxToRem(8);
|
||||
border: 1px solid $neutral-90;
|
||||
border-right: 1px solid $neutral-90;
|
||||
@@ -332,7 +372,7 @@
|
||||
padding: 0 $spacer * 1.25 $spacer * 2;
|
||||
|
||||
&__tabs {
|
||||
width: 100%;
|
||||
width: fit-content;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
+6
-251
@@ -29,6 +29,12 @@
|
||||
border-radius: pxToRem(8);
|
||||
}
|
||||
|
||||
&__table-wrapper {
|
||||
&--hidden {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&__tab {
|
||||
padding: $spacer * 0.5 $spacer * 1.5;
|
||||
font-size: pxToRem(16);
|
||||
@@ -52,150 +58,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
&__table {
|
||||
border-radius: pxToRem(8);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
&__table-header {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
&__table-section {
|
||||
&-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: $spacer * 1.5 $spacer * 2;
|
||||
background-color: #f5f8ff;
|
||||
border-top: 0.5px solid $neutral-80;
|
||||
border-bottom: 0.5px solid $neutral-80;
|
||||
border-right: 0.5px solid $neutral-80;
|
||||
border-top-left-radius: pxToRem(8);
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
&-title {
|
||||
font-size: pxToRem(16);
|
||||
font-weight: 500;
|
||||
color: $neutral-20;
|
||||
}
|
||||
|
||||
&-rows {
|
||||
overflow: hidden;
|
||||
transition: max-height 0.35s ease;
|
||||
}
|
||||
|
||||
&--collapsed {
|
||||
.qdrant-pricing-features__chevron {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__chevron {
|
||||
color: $neutral-20;
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
&__table-body {
|
||||
border-left: 0.5px solid $neutral-80;
|
||||
}
|
||||
|
||||
&__table-row {
|
||||
display: flex;
|
||||
background-color: $neutral-98;
|
||||
border-bottom: 0.5px solid $neutral-80;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
&__table-cell {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: pxToRem(200);
|
||||
padding: $spacer $spacer * 2;
|
||||
font-size: pxToRem(14);
|
||||
line-height: 1.5;
|
||||
color: $neutral-30;
|
||||
border-right: 0.5px solid $neutral-80;
|
||||
text-align: center;
|
||||
|
||||
&--feature {
|
||||
flex: 1;
|
||||
justify-content: flex-start;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
&--tier {
|
||||
padding: $spacer $spacer * 2;
|
||||
font-size: pxToRem(20);
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.2px;
|
||||
color: $neutral-20;
|
||||
background-color: $neutral-98;
|
||||
border-top: 0.5px solid $neutral-80;
|
||||
border-left: 0.5px solid $neutral-80;
|
||||
|
||||
&:first-of-type {
|
||||
border-top-left-radius: pxToRem(8);
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-top-right-radius: pxToRem(8);
|
||||
}
|
||||
}
|
||||
|
||||
&--highlight {
|
||||
background-color: #f5f8ff;
|
||||
}
|
||||
|
||||
&--cta {
|
||||
padding: $spacer * 1.5 $spacer * 2 $spacer * 1.25;
|
||||
background-color: $neutral-98;
|
||||
border-bottom: 0.5px solid $neutral-80;
|
||||
|
||||
&:last-child {
|
||||
border-bottom-right-radius: pxToRem(8);
|
||||
}
|
||||
|
||||
.button {
|
||||
width: pxToRem(160);
|
||||
padding: $spacer * 0.5 $spacer * 1.375;
|
||||
font-size: pxToRem(16);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__table-footer {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
&__check {
|
||||
color: $secondary-blue-50;
|
||||
}
|
||||
|
||||
&__x {
|
||||
color: $neutral-60;
|
||||
}
|
||||
|
||||
&__text {
|
||||
font-size: pxToRem(14);
|
||||
color: $neutral-30;
|
||||
|
||||
&--bold {
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
&__tier-tabs {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&__compare {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
@@ -212,24 +74,6 @@
|
||||
align-items: flex-start;
|
||||
gap: $spacer * 2;
|
||||
}
|
||||
|
||||
&__table {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
&__table-header,
|
||||
&__table-row,
|
||||
&__table-footer {
|
||||
min-width: pxToRem(900);
|
||||
}
|
||||
|
||||
&__table-cell {
|
||||
min-width: pxToRem(160);
|
||||
|
||||
&--feature {
|
||||
min-width: pxToRem(260);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(lg) {
|
||||
@@ -244,94 +88,5 @@
|
||||
&__title {
|
||||
font-size: pxToRem(32);
|
||||
}
|
||||
|
||||
&__tier-tabs {
|
||||
display: flex;
|
||||
gap: 0;
|
||||
padding: pxToRem(4);
|
||||
margin-bottom: $spacer * 1.5;
|
||||
background-color: $neutral-98;
|
||||
border: 1px solid $neutral-90;
|
||||
border-radius: pxToRem(8);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&__tier-tab {
|
||||
flex: 1;
|
||||
padding: $spacer * 0.5 $spacer;
|
||||
font-size: pxToRem(14);
|
||||
font-weight: 400;
|
||||
line-height: 1.5;
|
||||
color: $neutral-30;
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-radius: pxToRem(8);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
|
||||
&--active {
|
||||
font-weight: 600;
|
||||
color: $neutral-20;
|
||||
background-color: $neutral-94;
|
||||
}
|
||||
}
|
||||
|
||||
&__table {
|
||||
overflow-x: visible;
|
||||
}
|
||||
|
||||
&__table-header {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&__table-header,
|
||||
&__table-row,
|
||||
&__table-footer {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
&__table-row {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
&__table-cell {
|
||||
min-width: 0;
|
||||
|
||||
&[data-tier-col] {
|
||||
display: none;
|
||||
|
||||
&.qdrant-pricing-features__table-cell--mobile-active {
|
||||
display: flex;
|
||||
flex: 0 0 auto;
|
||||
width: pxToRem(144);
|
||||
}
|
||||
}
|
||||
|
||||
&--feature {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__table-section-header {
|
||||
border-top-left-radius: pxToRem(8);
|
||||
border-top-right-radius: pxToRem(8);
|
||||
}
|
||||
|
||||
&__table-footer {
|
||||
.qdrant-pricing-features__table-cell--feature {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.qdrant-pricing-features__table-cell--cta {
|
||||
width: 100%;
|
||||
|
||||
&[data-tier-col].qdrant-pricing-features__table-cell--mobile-active {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
+3
-11
@@ -96,18 +96,10 @@
|
||||
font-weight: 500;
|
||||
color: $primary-50;
|
||||
text-decoration: none;
|
||||
transition: color 0.2s ease;
|
||||
|
||||
svg {
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $primary-60;
|
||||
|
||||
svg {
|
||||
transform: translateX(2px);
|
||||
}
|
||||
&::before,
|
||||
&::after {
|
||||
height: calc(1ex + 3px);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user