Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@brightspace-ui-labs/navigation
Advanced tools
@brightspace-ui-labs/navigation - npm Package Compare versions
Comparing version 5.8.0 to 5.9.0
| import '@brightspace-ui/core/components/colors/colors.js'; | ||
| import { PolymerElement, html } from '@polymer/polymer/polymer-element.js'; | ||
| import { navigationSharedStyle } from './d2l-navigation-shared-styles.js'; | ||
| import { css, html, LitElement } from 'lit'; | ||
| import { centererStyles, guttersStyles } from './d2l-navigation-styles.js'; | ||
| /** | ||
| `d2l-navigation-band` | ||
| Polymer-based web component for a solid colour band that runs along the top of the navigational header | ||
| function useCustomScroll() { | ||
| const userAgent = navigator.userAgent.toLowerCase(); | ||
| return (userAgent.indexOf('win') > -1 && userAgent.indexOf('mobile') === -1); | ||
| } | ||
| @demo demo/navigation-band.html | ||
| */ | ||
| class D2LNavigationBand extends PolymerElement { | ||
| class NavigationBand extends LitElement { | ||
| static get properties() { | ||
| return { | ||
| customScroll: { | ||
| type: Boolean, | ||
| readOnly: true, | ||
| value: function() { | ||
| const userAgent = navigator.userAgent.toLowerCase(); | ||
| return (userAgent.indexOf('win') > -1 && userAgent.indexOf('mobile') === -1); | ||
| } | ||
| } | ||
| }; | ||
| } | ||
| static get template() { | ||
| const template = html` | ||
| ${navigationSharedStyle} | ||
| <style> | ||
| static get styles() { | ||
| return [centererStyles, guttersStyles, css` | ||
| :host { | ||
@@ -35,2 +20,5 @@ background: linear-gradient(180deg, var(--d2l-branding-primary-color, var(--d2l-color-celestine)) var(--d2l-navigation-band-slot-height, 1.5rem), #ffffff 0%); | ||
| } | ||
| :host([hidden]) { | ||
| display: none; | ||
| } | ||
@@ -43,43 +31,38 @@ .d2l-navigation-scroll { | ||
| .d2l-navigation-scroll[custom-scroll] { | ||
| .d2l-navigation-scroll[data-custom-scroll] { | ||
| /* Firefox Styles */ | ||
| scrollbar-color: var(--d2l-color-galena) var(--d2l-color-sylvite); | ||
| scrollbar-width: thin; | ||
| /* IE Styles */ | ||
| scrollbar-face-color: var(--d2l-color-galena); | ||
| scrollbar-arrow-color: var(--d2l-color-sylvite); | ||
| scrollbar-track-color: var(--d2l-color-sylvite); | ||
| scrollbar-shadow-color: var(--d2l-color-sylvite); | ||
| } | ||
| /* Webkit Styles */ | ||
| .d2l-navigation-scroll[custom-scroll]::-webkit-scrollbar { | ||
| .d2l-navigation-scroll[data-custom-scroll]::-webkit-scrollbar { | ||
| background-color: var(--d2l-color-sylvite); | ||
| border-radius: 8px; | ||
| background-color: var(--d2l-color-sylvite); | ||
| height: 9px; | ||
| } | ||
| .d2l-navigation-scroll[custom-scroll]::-webkit-scrollbar-thumb { | ||
| .d2l-navigation-scroll[data-custom-scroll]::-webkit-scrollbar-thumb { | ||
| background-color: var(--d2l-color-galena); | ||
| border-bottom: 1px solid var(--d2l-color-sylvite); | ||
| border-radius: 8px; | ||
| border-bottom: 1px solid var(--d2l-color-sylvite); | ||
| border-top: 1px solid var(--d2l-color-sylvite); | ||
| } | ||
| /* Faded edges styles */ | ||
| .d2l-navigation-scroll:before, | ||
| .d2l-navigation-scroll:after { | ||
| .d2l-navigation-scroll::before, | ||
| .d2l-navigation-scroll::after { | ||
| content: ''; | ||
| position: absolute; | ||
| height: 100%; | ||
| max-height: var(--d2l-navigation-band-slot-height, 1.5rem); | ||
| pointer-events: none; | ||
| position: absolute; | ||
| top: 0; | ||
| width: 2.439%; /* should match gutter width */ | ||
| z-index: 2; | ||
| } | ||
| .d2l-navigation-scroll:before { | ||
| .d2l-navigation-scroll::before { | ||
| background: linear-gradient(to right, var(--d2l-branding-primary-color, var(--d2l-color-celestine)), transparent); | ||
| left: 0; | ||
| background: linear-gradient(to right, var(--d2l-branding-primary-color, var(--d2l-color-celestine)), transparent); | ||
| } | ||
| .d2l-navigation-scroll:after { | ||
| .d2l-navigation-scroll::after { | ||
| background: linear-gradient(to left, var(--d2l-branding-primary-color, var(--d2l-color-celestine)), transparent); | ||
| right: 0; | ||
| background: linear-gradient(to left, var(--d2l-branding-primary-color, var(--d2l-color-celestine)), transparent); | ||
| } | ||
@@ -96,15 +79,22 @@ /* Styles to ensure the right padding is respected when scrolling */ | ||
| } | ||
| </style> | ||
| <div class="d2l-navigation-centerer"> | ||
| <div class="d2l-navigation-scroll" custom-scroll$=[[customScroll]]> | ||
| <div class="d2l-navigation-gutters"> | ||
| <slot></slot> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| `; | ||
| template.setAttribute('strip-whitespace', ''); | ||
| return template; | ||
| @media (max-width: 615px) { | ||
| .d2l-navigation-scroll::before, | ||
| .d2l-navigation-scroll::after { | ||
| width: 15px; | ||
| } | ||
| } | ||
| @media (min-width: 1230px) { | ||
| .d2l-navigation-scroll::before, | ||
| .d2l-navigation-scroll::after { | ||
| width: 30px; | ||
| } | ||
| } | ||
| `]; | ||
| } | ||
| constructor() { | ||
| super(); | ||
| this._customScroll = useCustomScroll(); | ||
| } | ||
| connectedCallback() { | ||
@@ -120,2 +110,14 @@ super.connectedCallback(); | ||
| render() { | ||
| return html` | ||
| <div class="d2l-navigation-centerer"> | ||
| <div class="d2l-navigation-scroll" ?data-custom-scroll="${this._customScroll}"> | ||
| <div class="d2l-navigation-gutters"> | ||
| <slot></slot> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| `; | ||
| } | ||
| _handleScrollRequest(e) { | ||
@@ -134,2 +136,3 @@ e.stopPropagation(); | ||
| } | ||
| customElements.define('d2l-navigation-band', D2LNavigationBand); | ||
| customElements.define('d2l-navigation-band', NavigationBand); |
@@ -19,7 +19,2 @@ import { html } from '@polymer/polymer/polymer-element.js'; | ||
| .d2l-navigation-scroll:before, | ||
| .d2l-navigation-scroll:after { | ||
| width: 2.439%; | ||
| } | ||
| @media (max-width: 615px) { | ||
@@ -30,7 +25,2 @@ .d2l-navigation-gutters { | ||
| } | ||
| .d2l-navigation-scroll:before, | ||
| .d2l-navigation-scroll:after { | ||
| width: 15px; | ||
| } | ||
| } | ||
@@ -43,9 +33,4 @@ | ||
| } | ||
| .d2l-navigation-scroll:before, | ||
| .d2l-navigation-scroll:after { | ||
| width: 30px; | ||
| } | ||
| } | ||
| </style> | ||
| `; |
| import '@brightspace-ui/core/components/colors/colors.js'; | ||
| import { css } from 'lit'; | ||
| export const centererStyles = css` | ||
| .d2l-navigation-centerer { | ||
| margin: 0 auto; | ||
| max-width: 1230px; | ||
| } | ||
| `; | ||
| export const guttersStyles = css` | ||
| .d2l-navigation-gutters { | ||
| padding-left: 2.439%; | ||
| padding-right: 2.439%; | ||
| position: relative; | ||
| } | ||
| @media (max-width: 615px) { | ||
| .d2l-navigation-gutters { | ||
| padding-left: 15px; | ||
| padding-right: 15px; | ||
| } | ||
| } | ||
| @media (min-width: 1230px) { | ||
| .d2l-navigation-gutters { | ||
| padding-left: 30px; | ||
| padding-right: 30px; | ||
| } | ||
| } | ||
| `; | ||
| export const highlightBorderStyles = css` | ||
@@ -5,0 +32,0 @@ .d2l-navigation-highlight-border { |
| { | ||
| "name": "@brightspace-ui-labs/navigation", | ||
| "version": "5.8.0", | ||
| "version": "5.9.0", | ||
| "type": "module", | ||
@@ -5,0 +5,0 @@ "repository": "https://github.com/BrightspaceUILabs/navigation.git", |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by0.07%
70485
- Lines of code
- increased by0.92%
1540
No dependency changes