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

package/src/04-js/partials/expandable-search.scss

@@ -0,0 +1,202 @@
+@import 'setup';
+
+// Note:
+// Swiftype markup is generated dynamically, so plain CSS is used instead of
+// Larva CSS classes.
+
+// The Swiftype module appears in 3 modules, or contexts:
+// 1. header (desktop, not sticky)
+// 2. header-sticky (desktop, sticky)
+// 3. mega-menu (all sizes)
+
+// The CSS is structured like so:
+// Base styles that apply to everything added to .swiftype.
+// Style specific for each context, applied by adding specificity with .context-module .swiftype.
+// BEM modifier classes are intentionally not used because the specificity is helpful here,
+// and we can use the exiting module classes instead of creating new names for modifiers.
+
+//
+// Base module styles
+//
+.expandable-search {
+	color: var( --color-black );
+
+	$border-size: pmc-rem(2);
+	$input-width: pmc-rem(44);
+
+	.search-form {
+		display: flex;
+		position: relative;
+	}
+
+	// Search icon over input
+	.search-form::after {
+		content: '';
+		position: absolute;
+		top: 50%;
+		right: $spacer-1;
+
+		// Basically a-icon
+		content: '';
+		// search.svg from larva-svg.
+		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18'%3E%3Ctitle%3ESearch Icon%3C/title%3E%3Cpath d='M17.7 16.3l-1.5 1.5-5-5V12l-.2-.2c-1.1 1-2.6 1.6-4.2 1.6-3.6 0-6.5-2.9-6.5-6.5S3.2.4 6.8.4s6.5 2.9 6.5 6.5c0 1.6-.6 3.1-1.6 4.2l.3.3h.8l4.9 4.9zm-6.5-9.5c0-2.5-2-4.5-4.5-4.5s-4.5 2-4.5 4.5 2 4.5 4.5 4.5 4.5-2 4.5-4.5z' fill-rule='evenodd'/%3E%3C/svg%3E");
+		height: pmc-rem(24);
+		width: pmc-rem(24);
+		background-repeat: no-repeat;
+		background-size: contain;
+		transform: translateY( -50% );
+		pointer-events: none;
+		z-index: 2;
+		transition: $transition-transform transform;
+	}
+
+	.search-form > label:first-of-type {
+		position: relative;
+	}
+
+	.search-form > label:first-of-type::after {
+		content: '';
+		position: absolute;
+		bottom: pmc-rem(17);
+		left: pmc-rem(20);
+		height: pmc-rem(1);
+		background-color: map-get( $TOKENS-MAP, background-color-black );
+		width: calc(100% - 5rem);
+		display: inline-block;
+		z-index: 9;
+	}
+
+	// White swatch to cover submit text
+	.search-form::before {
+		background-color: map-get( $TOKENS-MAP, background-color-white );
+		content: '';
+		position: absolute;
+		right: $border-size;
+		top: $border-size;
+		height: calc( 100% - #{$border-size} * 2 );
+		width: $input-width;
+		z-index: 1;
+		pointer-events: none;
+	}
+
+	// Style input text to be invisible, hidden beneath search icon.
+	.search-form input[type='text'],
+	.search-form input[type='search'] {
+		border: 2px solid var( --color-black );
+		padding: $spacer-050 $spacer-125 ;
+		min-width: pmc-rem(300);
+		font-family: var( --font-family-body );
+		box-shadow: $shadow-light;
+		font-size: pmc-rem(10);
+		height: pmc-rem(62);
+		position: relative;
+		&::-webkit-input-placeholder { /* Edge */
+			color: var( --color-black );
+			text-transform: uppercase;
+		  }
+
+		&:-ms-input-placeholder { /* Internet Explorer 10-11 */
+			color: var( --color-black );
+			text-transform: uppercase;
+		  }
+
+		 &::placeholder {
+			color: var( --color-black );
+			text-transform: uppercase;
+		  }
+	}
+
+	.search-form input[type='submit'] {
+		position: absolute;
+		right: $border-size;
+		height: 100%;
+		width: $input-width;
+		overflow: hidden;
+
+		// lrv-a-unstyle-button
+		border: 0;
+		background-color: transparent;
+		cursor: pointer;
+	}
+
+	.swiftype-widget {
+		background-color: var( --background-color-body );
+		box-shadow: $shadow-medium;
+	}
+
+	.ac-section-title {
+		font-family: var( --font-family-basic );
+		padding-bottom: $spacer-025;
+		font-size: $font-size-14;
+		font-weight: var( --font-weight-bold );
+		text-transform: uppercase;
+		padding-left: $spacer-050;
+		padding-right: $spacer-050;
+	}
+
+	.autocomplete-section {
+		padding-top: $spacer-1;
+	}
+
+	.ac-result {
+		padding: $spacer-050;
+	}
+
+	.ac-result:hover,
+	.ac-result:focus {
+		color: var( --color-brand-primary );
+		background-color: var( --background-color-grey-lightest );
+		cursor: pointer;
+	}
+
+	.ac-result em {
+		font-weight: var( --font-weight-bold );
+		font-style: normal;
+	}
+
+	.ac-result {
+		border-top: 1px solid var( --color-grey-light );
+	}
+
+	.ac_title {
+		font-family: var( --font-family-primary );
+		line-height: var( --line-height-normal );
+	}
+
+	.ac_title,
+	.ac_tag {
+		font-family: var( --font-family-body );
+		font-size: $font-size-16;
+	}
+
+	.ac_sub {
+		font-family: var( --font-family-body );
+		font-size: $font-size-14;
+		font-style: italic;
+		color: var( --color-grey-dark );
+	}
+
+	.sticky-expandable {
+		.search-form {
+			&> label:first-of-type::after {
+				left: 3.2rem;
+			}
+			&::before {
+				left: 0.125rem;
+				right: unset;
+			}
+			&::after {
+				left: 1rem;
+				right: unset;
+			}
+			input[type=search] {
+				padding: .5rem 1.25rem .5rem 3.2rem;
+			}
+			input[type=submit] {
+				left: 0.125rem;
+				right: unset;
+			}
+		}
+	}
+
+}

package/src/04-js/partials/flickity.scss

@@ -0,0 +1,149 @@
+// Third party CSS, so we will disable stylelint.
+// stylelint-disable
+/*! Flickity v2.2.1 https://flickity.metafizzy.co */
+
+.flickity-enabled {
+	position: relative;
+}
+
+.flickity-enabled:focus {
+	outline: none;
+}
+
+.flickity-viewport {
+	overflow: hidden;
+	position: relative;
+	height: 100%;
+}
+
+.flickity-slider {
+	position: absolute;
+	width: 100%;
+	height: 100%;
+}
+
+/* draggable */
+
+.flickity-enabled.is-draggable {
+	-webkit-tap-highlight-color: transparent;
+	-webkit-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+.flickity-enabled.is-draggable .flickity-viewport {
+	cursor: move;
+	cursor: -webkit-grab;
+	cursor: grab;
+}
+
+.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down {
+	cursor: -webkit-grabbing;
+	cursor: grabbing;
+}
+
+/* ---- flickity-button ---- */
+
+.flickity-button {
+	position: absolute;
+	background: hsla(0, 0%, 100%, 0.75);
+	border: none;
+	color: #333;
+}
+
+.flickity-button:hover {
+	background: white;
+	cursor: pointer;
+}
+
+.flickity-button:focus {
+	outline: none;
+	box-shadow: 0 0 0 5px #19F;
+}
+
+.flickity-button:active {
+	opacity: 0.6;
+}
+
+.flickity-button:disabled {
+	opacity: 0.3;
+	cursor: auto;
+	/* prevent disabled button from capturing pointer up event. #716 */
+	pointer-events: none;
+}
+
+.flickity-button-icon {
+	fill: currentColor;
+}
+
+/* ---- previous/next buttons ---- */
+
+.flickity-prev-next-button {
+	top: 50%;
+	width: 44px;
+	height: 44px;
+	border-radius: 50%;
+	/* vertically center */
+	transform: translateY(-50%);
+}
+
+.flickity-prev-next-button.previous {
+	left: 10px;
+}
+
+.flickity-prev-next-button.next {
+	right: 10px;
+}
+
+/* right to left */
+.flickity-rtl .flickity-prev-next-button.previous {
+	left: auto;
+	right: 10px;
+}
+
+.flickity-rtl .flickity-prev-next-button.next {
+	right: auto;
+	left: 10px;
+}
+
+.flickity-prev-next-button .flickity-button-icon {
+	position: absolute;
+	left: 20%;
+	top: 20%;
+	width: 60%;
+	height: 60%;
+}
+
+/* ---- page dots ---- */
+
+.flickity-page-dots {
+	position: absolute;
+	width: 100%;
+	bottom: -25px;
+	padding: 0;
+	margin: 0;
+	list-style: none;
+	text-align: center;
+	line-height: 1;
+}
+
+.flickity-rtl .flickity-page-dots {
+	direction: rtl;
+}
+
+.flickity-page-dots .dot {
+	display: inline-block;
+	width: 10px;
+	height: 10px;
+	margin: 0 8px;
+	background: #333;
+	border-radius: 50%;
+	opacity: 0.25;
+	cursor: pointer;
+}
+
+.flickity-page-dots .dot.is-selected {
+	opacity: 1;
+}
+// stylelint-enable