From 451a3400b76511393c62a444f588a4ed15f4a549 Mon Sep 17 00:00:00 2001 From: Michael Lando Date: Sun, 19 Feb 2017 10:28:42 +0200 Subject: Initial OpenECOMP SDC commit Change-Id: I0924d5a6ae9cdc161ae17c68d3689a30d10f407b Signed-off-by: Michael Lando --- catalog-ui/app/styles/layout/header.less | 78 ++++++++++++++ catalog-ui/app/styles/layout/main.less | 124 +++++++++++++++++++++++ catalog-ui/app/styles/layout/sidebar.less | 163 ++++++++++++++++++++++++++++++ 3 files changed, 365 insertions(+) create mode 100644 catalog-ui/app/styles/layout/header.less create mode 100644 catalog-ui/app/styles/layout/main.less create mode 100644 catalog-ui/app/styles/layout/sidebar.less (limited to 'catalog-ui/app/styles/layout') 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; +} -- cgit 1.2.3-korg