@renaissancerentals/renaissance-component 12.4.24 → 13.0.3

package/lib/faq/assets/{ResidentFaqSection.scss → ResidentFaqSection.css}

@@ -1,8 +1,6 @@
-@import 'src/assets/variables';
-
 .resident-faq-section {
   .faq-cards{
-    @media (min-width: $medium-size) {
+    @media (min-width: 48rem) {
       display: flex;
       align-items: flex-start;
       justify-content: space-around;

package/lib/feature/FeatureSection.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import './assets/FeatureSection.scss';
+import './assets/FeatureSection.css';
 export declare const FeatureSection: React.FC<FeatureSectionProps>;
 export interface FeatureSectionProps {
     children: React.ReactNode;

package/lib/feature/assets/{FeatureSection.scss → FeatureSection.css}

@@ -1,14 +1,15 @@
-@import "src/assets/variables";
+:root {
+    --feature-section-background-color: var(--secondary-background-color);
+}
 
-$feature-section-background-color: $secondary-background-color !default;
 .section-feature {
-  font-family: $main-font;
-  background: $feature-section-background-color;
+  font-family: var(--main-font);
+  background: var(--feature-section-background-color);
   padding: 1.5rem;
 
   .heading {
     i, .emphasized {
-      background: $feature-section-background-color;
+      background: var(--feature-section-background-color);
       padding: 0 1rem;
     }
   }
@@ -18,7 +19,7 @@ $feature-section-background-color: $secondary-background-color !default;
   }
 }
 
-@media (min-width: $large-size) {
+@media (min-width: 62rem) {
   .section-feature {
     .section-feature--detail {
       padding-left: 1rem;

package/lib/floorplan/card/FloorplanCard.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import "./assets/FloorplanCard.scss";
+import "./assets/FloorplanCard.css";
 import { FloorplanCardData } from "../data/Floorplan";
 import { Video } from "../../asset/data/Asset";
 export declare const FloorplanCard: React.FC<FloorplanCardProps>;

package/lib/floorplan/card/FloorplanCardSkeleton.d.ts

@@ -1,3 +1,3 @@
 import React from "react";
-import "./assets/FloorplanCard.scss";
+import "./assets/FloorplanCard.css";
 export declare const FloorplanCardSkeleton: React.FC;

package/lib/floorplan/card/FloorplanCardSlider.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import "./assets/FloorplanCardSlider.scss";
+import "./assets/FloorplanCardSlider.css";
 import { FloorplanDetails } from "../data/Floorplan";
 export declare const FloorplanCardSlider: React.FC<FloorplanCardSliderProps>;
 export interface FloorplanCardSliderProps {

package/lib/floorplan/card/FloorplanPrice.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import "./assets/FloorplanPrice.scss";
+import "./assets/FloorplanPrice.css";
 export declare const FloorplanPrice: React.FC<FloorplanPriceProps>;
 export interface FloorplanPriceProps {
     unitRents: {

package/lib/floorplan/card/SimilarFloorplanCard.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 import { SimilarFloorplan } from "../data/Floorplan";
-import "./assets/SimilarFloorplanCard.scss";
+import "./assets/SimilarFloorplanCard.css";
 export declare const SimilarFloorplanCard: React.FC<SimilarFloorplanCardProps>;
 export interface SimilarFloorplanCardProps {
     similarFloorplans: SimilarFloorplan[];

package/lib/floorplan/card/TestimonialsCard.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import "./assets/TestimonialsCard.scss";
+import "./assets/TestimonialsCard.css";
 import { Testimonial } from "../data/Floorplan";
 export declare const TestimonialsCard: React.FC<TestimonialsCardProps>;
 export interface TestimonialsCardProps {

package/lib/floorplan/card/assets/{FloorplanCard.scss → FloorplanCard.css}

@@ -1,12 +1,13 @@
-@import "src/assets/variables";
+:root {
+    --floorplan-card-color: var(--primary-background-color);
+    --floorplan-card-secondary-color: var(--secondary-color);
+}
 
-$floorplan-card-color: $primary-background-color !default;
-$floorplan-card-secondary-color: $secondary-color !default;
 .floorplan-card {
-  color: $floorplan-card-color;
+  color: var(--floorplan-card-color);
 
   a {
-    color: $floorplan-card-color;
+    color: var(--floorplan-card-color);
   }
 
   a:hover {
@@ -34,17 +35,17 @@ $floorplan-card-secondary-color: $secondary-color !default;
     right: 0;
   }
 
-  //@media(min-width: $medium-size) {
-  //  width: 20rem;
-  //  height: 14rem;
-  //}
+  /* @media (min-width: 48rem) { */
+  /* width: 20rem; */
+  /* height: 14rem; */
+  /* } */
   .card--image {
     width: 100vw;
     height: 16rem;
     object-fit: cover;
   }
 
-  @media(min-width: $large-size) {
+  @media (min-width: 62rem) {
     width: 25rem;
     height: 16rem;
     .card--image {
@@ -52,7 +53,7 @@ $floorplan-card-secondary-color: $secondary-color !default;
       height: 16rem;
     }
   }
-  @media(min-width: $extra-large-size) {
+  @media (min-width: 75rem) {
     width: 33rem;
     height: 18rem;
     .card--image {
@@ -123,7 +124,7 @@ $floorplan-card-secondary-color: $secondary-color !default;
   .content--special {
     text-align: center;
     width: 45%;
-    background-color: $special-offer-color;
+    background-color: var(--special-offer-color);
     padding: 0 1rem;
   }
 
@@ -146,13 +147,13 @@ $floorplan-card-secondary-color: $secondary-color !default;
 
     .truncate {
       text-overflow: ellipsis;
-      //@media(min-width: $medium-size) {
-      //  width: 10rem;
-      //}
-      @media(min-width: $large-size) {
+      /* @media (min-width: 48rem) { */
+      /* width: 10rem; */
+      /* } */
+      @media (min-width: 62rem) {
         width: 15rem;
       }
-      @media(min-width: $extra-large-size) {
+      @media (min-width: 75rem) {
         width: 22rem;
       }
       width: 55vw;
@@ -181,7 +182,7 @@ $floorplan-card-secondary-color: $secondary-color !default;
   .featured {
     h3 {
       text-transform: capitalize;
-      font-family: $serif-font;
+      font-family: var(--serif-font);
       font-weight: normal;
       font-size: 1rem;
       margin: 0;
@@ -194,21 +195,21 @@ $floorplan-card-secondary-color: $secondary-color !default;
     }
 
     a {
-      color: $floorplan-card-secondary-color;
+      color: var(--floorplan-card-secondary-color);
       text-decoration: underline;
     }
 
-    color: $floorplan-card-secondary-color;
+    color: var(--floorplan-card-secondary-color);
     background-color: rgba(213, 199, 181, .7);
   }
 }
 
 .floorplan-card--small {
-  //@media(min-width: $medium-size) {
-  //  width: 15rem;
-  //  height: 14rem;
-  //}
-  @media(min-width: $large-size) {
+  /* @media (min-width: 48rem) { */
+  /* width: 15rem; */
+  /* height: 14rem; */
+  /* } */
+  @media (min-width: 62rem) {
     width: 20rem;
     height: 16rem;
     .card--image {
@@ -216,7 +217,7 @@ $floorplan-card-secondary-color: $secondary-color !default;
       height: 16rem;
     }
   }
-  @media(min-width: $extra-large-size) {
+  @media (min-width: 75rem) {
     width: 28rem;
     height: 18rem;
     .card--image {
@@ -227,13 +228,13 @@ $floorplan-card-secondary-color: $secondary-color !default;
 
   .floorplan-card-footer {
     .left {
-      //@media(min-width: $medium-size) {
-      //  max-width: 8rem;
-      //}
-      @media(min-width: $large-size) {
+      /* @media (min-width: 48rem) { */
+      /* max-width: 8rem; */
+      /* } */
+      @media (min-width: 62rem) {
         max-width: 12rem;
       }
-      @media(min-width: $extra-large-size) {
+      @media (min-width: 75rem) {
         max-width: 16rem;
       }
 
@@ -245,11 +246,11 @@ $floorplan-card-secondary-color: $secondary-color !default;
 
   width: 100vw;
 
-  @media(min-width: $large-size) {
+  @media (min-width: 62rem) {
     width: 25rem;
 
   }
-  @media(min-width: $extra-large-size) {
+  @media (min-width: 75rem) {
     width: 33rem;
 
   }
@@ -261,10 +262,10 @@ $floorplan-card-secondary-color: $secondary-color !default;
 
 .floorplan-card-slider--small {
 
-  @media(min-width: $large-size) {
+  @media (min-width: 62rem) {
     width: 20rem;
   }
-  @media(min-width: $extra-large-size) {
+  @media (min-width: 75rem) {
     width: 28rem;
   }
 }

package/lib/floorplan/card/assets/{FloorplanCardSlider.scss → FloorplanCardSlider.css}

@@ -1,14 +1,12 @@
-@import "src/assets/variables";
-
 .floorplan-card--slider {
 
   width: 100vw;
 
-  @media(min-width: $large-size) {
+  @media (min-width: 62rem) {
     width: 25rem;
 
   }
-  @media(min-width: $extra-large-size) {
+  @media (min-width: 75rem) {
     width: 33rem;
 
   }
@@ -20,10 +18,10 @@
 
 .floorplan-card-slider--small {
 
-  @media(min-width: $large-size) {
+  @media (min-width: 62rem) {
     width: 20rem;
   }
-  @media(min-width: $extra-large-size) {
+  @media (min-width: 75rem) {
     width: 28rem;
   }
 }

package/lib/floorplan/card/assets/{FloorplanFaqsCard.scss → FloorplanFaqsCard.css}

@@ -1,5 +1,3 @@
-@import 'src/assets/variables';
-
 .floorplan-faqs-card {
   section {
     padding: 0;
@@ -15,7 +13,7 @@
       span {
         font-size: 1rem;
         text-transform: none;
-        color: $primary-color;
+        color: var(--primary-color);
       }
     }
   }

package/lib/floorplan/card/assets/FloorplanPrice.css

@@ -0,0 +1,35 @@
+:root {
+    --floorplan-price-color: var(--primary-background-color);
+    --floorplan-price-color-inverted: var(--primary-color);
+    --floorplan-price-special-color: var(--special-offer-color);
+}
+
+.floorplan-price {
+  .strike-through {
+    text-decoration: line-through;
+    text-decoration-thickness: .25rem;
+    color: var(--floorplan-price-special-color);
+  }
+
+  .rent {
+    color: var(--floorplan-price-color);
+  }
+
+  .floorplan-special-price{
+    color: var(--floorplan-price-color);
+  }
+  .special {
+    padding-left: 1rem;
+    -webkit-text-stroke: .2rem var(--floorplan-price-special-color);
+    paint-order: stroke fill;
+    font-family: var(--serif-font);
+    font-weight: bold;
+    font-style: italic;
+  }
+}
+
+.floorplan-price-inverted{
+  .rent {
+    color: var(--floorplan-price-color-inverted);
+  }
+}

package/lib/floorplan/card/assets/{SimilarFloorplanCard.scss → SimilarFloorplanCard.css}

@@ -1,5 +1,3 @@
-@import 'src/assets/variables';
-
 .similar-floorplans-card {
   .card-body {
     padding: 0;
@@ -21,7 +19,7 @@
 
     .similar-floorplan-card {
       width: 100vw;
-      @media (min-width: $large-size) {
+      @media (min-width: 62rem) {
         width: 100%;
       }
 
@@ -41,7 +39,7 @@
 
         h3 {
           font-size: 1.3rem;
-          font-family: $sans-serif-font;
+          font-family: var(--sans-serif-font);
           letter-spacing: .04rem;
           line-height: 2rem;
           font-weight: 400;

package/lib/floorplan/card/assets/{TestimonialsCard.scss → TestimonialsCard.css}

@@ -1,5 +1,3 @@
-@import 'src/assets/variables';
-
 .testimonials-card {
 
   .muncher-button--navigate {
@@ -17,7 +15,7 @@
       margin: 2rem;
       font-size: 1.6rem;
       font-style: italic;
-      font-family: $serif-font;
+      font-family: var(--serif-font);
       letter-spacing: .04rem;
       line-height: 2rem;
       font-weight: 400;
@@ -34,7 +32,7 @@
 
     i {
       font-size: 1.2rem;
-      font-family: $serif-font;
+      font-family: var(--serif-font);
       letter-spacing: .04rem;
       line-height: 2rem;
       text-align: center;

package/lib/floorplan/filter/FloorplanDropDown.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import "./assets/FloorplanDropDown.scss";
+import "./assets/FloorplanDropDown.css";
 export declare const DropDownFilter: React.FC<UnitDropDownProps>;
 export interface UnitDropDownProps {
     label: string;

package/lib/floorplan/filter/assets/{FloorplanDropDown.scss → FloorplanDropDown.css}

@@ -1,5 +1,3 @@
-@import "src/assets/variables";
-
 .unit-dropdown{
   margin: .3rem;
 

package/lib/floorplan/section/FloorplanHero.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import "./assets/FloorplanHero.scss";
+import "./assets/FloorplanHero.css";
 import { Floorplan, WebSpecial } from "../data/Floorplan";
 export declare const FloorplanHero: React.FC<FloorplanProps>;
 export interface FloorplanProps {

package/lib/floorplan/section/FloorplanSection.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import "./assets/FloorplanSection.scss";
+import "./assets/FloorplanSection.css";
 export declare const FloorplanSection: React.FC<FloorplanSectionProps>;
 export interface FloorplanSectionProps {
     contactClickHandler: () => void;

package/lib/floorplan/section/FloorplanSectionSkeleton.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import "./assets/FloorplansSection.scss";
+import "./assets/FloorplansSection.css";
 export declare const FloorplanSectionSkeleton: React.FC<FloorplanSectionSkeletonProps>;
 export interface FloorplanSectionSkeletonProps {
     isCondensed?: boolean;

package/lib/floorplan/section/FloorplansHeader.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
-import "./assets/FloorplansHeader.scss";
-import "../filter/assets/FloorplanDropDown.scss";
+import "./assets/FloorplansHeader.css";
+import "../filter/assets/FloorplanDropDown.css";
 import { FloorplanFilters } from "../data/FloorplanFilters";
 import { FloorplanCardData } from "../data/Floorplan";
 import { DefaultFloorplanFilters } from "./FloorplansSection";

package/lib/floorplan/section/FloorplansHeaderSekeleton.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
-import "./assets/FloorplansHeader.scss";
-import "../filter/assets/FloorplanDropDown.scss";
+import "./assets/FloorplansHeader.css";
+import "../filter/assets/FloorplanDropDown.css";
 export declare const FloorplansHeaderSkeleton: React.FC<FloorplansHeaderSkeletonProps>;
 export interface FloorplansHeaderSkeletonProps {
     isCondensed?: boolean;

package/lib/floorplan/section/FloorplansSection.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 import { FloorplanCardData, FloorplanStyle } from "../data/Floorplan";
-import "./assets/FloorplansSection.scss";
+import "./assets/FloorplansSection.css";
 export declare const FloorplansSection: React.FC<FloorplansSectionProps>;
 export interface FloorplansSectionProps extends DefaultFloorplanFilters {
     floorplans: FloorplanCardData[];

package/lib/floorplan/section/HeroBadgeStats.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import "./assets/HeroBadgeStats.scss";
+import "./assets/HeroBadgeStats.css";
 import { TourType } from "../../gallery/GridGalleryCover";
 export declare const HeroBadgeStats: React.FC<HeroBadgeStatsProps>;
 export interface HeroBadgeStatsProps {

package/lib/floorplan/section/assets/BadgeStats.css

@@ -0,0 +1,3 @@
+.hero-badge--stats {
+
+}

package/lib/floorplan/section/assets/{FloorplanHero.scss → FloorplanHero.css}

@@ -1,9 +1,10 @@
-@import 'src/assets/variables';
-$floorplan-hero-featured-color: $secondary-color !default;
+:root {
+    --floorplan-hero-featured-color: var(--secondary-color);
+}
 
 .section-floorplan--hero {
   padding: 0;
-  background: $primary-background-color;
+  background: var(--primary-background-color);
   width: 100vw;
   position: relative;
 
@@ -15,7 +16,7 @@ $floorplan-hero-featured-color: $secondary-color !default;
     position: relative;
     width: 100vw;
     height: 40vh;
-    @media (min-width: $large-size) {
+    @media (min-width: 62rem) {
       height: 40vw;
     }
 
@@ -23,7 +24,7 @@ $floorplan-hero-featured-color: $secondary-color !default;
       iframe {
         width: 100%;
         height: 40vh;
-        @media (min-width: $large-size) {
+        @media (min-width: 62rem) {
           height: 40vw;
 
         }
@@ -35,14 +36,14 @@ $floorplan-hero-featured-color: $secondary-color !default;
         iframe {
           width: 100%;
           height: 35vh;
-          @media (min-width: $large-size) {
+          @media (min-width: 62rem) {
             height: 40vw;
           }
         }
       }
 
       .two-video-layout {
-        @media (min-width: $large-size) {
+        @media (min-width: 62rem) {
           display: flex;
           align-content: flex-start;
           justify-content: space-evenly;
@@ -52,7 +53,7 @@ $floorplan-hero-featured-color: $secondary-color !default;
           width: 40%;
           height: 35vh;
           margin: 1rem;
-          @media (min-width: $large-size) {
+          @media (min-width: 62rem) {
             height: 35vw;
           }
         }
@@ -66,24 +67,24 @@ $floorplan-hero-featured-color: $secondary-color !default;
       bottom: -2rem;
 
       .muncher-badge {
-        color: $primary-background-color;
+        color: var(--primary-background-color);
         flex-wrap: nowrap;
         break-inside: avoid;
         align-content: center;
         width: 60vw;
         font-size: .7rem;
-        @media (min-width: $large-size) {
+        @media (min-width: 62rem) {
           font-size: 1rem;
           width: auto;
         }
 
         .muncher-button--small {
           padding: 0;
-          color: $primary-background-color;
+          color: var(--primary-background-color);
           text-transform: capitalize;
           font-size: .7rem;
-          font-family: $serif-font;
-          @media (min-width: $large-size) {
+          font-family: var(--serif-font);
+          @media (min-width: 62rem) {
             font-size: 1rem;
           }
 
@@ -99,7 +100,7 @@ $floorplan-hero-featured-color: $secondary-color !default;
 
   .floorplan--two-columns {
     padding: 2rem;
-    @media (min-width: $medium-size) {
+    @media (min-width: 48rem) {
       display: flex;
       justify-content: space-between;
       align-items: flex-start;
@@ -108,7 +109,7 @@ $floorplan-hero-featured-color: $secondary-color !default;
     .floorplan-column-left {
       h3, h4 {
         text-align: left;
-        font-family: $serif-font;
+        font-family: var(--serif-font);
         margin: .5rem 0;
       }
 
@@ -120,23 +121,23 @@ $floorplan-hero-featured-color: $secondary-color !default;
       }
 
       h4 {
-        color: $floorplan-hero-featured-color;
+        color: var(--floorplan-hero-featured-color);
         text-transform: none;
       }
 
       .floorplan--description {
-        font-family: $sans-serif-font;
-        //color: $tertiary-background-color;
+        font-family: var(--sans-serif-font);
+        /* color: var(--tertiary-background-color); */
         font-weight: 300;
       }
 
       .floorplan--featured {
-        font-family: $sans-serif-font;
+        font-family: var(--sans-serif-font);
         letter-spacing: .05rem;
         font-size: 1.1rem;
 
         .muncher-button {
-          font-family: $sans-serif-font;
+          font-family: var(--sans-serif-font);
           letter-spacing: .05rem;
           font-size: 1.1rem;
           text-transform: capitalize;