diff options
author | Daniel Calviño Sánchez <danxuliu@gmail.com> | 2020-01-10 08:18:55 +0300 |
---|---|---|
committer | Daniel Calviño Sánchez <danxuliu@gmail.com> | 2020-01-10 08:22:51 +0300 |
commit | 1bbc90d77b5926eb787d5851866e12e5dc1841f2 (patch) | |
tree | 94f8e96930bbe2539e2b15485203b5586a97cc2b /css | |
parent | 8d4a28610f3034c32e576e81aeea5bebf9852488 (diff) |
Replace default vue-at style sheet with a wrapped version
The wrapped version roots all the rules of the default style sheet on
".talk.candidate-mentions", so the rules affect only the candidate
mentions of Talk. Otherwise, as the default rules are too broad (as they
use just ".atwho-XXX") they could mess with the autocompletion of other
elements (like the comments tab in the Files app).
Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
Diffstat (limited to 'css')
-rw-r--r-- | css/At.scss | 132 | ||||
-rw-r--r-- | css/icons.scss | 2 | ||||
-rw-r--r-- | css/merged-files.scss | 1 | ||||
-rw-r--r-- | css/merged.scss | 3 |
4 files changed, 136 insertions, 2 deletions
diff --git a/css/At.scss b/css/At.scss new file mode 100644 index 000000000..2ca905ab9 --- /dev/null +++ b/css/At.scss @@ -0,0 +1,132 @@ +// Copied from vue-at (https://github.com/fritx/vue-at/blob/d16d5eefdae8987c0bffe2d9c3867b7da12c808f/src/At.scss) +// and wrapped to affect only the panel for candidate mentions. + +.talk.candidate-mentions { + + // atwho.css https://github.com/ichord/At.js + .atwho-view { + // position:absolute; + // top: 0; + // left: 0; + // display: none; + // margin-top: 18px; + // background: white; + color: black; + // border: 1px solid #DDD; + border-radius: 3px; + box-shadow: 0 0 5px rgba(0,0,0,0.1); + min-width: 120px; + z-index: 11110 !important; + } + .atwho-ul { + /* width: 100px; */ + list-style:none; + // padding:0; + // margin:auto; + // max-height: 200px; + // overflow-y: auto; + } + .atwho-li { + display: block; + // padding: 5px 10px; + // border-bottom: 1px solid #DDD; + // cursor: pointer; + /* border-top: 1px solid #C8C8C8; */ + } + + ////// added 1 + .atwho-view { + // font-size: 14px; + // min-width: 140px; + // max-width: 180px; + border-radius: 6px; + // overflow: hidden; + box-shadow: 0 0 10px 0 rgba(101, 111, 122, .5); + } + .atwho-ul { + max-height: 135px; + padding: 0; + margin: 0; + } + .atwho-li { + box-sizing: border-box; + height: 27px; + padding: 0 12px; + white-space: nowrap; + display: flex; + align-items: center; + span { + overflow: hidden; + text-overflow: ellipsis; + } + } + .atwho-cur { + // background: #44a8f2; + background: #5BB8FF; + color: white; + } + + ////// added 2 + .atwho-wrap { + position: relative; + } + &.atwho-panel { + position: absolute; + } + .atwho-inner { + position: relative; + } + .atwho-view { + position: absolute; + bottom: 0; + left: -0.8em; // 抵消左边距 + cursor: default; + background-color: rgba(255,255,255,.94); + min-width: 140px; + max-width: 180px; + max-height: 200px; + overflow-y: auto; + &::-webkit-scrollbar { + width: 11px; + height: 11px; + } + &::-webkit-scrollbar-track { + // background-color: rgba(127, 127, 127, .1); + background-color: #F5F5F5; + } + &::-webkit-scrollbar-thumb { + min-height: 36px; + border: 2px solid transparent; + border-top: 3px solid transparent; + border-bottom: 3px solid transparent; + background-clip: padding-box; + border-radius: 7px; + // background-color: rgba(0, 0, 0, 0.2); + background-color: #C4C4C4; + } + } +} + +.talk.candidate-mentions { + // Override "max-width: 180px", as that makes the autocompletion panel too + // narrow. + .atwho-view { + max-width: unset; + } + + // Override autocompletion panel items height, as they are too short + // for the avatars and also need some padding. + .atwho-li { + height: unset; + padding-top: 6px; + padding-bottom: 6px; + } + + // Although the height of its wrapper is 32px the height of the icon + // is the default 16px. This is a temporary fix until it is fixed + // in the avatar component. + .atwho-li .icon-group-forced-white { + width: 32px; + height: 32px; + } +} diff --git a/css/icons.scss b/css/icons.scss index 20d03346c..252049816 100644 --- a/css/icons.scss +++ b/css/icons.scss @@ -70,7 +70,7 @@ // The atwho panel is a direct child of the body, so it is not affected by // .app-Talk rules above. -.atwho-panel { +.talk.candidate-mentions.atwho-panel { // "forced-white" needs to be included in the class name as the Avatar does // not accept several classes. .icon-group-forced-white { diff --git a/css/merged-files.scss b/css/merged-files.scss index 04a24cced..96bd66d25 100644 --- a/css/merged-files.scss +++ b/css/merged-files.scss @@ -1 +1,2 @@ +@import 'At.scss'; @import 'icons.scss'; diff --git a/css/merged.scss b/css/merged.scss index 17087081d..96bd66d25 100644 --- a/css/merged.scss +++ b/css/merged.scss @@ -1 +1,2 @@ -@import 'icons.scss';
\ No newline at end of file +@import 'At.scss'; +@import 'icons.scss'; |