Floating Action Button: fixes according to the guideline

[Issue] #1322
[Problem] Floating Action button - implementation and example
[Solution]
 - modification of widget styles
 - example has been added

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

examples/mobile/UIComponents/components/buttons/fab.html

@@ -15,7 +15,7 @@
 			<div class="ui-appbar-left-icons-container">
 				<a href="#" class="ui-btn ui-btn-icon ui-btn-icon-back" data-style="flat" data-rel="back"></a>
 			</div>
-			<h1>Title</h1>
+			<h1>Floating Action Button</h1>
 		</header>
 		<div class="ui-content">
 			<button data-icon="add" data-style="fab"></button>

examples/mobile/UIComponents/components/buttons/index.html

@@ -42,6 +42,11 @@ <h1>
 						Contained Button
 					</a>
 				</li>
+				<li class="ui-li-anchor">
+					<a href="fab.html">
+						Floating Action Button
+					</a>
+				</li>
 			</ul>
 		</div>
 	</div>

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

@@ -4,7 +4,6 @@
 :root {
     // FAB
 	--button-fab-radius: 50%;
-    --button-fab-color: var(--primary-color);
     --button-fab-icon-color: var(--color-white);
 
 
@@ -550,15 +549,18 @@ a.ui-btn {
 		bottom: var(--button-fab-bottom);
 		width: var(--button-fab-width);
 		height: var(--button-fab-height);
-		background-color: var(--button-fab-color);
+		background-color: var(--primary-color);
 		z-index: 1000;
 		border-radius: var(--button-fab-radius);
 		&::after {
 			background-color: var(--button-fab-icon-color);
 			width: var(--button-fab-icon-width);
 			height: var(--button-fab-icon-height);
 		}
-	}
+		&.ui-btn-active.ui-btn-icon::after {
+			background-color: var(--button-fab-icon-color);
+		}
+}
 	.ui-btn-content {
 		width: 90 * @px_base;
 		display: flex;