Reformatted servo.css

As discussed in #10553, we should consider splitting the long lines in this file onto separate lines (one per css attribute), to make it more readable and maintainable in general. I also added blank lines where I felt it was applicable.
servo · May 14, 2016 · d2469f0 · d2469f0
1 parent e299076
commit d2469f0
Showing 1 changed file with 93 additions and 10 deletions.
diff --git a/resources/servo.css b/resources/servo.css
@@ -1,26 +1,105 @@
 button,
-input                   { background: white; min-height: 1.0em; padding: 0em; padding-left: 0.25em; padding-right: 0.25em; border: solid lightgrey 1px; color: black; font-family: sans-serif; font-size: 0.7em; white-space: nowrap; text-align: left; line-height: 1.8; }
-textarea                { background: white; min-height: 1.0em; padding: 0em; padding-left: 0.25em; padding-right: 0.25em; border: solid lightgrey 1px; color: black; font-family: sans-serif; font-size: 0.7em; white-space: pre; }
+input {
+  background: white;
+  min-height: 1.0em;
+  padding: 0em;
+  padding-left: 0.25em;
+  padding-right: 0.25em;
+  border: solid lightgrey 1px;
+  color: black;
+  font-family: sans-serif;
+  font-size: 0.7em;
+  white-space: nowrap;
+  text-align: left;
+  line-height: 1.8;
+}
+
+textarea {
+  background: white;
+  min-height: 1.0em;
+  padding: 0em;
+  padding-left: 0.25em;
+  padding-right: 0.25em;
+  border: solid lightgrey 1px;
+  color: black;
+  font-family: sans-serif;
+  font-size: 0.7em;
+  white-space: pre;
+}
+
 input::selection,
-textarea::selection     { background: rgba(176, 214, 255, 1.0); color: black; }
+textarea::selection {
+  background: rgba(176, 214, 255, 1.0);
+  color: black;
+}
+
 button,
 input[type="button"],
 input[type="submit"],
-input[type="reset"]     { background: lightgrey; border-top: solid 1px #EEEEEE; border-left: solid 1px #CCCCCC; border-right: solid 1px #999999; border-bottom: solid 1px #999999; text-align: center; vertical-align: middle; color: black; }
-input[type="hidden"]    { display: none !important }
+input[type="reset"] {
+  background: lightgrey;
+  border-top: solid 1px #EEEEEE;
+  border-left: solid 1px #CCCCCC;
+  border-right: solid 1px #999999;
+  border-bottom: solid 1px #999999;
+  text-align: center;
+  vertical-align: middle;
+  color: black;
+}
+
+input[type="hidden"] { display: none !important }
+
 input[type="checkbox"],
-input[type="radio"]     { font-family: monospace !important; border: none !important; background: transparent; }
+input[type="radio"] {
+  font-family: monospace !important;
+  border: none !important;
+  background: transparent;
+}
+
+input[type="checkbox"]::before {
+  display: inline-block;
+  border: solid currentcolor 1px;
+  content: "";
+  padding: 0;
+  width: 1em;
+  height: 1em;
+  text-align: center;
+}
 
-input[type="checkbox"]::before { display: inline-block; border: solid currentcolor 1px; content: ""; padding: 0; width: 1em; height: 1em; text-align: center; }
 input[type="checkbox"]:checked::before { content: "✓"; }
 input[type="checkbox"]:indeterminate::before { content: "-"; }
-input[type="radio"]::before { display: inline-block; border: solid currentcolor 1px; content: ""; padding: 0; width: 1em; height: 1em; border-radius: 50%; text-align: center; }
+
+input[type="radio"]::before {
+  display: inline-block;
+  border: solid currentcolor 1px;
+  content: "";
+  padding: 0;
+  width: 1em;
+  height: 1em;
+  border-radius: 50%;
+  text-align: center;
+}
+
 input[type="radio"]:checked::before { content: "●"; line-height: 1em; }
 
-select                        { border-style: solid; border-width: 1px; background: white; }
+select {
+  border-style: solid;
+  border-width: 1px;
+  background: white;
+}
+
 select[multiple]              { padding: 0em 0.25em; }
 select:not([multiple])        { padding: 0.25em 0.5em; border-radius: 6px; }
-select:not([multiple])::after { content: ""; display: inline-block; border-width: 5.2px 3px 0 3px; border-style: solid; border-color: currentcolor transparent transparent transparent; margin-left: 0.5em; }
+
+select:not([multiple])::after {
+  content: "";
+  display: inline-block;
+  border-width: 5.2px 3px 0 3px;
+  border-style: solid;
+  border-color: currentcolor transparent transparent transparent;
+  margin-left: 0.5em;
+}
+
 select:not([multiple]) option           { display: none !important; }
 select:not([multiple]) option[selected] { display: inline !important; }
 select[multiple] option                 { display: block !important; }
@@ -46,19 +125,23 @@ textarea {
 details {
   display: block;
 }
+
 details::-servo-details-summary {
   margin-left: 40px;
   display: list-item;
   list-style: disclosure-closed;
 }
+
 details[open]::-servo-details-summary {
   list-style: disclosure-open;
 }
+
 *|*::-servo-details-content {
   margin-left: 40px;
   overflow: hidden;
   display: block;
 }
+
 /*
  * Until servo supports svg properly, make sure to at least prevent svg
  * children from being layed out and rendered like usual html.