Snippets

David Hund Barista Dashboard CSS updates

Created by David Hund
.duplicate {
    margin:10px;
    padding:10px;
}

.duplicate_auto {
    background: #cce;
}

.duplicate_auto.duplicate_manual {
    background: #ece;
}

.duplicate_manual {
    background: #ecc;
}

body {
    counter-reset: select 0;
}

img[src*="shadow.png"] {
    display: none;
}

div.duplicate {
    margin-bottom: 1.5rem;
}

/* Hide/collapse de-selected content */
.duplicate_manual {
    opacity: .3;
}
.duplicate_manual * {
    font-size: 1em;
}
.duplicate_manual .barista-image,
.duplicate_manual p,
.duplicate_manual h3 {
    display: none;
}
.duplicate_manual p:first-of-type {
    display: block;
}

/* Add counter to included items */
div.duplicate:not(.duplicate_manual) {
    counter-increment: include;
    position: relative;
    box-shadow: 0 0 .5rem rgba(0,0,0,.5); 
}
div.duplicate:not(.duplicate_manual):before {
    content: counter(include);
    display: inline-block;
    position: absolute;
    top: -1rem;
    left: calc( 50% - 2rem);
    left: auto;
    right: -1rem;
    background: #6F6;
    color: #FFF;
    font-size: 2rem;
    line-height: 1.25;
    width: 1.25em;
    height: 1.25em;
    border-radius: 50%;
    text-align: center;
}

Comments (0)

HTTPS SSH

You can clone a snippet to your computer for local editing. Learn more.