Style devise views

Signed-off-by: Dmitriy Zaporozhets <dmitriy.zaporozhets@gmail.com>

Style devise views
Signed-off-by: Dmitriy Zaporozhets <dmitriy.zaporozhets@gmail.com>
Dmitriy Zaporozhets
1 parent 5b2aa853
Showing 9 changed files with 64 additions and 60 deletions Show diff stats
app/assets/stylesheets/sections/login.scss
app/assets/stylesheets/sections/notes.scss
app/views/devise/confirmations/new.html.haml
app/views/devise/passwords/edit.html.haml
app/views/devise/passwords/new.html.haml
app/views/devise/registrations/new.html.haml
app/views/devise/sessions/_new_base.html.haml
app/views/devise/sessions/_new_ldap.html.haml
app/views/devise/sessions/new.html.haml
 /* Login Page */
-body.login-page{
-  .container > .content {
-    padding-top: 20px;
+.login-page {
+  h1 {
+    font-size: 3em;
+    font-weight: 200;
   }
-}
-
-.login-box{
-  width: 304px;
-  position: relative;
-  @include border-radius(5px);
-  margin: auto;
-  padding: 20px;
-  background: white;
-}
-
-.login-box .login-logo{
-  margin: 10px 0 30px 0;
-  display: block;
-}
-
-.login-box input.text{background-color: #f1f1f1; font-size: 16px; @include border-radius(0); padding: 14px 10px; width: 280px}
-
-.login-box input.text.top{
-  @include border-radius(5px 5px 0 0);
-  margin-bottom: 0px;
-}
  
-.login-box input.text.bottom{
-  @include border-radius(0 0 5px 5px);
-  border-top: 0;
-  margin-bottom: 20px;
-}
-
-.login-box input.text.middle{
-  border-top: 0;
-  margin-bottom:0px;
-}
+  .login-box{
+    width: 304px;
+    position: relative;
+    @include border-radius(5px);
+    margin: auto;
+    padding: 20px;
+    background: white;
+  }
  
-.login-box a.forgot{float: right; padding-top: 6px}
+  .login-logo{
+    margin: 10px 0 30px 0;
+    display: block;
+  }
  
-.remember_me {
-  text-align: left;
+  .form-control {
+    background-color: #f1f1f1;
+    font-size: 16px;
+    padding: 14px 10px;
+    width: 280px;
+    height: auto;
+
+    &.top {
+      @include border-radius(5px 5px 0 0);
+      margin-bottom: 0px;
+    }
+
+    &.bottom {
+      @include border-radius(0 0 5px 5px);
+      border-top: 0;
+      margin-bottom: 20px;
+    }
+
+    &.middle {
+      border-top: 0;
+      margin-bottom:0px;
+      @include border-radius(0);
+    }
+  }
  
-  input {
-    margin: 2px;
+  .login-box a.forgot {
+    float: right;
+    padding-top: 6px
   }
-}
  
-.devise-errors {
-  h2 {
-   font-size: 14px;
-   color: #a00;
+  .devise-errors {
+    h2 {
+      font-size: 14px;
+      color: #a00;
+    }
   }
 }
@@ -2,7 +2,7 @@
  * Notes
  */
  
-@-webkit-keyframes target-note {
+@-webkit-keyframes targe3-note {
   from { background:#fffff0; }
   50% { background:#ffffd3; }
   to { background:#fffff0; }
@@ -80,6 +80,7 @@ ul.notes {
     overflow: hidden;
     display: block;
     position:relative;
+    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
     p { color: $style_color; }
  
     .avatar {
@@ -3,7 +3,7 @@
   = form_for(resource, as: resource_name, url: confirmation_path(resource_name), html: { method: :post }) do |f|
     .devise-errors
       = devise_error_messages!
-    = f.email_field :email, placeholder: 'Email', class: "text", required: true
+    = f.email_field :email, placeholder: 'Email', class: "form-control", required: true
     .clearfix.append-bottom-10
       = f.submit "Resend confirmation instructions", class: 'btn btn-success'
   %hr
@@ -4,9 +4,9 @@
     = devise_error_messages!
   = f.hidden_field :reset_password_token
   %div
-    = f.password_field :password, class: "text top", placeholder: "New password", required: true
+    = f.password_field :password, class: "form-control top", placeholder: "New password", required: true
   %div
-    = f.password_field :password_confirmation, class: "text bottom", placeholder: "Confirm new password", required: true
+    = f.password_field :password_confirmation, class: "form-control bottom", placeholder: "Confirm new password", required: true
   %div
   .clearfix.append-bottom-10
     = f.submit "Change my password", class: "btn btn-primary"
@@ -2,7 +2,7 @@
   %h3.page-title Reset password
   .devise-errors
     = devise_error_messages!
-  = f.email_field :email, placeholder: "Email",  class: "text", required: true
+  = f.email_field :email, placeholder: "Email",  class: "form-control", required: true
   .clearfix.append-bottom-10
     = f.submit "Reset password", class: "btn-primary btn"
   %hr
@@ -3,15 +3,15 @@
   .devise-errors
     = devise_error_messages!
   %div
-    = f.text_field :name, class: "text top", placeholder: "Name", required: true
+    = f.text_field :name, class: "form-control top", placeholder: "Name", required: true
   %div
-    = f.text_field :username, class: "text middle", placeholder: "Username", required: true
+    = f.text_field :username, class: "form-control middle", placeholder: "Username", required: true
   %div
-    = f.email_field :email, class: "text middle", placeholder: "Email", required: true
+    = f.email_field :email, class: "form-control middle", placeholder: "Email", required: true
   %div
-    = f.password_field :password, class: "text middle", placeholder: "Password", required: true
+    = f.password_field :password, class: "form-control middle", placeholder: "Password", required: true
   %div
-    = f.password_field :password_confirmation, class: "text bottom", placeholder: "Confirm password", required: true
+    = f.password_field :password_confirmation, class: "form-control bottom", placeholder: "Confirm password", required: true
   %div
     = f.submit "Sign up", class: "btn-create btn"
   %hr
 = form_for(resource, as: resource_name, url: session_path(resource_name)) do |f|
-  = f.text_field :login, class: "text top", placeholder: "Username or Email", autofocus: "autofocus"
-  = f.password_field :password, class: "text bottom", placeholder: "Password"
+  = f.text_field :login, class: "form-control top", placeholder: "Username or Email", autofocus: "autofocus"
+  = f.password_field :password, class: "form-control bottom", placeholder: "Password"
   - if devise_mapping.rememberable?
     .clearfix.append-bottom-10
       %label.checkbox.remember_me{for: "user_remember_me"}
 = form_tag(user_omniauth_callback_path(:ldap), id: 'new_ldap_user' ) do
-  = text_field_tag :username, nil, {class: "text top", placeholder: "LDAP Login", autofocus: "autofocus"}
-  = password_field_tag :password, nil, {class: "text bottom", placeholder: "Password"}
+  = text_field_tag :username, nil, {class: "form-control top", placeholder: "LDAP Login", autofocus: "autofocus"}
+  = password_field_tag :password, nil, {class: "form-control bottom", placeholder: "Password"}
   %br/
   = submit_tag "LDAP Sign in", class: "btn-create btn"
 .login-box
   %h3.page-title Sign in
   - if ldap_enabled?
-    %ul.nav.nav-tabs
+    %ul.nav.nav-tabs.append-bottom-20
       %li.active
         = link_to 'LDAP', '#tab-ldap', 'data-toggle' => 'tab'
       %li
1	1	/* Login Page */
2		-body.login-page{
3		- .container > .content {
4		- padding-top: 20px;
	2	+.login-page {
	3	+ h1 {
	4	+ font-size: 3em;
	5	+ font-weight: 200;
5	6	}
6		-}
7		-
8		-.login-box{
9		- width: 304px;
10		- position: relative;
11		- @include border-radius(5px);
12		- margin: auto;
13		- padding: 20px;
14		- background: white;
15		-}
16		-
17		-.login-box .login-logo{
18		- margin: 10px 0 30px 0;
19		- display: block;
20		-}
21		-
22		-.login-box input.text{background-color: #f1f1f1; font-size: 16px; @include border-radius(0); padding: 14px 10px; width: 280px}
23		-
24		-.login-box input.text.top{
25		- @include border-radius(5px 5px 0 0);
26		- margin-bottom: 0px;
27		-}
28	7
29		-.login-box input.text.bottom{
30		- @include border-radius(0 0 5px 5px);
31		- border-top: 0;
32		- margin-bottom: 20px;
33		-}
34		-
35		-.login-box input.text.middle{
36		- border-top: 0;
37		- margin-bottom:0px;
38		-}
	8	+ .login-box{
	9	+ width: 304px;
	10	+ position: relative;
	11	+ @include border-radius(5px);
	12	+ margin: auto;
	13	+ padding: 20px;
	14	+ background: white;
	15	+ }
39	16
40		-.login-box a.forgot{float: right; padding-top: 6px}
	17	+ .login-logo{
	18	+ margin: 10px 0 30px 0;
	19	+ display: block;
	20	+ }
41	21
42		-.remember_me {
43		- text-align: left;
	22	+ .form-control {
	23	+ background-color: #f1f1f1;
	24	+ font-size: 16px;
	25	+ padding: 14px 10px;
	26	+ width: 280px;
	27	+ height: auto;
	28	+
	29	+ &.top {
	30	+ @include border-radius(5px 5px 0 0);
	31	+ margin-bottom: 0px;
	32	+ }
	33	+
	34	+ &.bottom {
	35	+ @include border-radius(0 0 5px 5px);
	36	+ border-top: 0;
	37	+ margin-bottom: 20px;
	38	+ }
	39	+
	40	+ &.middle {
	41	+ border-top: 0;
	42	+ margin-bottom:0px;
	43	+ @include border-radius(0);
	44	+ }
	45	+ }
44	46
45		- input {
46		- margin: 2px;
	47	+ .login-box a.forgot {
	48	+ float: right;
	49	+ padding-top: 6px
47	50	}
48		-}
49	51
50		-.devise-errors {
51		- h2 {
52		- font-size: 14px;
53		- color: #a00;
	52	+ .devise-errors {
	53	+ h2 {
	54	+ font-size: 14px;
	55	+ color: #a00;
	56	+ }
54	57	}
55	58	}
...	...
...	...	@@ -2,7 +2,7 @@
2	2	* Notes
3	3	*/
4	4
5		-@-webkit-keyframes target-note {
	5	+@-webkit-keyframes targe3-note {
6	6	from { background:#fffff0; }
7	7	50% { background:#ffffd3; }
8	8	to { background:#fffff0; }
...	...	@@ -80,6 +80,7 @@ ul.notes {
80	80	overflow: hidden;
81	81	display: block;
82	82	position:relative;
	83	+ font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
83	84	p { color: $style_color; }
84	85
85	86	.avatar {
...	...
...	...	@@ -3,7 +3,7 @@
3	3	= form_for(resource, as: resource_name, url: confirmation_path(resource_name), html: { method: :post }) do \|f\|
4	4	.devise-errors
5	5	= devise_error_messages!
6		- = f.email_field :email, placeholder: 'Email', class: "text", required: true
	6	+ = f.email_field :email, placeholder: 'Email', class: "form-control", required: true
7	7	.clearfix.append-bottom-10
8	8	= f.submit "Resend confirmation instructions", class: 'btn btn-success'
9	9	%hr
...	...
...	...	@@ -4,9 +4,9 @@
4	4	= devise_error_messages!
5	5	= f.hidden_field :reset_password_token
6	6	%div
7		- = f.password_field :password, class: "text top", placeholder: "New password", required: true
	7	+ = f.password_field :password, class: "form-control top", placeholder: "New password", required: true
8	8	%div
9		- = f.password_field :password_confirmation, class: "text bottom", placeholder: "Confirm new password", required: true
	9	+ = f.password_field :password_confirmation, class: "form-control bottom", placeholder: "Confirm new password", required: true
10	10	%div
11	11	.clearfix.append-bottom-10
12	12	= f.submit "Change my password", class: "btn btn-primary"
...	...
...	...	@@ -2,7 +2,7 @@
2	2	%h3.page-title Reset password
3	3	.devise-errors
4	4	= devise_error_messages!
5		- = f.email_field :email, placeholder: "Email", class: "text", required: true
	5	+ = f.email_field :email, placeholder: "Email", class: "form-control", required: true
6	6	.clearfix.append-bottom-10
7	7	= f.submit "Reset password", class: "btn-primary btn"
8	8	%hr
...	...
...	...	@@ -3,15 +3,15 @@
3	3	.devise-errors
4	4	= devise_error_messages!
5	5	%div
6		- = f.text_field :name, class: "text top", placeholder: "Name", required: true
	6	+ = f.text_field :name, class: "form-control top", placeholder: "Name", required: true
7	7	%div
8		- = f.text_field :username, class: "text middle", placeholder: "Username", required: true
	8	+ = f.text_field :username, class: "form-control middle", placeholder: "Username", required: true
9	9	%div
10		- = f.email_field :email, class: "text middle", placeholder: "Email", required: true
	10	+ = f.email_field :email, class: "form-control middle", placeholder: "Email", required: true
11	11	%div
12		- = f.password_field :password, class: "text middle", placeholder: "Password", required: true
	12	+ = f.password_field :password, class: "form-control middle", placeholder: "Password", required: true
13	13	%div
14		- = f.password_field :password_confirmation, class: "text bottom", placeholder: "Confirm password", required: true
	14	+ = f.password_field :password_confirmation, class: "form-control bottom", placeholder: "Confirm password", required: true
15	15	%div
16	16	= f.submit "Sign up", class: "btn-create btn"
17	17	%hr
...	...
1	1	= form_for(resource, as: resource_name, url: session_path(resource_name)) do \|f\|
2		- = f.text_field :login, class: "text top", placeholder: "Username or Email", autofocus: "autofocus"
3		- = f.password_field :password, class: "text bottom", placeholder: "Password"
	2	+ = f.text_field :login, class: "form-control top", placeholder: "Username or Email", autofocus: "autofocus"
	3	+ = f.password_field :password, class: "form-control bottom", placeholder: "Password"
4	4	- if devise_mapping.rememberable?
5	5	.clearfix.append-bottom-10
6	6	%label.checkbox.remember_me{for: "user_remember_me"}
...	...
1	1	= form_tag(user_omniauth_callback_path(:ldap), id: 'new_ldap_user' ) do
2		- = text_field_tag :username, nil, {class: "text top", placeholder: "LDAP Login", autofocus: "autofocus"}
3		- = password_field_tag :password, nil, {class: "text bottom", placeholder: "Password"}
	2	+ = text_field_tag :username, nil, {class: "form-control top", placeholder: "LDAP Login", autofocus: "autofocus"}
	3	+ = password_field_tag :password, nil, {class: "form-control bottom", placeholder: "Password"}
4	4	%br/
5	5	= submit_tag "LDAP Sign in", class: "btn-create btn"
...	...
1	1	.login-box
2	2	%h3.page-title Sign in
3	3	- if ldap_enabled?
4		- %ul.nav.nav-tabs
	4	+ %ul.nav.nav-tabs.append-bottom-20
5	5	%li.active
6	6	= link_to 'LDAP', '#tab-ldap', 'data-toggle' => 'tab'
7	7	%li
...	...