diff options
author | Anjith Paul <65152866+AnjithPaul@users.noreply.github.com> | 2021-10-31 16:25:26 +0530 |
---|---|---|
committer | GitHub <noreply@github.com> | 2021-10-31 16:25:26 +0530 |
commit | 2cf6e49e289cfec68c25a8bbc00257f09a98119b (patch) | |
tree | b7a51d016c7a418dcae34be3508a3c9c100098a6 /src/styles | |
parent | Add shortcuts for toggling service from the context menu (#2148) (diff) | |
download | ferdium-app-2cf6e49e289cfec68c25a8bbc00257f09a98119b.tar.gz ferdium-app-2cf6e49e289cfec68c25a8bbc00257f09a98119b.tar.zst ferdium-app-2cf6e49e289cfec68c25a8bbc00257f09a98119b.zip |
Added improvements for displaying service name under service icon (#2169)
* move notification badge to top of service icon
* Change horizontal sidebar height programmatically
* Fix tab item style in vertical and horizontal style sidebar
* Reformat code and remove magic numbers
Co-authored-by: Johan K Mathew <johankmathew@gmail.com>
Diffstat (limited to 'src/styles')
-rw-r--r-- | src/styles/tabs.scss | 5 | ||||
-rw-r--r-- | src/styles/vertical.scss | 33 |
2 files changed, 31 insertions, 7 deletions
diff --git a/src/styles/tabs.scss b/src/styles/tabs.scss index ab7cee08d..c5111fa91 100644 --- a/src/styles/tabs.scss +++ b/src/styles/tabs.scss | |||
@@ -54,6 +54,9 @@ | |||
54 | .tab-item__icon { | 54 | .tab-item__icon { |
55 | margin-left: -4px; | 55 | margin-left: -4px; |
56 | } | 56 | } |
57 | .tab-item__label { | ||
58 | margin-left: -4px; | ||
59 | } | ||
57 | } | 60 | } |
58 | 61 | ||
59 | &.is-label-enabled{ | 62 | &.is-label-enabled{ |
@@ -91,7 +94,7 @@ | |||
91 | align-items: center; | 94 | align-items: center; |
92 | background: $theme-brand-danger; | 95 | background: $theme-brand-danger; |
93 | border-radius: 20px; | 96 | border-radius: 20px; |
94 | bottom: 8px; | 97 | top: 8px; |
95 | color: #fff; | 98 | color: #fff; |
96 | display: flex; | 99 | display: flex; |
97 | font-size: 11px; | 100 | font-size: 11px; |
diff --git a/src/styles/vertical.scss b/src/styles/vertical.scss index 426032bf6..083f98c3d 100644 --- a/src/styles/vertical.scss +++ b/src/styles/vertical.scss | |||
@@ -1,6 +1,8 @@ | |||
1 | @import './config.scss'; | 1 | @import './config.scss'; |
2 | 2 | ||
3 | $sidebar-width: 64px; | 3 | $sidebar-width: 75px; |
4 | $sidebar-bias: 22px; | ||
5 | $tabitem-bias: 30px; | ||
4 | 6 | ||
5 | .sidebar { | 7 | .sidebar { |
6 | width: 100vw; | 8 | width: 100vw; |
@@ -10,6 +12,7 @@ $sidebar-width: 64px; | |||
10 | top: 0; | 12 | top: 0; |
11 | right: 0; | 13 | right: 0; |
12 | padding-bottom: 0px; | 14 | padding-bottom: 0px; |
15 | overflow: hidden !important; | ||
13 | 16 | ||
14 | &::after { | 17 | &::after { |
15 | top: -10px; | 18 | top: -10px; |
@@ -30,17 +33,32 @@ $sidebar-width: 64px; | |||
30 | .tab-item { | 33 | .tab-item { |
31 | 34 | ||
32 | &.is-active { | 35 | &.is-active { |
33 | border-left-width: 0px; | 36 | border-left-width: 0px !important; |
34 | border-top-width: 4px; | 37 | border-top-width: 4px; |
35 | border-top-style: solid; | 38 | border-top-style: solid; |
36 | padding-left: 4px; | 39 | overflow: hidden; |
40 | height: $sidebar-width + 4; | ||
37 | } | 41 | } |
38 | 42 | ||
39 | &:not(.is-active) { | 43 | &:not(.is-active) { |
40 | padding-top: 4px; | 44 | padding-top: 4px; |
41 | } | 45 | } |
46 | |||
47 | &.is-label-enabled{ | ||
48 | min-width: 70px; | ||
49 | max-width: 140px; | ||
50 | height: $sidebar-width + 10; | ||
51 | width: max-content !important; | ||
52 | overflow: hidden; | ||
53 | padding-left: 4px; | ||
54 | padding-right: 4px; | ||
55 | padding-top: 8px; | ||
56 | } | ||
42 | } | 57 | } |
43 | } | 58 | } |
59 | div{ | ||
60 | overflow: hidden !important; | ||
61 | } | ||
44 | 62 | ||
45 | .sidebar__button--workspaces.is-active { | 63 | .sidebar__button--workspaces.is-active { |
46 | position: absolute; | 64 | position: absolute; |
@@ -51,7 +69,7 @@ $sidebar-width: 64px; | |||
51 | } | 69 | } |
52 | 70 | ||
53 | .app .app__content { | 71 | .app .app__content { |
54 | padding-top: $sidebar-width; | 72 | padding-top: $sidebar-width + $sidebar-bias; |
55 | } | 73 | } |
56 | 74 | ||
57 | .workspaces-drawer { | 75 | .workspaces-drawer { |
@@ -86,9 +104,12 @@ $sidebar-width: 64px; | |||
86 | } | 104 | } |
87 | 105 | ||
88 | .darwin .sidebar { | 106 | .darwin .sidebar { |
89 | height: $sidebar-width + 22px; | 107 | height: $sidebar-width + $sidebar-bias; |
90 | 108 | ||
91 | .sidebar__button--workspaces.is-active { | 109 | .sidebar__button--workspaces.is-active { |
92 | height: $sidebar-width - 22px; | 110 | height: $sidebar-width - $sidebar-bias; |
111 | } | ||
112 | .tab-item .is-label-enabled{ | ||
113 | height: $sidebar-width + $tabitem-bias; | ||
93 | } | 114 | } |
94 | } | 115 | } |