@mixin vertical-center() { display: flex; align-items: center; justify-content: center; } @mixin artist-album-card() { justify-content: space-between; flex-wrap: wrap; display: flex; .item { display: flex; flex: 0 0 256px; flex-direction: column; margin-bottom: 16px; .cover { @include vertical_center(); display: flex; flex: 0 0 256px; background-repeat: no-repeat; background-size: cover; background-position: center center; position: relative; .control { display: none; width: 96px; height: 96px; text-align: center; line-height: 96px; font-size: 54px; background: #111; border-radius: 50%; text-indent: 5px; opacity: .7; border: 1px solid transparent; transition: .3s; &:hover { opacity: 1; border-color: #fff; transform: scale(1.1); } } &:before { content: " "; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; transition: .3s; } &:hover { &:before { background-color: rgba(0, 0, 0, .4); } .control { display: block; } } } footer { padding: 16px; background: #333; flex: 1; } .name { font-weight: 500; } .meta { color: $color2ndText; margin-top: 4px; font-size: 12px; } } @media only screen and (max-device-width : 768px) and (orientation : portrait) { justify-content: center; } @media only screen and (min-device-width: 769px) and (max-device-width : 1024px) { justify-content: space-around; } } @mixin inset-when-pressed() { &:active { box-shadow: inset 0px 10px 10px -10px rgba(0,0,0,1); } } @mixin button-group() { display: flex; position: relative; button { $buttonHeight: 28px; background-color: $colorHighlight; font-size: 12px; height: $buttonHeight; padding: 0 16px; line-height: $buttonHeight; text-transform: uppercase; display: inline-block; border-radius: $buttonHeight/2 0px 0px $buttonHeight/2; &:last-of-type { border-top-right-radius: $buttonHeight/2; border-bottom-right-radius: $buttonHeight/2; } &:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: 1px; } i { margin-right: 4px; } &:hover { background-color: darken($colorHighlight, 10%); } @include inset-when-pressed(); } }