diff options
Diffstat (limited to 'catalog-ui/app/styles/mixins_old.less')
| -rw-r--r-- | catalog-ui/app/styles/mixins_old.less | 558 |
1 files changed, 558 insertions, 0 deletions
diff --git a/catalog-ui/app/styles/mixins_old.less b/catalog-ui/app/styles/mixins_old.less new file mode 100644 index 0000000000..8a4f609497 --- /dev/null +++ b/catalog-ui/app/styles/mixins_old.less @@ -0,0 +1,558 @@ +@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; +} |