scss button.scss |对象/部件

Posted 2021-05-17

@charset "UTF-8";

// プロジェクト依存設定 ------------------------------------
$color-primary : $color-main; // プライマリカラーの設定
$color-secondary : $color-deep; // セカンダリカラーの設定
$color-light : #fff; // ライトカラーの設定
$line-height : 2.5; // line-height(≒ボタンの高さ)の設定
$border-width : 2px; //ボタンの枠の太さ
//  -----------------------------------------------------

%c-btn {
	display: flex;
	justify-content: center;
	align-items: center;
	line-height: $line-height;
	border-width: $border-width;
	border-style: solid;
		&.--radius {
			@extend %c-btn;
			border-radius: 100px;
		}
}

.c-btn {
	&--primary {
		@extend %c-btn;
		border-color: $color-primary;
		background: $color-primary;
		color: $color-light;
		@at-root a#{&}:hover {
			background: $color-light;
			color: $color-primary;
		}
	}
	&--secondary {
		@extend %c-btn;
		border-color: $color-secondary;
		background: $color-secondary;
		color: $color-light;
		@at-root a#{&}:hover {
			background: $color-light;
			color: $color-secondary;
		}
	}
	&--light {
		@extend %c-btn;
		border-color: $color-light;
		background: $color-light;
		&.--primary {
			color: $color-primary;
		}
		&.--secondary {
			color: $color-secondary;
		}
		@at-root a#{&}:hover {
			color: $color-light;
			&.--primary {
				border-color: $color-primary;
				background: $color-primary;
			}
			&.--secondary {
				border-color: $color-secondary;
				background: $color-secondary;
			}
		}
	}
	&--colorless {
		@extend %c-btn;
		background: none;
		&.--primary {
			border-color: $color-primary;
			color: $color-primary;
		}
		&.--secondary {
			border-color: $color-secondary;
			color: $color-secondary;
		}
		&.--light {
			border-color: $color-light;
			color: $color-light;
		}
		@at-root a#{&}:hover {
			opacity: .8;
		}
	}
}
.--bdr-hover--white {
	@at-root a#{&}:hover {
		border-color: $color-light;
	}
}