diff options
author | Stefan Malzner <stefan@adlk.io> | 2017-10-13 12:29:40 +0200 |
---|---|---|
committer | Stefan Malzner <stefan@adlk.io> | 2017-10-13 12:29:40 +0200 |
commit | 58cda9cc7fb79ca9df6746de7f9662bc08dc156a (patch) | |
tree | 1211600c2a5d3b5f81c435c6896618111a611720 /src/styles/tabs.scss | |
download | ferdium-app-58cda9cc7fb79ca9df6746de7f9662bc08dc156a.tar.gz ferdium-app-58cda9cc7fb79ca9df6746de7f9662bc08dc156a.tar.zst ferdium-app-58cda9cc7fb79ca9df6746de7f9662bc08dc156a.zip |
initial commit
Diffstat (limited to 'src/styles/tabs.scss')
-rw-r--r-- | src/styles/tabs.scss | 72 |
1 files changed, 72 insertions, 0 deletions
diff --git a/src/styles/tabs.scss b/src/styles/tabs.scss new file mode 100644 index 000000000..75568898b --- /dev/null +++ b/src/styles/tabs.scss | |||
@@ -0,0 +1,72 @@ | |||
1 | @import './config.scss'; | ||
2 | |||
3 | .tabs { | ||
4 | display: flex; | ||
5 | // flex: 1; | ||
6 | flex-direction: column; | ||
7 | flex-shrink: 1; | ||
8 | // align-items: center; | ||
9 | // height: auto; | ||
10 | |||
11 | .placeholder { | ||
12 | width: 100%; | ||
13 | height: 40px; | ||
14 | } | ||
15 | } | ||
16 | |||
17 | .tab-item { | ||
18 | display: flex; | ||
19 | justify-content: center; | ||
20 | align-items: center; | ||
21 | position: relative; | ||
22 | width: $theme-sidebar-width; | ||
23 | height: $theme-sidebar-width; | ||
24 | min-height: 50px; | ||
25 | transition: background $theme-transition-time; | ||
26 | |||
27 | &.is-active { | ||
28 | border-left: 4px solid $theme-brand-primary; | ||
29 | background: lighten($theme-brand-primary, 35%); | ||
30 | |||
31 | .tab-item__icon { | ||
32 | margin-left: -4px; | ||
33 | } | ||
34 | } | ||
35 | |||
36 | &.has-custom-icon { | ||
37 | .tab-item__icon { | ||
38 | border-radius: $theme-border-radius; | ||
39 | // border: 1px solid $theme-gray-lighter; | ||
40 | // width: 32px; | ||
41 | } | ||
42 | } | ||
43 | |||
44 | .tab-item__icon { | ||
45 | width: 30px; | ||
46 | height: auto; | ||
47 | } | ||
48 | |||
49 | .tab-item__message-count { | ||
50 | min-width: 17px; | ||
51 | min-height: 17px; | ||
52 | background: $theme-brand-danger; | ||
53 | color: #FFF; | ||
54 | border-radius: 20px; | ||
55 | padding: 0px 5px; | ||
56 | font-size: 11px; | ||
57 | position: absolute; | ||
58 | right: 5px; | ||
59 | bottom: 5px; | ||
60 | display: flex; | ||
61 | justify-content: center; | ||
62 | align-items: center; | ||
63 | |||
64 | &.is-indirect { | ||
65 | padding-top: 0px; | ||
66 | } | ||
67 | } | ||
68 | |||
69 | &.is-reordering { | ||
70 | z-index: 99999; | ||
71 | } | ||
72 | } | ||