diff --git a/__stories__/components/tag.html b/__stories__/components/tag.html index 38ba095..63ccd30 100644 --- a/__stories__/components/tag.html +++ b/__stories__/components/tag.html @@ -2,3 +2,10 @@ Tag1 Tag2 + +
+ +
+ Tag1 + Tag2 +
diff --git a/src/components/tag.scss b/src/components/tag.scss index 88f42be..376cbf8 100644 --- a/src/components/tag.scss +++ b/src/components/tag.scss @@ -1,8 +1,8 @@ .#{$prefix}-tag { $color: #4e1cc7; color: $color; - background: lighten($color, 50%); - border:1px dashed lighten($color, 40%); + background: lighten($color, 50%); + border: 1px dashed lighten($color, 40%); font-family: Menlo, "Dank Mono", Inconsolata, "Operator Mono", Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", "Courier New", Courier, monospace; @@ -12,7 +12,12 @@ font-size: 14px; cursor: pointer; transition: background 0.3s; - &:hover{ + &:hover { background: lighten($color: $color, $amount: 40%); } + + &.is-small { + padding: 0.15em 0.5em; + font-size: 12px; + } }