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 9c1288e..04e1ee7 100644 --- a/css/navigation.sticky.css +++ b/css/navigation.sticky.css @@ -2,37 +2,51 @@ * @file * Placeholder */ -@media screen and (min-width:980px) { +#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) { +@media screen and (min-width: 980px) and (min-width: 1200px) { body.unit-menu-is-sticky { padding-top: 45px; } } - -@media screen and (max-width:979px) { +@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 { + #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 5f08d03..6ac046a 100644 --- a/css/off.canvas.drawer.css +++ b/css/off.canvas.drawer.css @@ -1,15 +1,17 @@ +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; + 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; @@ -17,7 +19,25 @@ #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; @@ -27,46 +47,25 @@ 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); + box-shadow: 0 1px 0 rgba(0, 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; - } +.drawer-toggle--hamburger .off-canvas-drawer { + color: #fff; } - #pushed-content { position: relative; z-index: 1; @@ -75,11 +74,11 @@ } #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); + 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, .15); + box-shadow: 2px 0 2px rgba(0, 0, 0, 0.15); } #off-canvas-drawer--primary { transition: transform 0.125s ease, visibility 0.125s ease; @@ -92,11 +91,19 @@ display: block; overflow: auto; } -#off-canvas-drawer--primary.drawer--cover-left, #off-canvas-drawer--primary.drawer--push-left { +#off-canvas-drawer--primary.drawer--cover-left { right: 0; transform: translate3D(20rem, 0, 0); } -#off-canvas-drawer--primary.drawer--cover-right, #off-canvas-drawer--primary.drawer--push-right { +#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); } @@ -127,13 +134,22 @@ width: 100%; opacity: 0.5; } -@media screen and (max-width: 979px) { - .has-off-canvas-drawer #ubc7-unit-menu { - display: none; - } +.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; } -.drawer-toggle--hamburger .off-canvas-drawer, .off-canvas-drawer a, .off-canvas-drawer .dropdown-menu a { - /* Alter CLF Navigation markup to work vertically */ +.off-canvas-drawer .dropdown-menu a { color: #fff; } .off-canvas-drawer .drawer__close { @@ -156,26 +172,28 @@ .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 { + background-color: #4f4f4f; } -.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 { +.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; @@ -185,15 +203,18 @@ height: 55px; box-shadow: none; } -.off-canvas-drawer .btn-group .dropdown-toggle:hover:after, .off-canvas-drawer .btn-group .dropdown-toggle:focus:after { +.off-canvas-drawer .btn-group .dropdown-toggle:hover: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-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%; @@ -207,10 +228,6 @@ 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; @@ -222,9 +239,6 @@ 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; @@ -243,21 +257,26 @@ .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 +@media screen and (min-width: 998px) { + .drawer-toggle--hamburger { + display: block; + margin-top: 2px; + margin-right: 13px; + margin-bottom: 3px; + } } -#drawer-button .hamburger__elem { - display: inline-block; +@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/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/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/.DS_Store b/less/.DS_Store new file mode 100644 index 0000000..5008ddf Binary files /dev/null and b/less/.DS_Store differ diff --git a/less/navigation.sticky.less b/less/navigation.sticky.less new file mode 100644 index 0000000..57a831d --- /dev/null +++ b/less/navigation.sticky.less @@ -0,0 +1,57 @@ +/** + * @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/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/less/secondary-nav.less b/less/secondary-nav.less index bad8d71..13f6e79 100644 --- a/less/secondary-nav.less +++ b/less/secondary-nav.less @@ -418,6 +418,11 @@ .ubc-unit-styled .nav>li.active>.btn-group ul { background: #fff } + + #ubc7-unit-menu-second.expand { + margin-left: 20px; + margin-right: 20px; + } } //.oldie #ubc7-unit-menu, diff --git a/template.php b/template.php index c69bb6c..8d6c59c 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') . ''; @@ -346,6 +347,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 d480c88..e833d2c 100755 --- a/templates/page/page.tpl.php +++ b/templates/page/page.tpl.php @@ -158,15 +158,15 @@ - + diff --git a/theme-settings.php b/theme-settings.php index cf41e18..5844e6d 100755 --- a/theme-settings.php +++ b/theme-settings.php @@ -100,26 +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'), - '#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?'), @@ -184,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('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 do not use the primary nav 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( @@ -207,6 +187,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(