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

Merge pull request #261 from nostalgic-css/fix-border-bug

Browse Source 
[#250] Fix border bugs
This commit is contained in:
ダーシノ
2019-01-30 11:25:40 +09:00
committed by GitHub
parent 1f062e222d 3026605664
commit b7b9a37203
3 changed files with 43 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
scss/elements/buttons.scss
View File

@@ -32,7 +32,7 @@
position: relative;
display: inline-block;
padding: 10px 12px;
padding: 6px 8px;
margin: $border-size;
text-align: center;
vertical-align: middle;

46
scss/elements/containers.scss
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;
}
}
}
}
}
}

4
scss/utilities/rounded-corners-mixin.scss
View File

@@ -4,11 +4,11 @@
}
@mixin border-image($color) {
border-image-source: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="UTF-8" ?><svg version="1.1" width="8" height="8" xmlns="http://www.w3.org/2000/svg"><path class="svg-border" d="M3 1 h1 v1 h-1 z M4 1 h1 v1 h-1 z M2 2 h1 v1 h-1 z M5 2 h1 v1 h-1 z M1 3 h1 v1 h-1 z M6 3 h1 v1 h-1 z M1 4 h1 v1 h-1 z M6 4 h1 v1 h-1 z M2 5 h1 v1 h-1 z M5 5 h1 v1 h-1 z M3 6 h1 v1 h-1 z M4 6 h1 v1 h-1 z" fill="#{$color}" /></svg>');
border-image-source: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="UTF-8" ?><svg version="1.1" width="8" height="8" xmlns="http://www.w3.org/2000/svg"><path d="M3 1 h1 v1 h-1 z M4 1 h1 v1 h-1 z M2 2 h1 v1 h-1 z M5 2 h1 v1 h-1 z M1 3 h1 v1 h-1 z M6 3 h1 v1 h-1 z M1 4 h1 v1 h-1 z M6 4 h1 v1 h-1 z M2 5 h1 v1 h-1 z M5 5 h1 v1 h-1 z M3 6 h1 v1 h-1 z M4 6 h1 v1 h-1 z" fill="rgb(#{red($color)},#{green($color)},#{blue($color)})" /></svg>');
}
@mixin compact-border-image($color) {
border-image-source: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="UTF-8" ?><svg version="1.1" width="5" height="5" xmlns="http://www.w3.org/2000/svg"><path class="svg-border" d="M2 1 h1 v1 h-1 z M1 2 h1 v1 h-1 z M3 2 h1 v1 h-1 z M2 3 h1 v1 h-1 z" fill="#{$color}" /></svg>');
border-image-source: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="UTF-8" ?><svg version="1.1" width="5" height="5" xmlns="http://www.w3.org/2000/svg"><path d="M2 1 h1 v1 h-1 z M1 2 h1 v1 h-1 z M3 2 h1 v1 h-1 z M2 3 h1 v1 h-1 z" fill="rgb(#{red($color)},#{green($color)},#{blue($color)})" /></svg>');
}
@mixin rounded-corners($isDark: false) {