Name Days: Namespaced CSS
parent
2e0b375683
commit
16a1e9bf40
|
@ -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;
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
Loading…
Reference in New Issue