mod: bar_and_box+*style+*asset input

$bar_stripe_color: $dark !default; ._card-link { cursor: pointer; } .bar { border: 1px solid $border-color; &:hover { cursor: pointer; > .bar-body, > .bar-menu, > .accordion-header >.accordion-button { background-color: $gray-200; } } &.accordion-item { .bar-left, .bar-right { padding: 0; } } } .selected .bar, .selected .box { border: 3px solid $primary !important; } // not sure this ever gets used: .bar-accordion { .accordion-body { padding: 0; .bar { border-left: 1px solid $border-color !important; } } } .bar { border-left: 3px solid $bar_stripe_color !important; .media { width: 100% } .media-left { max-width: 25% } } .bar-left, .bar-right, .bar-middle { display: flex; padding: 0.5rem; flex-wrap: wrap; align-items: center; } .bar-left { font-weight: bold; align-items: flex-start; } .bar-middle { justify-content: center; } .bar-right { justify-content: flex-end; } .bar-menu { min-width: 3em; width: 3em; display: flex; align-items: center; } .bar-body { width: 100%; display: flex; } .bar.with-bar-menu .bar-body { width: calc(100% - 3em); } .bar-menu-button { padding: 0.25em; // border-radius: 5px; &:hover { background-color: $secondary; color: $white; } // disable bootstrap dropdown caret &:after { display: none; } } // links in bar menu .bar-menu-list a i { padding-right: 0.4em; } // card submenu in accordion bar .accordion-subheader > .card-menu { position: static; background: inherit !important; } @include media-breakpoint-up(md) { .bar-menu-button { display: none; } ._card-link:hover .bar-menu-button { display: flex; } } $box_stripe_color: $secondary !default; .box { border: 1px solid $border-color; box-shadow: $box-shadow-sm; &:hover { box-shadow: $box-shadow-lg; cursor: pointer } border-top: 3px solid $box_stripe_color; width: 320px; } .box-top { display: flex; min-height: 60px; flex-direction: column; justify-content: center; overflow: auto; h1, h2, h3, h4, h5, h6, div, span, a { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } } .box-middle { min-height: 180px; overflow: hidden; text-overflow: ellipsis; display: flex; justify-content: center; img { object-fit: contain; height: 130px; width: 190px; } i { display: flex; justify-content: center; min-height: 130px; align-items: center; font-size: 70px; color: $text-muted; } } .box-bottom { display: flex; align-items: center; justify-content: space-around; } // card-list in which items are in box view .card-list-box { display: flex; flex-wrap: wrap; justify-content: center; } // wrapper around box in list context .item-box { display: inline-block; padding: 10px 1%; vertical-align: top; } //images @mixin image-box-size($sizename, $sidelength) { &.#{$sizename} { width: $sidelength; height: $sidelength; min-width: $sidelength; min-height: $sidelength; i { font-size: $sidelength / 2; } } } .image-box { display: flex; align-items: center; justify-content: center; width: 94px; height: 94px; min-width: 94px; min-height: 94px; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; border: 1px solid #eee; border-radius: 0; background-color: $gray-100; margin-right: 0.5rem; overflow: hidden; //text-align: center; @include image-box-size(icon, 16px); @include image-box-size(small, 40px); @include image-box-size(medium, 64px); @include image-box-size(large, 94px); @include image-box-size(xlarge, 150px); a, i { width: 100%; text-align: center; } i { color: $text-muted; } &.icon a { line-height: 0; height: 8px; } img { max-width: 100%; max-height: 100%; height: auto; display: inline !important; } } @media (max-width: 1260px) { .image-box { @include image-box-size(large, 120px); } .media-body { padding: 6px; } } @include media-breakpoint-down(sm) { .image-box { @include image-box-size(xlarge, 100px); @include image-box-size(large, 80px); } .media-body { padding: 4px; } } .media { display: flex; } .media-body { .media-heading { a { color: inherit; } } .media-text { clear: both; } }