html - How to design aggregations filter in css for week, month? -

-

i want design aggregation filter week, month,etc. following image. please see image, want design same-way

image:image want design css

please see demo demo

<style type="text/css"> .tag {     /*display: block;*/     border: 1px solid #4f9f4f;     padding: 6px 12px;     font: 12px/17px 'opensanslight';     color: #4f9f4f;     text-decoration: none; } .tag-leftmost {     border: 1px solid #4f9f4f;     border-bottom-left-radius: 20px;     border-top-left-radius: 20px;      padding: 6px 12px;     font: 12px/17px 'opensanslight';     color: #4f9f4f;     text-decoration: none; } .tag-rightmost {    border: 1px solid #4f9f4f;      border-bottom-right-radius: 20px;     border-top-right-radius: 20px;        padding: 6px 12px;     font: 12px/17px 'opensanslight';     color: #4f9f4f;     text-decoration: none; } .tag-center tag{  } </style>    <div class="col-md-12 col-sm-12">      <a title="week? category" ng-model="today_placement" class="tag-leftmost">today</a>      <a title="week? category" ng-model="week_placement" class="tag">week</a>      <a title="week? category" ng-model="month_placement" class="tag">month</a>      <a title="week? category" ng-model="year_placement" class="tag-rightmost">year</a>   </div>

try using css triangles hack make arrow. check .tag:hover:after

.wrapper {    border: 1px solid #4f9f4f;    border-radius: 20px;    padding: 0 14px;    float: left;  }  .tag {    padding: 6px 12px;    font: 12px/17px'opensanslight';    color: #4f9f4f;    text-decoration: none;    /* added :after */    position: relative;    float: left;  }  .tag:not(:first-child):not(:last-child) {    border-radius: 0;    border-left: 1px solid #4f9f4f;    border-right: 1px solid #4f9f4f;  }  .tag:hover {    background-color: red;    border-color: red;  }  .tag:hover:after {    content: '';    width: 0;    height: 0;    border: 5px solid transparent;    border-bottom-color: red;    position: absolute;    display: block;    left: 50%;    top: -10px;    margin-left: -5px;  }
<div class="wrapper col-md-12 col-sm-12">    <a title="week? category" class="tag">week</a>    <a title="week? category" class="tag">week</a>    <a title="week? category" class="tag">week</a>  </div>


Comments

Post a Comment

Popular posts from this blog

java - Run spring boot application error: Cannot instantiate interface org.springframework.context.ApplicationListener -

-
i have spring project , try make use spring boot , run @ embadded tomcat following : https://spring.io/guides/gs/rest-service/ this application //@configuration //@enableaspectjautoproxy @springbootapplication @componentscan(basepackages = "gux.prome") public class application { public static void main(string[] args) { springapplication.run(application.class, args); } } if use maven command: mvn spring-boot:run , project starts fine, need debug , run main method @ intelij, exception occurs: exception in thread "main" java.lang.illegalargumentexception: cannot instantiate interface org.springframework.context.applicationlistener : org.springframework.boot.logging.classpathloggingapplicationlistener @ org.springframework.boot.springapplication.createspringfactoriesinstances(springapplication.java:414) @ org.springframework.boot.springapplication.getspringfactoriesinstances(springapplication.java:394) @ org.springframework.bo...
Read more

reactjs - React router and this.props.children - how to pass state to this.props.children -

-
i'm using react-router first time , don't know how think in yet. here's how i'm loading components in nested routes. entry point .js reactdom.render( <router history={hashhistory} > <route path="/" component={app}> <route path="models" component={content}> </route> </router>, document.getelementbyid('app') ); app.js render: function() { return ( <div> <header /> {this.props.children} </div> ); } so child of app content component sent in. i'm using flux , app.js has state , listens changes, don't know how pass state down this.props.children. before using react-router app.js defines children explicitly, passing state natural don't see how now. using couple of react helper methods can add state, props , whatever else this.props.children render: function() { var children = react.ch...
Read more

Excel VBA "Microsoft Windows Common Controls 6.0 (SP6)" Location Changes -

-
i have excel workbook used generate quotations customers. there main page user inputs data, , there buttons generate various pdfs , send them customer. however, 1 user consistently getting error preventing generating , sending pdfs. i beleive "microsoft windows common controls 6.0 (sp6)". it's installed on users' computers. on mine, location "c:\windows\syswow64\mscomctl.ocx" on others "c:\windows\system32\mscomctl.ocx" the user experiencing issues on 32-bit machine, "mscomctl.ocx" file should in system32. have manually put in there, , pointed common controls reference in vba it. issue seems keep reverting looking in syswow64. since folder doesn't exist, can't find it, , can't produce pdfs. i thought perhaps issue user running older version of office (2007) there users on 2013 , 2016. thought perhaps mixture of 64-bit , 32-bit users. user gets sent workbook other users (as quotation process goes further, gets passed ...
Read more