diff options
Diffstat (limited to 'app/javascript/flavours/glitch/styles/components/drawer.scss')
-rw-r--r-- | app/javascript/flavours/glitch/styles/components/drawer.scss | 53 |
1 files changed, 44 insertions, 9 deletions
diff --git a/app/javascript/flavours/glitch/styles/components/drawer.scss b/app/javascript/flavours/glitch/styles/components/drawer.scss index ebf996907..865ab4343 100644 --- a/app/javascript/flavours/glitch/styles/components/drawer.scss +++ b/app/javascript/flavours/glitch/styles/components/drawer.scss @@ -114,19 +114,27 @@ } & > .icon { + display: block; + position: absolute; + top: 10px; + right: 10px; + width: 18px; + height: 18px; + color: $ui-secondary-color; + font-size: 18px; + line-height: 18px; + z-index: 2; + .fa { display: inline-block; position: absolute; - top: 10px; - right: 10px; - width: 18px; - height: 18px; - color: $ui-secondary-color; - font-size: 18px; + top: 0; + bottom: 0; + left: 0; + right: 0; opacity: 0; cursor: default; pointer-events: none; - z-index: 2; transition: all 100ms linear; } @@ -136,14 +144,15 @@ } .fa-times-circle { - top: 11px; transform: rotate(-90deg); cursor: pointer; &:hover { color: $primary-text-color } } + } - &.active { + &.active { + & > .icon { .fa-search { opacity: 0; transform: rotate(90deg); @@ -158,6 +167,32 @@ } } +.drawer--search--popout { + box-sizing: border-box; + margin-top: 10px; + border-radius: 4px; + padding: 10px 14px 14px 14px; + box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4); + color: $ui-primary-color; + background: $simple-background-color; + + h4 { + margin-bottom: 10px; + color: $ui-primary-color; + font-size: 13px; + font-weight: 500; + text-transform: uppercase; + } + + ul { margin-bottom: 10px } + li { padding: 4px 0 } + + em { + color: $ui-base-color; + font-weight: 500; + } +} + .drawer--account { padding: 10px; color: $ui-primary-color; |