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 93 Author's custom styles
94 94 ========================================================================== */
95 95  
  96 +.margin-left-none{
  97 + margin-left: 0 !important;
  98 +}
  99 +
96 100 /* ==========================================================================
97 101 Helper classes
98 102 ========================================================================== */
... ...
app/assets/stylesheets/form_with_tooltip.css 0 → 100644
  Diff comments   View file @04dd616
... ... @@ -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 39 \ No newline at end of file
... ...
app/assets/stylesheets/sign_in.css
View file @414c2af
... ... @@ -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 0 \ No newline at end of file
app/views/devise/registrations/new.html.erb
  Diff comments   View file @04dd616
... ... @@ -7,46 +7,48 @@
7 7  
8 8 <div class="row margin-left-none">
9 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 16 <p>
15 17 Your full name!
16 18 </p>
17 19 </div>
18 20 </div>
19 21  
20   - <div class="field">
21   - <div class="user-details">
  22 + <div class="form-row">
  23 + <div class="field-container">
22 24 <%= f.label :email, class: 'control-label' %><br />
23   - <%= f.email_field :email, class: 'label2' %>
  25 + <%= f.email_field :email, class: 'text-field' %>
24 26 </div>
25   - <div class="help">
  27 + <div class="help-container">
26 28 <p>
27 29 Your email is the form of communication we have with you, so make sure you typed it correctly!
28 30 </p>
29 31 </div>
30 32 </div>
31 33  
32   - <div class="field">
33   - <div class="user-details">
  34 + <div class="form-row">
  35 + <div class="field-container">
34 36 <%= f.label :password, class: 'control-label' %><br />
35   - <%= f.password_field :password, class: 'label2' %>
  37 + <%= f.password_field :password, class: 'text-field' %>
36 38 </div>
37   - <div class="help">
  39 + <div class="help-container">
38 40 <p>
39 41 Your password must be at least 8 characters. Strong passwords contain characters in upper and lowercase, numbers and symbols.
40 42 </p>
41 43 </div>
42 44 </div>
43 45  
44   - <div class="field">
45   - <div class="user-details">
  46 + <div class="form-row">
  47 + <div class="field-container">
46 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 50 </div>
49   - <div class="help">
  51 + <div class="help-container">
50 52 <p>
51 53 Confirm your password!
52 54 </p>
... ...