icon.scss

.tab-button[aria-selected=true] .ion-md-myhome:before{
    content: url("./../assets/imgs/tab-01.svg");
}

.tab-button[aria-selected=false] .ion-md-myhome:before{
    content: url("./../assets/imgs/tab-05.svg");
}

.tab-button[aria-selected=true] .ion-md-mycontact:before{
    content: url("./../assets/imgs/tab-04.svg");
}

.tab-button[aria-selected=false] .ion-md-mycontact:before{
    content: url("./../assets/imgs/tab-08.svg");
}
.tab-button[aria-selected=true] .ion-md-myworkbench:before{
    content: url("./../assets/imgs/tab-03.svg");
}

.tab-button[aria-selected=false] .ion-md-myworkbench:before{
    content: url("./../assets/imgs/tab-07.svg");
}
.tab-button[aria-selected=true] .ion-md-mymine:before{
    content: url("./../assets/imgs/tab-02.svg");
}

.tab-button[aria-selected=false] .ion-md-mymine:before{
    content: url("./../assets/imgs/tab-06.svg");
}

.tab-button-text{
    margin-top: 0 !important;
}
.color-333{
    color: #333;
}
.color-666{
    color: #666;
}
.color-999{
    color: #999;
}
.color-fff{
    color: #fff;
}
.color-red{
    color: red;
}
.color-24bafc{
    color: #24bafc;
}
@for $i from 0 through 51{
    .margin-right-#{$i}{
        margin-right: #{$i}px;
    }
    .margin-left-#{$i}{
        margin-left: #{$i}px;
    }
    .margin-top-#{$i}{
        margin-top: #{$i}px;
    }
    .margin-bottom-#{$i}{
        margin-bottom: #{$i}px;
    }
    .margin-#{$i}{
        margin: #{$i}px;
    }
    .padding-#{$i}{
        padding: #{$i}px;
    }
    .padding-right-#{$i}{
        padding-right: #{$i}px;
    }
    .padding-left-#{$i}{
        padding-left: #{$i}px;
    }
    .padding-top-#{$i}{
        padding-top: #{$i}px;
    }
    .padding-bottom-#{$i}{
        padding-bottom: #{$i}px;
    }
}

@for $i from 0 through 51{
   @for $j from 0 through 51{
       .margin-#{$i}-#{$j}{
           margin: #{$i}px #{$j}px ;
       }
       .padding-#{$i}-#{$j}{
           padding: #{$i}px #{$j}px ;
       }
   }
}