mirror of
https://github.com/Spythere/pojazdownik.git
synced 2026-05-04 03:58:11 +00:00
restruct: updated scss @import rules to @use; package upgrade
This commit is contained in:
@@ -0,0 +1,341 @@
|
||||
$breakpointMd: 960px;
|
||||
$breakpointSm: 550px;
|
||||
|
||||
$bgColor: #2b3552;
|
||||
$bgColorDarker: #1f263b;
|
||||
$textColor: #fff;
|
||||
$secondaryColor: #1b1b1b;
|
||||
$accentColor: #e4c428;
|
||||
|
||||
$sponsorColor: gold;
|
||||
$teamColor: #ff4848;
|
||||
|
||||
@font-face {
|
||||
font-family: 'Lato';
|
||||
src:
|
||||
url('/fonts/Lato-Light.woff2') format('woff2'),
|
||||
url('/fonts/Lato-Light.woff') format('woff');
|
||||
font-weight: 300;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Lato';
|
||||
src:
|
||||
url('/fonts/Lato-Bold.woff2') format('woff2'),
|
||||
url('/fonts/Lato-Bold.woff') format('woff');
|
||||
font-weight: bold;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Lato';
|
||||
src:
|
||||
url('/fonts/Lato-Regular.woff2') format('woff2'),
|
||||
url('/fonts/Lato-Regular.woff') format('woff');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
|
||||
&-track {
|
||||
background: #222;
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
&-thumb {
|
||||
border-radius: 1rem;
|
||||
background: #777;
|
||||
}
|
||||
|
||||
&-corner {
|
||||
background: #222;
|
||||
}
|
||||
}
|
||||
|
||||
body,
|
||||
html {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
font-family: Lato, sans-serif;
|
||||
|
||||
background-color: $bgColor;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
a {
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
|
||||
transition: color 250ms;
|
||||
|
||||
&:visited {
|
||||
color: white;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $accentColor;
|
||||
}
|
||||
}
|
||||
|
||||
select,
|
||||
option,
|
||||
input,
|
||||
button {
|
||||
font-family: Lato, sans-serif;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
button {
|
||||
border: none;
|
||||
outline: none;
|
||||
background: none;
|
||||
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
font-size: 1em;
|
||||
color: white;
|
||||
|
||||
&:hover {
|
||||
color: $accentColor;
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
outline: 1px solid $accentColor;
|
||||
}
|
||||
}
|
||||
|
||||
[data-tooltip]:hover::after,
|
||||
[data-tooltip]:focus::after {
|
||||
position: absolute;
|
||||
transform: translateX(10px);
|
||||
|
||||
content: attr(data-tooltip);
|
||||
color: white;
|
||||
background: black;
|
||||
padding: 0.5em;
|
||||
max-width: 300px;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
[data-tooltip] {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn,
|
||||
.link-btn {
|
||||
padding: 0.4em 0.75em;
|
||||
|
||||
outline: none;
|
||||
background-color: $secondaryColor;
|
||||
border-radius: 8px;
|
||||
font-weight: bold;
|
||||
|
||||
transition:
|
||||
color 150ms,
|
||||
background-color 150ms;
|
||||
|
||||
&:hover {
|
||||
color: $accentColor;
|
||||
}
|
||||
|
||||
&.btn--outline {
|
||||
background: none;
|
||||
font-weight: bold;
|
||||
outline: 1px solid $accentColor;
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
color: $accentColor;
|
||||
outline: 1px solid white;
|
||||
}
|
||||
|
||||
&[data-chosen='true'] {
|
||||
background-color: $accentColor;
|
||||
color: black;
|
||||
|
||||
box-shadow: 0 0 5px 1px $accentColor;
|
||||
}
|
||||
|
||||
&[data-disabled='true'] {
|
||||
user-select: none;
|
||||
pointer-events: none;
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
|
||||
opacity: 0.75;
|
||||
background-color: #2b2b2b;
|
||||
}
|
||||
|
||||
&--image {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 0.5em;
|
||||
|
||||
img {
|
||||
width: 1.3em;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
&--text {
|
||||
font-weight: bold;
|
||||
transition: all 250ms;
|
||||
background: none;
|
||||
padding: 0;
|
||||
|
||||
&:focus-visible {
|
||||
outline: 1px solid white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.link-btn.router-link-exact-active {
|
||||
color: $accentColor;
|
||||
}
|
||||
|
||||
select,
|
||||
input[type='text'],
|
||||
input[type='number'] {
|
||||
background: $bgColor;
|
||||
border: 2px solid #aaa;
|
||||
outline: none;
|
||||
|
||||
padding: 0.25em 0.35em;
|
||||
height: 100%;
|
||||
|
||||
color: white;
|
||||
font-size: 1em;
|
||||
|
||||
&:focus-visible {
|
||||
border-color: $accentColor;
|
||||
}
|
||||
|
||||
&::placeholder {
|
||||
color: #aaa;
|
||||
}
|
||||
}
|
||||
|
||||
option {
|
||||
color: white;
|
||||
border: none;
|
||||
background-color: $bgColor;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.text {
|
||||
&--accent {
|
||||
color: $accentColor;
|
||||
}
|
||||
|
||||
&--grayed {
|
||||
color: #aaa;
|
||||
}
|
||||
}
|
||||
|
||||
hr {
|
||||
height: 3px;
|
||||
background-color: white;
|
||||
outline: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.g-card {
|
||||
position: fixed;
|
||||
top: 1em;
|
||||
left: 0;
|
||||
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
z-index: 200;
|
||||
|
||||
&_bg {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
|
||||
background-color: #000000aa;
|
||||
z-index: 10;
|
||||
}
|
||||
}
|
||||
|
||||
.g-choice {
|
||||
input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
span {
|
||||
padding: 0.25em 1em;
|
||||
border-radius: 0.25em;
|
||||
border: 2px solid white;
|
||||
margin: 0.25em;
|
||||
cursor: pointer;
|
||||
|
||||
transition: all 100ms ease;
|
||||
}
|
||||
|
||||
span:focus {
|
||||
color: $accentColor;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
label > input:checked + span {
|
||||
color: $accentColor;
|
||||
border-color: $accentColor;
|
||||
}
|
||||
}
|
||||
|
||||
// Vue Transition anims
|
||||
.slide-top {
|
||||
&-enter-from,
|
||||
&-leave-to {
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
|
||||
&-enter-active,
|
||||
&-leave-active {
|
||||
transition: transform 100ms ease-in-out;
|
||||
}
|
||||
}
|
||||
|
||||
.card-appear {
|
||||
&-enter-from,
|
||||
&-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
&-enter-active,
|
||||
&-leave-active {
|
||||
transition: all 100ms ease-in-out;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user