68 lines
1.2 KiB
SCSS
68 lines
1.2 KiB
SCSS
|
$base-white: rgba(255, 255, 255, 1);
|
||
|
|
$base-red: rgba(255, 12, 0, 1);
|
||
|
|
$base-green: rgba(0, 130, 44, 1);
|
||
|
|
$base-black: rgba(36, 36, 36, 1);
|
||
|
|
$light-black: rgba(56, 56, 56, 1);
|
||
|
|
$base-gray: rgba(0, 0, 0, 0.6);
|
||
|
|
$mild-gray: rgba(85, 85, 85, 1);
|
||
|
|
$light-gray: rgba(101, 101, 101, 1);
|
||
|
|
|
||
|
|
$border-black: rgba(0, 0, 0, 1); // Mixins
|
||
|
|
@mixin flex($dir: row) {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: $dir;
|
||
|
|
}
|
||
|
|
|
||
|
|
@mixin stretch {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
@mixin transition-std($duration: 0.3s) {
|
||
|
|
transition: $duration all ease;
|
||
|
|
}
|
||
|
|
|
||
|
|
@mixin imgStyle($mWidth: unset, $mHeight: unset, $objFit: cover) {
|
||
|
|
max-width: $mWidth;
|
||
|
|
max-height: $mHeight;
|
||
|
|
@include stretch;
|
||
|
|
|
||
|
|
img {
|
||
|
|
@include stretch;
|
||
|
|
object-fit: $objFit;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@mixin grid($row, $layout) {
|
||
|
|
display: grid;
|
||
|
|
|
||
|
|
@if ($row) {
|
||
|
|
grid-template-rows: $layout;
|
||
|
|
} @else {
|
||
|
|
grid-template-columns: $layout;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@mixin input {
|
||
|
|
border: 0.1rem solid $border-black;
|
||
|
|
font-size: 1.2rem;
|
||
|
|
padding: 1rem 0.8rem;
|
||
|
|
@include stretch;
|
||
|
|
|
||
|
|
&::placeholder {
|
||
|
|
color: $base-gray;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@mixin sectionTitle {
|
||
|
|
font-size: 2.4rem;
|
||
|
|
color: $base-black;
|
||
|
|
letter-spacing: 0.1em;
|
||
|
|
line-height: 3.3rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
@mixin input {
|
||
|
|
border: 1px solid #00822c;
|
||
|
|
padding: 1.4rem;
|
||
|
|
}
|