Prototype interface choix contact existant (version 'input/phone' pour l'instant):
This commit is contained in:
xdrm-brackets
parent
7378dc106a
commit
a71fdcd7c8
|
|
@ -11,30 +11,30 @@
|
||||||
#WRAPPER > #CONTAINER table,
|
#WRAPPER > #CONTAINER table,
|
||||||
#WRAPPER > #CONTAINER > section > table{
|
#WRAPPER > #CONTAINER > section > table{
|
||||||
|
|
||||||
& tr,
|
& tr,
|
||||||
& > tr{
|
& > tr{
|
||||||
|
|
||||||
& > td{
|
& > td{
|
||||||
padding: .8em;
|
padding: .8em;
|
||||||
|
|
||||||
|
|
||||||
color: #888;
|
color: #888;
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
|
|
||||||
& > input[type="checkbox"]+label[for]:before{
|
& > input[type="checkbox"]+label[for]:before{
|
||||||
left: -.4em;
|
left: -.4em;
|
||||||
width: calc( 1.05em - 2*.15em );
|
width: calc( 1.05em - 2*.15em );
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
& > td.hidden:before{
|
& > td.hidden:before{
|
||||||
content: '+';
|
content: '+';
|
||||||
color: #ddd;
|
color: #ddd;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -23,7 +23,7 @@
|
||||||
margin: 0 40px;
|
margin: 0 40px;
|
||||||
padding: 5px 60px;
|
padding: 5px 60px;
|
||||||
|
|
||||||
border-left: 2px solid #d8e0e9;
|
border-left: 2px solid #d8e0e9;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -37,30 +37,30 @@
|
||||||
color: #000;
|
color: #000;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
|
|
||||||
// background-color: $timeline-color;
|
// background-color: $timeline-color;
|
||||||
|
|
||||||
/* Gestion du before (compteur css) //*/
|
/* Gestion du before (compteur css) //*/
|
||||||
&[data-n]:before{
|
&[data-n]:before{
|
||||||
content: attr(data-n);
|
content: attr(data-n);
|
||||||
|
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
margin-top: .6em;
|
margin-top: .6em;
|
||||||
margin-left: -41px;
|
margin-left: -41px;
|
||||||
padding: 3px 12px;
|
padding: 3px 12px;
|
||||||
|
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
/* Contour blanc*/
|
/* Contour blanc*/
|
||||||
box-shadow: 0 0 0 3px #fff;
|
box-shadow: 0 0 0 3px #fff;
|
||||||
|
|
||||||
background-color: $timeline-color;
|
background-color: $timeline-color;
|
||||||
|
|
||||||
font-size: 1.3em;
|
font-size: 1.3em;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
|
|
||||||
/* On centre sur la ligne*/
|
/* On centre sur la ligne*/
|
||||||
@include transform( translateX(-50%) translateY(-50%) );
|
@include transform( translateX(-50%) translateY(-50%) );
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -79,25 +79,25 @@
|
||||||
&[data-icon]:before{
|
&[data-icon]:before{
|
||||||
content: attr(data-icon);
|
content: attr(data-icon);
|
||||||
|
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
margin-top: .9em;
|
margin-top: .9em;
|
||||||
margin-left: -41px;
|
margin-left: -41px;
|
||||||
padding: 9px;
|
padding: 9px;
|
||||||
|
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
/* Contour blanc*/
|
/* Contour blanc*/
|
||||||
box-shadow: 0 0 0 2px #fff;
|
box-shadow: 0 0 0 2px #fff;
|
||||||
|
|
||||||
background-color: $timeline-color;
|
background-color: $timeline-color;
|
||||||
|
|
||||||
font-size: .9em;
|
font-size: .9em;
|
||||||
font-family: 'icomoon';
|
font-family: 'icomoon';
|
||||||
color: #fff;
|
color: #fff;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
|
|
||||||
/* On centre sur la ligne*/
|
/* On centre sur la ligne*/
|
||||||
@include transform( translateX(-50%) translateY(-50%) );
|
@include transform( translateX(-50%) translateY(-50%) );
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -115,34 +115,34 @@
|
||||||
&:before{
|
&:before{
|
||||||
content: '';
|
content: '';
|
||||||
|
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
margin-top: .7em;
|
margin-top: .7em;
|
||||||
margin-left: -41px;
|
margin-left: -41px;
|
||||||
padding: 7px;
|
padding: 7px;
|
||||||
|
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
/* Contour blanc*/
|
/* Contour blanc*/
|
||||||
box-shadow: 0 0 0 2px #fff;
|
box-shadow: 0 0 0 2px #fff;
|
||||||
|
|
||||||
background-color: $timeline-color;
|
background-color: $timeline-color;
|
||||||
|
|
||||||
/* On centre sur la ligne*/
|
/* On centre sur la ligne*/
|
||||||
@include transform( translateX(-50%) translateY(-50%) );
|
@include transform( translateX(-50%) translateY(-50%) );
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Texte genre text message*/
|
/* Texte genre text message*/
|
||||||
&[data-text]:after{
|
&[data-text]:after{
|
||||||
content: attr(data-text);
|
content: attr(data-text);
|
||||||
padding: 6px 10px;
|
padding: 6px 10px;
|
||||||
|
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
|
|
||||||
background: $timeline-color;
|
background: $timeline-color;
|
||||||
|
|
||||||
color: #fff;
|
color: #fff;
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* (5) 'Tags' -> textes sur le liseré gauche */
|
/* (5) 'Tags' -> textes sur le liseré gauche */
|
||||||
|
|
@ -151,73 +151,73 @@
|
||||||
|
|
||||||
padding: 40px 60px;
|
padding: 40px 60px;
|
||||||
|
|
||||||
&:before{
|
&:before{
|
||||||
content: attr(data-tag);
|
content: attr(data-tag);
|
||||||
|
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
margin-top: .5em;
|
margin-top: .5em;
|
||||||
margin-left: -41px;
|
margin-left: -41px;
|
||||||
padding: 2px;
|
padding: 2px;
|
||||||
|
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
|
|
||||||
font-size: 1.2em;
|
font-size: 1.2em;
|
||||||
color: $timeline-color;
|
color: $timeline-color;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
|
|
||||||
/* On centre sur la ligne*/
|
/* On centre sur la ligne*/
|
||||||
@include transform( translateX(-50%) translateY(-50%) );
|
@include transform( translateX(-50%) translateY(-50%) );
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* (6) Input d'upload de fichier (css hack) */
|
/* (6) Input d'upload de fichier (css hack) */
|
||||||
& input[type='file']{
|
& input[type='file']{
|
||||||
position: relative;
|
position: relative;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
|
|
||||||
z-index: 8;
|
z-index: 8;
|
||||||
|
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Contiendra l'input*/
|
/* Contiendra l'input*/
|
||||||
& input[type='file'] + span.file-input{
|
& input[type='file'] + span.file-input{
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
margin-top: -1px;
|
margin-top: -1px;
|
||||||
margin-left: -290px;
|
margin-left: -290px;
|
||||||
width: calc( 290px - 2*15px );
|
width: calc( 290px - 2*15px );
|
||||||
height: 30px;
|
height: 30px;
|
||||||
|
|
||||||
padding: 0 15px;
|
padding: 0 15px;
|
||||||
|
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
background: $timeline-0;
|
background: $timeline-0;
|
||||||
|
|
||||||
color: #222;
|
color: #222;
|
||||||
line-height: 30px;
|
line-height: 30px;
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
|
|
||||||
z-index: 9;
|
z-index: 9;
|
||||||
|
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
|
|
||||||
/* Icone d'upload*/
|
/* Icone d'upload*/
|
||||||
&:before{
|
&:before{
|
||||||
content: 'e ';
|
content: 'e ';
|
||||||
|
|
||||||
font-size: 1em;
|
font-size: 1em;
|
||||||
font-family: 'icomoon';
|
font-family: 'icomoon';
|
||||||
color: #222;
|
color: #222;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
@include transition( background .1s ease-in-out );
|
@include transition( background .1s ease-in-out );
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/* Animation de hover*/
|
/* Animation de hover*/
|
||||||
|
|
@ -233,7 +233,7 @@
|
||||||
color: #fff;
|
color: #fff;
|
||||||
// On change l'icône
|
// On change l'icône
|
||||||
&:before{
|
&:before{
|
||||||
content: 'v ';
|
content: 'v ';
|
||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -315,17 +315,17 @@
|
||||||
|
|
||||||
/* (11) Gestion des custom <select> */
|
/* (11) Gestion des custom <select> */
|
||||||
& select{
|
& select{
|
||||||
width: auto;
|
width: auto;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
border: 0;
|
border: 0;
|
||||||
|
|
||||||
// Hides right arrow
|
// Hides right arrow
|
||||||
-webkit-appearance: none;
|
-webkit-appearance: none;
|
||||||
-moz-appearance: none;
|
-moz-appearance: none;
|
||||||
text-indent: 1px;
|
text-indent: 1px;
|
||||||
text-overflow: '';
|
text-overflow: '';
|
||||||
font-size: .9em;
|
font-size: .9em;
|
||||||
|
|
||||||
& option:not(:disabled){
|
& option:not(:disabled){
|
||||||
padding-left: 1.5em;
|
padding-left: 1.5em;
|
||||||
|
|
@ -343,18 +343,18 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
& .select-container select{
|
& .select-container select{
|
||||||
// width: auto;
|
// width: auto;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
padding: 2px;
|
padding: 5px 2px;
|
||||||
padding-right: 30px;
|
padding-right: 30px;
|
||||||
|
|
||||||
border: none;
|
border: none;
|
||||||
border-bottom: 1px solid #333;
|
border-bottom: 1px solid #333;
|
||||||
|
|
||||||
background: #fff url('/f/svg/bottom_arrow/st/container/333333') right 10px center no-repeat;
|
background: #fff url('/f/svg/bottom_arrow/st/container/333333') right 10px center no-repeat;
|
||||||
background-size: 10px auto;
|
background-size: 10px auto;
|
||||||
|
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
|
||||||
// Animation de @focus
|
// Animation de @focus
|
||||||
&:focus{
|
&:focus{
|
||||||
|
|
@ -414,33 +414,33 @@
|
||||||
/* (13) Gestion de la navigation fléchée */
|
/* (13) Gestion de la navigation fléchée */
|
||||||
& .arrow-container{
|
& .arrow-container{
|
||||||
|
|
||||||
& span{
|
& span{
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
margin: .3em 0;
|
margin: .3em 0;
|
||||||
padding: .5em .8em;
|
padding: .5em .8em;
|
||||||
|
|
||||||
border: 1px solid darken(#d8e0e9, 10);
|
border: 1px solid darken(#d8e0e9, 10);
|
||||||
|
|
||||||
// Pas de rebord droite sauf si dernier
|
// Pas de rebord droite sauf si dernier
|
||||||
&:not(:last-child):not(.lc){
|
&:not(:last-child):not(.lc){
|
||||||
border-right: 0;
|
border-right: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
color: darken(#d8e0e9, 30);
|
color: darken(#d8e0e9, 30);
|
||||||
|
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
||||||
@include transition( .2s ease-in-out );
|
@include transition( .2s ease-in-out );
|
||||||
|
|
||||||
|
|
||||||
// Arrondi pour premier
|
// Arrondi pour premier
|
||||||
&:first-child,
|
&:first-child,
|
||||||
&.fc{ border-top-left-radius: 5px; border-bottom-left-radius: 5px; }
|
&.fc{ border-top-left-radius: 5px; border-bottom-left-radius: 5px; }
|
||||||
|
|
||||||
// Arrondi pour dernier
|
// Arrondi pour dernier
|
||||||
&:last-child,
|
&:last-child,
|
||||||
&.lc{ border-top-right-radius: 5px; border-bottom-right-radius: 5px; }
|
&.lc{ border-top-right-radius: 5px; border-bottom-right-radius: 5px; }
|
||||||
|
|
||||||
// Animation quand la page est validée
|
// Animation quand la page est validée
|
||||||
|
|
@ -473,7 +473,7 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -13,6 +13,18 @@ pContactBuilder.setLayout(
|
||||||
"\t<input type='hidden' data-name='countsms' value='@countsms'>\n"+
|
"\t<input type='hidden' data-name='countsms' value='@countsms'>\n"+
|
||||||
|
|
||||||
"\t<input type='text' data-name='number' placeholder='Numéro de téléphone' value='@number' > \n"+
|
"\t<input type='text' data-name='number' placeholder='Numéro de téléphone' value='@number' > \n"+
|
||||||
|
|
||||||
|
"\t<span class='select-container nobold'><select data-name='existing'>\n"+
|
||||||
|
"\t\t<option value='.' disabled selected>Contact existant</option>\n"+
|
||||||
|
"\t\t<option value='2'>Jean</option>\n"+
|
||||||
|
"\t\t<option value='3'>Blaise</option>\n"+
|
||||||
|
"\t\t<option value='4'>Roger</option>\n"+
|
||||||
|
"\t\t<option value='5'>Marie</option>\n"+
|
||||||
|
"\t\t<option value='6'>Adèle</option>\n"+
|
||||||
|
"\t</select></span>\n"+
|
||||||
|
|
||||||
|
"\tou\n"+
|
||||||
|
|
||||||
"\t<input type='text' data-name='username' placeholder='Pseudo' value='@username' > \n"+
|
"\t<input type='text' data-name='username' placeholder='Pseudo' value='@username' > \n"+
|
||||||
"\t<input type='submit' class='primary sub-number' value='Enregistrer'>\n"+
|
"\t<input type='submit' class='primary sub-number' value='Enregistrer'>\n"+
|
||||||
"</h4>\n\n");
|
"</h4>\n\n");
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,4 @@
|
||||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
|
||||||
|
|
||||||
<svg
|
<svg
|
||||||
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||||
xmlns:cc="http://creativecommons.org/ns#"
|
xmlns:cc="http://creativecommons.org/ns#"
|
||||||
|
|
@ -9,62 +7,54 @@
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||||
width="32"
|
|
||||||
height="32"
|
height="32"
|
||||||
viewBox="0 0 32.000001 32.000001"
|
viewBox="0 0 32.000001 32"
|
||||||
|
width="32"
|
||||||
id="svg2"
|
id="svg2"
|
||||||
version="1.1"
|
version="1.1"
|
||||||
inkscape:version="0.91 r13725"
|
inkscape:version="0.91 r13725"
|
||||||
sodipodi:docname="left_arrow.svg">
|
sodipodi:docname="bottom_arrow.svg">
|
||||||
<defs
|
|
||||||
id="defs4" />
|
|
||||||
<sodipodi:namedview
|
|
||||||
id="base"
|
|
||||||
pagecolor="#ffffff"
|
|
||||||
bordercolor="#666666"
|
|
||||||
borderopacity="1.0"
|
|
||||||
inkscape:pageopacity="0.0"
|
|
||||||
inkscape:pageshadow="2"
|
|
||||||
inkscape:zoom="11.2"
|
|
||||||
inkscape:cx="4.9948796"
|
|
||||||
inkscape:cy="11.553488"
|
|
||||||
inkscape:document-units="px"
|
|
||||||
inkscape:current-layer="layer1"
|
|
||||||
showgrid="false"
|
|
||||||
inkscape:object-paths="false"
|
|
||||||
units="px"
|
|
||||||
fit-margin-top="0"
|
|
||||||
fit-margin-left="0"
|
|
||||||
fit-margin-right="0"
|
|
||||||
fit-margin-bottom="0"
|
|
||||||
inkscape:snap-page="true"
|
|
||||||
inkscape:window-width="1920"
|
|
||||||
inkscape:window-height="1056"
|
|
||||||
inkscape:window-x="0"
|
|
||||||
inkscape:window-y="24"
|
|
||||||
inkscape:window-maximized="1" />
|
|
||||||
<metadata
|
<metadata
|
||||||
id="metadata7">
|
id="metadata12">
|
||||||
<rdf:RDF>
|
<rdf:RDF>
|
||||||
<cc:Work
|
<cc:Work
|
||||||
rdf:about="">
|
rdf:about="">
|
||||||
<dc:format>image/svg+xml</dc:format>
|
<dc:format>image/svg+xml</dc:format>
|
||||||
<dc:type
|
<dc:type
|
||||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||||
<dc:title />
|
<dc:title></dc:title>
|
||||||
</cc:Work>
|
</cc:Work>
|
||||||
</rdf:RDF>
|
</rdf:RDF>
|
||||||
</metadata>
|
</metadata>
|
||||||
<g
|
<defs
|
||||||
inkscape:label="Calque 1"
|
id="defs10" />
|
||||||
inkscape:groupmode="layer"
|
<sodipodi:namedview
|
||||||
id="layer1"
|
pagecolor="#ffffff"
|
||||||
transform="translate(-122.07592,-363.16335)">
|
bordercolor="#666666"
|
||||||
<path
|
borderopacity="1"
|
||||||
style="fill:#000000;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
|
objecttolerance="10"
|
||||||
d="m 122.07592,371.21719 31.99933,0 c 0,0 -14.35892,15.89883 -16.10633,15.893 -1.31424,-0.004 -15.893,-15.893 -15.893,-15.893 z"
|
gridtolerance="10"
|
||||||
id="stylisable"
|
guidetolerance="10"
|
||||||
inkscape:connector-curvature="0"
|
inkscape:pageopacity="0"
|
||||||
sodipodi:nodetypes="ccsc" />
|
inkscape:pageshadow="2"
|
||||||
</g>
|
inkscape:window-width="1920"
|
||||||
|
inkscape:window-height="1056"
|
||||||
|
id="namedview8"
|
||||||
|
showgrid="false"
|
||||||
|
fit-margin-top="0"
|
||||||
|
fit-margin-left="0"
|
||||||
|
fit-margin-right="0"
|
||||||
|
fit-margin-bottom="0"
|
||||||
|
inkscape:snap-page="true"
|
||||||
|
inkscape:zoom="4.9166667"
|
||||||
|
inkscape:cx="-38.067797"
|
||||||
|
inkscape:cy="11.5"
|
||||||
|
inkscape:window-x="0"
|
||||||
|
inkscape:window-y="24"
|
||||||
|
inkscape:window-maximized="1"
|
||||||
|
inkscape:current-layer="svg2" />
|
||||||
|
<path
|
||||||
|
d="M 28.226666,6.113333 16,18.34 3.773333,6.113333 0,9.886667 l 16,16 16,-16 z"
|
||||||
|
id="stylisable"
|
||||||
|
inkscape:connector-curvature="0" />
|
||||||
</svg>
|
</svg>
|
||||||
|
|
|
||||||
|
Before Width: | Height: | Size: 2.1 KiB After Width: | Height: | Size: 1.6 KiB |
Loading…
Reference in New Issue