cartodb-4.42/app/assets/stylesheets/table/table_panel/layer-views.css.scss
2024-04-06 05:25:13 +00:00

153 lines
2.8 KiB
SCSS

/**
* Layer panel views
*
* Content of the layer panel (wizards, infowindow, legends, etc).
*
*/
@import "compass/css3/images";
@import "compass/css3/box-shadow";
@import "compass/css3/border-radius";
@import "compass/css3/inline-block";
@import "../../table/table-sprite";
@import "../../old_common/vars";
@import "../../old_common/mixins";
// LOCAL VARS
$corner_radius: 6px;
// Layer actions view!
.layer-views {
display: inline-block;
position: absolute;
z-index: 5;
top: 60px;
right: 0;
bottom: 0;
left: 65px;
border: 1px solid #D0D0D0;
border-right: 0;
border-bottom: 0;
border-top-left-radius: $corner_radius;
background: white;
box-shadow: rgba(black, 0.07) 2px -1px 8px 0;
letter-spacing: 0;
vertical-align: top;
h3 {
padding: 22px 0 21px 30px;
border-bottom: 1px solid rgba(#999, 0.25);
color: #666;
font: normal 15px $text-fonts;
line-height: normal;
}
// For any
& > div {
display: inline-block;
width: 100%;
height: 100%;
vertical-align: top;
}
// Panel content for absolute positioning
// and render with scrollbars if it is higher
// than the panel
.panel_content {
position: absolute;
top: 61px;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
.wrapper {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
padding: 0 30px 16px;
overflow: auto;
}
div.content {
right: 30px !important;
left: 30px;
overflow-x: visible;
}
div.no_content {
margin: 20px 0 0;
padding: 20px;
border: 1px solid #E6E6E6;
border-radius: 4px;
color: #666;
line-height: 18px;
text-align: center;
}
span.scroll {
position: absolute;
right: 5px;
left: 0;
width: 100%;
height: 10px;
margin: 0;
padding: 0;
border-radius: 0;
background: transparent;
&.top {
top: -10px;
box-shadow: rgba(#000, 0.1) 0 5px 20px 0;
}
&.bottom {
bottom: -10px;
box-shadow: rgba(#000, 0.12) 0 -5px 20px 0;
}
}
}
// Draw lines separating editor lines number
// and show the white gradient
div.editor {
&::after,
&::before {
content: ' ';
position: absolute;
top: 0;
bottom: 0;
left: 34px;
width: 1px;
height: 100%;
}
&::after {
background: rgba($cGray4, 0.5);
}
&::before {
left: 36px;
background: rgba(#509DD7, 0.25);
}
h3 {
padding-left: 22px;
}
span.white-gradient {
position: absolute;
z-index: 10;
top: 0;
left: 0;
width: 100%;
height: 22px;
@include background(linear-gradient(top, white, rgba(white,0)));
}
}
}