Change layout (experimental)

2014-11-02 15:06:41 -05:00
parent 8fe5df39d9
commit 37332ae222
75 changed files with 2616 additions and 744 deletions
--- a/assets/css/form.css
+++ b/assets/css/form.css
@@ -0,0 +1,166 @@
+/* forms */
+form {
+    padding: 10px;
+    margin-bottom: 20px;
+    background: #fefefe;
+    border: 1px solid #ddd;
+    border-radius: 5px;
+}
+
+label {
+    cursor: pointer;
+    display: block;
+    margin-top: 10px;
+}
+
+input[type="number"],
+input[type="date"],
+input[type="email"],
+input[type="tel"],
+input[type="password"],
+input[type="text"] {
+    color: #888;
+    border: 1px solid #ccc;
+    width: 400px;
+    max-width: 95%;
+    font-size: 1.0em;
+    height: 25px;
+    padding-bottom: 0;
+    font-family: sans-serif;
+    margin-top: 5px;
+    -webkit-appearance: none;
+    appearance: none;
+}
+
+input[type="number"]:focus,
+input[type="date"]:focus,
+input[type="email"]:focus,
+input[type="tel"]:focus,
+input[type="password"]:focus,
+input[type="text"]:focus,
+textarea:focus {
+    color: #000;
+    border-color: rgba(82, 168, 236, 0.8);
+    outline: 0;
+    box-shadow: 0 0 8px rgba(82, 168, 236, 0.6);
+}
+
+input.form-numeric,
+input[type="number"] {
+    width: 70px;
+}
+
+textarea {
+    border: 1px solid #ccc;
+    width: 400px;
+    max-width: 95%;
+    height: 200px;
+    font-size: 1.0em;
+    font-family: sans-serif;
+}
+
+select {
+    max-width: 95%;
+}
+
+::-webkit-input-placeholder {
+    color: #ddd;
+    padding-top: 2px;
+}
+
+::-ms-input-placeholder {
+    color: #ddd;
+    padding-top: 2px;
+}
+
+::-moz-placeholder {
+    color: #ddd;
+    padding-top: 2px;
+}
+
+.form-actions {
+    clear: both;
+    margin-top: 20px;
+}
+
+input.form-error,
+textarea.form-error {
+    border: 2px solid #b94a48;
+}
+
+.form-required {
+    color: red;
+    padding-left: 5px;
+    font-weight: bold;
+}
+
+.form-errors {
+    color: #b94a48;
+    list-style-type: none;
+}
+
+ul.form-errors li {
+    margin-left: 0;
+}
+
+.form-help {
+    font-size: 0.8em;
+    color: brown;
+    margin-bottom: 15px;
+}
+
+.form-inline {
+    padding: 0;
+    margin: 0;
+    border: none;
+}
+
+.form-inline label {
+    display: inline;
+}
+
+.form-inline input,
+.form-inline select {
+    margin: 0;
+    margin-right: 15px;
+}
+
+input.form-date {
+    width: 150px;
+}
+
+.form-row {
+    margin-top: 10px;
+    margin-bottom: 20px;
+}
+
+.form-column {
+    float: left;
+    margin-bottom: 60px;
+    padding-right: 30px;
+    padding-left: 30px;
+}
+
+.form-column:first-child {
+    padding-left: 0;
+}
+
+.form-column ul {
+    margin-top: 15px;
+}
+
+.form-login {
+    width: 470px;
+    padding: 10px;
+    margin: 3% auto 20% auto;
+}
+
+.form-column li,
+.form-login li {
+    margin-left: 25px;
+    line-height: 25px;
+}
+
+.form-checkbox-group label {
+    display: inline;
+}