123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460 |
- // Foundation by ZURB
- // foundation.zurb.com
- // Licensed under MIT Open Source
- @import 'global';
- // @name
- // @dependencies _global.scss
- $include-html-icon-bar-classes: $include-html-classes !default;
- // @variables
- // We use these to style the icon-bar and items
- $icon-bar-bg: $oil !default;
- $icon-bar-font-color: $white !default;
- $icon-bar-font-color-hover: $icon-bar-font-color !default;
- $icon-bar-font-size: 1rem !default;
- $icon-bar-hover-color: $primary-color !default;
- $icon-bar-icon-color: $white !default;
- $icon-bar-icon-color-hover: $icon-bar-icon-color !default;
- $icon-bar-icon-size: 1.875rem !default;
- $icon-bar-image-width: 1.875rem !default;
- $icon-bar-image-height: 1.875rem !default;
- $icon-bar-active-color: $primary-color !default;
- $icon-bar-item-padding: 1.25rem !default;
- // We use this to set default opacity and cursor for disabled icons.
- $icon-bar-disabled-opacity: .7 !default;
- $icon-bar-disabled-cursor: $cursor-disabled-value !default;
- //
- // @mixins
- //
- // We use this mixin to create the base styles for our Icon bar element.
- //
- @mixin icon-bar-base() {
- display: inline-block;
- font-size: 0;
- width: 100%;
- > * {
- display: block;
- float: left;
- font-size: $icon-bar-font-size;
- margin: 0 auto;
- padding: $icon-bar-item-padding;
- text-align: center;
- width: 25%;
- i, img {
- display: block;
- margin: 0 auto;
- & + label {
- margin-top: .0625rem;
- }
- }
- i {
- font-size: $icon-bar-icon-size;
- vertical-align: middle;
- }
- img {
- height: $icon-bar-image-height;
- width: $icon-bar-image-width;
- }
- }
- &.label-right > * {
- i, img {
- display: inline-block;
- margin: 0 .0625rem 0 0;
- & + label {
- margin-top: 0;
- }
- }
- label { display: inline-block; }
- }
- &.vertical.label-right > * {
- text-align: left;
- }
- &.vertical, &.small-vertical{
- height: 100%;
- width: auto;
- .item {
- float: none;
- margin: auto;
- width: auto;
- }
- }
- &.medium-vertical {
- @media #{$medium-up} {
- height: 100%;
- width: auto;
- .item {
- float: none;
- margin: auto;
- width: auto;
- }
- }
- }
- &.large-vertical {
- @media #{$large-up} {
- height: 100%;
- width: auto;
- .item {
- float: none;
- margin: auto;
- width: auto;
- }
- }
- }
- }
- // We use this mixin to create the size styles for icon bars.
- @mixin icon-bar-size(
- $padding: $icon-bar-item-padding,
- $font-size: $icon-bar-font-size,
- $icon-size: $icon-bar-icon-size,
- $image-width: $icon-bar-image-width,
- $image-height: $icon-bar-image-height) {
- > * {
- font-size: $font-size;
- padding: $padding;
- i, img {
- & + label {
- margin-top: .0625rem;
- font-size: $font-size;
- }
- }
- i {
- font-size: $icon-size;
- }
- img {
- height: $image-height;
- width: $image-width;
- }
- }
- }
- @mixin icon-bar-style(
- $bar-bg:$icon-bar-bg,
- $bar-font-color:$icon-bar-font-color,
- $bar-font-color-hover:$icon-bar-font-color-hover,
- $bar-hover-color:$icon-bar-hover-color,
- $bar-icon-color:$icon-bar-icon-color,
- $bar-icon-color-hover:$icon-bar-icon-color-hover,
- $bar-active-color:$icon-bar-active-color,
- $base-style:true,
- $disabled:false) {
- @if $base-style {
- background: $bar-bg;
- > * {
- label { color: $bar-font-color; }
- i { color: $bar-icon-color; }
- }
- > a:hover {
- background: $bar-hover-color;
- label { color: $bar-font-color-hover; }
- i { color: $bar-icon-color-hover; }
- }
- > a.active {
- background: $bar-active-color;
- label { color: $bar-font-color-hover; }
- i { color: $bar-icon-color-hover; }
- }
- }
- @if $disabled {
- .item.disabled {
- cursor: $icon-bar-disabled-cursor;
- opacity: $icon-bar-disabled-opacity;
- pointer-events: none;
- >* {
- opacity: $icon-bar-disabled-opacity;
- cursor: $icon-bar-disabled-cursor;
- }
- }
- }
- }
- // We use this to quickly create icon bars with a single mixin
- // $height - The overall calculated height of the icon bar (horizontal)
- // $bar-bg - the background color of the bar
- // $bar-font-color - the font color
- // $bar-hover-color - okay these are pretty obvious variables
- // $bar-icon-color - maybe we could skip explaining them all? Okay this one does change icon color if you use an icon font
- // $bar-active-color - the color of an active / hover state
- // $base-style - Apply base styles? Default: true.
- // $disabled - Allow disabled icons? Default: false.
- @mixin icon-bar(
- $bar-bg:$icon-bar-bg,
- $bar-font-color:$icon-bar-font-color,
- $bar-font-color-hover:$icon-bar-font-color-hover,
- $bar-hover-color:$icon-bar-hover-color,
- $bar-icon-color:$icon-bar-icon-color,
- $bar-icon-color-hover:$icon-bar-icon-color-hover,
- $bar-active-color:$icon-bar-active-color,
- $padding: $icon-bar-item-padding,
- $font-size: $icon-bar-font-size,
- $icon-size: $icon-bar-icon-size,
- $image-width: $icon-bar-image-width,
- $image-height: $icon-bar-image-height,
- $base-style:true,
- $disabled:true) {
- @include icon-bar-base();
- @include icon-bar-size($padding, $font-size, $icon-size, $image-width, $image-height);
- @include icon-bar-style($bar-bg, $bar-font-color, $bar-font-color-hover, $bar-hover-color, $bar-icon-color, $bar-icon-color-hover, $bar-active-color, $base-style, $disabled);
- // Counts
- &.two-up {
- .item { width: 50%; }
- &.vertical .item, &.small-vertical .item { width: auto; }
- &.medium-vertical .item {
- @media #{$medium-up} {
- width: auto;
- }
- }
- &.large-vertical .item {
- @media #{$large-up} {
- width: auto;
- }
- }
- }
- &.three-up {
- .item { width: 33.3333%; }
- &.vertical .item, &.small-vertical .item { width: auto; }
- &.medium-vertical .item {
- @media #{$medium-up} {
- width: auto;
- }
- }
- &.large-vertical .item {
- @media #{$large-up} {
- width: auto;
- }
- }
- }
- &.four-up {
- .item { width: 25%; }
- &.vertical .item, &.small-vertical .item { width: auto; }
- &.medium-vertical .item {
- @media #{$medium-up} {
- width: auto;
- }
- }
- &.large-vertical .item {
- @media #{$large-up} {
- width: auto;
- }
- }
- }
- &.five-up {
- .item { width: 20%; }
- &.vertical .item, &.small-vertical .item { width: auto; }
- &.medium-vertical .item {
- @media #{$medium-up} {
- width: auto;
- }
- }
- &.large-vertical .item {
- @media #{$large-up} {
- width: auto;
- }
- }
- }
- &.six-up {
- .item { width: 16.66667%; }
- &.vertical .item, &.small-vertical .item { width: auto; }
- &.medium-vertical .item {
- @media #{$medium-up} {
- width: auto;
- }
- }
- &.large-vertical .item {
- @media #{$large-up} {
- width: auto;
- }
- }
- }
- &.seven-up {
- .item { width: 14.28571%; }
- &.vertical .item, &.small-vertical .item { width: auto; }
- &.medium-vertical .item {
- @media #{$medium-up} {
- width: auto;
- }
- }
- &.large-vertical .item {
- @media #{$large-up} {
- width: auto;
- }
- }
- }
- &.eight-up {
- .item { width: 12.5%; }
- &.vertical .item, &.small-vertical .item { width: auto; }
- &.medium-vertical .item {
- @media #{$medium-up} {
- width: auto;
- }
- }
- &.large-vertical .item {
- @media #{$large-up} {
- width: auto;
- }
- }
- }
- }
- @include exports("icon-bar") {
- @if $include-html-icon-bar-classes {
- .icon-bar {
- @include icon-bar;
- }
- }
- }
- @if $include-html-icon-bar-classes {
- // toolbar styles
- .icon-bar {
- // Counts
- &.two-up {
- .item { width: 50%; }
- &.vertical .item, &.small-vertical .item { width: auto; }
- &.medium-vertical .item {
- @media #{$medium-up} {
- width: auto;
- }
- }
- &.large-vertical .item {
- @media #{$large-up} {
- width: auto;
- }
- }
- }
- &.three-up {
- .item { width: 33.3333%; }
- &.vertical .item, &.small-vertical .item { width: auto; }
- &.medium-vertical .item {
- @media #{$medium-up} {
- width: auto;
- }
- }
- &.large-vertical .item {
- @media #{$large-up} {
- width: auto;
- }
- }
- }
- &.four-up {
- .item { width: 25%; }
- &.vertical .item, &.small-vertical .item { width: auto; }
- &.medium-vertical .item {
- @media #{$medium-up} {
- width: auto;
- }
- }
- &.large-vertical .item {
- @media #{$large-up} {
- width: auto;
- }
- }
- }
- &.five-up {
- .item { width: 20%; }
- &.vertical .item, &.small-vertical .item { width: auto; }
- &.medium-vertical .item {
- @media #{$medium-up} {
- width: auto;
- }
- }
- &.large-vertical .item {
- @media #{$large-up} {
- width: auto;
- }
- }
- }
- &.six-up {
- .item { width: 16.66667%; }
- &.vertical .item, &.small-vertical .item { width: auto; }
- &.medium-vertical .item {
- @media #{$medium-up} {
- width: auto;
- }
- }
- &.large-vertical .item {
- @media #{$large-up} {
- width: auto;
- }
- }
- }
- &.seven-up {
- .item { width: 14.28571%; }
- &.vertical .item, &.small-vertical .item { width: auto; }
- &.medium-vertical .item {
- @media #{$medium-up} {
- width: auto;
- }
- }
- &.large-vertical .item {
- @media #{$large-up} {
- width: auto;
- }
- }
- }
- &.eight-up {
- .item { width: 12.5%; }
- &.vertical .item, &.small-vertical .item { width: auto; }
- &.medium-vertical .item {
- @media #{$medium-up} {
- width: auto;
- }
- }
- &.large-vertical .item {
- @media #{$large-up} {
- width: auto;
- }
- }
- }
- }
- }
|