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;
}
}