rating-display.css — Strong Testimonials 2.33

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

strong-testimonials / public / css Last commit date

rating-display.css

147 lines

1	/**
2	* Star Ratings - Display Only
3	*
4	* Pure CSS. No floats or bidi. 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	line-height: 1.7;
15	}
16
17	/* inline-block */
18	.strong-rating-wrapper.average > span {
19	display: inline-block;
20	}
21
22	/* block */
23	.strong-rating-wrapper.average.block > span {
24	display: block;
25	margin: 0;
26	}
27
28	/* centered */
29	.strong-rating-wrapper.average.centered {
30	text-align: center;
31	}
32
33	.strong-rating-title {
34	font-weight: 700;
35	}
36
37	/* the fieldset */
38	.strong-rating {
39	display: inline-block;
40	border: 0;
41	}
42
43	/* the stars */
44
45	.strong-rating span.star {
46	display: inline-block;
47	margin: 0;
48	max-height: none;
49	max-width: none;
50	padding: 0;
51	}
52
53	.strong-rating span.star:before {
54	font-family: FontAwesome;
55	content: "\f005";
56	display: inline-block;
57	font-size: 1.25em;
58	/* use padding not margin */
59	padding: 0 4px;
60	transition: color 0.3s ease;
61	}
62
63	.strong-rating-wrapper:not(.average) span.star:first-child:before {
64	padding-left: 0;
65	}
66
67	.strong-rating-wrapper:not(.average) span.star:last-child:before {
68	padding-right: 0;
69	}
70
71	.strong-rating span.star:hover {
72	cursor: default;
73	}
74
75	/* fieldset tweaks */
76
77	/* in a form */
78	.strong-rating-wrapper.in-form .strong-rating {
79	padding: 0;
80	}
81
82	/* in a view */
83	.strong-rating-wrapper.in-view {
84	display: inline-block;
85	}
86
87	.strong-rating-wrapper.in-view .strong-rating {
88	margin: 0;
89	padding: 0;
90	}
91
92	/* in the post editor */
93	.strong-rating-wrapper.in-metabox {
94	display: inline-block;
95	}
96
97	.strong-rating-wrapper.in-metabox .strong-rating span.star:before {
98	font-size: 20px;
99	line-height: 27px;
100	}
101
102	.strong-rating-wrapper.in-table-list .strong-rating span.star:before {
103	/* use padding not margin */
104	padding: 1px;
105	}
106
107	/* the magic */
108
109	/* this is how we highlight stars before the checked one (siblings before): */
110
111	/* hide the first label because our rating may be zero */
112	.strong-rating span.star0 {
113	display: none;
114	}
115
116	/* and turn all on */
117	.strong-rating span.star:before {
118	color: #FFB900;
119	}
120
121	/* then turn off stars after the current rating */
122	.strong-rating span.current ~ span.star:before {
123	content: "\f006";
124	}
125
126	/* turn on the current rating */
127	.strong-rating span.current:before {
128	color: #FFB900;
129	}
130
131	/* which may be a half star */
132	.strong-rating-wrapper.average .strong-rating span.star.half:before {
133	content: "\f123";
134	}
135
136	/* Responsive
137	--------------------------------------------------*/
138	@media only screen and (max-width: 480px) {
139	.strong-rating-wrapper > span {
140	display: block;
141	line-height: 30px;
142	vertical-align: middle;
143	margin: 0;
144	text-align: center;
145	}
146	}
147