mirror of
https://github.com/silverstripe/silverstripe-framework
synced 2024-08-27 13:06:04 +02:00
Set search option true on treedropdown fields by default, to provide a fallback solution when trees fail to render (too many children errors) Provide better indication/more meaningful styling to search (match chosen styles for consistency)
137 lines
3.0 KiB
SCSS
Executable File
137 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;
|
|
}
|
|
} |