diff options
author | Eugen Rochko <eugen@zeonfederated.com> | 2019-05-25 21:27:00 +0200 |
---|---|---|
committer | ThibG <thib@sitedethib.com> | 2019-06-13 22:15:31 +0200 |
commit | d99a661f08398238838bf576e86c4be706ee7aa0 (patch) | |
tree | 2afbd2b0a7f4dd61876896186956abea78ea7ae4 /app/javascript/flavours/glitch/styles/components/columns.scss | |
parent | 0bd9f23e6d2599a3d3930b6456024a4e3c9a3535 (diff) |
[Glitch] Add responsive panels to the single-column layout
Port 1e5532e693d9533ee37f553aeb191e284178fa52 to glitch-soc Signed-off-by: Thibaut Girka <thib@sitedethib.com>
Diffstat (limited to 'app/javascript/flavours/glitch/styles/components/columns.scss')
-rw-r--r-- | app/javascript/flavours/glitch/styles/components/columns.scss | 57 |
1 files changed, 28 insertions, 29 deletions
diff --git a/app/javascript/flavours/glitch/styles/components/columns.scss b/app/javascript/flavours/glitch/styles/components/columns.scss index f372a4830..80d198ff7 100644 --- a/app/javascript/flavours/glitch/styles/components/columns.scss +++ b/app/javascript/flavours/glitch/styles/components/columns.scss @@ -26,7 +26,12 @@ display: flex; justify-content: flex-end; + &--start { + justify-content: flex-start; + } + &__inner { + width: 285px; pointer-events: auto; height: 100%; } @@ -178,9 +183,31 @@ padding: 15px; text-decoration: none; - &:hover { + &:hover, + &:focus, + &:active { background: lighten($ui-base-color, 11%); } + + &:focus { + outline: 0; + } + + &--transparent { + background: transparent; + color: $ui-secondary-color; + + &:hover, + &:focus, + &:active { + background: transparent; + color: $primary-text-color; + } + + &.active { + color: $ui-highlight-color; + } + } } .column-link__icon { @@ -506,31 +533,3 @@ margin: 0 5px; } } - -.floating-action-button { - position: fixed; - display: flex; - justify-content: center; - align-items: center; - width: 3.9375rem; - height: 3.9375rem; - bottom: 1.3125rem; - right: 1.3125rem; - background: darken($ui-highlight-color, 3%); - color: $white; - border-radius: 50%; - font-size: 21px; - line-height: 21px; - text-decoration: none; - box-shadow: 2px 3px 9px rgba($base-shadow-color, 0.4); - - &:hover, - &:focus, - &:active { - background: lighten($ui-highlight-color, 7%); - } - - @media screen and (min-width: 630px) { - display: none; - } -} |