json-object-editor
Version:
JOE the Json Object Editor | Platform Edition
178 lines (161 loc) • 3.69 kB
CSS
html.jpe-editing jpe-block,
html.jpe-editing jpe-layout,
html.jpe-editing jpe-page{
display: block;
display: -webkit-box;
position: relative;
margin: -1px;
padding: 1px;
box-sizing: border-box;
}
jpe-info{
display:none;
transition:opacity .25s, background-color .5s ease .2s;
box-sizing: border-box;
opacity:0;
background:none;
border:1px solid #ff8804;
}
jpe-block jpe-info:hover,
jpe-info[data-schema="page"],
jpe-info[data-schema="layout"]
{
background:rgba(0,0,0,.1);
opacity:1;
}
html.jpe-editing jpe-block:hover > jpe-info{
display:block;
position:absolute;
bottom:0;
right:0;
left:0;
top:0;
padding:10px;
}
html.jpe-editing body > jpe-info{
display:block;
position:fixed;
bottom:0;
padding:10px;
}
jpe-info[data-schema="page"]{
width:50%;
right:0;
}
jpe-info[data-schema="layout"]{
width:50%;
left:0;
}
jpe-info-content {
position: absolute;
bottom: 0;
right: 0;
left: 0;
padding: 4px;
font-size: 14px;
color: #fff;
font-family: sans-serif;
letter-spacing: .1em;
background: rgba(255, 136, 4, .9);
border-top: 1px solid #ddd;
box-sizing:border-box;
transition:padding .25s ease .2s,max-height .25s ease .2s;
}
jpe-info[data-schema="block"] jpe-info-content{
max-height:0;
padding:0px 4px;
overflow:hidden;
}
jpe-info[data-schema="block"]:hover jpe-info-content{
max-height:100px;
padding:4px;
}
joe-editor-menu{
position:fixed;
bottom:60px;
right:30px;
background:#ff8804;
width:50px;
height:50px;
border-radius:50%;
border:1px solid #fff;
box-shadow: 0 0px 2px 1px rgba(0,0,0,.3);
cursor:pointer;
transition:.2s;
}
joe-editor-menu:hover{
background:#fff;
}
jpe-edit-btn,.jpe-edit-btn{
display:block;
float: right;
min-height: 40px;
width: 40px;
margin: -4px -4px -4px 15px;
text-align: center;
line-height: 40px;
cursor: pointer;
background: #eee;
color: #666;
transition:.2s;
}
jpe-edit-btn:hover,.jpe-edit-btn:hover{
box-shadow:0 0 3px 1px rgba(0,0,0,.2);
color:#ff8804;
background: #fff;
}
/* ---------- JPE INFO CONTENT ---------- */
jpe-info-cuid {
font-size: 10px;
float: right;
}
jpe-info-schema {
font-size: .9em;
}
jpe-info-name {
display: block;
font-weight: bold;
}
/*svg ICONS */
jpe-info-icon {
width: 50px;
height: 50px;
float: left;
position: relative;
margin: -10px -3px -10px -10px;
}
jpe-info-icon svg {
width: 100%;
height: 100%;
fill: #fff;
}
/* ---------- SECTION ---------- */
jpe-section {position: relative;display: block; box-sizing: border-box; border: 1px solid transparent;}
html.jpe-editing body jpe-section:hover {border: 1px solid #007ac2;}
jpe-section-label{
position: absolute;
right: 0;
top: 0;
background: #007ac2;
color: #fff;
padding: 1px 4px;
opacity:0;
}
html.jpe-editing body jpe-section:hover jpe-section-label{
opacity:1;
}
/* ---------- CONTENT ---------- */
jpe-content {position: relative;display: block; box-sizing: border-box; border: 1px solid transparent;}
html.jpe-editing body jpe-content:hover {border: 1px solid #7AC200;}
jpe-content-label{
position: absolute;
right: 0;
top: 0;
background: #7AC200;
color: #fff;
padding: 1px 4px;
opacity:0;
}
html.jpe-editing body jpe-content:hover jpe-content-label{
opacity:1;
}