@woosmap/ui 3.30.0 → 3.34.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 (31) hide show
  1. package/.storybook/preview.js +2 -2
  2. package/package.json +2 -2
  3. package/src/components/Dropdown/Dropdown.js +1 -1
  4. package/src/styles/style-console.styl +7 -6
  5. package/src/styles/style-website.styl +13 -9
  6. package/src/styles/website/MerchantDemo.styl +73 -54
  7. package/src/styles/website/button.styl +390 -140
  8. package/src/styles/website/card.styl +302 -0
  9. package/src/styles/website/colors.styl +279 -46
  10. package/src/styles/website/dropdown.styl +123 -0
  11. package/src/styles/website/fonts.styl +1 -1
  12. package/src/styles/website/input.styl +7 -7
  13. package/src/styles/website/mixins.styl +192 -4
  14. package/src/styles/website/popover.styl +8 -0
  15. package/src/styles/website/select.styl +47 -25
  16. package/src/styles/website/skeletondemo.styl +246 -521
  17. package/src/styles/website/tab.styl +5 -2
  18. package/src/styles/website/variables.styl +111 -28
  19. package/src/styles/next-website/MerchantDemo.styl +0 -222
  20. package/src/styles/next-website/button.styl +0 -416
  21. package/src/styles/next-website/colors.styl +0 -287
  22. package/src/styles/next-website/demo.styl +0 -264
  23. package/src/styles/next-website/dropdown.styl +0 -82
  24. package/src/styles/next-website/font.styl +0 -1
  25. package/src/styles/next-website/input.styl +0 -138
  26. package/src/styles/next-website/mixins.styl +0 -128
  27. package/src/styles/next-website/select.styl +0 -113
  28. package/src/styles/next-website/tab.styl +0 -41
  29. package/src/styles/next-website/variables.styl +0 -120
  30. package/src/styles/style-next-website.styl +0 -26
  31. package/src/styles/website/style.styl +0 -2
package/src/styles/website/tab.styl CHANGED
@@ -11,9 +11,12 @@ $tabPadding = 2rem
11
11
  background linear-gradient(90deg, $tabHeader 77%, $tabHeader2 100%)
12
12
  padding 0 $tabPadding
13
13
  flex-shrink 0
14
- flexSpread()
14
+ display flex
15
+ align-items center
16
+ justify-content space-between
15
17
  &__buttons
16
- flexMiddle()
18
+ display flex
19
+ align-items center
17
20
  mbi(3)
18
21
  fullw()
19
22
  position relative
package/src/styles/website/variables.styl CHANGED
@@ -1,51 +1,134 @@
1
- // Default font
2
- $fontFamily = 'Open Sans', arial, sans-serif
3
- $fontSize = 1.7rem
1
+ // Layout
2
+ $wrapperWidth = 125rem
3
+ $wrapperReducedWidth = 96rem
4
+ $headerHeight = 6.7rem
5
+ $headerBannerHeight = 5.2rem
6
+ $sectionPadding = 18.5rem
7
+ $topRainbowHeight = 3.8rem
8
+ $gutter2c = 3rem
9
+ $quoteIcon = 44rem
10
+
11
+
12
+ $fontFamily = "Poppins", arial, sans-serif
13
+ $fontFamily2 = 'Roboto Mono', monospace
14
+ $fontSize = 1.8rem
15
+ $lineHeight = $fontSize * 2 - .8
16
+ $fontSizeSmall = $fontSize - .2
17
+ $fontSizeMini = $fontSize - .4
18
+ $fontSizeNano = $fontSize - .6
4
19
  $fontWeight = 400
20
+ $fontSizeHeader = 1.3rem
21
+ $fontSizeFooter = 1.6rem
22
+
23
+
24
+ $title = 4.6rem
25
+ $title2 = 4rem
26
+ $title3 = 3.6rem
27
+ $title4 = 3rem
28
+ $title5 = 2.6rem
29
+ $title6 = 2rem
30
+
31
+ $borderRadius = .6rem
32
+
33
+ //new version of demos
34
+ $demofilterWidth = 27.4rem
35
+ $fontSizeDemo = 1.3rem
36
+ $demoPadding = 1.6rem
37
+ $demoBr = .3rem
38
+ $inputFontSizeDemo = 1.1rem
39
+ $inputDemoHeight = 3rem
40
+ $footerDemoHeight = 4rem
41
+
42
+
43
+
44
+ $col2 = 58rem
45
+ $col3 = 31.5rem
46
+ $col4 = 22rem
47
+
48
+ // card articles
49
+ $cardHeaderHeight = 21rem
50
+ $cardFontSize = 1.6rem
51
+ $cardTitle = 1.8rem
52
+ $cardTitleLineHeight = 2.6rem
53
+ $cardLineHeight = $cardFontSize * 2 - 1
54
+ $cardPadding = 2rem
55
+
56
+ // card pricing
57
+ $pricingCardWidth = 30.2rem
58
+ $pricingCardpadding = 3.4rem
59
+ $pricingCardHeaderHeight = 6.2rem
60
+ $pricingCardCtaHeight = 5.2rem
61
+ $pricingCardTitleSize = $title6
62
+ $pricingCardAmountSize = $title2 * 2
63
+ $pricingCardUnitSize = $title6
64
+ $pricingCardPeriodSize = $fontSizeSmall
65
+ $pricingCardPriceSize = $title2
66
+ $pricingCardPriceUnitSize = $fontSizeSmall
5
67
 
6
- // Title size
7
- $title = 4.8rem
8
- $title2 = 3.4rem
9
- $title3 = 1.8rem
10
-
11
- $padding = 1.4rem
12
68
  // Buttons & Inputs
13
69
 
14
- $buttonPadding = $padding
70
+ $padding = 2rem
71
+ $contentPadding = 2.8rem
72
+
73
+
15
74
 
16
- $buttonHeight = 4.4rem
75
+ $sidebarButtonSize = 5rem
76
+
77
+ $buttonHeight = 3.8rem
78
+ $buttonPadding = 0 $padding 0 $padding
17
79
  $buttonFontSize = $fontSize
80
+ $buttonLineHeight = $fontSize * 2
18
81
 
19
- $buttonHeightSmall = $buttonHeight - .8
20
- $buttonFontSizeSmall = 1.4rem
82
+ $buttonHeightSmall = $buttonHeight - .6
83
+ $buttonPaddingSmall = 0 $padding - .1 0 $padding - .1
84
+ $buttonFontSizeSmall = $fontSize - .1
85
+ $buttonLineHeightSmall = $buttonFontSizeSmall * 2
21
86
 
22
87
  $buttonHeightMini = $buttonHeight - 1
23
- $buttonFontSizeMini = 1.2rem
88
+ $buttonPaddingMini = 0 $padding - .4 0 $padding - .4
89
+ $buttonFontSizeMini = $fontSizeSmall
90
+ $buttonLineHeightMini = $buttonFontSizeMini * 2
24
91
 
25
- $buttonHeightNano = $buttonHeight - 1.2
26
- $buttonFontSizeNano = 1.1rem
92
+ $buttonHeightNano = $buttonHeight - 1.4
93
+ $buttonPaddingNano = 0 $padding - .4 0 $padding - .4
94
+ $buttonFontSizeNano = $fontSize - .3
95
+ $buttonLineHeightNano = $buttonFontSizeNano * 2
27
96
 
28
- $buttonHeightLarge = $formItemsHeight + 0.8
29
- $buttonFontSizeLarge = 2rem
97
+ $buttonHeightLarge = $buttonHeight + 1.2
98
+ $buttonPaddingLarge = 0 $padding + .6 0 $padding + .6
99
+ $buttonFontSizeLarge = $fontSize - .2
100
+ $buttonLineHeightLarge = $buttonFontSizeLarge * 2
30
101
 
31
102
 
103
+ $inputMinWidth = 16rem
32
104
 
33
105
  $inputHeight = $buttonHeight
34
- $inputFontSize = $buttonFontSize
106
+ $inputPadding = 0 1rem .2rem 1rem
107
+ $inputFontSize = $fontSize
108
+ $inputLineHeight = $buttonLineHeight
35
109
 
36
110
  $inputHeightSmall = $buttonHeightSmall
111
+ $inputPaddingSmall = 0 $padding - .1 .2rem $padding - .1
37
112
  $inputFontSizeSmall = $buttonFontSizeSmall
38
-
39
- $inputHeightMini = $buttonHeightMini
40
- $inputFontSizeMini = $buttonFontSizeMini
41
-
42
- $inputHeightNano = $buttonHeightNano
43
- $inputFontSizeNano = $buttonFontSizeNano
113
+ $inputLineHeightSmall = $buttonLineHeightSmall
44
114
 
45
115
  $inputHeightLarge = $buttonHeightLarge
116
+ $inputPaddingLarge = 0 $padding + .4 .2rem $padding + .4
46
117
  $inputFontSizeLarge = $buttonFontSizeLarge
118
+ $inputLineHeightLarge = $buttonLineHeightLarge
119
+
120
+ // tabs
121
+
122
+ $tabBtnHeight = $buttonHeight
123
+ $tabBtnPillHeight = $buttonHeight
124
+
47
125
 
48
- $inputPadding = $padding
49
- $inputMinWidth = 22rem
126
+ // panel
127
+ $panelWidth = 36rem
128
+ $panelpadding = 2.4rem
129
+ $contentHeaderHeight = 7.8rem
130
+ $panelHeaderHeight = $contentHeaderHeight
50
131
 
51
- $tabBtnHeight = $buttonHeight
132
+ // modal
133
+ $modalWidth = 70rem
134
+ $modalPadding = 2.4rem
package/src/styles/next-website/MerchantDemo.styl DELETED
@@ -1,222 +0,0 @@
1
- .merchant
2
- &__wrapper
3
- trans()
4
- display flex
5
- justify-content center
6
- align-items center
7
- height 100%
8
- width 100%
9
- zoom .9
10
- padding 2rem
11
- background-color #d5eaff
12
- &__mobilewrapper
13
- trans()
14
- position relative
15
- margin 3rem
16
- &__mobilecontainer
17
- position relative
18
- height 51.9rem
19
- width 28rem
20
- margin auto
21
- box-shadow 0 0 .4rem .1rem rgba($secondary, .1)
22
- br(1)
23
- &__title
24
- text-align center
25
- font-size 1.2rem
26
- font-weight 600
27
- margin 0 0 1rem 0
28
- &__mobile
29
- br(1)
30
- font-size 1.3rem
31
- width 100%
32
- background-color $light
33
- overflow hidden
34
- &--dirty
35
- &--details--dirty
36
- .merchant__mobile__header
37
- background #666767
38
- &--clean
39
- &--details
40
- .merchant__mobile__header
41
- background #4F70FF
42
- &--details
43
- position relative
44
- &__header
45
- padding 1.1rem
46
- color #fff
47
- text-transform uppercase
48
- font-weight 600
49
- &__nav
50
- &__icons
51
- flexSpread()
52
- &__icons
53
- img
54
- max-height .8rem
55
- &__nav
56
- font-weight 700
57
- margin-top 1.4rem
58
- position relative
59
- .merchant__mobile--details &
60
- .merchant__mobile--details--dirty &
61
- flexAxis()
62
- &__avatar
63
- max-width 2.4rem
64
- &__back
65
- max-width 1rem
66
- opacity 0
67
- .merchant__mobile--details &
68
- .merchant__mobile--details--dirty &
69
- opacity 1
70
- &__button
71
- sq(3)
72
- position absolute
73
- background-color transparent
74
- left -.6rem
75
- padding 0
76
- display flex
77
- align-items center
78
- justify-content center
79
- flex-shrink 0
80
- &:hover
81
- background-color $dark30
82
-
83
- &__section
84
- padding 1.4rem 2rem
85
- background-color #f5f5f5
86
- border-radius 0 0 1rem 1rem
87
- height 45rem
88
- .merchant__mobile--clean &
89
- background-color #f3f7ff
90
- .merchant__mobile--details &
91
- background-color $light
92
- padding 0
93
- .merchant__mobile--details--dirty &
94
- background-color $light
95
- padding 2rem
96
- &__map
97
- overflow hidden
98
- height 20rem
99
- &__no-map
100
- height 6rem
101
- &__date
102
- color #b7b7b7
103
- margin-bottom .6rem
104
- .merchant__mobile--clean &
105
- color #8697b1
106
- .merchant__mobile--details &
107
- .merchant__mobile--details--dirty &
108
- text-align center
109
- margin .4rem 0 0 0
110
- .merchant__mobile--details--dirty &
111
- margin 0 0 2rem 0
112
- &__transaction
113
- flexSpread()
114
- br(.6)
115
- trans()
116
- background-color $light
117
- font-size 1.3rem
118
- cursor pointer
119
- height 4.8rem
120
- padding 0 .8rem
121
- box-shadow 0 0 .3rem .1rem $dark10
122
- width 100%
123
- margin-bottom .8rem
124
- &:hover
125
- background-color #666767
126
- transform translateX(.5rem)
127
- .merchant__mobile--clean &
128
- background-color #4F70FF
129
- .merchant__mobile__section__transaction
130
- &__link
131
- color $light
132
- &__info
133
- &__name
134
- color $light
135
- &__date
136
- color $light50
137
- &__price
138
- color $light
139
- &__link
140
- color #999
141
- margin 0 .6rem 0 1.4rem
142
- img
143
- max-width .7rem
144
- &__info
145
- width 100%
146
- min-width 0
147
- margin-right 1.2rem
148
- .merchant__mobile--clean &
149
- flexMiddle()
150
- .merchant__mobile--details &
151
- margin 0
152
- &__address
153
- padding 1rem 2rem
154
- color#999
155
- text-align center
156
- &__logo
157
- sq(3)
158
- br(50)
159
- position relative
160
- margin-right 1.2rem
161
- flex-shrink 0
162
- .merchant__mobile--details &
163
- width 100%
164
- height 5rem
165
- img
166
- ellipsis()
167
- br(50)
168
- sq(3)
169
- background #fff
170
- border .1rem solid #f1f1f1
171
- box-shadow 0 0 .6rem $dark10
172
-
173
- .merchant__mobile--details &
174
- sq(8)
175
- position absolute
176
- left calc(50% - 4rem)
177
- top -4rem
178
- box-shadow 0 0 1rem $dark25
179
- border .3rem solid #fff
180
- &__name
181
- ellipsis()
182
- font-weight 500
183
- line-height 1.6rem
184
- margin-bottom .3rem
185
- .merchant__mobile--details &
186
- .merchant__mobile--details--dirty &
187
- text-align center
188
- font-size 2rem
189
- &__date
190
- color #a1a1a1
191
- font-size 1.2rem
192
- line-height 1.4rem
193
- &__price
194
- font-weight 700
195
- font-size 1.5rem
196
- .merchant__mobile--details &
197
- .merchant__mobile--details--dirty &
198
- margin-top 1rem
199
- font-size 5rem
200
- line-height 1
201
- text-align center
202
- font-weight 400
203
- .merchant__mobile--details--dirty &
204
- font-size 3.5rem
205
-
206
- @media screen and (max-width 760px)
207
- .merchant
208
- &__mobilewrapper
209
- margin 0 1rem
210
- @media screen and (max-width 660px)
211
- .merchant
212
- &__wrapper
213
- zoom .7
214
- @media screen and (max-width 469px)
215
- .merchant
216
- &__wrapper
217
- zoom .6
218
- @media screen and (max-width 400px)
219
- .merchant
220
- &__wrapper
221
- zoom .45
222
-