diff --git a/components/byu-menu/byu-menu-common.scss b/components/byu-menu/byu-menu-common.scss index 91cf3b3c..34071e55 100644 --- a/components/byu-menu/byu-menu-common.scss +++ b/components/byu-menu/byu-menu-common.scss @@ -1,168 +1,171 @@ -@import "../shared-styles/colors.scss"; -@import "../shared-styles/settings.scss"; -@import "../shared-styles/nav.scss"; - -@mixin menuGeneral() { - display: flex; - justify-content: center; - width: 100%; - height: auto; - background: #fff; - // opacity used to be set here, but now it is an option. -} - -@mixin bgTransparent() { - //background: rgba(255,255,255,0.8); - opacity: 0.88; -} - -@mixin outerNav() { - display: flex; - flex-direction: row; - flex-wrap: nowrap; - align-items: center; - justify-content: flex-start; - box-sizing: border-box; - height: 35px; - position: relative; - flex: 1; - flex-basis: 100%; -} - -@mixin navItemSlotted() { - @include navItem(); - flex: 1; -} - -@mixin navItemsSlottedSetWidth() { - min-width: 200px; - flex: 0; - padding: 0 16px; -} - -@mixin moreMenu() { - display: none; - position: relative; - height: 35px; - width: 16.66%; - overflow: visible !important; -} - -@mixin moreMenuVisible() { - display: block; -} - -@mixin menuMoreExpanded() { - background: $menuActive; - box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.75); -} - -@mixin menuMoreItems() { - display: block; -} - -@mixin menuFixedOverlay() { - position: fixed; - top: 0; - bottom: 0; - left: 0; - right: 0; - z-index: 1; -} - -@mixin moreLink() { - @include navItem(); - position: relative; - flex: 1; - display: block; -} - -@mixin moreLinkSvg() { - height: 13px; - width: 13px; - //transition: transform 0.5s ease; - //transform: rotate(0); - //transform-origin: center; -} - -@mixin moreItems() { - display: none; - position: absolute; - top: 35px; - right: 0; - min-width: 100%; - max-width: 250px; - z-index: 2; - background: white; - box-shadow: 0 0 2px 0 rgba(0,0,0,0.75); -} - -@mixin moreItemsSlotted() { - width: 100%; - @include navItem(); - display: block; - text-align: left !important; - padding-left: 12px !important; - padding-right: 12px !important; -} - -/* MOBILE */ - -@mixin mobileOuterNav() { - display: block; - height: auto; -} - -@mixin mobileMenuMore() { - display: none !important; -} - -@mixin mobileMenuSlotted() { - display: block !important; - text-align: left !important; - padding: 18px 18px 18px 50px !important; - height: auto !important; - width: 100%; - max-width: 100%; - position: static; - box-sizing: border-box; - line-height: 12px !important; -} - -@mixin mobileMenuMoreMenuSlotted() { - padding: 0 !important; -} - -@mixin mobileMenuMoreMenu() { - display: block; - width: 100%; - box-shadow: none; - position: static; - height: auto; -} - -@mixin mobileMenuMoreItems() { - display: block; - box-shadow: none; - padding: 0; - position: static !important; -} - -@mixin mobileMenuMoreItemsSlotted() { - display: block !important; - text-align: left !important; - padding: 18px 50px !important; - height: auto !important; - width: 100%; - position: static; - box-sizing: border-box; - line-height: 12px !important; -} - -@mixin mobileMenuMoreExpanded() { - box-shadow: none; -} - -@mixin mobileMenuFixedOverlay() { - display: none !important; +@import "../shared-styles/colors.scss"; +@import "../shared-styles/settings.scss"; +@import "../shared-styles/nav.scss"; + +@mixin menuGeneral() { + display: flex; + justify-content: center; + width: 100%; + height: auto; + background: #fff; + // opacity used to be set here, but now it is an option. +} + +@mixin bgTransparent() { + //background: rgba(255,255,255,0.8); + opacity: 0.88; +} + +@mixin outerNav() { + display: flex; + flex-direction: row; + flex-wrap: nowrap; + align-items: center; + justify-content: flex-start; + box-sizing: border-box; + height: 35px; + position: relative; + flex: 1; + flex-basis: 100%; +} + +@mixin navItemSlotted() { + @include navItem(); + flex: 1; +} + +@mixin navItemsSlottedSetWidth() { + min-width: 200px; + flex: 0; + padding: 0 16px; +} + +@mixin moreMenu() { + display: none; + position: relative; + height: 35px; + width: 16.66%; + overflow: visible !important; +} + +@mixin moreMenuVisible() { + display: block; +} + +@mixin menuMoreExpanded() { + background: $menuActive; + box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.75); +} + +@mixin menuMoreItems() { + display: block; +} + +@mixin menuFixedOverlay() { + position: fixed; + top: 0; + bottom: 0; + left: 0; + right: 0; + z-index: 1; +} + +@mixin moreLink() { + @include navItem(); + position: relative; + flex: 1; + display: block; +} + +@mixin moreLinkSvg() { + background-image: url('https://cdn.byu.edu/shared-icons/latest/fontawesome/down-open-navy.svg'); + height: 13px; + width: 13px; + display: inline-block; + background-size: 100%; + //transition: transform 0.5s ease; + //transform: rotate(0); + //transform-origin: center; +} + +@mixin moreItems() { + display: none; + position: absolute; + top: 35px; + right: 0; + min-width: 100%; + max-width: 250px; + z-index: 2; + background: white; + box-shadow: 0 0 2px 0 rgba(0,0,0,0.75); +} + +@mixin moreItemsSlotted() { + width: 100%; + @include navItem(); + display: block; + text-align: left !important; + padding-left: 12px !important; + padding-right: 12px !important; +} + +/* MOBILE */ + +@mixin mobileOuterNav() { + display: block; + height: auto; +} + +@mixin mobileMenuMore() { + display: none !important; +} + +@mixin mobileMenuSlotted() { + display: block !important; + text-align: left !important; + padding: 18px 18px 18px 50px !important; + height: auto !important; + width: 100%; + max-width: 100%; + position: static; + box-sizing: border-box; + line-height: 12px !important; +} + +@mixin mobileMenuMoreMenuSlotted() { + padding: 0 !important; +} + +@mixin mobileMenuMoreMenu() { + display: block; + width: 100%; + box-shadow: none; + position: static; + height: auto; +} + +@mixin mobileMenuMoreItems() { + display: block; + box-shadow: none; + padding: 0; + position: static !important; +} + +@mixin mobileMenuMoreItemsSlotted() { + display: block !important; + text-align: left !important; + padding: 18px 50px !important; + height: auto !important; + width: 100%; + position: static; + box-sizing: border-box; + line-height: 12px !important; +} + +@mixin mobileMenuMoreExpanded() { + box-shadow: none; +} + +@mixin mobileMenuFixedOverlay() { + display: none !important; } \ No newline at end of file diff --git a/components/byu-menu/byu-menu.html b/components/byu-menu/byu-menu.html index c2399d10..6fbe1dd2 100644 --- a/components/byu-menu/byu-menu.html +++ b/components/byu-menu/byu-menu.html @@ -1,17 +1,19 @@ - - - -