diff options
author | ThibG <thib@sitedethib.com> | 2019-10-07 12:02:20 +0200 |
---|---|---|
committer | GitHub <noreply@github.com> | 2019-10-07 12:02:20 +0200 |
commit | d2f7b8685cfd0ec9b69af505b56c791d9b5f1c82 (patch) | |
tree | 79e8fa613494ae37fe2adfb41bf9ba38f0ffd80d /app/javascript/flavours/glitch/styles/components/columns.scss | |
parent | 3921125e5578fb3871fdcae0e8e8a77179f1ad72 (diff) | |
parent | 0fbe36e3fb4644945eeb0c142045a003e2793b19 (diff) |
Merge pull request #1229 from ThibG/glitch-soc/features/upstream-scroll-behavior
Merge upstream changes to scroll behavior in single column
Diffstat (limited to 'app/javascript/flavours/glitch/styles/components/columns.scss')
-rw-r--r-- | app/javascript/flavours/glitch/styles/components/columns.scss | 27 |
1 files changed, 26 insertions, 1 deletions
diff --git a/app/javascript/flavours/glitch/styles/components/columns.scss b/app/javascript/flavours/glitch/styles/components/columns.scss index 7f3c21163..6ba9698c5 100644 --- a/app/javascript/flavours/glitch/styles/components/columns.scss +++ b/app/javascript/flavours/glitch/styles/components/columns.scss @@ -17,6 +17,7 @@ justify-content: center; width: 100%; height: 100%; + min-height: 100vh; &__pane { height: 100%; @@ -24,12 +25,14 @@ pointer-events: none; display: flex; justify-content: flex-end; + min-width: 285px; &--start { justify-content: flex-start; } &__inner { + position: fixed; width: 285px; pointer-events: auto; height: 100%; @@ -40,6 +43,7 @@ box-sizing: border-box; width: 100%; max-width: 600px; + flex: 0 0 auto; display: flex; flex-direction: column; @@ -50,6 +54,26 @@ } } +.tabs-bar__wrapper { + background: darken($ui-base-color, 8%); + position: sticky; + top: 0; + z-index: 2; + padding-top: 0; + + @media screen and (min-width: $no-gap-breakpoint) { + padding-top: 10px; + } + + .tabs-bar { + margin-bottom: 0; + + @media screen and (min-width: $no-gap-breakpoint) { + margin-bottom: 10px; + } + } +} + .react-swipeable-view-container { &, .columns-area, @@ -83,7 +107,6 @@ flex-direction: column; width: 100%; height: 100%; - background: darken($ui-base-color, 7%); } .column { @@ -91,6 +114,8 @@ } .column-back-button { + box-sizing: border-box; + width: 100%; background: lighten($ui-base-color, 4%); color: $highlight-text-color; cursor: pointer; |