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

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

@@ -0,0 +1,52 @@
+// Scrollable Grid
+//
+// The scrollable grid. Parent should be overflow hidden and a width of 100%.
+
+@import 'setup';
+
+:root {
+	--scrollable-grid-column-size: calc( 5vw + #{pmc-rem( 220 )} );
+}
+
+@mixin _a-scrollable-grid {
+	-webkit-overflow-scrolling: touch;
+
+	display: flex;
+	flex-wrap: nowrap;
+
+	> * {
+		width: 100%;
+		min-width: calc( 1vw + #{pmc-rem( 260 )} );
+		margin-right: $spacer-150;
+	}
+
+	@supports ( display: grid ) {
+		> * {
+			width: unset;
+			min-width: unset;
+			margin-right: unset;
+		}
+
+		display: grid;
+		grid-auto-flow: column;
+		grid-template-columns: unset; // Override what is coming from pmc-a-grid.
+		grid-auto-columns: var( --scrollable-grid-column-size ); // Set in constants.scss.
+	}
+}
+
+.lrv-a-scrollable-grid\@desktop-max {
+
+	@include pmc-breakpoint( desktop-max ) {
+		overflow-x: scroll;
+	}
+
+}
+
+.lrv-a-scrollable-grid\@desktop-max,
+.lrv-a-scrollable-grid__nested\@desktop-max {
+
+	@include pmc-breakpoint( desktop-max ) {
+		@include _a-scrollable-grid;
+	}
+
+}

package/src/02-algorithms/a-show-on-hover/a-show-on-hover.common.inline.scss

@@ -0,0 +1,16 @@
+@import 'setup';
+
+.lrv-a-show-on-hover {
+	opacity: 0;
+	visibility: hidden;
+	position: absolute;
+	top: 100%;
+	left: 0;
+	transition: opacity $transition-hover;
+}
+
+.lrv-a-show-on-hover-parent:hover .lrv-a-show-on-hover,
+.lrv-a-show-on-hover-parent:focus-within .lrv-a-show-on-hover {
+	opacity: 1;
+	visibility: visible;
+}

package/src/02-algorithms/a-space-children/a-space-children.common.inline.scss

@@ -1,56 +1,127 @@
 @import '@penskemediacorp/larva-scss/dist/tokens';
 @import '@penskemediacorp/larva-scss/dist/tools';
 
-// Tokens Stub
-$spacer-050: 0.5;
-$spacer-1:   1;
-$spacer-2:   2;
-
 :root {
 	--a-space-children-spacer: 0;
 }
 
 @mixin _a-space-children-horizontal {
-	margin-left: $spacer-050 + rem;
+	margin-left: 0.50rem;
 	margin-left: calc( var( --a-space-children-spacer ) * 1rem );
 }
 
 @mixin _a-space-children-vertical {
-	margin-top: $spacer-050 + rem;
+	margin-top: 0.50rem;
 	margin-top: calc( var( --a-space-children-spacer ) * 1rem );
 }
 
 // stylelint-disable selector-max-compound-selectors
-.pmc-a-space-children-horizontal > * + * {
+.lrv-a-space-children-horizontal > * + * {
 	@include _a-space-children-horizontal();
 }
 
-.pmc-a-space-children-horizontal\@tablet > * + * {
+.lrv-a-space-children-horizontal\@mobile-max > * + * {
+	@include pmc-breakpoint( mobile-max ) {
+		@include _a-space-children-horizontal();
+	}
+}
+
+.lrv-a-space-children-horizontal\@tablet > * + * {
 	@include pmc-breakpoint( tablet ) {
 		@include _a-space-children-horizontal();
 	}
 }
 
-.pmc-a-space-children-vertical > * + * {
+.lrv-a-space-children-horizontal\@desktop-max > * + * {
+	@include pmc-breakpoint( desktop-max ) {
+		@include _a-space-children-horizontal();
+	}
+}
+
+.lrv-a-space-children-horizontal\@desktop-xl > * + * {
+	@include pmc-breakpoint( desktop-xl ) {
+		@include _a-space-children-horizontal();
+	}
+}
+
+.lrv-a-space-children-vertical > * + * {
 	@include _a-space-children-vertical();
 }
 
-.pmc-a-space-children-vertical\@mobile-max > * + * {
+.lrv-a-space-children-vertical\@mobile-max > * + * {
 	@include pmc-breakpoint( mobile-max ) {
 		@include _a-space-children-vertical();
 	}
 }
 
+.lrv-a-space-children-vertical\@tablet > * + * {
+	@include pmc-breakpoint( tablet ) {
+		@include _a-space-children-vertical();
+	}
+}
+
+.lrv-a-space-children-vertical\@desktop > * + * {
+	@include pmc-breakpoint( desktop ) {
+		@include _a-space-children-vertical();
+	}
+}
+
 // stylelint-enable selector-max-compound-selectors
 
-.pmc-a-space-children--050 {
-	--a-space-children-spacer: #{$spacer-050};
+.lrv-a-space-children--050 {
+	--a-space-children-spacer: 0.50;
+}
+
+.lrv-a-space-children--1 {
+	--a-space-children-spacer: 1;
+}
+
+.lrv-a-space-children--150 {
+	--a-space-children-spacer: 1.5;
+}
+
+.lrv-a-space-children--2 {
+	--a-space-children-spacer: 2;
+}
+
+.lrv-a-space-children--3 {
+	--a-space-children-spacer: 3;
+}
+
+.lrv-a-space-children--2\@desktop-xl {
+	@include pmc-breakpoint( desktop-xl ) {
+		--a-space-children-spacer: 2;
+ 	}
 }
 
-.pmc-a-space-children--1 {
-	--a-space-children-spacer: #{$spacer-1};
+.lrv-a-space-children--1\@desktop-xl-max {
+	@include pmc-breakpoint( desktop-xl-max ) {
+		--a-space-children-spacer: 1;
+ 	}
+}
+
+.lrv-a-space-children--3\@desktop-xl {
+	@include pmc-breakpoint( desktop-xl ) {
+		--a-space-children-spacer: 3;
+ 	}
+}
+
+.lrv-a-space-children--4\@desktop {
+
+	@include pmc-breakpoint( desktop ) {
+		--a-space-children-spacer: 4;
+	}
+}
+
+.lrv-a-space-children--5\@desktop {
+
+	@include pmc-breakpoint( desktop ) {
+		--a-space-children-spacer: 5;
+	}
 }
 
-.pmc-a-space-children--2 {
-	--a-space-children-spacer: #{$spacer-2};
+.lrv-a-space-children--0\@desktop-xl {
+	@include pmc-breakpoint( desktop-xl ) {
+		--a-space-children-spacer: 0;
+ 	}
 }

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

@@ -0,0 +1,71 @@
+@import 'setup';
+
+.lrv-a-truncate-ellipsis {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+@mixin _a-truncate-ellipsis($line: 1) {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	display: -webkit-box;
+	-webkit-line-clamp: $line;
+	-webkit-box-orient: vertical; // stylelint-disable-line property-no-vendor-prefix
+}
+
+.lrv-a-truncate-ellipsis-1line {
+	@include _a-truncate-ellipsis(1);
+}
+
+.lrv-a-truncate-ellipsis-2line {
+	@include _a-truncate-ellipsis(2);
+}
+
+.lrv-a-truncate-ellipsis-3line {
+  	@include _a-truncate-ellipsis(3);
+}
+
+.lrv-a-truncate-ellipsis-5line {
+	@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);
+	}
+}
+
+.lrv-a-truncate-ellipsis-4line\@mobile-max {
+	@include pmc-breakpoint(desktop-xl-max) {
+		@include _a-truncate-ellipsis(4);
+	}
+}
+
+.lrv-a-truncate-ellipsis-5line\@tablet-desktop-only {
+	@media only screen and (max-width: $screen-desktop-xl) and (min-width: $screen-tablet) {
+		@include _a-truncate-ellipsis(5);
+	}
+}
+
+.lrv-a-truncate-ellipsis-5line\@desktop-xl-max {
+	@include pmc-breakpoint(desktop-xl-max) {
+		@include _a-truncate-ellipsis(5);
+	}
+}
+ 
+.lrv-a-truncate-ellipsis-1line\@tablet-desktop-only {
+	@media only screen and (max-width: $screen-desktop-xl) and (min-width: $screen-tablet) {
+		@include _a-truncate-ellipsis(1);
+	}
+}
+
+.lrv-a-truncate-ellipsis-2line\@mobile-max {
+	@include pmc-breakpoint(mobile-max) {
+		@include _a-truncate-ellipsis(2);
+	}
+}

package/src/02-algorithms/a-unstyle-button/a-unstyle-button.common.inline.scss

@@ -1,7 +1,6 @@
-.pmc-a-unstyle-button {
-	border: 0;
+.lrv-a-unstyle-button {
+	border-width: 0;
 	background-color: transparent;
-	display: block;
 	font-family: inherit;
 	font-size: inherit;
 	line-height: inherit;

package/src/02-algorithms/a-unstyle-link/a-unstyle-link.common.inline.scss

@@ -0,0 +1,7 @@
+.lrv-a-unstyle-link,
+.lrv-a-unstyle-link:hover,
+.lrv-a-unstyle-inner-links > a {
+	color: currentColor;
+	text-decoration: none;
+}
+

package/src/02-algorithms/a-unstyle-list/a-unstyle-list.common.inline.scss

@@ -1,4 +1,4 @@
-.pmc-a-unstyle-list {
+.lrv-a-unstyle-list {
 	list-style-type: none;
 	padding-left: 0;
 	margin-top: 0;

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

@@ -1,5 +1,17 @@
-.pmc-a-wrapper {
-	max-width: var( --site-max-width );
+@import 'setup';
+
+.lrv-a-wrapper {
+	max-width: $screen-desktop-xl;
+	max-width: var( --site-max-width, #{$screen-desktop-xl} );
 	margin-left: auto;
 	margin-right: auto;
+	padding-left: $spacer-050;
+	padding-right: $spacer-050;
+}
+
+.lrv-a-wrapper-100vw\@mobile-max {
+	@include pmc-breakpoint( mobile-max ) {
+    	width: 100vw;
+    	margin-left: calc(50% - 50vw);
+	}	
 }

package/src/03-utilities/u-background-color.common.async.scss

@@ -0,0 +1,15 @@
+@import 'setup';
+
+@each $token, $value in $TOKENS-MAP {
+	$token-str: quote( $token );
+
+	// example: background-color-grey-lightest, #EEEEEE
+	@if str-index( $token-str, 'background-color' ) {
+
+		.lrv-u-#{$token}\:hover:hover {
+			background-color: $value;
+			background-color: var( --#{$token}, #{$value} );
+		}
+	}
+}
+

package/src/03-utilities/u-background-color.common.inline.scss

@@ -0,0 +1,37 @@
+@import 'setup';
+
+@each $token, $value in $TOKENS-MAP {
+	$token-str: quote( $token );
+
+	@if str-index( $token-str, 'background-color' ) {
+
+		.lrv-u-#{$token} {
+			background-color: $value;
+			background-color: var( --#{$token}, #{$value} );
+		}
+	}
+}
+
+//
+// Static Utilities
+//
+
+.lrv-u-background-color-transparent {
+	background-color: transparent;
+}
+
+// Media Queries
+
+@each $token, $value in $TOKENS-MAP {
+	$token-str: quote( $token );
+
+	@if str-index( $token-str, 'background-color' ) {
+
+		.lrv-u-#{$token}\@desktop {
+			@include pmc-breakpoint( desktop ) {
+				background-color: $value;
+				background-color: var( --#{$token}, #{$value} );
+			}
+		}
+	}
+}

package/src/03-utilities/u-border-color.common.async.scss

@@ -1,7 +1,39 @@
-@import '@penskemediacorp/larva-scss/dist/tokens';
-@import '@penskemediacorp/larva-scss/dist/tools';
+@import 'setup';
 
-.pmc-u-border-color-grey-medium-light {
-	border-color: #{map-get( $semantic-color-list, grey-medium-light )};
-	border-color: var( --color-grey-medium-light );
-}
+@each $token, $value in $TOKENS-MAP {
+	$token-str: quote( $token );
+
+	@if str-index( $token-str, 'border-color' ) {
+		.lrv-u-#{$token} {
+			border-color: $value;
+			border-color: var( --#{$token}, #{$value} );
+		}
+
+		.lrv-u-#{$token}\:hover:hover {
+			border-color: $value;
+			border-color: var( --#{$token}, #{$value} );
+		}
+	}
+}
+
+.lrv-u-border-color-currentColor {
+	border-color: currentColor;
+}
+
+//
+// Media Queries
+//
+
+@each $token, $value in $TOKENS-MAP {
+	$token-str: quote( $token );
+
+	@if str-index( $token-str, 'border-color' ) {
+
+		.lrv-u-#{$token}\@desktop {
+			@include pmc-breakpoint( desktop ) {
+				border-color: $value;
+				border-color: var( --#{$token}, #{$value} );
+			}
+		}
+	}
+}

package/src/03-utilities/u-border-radius.common.async.scss

@@ -0,0 +1,27 @@
+.lrv-u-border-radius-50p {
+	border-radius: 50%;
+}
+
+.lrv-u-border-radius-100 {
+	border-radius: 100px;
+}
+
+.lrv-u-border-radius-5 {
+	border-radius: 5px;
+}
+
+.lrv-u-border-radius-br-5 {
+	border-bottom-right-radius: 5px;
+}
+
+.lrv-u-border-radius-bl-5 {
+	border-bottom-left-radius: 5px;
+}
+
+.lrv-u-border-radius-tr-5 {
+	border-top-right-radius: 5px;
+}
+
+.lrv-u-border-radius-tl-5 {
+	border-top-left-radius: 5px;
+}

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

@@ -1,3 +1,216 @@
-.pmc-u-border-a-1 {
-	border: 1px solid;
-}
+@import '@penskemediacorp/larva-scss/dist/tools';
+
+// TODO: Border widths should be generated from tokens,
+// similar to spacing.
+
+.lrv-u-border-b-1 {
+	border-bottom-width: 1px;
+}
+
+.lrv-u-border-t-1 {
+	border-top-width: 1px;
+}
+
+.lrv-u-border-l-1 {
+	border-left-width: pmc-rem(1);
+}
+
+.lrv-u-border-r-1 {
+	border-right-width: pmc-rem(1);
+}
+
+.lrv-u-border-t-2 {
+	border-top-width: 2px;
+}
+
+.lrv-u-border-t-3 {
+	border-top-width: 3px;
+}
+
+.lrv-u-border-b-3 {
+	border-bottom-width: 3px;
+}
+
+.lrv-u-border-t-5 {
+	border-top-width: pmc-rem(5);
+}
+
+.lrv-u-border-a-1 {
+	border-width: 1px;
+}
+
+.lrv-u-border-a-2 {
+	border-width: pmc-rem(2);
+}
+
+.lrv-u-border-a-3 {
+	border-width: 3px;
+}
+
+.lrv-u-border-a-0 {
+	border-width: 0;
+}
+
+.lrv-u-border-a-5 {
+	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-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;
+	}
+
+	.lrv-u-border-l-00\@mobile-max {
+		border-left-width: 0px;
+	}
+
+	.lrv-u-border-r-00\@mobile-max {
+		border-right-width: 0px;
+	}
+
+	.lrv-u-border-t-1\@mobile-max {
+		border-top-width: 1px;
+	}
+
+	.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 {
+	@include pmc-breakpoint( mobile-max ) {
+		border-top-width: 1px;
+	}
+}
+
+.lrv-u-border-t-0\@desktop {
+	@include pmc-breakpoint( desktop ) {
+		border-top-width: 0px;
+	}
+}
+
+@include pmc-breakpoint( desktop ) {
+	.lrv-u-border-a-0\@desktop {
+		border-width: 0;
+	}
+	
+	.lrv-u-border-t-3\@desktop {
+		border-top-width: 3px;
+	}
+
+	.lrv-u-border-b-3\@desktop {
+		border-bottom-width: 3px;
+	}
+}
+
+.lrv-u-border-l-1\@desktop {
+	@include pmc-breakpoint( desktop ) {
+		border-left-width: 1px;
+	}
+}
+
+.lrv-u-border-r-1\@desktop {
+	@include pmc-breakpoint( desktop ) {
+		border-right-width: 1px;
+	}
+}
+
+.lrv-u-border-r-1\@tablet {
+	@include pmc-breakpoint( tablet ) {
+		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;
+	}
+}
+
+.lrv-u-border-r-1\@desktop-xl {
+	@include pmc-breakpoint( desktop-xl ) {
+		border-right-width: 1px;
+	}
+}
+
+.lrv-u-border-t-1\@desktop-xl-max {
+    @include pmc-breakpoint( desktop-xl-max ) {
+        border-top-width: pmc-rem(1);
+    }
+}
+
+.lrv-u-border-t-050\@desktop-xl-max {
+	@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);
+	}
+ }
+
+.lrv-u-border-t-1\@tablet {
+	@include pmc-breakpoint( tablet ) {
+		border-top-width: pmc-rem(1);
+	}
+}
+
+.lrv-u-border-t-0\@desktop-xl {
+	@include pmc-breakpoint( desktop-xl ) {
+		border-top-width: pmc-rem(0);
+	}
+}
+
+.lrv-u-border-t-1\@desktop-xl {
+	@include pmc-breakpoint( desktop-xl ) {
+		border-top-width: pmc-rem(1);
+	}
+}