diff options
| author | Claire <claire.github-309c@sitedethib.com> | 2021-03-24 10:14:42 +0100 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2021-03-24 10:14:42 +0100 |
| commit | d7c1c41859549212a6d34ad869fded16acc17b48 (patch) | |
| tree | 162079c55cfe182fc801fe5969469cf6fda9082c /app/javascript/flavours/glitch/styles/components | |
| parent | c7f04961b6dcb1b7e12136deadcf65076c130c40 (diff) | |
| parent | 2bb573d021d53a31efd299763cd55d342d4da307 (diff) | |
Merge pull request #1515 from ClearlyClaire/glitch-soc/features/notifications-design
Change notification settings UI to be more compact
Diffstat (limited to 'app/javascript/flavours/glitch/styles/components')
| -rw-r--r-- | app/javascript/flavours/glitch/styles/components/columns.scss | 67 |
1 files changed, 67 insertions, 0 deletions
diff --git a/app/javascript/flavours/glitch/styles/components/columns.scss b/app/javascript/flavours/glitch/styles/components/columns.scss index 90aa5859d..42d64c135 100644 --- a/app/javascript/flavours/glitch/styles/components/columns.scss +++ b/app/javascript/flavours/glitch/styles/components/columns.scss @@ -483,6 +483,73 @@ 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-property: background-color, box-shadow; + transition: all 0.2s ease; + + &[disabled] { + cursor: not-allowed; + opacity: 0.5; + } + + &:not([disabled]) { + &:hover { + background-color: darken($ui-base-color, 10%); + } + + &:focus { + background-color: darken($ui-base-color, 15%); + } + + &:active { + background-color: darken($ui-base-color, 20%); + } + + &.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; + } + } + } + + /* TODO: check RTL? */ + &:first-child { + margin-left: 0; + } +} + .empty-column-indicator, .error-column, .follow_requests-unlocked_explanation { |