@ebrains/components 2.3.0 → 2.4.0

package/dist/collection/components/eds-steps/eds-steps.css

@@ -0,0 +1,463 @@
+blockquote,
+dl,
+dd,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+hr,
+figure,
+p,
+pre {
+  margin: 0;
+}
+
+.steps {
+  position: sticky;
+  margin-left: 16px;
+  border-left: 1px solid var(--soft-color, #ddd);
+  /* replace var() with your color if needed */
+  padding-left: 23px;
+  counter-reset: step;
+}
+
+/* Style for h3 headings inside the steps */
+.steps h3 {
+  counter-increment: step;
+  font-size: var(--f-heading-05-fontSize);
+  font-weight: var(--f-heading-05-fontWeight);
+  line-height: var(--f-heading-05-lineHeight);
+  position: relative;
+}
+
+.steps h3::before {
+  content: counter(step);
+  position: absolute;
+  left: -40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  font-size: 1rem;
+  border: 1px solid #ccc;
+  /* adjust border style as needed */
+  background: var(--grey-900);
+  /* adjust background color as needed */
+  color: #fff;
+  /* adjust text color as needed */
+  border-radius: 50%;
+}
+
+/* Style for h4 headings inside the steps */
+.steps h4,
+.steps h5 {
+  counter-increment: step;
+  font-size: var(--f-heading-06-fontSize);
+  font-weight: var(--f-heading-06-fontWeight);
+  line-height: var(--f-heading-06-lineHeight);
+  position: relative;
+}
+
+.steps h4::before,
+.steps h5::before {
+  content: counter(step);
+  position: absolute;
+  left: -39px;
+  top: -2px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 31px;
+  height: 31px;
+  font-size: 0.875rem;
+  border: 1px solid #ccc;
+  background: #333;
+  color: #fff;
+  border-radius: 50%;
+}
+
+/* Style for blockquotes inside the steps */
+.steps blockquote {
+  margin-top: 16px;
+  margin-bottom: 16px;
+  font-style: italic;
+  color: #aaa;
+  padding-left: 6px;
+}
+
+.steps-img-placeholder {
+  width: 100%;
+  height: 200px;
+  /* Adjust the height as needed */
+  background: linear-gradient(to bottom, #9CE142, #00C959, #00A595);
+  /* Optionally add border, padding or any other styles */
+}
+
+.bg-\[\#00A595\] {
+  --tw-bg-opacity: 1;
+  background-color: rgb(0 165 149 / var(--tw-bg-opacity));
+}
+
+.relative {
+  position: relative;
+}
+
+.f-heading-04 {
+  font-family: var(--f-heading-04-fontFamily);
+  font-weight: var(--f-heading-04-fontWeight);
+  font-size: var(--f-heading-04-fontSize);
+  line-height: var(--f-heading-04-lineHeight);
+  letter-spacing: var(--f-heading-04-letterSpacing);
+}
+
+.f-body-02 {
+  font-family: var(--f-body-02-fontFamily);
+  font-weight: var(--f-body-02-fontWeight);
+  font-size: var(--f-body-02-fontSize);
+  line-height: var(--f-body-02-lineHeight);
+  letter-spacing: var(--f-body-02-letterSpacing);
+}
+
+.f-ui-02 {
+  font-family: var(--f-ui-02-fontFamily);
+  font-weight: var(--f-ui-02-fontWeight);
+  font-size: var(--f-ui-02-fontSize);
+  line-height: var(--f-ui-02-lineHeight);
+  letter-spacing: var(--f-ui-02-letterSpacing);
+}
+
+.f-ui-03 {
+  font-family: var(--f-ui-03-fontFamily);
+  font-weight: var(--f-ui-03-fontWeight);
+  font-size: var(--f-ui-03-fontSize);
+  line-height: var(--f-ui-03-lineHeight);
+  letter-spacing: var(--f-ui-03-letterSpacing);
+}
+
+.text-center {
+  text-align: center;
+}
+
+.text-default {
+  color: var(--black);
+}
+
+.text-inverse {
+  color: var(--white);
+}
+
+.text-light {
+  color: var(--grey-700);
+}
+
+.text-lighter {
+  color: var(--grey-600);
+}
+
+.w-full {
+  width: 100%;
+}
+
+.h-52 {
+  height: 3.25rem;
+}
+
+.h-96 {
+  height: 6rem;
+}
+
+.h-\[200px\] {
+  height: 200px;
+}
+
+.justify-between {
+  justify-content: space-between;
+}
+
+.mt-16 {
+  margin-top: 1rem;
+}
+
+.mt-32 {
+  margin-top: 2rem;
+}
+
+.mt-64 {
+  margin-top: 4rem;
+}
+
+.my-16 {
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+}
+
+.mb-12 {
+  margin-bottom: 0.75rem;
+}
+
+.mb-16 {
+  margin-bottom: 1rem;
+}
+
+.last\:mb-0:last-child {
+  margin-bottom: 0rem;
+}
+
+.last\:mt-16:last-child {
+  margin-top: 1rem;
+}
+
+.border-softer {
+  border: 2px solid rgba(0, 0, 0, .1);
+}
+
+.relative {
+  position: relative;
+}
+
+.flex {
+  display: flex;
+}
+
+.inline-flex {
+  display: inline-flex;
+}
+
+.grow {
+  flex-grow: 1;
+}
+
+.rounded {
+  border-radius: 0.25rem;
+}
+
+.rounded-lg {
+  border-radius: 16px;
+}
+
+.rounded-t-lg {
+  border-top-left-radius: 16px;
+  border-top-right-radius: 16px;
+}
+
+.border-2 {
+  border-width: 2px;
+}
+
+.p-8 {
+  padding: 0.5rem;
+}
+
+.p-24 {
+  padding: 1.5rem;
+}
+
+.bg-default {
+  background-color: var(--grey-200);
+}
+
+.bg-inverse {
+  background-color: var(--white);
+}
+
+.top-2 {
+  top: 0.125rem;
+}
+
+.bottom-2 {
+  bottom: 0.125rem;
+}
+
+.left-2 {
+  left: 0.125rem;
+}
+
+.right-2 {
+  right: 0.125rem;
+}
+
+.-translate-x-1\/2 {
+  --tw-translate-x: -50%;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.-translate-y-1\/2 {
+  --tw-translate-y: -50%;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.overflow-hidden {
+  overflow: hidden;
+}
+
+.space-y-8 {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
+}
+
+.space-y-16 {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
+}
+
+.ml-8 {
+  margin-left: 0.5rem;
+}
+
+.gap-y-16 {
+  row-gap: 1rem;
+}
+
+.gap-x-16 {
+  -moz-column-gap: 1rem;
+  column-gap: 1rem;
+}
+
+.flex {
+  display: flex;
+}
+
+.grid {
+  display: grid;
+}
+
+.hidden {
+  display: none;
+}
+
+.block {
+  display: block;
+}
+
+.items-center {
+  align-items: center;
+}
+
+.px-8 {
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+}
+
+.pb-20 {
+  padding-bottom: 1.25rem;
+}
+
+/* Cursor pointer only applies in linear mode via role="button" */
+.eds-steps__title[role="button"] { 
+  cursor: pointer; 
+}
+
+.eds-steps__title.is-disabled {
+  cursor: not-allowed;
+  color: rgba(0, 0, 0, 0.5); /* dim text only */
+}
+
+/* Ensure the circle remains fully visible */
+.eds-steps__title.is-disabled::before {
+  opacity: 1;
+  filter: none;
+}
+
+/* Horizontal orientation styles */
+.steps--horizontal {
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+}
+
+.horizontal-indicators {
+  display: flex;
+  justify-content: space-between;
+  gap: 1rem;
+  padding: 1rem 0;
+}
+
+.horizontal-step {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.5rem;
+  cursor: pointer;
+  flex: 1;
+  position: relative;
+}
+
+.horizontal-step:not(:last-child)::after {
+  content: '';
+  position: absolute;
+  top: 1.25rem;
+  left: 50%;
+  width: 100%;
+  height: 2px;
+  background-color: #e0e0e0;
+  z-index: -1;
+}
+
+.horizontal-step.is-completed:not(:last-child)::after {
+  background-color: var(--green-500); /* green */
+}
+
+.step-indicator {
+  width: 2.5rem;
+  height: 2.5rem;
+  border-radius: 50%;
+  border: 2px solid #e0e0e0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: white;
+  transition: all 0.3s ease;
+}
+
+.horizontal-step.is-active .step-indicator {
+  border-color: var(--green-500); /* green */
+  background-color: var(--green-500);
+  color: var(--white);
+}
+
+.horizontal-step.is-completed .step-indicator {
+  border-color: var(--green-500); /* green */
+  background-color: var(--white);
+}
+
+.horizontal-step.is-disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.step-number {
+  font-weight: 600;
+  font-size: 0.875rem;
+}
+
+.step-label {
+  font-size: 0.875rem;
+  text-align: center;
+  font-weight: 500;
+}
+
+.horizontal-step.is-active .step-label {
+  color: var(--green-500);
+}
+
+.step-content {
+  padding: 2rem 0;
+  /* Align content to start under the first step indicator */
+  margin-left: calc((100% / var(--step-count, 1)) * 0.45 - 1.25rem);
+  margin-right: calc((100% / var(--step-count, 1)) * 0.45 - 1.25rem);
+}
+
+.opacity-50 {
+  opacity: 0.5;
+}
+
+
+/* Cursor pointer only applies in linear mode via role="button" */
+.eds-steps__title[role="button"] { 
+  cursor: pointer; 
+}