scss МиксиныдлясозданияCSSстрелокишевронов

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了scss МиксиныдлясозданияCSSстрелокишевронов相关的知识,希望对你有一定的参考价值。

@mixin arrow($dir: 'down', $size: 4px, $color: #000) {
	width: 0;
	height: 0;
	border-style: solid;
	border-color: transparent;

	@if ($dir == 'up' or $dir == 'down') {
		border-left-width: $size;
		border-right-width: $size;
	}

	@if ($dir == 'right' or $dir == 'left') {
		border-top-width: $size;
		border-bottom-width: $size;
	}

	@if ($dir == 'up') {
		border-bottom-width: $size;
		border-bottom-color: $color;
	}

	@if ($dir == 'down') {
		border-top-width: $size;
		border-top-color: $color;
	}

	@if ($dir == 'right') {
		border-left-width: $size;
		border-left-color: $color;
	}

	@if ($dir == 'left') {
		border-right-width: $size;
		border-right-color: $color;
	}
}


@mixin arrow-after($dir: 'down', $size: 4px, $color: #000) {
	&::after {
		content: '';
		display: inline-block;
		@include arrow($dir, $size, $color);
	}
}

@mixin arrow-before($dir: 'up', $size: 4px, $color: #000) {
	&::before {
		content: '';
		display: inline-block;
		@include arrow($dir, $size, $color);
	}
}


// top-left, top-right, bottom-left, bottom-right
@mixin chevron($dir: 'top-left', $height: 40px, $width: 40px, $color: #000) {
	width: 0;
	height: 0;

	@if ($dir == 'top-left' or $dir == 'top-right') {
		border-top: $height solid $color;
	}

	@if ($dir == 'bottom-left' or $dir == 'bottom-right') {
		border-bottom: $height solid $color;
	}

	@if ($dir == 'top-left' or $dir == 'bottom-left') {
		border-right: $width solid transparent;
	}

	@if ($dir == 'top-right' or $dir == 'bottom-right') {
		border-left: $width solid transparent;
	}
}


@mixin chevron-after($dir: 'top-left', $height: 40px, $width: 40px, $color: #000) {
	&::after {
		content: '';
		display: inline-block;
		@include chevron($dir, $height, $width, $color);
	}
}


@mixin chevron-before($dir: 'top-left', $height: 40px, $width: 40px, $color: #000) {
	&::before {
		content: '';
		display: inline-block;
		@include chevron($dir, $height, $width, $color);
	}
}

以上是关于scss МиксиныдлясозданияCSSстрелокишевронов的主要内容,如果未能解决你的问题,请参考以下文章

scss Правильноразделяемзапятымиэлементысписков

scss Миксиндлябыстрогоиспользованиязапросов@media(max-width ....

php быстраяиндексациямассива。 однаизнаиболеечастоиспользуемыхфункций。

比特币不能购买特斯拉了!今日比特币狂跌背后的原因……

scss зацикленнаяанимациядляспиннера。 $ b $bСоздаемпсевдо-элемент。 Здесьдостаточнонавешиватькласснаоб

php ПлагинMihdan:Yandex Turbo Feed。 Хукидлянастройкиyandexturboподкастомныезаписи,таксономиииполя