diff --git a/modules/backend/assets/css/october.css b/modules/backend/assets/css/october.css index 97dbe20a1..a6034f8b3 100644 --- a/modules/backend/assets/css/october.css +++ b/modules/backend/assets/css/october.css @@ -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} diff --git a/modules/backend/assets/less/controls/treeview.less b/modules/backend/assets/less/controls/treeview.less index 2d5f1df4f..37ddd4724 100644 --- a/modules/backend/assets/less/controls/treeview.less +++ b/modules/backend/assets/less/controls/treeview.less @@ -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; diff --git a/modules/backend/assets/less/core/variables.less b/modules/backend/assets/less/core/variables.less index e2141ecab..05544ab84 100644 --- a/modules/backend/assets/less/core/variables.less +++ b/modules/backend/assets/less/core/variables.less @@ -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; diff --git a/modules/backend/formwidgets/repeater/assets/css/repeater.css b/modules/backend/formwidgets/repeater/assets/css/repeater.css index f51888fd2..c30e8e94e 100644 --- a/modules/backend/formwidgets/repeater/assets/css/repeater.css +++ b/modules/backend/formwidgets/repeater/assets/css/repeater.css @@ -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; } diff --git a/modules/backend/formwidgets/repeater/assets/less/repeater.less b/modules/backend/formwidgets/repeater/assets/less/repeater.less index 4c2fa3bf4..2a86dd6d6 100644 --- a/modules/backend/formwidgets/repeater/assets/less/repeater.less +++ b/modules/backend/formwidgets/repeater/assets/less/repeater.less @@ -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; } } }