Kamil Niemczycki
7bee728518
* installed tailwind * updated menu - tailwind * removed old style * updated container size for navigation * updated footer style - tailwind * updated header style - tailwind * updated colors * updated about section - tailwind * updated experiences style - tailwind * WIP * improved responsiveness * updated favorite projects * updated buttons * updated projects view * updated footer style * updated about view * updated project view * updated style for contact form * updated mail contact * final style update * fixed buttons * fix scroll button * added autoscroll for contact form * updated paths in project * empty line added * unnecessary comment removed
112 lines
1.9 KiB
SCSS
112 lines
1.9 KiB
SCSS
@import "colors";
|
|
|
|
$default-color: transparent !default;
|
|
$dark-gray: #4f4f4f !default;
|
|
$navy-blue: #436da7 !default;
|
|
$white: white !default;
|
|
|
|
$btn-colors: (
|
|
border: $dark-gray,
|
|
bg: $default-color,
|
|
font: $dark-gray,
|
|
hover: (
|
|
bg: $dark-gray,
|
|
font: $white
|
|
)
|
|
);
|
|
|
|
.btn {
|
|
display: block;
|
|
min-width: 270px;
|
|
padding: 8px 10px;
|
|
|
|
@apply border-4 rounded-md;
|
|
border-style: solid;
|
|
border-color: $default-color;
|
|
|
|
background-color: map-get($btn-colors, bg);
|
|
}
|
|
|
|
@mixin btn($colors: $btn-colors) {
|
|
border-color: map-get($colors, border);
|
|
background-color: map-get($colors, bg);
|
|
|
|
font-size: 1.05em;
|
|
color: map-get($colors, font);
|
|
|
|
&[disabled] {
|
|
opacity: .7;
|
|
}
|
|
|
|
&:hover:not([disabled]) {
|
|
$hovers: map-get($colors, hover);
|
|
background-color: map-get($hovers, bg);
|
|
color: map-get($hovers, font);
|
|
}
|
|
|
|
@content;
|
|
}
|
|
|
|
@mixin btn-reverse($leading-color: $dark-gray) {
|
|
$colors: (
|
|
border: $leading-color,
|
|
bg: $leading-color,
|
|
font: $white,
|
|
hover: (
|
|
bg: $default-color,
|
|
font: $leading-color
|
|
)
|
|
);
|
|
@include btn($colors);
|
|
}
|
|
|
|
@mixin button($reverse: false, $has-icon: false) {
|
|
@if not $reverse {
|
|
@include btn()
|
|
} @else {
|
|
@include btn-reverse($navy-blue);
|
|
}
|
|
@if $has-icon {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
.icon {
|
|
margin-right: 10px;
|
|
font-size: 1.3em;
|
|
}
|
|
}
|
|
@content;
|
|
}
|
|
|
|
@mixin ghost-button($has-icon: false) {
|
|
@include button($has-icon: $has-icon);
|
|
|
|
position: relative;
|
|
font-size: 1.2em;
|
|
border: unset;
|
|
|
|
&:hover:not([disabled]) {
|
|
background-color: $default-color;
|
|
color: $dark-gray;
|
|
|
|
&::after {
|
|
width: 98%;
|
|
}
|
|
}
|
|
|
|
&::after {
|
|
content: '';
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
margin: 0 auto;
|
|
width: 30%;
|
|
height: 2px;
|
|
background-color: $dark-gray;
|
|
transform: translateY(2px);
|
|
transition: width .3s linear;
|
|
}
|
|
}
|