quality-label.html

<!--
`quality-label`
Label used to display annotation and evidence qualifier

#### Example of silver badge
    <quality-label quality="silver"></quality-label>

#### Example of gold badge
    <quality-label quality="silver"></quality-label>

@demo demo/quality-label-demo.html
-->
<dom-module id="quality-label">
  <template>
    <style is="quality-label-style">
      :root {
        font-size: 90%;
      }
      .quality-label-container {
        display: inline-block;
      }
      .colored-label {
        padding:1px 3px;
        margin-bottom: 1px;
      }
      .quality-pointer {
        color:#fff;
        border-radius: 2px 0px 0px 2px;
        margin-left: 5px;
      }
      .pointer-gold {
        background: #ba8604;
      }
      .pointer-silver {
        background:#B6BCC5;
      }
      .prefixed-label {
        text-transform: capitalize;
        border-radius: 0px 2px 2px 0px;
      }
      .label-gold {
        background:#DAA520;
        color: #fff;
      }
      .label-silver {
        background:#DEDEDE;
        color:#999;
      }
    </style>
    <template id="menu" is="dom-if" if="{{quality}}">
      <div class="quality-label-container">
        <span class$="colored-label quality-pointer pointer-{{quality}}">•</span><span class$="colored-label prefixed-label label-{{quality}}">{{quality}}</span>
      </div>
    </template>
  </template>

  <script>
    Polymer({
      is: 'quality-label',
      properties: {
        quality: {
          type: String,
          observer: '_checkQualityValue'
        }
      },
      _checkQualityValue: function(){

          if (this.quality) {
              this.quality = this.quality.toLowerCase();
              if (this.quality!=='gold' && this.quality!=='silver') this.quality = null;
          }
          else {
              this.quality = null;
          }
      }
    });
  </script>
</dom-module>