diff --git a/components/01_Atoms/input/_input.scss b/components/01_Atoms/input/_input.scss index fec56e3..a8ed887 100644 --- a/components/01_Atoms/input/_input.scss +++ b/components/01_Atoms/input/_input.scss @@ -9,7 +9,7 @@ border: none; border-bottom: 1px solid $-grey; padding: 8px 0; - margin-bottom: $-margin-bottom; + margin-bottom: $-margin-bottom; &:focus, &:active, &:invalid{ margin-bottom: $-margin-bottom - 1px; @@ -38,7 +38,9 @@ .LP-Input__Label{ font-family: $-primary-sans-serif-font; - font-size: 16px; + font-size: 16px; + white-space: wrap; + overflow: hidden; } .LP-Input__Message{ @@ -47,7 +49,8 @@ font-size: 13px; padding: 3px; position: relative; - top: -$-margin-bottom; + top: -$-margin-bottom; + overflow: hidden; } &--error{ diff --git a/components/03_Organisms/form/_form.scss b/components/03_Organisms/form/_form.scss index fa2ba85..8b54bf0 100644 --- a/components/03_Organisms/form/_form.scss +++ b/components/03_Organisms/form/_form.scss @@ -1,134 +1,58 @@ .LP-Form{ - flex-direction: column; - align-items: center; - - &--inline{ - padding: 0 10px; - .LP-Form__Fieldset{ - .LP-Form__Composition{ - gap: 10px; - } - } - } .LP-Form__Fieldset{ - border: none; - padding: 0; - margin: 0; + @include RV-Reset; max-width: 1200px; - min-width: $-viewport-medium; - - .LP-Form__Legend{ - margin: 0; - padding: 0; - font-family: $-primary-sans-serif-font; - font-size: 21px; - } - - } - - .LP-Form__Composition{ - display: flex; - flex-direction: row; - justify-content: space-between; - gap: 30px; - - &--buttons{ - gap: 10px; - } + min-width: $-viewport-medium; - .LP-Form__Field{ - flex: 3 2 100px; - padding: 6px 0; + @media(max-width: $-viewport-medium){ + min-width: unset; + } + } - &--wider{ - flex: 5 2; - } + .LP-Form__Legend{ + margin: 0; + padding: 0; + font-family: $-primary-sans-serif-font; + font-size: 21px; + } - &--wide{ - flex: 4 2; - } + .LP-Form__Composition{ + @include RV-FlexRow__Container; + @include RV-Spacing__Inner--small(''); - &--narrow{ - flex: 2 1; + &--breakable { + @media(max-width: $-viewport-small){ + @include RV-FlexRow__Container--multiRow; } + } - &--narrower{ - flex: 1 2; - } - - &--static{ - flex: 0 0; - } + @media(max-width: $-viewport-extra-small){ + @include RV-FlexRow__Container--multiRow; } &--buttons{ justify-content: flex-end; - } - - .LP-Form__Button{ - flex-grow: 0; - padding-left: 0; - min-width: 130px; - - .LP-Link{ - display:contents; - } - } - - .LP-Form__InfoText{ - .LP-Paragraph{ - font-family: $-primary-sans-serif-font; - color: $-grey; - } + @include RV-Spacing__Inner--small; } } -} -@media(max-width: $-viewport-medium){ -.LP-Form{ - .LP-Form__Fieldset{ - min-width: unset; - } -} -} + .LP-Form__Field{ + @include RV-FlexRow__Item; + } -@media(max-width: $-viewport-small){ - .LP-Form{ - .LP-Form__Fieldset{ - .LP-Form__Composition--breakable{ - display: flex; - flex-direction: column; - justify-content: space-between; - } - } - } -} + .LP-Form__Button{ + @include RV-FlexRow__Item--fixedSize(130px); -@media(max-width: $-viewport-extra-small){ - .LP-Form :not(.LP-Form--inline){ - .LP-Form__Fieldset{ - .LP-Form__Composition{ - display: flex; - flex-direction: column; - justify-content: space-between; - - .LP-Form__Field{ - - &:not(.LP-Form__Button){ - flex: 3 1 100px; - padding: 12px 15px; - } - } - - .LP-Form__Button{ - padding: 0 15px; - } - - &--buttons{ - justify-content: flex-end; - } - } - } - } + @media(max-width: $-viewport-extra-small) { + @include RV-FlexRow__Item--fixedSize(100%); + } + } + + .LP-Form__InfoText{ + .LP-Paragraph{ + font-family: $-primary-sans-serif-font; + color: $-grey; + } + } } \ No newline at end of file diff --git a/components/03_Organisms/form/form.hbs b/components/03_Organisms/form/form.hbs index b33caac..8532708 100644 --- a/components/03_Organisms/form/form.hbs +++ b/components/03_Organisms/form/form.hbs @@ -30,8 +30,8 @@ We won't send any stalkers, promise -
- +
+ Field is required
@@ -45,7 +45,7 @@
- +
diff --git a/components/03_Organisms/imageGrid/_imageGrid.scss b/components/03_Organisms/imageGrid/_imageGrid.scss index 495a51d..329a533 100644 --- a/components/03_Organisms/imageGrid/_imageGrid.scss +++ b/components/03_Organisms/imageGrid/_imageGrid.scss @@ -1,42 +1,9 @@ .LP-ImageGrid{ + @include RV-FlexGrid(290px, 200px); + @include RV-ElementList; + @include RV-Spacing__Inner--small; - .LP-ImageGrid__List{ - list-style-type: none; - display: grid; - grid-template-columns: repeat(auto-fit, 300px); - align-content: space-around; - justify-content: center; - margin: 0px; - padding: 0px; + .LP-ImageGrid__Item { + @include RV-ContentCrop; } - - .LP-ImageGrid__Item{ - margin-top:10px; - } - - .LP-Link{ - overflow: hidden; - } - - .LP-Image { - box-shadow: 0 0 5px $-grey; - height: 200px; - width: 290px; - object-fit: cover; - } -} - -@media(max-width: $-viewport-small){ - .LP-ImageGrid{ - .LP-ImageGrid__List{ - grid-template-columns: 1fr; - - .LP-Image{ - box-shadow: 0 0 5px $-grey; - height: auto; - width: 100%; - object-fit: cover; - } - } - } -} +} \ No newline at end of file diff --git a/components/03_Organisms/imageGrid/imageGrid.hbs b/components/03_Organisms/imageGrid/imageGrid.hbs index eb8e370..81702a9 100644 --- a/components/03_Organisms/imageGrid/imageGrid.hbs +++ b/components/03_Organisms/imageGrid/imageGrid.hbs @@ -1,6 +1,6 @@
-
    +
      {{#each images}}
    • diff --git a/components/03_Organisms/linkList/_linkList.scss b/components/03_Organisms/linkList/_linkList.scss index 0cb543c..ff77826 100644 --- a/components/03_Organisms/linkList/_linkList.scss +++ b/components/03_Organisms/linkList/_linkList.scss @@ -1,89 +1,23 @@ -.LP-LinkList__List{ - list-style-type: none; - display: grid; - grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); - margin: 0; - padding: 0; +.LP-LinkList{ + @include RV-FlexGrid(300px, 3em); + @include RV-ElementList; + @include RV-Spacing__Inner--small; .LP-LinkList__Item{ - border-left: 1px solid $-light-brown; - width: calc(100% - 1px); - margin-top: 12px; - position: relative; + border-left: 1px solid $-light-brown; + width: calc(100% - 1px); + overflow: hidden; + &:hover { + background-color: $-almost-white; + } + } + + .LP-Link{ + height: 100%; + @include RV-Alignment--verticalCenter; - &--add{ - .LP-LinkList__AddTrigger{ - display: none; - &:checked{ - & ~ .LP-LinkList__AddPlaceHolder{ - visibility: hidden; - } - & ~ .LP-LinkList__Add{ - display: block; - } - } - } - - .LP-LinkList__Add{ - position: absolute; - top: 3px; - display: none; - width: 100%; - - .LP-Form__Fieldset{ - min-width:unset; - } - - .LP-Form{ - display: block; - min-width: 0px; - } - } - } - - .LP-Link{ - $-link-padding: 1em; - padding: $-link-padding 0 $-link-padding $-link-padding; - width: calc(100% - 1em); - display: block; - color: $-grey; - - - &--iconized{ - padding-top: 0; - padding-bottom: 1.1em; - - &:hover{ - background-color: #ccc !important; - } - - .LP-Text{ - padding-top: .1em; - } - } - - - &:hover{ - background-color: $-almost-white; - color: $-wine-red; - } - - .LP-Text{ - color: inherit; - } - } - } -} - -.LP-Link__Icon{ - width: 2em; - height: 2em; - fill: $-wine-red; - line-height: 5em; -} - -.LP-LinkList__Item .LP-Link__Icon{ - position: relative; - top: .7em; - margin-right: .6em; -} + >* { + @include RV-Spacing__Inner--small; + } + } +} \ No newline at end of file diff --git a/components/03_Organisms/linkList/linkList.hbs b/components/03_Organisms/linkList/linkList.hbs index dfeb108..98f2895 100644 --- a/components/03_Organisms/linkList/linkList.hbs +++ b/components/03_Organisms/linkList/linkList.hbs @@ -1,43 +1,24 @@ -
      -
      - - - -
      • -
    +
\ No newline at end of file diff --git a/components/main.scss b/components/main.scss index 73fbf16..660edea 100644 --- a/components/main.scss +++ b/components/main.scss @@ -1,3 +1,5 @@ +@import './rcss.bundled.scss'; + @font-face { font-family: Crimson; src: diff --git a/components/rcss.bundled.scss b/components/rcss.bundled.scss new file mode 100644 index 0000000..eef404a --- /dev/null +++ b/components/rcss.bundled.scss @@ -0,0 +1,562 @@ +// Padding and Margin sizes + +$-spacing-small: 10px; +$-spacing-medium: 25px; +$-spacing-large: 35px; + +.pink { + background-color: pink; +} +@mixin RV-Reset { + margin: 0; + padding: 0; + top: 0; + bottom: 0; + left: 0; + right: 0; + border: none; +} +@mixin RV-Alignment--top { + display: grid; + align-content: start; +} + +@mixin RV-Alignment--bottom { + display: grid; + align-content: end; +} + +@mixin RV-Alignment--left { + display: grid; + justify-content: start; +} + +@mixin RV-Alignment--right { + display: grid; + justify-content: end; +} + +@mixin RV-Alignment--horizontalCenter { + display: grid; + justify-content: center; +} + +@mixin RV-Alignment--verticalCenter { + display: grid; + align-content: center; +} + +@mixin RV-Alignment--center { + @include RV-Alignment--horizontalCenter; + @include RV-Alignment--verticalCenter; +} + +@mixin RV-Alignment__Container { + display: grid; + + &--top { + @include RV-Alignment--top; + } + + &--bottom { + @include RV-Alignment--bottom; + } + + &--left { + @include RV-Alignment--left; + } + + &--right { + @include RV-Alignment--right; + } + + &--horizontalCenter { + @include RV-Alignment--horizontalCenter; + } + + &--verticalCenter { + @include RV-Alignment--verticalCenter; + } + + &--center { + @include RV-Alignment--center; + } +} + +@mixin RV-Alignment { + &__Container { + @include RV-Alignment__Container; + } +} + +.RV-Alignment { + @include RV-Alignment; +} + + +@mixin RV-FlexRow__Container--column { + display: flex; + flex-direction: column; +} + +@mixin RV-FlexRow__Container--multiRow { + flex-wrap: wrap; +} + +@mixin RV-FlexRow__Container { + display: flex; + flex-direction: row; + justify-content: space-around; + + &--multiRow { + @include RV-FlexRow__Container--multiRow; + } + + &--column { + @include RV-FlexRow__Container--column; + } +} + +@mixin RV-FlexRow__Item--normal { + flex-grow: 3; + flex-shrink: 3; +} + +@mixin RV-FlexRow__Item--narrower { + flex-grow: 1; + flex-shrink: 5; +} + +@mixin RV-FlexRow__Item--narrow { + flex-grow: 2; + flex-shrink: 4; +} + +@mixin RV-FlexRow__Item--wide { + flex-grow: 4; + flex-shrink: 2; +} +@mixin RV-FlexRow__Item--wider { + flex-grow: 5; + flex-shrink: 1; +} +@mixin RV-FlexRow__Item--fixedSize($-width: 100px) { + flex-grow: 0; + flex-shrink: 0; + width: min-content; + flex-basis: $-width; +} + +@mixin RV-FlexRow__Item { + @include RV-Alignment; + + min-width: 0; + width: 100%; + + &,&--normal { + @include RV-FlexRow__Item--normal; + } + + &--narrower { + @include RV-FlexRow__Item--narrower; + } + + &--narrow { + @include RV-FlexRow__Item--narrow; + } + + &--wide { + @include RV-FlexRow__Item--wide; + } + + &--wider { + @include RV-FlexRow__Item--wider; + } + + &--fixedSize { + @include RV-FlexRow__Item--fixedSize; + } +} + +@mixin RV-FlexRow { + &__Container { + @include RV-FlexRow__Container; + } + + &__Item { + @include RV-FlexRow__Item; + } +} + +.RV-FlexRow{ + @include RV-FlexRow; +} +@mixin RV-FlexGrid__Container($-item_width: 300px, $-item_height: 300px) { + display: grid; + grid-template-columns: repeat(auto-fill, minmax($-item_width, 1fr)); + grid-template-rows: repeat(auto-fill, minmax($-item_height, 1fr)); + grid-auto-rows: minmax($-item_height, 1fr); +} + +@mixin RV-FlexGrid($-item_width: 300px, $-item_height: 300px) { + &__Container { + @include RV-FlexGrid__Container($-item_width, $-item_height); + } + + &__Item { + @include RV-Alignment; + } +} + +.RV-FlexGrid{ + @include RV-FlexGrid; +} + +@mixin RV-ContentCrop--bottom { + img { + object-position: botom; + } +} + +@mixin RV-ContentCrop--top { + img { + object-position: top; + } +} + +@mixin RV-ContentCrop--right { + img { + object-position: right; + } +} + +@mixin RV-ContentCrop--left { + img { + object-position: left; + } +} + +@mixin RV-ContentCrop--center { + img { + object-position: center; + } +} + +@mixin RV-ContentCrop{ + &,* { + overflow: hidden; + word-break: break-all; + } + + img { + width: 100%; + height: 100%; + object-fit: cover; + } + + &--left { + @include RV-ContentCrop--left; + } + + &--center { + @include RV-ContentCrop--center; + } + + &--top { + @include RV-ContentCrop--top; + } + + &--bottom { + @include RV-ContentCrop--bottom; + } + + &--center { + @include RV-ContentCrop--center; + } +} + +.RV-ContentCrop__Container { + @include RV-ContentCrop; +} +@mixin RV-Fan--horizontal($-base_height, $-base_width, $-suffix: '') { + + &__Container#{$-suffix} { + flex-direction: row; + } + + &__Container#{$-suffix} &__Surface { + min-width: $-base_width; + height: $-base_height; + } +} + +@mixin RV-Fan--vertical($-base_height, $-base_width, $-suffix: '') { + &__Container#{$-suffix} { + flex-direction: column; + width:max-content; + } + + &__Container#{$-suffix} &__Surface { + width: $-base_width; + min-height: $-base_height; + } +} + +@mixin RV-Fan--auto($-base_height, $-base_width, $-suffix: '') { + + &__Container#{$-suffix} { + flex-flow: row wrap; + } + + &__Container#{$-suffix} &__Surface { + width: calc(100% - #{$-base_width}); + min-width: $-base-width; + height: $-base_height; + } +} + +@mixin RV-Fan--fullWidth($-base_height, $-base_width, $-suffix: '') { + &__Container#{$-suffix} &__Base, &__Container#{$-suffix} &__Surface { + flex-grow: 1; + } +} + +@mixin RV-Fan ($-base_height, $-base_width) { + @include RV-Fan--vertical($-base_height, $-base_width, '--vertical'); + @include RV-Fan--horizontal($-base_height, $-base_width, '--horizontal'); + @include RV-Fan--auto($-base_height, $-base_width, '--auto'); + @include RV-Fan--fullWidth($-base_height, $-base_width, '--fullWidth'); + + &__Container { + display: flex; + } + + &__Base { + height: $-base_height; + width: $-base_width; + flex: 0 0 auto; + } + + &__Surface { + @include RV-ContentCrop; + } +} + +.RV-Fan { + @include RV-Fan(280px, 320px); +} +@mixin RV-FullWidthContent__Container { + width: 100%; +} + +@mixin RV-FullWidthContent__Item { + width: 100%; + @include RV-ContentCrop; +} + +@mixin RV-FullWidthContent { + &__Container { + @include RV-FullWidthContent__Container; + } + + &__Item { + @include RV-FullWidthContent__Item; + } +} + +.RV-FullWidthContent { + @include RV-FullWidthContent; +} +@mixin RV-BoxShadow($color) { + + position:relative; + float:left; + width:40%; + margin:2em 10px 4em; + background:#fff; + box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; + + &:before, &:after { + content:""; + position:absolute; + z-index:-2; + } + + &--simple { + box-shadow: 0 0 20px $color; + } + + &--raised { + &:after { + box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; + } + } + + &--liftedCorners { + + &:before, &:after { + bottom:15px; + left:10px; + width:50%; + height:20%; + max-width:300px; + box-shadow:0 15px 10px rgba(0, 0, 0, 0.7); + transform:rotate(-3deg); + } + + &:after{ + right:10px; + left:auto; + transform:rotate(3deg); + } + } +} + +.RV-BoxShadow { + @include RV-BoxShadow(#6b5690); +} +@mixin RV-ElementList { + &__Container { + list-style-type: none; + @include RV-Reset; + } + + &__Item { + @include RV-Reset; + } +} + +.RV-ElementList { + @include RV-ElementList; +} +@mixin RV-Spacing__Outer--small { + margin: $-spacing-small; +} + +@mixin RV-Spacing__Outer--medium { + margin: $-spacing-medium; +} + +@mixin RV-Spacing__Outer--large { + margin: $-spacing-large; +} + + +@mixin RV-Spacing__Inner--small($-container-suffix: '__Container') { + padding: $-spacing-small; + &#{$-container-suffix} { + gap: $-spacing-small; + } +} + +@mixin RV-Spacing__Inner--medium($-container-suffix: '__Container') { + padding: $-spacing-medium; + &#{$-container-suffix} { + gap: $-spacing-medium; + } +} + +@mixin RV-Spacing__Inner--large($-container-suffix: '__Container') { + padding: $-spacing-large; + &#{$-container-suffix} { + gap: $-spacing-large; + } +} + +@mixin RV-Spacing { + &__Outer{ + &--small { + @include RV-Spacing__Outer--small; + } + + &--medium { + @include RV-Spacing__Outer--medium; + } + + &--large { + @include RV-Spacing__Outer--large; + } + } + + &__Inner{ + &--small { + @include RV-Spacing__Inner--small(''); + } + + &--medium { + @include RV-Spacing__Inner--medium(''); + } + + &--large { + @include RV-Spacing__Inner--large(''); + } + } +} + +.RV-Spacing { + @include RV-Spacing; +} +.RV-Iconized { + &__Container { + position: relative; + + &--medium { + top: -.5em; + } + + &--large { + top: -1.03073em; + } + + &--huge { + top: -2.05em; + } + } + + &__Icon { + @include RV-Reset; + } + + &__Container--small &__Icon{ + width: 1em; + height: 1em; + position: relative; + top: .125em; + } + &__Container--medium &__Icon{ + width: 2em; + height: 2em; + position: relative; + top: .625em; + } + &__Container--large &__Icon{ + width: 3em; + height: 3em; + position: relative; + top: 1.15573em; + } + &__Container--huge &__Icon{ + width: 5em; + height: 5em; + position: relative; + top: 2.175em; + } +} + +@mixin RV-ImageGrid { + @include RV-ElementList; + @include RV-FlexGrid; + + &__Container { + @include RV-Spacing__Inner--medium; + } + + &__Item { + @include RV-ContentCrop; + @include RV-ContentCrop--center; + } +} + +.RV-ImageGrid { + @include RV-ImageGrid; +} diff --git a/public/icons/plus.svg b/public/icons/plus.svg new file mode 100644 index 0000000..96fb731 --- /dev/null +++ b/public/icons/plus.svg @@ -0,0 +1,8 @@ + + + + + \ No newline at end of file diff --git a/public/main.css b/public/main.css index d6ec1bc..d2c6713 100644 --- a/public/main.css +++ b/public/main.css @@ -1,3 +1,424 @@ +.pink { + background-color: pink; } + +.RV-Alignment__Container { + display: grid; } + .RV-Alignment__Container--top { + display: grid; + align-content: start; } + .RV-Alignment__Container--bottom { + display: grid; + align-content: end; } + .RV-Alignment__Container--left { + display: grid; + justify-content: start; } + .RV-Alignment__Container--right { + display: grid; + justify-content: end; } + .RV-Alignment__Container--horizontalCenter { + display: grid; + justify-content: center; } + .RV-Alignment__Container--verticalCenter { + display: grid; + align-content: center; } + .RV-Alignment__Container--center { + display: grid; + justify-content: center; + display: grid; + align-content: center; } + +.RV-FlexRow__Container { + display: flex; + flex-direction: row; + justify-content: space-around; } + .RV-FlexRow__Container--multiRow { + flex-wrap: wrap; } + .RV-FlexRow__Container--column { + display: flex; + flex-direction: column; } + +.RV-FlexRow__Item { + min-width: 0; + width: 100%; } + .RV-FlexRow__Item__Container { + display: grid; } + .RV-FlexRow__Item__Container--top { + display: grid; + align-content: start; } + .RV-FlexRow__Item__Container--bottom { + display: grid; + align-content: end; } + .RV-FlexRow__Item__Container--left { + display: grid; + justify-content: start; } + .RV-FlexRow__Item__Container--right { + display: grid; + justify-content: end; } + .RV-FlexRow__Item__Container--horizontalCenter { + display: grid; + justify-content: center; } + .RV-FlexRow__Item__Container--verticalCenter { + display: grid; + align-content: center; } + .RV-FlexRow__Item__Container--center { + display: grid; + justify-content: center; + display: grid; + align-content: center; } + .RV-FlexRow__Item, .RV-FlexRow__Item--normal { + flex-grow: 3; + flex-shrink: 3; } + .RV-FlexRow__Item--narrower { + flex-grow: 1; + flex-shrink: 5; } + .RV-FlexRow__Item--narrow { + flex-grow: 2; + flex-shrink: 4; } + .RV-FlexRow__Item--wide { + flex-grow: 4; + flex-shrink: 2; } + .RV-FlexRow__Item--wider { + flex-grow: 5; + flex-shrink: 1; } + .RV-FlexRow__Item--fixedSize { + flex-grow: 0; + flex-shrink: 0; + width: min-content; + flex-basis: 100px; } + +.RV-FlexGrid__Container { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); + grid-template-rows: repeat(auto-fill, minmax(300px, 1fr)); + grid-auto-rows: minmax(300px, 1fr); } + +.RV-FlexGrid__Item__Container { + display: grid; } + .RV-FlexGrid__Item__Container--top { + display: grid; + align-content: start; } + .RV-FlexGrid__Item__Container--bottom { + display: grid; + align-content: end; } + .RV-FlexGrid__Item__Container--left { + display: grid; + justify-content: start; } + .RV-FlexGrid__Item__Container--right { + display: grid; + justify-content: end; } + .RV-FlexGrid__Item__Container--horizontalCenter { + display: grid; + justify-content: center; } + .RV-FlexGrid__Item__Container--verticalCenter { + display: grid; + align-content: center; } + .RV-FlexGrid__Item__Container--center { + display: grid; + justify-content: center; + display: grid; + align-content: center; } + +.RV-ContentCrop__Container, .RV-ContentCrop__Container * { + overflow: hidden; + word-break: break-all; } + +.RV-ContentCrop__Container img { + width: 100%; + height: 100%; + object-fit: cover; } + +.RV-ContentCrop__Container--left img { + object-position: left; } + +.RV-ContentCrop__Container--center img { + object-position: center; } + +.RV-ContentCrop__Container--top img { + object-position: top; } + +.RV-ContentCrop__Container--bottom img { + object-position: botom; } + +.RV-ContentCrop__Container--center img { + object-position: center; } + +.RV-Fan__Container--vertical { + flex-direction: column; + width: max-content; } + +.RV-Fan__Container--vertical .RV-Fan__Surface { + width: 320px; + min-height: 280px; } + +.RV-Fan__Container--horizontal { + flex-direction: row; } + +.RV-Fan__Container--horizontal .RV-Fan__Surface { + min-width: 320px; + height: 280px; } + +.RV-Fan__Container--auto { + flex-flow: row wrap; } + +.RV-Fan__Container--auto .RV-Fan__Surface { + width: calc(100% - 320px); + min-width: 320px; + height: 280px; } + +.RV-Fan__Container--fullWidth .RV-Fan__Base, .RV-Fan__Container--fullWidth .RV-Fan__Surface { + flex-grow: 1; } + +.RV-Fan__Container { + display: flex; } + +.RV-Fan__Base { + height: 280px; + width: 320px; + flex: 0 0 auto; } + +.RV-Fan__Surface, .RV-Fan__Surface * { + overflow: hidden; + word-break: break-all; } + +.RV-Fan__Surface img { + width: 100%; + height: 100%; + object-fit: cover; } + +.RV-Fan__Surface--left img { + object-position: left; } + +.RV-Fan__Surface--center img { + object-position: center; } + +.RV-Fan__Surface--top img { + object-position: top; } + +.RV-Fan__Surface--bottom img { + object-position: botom; } + +.RV-Fan__Surface--center img { + object-position: center; } + +.RV-FullWidthContent__Container { + width: 100%; } + +.RV-FullWidthContent__Item { + width: 100%; } + .RV-FullWidthContent__Item, .RV-FullWidthContent__Item * { + overflow: hidden; + word-break: break-all; } + .RV-FullWidthContent__Item img { + width: 100%; + height: 100%; + object-fit: cover; } + .RV-FullWidthContent__Item--left img { + object-position: left; } + .RV-FullWidthContent__Item--center img { + object-position: center; } + .RV-FullWidthContent__Item--top img { + object-position: top; } + .RV-FullWidthContent__Item--bottom img { + object-position: botom; } + .RV-FullWidthContent__Item--center img { + object-position: center; } + +.RV-BoxShadow { + position: relative; + float: left; + width: 40%; + margin: 2em 10px 4em; + background: #fff; + box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; } + .RV-BoxShadow:before, .RV-BoxShadow:after { + content: ""; + position: absolute; + z-index: -2; } + .RV-BoxShadow--simple { + box-shadow: 0 0 20px #6b5690; } + .RV-BoxShadow--raised:after { + box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; } + .RV-BoxShadow--liftedCorners:before, .RV-BoxShadow--liftedCorners:after { + bottom: 15px; + left: 10px; + width: 50%; + height: 20%; + max-width: 300px; + box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7); + transform: rotate(-3deg); } + .RV-BoxShadow--liftedCorners:after { + right: 10px; + left: auto; + transform: rotate(3deg); } + +.RV-ElementList__Container { + list-style-type: none; + margin: 0; + padding: 0; + top: 0; + bottom: 0; + left: 0; + right: 0; + border: none; } + +.RV-ElementList__Item { + margin: 0; + padding: 0; + top: 0; + bottom: 0; + left: 0; + right: 0; + border: none; } + +.RV-Spacing__Outer--small { + margin: 10px; } + +.RV-Spacing__Outer--medium { + margin: 25px; } + +.RV-Spacing__Outer--large { + margin: 35px; } + +.RV-Spacing__Inner--small { + padding: 10px; } + .RV-Spacing__Inner--small { + gap: 10px; } + +.RV-Spacing__Inner--medium { + padding: 25px; } + .RV-Spacing__Inner--medium { + gap: 25px; } + +.RV-Spacing__Inner--large { + padding: 35px; } + .RV-Spacing__Inner--large { + gap: 35px; } + +.RV-Iconized__Container { + position: relative; } + .RV-Iconized__Container--medium { + top: -.5em; } + .RV-Iconized__Container--large { + top: -1.03073em; } + .RV-Iconized__Container--huge { + top: -2.05em; } + +.RV-Iconized__Icon { + margin: 0; + padding: 0; + top: 0; + bottom: 0; + left: 0; + right: 0; + border: none; } + +.RV-Iconized__Container--small .RV-Iconized__Icon { + width: 1em; + height: 1em; + position: relative; + top: .125em; } + +.RV-Iconized__Container--medium .RV-Iconized__Icon { + width: 2em; + height: 2em; + position: relative; + top: .625em; } + +.RV-Iconized__Container--large .RV-Iconized__Icon { + width: 3em; + height: 3em; + position: relative; + top: 1.15573em; } + +.RV-Iconized__Container--huge .RV-Iconized__Icon { + width: 5em; + height: 5em; + position: relative; + top: 2.175em; } + +.RV-ImageGrid__Container { + list-style-type: none; + margin: 0; + padding: 0; + top: 0; + bottom: 0; + left: 0; + right: 0; + border: none; } + +.RV-ImageGrid__Item { + margin: 0; + padding: 0; + top: 0; + bottom: 0; + left: 0; + right: 0; + border: none; } + +.RV-ImageGrid__Container { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); + grid-template-rows: repeat(auto-fill, minmax(300px, 1fr)); + grid-auto-rows: minmax(300px, 1fr); } + +.RV-ImageGrid__Item__Container { + display: grid; } + .RV-ImageGrid__Item__Container--top { + display: grid; + align-content: start; } + .RV-ImageGrid__Item__Container--bottom { + display: grid; + align-content: end; } + .RV-ImageGrid__Item__Container--left { + display: grid; + justify-content: start; } + .RV-ImageGrid__Item__Container--right { + display: grid; + justify-content: end; } + .RV-ImageGrid__Item__Container--horizontalCenter { + display: grid; + justify-content: center; } + .RV-ImageGrid__Item__Container--verticalCenter { + display: grid; + align-content: center; } + .RV-ImageGrid__Item__Container--center { + display: grid; + justify-content: center; + display: grid; + align-content: center; } + +.RV-ImageGrid__Container { + padding: 25px; } + .RV-ImageGrid__Container__Container { + gap: 25px; } + +.RV-ImageGrid__Item, .RV-ImageGrid__Item * { + overflow: hidden; + word-break: break-all; } + +.RV-ImageGrid__Item img { + width: 100%; + height: 100%; + object-fit: cover; } + +.RV-ImageGrid__Item--left img { + object-position: left; } + +.RV-ImageGrid__Item--center img { + object-position: center; } + +.RV-ImageGrid__Item--top img { + object-position: top; } + +.RV-ImageGrid__Item--bottom img { + object-position: botom; } + +.RV-ImageGrid__Item--center img { + object-position: center; } + +.RV-ImageGrid__Item img { + object-position: center; } + @font-face { font-family: Crimson; src: url("fonts/Crimson/CrimsonText-Regular.ttf"), url("fonts/Crimson/CrimsonText-Bold.ttf"), url("fonts/Crimson/CrimsonText-Italic.ttf"); } @@ -199,14 +620,17 @@ body { color: #f9f9f9; } .LP-Input .LP-Input__Label { font-family: Montserrat, Helvetica, sans-serif; - font-size: 16px; } + font-size: 16px; + white-space: wrap; + overflow: hidden; } .LP-Input .LP-Input__Message { font-family: Montserrat, Helvetica, sans-serif; font-style: italic; font-size: 13px; padding: 3px; position: relative; - top: -30px; } + top: -30px; + overflow: hidden; } .LP-Input--error .LP-Input__Field { margin-bottom: 25px; border-bottom: 2px solid #76323F; @@ -583,61 +1007,71 @@ body { .LP-PlaceList .LP-Pagination { margin-top: 50px; } -.LP-LinkList__List { - list-style-type: none; - display: grid; - grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); - margin: 0; - padding: 0; } - .LP-LinkList__List .LP-LinkList__Item { +.LP-LinkList { + padding: 10px; } + .LP-LinkList__Container { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); + grid-template-rows: repeat(auto-fill, minmax(3em, 1fr)); + grid-auto-rows: minmax(3em, 1fr); } + .LP-LinkList__Item__Container { + display: grid; } + .LP-LinkList__Item__Container--top { + display: grid; + align-content: start; } + .LP-LinkList__Item__Container--bottom { + display: grid; + align-content: end; } + .LP-LinkList__Item__Container--left { + display: grid; + justify-content: start; } + .LP-LinkList__Item__Container--right { + display: grid; + justify-content: end; } + .LP-LinkList__Item__Container--horizontalCenter { + display: grid; + justify-content: center; } + .LP-LinkList__Item__Container--verticalCenter { + display: grid; + align-content: center; } + .LP-LinkList__Item__Container--center { + display: grid; + justify-content: center; + display: grid; + align-content: center; } + .LP-LinkList__Container { + list-style-type: none; + margin: 0; + padding: 0; + top: 0; + bottom: 0; + left: 0; + right: 0; + border: none; } + .LP-LinkList__Item { + margin: 0; + padding: 0; + top: 0; + bottom: 0; + left: 0; + right: 0; + border: none; } + .LP-LinkList__Container { + gap: 10px; } + .LP-LinkList .LP-LinkList__Item { border-left: 1px solid #C09F80; width: calc(100% - 1px); - margin-top: 12px; - position: relative; } - .LP-LinkList__List .LP-LinkList__Item--add .LP-LinkList__AddTrigger { - display: none; } - .LP-LinkList__List .LP-LinkList__Item--add .LP-LinkList__AddTrigger:checked ~ .LP-LinkList__AddPlaceHolder { - visibility: hidden; } - .LP-LinkList__List .LP-LinkList__Item--add .LP-LinkList__AddTrigger:checked ~ .LP-LinkList__Add { - display: block; } - .LP-LinkList__List .LP-LinkList__Item--add .LP-LinkList__Add { - position: absolute; - top: 3px; - display: none; - width: 100%; } - .LP-LinkList__List .LP-LinkList__Item--add .LP-LinkList__Add .LP-Form__Fieldset { - min-width: unset; } - .LP-LinkList__List .LP-LinkList__Item--add .LP-LinkList__Add .LP-Form { - display: block; - min-width: 0px; } - .LP-LinkList__List .LP-LinkList__Item .LP-Link { - padding: 1em 0 1em 1em; - width: calc(100% - 1em); - display: block; - color: #565656; } - .LP-LinkList__List .LP-LinkList__Item .LP-Link--iconized { - padding-top: 0; - padding-bottom: 1.1em; } - .LP-LinkList__List .LP-LinkList__Item .LP-Link--iconized:hover { - background-color: #ccc !important; } - .LP-LinkList__List .LP-LinkList__Item .LP-Link--iconized .LP-Text { - padding-top: .1em; } - .LP-LinkList__List .LP-LinkList__Item .LP-Link:hover { - background-color: #f9f9f9; - color: #76323F; } - .LP-LinkList__List .LP-LinkList__Item .LP-Link .LP-Text { - color: inherit; } - -.LP-Link__Icon { - width: 2em; - height: 2em; - fill: #76323F; - line-height: 5em; } - -.LP-LinkList__Item .LP-Link__Icon { - position: relative; - top: .7em; - margin-right: .6em; } + overflow: hidden; } + .LP-LinkList .LP-LinkList__Item:hover { + background-color: #f9f9f9; } + .LP-LinkList .LP-Link { + height: 100%; + display: grid; + align-content: center; } + .LP-LinkList .LP-Link > * { + padding: 10px; } + .LP-LinkList .LP-Link > *__Container { + gap: 10px; } .LP-Footer { margin-top: 75px; @@ -660,108 +1094,183 @@ body { .LP-Footer .LP-LinkList__List .LP-LinkList__Item .LP-Link:hover { background-color: inherit; } -.LP-Form { - flex-direction: column; - align-items: center; } - .LP-Form--inline { - padding: 0 10px; } - .LP-Form--inline .LP-Form__Fieldset .LP-Form__Composition { - gap: 10px; } - .LP-Form .LP-Form__Fieldset { - border: none; - padding: 0; - margin: 0; - max-width: 1200px; - min-width: 750px; } - .LP-Form .LP-Form__Fieldset .LP-Form__Legend { - margin: 0; - padding: 0; - font-family: Montserrat, Helvetica, sans-serif; - font-size: 21px; } +.LP-Form .LP-Form__Fieldset { + margin: 0; + padding: 0; + top: 0; + bottom: 0; + left: 0; + right: 0; + border: none; + max-width: 1200px; + min-width: 750px; } + @media (max-width: 750px) { + .LP-Form .LP-Form__Fieldset { + min-width: unset; } } + +.LP-Form .LP-Form__Legend { + margin: 0; + padding: 0; + font-family: Montserrat, Helvetica, sans-serif; + font-size: 21px; } + +.LP-Form .LP-Form__Composition { + display: flex; + flex-direction: row; + justify-content: space-around; + padding: 10px; } + .LP-Form .LP-Form__Composition--multiRow { + flex-wrap: wrap; } + .LP-Form .LP-Form__Composition--column { + display: flex; + flex-direction: column; } .LP-Form .LP-Form__Composition { - display: flex; - flex-direction: row; - justify-content: space-between; - gap: 30px; } - .LP-Form .LP-Form__Composition--buttons { + gap: 10px; } + @media (max-width: 650px) { + .LP-Form .LP-Form__Composition--breakable { + flex-wrap: wrap; } } + @media (max-width: 450px) { + .LP-Form .LP-Form__Composition { + flex-wrap: wrap; } } + .LP-Form .LP-Form__Composition--buttons { + justify-content: flex-end; + padding: 10px; } + .LP-Form .LP-Form__Composition--buttons__Container { gap: 10px; } - .LP-Form .LP-Form__Composition .LP-Form__Field { - flex: 3 2 100px; - padding: 6px 0; } - .LP-Form .LP-Form__Composition .LP-Form__Field--wider { - flex: 5 2; } - .LP-Form .LP-Form__Composition .LP-Form__Field--wide { - flex: 4 2; } - .LP-Form .LP-Form__Composition .LP-Form__Field--narrow { - flex: 2 1; } - .LP-Form .LP-Form__Composition .LP-Form__Field--narrower { - flex: 1 2; } - .LP-Form .LP-Form__Composition .LP-Form__Field--static { - flex: 0 0; } - .LP-Form .LP-Form__Composition--buttons { - justify-content: flex-end; } - .LP-Form .LP-Form__Composition .LP-Form__Button { + +.LP-Form .LP-Form__Field { + min-width: 0; + width: 100%; } + .LP-Form .LP-Form__Field__Container { + display: grid; } + .LP-Form .LP-Form__Field__Container--top { + display: grid; + align-content: start; } + .LP-Form .LP-Form__Field__Container--bottom { + display: grid; + align-content: end; } + .LP-Form .LP-Form__Field__Container--left { + display: grid; + justify-content: start; } + .LP-Form .LP-Form__Field__Container--right { + display: grid; + justify-content: end; } + .LP-Form .LP-Form__Field__Container--horizontalCenter { + display: grid; + justify-content: center; } + .LP-Form .LP-Form__Field__Container--verticalCenter { + display: grid; + align-content: center; } + .LP-Form .LP-Form__Field__Container--center { + display: grid; + justify-content: center; + display: grid; + align-content: center; } + .LP-Form .LP-Form__Field, .LP-Form .LP-Form__Field--normal { + flex-grow: 3; + flex-shrink: 3; } + .LP-Form .LP-Form__Field--narrower { + flex-grow: 1; + flex-shrink: 5; } + .LP-Form .LP-Form__Field--narrow { + flex-grow: 2; + flex-shrink: 4; } + .LP-Form .LP-Form__Field--wide { + flex-grow: 4; + flex-shrink: 2; } + .LP-Form .LP-Form__Field--wider { + flex-grow: 5; + flex-shrink: 1; } + .LP-Form .LP-Form__Field--fixedSize { + flex-grow: 0; + flex-shrink: 0; + width: min-content; + flex-basis: 100px; } + +.LP-Form .LP-Form__Button { + flex-grow: 0; + flex-shrink: 0; + width: min-content; + flex-basis: 130px; } + @media (max-width: 450px) { + .LP-Form .LP-Form__Button { flex-grow: 0; - padding-left: 0; - min-width: 130px; } - .LP-Form .LP-Form__Composition .LP-Form__Button .LP-Link { - display: contents; } - .LP-Form .LP-Form__Composition .LP-Form__InfoText .LP-Paragraph { - font-family: Montserrat, Helvetica, sans-serif; - color: #565656; } + flex-shrink: 0; + width: min-content; + flex-basis: 100%; } } -@media (max-width: 750px) { - .LP-Form .LP-Form__Fieldset { - min-width: unset; } } +.LP-Form .LP-Form__InfoText .LP-Paragraph { + font-family: Montserrat, Helvetica, sans-serif; + color: #565656; } -@media (max-width: 650px) { - .LP-Form .LP-Form__Fieldset .LP-Form__Composition--breakable { - display: flex; - flex-direction: column; - justify-content: space-between; } } - -@media (max-width: 450px) { - .LP-Form :not(.LP-Form--inline) .LP-Form__Fieldset .LP-Form__Composition { - display: flex; - flex-direction: column; - justify-content: space-between; } - .LP-Form :not(.LP-Form--inline) .LP-Form__Fieldset .LP-Form__Composition .LP-Form__Field:not(.LP-Form__Button) { - flex: 3 1 100px; - padding: 12px 15px; } - .LP-Form :not(.LP-Form--inline) .LP-Form__Fieldset .LP-Form__Composition .LP-Form__Button { - padding: 0 15px; } - .LP-Form :not(.LP-Form--inline) .LP-Form__Fieldset .LP-Form__Composition--buttons { - justify-content: flex-end; } } - -.LP-ImageGrid .LP-ImageGrid__List { - list-style-type: none; - display: grid; - grid-template-columns: repeat(auto-fit, 300px); - align-content: space-around; - justify-content: center; - margin: 0px; - padding: 0px; } - -.LP-ImageGrid .LP-ImageGrid__Item { - margin-top: 10px; } - -.LP-ImageGrid .LP-Link { - overflow: hidden; } - -.LP-ImageGrid .LP-Image { - box-shadow: 0 0 5px #565656; - height: 200px; - width: 290px; - object-fit: cover; } - -@media (max-width: 650px) { - .LP-ImageGrid .LP-ImageGrid__List { - grid-template-columns: 1fr; } - .LP-ImageGrid .LP-ImageGrid__List .LP-Image { - box-shadow: 0 0 5px #565656; - height: auto; - width: 100%; - object-fit: cover; } } +.LP-ImageGrid { + padding: 10px; } + .LP-ImageGrid__Container { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); + grid-template-rows: repeat(auto-fill, minmax(200px, 1fr)); + grid-auto-rows: minmax(200px, 1fr); } + .LP-ImageGrid__Item__Container { + display: grid; } + .LP-ImageGrid__Item__Container--top { + display: grid; + align-content: start; } + .LP-ImageGrid__Item__Container--bottom { + display: grid; + align-content: end; } + .LP-ImageGrid__Item__Container--left { + display: grid; + justify-content: start; } + .LP-ImageGrid__Item__Container--right { + display: grid; + justify-content: end; } + .LP-ImageGrid__Item__Container--horizontalCenter { + display: grid; + justify-content: center; } + .LP-ImageGrid__Item__Container--verticalCenter { + display: grid; + align-content: center; } + .LP-ImageGrid__Item__Container--center { + display: grid; + justify-content: center; + display: grid; + align-content: center; } + .LP-ImageGrid__Container { + list-style-type: none; + margin: 0; + padding: 0; + top: 0; + bottom: 0; + left: 0; + right: 0; + border: none; } + .LP-ImageGrid__Item { + margin: 0; + padding: 0; + top: 0; + bottom: 0; + left: 0; + right: 0; + border: none; } + .LP-ImageGrid__Container { + gap: 10px; } + .LP-ImageGrid .LP-ImageGrid__Item, .LP-ImageGrid .LP-ImageGrid__Item * { + overflow: hidden; + word-break: break-all; } + .LP-ImageGrid .LP-ImageGrid__Item img { + width: 100%; + height: 100%; + object-fit: cover; } + .LP-ImageGrid .LP-ImageGrid__Item--left img { + object-position: left; } + .LP-ImageGrid .LP-ImageGrid__Item--center img { + object-position: center; } + .LP-ImageGrid .LP-ImageGrid__Item--top img { + object-position: top; } + .LP-ImageGrid .LP-ImageGrid__Item--bottom img { + object-position: botom; } + .LP-ImageGrid .LP-ImageGrid__Item--center img { + object-position: center; } .LP-MainContainer { margin: 0 auto; diff --git a/public/rcss.bundled.css b/public/rcss.bundled.css new file mode 100644 index 0000000..c204696 --- /dev/null +++ b/public/rcss.bundled.css @@ -0,0 +1,416 @@ +.pink { + background-color: pink; } + +.RV-Alignment__Container { + display: grid; } + .RV-Alignment__Container--top { + display: grid; + align-content: start; } + .RV-Alignment__Container--bottom { + display: grid; + align-content: end; } + .RV-Alignment__Container--left { + display: grid; + justify-content: start; } + .RV-Alignment__Container--right { + display: grid; + justify-content: end; } + .RV-Alignment__Container--horizontalCenter { + display: grid; + justify-content: center; } + .RV-Alignment__Container--verticalCenter { + display: grid; + align-content: center; } + .RV-Alignment__Container--center { + display: grid; + justify-content: center; + display: grid; + align-content: center; } + +.RV-FlexRow__Container { + display: flex; + flex-direction: row; + justify-content: space-around; } + .RV-FlexRow__Container--multiRow { + flex-wrap: wrap; } + +.RV-FlexRow__Item { + min-width: 0; + width: 100%; } + .RV-FlexRow__Item__Container { + display: grid; } + .RV-FlexRow__Item__Container--top { + display: grid; + align-content: start; } + .RV-FlexRow__Item__Container--bottom { + display: grid; + align-content: end; } + .RV-FlexRow__Item__Container--left { + display: grid; + justify-content: start; } + .RV-FlexRow__Item__Container--right { + display: grid; + justify-content: end; } + .RV-FlexRow__Item__Container--horizontalCenter { + display: grid; + justify-content: center; } + .RV-FlexRow__Item__Container--verticalCenter { + display: grid; + align-content: center; } + .RV-FlexRow__Item__Container--center { + display: grid; + justify-content: center; + display: grid; + align-content: center; } + .RV-FlexRow__Item, .RV-FlexRow__Item--normal { + flex-grow: 3; + flex-shrink: 3; } + .RV-FlexRow__Item--narrower { + flex-grow: 1; + flex-shrink: 5; } + .RV-FlexRow__Item--narrow { + flex-grow: 2; + flex-shrink: 4; } + .RV-FlexRow__Item--wide { + flex-grow: 4; + flex-shrink: 2; } + .RV-FlexRow__Item--wider { + flex-grow: 5; + flex-shrink: 1; } + .RV-FlexRow__Item--fixedSize { + flex-grow: 0; + flex-shrink: 0; + width: min-content; } + +.RV-FlexGrid__Container { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); + grid-template-rows: repeat(auto-fill, 300px); + grid-auto-rows: 300px; } + +.RV-FlexGrid__Item__Container { + display: grid; } + .RV-FlexGrid__Item__Container--top { + display: grid; + align-content: start; } + .RV-FlexGrid__Item__Container--bottom { + display: grid; + align-content: end; } + .RV-FlexGrid__Item__Container--left { + display: grid; + justify-content: start; } + .RV-FlexGrid__Item__Container--right { + display: grid; + justify-content: end; } + .RV-FlexGrid__Item__Container--horizontalCenter { + display: grid; + justify-content: center; } + .RV-FlexGrid__Item__Container--verticalCenter { + display: grid; + align-content: center; } + .RV-FlexGrid__Item__Container--center { + display: grid; + justify-content: center; + display: grid; + align-content: center; } + +.RV-ContentCrop__Container, .RV-ContentCrop__Container * { + overflow: hidden; + word-break: break-all; } + +.RV-ContentCrop__Container img { + width: 100%; + height: 100%; + object-fit: cover; } + +.RV-ContentCrop__Container--left img { + object-position: left; } + +.RV-ContentCrop__Container--center img { + object-position: center; } + +.RV-ContentCrop__Container--top img { + object-position: top; } + +.RV-ContentCrop__Container--bottom img { + object-position: botom; } + +.RV-ContentCrop__Container--center img { + object-position: center; } + +.RV-Fan__Container--vertical { + flex-direction: column; + width: max-content; } + +.RV-Fan__Container--vertical .RV-Fan__Surface { + width: 320px; + min-height: 280px; } + +.RV-Fan__Container--horizontal { + flex-direction: row; } + +.RV-Fan__Container--horizontal .RV-Fan__Surface { + min-width: 320px; + height: 280px; } + +.RV-Fan__Container--auto { + flex-flow: row wrap; } + +.RV-Fan__Container--auto .RV-Fan__Surface { + width: calc(100% - 320px); + min-width: 320px; + height: 280px; } + +.RV-Fan__Container--fullWidth .RV-Fan__Base, .RV-Fan__Container--fullWidth .RV-Fan__Surface { + flex-grow: 1; } + +.RV-Fan__Container { + display: flex; } + +.RV-Fan__Base { + height: 280px; + width: 320px; + flex: 0 0 auto; } + +.RV-Fan__Surface, .RV-Fan__Surface * { + overflow: hidden; + word-break: break-all; } + +.RV-Fan__Surface img { + width: 100%; + height: 100%; + object-fit: cover; } + +.RV-Fan__Surface--left img { + object-position: left; } + +.RV-Fan__Surface--center img { + object-position: center; } + +.RV-Fan__Surface--top img { + object-position: top; } + +.RV-Fan__Surface--bottom img { + object-position: botom; } + +.RV-Fan__Surface--center img { + object-position: center; } + +.RV-FullWidthContent__Container { + width: 100%; } + +.RV-FullWidthContent__Item { + width: 100%; } + .RV-FullWidthContent__Item, .RV-FullWidthContent__Item * { + overflow: hidden; + word-break: break-all; } + .RV-FullWidthContent__Item img { + width: 100%; + height: 100%; + object-fit: cover; } + .RV-FullWidthContent__Item--left img { + object-position: left; } + .RV-FullWidthContent__Item--center img { + object-position: center; } + .RV-FullWidthContent__Item--top img { + object-position: top; } + .RV-FullWidthContent__Item--bottom img { + object-position: botom; } + .RV-FullWidthContent__Item--center img { + object-position: center; } + +.RV-BoxShadow { + position: relative; + float: left; + width: 40%; + margin: 2em 10px 4em; + background: #fff; + box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; } + .RV-BoxShadow:before, .RV-BoxShadow:after { + content: ""; + position: absolute; + z-index: -2; } + .RV-BoxShadow--simple { + box-shadow: 0 0 20px #6b5690; } + .RV-BoxShadow--raised:after { + box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; } + .RV-BoxShadow--liftedCorners:before, .RV-BoxShadow--liftedCorners:after { + bottom: 15px; + left: 10px; + width: 50%; + height: 20%; + max-width: 300px; + box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7); + transform: rotate(-3deg); } + .RV-BoxShadow--liftedCorners:after { + right: 10px; + left: auto; + transform: rotate(3deg); } + +.RV-ElementList__Container { + list-style-type: none; + margin: 0; + padding: 0; + top: 0; + bottom: 0; + left: 0; + right: 0; + border: none; } + +.RV-ElementList__Item { + margin: 0; + padding: 0; + top: 0; + bottom: 0; + left: 0; + right: 0; + border: none; } + +.RV-Spacing__Outer--small { + margin: 10px; } + +.RV-Spacing__Outer--medium { + margin: 25px; } + +.RV-Spacing__Outer--large { + margin: 35px; } + +.RV-Spacing__Inner--small { + padding: 10px; } + .RV-Spacing__Inner--small { + gap: 10px; } + +.RV-Spacing__Inner--medium { + padding: 25px; } + .RV-Spacing__Inner--medium { + gap: 25px; } + +.RV-Spacing__Inner--large { + padding: 35px; } + .RV-Spacing__Inner--large { + gap: 35px; } + +.RV-Iconized__Container { + position: relative; } + .RV-Iconized__Container--medium { + top: -.5em; } + .RV-Iconized__Container--large { + top: -1.03073em; } + .RV-Iconized__Container--huge { + top: -2.05em; } + +.RV-Iconized__Icon { + margin: 0; + padding: 0; + top: 0; + bottom: 0; + left: 0; + right: 0; + border: none; } + +.RV-Iconized__Container--small .RV-Iconized__Icon { + width: 1em; + height: 1em; + position: relative; + top: .125em; } + +.RV-Iconized__Container--medium .RV-Iconized__Icon { + width: 2em; + height: 2em; + position: relative; + top: .625em; } + +.RV-Iconized__Container--large .RV-Iconized__Icon { + width: 3em; + height: 3em; + position: relative; + top: 1.15573em; } + +.RV-Iconized__Container--huge .RV-Iconized__Icon { + width: 5em; + height: 5em; + position: relative; + top: 2.175em; } + +.RV-ImageGrid__Container { + list-style-type: none; + margin: 0; + padding: 0; + top: 0; + bottom: 0; + left: 0; + right: 0; + border: none; } + +.RV-ImageGrid__Item { + margin: 0; + padding: 0; + top: 0; + bottom: 0; + left: 0; + right: 0; + border: none; } + +.RV-ImageGrid__Container { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); + grid-template-rows: repeat(auto-fill, 300px); + grid-auto-rows: 300px; } + +.RV-ImageGrid__Item__Container { + display: grid; } + .RV-ImageGrid__Item__Container--top { + display: grid; + align-content: start; } + .RV-ImageGrid__Item__Container--bottom { + display: grid; + align-content: end; } + .RV-ImageGrid__Item__Container--left { + display: grid; + justify-content: start; } + .RV-ImageGrid__Item__Container--right { + display: grid; + justify-content: end; } + .RV-ImageGrid__Item__Container--horizontalCenter { + display: grid; + justify-content: center; } + .RV-ImageGrid__Item__Container--verticalCenter { + display: grid; + align-content: center; } + .RV-ImageGrid__Item__Container--center { + display: grid; + justify-content: center; + display: grid; + align-content: center; } + +.RV-ImageGrid__Container { + padding: 25px; } + .RV-ImageGrid__Container__Container { + gap: 25px; } + +.RV-ImageGrid__Item, .RV-ImageGrid__Item * { + overflow: hidden; + word-break: break-all; } + +.RV-ImageGrid__Item img { + width: 100%; + height: 100%; + object-fit: cover; } + +.RV-ImageGrid__Item--left img { + object-position: left; } + +.RV-ImageGrid__Item--center img { + object-position: center; } + +.RV-ImageGrid__Item--top img { + object-position: top; } + +.RV-ImageGrid__Item--bottom img { + object-position: botom; } + +.RV-ImageGrid__Item--center img { + object-position: center; } + +.RV-ImageGrid__Item img { + object-position: center; }