@woosmap/ui 4.37.0 → 4.39.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/package.json +1 -1
  2. package/src/components/Icon/Icon.js +2 -0
  3. package/src/icons/arrow-link.svg +1 -0
  4. package/src/styles/website/input.styl +68 -30
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@woosmap/ui",
3
- "version": "4.37.0",
3
+ "version": "4.39.0",
4
4
  "repository": {
5
5
  "type": "git",
6
6
  "url": "git+https://github.com/WebGeoServices/ui.git"
package/src/components/Icon/Icon.js CHANGED
@@ -124,6 +124,7 @@ import { ReactComponent as AlphabeticalOrder } from '../../icons/alphabetical-or
124
124
  import { ReactComponent as AlphabeticalOrderReversed } from '../../icons/alphabetical-order-reversed.svg';
125
125
  import { ReactComponent as ArrowBotton } from '../../icons/arrow-bottom.svg';
126
126
  import { ReactComponent as ArrowLeft } from '../../icons/arrow-left.svg';
127
+ import { ReactComponent as ArrowLink } from '../../icons/arrow-link.svg';
127
128
  import { ReactComponent as ArrowRight } from '../../icons/arrow-right.svg';
128
129
  import { ReactComponent as ArrowTop } from '../../icons/arrow-top.svg';
129
130
  import { ReactComponent as Asset } from '../../icons/asset.svg';
@@ -318,6 +319,7 @@ const WebsiteIcons = {
318
319
  autocomplete: Autocomplete,
319
320
  'autocomplete-check': AutocompleteCheck,
320
321
  automotive: Automotive,
322
+ 'arrow-link': ArrowLink,
321
323
  battery: Battery,
322
324
  blog: Blog,
323
325
  book: Book,
package/src/icons/arrow-link.svg ADDED
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20.217,11.6,15.509,6.9a.56.56,0,1,0-.792.792L18.47,11.44H4.179a.56.56,0,1,0,0,1.12H18.47l-3.753,3.752a.56.56,0,0,0,.792.792L20.217,12.4A.559.559,0,0,0,20.217,11.6Z" /></svg>
package/src/styles/website/input.styl CHANGED
@@ -1,6 +1,13 @@
1
1
  .input
2
2
  width 100%
3
3
  font-size 1.3rem
4
+ &:focus
5
+ .input__item
6
+ &:not([type=button]):not([type=checkbox]):not([type=radio])
7
+ border-color $secondary
8
+ .icon
9
+ transition none
10
+ stroke $secondary
4
11
  &__container
5
12
  position relative
6
13
  &__label
@@ -19,53 +26,83 @@
19
26
  &--iconed
20
27
  &--password-toggle
21
28
  .icon
22
- fill $inputDemoBorderColor
29
+ stroke $inputBorderColor
30
+ fill none
23
31
  position absolute
24
32
  left 1rem
25
- top .7rem
26
- &--password-toggle
27
- trans()
28
- left unset
29
- right 1rem
30
- cursor pointer
31
- &:hover
32
- &.showed
33
- fill $dark60
33
+ top .8rem
34
+ stroke-width .14rem
34
35
  &.input--large
35
36
  .icon
36
37
  left 1.2rem
37
38
  top 1rem
38
- &--password-toggle
39
- left unset
40
- right 1.2rem
41
39
  &.input--filter
42
40
  .icon
43
41
  left -.4rem
44
42
  top .7rem
45
- &--password-toggle
46
- left unset
47
- right -.4rem
48
43
  &.input--large
49
44
  .icon
50
45
  left -.4rem
51
46
  top 1.1rem
52
- &--password-toggle
53
- left unset
54
- right -.4rem
55
47
  &.input--small
56
48
  .icon
57
49
  left -.4rem
58
50
  top .3rem
59
- &--password-toggle
60
- left unset
61
- right -.4rem
62
51
  &.input--small
63
52
  .icon
64
53
  left .8rem
65
54
  top .4rem
66
- &--password-toggle
67
- left unset
68
- right .8rem
55
+ &--iconed
56
+ &.input--password-toggle
57
+ .password-toggle
58
+ position absolute
59
+ right 1rem
60
+ top .7rem
61
+ .icon
62
+ position relative
63
+ top auto
64
+ left auto
65
+ &.input--large
66
+ .password-toggle
67
+ right 1.2rem
68
+ top 1rem
69
+ .icon
70
+ position relative
71
+ top auto
72
+ left auto
73
+ &.input--small
74
+ .password-toggle
75
+ right .8rem
76
+ top .4rem
77
+ .icon
78
+ position relative
79
+ top auto
80
+ left auto
81
+ &.input--filter
82
+ .password-toggle
83
+ right -.4rem
84
+ top .7rem
85
+ .icon
86
+ position relative
87
+ top auto
88
+ left auto
89
+ &.input--large
90
+ .password-toggle
91
+ right -.4rem
92
+ top 1.1rem
93
+ .icon
94
+ position relative
95
+ top auto
96
+ left auto
97
+ &.input--small
98
+ .password-toggle
99
+ right -.4rem
100
+ top .3rem
101
+ .icon
102
+ position relative
103
+ top auto
104
+ left auto
105
+
69
106
  &--checkbox
70
107
  &--radio
71
108
  position relative
@@ -118,28 +155,30 @@
118
155
  &:focus
119
156
  border-color $secondary
120
157
  .input--iconed &
121
- padding-left 4rem
122
158
  .input--password-toggle &
123
- padding-right 4rem
159
+ padding-left 4rem
124
160
  .input--large &
125
161
  font-size $inputFontSizeLarge
126
162
  line-height $inputLineHeightLarge
163
+ .input--password-toggle.input--large &
127
164
  .input--iconed.input--large &
128
165
  padding-left 4.6rem
129
- .input--password-toggle.input--large &
130
- padding-right 4.6rem
166
+ .input--filter.input--password-toggle &
131
167
  .input--filter.input--iconed &
132
168
  padding-left 2.6rem
133
169
  padding-bottom 0
170
+ .input--filter.input--password-toggle.input--large &
134
171
  .input--filter.input--iconed.input--large &
135
172
  padding-left 2.8rem
136
173
  padding-bottom 0
174
+ .input--filter.input--password-toggle.input--small &
137
175
  .input--filter.input--iconed.input--small &
138
176
  padding-left 2.4rem
139
177
  padding-bottom .4rem
140
178
  .input--small &
141
179
  font-size $inputFontSizeSmall
142
180
  min-width $inputHeightSmall
181
+ .input--password-toggle.input--small &
143
182
  .input--iconed.input--small &
144
183
  padding-left 3.4rem
145
184
  .input--noborder &
@@ -148,7 +187,6 @@
148
187
  border-color $error
149
188
  &:focus
150
189
  border-color $secondary
151
-
152
190
  &[type=textarea]
153
191
  padding round($padding / 1.7) $padding
154
192
  height $inputHeight * 2