170 lines
3.2 KiB
SCSS
170 lines
3.2 KiB
SCSS
|
|
/**
|
|
* Layer info styles
|
|
*
|
|
* Styles for layer info elements, like name,
|
|
* position, remove and visibility buttons, etc.
|
|
*
|
|
*/
|
|
|
|
@import "compass/css3/border-radius";
|
|
@import "../../table/table-sprite";
|
|
@import "../../old_common/mixins";
|
|
@import "../../old_common/form-elements";
|
|
|
|
// LOCAL VARS
|
|
$corner_radius: 6px;
|
|
|
|
// Layer info, as name, order, ... etc
|
|
.layer-info {
|
|
position: absolute;
|
|
z-index: 0;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: auto;
|
|
left: 0;
|
|
height: 67px;
|
|
border-bottom: 1px solid rgba(#999, 0.25);
|
|
border-top-left-radius: $corner_radius;
|
|
line-height: 62px;
|
|
|
|
div.left {
|
|
width: 82%;
|
|
}
|
|
|
|
div.right {
|
|
width: 45px;
|
|
margin-right: 20px;
|
|
}
|
|
|
|
// Layer info block
|
|
.info {
|
|
display: block;
|
|
top: 0 !important;
|
|
left: 0 !important;
|
|
width: 100%;
|
|
padding-left: 24px;
|
|
text-align: left;
|
|
|
|
* {
|
|
display: inline-block;
|
|
letter-spacing: 0;
|
|
vertical-align: top;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
// Order element
|
|
.order {
|
|
width: 16px;
|
|
padding: 1px 0;
|
|
|
|
border-radius: 2px;
|
|
background: #A9A9A9;
|
|
color: #ECECEC;
|
|
font: bold 11px $text-fonts;
|
|
line-height: 16px;
|
|
text-align: center;
|
|
}
|
|
|
|
// Layer name
|
|
.name {
|
|
width: auto;
|
|
max-width: 80%;
|
|
margin-left: 23px;
|
|
overflow: hidden;
|
|
color: #A9A9A9;
|
|
font: bold 17px $text-fonts;
|
|
line-height: 20px;
|
|
|
|
@include text-overflow();
|
|
|
|
i.synced {
|
|
display: inline-block;
|
|
width: 12px;
|
|
height: 12px;
|
|
margin: 5px 0 0 4px;
|
|
vertical-align: top;
|
|
|
|
@include background(sprite($table-sprites, sync_layer_icon, $offset-x:0, $offset-y:0) no-repeat);
|
|
}
|
|
|
|
&:hover {
|
|
cursor: pointer;
|
|
|
|
i.synced {
|
|
@include background(sprite($table-sprites, sync_layer_icon, $offset-x:0, $offset-y:-12px) no-repeat);
|
|
}
|
|
}
|
|
}
|
|
|
|
// Layer info (second name?)
|
|
.name_info {
|
|
|
|
display: flex;
|
|
position: absolute;
|
|
top: 34px;
|
|
left: 67px;
|
|
width: auto;
|
|
max-width: 80%;
|
|
overflow: hidden;
|
|
color: #AAA;
|
|
font: normal 11px $text-fonts;
|
|
line-height: 15px;
|
|
|
|
@include text-overflow();
|
|
|
|
a {
|
|
margin-left: 5px;
|
|
}
|
|
}
|
|
|
|
&:hover {
|
|
text-decoration: none;
|
|
cursor: pointer;
|
|
|
|
.name {
|
|
color: #666;
|
|
}
|
|
|
|
.order {
|
|
background: #666;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Layer name edition
|
|
@include default-input();
|
|
|
|
input.alias {
|
|
@include default-input();
|
|
display: none;
|
|
position: absolute;
|
|
top: 7px;
|
|
left: 57px;
|
|
padding: 6px 9px;
|
|
color: #787878;
|
|
font: bold 17px $text-fonts;
|
|
}
|
|
|
|
// Remove button
|
|
.remove {
|
|
display: inline-block;
|
|
width: 13px;
|
|
height: 13px;
|
|
margin-left: 5px;
|
|
letter-spacing: 0;
|
|
vertical-align: top;
|
|
vertical-align: middle;
|
|
|
|
@include background(sprite($common-sprites, close_grey, $offset-x:0, $offset-y:0) no-repeat);
|
|
|
|
&:hover {
|
|
@include background(sprite($common-sprites, close_grey, $offset-x:0, $offset-y:-13px) no-repeat);
|
|
}
|
|
|
|
&:active {
|
|
@include background(sprite($common-sprites, close_grey, $offset-x:0, $offset-y:-26px) no-repeat);
|
|
}
|
|
}
|
|
}
|