rating-display.css — Strong Testimonials 3.3.2

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

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

rating-display.css

154 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	/* set the color of the star and its stroke(outline) color and width */
116	.strong-rating-wrapper .star svg path {
117	fill: #FFB900;
118	}
119	/* set the width of the star */
120	.strong-rating-wrapper .star svg {
121	width: 20px;
122	}
123
124	/* then turn off stars after the current rating */
125	.strong-rating span.current ~ span.star:before {
126	content: "";
127	-webkit-mask: url('../svg/star-regular.svg') center center no-repeat;
128	mask: url('../svg/star-regular.svg') center center no-repeat;
129	}
130
131	/* turn on the current rating */
132	.strong-rating span.current:before {
133	color: #FFB900;
134	}
135
136	/* which may be a half star */
137	.strong-rating-wrapper.average .strong-rating span.star.half:before {
138	content: "";
139	-webkit-mask: url('../svg/star-half-alt-solid.svg') center center no-repeat;
140	mask: url('../svg/star-half-alt-solid.svg') center center no-repeat;
141	}
142
143	/* Responsive
144	--------------------------------------------------*/
145	@media only screen and (max-width: 480px) {
146	.strong-rating-wrapper > span {
147	display: block;
148	line-height: 30px;
149	vertical-align: middle;
150	margin: 0;
151	text-align: center;
152	}
153	}
154