lucuma-css.solar-system.scss Maven / Gradle / Ivy

Go to download

Show more of this group Show more artifacts with this name
Show all versions of lucuma-ui_sjs1_3 Show documentation

lucuma-ui

There is a newer version: 0.123.0

/* KEYFRAMES */

@keyframes spin {
  from {
    transform: rotate(0);
  }

  to{
    transform: rotate(360deg);
  }
}

/* GRID STYLING */

:root {
  --solar-system-bodies-color: var(--explore-accent-color);
  --solar-system-period-factor: 0.7;
  --solar-system-scale-factor: 0.5;
  --solar-system-size: 400px;
}

.solar-system {
  position: absolute;
  left: calc(50% - var(--solar-system-size) / 2);
  top: calc(50% - var(--solar-system-size) / 2);
  width: var(--solar-system-size);
  height: var(--solar-system-size);
  display: flex;
  justify-content: center;
  align-items: center;
  transform: scale(var(--solar-system-scale-factor));
}

.orbit {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
}

.mars-orbit {
  width: 355px;
  height: 355px;
  animation: spin calc(23.4s * var(--solar-system-period-factor)) linear 0s infinite;
}

.earth-orbit {
  width: 233px;
  height: 233px;
  animation: spin calc(26.8s * var(--solar-system-period-factor)) linear 0s infinite;
}

.venus-orbit {
  width: 168px;
  height: 168px;
  animation: spin calc(16.7s * var(--solar-system-period-factor)) linear 0s infinite;
}

.mercury-orbit {
  width: 90px;
  height: 90px;
  animation: spin calc(4.9s * var(--solar-system-period-factor)) linear 0s infinite;
}

.planet {
	position: absolute;
	top: -5px;
  width: 10px;
  height: 10px;
	border-radius: 50%;
  background-color: var(--explore-accent-color);
}

.venus {
  top: -5.5px;
  height: 11px;
  width: 11px;
}

.earth {
  top: -6.5px;
  height: 13px;
  width: 13px;
}

.mars {
  top: -5px;
  height: 10px;
  width: 10px;
}

.sun {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: var(--explore-accent-color);
}