@charset "UTF-8"; /* [1] COULEURS =========================================================*/ /* (1) COULEURS DU THEME $DEFAULT */ /* (2) COULEURS DE THEME $DARK */ /* (3) Couleurs du theme pour la timeline */ /* [2] DIMENSIONS =========================================================*/ /* (1) Layout de base */ /* [3] Mixins =========================================================*/ /* [4] Functions =========================================================*/ /* [1] Panel list (tokens, utilisateurs, etc) =========================================================*/ /* [1] COULEURS =========================================================*/ /* (1) COULEURS DU THEME $DEFAULT */ /* (2) COULEURS DE THEME $DARK */ /* (3) Couleurs du theme pour la timeline */ /* [2] DIMENSIONS =========================================================*/ /* (1) Layout de base */ /* [3] Mixins =========================================================*/ /* [4] Functions =========================================================*/ /* [1] Panneau d'ajout/suppression d'elements =========================================================*/ #WRAPPER > #CONTAINER section[data-panel-list] { display: block; position: relative; border-radius: 3px; border: 1px solid #ccc; background-color: #fff; font-size: .9em; color: #000; /* (1) Header (titre + ajout) */ /* (2) Description (sous le header) */ /* (3) Liste des elements */ /* (5) Formulaire d'ajout d'un nouvel element */ } #WRAPPER > #CONTAINER section[data-panel-list] > div[data-header] { display: flex; position: relative; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: center; padding: .5em .7em; border-radius: 3px 3px 0 0; border-bottom: 1px solid #ccc; background-color: #f5f5f5; box-shadow: inset 0 0 5px #eee; } #WRAPPER > #CONTAINER section[data-panel-list] > div[data-header] > span, #WRAPPER > #CONTAINER section[data-panel-list] > div[data-header] > button { color: #333; font-weight: bold; line-height: 2em; } #WRAPPER > #CONTAINER section[data-panel-list] > div[data-header] > button { padding: .1em .7em; border-radius: 3px; border: 1px solid #777; background: #ecf0f1; -webkit-transition: all 0.1s ease-in-out; transition: all 0.1s ease-in-out; color: #777; } #WRAPPER > #CONTAINER section[data-panel-list] > div[data-header] > button:hover { background: #399ced; border-color: #1484df; color: #fff; } #WRAPPER > #CONTAINER section[data-panel-list] > div[data-description] { display: block; position: relative; border-bottom: 1px solid #ccc; padding: .7em .7em; color: #555; } #WRAPPER > #CONTAINER section[data-panel-list] > ul[data-list] { display: flex; position: relative; flex-direction: column; justify-content: flex-start; flex-wrap: nowrap; margin: 0; padding: 0; list-style: none; /* (4) Chaque element de la liste */ } #WRAPPER > #CONTAINER section[data-panel-list] > ul[data-list] > li[data-element] { display: flex; flex-direction: row; justify-content: space-between; align-items: center; flex-wrap: nowrap; padding: 1em; /* (4.1) Logo et type d'element */ /* (4.2) Donnees descriptives */ /* (4.3) Bouton de suppression */ } #WRAPPER > #CONTAINER section[data-panel-list] > ul[data-list] > li[data-element]:not(:last-child) { border-bottom: 1px solid #ccc; } #WRAPPER > #CONTAINER section[data-panel-list] > ul[data-list] > li[data-element] > div:nth-child(1) { display: flex; width: 10em; height: 6em; flex-direction: column; justify-content: flex-end; align-items: center; background-size: auto 50%; } #WRAPPER > #CONTAINER section[data-panel-list] > ul[data-list] > li[data-element] > div:nth-child(1)[data-token] { background: url("/src/static/container/token.svg@666666") center 1em no-repeat; } #WRAPPER > #CONTAINER section[data-panel-list] > ul[data-list] > li[data-element] > div:nth-child(1)[data-token].active { background-image: url("/src/static/container/token.svg@399ced"); } #WRAPPER > #CONTAINER section[data-panel-list] > ul[data-list] > li[data-element] > div:nth-child(1)[data-user] { background: url("/src/static/container/user.svg@666666") center 1em no-repeat; } #WRAPPER > #CONTAINER section[data-panel-list] > ul[data-list] > li[data-element] > div:nth-child(1)[data-user].active { background-image: url("/src/static/container/user.svg@399ced"); } #WRAPPER > #CONTAINER section[data-panel-list] > ul[data-list] > li[data-element] > div:nth-child(1)[data-number] { background: url("/src/static/container/phone_number.svg@666666") center 1em no-repeat; } #WRAPPER > #CONTAINER section[data-panel-list] > ul[data-list] > li[data-element] > div:nth-child(1)[data-number].active { background-image: url("/src/static/container/phone_number.svg@399ced"); } #WRAPPER > #CONTAINER section[data-panel-list] > ul[data-list] > li[data-element] > div:nth-child(1) > span { display: block; padding: 0 .4em; border-radius: 3px; border: 1px solid #ddd; font-size: .8em; color: #555; text-transform: uppercase; font-weight: bold; } #WRAPPER > #CONTAINER section[data-panel-list] > ul[data-list] > li[data-element] > div:nth-child(n+2) { display: flex; position: relative; flex: 10em; padding: 1em; flex-direction: column; justify-content: flex-start; align-items: flex-start; font-size: 1em; color: #000; } #WRAPPER > #CONTAINER section[data-panel-list] > ul[data-list] > li[data-element] > div:nth-child(n+2) > span[data-prefix]:before { content: attr(data-prefix) ": "; font-weight: normal; } #WRAPPER > #CONTAINER section[data-panel-list] > ul[data-list] > li[data-element] > button { padding: .1em .7em; height: 2em; border-radius: 3px; border: 1px solid #de2b08; background: #fff; color: #de2b08; font-weight: bold; -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } #WRAPPER > #CONTAINER section[data-panel-list] > ul[data-list] > li[data-element] > button:hover { background: #de2b08; color: #fff; } #WRAPPER > #CONTAINER section[data-panel-list] > div[data-add] { display: none; position: relative; padding: 1em; border-bottom: 1px solid #ccc; background-color: #ecf0f1; /* (5.1) Description du champ de texte */ /* (5.2) Champs de texte */ /* (5.3) Bouton de creation animation de @hover*/ } #WRAPPER > #CONTAINER section[data-panel-list] > div[data-add].active { display: block; } #WRAPPER > #CONTAINER section[data-panel-list] > div[data-add] > .label { display: inline-block; width: 18em; padding-right: 2em; text-align: right; color: #3b494c; } #WRAPPER > #CONTAINER section[data-panel-list] > div[data-add] > input[type='text'], #WRAPPER > #CONTAINER section[data-panel-list] > div[data-add] > input[type='email'], #WRAPPER > #CONTAINER section[data-panel-list] > div[data-add] > input[type='password'] { margin: 1em 0; padding: .5em .7em; border-radius: 3px; border: 1px solid #ddd; background-color: #fff; color: #000; font-weight: normal; } #WRAPPER > #CONTAINER section[data-panel-list] > div[data-add] > input[type='text']:focus, #WRAPPER > #CONTAINER section[data-panel-list] > div[data-add] > input[type='email']:focus, #WRAPPER > #CONTAINER section[data-panel-list] > div[data-add] > input[type='password']:focus { border-color: #399ced; box-shadow: inset 0 0 2px #ddd; } #WRAPPER > #CONTAINER section[data-panel-list] > div[data-add] > input[type='submit']:hover { background: #399ced; border-color: #1484df; color: #fff; } /* [2] Formulaire de type 'timeline' =========================================================*/ /* [1] COULEURS =========================================================*/ /* (1) COULEURS DU THEME $DEFAULT */ /* (2) COULEURS DE THEME $DARK */ /* (3) Couleurs du theme pour la timeline */ /* [2] DIMENSIONS =========================================================*/ /* (1) Layout de base */ /* [3] Mixins =========================================================*/ /* [4] Functions =========================================================*/ /* [1] Formulaire de type timeline =========================================================*/ #WRAPPER > #CONTAINER section[data-timeline] { display: block; position: relative; background-color: #fff; font-size: .9em; color: #000; /* (1) On ajoute le liseré à droite pour TOUS les éléments */ /* (2) Titres de sections */ /* (3) Titres des sous-sections */ /* (4) Titres genre text message */ /* (5) 'Tags' -> textes sur le liseré gauche */ /* (6) Input d'upload de fichier (css hack) */ /* Contiendra l'input*/ /* Animation de hover*/ /* Animation de .active*/ /* (7) Inputs de type text */ /* (8) Gestion des espacements */ /* (10) Gestion des espacements verticaux */ /* (11) Gestion des custom