aboutsummaryrefslogtreecommitdiffstats
path: root/catalog-ui/src/assets/styles/layout/main.less
diff options
context:
space:
mode:
Diffstat (limited to 'catalog-ui/src/assets/styles/layout/main.less')
-rw-r--r--catalog-ui/src/assets/styles/layout/main.less134
1 files changed, 134 insertions, 0 deletions
diff --git a/catalog-ui/src/assets/styles/layout/main.less b/catalog-ui/src/assets/styles/layout/main.less
new file mode 100644
index 0000000000..54f6b87d7c
--- /dev/null
+++ b/catalog-ui/src/assets/styles/layout/main.less
@@ -0,0 +1,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;
+ }
+ }
+
+}