File "editor.scss"

Full path: /home/webcknlt/admissiontell.com/wp-content/themes/fewer/src/block/editor.scss
File size: 5.19 B (5.19 KB bytes)
MIME-type: text/plain
Charset: utf-8

Download   Open   Edit   Advanced Editor &nnbsp; Back

//--------------------------------------------------------------
// EDITOR STYLES
// CSS for just Backend enqueued after style.scss
//--------------------------------------------------------------

[data-type='unicard/block-unicard'] {

	.unicard-title {
		background: $gradient-bg;
		text-align: center;
		text-transform: uppercase;

		h2 {
			color: $color-white;
			font-size: rem(20);
			font-weight: 400;
			letter-spacing: rem(1);
			margin: 0 auto;
			padding: rem(10);

			&::before {
				display: none;
			} // &::before
		}
	} // .unicard-title

	&[data-align='full'] {
		.card-image {
			max-height: rem(600);
			overflow: hidden;
		} // .card-image
	} // &[data-align='full']

	&[data-align='full'] {
		.card-image {
			max-height: rem(750);
			overflow: hidden;
		} // .card-image
	} // &[data-align='full']
} // [data-type='unicard/block-unicard']

.wp-block-unicard-block-unicard {
	border: rem(1) solid $color-dove-gray;

	&.components-panel {
		border: none;
	} // &.components-panel

	.components-radio-control__option {
		background-color: $color-white;
		display: block;
		margin: rem(10) 0;
		position: relative;

		label {
			color: $color-mineshaft;
			cursor: pointer;
			display: block;
			overflow: hidden;
			padding: rem(12) rem(20) rem(12) rem(40);
			position: relative;
			text-align: left;
			transition: color 200ms ease-in;
			width: 100%;
			z-index: 2;

			&::before {
				background: $gradient-bg;
				border-radius: 50%;
				content: '';
				height: rem(10);
				left: 50%;
				opacity: 0;
				position: absolute;
				top: 50%;
				transform: translate(-50%, -50%) scale3d(1, 1, 1);
				transition: 300ms cubic-bezier(0.4, 0, 0.2, 1);
				width: rem(10);
				z-index: -1;
			} // &::before

			&::after {
				background-color: $color-white;
				background-position: rem(2) rem(3);
				background-repeat: no-repeat;
				border: rem(1) solid $color-amaranth;
				border-radius: 50%;
				content: '';
				cursor: pointer;
				height: rem(20);
				left: rem(10);
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				transition: 500ms ease-in;
				width: rem(20);
				z-index: 2;
			} // &::after

		} // label

		input[type='radio'] {
			cursor: pointer;
			height: rem(20);
			order: 1;
			position: absolute;
			right: rem(20);
			top: 50%;
			transform: translateY(-50%);
			visibility: hidden;
			width: rem(20);
			z-index: 2;

			&:checked ~ label {
				color: $color-white;

				&::before {
					opacity: 1;
					transform: translate(-50%, -50%) scale3d(56, 56, 1);
				} // &::before

				&::after {
					background: $gradient-alt-bg;
					border-color: $color-white;
				} // &::after
			} // &:checked ~ label
		} // input[type='radio']

	} // .components-radio-control__option

	.button-container {
		width: 100%;

		.components-button {
			background: $color-white;
			border-radius: 0;
			color: $color-black;
			display: block;
			margin: 0 auto rem(10);
			min-width: 100%;
			padding: rem(10) rem(20);
			text-align: center;
			text-transform: uppercase;
		} // .button-container
	} // .button-container

	.button {
		background: $color-black;
		border-radius: rem(10);
		clear: both;
		color: $color-white;
		display: block;
		margin: rem(10) auto;
		padding: rem(10) rem(20);
		text-align: center;
		text-decoration: none;
		text-transform: uppercase;
	} // .button

	.card-image {
		display: flex;
		flex-direction: column;
		min-height: rem(90);
		position: relative;

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

		.button-container {
			height: 100%;
			position: absolute;
			width: 100%;

			.button {

				&.is-destructive {
					background: none;
					border: 0;
					box-sizing: border-box;
					color: transparent;
					cursor: pointer;
					display: inline-block;
					font-family: 'Josefin Sans', sans-serif;
					font-size: rem(18);
					left: 50%;
					letter-spacing: rem(1.5);
					line-height: 90px;
					min-width: unset;
					outline: none;
					overflow: hidden;
					padding: rem(10) 0 0;
					position: absolute;
					text-transform: uppercase;
					top: 50%;
					transform: translate(-50%, -50%);
					transition: 0.2s ease-in;
					width: rem(100);

					&::before,
					&::after {
						background: $gradient-bg;
						content: '';
						display: block;
						height: rem(1);
						left: 0;
						position: absolute;
						transform-origin: center left;
						transition: 0.2s ease-in;
						width: rem(141.4214);
						z-index: -1;
					} // // &::before, &::after

					&::before {
						top: 0;
						transform: rotate(45deg);
					} // &::before

					&::after {
						bottom: 0;
						transform: rotate(-45deg);
					} // &::after

					&.is-link {

						&:hover,
						&:active,
						&:focus {
							color: $color-white;
							outline: none;

							&::before,
							&::after {
								height: rem(50);
								transform: rotate(0deg);
							} // &::before, &::after

						} // &:hover, &:active, &:focus

					} // .is-link
				} // .is-destructive
			} // .button
		} // .button-container
	} // .card-image

} // .wp-block-unicard-block-unicard