mirror of
https://github.com/nostalgic-css/NES.css.git
synced 2025-04-21 22:52:42 +02:00
Move from box-shadow to border-image for pixelated borders (#234)
* refactor: Convert pixelated borders from box-shadows to border-images Our previous usage of `box-shadows` and pseudo elements proved to be pretty buggy. Converting to `border-image`s seems to have fixed a lot of the issues that `box-shadows` caused, such as `background-color`s appering over top of our borders. BREAKING CHANGE: This change both eliminates pseudo elements from several components, and adds pseudo elements to components that did not have them before. This could cause compatibility issues for users that relied on the existence of those pseudo elements for various styling techniques. * style(buttons): Remove superfluous commented code
This commit is contained in:
Trezy
Abdullah Samman
parent
5c4f46ec70
commit
44a1fb2fea
@ -7,6 +7,7 @@ $background-color: $color-white;
|
||||
|
||||
$cursor-url: url(https://unpkg.com/nes.css/assets/cursor.png);
|
||||
$cursor-click-url: url(https://unpkg.com/nes.css/assets/cursor-click.png);
|
||||
$border-size: 0.25em;
|
||||
|
||||
$default-colors: (
|
||||
normal: $background-color,
|
||||
|
||||
@ -1,25 +1,12 @@
|
||||
.nes-balloon {
|
||||
@include rounded-corners();
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
padding: 1rem 1.5rem;
|
||||
margin: 8px;
|
||||
margin-bottom: 30px;
|
||||
background-color: $background-color;
|
||||
|
||||
// prettier-ignore
|
||||
box-shadow:
|
||||
0 -4px $background-color,
|
||||
0 -8px $base-color,
|
||||
4px 0 $background-color,
|
||||
4px -4px $base-color,
|
||||
8px 0 $base-color,
|
||||
0 4px $background-color,
|
||||
0 8px $base-color,
|
||||
-4px 0 $background-color,
|
||||
-4px 4px $base-color,
|
||||
-8px 0 $base-color,
|
||||
-4px -4px $base-color,
|
||||
4px 4px $base-color;
|
||||
background-color: $background-color;
|
||||
|
||||
> :last-child {
|
||||
margin-bottom: 0;
|
||||
|
||||
@ -1,81 +1,34 @@
|
||||
@mixin btn-style($color, $background, $hover-background, $shadow) {
|
||||
color: $color;
|
||||
background-color: $background;
|
||||
box-shadow: inset -4px -4px $shadow;
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
top: -$border-size;
|
||||
right: -$border-size;
|
||||
bottom: -$border-size;
|
||||
left: -$border-size;
|
||||
content: "";
|
||||
box-shadow: inset -4px -4px $shadow;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: $hover-background;
|
||||
box-shadow: inset -6px -6px $shadow;
|
||||
|
||||
&::after {
|
||||
box-shadow: inset -6px -6px $shadow;
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
&:active::after {
|
||||
box-shadow: inset 4px 4px $shadow;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin btn-extra-pixelize-style($color, $background, $hover-background, $shadow) {
|
||||
color: $color;
|
||||
background-color: $background;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: $hover-background;
|
||||
outline: 0;
|
||||
// prettier-ignore
|
||||
box-shadow:
|
||||
0 -4px $hover-background,
|
||||
inset 0 -2px $shadow,
|
||||
0 -8px $base-color,
|
||||
4px 0 $shadow,
|
||||
4px -4px $base-color,
|
||||
8px 0 $base-color,
|
||||
0 4px $shadow,
|
||||
4px 4px $base-color,
|
||||
0 8px $base-color,
|
||||
-4px 0 $hover-background,
|
||||
inset -2px 0 $shadow,
|
||||
-4px -4px $base-color,
|
||||
-8px 0 $base-color,
|
||||
-4px 4px $base-color;
|
||||
}
|
||||
|
||||
&:active {
|
||||
// prettier-ignore
|
||||
box-shadow:
|
||||
0 -4px $shadow,
|
||||
0 -8px $base-color,
|
||||
4px 0 $hover-background,
|
||||
4px -4px $base-color,
|
||||
8px 0 $base-color,
|
||||
0 4px $hover-background,
|
||||
4px 4px $base-color,
|
||||
0 8px $base-color,
|
||||
-4px 0 $shadow,
|
||||
-4px -4px $base-color,
|
||||
-8px 0 $base-color,
|
||||
-4px 4px $base-color;
|
||||
}
|
||||
|
||||
// prettier-ignore
|
||||
box-shadow:
|
||||
0 -4px $background,
|
||||
0 -8px $base-color,
|
||||
4px 0 $shadow,
|
||||
4px -4px $base-color,
|
||||
8px 0 $base-color,
|
||||
0 4px $shadow,
|
||||
4px 4px $base-color,
|
||||
0 8px $base-color,
|
||||
-4px 0 $background,
|
||||
-4px -4px $base-color,
|
||||
-8px 0 $base-color,
|
||||
-4px 4px $base-color;
|
||||
}
|
||||
|
||||
// Default style
|
||||
.nes-btn {
|
||||
$border-size: 4px;
|
||||
@include compact-rounded-corners();
|
||||
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
@ -85,7 +38,6 @@
|
||||
vertical-align: middle;
|
||||
cursor: $cursor-click-url, pointer;
|
||||
user-select: none;
|
||||
border: none;
|
||||
|
||||
@include btn-style(
|
||||
$base-color,
|
||||
@ -94,32 +46,6 @@
|
||||
map-get($default-colors, "shadow")
|
||||
);
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
position: absolute;
|
||||
box-sizing: content-box;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
content: "";
|
||||
border-color: $base-color;
|
||||
border-style: solid;
|
||||
border-width: $border-size;
|
||||
}
|
||||
|
||||
&::before {
|
||||
top: $border-size * -1;
|
||||
left: 0;
|
||||
border-right: $border-size / 2;
|
||||
border-left: $border-size / 2;
|
||||
}
|
||||
|
||||
&::after {
|
||||
top: 0;
|
||||
left: $border-size * -1;
|
||||
border-top: $border-size / 2;
|
||||
border-bottom: $border-size / 2;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: 0;
|
||||
}
|
||||
@ -147,30 +73,4 @@
|
||||
@include btn-style(nth($type, 2), nth($type, 3), nth($type, 4), nth($type, 5));
|
||||
}
|
||||
}
|
||||
|
||||
&.is-rounded {
|
||||
box-sizing: content-box;
|
||||
padding: 6px 8px;
|
||||
@include btn-extra-pixelize-style(
|
||||
$base-color,
|
||||
map-get($default-colors, "normal"),
|
||||
map-get($default-colors, "hover"),
|
||||
map-get($default-colors, "shadow")
|
||||
);
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
border-width: 0;
|
||||
}
|
||||
@each $type in $types {
|
||||
&.is-#{nth($type, 1)} {
|
||||
@include btn-extra-pixelize-style(
|
||||
nth($type, 2),
|
||||
nth($type, 3),
|
||||
nth($type, 4),
|
||||
nth($type, 5)
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,36 +1,14 @@
|
||||
.nes-container {
|
||||
position: relative;
|
||||
padding: 1.5rem 2rem;
|
||||
border-color: black;
|
||||
border-style: solid;
|
||||
border-width: 4px;
|
||||
|
||||
> :last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
content: "";
|
||||
}
|
||||
|
||||
&::before {
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
&::after {
|
||||
top: 2px;
|
||||
right: 2px;
|
||||
bottom: 2px;
|
||||
left: 2px;
|
||||
border-color: $base-color;
|
||||
border-style: solid;
|
||||
border-width: 4px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
&.is-centered {
|
||||
text-align: center;
|
||||
}
|
||||
@ -65,13 +43,8 @@
|
||||
|
||||
&.is-dark {
|
||||
color: $background-color;
|
||||
&::before {
|
||||
background-color: $base-color;
|
||||
}
|
||||
|
||||
&::after {
|
||||
border-color: #fff;
|
||||
}
|
||||
background-color: $base-color;
|
||||
border-color: white;
|
||||
|
||||
&.with-title {
|
||||
> .title {
|
||||
@ -81,45 +54,14 @@
|
||||
}
|
||||
}
|
||||
|
||||
@mixin rounded($base, $background) {
|
||||
color: $base;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
// prettier-ignore
|
||||
box-shadow:
|
||||
0 -4px $background,
|
||||
0 -8px,
|
||||
4px 0 $background,
|
||||
4px -4px,
|
||||
8px 0,
|
||||
0 4px $background,
|
||||
0 8px,
|
||||
-4px 0 $background,
|
||||
-4px 4px,
|
||||
-8px 0,
|
||||
-4px -4px,
|
||||
4px 4px;
|
||||
}
|
||||
|
||||
&.is-rounded {
|
||||
@include rounded-corners();
|
||||
|
||||
padding: 1rem 1.5rem;
|
||||
margin: 14px 8px;
|
||||
|
||||
&::after {
|
||||
@include rounded($base-color, $background-color);
|
||||
}
|
||||
|
||||
&.is-dark {
|
||||
&::after {
|
||||
@include rounded($background-color, $base-color);
|
||||
}
|
||||
|
||||
&::before {
|
||||
top: -8px;
|
||||
right: -8px;
|
||||
bottom: -8px;
|
||||
left: -8px;
|
||||
}
|
||||
@include rounded-corners(true);
|
||||
}
|
||||
|
||||
&.with-title {
|
||||
|
||||
@ -11,7 +11,6 @@
|
||||
}
|
||||
|
||||
&.is-rounded {
|
||||
border: none;
|
||||
box-shadow: 4px 0 $base-color, -4px 0 $base-color, 0 4px $base-color, 0 -4px $base-color;
|
||||
@include rounded-corners();
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
.nes-progress {
|
||||
@include compact-rounded-corners();
|
||||
width: 100%;
|
||||
height: 48px;
|
||||
padding: 4px;
|
||||
margin: 4px;
|
||||
color: $base-color;
|
||||
background-color: $background-color;
|
||||
box-shadow: 4px 0, -4px 0, 0 4px, 0 -4px;
|
||||
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
|
||||
|
||||
@ -3,42 +3,69 @@
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
.nes-table {
|
||||
table-layout: fixed;
|
||||
background-color: $background-color;
|
||||
@mixin thsAndTdsBoxShadow($color) {
|
||||
th,
|
||||
td {
|
||||
padding: 0.5rem;
|
||||
word-wrap: break-word;
|
||||
|
||||
tr {
|
||||
margin-left: -0.25em;
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
position: relative;
|
||||
padding: 0.5rem;
|
||||
word-wrap: break-word;
|
||||
border-color: $base-color;
|
||||
border-style: solid;
|
||||
border-width: 0 0.25em 0.25em 0;
|
||||
|
||||
&:last-child {
|
||||
border-right-width: 0;
|
||||
}
|
||||
|
||||
tr {
|
||||
th + th {
|
||||
box-shadow: -4px 0 $color;
|
||||
}
|
||||
td {
|
||||
box-shadow: 0 -4px $color;
|
||||
}
|
||||
td:not(:first-child) {
|
||||
box-shadow: -4px 0 $color, 0 -4px $color;
|
||||
}
|
||||
&::after,
|
||||
&::before {
|
||||
position: absolute;
|
||||
display: block;
|
||||
width: 0.25em;
|
||||
height: 0.25em;
|
||||
content: "";
|
||||
background-color: $base-color;
|
||||
}
|
||||
|
||||
&::after {
|
||||
bottom: -0.25em;
|
||||
left: -0.25em;
|
||||
}
|
||||
|
||||
&::before {
|
||||
top: -0.25em;
|
||||
right: -0.25em;
|
||||
}
|
||||
|
||||
&:last-child::before {
|
||||
top: initial;
|
||||
bottom: -0.25em;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-centered th {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&.is-bordered {
|
||||
margin: 4px;
|
||||
box-shadow: 4px 0 $base-color, 0 -4px $base-color, -4px 0 $base-color, 0 4px $base-color;
|
||||
@include thsAndTdsBoxShadow($base-color);
|
||||
border-spacing: 0;
|
||||
border-collapse: separate;
|
||||
|
||||
@include compact-rounded-corners();
|
||||
}
|
||||
|
||||
&.is-dark {
|
||||
position: relative;
|
||||
color: $background-color;
|
||||
background-color: $base-color;
|
||||
box-shadow: 4px -4px $base-color, -4px -4px $base-color, -4px 4px $base-color,
|
||||
4px 4px $base-color;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
@ -47,14 +74,40 @@
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
content: "";
|
||||
background: linear-gradient(to left, transparent 4px, $background-color 4px) no-repeat,
|
||||
linear-gradient(to bottom, transparent 4px, $background-color 4px) no-repeat,
|
||||
linear-gradient(to right, transparent 4px, $background-color 4px) no-repeat,
|
||||
linear-gradient(to top, transparent 4px, $background-color 4px) no-repeat;
|
||||
background-position: 100% 0, 100% 0, 0 100%, 0 100%;
|
||||
background-size: calc(100% - 4px) 4px, 4px calc(100% - 4px);
|
||||
}
|
||||
|
||||
@include thsAndTdsBoxShadow($background-color);
|
||||
&.is-bordered {
|
||||
@include compact-rounded-corners(true);
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
border-color: $background-color;
|
||||
|
||||
&::after,
|
||||
&::before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*************************************************************************** \
|
||||
This eliminates the gap between the last row in a table and the border, as
|
||||
well as hiding the derelict pixels in the bottom right and bottom left of
|
||||
the last row of a table
|
||||
\ ***************************************************************************/
|
||||
tbody,
|
||||
thead:last-child {
|
||||
tr:last-child {
|
||||
th,
|
||||
td {
|
||||
border-bottom-width: 0;
|
||||
|
||||
&:first-child::after,
|
||||
&:last-child::before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,19 +1,15 @@
|
||||
.nes-input,
|
||||
.nes-textarea {
|
||||
@mixin border-style($border, $outline) {
|
||||
@include compact-rounded-corners();
|
||||
@include compact-border-image($border);
|
||||
|
||||
outline-color: $outline;
|
||||
// prettier-ignore
|
||||
box-shadow:
|
||||
0 4px $border,
|
||||
0 -4px $border,
|
||||
4px 0 $border,
|
||||
-4px 0 $border;
|
||||
}
|
||||
|
||||
width: 100%;
|
||||
padding: 0.5rem 1rem;
|
||||
margin: 4px;
|
||||
border: none;
|
||||
|
||||
@include border-style($base-color, map-get($default-colors, "hover"));
|
||||
|
||||
|
||||
@ -15,15 +15,15 @@
|
||||
margin: 4px;
|
||||
|
||||
select {
|
||||
@include compact-rounded-corners();
|
||||
width: 100%;
|
||||
padding: 0.5rem 2.5rem 0.5rem 1rem;
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
cursor: $cursor-click-url, pointer;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
outline-color: map-get($default-colors, "hover");
|
||||
box-shadow: 0 4px $color-black, 0 -4px $color-black, 4px 0 $color-black, -4px 0 $color-black;
|
||||
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
|
||||
&:invalid {
|
||||
color: map-get($disabled-colors, shadow);
|
||||
@ -56,8 +56,9 @@
|
||||
}
|
||||
|
||||
select {
|
||||
@include compact-border-image($color);
|
||||
|
||||
outline-color: nth($type, 3);
|
||||
box-shadow: 0 4px $color, 0 -4px $color, 4px 0 $color, -4px 0 $color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,3 +2,4 @@
|
||||
|
||||
@import "animations.scss";
|
||||
@import "icon-mixin.scss";
|
||||
@import "rounded-corners-mixin.scss";
|
||||
|
||||
46
scss/utilities/rounded-corners-mixin.scss
Normal file
46
scss/utilities/rounded-corners-mixin.scss
Normal file
@ -0,0 +1,46 @@
|
||||
%rounded-corner-defaults {
|
||||
border-style: solid;
|
||||
border-width: $border-size;
|
||||
}
|
||||
|
||||
@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>');
|
||||
}
|
||||
|
||||
@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>');
|
||||
}
|
||||
|
||||
@mixin rounded-corners($isDark: false) {
|
||||
@extend %rounded-corner-defaults;
|
||||
|
||||
border-image-slice: 3;
|
||||
border-image-width: 3;
|
||||
|
||||
@if $isDark {
|
||||
@include border-image($color-white);
|
||||
|
||||
border-image-outset: 0;
|
||||
} @else {
|
||||
@include border-image($color-black);
|
||||
|
||||
border-image-outset: 2;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin compact-rounded-corners($isDark: false) {
|
||||
@extend %rounded-corner-defaults;
|
||||
|
||||
border-image-slice: 2;
|
||||
border-image-width: 2;
|
||||
|
||||
@if $isDark {
|
||||
@include compact-border-image($color-white);
|
||||
|
||||
border-image-outset: 0;
|
||||
} @else {
|
||||
@include compact-border-image($color-black);
|
||||
|
||||
border-image-outset: 2;
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user