mirror_css/nes.css
1
0
Fork 0
mirror of https://github.com/nostalgic-css/NES.css.git synced 2025-09-01 02:01:56 +02:00
Code Issues Releases Wiki Activity

fix(containers.scss): fix border bug

Browse Source 
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
1 changed files with 40 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
scss/elements/containers.scss
View File

@@ -21,7 +21,7 @@
> .title { > .title {
display: table; display: table;
padding: 0 0.5rem; padding: 0 0.5rem;
margin: -2rem 0 1rem; margin: -1.8rem 0 1rem;
font-size: 1rem; font-size: 1rem;
background-color: $background-color; background-color: $background-color;
} }
@@ -40,10 +40,23 @@
} }
&.is-dark { &.is-dark {
position: relative;
margin: $border-size;
color: $background-color; color: $background-color;
background-color: $base-color; background-color: $base-color;
border-color: white; 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 { &.with-title {
> .title { > .title {
color: $background-color; color: $background-color;
@@ -56,11 +69,7 @@
@include rounded-corners(); @include rounded-corners();
padding: 1rem 1.5rem; padding: 1rem 1.5rem;
margin: 14px 8px; margin: $border-size;
&.is-dark {
@include rounded-corners(true);
}
&.with-title { &.with-title {
> .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;
}
}
}
}
} }
} }