1
0
mirror of https://github.com/nostalgic-css/NES.css.git synced 2025-08-31 01:39:50 +02:00

fix(containers.scss): fix border bug

border does not working when `is-dark`
This commit is contained in:
BcRikko
2019-01-29 17:36:32 +09:00
parent 3629ee939b
commit 3026605664

View File

@@ -21,7 +21,7 @@
> .title {
display: table;
padding: 0 0.5rem;
margin: -2rem 0 1rem;
margin: -1.8rem 0 1rem;
font-size: 1rem;
background-color: $background-color;
}
@@ -40,10 +40,23 @@
}
&.is-dark {
position: relative;
margin: $border-size;
color: $background-color;
background-color: $base-color;
border-color: white;
&::after {
position: absolute;
top: -$border-size * 1.8;
right: -$border-size * 1.8;
bottom: -$border-size * 1.8;
left: -$border-size * 1.8;
z-index: -1;
content: "";
background-color: $base-color;
}
&.with-title {
> .title {
color: $background-color;
@@ -56,11 +69,7 @@
@include rounded-corners();
padding: 1rem 1.5rem;
margin: 14px 8px;
&.is-dark {
@include rounded-corners(true);
}
margin: $border-size;
&.with-title {
> .title {
@@ -79,5 +88,30 @@
}
}
}
&.is-dark {
@include rounded-corners(true);
&::after {
content: none;
}
&.with-title {
> .title {
margin-top: -1.3rem;
}
&.is-centered {
> .title {
margin: -1.3rem auto 1rem;
}
}
&.is-right {
> .title {
margin: -1.3rem 0 1rem auto;
}
}
}
}
}
}