Fractions UI Elements

In this example below you will see how to do a Fractions UI Elements with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by tswone, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright tswone ©
  • HTML
  • CSS
  • JavaScript
    <ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Diamond</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="profile-tab" data-toggle="tab" href="#measure" role="tab" aria-controls="profile" aria-selected="false">Measure</a>
  </li>
</ul>
<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
    <div class="main main-full">
      <div class="bar">
        <div class="bar-grp" style="margin-left: 112px;">
          <div class="moves">
            <a href=""></a>
            <a href=""></a>
            <a href=""></a>
            <a href=""></a>
          </div>
          <div class="label">moves</div>      
        </div>

        <div class="bar-grp" style="margin-left: 235px;">
          <ul>
            <li><a href="#"><span class="num"><i class="material-icons">arrow_back</i></span></a></li>
            <li><a href="#"><span class="num"><i class="material-icons">arrow_forward</i></span></a></li>
          </ul>
          <div class="label">direction</div>
        </div>
        <div class="bar-grp" style="margin-left: 90px;">
          <ul>
            <li><a href="#"><span class="num"><span class="fraction">1/2</span></span></a></li>
            <li><a href="#"><span class="num">1</span></a></li>
            <li><a href="#"><span class="num">1<span class="fraction">1/2</span></span></a></li>
          </ul>
          <div class="label">distance</div>      
        </div>
        <div class="bar-grp" style="margin-left: 145px;">
          <ul>
            <li><a class="bare" href="#"><i class="material-icons">replay</i></a></li>
          </ul>
          <div class="label">reset</div>      
        </div>
        <div class="bar-grp" style="margin-left: 50px;">
          <ul>
            <li><a class="bare" href="#"><i class="material-icons">lightbulb_outline</i></a></li>
          </ul>
          <div class="label">hint</div>      
        </div>
      </div>
    </div>
    <div class="main">
      <div class="bar">
        <div class="bar-grp" style="margin-left: 112px;">
          <div class="moves">
            <a href=""></a>
            <a href=""></a>
            <a href=""></a>
            <a href=""></a>
          </div>
          <div class="label">moves</div>      
        </div>
        <div class="bar-grp" style="margin-left: 160px;">
          <ul>
            <li><a href="#"><span class="num"><i class="material-icons">arrow_back</i></span></a></li>
            <li><a href="#"><span class="num"><i class="material-icons">arrow_upward</i></span></a></li>
            <li><a href="#"><span class="num"><i class="material-icons">arrow_forward</i></span></a></li>
          </ul>
          <div class="label">direction</div>
        </div>
        <div class="bar-grp" style="margin-left: 100px;">
          <ul>
            <li><a href="#"><span class="num"><span class="fraction">1/2</span></span></a></li>
            <li><a href="#"><span class="num">1</span></a></li>
            <li><a href="#"><span class="num">1<span class="fraction">1/2</span></span></a></li>
          </ul>
          <div class="label">distance</div>      
        </div>
        <div class="bar-grp" style="margin-left: 120px;">
          <ul>
            <li><a class="bare" href="#"><i class="material-icons">replay</i></a></li>
          </ul>
          <div class="label">reset</div>      
        </div>
        <div class="bar-grp" style="margin-left: 50px;">
          <ul>
            <li><a class="bare" href="#"><i class="material-icons">lightbulb_outline</i></a></li>
          </ul>
          <div class="label">hint</div>      
        </div>
      </div>
    </div>
    <div class="main" style="background-color: #A6F8FB;">
      <div class="bar invert">
        <div class="bar-grp" style="margin-left: 112px;">
          <div class="moves">
            <a href=""></a>
            <a href=""></a>
            <a href=""></a>
            <a href=""></a>
          </div>
          <div class="label">moves</div>      
        </div>
        <div class="bar-grp" style="margin-left: 160px;">
          <ul>
            <li><a href="#"><span class="num"><i class="material-icons">arrow_back</i></span></a></li>
            <li><a href="#"><span class="num"><i class="material-icons">arrow_upward</i></span></a></li>
            <li><a href="#"><span class="num"><i class="material-icons">arrow_forward</i></span></a></li>
          </ul>
          <div class="label">direction</div>
        </div>
        <div class="bar-grp" style="margin-left: 100px;">
          <ul>
            <li><a href="#"><span class="num"><span class="fraction">1/2</span></span></a></li>
            <li><a href="#"><span class="num">1</span></a></li>
            <li><a href="#"><span class="num">1<span class="fraction">1/2</span></span></a></li>
          </ul>
          <div class="label">distance</div>      
        </div>
        <div class="bar-grp" style="margin-left: 120px;">
          <ul>
            <li><a class="bare" href="#"><i class="material-icons">replay</i></a></li>
          </ul>
          <div class="label">reset</div>      
        </div>
        <div class="bar-grp" style="margin-left: 50px;">
          <ul>
            <li><a class="bare" href="#"><i class="material-icons">lightbulb_outline</i></a></li>
          </ul>
          <div class="label">hint</div>      
        </div>
      </div>
    </div>
    
  
  
  </div>
  <div class="tab-pane fade" id="measure" role="tabpanel" >
    <div class="bar dark">
      <div class="bar-grp bar-grp-stacked" style="margin-left: 160px;">
        <ul>
            <li><a href="#"><span class="num"><i class="material-icons">arrow_back</i></span></a></li>
            <li><a class="selected" href="#"><span class="num"><i class="material-icons">arrow_upward</i></span></a></li>
            <li><a href="#"><span class="num"><i class="material-icons">arrow_forward</i></span></a></li>
          </ul>
      </div>
    </div>
    <div class="bar light">
      <div class="bar-grp bar-grp-stacked" style="margin-left: 160px;">
        <ul>
            <li><a class="selected" href="#"><span class="num"><i class="material-icons">arrow_back</i></span></a></li>
            <li><a href="#"><span class="num"><i class="material-icons">arrow_upward</i></span></a></li>
            <li><a href="#"><span class="num"><i class="material-icons">arrow_forward</i></span></a></li>
          </ul>
      </div>
    </div>
    
    
  </div>
</div>
  

/*Downloaded from https://www.codeseek.co/tswone/fractions-ui-elements-EbeXMV */
    @import url(https://fonts.googleapis.com/icon?family=Material+Icons);
html {font-family:Arial, Helvetica, sans-serif;-webkit-font-smoothing:antialiased; color: #333;}


@nice-blue: #8EC9FC;
@border: 2px;
#measure {
  padding-top: 440px;
  background: url(https://drive.google.com/uc?id=1lbK1mdEHwhw1nKNM29NWyC0F8AEivfuu) 0 100% no-repeat;
}

.main.main-full {
  padding-top: 600px;
  background: url(https://drive.google.com/uc?id=1F_nPGbTpydWwiUSYjYSvYd4CaN2rAWT1) 0 100% no-repeat;
}
.main {
  padding: 25px 0 12px 0;
  margin-bottom: 10px;
  width: 1190px;
  background: #854F43;
}
.bar:after {
  content: "";
  display: table;
  clear: both;
}
.bar {
  .bar-grp {
    float: left; 
    .label {
      text-align: center;
      text-transform: uppercase;
      color: #fff;
      font-size: 90%;
      font-weight: bold;
    }
    .moves {
      a {
        display: block;
        float: left;
        margin: 10px 0 19px 4px;
        width: 21px;
        height: 21px;
        border-radius: 50%;
        background-color: @nice-blue;
        border: @border solid #fff;
      }
    }
    ul {
      list-style: none;
      margin: 0 0 0 0;
      padding: 0;
      li {
        margin: 0 0 6px 10px;
        padding: 0;
        float: left;
        a {
          border: @border solid #fff;
          display: block;
          border-radius: 6px;          
          text-decoration: none;
          color: #fff;
          font-size: 32px;
          text-align: center;
          min-width: 56px;
          .num {
            display: block;
            font-weight: bold;            
            height: 52px;
            line-height: 48px;
            padding:0 4px;
          }
          .material-icons {
            margin-top: 4px;
            display: inline-block;
            font-size: 44px;
            
          }
          .fraction {
            padding: 0 4px;
            
            display: inline-block;
            position: relative;
            text-align: center;               
            font-weight: normal;
            .top, .bottom {
              left: 50%;
              transform: translate(-50%, 0);
              line-height: 1em;
              padding: 0 5px;                 
              font-weight: bold;
              position: absolute;
              display: block;
              font-size: 70%;                
            }
            .top {
              top: 0.05em;
            }
            .bottom {    
              bottom: -0.15em;
            }
          }
        }
        a.bare { border: none; margin-bottom: 1px; }
        a:hover {
          border-color: @nice-blue;
          color: @nice-blue;
        }
        a:active, a.selected {
          border-color: #fff;
          background-color: @nice-blue;
          color: #fff;
        }
      }
      li:first-child { margin-left: 0 }
    }
  }
  // .bar-grp:last-child { margin: right; }
  // .bar-grp:nth-child { margin: right; }
  .bar-grp-stacked {
    ul {      
      li {
        float: none;
        margin-left: 0;
      }
    }
  }
}
.bar.invert {
  .label {color: #111; }
  .moves a { border-color: #111; }
  ul li a { color: #111; border-color: #111; }
}
.bar.dark {
  .label {color: #111; }
  .moves a { border-color: #fff; }
  ul li {
    a {
      border-radius: 4px;
      color: #fff;
      background-color:rgba(255,255,255,.15);
      border-color: #444;
    }
    a:hover {
      border-color:#444;
      color: #fff;
      opacity: 0.7;
    }
    a:active, a.selected {
      border-color: #444;
      background-color: #222;
      border-bottom-width: 2px;
    }
  }
}
.bar.light {
  .label {color: #111; }
  .moves a { border-color: #fff; }
  ul li {
    a {
      border-radius: 4px;
      color: #fff;
      border-color:rgba(255,255,255,.5);
      background-color:rgba(255,255,255,.15);
    }
    a:hover {
      border-color:rgba(255,255,255,.5);
      color: #fff;
      opacity: 0.7;
    }
    a:active, a.selected {
      border-color:rgba(255,255,255,.5);
      color: #1433AA;
    }
  }
}


/*Downloaded from https://www.codeseek.co/tswone/fractions-ui-elements-EbeXMV */
    var i = 0;

$('.fraction').each(function(key, value) {
    $this = $(this)
    var split = $this.html().split("/")
    if( split.length == 2 ){
        $this.html('<span class="top">'+split[0]+'</span>&ndash;<span class="bottom">'+split[1]+'</span>')
    }    
});
$('a').on('click', function(e) { e.preventDefault(); })
$( ".bar-grp" ).draggable({
  // revert: true
});

Comments