public/vendors/bulma/sass/elements/tag.sass

   1 $tag-background-color: $background !default
   2 $tag-color: $text !default
   3 $tag-radius: $radius !default
   4 $tag-delete-margin: 1px !default
   5
   6 .tags
   7   align-items: center
   8   display: flex
   9   flex-wrap: wrap
  10   justify-content: flex-start
  11   .tag
  12     margin-bottom: 0.5rem
  13     &:not(:last-child)
  14       margin-right: 0.5rem
  15   &:last-child
  16     margin-bottom: -0.5rem
  17   &:not(:last-child)
  18     margin-bottom: 1rem
  19   // Sizes
  20   &.are-medium
  21     .tag:not(.is-normal):not(.is-large)
  22       font-size: $size-normal
  23   &.are-large
  24     .tag:not(.is-normal):not(.is-medium)
  25       font-size: $size-medium
  26   &.is-centered
  27     justify-content: center
  28     .tag
  29       margin-right: 0.25rem
  30       margin-left: 0.25rem
  31   &.is-right
  32     justify-content: flex-end
  33     .tag
  34       &:not(:first-child)
  35         margin-left: 0.5rem
  36       &:not(:last-child)
  37         margin-right: 0
  38   &.has-addons
  39     .tag
  40       margin-right: 0
  41       &:not(:first-child)
  42         margin-left: 0
  43         border-bottom-left-radius: 0
  44         border-top-left-radius: 0
  45       &:not(:last-child)
  46         border-bottom-right-radius: 0
  47         border-top-right-radius: 0
  48
  49 .tag:not(body)
  50   align-items: center
  51   background-color: $tag-background-color
  52   border-radius: $tag-radius
  53   color: $tag-color
  54   display: inline-flex
  55   font-size: $size-small
  56   height: 2em
  57   justify-content: center
  58   line-height: 1.5
  59   padding-left: 0.75em
  60   padding-right: 0.75em
  61   white-space: nowrap
  62   .delete
  63     margin-left: 0.25rem
  64     margin-right: -0.375rem
  65   // Colors
  66   @each $name, $pair in $colors
  67     $color: nth($pair, 1)
  68     $color-invert: nth($pair, 2)
  69     &.is-#{$name}
  70       background-color: $color
  71       color: $color-invert
  72       // If a light and dark colors are provided
  73       @if length($pair) > 3
  74         $color-light: nth($pair, 3)
  75         $color-dark: nth($pair, 4)
  76         &.is-light
  77           background-color: $color-light
  78           color: $color-dark
  79   // Sizes
  80   &.is-normal
  81     font-size: $size-small
  82   &.is-medium
  83     font-size: $size-normal
  84   &.is-large
  85     font-size: $size-medium
  86   .icon
  87     &:first-child:not(:last-child)
  88       margin-left: -0.375em
  89       margin-right: 0.1875em
  90     &:last-child:not(:first-child)
  91       margin-left: 0.1875em
  92       margin-right: -0.375em
  93     &:first-child:last-child
  94       margin-left: -0.375em
  95       margin-right: -0.375em
  96   // Modifiers
  97   &.is-delete
  98     margin-left: $tag-delete-margin
  99     padding: 0
 100     position: relative
 101     width: 2em
 102     &::before,
 103     &::after
 104       background-color: currentColor
 105       content: ""
 106       display: block
 107       left: 50%
 108       position: absolute
 109       top: 50%
 110       transform: translateX(-50%) translateY(-50%) rotate(45deg)
 111       transform-origin: center center
 112     &::before
 113       height: 1px
 114       width: 50%
 115     &::after
 116       height: 50%
 117       width: 1px
 118     &:hover,
 119     &:focus
 120       background-color: darken($tag-background-color, 5%)
 121     &:active
 122       background-color: darken($tag-background-color, 10%)
 123   &.is-rounded
 124     border-radius: $radius-rounded
 125
 126 a.tag
 127   &:hover
 128     text-decoration: underline