@penskemediacorp/larva-css 1.6.0-alpha.0 → 1.6.0

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

@@ -1,20 +1,204 @@
-@import '@penskemediacorp/larva-scss/dist/tools';
+@import 'setup';
 
-.pmc-u-width-100p {
-	width: 100%;
-}
+$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-185': pmc-rem(185),
+	'width-165': pmc-rem(165),
+	'width-200': pmc-rem(200),
+	'width-215': pmc-rem(215),
+	'width-245': pmc-rem(245),
+	'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%,
+);
+
+@include basic-utility-generator( 'width', (
+	width-auto,
+	width-16,
+	width-24,
+	width-30,
+	width-50,
+	width-100,
+	width-150,
+	width-185,
+	width-165,
+	width-200,
+	width-215,
+	width-245,
+	width-300,
+	width-20p,
+	width-22p,
+	width-30p,
+	width-50p,
+	width-70p,
+	width-75p,
+	width-100p,
+), $widths_map, $NAMESPACE: 'lrv-' );
 
-.pmc-u-max-width-100p {
-	max-width: 100%;
+.lrv-u-width-35\@mobile-max {
+	@include pmc-breakpoint( mobile-max ) {
+		width: pmc-rem(35);
+	}
 }
 
-.pmc-u-width-100p\@mobile-max {
+.lrv-u-width-100\@mobile-max {
+	@include pmc-breakpoint( mobile-max ) {
+		width: pmc-rem(100);
+	}
+}
 
+.lrv-u-width-100p\@mobile-max {
 	@include pmc-breakpoint( mobile-max ) {
 		width: 100%;
 	}
 }
 
-.pmc-u-max-width-150 {
-	max-width: 9.375rem;
-}
+.lrv-u-width-150\@desktop {
+	@include pmc-breakpoint( desktop ) {
+		width: pmc-rem(150);
+	}
+}
+
+.lrv-u-width-50p\@desktop {
+	@include pmc-breakpoint( desktop ) {
+		width: 50%;
+	}
+}
+
+.lrv-u-width-75p\@desktop {
+	@include pmc-breakpoint( desktop ) {
+		width: 75%;
+	}
+}
+
+.lrv-u-width-100\@desktop-xl {
+	@include pmc-breakpoint( desktop-xl ) {
+		width: pmc-rem(100);
+	}
+}
+
+.lrv-u-width-154\@desktop-xl {
+
+	@include pmc-breakpoint(desktop-xl) {
+		width: pmc-rem(154);
+	}
+}
+
+.lrv-u-width-177\@tablet-and-desktop-only {
+
+	@media only screen and (max-width: $screen-desktop-xl) and (min-width: $screen-tablet) {
+		width: pmc-rem(177);
+	}
+}
+
+.lrv-u-width-36p\@desktop-xl {
+
+	@include pmc-breakpoint(desktop-xl) {
+		width: 36%;
+	}
+}
+
+.lrv-u-width-64p\@desktop-xl {
+
+    @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%;
+	}
+}
+
+.lrv-u-max-width-830 {
+	max-width: pmc-rem(830);	
+}

package/src/04-js/README.md

@@ -0,0 +1,5 @@
+## CSS related to JS functionality
+
+If a file here includes a .chunk.inline|async.scss extension, then it is built and distributed as CSS from larva-css. If it does not include that extension, it must be included and built in the consuming project.
+
+In the future, consider moving this CSS to the larva-js package.

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

@@ -0,0 +1,15 @@
+@import 'setup';
+
+[data-collapsible].is-expanded [data-collapsible-toggle]:not([data-collapsible-toggle='always-show']) { // stylelint-disable-line selector-max-specificity
+	display: none;
+}
+
+[data-collapsible]:not(.is-expanded) [data-collapsible-panel] {
+	display: none;
+}
+
+[data-collapsible]:not(.is-expanded) [data-collapsible-panel][data-collapsible-breakpoint='mobile-only'] { // stylelint-disable-line selector-max-specificity
+	@include pmc-breakpoint( desktop ) {
+		display: block;
+	}
+}

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-Flickity.common.async.scss

@@ -0,0 +1,91 @@
+@import 'setup';
+@import 'partials/flickity';
+
+.js-Flickity--100p .js-Flickity-cell {
+	width: 100%;
+}
+
+// TODO: Update class name, enable js-Flickity on profile page as well.
+.js-Flickity--profile .js-Flickity-cell {
+	width: 75%;
+
+	@include pmc-breakpoint( desktop ) {
+		width: 50%;
+	}
+
+	@include pmc-breakpoint( desktop-xl ) {
+		width: 33.3%;
+	}
+}
+
+// Flickity sizing in descending order.
+// Flickity-thirds is actually 2/3.
+.js-Flickity--thirds .js-Flickity-cell {
+	width: 66%;
+	overflow: visible;
+}
+
+.js-Flickity--fifths .js-Flickity-cell {
+	width: 35%;
+
+	@include pmc-breakpoint( desktop ) {
+		width: 20%;
+	}
+}
+
+.js-Flickity--one-thirds .js-Flickity-cell {
+	width: 33%;
+	overflow: visible;
+}
+
+.js-Flickity--fourths .js-Flickity-cell {
+	width: 25%;
+	overflow: visible;
+}
+
+.js-Flickity--enlarge-selected .js-Flickity-cell {
+	transform: scale(0.8);
+	transition: $transition-transform transform;
+	transform-origin: center center;
+}
+
+.js-Flickity--enlarge-selected .js-Flickity-cell.is-selected { // stylelint-disable-line selector-max-class
+	transform: scale(1);
+	z-index: 9;
+	transform-origin: center center;
+}
+
+
+.js-Flickity--nav-top-right {
+	--button-size: 0; // Hide arrows for mobile screen.
+
+	margin-top: var( --button-size );
+
+	@include pmc-breakpoint( tablet ) {
+		--button-size: #{pmc-rem(44)};
+	}
+}
+
+.js-Flickity--nav-top-right .flickity-prev-next-button {
+	top: calc( var( --button-size ) * -1 );
+	height: var( --button-size );
+	width: var( --button-size );
+}
+
+.js-Flickity--nav-top-right .flickity-prev-next-button.previous { // stylelint-disable-line selector-max-class
+	left: calc( 100% - ( var( --button-size ) * 2.5 ) );
+}
+
+.js-Flickity--bordered-buttons .flickity-button {
+	border: 1px solid map-get( $TOKENS-MAP, color-black );
+}
+
+.js-Flickity--bordered-buttons .flickity-icon {
+	fill: map-get( $TOKENS-MAP, color-black );
+}
+
+.js-Flickity--hide-nav\@mobile-max .flickity-button {
+	@include pmc-breakpoint( mobile-max ) {
+		display: none;
+	}
+}

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-MobileHeightToggle.common.inline.scss

@@ -1,17 +1,19 @@
 @import '@penskemediacorp/larva-scss/dist/tools';
 
 @include pmc-breakpoint( mobile-max ) {
-	.pmc-js-MobileHeightToggle .pmc-js-MobileHeightToggle-target {
+
+	.lrv-js-MobileHeightToggle .lrv-js-MobileHeightToggle-target {
 		height: 0;
 		visibility: hidden;
+		overflow: hidden;
 	}
-	
-	.pmc-js-MobileHeightToggle.is-expanded .pmc-js-MobileHeightToggle-target {
+
+	.lrv-js-MobileHeightToggle.is-expanded .lrv-js-MobileHeightToggle-target { // stylelint-disable-line selector-max-class
 		height: auto;
 		visibility: visible;
 	}
 
-	.pmc-js-MobileHeightToggle.is-expanded .a-icon-arrow-down.a-icon-after::after { // stylelint-disable-line selector-max-specificity
+	.lrv-js-MobileHeightToggle.is-expanded .lrv-a-icon-arrow-down.lrv-a-icon-after::after { // stylelint-disable-line selector-max-specificity, selector-max-class
 		--a-icon-transform: rotate(180deg);
 	}
-}
+}

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

@@ -0,0 +1,13 @@
+.js-PopOver-target {
+	opacity: 0;
+    visibility: hidden;
+    position: absolute;
+    top: 100%;
+    left: 0;
+    transition: opacity 300ms cubic-bezier(0.19, 1, 0.22, 1);
+}
+
+.js-PopOver-is-opened {
+    opacity: 1;
+    visibility: visible;
+}

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);
+}
+

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

@@ -0,0 +1,33 @@
+@import 'setup';
+
+[data-video-showcase-active-text] {
+	border: 2px solid transparent;
+}
+
+// stylelint-disable selector-max-specificity
+#jwplayerContainer,
+[data-video-showcase-iframe] {
+	position: absolute;
+	width: 100%;
+	height: 100%;
+}
+// stylelint-enable selector-max-specificity
+
+[data-video-showcase-trigger].is-playing [data-video-showcase-active-text] {
+	border-color: map-get( $TOKENS-MAP, color-brand-primary );
+
+	&::after {
+		content: attr(data-video-showcase-active-text);
+		position: absolute;
+		color: map-get( $TOKENS-MAP, color-white );
+		bottom: 0;
+		left: 0;
+		width: 100%;
+		text-align: center;
+		background-color: map-get( $TOKENS-MAP, background-color-brand-primary );
+		background-color: var( --background-color-brand-primary );
+		padding-top: $spacer-025;
+		padding-bottom: $spacer-025;
+		font-size: $font-size-14; // stylelint-disable-line property-blacklist
+	}
+}