brite/sample/taskmanager/css/ProjectView.css

DOM Centric Minimalistic MVC Framework

.ProjectView{
  position: absolute;
  top: 10px; right: 10px; bottom: 10px; left: 10px;
  -webkit-perspective: 10000px;
}
.ProjectView .card{
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  -webkit-transition: -webkit-transform .5s;
  -moz-transition: -moz-transform .5s;
  -o-transition: -o-transform .5s;
}

.ProjectView .card-face{
  opacity: .999; /* hack to allow position: relative or absolute in the card-face */
  display: block;
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
   border: solid 3px #ccc;
  -moz-box-shadow: 1px 2px 5px rgba(0,0,0,.5);
  -webkit-box-shadow: 1px 2px 5px rgba(0,0,0,.5);
  box-shadow: 1px 2px 5px rgba(0,0,0,.5);   
  background-color: #fff;     
}

.ProjectView .card-front{
  -webkit-transform: rotateY( 0deg );
}

.ProjectView .card-back{
  -webkit-transform: rotateY( -180deg );
  -moz-transform: rotateY( -180deg );
  -o-transform:rotateY(-180deg); /* Opera */
  transform: rotateY( -180deg );
}

.has-no-backfacevisibility .ProjectView .card-back{
  display: none;
}

.ProjectView .card.flipped {
  -webkit-transform: rotateY( 180deg );
  -moz-transform: rotateY( 180deg );
  -o-transform:rotateY(-180deg); /* Opera */
  transform: rotateY( 180deg );
}

.ProjectView header{
  position: relative;
  padding: 0;
  height: 35px;
  background-color: #efefef;
}

.ProjectView .header-fav, .ProjectView .header-setting{
  position: absolute;
  top: 5px; 
  width: 32px;
  height: 35px;
}

.ProjectView .header-fav{
  left: 5px;
}

.ProjectView .header-setting{
  right: 0px;
  width: 23px;
}
.ProjectView header i{
  margin-top: 4px;
}

.ProjectView header h2{
  color: #666;
  letter-spacing: .2em;
  text-shadow: #fff 0px 1px 0;
  line-height: normal;
  font-weight: bold;
  margin: 0;
  padding: 7px 0 0 12px;
  font-size: 18px;
}

.ProjectView header input{
  border: none;
  color: #999;
  font-size: 23px;
  font-weight: bold;
  width: 300px;
  margin-top: 6px;
  margin-left: -5px;
  letter-spacing: .1em;
}

.ProjectView header .helper{
  display: inline;
  margin-left: 10px;
}

.ProjectView section.heading{
  position: relative;
  margin: 0;
  height: 36px;
  background-image: -moz-linear-gradient(bottom, #F1F1F1 0%, #FDFDFD 100%);
  background-image: -o-linear-gradient(bottom, #F1F1F1 0%, #FDFDFD 100%);
  background-image: -webkit-linear-gradient(bottom, #F1F1F1 0%, #FDFDFD 100%);
  background-image: linear-gradient(bottom, #F1F1F1 0%, #FDFDFD 100%);
  border-top: solid 1px #EEE;
  border-bottom: solid 1px #DDD;
}

.ProjectView section.content{
  position: absolute;
  top: 35px; right: 0; bottom: 0; left: 0;
}

.ProjectView section.content.withPadding{
  padding: 10px;
}

.ProjectView section.heading .del{
  position: absolute;
  top: 7px; right: 10px;
  opacity: .5;
}

.ProjectView section.heading .del:hover{
  opacity: 1;
}

.ProjectView section.heading label{
  display: block;
  margin: 7px 0 0 40px;
  font-weight: bold;
}


.ProjectView .table{
  margin: 0;
}


.ProjectView section.content{
  position: absolute;
  top: 70px; right: 0px; bottom: 0px; left: 0; 
  overflow: auto;
}

.ProjectView section.content td.check{
  width: 15px;
}

.ProjectView .del-ico{
  display: none;
}

.ProjectView .taskCheck{
  border: solid 1px #aaa;
  width: 16px;
  height: 16px;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  border-radius: 6px;
}

.ProjectView .taskCheck.done::after{
  content:"";
  display: block;
  background-image: url("images/icons.png");
  width: 16px;
  height: 16px;
  margin: -2px 0 0 4px; 
}


.ProjectView td.title{
  position: relative;
}

.ProjectView td.title i{
  position: absolute;
  top: 8px; 
  right: 10px; 
  width: 16px; 
  height: 16px;
  display: none;
}

.ProjectView tr input[data-prop="title"]{
  border: none;
  display: block;
  border: none;
  width: 80%;  
  background: none;
}

.ProjectView tr.done{
  background: #ddffdd;
}

.ProjectView  .helper{
  display: block;
  font-size: 11px;
  color: #777;
}

/* --- delete controls --- */
.delete-controls{
  position: absolute;
  top: 5px; right: 0px;
  width: 200px;
  height: 36px;
  overflow: hidden;
}
.delete-controls-inner{
  position: absolute;
  width: 200px;
  height: 36px;
  top: 0; left: 200px;
  -webkit-transition: all .3s ease;
}

.delete-controls-inner.show{
  -webkit-transform: translate(-140px,0px);
  -moz-transform: translate(-140px,0px);
  -o-transform:translate(-140px,0px); /* Opera */
  transform: translate(-140px,0px);
}
/* --- /delete controls --- */


/* --- deleteMode --- */
.ProjectView.deleteMode .del{
  display: none;
}

.ProjectView.deleteMode tr.to-delete{
    background-color: #ffdddd;
}

.ProjectView.deleteMode .newTask{
  display: none;
}

.ProjectView.deleteMode td{
  cursor: ponter;
} 

.ProjectView.deleteMode input{
  cursor: pointer;
}

.ProjectView.deleteMode td.title span.del-ico{
  position: absolute;
  top: 5px; right: 5px; 
  display: block;
  float: right;
  margin-top: 5px;
  cursor: pointer;
}
/* --- /deleteMode --- */