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

   1 @import "variables";
   2
   3 .f-color {
   4     .a {color:  @main_color_a;}
   5     .b {color:  @main_color_b;}
   6     .c {color:  @main_color_c;}
   7     .d {color:  @main_color_d;}
   8     .e {color:  @main_color_e;}
   9     .f {color:  @main_color_f;}
  10     .g {color:  @main_color_g;}
  11     .h {color:  @main_color_h;}
  12     .i {color:  @main_color_i;}
  13     .j {color:  @main_color_j;}
  14     .k {color:  @main_color_k;}
  15     .l {color:  @main_color_l;}
  16     .m {color:  @main_color_m;}
  17     .n {color:  @main_color_n;}
  18     .o {color:  @main_color_o;}
  19     .p {color:  @main_color_p;}
  20
  21     .q {color:  @func_color_q;}
  22     .r {color:  @func_color_r;}
  23     .s {color:  @func_color_s;}
  24
  25     .t {color:  @tlv_color_t;}
  26     .u {color:  @tlv_color_u;}
  27     .v {color:  @tlv_color_v;}
  28
  29
  30 }
  31
  32 .f-type {
  33     ._36 {
  34         font-family: @font-opensans-light;
  35         font-size: 36px;
  36     }
  37     ._28 {
  38         font-family: @font-opensans-light;
  39         font-size: 28px;
  40     }
  41     ._24 {
  42         font-family: @font-opensans-light;
  43         font-size: 24px;
  44     }
  45     ._18_r {
  46         font-family: @font-opensans-regular;
  47         font-size: 18px;
  48     }
  49     ._18_m {
  50         font-family: @font-opensans-medium;
  51         font-size: 18px;
  52     }
  53     ._16_r {
  54         font-family: @font-opensans-regular;
  55         font-size: 16px;
  56     }
  57     ._16_m {
  58         font-family: @font-opensans-medium;
  59         font-size: 16px;
  60     }
  61     ._14_r {
  62         font-family: @font-opensans-regular;
  63         font-size: 14px;
  64     }
  65     ._14_m {
  66         font-family: @font-opensans-medium;
  67         font-size: 14px;
  68     }
  69     ._14_i {
  70         font-family: @font-opensans-medium-italic;
  71         font-size: 14px;
  72     }
  73     ._13_r {
  74         font-family: @font-opensans-regular;
  75         font-size: 13px;
  76     }
  77     ._13_m {
  78         font-family: @font-opensans-medium;
  79         font-size: 13px;
  80     }
  81     ._13_i {
  82         font-family: @font-opensans-medium-italic;
  83         font-size: 13px;
  84     }
  85     ._12_r {
  86         font-family: @font-opensans-regular;
  87         font-size: 12px;
  88     }
  89     ._12_m {
  90         font-family: @font-opensans-medium;
  91         font-size: 12px;
  92     }
  93     ._12_i {
  94         font-family: @font-opensans-medium-italic;
  95         font-size: 12px;
  96     }
  97 }
  98
  99 .buildForColor(@c){
 100     .@{c}_36  { color:  ~"@{main_color_@{c}}"; .f-type > ._36;}
 101     .@{c}_24  { color:  ~"@{main_color_@{c}}"; .f-type > ._24;}
 102     .@{c}_18_r  { color:  ~"@{main_color_@{c}}"; .f-type > ._18_r;}
 103     .@{c}_18_m  { color:  ~"@{main_color_@{c}}"; .f-type > ._18_m;}
 104     .@{c}_16_r  { color:  ~"@{main_color_@{c}}"; .f-type > ._16_r;}
 105     .@{c}_16_m  { color:  ~"@{main_color_@{c}}"; .f-type > ._16_m;}
 106     .@{c}_14_r  { color:  ~"@{main_color_@{c}}"; .f-type > ._14_r;}
 107     .@{c}_14_m  { color:  ~"@{main_color_@{c}}"; .f-type > ._14_m;}
 108     .@{c}_14_i  { color:  ~"@{main_color_@{c}}"; .f-type > ._14_i;}
 109     .@{c}_13_r  { color:  ~"@{main_color_@{c}}"; .f-type > ._13_r;}
 110     .@{c}_13_m  { color:  ~"@{main_color_@{c}}"; .f-type > ._13_m;}
 111     .@{c}_13_i  { color:  ~"@{main_color_@{c}}"; .f-type > ._13_i;}
 112     .@{c}_12_r  { color:  ~"@{main_color_@{c}}"; .f-type > ._12_r;}
 113     .@{c}_12_m  { color:  ~"@{main_color_@{c}}"; .f-type > ._12_m;}
 114     .@{c}_12_i  { color:  ~"@{main_color_@{c}}"; .f-type > ._12_i;}
 115 }
 116
 117 .buildForFuncColor(@c){
 118     .@{c}_36  { color:  ~"@{func_color_@{c}}"; .f-type > ._36;}
 119     .@{c}_24  { color:  ~"@{func_color_@{c}}"; .f-type > ._24;}
 120     .@{c}_18_r  { color:  ~"@{func_color_@{c}}"; .f-type > ._18_r;}
 121     .@{c}_18_m  { color:  ~"@{func_color_@{c}}"; .f-type > ._18_m;}
 122     .@{c}_16_r  { color:  ~"@{func_color_@{c}}"; .f-type > ._16_r;}
 123     .@{c}_16_m  { color:  ~"@{func_color_@{c}}"; .f-type > ._16_m;}
 124     .@{c}_14_r  { color:  ~"@{func_color_@{c}}"; .f-type > ._14_r;}
 125     .@{c}_14_m  { color:  ~"@{func_color_@{c}}"; .f-type > ._14_m;}
 126     .@{c}_14_i  { color:  ~"@{func_color_@{c}}"; .f-type > ._14_i;}
 127     .@{c}_13_r  { color:  ~"@{func_color_@{c}}"; .f-type > ._13_r;}
 128     .@{c}_13_m  { color:  ~"@{func_color_@{c}}"; .f-type > ._13_m;}
 129     .@{c}_13_i  { color:  ~"@{func_color_@{c}}"; .f-type > ._13_i;}
 130     .@{c}_12_r  { color:  ~"@{func_color_@{c}}"; .f-type > ._12_r;}
 131     .@{c}_12_m  { color:  ~"@{func_color_@{c}}"; .f-type > ._12_m;}
 132     .@{c}_12_i  { color:  ~"@{func_color_@{c}}"; .f-type > ._12_i;}
 133 }
 134
 135
 136 .buildForTlvColor(@c){
 137     .@{c}_36  { color:  ~"@{tlv_color_@{c}}"; .f-type > ._36;}
 138     .@{c}_24  { color:  ~"@{tlv_color_@{c}}"; .f-type > ._24;}
 139     .@{c}_18_r  { color:  ~"@{tlv_color_@{c}}"; .f-type > ._18_r;}
 140     .@{c}_18_m  { color:  ~"@{tlv_color_@{c}}"; .f-type > ._18_m;}
 141     .@{c}_16_r  { color:  ~"@{tlv_color_@{c}}"; .f-type > ._16_r;}
 142     .@{c}_16_m  { color:  ~"@{tlv_color_@{c}}"; .f-type > ._16_m;}
 143     .@{c}_14_r  { color:  ~"@{tlv_color_@{c}}"; .f-type > ._14_r;}
 144     .@{c}_14_m  { color:  ~"@{tlv_color_@{c}}"; .f-type > ._14_m;}
 145     .@{c}_14_i  { color:  ~"@{tlv_color_@{c}}"; .f-type > ._14_i;}
 146     .@{c}_13_r  { color:  ~"@{tlv_color_@{c}}"; .f-type > ._13_r;}
 147     .@{c}_13_m  { color:  ~"@{tlv_color_@{c}}"; .f-type > ._13_m;}
 148     .@{c}_13_i  { color:  ~"@{tlv_color_@{c}}"; .f-type > ._13_i;}
 149     .@{c}_12_r  { color:  ~"@{tlv_color_@{c}}"; .f-type > ._12_r;}
 150     .@{c}_12_m  { color:  ~"@{tlv_color_@{c}}"; .f-type > ._12_m;}
 151     .@{c}_12_i  { color:  ~"@{tlv_color_@{c}}"; .f-type > ._12_i;}
 152 }
 153
 154 .buildForColor(a);
 155 .buildForColor(b);
 156 .buildForColor(c);
 157 .buildForColor(d);
 158 .buildForColor(e);
 159 .buildForColor(f);
 160 .buildForColor(g);
 161 .buildForColor(h);
 162 .buildForColor(i);
 163 .buildForColor(j);
 164 .buildForColor(k);
 165 .buildForColor(l);
 166 .buildForColor(m);
 167 .buildForColor(n);
 168 .buildForColor(o);
 169 .buildForColor(p);
 170
 171 .buildForFuncColor(q);
 172 .buildForFuncColor(r);
 173 .buildForFuncColor(s);
 174
 175 .buildForTlvColor(t);
 176 .buildForTlvColor(u);
 177 .buildForTlvColor(v);
 178
 179
 180 .disabled {
 181     opacity: 0.4 !important;
 182     cursor: auto;
 183     background-color: transparent;
 184     pointer-events: none;
 185 }
 186
 187 /* I'm not using hidden name, can not override bower_components/bootstrap/dist/css/less/responsive-utilities.less */
 188 .hideme {
 189     visibility: hidden;
 190 }
 191
 192 .view-mode {
 193     opacity: 1;
 194     border: solid 1px @main_color_o;
 195     background-color: #f8f8f8;
 196     cursor: auto;
 197
 198     & + &:not(.icons-text), &.no-border-top {
 199        border-top: none;
 200     }
 201 }
 202
 203 .no-pointer-events {
 204     pointer-events: none;
 205 }
 206
 207 .unselectable {
 208     -moz-user-select: -moz-none;
 209     -khtml-user-select: none;
 210     -webkit-user-select: none;
 211     -ms-user-select: none;
 212     user-select: none;
 213 }
 214
 215 .selectable {
 216     -moz-user-select: text;
 217     -khtml-user-select: text;
 218     -webkit-user-select: text;
 219     -ms-user-select: text;
 220     user-select: text;
 221 }