hensei-web/components/job/JobSkillItem/index.module.scss
Justin Edmund 4c5fb3c28d Rename all files and fix imports
* Renaming index.scss files to index.module.scss
* Changing `import from` to `import styles from`
2023-06-23 13:19:38 -07:00

88 lines
1.5 KiB
SCSS

.JobSkills {
&.editable .JobSkill {
.Info {
padding: $unit-half * 1.5;
& > img,
& > div.placeholder {
width: $unit-4x;
height: $unit-4x;
}
}
}
}
.JobSkill {
display: flex;
align-items: stretch;
justify-content: space-between;
&.editable .Info:hover {
background-color: var(--button-bg-hover);
}
&.editable:hover {
cursor: pointer;
.Info {
& > img.editable,
& > div.placeholder.editable {
border: $hover-stroke;
box-shadow: $hover-shadow;
cursor: pointer;
transform: $scale-tall;
}
& p.placeholder {
color: var(--text-tertiary-hover);
}
& svg {
fill: var(--icon-secondary-hover);
}
}
}
.Info {
align-items: center;
border-radius: $input-corner;
display: flex;
flex-grow: 1;
gap: $unit;
& > img,
& > div.placeholder {
background: var(--card-bg);
border-radius: calc($unit / 2);
border: 1px solid rgba(0, 0, 0, 0);
width: $unit-5x;
height: $unit-5x;
}
& > div.placeholder {
display: flex;
align-items: center;
justify-content: center;
& > svg {
fill: var(--icon-secondary);
width: $unit-2x;
height: $unit-2x;
}
}
}
& > .Button {
justify-content: center;
max-width: $unit-6x;
height: auto;
}
p {
color: var(--text-primary);
&.placeholder {
color: var(--text-tertiary);
}
}
}