am-commons 0.0.1 → 0.0.3

data/stylesheets/am-commons/_epp-mixins.scss

@@ -0,0 +1,38 @@
+@mixin font-rem($fontweight:null, $fontsize:null, $lineheight:null, $fontfamily:null) {
+
+    @if $fontfamily !=null {
+        font-family: $fontfamily;
+    }
+
+    @if $lineheight !=null {
+        line-height: $lineheight;
+        line-height: ($lineheight / 16px) * 1rem;
+    }
+
+    @if $fontsize !=null {
+        font-size: $fontsize;
+        font-size: ($fontsize / 16px) * 1rem;
+    }
+    
+    @if $fontweight !=null {
+        font-weight: $fontweight;
+    }
+}
+
+@mixin respond-to($media) {
+    @if $media == ph {
+        @media only screen and (max-width:767px) { 
+            @content;
+        } 
+    }
+    @else if $media == tb {
+            @media only screen and (min-width:768px) and (max-width:1151px) { 
+                @content; 
+        } 
+    }
+    @else if $media == dt {
+        @media only screen and (min-width:1152px) { 
+            @content; 
+        } 
+    } 
+}

data/stylesheets/am-commons/_epp-pixelator.scss

@@ -0,0 +1,352 @@
+//---------------------------------\\
+//----------Table of Content-------\\
+//---------------------------------\\
+
+// 1 Reset
+// 2 pixelator
+
+@import "compass/css3/";
+@import "epp-mixins";
+
+//---------------------------------\\
+//--------------Reset--------------\\
+//---------------------------------\\
+
+*{
+  margin: 0;
+  padding: 0;  
+}
+
+//---------------------------------\\
+//------------Pixelator------------\\
+//---------------------------------\\
+
+html {
+	font-family: sans-serif;
+	font-size:16px;
+	line-height: 1.5rem;
+	height: 100%;
+    -webkit-text-size-adjust: 100%;
+    -ms-text-size-adjust: 100%;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+body{
+    height:100%;
+    margin:0;
+    padding:0;
+    @include font-rem(null,16px,24px,sans-serif);
+}
+audio,
+canvas,
+video {
+    display: inline-block;
+}
+audio:not([controls]) {
+    display: none;
+    height: 0;
+}
+a{
+
+	&:link {
+		text-decoration: none;
+	}
+	&:visited {
+		text-decoration: line-through;
+	}
+	&:hover {
+		text-decoration: underline;
+	}
+	&:active {
+		text-decoration: underline;
+	}
+}
+abbr{
+	text-decoration:none;
+	border-bottom: 1px dotted; 
+}
+address{
+	margin-bottom:8px;
+}
+article{
+	display: block;
+}
+aside{
+	display: block;
+}
+b{
+	font-weight:bold;
+}
+blockquote{
+	padding:24px;
+	font-style: italic;
+	@include font-rem(normal,16px,32px,serif);
+	margin-bottom:8px;
+}
+button{
+	height:32px;
+	border:0 none;
+	padding:0 8px;
+	vertical-align:top;
+	@include font-rem(normal,16px,24px,sans-serif);
+	@include appearance (none);
+	@include border-radius(2px);
+	@include box-sizing(border-box);
+	&:focus{
+		outline:0 none;
+	}
+}
+caption{
+	@include font-rem(null,12px,24px,null);
+}
+code{
+	white-space: normal;
+	margin-bottom:8px;
+	display: inline-table;
+	vertical-align: top;
+	@include font-rem(normal,16px,24px,monospace);
+}
+details{
+	display: block;
+}
+dfn{
+	font-style: italic;
+}
+dl{
+	margin-bottom:8px;
+}
+dt{
+	margin-left:8px;
+	@include font-rem(null,16px,24px,null);
+}
+dd{
+	margin:0 0 8px 8px;
+	font-style: italic;
+	@include font-rem(null,16px,24px,null);
+}
+em{
+	font-style: italic;
+}
+fieldset{
+	border:1px solid;
+	margin: -1px 0 0 0;
+	padding: 8px;
+	margin-bottom:8px;
+	@include border-radius (4px);
+}
+figcaption{
+	display: block;
+	margin-bottom: 8px;
+	font-style: italic;
+	@include font-rem(null,12px,24px,null);
+}
+figure{
+	display: block;
+}
+form{
+	
+}
+footer{
+	display: block;
+}
+hr{
+	background: #888;
+	background: rgba(0,0,0,0.2);
+	border: 0 none;
+    height: 1px;
+	margin: 8px 0 7px 0;
+}
+h1{
+	margin-bottom:8px;
+	@include font-rem(bold,64px,72px,null);
+}
+h2{
+	margin-bottom:8px;
+	@include font-rem(bold,48px,64px,null);
+}
+h3{
+	margin-bottom:8px;
+	@include font-rem(bold,40px,48px,null);
+}
+h4{
+	margin-bottom:8px;
+	@include font-rem(bold,32px,40px,null);
+}
+h5{
+	margin-bottom:8px;
+	@include font-rem(bold,24px,32px,null);
+}
+h6{
+	margin-bottom:8px;
+	@include font-rem(bold,16px,24px,null);
+}
+header{
+	display: block;
+}
+i{
+	font-style: italic;
+}
+img{
+	border:0 none;
+	outline:0 none;
+	vertical-align: top;
+}
+input[type="text"], input[type="search"], input[type="password"], input[type="email"], input[type="tel"], input[type="number"], input[type="url"], input[type="date"], input[type="datetime"], input[type="month"], input[type="week"], input[type="time"], input[type="datetime-local"]{
+	border:1px solid;
+	background:#fff;
+	height:32px;
+	padding:4px 8px;
+	vertical-align:top;
+	@include font-rem(null,16px,24px,sans-serif);
+	@include appearance (none);
+	@include border-radius(2px);
+	@include box-sizing(border-box);
+}
+input[type="button"], input[type="submit"], input[type="reset"]{
+	border:0 none;
+	height:32px;
+	padding:0 8px;
+	vertical-align:top;
+	@include font-rem(null,16px,24px,sans-serif);
+	@include appearance (none);
+	@include border-radius(2px);
+	@include box-sizing(border-box);
+}
+input[type="color"]{
+	background: #fff;
+	border:1px solid;
+	height:32px;
+	padding:0 2px;
+	vertical-align:top;
+	@include font-rem(null,16px,24px,sans-serif);
+	@include appearance (none);
+	@include border-radius(2px);
+	@include box-sizing(border-box);
+}
+input[type="range"]{
+	height:32px;
+}
+label{
+	clear:both;
+	display:block;
+	@include font-rem(null,16px,24px,null);
+}
+legend{
+	@include font-rem(null,16px,24px,null);
+}
+li{
+	margin-left:8px;
+}
+main{
+	display: block;
+}
+nav{
+	display: block;
+}
+ol{
+	@include font-rem(null, 16px,24px);
+	list-style-position: inside;
+	margin-bottom:8px;
+}
+option{
+	background:#fff;
+	padding:8px;
+}
+p{
+	@include font-rem(null,16px,24px,null);
+	margin-bottom:8px;
+	&:last-child{
+		margin-bottom:0;
+	}
+}
+pre{
+	@include font-rem(null,16px,24px,monospace);
+	white-space: pre-wrap;
+	margin-bottom:8px;
+}
+section{
+    display: block;
+}
+strong{
+	font-weight:bold;
+	vertical-align: top;
+}
+select{
+	height:32px;
+	border:1px solid;
+	background:#fff;
+	padding: 0 0 0 8px;
+	vertical-align:top;
+	@include font-rem(null,16px,24px,null);	
+	@include border-radius(2px);
+	@include box-sizing(border-box);
+}
+small{
+	font-size:75%;
+	vertical-align: baseline;
+}
+sub{
+	@include font-rem(null,12px,12px,null);
+	vertical-align: sub;
+	height: 10px;
+	display: inline-block;
+}
+summary {
+    display: block;
+}
+sup{
+	@include font-rem(null,12px,12px,null);
+	vertical-align: top;
+	height: 10px;
+	display: inline-block;
+}
+table{
+	background-color: white;
+	border-top: 1px solid #AFAFAF;
+	border-right: 1px solid #AFAFAF;
+	border-bottom: 0 none;
+	border-left: 1px solid #AFAFAF;
+	border-spacing: 8px;
+	border-collapse: collapse;
+	margin-bottom:8px; 
+	width:100%;
+}
+tr{
+	th{
+		border-bottom: 1px solid #C3C3C3;
+		border-right: 1px solid #C3C3C3;
+		padding:8px 8px 7px 8px;
+		&:last-child{
+			border-right: 0 none;
+		}
+	}
+	td{
+		border-bottom: 1px solid #C3C3C3;
+		border-right: 1px solid #C3C3C3;
+		padding:8px 8px 7px 8px;
+		&:last-child{
+			border-right: 0 none;
+		}
+	}
+}
+textarea{
+	height:128px;
+	border:1px solid;
+	background:#fff;
+	padding:8px;
+	resize:none;
+	vertical-align:top;
+	width:100%;
+	@include font-rem(null,16px,24px,null);
+	@include appearance (none);
+	@include border-radius(2px);
+	@include box-sizing(border-box);
+}
+u{
+	text-decoration:underline;
+}
+ul{
+	@include font-rem(null,16px,24px,null);
+	list-style-position: inside;
+	margin-bottom:8px;
+}