/** Sheets **/ &.sheet { article { .skills-wrapper, .techniques-wrapper { flex: 50%; > li { display: flex; flex-wrap: wrap; font-size: 0.85rem; margin: 0 0 1rem; border: 1px solid $l5r5e-title; --notchSize: 0.75rem; clip-path: polygon( 0% var(--notchSize), var(--notchSize) 0%, 100% 0, 100% 0, 100% 100%, 100% 100%, 0 100%, 0 100% ); h4 { flex: 100%; margin: 0; padding: 0.5rem 0.5rem 0; text-align: center; background: $l5r5e-title; color: $l5r5e-label; --notchSize: 0.5rem; clip-path: polygon( 0% var(--notchSize), var(--notchSize) 0%, calc(100%) 0%, 100% var(--notchSize), 100% calc(100% - var(--notchSize)), calc(100% - var(--notchSize)) 100%, var(--notchSize) 100%, 0% calc(100%) ); } ul { flex: 100%; padding: 0 0.15rem; li { text-align: left; line-height: 2rem; margin: 0.25rem 0; } &.skill-category-skills-list { img { width: 32px; height: 32px; object-fit: contain; object-position: 50% 0; border: none; padding: 2px 0; } input { text-align: center; } .item-header { flex: 4; align-items: center; h4 { margin: 0; } .item-img { height: 32px; margin: 0; flex: 0 0 32px; } .item-rank { flex: 0 0 32px; text-align: center; } .item-edit, .item-delete { text-align: center; line-height: 1rem; font-size: 0.75rem; flex: 0 0 1rem; padding: 0 0.1rem; color: $black-light; } } } &.skill-category-ring-actions { padding: 0.25rem 0 0.25rem 0.5rem; border-top: 1px dashed $l5r5e-title; border-left: 1px solid $l5r5e-title; display: flex; flex-direction: row; flex-wrap: wrap; align-content: center; justify-content: space-evenly; } } input { width: 1.75rem; height: 1.75rem; text-align: center; } &:last-child { margin: 0; } } } } }