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

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

@@ -1,62 +1,167 @@
-@import '@penskemediacorp/larva-scss/dist/tokens';
-@import '@penskemediacorp/larva-scss/dist/generators';
-
-$paddings_without_breakpoints: (
-
-	// Top
-	('t', $spacer-050),
-	('t', $spacer-1),
-	('t', $spacer-2),
-
-	// Right
-	('r', $spacer-025),
-	('r', $spacer-050),
-	('r', $spacer-1),
-	('r', $spacer-0),
-
-	// Bottom
-	('b', $spacer-0),
-	('b', $spacer-025),
-	('b', $spacer-050),
-	('b', $spacer-1),
-	('b', $spacer-2),
-
-	// Left
-	('t', $spacer-025),
-	('l', $spacer-1),
-	('l', $spacer-2),
-
-	// Left/Right
-	('lr', $spacer-025),
-	('lr', $spacer-050),
-	('lr', $spacer-1),
-	('lr', $spacer-2),
-
-	// Top/Bottom
-	('tb', $spacer-025),
-	('tb', $spacer-050),
-	('tb', $spacer-075),
-	('tb', $spacer-1),
-	('tb', $spacer-2),
-
-	// All
-	('a', $spacer-0),
-	('a', $spacer-025),
-	('a', $spacer-050),
-	('a', $spacer-1),
-	('a', $spacer-2),
+@import 'setup';
 
+$breakpoints: (
+	'',
+	'mobile-max',
+	'desktop',
+	'desktop-xl'
 );
 
-@include pmc-u-padding( $paddings_without_breakpoints );
+.lrv-u-padding-t-150\@tablet {
+	@include pmc-breakpoint( tablet ) {
+		padding-top: $spacer-150;
+	}
+}
 
-// Ordered by breakpoint.
+@mixin _u-padding( $token-name, $token-selector, $value, $breakpoint-suffix: '' ) {
+
+	.lrv-u-padding-r-#{$token-selector}#{$breakpoint-suffix} {
+		padding-right: $value;
+		padding-right: var( --#{$token-name}, #{$value} );
+	}
+
+	.lrv-u-padding-l-#{$token-selector}#{$breakpoint-suffix} {
+		padding-left: $value;
+		padding-left: var( --#{$token-name}, #{$value} );
+	}
+
+	.lrv-u-padding-b-#{$token-selector}#{$breakpoint-suffix} {
+		padding-bottom: $value;
+		padding-bottom: var( --#{$token-name}, #{$value} );
+	}
+
+	.lrv-u-padding-t-#{$token-selector}#{$breakpoint-suffix} {
+		padding-top: $value;
+		padding-top: var( --#{$token-name}, #{$value} );
+	}
+
+	.lrv-u-padding-tb-#{$token-selector}#{$breakpoint-suffix} {
+		padding-top: $value;
+		padding-top: var( --#{$token-name}, #{$value} );
+		padding-bottom: $value;
+		padding-bottom: var( --#{$token-name}, #{$value} );
+	}
+
+	.lrv-u-padding-lr-#{$token-selector}#{$breakpoint-suffix} {
+		padding-left: $value;
+		padding-left: var( --#{$token-name}, #{$value} );
+		padding-right: $value;
+		padding-right: var( --#{$token-name}, #{$value} );
+	}
+
+	.lrv-u-padding-a-#{$token-selector}#{$breakpoint-suffix} {
+		padding: $value;
+		padding: var( --#{$token-name}, #{$value} );
+	}
+}
+
+@each $breakpoint in $breakpoints {
+
+	@each $token, $value in $TOKENS-MAP {
+
+		$token-str: quote( $token );
+
+		// No negative spacing for padding
+		@if str-index( $token-str, 'spacing' ) and not str-index( $token-str, 'spacing-n' ) and not str-index( $token-str, 'letter-spacing' ) {
+
+			$token-name: $token;
+			$token-selector: str-replace( $token-str, 'spacing-', '' );
+
+			@if '' == $breakpoint {
+				@include _u-padding( $token-name, $token-selector, $value );
+			} @else {
+
+				$breakpoint-suffix: '\\@#{$breakpoint}';
+
+				@include pmc-breakpoint( $breakpoint ) {
+					@include _u-padding( $token-name, $token-selector, $value, $breakpoint-suffix );
+				}
+			}
+
+		}
+	}
+}
+
+
+// Legacy - should not have tablet and mobile-max
 $paddings_with_breakpoints: (
+	('l', $spacer-3 ),
+
 	('tb', $spacer-025, mobile-max ),
+	('tb', $spacer-1, mobile-max),
 
+	('t', $spacer-075, tablet ),
+	('b', $spacer-075, tablet ),
+	('r', $spacer-1, tablet ),
+	('r', $spacer-2, tablet ),
+	('l', $spacer-2, tablet ),
+	('b', $spacer-3, tablet ),
 	('t', $spacer-050, tablet ),
-	
-	('tb', $spacer-050, desktop ),
+	('lr', $spacer-1, tablet ),
+
+	('tb', $spacer-050, desktop-max),
 );
 
-@include pmc-u-padding( $paddings_with_breakpoints );
+@include u-padding( $paddings_with_breakpoints, $NAMESPACE: 'lrv-' );
+
+.lrv-u-padding-b-150\@desktop-xl-max {
+	@include pmc-breakpoint( desktop-xl-max ) {
+		padding-bottom: $spacer-150;
+	}
+}
+
+.lrv-u-padding-b-150\@tablet {
+	@include pmc-breakpoint( tablet ) {
+		padding-bottom: $spacer-150;
+	}
+}
+
+.lrv-u-padding-t-175\@tablet {
+	@include pmc-breakpoint( tablet ) {
+		padding-top: $spacer-175;
+	}
+}
+
+.lrv-u-padding-tb-175\@desktop {
+	@include pmc-breakpoint( desktop ) {
+		padding-top: $spacer-175;
+		padding-bottom: $spacer-175;
+	}
+}
+
+.lrv-u-padding-t-175\@desktop-xl-max {
+	@include pmc-breakpoint( desktop-xl-max ) {
+		padding-top: $spacer-175;
+	}
+}
+
+.lrv-u-padding-t-150\@desktop-xl-max {
+	@include pmc-breakpoint( desktop-xl-max ) {
+		padding-top: $spacer-150;
+	}
+}
+
+.lrv-u-padding-b-3\@desktop-xl {
+	@include pmc-breakpoint( desktop-xl ) {
+		padding-bottom: $spacer-3;
+	}
+}
+
+.lrv-u-padding-t-175\@desktop-xl {
+	@include pmc-breakpoint( desktop-xl ) {
+		padding-top: $spacer-175;
+	}
+}
+
+.lrv-u-padding-tb-250\@desktop-xl {
+	@include pmc-breakpoint( desktop-xl ) {
+		padding-top: $spacer-250;
+		padding-bottom: $spacer-250;
+	}
+}
+
+.lrv-u-padding-t-250\@desktop-xl {
+	@include pmc-breakpoint( desktop-xl ) {
+		padding-top: $spacer-250;
+	}
+}

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

@@ -0,0 +1,11 @@
+@import 'setup';
+
+.lrv-u-position-relative {
+	position: relative;
+}
+
+@include pmc-breakpoint( desktop ) {
+	.lrv-u-position-absolute\@desktop {
+		position: absolute;
+	}	
+}

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

@@ -1,17 +1,40 @@
 @import '@penskemediacorp/larva-scss/dist/tools';
 
-.pmc-u-text-align-center {
+.lrv-u-text-align-right {
+	text-align: right;
+}
+
+.lrv-u-text-align-left {
+	text-align: left;
+}
+
+.lrv-u-text-align-center {
 	text-align: center;
 }
 
-.pmc-u-text-align-center\@mobile-max {
+@include pmc-breakpoint( desktop ) {
+	.lrv-u-text-align-right\@desktop {
+		text-align: right;
+	}
+
+	.lrv-u-text-align-left\@desktop {
+		text-align: left;
+	}
+
+	.lrv-u-text-align-center\@desktop {
+		text-align: center;
+	}
+}
+
+// Legacy
+.lrv-u-text-align-center\@mobile-max {
 	@include pmc-breakpoint( mobile-max ) {
 		text-align: center;
 	}
 }
 
-.pmc-u-text-align-center\@tablet {
+.lrv-u-text-align-center\@tablet {
 	@include pmc-breakpoint( tablet ) {
 		text-align: center;
 	}
-}
+}

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

@@ -0,0 +1,11 @@
+@import '@penskemediacorp/larva-scss/dist/tools';
+
+.lrv-u-text-decoration-underline {
+	text-decoration: underline;
+	text-decoration-color: currentColor;
+}
+
+.lrv-u-text-decoration-underline\:hover:hover {
+	text-decoration: underline;
+	text-decoration-color: currentColor;
+}

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

@@ -1,3 +1,15 @@
-.pmc-u-text-transform-uppercase {
+.lrv-u-text-transform-uppercase {
 	text-transform: uppercase;
-}
+}
+
+.lrv-u-text-transform-initial {
+	text-transform: initial;
+}
+
+.lrv-u-text-transform-lowercase {
+	text-transform: lowercase;
+}
+
+.lrv-u-text-transform-capitalize {
+	text-transform: capitalize;
+}

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

@@ -0,0 +1,7 @@
+@import 'setup';
+
+@include pmc-breakpoint(desktop) {
+	.lrv-u-top-n33\@desktop {
+		top: pmc-rem(-33);
+	}
+}	

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

@@ -0,0 +1,12 @@
+@import 'setup';
+
+.lrv-u-transform-translateY-n50p {
+	transform: translateY(-50%);
+}
+
+@include pmc-breakpoint( desktop ) {
+	.lrv-u-transform-translateX-n50p\@desktop {
+		transform: translateX(-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-whitespace.common.inline.scss

@@ -1,3 +1,3 @@
-.pmc-u-whitespace-nowrap {
+.lrv-u-whitespace-nowrap {
 	white-space: nowrap;
 }

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

@@ -1,24 +1,210 @@
-@import '@penskemediacorp/larva-scss/dist/tools';
+@import 'setup';
 
-.pmc-u-width-16 {
-	width: pmc-rem(16);
+$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-' );
+
+.lrv-u-width-35\@mobile-max {
+	@include pmc-breakpoint( mobile-max ) {
+		width: pmc-rem(35);
+	}
 }
 
-.pmc-u-width-100p {
-	width: 100%;
+.lrv-u-width-100\@mobile-max {
+	@include pmc-breakpoint( mobile-max ) {
+		width: pmc-rem(100);
+	}
 }
 
-.pmc-u-max-width-100p {
-	max-width: 100%;
+.lrv-u-width-100p\@mobile-max {
+	@include pmc-breakpoint( mobile-max ) {
+		width: 100%;
+	}
 }
 
-.pmc-u-width-100p\@mobile-max {
+.lrv-u-width-150\@desktop {
+	@include pmc-breakpoint( desktop ) {
+		width: pmc-rem(150);
+	}
+}
 
-	@include pmc-breakpoint( mobile-max ) {
+.lrv-u-width-38p\@desktop {
+	@include pmc-breakpoint( desktop ) {
+		width: 38%;
+	}
+}
+
+.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%;
 	}
 }
 
-.pmc-u-max-width-150 {
-	max-width: 9.375rem;
-}
+.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;
+	}
+}