hensei-web/components/JobSkillResult/index.scss

71 lines
1.2 KiB
SCSS

.JobSkillResult {
border-radius: 6px;
display: flex;
gap: $unit;
padding: $unit * 1.5;
align-items: center;
&:hover {
background: $grey-90;
cursor: pointer;
.Info .skill.pill {
background: $grey-80;
}
}
.Info {
display: flex;
flex-direction: row;
gap: calc($unit / 2);
width: 100%;
.skill.pill {
background: $grey-90;
border-radius: $unit * 2;
color: $grey-00;
display: inline;
font-size: $font-tiny;
font-weight: $medium;
padding: calc($unit / 2) $unit;
&.buffing {
background-color: $light-bg-dark;
color: $light-text-dark;
}
&.debuffing {
background-color: $water-bg-dark;
color: $water-text-dark;
}
&.healing {
background-color: $wind-bg-dark;
color: $wind-text-dark;
}
&.damaging {
background-color: $fire-bg-dark;
color: $fire-text-dark;
}
&.field {
background-color: $dark-bg-dark;
color: $dark-text-dark;
}
}
h5 {
color: #555;
display: inline-block;
font-size: $font-medium;
font-weight: $medium;
flex-grow: 1;
}
}
img {
width: $unit * 6;
height: $unit * 6;
}
}