@fman2

Как можно сократить этот код?

.block-category {

	&__item {
		background-size: cover;
		height: 325px;
		border-radius: $border-radius;
		overflow: hidden;
		margin-bottom: 2rem;
		position: relative;
		transition: $transition;

		&:before {
			content:'';
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: linear-gradient(to right, #45cc9c 0%, #39b5f1 100%);
			opacity: 0;
			transition: $transition;
		}

		&:hover {

			box-shadow: 0px 5px 30px 0px rgba(0, 0, 0, 0.1);

			&:before {
				opacity: .5;
			}

			.block-category__button {
				background: linear-gradient(to right, #45cc9c 0%, #39b5f1 100%);
				color:  $white;
			}

		}

	}

	&__count {

	  	&:before {
	  		content:'';
	  		position: absolute;
	  		border: 60px solid transparent;	
	  		border-top: 60px solid #ffce64;
			top: 0;
			left: 50%;
	  		transform: translateX(-50%);
	  	}

	}

	&__number {
		position: absolute;
		top: .5rem;
		left: 50%;
	  	transform: translateX(-50%);
	  	z-index: 10;
	  	font-weight: 800;
	  	color: #5372ab;
	  	font-size: 1.25rem;
	}


	&__button {

	  display: inline-block;
	  border-width: 3px;
	  border-color: rgb(235, 235, 235);
	  border-style: solid;
	  border-radius: 10px;
	  background-color: rgb(255, 255, 255);

	  font-size: 1rem;
	  color: rgb(0, 0, 0);
	  font-weight: 700;
	  text-transform: uppercase;
	  text-align: center;
	  letter-spacing: 3px;

	  padding: .8rem 1.8rem;

	  position: absolute;
	  bottom: 1.5rem;
	  left: 50%;
	  transform: translateX(-50%);
	  transition: $transition;
	  white-space: nowrap;
	}
}


Подскажите, как бы вы сократили код выше? Про border я знаю :)
  • Вопрос задан
  • 91 просмотр
Пригласить эксперта
Ответы на вопрос 1
@Lord_Dantes
Убрать пробелы все.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы