-
{{ shortGroupLabel(group.name) }}
+
+
{{ shortGroupLabel(group.name) }}
+
+
{{ group.description }}
@@ -101,35 +159,62 @@ function priceLabel(v: DedicatedConfigValue): string {
v-for="fam in familyGroups"
:key="fam.family"
class="os-family"
+ :class="{
+ 'os-family--open': isFamilyOpen(fam.family),
+ 'os-family--has-selection': !!selectedInFamily(fam),
+ }"
>
-
{{ fam.family }}
-
-
@@ -141,11 +226,38 @@ function priceLabel(v: DedicatedConfigValue): string {
margin-bottom: 14px;
}
+.os-group__head-row {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ margin-bottom: 4px;
+}
+
.os-group__title {
font-size: 16px;
font-weight: 700;
letter-spacing: -0.01em;
- margin-bottom: 4px;
+ margin-bottom: 0;
+}
+
+.os-group__expand-toggle {
+ display: inline-flex;
+ align-items: center;
+ font-size: 11px;
+ font-weight: 600;
+ color: rgba(var(--v-theme-on-surface), 0.6);
+ background: transparent;
+ border: 1px solid rgba(var(--v-theme-on-surface), 0.12);
+ padding: 4px 10px;
+ border-radius: 999px;
+ cursor: pointer;
+ transition: color 0.15s, border-color 0.15s, background-color 0.15s;
+
+ &:hover {
+ color: rgba(var(--v-theme-on-surface), 0.95);
+ border-color: rgba(var(--v-theme-primary), 0.45);
+ background: rgba(var(--v-theme-primary), 0.06);
+ }
}
.os-group__desc {
@@ -157,16 +269,87 @@ function priceLabel(v: DedicatedConfigValue): string {
.os-group__families {
display: flex;
flex-direction: column;
- gap: 18px;
+ gap: 8px;
}
-.os-family__heading {
- font-size: 11px;
+.os-family {
+ border-radius: 12px;
+ border: 1px solid rgba(var(--v-theme-on-surface), 0.08);
+ background: rgba(var(--v-theme-on-surface), 0.03);
+ overflow: hidden;
+ transition: border-color 0.15s;
+}
+
+.os-family--has-selection {
+ border-color: rgba(var(--v-theme-primary), 0.35);
+ background: rgba(var(--v-theme-primary), 0.04);
+}
+
+.os-family--open {
+ background: rgba(var(--v-theme-on-surface), 0.04);
+}
+
+.os-family__header {
+ display: flex;
+ align-items: center;
+ gap: 12px;
+ width: 100%;
+ padding: 12px 14px;
+ background: transparent;
+ border: none;
+ cursor: pointer;
+ text-align: left;
+
+ &:hover {
+ background: rgba(var(--v-theme-on-surface), 0.04);
+ }
+}
+
+.os-family__logo {
+ width: 22px;
+ height: 22px;
+ object-fit: contain;
+ flex-shrink: 0;
+ user-select: none;
+ pointer-events: none;
+}
+
+.os-family__name {
+ font-size: 14px;
font-weight: 700;
- letter-spacing: 0.1em;
- text-transform: uppercase;
+ color: rgba(var(--v-theme-on-surface), 0.95);
+ flex-grow: 1;
+}
+
+.os-family__selected {
+ display: inline-flex;
+ align-items: center;
+ font-size: 12px;
+ font-weight: 600;
+ color: rgb(var(--v-theme-primary));
+ padding: 4px 10px;
+ border-radius: 999px;
+ background: rgba(var(--v-theme-primary), 0.1);
+ flex-shrink: 0;
+ margin-right: 4px;
+ white-space: nowrap;
+}
+
+.os-family__count {
+ font-size: 11px;
+ color: rgba(var(--v-theme-on-surface), 0.5);
+ font-weight: 500;
+ flex-shrink: 0;
+ margin-right: 4px;
+}
+
+.os-family__chevron {
+ flex-shrink: 0;
color: rgba(var(--v-theme-on-surface), 0.55);
- margin-bottom: 8px;
+}
+
+.os-family__panel {
+ padding: 4px 14px 14px;
}
.os-family__grid {
@@ -181,10 +364,10 @@ function priceLabel(v: DedicatedConfigValue): string {
flex-direction: column;
align-items: center;
gap: 8px;
- padding: 18px 12px 14px;
- border-radius: 12px;
+ padding: 16px 12px 12px;
+ border-radius: 10px;
border: 1px solid rgba(var(--v-theme-on-surface), 0.08);
- background: rgba(var(--v-theme-on-surface), 0.03);
+ background: rgba(var(--v-theme-surface), 0.6);
cursor: pointer;
transition: all 0.15s ease;
text-align: center;
@@ -209,8 +392,8 @@ function priceLabel(v: DedicatedConfigValue): string {
}
.os-tile__logo {
- width: 44px;
- height: 44px;
+ width: 40px;
+ height: 40px;
object-fit: contain;
user-select: none;
pointer-events: none;