rating-form.css — Strong Testimonials 2.33

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

strong-testimonials / public / css Last commit date

rating-form.css

132 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:before {
38	font-family: FontAwesome;
39	content: "\f005";
40	display: inline-block;
41	font-size: 1.25em;
42	line-height: 1;
43	/* use padding not margin */
44	padding: 4px;
45	transition: color 0.3s ease;
46	}
47
48	.strong-rating label:hover {
49	cursor: pointer;
50	}
51
52	/* fieldset tweaks */
53
54	/* in a form */
55	.strong-rating-wrapper.in-form .strong-rating {}
56
57	/* in a view */
58	.strong-rating-wrapper.in-view .strong-rating {
59	margin: 0;
60	padding: 0;
61	}
62
63	/* in the post editor */
64	.strong-rating-wrapper.in-metabox .strong-rating > label:before {
65	font-size: 20px;
66	line-height: 27px;
67	padding: 0 4px;
68	color: #0073aa;
69	}
70
71	/* the magic */
72
73	/* this is how we highlight stars before the checked one (siblings before): */
74
75	/* hide the first label which is initially checked */
76	/* added bonus of POSTing the default value so no need for isset(...) */
77	.strong-rating label[for$="star0"] {
78	display: none !important;
79	}
80
81	/* and turn all on */
82	.strong-rating label:before {
83	color: #FFB900;
84	}
85
86	/* turn off stars after the one we're on */
87	.strong-rating label:hover ~ label:before {
88	content: "\f006";
89	}
90	/* maybe use different color if validation error */
91	.error .strong-rating label:hover ~ label:before {
92	}
93
94	/* turn off stars after the current rating */
95	.strong-rating input:checked ~ label:before {
96	content: "\f006";
97	}
98	/* maybe use different color if validation error */
99	.error .strong-rating input:checked ~ label:before {
100	}
101
102	/* turn on the current rating */
103	.strong-rating input[type="radio"]:checked + label:before,
104	.error .strong-rating input:checked + label:before {
105	content: "\f005";
106	}
107	.strong-rating-wrapper.in-metabox input[type="radio"]:checked + label:before {
108	color: #00b9eb;
109	}
110
111	/* when hovering the entire fieldset: */
112
113	/* (1) turn all on */
114	.strong-rating:hover input ~ label:before,
115	.error .strong-rating:hover input ~ label:before {
116	content: "\f005";
117	}
118
119	/* (2) indicate current selection (optional) */
120	.strong-rating:hover input:checked + label:before,
121	.error .strong-rating:hover input:checked + label:before {
122	color: #FFE39E;
123	}
124
125	/* (3) then turn off siblings after the hovered star */
126	.strong-rating:hover label:hover ~ input:not(:checked) + label:before {
127	content: "\f006";
128	}
129	/* maybe use different color if validation error */
130	.error .strong-rating:hover label:hover ~ input:not(:checked) + label:before {
131	}
132