diff --git a/build/api/module/machineDefault.php b/build/api/module/machineDefault.php index ac9f301..d76e081 100755 --- a/build/api/module/machineDefault.php +++ b/build/api/module/machineDefault.php @@ -6,6 +6,7 @@ use \error\core\Error; use \error\core\Err; use \database\core\Repo; + use \api\core\Request; class machineDefault{ @@ -315,6 +316,110 @@ + /* RETURN MACHINE STATE + * + * @id_machine UID of the machine + * + * @return state Machine state + * + */ + public function getState($params){ + extract($params); + + + /* [1] Get machine info + =========================================================*/ + /* (1) Write request */ + $machine_req = new Request('machineDefault/getById', ['id_machine' => $id_machine]); + + /* (2) Execute request */ + $machine_res = $machine_req->dispatch(); + + /* (3) Manage error */ + if( $machine_res->error->get() != Err::Success ) + return [ 'error' => $machine_res->error ]; + + + /* [2] Get action id=>name + =========================================================*/ + $action = []; + + /* (1) Write request */ + $action_req = new Repo('action/getAll', []); + + /* (2) Manage error */ + if( $action_req->error->get() != Err::Success ) + return [ 'error' => $action_req->error ]; + + /* (3) Create association array */ + foreach($action_req->answer() as $a) + $action[ strtolower($a['name']) ] = $a['id_action']; + + + /* [3] Get history for the machine + =========================================================*/ + /* (1) Write request */ + $history_req = new Repo('history/getByIdMachine', [$id_machine]); + + /* (2) Manage error */ + if( $history_req->error->get() != Err::Success ) + return [ 'error' => $history_req->error ]; + + /* (3) Extract history */ + $history = $history_req->answer(); + + + /* [4] Process state + =========================================================*/ + + /* (1) LOCKED (last = lock) + ---------------------------------------------------------*/ + if( count($history) > 0 && $history[0]['id_action'] == $action['lock'] ) + return [ 'state' => 'locked' ]; + + /* (2) STOPPED (last = unlock | stop) + ---------------------------------------------------------*/ + if( count($history) > 0 && in_array($history[0]['id_action'], [$action['stop'], $action['unlock']]) ) + return [ 'state' => 'stopped' ]; + + /* (3) SIGNALED (start|stop ..... signal) + ---------------------------------------------------------*/ + if( count($history) > 0 && $history[0]['id_action'] == $action['signal'] ) + return [ 'state' => 'signaled' ]; + + for( $c = 1 ; $c < count($history) ; $c++ ){ + + /* (1) If (start|stop), continue to search */ + if( in_array($history[$c]['id_action'] , [$action['start'], $action['stop']]) ) + continue; + + /* (2) If (signal) found, therefore it is signaled */ + else if( $history[$c]['id_action'] == $action['signal'] ) + return [ 'state' => 'signaled' ]; + + /* (4) STARTED (last state) + ---------------------------------------------------------*/ + else + return [ 'state' => 'started' ]; + + } + + /* (5) DETACHED (no state) + ---------------------------------------------------------*/ + return [ 'state' => 'detached' ]; + + + + } + + + + + + + + + diff --git a/build/database/repo/history.php b/build/database/repo/history.php index eb06f2f..05a9d1e 100755 --- a/build/database/repo/history.php +++ b/build/database/repo/history.php @@ -132,7 +132,7 @@ ->join('id_action', $actions) ->select('id_history') ->select('timestamp') - ->orderby('timestamp', Rows::ORDER_ASC); + ->orderby('timestamp', Rows::ORDER_DESC); return $history->fetch(); } diff --git a/build/database/repo/user.php b/build/database/repo/user.php index c49f358..c0f22a2 100755 --- a/build/database/repo/user.php +++ b/build/database/repo/user.php @@ -299,6 +299,7 @@ =========================================================*/ $user = Table::get('user') ->whereIdWarehouse($id_warehouse) + ->orderby('username', Rows::ORDER_ASC) ->select('*'); return $user->fetch(); diff --git a/build/viewer/view/machine/view.php b/build/viewer/view/machine/view.php index be824a8..fed5a38 100755 --- a/build/viewer/view/machine/view.php +++ b/build/viewer/view/machine/view.php @@ -40,8 +40,16 @@ return $answer->get('machines'); })); - $twig->addFunction(new \Twig_Function('f_getstate', function(){ - return 'detached'; + $twig->addFunction(new \Twig_Function('f_getstate', function($id_machine){ + /* (1) Write / Execute request */ + $req = new Request('machineDefault/getState', ['id_machine' => $id_machine]); + $res = $req->dispatch(); + + /* (2) Manage error */ + if( $res->error->get() != Err::Success ) + return 'detached'; + + return $res->get('state'); })); $twig->addFunction(new \Twig_Function('f_clusters', function($id_machine){ diff --git a/config/modules.json b/config/modules.json index cde01cd..969b137 100755 --- a/config/modules.json +++ b/config/modules.json @@ -348,6 +348,17 @@ "output": { "status": { "description": "Status de la suppression.", "type": "boolean" } } + }, + + "POST::getState": { + "description": "Retourne l'état d'une machine.", + "permissions": ["warehouse", "admin"], + "parameters": { + "id_machine": { "description": "UID de la machine", "type": "id" } + }, + "output": { + "state": { "description": "Etat de la machine", "type": "text" } + } } }, diff --git a/config/repositories.json b/config/repositories.json index 57929d9..27b8fa0 100755 --- a/config/repositories.json +++ b/config/repositories.json @@ -6,9 +6,9 @@ "search", "getAll", - "getByUser", - "getByMachine", - "getByCluster" + "getByIdUser", + "getByIdMachine", + "getByIdAction" ], diff --git a/public_html/css/container.scss b/public_html/css/container.scss index ef37011..08c36da 100755 --- a/public_html/css/container.scss +++ b/public_html/css/container.scss @@ -123,8 +123,8 @@ background-color: #ddd; - &[data-state='stop']{ background-color: #ddd; } - &[data-state='start']{ background-color: #22E07B; } + &[data-state='stopped']{ background-color: #ddd; } + &[data-state='started']{ background-color: #22E07B; } &[data-state='signaled']{ background-color: #3897D6; } &[data-state='locked']{ background-color: #EA460A; } &[data-state='detached']{ background-color: #AB1EE2; } diff --git a/public_html/css/min/container.css b/public_html/css/min/container.css index af15917..51d1342 100755 --- a/public_html/css/min/container.css +++ b/public_html/css/min/container.css @@ -14,551 +14,471 @@ /* [3] Formulaires =========================================================*/ /* (1) Champs de texte */ - /* (2) Boutons */ -} -#WRAPPER > #CONTAINER > section { - display: none; - flex-grow: 1; -} -#WRAPPER > #CONTAINER > section.active { - display: flex; - flex-direction: row; - align-items: flex-start; - justify-content: flex-start; - flex-wrap: wrap; -} -#WRAPPER > #CONTAINER > section.active .inline-box { - flex: 0 0 1; -} -#WRAPPER > #CONTAINER > section.active .inline-row { - flex: 3em 0 1; -} -#WRAPPER > #CONTAINER > section.active .searchbar { - display: inline-block; - position: relative; - flex: calc( 100% - 2*1em - 2*1em ); - margin: 1em; - padding: .5em 1em; - padding-left: 2em; - border-radius: 3px; - border: 1px solid #b1b1b1; - background: #fff url("/src/static/sub-menu-side/search@b1b1b1.svg") 0.5em center no-repeat; - background-size: 1em; - transition: border .4s ease-in-out; -} -#WRAPPER > #CONTAINER > section.active .searchbar:hover, #WRAPPER > #CONTAINER > section.active .searchbar:focus { - border-color: #5630ed; -} -#WRAPPER > #CONTAINER > section.active .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, #WRAPPER > #CONTAINER > section > .inline-row { - 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; - /* (0) Etat des machines */ - /* (1) Titre de l'element */ - /* (2) Code RFID */ - /* (3) Adresse mail */ - /* (4) Groupes */ - /* (5) Lien vers la modification */ - /* (6) Lien vers la suppression */ -} -#WRAPPER > #CONTAINER > section > .inline-box.hidden, #WRAPPER > #CONTAINER > section > .inline-row.hidden { - display: none; -} -#WRAPPER > #CONTAINER > section > .inline-box a, #WRAPPER > #CONTAINER > section > .inline-row a { - text-decoration: none; - color: inherit; -} -#WRAPPER > #CONTAINER > section > .inline-box.selected, #WRAPPER > #CONTAINER > section > .inline-row.selected { - border: 1px solid #7362ff; - transition: box-shadow .2s ease-in-out; -} -#WRAPPER > #CONTAINER > section > .inline-box.selected:hover, #WRAPPER > #CONTAINER > section > .inline-row.selected:hover { - box-shadow: 2px 2px 7px #aaa; -} -#WRAPPER > #CONTAINER > section > .inline-box .state, #WRAPPER > #CONTAINER > section > .inline-row .state { - display: inline-block; - width: .7em; - height: .7em; - margin-right: .3em; - border-radius: 50% / 50%; - background-color: #ddd; -} -#WRAPPER > #CONTAINER > section > .inline-box .state[data-state='stop'], #WRAPPER > #CONTAINER > section > .inline-row .state[data-state='stop'] { - background-color: #ddd; -} -#WRAPPER > #CONTAINER > section > .inline-box .state[data-state='start'], #WRAPPER > #CONTAINER > section > .inline-row .state[data-state='start'] { - background-color: #22E07B; -} -#WRAPPER > #CONTAINER > section > .inline-box .state[data-state='signaled'], #WRAPPER > #CONTAINER > section > .inline-row .state[data-state='signaled'] { - background-color: #3897D6; -} -#WRAPPER > #CONTAINER > section > .inline-box .state[data-state='locked'], #WRAPPER > #CONTAINER > section > .inline-row .state[data-state='locked'] { - background-color: #EA460A; -} -#WRAPPER > #CONTAINER > section > .inline-box .state[data-state='detached'], #WRAPPER > #CONTAINER > section > .inline-row .state[data-state='detached'] { - background-color: #AB1EE2; -} -#WRAPPER > #CONTAINER > section > .inline-box .title, #WRAPPER > #CONTAINER > section > .inline-row .title { - display: inline-block; - font-size: 1.15em; - font-weight: bold; - color: #ea4c06; - white-space: nowrap; -} -#WRAPPER > #CONTAINER > section > .inline-box .title > span, #WRAPPER > #CONTAINER > section > .inline-row .title > span { - font-size: .8em; - color: #333; -} -#WRAPPER > #CONTAINER > section > .inline-box .code, -#WRAPPER > #CONTAINER > section > .inline-box .mail, #WRAPPER > #CONTAINER > section > .inline-row .code, -#WRAPPER > #CONTAINER > section > .inline-row .mail { - display: block; - margin: 1em; - color: #333; - white-space: nowrap; -} -#WRAPPER > #CONTAINER > section > .inline-box .code svg, -#WRAPPER > #CONTAINER > section > .inline-box .mail svg, #WRAPPER > #CONTAINER > section > .inline-row .code svg, -#WRAPPER > #CONTAINER > section > .inline-row .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#stylisable, -#WRAPPER > #CONTAINER > section > .inline-box .mail svg path#stylisable, #WRAPPER > #CONTAINER > section > .inline-row .code svg path#stylisable, -#WRAPPER > #CONTAINER > section > .inline-row .mail svg path#stylisable { - fill: #333 !important; - pointer-events: none; -} -#WRAPPER > #CONTAINER > section > .inline-box .code svg path#stroke-stylisable, -#WRAPPER > #CONTAINER > section > .inline-box .mail svg path#stroke-stylisable, #WRAPPER > #CONTAINER > section > .inline-row .code svg path#stroke-stylisable, -#WRAPPER > #CONTAINER > section > .inline-row .mail svg path#stroke-stylisable { - stroke: #333 !important; - pointer-events: none; -} -#WRAPPER > #CONTAINER > section > .inline-box .groups, #WRAPPER > #CONTAINER > section > .inline-row .groups { - display: block; - margin: 1em; - color: #333; -} -#WRAPPER > #CONTAINER > section > .inline-box .groups svg, #WRAPPER > #CONTAINER > section > .inline-row .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, #WRAPPER > #CONTAINER > section > .inline-row .groups svg path { - fill: #333 !important; - pointer-events: none; -} -#WRAPPER > #CONTAINER > section > .inline-box .groups > span:not(.ignore), #WRAPPER > #CONTAINER > section > .inline-box .groups > span.ignore > span, #WRAPPER > #CONTAINER > section > .inline-row .groups > span:not(.ignore), #WRAPPER > #CONTAINER > section > .inline-row .groups > span.ignore > span { - display: inline-block; - position: relative; - padding: .1em .5em; - margin-right: calc( .4em + 2em ); - margin-bottom: .5em; - border-radius: 3px 0 0 3px; - border: 1px solid #bdbdbd; - box-shadow: inset 0 0 2px #fafafa; - background-color: #f9f9f9; - color: #333; - cursor: default; -} -#WRAPPER > #CONTAINER > section > .inline-box .groups > span:not(.ignore).add-permission, #WRAPPER > #CONTAINER > section > .inline-box .groups > span:not(.ignore).add-group, #WRAPPER > #CONTAINER > section > .inline-box .groups > span:not(.ignore).add-member, #WRAPPER > #CONTAINER > section > .inline-box .groups > span.ignore > span.add-permission, #WRAPPER > #CONTAINER > section > .inline-box .groups > span.ignore > span.add-group, #WRAPPER > #CONTAINER > section > .inline-box .groups > span.ignore > span.add-member, #WRAPPER > #CONTAINER > section > .inline-row .groups > span:not(.ignore).add-permission, #WRAPPER > #CONTAINER > section > .inline-row .groups > span:not(.ignore).add-group, #WRAPPER > #CONTAINER > section > .inline-row .groups > span:not(.ignore).add-member, #WRAPPER > #CONTAINER > section > .inline-row .groups > span.ignore > span.add-permission, #WRAPPER > #CONTAINER > section > .inline-row .groups > span.ignore > span.add-group, #WRAPPER > #CONTAINER > section > .inline-row .groups > span.ignore > span.add-member { - border-radius: 3px; - cursor: pointer; -} -#WRAPPER > #CONTAINER > section > .inline-box .groups > span:not(.ignore).add-permission > div.dropdown, #WRAPPER > #CONTAINER > section > .inline-box .groups > span:not(.ignore).add-group > div.dropdown, #WRAPPER > #CONTAINER > section > .inline-box .groups > span:not(.ignore).add-member > div.dropdown, #WRAPPER > #CONTAINER > section > .inline-box .groups > span.ignore > span.add-permission > div.dropdown, #WRAPPER > #CONTAINER > section > .inline-box .groups > span.ignore > span.add-group > div.dropdown, #WRAPPER > #CONTAINER > section > .inline-box .groups > span.ignore > span.add-member > div.dropdown, #WRAPPER > #CONTAINER > section > .inline-row .groups > span:not(.ignore).add-permission > div.dropdown, #WRAPPER > #CONTAINER > section > .inline-row .groups > span:not(.ignore).add-group > div.dropdown, #WRAPPER > #CONTAINER > section > .inline-row .groups > span:not(.ignore).add-member > div.dropdown, #WRAPPER > #CONTAINER > section > .inline-row .groups > span.ignore > span.add-permission > div.dropdown, #WRAPPER > #CONTAINER > section > .inline-row .groups > span.ignore > span.add-group > div.dropdown, #WRAPPER > #CONTAINER > section > .inline-row .groups > span.ignore > span.add-member > div.dropdown { - display: flex; - flex-direction: column; - flex-wrap: nowrap; - flex: 100%; - justify-content: space-between; - position: absolute; - top: calc( 100% + 5px ); - left: 0; - width: 12em; - height: 500%; - border-radius: 3px; - overflow: hidden; - overflow-y: auto; - background: #fff; - box-shadow: 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15); - z-index: 100; -} -#WRAPPER > #CONTAINER > section > .inline-box .groups > span:not(.ignore).add-permission > div.dropdown > span, #WRAPPER > #CONTAINER > section > .inline-box .groups > span:not(.ignore).add-group > div.dropdown > span, #WRAPPER > #CONTAINER > section > .inline-box .groups > span:not(.ignore).add-member > div.dropdown > span, #WRAPPER > #CONTAINER > section > .inline-box .groups > span.ignore > span.add-permission > div.dropdown > span, #WRAPPER > #CONTAINER > section > .inline-box .groups > span.ignore > span.add-group > div.dropdown > span, #WRAPPER > #CONTAINER > section > .inline-box .groups > span.ignore > span.add-member > div.dropdown > span, #WRAPPER > #CONTAINER > section > .inline-row .groups > span:not(.ignore).add-permission > div.dropdown > span, #WRAPPER > #CONTAINER > section > .inline-row .groups > span:not(.ignore).add-group > div.dropdown > span, #WRAPPER > #CONTAINER > section > .inline-row .groups > span:not(.ignore).add-member > div.dropdown > span, #WRAPPER > #CONTAINER > section > .inline-row .groups > span.ignore > span.add-permission > div.dropdown > span, #WRAPPER > #CONTAINER > section > .inline-row .groups > span.ignore > span.add-group > div.dropdown > span, #WRAPPER > #CONTAINER > section > .inline-row .groups > span.ignore > span.add-member > div.dropdown > span { - padding: .5em; - padding-left: 1em; - flex: 2em 1 1; - cursor: pointer; -} -#WRAPPER > #CONTAINER > section > .inline-box .groups > span:not(.ignore).add-permission > div.dropdown > span:hover, #WRAPPER > #CONTAINER > section > .inline-box .groups > span:not(.ignore).add-group > div.dropdown > span:hover, #WRAPPER > #CONTAINER > section > .inline-box .groups > span:not(.ignore).add-member > div.dropdown > span:hover, #WRAPPER > #CONTAINER > section > .inline-box .groups > span.ignore > span.add-permission > div.dropdown > span:hover, #WRAPPER > #CONTAINER > section > .inline-box .groups > span.ignore > span.add-group > div.dropdown > span:hover, #WRAPPER > #CONTAINER > section > .inline-box .groups > span.ignore > span.add-member > div.dropdown > span:hover, #WRAPPER > #CONTAINER > section > .inline-row .groups > span:not(.ignore).add-permission > div.dropdown > span:hover, #WRAPPER > #CONTAINER > section > .inline-row .groups > span:not(.ignore).add-group > div.dropdown > span:hover, #WRAPPER > #CONTAINER > section > .inline-row .groups > span:not(.ignore).add-member > div.dropdown > span:hover, #WRAPPER > #CONTAINER > section > .inline-row .groups > span.ignore > span.add-permission > div.dropdown > span:hover, #WRAPPER > #CONTAINER > section > .inline-row .groups > span.ignore > span.add-group > div.dropdown > span:hover, #WRAPPER > #CONTAINER > section > .inline-row .groups > span.ignore > span.add-member > div.dropdown > span:hover { - background-color: #F8F8F8; -} -#WRAPPER > #CONTAINER > section > .inline-box .groups > span:not(.ignore) > span.rem-group, #WRAPPER > #CONTAINER > section > .inline-box .groups > span:not(.ignore) > span.icon-permission, #WRAPPER > #CONTAINER > section > .inline-box .groups > span:not(.ignore) > span.rem-permission, #WRAPPER > #CONTAINER > section > .inline-box .groups > span:not(.ignore) > span.rem-member, #WRAPPER > #CONTAINER > section > .inline-box .groups > span.ignore > span > span.rem-group, #WRAPPER > #CONTAINER > section > .inline-box .groups > span.ignore > span > span.icon-permission, #WRAPPER > #CONTAINER > section > .inline-box .groups > span.ignore > span > span.rem-permission, #WRAPPER > #CONTAINER > section > .inline-box .groups > span.ignore > span > span.rem-member, #WRAPPER > #CONTAINER > section > .inline-row .groups > span:not(.ignore) > span.rem-group, #WRAPPER > #CONTAINER > section > .inline-row .groups > span:not(.ignore) > span.icon-permission, #WRAPPER > #CONTAINER > section > .inline-row .groups > span:not(.ignore) > span.rem-permission, #WRAPPER > #CONTAINER > section > .inline-row .groups > span:not(.ignore) > span.rem-member, #WRAPPER > #CONTAINER > section > .inline-row .groups > span.ignore > span > span.rem-group, #WRAPPER > #CONTAINER > section > .inline-row .groups > span.ignore > span > span.icon-permission, #WRAPPER > #CONTAINER > section > .inline-row .groups > span.ignore > span > span.rem-permission, #WRAPPER > #CONTAINER > section > .inline-row .groups > span.ignore > span > span.rem-member { - display: block; - position: absolute; - top: -1px; - left: 100%; - width: 1em; - height: calc( 100% - .1em - 2px ); - padding: .12em .5em; - border-radius: 0 3px 3px 0; - border: 1px solid #bdbdbd; - box-shadow: inset 0 0 2px #fafafa; - background: url("/src/static/sub-menu-side/remove.svg") center center no-repeat; - background-size: auto 70%; - background-color: #f9f9f9; - color: inherit; - cursor: pointer; -} -#WRAPPER > #CONTAINER > section > .inline-box .groups > span:not(.ignore) > span.rem-group:hover, #WRAPPER > #CONTAINER > section > .inline-box .groups > span:not(.ignore) > span.icon-permission:hover, #WRAPPER > #CONTAINER > section > .inline-box .groups > span:not(.ignore) > span.rem-permission:hover, #WRAPPER > #CONTAINER > section > .inline-box .groups > span:not(.ignore) > span.rem-member:hover, #WRAPPER > #CONTAINER > section > .inline-box .groups > span.ignore > span > span.rem-group:hover, #WRAPPER > #CONTAINER > section > .inline-box .groups > span.ignore > span > span.icon-permission:hover, #WRAPPER > #CONTAINER > section > .inline-box .groups > span.ignore > span > span.rem-permission:hover, #WRAPPER > #CONTAINER > section > .inline-box .groups > span.ignore > span > span.rem-member:hover, #WRAPPER > #CONTAINER > section > .inline-row .groups > span:not(.ignore) > span.rem-group:hover, #WRAPPER > #CONTAINER > section > .inline-row .groups > span:not(.ignore) > span.icon-permission:hover, #WRAPPER > #CONTAINER > section > .inline-row .groups > span:not(.ignore) > span.rem-permission:hover, #WRAPPER > #CONTAINER > section > .inline-row .groups > span:not(.ignore) > span.rem-member:hover, #WRAPPER > #CONTAINER > section > .inline-row .groups > span.ignore > span > span.rem-group:hover, #WRAPPER > #CONTAINER > section > .inline-row .groups > span.ignore > span > span.icon-permission:hover, #WRAPPER > #CONTAINER > section > .inline-row .groups > span.ignore > span > span.rem-permission:hover, #WRAPPER > #CONTAINER > section > .inline-row .groups > span.ignore > span > span.rem-member:hover { - background-image: url("/src/static/sub-menu-side/remove@d52918.svg"); -} -#WRAPPER > #CONTAINER > section > .inline-box .groups > span:not(.ignore) > span.icon-permission, #WRAPPER > #CONTAINER > section > .inline-box .groups > span:not(.ignore) > span.icon-permission:hover, #WRAPPER > #CONTAINER > section > .inline-box .groups > span.ignore > span > span.icon-permission, #WRAPPER > #CONTAINER > section > .inline-box .groups > span.ignore > span > span.icon-permission:hover, #WRAPPER > #CONTAINER > section > .inline-row .groups > span:not(.ignore) > span.icon-permission, #WRAPPER > #CONTAINER > section > .inline-row .groups > span:not(.ignore) > span.icon-permission:hover, #WRAPPER > #CONTAINER > section > .inline-row .groups > span.ignore > span > span.icon-permission, #WRAPPER > #CONTAINER > section > .inline-row .groups > span.ignore > span > span.icon-permission:hover { - border-color: #ddd; - background-color: #eee; - cursor: default; - background-image: url("/src/static/sub-menu-side/permission.svg"); -} -#WRAPPER > #CONTAINER > section > .inline-box .link_edit, -#WRAPPER > #CONTAINER > section > .inline-box .link_remove, #WRAPPER > #CONTAINER > section > .inline-row .link_edit, -#WRAPPER > #CONTAINER > section > .inline-row .link_remove { - display: inline-block; - float: right; - 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, #WRAPPER > #CONTAINER > section > .inline-row .link_edit > svg, -#WRAPPER > #CONTAINER > section > .inline-row .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, #WRAPPER > #CONTAINER > section > .inline-row .link_edit:hover > svg, -#WRAPPER > #CONTAINER > section > .inline-row .link_remove:hover > svg { - fill: #2193e6 !important; -} -#WRAPPER > #CONTAINER > section > .inline-box .link_remove:hover > svg, #WRAPPER > #CONTAINER > section > .inline-row .link_remove:hover > svg { - fill: #d52918 !important; -} -#WRAPPER > #CONTAINER > section.fstart { - flex-direction: row; - flex-wrap: wrap; - justify-content: flex-start; - align-items: center; -} -#WRAPPER > #CONTAINER > section.fstart .searchbar { - flex: auto 1 1; -} -#WRAPPER > #CONTAINER > section.active > .inline-row { - flex: auto 1 1; -} -#WRAPPER > #CONTAINER > section > .inline-row { - width: calc( 100% - 4em - 2*1em ); - display: flex; - flex-direction: row; - flex-wrap: nowrap; - justify-content: space-between; - align-items: center; - overflow: hidden; -} -#WRAPPER > #CONTAINER > section > .inline-row > span { - display: flex; - flex-direction: column; - justify-content: space-around; - flex: 100% 1 1; - border-left: 1px solid #ddd; - text-align: center; -} -#WRAPPER > #CONTAINER > section > .inline-row > span:first-child { - border-left: 0; -} -#WRAPPER > #CONTAINER > section > .inline-row button { - flex: auto; - 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.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 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; -} + /* (2) Boutons */ } + #WRAPPER > #CONTAINER > section { + display: none; + flex-grow: 1; } + #WRAPPER > #CONTAINER > section.active { + display: flex; + flex-direction: row; + align-items: flex-start; + justify-content: flex-start; + flex-wrap: wrap; } + #WRAPPER > #CONTAINER > section.active .inline-box { + flex: 0 0 1; } + #WRAPPER > #CONTAINER > section.active .inline-row { + flex: 3em 0 1; } + #WRAPPER > #CONTAINER > section.active .searchbar { + display: inline-block; + position: relative; + flex: calc( 100% - 2*1em - 2*1em ); + margin: 1em; + padding: .5em 1em; + padding-left: 2em; + border-radius: 3px; + border: 1px solid #b1b1b1; + background: #fff url("/src/static/sub-menu-side/search@b1b1b1.svg") 0.5em center no-repeat; + background-size: 1em; + transition: border .4s ease-in-out; } + #WRAPPER > #CONTAINER > section.active .searchbar:hover, #WRAPPER > #CONTAINER > section.active .searchbar:focus { + border-color: #5630ed; } + #WRAPPER > #CONTAINER > section.active .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, #WRAPPER > #CONTAINER > section > .inline-row { + 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; + /* (0) Etat des machines */ + /* (1) Titre de l'element */ + /* (2) Code RFID */ + /* (3) Adresse mail */ + /* (4) Groupes */ + /* (5) Lien vers la modification */ + /* (6) Lien vers la suppression */ } + #WRAPPER > #CONTAINER > section > .inline-box.hidden, #WRAPPER > #CONTAINER > section > .inline-row.hidden { + display: none; } + #WRAPPER > #CONTAINER > section > .inline-box a, #WRAPPER > #CONTAINER > section > .inline-row a { + text-decoration: none; + color: inherit; } + #WRAPPER > #CONTAINER > section > .inline-box.selected, #WRAPPER > #CONTAINER > section > .inline-row.selected { + border: 1px solid #7362ff; + transition: box-shadow .2s ease-in-out; } + #WRAPPER > #CONTAINER > section > .inline-box.selected:hover, #WRAPPER > #CONTAINER > section > .inline-row.selected:hover { + box-shadow: 2px 2px 7px #aaa; } + #WRAPPER > #CONTAINER > section > .inline-box .state, #WRAPPER > #CONTAINER > section > .inline-row .state { + display: inline-block; + width: .7em; + height: .7em; + margin-right: .3em; + border-radius: 50% / 50%; + background-color: #ddd; } + #WRAPPER > #CONTAINER > section > .inline-box .state[data-state='stopped'], #WRAPPER > #CONTAINER > section > .inline-row .state[data-state='stopped'] { + background-color: #ddd; } + #WRAPPER > #CONTAINER > section > .inline-box .state[data-state='started'], #WRAPPER > #CONTAINER > section > .inline-row .state[data-state='started'] { + background-color: #22E07B; } + #WRAPPER > #CONTAINER > section > .inline-box .state[data-state='signaled'], #WRAPPER > #CONTAINER > section > .inline-row .state[data-state='signaled'] { + background-color: #3897D6; } + #WRAPPER > #CONTAINER > section > .inline-box .state[data-state='locked'], #WRAPPER > #CONTAINER > section > .inline-row .state[data-state='locked'] { + background-color: #EA460A; } + #WRAPPER > #CONTAINER > section > .inline-box .state[data-state='detached'], #WRAPPER > #CONTAINER > section > .inline-row .state[data-state='detached'] { + background-color: #AB1EE2; } + #WRAPPER > #CONTAINER > section > .inline-box .title, #WRAPPER > #CONTAINER > section > .inline-row .title { + display: inline-block; + font-size: 1.15em; + font-weight: bold; + color: #ea4c06; + white-space: nowrap; } + #WRAPPER > #CONTAINER > section > .inline-box .title > span, #WRAPPER > #CONTAINER > section > .inline-row .title > span { + font-size: .8em; + color: #333; } + #WRAPPER > #CONTAINER > section > .inline-box .code, + #WRAPPER > #CONTAINER > section > .inline-box .mail, #WRAPPER > #CONTAINER > section > .inline-row .code, + #WRAPPER > #CONTAINER > section > .inline-row .mail { + display: block; + margin: 1em; + color: #333; + white-space: nowrap; } + #WRAPPER > #CONTAINER > section > .inline-box .code svg, + #WRAPPER > #CONTAINER > section > .inline-box .mail svg, #WRAPPER > #CONTAINER > section > .inline-row .code svg, + #WRAPPER > #CONTAINER > section > .inline-row .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#stylisable, + #WRAPPER > #CONTAINER > section > .inline-box .mail svg path#stylisable, #WRAPPER > #CONTAINER > section > .inline-row .code svg path#stylisable, + #WRAPPER > #CONTAINER > section > .inline-row .mail svg path#stylisable { + fill: #333 !important; + pointer-events: none; } + #WRAPPER > #CONTAINER > section > .inline-box .code svg path#stroke-stylisable, + #WRAPPER > #CONTAINER > section > .inline-box .mail svg path#stroke-stylisable, #WRAPPER > #CONTAINER > section > .inline-row .code svg path#stroke-stylisable, + #WRAPPER > #CONTAINER > section > .inline-row .mail svg path#stroke-stylisable { + stroke: #333 !important; + pointer-events: none; } + #WRAPPER > #CONTAINER > section > .inline-box .groups, #WRAPPER > #CONTAINER > section > .inline-row .groups { + display: block; + margin: 1em; + color: #333; } + #WRAPPER > #CONTAINER > section > .inline-box .groups svg, #WRAPPER > #CONTAINER > section > .inline-row .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, #WRAPPER > #CONTAINER > section > .inline-row .groups svg path { + fill: #333 !important; + pointer-events: none; } + #WRAPPER > #CONTAINER > section > .inline-box .groups > span:not(.ignore), #WRAPPER > #CONTAINER > section > .inline-box .groups > span.ignore > span, #WRAPPER > #CONTAINER > section > .inline-row .groups > span:not(.ignore), #WRAPPER > #CONTAINER > section > .inline-row .groups > span.ignore > span { + display: inline-block; + position: relative; + padding: .1em .5em; + margin-right: calc( .4em + 2em ); + margin-bottom: .5em; + border-radius: 3px 0 0 3px; + border: 1px solid #bdbdbd; + box-shadow: inset 0 0 2px #fafafa; + background-color: #f9f9f9; + color: #333; + cursor: default; } + #WRAPPER > #CONTAINER > section > .inline-box .groups > span:not(.ignore).add-permission, #WRAPPER > #CONTAINER > section > .inline-box .groups > span:not(.ignore).add-group, #WRAPPER > #CONTAINER > section > .inline-box .groups > span:not(.ignore).add-member, #WRAPPER > #CONTAINER > section > .inline-box .groups > span.ignore > span.add-permission, #WRAPPER > #CONTAINER > section > .inline-box .groups > span.ignore > span.add-group, #WRAPPER > #CONTAINER > section > .inline-box .groups > span.ignore > span.add-member, #WRAPPER > #CONTAINER > section > .inline-row .groups > span:not(.ignore).add-permission, #WRAPPER > #CONTAINER > section > .inline-row .groups > span:not(.ignore).add-group, #WRAPPER > #CONTAINER > section > .inline-row .groups > span:not(.ignore).add-member, #WRAPPER > #CONTAINER > section > .inline-row .groups > span.ignore > span.add-permission, #WRAPPER > #CONTAINER > section > .inline-row .groups > span.ignore > span.add-group, #WRAPPER > #CONTAINER > section > .inline-row .groups > span.ignore > span.add-member { + border-radius: 3px; + cursor: pointer; } + #WRAPPER > #CONTAINER > section > .inline-box .groups > span:not(.ignore).add-permission > div.dropdown, #WRAPPER > #CONTAINER > section > .inline-box .groups > span:not(.ignore).add-group > div.dropdown, #WRAPPER > #CONTAINER > section > .inline-box .groups > span:not(.ignore).add-member > div.dropdown, #WRAPPER > #CONTAINER > section > .inline-box .groups > span.ignore > span.add-permission > div.dropdown, #WRAPPER > #CONTAINER > section > .inline-box .groups > span.ignore > span.add-group > div.dropdown, #WRAPPER > #CONTAINER > section > .inline-box .groups > span.ignore > span.add-member > div.dropdown, #WRAPPER > #CONTAINER > section > .inline-row .groups > span:not(.ignore).add-permission > div.dropdown, #WRAPPER > #CONTAINER > section > .inline-row .groups > span:not(.ignore).add-group > div.dropdown, #WRAPPER > #CONTAINER > section > .inline-row .groups > span:not(.ignore).add-member > div.dropdown, #WRAPPER > #CONTAINER > section > .inline-row .groups > span.ignore > span.add-permission > div.dropdown, #WRAPPER > #CONTAINER > section > .inline-row .groups > span.ignore > span.add-group > div.dropdown, #WRAPPER > #CONTAINER > section > .inline-row .groups > span.ignore > span.add-member > div.dropdown { + display: flex; + flex-direction: column; + flex-wrap: nowrap; + flex: 100%; + justify-content: space-between; + position: absolute; + top: calc( 100% + 5px ); + left: 0; + width: 12em; + height: 500%; + border-radius: 3px; + overflow: hidden; + overflow-y: auto; + background: #fff; + box-shadow: 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15); + z-index: 100; } + #WRAPPER > #CONTAINER > section > .inline-box .groups > span:not(.ignore).add-permission > div.dropdown > span, #WRAPPER > #CONTAINER > section > .inline-box .groups > span:not(.ignore).add-group > div.dropdown > span, #WRAPPER > #CONTAINER > section > .inline-box .groups > span:not(.ignore).add-member > div.dropdown > span, #WRAPPER > #CONTAINER > section > .inline-box .groups > span.ignore > span.add-permission > div.dropdown > span, #WRAPPER > #CONTAINER > section > .inline-box .groups > span.ignore > span.add-group > div.dropdown > span, #WRAPPER > #CONTAINER > section > .inline-box .groups > span.ignore > span.add-member > div.dropdown > span, #WRAPPER > #CONTAINER > section > .inline-row .groups > span:not(.ignore).add-permission > div.dropdown > span, #WRAPPER > #CONTAINER > section > .inline-row .groups > span:not(.ignore).add-group > div.dropdown > span, #WRAPPER > #CONTAINER > section > .inline-row .groups > span:not(.ignore).add-member > div.dropdown > span, #WRAPPER > #CONTAINER > section > .inline-row .groups > span.ignore > span.add-permission > div.dropdown > span, #WRAPPER > #CONTAINER > section > .inline-row .groups > span.ignore > span.add-group > div.dropdown > span, #WRAPPER > #CONTAINER > section > .inline-row .groups > span.ignore > span.add-member > div.dropdown > span { + padding: .5em; + padding-left: 1em; + flex: 2em 1 1; + cursor: pointer; } + #WRAPPER > #CONTAINER > section > .inline-box .groups > span:not(.ignore).add-permission > div.dropdown > span:hover, #WRAPPER > #CONTAINER > section > .inline-box .groups > span:not(.ignore).add-group > div.dropdown > span:hover, #WRAPPER > #CONTAINER > section > .inline-box .groups > span:not(.ignore).add-member > div.dropdown > span:hover, #WRAPPER > #CONTAINER > section > .inline-box .groups > span.ignore > span.add-permission > div.dropdown > span:hover, #WRAPPER > #CONTAINER > section > .inline-box .groups > span.ignore > span.add-group > div.dropdown > span:hover, #WRAPPER > #CONTAINER > section > .inline-box .groups > span.ignore > span.add-member > div.dropdown > span:hover, #WRAPPER > #CONTAINER > section > .inline-row .groups > span:not(.ignore).add-permission > div.dropdown > span:hover, #WRAPPER > #CONTAINER > section > .inline-row .groups > span:not(.ignore).add-group > div.dropdown > span:hover, #WRAPPER > #CONTAINER > section > .inline-row .groups > span:not(.ignore).add-member > div.dropdown > span:hover, #WRAPPER > #CONTAINER > section > .inline-row .groups > span.ignore > span.add-permission > div.dropdown > span:hover, #WRAPPER > #CONTAINER > section > .inline-row .groups > span.ignore > span.add-group > div.dropdown > span:hover, #WRAPPER > #CONTAINER > section > .inline-row .groups > span.ignore > span.add-member > div.dropdown > span:hover { + background-color: #F8F8F8; } + #WRAPPER > #CONTAINER > section > .inline-box .groups > span:not(.ignore) > span.rem-group, #WRAPPER > #CONTAINER > section > .inline-box .groups > span:not(.ignore) > span.icon-permission, #WRAPPER > #CONTAINER > section > .inline-box .groups > span:not(.ignore) > span.rem-permission, #WRAPPER > #CONTAINER > section > .inline-box .groups > span:not(.ignore) > span.rem-member, #WRAPPER > #CONTAINER > section > .inline-box .groups > span.ignore > span > span.rem-group, #WRAPPER > #CONTAINER > section > .inline-box .groups > span.ignore > span > span.icon-permission, #WRAPPER > #CONTAINER > section > .inline-box .groups > span.ignore > span > span.rem-permission, #WRAPPER > #CONTAINER > section > .inline-box .groups > span.ignore > span > span.rem-member, #WRAPPER > #CONTAINER > section > .inline-row .groups > span:not(.ignore) > span.rem-group, #WRAPPER > #CONTAINER > section > .inline-row .groups > span:not(.ignore) > span.icon-permission, #WRAPPER > #CONTAINER > section > .inline-row .groups > span:not(.ignore) > span.rem-permission, #WRAPPER > #CONTAINER > section > .inline-row .groups > span:not(.ignore) > span.rem-member, #WRAPPER > #CONTAINER > section > .inline-row .groups > span.ignore > span > span.rem-group, #WRAPPER > #CONTAINER > section > .inline-row .groups > span.ignore > span > span.icon-permission, #WRAPPER > #CONTAINER > section > .inline-row .groups > span.ignore > span > span.rem-permission, #WRAPPER > #CONTAINER > section > .inline-row .groups > span.ignore > span > span.rem-member { + display: block; + position: absolute; + top: -1px; + left: 100%; + width: 1em; + height: calc( 100% - .1em - 2px ); + padding: .12em .5em; + border-radius: 0 3px 3px 0; + border: 1px solid #bdbdbd; + box-shadow: inset 0 0 2px #fafafa; + background: url("/src/static/sub-menu-side/remove.svg") center center no-repeat; + background-size: auto 70%; + background-color: #f9f9f9; + color: inherit; + cursor: pointer; } + #WRAPPER > #CONTAINER > section > .inline-box .groups > span:not(.ignore) > span.rem-group:hover, #WRAPPER > #CONTAINER > section > .inline-box .groups > span:not(.ignore) > span.icon-permission:hover, #WRAPPER > #CONTAINER > section > .inline-box .groups > span:not(.ignore) > span.rem-permission:hover, #WRAPPER > #CONTAINER > section > .inline-box .groups > span:not(.ignore) > span.rem-member:hover, #WRAPPER > #CONTAINER > section > .inline-box .groups > span.ignore > span > span.rem-group:hover, #WRAPPER > #CONTAINER > section > .inline-box .groups > span.ignore > span > span.icon-permission:hover, #WRAPPER > #CONTAINER > section > .inline-box .groups > span.ignore > span > span.rem-permission:hover, #WRAPPER > #CONTAINER > section > .inline-box .groups > span.ignore > span > span.rem-member:hover, #WRAPPER > #CONTAINER > section > .inline-row .groups > span:not(.ignore) > span.rem-group:hover, #WRAPPER > #CONTAINER > section > .inline-row .groups > span:not(.ignore) > span.icon-permission:hover, #WRAPPER > #CONTAINER > section > .inline-row .groups > span:not(.ignore) > span.rem-permission:hover, #WRAPPER > #CONTAINER > section > .inline-row .groups > span:not(.ignore) > span.rem-member:hover, #WRAPPER > #CONTAINER > section > .inline-row .groups > span.ignore > span > span.rem-group:hover, #WRAPPER > #CONTAINER > section > .inline-row .groups > span.ignore > span > span.icon-permission:hover, #WRAPPER > #CONTAINER > section > .inline-row .groups > span.ignore > span > span.rem-permission:hover, #WRAPPER > #CONTAINER > section > .inline-row .groups > span.ignore > span > span.rem-member:hover { + background-image: url("/src/static/sub-menu-side/remove@d52918.svg"); } + #WRAPPER > #CONTAINER > section > .inline-box .groups > span:not(.ignore) > span.icon-permission, #WRAPPER > #CONTAINER > section > .inline-box .groups > span:not(.ignore) > span.icon-permission:hover, #WRAPPER > #CONTAINER > section > .inline-box .groups > span.ignore > span > span.icon-permission, #WRAPPER > #CONTAINER > section > .inline-box .groups > span.ignore > span > span.icon-permission:hover, #WRAPPER > #CONTAINER > section > .inline-row .groups > span:not(.ignore) > span.icon-permission, #WRAPPER > #CONTAINER > section > .inline-row .groups > span:not(.ignore) > span.icon-permission:hover, #WRAPPER > #CONTAINER > section > .inline-row .groups > span.ignore > span > span.icon-permission, #WRAPPER > #CONTAINER > section > .inline-row .groups > span.ignore > span > span.icon-permission:hover { + border-color: #ddd; + background-color: #eee; + cursor: default; + background-image: url("/src/static/sub-menu-side/permission.svg"); } + #WRAPPER > #CONTAINER > section > .inline-box .link_edit, + #WRAPPER > #CONTAINER > section > .inline-box .link_remove, #WRAPPER > #CONTAINER > section > .inline-row .link_edit, + #WRAPPER > #CONTAINER > section > .inline-row .link_remove { + display: inline-block; + float: right; + 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, #WRAPPER > #CONTAINER > section > .inline-row .link_edit > svg, + #WRAPPER > #CONTAINER > section > .inline-row .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, #WRAPPER > #CONTAINER > section > .inline-row .link_edit:hover > svg, + #WRAPPER > #CONTAINER > section > .inline-row .link_remove:hover > svg { + fill: #2193e6 !important; } + #WRAPPER > #CONTAINER > section > .inline-box .link_remove:hover > svg, #WRAPPER > #CONTAINER > section > .inline-row .link_remove:hover > svg { + fill: #d52918 !important; } + #WRAPPER > #CONTAINER > section.fstart { + flex-direction: row; + flex-wrap: wrap; + justify-content: flex-start; + align-items: center; } + #WRAPPER > #CONTAINER > section.fstart .searchbar { + flex: auto 1 1; } + #WRAPPER > #CONTAINER > section.active > .inline-row { + flex: auto 1 1; } + #WRAPPER > #CONTAINER > section > .inline-row { + width: calc( 100% - 4em - 2*1em ); + display: flex; + flex-direction: row; + flex-wrap: nowrap; + justify-content: space-between; + align-items: center; + overflow: hidden; } + #WRAPPER > #CONTAINER > section > .inline-row > span { + display: flex; + flex-direction: column; + justify-content: space-around; + flex: 100% 1 1; + border-left: 1px solid #ddd; + text-align: center; } + #WRAPPER > #CONTAINER > section > .inline-row > span:first-child { + border-left: 0; } + #WRAPPER > #CONTAINER > section > .inline-row button { + flex: auto; + 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.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 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 =========================================================*/ @@ -568,47 +488,40 @@ article.check-table { flex-wrap: wrap; justify-content: space-between; border-radius: 3px; - border: 1px solid #ddd; -} -article.check-table > div { - display: flex; - flex-direction: row; - flex-wrap: nowrap; - justify-content: space-between; - flex: 100%; - padding: .8em 0; - color: #333; - background: #f8f8f8; - border-bottom: 1px solid #eee; - transition: background .2s ease-in-out; - overflow: hidden; -} -article.check-table > div:nth-child(2n) { - background: #fdfdfd; -} -article.check-table > div > span { - flex: 100%; - display: flex; - flex-direction: row; - flex-wrap: nowrap; - justify-content: center; - /* (1) Gestion du checkbox hack */ -} -article.check-table > div > span input[type='checkbox'] { - display: none; -} -article.check-table > div > span input[type='checkbox'] + label[for] { - display: inline-block; - position: absolute; - width: 1.2em; - height: 1.2em; - background: url("/src/static/container/checkbox@999999.svg") center center no-repeat; - background-size: 100% auto; - transition: box-shadow .2s ease-in-out; - cursor: pointer; -} -article.check-table > div > span input[type='checkbox']:checked + label[for] { - background-image: url("/src/static/container/checkbox@checked@007dd8.svg"); -} + border: 1px solid #ddd; } + article.check-table > div { + display: flex; + flex-direction: row; + flex-wrap: nowrap; + justify-content: space-between; + flex: 100%; + padding: .8em 0; + color: #333; + background: #f8f8f8; + border-bottom: 1px solid #eee; + transition: background .2s ease-in-out; + overflow: hidden; } + article.check-table > div:nth-child(2n) { + background: #fdfdfd; } + article.check-table > div > span { + flex: 100%; + display: flex; + flex-direction: row; + flex-wrap: nowrap; + justify-content: center; + /* (1) Gestion du checkbox hack */ } + article.check-table > div > span input[type='checkbox'] { + display: none; } + article.check-table > div > span input[type='checkbox'] + label[for] { + display: inline-block; + position: absolute; + width: 1.2em; + height: 1.2em; + background: url("/src/static/container/checkbox@999999.svg") center center no-repeat; + background-size: 100% auto; + transition: box-shadow .2s ease-in-out; + cursor: pointer; } + article.check-table > div > span input[type='checkbox']:checked + label[for] { + background-image: url("/src/static/container/checkbox@checked@007dd8.svg"); } /*# sourceMappingURL=container.css.map */