Name Days: Namespaced CSS

master
Kevin Kwa 2015-07-11 22:36:05 +08:00
parent 2e0b375683
commit 16a1e9bf40
2 changed files with 13 additions and 17 deletions

View File

@ -136,7 +136,7 @@ handle remainder => sub {
# Add the header # Add the header
$html = '<span>' . $header . '</span>' . $html = '<span>' . $header . '</span>' .
'<div class="zci__content"><table class="name-days">' . '<div class="zci--name_days"><table class="name-days">' .
$html . '</table></div>'; $html . '</table></div>';
return $text, html => $html; return $text, html => $html;

View File

@ -1,62 +1,58 @@
.zci__body, .zero_click_answer { .zci--name_days .name-days-country {
color: #333;
}
.name-days-country {
padding-right: 2em; padding-right: 2em;
white-space: nowrap; white-space: nowrap;
vertical-align: top; vertical-align: top;
width: 25%; width: 25%;
} }
.name-days-dates { .zci--name_days .name-days-dates {
width: 75%; width: 75%;
} }
.name-days-country-name, .name-days-tile { .zci--name_days .name-days-country-name, .zci--name_days .name-days-tile {
line-height: 1.6; line-height: 1.6;
} }
.name-days-country-name { .zci--name_days .name-days-country-name {
vertical-align: middle; vertical-align: middle;
padding-left: 0.4em; padding-left: 0.4em;
} }
.name-days-country .flag-sm { .zci--name_days .name-days-country .flag-sm {
vertical-align: middle; vertical-align: middle;
} }
.name-days-country, .name-days-dates { .zci--name_days .name-days-country, .zci--name_days .name-days-dates {
border-bottom: solid 1px #DDD; border-bottom: solid 1px #DDD;
padding-top: 0.3em; padding-top: 0.3em;
padding-bottom: 0.3em; padding-bottom: 0.3em;
} }
tr:last-of-type .name-days-country, tr:last-of-type .name-days-dates { tr:last-of-type .zci--name_days .name-days-country, tr:last-of-type .zci--name_days .name-days-dates {
border-bottom: none; border-bottom: none;
} }
.name-days-tile span { .zci--name_days .name-days-tile span {
padding: 0 0.5em 0 0; padding: 0 0.5em 0 0;
} }
.name-days-tile { .zci--name_days .name-days-tile {
display: inline-block; display: inline-block;
min-width: 33%; min-width: 33%;
} }
@media (max-width: 600px) { @media (max-width: 600px) {
.name-days-tile { .zci--name_days .name-days-tile {
min-width: 50%; min-width: 50%;
} }
} }
@media (max-width: 400px) { @media (max-width: 400px) {
.name-days-tile { .zci--name_days .name-days-tile {
width: 100%; width: 100%;
} }
} }
table.name-days { .zci--name_days {
max-width: 44em; max-width: 44em;
} }