wix-style-react/dist/es/src/HorizontalTimeline/HorizontalTimelineIcons.st.css

wix-style-react

/* st-namespace-reference="../../../../src/HorizontalTimeline/HorizontalTimelineIcons.st.css" */
:import {
  -st-from: '../Foundation/stylable/colors.st.css';
  -st-named: D20, D40, R10, B10, B30;
}

:import {
  -st-from: '../Foundation/stylable/easing.st.css';
  -st-named: ease-5, ease-3;
}

.baseIcon {
  box-sizing: border-box;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  margin: 0 4px;
}

.completeIcon {
  -st-states: skin(enum(dark, standard));
  fill: value(D20);
  margin: 0 4px;
}

.completeIcon:skin(standard) {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: value(B10);
}

.errorIcon {
  fill: value(R10);
}

.upcomingIcon {
  -st-states: skin(enum(dark, standard));
  -st-extends: baseIcon;
  border: 2px solid value(D40);
  margin: 0 4px;
}

.upcomingIcon:skin(standard) {
  width: 10px;
  height: 10px;
}

.boundaryIcon {
  -st-states: skin(enum(dark, standard));
  width: 2px;
  height: 12px;
  background-color: value(D20);
  margin: 0 4px;
}

.boundaryIcon:skin(standard) {
  background-color: value(B10);
}

.activeIcon {
  -st-states: skin(enum(dark, standard));
  -st-extends: baseIcon;
  display: flex;
  position: relative;
  border: 2px solid value(D20);
  margin: 0 4px;
}

.activeIcon:skin(standard) {
  background-color: value(B30);
  border: none;
}

.activeIcon::before {
  content: "";
  margin: auto;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: value(D20);
  animation-name: bounce;
  animation-duration: 1000ms;
  animation-iteration-count: infinite;
}

.activeIcon:skin(standard)::before {
  background-color: value(B10);
  animation-name: none;
  height: 8px;
  width: 8px;
}

@keyframes bounce {
  50% {
    transform: scale(1.66);
    animation-timing-function: value(ease-5);
  }

  100% {
    transform: scale(1);
    animation-timing-function: value(ease-3);
  }
}