this repo has no description
Replace bull with round icon
+12
-6
+10
-5
src/app.css
+10
-5
src/app.css
···
1111
1111
backdrop-filter: blur(12px) invert(0.25);
1112
1112
}
1113
1113
button.carousel-dot {
1114
-
font-weight: bold;
1115
1114
backdrop-filter: none !important;
1116
-
transition: all 0.2s;
1117
1115
}
1118
1116
button.carousel-dot[disabled] {
1119
1117
pointer-events: none;
1120
1118
}
1121
-
button.carousel-dot:not(.active) {
1119
+
button.carousel-dot .icon {
1120
+
transition: all 0.2s;
1121
+
transform: scale(0.5);
1122
+
}
1123
+
button.carousel-dot:not(.active) .icon {
1122
1124
opacity: 0.5;
1123
1125
}
1124
-
button.carousel-dot:not(.active):is(:hover, :focus) {
1126
+
button.carousel-dot:not(.active):is(:hover, :focus) .icon {
1125
1127
opacity: 1;
1126
1128
}
1127
1129
button.carousel-dot:is(.active, [disabled].active) {
1128
1130
opacity: 1;
1129
-
transform: scale(2.2) translateY(-0.5px);
1131
+
}
1132
+
button.carousel-dot:is(.active, [disabled].active) .icon {
1133
+
opacity: 1;
1134
+
transform: scale(1);
1130
1135
}
1131
1136
@media (hover: hover) {
1132
1137
.carousel-top-controls {
+1
src/components/icon.jsx
+1
src/components/icon.jsx
···
88
88
layout5: () => import('@iconify-icons/mingcute/layout-5-line'),
89
89
announce: () => import('@iconify-icons/mingcute/announcement-line'),
90
90
alert: () => import('@iconify-icons/mingcute/alert-line'),
91
+
round: () => import('@iconify-icons/mingcute/round-fill'),
91
92
};
92
93
93
94
function Icon({