.icon-bar { width: 100%; font-size: 0; display: inline-block; background: white; } .icon-bar > * { text-align: center; font-size: 1rem; width: 25%; margin: 0 auto; display: block; padding: 1.25rem; float: left; } .icon-bar > * i, .icon-bar > * img { display: block; margin: 0 auto; } .icon-bar > * i + label, .icon-bar > * img + label { margin-top: .0625rem; } .icon-bar > * i { font-size: 1.5rem; vertical-align: middle; } .icon-bar > * img { width: 1.5rem; height: 1.5rem; } .icon-bar.label-right > * i, .icon-bar.label-right > * img { margin: 0 .0625rem 0 0; display: inline-block; } .icon-bar.label-right > * i + label, .icon-bar.label-right > * img + label { margin-top: 0; } .icon-bar.label-right > * label { display: inline-block; } .icon-bar.vertical.label-right > * { text-align: left; } .icon-bar.vertical, .icon-bar.small-vertical { height: 100%; width: auto; } .icon-bar.vertical .item, .icon-bar.small-vertical .item { width: auto; margin: auto; float: none; } @media only screen and (min-width: 40.063em) { .icon-bar.medium-vertical { height: 100%; width: auto; } .icon-bar.medium-vertical .item { width: auto; margin: auto; float: none; } } @media only screen and (min-width: 64.063em) { .icon-bar.large-vertical { height: 100%; width: auto; } .icon-bar.large-vertical .item { width: auto; margin: auto; float: none; } } .icon-bar > * { font-size: 1rem; padding: 1.25rem; } .icon-bar > * i + label, .icon-bar > * img + label { margin-top: .0625rem; } .icon-bar > * i { font-size: 1.5rem; } .icon-bar > * img { width: 1.5rem; height: 1.5rem; } .icon-bar > * label { color: #FFFFFF; } .icon-bar > * i { color: rgba(0,0,0,.5); } .icon-bar > a:hover { background: white; } .icon-bar > a:hover label { color: rgba(255,255,255,.2); } .icon-bar > a:hover i { color: rgba(0,0,0,.75); } .icon-bar > a.active { background: #008CBA; } .icon-bar > a.active label { color: #FFFFFF; } .icon-bar > a.active i { color: #FFFFFF; } .icon-bar .item.disabled { opacity: 0.7; cursor: not-allowed; pointer-events: none; } .icon-bar .item.disabled > * { opacity: 0.7; cursor: not-allowed; } .icon-bar.two-up .item { width: 50%; } .icon-bar.two-up.vertical .item, .icon-bar.two-up.small-vertical .item { width: auto; } @media only screen and (min-width: 40.063em) { .icon-bar.two-up.medium-vertical .item { width: auto; } } @media only screen and (min-width: 64.063em) { .icon-bar.two-up.large-vertical .item { width: auto; } } .icon-bar.three-up .item { width: 33.3333%; } .icon-bar.three-up.vertical .item, .icon-bar.three-up.small-vertical .item { width: auto; } @media only screen and (min-width: 40.063em) { .icon-bar.three-up.medium-vertical .item { width: auto; } } @media only screen and (min-width: 64.063em) { .icon-bar.three-up.large-vertical .item { width: auto; } } .icon-bar.four-up .item { width: 25%; } .icon-bar.four-up.vertical .item, .icon-bar.four-up.small-vertical .item { width: auto; } @media only screen and (min-width: 40.063em) { .icon-bar.four-up.medium-vertical .item { width: auto; } } @media only screen and (min-width: 64.063em) { .icon-bar.four-up.large-vertical .item { width: auto; } } .icon-bar.five-up .item { width: 20%; } .icon-bar.five-up.vertical .item, .icon-bar.five-up.small-vertical .item { width: auto; } @media only screen and (min-width: 40.063em) { .icon-bar.five-up.medium-vertical .item { width: auto; } } @media only screen and (min-width: 64.063em) { .icon-bar.five-up.large-vertical .item { width: auto; } } .icon-bar.six-up .item { width: 16.66667%; } .icon-bar.six-up.vertical .item, .icon-bar.six-up.small-vertical .item { width: auto; } @media only screen and (min-width: 40.063em) { .icon-bar.six-up.medium-vertical .item { width: auto; } } @media only screen and (min-width: 64.063em) { .icon-bar.six-up.large-vertical .item { width: auto; } } .icon-bar.seven-up .item { width: 14.28571%; } .icon-bar.seven-up.vertical .item, .icon-bar.seven-up.small-vertical .item { width: auto; } @media only screen and (min-width: 40.063em) { .icon-bar.seven-up.medium-vertical .item { width: auto; } } @media only screen and (min-width: 64.063em) { .icon-bar.seven-up.large-vertical .item { width: auto; } } .icon-bar.eight-up .item { width: 12.5%; } .icon-bar.eight-up.vertical .item, .icon-bar.eight-up.small-vertical .item { width: auto; } @media only screen and (min-width: 40.063em) { .icon-bar.eight-up.medium-vertical .item { width: auto; } } @media only screen and (min-width: 64.063em) { .icon-bar.eight-up.large-vertical .item { width: auto; } }