From 200d7a170806ce530218d4d43292f9bf14455ab7 Mon Sep 17 00:00:00 2001 From: Claire Date: Mon, 8 Mar 2021 18:40:34 +0100 Subject: Change notification settings UI to be more compact Signed-off-by: Claire --- .../flavours/glitch/styles/components/columns.scss | 44 ++++++++++++++++++++++ 1 file changed, 44 insertions(+) (limited to 'app/javascript/flavours/glitch/styles/components') diff --git a/app/javascript/flavours/glitch/styles/components/columns.scss b/app/javascript/flavours/glitch/styles/components/columns.scss index 90aa5859d..aaf2c9572 100644 --- a/app/javascript/flavours/glitch/styles/components/columns.scss +++ b/app/javascript/flavours/glitch/styles/components/columns.scss @@ -483,6 +483,50 @@ margin-right: 5px; } +.column-settings__pillbar { + display: flex; + overflow: hidden; + background-color: transparent; + border: 0; + border-radius: 4px; + margin-bottom: 10px; + align-items: stretch; +} + +.pillbar-button { + border: 0; + color: #fafafa; + padding: 2px; + margin: 0; + margin-left: 2px; + font-size: inherit; + flex: auto; + background-color: $ui-base-color; + transition: background-color 0.2s ease; + + &[disabled] { + cursor: not-allowed; + opacity: 0.5; + } + + &:hover:not([disabled]) { + background-color: darken($ui-base-color, 10%); + } + + &.active { + background-color: $ui-highlight-color; + } + + &.active:hover:not([disabled]) { + background-color: lighten($ui-highlight-color, 10%); + } + + /* TODO: check RTL? */ + &:first-child { + margin-left: 0; + } +} + .empty-column-indicator, .error-column, .follow_requests-unlocked_explanation { -- cgit From e71f4d468b217504f3cd5b8f8c133f9c0e1869fc Mon Sep 17 00:00:00 2001 From: Claire Date: Mon, 8 Mar 2021 20:37:46 +0100 Subject: Add more button states? Signed-off-by: Claire --- .../flavours/glitch/styles/components/columns.scss | 34 +++++++++++++++++----- 1 file changed, 26 insertions(+), 8 deletions(-) (limited to 'app/javascript/flavours/glitch/styles/components') diff --git a/app/javascript/flavours/glitch/styles/components/columns.scss b/app/javascript/flavours/glitch/styles/components/columns.scss index aaf2c9572..7d7642a31 100644 --- a/app/javascript/flavours/glitch/styles/components/columns.scss +++ b/app/javascript/flavours/glitch/styles/components/columns.scss @@ -509,16 +509,34 @@ opacity: 0.5; } - &:hover:not([disabled]) { - background-color: darken($ui-base-color, 10%); - } + &:not([disabled]) { + &:hover { + background-color: darken($ui-base-color, 10%); + } - &.active { - background-color: $ui-highlight-color; - } + &:focus { + background-color: darken($ui-base-color, 15%); + } - &.active:hover:not([disabled]) { - background-color: lighten($ui-highlight-color, 10%); + &:active { + background-color: darken($ui-base-color, 20%); + } + + &.active { + background-color: $ui-highlight-color; + + &:hover { + background-color: lighten($ui-highlight-color, 10%); + } + + &:focus { + background-color: lighten($ui-highlight-color, 15%); + } + + &:active { + background-color: lighten($ui-highlight-color, 20%); + } + } } /* TODO: check RTL? */ -- cgit From 2bb573d021d53a31efd299763cd55d342d4da307 Mon Sep 17 00:00:00 2001 From: Claire Date: Mon, 8 Mar 2021 20:45:47 +0100 Subject: Messing around with box-shadow Signed-off-by: Claire --- app/javascript/flavours/glitch/styles/components/columns.scss | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) (limited to 'app/javascript/flavours/glitch/styles/components') diff --git a/app/javascript/flavours/glitch/styles/components/columns.scss b/app/javascript/flavours/glitch/styles/components/columns.scss index 7d7642a31..42d64c135 100644 --- a/app/javascript/flavours/glitch/styles/components/columns.scss +++ b/app/javascript/flavours/glitch/styles/components/columns.scss @@ -502,7 +502,8 @@ font-size: inherit; flex: auto; background-color: $ui-base-color; - transition: background-color 0.2s ease; + transition-property: background-color, box-shadow; + transition: all 0.2s ease; &[disabled] { cursor: not-allowed; @@ -524,17 +525,21 @@ &.active { background-color: $ui-highlight-color; + box-shadow: inset 0 5px darken($ui-highlight-color, 20%); &:hover { background-color: lighten($ui-highlight-color, 10%); + box-shadow: inset 0 5px darken($ui-highlight-color, 10%); } &:focus { background-color: lighten($ui-highlight-color, 15%); + box-shadow: inset 0 5px darken($ui-highlight-color, 5%); } &:active { background-color: lighten($ui-highlight-color, 20%); + box-shadow: inset 0 5px $ui-highlight-color; } } } -- cgit