Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-04-20 02:22:09 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

button focus styles

Browse source
This commit is contained in:
svetlagasheva 2019-04-05 12:21:35 +03:00
parent 65ed47a157
commit 9457c83470
2 changed files with 21 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
src/common/ShareModal/ShareModal.js
View file

@ -27,10 +27,10 @@ const renderUrl = (url) => {
return (
<div className={styles['url-container']}>
<input ref={inputRef} className={styles['url']} type={'text'} tabIndex={'-1'} defaultValue={url} readOnly />
<div className={styles['copy-button']} onClick={copyToClipboard}>
<Input className={styles['copy-button']} type={'button'} onClick={copyToClipboard}>
<Icon className={styles['icon']} icon={'ic_link'} />
<div className={styles['label']}>Copy</div>
</div>
</Input>
</div>
);
};
@ -39,9 +39,9 @@ const ShareModal = (props) => {
return (
<Modal>
<div className={styles['share-modal']}>
<div className={styles['x-container']}>
<Input className={styles['x-container']} type={'button'}>
<Icon className={styles['icon']} icon={'ic_x'} onClick={props.onClose} />
</div>
</Input>
<div className={styles['info-container']}>
<div className={styles['share-label']}>Share</div>
<div className={styles['buttons']}>

21
src/common/ShareModal/styles.less
View file

@ -16,8 +16,9 @@
justify-content: flex-end;
.icon {
width: 0.8em;
height: 0.8em;
padding: 0.2em;
width: 1.2em;
height: 1.2em;
fill: var(--color-surfacedark);
cursor: pointer;
@ -25,10 +26,22 @@
fill: var(--color-surface);
}
}
&:focus {
.icon {
background-color: var(--color-surfacelight);
}
}
&:hover {
.icon {
background-color: transparent;
}
}
}
.info-container {
padding: calc(var(--spacing) * 0.2) var(--spacing) calc(var(--spacing) * 1.2) var(--spacing);
padding: 0 var(--spacing) calc(var(--spacing) * 1.2) var(--spacing);
.share-label {
font-size: 1.1em;
@ -109,7 +122,7 @@
color: var(--color-surfacedarker);
}
&:hover {
&:focus, &:hover {
background-color: var(--color-surface60);
}
}