354 lines
7.1 KiB
SCSS
354 lines
7.1 KiB
SCSS
|
|
/**
|
|
* Infowindow panel styles.
|
|
*
|
|
* - Fields block (sorting, draggable, etc).
|
|
* - Titles block (change name of a field title).
|
|
* - Infowindow HTML editor block.
|
|
*
|
|
*/
|
|
|
|
@import "compass/css3/box-sizing";
|
|
@import "compass/css3/images";
|
|
@import "compass/css3/inline-block";
|
|
@import "../../../old_common/common-sprite";
|
|
@import "../../../table/table-sprite";
|
|
@import "../../../old_common/vars";
|
|
@import "../../../old_common/mixins";
|
|
@import "../../../old_common/form-elements";
|
|
|
|
.infowindow_panel {
|
|
|
|
// TYPES MENU
|
|
ul.types {
|
|
position: relative;
|
|
z-index: 2;
|
|
padding: 10px 0 0 8px;
|
|
border-top-left-radius: 3px;
|
|
background: image-url('layout/linen.png') repeat 0 0;
|
|
|
|
&::after {
|
|
content: '';
|
|
position: absolute;
|
|
z-index: 1;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 1px;
|
|
background: rgba(black, 0.1);
|
|
}
|
|
|
|
li {
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
|
|
a {
|
|
display: inline-block;
|
|
width: 99px;
|
|
border-top-left-radius: 3px;
|
|
border-top-right-radius: 3px;
|
|
background: white;
|
|
line-height: 41px;
|
|
text-align: center;
|
|
vertical-align: top;
|
|
|
|
&.selected {
|
|
position: relative;
|
|
color: #666;
|
|
text-decoration: none;
|
|
cursor: default;
|
|
|
|
&::before {
|
|
content: '';
|
|
position: absolute;
|
|
z-index: 2;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 1px;
|
|
background: white;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.panel_content {
|
|
top: 120px !important;
|
|
div.wrapper { top: 31px; }
|
|
}
|
|
|
|
.doc_info { right: 26px !important; }
|
|
|
|
.header {
|
|
position: relative;
|
|
padding: 21px 30px 19px;
|
|
clear: both;
|
|
overflow: hidden;
|
|
|
|
h3 {
|
|
padding: 0;
|
|
float: left;
|
|
border: 0;
|
|
}
|
|
|
|
.controls {
|
|
span.label {
|
|
margin: 2px 7px 0 0;
|
|
float: left;
|
|
color: #CCC;
|
|
line-height: 18px;
|
|
}
|
|
&.margin { margin-right: 20px; }
|
|
}
|
|
}
|
|
|
|
// No content block
|
|
.no_content { display: none; }
|
|
|
|
&.editing_html {
|
|
.header h3 {
|
|
margin-left: 23px;
|
|
}
|
|
|
|
.menu {
|
|
li:first-child { margin-left: 23px; }
|
|
|
|
&::after {
|
|
content: ' ';
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 34px;
|
|
width: 1px;
|
|
height: 100%;
|
|
background: rgba($cGray4, 0.5);
|
|
}
|
|
|
|
&::before {
|
|
content: ' ';
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 36px;
|
|
width: 1px;
|
|
height: 100%;
|
|
background: rgba(#509DD7, 0.25);
|
|
}
|
|
}
|
|
}
|
|
|
|
.help-tip { top: 143px; }
|
|
|
|
// Tab menus => on click submenu, on hover submenu, etc...
|
|
.menu {
|
|
position: absolute;
|
|
|
|
z-index: 9;
|
|
top: 112px;
|
|
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
padding: 9px 23px 3px 30px;
|
|
border-top: 1px solid rgba(#DDD, 0.5);
|
|
border-bottom: 1px solid rgba(#DDD, 0.5);
|
|
background: #F6F6F6;
|
|
|
|
.tip {
|
|
@include size(10px, 6px);
|
|
@include position(false, false, -1px, 33px);
|
|
@include background(sprite($table-sprites, infowindow_panel_white_tip) no-repeat);
|
|
z-index: 10;
|
|
}
|
|
|
|
ul {
|
|
clear: both;
|
|
overflow: hidden;
|
|
|
|
li {
|
|
|
|
display: inline-block;
|
|
min-width: 20px;
|
|
margin: 0 15px 0 0;
|
|
text-align: center;
|
|
vertical-align: top;
|
|
|
|
a { margin: auto; }
|
|
|
|
a { display: block; }
|
|
|
|
&.editor { float: left; }
|
|
|
|
&.title_editor,
|
|
&.html_editor { float: right; }
|
|
|
|
&.html_editor {
|
|
position: relative;
|
|
margin-right: 2px;
|
|
}
|
|
|
|
&.editor a {
|
|
@include size(17px, 17px);
|
|
@include table-sprite(infowindow_panel_icons, $offset-x:0, $offset-y:0);
|
|
}
|
|
|
|
&.title_editor a {
|
|
@include size(20px, 17px);
|
|
@include table-sprite(infowindow_panel_icons, $offset-x:-40, $offset-y:0);
|
|
}
|
|
|
|
&.html_editor a {
|
|
@include size(17px, 17px);
|
|
@include table-sprite(infowindow_panel_icons, $offset-x:-104, $offset-y:1px);
|
|
}
|
|
|
|
&.editor a.selected {
|
|
@include size(17px, 17px);
|
|
@include table-sprite(infowindow_panel_icons, $offset-x:0, $offset-y:-25px);
|
|
}
|
|
|
|
&.title_editor a.selected {
|
|
@include size(20px, 17px);
|
|
@include table-sprite(infowindow_panel_icons, $offset-x:-40, $offset-y:-25px);
|
|
}
|
|
|
|
&.html_editor a.selected {
|
|
@include size(17px, 17px);
|
|
@include table-sprite(infowindow_panel_icons, $offset-x:-104, $offset-y:-24px);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.all {
|
|
padding: 15px 0;
|
|
overflow: auto;
|
|
span.label { margin-right: 12px; }
|
|
}
|
|
|
|
.titlePane .fields li {
|
|
position: relative;
|
|
& > span:hover { cursor: default; }
|
|
}
|
|
|
|
// When custom html template is applied, blocked block should show up
|
|
// and overflow should be hidden
|
|
.titlePane.disabled .wrapper,
|
|
.fieldPane.disabled .wrapper {
|
|
overflow: hidden;
|
|
}
|
|
|
|
.blocked {
|
|
display: none;
|
|
position: absolute;
|
|
z-index: 10;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
padding: 20px 40px;
|
|
border-top-left-radius: 4px;
|
|
background: rgba(white, 0.9);
|
|
line-height: normal;
|
|
text-align: center;
|
|
|
|
span.block-icon {
|
|
display: inline-block;
|
|
position: relative;
|
|
width: 111px;
|
|
height: 110px;
|
|
vertical-align: top;
|
|
|
|
@include table-sprite(block_icon);
|
|
}
|
|
|
|
p {
|
|
margin: 30px 0 3px;
|
|
color: #999;
|
|
line-height: normal;
|
|
}
|
|
|
|
a {
|
|
display: inline-block;
|
|
margin: 20px 0 0;
|
|
vertical-align: top;
|
|
}
|
|
}
|
|
|
|
.fields {
|
|
li {
|
|
padding: 13px 0;
|
|
overflow: hidden;
|
|
border-bottom: 1px solid rgba(#999, 0.25);
|
|
color: $cGray4;
|
|
font-size: 15px;
|
|
|
|
& > span {
|
|
display: inline-block;
|
|
max-width: 50%;
|
|
line-height: 16px;
|
|
vertical-align: top;
|
|
vertical-align: middle;
|
|
&:hover { cursor: all-scroll; }
|
|
}
|
|
|
|
.form_combo {
|
|
width: auto;
|
|
float: right;
|
|
|
|
.select2-container { width: 143px; }
|
|
}
|
|
|
|
.form_combo ~ span {
|
|
margin-top: 3px;
|
|
}
|
|
|
|
.edit_in_place.input {
|
|
@include position(7px, 0, false, false);
|
|
@include default-input();
|
|
z-index: 2;
|
|
|
|
input {
|
|
padding: 6px;
|
|
font-size: 13px;
|
|
}
|
|
}
|
|
|
|
.switches {
|
|
float: right;
|
|
a.switch { margin-left: 8px; }
|
|
}
|
|
|
|
span.title {
|
|
margin-right: 20px;
|
|
}
|
|
|
|
&.drag_field {
|
|
padding: 15px 0 15px 10px;
|
|
|
|
@include table-sprite(drag_points, $offset-y: 23px);
|
|
}
|
|
|
|
&.ui-sortable-helper {
|
|
margin-left: -15px !important;
|
|
padding: 15px 15px 15px 20px;
|
|
border: 1px solid #999;
|
|
border-radius: 3px;
|
|
background-color: white;
|
|
box-shadow: rgba(#000, 0.1) 0 0 5px 2px;
|
|
cursor: all-scroll;
|
|
|
|
@include table-sprite(drag_points, $offset-y:23px, $offset-x:10px);
|
|
|
|
& > span { color: #999; }
|
|
}
|
|
|
|
&.enabled {
|
|
.switch {
|
|
color: #000;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|