magix-components/tmpl/mx-color/index.css

magix组件

.cnt{
  padding:10px;
  background-color: #fff;
  display: inline-block;
  border: 1px solid #CCC;
  border-radius: 5px;
  overflow-y: hidden;
}

.shortcuts {
  width: 225px;
}
.shortcuts {
  *zoom: 1;
}
.shortcuts:before,
.shortcuts:after {
  display: table;
  content: "";
}
.shortcuts:after {
  clear: both;
}
.shortcuts-item {
  border: 1px solid #000;
  float: left;
  width: 15px;
  height: 15px;
  margin: -1px 0px 0 -1px;
  position: relative;
}
.selected:before {
  content: ' ';
  position: absolute;
  left: 2px;
  top: 2px;
  border:solid 2px #e8e8e8;
  border-style: inset;
  width:9px;
  height: 9px;
}
.body{
  margin:10px 0;
  height: 200px
}
.cpicker-wrapper{
  position: relative;
  float:left;
}
.cpicker{
  width:196px;
  height:196px;
}
.cpicker-indicator{
  position: absolute;
  width:6px;
  height:6px;
  box-shadow: 0 0 0 1.5px #fff,inset 0 0 1px 1px rgba(0,0,0,.3),0 0 1px 2px rgba(0,0,0,.4);
  border-radius: 50%;
  cursor: default;
}
.slide-wrapper{
  position: relative;
  float:left;
  margin-left:10px;
}
.slide{
  width:20px;
  height:196px;
}
.slide-indicator{
  position: absolute;
  left:4px;
  top:-8px;
  border: 8px solid transparent;
  border-right-color: #888;
  width:0;
  height:0;
  cursor: default;
}
.foot{
  height: 25px;
}
.color-value{
  width: 99px;
  margin-right: 5px;
  vertical-align: middle;
}
.bgcolor{
  width: 50px;
  height: 23px;
  line-height: 23px;
  display: inline-block;
  margin-right: 10px;
  vertical-align: middle;
  border: 1px solid #ddd;
}