TPS
/
ORIENT
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Tszuj up some styling 

Add active states and color correct treeview
Adjust proportions of repeater add button
This commit is contained in:
Samuel Georges 2017-06-24 17:18:08 +10:00
parent 56028c0724
commit 600035cd49
5 changed files with 87 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
modules/backend/assets/css/october.css
View File

@ -296,7 +296,7 @@ html.mobile .control-scrollbar{overflow:auto;-webkit-overflow-scrolling:touch}
.control-treelist li.dragged > div.record:before{display:none}
.control-treelist li.placeholder{display:inline-block;position:relative;background:#4ea5e0 !important;height:25px;margin-bottom:5px}
.control-treelist li.placeholder:before{display:block;position:absolute;font-family:FontAwesome;font-weight:normal;font-style:normal;text-decoration:inherit;-webkit-font-smoothing:antialiased;*margin-right:.3em;content:"\f053";color:#d35714;left:-10px;top:8px;z-index:2000}
.control-treeview{margin-bottom:40px; }
.control-treeview{margin-bottom:40px; }
.control-treeview ol{margin:0;padding:0;list-style:none;background:#ffffff}
.control-treeview ol > li{-webkit-transition:width 1s;transition:width 1s}
.control-treeview ol > li > div{font-size:14px;font-weight:normal;background:#ffffff;border-bottom:1px solid #ecf0f1;position:relative}
@ -319,18 +319,20 @@ html.mobile .control-scrollbar{overflow:auto;-webkit-overflow-scrolling:touch}
.control-treeview ol > li > div .checkbox{position:absolute;top:-2px;right:0}
.control-treeview ol > li > div .checkbox label{margin-right:0}
.control-treeview ol > li > div .checkbox label:before{border-color:#cccccc}
.control-treeview ol > li > div.popover-highlight{background-color:#58b6f7 !important}
.control-treeview ol > li > div.popover-highlight{background-color:#4ea5e0 !important}
.control-treeview ol > li > div.popover-highlight:before{background-position:0px -80px}
.control-treeview ol > li > div.popover-highlight > a{color:#ffffff !important;cursor:default}
.control-treeview ol > li > div.popover-highlight span{color:#ffffff !important}
.control-treeview ol > li > div.popover-highlight > ul.submenu,.control-treeview ol > li > div.popover-highlight > span.drag-handle{display:none !important}
.control-treeview ol > li.dragged div,.control-treeview ol > li > div:hover{background-color:#58b6f7 !important}
.control-treeview ol > li.dragged div,.control-treeview ol > li > div:hover{background-color:#4ea5e0 !important}
.control-treeview ol > li.dragged div > a,.control-treeview ol > li > div:hover > a{color:#ffffff !important}
.control-treeview ol > li.dragged div:before,.control-treeview ol > li > div:hover:before{background-position:0px -80px}
.control-treeview ol > li.dragged div:after,.control-treeview ol > li > div:hover:after{top:0 !important;bottom:0 !important}
.control-treeview ol > li.dragged div span,.control-treeview ol > li > div:hover span{color:#ffffff !important}
.control-treeview ol > li.dragged div span.drag-handle,.control-treeview ol > li > div:hover span.drag-handle{cursor:move;opacity:1;filter:alpha(opacity=100)}
.control-treeview ol > li.dragged div span.borders,.control-treeview ol > li > div:hover span.borders{display:none}
.control-treeview ol > li > div:active{background-color:#3498db !important}
.control-treeview ol > li > div:active > a{color:#ffffff !important}
.control-treeview ol > li[data-no-drag-mode] div:hover span.drag-handle{cursor:default !important;opacity:0.3 !important;filter:alpha(opacity=30) !important}
.control-treeview ol > li.dragged li.has-subitems > div:before,.control-treeview ol > li.dragged.has-subitems > div:before{background-position:0px -52px}
.control-treeview ol > li.dragged div > ul.submenu{display:none !important}
@ -396,17 +398,10 @@ html.mobile .control-scrollbar{overflow:auto;-webkit-overflow-scrolling:touch}
.control-treeview ol > li > ol > li > ol > li > ol > li > ol > li > ol > li > ol > li > ol > li > ol > li > ol > li > ol > li > div > a{margin-left:-161px;padding-left:161px}
.control-treeview ol > li > ol > li > ol > li > ol > li > ol > li > ol > li > ol > li > ol > li > ol > li > ol > li > ol > li > div:before{margin-left:100px}
.control-treeview ol > li > ol > li > ol > li > ol > li > ol > li > ol > li > ol > li > ol > li > ol > li > ol > li > ol > li > div > span.expand{left:102px}
.control-treeview.with-dual-icons ol > li > div:before,.control-treeview.with-icons ol > li > div:before{display:none}
.control-treeview.with-dual-icons ol > li > div span.icon,.control-treeview.with-icons ol > li > div span.icon{display:block;position:absolute;width:22px;height:22px;left:20px;top:15px;text-align:center;font-weight:500;line-height:22px;color:#999}
.control-treeview.with-dual-icons ol > li > div span.icon > i,.control-treeview.with-icons ol > li > div span.icon > i{line-height:22px;font-weight:normal;font-size:22px;color:#999}
.control-treeview.with-dual-icons ol > li > div:hover span.icon > i,.control-treeview.with-icons ol > li > div:hover span.icon > i,.control-treeview.with-dual-icons ol > li > div.popover-highlight span.icon > i,.control-treeview.with-icons ol > li > div.popover-highlight span.icon > i{color:#fff !important}
.control-treeview.with-dual-icons ol > li > div > a{padding-left:91px}
.control-treeview.with-dual-icons ol > li > div span.icon:first-child{font-size:11px;color:#ccc}
.control-treeview.with-dual-icons ol > li > div span.icon:first-child > i{color:#ccc;font-size:15px}
.control-treeview.with-dual-icons ol > li > div span.icon:last-child{left:52px}
.control-treeview p.no-data{padding:18px 0;margin:0;color:#666666;font-size:14px;text-align:center;font-weight:400}
.control-treeview a.menu-control{display:block;margin:20px;padding:13px 15px;border:dotted 2px #ebebeb;color:#bdc3c7;font-size:12px;font-weight:600;text-transform:uppercase;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;vertical-align:middle}
.control-treeview a.menu-control:hover{text-decoration:none;background-color:#58b6f7 !important;color:#ffffff !important;border:none;padding:15px 17px}
.control-treeview a.menu-control{display:block;margin:20px;padding:13px 15px;border:dotted 2px #ebebeb;color:#bdc3c7;font-size:12px;font-weight:600;text-transform:uppercase;border-radius:5px;vertical-align:middle}
.control-treeview a.menu-control:hover,.control-treeview a.menu-control:focus{text-decoration:none;background-color:#4ea5e0;color:#ffffff;border:none;padding:15px 17px}
.control-treeview a.menu-control:active{background:#3498db;color:#ffffff}
.control-treeview a.menu-control i{margin-right:10px;font-size:14px}
.control-treeview.treeview-light{margin-bottom:0;margin-top:20px}
.control-treeview.treeview-light ol{background-color:transparent}
@ -416,7 +411,6 @@ html.mobile .control-scrollbar{overflow:auto;-webkit-overflow-scrolling:touch}
.control-treeview.treeview-light ol > li > div span.expand{top:19px}
.control-treeview.treeview-light ol > li > div > span.drag-handle{top:0;right:0;bottom:auto;height:100%;width:60px;background:#2581b8;-webkit-transition:none !important;transition:none !important}
.control-treeview.treeview-light ol > li > div > span.drag-handle:before{position:absolute;left:50%;top:50%;margin-left:-6px}
.control-treeview.treeview-light ol > li > div > .subpanel{right:0;top:0;height:100%;position:absolute;z-index:200;padding:0 20px}
.control-treeview.treeview-light ol > li > div > ul.submenu{right:60px;left:auto;bottom:auto;top:0;height:100%;margin:0;background:transparent;white-space:nowrap;font-size:0}
.control-treeview.treeview-light ol > li > div > ul.submenu:before,.control-treeview.treeview-light ol > li > div > ul.submenu:after{display:none}
.control-treeview.treeview-light ol > li > div > ul.submenu li{height:100%;display:inline-block;background:#2581b8;border-right:1px solid #328ec8}

37
modules/backend/assets/less/controls/treeview.less
View File

@ -175,19 +175,19 @@
}
&.popover-highlight {
background-color: @color-treeview-hover-bg!important;
background-color: @color-treeview-hover-bg !important;
&:before {
background-position: 0px -80px;
}
> a {
color: @color-treeview-hover-text!important;
color: @color-treeview-hover-text !important;
cursor: default;
}
span {
color: @color-treeview-hover-text!important;
color: @color-treeview-hover-text !important;
}
> ul.submenu, > span.drag-handle {
@ -197,10 +197,10 @@
}
&.dragged div, > div:hover {
background-color: @color-treeview-hover-bg!important;
background-color: @color-treeview-hover-bg! important;
> a {
color: @color-treeview-hover-text!important;
color: @color-treeview-hover-text !important;
}
&:before {
@ -208,12 +208,12 @@
}
&:after {
top: 0!important;
bottom: 0!important;
top: 0 !important;
bottom: 0 !important;
}
span {
color: @color-treeview-hover-text!important;
color: @color-treeview-hover-text !important;
&.drag-handle {
cursor: move;
@ -226,6 +226,14 @@
}
}
> div:active {
background-color: @color-treeview-active-bg !important;
> a {
color: @color-treeview-active-text !important;
}
}
&[data-no-drag-mode] div:hover {
span.drag-handle {
cursor: default!important;
@ -404,17 +412,22 @@
font-size: @font-size-base - 2;
font-weight: 600;
text-transform: uppercase;
.border-radius(5px);
border-radius: 5px;
vertical-align: middle;
&:hover {
&:hover, &:focus {
text-decoration: none;
background-color: @color-treeview-hover-bg !important;
color: @color-treeview-hover-text !important;
background-color: @color-treeview-hover-bg;
color: @color-treeview-hover-text;
border: none;
padding: 15px 17px;
}
&:active {
background: @color-treeview-active-bg;
color: @color-treeview-active-text;
}
i {
margin-right: 10px;
font-size: 14px;

6
modules/backend/assets/less/core/variables.less
View File

@ -125,8 +125,10 @@
@color-treeview-item-title: #2b3e50;
@color-treeview-item-comment: #95a5a6;
@color-treeview-control: #bdc3c7;
@color-treeview-hover-bg: #58b6f7;
@color-treeview-hover-text: #ffffff;
@color-treeview-hover-bg: @highlight-hover-bg;
@color-treeview-hover-text: @highlight-hover-text;
@color-treeview-active-bg: @highlight-active-bg;
@color-treeview-active-text: @highlight-active-text;
@color-treeview-item-active-comment: #8f8f8f;
@color-treeview-submenu-text: #ffffff;
@color-treeview-light-submenu-bg: #2581b8;

31
modules/backend/formwidgets/repeater/assets/css/repeater.css
View File

@ -156,6 +156,7 @@
margin-top: 10px;
margin-left: 20px;
border: 2px dotted #e0e0e0;
border-radius: 5px;
}
.field-repeater .field-repeater-add-item:before {
color: #bdc3c7;
@ -176,14 +177,32 @@
text-align: center;
display: block;
text-decoration: none;
padding: 20px 10px;
padding: 13px 15px;
text-transform: uppercase;
font-weight: 600;
font-size: 12px;
}
.field-repeater .field-repeater-add-item:hover {
border: 2px dotted rgba(0, 0, 0, 0.1);
.field-repeater .field-repeater-add-item:hover,
.field-repeater .field-repeater-add-item:focus {
background-color: #4ea5e0;
border-color: transparent;
}
.field-repeater .field-repeater-add-item:hover:before {
.field-repeater .field-repeater-add-item:hover:before,
.field-repeater .field-repeater-add-item:focus:before {
color: #999;
}
.field-repeater .field-repeater-add-item:hover > a {
color: #bdc3c7;
.field-repeater .field-repeater-add-item:hover > a,
.field-repeater .field-repeater-add-item:focus > a {
color: #ffffff;
}
.field-repeater .field-repeater-add-item:active {
background: #3498db;
border-color: transparent;
}
.field-repeater .field-repeater-add-item:active > a {
color: #ffffff;
}
.field-repeater .field-repeater-add-item.in-progress {
border-color: #e0e0e0 !important;
background: transparent !important;
}

29
modules/backend/formwidgets/repeater/assets/less/repeater.less
View File

@ -156,6 +156,7 @@
margin-top: 10px;
margin-left: 20px;
border: 2px dotted #e0e0e0;
border-radius: 5px;
&:before {
color: #bdc3c7;
@ -171,16 +172,36 @@
text-align: center;
display: block;
text-decoration: none;
padding: 20px 10px;
padding: 13px 15px;
text-transform: uppercase;
font-weight: 600;
font-size: @font-size-base - 2;
}
&:hover {
border: 2px dotted rgba(0,0,0,.1);
&:hover, &:focus {
background-color: @highlight-hover-bg;
border-color: transparent;
&:before {
color: #999;
}
> a { color: #bdc3c7;}
> a {
color: @highlight-hover-text;
}
}
&:active {
background: @highlight-active-bg;
border-color: transparent;
> a {
color: @highlight-active-text;
}
}
&.in-progress {
border-color: #e0e0e0 !important;
background: transparent !important;
}
}
}