GUP更新用テンプレ

by tea4two

HTML

<p class="block_title">グッズ更新ブロック</p>

<section class="goods_sect">
	<h3 class="goods_h">
		<span>グッズタイトル<br>2行目になった場合</span>
	</h3>
	
	<p class="goods_cp">キャッチコピー</p>
	
	<div class="goods_content">
		<figure class="goods_fig">
			<img src="//via.placeholder.com/500x350/ff9900/fff?text=Now+Printing…" alt="" class="goods_img ">
		</figure>
	</div><!-- /.goods_content -->
	
</section><!-- /.goods_sect -->

<hr>

SCSS

// SCSS
// こちらのCSSは style_2017.scss にまとめられています
// 出力ファイルは style_2017.css です

* {
	margin: 0;
	padding: 0;
}
body {
		font-size: 16px;
}

.block_title {
	font-weight: bold;
	margin-bottom: 2rem;
}

.goods {
	&_h {
		margin-bottom: 2rem;
		border-radius: .5rem;
		background:  linear-gradient(to bottom, rgba(245,144,190,1) 0%,rgba(245,144,190,1) 50%,rgba(232,106,163,1) 51%,rgba(245,144,190,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		color: #fff;
		padding: .75em;
		border: 2px solid rgba(245,144,190,1);
		box-shadow: inset 0 0 8px 0 rgba(0,0,0, .2);
		
		span {
			display: block;
			padding-left: 2em;
			
			&:before {
				content: '';
				display: block;
			float: left;
			width: 25px;
			height: 25px;
			margin-left: -2em;
			border-radius: 20px;
			background-color: rgba(232,106,163,1);
			box-shadow: inset 1px 1px 2px 0 rgba(0,0,0,.3);
			}
		}
	}
	&_cp {
		font-weight: bold;
		margin-bottom: 2rem;
	}
	&_fig {
		margin-bottom: 3rem;
	}
	&_img {
		display: block;
		margin: 0 auto;
	}
}