catalog-ui/src/assets/styles/layout/main.less


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134

.full-height {
    height: 100%;
    background-color: @main_color_l
}

.w-sdc-main-container {
    position: absolute;
    top: @header_height + @top_nav_height;
    left: 0;
    right: 0;
    bottom: @footer_height;

    .w-sdc-main-right-container {
        .bg_n;
        bottom: 0;
        padding: 22px 12px;
        position: absolute;
        left: 240px;
        right: 0;
        top: 0;
        overflow: hidden;

        & > div:first-child {
            padding-bottom: 80px;
        }

        .sdc-tile-catalog {
            margin: 10px;
        }

    }
}

.w-sdc-row-flex-items {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
}

.sdc-loading-page {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: absolute;
    height: 100%;
    width: 100%;

    .caption1 {
        .p_24;
        text-align: center;
    }

    .caption2 {
        .p_16_m;
        display: block;
    }
}

.main-loader {
    @green: #cccccc;
    @blue: #dddddd;
    @red: #eeeeee;
    @yellow: #bbbbbb;
    @white: #ffffff;

    @width: 80px;

    .loader {
        position: relative;
        margin: 0px auto;
        width: @width;
        &:before {
            content:'';
            display: block;
            padding-top: 100%;
        }
    }

    .circular {
        animation: rotate 2s linear infinite;
        height: 100%;
        transform-origin: center center;
        width: 100%;
        position: absolute;
        top: 0; bottom: 0; left: 0; right: 0;
        margin: auto;
    }


    .path {
        stroke-dasharray: 1,200;
        stroke-dashoffset: 0;
        animation:
        dash 1.5s ease-in-out infinite,
        color 6s ease-in-out infinite;
        stroke-linecap: round;
    }

    @keyframes rotate{
        100%{
            transform: rotate(360deg);
        }
    }
    @keyframes dash{
        0%{
            stroke-dasharray: 1,200;
            stroke-dashoffset: 0;
        }
        50%{
            stroke-dasharray: 89,200;
            stroke-dashoffset: -35px;
        }
        100%{
            stroke-dasharray: 89,200;
            stroke-dashoffset: -124px;
        }
    }
    @keyframes color{
        100%, 0%{
            stroke: @red;
        }
        40%{
            stroke: @blue;
        }
        66%{
            stroke: @green;
        }
        80%, 90%{
            stroke: @yellow;
        }
    }

}