kcc-gem-theme 1.65.57
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +7 -0
- data/LICENSE.txt +21 -0
- data/README.md +138 -0
- data/_data/cache_bust_css.yml +1 -0
- data/_data/navigation.yml +96 -0
- data/_data/theme_hash.yml +1 -0
- data/_includes/accordion.html +28 -0
- data/_includes/alerts.html +2 -0
- data/_includes/benefits.html +98 -0
- data/_includes/body.html +8 -0
- data/_includes/bottom-action-call.html +10 -0
- data/_includes/card-section.html +27 -0
- data/_includes/chat-now.html +8 -0
- data/_includes/check-mark.svg +17 -0
- data/_includes/contacts-tan.html +69 -0
- data/_includes/contacts.html +67 -0
- data/_includes/document-head.html +13 -0
- data/_includes/emergency-alert.html +9 -0
- data/_includes/emergency-alerts.html +29 -0
- data/_includes/foot.html +3 -0
- data/_includes/footer.html +168 -0
- data/_includes/header-global.html +25 -0
- data/_includes/header.html +28 -0
- data/_includes/hero-slider.html +23 -0
- data/_includes/image-slider.html +23 -0
- data/_includes/nav-global-bottom.html +30 -0
- data/_includes/nav-global-local.html +29 -0
- data/_includes/nav-global-top.html +14 -0
- data/_includes/nav-global.html +117 -0
- data/_includes/nav-landing.html +111 -0
- data/_includes/nav-local.html +34 -0
- data/_includes/nav-sub.html +19 -0
- data/_includes/old-head.html +28 -0
- data/_includes/scripts/custom.html +2 -0
- data/_includes/scripts/emergency-alerts.html +2 -0
- data/_includes/scripts/google-api.html +2 -0
- data/_includes/scripts/google-noscript.html +6 -0
- data/_includes/scripts/google-tag.html +24 -0
- data/_includes/scripts/kcc-alerts.html +2 -0
- data/_includes/scripts/kcc-mega-nav.html +2 -0
- data/_includes/scripts/kcc-nav.html +2 -0
- data/_includes/scripts/kcc-theme-landing.html +2 -0
- data/_includes/scripts/kcc-theme.html +2 -0
- data/_includes/scripts/table-cdn.html +6 -0
- data/_includes/scripts/translate.html +11 -0
- data/_includes/scripts/vendor-cdn.html +6 -0
- data/_includes/styles/fonts.html +11 -0
- data/_includes/styles/main.html +8 -0
- data/_includes/styles/vendor.html +6 -0
- data/_includes/svg/check.html +11 -0
- data/_includes/svg/goals.html +17 -0
- data/_includes/svg/kcc-copy.html +62 -0
- data/_includes/svg/kcc.html +59 -0
- data/_includes/svg/kcc.svg +59 -0
- data/_includes/svg/love.html +6 -0
- data/_includes/svg/save-money.html +40 -0
- data/_includes/tabbed-content.html +21 -0
- data/_includes/targetx-form.html +370 -0
- data/_includes/targetx-head.html +48 -0
- data/_includes/translate.html +3 -0
- data/_layouts/default-core.html +31 -0
- data/_layouts/default-landing.html +31 -0
- data/_layouts/default.html +32 -0
- data/_layouts/landing-page.html +8 -0
- data/_layouts/landing-simple.html +29 -0
- data/_layouts/markdown.html +13 -0
- data/_layouts/page.html +8 -0
- data/_layouts/sub-nav.html +6 -0
- data/_layouts/thank-you.html +18 -0
- data/assets/css/content.css +1 -0
- data/assets/css/kcc-theme.css +1 -0
- data/assets/css/main.css +1 -0
- data/assets/css/translate.css +1 -0
- data/assets/img/2016-senior-viewbook.jpg +0 -0
- data/assets/img/ATEC-DSC_1033.jpeg +0 -0
- data/assets/img/DSC_5650_helpful.jpg +0 -0
- data/assets/img/DSC_8724_4x3.jpg +0 -0
- data/assets/img/alert.svg +13 -0
- data/assets/img/baseball.svg +40 -0
- data/assets/img/basketball.svg +17 -0
- data/assets/img/blank-contact.svg +10 -0
- data/assets/img/blue-next.svg +9 -0
- data/assets/img/blue-prev.svg +9 -0
- data/assets/img/calendar.svg +24 -0
- data/assets/img/cavaliers-16x9-thumb.png +0 -0
- data/assets/img/cavaliers-logo.png +0 -0
- data/assets/img/cavaliers-logo_white.png +0 -0
- data/assets/img/d-daun2.jpg +0 -0
- data/assets/img/dbl-next.svg +16 -0
- data/assets/img/dbl-next_mobile.svg +16 -0
- data/assets/img/dbl-prev.svg +16 -0
- data/assets/img/dbl-prev_mobile.svg +16 -0
- data/assets/img/e-tech_a-roberts_mar2016_D41_6690.jpg +0 -0
- data/assets/img/facebook-f_white.svg +9 -0
- data/assets/img/fafsa-early-bird-banner-18.jpg +0 -0
- data/assets/img/go_cavs_20171002_193828-web.jpg +0 -0
- data/assets/img/heading-bg-underline-tan.png +0 -0
- data/assets/img/heading-bg-underline-transparent.png +0 -0
- data/assets/img/heading-bg-underline.png +0 -0
- data/assets/img/instagram-white.svg +20 -0
- data/assets/img/itransfer.png +0 -0
- data/assets/img/kankakee-community-college-word-logo.svg +88 -0
- data/assets/img/kcc-logo-inverse.svg +21 -0
- data/assets/img/kcc-logo.svg +74 -0
- data/assets/img/kcc-placeholder-square.png +0 -0
- data/assets/img/kcc-placeholder.png +0 -0
- data/assets/img/kcc-text-logo.svg +89 -0
- data/assets/img/linkedin-white.svg +13 -0
- data/assets/img/loader.gif +0 -0
- data/assets/img/menu-bg.png +0 -0
- data/assets/img/miguel2.jpg +0 -0
- data/assets/img/news.svg +19 -0
- data/assets/img/pause.svg +20 -0
- data/assets/img/pause_mobile.svg +20 -0
- data/assets/img/pinterest-p_white.svg +16 -0
- data/assets/img/placeholder.png +0 -0
- data/assets/img/play.svg +12 -0
- data/assets/img/play_mobile.svg +12 -0
- data/assets/img/riverfrontcampus.jpg +0 -0
- data/assets/img/search.svg +18 -0
- data/assets/img/soccer.svg +17 -0
- data/assets/img/social-icon.svg +13 -0
- data/assets/img/twitter-white.svg +14 -0
- data/assets/img/video.svg +10 -0
- data/assets/img/volleyball.svg +15 -0
- data/assets/img/x.svg +10 -0
- data/assets/img/youtube-white.svg +9 -0
- data/assets/img/yt-loading.png +0 -0
- data/assets/img/zippia.png +0 -0
- data/assets/js/dist/main.bundle.js +1 -0
- data/assets/js/theme/alerts/alerts.js +5 -0
- data/assets/js/theme/alerts/campusAlertsSheetsAPI.js +41 -0
- data/assets/js/theme/alerts/createAlertsHtml.js +93 -0
- data/assets/js/theme/alerts/parseMarkdownToHTML.js +85 -0
- data/assets/js/theme/alerts/simpleSetSheetParameters.js +23 -0
- data/assets/js/theme/dist/alerts.bundle.js +1 -0
- data/assets/js/theme/dist/kcc-mega-nav.bundle.js +1 -0
- data/assets/js/theme/dist/kcc-nav.bundle.js +1 -0
- data/assets/js/theme/dist/kcc-theme-landing.bundle.js +1 -0
- data/assets/js/theme/dist/kcc-theme.bundle.js +1 -0
- data/assets/js/theme/landing/landing.js +5 -0
- data/assets/js/theme/landing/landingPage.js +49 -0
- data/assets/js/theme/nav/megaNav/closeMegaNavOnClick.js +50 -0
- data/assets/js/theme/nav/megaNav/googleCustomSearch.js +112 -0
- data/assets/js/theme/nav/megaNav/megaNav.js +13 -0
- data/assets/js/theme/nav/megaNav/searchToggleMegaNav.js +96 -0
- data/assets/js/theme/nav/megaNav/toggleDropdownOnWindowResize.js +78 -0
- data/assets/js/theme/nav/megaNav/toggleDropdownOnWindowResizeTwo.js +54 -0
- data/assets/js/theme/nav/megaNav/toggleMenuOnWindowResize.js +26 -0
- data/assets/js/theme/nav/megaNav/underlineCurrentSite.js +22 -0
- data/assets/js/theme/nav/nav/closeNavOnClick.js +50 -0
- data/assets/js/theme/nav/nav/highlightCurrentNav.js +56 -0
- data/assets/js/theme/nav/nav/moveSearchIcon.js +94 -0
- data/assets/js/theme/nav/nav/nav.js +13 -0
- data/assets/js/theme/nav/nav/searchToggleNav.js +40 -0
- data/assets/js/theme/nav/nav/toggleNavSearchDropdownOnWindowResize.js +57 -0
- data/assets/js/theme/src/all.js +34 -0
- data/assets/js/theme/src/babelTest.js +18 -0
- data/assets/js/theme/src/footerDate.js +7 -0
- data/assets/js/theme/src/lazyLoad.js +13 -0
- data/assets/js/theme/src/sliders.js +88 -0
- data/assets/js/theme/src/test.js +5 -0
- data/assets/js/theme/src/translate.js +56 -0
- data/assets/js/theme/src/walkText.js +16 -0
- data/assets/js/theme/src/wrapPowerText.js +21 -0
- data/assets/js/theme/src/ytEmbed.js +30 -0
- data/assets/scss/0-tools/_bootstrap-overrides.scss +72 -0
- data/assets/scss/0-tools/_cloudcannon.scss +16 -0
- data/assets/scss/0-tools/_google-translate-overrides.scss +114 -0
- data/assets/scss/0-tools/_gsc-overrides.scss +144 -0
- data/assets/scss/0-tools/_targetx-overrides.scss +76 -0
- data/assets/scss/0-tools/_vars.scss +67 -0
- data/assets/scss/1-base/_background.scss +5 -0
- data/assets/scss/1-base/_buttons.scss +83 -0
- data/assets/scss/1-base/_header-global.scss +454 -0
- data/assets/scss/1-base/_img.scss +17 -0
- data/assets/scss/1-base/_links.scss +120 -0
- data/assets/scss/1-base/_typography.scss +641 -0
- data/assets/scss/2-modules/_accordion.scss +34 -0
- data/assets/scss/2-modules/_benefits.scss +371 -0
- data/assets/scss/2-modules/_campus-alerts.scss +3 -0
- data/assets/scss/2-modules/_card-section.scss +9 -0
- data/assets/scss/2-modules/_contacts.scss +46 -0
- data/assets/scss/2-modules/_error.scss +10 -0
- data/assets/scss/2-modules/_footer.scss +80 -0
- data/assets/scss/2-modules/_header.scss +21 -0
- data/assets/scss/2-modules/_hero-slider.scss +330 -0
- data/assets/scss/2-modules/_img-hover.scss +70 -0
- data/assets/scss/2-modules/_loader.scss +9 -0
- data/assets/scss/2-modules/_nav-global.scss +315 -0
- data/assets/scss/2-modules/_nav-landing.scss +203 -0
- data/assets/scss/2-modules/_nav-local.scss +45 -0
- data/assets/scss/2-modules/_sliders.scss +191 -0
- data/assets/scss/2-modules/_social-icons.scss +36 -0
- data/assets/scss/2-modules/_sub-nav.scss +32 -0
- data/assets/scss/2-modules/_yt-embed.scss +14 -0
- data/assets/scss/3-layout/_background.scss +3 -0
- data/assets/scss/3-layout/_content.scss +37 -0
- data/assets/scss/3-layout/_margins.scss +22 -0
- data/assets/scss/3-layout/_padding.scss +19 -0
- data/assets/scss/3-layout/_positioning.scss +341 -0
- data/assets/scss/3-layout/_section.scss +22 -0
- data/assets/scss/3-layout/_tables.scss +8 -0
- data/assets/scss/3-layout/_thank-you.scss +5 -0
- data/assets/scss/4-pages/index/_home.scss +15 -0
- data/assets/scss/kcc-theme.scss +49 -0
- data/assets/scss/translate.scss +5 -0
- data/assets/vendor/css/ajax-loader.gif +0 -0
- data/assets/vendor/css/bootstrap.min.css +7 -0
- data/assets/vendor/css/fonts/slick.eot +0 -0
- data/assets/vendor/css/fonts/slick.ttf +0 -0
- data/assets/vendor/css/fonts/slick.woff +0 -0
- data/assets/vendor/css/mli7lsm.css +22 -0
- data/assets/vendor/css/slick-theme.min.css +8 -0
- data/assets/vendor/css/slick.min.css +8 -0
- data/assets/vendor/font/slick.woff +0 -0
- data/assets/vendor/js/bootstrap.min.js +7 -0
- data/assets/vendor/js/jquery.min.js +2 -0
- data/assets/vendor/js/popper.min.js +5 -0
- data/assets/vendor/js/slick.min.js +1 -0
- metadata +304 -0
@@ -0,0 +1,76 @@
|
|
1
|
+
// Target-X/FormAssembly STYLE OVERRIDES
|
2
|
+
// ================================================================================ //
|
3
|
+
//
|
4
|
+
// FormAssembly uses some `!important`'s and they are needed where used
|
5
|
+
//
|
6
|
+
// ================================================================================ //
|
7
|
+
|
8
|
+
.targetx__wrapper {
|
9
|
+
margin-top: -35px;
|
10
|
+
z-index: -1;
|
11
|
+
}
|
12
|
+
|
13
|
+
// STYLE OVERRIDES TO TARGETX's STYLESHEET:
|
14
|
+
// ========================================
|
15
|
+
|
16
|
+
p.supportInfo {
|
17
|
+
display: none; // Hides an empty paragraph that just makes the form longer
|
18
|
+
}
|
19
|
+
|
20
|
+
@media screen and (min-width: 1200px) {
|
21
|
+
.wForm form > div.oneField {
|
22
|
+
margin-top: 0 !important; // Makes the spacing between form questions tighter/closer-together
|
23
|
+
}
|
24
|
+
}
|
25
|
+
|
26
|
+
@media screen and (min-width: 1800px) {
|
27
|
+
.wForm form > div.oneField {
|
28
|
+
margin-top: 10px !important; // Makes the spacing between form questions tighter/closer-together
|
29
|
+
}
|
30
|
+
}
|
31
|
+
|
32
|
+
.wFormContainer {
|
33
|
+
padding-left: 5px !important;
|
34
|
+
padding-right: 5px !important;
|
35
|
+
}
|
36
|
+
|
37
|
+
@media screen and (min-width: 1600px) {
|
38
|
+
.wFormContainer {
|
39
|
+
padding: 1rem 2rem !important;
|
40
|
+
}
|
41
|
+
}
|
42
|
+
|
43
|
+
#tfa_11::before {
|
44
|
+
display: block;
|
45
|
+
content: " ";
|
46
|
+
margin-top: -60px;
|
47
|
+
height: 60px;
|
48
|
+
visibility: hidden;
|
49
|
+
pointer-events: none;
|
50
|
+
}
|
51
|
+
|
52
|
+
@media screen and (min-width: 1800px) {
|
53
|
+
#tfa_775-D {
|
54
|
+
margin-top: 5px !important;
|
55
|
+
}
|
56
|
+
}
|
57
|
+
|
58
|
+
.oneField.field-container-D { // Keeps dropdown selection boxes from going wider than other element's in the form
|
59
|
+
max-width: 100%;
|
60
|
+
}
|
61
|
+
|
62
|
+
// Submit buttons always have the following ID.
|
63
|
+
#submit_button { // YES, the `!important`'s are actually needed!
|
64
|
+
background-color: #0051a7 !important;
|
65
|
+
border-color: #003773 !important;
|
66
|
+
font-family: $font-family-paragraph !important;
|
67
|
+
font-weight: 400 !important;
|
68
|
+
font-size: 1.25rem !important;
|
69
|
+
padding-top: 0.5rem !important;
|
70
|
+
padding-bottom: 0.5rem !important;
|
71
|
+
transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out; // Same transitioning on buttons used in Bootstrap 4 styling
|
72
|
+
&:hover {
|
73
|
+
background-color: #022b55 !important;
|
74
|
+
border-color: #021e3d !important;
|
75
|
+
}
|
76
|
+
}
|
@@ -0,0 +1,67 @@
|
|
1
|
+
// VARIABLES
|
2
|
+
// =============================
|
3
|
+
|
4
|
+
// Fonts
|
5
|
+
$font-family-paragraph: 'Open Sans', sans-serif;
|
6
|
+
$font-family-headings: 'Roboto', sans-serif;
|
7
|
+
$font-family-power: 'Libre Franklin', sans-serif;
|
8
|
+
$font-family-kcc: 'Eurostile', sans-serif;
|
9
|
+
$font-family-oswald: 'Oswald', sans-serif;
|
10
|
+
$font-family-saira: 'Saira', 'sans-serif';
|
11
|
+
$font-family-icons: 'Material Icons';
|
12
|
+
|
13
|
+
$font-size-base: 1rem;
|
14
|
+
|
15
|
+
$font-weight-light: 300;
|
16
|
+
$font-weight-regular: 400;
|
17
|
+
$font-weight-boldish: 500;
|
18
|
+
$font-weight-bolder: 600;
|
19
|
+
$font-weight-bold: 700;
|
20
|
+
$font-weight-black: 900;
|
21
|
+
|
22
|
+
|
23
|
+
//Image path for most of global style sheet
|
24
|
+
$imagedir:'/assets/img/';
|
25
|
+
|
26
|
+
// Colors
|
27
|
+
//KCC colors
|
28
|
+
$primary-blue: #0f3b63; // Primary red-color
|
29
|
+
$primary-red: #c61f48; // Primary blue-color
|
30
|
+
$accent-blue: #005bac; // Accent blue-color used in all links and link buttons;
|
31
|
+
$color-blue-light: #ccdde1;
|
32
|
+
$color-tan-light: #fcf1d6;
|
33
|
+
$color-orange: #f99e1b;
|
34
|
+
$color-blue-grey: #7a7b7b;
|
35
|
+
$color-blue-light-nav: #b8babc;
|
36
|
+
$color-blue-lighter-nav: #e2e3e4;
|
37
|
+
|
38
|
+
$black: #000;
|
39
|
+
$grey-1: #666;
|
40
|
+
$grey-2: #e5e8ed;
|
41
|
+
$grey-3: #f1f2f7; // Background color for slick tracks
|
42
|
+
$grey-4: #f8f9fa; // Background color for footer (and Bootstrap 4 light navbar)
|
43
|
+
$grey-5: #b1b1b1; // Border-bottom for local-nav navigation bar
|
44
|
+
$grey-6: #58585b;
|
45
|
+
$grey-7: #868686;
|
46
|
+
$grey-8: #d9d9d9;
|
47
|
+
|
48
|
+
$white: #fff;
|
49
|
+
|
50
|
+
$color-alert: #856404;
|
51
|
+
|
52
|
+
|
53
|
+
$landing-bg: $grey-2; // Landing page's background-color
|
54
|
+
$default-bg: $white; // Background color for non-landing pages
|
55
|
+
$footer-bg: $white; // Footer's background color
|
56
|
+
$color-grey-heading: $grey-1; // Grey headings used within page content
|
57
|
+
$fa-color: $primary-red;
|
58
|
+
$slide-bg: $white; // Background color for the upcoming games slick slides
|
59
|
+
$sub-nav-heading: $white; // Font color for h1.page-heading heading of sub-nav
|
60
|
+
$nav-link: $white; // Color for nav-link-main links in mega-nav
|
61
|
+
|
62
|
+
$btn-primary-bg: #0051a7;
|
63
|
+
$btn-primary-border: #003773;
|
64
|
+
$btn-hover-bg: #022b55;
|
65
|
+
$btn-hover-border: #021e3d;
|
66
|
+
$darker-link: #006ce0;
|
67
|
+
$orange-heading: $color-orange;
|
@@ -0,0 +1,83 @@
|
|
1
|
+
.navbar-light .navbar-nav .nav-link.buttons__btn-primary-custom {
|
2
|
+
background-color: $primary-red;
|
3
|
+
color: $white;
|
4
|
+
&:hover {
|
5
|
+
background-color: $primary-blue;
|
6
|
+
}
|
7
|
+
}
|
8
|
+
|
9
|
+
.buttons__yt-subscribe {
|
10
|
+
display: inline-block;
|
11
|
+
height: 1rem;
|
12
|
+
margin-top: -4px;
|
13
|
+
margin-right: 5px;
|
14
|
+
transform: scale(1.8,1.8);
|
15
|
+
vertical-align: middle;
|
16
|
+
width: 1rem;
|
17
|
+
}
|
18
|
+
|
19
|
+
.buttons__custom-danger {
|
20
|
+
margin-right: 20px;
|
21
|
+
}
|
22
|
+
|
23
|
+
.buttons__btn-margin-top {
|
24
|
+
margin-top: 20px;
|
25
|
+
}
|
26
|
+
|
27
|
+
.btn-primary {
|
28
|
+
background-color: $btn-primary-bg;
|
29
|
+
border-color: $btn-primary-border;
|
30
|
+
}
|
31
|
+
|
32
|
+
.btn-primary:hover {
|
33
|
+
background-color: $btn-hover-bg;
|
34
|
+
border-color: $btn-hover-border;
|
35
|
+
}
|
36
|
+
|
37
|
+
.buttons__no-decoration {
|
38
|
+
text-decoration: none;
|
39
|
+
&:hover {
|
40
|
+
text-decoration: none;
|
41
|
+
}
|
42
|
+
&:focus {
|
43
|
+
text-decoration: none;
|
44
|
+
}
|
45
|
+
&:visited {
|
46
|
+
text-decoration: none;
|
47
|
+
}
|
48
|
+
}
|
49
|
+
|
50
|
+
.buttons{
|
51
|
+
display: inline-block;
|
52
|
+
padding-left: .9rem;
|
53
|
+
padding-right: .9rem;
|
54
|
+
padding-top: .125rem;
|
55
|
+
padding-bottom: .125rem;
|
56
|
+
&__my-kcc {
|
57
|
+
border-color: $color-blue-grey;
|
58
|
+
padding-top: .125rem;
|
59
|
+
padding-bottom: .125rem;
|
60
|
+
margin-top: 0.25rem;
|
61
|
+
margin-bottom: .375rem;
|
62
|
+
&--mobile {
|
63
|
+
position: absolute;
|
64
|
+
bottom: .65rem;
|
65
|
+
left: 1rem;
|
66
|
+
}
|
67
|
+
}
|
68
|
+
}
|
69
|
+
|
70
|
+
@media screen and (min-width: 992px) {
|
71
|
+
.buttons__my-kcc:hover,
|
72
|
+
.buttons__my-kcc:focus {
|
73
|
+
//color: $white;
|
74
|
+
background-color: #0c3050;
|
75
|
+
}
|
76
|
+
}
|
77
|
+
|
78
|
+
@media screen and (max-width: 992px) {
|
79
|
+
.buttons__my-kcc:hover,
|
80
|
+
.buttons__my-kcc:focus {
|
81
|
+
color: $primary-red;
|
82
|
+
}
|
83
|
+
}
|
@@ -0,0 +1,454 @@
|
|
1
|
+
// Styles for the global KCC header
|
2
|
+
// ================================
|
3
|
+
|
4
|
+
.header-global {
|
5
|
+
padding-left: 0;
|
6
|
+
padding-right: 0;
|
7
|
+
&__brand {
|
8
|
+
left: 1rem;
|
9
|
+
position: absolute;
|
10
|
+
right: 3.25rem; // clears the search icon/button
|
11
|
+
top: 0;
|
12
|
+
z-index: 1044;
|
13
|
+
}
|
14
|
+
&__navbar--padding {
|
15
|
+
padding: 0;
|
16
|
+
}
|
17
|
+
&__nav-top {
|
18
|
+
background-color: $primary-blue;
|
19
|
+
flex-direction: row;
|
20
|
+
padding-left: 1rem;
|
21
|
+
padding-right: calc(2.5rem + 20px);
|
22
|
+
width: 100%;
|
23
|
+
}
|
24
|
+
&__nav-bottom {
|
25
|
+
background-color: $primary-red;
|
26
|
+
flex-direction: row;
|
27
|
+
padding-left: 1rem;
|
28
|
+
padding-bottom: .3125rem;
|
29
|
+
padding-right: 1rem;
|
30
|
+
padding-top: .3125rem;
|
31
|
+
width: 100%;
|
32
|
+
}
|
33
|
+
&__nav-local {
|
34
|
+
border-bottom-color: $grey-5;
|
35
|
+
flex-direction: row;
|
36
|
+
border-bottom-style: solid;
|
37
|
+
border-bottom-width: 1px;
|
38
|
+
padding-bottom: .5rem;
|
39
|
+
padding-left: 1rem;
|
40
|
+
padding-right: 1rem;
|
41
|
+
padding-top: .5rem;
|
42
|
+
width: 100%;
|
43
|
+
}
|
44
|
+
&__navbar--toggler { // Mostly sdtraight from BOOTSTRAP 4 Styling
|
45
|
+
border-color: rgba(0,0,0,.1);
|
46
|
+
color: rgba(0,0,0,.5);
|
47
|
+
position: absolute;
|
48
|
+
right: 1rem;
|
49
|
+
top: 3.25rem;
|
50
|
+
z-index: 1032;
|
51
|
+
& .navbar-toggler-icon { // Straight from the BOOTSTRAP 4 Styling
|
52
|
+
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(0, 0, 0, 0.5)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
|
53
|
+
}
|
54
|
+
}
|
55
|
+
&__search-icon,
|
56
|
+
&__close-icon {
|
57
|
+
background-color: transparent;
|
58
|
+
border: 1px solid transparent;
|
59
|
+
border-radius: .25rem;
|
60
|
+
display: inline-block;
|
61
|
+
font-size: 1rem;
|
62
|
+
font-weight: 400;
|
63
|
+
line-height: 1.5;
|
64
|
+
padding: .375rem .75rem;
|
65
|
+
position: absolute;
|
66
|
+
text-align: center;
|
67
|
+
top: .125rem;
|
68
|
+
right: .3125rem;
|
69
|
+
user-select: none;
|
70
|
+
vertical-align: middle;
|
71
|
+
transition-property: opacity;
|
72
|
+
transition-timing-function: ease-in-out;
|
73
|
+
transition-duration: .1s;
|
74
|
+
z-index: 1032;
|
75
|
+
}
|
76
|
+
}
|
77
|
+
|
78
|
+
@media screen and (min-width: 410px) {
|
79
|
+
.header-global__navbar--toggler {
|
80
|
+
top: 3.2rem;
|
81
|
+
}
|
82
|
+
}
|
83
|
+
|
84
|
+
@media screen and (min-width: 576px) {
|
85
|
+
.header-global__navbar--toggler {
|
86
|
+
top: 3.25rem;
|
87
|
+
}
|
88
|
+
}
|
89
|
+
|
90
|
+
.header-global__search-icon--hidden,
|
91
|
+
.header-global__close-icon--hidden {
|
92
|
+
opacity: 0;
|
93
|
+
pointer-events: none;
|
94
|
+
z-index: -1;
|
95
|
+
}
|
96
|
+
|
97
|
+
@media screen and (max-width: 992px) {
|
98
|
+
#headerGlobalNavbarContent.collapse.show .header-global__nav-top,
|
99
|
+
#headerGlobalNavbarContent.collapsing .header-global__nav-top {
|
100
|
+
padding-right: 1rem;
|
101
|
+
}
|
102
|
+
}
|
103
|
+
|
104
|
+
@media screen and (max-width: 992px) {
|
105
|
+
#headerGlobalNavbarContent.collapse.show .header-global__navbar-nav--divider::after,
|
106
|
+
#headerGlobalNavbarContent.collapsing .header-global__navbar-nav--divider::after {
|
107
|
+
background-color: $grey-5;
|
108
|
+
content: '';
|
109
|
+
display: block;
|
110
|
+
height: .125rem;
|
111
|
+
margin-bottom: 1rem;
|
112
|
+
margin-top: .5rem;
|
113
|
+
width: 100%;
|
114
|
+
}
|
115
|
+
#headerGlobalNavbarContent.collapse.show .header-global__navbar-nav--divider:nth-child(2)::after,
|
116
|
+
#headerGlobalNavbarContent.collapsing .header-global__navbar-nav--divider:nth-child(2)::after {
|
117
|
+
margin-bottom: 0;
|
118
|
+
}
|
119
|
+
}
|
120
|
+
|
121
|
+
#headerGlobalNavbar.header-global__navbar--search-toggle {
|
122
|
+
top: 3.5rem;
|
123
|
+
}
|
124
|
+
|
125
|
+
@media screen and (min-width: 992px) {
|
126
|
+
.navbar-expand-lg .navbar-nav .header-global__nav-local--navbar-brand.nav-link {
|
127
|
+
padding-left: 0;
|
128
|
+
}
|
129
|
+
}
|
130
|
+
|
131
|
+
@media screen and (min-width: 992px) {
|
132
|
+
.header-global__nav-bottom--nav-link {
|
133
|
+
padding-top: .75rem;
|
134
|
+
padding-bottom: .75rem;
|
135
|
+
}
|
136
|
+
}
|
137
|
+
|
138
|
+
@media screen and (min-width: 992px) {
|
139
|
+
.header-global__nav-top--nav-link {
|
140
|
+
padding-top: .3125rem;
|
141
|
+
padding-bottom: .3125rem;
|
142
|
+
}
|
143
|
+
}
|
144
|
+
|
145
|
+
@media screen and (min-width: 992px) {
|
146
|
+
.navbar-expand-lg .navbar-nav .header-global__nav-top--nav-link {
|
147
|
+
padding-left: .9rem;
|
148
|
+
padding-right: .9rem;
|
149
|
+
}
|
150
|
+
}
|
151
|
+
|
152
|
+
@media screen and (min-width: 992px) {
|
153
|
+
a.header-global__nav-top--nav-link {
|
154
|
+
position: relative;
|
155
|
+
}
|
156
|
+
a.header-global__nav-top--nav-link::after,
|
157
|
+
a.header-global__nav-top--nav-link::after {
|
158
|
+
background-color: $orange-heading;
|
159
|
+
bottom: 0;
|
160
|
+
content: '';
|
161
|
+
display: block;
|
162
|
+
height: .125rem;
|
163
|
+
opacity: 0;
|
164
|
+
position: absolute;
|
165
|
+
transition: opacity 0.3s,transform 0.3s;
|
166
|
+
width: calc(100% - 1.8rem); // The `- 1.8rem` in `calc (100% - 1.8rem)` offsets the padding-left/right: .9rem on the links
|
167
|
+
}
|
168
|
+
a.header-global__nav-top--nav-link:hover::after,
|
169
|
+
a.header-global__nav-top--nav-link:focus::after {
|
170
|
+
opacity: 1;
|
171
|
+
transform: translateY(-0.2em);
|
172
|
+
}
|
173
|
+
}
|
174
|
+
|
175
|
+
@media screen and (min-width: 992px) {
|
176
|
+
.header-global__nav-bottom {
|
177
|
+
padding-bottom: 0;
|
178
|
+
padding-top: 0;
|
179
|
+
}
|
180
|
+
}
|
181
|
+
|
182
|
+
@media screen and (min-width: 992px) {
|
183
|
+
a.header-global__nav-bottom--nav-link {
|
184
|
+
position: relative;
|
185
|
+
}
|
186
|
+
a.header-global__nav-bottom--nav-link.header-global__nav-bottom--underlined::after {
|
187
|
+
background-color: $orange-heading;
|
188
|
+
color: $orange-heading;
|
189
|
+
bottom: .25rem;
|
190
|
+
border-top-width: .125rem;
|
191
|
+
content: '';
|
192
|
+
display: block;
|
193
|
+
height: .125rem;
|
194
|
+
margin-left: 0;
|
195
|
+
opacity: 0;
|
196
|
+
position: absolute;
|
197
|
+
transition: opacity 0.3s,transform 0.3s;
|
198
|
+
width: calc(100% - 1rem); // The `- 1.8rem` in `calc (100% - 1.8rem)` offsets the padding-left/right: .5rem on the links
|
199
|
+
}
|
200
|
+
a.header-global__nav-bottom--nav-link.header-global__nav-bottom--underlined::after {
|
201
|
+
opacity: 1;
|
202
|
+
transform: translateY(-0.2em);
|
203
|
+
}
|
204
|
+
|
205
|
+
}
|
206
|
+
|
207
|
+
@media screen and (min-width: 992px) {
|
208
|
+
.header-global__nav-local {
|
209
|
+
padding-bottom: .5rem;
|
210
|
+
padding-top: .5rem;
|
211
|
+
}
|
212
|
+
}
|
213
|
+
|
214
|
+
.header-global__brand--svg {
|
215
|
+
fill: $white;
|
216
|
+
height: 28px;
|
217
|
+
max-width: 100%;
|
218
|
+
& .st0 {
|
219
|
+
fill: none;
|
220
|
+
}
|
221
|
+
}
|
222
|
+
|
223
|
+
@media screen and (min-width: 992px) and (max-width: 1040px) { // the KCC word logo needs to shrink a little bit at these screen sizes
|
224
|
+
.header-global__brand--svg {
|
225
|
+
height: 26px;
|
226
|
+
}
|
227
|
+
}
|
228
|
+
|
229
|
+
@media screen and (min-width: 992px) {
|
230
|
+
.header-global__brand {
|
231
|
+
top: 3.125rem;
|
232
|
+
right: unset; // gotta unset this, otherwise it blocks the other navbar links
|
233
|
+
}
|
234
|
+
}
|
235
|
+
|
236
|
+
#headerGlobalNavbarContent.collapse.show .typography__nav-heading,
|
237
|
+
#headerGlobalNavbarContent.collapsing .typography__nav-heading {
|
238
|
+
font-size: 1.5rem;
|
239
|
+
}
|
240
|
+
|
241
|
+
#headerGlobalNavbarContent.collapse.show .navbar-nav,
|
242
|
+
#headerGlobalNavbarContent.collapsing .navbar-nav {
|
243
|
+
flex-direction: column;
|
244
|
+
background-color: $grey-4;
|
245
|
+
}
|
246
|
+
|
247
|
+
#headerGlobalNavbarContent.collapse.show .header-global__nav-top, // BOOTSTRAP 4 Selectors for when the menu is open/opening
|
248
|
+
#headerGlobalNavbarContent.collapsing .header-global__nav-top { // This rule-group is to pull the menu down, on mobile/tablet and provide a red background for the KCC text-logo & Search Icon.
|
249
|
+
position: relative;
|
250
|
+
top: 2.65rem; // Pull the menu down from its normal spot
|
251
|
+
margin-bottom: 2.65rem;
|
252
|
+
&::before { // Create & position a pseudo-element to make the red background
|
253
|
+
background-color: $primary-red;
|
254
|
+
content: '';
|
255
|
+
display: block;
|
256
|
+
height: 2.65rem;
|
257
|
+
position: absolute;
|
258
|
+
top: -2.65rem;
|
259
|
+
left: 0;
|
260
|
+
right: 0;
|
261
|
+
width: 100%;
|
262
|
+
z-index: -1; // This ensures the pseudo-element is behind when it has position: absolute
|
263
|
+
}
|
264
|
+
}
|
265
|
+
|
266
|
+
@media screen and (max-width: 991px) {
|
267
|
+
#headerGlobalNavbarContent.collapse:not(.show) {
|
268
|
+
display: block;
|
269
|
+
& .header-global__nav-top {
|
270
|
+
display: none;
|
271
|
+
position: absolute;
|
272
|
+
}
|
273
|
+
& .header-global__nav-bottom .nav-link,
|
274
|
+
.header-global__nav-local .nav-link:not(.navbar-brand) {
|
275
|
+
visibility: hidden;
|
276
|
+
}
|
277
|
+
}
|
278
|
+
}
|
279
|
+
|
280
|
+
.header-global__nav--search-icon,
|
281
|
+
.header-global__nav--close-icon {
|
282
|
+
background-size: 20px 20px;
|
283
|
+
background-position: center;
|
284
|
+
background-repeat: no-repeat;
|
285
|
+
display: block;
|
286
|
+
height: 20px;
|
287
|
+
margin-top: .3125rem;
|
288
|
+
pointer-events: none;
|
289
|
+
width: 20px;
|
290
|
+
}
|
291
|
+
|
292
|
+
.header-global__search-collapse {
|
293
|
+
left: .5rem;
|
294
|
+
margin-left: auto;
|
295
|
+
margin-right: auto;
|
296
|
+
position: absolute;
|
297
|
+
right: 2rem;
|
298
|
+
top: -56px;
|
299
|
+
width: 95%;
|
300
|
+
}
|
301
|
+
|
302
|
+
@media screen and (min-width: 360px) {
|
303
|
+
.header-global__search-collapse {
|
304
|
+
left: .55rem;
|
305
|
+
}
|
306
|
+
}
|
307
|
+
|
308
|
+
@media screen and (min-width: 410px) {
|
309
|
+
.header-global__search-collapse {
|
310
|
+
left: .65rem;
|
311
|
+
}
|
312
|
+
}
|
313
|
+
|
314
|
+
@media screen and (min-width: 410px) {
|
315
|
+
.header-global__search-collapse {
|
316
|
+
left: 1rem;
|
317
|
+
}
|
318
|
+
}
|
319
|
+
|
320
|
+
@media screen and (min-width: 768px) {
|
321
|
+
.header-global__search-collapse {
|
322
|
+
left: 1.25rem;
|
323
|
+
}
|
324
|
+
}
|
325
|
+
|
326
|
+
@media screen and (min-width: 992px) {
|
327
|
+
.header-global__search-collapse {
|
328
|
+
left: 1.5rem;
|
329
|
+
}
|
330
|
+
}
|
331
|
+
|
332
|
+
.header-global__search-collapse.header-global__search-collapse--visible {
|
333
|
+
top: -46px;
|
334
|
+
}
|
335
|
+
|
336
|
+
@media screen and (min-width: 992px) {
|
337
|
+
.header-global__search-collapse.header-global__search-collapse--visible {
|
338
|
+
top: -40px;
|
339
|
+
}
|
340
|
+
}
|
341
|
+
|
342
|
+
.header-global__navbar--search-toggle {
|
343
|
+
top: 50px;
|
344
|
+
}
|
345
|
+
|
346
|
+
.header-global__navbar--search-toggle::before {
|
347
|
+
background-color: $primary-red;
|
348
|
+
content: '';
|
349
|
+
display: block;
|
350
|
+
height: 64px;
|
351
|
+
position: absolute;
|
352
|
+
top: -60px;
|
353
|
+
width: 100%;
|
354
|
+
}
|
355
|
+
|
356
|
+
@media screen and (min-width: 992px) {
|
357
|
+
.header-global__navbar--search-toggle::before {
|
358
|
+
background-color: $primary-blue;
|
359
|
+
}
|
360
|
+
}
|
361
|
+
|
362
|
+
@media screen and (min-width: 992px) {
|
363
|
+
.header-global__dropdown.show {
|
364
|
+
background-color: $color-blue-light-nav;
|
365
|
+
}
|
366
|
+
}
|
367
|
+
|
368
|
+
@keyframes meganav {
|
369
|
+
0% {
|
370
|
+
opacity: 0;
|
371
|
+
}
|
372
|
+
100% {
|
373
|
+
opacity: 1;
|
374
|
+
}
|
375
|
+
}
|
376
|
+
|
377
|
+
@media screen and (min-width: 992px) {
|
378
|
+
.header-global__nav-bottom .dropdown:hover .dropdown-menu,
|
379
|
+
.header-global__nav-bottom .dropdown .dropdown-menu:hover {
|
380
|
+
animation-duration: .5s;
|
381
|
+
animation-name: meganav;
|
382
|
+
display: block !important; // Because Bootstrap loves to use !important
|
383
|
+
}
|
384
|
+
}
|
385
|
+
|
386
|
+
.header-global__nav-bottom .dropdown-item {
|
387
|
+
color: $grey-1;
|
388
|
+
}
|
389
|
+
|
390
|
+
.header-global__nav-bottom .dropdown-item:active {
|
391
|
+
background-color: $primary-blue;
|
392
|
+
color: $white;
|
393
|
+
}
|
394
|
+
|
395
|
+
.header-global__nav-bottom .dropdown-item:hover,
|
396
|
+
.header-global__nav-bottom .dropdown-item:focus {
|
397
|
+
background-color: $color-blue-lighter-nav;
|
398
|
+
border-radius: .175rem;
|
399
|
+
}
|
400
|
+
|
401
|
+
|
402
|
+
@media screen and (min-width: 992px) {
|
403
|
+
.header-global__nav-bottom .dropdown:hover {
|
404
|
+
background-color: $color-blue-light-nav;
|
405
|
+
}
|
406
|
+
}
|
407
|
+
|
408
|
+
@media screen and (min-width: 992px) {
|
409
|
+
.nav-item.dropdown.header-global__dropdown--position { // First 2 classes in this selector are to override BS4 styling
|
410
|
+
position: static; // Needed to allow repositioning of the open dropdown menu
|
411
|
+
}
|
412
|
+
}
|
413
|
+
|
414
|
+
@media screen and (min-width: 992px) {
|
415
|
+
.header-global__dropdown-menu--full-width {
|
416
|
+
left: .75rem;
|
417
|
+
right: .75rem;
|
418
|
+
top: 5.77rem;
|
419
|
+
}
|
420
|
+
}
|
421
|
+
|
422
|
+
@media screen and (min-width: 1300px) {
|
423
|
+
.header-global__dropdown-menu--full-width {
|
424
|
+
left: 1rem;
|
425
|
+
right: 1rem;
|
426
|
+
}
|
427
|
+
}
|
428
|
+
|
429
|
+
@media screen and (min-width: 992px) {
|
430
|
+
.header-global__drodpown-menu--img {
|
431
|
+
width: 280px;
|
432
|
+
&--border {
|
433
|
+
border: thin solid $grey-8;
|
434
|
+
}
|
435
|
+
}
|
436
|
+
}
|
437
|
+
|
438
|
+
@media screen and (max-width: 991px) {
|
439
|
+
.header-global__core::after { // This provides the light-gray background for the navbar in mobile on core sites only
|
440
|
+
content: '';
|
441
|
+
display: block;
|
442
|
+
height: 60px;
|
443
|
+
background-color: $grey-4; // Same light-gray as in Bootstrap
|
444
|
+
border-bottom-color: $grey-5; // Same border-bottom as in Bootstrap
|
445
|
+
border-bottom-style: solid;
|
446
|
+
border-bottom-width: 1px;
|
447
|
+
}
|
448
|
+
}
|
449
|
+
|
450
|
+
@media screen and (min-width: 992px) {
|
451
|
+
#navGlobalTop .header-global__nav-top--nav-link {
|
452
|
+
margin-top: .3125rem;
|
453
|
+
}
|
454
|
+
}
|