No edit summary |
No edit summary |
||
Line 11: | Line 11: | ||
.navicust-grid__cell { | .navicust-grid__cell { | ||
position: relative; | |||
background-color: #202020; | background-color: #202020; | ||
color: transparent; | color: transparent; | ||
Line 18: | Line 19: | ||
.navicust-grid__cell--filled { | .navicust-grid__cell--filled { | ||
background: var(--part-fill); | background: var(--part-fill); | ||
} | |||
.navicust-grid--plus .navicust-grid__cell--filled:before { | |||
position: absolute; | |||
width: 100%; | |||
background-color: var(--part-stroke); | |||
} | |||
.navicust-grid--plus .navicust-grid__cell--filled:after { | |||
position: absolute; | |||
width: 100%; | |||
background-color: var(--part-stroke); | |||
} | } |
Revision as of 03:44, 19 October 2022
.navicust-grid {
display: grid;
grid-template-columns: repeat(7, 28px);
grid-template-rows: repeat(7, 28px);
grid-column-gap: 3px;
grid-row-gap: 3px;
margin: 1rem auto;
background: #000;
border: 3px solid #000;
}
.navicust-grid__cell {
position: relative;
background-color: #202020;
color: transparent;
text-align: center;
}
.navicust-grid__cell--filled {
background: var(--part-fill);
}
.navicust-grid--plus .navicust-grid__cell--filled:before {
position: absolute;
width: 100%;
background-color: var(--part-stroke);
}
.navicust-grid--plus .navicust-grid__cell--filled:after {
position: absolute;
width: 100%;
background-color: var(--part-stroke);
}