blob: 6a94a103bb87561c269958d884a7ab52fb875c2c (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
|
.sdc-tag-cloud-new-item-field{
display: flex;
align-items: flex-end;
sdc-input{
flex-grow: 1;
.sdc-input{
margin-bottom: 0;
.sdc-input__input{
border-bottom-right-radius: 0;
border-top-right-radius: 0;
}
}
}
.not-empty{
.sdc-input__input {
border-color: $blue;
}
}
.error{
.sdc-input__input {
border: solid 1px $red;
color: $red;
outline: none;
}
}
.add-button{
cursor: pointer;
height: 36px;
width: 36px;
text-align: center;
background-color: $lighter-blue;
border: solid 1px $blue;
border-left: none;
border-top-right-radius: 2px;
&.disabled{
cursor: default;
background-color: $light-silver;
border-color: $light-gray;
.plus-icon svg g{
fill: $gray;
}
}
.plus-icon{
line-height: 46px;
svg{
height: 20px;
width: 20px;
g{
fill: $blue;
}
}
}
}
&.not-empty{
.add-button:hover{
background-color: $light-blue;
svg{
g{
fill: $white;
}
}
}
}
}
.sdc-list-container{
height: 120px;
overflow-y: auto;
border: solid 1px $light-gray;
border-top: none;
border-radius: 2px;
background-color: $white;
padding: 10px 10px 0 0;
.sdc-tag-item{
padding: 0 0 10px 10px;
display: inline-block;
.tag-item{
min-width: 100px;
background-color: $white;
border: solid 1px $light-gray;
border-radius: 20px;
height: 28px;
line-height: 28px;
padding: 0 10px;
color: $text-black;
@include body-3;
&.view-only{
border-color: $silver;
}
.delete-item{
cursor: pointer;
padding-left: 10px;
float: right;
svg{
height: 12px;
width: 12px;
margin-top: 8px;
g{
fill: $dark-gray;
}
}
}
&:hover:not(.view-only){
background-color: $lighter-blue;
border-color: $lighter-blue;
.delete-item{
svg g{
fill: $blue;
}
}
}
}
}
}
|
