@penskemediacorp/larva-css 0.6.3 → 0.6.4-develop.17

package/src/02-algorithms/a-glue/a-glue.common.inline.scss

@@ -22,6 +22,14 @@
 	@include _a-glue-base;
 }
 
+@include pmc-breakpoint( mobile-max ) {
+	.lrv-a-glue\@mobile-max {
+		top: 0;
+		left: 0;
+
+		@include _a-glue-base;
+	}
+}
 
 .lrv-a-glue\@tablet {
 	@include pmc-breakpoint( tablet ) {
@@ -49,6 +57,34 @@
 	--a-glue-bottom: 0;
 }
 
+.lrv-a-glue--t-50p {
+	--a-glue-top: 50%;
+}
+
 .lrv-a-glue--t-100p {
 	--a-glue-top: 100%;
 }
+
+.lrv-a-glue--l-50p {
+	--a-glue-left: 50%;
+}
+
+.lrv-a-glue--r-50p {
+	--a-glue-right: 50%;
+}
+
+.lrv-a-glue--b-n1 {
+	--a-glue-bottom: -1rem;
+}
+
+.lrv-a-glue-parent\@mobile-max {
+	@include pmc-breakpoint( mobile-max ) {
+		position: relative;
+	}
+}
+
+.lrv-a-glue-parent\@tablet {
+	@include pmc-breakpoint( tablet ) {
+		position: relative;
+	}
+}

package/src/02-algorithms/a-grid/a-grid.common.inline.scss

@@ -54,11 +54,20 @@ $grids: (
 		columns: 2,
 		breakpoint: desktop,
 	),
+	(
+		columns: 2,
+		breakpoint: desktop-xl,
+	),
 	(
 		columns: 4,
 		spans: ( 2 ),
 		breakpoint: desktop,
 	),
+	(
+		columns: 4,
+		spans: ( 3 ),
+		breakpoint: desktop,
+	),
 	(
 		columns: 4,
 		spans: ( 3 ),

package/src/02-algorithms/a-hidden/a-hidden.common.inline.scss

@@ -29,3 +29,15 @@
 		@include _a-hidden;
 	}
 }
+
+.lrv-a-hidden\@tablet {
+	@include pmc-breakpoint( tablet ) {
+		@include _a-hidden;
+	}
+}
+
+.lrv-a-hidden\@desktop {
+	@include pmc-breakpoint( desktop ) {
+		@include _a-hidden;
+	}
+}

package/src/02-algorithms/a-icon/a-icon.common.async.scss

@@ -33,4 +33,4 @@
 
 .lrv-a-icon-search {
 	--a-icon-url: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18'%3E%3Cpath d='M5.228 11.335h.79l.28-.27a6.471 6.471 0 01-1.57-4.23 6.5 6.5 0 116.5 6.5c-1.61 0-3.09-.59-4.23-1.57l-.27.28v.79l-5 4.99-1.49-1.49 4.99-5zm6 0c2.49 0 4.5-2.01 4.5-4.5s-2.01-4.5-4.5-4.5-4.5 2.01-4.5 4.5 2.01 4.5 4.5 4.5z' fill-rule='evenodd'/%3E%3C/svg%3E" );
-}
+}

package/src/02-algorithms/a-icon/a-icon.common.inline.scss

@@ -102,3 +102,20 @@
 	}
 }
 
+.lrv-a-icon-after-arrow-top-right {
+	&::before {
+		position: absolute;
+		content: '';
+		display: block;
+		width: pmc-rem(24);
+		height: pmc-rem(24);
+		right: 13%;
+		border: 2px solid map-get( $TOKENS-MAP, color-black );
+		border-right-color: transparent;
+		border-bottom-color: transparent;
+		transform: rotate( 45deg );
+		top: pmc-rem(-12);
+		background-color: $color-white;
+	}
+}
+

package/src/02-algorithms/a-truncate-ellipsis/a-truncate-ellipsis.common.async.scss

@@ -27,9 +27,13 @@
 }
 
 .lrv-a-truncate-ellipsis-5line {
-	@include _a-truncate-ellipsis(3);
+	@include _a-truncate-ellipsis(5);
 }
- 
+
+.lrv-a-truncate-ellipsis-6line {
+	@include _a-truncate-ellipsis(6);
+}
+
 .lrv-a-truncate-ellipsis-3line\@desktop-xl {
 	@include pmc-breakpoint( desktop-xl ) {
 		@include _a-truncate-ellipsis(3);

package/src/03-utilities/u-border.common.inline.scss

@@ -47,6 +47,46 @@
 	border-width: pmc-rem(5);
 }
 
+.lrv-u-border-t-6 {
+	border-top-width: pmc-rem(6);
+}
+
+.lrv-u-border-b-6 {
+	border-bottom-width: pmc-rem(6);
+}
+
+.lrv-u-border-r-1 {
+	border-right-width: pmc-rem(1);
+}
+
+.lrv-u-border-r-6 {
+	border-right-width: pmc-rem(6);
+}
+
+.lrv-u-border-r-2 {
+	border-right-width: pmc-rem(2);
+}
+
+.lrv-u-border-b-2 {
+	border-bottom-width: pmc-rem(2);
+}
+
+.lrv-u-border-l-2 {
+	border-left-width: pmc-rem(2);
+}
+
+.lrv-u-border-l-00\@mobile-max {
+	@include pmc-breakpoint(mobile-max) {
+		border-left-width: 0;
+	}
+}
+
+.lrv-u-border-a-1\@mobile-max {
+	@include pmc-breakpoint( mobile-max ) {
+		border-width: 1px;
+	}
+}
+
 @include pmc-breakpoint( mobile-max ) {
 	.lrv-u-border-a-1\@mobile-max {
 		border-width: 1px;
@@ -67,6 +107,10 @@
 	.lrv-u-border-b-00\@mobile-max {
 		border-bottom-width: 0px;
 	}
+
+	.lrv-u-border-b-1\@mobile-max {
+		border-bottom-width: 1px;
+	}
 }
 
 .lrv-u-border-t-1\@mobile-max {
@@ -97,12 +141,24 @@
 	}
 }
 
+.lrv-u-border-r-1\@tablet {
+	@include pmc-breakpoint( tablet ) {
+		border-right-width: 1px;
+	}
+}
+
 .lrv-u-border-r-1\@desktop {
 	@include pmc-breakpoint( desktop ) {
 		border-right-width: 1px;
 	}
 }
 
+.lrv-u-border-b-1\@desktop {
+	@include pmc-breakpoint( desktop ) {
+		border-bottom-width: 1px;
+	}
+}
+
 .lrv-u-border-l-1\@desktop-xl {
 	@include pmc-breakpoint( desktop-xl ) {
 		border-left-width: 1px;
@@ -116,7 +172,13 @@
 }
 
 .lrv-u-border-t-050\@desktop-xl-max {
-    @include pmc-breakpoint( desktop-xl-max ) {
-        border-top-width: pmc-rem(1);
-    }
+	@include pmc-breakpoint( desktop-xl-max ) {
+		border-top-width: pmc-rem(1);
+	}
 }
+
+.lrv-u-border-b-2\@mobile-max {
+	@include pmc-breakpoint( mobile-max ) {
+		border-bottom-width: pmc-rem(2);
+	}
+ }

package/src/03-utilities/u-box-alignment.common.inline.scss

@@ -32,6 +32,10 @@
 	align-items: flex-start;
 }
 
+.lrv-u-align-items-stretch {
+	align-items: stretch;
+}
+
 @include pmc-breakpoint( desktop ) {
 	.lrv-u-align-items-center\@desktop {
 		align-items: center;

package/src/03-utilities/u-display.common.inline.scss

@@ -71,4 +71,24 @@
 	@include pmc-breakpoint( mobile-max ) {
 		display: none;
 	}
+}
+
+.lrv-u-display-none\:first-child\@desktop-max {
+	@include pmc-breakpoint( desktop-max ) {
+		&> *:first-child {
+			display: none;
+		}
+	}
+}
+
+.lrv-u-display-inline-block\@mobile-max {
+	@include pmc-breakpoint( mobile-max ) {
+		display: inline-block;
+	}
+}
+
+.lrv-u-display-block\@mobile-max {
+	@include pmc-breakpoint( mobile-max ) {
+		display: block;
+	}
 }

package/src/03-utilities/u-flex.common.inline.scss

@@ -81,6 +81,19 @@ $breakpoints: (
 	}
 }
 
+.lrv-u-flex-wrap-wrap\@mobile-max {
+	@include pmc-breakpoint(mobile-max) {
+		flex-wrap: wrap;
+	}
+}
+
+.lrv-u-flex-direction-column-reverse\@mobile-max {
+	@include pmc-breakpoint(mobile-max) {
+		flex-direction: column-reverse;
+	}
+
+}
+
 @each $breakpoint in $breakpoints {
 
 	@each $size in $flex_basis {
@@ -101,4 +114,4 @@ $breakpoints: (
 
 	} // end flex loop
 	
-} // end breakpoints loop
+} // end breakpoints loop

package/src/03-utilities/u-font-size.common.inline.scss

@@ -27,6 +27,7 @@
 		($font-size-40,)
 		($font-size-50,)
 		($font-size-86,)
+		($font-size-8,  mobile-max) 
 		($font-size-12, mobile-max)
 		($font-size-14, mobile-max)
 		($font-size-16, mobile-max)

package/src/03-utilities/u-height.common.inline.scss

@@ -1,17 +1,43 @@
 @import '@penskemediacorp/larva-scss/dist/tools';
 
-.lrv-u-height-100p {
-	height: 100%;
-}
+$heights_map: (
+	'height-auto': auto,
+	'height-16': pmc-rem(16),
+	'height-20': pmc-rem(20),
+	'height-24': pmc-rem(24),
+	'height-30': pmc-rem(30),
+	'height-40': pmc-rem(40),
+	'height-50': pmc-rem(50),
+	'height-100': pmc-rem(100),
+	'height-150': pmc-rem(150),
+	'height-200': pmc-rem(200),
+	'height-300': pmc-rem(300),
+	'height-20p': 20%,
+	'height-30p': 30%,
+	'height-50p': 50%,
+	'height-75p': 75%,
+	'height-100p': 100%,
+);
 
-.lrv-u-height-auto {
-	height: auto;
-}
+@include basic-utility-generator( 'height', (
+	height-auto,
+	height-16,
+	height-20,
+	height-24,
+	height-30,
+	height-40,
+	height-50,
+	height-100,
+	height-150,
+	height-200,
+	height-300,
+	height-20p,
+	height-30p,
+	height-50p,
+	height-75p,
+	height-100p,
+), $heights_map, $NAMESPACE: 'lrv-' );
 
 .lrv-u-max-height-50 {
 	max-height: pmc-rem(50);
-}
-
-.lrv-u-height-16 {
-	height: pmc-rem(16);
-}
+}

package/src/03-utilities/u-letter-spacing.common.inline.scss

@@ -8,4 +8,4 @@
 	@include pmc-breakpoint( mobile-max ) {
 		letter-spacing: pmc-rem(1.95);
 	}
-}
+}

package/src/03-utilities/u-max-width.common.inline.scss

@@ -12,6 +12,14 @@
 	max-width: pmc-rem(150);
 }
 
+.lrv-u-max-width-250 {
+	max-width: pmc-rem(250);
+}
+
+.lrv-u-max-width-500 {
+	max-width: pmc-rem(500);
+}
+
 .lrv-u-max-width-1000 {
 	max-width: pmc-rem(1000);
 }

package/src/03-utilities/u-padding.common.inline.scss

@@ -79,12 +79,16 @@ $breakpoints: (
 
 // Legacy - should not have tablet and mobile-max
 $paddings_with_breakpoints: (
+	('l', $spacer-3 ),
+
 	('tb', $spacer-025, mobile-max ),
 	('tb', $spacer-1, mobile-max),
 
 	('r', $spacer-1, tablet ),
 	('t', $spacer-050, tablet ),
 	('lr', $spacer-1, tablet ),
+
+	('tb', $spacer-050, desktop-max),
 );
 
 @include u-padding( $paddings_with_breakpoints, $NAMESPACE: 'lrv-' );

package/src/03-utilities/u-text-transform.common.inline.scss

@@ -9,3 +9,7 @@
 .lrv-u-text-transform-lowercase {
 	text-transform: lowercase;
 }
+
+.lrv-u-text-transform-capitalize {
+	text-transform: capitalize;
+}

package/src/03-utilities/u-transform.common.inline.scss

@@ -0,0 +1,5 @@
+@import 'setup';
+
+.lrv-u-transform-translateY-n50p {
+	transform: translateY(-50%);
+}

package/src/03-utilities/u-vertical-align.common.inline.scss

@@ -0,0 +1,7 @@
+@import 'setup';
+
+.lrv-u-vertical-align-middle\@mobile-max {
+	@include pmc-breakpoint(mobile-max) {
+		vertical-align: middle;
+	}
+}

package/src/03-utilities/u-width.common.inline.scss

@@ -3,15 +3,20 @@
 $widths_map: (
 	'width-auto': auto,
 	'width-16': pmc-rem(16),
+	'width-24': pmc-rem(24),
 	'width-30': pmc-rem(30),
 	'width-50': pmc-rem(50),
 	'width-100': pmc-rem(100),
 	'width-150': pmc-rem(150),
+	'width-165': pmc-rem(165),
 	'width-200': pmc-rem(200),
 	'width-215': pmc-rem(215),
 	'width-300': pmc-rem(300),
+	'width-20p': 20%,
+	'width-22p': 22%,
 	'width-30p': 30%,
 	'width-50p': 50%,
+	'width-70p': 70%,
 	'width-75p': 75%,
 	'width-100p': 100%,
 );
@@ -19,15 +24,20 @@ $widths_map: (
 @include basic-utility-generator( 'width', (
 	width-auto,
 	width-16,
+	width-24,
 	width-30,
 	width-50,
 	width-100,
 	width-150,
+	width-165,
 	width-200,
 	width-215,
 	width-300,
+	width-20p,
+	width-22p,
 	width-30p,
 	width-50p,
+	width-70p,
 	width-75p,
 	width-100p,
 ), $widths_map, $NAMESPACE: 'lrv-' );
@@ -97,7 +107,90 @@ $widths_map: (
 
 .lrv-u-width-64p\@desktop-xl {
 
-	@include pmc-breakpoint(desktop-xl) {
-		width: 64%;
+    @include pmc-breakpoint(desktop-xl) {
+        width: 64%;
+    }
+}
+
+.lrv-u-width-27p\@tablet {
+
+	@include pmc-breakpoint(tablet) {
+		width: 27%;
+	}
+}
+
+.lrv-u-width-23p\@tablet {
+
+	@include pmc-breakpoint(tablet) {
+		width: 23%;
+	}
+}
+
+.lrv-u-width-52p\@tablet {
+
+	@include pmc-breakpoint(tablet) {
+		width: 52%;
+	}
+}
+
+.lrv-u-width-50p\@mobile-max {
+	@include pmc-breakpoint(mobile-max) {
+		width: 50%;
+	}
+}
+
+.lrv-u-width-33p\@mobile-max {
+
+	@include pmc-breakpoint(mobile-max) {
+		width: 33.33%;
+	}
+}
+
+.lrv-u-width-55p\@tablet {
+	@include pmc-breakpoint(tablet) {
+		width: 55%;
+	}
+}
+
+.lrv-u-width-35p\@tablet {
+
+	@include pmc-breakpoint(tablet) {
+		width: 35%;
+	}
+}
+
+.lrv-u-max-width-30p\@mobile-max {
+	@include pmc-breakpoint(mobile-max) {
+		max-width: 30%;
+	}
+}
+
+.lrv-u-width-28\@mobile-max {
+	@include pmc-breakpoint(mobile-max) {
+		width: pmc-rem(28);
+	}
+}
+
+.lrv-u-width-22p\@mobile-max {
+	@include pmc-breakpoint(mobile-max) {
+		width: 22%;
+	}
+}
+
+.lrv-u-width-56p\@mobile-max {
+	@include pmc-breakpoint(mobile-max) {
+		width: 56%;
+	}
+}
+
+.lrv-u-width-135\@mobile-max {
+	@include pmc-breakpoint(mobile-max) {
+		width: pmc-rem(135);
+	}
+}
+
+.lrv-u-width-100p\@tablet {
+	@include pmc-breakpoint(tablet) {
+		width: 100%;
 	}
 }

package/src/04-js/js-ExpandableSearch.common.async.scss

@@ -0,0 +1,33 @@
+@import 'setup';
+@import 'partials/expandable-search';
+
+.is-ExpandableSearch-open {
+	background-color: var( --color-brand-primary );
+	color: var( --color-white );
+	position: relative;
+
+	svg {
+		opacity: 0;
+	}
+
+	&::before,
+	&::after {
+		content: '';
+		position: absolute;
+		top: calc( 50% - #{pmc-rem(1)} );
+		left: calc( 50% - #{pmc-rem(10)} );
+		width: pmc-rem(20);
+		height: pmc-rem(2);
+		background-color: white;
+		transition: transform 600ms ease;
+		transform: rotateZ( 45deg );
+	}
+
+	&::after {
+		transform: rotateZ( -45deg );
+	}
+
+	&:hover {
+		color: var( --color-white );
+	}
+}

package/src/04-js/js-Header.common.inline.scss

@@ -0,0 +1,73 @@
+@import 'setup';
+
+// Functional styles for the sticky header. Visual styles are added with utilities
+$sticky-transform-y:    3.125rem;
+$mobile-header-height:  #{var( --sticky-nav-height )};
+
+// Package the base sticky positioning styles for use in mulitple places.
+@mixin _sticky-header-positioning {
+	position: fixed;
+	width: 100%;
+	z-index: $z-index-sticky-header;
+	transform: translateY(0);
+	top: var(--login-bar-height, 0);
+}
+
+@keyframes slideDown {
+	0% {
+		transform: translateY(-100%);
+	}
+
+	100% {
+		transform: translateY(0);
+	}
+}
+
+// Needs to slide up still - problem is that it is display: none'd and that would have to have a delay before being applied
+.js-sticky-header-slidedown {
+	@include pmc-breakpoint( desktop ) {
+		transform: translateY(-100%);
+	}
+}
+
+.is-sticky .js-sticky-header-slidedown {
+	@include pmc-breakpoint( desktop ) {
+		animation-name: slideDown;
+		animation-duration: 250ms;
+		animation-fill-mode: forwards;
+		transform: translateY(0);
+	}
+}
+
+// The data-header-sticky wrapper is not hooked up to JS, but provides the CSS transform for
+// hiding/showing the sticky header.
+.js-Header-contents {
+	position: relative;
+	transition: transform $transition-transform;
+	will-change: transform;
+
+}
+
+.has-side-skins .js-Header-contents {
+	max-width: $screen-desktop;
+}
+
+.is-sticky .js-Header-contents {
+	@include _sticky-header-positioning;
+}
+
+.js-hide-when-sticky {
+
+	.is-sticky & {
+		display: none;
+	}
+}
+
+.js-show-when-sticky {
+
+	display: none;
+
+	.is-sticky & {
+		display: block;
+	}
+}