Skip to content

Instantly share code, notes, and snippets.

@shahidkarimi
Forked from anonymous/Control interface.markdown
Last active February 2, 2016 13:36
Show Gist options
  • Save shahidkarimi/b498f522986ec441cd7a to your computer and use it in GitHub Desktop.
Save shahidkarimi/b498f522986ec441cd7a to your computer and use it in GitHub Desktop.
Responsive control interface

Control Interface consists of: Left, right, up, down and dignal buttons. Fully responsive

<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>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
@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;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment