neyric/wireit

View on GitHub
sandbox/assets/WireIt.css

Summary

Maintainability
Test Coverage
/**
 * Wires :
 */

canvas.WireIt-Wire {
   position: absolute;
   border: 0;
   z-index: 0;
}

canvas.WireIt-Wire-editing {
   z-index: 10;
}

div.WireIt-Wire-scissors {
   border: 0;
   position: absolute;
   z-index: 7;
   width: 16px;
   height: 16px;
   background-color: transparent;
   background-image: url(cut.png);
   cursor: pointer;
}

div.WireIt-Wire-Label {
   position: absolute;
   height: auto;
   width: auto;
}

/**
 * Terminals :
 */

.WireIt-Terminal {
   width: 30px;
   height: 30px;
   cursor: pointer;   
   position: absolute;
   background: transparent url(terminals.png) no-repeat scroll 0 0;
   z-index: 6;
}

.WireIt-Terminal-connected {
   background-position: 0 -30px;
}

/*.WireIt-Terminal-dropinvite {
   background-position: 0 -60px;
}*/


.yui3-dd-drop-active-valid  {
   background-position: 0 -60px;
}

.yui3-dd-drop-over {
   background-position: 0 -90px;
}


/**
 * Containers
 */
div.WireIt-Container {
   position: absolute;
    z-index: 5;
    opacity: 0.8;
    filter: alpha(opacity = 80);
   border: 0; /* Changing this value causes positioning issues */
   font-size: 8pt;
}

div.WireIt-Container div.body {
   padding: 5px;
   /*overflow:auto;*/
    border: 2px solid #3366CC;
    background-color: #FFFFFF;
}

div.WireIt-Container-ddhandle {
   height: 22px;
   background-color: #3366CC;
    cursor: move;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
   -webkit-border-top-left-radius: 5px;
   -webkit-border-top-right-radius: 5px;
   padding-top: 3px;
   line-height:150%;
   color:white;
    border: 2px solid #3366CC;
   font-weight:bold;
   text-align:center;
   font-size: 10pt;
   float : none;
} 

div.WireIt-Container-ddhandle span {
   text-align:center;
   margin-left:4px;
   margin-right:25px;
}

img.WireIt-Container-icon {
   background: white;
   float: left;
   margin: 0 0 0 4px;
   padding: 1px;
   border: 1px solid #ccc;
}

div.WireIt-Container-resizehandle {
   position: absolute;
   bottom: 0;
   right: 0;
   width: 10px;
   height: 10px;
   cursor: se-resize;
}

div.WireIt-Container-closebutton {
   background-image: url(cancel.png);
   width: 16px;
   height: 16px;
   position: absolute;
   top: 4px;
   right: 4px;
   cursor: pointer;
}

div.WireIt-Container-toolbar {

}

.floatleft {
    float : left;
}

div.WireIt-Container-focused {
   z-index: 6;
   opacity: 1;
   filter: alpha(opacity = 100);
}

/**
 * ImageContainer
 */

div.WireIt-ImageContainer div.body {   
   width: 128px;
   height: 60px;
   background-color: transparent;
   background-repeat: no-repeat;
   border: 0;
   cursor: move;
}

div.WireIt-ImageContainer div.WireIt-Container-closebutton {
   display: none;
}
div.WireIt-ImageContainer:hover div.WireIt-Container-closebutton {
   display: block;
}

/**
 * InOutContainer
 */

div.WireIt-InOutContainer {   
   width: 150px;
}

div.WireIt-InOutContainer div.body {   
   padding: 5px 10px;
   font-size: 10pt;
}
 
/**
 * Layers
 */
div.WireIt-Layer {
   border: 0; /* Changing this value causes positioning issues */
   overflow: scroll;
   margin: auto;
   position: relative;
   height: 100%; 
   width: 100%;
   background-color: white;
}

canvas.WireIt-LayerMap {
   position: absolute;
   border: 2px solid #3366CC;
   top: 0;
   right: 0;
}