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

package/compat/VehicleSmallCard/VehicleData/VechiclePriceItem/VechiclePriceItem.styl

@@ -1,204 +1,204 @@
-@import '../../../legacy-theme/mixins.styl'
-
-.priceItem
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
-  position relative
-  flex-shrink: 0;
-  height: 46px;
-  box-sizing: border-box;
-
-  &.priceItemSearch
-    height: 44px;
-    +media-tablet-landscape-up()
-      height: 51px;
-    &.priceItemBuy
-      border-top: none;
-      border-bottom: 1px solid rgba(76, 78, 100, 0.12);
-      +media-tablet-landscape-up()
-        border: none;
-
-  &.priceItemFavorite
-    height: 44px;
-    +media-tablet-landscape-up()
-      height: 46px;
-      &.priceItemBuy
-        height: 52px;
-
-  &.priceItemRecently
-    height: 44px;
-
-    &.priceItemBuy
-      border-bottom: 1px solid rgba(76, 78, 100, 0.12);
-
-  &.priceItemComparable
-    &.priceItemBuy
-      border-bottom: 1px solid rgba(76, 78, 100, 0.12);
-    +media-tablet-landscape-up()
-      height: 38px;
-      [class*='semimedium__']
-        font-size: 16px;
-
-  &:nth-of-type(3), &:last-of-type
-    .tooltipWrap
-      &__block
-        top: auto;
-        bottom: calc(100% + 3px);
-        &::before, &::after
-          bottom: auto;
-          top: 100%;
-          transform: rotate(180deg);
-        &::after
-          transform: rotate(180deg) translateX(3px);
-
-.priceItemBuy
-  border-top: 1px solid rgba(76, 78, 100, 0.12);
-
-.priceItemCategory
-  font-size: 12px
-  color: rgba(76, 78, 100, 0.87);
-  box-sizing: border-box
-  padding 3px 0;
-  cursor pointer;
-  text-decoration none;
-  margin-right: 2px
-  flex-shrink: 0;
-  position relative;
-
-  &.priceItemCategoryComparable
-    +media-tablet-landscape-up()
-      font-size: 9px;
-
-  &.priceItemCategoryLanding,
-  &.priceItemCategoryMain
-    +media-tablet-landscape-up()
-      font-size: 10px;
-
-  & > span:hover
-    background: rgba(196, 196, 196, 0.6);
-
-  +media-tablet-landscape-up()
-    font-size: 13px
-
-.priceItemDisable
-  pointer-events: none;
-  .priceItemCategory
-    color: $grey-9;
-
-  .priceNewBlock
-    background-color $grey-9;
-
-.noPrice
-  color: $grey-9;
-  font-size: 11px;
-  padding-right: 7px;
-
-.priceItemPrice
-  margin-left: auto;
-  display flex
-  flex-shrink: 0;
-  flex-direction: column;
-  text-decoration none;
-  justify-content: center;
-  align-items: flex-end;
-  color: inherit;
-  padding-right: 5px;
-
-.oldPriceWrap
-  display: flex;
-  font-size: 10px;
-  align-items: center;
-  width: 100%;
-  justify-content: space-between;
-
-.prefixOldPrice
-  margin: 0 8px;
-  color: rgba(51, 51, 51, 0.83);
-
-.oldPrice
-  margin-left: auto;
-  & > span:last-of-type
-    font-size: 8px;
-    transform: translateY(-2px);
-    display: inline-flex;
-
-.priceMtl
-  &.priceMtlActive
-    transform: translateX(6px);
-
-// ADV-70: monthly label rendered before the rate (small, top-left of the number).
-.priceCurrentWrap
-  display: inline-flex
-  align-items: flex-start
-
-.priceMtlPrefix
-  font-size: 10px
-  line-height: 1.2
-  margin-right: 3px
-  color: rgba(76, 78, 100, 0.6)
-  align-self: flex-start
-  white-space: nowrap
-
-// ADV-88 (Marco): the monthly "mtl."/"mth." label sits INLINE to the LEFT of the rate (top-
-// aligned), not stacked above. NOTE: on the narrowest 4-up landing/main card (~256px) the
-// inline label can graze the card edge at full font; the wide comparable/CDP card fits with
-// room. (Marco asked to keep the rate/category fonts untouched — only the label moved.)
-.priceItemComparable
-  .priceCurrentWrap
-    flex-direction: row
-    align-items: flex-start
-  .priceMtlPrefix
-    font-size: 8px
-    line-height: 1
-    margin-right: 2px
-    align-self: flex-start
-
-// landing (/angebot): on desktop the cards are a narrow 4-up grid where the inline label would
-// overflow the price column — stack "mtl."/"mth." above the rate there (mobile stays inline above).
-.priceItemLanding
-  +media-tablet-landscape-up()
-    .priceCurrentWrap
-      flex-direction: column
-      align-items: flex-end
-    .priceMtlPrefix
-      margin-right: 0
-
-.priceNewBlock
-  flex-shrink: 0;
-  width: 18px
-  margin-left: 15px;
-  margin-right: 5px;
-  background-color $lightGreen;
-  border-radius: 2px
-  box-sizing: border-box
-  font-weight: bold;
-  height: 11px
-  line-height: 11px;
-  text-transform uppercase
-  font-size: 7px
-  letter-spacing: -0.1px;
-  text-align: center
-  color: #fff;
-
-  +media-phone-up()
-    margin-left: 10px;
-
-.priceAfterComma
-  font-size: 16px !important
-  transform: none !important;
-  position static !important;
-
-.aboPartnerIcon
-  margin-left: 5px;
-  margin-right: 5px;
-  max-width: 10px;
-
-.isAlternativeText
-  position: absolute;
-  font-size: 8px;
-  bottom: 5px;
-
-.tooltipWrapFavorites
-  transform: translateY(0px);
-  margin-left: 5px;
+@import '../../../legacy-theme/mixins.styl'
+
+.priceItem
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  position relative
+  flex-shrink: 0;
+  height: 46px;
+  box-sizing: border-box;
+
+  &.priceItemSearch
+    height: 44px;
+    +media-tablet-landscape-up()
+      height: 51px;
+    &.priceItemBuy
+      border-top: none;
+      border-bottom: 1px solid rgba(76, 78, 100, 0.12);
+      +media-tablet-landscape-up()
+        border: none;
+
+  &.priceItemFavorite
+    height: 44px;
+    +media-tablet-landscape-up()
+      height: 46px;
+      &.priceItemBuy
+        height: 52px;
+
+  &.priceItemRecently
+    height: 44px;
+
+    &.priceItemBuy
+      border-bottom: 1px solid rgba(76, 78, 100, 0.12);
+
+  &.priceItemComparable
+    &.priceItemBuy
+      border-bottom: 1px solid rgba(76, 78, 100, 0.12);
+    +media-tablet-landscape-up()
+      height: 38px;
+      [class*='semimedium__']
+        font-size: 16px;
+
+  &:nth-of-type(3), &:last-of-type
+    .tooltipWrap
+      &__block
+        top: auto;
+        bottom: calc(100% + 3px);
+        &::before, &::after
+          bottom: auto;
+          top: 100%;
+          transform: rotate(180deg);
+        &::after
+          transform: rotate(180deg) translateX(3px);
+
+.priceItemBuy
+  border-top: 1px solid rgba(76, 78, 100, 0.12);
+
+.priceItemCategory
+  font-size: 12px
+  color: rgba(76, 78, 100, 0.87);
+  box-sizing: border-box
+  padding 3px 0;
+  cursor pointer;
+  text-decoration none;
+  margin-right: 2px
+  flex-shrink: 0;
+  position relative;
+
+  &.priceItemCategoryComparable
+    +media-tablet-landscape-up()
+      font-size: 9px;
+
+  &.priceItemCategoryLanding,
+  &.priceItemCategoryMain
+    +media-tablet-landscape-up()
+      font-size: 10px;
+
+  & > span:hover
+    background: rgba(196, 196, 196, 0.6);
+
+  +media-tablet-landscape-up()
+    font-size: 13px
+
+.priceItemDisable
+  pointer-events: none;
+  .priceItemCategory
+    color: $grey-9;
+
+  .priceNewBlock
+    background-color $grey-9;
+
+.noPrice
+  color: $grey-9;
+  font-size: 11px;
+  padding-right: 7px;
+
+.priceItemPrice
+  margin-left: auto;
+  display flex
+  flex-shrink: 0;
+  flex-direction: column;
+  text-decoration none;
+  justify-content: center;
+  align-items: flex-end;
+  color: inherit;
+  padding-right: 5px;
+
+.oldPriceWrap
+  display: flex;
+  font-size: 10px;
+  align-items: center;
+  width: 100%;
+  justify-content: space-between;
+
+.prefixOldPrice
+  margin: 0 8px;
+  color: rgba(51, 51, 51, 0.83);
+
+.oldPrice
+  margin-left: auto;
+  & > span:last-of-type
+    font-size: 8px;
+    transform: translateY(-2px);
+    display: inline-flex;
+
+.priceMtl
+  &.priceMtlActive
+    transform: translateX(6px);
+
+// ADV-70: monthly label rendered before the rate (small, top-left of the number).
+.priceCurrentWrap
+  display: inline-flex
+  align-items: flex-start
+
+.priceMtlPrefix
+  font-size: 10px
+  line-height: 1.2
+  margin-right: 3px
+  color: rgba(76, 78, 100, 0.6)
+  align-self: flex-start
+  white-space: nowrap
+
+// ADV-88 (Marco): the monthly "mtl."/"mth." label sits INLINE to the LEFT of the rate (top-
+// aligned), not stacked above. NOTE: on the narrowest 4-up landing/main card (~256px) the
+// inline label can graze the card edge at full font; the wide comparable/CDP card fits with
+// room. (Marco asked to keep the rate/category fonts untouched — only the label moved.)
+.priceItemComparable
+  .priceCurrentWrap
+    flex-direction: row
+    align-items: flex-start
+  .priceMtlPrefix
+    font-size: 8px
+    line-height: 1
+    margin-right: 2px
+    align-self: flex-start
+
+// landing (/angebot): on desktop the cards are a narrow 4-up grid where the inline label would
+// overflow the price column — stack "mtl."/"mth." above the rate there (mobile stays inline above).
+.priceItemLanding
+  +media-tablet-landscape-up()
+    .priceCurrentWrap
+      flex-direction: column
+      align-items: flex-end
+    .priceMtlPrefix
+      margin-right: 0
+
+.priceNewBlock
+  flex-shrink: 0;
+  width: 18px
+  margin-left: 15px;
+  margin-right: 5px;
+  background-color $lightGreen;
+  border-radius: 2px
+  box-sizing: border-box
+  font-weight: bold;
+  height: 11px
+  line-height: 11px;
+  text-transform uppercase
+  font-size: 7px
+  letter-spacing: -0.1px;
+  text-align: center
+  color: #fff;
+
+  +media-phone-up()
+    margin-left: 10px;
+
+.priceAfterComma
+  font-size: 16px !important
+  transform: none !important;
+  position static !important;
+
+.aboPartnerIcon
+  margin-left: 5px;
+  margin-right: 5px;
+  max-width: 10px;
+
+.isAlternativeText
+  position: absolute;
+  font-size: 8px;
+  bottom: 5px;
+
+.tooltipWrapFavorites
+  transform: translateY(0px);
+  margin-left: 5px;