/********************************************************************\ Page tree \********************************************************************/ .sonata-tree { list-style: none; padding-left: 0; margin-left: 15px; margin-right: 15px; overflow: hidden; padding-bottom: 10px; } .sonata-tree ul { list-style: none; padding-left: 30px; } .sonata-tree__item { display: block; padding: 7px 15px 7px 7px; border: 1px solid #ddd; border-radius: 2px; position: relative; margin-bottom: 5px; margin-right: 10px; color: #444; background: #fff; } .sonata-tree__item .label { font-size: 12px; margin-top: 2px; border-radius: 2px; } .sonata-tree__item .label-warning { margin-right: 5px; } .sonata-tree__item .fa-caret-right { position: absolute; top: 10px; left: -20px; color: #3c8dbc; } .sonata-tree__item:hover { background: #eee; color: #000; } .sonata-tree__item__is-hybrid { margin-right: 5px; } .sonata-tree__item.is-active { border: 1px solid #3c8dbc; } .sonata-tree__item.is-active:after, .sonata-tree__item.is-active:before { left: 100%; top: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; } .sonata-tree__item.is-active:after { border-color: rgba(255, 255, 255, 0); border-left-color: #fff; border-width: 8px; margin-top: -8px; } .sonata-tree__item.is-active:before { border-color: rgba(255, 255, 255, 0); border-left-color: #3c8dbc; border-width: 9px; margin-top: -9px; } .sonata-tree__item.is-active:hover:after { border-left-color: #eee; } .sonata-tree__item.is-toggled .fa-caret-right { -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -o-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); } .sonata-tree__item__edit { font-weight: bold; } .sonata-tree__item__edit:hover { text-decoration: underline; } /** * Toggleable tree */ .sonata-tree--toggleable li > ul { display: none; } .sonata-tree--toggleable .sonata-tree__item { margin-left: 20px; } .sonata-tree--toggleable .sonata-tree__item .fa-caret-right { cursor: pointer; } .sonata-tree--toggleable .sonata-tree__item:last-child .fa-caret-right { display: none; } .sonata-tree--toggleable .sonata-tree__item .fa-caret-right:after { content: ''; position: absolute; top: -5px; bottom: -5px; left: -10px; right: -10px; } /** * Smaller tree */ .sonata-tree--small { margin-left: 0; } .sonata-tree--small .sonata-tree__item__edit { font-size: 12px; } .sonata-tree--small .sonata-tree__item { padding: 3px 15px 4px 5px; } .sonata-tree--small .sonata-tree__item .fa-caret-right { top: 7px; }