Linked field

In this example below you will see how to do a Linked field with some HTML / CSS and Javascript

For properties that can contain single or multiple values.

Thumbnail
This awesome code was written by nnnnic, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright nnnnic ©
  • HTML
  • CSS
  • JavaScript
    <div class="placeholder">
	<label>Roundness</label>
  <ul>
    <li>
      <a href="#" class="btn-link active"></a>
      <input type="text" value="0px" placeholder="0px">
      <input type="text" placeholder="right">
      <input type="text" placeholder="bottom">
      <input type="text" placeholder="left">
    </li>
  </ul>

</div>

/*Downloaded from https://www.codeseek.co/nnnnic/linked-field-KfFIy */
    .placeholder {
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  max-width: 30rem;
  height: 10rem;
}
body {
  background: #484B4C;
}
label {
	font-size: 1.2rem;
  letter-spacing: .2rem;
  line-height: em;
	color: #777;
	text-transform: uppercase;
}
ul {
  list-style: none;
  padding: 0;
}
  ul li {
    position: absolute;
    padding: 0;
    margin: 0;
    width: 10rem;
    height: 3.7rem;
    border-radius: 6px;
    border: 1px solid #333434;
    background-color: #404141;
    overflow: hidden;
    transition: all .13s cubic-bezier(0.455, 0.030, 0.515, 0.955);
  }

  ul li.active {
    width: 28.5rem;
  }

a.btn-link {
  float: left;
  display: flex;
  width: 3.7rem;
  height: 3.7rem;
  background-color: #595B5B;
  background-position: 50% 50%;
  background-size: 50% 50%;
  background-repeat: no-repeat;
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/49364/ico-link_3.svg);
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
  border-right: 1px solid #333434;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
}
.btn-link.active {
  background-color: #3F4041;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
}

input[type=text] {
  -webkit-appearance: none;
  float: left;
  font-size: 1.2rem;
  display: flex;
  width: 4rem;
  height: 1.7rem;
  line-height: 1.7rem;
  padding: 1rem;
  color: #c6c6c6;
  border: 1px solid transparent;
  background-color: transparent;
  transition: all .11s cubic-bezier(0.455, 0.030, 0.515, 0.955);
}
input[type=text]:first-child {
  margin-left: 4rem;
}
li.active input[type=text] {
  border-right: 1px solid #333434;
}
li.active input[type=text]:last-child {
  border-right: 0;
}

/* fixing focus later */
:focus {
  box-shadow: none;
  outline: none;
    border: 0;
}


/*Downloaded from https://www.codeseek.co/nnnnic/linked-field-KfFIy */
    $(function() {
	$('a.btn-link').click(function() {
      $(this).toggleClass('active');
      $('ul li').toggleClass('active');
  });
});

Comments