From 7d86224644ace3bb142cb77064437b40b70ff334 Mon Sep 17 00:00:00 2001 From: Sergio Date: Wed, 27 Sep 2017 13:39:45 +0200 Subject: [PATCH] mejora menu --- css/css/home.css | 2 +- css/css/home.css.map | 2 +- css/home.less | 107 ++++++++++++++++++++++++------------------- 3 files changed, 62 insertions(+), 49 deletions(-) diff --git a/css/css/home.css b/css/css/home.css index eea5fad..78ae3c5 100644 --- a/css/css/home.css +++ b/css/css/home.css @@ -1 +1 @@ -p{font-size:12px}.cd-horizontal-timeline .events-content{position:relative}.cd-horizontal-timeline .events-content li{position:absolute;z-index:1;width:100%;left:0;top:0;transform:translateX(-100%);opacity:0;animation-duration:.4s;animation-timing-function:ease-in-out}.cd-horizontal-timeline .events-content li.selected{position:relative;z-index:2;opacity:1;transform:translateX(0)}div.section-container{background-color:white}#timeline{z-index:10;position:absolute;bottom:0;left:0;height:100px;width:100%}#timeline li{display:inline}#timeline a{background-color:white}#timeline a.active{background-color:orange}#timeline img{width:14%;opacity:.2;transition:all 1s}#timeline a.active img.img-menu{opacity:1}div.menu-content{height:100vh;background-color:white}div.extra-btn-container{position:absolute;left:700px;bottom:200px}a.btn-circle{border-radius:40px}.map-popover{display:none} \ No newline at end of file +p{font-size:12px}.cd-horizontal-timeline .events-content{position:relative}.cd-horizontal-timeline .events-content li{position:absolute;z-index:1;width:100%;left:0;top:0;transform:translateX(-100%);opacity:0;animation-duration:.4s;animation-timing-function:ease-in-out}.cd-horizontal-timeline .events-content li.selected{position:relative;z-index:2;opacity:1;transform:translateX(0)}div.section-container{background-color:white}.cd-timeline-navigation{padding:0;margin:0;text-align:left;align:left}#timeline{z-index:10;position:absolute;bottom:0;left:0;height:100px;width:100%;text-align:left}#timeline li{display:inline-block;width:13.9%;margin:0;padding:0;text-align:left;line-height:auto}#timeline a{background-color:white;text-align:left;line-height:auto}#timeline img{width:103%;opacity:.2;transition:all 1s}#timeline a.active img.img-menu{opacity:1}div.menu-content{height:100vh;background-color:white}div.extra-btn-container{position:absolute;left:700px;bottom:200px}a.btn-circle{border-radius:40px}.map-popover{display:none} \ No newline at end of file diff --git a/css/css/home.css.map b/css/css/home.css.map index 3bee9a6..fa2e714 100644 --- a/css/css/home.css.map +++ b/css/css/home.css.map @@ -1 +1 @@ -{"version":3,"sources":["home.less"],"names":[],"mappings":"AAAA,EACI,eAIJ,uBAAwB,iBACtB,kBAEF,uBAAwB,gBAAgB,IACtC,iBAAA,CACA,SAAA,CACA,UAAA,CACA,MAAA,CACA,KAAA,CACA,UAAW,iBAAX,CACA,SAAA,CACA,sBAAA,CACA,sCAEF,uBAAwB,gBAAgB,GAAE,UAExC,iBAAA,CACA,SAAA,CACA,SAAA,CACA,UAAW,cAEb,GAAG,mBAEC,uBAGJ,UACI,UAAA,CACA,iBAAA,CACA,QAAA,CACA,MAAA,CACA,YAAA,CACA,WANJ,SAOI,IACI,eARR,SAUI,GACI,uBAXR,SAaI,EAAC,QACG,wBAdR,SAgBI,KACI,SAAA,CACA,UAAA,CACA,kBAnBR,SAqBI,EAAC,OAAQ,IAAG,UACR,UAIR,GAAG,cACC,YAAA,CACA,uBAGJ,GAAG,qBACC,iBAAA,CACA,UAAA,CACA,aAGJ,CAAC,YACG,mBAGJ,aACI"} \ No newline at end of file +{"version":3,"sources":["home.less"],"names":[],"mappings":"AACA,EACI,eAGJ,uBAAwB,iBACpB,kBAGJ,uBAAwB,gBAAgB,IACpC,iBAAA,CACA,SAAA,CACA,UAAA,CACA,MAAA,CACA,KAAA,CACA,UAAW,iBAAX,CACA,SAAA,CACA,sBAAA,CACA,sCAGJ,uBAAwB,gBAAgB,GAAE,UAEtC,iBAAA,CACA,SAAA,CACA,SAAA,CACA,UAAW,cAGf,GAAG,mBACC,uBAEJ,wBACI,SAAA,CACA,QAAA,CACA,eAAA,CACA,WAEJ,UACI,UAAA,CACA,iBAAA,CACA,QAAA,CACA,MAAA,CACA,YAAA,CACA,UAAA,CACA,gBAPJ,SASI,IACI,oBAAA,CACA,WAAA,CACA,QAAA,CACA,SAAA,CACA,eAAA,CACA,iBAfR,SAkBI,GACI,sBAAA,CACA,eAAA,CACA,iBArBR,SA0BI,KACI,UAAA,CACA,UAAA,CACA,kBA7BR,SAgCI,EAAC,OAAQ,IAAG,UACR,UAIR,GAAG,cACC,YAAA,CACA,uBAGJ,GAAG,qBACC,iBAAA,CACA,UAAA,CACA,aAGJ,CAAC,YACG,mBAGJ,aACI"} \ No newline at end of file diff --git a/css/home.less b/css/home.less index 665573d..057bfa6 100644 --- a/css/home.less +++ b/css/home.less @@ -1,87 +1,100 @@ // out: css/home.css, sourcemap: true, compress: true -p{ + +p { font-size: 12px; } - .cd-horizontal-timeline .events-content { - position: relative; + position: relative; } -.cd-horizontal-timeline .events-content li { - position: absolute; - z-index: 1; - width: 100%; - left: 0; - top: 0; - transform: translateX(-100%); - opacity: 0; - animation-duration: 0.4s; - animation-timing-function: ease-in-out; -} -.cd-horizontal-timeline .events-content li.selected { - /* visible event content */ - position: relative; - z-index: 2; - opacity: 1; - transform: translateX(0); -} -div.section-container{ +.cd-horizontal-timeline .events-content li { + position: absolute; + z-index: 1; + width: 100%; + left: 0; + top: 0; + transform: translateX(-100%); + opacity: 0; + animation-duration: 0.4s; + animation-timing-function: ease-in-out; +} + +.cd-horizontal-timeline .events-content li.selected { + /* visible event content */ + position: relative; + z-index: 2; + opacity: 1; + transform: translateX(0); +} + +div.section-container { background-color: white; } - -#timeline{ +.cd-timeline-navigation{ + padding:0px; + margin:0px; + text-align: left; + align:left; +} +#timeline { z-index: 10; position: absolute; - bottom:0px; - left:0; + bottom: 0; + left: 0; height: 100px; - width:100%; - li{ - display: inline; + width: 100%; + text-align: left; + + li { + display: inline-block; + width: 13.9%; + margin: 0px; + padding: 0px; + text-align: left; + line-height: auto; } - a{ + + a { background-color: white; + text-align: left; + line-height: auto; } - a.active{ + /*a.active{ background-color:orange; - } - img{ - width:14%; + }*/ + img { + width:103%; opacity: 0.2; transition: all 1s; } - a.active img.img-menu{ + + a.active img.img-menu { opacity: 1; } } -div.menu-content{ +div.menu-content { height: 100vh; background-color: white; } -div.extra-btn-container{ +div.extra-btn-container { position: absolute; left: 700px; bottom: 200px; } -a.btn-circle{ +a.btn-circle { border-radius: 40px; } -.map-popover{ +.map-popover { display: none; } -div.section-inner-content{ - div.story-content{ - - } - div.data-content{ - - - } +div.section-inner-content { + div.story-content {} + div.data-content {} }