@bytebrand/fe-ui-core-autobahn 1.0.1 → 1.0.3

package/compat/VehicleSmallCard/VehicleData/VehicleInfo/VehicleInfo.styl

@@ -1,273 +1,273 @@
-@import '../../../legacy-theme/mixins.styl';
-
-.vehicleInfo
-  box-sizing: border-box
-  padding: 8px 7px 14px 7px
-  flex-shrink: 0;
-  display: grid;
-  text-align: left;
-  text-decoration none;
-  color: inherit;
-  position relative;
-  grid-area: info;
-
-  & > .consumptionCombined
-    font-size: 9px
-
-  // ADV-88: new plug-in hybrid consumption line — full-width row at the very bottom of the
-  // card on every breakpoint. `order` pushes it past the price-rating strip so the long text
-  // never overlaps it; overrides the per-variant desktop reset to grid-column/grid-row: auto.
-  & > .pluginFullWidth
-    grid-column: 1 / -1 !important
-    grid-row: auto !important
-    order: 99
-    height: auto !important
-    align-items: flex-start
-    white-space: normal
-    border-bottom: none
-    padding-top: 4px
-    span
-      font-size: 9px
-      line-height: 1.35
-
-  +media-tablet-landscape-down()
-    padding: 0 10px;
-
-  &::after
-    content: '';
-    position absolute;
-    right: 0;
-    width: 1px;
-    height: calc(100% - 10px);
-    top: 10px;
-    background-color rgba(76, 78, 100, 0.12);
-
-  &.vehiclePropertiesLanding
-    grid-auto-rows: minmax(44px, auto);
-    grid-template-columns: 1fr 1fr;
-    padding: 0 3px;
-
-    & > .consumptionCombined
-      white-space: pre-line;
-      grid-column: 1 / span 2;
-      grid-row: 4;
-
-    & > div:last-of-type
-      grid-column: 1 / span 2;
-
-    +media-tablet-landscape-up()
-      padding-top: 2px;
-      grid-auto-rows: minmax(38px, auto);
-      grid-template-columns: 100%;
-
-      span
-        font-size: 11px;
-
-      & > .consumptionCombined,
-      & > div:last-of-type
-        grid-column: auto;
-        grid-row: auto;
-
-      & .priceRatingSegmentWrapSRL
-        gap: 2px;
-        & > div
-          width: 13px;
-          height: 12px;
-
-      & .priceRatingSRL span
-        font-size: 8px;
-        margin-bottom: 2px;
-
-  &.vehiclePropertiesMain
-    grid-auto-rows: minmax(44px, auto);
-    grid-template-columns: 100%;
-    padding: 0 6px;
-
-    & > .consumptionCombined
-      white-space: pre-line;
-      grid-row: 4;
-
-    // mobile (home top-offer / CDP comparable): vertically centre the "good price" block.
-    +media-tablet-landscape-down()
-      & > .priceRating
-        align-self: center
-        margin: auto 0
-
-    +media-tablet-landscape-up()
-      grid-auto-rows: minmax(38px, auto);
-
-      span
-        font-size: 11px;
-
-      & > .consumptionCombined,
-      & > div:last-of-type
-        grid-column: auto;
-        grid-row: auto;
-
-      & .priceRatingSegmentWrapSRL
-        gap: 2px;
-        & > div
-          width: 13px;
-          height: 12px;
-
-      & .priceRatingSRL span
-        font-size: 8px;
-        margin-bottom: 2px;
-
-  &.vehiclePropertiesComparable
-    grid-template-columns: 100%;
-    grid-auto-rows: 40px;
-
-    +media-phone-only()
-      padding: 16px 12px 18px 12px;
-
-      &::after
-        height: calc(100% - 20px);
-
-    +media-phone-up()
-      grid-auto-rows: 38px;
-
-      & > .consumptionCombined span
-        font-size: 8px
-
-    +media-tablet-landscape-up()
-      grid-auto-rows: 36px;
-
-      span
-        font-size: 11px;
-
-      & .priceRatingSegmentWrapSRL
-        gap: 2px;
-        & > div
-          width: 13px;
-          height: 12px;
-
-      & .priceRatingSRL span
-        font-size: 8px;
-        margin-bottom: 2px;
-
-  &.vehiclePropertiesSearch,
-  &.vehiclePropertiesMyVehicles
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    grid-auto-rows: 44px;
-
-    // ADV-70: underline the price-rating ("GUTER PREIS") cell like the spec rows above it —
-    // stretch it to fill the grid cell so the border sits at the same baseline.
-    & > .priceRating
-      margin: 0
-      align-self: stretch
-      display: flex
-      flex-direction: column
-      justify-content: center
-      border-bottom: 1px solid rgba(76, 78, 100, 0.12)
-
-    & > .consumptionCombined
-      white-space: pre-line;
-      grid-column: 1 / span 2;
-      grid-row: 4;
-
-    & > .location
-      grid-column: 1 / span 2;
-
-      +media-tablet-landscape-up()
-        height: 30px;
-        margin-top: auto;
-        border: none;
-
-    & > div:last-of-type
-      grid-column: 1 / span 2;
-
-    &::after
-      height: calc(100% - 20px);
-
-    +media-tablet-landscape-up()
-      margin-top: -13px;
-      padding: 0;
-      grid-auto-rows: 52px;
-
-      &:after
-        display none
-
-      & > .consumptionCombined,
-      & > div:last-of-type
-        grid-column: auto;
-        grid-row: auto;
-
-      & > .offerAvailability
-        border: none;
-
-  &.vehiclePropertiesFavorite
-    grid-template-columns: 1fr;
-    display: grid;
-    grid-auto-rows: 44px;
-
-    & > .consumptionCombined
-      white-space: pre-line;
-      grid-row: 4;
-
-    +media-tablet-landscape-up()
-      grid-template-columns: 1fr 1fr 1fr;
-      margin-top: -13px;
-      padding: 0;
-      grid-auto-rows: 52px;
-
-      &:after
-        display none
-
-      & > .consumptionCombined,
-      & > div:last-of-type
-        grid-column: auto;
-        grid-row: auto;
-
-      & > .offerAvailability
-        border: none;
-        & + div
-          border: none;
-
-  &.vehiclePropertiesRecently
-    grid-template-columns: 1fr;
-    display: grid;
-    grid-auto-rows: 44px;
-    padding: 0 10px;
-
-    & > .consumptionCombined
-      white-space: pre-line;
-      grid-row: 4;
-
-  &.vehiclePropertiesMyVehicles
-    &::after
-      +media-tablet-landscape-down()
-        height: calc(100% - 10px);
-
-  &.vehiclePropertiesIsAlternative
-    +media-tablet-landscape-up()
-      grid-auto-rows: 62px;
-      margin-top: -68px;
-
-.priceRating
-  margin: auto;
-  box-sizing: border-box;
-
-// ADV-88: SRL DESKTOP — hide the availability ("Sofort"/"from {date}") cell ONLY for NEW plug-in
-// hybrids (engineData.hybridPlugin + mainData.condition selector_condition_new) so the price-rating
-// flows up into its place. All other cards keep availability; mobile keeps it for everyone.
-.vehiclePropertiesSearch.searchPluginInfo
-  +media-tablet-landscape-up()
-    & > .offerAvailability
-      display: none
-
-// SRL MOBILE — centre the "good price" cell (horizontally + vertically) on ALL search cards.
-.vehicleInfo.vehiclePropertiesSearch
-  +media-tablet-landscape-down()
-    & > .priceRating
-      align-items: center
-      justify-content: center
-
-// SRL MOBILE — drop the "good price" underline ONLY for NEW plug-in hybrids (engineData.hybridPlugin
-// + mainData.condition selector_condition_new). The extra .searchPluginInfo makes this (0,4,0) so it
-// beats the base (0,3,0) border-bottom; non-plug-in cards keep the underline.
-.vehicleInfo.vehiclePropertiesSearch.searchPluginInfo
-  +media-tablet-landscape-down()
-    & > .priceRating
-      border-bottom: none
+@import '../../../legacy-theme/mixins.styl';
+
+.vehicleInfo
+  box-sizing: border-box
+  padding: 8px 7px 14px 7px
+  flex-shrink: 0;
+  display: grid;
+  text-align: left;
+  text-decoration none;
+  color: inherit;
+  position relative;
+  grid-area: info;
+
+  & > .consumptionCombined
+    font-size: 9px
+
+  // ADV-88: new plug-in hybrid consumption line — full-width row at the very bottom of the
+  // card on every breakpoint. `order` pushes it past the price-rating strip so the long text
+  // never overlaps it; overrides the per-variant desktop reset to grid-column/grid-row: auto.
+  & > .pluginFullWidth
+    grid-column: 1 / -1 !important
+    grid-row: auto !important
+    order: 99
+    height: auto !important
+    align-items: flex-start
+    white-space: normal
+    border-bottom: none
+    padding-top: 4px
+    span
+      font-size: 9px
+      line-height: 1.35
+
+  +media-tablet-landscape-down()
+    padding: 0 10px;
+
+  &::after
+    content: '';
+    position absolute;
+    right: 0;
+    width: 1px;
+    height: calc(100% - 10px);
+    top: 10px;
+    background-color rgba(76, 78, 100, 0.12);
+
+  &.vehiclePropertiesLanding
+    grid-auto-rows: minmax(44px, auto);
+    grid-template-columns: 1fr 1fr;
+    padding: 0 3px;
+
+    & > .consumptionCombined
+      white-space: pre-line;
+      grid-column: 1 / span 2;
+      grid-row: 4;
+
+    & > div:last-of-type
+      grid-column: 1 / span 2;
+
+    +media-tablet-landscape-up()
+      padding-top: 2px;
+      grid-auto-rows: minmax(38px, auto);
+      grid-template-columns: 100%;
+
+      span
+        font-size: 11px;
+
+      & > .consumptionCombined,
+      & > div:last-of-type
+        grid-column: auto;
+        grid-row: auto;
+
+      & .priceRatingSegmentWrapSRL
+        gap: 2px;
+        & > div
+          width: 13px;
+          height: 12px;
+
+      & .priceRatingSRL span
+        font-size: 8px;
+        margin-bottom: 2px;
+
+  &.vehiclePropertiesMain
+    grid-auto-rows: minmax(44px, auto);
+    grid-template-columns: 100%;
+    padding: 0 6px;
+
+    & > .consumptionCombined
+      white-space: pre-line;
+      grid-row: 4;
+
+    // mobile (home top-offer / CDP comparable): vertically centre the "good price" block.
+    +media-tablet-landscape-down()
+      & > .priceRating
+        align-self: center
+        margin: auto 0
+
+    +media-tablet-landscape-up()
+      grid-auto-rows: minmax(38px, auto);
+
+      span
+        font-size: 11px;
+
+      & > .consumptionCombined,
+      & > div:last-of-type
+        grid-column: auto;
+        grid-row: auto;
+
+      & .priceRatingSegmentWrapSRL
+        gap: 2px;
+        & > div
+          width: 13px;
+          height: 12px;
+
+      & .priceRatingSRL span
+        font-size: 8px;
+        margin-bottom: 2px;
+
+  &.vehiclePropertiesComparable
+    grid-template-columns: 100%;
+    grid-auto-rows: 40px;
+
+    +media-phone-only()
+      padding: 16px 12px 18px 12px;
+
+      &::after
+        height: calc(100% - 20px);
+
+    +media-phone-up()
+      grid-auto-rows: 38px;
+
+      & > .consumptionCombined span
+        font-size: 8px
+
+    +media-tablet-landscape-up()
+      grid-auto-rows: 36px;
+
+      span
+        font-size: 11px;
+
+      & .priceRatingSegmentWrapSRL
+        gap: 2px;
+        & > div
+          width: 13px;
+          height: 12px;
+
+      & .priceRatingSRL span
+        font-size: 8px;
+        margin-bottom: 2px;
+
+  &.vehiclePropertiesSearch,
+  &.vehiclePropertiesMyVehicles
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-auto-rows: 44px;
+
+    // ADV-70: underline the price-rating ("GUTER PREIS") cell like the spec rows above it —
+    // stretch it to fill the grid cell so the border sits at the same baseline.
+    & > .priceRating
+      margin: 0
+      align-self: stretch
+      display: flex
+      flex-direction: column
+      justify-content: center
+      border-bottom: 1px solid rgba(76, 78, 100, 0.12)
+
+    & > .consumptionCombined
+      white-space: pre-line;
+      grid-column: 1 / span 2;
+      grid-row: 4;
+
+    & > .location
+      grid-column: 1 / span 2;
+
+      +media-tablet-landscape-up()
+        height: 30px;
+        margin-top: auto;
+        border: none;
+
+    & > div:last-of-type
+      grid-column: 1 / span 2;
+
+    &::after
+      height: calc(100% - 20px);
+
+    +media-tablet-landscape-up()
+      margin-top: -13px;
+      padding: 0;
+      grid-auto-rows: 52px;
+
+      &:after
+        display none
+
+      & > .consumptionCombined,
+      & > div:last-of-type
+        grid-column: auto;
+        grid-row: auto;
+
+      & > .offerAvailability
+        border: none;
+
+  &.vehiclePropertiesFavorite
+    grid-template-columns: 1fr;
+    display: grid;
+    grid-auto-rows: 44px;
+
+    & > .consumptionCombined
+      white-space: pre-line;
+      grid-row: 4;
+
+    +media-tablet-landscape-up()
+      grid-template-columns: 1fr 1fr 1fr;
+      margin-top: -13px;
+      padding: 0;
+      grid-auto-rows: 52px;
+
+      &:after
+        display none
+
+      & > .consumptionCombined,
+      & > div:last-of-type
+        grid-column: auto;
+        grid-row: auto;
+
+      & > .offerAvailability
+        border: none;
+        & + div
+          border: none;
+
+  &.vehiclePropertiesRecently
+    grid-template-columns: 1fr;
+    display: grid;
+    grid-auto-rows: 44px;
+    padding: 0 10px;
+
+    & > .consumptionCombined
+      white-space: pre-line;
+      grid-row: 4;
+
+  &.vehiclePropertiesMyVehicles
+    &::after
+      +media-tablet-landscape-down()
+        height: calc(100% - 10px);
+
+  &.vehiclePropertiesIsAlternative
+    +media-tablet-landscape-up()
+      grid-auto-rows: 62px;
+      margin-top: -68px;
+
+.priceRating
+  margin: auto;
+  box-sizing: border-box;
+
+// ADV-88: SRL DESKTOP — hide the availability ("Sofort"/"from {date}") cell ONLY for NEW plug-in
+// hybrids (engineData.hybridPlugin + mainData.condition selector_condition_new) so the price-rating
+// flows up into its place. All other cards keep availability; mobile keeps it for everyone.
+.vehiclePropertiesSearch.searchPluginInfo
+  +media-tablet-landscape-up()
+    & > .offerAvailability
+      display: none
+
+// SRL MOBILE — centre the "good price" cell (horizontally + vertically) on ALL search cards.
+.vehicleInfo.vehiclePropertiesSearch
+  +media-tablet-landscape-down()
+    & > .priceRating
+      align-items: center
+      justify-content: center
+
+// SRL MOBILE — drop the "good price" underline ONLY for NEW plug-in hybrids (engineData.hybridPlugin
+// + mainData.condition selector_condition_new). The extra .searchPluginInfo makes this (0,4,0) so it
+// beats the base (0,3,0) border-bottom; non-plug-in cards keep the underline.
+.vehicleInfo.vehiclePropertiesSearch.searchPluginInfo
+  +media-tablet-landscape-down()
+    & > .priceRating
+      border-bottom: none