Learn more  » Push, build, and install  RubyGems npm packages Python packages Maven artifacts PHP packages Go Modules Bower components Debian packages RPM packages NuGet packages

jsarnowski / jsarnowski/jet-elements   php

Repository URL to install this package:

/ scss / addons / _jet-headline.scss

.jet-headline {
	&,
	& .jet-headline__link {
		display: flex;
		flex-flow: row wrap;
		justify-content: flex-start;
		align-items: center;
	}

	&--direction-horizontal {
		&,
		& .jet-headline__link {
			flex-flow: row wrap;
			justify-content: center;
			align-items: center;
		}

		& .jet-headline__link {
			flex-grow: 1;
			max-width: 100%;
		}
	}

	&--direction-vertical {
		&,
		& .jet-headline__link {
			flex-flow: column nowrap;
			justify-content: center;
			align-items: center;
		}

		& .jet-headline__link {
			align-self: stretch;
		}

		.jet-headline__divider {
			width: 100%;
		}
	}

	&__first {
		display: flex;
		flex-flow: row nowrap;
		justify-content: flex-start;
		align-items: center;
	}

	&__second {
		display: flex;
		flex-flow: row nowrap;
		justify-content: flex-start;
		align-items: center;
	}

	&__divider {
		flex: 1 1 auto;
	}

	&__deco {
		&-icon {
			display: flex;
			flex-flow: column nowrap;

			svg {
				width: 1em;
				height: 1em;
			}
		}

		&-image {
			position: relative;
			width: 50px;
			height: 50px;
			line-height: 0;

			img {
				width: 100% !important;
				height: 100% !important;
				object-fit: cover;
			}
		}
	}

	.headline__part--image-text {
		.jet-headline__label {
			-webkit-background-clip: text;
			background-clip: text;
			color: transparent !important;
			background-position: center;
			background-size: cover;
		}
	}
}