DropDownMenu: update widget style according to guideline

[Issue] #1556
[Problem] Dropdown list looks different then in guideline
[Solution]
 - css styles have been updated

Signed-off-by: Tomasz Lukawski <t.lukawski@samsung.com>

src/css/profile/mobile/base.less

@@ -88,7 +88,6 @@
 @toast-text-color: @_white;
 
 @content-area-line-color: #d6d6d6;
-@dropdown-list-box-shadow-color: fade(@_black, 35%);
 @calendar-weekend-day-color: #c95151;
 @progress-circle-second-color: #06b485;
 

src/css/profile/mobile/common/dropdownmenu.less

@@ -1,5 +1,3 @@
-@dropdown-options-margin: 3 * @px_base;
-
 .ui-dropdownmenu-overlay {
 	opacity: 0;
 	position: absolute;
@@ -55,7 +53,7 @@
 		vertical-align: middle;
 		position: relative;
 		height: 100%;
-		line-height: 120 * @unit_base;
+		line-height: 60 * @px_base;
 		white-space: nowrap;
 		padding: 0 26 * @px_base 0 16 * @px_base;
 		overflow: hidden;
@@ -66,7 +64,7 @@
 		&::after {
 			content: "";
 			position: absolute;
-			.calc-width(~"100% - " (64 * @unit_base));
+			.calc-width(~"100% - " (32 * @px_base));
 			height: 1 * @px_base;
 			bottom: 9 * @px_base;
 			right: 16 * @px_base;
@@ -161,19 +159,19 @@
 	}
 }
 
-@-webkit-keyframes open-to-bottom {
+@keyframes open-to-bottom {
 	.open-to-bottom();
 }
 
-@-webkit-keyframes open-to-top {
+@keyframes open-to-top {
 	.open-to-top();
 }
 
-@-webkit-keyframes close-to-bottom {
+@keyframes close-to-bottom {
 	.close-to-bottom();
 }
 
-@-webkit-keyframes close-to-top {
+@keyframes close-to-top {
 	.close-to-top();
 }
 
@@ -186,11 +184,12 @@
 	z-index: 1201;
 	min-width: 168px;
 	max-width: 100vw;
-	padding: 3 * @px_base;
+	padding: 5 * @px_base;
+	margin-top: -5.5 * @px_base;
 
 	&.ui-dropdownmenu-options-vertical-margins {
-		margin-top: @dropdown-options-margin;
-		margin-bottom: @dropdown-options-margin;
+		margin-top: 0.5 * @px_base;
+		margin-bottom: 4.5 * @px_base;
 	}
 	&.ui-dropdownmenu-active {
 		visibility: visible;
@@ -214,11 +213,11 @@
 		list-style: none;
 		padding: 0;
 		margin: 0;
-		max-height: calc(~"100vh - "2 * @dropdown-options-margin);
+		max-height: calc(~"100vh - "2 * 5 * @px_base);
 		overflow-y: auto;
 		background-color: var(--dropdown-menu-options-background);
 		border-radius: 26 * @px_base;
-		box-shadow: 0 0 3 * @px_base 0 @dropdown-list-box-shadow-color;
+		box-shadow: 0 2.5 * @px_base 8 * @px_base 0 var(--dropdown-shadow-color-1), 0 0 2.5 * @px_base 0 var(--dropdown-shadow-color-2);
 		border: var(--dropdown-menu-options-border);
 		&:focus {
 			outline: none;
@@ -238,7 +237,7 @@
 				margin-right: 24 * @px_base;
 				content: '';
 				position: absolute;
-				mask-image: url('images/1_App_bar/tw_ic_ab_back_mtrl.svg');
+				mask-image: url('images/13_View_controls/tw_dropdown_ic_check.svg');
 				mask-size: 100%, 0;
 				mask-position: center;
 				mask-repeat: no-repeat;

src/css/profile/mobile/common/oneui-common.less

@@ -26,6 +26,9 @@
     --popup-scroll-divider-color: @popup-scroll-divider-color;
     --icon-color: @icon-color; // dropdown menu
 
+    --dropdown-shadow-color-1: @dropdown-list-box-shadow-color-1;
+    --dropdown-shadow-color-2: @dropdown-list-box-shadow-color-2;
+
     --appbar-main-text-color: @appbar-main-text-color;
     --appbar-subtitle-color: @appbar-sub-title-color;
     --appbar-miltiline-title-color: @appbar-multiline-title-color;

src/css/profile/mobile/themes/dark.variables.less

@@ -23,6 +23,9 @@
     @more-options-pressed-color: @_white;
     @more-options-pressed-opacity: 20%;
 
+    @dropdown-list-box-shadow-color-1: fade(@_black, 35%);
+    @dropdown-list-box-shadow-color-2: fade(@_black, 10%);
+
     @appbar-main-text-color: @color-white;
     @appbar-sub-title-color: #9c9c9c;
     @appbar-multiline-title-color: #e5e5e5;

src/css/profile/mobile/themes/light.variables.less

@@ -23,6 +23,9 @@
     @more-options-pressed-color: @_black;
     @more-options-pressed-opacity: 10%;
 
+    @dropdown-list-box-shadow-color-1: fade(@_black, 15%);
+    @dropdown-list-box-shadow-color-2: fade(@_black, 4%);
+
     @appbar-main-text-color: @text-color;
     @appbar-sub-title-color: #636363;
     @appbar-multiline-title-color: @text-color;

src/js/profile/mobile/widget/DropdownMenu.js

@@ -1026,10 +1026,13 @@
 					optionHeight = ui.elOptionContainer.offsetHeight,
 					listItemWidthOffsets = [].slice.call(ui.elOptionContainer.children).map(mapItemWidth),
 					optionContainerStyle = window.getComputedStyle(ui.elOptionContainer),
+					wrapperStyle = window.getComputedStyle(ui.elOptionWrapper),
 					biggestListItemWidth = Math.max.apply(Math, listItemWidthOffsets) +
 						parseInt(optionContainerStyle.borderLeftWidth, 10) +
 						parseInt(optionContainerStyle.borderRightWidth, 10),
-					wrapperMinWidth = parseInt(window.getComputedStyle(ui.elOptionWrapper).minWidth, 10),
+					wrapperPaddingLeftRight = parseInt(wrapperStyle.paddingLeft, 10) +
+						parseInt(wrapperStyle.paddingRight, 10),
+					wrapperMinWidth = parseInt(wrapperStyle.minWidth, 10),
 					options = self.options,
 					scrollTop = ui.elOptionWrapper.parentNode.querySelector(".ui-scrollview-clip").scrollTop,
 					height,
@@ -1048,13 +1051,20 @@
 				width = Math.max(biggestListItemWidth, wrapperMinWidth);
 				height = optionHeight;
 
+				if (width + wrapperPaddingLeftRight > window.screen.width) {
+					width = window.screen.width - wrapperPaddingLeftRight;
+				}
+
 				// This part decides the location and direction of option list.
-				offsetLeft = self._horizontalPosition === "right" ? widgetParentRect.right - width : widgetParentRect.left;
+				offsetLeft = self._horizontalPosition === "right" ? widgetParentRect.right - width - wrapperPaddingLeftRight :
+					widgetParentRect.left;
 				// if drop down menu goes out screen eg. more menu
 				// left position has to be corrected
-				if (offsetLeft + width > window.screen.width) {
-					offsetLeft -= offsetLeft + width - window.screen.width;
+
+				if (offsetLeft + width + wrapperPaddingLeftRight > window.screen.width) {
+					offsetLeft -= offsetLeft + width + wrapperPaddingLeftRight - window.screen.width;
 				}
+
 				optionStyle = "left: " + offsetLeft + "px; ";
 
 				if (options.inline === true) {