@bodynarf/react.components 1.13.8 → 1.14.1

package/components/stepper/component/style.css

@@ -0,0 +1,510 @@
+@keyframes stepper-connector-fill {
+  from {
+    width: 0;
+  }
+  to {
+    width: 100%;
+  }
+}
+.bbr-stepper {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  width: 100%;
+}
+.bbr-stepper.is-vertical {
+  flex-direction: column;
+}
+.bbr-stepper.is-vertical .bbr-stepper-step {
+  flex-direction: row;
+  align-items: flex-start;
+  width: 100%;
+  padding-bottom: 1.5rem;
+}
+.bbr-stepper.is-vertical .bbr-stepper-step:last-child {
+  padding-bottom: 0;
+}
+.bbr-stepper.is-vertical .bbr-stepper-content {
+  margin-top: 0;
+  margin-left: 1rem;
+  text-align: left;
+}
+.bbr-stepper.is-vertical .bbr-stepper-connector {
+  position: absolute;
+  left: calc(1.25rem - 1px);
+  top: 2.5rem;
+  width: 2px;
+  height: calc(100% - 2.5rem + 0.5rem);
+  right: auto;
+}
+.bbr-stepper.is-vertical .bbr-stepper-connector.has-arrow {
+  height: calc(100% - 2.5rem);
+}
+.bbr-stepper.is-vertical .bbr-stepper-connector.has-arrow::after {
+  right: auto;
+  left: 50%;
+  top: auto;
+  bottom: -6px;
+  transform: translateX(-50%);
+  border-top: 6px solid hsl(0, 0%, 86%);
+  border-bottom: none;
+  border-left: 5px solid transparent;
+  border-right: 5px solid transparent;
+}
+.bbr-stepper.is-vertical .bbr-stepper-connector.has-arrow.is-completed::after {
+  border-top-color: hsl(171, 100%, 41%);
+  border-left-color: transparent;
+}
+.bbr-stepper.is-vertical.is-small .bbr-stepper-connector {
+  left: calc(1rem - 1px);
+  top: 2rem;
+  height: calc(100% - 2rem + 0.5rem);
+}
+.bbr-stepper.is-vertical.is-medium .bbr-stepper-connector {
+  left: calc(1.5rem - 1px);
+  top: 3rem;
+  height: calc(100% - 3rem + 0.5rem);
+}
+.bbr-stepper.is-vertical.is-large .bbr-stepper-connector {
+  left: calc(1.75rem - 1px);
+  top: 3.5rem;
+  height: calc(100% - 3.5rem + 0.5rem);
+}
+.bbr-stepper .bbr-stepper-step {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  flex: 1;
+  padding: 0 0.5rem;
+}
+.bbr-stepper .bbr-stepper-step:first-child {
+  padding-left: 0;
+}
+.bbr-stepper .bbr-stepper-step:last-child {
+  padding-right: 0;
+}
+.bbr-stepper .bbr-stepper-step.is-clickable {
+  cursor: pointer;
+}
+.bbr-stepper .bbr-stepper-step.is-clickable .bbr-stepper-marker {
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+.bbr-stepper .bbr-stepper-step.is-clickable:hover .bbr-stepper-marker {
+  transform: scale(1.1);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+}
+.bbr-stepper .bbr-stepper-step.is-completed .bbr-stepper-marker {
+  background: hsl(171, 100%, 41%);
+  border: 2px solid hsl(171, 100%, 41%);
+  color: hsl(0, 0%, 100%);
+}
+.bbr-stepper .bbr-stepper-step.is-completed .bbr-stepper-title {
+  color: hsl(0, 0%, 29%);
+  font-weight: 500;
+}
+.bbr-stepper .bbr-stepper-step.is-current .bbr-stepper-marker {
+  background: hsl(0, 0%, 100%);
+  border: 2px solid hsl(171, 100%, 41%);
+  color: hsl(171, 100%, 41%);
+  box-shadow: 0 0 0 4px rgba(0, 209.1, 177.735, 0.2);
+}
+.bbr-stepper .bbr-stepper-step.is-current .bbr-stepper-title {
+  color: hsl(0, 0%, 21%);
+  font-weight: 600;
+}
+.bbr-stepper .bbr-stepper-step.is-upcoming .bbr-stepper-marker {
+  background: hsl(0, 0%, 100%);
+  border: 2px solid hsl(0, 0%, 86%);
+  color: hsl(0, 0%, 48%);
+}
+.bbr-stepper .bbr-stepper-step.is-upcoming .bbr-stepper-title {
+  color: hsl(0, 0%, 48%);
+}
+.bbr-stepper .bbr-stepper-marker {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.5rem;
+  height: 2.5rem;
+  border-radius: 50%;
+  font-weight: 600;
+  font-size: 1rem;
+  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
+  z-index: 1;
+  flex-shrink: 0;
+}
+.bbr-stepper .bbr-stepper-number,
+.bbr-stepper .bbr-stepper-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.bbr-stepper .bbr-stepper-content {
+  margin-top: 0.75rem;
+  text-align: center;
+}
+.bbr-stepper .bbr-stepper-title {
+  font-size: 0.875rem;
+  line-height: 1.25;
+  transition: color 0.2s ease;
+}
+.bbr-stepper .bbr-stepper-description {
+  margin-top: 0.25rem;
+  font-size: 0.75rem;
+  color: hsl(0, 0%, 48%);
+  line-height: 1.25;
+}
+.bbr-stepper .bbr-stepper-connector {
+  position: absolute;
+  top: calc(1.25rem - 1px);
+  left: calc(50% + 1.25rem + 0.25rem);
+  right: calc(-50% + 1.25rem + 0.25rem);
+  height: 2px;
+  background: hsl(0, 0%, 86%);
+  z-index: 0;
+}
+.bbr-stepper .bbr-stepper-connector.is-completed {
+  background: hsl(171, 100%, 41%);
+}
+.bbr-stepper .bbr-stepper-connector.is-hidden {
+  display: none;
+}
+.bbr-stepper .bbr-stepper-connector.has-arrow::before {
+  content: "";
+  position: absolute;
+  right: -6px;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 0;
+  height: 0;
+  border-top: 5px solid transparent;
+  border-bottom: 5px solid transparent;
+  border-left: 6px solid hsl(0, 0%, 86%);
+  z-index: 2;
+}
+.bbr-stepper .bbr-stepper-connector.has-arrow.is-completed::before {
+  border-left-color: hsl(171, 100%, 41%);
+}
+.bbr-stepper.is-vertical .bbr-stepper-connector.has-arrow::before {
+  right: auto;
+  top: auto;
+  left: 50%;
+  bottom: -6px;
+  transform: translateX(-50%);
+  border-left: 5px solid transparent;
+  border-right: 5px solid transparent;
+  border-top: 6px solid hsl(0, 0%, 86%);
+  border-bottom: none;
+}
+.bbr-stepper.is-vertical .bbr-stepper-connector.has-arrow.is-completed::before {
+  border-top-color: hsl(171, 100%, 41%);
+  border-left-color: transparent;
+}
+.bbr-stepper.is-animated .bbr-stepper-connector.is-completed {
+  position: relative;
+  background: hsl(0, 0%, 86%);
+}
+.bbr-stepper.is-animated .bbr-stepper-connector.is-completed::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  background: hsl(171, 100%, 41%);
+  animation: stepper-connector-fill 0.5s ease forwards;
+}
+.bbr-stepper.is-animated.is-vertical .bbr-stepper-connector.is-completed::after {
+  width: 100%;
+  height: 0;
+  animation: none;
+}
+@keyframes stepper-connector-fill-vertical {
+  from {
+    height: 0;
+  }
+  to {
+    height: 100%;
+  }
+}
+.bbr-stepper.is-animated.is-vertical .bbr-stepper-connector.is-completed::after {
+  animation: stepper-connector-fill-vertical 0.5s ease forwards;
+}
+.bbr-stepper.is-small .bbr-stepper-marker {
+  width: 2rem;
+  height: 2rem;
+  font-size: 0.875rem;
+}
+.bbr-stepper.is-small .bbr-stepper-title {
+  font-size: 0.75rem;
+}
+.bbr-stepper.is-small .bbr-stepper-description {
+  font-size: 0.625rem;
+}
+.bbr-stepper.is-small .bbr-stepper-connector {
+  top: calc(1rem - 1px);
+  left: calc(50% + 1rem + 0.25rem);
+  right: calc(-50% + 1rem + 0.25rem);
+}
+.bbr-stepper.is-medium .bbr-stepper-marker {
+  width: 3rem;
+  height: 3rem;
+  font-size: 1.25rem;
+}
+.bbr-stepper.is-medium .bbr-stepper-title {
+  font-size: 1rem;
+}
+.bbr-stepper.is-medium .bbr-stepper-description {
+  font-size: 0.875rem;
+}
+.bbr-stepper.is-medium .bbr-stepper-connector {
+  top: calc(1.5rem - 1px);
+  left: calc(50% + 1.5rem + 0.25rem);
+  right: calc(-50% + 1.5rem + 0.25rem);
+}
+.bbr-stepper.is-large .bbr-stepper-marker {
+  width: 3.5rem;
+  height: 3.5rem;
+  font-size: 1.5rem;
+}
+.bbr-stepper.is-large .bbr-stepper-title {
+  font-size: 1.125rem;
+}
+.bbr-stepper.is-large .bbr-stepper-description {
+  font-size: 1rem;
+}
+.bbr-stepper.is-large .bbr-stepper-connector {
+  top: calc(1.75rem - 1px);
+  left: calc(50% + 1.75rem + 0.25rem);
+  right: calc(-50% + 1.75rem + 0.25rem);
+}
+.bbr-stepper.is-white .bbr-stepper-step.is-completed .bbr-stepper-marker {
+  background: hsl(0, 0%, 100%);
+  border-color: hsl(0, 0%, 100%);
+  color: hsl(0, 0%, 4%);
+}
+.bbr-stepper.is-white .bbr-stepper-step.is-current .bbr-stepper-marker {
+  border-color: hsl(0, 0%, 100%);
+  color: hsl(0, 0%, 100%);
+  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.2);
+}
+.bbr-stepper.is-white .bbr-stepper-connector.is-completed {
+  background: hsl(0, 0%, 100%);
+}
+.bbr-stepper.is-white .bbr-stepper-connector.has-arrow.is-completed::before {
+  border-left-color: hsl(0, 0%, 100%);
+}
+.bbr-stepper.is-white.is-animated .bbr-stepper-connector.is-completed::after {
+  background: hsl(0, 0%, 100%);
+}
+.bbr-stepper.is-white.is-vertical .bbr-stepper-connector.has-arrow.is-completed::before {
+  border-top-color: hsl(0, 0%, 100%);
+  border-left-color: transparent;
+}
+.bbr-stepper.is-black .bbr-stepper-step.is-completed .bbr-stepper-marker {
+  background: hsl(0, 0%, 4%);
+  border-color: hsl(0, 0%, 4%);
+  color: hsl(0, 0%, 100%);
+}
+.bbr-stepper.is-black .bbr-stepper-step.is-current .bbr-stepper-marker {
+  border-color: hsl(0, 0%, 4%);
+  color: hsl(0, 0%, 4%);
+  box-shadow: 0 0 0 4px rgba(10.2, 10.2, 10.2, 0.2);
+}
+.bbr-stepper.is-black .bbr-stepper-connector.is-completed {
+  background: hsl(0, 0%, 4%);
+}
+.bbr-stepper.is-black .bbr-stepper-connector.has-arrow.is-completed::before {
+  border-left-color: hsl(0, 0%, 4%);
+}
+.bbr-stepper.is-black.is-animated .bbr-stepper-connector.is-completed::after {
+  background: hsl(0, 0%, 4%);
+}
+.bbr-stepper.is-black.is-vertical .bbr-stepper-connector.has-arrow.is-completed::before {
+  border-top-color: hsl(0, 0%, 4%);
+  border-left-color: transparent;
+}
+.bbr-stepper.is-light .bbr-stepper-step.is-completed .bbr-stepper-marker {
+  background: hsl(0, 0%, 96%);
+  border-color: hsl(0, 0%, 96%);
+  color: rgba(0, 0, 0, 0.7);
+}
+.bbr-stepper.is-light .bbr-stepper-step.is-current .bbr-stepper-marker {
+  border-color: hsl(0, 0%, 96%);
+  color: hsl(0, 0%, 96%);
+  box-shadow: 0 0 0 4px rgba(244.8, 244.8, 244.8, 0.2);
+}
+.bbr-stepper.is-light .bbr-stepper-connector.is-completed {
+  background: hsl(0, 0%, 96%);
+}
+.bbr-stepper.is-light .bbr-stepper-connector.has-arrow.is-completed::before {
+  border-left-color: hsl(0, 0%, 96%);
+}
+.bbr-stepper.is-light.is-animated .bbr-stepper-connector.is-completed::after {
+  background: hsl(0, 0%, 96%);
+}
+.bbr-stepper.is-light.is-vertical .bbr-stepper-connector.has-arrow.is-completed::before {
+  border-top-color: hsl(0, 0%, 96%);
+  border-left-color: transparent;
+}
+.bbr-stepper.is-dark .bbr-stepper-step.is-completed .bbr-stepper-marker {
+  background: hsl(0, 0%, 21%);
+  border-color: hsl(0, 0%, 21%);
+  color: #fff;
+}
+.bbr-stepper.is-dark .bbr-stepper-step.is-current .bbr-stepper-marker {
+  border-color: hsl(0, 0%, 21%);
+  color: hsl(0, 0%, 21%);
+  box-shadow: 0 0 0 4px rgba(53.55, 53.55, 53.55, 0.2);
+}
+.bbr-stepper.is-dark .bbr-stepper-connector.is-completed {
+  background: hsl(0, 0%, 21%);
+}
+.bbr-stepper.is-dark .bbr-stepper-connector.has-arrow.is-completed::before {
+  border-left-color: hsl(0, 0%, 21%);
+}
+.bbr-stepper.is-dark.is-animated .bbr-stepper-connector.is-completed::after {
+  background: hsl(0, 0%, 21%);
+}
+.bbr-stepper.is-dark.is-vertical .bbr-stepper-connector.has-arrow.is-completed::before {
+  border-top-color: hsl(0, 0%, 21%);
+  border-left-color: transparent;
+}
+.bbr-stepper.is-primary .bbr-stepper-step.is-completed .bbr-stepper-marker {
+  background: hsl(171, 100%, 41%);
+  border-color: hsl(171, 100%, 41%);
+  color: #fff;
+}
+.bbr-stepper.is-primary .bbr-stepper-step.is-current .bbr-stepper-marker {
+  border-color: hsl(171, 100%, 41%);
+  color: hsl(171, 100%, 41%);
+  box-shadow: 0 0 0 4px rgba(0, 209.1, 177.735, 0.2);
+}
+.bbr-stepper.is-primary .bbr-stepper-connector.is-completed {
+  background: hsl(171, 100%, 41%);
+}
+.bbr-stepper.is-primary .bbr-stepper-connector.has-arrow.is-completed::before {
+  border-left-color: hsl(171, 100%, 41%);
+}
+.bbr-stepper.is-primary.is-animated .bbr-stepper-connector.is-completed::after {
+  background: hsl(171, 100%, 41%);
+}
+.bbr-stepper.is-primary.is-vertical .bbr-stepper-connector.has-arrow.is-completed::before {
+  border-top-color: hsl(171, 100%, 41%);
+  border-left-color: transparent;
+}
+.bbr-stepper.is-link .bbr-stepper-step.is-completed .bbr-stepper-marker {
+  background: hsl(229, 53%, 53%);
+  border-color: hsl(229, 53%, 53%);
+  color: #fff;
+}
+.bbr-stepper.is-link .bbr-stepper-step.is-current .bbr-stepper-marker {
+  border-color: hsl(229, 53%, 53%);
+  color: hsl(229, 53%, 53%);
+  box-shadow: 0 0 0 4px rgba(71.6295, 94.92035, 198.6705, 0.2);
+}
+.bbr-stepper.is-link .bbr-stepper-connector.is-completed {
+  background: hsl(229, 53%, 53%);
+}
+.bbr-stepper.is-link .bbr-stepper-connector.has-arrow.is-completed::before {
+  border-left-color: hsl(229, 53%, 53%);
+}
+.bbr-stepper.is-link.is-animated .bbr-stepper-connector.is-completed::after {
+  background: hsl(229, 53%, 53%);
+}
+.bbr-stepper.is-link.is-vertical .bbr-stepper-connector.has-arrow.is-completed::before {
+  border-top-color: hsl(229, 53%, 53%);
+  border-left-color: transparent;
+}
+.bbr-stepper.is-info .bbr-stepper-step.is-completed .bbr-stepper-marker {
+  background: hsl(207, 61%, 53%);
+  border-color: hsl(207, 61%, 53%);
+  color: #fff;
+}
+.bbr-stepper.is-info .bbr-stepper-step.is-current .bbr-stepper-marker {
+  border-color: hsl(207, 61%, 53%);
+  color: hsl(207, 61%, 53%);
+  box-shadow: 0 0 0 4px rgba(62.0415, 142.46085, 208.2585, 0.2);
+}
+.bbr-stepper.is-info .bbr-stepper-connector.is-completed {
+  background: hsl(207, 61%, 53%);
+}
+.bbr-stepper.is-info .bbr-stepper-connector.has-arrow.is-completed::before {
+  border-left-color: hsl(207, 61%, 53%);
+}
+.bbr-stepper.is-info.is-animated .bbr-stepper-connector.is-completed::after {
+  background: hsl(207, 61%, 53%);
+}
+.bbr-stepper.is-info.is-vertical .bbr-stepper-connector.has-arrow.is-completed::before {
+  border-top-color: hsl(207, 61%, 53%);
+  border-left-color: transparent;
+}
+.bbr-stepper.is-success .bbr-stepper-step.is-completed .bbr-stepper-marker {
+  background: hsl(153, 53%, 53%);
+  border-color: hsl(153, 53%, 53%);
+  color: #fff;
+}
+.bbr-stepper.is-success .bbr-stepper-step.is-current .bbr-stepper-marker {
+  border-color: hsl(153, 53%, 53%);
+  color: hsl(153, 53%, 53%);
+  box-shadow: 0 0 0 4px rgba(71.6295, 198.6705, 141.50205, 0.2);
+}
+.bbr-stepper.is-success .bbr-stepper-connector.is-completed {
+  background: hsl(153, 53%, 53%);
+}
+.bbr-stepper.is-success .bbr-stepper-connector.has-arrow.is-completed::before {
+  border-left-color: hsl(153, 53%, 53%);
+}
+.bbr-stepper.is-success.is-animated .bbr-stepper-connector.is-completed::after {
+  background: hsl(153, 53%, 53%);
+}
+.bbr-stepper.is-success.is-vertical .bbr-stepper-connector.has-arrow.is-completed::before {
+  border-top-color: hsl(153, 53%, 53%);
+  border-left-color: transparent;
+}
+.bbr-stepper.is-warning .bbr-stepper-step.is-completed .bbr-stepper-marker {
+  background: hsl(44, 100%, 77%);
+  border-color: hsl(44, 100%, 77%);
+  color: rgba(0, 0, 0, 0.7);
+}
+.bbr-stepper.is-warning .bbr-stepper-step.is-current .bbr-stepper-marker {
+  border-color: hsl(44, 100%, 77%);
+  color: hsl(44, 100%, 77%);
+  box-shadow: 0 0 0 4px rgba(255, 223.72, 137.7, 0.2);
+}
+.bbr-stepper.is-warning .bbr-stepper-connector.is-completed {
+  background: hsl(44, 100%, 77%);
+}
+.bbr-stepper.is-warning .bbr-stepper-connector.has-arrow.is-completed::before {
+  border-left-color: hsl(44, 100%, 77%);
+}
+.bbr-stepper.is-warning.is-animated .bbr-stepper-connector.is-completed::after {
+  background: hsl(44, 100%, 77%);
+}
+.bbr-stepper.is-warning.is-vertical .bbr-stepper-connector.has-arrow.is-completed::before {
+  border-top-color: hsl(44, 100%, 77%);
+  border-left-color: transparent;
+}
+.bbr-stepper.is-danger .bbr-stepper-step.is-completed .bbr-stepper-marker {
+  background: hsl(348, 86%, 61%);
+  border-color: hsl(348, 86%, 61%);
+  color: #fff;
+}
+.bbr-stepper.is-danger .bbr-stepper-step.is-current .bbr-stepper-marker {
+  border-color: hsl(348, 86%, 61%);
+  color: hsl(348, 86%, 61%);
+  box-shadow: 0 0 0 4px rgba(241.077, 70.023, 104.2338, 0.2);
+}
+.bbr-stepper.is-danger .bbr-stepper-connector.is-completed {
+  background: hsl(348, 86%, 61%);
+}
+.bbr-stepper.is-danger .bbr-stepper-connector.has-arrow.is-completed::before {
+  border-left-color: hsl(348, 86%, 61%);
+}
+.bbr-stepper.is-danger.is-animated .bbr-stepper-connector.is-completed::after {
+  background: hsl(348, 86%, 61%);
+}
+.bbr-stepper.is-danger.is-vertical .bbr-stepper-connector.has-arrow.is-completed::before {
+  border-top-color: hsl(348, 86%, 61%);
+  border-left-color: transparent;
+}