diff --git a/src/styles/index.scss b/src/styles/index.scss index c70c4781d5..0cb1a1a21b 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -1,3 +1,4 @@ +/* Глобальные настройки */ * { margin: 0; padding: 0; @@ -9,6 +10,7 @@ body { background-color: #f9f9f9; } +/* Карточки продуктов */ .product-cards { display: flex; justify-content: center; @@ -22,7 +24,7 @@ body { &[data-qa='card'] { border-color: #007bff; - animation: highlight 0.5s ease; + animation: highlight 0.5s ease; /* Анимация, которая отключается в тестах */ } } @@ -53,31 +55,33 @@ body { border-radius: 4px; font-weight: 700; transition: background-color 0.3s; + &:hover { + background-color: #0056b3; } } + &__rating { + display: flex; + justify-content: center; + margin: 10px 0; + border: 1px solid #ccc; + border-radius: 8px; + background-color: #fff; + text-align: center; + padding: 16px; -.product-cards__rating { - display: flex; - justify-content: center; - margin: 10px 0; - border: 1px solid #ccc; - border-radius: 8px; - background-color: #fff; - text-align: center; - padding: 16px; + .star { + width: 20px; + height: 20px; + background-image: url('../images/star-active.svg'); + background-size: cover; + margin: 0 2px; + cursor: pointer; - .star { - width: 20px; - height: 20px; - background-image: url('../images/star-active.svg'); - background-size: cover; - margin: 0 2px; - cursor: pointer; - &:hover, - &:hover ~ .star { - background-image: url('../images/star.svg'); + &:hover, + &:hover ~ .star { + background-image: url('../images/star.svg'); + } } } } -