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

package/compat/VehicleSmallCard/VehicleSmallCard.styl

@@ -1,310 +1,310 @@
-@import '../legacy-theme/mixins.styl';
-@import '../legacy-theme/theme.styl';
-
-.vehicle
-  position: relative
-  background-color: #fff;
-  display: grid;
-
-  +media-tablet-landscape-up()
-    border-radius: 10px;
-    border: 1px solid rgba(76, 78, 100, 0.12)
-
-  &.disableBorder
-     border-bottom: 0;
-
-  &.vehicleWrapMain,
-  &.vehicleWrapComparable
-    grid-template-areas:
-    'title title'\
-    'image image'\
-    'info price'\
-    'seoText seoText'
-
-  &.vehicleWrapComparable
-    min-width: 230px
-    margin: 0 4px
-    border-radius 3px
-    border: 1px solid rgba(76, 78, 100, 0.12);
-    grid-template-columns: 100px 1fr;
-
-    +media-tablet-down()
-      min-width: 340px;
-
-    +media-phone-only()
-      margin: 0 auto;
-      min-width: auto;
-      max-width: 335px;
-      width: 100%;
-      grid-template-columns: 155px 1fr;
-
-  &.vehicleWrapSearch
-    grid-template-areas:
-      'title title'\
-      'image image'\
-      'info price'\
-      'seoText seoText'
-    grid-template-columns: 55% 45%;
-    border-bottom: 1px solid #DFDFDF;
-    border-top: 1px solid #DFDFDF;
-    margin-bottom: 5px;
-    padding-bottom: 8px;
-    +media-tablet-landscape-up()
-      min-height: 252px;
-      box-sizing: border-box;
-      border: 1px solid rgba(76, 78, 100, 0.12);
-      padding: 10px;
-      grid-gap: 10px 15px;
-      grid-template-columns: 260px 1fr 189px;
-      grid-template-areas:
-        'title title price'\
-        'image info price'
-
-  &.vehicleWrapFavorite
-    grid-template-areas:
-      'title title'\
-      'image image'\
-      'info price'\
-      'seoText seoText'
-    grid-template-columns: 160px 1fr;
-    border: 1px solid rgba(76, 78, 100, 0.12);
-    border-radius: 10px;
-    padding-bottom: 15px;
-    +media-tablet-landscape-up()
-      padding: 10px;
-      grid-gap: 10px 15px;
-      grid-template-columns: 260px 1fr 245px;
-      grid-template-areas:
-        'title title price'\
-        'image info price'
-
-  &.vehicleWrapRecently
-    box-sizing: border-box;
-    grid-template-columns: 160px 1fr;
-    grid-template-areas:
-      'title title'\
-      'image image'\
-      'info price'\
-      'seoText seoText'
-    border: 1px solid rgba(76, 78, 100, 0.12);
-    border-radius: 10px;
-    padding-bottom: 15px;
-
-    & [class*='withStats__topWrapper']
-      left: 16px;
-      right: 16px;
-
-    & [class*='withStats__controls']
-      padding: 0 16px;
-
-    +media-tablet-up()
-      max-width: 98%;
-    +media-tablet-landscape-up()
-      max-width: 346px;
-
-  &.vehicleWrapLanding
-    box-sizing: border-box;
-    grid-template-areas:
-      'title title'\
-      'image image'\
-      'info price'\
-      'seoText seoText'
-    grid-template-columns: 55% 45%;
-    border-bottom: 1px solid #DFDFDF;
-    border-top: 1px solid #DFDFDF;
-    margin-bottom: 5px;
-    padding-bottom: 8px;
-
-    & [class*='withStats__topWrapper']
-      left: 16px;
-      right: 16px;
-
-    & [class*='withStats__controls']
-      padding: 0 16px;
-
-    +media-tablet-landscape-up()
-      grid-template-columns: 120px 1fr;
-      border: 1px solid rgba(76, 78, 100, 0.12);
-      border-radius: 10px;
-      padding-bottom: 15px;
-      margin-bottom: 0;
-
-  &.vehicleWrapMain
-    box-sizing: border-box;
-    // mobile home/comparable: equal info|price columns (was 55/45).
-    grid-template-columns: 50% 50%;
-    border: 1px solid #DFDFDF;
-    margin-bottom: 5px;
-    border-radius: 10px;
-    padding-bottom: 8px;
-
-    & [class*='withStats__topWrapper']
-      left: 16px;
-      right: 16px;
-
-    & [class*='withStats__controls']
-      padding: 0 16px;
-
-    +media-tablet-landscape-up()
-      // narrow 4-up home card (~256px): the price section (rates + "Zum Angebot" button) needs
-      // ~150px or it overflows the frame, so give the price column the larger share and the info
-      // (left) column the smaller one; minmax(0,…) keeps both tracks inside the card so nothing
-      // is clipped and the info spec text wraps instead of spilling out.
-      grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
-      border: 1px solid rgba(76, 78, 100, 0.12);
-      border-radius: 10px;
-      margin-bottom: 0;
-
-  &.vehicleWrapMyVeicles
-    grid-template-areas:
-      'title title'\
-      'image image'\
-      'controls controls'\
-      'info price'\
-      'aggregation dealerWidget';
-    padding-bottom: 10px;
-    grid-template-columns: 50% 50%;
-    border-bottom: 6px solid $skyBlue;
-    +media-tablet-landscape-up()
-      border: 1px solid rgba(76, 78, 100, 0.12);
-      padding: 10px;
-      grid-gap: 0 15px;
-      grid-template-columns: 260px 1fr 169px 236px;
-      grid-template-areas:
-        'title title title dealerWidget'\
-        'image info price dealerWidget'\
-        'image info price dealerWidget'\
-        'image info price controls'\
-        'image info price controls'\
-        'aggregation aggregation aggregation buttonSell'
-
-.figure
-  position: relative
-  margin: 0
-  padding-top: 75%
-  & > :first-child
-    position: absolute
-    top: 0
-    left: 0
-    right: 0
-
-.labelWrapper
-  border: none
-.labelWrapper::after
-  content: ''
-  position absolute
-  bottom: 0
-  width: 100%
-  height: 6px
-  background-color: $mantisGreen
-
-.topVehicle:before
-  border-color: $mantisGreen
-
-.redirectClassLink
-  width: 100%;
-  color: inherit;
-  text-decoration: none;
-  display: block;
-
-.gridAreaTitle
-  grid-area: title;
-  max-width: 100%;
-
-.gridAreaSeoText
-  width: 100%;
-  overflow: hidden
-  box-sizing: border-box;
-  padding: 10px 10px 0 10px;
-  grid-area: seoText;
-
-.gridAreaImage
-  grid-area: image;
-
-// ADV-70: plug-in consumption/CO2 line — dedicated full-width row BELOW the specs table /
-// price block ("Zum Angebot") and ABOVE the equipment text, in small grey text. The
-// .vehicleWrapNewPlugin grid inserts a full-width 'consumption' row for every externalised
-// card type (search / landing / main / comparable).
-.vehicle.vehicleWrapNewPlugin
-  grid-template-areas:
-    'title title'\
-    'image image'\
-    'info price'\
-    'consumption consumption'\
-    'seoText seoText'
-
-  // SRL/search 3-column desktop: the consumption line sits in the INFO column only
-  // (starts AND ends under the spec block, not under the image and not into the price
-  // column). image + price span rows 2-3 so the "Zum Angebot" button bottom-aligns
-  // with the consumption line.
-  &.vehicleWrapSearch
-    +media-tablet-landscape-up()
-      grid-template-areas:
-        'title title price'\
-        'image info price'\
-        'image consumption price'
-      // No divider on the DESKTOP search card — the consumption sits inside the info
-      // column (button-aligned) where a top line is unwanted; keep it on mobile only.
-      & > .gridAreaConsumption
-        border-top: 0;
-        margin-top: 0;
-
-  // Favorites desktop: consumption sits in the info column between the image and the
-  // price/buttons column, button-aligned — same as the SRL card.
-  &.vehicleWrapFavorite
-    +media-tablet-landscape-up()
-      grid-template-areas:
-        'title title price'\
-        'image info price'\
-        'image consumption price'
-
-.gridAreaConsumption
-  grid-area: consumption;
-  width: 100%;
-  box-sizing: border-box;
-  // ADV-88: a divider above the externalised consumption/CO2 line on EVERY card surface
-  // it appears on (landing / main = home+CDP-comparable / search / favorite). The element
-  // only renders for new plug-in hybrids, so the line shows exactly for the task's cars;
-  // it spans the full row width where the row is full-width (mobile + main/landing), and
-  // the info-column width on the desktop search/favorite layout. Sets the line apart from
-  // the spec/price/"Zum Angebot" block above it.
-  border-top: 1px solid rgba(76, 78, 100, 0.12);
-  // a few px of space ABOVE the divider so the line doesn't hug the price/"Zum Angebot" block.
-  margin-top: 6px;
-  padding: 6px 10px 2px 10px;
-  font-size: 9px;
-  line-height: 1.4;
-  color: rgba(76, 78, 100, 0.87);
-  word-break: break-word;
-
-  span
-    font-size: 9px !important;
-    line-height: 1.4 !important;
-
-.wrapAlternativeData
-  display flex
-  font-size: 12px;
-  justify-content: space-between;
-  margin-top: 5px;
-
-  & > div
-    display flex
-    align-items: center;
-    gap: 4px;
-
-    &:first-of-type
-      color: $skyBlue;
-      line-height: 1;
-
-.isFirstReferenceCar
-  border: 1px solid $skyBlue !important;
-  background-color: #005CCB0D;
-  justify-content: space-between;
-  margin-top: 5px;
-
-  & > div
-    display flex
-    align-items: center
-
-    &:first-of-type
+@import '../legacy-theme/mixins.styl';
+@import '../legacy-theme/theme.styl';
+
+.vehicle
+  position: relative
+  background-color: #fff;
+  display: grid;
+
+  +media-tablet-landscape-up()
+    border-radius: 10px;
+    border: 1px solid rgba(76, 78, 100, 0.12)
+
+  &.disableBorder
+     border-bottom: 0;
+
+  &.vehicleWrapMain,
+  &.vehicleWrapComparable
+    grid-template-areas:
+    'title title'\
+    'image image'\
+    'info price'\
+    'seoText seoText'
+
+  &.vehicleWrapComparable
+    min-width: 230px
+    margin: 0 4px
+    border-radius 3px
+    border: 1px solid rgba(76, 78, 100, 0.12);
+    grid-template-columns: 100px 1fr;
+
+    +media-tablet-down()
+      min-width: 340px;
+
+    +media-phone-only()
+      margin: 0 auto;
+      min-width: auto;
+      max-width: 335px;
+      width: 100%;
+      grid-template-columns: 155px 1fr;
+
+  &.vehicleWrapSearch
+    grid-template-areas:
+      'title title'\
+      'image image'\
+      'info price'\
+      'seoText seoText'
+    grid-template-columns: 55% 45%;
+    border-bottom: 1px solid #DFDFDF;
+    border-top: 1px solid #DFDFDF;
+    margin-bottom: 5px;
+    padding-bottom: 8px;
+    +media-tablet-landscape-up()
+      min-height: 252px;
+      box-sizing: border-box;
+      border: 1px solid rgba(76, 78, 100, 0.12);
+      padding: 10px;
+      grid-gap: 10px 15px;
+      grid-template-columns: 260px 1fr 189px;
+      grid-template-areas:
+        'title title price'\
+        'image info price'
+
+  &.vehicleWrapFavorite
+    grid-template-areas:
+      'title title'\
+      'image image'\
+      'info price'\
+      'seoText seoText'
+    grid-template-columns: 160px 1fr;
+    border: 1px solid rgba(76, 78, 100, 0.12);
+    border-radius: 10px;
+    padding-bottom: 15px;
+    +media-tablet-landscape-up()
+      padding: 10px;
+      grid-gap: 10px 15px;
+      grid-template-columns: 260px 1fr 245px;
+      grid-template-areas:
+        'title title price'\
+        'image info price'
+
+  &.vehicleWrapRecently
+    box-sizing: border-box;
+    grid-template-columns: 160px 1fr;
+    grid-template-areas:
+      'title title'\
+      'image image'\
+      'info price'\
+      'seoText seoText'
+    border: 1px solid rgba(76, 78, 100, 0.12);
+    border-radius: 10px;
+    padding-bottom: 15px;
+
+    & [class*='withStats__topWrapper']
+      left: 16px;
+      right: 16px;
+
+    & [class*='withStats__controls']
+      padding: 0 16px;
+
+    +media-tablet-up()
+      max-width: 98%;
+    +media-tablet-landscape-up()
+      max-width: 346px;
+
+  &.vehicleWrapLanding
+    box-sizing: border-box;
+    grid-template-areas:
+      'title title'\
+      'image image'\
+      'info price'\
+      'seoText seoText'
+    grid-template-columns: 55% 45%;
+    border-bottom: 1px solid #DFDFDF;
+    border-top: 1px solid #DFDFDF;
+    margin-bottom: 5px;
+    padding-bottom: 8px;
+
+    & [class*='withStats__topWrapper']
+      left: 16px;
+      right: 16px;
+
+    & [class*='withStats__controls']
+      padding: 0 16px;
+
+    +media-tablet-landscape-up()
+      grid-template-columns: 120px 1fr;
+      border: 1px solid rgba(76, 78, 100, 0.12);
+      border-radius: 10px;
+      padding-bottom: 15px;
+      margin-bottom: 0;
+
+  &.vehicleWrapMain
+    box-sizing: border-box;
+    // mobile home/comparable: equal info|price columns (was 55/45).
+    grid-template-columns: 50% 50%;
+    border: 1px solid #DFDFDF;
+    margin-bottom: 5px;
+    border-radius: 10px;
+    padding-bottom: 8px;
+
+    & [class*='withStats__topWrapper']
+      left: 16px;
+      right: 16px;
+
+    & [class*='withStats__controls']
+      padding: 0 16px;
+
+    +media-tablet-landscape-up()
+      // narrow 4-up home card (~256px): the price section (rates + "Zum Angebot" button) needs
+      // ~150px or it overflows the frame, so give the price column the larger share and the info
+      // (left) column the smaller one; minmax(0,…) keeps both tracks inside the card so nothing
+      // is clipped and the info spec text wraps instead of spilling out.
+      grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
+      border: 1px solid rgba(76, 78, 100, 0.12);
+      border-radius: 10px;
+      margin-bottom: 0;
+
+  &.vehicleWrapMyVeicles
+    grid-template-areas:
+      'title title'\
+      'image image'\
+      'controls controls'\
+      'info price'\
+      'aggregation dealerWidget';
+    padding-bottom: 10px;
+    grid-template-columns: 50% 50%;
+    border-bottom: 6px solid $skyBlue;
+    +media-tablet-landscape-up()
+      border: 1px solid rgba(76, 78, 100, 0.12);
+      padding: 10px;
+      grid-gap: 0 15px;
+      grid-template-columns: 260px 1fr 169px 236px;
+      grid-template-areas:
+        'title title title dealerWidget'\
+        'image info price dealerWidget'\
+        'image info price dealerWidget'\
+        'image info price controls'\
+        'image info price controls'\
+        'aggregation aggregation aggregation buttonSell'
+
+.figure
+  position: relative
+  margin: 0
+  padding-top: 75%
+  & > :first-child
+    position: absolute
+    top: 0
+    left: 0
+    right: 0
+
+.labelWrapper
+  border: none
+.labelWrapper::after
+  content: ''
+  position absolute
+  bottom: 0
+  width: 100%
+  height: 6px
+  background-color: $mantisGreen
+
+.topVehicle:before
+  border-color: $mantisGreen
+
+.redirectClassLink
+  width: 100%;
+  color: inherit;
+  text-decoration: none;
+  display: block;
+
+.gridAreaTitle
+  grid-area: title;
+  max-width: 100%;
+
+.gridAreaSeoText
+  width: 100%;
+  overflow: hidden
+  box-sizing: border-box;
+  padding: 10px 10px 0 10px;
+  grid-area: seoText;
+
+.gridAreaImage
+  grid-area: image;
+
+// ADV-70: plug-in consumption/CO2 line — dedicated full-width row BELOW the specs table /
+// price block ("Zum Angebot") and ABOVE the equipment text, in small grey text. The
+// .vehicleWrapNewPlugin grid inserts a full-width 'consumption' row for every externalised
+// card type (search / landing / main / comparable).
+.vehicle.vehicleWrapNewPlugin
+  grid-template-areas:
+    'title title'\
+    'image image'\
+    'info price'\
+    'consumption consumption'\
+    'seoText seoText'
+
+  // SRL/search 3-column desktop: the consumption line sits in the INFO column only
+  // (starts AND ends under the spec block, not under the image and not into the price
+  // column). image + price span rows 2-3 so the "Zum Angebot" button bottom-aligns
+  // with the consumption line.
+  &.vehicleWrapSearch
+    +media-tablet-landscape-up()
+      grid-template-areas:
+        'title title price'\
+        'image info price'\
+        'image consumption price'
+      // No divider on the DESKTOP search card — the consumption sits inside the info
+      // column (button-aligned) where a top line is unwanted; keep it on mobile only.
+      & > .gridAreaConsumption
+        border-top: 0;
+        margin-top: 0;
+
+  // Favorites desktop: consumption sits in the info column between the image and the
+  // price/buttons column, button-aligned — same as the SRL card.
+  &.vehicleWrapFavorite
+    +media-tablet-landscape-up()
+      grid-template-areas:
+        'title title price'\
+        'image info price'\
+        'image consumption price'
+
+.gridAreaConsumption
+  grid-area: consumption;
+  width: 100%;
+  box-sizing: border-box;
+  // ADV-88: a divider above the externalised consumption/CO2 line on EVERY card surface
+  // it appears on (landing / main = home+CDP-comparable / search / favorite). The element
+  // only renders for new plug-in hybrids, so the line shows exactly for the task's cars;
+  // it spans the full row width where the row is full-width (mobile + main/landing), and
+  // the info-column width on the desktop search/favorite layout. Sets the line apart from
+  // the spec/price/"Zum Angebot" block above it.
+  border-top: 1px solid rgba(76, 78, 100, 0.12);
+  // a few px of space ABOVE the divider so the line doesn't hug the price/"Zum Angebot" block.
+  margin-top: 6px;
+  padding: 6px 10px 2px 10px;
+  font-size: 9px;
+  line-height: 1.4;
+  color: rgba(76, 78, 100, 0.87);
+  word-break: break-word;
+
+  span
+    font-size: 9px !important;
+    line-height: 1.4 !important;
+
+.wrapAlternativeData
+  display flex
+  font-size: 12px;
+  justify-content: space-between;
+  margin-top: 5px;
+
+  & > div
+    display flex
+    align-items: center;
+    gap: 4px;
+
+    &:first-of-type
+      color: $skyBlue;
+      line-height: 1;
+
+.isFirstReferenceCar
+  border: 1px solid $skyBlue !important;
+  background-color: #005CCB0D;
+  justify-content: space-between;
+  margin-top: 5px;
+
+  & > div
+    display flex
+    align-items: center
+
+    &:first-of-type
       color: $skyBlue;