From 718f00fc5d29f7d8c067d94f6b23d4307a6bf392 Mon Sep 17 00:00:00 2001 From: Darko Hrgovic Date: Thu, 21 Jun 2018 11:19:08 -0700 Subject: [PATCH 01/42] Update drawer help text to indicate that including a menu block with primary nav is a good idea if choosing not to use the primary nav in the drawer, otherwise primary nav goes away entirely --- theme-settings.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/theme-settings.php b/theme-settings.php index cf41e18..2085780 100755 --- a/theme-settings.php +++ b/theme-settings.php @@ -184,7 +184,7 @@ function megatron_form_system_theme_settings_alter(&$form, &$form_state) { $form['clf_navigation_option']['clf_use_primary_menu_in_drawer'] = array( '#type' => 'checkbox', '#title' => t('Use the primary menu in the off-canvas drawer?'), - '#description' => t('This is optional in case you want to use additonal content blocks, such as a menu block, in the off-canvas drawer region.'), + '#description' => t('If not chosen, you should use a menu block or alternate method for main navigation in the off-canvas drawer region.'), '#default_value' => theme_get_setting('clf_use_primary_menu_in_drawer'), '#states' => array( 'invisible' => array( From 04557f8a42130d0a6105f0e62ccdbcc5a2bac695 Mon Sep 17 00:00:00 2001 From: Darko Hrgovic Date: Thu, 21 Jun 2018 11:20:36 -0700 Subject: [PATCH 02/42] Moved sticky option down into the clf_navigation_option section --- theme-settings.php | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/theme-settings.php b/theme-settings.php index 2085780..909be4b 100755 --- a/theme-settings.php +++ b/theme-settings.php @@ -100,13 +100,6 @@ function megatron_form_system_theme_settings_alter(&$form, &$form_state) { ), ); - $form['clf_navigation_option']['clf_sticky_option'] = array( - '#type' => 'checkbox', - '#title' => t('Make the default CLF navigation sticky.'), - '#description' => t('If you\'d like the primary navigation to be \'sticky\' (stay on top of window when scrolling downward), select this option.'), - '#default_value' => theme_get_setting('clf_sticky_option'), - ); - $form['clf_theme']['clf_navoption'] = array( '#type' => 'checkbox', '#title' => t('Primary Navigation Mobile Placement'), @@ -207,6 +200,13 @@ function megatron_form_system_theme_settings_alter(&$form, &$form_state) { '#default_value' => theme_get_setting('clf_secondarynavoption'), ); + $form['clf_navigation_option']['clf_sticky_option'] = array( + '#type' => 'checkbox', + '#title' => t('Make the default CLF navigation sticky.'), + '#description' => t('If you\'d like the primary navigation to be \'sticky\' (stay on top of window when scrolling downward), select this option.'), + '#default_value' => theme_get_setting('clf_sticky_option'), + ); + /** CLF CAMPUS IDENTITY OPTIONS ---------------------------------------------------------- */ $form['clf_identity'] = array( From 8d3b545ce6863de1e41e88e4b783b06f1365bf53 Mon Sep 17 00:00:00 2001 From: Darko Hrgovic Date: Thu, 21 Jun 2018 11:22:16 -0700 Subject: [PATCH 03/42] Removed duplicate clf_navoption and clf_secondarynavoption defined later in the clf_navigation_option section --- theme-settings.php | 15 +-------------- 1 file changed, 1 insertion(+), 14 deletions(-) diff --git a/theme-settings.php b/theme-settings.php index 909be4b..1f5ec02 100755 --- a/theme-settings.php +++ b/theme-settings.php @@ -99,20 +99,7 @@ function megatron_form_system_theme_settings_alter(&$form, &$form_state) { '__full' => t('Full Width Centered CLF'), ), ); - - $form['clf_theme']['clf_navoption'] = array( - '#type' => 'checkbox', - '#title' => t('Primary Navigation Mobile Placement'), - '#description' => t('Show the Primary Navigation at the bottom of the page on Mobile devices, in addition to the top navigation placement'), - '#default_value' => theme_get_setting('clf_navoption'), - ); - - $form['clf_theme']['clf_secondarynavoption'] = array( - '#type' => 'checkbox', - '#title' => t('Add a second row to the Primary Navigation?'), - '#description' => t('Show the Secondary Navigation on a second line, directly beneath the Primary Navigation
Defaults to the User Menu - this can be changed at Admin > Structure > Menu > Settings', array('@url' => url('/admin/structure/menu/settings'))), - '#default_value' => theme_get_setting('clf_secondarynavoption'), - ); + $form['clf_theme']['clf_nogradient'] = array( '#type' => 'checkbox', '#title' => t('Remove the gradient and text shadow in the Unit Name region?'), From adc3faa211a71c72c51e3e6244158cc0e718479c Mon Sep 17 00:00:00 2001 From: Darko Hrgovic Date: Thu, 21 Jun 2018 11:26:35 -0700 Subject: [PATCH 04/42] Targetting btn-navbar:first-child with right margin so it does not move right on sticky mobile --- css/navigation.sticky.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/css/navigation.sticky.css b/css/navigation.sticky.css index 9c1288e..26550f6 100644 --- a/css/navigation.sticky.css +++ b/css/navigation.sticky.css @@ -31,7 +31,7 @@ width: 100%; } - #ubc7-unit.navigation-is-sticky .btn-navbar { + #ubc7-unit.navigation-is-sticky .btn-navbar:first-child { margin-right: 40px; } } From 20eeb4d4acc98ec29d99b49763a6aa913c00de0a Mon Sep 17 00:00:00 2001 From: Darko Hrgovic Date: Thu, 21 Jun 2018 11:27:25 -0700 Subject: [PATCH 05/42] Making the secondary sticky on mobile --- css/navigation.sticky.css | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/css/navigation.sticky.css b/css/navigation.sticky.css index 26550f6..a09823d 100644 --- a/css/navigation.sticky.css +++ b/css/navigation.sticky.css @@ -34,5 +34,12 @@ #ubc7-unit.navigation-is-sticky .btn-navbar:first-child { margin-right: 40px; } + + #ubc7-unit-menu.navigation-is-sticky { + position: fixed; + top: 50px; + width: 100%; + z-index: 999; + } } /*# sourceMappingURL=navigation.sticky.css.map */ From ed4695ee834d996c24a44afa4f70e074b929efd9 Mon Sep 17 00:00:00 2001 From: Darko Hrgovic Date: Thu, 21 Jun 2018 11:32:01 -0700 Subject: [PATCH 06/42] Adjusting position of secondary drop-down nav on mobile --- less/secondary-nav.less | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/less/secondary-nav.less b/less/secondary-nav.less index bad8d71..f3981ab 100644 --- a/less/secondary-nav.less +++ b/less/secondary-nav.less @@ -418,6 +418,15 @@ .ubc-unit-styled .nav>li.active>.btn-group ul { background: #fff } + + #ubc7-unit-menu .nav>li>.btn-group .btn { + margin-right: 40px; + } + + #ubc7-unit-menu-second.expand { + margin-left: 20px; + margin-right: 20px; + } } //.oldie #ubc7-unit-menu, From 56ed870a79898e0b24493cebd48e3aeaf2e519ef Mon Sep 17 00:00:00 2001 From: Darko Hrgovic Date: Thu, 21 Jun 2018 11:35:27 -0700 Subject: [PATCH 07/42] Moved secondary so it is also sticky --- templates/page/page.tpl.php | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/templates/page/page.tpl.php b/templates/page/page.tpl.php index d480c88..d8c5f1d 100755 --- a/templates/page/page.tpl.php +++ b/templates/page/page.tpl.php @@ -153,17 +153,17 @@ - - - - - - From e011f9a412dee7769312810b7ed9678139101fff Mon Sep 17 00:00:00 2001 From: Darko Hrgovic Date: Thu, 21 Jun 2018 11:42:09 -0700 Subject: [PATCH 08/42] Remove whitespace in theme-settings.php --- theme-settings.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/theme-settings.php b/theme-settings.php index 1f5ec02..9806839 100755 --- a/theme-settings.php +++ b/theme-settings.php @@ -99,7 +99,7 @@ function megatron_form_system_theme_settings_alter(&$form, &$form_state) { '__full' => t('Full Width Centered CLF'), ), ); - + $form['clf_theme']['clf_nogradient'] = array( '#type' => 'checkbox', '#title' => t('Remove the gradient and text shadow in the Unit Name region?'), From a5a1046a4d066e0a5f1000f3ef36274c1a16ca9f Mon Sep 17 00:00:00 2001 From: Darko Hrgovic Date: Thu, 21 Jun 2018 11:42:34 -0700 Subject: [PATCH 09/42] Increase z-index of sticky nav --- css/navigation.sticky.css | 1 + 1 file changed, 1 insertion(+) diff --git a/css/navigation.sticky.css b/css/navigation.sticky.css index a09823d..e4e6639 100644 --- a/css/navigation.sticky.css +++ b/css/navigation.sticky.css @@ -11,6 +11,7 @@ position: fixed; top: 0; width: 100%; + z-index: 999; } } From 22b00dcf8623ea69b8380efc35b17afd76ce18a8 Mon Sep 17 00:00:00 2001 From: Darko Hrgovic Date: Thu, 21 Jun 2018 11:59:16 -0700 Subject: [PATCH 10/42] Adjusted margin of secondary on mobile when it was already done - reverting --- css/secondary-nav.css | 2 +- less/secondary-nav.less | 4 ---- 2 files changed, 1 insertion(+), 5 deletions(-) diff --git a/css/secondary-nav.css b/css/secondary-nav.css index a7f7f8e..bbcb802 100644 --- a/css/secondary-nav.css +++ b/css/secondary-nav.css @@ -1 +1 @@ -.ubc-unit-styled{margin-bottom:0}.ubc-unit-styled,.ubc-unit-styled .navbar-inner{background:#e6e6e6}.ubc-unit-styled .navbar-inner{background-image:none;border:0;border-radius:0;-moz-border-radius:0;-webkit-border-radius:0;box-shadow:none;-moz-box-shadow:none;-webkit-box-shadow:none;-webkit-filter:progid: none;filter:progid: none;min-height:32px}.ubc-unit-styled .navbar-inner{background-image:none;border:0;border-radius:0;-moz-border-radius:0;-webkit-border-radius:0;box-shadow:none;-moz-box-shadow:none;-webkit-box-shadow:none;-webkit-filter:progid: none;filter:progid: none;min-height:32px}.ubc-unit-styled .nav>li{line-height:20px}.ubc-unit-styled .nav>li>a{color:#002145;text-shadow:none;padding:10px}.ubc-unit-styled .nav-collapse .dropdown-menu a:hover,.ubc-unit-styled .nav-collapse .nav>li>a:hover{background:#002145!important;color:#fff;-webkit-filter:none;filter:none}.ubc-unit-styled .nav-collapse .nav>li>a:hover .ubc7-arrow.down-arrow{background-position:-1178px -227px}.ubc-unit-styled .nav>li.active>.btn-group,.ubc-unit-styled .nav>li.active>a{background:#d7e0e7}.ubc-unit-styled .dropdown-menu{border-radius:0;-moz-border-radius:0;-webkit-border-radius:0;margin-top:0}.ubc-unit-styled .nav>li>.dropdown-menu:after,.ubc-unit-styled .nav>li>.dropdown-menu:before{border:0;left:0;top:0}.ubc-unit-styled .nav>li>.dropdown-menu>li{border-bottom:1px solid #d7e0e7}.ubc-unit-styled .nav>li>.dropdown-menu>li:last-child{border:0}.ubc-unit-styled .dropdown .dropdown-menu .nav-header{color:#193056}.ubc-unit-styled .btn-group{margin-top:0!important}.ubc-unit-styled .nav>li.active>.btn-group .btn{background:0}.ubc-unit-styled .nav>li.active>.btn-group:hover .btn{background:#002145}.ubc-unit-styled .nav>li.active>.btn-group{box-shadow:inset 0 3px 8px rgba(0,0,0,.125)}.ubc-unit-styled .btn-group .btn{color:#002145;background:#e6e6e6;line-height:40px;-webkit-transition:color 0s ease,background-color 0s ease;transition:color 0s ease,background-color 0s ease}.ubc-unit-styled .dropdown .btn-group:hover .btn,.ubc-unit-styled .dropdown .btn-group:hover .dropdown-toggle{background:#002145;color:#fff}.ubc-unit-styled .btn-group a.btn{padding-right:7px}.ubc-unit-styled .btn-group button:hover{background:#193056!important}.ubc-unit-styled .dropdown:hover .btn-group .ubc7-arrow,.ubc-unit-styled .dropdown:hover .dropdown-toggle .ubc7-arrow{background-position:-1178px -227px!important}.ubc-unit-styled .dropdown .btn-group .btn,.ubc-unit-styled .dropdown .btn-group button{background-image:none;border-radius:0;border:0;box-shadow:0 0 0 transparent;height:40px;margin-bottom:0;margin-top:0;padding-bottom:0;padding-top:0;z-index:1}.ubc-unit-styled .dropdown .btn-group button{border-left:1px solid #c3d0db!important;height:22px!important;padding-left:3px;padding-right:5px}.ubc-unit-styled .dropdown .btn-group:hover button{height:40px!important}.ubc-unit-styled .dropdown .btn-group button .ubc7-arrow{margin-top:3px;vertical-align:top}.ubc-unit-styled .dropdown .btn-group:hover button .ubc7-arrow{margin-top:0;vertical-align:text-top}@media screen and (min-width:1200px){.ubc-unit-styled .container{width:1170px}.ubc-unit-styled .navbar-inner{min-height:40px}.ubc-unit-styled .nav>li{line-height:24px}.ubc-unit-styled .nav>li>a{padding:10px 15px 11px}.ubc-unit-styled .dropdown .btn-group .btn{height:45px}.ubc-unit-styled .dropdown .btn-group:hover button{height:45px!important}.ubc-unit-styled .btn-group .btn{line-height:45px}}@media screen and (min--moz-device-pixel-ratio:0) and (min-width:1200px){.ubc-unit-styled .nav>li>a{padding-top:11px!important}}@media screen and (max-width:979px){.ubc-unit-styled .container{margin-left:0;margin-right:0;width:auto}.ubc-unit-styled .nav>li>a{padding-left:20px;padding-right:20px}.ubc-unit-styled .navbar,.ubc-unit-styled .navbar-inner{min-height:0!important;padding:0}.ubc-unit-styled .navbar-inner{background:#fff}.ubc-unit-styled .nav-collapse ul{margin-bottom:0}.ubc-unit-styled .nav-collapse li{border-bottom:1px solid #c3d0db}.ubc-unit-styled .nav-collapse li.dropdown li:last-child{border:0}.ubc-unit-styled .nav-collapse li a{border-radius:0;-webkit-border-radius:0;-moz-border-radius:0;color:#002145;font-weight:400;margin-bottom:0;text-shadow:none}.ubc-unit-styled .dropdown-menu{margin:0}.ubc-unit-styled .dropdown .dropdown-menu .nav-header{padding-left:35px}.ubc-unit-styled .dropdown .btn-group{width:100%}.ubc-unit-styled .dropdown .btn-group .btn{background:#fff;border-bottom:1px solid #c3d0db}.ubc-unit-styled .dropdown .btn-group:hover .btn{background:#002145}.ubc-unit-styled .dropdown .btn-group a.btn{display:block;margin-right:40px;padding-left:20px;text-align:left}.ubc-unit-styled .dropdown .btn-group button,.ubc-unit-styled .dropdown .btn-group:hover button{height:41px!important;position:absolute;right:0;top:0;width:40px}.ubc-unit-styled .dropdown .btn-group button .ubc7-arrow{margin-top:0;vertical-align:text-top}.ubc-unit-styled .dropdown .btn-group.open button .ubc7-arrow{background-position:-1207px -261px}.ubc-unit-styled .dropdown .btn-group.open:hover button .ubc7-arrow{background-position:-1207px -227px!important}.ubc-unit-styled .nav>li.active>.btn-group ul{background:#fff}}.oldie .ubc-unit-styled,.oldie .ubc-unit-styled .navbar-inner{border-bottom:1px solid #e6e6e6}@media print{.ubc-unit-styled{display:none}}.ubc-unit-styled .container{margin:0 auto;width:940px}@media screen and (max-width:979px){.ubc-unit-styled .container{width:auto;margin-left:0;margin-right:0}}@media screen and (min-width:1200px){#ubc7-unit-menu-second .container{width:1170px}}@media screen and (max-width:979px){#ubc7-unit-menu .container{width:100%}}@media screen and (max-width:767px){.ubc-unit-styled .nav-collapse{box-shadow:0 3px 6px #ccc;-moz-box-shadow:0 3px 6px #ccc;-webkit-box-shadow:0 3px 6px #ccc}#ubc7-unit-menu-second-mobile.ubc-unit-styled .nav-collapse.collapse{height:auto}}#ubc7-unit .navbar .btn-navbar.secondary{margin-right:.5em}.navbar .btn-navbar.secondary span{color:#333;font-size:20px;text-shadow:none;margin-top:-2px;margin-left:-9px;display:inline-block} \ No newline at end of file +.ubc-unit-styled{margin-bottom:0}.ubc-unit-styled,.ubc-unit-styled .navbar-inner{background:#e6e6e6}.ubc-unit-styled .navbar-inner{background-image:none;border:0;border-radius:0;-moz-border-radius:0;-webkit-border-radius:0;box-shadow:none;-moz-box-shadow:none;-webkit-box-shadow:none;filter:progid: none;min-height:32px}.ubc-unit-styled .navbar-inner{background-image:none;border:0;border-radius:0;-moz-border-radius:0;-webkit-border-radius:0;box-shadow:none;-moz-box-shadow:none;-webkit-box-shadow:none;filter:progid: none;min-height:32px}.ubc-unit-styled .nav>li{line-height:20px}.ubc-unit-styled .nav>li>a{color:#002145;text-shadow:none;padding:10px}.ubc-unit-styled .nav-collapse .dropdown-menu a:hover,.ubc-unit-styled .nav-collapse .nav>li>a:hover{background:#002145!important;color:#fff;filter:none}.ubc-unit-styled .nav-collapse .nav>li>a:hover .ubc7-arrow.down-arrow{background-position:-1178px -227px}.ubc-unit-styled .nav>li.active>.btn-group,.ubc-unit-styled .nav>li.active>a{background:#d7e0e7}.ubc-unit-styled .dropdown-menu{border-radius:0;-moz-border-radius:0;-webkit-border-radius:0;margin-top:0}.ubc-unit-styled .nav>li>.dropdown-menu:after,.ubc-unit-styled .nav>li>.dropdown-menu:before{border:0;left:0;top:0}.ubc-unit-styled .nav>li>.dropdown-menu>li{border-bottom:1px solid #d7e0e7}.ubc-unit-styled .nav>li>.dropdown-menu>li:last-child{border:0}.ubc-unit-styled .dropdown .dropdown-menu .nav-header{color:#193056}.ubc-unit-styled .btn-group{margin-top:0!important}.ubc-unit-styled .nav>li.active>.btn-group .btn{background:0}.ubc-unit-styled .nav>li.active>.btn-group:hover .btn{background:#002145}.ubc-unit-styled .nav>li.active>.btn-group{-webkit-box-shadow:inset 0 3px 8px rgba(0,0,0,.125);-moz-box-shadow:inset 0 3px 8px rgba(0,0,0,.125);box-shadow:inset 0 3px 8px rgba(0,0,0,.125)}.ubc-unit-styled .btn-group .btn{color:#002145;background:#e6e6e6;line-height:40px;-webkit-transition:color 0s ease,background-color 0s ease;-moz-transition:color 0s ease,background-color 0s ease;-o-transition:color 0s ease,background-color 0s ease;transition:color 0s ease,background-color 0s ease}.ubc-unit-styled .dropdown .btn-group:hover .btn,.ubc-unit-styled .dropdown .btn-group:hover .dropdown-toggle{background:#002145;color:#fff}.ubc-unit-styled .btn-group a.btn{padding-right:7px}.ubc-unit-styled .btn-group button:hover{background:#193056!important}.ubc-unit-styled .dropdown:hover .btn-group .ubc7-arrow,.ubc-unit-styled .dropdown:hover .dropdown-toggle .ubc7-arrow{background-position:-1178px -227px!important}.ubc-unit-styled .dropdown .btn-group .btn,.ubc-unit-styled .dropdown .btn-group button{background-image:none;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;border:0;-webkit-box-shadow:0 0 0 transparent;-moz-box-shadow:0 0 0 transparent;box-shadow:0 0 0 transparent;height:40px;margin-bottom:0;margin-top:0;padding-bottom:0;padding-top:0;z-index:1}.ubc-unit-styled .dropdown .btn-group button{border-left:1px solid #c3d0db!important;height:22px!important;padding-left:3px;padding-right:5px}.ubc-unit-styled .dropdown .btn-group:hover button{height:40px!important}.ubc-unit-styled .dropdown .btn-group button .ubc7-arrow{margin-top:3px;vertical-align:top}.ubc-unit-styled .dropdown .btn-group:hover button .ubc7-arrow{margin-top:0;vertical-align:text-top}@media screen and (min-width:1200px){.ubc-unit-styled .container{width:1170px}.ubc-unit-styled .navbar-inner{min-height:40px}.ubc-unit-styled .nav>li{line-height:24px}.ubc-unit-styled .nav>li>a{padding:10px 15px 11px}.ubc-unit-styled .dropdown .btn-group .btn{height:45px}.ubc-unit-styled .dropdown .btn-group:hover button{height:45px!important}.ubc-unit-styled .btn-group .btn{line-height:45px}}@media screen and (min--moz-device-pixel-ratio:0) and (min-width:1200px){.ubc-unit-styled .nav>li>a{padding-top:11px!important}}@media screen and (max-width:979px){.ubc-unit-styled .container{margin-left:0;margin-right:0;width:auto}.ubc-unit-styled .nav>li>a{padding-left:20px;padding-right:20px}.ubc-unit-styled .navbar,.ubc-unit-styled .navbar-inner{min-height:0!important;padding:0}.ubc-unit-styled .navbar-inner{background:#fff}.ubc-unit-styled .nav-collapse ul{margin-bottom:0}.ubc-unit-styled .nav-collapse li{border-bottom:1px solid #c3d0db}.ubc-unit-styled .nav-collapse li.dropdown li:last-child{border:0}.ubc-unit-styled .nav-collapse li a{border-radius:0;-webkit-border-radius:0;-moz-border-radius:0;color:#002145;font-weight:400;margin-bottom:0;text-shadow:none}.ubc-unit-styled .dropdown-menu{margin:0}.ubc-unit-styled .dropdown .dropdown-menu .nav-header{padding-left:35px}.ubc-unit-styled .dropdown .btn-group{width:100%}.ubc-unit-styled .dropdown .btn-group .btn{background:#fff;border-bottom:1px solid #c3d0db}.ubc-unit-styled .dropdown .btn-group:hover .btn{background:#002145}.ubc-unit-styled .dropdown .btn-group a.btn{display:block;margin-right:40px;padding-left:20px;text-align:left}.ubc-unit-styled .dropdown .btn-group button,.ubc-unit-styled .dropdown .btn-group:hover button{height:41px!important;position:absolute;right:0;top:0;width:40px}.ubc-unit-styled .dropdown .btn-group button .ubc7-arrow{margin-top:0;vertical-align:text-top}.ubc-unit-styled .dropdown .btn-group.open button .ubc7-arrow{background-position:-1207px -261px}.ubc-unit-styled .dropdown .btn-group.open:hover button .ubc7-arrow{background-position:-1207px -227px!important}.ubc-unit-styled .nav>li.active>.btn-group ul{background:#fff}#ubc7-unit-menu-second.expand{margin-left:20px;margin-right:20px}}.oldie .ubc-unit-styled,.oldie .ubc-unit-styled .navbar-inner{border-bottom:1px solid #e6e6e6}@media print{.ubc-unit-styled{display:none}}.ubc-unit-styled .container{margin:0 auto;width:940px}@media screen and (max-width:979px){.ubc-unit-styled .container{width:auto;margin-left:0;margin-right:0}}@media screen and (min-width:1200px){#ubc7-unit-menu-second .container{width:1170px}}@media screen and (max-width:979px){#ubc7-unit-menu .container{width:100%}}@media screen and (max-width:767px){.ubc-unit-styled .nav-collapse{box-shadow:0 3px 6px #ccc;-moz-box-shadow:0 3px 6px #ccc;-webkit-box-shadow:0 3px 6px #ccc}#ubc7-unit-menu-second-mobile.ubc-unit-styled .nav-collapse.collapse{height:auto}}#ubc7-unit .navbar .btn-navbar.secondary{margin-right:.5em}.navbar .btn-navbar.secondary span{color:#333;font-size:20px;text-shadow:none;margin-top:-2px;margin-left:-9px;display:inline-block} \ No newline at end of file diff --git a/less/secondary-nav.less b/less/secondary-nav.less index f3981ab..13f6e79 100644 --- a/less/secondary-nav.less +++ b/less/secondary-nav.less @@ -419,10 +419,6 @@ background: #fff } - #ubc7-unit-menu .nav>li>.btn-group .btn { - margin-right: 40px; - } - #ubc7-unit-menu-second.expand { margin-left: 20px; margin-right: 20px; From af670412d4690ea9ab843dd5cd651775e21d5b94 Mon Sep 17 00:00:00 2001 From: Darko Hrgovic Date: Thu, 21 Jun 2018 12:04:43 -0700 Subject: [PATCH 11/42] Adding navigation.sticky.less and adjusting z-index of sticky nav --- less/navigation.sticky.less | 47 +++++++++++++++++++++++++++++++++++++ 1 file changed, 47 insertions(+) create mode 100644 less/navigation.sticky.less diff --git a/less/navigation.sticky.less b/less/navigation.sticky.less new file mode 100644 index 0000000..9718516 --- /dev/null +++ b/less/navigation.sticky.less @@ -0,0 +1,47 @@ +/** + * @file + * Placeholder + */ +@media screen and (min-width:980px) { + body.unit-menu-is-sticky { + padding-top: 40px; + } + + #ubc7-unit-menu.navigation-is-sticky { + position: fixed; + top: 0; + width: 100%; + z-index: 999; + } +} + +@media screen and (min-width:980px) and (min-width:1200px) { + body.unit-menu-is-sticky { + padding-top: 45px; + } +} + +@media screen and (max-width:979px) { + body.unit-area-is-sticky { + padding-top: 50px; + } + + #ubc7-unit.navigation-is-sticky { + position: fixed; + top: 0; + width: 100%; + z-index: 999; + } + + #ubc7-unit.navigation-is-sticky .btn-navbar:first-child { + margin-right: 40px; + } + + #ubc7-unit-menu.navigation-is-sticky { + position: fixed; + top: 50px; + width: 100%; + z-index: 999; + } +} +/*# sourceMappingURL=navigation.sticky.css.map */ From 04f2ea5d6ed03b085f30da0dc74f32ff76a5a4a5 Mon Sep 17 00:00:00 2001 From: Darko Hrgovic Date: Thu, 21 Jun 2018 12:05:14 -0700 Subject: [PATCH 12/42] Adjusted z-index of sticky nav after adding navigation.sticky.less --- css/navigation.sticky.css | 47 +-------------------------------------- 1 file changed, 1 insertion(+), 46 deletions(-) diff --git a/css/navigation.sticky.css b/css/navigation.sticky.css index e4e6639..7206c88 100644 --- a/css/navigation.sticky.css +++ b/css/navigation.sticky.css @@ -1,46 +1 @@ -/** - * @file - * Placeholder - */ -@media screen and (min-width:980px) { - body.unit-menu-is-sticky { - padding-top: 40px; - } - - #ubc7-unit-menu.navigation-is-sticky { - position: fixed; - top: 0; - width: 100%; - z-index: 999; - } -} - -@media screen and (min-width:980px) and (min-width:1200px) { - body.unit-menu-is-sticky { - padding-top: 45px; - } -} - -@media screen and (max-width:979px) { - body.unit-area-is-sticky { - padding-top: 50px; - } - - #ubc7-unit.navigation-is-sticky { - position: fixed; - top: 0; - width: 100%; - } - - #ubc7-unit.navigation-is-sticky .btn-navbar:first-child { - margin-right: 40px; - } - - #ubc7-unit-menu.navigation-is-sticky { - position: fixed; - top: 50px; - width: 100%; - z-index: 999; - } -} -/*# sourceMappingURL=navigation.sticky.css.map */ +@media screen and (min-width:980px){body.unit-menu-is-sticky{padding-top:40px}#ubc7-unit-menu.navigation-is-sticky{position:fixed;top:0;width:100%;z-index:999}}@media screen and (min-width:980px) and (min-width:1200px){body.unit-menu-is-sticky{padding-top:45px}}@media screen and (max-width:979px){body.unit-area-is-sticky{padding-top:50px}#ubc7-unit.navigation-is-sticky{position:fixed;top:0;width:100%;z-index:999}#ubc7-unit.navigation-is-sticky .btn-navbar:first-child{margin-right:40px}#ubc7-unit-menu.navigation-is-sticky{position:fixed;top:50px;width:100%;z-index:999}} \ No newline at end of file From 194163c04414c839b198dbf4187001b049816af2 Mon Sep 17 00:00:00 2001 From: Darko Hrgovic Date: Fri, 22 Jun 2018 09:57:00 -0700 Subject: [PATCH 13/42] Add flyout region to .info --- megatron.info | 1 + 1 file changed, 1 insertion(+) diff --git a/megatron.info b/megatron.info index d2f1ee8..f8aa1c5 100755 --- a/megatron.info +++ b/megatron.info @@ -10,6 +10,7 @@ regions[content] = 'Content' regions[sidebar_first] = 'First Sidebar' regions[sidebar_second] = 'Second Sidebar' regions[drawer] = 'Drawer' +regions[flyout] = 'Flyout' regions[prefooter] = 'Content: Below' ;Styles - add your custom css here From 62f96cac234ae28b3b7bcdebf982949a9d443181 Mon Sep 17 00:00:00 2001 From: Darko Hrgovic Date: Fri, 22 Jun 2018 09:57:14 -0700 Subject: [PATCH 14/42] Add flyout option to theme settings --- theme-settings.php | 33 +++++++++++++++++++++++++++++++++ 1 file changed, 33 insertions(+) diff --git a/theme-settings.php b/theme-settings.php index 9806839..967fbca 100755 --- a/theme-settings.php +++ b/theme-settings.php @@ -194,6 +194,39 @@ function megatron_form_system_theme_settings_alter(&$form, &$form_state) { '#default_value' => theme_get_setting('clf_sticky_option'), ); + /** CLF FLYOUT OPTIONS + ---------------------------------------------------------- */ + $form['clf_flyout_option'] = array( + '#type' => 'fieldset', + '#title' => t('Flyout Option'), + '#prefix' => '
', + '#suffix' => '
', + '#collapsible' => TRUE, + '#collapsed' => TRUE, + '#weight' => -6, + ); + + $form['clf_flyout_option']['clf_flyout_region'] = array( + '#type' => 'select', + '#title' => t('Choose whether or not to display an off-canvas flyout region for content on this website.'), + '#default_value' => theme_get_setting('clf_flyout_region'), + '#options' => array( + 'default' => t('Default: no flyout region'), + 'flyout--push-left' => t('Flyout Region: push from left'), + 'flyout--cover-left' => t('Flyout Region: cover from left'), + 'flyout--push-right' => t('Flyout Region: push from right'), + 'flyout--cover-right' => t('Flyout Region: cover from right'), + ), + ); + + $form['clf_flyout_option']['clf_flyout_label'] = array( + '#type' => 'textfield', + '#title' => t('Type a label for the off-canvas flyout region eg. Quicklinks'), + '#default_value' => theme_get_setting('clf_flyout_label'), + '#size' => 60, + '#maxlength' => 128, + ); + /** CLF CAMPUS IDENTITY OPTIONS ---------------------------------------------------------- */ $form['clf_identity'] = array( From 637776a889a93aba2591b62a213ee74c87970ce0 Mon Sep 17 00:00:00 2001 From: Darko Hrgovic Date: Fri, 22 Jun 2018 09:57:38 -0700 Subject: [PATCH 15/42] Add flyout js and css in template.php --- template.php | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/template.php b/template.php index c69bb6c..2ab0227 100755 --- a/template.php +++ b/template.php @@ -371,6 +371,19 @@ function megatron_preprocess_page(&$variables) { drupal_add_js(drupal_get_path('theme', 'megatron') . '/js/off.canvas.drawer.js'); drupal_add_css(drupal_get_path('theme', 'megatron') . '/css/off.canvas.drawer.css'); } + + // Flyout + $variables['flyout_region'] = theme_get_setting('clf_flyout_region'); + $flyout_enabled = $variables['flyout_region'] != 'default' && $variables['flyout_region'] != 'double' && $variables['flyout_region'] != 'higher'; + $variables['flyout_enabled'] = $flyout_enabled; + + $variables['flyout_label'] = theme_get_setting('clf_flyout_label'); + + // Add js and css for flyout option + if ($flyout_enabled) { + drupal_add_js(drupal_get_path('theme', 'megatron') . '/js/off.canvas.flyout.js'); + drupal_add_css(drupal_get_path('theme', 'megatron') . '/css/off.canvas.flyout.css'); + } } /** BOOTSTRAP THEME FUNCTIONS USED */ From 0a11c80314d18be9f6f04da4659b8f97434fdc9c Mon Sep 17 00:00:00 2001 From: Darko Hrgovic Date: Fri, 22 Jun 2018 09:58:11 -0700 Subject: [PATCH 16/42] Add flyout region to page.tpl.php --- templates/page/page.tpl.php | 22 ++++++++++++++++++++++ 1 file changed, 22 insertions(+) diff --git a/templates/page/page.tpl.php b/templates/page/page.tpl.php index d8c5f1d..91b3b13 100755 --- a/templates/page/page.tpl.php +++ b/templates/page/page.tpl.php @@ -150,6 +150,18 @@ + + + + + @@ -272,3 +284,13 @@
+ + + +
+ + +
+
+ + From fad3f8962398537cb4b0cf7a27605e1deb82a684 Mon Sep 17 00:00:00 2001 From: Darko Hrgovic Date: Fri, 22 Jun 2018 09:58:44 -0700 Subject: [PATCH 17/42] Add off.canvas.flyout.js --- js/off.canvas.flyout.js | 40 ++++++++++++++++++++++++++++++++++++++++ 1 file changed, 40 insertions(+) create mode 100644 js/off.canvas.flyout.js diff --git a/js/off.canvas.flyout.js b/js/off.canvas.flyout.js new file mode 100644 index 0000000..252640d --- /dev/null +++ b/js/off.canvas.flyout.js @@ -0,0 +1,40 @@ +(function () { + + Drupal.behaviors.clfFlyout = { + attach: function (context, settings) { + // Primary flyout toggle. + if (document.getElementsByClassName("flyout-toggle").length > 0) { + var pushTrigger = document.getElementsByClassName("flyout-toggle"); + var pushPanel = document.getElementById("off-canvas-flyout"); + var pushContent = document.getElementById("pushed-content"); + var pushMask = document.getElementById("off-canvas-mask"); + var activeClass = "off-canvas-flyout--is-active"; + var animatingClass = "off-canvas-flyout--is-animating"; + var i; + document.body.classList.add("has-off-canvas-flyout"); + for (i = 0; i < pushTrigger.length; i++) { + pushTrigger[i].addEventListener("click", function () { + document.body.classList.toggle(activeClass); + pushPanel.classList.toggle(activeClass); + pushContent.classList.toggle(activeClass); + pushMask.classList.toggle(activeClass); + document.body.classList.add(animatingClass); + pushPanel.classList.add(animatingClass); + pushContent.classList.add(animatingClass); + pushMask.classList.add(animatingClass); + }); + } + // Old Safari requires 'webkit' prefix. + pushPanel.addEventListener("webkitTransitionEnd", finishedAnimating); + pushPanel.addEventListener("transitionend", finishedAnimating); + + function finishedAnimating() { + document.body.classList.remove(animatingClass); + pushPanel.classList.remove(animatingClass); + pushContent.classList.remove(animatingClass); + pushMask.classList.remove(animatingClass); + } + } + } + } +}()); From a20d368d9ed31e6f49da5c96d18d7852bc7f0e00 Mon Sep 17 00:00:00 2001 From: Darko Hrgovic Date: Fri, 22 Jun 2018 09:59:10 -0700 Subject: [PATCH 18/42] Add off.canvas.flyout.less --- less/off.canvas.flyout.less | 308 ++++++++++++++++++++++++++++++++++++ 1 file changed, 308 insertions(+) create mode 100644 less/off.canvas.flyout.less diff --git a/less/off.canvas.flyout.less b/less/off.canvas.flyout.less new file mode 100644 index 0000000..234ec3e --- /dev/null +++ b/less/off.canvas.flyout.less @@ -0,0 +1,308 @@ +#flyout-button { + position: fixed; + top: 50vh; + right: -30px; + color: #fff; + border:none; + background-color: #7C1F3D; + font-family: Arial,Sans-Serif; + padding:10px; + font-size:14px; + outline: 0; + transform: rotate(90deg); + z-index: 999; +} + +#flyout-button:hover { + background-color: #002145; + color: #fff; +} + +#flyout-button:hover .icon-bar { + background-color: #fff; +} + +.flyout-toggle--hamburger { + background-color: #fff; + box-shadow: 1px 1px 1px #191938; + -webkit-box-shadow: 1px 1px 1px #191938; + float: right; + height: 24px; + padding: 11px 0 0 13px; + width: 32px; +} + +.flyout-toggle--hamburger:hover { + box-shadow: 1px 1px 1px #191938; + -webkit-box-shadow: inset 1px 1px 1px #191938; + -moz-box-shadow: 1px 1px 1px #191938; +} + +.flyout-toggle--hamburger span { + margin-top: 3px; + display: block; + width: 18px; + height: 2px; + background-color: #002145; + box-shadow: 0 1px 0 rgba(0,0,0,.25); +} + +.flyout-toggle--hamburger span:first-child { + margin-top: 0; +} + +@media screen and (min-width:998px) { + .flyout-toggle--hamburger { + display: block; + margin-top: 2px; + margin-right: 13px; + margin-bottom: 3px; + } +} + +@media screen and (min-width:1200px) { + .flyout-toggle--hamburger { + margin-top: 5px; + margin-right: 17px; + margin-bottom: 5px; + } + #flyout-button { + line-height: 1.75em; + } +} + +#pushed-content { + position: relative; + z-index: 1; + display: block; + transition: transform 0.125s ease; +} + +#pushed-content.flyout--push-left.off-canvas-flyout--is-active { + transform: translate3D(-20rem, 0, 0); + box-shadow: 2px 0 2px rgba(0, 0, 0, .15); +} + +#pushed-content.flyout--push-right.off-canvas-flyout--is-active { + transform: translate3D(20rem, 0, 0); + box-shadow: 2px 0 2px rgba(0, 0, 0, .15); +} + +#off-canvas-flyout { + transition: transform 0.125s ease, visibility 0.125s ease; + visibility: visible; + height: 100%; + width: 0; + position: fixed; + top: 0; + background-color: #686868; + display: block; + overflow: auto; +} + +#off-canvas-flyout.flyout--cover-left, #off-canvas-flyout.flyout--push-left { + right: 0; + transform: translate3D(20rem, 0, 0); +} + +#off-canvas-flyout.flyout--cover-right, #off-canvas-flyout.flyout--push-right { + left: 0; + transform: translate3D(-20rem, 0, 0); +} + +#off-canvas-flyout.off-canvas-flyout--is-animating { + width: 20rem; + z-index: 10; +} + +#off-canvas-flyout.off-canvas-flyout--is-active { + transform: translate3D(0, 0, 0); + z-index: 10; + width: 20rem; +} + +#off-canvas-mask { + height: 100%; + width: 0; + position: fixed; + z-index: 2; + top: 0; + left: 0; + background-color: rgba(255, 255, 255, 0.5); + overflow-y: auto; + overflow-x: hidden; + text-align: center; + opacity: 0; + transition: opacity 0.125s; +} + +#off-canvas-mask.off-canvas-flyout--is-active { + width: 100%; + opacity: 0.5; +} + +@media screen and (max-width: 979px) { + .has-off-canvas-flyout #ubc7-unit-menu { + display: block; + } + .has-off-canvas-flyout #ubc7-unit-menu .drawer-toggle--primary { + display: none; + } +} + +.flyout-toggle--hamburger .off-canvas-flyout, .off-canvas-flyout a, .off-canvas-flyout .dropdown-menu a { + /* Alter CLF Navigation markup to work vertically */ + color: #fff; +} + +.off-canvas-flyout .flyout__close { + background-color: #686868; + border-top: 1px solid #414141; + border-bottom: none; + border-left: none; + border-right: none; + color: #fff; + padding: 18px; + display: block; + position: relative; + text-transform: uppercase; + text-align: right; + width: 100%; +} + +.off-canvas-flyout .flyout__close:hover { + background-color: #4f4f4f; +} + +.off-canvas-flyout .flyout__close:focus { + background-color: #424242; +} + +.off-canvas-flyout a { + border-top-style: solid; + border-top-width: 1px; + border-color: #414141; + box-shadow: none; + box-sizing: border-box; + padding: 18px; + padding-right: 0; + text-decoration: none; +} + +.off-canvas-flyout a:hover { + color: #fff; + border-color: #414141; +} + +.off-canvas-flyout .nav > li > a:focus, .off-canvas-flyout .nav > li > a:hover, .off-canvas-flyout .btn-group:hover > .btn, .off-canvas-flyout .btn-group > a:focus { + background-color: #4f4f4f; +} + +.off-canvas-flyout .btn-group { + width: 100%; +} + +.off-canvas-flyout .btn-group .dropdown-toggle { + z-index: 2; + float: none; + position: absolute; + right: 0; + top: 0; + height: 55px; + box-shadow: none; +} + +.off-canvas-flyout .btn-group .dropdown-toggle:hover:after, .off-canvas-flyout .btn-group .dropdown-toggle:focus:after { + color: #fff; +} + +.off-canvas-flyout .btn-group .dropdown-toggle span { + transition: all 0.3s ease; +} + +.off-canvas-flyout .btn-group .dropdown-toggle:hover span { + transform: rotate(90deg); +} + +.off-canvas-flyout .btn-group .dropdown-menu { + border: none; + width: 100%; + margin-top: 0; +} + +.off-canvas-flyout .btn-group .dropdown-menu li { + border-bottom: none; +} + +.off-canvas-flyout .btn-group .dropdown-menu a { + background-color: #828282; + padding-top: 18px; + padding-bottom: 18px; +} + +.off-canvas-flyout .btn-group > a { + width: 100%; + z-index: 1; +} + +.off-canvas-flyout .btn-group > .btn { + background-color: #686868; + border-left: none; + border-right: none; + border-bottom: none; + border-color: #414141; + line-height: 18px; + box-shadow: none !important; + background-image: none; + text-align: left; +} + +.off-canvas-flyout .btn-group:hover > .dropdown-toggle { + background-color: #424242; +} + +.off-canvas-flyout .btn-group.open span { + transform: rotate(90deg); + transition: all 0.3s ease; +} + +.off-canvas-flyout .btn-group.open .btn.dropdown-toggle { + background-color: #4f4f4f; + border-color: #4f4f4f; +} + +.off-canvas-flyout .btn-group.open > .dropdown-menu { + display: block; + position: relative; +} + +.off-canvas-flyout button:focus { + outline: 0; +} + +.off-canvas-flyout .ubc7-arrow { + background-position: -1113px -227px !important; +} + +#flyout-button .icon-bar { + display:block; + width:18px; + height:2px; + background-color:#fff; + -webkit-border-radius:1px; + -moz-border-radius:1px; + border-radius:1px; + -webkit-box-shadow:0 1px 0 rgba(0,0,0,0.25); + -moz-box-shadow:0 1px 0 rgba(0,0,0,0.25); + box-shadow:0 1px 0 rgba(0,0,0,0.25) +} + +#flyout-button .icon-bar+.icon-bar { + margin-top:3px +} + +#flyout-button .hamburger__elem { + display: inline-block; + margin-left: 5px; + text-transform: uppercase; +} From a6f5ad7064b6be556d122ac50986589c395fc8cd Mon Sep 17 00:00:00 2001 From: Darko Hrgovic Date: Fri, 22 Jun 2018 09:59:38 -0700 Subject: [PATCH 19/42] Add off.canvas.flyout.css --- css/off.canvas.flyout.css | 1 + 1 file changed, 1 insertion(+) create mode 100644 css/off.canvas.flyout.css diff --git a/css/off.canvas.flyout.css b/css/off.canvas.flyout.css new file mode 100644 index 0000000..fbe8ee6 --- /dev/null +++ b/css/off.canvas.flyout.css @@ -0,0 +1 @@ +#flyout-button{position:fixed;top:50vh;right:-30px;color:#fff;border:none;background-color:#7C1F3D;font-family:Arial,Sans-Serif;padding:10px;font-size:14px;outline:0;transform:rotate(90deg);z-index:999}#flyout-button:hover{background-color:#002145;color:#fff}#flyout-button:hover .icon-bar{background-color:#fff}.flyout-toggle--hamburger{background-color:#fff;box-shadow:1px 1px 1px #191938;-webkit-box-shadow:1px 1px 1px #191938;float:right;height:24px;padding:11px 0 0 13px;width:32px}.flyout-toggle--hamburger:hover{box-shadow:1px 1px 1px #191938;-webkit-box-shadow:inset 1px 1px 1px #191938;-moz-box-shadow:1px 1px 1px #191938}.flyout-toggle--hamburger span{margin-top:3px;display:block;width:18px;height:2px;background-color:#002145;box-shadow:0 1px 0 rgba(0,0,0,.25)}.flyout-toggle--hamburger span:first-child{margin-top:0}@media screen and (min-width:998px){.flyout-toggle--hamburger{display:block;margin-top:2px;margin-right:13px;margin-bottom:3px}}@media screen and (min-width:1200px){.flyout-toggle--hamburger{margin-top:5px;margin-right:17px;margin-bottom:5px}#flyout-button{line-height:1.75em}}#pushed-content{position:relative;z-index:1;display:block;transition:transform 125ms ease}#pushed-content.flyout--push-left.off-canvas-flyout--is-active{transform:translate3D(-20rem,0,0);box-shadow:2px 0 2px rgba(0,0,0,.15)}#pushed-content.flyout--push-right.off-canvas-flyout--is-active{transform:translate3D(20rem,0,0);box-shadow:2px 0 2px rgba(0,0,0,.15)}#off-canvas-flyout{transition:transform 125ms ease,visibility 125ms ease;visibility:visible;height:100%;width:0;position:fixed;top:0;background-color:#686868;display:block;overflow:auto}#off-canvas-flyout.flyout--cover-left,#off-canvas-flyout.flyout--push-left{right:0;transform:translate3D(20rem,0,0)}#off-canvas-flyout.flyout--cover-right,#off-canvas-flyout.flyout--push-right{left:0;transform:translate3D(-20rem,0,0)}#off-canvas-flyout.off-canvas-flyout--is-animating{width:20rem;z-index:10}#off-canvas-flyout.off-canvas-flyout--is-active{transform:translate3D(0,0,0);z-index:10;width:20rem}#off-canvas-mask{height:100%;width:0;position:fixed;z-index:2;top:0;left:0;background-color:rgba(255,255,255,.5);overflow-y:auto;overflow-x:hidden;text-align:center;opacity:0;transition:opacity 125ms}#off-canvas-mask.off-canvas-flyout--is-active{width:100%;opacity:.5}@media screen and (max-width:979px){.has-off-canvas-flyout #ubc7-unit-menu{display:block}.has-off-canvas-flyout #ubc7-unit-menu .drawer-toggle--primary{display:none}}.flyout-toggle--hamburger .off-canvas-flyout,.off-canvas-flyout .dropdown-menu a,.off-canvas-flyout a{color:#fff}.off-canvas-flyout .flyout__close{background-color:#686868;border-top:1px solid #414141;border-bottom:none;border-left:none;border-right:none;color:#fff;padding:18px;display:block;position:relative;text-transform:uppercase;text-align:right;width:100%}.off-canvas-flyout .flyout__close:hover{background-color:#4f4f4f}.off-canvas-flyout .flyout__close:focus{background-color:#424242}.off-canvas-flyout a{border-top-style:solid;border-top-width:1px;border-color:#414141;box-shadow:none;box-sizing:border-box;padding:18px;padding-right:0;text-decoration:none}.off-canvas-flyout a:hover{color:#fff;border-color:#414141}.off-canvas-flyout .btn-group:hover>.btn,.off-canvas-flyout .btn-group>a:focus,.off-canvas-flyout .nav>li>a:focus,.off-canvas-flyout .nav>li>a:hover{background-color:#4f4f4f}.off-canvas-flyout .btn-group{width:100%}.off-canvas-flyout .btn-group .dropdown-toggle{z-index:2;float:none;position:absolute;right:0;top:0;height:55px;box-shadow:none}.off-canvas-flyout .btn-group .dropdown-toggle:focus:after,.off-canvas-flyout .btn-group .dropdown-toggle:hover:after{color:#fff}.off-canvas-flyout .btn-group .dropdown-toggle span{transition:all .3s ease}.off-canvas-flyout .btn-group .dropdown-toggle:hover span{transform:rotate(90deg)}.off-canvas-flyout .btn-group .dropdown-menu{border:none;width:100%;margin-top:0}.off-canvas-flyout .btn-group .dropdown-menu li{border-bottom:none}.off-canvas-flyout .btn-group .dropdown-menu a{background-color:#828282;padding-top:18px;padding-bottom:18px}.off-canvas-flyout .btn-group>a{width:100%;z-index:1}.off-canvas-flyout .btn-group>.btn{background-color:#686868;border-left:none;border-right:none;border-bottom:none;border-color:#414141;line-height:18px;box-shadow:none!important;background-image:none;text-align:left}.off-canvas-flyout .btn-group:hover>.dropdown-toggle{background-color:#424242}.off-canvas-flyout .btn-group.open span{transform:rotate(90deg);transition:all .3s ease}.off-canvas-flyout .btn-group.open .btn.dropdown-toggle{background-color:#4f4f4f;border-color:#4f4f4f}.off-canvas-flyout .btn-group.open>.dropdown-menu{display:block;position:relative}.off-canvas-flyout button:focus{outline:0}.off-canvas-flyout .ubc7-arrow{background-position:-1113px -227px!important}#flyout-button .icon-bar{display:block;width:18px;height:2px;background-color:#fff;-webkit-border-radius:1px;-moz-border-radius:1px;border-radius:1px;-webkit-box-shadow:0 1px 0 rgba(0,0,0,.25);-moz-box-shadow:0 1px 0 rgba(0,0,0,.25);box-shadow:0 1px 0 rgba(0,0,0,.25)}#flyout-button .icon-bar+.icon-bar{margin-top:3px}#flyout-button .hamburger__elem{display:inline-block;margin-left:5px;text-transform:uppercase} \ No newline at end of file From 425581653124e953ad27be00159ba199dcc3e562 Mon Sep 17 00:00:00 2001 From: Darko Hrgovic Date: Fri, 22 Jun 2018 11:25:52 -0700 Subject: [PATCH 20/42] Fixed conflict with both drawer and flyout using $container_attributes by creating a separate containing div for the flyout --- css/off.canvas.flyout.css | 2 +- js/off.canvas.flyout.js | 6 +++--- less/off.canvas.flyout.less | 14 +++++++------- templates/page/page.tpl.php | 13 ++++++++++--- 4 files changed, 21 insertions(+), 14 deletions(-) diff --git a/css/off.canvas.flyout.css b/css/off.canvas.flyout.css index fbe8ee6..f51194d 100644 --- a/css/off.canvas.flyout.css +++ b/css/off.canvas.flyout.css @@ -1 +1 @@ -#flyout-button{position:fixed;top:50vh;right:-30px;color:#fff;border:none;background-color:#7C1F3D;font-family:Arial,Sans-Serif;padding:10px;font-size:14px;outline:0;transform:rotate(90deg);z-index:999}#flyout-button:hover{background-color:#002145;color:#fff}#flyout-button:hover .icon-bar{background-color:#fff}.flyout-toggle--hamburger{background-color:#fff;box-shadow:1px 1px 1px #191938;-webkit-box-shadow:1px 1px 1px #191938;float:right;height:24px;padding:11px 0 0 13px;width:32px}.flyout-toggle--hamburger:hover{box-shadow:1px 1px 1px #191938;-webkit-box-shadow:inset 1px 1px 1px #191938;-moz-box-shadow:1px 1px 1px #191938}.flyout-toggle--hamburger span{margin-top:3px;display:block;width:18px;height:2px;background-color:#002145;box-shadow:0 1px 0 rgba(0,0,0,.25)}.flyout-toggle--hamburger span:first-child{margin-top:0}@media screen and (min-width:998px){.flyout-toggle--hamburger{display:block;margin-top:2px;margin-right:13px;margin-bottom:3px}}@media screen and (min-width:1200px){.flyout-toggle--hamburger{margin-top:5px;margin-right:17px;margin-bottom:5px}#flyout-button{line-height:1.75em}}#pushed-content{position:relative;z-index:1;display:block;transition:transform 125ms ease}#pushed-content.flyout--push-left.off-canvas-flyout--is-active{transform:translate3D(-20rem,0,0);box-shadow:2px 0 2px rgba(0,0,0,.15)}#pushed-content.flyout--push-right.off-canvas-flyout--is-active{transform:translate3D(20rem,0,0);box-shadow:2px 0 2px rgba(0,0,0,.15)}#off-canvas-flyout{transition:transform 125ms ease,visibility 125ms ease;visibility:visible;height:100%;width:0;position:fixed;top:0;background-color:#686868;display:block;overflow:auto}#off-canvas-flyout.flyout--cover-left,#off-canvas-flyout.flyout--push-left{right:0;transform:translate3D(20rem,0,0)}#off-canvas-flyout.flyout--cover-right,#off-canvas-flyout.flyout--push-right{left:0;transform:translate3D(-20rem,0,0)}#off-canvas-flyout.off-canvas-flyout--is-animating{width:20rem;z-index:10}#off-canvas-flyout.off-canvas-flyout--is-active{transform:translate3D(0,0,0);z-index:10;width:20rem}#off-canvas-mask{height:100%;width:0;position:fixed;z-index:2;top:0;left:0;background-color:rgba(255,255,255,.5);overflow-y:auto;overflow-x:hidden;text-align:center;opacity:0;transition:opacity 125ms}#off-canvas-mask.off-canvas-flyout--is-active{width:100%;opacity:.5}@media screen and (max-width:979px){.has-off-canvas-flyout #ubc7-unit-menu{display:block}.has-off-canvas-flyout #ubc7-unit-menu .drawer-toggle--primary{display:none}}.flyout-toggle--hamburger .off-canvas-flyout,.off-canvas-flyout .dropdown-menu a,.off-canvas-flyout a{color:#fff}.off-canvas-flyout .flyout__close{background-color:#686868;border-top:1px solid #414141;border-bottom:none;border-left:none;border-right:none;color:#fff;padding:18px;display:block;position:relative;text-transform:uppercase;text-align:right;width:100%}.off-canvas-flyout .flyout__close:hover{background-color:#4f4f4f}.off-canvas-flyout .flyout__close:focus{background-color:#424242}.off-canvas-flyout a{border-top-style:solid;border-top-width:1px;border-color:#414141;box-shadow:none;box-sizing:border-box;padding:18px;padding-right:0;text-decoration:none}.off-canvas-flyout a:hover{color:#fff;border-color:#414141}.off-canvas-flyout .btn-group:hover>.btn,.off-canvas-flyout .btn-group>a:focus,.off-canvas-flyout .nav>li>a:focus,.off-canvas-flyout .nav>li>a:hover{background-color:#4f4f4f}.off-canvas-flyout .btn-group{width:100%}.off-canvas-flyout .btn-group .dropdown-toggle{z-index:2;float:none;position:absolute;right:0;top:0;height:55px;box-shadow:none}.off-canvas-flyout .btn-group .dropdown-toggle:focus:after,.off-canvas-flyout .btn-group .dropdown-toggle:hover:after{color:#fff}.off-canvas-flyout .btn-group .dropdown-toggle span{transition:all .3s ease}.off-canvas-flyout .btn-group .dropdown-toggle:hover span{transform:rotate(90deg)}.off-canvas-flyout .btn-group .dropdown-menu{border:none;width:100%;margin-top:0}.off-canvas-flyout .btn-group .dropdown-menu li{border-bottom:none}.off-canvas-flyout .btn-group .dropdown-menu a{background-color:#828282;padding-top:18px;padding-bottom:18px}.off-canvas-flyout .btn-group>a{width:100%;z-index:1}.off-canvas-flyout .btn-group>.btn{background-color:#686868;border-left:none;border-right:none;border-bottom:none;border-color:#414141;line-height:18px;box-shadow:none!important;background-image:none;text-align:left}.off-canvas-flyout .btn-group:hover>.dropdown-toggle{background-color:#424242}.off-canvas-flyout .btn-group.open span{transform:rotate(90deg);transition:all .3s ease}.off-canvas-flyout .btn-group.open .btn.dropdown-toggle{background-color:#4f4f4f;border-color:#4f4f4f}.off-canvas-flyout .btn-group.open>.dropdown-menu{display:block;position:relative}.off-canvas-flyout button:focus{outline:0}.off-canvas-flyout .ubc7-arrow{background-position:-1113px -227px!important}#flyout-button .icon-bar{display:block;width:18px;height:2px;background-color:#fff;-webkit-border-radius:1px;-moz-border-radius:1px;border-radius:1px;-webkit-box-shadow:0 1px 0 rgba(0,0,0,.25);-moz-box-shadow:0 1px 0 rgba(0,0,0,.25);box-shadow:0 1px 0 rgba(0,0,0,.25)}#flyout-button .icon-bar+.icon-bar{margin-top:3px}#flyout-button .hamburger__elem{display:inline-block;margin-left:5px;text-transform:uppercase} \ No newline at end of file +#flyout-button{position:fixed;top:50vh;right:-30px;color:#fff;border:none;background-color:#7C1F3D;font-family:Arial,Sans-Serif;padding:10px;font-size:14px;outline:0;transform:rotate(90deg);z-index:9}#flyout-button:hover{background-color:#002145;color:#fff}#flyout-button:hover .icon-bar{background-color:#fff}.flyout-toggle--hamburger{background-color:#fff;box-shadow:1px 1px 1px #191938;-webkit-box-shadow:1px 1px 1px #191938;float:right;height:24px;padding:11px 0 0 13px;width:32px}.flyout-toggle--hamburger:hover{box-shadow:1px 1px 1px #191938;-webkit-box-shadow:inset 1px 1px 1px #191938;-moz-box-shadow:1px 1px 1px #191938}.flyout-toggle--hamburger span{margin-top:3px;display:block;width:18px;height:2px;background-color:#002145;box-shadow:0 1px 0 rgba(0,0,0,.25)}.flyout-toggle--hamburger span:first-child{margin-top:0}@media screen and (min-width:998px){.flyout-toggle--hamburger{display:block;margin-top:2px;margin-right:13px;margin-bottom:3px}}@media screen and (min-width:1200px){.flyout-toggle--hamburger{margin-top:5px;margin-right:17px;margin-bottom:5px}#flyout-button{line-height:1.75em}}#pushed-content-flyout{position:relative;z-index:1;display:block;transition:transform 125ms ease}#pushed-content-flyout.flyout--push-left.off-canvas-flyout--is-active{transform:translate3D(-20rem,0,0);box-shadow:2px 0 2px rgba(0,0,0,.15)}#pushed-content-flyout.flyout--push-right.off-canvas-flyout--is-active{transform:translate3D(20rem,0,0);box-shadow:2px 0 2px rgba(0,0,0,.15)}#off-canvas-flyout{transition:transform 125ms ease,visibility 125ms ease;visibility:visible;height:100%;width:0;position:fixed;top:0;background-color:#686868;display:block;overflow:auto}#off-canvas-flyout.flyout--cover-left,#off-canvas-flyout.flyout--push-left{right:0;transform:translate3D(20rem,0,0)}#off-canvas-flyout.flyout--cover-right,#off-canvas-flyout.flyout--push-right{left:0;transform:translate3D(-20rem,0,0)}#off-canvas-flyout.off-canvas-flyout--is-animating{width:20rem;z-index:10}#off-canvas-flyout.off-canvas-flyout--is-active{transform:translate3D(0,0,0);z-index:10;width:20rem}#off-canvas-mask-flyout{height:100%;width:0;position:fixed;z-index:2;top:0;left:0;background-color:rgba(255,255,255,.5);overflow-y:auto;overflow-x:hidden;text-align:center;opacity:0;transition:opacity 125ms}#off-canvas-mask-flyout.off-canvas-flyout--is-active{width:100%;opacity:.5}@media screen and (max-width:979px){.has-off-canvas-flyout #ubc7-unit-menu{display:block}.has-off-canvas-flyout #ubc7-unit-menu .drawer-toggle--primary{display:none}}.flyout-toggle--hamburger .off-canvas-flyout,.off-canvas-flyout .dropdown-menu a,.off-canvas-flyout a{color:#fff}.off-canvas-flyout .flyout__close{background-color:#686868;border-top:1px solid #414141;border-bottom:none;border-left:none;border-right:none;color:#fff;padding:60px 18px 18px;display:block;position:relative;text-transform:uppercase;text-align:right;width:100%}.off-canvas-flyout .flyout__close:hover{background-color:#4f4f4f}.off-canvas-flyout .flyout__close:focus{background-color:#424242}.off-canvas-flyout a{border-top-style:solid;border-top-width:1px;border-color:#414141;box-shadow:none;box-sizing:border-box;padding:18px;padding-right:0;text-decoration:none}.off-canvas-flyout a:hover{color:#fff;border-color:#414141}.off-canvas-flyout .btn-group:hover>.btn,.off-canvas-flyout .btn-group>a:focus,.off-canvas-flyout .nav>li>a:focus,.off-canvas-flyout .nav>li>a:hover{background-color:#4f4f4f}.off-canvas-flyout .btn-group{width:100%}.off-canvas-flyout .btn-group .dropdown-toggle{z-index:2;float:none;position:absolute;right:0;top:0;height:55px;box-shadow:none}.off-canvas-flyout .btn-group .dropdown-toggle:focus:after,.off-canvas-flyout .btn-group .dropdown-toggle:hover:after{color:#fff}.off-canvas-flyout .btn-group .dropdown-toggle span{transition:all .3s ease}.off-canvas-flyout .btn-group .dropdown-toggle:hover span{transform:rotate(90deg)}.off-canvas-flyout .btn-group .dropdown-menu{border:none;width:100%;margin-top:0}.off-canvas-flyout .btn-group .dropdown-menu li{border-bottom:none}.off-canvas-flyout .btn-group .dropdown-menu a{background-color:#828282;padding-top:18px;padding-bottom:18px}.off-canvas-flyout .btn-group>a{width:100%;z-index:1}.off-canvas-flyout .btn-group>.btn{background-color:#686868;border-left:none;border-right:none;border-bottom:none;border-color:#414141;line-height:18px;box-shadow:none!important;background-image:none;text-align:left}.off-canvas-flyout .btn-group:hover>.dropdown-toggle{background-color:#424242}.off-canvas-flyout .btn-group.open span{transform:rotate(90deg);transition:all .3s ease}.off-canvas-flyout .btn-group.open .btn.dropdown-toggle{background-color:#4f4f4f;border-color:#4f4f4f}.off-canvas-flyout .btn-group.open>.dropdown-menu{display:block;position:relative}.off-canvas-flyout button:focus{outline:0}.off-canvas-flyout .ubc7-arrow{background-position:-1113px -227px!important}#flyout-button .icon-bar{display:block;width:18px;height:2px;background-color:#fff;-webkit-border-radius:1px;-moz-border-radius:1px;border-radius:1px;-webkit-box-shadow:0 1px 0 rgba(0,0,0,.25);-moz-box-shadow:0 1px 0 rgba(0,0,0,.25);box-shadow:0 1px 0 rgba(0,0,0,.25)}#flyout-button .icon-bar+.icon-bar{margin-top:3px}#flyout-button .hamburger__elem{display:inline-block;margin-left:5px;text-transform:uppercase} \ No newline at end of file diff --git a/js/off.canvas.flyout.js b/js/off.canvas.flyout.js index 252640d..7d1bcc8 100644 --- a/js/off.canvas.flyout.js +++ b/js/off.canvas.flyout.js @@ -1,13 +1,13 @@ (function () { - Drupal.behaviors.clfFlyout = { + Drupal.behaviors.megatronFlyout = { attach: function (context, settings) { // Primary flyout toggle. if (document.getElementsByClassName("flyout-toggle").length > 0) { var pushTrigger = document.getElementsByClassName("flyout-toggle"); var pushPanel = document.getElementById("off-canvas-flyout"); - var pushContent = document.getElementById("pushed-content"); - var pushMask = document.getElementById("off-canvas-mask"); + var pushContent = document.getElementById("pushed-content-flyout"); + var pushMask = document.getElementById("off-canvas-mask-flyout"); var activeClass = "off-canvas-flyout--is-active"; var animatingClass = "off-canvas-flyout--is-animating"; var i; diff --git a/less/off.canvas.flyout.less b/less/off.canvas.flyout.less index 234ec3e..8ade132 100644 --- a/less/off.canvas.flyout.less +++ b/less/off.canvas.flyout.less @@ -10,7 +10,7 @@ font-size:14px; outline: 0; transform: rotate(90deg); - z-index: 999; + z-index: 9; } #flyout-button:hover { @@ -71,19 +71,19 @@ } } -#pushed-content { +#pushed-content-flyout { position: relative; z-index: 1; display: block; transition: transform 0.125s ease; } -#pushed-content.flyout--push-left.off-canvas-flyout--is-active { +#pushed-content-flyout.flyout--push-left.off-canvas-flyout--is-active { transform: translate3D(-20rem, 0, 0); box-shadow: 2px 0 2px rgba(0, 0, 0, .15); } -#pushed-content.flyout--push-right.off-canvas-flyout--is-active { +#pushed-content-flyout.flyout--push-right.off-canvas-flyout--is-active { transform: translate3D(20rem, 0, 0); box-shadow: 2px 0 2px rgba(0, 0, 0, .15); } @@ -121,7 +121,7 @@ width: 20rem; } -#off-canvas-mask { +#off-canvas-mask-flyout { height: 100%; width: 0; position: fixed; @@ -136,7 +136,7 @@ transition: opacity 0.125s; } -#off-canvas-mask.off-canvas-flyout--is-active { +#off-canvas-mask-flyout.off-canvas-flyout--is-active { width: 100%; opacity: 0.5; } @@ -162,7 +162,7 @@ border-left: none; border-right: none; color: #fff; - padding: 18px; + padding: 60px 18px 18px; display: block; position: relative; text-transform: uppercase; diff --git a/templates/page/page.tpl.php b/templates/page/page.tpl.php index 91b3b13..2fc99c5 100755 --- a/templates/page/page.tpl.php +++ b/templates/page/page.tpl.php @@ -64,6 +64,12 @@ $container_attributes['id'] = 'pushed-content'; $container_attributes['class'][] = $drawer_region; } + +if ($flyout_enabled) { + $flyout_container_attributes['id'] = 'pushed-content-flyout'; + $flyout_container_attributes['class'][] = $flyout_region; +} + ?> > + >
-
@@ -288,9 +295,9 @@
- +
-
+
From 07675fea6b66d812008817edbacd31cb1620e1b4 Mon Sep 17 00:00:00 2001 From: Darko Hrgovic Date: Fri, 22 Jun 2018 12:32:53 -0700 Subject: [PATCH 21/42] Fixed issue with primary nav not hiding when used in drawer and issue where secondary menu was not expanding on click --- css/off.canvas.drawer.css | 264 +---------------- js/off.canvas.drawer.js | 3 + less/off.canvas.drawer.less | 559 +++++++++++++++++++----------------- template.php | 8 + templates/page/page.tpl.php | 22 +- 5 files changed, 315 insertions(+), 541 deletions(-) diff --git a/css/off.canvas.drawer.css b/css/off.canvas.drawer.css index 5f08d03..1ca8bee 100644 --- a/css/off.canvas.drawer.css +++ b/css/off.canvas.drawer.css @@ -1,263 +1 @@ -#drawer-button { - float:right; - margin-right:17px; - color:#000; - border:none; - background-color:rgba(0, 0, 0, 0); - font-family: Arial,Sans-Serif; - padding:10px; - font-size:14px; - outline: 0; -} - -#drawer-button:hover { - background-color: #002145; - color: #fff; -} -#drawer-button:hover .icon-bar { - background-color: #f5f5f5; -} - -.drawer-toggle--hamburger { - background-color: #fff; - box-shadow: 1px 1px 1px #191938; - -webkit-box-shadow: 1px 1px 1px #191938; - float: right; - height: 24px; - padding: 11px 0 0 13px; - width: 32px; -} - -.drawer-toggle--hamburger:hover { - box-shadow: 1px 1px 1px #191938; - -webkit-box-shadow: inset 1px 1px 1px #191938; - -moz-box-shadow: 1px 1px 1px #191938; -} - -.drawer-toggle--hamburger span { - margin-top: 3px; - display: block; - width: 18px; - height: 2px; - background-color: #002145; - box-shadow: 0 1px 0 rgba(0,0,0,.25); -} - -.drawer-toggle--hamburger span:first-child { - margin-top: 0; -} - -@media screen and (min-width:998px) { - .drawer-toggle--hamburger { - display: block; - margin-top: 2px; - margin-right: 13px; - margin-bottom: 3px; - } -} - -@media screen and (min-width:1200px) { - .drawer-toggle--hamburger { - margin-top: 5px; - margin-right: 17px; - margin-bottom: 5px; - } - #drawer-button { - line-height: 1.75em; - } -} - -#pushed-content { - position: relative; - z-index: 1; - display: block; - transition: transform 0.125s ease; -} -#pushed-content.drawer--push-left.off-canvas-drawer--is-active { - transform: translate3D(-20rem, 0, 0); - box-shadow: 2px 0 2px rgba(0, 0, 0, .15); -} -#pushed-content.drawer--push-right.off-canvas-drawer--is-active { - transform: translate3D(20rem, 0, 0); - box-shadow: 2px 0 2px rgba(0, 0, 0, .15); -} -#off-canvas-drawer--primary { - transition: transform 0.125s ease, visibility 0.125s ease; - visibility: visible; - height: 100%; - width: 0; - position: fixed; - top: 0; - background-color: #686868; - display: block; - overflow: auto; -} -#off-canvas-drawer--primary.drawer--cover-left, #off-canvas-drawer--primary.drawer--push-left { - right: 0; - transform: translate3D(20rem, 0, 0); -} -#off-canvas-drawer--primary.drawer--cover-right, #off-canvas-drawer--primary.drawer--push-right { - left: 0; - transform: translate3D(-20rem, 0, 0); -} -#off-canvas-drawer--primary.off-canvas-drawer--is-animating { - width: 20rem; - z-index: 10; -} -#off-canvas-drawer--primary.off-canvas-drawer--is-active { - transform: translate3D(0, 0, 0); - z-index: 10; - width: 20rem; -} -#off-canvas-mask { - height: 100%; - width: 0; - position: fixed; - z-index: 2; - top: 0; - left: 0; - background-color: rgba(255, 255, 255, 0.5); - overflow-y: auto; - overflow-x: hidden; - text-align: center; - opacity: 0; - transition: opacity 0.125s; -} -#off-canvas-mask.off-canvas-drawer--is-active { - width: 100%; - opacity: 0.5; -} -@media screen and (max-width: 979px) { - .has-off-canvas-drawer #ubc7-unit-menu { - display: none; - } -} -.drawer-toggle--hamburger .off-canvas-drawer, .off-canvas-drawer a, .off-canvas-drawer .dropdown-menu a { - /* Alter CLF Navigation markup to work vertically */ - color: #fff; -} -.off-canvas-drawer .drawer__close { - background-color: #686868; - border-top: 1px solid #414141; - border-bottom: none; - border-left: none; - border-right: none; - color: #fff; - padding: 18px; - display: block; - position: relative; - text-transform: uppercase; - text-align: right; - width: 100%; -} -.off-canvas-drawer .drawer__close:hover { - background-color: #4f4f4f; -} -.off-canvas-drawer .drawer__close:focus { - background-color: #424242; -} -.off-canvas-drawer a { - border-top-style: solid; - border-top-width: 1px; - border-color: #414141; - box-shadow: none; - box-sizing: border-box; - padding: 18px; - padding-right: 0; - text-decoration: none; -} -.off-canvas-drawer a:hover { - color: #fff; - border-color: #414141; -} -.off-canvas-drawer .nav > li > a:focus, .off-canvas-drawer .nav > li > a:hover, .off-canvas-drawer .btn-group:hover > .btn, .off-canvas-drawer .btn-group > a:focus { - background-color: #4f4f4f; -} -.off-canvas-drawer .btn-group { - width: 100%; -} -.off-canvas-drawer .btn-group .dropdown-toggle { - z-index: 2; - float: none; - position: absolute; - right: 0; - top: 0; - height: 55px; - box-shadow: none; -} -.off-canvas-drawer .btn-group .dropdown-toggle:hover:after, .off-canvas-drawer .btn-group .dropdown-toggle:focus:after { - color: #fff; -} -.off-canvas-drawer .btn-group .dropdown-toggle span { - transition: all 0.3s ease; -} -.off-canvas-drawer .btn-group .dropdown-toggle:hover span { - transform: rotate(90deg); -} -.off-canvas-drawer .btn-group .dropdown-menu { - border: none; - width: 100%; - margin-top: 0; -} -.off-canvas-drawer .btn-group .dropdown-menu li { - border-bottom: none; -} -.off-canvas-drawer .btn-group .dropdown-menu a { - background-color: #828282; - padding-top: 18px; - padding-bottom: 18px; -} -.off-canvas-drawer .btn-group > a { - width: 100%; - z-index: 1; -} -.off-canvas-drawer .btn-group > .btn { - background-color: #686868; - border-left: none; - border-right: none; - border-bottom: none; - border-color: #414141; - line-height: 18px; - box-shadow: none !important; - background-image: none; - text-align: left; -} -.off-canvas-drawer .btn-group:hover > .dropdown-toggle { - background-color: #424242; -} -.off-canvas-drawer .btn-group.open span { - transform: rotate(90deg); - transition: all 0.3s ease; -} -.off-canvas-drawer .btn-group.open .btn.dropdown-toggle { - background-color: #4f4f4f; - border-color: #4f4f4f; -} -.off-canvas-drawer .btn-group.open > .dropdown-menu { - display: block; - position: relative; -} -.off-canvas-drawer button:focus { - outline: 0; -} -.off-canvas-drawer .ubc7-arrow { - background-position: -1113px -227px !important; -} -#drawer-button .icon-bar { - display:block; - width:18px; - height:2px; - background-color:#000; - -webkit-border-radius:1px; - -moz-border-radius:1px; - border-radius:1px; - -webkit-box-shadow:0 1px 0 rgba(0,0,0,0.25); - -moz-box-shadow:0 1px 0 rgba(0,0,0,0.25); - box-shadow:0 1px 0 rgba(0,0,0,0.25) -} -#drawer-button .icon-bar+.icon-bar { - margin-top:3px -} -#drawer-button .hamburger__elem { - display: inline-block; -} +body.drawer-contains-primary-nav #ubc7-unit-navigation.collapse{display:none}#drawer-button{float:right;margin-right:17px;color:#000;border:none;background-color:rgba(0,0,0,0);font-family:Arial,Sans-Serif;padding:10px;font-size:14px;outline:0}#drawer-button:hover{background-color:#002145;color:#fff}#drawer-button:hover .icon-bar{background-color:#f5f5f5}#drawer-button .icon-bar{display:block;width:18px;height:2px;margin-top:2px;background-color:#000;-webkit-border-radius:1px;-moz-border-radius:1px;border-radius:1px;-webkit-box-shadow:0 1px 0 rgba(0,0,0,.25);-moz-box-shadow:0 1px 0 rgba(0,0,0,.25);box-shadow:0 1px 0 rgba(0,0,0,.25)}.icon-bar#drawer-button+.icon-bar{margin-top:3px}#drawer-button .hamburger__elem{display:inline-block}.drawer-toggle--hamburger{background-color:#fff;box-shadow:1px 1px 1px #191938;-webkit-box-shadow:1px 1px 1px #191938;float:right;height:24px;padding:11px 0 0 13px;width:32px}.drawer-toggle--hamburger:hover{box-shadow:1px 1px 1px #191938;-webkit-box-shadow:inset 1px 1px 1px #191938;-moz-box-shadow:1px 1px 1px #191938}.drawer-toggle--hamburger span{margin-top:3px;display:block;width:18px;height:2px;background-color:#002145;box-shadow:0 1px 0 rgba(0,0,0,.25)}.drawer-toggle--hamburger span:first-child{margin-top:0}.drawer-toggle--hamburger .off-canvas-drawer{color:#fff}#pushed-content{position:relative;z-index:1;display:block;transition:transform 125ms ease}#pushed-content.drawer--push-left.off-canvas-drawer--is-active{transform:translate3D(-20rem,0,0);box-shadow:2px 0 2px rgba(0,0,0,.15)}#pushed-content.drawer--push-right.off-canvas-drawer--is-active{transform:translate3D(20rem,0,0);box-shadow:2px 0 2px rgba(0,0,0,.15)}#off-canvas-drawer--primary{transition:transform 125ms ease,visibility 125ms ease;visibility:visible;height:100%;width:0;position:fixed;top:0;background-color:#686868;display:block;overflow:auto}#off-canvas-drawer--primary.drawer--cover-left{right:0;transform:translate3D(20rem,0,0)}#off-canvas-drawer--primary.drawer--push-left{right:0;transform:translate3D(20rem,0,0)}#off-canvas-drawer--primary.drawer--cover-right{left:0;transform:translate3D(-20rem,0,0)}#off-canvas-drawer--primary.drawer--push-right{left:0;transform:translate3D(-20rem,0,0)}#off-canvas-drawer--primary.off-canvas-drawer--is-animating{width:20rem;z-index:10}#off-canvas-drawer--primary.off-canvas-drawer--is-active{transform:translate3D(0,0,0);z-index:10;width:20rem}#off-canvas-mask{height:100%;width:0;position:fixed;z-index:2;top:0;left:0;background-color:rgba(255,255,255,.5);overflow-y:auto;overflow-x:hidden;text-align:center;opacity:0;transition:opacity 125ms}#off-canvas-mask.off-canvas-drawer--is-active{width:100%;opacity:.5}.off-canvas-drawer a{color:#fff;border-top-style:solid;border-top-width:1px;border-color:#414141;box-shadow:none;box-sizing:border-box;padding:18px;padding-right:0;text-decoration:none}.off-canvas-drawer a:hover{color:#fff;border-color:#414141}.off-canvas-drawer .dropdown-menu a{color:#fff}.off-canvas-drawer .drawer__close{background-color:#686868;border-top:1px solid #414141;border-bottom:none;border-left:none;border-right:none;color:#fff;padding:18px;display:block;position:relative;text-transform:uppercase;text-align:right;width:100%}.off-canvas-drawer .drawer__close:hover{background-color:#4f4f4f}.off-canvas-drawer .drawer__close:focus{background-color:#424242}.off-canvas-drawer .nav>li>a:focus{background-color:#4f4f4f}.off-canvas-drawer .nav>li>a:hover{background-color:#4f4f4f}.off-canvas-drawer .btn-group{width:100%}.off-canvas-drawer .btn-group:hover>.btn{background-color:#4f4f4f}.off-canvas-drawer .btn-group:hover>.dropdown-toggle{background-color:#424242}.off-canvas-drawer .btn-group>a{width:100%;z-index:1}.off-canvas-drawer .btn-group>a:focus{background-color:#4f4f4f}.off-canvas-drawer .btn-group .dropdown-toggle{z-index:2;float:none;position:absolute;right:0;top:0;height:55px;box-shadow:none}.off-canvas-drawer .btn-group .dropdown-toggle:hover:after{color:#fff}.off-canvas-drawer .btn-group .dropdown-toggle:hover span{transform:rotate(90deg)}.off-canvas-drawer .btn-group .dropdown-toggle:focus:after{color:#fff}.off-canvas-drawer .btn-group .dropdown-toggle span{transition:all .3s ease}.off-canvas-drawer .btn-group .dropdown-menu{border:none;width:100%;margin-top:0}.off-canvas-drawer .btn-group .dropdown-menu li{border-bottom:none}.off-canvas-drawer .btn-group .dropdown-menu a{background-color:#828282;padding-top:18px;padding-bottom:18px}.off-canvas-drawer .btn-group>.btn{background-color:#686868;border-left:none;border-right:none;border-bottom:none;border-color:#414141;line-height:18px;box-shadow:none!important;background-image:none;text-align:left}.off-canvas-drawer .btn-group.open span{transform:rotate(90deg);transition:all .3s ease}.off-canvas-drawer .btn-group.open .btn.dropdown-toggle{background-color:#4f4f4f;border-color:#4f4f4f}.off-canvas-drawer .btn-group.open>.dropdown-menu{display:block;position:relative}.off-canvas-drawer button:focus{outline:0}.off-canvas-drawer .ubc7-arrow{background-position:-1113px -227px!important}@media screen and (min-width:998px){.drawer-toggle--hamburger{display:block;margin-top:2px;margin-right:13px;margin-bottom:3px}}@media screen and (min-width:1200px){.drawer-toggle--hamburger{margin-top:5px;margin-right:17px;margin-bottom:5px}#drawer-button{line-height:1.75em}}@media screen and (max-width:979px){.has-off-canvas-drawer #ubc7-unit-menu{display:none}}/*# sourceMappingURL=off.canvas.drawer.css.map */ \ No newline at end of file diff --git a/js/off.canvas.drawer.js b/js/off.canvas.drawer.js index 516bacd..d5fe70b 100644 --- a/js/off.canvas.drawer.js +++ b/js/off.canvas.drawer.js @@ -11,6 +11,9 @@ var animatingClass = "off-canvas-drawer--is-animating"; var i; document.body.classList.add("has-off-canvas-drawer"); + if (settings.drawerNav !== undefined) { + document.body.classList.add(settings.drawerNav.class); + } for (i = 0; i < pushTrigger.length; i++) { pushTrigger[i].addEventListener("click", function() { document.body.classList.toggle(activeClass); diff --git a/less/off.canvas.drawer.less b/less/off.canvas.drawer.less index b2511c2..1afb472 100644 --- a/less/off.canvas.drawer.less +++ b/less/off.canvas.drawer.less @@ -1,6 +1,6 @@ @primary-font-color: #000; @secondary-font-color: #fff; -@primary-font-family: Arial,Sans-Serif; +@primary-font-family: Arial, Sans-Serif; @drawer-button__background-color: rgba(0, 0, 0, 0); @drawer-button__background-color--hover: #002145; @icon-bar__background-color--hover: #f5f5f5; @@ -14,303 +14,328 @@ @drawer__border-color--darker: #414141; @drawer__border-color--dark: #4f4f4f; +body.drawer-contains-primary-nav { + #ubc7-unit-navigation.collapse { + display: none; + } +} + #drawer-button { - float: right; - margin-right: 17px; - color: @primary-font-color; - border: none; - background-color: @drawer-button__background-color; - font-family: @primary-font-family; - padding: 10px; - font-size: 14px; - outline: 0; - &:hover { - background-color: @drawer-button__background-color--hover; - color: @secondary-font-color; - .icon-bar { - background-color: @icon-bar__background-color--hover; - } - } - .icon-bar { - display: block; - width: 18px; - height: 2px; - background-color: @icon-bar__background-color; - -webkit-border-radius: 1px; - -moz-border-radius: 1px; - border-radius: 1px; - -webkit-box-shadow: 0 1px 0 rgba(0,0,0,0.25); - -moz-box-shadow: 0 1px 0 rgba(0,0,0,0.25); - box-shadow: 0 1px 0 rgba(0,0,0,0.25); - } - .icon-bar&+.icon-bar { - margin-top: 3px; - } - .hamburger__elem { - display: inline-block; - } + float: right; + margin-right: 17px; + color: @primary-font-color; + border: none; + background-color: @drawer-button__background-color; + font-family: @primary-font-family; + padding: 10px; + font-size: 14px; + outline: 0; + &:hover { + background-color: @drawer-button__background-color--hover; + color: @secondary-font-color; + .icon-bar { + background-color: @icon-bar__background-color--hover; + } + } + .icon-bar { + display: block; + width: 18px; + height: 2px; + margin-top: 2px; + background-color: @icon-bar__background-color; + -webkit-border-radius: 1px; + -moz-border-radius: 1px; + border-radius: 1px; + -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); + -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); + box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); + } + .icon-bar& + .icon-bar { + margin-top: 3px; + } + .hamburger__elem { + display: inline-block; + } } + .drawer-toggle--hamburger { - background-color: @hamburger__background-color; - box-shadow: 1px 1px 1px #191938; - -webkit-box-shadow: 1px 1px 1px #191938; - float: right; - height: 24px; - padding: 11px 0 0 13px; - width: 32px; - &:hover { - box-shadow: 1px 1px 1px #191938; - -webkit-box-shadow: inset 1px 1px 1px #191938; - -moz-box-shadow: 1px 1px 1px #191938; - } - span { - margin-top: 3px; - display: block; - width: 18px; - height: 2px; - background-color: @drawer-button__background-color--hover; - box-shadow: 0 1px 0 rgba(0,0,0,.25); - &:first-child { - margin-top: 0; - } - } - .off-canvas-drawer { - color: @secondary-font-color; - } + background-color: @hamburger__background-color; + box-shadow: 1px 1px 1px #191938; + -webkit-box-shadow: 1px 1px 1px #191938; + float: right; + height: 24px; + padding: 11px 0 0 13px; + width: 32px; + &:hover { + box-shadow: 1px 1px 1px #191938; + -webkit-box-shadow: inset 1px 1px 1px #191938; + -moz-box-shadow: 1px 1px 1px #191938; + } + span { + margin-top: 3px; + display: block; + width: 18px; + height: 2px; + background-color: @drawer-button__background-color--hover; + box-shadow: 0 1px 0 rgba(0, 0, 0, .25); + &:first-child { + margin-top: 0; + } + } + .off-canvas-drawer { + color: @secondary-font-color; + } } + #pushed-content { - position: relative; - z-index: 1; - display: block; - transition: transform 0.125s ease; + position: relative; + z-index: 1; + display: block; + transition: transform 0.125s ease; } + #pushed-content.drawer--push-left.off-canvas-drawer--is-active { - transform: translate3D(-20rem, 0, 0); - box-shadow: 2px 0 2px rgba(0, 0, 0, .15); + transform: translate3D(-20rem, 0, 0); + box-shadow: 2px 0 2px rgba(0, 0, 0, .15); } + #pushed-content.drawer--push-right.off-canvas-drawer--is-active { - transform: translate3D(20rem, 0, 0); - box-shadow: 2px 0 2px rgba(0, 0, 0, .15); + transform: translate3D(20rem, 0, 0); + box-shadow: 2px 0 2px rgba(0, 0, 0, .15); } + #off-canvas-drawer--primary { - transition: transform 0.125s ease, visibility 0.125s ease; - visibility: visible; - height: 100%; - width: 0; - position: fixed; - top: 0; - background-color: @drawer__background-color; - display: block; - overflow: auto; + transition: transform 0.125s ease, visibility 0.125s ease; + visibility: visible; + height: 100%; + width: 0; + position: fixed; + top: 0; + background-color: @drawer__background-color; + display: block; + overflow: auto; } + #off-canvas-drawer--primary.drawer--cover-left { - right: 0; - transform: translate3D(20rem, 0, 0); + right: 0; + transform: translate3D(20rem, 0, 0); } + #off-canvas-drawer--primary.drawer--push-left { - right: 0; - transform: translate3D(20rem, 0, 0); + right: 0; + transform: translate3D(20rem, 0, 0); } + #off-canvas-drawer--primary.drawer--cover-right { - left: 0; - transform: translate3D(-20rem, 0, 0); + left: 0; + transform: translate3D(-20rem, 0, 0); } + #off-canvas-drawer--primary.drawer--push-right { - left: 0; - transform: translate3D(-20rem, 0, 0); + left: 0; + transform: translate3D(-20rem, 0, 0); } + #off-canvas-drawer--primary.off-canvas-drawer--is-animating { - width: 20rem; - z-index: 10; + width: 20rem; + z-index: 10; } + #off-canvas-drawer--primary.off-canvas-drawer--is-active { - transform: translate3D(0, 0, 0); - z-index: 10; - width: 20rem; + transform: translate3D(0, 0, 0); + z-index: 10; + width: 20rem; } + #off-canvas-mask { - height: 100%; - width: 0; - position: fixed; - z-index: 2; - top: 0; - left: 0; - background-color: @off-canvas-mask__background-color; - overflow-y: auto; - overflow-x: hidden; - text-align: center; - opacity: 0; - transition: opacity 0.125s; + height: 100%; + width: 0; + position: fixed; + z-index: 2; + top: 0; + left: 0; + background-color: @off-canvas-mask__background-color; + overflow-y: auto; + overflow-x: hidden; + text-align: center; + opacity: 0; + transition: opacity 0.125s; } + #off-canvas-mask.off-canvas-drawer--is-active { - width: 100%; - opacity: 0.5; + width: 100%; + opacity: 0.5; } + .off-canvas-drawer { - a { - color: @secondary-font-color; - border-top-style: solid; - border-top-width: 1px; - border-color: @drawer__border-color--darker; - box-shadow: none; - box-sizing: border-box; - padding: 18px; - padding-right: 0; - text-decoration: none; - &:hover { - color: @secondary-font-color; - border-color: @drawer__border-color--darker; - } - } - .dropdown-menu { - a { - color: @secondary-font-color; - } - } - .drawer__close { - background-color: @drawer__background-color; - border-top: 1px solid #414141; - border-bottom: none; - border-left: none; - border-right: none; - color: @secondary-font-color; - padding: 18px; - display: block; - position: relative; - text-transform: uppercase; - text-align: right; - width: 100%; - &:hover { - background-color: @drawer__background-color--darker; - } - &:focus { - background-color: @drawer__background-color--dark; - } - } - .nav { - >li { - >a { - &:focus { - background-color: @drawer__background-color--darker; - } - &:hover { - background-color: @drawer__background-color--darker; - } - } - } - } - .btn-group { - &:hover { - >.btn { - background-color: @drawer__background-color--darker; - } - >.dropdown-toggle { - background-color: @drawer__background-color--dark; - } - } - >a { - &:focus { - background-color: @drawer__background-color--darker; - } - width: 100%; - z-index: 1; - } - width: 100%; - .dropdown-toggle { - z-index: 2; - float: none; - position: absolute; - right: 0; - top: 0; - height: 55px; - box-shadow: none; - &:hover { - &:after { - color: @secondary-font-color; - } - span { - transform: rotate(90deg); - } - } - &:focus { - &:after { - color: @secondary-font-color; - } - } - span { - transition: all 0.3s ease; - } - } - .dropdown-menu { - border: none; - width: 100%; - margin-top: 0; - li { - border-bottom: none; - } - a { - background-color: @dropdown-menu__background-color; - padding-top: 18px; - padding-bottom: 18px; - } - } - >.btn { - background-color: @drawer__background-color; - border-left: none; - border-right: none; - border-bottom: none; - border-color: @drawer__border-color--darker; - line-height: 18px; - box-shadow: none !important; - background-image: none; - text-align: left; - } - } - .btn-group.open { - span { - transform: rotate(90deg); - transition: all 0.3s ease; - } - .btn.dropdown-toggle { - background-color: @drawer__background-color--darker; - border-color: @drawer__border-color--dark; - } - >.dropdown-menu { - display: block; - position: relative; - } - } - button { - &:focus { - outline: 0; - } - } - .ubc7-arrow { - background-position: -1113px -227px !important; - } + a { + color: @secondary-font-color; + border-top-style: solid; + border-top-width: 1px; + border-color: @drawer__border-color--darker; + box-shadow: none; + box-sizing: border-box; + padding: 18px; + padding-right: 0; + text-decoration: none; + &:hover { + color: @secondary-font-color; + border-color: @drawer__border-color--darker; + } + } + .dropdown-menu { + a { + color: @secondary-font-color; + } + } + .drawer__close { + background-color: @drawer__background-color; + border-top: 1px solid #414141; + border-bottom: none; + border-left: none; + border-right: none; + color: @secondary-font-color; + padding: 18px; + display: block; + position: relative; + text-transform: uppercase; + text-align: right; + width: 100%; + &:hover { + background-color: @drawer__background-color--darker; + } + &:focus { + background-color: @drawer__background-color--dark; + } + } + .nav { + > li { + > a { + &:focus { + background-color: @drawer__background-color--darker; + } + &:hover { + background-color: @drawer__background-color--darker; + } + } + } + } + .btn-group { + &:hover { + > .btn { + background-color: @drawer__background-color--darker; + } + > .dropdown-toggle { + background-color: @drawer__background-color--dark; + } + } + > a { + &:focus { + background-color: @drawer__background-color--darker; + } + width: 100%; + z-index: 1; + } + width: 100%; + .dropdown-toggle { + z-index: 2; + float: none; + position: absolute; + right: 0; + top: 0; + height: 55px; + box-shadow: none; + &:hover { + &:after { + color: @secondary-font-color; + } + span { + transform: rotate(90deg); + } + } + &:focus { + &:after { + color: @secondary-font-color; + } + } + span { + transition: all 0.3s ease; + } + } + .dropdown-menu { + border: none; + width: 100%; + margin-top: 0; + li { + border-bottom: none; + } + a { + background-color: @dropdown-menu__background-color; + padding-top: 18px; + padding-bottom: 18px; + } + } + > .btn { + background-color: @drawer__background-color; + border-left: none; + border-right: none; + border-bottom: none; + border-color: @drawer__border-color--darker; + line-height: 18px; + box-shadow: none !important; + background-image: none; + text-align: left; + } + } + .btn-group.open { + span { + transform: rotate(90deg); + transition: all 0.3s ease; + } + .btn.dropdown-toggle { + background-color: @drawer__background-color--darker; + border-color: @drawer__border-color--dark; + } + > .dropdown-menu { + display: block; + position: relative; + } + } + button { + &:focus { + outline: 0; + } + } + .ubc7-arrow { + background-position: -1113px -227px !important; + } } -@media screen and (min-width:998px) { - .drawer-toggle--hamburger { - display: block; - margin-top: 2px; - margin-right: 13px; - margin-bottom: 3px; - } + +@media screen and (min-width: 998px) { + .drawer-toggle--hamburger { + display: block; + margin-top: 2px; + margin-right: 13px; + margin-bottom: 3px; + } } -@media screen and (min-width:1200px) { - .drawer-toggle--hamburger { - margin-top: 5px; - margin-right: 17px; - margin-bottom: 5px; - } - #drawer-button { - line-height: 1.75em; - } + +@media screen and (min-width: 1200px) { + .drawer-toggle--hamburger { + margin-top: 5px; + margin-right: 17px; + margin-bottom: 5px; + } + + #drawer-button { + line-height: 1.75em; + } } + @media screen and (max-width: 979px) { - .has-off-canvas-drawer { - #ubc7-unit-menu { - display: none; - } - } + .has-off-canvas-drawer { + #ubc7-unit-menu { + display: none; + } + } } diff --git a/template.php b/template.php index c69bb6c..2568a26 100755 --- a/template.php +++ b/template.php @@ -346,6 +346,14 @@ function megatron_preprocess_page(&$variables) { $drawer_enabled = $variables['drawer_region'] != 'default' && $variables['drawer_region'] != 'double' && $variables['drawer_region'] != 'higher'; $variables['drawer_enabled'] = $drawer_enabled; if ($variables['main_menu'] && theme_get_setting('clf_use_primary_menu_in_drawer')) { + // Tell JS we're using primary nav so we can add a body class to hide the primary nav in CSS. + $drawer_settings = array( + 'drawerNav' => array( + 'class' => 'drawer-contains-primary-nav', + ), + ); + drupal_add_js($drawer_settings, 'setting'); + // Build links. $tree = menu_tree_page_data(variable_get('menu_main_links_source', 'main-menu')); $variables['main_menu'] = megatron_menu_navigation_links($tree); diff --git a/templates/page/page.tpl.php b/templates/page/page.tpl.php index d8c5f1d..e833d2c 100755 --- a/templates/page/page.tpl.php +++ b/templates/page/page.tpl.php @@ -153,21 +153,21 @@ - - - + + + From 8020a2370615a6977a60e6bdbc1f7cd6213bb26a Mon Sep 17 00:00:00 2001 From: Darko Hrgovic Date: Fri, 22 Jun 2018 13:03:34 -0700 Subject: [PATCH 22/42] A few fixes for secondary nav behaviour when drawer and flyout are enabled --- css/off.canvas.drawer.css | 264 +---------------- css/off.canvas.flyout.css | 2 +- less/off.canvas.drawer.less | 553 +++++++++++++++++++----------------- less/off.canvas.flyout.less | 25 +- template.php | 9 + templates/page/page.tpl.php | 11 +- 6 files changed, 316 insertions(+), 548 deletions(-) diff --git a/css/off.canvas.drawer.css b/css/off.canvas.drawer.css index 5f08d03..c142f66 100644 --- a/css/off.canvas.drawer.css +++ b/css/off.canvas.drawer.css @@ -1,263 +1 @@ -#drawer-button { - float:right; - margin-right:17px; - color:#000; - border:none; - background-color:rgba(0, 0, 0, 0); - font-family: Arial,Sans-Serif; - padding:10px; - font-size:14px; - outline: 0; -} - -#drawer-button:hover { - background-color: #002145; - color: #fff; -} -#drawer-button:hover .icon-bar { - background-color: #f5f5f5; -} - -.drawer-toggle--hamburger { - background-color: #fff; - box-shadow: 1px 1px 1px #191938; - -webkit-box-shadow: 1px 1px 1px #191938; - float: right; - height: 24px; - padding: 11px 0 0 13px; - width: 32px; -} - -.drawer-toggle--hamburger:hover { - box-shadow: 1px 1px 1px #191938; - -webkit-box-shadow: inset 1px 1px 1px #191938; - -moz-box-shadow: 1px 1px 1px #191938; -} - -.drawer-toggle--hamburger span { - margin-top: 3px; - display: block; - width: 18px; - height: 2px; - background-color: #002145; - box-shadow: 0 1px 0 rgba(0,0,0,.25); -} - -.drawer-toggle--hamburger span:first-child { - margin-top: 0; -} - -@media screen and (min-width:998px) { - .drawer-toggle--hamburger { - display: block; - margin-top: 2px; - margin-right: 13px; - margin-bottom: 3px; - } -} - -@media screen and (min-width:1200px) { - .drawer-toggle--hamburger { - margin-top: 5px; - margin-right: 17px; - margin-bottom: 5px; - } - #drawer-button { - line-height: 1.75em; - } -} - -#pushed-content { - position: relative; - z-index: 1; - display: block; - transition: transform 0.125s ease; -} -#pushed-content.drawer--push-left.off-canvas-drawer--is-active { - transform: translate3D(-20rem, 0, 0); - box-shadow: 2px 0 2px rgba(0, 0, 0, .15); -} -#pushed-content.drawer--push-right.off-canvas-drawer--is-active { - transform: translate3D(20rem, 0, 0); - box-shadow: 2px 0 2px rgba(0, 0, 0, .15); -} -#off-canvas-drawer--primary { - transition: transform 0.125s ease, visibility 0.125s ease; - visibility: visible; - height: 100%; - width: 0; - position: fixed; - top: 0; - background-color: #686868; - display: block; - overflow: auto; -} -#off-canvas-drawer--primary.drawer--cover-left, #off-canvas-drawer--primary.drawer--push-left { - right: 0; - transform: translate3D(20rem, 0, 0); -} -#off-canvas-drawer--primary.drawer--cover-right, #off-canvas-drawer--primary.drawer--push-right { - left: 0; - transform: translate3D(-20rem, 0, 0); -} -#off-canvas-drawer--primary.off-canvas-drawer--is-animating { - width: 20rem; - z-index: 10; -} -#off-canvas-drawer--primary.off-canvas-drawer--is-active { - transform: translate3D(0, 0, 0); - z-index: 10; - width: 20rem; -} -#off-canvas-mask { - height: 100%; - width: 0; - position: fixed; - z-index: 2; - top: 0; - left: 0; - background-color: rgba(255, 255, 255, 0.5); - overflow-y: auto; - overflow-x: hidden; - text-align: center; - opacity: 0; - transition: opacity 0.125s; -} -#off-canvas-mask.off-canvas-drawer--is-active { - width: 100%; - opacity: 0.5; -} -@media screen and (max-width: 979px) { - .has-off-canvas-drawer #ubc7-unit-menu { - display: none; - } -} -.drawer-toggle--hamburger .off-canvas-drawer, .off-canvas-drawer a, .off-canvas-drawer .dropdown-menu a { - /* Alter CLF Navigation markup to work vertically */ - color: #fff; -} -.off-canvas-drawer .drawer__close { - background-color: #686868; - border-top: 1px solid #414141; - border-bottom: none; - border-left: none; - border-right: none; - color: #fff; - padding: 18px; - display: block; - position: relative; - text-transform: uppercase; - text-align: right; - width: 100%; -} -.off-canvas-drawer .drawer__close:hover { - background-color: #4f4f4f; -} -.off-canvas-drawer .drawer__close:focus { - background-color: #424242; -} -.off-canvas-drawer a { - border-top-style: solid; - border-top-width: 1px; - border-color: #414141; - box-shadow: none; - box-sizing: border-box; - padding: 18px; - padding-right: 0; - text-decoration: none; -} -.off-canvas-drawer a:hover { - color: #fff; - border-color: #414141; -} -.off-canvas-drawer .nav > li > a:focus, .off-canvas-drawer .nav > li > a:hover, .off-canvas-drawer .btn-group:hover > .btn, .off-canvas-drawer .btn-group > a:focus { - background-color: #4f4f4f; -} -.off-canvas-drawer .btn-group { - width: 100%; -} -.off-canvas-drawer .btn-group .dropdown-toggle { - z-index: 2; - float: none; - position: absolute; - right: 0; - top: 0; - height: 55px; - box-shadow: none; -} -.off-canvas-drawer .btn-group .dropdown-toggle:hover:after, .off-canvas-drawer .btn-group .dropdown-toggle:focus:after { - color: #fff; -} -.off-canvas-drawer .btn-group .dropdown-toggle span { - transition: all 0.3s ease; -} -.off-canvas-drawer .btn-group .dropdown-toggle:hover span { - transform: rotate(90deg); -} -.off-canvas-drawer .btn-group .dropdown-menu { - border: none; - width: 100%; - margin-top: 0; -} -.off-canvas-drawer .btn-group .dropdown-menu li { - border-bottom: none; -} -.off-canvas-drawer .btn-group .dropdown-menu a { - background-color: #828282; - padding-top: 18px; - padding-bottom: 18px; -} -.off-canvas-drawer .btn-group > a { - width: 100%; - z-index: 1; -} -.off-canvas-drawer .btn-group > .btn { - background-color: #686868; - border-left: none; - border-right: none; - border-bottom: none; - border-color: #414141; - line-height: 18px; - box-shadow: none !important; - background-image: none; - text-align: left; -} -.off-canvas-drawer .btn-group:hover > .dropdown-toggle { - background-color: #424242; -} -.off-canvas-drawer .btn-group.open span { - transform: rotate(90deg); - transition: all 0.3s ease; -} -.off-canvas-drawer .btn-group.open .btn.dropdown-toggle { - background-color: #4f4f4f; - border-color: #4f4f4f; -} -.off-canvas-drawer .btn-group.open > .dropdown-menu { - display: block; - position: relative; -} -.off-canvas-drawer button:focus { - outline: 0; -} -.off-canvas-drawer .ubc7-arrow { - background-position: -1113px -227px !important; -} -#drawer-button .icon-bar { - display:block; - width:18px; - height:2px; - background-color:#000; - -webkit-border-radius:1px; - -moz-border-radius:1px; - border-radius:1px; - -webkit-box-shadow:0 1px 0 rgba(0,0,0,0.25); - -moz-box-shadow:0 1px 0 rgba(0,0,0,0.25); - box-shadow:0 1px 0 rgba(0,0,0,0.25) -} -#drawer-button .icon-bar+.icon-bar { - margin-top:3px -} -#drawer-button .hamburger__elem { - display: inline-block; -} +#drawer-button{float:right;margin-right:17px;color:#000;border:none;background-color:rgba(0,0,0,0);font-family:Arial,Sans-Serif;padding:10px;font-size:14px;outline:0}#drawer-button:hover{background-color:#002145;color:#fff}#drawer-button:hover .icon-bar{background-color:#f5f5f5}#drawer-button .icon-bar{display:block;width:18px;height:2px;margin-top:3px;background-color:#000;-webkit-border-radius:1px;-moz-border-radius:1px;border-radius:1px;-webkit-box-shadow:0 1px 0 rgba(0,0,0,.25);-moz-box-shadow:0 1px 0 rgba(0,0,0,.25);box-shadow:0 1px 0 rgba(0,0,0,.25)}.icon-bar#drawer-button+.icon-bar{margin-top:3px}#drawer-button .hamburger__elem{display:inline-block}.drawer-toggle--hamburger{background-color:#fff;box-shadow:1px 1px 1px #191938;-webkit-box-shadow:1px 1px 1px #191938;float:right;height:24px;padding:11px 0 0 13px;width:32px}.drawer-toggle--hamburger:hover{box-shadow:1px 1px 1px #191938;-webkit-box-shadow:inset 1px 1px 1px #191938;-moz-box-shadow:1px 1px 1px #191938}.drawer-toggle--hamburger span{margin-top:3px;display:block;width:18px;height:2px;background-color:#002145;box-shadow:0 1px 0 rgba(0,0,0,.25)}.drawer-toggle--hamburger span:first-child{margin-top:0}.drawer-toggle--hamburger .off-canvas-drawer{color:#fff}#pushed-content{position:relative;z-index:1;display:block;transition:transform 125ms ease}#pushed-content.drawer--push-left.off-canvas-drawer--is-active{transform:translate3D(-20rem,0,0);box-shadow:2px 0 2px rgba(0,0,0,.15)}#pushed-content.drawer--push-right.off-canvas-drawer--is-active{transform:translate3D(20rem,0,0);box-shadow:2px 0 2px rgba(0,0,0,.15)}#off-canvas-drawer--primary{transition:transform 125ms ease,visibility 125ms ease;visibility:visible;height:100%;width:0;position:fixed;top:0;background-color:#686868;display:block;overflow:auto}#off-canvas-drawer--primary.drawer--cover-left{right:0;transform:translate3D(20rem,0,0)}#off-canvas-drawer--primary.drawer--push-left{right:0;transform:translate3D(20rem,0,0)}#off-canvas-drawer--primary.drawer--cover-right{left:0;transform:translate3D(-20rem,0,0)}#off-canvas-drawer--primary.drawer--push-right{left:0;transform:translate3D(-20rem,0,0)}#off-canvas-drawer--primary.off-canvas-drawer--is-animating{width:20rem;z-index:10}#off-canvas-drawer--primary.off-canvas-drawer--is-active{transform:translate3D(0,0,0);z-index:10;width:20rem}#off-canvas-mask{height:100%;width:0;position:fixed;z-index:2;top:0;left:0;background-color:rgba(255,255,255,.5);overflow-y:auto;overflow-x:hidden;text-align:center;opacity:0;transition:opacity 125ms}#off-canvas-mask.off-canvas-drawer--is-active{width:100%;opacity:.5}.off-canvas-drawer a{color:#fff;border-top-style:solid;border-top-width:1px;border-color:#414141;box-shadow:none;box-sizing:border-box;padding:18px;padding-right:0;text-decoration:none}.off-canvas-drawer a:hover{color:#fff;border-color:#414141}.off-canvas-drawer .dropdown-menu a{color:#fff}.off-canvas-drawer .drawer__close{background-color:#686868;border-top:1px solid #414141;border-bottom:none;border-left:none;border-right:none;color:#fff;padding:18px;display:block;position:relative;text-transform:uppercase;text-align:right;width:100%}.off-canvas-drawer .drawer__close:hover{background-color:#4f4f4f}.off-canvas-drawer .drawer__close:focus{background-color:#424242}.off-canvas-drawer .nav>li>a:focus{background-color:#4f4f4f}.off-canvas-drawer .nav>li>a:hover{background-color:#4f4f4f}.off-canvas-drawer .btn-group{width:100%}.off-canvas-drawer .btn-group:hover>.btn{background-color:#4f4f4f}.off-canvas-drawer .btn-group:hover>.dropdown-toggle{background-color:#424242}.off-canvas-drawer .btn-group>a{width:100%;z-index:1}.off-canvas-drawer .btn-group>a:focus{background-color:#4f4f4f}.off-canvas-drawer .btn-group .dropdown-toggle{z-index:2;float:none;position:absolute;right:0;top:0;height:55px;box-shadow:none}.off-canvas-drawer .btn-group .dropdown-toggle:hover:after{color:#fff}.off-canvas-drawer .btn-group .dropdown-toggle:hover span{transform:rotate(90deg)}.off-canvas-drawer .btn-group .dropdown-toggle:focus:after{color:#fff}.off-canvas-drawer .btn-group .dropdown-toggle span{transition:all .3s ease}.off-canvas-drawer .btn-group .dropdown-menu{border:none;width:100%;margin-top:0}.off-canvas-drawer .btn-group .dropdown-menu li{border-bottom:none}.off-canvas-drawer .btn-group .dropdown-menu a{background-color:#828282;padding-top:18px;padding-bottom:18px}.off-canvas-drawer .btn-group>.btn{background-color:#686868;border-left:none;border-right:none;border-bottom:none;border-color:#414141;line-height:18px;box-shadow:none!important;background-image:none;text-align:left}.off-canvas-drawer .btn-group.open span{transform:rotate(90deg);transition:all .3s ease}.off-canvas-drawer .btn-group.open .btn.dropdown-toggle{background-color:#4f4f4f;border-color:#4f4f4f}.off-canvas-drawer .btn-group.open>.dropdown-menu{display:block;position:relative}.off-canvas-drawer button:focus{outline:0}.off-canvas-drawer .ubc7-arrow{background-position:-1113px -227px!important}@media screen and (min-width:998px){.drawer-toggle--hamburger{display:block;margin-top:2px;margin-right:13px;margin-bottom:3px}}@media screen and (min-width:1200px){.drawer-toggle--hamburger{margin-top:5px;margin-right:17px;margin-bottom:5px}#drawer-button{line-height:1.75em}}@media screen and (max-width:979px){.has-off-canvas-drawer #ubc7-unit-menu{display:none}}/*# sourceMappingURL=off.canvas.drawer.css.map */ \ No newline at end of file diff --git a/css/off.canvas.flyout.css b/css/off.canvas.flyout.css index f51194d..8730109 100644 --- a/css/off.canvas.flyout.css +++ b/css/off.canvas.flyout.css @@ -1 +1 @@ -#flyout-button{position:fixed;top:50vh;right:-30px;color:#fff;border:none;background-color:#7C1F3D;font-family:Arial,Sans-Serif;padding:10px;font-size:14px;outline:0;transform:rotate(90deg);z-index:9}#flyout-button:hover{background-color:#002145;color:#fff}#flyout-button:hover .icon-bar{background-color:#fff}.flyout-toggle--hamburger{background-color:#fff;box-shadow:1px 1px 1px #191938;-webkit-box-shadow:1px 1px 1px #191938;float:right;height:24px;padding:11px 0 0 13px;width:32px}.flyout-toggle--hamburger:hover{box-shadow:1px 1px 1px #191938;-webkit-box-shadow:inset 1px 1px 1px #191938;-moz-box-shadow:1px 1px 1px #191938}.flyout-toggle--hamburger span{margin-top:3px;display:block;width:18px;height:2px;background-color:#002145;box-shadow:0 1px 0 rgba(0,0,0,.25)}.flyout-toggle--hamburger span:first-child{margin-top:0}@media screen and (min-width:998px){.flyout-toggle--hamburger{display:block;margin-top:2px;margin-right:13px;margin-bottom:3px}}@media screen and (min-width:1200px){.flyout-toggle--hamburger{margin-top:5px;margin-right:17px;margin-bottom:5px}#flyout-button{line-height:1.75em}}#pushed-content-flyout{position:relative;z-index:1;display:block;transition:transform 125ms ease}#pushed-content-flyout.flyout--push-left.off-canvas-flyout--is-active{transform:translate3D(-20rem,0,0);box-shadow:2px 0 2px rgba(0,0,0,.15)}#pushed-content-flyout.flyout--push-right.off-canvas-flyout--is-active{transform:translate3D(20rem,0,0);box-shadow:2px 0 2px rgba(0,0,0,.15)}#off-canvas-flyout{transition:transform 125ms ease,visibility 125ms ease;visibility:visible;height:100%;width:0;position:fixed;top:0;background-color:#686868;display:block;overflow:auto}#off-canvas-flyout.flyout--cover-left,#off-canvas-flyout.flyout--push-left{right:0;transform:translate3D(20rem,0,0)}#off-canvas-flyout.flyout--cover-right,#off-canvas-flyout.flyout--push-right{left:0;transform:translate3D(-20rem,0,0)}#off-canvas-flyout.off-canvas-flyout--is-animating{width:20rem;z-index:10}#off-canvas-flyout.off-canvas-flyout--is-active{transform:translate3D(0,0,0);z-index:10;width:20rem}#off-canvas-mask-flyout{height:100%;width:0;position:fixed;z-index:2;top:0;left:0;background-color:rgba(255,255,255,.5);overflow-y:auto;overflow-x:hidden;text-align:center;opacity:0;transition:opacity 125ms}#off-canvas-mask-flyout.off-canvas-flyout--is-active{width:100%;opacity:.5}@media screen and (max-width:979px){.has-off-canvas-flyout #ubc7-unit-menu{display:block}.has-off-canvas-flyout #ubc7-unit-menu .drawer-toggle--primary{display:none}}.flyout-toggle--hamburger .off-canvas-flyout,.off-canvas-flyout .dropdown-menu a,.off-canvas-flyout a{color:#fff}.off-canvas-flyout .flyout__close{background-color:#686868;border-top:1px solid #414141;border-bottom:none;border-left:none;border-right:none;color:#fff;padding:60px 18px 18px;display:block;position:relative;text-transform:uppercase;text-align:right;width:100%}.off-canvas-flyout .flyout__close:hover{background-color:#4f4f4f}.off-canvas-flyout .flyout__close:focus{background-color:#424242}.off-canvas-flyout a{border-top-style:solid;border-top-width:1px;border-color:#414141;box-shadow:none;box-sizing:border-box;padding:18px;padding-right:0;text-decoration:none}.off-canvas-flyout a:hover{color:#fff;border-color:#414141}.off-canvas-flyout .btn-group:hover>.btn,.off-canvas-flyout .btn-group>a:focus,.off-canvas-flyout .nav>li>a:focus,.off-canvas-flyout .nav>li>a:hover{background-color:#4f4f4f}.off-canvas-flyout .btn-group{width:100%}.off-canvas-flyout .btn-group .dropdown-toggle{z-index:2;float:none;position:absolute;right:0;top:0;height:55px;box-shadow:none}.off-canvas-flyout .btn-group .dropdown-toggle:focus:after,.off-canvas-flyout .btn-group .dropdown-toggle:hover:after{color:#fff}.off-canvas-flyout .btn-group .dropdown-toggle span{transition:all .3s ease}.off-canvas-flyout .btn-group .dropdown-toggle:hover span{transform:rotate(90deg)}.off-canvas-flyout .btn-group .dropdown-menu{border:none;width:100%;margin-top:0}.off-canvas-flyout .btn-group .dropdown-menu li{border-bottom:none}.off-canvas-flyout .btn-group .dropdown-menu a{background-color:#828282;padding-top:18px;padding-bottom:18px}.off-canvas-flyout .btn-group>a{width:100%;z-index:1}.off-canvas-flyout .btn-group>.btn{background-color:#686868;border-left:none;border-right:none;border-bottom:none;border-color:#414141;line-height:18px;box-shadow:none!important;background-image:none;text-align:left}.off-canvas-flyout .btn-group:hover>.dropdown-toggle{background-color:#424242}.off-canvas-flyout .btn-group.open span{transform:rotate(90deg);transition:all .3s ease}.off-canvas-flyout .btn-group.open .btn.dropdown-toggle{background-color:#4f4f4f;border-color:#4f4f4f}.off-canvas-flyout .btn-group.open>.dropdown-menu{display:block;position:relative}.off-canvas-flyout button:focus{outline:0}.off-canvas-flyout .ubc7-arrow{background-position:-1113px -227px!important}#flyout-button .icon-bar{display:block;width:18px;height:2px;background-color:#fff;-webkit-border-radius:1px;-moz-border-radius:1px;border-radius:1px;-webkit-box-shadow:0 1px 0 rgba(0,0,0,.25);-moz-box-shadow:0 1px 0 rgba(0,0,0,.25);box-shadow:0 1px 0 rgba(0,0,0,.25)}#flyout-button .icon-bar+.icon-bar{margin-top:3px}#flyout-button .hamburger__elem{display:inline-block;margin-left:5px;text-transform:uppercase} \ No newline at end of file +#flyout-button{position:fixed;top:50vh;right:0;color:#fff;border:none;background-color:#7C1F3D;font-family:Arial,Sans-Serif;padding:10px;font-size:14px;outline:0;transform:rotate(90deg);transform-origin:right top;z-index:9}#flyout-button:hover{background-color:#002145;color:#fff}#flyout-button:hover .icon-bar{background-color:#fff}.flyout-toggle--hamburger{background-color:#fff;box-shadow:1px 1px 1px #191938;-webkit-box-shadow:1px 1px 1px #191938;float:right;height:24px;padding:11px 0 0 13px;width:32px}.flyout-toggle--hamburger:hover{box-shadow:1px 1px 1px #191938;-webkit-box-shadow:inset 1px 1px 1px #191938;-moz-box-shadow:1px 1px 1px #191938}.flyout-toggle--hamburger span{margin-top:3px;display:block;width:18px;height:2px;background-color:#002145;box-shadow:0 1px 0 rgba(0,0,0,.25)}.flyout-toggle--hamburger span:first-child{margin-top:0}@media screen and (min-width:998px){.flyout-toggle--hamburger{display:block;margin-top:2px;margin-right:13px;margin-bottom:3px}}@media screen and (min-width:1200px){.flyout-toggle--hamburger{margin-top:5px;margin-right:17px;margin-bottom:5px}#flyout-button{line-height:1.75em}}#pushed-content-flyout{position:relative;z-index:1;display:block;transition:transform 125ms ease}#pushed-content-flyout.flyout--push-left.off-canvas-flyout--is-active{transform:translate3D(-20rem,0,0);box-shadow:2px 0 2px rgba(0,0,0,.15)}#pushed-content-flyout.flyout--push-right.off-canvas-flyout--is-active{transform:translate3D(20rem,0,0);box-shadow:2px 0 2px rgba(0,0,0,.15)}#off-canvas-flyout{transition:transform 125ms ease,visibility 125ms ease;visibility:visible;height:100%;width:0;position:fixed;top:0;background-color:#686868;display:block;overflow:auto}#off-canvas-flyout.flyout--cover-left,#off-canvas-flyout.flyout--push-left{right:0;transform:translate3D(20rem,0,0)}#off-canvas-flyout.flyout--cover-right,#off-canvas-flyout.flyout--push-right{left:0;transform:translate3D(-20rem,0,0)}#off-canvas-flyout.off-canvas-flyout--is-animating{width:20rem;z-index:10}#off-canvas-flyout.off-canvas-flyout--is-active{transform:translate3D(0,0,0);z-index:10;width:20rem}#off-canvas-mask-flyout{height:100%;width:0;position:fixed;z-index:2;top:0;left:0;background-color:rgba(255,255,255,.5);overflow-y:auto;overflow-x:hidden;text-align:center;opacity:0;transition:opacity 125ms}#off-canvas-mask-flyout.off-canvas-flyout--is-active{width:100%;opacity:.5}@media screen and (max-width:979px){.has-off-canvas-flyout #ubc7-unit-menu{display:block}.has-off-canvas-flyout #ubc7-unit-menu .drawer-toggle--primary{display:none}}.flyout-toggle--hamburger .off-canvas-flyout,.off-canvas-flyout .dropdown-menu a,.off-canvas-flyout a{color:#fff}.off-canvas-flyout .flyout__close{background-color:#686868;border-top:1px solid #414141;border-bottom:none;border-left:none;border-right:none;color:#fff;padding:60px 18px 18px;display:block;position:relative;text-transform:uppercase;text-align:right;width:100%}.off-canvas-flyout .flyout__close:hover{background-color:#4f4f4f}.off-canvas-flyout .flyout__close:focus{background-color:#424242}.off-canvas-flyout a{border-top-style:solid;border-top-width:1px;border-color:#414141;box-shadow:none;box-sizing:border-box;padding:18px;padding-right:0;text-decoration:none}.off-canvas-flyout a:hover{color:#fff;border-color:#414141}.off-canvas-flyout .btn-group:hover>.btn,.off-canvas-flyout .btn-group>a:focus,.off-canvas-flyout .nav>li>a:focus,.off-canvas-flyout .nav>li>a:hover{background-color:#4f4f4f}.off-canvas-flyout .btn-group{width:100%}.off-canvas-flyout .btn-group .dropdown-toggle{z-index:2;float:none;position:absolute;right:0;top:0;height:55px;box-shadow:none}.off-canvas-flyout .btn-group .dropdown-toggle:focus:after,.off-canvas-flyout .btn-group .dropdown-toggle:hover:after{color:#fff}.off-canvas-flyout .btn-group .dropdown-toggle span{transition:all .3s ease}.off-canvas-flyout .btn-group .dropdown-toggle:hover span{transform:rotate(90deg)}.off-canvas-flyout .btn-group .dropdown-menu{border:none;width:100%;margin-top:0}.off-canvas-flyout .btn-group .dropdown-menu li{border-bottom:none}.off-canvas-flyout .btn-group .dropdown-menu a{background-color:#828282;padding-top:18px;padding-bottom:18px}.off-canvas-flyout .btn-group>a{width:100%;z-index:1}.off-canvas-flyout .btn-group>.btn{background-color:#686868;border-left:none;border-right:none;border-bottom:none;border-color:#414141;line-height:18px;box-shadow:none!important;background-image:none;text-align:left}.off-canvas-flyout .btn-group:hover>.dropdown-toggle{background-color:#424242}.off-canvas-flyout .btn-group.open span{transform:rotate(90deg);transition:all .3s ease}.off-canvas-flyout .btn-group.open .btn.dropdown-toggle{background-color:#4f4f4f;border-color:#4f4f4f}.off-canvas-flyout .btn-group.open>.dropdown-menu{display:block;position:relative}.off-canvas-flyout button:focus{outline:0}.off-canvas-flyout .ubc7-arrow{background-position:-1113px -227px!important}#flyout-button .icon-bar{display:block;width:18px;height:2px;background-color:#fff;-webkit-border-radius:1px;-moz-border-radius:1px;border-radius:1px;-webkit-box-shadow:0 1px 0 rgba(0,0,0,.25);-moz-box-shadow:0 1px 0 rgba(0,0,0,.25);box-shadow:0 1px 0 rgba(0,0,0,.25)}#flyout-button .icon-bar+.icon-bar{margin-top:3px}#flyout-button .hamburger__elem{display:inline-block;margin-left:5px;text-transform:uppercase} \ No newline at end of file diff --git a/less/off.canvas.drawer.less b/less/off.canvas.drawer.less index b2511c2..c8444f8 100644 --- a/less/off.canvas.drawer.less +++ b/less/off.canvas.drawer.less @@ -1,6 +1,6 @@ @primary-font-color: #000; @secondary-font-color: #fff; -@primary-font-family: Arial,Sans-Serif; +@primary-font-family: Arial, Sans-Serif; @drawer-button__background-color: rgba(0, 0, 0, 0); @drawer-button__background-color--hover: #002145; @icon-bar__background-color--hover: #f5f5f5; @@ -15,302 +15,321 @@ @drawer__border-color--dark: #4f4f4f; #drawer-button { - float: right; - margin-right: 17px; - color: @primary-font-color; - border: none; - background-color: @drawer-button__background-color; - font-family: @primary-font-family; - padding: 10px; - font-size: 14px; - outline: 0; - &:hover { - background-color: @drawer-button__background-color--hover; - color: @secondary-font-color; - .icon-bar { - background-color: @icon-bar__background-color--hover; - } - } - .icon-bar { - display: block; - width: 18px; - height: 2px; - background-color: @icon-bar__background-color; - -webkit-border-radius: 1px; - -moz-border-radius: 1px; - border-radius: 1px; - -webkit-box-shadow: 0 1px 0 rgba(0,0,0,0.25); - -moz-box-shadow: 0 1px 0 rgba(0,0,0,0.25); - box-shadow: 0 1px 0 rgba(0,0,0,0.25); - } - .icon-bar&+.icon-bar { - margin-top: 3px; - } - .hamburger__elem { - display: inline-block; - } + float: right; + margin-right: 17px; + color: @primary-font-color; + border: none; + background-color: @drawer-button__background-color; + font-family: @primary-font-family; + padding: 10px; + font-size: 14px; + outline: 0; + &:hover { + background-color: @drawer-button__background-color--hover; + color: @secondary-font-color; + .icon-bar { + background-color: @icon-bar__background-color--hover; + } + } + .icon-bar { + display: block; + width: 18px; + height: 2px; + margin-top: 3px; + background-color: @icon-bar__background-color; + -webkit-border-radius: 1px; + -moz-border-radius: 1px; + border-radius: 1px; + -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); + -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); + box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); + } + .icon-bar& + .icon-bar { + margin-top: 3px; + } + .hamburger__elem { + display: inline-block; + } } + .drawer-toggle--hamburger { - background-color: @hamburger__background-color; - box-shadow: 1px 1px 1px #191938; - -webkit-box-shadow: 1px 1px 1px #191938; - float: right; - height: 24px; - padding: 11px 0 0 13px; - width: 32px; - &:hover { - box-shadow: 1px 1px 1px #191938; - -webkit-box-shadow: inset 1px 1px 1px #191938; - -moz-box-shadow: 1px 1px 1px #191938; - } - span { - margin-top: 3px; - display: block; - width: 18px; - height: 2px; - background-color: @drawer-button__background-color--hover; - box-shadow: 0 1px 0 rgba(0,0,0,.25); - &:first-child { - margin-top: 0; - } - } - .off-canvas-drawer { - color: @secondary-font-color; - } + background-color: @hamburger__background-color; + box-shadow: 1px 1px 1px #191938; + -webkit-box-shadow: 1px 1px 1px #191938; + float: right; + height: 24px; + padding: 11px 0 0 13px; + width: 32px; + &:hover { + box-shadow: 1px 1px 1px #191938; + -webkit-box-shadow: inset 1px 1px 1px #191938; + -moz-box-shadow: 1px 1px 1px #191938; + } + span { + margin-top: 3px; + display: block; + width: 18px; + height: 2px; + background-color: @drawer-button__background-color--hover; + box-shadow: 0 1px 0 rgba(0, 0, 0, .25); + &:first-child { + margin-top: 0; + } + } + .off-canvas-drawer { + color: @secondary-font-color; + } } + #pushed-content { - position: relative; - z-index: 1; - display: block; - transition: transform 0.125s ease; + position: relative; + z-index: 1; + display: block; + transition: transform 0.125s ease; } + #pushed-content.drawer--push-left.off-canvas-drawer--is-active { - transform: translate3D(-20rem, 0, 0); - box-shadow: 2px 0 2px rgba(0, 0, 0, .15); + transform: translate3D(-20rem, 0, 0); + box-shadow: 2px 0 2px rgba(0, 0, 0, .15); } + #pushed-content.drawer--push-right.off-canvas-drawer--is-active { - transform: translate3D(20rem, 0, 0); - box-shadow: 2px 0 2px rgba(0, 0, 0, .15); + transform: translate3D(20rem, 0, 0); + box-shadow: 2px 0 2px rgba(0, 0, 0, .15); } + #off-canvas-drawer--primary { - transition: transform 0.125s ease, visibility 0.125s ease; - visibility: visible; - height: 100%; - width: 0; - position: fixed; - top: 0; - background-color: @drawer__background-color; - display: block; - overflow: auto; + transition: transform 0.125s ease, visibility 0.125s ease; + visibility: visible; + height: 100%; + width: 0; + position: fixed; + top: 0; + background-color: @drawer__background-color; + display: block; + overflow: auto; } + #off-canvas-drawer--primary.drawer--cover-left { - right: 0; - transform: translate3D(20rem, 0, 0); + right: 0; + transform: translate3D(20rem, 0, 0); } + #off-canvas-drawer--primary.drawer--push-left { - right: 0; - transform: translate3D(20rem, 0, 0); + right: 0; + transform: translate3D(20rem, 0, 0); } + #off-canvas-drawer--primary.drawer--cover-right { - left: 0; - transform: translate3D(-20rem, 0, 0); + left: 0; + transform: translate3D(-20rem, 0, 0); } + #off-canvas-drawer--primary.drawer--push-right { - left: 0; - transform: translate3D(-20rem, 0, 0); + left: 0; + transform: translate3D(-20rem, 0, 0); } + #off-canvas-drawer--primary.off-canvas-drawer--is-animating { - width: 20rem; - z-index: 10; + width: 20rem; + z-index: 10; } + #off-canvas-drawer--primary.off-canvas-drawer--is-active { - transform: translate3D(0, 0, 0); - z-index: 10; - width: 20rem; + transform: translate3D(0, 0, 0); + z-index: 10; + width: 20rem; } + #off-canvas-mask { - height: 100%; - width: 0; - position: fixed; - z-index: 2; - top: 0; - left: 0; - background-color: @off-canvas-mask__background-color; - overflow-y: auto; - overflow-x: hidden; - text-align: center; - opacity: 0; - transition: opacity 0.125s; + height: 100%; + width: 0; + position: fixed; + z-index: 2; + top: 0; + left: 0; + background-color: @off-canvas-mask__background-color; + overflow-y: auto; + overflow-x: hidden; + text-align: center; + opacity: 0; + transition: opacity 0.125s; } + #off-canvas-mask.off-canvas-drawer--is-active { - width: 100%; - opacity: 0.5; + width: 100%; + opacity: 0.5; } + .off-canvas-drawer { - a { - color: @secondary-font-color; - border-top-style: solid; - border-top-width: 1px; - border-color: @drawer__border-color--darker; - box-shadow: none; - box-sizing: border-box; - padding: 18px; - padding-right: 0; - text-decoration: none; - &:hover { - color: @secondary-font-color; - border-color: @drawer__border-color--darker; - } - } - .dropdown-menu { - a { - color: @secondary-font-color; - } - } - .drawer__close { - background-color: @drawer__background-color; - border-top: 1px solid #414141; - border-bottom: none; - border-left: none; - border-right: none; - color: @secondary-font-color; - padding: 18px; - display: block; - position: relative; - text-transform: uppercase; - text-align: right; - width: 100%; - &:hover { - background-color: @drawer__background-color--darker; - } - &:focus { - background-color: @drawer__background-color--dark; - } - } - .nav { - >li { - >a { - &:focus { - background-color: @drawer__background-color--darker; - } - &:hover { - background-color: @drawer__background-color--darker; - } - } - } - } - .btn-group { - &:hover { - >.btn { - background-color: @drawer__background-color--darker; - } - >.dropdown-toggle { - background-color: @drawer__background-color--dark; - } - } - >a { - &:focus { - background-color: @drawer__background-color--darker; - } - width: 100%; - z-index: 1; - } - width: 100%; - .dropdown-toggle { - z-index: 2; - float: none; - position: absolute; - right: 0; - top: 0; - height: 55px; - box-shadow: none; - &:hover { - &:after { - color: @secondary-font-color; - } - span { - transform: rotate(90deg); - } - } - &:focus { - &:after { - color: @secondary-font-color; - } - } - span { - transition: all 0.3s ease; - } - } - .dropdown-menu { - border: none; - width: 100%; - margin-top: 0; - li { - border-bottom: none; - } - a { - background-color: @dropdown-menu__background-color; - padding-top: 18px; - padding-bottom: 18px; - } - } - >.btn { - background-color: @drawer__background-color; - border-left: none; - border-right: none; - border-bottom: none; - border-color: @drawer__border-color--darker; - line-height: 18px; - box-shadow: none !important; - background-image: none; - text-align: left; - } - } - .btn-group.open { - span { - transform: rotate(90deg); - transition: all 0.3s ease; - } - .btn.dropdown-toggle { - background-color: @drawer__background-color--darker; - border-color: @drawer__border-color--dark; - } - >.dropdown-menu { - display: block; - position: relative; - } - } - button { - &:focus { - outline: 0; - } - } - .ubc7-arrow { - background-position: -1113px -227px !important; - } + a { + color: @secondary-font-color; + border-top-style: solid; + border-top-width: 1px; + border-color: @drawer__border-color--darker; + box-shadow: none; + box-sizing: border-box; + padding: 18px; + padding-right: 0; + text-decoration: none; + &:hover { + color: @secondary-font-color; + border-color: @drawer__border-color--darker; + } + } + .dropdown-menu { + a { + color: @secondary-font-color; + } + } + .drawer__close { + background-color: @drawer__background-color; + border-top: 1px solid #414141; + border-bottom: none; + border-left: none; + border-right: none; + color: @secondary-font-color; + padding: 18px; + display: block; + position: relative; + text-transform: uppercase; + text-align: right; + width: 100%; + &:hover { + background-color: @drawer__background-color--darker; + } + &:focus { + background-color: @drawer__background-color--dark; + } + } + .nav { + > li { + > a { + &:focus { + background-color: @drawer__background-color--darker; + } + &:hover { + background-color: @drawer__background-color--darker; + } + } + } + } + .btn-group { + &:hover { + > .btn { + background-color: @drawer__background-color--darker; + } + > .dropdown-toggle { + background-color: @drawer__background-color--dark; + } + } + > a { + &:focus { + background-color: @drawer__background-color--darker; + } + width: 100%; + z-index: 1; + } + width: 100%; + .dropdown-toggle { + z-index: 2; + float: none; + position: absolute; + right: 0; + top: 0; + height: 55px; + box-shadow: none; + &:hover { + &:after { + color: @secondary-font-color; + } + span { + transform: rotate(90deg); + } + } + &:focus { + &:after { + color: @secondary-font-color; + } + } + span { + transition: all 0.3s ease; + } + } + .dropdown-menu { + border: none; + width: 100%; + margin-top: 0; + li { + border-bottom: none; + } + a { + background-color: @dropdown-menu__background-color; + padding-top: 18px; + padding-bottom: 18px; + } + } + > .btn { + background-color: @drawer__background-color; + border-left: none; + border-right: none; + border-bottom: none; + border-color: @drawer__border-color--darker; + line-height: 18px; + box-shadow: none !important; + background-image: none; + text-align: left; + } + } + .btn-group.open { + span { + transform: rotate(90deg); + transition: all 0.3s ease; + } + .btn.dropdown-toggle { + background-color: @drawer__background-color--darker; + border-color: @drawer__border-color--dark; + } + > .dropdown-menu { + display: block; + position: relative; + } + } + button { + &:focus { + outline: 0; + } + } + .ubc7-arrow { + background-position: -1113px -227px !important; + } } -@media screen and (min-width:998px) { - .drawer-toggle--hamburger { - display: block; - margin-top: 2px; - margin-right: 13px; - margin-bottom: 3px; - } + +@media screen and (min-width: 998px) { + .drawer-toggle--hamburger { + display: block; + margin-top: 2px; + margin-right: 13px; + margin-bottom: 3px; + } } -@media screen and (min-width:1200px) { - .drawer-toggle--hamburger { - margin-top: 5px; - margin-right: 17px; - margin-bottom: 5px; - } - #drawer-button { - line-height: 1.75em; - } + +@media screen and (min-width: 1200px) { + .drawer-toggle--hamburger { + margin-top: 5px; + margin-right: 17px; + margin-bottom: 5px; + } + + #drawer-button { + line-height: 1.75em; + } } + @media screen and (max-width: 979px) { - .has-off-canvas-drawer { - #ubc7-unit-menu { - display: none; - } - } + .has-off-canvas-drawer { + #ubc7-unit-menu { + display: none; + } + } } diff --git a/less/off.canvas.flyout.less b/less/off.canvas.flyout.less index 8ade132..4580f11 100644 --- a/less/off.canvas.flyout.less +++ b/less/off.canvas.flyout.less @@ -1,7 +1,7 @@ #flyout-button { position: fixed; top: 50vh; - right: -30px; + right: 0; color: #fff; border:none; background-color: #7C1F3D; @@ -10,6 +10,7 @@ font-size:14px; outline: 0; transform: rotate(90deg); + transform-origin: right top; z-index: 9; } @@ -285,16 +286,16 @@ } #flyout-button .icon-bar { - display:block; - width:18px; - height:2px; - background-color:#fff; - -webkit-border-radius:1px; - -moz-border-radius:1px; - border-radius:1px; - -webkit-box-shadow:0 1px 0 rgba(0,0,0,0.25); - -moz-box-shadow:0 1px 0 rgba(0,0,0,0.25); - box-shadow:0 1px 0 rgba(0,0,0,0.25) + display: block; + width: 18px; + height: 2px; + background-color: #fff; + -webkit-border-radius: 1px; + -moz-border-radius: 1px; + border-radius: 1px; + -webkit-box-shadow: 0 1px 0 rgba(0,0,0,0.25); + -moz-box-shadow: 0 1px 0 rgba(0,0,0,0.25); + box-shadow: 0 1px 0 rgba(0,0,0,0.25) } #flyout-button .icon-bar+.icon-bar { @@ -305,4 +306,4 @@ display: inline-block; margin-left: 5px; text-transform: uppercase; -} +} \ No newline at end of file diff --git a/template.php b/template.php index 2ab0227..41c56bb 100755 --- a/template.php +++ b/template.php @@ -346,6 +346,15 @@ function megatron_preprocess_page(&$variables) { $drawer_enabled = $variables['drawer_region'] != 'default' && $variables['drawer_region'] != 'double' && $variables['drawer_region'] != 'higher'; $variables['drawer_enabled'] = $drawer_enabled; if ($variables['main_menu'] && theme_get_setting('clf_use_primary_menu_in_drawer')) { + + // Tell JS we're using primary nav so we can add a body class to hide the primary nav in CSS. + $drawer_settings = array( + 'drawerNav' => array( + 'class' => 'drawer-contains-primary-nav', + ), + ); + drupal_add_js($drawer_settings, 'setting'); + // Build links. $tree = menu_tree_page_data(variable_get('menu_main_links_source', 'main-menu')); $variables['main_menu'] = megatron_menu_navigation_links($tree); diff --git a/templates/page/page.tpl.php b/templates/page/page.tpl.php index 2fc99c5..40ad978 100755 --- a/templates/page/page.tpl.php +++ b/templates/page/page.tpl.php @@ -65,6 +65,7 @@ $container_attributes['class'][] = $drawer_region; } +$flyout_container_attributes = array(); if ($flyout_enabled) { $flyout_container_attributes['id'] = 'pushed-content-flyout'; $flyout_container_attributes['class'][] = $flyout_region; @@ -172,6 +173,11 @@ + + + + + - - - - -
From e0f89fb99889951b7440f2824bb58fc177598700 Mon Sep 17 00:00:00 2001 From: Darko Hrgovic Date: Fri, 22 Jun 2018 13:07:13 -0700 Subject: [PATCH 23/42] Reverted conversion of drawer CSS to LESS because some stuff broke --- css/off.canvas.drawer.css | 2 +- less/off.canvas.drawer.less | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/css/off.canvas.drawer.css b/css/off.canvas.drawer.css index c142f66..17af77f 100644 --- a/css/off.canvas.drawer.css +++ b/css/off.canvas.drawer.css @@ -1 +1 @@ -#drawer-button{float:right;margin-right:17px;color:#000;border:none;background-color:rgba(0,0,0,0);font-family:Arial,Sans-Serif;padding:10px;font-size:14px;outline:0}#drawer-button:hover{background-color:#002145;color:#fff}#drawer-button:hover .icon-bar{background-color:#f5f5f5}#drawer-button .icon-bar{display:block;width:18px;height:2px;margin-top:3px;background-color:#000;-webkit-border-radius:1px;-moz-border-radius:1px;border-radius:1px;-webkit-box-shadow:0 1px 0 rgba(0,0,0,.25);-moz-box-shadow:0 1px 0 rgba(0,0,0,.25);box-shadow:0 1px 0 rgba(0,0,0,.25)}.icon-bar#drawer-button+.icon-bar{margin-top:3px}#drawer-button .hamburger__elem{display:inline-block}.drawer-toggle--hamburger{background-color:#fff;box-shadow:1px 1px 1px #191938;-webkit-box-shadow:1px 1px 1px #191938;float:right;height:24px;padding:11px 0 0 13px;width:32px}.drawer-toggle--hamburger:hover{box-shadow:1px 1px 1px #191938;-webkit-box-shadow:inset 1px 1px 1px #191938;-moz-box-shadow:1px 1px 1px #191938}.drawer-toggle--hamburger span{margin-top:3px;display:block;width:18px;height:2px;background-color:#002145;box-shadow:0 1px 0 rgba(0,0,0,.25)}.drawer-toggle--hamburger span:first-child{margin-top:0}.drawer-toggle--hamburger .off-canvas-drawer{color:#fff}#pushed-content{position:relative;z-index:1;display:block;transition:transform 125ms ease}#pushed-content.drawer--push-left.off-canvas-drawer--is-active{transform:translate3D(-20rem,0,0);box-shadow:2px 0 2px rgba(0,0,0,.15)}#pushed-content.drawer--push-right.off-canvas-drawer--is-active{transform:translate3D(20rem,0,0);box-shadow:2px 0 2px rgba(0,0,0,.15)}#off-canvas-drawer--primary{transition:transform 125ms ease,visibility 125ms ease;visibility:visible;height:100%;width:0;position:fixed;top:0;background-color:#686868;display:block;overflow:auto}#off-canvas-drawer--primary.drawer--cover-left{right:0;transform:translate3D(20rem,0,0)}#off-canvas-drawer--primary.drawer--push-left{right:0;transform:translate3D(20rem,0,0)}#off-canvas-drawer--primary.drawer--cover-right{left:0;transform:translate3D(-20rem,0,0)}#off-canvas-drawer--primary.drawer--push-right{left:0;transform:translate3D(-20rem,0,0)}#off-canvas-drawer--primary.off-canvas-drawer--is-animating{width:20rem;z-index:10}#off-canvas-drawer--primary.off-canvas-drawer--is-active{transform:translate3D(0,0,0);z-index:10;width:20rem}#off-canvas-mask{height:100%;width:0;position:fixed;z-index:2;top:0;left:0;background-color:rgba(255,255,255,.5);overflow-y:auto;overflow-x:hidden;text-align:center;opacity:0;transition:opacity 125ms}#off-canvas-mask.off-canvas-drawer--is-active{width:100%;opacity:.5}.off-canvas-drawer a{color:#fff;border-top-style:solid;border-top-width:1px;border-color:#414141;box-shadow:none;box-sizing:border-box;padding:18px;padding-right:0;text-decoration:none}.off-canvas-drawer a:hover{color:#fff;border-color:#414141}.off-canvas-drawer .dropdown-menu a{color:#fff}.off-canvas-drawer .drawer__close{background-color:#686868;border-top:1px solid #414141;border-bottom:none;border-left:none;border-right:none;color:#fff;padding:18px;display:block;position:relative;text-transform:uppercase;text-align:right;width:100%}.off-canvas-drawer .drawer__close:hover{background-color:#4f4f4f}.off-canvas-drawer .drawer__close:focus{background-color:#424242}.off-canvas-drawer .nav>li>a:focus{background-color:#4f4f4f}.off-canvas-drawer .nav>li>a:hover{background-color:#4f4f4f}.off-canvas-drawer .btn-group{width:100%}.off-canvas-drawer .btn-group:hover>.btn{background-color:#4f4f4f}.off-canvas-drawer .btn-group:hover>.dropdown-toggle{background-color:#424242}.off-canvas-drawer .btn-group>a{width:100%;z-index:1}.off-canvas-drawer .btn-group>a:focus{background-color:#4f4f4f}.off-canvas-drawer .btn-group .dropdown-toggle{z-index:2;float:none;position:absolute;right:0;top:0;height:55px;box-shadow:none}.off-canvas-drawer .btn-group .dropdown-toggle:hover:after{color:#fff}.off-canvas-drawer .btn-group .dropdown-toggle:hover span{transform:rotate(90deg)}.off-canvas-drawer .btn-group .dropdown-toggle:focus:after{color:#fff}.off-canvas-drawer .btn-group .dropdown-toggle span{transition:all .3s ease}.off-canvas-drawer .btn-group .dropdown-menu{border:none;width:100%;margin-top:0}.off-canvas-drawer .btn-group .dropdown-menu li{border-bottom:none}.off-canvas-drawer .btn-group .dropdown-menu a{background-color:#828282;padding-top:18px;padding-bottom:18px}.off-canvas-drawer .btn-group>.btn{background-color:#686868;border-left:none;border-right:none;border-bottom:none;border-color:#414141;line-height:18px;box-shadow:none!important;background-image:none;text-align:left}.off-canvas-drawer .btn-group.open span{transform:rotate(90deg);transition:all .3s ease}.off-canvas-drawer .btn-group.open .btn.dropdown-toggle{background-color:#4f4f4f;border-color:#4f4f4f}.off-canvas-drawer .btn-group.open>.dropdown-menu{display:block;position:relative}.off-canvas-drawer button:focus{outline:0}.off-canvas-drawer .ubc7-arrow{background-position:-1113px -227px!important}@media screen and (min-width:998px){.drawer-toggle--hamburger{display:block;margin-top:2px;margin-right:13px;margin-bottom:3px}}@media screen and (min-width:1200px){.drawer-toggle--hamburger{margin-top:5px;margin-right:17px;margin-bottom:5px}#drawer-button{line-height:1.75em}}@media screen and (max-width:979px){.has-off-canvas-drawer #ubc7-unit-menu{display:none}}/*# sourceMappingURL=off.canvas.drawer.css.map */ \ No newline at end of file +#drawer-button{float:right;margin-right:17px;color:#000;border:none;background-color:rgba(0,0,0,0);font-family:Arial,Sans-Serif;padding:10px;font-size:14px;outline:0}#drawer-button:hover{background-color:#002145;color:#fff}#drawer-button:hover .icon-bar{background-color:#f5f5f5}#drawer-button .icon-bar{display:block;width:18px;height:2px;margin-top:3px;background-color:#000;-webkit-border-radius:1px;-moz-border-radius:1px;border-radius:1px;-webkit-box-shadow:0 1px 0 rgba(0,0,0,.25);-moz-box-shadow:0 1px 0 rgba(0,0,0,.25);box-shadow:0 1px 0 rgba(0,0,0,.25)}.icon-bar#drawer-button+.icon-bar{margin-top:3px}#drawer-button .hamburger__elem{display:inline-block}.drawer-toggle--hamburger{background-color:#fff;box-shadow:1px 1px 1px #191938;-webkit-box-shadow:1px 1px 1px #191938;float:right;height:24px;padding:11px 0 0 13px;width:32px}.drawer-toggle--hamburger:hover{box-shadow:1px 1px 1px #191938;-webkit-box-shadow:inset 1px 1px 1px #191938;-moz-box-shadow:1px 1px 1px #191938}.drawer-toggle--hamburger span{margin-top:3px;display:block;width:18px;height:2px;background-color:#002145;box-shadow:0 1px 0 rgba(0,0,0,.25)}.drawer-toggle--hamburger span:first-child{margin-top:0}.drawer-toggle--hamburger .off-canvas-drawer{color:#fff}#pushed-content{position:relative;z-index:1;display:block;transition:transform 125ms ease}#pushed-content.drawer--push-left.off-canvas-drawer--is-active{transform:translate3D(-20rem,0,0);box-shadow:2px 0 2px rgba(0,0,0,.15)}#pushed-content.drawer--push-right.off-canvas-drawer--is-active{transform:translate3D(20rem,0,0);box-shadow:2px 0 2px rgba(0,0,0,.15)}#off-canvas-drawer--primary{transition:transform 125ms ease,visibility 125ms ease;visibility:visible;height:100%;width:0;position:fixed;top:0;background-color:#686868;display:block;overflow:auto}#off-canvas-drawer--primary.drawer--cover-left{right:0;transform:translate3D(20rem,0,0)}#off-canvas-drawer--primary.drawer--push-left{right:0;transform:translate3D(20rem,0,0)}#off-canvas-drawer--primary.drawer--cover-right{left:0;transform:translate3D(-20rem,0,0)}#off-canvas-drawer--primary.drawer--push-right{left:0;transform:translate3D(-20rem,0,0)}#off-canvas-drawer--primary.off-canvas-drawer--is-animating{width:20rem;z-index:10}#off-canvas-drawer--primary.off-canvas-drawer--is-active{transform:translate3D(0,0,0);z-index:10;width:20rem}#off-canvas-mask{height:100%;width:0;position:fixed;z-index:2;top:0;left:0;background-color:rgba(255,255,255,.5);overflow-y:auto;overflow-x:hidden;text-align:center;opacity:0;transition:opacity 125ms}#off-canvas-mask.off-canvas-drawer--is-active{width:100%;opacity:.5}.off-canvas-drawer a{color:#fff;border-top-style:solid;border-top-width:1px;border-color:#414141;box-shadow:none;box-sizing:border-box;padding:18px;padding-right:0;text-decoration:none}.off-canvas-drawer a:hover{color:#fff;border-color:#414141}.off-canvas-drawer .dropdown-menu a{color:#fff}.off-canvas-drawer .drawer__close{background-color:#686868;border-top:1px solid #414141;border-bottom:none;border-left:none;border-right:none;color:#fff;padding:18px;display:block;position:relative;text-transform:uppercase;text-align:right;width:100%}.off-canvas-drawer .drawer__close:hover{background-color:#4f4f4f}.off-canvas-drawer .drawer__close:focus{background-color:#424242}.off-canvas-drawer .nav>li>a:focus{background-color:#4f4f4f}.off-canvas-drawer .nav>li>a:hover{background-color:#4f4f4f}.off-canvas-drawer .btn-group{width:100%}.off-canvas-drawer .btn-group:hover>.btn{background-color:#4f4f4f}.off-canvas-drawer .btn-group:hover>.dropdown-toggle{background-color:#424242}.off-canvas-drawer .btn-group>a{width:100%;z-index:1}.off-canvas-drawer .btn-group>a:focus{background-color:#4f4f4f}.off-canvas-drawer .btn-group .dropdown-toggle{z-index:2;float:none;position:absolute;right:0;top:0;height:55px;box-shadow:none}.off-canvas-drawer .btn-group .dropdown-toggle:hover:after{color:#fff}.off-canvas-drawer .btn-group .dropdown-toggle:hover span{transform:rotate(90deg)}.off-canvas-drawer .btn-group .dropdown-toggle:focus:after{color:#fff}.off-canvas-drawer .btn-group .dropdown-toggle span{transition:all .3s ease}.off-canvas-drawer .btn-group .dropdown-menu{border:none;width:100%;margin-top:0}.off-canvas-drawer .btn-group .dropdown-menu li{border-bottom:none}.off-canvas-drawer .btn-group .dropdown-menu a{background-color:#828282;padding-top:18px;padding-bottom:18px}.off-canvas-drawer .btn-group>.btn{background-color:#686868;border-left:none;border-right:none;border-bottom:none;border-color:#414141;line-height:18px;box-shadow:none!important;background-image:none;text-align:left}.off-canvas-drawer .btn-group.open span{transform:rotate(90deg);transition:all .3s ease}.off-canvas-drawer .btn-group.open .btn.dropdown-toggle{background-color:#4f4f4f;border-color:#4f4f4f}.off-canvas-drawer .btn-group.open>.dropdown-menu{display:block;position:relative}.off-canvas-drawer button:focus{outline:0}.off-canvas-drawer .ubc7-arrow{background-position:-1113px -227px!important}@media screen and (min-width:998px){.drawer-toggle--hamburger{display:block;margin-top:2px;margin-right:13px;margin-bottom:3px}}@media screen and (min-width:1200px){.drawer-toggle--hamburger{margin-top:5px;margin-right:17px;margin-bottom:5px}#drawer-button{line-height:1.75em}}@media screen and (max-width:979px){.has-off-canvas-drawer #ubc7-unit-menu{display:none}} \ No newline at end of file diff --git a/less/off.canvas.drawer.less b/less/off.canvas.drawer.less index c8444f8..723e1da 100644 --- a/less/off.canvas.drawer.less +++ b/less/off.canvas.drawer.less @@ -332,4 +332,4 @@ display: none; } } -} +} \ No newline at end of file From d95f1e7910b6790c971a048280b72a93c9df4818 Mon Sep 17 00:00:00 2001 From: Darko Hrgovic Date: Fri, 22 Jun 2018 13:48:45 -0700 Subject: [PATCH 24/42] Providing dark blue flyout bg boilerplate --- css/off.canvas.flyout.css | 2 +- less/off.canvas.flyout.less | 21 ++++++++++----------- 2 files changed, 11 insertions(+), 12 deletions(-) diff --git a/css/off.canvas.flyout.css b/css/off.canvas.flyout.css index 8730109..37d4fe2 100644 --- a/css/off.canvas.flyout.css +++ b/css/off.canvas.flyout.css @@ -1 +1 @@ -#flyout-button{position:fixed;top:50vh;right:0;color:#fff;border:none;background-color:#7C1F3D;font-family:Arial,Sans-Serif;padding:10px;font-size:14px;outline:0;transform:rotate(90deg);transform-origin:right top;z-index:9}#flyout-button:hover{background-color:#002145;color:#fff}#flyout-button:hover .icon-bar{background-color:#fff}.flyout-toggle--hamburger{background-color:#fff;box-shadow:1px 1px 1px #191938;-webkit-box-shadow:1px 1px 1px #191938;float:right;height:24px;padding:11px 0 0 13px;width:32px}.flyout-toggle--hamburger:hover{box-shadow:1px 1px 1px #191938;-webkit-box-shadow:inset 1px 1px 1px #191938;-moz-box-shadow:1px 1px 1px #191938}.flyout-toggle--hamburger span{margin-top:3px;display:block;width:18px;height:2px;background-color:#002145;box-shadow:0 1px 0 rgba(0,0,0,.25)}.flyout-toggle--hamburger span:first-child{margin-top:0}@media screen and (min-width:998px){.flyout-toggle--hamburger{display:block;margin-top:2px;margin-right:13px;margin-bottom:3px}}@media screen and (min-width:1200px){.flyout-toggle--hamburger{margin-top:5px;margin-right:17px;margin-bottom:5px}#flyout-button{line-height:1.75em}}#pushed-content-flyout{position:relative;z-index:1;display:block;transition:transform 125ms ease}#pushed-content-flyout.flyout--push-left.off-canvas-flyout--is-active{transform:translate3D(-20rem,0,0);box-shadow:2px 0 2px rgba(0,0,0,.15)}#pushed-content-flyout.flyout--push-right.off-canvas-flyout--is-active{transform:translate3D(20rem,0,0);box-shadow:2px 0 2px rgba(0,0,0,.15)}#off-canvas-flyout{transition:transform 125ms ease,visibility 125ms ease;visibility:visible;height:100%;width:0;position:fixed;top:0;background-color:#686868;display:block;overflow:auto}#off-canvas-flyout.flyout--cover-left,#off-canvas-flyout.flyout--push-left{right:0;transform:translate3D(20rem,0,0)}#off-canvas-flyout.flyout--cover-right,#off-canvas-flyout.flyout--push-right{left:0;transform:translate3D(-20rem,0,0)}#off-canvas-flyout.off-canvas-flyout--is-animating{width:20rem;z-index:10}#off-canvas-flyout.off-canvas-flyout--is-active{transform:translate3D(0,0,0);z-index:10;width:20rem}#off-canvas-mask-flyout{height:100%;width:0;position:fixed;z-index:2;top:0;left:0;background-color:rgba(255,255,255,.5);overflow-y:auto;overflow-x:hidden;text-align:center;opacity:0;transition:opacity 125ms}#off-canvas-mask-flyout.off-canvas-flyout--is-active{width:100%;opacity:.5}@media screen and (max-width:979px){.has-off-canvas-flyout #ubc7-unit-menu{display:block}.has-off-canvas-flyout #ubc7-unit-menu .drawer-toggle--primary{display:none}}.flyout-toggle--hamburger .off-canvas-flyout,.off-canvas-flyout .dropdown-menu a,.off-canvas-flyout a{color:#fff}.off-canvas-flyout .flyout__close{background-color:#686868;border-top:1px solid #414141;border-bottom:none;border-left:none;border-right:none;color:#fff;padding:60px 18px 18px;display:block;position:relative;text-transform:uppercase;text-align:right;width:100%}.off-canvas-flyout .flyout__close:hover{background-color:#4f4f4f}.off-canvas-flyout .flyout__close:focus{background-color:#424242}.off-canvas-flyout a{border-top-style:solid;border-top-width:1px;border-color:#414141;box-shadow:none;box-sizing:border-box;padding:18px;padding-right:0;text-decoration:none}.off-canvas-flyout a:hover{color:#fff;border-color:#414141}.off-canvas-flyout .btn-group:hover>.btn,.off-canvas-flyout .btn-group>a:focus,.off-canvas-flyout .nav>li>a:focus,.off-canvas-flyout .nav>li>a:hover{background-color:#4f4f4f}.off-canvas-flyout .btn-group{width:100%}.off-canvas-flyout .btn-group .dropdown-toggle{z-index:2;float:none;position:absolute;right:0;top:0;height:55px;box-shadow:none}.off-canvas-flyout .btn-group .dropdown-toggle:focus:after,.off-canvas-flyout .btn-group .dropdown-toggle:hover:after{color:#fff}.off-canvas-flyout .btn-group .dropdown-toggle span{transition:all .3s ease}.off-canvas-flyout .btn-group .dropdown-toggle:hover span{transform:rotate(90deg)}.off-canvas-flyout .btn-group .dropdown-menu{border:none;width:100%;margin-top:0}.off-canvas-flyout .btn-group .dropdown-menu li{border-bottom:none}.off-canvas-flyout .btn-group .dropdown-menu a{background-color:#828282;padding-top:18px;padding-bottom:18px}.off-canvas-flyout .btn-group>a{width:100%;z-index:1}.off-canvas-flyout .btn-group>.btn{background-color:#686868;border-left:none;border-right:none;border-bottom:none;border-color:#414141;line-height:18px;box-shadow:none!important;background-image:none;text-align:left}.off-canvas-flyout .btn-group:hover>.dropdown-toggle{background-color:#424242}.off-canvas-flyout .btn-group.open span{transform:rotate(90deg);transition:all .3s ease}.off-canvas-flyout .btn-group.open .btn.dropdown-toggle{background-color:#4f4f4f;border-color:#4f4f4f}.off-canvas-flyout .btn-group.open>.dropdown-menu{display:block;position:relative}.off-canvas-flyout button:focus{outline:0}.off-canvas-flyout .ubc7-arrow{background-position:-1113px -227px!important}#flyout-button .icon-bar{display:block;width:18px;height:2px;background-color:#fff;-webkit-border-radius:1px;-moz-border-radius:1px;border-radius:1px;-webkit-box-shadow:0 1px 0 rgba(0,0,0,.25);-moz-box-shadow:0 1px 0 rgba(0,0,0,.25);box-shadow:0 1px 0 rgba(0,0,0,.25)}#flyout-button .icon-bar+.icon-bar{margin-top:3px}#flyout-button .hamburger__elem{display:inline-block;margin-left:5px;text-transform:uppercase} \ No newline at end of file +#flyout-button{position:fixed;top:50vh;right:0;color:#fff;border:none;background-color:#7C1F3D;font-family:Arial,Sans-Serif;padding:10px;font-size:14px;outline:0;transform:rotate(90deg);transform-origin:right top;z-index:9}#flyout-button:hover{background-color:#002145;color:#fff}#flyout-button:hover .icon-bar{background-color:#fff}.flyout-toggle--hamburger{background-color:#fff;box-shadow:1px 1px 1px #191938;-webkit-box-shadow:1px 1px 1px #191938;float:right;height:24px;padding:11px 0 0 13px;width:32px}.flyout-toggle--hamburger:hover{box-shadow:1px 1px 1px #191938;-webkit-box-shadow:inset 1px 1px 1px #191938;-moz-box-shadow:1px 1px 1px #191938}.flyout-toggle--hamburger span{margin-top:3px;display:block;width:18px;height:2px;background-color:#002145;box-shadow:0 1px 0 rgba(0,0,0,.25)}.flyout-toggle--hamburger span:first-child{margin-top:0}@media screen and (min-width:998px){.flyout-toggle--hamburger{display:block;margin-top:2px;margin-right:13px;margin-bottom:3px}}@media screen and (min-width:1200px){.flyout-toggle--hamburger{margin-top:5px;margin-right:17px;margin-bottom:5px}#flyout-button{line-height:1.75em}}#pushed-content-flyout{position:relative;z-index:1;display:block;transition:transform 125ms ease}#pushed-content-flyout.flyout--push-left.off-canvas-flyout--is-active{transform:translate3D(-20rem,0,0);box-shadow:2px 0 2px rgba(0,0,0,.15)}#pushed-content-flyout.flyout--push-right.off-canvas-flyout--is-active{transform:translate3D(20rem,0,0);box-shadow:2px 0 2px rgba(0,0,0,.15)}#off-canvas-flyout{transition:transform 125ms ease,visibility 125ms ease;visibility:visible;height:100%;width:0;position:fixed;top:0;background-color:#002145;display:block;overflow:auto}#off-canvas-flyout h2{padding:14px;color:#fff;font-weight:400}#off-canvas-flyout.flyout--cover-left,#off-canvas-flyout.flyout--push-left{right:0;transform:translate3D(20rem,0,0)}#off-canvas-flyout.flyout--cover-right,#off-canvas-flyout.flyout--push-right{left:0;transform:translate3D(-20rem,0,0)}#off-canvas-flyout.off-canvas-flyout--is-animating{width:20rem;z-index:10}#off-canvas-flyout.off-canvas-flyout--is-active{transform:translate3D(0,0,0);z-index:10;width:20rem}#off-canvas-mask-flyout{height:100%;width:0;position:fixed;z-index:2;top:0;left:0;background-color:rgba(255,255,255,.5);overflow-y:auto;overflow-x:hidden;text-align:center;opacity:0;transition:opacity 125ms}#off-canvas-mask-flyout.off-canvas-flyout--is-active{width:100%;opacity:.5}@media screen and (max-width:979px){.has-off-canvas-flyout #ubc7-unit-menu{display:block}.has-off-canvas-flyout #ubc7-unit-menu .drawer-toggle--primary{display:none}}.flyout-toggle--hamburger .off-canvas-flyout,.off-canvas-flyout .dropdown-menu a,.off-canvas-flyout a{color:#fff}.off-canvas-flyout .flyout__close{background-color:#002145;border-top:none;border-bottom:none;border-left:none;border-right:none;color:#fff;padding:60px 18px 18px;display:block;position:relative;text-transform:uppercase;text-align:right;width:100%;font-size:36px}.off-canvas-flyout a{border-top-style:solid;border-top-width:1px;border-color:#414141;box-shadow:none;box-sizing:border-box;padding:18px;padding-right:0;text-decoration:none}.off-canvas-flyout a:hover{color:#fff;border-color:#414141}.off-canvas-flyout .btn-group:hover>.btn,.off-canvas-flyout .btn-group>a:focus,.off-canvas-flyout .nav>li>a:focus,.off-canvas-flyout .nav>li>a:hover{background-color:#4f4f4f}.off-canvas-flyout .btn-group{width:100%}.off-canvas-flyout .btn-group .dropdown-toggle{z-index:2;float:none;position:absolute;right:0;top:0;height:55px;box-shadow:none}.off-canvas-flyout .btn-group .dropdown-toggle:focus:after,.off-canvas-flyout .btn-group .dropdown-toggle:hover:after{color:#fff}.off-canvas-flyout .btn-group .dropdown-toggle span{transition:all .3s ease}.off-canvas-flyout .btn-group .dropdown-toggle:hover span{transform:rotate(90deg)}.off-canvas-flyout .btn-group .dropdown-menu{border:none;width:100%;margin-top:0}.off-canvas-flyout .btn-group .dropdown-menu li{border-bottom:none}.off-canvas-flyout .btn-group .dropdown-menu a{background-color:#828282;padding-top:18px;padding-bottom:18px}.off-canvas-flyout .btn-group>a{width:100%;z-index:1}.off-canvas-flyout .btn-group>.btn{background-color:#686868;border-left:none;border-right:none;border-bottom:none;border-color:#414141;line-height:18px;box-shadow:none!important;background-image:none;text-align:left}.off-canvas-flyout .btn-group:hover>.dropdown-toggle{background-color:#424242}.off-canvas-flyout .btn-group.open span{transform:rotate(90deg);transition:all .3s ease}.off-canvas-flyout .btn-group.open .btn.dropdown-toggle{background-color:#4f4f4f;border-color:#4f4f4f}.off-canvas-flyout .btn-group.open>.dropdown-menu{display:block;position:relative}.off-canvas-flyout button:focus{outline:0}.off-canvas-flyout .ubc7-arrow{background-position:-1113px -227px!important}#flyout-button .icon-bar{display:block;width:18px;height:2px;background-color:#fff;-webkit-border-radius:1px;-moz-border-radius:1px;border-radius:1px;-webkit-box-shadow:0 1px 0 rgba(0,0,0,.25);-moz-box-shadow:0 1px 0 rgba(0,0,0,.25);box-shadow:0 1px 0 rgba(0,0,0,.25)}#flyout-button .icon-bar+.icon-bar{margin-top:3px}#flyout-button .hamburger__elem{display:inline-block;margin-left:5px;text-transform:uppercase} \ No newline at end of file diff --git a/less/off.canvas.flyout.less b/less/off.canvas.flyout.less index 4580f11..0ebf3e0 100644 --- a/less/off.canvas.flyout.less +++ b/less/off.canvas.flyout.less @@ -96,9 +96,15 @@ width: 0; position: fixed; top: 0; - background-color: #686868; + background-color: #002145; display: block; overflow: auto; + + h2 { + padding: 14px; + color: white; + font-weight: 400; + } } #off-canvas-flyout.flyout--cover-left, #off-canvas-flyout.flyout--push-left { @@ -157,8 +163,8 @@ } .off-canvas-flyout .flyout__close { - background-color: #686868; - border-top: 1px solid #414141; + background-color: #002145; + border-top: none; border-bottom: none; border-left: none; border-right: none; @@ -169,14 +175,7 @@ text-transform: uppercase; text-align: right; width: 100%; -} - -.off-canvas-flyout .flyout__close:hover { - background-color: #4f4f4f; -} - -.off-canvas-flyout .flyout__close:focus { - background-color: #424242; + font-size: 36px; } .off-canvas-flyout a { From 8391e456713f2368e1ed128562b88841bd738ec5 Mon Sep 17 00:00:00 2001 From: Darko Hrgovic Date: Wed, 27 Jun 2018 09:30:42 -0700 Subject: [PATCH 25/42] Moved flyout button oiut of nav structure so it can be z-indexed below nav --- css/navigation.sticky.css | 2 +- less/navigation.sticky.less | 15 ++++++++++++--- templates/page/page.tpl.php | 36 ++++++++++++++++++++++-------------- 3 files changed, 35 insertions(+), 18 deletions(-) diff --git a/css/navigation.sticky.css b/css/navigation.sticky.css index 7206c88..84a05ea 100644 --- a/css/navigation.sticky.css +++ b/css/navigation.sticky.css @@ -1 +1 @@ -@media screen and (min-width:980px){body.unit-menu-is-sticky{padding-top:40px}#ubc7-unit-menu.navigation-is-sticky{position:fixed;top:0;width:100%;z-index:999}}@media screen and (min-width:980px) and (min-width:1200px){body.unit-menu-is-sticky{padding-top:45px}}@media screen and (max-width:979px){body.unit-area-is-sticky{padding-top:50px}#ubc7-unit.navigation-is-sticky{position:fixed;top:0;width:100%;z-index:999}#ubc7-unit.navigation-is-sticky .btn-navbar:first-child{margin-right:40px}#ubc7-unit-menu.navigation-is-sticky{position:fixed;top:50px;width:100%;z-index:999}} \ No newline at end of file +@media screen and (min-width:980px){body.unit-menu-is-sticky{padding-top:40px}#ubc7-unit-menu.navigation-is-sticky{position:fixed;top:0;width:100%;z-index:999}}@media screen and (min-width:980px) and (min-width:1200px){body.unit-menu-is-sticky{padding-top:45px}}@media screen and (max-width:979px){body.unit-area-is-sticky{padding-top:50px}body.unit-menu-is-sticky #ubc7-unit-menu .dropdown .btn-group .btn{margin-right:40px}#ubc7-unit.navigation-is-sticky{position:fixed;top:0;width:100%;z-index:999}#ubc7-unit.navigation-is-sticky .btn-navbar:first-child{margin-right:40px}#ubc7-unit-menu.navigation-is-sticky{position:fixed;top:50px;width:100%;z-index:999}} \ No newline at end of file diff --git a/less/navigation.sticky.less b/less/navigation.sticky.less index 9718516..b4a9ee3 100644 --- a/less/navigation.sticky.less +++ b/less/navigation.sticky.less @@ -26,15 +26,24 @@ padding-top: 50px; } + body.unit-menu-is-sticky { + + #ubc7-unit-menu .dropdown .btn-group .btn { + margin-right: 40px; + } + + } + #ubc7-unit.navigation-is-sticky { position: fixed; top: 0; width: 100%; z-index: 999; - } - #ubc7-unit.navigation-is-sticky .btn-navbar:first-child { - margin-right: 40px; + .btn-navbar:first-child { + margin-right: 40px; + } + } #ubc7-unit-menu.navigation-is-sticky { diff --git a/templates/page/page.tpl.php b/templates/page/page.tpl.php index 40ad978..375b656 100755 --- a/templates/page/page.tpl.php +++ b/templates/page/page.tpl.php @@ -158,18 +158,6 @@ - - - - - @@ -189,6 +177,26 @@
+ + + + + + + + +
+ +
+ +
@@ -201,7 +209,7 @@
- +
@@ -244,7 +252,7 @@
- + From fcdfafa09838aad6325d67270750cd480ca8f285 Mon Sep 17 00:00:00 2001 From: Darko Hrgovic Date: Wed, 27 Jun 2018 11:27:23 -0700 Subject: [PATCH 26/42] Added bg to main menu items that do not expand so that flyout menu does not poke through visually --- less/base.less | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/less/base.less b/less/base.less index e02424f..bc8a608 100755 --- a/less/base.less +++ b/less/base.less @@ -340,6 +340,10 @@ html.js fieldset.collapsed .fieldset-legend a:after { content: "+"; } padding-left: 0; padding-right: 0; } + #ubc7-unit-menu .nav-collapse li { + background: #fff; + } + // END 768-979 STYLES } From c59c01810b9ad2c46e82f0c09188f8e1ef8a0ba2 Mon Sep 17 00:00:00 2001 From: Darko Hrgovic Date: Wed, 27 Jun 2018 11:28:56 -0700 Subject: [PATCH 27/42] Flyout button z-index only needs to be 1 --- less/off.canvas.flyout.less | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/less/off.canvas.flyout.less b/less/off.canvas.flyout.less index 0ebf3e0..3703b4f 100644 --- a/less/off.canvas.flyout.less +++ b/less/off.canvas.flyout.less @@ -1,3 +1,9 @@ + +/* Menu should be on top */ +.has-off-canvas-flyout #ubc7-unit-navigation { + z-index: 2; +} + #flyout-button { position: fixed; top: 50vh; @@ -11,7 +17,7 @@ outline: 0; transform: rotate(90deg); transform-origin: right top; - z-index: 9; + z-index: 1; } #flyout-button:hover { From d63cb66ad81b238a359244d7405cfc1333d26c66 Mon Sep 17 00:00:00 2001 From: Darko Hrgovic Date: Wed, 27 Jun 2018 11:58:15 -0700 Subject: [PATCH 28/42] Cleaned CSS files --- css/clf_drupal.css | 2 +- css/off.canvas.flyout.css | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/css/clf_drupal.css b/css/clf_drupal.css index 7c0f3f5..5466f56 100755 --- a/css/clf_drupal.css +++ b/css/clf_drupal.css @@ -1 +1 @@ -.clearfix{*zoom:1}.clearfix:before,.clearfix:after{display:table;content:"";line-height:0}.clearfix:after{clear:both}.hide-text{font:0/0 a;color:transparent;text-shadow:none;background-color:transparent;border:0}.input-block-level{display:block;width:100%;min-height:28px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}article,aside,details,figcaption,figure,footer,header,main,mark,nav,section,summary,time{display:block}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}.ir{display:block;text-indent:-300%;overflow:hidden;background-repeat:no-repeat}.floatleft,.floatl{float:left;margin:0 10px 5px 0}.floatright,.floatr{float:right;margin:0 0 5px 10px}.visuallyhidden,.element-invisible,.skip a:link,.skip a:hover,.skip a:visited{position:absolute;left:-300%;top:auto;width:1px;height:1px;overflow:hidden}.skip a:active,.skip a:focus{position:static;width:auto;height:auto}#cke_contents_edit-body-und-0-value body{background:none !important}#admin-menu .shortcut-toolbar a{background:inherit}img,canvas{max-width:100%;height:auto}.ie8 img,.ie8 canvas{max-width:none}.media-wrapper,.embedded-video,.media_embed{position:relative;padding-bottom:56.25%;padding-top:30px;height:0 !important;overflow:hidden}.media-wrapper iframe,.media-wrapper object,.media-wrapper embed,.embedded-video iframe,.embedded-video object,.embedded-video embed,.media_embed iframe,.media_embed object,.media_embed embed{position:absolute;top:0;left:0;width:100% !important;height:100% !important}#edit-title{font-size:24px}#system-themes-form img{width:100px}.form-item .description{font-style:italic;line-height:1.2em;font-size:0.6875em;margin-top:5px;color:#777}#edit-delete{color:#c00}.node-unpublished{background-color:#fff}.node-unpublished div.unpublished{height:0;overflow:visible;color:#d8d8d8;font-size:4.6875em;line-height:1;font-family:Impact,"Arial Narrow",Helvetica,sans-serif;font-weight:bold;text-transform:uppercase;text-align:center;word-wrap:break-word}.item-list .pager li{padding:0}.item-list ul li{margin:0}.pager li.pager-current{display:inline-block;padding:5px 14px;background-color:#eee;border:1px solid #ddd}article footer{background-color:inherit}div.tabs{margin:0 0 5px 0}ul.primary,ul.secondary{width:99%}ul.primary{margin:0 0 .5em 0;padding:0;border-width:0;list-style:none;white-space:nowrap;line-height:normal;border-bottom:1px solid #eee}ul.primary li{float:left;margin:0;padding:0}ul.primary li.active a,ul.primary li.active a:hover{border-width:0;color:#000;background-color:#b3b3b3}ul.primary li a{display:block;height:28px;margin:0 3px 0 0;padding:0 0 0 5px;border-width:0;font-weight:bold;text-decoration:none;color:#777777;background-color:#eee;-webkit-border-top-right-radius:4px;-moz-border-radius-topright:4px;border-top-right-radius:4px;-webkit-border-top-left-radius:4px;-moz-border-radius-topleft:4px;border-top-left-radius:4px}ul.primary li a:hover{border-width:0;background-color:#d9d9d9}ul.primary li a .tab{display:block;height:24px;margin:0;padding:4px 13px 4px 6px;border-width:0;line-height:20px}ul.secondary{margin:0;padding:0 0 0 5px;border-bottom:1px solid silver;list-style:none;white-space:nowrap}ul.secondary li{float:left;margin:0 5px 0 0;padding:5px 0;border-right:none}ul.secondary a{display:block;height:24px;margin:0;padding:0;border:1px solid silver;text-decoration:none;color:#777777}ul.secondary a .active,.active ul.secondary a:hover{border:1px solid silver;color:#000}ul.secondary a .tab{display:block;height:18px;margin:0;padding:3px 8px;line-height:18px}.inflate{margin-left:-15px;margin-right:-15px;padding-left:0;padding-right:0}.nopadding{padding-left:0;padding-right:0}body{background-color:#ccc;font-family:Arial,"Helvetica Neue",Helvetica,sans-serif;min-width:240px}body.full-width{background-color:#fff}#main{background-color:#fff}#ubc7-unit-identifier.no-umbrella{line-height:2.25em}.no-gradient #ubc7-unit{box-shadow:none}.no-gradient #ubc7-unit-name a,.no-gradient #ubc7-unit-name a:hover{text-shadow:none}#ubc7-unit,#ubc7-unit-name a{color:#fff;text-shadow:1px 1px 2px #333333}.form-type-radio,.form-type-checkbox{margin-bottom:5px}.form-type-radio input[type="radio"],.form-type-checkbox input[type="checkbox"]{margin:0}.form-type-radio>label,.form-type-checkbox>label{display:inline-block;margin-bottom:0;padding-left:10px;line-height:20px}@media screen and (min--moz-device-pixel-ratio:0) and (min-width:1200px){#ubc7-unit-menu .nav>li>a{padding-top:11px !important}}#ubc7-unit-social-icons i:hover{color:#2f5d7c}.bootstrap-sidenav ul{margin:0}.bootstrap-sidenav ul>li>a{border:1px solid #d7e0e7;color:#002145;display:block;margin:0 0 -1px;padding:8px 14px 8px 28px;text-decoration:none}.bootstrap-sidenav .bootstrap-sidenav{box-shadow:none;-moz-box-shadow:none;-webkit-box-shadow:none}.bootstrap-sidenav>.active>a,.bootstrap-sidenav a.active{background:#d7e0e7}.bootstrap-sidenav .nav>li>a{padding-left:28px}.field-label-inline label{display:inline-block}html.js fieldset.collapsible .fieldset-legend,html.js fieldset.collapsed .fieldset-legend{background-image:none}html.js fieldset.collapsible .fieldset-legend a:after,html.js fieldset.collapsed .fieldset-legend a:after{position:absolute;left:0;top:0}html.js fieldset.collapsible .fieldset-legend a:after{content:"-"}html.js fieldset.collapsed .fieldset-legend a:after{content:"+"}#ubc7-search #block-search-form .form-actions{padding:0;margin-top:0;margin-bottom:0;background-color:inherit;border-top:none}#ubc7-search #block-search-form input[type="search"]{margin-bottom:0}@media screen and (max-width:979px){.inflate{margin-left:0;margin-right:0;padding-left:0;padding-right:0}}.crumbs{background:white}#panels-dnd-main div.panel-region h2.label{background-color:inherit;margin:.25em 0 .5em 0}.alert{color:#fff;padding:15px 35px 15px 15px;margin-top:1em;margin-bottom:1em;border-width:2px;border-radius:0}.alert a,.alert h4{color:#fff}a.close{position:relative;top:-2px;right:-21px;color:white !important;text-decoration:none;opacity:.4;padding:0;cursor:pointer;background:transparent;float:right;font-size:22.5px;font-weight:bold;line-height:1}a.close:hover{opacity:1}.alert h4.alert-heading{margin-top:0}.alert-warning{background-color:#ef8843;border-color:#d77a3c}.alert-danger,.alert-error{background-color:#b33542;border-color:#900f1d}.alert-success,.alert-status{background-color:#95be4f;border-color:#73963d}.alert-info{background-color:#324d6a;border-color:#00162f}.pull-right{float:right}.pull-left{float:left}.hide{display:none !important}.show{display:block !important}.invisible{visibility:hidden}#toolbar .bootstrap-sidenav{background-color:transparent}@media print{*{background-color:transparent}#toolbar,#ubc7-header,#navigation,#content-bottom,#ubc7-footer,aside,.breadcrumb,.tabs,.nav-tabs,.feed-icon,.links,.messages,.status,.skip{display:none !important}#page{width:100%}#main{margin:20px 0;width:auto}a:hover,a:active,a:link,a:visited{color:black}.collapsible>div,.ctools-collapsed>div{display:block !important}div#ubc7-unit{background:#fff !important;box-shadow:none;-moz-box-shadow:none;-webkit-box-shadow:none}#content a:link:after,#content a:visited:after{content:" (" attr(href) ") ";font-size:.8em;font-weight:normal}} \ No newline at end of file +.clearfix:after,.clearfix:before{display:table;content:"";line-height:0}.clearfix:after{clear:both}.hide-text{font:0/0 a;color:transparent;text-shadow:none;background-color:transparent;border:0}.input-block-level{display:block;width:100%;min-height:28px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}article,aside,details,figcaption,figure,footer,header,main,mark,nav,section,summary,time{display:block}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}.ir{display:block;text-indent:-300%;overflow:hidden;background-repeat:no-repeat}.floatl,.floatleft{float:left;margin:0 10px 5px 0}.floatr,.floatright{float:right;margin:0 0 5px 10px}.element-invisible,.skip a:hover,.skip a:link,.skip a:visited,.visuallyhidden{position:absolute;left:-300%;top:auto;width:1px;height:1px;overflow:hidden}.skip a:active,.skip a:focus{position:static;width:auto;height:auto}#cke_contents_edit-body-und-0-value body{background:0 0!important}#admin-menu .shortcut-toolbar a{background:inherit}canvas,img{max-width:100%;height:auto}.ie8 canvas,.ie8 img{max-width:none}.embedded-video,.media-wrapper,.media_embed{position:relative;padding-bottom:56.25%;padding-top:30px;height:0!important;overflow:hidden}.embedded-video embed,.embedded-video iframe,.embedded-video object,.media-wrapper embed,.media-wrapper iframe,.media-wrapper object,.media_embed embed,.media_embed iframe,.media_embed object{position:absolute;top:0;left:0;width:100%!important;height:100%!important}#edit-title{font-size:24px}#system-themes-form img{width:100px}.form-item .description{font-style:italic;line-height:1.2em;font-size:.6875em;margin-top:5px;color:#777}#edit-delete{color:#c00}.node-unpublished{background-color:#fff}.node-unpublished div.unpublished{height:0;overflow:visible;color:#d8d8d8;font-size:4.6875em;line-height:1;font-family:Impact,"Arial Narrow",Helvetica,sans-serif;font-weight:700;text-transform:uppercase;text-align:center;word-wrap:break-word}.item-list .pager li{padding:0}.item-list ul li{margin:0}.pager li.pager-current{display:inline-block;padding:5px 14px;background-color:#eee;border:1px solid #ddd}article footer{background-color:inherit}div.tabs{margin:0 0 5px 0}ul.primary,ul.secondary{width:99%}ul.primary{margin:0 0 .5em 0;padding:0;border-width:0;list-style:none;white-space:nowrap;line-height:normal;border-bottom:1px solid #eee}ul.primary li{float:left;margin:0;padding:0}ul.primary li.active a,ul.primary li.active a:hover{border-width:0;color:#000;background-color:#b3b3b3}ul.primary li a{display:block;height:28px;margin:0 3px 0 0;padding:0 0 0 5px;border-width:0;font-weight:700;text-decoration:none;color:#777;background-color:#eee;-webkit-border-top-right-radius:4px;-moz-border-radius-topright:4px;border-top-right-radius:4px;-webkit-border-top-left-radius:4px;-moz-border-radius-topleft:4px;border-top-left-radius:4px}ul.primary li a:hover{border-width:0;background-color:#d9d9d9}ul.primary li a .tab{display:block;height:24px;margin:0;padding:4px 13px 4px 6px;border-width:0;line-height:20px}ul.secondary{margin:0;padding:0 0 0 5px;border-bottom:1px solid silver;list-style:none;white-space:nowrap}ul.secondary li{float:left;margin:0 5px 0 0;padding:5px 0;border-right:none}ul.secondary a{display:block;height:24px;margin:0;padding:0;border:1px solid silver;text-decoration:none;color:#777}.active ul.secondary a:hover,ul.secondary a .active{border:1px solid silver;color:#000}ul.secondary a .tab{display:block;height:18px;margin:0;padding:3px 8px;line-height:18px}.inflate{margin-left:-15px;margin-right:-15px;padding-left:0;padding-right:0}.nopadding{padding-left:0;padding-right:0}body{background-color:#ccc;font-family:Arial,"Helvetica Neue",Helvetica,sans-serif;min-width:240px}body.full-width{background-color:#fff}#main{background-color:#fff}#ubc7-unit-identifier.no-umbrella{line-height:2.25em}.no-gradient #ubc7-unit{box-shadow:none}.no-gradient #ubc7-unit-name a,.no-gradient #ubc7-unit-name a:hover{text-shadow:none}#ubc7-unit,#ubc7-unit-name a{color:#fff;text-shadow:1px 1px 2px #333}.form-type-checkbox,.form-type-radio{margin-bottom:5px}.form-type-checkbox input[type=checkbox],.form-type-radio input[type=radio]{margin:0}.form-type-checkbox>label,.form-type-radio>label{display:inline-block;margin-bottom:0;padding-left:10px;line-height:20px}@media screen and (min--moz-device-pixel-ratio:0) and (min-width:1200px){#ubc7-unit-menu .nav>li>a{padding-top:11px!important}}#ubc7-unit-social-icons i:hover{color:#2f5d7c}.bootstrap-sidenav ul{margin:0}.bootstrap-sidenav ul>li>a{border:1px solid #d7e0e7;color:#002145;display:block;margin:0 0 -1px;padding:8px 14px 8px 28px;text-decoration:none}.bootstrap-sidenav .bootstrap-sidenav{box-shadow:none;-moz-box-shadow:none;-webkit-box-shadow:none}.bootstrap-sidenav a.active,.bootstrap-sidenav>.active>a{background:#d7e0e7}.bootstrap-sidenav .nav>li>a{padding-left:28px}.field-label-inline label{display:inline-block}html.js fieldset.collapsed .fieldset-legend,html.js fieldset.collapsible .fieldset-legend{background-image:none}html.js fieldset.collapsed .fieldset-legend a:after,html.js fieldset.collapsible .fieldset-legend a:after{position:absolute;left:0;top:0}html.js fieldset.collapsible .fieldset-legend a:after{content:"-"}html.js fieldset.collapsed .fieldset-legend a:after{content:"+"}#ubc7-search #block-search-form .form-actions{padding:0;margin-top:0;margin-bottom:0;background-color:inherit;border-top:none}#ubc7-search #block-search-form input[type=search]{margin-bottom:0}@media screen and (max-width:979px){.inflate{margin-left:0;margin-right:0;padding-left:0;padding-right:0}#ubc7-unit-menu .nav-collapse li{background:#fff}}.crumbs{background:#fff}#panels-dnd-main div.panel-region h2.label{background-color:inherit;margin:.25em 0 .5em 0}.alert{color:#fff;padding:15px 35px 15px 15px;margin-top:1em;margin-bottom:1em;border-width:2px;border-radius:0}.alert a,.alert h4{color:#fff}a.close{position:relative;top:-2px;right:-21px;color:#fff!important;text-decoration:none;opacity:.4;padding:0;cursor:pointer;background:0 0;float:right;font-size:22.5px;font-weight:700;line-height:1}a.close:hover{opacity:1}.alert h4.alert-heading{margin-top:0}.alert-warning{background-color:#ef8843;border-color:#d77a3c}.alert-danger,.alert-error{background-color:#b33542;border-color:#900f1d}.alert-status,.alert-success{background-color:#95be4f;border-color:#73963d}.alert-info{background-color:#324d6a;border-color:#00162f}.pull-right{float:right}.pull-left{float:left}.hide{display:none!important}.show{display:block!important}.invisible{visibility:hidden}#toolbar .bootstrap-sidenav{background-color:transparent}@media print{*{background-color:transparent}#content-bottom,#navigation,#toolbar,#ubc7-footer,#ubc7-header,.breadcrumb,.feed-icon,.links,.messages,.nav-tabs,.skip,.status,.tabs,aside{display:none!important}#page{width:100%}#main{margin:20px 0;width:auto}a:active,a:hover,a:link,a:visited{color:#000}.collapsible>div,.ctools-collapsed>div{display:block!important}div#ubc7-unit{background:#fff!important;box-shadow:none;-moz-box-shadow:none;-webkit-box-shadow:none}#content a:link:after,#content a:visited:after{content:" (" attr(href) ") ";font-size:.8em;font-weight:400}} \ No newline at end of file diff --git a/css/off.canvas.flyout.css b/css/off.canvas.flyout.css index 37d4fe2..6d08c3e 100644 --- a/css/off.canvas.flyout.css +++ b/css/off.canvas.flyout.css @@ -1 +1 @@ -#flyout-button{position:fixed;top:50vh;right:0;color:#fff;border:none;background-color:#7C1F3D;font-family:Arial,Sans-Serif;padding:10px;font-size:14px;outline:0;transform:rotate(90deg);transform-origin:right top;z-index:9}#flyout-button:hover{background-color:#002145;color:#fff}#flyout-button:hover .icon-bar{background-color:#fff}.flyout-toggle--hamburger{background-color:#fff;box-shadow:1px 1px 1px #191938;-webkit-box-shadow:1px 1px 1px #191938;float:right;height:24px;padding:11px 0 0 13px;width:32px}.flyout-toggle--hamburger:hover{box-shadow:1px 1px 1px #191938;-webkit-box-shadow:inset 1px 1px 1px #191938;-moz-box-shadow:1px 1px 1px #191938}.flyout-toggle--hamburger span{margin-top:3px;display:block;width:18px;height:2px;background-color:#002145;box-shadow:0 1px 0 rgba(0,0,0,.25)}.flyout-toggle--hamburger span:first-child{margin-top:0}@media screen and (min-width:998px){.flyout-toggle--hamburger{display:block;margin-top:2px;margin-right:13px;margin-bottom:3px}}@media screen and (min-width:1200px){.flyout-toggle--hamburger{margin-top:5px;margin-right:17px;margin-bottom:5px}#flyout-button{line-height:1.75em}}#pushed-content-flyout{position:relative;z-index:1;display:block;transition:transform 125ms ease}#pushed-content-flyout.flyout--push-left.off-canvas-flyout--is-active{transform:translate3D(-20rem,0,0);box-shadow:2px 0 2px rgba(0,0,0,.15)}#pushed-content-flyout.flyout--push-right.off-canvas-flyout--is-active{transform:translate3D(20rem,0,0);box-shadow:2px 0 2px rgba(0,0,0,.15)}#off-canvas-flyout{transition:transform 125ms ease,visibility 125ms ease;visibility:visible;height:100%;width:0;position:fixed;top:0;background-color:#002145;display:block;overflow:auto}#off-canvas-flyout h2{padding:14px;color:#fff;font-weight:400}#off-canvas-flyout.flyout--cover-left,#off-canvas-flyout.flyout--push-left{right:0;transform:translate3D(20rem,0,0)}#off-canvas-flyout.flyout--cover-right,#off-canvas-flyout.flyout--push-right{left:0;transform:translate3D(-20rem,0,0)}#off-canvas-flyout.off-canvas-flyout--is-animating{width:20rem;z-index:10}#off-canvas-flyout.off-canvas-flyout--is-active{transform:translate3D(0,0,0);z-index:10;width:20rem}#off-canvas-mask-flyout{height:100%;width:0;position:fixed;z-index:2;top:0;left:0;background-color:rgba(255,255,255,.5);overflow-y:auto;overflow-x:hidden;text-align:center;opacity:0;transition:opacity 125ms}#off-canvas-mask-flyout.off-canvas-flyout--is-active{width:100%;opacity:.5}@media screen and (max-width:979px){.has-off-canvas-flyout #ubc7-unit-menu{display:block}.has-off-canvas-flyout #ubc7-unit-menu .drawer-toggle--primary{display:none}}.flyout-toggle--hamburger .off-canvas-flyout,.off-canvas-flyout .dropdown-menu a,.off-canvas-flyout a{color:#fff}.off-canvas-flyout .flyout__close{background-color:#002145;border-top:none;border-bottom:none;border-left:none;border-right:none;color:#fff;padding:60px 18px 18px;display:block;position:relative;text-transform:uppercase;text-align:right;width:100%;font-size:36px}.off-canvas-flyout a{border-top-style:solid;border-top-width:1px;border-color:#414141;box-shadow:none;box-sizing:border-box;padding:18px;padding-right:0;text-decoration:none}.off-canvas-flyout a:hover{color:#fff;border-color:#414141}.off-canvas-flyout .btn-group:hover>.btn,.off-canvas-flyout .btn-group>a:focus,.off-canvas-flyout .nav>li>a:focus,.off-canvas-flyout .nav>li>a:hover{background-color:#4f4f4f}.off-canvas-flyout .btn-group{width:100%}.off-canvas-flyout .btn-group .dropdown-toggle{z-index:2;float:none;position:absolute;right:0;top:0;height:55px;box-shadow:none}.off-canvas-flyout .btn-group .dropdown-toggle:focus:after,.off-canvas-flyout .btn-group .dropdown-toggle:hover:after{color:#fff}.off-canvas-flyout .btn-group .dropdown-toggle span{transition:all .3s ease}.off-canvas-flyout .btn-group .dropdown-toggle:hover span{transform:rotate(90deg)}.off-canvas-flyout .btn-group .dropdown-menu{border:none;width:100%;margin-top:0}.off-canvas-flyout .btn-group .dropdown-menu li{border-bottom:none}.off-canvas-flyout .btn-group .dropdown-menu a{background-color:#828282;padding-top:18px;padding-bottom:18px}.off-canvas-flyout .btn-group>a{width:100%;z-index:1}.off-canvas-flyout .btn-group>.btn{background-color:#686868;border-left:none;border-right:none;border-bottom:none;border-color:#414141;line-height:18px;box-shadow:none!important;background-image:none;text-align:left}.off-canvas-flyout .btn-group:hover>.dropdown-toggle{background-color:#424242}.off-canvas-flyout .btn-group.open span{transform:rotate(90deg);transition:all .3s ease}.off-canvas-flyout .btn-group.open .btn.dropdown-toggle{background-color:#4f4f4f;border-color:#4f4f4f}.off-canvas-flyout .btn-group.open>.dropdown-menu{display:block;position:relative}.off-canvas-flyout button:focus{outline:0}.off-canvas-flyout .ubc7-arrow{background-position:-1113px -227px!important}#flyout-button .icon-bar{display:block;width:18px;height:2px;background-color:#fff;-webkit-border-radius:1px;-moz-border-radius:1px;border-radius:1px;-webkit-box-shadow:0 1px 0 rgba(0,0,0,.25);-moz-box-shadow:0 1px 0 rgba(0,0,0,.25);box-shadow:0 1px 0 rgba(0,0,0,.25)}#flyout-button .icon-bar+.icon-bar{margin-top:3px}#flyout-button .hamburger__elem{display:inline-block;margin-left:5px;text-transform:uppercase} \ No newline at end of file +.has-off-canvas-flyout #ubc7-unit-navigation{z-index:2}#flyout-button{position:fixed;top:50vh;right:0;color:#fff;border:none;background-color:#7C1F3D;font-family:Arial,Sans-Serif;padding:10px;font-size:14px;outline:0;transform:rotate(90deg);transform-origin:right top;z-index:1}#flyout-button:hover{background-color:#002145;color:#fff}#flyout-button:hover .icon-bar{background-color:#fff}.flyout-toggle--hamburger{background-color:#fff;box-shadow:1px 1px 1px #191938;-webkit-box-shadow:1px 1px 1px #191938;float:right;height:24px;padding:11px 0 0 13px;width:32px}.flyout-toggle--hamburger:hover{box-shadow:1px 1px 1px #191938;-webkit-box-shadow:inset 1px 1px 1px #191938;-moz-box-shadow:1px 1px 1px #191938}.flyout-toggle--hamburger span{margin-top:3px;display:block;width:18px;height:2px;background-color:#002145;box-shadow:0 1px 0 rgba(0,0,0,.25)}.flyout-toggle--hamburger span:first-child{margin-top:0}@media screen and (min-width:998px){.flyout-toggle--hamburger{display:block;margin-top:2px;margin-right:13px;margin-bottom:3px}}@media screen and (min-width:1200px){.flyout-toggle--hamburger{margin-top:5px;margin-right:17px;margin-bottom:5px}#flyout-button{line-height:1.75em}}#pushed-content-flyout{position:relative;z-index:1;display:block;transition:transform 125ms ease}#pushed-content-flyout.flyout--push-left.off-canvas-flyout--is-active{transform:translate3D(-20rem,0,0);box-shadow:2px 0 2px rgba(0,0,0,.15)}#pushed-content-flyout.flyout--push-right.off-canvas-flyout--is-active{transform:translate3D(20rem,0,0);box-shadow:2px 0 2px rgba(0,0,0,.15)}#off-canvas-flyout{transition:transform 125ms ease,visibility 125ms ease;visibility:visible;height:100%;width:0;position:fixed;top:0;background-color:#002145;display:block;overflow:auto}#off-canvas-flyout h2{padding:14px;color:#fff;font-weight:400}#off-canvas-flyout.flyout--cover-left,#off-canvas-flyout.flyout--push-left{right:0;transform:translate3D(20rem,0,0)}#off-canvas-flyout.flyout--cover-right,#off-canvas-flyout.flyout--push-right{left:0;transform:translate3D(-20rem,0,0)}#off-canvas-flyout.off-canvas-flyout--is-animating{width:20rem;z-index:10}#off-canvas-flyout.off-canvas-flyout--is-active{transform:translate3D(0,0,0);z-index:10;width:20rem}#off-canvas-mask-flyout{height:100%;width:0;position:fixed;z-index:2;top:0;left:0;background-color:rgba(255,255,255,.5);overflow-y:auto;overflow-x:hidden;text-align:center;opacity:0;transition:opacity 125ms}#off-canvas-mask-flyout.off-canvas-flyout--is-active{width:100%;opacity:.5}@media screen and (max-width:979px){.has-off-canvas-flyout #ubc7-unit-menu{display:block}.has-off-canvas-flyout #ubc7-unit-menu .drawer-toggle--primary{display:none}}.flyout-toggle--hamburger .off-canvas-flyout,.off-canvas-flyout .dropdown-menu a,.off-canvas-flyout a{color:#fff}.off-canvas-flyout .flyout__close{background-color:#002145;border-top:none;border-bottom:none;border-left:none;border-right:none;color:#fff;padding:60px 18px 18px;display:block;position:relative;text-transform:uppercase;text-align:right;width:100%;font-size:36px}.off-canvas-flyout a{border-top-style:solid;border-top-width:1px;border-color:#414141;box-shadow:none;box-sizing:border-box;padding:18px;padding-right:0;text-decoration:none}.off-canvas-flyout a:hover{color:#fff;border-color:#414141}.off-canvas-flyout .btn-group:hover>.btn,.off-canvas-flyout .btn-group>a:focus,.off-canvas-flyout .nav>li>a:focus,.off-canvas-flyout .nav>li>a:hover{background-color:#4f4f4f}.off-canvas-flyout .btn-group{width:100%}.off-canvas-flyout .btn-group .dropdown-toggle{z-index:2;float:none;position:absolute;right:0;top:0;height:55px;box-shadow:none}.off-canvas-flyout .btn-group .dropdown-toggle:focus:after,.off-canvas-flyout .btn-group .dropdown-toggle:hover:after{color:#fff}.off-canvas-flyout .btn-group .dropdown-toggle span{transition:all .3s ease}.off-canvas-flyout .btn-group .dropdown-toggle:hover span{transform:rotate(90deg)}.off-canvas-flyout .btn-group .dropdown-menu{border:none;width:100%;margin-top:0}.off-canvas-flyout .btn-group .dropdown-menu li{border-bottom:none}.off-canvas-flyout .btn-group .dropdown-menu a{background-color:#828282;padding-top:18px;padding-bottom:18px}.off-canvas-flyout .btn-group>a{width:100%;z-index:1}.off-canvas-flyout .btn-group>.btn{background-color:#686868;border-left:none;border-right:none;border-bottom:none;border-color:#414141;line-height:18px;box-shadow:none!important;background-image:none;text-align:left}.off-canvas-flyout .btn-group:hover>.dropdown-toggle{background-color:#424242}.off-canvas-flyout .btn-group.open span{transform:rotate(90deg);transition:all .3s ease}.off-canvas-flyout .btn-group.open .btn.dropdown-toggle{background-color:#4f4f4f;border-color:#4f4f4f}.off-canvas-flyout .btn-group.open>.dropdown-menu{display:block;position:relative}.off-canvas-flyout button:focus{outline:0}.off-canvas-flyout .ubc7-arrow{background-position:-1113px -227px!important}#flyout-button .icon-bar{display:block;width:18px;height:2px;background-color:#fff;-webkit-border-radius:1px;-moz-border-radius:1px;border-radius:1px;-webkit-box-shadow:0 1px 0 rgba(0,0,0,.25);-moz-box-shadow:0 1px 0 rgba(0,0,0,.25);box-shadow:0 1px 0 rgba(0,0,0,.25)}#flyout-button .icon-bar+.icon-bar{margin-top:3px}#flyout-button .hamburger__elem{display:inline-block;margin-left:5px;text-transform:uppercase} \ No newline at end of file From 9729f483dd07fe89f0ea2d7c2ca24b88005c006b Mon Sep 17 00:00:00 2001 From: Darko Hrgovic Date: Wed, 4 Jul 2018 15:07:24 -0700 Subject: [PATCH 29/42] Adding .DS_Store to gitignore --- .gitignore | 2 ++ 1 file changed, 2 insertions(+) diff --git a/.gitignore b/.gitignore index 64acf94..d41e77d 100644 --- a/.gitignore +++ b/.gitignore @@ -4,3 +4,5 @@ node_modules/ # Postcss-fied CSS files postcss/ + +.DS_Store From 63d5d0d1dfa40011736d489bbf84649083dc1d3e Mon Sep 17 00:00:00 2001 From: Darko Hrgovic Date: Wed, 4 Jul 2018 15:08:53 -0700 Subject: [PATCH 30/42] Fixes for drawer and made the mobile drop-down nav scrollable like the drawer nav when taller than viewport --- css/clf_drupal.css | 657 +++++++++++++++++++++++++++++++++++- css/navigation.sticky.css | 53 ++- css/off.canvas.drawer.css | 283 +++++++++++++++- less/.DS_Store | Bin 0 -> 6148 bytes less/navigation.sticky.less | 26 +- 5 files changed, 1008 insertions(+), 11 deletions(-) create mode 100644 less/.DS_Store diff --git a/css/clf_drupal.css b/css/clf_drupal.css index 7c0f3f5..026adf1 100755 --- a/css/clf_drupal.css +++ b/css/clf_drupal.css @@ -1 +1,656 @@ -.clearfix{*zoom:1}.clearfix:before,.clearfix:after{display:table;content:"";line-height:0}.clearfix:after{clear:both}.hide-text{font:0/0 a;color:transparent;text-shadow:none;background-color:transparent;border:0}.input-block-level{display:block;width:100%;min-height:28px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}article,aside,details,figcaption,figure,footer,header,main,mark,nav,section,summary,time{display:block}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}.ir{display:block;text-indent:-300%;overflow:hidden;background-repeat:no-repeat}.floatleft,.floatl{float:left;margin:0 10px 5px 0}.floatright,.floatr{float:right;margin:0 0 5px 10px}.visuallyhidden,.element-invisible,.skip a:link,.skip a:hover,.skip a:visited{position:absolute;left:-300%;top:auto;width:1px;height:1px;overflow:hidden}.skip a:active,.skip a:focus{position:static;width:auto;height:auto}#cke_contents_edit-body-und-0-value body{background:none !important}#admin-menu .shortcut-toolbar a{background:inherit}img,canvas{max-width:100%;height:auto}.ie8 img,.ie8 canvas{max-width:none}.media-wrapper,.embedded-video,.media_embed{position:relative;padding-bottom:56.25%;padding-top:30px;height:0 !important;overflow:hidden}.media-wrapper iframe,.media-wrapper object,.media-wrapper embed,.embedded-video iframe,.embedded-video object,.embedded-video embed,.media_embed iframe,.media_embed object,.media_embed embed{position:absolute;top:0;left:0;width:100% !important;height:100% !important}#edit-title{font-size:24px}#system-themes-form img{width:100px}.form-item .description{font-style:italic;line-height:1.2em;font-size:0.6875em;margin-top:5px;color:#777}#edit-delete{color:#c00}.node-unpublished{background-color:#fff}.node-unpublished div.unpublished{height:0;overflow:visible;color:#d8d8d8;font-size:4.6875em;line-height:1;font-family:Impact,"Arial Narrow",Helvetica,sans-serif;font-weight:bold;text-transform:uppercase;text-align:center;word-wrap:break-word}.item-list .pager li{padding:0}.item-list ul li{margin:0}.pager li.pager-current{display:inline-block;padding:5px 14px;background-color:#eee;border:1px solid #ddd}article footer{background-color:inherit}div.tabs{margin:0 0 5px 0}ul.primary,ul.secondary{width:99%}ul.primary{margin:0 0 .5em 0;padding:0;border-width:0;list-style:none;white-space:nowrap;line-height:normal;border-bottom:1px solid #eee}ul.primary li{float:left;margin:0;padding:0}ul.primary li.active a,ul.primary li.active a:hover{border-width:0;color:#000;background-color:#b3b3b3}ul.primary li a{display:block;height:28px;margin:0 3px 0 0;padding:0 0 0 5px;border-width:0;font-weight:bold;text-decoration:none;color:#777777;background-color:#eee;-webkit-border-top-right-radius:4px;-moz-border-radius-topright:4px;border-top-right-radius:4px;-webkit-border-top-left-radius:4px;-moz-border-radius-topleft:4px;border-top-left-radius:4px}ul.primary li a:hover{border-width:0;background-color:#d9d9d9}ul.primary li a .tab{display:block;height:24px;margin:0;padding:4px 13px 4px 6px;border-width:0;line-height:20px}ul.secondary{margin:0;padding:0 0 0 5px;border-bottom:1px solid silver;list-style:none;white-space:nowrap}ul.secondary li{float:left;margin:0 5px 0 0;padding:5px 0;border-right:none}ul.secondary a{display:block;height:24px;margin:0;padding:0;border:1px solid silver;text-decoration:none;color:#777777}ul.secondary a .active,.active ul.secondary a:hover{border:1px solid silver;color:#000}ul.secondary a .tab{display:block;height:18px;margin:0;padding:3px 8px;line-height:18px}.inflate{margin-left:-15px;margin-right:-15px;padding-left:0;padding-right:0}.nopadding{padding-left:0;padding-right:0}body{background-color:#ccc;font-family:Arial,"Helvetica Neue",Helvetica,sans-serif;min-width:240px}body.full-width{background-color:#fff}#main{background-color:#fff}#ubc7-unit-identifier.no-umbrella{line-height:2.25em}.no-gradient #ubc7-unit{box-shadow:none}.no-gradient #ubc7-unit-name a,.no-gradient #ubc7-unit-name a:hover{text-shadow:none}#ubc7-unit,#ubc7-unit-name a{color:#fff;text-shadow:1px 1px 2px #333333}.form-type-radio,.form-type-checkbox{margin-bottom:5px}.form-type-radio input[type="radio"],.form-type-checkbox input[type="checkbox"]{margin:0}.form-type-radio>label,.form-type-checkbox>label{display:inline-block;margin-bottom:0;padding-left:10px;line-height:20px}@media screen and (min--moz-device-pixel-ratio:0) and (min-width:1200px){#ubc7-unit-menu .nav>li>a{padding-top:11px !important}}#ubc7-unit-social-icons i:hover{color:#2f5d7c}.bootstrap-sidenav ul{margin:0}.bootstrap-sidenav ul>li>a{border:1px solid #d7e0e7;color:#002145;display:block;margin:0 0 -1px;padding:8px 14px 8px 28px;text-decoration:none}.bootstrap-sidenav .bootstrap-sidenav{box-shadow:none;-moz-box-shadow:none;-webkit-box-shadow:none}.bootstrap-sidenav>.active>a,.bootstrap-sidenav a.active{background:#d7e0e7}.bootstrap-sidenav .nav>li>a{padding-left:28px}.field-label-inline label{display:inline-block}html.js fieldset.collapsible .fieldset-legend,html.js fieldset.collapsed .fieldset-legend{background-image:none}html.js fieldset.collapsible .fieldset-legend a:after,html.js fieldset.collapsed .fieldset-legend a:after{position:absolute;left:0;top:0}html.js fieldset.collapsible .fieldset-legend a:after{content:"-"}html.js fieldset.collapsed .fieldset-legend a:after{content:"+"}#ubc7-search #block-search-form .form-actions{padding:0;margin-top:0;margin-bottom:0;background-color:inherit;border-top:none}#ubc7-search #block-search-form input[type="search"]{margin-bottom:0}@media screen and (max-width:979px){.inflate{margin-left:0;margin-right:0;padding-left:0;padding-right:0}}.crumbs{background:white}#panels-dnd-main div.panel-region h2.label{background-color:inherit;margin:.25em 0 .5em 0}.alert{color:#fff;padding:15px 35px 15px 15px;margin-top:1em;margin-bottom:1em;border-width:2px;border-radius:0}.alert a,.alert h4{color:#fff}a.close{position:relative;top:-2px;right:-21px;color:white !important;text-decoration:none;opacity:.4;padding:0;cursor:pointer;background:transparent;float:right;font-size:22.5px;font-weight:bold;line-height:1}a.close:hover{opacity:1}.alert h4.alert-heading{margin-top:0}.alert-warning{background-color:#ef8843;border-color:#d77a3c}.alert-danger,.alert-error{background-color:#b33542;border-color:#900f1d}.alert-success,.alert-status{background-color:#95be4f;border-color:#73963d}.alert-info{background-color:#324d6a;border-color:#00162f}.pull-right{float:right}.pull-left{float:left}.hide{display:none !important}.show{display:block !important}.invisible{visibility:hidden}#toolbar .bootstrap-sidenav{background-color:transparent}@media print{*{background-color:transparent}#toolbar,#ubc7-header,#navigation,#content-bottom,#ubc7-footer,aside,.breadcrumb,.tabs,.nav-tabs,.feed-icon,.links,.messages,.status,.skip{display:none !important}#page{width:100%}#main{margin:20px 0;width:auto}a:hover,a:active,a:link,a:visited{color:black}.collapsible>div,.ctools-collapsed>div{display:block !important}div#ubc7-unit{background:#fff !important;box-shadow:none;-moz-box-shadow:none;-webkit-box-shadow:none}#content a:link:after,#content a:visited:after{content:" (" attr(href) ") ";font-size:.8em;font-weight:normal}} \ No newline at end of file +.clearfix { + *zoom: 1; +} +.clearfix:before, +.clearfix:after { + display: table; + content: ""; + line-height: 0; +} +.clearfix:after { + clear: both; +} +.hide-text { + font: 0/0 a; + color: transparent; + text-shadow: none; + background-color: transparent; + border: 0; +} +/*.font-size(@font-size: 16) { +@rem: (@font-size / 10); +font-size: @font-size * 1px; +font-size: ~"@{rem}rem"; }*/ +.input-block-level { + display: block; + width: 100%; + min-height: 28px; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} +/*#grid { + + .core (@gridColumnWidth, @gridGutterWidth) { + + .spanX (@index) when (@index > 0) { + (~".span@{index}") { .span(@index); } + .spanX(@index - 1); + } + .spanX (0) {} + + .offsetX (@index) when (@index > 0) { + (~".offset@{index}") { .offset(@index); } + .offsetX(@index - 1); + } + .offsetX (0) {} + + .offset (@columns) { + margin-left: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns + 1)); + } + + .span (@columns) { + width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1)); + } + + .row { + margin-left: @gridGutterWidth * -1; + .clearfix(); + } + + [class*="span"] { + float: left; + margin-left: @gridGutterWidth; + } + + // Set the container width, and override it for fixed navbars in media queries + .container, + .navbar-fixed-top .container, + .navbar-fixed-bottom .container { .span(@gridColumns); } + + // generate .spanX and .offsetX + .spanX (@gridColumns); + .offsetX (@gridColumns); + + } + + .fluid (@fluidGridColumnWidth, @fluidGridGutterWidth) { + + .spanX (@index) when (@index > 0) { + (~".span@{index}") { .span(@index); } + .spanX(@index - 1); + } + .spanX (0) {} + + .offsetX (@index) when (@index > 0) { + (~'.offset@{index}') { .offset(@index); } + (~'.offset@{index}:first-child') { .offsetFirstChild(@index); } + .offsetX(@index - 1); + } + .offsetX (0) {} + + .offset (@columns) { + margin-left: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) + (@fluidGridGutterWidth*2); + *margin-left: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) - (.5 / @gridRowWidth * 100 * 1%) + (@fluidGridGutterWidth*2) - (.5 / @gridRowWidth * 100 * 1%); + } + + .offsetFirstChild (@columns) { + margin-left: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) + (@fluidGridGutterWidth); + *margin-left: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) - (.5 / @gridRowWidth * 100 * 1%) + @fluidGridGutterWidth - (.5 / @gridRowWidth * 100 * 1%); + } + + .span (@columns) { + width: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)); + *width: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) - (.5 / @gridRowWidth * 100 * 1%); + } + + .row-fluid { + width: 100%; + .clearfix(); + [class*="span"] { + .input-block-level(); + float: left; + margin-left: @fluidGridGutterWidth; + *margin-left: @fluidGridGutterWidth - (.5 / @gridRowWidth * 100 * 1%); + } + [class*="span"]:first-child { + margin-left: 0; + } + + // generate .spanX and .offsetX + .spanX (@gridColumns); + .offsetX (@gridColumns); + } + + } + + .input(@gridColumnWidth, @gridGutterWidth) { + + .spanX (@index) when (@index > 0) { + (~"input.span@{index}, textarea.span@{index}, .uneditable-input.span@{index}") { .span(@index); } + .spanX(@index - 1); + } + .spanX (0) {} + + .span(@columns) { + width: ((@gridColumnWidth) * @columns) + (@gridGutterWidth * (@columns - 1)) - 10; + } + + input, + textarea, + .uneditable-input { + margin-left: 0; // override margin-left from core grid system + } + + // Space grid-sized controls properly if multiple per line + .controls-row [class*="span"] + [class*="span"] { + margin-left: @gridGutterWidth; + } + + // generate .spanX + .spanX (@gridColumns); + + } + +}*/ +article, +aside, +details, +figcaption, +figure, +footer, +header, +main, +mark, +nav, +section, +summary, +time { + display: block; +} +/** + * Add the correct display in IE 9-. + */ +audio, +video { + display: inline-block; +} +/** + * Add the correct display in iOS 4-7. + */ +audio:not([controls]) { + display: none; + height: 0; +} +.ir { + display: block; + text-indent: -300%; + overflow: hidden; + background-repeat: no-repeat; +} +.floatleft, +.floatl { + float: left; + margin: 0 10px 5px 0; +} +.floatright, +.floatr { + float: right; + margin: 0 0 5px 10px; +} +.visuallyhidden, +.element-invisible, +.skip a:link, +.skip a:hover, +.skip a:visited { + position: absolute; + left: -300%; + top: auto; + width: 1px; + height: 1px; + overflow: hidden; +} +.skip a:active, +.skip a:focus { + position: static; + width: auto; + height: auto; +} +#cke_contents_edit-body-und-0-value body { + background: none !important; +} +#admin-menu .shortcut-toolbar a { + background: inherit; +} +img, +canvas { + max-width: 100%; + height: auto; +} +.ie8 img, +.ie8 canvas { + max-width: none; +} +.media-wrapper, +.embedded-video, +.media_embed { + position: relative; + padding-bottom: 56.25%; + /* 16/9 ratio */ + padding-top: 30px; + /* IE6 workaround*/ + height: 0 !important; + overflow: hidden; +} +.media-wrapper iframe, +.media-wrapper object, +.media-wrapper embed, +.embedded-video iframe, +.embedded-video object, +.embedded-video embed, +.media_embed iframe, +.media_embed object, +.media_embed embed { + position: absolute; + top: 0; + left: 0; + width: 100% !important; + height: 100% !important; +} +/* UI improvments */ +#edit-title { + font-size: 24px; +} +#system-themes-form img { + width: 100px; +} +.form-item .description { + font-style: italic; + line-height: 1.2em; + /* 16px is our base size - divide target size by 16 for a declaration of ems - but remember, unlike rems, they cascade */ + font-size: 0.6875em; + margin-top: 5px; + color: #777; +} +#edit-delete { + color: #c00; +} +.node-unpublished { + background-color: #fff; +} +.node-unpublished div.unpublished { + height: 0; + overflow: visible; + color: #d8d8d8; + /* 16px is our base size - divide target size by 16 for a declaration of ems - but remember, unlike rems, they cascade */ + font-size: 4.6875em; + line-height: 1; + font-family: Impact, "Arial Narrow", Helvetica, sans-serif; + font-weight: bold; + text-transform: uppercase; + text-align: center; + word-wrap: break-word; +} +/* Fix Pager Styles */ +.item-list .pager li { + padding: 0; +} +.item-list ul li { + margin: 0; +} +.pager li.pager-current { + display: inline-block; + padding: 5px 14px; + background-color: #eee; + border: 1px solid #ddd; +} +/* Fix ugly article footer styles */ +article footer { + background-color: inherit; +} +/* Add Tab styles that aren't hideous */ +/* @group Tabs */ +div.tabs { + margin: 0 0 5px 0; +} +ul.primary, +ul.secondary { + width: 99%; +} +ul.primary { + margin: 0 0 .5em 0; + padding: 0; + border-width: 0; + list-style: none; + white-space: nowrap; + line-height: normal; + border-bottom: 1px solid #eee; +} +ul.primary li { + float: left; + margin: 0; + padding: 0; +} +ul.primary li.active a, +ul.primary li.active a:hover { + border-width: 0; + color: #000; + background-color: #b3b3b3; +} +ul.primary li a { + display: block; + height: 28px; + margin: 0 3px 0 0; + padding: 0 0 0 5px; + border-width: 0; + font-weight: bold; + text-decoration: none; + color: #777777; + background-color: #eee; + -webkit-border-top-right-radius: 4px; + -moz-border-radius-topright: 4px; + border-top-right-radius: 4px; + -webkit-border-top-left-radius: 4px; + -moz-border-radius-topleft: 4px; + border-top-left-radius: 4px; +} +ul.primary li a:hover { + border-width: 0; + background-color: #d9d9d9; +} +ul.primary li a .tab { + display: block; + height: 24px; + margin: 0; + padding: 4px 13px 4px 6px; + border-width: 0; + line-height: 20px; +} +ul.secondary { + margin: 0; + padding: 0 0 0 5px; + border-bottom: 1px solid silver; + list-style: none; + white-space: nowrap; +} +ul.secondary li { + float: left; + margin: 0 5px 0 0; + padding: 5px 0; + border-right: none; +} +ul.secondary a { + display: block; + height: 24px; + margin: 0; + padding: 0; + border: 1px solid silver; + text-decoration: none; + color: #777777; +} +ul.secondary a .active, +.active ul.secondary a:hover { + border: 1px solid silver; + color: #000; +} +ul.secondary a .tab { + display: block; + height: 18px; + margin: 0; + padding: 3px 8px; + line-height: 18px; +} +/* @end */ +.inflate { + margin-left: -15px; + margin-right: -15px; + padding-left: 0; + padding-right: 0; +} +.nopadding { + padding-left: 0; + padding-right: 0; +} +body { + background-color: #ccc; + font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; + min-width: 240px; +} +body.full-width { + background-color: #fff; +} +#main { + background-color: #fff; +} +#ubc7-unit-identifier.no-umbrella { + line-height: 2.25em; +} +.no-gradient #ubc7-unit { + box-shadow: none; +} +.no-gradient #ubc7-unit-name a, +.no-gradient #ubc7-unit-name a:hover { + text-shadow: none; +} +#ubc7-unit, +#ubc7-unit-name a { + color: #fff; + text-shadow: 1px 1px 2px #333333; +} +.form-type-radio, +.form-type-checkbox { + margin-bottom: 5px; +} +.form-type-radio input[type="radio"], +.form-type-checkbox input[type="checkbox"] { + margin: 0; +} +.form-type-radio > label, +.form-type-checkbox > label { + display: inline-block; + margin-bottom: 0; + padding-left: 10px; + line-height: 20px; +} +@media screen and (min--moz-device-pixel-ratio: 0) and (min-width: 1200px) { + #ubc7-unit-menu .nav > li > a { + padding-top: 11px !important; + } +} +/** Social Icon **/ +#ubc7-unit-social-icons i:hover { + color: #2f5d7c; +} +.bootstrap-sidenav ul { + margin: 0; +} +.bootstrap-sidenav ul > li > a { + border: 1px solid #d7e0e7; + color: #002145; + display: block; + margin: 0 0 -1px; + padding: 8px 14px 8px 28px; + text-decoration: none; +} +.bootstrap-sidenav .bootstrap-sidenav { + box-shadow: none; + -moz-box-shadow: none; + -webkit-box-shadow: none; +} +/* add active style to sidenav */ +.bootstrap-sidenav > .active > a, +.bootstrap-sidenav a.active { + background: #d7e0e7; +} +.bootstrap-sidenav .nav > li > a { + padding-left: 28px; +} +.field-label-inline label { + display: inline-block; +} +html.js fieldset.collapsible .fieldset-legend, +html.js fieldset.collapsed .fieldset-legend { + background-image: none; +} +html.js fieldset.collapsible .fieldset-legend a:after, +html.js fieldset.collapsed .fieldset-legend a:after { + position: absolute; + left: 0; + top: 0; +} +html.js fieldset.collapsible .fieldset-legend a:after { + content: "-"; +} +html.js fieldset.collapsed .fieldset-legend a:after { + content: "+"; +} +#ubc7-search #block-search-form .form-actions { + padding: 0; + margin-top: 0; + margin-bottom: 0; + background-color: inherit; + border-top: none; +} +#ubc7-search #block-search-form input[type="search"] { + margin-bottom: 0; +} +@media screen and (max-width: 979px) { + .inflate { + margin-left: 0; + margin-right: 0; + padding-left: 0; + padding-right: 0; + } +} +.crumbs { + background: white; +} +#panels-dnd-main div.panel-region h2.label { + background-color: inherit; + margin: .25em 0 .5em 0; +} +/* UNIT Alert Styles +-------------------------------------------------- */ +/* VARIABLES */ +/* GENERAL STYLES */ +.alert { + color: #fff; + padding: 15px 35px 15px 15px; + margin-top: 1em; + margin-bottom: 1em; + border-width: 2px; + border-radius: 0; +} +.alert a, +.alert h4 { + color: #fff; +} +a.close { + position: relative; + top: -2px; + right: -21px; + color: white !important; + text-decoration: none; + opacity: 0.4; + padding: 0; + cursor: pointer; + background: transparent; + float: right; + font-size: 22.5px; + font-weight: bold; + line-height: 1; +} +a.close:hover { + opacity: 1; +} +.alert h4.alert-heading { + margin-top: 0; +} +.alert-warning { + background-color: #ef8843; + border-color: #d77a3c; +} +.alert-danger, +.alert-error { + background-color: #b33542; + border-color: #900f1d; +} +.alert-success, +.alert-status { + background-color: #95be4f; + border-color: #73963d; +} +.alert-info { + background-color: #324d6a; + border-color: #00162f; +} +.pull-right { + float: right; +} +.pull-left { + float: left; +} +.hide { + display: none !important; +} +.show { + display: block !important; +} +.invisible { + visibility: hidden; +} +#toolbar .bootstrap-sidenav { + background-color: transparent; +} +@media print { + /* Use this stylesheet for print styles only. */ + * { + background-color: transparent; + } + #toolbar, + #ubc7-header, + #navigation, + #content-bottom, + #ubc7-footer, + aside, + .breadcrumb, + .tabs, + .nav-tabs, + .feed-icon, + .links, + .messages, + .status, + .skip { + display: none !important; + } + #page { + width: 100%; + } + #main { + margin: 20px 0; + width: auto; + } + a:hover, + a:active, + a:link, + a:visited { + color: black; + } + .collapsible > div, + .ctools-collapsed > div { + display: block !important; + } + div#ubc7-unit { + background: #fff !important; + box-shadow: none; + -moz-box-shadow: none; + -webkit-box-shadow: none; + } + /* CSS2 selector to add visible href after links. */ + #content a:link:after, + #content a:visited:after { + content: " (" attr(href) ") "; + font-size: 0.8em; + font-weight: normal; + } +} diff --git a/css/navigation.sticky.css b/css/navigation.sticky.css index 7206c88..04e1ee7 100644 --- a/css/navigation.sticky.css +++ b/css/navigation.sticky.css @@ -1 +1,52 @@ -@media screen and (min-width:980px){body.unit-menu-is-sticky{padding-top:40px}#ubc7-unit-menu.navigation-is-sticky{position:fixed;top:0;width:100%;z-index:999}}@media screen and (min-width:980px) and (min-width:1200px){body.unit-menu-is-sticky{padding-top:45px}}@media screen and (max-width:979px){body.unit-area-is-sticky{padding-top:50px}#ubc7-unit.navigation-is-sticky{position:fixed;top:0;width:100%;z-index:999}#ubc7-unit.navigation-is-sticky .btn-navbar:first-child{margin-right:40px}#ubc7-unit-menu.navigation-is-sticky{position:fixed;top:50px;width:100%;z-index:999}} \ No newline at end of file +/** + * @file + * Placeholder + */ +#ubc7-unit-menu, +#ubc7-unit-menu .navbar-inner { + background: transparent !important; +} +@media screen and (min-width: 980px) { + body.unit-menu-is-sticky { + padding-top: 40px; + } + #ubc7-unit-menu.navigation-is-sticky { + position: fixed; + top: 0; + width: 100%; + z-index: 999; + height: 100%; + overflow-y: scroll; + } +} +@media screen and (min-width: 980px) and (min-width: 1200px) { + body.unit-menu-is-sticky { + padding-top: 45px; + } +} +@media screen and (max-width: 979px) { + body.unit-area-is-sticky { + padding-top: 50px; + } + body.unit-menu-is-sticky #ubc7-unit-menu .dropdown .btn-group .btn { + margin-right: 26px; + } + #ubc7-unit.navigation-is-sticky { + position: fixed; + top: 0; + width: 100%; + z-index: 999; + } + #ubc7-unit.navigation-is-sticky .btn-navbar:first-child { + margin-right: 40px; + } + #ubc7-unit-menu.navigation-is-sticky { + position: fixed; + top: 50px; + width: 100%; + z-index: 999; + height: 100%; + overflow-y: scroll; + } +} +/*# sourceMappingURL=navigation.sticky.css.map */ diff --git a/css/off.canvas.drawer.css b/css/off.canvas.drawer.css index 1ca8bee..6ac046a 100644 --- a/css/off.canvas.drawer.css +++ b/css/off.canvas.drawer.css @@ -1 +1,282 @@ -body.drawer-contains-primary-nav #ubc7-unit-navigation.collapse{display:none}#drawer-button{float:right;margin-right:17px;color:#000;border:none;background-color:rgba(0,0,0,0);font-family:Arial,Sans-Serif;padding:10px;font-size:14px;outline:0}#drawer-button:hover{background-color:#002145;color:#fff}#drawer-button:hover .icon-bar{background-color:#f5f5f5}#drawer-button .icon-bar{display:block;width:18px;height:2px;margin-top:2px;background-color:#000;-webkit-border-radius:1px;-moz-border-radius:1px;border-radius:1px;-webkit-box-shadow:0 1px 0 rgba(0,0,0,.25);-moz-box-shadow:0 1px 0 rgba(0,0,0,.25);box-shadow:0 1px 0 rgba(0,0,0,.25)}.icon-bar#drawer-button+.icon-bar{margin-top:3px}#drawer-button .hamburger__elem{display:inline-block}.drawer-toggle--hamburger{background-color:#fff;box-shadow:1px 1px 1px #191938;-webkit-box-shadow:1px 1px 1px #191938;float:right;height:24px;padding:11px 0 0 13px;width:32px}.drawer-toggle--hamburger:hover{box-shadow:1px 1px 1px #191938;-webkit-box-shadow:inset 1px 1px 1px #191938;-moz-box-shadow:1px 1px 1px #191938}.drawer-toggle--hamburger span{margin-top:3px;display:block;width:18px;height:2px;background-color:#002145;box-shadow:0 1px 0 rgba(0,0,0,.25)}.drawer-toggle--hamburger span:first-child{margin-top:0}.drawer-toggle--hamburger .off-canvas-drawer{color:#fff}#pushed-content{position:relative;z-index:1;display:block;transition:transform 125ms ease}#pushed-content.drawer--push-left.off-canvas-drawer--is-active{transform:translate3D(-20rem,0,0);box-shadow:2px 0 2px rgba(0,0,0,.15)}#pushed-content.drawer--push-right.off-canvas-drawer--is-active{transform:translate3D(20rem,0,0);box-shadow:2px 0 2px rgba(0,0,0,.15)}#off-canvas-drawer--primary{transition:transform 125ms ease,visibility 125ms ease;visibility:visible;height:100%;width:0;position:fixed;top:0;background-color:#686868;display:block;overflow:auto}#off-canvas-drawer--primary.drawer--cover-left{right:0;transform:translate3D(20rem,0,0)}#off-canvas-drawer--primary.drawer--push-left{right:0;transform:translate3D(20rem,0,0)}#off-canvas-drawer--primary.drawer--cover-right{left:0;transform:translate3D(-20rem,0,0)}#off-canvas-drawer--primary.drawer--push-right{left:0;transform:translate3D(-20rem,0,0)}#off-canvas-drawer--primary.off-canvas-drawer--is-animating{width:20rem;z-index:10}#off-canvas-drawer--primary.off-canvas-drawer--is-active{transform:translate3D(0,0,0);z-index:10;width:20rem}#off-canvas-mask{height:100%;width:0;position:fixed;z-index:2;top:0;left:0;background-color:rgba(255,255,255,.5);overflow-y:auto;overflow-x:hidden;text-align:center;opacity:0;transition:opacity 125ms}#off-canvas-mask.off-canvas-drawer--is-active{width:100%;opacity:.5}.off-canvas-drawer a{color:#fff;border-top-style:solid;border-top-width:1px;border-color:#414141;box-shadow:none;box-sizing:border-box;padding:18px;padding-right:0;text-decoration:none}.off-canvas-drawer a:hover{color:#fff;border-color:#414141}.off-canvas-drawer .dropdown-menu a{color:#fff}.off-canvas-drawer .drawer__close{background-color:#686868;border-top:1px solid #414141;border-bottom:none;border-left:none;border-right:none;color:#fff;padding:18px;display:block;position:relative;text-transform:uppercase;text-align:right;width:100%}.off-canvas-drawer .drawer__close:hover{background-color:#4f4f4f}.off-canvas-drawer .drawer__close:focus{background-color:#424242}.off-canvas-drawer .nav>li>a:focus{background-color:#4f4f4f}.off-canvas-drawer .nav>li>a:hover{background-color:#4f4f4f}.off-canvas-drawer .btn-group{width:100%}.off-canvas-drawer .btn-group:hover>.btn{background-color:#4f4f4f}.off-canvas-drawer .btn-group:hover>.dropdown-toggle{background-color:#424242}.off-canvas-drawer .btn-group>a{width:100%;z-index:1}.off-canvas-drawer .btn-group>a:focus{background-color:#4f4f4f}.off-canvas-drawer .btn-group .dropdown-toggle{z-index:2;float:none;position:absolute;right:0;top:0;height:55px;box-shadow:none}.off-canvas-drawer .btn-group .dropdown-toggle:hover:after{color:#fff}.off-canvas-drawer .btn-group .dropdown-toggle:hover span{transform:rotate(90deg)}.off-canvas-drawer .btn-group .dropdown-toggle:focus:after{color:#fff}.off-canvas-drawer .btn-group .dropdown-toggle span{transition:all .3s ease}.off-canvas-drawer .btn-group .dropdown-menu{border:none;width:100%;margin-top:0}.off-canvas-drawer .btn-group .dropdown-menu li{border-bottom:none}.off-canvas-drawer .btn-group .dropdown-menu a{background-color:#828282;padding-top:18px;padding-bottom:18px}.off-canvas-drawer .btn-group>.btn{background-color:#686868;border-left:none;border-right:none;border-bottom:none;border-color:#414141;line-height:18px;box-shadow:none!important;background-image:none;text-align:left}.off-canvas-drawer .btn-group.open span{transform:rotate(90deg);transition:all .3s ease}.off-canvas-drawer .btn-group.open .btn.dropdown-toggle{background-color:#4f4f4f;border-color:#4f4f4f}.off-canvas-drawer .btn-group.open>.dropdown-menu{display:block;position:relative}.off-canvas-drawer button:focus{outline:0}.off-canvas-drawer .ubc7-arrow{background-position:-1113px -227px!important}@media screen and (min-width:998px){.drawer-toggle--hamburger{display:block;margin-top:2px;margin-right:13px;margin-bottom:3px}}@media screen and (min-width:1200px){.drawer-toggle--hamburger{margin-top:5px;margin-right:17px;margin-bottom:5px}#drawer-button{line-height:1.75em}}@media screen and (max-width:979px){.has-off-canvas-drawer #ubc7-unit-menu{display:none}}/*# sourceMappingURL=off.canvas.drawer.css.map */ \ No newline at end of file +body.drawer-contains-primary-nav #ubc7-unit-navigation.collapse { + display: none; +} +#drawer-button { + float: right; + margin-right: 17px; + color: #000; + border: none; + background-color: rgba(0, 0, 0, 0); + font-family: Arial, Sans-Serif; + padding: 10px; + font-size: 14px; + outline: 0; +} +#drawer-button:hover { + background-color: #002145; + color: #fff; +} +#drawer-button:hover .icon-bar { + background-color: #f5f5f5; +} +#drawer-button .icon-bar { + display: block; + width: 18px; + height: 2px; + margin-top: 2px; + background-color: #000; + -webkit-border-radius: 1px; + -moz-border-radius: 1px; + border-radius: 1px; + -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); + -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); + box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); +} +.icon-bar#drawer-button + .icon-bar { + margin-top: 3px; +} +#drawer-button .hamburger__elem { + display: inline-block; +} +.drawer-toggle--hamburger { + background-color: #fff; + box-shadow: 1px 1px 1px #191938; + -webkit-box-shadow: 1px 1px 1px #191938; + float: right; + height: 24px; + padding: 11px 0 0 13px; + width: 32px; +} +.drawer-toggle--hamburger:hover { + box-shadow: 1px 1px 1px #191938; + -webkit-box-shadow: inset 1px 1px 1px #191938; + -moz-box-shadow: 1px 1px 1px #191938; +} +.drawer-toggle--hamburger span { + margin-top: 3px; + display: block; + width: 18px; + height: 2px; + background-color: #002145; + box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); +} +.drawer-toggle--hamburger span:first-child { + margin-top: 0; +} +.drawer-toggle--hamburger .off-canvas-drawer { + color: #fff; +} +#pushed-content { + position: relative; + z-index: 1; + display: block; + transition: transform 0.125s ease; +} +#pushed-content.drawer--push-left.off-canvas-drawer--is-active { + transform: translate3D(-20rem, 0, 0); + box-shadow: 2px 0 2px rgba(0, 0, 0, 0.15); +} +#pushed-content.drawer--push-right.off-canvas-drawer--is-active { + transform: translate3D(20rem, 0, 0); + box-shadow: 2px 0 2px rgba(0, 0, 0, 0.15); +} +#off-canvas-drawer--primary { + transition: transform 0.125s ease, visibility 0.125s ease; + visibility: visible; + height: 100%; + width: 0; + position: fixed; + top: 0; + background-color: #686868; + display: block; + overflow: auto; +} +#off-canvas-drawer--primary.drawer--cover-left { + right: 0; + transform: translate3D(20rem, 0, 0); +} +#off-canvas-drawer--primary.drawer--push-left { + right: 0; + transform: translate3D(20rem, 0, 0); +} +#off-canvas-drawer--primary.drawer--cover-right { + left: 0; + transform: translate3D(-20rem, 0, 0); +} +#off-canvas-drawer--primary.drawer--push-right { + left: 0; + transform: translate3D(-20rem, 0, 0); +} +#off-canvas-drawer--primary.off-canvas-drawer--is-animating { + width: 20rem; + z-index: 10; +} +#off-canvas-drawer--primary.off-canvas-drawer--is-active { + transform: translate3D(0, 0, 0); + z-index: 10; + width: 20rem; +} +#off-canvas-mask { + height: 100%; + width: 0; + position: fixed; + z-index: 2; + top: 0; + left: 0; + background-color: rgba(255, 255, 255, 0.5); + overflow-y: auto; + overflow-x: hidden; + text-align: center; + opacity: 0; + transition: opacity 0.125s; +} +#off-canvas-mask.off-canvas-drawer--is-active { + width: 100%; + opacity: 0.5; +} +.off-canvas-drawer a { + color: #fff; + border-top-style: solid; + border-top-width: 1px; + border-color: #414141; + box-shadow: none; + box-sizing: border-box; + padding: 18px; + padding-right: 0; + text-decoration: none; +} +.off-canvas-drawer a:hover { + color: #fff; + border-color: #414141; +} +.off-canvas-drawer .dropdown-menu a { + color: #fff; +} +.off-canvas-drawer .drawer__close { + background-color: #686868; + border-top: 1px solid #414141; + border-bottom: none; + border-left: none; + border-right: none; + color: #fff; + padding: 18px; + display: block; + position: relative; + text-transform: uppercase; + text-align: right; + width: 100%; +} +.off-canvas-drawer .drawer__close:hover { + background-color: #4f4f4f; +} +.off-canvas-drawer .drawer__close:focus { + background-color: #424242; +} +.off-canvas-drawer .nav > li > a:focus { + background-color: #4f4f4f; +} +.off-canvas-drawer .nav > li > a:hover { + background-color: #4f4f4f; +} +.off-canvas-drawer .btn-group { + width: 100%; +} +.off-canvas-drawer .btn-group:hover > .btn { + background-color: #4f4f4f; +} +.off-canvas-drawer .btn-group:hover > .dropdown-toggle { + background-color: #424242; +} +.off-canvas-drawer .btn-group > a { + width: 100%; + z-index: 1; +} +.off-canvas-drawer .btn-group > a:focus { + background-color: #4f4f4f; +} +.off-canvas-drawer .btn-group .dropdown-toggle { + z-index: 2; + float: none; + position: absolute; + right: 0; + top: 0; + height: 55px; + box-shadow: none; +} +.off-canvas-drawer .btn-group .dropdown-toggle:hover:after { + color: #fff; +} +.off-canvas-drawer .btn-group .dropdown-toggle:hover span { + transform: rotate(90deg); +} +.off-canvas-drawer .btn-group .dropdown-toggle:focus:after { + color: #fff; +} +.off-canvas-drawer .btn-group .dropdown-toggle span { + transition: all 0.3s ease; +} +.off-canvas-drawer .btn-group .dropdown-menu { + border: none; + width: 100%; + margin-top: 0; +} +.off-canvas-drawer .btn-group .dropdown-menu li { + border-bottom: none; +} +.off-canvas-drawer .btn-group .dropdown-menu a { + background-color: #828282; + padding-top: 18px; + padding-bottom: 18px; +} +.off-canvas-drawer .btn-group > .btn { + background-color: #686868; + border-left: none; + border-right: none; + border-bottom: none; + border-color: #414141; + line-height: 18px; + box-shadow: none !important; + background-image: none; + text-align: left; +} +.off-canvas-drawer .btn-group.open span { + transform: rotate(90deg); + transition: all 0.3s ease; +} +.off-canvas-drawer .btn-group.open .btn.dropdown-toggle { + background-color: #4f4f4f; + border-color: #4f4f4f; +} +.off-canvas-drawer .btn-group.open > .dropdown-menu { + display: block; + position: relative; +} +.off-canvas-drawer button:focus { + outline: 0; +} +.off-canvas-drawer .ubc7-arrow { + background-position: -1113px -227px !important; +} +@media screen and (min-width: 998px) { + .drawer-toggle--hamburger { + display: block; + margin-top: 2px; + margin-right: 13px; + margin-bottom: 3px; + } +} +@media screen and (min-width: 1200px) { + .drawer-toggle--hamburger { + margin-top: 5px; + margin-right: 17px; + margin-bottom: 5px; + } + #drawer-button { + line-height: 1.75em; + } +} +@media screen and (max-width: 979px) { + .has-off-canvas-drawer #ubc7-unit-menu { + display: none; + } +} diff --git a/less/.DS_Store b/less/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..5008ddfcf53c02e82d7eee2e57c38e5672ef89f6 GIT binary patch literal 6148 zcmeH~Jr2S!425mzP>H1@V-^m;4Wg<&0T*E43hX&L&p$$qDprKhvt+--jT7}7np#A3 zem<@ulZcFPQ@L2!n>{z**++&mCkOWA81W14cNZlEfg7;MkzE(HCqgga^y>{tEnwC%0;vJ&^%eQ zLs35+`xjp>T0 Date: Wed, 4 Jul 2018 15:50:30 -0700 Subject: [PATCH 31/42] ubc7-unit-menu transparent background only on mobile where its height needs to be 100% for scrolling --- css/navigation.sticky.css | 8 ++++---- less/navigation.sticky.less | 8 ++++---- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/css/navigation.sticky.css b/css/navigation.sticky.css index ffbb469..8c3ee15 100644 --- a/css/navigation.sticky.css +++ b/css/navigation.sticky.css @@ -2,10 +2,6 @@ * @file * Placeholder */ -#ubc7-unit-menu, -#ubc7-unit-menu .navbar-inner { - background: transparent !important; -} @media screen and (min-width: 980px) { body.unit-menu-is-sticky { padding-top: 40px; @@ -54,5 +50,9 @@ height: 100%; overflow-y: scroll; } + #ubc7-unit-menu, + #ubc7-unit-menu .navbar-inner { + background: transparent !important; + } } /*# sourceMappingURL=navigation.sticky.css.map */ diff --git a/less/navigation.sticky.less b/less/navigation.sticky.less index 11821e5..1fbcdd1 100644 --- a/less/navigation.sticky.less +++ b/less/navigation.sticky.less @@ -3,10 +3,6 @@ * Placeholder */ -#ubc7-unit-menu, -#ubc7-unit-menu .navbar-inner { - background: transparent !important; -} @media screen and (min-width: 980px) { body.unit-menu-is-sticky { padding-top: 40px; @@ -66,5 +62,9 @@ height: 100%; overflow-y: scroll; } + #ubc7-unit-menu, + #ubc7-unit-menu .navbar-inner { + background: transparent !important; + } } /*# sourceMappingURL=navigation.sticky.css.map */ From 028d63452a3f0c75dc64e4fede61b82ed86a727b Mon Sep 17 00:00:00 2001 From: Darko Hrgovic Date: Wed, 4 Jul 2018 16:54:19 -0700 Subject: [PATCH 32/42] #ubc7-unit-menu should not have a bg on it because it hides everything under it on mobile --- css/navigation.sticky.css | 7 +++---- less/navigation.sticky.less | 8 ++++---- 2 files changed, 7 insertions(+), 8 deletions(-) diff --git a/css/navigation.sticky.css b/css/navigation.sticky.css index 8c3ee15..e75159a 100644 --- a/css/navigation.sticky.css +++ b/css/navigation.sticky.css @@ -2,6 +2,9 @@ * @file * Placeholder */ +#ubc7-unit-menu { + background: transparent !important; +} @media screen and (min-width: 980px) { body.unit-menu-is-sticky { padding-top: 40px; @@ -50,9 +53,5 @@ height: 100%; overflow-y: scroll; } - #ubc7-unit-menu, - #ubc7-unit-menu .navbar-inner { - background: transparent !important; - } } /*# sourceMappingURL=navigation.sticky.css.map */ diff --git a/less/navigation.sticky.less b/less/navigation.sticky.less index 1fbcdd1..d46251a 100644 --- a/less/navigation.sticky.less +++ b/less/navigation.sticky.less @@ -3,6 +3,10 @@ * Placeholder */ +#ubc7-unit-menu { + background: transparent !important; +} + @media screen and (min-width: 980px) { body.unit-menu-is-sticky { padding-top: 40px; @@ -62,9 +66,5 @@ height: 100%; overflow-y: scroll; } - #ubc7-unit-menu, - #ubc7-unit-menu .navbar-inner { - background: transparent !important; - } } /*# sourceMappingURL=navigation.sticky.css.map */ From 155045e4a94ba2c0d92e3e03f84c50d37d7fec3a Mon Sep 17 00:00:00 2001 From: Darko Hrgovic Date: Thu, 5 Jul 2018 10:30:31 -0700 Subject: [PATCH 33/42] Removed unconditional height 100% on mobile drop-down menu because it obfuscates content. This should be done dynamically on click. --- css/navigation.sticky.css | 4 ---- less/navigation.sticky.less | 4 ---- 2 files changed, 8 deletions(-) diff --git a/css/navigation.sticky.css b/css/navigation.sticky.css index e75159a..06fa783 100644 --- a/css/navigation.sticky.css +++ b/css/navigation.sticky.css @@ -14,8 +14,6 @@ top: 0; width: 100%; z-index: 999; - height: 100%; - overflow-y: scroll; } } @media screen and (min-width: 980px) and (min-width: 1200px) { @@ -50,8 +48,6 @@ top: 50px; width: 100%; z-index: 999; - height: 100%; - overflow-y: scroll; } } /*# sourceMappingURL=navigation.sticky.css.map */ diff --git a/less/navigation.sticky.less b/less/navigation.sticky.less index d46251a..c4b6771 100644 --- a/less/navigation.sticky.less +++ b/less/navigation.sticky.less @@ -16,8 +16,6 @@ top: 0; width: 100%; z-index: 999; - height: 100%; - overflow-y: scroll; } } @media screen and (min-width: 980px) and (min-width: 1200px) { @@ -63,8 +61,6 @@ top: 50px; width: 100%; z-index: 999; - height: 100%; - overflow-y: scroll; } } /*# sourceMappingURL=navigation.sticky.css.map */ From 1bbff8150376eb33344705ee7cddf6d5dee89c00 Mon Sep 17 00:00:00 2001 From: Darko Hrgovic Date: Fri, 6 Jul 2018 09:14:27 -0700 Subject: [PATCH 34/42] Fixed merge conflict and uncommented $fluidcontainerstart because grad overrides it in a child theme and it should be there in megatron --- templates/page/page.tpl.php | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/templates/page/page.tpl.php b/templates/page/page.tpl.php index f498b6d..6db05e1 100755 --- a/templates/page/page.tpl.php +++ b/templates/page/page.tpl.php @@ -177,7 +177,6 @@ ->>>>>>> develop
@@ -190,7 +189,7 @@
- +
@@ -233,7 +232,7 @@
- + From 0532616b22eb15449359d5cd90b033aab0f7b161 Mon Sep 17 00:00:00 2001 From: Darko Hrgovic Date: Fri, 6 Jul 2018 09:15:34 -0700 Subject: [PATCH 35/42] Error finding includes/template-ubc-clf-elements.inc so we add theme path --- template.php | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/template.php b/template.php index 41c56bb..0c47122 100755 --- a/template.php +++ b/template.php @@ -262,7 +262,8 @@ function megatron_process_block(&$variables, $hook) { ---------------------------------------------------------- */ function megatron_preprocess_page(&$variables) { // Define CLF page elements in an include - include_once 'includes/template-ubc-clf-elements.inc'; + $path = drupal_get_path('theme','megatron'); + include_once $path . '/includes/template-ubc-clf-elements.inc'; // Add template suggestions based on content type. if (isset($variables['node']->type)) { //$variables['theme_hook_suggestions'][] = 'page' . theme_get_setting('clf_layout') . ''; From 657fc4a835c14e561c41e03dc86fc3274d8026ac Mon Sep 17 00:00:00 2001 From: Darko Hrgovic Date: Fri, 6 Jul 2018 09:18:11 -0700 Subject: [PATCH 36/42] Updated help text for clf_use_primary_menu_in_drawer --- theme-settings.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/theme-settings.php b/theme-settings.php index 967fbca..e729fc4 100755 --- a/theme-settings.php +++ b/theme-settings.php @@ -164,7 +164,7 @@ function megatron_form_system_theme_settings_alter(&$form, &$form_state) { $form['clf_navigation_option']['clf_use_primary_menu_in_drawer'] = array( '#type' => 'checkbox', '#title' => t('Use the primary menu in the off-canvas drawer?'), - '#description' => t('If not chosen, you should use a menu block or alternate method for main navigation in the off-canvas drawer region.'), + '#description' => t('If you do not use the primary menu in the drawer, you should use a menu block or alternate method for main navigation in the off-canvas drawer region.'), '#default_value' => theme_get_setting('clf_use_primary_menu_in_drawer'), '#states' => array( 'invisible' => array( From d9701d0520559f16d2f59b5518fcaf2d2302464e Mon Sep 17 00:00:00 2001 From: Darko Hrgovic Date: Mon, 21 Jan 2019 14:16:43 -0800 Subject: [PATCH 37/42] Changed to drupal_get_path from path_to_theme --- template.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/template.php b/template.php index 41c56bb..71dce05 100755 --- a/template.php +++ b/template.php @@ -119,7 +119,7 @@ function megatron_preprocess_html(&$variables) { $showSecondary = theme_get_setting('clf_secondarynavoption'); if ($showSecondary) { - drupal_add_css(path_to_theme('megatron') . '/css/secondary-nav.css', array( + drupal_add_css(drupal_get_path('theme', 'megatron') . '/css/secondary-nav.css', array( 'group' => CSS_THEME, 'weight' => 115, 'every_page' => TRUE, From 4835546530a190cf17b5975cc431e0e57aa3d926 Mon Sep 17 00:00:00 2001 From: Darko Hrgovic Date: Mon, 21 Jan 2019 14:18:05 -0800 Subject: [PATCH 38/42] Removed git conflict --- templates/page/page.tpl.php | 1 - 1 file changed, 1 deletion(-) diff --git a/templates/page/page.tpl.php b/templates/page/page.tpl.php index f498b6d..3f5d2ec 100755 --- a/templates/page/page.tpl.php +++ b/templates/page/page.tpl.php @@ -177,7 +177,6 @@ ->>>>>>> develop
From 9b7c2d576da68b6f5be97be68e4674be1b86f832 Mon Sep 17 00:00:00 2001 From: Darko Hrgovic Date: Mon, 21 Jan 2019 14:18:56 -0800 Subject: [PATCH 39/42] Removed toggle behaviour in flyout js that was killed by webform conditionals --- js/off.canvas.flyout.js | 42 ++++++++++++++++++++++++++++------------- 1 file changed, 29 insertions(+), 13 deletions(-) diff --git a/js/off.canvas.flyout.js b/js/off.canvas.flyout.js index 7d1bcc8..40d6fb1 100644 --- a/js/off.canvas.flyout.js +++ b/js/off.canvas.flyout.js @@ -4,25 +4,41 @@ attach: function (context, settings) { // Primary flyout toggle. if (document.getElementsByClassName("flyout-toggle").length > 0) { - var pushTrigger = document.getElementsByClassName("flyout-toggle"); + var pushTrigger = document.getElementById("flyout-button"); + var closeTrigger = document.getElementsByClassName("flyout__close"); + var pushMask = document.getElementById("off-canvas-mask-flyout"); var pushPanel = document.getElementById("off-canvas-flyout"); var pushContent = document.getElementById("pushed-content-flyout"); - var pushMask = document.getElementById("off-canvas-mask-flyout"); var activeClass = "off-canvas-flyout--is-active"; var animatingClass = "off-canvas-flyout--is-animating"; var i; document.body.classList.add("has-off-canvas-flyout"); - for (i = 0; i < pushTrigger.length; i++) { - pushTrigger[i].addEventListener("click", function () { - document.body.classList.toggle(activeClass); - pushPanel.classList.toggle(activeClass); - pushContent.classList.toggle(activeClass); - pushMask.classList.toggle(activeClass); - document.body.classList.add(animatingClass); - pushPanel.classList.add(animatingClass); - pushContent.classList.add(animatingClass); - pushMask.classList.add(animatingClass); - }); + pushTrigger.addEventListener("click", flyOutOpen, true); + pushMask.addEventListener("click", flyOutClose, true); + for (i = 0; i < closeTrigger.length; i++) { + closeTrigger[i].addEventListener("click", flyOutClose, true); + } + function flyOutOpen(e) { + console.log('open clicked'); + document.body.classList.add(activeClass); + pushPanel.classList.add(activeClass); + pushContent.classList.add(activeClass); + pushMask.classList.add(activeClass); + document.body.classList.remove(animatingClass); + pushPanel.classList.remove(animatingClass); + pushContent.classList.remove(animatingClass); + pushMask.classList.remove(animatingClass); + } + function flyOutClose(e) { + console.log('close clicked'); + document.body.classList.remove(activeClass); + pushPanel.classList.remove(activeClass); + pushContent.classList.remove(activeClass); + pushMask.classList.remove(activeClass); + document.body.classList.add(animatingClass); + pushPanel.classList.add(animatingClass); + pushContent.classList.add(animatingClass); + pushMask.classList.add(animatingClass); } // Old Safari requires 'webkit' prefix. pushPanel.addEventListener("webkitTransitionEnd", finishedAnimating); From 50034db61ccbd025559cc19e003670d1a1f033e9 Mon Sep 17 00:00:00 2001 From: Darko Hrgovic Date: Mon, 21 Jan 2019 14:31:50 -0800 Subject: [PATCH 40/42] Cleaned up whitespace and formatting --- js/off.canvas.flyout.js | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/js/off.canvas.flyout.js b/js/off.canvas.flyout.js index 40d6fb1..da535e4 100644 --- a/js/off.canvas.flyout.js +++ b/js/off.canvas.flyout.js @@ -19,7 +19,6 @@ closeTrigger[i].addEventListener("click", flyOutClose, true); } function flyOutOpen(e) { - console.log('open clicked'); document.body.classList.add(activeClass); pushPanel.classList.add(activeClass); pushContent.classList.add(activeClass); @@ -30,7 +29,6 @@ pushMask.classList.remove(animatingClass); } function flyOutClose(e) { - console.log('close clicked'); document.body.classList.remove(activeClass); pushPanel.classList.remove(activeClass); pushContent.classList.remove(activeClass); @@ -40,16 +38,15 @@ pushContent.classList.add(animatingClass); pushMask.classList.add(animatingClass); } - // Old Safari requires 'webkit' prefix. - pushPanel.addEventListener("webkitTransitionEnd", finishedAnimating); - pushPanel.addEventListener("transitionend", finishedAnimating); - function finishedAnimating() { document.body.classList.remove(animatingClass); pushPanel.classList.remove(animatingClass); pushContent.classList.remove(animatingClass); pushMask.classList.remove(animatingClass); } + // Old Safari requires 'webkit' prefix. + pushPanel.addEventListener("webkitTransitionEnd", finishedAnimating); + pushPanel.addEventListener("transitionend", finishedAnimating); } } } From 88feb8e091237b911324fedddc227f1ca6e8f5a4 Mon Sep 17 00:00:00 2001 From: Darko Hrgovic Date: Mon, 28 Jan 2019 11:51:52 -0800 Subject: [PATCH 41/42] Checking stickynav > 0 because modal close button adds numerous zero values --- js/navigation.sticky.js | 43 ++++++++++++++++++++++++++--------------- 1 file changed, 27 insertions(+), 16 deletions(-) diff --git a/js/navigation.sticky.js b/js/navigation.sticky.js index fc530ca..a928952 100644 --- a/js/navigation.sticky.js +++ b/js/navigation.sticky.js @@ -1,7 +1,7 @@ (function () { Drupal.behaviors.megatronStickyNav = { - attach: function(context, settings) { + attach: function (context, settings) { var navbar = document.getElementById("ubc7-unit-menu"); var unitbar = document.getElementById("ubc7-unit"); @@ -16,7 +16,7 @@ } function requestTick() { - if(!ticking) { + if (!ticking) { window.requestAnimationFrame(update); } ticking = true; @@ -26,23 +26,34 @@ ticking = false; var currentScrollY = latestKnownScrollY; - //toggle classes - if (currentScrollY >= stickynav) { - navbar.classList.add("navigation-is-sticky"); - document.body.classList.add("unit-menu-is-sticky"); - } else { - navbar.classList.remove("navigation-is-sticky"); - document.body.classList.remove("unit-menu-is-sticky"); - }; - if (currentScrollY >= stickyunit) { - unitbar.classList.add("navigation-is-sticky"); - document.body.classList.add("unit-area-is-sticky"); - } else { - unitbar.classList.remove("navigation-is-sticky"); - document.body.classList.remove("unit-area-is-sticky"); + /* Issue with modal close button + console.log showed that CTools modal close button adds numerous zero values to stickynav var. + We were getting the original correct value (178) followed by zero values, which made the nav perpetually stick. + On every modal open/close, more zero values were being added (due to the nature of Drupal behaviors called repeatedly). + Checking stickynav > 0 is a bandaid solution to a bigger issue of vanilla js firing repeatedly within Drupal behaviors. + */ + if (stickynav > 0) { + //toggle classes + if (currentScrollY >= stickynav) { + navbar.classList.add("navigation-is-sticky"); + document.body.classList.add("unit-menu-is-sticky"); + } + else { + navbar.classList.remove("navigation-is-sticky"); + document.body.classList.remove("unit-menu-is-sticky"); + } + if (currentScrollY >= stickyunit) { + unitbar.classList.add("navigation-is-sticky"); + document.body.classList.add("unit-area-is-sticky"); + } + else { + unitbar.classList.remove("navigation-is-sticky"); + document.body.classList.remove("unit-area-is-sticky"); + } } } + // window.requestAnimationFrame(update); window.addEventListener('scroll', onScroll, false); } From bb2875a708040b615a7071f85c2ca54e92a664e0 Mon Sep 17 00:00:00 2001 From: Darko Hrgovic Date: Mon, 28 Jan 2019 11:56:05 -0800 Subject: [PATCH 42/42] Whitespace and formatting --- js/navigation.sticky.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/js/navigation.sticky.js b/js/navigation.sticky.js index a928952..c086046 100644 --- a/js/navigation.sticky.js +++ b/js/navigation.sticky.js @@ -25,7 +25,6 @@ function update() { ticking = false; var currentScrollY = latestKnownScrollY; - /* Issue with modal close button console.log showed that CTools modal close button adds numerous zero values to stickynav var. We were getting the original correct value (178) followed by zero values, which made the nav perpetually stick. @@ -51,7 +50,6 @@ document.body.classList.remove("unit-area-is-sticky"); } } - } // window.requestAnimationFrame(update);