Evangelizing corner-shape #1, powered by Augmented-UI: Prompt

evangelizing-corner-shape-1-powered-by-augmented-ui-prompt.markdown

Evangelizing corner-shape #1, powered by Augmented-UI: Prompt

Evangelizing corner-shape #1

What is this?

Just trying what I can to bring the once much talked about corner-shape back to relevance. For the first of possibly many installments, I am using augmented-ui by James0x57 to show why angled/beveled corners would be preferable for certain designs as opposed to rounded corners. Though to be fair, augmented-ui's website is quite the showcase all it's own. Seriously, go check it out.

About the pen

This is my first attempt at using augmented-ui. For this pen, I wanted to create a basic message prompt with angled corners.

Links

• augmented-ui: Home | Docs | Informal Tests | NPM | Github | Author
• CSS Backgrounds and Borders Module Level 4: Corner Shape
• Lea Verou's corner-shape preview demo

~ @seto89

A Pen by seto89 on CodePen.

License.

index.pug

input.checkbox(type="checkbox" checked aria-label="Tick the checkbox to open/close the prompt")

.message_container
	.message(augmented-ui="exe tl-clip br-clip")
		.title(augmented-ui="exe tl-clip br-clip") Attention
		p Lorem ipsum, dolor sit amet consectetur adipisicing elit. Illo, corporis eum, dolorum sed voluptate tempora unde placeat quas ut adipisci illum ab ea commodi sunt. Dolor dolorum neque facere tempora.
		
.footer(augmented-ui="tl-clip tr-clip exe")
	ul
		li Pen by <a href="https://codepen.io/seto89" target="_blank">@seto89</a>
		li <a href="https://linktr.ee/seto89" target="_blank">Linktree</a>
		li Powered by <a href="http://augmented-ui.com" target="_blank">Augmented-UI</a> by <a href="https://twitter.com/james0x57" target="_blank">James0x57</a>

style.scss

html {
	display: flex;
	min-height: 100%;
	min-height: 100vh;
}
body {
	background: #000;
	font-family: Helvetica, Arial, sans-serif;
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
}

.checkbox {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	cursor: pointer;
	color: cyan;
	--message: "Tick to open";
	--bg: transparent;
	
	position: fixed;
	top: 0;
	left: 0;
	margin: 1em;
	&:checked {
		--bg: unset;
		--message: "Untick to close";
	}
	&:before, &:after {
		content: "";
		display: inline-block;
		vertical-align: middle;
	}
	&:before {
		padding: .5em;
		background: var(--bg, cyan);
		border: 1px solid;
	}
	&:after {
		content: var(--message);
		color: #fff;
		margin-left: .5em;
	}
}

.message_container {
	filter: drop-shadow(0 0 8px cyan);
	
	.message {
		background: #000;

		--aug-border: 2px;
		--aug-border-bg: cyan;
		width: calc(100% - 20px);
		max-width: 640px;
		margin: 0 auto;
		overflow: hidden;
		transition: all .5s;
		
		.title {
			display: inline-block;
			padding: .5em 2em;

			font-weight: bold;
			letter-spacing: .1em;
			text-align: center;
			text-transform: uppercase;
			--aug-inset: .25em;
			--aug-inset-bg: #ff0;
			--aug-br: .75em;
		}
		p {
			color: #fff;
			padding: 1em;
			margin: 0;
			display: block;
			line-height: 1.4em;
			text-align: justify;
			max-height: 10em;
		}
	}
}

.checkbox {
	& ~ .message_container > .message {
		max-height: 0;
		opacity: 0;
	}
	&:checked ~ .message_container > .message {
		max-height: 300px;
		opacity: 1;
	}
}

.footer {
	background: rgba(64, 64, 64, .1);
	backdrop-filter: blur(8px);
	position: fixed;
	left: 2.5%;
	right: 2.5%;
	bottom: -2px;
	--aug-border: 2px;
	--aug-border-bg: cyan;
	
	color: #fff;
	padding: .5em;
	text-align: center;
	
	ul {
		display: block;
	}
	ul li {
		display: inline-block;
		padding: .5em 1em;
	}
	a {
		color: cyan;
		text-decoration: none;
	}
	a:hover, a:focus {
		text-decoration: underline;
	}
}

styles

<link href="https://unpkg.com/augmented-ui/augmented.css" rel="stylesheet" />