fume 0.1.4 → 0.2.0

data/generators/fume/simple_theme/templates/public/stylesheets/layout.less

@@ -0,0 +1,413 @@
+@import "base.less";
+
+/* =========================
+ Layout
+========================= */
+#container {
+	min-width: 1050px;
+}
+
+#header, #page {
+	margin: 0 40px;
+}
+
+#page {
+	padding-top: 20px;
+}
+
+#footer {
+	padding-bottom: 20px;
+}
+
+.sidebar {
+	#main {  
+		width: 78%;
+		float: left;
+	}
+}
+
+#sidebar {
+	width: 21%;
+	float: right;
+}
+
+
+#box {
+	width: 500px;
+	margin: 50px auto;
+}
+
+/* =========================
+ Containers
+========================= */
+#header {
+	position: relative;
+	
+	h1 {
+		margin: 0;
+		padding: 0.5em 0;
+		font-size: 2.75em;
+
+		a {
+			text-decoration: none;
+		}
+	}
+}
+
+#main {
+	.block {
+		margin-bottom: 20px;
+		
+		.secondary-navigation {
+			font-size: 1.2em;
+			line-height: 1;
+			border-bottom-width: 0.4em;
+			border-bottom-style: solid;
+			.border-top-left-radius(0.4em);
+			.border-top-right-radius(0.4em);
+			
+			ul {
+				margin: 0;
+				padding: 0;
+				list-style-type: none;
+				
+				li {
+					 float: left;
+					
+					a, span {
+						display: block;
+						padding: 0.75em 1em 0.55em 1em;
+						text-decoration: none;
+					}
+				}
+				
+				li.first, li.first a, li.first a:hover {
+					.border-top-left-radius(0.4em);
+				}
+			}
+		}
+		
+		.content {
+			padding: 1.2em;
+			
+			h2 {
+				margin: 0;
+				padding: 0;
+				margin-bottom: 0.4em;
+				font-size: 2em;
+			}
+			
+			.inner {
+				padding: 0;
+				margin: 0;
+			}
+		}
+	}
+}
+
+#sidebar {
+	h3 {
+		margin: 0;
+		padding: 0.75em 1em 0.55em 1em;
+		font-size: 1.2em;
+		border-bottom-width: 0.4em;
+		border-bottom-style: solid;
+		.border-top-left-radius(0.4em);
+		.border-top-right-radius(0.4em);
+	}
+	
+	ul.navigation {
+		margin: 0;
+		padding: 0;
+		list-style-type: none;
+		line-height: 1;
+
+		li a {
+			display: block;
+			padding: 1em 1.2em;
+			text-decoration: none;
+		}
+	}
+	
+	.block {
+		margin-bottom: 1em;
+		padding-bottom: 1em;
+		.border-radius(0.4em);
+		
+		.content {
+			padding: 1em 1em 0 1em;
+			
+			p {
+				margin: 0;
+			}
+		}
+	}
+	
+	.notice, .sidebar-block {
+		padding: 1em;
+	}
+}
+
+#box {
+	.block {
+		margin-bottom: 20px;
+		
+		h1 {
+			font-size: 2.75em;
+		}
+		
+		h2 {
+			padding: 0.5em 0.8em;
+			font-size: 1.5em; 
+			margin: 0;
+		}
+		
+		.content {
+			padding: 1em 1.5em;
+		}
+		
+	}
+}
+
+#footer {
+	.block {
+		.border-radius(0.4em);
+
+		p {
+			margin: 0;
+			padding: 0.9em;
+		}
+	}
+}
+
+/* =========================
+ Ids and Classes
+========================= */
+#main-navigation {
+	width: 100%;
+	font-size: 1.3em;
+	line-height: 1;
+	.border-top-left-radius(0.4em);
+	.border-top-right-radius(0.4em);
+
+	ul {
+		margin: 0;
+		padding: 0;
+		list-style-type: none;
+		
+		li {
+			float: left;
+			margin-left: 1.2em;
+			.border-top-left-radius(0.4em);
+			.border-top-right-radius(0.4em);
+
+			a {
+				display: block;
+				padding: 0.7em 0em;
+				text-decoration: none;
+			}
+		}
+		
+		li.active {
+			a {
+				padding: 0.7em 1.2em;
+			}
+		}
+	}
+}
+
+#user-navigation {
+	position: absolute;
+	right: 1.5em;
+	bottom: 0.2em;
+	line-height: 1;
+
+	ul {
+		margin: 0;
+		padding: 0;
+		list-style-type: none;
+		
+		li {
+			float: left;
+			padding: 0 0.5em;
+
+			height: 2.5em;
+			line-height: 2.5em;
+			
+			a, span, button, input {
+				padding: 0.4em;
+				text-decoration: none;
+			}
+		}
+	}
+}
+
+.table {
+	width: 100%;
+	border-collapse: collapse;  
+	margin-bottom: 1.25em;
+	
+	th {
+		font-weight: bold;
+		text-align: left;
+	}
+	
+	th.first {
+		.border-top-left-radius(0.4em);
+	}
+	
+	th.last {
+		.border-top-right-radius(0.4em);
+	}
+	
+	th, td {
+		padding: 0.8em;
+		
+		form {
+			display: inline;
+			
+			div {
+				display: inline;
+			}
+		}
+	}
+	
+	td.last {
+		text-align: right;
+	}
+}
+
+
+.actions-bar {
+	padding: 1em 1px;
+	
+	.actions {
+		float: left;
+	}
+	
+	.pagination {
+		float: right;
+		padding: 1px 0;
+	}
+}
+
+.pagination {
+	a, span {
+		display: block;
+		float: left;
+		
+		padding: 0.25em 0.45em;
+		margin-right: 0.45em; 
+		border-style: solid;
+		border-width: 1px;
+		.border-radius(0.25em);
+	}
+	
+	span.current {
+		font-weight: bold;  
+	}
+	
+	a {
+		text-decoration: none;  
+	}
+}
+
+.form {
+	.group {
+		margin-bottom: 1.25em;
+	}
+	
+	div.left {
+		width: 20%;
+		float: left;
+	}
+
+	div.right {
+		width: 75%;
+		float: right;
+	}
+	
+	.columns {
+		.column {
+			width: 48%;
+		}
+		
+		.left {
+			float: left;
+		}
+		
+		.right {
+			float: right;
+		}
+	}
+	
+	label.label, input.text_field, textarea.text_area {
+		font-size: 1.2em;
+		padding: 1px 0;
+		margin: 0;
+	}
+	
+	label.right {
+		text-align: right;
+	}
+	
+	input.checkbox, input.radio {
+		margin-right: 0.5em;
+	}
+	
+	label.checkbox, label.radio {
+		line-height: 1.5em;
+	}
+	
+	label.label {
+		display: block;
+		padding-bottom: 0.2em;  
+		font-weight: bold;
+	}
+	
+	div.fieldWithErrors label.label {
+		display: inline;
+	}
+	
+	.fieldWithErrors .error {
+		color: red;
+	}
+	
+	input.text_field, textarea.text_area {
+		width: 100%;
+		border-width: 1px;
+		border-style: solid;
+	}
+}
+
+
+ul.list {
+	margin: 0;
+	padding: 0;
+	list-style-type: none;
+	
+	li {
+		clear: left;
+		padding-bottom: 5px;
+		
+		.left {
+			float: left;
+			
+			.avatar {
+				width: 50px;
+				height: 50px;
+			}
+		}
+		
+		.item {
+			margin-left: 80px;
+			
+			.avatar {
+				float: left;
+				margin: 0 5px 5px 0;
+				width: 30px;
+				height: 30px;
+			}
+		}
+	}
+}