Skip to content
Permalink
Browse files

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.
  • Loading branch information...
perlun committed May 14, 2016
1 parent e299076 commit d2469f0cdecb218459292687be9dfdb48f411d11
Showing with 93 additions and 10 deletions.
  1. +93 −10 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.

0 comments on commit d2469f0

Please sign in to comment.
You can’t perform that action at this time.