root / snf-cyclades-app / synnefo / ui / new_ui / ui / sass / _overlay2.scss @ e4a6c3b8
History | View | Annotate | Download (2.5 kB)
1 |
ul.side-actions { |
---|---|
2 |
float: left; |
3 |
height: 100%; |
4 |
width: $side-actions-width; |
5 |
margin: 0; |
6 |
background: $gray-4; |
7 |
padding: 10px 0; |
8 |
li { |
9 |
list-style: none outside none; |
10 |
&>a { |
11 |
display: block; |
12 |
color: #fff; |
13 |
border: 0 none; |
14 |
padding: 5px; |
15 |
height: $side-actions-width; |
16 |
line-height: 20px; |
17 |
&.details { |
18 |
font-size: emCalc(13px); |
19 |
font-weight: bold; |
20 |
} |
21 |
&:hover { |
22 |
background: $secondary-color; |
23 |
color:#fff; |
24 |
} |
25 |
} |
26 |
&.bottom { |
27 |
position: absolute; |
28 |
bottom: 5px; |
29 |
left: 0; |
30 |
width: $side-actions-width; |
31 |
ul { |
32 |
top: auto; |
33 |
bottom:0; |
34 |
&:before { |
35 |
top: auto; |
36 |
bottom: 3px; |
37 |
} |
38 |
&:after { |
39 |
top: auto; |
40 |
bottom: 4px; |
41 |
} |
42 |
} |
43 |
ul.options { |
44 |
display: none; |
45 |
.selected { |
46 |
a { |
47 |
color: $inactive-color; |
48 |
} |
49 |
} |
50 |
} |
51 |
} |
52 |
&.more-actions + a { |
53 |
line-height: 10px; |
54 |
} |
55 |
ul { |
56 |
z-index: 1; |
57 |
display: none; |
58 |
position: absolute; |
59 |
border: 1px solid $link-color; |
60 |
padding: 5px 10px; |
61 |
text-align: left; |
62 |
top: 34px; |
63 |
left: 40px; |
64 |
margin: 0; |
65 |
background: #fff; |
66 |
li { |
67 |
padding: 5px; |
68 |
font-size: emCalc(14px); |
69 |
white-space: nowrap; |
70 |
} |
71 |
a { |
72 |
padding: 0; |
73 |
border-radius: 0; |
74 |
border:0 none; |
75 |
width: auto; |
76 |
height: auto; |
77 |
color: $link-color; |
78 |
&:hover { |
79 |
background: #fff; |
80 |
color: $link-color-hover; |
81 |
} |
82 |
|
83 |
} |
84 |
&:after { |
85 |
content: ''; |
86 |
display: block; |
87 |
position: absolute; |
88 |
top: 41px; |
89 |
left: -20px; |
90 |
width: 0; |
91 |
height: 0; |
92 |
border-color: transparent #fff transparent transparent ; |
93 |
border-style: solid; |
94 |
border-width: 10px; |
95 |
} |
96 |
&:before { |
97 |
content: ''; |
98 |
display: block; |
99 |
position: absolute; |
100 |
top: 40px; |
101 |
left: -22px; |
102 |
width: 0; |
103 |
height: 0; |
104 |
border-color: transparent $link-color transparent transparent ; |
105 |
border-style: solid; |
106 |
border-width: 11px; |
107 |
} |
108 |
&.many { |
109 |
top: 5px; |
110 |
&:after { |
111 |
top: 72px; |
112 |
} |
113 |
&:before { |
114 |
top: 71px; |
115 |
} |
116 |
} |
117 |
&.single { |
118 |
top: 62px; |
119 |
&:after { |
120 |
top: 13px; |
121 |
} |
122 |
&:before { |
123 |
top: 12px; |
124 |
} |
125 |
} |
126 |
} |
127 |
&:hover { |
128 |
ul{ |
129 |
display: block; |
130 |
} |
131 |
} |
132 |
} |
133 |
.arrow-right { |
134 |
display: inline-block; |
135 |
width: 0; |
136 |
height: 0; |
137 |
border-top: 5px solid transparent; |
138 |
border-bottom: 5px solid transparent; |
139 |
border-left: 5px solid $link-color; |
140 |
margin-left:10px; |
141 |
} |
142 |
a:hover { |
143 |
.arrow-right { |
144 |
border-left-color: $link-color-hover; |
145 |
} |
146 |
} |
147 |
} |
148 |
|
149 |
.items-list { |
150 |
li:hover { |
151 |
ul.side-actions { |
152 |
@include transition(background, 300ms, ease-out); |
153 |
background: $gray-2; |
154 |
} |
155 |
} |
156 |
} |
157 |
|
158 |
.list-view { |
159 |
.side-actions { |
160 |
display: none; |
161 |
} |
162 |
} |