diff options
author | beatrix <beatrix.bitrot@gmail.com> | 2018-01-08 13:08:11 -0500 |
---|---|---|
committer | GitHub <noreply@github.com> | 2018-01-08 13:08:11 -0500 |
commit | 90e568413b11a467ca500dabd52bc6608655b0bd (patch) | |
tree | afd6f46f91409e58c77c991578779ac5f379c5d2 /app/javascript/flavours/glitch/styles | |
parent | 65986b6f0b66ea285b89bb82531067db146d8ecc (diff) | |
parent | ef0b7d1e7618014c523c3ef8ea2badb5dd684e77 (diff) |
Merge pull request #308 from KnzkDev/fix/list-editor
Fix list editor design
Diffstat (limited to 'app/javascript/flavours/glitch/styles')
-rw-r--r-- | app/javascript/flavours/glitch/styles/components/index.scss | 139 |
1 files changed, 139 insertions, 0 deletions
diff --git a/app/javascript/flavours/glitch/styles/components/index.scss b/app/javascript/flavours/glitch/styles/components/index.scss index 967620397..c07d4162e 100644 --- a/app/javascript/flavours/glitch/styles/components/index.scss +++ b/app/javascript/flavours/glitch/styles/components/index.scss @@ -1568,6 +1568,39 @@ } } +.drawer__pager { + box-sizing: border-box; + padding: 0; + flex-grow: 1; + position: relative; + overflow: hidden; + display: flex; +} + +.drawer__inner { + position: absolute; + top: 0; + left: 0; + background: lighten($ui-base-color, 13%) url('~images/wave-drawer.png') no-repeat bottom / 100% auto; + box-sizing: border-box; + padding: 0; + display: flex; + flex-direction: column; + overflow: hidden; + overflow-y: auto; + width: 100%; + height: 100%; + + &.darker { + background: $ui-base-color; + } + + > .mastodon { + background: url('~images/mastodon-ui.png') no-repeat left bottom / contain; + flex: 1; + } +} + .pseudo-drawer { background: lighten($ui-base-color, 13%); font-size: 13px; @@ -2781,6 +2814,112 @@ filter: none; } +.search { + position: relative; +} + +.search__input { + outline: 0; + box-sizing: border-box; + display: block; + width: 100%; + border: none; + padding: 10px; + padding-right: 30px; + font-family: inherit; + background: $ui-base-color; + color: $ui-primary-color; + font-size: 14px; + margin: 0; + + &::-moz-focus-inner { + border: 0; + } + + &::-moz-focus-inner, + &:focus, + &:active { + outline: 0 !important; + } + + &:focus { + background: lighten($ui-base-color, 4%); + } + + @media screen and (max-width: 600px) { + font-size: 16px; + } +} + +.search__icon { + .fa { + position: absolute; + top: 10px; + right: 10px; + z-index: 2; + display: inline-block; + opacity: 0; + transition: all 100ms linear; + font-size: 18px; + width: 18px; + height: 18px; + color: $ui-secondary-color; + cursor: default; + pointer-events: none; + + &.active { + pointer-events: auto; + opacity: 0.3; + } + } + + .fa-search { + transform: rotate(90deg); + + &.active { + pointer-events: none; + transform: rotate(0deg); + } + } + + .fa-times-circle { + top: 11px; + transform: rotate(0deg); + cursor: pointer; + + &.active { + transform: rotate(90deg); + } + + &:hover { + color: $primary-text-color; + } + } +} + +.search-results__header { + color: $ui-base-lighter-color; + background: lighten($ui-base-color, 2%); + border-bottom: 1px solid darken($ui-base-color, 4%); + padding: 15px 10px; + font-size: 14px; + font-weight: 500; +} + +.search-results__hashtag { + display: block; + padding: 10px; + color: $ui-secondary-color; + text-decoration: none; + + &:hover, + &:active, + &:focus { + color: lighten($ui-secondary-color, 4%); + text-decoration: underline; + } +} + .modal-root { transition: opacity 0.3s linear; will-change: opacity; |