brite/sample/draw/css/Draw.css

DOM Centric Minimalistic MVC Framework

.Draw{
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background-color: #555;
}

/* --------- Edit Layers --------- */
.Draw-selectLayer{
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  overflow: hidden;
}

.Draw-selectPoint{
  position: absolute;
  width: 8px;
  height: 8px;
  border: solid 1px #618926;
  cursor: pointer;
  -webkit-border-radius: 8px;
  background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #98ba40),color-stop(.35, #a6c250),color-stop(1, #618926));
  opacity: .5;
}

.Draw-selectPoint.sel{
  opacity: 1;
}

.Draw-penLayer{
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;  
  cursor: url("pen.cur"), default;
}

.Draw-circleLayer{
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;  
  cursor: url("circle.cur"), default;
}
.Draw-squareLayer{
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  cursor: url("square.cur"), default;
}

.Draw-selectBox{
    position: absolute;
    border: dotted 1px #999;
    cursor:move;
}

/* --------- /Edit Layers --------- */


/* --------- Draw Icons --------- */
[class^="Draw-ico-"]{
 width: 16px; 
 height: 16px;
 display: block;
 float: left;
 background-image: url(images/demo-draw-sprite.png);
}

.Draw-ico-select{
  background-position: 0px 0px;
}

.Draw-ico-pen{
  background-position: 0px -32px;
}

.Draw-ico-square{
  background-position: 0px -64px;
}

.Draw-ico-circle{
  background-position: 0px -96px;
}
/* --------- /Draw Icons --------- */