fix layout issues at login page
new stucture: .fullscreen > .fullscreen-center > .fullscreen-content
This commit is contained in:
Felix Niklas
parent
d7dd63ae4a
commit
61a791e837
4 changed files with 129 additions and 87 deletions
|
|
@ -1,5 +1,6 @@
|
|||
<div class="login">
|
||||
<div class="flex vertical centered">
|
||||
<div class="login fullscreen">
|
||||
<div class="fullscreen-center">
|
||||
<div class="fullscreen-body">
|
||||
<p><%- @T( 'Login with %s', @C( 'fqdn' ) ) %></p>
|
||||
|
||||
<div class="hero-unit">
|
||||
|
|
@ -16,10 +17,10 @@
|
|||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<!--
|
||||
<!--
|
||||
<label for="remember_me"><%- @Ti( 'Remember me' ) %></label>
|
||||
<input id="remember_me" name="remember_me" value="1" type="checkbox"/>
|
||||
-->
|
||||
-->
|
||||
<label><input name="remember_me" value="1" type="checkbox"/> <%- @T( 'Remember me' ) %></label>
|
||||
</div>
|
||||
|
||||
|
|
@ -62,7 +63,7 @@
|
|||
</p>
|
||||
<% end %>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="poweredBy">
|
||||
<img class="logo" src="<%= @C('image_path') + '/' + 'logo.svg' %>">
|
||||
<%- @T("Powered by") %>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
<div class="fullHeight vertical center justified reset_password fit">
|
||||
<div class="hero-unit">
|
||||
<div class="reset_password fullscreen">
|
||||
<div class="fullscreen-center">
|
||||
<div class="hero-unit fullscreen-body">
|
||||
<% if @sent: %>
|
||||
<h2><%- @T('We\'ve sent password reset instructions to your email address.') %><small></small></h2>
|
||||
<p><%- @T('If you don\'t receive instructions within a minute or two, check your email\'s spam and junk filters, or try resending your request.') %></p>
|
||||
|
|
@ -15,4 +16,5 @@
|
|||
</form>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
<div class="fullHeight vertical center justified signup fit">
|
||||
<div class="hero-unit">
|
||||
<div class="signup fullscreen">
|
||||
<div class="fullscreen-center">
|
||||
<div class="hero-unit fullscreen-body">
|
||||
<h1><%- @T( 'Join' ) %> <%= @C( 'product_name' ) %></h1>
|
||||
<form>
|
||||
<div class="form-controls">
|
||||
|
|
@ -8,4 +9,5 @@
|
|||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -822,13 +822,12 @@ textarea,
|
|||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.login,
|
||||
.getstarted,
|
||||
.reset_password,
|
||||
.signup,
|
||||
.darkBackground {
|
||||
.darkBackground,
|
||||
.login {
|
||||
padding: 10px;
|
||||
height: auto;
|
||||
background: hsl(234,10%,19%);
|
||||
}
|
||||
|
||||
|
|
@ -841,13 +840,37 @@ textarea,
|
|||
}
|
||||
|
||||
.login {
|
||||
@extend .fit;
|
||||
@extend .vertical;
|
||||
@extend .center;
|
||||
padding: 24px 24px 97px;
|
||||
color: hsl(212,8%,40%);
|
||||
|
||||
a {
|
||||
color: hsl(229,2%,51%);
|
||||
}
|
||||
|
||||
&.login--fancy {
|
||||
color: hsla(0,0%,100%,.7);
|
||||
background:
|
||||
radial-gradient(circle at 49.06% 50.5%, #a36f71, transparent 74%),
|
||||
radial-gradient(circle at 6.95% 9.56%, #745479, transparent 100%),
|
||||
radial-gradient(circle at 2.58% 98.57%, #392e3e, transparent 51%),
|
||||
radial-gradient(circle at 82.11% 97.15%, #5c404e, transparent 100%),
|
||||
radial-gradient(circle at 50% 50%, #8b6b76, #8b6b76 100%);
|
||||
|
||||
a {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.hero-unit {
|
||||
box-shadow:
|
||||
0 8px 17px 0 rgba(0, 0, 0, 0.1),
|
||||
0 6px 20px 0 rgba(0, 0, 0, 0.09);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.login .hero-unit {
|
||||
width: 430px;
|
||||
margin: 0 0 28px;
|
||||
}
|
||||
|
||||
.login .company-logo {
|
||||
|
|
@ -858,32 +881,31 @@ textarea,
|
|||
}
|
||||
|
||||
.login p {
|
||||
margin: 10px 0;
|
||||
margin: 0 auto 22px;
|
||||
max-width: 400px;
|
||||
color: hsl(212,8%,40%);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.login hr {
|
||||
margin: 10px 0;
|
||||
margin: 0 auto 22px;
|
||||
border-top-color: rgba(255,255,255,.15);
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
.login p a {
|
||||
color: hsl(229,2%,51%);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.poweredBy {
|
||||
@extend .horizontal;
|
||||
@extend .center;
|
||||
@extend .centered;
|
||||
color: hsl(233,7%,26%);
|
||||
padding: 20px 0 10px;
|
||||
margin-top: auto;
|
||||
margin-left: -14px;
|
||||
margin: auto 0 34px -16px;
|
||||
cursor: default;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
|
||||
.logo {
|
||||
height: 40px;
|
||||
|
|
@ -897,6 +919,24 @@ textarea,
|
|||
}
|
||||
}
|
||||
|
||||
.fullscreen {
|
||||
@extend .fit;
|
||||
display: table;
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.fullscreen-center {
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.fullscreen-body {
|
||||
text-align: left;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.subtle-link {
|
||||
color: rgba(0,0,0,.32);
|
||||
text-decoration: underline;
|
||||
|
|
@ -1720,6 +1760,7 @@ form {
|
|||
}
|
||||
|
||||
.form-controls {
|
||||
@extend .clearfix;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
|
|
@ -4801,10 +4842,6 @@ label + .wizard-buttonList {
|
|||
flex: 1;
|
||||
}
|
||||
|
||||
.fullHeight {
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
.relative {
|
||||
position: relative;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue