Download as
Browse Code »

Commit 04dd616bbd5941a463ed1b4265aa97d0668115e8

Authored by Rafael Manzo
1 parent 414c2af9
Exists in colab and in 4 other branches master, spb-master, spb-stable, stable

Table Form CSS 

* Meaningful names
* Removed unused styles
Showing 4 changed files with 60 additions and 63 deletions   Show diff stats
app/assets/stylesheets/boilerplate/main.css
  Diff comments   View file @04dd616
@@ -93,6 +93,10 @@ textarea { @@ -93,6 +93,10 @@ textarea {
93 Author's custom styles 93 Author's custom styles
94 ========================================================================== */ 94 ========================================================================== */
95 95
  96 +.margin-left-none{
  97 + margin-left: 0 !important;
  98 +}
  99 +
96 /* ========================================================================== 100 /* ==========================================================================
97 Helper classes 101 Helper classes
98 ========================================================================== */ 102 ========================================================================== */
app/assets/stylesheets/form_with_tooltip.css 0 → 100644
  Diff comments   View file @04dd616
@@ -0,0 +1,38 @@ @@ -0,0 +1,38 @@
  1 +.form-table {
  2 + margin: 0 !important;
  3 + background: #fff;
  4 + -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.075);
  5 + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.075);
  6 +}
  7 +
  8 +.form-row {
  9 + float: left;
  10 + width: 100%;
  11 + border-bottom: 1px solid #f2f2f2;
  12 + border-top: 1px solid #e3e3e3;
  13 + overflow: hidden;
  14 + display: inline-flex;
  15 +}
  16 +
  17 +.field-container {
  18 + position: relative;
  19 + float: left;
  20 + width: 653px;
  21 + padding: 20px;
  22 +}
  23 +
  24 +.help-container {
  25 + float: left;
  26 + width: 400px;
  27 + margin: 0 0 -20000px 0;
  28 + padding: 20px 20px 20000px 20px;
  29 + background: #f5f5f5;
  30 + border-left: 1px solid #e3e3e3;
  31 + border-right: 1px solid #e3e3e3;
  32 +}
  33 +
  34 +.text-field {
  35 + width: 95% !important;
  36 + margin: 0;
  37 + background: #f9f9f9;
  38 +}
0 \ No newline at end of file 39 \ No newline at end of file
app/assets/stylesheets/sign_in.css
View file @414c2af
@@ -1,47 +0,0 @@ @@ -1,47 +0,0 @@
1 -.form-table {  
2 - margin: 0 !important;  
3 - background: #fff;  
4 - -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.075);  
5 - box-shadow: 0 1px 2px rgba(0, 0, 0, 0.075);  
6 -}  
7 -  
8 -.margin-left-none{  
9 - margin-left: 0 !important;  
10 -}  
11 -  
12 -.field {  
13 - float: left;  
14 - width: 100%;  
15 - border-bottom: 1px solid #f2f2f2;  
16 - border-top: 1px solid #e3e3e3;  
17 - overflow: hidden;  
18 - display: inline-flex;  
19 -}  
20 -  
21 -.user-details {  
22 - position: relative;  
23 - float: left;  
24 - width: 653px;  
25 - padding: 20px;  
26 -}  
27 -  
28 -.help {  
29 - float: left;  
30 - width: 400px;  
31 - margin: 0 0 -20000px 0;  
32 - padding: 20px 20px 20000px 20px;  
33 - background: #f5f5f5;  
34 - border-left: 1px solid #e3e3e3;  
35 - border-right: 1px solid #e3e3e3;  
36 -}  
37 -  
38 -.label2 {  
39 - width: 95% !important;  
40 - height: 50px;  
41 - margin: 0;  
42 - padding: 10px;  
43 - color: #555;  
44 - font-size: 15px;  
45 - background: #f9f9f9;  
46 - border: 1px solid #dfdfdf;  
47 -}  
48 \ No newline at end of file 0 \ No newline at end of file
app/views/devise/registrations/new.html.erb
  Diff comments   View file @04dd616
@@ -7,46 +7,48 @@ @@ -7,46 +7,48 @@
7 7
8 <div class="row margin-left-none"> 8 <div class="row margin-left-none">
9 <div class="form-table span9"> 9 <div class="form-table span9">
10 - <div class="field">  
11 - <div class="user-details"><%= f.label :name, class: 'control-label' %><br />  
12 - <%= f.text_field :name, :autofocus => true, class: 'label2' %></div>  
13 - <div class="help"> 10 + <div class="form-row">
  11 + <div class="field-container">
  12 + <%= f.label :name, class: 'control-label' %><br />
  13 + <%= f.text_field :name, :autofocus => true, class: 'text-field' %>
  14 + </div>
  15 + <div class="help-container">
14 <p> 16 <p>
15 Your full name! 17 Your full name!
16 </p> 18 </p>
17 </div> 19 </div>
18 </div> 20 </div>
19 21
20 - <div class="field">  
21 - <div class="user-details"> 22 + <div class="form-row">
  23 + <div class="field-container">
22 <%= f.label :email, class: 'control-label' %><br /> 24 <%= f.label :email, class: 'control-label' %><br />
23 - <%= f.email_field :email, class: 'label2' %> 25 + <%= f.email_field :email, class: 'text-field' %>
24 </div> 26 </div>
25 - <div class="help"> 27 + <div class="help-container">
26 <p> 28 <p>
27 Your email is the form of communication we have with you, so make sure you typed it correctly! 29 Your email is the form of communication we have with you, so make sure you typed it correctly!
28 </p> 30 </p>
29 </div> 31 </div>
30 </div> 32 </div>
31 33
32 - <div class="field">  
33 - <div class="user-details"> 34 + <div class="form-row">
  35 + <div class="field-container">
34 <%= f.label :password, class: 'control-label' %><br /> 36 <%= f.label :password, class: 'control-label' %><br />
35 - <%= f.password_field :password, class: 'label2' %> 37 + <%= f.password_field :password, class: 'text-field' %>
36 </div> 38 </div>
37 - <div class="help"> 39 + <div class="help-container">
38 <p> 40 <p>
39 Your password must be at least 8 characters. Strong passwords contain characters in upper and lowercase, numbers and symbols. 41 Your password must be at least 8 characters. Strong passwords contain characters in upper and lowercase, numbers and symbols.
40 </p> 42 </p>
41 </div> 43 </div>
42 </div> 44 </div>
43 45
44 - <div class="field">  
45 - <div class="user-details"> 46 + <div class="form-row">
  47 + <div class="field-container">
46 <%= f.label :password_confirmation, class: 'control-label' %><br /> 48 <%= f.label :password_confirmation, class: 'control-label' %><br />
47 - <%= f.password_field :password_confirmation, class: 'label2' %> 49 + <%= f.password_field :password_confirmation, class: 'text-field' %>
48 </div> 50 </div>
49 - <div class="help"> 51 + <div class="help-container">
50 <p> 52 <p>
51 Confirm your password! 53 Confirm your password!
52 </p> 54 </p>