From 2aa61260c68944ea5d24ec2bd99267c920b1f07e Mon Sep 17 00:00:00 2001 From: xdrm-brackets Date: Sun, 19 Feb 2017 16:31:26 +0100 Subject: [PATCH] Added vignettes for machine states (back part to do) --- build/viewer/view/machine/view.php | 4 + build/viewer/view/machine/view.twig | 1 + public_html/css/container.scss | 21 + public_html/css/min/container.css | 1069 +++++++++++++++------------ 4 files changed, 613 insertions(+), 482 deletions(-) diff --git a/build/viewer/view/machine/view.php b/build/viewer/view/machine/view.php index b44ce60..be824a8 100755 --- a/build/viewer/view/machine/view.php +++ b/build/viewer/view/machine/view.php @@ -39,6 +39,10 @@ return $answer->get('machines'); })); + + $twig->addFunction(new \Twig_Function('f_getstate', function(){ + return 'detached'; + })); $twig->addFunction(new \Twig_Function('f_clusters', function($id_machine){ $request = new Request('machineDefault/getClusters', [ diff --git a/build/viewer/view/machine/view.twig b/build/viewer/view/machine/view.twig index 47aac65..3f2033d 100755 --- a/build/viewer/view/machine/view.twig +++ b/build/viewer/view/machine/view.twig @@ -3,6 +3,7 @@ {% for machine in f_machines() %}
+ {{ machine.name }} #{{ machine.name }} {{ p_icon.remove | raw }} diff --git a/public_html/css/container.scss b/public_html/css/container.scss index dcc85c7..ef37011 100755 --- a/public_html/css/container.scss +++ b/public_html/css/container.scss @@ -110,6 +110,27 @@ } } + /* (0) Etat des machines */ + .state{ + display: inline-block; + + width: .7em; + height: .7em; + + margin-right: .3em; + + border-radius: 50% / 50%; + + background-color: #ddd; + + &[data-state='stop']{ background-color: #ddd; } + &[data-state='start']{ background-color: #22E07B; } + &[data-state='signaled']{ background-color: #3897D6; } + &[data-state='locked']{ background-color: #EA460A; } + &[data-state='detached']{ background-color: #AB1EE2; } + + } + /* (1) Titre de l'element */ .title{ display: inline-block; diff --git a/public_html/css/min/container.css b/public_html/css/min/container.css index 7c654e5..af15917 100755 --- a/public_html/css/min/container.css +++ b/public_html/css/min/container.css @@ -14,453 +14,551 @@ /* [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; - /* (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 .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='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; +} /* [4] Tableau à cocher =========================================================*/ @@ -470,40 +568,47 @@ 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 */