@renaissancerentals/renaissance-component 12.4.24 → 13.0.3

package/lib/map/MapSection.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import './assets/Map.scss';
+import './assets/Map.css';
 export declare const MapSection: React.FC<MapSectionProps>;
 export interface MapSectionProps {
     src: string;

package/lib/map/assets/{Map.scss → Map.css}

@@ -1,5 +1,3 @@
-@import "src/assets/variables";
-
 .section-map {
   padding: 0;
   margin: 0;

package/lib/property/LeaseOfficeSkeleton.d.ts

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

package/lib/property/PropertyLocation.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 import { Property } from "./data/Property";
-import "./assets/PropertyLocation.scss";
+import "./assets/PropertyLocation.css";
 export declare const PropertyLocation: React.FC<PropertyLocationProps>;
 export interface PropertyLocationProps {
     property: Property;

package/lib/property/PropertyLocationSkeleton.d.ts

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

package/lib/property/assets/{PropertyLocation.scss → PropertyLocation.css}

@@ -1,5 +1,3 @@
-@import "src/assets/variables";
-
 .section-property-location {
   .property-card {
     padding: 1rem;
@@ -23,7 +21,7 @@
 
   .property-location {
 
-    @media(min-width: $large-size) {
+    @media (min-width: 62rem) {
       display: flex;
       justify-content: space-between;
       .property-card {
@@ -37,7 +35,7 @@
           height: 20rem;
         }
       }
-      @media(min-width: $extra-large-size) {
+      @media (min-width: 75rem) {
         .property-card {
           width: 25vw;
         }
@@ -67,7 +65,7 @@
       padding: 1rem 0;
     }
 
-    @media(min-width: $large-size) {
+    @media (min-width: 62rem) {
       margin-top: 1rem;
       display: flex;
       justify-content: space-evenly;

package/lib/property/assets/{PropertyLocationSkeleton.scss → PropertyLocationSkeleton.css}

@@ -1,5 +1,3 @@
-@import "src/assets/variables";
-
 .section-property-location {
   .react-loading-skeleton {
     width: 90vw;
@@ -7,7 +5,7 @@
     margin: .5rem 0;
   }
 
-  @media(min-width: $large-size) {
+  @media (min-width: 62rem) {
     .property-location {
       .react-loading-skeleton {
         width: 20vw;
@@ -22,7 +20,7 @@
 
 
   .lease-office {
-    @media(min-width: $large-size) {
+    @media (min-width: 62rem) {
       .react-loading-skeleton {
         width: 20vw;
         margin: .5rem .5rem;

package/lib/review/ReviewSection.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 import { PropertyDetails } from "../property/data/Property";
-import "./assets/ReviewSection.scss";
+import "./assets/ReviewSection.css";
 export declare const ReviewSection: React.FC<ReviewSectionProps>;
 export interface ReviewSectionProps {
     property: PropertyDetails;

package/lib/review/assets/{ReviewSection.scss → ReviewSection.css}

@@ -1,12 +1,10 @@
-@import "src/assets/variables";
-
 .section-review {
   .review-content {
     background-repeat: no-repeat;
     background-position: center;
     background-size: cover;
     width: 100vw;
-    @media (min-width: $large-size) {
+    @media (min-width: 62rem) {
       width: inherit;
     }
 
@@ -24,12 +22,12 @@
       color: white;
       font-weight: 400;
       text-align: center;
-      font-family: $serif-font;
+      font-family: var(--serif-font);
 
     }
 
     .testimonials {
-      @media (min-width: $large-size) {
+      @media (min-width: 62rem) {
         margin-top: 3rem;
         margin-left: 3rem;
         margin-right: 3rem;
@@ -38,19 +36,19 @@
 
     .tenant {
       margin-bottom: 2rem;
-      @media (min-width: $large-size) {
+      @media (min-width: 62rem) {
         margin-bottom: 3rem;
       }
     }
   }
 
   .review-footer {
-    background: $tertiary-background-color;
+    background: var(--tertiary-background-color);
     padding: .6rem;
     text-align: center;
 
     h3 {
-      font-family: $heading-font;
+      font-family: var(--heading-font);
       text-transform: uppercase;
       color: white;
       margin: 0;
@@ -61,7 +59,7 @@
     }
   }
 
-  @media (min-width: $large-size) {
+  @media (min-width: 62rem) {
     .review-content {
       .review {
         width: 100%;

package/lib/short-term/Hostaway.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import "./assets/Hostaway.scss";
+import "./assets/Hostaway.css";
 export declare const Hostaway: React.FC<HostawayProps>;
 declare global {
     interface Window {

package/lib/short-term/ShortTermFloorplanCard.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import "./assets/ShortTermFloorplanCard.scss";
+import "./assets/ShortTermFloorplanCard.css";
 import { Video } from "../asset/data/Asset";
 import { FloorplanShortTerm } from "./data/ShortTerm";
 export declare const ShortTermFloorplanCard: React.FC<ShortTermFloorplanCardProps>;

package/lib/short-term/ShortTermFloorplanHero.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import "./assets/ShortTermFloorplanHero.scss";
+import "./assets/ShortTermFloorplanHero.css";
 import { FloorplanShortTerm } from "./data/ShortTerm";
 import { WebSpecial } from "../floorplan/data/Floorplan";
 export declare const ShortTermFloorplanHero: React.FC<ShortTermFloorplanHeroProps>;

package/lib/short-term/ShortTermFloorplanSection.d.ts

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

package/lib/short-term/ShortTermFloorplansHeader.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
-import "./assets/ShortTermFloorplansHeader.scss";
-import "../floorplan/filter/assets/FloorplanDropDown.scss";
+import "./assets/ShortTermFloorplansHeader.css";
+import "../floorplan/filter/assets/FloorplanDropDown.css";
 import { DefaultShortTermFilters } from "./ShortTermFloorplansSection";
 import { ShortTermFilters } from "./data/ShortTermFilters";
 import { FloorplanShortTerm } from "./data/ShortTerm";

package/lib/short-term/ShortTermFloorplansSection.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import "./assets/ShortTermFloorplansSection.scss";
+import "./assets/ShortTermFloorplansSection.css";
 import { FloorplanShortTerm, ShortTermStyle } from "./data/ShortTerm";
 export declare const ShortTermFloorplansSection: React.FC<ShortTermFloorplansSectionProps>;
 export interface ShortTermFloorplansSectionProps extends DefaultShortTermFilters {

package/lib/short-term/ShortTermPricingCard.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import "./assets/ShortTermPricingCard.scss";
+import "./assets/ShortTermPricingCard.css";
 import { FloorplanShortTerm } from "./data/ShortTerm";
 export declare const ShortTermPricingCard: React.FC<ShortTermPricingCardProps>;
 export interface ShortTermPricingCardProps {

package/lib/short-term/assets/{Hostaway.scss → Hostaway.css}

@@ -1,12 +1,13 @@
-@import "src/assets/variables";
+:root {
+    --hostaway-section-background-color: var(--secondary-background-color);
+}
 
-$hostaway-section-background-color: $secondary-background-color !default;
 .section-hostaway {
   .two-column-layout {
     font-family: Libre Baskerville, serif;
-    background-color: $hostaway-section-background-color;
-    //padding: 2rem;
-    @media(min-width: $medium-size) {
+    background-color: var(--hostaway-section-background-color);
+    /* padding: 2rem; */
+    @media (min-width: 48rem) {
       display: flex;
     }
 
@@ -26,7 +27,7 @@ $hostaway-section-background-color: $secondary-background-color !default;
       text-transform: none;
       font-style: italic;
       letter-spacing: .01rem;
-      color: $primary-color;
+      color: var(--primary-color);
       text-align: left;
     }
 
@@ -51,7 +52,7 @@ $hostaway-section-background-color: $secondary-background-color !default;
       font-size: .9rem;
       letter-spacing: .05rem;
       padding: .5rem 1rem;
-      @media(min-width: $medium-size) {
+      @media (min-width: 48rem) {
         margin: 2rem 0;
       }
     }
@@ -64,7 +65,7 @@ $hostaway-section-background-color: $secondary-background-color !default;
 
       }
 
-      @media(min-width: $medium-size) {
+      @media (min-width: 48rem) {
         padding-right: 2rem;
 
         &::after {
@@ -74,7 +75,7 @@ $hostaway-section-background-color: $secondary-background-color !default;
           top: 0;
           height: 100%;
           width: 1px;
-          background-color: #ccc; // adjust colour to taste
+          background-color: #ccc; /* adjust colour to taste */
         }
       }
     }
@@ -84,7 +85,7 @@ $hostaway-section-background-color: $secondary-background-color !default;
         font-size: .7rem;
       }
 
-      @media(min-width: $medium-size) {
+      @media (min-width: 48rem) {
         padding-left: 2rem;
       }
     }
@@ -119,23 +120,23 @@ $hostaway-section-background-color: $secondary-background-color !default;
       }
     }
 
-    // SVG icons
+    /* SVG icons */
     .hsbw-field-icon svg {
       width: 14px;
       height: 14px;
     }
 
-    // Labels (Check-in, Check-out, Guests)
+    /* Labels (Check-in, Check-out, Guests) */
     .hsbw-label {
       font-size: 0.7rem;
     }
 
-    // Values (dates, guest count)
+    /* Values (dates, guest count) */
     .hsbw-value {
       font-size: 0.8rem;
     }
 
-    // Override widget's internal grid to prevent button overflow
+    /* Override widget's internal grid to prevent button overflow */
     .hsbw-grid {
       @media screen and (min-width: 900px) and (max-width: 1430px) {
         display: grid;
@@ -179,7 +180,7 @@ $hostaway-section-background-color: $secondary-background-color !default;
     font-style: normal;
     font-size: .7rem;
     text-align: center;
-    @media (min-width: $large-size) {
+    @media (min-width: 62rem) {
       font-size: .8rem;
     }
   }

package/lib/short-term/assets/{ShortTermFloorplanCard.scss → ShortTermFloorplanCard.css}

@@ -1,7 +1,8 @@
-@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;
 .short-term-floorplan-card {
   position: relative;
   height: 16rem;
@@ -11,13 +12,13 @@ $floorplan-card-secondary-color: $secondary-color !default;
     height: 16rem;
     object-fit: cover;
   }
-  @media(min-width: $large-size) {
+  @media (min-width: 62rem) {
     width: 25rem;
     .card--image {
       width: 25rem;
     }
   }
-  @media(min-width: $extra-large-size) {
+  @media (min-width: 75rem) {
     width: 33rem;
     height: 18rem;
     .card--image {
@@ -28,10 +29,10 @@ $floorplan-card-secondary-color: $secondary-color !default;
 
 
 
-  color: $floorplan-card-color;
+  color: var(--floorplan-card-color);
 
   a {
-    color: $floorplan-card-color;
+    color: var(--floorplan-card-color);
   }
 
   a:hover {
@@ -119,7 +120,7 @@ $floorplan-card-secondary-color: $secondary-color !default;
     .truncate {
       text-overflow: ellipsis;
       font-size: .8rem;
-      @media(min-width: $extra-large-size) {
+      @media (min-width: 75rem) {
         font-size: .9rem;
       }
       white-space: nowrap;
@@ -140,7 +141,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;
     }
@@ -152,17 +153,17 @@ $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);
   }
 }
 
 .short-term-floorplan-card--small {
-  @media(min-width: $large-size) {
+  @media (min-width: 62rem) {
     width: 20rem;
     height: 16rem;
     .card--image {
@@ -170,7 +171,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 {
@@ -181,10 +182,10 @@ $floorplan-card-secondary-color: $secondary-color !default;
 
   .floorplan-card-footer {
     .left {
-      @media(min-width: $large-size) {
+      @media (min-width: 62rem) {
         max-width: 12rem;
       }
-      @media(min-width: $extra-large-size) {
+      @media (min-width: 75rem) {
         max-width: 16rem;
       }
     }
@@ -196,11 +197,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;
 
   }
@@ -212,10 +213,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/short-term/assets/{ShortTermFloorplanHero.scss → ShortTermFloorplanHero.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-short-term-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;

package/lib/short-term/assets/{ShortTermFloorplanSection.scss → ShortTermFloorplanSection.css}

@@ -1,18 +1,18 @@
-@import 'src/assets/variables';
-
-$floorplan-background-color: $tertiary-color !default;
-$floorplan-featured-color: $primary-color !default;
-$floorplan-hover-color: $primary-background-color !default;
-$row-background: $border-color !default;
+:root {
+    --floorplan-background-color: var(--tertiary-color);
+    --floorplan-featured-color: var(--primary-color);
+    --floorplan-hover-color: var(--primary-background-color);
+    --row-background: var(--border-color);
+}
 
 .section-short-term-floorplan {
   padding: 0 0 .5rem;
-  background: $floorplan-background-color;
+  background: var(--floorplan-background-color);
 
   .floorplan--cards {
     padding: 0;
     margin: 1rem 0;
-    @media (min-width: $large-size) {
+    @media (min-width: 62rem) {
       -webkit-column-count: 2;
       column-count: 2;
       column-gap: 1rem;
@@ -27,8 +27,8 @@ $row-background: $border-color !default;
         text-transform: capitalize;
         text-align: left;
         font-size: .9rem;
-        font-family: $sans-serif-font;
-        color: $primary-color;
+        font-family: var(--sans-serif-font);
+        color: var(--primary-color);
         font-weight: normal;
         margin: 0;
       }
@@ -40,14 +40,14 @@ $row-background: $border-color !default;
       .key {
         text-transform: uppercase;
         letter-spacing: .1em;
-        font-family: $sans-serif-font;
+        font-family: var(--sans-serif-font);
         font-size: .8rem;
         margin: 0;
         padding-right: .5rem;
       }
 
       .value {
-        font-family: $serif-font;
+        font-family: var(--serif-font);
         margin: 0;
         font-size: .8rem;
       }
@@ -60,7 +60,7 @@ $row-background: $border-color !default;
     margin: 3vw;
     width: 94vw;
 
-    @media (min-width: $large-size) {
+    @media (min-width: 62rem) {
       margin: 1rem 0;
       width: 100%;
       break-inside: avoid-column;
@@ -88,7 +88,7 @@ $row-background: $border-color !default;
     }
 
     .floorplan-card--featured, h5 {
-      color: $floorplan-featured-color;
+      color: var(--floorplan-featured-color);
       margin: .3rem 0;
       text-transform: capitalize;
       font-weight: 400;
@@ -106,19 +106,19 @@ $row-background: $border-color !default;
 
     p {
       font-size: 1.6rem;
-      font-family: $serif-font;
+      font-family: var(--serif-font);
       letter-spacing: .04rem;
       line-height: 2rem;
       font-weight: 400;
     }
 
     a {
-      color: $floorplan-hover-color;
+      color: var(--floorplan-hover-color);
     }
   }
 
   .muncher-button--tertiary {
-    color: $floorplan-hover-color;
+    color: var(--floorplan-hover-color);
     text-transform: capitalize;
   }
 }