ajax-layered-nav.scss 1.24 KB
/**
 * WooCommerce AJAX Layered Nav
 */

/**
 * Imports
 */
@import 'bourbon';
@import '../../../sass/utils/variables';
@import '../../../sass/utils/mixins';

.widget_layered_nav {
	ul.colors {
		li {
			a {
				display: block;
			}

			.box {
				border: 0;
				display: inline-block;
				box-sizing: border-box;
				border-radius: .202em;
				height: 1.618em;
				width: 1.618em;
			}

			&.chosen {
				a {
					opacity: 1;

					&:hover {
						opacity: 0.5;
					}
				}
			}
		}
	}

	ul.checkboxes {
		li {
			input {
				margin-right: .618em;
			}
		}
	}

	ul.sizes {
		li {
			a {
				opacity: 1;
			}

			.size-filter {
				font-size: 1em;
				height: 1.618em;
				min-width: 1.618em;
				text-align: center;
				line-height: 1.618;
				background-color: #fff;
				border: 0;
				opacity: 0.5;
				font-weight: 700;
				border-radius: .202em;

				&:hover {
					opacity: 1;
				}
			}

			&.chosen {
				.size-filter {
					opacity: 1;

					&:hover {
						opacity: 0.5;
					}
				}
			}
		}
	}

	ul.colors,
	ul.checkboxes,
	ul.sizes {
		li {
			&.chosen {
				&:before {
					display: none;
				}
			}

			&.show-count {
				a {
					display: inline-block;
				}

				.count {
					float: right;
					line-height: 1.618;
					font-size: 1em;
				}
			}
		}
	}
}