aboutsummaryrefslogtreecommitdiffstats
path: root/catalog-ui/src/assets/styles/mixins.less
diff options
context:
space:
mode:
Diffstat (limited to 'catalog-ui/src/assets/styles/mixins.less')
-rw-r--r--catalog-ui/src/assets/styles/mixins.less217
1 files changed, 217 insertions, 0 deletions
diff --git a/catalog-ui/src/assets/styles/mixins.less b/catalog-ui/src/assets/styles/mixins.less
new file mode 100644
index 0000000000..7ce9906d88
--- /dev/null
+++ b/catalog-ui/src/assets/styles/mixins.less
@@ -0,0 +1,217 @@
+@import "variables";
+
+.f-color {
+ .a {color: @main_color_a;}
+ .b {color: @main_color_b;}
+ .c {color: @main_color_c;}
+ .d {color: @main_color_d;}
+ .e {color: @main_color_e;}
+ .f {color: @main_color_f;}
+ .g {color: @main_color_g;}
+ .h {color: @main_color_h;}
+ .i {color: @main_color_i;}
+ .j {color: @main_color_j;}
+ .k {color: @main_color_k;}
+ .l {color: @main_color_l;}
+ .m {color: @main_color_m;}
+ .n {color: @main_color_n;}
+ .o {color: @main_color_o;}
+ .p {color: @main_color_p;}
+
+ .q {color: @func_color_q;}
+ .r {color: @func_color_r;}
+ .s {color: @func_color_s;}
+
+ .t {color: @tlv_color_t;}
+ .u {color: @tlv_color_u;}
+ .v {color: @tlv_color_v;}
+
+
+}
+
+.f-type {
+ ._36 {
+ font-family: @font-omnes-light;
+ font-size: 36px;
+ }
+ ._24 {
+ font-family: @font-omnes-light;
+ font-size: 24px;
+ }
+ ._18_r {
+ font-family: @font-omnes-regular;
+ font-size: 18px;
+ }
+ ._18_m {
+ font-family: @font-omnes-medium;
+ font-size: 18px;
+ }
+ ._16_r {
+ font-family: @font-omnes-regular;
+ font-size: 16px;
+ }
+ ._16_m {
+ font-family: @font-omnes-medium;
+ font-size: 16px;
+ }
+ ._14_r {
+ font-family: @font-omnes-regular;
+ font-size: 14px;
+ }
+ ._14_m {
+ font-family: @font-omnes-medium;
+ font-size: 14px;
+ }
+ ._14_i {
+ font-family: @font-omnes-medium-italic;
+ font-size: 14px;
+ }
+ ._13_r {
+ font-family: @font-omnes-regular;
+ font-size: 13px;
+ }
+ ._13_m {
+ font-family: @font-omnes-medium;
+ font-size: 13px;
+ }
+ ._13_i {
+ font-family: @font-omnes-medium-italic;
+ font-size: 13px;
+ }
+ ._12_r {
+ font-family: @font-omnes-regular;
+ font-size: 12px;
+ }
+ ._12_m {
+ font-family: @font-omnes-medium;
+ font-size: 12px;
+ }
+ ._12_i {
+ font-family: @font-omnes-medium-italic;
+ font-size: 12px;
+ }
+}
+
+.buildForColor(@c){
+ .@{c}_36 { color: ~"@{main_color_@{c}}"; .f-type > ._36;}
+ .@{c}_24 { color: ~"@{main_color_@{c}}"; .f-type > ._24;}
+ .@{c}_18_r { color: ~"@{main_color_@{c}}"; .f-type > ._18_r;}
+ .@{c}_18_m { color: ~"@{main_color_@{c}}"; .f-type > ._18_m;}
+ .@{c}_16_r { color: ~"@{main_color_@{c}}"; .f-type > ._16_r;}
+ .@{c}_16_m { color: ~"@{main_color_@{c}}"; .f-type > ._16_m;}
+ .@{c}_14_r { color: ~"@{main_color_@{c}}"; .f-type > ._14_r;}
+ .@{c}_14_m { color: ~"@{main_color_@{c}}"; .f-type > ._14_m;}
+ .@{c}_14_i { color: ~"@{main_color_@{c}}"; .f-type > ._14_i;}
+ .@{c}_13_r { color: ~"@{main_color_@{c}}"; .f-type > ._13_r;}
+ .@{c}_13_m { color: ~"@{main_color_@{c}}"; .f-type > ._13_m;}
+ .@{c}_13_i { color: ~"@{main_color_@{c}}"; .f-type > ._13_i;}
+ .@{c}_12_r { color: ~"@{main_color_@{c}}"; .f-type > ._12_r;}
+ .@{c}_12_m { color: ~"@{main_color_@{c}}"; .f-type > ._12_m;}
+ .@{c}_12_i { color: ~"@{main_color_@{c}}"; .f-type > ._12_i;}
+}
+
+.buildForFuncColor(@c){
+ .@{c}_36 { color: ~"@{func_color_@{c}}"; .f-type > ._36;}
+ .@{c}_24 { color: ~"@{func_color_@{c}}"; .f-type > ._24;}
+ .@{c}_18_r { color: ~"@{func_color_@{c}}"; .f-type > ._18_r;}
+ .@{c}_18_m { color: ~"@{func_color_@{c}}"; .f-type > ._18_m;}
+ .@{c}_16_r { color: ~"@{func_color_@{c}}"; .f-type > ._16_r;}
+ .@{c}_16_m { color: ~"@{func_color_@{c}}"; .f-type > ._16_m;}
+ .@{c}_14_r { color: ~"@{func_color_@{c}}"; .f-type > ._14_r;}
+ .@{c}_14_m { color: ~"@{func_color_@{c}}"; .f-type > ._14_m;}
+ .@{c}_14_i { color: ~"@{func_color_@{c}}"; .f-type > ._14_i;}
+ .@{c}_13_r { color: ~"@{func_color_@{c}}"; .f-type > ._13_r;}
+ .@{c}_13_m { color: ~"@{func_color_@{c}}"; .f-type > ._13_m;}
+ .@{c}_13_i { color: ~"@{func_color_@{c}}"; .f-type > ._13_i;}
+ .@{c}_12_r { color: ~"@{func_color_@{c}}"; .f-type > ._12_r;}
+ .@{c}_12_m { color: ~"@{func_color_@{c}}"; .f-type > ._12_m;}
+ .@{c}_12_i { color: ~"@{func_color_@{c}}"; .f-type > ._12_i;}
+}
+
+
+.buildForTlvColor(@c){
+ .@{c}_36 { color: ~"@{tlv_color_@{c}}"; .f-type > ._36;}
+ .@{c}_24 { color: ~"@{tlv_color_@{c}}"; .f-type > ._24;}
+ .@{c}_18_r { color: ~"@{tlv_color_@{c}}"; .f-type > ._18_r;}
+ .@{c}_18_m { color: ~"@{tlv_color_@{c}}"; .f-type > ._18_m;}
+ .@{c}_16_r { color: ~"@{tlv_color_@{c}}"; .f-type > ._16_r;}
+ .@{c}_16_m { color: ~"@{tlv_color_@{c}}"; .f-type > ._16_m;}
+ .@{c}_14_r { color: ~"@{tlv_color_@{c}}"; .f-type > ._14_r;}
+ .@{c}_14_m { color: ~"@{tlv_color_@{c}}"; .f-type > ._14_m;}
+ .@{c}_14_i { color: ~"@{tlv_color_@{c}}"; .f-type > ._14_i;}
+ .@{c}_13_r { color: ~"@{tlv_color_@{c}}"; .f-type > ._13_r;}
+ .@{c}_13_m { color: ~"@{tlv_color_@{c}}"; .f-type > ._13_m;}
+ .@{c}_13_i { color: ~"@{tlv_color_@{c}}"; .f-type > ._13_i;}
+ .@{c}_12_r { color: ~"@{tlv_color_@{c}}"; .f-type > ._12_r;}
+ .@{c}_12_m { color: ~"@{tlv_color_@{c}}"; .f-type > ._12_m;}
+ .@{c}_12_i { color: ~"@{tlv_color_@{c}}"; .f-type > ._12_i;}
+}
+
+.buildForColor(a);
+.buildForColor(b);
+.buildForColor(c);
+.buildForColor(d);
+.buildForColor(e);
+.buildForColor(f);
+.buildForColor(g);
+.buildForColor(h);
+.buildForColor(i);
+.buildForColor(j);
+.buildForColor(k);
+.buildForColor(l);
+.buildForColor(m);
+.buildForColor(n);
+.buildForColor(o);
+.buildForColor(p);
+
+.buildForFuncColor(q);
+.buildForFuncColor(r);
+.buildForFuncColor(s);
+
+.buildForTlvColor(t);
+.buildForTlvColor(u);
+.buildForTlvColor(v);
+
+
+.disabled {
+ opacity: 0.4 !important;
+ cursor: auto;
+ background-color: transparent;
+ pointer-events: none;
+}
+
+/* I'm not using hidden name, can not override bower_components/bootstrap/dist/css/less/responsive-utilities.less */
+.hideme {
+ visibility: hidden;
+}
+
+.view-mode {
+ opacity: 1;
+ border: solid 1px @main_color_o;
+ background-color: #f8f8f8;
+ cursor: auto;
+
+ & + &:not(.icons-text), &.no-border-top {
+ border-top: none;
+ }
+}
+
+.no-pointer-events {
+ pointer-events: none;
+}
+
+.unselectable {
+ -moz-user-select: -moz-none;
+ -khtml-user-select: none;
+ -webkit-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+}
+
+.selectable {
+ -moz-user-select: text;
+ -khtml-user-select: text;
+ -webkit-user-select: text;
+ -ms-user-select: text;
+ user-select: text;
+}