diff -r 000000000000 -r bca7a7e058a3 src/pyams_skin/resources/less/menus.less --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/src/pyams_skin/resources/less/menus.less Thu Feb 13 11:43:31 2020 +0100 @@ -0,0 +1,843 @@ +/* + * Menus styles + */ + +@import "colors.less"; + +nav { + padding-top: 40px; + + ul { + width: 100%; + //padding: 40px 28px 25px 0; + padding: 0; + margin: 0; + font-size: 13px; + line-height: .5em; + list-style: none; + position: relative; + background-color: @navBgColor; + + li { + overflow: hidden; + + &.divider { + height: 20px; + border: 0; + + &:first-child, + &:last-child, + & + li.divider { + display: none; + } + } + &.header { + font-family: "Ubuntu-Light", Arial, Helvetica, sans-serif; + font-size: 14px; + font-weight: bold; + color: #eee; + background-color: @navHeaderBgColor; + padding: 4px 10px 4px 20px; + line-height: 18px; + + &:not(:first-child) { + margin-top: 10px; + } + .minified #left-panel & { + padding: 5px; + color: @navHeaderBgColor; + line-height: 0; + max-height: 10px; + overflow: hidden; + } + } + a { + line-height: normal; + font-size: 14px; + padding: 10px 10px 10px 11px; + color: @navLinkColor; + display: block; + font-weight: 400; + text-decoration: none!important; + position: relative; + } + a:active { + background: @navLinkActiveColor!important; + } + a:focus { + color: @navLinkFocusColor; + } + a:hover { + color: @navLinkHoverColor; + text-decoration: none; + } + &.active { + >a { + background-color: @navBgColor; + color: @navLinkHoverColor!important; + position: relative; + + &:before { + content: "\f0d9"; + font-family: FontAwesome; + display: block; + height: 27px; + line-height: 14px; + width: 27px; + position: absolute; + right: -21px; + font-size: 20px; + color: @navLinkPipeColor; + } + } + &.open >a { + &:before { + content: ""; + } + &.active:before { + content: "\f0d9"; + } + } + } + li { + border-bottom: 0; + position: relative; + } + } + .active >a { + color: @navActiveMenuLinkColor!important; + position: relative; + } + &.active { + li.active { + >a { + cursor: default; + + &.open { + cursor: pointer; + + &.active { + cursor: default; + background-color: @navSubMenuActiveLinkBgColor; + transition: background-color ease 2s; + } + } + } + } + } + b { + float: right; + font-size: 14px; + margin-top: -1px; + } + span.menu-item-parent { + display: inline-block; + margin: 0; + padding: 0; + } + ul { + margin: 0; + display: none; + background: @navSubMenuBgColor; + padding: 2px 0; + + >li:hover b { + color: @navSubMenuLinkHoverBoldColor; + } + li { + margin: 0; + padding: 0; + + &.divider { + height: 1px; + margin-left: 30px; + padding: 0; + } + >a { + padding-left: 42px; + font-size: 12px; + font-weight: 400; + outline: 0; + + &:hover { + background-color: @navSubMenuLinkHoverBgColor; + color: @navLinkHoverColor; + } + &.active { + margin-left: 30px; + padding-left: 12px; + background-color: @navSubMenuActiveLinkBgColor; + transition: background-color ease 2s; + + .minified & { + margin-left: 0; + } + } + } + } + ul { + background: 0 0; + padding: 0; + + li a { + color: @navSubSubMenuLinkColor; + padding: 8px 10px 8px 60px; + font-size: 11px; + + &:hover { + background-color: @navSubSubMenuLinkHoverBgColor; + color: @navLinkHoverColor; + } + &.active { + margin-left: 50px; + padding-left: 10px; + } + } + ul { + li a { + padding-left: 90px; + + &.active { + margin-left: 80px; + padding-left: 10px; + } + } + ul { + li a { + padding-left: 110px; + + &.active { + margin-left: 100px; + padding-left: 10px; + } + } + ul li a { + padding-left: 130px; + + &.active { + margin-left: 120px; + padding-left: 10px; + } + } + } + } + } + b { + color: @navSubSubMenuBoldColor; + } + } + } + + >ul { + >li { + &:hover >ul::before, + &:hover >ul >li::before { + border-color: @navSubMenuLinkHoverBorderColor!important; + } + &:not(.active) { + >a:hover { + background-color: @navLinkActiveColor; + } + } + &.active { + >a { + .minified & { + background-color: @navSubMenuActiveLinkBgColor; + transition: background-color ease 2s; + } + } + } + >a { + >.badge.pull-right { + margin-right: 15px; + + .minified & { + position: absolute; + margin-right: 0; + top: 0.4em; + right: 5px; + } + } + b { + position: absolute!important; + visibility: hidden; + right: 10px; + top: 10px; + } + >i { + margin-right: 5px; + width: 15px; + display: inline-block; + text-align: center; + position: relative; + + >em { + font-size: 9px; + display: block; + padding: 2px; + position: absolute; + top: -8px; + right: -6px; + text-decoration: none; + font-style: normal; + background-color: @navSubSubMenuLinkEmBgColor; + color: @navLinkHoverColor; + min-width: 13px; + border-radius: 50%; + max-height: 13px; + line-height: 8px; + font-weight: 700; + vertical-align: baseline; + white-space: nowrap; + text-align: center; + border: 1px solid @navSubSubMenuLinkEmBorderColor; + } + } + } + &:not(.open), + &.open:not(.active) { + >a { + &:hover b { + visibility: visible; + } + } + } + >ul::before { + content: ""; + display: block; + position: absolute; + z-index: 1; + left: 23px; + top: 0; + bottom: 13px; + border-left: 1px solid @navSubSubMenuLinkPipeColor; + } + >ul >li >a, + >ul >li >ul >li >a { + padding-top: 5px; + padding-bottom: 5px; + } + } + ul { + li { + a i { + font-size: 14px!important; + width: 18px!important; + text-align: center!important; + } + &::before { + content: ""; + display: block; + position: absolute; + width: 8px; + left: 23px; + top: 13px; + border-top: 1px solid @navSubSubMenuLinkPipeColor; + z-index: 1; + } + } + ul li::before { + content: ""; + display: block; + position: absolute; + width: 18px; + left: 10px; + top: 17px; + border-top: 1px solid transparent; + } + } + } +} + +.navbar-nav >li >a { + @media (min-width: 768px) { + padding-top: 17px; + padding-bottom: 15px; + } +} + +.ui-menu { + display: block; + width: 155px; + padding: 2px; + -webkit-box-shadow: 0 2px 4px rgba(30, 30, 100, .25); + box-shadow: 0 2px 4px rgba(30, 30, 100, .25); + background: #fff; + border: 1px solid rgba(0, 0, 0, .2); + z-index: 1; + list-style: none; + margin: 0; + margin-bottom: 2em; + outline: 0; + + .ui-menu { + margin-top: -3px; + position: absolute; + list-style: none; + } + .ui-menu-item { + margin: 0; + padding: 0; + width: 100%; + list-style: none; + list-style-image: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7); + + a { + text-decoration: none; + display: block; + padding: 2px .4em; + line-height: 1.5; + min-height: 0; + font-weight: 400; + + &.ui-corner-all { + border-radius: 0; + } + &.ui-state-active, + &.ui-state-focus, + &.ui-widget-content { + font-weight: 700; + margin: 0; + background-color: #428BCA; + border-color: #357EBD; + color: #FFF; + display: block; + white-space: nowrap; + } + &.ui-state-active { + padding: 1px .4em; + } + .ui-menu-icon { + width: auto; + height: auto; + top: 0; + left: auto; + right: auto; + bottom: auto; + text-indent: 0; + } + } + } + .ui-menu-divider { + margin: 5px -2px 5px -2px; + height: 0; + font-size: 0; + line-height: 0; + border-width: 1px 0 0; + } + .ui-state-disabled { + margin: .4em 0 .2em!important; + background: none!important; + color: #999!important; + font-weight: 400!important; + cursor: default; + line-height: 1.5; + + a { + cursor: default; + } + } + .ui-menu-icons { + position: relative; + + .ui-menu-item a { + position: relative; + padding-left: 2em; + } + } + .ui-icon { + position: absolute; + top: .2em; + left: .2em; + } + .ui-menu-icon { + position: static; + float: right; + } +} + +.dropdown { + &-menu { + max-height: ~"calc(100vh - 200px)"; + overflow-y: auto; + + >li { + >a:hover { + background-color: #e0e0e0; + } + li { + a { + display: block; + padding: 0; + clear: both; + font-weight: normal; + line-height: 1.42857143; + color: #333; + white-space: nowrap; + } + } + } + .open >& { + -webkit-animation-name: flipInX; + animation-name: flipInX; + -webkit-animation-duration: .4s; + animation-duration: .4s; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + } + .small { + &.divider { + margin: 3px 0; + } + } + } + &-menu-xs { + min-width: 37px; + + >li >a { + padding: 3px 10px; + + &:hover i { + color: #fff!important; + } + } + } + &-submenu { + position: relative; + + >.dropdown-menu { + top: 0; + left: 100%; + margin-top: -6px; + margin-left: -1px; + } + &:hover >.dropdown-menu { + display: block; + } + >a:after { + display: block; + content: " "; + float: right; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; + border-width: 5px 0 5px 5px; + border-left-color: #bfbfbf; + margin-top: 5px; + margin-right: -10px; + } + &:hover >a:after { + border-left-color: #fff; + } + &.pull-left { + float: none; + + >.dropdown-menu { + left: -100%; + margin-left: 10px; + } + } + } +} + +#user-activity .ajax-dropdown { + position: absolute; + display: none; + z-index: 1003; + top: 48px; + left: 16px; + width: 344px; + height: 452px; + border-radius: 0; + -webkit-box-shadow: 0 2px 4px rgba(30, 30, 100, .25); + box-shadow: 0 2px 4px rgba(30, 30, 100, .25); + padding: 10px; + background: #fff; + border: 1px solid #b3b3b3; + + @media only screen and (min-width:320px) and (max-width:479px) { + width: 299px; + height: 337px; + left: 0; + top: 49px; + } + &:after, + &:before { + bottom: 100%; + border: solid transparent; + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + } + &:before { + border-color: rgba(131, 131, 131, 0); + border-bottom-color: #838383; + border-width: 8px; + right: 8px; + margin-left: -8px; + + @media only screen and (min-width:320px) and (max-width:479px) { + margin-left: -14px; + right: 13px; + } + } + &:after { + border-color: rgba(255, 255, 255, 0); + border-bottom-color: #fff; + border-width: 7px; + right: 9px; + margin-left: -7px; + + @media only screen and (min-width:320px) and (max-width:479px) { + margin-left: -13px; + right: 14px; + } + } + >:last-child { + font-size: 13px; + display: block; + padding: 5px 0; + line-height: 20px; + font-weight: 400; + } + >:first-child { + margin: 0 0 3px; + padding: 0 0 9px; + } + .fa-4x.fa-border { + border-width: 3px; + border-radius: 50%; + display: block; + margin: 0 auto; + width: 80px; + text-align: center; + color: #D1D1D1; + border-color: #D1D1D1; + } + .btn-group .btn { + font-weight: 700; + text-transform: capitalize; + } + .btn-group >:nth-child(2) { + border-right-width: 0; + border-left-width: 0; + } + .btn-group .btn:active { + top: 0; + left: 0; + } + .active + & { + -webkit-animation-name: flipInY; + animation-name: flipInY; + -webkit-animation-duration: .7s; + animation-duration: .7s; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + } +} + +.dropdown-large { + position: static!important; +} +.dropdown-menu-large { + margin-left: 16px; + margin-right: 16px; + padding: 20px 0; + + >li >ul { + padding: 0; + margin: 0; + + >li { + list-style: none; + + >a { + display: block; + padding: 3px 20px; + clear: both; + font-weight: 400; + line-height: 1.428571429; + color: #333; + white-space: normal; + } + } + } + >li ul >li >a:focus, + >li ul >li >a:hover { + text-decoration: none; + color: #262626; + background-color: #f5f5f5; + } + .disabled >a, + .disabled >a:focus, + .disabled >a:hover { + color: #999; + } + .disabled >a:focus, + .disabled >a:hover { + text-decoration: none; + background-color: transparent; + background-image: none; + filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); + cursor: not-allowed; + } + .dropdown-header { + color: #428bca; + font-size: 18px; + } + + @media (max-width:768px) { + margin-left: 0; + margin-right: 0; + + >li { + margin-bottom: 30px; + + &:last-child { + margin-bottom: 0; + } + } + .dropdown-header { + padding: 3px 15px!important; + } + } +} + + +.wijmo-wijmenu { + padding: 0 20px; + background-color: #222; + background-repeat: repeat-x; + background-image: -webkit-linear-gradient(top, #333, #222); + background-image: -webkit-gradient(linear, top left, bottom left, from(#333), to(#222)); + background-image: -webkit-linear-gradient(top, #333, #222); + background-image: linear-gradient(top, #333, #222); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#333333', endColorstr='#222222', GradientType=0); + -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .25), inset 0 -1px 0 rgba(0, 0, 0, .1); + box-shadow: 0 1px 3px rgba(0, 0, 0, .25), inset 0 -1px 0 rgba(0, 0, 0, .1); + + .ui-state-default .wijmo-wijmenu-text { + color: #bfbfbf; + } + .ui-state-hover { + background: #444; + background: rgba(255, 255, 255, .05); + + .wijmo-wijmenu-text { + color: #fff; + } + } + .ui-widget-header h3 { + position: relative; + margin-top: 1px; + padding: 0; + } + h3 a { + color: #fff; + display: block; + float: left; + font-size: 20px; + font-weight: 200; + line-height: 1; + margin-left: -20px; + margin-top: 1px; + padding: 8px 20px 12px; + + &:hover { + background-color: rgba(255, 255, 255, .05); + color: #fff; + text-decoration: none; + } + } + .ui-widget-header { + border: 0; + } + .wijmo-wijmenu-parent .wijmo-wijmenu-child { + padding: .3em 0; + } + .wijmo-wijmenu-item { + margin: 0; + border: 0; + + .wijmo-wijmenu-child { + background: #333; + border: 0; + margin: 0; + padding: 6px 0; + width: 160px; + border-radius: 0 0 6px 6px; + -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, .2); + box-shadow: 0 2px 4px rgba(0, 0, 0, .2); + } + } + a.wijmo-wijmenu-link { + margin: 0; + line-height: 19px; + padding: 10px 10px 11px; + border: 0; + border-radius: 0; + } + .wijmo-wijmenu-child .wijmo-wijmenu-link { + display: block; + float: none; + padding: 4px 15px; + width: auto; + } + .wijmo-wijmenu-child .wijmo-wijmenu-text { + float: none; + } + .wijmo-wijmenu-item { + .wijmo-wijmenu-child .ui-state-hover { + background: #191919; + } + .wijmo-wijmenu-separator { + padding: 5px 0; + background-image: none; + background-color: #222; + border-top: 1px solid #444; + border-bottom: 0; + border-left: 0; + border-right: 0; + } + input { + -moz-transition: none 0s ease 0s; + background-color: rgba(255, 255, 255, .3); + border: 1px solid #111; + border-radius: 4px; + -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .1) inset, 0 1px 0 rgba(255, 255, 255, .25); + box-shadow: 0 1px 2px rgba(0, 0, 0, .1) inset, 0 1px 0 rgba(255, 255, 255, .25); + color: rgba(255, 255, 255, .75); + font-family: Ubuntu, Helvetica, Arial, sans-serif; + line-height: 1; + margin: 5px 10px 0; + padding: 4px 9px; + width: 100px; + + &:hover { + background-color: rgba(255, 255, 255, .5); + color: #fff; + } + &:focus { + background-color: #fff; + border: 0 none; + -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, .15); + box-shadow: 0 0 3px rgba(0, 0, 0, .15); + color: #404040; + outline: 0 none; + padding: 5px 10px; + text-shadow: 0 1px 0 #fff; + } + } + } + .ui-state-default { + text-shadow: none; + -webkit-box-shadow: none; + box-shadow: none; + color: #bfbfbf; + -webkit-filter: none; + filter: none; + } +}