Files
Umbraco-CMS/src/Umbraco.Web.UI.Client/src/less/tree.less

497 lines
8.4 KiB
Plaintext

// item-list
// -------------------------
.umb-item-list {
margin: 0px;
width: auto;
display: block
}
.umb-item-list li {
display: block;
width: auto;
display: block
}
// Tree
// -------------------------
.umb-tree {
margin: 0px;
min-width: 100%;
width: auto;
}
.umb-tree li {
display: block;
min-width: 100%;
width: auto;
display: block
}
.umb-tree li.current > div, .umb-tree div.selected {
background: @blue;
}
.umb-tree li.current > div a.umb-options i, .umb-tree div.selected i{
background: #fff;
border-color: @blue;
}
.umb-tree li.current > div a,
.umb-tree li.current > div i.icon{
color: white !important;
background: @blue;
border-color: @blue;
}
.umb-tree li.root > div {
padding-left: 20px;
}
.umb-tree li.root > div h5 {
margin-top: 10px;
}
.umb-tree * {
white-space: nowrap
}
.umb-tree ul {
padding: 0px;
margin: 0px;
min-width: 100%;
width: 100%;
//display: table
}
.umb-tree ul.collapsed {
display:none;
}
.umb-tree a {
vertical-align: middle;
display: inline-block;
cursor:pointer;
}
.umb-tree a:hover {
text-decoration: none
}
.umb-tree div {
vertical-align: middle;
padding: 5px 0 5px 0;
position: relative;
overflow: hidden;
}
.umb-tree a.noSpr {
background-position: 0
}
.umb-tree div > a.umb-options {
visibility: hidden;
}
.umb-tree div:hover > a.umb-options {
visibility: visible;
}
.umb-tree li.root > div a, .umb-tree li.root h5, .umb-tree-header {
text-transform: uppercase;
color: #b3b3b3;
font-weight: bold;
font-size: 13px;
}
.umb-tree ins {
vertical-align: middle;
margin: -4px 0 0 -16px;
width: 16px;
height: 16px;
display: inline-block;
visibility: hidden;
text-decoration: none;
}
.umb-tree li:hover ins {
visibility: visible;
cursor: pointer
}
.umb-tree ins {
font-size: 12px;
}
.umb-tree .icon {
vertical-align: middle;
margin: 1px 13px 1px 0px;
color: #21201C;
font-size: 15px;
}
.umb-tree i.noSpr {
display: inline-block;
margin-top: 1px;
width: 16px;
height: 16px;
line-height: 16px;
}
.umb-tree div:hover {
background: @grayLighter
}
.umb-tree small.search-subtitle{
color: @grayLight;
display: block;
padding-left: 35px;
}
a.umb-options {
visibility: hidden;
cursor: pointer;
display: inline-block;
text-align: center;
position: absolute;
right: 10px;
top: 3px;
padding: 0 3px 3px 5px;
border: 1px solid transparent;
}
a.umb-options i {
height: 5px !important;
width: 5px !important;
border-radius: 20px;
background: @black;
display: inline-block;
margin: 0 2px 0 0;
}
a.umb-options:hover {
background: @btnBackgroundHighlight;
border: 1px solid @grayLight;
.border-radius(@baseBorderRadius);
}
li.root > div > a.umb-options {
top: 13px;
}
.hide-options a.umb-options{display: none !important}
.hide-header h5{display: none !important}
.umb-icon-item {
padding: 2px;
padding-left: 55px;
display: block;
position: relative;
}
.umb-icon-item:hover {
background: #f8f8f8
}
.umb-icon-item i.icon {
position: absolute;
top: 8px;
left: 19px;
}
.umb-icon-item a:hover div {
text-decoration: underline;
}
.umb-icon-item a {
color: #525252;
padding-top: 3px;
height: 15px;
font-size: 12px;
text-decoration: none;
}
.umb-icon-item small {
color: #999;
font-size: 10px;
display: block
}
.umb-icon-item:hover a.umb-options {
visibility: visible
}
.umb-icon-item .umb-spr {
float: left
}
// Tree item states
// -------------------------
div.not-published > i.icon,div.not-published > a{
opacity: 0.6;
}
div.protected:before{
content:"\e256";
font-family: 'icomoon';
color: @red;
position: absolute;
font-size: 20px;
padding-left: 7px;
padding-top: 7px;
}
div.has-unpublished-version:before{
content:"\e25a";
font-family: 'icomoon';
color: @green;
position: absolute;
font-size: 20px;
padding-left: 7px;
padding-top: 7px;
}
div.not-allowed > i.icon,div.not-allowed > a{
cursor: not-allowed;
}
div.is-container:before{
content:"\e04e";
font-family: 'icomoon';
color: @turquoise;
position: absolute;
font-size: 8px;
padding-left: 13px;
padding-top: 8px;
}
// Tree context menu
// -------------------------
.umb-actions {
margin: 12px 0px 0px 0px;
padding: 0px;
list-style: none;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.umb-actions ul {
}
.umb-actions li.sep {
margin-top: 4px;
display: block;
border-top: 1px solid #efefef;
}
.umb-actions li.sep a {
margin-top: 4px;
}
.umb-actions a {
white-space: nowrap;
display: block;
font-size: 14px;
color: @black;
padding: 4px 25px 4px 20px;
text-decoration: none;
cursor: pointer;
}
.umb-actions a:hover, .umb-actions a:focus,
.umb-actions li.selected {
color: @black !important;
background: @grayLighter !important;
}
.umb-actions .menu-label {
display: inline-block;
vertical-align: middle;
padding-left: 15px;
padding-top: 2px;
}
.umb-actions i {
color: #999;
margin-top: 2px;
font-size: 18px;
vertical-align: middle;
color: #414141
}
.umb-actions-child {
list-style: none;
display: block;
margin: 0px;
}
.umb-actions-child li {
display: block;
}
.umb-actions-child a {
display: block;
clear: both;
text-decoration: none;
padding-left: 10px;
}
.umb-actions-child li .menu-label {
font-size: 12px;
margin-bottom: 10px;
color: #000;
margin-left: 20px;
}
.umb-actions-child li .menu-label small {
font-size: 12px;
display: block;
clear: right;
line-height: 14px;
color: #ccc;
white-space: normal;
}
.umb-actions-child li a:hover .menuLabel small {
text-decoration: none !important
}
.umb-actions-child i {
font-size: 32px;
}
.umb-actions-child li.add {
margin-top: 20px;
border-top: 1px solid #e9e9e9;
padding-top: 20px;
}
.umb-actions-child li.add i {
opacity: 0.4;
}
// Tree icon colors
// -------------------------
.umb-tree i.icon.blue {
color: @blue;
}
.umb-tree i.icon.green {
color: @green;
}
.umb-tree i.icon.purple {
color: @purple
}
.umb-tree i.icon.orange {
color: @orange;
}
.umb-tree i.icon.red {
color: @red;
}
// Loading Animation
// ------------------------
.umb-tree li div.l{
width:100%;
height:1px;
overflow:hidden;
}
.umb-tree li div.l div, div.umb-loader{
background-color: @blue;
margin-top:0;
margin-left:-100%;
-moz-animation-name:bounce_loadingProgressG;
-moz-animation-duration:1s;
-moz-animation-iteration-count:infinite;
-moz-animation-timing-function:linear;
-webkit-animation-name:bounce_loadingProgressG;
-webkit-animation-duration:1s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-timing-function:linear;
-ms-animation-name:bounce_loadingProgressG;
-ms-animation-duration:1s;
-ms-animation-iteration-count:infinite;
-ms-animation-timing-function:linear;
-o-animation-name:bounce_loadingProgressG;
-o-animation-duration:1s;
-o-animation-iteration-count:infinite;
-o-animationtiming-function:linear;
animation-name:bounce_loadingProgressG;
animation-duration:1s;
animation-iteration-count:infinite;
animation-timing-function:linear;
width:100%;
height:1px;
}
@-moz-keyframes bounce_loadingProgressG{
0%{
margin-left:-100%;
}
100%{
margin-left:100%;
}
}
@-webkit-keyframes bounce_loadingProgressG{
0%{
margin-left:-100%;
}
100%{
margin-left:100%;
}
}
@-ms-keyframes bounce_loadingProgressG{
0%{
margin-left:-100%;
}
100%{
margin-left:100%;
}
}
@-o-keyframes bounce_loadingProgressG{
0%{
margin-left:-100%;
}
100%{
margin-left:100%;
}
}
@keyframes bounce_loadingProgressG{
0%{
margin-left:-100%;
}
100%{
margin-left:100%;
}
}
//loader defaults
.umb-loader{
height: 10px; margin: 10px 10px 10px 10px;
}
body.touch .umb-tree .icon{font-size: 17px;}
body.touch .umb-tree ins{font-size: 14px; visibility: visible; padding: 7px;}
body.touch .umb-tree li div {
padding-top: 8px;
padding-bottom: 8px;
font-size: 110%;
}
body.touch .umb-actions a{
padding: 7px 25px 7px 20px;
font-size: 110%;
}
body.touch a.umb-options i {margin-top: 20px;}