"@import 'constants';\n\n/* [1] Panel list (tokens, utilisateurs, etc)\n=========================================================*/\n@import 'panel-list';\n\n\n/* [2] Formulaire de type 'timeline'\n=========================================================*/\n@import 'timeline-form';\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\n/* [2] DIMENSIONS\n=========================================================*/\n/* (1) Layout de base */\n$menu-side-width: 15em;\n$header-height: 4em;\n",
"@import 'constants';\n\n/* [1] Panneau d'ajout/suppression d'elements\n=========================================================*/\n#WRAPPER > #CONTAINER section[data-panel-list]{\n\tdisplay: block;\n\tposition: relative;\n\n\tborder-radius: 3px;\n\tborder: 1px solid #ccc;\n\n\tbackground-color: #fff;\n\n\tfont-size: .9em;\n\tcolor: #000;\n\n\n\t/* (1) Header (titre + ajout) */\n\t& > div[data-header]{\n\t\tdisplay: flex;\n\t\tposition: relative;\n\n\t\t// flex properties\n\t\tflex-direction: row;\n\t\tflex-wrap: nowrap;\n\t\tjustify-content: space-between;\n\t\talign-items: center;\n\n\t\tpadding: .5em .7em;\n\n\t\tborder-radius: 3px 3px 0 0;\n\t\tborder-bottom: 1px solid #ccc;\n\n\t\tbackground-color: #f5f5f5;\n\t\tbox-shadow: inset 0 0 5px #eee;\n\n\t\t// Libelle du panel\n\t\t& > span,\n\t\t& > button{\n\t\t\tcolor: #333;\n\t\t\tfont-weight: bold;\n\t\t\tline-height: 2em;\n\t\t}\n\n\t\t// Bouton ajouter\n\t\t& > button{\n\t\t\tpadding: .1em .7em;\n\n\t\t\tborder-radius: 3px;\n\t\t\tborder: 1px solid #777;\n\n\t\t\tbackground: #ecf0f1;\n\n\t\t\ttransition: all .1s ease-in-out;\n\n\t\t\tcolor: #777;\n\n\t\t\t// Animation de @hover\n\t\t\t&:hover{\n\t\t\t\tbackground: $theme-fg-primary;\n\t\t\t\tborder-color: darken($theme-fg-primary, 10);\n\t\t\t\tcolor: #fff;\n\t\t\t}\n\t\t}\n\n\t}\n\n\n\t/* (2) Description (sous le header) */\n\t& > div[data-description]{\n\t\tdisplay: block;\n\t\tposition: relative;\n\n\t\tborder-bottom: 1px solid #ccc;\n\n\t\tpadding: .7em .7em;\n\n\t\tcolor: #555;\n\t}\n\n\n\n\t/* (3) Liste des elements */\n\t& > ul[data-list]{\n\t\tdisplay: flex;\n\t\tposition: relative;\n\n\t\t// flex properties\n\t\tflex-direction: column;\n\t\tjustify-content: flex-start;\n\t\tflex-wrap: nowrap;\n\n\t\tmargin: 0;\n\t\tpadding: 0;\n\n\t\tlist-style: none;\n\n\n\t\t/* (4) Chaque element de la liste */\n\t\t& > li[data-element]{\n\t\t\tdisplay: flex;\n\n\t\t\t// flex properties\n\t\t\tflex-direction: row;\n\t\t\tjustify-content: space-between;\n\t\t\talign-items: center;\n\t\t\tflex-wrap: nowrap;\n\n\t\t\tpadding: 1em;\n\n\t\t\t// rebord en bas sauf dernier\n\t\t\t&:not(:last-child){\n\t\t\t\tborder-bottom: 1px solid #ccc;\n\t\t\t}\n\n\t\t\t/* (4.1) Logo et type d'element */\n\t\t\t& > div:nth-child(1){\n\t\t\t\tdisplay: flex;\n\t\t\t\t\twidth: 10em;\n\t\t\t\t\theight: 6em;\n\n\t\t\t\t// flex properties\n\t\t\t\tflex-direction: column;\n\t\t\t\tjustify-content: flex-end;\n\t\t\t\talign-items: center;\n\n\t\t\t\t// Image pour token\n\t\t\t\t&[data-token]{\n\t\t\t\t\tbackground: url('/f/svg/token/st/container/666666') center 1em no-repeat;\n\t\t\t\t\t// Si le token est actif\n\t\t\t\t\t&.active{\n\t\t\t\t\t\tbackground-image: url('/f/svg/token/st/container/399ced');\n\t\t\t\t\t}\n\t\t\t\t}\n\n\n\t\t\t\t// Image pour utilisateur\n\t\t\t\t&[data-user]{\n\t\t\t\t\tbackground: url('/f/svg/user/st/container/666666') center 1em no-repeat;\n\t\t\t\t\t// Si le token est actif\n\t\t\t\t\t&.active{\n\t\t\t\t\t\tbackground-image: url('/f/svg/user/st/container/399ced');\n\t\t\t\t\t}\n\t\t\t\t}\n\n\n\t\t\t\t// Image pour utilisateur\n\t\t\t\t&[data-number]{\n\t\t\t\t\tbackground: url('/f/svg/phone_number/st/container/666666') center 1em no-repeat;\n\t\t\t\t\t// Si le token est actif\n\t\t\t\t\t&.active{\n\t\t\t\t\t\tbackground-image: url('/f/svg/phone_number/st/container/399ced');\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\tbackground-size: auto 50%;\n\n\n\n\t\t\t\t// Texte pour le type d'element\n\t\t\t\t& > span{\n\t\t\t\t\tdisplay: block;\n\n\t\t\t\t\tpadding: 0 .4em;\n\n\t\t\t\t\tborder-radius: 3px;\n\t\t\t\t\tborder: 1px solid #ddd;\n\n\t\t\t\t\tfont-size: .8em;\n\t\t\t\t\tcolor: #555;\n\t\t\t\t\ttext-transform: uppercase;\n\t\t\t\t\tfont-weight: bold;\n\t\t\t\t}\n\n\t\t\t}\n\n\t\t\t/* (4.2) Donnees descriptives */\n\t\t\t& > div:nth-child(n+2){\n\t\t\t\tdisplay: flex;\n\t\t\t\tposition: relative;\n\n\t\t\t\tflex: 10em;\n\n\t\t\t\tpadding: 1em;\n\n\t\t\t\t// flex properties\n\t\t\t\tflex-direction: column;\n\t\t\t\tjustify-content: flex-start;\n\t\t\t\talign-items: flex-start;\n\n\t\t\t\tfont-size: 1em;\n\t\t\t\tcolor: #000;\n\
"@import 'constants';\n\n/* [1] Formulaire de type timeline\n=========================================================*/\n#WRAPPER > #CONTAINER section[data-timeline]{\n\tdisplay: block;\n\tposition: relative;\n\n\tbackground-color: #fff;\n\n\tfont-size: .9em;\n\tcolor: #000;\n\n\t/* (1) On ajoute le liseré à droite pour TOUS les éléments */\n\t& *:not(.no-line){\n\n\t\tcolor: #333;\n\n\t\tmargin: 0 20px;\n\t\tpadding: 5px 60px;\n\n\t\tbackground: url('/f/svg/dot/st/container/aaaaaa') 20px 0 no-repeat;\n\t\tbackground-size: 6px 100%;\n\n\t}\n\n\n\t/* (2) Titres de sections */\n\t& h5:not(.no-line),\n\t& [data-title]:not(.no-line){\n\t\tpadding: 20px 60px;\n\n\t\tfont-size: 1.4em;\n\t\tcolor: #777;\n\t\tfont-weight: bold;\n\n\t\tbackground:\turl('/f/svg/hole/st/container/777777') 4px 16px no-repeat, // cercle\n\t\t\t\t\turl('/f/svg/hole/st/container/ffffff') 2px 14px no-repeat, // contour blanc\n\t\t\t\t\turl('/f/svg/dot/st/container/aaaaaa') 20px 0 no-repeat; // ligne\n\t\tbackground-size: 38px, 42px, 6px 100%;\n\n\t\t// Gestion du before (compteur css) //\n\t\t// &[data-n]:before{\n\t\t// \tcontent: attr(data-n);\n\t\t//\n\t\t// \tfont-size: 1.3em;\n\t\t// \tcolor: #999;\n\t\t// \tfont-weight: bold;\n\t\t//\n\t\t// \tdisplay: inline-block;\n\t\t// \tposition: absolute;\n\t\t// \tleft: 37px;\n\t\t// }\n\t}\n\n\n\n\n}\n"