107 lines
2.8 KiB
SCSS
107 lines
2.8 KiB
SCSS
@use 'tailwind';
|
|
|
|
@layer components {
|
|
.btn-example {
|
|
@apply bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded;
|
|
}
|
|
}
|
|
|
|
@layer utilities {
|
|
.dev-body {
|
|
width: 100%;
|
|
height: 100%;
|
|
margin: 0;
|
|
padding: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 3rem;
|
|
background-color: rgb(225, 225, 225);
|
|
font-family: "Inter", sans-serif;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.s3d {
|
|
--shadow-color: rgba(5, 5, 5, 0.25);
|
|
--lt-shadow-color: rgba(5, 5, 5, 0.1);
|
|
--highlight-color: rgba(255, 255, 255, 0.25);
|
|
--btn-raw-color: 230, 230, 230;
|
|
--light-angle: 135deg;
|
|
--radius: 999vw;
|
|
// --radius: 5em;
|
|
|
|
|
|
border-radius: var(--radius);
|
|
|
|
// all: unset;
|
|
position: relative;
|
|
padding: 1em 1.5em;
|
|
background-color: rgba(0, 0, 0, 0.75); // tiny gap
|
|
box-shadow:
|
|
-0.15em -0.15em 0.15em -0.075em var(--shadow-color), // tl
|
|
0.15em -0.15em 0.15em -0.075em var(--shadow-color), // tr
|
|
-0.15em 0.15em 0.15em -0.075em var(--shadow-color), // bl
|
|
0.0375em 0.0375em 0.0675em 0 var(--lt-shadow-color); // br // why different ? (improves perspective shadow feel?)
|
|
|
|
&::before, &::after {
|
|
content: "";
|
|
border-radius: var(--radius);
|
|
position: absolute;
|
|
// border-radius: inherit;
|
|
transition: all 250ms ease;
|
|
}
|
|
|
|
&::before {
|
|
z-index: 1;
|
|
inset: 0.025em;
|
|
box-shadow: 0.15em 0.3em 0.1em -0.01em var(--shadow-color);
|
|
}
|
|
|
|
&::after {
|
|
z-index: 2;
|
|
inset: 0.0125em;
|
|
// main button color
|
|
// TODO var it & use darken etc
|
|
background-image: linear-gradient(
|
|
var(--light-angle),
|
|
rgb(var(--btn-raw-color)),
|
|
rgba(var(--btn-raw-color), 0.7),
|
|
);
|
|
clip-path: inset(0 round var(--radius));
|
|
// inline shadows
|
|
box-shadow:
|
|
// inline-perspective shadow
|
|
0 0 0 0 inset var(--shadow-color),
|
|
// Rounding of the button itself
|
|
-0.05em -0.05em 0.05em 0 inset var(--shadow-color), // button bottom
|
|
0 0 0.05em 0.2em inset var(--highlight-color), // button top
|
|
-0.075em -0.25em 0.25em 0.1em inset var(--shadow-color); // side
|
|
}
|
|
|
|
span {
|
|
--text-gradient: linear-gradient(135deg, rgb(25, 25, 25), rgb(75, 75, 75));
|
|
|
|
position: relative;
|
|
z-index: 3;
|
|
font-family: inherit;
|
|
letter-spacing: -0.05em;
|
|
font-weight: 500;
|
|
color: transparent;
|
|
background-image: var(--text-gradient);
|
|
background-clip: text;
|
|
transition: transform 250ms ease;
|
|
display: block;
|
|
text-shadow: rgba(0, 0, 0, 0.1) 0 0 0.1em;
|
|
}
|
|
|
|
// &:hover span {
|
|
// transform: scale(0.975);
|
|
// }
|
|
|
|
// &:active span {
|
|
// transform: scale(0.95);
|
|
// }
|
|
}
|
|
}
|