materio-base-d7/sites/all/themes/gui/materiobasetheme/scss/wysiwyg.scss

/* LISIBILITY */
@import "gui.scss";


*{font-size:14px;}
div{border: 1px dashed #D4D4D4;}
p:after, ul:after{content:"¬"; color:red;}

h1:before, h2:before, h3:before, h4:before, h5:before, h6:before{
	 color:blue; font-weight: normal; font-size:10px; vertical-align: super;
}

h1:before{content:"h1 ";}
h2:before{content:"h2 ";}
h3:before{content:"h3 ";}
h4:before{content:"h4 ";}
h5:before{content:"h5 ";}
h6:before{content:"h6 ";}


h2{font-size:24px;}
h3{font-size:18px;}
h4{font-size:16px;}
h5{font-size:14px;}
h6{font-size:12px;}

br:after{content:"·"; color:red; border: 1px solid #999;}

/* LAYOUT AND GRAPHICS */
@mixin full(){ width:99%; }
@mixin demi(){ width:47%; }
@mixin tiers(){ width:29%; }
@mixin quart(){ width:23%; }
@mixin right(){ float:right; margin-left:2%; }
@mixin left(){ float:left; margin-right:2%; }
@mixin center(){ display:block; margin:0 auto; }


img{height:auto; margin:0.5em 0;}
p{ border: 1px dashed #848484; }
div{border: 1px solid #1A1A1A;}

img,p,div{ position:relative;
	&:before{font-size:10px; color:red; background-color: #1A1A1A; position:absolute; top:0; z-index:3000;}

	&.full{@include full(); &:before{content:" full ";}}
	&.demi{ @include demi(); margin-right:2%; &:before{content:" demi "; right:0;}}
	&.tiers{ @include tiers(); margin-right:2%; &:before{content:" tiers "; right:0;}}
	&.quart{ @include quart(); margin-right:2%; &:before{content:" quart "; right:0;}}

	&.demi-left{ @include demi(); @include left(); &:before{content:" demi-left "; left:0;}}
	&.demi-right{ @include demi(); @include right();  &:before{content:" demi-right "; right:0;}}
	&.demi-center{ @include demi(); @include center();  &:before{content:" demi-denter "; right:0;}}

	&.tiers-left{ @include tiers(); @include left();  &:before{content:" tiers-left "; left:0;}}
	&.tiers-right{ @include tiers(); @include right();  &:before{content:" tiers-right "; right:0;}}
	&.tiers-center{ @include tiers(); @include center();  &:before{content:" tiers-center "; right:0;}}

	&.quart-left{ @include quart(); @include left();  &:before{content:" quart-left "; left:0;}}
	&.quart-right{ @include quart(); @include right();  &:before{content:" quart-right "; right:0;}}
	&.quart-center{ @include quart(); @include center();  &:before{content:" quart-center "; right:0;}}



}

table, tr,td{
	position:relative;
	padding:1em 0.3em 0.3em;
	width:100%;

	&:before{
		font-size:10px; color:white; background-color: blue;
		position:absolute; top:0; left:0; z-index:3000;
		padding:1px 3px;
	}
}
table{
	border:2px solid blue!important;
	&:before{content:"table";}
}

tr{
	display:block;
	border:1px dashed blue!important;
	&:before{content:"tr";}
}

td{
	border:1px dotted blue!important;
	&:before{content:"td";}
	p{
		padding:0 15px;
	}
}