Fanrouver
74 lines
1.1 KiB
SCSS
74 lines
1.1 KiB
SCSS
// Gunakan @use daripada @import
|
|
@use "./variables" as *;
|
|
@use "./colors" as *;
|
|
@use "./typography" as *;
|
|
|
|
// Global styles
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html {
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
background-color: var(--color-background);
|
|
color: var(--color-textPrimary);
|
|
transition:
|
|
background-color 0.3s ease,
|
|
color 0.3s ease;
|
|
}
|
|
|
|
// Selection color
|
|
::selection {
|
|
background-color: var(--color-primary-300);
|
|
color: var(--color-primary-700);
|
|
}
|
|
|
|
// Focus styles
|
|
:focus-visible {
|
|
outline: 2px solid var(--color-primary-500);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
// Responsive images
|
|
img {
|
|
max-width: 100%;
|
|
height: auto;
|
|
display: block;
|
|
}
|
|
|
|
// Links
|
|
a {
|
|
color: var(--color-primary-500);
|
|
text-decoration: none;
|
|
transition: color 0.2s ease;
|
|
|
|
&:hover {
|
|
color: var(--color-primary-600);
|
|
}
|
|
|
|
&:active {
|
|
color: var(--color-primary-700);
|
|
}
|
|
}
|
|
|
|
// Buttons base
|
|
button {
|
|
font-family: $font-family-base;
|
|
cursor: pointer;
|
|
border: none;
|
|
outline: none;
|
|
transition: all 0.2s ease;
|
|
|
|
&:disabled {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
}
|
|
}
|