|
0
|
1 // main: ../style.scss
|
|
|
2 /********************************
|
|
|
3 *********************************
|
|
|
4 Contacts
|
|
|
5 *********************************
|
|
|
6 *********************************/
|
|
|
7
|
|
|
8 .contact-list {
|
|
|
9 position: relative;
|
|
|
10 width: 100%;
|
|
|
11 max-height: 100%;
|
|
|
12 margin: 15px 0;
|
|
|
13
|
|
|
14 tr {
|
|
|
15 border-bottom: 1px solid $theme-border-color;
|
|
|
16 }
|
|
|
17
|
|
|
18 td {
|
|
|
19 vertical-align: middle;
|
|
|
20 font-family: $headings-font-family;
|
|
|
21 letter-spacing: $headings-letter-spacing;
|
|
|
22 color: $headings-color;
|
|
|
23 font-weight: 500;
|
|
|
24 line-height: 1.5;
|
|
|
25 padding: 10px 0;
|
|
|
26
|
|
|
27 a {
|
|
|
28 color: $headings-color;
|
|
|
29 }
|
|
|
30
|
|
|
31 small {
|
|
|
32 font-size: em(13);
|
|
|
33 font-weight: 300;
|
|
|
34 color: $text-muted;
|
|
|
35 a {
|
|
|
36 color: $text-muted;
|
|
|
37 text-decoration: underline;
|
|
|
38 }
|
|
|
39 }
|
|
|
40
|
|
|
41 figure {
|
|
|
42 margin-bottom: 0;
|
|
|
43 }
|
|
|
44 }
|
|
|
45
|
|
|
46 a {
|
|
|
47 color: $body-color;
|
|
|
48 &:hover { color: $color-scheme; }
|
|
|
49 }
|
|
|
50
|
|
|
51 .list-icon {
|
|
|
52 font-size: em(18);
|
|
|
53 color: #666;
|
|
|
54 }
|
|
|
55
|
|
|
56 .unread td {
|
|
|
57 font-weight: 600;
|
|
|
58 }
|
|
|
59
|
|
|
60 label {
|
|
|
61 margin-bottom: 0;
|
|
|
62 }
|
|
|
63 }
|
|
|
64
|
|
|
65 .contact-list-user {
|
|
|
66 position: relative;
|
|
|
67 z-index: 12;
|
|
|
68
|
|
|
69 input[type="checkbox"],
|
|
|
70 figure {
|
|
|
71 cursor: pointer;
|
|
|
72 margin-bottom: 0;
|
|
|
73 padding: 2px;
|
|
|
74 }
|
|
|
75
|
|
|
76 input[type="checkbox"] {
|
|
|
77 position: absolute;
|
|
|
78 margin: 0;
|
|
|
79 opacity: 0;
|
|
|
80 }
|
|
|
81
|
|
|
82 figure {
|
|
|
83 border: 2px solid transparent;
|
|
|
84 display: flex;
|
|
|
85 justify-content: center;
|
|
|
86 align-items: center;
|
|
|
87 border-radius: 100%;
|
|
|
88 }
|
|
|
89
|
|
|
90 input:checked + figure {
|
|
|
91 border-color: $danger;
|
|
|
92 }
|
|
|
93 }
|
|
|
94
|
|
|
95 .contact-list-message {
|
|
|
96 .badge {
|
|
|
97 border-radius: 3px;
|
|
|
98 text-transform: uppercase;
|
|
|
99 font-size: em(11);
|
|
|
100 letter-spacing: em(.5);
|
|
|
101 }
|
|
|
102 }
|
|
|
103
|
|
|
104 .contact-list-badge {
|
|
|
105 text-align: right;
|
|
|
106 }
|
|
|
107
|
|
|
108 // Contact Info
|
|
|
109 .contact-info {
|
|
|
110 position: relative;
|
|
|
111 border: 1px solid rgba($theme-border-color, .5);
|
|
|
112 padding: em(30) em(20);
|
|
|
113 text-align: center;
|
|
|
114
|
|
|
115 header.padded-reverse {
|
|
|
116 position: relative;
|
|
|
117 min-height: 155px;
|
|
|
118 background-color: $color-scheme;
|
|
|
119 background-position: center;
|
|
|
120 background-repeat: no-repeat;
|
|
|
121 background-size: cover;
|
|
|
122
|
|
|
123 figure {
|
|
|
124 position: absolute;
|
|
|
125 bottom: 0;
|
|
|
126 left: 50%;
|
|
|
127 transform: translateX(-50%) translateY(50%);
|
|
|
128 }
|
|
|
129 }
|
|
|
130
|
|
|
131 .social-ratings {
|
|
|
132 margin-top: 40px;
|
|
|
133 border-top: 1px solid $theme-border-color;
|
|
|
134 .col-md-4 {
|
|
|
135 padding: 15px 0;
|
|
|
136 border-left: 1px solid $theme-border-color;
|
|
|
137 &:first-child { border: 0 }
|
|
|
138 }
|
|
|
139 }
|
|
|
140 }
|
|
|
141
|
|
|
142 .contact-info-list-border {
|
|
|
143 margin-top: 20px;
|
|
|
144
|
|
|
145 .widget-body {
|
|
|
146 border: 1px solid $theme-border-color;
|
|
|
147 }
|
|
|
148 }
|
|
|
149
|
|
|
150 .contact-details-tab {
|
|
|
151 border-color: $theme-border-color;
|
|
|
152 left: -1px;
|
|
|
153
|
|
|
154 .nav-item a {
|
|
|
155 padding: 0 50px;
|
|
|
156 line-height: 60px;
|
|
|
157 display: inline-block;
|
|
|
158 text-transform: uppercase;
|
|
|
159 font-family: $headings-font-family;
|
|
|
160 font-weight: 600;
|
|
|
161 color: #bbb;
|
|
|
162
|
|
|
163 &:hover {
|
|
|
164 background: transparent;
|
|
|
165 border-color: $theme-border-color;
|
|
|
166 }
|
|
|
167
|
|
|
168 &.active {
|
|
|
169 background: #fff;
|
|
|
170 border-top-left-radius: .125em;
|
|
|
171 border-top-right-radius: .125em;
|
|
|
172 border-color: $theme-border-color $theme-border-color #fff;
|
|
|
173 }
|
|
|
174 }
|
|
|
175 }
|
|
|
176
|
|
|
177 .contact-details-cell {
|
|
|
178 border: 1px solid $theme-border-color;
|
|
|
179 margin-bottom: 6px;
|
|
|
180 padding: 20px 22px 18px;
|
|
|
181 overflow: hidden;
|
|
|
182 color: #666;
|
|
|
183 display: flex;
|
|
|
184 align-items: center;
|
|
|
185 small {
|
|
|
186 padding-right: 20px;
|
|
|
187 }
|
|
|
188 span {
|
|
|
189 flex: 1;
|
|
|
190 align-self: flex-end;
|
|
|
191 font-size: em(14);
|
|
|
192 margin: 0;
|
|
|
193 text-align: right;
|
|
|
194 }
|
|
|
195 body.rtl & {
|
|
|
196 span {
|
|
|
197 text-align: left;
|
|
|
198 }
|
|
|
199 }
|
|
|
200 }
|
|
|
201
|
|
|
202 .contact-details-textarea p {
|
|
|
203 width: 80%;
|
|
|
204 margin-left: 20%;
|
|
|
205 text-align: left;
|
|
|
206 }
|
|
|
207
|
|
|
208 .contact-list-right {
|
|
|
209 .mail-list-user {
|
|
|
210 width: 100px;
|
|
|
211 }
|
|
|
212
|
|
|
213 @include mobile {
|
|
|
214 .mail-list-user,
|
|
|
215 .mail-list-time {
|
|
|
216 display: none;
|
|
|
217 }
|
|
|
218
|
|
|
219 .mail-list-name {
|
|
|
220 padding-left: 2em;
|
|
|
221 }
|
|
|
222 }
|
|
|
223
|
|
|
224 td {
|
|
|
225 padding: em(10) 0;
|
|
|
226 position: relative;
|
|
|
227 }
|
|
|
228
|
|
|
229 td label {
|
|
|
230 position: absolute;
|
|
|
231 top: 50%;
|
|
|
232 transform: translateY(-50%);
|
|
|
233 }
|
|
|
234
|
|
|
235 tr:first-child td label {
|
|
|
236 top: calc(50% + 5px);
|
|
|
237 }
|
|
|
238
|
|
|
239 .mail-list-name {
|
|
|
240 & > a {
|
|
|
241 font-weight: 700;
|
|
|
242 display: block;
|
|
|
243 }
|
|
|
244
|
|
|
245 .text-muted a {
|
|
|
246 color: #8d9ea7;
|
|
|
247 text-decoration: underline;
|
|
|
248 }
|
|
|
249 }
|
|
|
250 }
|
