Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-03-11 21:27:05 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

ModalDialog styles improved

Browse source
This commit is contained in:
svetlagasheva 2019-11-04 11:48:37 +02:00
parent e70c5508c7
commit 1356e87bf9
3 changed files with 40 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

48
src/common/ModalDialog/ModalDialog.js
View file

@ -35,29 +35,31 @@ const ModalDialog = ({ className, children, title, buttons, onClose }) => {
<div className={styles['modal-dialog-content']}>
{children}
</div>
<div className={styles['modal-dialog-buttons']}>
{
Array.isArray(buttons) && buttons.length > 0 ?
buttons.map((button, key) => (
<Button key={key} className={classnames(button.className, styles['action-button'])} {...button.props}>
{
typeof button.icon === 'string' && button.icon.length > 0 ?
<Icon className={styles['icon']} icon={button.icon} />
:
null
}
{
typeof button.label === 'string' && button.label.length > 0 ?
button.label
:
null
}
</Button>
))
:
null
}
</div>
{
Array.isArray(buttons) && buttons.length > 0 ?
<div className={styles['modal-dialog-buttons']}>
{
buttons.map((button, key) => (
<Button key={key} className={classnames(button.className, styles['action-button'])} {...button.props}>
{
typeof button.icon === 'string' && button.icon.length > 0 ?
<Icon className={styles['icon']} icon={button.icon} />
:
null
}
{
typeof button.label === 'string' && button.label.length > 0 ?
button.label
:
null
}
</Button>
))
}
</div>
:
null
}
</div>
</Modal>
)

30
src/common/ModalDialog/styles.less
View file

@ -1,17 +1,13 @@
.modal-container {
display: flex;
flex-flow: column;
flex-direction: column;
background-color: var(--color-backgrounddark40);
.modal-dialog-container {
position: relative;
margin: auto;
padding: 1rem;
background-color: var(--color-surfacelighter);
margin: auto;
* {
overflow: visible;
}
.close-button-container {
display: flex;
@ -52,37 +48,35 @@
}
.modal-dialog-content {
margin: 1rem auto 0 auto;
margin-top: 1rem;
}
.modal-dialog-buttons {
margin: -.5rem;
margin-top: 1rem;
display: flex;
flex-flow: row;
flex-direction: row;
}
}
}
.action-button {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
flex: 1 0 0;
padding: 1rem;
text-align: center;
color: var(--color-surfacelighter);
background-color: var(--color-signal5);
padding: 1rem;
margin: .5rem;
&:hover {
background-color: var(--color-signal580);
filter: brightness(1.2);
}
&:focus {
outline: 3px solid var(--color-surfacelighter);
outline-offset: -4px;
outline: calc(1.5 * var(--focus-outline-size)) solid var(--color-surfacelighter);
outline-offset: calc(-2 * var(--focus-outline-size));
}
&:global(.disabled) {
@ -91,9 +85,13 @@
}
.icon {
fill: var(--color-surfacelighter);
width: 1rem;
height: 1rem;
margin-right: .5rem;
fill: var(--color-surfacelighter);
}
&:not(:last-child) {
margin-right: 1rem;
}
}

2
storybook/stories/ModalDialog/styles.less
View file

@ -24,7 +24,7 @@
// This is only for the content. Not relevant for the demo
.content-container {
display: flex;
flex-flow: row;
flex-direction: row;
margin: 0 -0.5rem;
.content-column {