- [x] [menu-side.scss] Icone + svg pour icone du profile
This commit is contained in:
xdrm-brackets
parent
d938f2f82f
commit
b054b9ac4e
|
|
@ -14,6 +14,9 @@ $form-search-color: #5630ed;
|
|||
$form-invalid-color: #d52918;
|
||||
|
||||
|
||||
/* GESTION DES LONGUEURS */
|
||||
$menu-side-width: 4em;
|
||||
|
||||
|
||||
// POUR RESOURCE_DISPATCHER
|
||||
$rd-form-valid-color: '27a560';
|
||||
|
|
|
|||
|
|
@ -8,8 +8,8 @@
|
|||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 4em;
|
||||
height: 4em;
|
||||
width: $menu-side-width;
|
||||
height: $menu-side-width;
|
||||
|
||||
background-color: darken($theme-color, 10);
|
||||
background-image: url('/f/svg/icon/st');
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@
|
|||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: calc( 4em - 1px );
|
||||
height: calc( #{$menu-side-width} - 1px );
|
||||
|
||||
border-bottom: 1px solid darken($theme-color, 10);
|
||||
|
||||
|
|
@ -38,9 +38,9 @@
|
|||
& > #MENU-SIDE{
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 4em;
|
||||
top: $menu-side-width;
|
||||
left: 0;
|
||||
width: 4em;
|
||||
width: $menu-side-width;
|
||||
height: 100%;
|
||||
|
||||
box-shadow: 2px 1px 3px #ddd;
|
||||
|
|
@ -58,10 +58,10 @@
|
|||
& > #CONTAINER{
|
||||
display: flex;
|
||||
position: absolute;
|
||||
top: 4em;
|
||||
left: 4em;
|
||||
width: calc( 100% - 4em - 2*1em );
|
||||
height: calc( 100% - 4em - 2*1em );
|
||||
top: $menu-side-width;
|
||||
left: $menu-side-width;
|
||||
width: calc( 100% - #{$menu-side-width} - 2*1em );
|
||||
height: calc( 100% - #{$menu-side-width} - 2*1em );
|
||||
padding: 1em;
|
||||
|
||||
// Flex properties
|
||||
|
|
|
|||
|
|
@ -1,2 +1,2 @@
|
|||
#WRAPPER>#MENU-SIDE>span[data-link]{display:block;position:relative;width:calc( 4em - 2*.7em - 2*.55em - 2*.01em );height:calc( 4em - 2*.7em - 2*.55em - 2*.01em );margin:2em .7em;padding:.55em;border:.01em solid transparent;border-radius:2px;color:#a2a2a2;line-height:calc( 4em - 2*.7em - 2*.55em - 2*.01em );transition:color .3s, border .3s;cursor:pointer}#WRAPPER>#MENU-SIDE>span[data-link].mt{margin-top:3em}#WRAPPER>#MENU-SIDE>span[data-link].mb{margin-bottom:3em}#WRAPPER>#MENU-SIDE>span[data-link] svg,#WRAPPER>#MENU-SIDE>span[data-link] svg *{width:1.5em;height:1.5em;stroke:none !important;fill:#000 !important;fill:#777 !important;transition:fill .3s;pointer-events:none}#WRAPPER>#MENU-SIDE>span[data-link][data-desc]:after{content:attr(data-desc);display:block;position:absolute;top:calc( .7em - 2*.3em );left:calc( 4.6em - 2*.3em );padding:.3em;border-radius:3px;background-color:#2a2a2a;color:#e2e2e2;white-space:nowrap;transition:transform .1s;transform-origin:0 0;transform:scaleX(0)}#WRAPPER>#MENU-SIDE>span[data-link]:hover,#WRAPPER>#MENU-SIDE>span[data-link].active{color:#e63321;border-color:#e6e6e6;box-shadow:inset 0 0 .5em #eee}#WRAPPER>#MENU-SIDE>span[data-link]:hover:hover:after,#WRAPPER>#MENU-SIDE>span[data-link].active:hover:after{transform:scaleX(1);color:#fff}#WRAPPER>#MENU-SIDE>span[data-link]:hover svg,#WRAPPER>#MENU-SIDE>span[data-link]:hover svg *,#WRAPPER>#MENU-SIDE>span[data-link].active svg,#WRAPPER>#MENU-SIDE>span[data-link].active svg *{fill:#000 !important}
|
||||
#WRAPPER>#MENU-SIDE>span[data-link]{display:block;position:relative;width:calc( 4em - 2*.7em - 2*.55em - 2*.01em );height:calc( 4em - 2*.7em - 2*.55em - 2*.01em );margin:2em .7em;padding:.55em;border:.01em solid transparent;border-radius:2px;color:#a2a2a2;line-height:calc( 4em - 2*.7em - 2*.55em - 2*.01em );transition:color .3s, border .3s;cursor:pointer}#WRAPPER>#MENU-SIDE>span[data-link].mt{margin-top:3em}#WRAPPER>#MENU-SIDE>span[data-link].mb{margin-bottom:3em}#WRAPPER>#MENU-SIDE>span[data-link] svg,#WRAPPER>#MENU-SIDE>span[data-link] svg *{width:calc( 4em / 2.5 );height:calc( 4em / 2.5 );transition:fill .3s;pointer-events:none}#WRAPPER>#MENU-SIDE>span[data-link][data-desc]:after{content:attr(data-desc);display:block;position:absolute;top:calc( .7em - 2*.3em );left:calc( 4.6em - 2*.3em );padding:.3em;border-radius:3px;background-color:#2a2a2a;color:#e2e2e2;white-space:nowrap;transition:transform .1s;transform-origin:0 0;transform:scaleX(0)}#WRAPPER>#MENU-SIDE>span[data-link]:hover,#WRAPPER>#MENU-SIDE>span[data-link].active{color:#e63321;border-color:#e6e6e6;box-shadow:inset 0 0 .5em #eee}#WRAPPER>#MENU-SIDE>span[data-link]:hover:hover:after,#WRAPPER>#MENU-SIDE>span[data-link].active:hover:after{transform:scaleX(1);color:#fff}#WRAPPER>#MENU-SIDE>span[data-link]:hover svg #stylisable,#WRAPPER>#MENU-SIDE>span[data-link].active svg #stylisable{fill:#000 !important}#WRAPPER>#MENU-SIDE>span[data-link]:hover svg #stroke-stylisable,#WRAPPER>#MENU-SIDE>span[data-link].active svg #stroke-stylisable{stroke:#000 !important}
|
||||
/*# sourceMappingURL=menu-side.css.map */
|
||||
|
|
|
|||
|
|
@ -5,8 +5,8 @@
|
|||
& > span[data-link]{
|
||||
display: block;
|
||||
position: relative;
|
||||
width: calc( 4em - 2*.7em - 2*.55em - 2*.01em );
|
||||
height: calc( 4em - 2*.7em - 2*.55em - 2*.01em );
|
||||
width: calc( #{$menu-side-width} - 2*.7em - 2*.55em - 2*.01em );
|
||||
height: calc( #{$menu-side-width} - 2*.7em - 2*.55em - 2*.01em );
|
||||
|
||||
// padding: 1em;
|
||||
margin: 2em .7em;
|
||||
|
|
@ -16,7 +16,7 @@
|
|||
border-radius: 2px;
|
||||
|
||||
|
||||
// Decalage des elemts du menu
|
||||
// Decalage des elements du menu
|
||||
&.mt{ // Margin Top
|
||||
margin-top: 3em;
|
||||
}
|
||||
|
|
@ -25,19 +25,18 @@
|
|||
}
|
||||
|
||||
color: #a2a2a2;
|
||||
line-height: calc( 4em - 2*.7em - 2*.55em - 2*.01em );
|
||||
line-height: calc( #{$menu-side-width} - 2*.7em - 2*.55em - 2*.01em );
|
||||
|
||||
transition: color .3s, border .3s;
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
svg, svg *{
|
||||
width: 1.5em;
|
||||
height: 1.5em;
|
||||
width: calc( #{$menu-side-width} / 2.5 );
|
||||
height: calc( #{$menu-side-width} / 2.5 );
|
||||
|
||||
stroke: none !important;
|
||||
fill: #000 !important;
|
||||
fill: #777 !important;
|
||||
// stroke: none !important;
|
||||
// fill: #777 !important;
|
||||
|
||||
transition: fill .3s;
|
||||
|
||||
|
|
@ -79,9 +78,13 @@
|
|||
color: #fff;
|
||||
}
|
||||
|
||||
svg, svg *{
|
||||
svg #stylisable{ // pour les elements sauf le profil
|
||||
fill: #000 !important;
|
||||
}
|
||||
|
||||
svg #stroke-stylisable{ // pour le profil
|
||||
stroke: #000 !important;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,163 @@
|
|||
<?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#"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
version="1.1"
|
||||
width="33.599998"
|
||||
height="33.599998"
|
||||
viewBox="-27 23 33.599999 33.599999"
|
||||
id="malecostume_1_"
|
||||
xml:space="preserve"
|
||||
inkscape:version="0.48.4 r9939"
|
||||
sodipodi:docname="profile.svg"><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="namedview3085"
|
||||
showgrid="false"
|
||||
inkscape:zoom="20.85965"
|
||||
inkscape:cx="17.788199"
|
||||
inkscape:cy="10.452964"
|
||||
inkscape:window-x="0"
|
||||
inkscape:window-y="24"
|
||||
inkscape:window-maximized="1"
|
||||
inkscape:current-layer="malecostume_1_"
|
||||
fit-margin-top="0"
|
||||
fit-margin-left="0"
|
||||
fit-margin-right="0"
|
||||
fit-margin-bottom="0" /><metadata
|
||||
id="metadata57"><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></metadata><defs
|
||||
id="defs55" /><g
|
||||
transform="matrix(0.32,0,0,0.32,-17.56,16.296182)"
|
||||
id="g3"><g
|
||||
id="g5"><g
|
||||
id="g9"><defs
|
||||
id="defs11"><circle
|
||||
cx="23"
|
||||
cy="73"
|
||||
r="50"
|
||||
id="stroke-stylisable"
|
||||
sodipodi:cx="23"
|
||||
sodipodi:cy="73"
|
||||
sodipodi:rx="50"
|
||||
sodipodi:ry="50" /></defs><clipPath
|
||||
id="SVGID_2_"><use
|
||||
id="use15"
|
||||
style="overflow:visible"
|
||||
x="0"
|
||||
y="0"
|
||||
width="101"
|
||||
height="100"
|
||||
xlink:href="#stroke-stylisable" /></clipPath><path
|
||||
d="m 38,98.9 27.9,7.7 c 3.2,1.1 5.7,3.5 7.1,6.6 V 123 H -27 v -9.8 c 1.3,-3.1 3.9,-5.5 7.1,-6.6 L 8,98.9 V 84 h 30 v 14.9 z"
|
||||
clip-path="url(#SVGID_2_)"
|
||||
id="path17"
|
||||
style="fill:#d4b08c"
|
||||
inkscape:connector-curvature="0" /><g
|
||||
clip-path="url(#SVGID_2_)"
|
||||
id="g19"><defs
|
||||
id="defs21"><path
|
||||
d="m 38,98.9 27.9,7.7 c 3.2,1.1 5.7,3.5 7.1,6.6 V 123 H -27 v -9.8 c 1.3,-3.1 3.9,-5.5 7.1,-6.6 L 8,98.9 V 84 h 30 v 14.9 z"
|
||||
id="SVGID_3_"
|
||||
inkscape:connector-curvature="0" /></defs><clipPath
|
||||
id="SVGID_4_"><use
|
||||
id="use25"
|
||||
style="overflow:visible"
|
||||
x="0"
|
||||
y="0"
|
||||
width="101"
|
||||
height="100"
|
||||
xlink:href="#SVGID_3_" /></clipPath><polygon
|
||||
points="-27,123 23.2,123 73.3,123 73.3,98 35.2,98 30.4,103 23.2,103 16,103 11.2,98 -27,98 "
|
||||
clip-path="url(#SVGID_4_)"
|
||||
id="stylisable"
|
||||
style="fill:#1e1e23" /><polygon
|
||||
points="7.3,95.3 22,103 23,103 24,103 38.7,95.3 32.9,124.2 23,123.1 13.1,124.2 "
|
||||
clip-path="url(#SVGID_4_)"
|
||||
id="polygon29"
|
||||
style="fill:#c1cad4" /><polygon
|
||||
points="29.5,124 16.5,124 20.5,112 25.5,112 "
|
||||
clip-path="url(#SVGID_4_)"
|
||||
id="polygon31"
|
||||
style="fill:#216dd9" /><polygon
|
||||
points="25.5,112 20.5,112 12.5,103 33.5,103 "
|
||||
clip-path="url(#SVGID_4_)"
|
||||
id="polygon33"
|
||||
style="fill:#249cf2" /><path
|
||||
d="M 38.5,93 24.1,103 34.9,114 39,94 38.5,93 z M 7.5,93 21.9,103 11.1,114 7,94 7.5,93 z"
|
||||
clip-path="url(#SVGID_4_)"
|
||||
id="path35"
|
||||
style="fill:#ffffff"
|
||||
inkscape:connector-curvature="0" /></g></g><circle
|
||||
cx="23"
|
||||
cy="73"
|
||||
r="50"
|
||||
id="stroke-stylisable"
|
||||
style="fill:none;fill-opacity:1;stroke:#777777;stroke-width:5.00000008000000040;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
|
||||
sodipodi:cx="23"
|
||||
sodipodi:cy="73"
|
||||
sodipodi:rx="50"
|
||||
sodipodi:ry="50"
|
||||
transform="translate(0,0.44943228)"
|
||||
d="m 73,73 c 0,27.61424 -22.385763,50 -50,50 -27.6142375,0 -50,-22.38576 -50,-50 0,-27.614237 22.3857625,-50 50,-50 27.614237,0 50,22.385763 50,50 z" /><path
|
||||
d="M 23,97 C 21.5,97 19.5,96.7 18.2,96.1 16.6,95.4 11,91.5 9.1,89.8 6.6,87.5 5.3,84.7 4.9,79.8 4.5,74.9 3,57.5 3,53.5 3,47.8 8.1,39 23,39 l 0,0 0,0 0,0 0,0 c 14.9,0 20,8.8 20,14.5 0,4 -1.5,21.5 -1.9,26.4 -0.4,4.9 -1.6,7.7 -4.2,10 -1.9,1.7 -7.6,5.6 -9.1,6.3 C 26.5,96.7 24.5,97 23,97 l 0,0 z"
|
||||
id="path37"
|
||||
style="fill:#f2cea5"
|
||||
inkscape:connector-curvature="0" /><path
|
||||
d="m 30,83 -14,0 c -0.4,0 -0.6,0.4 -0.4,0.8 1.3,2.3 3.7,3.5 6.7,3.7 3.1,0.2 6.5,-1.3 8.1,-3.7 0.2,-0.3 0,-0.8 -0.4,-0.8 z"
|
||||
id="path39"
|
||||
style="fill:#a3705f"
|
||||
inkscape:connector-curvature="0" /><circle
|
||||
cx="32"
|
||||
cy="68"
|
||||
r="2"
|
||||
id="circle41"
|
||||
style="fill:#262626"
|
||||
sodipodi:cx="32"
|
||||
sodipodi:cy="68"
|
||||
sodipodi:rx="2"
|
||||
sodipodi:ry="2"
|
||||
d="m 34,68 c 0,1.104569 -0.895431,2 -2,2 -1.104569,0 -2,-0.895431 -2,-2 0,-1.104569 0.895431,-2 2,-2 1.104569,0 2,0.895431 2,2 z" /><circle
|
||||
cx="14"
|
||||
cy="68"
|
||||
r="2"
|
||||
id="circle43"
|
||||
style="fill:#262626"
|
||||
sodipodi:cx="14"
|
||||
sodipodi:cy="68"
|
||||
sodipodi:rx="2"
|
||||
sodipodi:ry="2"
|
||||
d="m 16,68 c 0,1.104569 -0.895431,2 -2,2 -1.104569,0 -2,-0.895431 -2,-2 0,-1.104569 0.895431,-2 2,-2 1.104569,0 2,0.895431 2,2 z" /><path
|
||||
d="m 8,65 c 0,0 1.1,-3 6.1,-3 3.4,0 5.4,1.5 6.4,3"
|
||||
id="path45"
|
||||
style="fill:none;stroke:#cc9872;stroke-width:2"
|
||||
inkscape:connector-curvature="0" /><path
|
||||
d="m 38.1,65 c 0,0 -1.1,-3 -6.1,-3 -4.8,0 -7,3 -7,5 0,1.9 0,9 0,9"
|
||||
id="path47"
|
||||
style="fill:none;stroke:#bb8660;stroke-width:2"
|
||||
inkscape:connector-curvature="0" /><path
|
||||
d="m 41.8,71.2 c 0,0 0.8,-6.3 3.7,-7.2 0.4,-1.8 1.5,-7 1.5,-9.9 0,-2.9 -0.3,-5.7 -1.9,-8.1 -1.8,-2.6 -5.6,-4.1 -7.6,-4.1 -2.3,1.4 -7.7,4.6 -9.4,6.5 -0.9,1 0.4,1.8 0.4,1.8 0,0 1.2,-0.5 1.7,-0.6 2.5,-0.7 8,-1.2 9.7,1.3 2.1,3 2.1,11.8 2.1,13.1 0,1.2 -0.2,7.2 -0.2,7.2 z"
|
||||
id="path49"
|
||||
style="fill:#d98c21"
|
||||
inkscape:connector-curvature="0" /><path
|
||||
d="m 0.5,64 c 2.9,1 3.7,7.2 3.7,7.2 0,0 -0.2,-6 -0.2,-7.2 0,-1.6 0.2,-9.1 3.4,-12.7 3.6,-4 8.4,-5.3 11.1,-3.5 1.4,0.9 6.1,5.5 11.1,1.7 3,-2.3 8.5,-7.5 8.5,-7.5 0,0 -2.9,-8.9 -16.1,-7.9 -5.6,0.5 -11.8,-0.9 -11.8,-0.9 0,0 -0.1,2.5 0.9,3.8 -8.3,2.4 -11,8.4 -11.8,13 -0.2,0.9 -0.3,1.8 -0.3,2.7 0,0.5 0,1 0,1.4 0,2.9 1.1,8 1.5,9.9 z"
|
||||
id="path51"
|
||||
style="fill:#e6a422"
|
||||
inkscape:connector-curvature="0" /></g></g></svg>
|
||||
|
After Width: | Height: | Size: 7.1 KiB |
2
todo.md
2
todo.md
|
|
@ -8,7 +8,6 @@
|
|||
# EN COURS #
|
||||
############
|
||||
|
||||
|
||||
- [ ] [view/users] Gestion des filtres
|
||||
- [ ] [view/machines] Gestion des filtres
|
||||
|
||||
|
|
@ -18,6 +17,7 @@
|
|||
########
|
||||
# FAIT #
|
||||
########
|
||||
- [x] [menu-side.scss] Icone + svg pour icone du profile
|
||||
- [x] [container.scss] Alignement sur les listes des icones de modif+suppr
|
||||
- [x] [view/js/*] animation pour les recherches (modif/suppr)
|
||||
- [x] [view/js/*] Correction des liens avec element.id_ (hidden)
|
||||
|
|
|
|||
12
view.php
12
view.php
|
|
@ -43,15 +43,15 @@
|
|||
|
||||
<!-- MENU DE LA PAGE -->
|
||||
<nav id='MENU-SIDE'>
|
||||
<span data-link='profile' data-desc='Profil' class='mb' ><?php echo ResourceDispatcher::getResource('f/svg/dashboard/st/menu-side'); ?></span>
|
||||
<span data-link='profile' data-desc='Profil' class='mb' ><?php echo ResourceDispatcher::getResource('f/svg/profile/st/menu-side'); ?></span>
|
||||
|
||||
|
||||
<span data-link='dashboard' data-desc='Tableau de bord' class='apart' ><?php echo ResourceDispatcher::getResource('f/svg/dashboard/st/menu-side'); ?></span>
|
||||
<span data-link='machines' data-desc='Véhicules' ><?php echo ResourceDispatcher::getResource('f/svg/machines/st/menu-side' ); ?></span>
|
||||
<span data-link='users' data-desc='Utilisateurs' ><?php echo ResourceDispatcher::getResource('f/svg/users/st/menu-side' ); ?></span>
|
||||
<span data-link='analytics' data-desc='Statistiques et suivi' ><?php echo ResourceDispatcher::getResource('f/svg/analytics/st/menu-side'); ?></span>
|
||||
<span data-link='dashboard' data-desc='Tableau de bord' class='apart' ><?php echo ResourceDispatcher::getResource('f/svg/dashboard/st/menu-side/777777'); ?></span>
|
||||
<span data-link='machines' data-desc='Véhicules' ><?php echo ResourceDispatcher::getResource('f/svg/machines/st/menu-side/777777' ); ?></span>
|
||||
<span data-link='users' data-desc='Utilisateurs' ><?php echo ResourceDispatcher::getResource('f/svg/users/st/menu-side/777777' ); ?></span>
|
||||
<span data-link='analytics' data-desc='Statistiques et suivi' ><?php echo ResourceDispatcher::getResource('f/svg/analytics/st/menu-side/777777'); ?></span>
|
||||
|
||||
<span data-link='settings' data-desc='Paramètres' class='mt' ><?php echo ResourceDispatcher::getResource('f/svg/settings/st/menu-side' ); ?></span>
|
||||
<span data-link='settings' data-desc='Paramètres' class='mt' ><?php echo ResourceDispatcher::getResource('f/svg/settings/st/menu-side/777777' ); ?></span>
|
||||
</nav>
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue