rating-display.css — Strong Testimonials 3.3.6

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

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

rating-display.css

164 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	.strong-rating-wrapper legend {
38	clip: rect(1px, 1px, 1px, 1px);
39	height: 1px;
40	overflow: hidden;
41	position: absolute !important;
42	width: 1px;
43	word-wrap: normal !important;
44	}
45
46	/* the fieldset */
47	.strong-rating {
48	display: inline-block;
49	border: 0;
50	}
51
52	/* the stars */
53
54	.strong-rating span.star {
55	display: inline-block;
56	margin: 0;
57	max-height: none;
58	max-width: none;
59	padding: 0;
60	}
61
62	.strong-rating-wrapper:not(.average) span.star:first-child:before {
63	padding-left: 0;
64	}
65
66	.strong-rating-wrapper:not(.average) span.star:last-child:before {
67	padding-right: 0;
68	}
69
70	.strong-rating span.star:hover {
71	cursor: default;
72	}
73
74	/* fieldset tweaks */
75
76	/* in a form */
77	.strong-rating-wrapper.in-form .strong-rating {
78	padding: 0;
79	}
80
81	/* in a view */
82	.strong-rating-wrapper.in-view {
83	display: inline-block;
84	}
85
86	.strong-rating-wrapper.in-view .strong-rating {
87	margin: 0;
88	padding: 0;
89	}
90
91	/* in the post editor */
92	.strong-rating-wrapper.in-metabox {
93	display: inline-block;
94	}
95
96	.strong-rating-wrapper.in-metabox .strong-rating span.star:before {
97	font-size: 20px;
98	line-height: 27px;
99	}
100
101	.strong-rating-wrapper.in-table-list .strong-rating span.star:before {
102	/* use padding not margin */
103	padding: 1px;
104	}
105
106	/* the magic */
107
108	/* this is how we highlight stars before the checked one (siblings before): */
109
110	/* hide the first label because our rating may be zero */
111	.strong-rating span.star0 {
112	display: none;
113	}
114
115	.strong-rating span.star:empty:before {
116	content: "";
117	display: inline-block;
118	width: 20px;
119	height: 20px;
120	background-color: #FFB900;
121	-webkit-mask: url('../svg/star-solid.svg') center center no-repeat;
122	mask: url('../svg/star-solid.svg') center center no-repeat;
123	}
124
125	/* set the color of the star and its stroke(outline) color and width */
126	.strong-rating-wrapper .star svg path {
127	fill: #FFB900;
128	}
129	/* set the width of the star */
130	.strong-rating-wrapper .star svg {
131	width: 20px;
132	}
133
134	/* then turn off stars after the current rating */
135	.strong-rating span.current ~ span.star:before {
136	content: "";
137	-webkit-mask: url('../svg/star-regular.svg') center center no-repeat;
138	mask: url('../svg/star-regular.svg') center center no-repeat;
139	}
140
141	/* turn on the current rating */
142	.strong-rating span.current:before {
143	color: #FFB900;
144	}
145
146	/* which may be a half star */
147	.strong-rating-wrapper.average .strong-rating span.star.half:before {
148	content: "";
149	-webkit-mask: url('../svg/star-half-alt-solid.svg') center center no-repeat;
150	mask: url('../svg/star-half-alt-solid.svg') center center no-repeat;
151	}
152
153	/* Responsive
154	--------------------------------------------------*/
155	@media only screen and (max-width: 480px) {
156	.strong-rating-wrapper > span {
157	display: block;
158	line-height: 30px;
159	vertical-align: middle;
160	margin: 0;
161	text-align: center;
162	}
163	}
164