summaryrefslogtreecommitdiffstats
path: root/catalog-ui/app/styles/layout
diff options
context:
space:
mode:
Diffstat (limited to 'catalog-ui/app/styles/layout')
-rw-r--r--catalog-ui/app/styles/layout/header.less78
-rw-r--r--catalog-ui/app/styles/layout/main.less124
-rw-r--r--catalog-ui/app/styles/layout/sidebar.less163
3 files changed, 365 insertions, 0 deletions
diff --git a/catalog-ui/app/styles/layout/header.less b/catalog-ui/app/styles/layout/header.less
new file mode 100644
index 0000000000..f8e95e8b41
--- /dev/null
+++ b/catalog-ui/app/styles/layout/header.less
@@ -0,0 +1,78 @@
+.w-sdc-header {
+ .bg_j;
+ border-bottom: 1px solid @border_color_c;
+ height: 94px;
+ width: 100%;
+ display: flex;
+ align-items: center;
+}
+
+.w-sdc-header-logo {
+ .bg_i;
+ .hand;
+ border-bottom: 1px solid @border_color_a;
+ height: 94px;
+ width: 240px;
+ padding: 28px;
+ .flex-fixed(240px);
+ z-index: 1020;
+}
+
+.w-sdc-header-logo-icon {
+ display: inline-block;
+ margin-right: 8px;
+ vertical-align: -6px;
+}
+
+a.w-sdc-header-logo-link {
+ .c_5;
+ text-decoration: none;
+}
+
+.w-sdc-header-version{
+ .c_16;
+ .opacity(0.6);
+}
+
+.i-sdc-header-caption {
+ min-width: 175px;
+ text-align: left;
+ cursor: default;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ flex-grow: 10;
+ padding-left: 27px;
+ white-space: nowrap;
+
+ .i-sdc-header-caption-text {
+ .i_11;
+ text-overflow: ellipsis;
+ overflow: hidden;
+
+ }
+
+ .i-sdc-header-help {
+ .i_1;
+ .hand;
+ margin-left: 26px;
+ position: relative;
+ display: inline-block;
+
+ &::before {
+ .bg_a;
+ border-radius: 50%;
+ color: @color_c;
+ content: '?';
+ display: block;
+ height: 20px;
+ position: absolute;
+ left: -26px;
+ text-align: center;
+ width: 20px;
+ }
+ }
+}
+
+.sdc-error-403-container-title {
+ .b_11;
+}
diff --git a/catalog-ui/app/styles/layout/main.less b/catalog-ui/app/styles/layout/main.less
new file mode 100644
index 0000000000..925da09431
--- /dev/null
+++ b/catalog-ui/app/styles/layout/main.less
@@ -0,0 +1,124 @@
+.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: 0;
+
+ .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 { /* scroll fix */
+ padding-bottom: 80px;
+ }
+ }
+}
+
+.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;
+ }
+ }
+
+}
diff --git a/catalog-ui/app/styles/layout/sidebar.less b/catalog-ui/app/styles/layout/sidebar.less
new file mode 100644
index 0000000000..9b8dc240c7
--- /dev/null
+++ b/catalog-ui/app/styles/layout/sidebar.less
@@ -0,0 +1,163 @@
+.w-sdc-left-sidebar {
+ width: 242px;
+ overflow: hidden;
+ background-color: @main_color_p;
+ .box-shadow(1px 0px 4px 0px rgba(24, 24, 25, 0.17));
+ position: absolute;
+ left: 0;
+ top: 0;
+ bottom: 0;
+ padding: 12px 18px;
+ z-index: 1;
+}
+
+.w-sdc-left-sidebar-menu {
+ margin: 0;
+ padding: 0;
+
+ ul {
+ margin: 0;
+ padding: 0;
+ }
+}
+
+/* Catalog */
+.i-sdc-left-sidebar-nav-item {
+ .c_6;
+ .hand;
+ .border-radius(4px);
+ width: 220px;
+ height: 60px;
+ line-height: 19px;
+ margin: 0 auto 10px;
+ padding: 20px 10px 20px 60px;
+ box-shadow: 0 0 2px 0 rgba(0, 0, 0, .3);
+ text-align: left;
+
+ &::before {
+ .sprite;
+ content: '';
+ position: absolute;
+ left: 50px;
+ top: 18px;
+ }
+
+ &.catalog {
+ .c_4;
+ .bg_a;
+ .uppercase;
+ position: relative;
+ text-indent: 20px;
+
+ &:hover { .bg_a_hover; }
+ &::before {.sprite.catalog;}
+ }
+
+ &.distribution {
+ .bg_o;
+ display: none;
+ position: relative;
+ }
+ &.distribution::before {
+ .sprite.distribution;
+ }
+
+ &.support {
+ .bg_a;
+ position: relative;
+ }
+
+ &.support::before {
+ .sprite.support;
+
+ }
+}
+
+
+/* */
+.i-sdc-left-sidebar-nav-item-hierachy {
+ .c_6;
+ .hand;
+ .border-radius(4px);
+ width: 220px;
+ height: 60px;
+ line-height: 19px;
+ margin: 0 auto 10px;
+ padding: 20px 10px 20px 60px;
+ box-shadow: 0 0 2px 0 rgba(0, 0, 0, .3);
+ text-align: left;
+
+ &::before {
+ .sprite;
+ content: '';
+ position: absolute;
+ left: 50px;
+ top: 18px;
+ }
+
+ &.catalog {
+ .c_4;
+ .bg_a;
+ .uppercase;
+ position: relative;
+ text-indent: 20px;
+
+ &:hover { .bg_a_hover; }
+ &::before {.sprite.catalog;}
+ }
+
+ &.distribution {
+ .bg_o;
+ display: none;
+ position: relative;
+ }
+ &.distribution::before {
+ .sprite.distribution;
+ }
+
+ &.support {
+ .bg_a;
+ position: relative;
+ }
+
+ &.support::before {
+ .sprite.support;
+
+ }
+}
+
+/* Dashboard (Non Catalog) */
+.i-sdc-left-sidebar-item {
+ list-style: none;
+ .m_14_r;
+ line-height: 24px;
+
+ &.category-title {
+ text-transform: uppercase;
+ .l_14_m;
+ line-height: 30px;
+ }
+
+ input[type="checkbox"] {
+ margin-right: 10px;
+ vertical-align: sub;
+ }
+
+ /*&.selectedLink {
+ .c_7;
+ }*/
+
+ .i-sdc-left-sidebar-item-state-count {
+ float: right;
+ }
+
+ .sdc-element-checkbox {
+ display: inline-flex;
+ }
+
+}
+
+.i-sdc-left-sidebar-item-seperator {
+ border-bottom: solid 1px @func_color_r;
+ width: 208px;
+}