Polymer message styles

index.html

<link href='http://fonts.googleapis.com/css?family=Roboto:300italic,400italic,400,100,300,600,700' rel='stylesheet' type='text/css'>
  
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

<div class="logs message">
  <h2>Logs</h2>
  1 Day 20:45:50

 <div class="contentLog"> 
   <svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" width="800" height="340" onload="init(evt)" border="#000">


     
  <line class="line" id="line" x1="30" y1="30" x2="500" y2="30" stroke-width="4" stroke="#fff"  ></line>
     <line id="line" x1="30" y1="30" x2="300" y2="30" stroke-width="4" stroke="#B22222" onmouseover="evt.target.parentNode.getElementById('toolTipGraph').setAttribute('visibility','shown');" onmouseout="evt.target.parentNode.getElementById('toolTipGraph').setAttribute('visibility','hidden')"></line>
   
  <circle class="circlePoint" cx="30" cy="30" r=7></circle>
  
  <g id=toolTipGraph visibility="hidden"><text stroke="#fff" id="tooltip" x=150 y=25  
  > Off Duty 15:30:15</text></g>

  <g>  <text id="statusIcon" class="circlePoint" x=488 y=37
   >&#xf015</text>
  <circle class=" outer" cx="502" cy="30" r=28></circle>
     
     
  
</svg>
  
  </div>

</div>
<div class="status message">
  <h2>Status</h2>
	<p>This is an 'announcement message' div! It is loud and proud to say things that you want people to hear first!</p>
</div>
<div class="vir message">
  <h2>Vir</h2>
  <div class="content">
     <h3> <i class="fa fa-truck"></i> 1AV5H22 
  </h3>
     <h3 class="vehicule"> <i class="fa fa-car"></i> 33RFO22 
  </h3>
  </div>
  <p>Next Vir inspection schedule to tomorow </p>
 
	  
</div>
<div class="geolocation message">
  <h2>Geolocation</h2>
   <div class="content"> <img src="http://www.newnewsouth.net/wp-content/uploads/2013/03/google-maps.png" height="100%" width="100%" alt="" /></div>

  <p>	<span class="important">30.05 </span>km/h</p>
  <p>417.35 South East  of California</p>
</div>

Polymer-message-styles.markdown

Polymer message styles

Five useful message styles that can be put on the top of pages to express different information about the site or the organization.

Forked from Jordan's Pen Polymer message styles.

A Pen by jean Pokou on CodePen.

License.

script.js

  function init(evt)
  {
    if ( window.svgDocument == null )
    {
      svgDocument = evt.target.ownerDocument;
    }
    tooltip = svgDocument.getElementById('tooltip');
  }

style.css

* {
  font-family: Roboto;
}

h3{

  font-weight: 100;
  font-size: 20pt;
  line-height: 1.3em;

 
}

h2{
  font-weight: 100;
  font-size: 30pt;
  line-height: 1.3em;
  margin: 15px 0;
}

div.message {
  position: relative;
  padding: 10px;
  padding-left: 35px;
  margin: 30px 10px;
  box-shadow:0 2px 5px rgba(0,0,0,.3);
  background: #BBB;
  color: #FFF;
  -webkit-border-top-left-radius: 15px;
  -webkit-border-top-right-radius: 15px;
  -webkit-border-bottom-left-radius: 15px;
  -webkit-border-bottom-right-radius: 15px;
        -moz-border-radius-topleft: 15px;
        -moz-border-radius-topright: 15px;
        -moz-border-radius-bottomleft: 15px;
        border-top-left-radius: 15px;
        border-top-right-radius: 15px;
        border-bottom-left-radius: 15px;
 height:150px;
  -webkit-transition: all .5s ease;
     -moz-transition: all .5s ease;
      -ms-transition: all .5s ease;
       -o-transition: all .5s ease;
          transition: all .5s ease;
}
div.message:hover{
  box-shadow: 0 15px 20px rgba(10,0,10,.3);
  -webkit-filter: brightness(110%);
}

div.message:before{
  content: '';
  font-family: FontAwesome;
  position: absolute;
  display: block;
  top: -21px;
  left: 99%;
  margin:0 -21px;
  font-size: 20px;
  line-height: 24px;
  text-align: center;
  width: 24px;
  padding:10px;
  background: inherit;
  box-shadow:0 5px 10px rgba(0,0,0,.25);
  color: rgba(255,255,255,.75);
  border-radius:50%;
  border: 2px solid transparent;
  z-index: 2;
  
}

div.logs:before{content:'\f133';}
div.message.status:before{content:'\f018';}
div.message.vir:before{content:'\f0d1';}
div.message.geolocation:before{content:'\f041';}
div.message.error:before{content:'\f00d';}

div.logs{background: #39B;}
div.message.geolocation{background: #E74;}
div.message.vir{background: #5A6;}
div.message.status{background: #EA0;}
div.message.error{background: #C43;}


.heading{
  background-color:rgba(225,225,225,1);
  width:50px;
}

@media screen  and (min-width:990px) {
 div.message{
    padding-left: 25px;
    margin:15px;
    
 }
  
  div.message.logs, div.message.vir{
    position:relative;
    width:45%;
    margin-left:1%;
    float:left;
  }
    div.message.status, div.message.geolocation{
    position:relative;
    width:45%;   
     float:right;
  }

 .content{
   position:relative;
   top:-80px;
    width:60%;
    height:100%;
   /*border:1px solid blue;*/
    float:right;
   
  }
}
span.important{
  font-size:150%;
}
p{
  margin:5px;
}
.statusIcon{
  font-family: FontAwesome;
}
.statusIcon:after{
  content:'\f0e4';
  font-size:110px;
  
}
.time{
  margin:0 auto;
  width:50%;
  height:50px;
}

.lapTime{
  font-weight: 100;
  font-size: 20pt;
  line-height: 1.3em;
}

/*********************************/
.line:hover{
  
}

.circlePoint{
  fill:#1A81AD;
  stroke-width:1px;
  stroke:#fff;
  cursor:pointer;
 
  
}
.circlePoint:hover{
   
}
 
.outer{
   fill: #ffff;
    opacity: 0;
}
.outer:hover{
  opacity: 0.4;
  stroke:#1A81AD;
   stroke-width: 4;
 
}
#statusIcon{
  font-family:FontAwesome;
  font-size:30px;
}
.vehicule{
  float:right;
}

#tooltip{
  font-size:15px;
  
  color:red; !important
  line-height:50px
}