Modification du header et des éleéments
Moins propre dans le code (absolute/!\) mais plus propre esthétiquement
This commit is contained in:
xdrm-brackets
parent
a3dc1d2940
commit
54d8955b51
|
|
@ -17,5 +17,4 @@ $dark-fg-primary: #ffffff;
|
|||
=========================================================*/
|
||||
/* (1) Layout de base */
|
||||
$menu-side-width: 15em;
|
||||
$header-height: 5em;
|
||||
$header-elements: calc( #{$header-height} - 2*1.5em );
|
||||
$header-height: 4em;
|
||||
|
|
|
|||
|
|
@ -1,2 +1,2 @@
|
|||
#WRAPPER>#CONTAINER>section{display:none;position:relative;flex-grow:1;padding:1em;border-radius:3px;background-color:#fff;color:#000;font-size:1em}#WRAPPER>#CONTAINER>section.active{display:block}#WRAPPER>#CONTAINER>section h6{color:#848484;font-size:1.2em;text-transform:uppercase;font-weight:300;letter-spacing:.2em;margin:0;padding:0}#WRAPPER>#CONTAINER>section h6:before{content:'- '}#WRAPPER>#CONTAINER>section h6:after{content:' -'}#WRAPPER>#CONTAINER>section h6.center{text-align:center}#WRAPPER>#CONTAINER>section input[type="radio"],#WRAPPER>#CONTAINER>section input[type="checkbox"]{display:none}#WRAPPER>#CONTAINER>section input[type="radio"]+label[for],#WRAPPER>#CONTAINER>section input[type="checkbox"]+label[for]{padding-left:.8em;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}#WRAPPER>#CONTAINER>section input[type="radio"]+label[for]:before,#WRAPPER>#CONTAINER>section input[type="checkbox"]+label[for]:before{content:'';display:inline-block;position:relative;top:.1em;left:-.8em;width:calc( 1em - 2*.15em );height:calc( 1em - 2*.15em );border-radius:50% / 50%;border:0.15em solid #53d192;background:#fff center center no-repeat;background-image:none;background-size:70% auto;transition:background .2s ease-in-out;cursor:pointer}#WRAPPER>#CONTAINER>section input[type="radio"]:checked+label[for]:before,#WRAPPER>#CONTAINER>section input[type="checkbox"]:checked+label[for]:before{background-color:#53d192;background-image:url("/f/svg/checked/st/container")}#WRAPPER>#CONTAINER>section input[type="checkbox"]+label[for]:before{border-radius:3px}#WRAPPER>#CONTAINER>section input[type="button"]{margin:.5em 0;padding:.3em .5em;border-radius:3px;border:1px solid #515151;font-weight:bold;color:#515151;background-color:#fff;transition:background .1s ease-in-out, color .1s ease-in-out}#WRAPPER>#CONTAINER>section input[type="button"]:hover{background-color:#515151;color:#fff}#WRAPPER>#CONTAINER>section input[type="button"].primary{border-color:#53d192;color:#53d192;background-color:#fff}#WRAPPER>#CONTAINER>section input[type="button"].primary:hover{background-color:#53d192;color:#fff}
|
||||
#WRAPPER>#CONTAINER>section{display:none;position:relative;flex-grow:1;padding:1em;border-radius:3px;background-color:#fff;color:#000;font-size:1em;border:1px solid #ddd}#WRAPPER>#CONTAINER>section.active{display:block}#WRAPPER>#CONTAINER>section h6{color:#848484;font-size:1.2em;text-transform:uppercase;font-weight:300;letter-spacing:.2em;margin:0;padding:0}#WRAPPER>#CONTAINER>section h6:before{content:'- '}#WRAPPER>#CONTAINER>section h6:after{content:' -'}#WRAPPER>#CONTAINER>section h6.center{text-align:center}#WRAPPER>#CONTAINER>section input[type="radio"],#WRAPPER>#CONTAINER>section input[type="checkbox"]{display:none}#WRAPPER>#CONTAINER>section input[type="radio"]+label[for],#WRAPPER>#CONTAINER>section input[type="checkbox"]+label[for]{padding-left:.8em;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}#WRAPPER>#CONTAINER>section input[type="radio"]+label[for]:before,#WRAPPER>#CONTAINER>section input[type="checkbox"]+label[for]:before{content:'';display:inline-block;position:relative;top:.1em;left:-.8em;width:calc( 1em - 2*.15em );height:calc( 1em - 2*.15em );border-radius:50% / 50%;border:0.15em solid #53d192;background:#fff center center no-repeat;background-image:none;background-size:70% auto;transition:background .2s ease-in-out;cursor:pointer}#WRAPPER>#CONTAINER>section input[type="radio"]:checked+label[for]:before,#WRAPPER>#CONTAINER>section input[type="checkbox"]:checked+label[for]:before{background-color:#53d192;background-image:url("/f/svg/checked/st/container")}#WRAPPER>#CONTAINER>section input[type="checkbox"]+label[for]:before{border-radius:3px}#WRAPPER>#CONTAINER>section input[type="button"]{margin:.5em 0;padding:.3em .5em;border-radius:3px;border:1px solid #515151;font-weight:bold;color:#515151;background-color:#fff;transition:background .1s ease-in-out, color .1s ease-in-out}#WRAPPER>#CONTAINER>section input[type="button"]:hover{background-color:#515151;color:#fff}#WRAPPER>#CONTAINER>section input[type="button"].primary{border-color:#53d192;color:#53d192;background-color:#fff}#WRAPPER>#CONTAINER>section input[type="button"].primary:hover{background-color:#53d192;color:#fff}
|
||||
/*# sourceMappingURL=container.css.map */
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"version": 3,
|
||||
"mappings": "AAMC,2BAAW,CACV,OAAO,CAAE,IAAI,CAKb,QAAQ,CAAE,QAAQ,CAClB,SAAS,CAAE,CAAC,CAEZ,OAAO,CAAE,GAAG,CAEZ,aAAa,CAAE,GAAG,CAElB,gBAAgB,CAAE,IAAI,CAEtB,KAAK,CAAE,IAAI,CACX,SAAS,CAAE,GAAG,CAZd,kCAAQ,CAAC,OAAO,CAAE,KAAK,CAkBvB,8BAAI,CACH,KAAK,CAAE,OAAsB,CAC7B,SAAS,CAAE,KAAK,CAChB,cAAc,CAAE,SAAS,CACzB,WAAW,CAAE,GAAG,CAChB,cAAc,CAAE,IAAI,CAEpB,MAAM,CAAE,CAAC,CACT,OAAO,CAAE,CAAC,CAEV,qCAAQ,CAAC,OAAO,CAAC,IAAI,CACrB,oCAAO,CAAC,OAAO,CAAC,IAAI,CAGpB,qCAAQ,CACP,UAAU,CAAE,MAAM,CAUpB,kGACwB,CACvB,OAAO,CAAE,IAAI,CAId,wHACqC,CACpC,YAAY,CAAE,IAAI,CAGlB,qBAAqB,CAAE,IAAI,CAC3B,mBAAmB,CAAI,IAAI,CAC3B,kBAAkB,CAAK,IAAI,CAC3B,gBAAgB,CAAO,IAAI,CAC3B,eAAe,CAAQ,IAAI,CAC3B,WAAW,CAAY,IAAI,CAI3B,sIAAQ,CACP,OAAO,CAAE,EAAE,CACX,OAAO,CAAE,YAAY,CACrB,QAAQ,CAAE,QAAQ,CACjB,GAAG,CAAE,IAAI,CACT,IAAI,CAAE,KAAK,CACX,KAAK,CAAE,qBAAqB,CAC5B,MAAM,CAAE,qBAAqB,CAE9B,aAAa,CAAE,SAAS,CACxB,MAAM,CAAE,oBAA6B,CAErC,UAAU,CAAE,4BAA4B,CACxC,gBAAgB,CAAE,IAAI,CACtB,eAAe,CAAE,QAAQ,CAEzB,UAAU,CAAE,0BAA0B,CAEtC,MAAM,CAAE,OAAO,CAKjB,sJACoD,CACnD,gBAAgB,CC5FA,OAAO,CD6FvB,gBAAgB,CAAE,kCAAkC,CAKrD,oEAA4C,CAC3C,aAAa,CAAE,GAAG,CASnB,gDAAsB,CACrB,MAAM,CAAE,MAAM,CACd,OAAO,CAAE,SAAS,CAElB,aAAa,CAAE,GAAG,CAClB,MAAM,CAAE,iBAAmB,CAE3B,WAAW,CAAE,IAAI,CACjB,KAAK,CCrHW,OAAO,CDuHvB,gBAAgB,CAAE,IAAI,CAEtB,UAAU,CAAE,iDAAiD,CAG7D,sDAAO,CACN,gBAAgB,CC7HD,OAAO,CD8HtB,KAAK,CAAE,IAAI,CAKZ,wDAAS,CACR,YAAY,CCnIG,OAAO,CDoItB,KAAK,CCpIU,OAAO,CDqItB,gBAAgB,CAAE,IAAI,CAItB,8DAAO,CACN,gBAAgB,CC1IF,OAAO,CD2IrB,KAAK,CAAE,IAAI",
|
||||
"mappings": "AAMC,2BAAW,CACV,OAAO,CAAE,IAAI,CAKb,QAAQ,CAAE,QAAQ,CAClB,SAAS,CAAE,CAAC,CAEZ,OAAO,CAAE,GAAG,CAEZ,aAAa,CAAE,GAAG,CAElB,gBAAgB,CAAE,IAAI,CAEtB,KAAK,CAAE,IAAI,CACX,SAAS,CAAE,GAAG,CAEd,MAAM,CAAE,cAAc,CAdtB,kCAAQ,CAAE,OAAO,CAAE,KAAK,CAoBxB,8BAAI,CACH,KAAK,CAAE,OAAsB,CAC7B,SAAS,CAAE,KAAK,CAChB,cAAc,CAAE,SAAS,CACzB,WAAW,CAAE,GAAG,CAChB,cAAc,CAAE,IAAI,CAEpB,MAAM,CAAE,CAAC,CACT,OAAO,CAAE,CAAC,CAEV,qCAAQ,CAAC,OAAO,CAAC,IAAI,CACrB,oCAAO,CAAC,OAAO,CAAC,IAAI,CAGpB,qCAAQ,CACP,UAAU,CAAE,MAAM,CAUpB,kGACwB,CACvB,OAAO,CAAE,IAAI,CAId,wHACqC,CACpC,YAAY,CAAE,IAAI,CAGlB,qBAAqB,CAAE,IAAI,CAC3B,mBAAmB,CAAI,IAAI,CAC3B,kBAAkB,CAAK,IAAI,CAC3B,gBAAgB,CAAO,IAAI,CAC3B,eAAe,CAAQ,IAAI,CAC3B,WAAW,CAAY,IAAI,CAI3B,sIAAQ,CACP,OAAO,CAAE,EAAE,CACX,OAAO,CAAE,YAAY,CACrB,QAAQ,CAAE,QAAQ,CACjB,GAAG,CAAE,IAAI,CACT,IAAI,CAAE,KAAK,CACX,KAAK,CAAE,qBAAqB,CAC5B,MAAM,CAAE,qBAAqB,CAE9B,aAAa,CAAE,SAAS,CACxB,MAAM,CAAE,oBAA6B,CAErC,UAAU,CAAE,4BAA4B,CACxC,gBAAgB,CAAE,IAAI,CACtB,eAAe,CAAE,QAAQ,CAEzB,UAAU,CAAE,0BAA0B,CAEtC,MAAM,CAAE,OAAO,CAKjB,sJACoD,CACnD,gBAAgB,CC9FA,OAAO,CD+FvB,gBAAgB,CAAE,kCAAkC,CAKrD,oEAA4C,CAC3C,aAAa,CAAE,GAAG,CASnB,gDAAsB,CACrB,MAAM,CAAE,MAAM,CACd,OAAO,CAAE,SAAS,CAElB,aAAa,CAAE,GAAG,CAClB,MAAM,CAAE,iBAAmB,CAE3B,WAAW,CAAE,IAAI,CACjB,KAAK,CCvHW,OAAO,CDyHvB,gBAAgB,CAAE,IAAI,CAEtB,UAAU,CAAE,iDAAiD,CAG7D,sDAAO,CACN,gBAAgB,CC/HD,OAAO,CDgItB,KAAK,CAAE,IAAI,CAKZ,wDAAS,CACR,YAAY,CCrIG,OAAO,CDsItB,KAAK,CCtIU,OAAO,CDuItB,gBAAgB,CAAE,IAAI,CAItB,8DAAO,CACN,gBAAgB,CC5IF,OAAO,CD6IrB,KAAK,CAAE,IAAI",
|
||||
"sources": ["container.scss","constants.scss"],
|
||||
"names": [],
|
||||
"file": "container.css"
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
display: none;
|
||||
|
||||
// Gestion de l'activation des sous-parties
|
||||
&.active{display: block;}
|
||||
&.active{ display: block; }
|
||||
|
||||
position: relative;
|
||||
flex-grow: 1;
|
||||
|
|
@ -21,6 +21,8 @@
|
|||
|
||||
color: #000;
|
||||
font-size: 1em;
|
||||
|
||||
border: 1px solid #ddd;
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,2 +1,2 @@
|
|||
#WRAPPER>#HEADER>#searchbar{display:block;position:relative;width:10%;margin:1.3em 0;padding:.2em 1em;border:0;border-radius:2em;background-color:#e8e8e8;transition:transform .3s ease-in-out, width .3s ease-in-out}#WRAPPER>#HEADER>#searchbar:focus{width:20%}#WRAPPER>#HEADER>.user-picture{display:block;position:relative;margin-left:2em;width:calc( 5em - 2*1.5em );height:calc( 5em - 2*1.5em );border-radius:50% / 50%;background:#e8e8e8 url("/f/svg/nopic/st/header") center center no-repeat;background-size:auto 80%;cursor:default;align-self:center}#WRAPPER>#HEADER>.user-picture.active{background-image:url("/f/svg/sample/dy/profile");background-size:auto 100%}#WRAPPER>#HEADER>.user-name{display:block;position:relative;margin-left:1em;margin-right:4em;color:#828282;align-self:center;cursor:pointer}#WRAPPER>#HEADER>.user-name:hover{color:#4f4f4f}#WRAPPER>#HEADER>.user-panel{display:block;position:absolute;top:calc( 5em - 1em );right:0;margin:.5em;border-radius:5px;border:1px solid #cfcfcf;background-color:#fff;transition:left .3s ease-in-out}#WRAPPER>#HEADER>.user-panel>span{display:block;position:relative;color:#000;padding:.5em 1em;padding-left:2em;cursor:pointer}#WRAPPER>#HEADER>.user-panel>span:not(:last-child){border-bottom:1px solid #ddd}#WRAPPER>#HEADER>.user-panel>span:hover{background-color:#eee}#WRAPPER>#HEADER>.user-panel:before{content:'';display:block;position:absolute;top:-2.5em;left:-3.2em;width:1em;height:1em;background:url("/f/svg/expand/st/header/999999") center center no-repeat;background-size:1em 1em;cursor:pointer}#WRAPPER>#HEADER>.user-panel:before:hover{background-image:url("/f/svg/expand/st/header/ff0000")}#WRAPPER>#HEADER>#toggle-user-panel{display:none}#WRAPPER>#HEADER>#toggle-user-panel+.user-panel{left:100%}#WRAPPER>#HEADER>#toggle-user-panel:checked+.user-panel{left:auto}#WRAPPER>#HEADER>#toggle-user-panel:checked+.user-panel:before{left:7em}
|
||||
#WRAPPER>#HEADER>#searchbar{display:inline-block;position:absolute;top:.8em;left:1em;width:20em;height:2em;padding:.2em 1em;border:0;border-radius:3px;background-color:#e8e8e8}#WRAPPER>#HEADER>#user-data{display:inline-block;position:absolute;top:0;right:0;height:calc( 100% - 2*1em );background-color:#fff}#WRAPPER>#HEADER>#user-data:hover{background-color:red}#WRAPPER>#HEADER>#user-data>#user-name{display:block;position:absolute;top:0;right:calc( 4em*2 - 1em );height:4em;color:#828282;line-height:4em;white-space:nowrap;cursor:pointer}#WRAPPER>#HEADER>#user-data>#user-name:hover{color:#4f4f4f}#WRAPPER>#HEADER>#user-data>#user-picture{display:block;position:absolute;top:1em;right:4em;width:calc( 4em - 2*1em );height:calc( 4em - 2*1em );border-radius:50% / 50%;background:#e8e8e8 url("/f/svg/nopic/st/header") center center no-repeat;background-size:auto 80%;cursor:default;align-self:center}#WRAPPER>#HEADER>#user-data>#user-picture.active{background-image:url("/f/svg/sample/dy/profile");background-size:auto 100%}#WRAPPER>#HEADER>#user-data:before{content:'';display:block;position:absolute;top:0;right:0;width:4em;height:4em;background:url("/f/svg/expand/st/header/999999") center center no-repeat;background-size:1em 1em;cursor:pointer}#WRAPPER>#HEADER>.user-panel{display:block;position:absolute;top:calc( 4em - 1em );right:0;margin:.5em;border-radius:5px;border:1px solid #cfcfcf;background-color:#fff;transition:left .3s ease-in-out}#WRAPPER>#HEADER>.user-panel>span{display:block;position:relative;color:#000;padding:.5em 1em;padding-left:2em;cursor:pointer}#WRAPPER>#HEADER>.user-panel>span:not(:last-child){border-bottom:1px solid #ddd}#WRAPPER>#HEADER>.user-panel>span:hover{background-color:#eee}#WRAPPER>#HEADER>#toggle-user-panel{display:none}#WRAPPER>#HEADER>#toggle-user-panel+.user-panel{left:100%}#WRAPPER>#HEADER>#toggle-user-panel:checked+.user-panel{left:auto}#WRAPPER>#HEADER>#toggle-user-panel:checked+.user-panel:before{left:7em}
|
||||
/*# sourceMappingURL=header.css.map */
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"version": 3,
|
||||
"mappings": "AAOC,2BAAc,CACb,OAAO,CAAE,KAAK,CACd,QAAQ,CAAE,QAAQ,CACjB,KAAK,CAAE,GAAG,CAEX,MAAM,CAAE,OAAO,CAEf,OAAO,CAAE,QAAQ,CAEjB,MAAM,CAAE,CAAC,CACT,aAAa,CAAE,GAAG,CAElB,gBAAgB,CChBC,OAAO,CDkBxB,UAAU,CAAE,gDAAgD,CAG5D,iCAAO,CACN,KAAK,CAAE,GAAG,CAQZ,8BAAiB,CAChB,OAAO,CAAE,KAAK,CACd,QAAQ,CAAE,QAAQ,CACX,WAAW,CAAE,GAAG,CACtB,KAAK,CCjBU,qBAAmC,CDkBlD,MAAM,CClBS,qBAAmC,CDoBnD,aAAa,CAAE,SAAS,CAExB,UAAU,CAAE,6DAA+D,CAC3E,eAAe,CAAE,QAAQ,CAKzB,MAAM,CAAE,OAAO,CAEf,UAAU,CAAE,MAAM,CAJlB,qCAAQ,CAAE,gBAAgB,CAAE,+BAA+B,CAAE,eAAe,CAAE,SAAS,CAQxF,2BAAc,CACV,OAAO,CAAE,KAAK,CACd,QAAQ,CAAE,QAAQ,CACd,WAAW,CAAE,GAAG,CAChB,YAAY,CAAE,GAAG,CAExB,KAAK,CAAE,OAAqB,CAG5B,UAAU,CAAE,MAAM,CAElB,MAAM,CAAE,OAAO,CAGf,iCAAO,CACN,KAAK,CAAE,OAAqB,CAQ9B,4BAAe,CACX,OAAO,CAAE,KAAK,CACd,QAAQ,CAAE,QAAQ,CACd,GAAG,CAAE,iBAA+B,CACpC,KAAK,CAAE,CAAC,CAET,MAAM,CAAE,IAAI,CAElB,aAAa,CAAE,GAAG,CAClB,MAAM,CAAE,iBAA+B,CAEjC,gBAAgB,CAAE,IAAI,CAEtB,UAAU,CAAE,oBAAoB,CAIhC,iCAAQ,CACP,OAAO,CAAE,KAAK,CACd,QAAQ,CAAE,QAAQ,CAQxB,KAAK,CAAE,IAAI,CACX,OAAO,CAAE,QAAQ,CACjB,YAAY,CAAE,GAAG,CAEjB,MAAM,CAAE,OAAO,CATf,kDAAkB,CACjB,aAAa,CAAE,cAAc,CAW9B,uCAAO,CACN,gBAAgB,CAAE,IAAI,CAMxB,mCAAQ,CACP,OAAO,CAAE,EAAE,CACX,OAAO,CAAE,KAAK,CACd,QAAQ,CAAE,QAAQ,CACjB,GAAG,CAAE,MAAM,CACX,IAAI,CAAE,MAAM,CAEZ,KAAK,CAAE,GAAG,CACV,MAAM,CAAE,GAAG,CAEZ,UAAU,CAAE,6DAA6D,CACzE,eAAe,CAAE,OAAO,CAExB,MAAM,CAAE,OAAO,CAGf,yCAAO,CACN,gBAAgB,CAAE,qCAAqC,CAQ1D,mCAAsB,CAAE,OAAO,CAAE,IAAI,CACrC,+CAAoC,CAAE,IAAI,CAAE,IAAI,CAChD,uDAA4C,CAAE,IAAI,CAAE,IAAI,CACxD,8DAAmD,CAAE,IAAI,CAAE,GAAG",
|
||||
"mappings": "AAOC,2BAAc,CACb,OAAO,CAAE,YAAY,CACrB,QAAQ,CAAE,QAAQ,CACjB,GAAG,CAAE,IAAI,CACT,IAAI,CAAE,GAAG,CACT,KAAK,CAAE,IAAI,CACX,MAAM,CAAE,GAAG,CAEZ,OAAO,CAAE,QAAQ,CAEjB,MAAM,CAAE,CAAC,CACT,aAAa,CAAE,GAAG,CAElB,gBAAgB,CCjBC,OAAO,CDwBzB,2BAAc,CACb,OAAO,CAAE,YAAY,CACrB,QAAQ,CAAE,QAAQ,CACjB,GAAG,CAAE,CAAC,CACN,KAAK,CAAE,CAAC,CACR,MAAM,CAAE,oBAAoB,CAE7B,gBAAgB,CAAE,IAAI,CAGtB,iCAAO,CAAE,gBAAgB,CAAE,GAAG,CAM9B,sCAAc,CACV,OAAO,CAAE,KAAK,CACd,QAAQ,CAAE,QAAQ,CACjB,GAAG,CAAE,CAAC,CACN,KAAK,CAAE,mBAAiC,CACxC,MAAM,CC7BK,GAAG,CD+BlB,KAAK,CAAE,OAAqB,CAC5B,WAAW,CChCI,GAAG,CDiClB,WAAW,CAAE,MAAM,CAEnB,MAAM,CAAE,OAAO,CAIf,4CAAO,CACN,KAAK,CAAE,OAAqB,CAO9B,yCAAiB,CAChB,OAAO,CAAE,KAAK,CACd,QAAQ,CAAE,QAAQ,CACjB,GAAG,CAAE,GAAG,CACR,KAAK,CCnDS,GAAG,CDoDjB,KAAK,CAAE,mBAAiC,CACxC,MAAM,CAAE,mBAAiC,CAG1C,aAAa,CAAE,SAAS,CAExB,UAAU,CAAE,6DAA+D,CAC3E,eAAe,CAAE,QAAQ,CAKzB,MAAM,CAAE,OAAO,CAEf,UAAU,CAAE,MAAM,CAJlB,gDAAQ,CAAE,gBAAgB,CAAE,+BAA+B,CAAE,eAAe,CAAE,SAAS,CAUxF,kCAAQ,CACP,OAAO,CAAE,EAAE,CACX,OAAO,CAAE,KAAK,CACd,QAAQ,CAAE,QAAQ,CACjB,GAAG,CAAE,CAAC,CACN,KAAK,CAAE,CAAC,CACR,KAAK,CC9ES,GAAG,CD+EjB,MAAM,CC/EQ,GAAG,CDiFlB,UAAU,CAAE,6DAA6D,CACzE,eAAe,CAAE,OAAO,CAExB,MAAM,CAAE,OAAO,CAWjB,4BAAe,CACX,OAAO,CAAE,KAAK,CACd,QAAQ,CAAE,QAAQ,CACd,GAAG,CAAE,iBAA+B,CACpC,KAAK,CAAE,CAAC,CAET,MAAM,CAAE,IAAI,CAElB,aAAa,CAAE,GAAG,CAClB,MAAM,CAAE,iBAA+B,CAEjC,gBAAgB,CAAE,IAAI,CAEtB,UAAU,CAAE,oBAAoB,CAIhC,iCAAQ,CACP,OAAO,CAAE,KAAK,CACd,QAAQ,CAAE,QAAQ,CAQxB,KAAK,CAAE,IAAI,CACX,OAAO,CAAE,QAAQ,CACjB,YAAY,CAAE,GAAG,CAEjB,MAAM,CAAE,OAAO,CATf,kDAAkB,CACjB,aAAa,CAAE,cAAc,CAW9B,uCAAO,CACN,gBAAgB,CAAE,IAAI,CAUzB,mCAAsB,CAAE,OAAO,CAAE,IAAI,CACrC,+CAAoC,CAAE,IAAI,CAAE,IAAI,CAChD,uDAA4C,CAAE,IAAI,CAAE,IAAI,CACxD,8DAAmD,CAAE,IAAI,CAAE,GAAG",
|
||||
"sources": ["header.scss","constants.scss"],
|
||||
"names": [],
|
||||
"file": "header.css"
|
||||
|
|
|
|||
156
css/header.scss
156
css/header.scss
|
|
@ -6,69 +6,106 @@
|
|||
/* [1] Barre de recherche
|
||||
=========================================================*/
|
||||
& > #searchbar{
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 10%;
|
||||
|
||||
margin: 1.3em 0;
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
top: .8em;
|
||||
left: 1em;
|
||||
width: 20em;
|
||||
height: 2em;
|
||||
|
||||
padding: .2em 1em;
|
||||
|
||||
border: 0;
|
||||
border-radius: 2em;
|
||||
border-radius: 3px;
|
||||
|
||||
background-color: $theme-bg;
|
||||
|
||||
transition: transform .3s ease-in-out, width .3s ease-in-out;
|
||||
|
||||
// @focus
|
||||
&:focus{
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/* [2] Informations utilisateur
|
||||
=========================================================*/
|
||||
/* (1) Image du profil */
|
||||
& > .user-picture{
|
||||
display: block;
|
||||
position: relative;
|
||||
margin-left: 2em;
|
||||
width: $header-elements;
|
||||
height: $header-elements;
|
||||
|
||||
border-radius: 50% / 50%;
|
||||
/* (0) Conteneur */
|
||||
& > #user-data{
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
height: calc( 100% - 2*1em );
|
||||
|
||||
background: $theme-bg url('/f/svg/nopic/st/header') center center no-repeat;
|
||||
background-size: auto 80%;
|
||||
|
||||
// Si on est connecte
|
||||
&.active{ background-image: url('/f/svg/sample/dy/profile'); background-size: auto 100%; }
|
||||
|
||||
cursor: default;
|
||||
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
/* (2) Username de l'utilisateur */
|
||||
& > .user-name{
|
||||
display: block;
|
||||
position: relative;
|
||||
margin-left: 1em;
|
||||
margin-right: 4em;
|
||||
|
||||
color: darken($theme-bg, 40);
|
||||
|
||||
// flex alignment
|
||||
align-self: center;
|
||||
|
||||
cursor: pointer;
|
||||
background-color: #fff;
|
||||
|
||||
// Animation de @hover
|
||||
&:hover{
|
||||
color: darken($theme-bg, 60);
|
||||
&:hover{ background-color: red; }
|
||||
|
||||
|
||||
|
||||
|
||||
/* (1) Username de l'utilisateur */
|
||||
& > #user-name{
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: calc( #{$header-height}*2 - 1em );
|
||||
height: $header-height;
|
||||
|
||||
color: darken($theme-bg, 40);
|
||||
line-height: $header-height;
|
||||
white-space: nowrap;
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
|
||||
// Animation de @hover
|
||||
&:hover{
|
||||
color: darken($theme-bg, 60);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
/* (2) Image du profil */
|
||||
& > #user-picture{
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 1em;
|
||||
right: $header-height;
|
||||
width: calc( #{$header-height} - 2*1em );
|
||||
height: calc( #{$header-height} - 2*1em );
|
||||
|
||||
|
||||
border-radius: 50% / 50%;
|
||||
|
||||
background: $theme-bg url('/f/svg/nopic/st/header') center center no-repeat;
|
||||
background-size: auto 80%;
|
||||
|
||||
// Si on est connecte
|
||||
&.active{ background-image: url('/f/svg/sample/dy/profile'); background-size: auto 100%; }
|
||||
|
||||
cursor: default;
|
||||
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* (3) Icone d'activation */
|
||||
&:before{
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: $header-height;
|
||||
height: $header-height;
|
||||
|
||||
background: url('/f/svg/expand/st/header/999999') center center no-repeat;
|
||||
background-size: 1em 1em;
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -115,28 +152,7 @@
|
|||
}
|
||||
|
||||
|
||||
/* (2) Icone d'activation */
|
||||
&:before{
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: -2.5em;
|
||||
left: -3.2em;
|
||||
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
|
||||
background: url('/f/svg/expand/st/header/999999') center center no-repeat;
|
||||
background-size: 1em 1em;
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
// @hover
|
||||
&:hover{
|
||||
background-image: url('/f/svg/expand/st/header/ff0000');
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,2 +1,2 @@
|
|||
body{font-family:'Open Sans';font-size:15px}#WRAPPER{display:block;position:fixed;top:0;left:0;width:100%;height:100%;background-color:#e8e8e8;overflow-x:hidden;overflow-y:auto;z-index:1}#WRAPPER>#HEADER{display:flex;position:absolute;top:0;left:15em;width:calc( 100% - 15em );height:calc( 5em - 1px );border-bottom:1px solid #e5e5e5;background-color:#fff;flex-direction:row;justify-content:flex-end;align-content:space-around;z-index:10}#WRAPPER>#MENU-SIDE{display:block;position:fixed;top:0;left:0;width:15em;height:100%;box-shadow:2px 1px 3px #ddd;background-color:#32323a;transition:all .3s;z-index:9}#WRAPPER>#CONTAINER{display:flex;position:absolute;top:5em;left:15em;width:calc( 100% - 15em - 2*1em );min-height:calc( 100% - 5em - 2*1em );padding:1em;flex-direction:row;justify-content:space-between;overflow-x:none;overflow-y:auto}#LOGIN{display:flex;position:fixed;top:0;left:-100%;width:100%;height:100%;flex-direction:row;flex-wrap:nowrap;justify-content:space-around;align-items:center;background-color:#32323a;transition:left .3s ease-in-out;z-index:101}#LOGIN.active{left:0}#LOGIN>#login-icon{width:5em;height:5em;background-color:#f00}#LOGIN>#login-form{display:block}#LOGIN>#login-form>input[type='text'],#LOGIN>#login-form>input[type='password'],#LOGIN>#login-form>input[type='button']{display:flex;width:20em;margin:2em 0;padding:1em 2em;flex-direction:column;justify-content:space-around;flex-wrap:nowrap;align-items:middle;border-radius:5px;border:1px solid #6b6b6b;background-color:#32323a;color:#fff;transition:border .2s ease-in-out}#LOGIN>#login-form>input[type='text']:hover,#LOGIN>#login-form>input[type='text']:focus,#LOGIN>#login-form>input[type='password']:hover,#LOGIN>#login-form>input[type='password']:focus,#LOGIN>#login-form>input[type='button']:hover,#LOGIN>#login-form>input[type='button']:focus{border-color:#53d192}#LOGIN>#login-form>input[type='button']{margin:2em auto;border:0;background-color:#53d192;color:#fff;font-weight:bold}#LOGIN>#login-form>input[type='button']:hover{box-shadow:0 0 1em #1a1a1f}
|
||||
body{font-family:'Open Sans';font-size:15px}#WRAPPER{display:block;position:fixed;top:0;left:0;width:100%;height:100%;background-color:#e8e8e8;overflow-x:hidden;overflow-y:auto;z-index:1}#WRAPPER>#HEADER{display:block;position:fixed;top:0;left:0;width:100%;height:calc( 4em - 1px );border-bottom:1px solid #cfcfcf;background-color:#fff;z-index:9}#WRAPPER>#MENU-SIDE{display:block;position:fixed;top:4em;left:0;width:15em;height:calc( 100% - 4em );box-shadow:2px 1px 3px #ddd;background-color:#32323a;transition:all .3s;z-index:10}#WRAPPER>#CONTAINER{display:flex;position:absolute;top:4em;left:15em;width:calc( 100% - 15em - 2*1em );min-height:calc( 100% - 4em - 2*1em );padding:1em;flex-direction:row;justify-content:space-between;overflow-x:none;overflow-y:auto}#LOGIN{display:flex;position:fixed;top:0;left:-100%;width:100%;height:100%;flex-direction:row;flex-wrap:nowrap;justify-content:space-around;align-items:center;background-color:#32323a;transition:left .3s ease-in-out;z-index:101}#LOGIN.active{left:0}#LOGIN>#login-icon{width:5em;height:5em;background-color:#f00}#LOGIN>#login-form{display:block}#LOGIN>#login-form>input[type='text'],#LOGIN>#login-form>input[type='password'],#LOGIN>#login-form>input[type='button']{display:flex;width:20em;margin:2em 0;padding:1em 2em;flex-direction:column;justify-content:space-around;flex-wrap:nowrap;align-items:middle;border-radius:5px;border:1px solid #6b6b6b;background-color:#32323a;color:#fff;transition:border .2s ease-in-out}#LOGIN>#login-form>input[type='text']:hover,#LOGIN>#login-form>input[type='text']:focus,#LOGIN>#login-form>input[type='password']:hover,#LOGIN>#login-form>input[type='password']:focus,#LOGIN>#login-form>input[type='button']:hover,#LOGIN>#login-form>input[type='button']:focus{border-color:#53d192}#LOGIN>#login-form>input[type='button']{margin:2em auto;border:0;background-color:#53d192;color:#fff;font-weight:bold}#LOGIN>#login-form>input[type='button']:hover{box-shadow:0 0 1em #1a1a1f}
|
||||
/*# sourceMappingURL=layout.css.map */
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"version": 3,
|
||||
"mappings": "AAEA,IAAI,CAEH,WAAW,CAAE,WAAW,CACxB,SAAS,CAAE,IAAI,CAKhB,QAAQ,CACP,OAAO,CAAE,KAAK,CACd,QAAQ,CAAE,KAAK,CACd,GAAG,CAAE,CAAC,CACN,IAAI,CAAE,CAAC,CACP,KAAK,CAAE,IAAI,CACX,MAAM,CAAE,IAAI,CAEb,gBAAgB,CCfE,OAAO,CDiBzB,UAAU,CAAE,MAAM,CAClB,UAAU,CAAE,IAAI,CAEhB,OAAO,CAAE,CAAC,CAKV,gBAAW,CACV,OAAO,CAAE,IAAI,CACb,QAAQ,CAAE,QAAQ,CACjB,GAAG,CAAE,CAAC,CACN,IAAI,CCdW,IAAI,CDenB,KAAK,CAAE,mBAAkC,CACzC,MAAM,CAAE,iBAA+B,CAExC,aAAa,CAAE,iBAA8B,CAE7C,gBAAgB,CClCC,IAAO,CDqCxB,cAAc,CAAE,GAAG,CACnB,eAAe,CAAE,QAAQ,CACzB,aAAa,CAAE,YAAY,CAE3B,OAAO,CAAE,EAAE,CAQZ,mBAAc,CACb,OAAO,CAAE,KAAK,CACd,QAAQ,CAAE,KAAK,CACd,GAAG,CAAE,CAAC,CACN,IAAI,CAAE,CAAC,CACP,KAAK,CCxCU,IAAI,CDyCnB,MAAM,CAAE,IAAI,CAEb,UAAU,CAAE,gBAAgB,CAE5B,gBAAgB,CCtDA,OAAO,CDwDvB,UAAU,CAAE,OAAO,CAEnB,OAAO,CAAE,CAAC,CAMX,mBAAc,CACb,OAAO,CAAE,IAAI,CACb,QAAQ,CAAE,QAAQ,CACjB,GAAG,CCzDY,GAAG,CD0DlB,IAAI,CC3DW,IAAI,CD4DnB,KAAK,CAAE,2BAA0C,CACjD,UAAU,CAAE,0BAAwC,CACrD,OAAO,CAAE,GAAG,CAGZ,cAAc,CAAE,GAAG,CACnB,eAAe,CAAE,aAAa,CAE9B,UAAU,CAAE,IAAI,CAChB,UAAU,CAAE,IAAI,CASlB,MAAM,CACL,OAAO,CAAE,IAAI,CACb,QAAQ,CAAE,KAAK,CACd,GAAG,CAAE,CAAC,CACN,IAAI,CAAE,KAAK,CACX,KAAK,CAAE,IAAI,CACX,MAAM,CAAE,IAAI,CAQb,cAAc,CAAE,GAAG,CACnB,SAAS,CAAE,MAAM,CACjB,eAAe,CAAE,YAAY,CAC7B,WAAW,CAAE,MAAM,CAGnB,gBAAgB,CC3GC,OAAO,CD6GxB,UAAU,CAAE,oBAAoB,CAEhC,OAAO,CAAE,GAAG,CAfZ,aAAQ,CACP,IAAI,CAAE,CAAC,CAoBR,kBAAe,CACd,KAAK,CAAE,GAAG,CACV,MAAM,CAAE,GAAG,CAEX,gBAAgB,CAAE,IAAI,CAKvB,kBAAe,CACd,OAAO,CAAE,KAAK,CAId,uHAEwB,CACvB,OAAO,CAAE,IAAI,CACZ,KAAK,CAAE,IAAI,CAEZ,MAAM,CAAE,KAAK,CACb,OAAO,CAAE,OAAO,CAGhB,cAAc,CAAE,MAAM,CACtB,eAAe,CAAE,YAAY,CAC7B,SAAS,CAAE,MAAM,CACjB,WAAW,CAAE,MAAM,CAGnB,aAAa,CAAE,GAAG,CAClB,MAAM,CAAE,iBAAgC,CAExC,gBAAgB,CCtJD,OAAO,CDwJtB,KAAK,CCrJU,IAAO,CDuJtB,UAAU,CAAE,sBAAsB,CAGlC,mRACO,CACN,YAAY,CClKG,OAAO,CDyKxB,uCAAwB,CACvB,MAAM,CAAE,QAAQ,CAEhB,MAAM,CAAE,CAAC,CAET,gBAAgB,CC9KA,OAAO,CDgLvB,KAAK,CC1KU,IAAO,CD2KtB,WAAW,CAAE,IAAI,CAGjB,6CAAO,CACN,UAAU,CAAE,eAA4B",
|
||||
"mappings": "AAEA,IAAI,CAEH,WAAW,CAAE,WAAW,CACxB,SAAS,CAAE,IAAI,CAKhB,QAAQ,CACP,OAAO,CAAE,KAAK,CACd,QAAQ,CAAE,KAAK,CACd,GAAG,CAAE,CAAC,CACN,IAAI,CAAE,CAAC,CACP,KAAK,CAAE,IAAI,CACX,MAAM,CAAE,IAAI,CAEb,gBAAgB,CCfE,OAAO,CDiBzB,UAAU,CAAE,MAAM,CAClB,UAAU,CAAE,IAAI,CAEhB,OAAO,CAAE,CAAC,CAKV,gBAAW,CACV,OAAO,CAAE,KAAK,CACd,QAAQ,CAAE,KAAK,CACd,GAAG,CAAE,CAAC,CACN,IAAI,CAAE,CAAC,CACP,KAAK,CAAE,IAAI,CACX,MAAM,CAAE,iBAA+B,CAExC,aAAa,CAAE,iBAA+B,CAE9C,gBAAgB,CClCC,IAAO,CDoCxB,OAAO,CAAE,CAAC,CAQX,mBAAc,CACb,OAAO,CAAE,KAAK,CACd,QAAQ,CAAE,KAAK,CACd,GAAG,CChCY,GAAG,CDiClB,IAAI,CAAE,CAAC,CACP,KAAK,CCnCU,IAAI,CDoCnB,MAAM,CAAE,kBAAgC,CAEzC,UAAU,CAAE,gBAAgB,CAE5B,gBAAgB,CCjDA,OAAO,CDmDvB,UAAU,CAAE,OAAO,CAEnB,OAAO,CAAE,EAAE,CAMZ,mBAAc,CACb,OAAO,CAAE,IAAI,CACb,QAAQ,CAAE,QAAQ,CACjB,GAAG,CCpDY,GAAG,CDqDlB,IAAI,CCtDW,IAAI,CDuDnB,KAAK,CAAE,2BAA0C,CACjD,UAAU,CAAE,0BAAwC,CACrD,OAAO,CAAE,GAAG,CAGZ,cAAc,CAAE,GAAG,CACnB,eAAe,CAAE,aAAa,CAE9B,UAAU,CAAE,IAAI,CAChB,UAAU,CAAE,IAAI,CASlB,MAAM,CACL,OAAO,CAAE,IAAI,CACb,QAAQ,CAAE,KAAK,CACd,GAAG,CAAE,CAAC,CACN,IAAI,CAAE,KAAK,CACX,KAAK,CAAE,IAAI,CACX,MAAM,CAAE,IAAI,CAQb,cAAc,CAAE,GAAG,CACnB,SAAS,CAAE,MAAM,CACjB,eAAe,CAAE,YAAY,CAC7B,WAAW,CAAE,MAAM,CAGnB,gBAAgB,CCtGC,OAAO,CDwGxB,UAAU,CAAE,oBAAoB,CAEhC,OAAO,CAAE,GAAG,CAfZ,aAAQ,CACP,IAAI,CAAE,CAAC,CAoBR,kBAAe,CACd,KAAK,CAAE,GAAG,CACV,MAAM,CAAE,GAAG,CAEX,gBAAgB,CAAE,IAAI,CAKvB,kBAAe,CACd,OAAO,CAAE,KAAK,CAId,uHAEwB,CACvB,OAAO,CAAE,IAAI,CACZ,KAAK,CAAE,IAAI,CAEZ,MAAM,CAAE,KAAK,CACb,OAAO,CAAE,OAAO,CAGhB,cAAc,CAAE,MAAM,CACtB,eAAe,CAAE,YAAY,CAC7B,SAAS,CAAE,MAAM,CACjB,WAAW,CAAE,MAAM,CAGnB,aAAa,CAAE,GAAG,CAClB,MAAM,CAAE,iBAAgC,CAExC,gBAAgB,CCjJD,OAAO,CDmJtB,KAAK,CChJU,IAAO,CDkJtB,UAAU,CAAE,sBAAsB,CAGlC,mRACO,CACN,YAAY,CC7JG,OAAO,CDoKxB,uCAAwB,CACvB,MAAM,CAAE,QAAQ,CAEhB,MAAM,CAAE,CAAC,CAET,gBAAgB,CCzKA,OAAO,CD2KvB,KAAK,CCrKU,IAAO,CDsKtB,WAAW,CAAE,IAAI,CAGjB,6CAAO,CACN,UAAU,CAAE,eAA4B",
|
||||
"sources": ["layout.scss","constants.scss"],
|
||||
"names": [],
|
||||
"file": "layout.css"
|
||||
|
|
|
|||
|
|
@ -27,23 +27,18 @@ body{
|
|||
/* [1] Header de la page
|
||||
==========================================*/
|
||||
& > #HEADER{
|
||||
display: flex;
|
||||
position: absolute;
|
||||
display: block;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: $menu-side-width;
|
||||
width: calc( 100% - #{$menu-side-width} );
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: calc( #{$header-height} - 1px );
|
||||
|
||||
border-bottom: 1px solid darken($theme-bg, 1);
|
||||
border-bottom: 1px solid darken($theme-bg, 10);
|
||||
|
||||
background-color: $theme-bg-primary;
|
||||
|
||||
// Flex properties
|
||||
flex-direction: row;
|
||||
justify-content: flex-end;
|
||||
align-content: space-around;
|
||||
|
||||
z-index: 10;
|
||||
z-index: 9;
|
||||
|
||||
}
|
||||
|
||||
|
|
@ -54,10 +49,10 @@ body{
|
|||
& > #MENU-SIDE{
|
||||
display: block;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
top: $header-height;
|
||||
left: 0;
|
||||
width: $menu-side-width;
|
||||
height: 100%;
|
||||
height: calc( 100% - #{$header-height} );
|
||||
|
||||
box-shadow: 2px 1px 3px #ddd;
|
||||
|
||||
|
|
@ -65,7 +60,7 @@ body{
|
|||
|
||||
transition: all .3s;
|
||||
|
||||
z-index: 9;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,2 +1,2 @@
|
|||
#WRAPPER>#MENU-SIDE>span:not(.icon){display:block;position:relative;width:calc( 100% - 2*1em - 2*1.5em );padding:1.5em 1.5em;padding-left:calc( 1.5em + 2*1em );border-bottom:1px solid transparent;background:url("/f/svg/circle/st/menu-side/29282e") 1em center no-repeat,url("/f/svg/sub/st/menu-side/777777") right 1em center no-repeat;background-size:2em 2em, 1em 1em;color:#ddd;text-shadow:1px 1px 0 #26262c;transition:color .2s ease-in-out, background .2s ease-in-out, box-shadow .2s ease-in-out, border .2s ease-in-out;cursor:pointer}#WRAPPER>#MENU-SIDE>span:not(.icon).active{background:url("/f/svg/circle/st/menu-side/29282e") 1em center no-repeat,url("/f/svg/sub-active/st/menu-side/dddddd") right 1em center no-repeat;background-size:2em 2em, 1em 1em}#WRAPPER>#MENU-SIDE>span:not(.icon)>svg,#WRAPPER>#MENU-SIDE>span:not(.icon)>svg *{position:absolute;top:calc( 50% - 1em/2 );left:1.5em;width:1em;height:1em;fill:#ddd !important;transition:fill .2s ease-in-out}#WRAPPER>#MENU-SIDE>span:not(.icon):hover,#WRAPPER>#MENU-SIDE>span:not(.icon).active{border-bottom-color:#242329;box-shadow:inset 0 0 1em #27262b;background-color:#29282e;color:#fff;text-shadow:1px 1px 0 #1d1c20}#WRAPPER>#MENU-SIDE>span:not(.icon):hover>svg,#WRAPPER>#MENU-SIDE>span:not(.icon):hover>svg *,#WRAPPER>#MENU-SIDE>span:not(.icon).active>svg,#WRAPPER>#MENU-SIDE>span:not(.icon).active>svg *{fill:#53d192 !important}#WRAPPER>#MENU-SIDE>span.icon{display:block;position:relative;width:calc( 100% - 3em - 2*1.5em );height:calc( 5em - 1px );padding:0 1.5em;padding-left:calc( 1.5em + 3em );border-bottom:1px solid transparent;background:#32323a;color:#fff;text-shadow:1px 1px 0 #26262c;font-weight:bold;line-height:5em}#WRAPPER>#MENU-SIDE>span.icon>svg,#WRAPPER>#MENU-SIDE>span.icon>svg *{position:absolute;top:calc( 50% - 5em/2 );left:1.5em;height:5em}#WRAPPER>#MENU-SIDE>span.icon:hover{border-bottom-color:#242329;box-shadow:inset 0 0 1em #27262b;background-color:#29282e;color:#fff;text-shadow:1px 1px 0 #1d1c20}#WRAPPER>#MENU-SIDE>span.sep{border-bottom:1px solid #4a4a55}#WRAPPER>#MENU-SIDE>span:not(.icon).active+div.sub>span{display:block;position:relative;width:calc( 100% - 2*1.5em );padding:.5em 1.5em;padding-left:1.5em;border-bottom:1px solid transparent;background:#242329 url("/f/svg/sub/st/menu-side/888888") 0.5em center no-repeat;background-size:.5em;color:#aaa;font-size:.85em;cursor:pointer;transition:color .2s ease-in-out}#WRAPPER>#MENU-SIDE>span:not(.icon).active+div.sub>span:hover,#WRAPPER>#MENU-SIDE>span:not(.icon).active+div.sub>span.active{color:#fff;background-image:url("/f/svg/sub/st/menu-side/ffffff")}#WRAPPER>#MENU-SIDE>span:not(.icon):not(.active)+div.sub>span{display:none}
|
||||
#WRAPPER>#MENU-SIDE>span{display:block;position:relative;width:calc( 100% - 2*1em - 2*1.5em );padding:1.5em 1.5em;padding-left:calc( 1.5em + 2*1em );border-bottom:1px solid transparent;background:url("/f/svg/circle/st/menu-side/29282e") 1em center no-repeat,url("/f/svg/sub/st/menu-side/777777") right 1em center no-repeat;background-size:2em 2em, 1em 1em;color:#ddd;text-shadow:1px 1px 0 #26262c;transition:color .2s ease-in-out, background .2s ease-in-out, box-shadow .2s ease-in-out, border .2s ease-in-out;cursor:pointer}#WRAPPER>#MENU-SIDE>span.active{background:url("/f/svg/circle/st/menu-side/29282e") 1em center no-repeat,url("/f/svg/sub-active/st/menu-side/dddddd") right 1em center no-repeat;background-size:2em 2em, 1em 1em}#WRAPPER>#MENU-SIDE>span>svg,#WRAPPER>#MENU-SIDE>span>svg *{position:absolute;top:calc( 50% - 1em/2 );left:1.5em;width:1em;height:1em;fill:#ddd !important;transition:fill .2s ease-in-out}#WRAPPER>#MENU-SIDE>span:hover,#WRAPPER>#MENU-SIDE>span.active{border-bottom-color:#242329;box-shadow:inset 0 0 1em #27262b;background-color:#29282e;color:#fff;text-shadow:1px 1px 0 #1d1c20}#WRAPPER>#MENU-SIDE>span:hover>svg,#WRAPPER>#MENU-SIDE>span:hover>svg *,#WRAPPER>#MENU-SIDE>span.active>svg,#WRAPPER>#MENU-SIDE>span.active>svg *{fill:#53d192 !important}#WRAPPER>#MENU-SIDE>span.sep{border-bottom:1px solid #4a4a55}#WRAPPER>#MENU-SIDE>span:not(.icon).active+div.sub>span{display:block;position:relative;width:calc( 100% - 2*1.5em );padding:.5em 1.5em;padding-left:1.5em;border-bottom:1px solid transparent;background:#242329 url("/f/svg/sub/st/menu-side/888888") 0.5em center no-repeat;background-size:.5em;color:#aaa;font-size:.85em;cursor:pointer;transition:color .2s ease-in-out}#WRAPPER>#MENU-SIDE>span:not(.icon).active+div.sub>span:hover,#WRAPPER>#MENU-SIDE>span:not(.icon).active+div.sub>span.active{color:#fff;background-image:url("/f/svg/sub/st/menu-side/ffffff")}#WRAPPER>#MENU-SIDE>span:not(.icon):not(.active)+div.sub>span{display:none}
|
||||
/*# sourceMappingURL=menu-side.css.map */
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"version": 3,
|
||||
"mappings": "AAMC,mCAAmB,CAClB,OAAO,CAAE,KAAK,CACd,QAAQ,CAAE,QAAQ,CACjB,KAAK,CAAE,8BAA8B,CAEtC,OAAO,CAAE,WAAW,CACpB,YAAY,CAAE,qBAAqB,CAEnC,aAAa,CAAE,qBAAqB,CAEpC,UAAU,CAAE,8HAC0D,CACtE,eAAe,CAAE,gBAAgB,CAUjC,KAAK,CCjBW,IAAO,CDkBvB,WAAW,CAAE,iBAA6B,CAE1C,UAAU,CAAE,qGAAqG,CAEjH,MAAM,CAAE,OAAO,CAXf,0CAAQ,CACP,UAAU,CAAE,qIACgE,CAC5E,eAAe,CAAE,gBAAgB,CAWlC,iFAAkB,CACjB,QAAQ,CAAE,QAAQ,CACjB,GAAG,CAAE,mBAAmB,CACxB,IAAI,CAAE,KAAK,CACX,KAAK,CAAE,GAAG,CACV,MAAM,CAAE,GAAG,CAEZ,IAAI,CAAE,eAAmB,CACzB,UAAU,CAAE,oBAAoB,CAKjC,oFACQ,CACP,mBAAmB,CAAE,OAA2B,CAChD,UAAU,CAAE,qBAAyC,CAErD,gBAAgB,CC5CD,OAAO,CD6CtB,KAAK,CC3CU,IAAO,CD4CtB,WAAW,CAAE,iBAAqC,CAElD,6LAAkB,CACjB,IAAI,CAAE,kBAA4B,CASrC,6BAAa,CACZ,OAAO,CAAE,KAAK,CACd,QAAQ,CAAE,QAAQ,CACjB,KAAK,CAAE,4BAA4B,CACnC,MAAM,CAAE,iBAA+B,CAExC,OAAO,CAAE,OAAO,CAChB,YAAY,CAAE,mBAAmB,CAEjC,aAAa,CAAE,qBAAqB,CAEpC,UAAU,CCtEM,OAAO,CDwEvB,KAAK,CCrEW,IAAO,CDsEvB,WAAW,CAAE,iBAA6B,CAC1C,WAAW,CAAE,IAAI,CACjB,WAAW,CCjEK,GAAG,CDmEnB,qEAAkB,CACjB,QAAQ,CAAE,QAAQ,CACjB,GAAG,CAAE,mBAAmB,CACxB,IAAI,CAAE,KAAK,CACX,MAAM,CAAE,GAAG,CAIb,mCAAO,CACN,mBAAmB,CAAE,OAA2B,CAChD,UAAU,CAAE,qBAAyC,CAErD,gBAAgB,CCxFD,OAAO,CDyFtB,KAAK,CCvFU,IAAO,CDwFtB,WAAW,CAAE,iBAAqC,CASpD,4BAAY,CACX,aAAa,CAAE,iBAA+B,CAO/C,uDAAyC,CACxC,OAAO,CAAE,KAAK,CACd,QAAQ,CAAE,QAAQ,CACjB,KAAK,CAAE,sBAAsB,CAE9B,OAAO,CAAE,UAAU,CACnB,YAAY,CAAE,KAAK,CAEnB,aAAa,CAAE,qBAAqB,CAEpC,UAAU,CAAE,oEAAuF,CACnG,eAAe,CAAE,IAAI,CAErB,KAAK,CAAE,IAAoB,CAC3B,SAAS,CAAE,KAAK,CAEhB,MAAM,CAAE,OAAO,CAEf,UAAU,CAAE,qBAAqB,CAGjC,4HACQ,CACP,KAAK,CChIU,IAAO,CDiItB,gBAAgB,CAAE,qCAAqC,CAMzD,6DAA+C,CAC9C,OAAO,CAAE,IAAI",
|
||||
"mappings": "AAMC,wBAAQ,CACP,OAAO,CAAE,KAAK,CACd,QAAQ,CAAE,QAAQ,CACjB,KAAK,CAAE,8BAA8B,CAEtC,OAAO,CAAE,WAAW,CACpB,YAAY,CAAE,qBAAqB,CAEnC,aAAa,CAAE,qBAAqB,CAEpC,UAAU,CAAE,8HAC0D,CACtE,eAAe,CAAE,gBAAgB,CAUjC,KAAK,CCjBW,IAAO,CDkBvB,WAAW,CAAE,iBAA6B,CAE1C,UAAU,CAAE,qGAAqG,CAEjH,MAAM,CAAE,OAAO,CAXf,+BAAQ,CACP,UAAU,CAAE,qIACgE,CAC5E,eAAe,CAAE,gBAAgB,CAWlC,2DAAkB,CACjB,QAAQ,CAAE,QAAQ,CACjB,GAAG,CAAE,mBAAmB,CACxB,IAAI,CAAE,KAAK,CACX,KAAK,CAAE,GAAG,CACV,MAAM,CAAE,GAAG,CAEZ,IAAI,CAAE,eAAmB,CACzB,UAAU,CAAE,oBAAoB,CAKjC,8DACQ,CACP,mBAAmB,CAAE,OAA2B,CAChD,UAAU,CAAE,qBAAyC,CAErD,gBAAgB,CC5CD,OAAO,CD6CtB,KAAK,CC3CU,IAAO,CD4CtB,WAAW,CAAE,iBAAqC,CAElD,iJAAkB,CACjB,IAAI,CAAE,kBAA4B,CAUrC,4BAAY,CACX,aAAa,CAAE,iBAA+B,CAO/C,uDAAyC,CACxC,OAAO,CAAE,KAAK,CACd,QAAQ,CAAE,QAAQ,CACjB,KAAK,CAAE,sBAAsB,CAE9B,OAAO,CAAE,UAAU,CACnB,YAAY,CAAE,KAAK,CAEnB,aAAa,CAAE,qBAAqB,CAEpC,UAAU,CAAE,oEAAuF,CACnG,eAAe,CAAE,IAAI,CAErB,KAAK,CAAE,IAAoB,CAC3B,SAAS,CAAE,KAAK,CAEhB,MAAM,CAAE,OAAO,CAEf,UAAU,CAAE,qBAAqB,CAGjC,4HACQ,CACP,KAAK,CCxFU,IAAO,CDyFtB,gBAAgB,CAAE,qCAAqC,CAMzD,6DAA+C,CAC9C,OAAO,CAAE,IAAI",
|
||||
"sources": ["menu-side.scss","constants.scss"],
|
||||
"names": [],
|
||||
"file": "menu-side.css"
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
|
||||
/* [1] Elements du menu
|
||||
=========================================================*/
|
||||
& > span:not(.icon){
|
||||
& > span{
|
||||
display: block;
|
||||
position: relative;
|
||||
width: calc( 100% - 2*1em - 2*1.5em );
|
||||
|
|
@ -64,55 +64,15 @@
|
|||
|
||||
}
|
||||
|
||||
/* [2] Specification pour le logo
|
||||
=========================================================*/
|
||||
& > span.icon{
|
||||
display: block;
|
||||
position: relative;
|
||||
width: calc( 100% - 3em - 2*1.5em );
|
||||
height: calc( #{$header-height} - 1px );
|
||||
|
||||
padding: 0 1.5em;
|
||||
padding-left: calc( 1.5em + 3em );
|
||||
|
||||
border-bottom: 1px solid transparent;
|
||||
|
||||
background: $dark-bg;
|
||||
|
||||
color: $dark-fg-primary;
|
||||
text-shadow: 1px 1px 0 darken($dark-bg, 5);
|
||||
font-weight: bold;
|
||||
line-height: $header-height;
|
||||
|
||||
& > svg, & > svg *{
|
||||
position: absolute;
|
||||
top: calc( 50% - 5em/2 );
|
||||
left: 1.5em;
|
||||
height: 5em;
|
||||
}
|
||||
|
||||
|
||||
&:hover{
|
||||
border-bottom-color: darken($dark-bg-primary, 2);
|
||||
box-shadow: inset 0 0 1em darken($dark-bg-primary, 1);
|
||||
|
||||
background-color: $dark-bg-primary;
|
||||
color: $dark-fg-primary;
|
||||
text-shadow: 1px 1px 0 darken($dark-bg-primary, 5);
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
/* [3] Elements du menu avec separateur en dessous
|
||||
/* [2] Elements du menu avec separateur en dessous
|
||||
=========================================================*/
|
||||
& > span.sep{
|
||||
border-bottom: 1px solid lighten($dark-bg, 10);
|
||||
}
|
||||
|
||||
|
||||
/* [4] Gestion du menu deroulant
|
||||
/* [3] Gestion du menu deroulant
|
||||
=========================================================*/
|
||||
/* (1) Quand le menu est deroule */
|
||||
& > span:not(.icon).active + div.sub>span{
|
||||
|
|
|
|||
28
view.php
28
view.php
|
|
@ -62,31 +62,23 @@
|
|||
<input type='text' placeholder='Recherche...' id='searchbar'>
|
||||
|
||||
<!-- ZONE UTILISATEUR -->
|
||||
<?php if( connected() ){
|
||||
echo "<span class='user-picture' class='active'></span>";
|
||||
echo "<span class='user-name'>".$_SESSION['username']."</span>";
|
||||
}else{
|
||||
echo "<span class='user-picture'></span>";
|
||||
echo "<span class='user-name'>Me connecter</span>";
|
||||
}?>
|
||||
<div id='user-data'>
|
||||
<?php if( connected() ){
|
||||
echo "<span id='user-name'>".$_SESSION['username']."</span>";
|
||||
echo "<span id='user-picture' class='active'></span>";
|
||||
}else{
|
||||
echo "<span id='user-name'>Me connecter</span>";
|
||||
echo "<span id='user-picture'></span>";
|
||||
}?>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- USER PANEL -->
|
||||
<input type='checkbox' value='' id='toggle-user-panel'>
|
||||
<label for='toggle-user-panel' class='user-panel'>
|
||||
<span class='profile'>Mon Profil</span>
|
||||
<span class='administration'>Historique</span>
|
||||
<span class='logout'>Parametres</span>
|
||||
</label>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<!-- MENU DE LA PAGE -->
|
||||
<nav id='MENU-SIDE'>
|
||||
<span class='icon sep' ><?= ResourceDispatcher::getResource('f/svg/icon/st' ); ?>CALL LOG</span>
|
||||
|
||||
<span data-link='dashboard' ><?= ResourceDispatcher::getResource('f/svg/home/st/menu-side'); ?>Tableau de bord</span>
|
||||
<span data-link='dashboard' class='sep'><?= ResourceDispatcher::getResource('f/svg/home/st/menu-side'); ?>Tableau de bord</span>
|
||||
<div class='sub'>
|
||||
<span data-sublink='presentation'>Presentation</span>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue