Permalink
Browse files

Forms part 2: Comment form styling

  • Loading branch information...
1 parent 3026ff8 commit 1c2420f45752e9431be5c40153c9b8db496b688b @jayj committed Oct 14, 2012
Showing with 130 additions and 131 deletions.
  1. +60 −68 less/forms.less
  2. +70 −63 style.dev.css
View
@@ -281,15 +281,67 @@ html {
}
}
-// #respond p.form-email > label {
-// padding-left: 18px;
-// }
+/* =============================================================================
+ Layout: Comment form
+ ========================================================================== */
+
+#respond {
+ background: #f2f7fc ~"url(images/content-orange-line.png)" repeat-x;
+ color: @gray;
+ margin: (@gutterWidth + 20px) 0 0;
+ padding: @smallGutterWidth;
+
+ // Logged-in text
+ .log-in-out {
+ font-size: 18px;
+ text-align: center;
+ }
+}
+
+#reply-title {
+ .orange-box;
+ font-size: 26px;
+ letter-spacing: -1px;
+ text-align: center;
+ margin: -40px 0 @smallGutterWidth;
+}
+
+#cancel-comment-reply-link {
+ font-size: 18px;
+ font-style: italic;
+ font-weight: normal;
+ padding-left: 10px;
+}
+
+/* Comment form fields */
+#commentform {
+ .form-author {
+ float: left;
+ width: 48%;
+ }
+
+ .form-email {
+ float: right;
+ width: 48%;
+ }
+
+ .form-url {
+ clear: both;
+ }
+
+ input[type="text"],
+ input[type="email"],
+ input[type="url"],
+ textarea {
+ display: block;
+ width: 100%;
+ }
+}
+
+#submit {
+ .buttonBackground(#08c, spin(#08c, 20%), @white, fade(@black, 40%));
+}
-// span.required {
-// color: #555;
-// font: bold 16px sans-serif;
-// display: none; /* Hides the required * star */
-// }
// /**
// * Search form
@@ -407,63 +459,3 @@ html {
// margin-left: 5px;
// }
-
-
-/* =============================================================================
- Layout: Comment form
- ========================================================================== */
-
-#respond {
- background: #f2f7fc url(images/content-orange-line.png) repeat-x;
- border-radius: 0 0 5px 5px;
- color: #555;
- margin: 25px 0 25px 0;
- padding: 20px 20px 0 20px;
- overflow: hidden;
-}
-
- /* Logged-in text */
- #respond .log-in-out {
- color: #777;
- font-size: 14px;
- }
-
- /* Cancel reply link */
- #reply-title small a {
- font-size: 14px;
- font-style: italic;
- padding-left: 10px;
- }
-
-/* Comment form paragraphs */
-#respond p.form-author {
- float: left;
- width: 50%;
-}
-
-#respond p.form-email {
- float: right;
- width: 50%;
-}
-
-#respond p.form-url {
- clear: both;
-}
-
-/* Comment form inputs and textarea elements */
-#respond input[type="text"],
-#respond input[type="email"],
-#respond input[type="url"],
-#respond textarea {
- display: block;
- width: 98%;
-}
-
-#respond p.form-author input[type="text"] {
- width: 90%;
-}
-
-#respond p.form-email input[type="email"] {
- width: 90%;
- float: right;
-}
View
@@ -1408,6 +1408,10 @@ table caption {
padding-bottom: 25px;
position: relative;
}
+.singular .hentry {
+ border-bottom: none;
+ padding-bottom: 0;
+}
.sticky {
background: #ffffdf;
padding: 25px;
@@ -2516,64 +2520,91 @@ html .btn-inverse:hover {
background: #d54e21;
border-color: #a93e1a;
}
-@media screen and (min-width: 980px) {
- #topbar .search {
- background: #262626 url(less/less/images/topbar.png) repeat;
- border: none;
- box-shadow: none;
- float: right;
- margin-top: 12px;
- padding: 0;
- }
-}
/* =============================================================================
Layout: Comment form
========================================================================== */
#respond {
- background: #f2f7fc url(less/less/images/content-orange-line.png) repeat-x;
- border-radius: 0 0 5px 5px;
- color: #555;
- margin: 25px 0 25px 0;
- padding: 20px 20px 0 20px;
- overflow: hidden;
+ background: #f2f7fc url(images/content-orange-line.png) repeat-x;
+ color: #555555;
+ margin: 60px 0 0;
+ padding: 25px;
}
-/* Logged-in text */
#respond .log-in-out {
- color: #777;
- font-size: 14px;
+ font-size: 18px;
+ text-align: center;
}
-/* Cancel reply link */
-#reply-title small a {
- font-size: 14px;
+#reply-title {
+ background-color: #ffffdf;
+ border: double #eedbbb;
+ border-width: 4px 0;
+ margin: 0 0 40px;
+ padding: 10px 25px;
+ font-size: 26px;
+ letter-spacing: -1px;
+ text-align: center;
+ margin: -40px 0 25px;
+}
+#cancel-comment-reply-link {
+ font-size: 18px;
font-style: italic;
+ font-weight: normal;
padding-left: 10px;
}
-/* Comment form paragraphs */
-#respond p.form-author {
+/* Comment form fields */
+#commentform .form-author {
float: left;
- width: 50%;
+ width: 48%;
}
-#respond p.form-email {
+#commentform .form-email {
float: right;
- width: 50%;
+ width: 48%;
}
-#respond p.form-url {
+#commentform .form-url {
clear: both;
}
-/* Comment form inputs and textarea elements */
-#respond input[type="text"],
-#respond input[type="email"],
-#respond input[type="url"],
-#respond textarea {
+#commentform input[type="text"],
+#commentform input[type="email"],
+#commentform input[type="url"],
+#commentform textarea {
display: block;
- width: 98%;
+ width: 100%;
}
-#respond p.form-author input[type="text"] {
- width: 90%;
+#submit {
+ background-color: #006dcc;
+ background-image: -moz-linear-gradient(top, #0088cc, #0044cc 100%);
+ background-image: -webkit-linear-gradient(top, #0088cc, #0044cc 100%);
+ background-image: -o-linear-gradient(top, #0088cc, #0044cc 100%);
+ background-image: linear-gradient(top, #0088cc, #0044cc 100%);
+ background-repeat: repeat-x;
+ border: 1px solid;
+ border-color: #0044cc #0044cc #002a80;
+ color: #ffffff;
+ text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
}
-#respond p.form-email input[type="email"] {
- width: 90%;
- float: right;
+#submit:hover {
+ background-color: #0063b9;
+ background-image: -moz-linear-gradient(top, #007ebd, #003bb3 100%);
+ background-image: -webkit-linear-gradient(top, #007ebd, #003bb3 100%);
+ background-image: -o-linear-gradient(top, #007ebd, #003bb3 100%);
+ background-image: linear-gradient(top, #007ebd, #003bb3 100%);
+ color: #ffffff;
+ -webkit-transition: background-position 100ms linear;
+ -moz-transition: background-position 100ms linear;
+ -o-transition: background-position 100ms linear;
+ transition: background-position 100ms linear;
+}
+#submit:active {
+ box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
+}
+@media screen and (min-width: 980px) {
+ #topbar .search {
+ background: #262626 url(less/less/images/topbar.png) repeat;
+ border: none;
+ box-shadow: none;
+ float: right;
+ margin-top: 12px;
+ padding: 0;
+ }
}
/* =============================================================================
Components: Message boxes
@@ -2948,30 +2979,6 @@ html .btn-inverse:hover {
width: 100% !important;
float: none !important;
}
- /* Make the comment form better */
- #respond p.form-email,
- #respond p.form-author {
- float: none;
- width: 100%;
- }
- #respond p.form-author input[type="text"],
- #respond p.form-email input[type="text"] {
- width: 98%;
- }
- #respond p.form-email input[type="text"] {
- float: none;
- }
- #respond label {
- font-size: 16px;
- }
- #respond p.form-email > label {
- padding-left: 0;
- }
- #respond #submit {
- font-size: 18px;
- width: 100%;
- padding: 25px;
- }
}
/* =============================================================================
Print styles

0 comments on commit 1c2420f

Please sign in to comment.