brands.scss — WooCommerce 11.1.0

woocommerce / assets / css / brands.scss

woocommerce / assets / css Last commit date

brands.scss

188 lines

1	/* Brand description on archives */
2	.tax-product_brand .brand-description {
3	overflow: hidden;
4	zoom: 1;
5	}
6	.tax-product_brand .brand-description img.brand-thumbnail {
7	width: 25%;
8	float: right;
9	}
10	.tax-product_brand .brand-description .text {
11	width: 72%;
12	float: left;
13	}
14
15	/* Brand description widget */
16	.widget_brand_description img {
17	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
18	-moz-box-sizing: border-box; /* Firefox, other Gecko */
19	box-sizing: border-box; /* Opera/IE 8+ */
20	width: 100%;
21	max-width: none;
22	height: auto;
23	margin: 0 0 1em;
24	}
25
26	/* Brand thumbnails widget */
27	ul.brand-thumbnails,
28	:where(.brand-thumbnails-description) {
29	margin-left: 0;
30	margin-bottom: 0;
31	clear: both;
32	list-style: none;
33	}
34
35	ul.brand-thumbnails:before,
36	:where(.brand-thumbnails-description)::before {
37	clear: both;
38	content: "";
39	display: table;
40	}
41
42	ul.brand-thumbnails:after,
43	:where(.brand-thumbnails-description)::after {
44	clear: both;
45	content: "";
46	display: table;
47	}
48
49	ul.brand-thumbnails li {
50	float: left;
51	margin: 0 3.8% 1em 0;
52	padding: 0;
53	position: relative;
54	width: 22.05%; /* 4 columns */
55	}
56
57	ul.brand-thumbnails.fluid-columns li {
58	width: auto;
59	}
60
61	ul.brand-thumbnails:not(.fluid-columns) li.first,
62	:where(.brand-thumbnails-description li.first) {
63	clear: both;
64	}
65
66	ul.brand-thumbnails:not(.fluid-columns) li.last {
67	margin-right: 0;
68	}
69
70	ul.brand-thumbnails.columns-1 li {
71	width: 100%;
72	margin-right: 0;
73	}
74
75	ul.brand-thumbnails.columns-2 li {
76	width: 48%;
77	}
78
79	ul.brand-thumbnails.columns-3 li {
80	width: 30.75%;
81	}
82
83	ul.brand-thumbnails.columns-5 li {
84	width: 16.95%;
85	}
86
87	ul.brand-thumbnails.columns-6 li {
88	width: 13.5%;
89	}
90
91	.brand-thumbnails li img {
92	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
93	-moz-box-sizing: border-box; /* Firefox, other Gecko */
94	box-sizing: border-box; /* Opera/IE 8+ */
95	width: 100%;
96	max-width: none;
97	height: auto;
98	margin: 0;
99	}
100
101	@media screen and (max-width: 768px) {
102	ul.brand-thumbnails:not(.fluid-columns) li {
103	width: 48% !important;
104	}
105
106	ul.brand-thumbnails:not(.fluid-columns) li.first {
107	clear: none;
108	}
109
110	ul.brand-thumbnails:not(.fluid-columns) li.last {
111	margin-right: 3.8%
112	}
113
114	ul.brand-thumbnails:not(.fluid-columns) li:nth-of-type(odd) {
115	clear: both;
116	}
117
118	ul.brand-thumbnails:not(.fluid-columns) li:nth-of-type(even) {
119	margin-right: 0;
120	}
121	}
122
123	/* Brand thumbnails description */
124	:where(.brand-thumbnails-description li) {
125	float: left;
126	margin: 0 2% 1em 0;
127	padding: 0;
128	position: relative;
129	text-align: center;
130	}
131
132	:where(.brand-thumbnails-description li.last),
133	:where(.brand-thumbnails-description.columns-1 li) {
134	margin-right: 0;
135	}
136
137	:where(.brand-thumbnails-description li .term-thumbnail img) {
138	width: 100%;
139	display: inline;
140	}
141
142	:where(.brand-thumbnails-description li .term-description) {
143	margin-top: 1em;
144	text-align: left;
145	}
146
147	/* A-Z Shortcode */
148	#brands_a_z h3:target {
149	text-decoration: underline;
150	}
151	ul.brands_index {
152	list-style: none outside;
153	overflow: hidden;
154	zoom: 1;
155	}
156	ul.brands_index li {
157	float: left;
158	margin: 0 2px 2px 0;
159	}
160	ul.brands_index li a, ul.brands_index li span {
161	border: 1px solid #ccc;
162	padding: 6px;
163	line-height: 1em;
164	float: left;
165	text-decoration: none;
166	}
167	ul.brands_index li span {
168	border-color: #eee;
169	color: #ddd;
170	}
171	ul.brands_index li a:hover {
172	border-width: 2px;
173	padding: 5px;
174	text-decoration: none;
175	}
176	ul.brands_index li a.active {
177	border-width: 2px;
178	padding: 5px;
179	}
180	div#brands_a_z a.top {
181	border: 1px solid #ccc;
182	padding: 4px;
183	line-height: 1em;
184	float: right;
185	text-decoration: none;
186	font-size: 0.8em;
187	}
188