lab2023#28 Create forms page

- Default and horizontal forms were added
- Bootstrap overrides sass file was added

source/assets/stylesheets/_bootstrap_overrides.css.sass

@@ -0,0 +1,61 @@
+// Bootstrap overrides
+
+// Navbars
+.navbar-nav > li > .dropdown-menu // Add arrow and border radius from dropdowns
+  +border-radius(5px)
+  &:after
+    content: ''
+    display: inline-block
+    border-left: 6px solid transparent
+    border-right: 6px solid transparent
+    border-bottom: 6px solid $dropdown-bg
+    position: absolute
+    top: -6px
+    right: 20px
+
+// Panels
+.panel // Remove box shadow from panels
+  +box-shadow(none)
+
+  // Panel heading styles
+  .panel-heading
+    color: $base-dark-color
+    i[class*='icon-']
+      margin-right: 5px
+  .panel-tools
+    float: right
+    margin-top: -48px
+    margin-right: -8px
+    .btn-group
+      margin-top: -6px
+    .btn-group, .label, .badge
+      float: right
+      display: inline-block
+    .btn
+      padding: 8px 6px
+      font-weight: 200
+      font-size: 1em
+      color: $base-dark-color
+      &:hover
+        color: $base-color
+      &:active, &:focus
+        color: darken($base-color, 10)
+        +box-shadow(none)
+      span.badge
+        font-size: .7em
+        padding: 2px 4px
+    .label, .badge
+      margin-right: 5px
+      margin-top: 4px
+      padding-bottom: 4px
+      font-weight: 200
+  .panel-body
+    clear: both
+
+// Buttons
+.btn
+  padding: 6px 12px
+
+// Forms
+.form-control
+  height: 34px

source/assets/stylesheets/application.css.sass

@@ -2,56 +2,7 @@
 @import 'variables'
 @import 'mixins'
 @import 'bootstrap'
-
-// Bootstrap overrides
-.navbar-nav > li > .dropdown-menu // Add arrow and border radius from dropdowns
-  +border-radius(5px)
-  &:after
-    content: ''
-    display: inline-block
-    border-left: 6px solid transparent
-    border-right: 6px solid transparent
-    border-bottom: 6px solid $dropdown-bg
-    position: absolute
-    top: -6px
-    right: 20px
-.panel // Remove box shadow from panels
-  +box-shadow(none)
-
-  // Panel heading styles
-  .panel-heading
-    color: $base-dark-color
-    i[class*='icon-']
-      margin-right: 10px
-  .panel-tools
-    float: right
-    margin-top: -48px
-    margin-right: -8px
-    .btn-group
-      margin-top: -6px
-    .btn-group, .label, .badge
-      float: right
-      display: inline-block
-    .btn
-      padding: 8px 6px
-      font-weight: 200
-      font-size: 1em
-      color: $base-dark-color
-      &:hover
-        color: $base-color
-      &:active, &:focus
-        color: darken($base-color, 10)
-        +box-shadow(none)
-      span.badge
-        font-size: .7em
-        padding: 2px 4px
-    .label, .badge
-      margin-right: 5px
-      margin-top: 4px
-      padding-bottom: 4px
-      font-weight: 200
-  .panel-body
-    clear: both
+@import 'bootstrap_overrides'
 
 body.main
   padding: 15px
@@ -212,7 +163,6 @@ body.main
       display: inline-block
     .btn-group
       .btn
-        height: 37px
         @extend .btn-success
         span.badge
           background-color: $base-dark-color
@@ -221,7 +171,7 @@ body.main
           font-weight: 200
     .label
       margin-right: 5px
-      margin-top: 7px
+      margin-top: 6px
       padding: 5px
       height: 23px
       font-size: 0.9em

source/forms.html.haml

@@ -0,0 +1,46 @@
+- page 'Forms', 'forms'
+
+.panel
+  .panel-heading
+    %i.icon-edit.icon-large
+    Form Default
+  .panel-body
+
+    %form
+      %fieldset
+        %legend Legend
+        .form-group
+          %label{:for => "exampleInputEmail"} Email address
+          %input#exampleInputEmail.form-control{:placeholder => "Enter email", :type => "text"}/
+        .form-group.has-error
+          %label{:for => "exampleInputPassword"} Password
+          %input#exampleInputPassword.form-control{:placeholder => "Password", :type => "password"}/
+          %p.help-block Example block-level help text here.
+        .form-group
+          %label{:for => "exampleInputFile"} File input
+          %input#exampleInputFile{:type => "file"}/
+          %p.help-block Example block-level help text here.
+        %button.btn.btn-default{:type => "submit"} Submit
+
+.panel
+  .panel-heading
+    %i.icon-edit.icon-large
+    Form Horizontal
+  .panel-body
+
+    %form.form-horizontal
+
+      .form-group.has-warning
+        %label.col-lg-2.control-label{for: 'inputEmail'} Email
+        .col-lg-10
+          %input#inputEmail.form-control{placeholder: 'Email', type: 'text'}/
+
+      .form-group.has-error
+        %label.col-lg-2.control-label{for: 'inputPassword'} Password
+        .col-lg-10
+          %input#inputPassword.form-control{placeholder: 'Password', type: 'password'}/
+
+      .form-group
+        .col-lg-12
+          %button.btn.btn-default{type: 'submit'} Sign in
+