Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                .login-form
	h1 Formulaire de connexion
	form(method='post', action='')
		label(for='username') Pseudonyme
		input#username(type='text', name='username', placeholder='Pseudonyme')
		label(for='password') Mot de passe
		input#password(type='password', name='password', placeholder='Mot de passe')
		label(for='remember-me') Se souvenir de moi
		input#remember-me(type='checkbox', name='remember-me')
		input(type='submit', name='login-form-submit', value='Connexion')

              
            
!

CSS

              
                /**
 * Mixins
 **/
fontFace(name, webname = name, weight = 400, style = normal, path = "fonts/", svgname = name)
	@font-face
		font-family name
		src url(path + webname + ".eot")
		src url(path + webname + ".eot?#iefix") format("embedded-opentype"),
			url(path + webname + ".woff2") format("woff2"),
			url(path + webname + ".woff") format("woff"),
			url(path + webname + ".ttf") format("truetype"),
			url(path + webname + ".svg#" + svgname) format("svg")
		font-weight weight
		font-style style

pxToRem(size)
	((size / sizeFontBase) * 1)rem

screenReaders()
	position absolute
	width 0
	height 0
	padding 0
	margin -1px
	overflow hidden
	clip rect(0, 0, 0, 0)
	border 0
	
/**
 * Fonts
 **/
fontFace(Raleway, "raleway-thin-webfont", 100, normal, "http://cdn.infographizm.com/fonts/raleway/", ralewaythin)
fontFace(Raleway, "raleway-extralight-webfont", 200, normal, "http://cdn.infographizm.com/fonts/raleway/", ralewayextralight)
fontFace(Raleway, "raleway-regular-webfont", 400, normal, "http://cdn.infographizm.com/fonts/raleway/", ralewayregular)

/**
 * Variables
**/
fontsBase = "Raleway", Arial, sans-serif

sizeFontBase = 16px
sizeGutter = pxToRem(20)
sizeContent = pxToRem(480)

breakpointMobile = pxToRem(520)

colorText = #fff
colorBackground = #3994bc
colorInput--dark = darken(colorBackground, 20%)
colorInput--light = lighten(colorBackground, 20%)

/**
 * Content
 **/
body
	font 400 sizeFontBase/1.5em fontsBase
	background colorBackground
	color colorText

h1
	font 100 2.750em/1.25 fontsBase
	text-align center
	text-transform lowercase
	margin 0 0 (sizeGutter * 2)
	
	@media (max-width breakpointMobile)
		font-size 7vw
	
.login-form
	max-width sizeContent
	min-width pxToEm(340)
	padding 0 sizeGutter
	margin (sizeGutter * 2) auto

::-webkit-input-placeholder
	color colorText

::-moz-placeholder
	color colorText

:-ms-input-placeholder
	color colorText

/**
 * Form
 **/
label
	transition .4s
	
	&[for="username"]
	&[for="password"]
		screenReaders()
	
	&[for="remember-me"]
		font 200 pxToRem(20)/1.5 fontsBase
		cursor pointer
		line-height pxToRem(44)
		
		@media (min-width breakpointMobile)
			float right
	
	&:hover
	&:focus
		color darken(colorBackground, 50%)
		transition .2s
	
	&:active
		color darken(colorBackground, 80%)
	
input
	&[type="text"]
	&[type="password"]
	&[type="submit"]
		outline none
		position relative
		box-sizing border-box
		display block
		padding 12px
		font 200 pxToRem(20)/1 fontsBase
		width 100%
		margin-bottom sizeGutter
		border none
		border-bottom 4px solid colorInput--dark
		background colorInput--light
		color colorText
		transition .6s
		box-shadow none
		
		&:focus
			border-color colorText
			background colorInput--dark
			transition .2s
		
		&:hover
			box-shadow 0 0 10px colorInput--dark
			transition .2s

	&[type="checkbox"]
		margin-right (sizeGutter / 2)
		position relative
		top 13px
		transition .4s
		float right
		
		&:checked
			transform scale(1.5)
		
		@media (max-width breakpointMobile)
			float left
			
	&[type="submit"]
		width auto
		padding-left (sizeGutter * 2)
		padding-right (sizeGutter * 2)
		cursor pointer
		margin-top sizeGutter
		
		&:hover
		&:focus
			border-color colorText
			background colorInput--dark
			transition .2s
		
		&:active
			background darken(colorBackground, 40%)
		
		@media (max-width breakpointMobile)
			width 100%
              
            
!

JS

              
                var element = document.querySelector('.login-form');

element.addEventListener('submit', function(event) {
	event.preventDefault();
});
              
            
!
999px

Console