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

add .is-rounded class

Browse Source
This commit is contained in:
ChenYong Tian
2018-12-07 22:28:58 +08:00
parent ac13679413
commit 3929e2c616
1 changed files with 75 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
scss/elements/buttons.scss
View File

@@ -14,6 +14,65 @@
} }
} }
@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 #212529,
4px 0 $shadow,
4px -4px #212529,
8px 0 #212529,
0 4px $shadow,
4px 4px #212529,
0 8px #212529,
-4px 0 $hover-background,
inset -2px 0 $shadow,
-4px -4px #212529,
-8px 0 #212529,
-4px 4px #212529;
}
&:active {
// prettier-ignore
box-shadow:
0 -4px $shadow,
0 -8px #212529,
4px 0 $hover-background,
4px -4px #212529,
8px 0 #212529,
0 4px $hover-background,
4px 4px #212529,
0 8px #212529,
-4px 0 $shadow,
-4px -4px #212529,
-8px 0 #212529,
-4px 4px #212529;
}
// prettier-ignore
box-shadow:
0 -4px $background,
0 -8px #212529,
4px 0 $shadow,
4px -4px #212529,
8px 0 #212529,
0 4px $shadow,
4px 4px #212529,
0 8px #212529,
-4px 0 $background,
-4px -4px #212529,
-8px 0 #212529,
-4px 4px #212529;
}
// Default style // Default style
.btn { .btn {
$border-size: 4px; $border-size: 4px;
@@ -72,4 +131,20 @@
@include btn-style(nth($type, 2), nth($type, 3), nth($type, 4), nth($type, 5)); @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, #fff, #e7e7e7, #adafbc);
&::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));
}
}
}
} }