Skip to content

Commit cbc2aca

Browse files
mrholekmrholek
committed
feat: add new layouts for email app
1 parent 73bc52b commit cbc2aca

File tree

4 files changed

+226
-4
lines changed

4 files changed

+226
-4
lines changed

‎scss/_apps.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
@import "apps/email/email";

‎scss/apps/email/_email.scss

Lines changed: 215 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,215 @@
1+
.email-app {
2+
display: flex;
3+
flex-direction: row;
4+
background: #fff;
5+
border: 1px solid $border-color;
6+
7+
nav {
8+
flex: 0 0 200px;
9+
padding: $spacer;
10+
border-right: 1px solid $border-color;
11+
12+
.btn-block {
13+
margin-bottom: 15px;
14+
}
15+
16+
.nav {
17+
flex-direction: column;
18+
19+
.nav-item {
20+
position: relative;
21+
22+
.nav-link {
23+
color: $body-color;
24+
border-bottom: 1px solid $border-color;
25+
26+
i {
27+
width: 20px;
28+
margin: 0 10px 0 0;
29+
font-size: 14px;
30+
text-align: center;
31+
}
32+
33+
.badge {
34+
float: right;
35+
margin-top: 4px;
36+
margin-left: 10px;
37+
}
38+
}
39+
}
40+
}
41+
}
42+
43+
main {
44+
min-width: 0;
45+
flex: 1;
46+
padding: $spacer;
47+
}
48+
49+
.inbox {
50+
.toolbar {
51+
padding-bottom: $spacer;
52+
border-bottom: 1px solid $border-color;
53+
}
54+
55+
.messages {
56+
padding: 0;
57+
list-style: none;
58+
}
59+
60+
.message {
61+
position: relative;
62+
padding: $spacer $spacer $spacer (2 * $spacer);
63+
cursor: pointer;
64+
border-bottom: 1px solid $border-color;
65+
66+
&:hover {
67+
background: $gray-100;
68+
}
69+
70+
.actions {
71+
position: absolute;
72+
left: 0;
73+
display: flex;
74+
flex-direction: column;
75+
76+
.action {
77+
width: 2 * $spacer;
78+
margin-bottom: $spacer / 2;
79+
color: $gray-300;
80+
text-align: center;
81+
}
82+
}
83+
84+
a {
85+
color: #000;
86+
&:hover {
87+
text-decoration: none;
88+
}
89+
}
90+
91+
&.unread {
92+
.header, .title {
93+
font-weight: bold;
94+
}
95+
}
96+
97+
.header {
98+
display: flex;
99+
flex-direction: row;
100+
margin-bottom: ($spacer / 2);
101+
// .from { }
102+
103+
.date {
104+
margin-left: auto;
105+
}
106+
}
107+
108+
.title {
109+
margin-bottom: ($spacer / 2);
110+
overflow: hidden;
111+
text-overflow: ellipsis;
112+
white-space: nowrap;
113+
}
114+
115+
.description {
116+
font-size: 12px;
117+
}
118+
}
119+
}
120+
121+
.message {
122+
.toolbar {
123+
padding-bottom: $spacer;
124+
border-bottom: 1px solid $border-color;
125+
}
126+
127+
.details {
128+
.title {
129+
padding: $spacer 0;
130+
font-weight: bold;
131+
}
132+
133+
.header {
134+
display: flex;
135+
padding: $spacer 0;
136+
margin: $spacer 0;
137+
border-top: 1px solid $border-color;
138+
border-bottom: 1px solid $border-color;
139+
140+
.avatar {
141+
width: 40px;
142+
height: 40px;
143+
margin-right: $spacer;
144+
}
145+
146+
.from {
147+
font-size: 12px;
148+
color: $text-muted;
149+
align-self: center;
150+
151+
span {
152+
display: block;
153+
font-weight: bold;
154+
}
155+
}
156+
157+
.date {
158+
margin-left: auto;
159+
}
160+
}
161+
162+
.attachments {
163+
padding: $spacer 0;
164+
margin-bottom: $spacer;
165+
border-top: 3px solid $gray-100;
166+
border-bottom: 3px solid $gray-100;
167+
168+
.attachment {
169+
display: flex;
170+
margin: ($spacer / 2) 0;
171+
font-size: 12px;
172+
align-self: center;
173+
174+
.badge {
175+
margin: 0 ($spacer / 2);
176+
line-height: inherit;
177+
}
178+
179+
.menu {
180+
margin-left: auto;
181+
182+
a {
183+
padding: 0 ($spacer / 2);
184+
font-size: 14px;
185+
color: $border-color;
186+
}
187+
}
188+
}
189+
}
190+
}
191+
}
192+
// .compones { }
193+
}
194+
195+
@include media-breakpoint-down(sm) {
196+
.email-app {
197+
flex-direction: column;
198+
nav {
199+
flex: 0 0 100%;
200+
}
201+
}
202+
}
203+
204+
@include media-breakpoint-down(xs) {
205+
.email-app {
206+
.message {
207+
.header {
208+
flex-flow: row wrap;
209+
.date {
210+
flex: 0 0 100%;
211+
}
212+
}
213+
}
214+
}
215+
}

‎scss/coreui-standalone.scss

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/*!
2-
* CoreUI - Open Source Dashboard UI Kit
2+
* CoreUI Pro - Dashboard UI Kit
33
* @version v2.0.0-beta.2
4-
* @link https://coreui.io
4+
* @link https://coreui.io/pro/
55
* Copyright (c) 2018 creativeLabs Łukasz Holeczek
66
* Licensed under MIT (https://coreui.io/license)
77
*/
@@ -59,5 +59,8 @@
5959
// Utility classes
6060
@import "utilities";
6161

62+
// Apps
63+
@import "apps";
64+
6265
// Right-to-left
6366
@import "rtl";

‎scss/coreui.scss

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/*!
2-
* CoreUI - Open Source Dashboard UI Kit
2+
* CoreUI Pro - Dashboard UI Kit
33
* @version v2.0.0-beta.2
4-
* @link https://coreui.io
4+
* @link https://coreui.io/pro/
55
* Copyright (c) 2018 creativeLabs Łukasz Holeczek
66
* Licensed under MIT (https://coreui.io/license)
77
*/
@@ -58,5 +58,8 @@
5858
// Utility classes
5959
@import "utilities";
6060

61+
// Apps
62+
@import "apps";
63+
6164
// Right-to-left
6265
@import "rtl";

0 commit comments

Comments
 (0)