Gestion de la coloration des svg sur le pattern 'resource@ffffff.svg' dans les fichiers CSS

css/header.scss

@@ -88,7 +88,7 @@
 				width: $header-height;
 				height: $header-height;
 
-			background: url('/src/static/header/expand.svg@000000') center center no-repeat;
+			background: url('/src/static/header/expand@000000.svg') center center no-repeat;
 			background-size: 1em 1em;
 
 			cursor: pointer;

css/header/expanded.css.map

@@ -6,7 +6,7 @@
 		"../constants.scss"
 	],
 	"sourcesContent": [
-		"@import 'constants';\n\n\n#WRAPPER > #HEADER{\n\n\t/* [1] Barre de recherche\n\t=========================================================*/\n\t& > #searchbar{\n\t\tdisplay: inline-block;\n\t\tposition: absolute;\n\t\t\ttop: .8em;\n\t\t\tleft: 1em;\n\t\t\twidth: 20em;\n\t\t\theight: 2em;\n\n\t\tpadding: .2em 1em;\n\n\t\tborder: 0;\n\t\tborder-radius: 3px;\n\n\t\tbackground-color: $theme-bg;\n\n\t}\n\n\t/* [2] Informations utilisateur\n\t=========================================================*/\n\t/* (0) Conteneur */\n\t& > #user-data{\n\t\tdisplay: inline-block;\n\t\tposition: absolute;\n\t\t\ttop: 0;\n\t\t\tright: 0;\n\t\t\theight: calc( 100% - 2*1em );\n\n\n\t\t/* (1) Username de l'utilisateur */\n\t\t& > #user-name{\n\t\t\tdisplay: block;\n\t\t\tposition: absolute;\n\t\t\t\ttop: 0;\n\t\t\t\tright: calc( #{$header-height}*2 - 1em );\n\t\t\t\theight: $header-height;\n\n\t\t\tpadding: 0 1em;\n\n\t\t\tcolor: #555;\n\t\t\tline-height: $header-height;\n\t\t\twhite-space: nowrap;\n\t\t\tfont-weight: bold;\n\n\t\t\tcursor: pointer;\n\n\t\t}\n\n\n\t\t/* (2) Image du profil */\n\t\t& > #user-picture{\n\t\t\tdisplay: block;\n\t\t\tposition: absolute;\n\t\t\t\ttop: 1em;\n\t\t\t\tright: $header-height;\n\t\t\t\twidth: calc( #{$header-height} - 2*1em );\n\t\t\t\theight: calc( #{$header-height} - 2*1em );\n\n\n\t\t\tborder-radius: 50% / 50%;\n\n\t\t\tbackground: $theme-bg url('/src/static/header/nopic.svg') center center no-repeat;\n\t\t\tbackground-size: auto 80%;\n\n\t\t\t// Si on est connecte\n\t\t\t&.active{ background-image: url('/src/dynamic/profile/sample.svg'); background-size: auto 100%; }\n\n\t\t\tcursor: default;\n\n\t\t\talign-self: center;\n\t\t}\n\n\n\n\t\t/* (3) Icone d'activation */\n\t\t&:before{\n\t\t\tcontent: '';\n\t\t\tdisplay: block;\n\t\t\tposition: absolute;\n\t\t\t\ttop: 0;\n\t\t\t\tright: 0;\n\t\t\t\twidth: $header-height;\n\t\t\t\theight: $header-height;\n\n\t\t\tbackground: url('/src/static/header/expand.svg@000000') center center no-repeat;\n\t\t\tbackground-size: 1em 1em;\n\n\t\t\tcursor: pointer;\n\n\t\t}\n\n\n\t}\n\n\n\n\t/* [3] Menu deroulant pour l'administration du profil\n\t=========================================================*/\n\t& > .user-panel{\n\t\tdisplay: block;\n\t\tposition: absolute;\n\t\t\ttop: calc( #{$header-height} - 1em );\n\t\t\tright: 0;\n\n\t\tmargin: .5em;\n\n\t\tborder-radius: 5px;\n\t\tborder: 1px solid darken($theme-bg, 10);\n\n\t\tbackground-color: #fff;\n\n\t\t@include transition( left .3s ease-in-out );\n\n\n\t\t/* (1) Pour chaque element du menu */\n\t\t& > span{\n\t\t\tdisplay: block;\n\t\t\tposition: relative;\n\n\t\t\t// On ajoute une ligne en dessous sauf pour le dernier\n\t\t\t&:not(:last-child){\n\t\t\t\tborder-bottom: 1px solid #ddd;\n\t\t\t}\n\n\t\t\tcolor: #000;\n\t\t\tpadding: .5em 1em;\n\t\t\tpadding-left: 2em;\n\n\t\t\tcursor: pointer;\n\n\t\t\t// @hover\n\t\t\t&:hover{\n\t\t\t\tbackground-color: #eee;\n\t\t\t}\n\t\t}\n\n\n\n\n\t}\n\n\t/* (3) Gestion de l'activation ou non de l'user panel */\n\t& > #toggle-user-panel{ display: none; }\n\t& > #toggle-user-panel + .user-panel{ left: 100%; }\n\t& > #toggle-user-panel:checked + .user-panel{ left: auto; }\n\t& > #toggle-user-panel:checked + .user-panel:before{ left: 7em; }\n\n\n\n\n\n\n}\n",
+		"@import 'constants';\n\n\n#WRAPPER > #HEADER{\n\n\t/* [1] Barre de recherche\n\t=========================================================*/\n\t& > #searchbar{\n\t\tdisplay: inline-block;\n\t\tposition: absolute;\n\t\t\ttop: .8em;\n\t\t\tleft: 1em;\n\t\t\twidth: 20em;\n\t\t\theight: 2em;\n\n\t\tpadding: .2em 1em;\n\n\t\tborder: 0;\n\t\tborder-radius: 3px;\n\n\t\tbackground-color: $theme-bg;\n\n\t}\n\n\t/* [2] Informations utilisateur\n\t=========================================================*/\n\t/* (0) Conteneur */\n\t& > #user-data{\n\t\tdisplay: inline-block;\n\t\tposition: absolute;\n\t\t\ttop: 0;\n\t\t\tright: 0;\n\t\t\theight: calc( 100% - 2*1em );\n\n\n\t\t/* (1) Username de l'utilisateur */\n\t\t& > #user-name{\n\t\t\tdisplay: block;\n\t\t\tposition: absolute;\n\t\t\t\ttop: 0;\n\t\t\t\tright: calc( #{$header-height}*2 - 1em );\n\t\t\t\theight: $header-height;\n\n\t\t\tpadding: 0 1em;\n\n\t\t\tcolor: #555;\n\t\t\tline-height: $header-height;\n\t\t\twhite-space: nowrap;\n\t\t\tfont-weight: bold;\n\n\t\t\tcursor: pointer;\n\n\t\t}\n\n\n\t\t/* (2) Image du profil */\n\t\t& > #user-picture{\n\t\t\tdisplay: block;\n\t\t\tposition: absolute;\n\t\t\t\ttop: 1em;\n\t\t\t\tright: $header-height;\n\t\t\t\twidth: calc( #{$header-height} - 2*1em );\n\t\t\t\theight: calc( #{$header-height} - 2*1em );\n\n\n\t\t\tborder-radius: 50% / 50%;\n\n\t\t\tbackground: $theme-bg url('/src/static/header/nopic.svg') center center no-repeat;\n\t\t\tbackground-size: auto 80%;\n\n\t\t\t// Si on est connecte\n\t\t\t&.active{ background-image: url('/src/dynamic/profile/sample.svg'); background-size: auto 100%; }\n\n\t\t\tcursor: default;\n\n\t\t\talign-self: center;\n\t\t}\n\n\n\n\t\t/* (3) Icone d'activation */\n\t\t&:before{\n\t\t\tcontent: '';\n\t\t\tdisplay: block;\n\t\t\tposition: absolute;\n\t\t\t\ttop: 0;\n\t\t\t\tright: 0;\n\t\t\t\twidth: $header-height;\n\t\t\t\theight: $header-height;\n\n\t\t\tbackground: url('/src/static/header/expand@000000.svg') center center no-repeat;\n\t\t\tbackground-size: 1em 1em;\n\n\t\t\tcursor: pointer;\n\n\t\t}\n\n\n\t}\n\n\n\n\t/* [3] Menu deroulant pour l'administration du profil\n\t=========================================================*/\n\t& > .user-panel{\n\t\tdisplay: block;\n\t\tposition: absolute;\n\t\t\ttop: calc( #{$header-height} - 1em );\n\t\t\tright: 0;\n\n\t\tmargin: .5em;\n\n\t\tborder-radius: 5px;\n\t\tborder: 1px solid darken($theme-bg, 10);\n\n\t\tbackground-color: #fff;\n\n\t\t@include transition( left .3s ease-in-out );\n\n\n\t\t/* (1) Pour chaque element du menu */\n\t\t& > span{\n\t\t\tdisplay: block;\n\t\t\tposition: relative;\n\n\t\t\t// On ajoute une ligne en dessous sauf pour le dernier\n\t\t\t&:not(:last-child){\n\t\t\t\tborder-bottom: 1px solid #ddd;\n\t\t\t}\n\n\t\t\tcolor: #000;\n\t\t\tpadding: .5em 1em;\n\t\t\tpadding-left: 2em;\n\n\t\t\tcursor: pointer;\n\n\t\t\t// @hover\n\t\t\t&:hover{\n\t\t\t\tbackground-color: #eee;\n\t\t\t}\n\t\t}\n\n\n\n\n\t}\n\n\t/* (3) Gestion de l'activation ou non de l'user panel */\n\t& > #toggle-user-panel{ display: none; }\n\t& > #toggle-user-panel + .user-panel{ left: 100%; }\n\t& > #toggle-user-panel:checked + .user-panel{ left: auto; }\n\t& > #toggle-user-panel:checked + .user-panel:before{ left: 7em; }\n\n\n\n\n\n\n}\n",
 		"/* [1] COULEURS\n=========================================================*/\n/* (1) COULEURS DU THEME $DEFAULT */\n$theme-bg:         #e8e8e8;\n$theme-bg-primary: #ffffff;\n$theme-fg:         #515151;\n$theme-fg-primary: #399ced;\n\n/* (2) COULEURS DE THEME $DARK */\n$dark-bg:         #313541;\n$dark-bg-primary: #29282e;\n$dark-fg:         #939393;\n$dark-fg-primary: #ffffff;\n\n$header-dark:     #F8F8FA;\n\n/* (3) Couleurs du theme pour la timeline */\n$timeline-color: #738394;\n$timeline-0: #399ced;\n$timeline-1: #e64e3e;\n$timeline-2: #10baa3;\n$timeline-3: #b14be7;\n$timeline-4: #053b5d;\n\n\n/* [2] DIMENSIONS\n=========================================================*/\n/* (1) Layout de base */\n$menu-side-width: 15em;\n$header-height:   4em;\n\n\n\n/* [3] Mixins\n=========================================================*/\n@mixin transform($value...) {\n\ttransform: $value;\n\t-moz-transform: $value;\n\t-o-transform: $value;\n\t-ms-transform: $value;\n\t-webkit-transform: $value;\n}\n\n\n@mixin transition($value...) {\n\t-webkit-transition: $value;\n\ttransition: $value;\n}\n\n/* [4] Functions\n=========================================================*/\n// Transforme une couleur hex en string sans le #\n@function color-str($color){\n\t@return str-slice(#{$color}, 2, str-length(#{$color}));\n}\n"
 	],
 	"mappings": "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",

css/header/min.css.map

@@ -6,7 +6,7 @@
 		"../constants.scss"
 	],
 	"sourcesContent": [
-		"@import 'constants';\n\n\n#WRAPPER > #HEADER{\n\n\t/* [1] Barre de recherche\n\t=========================================================*/\n\t& > #searchbar{\n\t\tdisplay: inline-block;\n\t\tposition: absolute;\n\t\t\ttop: .8em;\n\t\t\tleft: 1em;\n\t\t\twidth: 20em;\n\t\t\theight: 2em;\n\n\t\tpadding: .2em 1em;\n\n\t\tborder: 0;\n\t\tborder-radius: 3px;\n\n\t\tbackground-color: $theme-bg;\n\n\t}\n\n\t/* [2] Informations utilisateur\n\t=========================================================*/\n\t/* (0) Conteneur */\n\t& > #user-data{\n\t\tdisplay: inline-block;\n\t\tposition: absolute;\n\t\t\ttop: 0;\n\t\t\tright: 0;\n\t\t\theight: calc( 100% - 2*1em );\n\n\n\t\t/* (1) Username de l'utilisateur */\n\t\t& > #user-name{\n\t\t\tdisplay: block;\n\t\t\tposition: absolute;\n\t\t\t\ttop: 0;\n\t\t\t\tright: calc( #{$header-height}*2 - 1em );\n\t\t\t\theight: $header-height;\n\n\t\t\tpadding: 0 1em;\n\n\t\t\tcolor: #555;\n\t\t\tline-height: $header-height;\n\t\t\twhite-space: nowrap;\n\t\t\tfont-weight: bold;\n\n\t\t\tcursor: pointer;\n\n\t\t}\n\n\n\t\t/* (2) Image du profil */\n\t\t& > #user-picture{\n\t\t\tdisplay: block;\n\t\t\tposition: absolute;\n\t\t\t\ttop: 1em;\n\t\t\t\tright: $header-height;\n\t\t\t\twidth: calc( #{$header-height} - 2*1em );\n\t\t\t\theight: calc( #{$header-height} - 2*1em );\n\n\n\t\t\tborder-radius: 50% / 50%;\n\n\t\t\tbackground: $theme-bg url('/src/static/header/nopic.svg') center center no-repeat;\n\t\t\tbackground-size: auto 80%;\n\n\t\t\t// Si on est connecte\n\t\t\t&.active{ background-image: url('/src/dynamic/profile/sample.svg'); background-size: auto 100%; }\n\n\t\t\tcursor: default;\n\n\t\t\talign-self: center;\n\t\t}\n\n\n\n\t\t/* (3) Icone d'activation */\n\t\t&:before{\n\t\t\tcontent: '';\n\t\t\tdisplay: block;\n\t\t\tposition: absolute;\n\t\t\t\ttop: 0;\n\t\t\t\tright: 0;\n\t\t\t\twidth: $header-height;\n\t\t\t\theight: $header-height;\n\n\t\t\tbackground: url('/src/static/header/expand.svg@000000') center center no-repeat;\n\t\t\tbackground-size: 1em 1em;\n\n\t\t\tcursor: pointer;\n\n\t\t}\n\n\n\t}\n\n\n\n\t/* [3] Menu deroulant pour l'administration du profil\n\t=========================================================*/\n\t& > .user-panel{\n\t\tdisplay: block;\n\t\tposition: absolute;\n\t\t\ttop: calc( #{$header-height} - 1em );\n\t\t\tright: 0;\n\n\t\tmargin: .5em;\n\n\t\tborder-radius: 5px;\n\t\tborder: 1px solid darken($theme-bg, 10);\n\n\t\tbackground-color: #fff;\n\n\t\t@include transition( left .3s ease-in-out );\n\n\n\t\t/* (1) Pour chaque element du menu */\n\t\t& > span{\n\t\t\tdisplay: block;\n\t\t\tposition: relative;\n\n\t\t\t// On ajoute une ligne en dessous sauf pour le dernier\n\t\t\t&:not(:last-child){\n\t\t\t\tborder-bottom: 1px solid #ddd;\n\t\t\t}\n\n\t\t\tcolor: #000;\n\t\t\tpadding: .5em 1em;\n\t\t\tpadding-left: 2em;\n\n\t\t\tcursor: pointer;\n\n\t\t\t// @hover\n\t\t\t&:hover{\n\t\t\t\tbackground-color: #eee;\n\t\t\t}\n\t\t}\n\n\n\n\n\t}\n\n\t/* (3) Gestion de l'activation ou non de l'user panel */\n\t& > #toggle-user-panel{ display: none; }\n\t& > #toggle-user-panel + .user-panel{ left: 100%; }\n\t& > #toggle-user-panel:checked + .user-panel{ left: auto; }\n\t& > #toggle-user-panel:checked + .user-panel:before{ left: 7em; }\n\n\n\n\n\n\n}\n",
+		"@import 'constants';\n\n\n#WRAPPER > #HEADER{\n\n\t/* [1] Barre de recherche\n\t=========================================================*/\n\t& > #searchbar{\n\t\tdisplay: inline-block;\n\t\tposition: absolute;\n\t\t\ttop: .8em;\n\t\t\tleft: 1em;\n\t\t\twidth: 20em;\n\t\t\theight: 2em;\n\n\t\tpadding: .2em 1em;\n\n\t\tborder: 0;\n\t\tborder-radius: 3px;\n\n\t\tbackground-color: $theme-bg;\n\n\t}\n\n\t/* [2] Informations utilisateur\n\t=========================================================*/\n\t/* (0) Conteneur */\n\t& > #user-data{\n\t\tdisplay: inline-block;\n\t\tposition: absolute;\n\t\t\ttop: 0;\n\t\t\tright: 0;\n\t\t\theight: calc( 100% - 2*1em );\n\n\n\t\t/* (1) Username de l'utilisateur */\n\t\t& > #user-name{\n\t\t\tdisplay: block;\n\t\t\tposition: absolute;\n\t\t\t\ttop: 0;\n\t\t\t\tright: calc( #{$header-height}*2 - 1em );\n\t\t\t\theight: $header-height;\n\n\t\t\tpadding: 0 1em;\n\n\t\t\tcolor: #555;\n\t\t\tline-height: $header-height;\n\t\t\twhite-space: nowrap;\n\t\t\tfont-weight: bold;\n\n\t\t\tcursor: pointer;\n\n\t\t}\n\n\n\t\t/* (2) Image du profil */\n\t\t& > #user-picture{\n\t\t\tdisplay: block;\n\t\t\tposition: absolute;\n\t\t\t\ttop: 1em;\n\t\t\t\tright: $header-height;\n\t\t\t\twidth: calc( #{$header-height} - 2*1em );\n\t\t\t\theight: calc( #{$header-height} - 2*1em );\n\n\n\t\t\tborder-radius: 50% / 50%;\n\n\t\t\tbackground: $theme-bg url('/src/static/header/nopic.svg') center center no-repeat;\n\t\t\tbackground-size: auto 80%;\n\n\t\t\t// Si on est connecte\n\t\t\t&.active{ background-image: url('/src/dynamic/profile/sample.svg'); background-size: auto 100%; }\n\n\t\t\tcursor: default;\n\n\t\t\talign-self: center;\n\t\t}\n\n\n\n\t\t/* (3) Icone d'activation */\n\t\t&:before{\n\t\t\tcontent: '';\n\t\t\tdisplay: block;\n\t\t\tposition: absolute;\n\t\t\t\ttop: 0;\n\t\t\t\tright: 0;\n\t\t\t\twidth: $header-height;\n\t\t\t\theight: $header-height;\n\n\t\t\tbackground: url('/src/static/header/expand@000000.svg') center center no-repeat;\n\t\t\tbackground-size: 1em 1em;\n\n\t\t\tcursor: pointer;\n\n\t\t}\n\n\n\t}\n\n\n\n\t/* [3] Menu deroulant pour l'administration du profil\n\t=========================================================*/\n\t& > .user-panel{\n\t\tdisplay: block;\n\t\tposition: absolute;\n\t\t\ttop: calc( #{$header-height} - 1em );\n\t\t\tright: 0;\n\n\t\tmargin: .5em;\n\n\t\tborder-radius: 5px;\n\t\tborder: 1px solid darken($theme-bg, 10);\n\n\t\tbackground-color: #fff;\n\n\t\t@include transition( left .3s ease-in-out );\n\n\n\t\t/* (1) Pour chaque element du menu */\n\t\t& > span{\n\t\t\tdisplay: block;\n\t\t\tposition: relative;\n\n\t\t\t// On ajoute une ligne en dessous sauf pour le dernier\n\t\t\t&:not(:last-child){\n\t\t\t\tborder-bottom: 1px solid #ddd;\n\t\t\t}\n\n\t\t\tcolor: #000;\n\t\t\tpadding: .5em 1em;\n\t\t\tpadding-left: 2em;\n\n\t\t\tcursor: pointer;\n\n\t\t\t// @hover\n\t\t\t&:hover{\n\t\t\t\tbackground-color: #eee;\n\t\t\t}\n\t\t}\n\n\n\n\n\t}\n\n\t/* (3) Gestion de l'activation ou non de l'user panel */\n\t& > #toggle-user-panel{ display: none; }\n\t& > #toggle-user-panel + .user-panel{ left: 100%; }\n\t& > #toggle-user-panel:checked + .user-panel{ left: auto; }\n\t& > #toggle-user-panel:checked + .user-panel:before{ left: 7em; }\n\n\n\n\n\n\n}\n",
 		"/* [1] COULEURS\n=========================================================*/\n/* (1) COULEURS DU THEME $DEFAULT */\n$theme-bg:         #e8e8e8;\n$theme-bg-primary: #ffffff;\n$theme-fg:         #515151;\n$theme-fg-primary: #399ced;\n\n/* (2) COULEURS DE THEME $DARK */\n$dark-bg:         #313541;\n$dark-bg-primary: #29282e;\n$dark-fg:         #939393;\n$dark-fg-primary: #ffffff;\n\n$header-dark:     #F8F8FA;\n\n/* (3) Couleurs du theme pour la timeline */\n$timeline-color: #738394;\n$timeline-0: #399ced;\n$timeline-1: #e64e3e;\n$timeline-2: #10baa3;\n$timeline-3: #b14be7;\n$timeline-4: #053b5d;\n\n\n/* [2] DIMENSIONS\n=========================================================*/\n/* (1) Layout de base */\n$menu-side-width: 15em;\n$header-height:   4em;\n\n\n\n/* [3] Mixins\n=========================================================*/\n@mixin transform($value...) {\n\ttransform: $value;\n\t-moz-transform: $value;\n\t-o-transform: $value;\n\t-ms-transform: $value;\n\t-webkit-transform: $value;\n}\n\n\n@mixin transition($value...) {\n\t-webkit-transition: $value;\n\ttransition: $value;\n}\n\n/* [4] Functions\n=========================================================*/\n// Transforme une couleur hex en string sans le #\n@function color-str($color){\n\t@return str-slice(#{$color}, 2, str-length(#{$color}));\n}\n"
 	],
 	"mappings": "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",

css/layout.scss

@@ -239,7 +239,7 @@ body{
 			min-width: 2em;
 			height: 2em;
 
-		background: url('/src/static/container/back.svg@555555') right center no-repeat;
+		background: url('/src/static/container/back@555555.svg') right center no-repeat;
 		background-size: 1em;
 
 		color: #555;

css/menu-side.scss

@@ -14,7 +14,7 @@
 
 		border-bottom: 1px solid transparent;
 
-		background: url('/src/static/menu-side/sub.svg@aaaaaa') right 1.5em center no-repeat;
+		background: url('/src/static/menu-side/sub@aaaaaa.svg') right 1.5em center no-repeat;
 		background-size: .5em .5em;
 
 
@@ -40,7 +40,7 @@
 
 		/* (2) Animation de @hover */
 		&:not(.active):hover{
-			background-image: url('/src/static/menu-side/sub.svg@000000');
+			background-image: url('/src/static/menu-side/sub@000000.svg');
 			color: #000;
 
 			& > svg, & > svg *{
@@ -54,7 +54,7 @@
 			// box-shadow: inset 0 0 1em darken($dark-bg-primary, 1);
 
 			background-color: $theme-fg-primary;
-			background-image: url('/src/static/menu-side/sub-active.svg@ffffff');
+			background-image: url('/src/static/menu-side/sub-active@ffffff.svg');
 			color: $dark-fg-primary;
 
 			& > svg, & > svg *{
@@ -78,7 +78,7 @@
 		padding: .5em 1.5em;
 		padding-left: 2.5em;
 
-		background: #eee url('/src/static/menu-side/sub.svg@777777') 1.5em center no-repeat;;
+		background: #eee url('/src/static/menu-side/sub@777777.svg') 1.5em center no-repeat;;
 		background-size: .5em;
 
 		color: #777777;
@@ -92,7 +92,7 @@
 		&:hover,
 		&.active{
 			color: #000;
-			background-image: url('/src/static/menu-side/sub.svg@000000');
+			background-image: url('/src/static/menu-side/sub@000000.svg');
 		}
 	}
 

css/menu-side/expanded.css.map

@@ -6,7 +6,7 @@
 		"../constants.scss"
 	],
 	"sourcesContent": [
-		"@import 'constants';\n\n#WRAPPER > #MENU-SIDE{\n\n\t/* [1] Elements du menu\n\t=========================================================*/\n\t& > span{\n\t\tdisplay: block;\n\t\tposition: relative;\n\t\t\twidth: calc( 100% - 2*1em - 2*1.5em );\n\n\t\tpadding: .8em 1.5em;\n\t\tpadding-left: calc( 1.5em + 2*1em );\n\n\t\tborder-bottom: 1px solid transparent;\n\n\t\tbackground: url('/src/static/menu-side/sub.svg@aaaaaa') right 1.5em center no-repeat;\n\t\tbackground-size: .5em .5em;\n\n\n\t\tcolor: #666;\n\t\tfont-size: .85em;\n\n\t\t@include transition( color .2s ease-in-out, background .2s ease-in-out, box-shadow .2s ease-in-out, border .2s ease-in-out );\n\n\t\tcursor: pointer;\n\n\t\t/* (1) Icone svg */\n\t\t& > svg, & > svg *{\n\t\t\tposition: absolute;\n\t\t\t\ttop: calc( 50% - 1em/2 );\n\t\t\t\tleft: 1.5em;\n\t\t\t\twidth: 1em;\n\t\t\t\theight: 1em;\n\n\t\t\tfill: $dark-fg !important;\n\t\t\t@include transition( fill .2s ease-in-out );\n\t\t}\n\n\n\t\t/* (2) Animation de @hover */\n\t\t&:not(.active):hover{\n\t\t\tbackground-image: url('/src/static/menu-side/sub.svg@000000');\n\t\t\tcolor: #000;\n\n\t\t\t& > svg, & > svg *{\n\t\t\t\tfill: #000 !important;\n\t\t\t}\n\t\t}\n\n\t\t/* (3) Animation quand .active */\n\t\t&.active{\n\t\t\tborder-bottom-color: darken($theme-fg-primary, 5);\n\t\t\t// box-shadow: inset 0 0 1em darken($dark-bg-primary, 1);\n\n\t\t\tbackground-color: $theme-fg-primary;\n\t\t\tbackground-image: url('/src/static/menu-side/sub-active.svg@ffffff');\n\t\t\tcolor: $dark-fg-primary;\n\n\t\t\t& > svg, & > svg *{\n\t\t\t\tfill: #fff !important;\n\t\t\t}\n\t\t}\n\n\n\t}\n\n\n\n\t/* [2] Gestion du menu deroulant\n\t=========================================================*/\n\t/* (1) Quand le menu est deroule */\n\t& > span:not(.icon) + div.sub>span{\n\t\tdisplay: block;\n\t\tposition: relative;\n\t\t\twidth: calc( 100% - 1.5em - 2.5em );\n\n\t\tpadding: .5em 1.5em;\n\t\tpadding-left: 2.5em;\n\n\t\tbackground: #eee url('/src/static/menu-side/sub.svg@777777') 1.5em center no-repeat;;\n\t\tbackground-size: .5em;\n\n\t\tcolor: #777777;\n\t\tfont-size: .85em;\n\n\t\tcursor: pointer;\n\n\t\t@include transition( color .2s ease-in-out );\n\n\t\t// Animation de @hover ou .active\n\t\t&:hover,\n\t\t&.active{\n\t\t\tcolor: #000;\n\t\t\tbackground-image: url('/src/static/menu-side/sub.svg@000000');\n\t\t}\n\t}\n\n\n\t& > span:not(.icon):not(.active) + div.sub>span{\n\t\tdisplay: none;\n\t}\n}\n",
+		"@import 'constants';\n\n#WRAPPER > #MENU-SIDE{\n\n\t/* [1] Elements du menu\n\t=========================================================*/\n\t& > span{\n\t\tdisplay: block;\n\t\tposition: relative;\n\t\t\twidth: calc( 100% - 2*1em - 2*1.5em );\n\n\t\tpadding: .8em 1.5em;\n\t\tpadding-left: calc( 1.5em + 2*1em );\n\n\t\tborder-bottom: 1px solid transparent;\n\n\t\tbackground: url('/src/static/menu-side/sub@aaaaaa.svg') right 1.5em center no-repeat;\n\t\tbackground-size: .5em .5em;\n\n\n\t\tcolor: #666;\n\t\tfont-size: .85em;\n\n\t\t@include transition( color .2s ease-in-out, background .2s ease-in-out, box-shadow .2s ease-in-out, border .2s ease-in-out );\n\n\t\tcursor: pointer;\n\n\t\t/* (1) Icone svg */\n\t\t& > svg, & > svg *{\n\t\t\tposition: absolute;\n\t\t\t\ttop: calc( 50% - 1em/2 );\n\t\t\t\tleft: 1.5em;\n\t\t\t\twidth: 1em;\n\t\t\t\theight: 1em;\n\n\t\t\tfill: $dark-fg !important;\n\t\t\t@include transition( fill .2s ease-in-out );\n\t\t}\n\n\n\t\t/* (2) Animation de @hover */\n\t\t&:not(.active):hover{\n\t\t\tbackground-image: url('/src/static/menu-side/sub@000000.svg');\n\t\t\tcolor: #000;\n\n\t\t\t& > svg, & > svg *{\n\t\t\t\tfill: #000 !important;\n\t\t\t}\n\t\t}\n\n\t\t/* (3) Animation quand .active */\n\t\t&.active{\n\t\t\tborder-bottom-color: darken($theme-fg-primary, 5);\n\t\t\t// box-shadow: inset 0 0 1em darken($dark-bg-primary, 1);\n\n\t\t\tbackground-color: $theme-fg-primary;\n\t\t\tbackground-image: url('/src/static/menu-side/sub-active@ffffff.svg');\n\t\t\tcolor: $dark-fg-primary;\n\n\t\t\t& > svg, & > svg *{\n\t\t\t\tfill: #fff !important;\n\t\t\t}\n\t\t}\n\n\n\t}\n\n\n\n\t/* [2] Gestion du menu deroulant\n\t=========================================================*/\n\t/* (1) Quand le menu est deroule */\n\t& > span:not(.icon) + div.sub>span{\n\t\tdisplay: block;\n\t\tposition: relative;\n\t\t\twidth: calc( 100% - 1.5em - 2.5em );\n\n\t\tpadding: .5em 1.5em;\n\t\tpadding-left: 2.5em;\n\n\t\tbackground: #eee url('/src/static/menu-side/sub@777777.svg') 1.5em center no-repeat;;\n\t\tbackground-size: .5em;\n\n\t\tcolor: #777777;\n\t\tfont-size: .85em;\n\n\t\tcursor: pointer;\n\n\t\t@include transition( color .2s ease-in-out );\n\n\t\t// Animation de @hover ou .active\n\t\t&:hover,\n\t\t&.active{\n\t\t\tcolor: #000;\n\t\t\tbackground-image: url('/src/static/menu-side/sub@000000.svg');\n\t\t}\n\t}\n\n\n\t& > span:not(.icon):not(.active) + div.sub>span{\n\t\tdisplay: none;\n\t}\n}\n",
 		"/* [1] COULEURS\n=========================================================*/\n/* (1) COULEURS DU THEME $DEFAULT */\n$theme-bg:         #e8e8e8;\n$theme-bg-primary: #ffffff;\n$theme-fg:         #515151;\n$theme-fg-primary: #399ced;\n\n/* (2) COULEURS DE THEME $DARK */\n$dark-bg:         #313541;\n$dark-bg-primary: #29282e;\n$dark-fg:         #939393;\n$dark-fg-primary: #ffffff;\n\n$header-dark:     #F8F8FA;\n\n/* (3) Couleurs du theme pour la timeline */\n$timeline-color: #738394;\n$timeline-0: #399ced;\n$timeline-1: #e64e3e;\n$timeline-2: #10baa3;\n$timeline-3: #b14be7;\n$timeline-4: #053b5d;\n\n\n/* [2] DIMENSIONS\n=========================================================*/\n/* (1) Layout de base */\n$menu-side-width: 15em;\n$header-height:   4em;\n\n\n\n/* [3] Mixins\n=========================================================*/\n@mixin transform($value...) {\n\ttransform: $value;\n\t-moz-transform: $value;\n\t-o-transform: $value;\n\t-ms-transform: $value;\n\t-webkit-transform: $value;\n}\n\n\n@mixin transition($value...) {\n\t-webkit-transition: $value;\n\ttransition: $value;\n}\n\n/* [4] Functions\n=========================================================*/\n// Transforme une couleur hex en string sans le #\n@function color-str($color){\n\t@return str-slice(#{$color}, 2, str-length(#{$color}));\n}\n"
 	],
 	"mappings": "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",

css/menu-side/min.css.map

@@ -6,7 +6,7 @@
 		"../constants.scss"
 	],
 	"sourcesContent": [
-		"@import 'constants';\n\n#WRAPPER > #MENU-SIDE{\n\n\t/* [1] Elements du menu\n\t=========================================================*/\n\t& > span{\n\t\tdisplay: block;\n\t\tposition: relative;\n\t\t\twidth: calc( 100% - 2*1em - 2*1.5em );\n\n\t\tpadding: .8em 1.5em;\n\t\tpadding-left: calc( 1.5em + 2*1em );\n\n\t\tborder-bottom: 1px solid transparent;\n\n\t\tbackground: url('/src/static/menu-side/sub.svg@aaaaaa') right 1.5em center no-repeat;\n\t\tbackground-size: .5em .5em;\n\n\n\t\tcolor: #666;\n\t\tfont-size: .85em;\n\n\t\t@include transition( color .2s ease-in-out, background .2s ease-in-out, box-shadow .2s ease-in-out, border .2s ease-in-out );\n\n\t\tcursor: pointer;\n\n\t\t/* (1) Icone svg */\n\t\t& > svg, & > svg *{\n\t\t\tposition: absolute;\n\t\t\t\ttop: calc( 50% - 1em/2 );\n\t\t\t\tleft: 1.5em;\n\t\t\t\twidth: 1em;\n\t\t\t\theight: 1em;\n\n\t\t\tfill: $dark-fg !important;\n\t\t\t@include transition( fill .2s ease-in-out );\n\t\t}\n\n\n\t\t/* (2) Animation de @hover */\n\t\t&:not(.active):hover{\n\t\t\tbackground-image: url('/src/static/menu-side/sub.svg@000000');\n\t\t\tcolor: #000;\n\n\t\t\t& > svg, & > svg *{\n\t\t\t\tfill: #000 !important;\n\t\t\t}\n\t\t}\n\n\t\t/* (3) Animation quand .active */\n\t\t&.active{\n\t\t\tborder-bottom-color: darken($theme-fg-primary, 5);\n\t\t\t// box-shadow: inset 0 0 1em darken($dark-bg-primary, 1);\n\n\t\t\tbackground-color: $theme-fg-primary;\n\t\t\tbackground-image: url('/src/static/menu-side/sub-active.svg@ffffff');\n\t\t\tcolor: $dark-fg-primary;\n\n\t\t\t& > svg, & > svg *{\n\t\t\t\tfill: #fff !important;\n\t\t\t}\n\t\t}\n\n\n\t}\n\n\n\n\t/* [2] Gestion du menu deroulant\n\t=========================================================*/\n\t/* (1) Quand le menu est deroule */\n\t& > span:not(.icon) + div.sub>span{\n\t\tdisplay: block;\n\t\tposition: relative;\n\t\t\twidth: calc( 100% - 1.5em - 2.5em );\n\n\t\tpadding: .5em 1.5em;\n\t\tpadding-left: 2.5em;\n\n\t\tbackground: #eee url('/src/static/menu-side/sub.svg@777777') 1.5em center no-repeat;;\n\t\tbackground-size: .5em;\n\n\t\tcolor: #777777;\n\t\tfont-size: .85em;\n\n\t\tcursor: pointer;\n\n\t\t@include transition( color .2s ease-in-out );\n\n\t\t// Animation de @hover ou .active\n\t\t&:hover,\n\t\t&.active{\n\t\t\tcolor: #000;\n\t\t\tbackground-image: url('/src/static/menu-side/sub.svg@000000');\n\t\t}\n\t}\n\n\n\t& > span:not(.icon):not(.active) + div.sub>span{\n\t\tdisplay: none;\n\t}\n}\n",
+		"@import 'constants';\n\n#WRAPPER > #MENU-SIDE{\n\n\t/* [1] Elements du menu\n\t=========================================================*/\n\t& > span{\n\t\tdisplay: block;\n\t\tposition: relative;\n\t\t\twidth: calc( 100% - 2*1em - 2*1.5em );\n\n\t\tpadding: .8em 1.5em;\n\t\tpadding-left: calc( 1.5em + 2*1em );\n\n\t\tborder-bottom: 1px solid transparent;\n\n\t\tbackground: url('/src/static/menu-side/sub@aaaaaa.svg') right 1.5em center no-repeat;\n\t\tbackground-size: .5em .5em;\n\n\n\t\tcolor: #666;\n\t\tfont-size: .85em;\n\n\t\t@include transition( color .2s ease-in-out, background .2s ease-in-out, box-shadow .2s ease-in-out, border .2s ease-in-out );\n\n\t\tcursor: pointer;\n\n\t\t/* (1) Icone svg */\n\t\t& > svg, & > svg *{\n\t\t\tposition: absolute;\n\t\t\t\ttop: calc( 50% - 1em/2 );\n\t\t\t\tleft: 1.5em;\n\t\t\t\twidth: 1em;\n\t\t\t\theight: 1em;\n\n\t\t\tfill: $dark-fg !important;\n\t\t\t@include transition( fill .2s ease-in-out );\n\t\t}\n\n\n\t\t/* (2) Animation de @hover */\n\t\t&:not(.active):hover{\n\t\t\tbackground-image: url('/src/static/menu-side/sub@000000.svg');\n\t\t\tcolor: #000;\n\n\t\t\t& > svg, & > svg *{\n\t\t\t\tfill: #000 !important;\n\t\t\t}\n\t\t}\n\n\t\t/* (3) Animation quand .active */\n\t\t&.active{\n\t\t\tborder-bottom-color: darken($theme-fg-primary, 5);\n\t\t\t// box-shadow: inset 0 0 1em darken($dark-bg-primary, 1);\n\n\t\t\tbackground-color: $theme-fg-primary;\n\t\t\tbackground-image: url('/src/static/menu-side/sub-active@ffffff.svg');\n\t\t\tcolor: $dark-fg-primary;\n\n\t\t\t& > svg, & > svg *{\n\t\t\t\tfill: #fff !important;\n\t\t\t}\n\t\t}\n\n\n\t}\n\n\n\n\t/* [2] Gestion du menu deroulant\n\t=========================================================*/\n\t/* (1) Quand le menu est deroule */\n\t& > span:not(.icon) + div.sub>span{\n\t\tdisplay: block;\n\t\tposition: relative;\n\t\t\twidth: calc( 100% - 1.5em - 2.5em );\n\n\t\tpadding: .5em 1.5em;\n\t\tpadding-left: 2.5em;\n\n\t\tbackground: #eee url('/src/static/menu-side/sub@777777.svg') 1.5em center no-repeat;;\n\t\tbackground-size: .5em;\n\n\t\tcolor: #777777;\n\t\tfont-size: .85em;\n\n\t\tcursor: pointer;\n\n\t\t@include transition( color .2s ease-in-out );\n\n\t\t// Animation de @hover ou .active\n\t\t&:hover,\n\t\t&.active{\n\t\t\tcolor: #000;\n\t\t\tbackground-image: url('/src/static/menu-side/sub@000000.svg');\n\t\t}\n\t}\n\n\n\t& > span:not(.icon):not(.active) + div.sub>span{\n\t\tdisplay: none;\n\t}\n}\n",
 		"/* [1] COULEURS\n=========================================================*/\n/* (1) COULEURS DU THEME $DEFAULT */\n$theme-bg:         #e8e8e8;\n$theme-bg-primary: #ffffff;\n$theme-fg:         #515151;\n$theme-fg-primary: #399ced;\n\n/* (2) COULEURS DE THEME $DARK */\n$dark-bg:         #313541;\n$dark-bg-primary: #29282e;\n$dark-fg:         #939393;\n$dark-fg-primary: #ffffff;\n\n$header-dark:     #F8F8FA;\n\n/* (3) Couleurs du theme pour la timeline */\n$timeline-color: #738394;\n$timeline-0: #399ced;\n$timeline-1: #e64e3e;\n$timeline-2: #10baa3;\n$timeline-3: #b14be7;\n$timeline-4: #053b5d;\n\n\n/* [2] DIMENSIONS\n=========================================================*/\n/* (1) Layout de base */\n$menu-side-width: 15em;\n$header-height:   4em;\n\n\n\n/* [3] Mixins\n=========================================================*/\n@mixin transform($value...) {\n\ttransform: $value;\n\t-moz-transform: $value;\n\t-o-transform: $value;\n\t-ms-transform: $value;\n\t-webkit-transform: $value;\n}\n\n\n@mixin transition($value...) {\n\t-webkit-transition: $value;\n\ttransition: $value;\n}\n\n/* [4] Functions\n=========================================================*/\n// Transforme une couleur hex en string sans le #\n@function color-str($color){\n\t@return str-slice(#{$color}, 2, str-length(#{$color}));\n}\n"
 	],
 	"mappings": "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",

css/panel-list.scss

@@ -126,30 +126,30 @@
 
 				// Image pour token
 				&[data-token]{
-					background: url('/src/static/container/token.svg@666666') center 1em no-repeat;
+					background: url('/src/static/container/token@666666.svg') center 1em no-repeat;
 					// Si le token est actif
 					&.active{
-						background-image: url('/src/static/container/token.svg@#{color-str($theme-fg-primary)}');
+						background-image: url('/src/static/container/token@#{color-str($theme-fg-primary)}.svg');
 					}
 				}
 
 
 				// Image pour utilisateur
 				&[data-user]{
-					background: url('/src/static/container/user.svg@666666') center 1em no-repeat;
+					background: url('/src/static/container/user@666666.svg') center 1em no-repeat;
 					// Si le token est actif
 					&.active{
-						background-image: url('/src/static/container/user.svg@#{color-str($theme-fg-primary)}');
+						background-image: url('/src/static/container/user@#{color-str($theme-fg-primary)}.svg');
 					}
 				}
 
 
 				// Image pour utilisateur
 				&[data-number]{
-					background: url('/src/static/container/phone_number.svg@666666') center 1em no-repeat;
+					background: url('/src/static/container/phone_number@666666.svg') center 1em no-repeat;
 					// Si le token est actif
 					&.active{
-						background-image: url('/src/static/container/phone_number.svg@#{color-str($theme-fg-primary)}');
+						background-image: url('/src/static/container/phone_number@#{color-str($theme-fg-primary)}.svg');
 					}
 				}
 

css/timeline-form.scss

@@ -351,7 +351,7 @@
 		border: none;
 		border-bottom: 1px solid #333;
 
-		background: #fff url('/src/static/container/bottom_arrow.svg@333333') right 10px center no-repeat;
+		background: #fff url('/src/static/container/bottom_arrow@333333.svg') right 10px center no-repeat;
 		background-size: 10px auto;
 
 		overflow: hidden;
@@ -359,7 +359,7 @@
 		// Animation de @focus
 		&:focus{
 			border-color: $timeline-2;
-			background-image:url('/src/static/container/bottom_arrow.svg@#{color-str($timeline-2)}');
+			background-image:url('/src/static/container/bottom_arrow@#{color-str($timeline-2)}.svg');
 		}
 
 	}
@@ -487,7 +487,7 @@
 
 		margin-right: 15px;
 
-		background: url('/src/static/container/switch-both.svg@4e4e50') center center no-repeat;
+		background: url('/src/static/container/switch-both@4e4e50.svg') center center no-repeat;
 		background-size: 1em auto;
 
 		font-size: .8em;
@@ -505,7 +505,7 @@
 
 		margin-right: 15px;
 
-		background: url('/src/static/container/switch-left.svg@4e4e50') center center no-repeat;
+		background: url('/src/static/container/switch-left@4e4e50.svg') center center no-repeat;
 		background-size: 1em auto;
 
 		font-size: .8em;