Revision 0675f9af snf-cyclades-app/synnefo/ui/new_ui/ui/sass/overlay2.scss

b/snf-cyclades-app/synnefo/ui/new_ui/ui/sass/overlay2.scss
1 1
ul.side-actions {
2
	position: absolute;
3
	left: 0;
4
	top: -20px;
2
	float: left;
3
	height: 100%;
4
	width: $side-actions-width;
5 5
	margin: 0;
6
	padding: 0;
7
	z-index: 1;
6
	background: $gray-4;
7
	padding: 10px 0;
8 8
	li {
9 9
		list-style: none outside none;
10 10
		&>a {
11 11
			display: block;
12
			height: 20px;
13
			width: 20px;
12
			color: #fff;
13
			border: 0 none;
14
			padding: 5px;
15
			height: $side-actions-width;
14 16
			line-height: 20px;
15
			border-radius: 50%;
16
			border: 1px solid $inactive-color;
17
			margin-bottom: 5px;
18
			color: $inactive-color;
19 17
			&.details {
20 18
				font-size: emCalc(13px);
21 19
				font-weight: bold;
22
			}	
23
		}
24
		&.more-actions {
25
			&> a {
26
				line-height: 8px;
27 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;
28 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 {
29 44
				display: none;
30
				position: absolute;
31
				border: 1px solid $link-color;
32
				padding: 5px 10px;
33
				text-align: left;
34
				top: 26px;
35
				left: 40px;
36
				margin: 0;
37
				background: white;
38
				a {
39
					border-radius: 0;
40
					border:0  none;
41
					width: auto;
42
					height: auto;
43
					font-size: emCalc(14px);
44
					white-space: nowrap;
45
					color: $link-color;
46

  
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;
47 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;
48 110
				&:after {
49
					content: '';
50
					display: block;
51
					position: absolute;
52
					top: 23px;
53
					left: -20px;
54
					width: 0;
55
					height: 0;
56
					border-color: transparent #fff transparent transparent ;
57
					border-style: solid;
58
					border-width: 10px;
111
					top: 72px;
59 112
				}
60 113
				&:before {
61
					content: '';
62
					display: block;
63
					position: absolute;
64
					top: 22px;
65
					left: -22px;
66
					width: 0;
67
					height: 0;
68
					border-color: transparent $link-color transparent transparent ;
69
					border-style: solid;
70
					border-width: 11px;
71
				}
72
				&.many {
73
					top: 0px;
74
					&:after {
75
						top: 49px;
76
					}
77
					&:before {
78
						top: 48px;
79
					}
114
					top: 71px;
80 115
				}
81 116
			}
82
			&:hover {
83
				ul {
84
					display: block;
117
			&.single {
118
				top: 62px;
119
				&:after {
120
					top: 13px;
121
				}
122
				&:before {
123
					top: 12px;
85 124
				}
86 125
			}
87 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
		}
88 146
	}
89 147
}
90 148

  
91 149
.items-list {
92 150
	li:hover {
93
		ul.side-actions li> a {
94
			color: $link-color;
95
			border-color: $link-color;
96
			&:hover {
97
				color: $link-color-hover;
98
				border-color: $link-color-hover;
99
			}
151
		ul.side-actions {
152
			@include transition(background, 300ms, ease-out);
153
			background: $gray-2;
100 154
		}
101 155
	}
156
}
157

  
158
.list-view {
159
	.side-actions {
160
		display: none;
161
	}
102 162
}

Also available in: Unified diff