@renaissancerentals/renaissance-component 12.4.24 → 13.0.3

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

@@ -1,17 +1,17 @@
-@import 'src/assets/variables';
-
-$floorplan-background-color: $tertiary-color !default;
-$floorplan-featured-color: $primary-color !default;
-$floorplan-hover-color: $primary-background-color !default;
+:root {
+    --floorplan-background-color: var(--tertiary-color);
+    --floorplan-featured-color: var(--primary-color);
+    --floorplan-hover-color: var(--primary-background-color);
+}
 
 .section-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;
@@ -26,7 +26,7 @@ $floorplan-hover-color: $primary-background-color !default;
     margin: 3vw;
     width: 94vw;
 
-    @media (min-width: $large-size) {
+    @media (min-width: 62rem) {
       margin: 1rem 0;
       width: 100%;
       break-inside: avoid-column;
@@ -54,7 +54,7 @@ $floorplan-hover-color: $primary-background-color !default;
     }
 
     .floorplan-card--featured, h5 {
-      color: $floorplan-featured-color;
+      color: var(--floorplan-featured-color);
       margin: .3rem 0;
       text-transform: capitalize;
       font-weight: 400;
@@ -72,19 +72,19 @@ $floorplan-hover-color: $primary-background-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;
   }
 }

package/lib/{unit/section/assets/UnitsHeader.scss → floorplan/section/assets/FloorplansHeader.css}

@@ -1,9 +1,10 @@
-@import "src/assets/variables";
+:root {
+    --search-unit-header-background-color: var(--secondary-nav-background-color);
+    --search-unit-header-dropdown-background-color: var(--primary-background-color);
+}
 
-$search-unit-header-background-color: $secondary-nav-background-color !default;
-$search-unit-header-dropdown-background-color: $primary-background-color !default;
 .units-header {
-  background-color: $search-unit-header-background-color;
+  background-color: var(--search-unit-header-background-color);
   padding: 1rem;
 
   .pills {
@@ -51,15 +52,15 @@ $search-unit-header-dropdown-background-color: $primary-background-color !defaul
 
       }
       .muncher-button:hover{
-        background-color: $tertiary-background-color;
+        background-color: var(--tertiary-background-color);
       }
     }
     .muncher-dropdown--content{
-      background-color: $search-unit-header-dropdown-background-color;
+      background-color: var(--search-unit-header-dropdown-background-color);
     }
     .price-dropdown {
       width: 10rem;
-      @media (min-width: $large-size) {
+      @media (min-width: 62rem) {
         width: auto;
       }
       .price-dropdown-content{

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

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

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

@@ -1,12 +1,10 @@
-@import 'src/assets/variables';
-
 .hero-badge--stats {
   position: absolute;
   left: 50%;
   transform: translate(-50%, -50%);
 
   .muncher-badge {
-    color: $primary-background-color;
+    color: var(--primary-background-color);
     flex-wrap: nowrap;
     break-inside: avoid;
     align-content: center;
@@ -15,7 +13,7 @@
     font-size: .7rem;
     margin: 0;
     padding: .2rem;
-    @media (min-width: $large-size) {
+    @media (min-width: 62rem) {
       font-size: 1rem;
       width: auto;
     }
@@ -33,7 +31,7 @@
       flex-wrap: wrap;
       justify-content: center;
       align-items: center;
-      @media (min-width: $large-size) {
+      @media (min-width: 62rem) {
         padding: .25rem;
       }
 
@@ -49,10 +47,10 @@
     }
 
     .muncher-button--small {
-      color: $primary-background-color;
+      color: var(--primary-background-color);
       text-transform: capitalize;
       font-size: .7rem;
-      font-family: $serif-font;
+      font-family: var(--serif-font);
 
       img {
         margin-right: .4rem;

package/lib/footer/Footer.d.ts

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

package/lib/footer/assets/{Footer.scss → Footer.css}

@@ -1,24 +1,25 @@
-@import "src/assets/variables";
+:root {
+    --footer-font: 'Merriweather Sans', sans-serif;
+    --footer-italic-font: 'Merriweather', serif;
+    --footer-color: #41606d;
+    --footer-secondary-color: #4b4f54;
+    --footer-background-color: #eae9e3;
+}
 
-$footer-font: 'Merriweather Sans', sans-serif !default;
-$footer-italic-font: 'Merriweather', serif !default;
-$footer-color: #41606d !default;
-$footer-secondary-color: #4b4f54 !default;
-$footer-background-color: #eae9e3 !default;
 footer {
-  background-color: $footer-background-color;
-  font-family: $footer-font;
-  color: $footer-color;
+  background-color: var(--footer-background-color);
+  font-family: var(--footer-font);
+  color: var(--footer-color);
   text-align: center;
   padding: 1rem;
 
   i {
-    font-family: $footer-italic-font;
-    color: $footer-secondary-color;
+    font-family: var(--footer-italic-font);
+    color: var(--footer-secondary-color);
   }
 
   a {
-    color: $footer-color;
+    color: var(--footer-color);
   }
 
   .href-logo:hover {

package/lib/gallery/DriveGallery.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 import { GalleryType } from "./Gallery";
-import "./assets/DriveGallery.scss";
+import "./assets/DriveGallery.css";
 export declare const DriveGallery: React.FC<DriveGalleryProps>;
 export interface DriveGalleryProps {
     driveId: string;

package/lib/gallery/Gallery.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import './assets/Gallery.scss';
+import './assets/Gallery.css';
 import { Asset } from "../asset/data/Asset";
 export declare const Gallery: React.FC<GalleryProps>;
 export type GalleryType = "grid" | "simple";

package/lib/gallery/GalleryModal.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 import { Asset } from "../asset/data/Asset";
-import "./assets/GalleryModal.scss";
+import "./assets/GalleryModal.css";
 export declare const GalleryModal: React.FC<GalleryModalProps>;
 export interface GalleryModalProps {
     assets: Asset[];

package/lib/gallery/GridGallery.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import './assets/GridGallery.scss';
+import './assets/GridGallery.css';
 import { Asset } from "../asset/data/Asset";
 export declare const GridGallery: React.FC<GridGalleryProps>;
 export interface GridGalleryProps {

package/lib/gallery/GridGalleryCover.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
 import { Address } from "../floorplan/service/FloorplanService";
 import { WebSpecial } from "../floorplan/data/Floorplan";
-import './assets/GridGallery.scss';
+import './assets/GridGallery.css';
 import { Asset } from "../asset/data/Asset";
 export declare const GridGalleryCover: React.FC<GridGalleryCoverProps>;
 export interface GridGalleryCoverProps {

package/lib/gallery/GridGalleryMobile.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import './assets/GridGalleryMobile.scss';
+import './assets/GridGalleryMobile.css';
 import { Asset } from "../asset/data/Asset";
 import { WebSpecial } from "../floorplan/data/Floorplan";
 import { TourType } from "./GridGalleryCover";

package/lib/gallery/GridGallerySkeleton.d.ts

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

package/lib/gallery/HeroImageCard.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import './assets/HeroImageCard.scss';
+import './assets/HeroImageCard.css';
 export declare const HeroImageCard: React.FC<HeroImageCardProps>;
 export interface HeroImageCardProps {
     backgroundImage: string;

package/lib/gallery/ImageCard.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import './assets/ImageCard.scss';
+import './assets/ImageCard.css';
 import { Asset } from "../asset/data/Asset";
 export declare const ImageCard: React.FC<ImageCardProps>;
 export interface ImageCardProps {

package/lib/gallery/ImageCardSkeleton.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import './assets/ImageCard.scss';
+import './assets/ImageCard.css';
 export declare const ImageCardSkeleton: React.FC<ImageCardSkeletonProps>;
 export interface ImageCardSkeletonProps {
     width: number;

package/lib/gallery/assets/{DriveGallery.scss → DriveGallery.css}

@@ -1,5 +1,3 @@
-@import "src/assets/variables";
-
 .drive-gallery {
   text-align: center;
 

package/lib/gallery/assets/{Gallery.scss → Gallery.css}

@@ -1,5 +1,3 @@
-@import "src/assets/variables";
-
 .div-gallery {
   padding: 0;
   display: block;
@@ -13,17 +11,17 @@
     -webkit-column-count: 2;
     column-count: 2;
     -moz-column-count: 2;
-    //@media (min-width: $medium-size) {
-    //  -webkit-column-count: 3;
-    //  column-count: 3;
-    //  -moz-column-count: 3;
-    //}
-    @media (min-width: $large-size) {
+    /* @media (min-width: 48rem) { */
+    /* -webkit-column-count: 3; */
+    /* column-count: 3; */
+    /* -moz-column-count: 3; */
+    /* } */
+    @media (min-width: 62rem) {
       -webkit-column-count: 4;
       column-count: 4;
       -moz-column-count: 4;
     }
-    @media (min-width: $extra-large-size) {
+    @media (min-width: 75rem) {
       -webkit-column-count: 5;
       column-count: 5;
       -moz-column-count: 5;
@@ -42,7 +40,7 @@
     figure {
       margin: 0;
       text-align: center;
-      @media (min-width: $medium-size) {
+      @media (min-width: 48rem) {
         display: flex;
         flex-wrap: wrap;
         justify-content: center;
@@ -56,7 +54,7 @@
         margin: 4vw;
         object-fit: cover;
         object-position: top;
-        @media (min-width: $medium-size) {
+        @media (min-width: 48rem) {
           max-width: 20rem;
           max-height: 13rem;
           width: 30vw;
@@ -67,10 +65,10 @@
   }
 
   .muncher-modal {
-    color: $primary-background-color;
+    color: var(--primary-background-color);
     text-align: center;
     top: 3vh;
-    @media(min-width: $medium-size) {
+    @media (min-width: 48rem) {
 
     }
 
@@ -105,7 +103,7 @@
         cursor: pointer;
       }
 
-      @media(min-width: $medium-size) {
+      @media (min-width: 48rem) {
         .left:hover, .right:hover {
           opacity: .6;
         }

package/lib/gallery/assets/{GalleryModal.scss → GalleryModal.css}

@@ -1,12 +1,10 @@
-@import "src/assets/variables";
-
 .gallery-modal {
 
   .muncher-modal {
-    color: $primary-background-color;
+    color: var(--primary-background-color);
     text-align: center;
     top: 3vh;
-    @media(min-width: $medium-size) {
+    @media (min-width: 48rem) {
 
     }
 
@@ -41,7 +39,7 @@
         cursor: pointer;
       }
 
-      @media(min-width: $medium-size) {
+      @media (min-width: 48rem) {
         .left:hover, .right:hover {
           opacity: .6;
         }

package/lib/gallery/assets/{GridGallery.scss → GridGallery.css}

@@ -1,5 +1,3 @@
-@import "src/assets/variables";
-
 .grid-gallery {
   padding: 0;
   display: block;
@@ -108,15 +106,15 @@
 
   .gallery--information {
     text-align: center;
-    color: $primary-background-color;
-    background-color: $special-offer-color;
+    color: var(--primary-background-color);
+    background-color: var(--special-offer-color);
     padding: 0 1rem;
     position: absolute;
     top: 5rem;
     width: 50vw;
     left: 0;
     font-size: .8rem;
-    @media (min-width: $large-size) {
+    @media (min-width: 62rem) {
       font-size: 1.1rem;
       width: 16rem;
     }

package/lib/gallery/assets/{GridGalleryMobile.scss → GridGalleryMobile.css}

@@ -1,5 +1,3 @@
-@import "src/assets/variables";
-
 .grid-gallery--mobile {
   padding: 0;
   display: block;
@@ -43,15 +41,15 @@
 
   .gallery--information {
     text-align: center;
-    color: $primary-background-color;
-    background-color: $special-offer-color;
+    color: var(--primary-background-color);
+    background-color: var(--special-offer-color);
     padding: 0 1rem;
     position: absolute;
     top: 5rem;
     width: 50vw;
     left: 0;
     font-size: .8rem;
-    @media (min-width: $large-size) {
+    @media (min-width: 62rem) {
       font-size: 1.1rem;
       width: 16rem;
     }

package/lib/gallery/assets/{HeroImageCard.scss → HeroImageCard.css}

@@ -1,7 +1,5 @@
-@import "src/assets/variables";
-
 .hero-image-card {
-  color: $primary-background-color;
+  color: var(--primary-background-color);
   position: relative;
 
   .hero-image {

package/lib/gallery/assets/{ImageCard.scss → ImageCard.css}

@@ -1,7 +1,5 @@
-@import "src/assets/variables";
-
 .image-card {
-  color: $primary-background-color;
+  color: var(--primary-background-color);
   position: relative;
   margin: 0;
   text-align: center;

package/lib/header/InfoHeader.d.ts

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

package/lib/header/assets/InfoHeader.css

@@ -0,0 +1,29 @@
+:root {
+    --info-header-background-color: var(--tertiary-background-color);
+    --info-header-color: var(--primary-background-color);
+}
+
+.header-info {
+  text-align: center;
+  background: var(--info-header-background-color);
+  padding: .05rem;
+  font-size: 80%;
+  color: var(--info-header-color);
+  .container {
+    :first-child {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+  }
+
+  a {
+    color: var(--info-header-color);
+  }
+
+  @media (min-width: 48rem) {
+    text-align: right;
+    padding-right: 2rem;
+  }
+}

package/lib/home-page-special/HomePageSpecialCard.d.ts

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

package/lib/home-page-special/HomePageSpecialModal.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import "./assets/HomePageSpecialModal.scss";
+import "./assets/HomePageSpecialModal.css";
 import { HomePageSpecial } from "./data/HomePageSpecial";
 export declare const HomePageSpecialModal: React.FC<HomePageSpecialModalProps>;
 export interface HomePageSpecialModalProps {

package/lib/home-page-special/HomePageSpecialSection.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import "./assets/HomePageSpecialSection.scss";
+import "./assets/HomePageSpecialSection.css";
 export declare const HomePageSpecialSection: React.FC<HomePageSpecialSectionProps>;
 export interface HomePageSpecialSectionProps {
     propertyId: string;

package/lib/home-page-special/assets/{HomePageSpecialCard.scss → HomePageSpecialCard.css}

@@ -1,5 +1,3 @@
-@import "src/assets/variables";
-
 .special-card {
   width: 100%;
   box-sizing: border-box;

package/lib/home-page-special/assets/{HomePageSpecialModal.scss → HomePageSpecialModal.css}

@@ -1,5 +1,3 @@
-@import "src/assets/variables";
-
 .home-page-special-modal {
 
   .muncher-modal {
@@ -26,15 +24,15 @@
     right: -1rem;
     z-index: 1050;
 
-    // If the modal is near the top of the screen on mobile,
-    // tuck the button inside rather than letting it clip
+    /* If the modal is near the top of the screen on mobile, */
+    /* tuck the button inside rather than letting it clip */
     @media (max-height: 500px) {
       top: 0.5rem;
       right: 0.5rem;
     }
 
     .muncher-icon {
-      color: $secondary-background-color;
+      color: var(--secondary-background-color);
     }
   }
 

package/lib/home-page-special/assets/{HomePageSpecialSection.scss → HomePageSpecialSection.css}

@@ -1,5 +1,3 @@
-@import "src/assets/variables";
-
 .section-home-page-specials {
   padding: 0;
 }