ColorPickerView

by pjmorse

HTML

<script src="https://github.com/downloads/emberjs/ember.js/ember-0.9.8.min.js"></script>
<script src="https://raw.github.com/guilhermeaiolfi/emberjs-ui/master/packages/emberjs-ui/DragMixin.js"></script>
<script src="https://raw.github.com/guilhermeaiolfi/emberjs-ui/master/packages/emberjs-ui/SliderView.js"></script>
<script src="https://raw.github.com/guilhermeaiolfi/emberjs-ui/master/packages/emberjs-ui/SpinnerView.js"></script>
<link rel="stylesheet" href="https://raw.github.com/guilhermeaiolfi/emberjs-ui/master/packages/emberjs-ui/ember-ui.css">
<script src="https://raw.github.com/guilhermeaiolfi/emberjs-ui/master/packages/emberjs-ui/ColorPickerView.js"></script>
<script type="text/x-handlebars">
    {{view UI.ColorPickerView value="121212"}}
</script>

CSS

.ember-listview
{
    margin: 0;
    padding: 0;
    outline: none;
    cursor: default;
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
}
.ember-listview .ember-listview-item
{
    border: 1px solid #ffffff;
    list-style: none;
}
.ember-listview .selected {
    background-color: #222222;
    color: #FFFFFF;
    border: 1px solid #222222;
}
.ember-listview .head
{
    border: 1px solid #222222 !important;
}

.ember-selectview
{
    outline: false;
    cursor: default;
    border: 1px solid #222222;
    background-color: #e1e1e1;
    display: table;
    border-radius: 3px;
    width: 100%;
}
.ember-selectview-display
{
    float: left;
    padding: 1px 3px 1px 3px;
}

.ember-selectview-button
{
    float: right;
    border-left: 1px solid #222222;
    padding: 1px 3px 1px 3px;
    color: #FFFFFF;
    background-color: #222222;
    background-image: linear-gradient(bottom, rgb(46,46,46) 46%, rgb(112,112,112) 73%);
    background-image: -o-linear-gradient(bottom, rgb(46,46,46) 46%, rgb(112,112,112) 73%);
    background-image: -moz-linear-gradient(bottom, rgb(46,46,46) 46%, rgb(112,112,112) 73%);
    background-image: -webkit-linear-gradient(bottom, rgb(46,46,46) 46%, rgb(112,112,112) 73%);
    background-image: -ms-linear-gradient(bottom, rgb(46,46,46) 46%, rgb(112,112,112) 73%);

    background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0.46, rgb(46,46,46)),color-stop(0.73, rgb(112,112,112)));
}

.active .ember-selectview-button
{

    background-color: #444444;
    background-image: linear-gradient(bottom, rgb(112,112,112) 42%, rgb(46,46,46) 73%);
    background-image: -o-linear-gradient(bottom, rgb(112,112,112) 42%, rgb(46,46,46) 73%);
    background-image: -moz-linear-gradient(bottom, rgb(112,112,112) 42%, rgb(46,46,46) 73%);
    background-image: -webkit-linear-gradient(bottom, rgb(112,112,112) 42%, rgb(46,46,46) 73%);
    background-image: -ms-linear-gradient(bottom, rgb(112,112,112) 42%, rgb(46,46,46)...

JavaScript

var App = window.App = Em.Application.create();