@woosmap/ui 3.32.0 → 3.33.0

package/.storybook/preview.js

@@ -36,12 +36,12 @@ let isConsoleStyle = false;
 
 
 if (mode === 'prod') {
-  import('../src/styles/style-next-website.styl');
+  import('../src/styles/style-website.styl');
   import('../src/styles/style-stories.styl');
 } else {
  import('../src/styles/style-stories.styl').then((storiesStyl) => {
    import('../src/styles/style-console.styl').then((consoleStylLoaded) => {
-     import('../src/styles/style-next-website.styl').then((websiteStylLoaded) => {
+     import('../src/styles/style-website.styl').then((websiteStylLoaded) => {
       const storeGlobals = sessionStorage.getItem('@storybook/preview/store');
       const globalTheme = storeGlobals ? JSON.parse(storeGlobals).globals.theme : null;
       const defaultStyle = urlParams.get('theme')|| globalTheme || "Website theme";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@woosmap/ui",
-  "version": "3.32.0",
+  "version": "3.33.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/WebGeoServices/ui.git"
@@ -28,7 +28,7 @@
   "scripts": {
     "start": "yarn storybook:dev",
     "build": "rimraf dist && NODE_ENV=production babel src --out-dir dist --copy-files --no-copy-ignored --ignore '**/*.stories.js,**/*.test.js,**/*.styl' && yarn build-css",
-    "build-css": "stylus ./src/styles/style-next-website.styl -o dist && stylus ./src/styles/style-console.styl -o dist && stylus ./src/styles/style-stories.styl -o dist",
+    "build-css": "stylus ./src/styles/style-website.styl -o dist && stylus ./src/styles/style-console.styl -o dist && stylus ./src/styles/style-stories.styl -o dist",
     "test": "react-scripts test",
     "test:generate-output": "react-scripts test --json --outputFile=./.storybook/jest-test-results.json --silent",
     "prestorybook:dev": "clear && echo \"DOING FIRST TEST RUN\" && CI=true npm run test:generate-output",

package/src/styles/style-console.styl

@@ -9,12 +9,7 @@
 
 @import "./commons/__all.styl"
 @import "./commons/flags.styl"
-
 @import "./console/icon.styl"
-@import "./console/button.styl"
-@import "./console/input.styl"
-@import "./console/select.styl"
-@import "./console/tab.styl"
 
 //demos
 @import "./console/MerchantDemo.styl"
@@ -22,4 +17,10 @@
 
 
 // Style of all components
-@import "../components/**/*.styl"
+@import "../components/**/*.styl"
+
+// Console override
+@import "./console/button.styl"
+@import "./console/input.styl"
+@import "./console/select.styl"
+@import "./console/tab.styl"

package/src/styles/style-website.styl

@@ -10,16 +10,20 @@
 @import "./commons/__all.styl"
 @import "./commons/flags.styl"
 
+
+// Style of all components
+@import "../components/**/*.styl"
+
+
+//Website style override
+
+@import "./website/skeletonDemo.styl"
+@import "./website/MerchantDemo.styl"
+
 @import "./website/button.styl"
 @import "./website/input.styl"
 @import "./website/select.styl"
 @import "./website/tab.styl"
-
-//demos
-@import "./website/MerchantDemo.styl"
-@import "./website/skeletonDemo.styl"
-
-@import "./website/style.styl"
-
-// Style of all components
-@import "../components/**/*.styl"
+@import "./website/dropdown.styl"
+@import "./website/popover.styl"
+@import "./website/card.styl"

package/src/styles/website/MerchantDemo.styl

@@ -1,25 +1,35 @@
 .merchant
+	&__wrapper
+		trans()
+		display flex
+		justify-content center
+		align-items center
+		height 100%
+		width 100%
+		zoom .9
+		padding 2rem
+		background-color #d5eaff
 	&__mobilewrapper
+		trans()
 		position relative
-		height 58.2rem
-		overflow hidden
-		flex-grow 1
+		margin 3rem
 	&__mobilecontainer
 		position relative
-		height 100%
+		height 51.9rem
 		width 28rem
 		margin auto
+		box-shadow 0 0 .4rem .1rem rgba($secondary, .1)
+		br(1)
 		&__title
 			text-align center
-			color $light
-			font-size 1.7rem
+			font-size 1.2rem
 			font-weight 600
-			margin 1rem 0 2rem 0
+			margin 0 0 1rem 0
 	&__mobile
+		br(1)
+		font-size 1.3rem
 		width 100%
-		height 52.9rem
 		background-color $light
-		br(2)
 		overflow hidden
 		&--dirty
 		&--details--dirty
@@ -30,63 +40,69 @@
 			.merchant__mobile__header
 				background #4F70FF
 		&--details
-			height 52.9rem
+			position relative
 		&__header
-			padding 1.6rem
+			padding 1.1rem
 			color #fff
 			text-transform uppercase
-			font-size 1.7rem
 			font-weight 600
 			&__nav
 			&__icons
 				flexSpread()
 			&__icons
 				img
-					max-height 1.2rem
+					max-height .8rem
 			&__nav
-				margin-top 2rem
+				font-weight 700
+				margin-top 1.4rem
 				position relative
 				.merchant__mobile--details &
 				.merchant__mobile--details--dirty &
 					flexAxis()
 				&__avatar
-					max-width 3.2rem
+					max-width 2.4rem
 				&__back
-					max-width 1.4rem
+					max-width 1rem
 					opacity 0
 					.merchant__mobile--details &
 					.merchant__mobile--details--dirty &
 						opacity 1
 				&__button
+					sq(3)
 					position absolute
 					background-color transparent
-					left -1.2rem
+					left -.6rem
+					padding 0
+					display flex
+					align-items center
+					justify-content center
+					flex-shrink 0
 					&:hover
 						background-color $dark30
 
 		&__section
-			font-size 1.5rem
 			padding 1.4rem 2rem
-			height 100%
-			overflow auto
+			background-color #f5f5f5
+			border-radius 0 0 1rem 1rem
+			height 45rem
+			.merchant__mobile--clean  &
+				background-color #f3f7ff
 			.merchant__mobile--details &
+				background-color $light
 				padding 0
 			.merchant__mobile--details--dirty &
-				border .1rem solid $dark20
-				background-color $dark3
-				margin 2rem
-				br(1)
-				height auto
-				overflow hidden
+				background-color $light
+				padding 2rem
 			&__map
 				overflow hidden
 				height 20rem
 			&__no-map
 				height 6rem
 			&__date
-				color #C8C8C7
-				font-size 1.4rem
-				margin-bottom 1.6rem
+				color #b7b7b7
+				margin-bottom .6rem
+				.merchant__mobile--clean &
+					color #8697b1
 				.merchant__mobile--details &
 				.merchant__mobile--details--dirty &
 					text-align center
@@ -95,16 +111,19 @@
 					margin 0 0 2rem 0
 			&__transaction
 				flexSpread()
-				br(1)
+				br(.6)
 				trans()
+				background-color $light
+				font-size 1.3rem
 				cursor pointer
-				height 6.2rem
-				padding .8rem
-				box-shadow 0 0 1rem $dark10
+				height 4.8rem
+				padding 0 .8rem
+				box-shadow 0 0 .3rem .1rem $dark10
 				width 100%
-				margin-bottom 1.2rem
+				margin-bottom .8rem
 				&:hover
 					background-color #666767
+					transform translateX(.5rem)
 					.merchant__mobile--clean &
 						background-color #4F70FF
 					.merchant__mobile__section__transaction
@@ -135,7 +154,7 @@
 						color#999
 						text-align center
 					&__logo
-						sq(4.6)
+						sq(3)
 						br(50)
 						position relative
 						margin-right 1.2rem
@@ -146,7 +165,7 @@
 						img
 							ellipsis()
 							br(50)
-							sq(4.6)
+							sq(3)
 							background #fff
 							border .1rem solid #f1f1f1
 							box-shadow 0 0 .6rem $dark10
@@ -161,15 +180,19 @@
 					&__name
 						ellipsis()
 						font-weight 500
+						line-height 1.6rem
+						margin-bottom .3rem
 						.merchant__mobile--details &
 						.merchant__mobile--details--dirty &
 							text-align center
 							font-size 2rem
 					&__date
-						color #7E7F7F
+						color #a1a1a1
 						font-size 1.2rem
+						line-height 1.4rem
 				&__price
-					font-weight 600
+					font-weight 700
+					font-size 1.5rem
 					.merchant__mobile--details &
 					.merchant__mobile--details--dirty &
 						margin-top 1rem
@@ -180,24 +203,20 @@
 					.merchant__mobile--details--dirty &
 						font-size 3.5rem
 
-@media screen and (max-width 660px)
+@media screen and (max-width 760px)
 	.merchant
 		&__mobilewrapper
-			margin-right 0 !important
-@media screen and (max-width 370px)
+			margin 0 1rem
+@media screen and (max-width 660px)
 	.merchant
-		&__mobilewrapper
-			width 100%
-		&__mobilecontainer
-			width 100%
-			&__title
-				color #454545
-		&__mobile__section__transaction
-			font-size 85%
-@media screen and (max-width 350px)
+		&__wrapper
+			zoom .7
+@media screen and (max-width 469px)
+	.merchant
+		&__wrapper
+			zoom .6
+@media screen and (max-width 400px)
 	.merchant
-		&__mobile__section__transaction__info__logo
-		&__mobile__section__transaction__info__logo img
-			sq(3.6)
-		
+		&__wrapper
+			zoom .45