catalog-ui/app/styles/mixins_old.less

@import "variables";

.font-color {
    .a {color:  @color_a;}
    .b {color:  @color_b;}
    .c {color:  @color_c;}
    .d {color:  @color_d;}
    .e {color:  @color_e;}
    .f {color:  @color_f;}
    .g {color:  @color_g;}
    .h {color:  @color_h;}
    .i {color:  @color_i;}
    .j {color:  @color_j;}
    .k {color:  @color_k;}
    .l {color:  @color_l;}
    .m {color:  @color_m;}
    .n {color:  @color_n;}
    .o {color:  @color_o;}
    .p {color:  @color_p;}
    .q {color:  @color_q;}
    .r {color:  @color_r;}
    .s {color:  @color_s;}
    .t {color:  @color_t;}
    .u {color:  @color_t;}
    .v {color:  @color_t;}
    .w {color:  @color_t;}
    .x {color:  @color_t;}
    .y {color:  @color_t;}
    .z {color:  @color_z;}
    .zz {color:  @color_zz;}

    .hover {
        .a {color: @color_a_hover;}
        .b {color: @color_b_hover;}
        .c {color: @color_c_hover;}
        .d {color: @color_d_hover;}
        .e {color: @color_e_hover;}
        .f {color: @color_f_hover;}
        .g {color: @color_g_hover;}
        .h {color: @color_h_hover;}
        .i {color: @color_i_hover;}
        .j {color: @color_j_hover;}
        .k {color: @color_k_hover;}
        .l {color: @color_l_hover;}
        .m {color: @color_m_hover;}
        .n {color: @color_n_hover;}
        .o {color: @color_o_hover;}
        .p {color: @color_p_hover;}
        .q {color: @color_q_hover;}
        .r {color: @color_r_hover;}
        .s {color: @color_s_hover;}
        .t {color: @color_t_hover;}
        .u {color: @color_u_hover;}
        .v {color: @color_v_hover;}
        .w {color: @color_w_hover;}
        .x {color: @color_x_hover;}
        .y {color: @color_y_hover;}
        .z {color: @color_z_hover;}
        .zz {color: @color_zz_hover;}
    }
}

.font-type {
    ._1 {
        font-family: @font-omnes-regular;
        font-size: 14px;
    }
    ._2 {
        font-family: @font-omnes-regular;
        font-size: 20px;
    }
    ._3 {
        font-family: @font-omnes-regular;
        font-size: 12px;
    }
    ._4 {
        font-family: @font-omnes-regular;
        font-size: 16px;
    }
    ._5 {
        font-family: @font-omnes-medium;
        font-size: 30px;
    }
    ._6 {
        font-family: @font-omnes-medium;
        font-size: 16px;
    }
    ._7 {
        font-family: @font-omnes-medium;
        font-size: 14px;
    }
    ._8 {
        font-family: @font-omnes-regular;
        font-size: 11px;
    }
    ._9 {
        font-family: @font-omnes-regular;
        font-size: 13px;
    }
    ._10 {
        font-family: @font-omnes-regular;
        font-size: 18px;
    }
    ._11 {
        font-family: @font-omnes-medium;
        font-size: 20px;
    }
    ._12 {
        font-family: @font-omnes-medium;
        font-size: 17px;
    }
    ._13 {
        font-family: @font-omnes-medium;
        font-size: 12px;
    }
    ._14 {
        font-family: @font-omnes-medium;
        font-size: 11px;
    }
    ._15 {
        font-family: @font-omnes-medium;
        font-size: 24px;
    }
    ._16 {
        font-family: @font-omnes-regular;
        font-size: 10px;
    }
    ._17 {
        font-family:  @font-omnes-medium;
        font-size: 15px;
    }
    ._18 {
        font-family:  @font-omnes-regular;
        font-size: 15px;
    }
    ._19 {
        font-family: @font-omnes-medium;
        font-size: 18px;
    }
}

.a_1  {.font-color > .a; .font-type > ._1;}
.a_2  {.font-color > .a; .font-type > ._2;}
.a_3  {.font-color > .a; .font-type > ._3;}
.a_4  {.font-color > .a; .font-type > ._4;}
.a_5  {.font-color > .a; .font-type > ._5;}
.a_6  {.font-color > .a; .font-type > ._6;}
.a_7  {.font-color > .a; .font-type > ._7;}
.a_8  {.font-color > .a; .font-type > ._8;}
.a_9  {.font-color > .a; .font-type > ._9;}
.a_10  {.font-color > .a; .font-type > ._10;}
.a_15 {.font-color > .a; .font-type > ._15;}

.b_1  {.font-color > .b; .font-type > ._1;}
.b_3  {.font-color > .b; .font-type > ._3;}
.b_4  {.font-color > .b; .font-type > ._4;}
.b_5  {.font-color > .b; .font-type > ._5;}
.b_6  {.font-color > .b; .font-type > ._6;}
.b_7  {.font-color > .b; .font-type > ._7;}
.b_9  {.font-color > .b; .font-type > ._9;}
.b_10  {.font-color > .b; .font-type > ._10;}
.b_11  {.font-color > .b; .font-type > ._11;}
.b_13  {.font-color > .b; .font-type > ._13;}
.b_15  {.font-color > .b; .font-type > ._15;}
.b_17  {.font-color > .b; .font-type > ._17;}
.b_19  {.font-color > .b; .font-type > ._19;}

.c_1  {.font-color > .c; .font-type > ._1;}
.c_2  {.font-color > .c; .font-type > ._2;}
.c_3  {.font-color > .c; .font-type > ._3;}
.c_4  {.font-color > .c; .font-type > ._4;}
.c_5  {.font-color > .c; .font-type > ._5;}
.c_6  {.font-color > .c; .font-type > ._6;}
.c_7  {.font-color > .c; .font-type > ._7;}
.c_8  {.font-color > .c; .font-type > ._8;}
.c_9  {.font-color > .c; .font-type > ._9;}
.c_10 {.font-color > .c; .font-type > ._10;}
.c_11 {.font-color > .c; .font-type > ._11;}
.c_15 {.font-color > .c; .font-type > ._15;}
.c_16 {.font-color > .c; .font-type > ._16;}
.c_17 {.font-color > .c; .font-type > ._17;}
.c_18 {.font-color > .c; .font-type > ._18;}

.d_1  {.font-color > .d; .font-type > ._1;}
.d_2  {.font-color > .d; .font-type > ._2;}
.d_3  {.font-color > .d; .font-type > ._3;}
.d_4  {.font-color > .d; .font-type > ._4;}
.d_5  {.font-color > .d; .font-type > ._5;}
.d_6  {.font-color > .d; .font-type > ._6;}
.d_12  {.font-color > .d; .font-type > ._12;}

.e_1  {.font-color > .e; .font-type > ._1;}
.e_2  {.font-color > .e; .font-type > ._2;}
.e_3  {.font-color > .e; .font-type > ._3;}
.e_4  {.font-color > .e; .font-type > ._4;}
.e_5  {.font-color > .e; .font-type > ._5;}
.e_6  {.font-color > .e; .font-type > ._6;}
.e_7  {.font-color > .e; .font-type > ._7;}

.f_1  {.font-color > .f; .font-type > ._1;}
.f_2  {.font-color > .f; .font-type > ._2;}

.g_1  {.font-color > .g; .font-type > ._1;}
.g_2  {.font-color > .g; .font-type > ._2;}
.g_3  {.font-color > .g; .font-type > ._3;}
.g_4  {.font-color > .g; .font-type > ._4;}
.g_5  {.font-color > .g; .font-type > ._5;}
.g_6  {.font-color > .g; .font-type > ._6;}
.g_7  {.font-color > .g; .font-type > ._7;}
.g_8  {.font-color > .g; .font-type > ._8;}
.g_9  {.font-color > .g; .font-type > ._9;}
.g_10 {.font-color > .g; .font-type > ._10;}
.g_13 {.font-color > .g; .font-type > ._13;}
.g_14 {.font-color > .g; .font-type > ._14;}

.h_1  {.font-color > .h; .font-type > ._1;}
.h_7  {.font-color > .h; .font-type > ._7;}
.h_9  {.font-color > .h; .font-type > ._9;}

.i_1  {.font-color > .i; .font-type > ._1;}
.i_6 {.font-color > .i; .font-type > ._6;}
.i_11 {.font-color > .i; .font-type > ._11;}
.i_17 {.font-color > .i; .font-type > ._17;}

.l_1  {.font-color > .l; .font-type > ._1;}
.l_9  {.font-color > .l; .font-type > ._9;}

.m_4  {.font-color > .m; .font-type > ._4;}
.m_7  {.font-color > .m; .font-type > ._7;}

.p_1  {.font-color > .p; .font-type > ._1;}
.p_3  {.font-color > .p; .font-type > ._3;}
.p_9  {.font-color > .p; .font-type > ._9;}

.q_7  {.font-color > .q; .font-type > ._7;}
.q_9  {.font-color > .q; .font-type > ._9;}
.q_11 {.font-color > .q; .font-type > ._11;}

.r_12 {.font-color > .r; .font-type > ._12;}

.t_1  {.font-color > .t; .font-type > ._1;}
.t_7  {.font-color > .t; .font-type > ._7;}
.t_15 {.font-color > .t; .font-type > ._15;}

/* Added by ikram - */
.s_12 {.font-color > .s; .font-type > ._12;}

.z_9  {.font-color > .z; .font-type > ._9;}
.backgroundColor {
    .a {background-color:  @color_a;}
    .b {background-color:  @color_b;}
    .c {background-color:  @color_c;}
    .d {background-color:  @color_d;}
    .e {background-color:  @color_e;}
    .f {background-color:  @color_f;}
    .g {background-color:  @color_g;}
    .h {background-color:  @color_h;}
    .i {background-color:  @color_i;}
    .j {background-color:  @color_j;}
    .k {background-color:  @color_k;}
    .l {background-color:  @color_l;}
    .m {background-color:  @color_m;}
    .n {background-color:  @color_n;}
    .o {background-color:  @color_o;}
    .p {background-color:  @color_p;}
    .q {background-color:  @color_q;}
    .r {background-color:  @color_r;}
    .s {background-color:  @color_s;}
    .t {background-color:  @color_t;}
    .u {background-color:  @color_u;}
    .v {background-color:  @color_v;}
    .w {background-color:  @color_w;}
    .x {background-color:  @color_x;}
    .y {background-color:  @color_y;}
    .z {background-color:  @color_z;}
    .zz {background-color:  @color_zz;}

    .hover {
        .a {background-color: @color_a_hover;}
        .b {background-color: @color_b_hover;}
        .c {background-color: @color_c_hover;}
        .d {background-color: @color_d_hover;}
        .e {background-color: @color_e_hover;}
        .f {background-color: @color_f_hover;}
        .g {background-color: @color_g_hover;}
        .h {background-color: @color_h_hover;}
        .i {background-color: @color_i_hover;}
        .j {background-color: @color_j_hover;}
        .k {background-color: @color_k_hover;}
        .l {background-color: @color_l_hover;}
        .m {background-color: @color_m_hover;}
        .n {background-color: @color_n_hover;}
        .o {background-color: @color_o_hover;}
        .p {background-color: @color_p_hover;}
        .q {background-color: @color_q_hover;}
        .r {background-color: @color_r_hover;}
        .s {background-color: @color_s_hover;}
        .t {background-color: @color_t_hover;}
        .u {background-color: @color_u_hover;}
        .v {background-color: @color_v_hover;}
        .w {background-color: @color_w_hover;}
        .x {background-color: @color_x_hover;}
        .y {background-color: @color_y_hover;}
        .z {background-color: @color_z_hover;}
        .zz {background-color: @color_zz_hover;}
    }
}

.bg_a {.backgroundColor > .a;}
.bg_b {.backgroundColor > .b;}
.bg_c {.backgroundColor > .c;}
.bg_d {.backgroundColor > .d;}
.bg_e {.backgroundColor > .e;}
.bg_f {.backgroundColor > .f;}
.bg_g {.backgroundColor > .g;}
.bg_h {.backgroundColor > .h;}
.bg_i {.backgroundColor > .i;}
.bg_j {.backgroundColor > .j;}
.bg_k {.backgroundColor > .k;}
.bg_l {.backgroundColor > .l;}
.bg_m {.backgroundColor > .m;}
.bg_n {.backgroundColor > .n;}
.bg_o {.backgroundColor > .o;}
.bg_p {.backgroundColor > .p;}
.bg_q {.backgroundColor > .q;}
.bg_r {.backgroundColor > .r;}
.bg_s {.backgroundColor > .s;}
.bg_t {.backgroundColor > .t;}
.bg_u {.backgroundColor > .u;}
.bg_v {.backgroundColor > .v;}
.bg_w {.backgroundColor > .w;}
.bg_x {.backgroundColor > .x;}
.bg_y {.backgroundColor > .y;}
.bg_z {.backgroundColor > .z;}
.bg_zz {.backgroundColor > .zz;}

.bg_a_hover {.backgroundColor > .hover > .a;}
.bg_b_hover {.backgroundColor > .hover > .b;}
.bg_c_hover {.backgroundColor > .hover > .c;}
.bg_d_hover {.backgroundColor > .hover > .d;}
.bg_e_hover {.backgroundColor > .hover > .e;}
.bg_f_hover {.backgroundColor > .hover > .f;}
.bg_g_hover {.backgroundColor > .hover > .g;}
.bg_h_hover {.backgroundColor > .hover > .h;}
.bg_i_hover {.backgroundColor > .hover > .i;}
.bg_j_hover {.backgroundColor > .hover > .j;}
.bg_l_hover {.backgroundColor > .hover > .l;}
.bg_m_hover {.backgroundColor > .hover > .m;}
.bg_n_hover {.backgroundColor > .hover > .n;}
.bg_o_hover {.backgroundColor > .hover > .o;}
.bg_p_hover {.backgroundColor > .hover > .p;}
.bg_q_hover {.backgroundColor > .hover > .q;}
.bg_r_hover {.backgroundColor > .hover > .r;}
.bg_s_hover {.backgroundColor > .hover > .s;}
.bg_t_hover {.backgroundColor > .hover > .t;}
.bg_u_hover {.backgroundColor > .hover > .u;}
.bg_v_hover {.backgroundColor > .hover > .v;}
.bg_w_hover {.backgroundColor > .hover > .w;}
.bg_x_hover {.backgroundColor > .hover > .x;}
.bg_y_hover {.backgroundColor > .hover > .y;}
.bg_z_hover {.backgroundColor > .hover > .z;}
.bg_zz_hover {.backgroundColor > .hover > .zz;}

.center         {margin: 0 auto;}
.vcenter        {display: table-cell;vertical-align: middle;}
.left           {float: left;}
.right          {float: right;}
.hand           {cursor: pointer;}
.default-pointer {cursor: default;}
.text-center    {text-align: center;}
.display-none   {display: none;}
.nowrap         {white-space: nowrap;}
.bold           {font-weight: bold;}
.full-height    {height: 100%;}
.uppercase      {text-transform: uppercase;}
.capitalize     {text-transform: capitalize;}
.disabled       {
    //background-color: #f2f2f2;
    //border-color: #d8d8d8;
    //background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAIklEQVQIW2NkQAKrVq36zwjjgzhhYWGMYAEYB8RmROaABADeOQ8CXl/xfgAAAABJRU5ErkJggg==) repeat;
    //color: @color_m;
}

.border-radius(@radius) {
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
    border-radius: @radius;
}

.border-radius-top-left(@radius) {
    -webkit-border-top-left-radius: @radius;
    -moz-border-radius-topleft: @radius;
    -khtml-border-top-left-radius: @radius;
    border-top-left-radius: @radius;
}

.border-radius-top-right(@radius) {
    -webkit-border-top-right-radius: @radius;
    -moz-border-radius-topright: @radius;
    -khtml-border-top-right-radius: @radius;
    border-top-right-radius: @radius;
}

.border-radius-bottom-left(@radius) {
    -webkit-border-bottom-left-radius: @radius;
    -moz-border-radius-bottomleft: @radius;
    -khtml-border-bottom-left-radius: @radius;
    border-bottom-left-radius: @radius;
}

.border-radius-bottom-right(@radius) {
    -webkit-border-bottom-right-radius: @radius;
    -moz-border-radius-bottomright: @radius;
    -khtml-border-bottom-right-radius: @radius;
    border-bottom-right-radius: @radius;
}

.opacity(@opacity: 0.5) {
    -moz-opacity: @opacity;
    -khtml-opacity: @opacity;
    -webkit-opacity: @opacity;
    opacity: @opacity;
}

.box-shadow(@arguments) {
    -webkit-box-shadow: @arguments;
    -moz-box-shadow: @arguments;
    box-shadow: @arguments;
}

.square(@size) {
    width: @size;
    height: @size;
}

.selfClear:after {
    content: ".";
    display: block;
    height: 0px;
    clear: both;
    visibility: hidden;
}
.selfClear {
    display: inline-block;
}

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

.clearfix {
    display: inline-block;
    clear: both;
}

.gradient(@d; @st; @st_o; @ec; @ec_0;){
    background: -webkit-linear-gradient(@d, @st @st_o, @ec @ec_0);
    background: -moz-linear-gradient(@d, @st @st_o, @ec @ec_0);
    background: -o-linear-gradient(@d, @st @st_o, @ec @ec_0);
    background: -ms-linear-gradient(@d, @st @st_o, @ec @ec_0);
    background: linear-gradient(@d, @st @st_o, @ec @ec_0);
}

.hyphenate {
    -ms-word-break: break-all;
    word-break: break-all;

    // Non standard for webkit
    word-break: break-word;

    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
}

.user-select (@val;) {
    -webkit-touch-callout: none;
    -webkit-user-select: @val;
    -khtml-user-select: @val;
    -moz-user-select: @val;
    -ms-user-select: @val;
    user-select: @val;
}

.flex-fixed (@width) {
    flex-basis: @width;
    flex-grow: 0;
    flex-shrink: 0;
}

.perfect-scrollbar {
    position: relative;
    overflow: hidden;
}

.noselect {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.arrow(@size, @color){
    content: '';
    position: absolute;
    top: 50%;
    right: 100%;
    margin-top: -@size;
    width: 0;
    height: 0;
    border-right: @size solid @color;
    border-top: @size solid transparent;
    border-bottom: @size solid transparent;
}

.circle(@size, @color){
    background-color: @color;
    .border-radius(50%);
    color: @color_c;
    content: '';
    height: @size;
    width: @size;
    text-align: center;
    display: block;
}

.sdc-ellipsis{
     text-overflow: ellipsis;
     overflow: hidden;
     display: inline-block;
     white-space: nowrap;
 }

// Works with animate.css
.animation-duration(@seconds) {
    animation-duration: @seconds; //3s
    -webkit-animation-duration: @seconds;
    -moz-animation-duration: @seconds;
}

.animation-delay(@seconds) {
    animation-delay: @seconds; //3s
    -webkit-animation-delay: @seconds;
    -moz-animation-delay: @seconds;
}

.animation-iterations(@iterations) {
    animation-iteration-count: @iterations;     // infinite;
    -webkit-animation-iteration-count: @iterations;
    -moz-animation-iteration-count: @iterations;
}