xdrm-brackets
/
NxTIC
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
NxTIC/css/panel-list/nested.css

177 lines
27 KiB
CSS
Raw Normal View History

Gestion du liseré de gauche + des gros titres (<h5>)
2016-04-20 14:57:59 +00:00
/* [1] COULEURS
=========================================================*/
/* (1) COULEURS DU THEME $DEFAULT */
/* (2) COULEURS DE THEME $DARK */
Prototype fiche relation moitié fait
2016-04-22 08:27:58 +00:00
/* (3) Couleurs du theme pour la timeline */
Gestion du liseré de gauche + des gros titres (<h5>)
2016-04-20 14:57:59 +00:00
/* [2] DIMENSIONS
=========================================================*/
/* (1) Layout de base */
Prototype fiche relation moitié fait
2016-04-22 08:27:58 +00:00
/* [3] Mixins
=========================================================*/
Prise en compte des couleurs pour les images (sass @function) + custom <select>
2016-04-22 09:20:27 +00:00
/* [4] Functions
=========================================================*/
Gestion du liseré de gauche + des gros titres (<h5>)
2016-04-20 14:57:59 +00:00
/* [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;
Prototype fiche relation moitié fait
2016-04-22 08:27:58 +00:00
-webkit-transition: all 0.1s ease-in-out;
transition: all 0.1s ease-in-out;
Gestion du liseré de gauche + des gros titres (<h5>)
2016-04-20 14:57:59 +00:00
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("/f/svg/token/st/container/666666") center 1em no-repeat; }
#WRAPPER > #CONTAINER section[data-panel-list] > ul[data-list] > li[data-element] > div:nth-child(1)[data-token].active {
Prise en compte des couleurs pour les images (sass @function) + custom <select>
2016-04-22 09:20:27 +00:00
background-image: url("/f/svg/token/st/container/${color-str($theme-fg-primary)"); }
Gestion du liseré de gauche + des gros titres (<h5>)
2016-04-20 14:57:59 +00:00
#WRAPPER > #CONTAINER section[data-panel-list] > ul[data-list] > li[data-element] > div:nth-child(1)[data-user] {
background: url("/f/svg/user/st/container/666666") center 1em no-repeat; }
#WRAPPER > #CONTAINER section[data-panel-list] > ul[data-list] > li[data-element] > div:nth-child(1)[data-user].active {
Prise en compte des couleurs pour les images (sass @function) + custom <select>
2016-04-22 09:20:27 +00:00
background-image: url("/f/svg/user/st/container/${color-str($theme-fg-primary)"); }
Gestion du liseré de gauche + des gros titres (<h5>)
2016-04-20 14:57:59 +00:00
#WRAPPER > #CONTAINER section[data-panel-list] > ul[data-list] > li[data-element] > div:nth-child(1)[data-number] {
background: url("/f/svg/phone_number/st/container/666666") center 1em no-repeat; }
#WRAPPER > #CONTAINER section[data-panel-list] > ul[data-list] > li[data-element] > div:nth-child(1)[data-number].active {
Prise en compte des couleurs pour les images (sass @function) + custom <select>
2016-04-22 09:20:27 +00:00
background-image: url("/f/svg/phone_number/st/container/${color-str($theme-fg-primary)"); }
Gestion du liseré de gauche + des gros titres (<h5>)
2016-04-20 14:57:59 +00:00
#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;
font-weight: bold; }
#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;
Prototype fiche relation moitié fait
2016-04-22 08:27:58 +00:00
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out; }
Gestion du liseré de gauche + des gros titres (<h5>)
2016-04-20 14:57:59 +00:00
#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; }
Prise en compte des couleurs pour les images (sass @function) + custom <select>
2016-04-22 09:20:27 +00:00
/*# sourceMappingURL=data:application/json;base64,ewoJInZlcnNpb24iOiAzLAoJImZpbGUiOiAibmVzdGVkLmNzcyIsCgkic291cmNlcyI6IFsKCQkiLi4vcGFuZWwtbGlzdC5zY3NzIiwKCQkiLi4vY29uc3RhbnRzLnNjc3MiCgldLAoJInNvdXJjZXNDb250ZW50IjogWwoJCSJAaW1wb3J0ICdjb25zdGFudHMnO1xuXG4vKiBbMV0gUGFubmVhdSBkJ2Fqb3V0L3N1cHByZXNzaW9uIGQnZWxlbWVudHNcbj09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PSovXG4jV1JBUFBFUiA+ICNDT05UQUlORVIgc2VjdGlvbltkYXRhLXBhbmVsLWxpc3Rde1xuXHRkaXNwbGF5OiBibG9jaztcblx0cG9zaXRpb246IHJlbGF0aXZlO1xuXG5cdGJvcmRlci1yYWRpdXM6IDNweDtcblx0Ym9yZGVyOiAxcHggc29saWQgI2NjYztcblxuXHRiYWNrZ3JvdW5kLWNvbG9yOiAjZmZmO1xuXG5cdGZvbnQtc2l6ZTogLjllbTtcblx0Y29sb3I6ICMwMDA7XG5cblxuXHQvKiAoMSkgSGVhZGVyICh0aXRyZSArIGFqb3V0KSAqL1xuXHQmID4gZGl2W2RhdGEtaGVhZGVyXXtcblx0XHRkaXNwbGF5OiBmbGV4O1xuXHRcdHBvc2l0aW9uOiByZWxhdGl2ZTtcblxuXHRcdC8vIGZsZXggcHJvcGVydGllc1xuXHRcdGZsZXgtZGlyZWN0aW9uOiByb3c7XG5cdFx0ZmxleC13cmFwOiBub3dyYXA7XG5cdFx0anVzdGlmeS1jb250ZW50OiBzcGFjZS1iZXR3ZWVuO1xuXHRcdGFsaWduLWl0ZW1zOiBjZW50ZXI7XG5cblx0XHRwYWRkaW5nOiAuNWVtIC43ZW07XG5cblx0XHRib3JkZXItcmFkaXVzOiAzcHggM3B4IDAgMDtcblx0XHRib3JkZXItYm90dG9tOiAxcHggc29saWQgI2NjYztcblxuXHRcdGJhY2tncm91bmQtY29sb3I6ICNmNWY1ZjU7XG5cdFx0Ym94LXNoYWRvdzogaW5zZXQgMCAwIDVweCAjZWVlO1xuXG5cdFx0Ly8gTGliZWxsZSBkdSBwYW5lbFxuXHRcdCYgPiBzcGFuLFxuXHRcdCYgPiBidXR0b257XG5cdFx0XHRjb2xvcjogIzMzMztcblx0XHRcdGZvbnQtd2VpZ2h0OiBib2xkO1xuXHRcdFx0bGluZS1oZWlnaHQ6IDJlbTtcblx0XHR9XG5cblx0XHQvLyBCb3V0b24gYWpvdXRlclxuXHRcdCYgPiBidXR0b257XG5cdFx0XHRwYWRkaW5nOiAuMWVtIC43ZW07XG5cblx0XHRcdGJvcmRlci1yYWRpdXM6IDNweDtcblx0XHRcdGJvcmRlcjogMXB4IHNvbGlkICM3Nzc7XG5cblx0XHRcdGJhY2tncm91bmQ6ICNlY2YwZjE7XG5cblx0XHRcdEBpbmNsdWRlIHRyYW5zaXRpb24oIGFsbCAuMXMgZWFzZS1pbi1vdXQgKTtcblxuXHRcdFx0Y29sb3I6ICM3Nzc7XG5cblx0XHRcdC8vIEFuaW1hdGlvbiBkZSBAaG92ZXJcblx0XHRcdCY6aG92ZXJ7XG5cdFx0XHRcdGJhY2tncm91bmQ6ICR0aGVtZS1mZy1wcmltYXJ5O1xuXHRcdFx0XHRib3JkZXItY29sb3I6IGRhcmtlbigkdGhlbWUtZmctcHJpbWFyeSwgMTApO1xuXHRcdFx0XHRjb2xvcjogI2ZmZjtcblx0XHRcdH1cblx0XHR9XG5cblx0fVxuXG5cblx0LyogKDIpIERlc2NyaXB0aW9uIChzb3VzIGxlIGhlYWRlcikgKi9cblx0JiA+IGRpdltkYXRhLWRlc2NyaXB0aW9uXXtcblx0XHRkaXNwbGF5OiBibG9jaztcblx0XHRwb3NpdGlvbjogcmVsYXRpdmU7XG5cblx0XHRib3JkZXItYm90dG9tOiAxcHggc29saWQgI2NjYztcblxuXHRcdHBhZGRpbmc6IC43ZW0gLjdlbTtcblxuXHRcdGNvbG9yOiAjNTU1O1xuXHR9XG5cblxuXG5cdC8qICgzKSBMaXN0ZSBkZXMgZWxlbWVudHMgKi9cblx0JiA+IHVsW2RhdGEtbGlzdF17XG5cdFx0ZGlzcGxheTogZmxleDtcblx0XHRwb3NpdGlvbjogcmVsYXRpdmU7XG5cblx0XHQvLyBmbGV4IHByb3BlcnRpZXNcblx0XHRmbGV4LWRpcmVjdGlvbjogY29sdW1uO1xuXHRcdGp1c3RpZnktY29udGVudDogZmxleC1zdGFydDtcblx0XHRmbGV4LXdyYXA6IG5vd3JhcDtcblxuXHRcdG1hcmdpbjogMDtcblx0XHRwYWRkaW5nOiAwO1xuXG5cdFx0bGlzdC1zdHlsZTogbm9uZTtcblxuXG5cdFx0LyogKDQpIENoYXF1ZSBlbGVtZW50IGRlIGxhIGxpc3RlICovXG5cdFx0JiA+IGxpW2RhdGEtZWxlbWVudF17XG5cdFx0XHRkaXNwbGF5OiBmbGV4O1xuXG5cdFx0XHQvLyBmbGV4IHByb3BlcnRpZXNcblx0XHRcdGZsZXgtZGlyZWN0aW9uOiByb3c7XG5cdFx0XHRqdXN0aWZ5LWNvbnRlbnQ6IHNwYWNlLWJldHdlZW47XG5cdFx0XHRhbGlnbi1pdGVtczogY2VudGVyO1xuXHRcdFx0ZmxleC13cmFwOiBub3dyYXA7XG5cblx0XHRcdHBhZGRpbmc6IDFlbTtcblxuXHRcdFx0Ly8gcmVib3JkIGVuIGJhcyBzYXVmIGRlcm5pZXJcblx0XHRcdCY6bm90KDpsYXN0LWNoaWxkKXtcblx0XHRcdFx0Ym9yZGVyLWJvdHRvbTogMXB4IHNvbGlkICNjY2M7XG5cdFx0XHR9XG5cblx0XHRcdC8qICg0LjEpIExvZ28gZXQgdHlwZSBkJ2VsZW1lbnQgKi9cblx0XHRcdCYgPiBkaXY6bnRoLWNoaWxkKDEpe1xuXHRcdFx0XHRkaXNwbGF5OiBmbGV4O1xuXHRcdFx0XHRcdHdpZHRoOiAxMGVtO1xuXHRcdFx0XHRcdGhlaWdodDogNmVtO1xuXG5cdFx0XHRcdC8vIGZsZXggcHJvcGVydGllc1xuXHRcdFx0XHRmbGV4LWRpcmVjdGlvbjogY29sdW1uO1xuXHRcdFx0XHRqdXN0aWZ5LWNvbnRlbnQ6IGZsZXgtZW5kO1xuXHRcdFx0XHRhbGlnbi1pdGVtczogY2VudGVyO1xuXG5cdFx0XHRcdC8vIEltYWdlIHBvdXIgdG9rZW5cblx0XHRcdFx0JltkYXRhLXRva2VuXXtcblx0XHRcdFx0XHRiYWNrZ3JvdW5kOiB1cmwoJy9mL3N2Zy90b2tlbi9zdC9jb250YWluZXIvNjY2NjY2JykgY2VudGVyIDFlbSBuby1yZXBlYXQ7XG5cdFx0XHRcdFx0Ly8gU2kgbGUgdG9rZW4gZXN0IGFjdGlmXG5cdFx0XHRcdFx0Ji5hY3RpdmV7XG5cdFx0XHRcdFx0XHRiYWNrZ3JvdW5kLWltYWdlOiB1cmwoJy9mL3N2Zy90b2tlbi9zdC9jb250YWluZXIvJHtjb2xvci1zdHIoJHRoZW1lLWZnLXByaW1hcnkpJyk7XG5cdFx0XHRcdFx0fVxuXHRcdFx0XHR9XG5cblxuXHRcdFx0XHQvLyBJbWFnZSBwb3VyIHV0aWxpc2F0ZXVyXG5cdFx0XHRcdCZbZGF0YS11c2VyXXtcblx0XHRcdFx0XHRiYWNrZ3JvdW5kOiB1cmwoJy9mL3N2Zy91c2VyL3N0L2NvbnRhaW5lci82NjY2NjYnKSBjZ