forked from thesedays/Facebook-friend-selector
-
Notifications
You must be signed in to change notification settings - Fork 1
/
tdfriendselector.scss
76 lines (66 loc) · 3.67 KB
/
tdfriendselector.scss
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
@mixin borderRadius($radius) {
-moz-border-radius: $radius;
-webkit-border-radius: $radius;
border-radius: $radius;
}
/*!
* TD Friend Selector
* @author Bram Verdyck, Keegan Street
*/
#TDFriendSelector {
$friendWidth: 370px;
/* Common styles */
display: none; width: 100%; padding: 10px 0 0; position: absolute; left: 0; top: 0; z-index: 1000; color: #333; font-family: "lucida grande", tahoma, verdana, arial, sans-serif; font-size: 11px;
a, a:active, a:hover, a:visited { text-decoration: none; color: #3B5998; }
p, ul, li { margin: 0; padding: 0; }
li { list-style-type: none; }
/* Clearfix */
.TDFriendSelector_clearfix:before, .TDFriendSelector_clearfix:after { content: ""; display: table; }
.TDFriendSelector_clearfix:after { clear: both; }
.TDFriendSelector_clearfix { zoom: 1; }
/* The interface */
.TDFriendSelector_dialog {
width: $friendWidth + 22; padding: 10px; margin: 0 auto; position: relative; background: rgba(82, 82, 82, 0.7); @include borderRadius(8px);
#TDFriendSelector_buttonClose {
position: absolute; right: 18px; top: 15px; font-size: 16px;
&, &:active, &:hover, &:visited { color: #FFF; }
}
.TDFriendSelector_form { border: 1px solid #3B5998; }
.TDFriendSelector_header { padding: 7px 10px; background: #6D84B4; color: #FFF; font-size: 14px; font-weight: bold; }
.TDFriendSelector_content { background: #FFF; padding: 10px; }
.TDFriendSelector_searchContainer {
margin-top: 10px; padding: 10px; background: #f1f1f1; border: solid #cacaca; border-width: 1px 0;
.TDFriendSelector_selectedCountContainer { font-weight: bold; float: left; padding: 3px 0; }
#TDFriendSelector_searchField { float: right; }
}
.TDFriendSelector_friendsContainer {
width: $friendWidth; margin: 10px 0 0;
.TDFriendSelector_friend {
display: block; padding: 5px 10px; margin-bottom: 2px; border-bottom: 1px solid #cacaca; cursor: pointer;
.TDFriendSelector_friendAvatar { float: left; height: 50px; width: 50px; }
.TDFriendSelector_friendName { float: left; font-size: 14px; font-weight: bold; padding: 17px 0 17px 20px; position: relative; width: 280px; }
.TDFriendSelector_friendSelect { display: none; position: absolute; right: 0; top: 19px; text-align: right; color: #666; font-size: 10px; font-weight: normal; }
&:hover .TDFriendSelector_friendSelect { display: block; }
/* Selected friends */
&.TDFriendSelector_friendSelected { background: #f0f0f0; }
/* Disabled friends are greyed out */
&.TDFriendSelector_friendDisabled {
cursor: default; opacity: .5; filter: alpha(opacity=50); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
&:hover .TDFriendSelector_friendSelect { display: none; }
}
/* Filtered friends are not shown */
&.TDFriendSelector_friendFiltered { display: none }
}
}
.TDFriendSelector_footer {
padding: 8px 10px; background: #F2F2F2; border-top: 1px solid #CCC;
#TDFriendSelector_pagePrev, #TDFriendSelector_pageNext { float: left; height: 21px; width: 22px; overflow: hidden; text-indent: -999em; background: transparent url(tdfriendselector.png) no-repeat 0 0; }
#TDFriendSelector_pagePrev { background-position: -44px 0; margin-right: 2px; }
#TDFriendSelector_pageNext { margin-right: 6px; }
#TDFriendSelector_pagePrev.TDFriendSelector_disabled { background-position: -66px 0; cursor: default; }
#TDFriendSelector_pageNext.TDFriendSelector_disabled { background-position: -22px 0; cursor: default; }
.TDFriendSelector_pageNumberContainer { float: left; padding: 4px 0 0; }
#TDFriendSelector_buttonOK { float: right; background: #3B5998; color: #FFF; padding: 4px 20px 5px 20px; border: 1px solid; border-color: #D9DFEA #0E1F5B #0E1F5B #D9DFEA; }
}
}
}