All files / src/components Tag.vue

0% Statements 0/16
0% Branches 0/6
0% Functions 0/4
0% Lines 0/7
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111                                                                                                                                                                                                                             
<template>
<span class='c-tag' @click.prevent='$emit("click")'>
  <slot></slot>
  <span class='c-delete' @click.prevent='$emit("delete")'></span>
</span>
</template>
 
<script>
export default {
  props: {
  },
};
</script>
 
<style lang='sass' scoped>
 
$borderColor: rgba(0, 0, 0, 0.1)
$backgroundColor: #fafafa

.c-tag:not(body)
  display: inline-flex
  align-items: center
  color: #3a3a3a
  cursor: pointer
  background-color: $backgroundColor
  border: solid 1px $borderColor
  border-radius: 5px
  font-size: 13px
  height: 2em
  justify-content: center
  line-height: 1.5
  padding-left: 0.75em
  padding-right: 0.75em
  white-space: nowrap
  transition: all 0.2s ease-in-out
  &:hover
    background-color: #eaeaea
  .c-delete
    margin-left: 0.25em
    margin-right: -0.375em
  &.is-delete
    margin-left: 1px
    padding: 0
    position: relative
    width: 2em
    &:before,
    &:after
      background-color: currentColor
      content: ""
      display: block
      left: 50%
      position: absolute
      top: 50%
      transform: translateX(-50%) translateY(-50%) rotate(45deg)
      transform-origin: center center
    &:before
      height: 1px
      width: 50%
    &:after
      height: 50%
      width: 1px
      &:hover,
      &:focus
        background-color: darken(red, 5%)
      &:active
        background-color: darken(red, 10%)
    &.is-rounded
      border-radius: 290486px
 
 
.c-delete
  line-height: 1.5
  cursor: pointer
  font-size: 1rem
  user-select: none
  background-color: rgba(10, 10, 10, 0.2)
  border: none
  border-radius: 290486px
  display: inline-block
  flex-grow: 0
  flex-shrink: 0
  width: 20px
  height: 20px
  max-height: 20px
  max-width: 20px
  min-height: 20px
  min-width: 20px
  outline: none;
  position: relative
  vertical-align: top
  &:before,
  &:after
    background-color: rgb(255, 255, 255)
    content: ""
    display: block
    left: 50%
    position: absolute
    top: 50%
    transform: translateX(-50%) translateY(-50%) rotate(45deg)
    transform-origin: center center
  &:before
    height: 2px
    width: 50%
  &:after
    height: 50%
    width: 2px
  &:hover,
  &:focus
    background-color: rgba(0, 0, 0, 0.4)
 
</style>