From 54b9c820525ad41b93d1860cdbeb0601945713c2 Mon Sep 17 00:00:00 2001 From: xdrm-brackets Date: Mon, 25 Apr 2016 16:42:59 +0200 Subject: [PATCH] =?UTF-8?q?Conception=20(graphique)=20de=20la=20navigation?= =?UTF-8?q?=20entre=20les=20pages=20du=20formulaire=20(entre=20les=20diff?= =?UTF-8?q?=C3=A9rentes=20fiches=20relations=20+=20mini=20fiches=20relatio?= =?UTF-8?q?ns)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- css/timeline-form.scss | 34 ++++++++++++++++++++++++++++++ css/timeline-form/expanded.css | 29 ++++++++++++++++++++++++- css/timeline-form/expanded.css.map | 4 ++-- css/timeline-form/min.css | 4 ++-- css/timeline-form/min.css.map | 4 ++-- view/input.php | 27 +++++++++++++++++++++++- 6 files changed, 94 insertions(+), 8 deletions(-) diff --git a/css/timeline-form.scss b/css/timeline-form.scss index 26ab05f..147fcad 100644 --- a/css/timeline-form.scss +++ b/css/timeline-form.scss @@ -402,4 +402,38 @@ } + /* (13) Gestion de la navigation fléchée */ + & .arrow-container{ + + & span{ + display: inline-block; + position: relative; + + margin: 0; + padding: .5em .8em; + + border: 1px solid darken(#d8e0e9, 10); + + color: darken(#d8e0e9, 30); + + cursor: pointer; + + @include transition( .2s ease-in-out ); + + + &:first-child{ border-radius: 5px 0 0 5px; } + &:last-child{ border-radius: 0 5px 5px 0; } + + // Animation de hover + &:hover, + &.active:not(:first-child):not(:last-child){ + border-color: $timeline-2; + background: $timeline-2; + color: #fff; + // font-weight: bold; + } + } + + } + } diff --git a/css/timeline-form/expanded.css b/css/timeline-form/expanded.css index 1a8acb1..e0160e4 100644 --- a/css/timeline-form/expanded.css +++ b/css/timeline-form/expanded.css @@ -34,6 +34,7 @@ /* (10) Gestion des espacements verticaux */ /* (11) Gestion des custom */\n\t& select{\n\t width: auto;\n\t display: inline-block;\n\t background: transparent;\n\t border: 0;\n\n\t // Hides right arrow\n\t -webkit-appearance: none;\n\t -moz-appearance: none;\n\t text-indent: 1px;\n\t text-overflow: '';\n\t font-size: .9em;\n\n\t\t& option:not(:disabled){\n\t\t\tpadding-left: 1.5em;\n\t\t}\n\n\t\t& option:disabled:not(:first-child){\n\t\t\tfont-size: 1.2em;\n\t\t\tcolor: #000;\n\t\t\tfont-weight: bold;\n\t\t}\n\n\t\t& option.pad{\n\t\t\tpadding-left: 2.5em;\n\t\t}\n\t}\n\n\t& .select-container select{\n\t // width: auto;\n\t display: inline-block;\n\t padding: 2px;\n\t padding-right: 30px;\n\n\t\tborder: none;\n\t border-bottom: 1px solid #333;\n\n\t background: #fff url('/f/svg/bottom_arrow/st/container/333333') right 10px center no-repeat;\n\t background-size: 10px auto;\n\n\t overflow: hidden;\n\n\t\t// Animation de @focus\n\t\t&:focus{\n\t\t\tborder-color: $timeline-2;\n\t\t\tbackground-image:url('/f/svg/bottom_arrow/st/container/#{color-str($timeline-2)}');\n\t\t}\n\n\t}\n\n\t/* (12) Gestion des coloris pour les titres */\n\t& h5.color0,\n\t& h4.color0,\n\t& h3.color0{\n\t\tcolor: $timeline-0;\n\t\t&:before,&:after{\n\t\t\tbackground-color: $timeline-0;\n\t\t}\n\t}\n\n\t& h5.color1,\n\t& h4.color1,\n\t& h3.color1{\n\t\tcolor: $timeline-1;\n\t\t&:before,&:after{\n\t\t\tbackground-color: $timeline-1;\n\t\t}\n\t}\n\n\t& h5.color2,\n\t& h4.color2,\n\t& h3.color2{\n\t\tcolor: $timeline-2;\n\t\t&:before,&:after{\n\t\t\tbackground-color: $timeline-2;\n\t\t}\n\t}\n\n\t& h5.color3,\n\t& h4.color3,\n\t& h3.color3{\n\t\tcolor: $timeline-3;\n\t\t&:before,&:after{\n\t\t\tbackground-color: $timeline-3;\n\t\t}\n\t}\n\n\t& h5.color4,\n\t& h4.color4,\n\t& h3.color4{\n\t\tcolor: $timeline-4;\n\t\t&:before,&:after{\n\t\t\tbackground-color: $timeline-4;\n\t\t}\n\t}\n\n\n}\n", + "@import 'constants';\n\n/* [1] Formulaire de type timeline\n=========================================================*/\n#WRAPPER > #CONTAINER section[data-timeline]{\n\tdisplay: block;\n\tposition: relative;\n\n\tbackground-color: #fff;\n\n\tfont-size: .9em;\n\tcolor: #000;\n\n\t/* (1) On ajoute le liseré à droite pour TOUS les éléments */\n\t& h5,\n\t& h4,\n\t& h3,\n\t& *.line{\n\t\tdisplay: block;\n\n\t\tcolor: #333;\n\n\t\tmargin: 0 40px;\n\t\tpadding: 5px 60px;\n\n border-left: 2px solid #d8e0e9;\n\n\t}\n\n\n\t/* (2) Titres de sections */\n\t& h3{\n\t\tdisplay: block;\n\t\tpadding: 20px 40px;\n\n\t\tfont-size: 1.4em;\n\t\tcolor: #000;\n\t\tfont-weight: bold;\n\n // background-color: $timeline-color;\n\n\t\t/* TODO: Transformer les background en ::before pour que ca soit juste un cercle avec bg et border*/\n\t\t/* FIXME: Corriger le liseré pour les autres navigateurs que FF*/\n\n\t\t/* Gestion du before (compteur css) //*/\n\t\t&[data-n]:before{\n content: attr(data-n);\n\n display: inline-block;\n position: absolute;\n margin-top: .6em;\n margin-left: -41px;\n padding: 3px 12px;\n\n border-radius: 50%;\n /* Contour blanc*/\n box-shadow: 0 0 0 3px #fff;\n\n background-color: $timeline-color;\n\n\t\t\tfont-size: 1.3em;\n\t\t\tcolor: #fff;\n\t\t\tfont-weight: bold;\n\n /* On centre sur la ligne*/\n @include transform( translateX(-50%) translateY(-50%) );\n\n\t\t}\n\t}\n\n\t/* (3) Titres des sous-sections */\n\t& h4{\n\t\tdisplay: block;\n\n\t\tpadding: 20px 40px;\n\n\t\tfont-size: 1.2em;\n\t\tcolor: darken($timeline-color, 20);\n\t\tfont-weight: bold;\n\n\t\t/* Gestion du before (compteur css) //*/\n\t\t&[data-icon]:before{\n\t\t\tcontent: attr(data-icon);\n\n display: inline-block;\n position: absolute;\n margin-top: .9em;\n margin-left: -41px;\n padding: 9px;\n\n border-radius: 50%;\n /* Contour blanc*/\n box-shadow: 0 0 0 2px #fff;\n\n background-color: $timeline-color;\n\n\t\t\tfont-size: .9em;\n\t\t\tfont-family: 'icomoon';\n\t\t\tcolor: #fff;\n\t\t\tfont-weight: bold;\n\n /* On centre sur la ligne*/\n @include transform( translateX(-50%) translateY(-50%) );\n\t\t}\n\t}\n\n\t/* (4) Titres genre text message */\n\t& h5{\n\t\tdisplay: block;\n\n\t\tpadding: 20px 40px;\n\n\t\tfont-size: 1.2em;\n\t\tcolor: darken($timeline-color, 20);\n\t\tfont-weight: bold;\n\n\t\t/* Gestion du before (compteur css) //*/\n\t\t&:before{\n\t\t\tcontent: '';\n\n display: inline-block;\n position: absolute;\n margin-top: .7em;\n margin-left: -41px;\n padding: 7px;\n\n border-radius: 50%;\n /* Contour blanc*/\n box-shadow: 0 0 0 2px #fff;\n\n background-color: $timeline-color;\n\n /* On centre sur la ligne*/\n @include transform( translateX(-50%) translateY(-50%) );\n\t\t}\n\n /* Texte genre text message*/\n &[data-text]:after{\n content: attr(data-text);\n padding: 6px 10px;\n\n border-radius: 3px;\n\n background: $timeline-color;\n\n color: #fff;\n font-weight: normal;\n }\n\t}\n\n\t/* (5) 'Tags' -> textes sur le liseré gauche */\n\t& [data-tag]{\n\t\tdisplay: block;\n\n\t\tpadding: 40px 60px;\n\n &:before{\n \t\tcontent: attr(data-tag);\n\n display: inline-block;\n position: absolute;\n margin-top: .5em;\n margin-left: -41px;\n padding: 2px;\n\n background-color: #fff;\n\n font-size: 1.2em;\n color: $timeline-color;\n font-weight: bold;\n\n /* On centre sur la ligne*/\n @include transform( translateX(-50%) translateY(-50%) );\n }\n\t}\n\n /* (6) Input d'upload de fichier (css hack) */\n & input[type='file']{\n position: relative;\n opacity: 0;\n\n z-index: 8;\n\n cursor: pointer;\n\n }\n\n /* Contiendra l'input*/\n & input[type='file'] + span.file-input{\n display: inline-block;\n position: absolute;\n margin-top: -1px;\n margin-left: -290px;\n width: calc( 290px - 2*15px );\n height: 30px;\n\n padding: 0 15px;\n\n border-radius: 3px;\n background: $timeline-1;\n\n color: #222;\n line-height: 30px;\n font-weight: normal;\n\n z-index: 9;\n\n cursor: pointer;\n\n\t\tpointer-events: none;\n\n /* Icone d'upload*/\n &:before{\n content: 'e ';\n\n font-size: 1em;\n\t\t\tfont-family: 'icomoon';\n\t\t\tcolor: #222;\n\t\t\tfont-weight: bold;\n }\n\n\t\t@include transition( background .1s ease-in-out );\n }\n\n\n\t/* Animation de hover*/\n\t& input[type='file']:hover + span.file-input{\n\t\tbackground: darken($timeline-1, 10);\n\t\tbox-shadow: inset 0 0 5px #888;\n\t}\n\n\n\t/* Animation de .active*/\n\t& input[type='file'].active + span.file-input{\n\t\tbackground: $timeline-color;\n\t\tcolor: #fff;\n\t\t// On change l'icône\n\t\t&:before{\n content: 'v ';\n\t\t\tcolor: #fff;\n\t\t}\n\t}\n\n\t/* (7) Inputs de type text */\n\t& input[type='text'],\n\t& input[type='password'],\n\t& input[type='number'],\n\t& input[type='button'],\n\t& input[type='submit'],\n\t& input[type='mail']{\n\t\tdisplay: inline;\n\t\twidth: auto;\n\n\t\tmargin: unset;\n\t\tpadding: 5px 10px;\n\t\tmargin-bottom: 5px;\n\t\tmargin-right: 15px;\n\n\t\tborder-radius: 0;\n\t\tborder: 0;\n\t\tborder-bottom: 1px solid #555;\n\n\t\tfont-size: .8em;\n\t\tfont-weight: normal;\n\t\tcolor: #333;\n\n\t\t@include transition( border .2s ease-in-out, background .2s ease-in-out );\n\n\t\t/* Animation de @focus*/\n\t\t&:focus{\n\t\t\tborder-color: $timeline-2;\n\t\t}\n\t}\n\n\n\t& label{\n\t\tcolor: #555;\n\t}\n\n\t/* (8) Gestion des espacements */\n\t& [data-space]{\n\t\t@extend *.line;\n\n\t\tpadding-top: 20px;\n\t\tpadding-bottom: 20px;\n\t}\n\n\t/* (9)
sert uniquement à regrouper */\n\t& article{\n\t\tall: unset !important;\n\t}\n\n\t/* (10) Gestion des espacements verticaux */\n\t& .spacetop{ margin-top: 20px !important; }\n\t& .spacebtm{ margin-bottom: 20px !important; }\n\n\t& .spaced{\n\t\t@extend .spacetop;\n\t\t@extend .spacebtm;\n\t}\n\n\t& .nobold,\n\t& .nobold *{\n\t\tfont-weight: normal !important;\n\t}\n\n\t/* (11) Gestion des custom */\n\t& select{\n\t width: auto;\n\t display: inline-block;\n\t background: transparent;\n\t border: 0;\n\n\t // Hides right arrow\n\t -webkit-appearance: none;\n\t -moz-appearance: none;\n\t text-indent: 1px;\n\t text-overflow: '';\n\t font-size: .9em;\n\n\t\t& option:not(:disabled){\n\t\t\tpadding-left: 1.5em;\n\t\t}\n\n\t\t& option:disabled:not(:first-child){\n\t\t\tfont-size: 1.2em;\n\t\t\tcolor: #000;\n\t\t\tfont-weight: bold;\n\t\t}\n\n\t\t& option.pad{\n\t\t\tpadding-left: 2.5em;\n\t\t}\n\t}\n\n\t& .select-container select{\n\t // width: auto;\n\t display: inline-block;\n\t padding: 2px;\n\t padding-right: 30px;\n\n\t\tborder: none;\n\t border-bottom: 1px solid #333;\n\n\t background: #fff url('/f/svg/bottom_arrow/st/container/333333') right 10px center no-repeat;\n\t background-size: 10px auto;\n\n\t overflow: hidden;\n\n\t\t// Animation de @focus\n\t\t&:focus{\n\t\t\tborder-color: $timeline-2;\n\t\t\tbackground-image:url('/f/svg/bottom_arrow/st/container/#{color-str($timeline-2)}');\n\t\t}\n\n\t}\n\n\t/* (12) Gestion des coloris pour les titres */\n\t& h5.color0,\n\t& h4.color0,\n\t& h3.color0{\n\t\tcolor: $timeline-0;\n\t\t&:before,&:after{\n\t\t\tbackground-color: $timeline-0;\n\t\t}\n\t}\n\n\t& h5.color1,\n\t& h4.color1,\n\t& h3.color1{\n\t\tcolor: $timeline-1;\n\t\t&:before,&:after{\n\t\t\tbackground-color: $timeline-1;\n\t\t}\n\t}\n\n\t& h5.color2,\n\t& h4.color2,\n\t& h3.color2{\n\t\tcolor: $timeline-2;\n\t\t&:before,&:after{\n\t\t\tbackground-color: $timeline-2;\n\t\t}\n\t}\n\n\t& h5.color3,\n\t& h4.color3,\n\t& h3.color3{\n\t\tcolor: $timeline-3;\n\t\t&:before,&:after{\n\t\t\tbackground-color: $timeline-3;\n\t\t}\n\t}\n\n\t& h5.color4,\n\t& h4.color4,\n\t& h3.color4{\n\t\tcolor: $timeline-4;\n\t\t&:before,&:after{\n\t\t\tbackground-color: $timeline-4;\n\t\t}\n\t}\n\n\n}\n", + "@import 'constants';\n\n/* [1] Formulaire de type timeline\n=========================================================*/\n#WRAPPER > #CONTAINER section[data-timeline]{\n\tdisplay: block;\n\tposition: relative;\n\n\tbackground-color: #fff;\n\n\tfont-size: .9em;\n\tcolor: #000;\n\n\t/* (1) On ajoute le liseré à droite pour TOUS les éléments */\n\t& h5,\n\t& h4,\n\t& h3,\n\t& *.line{\n\t\tdisplay: block;\n\n\t\tcolor: #333;\n\n\t\tmargin: 0 40px;\n\t\tpadding: 5px 60px;\n\n border-left: 2px solid #d8e0e9;\n\n\t}\n\n\n\t/* (2) Titres de sections */\n\t& h3{\n\t\tdisplay: block;\n\t\tpadding: 20px 40px;\n\n\t\tfont-size: 1.4em;\n\t\tcolor: #000;\n\t\tfont-weight: bold;\n\n // background-color: $timeline-color;\n\n\t\t/* TODO: Transformer les background en ::before pour que ca soit juste un cercle avec bg et border*/\n\t\t/* FIXME: Corriger le liseré pour les autres navigateurs que FF*/\n\n\t\t/* Gestion du before (compteur css) //*/\n\t\t&[data-n]:before{\n content: attr(data-n);\n\n display: inline-block;\n position: absolute;\n margin-top: .6em;\n margin-left: -41px;\n padding: 3px 12px;\n\n border-radius: 50%;\n /* Contour blanc*/\n box-shadow: 0 0 0 3px #fff;\n\n background-color: $timeline-color;\n\n\t\t\tfont-size: 1.3em;\n\t\t\tcolor: #fff;\n\t\t\tfont-weight: bold;\n\n /* On centre sur la ligne*/\n @include transform( translateX(-50%) translateY(-50%) );\n\n\t\t}\n\t}\n\n\t/* (3) Titres des sous-sections */\n\t& h4{\n\t\tdisplay: block;\n\n\t\tpadding: 20px 40px;\n\n\t\tfont-size: 1.2em;\n\t\tcolor: darken($timeline-color, 20);\n\t\tfont-weight: bold;\n\n\t\t/* Gestion du before (compteur css) //*/\n\t\t&[data-icon]:before{\n\t\t\tcontent: attr(data-icon);\n\n display: inline-block;\n position: absolute;\n margin-top: .9em;\n margin-left: -41px;\n padding: 9px;\n\n border-radius: 50%;\n /* Contour blanc*/\n box-shadow: 0 0 0 2px #fff;\n\n background-color: $timeline-color;\n\n\t\t\tfont-size: .9em;\n\t\t\tfont-family: 'icomoon';\n\t\t\tcolor: #fff;\n\t\t\tfont-weight: bold;\n\n /* On centre sur la ligne*/\n @include transform( translateX(-50%) translateY(-50%) );\n\t\t}\n\t}\n\n\t/* (4) Titres genre text message */\n\t& h5{\n\t\tdisplay: block;\n\n\t\tpadding: 20px 40px;\n\n\t\tfont-size: 1.2em;\n\t\tcolor: darken($timeline-color, 20);\n\t\tfont-weight: bold;\n\n\t\t/* Gestion du before (compteur css) //*/\n\t\t&:before{\n\t\t\tcontent: '';\n\n display: inline-block;\n position: absolute;\n margin-top: .7em;\n margin-left: -41px;\n padding: 7px;\n\n border-radius: 50%;\n /* Contour blanc*/\n box-shadow: 0 0 0 2px #fff;\n\n background-color: $timeline-color;\n\n /* On centre sur la ligne*/\n @include transform( translateX(-50%) translateY(-50%) );\n\t\t}\n\n /* Texte genre text message*/\n &[data-text]:after{\n content: attr(data-text);\n padding: 6px 10px;\n\n border-radius: 3px;\n\n background: $timeline-color;\n\n color: #fff;\n font-weight: normal;\n }\n\t}\n\n\t/* (5) 'Tags' -> textes sur le liseré gauche */\n\t& [data-tag]{\n\t\tdisplay: block;\n\n\t\tpadding: 40px 60px;\n\n &:before{\n \t\tcontent: attr(data-tag);\n\n display: inline-block;\n position: absolute;\n margin-top: .5em;\n margin-left: -41px;\n padding: 2px;\n\n background-color: #fff;\n\n font-size: 1.2em;\n color: $timeline-color;\n font-weight: bold;\n\n /* On centre sur la ligne*/\n @include transform( translateX(-50%) translateY(-50%) );\n }\n\t}\n\n /* (6) Input d'upload de fichier (css hack) */\n & input[type='file']{\n position: relative;\n opacity: 0;\n\n z-index: 8;\n\n cursor: pointer;\n\n }\n\n /* Contiendra l'input*/\n & input[type='file'] + span.file-input{\n display: inline-block;\n position: absolute;\n margin-top: -1px;\n margin-left: -290px;\n width: calc( 290px - 2*15px );\n height: 30px;\n\n padding: 0 15px;\n\n border-radius: 3px;\n background: $timeline-1;\n\n color: #222;\n line-height: 30px;\n font-weight: normal;\n\n z-index: 9;\n\n cursor: pointer;\n\n\t\tpointer-events: none;\n\n /* Icone d'upload*/\n &:before{\n content: 'e ';\n\n font-size: 1em;\n\t\t\tfont-family: 'icomoon';\n\t\t\tcolor: #222;\n\t\t\tfont-weight: bold;\n }\n\n\t\t@include transition( background .1s ease-in-out );\n }\n\n\n\t/* Animation de hover*/\n\t& input[type='file']:hover + span.file-input{\n\t\tbackground: darken($timeline-1, 10);\n\t\tbox-shadow: inset 0 0 5px #888;\n\t}\n\n\n\t/* Animation de .active*/\n\t& input[type='file'].active + span.file-input{\n\t\tbackground: $timeline-color;\n\t\tcolor: #fff;\n\t\t// On change l'icône\n\t\t&:before{\n content: 'v ';\n\t\t\tcolor: #fff;\n\t\t}\n\t}\n\n\t/* (7) Inputs de type text */\n\t& input[type='text'],\n\t& input[type='password'],\n\t& input[type='number'],\n\t& input[type='button'],\n\t& input[type='submit'],\n\t& input[type='mail']{\n\t\tdisplay: inline;\n\t\twidth: auto;\n\n\t\tmargin: unset;\n\t\tpadding: 5px 10px;\n\t\tmargin-bottom: 5px;\n\t\tmargin-right: 15px;\n\n\t\tborder-radius: 0;\n\t\tborder: 0;\n\t\tborder-bottom: 1px solid #555;\n\n\t\tfont-size: .8em;\n\t\tfont-weight: normal;\n\t\tcolor: #333;\n\n\t\t@include transition( border .2s ease-in-out, background .2s ease-in-out );\n\n\t\t/* Animation de @focus*/\n\t\t&:focus{\n\t\t\tborder-color: $timeline-2;\n\t\t}\n\t}\n\n\n\t& label{\n\t\tcolor: #555;\n\t}\n\n\t/* (8) Gestion des espacements */\n\t& [data-space]{\n\t\t@extend *.line;\n\n\t\tpadding-top: 20px;\n\t\tpadding-bottom: 20px;\n\t}\n\n\t/* (9)
sert uniquement à regrouper */\n\t& article{\n\t\tall: unset !important;\n\t}\n\n\t/* (10) Gestion des espacements verticaux */\n\t& .spacetop{ margin-top: 20px !important; }\n\t& .spacebtm{ margin-bottom: 20px !important; }\n\n\t& .spaced{\n\t\t@extend .spacetop;\n\t\t@extend .spacebtm;\n\t}\n\n\t& .nobold,\n\t& .nobold *{\n\t\tfont-weight: normal !important;\n\t}\n\n\t/* (11) Gestion des custom