aboutsummaryrefslogtreecommitdiffstats
path: root/ui/client/css/accordionNavMenu.styl
diff options
context:
space:
mode:
authorKoren Lev <korenlev@gmail.com>2017-07-27 16:42:15 +0300
committerKoren Lev <korenlev@gmail.com>2017-07-27 16:42:15 +0300
commitb88c78e3cf2bef22aa2f1c4d0bf305e303bc15f0 (patch)
treeffa30a6e1511d72562d8772b8700cda52b2752a1 /ui/client/css/accordionNavMenu.styl
parentb70483739d1f6f4f0d31987ed2e4d1e30d71d579 (diff)
adding calipso ui
Change-Id: Ifa6f63daebb07f45580f747341960e898fdb00c4 Signed-off-by: Koren Lev <korenlev@gmail.com>
Diffstat (limited to 'ui/client/css/accordionNavMenu.styl')
-rw-r--r--ui/client/css/accordionNavMenu.styl259
1 files changed, 259 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);
+// }
+// }