1
0
mirror of https://github.com/BoostIo/Boostnote synced 2025-12-13 17:56:25 +00:00

modify: change design for tag

This commit is contained in:
sota1235
2016-12-21 16:40:03 +09:00
parent fad837e148
commit ebfbe29217
2 changed files with 13 additions and 7 deletions

View File

@@ -107,12 +107,12 @@ class TagSelect extends React.Component {
<span styleName='tag' <span styleName='tag'
key={tag} key={tag}
> >
<span styleName='tag-label'>{tag}</span>
<button styleName='tag-removeButton' <button styleName='tag-removeButton'
onClick={(e) => this.handleTagRemoveButtonClick(tag)(e)} onClick={(e) => this.handleTagRemoveButtonClick(tag)(e)}
> >
<i className='fa fa-times fa-fw'/> <i className='fa fa-times fa-fw'/>
</button> </button>
<span styleName='tag-label'>{tag}</span>
</span> </span>
) )
}) })

View File

@@ -1,3 +1,6 @@
$ui-white-theme-tag-bg = rgba(0, 0, 0, 0.3)
$ui-dark-theme-tag-bg = rgba(255, 255, 255, 0.3)
.root .root
display: inline display: inline
position relative position relative
@@ -6,22 +9,22 @@
.tag .tag
display inline-block display inline-block
margin 0 2px margin 0 2px
padding 0 10px
vertical-align middle vertical-align middle
height 20px height 20px
background-color white background-color $ui-white-theme-tag-bg
border-radius 3px border-radius 20px
overflow hidden overflow hidden
clearfix() clearfix()
.tag-removeButton .tag-removeButton
float left float right
height 20px height 20px
width 18px width 18px
margin 0 margin 0
padding 0 padding 0
border-style solid border-style solid
border-color $ui-button--focus-borderColor border-width 0
border-width 0 0 0 3px
line-height 18px line-height 18px
background-color transparent background-color transparent
color $ui-button-color color $ui-button-color
@@ -35,6 +38,9 @@
border-color $ui-button--focus-borderColor border-color $ui-button--focus-borderColor
.tag-label .tag-label
font-size 12px
font-weight bold
color: #FFFFFF
float left float left
height 20px height 20px
line-height 20px line-height 20px
@@ -61,7 +67,7 @@ body[data-theme="dark"]
color $ui-dark-button-color color $ui-dark-button-color
.tag .tag
background-color $ui-dark-button--hover-backgroundColor background-color $ui-dark-theme-tag-bg
.tag-removeButton .tag-removeButton
border-color $ui-button--focus-borderColor border-color $ui-button--focus-borderColor