A Pen by Bryan Nichols.

index.jade

#ecmads-container
	.page-encrypt.pageContainer
		.tabflag
			.inner
				.wrap
					span.icon 
					h2.text Encrypt
					
		div.subpane
			.results
				h2 Here are your results
				.resultswrap
					.overlay
					p.resultsHash {{results}}

style.sass

@import "compass/css3"
// _tabflag.sass

// Fonts - Clearsans

// Colors
$primaryBkg: #f7f7f7
$primaryDark: #1e1a1a
$primaryLight: #f8fcdf
$grayLight: #bab1ae

$darkFontColor: $primaryDark
$lightFontColor: $primaryLight

$white: #fff
$offWhite: #f8fcdf
$orange: #ff4300

$green: #008747
$greenDark: #007a41


$duration: 200ms


@mixin drop-shadow1
	+box-shadow(0 0 12px rgba(0,0,0,.2))

@mixin drop-shadow2
	+box-shadow(0 2px 7px rgba(0,0,0,.5))
	
@mixin drop-shadow3($color)
	position: absolute
	right: 0
	+box-shadow(0 2px 7px rgba(0,0,0,.5))
	+transform(translateY(0))
	+transition(all $duration cubic-bezier(0.770, 0.000, 0.175, 1.000))

	&:active,
	&:hover
		+transform(translateY(2px))
		box-shadow: 0px 0 0px rgba(0, 0, 0, 0.5)
		background-color: lighten($color, 7%)
		// border: 1px solid lighten($greenDark, 7%)

@mixin font-family
	font-family: 'clear_sansregular', 'Helvetica', sans-serif

// _tabflag.sass

.tabflag
	position: absolute
	top: 0
	right: 0
	width: 0
	height: 0

	border-top: 78px solid #8b8b7c
	border-left: 78px solid transparent


	.inner
		position: absolute
		top: -78px
		right: 0
		width: 0
		height: 0

		border-top: 74px solid #2e2b29
		border-left: 74px solid transparent

	.text
		font-size: .6rem
		text-transform: uppercase
		color: $white
		position: absolute
		top: 12px
		right: 0
		left: 0
		text-align: center
		-webkit-font-smoothing: antialiased
		/* margin: 0 */
		
	.icon
		font-size: 13px
		font-family: fontAwesome
		color: $white
		position: absolute
		top: 3px
		right: 0
		left: 0
		text-align: center
		-webkit-font-smoothing: antialiased

	.wrap
		width: 74px
		height: 74px
		position: absolute
		top: -74px
		right: 0
		+transform(rotate(45deg))
		
		
		

html,
body
	width: 100%
	height: 100%
	min-width: 100%
	min-height: 100%
	margin: 0
	padding: 0
	overflow: hidden

#ecmads-container
	width: 100%
	height: 100%
	min-width: 100%
	min-height: 100%
	background-color: $primaryBkg
	overflow: hidden

.container 
	max-width: 420px

.pageControls,
.globalControls
	position: absolute

.pageControls
	bottom: 45px
	right: 0

#generator-form,
.pane,
.subpane
	width: 100%
	height: 100%
	+box-sizing(border-box)

#generator-form
	position: relative

.pane
	position: absolute
	left: 0
	top: 0
	bottom: 0
	padding-top: 50px

	
.pageContainer
	width: 500px
	height: 500px
	position: absolute
	top: 50%
	left: 50%
	margin-left: -250px
	margin-top: -250px
	background-color: $white
	+drop-shadow1
	padding: 40px
	/* opacity: 0 */
	+box-sizing(border-box)
	+transform(translateX(0%))

	textarea,
	input
		width: 100%
		font-size: 1.2rem
		border: 1px solid $grayLight

	textarea
		height: 150px 
		resize: none
			
			
			
			
			
			
			
			
$durationCopy: 200ms		
.page-encrypt
	.resultsHash
		font-family: Courier New
		font-size: 10px
		//trying to constrict the column count to 64
		width: 64ch

		-ms-word-break: break-all

		/* Be VERY careful with this, breaks normal words wh_erever */
		word-break: break-all

		/* Non standard for webkit */
		word-break: break-word

		-webkit-hyphens: auto
		-moz-hyphens: auto
		hyphens: auto

	.resultswrap
		position: relative
		display: inline-block
		width: 100%
		min-height: 100px

		&:after
			content: ''
			clear: both

		&:hover
			.overlay
				opacity: 1
				+transition(all $durationCopy linear)
			> button			
				opacity: 1
				+transition(all $durationCopy linear)

		.overlay
			background-color: rgba(0,0,0,.3)
			width: 100%
			height: 100%
			position: absolute
			top: 0
			left: 0
			z-index: 1
			opacity: 0
			+transition(all $durationCopy*2 linear)


		> button
			opacity: 0
			position: absolute
			left: 50%
			top: 50%
			margin-left: -50px
			margin-top: -16px
			z-index: 2
			+transition(all $durationCopy*1.5 linear)

zfgsG.markdown

zfgsG

A Pen by Bryan Nichols on CodePen.

License.