sh_helpdesk/static/src/css/feedback.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

form {
	&#smileys {
		input[type="radio"] {
			width: 90px;
			height: 90px;
			border: none;
			cursor: pointer;
			transition: border .2s ease;
			filter: grayscale(100%);
			margin: 0 5px;
			transition: all .2s ease;
			&:focus {
				outline: 0;
			}	
			&:hover, &:checked {
				filter:	grayscale(0);
			}
					
			&.very-sad {
				background: url('/sh_helpdesk/static/src/img/emg1.svg') center;
				background-size: cover;
			}
			&.sad {
				background: url('/sh_helpdesk/static/src/img/emg4.svg') center;
				background-size: cover;
			}
			
			&.neutral {
				background: url('/sh_helpdesk/static/src/img/emg5.svg') center;
				background-size: cover;
			}
			&.happy {
				background: url('/sh_helpdesk/static/src/img/emg3.svg') center;
				background-size: cover;
			}
			&.very-happy {
				background: url('/sh_helpdesk/static/src/img/emg2.svg') center;
				background-size: cover;
			}
		}
	}
}

.mtt {
	position: fixed;
	bottom: 10px;
	right: 20px;
	color: #999;
	text-decoration: none;
	
	span {
		color: #e74c3c;
	}
	
	&:hover {
		color: #666;

		span {
			color: #c0392b;
		}
	}
}
	#smileys input[type="radio"] {
   -webkit-appearance: none;
   -moz-appearance:    none;
   appearance:         none;
   }