diff --git a/browser/main/Detail/FolderSelect.styl b/browser/main/Detail/FolderSelect.styl new file mode 100644 index 00000000..0abe6589 --- /dev/null +++ b/browser/main/Detail/FolderSelect.styl @@ -0,0 +1,132 @@ +.root + position relative + border solid 1px transparent + line-height 34px + vertical-align middle + border-radius 2px + transition 0.15s + user-select none + &:hover + background-color white + border-color $ui-borderColor + +.root--search, .root--focus + @extend .root + background-color white + border-color $ui-input--focus-borderColor + &:hover + background-color white + border-color $ui-input--focus-borderColor + +.idle + position relative + cursor pointer +.idle-label + absolute left top + padding 0 0 0 5px + right 20px + overflow ellipsis + +.idle-label-name + border-left solid 4px transparent + padding 2px 5px +.idle-label-name-surfix + font-size 10px + color $ui-inactive-text-color + margin-left 5px +.idle-caret + absolute right top + height 34px + width 20px + line-height 34px + +.search + absolute top left right bottom + line-height 34px + +.search-input + vertical-align middle + position relative + top -2px + outline none + border none + height 20px + line-height 20px + background-color transparent + padding 0 10px + +.search-optionList + position fixed + max-height 450px + overflow auto + z-index 200 + background-color white + border-radius 2px + box-shadow 2px 2px 10px gray + +.search-optionList-item + height 34px + width 250px + box-sizing border-box + padding 0 5px + overflow ellipsis + cursor pointer + &:hover + background-color $ui-button--hover-backgroundColor + +.search-optionList-item--active + @extend .search-optionList-item + background-color $ui-button--active-backgroundColor + color $ui-button--active-color + &:hover + background-color $ui-button--active-backgroundColor + color $ui-button--active-color +.search-optionList-item-name + border-left solid 4px transparent + padding 2px 5px +.search-optionList-item-name-surfix + font-size 10px + color $ui-inactive-text-color + margin-left 5px + +body[data-theme="dark"] + .root + color $ui-dark-text-color + &:hover + color white + background-color $ui-dark-button--hover-backgroundColor + border-color $ui-dark-borderColor + + .root--search, .root--focus + @extend .root + background-color $ui-dark-button--hover-backgroundColor + border-color $ui-input--focus-borderColor + &:hover + background-color $ui-dark-button--hover-backgroundColor + border-color $ui-input--focus-borderColor + + .idle-label-name-surfix + color $ui-dark-inactive-text-color + + .search-input + color white + background-color transparent + border-color $ui-dark-borderColor + + .search-optionList + color white + background-color $ui-dark-button--hover-backgroundColor + box-shadow 2px 2px 10px black + + .search-optionList-item + &:hover + background-color lighten($ui-dark-button--hover-backgroundColor, 15%) + + .search-optionList-item--active + background-color $ui-dark-button--active-backgroundColor + color $ui-dark-button--active-color + &:hover + background-color $ui-dark-button--active-backgroundColor + color $ui-dark-button--active-color + .search-optionList-item-name-surfix + color $ui-dark-inactive-text-color