Logo
Explore Help
Sign In
darkhelm/notifications-admin
1
0
Fork 0
You've already forked notifications-admin
mirror of https://github.com/GSA/notifications-admin.git synced 2026-02-05 10:53:28 -05:00
Code Issues Packages Projects Releases Wiki Activity
Files
893378ef9fe6d776b4c47fcc24e4673ec201b68a
notifications-admin/app/assets/stylesheets/components/api-key.scss

18 lines
208 B
SCSS
Raw Normal View History

Add API key component This commit adds a component for showing an API key. Usage: ```jinja {{ from 'components/api-key.html' import api_key }} {{ api_key('e1b0751388f3cd0fc9982c701acdb3c2') }} ``` Depending on the user’s browser, it works in three different ways. No Javascript --- The API key is shown on the page. Older browsers with Javascript --- The API key is hidden, and users can click a button to reveal it. Newer browsers that support copying to clipboard without Flash --- As above, but when the key is shown there is a button which copies it to the clipboard. This is acheived by using [this polyfill](https://www.npmjs.com/package/query-command-supported) to reliably detect browser support for the ‘copy’ command. The styling of the component is a bit different to the initial sketch. I think a grey button works better than green. Green feels like it’s going to take you somewhere else.
2016-01-15 10:50:10 +00:00
.api-key {
&-key {
font-family: monospace;
display: block;
margin-bottom: 10px;
}
&-button-show {
@include button($grey-3);
}
&-button-copy {
@include button($grey-3);
}
}
Reference in New Issue Copy Permalink
Powered by Gitea Version: 1.25.0 Page: 614ms Template: 14ms
English
Bahasa Indonesia Deutsch English Español Français Gaeilge Italiano Latviešu Magyar nyelv Nederlands Polski Português de Portugal Português do Brasil Suomi Svenska Türkçe Čeština Ελληνικά Български Русский Українська فارسی മലയാളം 日本語 简体中文 繁體中文(台灣) 繁體中文(香港) 한국어
Licenses API