Steps for activities - WIP

Inspect the full details and code of a selected snippet

<div class="uk-flex-1 uk-flex">
  <div class="uk-container uk-container-small uk-flex-1 uk-flex uk-flex-column uk-margin-medium-top uk-margin-medium-bottom">
    <div class="uk-flex-1 uk-flex uk-flex-column uk-flex-center">
      <div class="uk-width-1-1">
        <div class="uk-text-small uk-text-muted uk-text-uppercase uk-text-semibold uk-margin-small-bottom">Steps for activities</div>
        <div class="uk-card uk-card-default uk-box-shadow-remove uk-padding uk-border-rounded">
          
		  <div class="uk-steps uk-flex uk-border-rounded">
            <div class="uk-flex uk-flex-middle uk-padding-small">
              <i class="far fa-fw fa-2x fa-cart-shopping uk-margin-small-right"></i>
              <div>
                <div class="uk-text-bold">Cart</div>
              	<div class="uk-text-meta">Ckech your products</div>
              </div>
            </div>
            <div class="uk-active uk-flex uk-flex-middle uk-padding-small">
              <i class="far fa-fw fa-2x fa-truck uk-margin-small-right"></i>
              <div>
                <div class="uk-text-bold uk-text-primary">Shipping</div>
              	<div class="uk-text-meta">Choose your shipping options</div>
              </div>
            </div>
            <div class="uk-disabled uk-flex uk-flex-middle uk-padding-small">
              <i class="far fa-fw fa-2x fa-credit-card uk-margin-small-right"></i>
              <div>
                <div class="uk-text-bold">Billing</div>
              	<div class="uk-text-meta">Enter billing information</div>
              </div>
            </div>
          </div>
          <hr>
          <div class="uk-steps uk-border-rounded uk-width-2-5">
            <div class="uk-flex uk-flex-middle uk-padding-small">
              <i class="far fa-fw fa-2x fa-cart-shopping uk-margin-small-right"></i>
              <div>
                <div class="uk-text-bold">Cart</div>
              	<div class="uk-text-meta">Ckech your products</div>
              </div>
            </div>
            <div class="uk-active uk-flex uk-flex-middle uk-padding-small">
              <i class="far fa-fw fa-2x fa-truck uk-margin-small-right"></i>
              <div>
                <div class="uk-text-bold uk-text-primary">Shipping</div>
              	<div class="uk-text-meta">Choose your shipping options</div>
              </div>
            </div>
            <div class="uk-flex uk-flex-middle uk-padding-small">
              <i class="far fa-fw fa-2x fa-credit-card uk-margin-small-right"></i>
              <div>
                <div class="uk-text-bold">Billing</div>
              	<div class="uk-text-meta">Enter billing information</div>
              </div>
            </div>
            <div class="uk-disabled uk-flex uk-flex-middle uk-padding-small">
              <i class="far fa-fw fa-2x fa-square-info uk-margin-small-right"></i>
              <div>
                <div class="uk-text-bold">Confirm Order</div>
              </div>
            </div>
          </div>
          
        </div>
      </div>
      <div class="uk-text-tiny uk-text-right">made by <b>Antonius</b></div>
    </div>
  </div>
</div>

/* Snippets style */
body { background-color: #ebebeb; }
.uk-box-shadow-remove { box-shadow: none; }
.uk-text-tiny { font-size: 8px; }
/* Style */
.uk-steps > div {
  border: solid 1px #c0c0c0;
  position: relative;
}
.uk-steps:not(.uk-flex) > div {
  border-bottom: none;
}
.uk-steps:not(.uk-flex) > div:last-child {
  border-bottom: solid 1px #c0c0c0;
}
.uk-steps.uk-flex > div i {
  margin-left: 5px;
}
.uk-steps.uk-flex > div {
  border-right: none;
}
.uk-steps.uk-flex > div:last-child {
  border-right: solid 1px #c0c0c0;
}
.uk-steps > div.uk-active {
  background-color: #f3f4f5;
}
.uk-steps:not(.uk-flex).uk-border-rounded > div:first-child {
  border-radius: 5px 5px 0 0;
}
.uk-steps:not(.uk-flex).uk-border-rounded > div:last-child {
  border-radius: 0 0 5px 5px;
}
.uk-steps.uk-flex.uk-border-rounded > div:first-child {
  border-radius: 5px 0 0 5px;
}
.uk-steps.uk-flex.uk-border-rounded > div:last-child {
  border-radius: 0 5px 5px 0;
}
.uk-steps > div:not(.uk-active, .uk-disabled) {
  cursor: pointer;
}
.uk-steps.uk-flex > div::after,
.uk-steps:not(.uk-flex) > div.uk-active::after {
  top: 50%;
  right: 0;
  position: absolute;
  z-index: 2;
  content: '';
  width: .7em;
  height: .7em;
  border-width: 0 1px 1px 0;
  border-style: solid;
  border-color: #c0c0c0;
  background-color: #ffffff;
  transform: translateY(-50%) translateX(50%) rotate(-45deg);
  box-sizing: inherit;
}
.uk-steps:not(.uk-flex) > div.uk-active::after {
  background-color: #f3f4f5;
  right: -1px;
}
.uk-steps.uk-flex > div:last-child::after {
  display: none !important;
}
.uk-steps.uk-flex > div.uk-active::after {
  background-color: #f3f4f5;
}
.uk-steps > div.uk-disabled {
  color: #c0c0c0 !important;
}

Information

Detailed overview of a selected code snippet

antonius

28.03.2025, 09:54:55

31.03.2025, 20:42:43

uk-active, uk-border, uk-box, uk-card, uk-container, uk-disabled, uk-flex, uk-margin, uk-padding, uk-steps, uk-text, uk-width

Comments

Browse user feedback and discussions in detail

Currently in development and will be available soon. Stay tuned for updates!