added dark theme option. It ìs selected automagically based on system choiche of...

[theme-danix.xyz.git] / assets / sass / components / _button.scss

///\r
/// Forty by HTML5 UP\r
/// html5up.net | @ajlkn\r
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)\r
///\r
\r
/* Button */\r
\r
	input[type="submit"],\r
	input[type="reset"],\r
	input[type="button"],\r
	button,\r
	.button {\r
		@include vendor('appearance', 'none');\r
		@include vendor('transition', (\r
			'background-color #{_duration(transition)} ease-in-out',\r
			'box-shadow #{_duration(transition)} ease-in-out',\r
			'color #{_duration(transition)} ease-in-out'\r
		));\r
		background-color: transparent;\r
		border: 0;\r
		border-radius: 0;\r
		box-shadow: inset 0 0 0 2px _palette_light(fg-bold);\r
		color: _palette_light(fg-bold);\r
		@media screen and (prefers-color-scheme: dark) {\r
			box-shadow: inset 0 0 0 2px _palette_dark(fg-bold);\r
			color: _palette_dark(fg-bold);\r
		}\r
		cursor: pointer;\r
		display: inline-block;\r
		font-size: 0.8em;\r
		font-weight: _font(weight-bold);\r
		height: 3.5em;\r
		letter-spacing: _font(letter-spacing-alt);\r
		line-height: 3.5em;\r
		padding: 0 1.75em;\r
		text-align: center;\r
		text-decoration: none;\r
		text-transform: uppercase;\r
		white-space: nowrap;\r
\r
		&:hover, &:active {\r
			box-shadow: inset 0 0 0 2px _palette_light(highlight);\r
			color: _palette_light(highlight);\r
			@media screen and (prefers-color-scheme: dark) {\r
				box-shadow: inset 0 0 0 2px _palette_dark(highlight);\r
				color: _palette_dark(highlight);\r
			}\r
		}\r
\r
		&:active {\r
			background-color: transparentize(_palette_light(highlight), 0.9);\r
			box-shadow: inset 0 0 0 2px desaturate(darken(_palette_light(highlight), 15), 5);\r
			color: desaturate(darken(_palette_light(highlight), 15), 5);\r
			@media screen and (prefers-color-scheme: dark) {\r
				background-color: transparentize(_palette_dark(highlight), 0.9);\r
				box-shadow: inset 0 0 0 2px desaturate(darken(_palette_dark(highlight), 15), 5);\r
				color: desaturate(darken(_palette_dark(highlight), 15), 5);\r
			}\r
		}\r
\r
		&.icon {\r
			&:before {\r
				margin-right: 0.5em;\r
			}\r
		}\r
\r
		&.fit {\r
			width: 100%;\r
		}\r
\r
		&.small {\r
			font-size: 0.6em;\r
		}\r
\r
		&.large {\r
			font-size: 1.25em;\r
			height: 3em;\r
			line-height: 3em;\r
		}\r
\r
		&.next {\r
			padding-right: 4.5em;\r
			position: relative;\r
\r
			&:before, &:after {\r
				@include vendor('transition', 'opacity #{_duration(transition)} ease-in-out');\r
				background-position: center right;\r
				background-repeat: no-repeat;\r
				background-size: 36px 24px;\r
				content: '';\r
				display: block;\r
				height: 100%;\r
				position: absolute;\r
				right: 1.5em;\r
				top: 0;\r
				vertical-align: middle;\r
				width: 36px;\r
			}\r
\r
			&:before {\r
				background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="36px" height="24px" viewBox="0 0 36 24" zoomAndPan="disable"><style>line { stroke: #{_palette_light(fg-bold)}; stroke-width: 2px; }</style><line x1="0" y1="12" x2="34" y2="12" /><line x1="25" y1="4" x2="34" y2="12.5" /><line x1="25" y1="20" x2="34" y2="11.5" /></svg>');\r
				@media screen and (prefers-color-scheme: dark) {\r
					background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="36px" height="24px" viewBox="0 0 36 24" zoomAndPan="disable"><style>line { stroke: #{_palette_dark(fg-bold)}; stroke-width: 2px; }</style><line x1="0" y1="12" x2="34" y2="12" /><line x1="25" y1="4" x2="34" y2="12.5" /><line x1="25" y1="20" x2="34" y2="11.5" /></svg>');\r
				}\r
			}\r
\r
			&:after {\r
				background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="36px" height="24px" viewBox="0 0 36 24" zoomAndPan="disable"><style>line { stroke: #{_palette_light(highlight)}; stroke-width: 2px; }</style><line x1="0" y1="12" x2="34" y2="12" /><line x1="25" y1="4" x2="34" y2="12.5" /><line x1="25" y1="20" x2="34" y2="11.5" /></svg>');\r
				@media screen and (prefers-color-scheme: dark) {\r
					background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="36px" height="24px" viewBox="0 0 36 24" zoomAndPan="disable"><style>line { stroke: #{_palette_dark(highlight)}; stroke-width: 2px; }</style><line x1="0" y1="12" x2="34" y2="12" /><line x1="25" y1="4" x2="34" y2="12.5" /><line x1="25" y1="20" x2="34" y2="11.5" /></svg>');\r
				}\r
				opacity: 0;\r
				z-index: 1;\r
			}\r
\r
			&:hover, &:active {\r
				&:after {\r
					opacity: 1;\r
				}\r
			}\r
\r
			@include breakpoint('<=large') {\r
				padding-right: 5em;\r
			}\r
		}\r
\r
		&.primary {\r
			background-color: _palette_light(fg-bold);\r
			box-shadow: none;\r
			color: _palette_light(bg);\r
			@media screen and (prefers-color-scheme: dark) {\r
				background-color: _palette_dark(fg-bold);\r
				color: _palette_dark(bg);\r
			}\r
\r
			&:hover, &:active {\r
				background-color: _palette_light(highlight);\r
				color: _palette_light(bg) !important;\r
				@media screen and (prefers-color-scheme: dark) {\r
					background-color: _palette_dark(highlight);\r
					color: _palette_dark(bg) !important;\r
				}\r
			}\r
\r
			&:active {\r
				background-color: desaturate(darken(_palette_light(highlight), 15), 5);\r
				@media screen and (prefers-color-scheme: dark) {\r
					background-color: desaturate(darken(_palette_dark(highlight), 15), 5);\r
				}\r
			}\r
		}\r
\r
		&.disabled,\r
		&:disabled {\r
			@include vendor('pointer-events', 'none');\r
			cursor: default;\r
			opacity: 0.25;\r
		}\r
	}