diff options
author | beatrix <beatrix.bitrot@gmail.com> | 2018-01-14 17:48:02 -0500 |
---|---|---|
committer | GitHub <noreply@github.com> | 2018-01-14 17:48:02 -0500 |
commit | cd6674606fe07dbecdfb0c49a6968ff58188bfd8 (patch) | |
tree | 0183edc9d55bbd8870618bcb8c334ccfb1574473 /app/javascript/flavours/glitch/styles/components/lists.scss | |
parent | 39f231f3da1ffe7e8a75df924790005fde5fe7fa (diff) | |
parent | f9b08e2142f552ed2873a014b78869df04c614e3 (diff) |
Merge pull request #329 from KnzkDev/scss-refactor
SCSS Refactor
Diffstat (limited to 'app/javascript/flavours/glitch/styles/components/lists.scss')
-rw-r--r-- | app/javascript/flavours/glitch/styles/components/lists.scss | 103 |
1 files changed, 103 insertions, 0 deletions
diff --git a/app/javascript/flavours/glitch/styles/components/lists.scss b/app/javascript/flavours/glitch/styles/components/lists.scss new file mode 100644 index 000000000..de0783b6d --- /dev/null +++ b/app/javascript/flavours/glitch/styles/components/lists.scss @@ -0,0 +1,103 @@ +.attachment-list { + display: flex; + font-size: 14px; + border: 1px solid lighten($ui-base-color, 8%); + border-radius: 4px; + margin-top: 14px; + overflow: hidden; +} + +.attachment-list__icon { + flex: 0 0 auto; + color: $ui-base-lighter-color; + padding: 8px 18px; + cursor: default; + border-right: 1px solid lighten($ui-base-color, 8%); + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + font-size: 26px; + + .fa { + display: block; + } +} + +.attachment-list__list { + list-style: none; + padding: 4px 0; + padding-left: 8px; + display: flex; + flex-direction: column; + justify-content: center; + + li { + display: block; + padding: 4px 0; + } + + a { + text-decoration: none; + color: $ui-base-lighter-color; + font-weight: 500; + + &:hover { + text-decoration: underline; + } + } +} + +.list-editor { + background: $ui-base-color; + flex-direction: column; + border-radius: 8px; + box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4); + width: 380px; + overflow: hidden; + + @media screen and (max-width: 420px) { + width: 90%; + } + + h4 { + padding: 15px 0; + background: lighten($ui-base-color, 13%); + font-weight: 500; + font-size: 16px; + text-align: center; + border-radius: 8px 8px 0 0; + } + + .drawer__pager { + height: 50vh; + } + + .drawer__inner { + border-radius: 0 0 8px 8px; + + &.backdrop { + width: calc(100% - 60px); + box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4); + border-radius: 0 0 0 8px; + } + } + + &__accounts { + overflow-y: auto; + } + + .account__display-name { + &:hover strong { + text-decoration: none; + } + } + + .account__avatar { + cursor: default; + } + + .search { + margin-bottom: 0; + } +} |