silverstripe-framework/scss/TreeDropdownField.scss

138 lines
3.0 KiB
SCSS
Executable File

@import 'compass';
@import "../admin/scss/_mixins";
div.TreeDropdownField {
width: 400px;
background: #fff;
border: 1px solid #aaa;
cursor: pointer;
overflow: visible;
position:relative;
input {
border: none;
background: none;
padding: 0;
margin: 0;
}
.treedropdownfield-title {
float: left;
padding: 7px;
width: 90%;
line-height: 16px;
overflow:hidden;
outline: none;
z-index:1;
@include hide-text-overflow;
}
.treedropdownfield-search{
@extend .treedropdownfield-title;
//Style search box to match chosen search
$bgImage: '../admin/thirdparty/chosen/chosen/chosen-sprite.png';
background:url($bgImage) no-repeat 100% -22px; //For browers that only support 1 background
@include background(
url($bgImage) no-repeat 100% -22px,
linear-gradient(top, #eeeeee 1%, #ffffff 15%)
);
@include box-sizing(border-box);
position:relative;
z-index:1100; //Needed to work within modales in chrome
border: 1px solid #aaa;
display:inline-block;
font-family: sans-serif;
font-size: 1em;
margin:1.5%;
outline: 0;
padding: 4px 20px 4px 5px;
width:97%; //optimized for most common tree width
}
&.searchable .treedropdownfield-panel.loading{
min-height: 16px /* icon */ + 14px /* padding */ + 34px /* approx height search input */; // Ensure there's room for loading indicator
background-position: 98% 39px;
}
.treedropdownfield-panel {
clear: left;
position: absolute;
display: none;
cursor: default;
border: 1px solid #aaa;
border-top: none;
margin: 1px 0 0 -1px; /* account for border on container div */
background-color: #fff;
z-index: 70;
-webkit-box-shadow: 0 4px 5px rgba(0,0,0,.15);
-moz-box-shadow : 0 4px 5px rgba(0,0,0,.15);
-o-box-shadow : 0 4px 5px rgba(0,0,0,.15);
box-shadow : 0 4px 5px rgba(0,0,0,.15);
&.loading {
min-height: 16px /* icon */ + 14px /* padding */; // Ensure there's room for loading indicator
background: #fff url("../images/network-save.gif") 98% 7px no-repeat;
}
.tree-holder{
position:relative;
z-index:1;
> ul{
position:relative;
max-height:200px;
overflow-y: auto;
}
}
ul{
overflow-x:hidden;
float:left;
width:100%;
.jstree-icon{
margin-left:5px; //move to align with possible search box
}
.jstree-open > ins{
background-position:-18px 0; //move to align with possible search box
}
}
ul.tree {
margin: 0;
a {
font-size: 12px;
}
}
}
.treedropdownfield-toggle-panel-link {
border: none;
margin: 0;
z-index: 0;
padding: 7px 3px;
overflow: hidden;
-webkit-border-radius: 0 4px 4px 0;
-moz-border-radius: 0 4px 4px 0;
border-radius: 0 4px 4px 0;
&.treedropdownfield-open-tree {
background: transparent;
border: none;
}
a {
text-decoration: none;
display: block;
border: 0;
margin: 0;
opacity: 0.5;
}
}
a.jstree-loading .jstree-pageicon {
// Apply to .jstree-pageicon since .jstree-icon is hidden
background: #fff url("../images/network-save.gif") center center no-repeat;
}
}