diff --git a/jquery.fs.selecter.css b/jquery.fs.selecter.css index 79e25dd..4750a11 100644 --- a/jquery.fs.selecter.css +++ b/jquery.fs.selecter.css @@ -68,8 +68,12 @@ margin: auto 0; } .no-touch .selecter .selecter-selected:hover { + background-color: #cccccc; color: #333333; } +.no-touch .selecter .selecter-selected:hover:after { + border-top-color: #cccccc; +} .no-touch .selecter.disabled .selecter-selected:hover { color: #cccccc; } diff --git a/jquery.fs.selecter.min.css b/jquery.fs.selecter.min.css index d690024..a8764d3 100644 --- a/jquery.fs.selecter.min.css +++ b/jquery.fs.selecter.min.css @@ -6,4 +6,4 @@ * Copyright 2014 Ben Plum; MIT Licensed */ -.selecter{position:relative;display:block;margin:10px 0;z-index:1;max-width:30%}.selecter,.selecter *{-webkit-user-select:none!important;-moz-user-select:none!important;-ms-user-select:none!important;user-select:none!important}.selecter .selecter-element{width:100%;height:100%;position:absolute;left:0;opacity:0;z-index:-1}.selecter .selecter-element,.selecter .selecter-element:focus{outline:0;-webkit-tap-highlight-color:rgba(255,255,255,0);-webkit-tap-highlight-color:transparent}.no-opacity .selecter .selecter-element{left:-999999px}.selecter .selecter-selected{position:relative;background:#fff;border:1px solid #ccc;color:#222;cursor:pointer;display:block;font-size:13px;margin:0;overflow:hidden;padding:10px 15px;text-overflow:clip;z-index:2;border-radius:3px}.selecter .selecter-selected:after{height:0;width:0;position:absolute;top:0;right:15px;bottom:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #ccc;content:'';display:block;margin:auto 0}.no-touch .selecter .selecter-selected:hover{color:#333}.no-touch .selecter.disabled .selecter-selected:hover{color:#ccc}.selecter .selecter-options{width:100%;max-height:260px;position:absolute;top:100%;left:0;border:1px solid #ccc;border-width:0 1px 1px;background-color:#fff;display:none;margin:0;overflow:auto;overflow-x:hidden;padding:0;z-index:50;border-radius:0 0 3px 3px;box-shadow:0 1px 4px rgba(0,0,0,.15)}.no-opacity .selecter .selecter-options{width:auto}.selecter .selecter-group{border-bottom:1px solid #ccc;color:#999;display:block;font-size:11px;padding:10px 15px;text-transform:uppercase}.selecter .selecter-item{width:100%;background:#fff;border-bottom:1px solid #ccc;color:#222;cursor:pointer;display:block;font-size:13px;margin:0;overflow:hidden;padding:10px 15px;text-overflow:ellipsis}.selecter .selecter-item.placeholder{display:none}.selecter .selecter-item.selected{background:#eee}.selecter .selecter-item.disabled{color:#999;cursor:default}.selecter .selecter-item:first-child{border-radius:0}.selecter .selecter-item:last-child{border-bottom:0;border-radius:0 0 2px 2px}.no-touch .selecter .selecter-item:hover,.no-touch .selecter .selecter-item.selected:hover{color:#333;background-color:#ccc}.selecter .selecter-item.disabled,.no-touch .selecter .selecter-item.disabled:hover{color:#ccc;background-color:#fff}.selecter.open{z-index:3}.selecter.open .selecter-selected{z-index:51;border-radius:3px 3px 0 0}.selecter.open .selecter-selected,.selecter.focus .selecter-selected{background-color:#fff;box-shadow:0 0 5px rgba(0,0,0,.1)}.selecter.cover .selecter-options{border-width:1px;top:0;border-radius:3px}.selecter.cover .selecter-options .selecter-item.first{border-radius:3px 3px 0 0}.selecter.cover.open .selecter-selected{z-index:49;border-radius:3px 3px 0 0}.selecter.bottom .selecter-options{top:auto;bottom:100%;border-width:1px 1px 0}.selecter.bottom .selecter-item:last-child{border:none}.selecter.bottom.open .selecter-selected{border-radius:0 0 3px 3px}.selecter.bottom.open .selecter-options{border-radius:3px 3px 0 0}.selecter.bottom .cover .selecter-options{top:auto;bottom:0}.selecter.bottom .cover.open .selecter-selected{border-radius:3px}.selecter.bottom .cover.open .selecter-options{border-radius:3px}.selecter.multiple .selecter-options{width:100%;position:static;border-width:1px;display:block;border-radius:3px;box-shadow:none}.selecter.disabled .selecter-selected{background:#fff;border-color:#ccc;color:#ccc;cursor:default}.selecter.disabled .selecter-options{background:#fff;border-color:#ccc}.selecter.disabled .selecter-group,.selecter.disabled .selecter-item{border-color:#ccc;color:#ccc;cursor:default}.selecter.disabled .selecter-item.selected,.no-touch .selecter.disabled .selecter-item.selected:hover{background:#fafafa}.selecter.disabled .selecter-item,.no-touch .selecter.disabled .selecter-item:hover{color:#ccc;background-color:#fff}.selecter .selecter-options.scroller{overflow:hidden}.selecter .selecter-options.scroller .scroller-content{max-height:260px;padding:0}@media screen and (max-width:740px){.selecter{max-width:40%}}@media screen and (max-width:500px){.selecter{max-width:100%}} \ No newline at end of file +.selecter{position:relative;display:block;margin:10px 0;z-index:1;max-width:30%}.selecter,.selecter *{-webkit-user-select:none!important;-moz-user-select:none!important;-ms-user-select:none!important;user-select:none!important}.selecter .selecter-element{width:100%;height:100%;position:absolute;left:0;opacity:0;z-index:-1}.selecter .selecter-element,.selecter .selecter-element:focus{outline:0;-webkit-tap-highlight-color:rgba(255,255,255,0);-webkit-tap-highlight-color:transparent}.no-opacity .selecter .selecter-element{left:-999999px}.selecter .selecter-selected{position:relative;background:#fff;border:1px solid #ccc;color:#222;cursor:pointer;display:block;font-size:13px;margin:0;overflow:hidden;padding:10px 15px;text-overflow:clip;z-index:2;border-radius:3px}.selecter .selecter-selected:after{height:0;width:0;position:absolute;top:0;right:15px;bottom:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #ccc;content:'';display:block;margin:auto 0}.no-touch .selecter .selecter-selected:hover{background-color:#ccc;color:#333}.no-touch .selecter .selecter-selected:hover:after{border-top-color:#ccc}.no-touch .selecter.disabled .selecter-selected:hover{color:#ccc}.selecter .selecter-options{width:100%;max-height:260px;position:absolute;top:100%;left:0;border:1px solid #ccc;border-width:0 1px 1px;background-color:#fff;display:none;margin:0;overflow:auto;overflow-x:hidden;padding:0;z-index:50;border-radius:0 0 3px 3px;box-shadow:0 1px 4px rgba(0,0,0,.15)}.no-opacity .selecter .selecter-options{width:auto}.selecter .selecter-group{border-bottom:1px solid #ccc;color:#999;display:block;font-size:11px;padding:10px 15px;text-transform:uppercase}.selecter .selecter-item{width:100%;background:#fff;border-bottom:1px solid #ccc;color:#222;cursor:pointer;display:block;font-size:13px;margin:0;overflow:hidden;padding:10px 15px;text-overflow:ellipsis}.selecter .selecter-item.placeholder{display:none}.selecter .selecter-item.selected{background:#eee}.selecter .selecter-item.disabled{color:#999;cursor:default}.selecter .selecter-item:first-child{border-radius:0}.selecter .selecter-item:last-child{border-bottom:0;border-radius:0 0 2px 2px}.no-touch .selecter .selecter-item:hover,.no-touch .selecter .selecter-item.selected:hover{color:#333;background-color:#ccc}.selecter .selecter-item.disabled,.no-touch .selecter .selecter-item.disabled:hover{color:#ccc;background-color:#fff}.selecter.open{z-index:3}.selecter.open .selecter-selected{z-index:51;border-radius:3px 3px 0 0}.selecter.open .selecter-selected,.selecter.focus .selecter-selected{background-color:#fff;box-shadow:0 0 5px rgba(0,0,0,.1)}.selecter.cover .selecter-options{border-width:1px;top:0;border-radius:3px}.selecter.cover .selecter-options .selecter-item.first{border-radius:3px 3px 0 0}.selecter.cover.open .selecter-selected{z-index:49;border-radius:3px 3px 0 0}.selecter.bottom .selecter-options{top:auto;bottom:100%;border-width:1px 1px 0}.selecter.bottom .selecter-item:last-child{border:none}.selecter.bottom.open .selecter-selected{border-radius:0 0 3px 3px}.selecter.bottom.open .selecter-options{border-radius:3px 3px 0 0}.selecter.bottom .cover .selecter-options{top:auto;bottom:0}.selecter.bottom .cover.open .selecter-selected{border-radius:3px}.selecter.bottom .cover.open .selecter-options{border-radius:3px}.selecter.multiple .selecter-options{width:100%;position:static;border-width:1px;display:block;border-radius:3px;box-shadow:none}.selecter.disabled .selecter-selected{background:#fff;border-color:#ccc;color:#ccc;cursor:default}.selecter.disabled .selecter-options{background:#fff;border-color:#ccc}.selecter.disabled .selecter-group,.selecter.disabled .selecter-item{border-color:#ccc;color:#ccc;cursor:default}.selecter.disabled .selecter-item.selected,.no-touch .selecter.disabled .selecter-item.selected:hover{background:#fafafa}.selecter.disabled .selecter-item,.no-touch .selecter.disabled .selecter-item:hover{color:#ccc;background-color:#fff}.selecter .selecter-options.scroller{overflow:hidden}.selecter .selecter-options.scroller .scroller-content{max-height:260px;padding:0}@media screen and (max-width:740px){.selecter{max-width:40%}}@media screen and (max-width:500px){.selecter{max-width:100%}} \ No newline at end of file diff --git a/src/jquery.fs.selecter-config.less b/src/jquery.fs.selecter-config.less index 24189b9..1264388 100644 --- a/src/jquery.fs.selecter-config.less +++ b/src/jquery.fs.selecter-config.less @@ -18,6 +18,7 @@ // Caret @selecter-caret-color: #ccc; // #ccc @selecter-caret-size: 5px; // 5px + @selecter-caret-hover-color: #ccc; // #ccc // Hover @@ -71,4 +72,4 @@ // Shadows @selecter-selected-box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); // 0 0 5px rgba(0, 0, 0, 0.1), "none" to disable - @selecter-options-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15); // 0 1px 4px rgba(0, 0, 0, 0.15), "none" to disable \ No newline at end of file + @selecter-options-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15); // 0 1px 4px rgba(0, 0, 0, 0.15), "none" to disable diff --git a/src/jquery.fs.selecter.less b/src/jquery.fs.selecter.less index 360c381..043e845 100644 --- a/src/jquery.fs.selecter.less +++ b/src/jquery.fs.selecter.less @@ -84,7 +84,12 @@ } .no-touch & &-selected:hover { + background-color: @selecter-hover-background-color; color: @selecter-hover-text-color; + + &:after { + border-top-color: @selecter-caret-hover-color; + } } .no-touch &.disabled &-selected:hover {