70 lines
1.2 KiB
SCSS
70 lines
1.2 KiB
SCSS
$base-white: rgba(255, 255, 255, 1);
|
|
$base-red: rgba(255, 12, 0, 1);
|
|
$base-green: rgb(3, 159, 55);
|
|
$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);
|
|
$invisible-gray: rgba(126, 126, 126, 0.5);
|
|
|
|
$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.4rem;
|
|
padding: 1rem 0.8rem;
|
|
@include stretch;
|
|
|
|
&::placeholder {
|
|
color: $base-gray;
|
|
}
|
|
}
|
|
|
|
@mixin sectionTitle {
|
|
font-size: 2.4rem;
|
|
// color: $base-black;
|
|
color: black;
|
|
letter-spacing: 0.1rem;
|
|
line-height: 3.3rem;
|
|
}
|
|
|
|
@mixin input {
|
|
border: 1px solid #00822c;
|
|
padding: 1.4rem;
|
|
}
|