[Frontend] Rename .s-clickable-icon to .s-icon-button

Fixes #1047

Author: charlesh88

platform/commonUI/browse/res/templates/back-arrow.html

@@ -20,7 +20,7 @@
  at runtime from the About dialog for additional information.
 -->
 
-<a class='s-clickable-icon icon-pointer-left'
+<a class='s-icon-button icon-pointer-left'
    ng-show="context.getPath().length > 2"
    ng-click="context.getParent().getCapability('action').perform('navigate')">
 </a>

platform/commonUI/general/res/sass/controls/_controls.scss

@@ -72,7 +72,7 @@
     }
 }
 
-.s-clickable-icon {
+.s-icon-button {
     // Clickable icon elements that have hover
     @extend .ui-symbol;
     color: $colorClickIcon;
@@ -83,7 +83,7 @@
 
 .s-toggle-icon {
     // Has default (in-active) and .active states
-    @extend .s-clickable-icon;
+    @extend .s-icon-button;
     color: $colorToggleIcon;
     &:hover { color: rgba($colorToggleIconHov, 0.5); }
     &.active { color: $colorToggleIconActive; }

platform/features/clock/res/templates/timer.html

@@ -23,7 +23,7 @@
 	<div class="l-elem-wrapper l-flex-row">
 		<a ng-click="timer.clickButton()"
 			title="{{timer.buttonText()}}"
-			class="flex-elem control s-clickable-icon {{timer.buttonCssClass()}}"></a>
+			class="flex-elem control s-icon-button {{timer.buttonCssClass()}}"></a>
 	    <span class="flex-elem l-value {{timer.signClass()}}">
 	        <span class="value"
 		        ng-class="{ active:timer.text() }">{{timer.text() || "--:--:--"}}