brands.scss — WooCommerce 10.9.4

woocommerce / assets / css / brands.scss

woocommerce / assets / css Last commit date

brands.scss

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