commit
1d35a04f54
198 changed files with 30361 additions and 0 deletions
@ -0,0 +1,9 @@
|
||||
# Ignore the node modules folder (created by 'npm install'). |
||||
node_modules |
||||
|
||||
# We absolutely don't want to have the .sass-cache in git. |
||||
.sass-cache |
||||
.DS_Store |
||||
|
||||
*.swo |
||||
*.swp |
||||
@ -0,0 +1 @@
|
||||
roblib_2023 theme, generated from starterkit_theme. Additional information on generating themes can be found in the [Starterkit documentation](https://www.drupal.org/docs/core-modules-and-themes/core-themes/starterkit-theme). |
||||
@ -0,0 +1,42 @@
|
||||
SITE: |
||||
Local: 'https://d10_dev.lndo.site/' |
||||
Remote: |
||||
Url: 'https://rdm2.researchspaces.ca/' |
||||
Path: user |
||||
PORT: 8000 |
||||
BSREWRITE: |
||||
Css: |
||||
|
||||
Match: '/themes/contrib/rdm/css/style.css' |
||||
Replace: '/css/style.css' |
||||
Js: |
||||
Match: "/themes/contrib/RDM/js/" |
||||
Replace: "/js/" |
||||
PATHS: |
||||
Watch: |
||||
#changes in these compiled files trigged reload |
||||
- ./css/*.css |
||||
- ./js/*.js |
||||
Scss: |
||||
Dir: ./css/sass |
||||
Libraries: |
||||
#- libraries/guff |
||||
#- bower_components/foundation-sites/scss |
||||
#- bower_components/motion-ui/src |
||||
- node_modules/modularscale-sass/stylesheets |
||||
- node_modules/vanilla-framework/scss |
||||
- node_modules/foundation-sites/scss |
||||
- node_modules/foundation-sites/scss/util |
||||
- node_modules/motion-ui/src |
||||
- node_modules |
||||
Css: |
||||
Dir: css |
||||
#FileName: app.css |
||||
Js: |
||||
Src: ./js/src/*.js |
||||
Dest: js |
||||
FileName: 'ia-islandimagined.behaviors.js' |
||||
Img: |
||||
Src: img/src |
||||
Dest: img |
||||
|
||||
File diff suppressed because one or more lines are too long
@ -0,0 +1,35 @@
|
||||
|
||||
@import "components/action-links"; |
||||
@import "components/breadcrumb"; |
||||
@import "components/button"; |
||||
@import "components/container-inline"; |
||||
@import "components/details"; |
||||
@import "components/dialog"; |
||||
@import "components/dropbutton"; |
||||
@import "components/exposed-filters"; |
||||
@import "components/field"; |
||||
@import "components/file"; |
||||
@import "components/form"; |
||||
@import "components/icons"; |
||||
@import "components/image-widget"; |
||||
@import "components/indented"; |
||||
@import "components/inline-form"; |
||||
@import "components/item-list"; |
||||
@import "components/link"; |
||||
@import "components/links"; |
||||
@import "components/menu"; |
||||
@import "components/messages"; |
||||
@import "components/more-link"; |
||||
@import "components/node"; |
||||
@import "components/pager"; |
||||
@import "components/progress"; |
||||
@import "components/search-results"; |
||||
@import "components/tabledrag"; |
||||
@import "components/tableselect"; |
||||
@import "components/tablesort"; |
||||
@import "components/tabs"; |
||||
@import "components/textarea"; |
||||
@import "components/ui-dialog"; |
||||
@import "components/user"; |
||||
@import "components/footer"; |
||||
@import "components/topnav"; |
||||
@ -0,0 +1,905 @@
|
||||
@import url('https://fonts.googleapis.com/css?family=Lusitana:400,700|Roboto|Roboto+Condensed:400,700'); |
||||
$lusitana: 'Lusitana', serif; |
||||
$roboto: 'Roboto', sans-serif; |
||||
$roboto-condensed: 'Roboto Condensed', sans-serif; |
||||
// Foundation for Sites Settings |
||||
// ----------------------------- |
||||
// |
||||
// Table of Contents: |
||||
// |
||||
// 1. Global |
||||
// 2. Breakpoints |
||||
// 3. The Grid |
||||
// 4. Base Typography |
||||
// 5. Typography Helpers |
||||
// 6. Abide |
||||
// 7. Accordion |
||||
// 8. Accordion Menu |
||||
// 9. Badge |
||||
// 10. Breadcrumbs |
||||
// 11. Button |
||||
// 12. Button Group |
||||
// 13. Callout |
||||
// 14. Card |
||||
// 15. Close Button |
||||
// 16. Drilldown |
||||
// 17. Dropdown |
||||
// 18. Dropdown Menu |
||||
// 19. Flexbox Utilities |
||||
// 20. Forms |
||||
// 21. Label |
||||
// 22. Media Object |
||||
// 23. Menu |
||||
// 24. Meter |
||||
// 25. Off-canvas |
||||
// 26. Orbit |
||||
// 27. Pagination |
||||
// 28. Progress Bar |
||||
// 29. Prototype Arrow |
||||
// 30. Prototype Border-Box |
||||
// 31. Prototype Border-None |
||||
// 32. Prototype Bordered |
||||
// 33. Prototype Display |
||||
// 34. Prototype Font-Styling |
||||
// 35. Prototype List-Style-Type |
||||
// 36. Prototype Overflow |
||||
// 37. Prototype Position |
||||
// 38. Prototype Rounded |
||||
// 39. Prototype Separator |
||||
// 40. Prototype Shadow |
||||
// 41. Prototype Sizing |
||||
// 42. Prototype Spacing |
||||
// 43. Prototype Text-Decoration |
||||
// 44. Prototype Text-Transformation |
||||
// 45. Prototype Text-Utilities |
||||
// 46. Responsive Embed |
||||
// 47. Reveal |
||||
// 48. Slider |
||||
// 49. Switch |
||||
// 50. Table |
||||
// 51. Tabs |
||||
// 52. Thumbnail |
||||
// 53. Title Bar |
||||
// 54. Tooltip |
||||
// 55. Top Bar |
||||
// 56. Xy Grid |
||||
|
||||
@import 'util'; |
||||
|
||||
// 1. Global |
||||
// --------- |
||||
|
||||
$global-font-size: 100%; |
||||
$global-width: rem-calc(1200); |
||||
$global-lineheight: 1.5; |
||||
$foundation-palette: ( |
||||
primary: #8C2004, |
||||
secondary: #767676, |
||||
//success: #5B8C1F, |
||||
success: #517E1B, |
||||
warning: #ffae00, |
||||
alert: #cc4b37, |
||||
); |
||||
$light-gray: #E0E0E0; |
||||
$medium-gray: #C0C0C0; |
||||
//$dark-gray: #A0A0A0; |
||||
$dark-gray: #757575; |
||||
$black: #333; |
||||
$gray-green: mix(#767676, #5b8c1f, 60%); |
||||
//$green: #5B8C1F; |
||||
$green: #517E1B; |
||||
$red: #8C2004; |
||||
$white: #fefefe; |
||||
$body-background: $light-gray; |
||||
$body-font-color: $black; |
||||
$body-font-family: $roboto; |
||||
$body-safe-padding: false; |
||||
$body-antialiased: true; |
||||
$global-margin: 1rem; |
||||
$global-padding: 1rem; |
||||
$global-position: 1rem; |
||||
$global-weight-normal: normal; |
||||
$global-weight-bold: bold; |
||||
$global-radius: 0; |
||||
$global-menu-padding: 0.7rem 1rem; |
||||
$global-menu-nested-margin: 1rem; |
||||
$global-text-direction: ltr; |
||||
$global-flexbox: true; |
||||
$global-prototype-breakpoints: false; |
||||
$global-button-cursor: auto; |
||||
$global-color-pick-contrast-tolerance: 0; |
||||
$print-transparent-backgrounds: true; |
||||
$print-hrefs: true; |
||||
|
||||
@include add-foundation-colors; |
||||
|
||||
// 2. Breakpoints |
||||
// -------------- |
||||
|
||||
$breakpoints: ( |
||||
"small": 0, |
||||
"medium": 640px, |
||||
"large": 1024px, |
||||
"xlarge": 1200px, |
||||
"xxlarge": 1440px, |
||||
); |
||||
$breakpoints-hidpi: ( |
||||
"hidpi-1": 1, |
||||
"hidpi-1-5": 1.5, |
||||
"hidpi-2": 2, |
||||
"retina": 2, |
||||
"hidpi-3": 3 |
||||
); |
||||
$print-breakpoint: large; |
||||
$breakpoint-classes: (small medium large); |
||||
|
||||
// 3. The Grid |
||||
// ----------- |
||||
|
||||
$grid-row-width: $global-width; |
||||
$grid-column-count: 12; |
||||
$grid-column-gutter: ( |
||||
"small": 20px, |
||||
"medium": 30px, |
||||
); |
||||
$grid-column-align-edge: true; |
||||
$grid-column-alias: 'columns'; |
||||
$block-grid-max: 8; |
||||
|
||||
// 4. Base Typography |
||||
// ------------------ |
||||
|
||||
$header-font-family: $lusitana; |
||||
$header-font-weight: $global-weight-normal; |
||||
$header-font-style: normal; |
||||
$font-family-monospace: Consolas, 'Liberation Mono', Courier, monospace; |
||||
$header-color: inherit; |
||||
$header-lineheight: 1.4; |
||||
$header-margin-bottom: 0.5rem; |
||||
$header-styles: ( |
||||
"small": ( |
||||
'h1': ('font-size': 24), |
||||
'h2': ('font-size': 20), |
||||
'h3': ('font-size': 19), |
||||
'h4': ('font-size': 18), |
||||
'h5': ('font-size': 17), |
||||
'h6': ('font-size': 16), |
||||
), |
||||
"medium": ( |
||||
'h1': ('font-size': 32), |
||||
'h2': ('font-size': 28.43), |
||||
'h3': ('font-size': 21.328), |
||||
'h4': ('font-size': 20), |
||||
'h5': ('font-size': 16), |
||||
'h6': ('font-size': 16), |
||||
), |
||||
); |
||||
$header-text-rendering: optimizeLegibility; |
||||
$small-font-size: 80%; |
||||
$header-small-font-color: $medium-gray; |
||||
$paragraph-lineheight: 1.6; |
||||
$paragraph-margin-bottom: 1rem; |
||||
$paragraph-text-rendering: optimizeLegibility; |
||||
$enable-code-inline: true; |
||||
$anchor-color: $primary-color; |
||||
$anchor-color-hover: scale-color($anchor-color, $lightness: -14%); |
||||
$anchor-text-decoration: none; |
||||
$anchor-text-decoration-hover: none; |
||||
$hr-width: $global-width; |
||||
$hr-border: 1px solid $medium-gray; |
||||
$hr-margin: rem-calc(20) auto; |
||||
$list-lineheight: $paragraph-lineheight; |
||||
$list-margin-bottom: $paragraph-margin-bottom; |
||||
$list-style-type: disc; |
||||
$list-style-position: outside; |
||||
$list-side-margin: 1.25rem; |
||||
$list-nested-side-margin: 1.25rem; |
||||
$defnlist-margin-bottom: 1rem; |
||||
$defnlist-term-weight: $global-weight-bold; |
||||
$defnlist-term-margin-bottom: 0.3rem; |
||||
$blockquote-color: $dark-gray; |
||||
$blockquote-padding: rem-calc(9 20 0 19); |
||||
$blockquote-border: 1px solid $medium-gray; |
||||
$enable-cite-block: true; |
||||
$keystroke-font: $font-family-monospace; |
||||
$keystroke-color: $black; |
||||
$keystroke-background: $light-gray; |
||||
$keystroke-padding: rem-calc(2 4 0); |
||||
$keystroke-radius: $global-radius; |
||||
$abbr-underline: 1px dotted $black; |
||||
|
||||
// 5. Typography Helpers |
||||
// --------------------- |
||||
|
||||
$lead-font-size: $global-font-size * 1.25; |
||||
$lead-lineheight: 1.6; |
||||
$subheader-lineheight: 1.4; |
||||
$subheader-color: $dark-gray; |
||||
$subheader-font-weight: $global-weight-normal; |
||||
$subheader-margin-top: 0.2rem; |
||||
$subheader-margin-bottom: 0.5rem; |
||||
$stat-font-size: 2.5rem; |
||||
$cite-color: $dark-gray; |
||||
$cite-font-size: rem-calc(13); |
||||
$cite-pseudo-content: '\2014 \0020'; |
||||
$code-color: $black; |
||||
$code-font-family: $font-family-monospace; |
||||
$code-font-weight: $global-weight-normal; |
||||
$code-background: $light-gray; |
||||
$code-border: 1px solid $medium-gray; |
||||
$code-padding: rem-calc(2 5 1); |
||||
$code-block-padding: 1rem; |
||||
$code-block-margin-bottom: 1.5rem; |
||||
|
||||
// 6. Abide |
||||
// -------- |
||||
|
||||
$abide-inputs: true; |
||||
$abide-labels: true; |
||||
$input-background-invalid: get-color(alert); |
||||
$form-label-color-invalid: get-color(alert); |
||||
$input-error-color: get-color(alert); |
||||
$input-error-font-size: rem-calc(12); |
||||
$input-error-font-weight: $global-weight-bold; |
||||
|
||||
// 7. Accordion |
||||
// ------------ |
||||
|
||||
$accordion-background: $white; |
||||
$accordion-plusminus: true; |
||||
$accordion-plus-content: '\002B'; |
||||
$accordion-minus-content: '\2013'; |
||||
$accordion-title-font-size: rem-calc(12); |
||||
$accordion-item-color: $primary-color; |
||||
$accordion-item-background-hover: $light-gray; |
||||
$accordion-item-padding: 1.25rem 1rem; |
||||
$accordion-content-background: $white; |
||||
$accordion-content-border: 1px solid $light-gray; |
||||
$accordion-content-color: $body-font-color; |
||||
$accordion-content-padding: 1rem; |
||||
|
||||
// 8. Accordion Menu |
||||
// ----------------- |
||||
|
||||
$accordionmenu-padding: $global-menu-padding; |
||||
$accordionmenu-nested-margin: $global-menu-nested-margin; |
||||
$accordionmenu-submenu-padding: $accordionmenu-padding; |
||||
$accordionmenu-arrows: true; |
||||
$accordionmenu-arrow-color: $primary-color; |
||||
$accordionmenu-item-background: null; |
||||
$accordionmenu-border: null; |
||||
$accordionmenu-submenu-toggle-background: null; |
||||
$accordion-submenu-toggle-border: $accordionmenu-border; |
||||
$accordionmenu-submenu-toggle-width: 40px; |
||||
$accordionmenu-submenu-toggle-height: $accordionmenu-submenu-toggle-width; |
||||
$accordionmenu-arrow-size: 6px; |
||||
|
||||
// 9. Badge |
||||
// -------- |
||||
|
||||
$badge-background: $primary-color; |
||||
$badge-color: $white; |
||||
$badge-color-alt: $black; |
||||
$badge-palette: $foundation-palette; |
||||
$badge-padding: 0.3em; |
||||
$badge-minwidth: 2.1em; |
||||
$badge-font-size: 0.6rem; |
||||
|
||||
// 10. Breadcrumbs |
||||
// --------------- |
||||
|
||||
$breadcrumbs-margin: 0 0 $global-margin 0; |
||||
$breadcrumbs-item-font-size: rem-calc(11); |
||||
$breadcrumbs-item-color: $primary-color; |
||||
$breadcrumbs-item-color-current: $black; |
||||
$breadcrumbs-item-color-disabled: $medium-gray; |
||||
$breadcrumbs-item-margin: 0.75rem; |
||||
$breadcrumbs-item-uppercase: true; |
||||
$breadcrumbs-item-separator: true; |
||||
$breadcrumbs-item-separator-item: '/'; |
||||
$breadcrumbs-item-separator-item-rtl: '\\'; |
||||
$breadcrumbs-item-separator-color: $medium-gray; |
||||
|
||||
// 11. Button |
||||
// ---------- |
||||
|
||||
$button-font-family: $roboto-condensed; |
||||
$button-font-weight: null; |
||||
$button-padding: 0.85em 1em; |
||||
$button-margin: 0 0 $global-margin 0; |
||||
$button-fill: solid; |
||||
$button-background: $primary-color; |
||||
$button-background-hover: scale-color($button-background, $lightness: -15%); |
||||
$button-color: $white; |
||||
$button-color-alt: $black; |
||||
$button-radius: $global-radius; |
||||
$button-border: 1px solid transparent; |
||||
$button-hollow-border-width: 1px; |
||||
$button-sizes: ( |
||||
"tiny": 0.6rem, |
||||
"small": 0.75rem, |
||||
"default": 0.9rem, |
||||
"large": 1.25rem, |
||||
); |
||||
$button-palette: $foundation-palette; |
||||
$button-opacity-disabled: 0.25; |
||||
$button-background-hover-lightness: -20%; |
||||
$button-hollow-hover-lightness: -50%; |
||||
$button-transition: background-color 0.25s ease-out, color 0.25s ease-out; |
||||
$button-responsive-expanded: false; |
||||
|
||||
// 12. Button Group |
||||
// ---------------- |
||||
|
||||
$buttongroup-margin: 1rem; |
||||
$buttongroup-spacing: 1px; |
||||
$buttongroup-child-selector: '.button'; |
||||
$buttongroup-expand-max: 6; |
||||
$buttongroup-radius-on-each: true; |
||||
|
||||
// 13. Callout |
||||
// ----------- |
||||
|
||||
$callout-background: $white; |
||||
$callout-background-fade: 85%; |
||||
$callout-border: 1px solid rgba($black, 0.25); |
||||
$callout-margin: 0 0 1rem 0; |
||||
$callout-sizes: ( |
||||
"small": 0.5rem, |
||||
"default": 1rem, |
||||
"large": 3rem, |
||||
); |
||||
$callout-font-color: $body-font-color; |
||||
$callout-font-color-alt: $body-background; |
||||
$callout-radius: $global-radius; |
||||
$callout-link-tint: 30%; |
||||
|
||||
// 14. Card |
||||
// -------- |
||||
|
||||
$card-background: $white; |
||||
$card-font-color: $body-font-color; |
||||
$card-divider-background: $light-gray; |
||||
$card-border: 1px solid $light-gray; |
||||
$card-shadow: none; |
||||
$card-border-radius: $global-radius; |
||||
$card-padding: $global-padding; |
||||
$card-margin-bottom: $global-margin; |
||||
|
||||
// 15. Close Button |
||||
// ---------------- |
||||
|
||||
$closebutton-position: right top; |
||||
$closebutton-z-index: 10; |
||||
$closebutton-default-size: medium; |
||||
$closebutton-offset-horizontal: ( |
||||
"small": 0.66rem, |
||||
"medium": 1rem, |
||||
); |
||||
$closebutton-offset-vertical: ( |
||||
"small": 0.33em, |
||||
"medium": 0.5rem, |
||||
); |
||||
$closebutton-size: ( |
||||
"small": 1.5em, |
||||
"medium": 2em, |
||||
); |
||||
$closebutton-lineheight: 1; |
||||
$closebutton-color: $dark-gray; |
||||
$closebutton-color-hover: $black; |
||||
|
||||
// 16. Drilldown |
||||
// ------------- |
||||
|
||||
$drilldown-transition: transform 0.15s linear; |
||||
$drilldown-arrows: true; |
||||
$drilldown-padding: $global-menu-padding; |
||||
$drilldown-nested-margin: 0; |
||||
$drilldown-background: $white; |
||||
$drilldown-submenu-padding: $drilldown-padding; |
||||
$drilldown-submenu-background: $white; |
||||
$drilldown-arrow-color: $primary-color; |
||||
$drilldown-arrow-size: 6px; |
||||
|
||||
// 17. Dropdown |
||||
// ------------ |
||||
|
||||
$dropdown-padding: 1rem; |
||||
$dropdown-background: $body-background; |
||||
$dropdown-border: 1px solid $medium-gray; |
||||
$dropdown-font-size: 1rem; |
||||
$dropdown-width: 300px; |
||||
$dropdown-radius: $global-radius; |
||||
$dropdown-sizes: ( |
||||
"tiny": 100px, |
||||
"small": 200px, |
||||
"large": 400px, |
||||
); |
||||
|
||||
// 18. Dropdown Menu |
||||
// ----------------- |
||||
|
||||
$dropdownmenu-arrows: true; |
||||
$dropdownmenu-arrow-color: $anchor-color; |
||||
$dropdownmenu-arrow-size: 6px; |
||||
$dropdownmenu-arrow-padding: 1.5rem; |
||||
$dropdownmenu-min-width: 200px; |
||||
$dropdownmenu-background: null; |
||||
$dropdownmenu-submenu-background: $white; |
||||
$dropdownmenu-padding: $global-menu-padding; |
||||
$dropdownmenu-nested-margin: 0; |
||||
$dropdownmenu-submenu-padding: $dropdownmenu-padding; |
||||
$dropdownmenu-border: 1px solid $medium-gray; |
||||
$dropdown-menu-item-color-active: get-color(primary); |
||||
$dropdown-menu-item-background-active: transparent; |
||||
|
||||
// 19. Flexbox Utilities |
||||
// --------------------- |
||||
|
||||
$flex-source-ordering-count: 6; |
||||
$flexbox-responsive-breakpoints: true; |
||||
|
||||
// 20. Forms |
||||
// --------- |
||||
|
||||
$fieldset-border: 1px solid $medium-gray; |
||||
$fieldset-padding: rem-calc(20); |
||||
$fieldset-margin: rem-calc(18 0); |
||||
$legend-padding: rem-calc(0 3); |
||||
$form-spacing: rem-calc(16); |
||||
$helptext-color: $black; |
||||
$helptext-font-size: rem-calc(13); |
||||
$helptext-font-style: italic; |
||||
$input-prefix-color: $black; |
||||
$input-prefix-background: $light-gray; |
||||
$input-prefix-border: 1px solid $medium-gray; |
||||
$input-prefix-padding: 1rem; |
||||
$form-label-color: $black; |
||||
$form-label-font-size: rem-calc(14); |
||||
$form-label-font-weight: $global-weight-normal; |
||||
$form-label-line-height: 1.8; |
||||
$select-background: $white; |
||||
$select-triangle-color: $dark-gray; |
||||
$select-radius: $global-radius; |
||||
$input-color: $black; |
||||
$input-placeholder-color: $medium-gray; |
||||
$input-font-family: inherit; |
||||
$input-font-size: rem-calc(16); |
||||
$input-font-weight: $global-weight-normal; |
||||
$input-line-height: $global-lineheight; |
||||
$input-background: $white; |
||||
$input-background-focus: $white; |
||||
$input-background-disabled: $light-gray; |
||||
$input-border: 1px solid $medium-gray; |
||||
$input-border-focus: 1px solid $dark-gray; |
||||
$input-padding: $form-spacing * 0.5; |
||||
$input-shadow: inset 0 1px 2px rgba($black, 0.1); |
||||
$input-shadow-focus: 0 0 5px $medium-gray; |
||||
$input-cursor-disabled: not-allowed; |
||||
$input-transition: box-shadow 0.5s, border-color 0.25s ease-in-out; |
||||
$input-number-spinners: true; |
||||
$input-radius: $global-radius; |
||||
$form-button-radius: $global-radius; |
||||
|
||||
// 21. Label |
||||
// --------- |
||||
|
||||
$label-background: $primary-color; |
||||
$label-color: $white; |
||||
$label-color-alt: $black; |
||||
$label-palette: $foundation-palette; |
||||
$label-font-size: 0.8rem; |
||||
$label-padding: 0.33333rem 0.5rem; |
||||
$label-radius: $global-radius; |
||||
|
||||
// 22. Media Object |
||||
// ---------------- |
||||
|
||||
$mediaobject-margin-bottom: $global-margin; |
||||
$mediaobject-section-padding: $global-padding; |
||||
$mediaobject-image-width-stacked: 100%; |
||||
|
||||
// 23. Menu |
||||
// -------- |
||||
|
||||
$menu-margin: 0; |
||||
$menu-nested-margin: $global-menu-nested-margin; |
||||
$menu-items-padding: $global-menu-padding; |
||||
$menu-simple-margin: 1rem; |
||||
$menu-item-color-active: $white; |
||||
$menu-item-color-alt-active: $black; |
||||
$menu-item-background-active: get-color(primary); |
||||
$menu-icon-spacing: 0.25rem; |
||||
$menu-state-back-compat: true; |
||||
$menu-centered-back-compat: true; |
||||
$menu-icons-back-compat: true; |
||||
|
||||
// 24. Meter |
||||
// --------- |
||||
|
||||
$meter-height: 1rem; |
||||
$meter-radius: $global-radius; |
||||
$meter-background: $medium-gray; |
||||
$meter-fill-good: $success-color; |
||||
$meter-fill-medium: $warning-color; |
||||
$meter-fill-bad: $alert-color; |
||||
|
||||
// 25. Off-canvas |
||||
// -------------- |
||||
|
||||
$offcanvas-sizes: ( |
||||
"small": 250px, |
||||
); |
||||
$offcanvas-vertical-sizes: ( |
||||
"small": 250px, |
||||
); |
||||
$offcanvas-background: $light-gray; |
||||
$offcanvas-shadow: 0 0 10px rgba($black, 0.7); |
||||
$offcanvas-inner-shadow-size: 20px; |
||||
$offcanvas-inner-shadow-color: rgba($black, 0.25); |
||||
$offcanvas-overlay-zindex: 11; |
||||
$offcanvas-push-zindex: 12; |
||||
$offcanvas-overlap-zindex: 13; |
||||
$offcanvas-reveal-zindex: 12; |
||||
$offcanvas-transition-length: 0.5s; |
||||
$offcanvas-transition-timing: ease; |
||||
$offcanvas-fixed-reveal: true; |
||||
$offcanvas-exit-background: rgba($white, 0.25); |
||||
$maincontent-class: 'off-canvas-content'; |
||||
|
||||
// 26. Orbit |
||||
// --------- |
||||
|
||||
$orbit-bullet-background: $medium-gray; |
||||
$orbit-bullet-background-active: $dark-gray; |
||||
$orbit-bullet-diameter: 1.2rem; |
||||
$orbit-bullet-margin: 0.1rem; |
||||
$orbit-bullet-margin-top: 0.8rem; |
||||
$orbit-bullet-margin-bottom: 0.8rem; |
||||
$orbit-caption-background: rgba($black, 0.5); |
||||
$orbit-caption-padding: 1rem; |
||||
$orbit-control-background-hover: rgba($black, 0.5); |
||||
$orbit-control-padding: 1rem; |
||||
$orbit-control-zindex: 10; |
||||
|
||||
// 27. Pagination |
||||
// -------------- |
||||
|
||||
$pagination-font-size: rem-calc(14); |
||||
$pagination-margin-bottom: $global-margin; |
||||
$pagination-item-color: $black; |
||||
$pagination-item-padding: rem-calc(3 10); |
||||
$pagination-item-spacing: rem-calc(1); |
||||
$pagination-radius: $global-radius; |
||||
$pagination-item-background-hover: $light-gray; |
||||
$pagination-item-background-current: $primary-color; |
||||
$pagination-item-color-current: $white; |
||||
$pagination-item-color-disabled: $medium-gray; |
||||
$pagination-ellipsis-color: $black; |
||||
$pagination-mobile-items: false; |
||||
$pagination-mobile-current-item: false; |
||||
$pagination-arrows: true; |
||||
$pagination-arrow-previous: '\00AB'; |
||||
$pagination-arrow-next: '\00BB'; |
||||
|
||||
// 28. Progress Bar |
||||
// ---------------- |
||||
|
||||
$progress-height: 1rem; |
||||
$progress-background: $medium-gray; |
||||
$progress-margin-bottom: $global-margin; |
||||
$progress-meter-background: $primary-color; |
||||
$progress-radius: $global-radius; |
||||
|
||||
// 29. Prototype Arrow |
||||
// ------------------- |
||||
|
||||
$prototype-arrow-directions: ( |
||||
down, |
||||
up, |
||||
right, |
||||
left |
||||
); |
||||
$prototype-arrow-size: 0.4375rem; |
||||
$prototype-arrow-color: $black; |
||||
|
||||
// 30. Prototype Border-Box |
||||
// ------------------------ |
||||
|
||||
$prototype-border-box-breakpoints: $global-prototype-breakpoints; |
||||
|
||||
// 31. Prototype Border-None |
||||
// ------------------------- |
||||
|
||||
$prototype-border-none-breakpoints: $global-prototype-breakpoints; |
||||
|
||||
// 32. Prototype Bordered |
||||
// ---------------------- |
||||
|
||||
$prototype-bordered-breakpoints: $global-prototype-breakpoints; |
||||
$prototype-border-width: rem-calc(1); |
||||
$prototype-border-type: solid; |
||||
$prototype-border-color: $medium-gray; |
||||
|
||||
// 33. Prototype Display |
||||
// --------------------- |
||||
|
||||
$prototype-display-breakpoints: $global-prototype-breakpoints; |
||||
$prototype-display: ( |
||||
inline, |
||||
inline-block, |
||||
block, |
||||
table, |
||||
table-cell |
||||
); |
||||
|
||||
// 34. Prototype Font-Styling |
||||
// -------------------------- |
||||
|
||||
$prototype-font-breakpoints: $global-prototype-breakpoints; |
||||
$prototype-wide-letter-spacing: rem-calc(4); |
||||
$prototype-font-normal: $global-weight-normal; |
||||
$prototype-font-bold: $global-weight-bold; |
||||
|
||||
// 35. Prototype List-Style-Type |
||||
// ----------------------------- |
||||
|
||||
$prototype-list-breakpoints: $global-prototype-breakpoints; |
||||
$prototype-style-type-unordered: ( |
||||
disc, |
||||
circle, |
||||
square |
||||
); |
||||
$prototype-style-type-ordered: ( |
||||
decimal, |
||||
lower-alpha, |
||||
lower-latin, |
||||
lower-roman, |
||||
upper-alpha, |
||||
upper-latin, |
||||
upper-roman |
||||
); |
||||
|
||||
// 36. Prototype Overflow |
||||
// ---------------------- |
||||
|
||||
$prototype-overflow-breakpoints: $global-prototype-breakpoints; |
||||
$prototype-overflow: ( |
||||
visible, |
||||
hidden, |
||||
scroll |
||||
); |
||||
|
||||
// 37. Prototype Position |
||||
// ---------------------- |
||||
|
||||
$prototype-position-breakpoints: $global-prototype-breakpoints; |
||||
$prototype-position: ( |
||||
static, |
||||
relative, |
||||
absolute, |
||||
fixed |
||||
); |
||||
$prototype-position-z-index: 975; |
||||
|
||||
// 38. Prototype Rounded |
||||
// --------------------- |
||||
|
||||
$prototype-rounded-breakpoints: $global-prototype-breakpoints; |
||||
$prototype-border-radius: rem-calc(3); |
||||
|
||||
// 39. Prototype Separator |
||||
// ----------------------- |
||||
|
||||
$prototype-separator-breakpoints: $global-prototype-breakpoints; |
||||
$prototype-separator-align: center; |
||||
$prototype-separator-height: rem-calc(2); |
||||
$prototype-separator-width: 3rem; |
||||
$prototype-separator-background: $primary-color; |
||||
$prototype-separator-margin-top: $global-margin; |
||||
|
||||
// 40. Prototype Shadow |
||||
// -------------------- |
||||
|
||||
$prototype-shadow-breakpoints: $global-prototype-breakpoints; |
||||
$prototype-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); |
||||
|
||||
// 41. Prototype Sizing |
||||
// -------------------- |
||||
|
||||
$prototype-sizing-breakpoints: $global-prototype-breakpoints; |
||||
$prototype-sizing: ( |
||||
width, |
||||
height |
||||
); |
||||
$prototype-sizes: ( |
||||
25: 25%, |
||||
50: 50%, |
||||
75: 75%, |
||||
100: 100% |
||||
); |
||||
|
||||
// 42. Prototype Spacing |
||||
// --------------------- |
||||
|
||||
$prototype-spacing-breakpoints: $global-prototype-breakpoints; |
||||
$prototype-spacers-count: 3; |
||||
|
||||
// 43. Prototype Text-Decoration |
||||
// ----------------------------- |
||||
|
||||
$prototype-decoration-breakpoints: $global-prototype-breakpoints; |
||||
$prototype-text-decoration: ( |
||||
overline, |
||||
underline, |
||||
line-through, |
||||
); |
||||
|
||||
// 44. Prototype Text-Transformation |
||||
// --------------------------------- |
||||
|
||||
$prototype-transformation-breakpoints: $global-prototype-breakpoints; |
||||
$prototype-text-transformation: ( |
||||
lowercase, |
||||
uppercase, |
||||
capitalize |
||||
); |
||||
|
||||
// 45. Prototype Text-Utilities |
||||
// ---------------------------- |
||||
|
||||
$prototype-utilities-breakpoints: $global-prototype-breakpoints; |
||||
$prototype-text-overflow: ellipsis; |
||||
|
||||
// 46. Responsive Embed |
||||
// -------------------- |
||||
|
||||
$responsive-embed-margin-bottom: rem-calc(16); |
||||
$responsive-embed-ratios: ( |
||||
default: 4 by 3, |
||||
widescreen: 16 by 9, |
||||
); |
||||
|
||||
// 47. Reveal |
||||
// ---------- |
||||
|
||||
$reveal-background: $white; |
||||
$reveal-width: 600px; |
||||
$reveal-max-width: $global-width; |
||||
$reveal-padding: $global-padding; |
||||
$reveal-border: 1px solid $medium-gray; |
||||
$reveal-radius: $global-radius; |
||||
$reveal-zindex: 1005; |
||||
$reveal-overlay-background: rgba($black, 0.45); |
||||
|
||||
// 48. Slider |
||||
// ---------- |
||||
|
||||
$slider-width-vertical: 0.5rem; |
||||
$slider-transition: all 0.2s ease-in-out; |
||||
$slider-height: 0.5rem; |
||||
$slider-background: $light-gray; |
||||
$slider-fill-background: $medium-gray; |
||||
$slider-handle-height: 1.4rem; |
||||
$slider-handle-width: 1.4rem; |
||||
$slider-handle-background: $primary-color; |
||||
$slider-opacity-disabled: 0.25; |
||||
$slider-radius: $global-radius; |
||||
|
||||
// 49. Switch |
||||
// ---------- |
||||
|
||||
$switch-background: $medium-gray; |
||||
$switch-background-active: $primary-color; |
||||
$switch-height: 2rem; |
||||
$switch-height-tiny: 1.5rem; |
||||
$switch-height-small: 1.75rem; |
||||
$switch-height-large: 2.5rem; |
||||
$switch-radius: $global-radius; |
||||
$switch-margin: $global-margin; |
||||
$switch-paddle-background: $white; |
||||
$switch-paddle-offset: 0.25rem; |
||||
$switch-paddle-radius: $global-radius; |
||||
$switch-paddle-transition: all 0.25s ease-out; |
||||
$switch-opacity-disabled: 0.5; |
||||
$switch-cursor-disabled: not-allowed; |
||||
|
||||
// 50. Table |
||||
// --------- |
||||
|
||||
$table-background: $white; |
||||
$table-color-scale: 5%; |
||||
$table-border: 1px solid smart-scale($table-background, $table-color-scale); |
||||
$table-padding: rem-calc(8 10 10); |
||||
$table-hover-scale: 2%; |
||||
$table-row-hover: darken($table-background, $table-hover-scale); |
||||
$table-row-stripe-hover: darken($table-background, $table-color-scale + $table-hover-scale); |
||||
$table-is-striped: true; |
||||
$table-striped-background: smart-scale($table-background, $table-color-scale); |
||||
$table-stripe: even; |
||||
$table-head-background: smart-scale($table-background, $table-color-scale * 0.5); |
||||
$table-head-row-hover: darken($table-head-background, $table-hover-scale); |
||||
$table-foot-background: smart-scale($table-background, $table-color-scale); |
||||
$table-foot-row-hover: darken($table-foot-background, $table-hover-scale); |
||||
$table-head-font-color: $body-font-color; |
||||
$table-foot-font-color: $body-font-color; |
||||
$show-header-for-stacked: false; |
||||
$table-stack-breakpoint: medium; |
||||
|
||||
// 51. Tabs |
||||
// -------- |
||||
|
||||
$tab-margin: 0; |
||||
$tab-background: $white; |
||||
$tab-color: $primary-color; |
||||
$tab-background-active: $light-gray; |
||||
$tab-active-color: $primary-color; |
||||
$tab-item-font-size: rem-calc(12); |
||||
$tab-item-background-hover: $white; |
||||
$tab-item-padding: 1.25rem 1.5rem; |
||||
$tab-content-background: $white; |
||||
$tab-content-border: $light-gray; |
||||
$tab-content-color: $body-font-color; |
||||
$tab-content-padding: 1rem; |
||||
|
||||
// 52. Thumbnail |
||||
// ------------- |
||||
|
||||
$thumbnail-border: 4px solid $white; |
||||
$thumbnail-margin-bottom: $global-margin; |
||||
$thumbnail-shadow: 0 0 0 1px rgba($black, 0.2); |
||||
$thumbnail-shadow-hover: 0 0 6px 1px rgba($primary-color, 0.5); |
||||
$thumbnail-transition: box-shadow 200ms ease-out; |
||||
$thumbnail-radius: $global-radius; |
||||
|
||||
// 53. Title Bar |
||||
// ------------- |
||||
|
||||
$titlebar-background: $black; |
||||
$titlebar-color: $white; |
||||
$titlebar-padding: 0.5rem; |
||||
$titlebar-text-font-weight: bold; |
||||
$titlebar-icon-color: $white; |
||||
$titlebar-icon-color-hover: $medium-gray; |
||||
$titlebar-icon-spacing: 0.25rem; |
||||
|
||||
// 54. Tooltip |
||||
// ----------- |
||||
|
||||
$has-tip-cursor: help; |
||||
$has-tip-font-weight: $global-weight-bold; |
||||
$has-tip-border-bottom: dotted 1px $dark-gray; |
||||
$tooltip-background-color: $black; |
||||
$tooltip-color: $white; |
||||
$tooltip-padding: 0.75rem; |
||||
$tooltip-max-width: 10rem; |
||||
$tooltip-font-size: $small-font-size; |
||||
$tooltip-pip-width: 0.75rem; |
||||
$tooltip-pip-height: $tooltip-pip-width * 0.866; |
||||
$tooltip-radius: $global-radius; |
||||
|
||||
// 55. Top Bar |
||||
// ----------- |
||||
|
||||
$topbar-padding: 0.5rem; |
||||
$topbar-background: $black; |
||||
$topbar-submenu-background: $topbar-background; |
||||
$topbar-title-spacing: 0.5rem 1rem 0.5rem 0; |
||||
$topbar-input-width: 200px; |
||||
$topbar-unstack-breakpoint: medium; |
||||
|
||||
// 56. Xy Grid |
||||
// ----------- |
||||
|
||||
$xy-grid: true; |
||||
$grid-container: $global-width; |
||||
$grid-columns: 12; |
||||
$grid-margin-gutters: ( |
||||
"small": 20px, |
||||
"medium": 30px |
||||
); |
||||
$grid-padding-gutters: $grid-margin-gutters; |
||||
$grid-container-padding: $grid-padding-gutters; |
||||
$grid-container-max: $global-width; |
||||
$xy-block-grid-max: 8; |
||||
|
||||
@ -0,0 +1,43 @@
|
||||
/** |
||||
* @file |
||||
* Styles for link buttons and action links. |
||||
*/ |
||||
|
||||
.action-links { |
||||
margin: 1em 0; |
||||
padding: 0; |
||||
list-style: none; |
||||
} |
||||
[dir="rtl"] .action-links { |
||||
/* This is required to win over specificity of [dir="rtl"] ul */ |
||||
margin-right: 0; |
||||
} |
||||
.action-links li { |
||||
display: inline-block; |
||||
margin: 0 0.3em; |
||||
} |
||||
.action-links li:first-child { |
||||
margin-left: 0; /* LTR */ |
||||
} |
||||
[dir="rtl"] .action-links li:first-child { |
||||
margin-right: 0; |
||||
margin-left: 0.3em; |
||||
} |
||||
.button-action { |
||||
display: inline-block; |
||||
padding: 0.2em 0.5em 0.3em; |
||||
text-decoration: none; |
||||
line-height: 160%; |
||||
} |
||||
.button-action:before { |
||||
margin-left: -0.1em; /* LTR */ |
||||
padding-right: 0.2em; /* LTR */ |
||||
content: "+"; |
||||
font-weight: 900; |
||||
} |
||||
[dir="rtl"] .button-action:before { |
||||
margin-right: -0.1em; |
||||
margin-left: 0; |
||||
padding-right: 0; |
||||
padding-left: 0.2em; |
||||
} |
||||
@ -0,0 +1,29 @@
|
||||
/** |
||||
* @file |
||||
* Styles for breadcrumbs. |
||||
*/ |
||||
|
||||
.breadcrumb { |
||||
padding-bottom: 0.5em; |
||||
} |
||||
.breadcrumb ol { |
||||
margin: 0; |
||||
padding: 0; |
||||
} |
||||
[dir="rtl"] .breadcrumb ol { |
||||
/* This is required to win over specificity of [dir="rtl"] ol */ |
||||
margin-right: 0; |
||||
} |
||||
.breadcrumb li { |
||||
display: inline; |
||||
margin: 0; |
||||
padding: 0; |
||||
list-style-type: none; |
||||
} |
||||
/* IE8 does not support :not() and :last-child. */ |
||||
.breadcrumb li:before { |
||||
content: " \BB "; |
||||
} |
||||
.breadcrumb li:first-child:before { |
||||
content: none; |
||||
} |
||||
@ -0,0 +1,15 @@
|
||||
/** |
||||
* @file |
||||
* Visual styles for buttons. |
||||
*/ |
||||
|
||||
.button, |
||||
.image-button { |
||||
margin-right: 1em; |
||||
margin-left: 1em; |
||||
} |
||||
.button:first-child, |
||||
.image-button:first-child { |
||||
margin-right: 0; |
||||
margin-left: 0; |
||||
} |
||||
@ -0,0 +1,22 @@
|
||||
/** |
||||
* @file |
||||
* Inline items. |
||||
*/ |
||||
|
||||
.container-inline label:after, |
||||
.container-inline .label:after { |
||||
content: ":"; |
||||
} |
||||
.form-type-radios .container-inline label:after, |
||||
.form-type-checkboxes .container-inline label:after { |
||||
content: ""; |
||||
} |
||||
.form-type-radios .container-inline .form-type-radio, |
||||
.form-type-checkboxes .container-inline .form-type-checkbox { |
||||
margin: 0 1em; |
||||
} |
||||
.container-inline .form-actions, |
||||
.container-inline.form-actions { |
||||
margin-top: 0; |
||||
margin-bottom: 0; |
||||
} |
||||
@ -0,0 +1,23 @@
|
||||
/** |
||||
* @file |
||||
* Collapsible details. |
||||
* |
||||
* @see collapse.js |
||||
* @see http://nicolasgallagher.com/css-background-image-hacks/ |
||||
*/ |
||||
|
||||
details { |
||||
margin-top: 1em; |
||||
margin-bottom: 1em; |
||||
border: 1px solid #ccc; |
||||
} |
||||
details > .details-wrapper { |
||||
padding: 0.5em 1.5em; |
||||
} |
||||
/* @todo Regression: The summary of uncollapsible details are no longer |
||||
vertically aligned with the .details-wrapper in browsers without native |
||||
details support. */ |
||||
summary { |
||||
padding: 0.2em 0.5em; |
||||
cursor: pointer; |
||||
} |
||||
@ -0,0 +1,72 @@
|
||||
/** |
||||
* @file |
||||
* Presentational styles for Drupal dialogs. |
||||
*/ |
||||
|
||||
.ui-dialog { |
||||
position: absolute; |
||||
z-index: 1260; |
||||
overflow: visible; |
||||
padding: 0; |
||||
color: #000; |
||||
border: solid 1px #ccc; |
||||
background: #fff; |
||||
} |
||||
|
||||
@media all and (max-width: 48em) { /* 768px */ |
||||
.ui-dialog { |
||||
width: 92% !important; |
||||
} |
||||
} |
||||
.ui-dialog .ui-dialog-titlebar { |
||||
border-width: 0 0 1px 0; |
||||
border-style: solid; |
||||
border-color: #ccc; |
||||
border-radius: 0; |
||||
background: #f3f4ee; |
||||
font-weight: bold; |
||||
} |
||||
.ui-dialog .ui-dialog-titlebar-close { |
||||
border: 0; |
||||
background: none; |
||||
} |
||||
.ui-dialog .ui-dialog-buttonpane { |
||||
margin-top: 0; |
||||
padding: 0.3em 1em; |
||||
border-width: 1px 0 0 0; |
||||
border-color: #ccc; |
||||
background: #f3f4ee; |
||||
} |
||||
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset { |
||||
margin: 0; |
||||
padding: 0; |
||||
} |
||||
.ui-dialog .ui-dialog-buttonpane .ui-button-text-only .ui-button-text { |
||||
padding: 0; |
||||
} |
||||
|
||||
/* Form action buttons are moved in dialogs. Remove empty space. */ |
||||
.ui-dialog .ui-dialog-content .form-actions { |
||||
margin: 0; |
||||
padding: 0; |
||||
} |
||||
.ui-dialog .ajax-progress-throbber { |
||||
position: fixed; |
||||
z-index: 1000; |
||||
top: 48.5%; |
||||
/* Can't do center:50% middle: 50%, so approximate it for a typical window size. */ |
||||
left: 49%; |
||||
width: 24px; |
||||
height: 24px; |
||||
padding: 4px; |
||||
opacity: 0.9; |
||||
border-radius: 7px; |
||||
background-color: #232323; |
||||
background-image: url(../../images/icons/loading-small.gif); |
||||
background-repeat: no-repeat; |
||||
background-position: center center; |
||||
} |
||||
.ui-dialog .ajax-progress-throbber .throbber, |
||||
.ui-dialog .ajax-progress-throbber .message { |
||||
display: none; |
||||
} |
||||
@ -0,0 +1,33 @@
|
||||
/** |
||||
* @file |
||||
* General styles for dropbuttons. |
||||
*/ |
||||
|
||||
.js .dropbutton-widget { |
||||
border: 1px solid #ccc; |
||||
background-color: white; |
||||
} |
||||
.js .dropbutton-widget:hover { |
||||
border-color: #b8b8b8; |
||||
} |
||||
.dropbutton .dropbutton-action > * { |
||||
padding: 0.1em 0.5em; |
||||
white-space: nowrap; |
||||
} |
||||
.dropbutton .secondary-action { |
||||
border-top: 1px solid #e8e8e8; |
||||
} |
||||
.dropbutton-multiple .dropbutton { |
||||
border-right: 1px solid #e8e8e8; /* LTR */ |
||||
} |
||||
[dir="rtl"] .dropbutton-multiple .dropbutton { |
||||
border-right: 0 none; |
||||
border-left: 1px solid #e8e8e8; |
||||
} |
||||
.dropbutton-multiple .dropbutton .dropbutton-action > * { |
||||
margin-right: 0.25em; /* LTR */ |
||||
} |
||||
[dir="rtl"] .dropbutton-multiple .dropbutton .dropbutton-action > * { |
||||
margin-right: 0; |
||||
margin-left: 0.25em; |
||||
} |
||||
@ -0,0 +1,46 @@
|
||||
/** |
||||
* @file |
||||
* Visual styles for exposed filters. |
||||
*/ |
||||
|
||||
.exposed-filters .filters { |
||||
float: left; /* LTR */ |
||||
margin-right: 1em; /* LTR */ |
||||
} |
||||
[dir="rtl"] .exposed-filters .filters { |
||||
float: right; |
||||
margin-right: 0; |
||||
margin-left: 1em; |
||||
} |
||||
.exposed-filters .form-item { |
||||
margin: 0 0 0.1em 0; |
||||
padding: 0; |
||||
} |
||||
.exposed-filters .form-item label { |
||||
float: left; /* LTR */ |
||||
width: 10em; |
||||
font-weight: normal; |
||||
} |
||||
[dir="rtl"] .exposed-filters .form-item label { |
||||
float: right; |
||||
} |
||||
.exposed-filters .form-select { |
||||
width: 14em; |
||||
} |
||||
/* Current filters */ |
||||
.exposed-filters .current-filters { |
||||
margin-bottom: 1em; |
||||
} |
||||
.exposed-filters .current-filters .placeholder { |
||||
font-weight: bold; |
||||
font-style: normal; |
||||
} |
||||
.exposed-filters .additional-filters { |
||||
float: left; /* LTR */ |
||||
margin-right: 1em; /* LTR */ |
||||
} |
||||
[dir="rtl"] .exposed-filters .additional-filters { |
||||
float: right; |
||||
margin-right: 0; |
||||
margin-left: 1em; |
||||
} |
||||
@ -0,0 +1,25 @@
|
||||
/** |
||||
* @file |
||||
* Visual styles for fields. |
||||
*/ |
||||
|
||||
.field__label { |
||||
font-weight: bold; |
||||
} |
||||
.field--label-inline .field__label, |
||||
.field--label-inline .field__items { |
||||
float: left; /* LTR */ |
||||
} |
||||
.field--label-inline .field__label, |
||||
.field--label-inline > .field__item, |
||||
.field--label-inline .field__items { |
||||
padding-right: 0.5em; |
||||
} |
||||
[dir="rtl"] .field--label-inline .field__label, |
||||
[dir="rtl"] .field--label-inline .field__items { |
||||
padding-right: 0; |
||||
padding-left: 0.5em; |
||||
} |
||||
.field--label-inline .field__label::after { |
||||
content: ":"; |
||||
} |
||||
@ -0,0 +1,62 @@
|
||||
/** |
||||
* @file |
||||
* Default style for file module. |
||||
*/ |
||||
|
||||
/* File icons. */ |
||||
|
||||
.file { |
||||
display: inline-block; |
||||
min-height: 16px; |
||||
padding-left: 20px; /* LTR */ |
||||
background-repeat: no-repeat; |
||||
background-position: left center; /* LTR */ |
||||
} |
||||
[dir="rtl"] .file { |
||||
padding-right: 20px; |
||||
padding-left: inherit; |
||||
background-position: right center; |
||||
} |
||||
.file--general, |
||||
.file--application-octet-stream { |
||||
background-image: url(../../images/icons/application-octet-stream.png); |
||||
} |
||||
.file--package-x-generic { |
||||
background-image: url(../../images/icons/package-x-generic.png); |
||||
} |
||||
.file--x-office-spreadsheet { |
||||
background-image: url(../../images/icons/x-office-spreadsheet.png); |
||||
} |
||||
.file--x-office-document { |
||||
background-image: url(../../images/icons/x-office-document.png); |
||||
} |
||||
.file--x-office-presentation { |
||||
background-image: url(../../images/icons/x-office-presentation.png); |
||||
} |
||||
.file--text-x-script { |
||||
background-image: url(../../images/icons/text-x-script.png); |
||||
} |
||||
.file--text-html { |
||||
background-image: url(../../images/icons/text-html.png); |
||||
} |
||||
.file--text-plain { |
||||
background-image: url(../../images/icons/text-plain.png); |
||||
} |
||||
.file--application-pdf { |
||||
background-image: url(../../images/icons/application-pdf.png); |
||||
} |
||||
.file--application-x-executable { |
||||
background-image: url(../../images/icons/application-x-executable.png); |
||||
} |
||||
.file--audio { |
||||
background-image: url(../../images/icons/audio-x-generic.png); |
||||
} |
||||
.file--video { |
||||
background-image: url(../../images/icons/video-x-generic.png); |
||||
} |
||||
.file--text { |
||||
background-image: url(../../images/icons/text-x-generic.png); |
||||
} |
||||
.file--image { |
||||
background-image: url(../../images/icons/image-x-generic.png); |
||||
} |
||||
@ -0,0 +1,9 @@
|
||||
.region-footer { |
||||
background: $black; |
||||
border-bottom: 4px solid #8C2004; |
||||
} |
||||
.region-subfooter { |
||||
background: darken($black, 10%); |
||||
padding-top: $global-padding; |
||||
padding-bottom: $global-padding; |
||||
} |
||||
@ -0,0 +1,114 @@
|
||||
/** |
||||
* @file |
||||
* Visual styles for form components. |
||||
*/ |
||||
|
||||
form .field-multiple-table { |
||||
margin: 0; |
||||
} |
||||
form .field-multiple-table .field-multiple-drag { |
||||
width: 30px; |
||||
padding-right: 0; /* LTR */ |
||||
} |
||||
[dir='rtl'] form .field-multiple-table .field-multiple-drag { |
||||
padding-left: 0; |
||||
} |
||||
form .field-multiple-table .field-multiple-drag .tabledrag-handle { |
||||
padding-right: 0.5em; /* LTR */ |
||||
} |
||||
[dir='rtl'] form .field-multiple-table .field-multiple-drag .tabledrag-handle { |
||||
padding-right: 0; |
||||
padding-left: 0.5em; |
||||
} |
||||
form .field-add-more-submit { |
||||
margin: 0.5em 0 0; |
||||
} |
||||
|
||||
/** |
||||
* Markup generated by Form API. |
||||
*/ |
||||
.form-item, |
||||
.form-actions { |
||||
margin-top: 1em; |
||||
margin-bottom: 1em; |
||||
} |
||||
tr.odd .form-item, |
||||
tr.even .form-item { |
||||
margin-top: 0; |
||||
margin-bottom: 0; |
||||
} |
||||
.form-composite > .fieldset-wrapper > .description, |
||||
.form-item .description { |
||||
font-size: 0.85em; |
||||
} |
||||
label.option { |
||||
display: inline; |
||||
font-weight: normal; |
||||
} |
||||
.form-composite > legend, |
||||
.label { |
||||
display: inline; |
||||
margin: 0; |
||||
padding: 0; |
||||
font-size: inherit; |
||||
font-weight: bold; |
||||
} |
||||
.form-checkboxes .form-item, |
||||
.form-radios .form-item { |
||||
margin-top: 0.4em; |
||||
margin-bottom: 0.4em; |
||||
} |
||||
.form-type-radio .description, |
||||
.form-type-checkbox .description { |
||||
margin-left: 2.4em; /* LTR */ |
||||
} |
||||
[dir='rtl'] .form-type-radio .description, |
||||
[dir='rtl'] .form-type-checkbox .description { |
||||
margin-right: 2.4em; |
||||
margin-left: 0; |
||||
} |
||||
.marker { |
||||
color: #e00; |
||||
} |
||||
.form-required:after { |
||||
display: inline-block; |
||||
width: 6px; |
||||
height: 6px; |
||||
margin: 0 0.3em; |
||||
content: ''; |
||||
vertical-align: super; |
||||
/* Use a background image to prevent screen readers from announcing the text. */ |
||||
background-image: url(../../images/icons/required.svg); |
||||
background-repeat: no-repeat; |
||||
background-size: 6px 6px; |
||||
} |
||||
abbr.tabledrag-changed, |
||||
abbr.ajax-changed { |
||||
border-bottom: none; |
||||
} |
||||
.form-item input.error, |
||||
.form-item textarea.error, |
||||
.form-item select.error { |
||||
border: 2px solid red; |
||||
} |
||||
|
||||
/* Inline error messages. */ |
||||
.form-item--error-message:before { |
||||
display: inline-block; |
||||
width: 14px; |
||||
height: 14px; |
||||
content: ''; |
||||
vertical-align: sub; |
||||
background: url(../../images/icons/error.svg) no-repeat; |
||||
background-size: contain; |
||||
} |
||||
#search-block-form { |
||||
display: flex; |
||||
margin-top: 10px; |
||||
.form-type-search { |
||||
margin: 0; |
||||
input { |
||||
margin: 0; |
||||
} |
||||
} |
||||
} |
||||
@ -0,0 +1,21 @@
|
||||
/** |
||||
* @file |
||||
* Visual styles for icons. |
||||
*/ |
||||
|
||||
.icon-help { |
||||
padding: 1px 0 1px 20px; /* LTR */ |
||||
background: url(../../images/icons/help.png) 0 50% no-repeat; /* LTR */ |
||||
} |
||||
[dir="rtl"] .icon-help { |
||||
padding: 1px 20px 1px 0; |
||||
background-position: 100% 50%; |
||||
} |
||||
.feed-icon { |
||||
display: block; |
||||
overflow: hidden; |
||||
width: 16px; |
||||
height: 16px; |
||||
text-indent: -9999px; |
||||
background: url(../../images/icons/feed.svg) no-repeat; |
||||
} |
||||
@ -0,0 +1,22 @@
|
||||
/** |
||||
* @file |
||||
* Image upload widget. |
||||
*/ |
||||
|
||||
.image-preview { |
||||
float: left; /* LTR */ |
||||
padding: 0 10px 10px 0; /* LTR */ |
||||
} |
||||
[dir="rtl"] .image-preview { |
||||
float: right; |
||||
padding: 0 0 10px 10px; |
||||
} |
||||
.image-widget-data { |
||||
float: left; /* LTR */ |
||||
} |
||||
[dir="rtl"] .image-widget-data { |
||||
float: right; |
||||
} |
||||
.image-widget-data .text-field { |
||||
width: auto; |
||||
} |
||||
@ -0,0 +1,15 @@
|
||||
/** |
||||
* @file |
||||
* Basic styling for comment module. |
||||
*/ |
||||
|
||||
/** |
||||
* Indent threaded comments. |
||||
*/ |
||||
.indented { |
||||
margin-left: 25px; /* LTR */ |
||||
} |
||||
[dir="rtl"] .indented { |
||||
margin-right: 25px; |
||||
margin-left: 0; |
||||
} |
||||
@ -0,0 +1,33 @@
|
||||
/** |
||||
* @file |
||||
* Visual styles for inline forms. |
||||
*/ |
||||
|
||||
.form--inline .form-item { |
||||
float: left; /* LTR */ |
||||
margin-right: 0.5em; /* LTR */ |
||||
} |
||||
[dir="rtl"] .form--inline .form-item { |
||||
float: right; |
||||
margin-right: 0; |
||||
margin-left: 0.5em; |
||||
} |
||||
/* This is required to win over specificity of [dir="rtl"] .form--inline .form-item */ |
||||
[dir="rtl"] .views-filterable-options-controls .form-item { |
||||
margin-right: 2%; |
||||
} |
||||
.form--inline .form-item-separator { |
||||
margin-top: 2.3em; |
||||
margin-right: 1em; /* LTR */ |
||||
margin-left: 0.5em; /* LTR */ |
||||
} |
||||
[dir="rtl"] .form--inline .form-item-separator { |
||||
margin-right: 0.5em; |
||||
margin-left: 1em; |
||||
} |
||||
.form--inline .form-actions { |
||||
clear: left; /* LTR */ |
||||
} |
||||
[dir="rtl"] .form--inline .form-actions { |
||||
clear: right; |
||||
} |
||||
@ -0,0 +1,32 @@
|
||||
/** |
||||
* @file |
||||
* Visual styles for item list. |
||||
*/ |
||||
|
||||
.item-list .title { |
||||
font-weight: bold; |
||||
} |
||||
.item-list ul { |
||||
margin: 0 0 0.75em 0; |
||||
padding: 0; |
||||
} |
||||
.item-list li { |
||||
margin: 0 0 0.25em 1.5em; /* LTR */ |
||||
padding: 0; |
||||
} |
||||
[dir="rtl"] .item-list li { |
||||
margin: 0 1.5em 0.25em 0; |
||||
} |
||||
|
||||
/** |
||||
* Comma separated lists. |
||||
*/ |
||||
.item-list--comma-list { |
||||
display: inline; |
||||
} |
||||
.item-list--comma-list .item-list__comma-list, |
||||
.item-list__comma-list li, |
||||
[dir="rtl"] .item-list--comma-list .item-list__comma-list, |
||||
[dir="rtl"] .item-list__comma-list li { |
||||
margin: 0; |
||||
} |
||||
@ -0,0 +1,16 @@
|
||||
/** |
||||
* @file |
||||
* Style another element as a link. |
||||
*/ |
||||
|
||||
button.link { |
||||
margin: 0; |
||||
padding: 0; |
||||
cursor: pointer; |
||||
border: 0; |
||||
background: transparent; |
||||
font-size: 1em; |
||||
} |
||||
label button.link { |
||||
font-weight: bold; |
||||
} |
||||
@ -0,0 +1,23 @@
|
||||
/** |
||||
* @file |
||||
* Visual styles for links. |
||||
*/ |
||||
|
||||
ul.inline, |
||||
ul.links.inline { |
||||
display: inline; |
||||
padding-left: 0; /* LTR */ |
||||
} |
||||
[dir="rtl"] ul.inline, |
||||
[dir="rtl"] ul.links.inline { |
||||
padding-right: 0; |
||||
padding-left: 15px; |
||||
} |
||||
ul.inline li { |
||||
display: inline; |
||||
padding: 0 0.5em; |
||||
list-style-type: none; |
||||
} |
||||
ul.links a.is-active { |
||||
color: #000; |
||||
} |
||||
@ -0,0 +1,34 @@
|
||||
/** |
||||
* @file |
||||
* Visual styles for menu. |
||||
*/ |
||||
|
||||
ul.menu { |
||||
margin-left: 1em; /* LTR */ |
||||
padding: 0; |
||||
list-style: none outside; |
||||
text-align: left; /* LTR */ |
||||
} |
||||
[dir="rtl"] ul.menu { |
||||
margin-right: 1em; |
||||
margin-left: 0; |
||||
text-align: right; |
||||
} |
||||
.menu-item--expanded { |
||||
list-style-type: circle; |
||||
list-style-image: url(../../images/icons/menu-expanded.png); |
||||
} |
||||
.menu-item--collapsed { |
||||
list-style-type: disc; |
||||
list-style-image: url(../../images/icons/menu-collapsed.png); /* LTR */ |
||||
} |
||||
[dir="rtl"] .menu-item--collapsed { |
||||
list-style-image: url(../../images/icons/menu-collapsed-rtl.png); |
||||
} |
||||
.menu-item { |
||||
margin: 0; |
||||
padding-top: 0.2em; |
||||
} |
||||
ul.menu a.is-active { |
||||
color: #000; |
||||
} |
||||
@ -0,0 +1,69 @@
|
||||
/** |
||||
* @file |
||||
* Styles for system messages. |
||||
*/ |
||||
|
||||
.messages { |
||||
padding: 15px 20px 15px 35px; /* LTR */ |
||||
word-wrap: break-word; |
||||
border: 1px solid; |
||||
border-width: 1px 1px 1px 0; /* LTR */ |
||||
border-radius: 2px; |
||||
background: no-repeat 10px 17px; /* LTR */ |
||||
overflow-wrap: break-word; |
||||
} |
||||
[dir="rtl"] .messages { |
||||
padding-right: 35px; |
||||
padding-left: 20px; |
||||
text-align: right; |
||||
border-width: 1px 0 1px 1px; |
||||
background-position: right 10px top 17px; |
||||
} |
||||
.messages + .messages { |
||||
margin-top: 1.538em; |
||||
} |
||||
.messages__list { |
||||
margin: 0; |
||||
padding: 0; |
||||
list-style: none; |
||||
} |
||||
.messages__item + .messages__item { |
||||
margin-top: 0.769em; |
||||
} |
||||
.messages--status { |
||||
color: #325e1c; |
||||
border-color: #c9e1bd #c9e1bd #c9e1bd transparent; /* LTR */ |
||||
background-color: #f3faef; |
||||
background-image: url(../../images/icons/check.svg); |
||||
box-shadow: -8px 0 0 #77b259; /* LTR */ |
||||
} |
||||
[dir="rtl"] .messages--status { |
||||
margin-left: 0; |
||||
border-color: #c9e1bd transparent #c9e1bd #c9e1bd; |
||||
box-shadow: 8px 0 0 #77b259; |
||||
} |
||||
.messages--warning { |
||||
color: #734c00; |
||||
border-color: #f4daa6 #f4daa6 #f4daa6 transparent; /* LTR */ |
||||
background-color: #fdf8ed; |
||||
background-image: url(../../images/icons/warning.svg); |
||||
box-shadow: -8px 0 0 #e09600; /* LTR */ |
||||
} |
||||
[dir="rtl"] .messages--warning { |
||||
border-color: #f4daa6 transparent #f4daa6 #f4daa6; |
||||
box-shadow: 8px 0 0 #e09600; |
||||
} |
||||
.messages--error { |
||||
color: #a51b00; |
||||
border-color: #f9c9bf #f9c9bf #f9c9bf transparent; /* LTR */ |
||||
background-color: #fcf4f2; |
||||
background-image: url(../../images/icons/error.svg); |
||||
box-shadow: -8px 0 0 #e62600; /* LTR */ |
||||
} |
||||
[dir="rtl"] .messages--error { |
||||
border-color: #f9c9bf transparent #f9c9bf #f9c9bf; |
||||
box-shadow: 8px 0 0 #e62600; |
||||
} |
||||
.messages--error p.error { |
||||
color: #a51b00; |
||||
} |
||||
@ -0,0 +1,12 @@
|
||||
/** |
||||
* @file |
||||
* Markup generated by #type 'more_link'. |
||||
*/ |
||||
|
||||
.more-link { |
||||
display: block; |
||||
text-align: right; /* LTR */ |
||||
} |
||||
[dir="rtl"] .more-link { |
||||
text-align: left; |
||||
} |
||||
@ -0,0 +1,8 @@
|
||||
/** |
||||
* @file |
||||
* Visual styles for nodes. |
||||
*/ |
||||
|
||||
.node--unpublished { |
||||
background-color: #fff4f4; |
||||
} |
||||
@ -0,0 +1,16 @@
|
||||
/** |
||||
* @file |
||||
* Visual styles for pager. |
||||
*/ |
||||
|
||||
.pager__items { |
||||
clear: both; |
||||
text-align: center; |
||||
} |
||||
.pager__item { |
||||
display: inline; |
||||
padding: 0.5em; |
||||
} |
||||
.pager__item.is-active { |
||||
font-weight: bold; |
||||
} |
||||
@ -0,0 +1,55 @@
|
||||
/** |
||||
* @file |
||||
* Visual styles for progress bar. |
||||
* |
||||
* @see progress.js |
||||
*/ |
||||
|
||||
.progress__track { |
||||
border-color: #b3b3b3; |
||||
border-radius: 10em; |
||||
background-color: #f2f1eb; |
||||
background-image: linear-gradient(#e7e7df, #f0f0f0); |
||||
box-shadow: inset 0 1px 3px hsla(0, 0%, 0%, 0.16); |
||||
} |
||||
.progress__bar { |
||||
height: 16px; |
||||
margin-top: -1px; |
||||
margin-left: -1px; /* LTR */ |
||||
padding: 0 1px; |
||||
-webkit-transition: width 0.5s ease-out; |
||||
transition: width 0.5s ease-out; |
||||
-webkit-animation: animate-stripes 3s linear infinite; |
||||
-moz-animation: animate-stripes 3s linear infinite; |
||||
border: 1px #07629a solid; |
||||
border-radius: 10em; |
||||
background: #057ec9; |
||||
background-image: |
||||
linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15)), |
||||
linear-gradient(to right bottom, #0094f0 0%, #0094f0 25%, #007ecc 25%, #007ecc 50%, #0094f0 50%, #0094f0 75%, #0094f0 100%); |
||||
background-size: 40px 40px; |
||||
} |
||||
[dir="rtl"] .progress__bar { |
||||
margin-right: -1px; |
||||
margin-left: 0; |
||||
-webkit-animation-direction: reverse; |
||||
-moz-animation-direction: reverse; |
||||
animation-direction: reverse; |
||||
} |
||||
|
||||
@media screen and (prefers-reduced-motion: reduce) { |
||||
.progress__bar { |
||||
-webkit-transition: none; |
||||
transition: none; |
||||
-webkit-animation: none; |
||||
-moz-animation: none; |
||||
} |
||||
} |
||||
|
||||
/** |
||||
* Progress bar animations. |
||||
*/ |
||||
@keyframes animate-stripes { |
||||
0% { background-position: 0 0, 0 0; } |
||||
100% { background-position: 0 0, -80px 0; } |
||||
} |
||||
@ -0,0 +1,8 @@
|
||||
/** |
||||
* @file |
||||
* Stylesheet for results generated by the Search module. |
||||
*/ |
||||
|
||||
.search-results { |
||||
list-style: none; |
||||
} |
||||
@ -0,0 +1,14 @@
|
||||
/** |
||||
* @file |
||||
* Visual styles for table drag. |
||||
*/ |
||||
|
||||
tr.drag { |
||||
background-color: #fffff0; |
||||
} |
||||
tr.drag-previous { |
||||
background-color: #ffd; |
||||
} |
||||
body div.tabledrag-changed-warning { |
||||
margin-bottom: 0.5em; |
||||
} |
||||
@ -0,0 +1,19 @@
|
||||
/** |
||||
* @file |
||||
* Table select behavior. |
||||
* |
||||
* @see tableselect.js |
||||
*/ |
||||
|
||||
tr.selected td { |
||||
background: #ffc; |
||||
} |
||||
td.checkbox, |
||||
th.checkbox { |
||||
text-align: center; |
||||
} |
||||
[dir="rtl"] td.checkbox, |
||||
[dir="rtl"] th.checkbox { |
||||
/* This is required to win over specificity of [dir="rtl"] td */ |
||||
text-align: center; |
||||
} |
||||
@ -0,0 +1,11 @@
|
||||
/** |
||||
* @file |
||||
* Table sort indicator. |
||||
*/ |
||||
|
||||
th.is-active img { |
||||
display: inline; |
||||
} |
||||
td.is-active { |
||||
background-color: #ddd; |
||||
} |
||||
@ -0,0 +1,33 @@
|
||||
/** |
||||
* @file |
||||
* Visual styles for tabs. |
||||
*/ |
||||
|
||||
div.tabs { |
||||
margin: 1em 0; |
||||
} |
||||
ul.tabs { |
||||
margin: 0 0 0.5em; |
||||
padding: 0; |
||||
list-style: none; |
||||
} |
||||
.tabs > li { |
||||
display: inline-block; |
||||
margin-right: 0.3em; /* LTR */ |
||||
} |
||||
[dir="rtl"] .tabs > li { |
||||
margin-right: 0; |
||||
margin-left: 0.3em; |
||||
} |
||||
.tabs a { |
||||
display: block; |
||||
padding: 0.2em 1em; |
||||
text-decoration: none; |
||||
} |
||||
.tabs a.is-active { |
||||
background-color: #eee; |
||||
} |
||||
.tabs a:focus, |
||||
.tabs a:hover { |
||||
background-color: #f5f5f5; |
||||
} |
||||
@ -0,0 +1,11 @@
|
||||
/** |
||||
* @file |
||||
* Visual styles for a resizable textarea. |
||||
*/ |
||||
|
||||
.form-textarea-wrapper textarea { |
||||
display: block; |
||||
box-sizing: border-box; |
||||
width: 100%; |
||||
margin: 0; |
||||
} |
||||
@ -0,0 +1,33 @@
|
||||
|
||||
.region-header { |
||||
|
||||
@include top-bar-container; |
||||
} |
||||
|
||||
.mega-menu { |
||||
.dropdown-pane { |
||||
width: 100%; |
||||
max-width: 85rem; |
||||
margin: 0 auto !important; |
||||
left: 0% !important; |
||||
right: 0% !important; |
||||
} |
||||
|
||||
.menu { |
||||
background: none; |
||||
} |
||||
|
||||
> a::after { |
||||
display: block; |
||||
width: 0; |
||||
height: 0; |
||||
border: inset 6px; |
||||
content: ''; |
||||
border-bottom-width: 0; |
||||
border-top-style: solid; |
||||
border-color: #1779ba transparent transparent; |
||||
margin-left: 10px; |
||||
margin-top: 11%; |
||||
} |
||||
} |
||||
|
||||
@ -0,0 +1,15 @@
|
||||
/** |
||||
* @file |
||||
* Styles for modal windows. |
||||
*/ |
||||
|
||||
.ui-dialog--narrow { |
||||
max-width: 500px; |
||||
} |
||||
|
||||
@media screen and (max-width: 600px) { |
||||
.ui-dialog--narrow { |
||||
min-width: 95%; |
||||
max-width: 95%; |
||||
} |
||||
} |
||||
@ -0,0 +1,67 @@
|
||||
/** |
||||
* @file |
||||
* Theme styling for user module. |
||||
*/ |
||||
|
||||
/* Visual styling for the Password strength indicator */ |
||||
.password-strength__meter { |
||||
margin-top: 0.5em; |
||||
background-color: #ebeae4; |
||||
} |
||||
.password-strength__indicator { |
||||
-webkit-transition: width 0.5s ease-out; |
||||
transition: width 0.5s ease-out; |
||||
background-color: #77b259; |
||||
} |
||||
.password-strength__indicator.is-weak { |
||||
background-color: #e62600; |
||||
} |
||||
.password-strength__indicator.is-fair { |
||||
background-color: #e09600; |
||||
} |
||||
.password-strength__indicator.is-good { |
||||
background-color: #0074bd; |
||||
} |
||||
.password-strength__indicator.is-strong { |
||||
background-color: #77b259; |
||||
} |
||||
|
||||
.password-confirm, |
||||
.password-field, |
||||
.password-strength, |
||||
.password-confirm-match, |
||||
.password-confirm-message { |
||||
width: 55%; |
||||
} |
||||
|
||||
.password-suggestions { |
||||
max-width: 34.7em; |
||||
margin: 0.7em 0; |
||||
padding: 0.2em 0.5em; |
||||
border: 1px solid #b4b4b4; |
||||
} |
||||
.password-suggestions ul { |
||||
margin-bottom: 0; |
||||
} |
||||
|
||||
.confirm-parent, |
||||
.password-parent { |
||||
clear: left; /* LTR */ |
||||
overflow: hidden; |
||||
max-width: 33em; |
||||
margin: 0; |
||||
} |
||||
[dir="rtl"] .confirm-parent, |
||||
[dir="rtl"] .password-parent { |
||||
clear: right; |
||||
} |
||||
|
||||
/* Styling for the status indicator of the passwords match test. */ |
||||
.password-confirm .ok { |
||||
color: #325e1c; |
||||
font-weight: bold; |
||||
} |
||||
.password-confirm .error { |
||||
color: #a51b00; |
||||
font-weight: bold; |
||||
} |
||||
@ -0,0 +1,5 @@
|
||||
@import 'settings'; |
||||
@import 'foundation'; |
||||
@include foundation-everything; |
||||
@import 'component_import'; |
||||
//unsorted |
||||
@ -0,0 +1,108 @@
|
||||
//@format
|
||||
const yaml = require('js-yaml'); |
||||
const fs = require('fs'); |
||||
const { SITE, PORT, BSREWRITE, PATHS } = loadConfig(); |
||||
//var server = require('browser-sync').create();
|
||||
//global.server = server;
|
||||
const gulp = require('gulp'); |
||||
const plumber = require('gulp-plumber'); |
||||
const autoprefixer = require('gulp-autoprefixer'); |
||||
const sass = require('gulp-sass')(require('sass')); |
||||
const browsersync = require('browser-sync').create(); |
||||
const sourcemaps = require('gulp-sourcemaps'); |
||||
|
||||
function loadConfig() { |
||||
var ymlFile = fs.readFileSync('config.yml', 'utf8'); |
||||
return yaml.load(ymlFile); |
||||
} |
||||
|
||||
// BrowserSync
|
||||
function bsInit__local(done) { |
||||
browsersync.init({ |
||||
logLevel: 'debug', |
||||
//proxy: SITE.Local.Url,
|
||||
proxy: 'https://d10_dev.lndo.site/', |
||||
}); |
||||
done(); |
||||
} |
||||
|
||||
function bsInit__remote(done) { |
||||
browsersync.init({ |
||||
logLevel: 'debug', |
||||
proxy: SITE.Remote.Url, |
||||
serveStatic: ['.'], |
||||
files: PATHS.Watch, |
||||
plugins: ['bs-rewrite-rules'], |
||||
rewriteRules: [ |
||||
{ |
||||
match: BSREWRITE.Css.Match, |
||||
replace: BSREWRITE.Css.Replace |
||||
}, |
||||
{ |
||||
match: BSREWRITE.Js.Match, |
||||
replace: BSREWRITE.Js.Replace |
||||
} |
||||
] |
||||
}); |
||||
done(); |
||||
} |
||||
|
||||
// BrowserSync Reload
|
||||
function bsReload(done) { |
||||
browsersync.reload(); |
||||
done(); |
||||
} |
||||
|
||||
var cp = require('child_process'); |
||||
function drush() { |
||||
return cp.exec('lando drush cr'); |
||||
} |
||||
|
||||
// Compile CSS
|
||||
function styles() { |
||||
'use strict'; |
||||
return gulp |
||||
//.src(PATHS.Scss.Dir + '/**/*.scss')
|
||||
.src('./css/sass/**/*.scss') |
||||
.pipe(plumber()) |
||||
.pipe(sourcemaps.init()) |
||||
.pipe( |
||||
sass |
||||
.sync({ |
||||
includePaths: PATHS.Scss.Libraries |
||||
}) |
||||
.on('error', sass.logError) |
||||
) |
||||
.pipe(sourcemaps.write('.')) |
||||
//.pipe(gulp.dest(PATHS.Css.Dir))
|
||||
.pipe(gulp.dest('./css')) |
||||
.pipe(browsersync.stream()); |
||||
} |
||||
|
||||
// Watch Files
|
||||
function watchFiles() { |
||||
'use strict'; |
||||
//gulp.watch(PATHS.Scss.Dir + '/**/*.scss', styles);
|
||||
gulp.watch('css/sass/**/*.scss', styles); |
||||
gulp.watch('./templates/**/*.twig', drush); |
||||
} |
||||
|
||||
// Group complex tasks
|
||||
const build = gulp.parallel(styles); |
||||
const watch_remote = gulp.series( |
||||
styles, |
||||
gulp.parallel(watchFiles, bsInit__remote) |
||||
); |
||||
const watch_local = gulp.series( |
||||
styles, |
||||
gulp.parallel(watchFiles, bsInit__local) |
||||
); |
||||
|
||||
// Export tasks
|
||||
exports.build = build; |
||||
exports.styles = styles; |
||||
exports.drush = drush; |
||||
exports.watch = watch_remote; |
||||
exports.remote = watch_remote; |
||||
exports.local = watch_local; |
||||
exports.default = watch_remote; |
||||
|
After Width: | Height: | Size: 51 KiB |
|
After Width: | Height: | Size: 189 B |
|
After Width: | Height: | Size: 346 B |
|
After Width: | Height: | Size: 189 B |
|
After Width: | Height: | Size: 314 B |
|
After Width: | Height: | Size: 294 B |
|
After Width: | Height: | Size: 385 B |
|
After Width: | Height: | Size: 2.1 KiB |
|
After Width: | Height: | Size: 107 B |
|
After Width: | Height: | Size: 105 B |
|
After Width: | Height: | Size: 106 B |
|
After Width: | Height: | Size: 260 B |
|
After Width: | Height: | Size: 265 B |
|
After Width: | Height: | Size: 220 B |
|
After Width: | Height: | Size: 220 B |
|
After Width: | Height: | Size: 276 B |
|
After Width: | Height: | Size: 214 B |
|
After Width: | Height: | Size: 196 B |
|
After Width: | Height: | Size: 181 B |
|
After Width: | Height: | Size: 183 B |
@ -0,0 +1,10 @@
|
||||
/* Load jQuery. |
||||
--------------------------*/ |
||||
jQuery(document).ready(function ($) { |
||||
|
||||
$(document).foundation(); |
||||
// Homepage blocks
|
||||
$('.p-navigation__nav > ul').superfish(); |
||||
/* End document |
||||
--------------------------*/ |
||||
}); |
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -0,0 +1,105 @@
|
||||
module.exports = (grunt) -> |
||||
|
||||
# Project configuration. |
||||
grunt.initConfig |
||||
|
||||
pkg: grunt.file.readJSON('package.json') |
||||
banner: """ |
||||
/* |
||||
* <%= pkg.title || pkg.name %> - v<%= pkg.version %> |
||||
* Copyright (c) <%= grunt.template.today("yyyy") %> <%= pkg.author %> |
||||
* |
||||
* Dual licensed under the MIT and GPL licenses: |
||||
* http://www.opensource.org/licenses/mit-license.php |
||||
* http://www.gnu.org/licenses/gpl.html |
||||
*/ |
||||
|
||||
; |
||||
""" |
||||
# Task configuration. |
||||
clean: |
||||
files: [ |
||||
'dist' |
||||
'test/specs/**/*.js' |
||||
] |
||||
|
||||
|
||||
concat: |
||||
options: |
||||
banner: '<%= banner %>' |
||||
stripBanners: true |
||||
|
||||
dist: |
||||
src: ['src/js/<%= pkg.name %>.js'] |
||||
dest: 'dist/js/<%= pkg.name %>.js' |
||||
|
||||
|
||||
uglify: |
||||
options: |
||||
banner: '<%= banner %>' |
||||
|
||||
dist: |
||||
src: '<%= concat.dist.dest %>' |
||||
dest: 'dist/js/<%= pkg.name %>.min.js' |
||||
|
||||
copy: |
||||
dist: |
||||
files: [ |
||||
{ expand: true, cwd: 'src', src: ['css/**'], dest: 'dist/' } |
||||
{ expand: true, cwd: 'src', src: ['js/hoverIntent.js','js/supersubs.js','js/jquery.js'], dest: 'dist/' } |
||||
] |
||||
|
||||
jshint: |
||||
src: |
||||
options: |
||||
jshintrc: 'src/.jshintrc' |
||||
|
||||
src: ['src/**/<%= pkg.name %>.js'] |
||||
|
||||
|
||||
watch: |
||||
js: |
||||
files: '<%= jshint.src.src %>' |
||||
tasks: ['jshint:src'] |
||||
style: |
||||
files: 'src/**/*.css' |
||||
tasks: ['copy'] |
||||
|
||||
|
||||
coffee: |
||||
compile: |
||||
expand: true |
||||
cwd: '' |
||||
src: 'test/**/*.coffee' |
||||
ext: '.js' |
||||
|
||||
|
||||
jasmine: |
||||
customTemplate: |
||||
src: [ |
||||
'src/**/*.js' |
||||
'!src/**/jquery.js' |
||||
] |
||||
options: |
||||
specs: 'test/specs/*Test.js' |
||||
helpers: 'test/helpers/**/*.js' |
||||
vendor: 'src/js/jquery.js' |
||||
template: 'test/fixtures/menu.tmpl' |
||||
styles: 'src/css/superfish.css' |
||||
keepRunner: false |
||||
|
||||
|
||||
|
||||
# These plugins provide necessary tasks. |
||||
grunt.loadNpmTasks('grunt-contrib-clean') |
||||
grunt.loadNpmTasks('grunt-contrib-concat') |
||||
grunt.loadNpmTasks('grunt-contrib-copy') |
||||
grunt.loadNpmTasks('grunt-contrib-uglify') |
||||
grunt.loadNpmTasks('grunt-contrib-jshint') |
||||
grunt.loadNpmTasks('grunt-contrib-watch') |
||||
grunt.loadNpmTasks('grunt-contrib-jasmine') |
||||
grunt.loadNpmTasks('grunt-contrib-coffee') |
||||
|
||||
# Default task. |
||||
grunt.registerTask('test', ['coffee', 'jasmine', 'clean'] ) |
||||
grunt.registerTask('default', ['jshint', 'test', 'clean', 'concat', 'copy', 'uglify']) |
||||
@ -0,0 +1,21 @@
|
||||
Copyright 2013 jQuery Foundation and other contributors, |
||||
http://jquery.com |
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining |
||||
a copy of this software and associated documentation files (the |
||||
"Software"), to deal in the Software without restriction, including |
||||
without limitation the rights to use, copy, modify, merge, publish, |
||||
distribute, sublicense, and/or sell copies of the Software, and to |
||||
permit persons to whom the Software is furnished to do so, subject to |
||||
the following conditions: |
||||
|
||||
The above copyright notice and this permission notice shall be |
||||
included in all copies or substantial portions of the Software. |
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, |
||||
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF |
||||
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND |
||||
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE |
||||
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION |
||||
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION |
||||
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. |
||||
@ -0,0 +1,13 @@
|
||||
# jQuery Superfish Dropdown Menu Plugin |
||||
|
||||
Our favourite aquatic superhero returns from his sojourn across the galaxy infused with astonishing, hitherto unseen new powers. In his modern incarnation (wearing a rather spiffy cape) Superfish is dedicated to keeping dropdown/flyout menus accessible across browsers great and small, in addition to adding support for newer touch devices (running Android, iOS, Windows, etc). All this **and** a pretty face. |
||||
|
||||
## Documentation and Demos |
||||
|
||||
Please use the [existing Superfish documentation](https://superfish.joelbirch.co/) where you will find full explanations of the customisable features and plenty of examples to get you started. |
||||
|
||||
## Download [Superfish zip archive](https://github.com/joeldbirch/superfish/archive/master.zip) |
||||
|
||||
## Need help? |
||||
|
||||
Superfish menus have been in use since the dawn of time (well, around 8 years or so) and many are the places where you can find help with your Superfish implementations. [Check out the support options](https://superfish.joelbirch.co/download/#support). |
||||
@ -0,0 +1,24 @@
|
||||
{ |
||||
"name": "superfish", |
||||
"version": "1.7.10", |
||||
"main": [ |
||||
"dist/js/superfish.js", |
||||
"dist/js/hoverIntent.js", |
||||
"dist/css/superfish.css" |
||||
], |
||||
"license": "MIT", |
||||
"ignore": [ |
||||
"**/.*", |
||||
"*.json", |
||||
"Gruntfile.coffee", |
||||
"changelog.txt", |
||||
"node_modules", |
||||
"components", |
||||
"README.md", |
||||
"test", |
||||
"src" |
||||
], |
||||
"dependencies": { |
||||
"jquery": ">=1.8" |
||||
} |
||||
} |
||||
@ -0,0 +1,146 @@
|
||||
Changelog for Superfish - a jQuery menu plugin |
||||
|
||||
v1.2.1: altered 2nd July 07. added hide() before animate to make work for jQuery 1.1.3. |
||||
|
||||
v1.2.2: altered 2nd August 07. changed over function .find('ul') to .find('>ul') for smoother animations |
||||
Also deleted the iframe removal lines - not necessary it turns out |
||||
|
||||
v1.2.3: altered jquery 1.1.3.1 broke keyboard access - had to change quite a few things and set display:none on the |
||||
.superfish rule in CSS instead of top:-999em |
||||
|
||||
v1.3: Pretty much a complete overhaul to make all original features work in 1.1.3.1 and above. |
||||
.superfish rule reverted back to top:-999em (which is better). |
||||
|
||||
v1.3.1: altered 'li[ul]' to $('li:has(ul)') to work with jQuery 1.2 |
||||
|
||||
v1.3.2: added onshow callback option as requested - 'this' keyword refers to revealed ul. |
||||
fixed bug whereby multiple menus on a page shared options. Now each menu can have separate options. |
||||
fixed IE6 and IE7 bug whereby under certain circumstances => 3rd tier menus appear instantly with text missing when revisited |
||||
|
||||
v1.3.3: altered event attachment selectors for performance increase on menu setup. |
||||
|
||||
v1.3.4: fixed pathClass bug as current path was not being restored. Still doesn't if using keyboard nav (will work on that). |
||||
|
||||
v1.4: store options objects in array $.superfish.o. Also provide public access to $.superfish.defaults |
||||
provided backward compat for jQuery versions less than 1.2 via oldJquery option - will use li[ul] or li:has(ul) as needed |
||||
added more callbacks, also added option to disable hoverIntent usage if that plugin is detected |
||||
|
||||
v1.4.1: fixed current path not being restored when using keyboard to tab away from the menu completely |
||||
optimised code further - now less code |
||||
removed addself() in favour of backward compatible add(this) |
||||
also remove new mouseenter/mouseleave events on window.unload (due to paranoia) |
||||
|
||||
v1.4.2: 3rd July 2008. added semi-colon at start of superfish.js file to avert script concatenation errors |
||||
added pathLevels option to limit the depth of submenus that get restored by pathClass |
||||
CSS of main example hugely simplified - other example CSS files less-so. |
||||
- top level menu items are not fixed width |
||||
- only need to set submenu widths in one place. |
||||
- various other improvements. |
||||
- class names used in all CSS files are changed to be less generic |
||||
released optional Supersubs plugin which dynamically adjusts submenu widths |
||||
attach everything to jQuery.fn.superfish to clean up jQuery namespace |
||||
removed the multi-tier-all-horizontal-example as it was never a great idea and doesn't seem to be in use |
||||
Update documentation text and remove certain caveats which were there to support users of much older versions of Superfish |
||||
Documentation now show how to apply bgIgrame 2.1 - it's much easier than before |
||||
Add all links and their focus and blur events to the onunload unbind - paranoid about memory leaks |
||||
|
||||
v1.4.3 5th July 2008. documentation completely redone using Mike Alsup's templates. |
||||
CSS revised so that all types of menu use superfish.css as a base. Include additional CSS files to acheive alternate styles. |
||||
class="sf-menu sf-vertical" creates vertical menu, class="sf-menu sf-navbar" creates nav-bar style menu |
||||
|
||||
v1.4.4 7th July 2008. arrows feature added. If option 'autoArrows' is true, auto-appends (spans) to anchors that have a ul submenu sibling, |
||||
and adds class 'sf-with-ul' to anchor. |
||||
CSS added to style new arrows, including an 8-bit alpha (NOT INDEXED!) transparent png of arrow - degrades to solid for IE6. |
||||
Manually add arrow mark-up to docs and disable autoArrows (via defaults option) to maintain decent performance (for docs page) |
||||
Update docs, including zip download, to suit. |
||||
Fix CSS bug that had the third tier of the navbar-style menu visible when JS not available. |
||||
|
||||
v1.4.5 9 July 2008. decreased code weight |
||||
added drop shadows for capable browsers - added css and 8-bit alpha transparent png image for shadow |
||||
remove support for jQuery v<1.2 |
||||
remove unload clean-up which was there to solve garbage collection problems in early jQuery versions |
||||
remove toggling 'visibility' on hide and show which as a fix for an IE bug that is no longer exhibited |
||||
removed need for getOpts, rewrote getMenu |
||||
use [].join('') instead of string concatenation for performance increase - probably very slight in this case |
||||
change selector in 'over' function from '.'+o.hoverClass to 'li.'+o.hoverClass |
||||
|
||||
v1.4.6 added workaround for IE7 shadows. If animation alters opacity then shadow is hidden during the animation and appears after. |
||||
This required some JS and a line of CSS, so created shortcut references to lighten code further. |
||||
|
||||
v1.4.7 added back in the visibility toggle that was removed in 1.4.5 as the bug is indeed still exhibited by IE6 & 7 |
||||
tweaked the look of the shadow slightly and use nicer 32bit png as I now find they behave the same as 8bit png with regard to fades in IE7 |
||||
|
||||
v1.4.8 fix over-sight: using 32bit png meant that the shadow image did show in IE6. Rather than go back to 8bit, add code to exclude IE6 from getting shadow class. |
||||
use new folder structure recommended by Matt from TopicTrack, for easier updates. |
||||
|
||||
v1.4.9 2009ish. add new onIdle callback for when 'current' path is restored |
||||
|
||||
v1.5.0 Jan 2013. Compatibility fixes for jQuery 1.9. Still backward compatibile. Removed code related to using an image for submenu shadows - just use CSS box-shadow instead (old IE will survive without shadows...unfortunately). Other minor aesthetic code alts. |
||||
|
||||
v1.5.1 31 Jan 2013. Use event delegation for events. Update to patched version of hoverIntent which supports event delegation ( forked for prosperity here: https://github.com/joeldbirch/onHoverIntent - original patch author: Kevin Fernandes https://github.com/KevinFernandes/onHoverIntent ). |
||||
|
||||
v1.5.2 4 Feb 2013. New feature: option to require click to open/close submenus. New feature: Animations on closing submenus. New feature: Add partial support for Android (certain browsers). Full support will be in upcoming version. Minor code clean up. |
||||
|
||||
v1.5.3 14 Feb 2013. Bug fix. IE was throwing errors. |
||||
|
||||
v1.5.4 17 Feb 2013. New feature: Links with submenus only followable when their submenu is open, allows support to be extended to ALL browsers on ALL touch devices. Fixes IE bug with 'useClick' feature. |
||||
|
||||
v1.5.5 20 Feb 2013. Moved flag that temporarily prevents link-follows to touchstart so link clicks via mouse are not delayed. This restores usual submenu behaviour with mouse interaction while retaining full touch device support. |
||||
|
||||
v1.5.6 20 Feb 2013. Bug fix for removing link-clickable delay with mouse interaction. |
||||
|
||||
v1.5.7 20 Feb 2013. Bug fix for previous bug fix. |
||||
|
||||
v1.5.8 20 Feb 2013. IE animation bug (https://github.com/joeldbirch/superfish/issues/7) fixed by removing the visibility toggle once again (see v1.4.7 change). jQuery now handles this well. Fix 'useClick' IE bug introduced in last release. |
||||
|
||||
v1.5.9 27 Feb 2013. Bug fix for keyboard behaviour. Focussed menu items that do not have their own associated submenus now close siblings' submenus, as they should. |
||||
|
||||
v1.5.10 2 Mar 2013. Support IE10 on touch devices. Behaves differently to other touch devices as MS Pointer Events want touch events to be similar to mouse events. Touch, hold and swipe around to navigate, then lift off a link to follow it. |
||||
|
||||
v1.5.11 4 Mar 2013. Recode IE10 touch support to behave like other touch browsers rather than holding finger down and moving around. Now tap to open submenus which will stay open until menu is unfocussed. A subsequent tap on a link with an open submenu will follow the link. Only other webkit browsers need touchstart – Apple has its own unique hover fix and touchstart caused it weird highlight bugs. Other very minor code changes. |
||||
|
||||
v1.5.12 13 Mar 2013. Bug fix: Alter initialisation code to avoid requiring menus use the "off-left" (or "off-top") method of hiding submenus. Now allows display:none method and resolves this issue: https://github.com/joeldbirch/superfish/issues/17 . Slight refactor of iOS-sniff. Update to official hoverIntent.js file which added event delegation in r7. |
||||
|
||||
v1.5.13 15 March 2013. Bug fix: height animations were getting stuck - fixed. Minor code optimisations. |
||||
|
||||
v1.6.0 10 Mar 20113. Refactor CSS to allow unlimited menu-tiers without needing to add extra CSS. Semi-gracefully degrade IE6 (I recommend you polyfill with selectivizr.js if you need to support it) to allow reduced and simplified CSS. Prefer display:none submenu hiding rather than off-canvas - only closing animations will break if you do use off-canvas; everything else will still work. Refactor various bits of JS. Remove sfHover class prior to closing animation to avoid "trail of highlighted items" when hovering across items without hoverIntent active. Support IE9 on Windows Phone 7. Include Supersubs-like CSS, making that plugin largely redundant (except its max-width capability). Updated Supersubs to work with Superfish 1.6.0 just in case. Fix iOS: can now close submenus by tapping elsewhere. Fix iOS: back button will reload page (only way of resetting iOS hover state!). Added onBeforeHide callback. Fix Firefox bug with useClick initialisation. Use data() to store menu options. |
||||
|
||||
v1.6.1 Fix issue #31 regarding submenus flashing open and closed under certain conditions in Firefox. Remove bgiframe JS file as part of degraded IE6 support. |
||||
|
||||
v1.6.2 v1.6.1 was mislabelled as v1.6.0 in the superfish.js file. |
||||
|
||||
v1.6.3 Merge pull request from @Spuds. Makes whitespace and other coding styles consistent, finally! |
||||
|
||||
v1.6.4 v1.6.1 caused links with subs to be unfollowable. Quickfix is to (more or less) revert that change. Issue #31 will be reopened until I have a real solution. |
||||
|
||||
v1.6.4.1 Didn't get the previous fix right. |
||||
|
||||
v1.6.5 jQuery Plugin Registry doesn't like such granular version numbers. |
||||
|
||||
v1.6.6 Fix issue #36. https://github.com/joeldbirch/superfish/issues/36 |
||||
|
||||
v1.6.7 Fix second part of issue #36, where there is only one submenu. |
||||
|
||||
v1.6.8 Remove bfcache busting code after issue #37 discussion: https://github.com/joeldbirch/superfish/issues/37 . Bfcache busting deemed an unsuitable solution for Apple's buggy hover state after back button is used, but the code can be found at https://gist.github.com/joeldbirch/5268562 if needed. |
||||
|
||||
v1.6.9 Fix issue #31 once and for all. https://github.com/joeldbirch/superfish/issues/31 |
||||
|
||||
v1.7.0 Complete code restructure to allow private and public methods and properties. Use cleaner, best-practice way of accessing public methods, eg: .superfish('show'). Old hideSuperfishUl and showSuperfishUl methods deprecated but will work (for a short while) as aliases. Add public 'destroy' method and 'onDestroy' callback (closes issue #51). Replace autoArrows functionality (generated spans and arrow image) with CSS-only arrows using pseudo-element borders (closes issue #35). Remove useClick feature (closes issue #47). Allow Supersubs CSS to optionally work on top-level of vertical menu. Rename some functions to reflect their toggleability. Prevent re-initialisation of Superfish. Add buttons to example page to demonstrate public methods (destroy, show, hide). Allow scrolling touch action on IE10 (better for small screens, ie. Windows Phone 8). |
||||
|
||||
v1.7.1 Added missing onDestroy hook. Added tests. Handle multiple method calls silently. |
||||
|
||||
v1.7.2 Simplify by removing click handler and 'follow' flags (possible due to removal of useClick feature). Use touch handler with '.one()' click handler to cancel link follows instead. Android browsers and IE10 now have 'fastclicks'. Sadly, iOS proved too buggy with touch event (nearby menu items sometimes highlighted on touch); relying on Apple's :hover hack instead (no fastclicks). |
||||
|
||||
v1.7.3 Alter JS to allow mega-menus. Provide mega-menu CSS and example page. Added bower.json. Resolve some jsHint issues. |
||||
|
||||
v1.7.4 Set up Grunt. Tests no longer use Testem and can be run in a headless browser by running 'grunt test' from within the main project folder. Minor code alterations to suit jshint. Update jquery file to v1.10.1. Added minified version of Superfish.js. Reorganise files and folders. Alter bower.json. |
||||
|
||||
v1.7.5 In IE11 MS vendor prefix versions of the Pointer Events APIs have been deprecated in favor of the non-prefixed. Added support and backwards compatibility. Reportedly fixes touch interaction issues for Windows 8 with IE11 (closes issue #121). Removed deprecated method access (eg. hideSuperfishUl, showSuperfishUl). |
||||
|
||||
v1.7.6 Let default touch functionality be extended or disabled (closes #105) and onBeforeShow and onBeforeHide prevent show/hide (closes #106). Increment version to force Bower to apply jQuery dependancy update (closes #130). Make package.json compatible with npm. |
||||
|
||||
v1.7.7 Exclude Windows Phone from iOS detection regular expression, closes #147. Better way to cause taps elsewhere on the page to close submenus on iOS. |
||||
|
||||
v1.7.8 Add 'main' field to package.json to make the plugin easier to 'require' for browserify users. Update all dev packages. Update specs and fixtures to work with updated Jasmine package. Shuffle Superfish methods around to appease latest JShint requirements that functions are defined prior to calling them. Update supplied jQuery version to 1.12.1. |
||||
|
||||
v1.7.9 Use camel-casing for data attribute. Fixes #155. Don't rely on toggleClass. Prevents confusion when classes already exist in markup. Closes #154. Add test to ensure markup classes are not removed on init. Update supplied jQuery version to 1.12.3. |
||||
@ -0,0 +1,100 @@
|
||||
/*** ESSENTIAL STYLES ***/ |
||||
.sf-menu { |
||||
position: relative; |
||||
margin: 0; |
||||
padding: 0; |
||||
list-style: none; |
||||
} |
||||
.sf-menu .sf-mega { |
||||
position: absolute; |
||||
display: none; |
||||
top: 100%; |
||||
left: 0; |
||||
z-index: 99; |
||||
} |
||||
.sf-menu > li { |
||||
float: left; |
||||
} |
||||
.sf-menu li:hover > .sf-mega, |
||||
.sf-menu li.sfHover > .sf-mega { |
||||
display: block; |
||||
} |
||||
|
||||
.sf-menu > li > a { |
||||
display: block; |
||||
position: relative; |
||||
} |
||||
|
||||
|
||||
/*** DEMO SKIN ***/ |
||||
.sf-menu { |
||||
float: left; |
||||
margin-bottom: 1em; |
||||
width: 100%; |
||||
} |
||||
.sf-menu .sf-mega { |
||||
box-shadow: 2px 3px 6px rgba(0,0,0,.2); |
||||
width: 100%; /* allow long menu items to determine submenu width */ |
||||
} |
||||
.sf-menu > li > a { |
||||
border-left: 1px solid #fff; |
||||
border-top: 1px solid #dFeEFF; /* fallback colour must use full shorthand */ |
||||
border-top: 1px solid rgba(255,255,255,.5); |
||||
padding: .75em 1em; |
||||
text-decoration: none; |
||||
zoom: 1; /* IE7 */ |
||||
color: #13a; |
||||
} |
||||
.sf-menu > li { |
||||
background: #BDD2FF; |
||||
-webkit-transition: background .2s; |
||||
transition: background .2s; |
||||
} |
||||
.sf-menu > li:hover, |
||||
.sf-menu > li.sfHover { |
||||
background: #CFDEFF; |
||||
/* only transition out, not in */ |
||||
-webkit-transition: none; |
||||
transition: none; |
||||
} |
||||
|
||||
/*** mega menu dropdown ***/ |
||||
.sf-mega { |
||||
background-color: #CFDEFF; |
||||
padding: 1em; |
||||
box-sizing: border-box; |
||||
width: 100%; |
||||
} |
||||
.sf-mega-section { |
||||
float: left; |
||||
width: 8em; /* optional */ |
||||
padding: 0 1em 1em 0; |
||||
margin-right: 1em; |
||||
border-right: 1px solid #b4c8f5; |
||||
} |
||||
|
||||
|
||||
/*** arrows (for all except IE7) **/ |
||||
.sf-arrows .sf-with-ul { |
||||
padding-right: 2.5em; |
||||
*padding-right: 1em; /* no CSS arrows for IE7 (lack pseudo-elements) */ |
||||
} |
||||
/* styling for both css and generated arrows */ |
||||
.sf-arrows .sf-with-ul:after { |
||||
content: ''; |
||||
position: absolute; |
||||
top: 50%; |
||||
right: 1em; |
||||
margin-top: -3px; |
||||
height: 0; |
||||
width: 0; |
||||
/* order of following 3 rules important for fallbacks to work */ |
||||
border: 5px solid transparent; |
||||
border-top-color: #dFeEFF; /* edit this to suit design (no rgba in IE8) */ |
||||
border-top-color: rgba(255,255,255,.5); |
||||
} |
||||
.sf-arrows > li > .sf-with-ul:focus:after, |
||||
.sf-arrows > li:hover > .sf-with-ul:after, |
||||
.sf-arrows > .sfHover > .sf-with-ul:after { |
||||
border-top-color: white; /* IE8 fallback colour */ |
||||
} |
||||
@ -0,0 +1,82 @@
|
||||
/*** adding the class sf-navbar in addition to sf-menu creates an all-horizontal nav-bar menu ***/ |
||||
.sf-navbar { |
||||
background: #BDD2FF; |
||||
position: relative; |
||||
margin-bottom: 5em; |
||||
} |
||||
/* provide background colour for submenu strip */ |
||||
/* you should just set the menu's container bg colour rather than use pseudo-elements */ |
||||
.sf-navbar:before { |
||||
content: ''; |
||||
position: absolute; |
||||
left: 0; |
||||
z-index: -1; |
||||
background-color: #BDD2FF; |
||||
height: 200%; |
||||
width: 100%; |
||||
} |
||||
.sf-navbar ul { |
||||
box-shadow: none; |
||||
} |
||||
.sf-navbar li { |
||||
background: #AABDE6; |
||||
position: static; |
||||
} |
||||
.sf-navbar > li > a, |
||||
.sf-navbar > li > ul > li > a { |
||||
border: none; |
||||
} |
||||
.sf-navbar > li > ul { |
||||
min-width: 36em; /* set this to whatever suits your design */ |
||||
} |
||||
.sf-navbar ul li { |
||||
background: #BDD2FF; |
||||
position: relative; |
||||
} |
||||
.sf-navbar ul ul { |
||||
left: 0; |
||||
top: 100%; |
||||
} |
||||
.sf-navbar ul ul li { |
||||
width: 100%; |
||||
} |
||||
.sf-navbar > li > ul > li { |
||||
float: left; |
||||
} |
||||
.sf-navbar li.current { |
||||
background: #BDD2FF; |
||||
} |
||||
.sf-navbar li:hover, |
||||
.sf-navbar li.sfHover, |
||||
.sf-navbar ul li.current { |
||||
background: #BDD2FF; |
||||
} |
||||
.sf-navbar ul li:hover, |
||||
.sf-navbar ul li.sfHover, |
||||
.sf-navbar ul ul li { |
||||
background: #D1DFFF; |
||||
} |
||||
.sf-navbar ul ul li:hover, |
||||
.sf-navbar ul ul li.sfHover, |
||||
.sf-navbar ul ul li.current { |
||||
background: #E6EEFF; |
||||
} |
||||
.sf-navbar ul li.current > a { |
||||
font-weight: bold; |
||||
} |
||||
|
||||
/*** point all arrows down ***/ |
||||
.sf-arrows.sf-navbar ul .sf-with-ul:after { |
||||
margin-top: -3px; |
||||
margin-right: 0; |
||||
border-color: transparent; |
||||
border-top-color: #dFeEFF; /* edit this to suit design (no rgba in IE8) */ |
||||
border-top-color: rgba(255,255,255,.5); |
||||
} |
||||
|
||||
.sf-arrows.sf-navbar ul > li > .sf-with-ul:focus:after, |
||||
.sf-arrows.sf-navbar ul > li:hover > .sf-with-ul:after, |
||||
.sf-arrows.sf-navbar ul > .sfHover > .sf-with-ul:after { |
||||
border-color: transparent; |
||||
border-top-color: white; |
||||
} |
||||
@ -0,0 +1,37 @@
|
||||
/* adding sf-vertical class in addition to sf-menu creates a vertical menu */ |
||||
/* eg. <ul class="sf-menu sf-vertical"> ... */ |
||||
.sf-vertical { |
||||
width: 12em; |
||||
/* If you want the width of the closed menu to expand to its |
||||
widest top-level menu item (like its "Supersubs" submenus do), |
||||
replace the width rule above with the following two rules. */ |
||||
|
||||
/* |
||||
min-width: 12em; |
||||
*width: 12em; |
||||
*/ |
||||
} |
||||
.sf-vertical ul { |
||||
left: 100%; |
||||
top: 0; |
||||
} |
||||
.sf-vertical > li { |
||||
float: none; |
||||
} |
||||
.sf-vertical li { |
||||
width: 100%; |
||||
} |
||||
|
||||
/*** alter arrow directions ***/ |
||||
.sf-vertical.sf-arrows > li > .sf-with-ul:after { |
||||
margin-top: -5px; |
||||
margin-right: -3px; |
||||
border-color: transparent; |
||||
border-left-color: #dFeEFF; /* edit this to suit design (no rgba in IE8) */ |
||||
border-left-color: rgba(255,255,255,.5); |
||||
} |
||||
.sf-vertical.sf-arrows li > .sf-with-ul:focus:after, |
||||
.sf-vertical.sf-arrows li:hover > .sf-with-ul:after, |
||||
.sf-vertical.sf-arrows .sfHover > .sf-with-ul:after { |
||||
border-left-color: white; |
||||
} |
||||
@ -0,0 +1,113 @@
|
||||
/*** ESSENTIAL STYLES ***/ |
||||
.sf-menu, .sf-menu * { |
||||
margin: 0; |
||||
padding: 0; |
||||
list-style: none; |
||||
} |
||||
.sf-menu li { |
||||
position: relative; |
||||
} |
||||
.sf-menu ul { |
||||
position: absolute; |
||||
display: none; |
||||
top: 100%; |
||||
left: 0; |
||||
z-index: 99; |
||||
} |
||||
.sf-menu > li { |
||||
float: left; |
||||
} |
||||
.sf-menu li:hover > ul, |
||||
.sf-menu li.sfHover > ul { |
||||
display: block; |
||||
} |
||||
|
||||
.sf-menu a { |
||||
display: block; |
||||
position: relative; |
||||
} |
||||
.sf-menu ul ul { |
||||
top: 0; |
||||
left: 100%; |
||||
} |
||||
|
||||
|
||||
/*** DEMO SKIN ***/ |
||||
.sf-menu { |
||||
float: left; |
||||
margin-bottom: 1em; |
||||
} |
||||
.sf-menu ul { |
||||
box-shadow: 2px 2px 6px rgba(0,0,0,.2); |
||||
min-width: 12em; /* allow long menu items to determine submenu width */ |
||||
*width: 12em; /* no auto sub width for IE7, see white-space comment below */ |
||||
} |
||||
.sf-menu a { |
||||
border-left: 1px solid #fff; |
||||
border-top: 1px solid #dFeEFF; /* fallback colour must use full shorthand */ |
||||
border-top: 1px solid rgba(255,255,255,.5); |
||||
padding: .75em 1em; |
||||
text-decoration: none; |
||||
zoom: 1; /* IE7 */ |
||||
} |
||||
.sf-menu a { |
||||
color: #13a; |
||||
} |
||||
.sf-menu li { |
||||
background: #BDD2FF; |
||||
white-space: nowrap; /* no need for Supersubs plugin */ |
||||
*white-space: normal; /* ...unless you support IE7 (let it wrap) */ |
||||
-webkit-transition: background .2s; |
||||
transition: background .2s; |
||||
} |
||||
.sf-menu ul li { |
||||
background: #AABDE6; |
||||
} |
||||
.sf-menu ul ul li { |
||||
background: #9AAEDB; |
||||
} |
||||
.sf-menu li:hover, |
||||
.sf-menu li.sfHover { |
||||
background: #CFDEFF; |
||||
/* only transition out, not in */ |
||||
-webkit-transition: none; |
||||
transition: none; |
||||
} |
||||
|
||||
/*** arrows (for all except IE7) **/ |
||||
.sf-arrows .sf-with-ul { |
||||
padding-right: 2.5em; |
||||
*padding-right: 1em; /* no CSS arrows for IE7 (lack pseudo-elements) */ |
||||
} |
||||
/* styling for both css and generated arrows */ |
||||
.sf-arrows .sf-with-ul:after { |
||||
content: ''; |
||||
position: absolute; |
||||
top: 50%; |
||||
right: 1em; |
||||
margin-top: -3px; |
||||
height: 0; |
||||
width: 0; |
||||
/* order of following 3 rules important for fallbacks to work */ |
||||
border: 5px solid transparent; |
||||
border-top-color: #dFeEFF; /* edit this to suit design (no rgba in IE8) */ |
||||
border-top-color: rgba(255,255,255,.5); |
||||
} |
||||
.sf-arrows > li > .sf-with-ul:focus:after, |
||||
.sf-arrows > li:hover > .sf-with-ul:after, |
||||
.sf-arrows > .sfHover > .sf-with-ul:after { |
||||
border-top-color: white; /* IE8 fallback colour */ |
||||
} |
||||
/* styling for right-facing arrows */ |
||||
.sf-arrows ul .sf-with-ul:after { |
||||
margin-top: -5px; |
||||
margin-right: -3px; |
||||
border-color: transparent; |
||||
border-left-color: #dFeEFF; /* edit this to suit design (no rgba in IE8) */ |
||||
border-left-color: rgba(255,255,255,.5); |
||||
} |
||||
.sf-arrows ul li > .sf-with-ul:focus:after, |
||||
.sf-arrows ul li:hover > .sf-with-ul:after, |
||||
.sf-arrows ul .sfHover > .sf-with-ul:after { |
||||
border-left-color: white; |
||||
} |
||||
@ -0,0 +1,114 @@
|
||||
/** |
||||
* hoverIntent is similar to jQuery's built-in "hover" method except that |
||||
* instead of firing the handlerIn function immediately, hoverIntent checks |
||||
* to see if the user's mouse has slowed down (beneath the sensitivity |
||||
* threshold) before firing the event. The handlerOut function is only |
||||
* called after a matching handlerIn. |
||||
* |
||||
* hoverIntent r7 // 2013.03.11 // jQuery 1.9.1+
|
||||
* http://cherne.net/brian/resources/jquery.hoverIntent.html
|
||||
* |
||||
* You may use hoverIntent under the terms of the MIT license. Basically that |
||||
* means you are free to use hoverIntent as long as this header is left intact. |
||||
* Copyright 2007, 2013 Brian Cherne |
||||
* |
||||
* // basic usage ... just like .hover()
|
||||
* .hoverIntent( handlerIn, handlerOut ) |
||||
* .hoverIntent( handlerInOut ) |
||||
* |
||||
* // basic usage ... with event delegation!
|
||||
* .hoverIntent( handlerIn, handlerOut, selector ) |
||||
* .hoverIntent( handlerInOut, selector ) |
||||
* |
||||
* // using a basic configuration object
|
||||
* .hoverIntent( config ) |
||||
* |
||||
* @param handlerIn function OR configuration object |
||||
* @param handlerOut function OR selector for delegation OR undefined |
||||
* @param selector selector OR undefined |
||||
* @author Brian Cherne <brian(at)cherne(dot)net> |
||||
**/ |
||||
(function($) { |
||||
$.fn.hoverIntent = function(handlerIn,handlerOut,selector) { |
||||
|
||||
// default configuration values
|
||||
var cfg = { |
||||
interval: 100, |
||||
sensitivity: 7, |
||||
timeout: 0 |
||||
}; |
||||
|
||||
if ( typeof handlerIn === "object" ) { |
||||
cfg = $.extend(cfg, handlerIn ); |
||||
} else if ($.isFunction(handlerOut)) { |
||||
cfg = $.extend(cfg, { over: handlerIn, out: handlerOut, selector: selector } ); |
||||
} else { |
||||
cfg = $.extend(cfg, { over: handlerIn, out: handlerIn, selector: handlerOut } ); |
||||
} |
||||
|
||||
// instantiate variables
|
||||
// cX, cY = current X and Y position of mouse, updated by mousemove event
|
||||
// pX, pY = previous X and Y position of mouse, set by mouseover and polling interval
|
||||
var cX, cY, pX, pY; |
||||
|
||||
// A private function for getting mouse position
|
||||
var track = function(ev) { |
||||
cX = ev.pageX; |
||||
cY = ev.pageY; |
||||
}; |
||||
|
||||
// A private function for comparing current and previous mouse position
|
||||
var compare = function(ev,ob) { |
||||
ob.hoverIntent_t = clearTimeout(ob.hoverIntent_t); |
||||
// compare mouse positions to see if they've crossed the threshold
|
||||
if ( ( Math.abs(pX-cX) + Math.abs(pY-cY) ) < cfg.sensitivity ) { |
||||
$(ob).off("mousemove.hoverIntent",track); |
||||
// set hoverIntent state to true (so mouseOut can be called)
|
||||
ob.hoverIntent_s = 1; |
||||
return cfg.over.apply(ob,[ev]); |
||||
} else { |
||||
// set previous coordinates for next time
|
||||
pX = cX; pY = cY; |
||||
// use self-calling timeout, guarantees intervals are spaced out properly (avoids JavaScript timer bugs)
|
||||
ob.hoverIntent_t = setTimeout( function(){compare(ev, ob);} , cfg.interval ); |
||||
} |
||||
}; |
||||
|
||||
// A private function for delaying the mouseOut function
|
||||
var delay = function(ev,ob) { |
||||
ob.hoverIntent_t = clearTimeout(ob.hoverIntent_t); |
||||
ob.hoverIntent_s = 0; |
||||
return cfg.out.apply(ob,[ev]); |
||||
}; |
||||
|
||||
// A private function for handling mouse 'hovering'
|
||||
var handleHover = function(e) { |
||||
// copy objects to be passed into t (required for event object to be passed in IE)
|
||||
var ev = jQuery.extend({},e); |
||||
var ob = this; |
||||
|
||||
// cancel hoverIntent timer if it exists
|
||||
if (ob.hoverIntent_t) { ob.hoverIntent_t = clearTimeout(ob.hoverIntent_t); } |
||||
|
||||
// if e.type == "mouseenter"
|
||||
if (e.type == "mouseenter") { |
||||
// set "previous" X and Y position based on initial entry point
|
||||
pX = ev.pageX; pY = ev.pageY; |
||||
// update "current" X and Y position based on mousemove
|
||||
$(ob).on("mousemove.hoverIntent",track); |
||||
// start polling interval (self-calling timeout) to compare mouse coordinates over time
|
||||
if (ob.hoverIntent_s != 1) { ob.hoverIntent_t = setTimeout( function(){compare(ev,ob);} , cfg.interval );} |
||||
|
||||
// else e.type == "mouseleave"
|
||||
} else { |
||||
// unbind expensive mousemove event
|
||||
$(ob).off("mousemove.hoverIntent",track); |
||||
// if hoverIntent state is true, then call the mouseOut function after the specified delay
|
||||
if (ob.hoverIntent_s == 1) { ob.hoverIntent_t = setTimeout( function(){delay(ev,ob);} , cfg.timeout );} |
||||
} |
||||
}; |
||||
|
||||
// listen for mouseenter and mouseleave
|
||||
return this.on({'mouseenter.hoverIntent':handleHover,'mouseleave.hoverIntent':handleHover}, cfg.selector); |
||||
}; |
||||
})(jQuery); |
||||
File diff suppressed because one or more lines are too long
@ -0,0 +1,278 @@
|
||||
/* |
||||
* jQuery Superfish Menu Plugin - v1.7.10 |
||||
* Copyright (c) 2018 Joel Birch |
||||
* |
||||
* Dual licensed under the MIT and GPL licenses: |
||||
* http://www.opensource.org/licenses/mit-license.php
|
||||
* http://www.gnu.org/licenses/gpl.html
|
||||
*/ |
||||
|
||||
;(function ($, w) { |
||||
"use strict"; |
||||
|
||||
var methods = (function () { |
||||
// private properties and methods go here
|
||||
var c = { |
||||
bcClass: 'sf-breadcrumb', |
||||
menuClass: 'sf-js-enabled', |
||||
anchorClass: 'sf-with-ul', |
||||
menuArrowClass: 'sf-arrows' |
||||
}, |
||||
ios = (function () { |
||||
var ios = /^(?![\w\W]*Windows Phone)[\w\W]*(iPhone|iPad|iPod)/i.test(navigator.userAgent); |
||||
if (ios) { |
||||
// tap anywhere on iOS to unfocus a submenu
|
||||
$('html').css('cursor', 'pointer').on('click', $.noop); |
||||
} |
||||
return ios; |
||||
})(), |
||||
wp7 = (function () { |
||||
var style = document.documentElement.style; |
||||
return ('behavior' in style && 'fill' in style && /iemobile/i.test(navigator.userAgent)); |
||||
})(), |
||||
unprefixedPointerEvents = (function () { |
||||
return (!!w.PointerEvent); |
||||
})(), |
||||
toggleMenuClasses = function ($menu, o, add) { |
||||
var classes = c.menuClass, |
||||
method; |
||||
if (o.cssArrows) { |
||||
classes += ' ' + c.menuArrowClass; |
||||
} |
||||
method = (add) ? 'addClass' : 'removeClass'; |
||||
$menu[method](classes); |
||||
}, |
||||
setPathToCurrent = function ($menu, o) { |
||||
return $menu.find('li.' + o.pathClass).slice(0, o.pathLevels) |
||||
.addClass(o.hoverClass + ' ' + c.bcClass) |
||||
.filter(function () { |
||||
return ($(this).children(o.popUpSelector).hide().show().length); |
||||
}).removeClass(o.pathClass); |
||||
}, |
||||
toggleAnchorClass = function ($li, add) { |
||||
var method = (add) ? 'addClass' : 'removeClass'; |
||||
$li.children('a')[method](c.anchorClass); |
||||
}, |
||||
toggleTouchAction = function ($menu) { |
||||
var msTouchAction = $menu.css('ms-touch-action'); |
||||
var touchAction = $menu.css('touch-action'); |
||||
touchAction = touchAction || msTouchAction; |
||||
touchAction = (touchAction === 'pan-y') ? 'auto' : 'pan-y'; |
||||
$menu.css({ |
||||
'ms-touch-action': touchAction, |
||||
'touch-action': touchAction |
||||
}); |
||||
}, |
||||
getMenu = function ($el) { |
||||
return $el.closest('.' + c.menuClass); |
||||
}, |
||||
getOptions = function ($el) { |
||||
return getMenu($el).data('sfOptions'); |
||||
}, |
||||
over = function () { |
||||
var $this = $(this), |
||||
o = getOptions($this); |
||||
clearTimeout(o.sfTimer); |
||||
$this.siblings().superfish('hide').end().superfish('show'); |
||||
}, |
||||
close = function (o) { |
||||
o.retainPath = ($.inArray(this[0], o.$path) > -1); |
||||
this.superfish('hide'); |
||||
|
||||
if (!this.parents('.' + o.hoverClass).length) { |
||||
o.onIdle.call(getMenu(this)); |
||||
if (o.$path.length) { |
||||
$.proxy(over, o.$path)(); |
||||
} |
||||
} |
||||
}, |
||||
out = function () { |
||||
var $this = $(this), |
||||
o = getOptions($this); |
||||
if (ios) { |
||||
$.proxy(close, $this, o)(); |
||||
} |
||||
else { |
||||
clearTimeout(o.sfTimer); |
||||
o.sfTimer = setTimeout($.proxy(close, $this, o), o.delay); |
||||
} |
||||
}, |
||||
touchHandler = function (e) { |
||||
var $this = $(this), |
||||
o = getOptions($this), |
||||
$ul = $this.siblings(e.data.popUpSelector); |
||||
|
||||
if (o.onHandleTouch.call($ul) === false) { |
||||
return this; |
||||
} |
||||
|
||||
if ($ul.length > 0 && $ul.is(':hidden')) { |
||||
$this.one('click.superfish', false); |
||||
if (e.type === 'MSPointerDown' || e.type === 'pointerdown') { |
||||
$this.trigger('focus'); |
||||
} else { |
||||
$.proxy(over, $this.parent('li'))(); |
||||
} |
||||
} |
||||
}, |
||||
applyHandlers = function ($menu, o) { |
||||
var targets = 'li:has(' + o.popUpSelector + ')'; |
||||
if ($.fn.hoverIntent && !o.disableHI) { |
||||
$menu.hoverIntent(over, out, targets); |
||||
} |
||||
else { |
||||
$menu |
||||
.on('mouseenter.superfish', targets, over) |
||||
.on('mouseleave.superfish', targets, out); |
||||
} |
||||
var touchevent = 'MSPointerDown.superfish'; |
||||
if (unprefixedPointerEvents) { |
||||
touchevent = 'pointerdown.superfish'; |
||||
} |
||||
if (!ios) { |
||||
touchevent += ' touchend.superfish'; |
||||
} |
||||
if (wp7) { |
||||
touchevent += ' mousedown.superfish'; |
||||
} |
||||
$menu |
||||
.on('focusin.superfish', 'li', over) |
||||
.on('focusout.superfish', 'li', out) |
||||
.on(touchevent, 'a', o, touchHandler); |
||||
}; |
||||
|
||||
return { |
||||
// public methods
|
||||
hide: function (instant) { |
||||
if (this.length) { |
||||
var $this = this, |
||||
o = getOptions($this); |
||||
if (!o) { |
||||
return this; |
||||
} |
||||
var not = (o.retainPath === true) ? o.$path : '', |
||||
$ul = $this.find('li.' + o.hoverClass).add(this).not(not).removeClass(o.hoverClass).children(o.popUpSelector), |
||||
speed = o.speedOut; |
||||
|
||||
if (instant) { |
||||
$ul.show(); |
||||
speed = 0; |
||||
} |
||||
o.retainPath = false; |
||||
|
||||
if (o.onBeforeHide.call($ul) === false) { |
||||
return this; |
||||
} |
||||
|
||||
$ul.stop(true, true).animate(o.animationOut, speed, function () { |
||||
var $this = $(this); |
||||
o.onHide.call($this); |
||||
}); |
||||
} |
||||
return this; |
||||
}, |
||||
show: function () { |
||||
var o = getOptions(this); |
||||
if (!o) { |
||||
return this; |
||||
} |
||||
var $this = this.addClass(o.hoverClass), |
||||
$ul = $this.children(o.popUpSelector); |
||||
|
||||
if (o.onBeforeShow.call($ul) === false) { |
||||
return this; |
||||
} |
||||
|
||||
$ul.stop(true, true).animate(o.animation, o.speed, function () { |
||||
o.onShow.call($ul); |
||||
}); |
||||
return this; |
||||
}, |
||||
destroy: function () { |
||||
return this.each(function () { |
||||
var $this = $(this), |
||||
o = $this.data('sfOptions'), |
||||
$hasPopUp; |
||||
if (!o) { |
||||
return false; |
||||
} |
||||
$hasPopUp = $this.find(o.popUpSelector).parent('li'); |
||||
clearTimeout(o.sfTimer); |
||||
toggleMenuClasses($this, o); |
||||
toggleAnchorClass($hasPopUp); |
||||
toggleTouchAction($this); |
||||
// remove event handlers
|
||||
$this.off('.superfish').off('.hoverIntent'); |
||||
// clear animation's inline display style
|
||||
$hasPopUp.children(o.popUpSelector).attr('style', function (i, style) { |
||||
if (typeof style !== 'undefined') { |
||||
return style.replace(/display[^;]+;?/g, ''); |
||||
} |
||||
}); |
||||
// reset 'current' path classes
|
||||
o.$path.removeClass(o.hoverClass + ' ' + c.bcClass).addClass(o.pathClass); |
||||
$this.find('.' + o.hoverClass).removeClass(o.hoverClass); |
||||
o.onDestroy.call($this); |
||||
$this.removeData('sfOptions'); |
||||
}); |
||||
}, |
||||
init: function (op) { |
||||
return this.each(function () { |
||||
var $this = $(this); |
||||
if ($this.data('sfOptions')) { |
||||
return false; |
||||
} |
||||
var o = $.extend({}, $.fn.superfish.defaults, op), |
||||
$hasPopUp = $this.find(o.popUpSelector).parent('li'); |
||||
o.$path = setPathToCurrent($this, o); |
||||
|
||||
$this.data('sfOptions', o); |
||||
|
||||
toggleMenuClasses($this, o, true); |
||||
toggleAnchorClass($hasPopUp, true); |
||||
toggleTouchAction($this); |
||||
applyHandlers($this, o); |
||||
|
||||
$hasPopUp.not('.' + c.bcClass).superfish('hide', true); |
||||
|
||||
o.onInit.call(this); |
||||
}); |
||||
} |
||||
}; |
||||
})(); |
||||
|
||||
$.fn.superfish = function (method, args) { |
||||
if (methods[method]) { |
||||
return methods[method].apply(this, Array.prototype.slice.call(arguments, 1)); |
||||
} |
||||
else if (typeof method === 'object' || ! method) { |
||||
return methods.init.apply(this, arguments); |
||||
} |
||||
else { |
||||
return $.error('Method ' + method + ' does not exist on jQuery.fn.superfish'); |
||||
} |
||||
}; |
||||
|
||||
$.fn.superfish.defaults = { |
||||
popUpSelector: 'ul,.sf-mega', // within menu context
|
||||
hoverClass: 'sfHover', |
||||
pathClass: 'overrideThisToUse', |
||||
pathLevels: 1, |
||||
delay: 800, |
||||
animation: {opacity: 'show'}, |
||||
animationOut: {opacity: 'hide'}, |
||||
speed: 'normal', |
||||
speedOut: 'fast', |
||||
cssArrows: true, |
||||
disableHI: false, |
||||
onInit: $.noop, |
||||
onBeforeShow: $.noop, |
||||
onShow: $.noop, |
||||
onBeforeHide: $.noop, |
||||
onHide: $.noop, |
||||
onIdle: $.noop, |
||||
onDestroy: $.noop, |
||||
onHandleTouch: $.noop |
||||
}; |
||||
|
||||
})(jQuery, window); |
||||
@ -0,0 +1,10 @@
|
||||
/* |
||||
* jQuery Superfish Menu Plugin - v1.7.10 |
||||
* Copyright (c) 2018 Joel Birch |
||||
* |
||||
* Dual licensed under the MIT and GPL licenses: |
||||
* http://www.opensource.org/licenses/mit-license.php
|
||||
* http://www.gnu.org/licenses/gpl.html
|
||||
*/ |
||||
|
||||
;!function(a,b){"use strict";var c=function(){var c={bcClass:"sf-breadcrumb",menuClass:"sf-js-enabled",anchorClass:"sf-with-ul",menuArrowClass:"sf-arrows"},d=function(){var b=/^(?![\w\W]*Windows Phone)[\w\W]*(iPhone|iPad|iPod)/i.test(navigator.userAgent);return b&&a("html").css("cursor","pointer").on("click",a.noop),b}(),e=function(){var a=document.documentElement.style;return"behavior"in a&&"fill"in a&&/iemobile/i.test(navigator.userAgent)}(),f=function(){return!!b.PointerEvent}(),g=function(a,b,d){var e,f=c.menuClass;b.cssArrows&&(f+=" "+c.menuArrowClass),e=d?"addClass":"removeClass",a[e](f)},h=function(b,d){return b.find("li."+d.pathClass).slice(0,d.pathLevels).addClass(d.hoverClass+" "+c.bcClass).filter(function(){return a(this).children(d.popUpSelector).hide().show().length}).removeClass(d.pathClass)},i=function(a,b){var d=b?"addClass":"removeClass";a.children("a")[d](c.anchorClass)},j=function(a){var b=a.css("ms-touch-action"),c=a.css("touch-action");c=c||b,c="pan-y"===c?"auto":"pan-y",a.css({"ms-touch-action":c,"touch-action":c})},k=function(a){return a.closest("."+c.menuClass)},l=function(a){return k(a).data("sfOptions")},m=function(){var b=a(this),c=l(b);clearTimeout(c.sfTimer),b.siblings().superfish("hide").end().superfish("show")},n=function(b){b.retainPath=a.inArray(this[0],b.$path)>-1,this.superfish("hide"),this.parents("."+b.hoverClass).length||(b.onIdle.call(k(this)),b.$path.length&&a.proxy(m,b.$path)())},o=function(){var b=a(this),c=l(b);d?a.proxy(n,b,c)():(clearTimeout(c.sfTimer),c.sfTimer=setTimeout(a.proxy(n,b,c),c.delay))},p=function(b){var c=a(this),d=l(c),e=c.siblings(b.data.popUpSelector);return d.onHandleTouch.call(e)===!1?this:void(e.length>0&&e.is(":hidden")&&(c.one("click.superfish",!1),"MSPointerDown"===b.type||"pointerdown"===b.type?c.trigger("focus"):a.proxy(m,c.parent("li"))()))},q=function(b,c){var g="li:has("+c.popUpSelector+")";a.fn.hoverIntent&&!c.disableHI?b.hoverIntent(m,o,g):b.on("mouseenter.superfish",g,m).on("mouseleave.superfish",g,o);var h="MSPointerDown.superfish";f&&(h="pointerdown.superfish"),d||(h+=" touchend.superfish"),e&&(h+=" mousedown.superfish"),b.on("focusin.superfish","li",m).on("focusout.superfish","li",o).on(h,"a",c,p)};return{hide:function(b){if(this.length){var c=this,d=l(c);if(!d)return this;var e=d.retainPath===!0?d.$path:"",f=c.find("li."+d.hoverClass).add(this).not(e).removeClass(d.hoverClass).children(d.popUpSelector),g=d.speedOut;if(b&&(f.show(),g=0),d.retainPath=!1,d.onBeforeHide.call(f)===!1)return this;f.stop(!0,!0).animate(d.animationOut,g,function(){var b=a(this);d.onHide.call(b)})}return this},show:function(){var a=l(this);if(!a)return this;var b=this.addClass(a.hoverClass),c=b.children(a.popUpSelector);return a.onBeforeShow.call(c)===!1?this:(c.stop(!0,!0).animate(a.animation,a.speed,function(){a.onShow.call(c)}),this)},destroy:function(){return this.each(function(){var b,d=a(this),e=d.data("sfOptions");return!!e&&(b=d.find(e.popUpSelector).parent("li"),clearTimeout(e.sfTimer),g(d,e),i(b),j(d),d.off(".superfish").off(".hoverIntent"),b.children(e.popUpSelector).attr("style",function(a,b){if("undefined"!=typeof b)return b.replace(/display[^;]+;?/g,"")}),e.$path.removeClass(e.hoverClass+" "+c.bcClass).addClass(e.pathClass),d.find("."+e.hoverClass).removeClass(e.hoverClass),e.onDestroy.call(d),void d.removeData("sfOptions"))})},init:function(b){return this.each(function(){var d=a(this);if(d.data("sfOptions"))return!1;var e=a.extend({},a.fn.superfish.defaults,b),f=d.find(e.popUpSelector).parent("li");e.$path=h(d,e),d.data("sfOptions",e),g(d,e,!0),i(f,!0),j(d),q(d,e),f.not("."+c.bcClass).superfish("hide",!0),e.onInit.call(this)})}}}();a.fn.superfish=function(b,d){return c[b]?c[b].apply(this,Array.prototype.slice.call(arguments,1)):"object"!=typeof b&&b?a.error("Method "+b+" does not exist on jQuery.fn.superfish"):c.init.apply(this,arguments)},a.fn.superfish.defaults={popUpSelector:"ul,.sf-mega",hoverClass:"sfHover",pathClass:"overrideThisToUse",pathLevels:1,delay:800,animation:{opacity:"show"},animationOut:{opacity:"hide"},speed:"normal",speedOut:"fast",cssArrows:!0,disableHI:!1,onInit:a.noop,onBeforeShow:a.noop,onShow:a.noop,onBeforeHide:a.noop,onHide:a.noop,onIdle:a.noop,onDestroy:a.noop,onHandleTouch:a.noop}}(jQuery,window); |
||||
@ -0,0 +1,91 @@
|
||||
|
||||
/* |
||||
* Supersubs v0.3b - jQuery plugin |
||||
* Copyright (c) 2013 Joel Birch |
||||
* |
||||
* Dual licensed under the MIT and GPL licenses: |
||||
* http://www.opensource.org/licenses/mit-license.php
|
||||
* http://www.gnu.org/licenses/gpl.html
|
||||
* |
||||
* |
||||
* This plugin automatically adjusts submenu widths of suckerfish-style menus to that of |
||||
* their longest list item children. If you use this, please expect bugs and report them |
||||
* to the jQuery Google Group with the word 'Superfish' in the subject line. |
||||
* |
||||
*/ |
||||
|
||||
;(function($){ // $ will refer to jQuery within this closure
|
||||
|
||||
$.fn.supersubs = function(options){ |
||||
var opts = $.extend({}, $.fn.supersubs.defaults, options); |
||||
// return original object to support chaining
|
||||
return this.each(function() { |
||||
// cache selections
|
||||
var $$ = $(this); |
||||
// support metadata
|
||||
var o = $.meta ? $.extend({}, opts, $$.data()) : opts; |
||||
// cache all ul elements and show them in preparation for measurements
|
||||
var $ULs = $$.find('ul').show(); |
||||
// get the font size of menu.
|
||||
// .css('fontSize') returns various results cross-browser, so measure an em dash instead
|
||||
var fontsize = $('<li id="menu-fontsize">—</li>').css({ |
||||
'padding' : 0, |
||||
'position' : 'absolute', |
||||
'top' : '-999em', |
||||
'width' : 'auto' |
||||
}).appendTo($$)[0].clientWidth; //clientWidth is faster than .width()
|
||||
// remove em dash
|
||||
$('#menu-fontsize').remove(); |
||||
// loop through each ul in menu
|
||||
$ULs.each(function(i) {
|
||||
// cache this ul
|
||||
var $ul = $(this); |
||||
// get all (li) children of this ul
|
||||
var $LIs = $ul.children(); |
||||
// get all anchor grand-children
|
||||
var $As = $LIs.children('a'); |
||||
// force content to one line and save current float property
|
||||
var liFloat = $LIs.css('white-space','nowrap').css('float'); |
||||
// remove width restrictions and floats so elements remain vertically stacked
|
||||
$ul.add($LIs).add($As).css({ |
||||
'float' : 'none', |
||||
'width' : 'auto' |
||||
}); |
||||
// this ul will now be shrink-wrapped to longest li due to position:absolute
|
||||
// so save its width as ems.
|
||||
var emWidth = $ul[0].clientWidth / fontsize; |
||||
// add more width to ensure lines don't turn over at certain sizes in various browsers
|
||||
emWidth += o.extraWidth; |
||||
// restrict to at least minWidth and at most maxWidth
|
||||
if (emWidth > o.maxWidth) { emWidth = o.maxWidth; } |
||||
else if (emWidth < o.minWidth) { emWidth = o.minWidth; } |
||||
emWidth += 'em'; |
||||
// set ul to width in ems
|
||||
$ul.css('width',emWidth); |
||||
// restore li floats to avoid IE bugs
|
||||
// set li width to full width of this ul
|
||||
// revert white-space to normal
|
||||
$LIs.css({ |
||||
'float' : liFloat, |
||||
'width' : '100%', |
||||
'white-space' : 'normal' |
||||
}) |
||||
// update offset position of descendant ul to reflect new width of parent.
|
||||
// set it to 100% in case it isn't already set to this in the CSS
|
||||
.each(function(){ |
||||
var $childUl = $(this).children('ul'); |
||||
var offsetDirection = $childUl.css('left') !== undefined ? 'left' : 'right'; |
||||
$childUl.css(offsetDirection,'100%'); |
||||
}); |
||||
}).hide(); |
||||
|
||||
}); |
||||
}; |
||||
// expose defaults
|
||||
$.fn.supersubs.defaults = { |
||||
minWidth : 9, // requires em unit.
|
||||
maxWidth : 25, // requires em unit.
|
||||
extraWidth : 0 // extra width can ensure lines don't sometimes turn over due to slight browser differences in how they round-off values
|
||||
}; |
||||
|
||||
})(jQuery); // plugin code ends
|
||||
@ -0,0 +1,154 @@
|
||||
<!DOCTYPE html> |
||||
<html lang="en"> |
||||
<head> |
||||
<meta charset="utf-8"> |
||||
<title>jQuery Superfish dropdown menu example with full touch support for Android, iOS and Windows 8.</title> |
||||
<link rel="stylesheet" href="../dist/css/superfish.css" media="screen"> |
||||
<style> body { max-width: 40em; } </style> |
||||
<script src="../dist/js/jquery.js"></script> |
||||
<script src="../dist/js/hoverIntent.js"></script> |
||||
<script src="../dist/js/superfish.js"></script> |
||||
<script> |
||||
|
||||
(function($){ //create closure so we can safely use $ as alias for jQuery |
||||
|
||||
$(document).ready(function(){ |
||||
|
||||
// initialise plugin |
||||
var example = $('#example').superfish({ |
||||
//add options here if required |
||||
}); |
||||
|
||||
// buttons to demonstrate Superfish's public methods |
||||
$('.destroy').on('click', function(){ |
||||
example.superfish('destroy'); |
||||
}); |
||||
|
||||
$('.init').on('click', function(){ |
||||
example.superfish(); |
||||
}); |
||||
|
||||
$('.open').on('click', function(){ |
||||
example.children('li:first').superfish('show'); |
||||
}); |
||||
|
||||
$('.close').on('click', function(){ |
||||
example.children('li:first').superfish('hide'); |
||||
}); |
||||
}); |
||||
|
||||
})(jQuery); |
||||
|
||||
|
||||
</script> |
||||
</head> |
||||
<body> |
||||
<ul class="sf-menu" id="example"> |
||||
<li class="current"> |
||||
<a href="followed.html">menu item 1</a> |
||||
<ul> |
||||
<li> |
||||
<a href="followed.html">menu item</a> |
||||
</li> |
||||
<li class="current"> |
||||
<a href="followed.html">long menu item sets sub width</a> |
||||
<ul> |
||||
<li class="current"><a href="followed.html">menu item</a></li> |
||||
<li><a href="followed.html">menu item</a></li> |
||||
<li><a href="followed.html">menu item</a></li> |
||||
<li><a href="followed.html">menu item</a></li> |
||||
<li><a href="followed.html">menu item</a></li> |
||||
</ul> |
||||
</li> |
||||
<li> |
||||
<a href="followed.html">menu item</a> |
||||
<ul> |
||||
<li><a href="followed.html">menu item</a></li> |
||||
<li><a href="followed.html">menu item</a></li> |
||||
<li><a href="followed.html">menu item</a></li> |
||||
<li><a href="followed.html">menu item</a></li> |
||||
<li><a href="followed.html">menu item</a></li> |
||||
</ul> |
||||
</li> |
||||
<li> |
||||
<a href="followed.html">menu item</a> |
||||
<ul> |
||||
<li><a href="followed.html">menu item</a></li> |
||||
<li><a href="followed.html">menu item</a></li> |
||||
<li><a href="followed.html">menu item</a></li> |
||||
<li><a href="followed.html">menu item</a></li> |
||||
<li><a href="followed.html">menu item</a></li> |
||||
</ul> |
||||
</li> |
||||
</ul> |
||||
</li> |
||||
<li> |
||||
<a href="followed.html">menu item 2</a> |
||||
</li> |
||||
<li> |
||||
<a href="followed.html">menu item 3</a> |
||||
<ul> |
||||
<li> |
||||
<a href="followed.html">menu item</a> |
||||
<ul> |
||||
<li><a href="followed.html">short</a></li> |
||||
<li><a href="followed.html">short</a></li> |
||||
<li><a href="followed.html">short</a></li> |
||||
<li><a href="followed.html">short</a></li> |
||||
<li><a href="followed.html">short</a></li> |
||||
</ul> |
||||
</li> |
||||
<li> |
||||
<a href="followed.html">menu item</a> |
||||
<ul> |
||||
<li><a href="followed.html">menu item</a></li> |
||||
<li><a href="followed.html">menu item</a></li> |
||||
<li><a href="followed.html">menu item</a></li> |
||||
<li><a href="followed.html">menu item</a></li> |
||||
<li><a href="followed.html">menu item</a></li> |
||||
</ul> |
||||
</li> |
||||
<li> |
||||
<a href="followed.html">menu item</a> |
||||
<ul> |
||||
<li><a href="followed.html">menu item</a></li> |
||||
<li><a href="followed.html">menu item</a></li> |
||||
<li><a href="followed.html">menu item</a></li> |
||||
<li><a href="followed.html">menu item</a></li> |
||||
<li><a href="followed.html">menu item</a></li> |
||||
</ul> |
||||
</li> |
||||
<li> |
||||
<a href="followed.html">menu item</a> |
||||
<ul> |
||||
<li><a href="followed.html">menu item</a></li> |
||||
<li><a href="followed.html">menu item</a></li> |
||||
<li><a href="followed.html">menu item</a></li> |
||||
<li><a href="followed.html">menu item</a></li> |
||||
<li><a href="followed.html">menu item</a></li> |
||||
</ul> |
||||
</li> |
||||
<li> |
||||
<a href="followed.html">menu item</a> |
||||
<ul> |
||||
<li><a href="followed.html">menu item</a></li> |
||||
<li><a href="followed.html">menu item</a></li> |
||||
<li><a href="followed.html">menu item</a></li> |
||||
<li><a href="followed.html">menu item</a></li> |
||||
<li><a href="followed.html">menu item</a></li> |
||||
</ul> |
||||
</li> |
||||
</ul> |
||||
</li> |
||||
<li> |
||||
<a href="followed.html">menu item 4</a> |
||||
</li> |
||||
</ul> |
||||
<p style="clear:both;">Morbi pulvinar ornare mauris. Vivamus ut ipsum. Fusce vitae pede. Etiam sodales, libero vitae ultricies vestibulum, elit eros aliquam pede, auctor lobortis enim ligula non nibh. Quisque molestie, nibh ac malesuada ultricies, metus urna adipiscing dui, tincidunt fermentum lectus velit ac ipsum. Curabitur ultrices ipsum et tortor. Nullam non felis ornare sem laoreet viverra.</p> |
||||
<p>Nunc turpis ligula, auctor ut, iaculis porta, consequat vel, turpis. Suspendisse sed diam. In scelerisque condimentum tellus. Vivamus et velit a ante consectetuer tempor. Nunc vitae mauris. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Suspendisse lacinia, lacus a posuere molestie, tellus diam ullamcorper est, in mattis elit nisi nec odio. Aliquam a sem sit amet dolor viverra ornare. Curabitur elit velit, tempus vel, tempus at, ultricies non, arcu. Duis viverra tempus tellus. Duis dignissim convallis tortor. Phasellus nisl.</p> |
||||
<button class="open">Open first submenu</button> |
||||
<button class="close">Close first submenu</button> |
||||
<button class="destroy">Destroy Superfish</button> |
||||
<button class="init">Restore Superfish</button> |
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,17 @@
|
||||
<!DOCTYPE html> |
||||
<html lang="en"> |
||||
<head> |
||||
<meta charset="utf-8"> |
||||
<title>Link followed (Testing Superfish)</title> |
||||
<style> |
||||
body{ |
||||
font-size: 200%; |
||||
} |
||||
|
||||
</style> |
||||
</head> |
||||
<body> |
||||
<h1>You followed a link</h1> |
||||
<p>«– <a href="./basic.html">Go back to the test page</a></p> |
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,155 @@
|
||||
<!DOCTYPE html> |
||||
<html lang="en"> |
||||
<head> |
||||
<meta charset="utf-8"> |
||||
<title>jQuery Superfish megamenu example with full touch support for Android, iOS and Windows 8.</title> |
||||
<link rel="stylesheet" href="../dist/css/megafish.css" media="screen"> |
||||
<style> |
||||
html, body, .wrap { |
||||
width: 50em; |
||||
height: 100%; |
||||
padding: 0; |
||||
margin: 0; |
||||
} |
||||
.wrap { |
||||
padding: 1em; |
||||
height: auto; |
||||
min-height: 90%; |
||||
} |
||||
h1 { |
||||
font-size: 1.125em; |
||||
} |
||||
.sf-mega ul { |
||||
list-style-type: auto; |
||||
margin: 0; |
||||
padding-left: 1.2em; |
||||
} |
||||
.sf-mega li { |
||||
margin-left: 0; |
||||
} |
||||
.sf-mega h2 { |
||||
font-size: 1em; |
||||
margin: .5em 0; |
||||
color: #13a; |
||||
} |
||||
a:focus, a:hover, a:active { |
||||
text-decoration: none; |
||||
} |
||||
</style> |
||||
<script src="../dist/js/jquery.js"></script> |
||||
<script src="../dist/js/hoverIntent.js"></script> |
||||
<script src="../dist/js/superfish.js"></script> |
||||
<script> |
||||
|
||||
(function($){ //create closure so we can safely use $ as alias for jQuery |
||||
|
||||
$(document).ready(function(){ |
||||
|
||||
var exampleOptions = { |
||||
speed: 'fast' |
||||
} |
||||
// initialise plugin |
||||
var example = $('#example').superfish(exampleOptions); |
||||
|
||||
// buttons to demonstrate Superfish's public methods |
||||
$('.destroy').on('click', function(){ |
||||
example.superfish('destroy'); |
||||
}); |
||||
|
||||
$('.init').on('click', function(){ |
||||
example.superfish(exampleOptions); |
||||
}); |
||||
|
||||
$('.open').on('click', function(){ |
||||
example.children('li:first').superfish('show'); |
||||
}); |
||||
|
||||
$('.close').on('click', function(){ |
||||
example.children('li:first').superfish('hide'); |
||||
}); |
||||
}); |
||||
|
||||
})(jQuery); |
||||
|
||||
|
||||
</script> |
||||
</head> |
||||
<body> |
||||
<div class="wrap"> |
||||
<h1>Superfish Megamenu Example</h1> |
||||
<button class="open">Open first submenu</button> |
||||
<button class="close">Close first submenu</button> |
||||
<button class="destroy">Destroy Superfish</button> |
||||
<button class="init">Restore Superfish</button> |
||||
<br> |
||||
<br> |
||||
<ul class="sf-menu" id="example"> |
||||
<li class="current"> |
||||
<a href="followed.html">menu item 1</a> |
||||
<div class="sf-mega"> |
||||
<h2>Arbitrary stuff here. Here's a random unstyled table for example:</h2> |
||||
<div class="neat tabular"><table cellspacing="0"><thead><tr><th scope="col">Year level</th><th scope="col">Tuition fee per term</th><th scope="col">Composite fee per term</th><th scope="col">Total per term</th><th scope="col">Total annual charges</th></tr></thead><tbody><tr><td>ELC – 2 days</td><td>$1,700</td><td>$57</td><td>$1,757</td><td>$7,028</td></tr><tr><td>ELC – 3 days</td><td>$2,390</td><td>$79</td><td>$2,469</td><td>$9,876</td></tr><tr><td>ELC - 4 days</td><td>$3,095</td><td>$104</td><td>$3,199</td><td>$12,796</td></tr><tr><td>ELC/Pre-Prep</td><td>$3,865</td><td>$122</td><td>$3,987</td><td>$15,948</td></tr><tr><td>Prep</td><td>$3,300</td><td>$128</td><td>$3,428</td><td>$13,712</td></tr><tr><td>Year 1</td><td>$3,585</td><td>$128</td><td>$3,713</td><td>$14,852</td></tr><tr><td>Year 2</td><td>$3,950</td><td>$128</td><td>$4,078</td><td>$16,312</td></tr><tr><td>Year 3</td><td>$3,950</td><td>$275</td><td>$4,225</td><td>$16,900</td></tr><tr><td>Year 4</td><td>$4,420</td><td>$275</td><td>$4,695</td><td>$18,780</td></tr><tr><td>Year 5</td><td>$4,495</td><td>$309</td><td>$4,804</td><td>$19,216</td></tr><tr><td>Year 6</td><td>$4,495</td><td>$449</td><td>$4,944</td><td>$19,776</td></tr><tr><td>Year 7</td><td>$5,147</td><td>$393</td><td>$5,540</td><td>$22,160</td></tr><tr><td>Year 8</td><td>$5,147</td><td>$508</td><td>$5,655</td><td>$22,620</td></tr><tr><td>Year 9</td><td>$5,650</td><td>$552</td><td>$6,202</td><td>$24,808</td></tr></tbody></table></div> |
||||
</div> |
||||
</li> |
||||
<li> |
||||
<a href="followed.html">menu item 2</a> |
||||
</li> |
||||
<li> |
||||
<a href="followed.html">menu item 3</a> |
||||
<div class="sf-mega"> |
||||
<div class="sf-mega-section"> |
||||
<h2>list heading:</h2> |
||||
<ul> |
||||
<li class="current"><a href="followed.html">menu item</a></li> |
||||
<li><a href="followed.html">menu item</a></li> |
||||
<li><a href="followed.html">menu item</a></li> |
||||
<li><a href="followed.html">menu item</a></li> |
||||
<li><a href="followed.html">menu item</a></li> |
||||
</ul> |
||||
</div> |
||||
|
||||
<div class="sf-mega-section"> |
||||
<h2>list heading:</h2> |
||||
<ul> |
||||
<li class="current"><a href="followed.html">menu item</a></li> |
||||
<li><a href="followed.html">menu item</a></li> |
||||
<li><a href="followed.html">menu item that is longer</a></li> |
||||
<li><a href="followed.html">menu item</a></li> |
||||
<li><a href="followed.html">menu item</a></li> |
||||
</ul> |
||||
</div> |
||||
|
||||
<div class="sf-mega-section"> |
||||
<h2>list heading:</h2> |
||||
<ul> |
||||
<li class="current"><a href="followed.html">menu item</a></li> |
||||
<li><a href="followed.html">menu item</a></li> |
||||
<li><a href="followed.html">menu item</a></li> |
||||
<li><a href="followed.html">menu item</a></li> |
||||
<li><a href="followed.html">menu item</a></li> |
||||
</ul> |
||||
</div> |
||||
|
||||
<div class="sf-mega-section"> |
||||
<h2>list heading:</h2> |
||||
<ul> |
||||
<li class="current"><a href="followed.html">menu item</a></li> |
||||
<li><a href="followed.html">menu item</a></li> |
||||
<li><a href="followed.html">menu item</a></li> |
||||
<li><a href="followed.html">menu item</a></li> |
||||
<li><a href="followed.html">menu item</a></li> |
||||
</ul> |
||||
</div> |
||||
</div> |
||||
</li> |
||||
<li> |
||||
<a href="followed.html">menu item 4</a> |
||||
</li> |
||||
</ul> |
||||
<p style="clear:both;">Morbi pulvinar ornare mauris. Vivamus ut ipsum. Fusce vitae pede. Etiam sodales, libero vitae ultricies vestibulum, elit eros aliquam pede, auctor lobortis enim ligula non nibh. Quisque molestie, nibh ac malesuada ultricies, metus urna adipiscing dui, tincidunt fermentum lectus velit ac ipsum. Curabitur ultrices ipsum et tortor. Nullam non felis ornare sem laoreet viverra.</p> |
||||
<p>Nunc turpis ligula, auctor ut, iaculis porta, consequat vel, turpis. Suspendisse sed diam. In scelerisque condimentum tellus. Vivamus et velit a ante consectetuer tempor. Nunc vitae mauris. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Suspendisse lacinia, lacus a posuere molestie, tellus diam ullamcorper est, in mattis elit nisi nec odio. Aliquam a sem sit amet dolor viverra ornare. Curabitur elit velit, tempus vel, tempus at, ultricies non, arcu. Duis viverra tempus tellus. Duis dignissim convallis tortor. Phasellus nisl.</p> |
||||
<p>Morbi pulvinar ornare mauris. Vivamus ut ipsum. Fusce vitae pede. Etiam sodales, libero vitae ultricies vestibulum, elit eros aliquam pede, auctor lobortis enim ligula non nibh. Quisque molestie, nibh ac malesuada ultricies, metus urna adipiscing dui, tincidunt fermentum lectus velit ac ipsum. Curabitur ultrices ipsum et tortor. Nullam non felis ornare sem laoreet viverra.</p> |
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborun.</p> |
||||
</div> |
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,41 @@
|
||||
{ |
||||
"name": "superfish", |
||||
"title": "jQuery Superfish Menu Plugin", |
||||
"description": "Superfish is a jQuery plugin that adds usability enhancements to multi-level drop-down menus. Fully supports touch devices and keyboard interaction.", |
||||
"version": "1.7.10", |
||||
"keywords": [ |
||||
"menu", |
||||
"dropdown", |
||||
"responsive", |
||||
"navigation", |
||||
"jquery-plugin", |
||||
"ecosystem:jquery" |
||||
], |
||||
"author": "Joel Birch", |
||||
"license": "MIT", |
||||
"repository": { |
||||
"type": "git", |
||||
"url": "https://github.com/joeldbirch/superfish.git" |
||||
}, |
||||
"bugs": "https://github.com/joeldbirch/superfish/issues", |
||||
"homepage": "https://superfish.joelbirch.co", |
||||
"docs": "https://superfish.joelbirch.co", |
||||
"engines": { |
||||
"node": ">= 0.10.0" |
||||
}, |
||||
"main": "./dist/js/superfish.js", |
||||
"devDependencies": { |
||||
"grunt": "^0.4.5", |
||||
"grunt-contrib-clean": "^1.0.0", |
||||
"grunt-contrib-coffee": "^1.0.0", |
||||
"grunt-contrib-concat": "^1.0.0", |
||||
"grunt-contrib-copy": "^0.8.2", |
||||
"grunt-contrib-jasmine": "^1.0.0", |
||||
"grunt-contrib-jshint": "^1.0.0", |
||||
"grunt-contrib-uglify": "^0.11.1", |
||||
"grunt-contrib-watch": "^0.6.1" |
||||
}, |
||||
"dependencies": { |
||||
"jquery": ">=1.8" |
||||
} |
||||
} |
||||
@ -0,0 +1,36 @@
|
||||
{ |
||||
"browser" : true, |
||||
"jquery" : true, |
||||
|
||||
"asi" : true, |
||||
"laxbreak" : true, |
||||
"bitwise" : true, |
||||
"boss" : false, |
||||
"curly" : true, |
||||
"eqeqeq" : true, |
||||
"eqnull" : false, |
||||
"evil" : false, |
||||
"expr" : false, |
||||
"forin" : false, |
||||
"immed" : true, |
||||
"latedef" : true, |
||||
"loopfunc" : false, |
||||
"noarg" : true, |
||||
"regexp" : true, |
||||
"regexdash" : false, |
||||
"scripturl" : true, |
||||
"shadow" : false, |
||||
"supernew" : false, |
||||
"undef" : true, |
||||
|
||||
"newcap" : true, |
||||
"noempty" : true, |
||||
"nonew" : true, |
||||
"nomen" : false, |
||||
"onevar" : false, |
||||
"plusplus" : false, |
||||
"sub" : false, |
||||
"trailing" : true, |
||||
"white" : false, |
||||
"indent" : 2 |
||||
} |
||||
@ -0,0 +1,100 @@
|
||||
/*** ESSENTIAL STYLES ***/ |
||||
.sf-menu { |
||||
position: relative; |
||||
margin: 0; |
||||
padding: 0; |
||||
list-style: none; |
||||
} |
||||
.sf-menu .sf-mega { |
||||
position: absolute; |
||||
display: none; |
||||
top: 100%; |
||||
left: 0; |
||||
z-index: 99; |
||||
} |
||||
.sf-menu > li { |
||||
float: left; |
||||
} |
||||
.sf-menu li:hover > .sf-mega, |
||||
.sf-menu li.sfHover > .sf-mega { |
||||
display: block; |
||||
} |
||||
|
||||
.sf-menu > li > a { |
||||
display: block; |
||||
position: relative; |
||||
} |
||||
|
||||
|
||||
/*** DEMO SKIN ***/ |
||||
.sf-menu { |
||||
float: left; |
||||
margin-bottom: 1em; |
||||
width: 100%; |
||||
} |
||||
.sf-menu .sf-mega { |
||||
box-shadow: 2px 3px 6px rgba(0,0,0,.2); |
||||
width: 100%; /* allow long menu items to determine submenu width */ |
||||
} |
||||
.sf-menu > li > a { |
||||
border-left: 1px solid #fff; |
||||
border-top: 1px solid #dFeEFF; /* fallback colour must use full shorthand */ |
||||
border-top: 1px solid rgba(255,255,255,.5); |
||||
padding: .75em 1em; |
||||
text-decoration: none; |
||||
zoom: 1; /* IE7 */ |
||||
color: #13a; |
||||
} |
||||
.sf-menu > li { |
||||
background: #BDD2FF; |
||||
-webkit-transition: background .2s; |
||||
transition: background .2s; |
||||
} |
||||
.sf-menu > li:hover, |
||||
.sf-menu > li.sfHover { |
||||
background: #CFDEFF; |
||||
/* only transition out, not in */ |
||||
-webkit-transition: none; |
||||
transition: none; |
||||
} |
||||
|
||||
/*** mega menu dropdown ***/ |
||||
.sf-mega { |
||||
background-color: #CFDEFF; |
||||
padding: 1em; |
||||
box-sizing: border-box; |
||||
width: 100%; |
||||
} |
||||
.sf-mega-section { |
||||
float: left; |
||||
width: 8em; /* optional */ |
||||
padding: 0 1em 1em 0; |
||||
margin-right: 1em; |
||||
border-right: 1px solid #b4c8f5; |
||||
} |
||||
|
||||
|
||||
/*** arrows (for all except IE7) **/ |
||||
.sf-arrows .sf-with-ul { |
||||
padding-right: 2.5em; |
||||
*padding-right: 1em; /* no CSS arrows for IE7 (lack pseudo-elements) */ |
||||
} |
||||
/* styling for both css and generated arrows */ |
||||
.sf-arrows .sf-with-ul:after { |
||||
content: ''; |
||||
position: absolute; |
||||
top: 50%; |
||||
right: 1em; |
||||
margin-top: -3px; |
||||
height: 0; |
||||
width: 0; |
||||
/* order of following 3 rules important for fallbacks to work */ |
||||
border: 5px solid transparent; |
||||
border-top-color: #dFeEFF; /* edit this to suit design (no rgba in IE8) */ |
||||
border-top-color: rgba(255,255,255,.5); |
||||
} |
||||
.sf-arrows > li > .sf-with-ul:focus:after, |
||||
.sf-arrows > li:hover > .sf-with-ul:after, |
||||
.sf-arrows > .sfHover > .sf-with-ul:after { |
||||
border-top-color: white; /* IE8 fallback colour */ |
||||
} |
||||
@ -0,0 +1,82 @@
|
||||
/*** adding the class sf-navbar in addition to sf-menu creates an all-horizontal nav-bar menu ***/ |
||||
.sf-navbar { |
||||
background: #BDD2FF; |
||||
position: relative; |
||||
margin-bottom: 5em; |
||||
} |
||||
/* provide background colour for submenu strip */ |
||||
/* you should just set the menu's container bg colour rather than use pseudo-elements */ |
||||
.sf-navbar:before { |
||||
content: ''; |
||||
position: absolute; |
||||
left: 0; |
||||
z-index: -1; |
||||
background-color: #BDD2FF; |
||||
height: 200%; |
||||
width: 100%; |
||||
} |
||||
.sf-navbar ul { |
||||
box-shadow: none; |
||||
} |
||||
.sf-navbar li { |
||||
background: #AABDE6; |
||||
position: static; |
||||
} |
||||
.sf-navbar > li > a, |
||||
.sf-navbar > li > ul > li > a { |
||||
border: none; |
||||
} |
||||
.sf-navbar > li > ul { |
||||
min-width: 36em; /* set this to whatever suits your design */ |
||||
} |
||||
.sf-navbar ul li { |
||||
background: #BDD2FF; |
||||
position: relative; |
||||
} |
||||
.sf-navbar ul ul { |
||||
left: 0; |
||||
top: 100%; |
||||
} |
||||
.sf-navbar ul ul li { |
||||
width: 100%; |
||||
} |
||||
.sf-navbar > li > ul > li { |
||||
float: left; |
||||
} |
||||
.sf-navbar li.current { |
||||
background: #BDD2FF; |
||||
} |
||||
.sf-navbar li:hover, |
||||
.sf-navbar li.sfHover, |
||||
.sf-navbar ul li.current { |
||||
background: #BDD2FF; |
||||
} |
||||
.sf-navbar ul li:hover, |
||||
.sf-navbar ul li.sfHover, |
||||
.sf-navbar ul ul li { |
||||
background: #D1DFFF; |
||||
} |
||||
.sf-navbar ul ul li:hover, |
||||
.sf-navbar ul ul li.sfHover, |
||||
.sf-navbar ul ul li.current { |
||||
background: #E6EEFF; |
||||
} |
||||
.sf-navbar ul li.current > a { |
||||
font-weight: bold; |
||||
} |
||||
|
||||
/*** point all arrows down ***/ |
||||
.sf-arrows.sf-navbar ul .sf-with-ul:after { |
||||
margin-top: -3px; |
||||
margin-right: 0; |
||||
border-color: transparent; |
||||
border-top-color: #dFeEFF; /* edit this to suit design (no rgba in IE8) */ |
||||
border-top-color: rgba(255,255,255,.5); |
||||
} |
||||
|
||||
.sf-arrows.sf-navbar ul > li > .sf-with-ul:focus:after, |
||||
.sf-arrows.sf-navbar ul > li:hover > .sf-with-ul:after, |
||||
.sf-arrows.sf-navbar ul > .sfHover > .sf-with-ul:after { |
||||
border-color: transparent; |
||||
border-top-color: white; |
||||
} |
||||
@ -0,0 +1,37 @@
|
||||
/* adding sf-vertical class in addition to sf-menu creates a vertical menu */ |
||||
/* eg. <ul class="sf-menu sf-vertical"> ... */ |
||||
.sf-vertical { |
||||
width: 12em; |
||||
/* If you want the width of the closed menu to expand to its |
||||
widest top-level menu item (like its "Supersubs" submenus do), |
||||
replace the width rule above with the following two rules. */ |
||||
|
||||
/* |
||||
min-width: 12em; |
||||
*width: 12em; |
||||
*/ |
||||
} |
||||
.sf-vertical ul { |
||||
left: 100%; |
||||
top: 0; |
||||
} |
||||
.sf-vertical > li { |
||||
float: none; |
||||
} |
||||
.sf-vertical li { |
||||
width: 100%; |
||||
} |
||||
|
||||
/*** alter arrow directions ***/ |
||||
.sf-vertical.sf-arrows > li > .sf-with-ul:after { |
||||
margin-top: -5px; |
||||
margin-right: -3px; |
||||
border-color: transparent; |
||||
border-left-color: #dFeEFF; /* edit this to suit design (no rgba in IE8) */ |
||||
border-left-color: rgba(255,255,255,.5); |
||||
} |
||||
.sf-vertical.sf-arrows li > .sf-with-ul:focus:after, |
||||
.sf-vertical.sf-arrows li:hover > .sf-with-ul:after, |
||||
.sf-vertical.sf-arrows .sfHover > .sf-with-ul:after { |
||||
border-left-color: white; |
||||
} |
||||
@ -0,0 +1,113 @@
|
||||
/*** ESSENTIAL STYLES ***/ |
||||
.sf-menu, .sf-menu * { |
||||
margin: 0; |
||||
padding: 0; |
||||
list-style: none; |
||||
} |
||||
.sf-menu li { |
||||
position: relative; |
||||
} |
||||
.sf-menu ul { |
||||
position: absolute; |
||||
display: none; |
||||
top: 100%; |
||||
left: 0; |
||||
z-index: 99; |
||||
} |
||||
.sf-menu > li { |
||||
float: left; |
||||
} |
||||
.sf-menu li:hover > ul, |
||||
.sf-menu li.sfHover > ul { |
||||
display: block; |
||||
} |
||||
|
||||
.sf-menu a { |
||||
display: block; |
||||
position: relative; |
||||
} |
||||
.sf-menu ul ul { |
||||
top: 0; |
||||
left: 100%; |
||||
} |
||||
|
||||
|
||||
/*** DEMO SKIN ***/ |
||||
.sf-menu { |
||||
float: left; |
||||
margin-bottom: 1em; |
||||
} |
||||
.sf-menu ul { |
||||
box-shadow: 2px 2px 6px rgba(0,0,0,.2); |
||||
min-width: 12em; /* allow long menu items to determine submenu width */ |
||||
*width: 12em; /* no auto sub width for IE7, see white-space comment below */ |
||||
} |
||||
.sf-menu a { |
||||
border-left: 1px solid #fff; |
||||
border-top: 1px solid #dFeEFF; /* fallback colour must use full shorthand */ |
||||
border-top: 1px solid rgba(255,255,255,.5); |
||||
padding: .75em 1em; |
||||
text-decoration: none; |
||||
zoom: 1; /* IE7 */ |
||||
} |
||||
.sf-menu a { |
||||
color: #13a; |
||||
} |
||||
.sf-menu li { |
||||
background: #BDD2FF; |
||||
white-space: nowrap; /* no need for Supersubs plugin */ |
||||
*white-space: normal; /* ...unless you support IE7 (let it wrap) */ |
||||
-webkit-transition: background .2s; |
||||
transition: background .2s; |
||||
} |
||||
.sf-menu ul li { |
||||
background: #AABDE6; |
||||
} |
||||
.sf-menu ul ul li { |
||||
background: #9AAEDB; |
||||
} |
||||
.sf-menu li:hover, |
||||
.sf-menu li.sfHover { |
||||
background: #CFDEFF; |
||||
/* only transition out, not in */ |
||||
-webkit-transition: none; |
||||
transition: none; |
||||
} |
||||
|
||||
/*** arrows (for all except IE7) **/ |
||||
.sf-arrows .sf-with-ul { |
||||
padding-right: 2.5em; |
||||
*padding-right: 1em; /* no CSS arrows for IE7 (lack pseudo-elements) */ |
||||
} |
||||
/* styling for both css and generated arrows */ |
||||
.sf-arrows .sf-with-ul:after { |
||||
content: ''; |
||||
position: absolute; |
||||
top: 50%; |
||||
right: 1em; |
||||
margin-top: -3px; |
||||
height: 0; |
||||
width: 0; |
||||
/* order of following 3 rules important for fallbacks to work */ |
||||
border: 5px solid transparent; |
||||
border-top-color: #dFeEFF; /* edit this to suit design (no rgba in IE8) */ |
||||
border-top-color: rgba(255,255,255,.5); |
||||
} |
||||
.sf-arrows > li > .sf-with-ul:focus:after, |
||||
.sf-arrows > li:hover > .sf-with-ul:after, |
||||
.sf-arrows > .sfHover > .sf-with-ul:after { |
||||
border-top-color: white; /* IE8 fallback colour */ |
||||
} |
||||
/* styling for right-facing arrows */ |
||||
.sf-arrows ul .sf-with-ul:after { |
||||
margin-top: -5px; |
||||
margin-right: -3px; |
||||
border-color: transparent; |
||||
border-left-color: #dFeEFF; /* edit this to suit design (no rgba in IE8) */ |
||||
border-left-color: rgba(255,255,255,.5); |
||||
} |
||||
.sf-arrows ul li > .sf-with-ul:focus:after, |
||||
.sf-arrows ul li:hover > .sf-with-ul:after, |
||||
.sf-arrows ul .sfHover > .sf-with-ul:after { |
||||
border-left-color: white; |
||||
} |
||||
@ -0,0 +1,114 @@
|
||||
/** |
||||
* hoverIntent is similar to jQuery's built-in "hover" method except that |
||||
* instead of firing the handlerIn function immediately, hoverIntent checks |
||||
* to see if the user's mouse has slowed down (beneath the sensitivity |
||||
* threshold) before firing the event. The handlerOut function is only |
||||
* called after a matching handlerIn. |
||||
* |
||||
* hoverIntent r7 // 2013.03.11 // jQuery 1.9.1+
|
||||
* http://cherne.net/brian/resources/jquery.hoverIntent.html
|
||||
* |
||||
* You may use hoverIntent under the terms of the MIT license. Basically that |
||||
* means you are free to use hoverIntent as long as this header is left intact. |
||||
* Copyright 2007, 2013 Brian Cherne |
||||
* |
||||
* // basic usage ... just like .hover()
|
||||
* .hoverIntent( handlerIn, handlerOut ) |
||||
* .hoverIntent( handlerInOut ) |
||||
* |
||||
* // basic usage ... with event delegation!
|
||||
* .hoverIntent( handlerIn, handlerOut, selector ) |
||||
* .hoverIntent( handlerInOut, selector ) |
||||
* |
||||
* // using a basic configuration object
|
||||
* .hoverIntent( config ) |
||||
* |
||||
* @param handlerIn function OR configuration object |
||||
* @param handlerOut function OR selector for delegation OR undefined |
||||
* @param selector selector OR undefined |
||||
* @author Brian Cherne <brian(at)cherne(dot)net> |
||||
**/ |
||||
(function($) { |
||||
$.fn.hoverIntent = function(handlerIn,handlerOut,selector) { |
||||
|
||||
// default configuration values
|
||||
var cfg = { |
||||
interval: 100, |
||||
sensitivity: 7, |
||||
timeout: 0 |
||||
}; |
||||
|
||||
if ( typeof handlerIn === "object" ) { |
||||
cfg = $.extend(cfg, handlerIn ); |
||||
} else if ($.isFunction(handlerOut)) { |
||||
cfg = $.extend(cfg, { over: handlerIn, out: handlerOut, selector: selector } ); |
||||
} else { |
||||
cfg = $.extend(cfg, { over: handlerIn, out: handlerIn, selector: handlerOut } ); |
||||
} |
||||
|
||||
// instantiate variables
|
||||
// cX, cY = current X and Y position of mouse, updated by mousemove event
|
||||
// pX, pY = previous X and Y position of mouse, set by mouseover and polling interval
|
||||
var cX, cY, pX, pY; |
||||
|
||||
// A private function for getting mouse position
|
||||
var track = function(ev) { |
||||
cX = ev.pageX; |
||||
cY = ev.pageY; |
||||
}; |
||||
|
||||
// A private function for comparing current and previous mouse position
|
||||
var compare = function(ev,ob) { |
||||
ob.hoverIntent_t = clearTimeout(ob.hoverIntent_t); |
||||
// compare mouse positions to see if they've crossed the threshold
|
||||
if ( ( Math.abs(pX-cX) + Math.abs(pY-cY) ) < cfg.sensitivity ) { |
||||
$(ob).off("mousemove.hoverIntent",track); |
||||
// set hoverIntent state to true (so mouseOut can be called)
|
||||
ob.hoverIntent_s = 1; |
||||
return cfg.over.apply(ob,[ev]); |
||||
} else { |
||||
// set previous coordinates for next time
|
||||
pX = cX; pY = cY; |
||||
// use self-calling timeout, guarantees intervals are spaced out properly (avoids JavaScript timer bugs)
|
||||
ob.hoverIntent_t = setTimeout( function(){compare(ev, ob);} , cfg.interval ); |
||||
} |
||||
}; |
||||
|
||||
// A private function for delaying the mouseOut function
|
||||
var delay = function(ev,ob) { |
||||
ob.hoverIntent_t = clearTimeout(ob.hoverIntent_t); |
||||
ob.hoverIntent_s = 0; |
||||
return cfg.out.apply(ob,[ev]); |
||||
}; |
||||
|
||||
// A private function for handling mouse 'hovering'
|
||||
var handleHover = function(e) { |
||||
// copy objects to be passed into t (required for event object to be passed in IE)
|
||||
var ev = jQuery.extend({},e); |
||||
var ob = this; |
||||
|
||||
// cancel hoverIntent timer if it exists
|
||||
if (ob.hoverIntent_t) { ob.hoverIntent_t = clearTimeout(ob.hoverIntent_t); } |
||||
|
||||
// if e.type == "mouseenter"
|
||||
if (e.type == "mouseenter") { |
||||
// set "previous" X and Y position based on initial entry point
|
||||
pX = ev.pageX; pY = ev.pageY; |
||||
// update "current" X and Y position based on mousemove
|
||||
$(ob).on("mousemove.hoverIntent",track); |
||||
// start polling interval (self-calling timeout) to compare mouse coordinates over time
|
||||
if (ob.hoverIntent_s != 1) { ob.hoverIntent_t = setTimeout( function(){compare(ev,ob);} , cfg.interval );} |
||||
|
||||
// else e.type == "mouseleave"
|
||||
} else { |
||||
// unbind expensive mousemove event
|
||||
$(ob).off("mousemove.hoverIntent",track); |
||||
// if hoverIntent state is true, then call the mouseOut function after the specified delay
|
||||
if (ob.hoverIntent_s == 1) { ob.hoverIntent_t = setTimeout( function(){delay(ev,ob);} , cfg.timeout );} |
||||
} |
||||
}; |
||||
|
||||
// listen for mouseenter and mouseleave
|
||||
return this.on({'mouseenter.hoverIntent':handleHover,'mouseleave.hoverIntent':handleHover}, cfg.selector); |
||||
}; |
||||
})(jQuery); |
||||
File diff suppressed because one or more lines are too long
@ -0,0 +1,278 @@
|
||||
/* |
||||
* jQuery Superfish Menu Plugin |
||||
* Copyright (c) 2013 Joel Birch |
||||
* |
||||
* Dual licensed under the MIT and GPL licenses: |
||||
* http://www.opensource.org/licenses/mit-license.php
|
||||
* http://www.gnu.org/licenses/gpl.html
|
||||
*/ |
||||
|
||||
(function ($, w) { |
||||
"use strict"; |
||||
|
||||
var methods = (function () { |
||||
// private properties and methods go here
|
||||
var c = { |
||||
bcClass: 'sf-breadcrumb', |
||||
menuClass: 'sf-js-enabled', |
||||
anchorClass: 'sf-with-ul', |
||||
menuArrowClass: 'sf-arrows' |
||||
}, |
||||
ios = (function () { |
||||
var ios = /^(?![\w\W]*Windows Phone)[\w\W]*(iPhone|iPad|iPod)/i.test(navigator.userAgent); |
||||
if (ios) { |
||||
// tap anywhere on iOS to unfocus a submenu
|
||||
$('html').css('cursor', 'pointer').on('click', $.noop); |
||||
} |
||||
return ios; |
||||
})(), |
||||
wp7 = (function () { |
||||
var style = document.documentElement.style; |
||||
return ('behavior' in style && 'fill' in style && /iemobile/i.test(navigator.userAgent)); |
||||
})(), |
||||
unprefixedPointerEvents = (function () { |
||||
return (!!w.PointerEvent); |
||||
})(), |
||||
toggleMenuClasses = function ($menu, o, add) { |
||||
var classes = c.menuClass, |
||||
method; |
||||
if (o.cssArrows) { |
||||
classes += ' ' + c.menuArrowClass; |
||||
} |
||||
method = (add) ? 'addClass' : 'removeClass'; |
||||
$menu[method](classes); |
||||
}, |
||||
setPathToCurrent = function ($menu, o) { |
||||
return $menu.find('li.' + o.pathClass).slice(0, o.pathLevels) |
||||
.addClass(o.hoverClass + ' ' + c.bcClass) |
||||
.filter(function () { |
||||
return ($(this).children(o.popUpSelector).hide().show().length); |
||||
}).removeClass(o.pathClass); |
||||
}, |
||||
toggleAnchorClass = function ($li, add) { |
||||
var method = (add) ? 'addClass' : 'removeClass'; |
||||
$li.children('a')[method](c.anchorClass); |
||||
}, |
||||
toggleTouchAction = function ($menu) { |
||||
var msTouchAction = $menu.css('ms-touch-action'); |
||||
var touchAction = $menu.css('touch-action'); |
||||
touchAction = touchAction || msTouchAction; |
||||
touchAction = (touchAction === 'pan-y') ? 'auto' : 'pan-y'; |
||||
$menu.css({ |
||||
'ms-touch-action': touchAction, |
||||
'touch-action': touchAction |
||||
}); |
||||
}, |
||||
getMenu = function ($el) { |
||||
return $el.closest('.' + c.menuClass); |
||||
}, |
||||
getOptions = function ($el) { |
||||
return getMenu($el).data('sfOptions'); |
||||
}, |
||||
over = function () { |
||||
var $this = $(this), |
||||
o = getOptions($this); |
||||
clearTimeout(o.sfTimer); |
||||
$this.siblings().superfish('hide').end().superfish('show'); |
||||
}, |
||||
close = function (o) { |
||||
o.retainPath = ($.inArray(this[0], o.$path) > -1); |
||||
this.superfish('hide'); |
||||
|
||||
if (!this.parents('.' + o.hoverClass).length) { |
||||
o.onIdle.call(getMenu(this)); |
||||
if (o.$path.length) { |
||||
$.proxy(over, o.$path)(); |
||||
} |
||||
} |
||||
}, |
||||
out = function () { |
||||
var $this = $(this), |
||||
o = getOptions($this); |
||||
if (ios) { |
||||
$.proxy(close, $this, o)(); |
||||
} |
||||
else { |
||||
clearTimeout(o.sfTimer); |
||||
o.sfTimer = setTimeout($.proxy(close, $this, o), o.delay); |
||||
} |
||||
}, |
||||
touchHandler = function (e) { |
||||
var $this = $(this), |
||||
o = getOptions($this), |
||||
$ul = $this.siblings(e.data.popUpSelector); |
||||
|
||||
if (o.onHandleTouch.call($ul) === false) { |
||||
return this; |
||||
} |
||||
|
||||
if ($ul.length > 0 && $ul.is(':hidden')) { |
||||
$this.one('click.superfish', false); |
||||
if (e.type === 'MSPointerDown' || e.type === 'pointerdown') { |
||||
$this.trigger('focus'); |
||||
} else { |
||||
$.proxy(over, $this.parent('li'))(); |
||||
} |
||||
} |
||||
}, |
||||
applyHandlers = function ($menu, o) { |
||||
var targets = 'li:has(' + o.popUpSelector + ')'; |
||||
if ($.fn.hoverIntent && !o.disableHI) { |
||||
$menu.hoverIntent(over, out, targets); |
||||
} |
||||
else { |
||||
$menu |
||||
.on('mouseenter.superfish', targets, over) |
||||
.on('mouseleave.superfish', targets, out); |
||||
} |
||||
var touchevent = 'MSPointerDown.superfish'; |
||||
if (unprefixedPointerEvents) { |
||||
touchevent = 'pointerdown.superfish'; |
||||
} |
||||
if (!ios) { |
||||
touchevent += ' touchend.superfish'; |
||||
} |
||||
if (wp7) { |
||||
touchevent += ' mousedown.superfish'; |
||||
} |
||||
$menu |
||||
.on('focusin.superfish', 'li', over) |
||||
.on('focusout.superfish', 'li', out) |
||||
.on(touchevent, 'a', o, touchHandler); |
||||
}; |
||||
|
||||
return { |
||||
// public methods
|
||||
hide: function (instant) { |
||||
if (this.length) { |
||||
var $this = this, |
||||
o = getOptions($this); |
||||
if (!o) { |
||||
return this; |
||||
} |
||||
var not = (o.retainPath === true) ? o.$path : '', |
||||
$ul = $this.find('li.' + o.hoverClass).add(this).not(not).removeClass(o.hoverClass).children(o.popUpSelector), |
||||
speed = o.speedOut; |
||||
|
||||
if (instant) { |
||||
$ul.show(); |
||||
speed = 0; |
||||
} |
||||
o.retainPath = false; |
||||
|
||||
if (o.onBeforeHide.call($ul) === false) { |
||||
return this; |
||||
} |
||||
|
||||
$ul.stop(true, true).animate(o.animationOut, speed, function () { |
||||
var $this = $(this); |
||||
o.onHide.call($this); |
||||
}); |
||||
} |
||||
return this; |
||||
}, |
||||
show: function () { |
||||
var o = getOptions(this); |
||||
if (!o) { |
||||
return this; |
||||
} |
||||
var $this = this.addClass(o.hoverClass), |
||||
$ul = $this.children(o.popUpSelector); |
||||
|
||||
if (o.onBeforeShow.call($ul) === false) { |
||||
return this; |
||||
} |
||||
|
||||
$ul.stop(true, true).animate(o.animation, o.speed, function () { |
||||
o.onShow.call($ul); |
||||
}); |
||||
return this; |
||||
}, |
||||
destroy: function () { |
||||
return this.each(function () { |
||||
var $this = $(this), |
||||
o = $this.data('sfOptions'), |
||||
$hasPopUp; |
||||
if (!o) { |
||||
return false; |
||||
} |
||||
$hasPopUp = $this.find(o.popUpSelector).parent('li'); |
||||
clearTimeout(o.sfTimer); |
||||
toggleMenuClasses($this, o); |
||||
toggleAnchorClass($hasPopUp); |
||||
toggleTouchAction($this); |
||||
// remove event handlers
|
||||
$this.off('.superfish').off('.hoverIntent'); |
||||
// clear animation's inline display style
|
||||
$hasPopUp.children(o.popUpSelector).attr('style', function (i, style) { |
||||
if (typeof style !== 'undefined') { |
||||
return style.replace(/display[^;]+;?/g, ''); |
||||
} |
||||
}); |
||||
// reset 'current' path classes
|
||||
o.$path.removeClass(o.hoverClass + ' ' + c.bcClass).addClass(o.pathClass); |
||||
$this.find('.' + o.hoverClass).removeClass(o.hoverClass); |
||||
o.onDestroy.call($this); |
||||
$this.removeData('sfOptions'); |
||||
}); |
||||
}, |
||||
init: function (op) { |
||||
return this.each(function () { |
||||
var $this = $(this); |
||||
if ($this.data('sfOptions')) { |
||||
return false; |
||||
} |
||||
var o = $.extend({}, $.fn.superfish.defaults, op), |
||||
$hasPopUp = $this.find(o.popUpSelector).parent('li'); |
||||
o.$path = setPathToCurrent($this, o); |
||||
|
||||
$this.data('sfOptions', o); |
||||
|
||||
toggleMenuClasses($this, o, true); |
||||
toggleAnchorClass($hasPopUp, true); |
||||
toggleTouchAction($this); |
||||
applyHandlers($this, o); |
||||
|
||||
$hasPopUp.not('.' + c.bcClass).superfish('hide', true); |
||||
|
||||
o.onInit.call(this); |
||||
}); |
||||
} |
||||
}; |
||||
})(); |
||||
|
||||
$.fn.superfish = function (method, args) { |
||||
if (methods[method]) { |
||||
return methods[method].apply(this, Array.prototype.slice.call(arguments, 1)); |
||||
} |
||||
else if (typeof method === 'object' || ! method) { |
||||
return methods.init.apply(this, arguments); |
||||
} |
||||
else { |
||||
return $.error('Method ' + method + ' does not exist on jQuery.fn.superfish'); |
||||
} |
||||
}; |
||||
|
||||
$.fn.superfish.defaults = { |
||||
popUpSelector: 'ul,.sf-mega', // within menu context
|
||||
hoverClass: 'sfHover', |
||||
pathClass: 'overrideThisToUse', |
||||
pathLevels: 1, |
||||
delay: 800, |
||||
animation: {opacity: 'show'}, |
||||
animationOut: {opacity: 'hide'}, |
||||
speed: 'normal', |
||||
speedOut: 'fast', |
||||
cssArrows: true, |
||||
disableHI: false, |
||||
onInit: $.noop, |
||||
onBeforeShow: $.noop, |
||||
onShow: $.noop, |
||||
onBeforeHide: $.noop, |
||||
onHide: $.noop, |
||||
onIdle: $.noop, |
||||
onDestroy: $.noop, |
||||
onHandleTouch: $.noop |
||||
}; |
||||
|
||||
})(jQuery, window); |
||||
@ -0,0 +1,91 @@
|
||||
|
||||
/* |
||||
* Supersubs v0.3b - jQuery plugin |
||||
* Copyright (c) 2013 Joel Birch |
||||
* |
||||
* Dual licensed under the MIT and GPL licenses: |
||||
* http://www.opensource.org/licenses/mit-license.php
|
||||
* http://www.gnu.org/licenses/gpl.html
|
||||
* |
||||
* |
||||
* This plugin automatically adjusts submenu widths of suckerfish-style menus to that of |
||||
* their longest list item children. If you use this, please expect bugs and report them |
||||
* to the jQuery Google Group with the word 'Superfish' in the subject line. |
||||
* |
||||
*/ |
||||
|
||||
;(function($){ // $ will refer to jQuery within this closure
|
||||
|
||||
$.fn.supersubs = function(options){ |
||||
var opts = $.extend({}, $.fn.supersubs.defaults, options); |
||||
// return original object to support chaining
|
||||
return this.each(function() { |
||||
// cache selections
|
||||
var $$ = $(this); |
||||
// support metadata
|
||||
var o = $.meta ? $.extend({}, opts, $$.data()) : opts; |
||||
// cache all ul elements and show them in preparation for measurements
|
||||
var $ULs = $$.find('ul').show(); |
||||
// get the font size of menu.
|
||||
// .css('fontSize') returns various results cross-browser, so measure an em dash instead
|
||||
var fontsize = $('<li id="menu-fontsize">—</li>').css({ |
||||
'padding' : 0, |
||||
'position' : 'absolute', |
||||
'top' : '-999em', |
||||
'width' : 'auto' |
||||
}).appendTo($$)[0].clientWidth; //clientWidth is faster than .width()
|
||||
// remove em dash
|
||||
$('#menu-fontsize').remove(); |
||||
// loop through each ul in menu
|
||||
$ULs.each(function(i) {
|
||||
// cache this ul
|
||||
var $ul = $(this); |
||||
// get all (li) children of this ul
|
||||
var $LIs = $ul.children(); |
||||
// get all anchor grand-children
|
||||
var $As = $LIs.children('a'); |
||||
// force content to one line and save current float property
|
||||
var liFloat = $LIs.css('white-space','nowrap').css('float'); |
||||
// remove width restrictions and floats so elements remain vertically stacked
|
||||
$ul.add($LIs).add($As).css({ |
||||
'float' : 'none', |
||||
'width' : 'auto' |
||||
}); |
||||
// this ul will now be shrink-wrapped to longest li due to position:absolute
|
||||
// so save its width as ems.
|
||||
var emWidth = $ul[0].clientWidth / fontsize; |
||||
// add more width to ensure lines don't turn over at certain sizes in various browsers
|
||||
emWidth += o.extraWidth; |
||||
// restrict to at least minWidth and at most maxWidth
|
||||
if (emWidth > o.maxWidth) { emWidth = o.maxWidth; } |
||||
else if (emWidth < o.minWidth) { emWidth = o.minWidth; } |
||||
emWidth += 'em'; |
||||
// set ul to width in ems
|
||||
$ul.css('width',emWidth); |
||||
// restore li floats to avoid IE bugs
|
||||
// set li width to full width of this ul
|
||||
// revert white-space to normal
|
||||
$LIs.css({ |
||||
'float' : liFloat, |
||||
'width' : '100%', |
||||
'white-space' : 'normal' |
||||
}) |
||||
// update offset position of descendant ul to reflect new width of parent.
|
||||
// set it to 100% in case it isn't already set to this in the CSS
|
||||
.each(function(){ |
||||
var $childUl = $(this).children('ul'); |
||||
var offsetDirection = $childUl.css('left') !== undefined ? 'left' : 'right'; |
||||
$childUl.css(offsetDirection,'100%'); |
||||
}); |
||||
}).hide(); |
||||
|
||||
}); |
||||
}; |
||||
// expose defaults
|
||||
$.fn.supersubs.defaults = { |
||||
minWidth : 9, // requires em unit.
|
||||
maxWidth : 25, // requires em unit.
|
||||
extraWidth : 0 // extra width can ensure lines don't sometimes turn over due to slight browser differences in how they round-off values
|
||||
}; |
||||
|
||||
})(jQuery); // plugin code ends
|
||||
@ -0,0 +1,131 @@
|
||||
<!DOCTYPE html> |
||||
<html> |
||||
<head> |
||||
<title>Jasmine Spec Runner</title> |
||||
|
||||
<% css.forEach(function(style){ %> |
||||
<link rel="stylesheet" href="<%= style %>"> |
||||
<% }) %> |
||||
|
||||
<style> |
||||
.jasmine_reporter { |
||||
clear: both; |
||||
} |
||||
</style> |
||||
|
||||
<% with (scripts) { %> |
||||
<% [].concat(polyfills, jasmine, boot, vendor, helpers, src, specs, reporters).forEach(function(script){ %> |
||||
<script src="<%= script %>"></script> |
||||
<% }) %> |
||||
<% }; %> |
||||
|
||||
</head> |
||||
|
||||
<body> |
||||
<div id="jasmine_content"> |
||||
|
||||
<ul class="sf-menu" id="example"> |
||||
<li class="current"> |
||||
<a href="followed.html">menu item 1</a> |
||||
<ul> |
||||
<li> |
||||
<a href="followed.html">menu item</a> |
||||
</li> |
||||
<li class="current"> |
||||
<a href="followed.html">long menu item sets sub width</a> |
||||
<ul> |
||||
<li class="current"><a href="followed.html">menu item</a></li> |
||||
<li><a href="followed.html">menu item</a></li> |
||||
<li><a href="followed.html">menu item</a></li> |
||||
<li><a href="followed.html">menu item</a></li> |
||||
<li><a href="followed.html">menu item</a></li> |
||||
</ul> |
||||
</li> |
||||
<li> |
||||
<a href="followed.html">menu item</a> |
||||
<ul> |
||||
<li><a href="followed.html">menu item</a></li> |
||||
<li><a href="followed.html">menu item</a></li> |
||||
<li><a href="followed.html">menu item</a></li> |
||||
<li><a href="followed.html">menu item</a></li> |
||||
<li><a href="followed.html">menu item</a></li> |
||||
</ul> |
||||
</li> |
||||
<li> |
||||
<a href="followed.html">menu item</a> |
||||
<ul> |
||||
<li><a href="followed.html">menu item</a></li> |
||||
<li><a href="followed.html">menu item</a></li> |
||||
<li><a href="followed.html">menu item</a></li> |
||||
<li><a href="followed.html">menu item</a></li> |
||||
<li><a href="followed.html">menu item</a></li> |
||||
</ul> |
||||
</li> |
||||
</ul> |
||||
</li> |
||||
<li> |
||||
<a href="followed.html">menu item 2</a> |
||||
</li> |
||||
<li> |
||||
<a href="followed.html">menu item 3</a> |
||||
<ul> |
||||
<li> |
||||
<a href="followed.html">menu item</a> |
||||
<ul> |
||||
<li><a href="followed.html">short</a></li> |
||||
<li><a href="followed.html">short</a></li> |
||||
<li><a href="followed.html">short</a></li> |
||||
<li><a href="followed.html">short</a></li> |
||||
<li><a href="followed.html">short</a></li> |
||||
</ul> |
||||
</li> |
||||
<li> |
||||
<a href="followed.html">menu item</a> |
||||
<ul> |
||||
<li><a href="followed.html">menu item</a></li> |
||||
<li><a href="followed.html">menu item</a></li> |
||||
<li><a href="followed.html">menu item</a></li> |
||||
<li><a href="followed.html">menu item</a></li> |
||||
<li><a href="followed.html">menu item</a></li> |
||||
</ul> |
||||
</li> |
||||
<li> |
||||
<a href="followed.html">menu item</a> |
||||
<ul> |
||||
<li><a href="followed.html">menu item</a></li> |
||||
<li><a href="followed.html">menu item</a></li> |
||||
<li><a href="followed.html">menu item</a></li> |
||||
<li><a href="followed.html">menu item</a></li> |
||||
<li><a href="followed.html">menu item</a></li> |
||||
</ul> |
||||
</li> |
||||
<li> |
||||
<a href="followed.html">menu item</a> |
||||
<ul> |
||||
<li><a href="followed.html">menu item</a></li> |
||||
<li><a href="followed.html">menu item</a></li> |
||||
<li><a href="followed.html">menu item</a></li> |
||||
<li><a href="followed.html">menu item</a></li> |
||||
<li><a href="followed.html">menu item</a></li> |
||||
</ul> |
||||
</li> |
||||
<li> |
||||
<a href="followed.html">menu item</a> |
||||
<ul> |
||||
<li><a href="followed.html">menu item</a></li> |
||||
<li><a href="followed.html">menu item</a></li> |
||||
<li><a href="followed.html">menu item</a></li> |
||||
<li><a href="followed.html">menu item</a></li> |
||||
<li><a href="followed.html">menu item</a></li> |
||||
</ul> |
||||
</li> |
||||
</ul> |
||||
</li> |
||||
<li> |
||||
<a href="followed.html">menu item 4</a> |
||||
</li> |
||||
</ul> |
||||
|
||||
</div> |
||||
</body> |
||||
</html> |
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in new issue