| // |
| // Notifications Drawer |
| // -------------------------------------------------- |
| |
| |
| .drawer-pf { |
| background-color: @color-pf-black-100; |
| border: 1px solid @card-pf-border-color; |
| .box-shadow(0 6px 12px fade(@color-pf-black, 17.5%)); |
| overflow-y: auto; |
| position: absolute; |
| right: 0; |
| width: 320px; |
| z-index: 2; |
| .panel { |
| border-bottom: none; |
| border-left: none; |
| border-right: none; |
| } |
| .panel-group .panel-heading + .panel-collapse .panel-body { |
| border-top: none; |
| border-bottom: 1px solid @card-pf-border-color; |
| padding: 0; |
| } |
| .panel-counter { |
| display: block; |
| font-style: italic; |
| line-height: 1.2; |
| padding-left: 18px; |
| padding-top: 5px; |
| } |
| .panel-heading { border-bottom: 1px solid @card-pf-border-color; } |
| .panel-group { |
| bottom: 0; |
| margin-bottom: 0; |
| position: absolute; |
| top: 25px; // Height of Notifications Drawer box. |
| width: 100%; |
| } |
| .panel-title a { |
| cursor: pointer; |
| display: block; |
| } |
| &.drawer-pf-expanded { |
| left: 270px; |
| width: inherit; |
| .drawer-pf-toggle-expand:before { |
| content: "\f101"; |
| } |
| } |
| } |
| .drawer-pf-toggle-expand { |
| color: inherit; |
| cursor: pointer; |
| left: 0; |
| padding: 2px 5px; |
| position: absolute; |
| &:before { |
| content: "\f100"; |
| font-family: "FontAwesome"; |
| } |
| &:hover, |
| &:focus { |
| color: inherit; |
| text-decoration: none; |
| } |
| } |
| |
| .drawer-pf-action { |
| .btn-link { |
| color: @link-color; |
| padding: 10px 0; |
| |
| &:hover { color: @link-hover-color; } |
| } |
| } |
| |
| .drawer-pf-loading { |
| color: @gray-pf; |
| font-size: (@font-size-base + 2); |
| padding: 20px 15px; |
| } |
| |
| .drawer-pf-notification { |
| border-bottom: 1px solid @card-pf-border-color; |
| padding: 15px; |
| .date { |
| border-right: 1px solid #aaa; |
| display: inline-block; |
| line-height: 1; |
| margin-right: 5px; |
| padding-right: 9px; |
| } |
| .pficon { |
| font-size: @font-size-large; |
| margin-top: 3px; |
| } |
| &:last-of-type { |
| border-bottom: none; |
| } |
| &:hover { background-color: @color-pf-blue-50; } |
| &.unread .drawer-pf-notification-message { font-weight: bold; } |
| &.expanded-notification { |
| .date { |
| border-right: none; |
| padding-right: 0; |
| } |
| } |
| } |
| |
| .drawer-pf-notification-info, |
| .drawer-pf-notification-message { |
| display: block; |
| padding-left: 27px; |
| padding-right: 19px; |
| .expanded-notification & { |
| display: inline-block; |
| } |
| } |
| |
| .drawer-pf-notifications-non-clickable .drawer-pf-notification:hover { |
| background-color: @color-pf-white; |
| } |
| |
| .drawer-pf-title { |
| background-color: @color-pf-black-100; |
| border-bottom: 1px solid @card-pf-border-color; |
| position: absolute; |
| width: 318px; |
| h3 { |
| font-size: @font-size-base; |
| margin: 0; |
| padding: 6px 15px; |
| } |
| } |
| |
| /* Exclusive styles to work with Vertical Navigation */ |
| .navbar-pf-vertical { |
| .drawer-pf { |
| height: calc(~"100vh - 80px");//to create a 20px offset bottom |
| top: 58px; //menu height; |
| } |
| .nav .drawer-pf-trigger { |
| .drawer-pf-trigger-icon { |
| border-left: 1px solid @navbar-pf-navbar-utility-border-color; |
| border-right: 1px solid @navbar-pf-navbar-utility-border-color; |
| padding-left: 15px; |
| padding-right: 15px; |
| } |
| &.open .drawer-pf-trigger-icon { |
| background-color: @navbar-pf-navbar-utility-hover-bg-color; |
| } |
| } |
| } |
| |
| /* Exclusive styles to work with Horizontal Navigation */ |
| .navbar-pf { |
| .drawer-pf { |
| height: calc(~"100vh - 46px"); |
| top: 26px; |
| } |
| .drawer-pf-trigger-icon { cursor: pointer; } |
| } |