dynamicweb/static/cms/sass/cms.pagetree.scss

210 lines
8.3 KiB
SCSS
Raw Normal View History

@charset "utf-8";
/*!
* @copyright: https://github.com/divio/django-cms
*/
//######################################################################################################################
// #IMPORT SETTINGS#
@import "settings/default";
//######################################################################################################################
// #PAGETREE#
// colors
$color-font: #666;
$color-border: #dededc;
$color-border-light: #fafafa;
$color-border-medium: #ddd;
$color-background-light: #fefefe;
$color-background-light-hover: #f5f5f5;
$color-background-blue: #f3fbfe;
$color-background-blue-hover: #e6f6fd;
// pagetree
#sitemap {
padding:0; margin:0; margin:0; background:$color-background-light;
a { text-decoration:none; outline:none; border:none; }
a:hover { text-decoration:underline; }
li, ul { list-style-type:none; }
li input.hidden { position: absolute; left: -9999em; }
// icons
li a.icon, li span.icon, li a.move, li a.copy, li a.edit, li a.advanced-settings, li span.info {
display: inline-block; width: 18px; height: 18px; margin-top:5px;
background: url('../img/pagetree/sprite.png') no-repeat 0 0; }
li a.move { background-position:-20px -20px; margin-top:0; }
li a.copy { background-position:-40px -60px; margin-top:0; }
li a.edit { background-position:-40px -20px; margin-top:0; }
li a.advanced-settings { background-position:-60px -60px; margin-top:0; }
li span.info { background-position:-81px -20px; margin-top:-1px; cursor:pointer; }
li a.selector-add { background-position:-20px 0; margin-left:4px; margin-top:-1px; }
li a.addlink,
li a.deletelink { display:inline-block; width:10px; height:10px; padding:0; margin:0 0 0 4px; background-position:0 0; }
li .col-softroot span.icon { background-position:-80px 0; margin-top:0; }
li .col-apphook span.icon { background-position:-40px -80px; margin-top:0; }
li a.move span, li a.copy span, li a.selector-add span,
li a.addlink span, li a.deletelink span, li a.edit span, li a.advanced-settings span, li span.info span,
.col-navigation input, .col-published input { display:none; }
// header
ul.header { position:relative; top:1px; }
ul.header, ul.header li { padding:0; margin:0; border:none; background:none; }
ul.header li { color:$color-font; font-size:11px; font-weight:400; height:16px; padding:5px 0 4px 5px;
border-bottom:1px solid $color-border; background:$color-background-light; }
ul.header li .cont { height:15px; border:none !important; background:none !important; }
ul.header li .col1 { font-size:10px; }
ul.header li .col2 > div { font-size:10px; line-height:14px; border:none; background:none; }
// row
li .cont { display:block; border-top:1px solid $color-border !important; overflow: visible !important; }
li.open > .cont { border-bottom:1px solid $color-border !important; }
li.open ul .cont { border-top:none !important; border-bottom:1px solid $color-border !important; }
li.moveable > div { border-bottom:none !important; }
li.last.leaf .cont, li.last.closed .cont { border-bottom:none !important; }
.tree-default .col-navigation, .tree-default .col-published { line-height:30px; }
// add additional border to separate categories
li.open ul { margin-left:0; border-bottom:1px solid $color-border !important; }
li.open.last ul { border-bottom:none !important; }
li.open ul.last { border-bottom:none !important; }
li .col1 > div { text-align:center; }
li .col1 .title { background:none; white-space: nowrap; }
li .col1 .success { color:$color-font; padding-left:10px; }
li .col1 a.changelink { display:none; line-height:27px; margin:6px 0 0 10px !important; }
li .col1 .title, li .col1 .success { float:left; line-height:29px; height:28px; padding-left:20px; }
li .move-target-container { display:none; float:left;
font-size: 14px; line-height:27px; margin-right:10px; }
li .move-target-container a:hover { text-decoration: none; }
li .move-target { display:inline-block; padding: 2px 8px; border-left: 1px solid $color-border-medium; }
li .move-target:first-child { border-left:none; }
li .col2 > div {
float:left; line-height:28px; white-space:nowrap; text-align:center;
width:auto; height:28px; padding:0 5px; border-left:1px solid $color-border-medium;
}
li .col2 > div a, li .col2 > div span { vertical-align:middle; }
// hide items
.cont { position:relative; }
.col1, .col2 { position:relative; z-index:10; }
.col2 { position:absolute; top:0; right:0; z-index:100; }
.moveable { position:relative; z-index:100; }
.moveable:hover { z-index:1000; }
.moveable:hover .cont { position:relative; z-index:1000; }
.success { float:right !important; padding:5px 10px !important; position:absolute; right:0; }
// row hover states
li .cont:hover { background:$color-border-light; }
// custom col asignments
li.moveable .col1 .title { background:url('../img/pagetree/tree-li-drag.gif') no-repeat 0 0; }
li .col-language a { text-transform:uppercase; }
// edit button
.cont:hover .col1 a.changelink { display:block; }
// active state
.cont-active { background:#f7f7f7; }
.cont-pagetype { background:white; }
// drag modus
li#dragged { min-width:500px; }
li#dragged .col2 { display:none; }
// info handling
.info-details { display:none; }
li .info:hover { position:relative;
.info-details { display:block; }
}
.info-details { cursor:default;
position:absolute; right:-6px; top:-6px; z-index:100;
text-align:left; line-height:18px; padding:5px 10px;
background:white; border:1px solid #ccc; @include border-radius(3px 0 3px 3px);
mark { font-weight:bold; background:none; font-style:normal;
@include inline-block(); min-width:100px; }
span { display:inline !important; }
}
}
// filter button on top right
#changelist-filter-button { line-height:30px;
display:block; position:absolute; right:0; top:0; z-index:1000;
width:150px; height:auto; padding:0 0 0 10px; margin:0;
border:1px solid $color-border-medium; border-right:none; border-top:none; background:$color-border-light;
}
#changelist-filter { top:30px;
h2 { display:none; }
}
// remove background assigned from django
.change-list .filtered { min-height:auto; background:white !important; }
// only visible on multiple sites
#site-selector { float:left; margin:9px 18px 0 8px; }
// loader on top right
#loader-message { position:fixed; top:0; right:0; padding:4px 8px; background:white; display:none; }
/* TODO this should be defined inside djangocms-admin.css instead (3.1) */
#sitemap {
border:1px solid $color-border;
ul.header li .col2 > div { padding:0 5.5px; }
li .col-softroot span.icon {
width: 18px !important; height: 18px !important; margin:0 !important;
background: url('../img/pagetree/sprite.png') -80px 0 no-repeat !important; }
li .col-apphook span.icon {
width: 18px !important; height: 18px !important; margin:0 !important;
background: url('../img/pagetree/sprite.png') -40px -80px no-repeat !important; }
li .col-language span {
border: 1px solid transparent;
width:12px !important; height:12px !important; margin:-3px 0 0 !important;
@include inline-block();
@include border-radius(7px);
color: transparent;
// colors used within the tree
&.dirty { background-color:#6ba6ff;
-webkit-animation:pulsate 2.5s ease-out infinite;
-moz-animation:pulsate 2.5s ease-out infinite;
animation:pulsate 2.5s ease-out infinite;
}
&.empty { border: 1px solid #b3b3b3; background-color:transparent; }
&.unpublished { background-color:#b3b3b3; }
&.unpublishedparent { background-color:#b3b3b3; }
&.published { background-color:#65b417; }
}
}
// dropdown for language change
.col-language { position:relative; }
#sitemap .tree li .col-language
.language-tooltip { display:none; position:absolute; right:20px; top:4px; z-index:9999;
line-height:1; padding:4px 6px; font-size:11px; color:#ccc;
background-color:black; background:rgba(black, 0.8); border:none;
@include border-radius(3px);
a { color:#ddd; }
a:hover { color:white; text-decoration:none; }
&:before { display:block; width:0; height:0;
position:absolute; top:50%; right:-5px; margin-top:-4px; content:" ";
border-top: 4px solid transparent;
border-bottom: 4px solid transparent;
border-left: 5px solid rgba(black, 0.8);
}
&.language-tooltip-multiple a:first-child:after { content:" - "; }
}
#marker { margin-top:1px; }
// animation for publishing
@-webkit-keyframes pulsate {
0% { opacity:0.5; }
50% { opacity:1; }
100% { opacity:0.5; }
}