Félix Péault
cdabe6935b
It's been tricky but got there finally! Hello `:global` - Avoid using one global CSS file containing everything - Import the component SCSS file in a script tag from the component file to allow style scoping and including it only when used
125 lines
2.4 KiB
SCSS
125 lines
2.4 KiB
SCSS
// CSS Variables
|
|
:root {
|
|
// Sizes
|
|
--container-width: #{$container-width};
|
|
|
|
// Animation
|
|
--ease-quart: cubic-bezier(.165, .84, .44, 1);
|
|
--ease-cubic: cubic-bezier(.785, .135, .15, .86);
|
|
--ease-inout-quart: cubic-bezier(.76, 0, .24, 1);
|
|
}
|
|
|
|
html {
|
|
font: #{$base-font-size}/1.2 $font-sans;
|
|
font-weight: 400;
|
|
color: #fff;
|
|
min-width: 320px;
|
|
word-break: normal;
|
|
}
|
|
body {
|
|
@include font-smooth;
|
|
background: $color-primary;
|
|
color: #fff;
|
|
cursor: default;
|
|
overflow-x: hidden;
|
|
overscroll-behavior: none;
|
|
}
|
|
*, *:before, *:after {
|
|
text-rendering: optimizeLegibility;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
strong {
|
|
font-weight: 600;
|
|
}
|
|
em {
|
|
font-style: normal;
|
|
}
|
|
figure, p, dl, dt, dd, ul, ol, li {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
figure, picture {
|
|
display: block;
|
|
}
|
|
nav li:before {
|
|
display: none;
|
|
}
|
|
label {
|
|
cursor: pointer;
|
|
}
|
|
button {
|
|
background: none;
|
|
border: none;
|
|
cursor: pointer;
|
|
|
|
&:global([disabled]) {
|
|
cursor: not-allowed;
|
|
}
|
|
}
|
|
|
|
// Accessibility outline
|
|
// Remove default focus styles for mouse users if :focus-visible is supported
|
|
[data-js-focus-visible] :focus:not([data-focus-visible-added]) {
|
|
outline: none;
|
|
}
|
|
[data-focus-visible-added], *:focus-visible {
|
|
outline: 1px dashed $color-secondary;
|
|
}
|
|
input[type="text"], input[type="email"], input[type="password"] {
|
|
outline: none;
|
|
}
|
|
|
|
// Selection
|
|
::selection { color: #fff; background: $color-secondary; }
|
|
::-moz-selection { color: #fff; background: $color-secondary; }
|
|
|
|
// Images glitches fix
|
|
// img {backface-visibility: hidden;}
|
|
|
|
|
|
|
|
/* Titles
|
|
========================================================================== */
|
|
#{headings(1,6)} {
|
|
margin: 0;
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
}
|
|
|
|
|
|
/* Global elements
|
|
========================================================================== */
|
|
// Split text elements
|
|
.word, .char {
|
|
display: inline-block;
|
|
transform-style: preserve-3d;
|
|
will-change: transform;
|
|
}
|
|
.text-split {
|
|
span, &__line {
|
|
display: inline-block;
|
|
transition: opacity 0.7s var(--ease-quart), transform 0.7s var(--ease-quart);
|
|
}
|
|
}
|
|
|
|
// Mask for animations
|
|
.mask {
|
|
display: block;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
|
|
span {
|
|
display: inline-block;
|
|
}
|
|
}
|
|
|
|
// Page loading overlay
|
|
.page-loading {
|
|
position: fixed;
|
|
z-index: 2000;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
cursor: wait;
|
|
} |