@penskemediacorp/larva-css 0.7.3 → 1.0.0

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

@@ -30,6 +30,12 @@
 	}
 }
 
+.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/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;
@@ -136,3 +176,9 @@
 		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-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-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,13 +3,17 @@
 $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%,
@@ -20,13 +24,17 @@ $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,
@@ -149,4 +157,40 @@ $widths_map: (
 	@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;
+	}
+}

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

@@ -0,0 +1,50 @@
+@import 'setup';
+
+.js-MegaMenu {
+	--mega-menu-top-offset: var( --login-bar-height );
+
+	// Hidden state.
+	opacity: 0;
+	visibility: hidden;
+	pointer-events: none;
+	transform: translateY( calc( -100% - var( --mega-menu-top-offset ) ) );
+	// End hidden.
+
+	// Animation.
+	transition: opacity $transition-fade,
+	transform $transition-transform,
+	visibility $transition-transform;
+
+	// Adjust offset according to breakpoint and presence of menus.
+	@include pmc-breakpoint( desktop-max ) {
+		--mega-menu-top-offset: calc( var( --login-bar-height ) + var( --sticky-nav-height ) );
+	}
+
+}
+
+.is-mega-open body {
+	overflow: hidden;
+}
+
+// Default styling for mega menu hidden state needs to be part of critical CSS
+// and is added in patterns/generic/js-interface.scss
+
+.is-mega-open .js-MegaMenu {
+	// Toggle properties from hidden state.
+	opacity: 1;
+	visibility: visible;
+	transform: translateY(0);
+	pointer-events: initial;
+}
+
+// Move these
+.mega-menu__parent-list-item {
+	background-color: map-get( $TOKENS-MAP, black );
+	transition: background-color ease $transition-duration-300;
+}
+
+.is-expanded.mega-menu__parent-list-item {
+	@include pmc-breakpoint( desktop-max ) {
+		background-color: map-get( $TOKENS-MAP, brand-red );
+	}
+}

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

@@ -0,0 +1,17 @@
+.js-Tooltip {
+	opacity: 0;
+	visibility: hidden;
+	position: absolute;
+	top: 100%;
+	transition: opacity 0.3 cubic-bezier(0.19,1,0.22,1);
+}
+
+.is-Tooltip-open .js-Tooltip {
+	opacity: 1;
+	visibility: visible;
+}
+
+.is-Tooltip-open .lrv-a-icon-arrow-down {
+	--a-icon-transform: rotate(-180deg);
+}
+