client/tag-input: extract CSS
This commit is contained in:
rr-
parent
d0c0652720
commit
81f14e154e
|
|
@ -1,4 +1,3 @@
|
||||||
@import mixins
|
|
||||||
@import colors
|
@import colors
|
||||||
|
|
||||||
form
|
form
|
||||||
|
|
@ -173,114 +172,6 @@ input:disabled+.checkbox,
|
||||||
input:disabled
|
input:disabled
|
||||||
cursor: not-allowed
|
cursor: not-allowed
|
||||||
|
|
||||||
div.tag-input
|
|
||||||
position: relative
|
|
||||||
li
|
|
||||||
transition: background-color 0.5s linear
|
|
||||||
&.implication
|
|
||||||
background: $implied-tag-background-color
|
|
||||||
color: $implied-tag-text-color
|
|
||||||
&.new
|
|
||||||
background: $new-tag-background-color
|
|
||||||
color: $new-tag-text-color
|
|
||||||
&.duplicate
|
|
||||||
background: $duplicate-tag-background-color
|
|
||||||
color: $duplicate-tag-text-color
|
|
||||||
ul
|
|
||||||
margin-top: 0.2em
|
|
||||||
|
|
||||||
.tag-suggestions
|
|
||||||
position: absolute
|
|
||||||
z-index: 5
|
|
||||||
top: 0
|
|
||||||
left: 100%
|
|
||||||
|
|
||||||
&:not(.shown)
|
|
||||||
display: none
|
|
||||||
|
|
||||||
&.translucent
|
|
||||||
opacity: .5
|
|
||||||
|
|
||||||
&:before
|
|
||||||
margin-left: 0.5em
|
|
||||||
margin-top: 0.5em
|
|
||||||
position: absolute
|
|
||||||
display: block
|
|
||||||
background: $tag-suggestions-header-color
|
|
||||||
border-left: 1px solid $tag-suggestions-border-color
|
|
||||||
border-bottom: 1px solid $tag-suggestions-border-color
|
|
||||||
width: 0.707107em
|
|
||||||
height: 0.707107em
|
|
||||||
content: ' '
|
|
||||||
transform: rotate(45deg)
|
|
||||||
transform-origin: 0 0%
|
|
||||||
|
|
||||||
.buttons
|
|
||||||
float: right
|
|
||||||
a
|
|
||||||
margin-left: 1em
|
|
||||||
color: $inactive-link-color
|
|
||||||
|
|
||||||
.wrapper
|
|
||||||
margin-left: 0.5em
|
|
||||||
background: $tag-suggestions-background-color
|
|
||||||
border: 1px solid $tag-suggestions-border-color
|
|
||||||
width: 15em
|
|
||||||
word-break: break-all
|
|
||||||
p
|
|
||||||
background: $tag-suggestions-header-color
|
|
||||||
padding: 0.2em 1em
|
|
||||||
margin: 0
|
|
||||||
ul
|
|
||||||
margin: 0
|
|
||||||
overflow-y: auto
|
|
||||||
overflow-x: none
|
|
||||||
max-height: 20em
|
|
||||||
padding: 0.5em 1em 0 1em
|
|
||||||
li:last-child
|
|
||||||
border-bottom: 0.5em solid alpha($tag-suggestions-background-color, 0)
|
|
||||||
li
|
|
||||||
margin: 0
|
|
||||||
font-size: 90%
|
|
||||||
line-height: 1.3
|
|
||||||
a, span
|
|
||||||
display: inline-block
|
|
||||||
vertical-align: bottom
|
|
||||||
.add-tag
|
|
||||||
white-space: nowrap
|
|
||||||
overflow: hidden
|
|
||||||
max-width: 10em
|
|
||||||
text-overflow: ellipsis
|
|
||||||
.tag-weight
|
|
||||||
margin: 0 1em 0 0
|
|
||||||
p
|
|
||||||
margin: 0
|
|
||||||
|
|
||||||
.append
|
|
||||||
color: $inactive-link-color
|
|
||||||
margin-left: 0.7em
|
|
||||||
font-size: 90%
|
|
||||||
unselectable()
|
|
||||||
|
|
||||||
ul.compact-tags
|
|
||||||
line-height: 130%
|
|
||||||
width: 100%
|
|
||||||
li
|
|
||||||
margin: 0
|
|
||||||
width: 100%
|
|
||||||
white-space: nowrap
|
|
||||||
overflow: hidden
|
|
||||||
text-overflow: ellipsis
|
|
||||||
a
|
|
||||||
display: inline
|
|
||||||
i
|
|
||||||
padding-right: 0.4em
|
|
||||||
.append
|
|
||||||
color: $inactive-link-color
|
|
||||||
margin-left: 0.7em
|
|
||||||
font-size: 90%
|
|
||||||
unselectable()
|
|
||||||
|
|
||||||
label.color
|
label.color
|
||||||
position: relative
|
position: relative
|
||||||
input[type=text]
|
input[type=text]
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,110 @@
|
||||||
|
@import colors
|
||||||
|
|
||||||
|
div.tag-input
|
||||||
|
position: relative
|
||||||
|
ul
|
||||||
|
margin-top: 0.2em
|
||||||
|
li
|
||||||
|
transition: background-color 0.5s linear
|
||||||
|
&.implication
|
||||||
|
background: $implied-tag-background-color
|
||||||
|
color: $implied-tag-text-color
|
||||||
|
&.new
|
||||||
|
background: $new-tag-background-color
|
||||||
|
color: $new-tag-text-color
|
||||||
|
&.duplicate
|
||||||
|
background: $duplicate-tag-background-color
|
||||||
|
color: $duplicate-tag-text-color
|
||||||
|
|
||||||
|
.tag-suggestions
|
||||||
|
position: absolute
|
||||||
|
z-index: 5
|
||||||
|
top: 0
|
||||||
|
left: 100%
|
||||||
|
|
||||||
|
&:not(.shown)
|
||||||
|
display: none
|
||||||
|
|
||||||
|
&.translucent
|
||||||
|
opacity: .5
|
||||||
|
|
||||||
|
&:before
|
||||||
|
margin-left: 0.5em
|
||||||
|
margin-top: 0.5em
|
||||||
|
position: absolute
|
||||||
|
display: block
|
||||||
|
background: $tag-suggestions-header-color
|
||||||
|
border-left: 1px solid $tag-suggestions-border-color
|
||||||
|
border-bottom: 1px solid $tag-suggestions-border-color
|
||||||
|
width: 0.707107em
|
||||||
|
height: 0.707107em
|
||||||
|
content: ' '
|
||||||
|
transform: rotate(45deg)
|
||||||
|
transform-origin: 0 0%
|
||||||
|
|
||||||
|
.buttons
|
||||||
|
float: right
|
||||||
|
a
|
||||||
|
margin-left: 1em
|
||||||
|
color: $inactive-link-color
|
||||||
|
|
||||||
|
.wrapper
|
||||||
|
margin-left: 0.5em
|
||||||
|
background: $tag-suggestions-background-color
|
||||||
|
border: 1px solid $tag-suggestions-border-color
|
||||||
|
width: 15em
|
||||||
|
word-break: break-all
|
||||||
|
p
|
||||||
|
background: $tag-suggestions-header-color
|
||||||
|
padding: 0.2em 1em
|
||||||
|
margin: 0
|
||||||
|
ul
|
||||||
|
margin: 0
|
||||||
|
overflow-y: auto
|
||||||
|
overflow-x: none
|
||||||
|
max-height: 20em
|
||||||
|
padding: 0.5em 1em 0 1em
|
||||||
|
li:last-child
|
||||||
|
border-bottom: 0.5em solid alpha($tag-suggestions-background-color, 0)
|
||||||
|
li
|
||||||
|
margin: 0
|
||||||
|
font-size: 90%
|
||||||
|
line-height: 1.3
|
||||||
|
a, span
|
||||||
|
display: inline-block
|
||||||
|
vertical-align: bottom
|
||||||
|
.add-tag
|
||||||
|
white-space: nowrap
|
||||||
|
overflow: hidden
|
||||||
|
max-width: 10em
|
||||||
|
text-overflow: ellipsis
|
||||||
|
.tag-weight
|
||||||
|
margin: 0 1em 0 0
|
||||||
|
p
|
||||||
|
margin: 0
|
||||||
|
|
||||||
|
.append
|
||||||
|
color: $inactive-link-color
|
||||||
|
margin-left: 0.7em
|
||||||
|
font-size: 90%
|
||||||
|
unselectable()
|
||||||
|
|
||||||
|
ul.compact-tags
|
||||||
|
line-height: 130%
|
||||||
|
width: 100%
|
||||||
|
li
|
||||||
|
margin: 0
|
||||||
|
width: 100%
|
||||||
|
white-space: nowrap
|
||||||
|
overflow: hidden
|
||||||
|
text-overflow: ellipsis
|
||||||
|
a
|
||||||
|
display: inline
|
||||||
|
i
|
||||||
|
padding-right: 0.4em
|
||||||
|
.append
|
||||||
|
color: $inactive-link-color
|
||||||
|
margin-left: 0.7em
|
||||||
|
font-size: 90%
|
||||||
|
unselectable()
|
||||||
|
|
||||||
Loading…
Reference in New Issue