Improve StatusBar icons & typography

This commit is contained in:
Alexander Zaytsev 2019-04-08 13:20:05 +03:00
parent be8048d239
commit 0235af7deb
2 changed files with 11 additions and 7 deletions

View file

@ -173,7 +173,7 @@ const CancelBtn = (props) => {
onclick={props.cancelAll}>
<svg aria-hidden="true" class="UppyIcon" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
<g fill="none" fill-rule="evenodd">
<circle fill="#949494" cx="8" cy="8" r="8" />
<circle fill="#888" cx="8" cy="8" r="8" />
<path fill="#FFF" d="M9.283 8l2.567 2.567-1.283 1.283L8 9.283 5.433 11.85 4.15 10.567 6.717 8 4.15 5.433 5.433 4.15 8 6.717l2.567-2.567 1.283 1.283z" />
</g>
</svg>
@ -193,13 +193,13 @@ const PauseResumeButton = (props) => {
{isAllPaused
? <svg aria-hidden="true" class="UppyIcon" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
<g fill="none" fill-rule="evenodd">
<circle fill="#949494" cx="8" cy="8" r="8" />
<path fill="#FFF" d="M6 4.5L11.5 8 6 11.5z" />
<circle fill="#888" cx="8" cy="8" r="8" />
<path fill="#FFF" d="M6 4.25L11.5 8 6 11.75z" />
</g>
</svg>
: <svg aria-hidden="true" class="UppyIcon" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
<g fill="none" fill-rule="evenodd">
<circle fill="#949494" cx="8" cy="8" r="8" />
<circle fill="#888" cx="8" cy="8" r="8" />
<path d="M5 4.5h2v7H5v-7zm4 0h2v7H9v-7z" fill="#FFF" />
</g>
</svg>

View file

@ -114,7 +114,6 @@
overflow-x: hidden;
.uppy-size--md & {
line-height: 1.5;
max-width: 400px;
}
}
@ -125,7 +124,7 @@
.uppy-StatusBar-statusSecondary {
font-size: 11px;
// line-height: 1;
line-height: 1.2;
display: inline-block;
color: rgba($color-asphalt-gray, 0.8);
text-overflow: ellipsis;
@ -187,7 +186,8 @@
.uppy-StatusBar-actionCircleBtn {
line-height: 1;
cursor: pointer;
padding: 4px;
padding: 3px;
opacity: 0.9;
// display: flex;
// align-items: center;
// justify-content: center;
@ -197,6 +197,10 @@
// color: rgba($color-black, 0.6);
// background-color: rgba($color-gray, 0.3);
// text-align: center;
&:hover {
opacity: 1;
}
}
.uppy-StatusBar-actionCircleBtn:focus {