feat: Add SCSS structure with variables, mixins, and component styles
- Created _variables.scss for color, spacing, typography, and breakpoints. - Added _mixins.scss for reusable styles including responsive breakpoints, transitions, and box shadows. - Implemented styles for various components: header, hero, about, contact, education, projects, and skills. - Established a main.scss file to import component styles and an index.scss for global styles.
This commit is contained in:
Dayron
231
src/styles/components/_contact.scss
Normal file
231
src/styles/components/_contact.scss
Normal file
@@ -0,0 +1,231 @@
|
||||
// ========================
|
||||
// CONTACT SECTION SCSS
|
||||
// ========================
|
||||
|
||||
@use '../variables' as *;
|
||||
@use '../mixins' as *;
|
||||
|
||||
.contact {
|
||||
padding: var(--section-padding);
|
||||
background: var(--bg-secondary);
|
||||
|
||||
&-content {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 60px;
|
||||
|
||||
@include respond-to(md) {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
&-intro {
|
||||
h3 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
font-size: map-get($font-sizes, xl);
|
||||
font-weight: 700;
|
||||
margin-bottom: 16px;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
p {
|
||||
color: var(--text-secondary);
|
||||
line-height: 1.7;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
&-methods {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
margin-bottom: 40px;
|
||||
|
||||
.contact-method {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
padding: 20px;
|
||||
background: var(--bg-primary);
|
||||
border-radius: $border-radius;
|
||||
@include box-shadow(light);
|
||||
@include transition();
|
||||
|
||||
&:hover {
|
||||
transform: translateX(8px);
|
||||
@include box-shadow(medium);
|
||||
}
|
||||
|
||||
.contact-icon {
|
||||
@include icon-container(50px, $primary-color, $border-radius);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.contact-details {
|
||||
h4 {
|
||||
font-weight: 600;
|
||||
margin-bottom: 4px;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
span {
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.social-links {
|
||||
h4 {
|
||||
margin-bottom: 16px;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.social-grid {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
|
||||
@include respond-to(md) {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.social-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 12px 16px;
|
||||
background: var(--bg-primary);
|
||||
border-radius: $border-radius;
|
||||
@include box-shadow(light);
|
||||
@include transition();
|
||||
|
||||
&:hover {
|
||||
@include box-shadow(medium);
|
||||
}
|
||||
|
||||
.social-icon {
|
||||
@include icon-container(32px, $primary-color, 6px);
|
||||
}
|
||||
|
||||
span {
|
||||
font-weight: 500;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-form-container {
|
||||
h3 {
|
||||
font-size: map-get($font-sizes, xl);
|
||||
font-weight: 700;
|
||||
margin-bottom: 24px;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.success-message {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
background: $accent-color;
|
||||
color: white;
|
||||
padding: 16px;
|
||||
border-radius: $border-radius;
|
||||
margin-bottom: 24px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.contact-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
|
||||
.form-row {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 20px;
|
||||
|
||||
@include respond-to(md) {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.form-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
|
||||
label {
|
||||
font-weight: 500;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
input,
|
||||
textarea {
|
||||
padding: 12px 16px;
|
||||
border: 2px solid var(--border-color);
|
||||
border-radius: $border-radius;
|
||||
background: var(--bg-primary);
|
||||
color: var(--text-primary);
|
||||
font-family: inherit;
|
||||
@include transition(border-color);
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
border-color: $primary-color;
|
||||
}
|
||||
|
||||
&::placeholder {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
}
|
||||
|
||||
textarea {
|
||||
resize: vertical;
|
||||
min-height: 120px;
|
||||
}
|
||||
}
|
||||
|
||||
.submit-btn {
|
||||
@include button-primary();
|
||||
justify-content: center;
|
||||
gap: 12px;
|
||||
padding: 16px 32px;
|
||||
font-size: map-get($font-sizes, base);
|
||||
|
||||
&:disabled {
|
||||
opacity: 0.7;
|
||||
cursor: not-allowed;
|
||||
|
||||
&:hover {
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
.loading-spinner {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border: 2px solid transparent;
|
||||
border-top: 2px solid white;
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-footer {
|
||||
text-align: center;
|
||||
margin-top: 60px;
|
||||
padding-top: 40px;
|
||||
border-top: 1px solid var(--border-color);
|
||||
|
||||
p {
|
||||
color: var(--text-muted);
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user