catalog-ui/src/assets/styles/mixins_old.less

   1 @import "variables-old";
   2 @import "variables";
   3
   4 .font-color {
   5     .a {color:  @color_a;}
   6     .b {color:  @color_b;}
   7     .c {color:  @color_c;}
   8     .d {color:  @color_d;}
   9     .e {color:  @color_e;}
  10     .f {color:  @color_f;}
  11     .g {color:  @color_g;}
  12     .h {color:  @color_h;}
  13     .i {color:  @color_i;}
  14     .j {color:  @color_j;}
  15     .k {color:  @color_k;}
  16     .l {color:  @color_l;}
  17     .m {color:  @color_m;}
  18     .n {color:  @color_n;}
  19     .o {color:  @color_o;}
  20     .p {color:  @color_p;}
  21     .q {color:  @color_q;}
  22     .r {color:  @color_r;}
  23     .s {color:  @color_s;}
  24     .t {color:  @color_t;}
  25     .u {color:  @color_t;}
  26     .v {color:  @color_t;}
  27     .w {color:  @color_t;}
  28     .x {color:  @color_t;}
  29     .y {color:  @color_t;}
  30     .z {color:  @color_z;}
  31     .zz {color:  @color_zz;}
  32
  33     .hover {
  34         .a {color: @color_a_hover;}
  35         .b {color: @color_b_hover;}
  36         .c {color: @color_c_hover;}
  37         .d {color: @color_d_hover;}
  38         .e {color: @color_e_hover;}
  39         .f {color: @color_f_hover;}
  40         .g {color: @color_g_hover;}
  41         .h {color: @color_h_hover;}
  42         .i {color: @color_i_hover;}
  43         .j {color: @color_j_hover;}
  44         .k {color: @color_k_hover;}
  45         .l {color: @color_l_hover;}
  46         .m {color: @color_m_hover;}
  47         .n {color: @color_n_hover;}
  48         .o {color: @color_o_hover;}
  49         .p {color: @color_p_hover;}
  50         .q {color: @color_q_hover;}
  51         .r {color: @color_r_hover;}
  52         .s {color: @color_s_hover;}
  53         .t {color: @color_t_hover;}
  54         .u {color: @color_u_hover;}
  55         .v {color: @color_v_hover;}
  56         .w {color: @color_w_hover;}
  57         .x {color: @color_x_hover;}
  58         .y {color: @color_y_hover;}
  59         .z {color: @color_z_hover;}
  60         .zz {color: @color_zz_hover;}
  61     }
  62 }
  63
  64 .font-type {
  65     ._1 {
  66         font-family: @font-opensans-regular;
  67         font-size: 14px;
  68     }
  69     ._2 {
  70         font-family: @font-opensans-regular;
  71         font-size: 20px;
  72     }
  73     ._3 {
  74         font-family: @font-opensans-regular;
  75         font-size: 12px;
  76     }
  77     ._4 {
  78         font-family: @font-opensans-regular;
  79         font-size: 16px;
  80     }
  81     ._5 {
  82         font-family: @font-opensans-medium;
  83         font-size: 30px;
  84     }
  85     ._6 {
  86         font-family: @font-opensans-medium;
  87         font-size: 16px;
  88     }
  89     ._7 {
  90         font-family: @font-opensans-medium;
  91         font-size: 14px;
  92     }
  93     ._8 {
  94         font-family: @font-opensans-regular;
  95         font-size: 11px;
  96     }
  97     ._9 {
  98         font-family: @font-opensans-regular;
  99         font-size: 13px;
 100     }
 101     ._10 {
 102         font-family: @font-opensans-regular;
 103         font-size: 18px;
 104     }
 105     ._11 {
 106         font-family: @font-opensans-medium;
 107         font-size: 20px;
 108     }
 109     ._12 {
 110         font-family: @font-opensans-medium;
 111         font-size: 17px;
 112     }
 113     ._13 {
 114         font-family: @font-opensans-medium;
 115         font-size: 12px;
 116     }
 117     ._14 {
 118         font-family: @font-opensans-medium;
 119         font-size: 11px;
 120     }
 121     ._15 {
 122         font-family: @font-opensans-medium;
 123         font-size: 24px;
 124     }
 125     ._16 {
 126         font-family: @font-opensans-regular;
 127         font-size: 10px;
 128     }
 129     ._17 {
 130         font-family:  @font-opensans-medium;
 131         font-size: 15px;
 132     }
 133     ._18 {
 134         font-family:  @font-opensans-regular;
 135         font-size: 15px;
 136     }
 137     ._19 {
 138         font-family: @font-opensans-medium;
 139         font-size: 18px;
 140     }
 141 }
 142
 143 .a_1  {.font-color > .a; .font-type > ._1;}
 144 .a_2  {.font-color > .a; .font-type > ._2;}
 145 .a_3  {.font-color > .a; .font-type > ._3;}
 146 .a_4  {.font-color > .a; .font-type > ._4;}
 147 .a_5  {.font-color > .a; .font-type > ._5;}
 148 .a_6  {.font-color > .a; .font-type > ._6;}
 149 .a_7  {.font-color > .a; .font-type > ._7;}
 150 .a_8  {.font-color > .a; .font-type > ._8;}
 151 .a_9  {.font-color > .a; .font-type > ._9;}
 152 .a_10  {.font-color > .a; .font-type > ._10;}
 153 .a_15 {.font-color > .a; .font-type > ._15;}
 154
 155 .b_1  {.font-color > .b; .font-type > ._1;}
 156 .b_3  {.font-color > .b; .font-type > ._3;}
 157 .b_4  {.font-color > .b; .font-type > ._4;}
 158 .b_5  {.font-color > .b; .font-type > ._5;}
 159 .b_6  {.font-color > .b; .font-type > ._6;}
 160 .b_7  {.font-color > .b; .font-type > ._7;}
 161 .b_9  {.font-color > .b; .font-type > ._9;}
 162 .b_10  {.font-color > .b; .font-type > ._10;}
 163 .b_11  {.font-color > .b; .font-type > ._11;}
 164 .b_13  {.font-color > .b; .font-type > ._13;}
 165 .b_15  {.font-color > .b; .font-type > ._15;}
 166 .b_17  {.font-color > .b; .font-type > ._17;}
 167 .b_19  {.font-color > .b; .font-type > ._19;}
 168
 169 .c_1  {.font-color > .c; .font-type > ._1;}
 170 .c_2  {.font-color > .c; .font-type > ._2;}
 171 .c_3  {.font-color > .c; .font-type > ._3;}
 172 .c_4  {.font-color > .c; .font-type > ._4;}
 173 .c_5  {.font-color > .c; .font-type > ._5;}
 174 .c_6  {.font-color > .c; .font-type > ._6;}
 175 .c_7  {.font-color > .c; .font-type > ._7;}
 176 .c_8  {.font-color > .c; .font-type > ._8;}
 177 .c_9  {.font-color > .c; .font-type > ._9;}
 178 .c_10 {.font-color > .c; .font-type > ._10;}
 179 .c_11 {.font-color > .c; .font-type > ._11;}
 180 .c_15 {.font-color > .c; .font-type > ._15;}
 181 .c_16 {.font-color > .c; .font-type > ._16;}
 182 .c_17 {.font-color > .c; .font-type > ._17;}
 183 .c_18 {.font-color > .c; .font-type > ._18;}
 184
 185 .d_1  {.font-color > .d; .font-type > ._1;}
 186 .d_2  {.font-color > .d; .font-type > ._2;}
 187 .d_3  {.font-color > .d; .font-type > ._3;}
 188 .d_4  {.font-color > .d; .font-type > ._4;}
 189 .d_5  {.font-color > .d; .font-type > ._5;}
 190 .d_6  {.font-color > .d; .font-type > ._6;}
 191 .d_12  {.font-color > .d; .font-type > ._12;}
 192
 193 .e_1  {.font-color > .e; .font-type > ._1;}
 194 .e_2  {.font-color > .e; .font-type > ._2;}
 195 .e_3  {.font-color > .e; .font-type > ._3;}
 196 .e_4  {.font-color > .e; .font-type > ._4;}
 197 .e_5  {.font-color > .e; .font-type > ._5;}
 198 .e_6  {.font-color > .e; .font-type > ._6;}
 199 .e_7  {.font-color > .e; .font-type > ._7;}
 200
 201 .f_1  {.font-color > .f; .font-type > ._1;}
 202 .f_2  {.font-color > .f; .font-type > ._2;}
 203
 204 .g_1  {.font-color > .g; .font-type > ._1;}
 205 .g_2  {.font-color > .g; .font-type > ._2;}
 206 .g_3  {.font-color > .g; .font-type > ._3;}
 207 .g_4  {.font-color > .g; .font-type > ._4;}
 208 .g_5  {.font-color > .g; .font-type > ._5;}
 209 .g_6  {.font-color > .g; .font-type > ._6;}
 210 .g_7  {.font-color > .g; .font-type > ._7;}
 211 .g_8  {.font-color > .g; .font-type > ._8;}
 212 .g_9  {.font-color > .g; .font-type > ._9;}
 213 .g_10 {.font-color > .g; .font-type > ._10;}
 214 .g_13 {.font-color > .g; .font-type > ._13;}
 215 .g_14 {.font-color > .g; .font-type > ._14;}
 216
 217 .h_1  {.font-color > .h; .font-type > ._1;}
 218 .h_7  {.font-color > .h; .font-type > ._7;}
 219 .h_9  {.font-color > .h; .font-type > ._9;}
 220
 221 .i_1  {.font-color > .i; .font-type > ._1;}
 222 .i_6 {.font-color > .i; .font-type > ._6;}
 223 .i_11 {.font-color > .i; .font-type > ._11;}
 224 .i_17 {.font-color > .i; .font-type > ._17;}
 225
 226 .l_1  {.font-color > .l; .font-type > ._1;}
 227 .l_9  {.font-color > .l; .font-type > ._9;}
 228
 229 .m_4  {.font-color > .m; .font-type > ._4;}
 230 .m_7  {.font-color > .m; .font-type > ._7;}
 231
 232 .p_1  {.font-color > .p; .font-type > ._1;}
 233 .p_3  {.font-color > .p; .font-type > ._3;}
 234 .p_9  {.font-color > .p; .font-type > ._9;}
 235
 236 .q_7  {.font-color > .q; .font-type > ._7;}
 237 .q_9  {.font-color > .q; .font-type > ._9;}
 238 .q_11 {.font-color > .q; .font-type > ._11;}
 239
 240 .r_12 {.font-color > .r; .font-type > ._12;}
 241
 242 .t_1  {.font-color > .t; .font-type > ._1;}
 243 .t_7  {.font-color > .t; .font-type > ._7;}
 244 .t_15 {.font-color > .t; .font-type > ._15;}
 245
 246 /* Added by ikram - */
 247 .s_1 {.font-color > .s; .font-type > ._1;}
 248
 249 .s_10 {
 250     .font-color > .s;
 251     .font-type > ._10;
 252 }
 253 .s_12 {.font-color > .s; .font-type > ._12;}
 254
 255 .z_9  {.font-color > .z; .font-type > ._9;}
 256 .backgroundColor {
 257     .a {background-color:  @color_a;}
 258     .b {background-color:  @color_b;}
 259     .c {background-color:  @color_c;}
 260     .d {background-color:  @color_d;}
 261     .e {background-color:  @color_e;}
 262     .f {background-color:  @color_f;}
 263     .g {background-color:  @color_g;}
 264     .h {background-color:  @color_h;}
 265     .i {background-color:  @color_i;}
 266     .j {background-color:  @color_j;}
 267     .k {background-color:  @color_k;}
 268     .l {background-color:  @color_l;}
 269     .m {background-color:  @color_m;}
 270     .n {background-color:  @color_n;}
 271     .o {background-color:  @color_o;}
 272     .p {background-color:  @color_p;}
 273     .q {background-color:  @color_q;}
 274     .r {background-color:  @color_r;}
 275     .s {background-color:  @color_s;}
 276     .t {background-color:  @color_t;}
 277     .u {background-color:  @color_u;}
 278     .v {background-color:  @color_v;}
 279     .w {background-color:  @color_w;}
 280     .x {background-color:  @color_x;}
 281     .y {background-color:  @color_y;}
 282     .z {background-color:  @color_z;}
 283     .zz {background-color:  @color_zz;}
 284
 285     .hover {
 286         .a {background-color: @color_a_hover;}
 287         .b {background-color: @color_b_hover;}
 288         .c {background-color: @color_c_hover;}
 289         .d {background-color: @color_d_hover;}
 290         .e {background-color: @color_e_hover;}
 291         .f {background-color: @color_f_hover;}
 292         .g {background-color: @color_g_hover;}
 293         .h {background-color: @color_h_hover;}
 294         .i {background-color: @color_i_hover;}
 295         .j {background-color: @color_j_hover;}
 296         .k {background-color: @color_k_hover;}
 297         .l {background-color: @color_l_hover;}
 298         .m {background-color: @color_m_hover;}
 299         .n {background-color: @color_n_hover;}
 300         .o {background-color: @color_o_hover;}
 301         .p {background-color: @color_p_hover;}
 302         .q {background-color: @color_q_hover;}
 303         .r {background-color: @color_r_hover;}
 304         .s {background-color: @color_s_hover;}
 305         .t {background-color: @color_t_hover;}
 306         .u {background-color: @color_u_hover;}
 307         .v {background-color: @color_v_hover;}
 308         .w {background-color: @color_w_hover;}
 309         .x {background-color: @color_x_hover;}
 310         .y {background-color: @color_y_hover;}
 311         .z {background-color: @color_z_hover;}
 312         .zz {background-color: @color_zz_hover;}
 313     }
 314 }
 315
 316 .bg_a {.backgroundColor > .a;}
 317 .bg_b {.backgroundColor > .b;}
 318 .bg_c {.backgroundColor > .c;}
 319 .bg_d {.backgroundColor > .d;}
 320 .bg_e {.backgroundColor > .e;}
 321 .bg_f {.backgroundColor > .f;}
 322 .bg_g {.backgroundColor > .g;}
 323 .bg_h {.backgroundColor > .h;}
 324 .bg_i {.backgroundColor > .i;}
 325 .bg_j {.backgroundColor > .j;}
 326 .bg_k {.backgroundColor > .k;}
 327 .bg_l {.backgroundColor > .l;}
 328 .bg_m {.backgroundColor > .m;}
 329 .bg_n {.backgroundColor > .n;}
 330 .bg_o {.backgroundColor > .o;}
 331 .bg_p {.backgroundColor > .p;}
 332 .bg_q {.backgroundColor > .q;}
 333 .bg_r {.backgroundColor > .r;}
 334 .bg_s {.backgroundColor > .s;}
 335 .bg_t {.backgroundColor > .t;}
 336 .bg_u {.backgroundColor > .u;}
 337 .bg_v {.backgroundColor > .v;}
 338 .bg_w {.backgroundColor > .w;}
 339 .bg_x {.backgroundColor > .x;}
 340 .bg_y {.backgroundColor > .y;}
 341 .bg_z {.backgroundColor > .z;}
 342 .bg_zz {.backgroundColor > .zz;}
 343
 344 .bg_a_hover {.backgroundColor > .hover > .a;}
 345 .bg_b_hover {.backgroundColor > .hover > .b;}
 346 .bg_c_hover {.backgroundColor > .hover > .c;}
 347 .bg_d_hover {.backgroundColor > .hover > .d;}
 348 .bg_e_hover {.backgroundColor > .hover > .e;}
 349 .bg_f_hover {.backgroundColor > .hover > .f;}
 350 .bg_g_hover {.backgroundColor > .hover > .g;}
 351 .bg_h_hover {.backgroundColor > .hover > .h;}
 352 .bg_i_hover {.backgroundColor > .hover > .i;}
 353 .bg_j_hover {.backgroundColor > .hover > .j;}
 354 .bg_l_hover {.backgroundColor > .hover > .l;}
 355 .bg_m_hover {.backgroundColor > .hover > .m;}
 356 .bg_n_hover {.backgroundColor > .hover > .n;}
 357 .bg_o_hover {.backgroundColor > .hover > .o;}
 358 .bg_p_hover {.backgroundColor > .hover > .p;}
 359 .bg_q_hover {.backgroundColor > .hover > .q;}
 360 .bg_r_hover {.backgroundColor > .hover > .r;}
 361 .bg_s_hover {.backgroundColor > .hover > .s;}
 362 .bg_t_hover {.backgroundColor > .hover > .t;}
 363 .bg_u_hover {.backgroundColor > .hover > .u;}
 364 .bg_v_hover {.backgroundColor > .hover > .v;}
 365 .bg_w_hover {.backgroundColor > .hover > .w;}
 366 .bg_x_hover {.backgroundColor > .hover > .x;}
 367 .bg_y_hover {.backgroundColor > .hover > .y;}
 368 .bg_z_hover {.backgroundColor > .hover > .z;}
 369 .bg_zz_hover {.backgroundColor > .hover > .zz;}
 370
 371 .center         {margin: 0 auto;}
 372 .vcenter        {display: table-cell;vertical-align: middle;}
 373 .left           {float: left;}
 374 .right          {float: right;}
 375 .hand           {cursor: pointer;}
 376 .default-pointer {cursor: default;}
 377 .text-center    {text-align: center;}
 378 .display-none   {display: none;}
 379 .nowrap         {white-space: nowrap;}
 380 .bold           {font-weight: bold;}
 381 .full-height    {height: 100%;}
 382 .uppercase      {text-transform: uppercase;}
 383 .capitalize     {text-transform: capitalize;}
 384 .disabled       {
 385     //background-color: #f2f2f2;
 386     //border-color: #d8d8d8;
 387     //background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAIklEQVQIW2NkQAKrVq36zwjjgzhhYWGMYAEYB8RmROaABADeOQ8CXl/xfgAAAABJRU5ErkJggg==) repeat;
 388     //color: @color_m;
 389 }
 390
 391 .border-radius(@radius) {
 392     -webkit-border-radius: @radius;
 393     -moz-border-radius: @radius;
 394     border-radius: @radius;
 395 }
 396
 397 .border-radius-top-left(@radius) {
 398     -webkit-border-top-left-radius: @radius;
 399     -moz-border-radius-topleft: @radius;
 400     -khtml-border-top-left-radius: @radius;
 401     border-top-left-radius: @radius;
 402 }
 403
 404 .border-radius-top-right(@radius) {
 405     -webkit-border-top-right-radius: @radius;
 406     -moz-border-radius-topright: @radius;
 407     -khtml-border-top-right-radius: @radius;
 408     border-top-right-radius: @radius;
 409 }
 410
 411 .border-radius-bottom-left(@radius) {
 412     -webkit-border-bottom-left-radius: @radius;
 413     -moz-border-radius-bottomleft: @radius;
 414     -khtml-border-bottom-left-radius: @radius;
 415     border-bottom-left-radius: @radius;
 416 }
 417
 418 .border-radius-bottom-right(@radius) {
 419     -webkit-border-bottom-right-radius: @radius;
 420     -moz-border-radius-bottomright: @radius;
 421     -khtml-border-bottom-right-radius: @radius;
 422     border-bottom-right-radius: @radius;
 423 }
 424
 425 .opacity(@opacity: 0.5) {
 426     -moz-opacity: @opacity;
 427     -khtml-opacity: @opacity;
 428     -webkit-opacity: @opacity;
 429     opacity: @opacity;
 430 }
 431
 432 .box-shadow(@arguments) {
 433     -webkit-box-shadow: @arguments;
 434     -moz-box-shadow: @arguments;
 435     box-shadow: @arguments;
 436 }
 437
 438 .square(@size) {
 439     width: @size;
 440     height: @size;
 441 }
 442
 443 .selfClear:after {
 444     content: ".";
 445     display: block;
 446     height: 0px;
 447     clear: both;
 448     visibility: hidden;
 449 }
 450 .selfClear {
 451     display: inline-block;
 452 }
 453
 454 .clearfix:after {
 455     content: ".";
 456     display: block;
 457     clear: both;
 458     visibility: hidden;
 459     line-height: 0;
 460     height: 0;
 461 }
 462
 463 .clearfix {
 464     display: inline-block;
 465     clear: both;
 466 }
 467
 468 .gradient(@d; @st; @st_o; @ec; @ec_0;){
 469     background: -webkit-linear-gradient(@d, @st @st_o, @ec @ec_0);
 470     background: -moz-linear-gradient(@d, @st @st_o, @ec @ec_0);
 471     background: -o-linear-gradient(@d, @st @st_o, @ec @ec_0);
 472     background: -ms-linear-gradient(@d, @st @st_o, @ec @ec_0);
 473     background: linear-gradient(@d, @st @st_o, @ec @ec_0);
 474 }
 475
 476 .hyphenate {
 477     -ms-word-break: break-all;
 478     word-break: break-all;
 479
 480     // Non standard for webkit
 481     word-break: break-word;
 482
 483     -webkit-hyphens: auto;
 484     -moz-hyphens: auto;
 485     hyphens: auto;
 486 }
 487
 488 .user-select (@val;) {
 489     -webkit-touch-callout: none;
 490     -webkit-user-select: @val;
 491     -khtml-user-select: @val;
 492     -moz-user-select: @val;
 493     -ms-user-select: @val;
 494     user-select: @val;
 495 }
 496
 497 .flex-fixed (@width) {
 498     flex-basis: @width;
 499     flex-grow: 0;
 500     flex-shrink: 0;
 501 }
 502
 503 .perfect-scrollbar {
 504     position: relative;
 505     overflow: hidden;
 506 }
 507
 508 .noselect {
 509     -webkit-touch-callout: none;
 510     -webkit-user-select: none;
 511     -khtml-user-select: none;
 512     -moz-user-select: none;
 513     -ms-user-select: none;
 514     user-select: none;
 515 }
 516
 517 .arrow(@size, @color){
 518     content: '';
 519     position: absolute;
 520     top: 50%;
 521     right: 100%;
 522     margin-top: -@size;
 523     width: 0;
 524     height: 0;
 525     border-right: @size solid @color;
 526     border-top: @size solid transparent;
 527     border-bottom: @size solid transparent;
 528 }
 529
 530 .circle(@size, @color){
 531     background-color: @color;
 532     .border-radius(50%);
 533     color: @color_c;
 534     content: '';
 535     height: @size;
 536     width: @size;
 537     text-align: center;
 538     display: block;
 539 }
 540
 541 .sdc-ellipsis{
 542      text-overflow: ellipsis;
 543      overflow: hidden;
 544      display: inline-block;
 545      white-space: nowrap;
 546  }
 547
 548 // Works with animate.css
 549 .animation-duration(@seconds) {
 550     animation-duration: @seconds; //3s
 551     -webkit-animation-duration: @seconds;
 552     -moz-animation-duration: @seconds;
 553 }
 554
 555 .animation-delay(@seconds) {
 556     animation-delay: @seconds; //3s
 557     -webkit-animation-delay: @seconds;
 558     -moz-animation-delay: @seconds;
 559 }
 560
 561 .animation-iterations(@iterations) {
 562     animation-iteration-count: @iterations;     // infinite;
 563     -webkit-animation-iteration-count: @iterations;
 564     -moz-animation-iteration-count: @iterations;
 565 }