Control interface

Control interface.markdown

Control interface

Originally made for controlling a mindstorms robot through a browser.

A Pen by Dennis Johnsen on CodePen.

License.

index.html

<div class="control">
  <div class="row">
    <div class="col  col--6">
      <a class="control__btn  control__btn--up-left" href="#up-left">
        <i class="fa  fa-chevron-up"></i>
      </a>
    </div>
    <div class="col  col--3">
      <a class="control__btn  control__btn--up" href="#up">
        <i class="fa  fa-chevron-up"></i> 
      </a>
    </div>
    <div class="col  col--6">
      <a class="control__btn  control__btn--up-right" href="#up-right">
        <i class="fa  fa-chevron-up"></i>
      </a>
    </div>
    <div class="col  col--2">
      <a class="control__btn  control__btn--turn-left" href="#turn-left">
        <i class="fa  fa-undo"></i>
      </a>
    </div>
    <div class="col  col--4">
      <a class="control__btn  control__btn--left" href="#left">
        <i class="fa  fa-chevron-left"></i>
      </a>
    </div>
    <div class="col  col--3">
      <a class="control__btn  control__btn--fire" href="#fire">
        <i class="fa  fa-crosshairs"></i>
      </a>
    </div>
    <div class="col  col--4">
      <a class="control__btn  control__btn--right" href="#right">
        <i class="fa  fa-chevron-right"></i>
      </a>
    </div>
    <div class="col  col--2">
      <a class="control__btn  control__btn--turn-right" href="#turn-right">
        <i class="fa  fa-repeat"></i>
      </a>
    </div>
    <div class="col  col--6">
      <a class="control__btn  control__btn--down-left" href="#down-left">
        <i class="fa  fa-chevron-down"></i>
      </a>
    </div>
    <div class="col  col--3">
      <a class="control__btn  control__btn--down" href="#down">
        <i class="fa  fa-chevron-down"></i>
      </a>
    </div>
    <div class="col  col--6">
      <a class="control__btn  control__btn--down-right" href="#down-right">
        <i class="fa  fa-chevron-down"></i>
      </a>
    </div>
  </div>
</div>

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

@import "lesshat";

@btn-color:         #95A5A6;
@btn-color--hover:  lighten(@btn-color, 5%);
@btn-color--active: darken(@btn-color, 2.5%);

@fire-color:        #E74C3C;
@fire-color--hover: lighten(@fire-color, 4%);

@border--color: darken(@btn-color, 5%);
@border--width: .5vw;

@skew--up-down:      35;
@skew--left-right:   5.5;
@skew--turn-spacing: -13%;

.control {
  .border-radius(10vw);
  box-shadow: 0 3vw 0vw darken(@border--color, 6%);
  border: @border--width solid @border--color;
  overflow: hidden;
  
  &__btn {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    
    .fa {
      position: absolute;
      z-index: 5;
      color: white;
      left: 50%;
      top: 50%;
      text-align: center;
      height: 10vw;
      width: 10vw;
      margin: -5vw 0 0 -5vw;
      font-size: 0;
      
      &:before {
        font-size: 5vw;
        display: inline-block;
        vertical-align: middle;
      }
      
      &:after {
        content: '';
        display: inline-block;
        vertical-align: middle;
        height: 100%;
        width: 0.001vw;
      }
    }
    
    &--fire {      
      @btn--size: -25%;
      .border-radius(50%);
      .transition(all .1s ease);
      .translate3d(0, 0, 0);
      box-shadow: 0 1.5vw 0 darken(@fire-color, 15%), 0 3vw 0vw fadeOut(darken(@btn-color, 30%), 60%);
      top: @btn--size;
      left: @btn--size;
      right: @btn--size;
      bottom: @btn--size;
      z-index: 4;
      border: .3vw solid darken(@fire-color, 8%);
      background: @fire-color;
      
      &:hover {
        border: .3vw solid darken(@fire-color--hover, 5%);
        background: @fire-color--hover;
      }
      
      &:active {
        .translate3d(0, 1vw, 0);
        box-shadow: 0 .5vw 0 darken(@fire-color, 15%), 0 1.5vw 0vw fadeOut(darken(@btn-color, 30%), 60%);
      }
      
      .fa {
        color: mix(@fire-color, white, 30%);
        
        &:before {
          font-size: 10vw;
        }
      }
    }
    
    &--up,
    &--down {   
      .btn-color;

      &:before,
      &:after {
        content: '';
        position: absolute;
        z-index: 2;
        width: 100%;
        height: 100%;
      }
      
      &:before {
        .skew(unit(@skew--up-down, deg));
      }

      &:after {
        .skew(unit((@skew--up-down * -1), deg));
      }
    }
    
    &--up {      
      &:before {
        .btn-border(left);
        .transform-origin(right bottom);
      }
      
      &:after {
        .btn-border(right);
        .transform-origin(left bottom);
      }
    }
    
    &--down {      
      &:before {
        .btn-border(right);
        .transform-origin(right top);
      }
      
      &:after {
        .btn-border(left);
        .transform-origin(left top);
      }
    }
    
    &--turn-left,
    &--turn-right,
    &--left,
    &--right {
      .btn-color;
      
      &:before,
      &:after {
        content: '';
        position: absolute;
        z-index: 2;
        width: 100%;
        height: 65%;
      }
      
      &:before {
        .skewY(unit(@skew--left-right, deg));
      }

      &:after {
        .skewY(unit((@skew--left-right * -1), deg));
      }
    }
    
    &--left {   
      &:before {
        .btn-border(top);
        .btn-border(left);
        .transform-origin(right top);
        top: 0;
      }
      
      &:after {
        .btn-border(bottom);
        .btn-border(left);
        .transform-origin(right bottom);
        bottom: 0;
      }
    }
    
    &--right {    
      &:before {
        .btn-border(bottom);
        .btn-border(right);
        .transform-origin(left bottom);
        bottom: 0;
      }
      
      &:after {
        .btn-border(top);
        .btn-border(right);
        .transform-origin(left top);
        top: 0;
      }
    }
    
    &--turn-left {
      &:before {
        .btn-border(top);
        .transform-origin(right top);
        top: @skew--turn-spacing;
      }
      
      &:after {
        .btn-border(bottom);
        .transform-origin(right bottom);
        bottom: @skew--turn-spacing;
      }
    }
    
    &--turn-right {      
      &:before {
        .btn-border(bottom);
        .transform-origin(left bottom);
        bottom: @skew--turn-spacing;
      }
      
      &:after {
        .btn-border(top);
        .transform-origin(left top);
        top: @skew--turn-spacing;
      }
    }
    
    &--up-left,
    &--up-right,
    &--down-left,
    &--down-right {
      .btn-color;
    }
    
    &--up-left,
    &--down-right {
      .fa {
        .rotate(-45deg);
      }
    }
    
    &--up-right,
    &--down-left {
       .fa {
        .rotate(45deg);
      }
    }
  }
  
  > .row > .col {
    position: relative;
    
    //setting the initial height pr.line
    &--3 {
      &:before {
        padding-top: 100%;
        content: '';
        height: 0;
      }
    }
  }
}

.@{row-namespace} {
  margin-left: unit((@grid-gutter * -1), px);
  display: flex;
  flex: 0 1 auto;
  flex-direction: row;
  flex-wrap: wrap;

  > .@{col-namespace} {
    padding-left: unit(@grid-gutter, px);;
    display: flex;
    flex: 0 1 auto;
    flex-direction: column;
    flex-grow: 0;
    flex-shrink: 0;
  }

  .for(@grid-columns); .-each(@grid-column) {
    & > .@{col-namespace}--@{grid-column} {
      .col-declarations;
    }
  }
}

body {
  padding: 24px;
}

*,
*:before,
*:after {
  .box-sizing(border-box);
}


/*  -------------------------------------
    Config
-------------------------------------- */
/* How many columns do you want in the grid?
*/
@grid-columns:      15;

/*  Change the gutter size between the grid columns (in pixels)
*/
@grid-gutter:       0;

/*  Responsive breakpoints
*/
@breakpoints:       0; //0 = Not responsive
@breakpoints-sizes: 480, 768, 1024, 1280, 1440, 1680, 1920; //In pixels

@row-namespace:     row;
@col-namespace:     col;


/*  -------------------------------------
    Mixins
-------------------------------------- */
.for(@i, @n) {.-each(@i)}
.for(@n)     when (isnumber(@n)) {.for(1, @n)}
.for(@i, @n) when not (@i = @n)  {
  .for((@i + (@n - @i) / abs(@n - @i)), @n);
}

.for(@array)   when (default()) {.for-impl_(length(@array))}
.for-impl_(@i) when (@i > 1)    {.for-impl_((@i - 1))}
.for-impl_(@i) when (@i > 0)    {.-each(extract(@array, @i))}

.col-declarations() {
  flex-basis: (@grid-column / @grid-columns * 100%);
}

.btn-color(@initial: @btn-color, @hover: @btn-color--hover, @active: @btn-color--active) {
  .transition(all .8s ease);
  
  background: @initial;
  
  &:before,
  &:after {
    .transition(all .8s ease);
    background: @initial;
  }

  &:hover { 
    .transition(all .1s ease);
    background: @hover;
    
    &:before,
    &:after {
      .transition(all .1s ease);
      background: @hover;
    }
  }
  
  &:active { 
    .transition(all .05s ease);
    background: @active;
    
    &:before,
    &:after {
      .transition(all .05s ease);
      background: @active;
    }
  }
}

.btn-border(@direction) {
  & when (length(@direction) > 0) {
    border-@{direction}: @border--width solid @border--color;
  }
  
  & when (@direction = all) {
    border: @border--width solid @border--color;
  }
}