@bytebrand/fe-ui-core 4.2.227 → 4.2.228

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bytebrand/fe-ui-core",
-  "version": "4.2.227",
+  "version": "4.2.228",
   "description": "UI components for the auto.de project",
   "main": "index.ts",
   "module": "dist/common.js",

package/source/components/VehicleSmallCard/VehicleData/VehiclePrice/VehiclePrice.styl

@@ -127,4 +127,38 @@
   margin-right: 5px;
 
   +media-tablet-landscape-up()
-    margin-right: 10px;
+    margin-right: 10px;
+
+
+.landingButton
+  position: relative;
+  padding: 0px 10px;
+  background-color: transparent; 
+  border-radius: 4px;
+  color: #005ccb; 
+  border: 1px solid #666CFF80; 
+  font-size: 16px;
+  cursor: pointer;
+  overflow: hidden;
+  z-index: 0;
+
+.landingButton::before 
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 30%;
+  height: 100%;
+  background-color: #82b1ff91;
+  border-radius: 20%;
+  opacity: 0;
+  transition: width 0.7s ease-out, height 0.7s ease-out, opacity 0.7s ease-out;
+  z-index: -1;
+
+
+.landingButton:active::before 
+  width: 200%;
+  height: 200%;
+  opacity: 1;
+  transition: width 0.7s ease-out, height 0.7s ease-out, opacity 0.7s ease-out;

package/source/components/VehicleSmallCard/VehicleData/VehiclePrice/VehiclePrice.tsx

@@ -136,6 +136,7 @@ const VehiclePrice: React.FC<IVehiclePriceSectionProps> = (props: IVehiclePriceS
   const buttonClassNames = classnames(
     classButton,
     styles.buttonDetails,
+    { [styles.landingButton]: vehicleComponentName === 'landing' },
     { [styles.isAlternativeButton]: typeAlternative }
   );
 
@@ -275,7 +276,10 @@ const VehiclePrice: React.FC<IVehiclePriceSectionProps> = (props: IVehiclePriceS
         </Button>
       ) : null}
       {showOfferBtn ? (
-        <Button variant={offerBtnVariantCondition} className={buttonClassNames} onClick={onDetailsClick}>{t('vehicleProps:title.toOffer')}</Button>
+        vehicleComponentName === 'landing' ? (
+          <button className={buttonClassNames} onClick={onDetailsClick}>{t('vehicleProps:title.toOffer')}</button>
+        ) :
+          <Button variant={offerBtnVariantCondition} className={buttonClassNames} onClick={onDetailsClick}>{t('vehicleProps:title.toOffer')}</Button>
       ) : ''}
     </section>
   );