From bddbe5f79f42d526d7d56a7189ca0b65970abe89 Mon Sep 17 00:00:00 2001
From: Alexandre Alapetite <alexandre@alapetite.fr>
Date: Thu, 9 Jan 2014 21:24:48 +0100
Subject: Changements styles filtres
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Utilisation d'une coche plutôt qu'un changement de couleur.
Meilleure accessibilité avec ARIA.
Optimisation des sélecteurs CSS.
En particulier, évite les sélecteurs universels * qui sont très couteux
en performances.
https://github.com/marienfressinaud/FreshRSS/issues/277
https://github.com/marienfressinaud/FreshRSS/pull/357
---
 p/themes/default/global.css      | 20 ++++++++++----------
 p/themes/default_dark/global.css | 18 +++++++++---------
 p/themes/flat-design/global.css  | 21 ++++++++++-----------
 3 files changed, 29 insertions(+), 30 deletions(-)

(limited to 'p')

diff --git a/p/themes/default/global.css b/p/themes/default/global.css
index d3a5cc68c..49f3aa4cd 100644
--- a/p/themes/default/global.css
+++ b/p/themes/default/global.css
@@ -392,28 +392,28 @@ input, select, textarea {
 			font-size: 14px;
 			line-height: 30px;
 		}
-		.dropdown-menu .item {
+		.dropdown-menu > .item {
 			display: block;
 			height: 30px;
 			font-size: 90%;
 			line-height: 30px;
 		}
-		.dropdown-menu .item.selected{
-			background: #0062be;
-		}
-		.dropdown-menu .item.selected a{
-			color: #fff;
-		}
-			.dropdown-menu .item > * {
+			.dropdown-menu > .item > a {
 				display: block;
 				padding: 0 25px;
 				line-height: 30px;
 			}
-			.dropdown-menu .item:hover {
+			.dropdown-menu > .item:hover {
 				background: #0062BE;
 				color: #fff;
 			}
-				.dropdown-menu .item:hover > * {
+				.dropdown-menu > .item[aria-checked="true"] > a:before {
+					content: '✓ ';
+					font-weight: bold;
+					margin: 0 0 0 -1.2em;
+					padding: 0 0.2em 0 0;
+				}
+				.dropdown-menu > .item:hover > a {
 					color: #fff;
 					text-decoration: none;
 				}
diff --git a/p/themes/default_dark/global.css b/p/themes/default_dark/global.css
index a9c83d9de..04eb723f1 100644
--- a/p/themes/default_dark/global.css
+++ b/p/themes/default_dark/global.css
@@ -386,22 +386,22 @@ input, select, textarea {
 			font-size: 90%;
 			line-height: 30px;
 		}
-		.dropdown-menu .item.selected{
-			background: #26303f;
-		}
-		.dropdown-menu .item.selected a{
-			color: #888;
-		}
-			.dropdown-menu .item > * {
+			.dropdown-menu > .item > a {
 				display: block;
 				padding: 0 25px;
 				line-height: 30px;
 			}
-			.dropdown-menu .item:hover {
+			.dropdown-menu > .item:hover {
 				background: #26303F;
 				color: #888;
 			}
-				.dropdown-menu .item:hover > * {
+				.dropdown-menu > .item[aria-checked="true"] > a:before {
+					content: '✓ ';
+					font-weight: bold;
+					margin: 0 0 0 -1.2em;
+					padding: 0 0.2em 0 0;
+				}
+				.dropdown-menu > .item:hover > a {
 					color: #888;
 					text-decoration: none;
 				}
diff --git a/p/themes/flat-design/global.css b/p/themes/flat-design/global.css
index 7686b3662..5fd0a4dcf 100644
--- a/p/themes/flat-design/global.css
+++ b/p/themes/flat-design/global.css
@@ -381,29 +381,28 @@ input, select, textarea {
 			font-size: 14px;
 			line-height: 30px;
 		}
-		.dropdown-menu .item {
+		.dropdown-menu > .item {
 			display: block;
 			height: 30px;
 			font-size: 90%;
 			line-height: 30px;
 		}
-		.dropdown-menu .item.selected{
-			background: #2980b9;
-		}
-		.dropdown-menu .item.selected a{
-			background: #2980b9;
-			color: #fff;
-		}
-			.dropdown-menu .item > * {
+			.dropdown-menu > .item > a {
 				display: block;
 				padding: 0 25px;
 				line-height: 30px;
 			}
-			.dropdown-menu .item:hover {
+			.dropdown-menu > .item:hover > a {
 				background: #2980b9;
 				color: #fff;
 			}
-				.dropdown-menu .item:hover > * {
+				.dropdown-menu > .item[aria-checked="true"] > a:before {
+					content: '✓ ';
+					font-weight: bold;
+					margin: 0 0 0 -1.2em;
+					padding: 0 0.2em 0 0;
+				}
+				.dropdown-menu > .item:hover > a {
 					color: #fff;
 					text-decoration: none;
 				}
-- 
cgit v1.2.3