css: Allow the bot API key to be selected on all browsers.

The problem that prompted this PR is that I couldn't select the API
key of a bot in chrome to copy it, but I could on Firefox.

Using the `auto` proerty value to override the `user-select`
property  of a parent does not seem to be compatible
with all browsers.
This commit is contained in:
Xavier Cooney 2018-01-11 10:19:32 +00:00 committed by Tim Abbott
parent 12c4a8293d
commit 769052d9c7
2 changed files with 10 additions and 2 deletions

View File

@ -59,6 +59,14 @@ a {
user-select: auto;
}
.text-select {
-webkit-touch-callout: text;
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
}
p.n-margin {
margin: 10px 0px 0px 0px;
}

View File

@ -31,8 +31,8 @@
<div class="api_key">
<span class="field">{{t "API key" }}</span>
<span class="api-key-value-and-button no-select">
<!-- have the `.auto-select` in `.no-select` so that the value doesn't have trailing whitespace. -->
<span class="value auto-select">{{api_key}}</span>
<!-- have the `.text-select` in `.no-select` so that the value doesn't have trailing whitespace. -->
<span class="value text-select">{{api_key}}</span>
<button type="submit" class="button no-style btn-secondary regenerate_bot_api_key" title="{{t 'Generate new API key' }}" data-email="{{email}}">
<i class="icon-vector-refresh"></i>
</button>