From b7919cee6d6e08f455817724687fa8e8f02d8792 Mon Sep 17 00:00:00 2001 From: xdrm-brackets Date: Thu, 18 Feb 2016 10:54:26 +0100 Subject: [PATCH] - [x] [reset.js] Gestion des animations en js --- css/container.css | 2 +- css/container.scss | 11 ++++++----- js/lib/reset.js | 12 ++++++++++++ todo.md | 3 +++ view/js/users.js | 9 +++++++-- 5 files changed, 29 insertions(+), 8 deletions(-) diff --git a/css/container.css b/css/container.css index c6dafce..09d2cd3 100755 --- a/css/container.css +++ b/css/container.css @@ -1,2 +1,2 @@ -#WRAPPER>#CONTAINER>section{display:none;flex-grow:1}#WRAPPER>#CONTAINER>section.active{display:block}#WRAPPER>#CONTAINER>section.active.list{display:flex;flex-direction:row;align-items:flex-start;justify-content:flex-start;flex-wrap:wrap}#WRAPPER>#CONTAINER>section.active.list .inline-box{flex:0 0 1}#WRAPPER>#CONTAINER>section.active.list .searchbar{display:inline-block;position:relative;flex:calc( 100% - 2*1em - 2*1em );height:1em;margin:1em;padding:.5em 1em;padding-left:2em;border-radius:3px;border:1px solid #b1b1b1;background:#fff url("/f/svg/search/st/sub-menu-side/b1b1b1") 0.5em center no-repeat;background-size:1em;transition:border .4s ease-in-out}#WRAPPER>#CONTAINER>section.active.list .searchbar:hover,#WRAPPER>#CONTAINER>section.active.list .searchbar:focus{border-color:#5630ed}#WRAPPER>#CONTAINER>section.active.list .error{display:inline-block;position:relative;width:calc( 100% - 2*1em - 2*1em );height:1em;margin:1em;padding:1em;border-radius:3px;border:1px solid #d52918;background:#d52918;color:#fff;text-shadow:1px 1px #a72013}#WRAPPER>#CONTAINER>section>.inline-box{display:inline-block;position:relative;flex:calc( 50% - 2*1em - 2*1em );margin:1em;padding:1em;border-radius:3px;box-shadow:0 0 1px #b7b7b7;background-color:#fff}#WRAPPER>#CONTAINER>section>.inline-box.hidden{display:none}#WRAPPER>#CONTAINER>section>.inline-box a{text-decoration:none;color:inherit}#WRAPPER>#CONTAINER>section>.inline-box .title{display:inline-block;font-size:1.15em;font-weight:bold;color:#bf2515;white-space:nowrap}#WRAPPER>#CONTAINER>section>.inline-box .title>span{font-size:.8em;color:#333}#WRAPPER>#CONTAINER>section>.inline-box .code,#WRAPPER>#CONTAINER>section>.inline-box .mail{display:block;margin:1em;color:#333;white-space:nowrap}#WRAPPER>#CONTAINER>section>.inline-box .code svg,#WRAPPER>#CONTAINER>section>.inline-box .mail svg{display:inline-block;position:relative;margin-left:.5em;margin-right:.5em;margin-bottom:-.6em;width:1.5em;height:2em;pointer-events:none}#WRAPPER>#CONTAINER>section>.inline-box .code svg path,#WRAPPER>#CONTAINER>section>.inline-box .mail svg path{fill:#333 !important;pointer-events:none}#WRAPPER>#CONTAINER>section>.inline-box .groups{display:block;margin:1em;color:#333;white-space:nowrap}#WRAPPER>#CONTAINER>section>.inline-box .groups svg{display:inline-block;position:relative;margin-left:.5em;margin-right:.5em;margin-bottom:-.6em;width:1.5em;height:2em;pointer-events:none}#WRAPPER>#CONTAINER>section>.inline-box .groups svg path{fill:#333 !important;pointer-events:none}#WRAPPER>#CONTAINER>section>.inline-box .groups span{display:inline-block;padding:.1em .5em;margin-right:.2em;border-radius:3px;border:1px solid #bdbdbd;box-shadow:inset 0 0 2px #fafafa;background-color:#f9f9f9;color:#333;cursor:default}#WRAPPER>#CONTAINER>section>.inline-box .link_edit,#WRAPPER>#CONTAINER>section>.inline-box .link_remove{display:inline-block;position:relative;width:1em;height:1em;margin-left:1em;cursor:pointer}#WRAPPER>#CONTAINER>section>.inline-box .link_edit>svg,#WRAPPER>#CONTAINER>section>.inline-box .link_remove>svg{width:100%;height:100%;fill:#ddd !important;transition:fill .4s ease-in-out;pointer-events:none}#WRAPPER>#CONTAINER>section>.inline-box .link_edit:hover>svg,#WRAPPER>#CONTAINER>section>.inline-box .link_remove:hover>svg{fill:#2193e6 !important}#WRAPPER>#CONTAINER>section>.inline-box .link_remove:hover>svg{fill:#d52918 !important}#WRAPPER>#CONTAINER>section>form{display:inline-block;position:relative;left:50%;margin:.3em 0;padding:1em;border-radius:3px;border-color:#d52918;box-shadow:0 0 1px #b7b7b7;background-color:#fff;transform:translateX(-50%)}#WRAPPER>#CONTAINER>section>form.valid{border-color:#27a560}#WRAPPER>#CONTAINER>section>form.neutral{border-color:#2193e6}#WRAPPER>#CONTAINER>section>form.search{border-color:#2193e6}#WRAPPER>#CONTAINER>section>form .edit_search_view,#WRAPPER>#CONTAINER>section>form .remove_search_view{display:inline-block;width:100%;text-align:center;color:#aaaaaa}#WRAPPER>#CONTAINER>section>form .edit_search_view span,#WRAPPER>#CONTAINER>section>form .remove_search_view span{color:#888888}#WRAPPER>#CONTAINER>section>form input[type=text],#WRAPPER>#CONTAINER>section>form input[type=mail],#WRAPPER>#CONTAINER>section>form input[type=password],#WRAPPER>#CONTAINER>section>form.invalid>input[type=text],#WRAPPER>#CONTAINER>section>form.invalid>input[type=mail],#WRAPPER>#CONTAINER>section>form.invalid>input[type=password],#WRAPPER>#CONTAINER>section>form input.invalid[type=text],#WRAPPER>#CONTAINER>section>form input.invalid[type=mail],#WRAPPER>#CONTAINER>section>form input.invalid[type=password]{display:inline-block;margin:1em 0;padding:.7em 1em;border-radius:3px;border:1px solid #d7dde8;color:#2f3033;transition:border .4s ease-in-out}#WRAPPER>#CONTAINER>section>form input[type=text]:focus,#WRAPPER>#CONTAINER>section>form input[type=text]:hover,#WRAPPER>#CONTAINER>section>form input[type=mail]:focus,#WRAPPER>#CONTAINER>section>form input[type=mail]:hover,#WRAPPER>#CONTAINER>section>form input[type=password]:focus,#WRAPPER>#CONTAINER>section>form input[type=password]:hover,#WRAPPER>#CONTAINER>section>form.invalid>input[type=text]:focus,#WRAPPER>#CONTAINER>section>form.invalid>input[type=text]:hover,#WRAPPER>#CONTAINER>section>form.invalid>input[type=mail]:focus,#WRAPPER>#CONTAINER>section>form.invalid>input[type=mail]:hover,#WRAPPER>#CONTAINER>section>form.invalid>input[type=password]:focus,#WRAPPER>#CONTAINER>section>form.invalid>input[type=password]:hover,#WRAPPER>#CONTAINER>section>form input.invalid[type=text]:focus,#WRAPPER>#CONTAINER>section>form input.invalid[type=text]:hover,#WRAPPER>#CONTAINER>section>form input.invalid[type=mail]:focus,#WRAPPER>#CONTAINER>section>form input.invalid[type=mail]:hover,#WRAPPER>#CONTAINER>section>form input.invalid[type=password]:focus,#WRAPPER>#CONTAINER>section>form input.invalid[type=password]:hover{border-color:#d52918}#WRAPPER>#CONTAINER>section>form.valid>input[type=text]:focus,#WRAPPER>#CONTAINER>section>form.valid>input[type=text]:hover,#WRAPPER>#CONTAINER>section>form.valid>input[type=mail]:focus,#WRAPPER>#CONTAINER>section>form.valid>input[type=mail]:hover,#WRAPPER>#CONTAINER>section>form.valid>input[type=password]:focus,#WRAPPER>#CONTAINER>section>form.valid>input[type=password]:hover,#WRAPPER>#CONTAINER>section>form input.valid[type=text]:focus,#WRAPPER>#CONTAINER>section>form input.valid[type=text]:hover,#WRAPPER>#CONTAINER>section>form input.valid[type=mail]:focus,#WRAPPER>#CONTAINER>section>form input.valid[type=mail]:hover,#WRAPPER>#CONTAINER>section>form input.valid[type=password]:focus,#WRAPPER>#CONTAINER>section>form input.valid[type=password]:hover{border-color:#27a560}#WRAPPER>#CONTAINER>section>form.neutral>input[type=text]:focus,#WRAPPER>#CONTAINER>section>form.neutral>input[type=text]:hover,#WRAPPER>#CONTAINER>section>form.neutral>input[type=mail]:focus,#WRAPPER>#CONTAINER>section>form.neutral>input[type=mail]:hover,#WRAPPER>#CONTAINER>section>form.neutral>input[type=password]:focus,#WRAPPER>#CONTAINER>section>form.neutral>input[type=password]:hover,#WRAPPER>#CONTAINER>section>form input.neutral[type=text]:focus,#WRAPPER>#CONTAINER>section>form input.neutral[type=text]:hover,#WRAPPER>#CONTAINER>section>form input.neutral[type=mail]:focus,#WRAPPER>#CONTAINER>section>form input.neutral[type=mail]:hover,#WRAPPER>#CONTAINER>section>form input.neutral[type=password]:focus,#WRAPPER>#CONTAINER>section>form input.neutral[type=password]:hover{border-color:#2193e6}#WRAPPER>#CONTAINER>section>form.search>input[type=text]:focus,#WRAPPER>#CONTAINER>section>form.search>input[type=text]:hover,#WRAPPER>#CONTAINER>section>form.search>input[type=mail]:focus,#WRAPPER>#CONTAINER>section>form.search>input[type=mail]:hover,#WRAPPER>#CONTAINER>section>form.search>input[type=password]:focus,#WRAPPER>#CONTAINER>section>form.search>input[type=password]:hover,#WRAPPER>#CONTAINER>section>form input.search[type=text]:focus,#WRAPPER>#CONTAINER>section>form input.search[type=text]:hover,#WRAPPER>#CONTAINER>section>form input.search[type=mail]:focus,#WRAPPER>#CONTAINER>section>form input.search[type=mail]:hover,#WRAPPER>#CONTAINER>section>form input.search[type=password]:focus,#WRAPPER>#CONTAINER>section>form input.search[type=password]:hover{border-color:#5630ed}#WRAPPER>#CONTAINER>section>form button,#WRAPPER>#CONTAINER>section>form button.invalid,#WRAPPER>#CONTAINER>section>form.invalid>button{display:inline-block;position:relative;left:50%;padding:.7em 1em;border-radius:3px;border:1px solid #d52918;background-color:#d52918;color:#fff;transition:background .4s ease-in-out;transform:translateX(-50%)}#WRAPPER>#CONTAINER>section>form button:hover,#WRAPPER>#CONTAINER>section>form button:focus,#WRAPPER>#CONTAINER>section>form button:disabled,#WRAPPER>#CONTAINER>section>form button.invalid:hover,#WRAPPER>#CONTAINER>section>form button.invalid:focus,#WRAPPER>#CONTAINER>section>form button.invalid:disabled,#WRAPPER>#CONTAINER>section>form.invalid>button:hover,#WRAPPER>#CONTAINER>section>form.invalid>button:focus,#WRAPPER>#CONTAINER>section>form.invalid>button:disabled{background-color:#fff;color:#d52918}#WRAPPER>#CONTAINER>section>form button.valid,#WRAPPER>#CONTAINER>section>form.valid>button{border-color:#27a560;background-color:#27a560}#WRAPPER>#CONTAINER>section>form button.valid:hover,#WRAPPER>#CONTAINER>section>form button.valid:focus,#WRAPPER>#CONTAINER>section>form button.valid:disabled,#WRAPPER>#CONTAINER>section>form.valid>button:hover,#WRAPPER>#CONTAINER>section>form.valid>button:focus,#WRAPPER>#CONTAINER>section>form.valid>button:disabled{background-color:#fff;color:#27a560}#WRAPPER>#CONTAINER>section>form button.neutral,#WRAPPER>#CONTAINER>section>form.neutral>button{border-color:#2193e6;background-color:#2193e6}#WRAPPER>#CONTAINER>section>form button.neutral:hover,#WRAPPER>#CONTAINER>section>form button.neutral:focus,#WRAPPER>#CONTAINER>section>form button.neutral:disabled,#WRAPPER>#CONTAINER>section>form.neutral>button:hover,#WRAPPER>#CONTAINER>section>form.neutral>button:focus,#WRAPPER>#CONTAINER>section>form.neutral>button:disabled{background-color:#fff;color:#2193e6}#WRAPPER>#CONTAINER>section>form button.search,#WRAPPER>#CONTAINER>section>form.search>button{border-color:#5630ed;background-color:#5630ed}#WRAPPER>#CONTAINER>section>form button.search:hover,#WRAPPER>#CONTAINER>section>form button.search:focus,#WRAPPER>#CONTAINER>section>form button.search:disabled,#WRAPPER>#CONTAINER>section>form.search>button:hover,#WRAPPER>#CONTAINER>section>form.search>button:focus,#WRAPPER>#CONTAINER>section>form.search>button:disabled{background-color:#fff;color:#5630ed}#WRAPPER>#CONTAINER>section>form.invalid>button.active,#WRAPPER>#CONTAINER>section>form button.invalid.active,#WRAPPER>#CONTAINER>section>form button.active{background:url("/f/svg/active/st/container/d52918") center center no-repeat;background-size:1em auto;color:transparent !important}#WRAPPER>#CONTAINER>section>form button.valid.active,#WRAPPER>#CONTAINER>section>form.valid>button.active{background-image:url("/f/svg/active/st/container/27a560")}#WRAPPER>#CONTAINER>section>form button.neutral.active,#WRAPPER>#CONTAINER>section>form.neutral>button.active{background-image:url("/f/svg/active/st/container/2193e6")}#WRAPPER>#CONTAINER>section>form button.search.active,#WRAPPER>#CONTAINER>section>form.search>button.active{background-image:url("/f/svg/active/st/container/5630ed")}#WRAPPER>#CONTAINER>section>form hr.OR[data-label]{display:block;position:relative;width:100%;height:0;border:0;border-bottom:1px dashed #d52918}#WRAPPER>#CONTAINER>section>form hr.OR[data-label]:before{content:attr(data-label);display:inline-block;position:relative;top:50%;left:50%;padding:0 1em;background-color:#fff;color:#d52918;transform:translateX(-50%) translatey(-50%)}#WRAPPER>#CONTAINER>section>form .valid>hr.OR,#WRAPPER>#CONTAINER>section>form hr.OR.valid{border-bottom:1px dashed #27a560}#WRAPPER>#CONTAINER>section>form .valid>hr.OR:before,#WRAPPER>#CONTAINER>section>form hr.OR.valid:before{color:#27a560}#WRAPPER>#CONTAINER>section>form .neutral>hr.OR,#WRAPPER>#CONTAINER>section>form hr.OR.neutral{border-bottom:1px dashed #2193e6}#WRAPPER>#CONTAINER>section>form .neutral>hr.OR:before,#WRAPPER>#CONTAINER>section>form hr.OR.neutral:before{color:#2193e6}#WRAPPER>#CONTAINER>section>form .search>hr.OR,#WRAPPER>#CONTAINER>section>form hr.OR.search{border-bottom:1px dashed #5630ed}#WRAPPER>#CONTAINER>section>form .search>hr.OR:before,#WRAPPER>#CONTAINER>section>form hr.OR.search:before{color:#5630ed} +#WRAPPER>#CONTAINER>section{display:none;flex-grow:1}#WRAPPER>#CONTAINER>section.active{display:block}#WRAPPER>#CONTAINER>section.active.list{display:flex;flex-direction:row;align-items:flex-start;justify-content:flex-start;flex-wrap:wrap}#WRAPPER>#CONTAINER>section.active.list .inline-box{flex:0 0 1}#WRAPPER>#CONTAINER>section.active.list .searchbar{display:inline-block;position:relative;flex:calc( 100% - 2*1em - 2*1em );height:1em;margin:1em;padding:.5em 1em;padding-left:2em;border-radius:3px;border:1px solid #b1b1b1;background:#fff url("/f/svg/search/st/sub-menu-side/b1b1b1") 0.5em center no-repeat;background-size:1em;transition:border .4s ease-in-out}#WRAPPER>#CONTAINER>section.active.list .searchbar:hover,#WRAPPER>#CONTAINER>section.active.list .searchbar:focus{border-color:#5630ed}#WRAPPER>#CONTAINER>section.active.list .error{display:inline-block;position:relative;width:calc( 100% - 2*1em - 2*1em );height:1em;margin:1em;padding:1em;border-radius:3px;border:1px solid #d52918;background:#d52918;color:#fff;text-shadow:1px 1px #a72013}#WRAPPER>#CONTAINER>section>.inline-box{display:inline-block;position:relative;flex:calc( 50% - 2*1em - 2*1em );margin:1em;padding:1em;border-radius:3px;box-shadow:0 0 1px #b7b7b7;background-color:#fff}#WRAPPER>#CONTAINER>section>.inline-box.hidden{display:none}#WRAPPER>#CONTAINER>section>.inline-box a{text-decoration:none;color:inherit}#WRAPPER>#CONTAINER>section>.inline-box .title{display:inline-block;font-size:1.15em;font-weight:bold;color:#bf2515;white-space:nowrap}#WRAPPER>#CONTAINER>section>.inline-box .title>span{font-size:.8em;color:#333}#WRAPPER>#CONTAINER>section>.inline-box .code,#WRAPPER>#CONTAINER>section>.inline-box .mail{display:block;margin:1em;color:#333;white-space:nowrap}#WRAPPER>#CONTAINER>section>.inline-box .code svg,#WRAPPER>#CONTAINER>section>.inline-box .mail svg{display:inline-block;position:relative;margin-left:.5em;margin-right:.5em;margin-bottom:-.6em;width:1.5em;height:2em;pointer-events:none}#WRAPPER>#CONTAINER>section>.inline-box .code svg path,#WRAPPER>#CONTAINER>section>.inline-box .mail svg path{fill:#333 !important;pointer-events:none}#WRAPPER>#CONTAINER>section>.inline-box .groups{display:block;margin:1em;color:#333;white-space:nowrap}#WRAPPER>#CONTAINER>section>.inline-box .groups svg{display:inline-block;position:relative;margin-left:.5em;margin-right:.5em;margin-bottom:-.6em;width:1.5em;height:2em;pointer-events:none}#WRAPPER>#CONTAINER>section>.inline-box .groups svg path{fill:#333 !important;pointer-events:none}#WRAPPER>#CONTAINER>section>.inline-box .groups span{display:inline-block;padding:.1em .5em;margin-right:.2em;border-radius:3px;border:1px solid #bdbdbd;box-shadow:inset 0 0 2px #fafafa;background-color:#f9f9f9;color:#333;cursor:default}#WRAPPER>#CONTAINER>section>.inline-box .link_edit,#WRAPPER>#CONTAINER>section>.inline-box .link_remove{display:inline-block;position:relative;width:1em;height:1em;margin-left:1em;cursor:pointer}#WRAPPER>#CONTAINER>section>.inline-box .link_edit>svg,#WRAPPER>#CONTAINER>section>.inline-box .link_remove>svg{width:100%;height:100%;fill:#ddd !important;transition:fill .4s ease-in-out;pointer-events:none}#WRAPPER>#CONTAINER>section>.inline-box .link_edit:hover>svg,#WRAPPER>#CONTAINER>section>.inline-box .link_remove:hover>svg{fill:#2193e6 !important}#WRAPPER>#CONTAINER>section>.inline-box .link_remove:hover>svg{fill:#d52918 !important}#WRAPPER>#CONTAINER>section>form{display:inline-block;position:relative;left:50%;margin:.3em 0;padding:1em;border-radius:3px;border-color:#d52918;box-shadow:0 0 1px #b7b7b7;background-color:#fff;transform:translateX(-50%)}#WRAPPER>#CONTAINER>section>form.valid{border-color:#27a560}#WRAPPER>#CONTAINER>section>form.neutral{border-color:#2193e6}#WRAPPER>#CONTAINER>section>form.search{border-color:#2193e6}#WRAPPER>#CONTAINER>section>form .edit_search_view,#WRAPPER>#CONTAINER>section>form .remove_search_view{display:inline-block;width:100%;text-align:center;color:#aaaaaa}#WRAPPER>#CONTAINER>section>form .edit_search_view span,#WRAPPER>#CONTAINER>section>form .remove_search_view span{color:#888888}#WRAPPER>#CONTAINER>section>form input[type=text],#WRAPPER>#CONTAINER>section>form input[type=mail],#WRAPPER>#CONTAINER>section>form input[type=password],#WRAPPER>#CONTAINER>section>form.invalid>input[type=text],#WRAPPER>#CONTAINER>section>form.invalid>input[type=mail],#WRAPPER>#CONTAINER>section>form.invalid>input[type=password],#WRAPPER>#CONTAINER>section>form input.invalid[type=text],#WRAPPER>#CONTAINER>section>form input.invalid[type=mail],#WRAPPER>#CONTAINER>section>form input.invalid[type=password]{display:inline-block;margin:1em 0;padding:.7em 1em;border-radius:3px;border:1px solid #d7dde8;color:#2f3033;transition:border .4s ease-in-out}#WRAPPER>#CONTAINER>section>form input[type=text]:focus,#WRAPPER>#CONTAINER>section>form input[type=text]:hover,#WRAPPER>#CONTAINER>section>form input[type=mail]:focus,#WRAPPER>#CONTAINER>section>form input[type=mail]:hover,#WRAPPER>#CONTAINER>section>form input[type=password]:focus,#WRAPPER>#CONTAINER>section>form input[type=password]:hover,#WRAPPER>#CONTAINER>section>form.invalid>input[type=text]:focus,#WRAPPER>#CONTAINER>section>form.invalid>input[type=text]:hover,#WRAPPER>#CONTAINER>section>form.invalid>input[type=mail]:focus,#WRAPPER>#CONTAINER>section>form.invalid>input[type=mail]:hover,#WRAPPER>#CONTAINER>section>form.invalid>input[type=password]:focus,#WRAPPER>#CONTAINER>section>form.invalid>input[type=password]:hover,#WRAPPER>#CONTAINER>section>form input.invalid[type=text]:focus,#WRAPPER>#CONTAINER>section>form input.invalid[type=text]:hover,#WRAPPER>#CONTAINER>section>form input.invalid[type=mail]:focus,#WRAPPER>#CONTAINER>section>form input.invalid[type=mail]:hover,#WRAPPER>#CONTAINER>section>form input.invalid[type=password]:focus,#WRAPPER>#CONTAINER>section>form input.invalid[type=password]:hover{border-color:#d52918}#WRAPPER>#CONTAINER>section>form.valid>input[type=text]:focus,#WRAPPER>#CONTAINER>section>form.valid>input[type=text]:hover,#WRAPPER>#CONTAINER>section>form.valid>input[type=mail]:focus,#WRAPPER>#CONTAINER>section>form.valid>input[type=mail]:hover,#WRAPPER>#CONTAINER>section>form.valid>input[type=password]:focus,#WRAPPER>#CONTAINER>section>form.valid>input[type=password]:hover,#WRAPPER>#CONTAINER>section>form input.valid[type=text]:focus,#WRAPPER>#CONTAINER>section>form input.valid[type=text]:hover,#WRAPPER>#CONTAINER>section>form input.valid[type=mail]:focus,#WRAPPER>#CONTAINER>section>form input.valid[type=mail]:hover,#WRAPPER>#CONTAINER>section>form input.valid[type=password]:focus,#WRAPPER>#CONTAINER>section>form input.valid[type=password]:hover{border-color:#27a560}#WRAPPER>#CONTAINER>section>form.neutral>input[type=text]:focus,#WRAPPER>#CONTAINER>section>form.neutral>input[type=text]:hover,#WRAPPER>#CONTAINER>section>form.neutral>input[type=mail]:focus,#WRAPPER>#CONTAINER>section>form.neutral>input[type=mail]:hover,#WRAPPER>#CONTAINER>section>form.neutral>input[type=password]:focus,#WRAPPER>#CONTAINER>section>form.neutral>input[type=password]:hover,#WRAPPER>#CONTAINER>section>form input.neutral[type=text]:focus,#WRAPPER>#CONTAINER>section>form input.neutral[type=text]:hover,#WRAPPER>#CONTAINER>section>form input.neutral[type=mail]:focus,#WRAPPER>#CONTAINER>section>form input.neutral[type=mail]:hover,#WRAPPER>#CONTAINER>section>form input.neutral[type=password]:focus,#WRAPPER>#CONTAINER>section>form input.neutral[type=password]:hover{border-color:#2193e6}#WRAPPER>#CONTAINER>section>form.search>input[type=text]:focus,#WRAPPER>#CONTAINER>section>form.search>input[type=text]:hover,#WRAPPER>#CONTAINER>section>form.search>input[type=mail]:focus,#WRAPPER>#CONTAINER>section>form.search>input[type=mail]:hover,#WRAPPER>#CONTAINER>section>form.search>input[type=password]:focus,#WRAPPER>#CONTAINER>section>form.search>input[type=password]:hover,#WRAPPER>#CONTAINER>section>form input.search[type=text]:focus,#WRAPPER>#CONTAINER>section>form input.search[type=text]:hover,#WRAPPER>#CONTAINER>section>form input.search[type=mail]:focus,#WRAPPER>#CONTAINER>section>form input.search[type=mail]:hover,#WRAPPER>#CONTAINER>section>form input.search[type=password]:focus,#WRAPPER>#CONTAINER>section>form input.search[type=password]:hover{border-color:#5630ed}#WRAPPER>#CONTAINER>section>form button,#WRAPPER>#CONTAINER>section>form button.invalid,#WRAPPER>#CONTAINER>section>form.invalid>button{display:inline-block;position:relative;left:50%;padding:.7em 1em;border-radius:3px;border:1px solid #d52918;background:#d52918 center center no-repeat;color:#fff;transition:background .4s ease-in-out;transform:translateX(-50%)}#WRAPPER>#CONTAINER>section>form button:hover,#WRAPPER>#CONTAINER>section>form button:focus,#WRAPPER>#CONTAINER>section>form button:disabled,#WRAPPER>#CONTAINER>section>form button.invalid:hover,#WRAPPER>#CONTAINER>section>form button.invalid:focus,#WRAPPER>#CONTAINER>section>form button.invalid:disabled,#WRAPPER>#CONTAINER>section>form.invalid>button:hover,#WRAPPER>#CONTAINER>section>form.invalid>button:focus,#WRAPPER>#CONTAINER>section>form.invalid>button:disabled{background-color:#fff;color:#d52918}#WRAPPER>#CONTAINER>section>form button.valid,#WRAPPER>#CONTAINER>section>form.valid>button{border-color:#27a560;background-color:#27a560}#WRAPPER>#CONTAINER>section>form button.valid:hover,#WRAPPER>#CONTAINER>section>form button.valid:focus,#WRAPPER>#CONTAINER>section>form button.valid:disabled,#WRAPPER>#CONTAINER>section>form.valid>button:hover,#WRAPPER>#CONTAINER>section>form.valid>button:focus,#WRAPPER>#CONTAINER>section>form.valid>button:disabled{background-color:#fff;color:#27a560}#WRAPPER>#CONTAINER>section>form button.neutral,#WRAPPER>#CONTAINER>section>form.neutral>button{border-color:#2193e6;background-color:#2193e6}#WRAPPER>#CONTAINER>section>form button.neutral:hover,#WRAPPER>#CONTAINER>section>form button.neutral:focus,#WRAPPER>#CONTAINER>section>form button.neutral:disabled,#WRAPPER>#CONTAINER>section>form.neutral>button:hover,#WRAPPER>#CONTAINER>section>form.neutral>button:focus,#WRAPPER>#CONTAINER>section>form.neutral>button:disabled{background-color:#fff;color:#2193e6}#WRAPPER>#CONTAINER>section>form button.search,#WRAPPER>#CONTAINER>section>form.search>button{border-color:#5630ed;background-color:#5630ed}#WRAPPER>#CONTAINER>section>form button.search:hover,#WRAPPER>#CONTAINER>section>form button.search:focus,#WRAPPER>#CONTAINER>section>form button.search:disabled,#WRAPPER>#CONTAINER>section>form.search>button:hover,#WRAPPER>#CONTAINER>section>form.search>button:focus,#WRAPPER>#CONTAINER>section>form.search>button:disabled{background-color:#fff;color:#5630ed}#WRAPPER>#CONTAINER>section>form.invalid>button.active,#WRAPPER>#CONTAINER>section>form button.invalid.active,#WRAPPER>#CONTAINER>section>form button.active{background-color:#fff;background-image:url("/f/svg/active/st/container/d52918") !important;background-size:1em auto;color:transparent !important}#WRAPPER>#CONTAINER>section>form button.valid.active,#WRAPPER>#CONTAINER>section>form.valid>button.active{background-image:url("/f/svg/active/st/container/27a560") !important}#WRAPPER>#CONTAINER>section>form button.neutral.active,#WRAPPER>#CONTAINER>section>form.neutral>button.active{background-image:url("/f/svg/active/st/container/2193e6") !important}#WRAPPER>#CONTAINER>section>form button.search.active,#WRAPPER>#CONTAINER>section>form.search>button.active{background-image:url("/f/svg/active/st/container/5630ed") !important}#WRAPPER>#CONTAINER>section>form hr.OR[data-label]{display:block;position:relative;width:100%;height:0;border:0;border-bottom:1px dashed #d52918}#WRAPPER>#CONTAINER>section>form hr.OR[data-label]:before{content:attr(data-label);display:inline-block;position:relative;top:50%;left:50%;padding:0 1em;background-color:#fff;color:#d52918;transform:translateX(-50%) translatey(-50%)}#WRAPPER>#CONTAINER>section>form .valid>hr.OR,#WRAPPER>#CONTAINER>section>form hr.OR.valid{border-bottom:1px dashed #27a560}#WRAPPER>#CONTAINER>section>form .valid>hr.OR:before,#WRAPPER>#CONTAINER>section>form hr.OR.valid:before{color:#27a560}#WRAPPER>#CONTAINER>section>form .neutral>hr.OR,#WRAPPER>#CONTAINER>section>form hr.OR.neutral{border-bottom:1px dashed #2193e6}#WRAPPER>#CONTAINER>section>form .neutral>hr.OR:before,#WRAPPER>#CONTAINER>section>form hr.OR.neutral:before{color:#2193e6}#WRAPPER>#CONTAINER>section>form .search>hr.OR,#WRAPPER>#CONTAINER>section>form hr.OR.search{border-bottom:1px dashed #5630ed}#WRAPPER>#CONTAINER>section>form .search>hr.OR:before,#WRAPPER>#CONTAINER>section>form hr.OR.search:before{color:#5630ed} /*# sourceMappingURL=container.css.map */ diff --git a/css/container.scss b/css/container.scss index e22fe19..a62b714 100755 --- a/css/container.scss +++ b/css/container.scss @@ -357,7 +357,7 @@ border-radius: 3px; border: 1px solid $form-invalid-color; - background-color: $form-invalid-color; + background: $form-invalid-color center center no-repeat; color: #fff; @@ -424,7 +424,8 @@ &.invalid > button.active, button.invalid.active, button.active{ - background: url('/f/svg/active/st/container/'+$rd-form-invalid-color) center center no-repeat; + background-color: #fff; + background-image: url('/f/svg/active/st/container/'+$rd-form-invalid-color) !important; background-size: 1em auto; color: transparent !important; @@ -433,15 +434,15 @@ button.valid.active, &.valid > button.active{ - background-image: url('/f/svg/active/st/container/'+$rd-form-valid-color); + background-image: url('/f/svg/active/st/container/'+$rd-form-valid-color) !important; } button.neutral.active, &.neutral > button.active{ - background-image: url('/f/svg/active/st/container/'+$rd-form-neutral-color); + background-image: url('/f/svg/active/st/container/'+$rd-form-neutral-color) !important; } button.search.active, &.search > button.active{ - background-image: url('/f/svg/active/st/container/'+$rd-form-search-color); + background-image: url('/f/svg/active/st/container/'+$rd-form-search-color) !important; } diff --git a/js/lib/reset.js b/js/lib/reset.js index a57d8cb..b3c32a4 100755 --- a/js/lib/reset.js +++ b/js/lib/reset.js @@ -92,6 +92,18 @@ NodeList.prototype.indexOf = HTMLCollection.prototype.indexOf = function(searche +// GESTION DES ANIMATIONS (CLASSE PENDANT TEMPS IMPARTI) +Element.prototype.anim = function(className, timeout){ + + var pointer = this; // on cree un pointeur + + pointer.addClass(className); // on met la classe + + // on la retire apres le @timeout imparti + setTimeout(function(){ pointer.remClass(className); }, timeout); + +} + diff --git a/todo.md b/todo.md index fdd8d60..5374b96 100755 --- a/todo.md +++ b/todo.md @@ -8,6 +8,9 @@ # EN COURS # ############ - [x] [container.scss] Icone dans bouton quand succes sur l'operation + - [x] [reset.js] Gestion des animations en js + - [ ] [view/js/users.js] Gestion de l'icone avec timeout + - [ ] [view/js/machines.js] Gestion de l'icone avec timeout - [ ] [view/users][view/js/users.js] Suppression avec recherche comme pour la modification - [ ] [view/machines][view/js/machines.js] Suppression avec recherche comme pour la modification diff --git a/view/js/users.js b/view/js/users.js index a817bd3..ce07d57 100755 --- a/view/js/users.js +++ b/view/js/users.js @@ -158,9 +158,11 @@ if( section.create.element != null ){ }; api.send(request, function(answer){ - if( answer.ModuleError == 0 ) // Tout s'est bien deroule + if( answer.ModuleError == 0 ){ // Tout s'est bien deroule console.log('Utilisateur cree!'); - else // Erreur + + section.create.input.submit.anim('active', 1000); + }else // Erreur console.error('ModuleError::'+answer.ModuleError); }); @@ -305,6 +307,7 @@ if( section.remove.element != null ){ if( answer.ModuleError == 0 && answer.status == true ){ // Tout s'est bien deroule console.log('Utilisateur supprime!'); + section.remove.input.submit.anim('active', 1000); // On vide le formulaire autofill_remove(null); }else // Erreur @@ -477,6 +480,8 @@ if( section.edit.element != null ){ if( answer.ModuleError == 0 && answer.status == true ){ // Tout s'est bien deroule console.log('Utilisateur modifie!'); + section.edit.input.submit.anim('active', 1000); + // On met a jour l'utilisateur autofill_edit(section.edit.input.search.id.value);