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/layout.scss | |
download | ferdium-app-58cda9cc7fb79ca9df6746de7f9662bc08dc156a.tar.gz ferdium-app-58cda9cc7fb79ca9df6746de7f9662bc08dc156a.tar.zst ferdium-app-58cda9cc7fb79ca9df6746de7f9662bc08dc156a.zip |
initial commit
Diffstat (limited to 'src/styles/layout.scss')
-rw-r--r-- | src/styles/layout.scss | 141 |
1 files changed, 141 insertions, 0 deletions
diff --git a/src/styles/layout.scss b/src/styles/layout.scss new file mode 100644 index 000000000..d87df2684 --- /dev/null +++ b/src/styles/layout.scss | |||
@@ -0,0 +1,141 @@ | |||
1 | @import './config.scss'; | ||
2 | |||
3 | html { | ||
4 | overflow: hidden; | ||
5 | } | ||
6 | |||
7 | .app { | ||
8 | display: flex; | ||
9 | flex-direction: row; | ||
10 | |||
11 | .app__service { | ||
12 | display: flex; | ||
13 | flex: 1; | ||
14 | flex-direction: column; | ||
15 | } | ||
16 | } | ||
17 | |||
18 | .window-draggable { | ||
19 | position: absolute; | ||
20 | width: 100%; | ||
21 | top: 0px; | ||
22 | left: 0px; | ||
23 | height: 35px; | ||
24 | pointer-events: none; | ||
25 | -webkit-app-region: drag; | ||
26 | z-index: 9999; | ||
27 | } | ||
28 | |||
29 | .darwin { | ||
30 | .sidebar { | ||
31 | padding-top: 23px; | ||
32 | } | ||
33 | } | ||
34 | |||
35 | .sidebar { | ||
36 | display: flex; | ||
37 | flex-direction: column; | ||
38 | align-items: center; | ||
39 | width: $theme-sidebar-width; | ||
40 | background: $theme-gray-lightest; | ||
41 | box-shadow: 1px 0 10px rgba(0,0,0,0.08); | ||
42 | z-index: 200; | ||
43 | text-align: center; | ||
44 | color: $theme-text-color; | ||
45 | |||
46 | .sidebar__add-service { | ||
47 | width: 32px; | ||
48 | height: 32px; | ||
49 | background: $theme-gray-lighter; | ||
50 | border-radius: $theme-border-radius-small; | ||
51 | margin: 10px auto; | ||
52 | color: $theme-gray-light; | ||
53 | } | ||
54 | |||
55 | .sidebar__settings-button { | ||
56 | height: auto; | ||
57 | padding: 20px 0; | ||
58 | font-size: 12px; | ||
59 | position: relative; | ||
60 | |||
61 | .emoji { | ||
62 | position: absolute; | ||
63 | top: 18px; | ||
64 | right: 12px; | ||
65 | |||
66 | img { | ||
67 | width: 18px; | ||
68 | } | ||
69 | } | ||
70 | } | ||
71 | |||
72 | .sidebar__logo { | ||
73 | width: 40px; | ||
74 | height: auto; | ||
75 | } | ||
76 | |||
77 | & > div { | ||
78 | display: flex; | ||
79 | overflow-y: scroll; | ||
80 | |||
81 | &::-webkit-scrollbar { | ||
82 | display: none; | ||
83 | } | ||
84 | } | ||
85 | } | ||
86 | |||
87 | .grid { | ||
88 | .grid__row { | ||
89 | display: flex; | ||
90 | flex-direction: row; | ||
91 | |||
92 | &>* { | ||
93 | margin-right: 20px; | ||
94 | } | ||
95 | |||
96 | & :last-child { | ||
97 | margin-right: 0; | ||
98 | } | ||
99 | } | ||
100 | } | ||
101 | |||
102 | .app-loader { | ||
103 | display: flex; | ||
104 | justify-content: center; | ||
105 | align-items: center; | ||
106 | |||
107 | .app-loader__title { | ||
108 | color: #FFF; | ||
109 | font-size: 40px; | ||
110 | } | ||
111 | |||
112 | &>span { | ||
113 | height: auto; | ||
114 | } | ||
115 | } | ||
116 | |||
117 | .dev-warning { | ||
118 | display: none; | ||
119 | } | ||
120 | |||
121 | .isDevMode { | ||
122 | .dev-warning { | ||
123 | display: block; | ||
124 | position: fixed; | ||
125 | background: $theme-brand-warning; | ||
126 | width: auto; | ||
127 | height: auto; | ||
128 | top: 5px; | ||
129 | right: 5px; | ||
130 | padding: 4px; | ||
131 | font-size: 10px; | ||
132 | color: #FFF; | ||
133 | z-index: 999999999; | ||
134 | border-radius: 3px; | ||
135 | transition: opacity 0.5s ease; | ||
136 | |||
137 | &:hover { | ||
138 | opacity: 0; | ||
139 | } | ||
140 | } | ||
141 | } | ||