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:
@@ -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>
|
||||||
)
|
)
|
||||||
})
|
})
|
||||||
|
|||||||
@@ -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
|
||||||
|
|||||||
Reference in New Issue
Block a user