hart-estate-widget 0.0.69 → 0.0.72

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 (110) hide show
  1. package/README.md +30 -27
  2. package/build/widget.bundle.js +3 -0
  3. package/build/widget.bundle.js.LICENSE.txt +78 -0
  4. package/build/widget.bundle.js.map +1 -0
  5. package/build/widget.module.js +3 -0
  6. package/build/widget.module.js.LICENSE.txt +78 -0
  7. package/build/widget.module.js.map +1 -0
  8. package/package.json +22 -21
  9. package/build/assets/css/index.css +0 -2
  10. package/build/assets/fonts/RobotoMono/RobotoMono-Bold.ttf +0 -0
  11. package/build/assets/fonts/RobotoMono/RobotoMono-Bold.woff +0 -0
  12. package/build/assets/fonts/RobotoMono/RobotoMono-Bold.woff2 +0 -0
  13. package/build/assets/fonts/RobotoMono/RobotoMono-BoldItalic.ttf +0 -0
  14. package/build/assets/fonts/RobotoMono/RobotoMono-BoldItalic.woff +0 -0
  15. package/build/assets/fonts/RobotoMono/RobotoMono-BoldItalic.woff2 +0 -0
  16. package/build/assets/fonts/RobotoMono/RobotoMono-Italic.ttf +0 -0
  17. package/build/assets/fonts/RobotoMono/RobotoMono-Italic.woff +0 -0
  18. package/build/assets/fonts/RobotoMono/RobotoMono-Italic.woff2 +0 -0
  19. package/build/assets/fonts/RobotoMono/RobotoMono-Light.ttf +0 -0
  20. package/build/assets/fonts/RobotoMono/RobotoMono-Light.woff +0 -0
  21. package/build/assets/fonts/RobotoMono/RobotoMono-Light.woff2 +0 -0
  22. package/build/assets/fonts/RobotoMono/RobotoMono-LightItalic.ttf +0 -0
  23. package/build/assets/fonts/RobotoMono/RobotoMono-LightItalic.woff +0 -0
  24. package/build/assets/fonts/RobotoMono/RobotoMono-LightItalic.woff2 +0 -0
  25. package/build/assets/fonts/RobotoMono/RobotoMono-Medium.ttf +0 -0
  26. package/build/assets/fonts/RobotoMono/RobotoMono-Medium.woff +0 -0
  27. package/build/assets/fonts/RobotoMono/RobotoMono-Medium.woff2 +0 -0
  28. package/build/assets/fonts/RobotoMono/RobotoMono-MediumItalic.ttf +0 -0
  29. package/build/assets/fonts/RobotoMono/RobotoMono-MediumItalic.woff +0 -0
  30. package/build/assets/fonts/RobotoMono/RobotoMono-MediumItalic.woff2 +0 -0
  31. package/build/assets/fonts/RobotoMono/RobotoMono-Regular.ttf +0 -0
  32. package/build/assets/fonts/RobotoMono/RobotoMono-Regular.woff +0 -0
  33. package/build/assets/fonts/RobotoMono/RobotoMono-Regular.woff2 +0 -0
  34. package/build/assets/fonts/RobotoMono/RobotoMono-Thin.ttf +0 -0
  35. package/build/assets/fonts/RobotoMono/RobotoMono-Thin.woff +0 -0
  36. package/build/assets/fonts/RobotoMono/RobotoMono-Thin.woff2 +0 -0
  37. package/build/assets/fonts/RobotoMono/RobotoMono.css +0 -98
  38. package/build/assets/icons/1x.svg +0 -4
  39. package/build/assets/icons/2x.svg +0 -4
  40. package/build/assets/icons/arrow-left.svg +0 -4
  41. package/build/assets/icons/arrow-right.svg +0 -4
  42. package/build/assets/icons/bullet.png +0 -0
  43. package/build/assets/icons/close.svg +0 -4
  44. package/build/assets/icons/enter-fullscreen.svg +0 -6
  45. package/build/assets/icons/hand-move.svg +0 -15
  46. package/build/assets/icons/hand-research.svg +0 -12
  47. package/build/assets/icons/plan.svg +0 -5
  48. package/build/assets/icons/render.svg +0 -7
  49. package/build/assets/icons/rotation-close.svg +0 -6
  50. package/build/assets/icons/rotation.svg +0 -4
  51. package/build/assets/icons/surface.svg +0 -5
  52. package/build/assets/img/3D.jpg +0 -0
  53. package/build/assets/img/door-icon.png +0 -0
  54. package/build/assets/img/door-texture.jpeg +0 -0
  55. package/build/assets/img/exterior-wall-texture-roughness.jpg +0 -0
  56. package/build/assets/img/exterior-wall-texture.jpeg +0 -0
  57. package/build/assets/img/floor-bathroom.jpg +0 -0
  58. package/build/assets/img/floor-dark.jpg +0 -0
  59. package/build/assets/img/floor-white.jpg +0 -0
  60. package/build/assets/img/floor.jpg +0 -0
  61. package/build/assets/img/grass.jpg +0 -0
  62. package/build/assets/img/logo.svg +0 -11
  63. package/build/assets/img/refresh-icon.svg +0 -6
  64. package/build/assets/img/spot-icon.png +0 -0
  65. package/build/assets/img/wall-texture.jpg +0 -0
  66. package/build/assets/sass/components/instructions.sass +0 -94
  67. package/build/assets/sass/components/loader.sass +0 -54
  68. package/build/assets/sass/components/model.sass +0 -27
  69. package/build/assets/sass/components/panorama.sass +0 -174
  70. package/build/assets/sass/components/rotation.sass +0 -202
  71. package/build/assets/sass/components/tabs.sass +0 -121
  72. package/build/assets/sass/index.sass +0 -65
  73. package/build/assets/sass/mixin.sass +0 -48
  74. package/build/assets/sass/vars.sass +0 -28
  75. package/build/bundle.js +0 -2
  76. package/build/components/Application.js +0 -2
  77. package/build/components/Buttons/FullScreenButton.js +0 -2
  78. package/build/components/Buttons/TabButton.js +0 -2
  79. package/build/components/Instructions.js +0 -2
  80. package/build/components/Loader.js +0 -2
  81. package/build/components/ModelTab.js +0 -2
  82. package/build/components/PanoramaTab.js +0 -2
  83. package/build/components/RotationTab/DefaultView.js +0 -2
  84. package/build/components/RotationTab/ThreesixtyView.js +0 -2
  85. package/build/components/RotationTab/index.js +0 -2
  86. package/build/components/Widget.js +0 -2
  87. package/build/config/defaultConfig.js +0 -2
  88. package/build/enums/deviceOrientationStatuses.js +0 -2
  89. package/build/enums/deviceWidth.js +0 -2
  90. package/build/enums/imageExtentions.js +0 -2
  91. package/build/enums/rotationModes.js +0 -2
  92. package/build/index.css +0 -2
  93. package/build/index.js +0 -2
  94. package/build/locale/en/data.json +0 -25
  95. package/build/locale/index.js +0 -2
  96. package/build/locale/ru/data.json +0 -25
  97. package/build/store/apiStore.js +0 -2
  98. package/build/store/deviceStore.js +0 -2
  99. package/build/store/fullScreenStore.js +0 -2
  100. package/build/store/houseStore.js +0 -2
  101. package/build/store/index.js +0 -2
  102. package/build/store/modelStore.js +0 -2
  103. package/build/threesixty/events.js +0 -2
  104. package/build/threesixty/index.js +0 -2
  105. package/build/utils/csg/csg-lib.js +0 -2
  106. package/build/utils/csg/csg-worker.js +0 -2
  107. package/build/utils/csg/three-csg.js +0 -2
  108. package/build/utils/helpers.js +0 -2
  109. package/build/utils/modelHelpers.js +0 -2
  110. package/build/utils/panoramaHelpers.js +0 -2
@@ -1,94 +0,0 @@
1
- @import '../mixin'
2
- @import '../vars'
3
-
4
- .widget-application
5
- .widget-instructions
6
- position: absolute
7
- z-index: 2
8
- left: 0
9
- top: 0
10
- width: 100%
11
- height: 100%
12
- display: flex
13
- align-items: center
14
- justify-content: center
15
- background-position: center
16
- background-repeat: no-repeat
17
- background-size: cover
18
- // @include blurBackground(10px)
19
- &__content
20
- display: flex
21
- flex-direction: column
22
- align-items: center
23
- justify-content: flex-start
24
- background-color: transparentize($gray, .15)
25
- border-radius: 20px
26
- overflow: hidden
27
- width: 400px
28
- max-width: calc(100% - 60px)
29
- padding: 36px 30px 30px 30px
30
- @include blurBackground(5px)
31
- @include media($mobile)
32
- width: 280px
33
- padding: 26px 20px 20px 20px
34
- &__steps
35
- display: flex
36
- align-items: flex-start
37
- justify-content: center
38
- &__step
39
- display: flex
40
- flex-direction: column
41
- align-items: center
42
- justify-content: flex-start
43
- margin: 0 15px
44
- @include media($tablet)
45
- margin: 0 10px
46
- img
47
- display: block
48
- width: 52px
49
- height: 80px
50
- object-fit: contain
51
- object-position: center
52
- @include media($mobile)
53
- width: 40px
54
- height: 60px
55
- @include media($smallMobile)
56
- width: 35px
57
- p
58
- color: $text-dark
59
- font-size: 20px
60
- font-weight: bold
61
- text-align: center
62
- margin-top: 10px
63
- max-width: 130px
64
- @include media($tablet)
65
- font-size: 18px
66
- max-width: 115px
67
- @include media($mobile)
68
- font-size: 16px
69
- @include media($smallMobile)
70
- font-size: 14px
71
- button
72
- @include customButton
73
- display: flex
74
- align-items: center
75
- justify-content: center
76
- height: 44px
77
- padding: 0 33px
78
- border-radius: 52px
79
- background-color: $mainColor
80
- color: $text-dark
81
- font-size: 24px
82
- font-weight: bold
83
- text-transform: uppercase
84
- margin: 25px auto 0 auto
85
- @include media($tablet)
86
- font-size: 18px
87
- height: 40px
88
- @include media($mobile)
89
- font-size: 16px
90
- height: 35px
91
- @include media($smallMobile)
92
- font-size: 14px
93
- height: 26px
94
- padding: 0 25px
@@ -1,54 +0,0 @@
1
- @import '../vars'
2
-
3
- .widget-application
4
- .widget-loader
5
- display: block
6
- position: relative
7
- width: 80px
8
- height: 80px
9
- &--absolute
10
- position: absolute
11
- left: 50%
12
- top: 50%
13
- transform: translate(-50%, -50%)
14
- &--sm
15
- transform: translate(-50%, -50%) scale(.75)
16
- div
17
- position: absolute
18
- top: 33px
19
- width: 13px
20
- height: 13px
21
- border-radius: 50%
22
- background: $mainColor
23
- animation-timing-function: cubic-bezier(0, 1, 1, 0)
24
- &:nth-child(1)
25
- left: 8px
26
- animation: widget-loader-1 0.6s infinite
27
- &:nth-child(2)
28
- left: 8px
29
- animation: widget-loader-2 0.6s infinite
30
- &:nth-child(3)
31
- left: 32px
32
- animation: widget-loader-2 0.6s infinite
33
- &:nth-child(4)
34
- left: 56px
35
- animation: widget-loader-3 0.6s infinite
36
-
37
- @keyframes widget-loader-1
38
- 0%
39
- transform: scale(0)
40
- 100%
41
- transform: scale(1)
42
-
43
- @keyframes widget-loader-3
44
- 0%
45
- transform: scale(1)
46
- 100%
47
- transform: scale(0)
48
-
49
- @keyframes widget-loader-2
50
- 0%
51
- transform: translate(0, 0)
52
-
53
- 100%
54
- transform: translate(24px, 0)
@@ -1,27 +0,0 @@
1
- @import '../vars'
2
-
3
- .widget-application
4
- .widget-tab
5
- &__model
6
- width: 100%
7
- height: 100%
8
- position: absolute
9
- left: 0
10
- top: 0
11
- z-index: 2
12
- &-scene
13
- width: 100%
14
- height: 100%
15
- display: block
16
- &-joystick
17
- position: absolute
18
- left: 100px
19
- bottom: 100px
20
- opacity: 0
21
- pointer-events: none
22
- @include media($mobile)
23
- left: 50%
24
- transform: translateX(-50%)
25
- &--active
26
- opacity: 1
27
- pointer-events: unset
@@ -1,174 +0,0 @@
1
- @import '../mixin'
2
- @import '../vars'
3
-
4
- .widget-application
5
- .widget-tab
6
- &__panorama
7
- width: 100%
8
- height: 100%
9
- position: absolute
10
- left: 0
11
- top: 0
12
- z-index: 2
13
- &-overlay
14
- width: 100%
15
- height: 100%
16
- overflow: hidden
17
- background: $white !important
18
- *
19
- display: none !important
20
- canvas
21
- display: block !important
22
- &-controls
23
- position: absolute
24
- z-index: 2
25
- left: 50%
26
- bottom: 35px
27
- display: flex
28
- align-items: center
29
- justify-content: center
30
- padding: 8px
31
- border-radius: 38px
32
- background-color: transparentize($black, .8)
33
- transform: translateX(-50%)
34
- @include blurBackground(5px)
35
- @include media($mobile)
36
- padding: 5px
37
- @include media($smallMobile)
38
- bottom: 30px
39
- &-button
40
- @include customButton
41
- width: 55px
42
- height: 55px
43
- border-radius: 50%
44
- background-color: $white
45
- display: flex
46
- align-items: center
47
- justify-content: center
48
- margin-right: 18px
49
- @include media($tablet)
50
- width: 44px
51
- height: 44px
52
- @include media($mobile)
53
- margin-right: 10px
54
- width: 33px
55
- height: 33px
56
- @include media($smallMobile)
57
- width: 26px
58
- height: 26px
59
- img
60
- display: block
61
- @include media($tablet)
62
- transform: scale(.7)
63
- @include media($mobile)
64
- transform: scale(.52)
65
- @include media($smallMobile)
66
- transform: scale(.45)
67
- &:nth-last-child(1)
68
- margin-right: 0
69
- &-close-map
70
- z-index: 4
71
- &-map
72
- position: absolute
73
- left: 45px
74
- bottom: 35px
75
- z-index: 3
76
- border-radius: 10px
77
- opacity: 1
78
- transition: opacity .5s
79
- @include noTouch
80
- &::before
81
- content: ''
82
- position: absolute
83
- z-index: -1
84
- left: 50%
85
- top: 50%
86
- transform: translate(-50%, -50%)
87
- width: calc(100% + 16px)
88
- height: calc(100% + 16px)
89
- border-radius: inherit
90
- background-color: $white
91
- @include media($tablet)
92
- left: 20px
93
- transform: scale(.6)
94
- transform-origin: 0% 100%
95
- @include media($mobile)
96
- transform: scale(.4)
97
- @include media($smallMobile)
98
- bottom: 30px
99
- transform: scale(.35)
100
- &--scaled
101
- @include media($tablet)
102
- transform: scale(1.4) translate(-50%, 50%)
103
- left: 50%
104
- bottom: 50%
105
- &::after
106
- content: ''
107
- position: absolute
108
- z-index: -2
109
- left: 50%
110
- top: 50%
111
- transform: translate(-50%, -50%)
112
- width: 100vw
113
- height: 100vh
114
- background-color: transparentize(#C4C4C4, .2)
115
- svg
116
- polygon
117
- &:active
118
- opacity: .3 !important
119
- @include media($mobile)
120
- transform: scale(1) translate(-50%, 50%)
121
- &--hidden
122
- opacity: 0
123
- pointer-events: none
124
- img
125
- width: 200px
126
- border-radius: none
127
- display: block
128
- @include noSelect
129
- @include highResolution
130
- &:hover
131
- box-shadow: 1px 1px 10px rgba(0,0,0,0.15)
132
- svg
133
- position: absolute
134
- left: 0
135
- top: 0
136
- width: 200px
137
- height: 100%
138
- z-index: 3
139
- display: block
140
- border-radius: inherit
141
- polygon
142
- opacity: 0
143
- fill: $mainColor
144
- cursor: pointer
145
- &:hover
146
- opacity: .3
147
- &__fov
148
- position: absolute
149
- left: 0
150
- top: 0
151
- width: 0px
152
- height: 0px
153
- border-radius: 50%
154
- border-left: 30px solid transparentize($mainColor, 1)
155
- border-right: 30px solid transparentize($mainColor, 1)
156
- border-bottom: 30px solid transparentize($mainColor, 1)
157
- border-top: 40px solid transparentize($mainColor, .6)
158
- transform: translate(-50%, -50%) rotate(0rad)
159
- transform-origin: 50% 50%
160
- z-index: 4
161
- pointer-events: none
162
- &::before
163
- content: ''
164
- position: absolute
165
- z-index: 5
166
- left: 50%
167
- top: 50%
168
- transform: translate(-50%, -50%) translateY(-5px)
169
- width: 15px
170
- height: 15px
171
- background-color: $mainColor
172
- border-radius: 50%
173
- border: 2px solid $mainColor
174
- box-shadow: inset 0 0 0 2px #ffffff
@@ -1,202 +0,0 @@
1
- @import '../mixin'
2
- @import '../vars'
3
-
4
- .widget-application
5
- .widget-tab
6
- &__rotation
7
- width: 100%
8
- height: 100%
9
- &-start
10
- @include customButton
11
- position: absolute
12
- left: 50%
13
- bottom: 35px
14
- transform: translateX(-50%)
15
- display: flex
16
- align-items: center
17
- justify-content: center
18
- padding: 0 25px 0 10px
19
- background-color: $gray
20
- border-radius: 38px
21
- height: 72px
22
- width: 202px
23
- @include media($tablet)
24
- height: 60px
25
- width: 166px
26
- padding: 0 20px 0 8px
27
- bottom: 35px
28
- @include media($mobile)
29
- height: 44px
30
- width: 115px
31
- padding: 0 10px 0 6px
32
- @include media($smallMobile)
33
- height: 36px
34
- width: 85px
35
- padding: 0 8px 0 6px
36
- bottom: 30px
37
- &-icon
38
- display: flex
39
- align-items: center
40
- justify-content: center
41
- border-radius: 50%
42
- background-color: $white
43
- margin-right: 18px
44
- padding: 10px
45
- @include media($tablet)
46
- padding: 7px
47
- margin-right: 15px
48
- @include media($mobile)
49
- margin-right: 7px
50
- @include media($smallMobile)
51
- padding: 6px
52
- margin-right: 5px
53
- img
54
- display: block
55
- position: relative
56
- top: 2px
57
- width: 34px
58
- @include media($tablet)
59
- width: 30px
60
- top: 1px
61
- @include media($mobile)
62
- width: 19px
63
- top: 0
64
- @include media($smallMobile)
65
- width: 15px
66
- span
67
- font-size: 24px
68
- font-weight: bold
69
- color: $text-dark
70
- text-transform: uppercase
71
- width: 100%
72
- display: block
73
- text-align: center
74
- position: relative
75
- top: 1px
76
- @include media($tablet)
77
- font-size: 20px
78
- @include media($mobile)
79
- font-size: 14px
80
- @include media($smallMobile)
81
- font-size: 10px
82
- top: 0
83
-
84
- &__threesixty,
85
- &__isometry
86
- width: 100%
87
- height: 100%
88
- @include noTouch
89
- &-container
90
- width: 100% !important
91
- height: 100% !important
92
- position: relative
93
- background-image: none !important
94
- img
95
- position: absolute
96
- left: 50%
97
- top: 50%
98
- transform: translate(-50%, -50%)
99
- max-width: 100%
100
- max-height: 100%
101
- width: 600px
102
- height: 600px
103
- object-fit: contain
104
- opacity: 0
105
- pointer-events: none
106
- @include noSelect
107
- &.active
108
- opacity: 1
109
-
110
- &__threesixty
111
- &--active
112
- cursor: move
113
-
114
- &__isometry
115
- &-arrows
116
- position: absolute
117
- z-index: 3
118
- left: 50%
119
- bottom: 35px
120
- transform: translateX(-50%)
121
- height: 72px
122
- display: flex
123
- align-items: center
124
- justify-content: center
125
- @include media($tablet)
126
- bottom: 35px
127
- height: 60px
128
- @include media($mobile)
129
- height: 44px
130
- @include media($smallMobile)
131
- bottom: 30px
132
- height: 36px
133
- span
134
- font-size: 28px
135
- font-weight: bold
136
- display: block
137
- margin: 0 9px
138
- @include media($tablet)
139
- font-size: 22px
140
- @include media($mobile)
141
- font-size: 17px
142
- margin: 0 3px
143
- @include media($smallMobile)
144
- font-size: 14px
145
- margin: 0
146
- &-arrow
147
- @include customButton
148
- display: flex
149
- align-items: center
150
- justify-content: center
151
- padding: 5px
152
- img
153
- width: 32px
154
- @include media($tablet)
155
- width: 24px
156
- @include media($mobile)
157
- width: 18px
158
- @include media($smallMobile)
159
- width: 14px
160
- &-buttons
161
- position: absolute
162
- z-index: 3
163
- left: 44px
164
- bottom: 35px
165
- display: flex
166
- align-items: center
167
- justify-content: flex-end
168
- @include media($tablet)
169
- left: 20px
170
- bottom: 35px
171
- @include media($smallMobile)
172
- bottom: 30px
173
- &-button
174
- @include customButton
175
- width: 72px
176
- height: 72px
177
- border-radius: 50%
178
- display: flex
179
- align-items: center
180
- justify-content: center
181
- background-color: $gray
182
- margin-top: 40px
183
- @include media($tablet)
184
- margin-top: 20px
185
- width: 60px
186
- height: 60px
187
- @include media($mobile)
188
- margin-top: 10px
189
- width: 44px
190
- height: 44px
191
- @include media($smallMobile)
192
- width: 36px
193
- height: 36px
194
- img
195
- display: block
196
- width: 50px
197
- @include media($tablet)
198
- width: 40px
199
- @include media($mobile)
200
- width: 30px
201
- @include media($smallMobile)
202
- width: 25px
@@ -1,121 +0,0 @@
1
- @import '../mixin'
2
- @import '../vars'
3
-
4
- .widget-application
5
- .widget-tab-buttons
6
- position: absolute
7
- z-index: 3
8
- right: 44px
9
- bottom: 35px
10
- display: flex
11
- align-items: center
12
- justify-content: flex-end
13
- @include media($tablet)
14
- right: 20px
15
- bottom: 35px
16
- @include media($smallMobile)
17
- bottom: 30px
18
- .widget-tab-button
19
- @include customButton
20
- width: 72px
21
- height: 72px
22
- border-radius: 50%
23
- display: flex
24
- align-items: center
25
- justify-content: center
26
- background-color: $gray
27
- color: $text-dark
28
- font-size: 28px
29
- line-height: 120%
30
- font-weight: bold
31
- margin-left: 40px
32
- @include media($tablet)
33
- margin-left: 20px
34
- width: 60px
35
- height: 60px
36
- font-size: 22px
37
- @include media($mobile)
38
- margin-left: 10px
39
- font-size: 17px
40
- width: 44px
41
- height: 44px
42
- @include media($smallMobile)
43
- width: 36px
44
- height: 36px
45
- font-size: 14px
46
- &--active
47
- background-color: $mainColor
48
-
49
- .widget-tab
50
- width: 100%
51
- height: 100%
52
- display: flex
53
- align-items: center
54
- justify-content: center
55
- padding: 60px 30px
56
- @include media($smallMobile)
57
- padding: 60px 20px
58
- &-menu
59
- position: absolute
60
- z-index: 3
61
- left: 15px
62
- top: 15px
63
- max-height: 100%
64
- overflow-y: auto
65
- padding-bottom: 30px
66
- &__wallpapers
67
- display: flex
68
- flex-wrap: wrap
69
- align-items: flex-start
70
- margin-top: 10px
71
- width: 100%
72
- img
73
- width: 30px
74
- height: 30px
75
- display: block
76
- object-fit: cover
77
- cursor: pointer
78
- margin-right: 10px
79
- margin-block-end: 10px
80
- ul
81
- list-style-type: none
82
- li
83
- color: $text-dark
84
- background-color: $mainColor
85
- padding: 5px 15px
86
- border-radius: 10px
87
- font-size: .7rem
88
- border: none
89
- cursor: pointer
90
- margin-bottom: 15px
91
- width: 200px
92
- @include noSelect
93
- label
94
- display: flex
95
- cursor: inherit
96
- width: 100%
97
- input
98
- &[type=color]
99
- cursor: pointer
100
- margin-left: auto
101
- width: 50px
102
- height: 20px
103
- border: 0
104
- border-radius: 5px
105
- &::-webkit-color-swatch-wrapper
106
- display: none !important
107
- &[type=file]
108
- display: none
109
- &:nth-child(1)
110
- position: relative
111
- &::after
112
- --bar-width: 2px
113
- content: ''
114
- width: 20px
115
- height: 15px
116
- display: block
117
- background: repeating-linear-gradient(180deg, $black, $black var(--bar-width), transparentize($black, 1) var(--bar-width), transparentize($black, 1) calc(var(--bar-width) * 3),)
118
- position: absolute
119
- right: 10px
120
- top: 50%
121
- transform: translateY(-50%)