public/Boostnote
1
0
Fork 0
mirror of https://github.com/BoostIo/Boostnote synced 2025-12-14 10:16:26 +00:00
Code Issues Releases Wiki Activity

Simplify style

Browse Source
This commit is contained in:
bimlas
2018-04-10 23:34:20 +02:00
parent 066d97220f
commit c02b91dfd4
2 changed files with 24 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
browser/components/TagListItem.js
View File

@@ -20,7 +20,7 @@ const TagListItem = ({name, handleClickTagListItem, handleClickNarrowToTag, isAc
? <button styleName={isActive ? 'tagList-itemNarrow-active' : 'tagList-itemNarrow'} onClick={() => handleClickNarrowToTag(name)}> ? <button styleName={isActive ? 'tagList-itemNarrow-active' : 'tagList-itemNarrow'} onClick={() => handleClickNarrowToTag(name)}>
<i className={isActive ? 'fa fa-minus-circle' : 'fa fa-plus-circle'} /> <i className={isActive ? 'fa fa-minus-circle' : 'fa fa-plus-circle'} />
</button> </button>
: <div styleName={isActive ? 'tagList-itemNarrow-active' : 'tagList-itemNarrow'}></div> : <div styleName={isActive ? 'tagList-itemNarrow-active' : 'tagList-itemNarrow'} />
} }
<button styleName={isActive ? 'tagList-item-active' : 'tagList-item'} onClick={() => handleClickTagListItem(name)}> <button styleName={isActive ? 'tagList-item-active' : 'tagList-item'} onClick={() => handleClickTagListItem(name)}>
<span styleName='tagList-item-name'> <span styleName='tagList-item-name'>

40
browser/components/TagListItem.styl
View File

@@ -1,10 +1,14 @@
.tagList-itemContainer .tagList-itemContainer
display flex display flex
.tagList-item, .tagList-itemNarrow .tagList-item
display flex
flex 1
width 100%
height 26px height 26px
background-color transparent background-color transparent
color $ui-inactive-text-color color $ui-inactive-text-color
padding 0
margin-bottom 5px margin-bottom 5px
text-align left text-align left
border none border none
@@ -20,18 +24,19 @@
color $ui-button-default-color color $ui-button-default-color
background-color $ui-button-default--active-backgroundColor background-color $ui-button-default--active-backgroundColor
.tagList-item .tagList-itemNarrow
composes tagList-item
flex none
width 20px
padding 0 4px
.tagList-item-active
background-color $ui-button-default--active-backgroundColor
display flex display flex
flex 1 flex 1
width 100% width 100%
padding 0
.tagList-itemNarrow
padding 0 4px
.tagList-item-active, .tagList-itemNarrow-active
background-color $ui-button-default--active-backgroundColor
height 26px height 26px
padding 0
margin-bottom 5px margin-bottom 5px
text-align left text-align left
border none border none
@@ -42,13 +47,10 @@
background-color alpha($ui-button-default--active-backgroundColor, 60%) background-color alpha($ui-button-default--active-backgroundColor, 60%)
transition 0.2s transition 0.2s
.tagList-item-active
display flex
flex 1
width 100%
padding 0
.tagList-itemNarrow-active .tagList-itemNarrow-active
composes tagList-item-active
flex none
width 20px
padding 0 4px padding 0 4px
.tagList-item-name .tagList-item-name
@@ -70,7 +72,7 @@
font-size 13px font-size 13px
body[data-theme="white"] body[data-theme="white"]
.tagList-item, .tagList-itemNarrow .tagList-item
color $ui-inactive-text-color color $ui-inactive-text-color
&:hover &:hover
color $ui-text-color color $ui-text-color
@@ -79,7 +81,7 @@ body[data-theme="white"]
color $ui-text-color color $ui-text-color
background-color $ui-button--active-backgroundColor background-color $ui-button--active-backgroundColor
.tagList-item-active, .tagList-itemNarrow-active .tagList-item-active
background-color $ui-button--active-backgroundColor background-color $ui-button--active-backgroundColor
color $ui-text-color color $ui-text-color
&:hover &:hover
@@ -88,7 +90,7 @@ body[data-theme="white"]
color $ui-text-color color $ui-text-color
body[data-theme="dark"] body[data-theme="dark"]
.tagList-item, .tagList-itemNarrow .tagList-item
color $ui-dark-inactive-text-color color $ui-dark-inactive-text-color
&:hover &:hover
color $ui-dark-text-color color $ui-dark-text-color
@@ -97,7 +99,7 @@ body[data-theme="dark"]
color $ui-dark-text-color color $ui-dark-text-color
background-color $ui-dark-button--active-backgroundColor background-color $ui-dark-button--active-backgroundColor
.tagList-item-active, .tagList-itemNarrow-active .tagList-item-active
background-color $ui-dark-button--active-backgroundColor background-color $ui-dark-button--active-backgroundColor
color $ui-dark-text-color color $ui-dark-text-color
&:active &:active