silverstripe-dms/scss/upload.scss

274 lines
5.3 KiB
SCSS

.dmsdocument-addexisting {
.ui-autocomplete {
border: 1px solid $color-grey-light;
max-height: 300px;
overflow: scroll;
}
}
.ss-add {
.document-add-existing {
input.document-autocomplete {
position: absolute;
z-index: 9999;
width: 390px;
padding: 9px 7px;
border-bottom-right-radius: 0;
border-top-right-radius: 0;
outline: none;
box-sizing: border-box;
-moz-box-sizing: border-box;
&[disabled] {
color: $color-grey-light;
text-shadow: 0 -1px 0 $color-white;
background: $color-grey-lighter;
background-image:none;
box-shadow: inset 0 1px 8px 0 $color-grey-light;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
}
.treedropdown {
border: none;
}
.treedropdownfield-toggle-panel-link {
padding: 5px 9px 9px;
background: #fff;
border: 1px solid $color-cms-input-border;
float: right;
z-index: 99999;
position: relative;
&.treedropdownfield-open-tree {
background: #fff;
border: 1px solid $color-cms-input-border;
border-bottom:none;
border-bottom-right-radius:0;
}
}
.treedropdownfield-title {
width: auto;
}
.treedropdownfield-toggle-panel-link a {
display: inline-block;
top: 4px;
position: relative;
}
.document-list {
width: 510px;
border: 1px solid $color-grey-light;
border-top: none;
background: $color-white;
display: none;
max-height: 300px;
background-clip: padding-box;
overflow: scroll;
p {
padding: 10px 10px 0;
}
ul {
padding: 4px 0;
li {
line-height: 18px;
a {
display: block;
padding: 4px 8px;
border: 1px solid $color-white;
color: black;
&:hover {
border: 1px solid $color-grey-light;
border-radius: 4px;
background: rgba(203, 203, 203, 0.4);
cursor: pointer;
text-decoration: none;
outline: none;
text-shadow: none;
}
}
}
}
}
// When inserting a link to a document via the TinyMCE editor
&.link-editor-context {
label {
float: left;
display: block;
width: 176px;
padding: 8px 8px 8px 0;
line-height: 16px;
font-weight: bold;
text-shadow: 1px 1px 0 white;
}
.middleColumn {
input {
background: white;
border: 1px solid $color-cms-input-border;
line-height: 16px;
border-radius: 4px;
background-size: 100%;
max-width: 468px;
&.document-autocomplete {
max-width: 365px;
}
}
}
.document-list {
width: calc(100% - 2px);
}
}
}
.ss-assetuploadfield {
&.link-editor-context {
label {
float: left;
display: block;
width: 176px;
padding: 8px 8px 8px 0;
line-height: 16px;
font-weight: bold;
text-shadow: 1px 1px 0 white;
}
.middleColumn {
margin-left: 184px;
display: block;
padding: 8px 8px 8px 0;
font-style: italic;
min-height: 20px;
}
}
.step4 {
margin-bottom: 10px;
}
}
}
// Styling for tree dropdown field
.cms {
.ss-add,
.selectiongroup {
.treedropdownfield-panel {
margin: -1px 0 0 0;
box-sizing: border-box;
ul {
padding: 4px 0;
li {
border: 1px solid $color-white;
a {
display: block;
padding: 4px 2px;
&.jstree-hovered {
background: rgba(203, 203, 203, 0.4);
border: 1px solid $color-grey-light;
}
}
}
}
}
}
}
#Form_ItemEditForm {
h3:first-child {
display: inline-block;
float: left;
width: 184px;
}
ul.SelectionGroup {
display: inline-block;
position: relative;
padding: 0;
margin-top: 9px;
margin-left: 0;
height: 110px;
background: none;
border: none;
li {
width: auto;
clear: none;
display: inline;
margin-right: 4px;
input {
&.selector {
display: none;
}
}
label {
&.ui-button {
font-weight: bold;
border: 1px solid #C0C0C2;
border-radius: 3px;
padding: 0.8em 1.5em;
&:hover {
box-shadow: 0 0 5px rgba(0,0,0,0.3);
}
}
}
div.field {
margin-left: 0px;
margin-bottom: 1em;
width: 600px;
position: absolute;
left: 0;
margin-top: 13px;
padding: 10px;
background: white;
border: 1px solid $color-cms-input-border;
}
&.selected {
label.ui-button {
&:after {
top: 43px;
}
}
}
}
.treedropdownfield-panel {
margin: 1px 0 0 -1px;
box-sizing: content-box;
ul {
li {
display: block;
clear: both;
width: 100%;
margin: 0;
li {
padding-left: 20px;
}
}
}
}
}
}