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-team-member.scss

.jet-team-member {
	&__inner {
		display: flex;
		flex-flow: column nowrap;
		justify-content: center;
		align-items: center;
	}

	&__image {
		position: relative;

		img.jet-team-member__img-tag {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
	}

	&__image {
		width: 100%;
	}

	&__figure {
		width: 100%;
		height: 100%;
		overflow: hidden;
		line-height: 0;
	}

	&__cover {
		display: flex;
		flex-flow: column nowrap;
		justify-content: center;
		align-items: center;
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;

		&:empty {
			display: none;
		}

		> * {
			z-index: 1;
		}

		&:before {
			display: block;
			position: absolute;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			z-index: 0;
			content: '';
		}

		&:after {
			display: block;
			position: absolute;
			width: 0;
			height: 0;
			border-style: solid;
			border-width: 10px 10px 0 10px;
			bottom: -10px;
			content: none;
		}
	}

	&__content {
		position: relative;
		display: flex;
		flex-flow: column nowrap;
		justify-content: center;
		align-items: center;
		width: 100%;

		&:empty {
			display: none;
		}
	}

	&__name {
		align-self: stretch;
		text-align: center;
		max-width: 100%;
	}

	&__position {
		max-width: 100%;
	}

	&__desc {
		max-width: 100%;
	}

	&__button-container {
		display: flex;
		justify-content: center;
		width: 100%;
	}

	&__button {

	}

	&__socials {
		display: flex;
		flex-flow: row wrap;
		justify-content: center;
		align-items: center;
	}

	&__socials-item {
		.inner {
			display: flex;
			flex-flow: column nowrap;
			justify-content: center;
			align-items: center;
		}
	}

	&.jet-team-member--cover-hint {
		.jet-team-member__image {

		}

		.jet-team-member__cover {
			top: auto;
			height: auto;
			bottom: 100%;
			padding-bottom: 12px;

			&:before {
				height: calc( 100% - 12px );
			}

			&:after {
				bottom: 2px;
			}
		}
	}

	&.jet-team-member--hint-corner {
		.jet-team-member__cover {
			&:after {
				content: '';
			}
		}
	}

	&.jet-team-member--cover-hover {
		.jet-team-member__cover {
			opacity: 0;
			pointer-events: none;
			transition: opacity 0.3s cubic-bezier(.69,.1,.33,.9);
			transition-delay: .2s;
		}

		.jet-team-member__image {
			&:hover {
				.jet-team-member__cover {
					opacity: 1;
					pointer-events: auto;
					transition-delay: 0s;
				}
			}
		}
	}
}