Skip to content
GitLab
Menu
Projects
Groups
Snippets
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
Menu
Open sidebar
Luc Didry
kresus
Commits
7001a715
Commit
7001a715
authored
Mar 19, 2019
by
Nicolas Frandeboeuf
Browse files
[CSS] Move modals layout to dedicated file
parent
5f844f6d
Changes
3
Hide whitespace changes
Inline
Side-by-side
client/css/base.css
View file @
7001a715
...
...
@@ -24,6 +24,7 @@
@import
'~./ui/foldable-panel.css'
;
@import
'~./ui/spinner.css'
;
@import
'~./ui/accessibility.css'
;
@import
'~./ui/modals.css'
;
@import
'~./helpers.css'
;
...
...
client/css/ui/modals.css
0 → 100644
View file @
7001a715
.ReactModal__Overlay
{
z-index
:
1050
;
opacity
:
1
;
overflow
:
auto
;
}
.ReactModal__Content
{
max-width
:
580px
;
margin
:
auto
;
position
:
relative
!important
;
left
:
0
!important
;
display
:
flex
;
flex-direction
:
column
;
}
.ReactModal__Content
.modal-body
{
flex
:
auto
;
}
.ReactModal__Content
>
*
{
flex-shrink
:
0
;
}
@media
(
min-width
:
768px
)
{
.ReactModal__Content
{
overflow
:
visible
!important
;
}
}
@media
(
max-width
:
768px
)
{
.ReactModal__Content
{
top
:
0
!important
;
border-radius
:
0
!important
;
border
:
none
!important
;
height
:
100vh
;
overflow
:
scroll
!important
;
}
body
.ReactModal__Body--open
#app
{
display
:
none
;
}
}
.modal-header
{
margin-bottom
:
1em
;
display
:
flex
;
align-items
:
baseline
;
}
.modal-header
>
*
{
font-size
:
1.5em
;
}
.modal-header
>
.modal-title
{
margin-top
:
0
;
flex-grow
:
1
;
line-height
:
1.5em
;
font-weight
:
bold
;
}
.modal-header
.modal-close
{
border
:
0
;
background
:
none
;
padding
:
0
;
transition
:
transform
0.25s
ease
;
}
.modal-header
.modal-close
:hover
{
transform
:
rotate
(
90deg
);
}
.modal-body
.Select
{
overflow
:
visible
;
z-index
:
auto
;
}
.modal-body
.cols-with-label
{
display
:
flex
;
margin-bottom
:
1em
;
align-items
:
center
;
}
.modal-body
.cols-with-label
>
*
{
flex
:
auto
;
}
.modal-body
.cols-with-label
>
label
:first-child
{
flex-grow
:
0
;
flex-shrink
:
0
;
width
:
33%
;
}
@media
(
max-width
:
768px
)
{
.modal-body
.cols-with-label
{
display
:
block
;
}
.modal-body
.cols-with-label
>
label
:first-child
{
display
:
inline-block
;
width
:
100%
;
}
}
.modal-body
.cols-with-label
.Select__control
,
.modal-body
.cols-with-label
input
{
color
:
inherit
;
}
.modal-body
h5
{
font-size
:
1.2em
;
margin-top
:
1em
;
margin-bottom
:
1em
;
}
.modal-footer
{
margin-top
:
1em
;
display
:
flex
;
justify-content
:
flex-end
;
}
.modal-footer
>
.btn
:not
(
:last-child
)
{
margin-right
:
0.5em
;
}
.modal-footer
>
button
{
white-space
:
nowrap
;
overflow
:
hidden
;
text-overflow
:
ellipsis
;
}
client/themes/default/style.css
View file @
7001a715
...
...
@@ -683,136 +683,9 @@ input.category-color {
color
:
white
;
}
/* Modal
e
s */
/* Modals */
.ReactModal__Overlay
{
z-index
:
1050
;
opacity
:
1
;
background-color
:
rgba
(
0
,
0
,
0
,
0.65
)
!important
;
overflow
:
auto
;
}
.ReactModal__Content
{
max-width
:
580px
;
margin
:
auto
;
position
:
relative
!important
;
left
:
0
!important
;
display
:
flex
;
flex-direction
:
column
;
}
.ReactModal__Content
.modal-body
{
flex
:
auto
;
}
.ReactModal__Content
>
*
{
flex-shrink
:
0
;
}
@media
(
min-width
:
768px
)
{
.ReactModal__Content
{
overflow
:
visible
!important
;
}
}
@media
(
max-width
:
768px
)
{
.ReactModal__Content
{
top
:
0
!important
;
border-radius
:
0
!important
;
border
:
none
!important
;
height
:
100vh
;
overflow
:
scroll
!important
;
}
body
.ReactModal__Body--open
#app
{
display
:
none
;
}
}
.modal-header
{
margin-bottom
:
1em
;
display
:
flex
;
align-items
:
baseline
;
}
.modal-header
>
*
{
font-size
:
1.5em
;
}
.modal-header
>
.modal-title
{
margin-top
:
0
;
flex-grow
:
1
;
line-height
:
1.5em
;
font-weight
:
bold
;
}
.modal-header
.modal-close
{
border
:
0
;
background
:
none
;
padding
:
0
;
transition
:
transform
0.25s
ease
;
}
.modal-header
.modal-close
:hover
{
transform
:
rotate
(
90deg
);
}
.modal-body
.Select
{
overflow
:
visible
;
z-index
:
auto
;
}
.modal-body
.cols-with-label
{
display
:
flex
;
margin-bottom
:
1em
;
align-items
:
center
;
}
.modal-body
.cols-with-label
>
*
{
flex
:
auto
;
}
.modal-body
.cols-with-label
>
label
:first-child
{
flex-grow
:
0
;
flex-shrink
:
0
;
width
:
33%
;
}
@media
(
max-width
:
768px
)
{
.modal-body
.cols-with-label
{
display
:
block
;
}
.modal-body
.cols-with-label
>
label
:first-child
{
display
:
inline-block
;
width
:
100%
;
}
}
.modal-body
.cols-with-label
.Select__control
,
.modal-body
.cols-with-label
input
{
color
:
inherit
;
}
.modal-body
h5
{
font-size
:
1.2em
;
margin-top
:
1em
;
margin-bottom
:
1em
;
}
.modal-footer
{
margin-top
:
1em
;
display
:
flex
;
justify-content
:
flex-end
;
}
.modal-footer
>
.btn
:not
(
:last-child
)
{
margin-right
:
0.5em
;
}
.modal-footer
>
button
{
white-space
:
nowrap
;
overflow
:
hidden
;
text-overflow
:
ellipsis
;
}
/* Loading "modal" */
...
...
Write
Preview
Supports
Markdown
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment