$thickColumnWidth: 304px; $thinColumnWidth: 240px; //Column layout .column-container { column-fill: balance; column-gap: 0px; column-width: $thickColumnWidth; padding: 4px; &.thin-columns { column-count: 4; column-width: $thinColumnWidth; } & > div { padding: 4px; //stop divs breaking over multiple columns -webkit-column-break-inside: avoid; page-break-inside: avoid; break-inside: avoid; } } //Cards .card { background: white; border-radius: 2px; .top { cursor: pointer; padding: 16px; border-radius: 2px 2px 0 0; &.white { cursor: auto; padding: 16px; border-bottom: rgba(0,0,0,0.12) solid 1px; } paper-checkbox::shadow #ink[checked] { color: #ffffff; } paper-checkbox::shadow #ink { color: #ffffff; } paper-checkbox::shadow #checkbox.checked { background-color: #ffffff; background-color: rgba(255,255,255,0.27); border-color: #ffffff; border-color: rgba(255,255,255,0.27); } paper-checkbox::shadow #checkbox { border-color: #ffffff; border-color: rgba(255,255,255,0.54); } } .bottom { padding: 16px; border-radius: 0 0 2px 2px; &.list { padding: 0 0 16px 0; .subhead { color: rgba(0,0,0,0.54); font-size: 14px; font-weight: 500; letter-spacing: 0.010em; padding: 12px 16px 12px 16px; } } &.text { white-space: pre-wrap; } } .left { padding: 16px; border-radius: 2px 0 0 2px; text-align: center; min-width: 72px; } .right { padding: 16px; border-radius: 0 2px 2px 0; } } /* undo pointer cursor on detail box heading */ #globalDetail.card .top { cursor: auto; }