diff --git a/css/container.css b/css/container.css index df60fb4..e9bd98a 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:column}#WRAPPER>#CONTAINER>section.active.list .inline-box{flex:1 1 1}#WRAPPER>#CONTAINER>section>.inline-box{display:inline-block;position:relative;margin:.3em 0;padding:1em;border-radius:3px;box-shadow:0 0 1px #b7b7b7;background-color:#fff}#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}#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:inline-block;color:#333}#WRAPPER>#CONTAINER>section>.inline-box .code svg,#WRAPPER>#CONTAINER>section>.inline-box .mail svg{display:inline-block;position:relative;margin-left:.8em;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 .mail{display:inline-block;color:#333}#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 .mail svg path{fill:#333 !important;pointer-events:none}#WRAPPER>#CONTAINER>section>.inline-box .groups{display:block;margin:1em;color:#333}#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:absolute;top:0;left:calc( 100% - 1.2em - 2*1em );width:1.2em;height:1.2em;margin: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{top:calc( 100% - 1.2em - 2*1em )}#WRAPPER>#CONTAINER>section>.inline-box .link_remove:hover>svg{fill:#d44f18 !important}#WRAPPER>#CONTAINER>section>form{display:inline-block;position:relative;left:50%;margin:.3em 0;padding:1em;border-radius:3px;border-color:#d44f18;box-shadow:0 0 1px #b7b7b7;background-color:#fff;transform:translateX(-50%)}#WRAPPER>#CONTAINER>section>form.valid{border-color:#19C566}#WRAPPER>#CONTAINER>section>form.neutral{border-color:#2193e6}#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:.5em 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:#d44f18}#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:#19C566}#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 button,#WRAPPER>#CONTAINER>section>form button.invalid,#WRAPPER>#CONTAINER>section>form.invalid>button{display:inline-block;position:relative;left:50%;padding:.5em 1em;border-radius:2px;border:1px solid #d44f18;background-color:#fff;color:#d44f18;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.invalid:hover,#WRAPPER>#CONTAINER>section>form button.invalid:focus,#WRAPPER>#CONTAINER>section>form.invalid>button:hover,#WRAPPER>#CONTAINER>section>form.invalid>button:focus{background-color:#d44f18;color:#fff}#WRAPPER>#CONTAINER>section>form button.valid,#WRAPPER>#CONTAINER>section>form.valid>button{border-color:#19C566;color:#19C566}#WRAPPER>#CONTAINER>section>form button.valid:hover,#WRAPPER>#CONTAINER>section>form button.valid:focus,#WRAPPER>#CONTAINER>section>form.valid>button:hover,#WRAPPER>#CONTAINER>section>form.valid>button:focus{background-color:#19C566;color:#fff}#WRAPPER>#CONTAINER>section>form button.neutral,#WRAPPER>#CONTAINER>section>form.neutral>button{border-color:#2193e6;color:#2193e6}#WRAPPER>#CONTAINER>section>form button.neutral:hover,#WRAPPER>#CONTAINER>section>form button.neutral:focus,#WRAPPER>#CONTAINER>section>form.neutral>button:hover,#WRAPPER>#CONTAINER>section>form.neutral>button:focus{background-color:#2193e6;color:#fff}#WRAPPER>#CONTAINER>section>form hr.OR{display:block;position:relative;width:100%;height:0;border:0;border-bottom:1px dashed #d44f18}#WRAPPER>#CONTAINER>section>form hr.OR:before{content:'OU';display:inline-block;position:relative;top:50%;left:50%;padding:0 1em;background-color:#fff;color:#d44f18;transform:translateX(-50%) translatey(-50%)}#WRAPPER>#CONTAINER>section>form .valid>hr.OR,#WRAPPER>#CONTAINER>section>form hr.OR.valid{border-bottom:1px dashed #19C566}#WRAPPER>#CONTAINER>section>form .valid>hr.OR:before,#WRAPPER>#CONTAINER>section>form hr.OR.valid:before{color:#19C566}#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{display:none;flex-grow:1}#WRAPPER>#CONTAINER>section.active{display:block}#WRAPPER>#CONTAINER>section.active.list{display:flex;flex-direction:column}#WRAPPER>#CONTAINER>section.active.list .inline-box{flex:1 1 1}#WRAPPER>#CONTAINER>section>.inline-box{display:inline-block;position:relative;margin:.3em 0;padding:1em;border-radius:3px;box-shadow:0 0 1px #b7b7b7;background-color:#fff}#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}#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:inline-block;color:#333}#WRAPPER>#CONTAINER>section>.inline-box .code svg,#WRAPPER>#CONTAINER>section>.inline-box .mail svg{display:inline-block;position:relative;margin-left:.8em;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 .mail{display:inline-block;color:#333}#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 .mail svg path{fill:#333 !important;pointer-events:none}#WRAPPER>#CONTAINER>section>.inline-box .groups{display:block;margin:1em;color:#333}#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:absolute;top:0;left:calc( 100% - 1.2em - 2*1em );width:1.2em;height:1.2em;margin: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{top:calc( 100% - 1.2em - 2*1em )}#WRAPPER>#CONTAINER>section>.inline-box .link_remove:hover>svg{fill:#d44f18 !important}#WRAPPER>#CONTAINER>section>form{display:inline-block;position:relative;left:50%;margin:.3em 0;padding:1em;border-radius:3px;border-color:#d44f18;box-shadow:0 0 1px #b7b7b7;background-color:#fff;transform:translateX(-50%)}#WRAPPER>#CONTAINER>section>form.valid{border-color:#19C566}#WRAPPER>#CONTAINER>section>form.neutral{border-color:#2193e6}#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:.5em 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:#d44f18}#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:#19C566}#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 button,#WRAPPER>#CONTAINER>section>form button.invalid,#WRAPPER>#CONTAINER>section>form.invalid>button{display:inline-block;position:relative;left:50%;padding:.5em 1em;border-radius:2px;border:1px solid #d44f18;background-color:#d44f18;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.invalid:hover,#WRAPPER>#CONTAINER>section>form button.invalid:focus,#WRAPPER>#CONTAINER>section>form.invalid>button:hover,#WRAPPER>#CONTAINER>section>form.invalid>button:focus{background-color:#fff;color:#d44f18}#WRAPPER>#CONTAINER>section>form button.valid,#WRAPPER>#CONTAINER>section>form.valid>button{border-color:#19C566;background-color:#19C566}#WRAPPER>#CONTAINER>section>form button.valid:hover,#WRAPPER>#CONTAINER>section>form button.valid:focus,#WRAPPER>#CONTAINER>section>form.valid>button:hover,#WRAPPER>#CONTAINER>section>form.valid>button:focus{background-color:#fff;color:#19C566}#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.neutral>button:hover,#WRAPPER>#CONTAINER>section>form.neutral>button:focus{background-color:#fff;color:#2193e6}#WRAPPER>#CONTAINER>section>form hr.OR{display:block;position:relative;width:100%;height:0;border:0;border-bottom:1px dashed #d44f18}#WRAPPER>#CONTAINER>section>form hr.OR:before{content:'OU';display:inline-block;position:relative;top:50%;left:50%;padding:0 1em;background-color:#fff;color:#d44f18;transform:translateX(-50%) translatey(-50%)}#WRAPPER>#CONTAINER>section>form .valid>hr.OR,#WRAPPER>#CONTAINER>section>form hr.OR.valid{border-bottom:1px dashed #19C566}#WRAPPER>#CONTAINER>section>form .valid>hr.OR:before,#WRAPPER>#CONTAINER>section>form hr.OR.valid:before{color:#19C566}#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} /*# sourceMappingURL=container.css.map */ diff --git a/css/container.scss b/css/container.scss index 21c33b1..cff5e59 100755 --- a/css/container.scss +++ b/css/container.scss @@ -296,9 +296,9 @@ border-radius: 2px; border: 1px solid $form-invalid-color; - background-color: #fff; + background-color: $form-invalid-color; - color: $form-invalid-color; + color: #fff; transition: background .4s ease-in-out; @@ -306,8 +306,8 @@ &:hover, &:focus{ - background-color: $form-invalid-color; - color: #fff; + background-color: #fff; + color: $form-invalid-color; } } @@ -317,12 +317,12 @@ &.valid > button{ border-color: $form-valid-color; - color: $form-valid-color; + background-color: $form-valid-color; &:hover, &:focus{ - background-color: $form-valid-color; - color: #fff; + background-color: #fff; + color: $form-valid-color; } } @@ -331,12 +331,12 @@ &.neutral > button{ border-color: $form-neutral-color; - color: $form-neutral-color; + background-color: $form-neutral-color; &:hover, &:focus{ - background-color: $form-neutral-color; - color: #fff; + background-color: #fff; + color: $form-neutral-color; } } diff --git a/todo.md b/todo.md index 95f4cf1..d1e6397 100755 --- a/todo.md +++ b/todo.md @@ -7,6 +7,7 @@ ############ # EN COURS # ############ + - [view/js/users] Suppression d'utilisateur - [view/js/users] Modification d'utilisateur @@ -17,6 +18,7 @@ ######## # FAIT # ######## +- [x] [container.scss] Inversion des etats pour boutons - [x] [container.scss] Modification du temps de transition (.2s -> .4s) - [x] [container.scss] Centrage horizontal des formulaires - [x] [view/user] Prise en compte de pageManager.vars[2] pour la modification