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 > section > table{
|
||||
|
||||
& tr,
|
||||
& > tr{
|
||||
& tr,
|
||||
& > tr{
|
||||
|
||||
& > td{
|
||||
padding: .8em;
|
||||
& > td{
|
||||
padding: .8em;
|
||||
|
||||
|
||||
color: #888;
|
||||
font-weight: normal;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
color: #888;
|
||||
font-weight: normal;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
|
||||
& > input[type="checkbox"]+label[for]:before{
|
||||
left: -.4em;
|
||||
width: calc( 1.05em - 2*.15em );
|
||||
}
|
||||
}
|
||||
& > input[type="checkbox"]+label[for]:before{
|
||||
left: -.4em;
|
||||
width: calc( 1.05em - 2*.15em );
|
||||
}
|
||||
}
|
||||
|
||||
& > td.hidden:before{
|
||||
content: '+';
|
||||
color: #ddd;
|
||||
font-weight: bold;
|
||||
}
|
||||
& > td.hidden:before{
|
||||
content: '+';
|
||||
color: #ddd;
|
||||
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;
|
||||
padding: 5px 60px;
|
||||
|
||||
border-left: 2px solid #d8e0e9;
|
||||
border-left: 2px solid #d8e0e9;
|
||||
|
||||
}
|
||||
|
||||
|
|
@ -37,30 +37,30 @@
|
|||
color: #000;
|
||||
font-weight: bold;
|
||||
|
||||
// background-color: $timeline-color;
|
||||
// background-color: $timeline-color;
|
||||
|
||||
/* Gestion du before (compteur css) //*/
|
||||
&[data-n]:before{
|
||||
content: attr(data-n);
|
||||
content: attr(data-n);
|
||||
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
margin-top: .6em;
|
||||
margin-left: -41px;
|
||||
padding: 3px 12px;
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
margin-top: .6em;
|
||||
margin-left: -41px;
|
||||
padding: 3px 12px;
|
||||
|
||||
border-radius: 50%;
|
||||
/* Contour blanc*/
|
||||
box-shadow: 0 0 0 3px #fff;
|
||||
border-radius: 50%;
|
||||
/* Contour blanc*/
|
||||
box-shadow: 0 0 0 3px #fff;
|
||||
|
||||
background-color: $timeline-color;
|
||||
background-color: $timeline-color;
|
||||
|
||||
font-size: 1.3em;
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
|
||||
/* On centre sur la ligne*/
|
||||
@include transform( translateX(-50%) translateY(-50%) );
|
||||
/* On centre sur la ligne*/
|
||||
@include transform( translateX(-50%) translateY(-50%) );
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -79,25 +79,25 @@
|
|||
&[data-icon]:before{
|
||||
content: attr(data-icon);
|
||||
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
margin-top: .9em;
|
||||
margin-left: -41px;
|
||||
padding: 9px;
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
margin-top: .9em;
|
||||
margin-left: -41px;
|
||||
padding: 9px;
|
||||
|
||||
border-radius: 50%;
|
||||
/* Contour blanc*/
|
||||
box-shadow: 0 0 0 2px #fff;
|
||||
border-radius: 50%;
|
||||
/* Contour blanc*/
|
||||
box-shadow: 0 0 0 2px #fff;
|
||||
|
||||
background-color: $timeline-color;
|
||||
background-color: $timeline-color;
|
||||
|
||||
font-size: .9em;
|
||||
font-family: 'icomoon';
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
|
||||
/* On centre sur la ligne*/
|
||||
@include transform( translateX(-50%) translateY(-50%) );
|
||||
/* On centre sur la ligne*/
|
||||
@include transform( translateX(-50%) translateY(-50%) );
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -115,34 +115,34 @@
|
|||
&:before{
|
||||
content: '';
|
||||
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
margin-top: .7em;
|
||||
margin-left: -41px;
|
||||
padding: 7px;
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
margin-top: .7em;
|
||||
margin-left: -41px;
|
||||
padding: 7px;
|
||||
|
||||
border-radius: 50%;
|
||||
/* Contour blanc*/
|
||||
box-shadow: 0 0 0 2px #fff;
|
||||
border-radius: 50%;
|
||||
/* Contour blanc*/
|
||||
box-shadow: 0 0 0 2px #fff;
|
||||
|
||||
background-color: $timeline-color;
|
||||
background-color: $timeline-color;
|
||||
|
||||
/* On centre sur la ligne*/
|
||||
@include transform( translateX(-50%) translateY(-50%) );
|
||||
/* On centre sur la ligne*/
|
||||
@include transform( translateX(-50%) translateY(-50%) );
|
||||
}
|
||||
|
||||
/* Texte genre text message*/
|
||||
&[data-text]:after{
|
||||
content: attr(data-text);
|
||||
padding: 6px 10px;
|
||||
/* Texte genre text message*/
|
||||
&[data-text]:after{
|
||||
content: attr(data-text);
|
||||
padding: 6px 10px;
|
||||
|
||||
border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
|
||||
background: $timeline-color;
|
||||
background: $timeline-color;
|
||||
|
||||
color: #fff;
|
||||
font-weight: normal;
|
||||
}
|
||||
color: #fff;
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
|
||||
/* (5) 'Tags' -> textes sur le liseré gauche */
|
||||
|
|
@ -151,73 +151,73 @@
|
|||
|
||||
padding: 40px 60px;
|
||||
|
||||
&:before{
|
||||
content: attr(data-tag);
|
||||
&:before{
|
||||
content: attr(data-tag);
|
||||
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
margin-top: .5em;
|
||||
margin-left: -41px;
|
||||
padding: 2px;
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
margin-top: .5em;
|
||||
margin-left: -41px;
|
||||
padding: 2px;
|
||||
|
||||
background-color: #fff;
|
||||
background-color: #fff;
|
||||
|
||||
font-size: 1.2em;
|
||||
color: $timeline-color;
|
||||
font-weight: bold;
|
||||
font-size: 1.2em;
|
||||
color: $timeline-color;
|
||||
font-weight: bold;
|
||||
|
||||
/* On centre sur la ligne*/
|
||||
@include transform( translateX(-50%) translateY(-50%) );
|
||||
}
|
||||
/* On centre sur la ligne*/
|
||||
@include transform( translateX(-50%) translateY(-50%) );
|
||||
}
|
||||
}
|
||||
|
||||
/* (6) Input d'upload de fichier (css hack) */
|
||||
& input[type='file']{
|
||||
position: relative;
|
||||
opacity: 0;
|
||||
/* (6) Input d'upload de fichier (css hack) */
|
||||
& input[type='file']{
|
||||
position: relative;
|
||||
opacity: 0;
|
||||
|
||||
z-index: 8;
|
||||
z-index: 8;
|
||||
|
||||
cursor: pointer;
|
||||
cursor: pointer;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
/* Contiendra l'input*/
|
||||
& input[type='file'] + span.file-input{
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
margin-top: -1px;
|
||||
margin-left: -290px;
|
||||
width: calc( 290px - 2*15px );
|
||||
height: 30px;
|
||||
/* Contiendra l'input*/
|
||||
& input[type='file'] + span.file-input{
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
margin-top: -1px;
|
||||
margin-left: -290px;
|
||||
width: calc( 290px - 2*15px );
|
||||
height: 30px;
|
||||
|
||||
padding: 0 15px;
|
||||
padding: 0 15px;
|
||||
|
||||
border-radius: 3px;
|
||||
background: $timeline-0;
|
||||
border-radius: 3px;
|
||||
background: $timeline-0;
|
||||
|
||||
color: #222;
|
||||
line-height: 30px;
|
||||
font-weight: normal;
|
||||
color: #222;
|
||||
line-height: 30px;
|
||||
font-weight: normal;
|
||||
|
||||
z-index: 9;
|
||||
z-index: 9;
|
||||
|
||||
cursor: pointer;
|
||||
cursor: pointer;
|
||||
|
||||
pointer-events: none;
|
||||
|
||||
/* Icone d'upload*/
|
||||
&:before{
|
||||
content: 'e ';
|
||||
/* Icone d'upload*/
|
||||
&:before{
|
||||
content: 'e ';
|
||||
|
||||
font-size: 1em;
|
||||
font-size: 1em;
|
||||
font-family: 'icomoon';
|
||||
color: #222;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
@include transition( background .1s ease-in-out );
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* Animation de hover*/
|
||||
|
|
@ -233,7 +233,7 @@
|
|||
color: #fff;
|
||||
// On change l'icône
|
||||
&:before{
|
||||
content: 'v ';
|
||||
content: 'v ';
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
|
@ -315,17 +315,17 @@
|
|||
|
||||
/* (11) Gestion des custom <select> */
|
||||
& select{
|
||||
width: auto;
|
||||
display: inline-block;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
width: auto;
|
||||
display: inline-block;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
|
||||
// Hides right arrow
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
text-indent: 1px;
|
||||
text-overflow: '';
|
||||
font-size: .9em;
|
||||
// Hides right arrow
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
text-indent: 1px;
|
||||
text-overflow: '';
|
||||
font-size: .9em;
|
||||
|
||||
& option:not(:disabled){
|
||||
padding-left: 1.5em;
|
||||
|
|
@ -343,18 +343,18 @@
|
|||
}
|
||||
|
||||
& .select-container select{
|
||||
// width: auto;
|
||||
display: inline-block;
|
||||
padding: 2px;
|
||||
padding-right: 30px;
|
||||
// width: auto;
|
||||
display: inline-block;
|
||||
padding: 5px 2px;
|
||||
padding-right: 30px;
|
||||
|
||||
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-size: 10px auto;
|
||||
background: #fff url('/f/svg/bottom_arrow/st/container/333333') right 10px center no-repeat;
|
||||
background-size: 10px auto;
|
||||
|
||||
overflow: hidden;
|
||||
overflow: hidden;
|
||||
|
||||
// Animation de @focus
|
||||
&:focus{
|
||||
|
|
@ -414,33 +414,33 @@
|
|||
/* (13) Gestion de la navigation fléchée */
|
||||
& .arrow-container{
|
||||
|
||||
& span{
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
& span{
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
|
||||
margin: .3em 0;
|
||||
padding: .5em .8em;
|
||||
margin: .3em 0;
|
||||
padding: .5em .8em;
|
||||
|
||||
border: 1px solid darken(#d8e0e9, 10);
|
||||
border: 1px solid darken(#d8e0e9, 10);
|
||||
|
||||
// Pas de rebord droite sauf si dernier
|
||||
&:not(:last-child):not(.lc){
|
||||
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
|
||||
&:first-child,
|
||||
&:first-child,
|
||||
&.fc{ border-top-left-radius: 5px; border-bottom-left-radius: 5px; }
|
||||
|
||||
// Arrondi pour dernier
|
||||
&:last-child,
|
||||
&:last-child,
|
||||
&.lc{ border-top-right-radius: 5px; border-bottom-right-radius: 5px; }
|
||||
|
||||
// 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='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='submit' class='primary sub-number' value='Enregistrer'>\n"+
|
||||
"</h4>\n\n");
|
||||
|
|
|
|||
|
|
@ -1,6 +1,4 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
|
|
@ -9,62 +7,54 @@
|
|||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
width="32"
|
||||
height="32"
|
||||
viewBox="0 0 32.000001 32.000001"
|
||||
viewBox="0 0 32.000001 32"
|
||||
width="32"
|
||||
id="svg2"
|
||||
version="1.1"
|
||||
inkscape:version="0.91 r13725"
|
||||
sodipodi:docname="left_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" />
|
||||
sodipodi:docname="bottom_arrow.svg">
|
||||
<metadata
|
||||
id="metadata7">
|
||||
<rdf:RDF>
|
||||
<cc:Work
|
||||
rdf:about="">
|
||||
<dc:format>image/svg+xml</dc:format>
|
||||
<dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||
<dc:title />
|
||||
</cc:Work>
|
||||
</rdf:RDF>
|
||||
id="metadata12">
|
||||
<rdf:RDF>
|
||||
<cc:Work
|
||||
rdf:about="">
|
||||
<dc:format>image/svg+xml</dc:format>
|
||||
<dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||
<dc:title></dc:title>
|
||||
</cc:Work>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
<g
|
||||
inkscape:label="Calque 1"
|
||||
inkscape:groupmode="layer"
|
||||
id="layer1"
|
||||
transform="translate(-122.07592,-363.16335)">
|
||||
<path
|
||||
style="fill:#000000;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
|
||||
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"
|
||||
id="stylisable"
|
||||
inkscape:connector-curvature="0"
|
||||
sodipodi:nodetypes="ccsc" />
|
||||
</g>
|
||||
<defs
|
||||
id="defs10" />
|
||||
<sodipodi:namedview
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1"
|
||||
objecttolerance="10"
|
||||
gridtolerance="10"
|
||||
guidetolerance="10"
|
||||
inkscape:pageopacity="0"
|
||||
inkscape:pageshadow="2"
|
||||
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>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 2.1 KiB After Width: | Height: | Size: 1.6 KiB |
Loading…
Reference in New Issue