@penskemediacorp/larva-css 0.5.3 → 0.5.6

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

@@ -0,0 +1,7 @@
+@import 'setup';
+
+.lrv-a-children-link-decoration-underline\:hover {
+	& > a:hover {
+		text-decoration: underline;
+	}
+}

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

@@ -17,3 +17,20 @@ $aspect-ratios: (
 .lrv-a-crop-contain img { // Required for a-crop
 	object-fit: contain;
 }
+
+
+.lrv-a-crop-1x1\@tablet {
+	@include pmc-breakpoint( tablet ) {
+	 
+		position: relative;
+		padding-bottom: 100%;
+
+		img {
+			position: absolute;
+			width: 100%;
+			height: 100%;
+			object-fit: cover;
+		}
+		 
+	}
+} 

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

@@ -23,4 +23,10 @@
 	@include pmc-breakpoint( tablet ) {
 		float: left;
 	}
+}
+
+.lrv-a-floated-right\@tablet {
+	@include pmc-breakpoint(tablet) {
+		float: right;
+	}
 }

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

@@ -48,3 +48,7 @@
 .lrv-a-glue--b-0 {
 	--a-glue-bottom: 0;
 }
+
+.lrv-a-glue--t-100p {
+	--a-glue-top: 100%;
+}

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

@@ -23,3 +23,9 @@
 		@include _a-hidden;
 	}
 }
+
+.lrv-a-hidden\@desktop-xl-max {
+	@include pmc-breakpoint( desktop-xl-max ) {
+		@include _a-hidden;
+	}
+}

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

@@ -78,3 +78,20 @@
 .lrv-a-icon-bullet {
 	--a-icon-content: '\02022';
 }
+
+.lrv-a-icon-after-arrow-top-left {
+	&::before {
+		position: absolute;
+		content: '';
+		display: block;
+		width: pmc-rem(24);
+		height: pmc-rem(24);
+		left: 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

@@ -0,0 +1,55 @@
+@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(3);
+}
+ 
+.lrv-a-truncate-ellipsis-3line\@desktop-xl {
+	@include pmc-breakpoint( desktop-xl ) {
+		@include _a-truncate-ellipsis(3);
+	}
+}
+
+.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-link/a-unstyle-link.common.inline.scss

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

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

@@ -11,14 +11,26 @@
 	border-top-width: 1px;
 }
 
+.lrv-u-border-l-1 {
+	border-left-width: pmc-rem(1);
+}
+
 .lrv-u-border-t-3 {
 	border-top-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;
 }
@@ -27,6 +39,10 @@
 	border-width: 0;
 }
 
+.lrv-u-border-a-5 {
+	border-width: pmc-rem(5);
+}
+
 .lrv-u-border-a-1\@mobile-max {
 	@include pmc-breakpoint( mobile-max ) {
 		border-width: 1px;
@@ -49,4 +65,16 @@
 	@include pmc-breakpoint( desktop ) {
 		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);
+    }
+ }

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

@@ -66,3 +66,9 @@
 		flex-direction: column;
 	}
 }
+
+.lrv-u-flex-direction-column\@desktop-xl-max {
+	@include pmc-breakpoint(desktop-xl-max) {
+		flex-direction: column;
+	}
+}

package/src/03-utilities/u-font-size.common.inline.scss

@@ -84,4 +84,14 @@
 			}
 		}
 	}
+}
+
+.lrv-u-font-size-13 {
+	font-size: pmc-rem(13); 
+}
+
+.lrv-u-font-size-13\@mobile-max {
+	@include pmc-breakpoint( mobile-max ) {
+		font-size: pmc-rem(13);
+	}
 }

package/src/03-utilities/u-letter-spacing.common.inline.scss

@@ -0,0 +1,11 @@
+@import 'setup';
+
+.lrv-u-letter-spacing-015 {
+	letter-spacing: pmc-rem(2.4);
+}
+
+.lrv-u-letter-spacing-012\@mobile-max {
+	@include pmc-breakpoint( mobile-max ) {
+		letter-spacing: pmc-rem(1.95);
+	}
+}

package/src/03-utilities/u-list-style.common.async.scss

@@ -0,0 +1,3 @@
+.lrv-u-list-style-type-disclosure-closed {
+	list-style-type: disclosure-closed;
+}

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

@@ -146,7 +146,7 @@ $margins_with_breakpoints: (
 	('b', $spacer-050, mobile-max),
 	('tb', $spacer-0, mobile-max),
 	('tb', $spacer-1, mobile-max),
-
+	('l', $spacer-1, tablet),
 	('r', $spacer-1, tablet),
 	('r', $spacer-0, tablet),
 	('b', $spacer-1, tablet),

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

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

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

@@ -3,8 +3,11 @@
 $widths_map: (
 	'width-16': pmc-rem(16),
 	'width-30': pmc-rem(30),
+	'width-50': pmc-rem(50),
 	'width-100': pmc-rem(100),
+	'width-150': pmc-rem(150),
 	'width-200': pmc-rem(200),
+	'width-215': pmc-rem(215),
 	'width-300': pmc-rem(300),
 	'width-30p': 30%,
 	'width-50p': 50%,
@@ -15,8 +18,11 @@ $widths_map: (
 @include basic-utility-generator( 'width', (
 	width-16,
 	width-30,
+	width-50,
 	width-100,
+	width-150,
 	width-200,
+	width-215,
 	width-300,
 	width-30p,
 	width-50p,
@@ -43,4 +49,33 @@ $widths_map: (
 	@include pmc-breakpoint( desktop ) {
 		width: 75%;
 	}
+}
+
+.lrv-u-width-35\@mobile-max {
+	@include pmc-breakpoint( mobile-max ) {
+		width: pmc-rem(35);
+	}
+}	
+.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%;
+    }
 }

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