diff options
Diffstat (limited to 'ui/client/css')
| -rw-r--r-- | ui/client/css/accordionNavMenu.styl | 259 | ||||
| -rw-r--r-- | ui/client/css/components.styl | 187 | ||||
| -rw-r--r-- | ui/client/css/d3graph.styl | 47 | ||||
| -rw-r--r-- | ui/client/css/flex.styl | 23 | ||||
| -rw-r--r-- | ui/client/css/header.styl | 118 | ||||
| -rw-r--r-- | ui/client/css/landing.css | 122 | ||||
| -rw-r--r-- | ui/client/css/loading.styl | 19 | ||||
| -rw-r--r-- | ui/client/css/modals.styl | 10 | ||||
| -rw-r--r-- | ui/client/css/plugins.styl | 4 | ||||
| -rw-r--r-- | ui/client/css/wizard.css | 28 |
10 files changed, 817 insertions, 0 deletions
diff --git a/ui/client/css/accordionNavMenu.styl b/ui/client/css/accordionNavMenu.styl new file mode 100644 index 0000000..b5ba1d5 --- /dev/null +++ b/ui/client/css/accordionNavMenu.styl @@ -0,0 +1,259 @@ +// for WIKI + +.os-accordion-nav-menu + .sm-menu-items-list + >.os-accordion-tree-node + >a + display none + +.left-nav-content-wiki { + width: 300px; + height: 100vh + background brand-blue + top 90px + position fixed +} + + +.left-nav-menu + float: left; + min-width: 100px; + outline: 0; + position: relative; + //margin-top -40px + shadow-level(1) + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; + outline: 0; + .menu-footer, .menu-header + background: brand-blue; + color: #f0f0f0; + float: left; + font-weight: normal; + line-height: 50px; + font-size: 0.8em; + width: 100%; + border-bottom 1px solid black + .menu-footer + text-align: center; + .menu-header + height: 39px; + p + font-size 1.7em + padding 6px + margin 0px + + + i + cursor pointer + position absolute + top -5px + right 0 + display block + color white + padding-right 5px + trans() + &:hover + color spark-blue + opacity 0.8 + + ul + list-style: none; + margin: 0; + padding: 0; + li + display: block; + float: left; + position: relative; + width: 100%; + .menu-label + background: #f0f0f0; + border-radius: 100%; + color: #555555; + font-size: 11px; + font-weight: 800; + line-height: 18px; + min-width: 20px; + padding: 1px 2px 1px 1px; + position: absolute; + right: 18px; + text-align: center; + top: 14px; + a + background: brand-blue; + color: #f0f0f0; + float: left; + font-size: 13px; + overflow: hidden; + padding: 14px 22px; + position: relative; + text-decoration: none; + white-space: nowrap; + width: 100%; + trans() + &:hover + background: @background - 20%; + i + float: left; + font-size: 16px; + line-height: 18px; + text-align: left; + width: 34px; + +.left-nav-menu ul li .menu-label { + background: #f0f0f0; + border-radius: 100%; + color: #555555; + font-size: 11px; + font-weight: 800; + line-height: 18px; + min-width: 20px; + padding: 1px 2px 1px 1px; + position: absolute; + right: 18px; + text-align: center; + top: 14px; +} + +.left-nav-menu + ul + .submenu + display: none; + position: static; + width: 100%; + .submenu-indicator + line-height: 16px + li + clear: both; + width: 100%; + ul.submenu + display: none; + position: static; + width: 100%; + overflow: hidden; + a + background: brand-blue - 10% + border-left: solid 6px transparent; + border-top: none; + float: left; + font-size: 11px; + position: relative; + width: 100%; + &:hover + background @background - 20% + + +.left-nav-menu ul .submenu li .menu-label { + background: #f0f0f0; + border-radius: 100%; + color: #555555; + font-size: 11px; + font-weight: 800; + line-height: 18px; + min-width: 20px; + padding: 1px 2px 1px 1px; + position: absolute; + right: 18px; + text-align: center; + top: 12px; + top: 14px; +} + +.left-nav-menu ul .submenu li a + padding-left 40px + background brand-blue - 20% + +.left-nav-menu ul .submenu > li > ul.submenu > li > a + padding-left: 40px + background brand-blue - 30% + +.left-nav-menu ul .submenu > li > ul.submenu > li > ul.submenu > li > a + padding-left: 40px; + background brand-blue - 40% +.left-nav-menu ul .submenu > li > ul.submenu > li > ul.submenu > li > ul.submenu > li > a + padding-left: 50px; + background brand-blue - 50% +.left-nav-menu ul .submenu > li > ul.submenu > li > ul.submenu > li > ul.submenu > li > ul.submenu > li > a + padding-left: 60px; + background brand-blue - 60% +.left-nav-menu ul .submenu > li > ul.submenu > li > ul.submenu > li > ul.submenu > li > ul.submenu > li > ul.submenu > li > a + padding-left: 70px; + background brand-blue - 70% +.left-nav-menu ul .submenu > li > ul.submenu > li > ul.submenu > li > ul.submenu > li > ul.submenu > li > ul.submenu > li > ul.submenu > li > ul.submenu > li > a + padding-left: 80px; + background brand-blue - 80% + +.left-nav-menu .sm-open-close-indicator + float: right; + + i.fa + font-size: 10px; + width: 10px; + +.left-nav-menu .submenu-indicator { + -moz-transition: "transform .3s linear"; + -o-transition: "transform .3s linear"; + -webkit-transition: "transform .3s linear"; + transition: "transform .3s linear"; + float: right; + font-size: 20px; + line-height: 19px; + position: absolute; + right: 22px; +} + +.left-nav-menu .submenu-indicator-minus > .submenu-indicator { + -moz-transform: rotate(45deg); + -ms-transform: rotate(45deg); + -o-transform: rotate(45deg); + -webkit-transform: rotate(45deg); + transform: rotate(45deg); +} + +.left-nav-menu > ul > li.active > a { + background: #3b424d; + color: #ffffff; +} + + +.left-nav-menu > ul > li > a { border-bottom: solid 1px #3b424d; } + +.ink { + -moz-transform: scale(0); + -ms-transform: scale(0); + -o-transform: scale(0); + -webkit-transform: scale(0); + background: rgba(255, 255, 255, 0.3); + border-radius: 100%; + display: block; + position: absolute; + transform: scale(0); +} + +.animate-ink { + -moz-animation: ripple .3s linear; + -ms-animation: ripple .3s linear; + -o-animation: ripple .3s linear; + -webkit-animation: ripple .3s linear; + animation: ripple .3s linear; +} + +// @-moz-keyframes 'ripple' { +// 100% { +// opacity: 0; +// transform: scale(2.5); +// } +// } +// @-webkit-keyframes 'ripple' { +// 100% { +// opacity: 0; +// transform: scale(2.5); +// } +// } +// @keyframes 'ripple' { +// 100% { +// opacity: 0; +// transform: scale(2.5); +// } +// } diff --git a/ui/client/css/components.styl b/ui/client/css/components.styl new file mode 100644 index 0000000..a4b2f04 --- /dev/null +++ b/ui/client/css/components.styl @@ -0,0 +1,187 @@ +.main-layout + margin 30px 30px 30px 330px + +.main-layout-no-nav + margin 0px + +.site-sidenav + width: 300px; + min-width: 300px; + max-width: 300px; + //height: 100vh + height: initial; + align-self: stretch; + min-height: 95vh; + background brand-blue + trans() + +.site-sidenav-collapse + width: 30px + min-width: 30px + max-width: 30px + min-height 100vh + background brand-blue + color white + margin-top -40px + trans() + +.cards + color #FFF + padding 20px + margin-bottom 30px + .material-icons + padding-top 20px + shadow-level(1) + trans() + &:hover + shadow-level(2) + &.not-active + shadow-level (0) + &.blue + background-color spark-blue + &.green + background-color status-green + &.grey + background-color dk-gray1 + &.light-grey + background-color light-grey + &.dk-blue + background-color dk-blue + &.orange + background-color status-orange + &.red + background-color status-red + &.white + background #FFF + color #000 + &.blue-text + color spark-blue + &.green-text + .fa, .material-icons + color status-green + h5 + border-bottom 3px solid status-green + p.active + padding-top 3px + font-size 1.2em + color status-green + &.orange-text + .fa, .material-icons + color status-orange + h5 + border-bottom 3px solid status-orange + p.active + padding-top 3px + font-size 1.2em + color status-orange + &.red-text + .fa, .material-icons + color status-red + h5 + border-bottom 3px solid status-red + p.active + padding-top 3px + font-size 1.2em + color status-red + h3 + color spark-blue + font-size 2em + border-bottom 3px solid spark-blue + p.text + color #000 + .fa, .material-icons + font-size 4em + &.title + h4 + margin 0 + text-align center + color spark-blue + +.cards-w250 + @extend .cards + padding 20px 5px + max-height 100px + width: 250px + max-width: 250px + min-width: 250px + text-align center + .fa, .material-icons + font-size 3em + p + margin 0 + span + font-size 1.3em + font-weight bold + +.cards-w300 + @extend .cards + max-height 100px + width: 300px + max-width: 300px + min-width: 300px; + p + font-size 1.1em + span + font-size 1.3em + font-weight bold + +.cards-w300-h60 + @extend .cards-w300 + font-size 0.9em + height 60px + .fa, .material-icons + font-size 2em + &:hover + shadow-level(1) + +.cards-flex-col-h120 + @extend .cards + height: 120px + max-height 120px + min-height 120px + h5 + padding 0px + margin 0px + a + color spark-blue + p + font-size 1em + padding 0px + margin 0px + span + font-size 1.3em + font-weight bold + +.cards-450 + @extend .cards + width: 520px + max-width: 520px + min-width: 520px + p + font-size 1.1em + span + font-size 1.3em + font-weight bold + .material-icons + color spark-blue + font-size 5em + padding 40px 30px + +.cards-flex-col-h500 + @extend .cards + margin-right 30px + height 500px + max-height 500px + min-height 500px + p + font-size 1.1em + span + font-size 1.3em + font-weight bold + .material-icons + color spark-blue + font-size 8em + padding 40px + +.margin-top-40 + margin-top 40px diff --git a/ui/client/css/d3graph.styl b/ui/client/css/d3graph.styl new file mode 100644 index 0000000..6d53c45 --- /dev/null +++ b/ui/client/css/d3graph.styl @@ -0,0 +1,47 @@ + +.node circle { + fill: steelblue; +} +.node text { + font: bold 14px sans-serif; + fill: rgb(16, 15, 15); + text-shadow: 0 0px 0 #fff; + /*font-size: 0.8em;*/ +} +.link { + /* + fill: #1313AB; + stroke: #1313AB; + */ +} +.different-groups{ + stroke: #999; +} +.default { + stroke: #fbb; + stroke-width: 4px; +} +.outline { + stroke: #844; + stroke-width: 6px; +} + +div.tooltip { + position: absolute; + text-align: left; + opacity 1 + font: bold 18px sans-serif !important; + /* width: 60px; */ + /* height: 28px; */ + padding: 20px; + font: 16px sans-serif; + background: dk-gray1; + color white + border: 2px solid stark-blue + pointer-events: none; +} +.background { + stroke: white; + stroke-width: 1px; + fill: white; +} diff --git a/ui/client/css/flex.styl b/ui/client/css/flex.styl new file mode 100644 index 0000000..e780d78 --- /dev/null +++ b/ui/client/css/flex.styl @@ -0,0 +1,23 @@ +// flex grid system +.flex-box + list-style none + display flex + flex-wrap wrap + // border 2px solid red + .flex-box-1 + flex 1 + // border 2px solid green + .flex-box-2 + flex 2 + .flex-box-3 + flex 3 + .flex-box-4 + flex 4 +.flex-col + flex-direction column +.justify-content-around + justify-content space-around +.justify-content-between + justify-content space-between +.justify-content-start + justify-content flex-start
\ No newline at end of file diff --git a/ui/client/css/header.styl b/ui/client/css/header.styl new file mode 100644 index 0000000..ebc3ff6 --- /dev/null +++ b/ui/client/css/header.styl @@ -0,0 +1,118 @@ +.os-alarm-icons + display: flex; + flex-flow: row; + justify-content: flex-end; + + padding-top 50px + //background-color dk-gray1 + background-color: brand-blue + border-bottom: solid 1px black; + + .breadcrumb + background-color dk-gray1 + + .alarm-icons + padding-top 15px + padding-right 10px + color #FFF + //text-align right + + .material-icons:hover + cursor pointer + color spark-grey + trans() + + .dropdown + display inline + trans() + + .dropdown-menu-right + right 25px + + .dropdown-header + font-size 1.4em + color dk-gray1 + + >a + font-size: 20px; + color dk-gray1 + line-height: 1.42857143; + padding-left: 4px; + +img.navbar-brand.navbar-custom { + padding-left: 40px; +} + +p.navbar-brand.navbar-custom{ + margin: 0px; + padding-left: 95px; + color: #FFF; +} + +nav.navbar-inverse.navbar-custom + background-color: brand-blue + color: #FFF; + a + color: #FFF; + .login-close-text + color: #555; + #login-name-link:hover + color: rgb(63,81,181); + &:hover + color: rgb(63,81,181); + trans() + a.droplist + color: brand-blue + padding: 10px 0px 0px 10px + + .search + position: relative; + color: white + input + height: 30px; + background: brand-blue + // text-indent: 25px; + padding-left: 20px; + border 0px + border-bottom 2px solid spark-grey + width 175px + &:hover, &:active, &:focus + border-bottom 2px solid white + ::-webkit-input-placeholder + color: white + .fa-search + position: absolute; + top: 7px; + + .search-auto-complete + position: absolute; + right: 0; + top: 34px + z-index: 1000; + +.navbar-inverse .navbar-nav > .open > a, +.navbar-inverse .navbar-nav > .open > a:hover, +.navbar-inverse .navbar-nav > .open > a:focus { + color: brand-blue + background-color: #fff; +} + +/* Login form style */ +.sign-in #login-sign-in-link, #login-name-link, #login-name-link.login-link-text { + color: #FFF; + text-decoration: none; +} + +.login-button#login-buttons-open-change-password, +.login-button#login-buttons-password, +.login-button#login-buttons-logout { + background-color: brand-blue + border: brand-blue +} + +.login-button#login-buttons-open-change-password:hover, +.login-button#login-buttons-password:hover, +.login-button#login-buttons-logout:hover { + background-color: rgb(63,81,181); + border: rgb(63,81,181); +} diff --git a/ui/client/css/landing.css b/ui/client/css/landing.css new file mode 100644 index 0000000..59c0806 --- /dev/null +++ b/ui/client/css/landing.css @@ -0,0 +1,122 @@ +/****************************************************************************************/ +/* Copyright (c) 2017 Koren Lev (Cisco Systems), Yaron Yogev (Cisco Systems) and others */ +/* */ +/* All rights reserved. This program and the accompanying materials */ +/* are made available under the terms of the Apache License, Version 2.0 */ +/* which accompanies this distribution, and is available at */ +/* http://www.apache.org/licenses/LICENSE-2.0 */ +/****************************************************************************************/ +/* ======= landging page =======*/ + +a.mdl-button:hover{ + text-decoration: none; +} + +.mdl-button--raised.mdl-button--colored { + background-color: #2196F3; +} + +.mdl-button--accent.mdl-button--accent.mdl-button--raised:hover { + background-color: rgb(63,81,181); + +} + +section.section-margin-50 { + margin: 50px 0; +} + +.background-blue{ + background-color: #2196F3; + color: #f9f9f9; +} +.background-white { + border-color: #FFF; +} + +.background-grey { + background-color: #f9f9f9; +} + +.home-fullscreen { + /* padding: 25px; */ +} + +.mtop-50{ + margin-top: 100px; +} + +.font20{ + font-size: 20px; +} + +.title-border-bottom{ + border-bottom: 5px solid #2196F3; +} +.text-align-center{ + text-align: center; +} + +/* +.home_mockups { + position: relative; + margin-top: 4rem; + margin-bottom: -1rem; + z-index: 3; +} + +.home_mockups_1 { + position: relative; + animation-delay: 0.5s; +} + +.home_mockups_2 { + animation-delay: 1s; +} + +.home_mockups_2, .home_mockups_3 { + position: absolute; + margin: 0 auto; + top: 0; + right: 0; + left: 0; + bottom: 0; +} +*/ + +.box { + margin: 50px; +} + +.box-side{ + margin: 10px 50px; +} +/* ======= End of section =========*/ + +/*====== Main page =======*/ +.logo{ + padding: 10px; +} + +.view-100{ + height: 100vh; +} + +.user-bar{ + background: #42A5F5; + color: #fff; + padding-left: 15px; +} +/* ======= End of section =======*/ + +/*// Rules for sizing the icon.*/ +.material-icons.md-18 { font-size: 21px; } +.material-icons.md-24 { font-size: 24px; } +.material-icons.md-36 { font-size: 36px; } +.material-icons.md-48 { font-size: 48px; } +/*// Rules for using icons as black on a light background.*/ +.material-icons.md-dark { color: rgba(0, 0, 0, 0.54); } +.material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); } +/*// Rules for using icons as white on a dark background.*/ +.material-icons.md-light { color: rgba(255, 255, 255, 1); } +.material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); } +/* ======= End of section ===========*/ diff --git a/ui/client/css/loading.styl b/ui/client/css/loading.styl new file mode 100644 index 0000000..1545b58 --- /dev/null +++ b/ui/client/css/loading.styl @@ -0,0 +1,19 @@ + + +.loading-message { + color: white; + font-size: 2.5em; + font-weight: 300; + font-family: sans-serif; +} + +.sk-spinner-rotating-plane.sk-spinner { + background-color: white; +} + +.landing + .material-icons + font-size 64px + +.margin-50 + margin 80px 0px
\ No newline at end of file diff --git a/ui/client/css/modals.styl b/ui/client/css/modals.styl new file mode 100644 index 0000000..f0d4741 --- /dev/null +++ b/ui/client/css/modals.styl @@ -0,0 +1,10 @@ +.modal-header + .material-icons + color spark-blue + +.modal-body + a + color spark-blue + h5 + color spark-blue + border-bottom 2px solid spark-blue diff --git a/ui/client/css/plugins.styl b/ui/client/css/plugins.styl new file mode 100644 index 0000000..cd602ba --- /dev/null +++ b/ui/client/css/plugins.styl @@ -0,0 +1,4 @@ +.graph + width: 100%; + height: 400px; + border: 3px solid spark-blue;
\ No newline at end of file diff --git a/ui/client/css/wizard.css b/ui/client/css/wizard.css new file mode 100644 index 0000000..ebac04f --- /dev/null +++ b/ui/client/css/wizard.css @@ -0,0 +1,28 @@ +/****************************************************************************************/ +/* Copyright (c) 2017 Koren Lev (Cisco Systems), Yaron Yogev (Cisco Systems) and others */ +/* */ +/* All rights reserved. This program and the accompanying materials */ +/* are made available under the terms of the Apache License, Version 2.0 */ +/* which accompanies this distribution, and is available at */ +/* http://www.apache.org/licenses/LICENSE-2.0 */ +/****************************************************************************************/ +.btn-mgt-5 { + margin-top: 5px; +} + +.nav > li > a { + color: #2196F3; +} + +.form-horizontal { + margin-top: 25px; +} + +.mdl-button { + color: #2196F3; +} + +.mdl-button:hover { + background-color: rgb(63,81,181); + color: #FFF; +} |