<template>
  <div class="titleBar">
    <span class="point red">
      <i class="iconfont icon-close fontPoint"></i>
    </span>
    <span class="point yellow">
       <i class="iconfont icon-min-size fontPoint"></i>
    </span>
    <span class="point green">
        <i class="iconfont icon-maximize fontPoint"></i>
    </span>
    <span class="point green">
        <i class="iconfont icon-dropdo fontPoint"></i>
    </span>
  </div>
</template>

<script>
import "../../assets/font/iconfont.css"
export default {
  name: "vimiTitleBar"
}
</script>

<style scoped lang="scss">

.titleBar{
  .point {
    position: relative;
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 100%;
    background: white;
    vertical-align: middle;
    margin: 2px;
    cursor: pointer;
    .fontPoint{
      font-size: 12px;
      position: absolute;
      left:50%;
      top:50%;
      color: white!important;
      transform: translate(-50%,-50%) scale(0.75);
    }
  }

  .red {
    background: #f33c3c;
  }

  .yellow {
    background: yellow;
  }

  .green {
    background: #09dc09;
  }

  &::before {
    content: '';
    display: inline-block;
    width: 0;
    height: 100%;
    vertical-align: middle;
  }
}
</style>
