Index: design/input.css |
=================================================================== |
new file mode 100644 |
--- /dev/null |
+++ b/design/input.css |
@@ -0,0 +1,67 @@ |
+textarea { |
+ width: 100%; |
+ height: 150px; |
+} |
+input, textarea, select, button { |
+ text-shadow: 0px 1px 0px #fff; |
+ outline: none; |
+ border-radius: 3px; |
+ border: 0px solid #717171; |
+ margin: 4px; |
+ margin-bottom: 5px; |
+ min-height: 12px; |
+ transition: background 0.6s ease-in, box-shadow 0.8s ease-in; |
+ box-shadow: 0px 0px 3px 1px #33D; |
+ background: #EEF; |
+} |
+input:hover, textarea:hover, select:hover, button:hover { |
+ box-shadow: 0px 0px 12px 1px #22A; |
+ background: #EEF; |
+} |
+input, textarea, select { |
+ padding: 1px; |
+} |
+.button_parent { |
+ text-align: center; |
+} |
+button { |
+ width: 40%; |
+ text-align: center; |
+ padding: 4px; |
+} |
+button:active { |
+ box-shadow: 0px 0px 12px 1px #3D3; |
+ background: #EFE; |
+} |
+input[type="text"] { |
+ width: 100%; |
+} |
+input[type="checkbox"], input[type="radio"] { |
+ box-shadow: 0px 0px 3px 1px #D33; |
+ background: #FEE; |
+} |
+input[type="checkbox"]:hover, input[type="radio"]:hover { |
+ box-shadow: 0px 0px 12px 1px #A22; |
+ background: #FEE; |
+} |
+input[type="checkbox"]:checked, input[type="radio"]:checked { |
+ box-shadow: 0px 0px 3px 1px #3D3; |
+ background: #EFE; |
+} |
+input[type="checkbox"]:checked:hover, input[type="radio"]:checked:hover { |
+ box-shadow: 0px 0px 12px 1px #2A2; |
+ background: #EFE; |
+} |
+label > input[type="checkbox"] + span, label > input[type="radio"] + span { |
+ transition: color 0.6s ease-in; |
+ color: #777; |
+} |
+label > input[type="checkbox"]:checked + span, label > input[type="radio"]:checked + span { |
+ color: #000; |
+} |
+label > input[type="checkbox"] ~ i { |
+ display:none; |
+} |
+label > input[type="checkbox"]:checked ~ i { |
+ display:inline; |
+} |