comable-frontend-fashionable 0.6.0

data/app/assets/stylesheets/comable/detail.css

@@ -0,0 +1,225 @@
+@charset "UTF-8";
+/* CSS detail */
+
+#ProductDetailArea {
+	width: 780px;
+	overflow: hidden;
+}
+	/* 画像 */
+	/* ------------------------------ */
+	.main-product {
+		float: left;
+		width: 416px;
+	}
+		.main-product img.main {
+			border: #000 1px solid;
+		}
+		/* 在庫 */
+		.stock {
+			border-top: #ccc 1px solid;
+			margin: 10px 0;
+		}
+			.stock li {
+				padding: 10px 20px;
+				border-bottom: #ccc 1px solid;
+				overflow: hidden;
+			}
+				.stock li p {
+					float: left;
+					width: 100px;
+					padding: 3px 0 0 0;
+				}
+				.stock li img.shoppingcart {
+					float: right;
+					margin: 0;
+					padding: 0;
+				}
+					img.shoppingcart:hover {
+						opacity: 0.8;
+						filter: alpha(opacity=80);
+						-ms-filter: "alpha( opacity=80 )";
+						background: #fff;
+					}
+		
+	/* 詳細 */
+	/* ------------------------------ */
+	.main-detail {
+		float: right;
+		width: 355px;
+	}
+		 /* アイコン */
+		.main-detail .icon {
+			width: 332px;
+			margin: 0 0 10px 0;
+			overflow: hidden;
+		}
+			/* 新着アイコン */
+			.main-detail .icon p.new {
+				float: left;
+				width: 75px;
+				background: #f2546a;
+				text-align: center;
+				font-weight: bold;
+				color: #fff;
+				border-radius: 3px;
+				margin: 0 2px;
+			}
+			/* 再入荷アイコン */
+			.main-detail .icon p.repeat {
+				float: left;
+				width: 75px;
+				background: #54b1f2;
+				text-align: center;
+				font-weight: bold;
+				color: #fff;
+				border-radius: 3px;
+				margin: 0 2px;
+			}
+			/* 値下げアイコン */
+			.main-detail .icon p.down {
+				float: left;
+				width: 75px;
+				background: #b473eb;
+				text-align: center;
+				font-weight: bold;
+				color: #fff;
+				border-radius: 3px;
+				margin: 0 2px;
+			}
+			/* SOLDUOT */
+			.main-detail .icon p.soldout {
+				float: left;
+				width: 75px;
+				background: #000;
+				text-align: center;
+				font-weight: bold;
+				color: #fff;
+				border-radius: 3px;
+				margin: 0 2px;
+			}
+		
+		/* 商品番号 */
+		.lot-number {
+			clear: both;
+			font-size: 12px;
+		}
+		/* 商品名 */
+		h2 {
+			font-size: 18px;
+			font-weight: normal;
+		}
+		/* 価格 */
+		.price {
+			font-size: 14px;
+			margin: 30px 0 20px 0;
+		}
+			.price span {
+				display: block;
+				color: #e70505;
+			}
+			
+		/* Detail Color */
+		.title {
+			font-size: 14px;
+			margin: 20px 0 0 0;
+		}
+		/* 詳細画像 */
+		ul.DetailColor {
+			overflow: hidden;
+			display: inline-block;
+		}
+			ul.DetailColor li {
+				float: left;
+				width: 66px;
+				height: 110px;
+				font-size: 10px;
+				display: inline;
+				cursor: pointer;
+				margin: 0 3px 0 0;
+			}
+			ul.DetailColor li img {
+				width: 66px;
+				height: 96px;
+				border: #000 1px solid;
+			}
+			ul.DetailColor li img:hover {
+				opacity: 0.8;
+				filter: alpha(opacity=80);
+				-ms-filter: "alpha( opacity=80 )";
+				background: #fff;
+			}
+			
+		/* 詳細（素材等） */
+		.other-detail {
+			clear: both;
+			margin: 20px 0 0 0;
+		}
+			.other-detail th {
+				width: 70px;
+				vertical-align: top;
+				padding: 5px 0px 5px 5px;
+			}
+			
+		/* サイズ */
+		.size {
+			width: 353px;
+			border: #aeaeae 1px solid;
+			font-size: 11px;
+			margin: 20px 0 0 0;
+		}
+			.size th {
+				background: #aeaeae;
+				color: #fff;
+				text-align: center;
+				padding: 4px 10px;
+			}
+			.size td {
+				border-bottom: #aeaeae 1px solid;
+				text-align: center;
+				padding: 4px 10px;
+			}
+			
+	/* アイテム紹介 */
+	.introduction {
+		clear: both;
+		background: #fff;
+		padding: 20px 0 50px 0;
+	}
+		.introduction p {
+			font-size: 14px;
+		}
+		.introduction p.text {
+			border: #ccc 1px solid;
+			font-size: 12px;
+			padding: 5px;
+		}
+
+/* 最近見たアイテム・他の人のチェックアイテム */
+.check-item {
+	margin: 25px 0 25px 0;
+}
+	.check-item p {
+		font-size: 14px;
+	}
+	.check-item .inner {
+		border: #ccc 1px solid;
+		padding: 12px 6px;
+		overflow: hidden;
+	}
+	.check-item .inner img {
+		float: left;
+		width: 73px;
+		margin: 0 6px;
+	}
+		.check-item .inner img:hover {
+			opacity: 0.8;
+			filter: alpha(opacity=80);
+			-ms-filter: "alpha( opacity=80 )";
+			background: #fff;
+		}
+		
+hr.dod {
+	border: none;
+	border-top: #ccc 1px dotted;
+	padding: 0 0 25px 0;
+}

data/app/assets/stylesheets/comable/footer-common.css

@@ -0,0 +1,121 @@
+@charset "UTF-8";
+/* CSS footer-common */
+
+
+/*h2 {
+	font-size: 24px;
+	font-weight: normal;
+	margin: 0 0 0 20px;
+}*/
+
+h3 {
+	font-size: 16px;
+	margin: 50px 0 0 0;
+}
+
+p.ex {
+	margin: 20px 0 20px 20px;
+}
+
+/* table */
+table {
+	width: 100%;
+	color: #3c3c3c;
+	font-weight: normal;
+	margin: 20px 0 0 0;
+}
+	table th, td {
+		vertical-align: top;
+		padding: 10px 0 10px 20px;
+	}
+	table th {
+		width: 140px;
+	}
+	table td a {
+		color: #99cccc;
+	}
+	table td a:hover {
+		text-decoration: underline;
+	}
+
+	/* リスト */
+	table ul {
+		list-style: inside;
+	}
+		table ul li {
+			line-height: 20px;
+		}
+
+/* dl */
+dl {
+	margin: 0 0 0 20px;
+	padding: 0;
+}
+	dt, dd {
+		margin: 0;
+		padding: 0;
+	}
+	/*dt {
+		font-weight: bold;
+		margin: 20px 0 0 0;
+	}*/
+	/* リスト */
+	dd li {
+		margin: 5px 0 0 15px;
+	}
+	
+/* よくある質問 */
+.faq {
+	width: 900px;
+	background: #f0f0f0;
+	margin: 20px auto 0 auto;
+	padding: 0 20px 20px 20px;
+}
+
+	.faq ul li.title {
+		font-weight: bold;
+		font-size: 13px;
+		padding: 20px 0 0 0;
+	}
+	
+	.faq a {
+		color: #000;
+	}
+	.faq a:hover {
+		text-decoration: underline;
+	}
+
+.answer-box {
+	width: 940px;
+	margin: 0 auto;
+}
+	/* Q */
+	.q-box {
+		background: #424242;
+		color: #fff;
+		overflow: hidden;
+		padding: 8px 5px 5px 15px;
+	}
+		.q-box p.q {
+			float: left;
+			width: 20px;
+		}
+		.q-box p.question {
+			float: left;
+			width: 890px;
+		}
+	/* A */
+	.a-box {
+		border: #424242 1px solid;
+		overflow: hidden;
+		padding: 5px 5px 5px 15px;
+	}
+		.a-box p.a {
+			float: left;
+			font-weight: bold;
+			width: 20px;
+		}
+		.a-box p.answer {
+			float: left;
+			width: 890px;
+		}

data/app/assets/stylesheets/comable/home.css

@@ -0,0 +1 @@
+//= require comable/products

data/app/assets/stylesheets/comable/index.css

@@ -0,0 +1,168 @@
+@charset "UTF-8";
+/* CSS list */
+
+p.result {
+	font-size: 18px;
+	font-family: "メイリオ", Meiryo;
+	font-weight: bold;
+	margin: 0 0 18px 0;
+}
+
+/* 絞込検索 */
+.search {
+	background: #8e8e8e;
+	border-radius: 3px;
+	overflow: hidden;
+	padding: 8px 0 8px 100px;
+	margin: 0 0 30px 0;
+}
+	.search p.cate {
+		float: left;
+		color: #fff;
+	}
+	.search select {
+		float: left;
+		margin: 0 50px 0 5px;
+	}
+
+/* 商品 */
+.box {
+	border-left: 1px solid #f5f5f5;
+	margin: 0 0 0 2px;
+}
+ul.product {
+	clear: both;
+	overflow: hidden;
+	display: inline-block;
+}
+	ul.product li {
+		float: left;
+		width: 134px;
+		height: 320px;
+		border-top: 1px solid #f5f5f5;
+		border-right: #f5f5f5 1px solid;
+		border-bottom: #f5f5f5 1px solid;
+		display: inline;
+		padding: 0 10px;
+	}
+	ul.product li img {
+		clear: both;
+		width: 134px;
+		height: 186px;
+		margin: 0 0 2px 0;
+	}
+	/* 商品名 */
+	ul.product li h2 {
+		height: 60px;
+		color: #000;
+		font-size: 12px;
+		font-weight: normal;
+		line-height: 14px;
+	}
+	ul.product li h2 a {
+		color: #000;
+		font-size: 12px;
+		font-weight: normal;
+		line-height: 14px;
+	}
+	/* 価格 */
+	ul.product li p.price {
+		color: #000;
+		font-size: 10px;
+		margin: 0;
+	}
+		ul.product li p.price span {
+			display: block;
+			color: #e70505;
+		}
+	/* アイコン */
+	ul.product li .icon {
+		height: 17px;
+		overflow: hidden;
+		margin: 10px 0 5px 0;
+	}
+		/* 新着 */
+		ul.product li .icon p.new {
+			float: left;
+			width: 63px;
+			background: #f2546a;
+			text-align: center;
+			font-weight: bold;
+			font-size: 10px;
+			color: #fff;
+			border-radius: 3px;
+			padding: 1px 0;
+			margin: 0 2px;
+		}
+		/* 再入荷 */
+		ul.product li .icon p.repeat {
+			float: left;
+			width: 63px;
+			background: #54b1f2;
+			text-align: center;
+			font-weight: bold;
+			font-size: 10px;
+			color: #fff;
+			border-radius: 3px;
+			padding: 1px 0;
+			margin: 0 2px;
+		}
+		/* 値下げ */
+		ul.product li .icon p.down {
+			float: left;
+			width: 63px;
+			background: #b473eb;
+			text-align: center;
+			font-weight: bold;
+			font-size: 10px;
+			color: #fff;
+			border-radius: 3px;
+			padding: 1px 0;
+			margin: 0 2px;
+		}
+		/* SOLDOUT */
+		ul.product li .icon p.soldout {
+			float: left;
+			width: 63px;
+			background: #000;
+			text-align: center;
+			font-weight: bold;
+			font-size: 10px;
+			color: #fff;
+			border-radius: 3px;
+			padding: 1px 0;
+			margin: 0 2px;
+		}
+
+/* ページナビ */
+ul.pageNav {
+	margin: 0 0 10px;
+	padding: 10px 10px 5px;
+	text-align: right;
+}
+
+	ul.pageNav li {
+		display: inline;
+		margin: 0 2px;
+		padding: 0;
+	}
+
+	ul.pageNav li span,
+	ul.pageNav li a {
+		color: #000;
+		display: inline-block;
+		margin-bottom: 5px;
+		padding: 4px 10px;
+		text-decoration: none;
+		vertical-align: middle;
+	}
+	ul.pageNav li span {
+		background: #aaaaaa;
+		color: #fff;
+	}
+
+	ul.pageNav li a:hover {
+		color: #000;
+		background: #e6e6e6;
+		border-color: #00f;
+	}