Issue #2032895 by balsama, yannickoo: Follow-up use better technique for vertical centering.
parent
dedc7b504b
commit
cb829e1906
|
@ -20,59 +20,56 @@
|
|||
{{ scripts }}
|
||||
</head>
|
||||
<body class="install-page">
|
||||
<div class="vertically-centered">
|
||||
<div class="vertically-centered__inner">
|
||||
<div id="page">
|
||||
<div id="header">
|
||||
{% if site_name %}
|
||||
<h1 id="site-name">
|
||||
<span>{{ site_name }}</span>
|
||||
</h1>
|
||||
{% endif %}
|
||||
<div id="page">
|
||||
<div id="header">
|
||||
{% if site_name %}
|
||||
<h1 id="site-name">
|
||||
<span>{{ site_name }}</span>
|
||||
</h1>
|
||||
{% endif %}
|
||||
|
||||
{% if site_slogan %}
|
||||
<div id="site-slogan">{{ site_slogan }}</div>
|
||||
{% endif %}
|
||||
{% if site_slogan %}
|
||||
<div id="site-slogan">{{ site_slogan }}</div>
|
||||
{% endif %}
|
||||
|
||||
{% if header %}
|
||||
<div id="header-region">
|
||||
{{ header }}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if header %}
|
||||
<div id="header-region">
|
||||
{{ header }}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
</div> <!-- /header -->
|
||||
</div> <!-- /header -->
|
||||
|
||||
<div id="container" class="clearfix">
|
||||
<div id="container" class="clearfix">
|
||||
|
||||
{% if sidebar_first %}
|
||||
<div id="sidebar-first" class="column sidebar">
|
||||
{{ sidebar_first }}
|
||||
</div> <!-- /sidebar-first -->
|
||||
{% endif %}
|
||||
{% if sidebar_first %}
|
||||
<div id="sidebar-first" class="column sidebar">
|
||||
{{ sidebar_first }}
|
||||
</div> <!-- /sidebar-first -->
|
||||
{% endif %}
|
||||
|
||||
<div id="content" class="column">
|
||||
{% if title %}<h1 class="title" id="page-title">{{ title }}</h1>{% endif %}
|
||||
{% if messages %}{{ messages }}{% endif %}
|
||||
<div id="content-content" class="clearfix">
|
||||
{{ content }}
|
||||
</div> <!-- /content -->
|
||||
<div id="content" class="column">
|
||||
{% if title %}<h1 class="title" id="page-title">{{ title }}</h1>{% endif %}
|
||||
{% if messages %}{{ messages }}{% endif %}
|
||||
<div id="content-content" class="clearfix">
|
||||
{{ content }}
|
||||
</div> <!-- /content-content -->
|
||||
</div> <!-- /content -->
|
||||
|
||||
{% if sidebar_second %}
|
||||
<div id="sidebar-second" class="column sidebar">
|
||||
{{ sidebar_second }}
|
||||
</div> <!-- /sidebar-second -->
|
||||
{% endif %}
|
||||
{% if sidebar_second %}
|
||||
<div id="sidebar-second" class="column sidebar">
|
||||
{{ sidebar_second }}
|
||||
</div> <!-- /sidebar-second -->
|
||||
{% endif %}
|
||||
|
||||
</div> <!-- /container -->
|
||||
</div> <!-- /container -->
|
||||
|
||||
<div id="footer-wrapper">
|
||||
<div id="footer">
|
||||
{% if footer %}{{ footer }}{% endif %}
|
||||
</div> <!-- /footer -->
|
||||
</div> <!-- /footer-wrapper -->
|
||||
<div id="footer-wrapper">
|
||||
<div id="footer">
|
||||
{% if footer %}{{ footer }}{% endif %}
|
||||
</div> <!-- /footer -->
|
||||
</div> <!-- /footer-wrapper -->
|
||||
|
||||
</div> <!-- /page -->
|
||||
</div>
|
||||
</div>
|
||||
</div> <!-- /page -->
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
@ -29,23 +29,25 @@ body.install-page {
|
|||
@media all and (min-width: 48em) { /* 768px */
|
||||
html, body {
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
margin: 0;
|
||||
}
|
||||
.vertically-centered {
|
||||
min-height: 100%;
|
||||
display: table;
|
||||
width: 100%;
|
||||
}
|
||||
.vertically-centered__inner {
|
||||
display: table-cell;
|
||||
padding: 70px 0;
|
||||
width: 100%;
|
||||
body:before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
width: 0;
|
||||
vertical-align: middle;
|
||||
margin-right: -0.35em;
|
||||
}
|
||||
body.install-page #page {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
text-align: left;
|
||||
white-space: normal;
|
||||
border-radius: 5px;
|
||||
width: 75%;
|
||||
margin: 0 auto;
|
||||
max-width: 770px;
|
||||
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
|
||||
padding: 1em 2em 1em 0; /* LTR */
|
||||
|
|
Loading…
Reference in New Issue