@woosmap/ui 2.57.0 → 3.3.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 (14) hide show
  1. package/.storybook/preview.js +2 -2
  2. package/package.json +2 -2
  3. package/src/components/Demo/SkeletonDemo.js +17 -87
  4. package/src/styles/next-website/button.styl +343 -0
  5. package/src/styles/next-website/colors.styl +279 -0
  6. package/src/styles/next-website/demo.styl +65 -0
  7. package/src/styles/next-website/dropdown.styl +82 -0
  8. package/src/styles/next-website/font.styl +1 -0
  9. package/src/styles/next-website/input.styl +136 -0
  10. package/src/styles/next-website/mixins.styl +126 -0
  11. package/src/styles/next-website/select.styl +111 -0
  12. package/src/styles/next-website/tab.styl +41 -0
  13. package/src/styles/next-website/variables.styl +110 -0
  14. package/src/styles/style-next-website.styl +12 -12
package/src/styles/next-website/select.styl ADDED
@@ -0,0 +1,111 @@
1
+ .asyncselect__control--is-focused .asyncselect__single-value
2
+ display none
3
+
4
+ .select
5
+ line-height initial
6
+ width 100%
7
+ .select
8
+ .asyncselect
9
+ &__label
10
+ margin-bottom 1rem
11
+ display block
12
+ &__error
13
+ display block
14
+ margin-top 1rem
15
+ color $error
16
+ &__control
17
+ min-width $inputMinWidth
18
+ min-height $inputHeight !important
19
+ border-radius .6rem !important
20
+ &:not(.select__control--is-focused):not(.asyncselect__control--is-focused)
21
+ border-color $inputBorderColor !important
22
+ .error > &
23
+ border-color $error !important
24
+ &--is-focused
25
+ border-color $secondary !important
26
+ box-shadow none !important
27
+ .select__indicator
28
+ .asyncselect__indicator
29
+ svg
30
+ fill $secondary
31
+ &__value-container
32
+ padding-left 1rem !important
33
+ &__single-value
34
+ color $secondary !important
35
+ &__indicator
36
+ padding-left 1rem !important
37
+ padding-right 1rem !important
38
+ &-separator
39
+ background-color $secondary-medium25
40
+ svg
41
+ fill $secondary-medium25
42
+ &__placeholder
43
+ white-space nowrap
44
+ color $secondary-medium60
45
+ &__option
46
+ &__multi-value
47
+ .flag
48
+ margin 0 0 0 .6rem
49
+ width 2.2rem
50
+ height 1.5rem
51
+ &__option
52
+ display flex !important
53
+ align-items center
54
+ color $secondary !important
55
+ mbi()
56
+ &--is-disabled
57
+ color $secondary40 !important
58
+ &--is-selected
59
+ color $light !important
60
+ background-color $primary !important
61
+ &.select__option--is-focused
62
+ color $light !important
63
+ background-color $primary !important
64
+ &--is-focused:not(.select__option--is-selected)
65
+ background-color $primary15 !important
66
+ color $secondary !important
67
+ &__multi-value
68
+ background-color $primary !important
69
+ border-radius .4rem !important
70
+ flexMiddle()
71
+ &--is-disabled
72
+ opacity .6
73
+ &__label
74
+ &__remove
75
+ border-radius .4rem !important
76
+ background-color transparent !important
77
+ padding .5rem !important
78
+ &__label
79
+ font-size $inputFontSize - .2 !important
80
+ padding-right .2rem !important
81
+ color $light !important
82
+ &__remove
83
+ cursor pointer
84
+ svg
85
+ fill $light !important
86
+ &--small
87
+ .select
88
+ .asyncselect
89
+ &__control
90
+ min-width 18rem
91
+ min-height $inputHeightSmall !important
92
+ font-size $inputFontSizeSmall !important
93
+ &__indicator
94
+ padding .2rem .6rem !important
95
+ &__option
96
+ &__multi-value
97
+ background-color $light
98
+ font-size $inputFontSizeSmall !important
99
+ .flag
100
+ margin 0 0 0 .6rem
101
+ width 2.2rem
102
+ height 1.5rem
103
+ &__label
104
+ font-size $inputFontSizeSmall !important
105
+ padding 0 0 0 1rem !important
106
+ line-height 1.2
107
+ &__option
108
+ .flag
109
+ margin 0 1rem 0 0
110
+ &__value-container
111
+ padding 0 0 0 .7rem !important
package/src/styles/next-website/tab.styl ADDED
@@ -0,0 +1,41 @@
1
+ $tabPadding = 2rem
2
+ .tab
3
+ height 100%
4
+ pre
5
+ code
6
+ margin 0 !important
7
+ padding 0 !important
8
+ background-color transparent !important
9
+ width 100%
10
+ &__header
11
+ background linear-gradient(90deg, $tabHeader 77%, $tabHeader2 100%)
12
+ padding 0 $tabPadding
13
+ flex-shrink 0
14
+ flexSpread()
15
+ &__buttons
16
+ flexMiddle()
17
+ mbi(3)
18
+ fullw()
19
+ position relative
20
+ li
21
+ min-width 0
22
+ &__content
23
+ background-color $tabContent
24
+ display none
25
+ padding $tabPadding + .5
26
+ line-height 1.2
27
+ height 30.6rem
28
+ max-height 30.6rem
29
+ &.active
30
+ display flex
31
+ height 100%
32
+ @media screen and (max-width 670px)
33
+ .tab
34
+ &__header
35
+ padding 0 1.2rem
36
+ &__buttons
37
+ mbi(1)
38
+ .btn
39
+ font-size 70%
40
+ &__content
41
+ padding $tabPadding - .5
package/src/styles/next-website/variables.styl ADDED
@@ -0,0 +1,110 @@
1
+ $fontFamily = "Poppins", arial, sans-serif
2
+ $fontSize = 1.8rem
3
+ $lineHeight = $fontSize * 2 - .8
4
+ $fontSizeSmall = $fontSize - .2
5
+ $fontSizeMini = $fontSize - .4
6
+ $fontSizeNano = $fontSize - .6
7
+ $fontWeight = 400
8
+ $fontSizeHeader = 1.3rem
9
+ $fontSizeFooter = 1.6rem
10
+
11
+
12
+ $title = 4.6rem
13
+ $title2 = 4rem
14
+ $title3 = 3.6rem
15
+ $title4 = 3rem
16
+ $title5 = 2.6rem
17
+ $title6 = 2rem
18
+
19
+ $borderRadius = .6rem
20
+
21
+
22
+ // Layout
23
+ $wrapperWidth = 125rem
24
+ $headerHeight = 6.7rem
25
+ $headerBannerHeight = 5.2rem
26
+ $sectionPadding = 18.5rem
27
+ $topRainbowHeight = 3.8rem
28
+ $gutter2c = 3rem
29
+ $quoteIcon = 46rem
30
+ $quoteIconPosition = ( - $quoteIcon / 2 - $sectionPadding - 2 )
31
+
32
+ $col2 = 58rem
33
+ $col3 = 31.5rem
34
+ $col4 = 22rem
35
+
36
+ // card articles
37
+ $cardHeaderHeight = 21rem
38
+ $cardFontSize = 1.6rem
39
+ $cardTitle = 1.8rem
40
+ $cardTitleLineHeight = 2.6rem
41
+ $cardLineHeight = $cardFontSize * 2 - 1
42
+ $cardPadding = 2rem
43
+
44
+ // Buttons & Inputs
45
+
46
+ $padding = 2rem
47
+ $contentPadding = 2.8rem
48
+
49
+
50
+
51
+ $sidebarButtonSize = 5rem
52
+
53
+ $buttonHeight = 3.8rem
54
+ $buttonPadding = 0 $padding 0 $padding
55
+ $buttonFontSize = $fontSize
56
+ $buttonLineHeight = $fontSize * 2
57
+
58
+ $buttonHeightSmall = $buttonHeight - .6
59
+ $buttonPaddingSmall = 0 $padding - .1 0 $padding - .1
60
+ $buttonFontSizeSmall = $fontSize - .1
61
+ $buttonLineHeightSmall = $buttonFontSizeSmall * 2
62
+
63
+ $buttonHeightMini = $buttonHeight - 1
64
+ $buttonPaddingMini = 0 $padding - .4 0 $padding - .4
65
+ $buttonFontSizeMini = $fontSizeSmall
66
+ $buttonLineHeightMini = $buttonFontSizeMini * 2
67
+
68
+ $buttonHeightNano = $buttonHeight - 1.4
69
+ $buttonPaddingNano = 0 $padding - .4 0 $padding - .4
70
+ $buttonFontSizeNano = $fontSize - .3
71
+ $buttonLineHeightNano = $buttonFontSizeNano * 2
72
+
73
+ $buttonHeightLarge = $buttonHeight + 1.2
74
+ $buttonPaddingLarge = 0 $padding + .6 0 $padding + .6
75
+ $buttonFontSizeLarge = $fontSize - .2
76
+ $buttonLineHeightLarge = $buttonFontSizeLarge * 2
77
+
78
+
79
+ $inputMinWidth = 16rem
80
+
81
+ $inputHeight = $buttonHeight
82
+ $inputPadding = 0 $padding .2rem $padding
83
+ $inputFontSize = $fontSize
84
+ $inputLineHeight = $buttonLineHeight
85
+
86
+ $inputHeightSmall = $buttonHeightSmall
87
+ $inputPaddingSmall = 0 $padding - .1 .2rem $padding - .1
88
+ $inputFontSizeSmall = $buttonFontSizeSmall
89
+ $inputLineHeightSmall = $buttonLineHeightSmall
90
+
91
+ $inputHeightLarge = $buttonHeightLarge
92
+ $inputPaddingLarge = 0 $padding + .4 .2rem $padding + .4
93
+ $inputFontSizeLarge = $buttonFontSizeLarge
94
+ $inputLineHeightLarge = $buttonLineHeightLarge
95
+
96
+ // tabs
97
+
98
+ $tabBtnHeight = $buttonHeight
99
+ $tabBtnPillHeight = $buttonHeight
100
+
101
+
102
+ // panel
103
+ $panelWidth = 36rem
104
+ $panelpadding = 2.4rem
105
+ $contentHeaderHeight = 7.8rem
106
+ $panelHeaderHeight = $contentHeaderHeight
107
+
108
+ // modal
109
+ $modalWidth = 70rem
110
+ $modalPadding = 2.4rem
package/src/styles/style-next-website.styl CHANGED
@@ -2,24 +2,24 @@
2
2
  @import "./commons/reset.styl"
3
3
 
4
4
  // Specicif style - Do not change order
5
- // @import "./next-website/mixins.styl"
6
- // @import "./next-website/fonts.styl"
7
- // @import "./next-website/variables.styl"
8
- // @import "./next-website/colors.styl"
5
+ @import "./next-website/font.styl"
6
+ @import "./next-website/variables.styl"
7
+ @import "./next-website/colors.styl"
9
8
 
10
9
  @import "./commons/__all.styl"
11
10
  @import "./commons/flags.styl"
12
11
 
13
- // @import "./next-website/button.styl"
14
- // @import "./next-website/input.styl"
15
- // @import "./next-website/select.styl"
16
- // @import "./next-website/tab.sty l"
12
+ @import "./next-website/mixins.styl"
17
13
 
18
- //demos
19
- // @import "./next-website/MerchantDemo.styl"
20
- // @import "./next-website/skeletonDemo.styl"
14
+ @import "./next-website/button.styl"
15
+ @import "./next-website/input.styl"
16
+ @import "./next-website/select.styl"
17
+ @import "./next-website/tab.styl"
21
18
 
22
- // @import "./next-website/style.styl"
23
19
 
24
20
  // Style of all components
25
21
  @import "../components/**/*.styl"
22
+
23
+ // Additional style for UI components
24
+ @import "./next-website/demo.styl"
25
+ @import "./next-website/dropdown.styl"