@import 'constants'; #WRAPPER > #CONTAINER{ /* [1] Section (contenu) =========================================================*/ & > section{ display: none; flex-grow: 1; } // @active + .list & > section.active{ display: flex; flex-direction: row; align-items: flex-start; justify-content: flex-start; flex-wrap: wrap; &.contain-check-table{ flex-direction: column; flex-wrap: nowrap; } .inline-box{ flex: 0 0 1; } .inline-row{ flex: 3em 0 1; } // Barre de recherche .searchbar{ display: inline-block; position: relative; // width: calc( 100% - 2*1em - 2*1em ); flex: calc( 100% - 2*1em - 2*1em ); // height: 1em; margin: 1em; padding: .5em 1em; padding-left: 2em; border-radius: 3px; border: 1px solid #b1b1b1; // box-shadow: 0 0 1px #b7b7b7; background: #fff url('/src/static/sub-menu-side/search@b1b1b1.svg') .5em center no-repeat; background-size: 1em; transition: border .4s ease-in-out; &:hover, &:focus{ border-color: $form-search-color; } } // Erreur .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 $form-invalid-color; background: $form-invalid-color; color: #fff; text-shadow: 1px 1px darken($form-invalid-color, 10); } } /* [2] INLINE-BOX pour afficher les listes de donnees =========================================================*/ & > section > .inline-box, & > section > .inline-row{ display: inline-block; position: relative; // width: calc( 50% - 2*1em - 2*1em ); flex: calc( 50% - 2*1em - 2*1em ); margin: 1em; padding: 1em; border-radius: 3px; box-shadow: 0 0 1px #b7b7b7; background-color: #fff; // Lors de la recherche, quand on veut en masquer &.hidden{ display: none; } a{ text-decoration: none; color: inherit; } &.selected{ border: 1px solid #7362ff; transition: box-shadow .2s ease-in-out; &:hover{ box-shadow: 2px 2px 7px #aaa; } } /* (0) Etat des machines */ .state{ display: inline-block; width: .7em; height: .7em; margin-right: .3em; border-radius: 50% / 50%; background-color: #ddd; &[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: transparent; } } /* (1) Titre de l'element */ .title{ display: inline-block; font-size: 1.15em; font-weight: bold; color: darken($theme-color, 2); white-space: nowrap; & > span{ font-size: .8em; color: #333; } } /* (2) Code RFID */ /* (3) Adresse mail */ .code, .mail{ display: block; margin: 1em; color: #333; white-space: nowrap; // svg (icone) svg{ display: inline-block; position: relative; margin-left: .5em; margin-right: .5em; margin-bottom: -.6em; width: 1.5em; height: 2em; pointer-events: none; path#stylisable{ fill: #333 !important; pointer-events: none; } path#stroke-stylisable{ stroke: #333 !important; pointer-events: none; } } } /* (4) Groupes */ .groups{ display: block; margin: 1em; color: #333; // white-space: nowrap; // svg (icone) svg{ display: inline-block; position: relative; margin-left: .5em; margin-right: .5em; margin-bottom: -.6em; width: 1.5em; height: 2em; pointer-events: none; path{ fill: #333 !important; pointer-events: none; } } & > span:not(.ignore), & > 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; &.add-permission, &.add-group, &.add-member{ border-radius: 3px; cursor: pointer; & > 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,.12),0 2px 10px 0 rgba(34,36,38,.15); z-index: 100; & > span{ padding: .5em; padding-left: 1em; flex: 2em 1 1; cursor: pointer; &:hover{ background-color: #F8F8F8; } } } } & > span.rem-group, & > span.icon-permission, & > span.rem-permission, & > 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; &:hover{ background-image: url('/src/static/sub-menu-side/remove@#{$rd-form-invalid-color}.svg'); } } & > span.icon-permission, & > span.icon-permission:hover{ border-color: #ddd; background-color: #eee; cursor: default; background-image: url('/src/static/sub-menu-side/permission.svg'); } } } /* (5) Lien vers la modification */ .link_edit, .link_remove{ display: inline-block; float: right; position: relative; width: 1em; height: 1em; margin-left: 1em; cursor: pointer; & > svg{ width: 100%; height: 100%; fill: #ddd !important; transition: fill .4s ease-in-out; pointer-events: none; } &:hover{ & > svg{ fill: $form-neutral-color !important; } } } /* (6) Lien vers la suppression */ .link_remove{ &:hover{ & > svg{ fill: $form-invalid-color !important; } } } } /* [2-2] INLINE-ROW pour afficher des lignes =========================================================*/ & > section.fstart{ flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: center; .searchbar{ flex: auto 1 1; } } & > section.active > .inline-row{ flex: auto 1 1; } & > 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; // Sur la même ligne répartis équitablement & > span{ display: flex; flex-direction: column; justify-content: space-around; flex: 100% 1 1; border-left: 1px solid #ddd; text-align: center; &:first-child{ border-left: 0; } } button{ flex: auto; width: 5em; } } /* [3] Formulaires =========================================================*/ & > section > form, .form{ display: inline-block; position: relative; left: 50%; margin: .3em 0; padding: 1em; border-radius: 3px; border-color: $form-invalid-color; box-shadow: 0 0 1px #b7b7b7; background-color: #fff; transform: translateX(-50%); &.valid{ border-color: $form-valid-color; } &.neutral{ border-color: $form-neutral-color; } &.search{ border-color: $form-neutral-color; } // Textes centres .edit_search_view, .remove_search_view{ display: inline-block; width: 100%; text-align: center; color: #aaaaaa; span{ color: #888888; } } span.error-msg{ display: inline-block; color: #F03C3C; font-size: 0.7em; } } /* (1) Champs de texte */ input[type=text], input[type=mail], input[type=password], select, &.invalid > input[type=text], &.invalid > input[type=mail], &.invalid > input[type=password], &.invalid > select, input.invalid[type=text], input.invalid[type=mail], input.invalid[type=password], select.invalid{ display: inline-block; margin: 1em 0; padding: .7em 1em; border-radius: 3px; border: 1px solid #d7dde8; color: #2f3033; transition: border .4s ease-in-out; &:focus, &:hover{ border-color: $form-invalid-color; } } select{ width: 100%; display: block; background: #fff; option{ padding: .5em; } } // Champs valides .valid > input[type=text], .valid > input[type=mail], .valid > input[type=password], .valid > select, input.valid[type=text], input.valid[type=mail], input.valid[type=password], select.valid{ &:focus, &:hover{ border-color: $form-valid-color; } } // Champs neutres .neutral > input[type=text], .neutral > input[type=mail], .neutral > input[type=password], .neutral > select, input.neutral[type=text], input.neutral[type=mail], input.neutral[type=password], select.neutral{ &:focus, &:hover{ border-color: $form-neutral-color; } } // Champs neutres .search > input[type=text], .search > input[type=mail], .search > input[type=password], .search > select, input.search[type=text], input.search[type=mail], input.search[type=password]{ &:focus, &:hover{ border-color: $form-search-color; } } /* (2) Boutons */ button, button.invalid, .invalid > button{ display: inline-block; position: relative; left: 50%; padding: .7em 1em; border-radius: 3px; border: 1px solid $form-invalid-color; background: $form-invalid-color center center no-repeat; color: #fff; transition: background .4s ease-in-out; transform: translateX(-50%); &:hover, &:focus, &:disabled{ background-color: #fff; color: $form-invalid-color; } } // Boutons valides button.valid, .valid > button{ border-color: $form-valid-color; background-color: $form-valid-color; &:hover, &:focus, &:disabled{ background-color: #fff; color: $form-valid-color; } } // Boutons neutres button.neutral, .neutral > button{ border-color: $form-neutral-color; background-color: $form-neutral-color; &:hover, &:focus, &:disabled{ background-color: #fff; color: $form-neutral-color; } } // Boutons recherche button.search, .search > button{ border-color: $form-search-color; background-color: $form-search-color; &:hover, &:focus, &:disabled{ background-color: #fff; color: $form-search-color; } } // Boutons quand action validee .invalid > button.active, button.invalid.active, button.active{ background-color: #fff; background-image: url('/src/static/container/active@#{$rd-form-invalid-color}.svg') !important; background-size: 1em auto; color: transparent !important; } button.valid.active, .valid > button.active{ background-image: url('/src/static/container/active@#{$rd-form-valid-color}.svg') !important; } button.neutral.active, .neutral > button.active{ background-image: url('/src/static/container/active@#{$rd-form-neutral-color}.svg') !important; } button.search.active, .search > button.active{ background-image: url('/src/static/container/active@#{$rd-form-search-color}.svg') !important; } // "OU" separant les boutons hr.OR[data-label]{ display: block; position: relative; width: 100%; height: 0; border: 0; border-bottom: 1px dashed $form-invalid-color; &:before{ content: attr(data-label); display: inline-block; position: relative; top: 50%; left: 50%; padding: 0 1em; background-color: #fff; color: $form-invalid-color; transform: translateX(-50%) translatey(-50%); } } // "OU" valide .valid > hr.OR, hr.OR.valid{ border-bottom: 1px dashed $form-valid-color; &:before{ color: $form-valid-color; } } // "OU" neutre .neutral > hr.OR, hr.OR.neutral{ border-bottom: 1px dashed $form-neutral-color; &:before{ color: $form-neutral-color; } } // "OU" recherche .search > hr.OR, hr.OR.search{ border-bottom: 1px dashed $form-search-color; &:before{ color: $form-search-color; } } } /* [4] Tableau à cocher =========================================================*/ article.check-table{ display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; border-radius: 3px; border: 1px solid #ddd; & > 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; &:nth-child(2n){ background: #fdfdfd; } overflow: hidden; & > span{ flex: 100%; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; /* (1) Gestion du checkbox hack */ input[type='checkbox']{ display: none; } input[type='checkbox'] + label[for]{ display: inline-block; position: absolute; width: 1.2em; height: 1.2em; // border-radius: 50% / 50%; 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; } input[type='checkbox']:checked + label[for]{ background-image: url('/src/static/container/checkbox@checked@007dd8.svg'); } } } }