<label><input class="hidden" name="category" type="checkbox" value="good"/><span>Продукты и промтовары</span></label>
<label><input class="hidden" name="category" type="checkbox" value="electronics"/><span>Бытовая техника и электроника</span></label>.hidden {
display: none;
}
input + span {
color: #d0d0d0;
}
input:checked + span {
color: #000;
}.lang a {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(1); /* Google Chrome & Safari 6+ */
}
.lang a:hover,
.lang a.active {
-webkit-filter: none;
filter: none;
}module.exports = function(grunt) {
grunt.initConfig({
compass: {
dist: {
options: {
sassDir: 'sass',
cssDir: 'css',
environment: 'production'
}
}
},
watch: {
scss: {
files: ['sass/*.scss'],
tasks: ['compass']
}
}
});
grunt.loadNpmTasks('grunt-contrib-compass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default', ['watch']);
};<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<a href="#"><div></div></a>
</body>
</html>