scss スマホできれいにでるカラーボタン

Posted 2021-05-18

// # style-color-button カラーボタンのスタイル
// [e.g.]
// @include style-color-button(#666666,none);
// =======================================================
// $color: hex, rgb or rbga or 設定済み6種類（light,heaven,abyss,point-get,entry,cashback）
// $shadow: null or none   # nullだとtextshadowがつく
// $style: null or normal  # normalだと標準スタイル（角丸とか）が出力される
// ========================================================
@mixin style-color-button($color:#666,$shadow:null,$style:null) {
	// # ボタンのカラーリング
		@include gradient-top-lighten($color:$color, $lighten:10%);
		border:solid 1px #{$color};
	// # シャドウの有無
	@if $shadow == "none" {
		text-shadow: none;
	}
	// # 標準スタイルの有無
	@if $style == "normal" {
		@include border-radius(5px);
		@include box-shadow(1px 1px 1px 0px rgba(0, 0, 0, 0.2), 0 1px 0 rgba(255, 255, 255, 0.2) inset);
		color:#FFF;
		font-weight:bold;
		display: block;
		padding: 0.75em 1em;
	}
}