tests.styl 2.62 KB
@import index

// Page styles and defaults to test the inherit setting.

body
	border 1px solid black
	width 1000px
	margin 24px
	padding 48px
	line-height 24px
	font-size: 18px

div
	width 500px
	margin 24px 0
	background-color #eee

h1
	font-size 48px
	line-height 72px

h2
	font-size 24px
	line-height 36px
	margin-top 36px
	margin-bottom 24px
	border-bottom 1px solid black


// Margins

// Set a margin to be inherited for the test-margin-inherit test
#test-margin-inherit-parent-element
	margin 42px
	border 1px dashed

#test-margin-inherit
	margin inherit

#test-margin-horizontal-centering
	margin 0 auto

#test-margin-one-argument
	margin 10px

#test-margin-two-arguments
	margin 10px 20px

#test-margin-two-arguments-with-zero
	margin 10px 0

#test-margin-three-arguments
	margin 10px 20px 30px

#test-margin-four-arguments
	margin 10px 20px 30px 40px

#test-margin-four-hairlines
	margin hairline hairline hairline hairline

#test-margin-top
	margin-top 10px

#test-margin-right
	margin-right 20px

#test-margin-bottom
	margin-bottom 30px

#test-margin-left
	margin-left 40px

#test-margin-hairline
	margin-left hairline

// Padding

#test-padding-one-argument
	padding 10px

#test-padding-two-arguments
	padding 10px 20px

#test-padding-three-arguments
	padding 10px 20px 30px

#test-padding-four-arguments
	padding 10px 20px 30px 40px

#test-padding-top
	padding-top 10px

#test-padding-right
	padding-right 20px

#test-padding-bottom
	padding-bottom 30px

#test-padding-left
	padding-left 40px


// Font size

#test-font-size-inherit
	font-size inherit

#test-font-size
	font-size 42px
	line-height 63px


// width
#test-width-hundred-percent
	width 50px
	width 100%

// height
#test-height
	height 50px

// max-width
#test-max-width
	max-width 50px
	max-width none

// background-size
#test-background-size
	background-image linear-gradient(90deg, transparent 50%, rgba(255,255,255,.5) 50%)
	background-size 500px 500px
	// background-size 100px

#test-background-size-cover
	background-image linear-gradient(90deg, transparent 50%, rgba(255,255,255,.5) 50%)
	background-size cover

#test-background-size-contain
	background-image linear-gradient(90deg, transparent 50%, rgba(255,255,255,.5) 50%)
	background-size contain

// https://source.ind.ie/project/responsive-pixels/issues/1
#test-background-size-one-hundred-percent
	background-image linear-gradient(90deg, transparent 50%, rgba(255,255,255,.5) 50%)
	background-size 100%

// https://source.ind.ie/project/responsive-pixels/issues/3
#test-bang-important
	width 100px !important
	width 500px

// Vertical rhythm helpers.
#test-padding-at-half-line-height
	padding HalfLineHeight 0 HalfLineHeight HalfLineHeight