rating-form.css — Strong Testimonials 3.3.2

strong-testimonials / assets / public / css / rating-form.css

strong-testimonials / assets / public / css Last commit date

rating-form.css

112 lines

1	/**
2	* Star Ratings
3	*
4	* Pure CSS. No floats or bidi. HTML inputs makes it ideal for use in a form. Simple em-based sizing.
5	*
6	* http://codepen.io/cdillon/pen/vXNbBw
7	*
8	* Based on Pure CSS Star Rating Widget by James Barnett
9	* http://codepen.io/jamesbarnett/pen/vlpkh
10	*/
11
12	/* the container */
13	.strong-rating-wrapper {
14	}
15
16	/* the fieldset */
17	.strong-rating {
18	display: inline-block;
19	border: 0;
20	margin: 0;
21	padding: 5px;
22	}
23
24	.strong-rating:focus {
25	outline: 1px solid #CCC;
26	}
27
28	/* the stars */
29	.strong-rating input[type=radio] {
30	display: none !important;
31	}
32
33	.strong-rating label {
34	font-weight: normal;
35	}
36
37	.strong-rating label:hover {
38	cursor: pointer;
39	}
40
41	/* fieldset tweaks */
42
43	.strong-rating-wrapper legend {
44	clip: rect(1px, 1px, 1px, 1px);
45	height: 1px;
46	overflow: hidden;
47	position: absolute !important;
48	width: 1px;
49	word-wrap: normal !important;
50	}
51
52	/* in a form */
53	.strong-rating-wrapper.in-form .strong-rating {}
54
55	/* in a view */
56	.strong-rating-wrapper.in-view .strong-rating {
57	margin: 0;
58	padding: 0;
59	}
60
61	/* the magic */
62
63	/* this is how we highlight stars before the checked one (siblings before): */
64
65	/* hide the first label which is initially checked */
66	/* added bonus of POSTing the default value so no need for isset(...) */
67	.strong-rating label[for$="star0"] {
68	display: none !important;
69	}
70
71
72	/* set the color of the star and its stroke(outline) color and width */
73	.strong-rating-wrapper .star svg path {
74	fill: #FFB900;
75	}
76
77	/* set the width of the star */
78	.strong-rating-wrapper .star svg {
79	width: 20px;
80	}
81
82	/* hide all solid stars that are not checked or perceded by a checked star */
83	.strong-rating input[type="radio"]:checked ~ .star svg .star_solid{
84	display: none;
85	}
86
87	/* show the solid star that is checked */
88	.strong-rating input[type="radio"]:checked + .star svg .star_solid{
89	display: block;
90	}
91
92	/* show all the solid stars when the container is hovered */
93	.strong-rating:hover .star svg .star_solid {
94	display: block !important;
95	}
96
97	/* hide all the solid stars that are not hovered */
98	.strong-rating .star:hover ~ .star svg .star_solid {
99	display: none !important;
100	}
101
102	/* remove the focus outline from element */
103	.strong-rating:focus {
104	outline: none;
105	}
106	/* indicate current selection */
107	.strong-rating:hover input:checked + .star svg path{
108	fill: #FFE39E;
109	}
110
111
112