Fixed css (added grey buttons) + Created js PopUp lib + use in admin list to remove one admin
This commit is contained in:
xdrm-brackets
parent
4213d8b132
commit
0fed2ee61e
|
|
@ -12,6 +12,7 @@ $form-valid-color: #27a560;
|
|||
$form-neutral-color: #2193e6;
|
||||
$form-search-color: #5630ed;
|
||||
$form-invalid-color: #d52918;
|
||||
$form-grey-color: #8d8d8d;
|
||||
|
||||
|
||||
/* GESTION DES LONGUEURS */
|
||||
|
|
|
|||
|
|
@ -369,6 +369,7 @@
|
|||
&.list{
|
||||
float: none;
|
||||
margin-left: 50%;
|
||||
-webkit-transform: translateX(-50%);
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
|
|
@ -456,314 +457,6 @@
|
|||
|
||||
|
||||
|
||||
/* [3] Formulaires
|
||||
=========================================================*/
|
||||
& > section > form, .form{
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
left: 50%;
|
||||
margin: .3em 0;
|
||||
padding: 1em;
|
||||
|
||||
border-radius: 3px;
|
||||
border-color: $form-invalid-color;
|
||||
box-shadow: 0 0 1px #b7b7b7;
|
||||
|
||||
background-color: #fff;
|
||||
|
||||
transform: translateX(-50%);
|
||||
|
||||
&#choose-cluster{
|
||||
left: 0;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
&.valid{
|
||||
border-color: $form-valid-color;
|
||||
}
|
||||
|
||||
&.neutral{
|
||||
border-color: $form-neutral-color;
|
||||
}
|
||||
|
||||
&.search{
|
||||
border-color: $form-neutral-color;
|
||||
}
|
||||
|
||||
// Textes centres
|
||||
.edit_search_view,
|
||||
.remove_search_view{
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
|
||||
text-align: center;
|
||||
color: #aaaaaa;
|
||||
|
||||
span{
|
||||
color: #888888;
|
||||
}
|
||||
}
|
||||
|
||||
span.error-msg{
|
||||
display: inline-block;
|
||||
color: #F03C3C;
|
||||
font-size: 0.7em;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
/* (1) Champs de texte */
|
||||
input[type=text],
|
||||
input[type=mail],
|
||||
input[type=password],
|
||||
select,
|
||||
&.invalid > input[type=text],
|
||||
&.invalid > input[type=mail],
|
||||
&.invalid > input[type=password],
|
||||
&.invalid > select,
|
||||
input.invalid[type=text],
|
||||
input.invalid[type=mail],
|
||||
input.invalid[type=password],
|
||||
select.invalid{
|
||||
display: inline-block;
|
||||
margin: 1em 0;
|
||||
padding: .7em 1em;
|
||||
|
||||
border-radius: 3px;
|
||||
border: 1px solid #d7dde8;
|
||||
|
||||
color: #2f3033;
|
||||
|
||||
transition: border .4s ease-in-out;
|
||||
|
||||
&:focus,
|
||||
&:hover{
|
||||
border-color: $form-invalid-color;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
select{
|
||||
width: 100%;
|
||||
display: block;
|
||||
background: #fff;
|
||||
|
||||
option{
|
||||
padding: .5em;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Champs valides
|
||||
.valid > input[type=text],
|
||||
.valid > input[type=mail],
|
||||
.valid > input[type=password],
|
||||
.valid > select,
|
||||
input.valid[type=text],
|
||||
input.valid[type=mail],
|
||||
input.valid[type=password],
|
||||
select.valid{
|
||||
&:focus,
|
||||
&:hover{
|
||||
border-color: $form-valid-color;
|
||||
}
|
||||
}
|
||||
|
||||
// Champs neutres
|
||||
.neutral > input[type=text],
|
||||
.neutral > input[type=mail],
|
||||
.neutral > input[type=password],
|
||||
.neutral > select,
|
||||
input.neutral[type=text],
|
||||
input.neutral[type=mail],
|
||||
input.neutral[type=password],
|
||||
select.neutral{
|
||||
&:focus,
|
||||
&:hover{
|
||||
border-color: $form-neutral-color;
|
||||
}
|
||||
}
|
||||
|
||||
// Champs neutres
|
||||
.search > input[type=text],
|
||||
.search > input[type=mail],
|
||||
.search > input[type=password],
|
||||
.search > select,
|
||||
input.search[type=text],
|
||||
input.search[type=mail],
|
||||
input.search[type=password]{
|
||||
&:focus,
|
||||
&:hover{
|
||||
border-color: $form-search-color;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* (2) Boutons */
|
||||
button,
|
||||
button.invalid,
|
||||
.invalid > button{
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
left: 50%;
|
||||
|
||||
padding: .7em 1em;
|
||||
|
||||
border-radius: 3px;
|
||||
border: 1px solid $form-invalid-color;
|
||||
|
||||
background: $form-invalid-color center center no-repeat;
|
||||
|
||||
color: #fff;
|
||||
|
||||
transition: background .4s ease-in-out;
|
||||
|
||||
transform: translateX(-50%);
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:disabled{
|
||||
background-color: #fff;
|
||||
color: $form-invalid-color;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Boutons valides
|
||||
button.valid,
|
||||
.valid > button{
|
||||
border-color: $form-valid-color;
|
||||
|
||||
background-color: $form-valid-color;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:disabled{
|
||||
background-color: #fff;
|
||||
color: $form-valid-color;
|
||||
}
|
||||
}
|
||||
|
||||
// Boutons neutres
|
||||
button.neutral,
|
||||
.neutral > button{
|
||||
border-color: $form-neutral-color;
|
||||
|
||||
background-color: $form-neutral-color;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:disabled{
|
||||
background-color: #fff;
|
||||
color: $form-neutral-color;
|
||||
}
|
||||
}
|
||||
|
||||
// Boutons recherche
|
||||
button.search,
|
||||
.search > button{
|
||||
border-color: $form-search-color;
|
||||
|
||||
background-color: $form-search-color;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:disabled{
|
||||
background-color: #fff;
|
||||
color: $form-search-color;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Boutons quand action validee
|
||||
.invalid > button.active,
|
||||
button.invalid.active,
|
||||
button.active{
|
||||
background-color: #fff;
|
||||
background-image: url('/src/static/container/active@#{$rd-form-invalid-color}.svg') !important;
|
||||
background-size: 1em auto;
|
||||
|
||||
color: transparent !important;
|
||||
}
|
||||
|
||||
|
||||
button.valid.active,
|
||||
.valid > button.active{
|
||||
background-image: url('/src/static/container/active@#{$rd-form-valid-color}.svg') !important;
|
||||
}
|
||||
button.neutral.active,
|
||||
.neutral > button.active{
|
||||
background-image: url('/src/static/container/active@#{$rd-form-neutral-color}.svg') !important;
|
||||
}
|
||||
button.search.active,
|
||||
.search > button.active{
|
||||
background-image: url('/src/static/container/active@#{$rd-form-search-color}.svg') !important;
|
||||
}
|
||||
|
||||
|
||||
|
||||
// "OU" separant les boutons
|
||||
hr.OR[data-label]{
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 0;
|
||||
|
||||
border: 0;
|
||||
border-bottom: 1px dashed $form-invalid-color;
|
||||
|
||||
&:before{
|
||||
content: attr(data-label);
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
padding: 0 1em;
|
||||
|
||||
background-color: #fff;
|
||||
|
||||
color: $form-invalid-color;
|
||||
|
||||
transform: translateX(-50%) translatey(-50%);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// "OU" valide
|
||||
.valid > hr.OR,
|
||||
hr.OR.valid{
|
||||
border-bottom: 1px dashed $form-valid-color;
|
||||
&:before{
|
||||
color: $form-valid-color;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// "OU" neutre
|
||||
.neutral > hr.OR,
|
||||
hr.OR.neutral{
|
||||
border-bottom: 1px dashed $form-neutral-color;
|
||||
&:before{
|
||||
color: $form-neutral-color;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// "OU" recherche
|
||||
.search > hr.OR,
|
||||
hr.OR.search{
|
||||
border-bottom: 1px dashed $form-search-color;
|
||||
&:before{
|
||||
color: $form-search-color;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,324 @@
|
|||
@import 'constants';
|
||||
|
||||
/* [3] Formulaires
|
||||
=========================================================*/
|
||||
section > form, .form{
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
left: 50%;
|
||||
margin: .3em 0;
|
||||
padding: 1em;
|
||||
|
||||
border-radius: 3px;
|
||||
border-color: $form-invalid-color;
|
||||
box-shadow: 0 0 1px #b7b7b7;
|
||||
|
||||
background-color: #fff;
|
||||
|
||||
-webkit-transform: translateX(-50%);
|
||||
transform: translateX(-50%);
|
||||
|
||||
&#choose-cluster{
|
||||
left: 0;
|
||||
-webkit-transform: none;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
&.valid{
|
||||
border-color: $form-valid-color;
|
||||
}
|
||||
|
||||
&.neutral{
|
||||
border-color: $form-neutral-color;
|
||||
}
|
||||
|
||||
&.search{
|
||||
border-color: $form-neutral-color;
|
||||
}
|
||||
|
||||
// Textes centres
|
||||
.edit_search_view,
|
||||
.remove_search_view{
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
|
||||
text-align: center;
|
||||
color: #aaaaaa;
|
||||
|
||||
span{
|
||||
color: #888888;
|
||||
}
|
||||
}
|
||||
|
||||
span.error-msg{
|
||||
display: inline-block;
|
||||
color: #F03C3C;
|
||||
font-size: 0.7em;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
/* (1) Champs de texte */
|
||||
input[type=text],
|
||||
input[type=mail],
|
||||
input[type=password],
|
||||
select,
|
||||
.invalid > input[type=text],
|
||||
.invalid > input[type=mail],
|
||||
.invalid > input[type=password],
|
||||
.invalid > select,
|
||||
input.invalid[type=text],
|
||||
input.invalid[type=mail],
|
||||
input.invalid[type=password],
|
||||
select.invalid{
|
||||
display: inline-block;
|
||||
margin: 1em 0;
|
||||
padding: .7em 1em;
|
||||
|
||||
border-radius: 3px;
|
||||
border: 1px solid #d7dde8;
|
||||
|
||||
color: #2f3033;
|
||||
|
||||
transition: border .4s ease-in-out;
|
||||
|
||||
&:focus,
|
||||
&:hover{
|
||||
border-color: $form-invalid-color;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
select{
|
||||
width: 100%;
|
||||
display: block;
|
||||
background: #fff;
|
||||
|
||||
option{
|
||||
padding: .5em;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Champs valides
|
||||
.valid > input[type=text],
|
||||
.valid > input[type=mail],
|
||||
.valid > input[type=password],
|
||||
.valid > select,
|
||||
input.valid[type=text],
|
||||
input.valid[type=mail],
|
||||
input.valid[type=password],
|
||||
select.valid{
|
||||
&:focus,
|
||||
&:hover{
|
||||
border-color: $form-valid-color;
|
||||
}
|
||||
}
|
||||
|
||||
// Champs neutres
|
||||
.neutral > input[type=text],
|
||||
.neutral > input[type=mail],
|
||||
.neutral > input[type=password],
|
||||
.neutral > select,
|
||||
input.neutral[type=text],
|
||||
input.neutral[type=mail],
|
||||
input.neutral[type=password],
|
||||
select.neutral{
|
||||
&:focus,
|
||||
&:hover{
|
||||
border-color: $form-neutral-color;
|
||||
}
|
||||
}
|
||||
|
||||
// Champs neutres
|
||||
.search > input[type=text],
|
||||
.search > input[type=mail],
|
||||
.search > input[type=password],
|
||||
.search > select,
|
||||
input.search[type=text],
|
||||
input.search[type=mail],
|
||||
input.search[type=password]{
|
||||
&:focus,
|
||||
&:hover{
|
||||
border-color: $form-search-color;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* (2) Boutons */
|
||||
button,
|
||||
button.invalid,
|
||||
.invalid > button{
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
left: 50%;
|
||||
|
||||
padding: .7em 1em;
|
||||
|
||||
border-radius: 3px;
|
||||
border: 1px solid $form-invalid-color;
|
||||
|
||||
background: $form-invalid-color center center no-repeat;
|
||||
|
||||
color: #fff;
|
||||
|
||||
transition: background .4s ease-in-out;
|
||||
|
||||
-webkit-transform: translateX(-50%);
|
||||
transform: translateX(-50%);
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:disabled{
|
||||
background-color: #fff;
|
||||
color: $form-invalid-color;
|
||||
}
|
||||
}
|
||||
|
||||
// Boutons grisés
|
||||
button.grey,
|
||||
.grey > button{
|
||||
border-color: $form-grey-color;
|
||||
|
||||
background-color: $form-grey-color;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:disabled{
|
||||
background-color: #fff;
|
||||
color: $form-grey-color;
|
||||
}
|
||||
}
|
||||
|
||||
// Boutons valides
|
||||
button.valid,
|
||||
.valid > button{
|
||||
border-color: $form-valid-color;
|
||||
|
||||
background-color: $form-valid-color;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:disabled{
|
||||
background-color: #fff;
|
||||
color: $form-valid-color;
|
||||
}
|
||||
}
|
||||
|
||||
// Boutons neutres
|
||||
button.neutral,
|
||||
.neutral > button{
|
||||
border-color: $form-neutral-color;
|
||||
|
||||
background-color: $form-neutral-color;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:disabled{
|
||||
background-color: #fff;
|
||||
color: $form-neutral-color;
|
||||
}
|
||||
}
|
||||
|
||||
// Boutons recherche
|
||||
button.search,
|
||||
.search > button{
|
||||
border-color: $form-search-color;
|
||||
|
||||
background-color: $form-search-color;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:disabled{
|
||||
background-color: #fff;
|
||||
color: $form-search-color;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Boutons quand action validee
|
||||
.invalid > button.active,
|
||||
button.invalid.active,
|
||||
button.active{
|
||||
background-color: #fff;
|
||||
background-image: url('/src/static/container/active@#{$rd-form-invalid-color}.svg') !important;
|
||||
background-size: 1em auto;
|
||||
|
||||
color: transparent !important;
|
||||
}
|
||||
|
||||
|
||||
button.valid.active,
|
||||
.valid > button.active{
|
||||
background-image: url('/src/static/container/active@#{$rd-form-valid-color}.svg') !important;
|
||||
}
|
||||
button.neutral.active,
|
||||
.neutral > button.active{
|
||||
background-image: url('/src/static/container/active@#{$rd-form-neutral-color}.svg') !important;
|
||||
}
|
||||
button.search.active,
|
||||
.search > button.active{
|
||||
background-image: url('/src/static/container/active@#{$rd-form-search-color}.svg') !important;
|
||||
}
|
||||
|
||||
|
||||
|
||||
// "OU" separant les boutons
|
||||
hr.OR[data-label]{
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 0;
|
||||
|
||||
border: 0;
|
||||
border-bottom: 1px dashed $form-invalid-color;
|
||||
|
||||
&:before{
|
||||
content: attr(data-label);
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
padding: 0 1em;
|
||||
|
||||
background-color: #fff;
|
||||
|
||||
color: $form-invalid-color;
|
||||
|
||||
-webkit-transform: translateX(-50%) translatey(-50%);
|
||||
transform: translateX(-50%) translatey(-50%);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// "OU" valide
|
||||
.valid > hr.OR,
|
||||
hr.OR.valid{
|
||||
border-bottom: 1px dashed $form-valid-color;
|
||||
&:before{
|
||||
color: $form-valid-color;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// "OU" neutre
|
||||
.neutral > hr.OR,
|
||||
hr.OR.neutral{
|
||||
border-bottom: 1px dashed $form-neutral-color;
|
||||
&:before{
|
||||
color: $form-neutral-color;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// "OU" recherche
|
||||
.search > hr.OR,
|
||||
hr.OR.search{
|
||||
border-bottom: 1px dashed $form-search-color;
|
||||
&:before{
|
||||
color: $form-search-color;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -71,4 +71,108 @@
|
|||
overflow-x: none;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/* [4] Popup background - window
|
||||
==========================================*/
|
||||
& > #POPUP{
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
min-width: 50%;
|
||||
max-width: 50%;
|
||||
min-height: 30%;
|
||||
max-height: 50%;
|
||||
|
||||
border-radius: 5px;
|
||||
|
||||
background: #fff;
|
||||
color: #34495e;
|
||||
|
||||
box-shadow: -10px 10px 0 rgba(26, 33, 40, .8);
|
||||
|
||||
-webkit-transform: translateX(-50%) translateY(-50%);
|
||||
transform: translateX(-50%) translateY(-50%);
|
||||
|
||||
z-index: 101;
|
||||
|
||||
&.active{
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
& > .header{
|
||||
display: block;
|
||||
position: relative;
|
||||
width: calc( 100% - 2*1em );
|
||||
|
||||
padding: 1em;
|
||||
|
||||
border-radius: 5px 5px 0 0;
|
||||
border-bottom: 2px solid #ecf0f1;
|
||||
|
||||
font-size: 1.1em;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
& > .body{
|
||||
display: block;
|
||||
position: relative;
|
||||
width: calc( 100% - 2*1em );
|
||||
|
||||
padding: 1em;
|
||||
|
||||
b, strong{
|
||||
color: #5630ed;
|
||||
}
|
||||
}
|
||||
|
||||
& > .footer{
|
||||
display: flex;
|
||||
position: relative;
|
||||
width: calc( 100% - 2*1em );
|
||||
|
||||
padding: 1em;
|
||||
|
||||
background-color: #ecf0f1;
|
||||
|
||||
border-radius: 0 0 5px 5px;
|
||||
|
||||
// flex props.
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-end;
|
||||
|
||||
& button{
|
||||
left: auto;
|
||||
margin: 0 1em;
|
||||
-webkit-transform: none;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
& > #POPUP-BG{
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
background: #29333f;
|
||||
background: rgba(41, 51, 63, .8);
|
||||
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
& #POPUP.active ~ #POPUP-BG{
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -87,6 +87,7 @@
|
|||
box-shadow: inset 0 0 .5em #eee;
|
||||
|
||||
&:hover:after{
|
||||
-webkit-transform: scaleX(1);
|
||||
transform: scaleX(1);
|
||||
color: #fff;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,10 +11,6 @@
|
|||
=========================================================*/
|
||||
/* [2-2] INLINE-ROW pour afficher des lignes
|
||||
=========================================================*/
|
||||
/* [3] Formulaires
|
||||
=========================================================*/
|
||||
/* (1) Champs de texte */
|
||||
/* (2) Boutons */
|
||||
}
|
||||
|
||||
#WRAPPER > #CONTAINER > section {
|
||||
|
|
@ -576,6 +572,7 @@
|
|||
#WRAPPER > #CONTAINER > section > .inline-row .link_remove.list {
|
||||
float: none;
|
||||
margin-left: 50%;
|
||||
-webkit-transform: translateX(-50%);
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
|
|
@ -642,309 +639,6 @@
|
|||
width: 5em;
|
||||
}
|
||||
|
||||
#WRAPPER > #CONTAINER > section > form, #WRAPPER > #CONTAINER .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#choose-cluster, #WRAPPER > #CONTAINER .form#choose-cluster {
|
||||
left: 0;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
#WRAPPER > #CONTAINER > section > form.valid, #WRAPPER > #CONTAINER .form.valid {
|
||||
border-color: #27a560;
|
||||
}
|
||||
|
||||
#WRAPPER > #CONTAINER > section > form.neutral, #WRAPPER > #CONTAINER .form.neutral {
|
||||
border-color: #2193e6;
|
||||
}
|
||||
|
||||
#WRAPPER > #CONTAINER > section > form.search, #WRAPPER > #CONTAINER .form.search {
|
||||
border-color: #2193e6;
|
||||
}
|
||||
|
||||
#WRAPPER > #CONTAINER > section > form .edit_search_view,
|
||||
#WRAPPER > #CONTAINER > section > form .remove_search_view, #WRAPPER > #CONTAINER .form .edit_search_view,
|
||||
#WRAPPER > #CONTAINER .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, #WRAPPER > #CONTAINER .form .edit_search_view span,
|
||||
#WRAPPER > #CONTAINER .form .remove_search_view span {
|
||||
color: #888888;
|
||||
}
|
||||
|
||||
#WRAPPER > #CONTAINER > section > form span.error-msg, #WRAPPER > #CONTAINER .form span.error-msg {
|
||||
display: inline-block;
|
||||
color: #F03C3C;
|
||||
font-size: 0.7em;
|
||||
}
|
||||
|
||||
#WRAPPER > #CONTAINER input[type=text],
|
||||
#WRAPPER > #CONTAINER input[type=mail],
|
||||
#WRAPPER > #CONTAINER input[type=password],
|
||||
#WRAPPER > #CONTAINER select,
|
||||
#WRAPPER > #CONTAINER.invalid > input[type=text],
|
||||
#WRAPPER > #CONTAINER.invalid > input[type=mail],
|
||||
#WRAPPER > #CONTAINER.invalid > input[type=password],
|
||||
#WRAPPER > #CONTAINER.invalid > select,
|
||||
#WRAPPER > #CONTAINER input.invalid[type=text],
|
||||
#WRAPPER > #CONTAINER input.invalid[type=mail],
|
||||
#WRAPPER > #CONTAINER input.invalid[type=password],
|
||||
#WRAPPER > #CONTAINER select.invalid {
|
||||
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 input[type=text]:focus, #WRAPPER > #CONTAINER input[type=text]:hover,
|
||||
#WRAPPER > #CONTAINER input[type=mail]:focus,
|
||||
#WRAPPER > #CONTAINER input[type=mail]:hover,
|
||||
#WRAPPER > #CONTAINER input[type=password]:focus,
|
||||
#WRAPPER > #CONTAINER input[type=password]:hover,
|
||||
#WRAPPER > #CONTAINER select:focus,
|
||||
#WRAPPER > #CONTAINER select:hover,
|
||||
#WRAPPER > #CONTAINER.invalid > input[type=text]:focus,
|
||||
#WRAPPER > #CONTAINER.invalid > input[type=text]:hover,
|
||||
#WRAPPER > #CONTAINER.invalid > input[type=mail]:focus,
|
||||
#WRAPPER > #CONTAINER.invalid > input[type=mail]:hover,
|
||||
#WRAPPER > #CONTAINER.invalid > input[type=password]:focus,
|
||||
#WRAPPER > #CONTAINER.invalid > input[type=password]:hover,
|
||||
#WRAPPER > #CONTAINER.invalid > select:focus,
|
||||
#WRAPPER > #CONTAINER.invalid > select:hover,
|
||||
#WRAPPER > #CONTAINER input.invalid[type=text]:focus,
|
||||
#WRAPPER > #CONTAINER input.invalid[type=text]:hover,
|
||||
#WRAPPER > #CONTAINER input.invalid[type=mail]:focus,
|
||||
#WRAPPER > #CONTAINER input.invalid[type=mail]:hover,
|
||||
#WRAPPER > #CONTAINER input.invalid[type=password]:focus,
|
||||
#WRAPPER > #CONTAINER input.invalid[type=password]:hover,
|
||||
#WRAPPER > #CONTAINER select.invalid:focus,
|
||||
#WRAPPER > #CONTAINER select.invalid:hover {
|
||||
border-color: #d52918;
|
||||
}
|
||||
|
||||
#WRAPPER > #CONTAINER select {
|
||||
width: 100%;
|
||||
display: block;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
#WRAPPER > #CONTAINER select option {
|
||||
padding: .5em;
|
||||
}
|
||||
|
||||
#WRAPPER > #CONTAINER .valid > input[type=text]:focus, #WRAPPER > #CONTAINER .valid > input[type=text]:hover,
|
||||
#WRAPPER > #CONTAINER .valid > input[type=mail]:focus,
|
||||
#WRAPPER > #CONTAINER .valid > input[type=mail]:hover,
|
||||
#WRAPPER > #CONTAINER .valid > input[type=password]:focus,
|
||||
#WRAPPER > #CONTAINER .valid > input[type=password]:hover,
|
||||
#WRAPPER > #CONTAINER .valid > select:focus,
|
||||
#WRAPPER > #CONTAINER .valid > select:hover,
|
||||
#WRAPPER > #CONTAINER input.valid[type=text]:focus,
|
||||
#WRAPPER > #CONTAINER input.valid[type=text]:hover,
|
||||
#WRAPPER > #CONTAINER input.valid[type=mail]:focus,
|
||||
#WRAPPER > #CONTAINER input.valid[type=mail]:hover,
|
||||
#WRAPPER > #CONTAINER input.valid[type=password]:focus,
|
||||
#WRAPPER > #CONTAINER input.valid[type=password]:hover,
|
||||
#WRAPPER > #CONTAINER select.valid:focus,
|
||||
#WRAPPER > #CONTAINER select.valid:hover {
|
||||
border-color: #27a560;
|
||||
}
|
||||
|
||||
#WRAPPER > #CONTAINER .neutral > input[type=text]:focus, #WRAPPER > #CONTAINER .neutral > input[type=text]:hover,
|
||||
#WRAPPER > #CONTAINER .neutral > input[type=mail]:focus,
|
||||
#WRAPPER > #CONTAINER .neutral > input[type=mail]:hover,
|
||||
#WRAPPER > #CONTAINER .neutral > input[type=password]:focus,
|
||||
#WRAPPER > #CONTAINER .neutral > input[type=password]:hover,
|
||||
#WRAPPER > #CONTAINER .neutral > select:focus,
|
||||
#WRAPPER > #CONTAINER .neutral > select:hover,
|
||||
#WRAPPER > #CONTAINER input.neutral[type=text]:focus,
|
||||
#WRAPPER > #CONTAINER input.neutral[type=text]:hover,
|
||||
#WRAPPER > #CONTAINER input.neutral[type=mail]:focus,
|
||||
#WRAPPER > #CONTAINER input.neutral[type=mail]:hover,
|
||||
#WRAPPER > #CONTAINER input.neutral[type=password]:focus,
|
||||
#WRAPPER > #CONTAINER input.neutral[type=password]:hover,
|
||||
#WRAPPER > #CONTAINER select.neutral:focus,
|
||||
#WRAPPER > #CONTAINER select.neutral:hover {
|
||||
border-color: #2193e6;
|
||||
}
|
||||
|
||||
#WRAPPER > #CONTAINER .search > input[type=text]:focus, #WRAPPER > #CONTAINER .search > input[type=text]:hover,
|
||||
#WRAPPER > #CONTAINER .search > input[type=mail]:focus,
|
||||
#WRAPPER > #CONTAINER .search > input[type=mail]:hover,
|
||||
#WRAPPER > #CONTAINER .search > input[type=password]:focus,
|
||||
#WRAPPER > #CONTAINER .search > input[type=password]:hover,
|
||||
#WRAPPER > #CONTAINER .search > select:focus,
|
||||
#WRAPPER > #CONTAINER .search > select:hover,
|
||||
#WRAPPER > #CONTAINER input.search[type=text]:focus,
|
||||
#WRAPPER > #CONTAINER input.search[type=text]:hover,
|
||||
#WRAPPER > #CONTAINER input.search[type=mail]:focus,
|
||||
#WRAPPER > #CONTAINER input.search[type=mail]:hover,
|
||||
#WRAPPER > #CONTAINER input.search[type=password]:focus,
|
||||
#WRAPPER > #CONTAINER input.search[type=password]:hover {
|
||||
border-color: #5630ed;
|
||||
}
|
||||
|
||||
#WRAPPER > #CONTAINER button,
|
||||
#WRAPPER > #CONTAINER button.invalid,
|
||||
#WRAPPER > #CONTAINER .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 button:hover, #WRAPPER > #CONTAINER button:focus, #WRAPPER > #CONTAINER button:disabled,
|
||||
#WRAPPER > #CONTAINER button.invalid:hover,
|
||||
#WRAPPER > #CONTAINER button.invalid:focus,
|
||||
#WRAPPER > #CONTAINER button.invalid:disabled,
|
||||
#WRAPPER > #CONTAINER .invalid > button:hover,
|
||||
#WRAPPER > #CONTAINER .invalid > button:focus,
|
||||
#WRAPPER > #CONTAINER .invalid > button:disabled {
|
||||
background-color: #fff;
|
||||
color: #d52918;
|
||||
}
|
||||
|
||||
#WRAPPER > #CONTAINER button.valid,
|
||||
#WRAPPER > #CONTAINER .valid > button {
|
||||
border-color: #27a560;
|
||||
background-color: #27a560;
|
||||
}
|
||||
|
||||
#WRAPPER > #CONTAINER button.valid:hover, #WRAPPER > #CONTAINER button.valid:focus, #WRAPPER > #CONTAINER button.valid:disabled,
|
||||
#WRAPPER > #CONTAINER .valid > button:hover,
|
||||
#WRAPPER > #CONTAINER .valid > button:focus,
|
||||
#WRAPPER > #CONTAINER .valid > button:disabled {
|
||||
background-color: #fff;
|
||||
color: #27a560;
|
||||
}
|
||||
|
||||
#WRAPPER > #CONTAINER button.neutral,
|
||||
#WRAPPER > #CONTAINER .neutral > button {
|
||||
border-color: #2193e6;
|
||||
background-color: #2193e6;
|
||||
}
|
||||
|
||||
#WRAPPER > #CONTAINER button.neutral:hover, #WRAPPER > #CONTAINER button.neutral:focus, #WRAPPER > #CONTAINER button.neutral:disabled,
|
||||
#WRAPPER > #CONTAINER .neutral > button:hover,
|
||||
#WRAPPER > #CONTAINER .neutral > button:focus,
|
||||
#WRAPPER > #CONTAINER .neutral > button:disabled {
|
||||
background-color: #fff;
|
||||
color: #2193e6;
|
||||
}
|
||||
|
||||
#WRAPPER > #CONTAINER button.search,
|
||||
#WRAPPER > #CONTAINER .search > button {
|
||||
border-color: #5630ed;
|
||||
background-color: #5630ed;
|
||||
}
|
||||
|
||||
#WRAPPER > #CONTAINER button.search:hover, #WRAPPER > #CONTAINER button.search:focus, #WRAPPER > #CONTAINER button.search:disabled,
|
||||
#WRAPPER > #CONTAINER .search > button:hover,
|
||||
#WRAPPER > #CONTAINER .search > button:focus,
|
||||
#WRAPPER > #CONTAINER .search > button:disabled {
|
||||
background-color: #fff;
|
||||
color: #5630ed;
|
||||
}
|
||||
|
||||
#WRAPPER > #CONTAINER .invalid > button.active,
|
||||
#WRAPPER > #CONTAINER button.invalid.active,
|
||||
#WRAPPER > #CONTAINER button.active {
|
||||
background-color: #fff;
|
||||
background-image: url("/src/static/container/active@d52918.svg") !important;
|
||||
background-size: 1em auto;
|
||||
color: transparent !important;
|
||||
}
|
||||
|
||||
#WRAPPER > #CONTAINER button.valid.active,
|
||||
#WRAPPER > #CONTAINER .valid > button.active {
|
||||
background-image: url("/src/static/container/active@27a560.svg") !important;
|
||||
}
|
||||
|
||||
#WRAPPER > #CONTAINER button.neutral.active,
|
||||
#WRAPPER > #CONTAINER .neutral > button.active {
|
||||
background-image: url("/src/static/container/active@2193e6.svg") !important;
|
||||
}
|
||||
|
||||
#WRAPPER > #CONTAINER button.search.active,
|
||||
#WRAPPER > #CONTAINER .search > button.active {
|
||||
background-image: url("/src/static/container/active@5630ed.svg") !important;
|
||||
}
|
||||
|
||||
#WRAPPER > #CONTAINER hr.OR[data-label] {
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 0;
|
||||
border: 0;
|
||||
border-bottom: 1px dashed #d52918;
|
||||
}
|
||||
|
||||
#WRAPPER > #CONTAINER 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 .valid > hr.OR,
|
||||
#WRAPPER > #CONTAINER hr.OR.valid {
|
||||
border-bottom: 1px dashed #27a560;
|
||||
}
|
||||
|
||||
#WRAPPER > #CONTAINER .valid > hr.OR:before,
|
||||
#WRAPPER > #CONTAINER hr.OR.valid:before {
|
||||
color: #27a560;
|
||||
}
|
||||
|
||||
#WRAPPER > #CONTAINER .neutral > hr.OR,
|
||||
#WRAPPER > #CONTAINER hr.OR.neutral {
|
||||
border-bottom: 1px dashed #2193e6;
|
||||
}
|
||||
|
||||
#WRAPPER > #CONTAINER .neutral > hr.OR:before,
|
||||
#WRAPPER > #CONTAINER hr.OR.neutral:before {
|
||||
color: #2193e6;
|
||||
}
|
||||
|
||||
#WRAPPER > #CONTAINER .search > hr.OR,
|
||||
#WRAPPER > #CONTAINER hr.OR.search {
|
||||
border-bottom: 1px dashed #5630ed;
|
||||
}
|
||||
|
||||
#WRAPPER > #CONTAINER .search > hr.OR:before,
|
||||
#WRAPPER > #CONTAINER hr.OR.search:before {
|
||||
color: #5630ed;
|
||||
}
|
||||
|
||||
/* [4] Tableau à cocher
|
||||
=========================================================*/
|
||||
article.check-table {
|
||||
|
|
|
|||
|
|
@ -1,3 +1,332 @@
|
|||
/* No CSS */
|
||||
/* COULEUR DU THEME */
|
||||
/* COULEUR DU SOUS-MENU */
|
||||
/* COULEUR DES ERREURS */
|
||||
/* FORMULAIRES */
|
||||
/* GESTION DES LONGUEURS */
|
||||
/* [3] Formulaires
|
||||
=========================================================*/
|
||||
section > form, .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;
|
||||
-webkit-transform: translateX(-50%);
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
section > form#choose-cluster, .form#choose-cluster {
|
||||
left: 0;
|
||||
-webkit-transform: none;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
section > form.valid, .form.valid {
|
||||
border-color: #27a560;
|
||||
}
|
||||
|
||||
section > form.neutral, .form.neutral {
|
||||
border-color: #2193e6;
|
||||
}
|
||||
|
||||
section > form.search, .form.search {
|
||||
border-color: #2193e6;
|
||||
}
|
||||
|
||||
section > form .edit_search_view,
|
||||
section > form .remove_search_view, .form .edit_search_view,
|
||||
.form .remove_search_view {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
color: #aaaaaa;
|
||||
}
|
||||
|
||||
section > form .edit_search_view span,
|
||||
section > form .remove_search_view span, .form .edit_search_view span,
|
||||
.form .remove_search_view span {
|
||||
color: #888888;
|
||||
}
|
||||
|
||||
section > form span.error-msg, .form span.error-msg {
|
||||
display: inline-block;
|
||||
color: #F03C3C;
|
||||
font-size: 0.7em;
|
||||
}
|
||||
|
||||
/* (1) Champs de texte */
|
||||
input[type=text],
|
||||
input[type=mail],
|
||||
input[type=password],
|
||||
select,
|
||||
.invalid > input[type=text],
|
||||
.invalid > input[type=mail],
|
||||
.invalid > input[type=password],
|
||||
.invalid > select,
|
||||
input.invalid[type=text],
|
||||
input.invalid[type=mail],
|
||||
input.invalid[type=password],
|
||||
select.invalid {
|
||||
display: inline-block;
|
||||
margin: 1em 0;
|
||||
padding: .7em 1em;
|
||||
border-radius: 3px;
|
||||
border: 1px solid #d7dde8;
|
||||
color: #2f3033;
|
||||
transition: border .4s ease-in-out;
|
||||
}
|
||||
|
||||
input[type=text]:focus, input[type=text]:hover,
|
||||
input[type=mail]:focus,
|
||||
input[type=mail]:hover,
|
||||
input[type=password]:focus,
|
||||
input[type=password]:hover,
|
||||
select:focus,
|
||||
select:hover,
|
||||
.invalid > input[type=text]:focus,
|
||||
.invalid > input[type=text]:hover,
|
||||
.invalid > input[type=mail]:focus,
|
||||
.invalid > input[type=mail]:hover,
|
||||
.invalid > input[type=password]:focus,
|
||||
.invalid > input[type=password]:hover,
|
||||
.invalid > select:focus,
|
||||
.invalid > select:hover,
|
||||
input.invalid[type=text]:focus,
|
||||
input.invalid[type=text]:hover,
|
||||
input.invalid[type=mail]:focus,
|
||||
input.invalid[type=mail]:hover,
|
||||
input.invalid[type=password]:focus,
|
||||
input.invalid[type=password]:hover,
|
||||
select.invalid:focus,
|
||||
select.invalid:hover {
|
||||
border-color: #d52918;
|
||||
}
|
||||
|
||||
select {
|
||||
width: 100%;
|
||||
display: block;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
select option {
|
||||
padding: .5em;
|
||||
}
|
||||
|
||||
.valid > input[type=text]:focus, .valid > input[type=text]:hover,
|
||||
.valid > input[type=mail]:focus,
|
||||
.valid > input[type=mail]:hover,
|
||||
.valid > input[type=password]:focus,
|
||||
.valid > input[type=password]:hover,
|
||||
.valid > select:focus,
|
||||
.valid > select:hover,
|
||||
input.valid[type=text]:focus,
|
||||
input.valid[type=text]:hover,
|
||||
input.valid[type=mail]:focus,
|
||||
input.valid[type=mail]:hover,
|
||||
input.valid[type=password]:focus,
|
||||
input.valid[type=password]:hover,
|
||||
select.valid:focus,
|
||||
select.valid:hover {
|
||||
border-color: #27a560;
|
||||
}
|
||||
|
||||
.neutral > input[type=text]:focus, .neutral > input[type=text]:hover,
|
||||
.neutral > input[type=mail]:focus,
|
||||
.neutral > input[type=mail]:hover,
|
||||
.neutral > input[type=password]:focus,
|
||||
.neutral > input[type=password]:hover,
|
||||
.neutral > select:focus,
|
||||
.neutral > select:hover,
|
||||
input.neutral[type=text]:focus,
|
||||
input.neutral[type=text]:hover,
|
||||
input.neutral[type=mail]:focus,
|
||||
input.neutral[type=mail]:hover,
|
||||
input.neutral[type=password]:focus,
|
||||
input.neutral[type=password]:hover,
|
||||
select.neutral:focus,
|
||||
select.neutral:hover {
|
||||
border-color: #2193e6;
|
||||
}
|
||||
|
||||
.search > input[type=text]:focus, .search > input[type=text]:hover,
|
||||
.search > input[type=mail]:focus,
|
||||
.search > input[type=mail]:hover,
|
||||
.search > input[type=password]:focus,
|
||||
.search > input[type=password]:hover,
|
||||
.search > select:focus,
|
||||
.search > select:hover,
|
||||
input.search[type=text]:focus,
|
||||
input.search[type=text]:hover,
|
||||
input.search[type=mail]:focus,
|
||||
input.search[type=mail]:hover,
|
||||
input.search[type=password]:focus,
|
||||
input.search[type=password]:hover {
|
||||
border-color: #5630ed;
|
||||
}
|
||||
|
||||
/* (2) Boutons */
|
||||
button,
|
||||
button.invalid,
|
||||
.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;
|
||||
-webkit-transform: translateX(-50%);
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
button:hover, button:focus, button:disabled,
|
||||
button.invalid:hover,
|
||||
button.invalid:focus,
|
||||
button.invalid:disabled,
|
||||
.invalid > button:hover,
|
||||
.invalid > button:focus,
|
||||
.invalid > button:disabled {
|
||||
background-color: #fff;
|
||||
color: #d52918;
|
||||
}
|
||||
|
||||
button.grey,
|
||||
.grey > button {
|
||||
border-color: #8d8d8d;
|
||||
background-color: #8d8d8d;
|
||||
}
|
||||
|
||||
button.grey:hover, button.grey:focus, button.grey:disabled,
|
||||
.grey > button:hover,
|
||||
.grey > button:focus,
|
||||
.grey > button:disabled {
|
||||
background-color: #fff;
|
||||
color: #8d8d8d;
|
||||
}
|
||||
|
||||
button.valid,
|
||||
.valid > button {
|
||||
border-color: #27a560;
|
||||
background-color: #27a560;
|
||||
}
|
||||
|
||||
button.valid:hover, button.valid:focus, button.valid:disabled,
|
||||
.valid > button:hover,
|
||||
.valid > button:focus,
|
||||
.valid > button:disabled {
|
||||
background-color: #fff;
|
||||
color: #27a560;
|
||||
}
|
||||
|
||||
button.neutral,
|
||||
.neutral > button {
|
||||
border-color: #2193e6;
|
||||
background-color: #2193e6;
|
||||
}
|
||||
|
||||
button.neutral:hover, button.neutral:focus, button.neutral:disabled,
|
||||
.neutral > button:hover,
|
||||
.neutral > button:focus,
|
||||
.neutral > button:disabled {
|
||||
background-color: #fff;
|
||||
color: #2193e6;
|
||||
}
|
||||
|
||||
button.search,
|
||||
.search > button {
|
||||
border-color: #5630ed;
|
||||
background-color: #5630ed;
|
||||
}
|
||||
|
||||
button.search:hover, button.search:focus, button.search:disabled,
|
||||
.search > button:hover,
|
||||
.search > button:focus,
|
||||
.search > button:disabled {
|
||||
background-color: #fff;
|
||||
color: #5630ed;
|
||||
}
|
||||
|
||||
.invalid > button.active,
|
||||
button.invalid.active,
|
||||
button.active {
|
||||
background-color: #fff;
|
||||
background-image: url("/src/static/container/active@d52918.svg") !important;
|
||||
background-size: 1em auto;
|
||||
color: transparent !important;
|
||||
}
|
||||
|
||||
button.valid.active,
|
||||
.valid > button.active {
|
||||
background-image: url("/src/static/container/active@27a560.svg") !important;
|
||||
}
|
||||
|
||||
button.neutral.active,
|
||||
.neutral > button.active {
|
||||
background-image: url("/src/static/container/active@2193e6.svg") !important;
|
||||
}
|
||||
|
||||
button.search.active,
|
||||
.search > button.active {
|
||||
background-image: url("/src/static/container/active@5630ed.svg") !important;
|
||||
}
|
||||
|
||||
hr.OR[data-label] {
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 0;
|
||||
border: 0;
|
||||
border-bottom: 1px dashed #d52918;
|
||||
}
|
||||
|
||||
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;
|
||||
-webkit-transform: translateX(-50%) translatey(-50%);
|
||||
transform: translateX(-50%) translatey(-50%);
|
||||
}
|
||||
|
||||
.valid > hr.OR,
|
||||
hr.OR.valid {
|
||||
border-bottom: 1px dashed #27a560;
|
||||
}
|
||||
|
||||
.valid > hr.OR:before,
|
||||
hr.OR.valid:before {
|
||||
color: #27a560;
|
||||
}
|
||||
|
||||
.neutral > hr.OR,
|
||||
hr.OR.neutral {
|
||||
border-bottom: 1px dashed #2193e6;
|
||||
}
|
||||
|
||||
.neutral > hr.OR:before,
|
||||
hr.OR.neutral:before {
|
||||
color: #2193e6;
|
||||
}
|
||||
|
||||
.search > hr.OR,
|
||||
hr.OR.search {
|
||||
border-bottom: 1px dashed #5630ed;
|
||||
}
|
||||
|
||||
.search > hr.OR:before,
|
||||
hr.OR.search:before {
|
||||
color: #5630ed;
|
||||
}
|
||||
|
||||
|
||||
/*# sourceMappingURL= global.css.map */
|
||||
|
|
@ -18,6 +18,8 @@
|
|||
==========================================*/
|
||||
/* [3] Container de la page
|
||||
==========================================*/
|
||||
/* [4] Popup background - window
|
||||
==========================================*/
|
||||
}
|
||||
|
||||
#WRAPPER > #HEADER {
|
||||
|
|
@ -59,5 +61,84 @@
|
|||
overflow-y: auto;
|
||||
}
|
||||
|
||||
#WRAPPER > #POPUP {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
min-width: 50%;
|
||||
max-width: 50%;
|
||||
min-height: 30%;
|
||||
max-height: 50%;
|
||||
border-radius: 5px;
|
||||
background: #fff;
|
||||
color: #34495e;
|
||||
box-shadow: -10px 10px 0 rgba(26, 33, 40, 0.8);
|
||||
-webkit-transform: translateX(-50%) translateY(-50%);
|
||||
transform: translateX(-50%) translateY(-50%);
|
||||
z-index: 101;
|
||||
}
|
||||
|
||||
#WRAPPER > #POPUP.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#WRAPPER > #POPUP > .header {
|
||||
display: block;
|
||||
position: relative;
|
||||
width: calc( 100% - 2*1em);
|
||||
padding: 1em;
|
||||
border-radius: 5px 5px 0 0;
|
||||
border-bottom: 2px solid #ecf0f1;
|
||||
font-size: 1.1em;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#WRAPPER > #POPUP > .body {
|
||||
display: block;
|
||||
position: relative;
|
||||
width: calc( 100% - 2*1em);
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
#WRAPPER > #POPUP > .body b, #WRAPPER > #POPUP > .body strong {
|
||||
color: #5630ed;
|
||||
}
|
||||
|
||||
#WRAPPER > #POPUP > .footer {
|
||||
display: flex;
|
||||
position: relative;
|
||||
width: calc( 100% - 2*1em);
|
||||
padding: 1em;
|
||||
background-color: #ecf0f1;
|
||||
border-radius: 0 0 5px 5px;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
#WRAPPER > #POPUP > .footer button {
|
||||
left: auto;
|
||||
margin: 0 1em;
|
||||
-webkit-transform: none;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
#WRAPPER > #POPUP-BG {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #29333f;
|
||||
background: rgba(41, 51, 63, 0.8);
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
#WRAPPER #POPUP.active ~ #POPUP-BG {
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
/*# sourceMappingURL= layout.css.map */
|
||||
|
|
@ -66,6 +66,7 @@
|
|||
}
|
||||
|
||||
#WRAPPER > #MENU-SIDE > span[data-link]:hover:hover:after, #WRAPPER > #MENU-SIDE > span[data-link].active:hover:after {
|
||||
-webkit-transform: scaleX(1);
|
||||
transform: scaleX(1);
|
||||
color: #fff;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -30,6 +30,7 @@
|
|||
top: 50%;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
-webkit-transform: translateY(-50%);
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -36,6 +36,7 @@
|
|||
width: 1em;
|
||||
height: 1em;
|
||||
|
||||
-webkit-transform: translateY(-50%);
|
||||
transform: translateY(-50%);
|
||||
|
||||
// Coloration pour tous les elements du svg
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
function Popup(){this.element={frame:document.querySelector("#POPUP"),header:document.querySelector("#POPUP .header"),body:document.querySelector("#POPUP .body"),footer:document.querySelector("#POPUP .footer")}}Popup.prototype={element:{frame:null,header:null,body:null,footer:null},show:function(){return this.element.frame.addClass("active"),this},hide:function(){return this.element.frame.remClass("active"),this},ask:function(e,t){function n(e){this.hide(),t("grey"!=e.target.className)}if(!(e instanceof Object))return null;if(null==e.title)return null;if(null==e.content)return null;if(null==e.type)return null;if(null==e.action)return null;if(!(t instanceof Function))return null;this.element.header.innerHTML=e.title,this.element.body.innerHTML=e.content;var r=document.createElement("button");r.className=e.type,r.innerHTML=e.action;var l=document.createElement("button");return l.className="grey",l.innerHTML="Annuler",r.addEventListener("click",n.bind(this),!1),l.addEventListener("click",n.bind(this),!1),this.element.footer.innerHTML="",this.element.footer.appendChild(r),this.element.footer.appendChild(l),this.show()}};
|
||||
|
|
@ -0,0 +1,89 @@
|
|||
function Popup(){
|
||||
|
||||
this.element = {
|
||||
frame: document.querySelector('#POPUP'),
|
||||
header: document.querySelector('#POPUP .header'),
|
||||
body: document.querySelector('#POPUP .body'),
|
||||
footer: document.querySelector('#POPUP .footer')
|
||||
};
|
||||
|
||||
}
|
||||
|
||||
Popup.prototype = {
|
||||
|
||||
element: { frame: null, header: null, body: null, footer: null },
|
||||
|
||||
show: function(){
|
||||
this.element.frame.addClass('active');
|
||||
return this;
|
||||
},
|
||||
|
||||
hide: function(){
|
||||
this.element.frame.remClass('active');
|
||||
return this;
|
||||
},
|
||||
|
||||
ask: function(pObject, pHandler){
|
||||
/* (1) Check argument
|
||||
---------------------------------------------------------*/
|
||||
/* (1) Check type */
|
||||
if( !(pObject instanceof Object) )
|
||||
return null;
|
||||
|
||||
/* (2) Check Title */
|
||||
if( pObject.title == null )
|
||||
return null;
|
||||
|
||||
/* (3) Check Content */
|
||||
if( pObject.content == null )
|
||||
return null;
|
||||
|
||||
/* (4) Check Type */
|
||||
if( pObject.type == null )
|
||||
return null;
|
||||
|
||||
/* (5) Check Action */
|
||||
if( pObject.action == null )
|
||||
return null;
|
||||
|
||||
/* (6) Check handler */
|
||||
if( !(pHandler instanceof Function) )
|
||||
return null;
|
||||
|
||||
|
||||
/* (2) Set the content
|
||||
---------------------------------------------------------*/
|
||||
/* (1) Title */
|
||||
this.element.header.innerHTML = pObject.title;
|
||||
|
||||
/* (2) Content */
|
||||
this.element.body.innerHTML = pObject.content;
|
||||
|
||||
|
||||
/* (3) Set the buttons (action)
|
||||
---------------------------------------------------------*/
|
||||
/* (1) Define action button */
|
||||
var action_btn = document.createElement('button');
|
||||
action_btn.className = pObject.type;
|
||||
action_btn.innerHTML = pObject.action;
|
||||
|
||||
/* (2) Define cancel button */
|
||||
var cancel_btn = document.createElement('button');
|
||||
cancel_btn.className = 'grey';
|
||||
cancel_btn.innerHTML = 'Annuler';
|
||||
|
||||
/* (3) Bind events */
|
||||
function handler(e){ this.hide(); pHandler( e.target.className != 'grey' ); }
|
||||
|
||||
action_btn.addEventListener('click', handler.bind(this), false);
|
||||
cancel_btn.addEventListener('click', handler.bind(this), false);
|
||||
|
||||
/* (4) Add elements to the object */
|
||||
this.element.footer.innerHTML = '';
|
||||
this.element.footer.appendChild(action_btn);
|
||||
this.element.footer.appendChild(cancel_btn);
|
||||
|
||||
return this.show();
|
||||
}
|
||||
|
||||
};
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
var sha256={hash:function(a){a=a.utf8Encode();var d=[1116352408,1899447441,3049323471,3921009573,961987163,1508970993,2453635748,2870763221,3624381080,310598401,607225278,1426881987,1925078388,2162078206,2614888103,3248222580,3835390401,4022224774,264347078,604807628,770255983,1249150122,1555081692,1996064986,2554220882,2821834349,2952996808,3210313671,3336571891,3584528711,113926993,338241895,666307205,773529912,1294757372,1396182291,1695183700,1986661051,2177026350,2456956037,2730485921,2820302411,
|
||||
3259730800,3345764771,3516065817,3600352804,4094571909,275423344,430227734,506948616,659060556,883997877,958139571,1322822218,1537002063,1747873779,1955562222,2024104815,2227730452,2361852424,2428436474,2756734187,3204031479,3329325298],b=[1779033703,3144134277,1013904242,2773480762,1359893119,2600822924,528734635,1541459225];a+=String.fromCharCode(128);for(var g=Math.ceil((a.length/4+2)/16),h=Array(g),f=0;f<g;f++){h[f]=Array(16);for(var e=0;16>e;e++)h[f][e]=a.charCodeAt(64*f+4*e)<<24|a.charCodeAt(64*
|
||||
f+4*e+1)<<16|a.charCodeAt(64*f+4*e+2)<<8|a.charCodeAt(64*f+4*e+3)}h[g-1][14]=8*(a.length-1)/Math.pow(2,32);h[g-1][14]=Math.floor(h[g-1][14]);h[g-1][15]=8*(a.length-1)&4294967295;a=Array(64);for(var l,m,q,k,n,p,r,f=0;f<g;f++){for(var c=0;16>c;c++)a[c]=h[f][c];for(c=16;64>c;c++)a[c]=sha256.\u03c31(a[c-2])+a[c-7]+sha256.\u03c30(a[c-15])+a[c-16]&4294967295;e=b[0];l=b[1];m=b[2];q=b[3];k=b[4];n=b[5];p=b[6];r=b[7];for(c=0;64>c;c++){var t=r+sha256.\u03a31(k)+sha256.Ch(k,n,p)+d[c]+a[c],u=sha256.\u03a30(e)+
|
||||
sha256.Maj(e,l,m);r=p;p=n;n=k;k=q+t&4294967295;q=m;m=l;l=e;e=t+u&4294967295}b[0]=b[0]+e&4294967295;b[1]=b[1]+l&4294967295;b[2]=b[2]+m&4294967295;b[3]=b[3]+q&4294967295;b[4]=b[4]+k&4294967295;b[5]=b[5]+n&4294967295;b[6]=b[6]+p&4294967295;b[7]=b[7]+r&4294967295}return sha256.toHexStr(b[0])+sha256.toHexStr(b[1])+sha256.toHexStr(b[2])+sha256.toHexStr(b[3])+sha256.toHexStr(b[4])+sha256.toHexStr(b[5])+sha256.toHexStr(b[6])+sha256.toHexStr(b[7])},ROTR:function(a,d){return d>>>a|d<<32-a},"\u03a30":function(a){return sha256.ROTR(2,
|
||||
a)^sha256.ROTR(13,a)^sha256.ROTR(22,a)},"\u03a31":function(a){return sha256.ROTR(6,a)^sha256.ROTR(11,a)^sha256.ROTR(25,a)},"\u03c30":function(a){return sha256.ROTR(7,a)^sha256.ROTR(18,a)^a>>>3},"\u03c31":function(a){return sha256.ROTR(17,a)^sha256.ROTR(19,a)^a>>>10},Ch:function(a,d,b){return a&d^~a&b},Maj:function(a,d,b){return a&d^a&b^d&b},toHexStr:function(a){for(var d="",b,g=7;0<=g;g--)b=a>>>4*g&15,d+=b.toString(16);return d}};
|
||||
"undefined"==typeof String.prototype.utf8Encode&&(String.prototype.utf8Encode=function(){return unescape(encodeURIComponent(this))});"undefined"==typeof String.prototype.utf8Decode&&(String.prototype.utf8Decode=function(){try{return decodeURIComponent(escape(this))}catch(a){return this}});"undefined"!=typeof module&&module.exports&&(module.exports=sha256);"function"==typeof define&&define.amd&&define([],function(){return sha256});
|
||||
|
|
@ -56,7 +56,7 @@ if( section.password.element != null ){
|
|||
section.password.errmsg.confirm.innerHTML = '';
|
||||
|
||||
var request = {
|
||||
path: 'authenticationDefault/update_admin', // On veut modifier le mot de passe admin
|
||||
path: 'adminDefault/update', // On veut modifier le mot de passe admin
|
||||
old: section.password.input.old.value,
|
||||
new: section.password.input.new.value,
|
||||
confirm: section.password.input.confirm.value
|
||||
|
|
|
|||
|
|
@ -10,6 +10,11 @@ var section = {
|
|||
element: document.querySelector('#CONTAINER > section[data-sublink="password"]')
|
||||
},
|
||||
|
||||
admins: {
|
||||
text: '#CONTAINER > section[data-sublink="admins"] ',
|
||||
element: document.querySelector('#CONTAINER > section[data-sublink="admins"]')
|
||||
},
|
||||
|
||||
admin: {
|
||||
text: '#CONTAINER > section[data-sublink="admin"] ',
|
||||
element: document.querySelector('#CONTAINER > section[data-sublink="admin"]')
|
||||
|
|
@ -99,8 +104,94 @@ if( section.password.element != null ){
|
|||
|
||||
|
||||
|
||||
/* [3] admins -> Liste des administrateurs
|
||||
=========================================================*/
|
||||
if( section.admins.element != null ){
|
||||
|
||||
/* [3] admin -> Création d'administrateur
|
||||
/* (1) Fetch the remove links
|
||||
---------------------------------------------------------*/
|
||||
section.admins.link = {};
|
||||
section.admins.link.remove = document.querySelectorAll(section.admins.text + '.link_remove[data-admin]');
|
||||
|
||||
/* (2) Define admin-remove function
|
||||
---------------------------------------------------------*/
|
||||
var remove_admin = function(entry_element){
|
||||
/* (1) Get admin.id + admin.name */
|
||||
var admin = {
|
||||
id: parseInt(entry_element.id),
|
||||
name: entry_element.children[0].children[0].innerHTML
|
||||
};
|
||||
|
||||
/* (2) Create popup */
|
||||
var PopupManager = new Popup();
|
||||
|
||||
var confirm_content = {
|
||||
title: "Suppression d'un administrteur",
|
||||
content: "L'administrateur <b>"+admin.name+"</b> sera définitivement supprimé de la plateforme, cette opération ne peut pas être annulée.",
|
||||
type: "invalid",
|
||||
action: "Supprimer"
|
||||
};
|
||||
|
||||
/* (3) Ask for confirmation */
|
||||
PopupManager.ask(confirm_content, function(is_confirmed){
|
||||
|
||||
/* (3.1) If not cancelled -> abort */
|
||||
if( !is_confirmed )
|
||||
return;
|
||||
|
||||
/* (2.1) Manage deletion
|
||||
---------------------------------------------------------*/
|
||||
/* (1) Create request */
|
||||
var request = {
|
||||
path: 'adminDefault/delete', // On veut créer un nouvel admin
|
||||
id_admin: admin.id
|
||||
};
|
||||
|
||||
/* (2) Send request + handle response */
|
||||
api.send(request, function(answer){
|
||||
|
||||
if( answer.error == 0 ){ // Tout s'est bien deroule
|
||||
|
||||
console.log('Admin supprimé!');
|
||||
|
||||
// on supprime de la liste
|
||||
entry_element.parentNode.removeChild(entry_element);
|
||||
|
||||
}else{ // Erreur
|
||||
|
||||
console.error('ModuleError::'+answer.error);
|
||||
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
|
||||
});
|
||||
|
||||
};
|
||||
|
||||
|
||||
/* (3) Bind event for each remove link
|
||||
---------------------------------------------------------*/
|
||||
for( var i = 0 ; i < section.admins.link.remove.length ; i++ ){
|
||||
|
||||
section.admins.link.remove[i].addEventListener('click', function(e){
|
||||
|
||||
remove_admin(e.target.parentNode.parentNode);
|
||||
|
||||
}, false);
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/* [4] admin -> Création d'administrateur
|
||||
=========================================================*/
|
||||
if( section.admin.element != null ){
|
||||
|
||||
|
|
@ -129,7 +220,7 @@ if( section.admin.element != null ){
|
|||
section.admin.errmsg.mail.innerHTML = '';
|
||||
|
||||
var request = {
|
||||
path: 'authenticationDefault/create_admin', // On veut créer un nouvel admin
|
||||
path: 'adminDefault/create', // On veut créer un nouvel admin
|
||||
username: section.admin.input.username.value,
|
||||
mail: section.admin.input.mail.value
|
||||
};
|
||||
|
|
|
|||
|
|
@ -28,6 +28,7 @@
|
|||
<!-- Dépendences Javascript -->
|
||||
<script type='text/javascript' src='/js/lib/min/input-checker.js' ></script> <!-- Gestion dynamique des saisies -->
|
||||
<script type='text/javascript' src='/js/lib/min/reset.js' ></script> <!-- Corrections Javascript natif (ajouts) -->
|
||||
<script type='text/javascript' src='/js/lib/min/popup.js' ></script> <!-- Gestion du pop-up gloabl -->
|
||||
<script type='text/javascript' src='/js/lib/min/api.js' ></script> <!-- Gestion des transactions avec le serveur -->
|
||||
<script type='text/javascript' src='/js/lib/min/page-manager.js' ></script> <!-- Gestion réseau/chargement/liens/URL -->
|
||||
<script type='text/javascript' src='/js/lib/min/form-deflater.js' ></script> <!-- Gestion des formulaires (Object) -->
|
||||
|
|
@ -50,17 +51,24 @@
|
|||
|
||||
<!-- MENU DE LA PAGE -->
|
||||
<nav id='MENU-SIDE'>
|
||||
<span data-link='profile' data-desc='Profil' class='mb' ><?= file_get_contents(__PUBLIC__.'/src/static/menu-side/profile.svg'); ?></span>
|
||||
<span data-link='profile' data-desc='Profil' class='mb' ><?= file_get_contents(__PUBLIC__.'/src/static/menu-side/profile.svg'); ?></span>
|
||||
|
||||
<span data-link='history' data-desc='Journal des accès' class='apart' ><?= file_get_contents(__PUBLIC__.'/src/static/menu-side/history.svg'); ?></span>
|
||||
<span data-link='machines' data-desc='Systèmes' ><?= file_get_contents(__PUBLIC__.'/src/static/menu-side/device.svg'); ?></span>
|
||||
<span data-link='users' data-desc='Utilisateurs' ><?= file_get_contents(__PUBLIC__.'/src/static/menu-side/users.svg'); ?></span>
|
||||
<span data-link='groups' data-desc='Gestion des groupes' ><?= file_get_contents(__PUBLIC__.'/src/static/menu-side/groups.svg'); ?></span>
|
||||
<span data-link='options' data-desc='Options' ><?= file_get_contents(__PUBLIC__.'/src/static/menu-side/options.svg'); ?></span>
|
||||
<span data-link='history' data-desc='Journal des accès' class='apart' ><?= file_get_contents(__PUBLIC__.'/src/static/menu-side/history.svg'); ?></span>
|
||||
<span data-link='machines' data-desc='Systèmes' ><?= file_get_contents(__PUBLIC__.'/src/static/menu-side/device.svg'); ?></span>
|
||||
<span data-link='users' data-desc='Utilisateurs' ><?= file_get_contents(__PUBLIC__.'/src/static/menu-side/users.svg'); ?></span>
|
||||
<span data-link='groups' data-desc='Gestion des groupes' ><?= file_get_contents(__PUBLIC__.'/src/static/menu-side/groups.svg'); ?></span>
|
||||
|
||||
<span data-link='settings' data-desc='Paramètres' class='mt' ><?= file_get_contents(__PUBLIC__.'/src/static/menu-side/settings.svg'); ?></span>
|
||||
<span data-link='options' data-desc='Options' class='mt' ><?= file_get_contents(__PUBLIC__.'/src/static/menu-side/options.svg'); ?></span>
|
||||
<span data-link='settings' data-desc='Paramètres' ><?= file_get_contents(__PUBLIC__.'/src/static/menu-side/settings.svg'); ?></span>
|
||||
</nav>
|
||||
|
||||
<!-- POPUP WINDOW -->
|
||||
<div id='POPUP'>
|
||||
<div class='header'></div>
|
||||
<div class='body'></div>
|
||||
<div class='footer'></div>
|
||||
</div>
|
||||
<div id='POPUP-BG'></div>
|
||||
|
||||
<!-- CONTENEUR DE LA PAGE -->
|
||||
<div id='CONTAINER'></div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue