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

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

@@ -0,0 +1,26 @@
+.lrv-a-counter {
+	counter-reset: a-counter;
+}
+
+.lrv-a-counter-increment {
+	counter-increment: a-counter;
+}
+
+.lrv-a-counter-before::before {
+	content: counter( a-counter );
+	display: var( --a-counter__display, inline-block);
+	padding: var( --a-counter__padding, initial );
+	background-color: var( --a-counter__background-color, initial );
+	color: var( --a-counter__color, inherit );
+	border-top-right-radius: var( --a-counter__border-top-right-radius, inherit );
+	font-family: var( --a-counter__font-family, inherit );
+	font-size: var( --a-counter__font-size, inherit ); // stylelint-disable-line property-blacklist
+	line-height: var( --a-counter__line-height, 0.7 );
+	font-weight: var( --a-counter__font-weight, inherit ); // stylelint-disable-line property-blacklist
+	z-index: 1;
+	position: var( --a-counter__position, initial );
+	left: var( --a-counter__left, auto );
+	top: var( --a-counter__top, auto );
+	right: var( --a-counter__right, auto );
+	bottom: var( --a-counter__bottom, auto );
+}

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

@@ -18,6 +18,21 @@ $aspect-ratios: (
 	object-fit: contain;
 }
 
+.lrv-a-crop-1x1\@mobile-max {
+	@include pmc-breakpoint( mobile-max ) {
+	 
+		position: relative;
+		padding-bottom: 100%;
+
+		img {
+			position: absolute;
+			width: 100%;
+			height: 100%;
+			object-fit: cover;
+		}
+		 
+	}
+}
 
 .lrv-a-crop-1x1\@tablet {
 	@include pmc-breakpoint( tablet ) {

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,25 @@ $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 ),
+		breakpoint: desktop-xl,
+	),
 	(
 		columns: 5,
 		breakpoint: desktop,

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,15 +27,31 @@
 }
 
 .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);
 	}
 }
 
+.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);

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

@@ -47,12 +47,78 @@
 	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;
+	}
+
+	.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;
@@ -63,29 +129,33 @@
 	.lrv-u-border-a-0\@desktop {
 		border-width: 0;
 	}
+	
+	.lrv-u-border-t-3\@desktop {
+		border-top-width: 3px;
+	}
 }
 
-.lrv-u-border-r-1\@desktop {
+.lrv-u-border-l-1\@desktop {
 	@include pmc-breakpoint( desktop ) {
-		border-right-width: 1px;
+		border-left-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-r-1\@tablet {
+	@include pmc-breakpoint( tablet ) {
+		border-right-width: 1px;
+	}
+}
 
- .lrv-u-border-t-050\@desktop-xl-max {
-    @include pmc-breakpoint( desktop-xl-max ) {
-        border-top-width: pmc-rem(1);
-    }
- }
+.lrv-u-border-r-1\@desktop {
+	@include pmc-breakpoint( desktop ) {
+		border-right-width: 1px;
+	}
+}
 
- .lrv-u-border-l-1\@desktop {
+.lrv-u-border-b-1\@desktop {
 	@include pmc-breakpoint( desktop ) {
-		border-left-width: 1px;
+		border-bottom-width: 1px;
 	}
 }
 
@@ -95,8 +165,20 @@
 	}
 }
 
-.lrv-u-border-t-1\@mobile-max {
-	@include pmc-breakpoint( mobile-max ) {
-		border-top-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);
+	}
+ }

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,8 +27,10 @@
 		($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)
 		($font-size-18, mobile-max)
 		($font-size-22, mobile-max)
 		($font-size-26, 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;
+	}
+}