diff options
Diffstat (limited to 'd2ice.att.io/app/styles/mixins.less')
| -rwxr-xr-x | d2ice.att.io/app/styles/mixins.less | 381 |
1 files changed, 381 insertions, 0 deletions
diff --git a/d2ice.att.io/app/styles/mixins.less b/d2ice.att.io/app/styles/mixins.less new file mode 100755 index 00000000..e34c4344 --- /dev/null +++ b/d2ice.att.io/app/styles/mixins.less @@ -0,0 +1,381 @@ +// +// ============LICENSE_START========================================== +// org.onap.vvp/portal +// =================================================================== +// Copyright © 2017 AT&T Intellectual Property. All rights reserved. +// =================================================================== +// +// Unless otherwise specified, all software contained herein is licensed +// under the Apache License, Version 2.0 (the “License”); +// you may not use this software except in compliance with the License. +// You may obtain a copy of the License at +// +// http:www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. +// +// +// +// Unless otherwise specified, all documentation contained herein is licensed +// under the Creative Commons License, Attribution 4.0 Intl. (the “License”); +// you may not use this documentation except in compliance with the License. +// You may obtain a copy of the License at +// +// https:creativecommons.org/licenses/by/4.0/ +// +// Unless required by applicable law or agreed to in writing, documentation +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. +// +// ============LICENSE_END============================================ +// +// ECOMP is a trademark and service mark of AT&T Intellectual Property. +@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;} + .x {color: @func_color_x;} + + + .t {color: @tlv_color_t;} + .u {color: @tlv_color_u;} + .v {color: @tlv_color_v;} + + .w {color: @bg_color_a;} + + +} + +.f-type { + ._36 { + font-family: @font-omnes-light; + font-size: 36px; + } + ._36_m { + font-family: @font-omnes-medium; + font-size: 36px; + } + ._26 { + font-family: @font-omnes-light; + font-size: 26px; + } + ._26_m { + font-family: @font-omnes-medium; + font-size: 26px; + } + ._24 { + font-family: @font-omnes-light; + font-size: 24px; + } + ._24_m { + font-family: @font-omnes-medium; + font-size: 24px; + } + ._24_r { + font-family: @font-omnes-regular; + font-size: 24px; + } + ._22 { + font-family: @font-omnes-light; + font-size: 22px; + } + ._22_m { + font-family: @font-omnes-medium; + font-size: 22px; + } + ._20 { + font-family: @font-omnes-light; + font-size: 20px; + } + ._20_m { + font-family: @font-omnes-medium; + font-size: 20px; + } + ._18 { + font-family: @font-omnes-light; + font-size: 18px; + } + ._18_r { + font-family: @font-omnes-regular; + font-size: 18px; + } + ._18_m { + font-family: @font-omnes-medium; + font-size: 18px; + } + ._16_i { + font-family: @font-omnes-medium-italic; + font-size: 16px; + } + ._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; + } + ._10_r { + font-family: @font-omnes-regular; + font-size: 10px; + } + ._10_m { + font-family: @font-omnes-medium; + font-size: 10px; + } +} + +.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); +.buildForFuncColor(x); + +.buildForTlvColor(t); +.buildForTlvColor(u); +.buildForTlvColor(v); + + +.buildForColor(@c){ + .@{c}_36 { color: ~"@{main_color_@{c}}"; .f-type > ._36;} + .@{c}_36_m { color: ~"@{main_color_@{c}}"; .f-type > ._36_m;} + .@{c}_26 { color: ~"@{main_color_@{c}}"; .f-type > ._26;} + .@{c}_26_m { color: ~"@{main_color_@{c}}"; .f-type > ._26_m;} + .@{c}_24 { color: ~"@{main_color_@{c}}"; .f-type > ._24;} + .@{c}_24_m { color: ~"@{main_color_@{c}}"; .f-type > ._24_m;} + .@{c}_24_r { color: ~"@{main_color_@{c}}"; .f-type > ._24_r;} + .@{c}_22 { color: ~"@{main_color_@{c}}"; .f-type > ._22;} + .@{c}_22_m { color: ~"@{main_color_@{c}}"; .f-type > ._22_m;} + .@{c}_20 { color: ~"@{main_color_@{c}}"; .f-type > ._20;} + .@{c}_20_m { color: ~"@{main_color_@{c}}"; .f-type > ._20_m;} + .@{c}_18 { color: ~"@{main_color_@{c}}"; .f-type > ._18;} + .@{c}_18_r { color: ~"@{main_color_@{c}}"; .f-type > ._18_r;} + .@{c}_18_m { color: ~"@{main_color_@{c}}"; .f-type > ._18_m;} + .@{c}_16_i { color: ~"@{main_color_@{c}}"; .f-type > ._16_i;} + .@{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;} + .@{c}_10_r { color: ~"@{main_color_@{c}}"; .f-type > ._10_r;} + .@{c}_10_m { color: ~"@{main_color_@{c}}"; .f-type > ._10_m;} + +} + +.buildForFuncColor(@c){ + .@{c}_36 { color: ~"@{func_color_@{c}}"; .f-type > ._36;} + .@{c}_36_m { color: ~"@{func_color_@{c}}"; .f-type > ._36_m;} + .@{c}_26 { color: ~"@{func_color_@{c}}"; .f-type > ._26;} + .@{c}_26_m { color: ~"@{func_color_@{c}}"; .f-type > ._26_m;} + .@{c}_24 { color: ~"@{func_color_@{c}}"; .f-type > ._24;} + .@{c}_24_m { color: ~"@{func_color_@{c}}"; .f-type > ._24_m;} + .@{c}_24_r { color: ~"@{func_color_@{c}}"; .f-type > ._24_r;} + .@{c}_22 { color: ~"@{func_color_@{c}}"; .f-type > ._22;} + .@{c}_22_m { color: ~"@{func_color_@{c}}"; .f-type > ._22_m;} + .@{c}_20 { color: ~"@{func_color_@{c}}"; .f-type > ._20;} + .@{c}_20_m { color: ~"@{func_color_@{c}}"; .f-type > ._20_m;} + .@{c}_18 { color: ~"@{func_color_@{c}}"; .f-type > ._18;} + .@{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}_36_m { color: ~"@{tlv_color_@{c}}"; .f-type > ._36_m;} + .@{c}_26 { color: ~"@{tlv_color_@{c}}"; .f-type > ._26;} + .@{c}_26_m { color: ~"@{tlv_color_@{c}}"; .f-type > ._26_m;} + .@{c}_24 { color: ~"@{tlv_color_@{c}}"; .f-type > ._24;} + .@{c}_24_m { color: ~"@{tlv_color_@{c}}"; .f-type > ._24_m;} + .@{c}_24_r { color: ~"@{tlv_color_@{c}}"; .f-type > ._24_r;} + .@{c}_22 { color: ~"@{tlv_color_@{c}}"; .f-type > ._22;} + .@{c}_22_m { color: ~"@{tlv_color_@{c}}"; .f-type > ._22_m;} + .@{c}_20 { color: ~"@{tlv_color_@{c}}"; .f-type > ._20;} + .@{c}_20_m { color: ~"@{tlv_color_@{c}}"; .f-type > ._20_m;} + .@{c}_18 { color: ~"@{tlv_color_@{c}}"; .f-type > ._18;} + .@{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;} +} + +.disabled { + opacity: 0.4 !important; + cursor: auto; + background-color: transparent; + pointer-events: none; +} + +.circle(@size) { + border-radius: 50%; + width: @size; + height: @size; +} + +.step-progress(@size, @color, @width) { + position: relative; + .circle { + .circle(@size); + display: inline-block; + background-color: @color; + } + .line { + border-bottom: solid 2px @color; + position: absolute; + top: @size/2-1; + width: @width; + } + .text { + position: absolute; + top: -5px; + margin-left: 10px; + .a_16_m; + } +} + +.step-progress-dashed(@size, @color, @width) { + position: relative; + .circle { + .circle(@size); + display: inline-block; + background-color: #ffffff; + border: dashed 1px @color; + } + .line { + border-bottom: dashed 1px @color; + position: absolute; + top: @size/2-1; + width: @width; + } + .text { + position: absolute; + top: -5px; + margin-left: 10px; + .a_16_m; + } +} + +.step-progress-solid(@size, @color, @width) { + position: relative; + .circle { + .circle(@size); + display: inline-block; + background-color: #ffffff; + border: solid 1px @color; + } + .line { + border-bottom: solid 1px @color; + position: absolute; + top: @size/2-1; + width: @width; + } + .text { + position: absolute; + top: -5px; + margin-left: 10px; + .a_16_m; + } +} |