Merge pull request #964 from newswangerd/ui-clipboard

Style upgrades to clipboard

galaxyui/src/app/utilities/clipboard/clipboard.component.html

@@ -1,4 +1,5 @@
 <div class="copy-to-clipboard">
-    <code [id]="guid">{{ copyText | lowercase }}</code>
+    <div class="code">$</div>
+    <div class="code" [id]="guid">{{ copyText | lowercase }}</div>
     <a [href]="" (click)="copyToClipboard()" class="btn btn-default" tooltip="Copy to clipboard"><i class="fa fa-copy"></i></a>
 </div>

galaxyui/src/app/utilities/clipboard/clipboard.component.less

@@ -1,23 +1,29 @@
 /* clipboard.component.less */
 
+@import '../../../variables';
+
 .copy-to-clipboard {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
 
-    code {
-        background-color: #fff;
-        border-top: 1px solid #bbb;
-        border-bottom: 1px solid #bbb;
-        border-left: 1px solid #bbb;
-        border-right: 1px solid #fff;
-        padding: 4px 5px 5px 5px;
-        border-radius: 1px;
-        margin: 0;
+    .code {
+        vertical-align: middle;
+        padding-left: 5px;
+        padding-right: 5px;
+        font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
+        display: inline-block;
+        background-color: #F9F2F4;
+        color: #C20F45;
+        height: 27px;
+        overflow: hidden;
+        text-overflow: ellipsis;
     }
     .btn {
-        margin-left: -5px;
-        padding-bottom: 2.75px;
-        padding-top: 2.75px;
-        margin-bottom: 1px;
+        display: inline-block;
+        height: 27px;
         box-shadow: none;
         text-shadow: none;
+        font-weight: bold;
     }
 }