├── VERSION ├── .gitattributes ├── .babelrc ├── src ├── views │ ├── layouts │ │ ├── empty.html │ │ └── includes │ │ │ ├── f-menu-mobile.html │ │ │ ├── f-footer.html │ │ │ ├── f-item.html │ │ │ ├── f-item-content.html │ │ │ ├── f-menu-item.html │ │ │ └── f-header.html │ ├── index.html │ ├── docs │ │ ├── 06-devices.html │ │ ├── 01-guidelines.html │ │ ├── 03-basic-grid.html │ │ ├── 02-cd-elements.html │ │ ├── 04-sample-pages.html │ │ ├── 05-header-footer.html │ │ ├── 08-translations.html │ │ └── 07-accessibility.html │ ├── tables.html │ ├── general.html │ ├── search.html │ ├── teaser.html │ ├── widgets.html │ ├── footer.html │ ├── header.html │ ├── functions.html │ ├── typography.html │ ├── multimedia.html │ ├── form-elements.html │ ├── ordering-checkout.html │ ├── standard-elements.html │ ├── content-containers.html │ ├── content-navigation.html │ └── hierarchical-navigation.html ├── assets │ ├── sass │ │ ├── print │ │ │ └── print.scss │ │ ├── components │ │ │ ├── twitter-timeline.scss │ │ │ ├── contact-box.scss │ │ │ ├── shopping-cart.scss │ │ │ ├── anchor-links.scss │ │ │ ├── rss.scss │ │ │ ├── collapse.scss │ │ │ ├── modal.scss │ │ │ ├── news-feed.scss │ │ │ ├── alerts.scss │ │ │ ├── social-sharing.scss │ │ │ ├── breadcrumb.scss │ │ │ ├── well.scss │ │ │ ├── select-multiple.scss │ │ │ ├── emergency.scss │ │ │ ├── list-group.scss │ │ │ ├── mega-menu.scss │ │ │ ├── carousel.scss │ │ │ ├── pagination.scss │ │ │ ├── helpers.scss │ │ │ ├── slideshow.scss │ │ │ ├── select.scss │ │ │ ├── search.scss │ │ │ └── progression.scss │ │ ├── layout │ │ │ ├── others.scss │ │ │ ├── radios.scss │ │ │ ├── titles.scss │ │ │ ├── checkboxes.scss │ │ │ ├── layout.scss │ │ │ ├── brand.scss │ │ │ ├── lists.scss │ │ │ ├── type.scss │ │ │ ├── buttons.scss │ │ │ ├── images.scss │ │ │ ├── links.scss │ │ │ └── header.scss │ │ ├── admin-variables.scss │ │ ├── twitter-inject.scss │ │ └── admin-mixins.scss │ ├── img │ │ ├── swiss.png │ │ ├── logo-CH.png │ │ ├── overlay.png │ │ ├── bg-striped.png │ │ ├── ico │ │ │ ├── favicon.ico │ │ │ ├── mstile-70x70.png │ │ │ ├── favicon-16x16.png │ │ │ ├── favicon-196x196.png │ │ │ ├── favicon-32x32.png │ │ │ ├── favicon-96x96.png │ │ │ ├── mstile-144x144.png │ │ │ ├── mstile-150x150.png │ │ │ ├── mstile-310x150.png │ │ │ ├── mstile-310x310.png │ │ │ ├── apple-touch-icon.png │ │ │ ├── apple-touch-icon-57x57.png │ │ │ ├── apple-touch-icon-60x60.png │ │ │ ├── apple-touch-icon-72x72.png │ │ │ ├── apple-touch-icon-76x76.png │ │ │ ├── apple-touch-icon-114x114.png │ │ │ ├── apple-touch-icon-120x120.png │ │ │ ├── apple-touch-icon-144x144.png │ │ │ ├── apple-touch-icon-precomposed.png │ │ │ ├── apple-touch-icon-144-precomposed.png │ │ │ └── browserconfig.xml │ │ ├── chosen-sprite.png │ │ ├── twitter_sprite.png │ │ ├── chosen-sprite@2x.png │ │ ├── social-sharing-xing.png │ │ ├── social-sharing-google.png │ │ ├── social-sharing-facebook.png │ │ ├── social-sharing-linkedin.png │ │ ├── social-sharing-twitter.png │ │ └── swiss.svg │ ├── fonts │ │ ├── AdminCH_Symbols.eot │ │ ├── AdminCH_Symbols.ttf │ │ ├── AdminCH_Symbols.woff │ │ ├── AdminCH_Symbols.woff2 │ │ └── README.md │ ├── files │ │ └── swiss_web_guidelines_official_translations.xlsx │ ├── fabricator │ │ ├── styles │ │ │ ├── fabricator.scss │ │ │ ├── settings │ │ │ │ └── _variables.scss │ │ │ ├── objects │ │ │ │ ├── _label.scss │ │ │ │ ├── _color-swatch.scss │ │ │ │ ├── _code-block.scss │ │ │ │ └── _component.scss │ │ │ └── vendor │ │ │ │ └── _prism.scss │ │ └── scripts │ │ │ ├── ui.js │ │ │ └── components.js │ └── js │ │ ├── tablesorter.js │ │ ├── select.js │ │ ├── drilldown.js │ │ ├── global-nav.js │ │ ├── treecrumb.js │ │ ├── autocomplete.js │ │ ├── outline.js │ │ ├── social-sharing.js │ │ ├── subnavigation.js │ │ ├── collapse.js │ │ ├── rich-menu.js │ │ └── carousel.js ├── materials │ ├── 01-layout │ │ ├── 02-general │ │ │ ├── 04-images.html │ │ │ ├── 07-image-format.html │ │ │ ├── 02-colors.html │ │ │ ├── 05-standard-image.html │ │ │ ├── 06-captioned-image.html │ │ │ ├── 01-logo.html │ │ │ ├── 08-icons.html │ │ │ └── 03-background.html │ │ ├── 01-form-elements │ │ │ ├── 07-buttons.html │ │ │ ├── 03-selects.html │ │ │ ├── 08-button-groups.html │ │ │ ├── 04-selects-multiple.html │ │ │ ├── 01-fieldsets.html │ │ │ ├── 06-radios.html │ │ │ └── 05-checkboxes.html │ │ ├── 04-typography │ │ │ ├── 04-blockquote.html │ │ │ ├── 07-definition-lists.html │ │ │ ├── 09-top-link.html │ │ │ ├── 10-end-page-link.html │ │ │ ├── 01-titles.html │ │ │ ├── 06-unstyled-lists.html │ │ │ ├── 03-text-elements.html │ │ │ ├── 08-links.html │ │ │ ├── 05-lists.html │ │ │ └── 02-paragraphs.html │ │ └── 03-tables │ │ │ ├── 16-table-unruled.html │ │ │ ├── 15-table-ruled.html │ │ │ ├── 01-table-standard.html │ │ │ ├── 05-table-zebra.html │ │ │ ├── 13-table-sortable.html │ │ │ ├── 09-table-highlight.html │ │ │ ├── 14-table-expandable.html │ │ │ ├── 08-table-zebra-caption.html │ │ │ ├── 04-table-with-caption.html │ │ │ └── 12-table-highlight-caption.html │ ├── 03-content │ │ ├── 01-standard-elements │ │ │ └── 01-page-title.html │ │ ├── 07-search │ │ │ └── 01-search-box.html │ │ ├── 05-teaser │ │ │ ├── 07-text-teaser.html │ │ │ ├── 12-rss-feed.html │ │ │ ├── 08-dossier-teaser.html │ │ │ ├── 03-news.html │ │ │ ├── 09-person-teaser.html │ │ │ ├── 12-twitter-timeline.html │ │ │ ├── 11-news-feed.html │ │ │ ├── 10-publications-preview.html │ │ │ ├── 04-headline.html │ │ │ └── 06-slideshow.html │ │ ├── 03-widgets │ │ │ ├── 02-emergency.html │ │ │ ├── 01-alerts.html │ │ │ └── 03-contact-box.html │ │ ├── 04-functions │ │ │ ├── 02-social-sharing.html │ │ │ ├── 01-print.html │ │ │ └── 03-downloading-files.html │ │ ├── 08-ordering-checkout │ │ │ ├── 01-one-line-order-form.html │ │ │ └── 02-shopping-cart.html │ │ └── 06-multimedia │ │ │ ├── 03-lightbox.html │ │ │ └── 02-photo-gallery-single.html │ └── 02-navigation │ │ ├── 02-header │ │ ├── 01-logo.html │ │ ├── 03-service-navigation.html │ │ ├── 02-accessibility-navigation.html │ │ ├── 05-language-selector.html │ │ ├── 04-site-search.html │ │ └── 07-treecrumb.html │ │ ├── 01-hierarchical-navigation │ │ ├── 03-back-to-overview.html │ │ ├── 02-breadcrumb.html │ │ └── 04-page-navigation-list.html │ │ ├── 03-content-navigation │ │ ├── 02-anchor-links.html │ │ ├── 03-process-navigation.html │ │ ├── 01-pagination.html │ │ └── 04-tab-navigation.html │ │ └── 04-footer │ │ ├── 03-footbar.html │ │ └── 02-social-media.html ├── data │ └── locales.yml ├── materials-data │ ├── complements │ │ ├── site-search.html │ │ ├── buttons.html │ │ └── image-format.html │ └── javascripts │ │ ├── site-search.js │ │ └── forms.js ├── locales │ ├── de │ │ ├── pages.yml │ │ └── styleguide.yml │ ├── en │ │ ├── pages.yml │ │ └── styleguide.yml │ └── fr │ │ ├── pages.yml │ │ └── styleguide.yml └── index.html ├── styleguide-img ├── grid.png ├── footer.png ├── header.png ├── rotelinie.png ├── schublade.png ├── responsive.png ├── kennzeichnung.png ├── mobile_header.png ├── mobile_navi_3.png └── navigation_supermarkt.png ├── .gitignore ├── .npmignore ├── .editorconfig ├── .travis.yml ├── .jshintrc ├── LICENSE ├── HOWTO.md └── package.json /VERSION: -------------------------------------------------------------------------------- 1 | 3.2.0 2 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | * text=auto -------------------------------------------------------------------------------- /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "stage": 2 3 | } -------------------------------------------------------------------------------- /src/views/layouts/empty.html: -------------------------------------------------------------------------------- 1 | {% body %} 2 | -------------------------------------------------------------------------------- /src/assets/sass/print/print.scss: -------------------------------------------------------------------------------- 1 | @import 'print-general'; -------------------------------------------------------------------------------- /styleguide-img/grid.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swiss/styleguide/HEAD/styleguide-img/grid.png -------------------------------------------------------------------------------- /src/assets/img/swiss.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swiss/styleguide/HEAD/src/assets/img/swiss.png -------------------------------------------------------------------------------- /styleguide-img/footer.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swiss/styleguide/HEAD/styleguide-img/footer.png -------------------------------------------------------------------------------- /styleguide-img/header.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swiss/styleguide/HEAD/styleguide-img/header.png -------------------------------------------------------------------------------- /src/assets/img/logo-CH.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swiss/styleguide/HEAD/src/assets/img/logo-CH.png -------------------------------------------------------------------------------- /src/assets/img/overlay.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swiss/styleguide/HEAD/src/assets/img/overlay.png -------------------------------------------------------------------------------- /styleguide-img/rotelinie.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swiss/styleguide/HEAD/styleguide-img/rotelinie.png -------------------------------------------------------------------------------- /styleguide-img/schublade.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swiss/styleguide/HEAD/styleguide-img/schublade.png -------------------------------------------------------------------------------- /src/assets/img/bg-striped.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swiss/styleguide/HEAD/src/assets/img/bg-striped.png -------------------------------------------------------------------------------- /src/assets/img/ico/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swiss/styleguide/HEAD/src/assets/img/ico/favicon.ico -------------------------------------------------------------------------------- /styleguide-img/responsive.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swiss/styleguide/HEAD/styleguide-img/responsive.png -------------------------------------------------------------------------------- /src/assets/img/chosen-sprite.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swiss/styleguide/HEAD/src/assets/img/chosen-sprite.png -------------------------------------------------------------------------------- /src/assets/img/twitter_sprite.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swiss/styleguide/HEAD/src/assets/img/twitter_sprite.png -------------------------------------------------------------------------------- /styleguide-img/kennzeichnung.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swiss/styleguide/HEAD/styleguide-img/kennzeichnung.png -------------------------------------------------------------------------------- /styleguide-img/mobile_header.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swiss/styleguide/HEAD/styleguide-img/mobile_header.png -------------------------------------------------------------------------------- /styleguide-img/mobile_navi_3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swiss/styleguide/HEAD/styleguide-img/mobile_navi_3.png -------------------------------------------------------------------------------- /src/assets/img/chosen-sprite@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swiss/styleguide/HEAD/src/assets/img/chosen-sprite@2x.png -------------------------------------------------------------------------------- /src/assets/img/ico/mstile-70x70.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swiss/styleguide/HEAD/src/assets/img/ico/mstile-70x70.png -------------------------------------------------------------------------------- /src/assets/fonts/AdminCH_Symbols.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swiss/styleguide/HEAD/src/assets/fonts/AdminCH_Symbols.eot -------------------------------------------------------------------------------- /src/assets/fonts/AdminCH_Symbols.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swiss/styleguide/HEAD/src/assets/fonts/AdminCH_Symbols.ttf -------------------------------------------------------------------------------- /src/assets/fonts/AdminCH_Symbols.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swiss/styleguide/HEAD/src/assets/fonts/AdminCH_Symbols.woff -------------------------------------------------------------------------------- /src/assets/fonts/AdminCH_Symbols.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swiss/styleguide/HEAD/src/assets/fonts/AdminCH_Symbols.woff2 -------------------------------------------------------------------------------- /src/assets/img/ico/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swiss/styleguide/HEAD/src/assets/img/ico/favicon-16x16.png -------------------------------------------------------------------------------- /src/assets/img/ico/favicon-196x196.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swiss/styleguide/HEAD/src/assets/img/ico/favicon-196x196.png -------------------------------------------------------------------------------- /src/assets/img/ico/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swiss/styleguide/HEAD/src/assets/img/ico/favicon-32x32.png -------------------------------------------------------------------------------- /src/assets/img/ico/favicon-96x96.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swiss/styleguide/HEAD/src/assets/img/ico/favicon-96x96.png -------------------------------------------------------------------------------- /src/assets/img/ico/mstile-144x144.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swiss/styleguide/HEAD/src/assets/img/ico/mstile-144x144.png -------------------------------------------------------------------------------- /src/assets/img/ico/mstile-150x150.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swiss/styleguide/HEAD/src/assets/img/ico/mstile-150x150.png -------------------------------------------------------------------------------- /src/assets/img/ico/mstile-310x150.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swiss/styleguide/HEAD/src/assets/img/ico/mstile-310x150.png -------------------------------------------------------------------------------- /src/assets/img/ico/mstile-310x310.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swiss/styleguide/HEAD/src/assets/img/ico/mstile-310x310.png -------------------------------------------------------------------------------- /src/assets/img/social-sharing-xing.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swiss/styleguide/HEAD/src/assets/img/social-sharing-xing.png -------------------------------------------------------------------------------- /src/assets/img/ico/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swiss/styleguide/HEAD/src/assets/img/ico/apple-touch-icon.png -------------------------------------------------------------------------------- /src/assets/img/social-sharing-google.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swiss/styleguide/HEAD/src/assets/img/social-sharing-google.png -------------------------------------------------------------------------------- /styleguide-img/navigation_supermarkt.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swiss/styleguide/HEAD/styleguide-img/navigation_supermarkt.png -------------------------------------------------------------------------------- /src/assets/img/social-sharing-facebook.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swiss/styleguide/HEAD/src/assets/img/social-sharing-facebook.png -------------------------------------------------------------------------------- /src/assets/img/social-sharing-linkedin.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swiss/styleguide/HEAD/src/assets/img/social-sharing-linkedin.png -------------------------------------------------------------------------------- /src/assets/img/social-sharing-twitter.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swiss/styleguide/HEAD/src/assets/img/social-sharing-twitter.png -------------------------------------------------------------------------------- /src/assets/img/ico/apple-touch-icon-57x57.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swiss/styleguide/HEAD/src/assets/img/ico/apple-touch-icon-57x57.png -------------------------------------------------------------------------------- /src/assets/img/ico/apple-touch-icon-60x60.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swiss/styleguide/HEAD/src/assets/img/ico/apple-touch-icon-60x60.png -------------------------------------------------------------------------------- /src/assets/img/ico/apple-touch-icon-72x72.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swiss/styleguide/HEAD/src/assets/img/ico/apple-touch-icon-72x72.png -------------------------------------------------------------------------------- /src/assets/img/ico/apple-touch-icon-76x76.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swiss/styleguide/HEAD/src/assets/img/ico/apple-touch-icon-76x76.png -------------------------------------------------------------------------------- /src/assets/img/ico/apple-touch-icon-114x114.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swiss/styleguide/HEAD/src/assets/img/ico/apple-touch-icon-114x114.png -------------------------------------------------------------------------------- /src/assets/img/ico/apple-touch-icon-120x120.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swiss/styleguide/HEAD/src/assets/img/ico/apple-touch-icon-120x120.png -------------------------------------------------------------------------------- /src/assets/img/ico/apple-touch-icon-144x144.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swiss/styleguide/HEAD/src/assets/img/ico/apple-touch-icon-144x144.png -------------------------------------------------------------------------------- /src/assets/img/ico/apple-touch-icon-precomposed.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swiss/styleguide/HEAD/src/assets/img/ico/apple-touch-icon-precomposed.png -------------------------------------------------------------------------------- /src/assets/img/ico/apple-touch-icon-144-precomposed.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swiss/styleguide/HEAD/src/assets/img/ico/apple-touch-icon-144-precomposed.png -------------------------------------------------------------------------------- /src/views/index.html: -------------------------------------------------------------------------------- 1 | --- 2 | fabricator: true 3 | title: docs.index.title 4 | permalink: index.html 5 | --- 6 | 7 | {{{t 'docs.index.content' markdown=true}}} 8 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | **/.DS_STORE 2 | node_modules/* 3 | 4 | .sass-cache 5 | 6 | styleguide/* 7 | src/views/pages/* 8 | 9 | # IDEs and editors 10 | /.idea 11 | *.iml 12 | -------------------------------------------------------------------------------- /src/materials/01-layout/02-general/04-images.html: -------------------------------------------------------------------------------- 1 | --- 2 | title: layout.general.images.title 3 | help: layout.general.images.help 4 | label: flex 5 | empty: true 6 | --- 7 | -------------------------------------------------------------------------------- /src/assets/files/swiss_web_guidelines_official_translations.xlsx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swiss/styleguide/HEAD/src/assets/files/swiss_web_guidelines_official_translations.xlsx -------------------------------------------------------------------------------- /src/materials/01-layout/02-general/07-image-format.html: -------------------------------------------------------------------------------- 1 | --- 2 | title: layout.general.image-format.title 3 | label: flex 4 | complement: image-format.html 5 | empty: true 6 | --- 7 | -------------------------------------------------------------------------------- /src/assets/sass/components/twitter-timeline.scss: -------------------------------------------------------------------------------- 1 | .mod-twitterstream .twitter-timeline { 2 | overflow-y: auto; 3 | } 4 | 5 | #timeline { 6 | //height: 500px; 7 | height: 100%; 8 | } 9 | -------------------------------------------------------------------------------- /src/materials/01-layout/02-general/02-colors.html: -------------------------------------------------------------------------------- 1 | --- 2 | title: layout.general.colors.title 3 | help: layout.general.colors.help 4 | label: CD 5 | complement: colors.html 6 | empty: true 7 | --- 8 | -------------------------------------------------------------------------------- /src/materials/01-layout/02-general/05-standard-image.html: -------------------------------------------------------------------------------- 1 | --- 2 | title: layout.general.standard-image.title 3 | label: flex 4 | --- 5 | 6 | image description 7 | -------------------------------------------------------------------------------- /src/materials/01-layout/01-form-elements/07-buttons.html: -------------------------------------------------------------------------------- 1 | --- 2 | title: layout.form-elements.buttons.title 3 | help: layout.form-elements.buttons.help 4 | label: flex 5 | complement: buttons.html 6 | empty: true 7 | --- -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | /.* 2 | /styleguide-img 3 | /src/assets/fabricator 4 | /src/assets/files 5 | /src/data 6 | /src/example-pages 7 | /src/locales 8 | /src/materials 9 | /src/materials-data 10 | /src/views 11 | /src/index.html 12 | -------------------------------------------------------------------------------- /src/materials/01-layout/04-typography/04-blockquote.html: -------------------------------------------------------------------------------- 1 | --- 2 | title: layout.typography.blockquote.title 3 | label: cd 4 | --- 5 | 6 |
7 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. 8 |
9 | -------------------------------------------------------------------------------- /src/views/docs/06-devices.html: -------------------------------------------------------------------------------- 1 | --- 2 | fabricator: true 3 | category: docs.title 4 | title: docs.devices.title 5 | permalink: docs/06-devices.html 6 | --- 7 | 8 |

{{t 'docs.devices.title'}}

9 | 10 | {{{t 'docs.devices.content' markdown=true}}} 11 | -------------------------------------------------------------------------------- /src/views/docs/01-guidelines.html: -------------------------------------------------------------------------------- 1 | --- 2 | fabricator: true 3 | category: docs.title 4 | title: docs.guidelines.title 5 | permalink: docs/01-guidelines.html 6 | --- 7 | 8 |

{{t 'docs.guidelines.title'}}

9 | 10 | {{{t 'docs.guidelines.content' markdown=true}}} 11 | -------------------------------------------------------------------------------- /src/views/docs/03-basic-grid.html: -------------------------------------------------------------------------------- 1 | --- 2 | fabricator: true 3 | category: docs.title 4 | title: docs.basic-grid.title 5 | permalink: docs/03-basic-grid.html 6 | --- 7 | 8 |

{{t 'docs.basic-grid.title'}}

9 | 10 | {{{t 'docs.basic-grid.content' markdown=true}}} 11 | -------------------------------------------------------------------------------- /src/views/docs/02-cd-elements.html: -------------------------------------------------------------------------------- 1 | --- 2 | fabricator: true 3 | category: docs.title 4 | title: docs.cd-elements.title 5 | permalink: docs/02-cd-elements.html 6 | --- 7 | 8 |

{{t 'docs.cd-elements.title'}}

9 | 10 | {{{t 'docs.cd-elements.content' markdown=true}}} 11 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # http://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | end_of_line = lf 7 | indent_size = 2 8 | indent_style = space 9 | insert_final_newline = true 10 | trim_trailing_whitespace = true 11 | 12 | [*.md] 13 | trim_trailing_whitespace = false 14 | -------------------------------------------------------------------------------- /src/views/docs/04-sample-pages.html: -------------------------------------------------------------------------------- 1 | --- 2 | fabricator: true 3 | category: docs.title 4 | title: docs.sample-pages.title 5 | permalink: docs/04-sample-pages.html 6 | --- 7 | 8 |

{{t 'docs.sample-pages.title'}}

9 | 10 | {{{t 'docs.sample-pages.content' markdown=true}}} 11 | -------------------------------------------------------------------------------- /src/assets/sass/components/contact-box.scss: -------------------------------------------------------------------------------- 1 | div[data-print="contact-info"] { 2 | address { 3 | padding: 10px 0px; 4 | strong { 5 | font-weight: normal; 6 | display: block; 7 | } 8 | } 9 | p a.icon:before{ 10 | padding-right: 33px; 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /src/materials/01-layout/02-general/06-captioned-image.html: -------------------------------------------------------------------------------- 1 | --- 2 | title: layout.general.captioned-image.title 3 | label: flex 4 | --- 5 | 6 |
7 | image description 8 |
Caption content
9 |
10 | -------------------------------------------------------------------------------- /src/materials/03-content/01-standard-elements/01-page-title.html: -------------------------------------------------------------------------------- 1 | --- 2 | title: content.standard-elements.page-title.title 3 | help: content.standard-elements.page-title.help 4 | label: fix 5 | --- 6 | 7 |

This is the page title, and it can be really quite long.

8 | -------------------------------------------------------------------------------- /src/views/docs/05-header-footer.html: -------------------------------------------------------------------------------- 1 | --- 2 | fabricator: true 3 | category: docs.title 4 | title: docs.header-footer.title 5 | permalink: docs/05-header-footer.html 6 | --- 7 | 8 |

{{t 'docs.header-footer.title'}}

9 | 10 | {{{t 'docs.header-footer.content' markdown=true}}} 11 | -------------------------------------------------------------------------------- /src/materials/01-layout/04-typography/07-definition-lists.html: -------------------------------------------------------------------------------- 1 | --- 2 | title: layout.typography.definition-lists.title 3 | --- 4 | 5 |
6 |
Lorem ipsum
7 |
Lorem ipsum
8 |
Lorem ipsum
9 |
Lorem ipsum
10 |
Lorem ipsum
11 |
12 | -------------------------------------------------------------------------------- /src/materials/02-navigation/02-header/01-logo.html: -------------------------------------------------------------------------------- 1 | --- 2 | title: navigation.header.logo.title 3 | help: navigation.header.logo.help 4 | release: navigation.header.logo.release 5 | label: cd 6 | --- 7 | 8 |
9 | {{> general.logo}} 10 |
11 | 12 | -------------------------------------------------------------------------------- /src/views/tables.html: -------------------------------------------------------------------------------- 1 | --- 2 | fabricator: true 3 | title: layout.tables.title 4 | category: layout.title 5 | permalink: tables.html 6 | --- 7 | 8 |

{{t 'layout.tables.title'}}

9 | 10 | {{#each materials.01-layout.items.03-tables.items}} 11 | 12 | {{> f-item this}} 13 | 14 | {{/each}} 15 | -------------------------------------------------------------------------------- /src/assets/fabricator/styles/fabricator.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * STYLEGUIDE DEDICATED STYLE 3 | */ 4 | 5 | @import 'settings/variables'; 6 | 7 | @import 'vendor/prism'; 8 | 9 | @import 'objects/component'; 10 | @import 'objects/label'; 11 | @import 'objects/code-block'; 12 | @import 'objects/color-swatch'; 13 | -------------------------------------------------------------------------------- /src/views/general.html: -------------------------------------------------------------------------------- 1 | --- 2 | fabricator: true 3 | title: layout.general.title 4 | category: layout.title 5 | permalink: general.html 6 | --- 7 | 8 |

{{t 'layout.general.title'}}

9 | 10 | {{#each materials.01-layout.items.02-general.items}} 11 | 12 | {{> f-item this}} 13 | 14 | {{/each}} 15 | -------------------------------------------------------------------------------- /src/views/search.html: -------------------------------------------------------------------------------- 1 | --- 2 | fabricator: true 3 | title: content.search.title 4 | category: content.title 5 | permalink: search.html 6 | --- 7 | 8 |

{{t 'content.search.title'}}

9 | 10 | {{#each materials.03-content.items.07-search.items}} 11 | 12 | {{> f-item this}} 13 | 14 | {{/each}} 15 | -------------------------------------------------------------------------------- /src/views/teaser.html: -------------------------------------------------------------------------------- 1 | --- 2 | fabricator: true 3 | title: content.teaser.title 4 | category: content.title 5 | permalink: teaser.html 6 | --- 7 | 8 |

{{t 'content.teaser.title'}}

9 | 10 | {{#each materials.03-content.items.05-teaser.items}} 11 | 12 | {{> f-item this}} 13 | 14 | {{/each}} 15 | -------------------------------------------------------------------------------- /src/views/widgets.html: -------------------------------------------------------------------------------- 1 | --- 2 | fabricator: true 3 | title: content.widgets.title 4 | category: content.title 5 | permalink: widgets.html 6 | --- 7 | 8 |

{{t 'content.widgets.title'}}

9 | 10 | {{#each materials.03-content.items.03-widgets.items}} 11 | 12 | {{> f-item this}} 13 | 14 | {{/each}} 15 | -------------------------------------------------------------------------------- /src/views/footer.html: -------------------------------------------------------------------------------- 1 | --- 2 | fabricator: true 3 | title: navigation.footer.title 4 | category: navigation.title 5 | permalink: footer.html 6 | --- 7 | 8 |

{{t 'navigation.footer.title'}}

9 | 10 | {{#each materials.02-navigation.items.04-footer.items}} 11 | 12 | {{> f-item this}} 13 | 14 | {{/each}} 15 | -------------------------------------------------------------------------------- /src/views/header.html: -------------------------------------------------------------------------------- 1 | --- 2 | fabricator: true 3 | title: navigation.header.title 4 | category: navigation.title 5 | permalink: header.html 6 | --- 7 | 8 |

{{t 'navigation.header.title'}}

9 | 10 | {{#each materials.02-navigation.items.02-header.items}} 11 | 12 | {{> f-item this}} 13 | 14 | {{/each}} 15 | -------------------------------------------------------------------------------- /src/materials/01-layout/04-typography/09-top-link.html: -------------------------------------------------------------------------------- 1 | --- 2 | title: layout.typography.top-link.title 3 | help: layout.typography.top-link.help 4 | label: flex 5 | --- 6 | 7 |
8 | Back to top 9 |
10 | -------------------------------------------------------------------------------- /src/views/functions.html: -------------------------------------------------------------------------------- 1 | --- 2 | fabricator: true 3 | title: content.functions.title 4 | category: content.title 5 | permalink: functions.html 6 | --- 7 | 8 |

{{t 'content.functions.title'}}

9 | 10 | {{#each materials.03-content.items.04-functions.items}} 11 | 12 | {{> f-item this}} 13 | 14 | {{/each}} 15 | -------------------------------------------------------------------------------- /src/views/typography.html: -------------------------------------------------------------------------------- 1 | --- 2 | fabricator: true 3 | title: layout.typography.title 4 | category: layout.title 5 | permalink: typography.html 6 | --- 7 | 8 |

{{t 'layout.typography.title'}}

9 | 10 | {{#each materials.01-layout.items.04-typography.items}} 11 | 12 | {{> f-item this}} 13 | 14 | {{/each}} 15 | -------------------------------------------------------------------------------- /src/materials/02-navigation/01-hierarchical-navigation/03-back-to-overview.html: -------------------------------------------------------------------------------- 1 | --- 2 | title: navigation.hierarchical-navigation.back-to-overview.title 3 | help: navigation.hierarchical-navigation.back-to-overview.help 4 | label: fix 5 | --- 6 | 7 | Back to Overview 8 | -------------------------------------------------------------------------------- /src/views/multimedia.html: -------------------------------------------------------------------------------- 1 | --- 2 | fabricator: true 3 | title: content.multimedia.title 4 | category: content.title 5 | permalink: multimedia.html 6 | --- 7 | 8 |

{{t 'content.multimedia.title'}}

9 | 10 | {{#each materials.03-content.items.06-multimedia.items}} 11 | 12 | {{> f-item this}} 13 | 14 | {{/each}} 15 | -------------------------------------------------------------------------------- /src/views/form-elements.html: -------------------------------------------------------------------------------- 1 | --- 2 | fabricator: true 3 | title: layout.form-elements.title 4 | category: layout.title 5 | permalink: form-elements.html 6 | --- 7 | 8 |

{{t 'layout.form-elements.title'}}

9 | 10 | {{#each materials.01-layout.items.01-form-elements.items}} 11 | 12 | {{> f-item this}} 13 | 14 | {{/each}} 15 | -------------------------------------------------------------------------------- /src/materials/01-layout/04-typography/10-end-page-link.html: -------------------------------------------------------------------------------- 1 | --- 2 | title: layout.typography.end-page-link.title 3 | help: layout.typography.end-page-link.help 4 | label: flex 5 | --- 6 | 7 | Back to topLast edition: 21.03.2014 8 | -------------------------------------------------------------------------------- /src/assets/fabricator/styles/settings/_variables.scss: -------------------------------------------------------------------------------- 1 | // Colors 2 | 3 | $empress: #757575; 4 | $silver: #ccc; 5 | $softBlue: #f2f1ea; 6 | $white: #fff; 7 | $black: #000; 8 | 9 | // Fonts 10 | 11 | $mainFont: 'Frutiger Neue Regular', sans-serif; 12 | $codeFont: Monaco, monospace; 13 | -------------------------------------------------------------------------------- /src/materials/01-layout/04-typography/01-titles.html: -------------------------------------------------------------------------------- 1 | --- 2 | title: layout.typography.titles.title 3 | help: layout.typography.titles.help 4 | label: cd 5 | --- 6 | 7 |

Heading 1

8 |

Heading 2

9 |

Heading 3

10 |

Heading 4

11 |
Heading 5
12 |
Heading 6
13 | 14 |

Heading 2 link

15 | -------------------------------------------------------------------------------- /src/views/ordering-checkout.html: -------------------------------------------------------------------------------- 1 | --- 2 | fabricator: true 3 | title: content.ordering-checkout.title 4 | category: content.title 5 | permalink: ordering-checkout.html 6 | --- 7 | 8 |

{{t 'content.ordering-checkout.title'}}

9 | 10 | {{#each materials.03-content.items.08-ordering-checkout.items}} 11 | 12 | {{> f-item this}} 13 | 14 | {{/each}} 15 | -------------------------------------------------------------------------------- /src/views/standard-elements.html: -------------------------------------------------------------------------------- 1 | --- 2 | fabricator: true 3 | title: content.standard-elements.title 4 | category: content.title 5 | permalink: standard-elements.html 6 | --- 7 | 8 |

{{t 'content.standard-elements.title'}}

9 | 10 | {{#each materials.03-content.items.01-standard-elements.items}} 11 | 12 | {{> f-item this}} 13 | 14 | {{/each}} 15 | -------------------------------------------------------------------------------- /src/views/content-containers.html: -------------------------------------------------------------------------------- 1 | --- 2 | fabricator: true 3 | title: content.content-containers.title 4 | category: content.title 5 | permalink: content-containers.html 6 | --- 7 | 8 |

{{t 'content.content-containers.title'}}

9 | 10 | {{#each materials.03-content.items.02-content-containers.items}} 11 | 12 | {{> f-item this}} 13 | 14 | {{/each}} 15 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | 2 | sudo: false 3 | language: node_js 4 | 5 | node_js: 6 | - "0.12" 7 | 8 | notifications: 9 | webhooks: 10 | urls: 11 | - YOUR_WEBHOOK_URL 12 | on_success: change # options: [always|never|change] default: always 13 | on_failure: always # options: [always|never|change] default: always 14 | on_start: false # default: false 15 | -------------------------------------------------------------------------------- /src/views/content-navigation.html: -------------------------------------------------------------------------------- 1 | --- 2 | fabricator: true 3 | title: navigation.content-navigation.title 4 | category: navigation.title 5 | permalink: content-navigation.html 6 | --- 7 | 8 |

{{t 'navigation.content-navigation.title'}}

9 | 10 | {{#each materials.02-navigation.items.03-content-navigation.items}} 11 | 12 | {{> f-item this}} 13 | 14 | {{/each}} 15 | -------------------------------------------------------------------------------- /src/views/hierarchical-navigation.html: -------------------------------------------------------------------------------- 1 | --- 2 | fabricator: true 3 | title: navigation.hierarchical-navigation.title 4 | category: navigation.title 5 | permalink: hierarchical-navigation.html 6 | --- 7 | 8 |

{{t 'navigation.hierarchical-navigation.title'}}

9 | 10 | {{#each materials.02-navigation.items.01-hierarchical-navigation.items}} 11 | 12 | {{> f-item this}} 13 | 14 | {{/each}} 15 | -------------------------------------------------------------------------------- /src/data/locales.yml: -------------------------------------------------------------------------------- 1 | # You should change those values accordingly in src/index.html 2 | # to make the language detection work as expected. 3 | de: 4 | code: de 5 | name: Deutsch 6 | disabled: false 7 | fr: 8 | code: fr 9 | name: Français 10 | disabled: false 11 | it: 12 | code: it 13 | name: Italiano 14 | disabled: true 15 | en: 16 | code: en 17 | name: English 18 | disabled: false 19 | -------------------------------------------------------------------------------- /src/materials/01-layout/01-form-elements/03-selects.html: -------------------------------------------------------------------------------- 1 | --- 2 | title: layout.form-elements.selects.title 3 | help: layout.form-elements.selects.help 4 | release: layout.form-elements.selects.release 5 | label: flex 6 | --- 7 | 8 | 9 | 13 | -------------------------------------------------------------------------------- /src/materials-data/complements/site-search.html: -------------------------------------------------------------------------------- 1 | 9 | -------------------------------------------------------------------------------- /src/materials/01-layout/04-typography/06-unstyled-lists.html: -------------------------------------------------------------------------------- 1 | --- 2 | title: layout.typography.unstyled-lists.title 3 | help: layout.typography.unstyled-lists.help 4 | --- 5 | 6 | 11 | -------------------------------------------------------------------------------- /src/materials/01-layout/02-general/01-logo.html: -------------------------------------------------------------------------------- 1 | --- 2 | title: layout.general.logo.title 3 | help: layout.general.logo.help 4 | release: layout.general.logo.release 5 | label: CD 6 | --- 7 | 8 | 12 | -------------------------------------------------------------------------------- /src/views/docs/08-translations.html: -------------------------------------------------------------------------------- 1 | --- 2 | fabricator: true 3 | category: docs.title 4 | title: docs.translations.title 5 | permalink: docs/08-translations.html 6 | --- 7 | 8 |

{{t 'docs.translations.title'}}

9 | 10 | {{{t 'docs.translations.content' markdown=true}}} 11 | 12 |

13 | -------------------------------------------------------------------------------- /src/materials/01-layout/01-form-elements/08-button-groups.html: -------------------------------------------------------------------------------- 1 | --- 2 | title: layout.form-elements.button-groups.title 3 | label: fix 4 | --- 5 | 6 |
7 | 8 | 9 | 10 | 11 | 12 |
13 | -------------------------------------------------------------------------------- /src/materials-data/javascripts/site-search.js: -------------------------------------------------------------------------------- 1 | // You have to store all your data inside `searchData` and define it globaly 2 | var searchData = ["Aargau", "Appenzell A. Rh.", "Appenzell I. Rh.", 3 | "Basel-Landschaft", "Basel-Stadt", "Bern", "Fribourg", "Genève", 4 | "Glarus", "Graubünden", "Jura", "Lucerne", "Neuchâtel", "Nidwalden", 5 | "Obwalden", "Schaffhausen", "Schwyz", "Solothurn", "St. Gallen", 6 | "Thurgau", "Ticino", "Uri", "Valais", "Vaud", "Zug", "Zurich" 7 | ]; 8 | -------------------------------------------------------------------------------- /src/materials/01-layout/02-general/08-icons.html: -------------------------------------------------------------------------------- 1 | --- 2 | title: layout.general.icons.title 3 | help: layout.general.icons.help 4 | label: flex 5 | release: layout.general.icons.release 6 | complement: icons.html 7 | --- 8 | 9 | 10 |

My document

11 | 12 | 13 |

14 | -------------------------------------------------------------------------------- /src/materials/01-layout/01-form-elements/04-selects-multiple.html: -------------------------------------------------------------------------------- 1 | --- 2 | title: layout.form-elements.selects-multiple.title 3 | help: layout.form-elements.selects-multiple.help 4 | release: layout.form-elements.selects-multiple.release 5 | label: flex 6 | --- 7 | 8 | 12 | -------------------------------------------------------------------------------- /src/assets/img/ico/browserconfig.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | #ffffff 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /.jshintrc: -------------------------------------------------------------------------------- 1 | { 2 | "boss": true, 3 | "browser": true, 4 | "curly": true, 5 | "debug": true, 6 | "devel": true, 7 | "eqeqeq": true, 8 | "expr": true, 9 | "forin": true, 10 | "immed": true, 11 | "noarg": true, 12 | "node": true, 13 | "noempty": true, 14 | "nonew": true, 15 | "strict": true, 16 | "trailing": true, 17 | "undef": true, 18 | "unused": true, 19 | "globals": { 20 | "Bloodhound": true, 21 | "jQuery": true, 22 | "searchData": true 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /src/locales/de/pages.yml: -------------------------------------------------------------------------------- 1 | title: Beispielseiten 2 | detail: 3 | title: Detailseite 4 | forms: 5 | title: Formular 6 | home-without-nav: 7 | title: Startseite mit Hauptnavigation 8 | homepage-global-nav: 9 | title: Startseite ohne Hauptnavigation 10 | preview-without-nav: 11 | title: Übersichtsseite ohne Hauptnavigation 12 | preview: 13 | title: Übersichtsseite 14 | publications: 15 | title: Publikationen 16 | results: 17 | title: Suchergebnisse 18 | subpage: 19 | title: Unterseite 20 | 21 | -------------------------------------------------------------------------------- /src/locales/en/pages.yml: -------------------------------------------------------------------------------- 1 | title: Example pages 2 | detail: 3 | title: Details page 4 | forms: 5 | title: Forms page 6 | home-without-nav: 7 | title: Homepage without global navigation 8 | homepage-global-nav: 9 | title: Homepage with global navigation 10 | preview-without-nav: 11 | title: Overview page without navigation 12 | preview: 13 | title: Overview page 14 | publications: 15 | title: Publications page 16 | results: 17 | title: Search results page 18 | subpage: 19 | title: Subpage 20 | -------------------------------------------------------------------------------- /src/assets/sass/components/shopping-cart.scss: -------------------------------------------------------------------------------- 1 | .cart { 2 | @media only screen and (min-width: $screen-md-min) { 3 | border: 1px solid $silver; 4 | padding: 0 0.8em 0.8em 0.8em; 5 | } 6 | ul { 7 | border-top: 1px solid $silver; 8 | } 9 | li { 10 | margin-left: 0; 11 | margin-top: 0.4em; 12 | border-bottom: 1px solid $silver; 13 | min-height: 25px; 14 | padding-bottom: 3px; 15 | > span { 16 | display: block; 17 | width: 80%; 18 | } 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /src/materials/01-layout/02-general/03-background.html: -------------------------------------------------------------------------------- 1 | --- 2 | title: layout.general.background.title 3 | help: layout.general.background.help 4 | label: fix 5 | --- 6 | 7 |
8 |
9 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur dolores adipisci minus nesciunt facilis. Iure, error, facilis, modi, soluta deleniti maiores corporis impedit ducimus laboriosam porro fugiat et esse blanditiis.

10 |
11 |
12 | -------------------------------------------------------------------------------- /src/materials/02-navigation/03-content-navigation/02-anchor-links.html: -------------------------------------------------------------------------------- 1 | --- 2 | title: navigation.content-navigation.anchor-links.title 3 | help: navigation.content-navigation.anchor-links.help 4 | label: flex 5 | --- 6 | 7 | 12 | -------------------------------------------------------------------------------- /src/views/layouts/includes/f-menu-mobile.html: -------------------------------------------------------------------------------- 1 |
  • 2 | {{t @key 'title'}} 3 | 11 |
    • 12 | -------------------------------------------------------------------------------- /src/locales/fr/pages.yml: -------------------------------------------------------------------------------- 1 | title: Pages d’exemple 2 | detail: 3 | title: Page de détails 4 | forms: 5 | title: Formulaire 6 | home-without-nav: 7 | title: Page d’accueil avec navigation globale 8 | homepage-global-nav: 9 | title: Page d’accueil sans navigation globale 10 | preview-without-nav: 11 | title: Page d’aperçu sans navigation globale 12 | preview: 13 | title: Page d’aperçu 14 | publications: 15 | title: Publications 16 | results: 17 | title: Résultats de recherche 18 | subpage: 19 | title: Sous-page 20 | 21 | -------------------------------------------------------------------------------- /src/materials/02-navigation/04-footer/03-footbar.html: -------------------------------------------------------------------------------- 1 | --- 2 | title: navigation.footer.footbar.title 3 | help: navigation.footer.footbar.help 4 | release: navigation.footer.footbar.release 5 | label: cd 6 | --- 7 | 8 | 19 | -------------------------------------------------------------------------------- /src/assets/sass/components/anchor-links.scss: -------------------------------------------------------------------------------- 1 | /* ========================================================== 2 | * anchor-links.scss 3 | * Anchor links to elements on the page 4 | * 5 | * Author: Toni Fisler, toni@antistatique.net 6 | * Date: 2014-05-01 16:37:43 7 | * 8 | * Copyright 2014 Federal Chancellery of Switzerland 9 | * Licensed under MIT 10 | ========================================================== */ 11 | 12 | .anchor { 13 | list-style-type: none; 14 | .icon:before { 15 | padding-right: 7px; 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /src/assets/js/tablesorter.js: -------------------------------------------------------------------------------- 1 | /* ========================================================== 2 | * tablesorter.js 3 | * Control tablesort from markup 4 | * 5 | * Author: Simon Perdrisat, simon@antistatique.net 6 | * Date: 2014-05-01 11:11:33 7 | * 8 | * Copyright 2014 Federal Chancellery of Switzerland 9 | * Licensed under MIT 10 | ========================================================== */ 11 | 12 | 13 | (function($) { 14 | 'use strict'; 15 | 16 | $('.table-sort').tablesorter({ sortLocaleCompare : true }); 17 | 18 | }) (jQuery); 19 | -------------------------------------------------------------------------------- /src/assets/sass/components/rss.scss: -------------------------------------------------------------------------------- 1 | /* ========================================================== 2 | * rss.scss 3 | * RSS component 4 | * 5 | * Author: Yann, yann@antistatique.net 6 | * Date: 2014-05-15 16:13:19 7 | * 8 | * Copyright 2014 Federal Chancellery of Switzerland 9 | * Licensed under MIT 10 | ========================================================== */ 11 | 12 | .rss { 13 | padding-top: 0; 14 | &.well { 15 | @media only screen and (max-width: $screen-sm-max) { 16 | padding: 0; 17 | } 18 | } 19 | } 20 | 21 | -------------------------------------------------------------------------------- /src/assets/fabricator/scripts/ui.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Disable some default behavior that doesn’t make sense 3 | * In the context of a style guide 4 | */ 5 | 6 | (function($){ 7 | 8 | 'use strict'; 9 | 10 | // Disable links to nothing (avoid jump to top of the page) 11 | $('.component-example a[href="#"]').on('click', function(e) { 12 | e.preventDefault(); 13 | }); 14 | 15 | // Disable forms submit (avoid page reload) 16 | $('.component-example form').on('submit', function(e) { 17 | e.preventDefault(); 18 | }); 19 | 20 | })(jQuery); 21 | -------------------------------------------------------------------------------- /src/assets/fabricator/styles/objects/_label.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Object 3 | * LABEL 4 | */ 5 | 6 | .label-admin { 7 | display: inline-block; 8 | width: 31px; 9 | height: 31px; 10 | padding: 0; 11 | 12 | color: $black; 13 | font-size: 0.5rem; 14 | line-height: 31px; 15 | text-align: center; 16 | vertical-align: middle; 17 | 18 | border-radius: 31px; 19 | border: 1px solid $black; 20 | 21 | @media only screen and (max-width: 991px) { 22 | width: 27px; 23 | height: 27px; 24 | 25 | line-height: 27px; 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /src/materials/01-layout/01-form-elements/01-fieldsets.html: -------------------------------------------------------------------------------- 1 | --- 2 | title: layout.form-elements.fieldsets.title 3 | help: layout.form-elements.fieldsets.help 4 | label: flex 5 | --- 6 | 7 |
    8 |
    9 | Legend of fieldset 10 |
    11 | 12 |
    13 | 14 |
    15 |
    16 |
    17 |
    18 | -------------------------------------------------------------------------------- /src/materials/01-layout/04-typography/03-text-elements.html: -------------------------------------------------------------------------------- 1 | --- 2 | title: layout.typography.text-elements.title 3 | help: layout.typography.text-elements.help 4 | release: layout.typography.text-elements.release 5 | label: cd 6 | complement: text-elements.html 7 | --- 8 |

    9 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae, reprehenderit, quas, facere, placeat eveniet quia consequuntur est sint necessitatibus at perferendis modi. Officiis, mollitia deleniti nostrum. Temporibus, architecto fugit eveniet. 10 |

    11 | -------------------------------------------------------------------------------- /src/materials/03-content/07-search/01-search-box.html: -------------------------------------------------------------------------------- 1 | --- 2 | title: content.search.search-box.title 3 | help: content.search.search-box.help 4 | --- 5 | 6 |
    7 |
    8 |
    9 | 10 | 11 |
    12 | 13 |
    14 |
    15 | -------------------------------------------------------------------------------- /src/materials/02-navigation/03-content-navigation/03-process-navigation.html: -------------------------------------------------------------------------------- 1 | --- 2 | title: navigation.content-navigation.process-navigation.title 3 | help: navigation.content-navigation.process-navigation.help 4 | label: flex 5 | --- 6 | 7 | 23 | -------------------------------------------------------------------------------- /src/assets/fabricator/styles/objects/_color-swatch.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Object 3 | * COLOR SWATCH 4 | */ 5 | 6 | .color-swatch { 7 | display: block; 8 | padding: 20px 10px; 9 | 10 | position: relative; 11 | 12 | text-align: center; 13 | 14 | border-radius: 3px; 15 | 16 | &::after { 17 | content: ''; 18 | display: block; 19 | width: 100%; 20 | height: 100%; 21 | 22 | position: absolute; 23 | top: 0; 24 | right: 0; 25 | bottom: 0; 26 | right: 0; 27 | 28 | box-shadow: 0 0 0 1px rgba(0,0,0,.1) inset; 29 | border-radius: 3px; 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /src/materials/03-content/05-teaser/07-text-teaser.html: -------------------------------------------------------------------------------- 1 | --- 2 | title: content.teaser.text-teaser.title 3 | help: content.teaser.text-teaser.help 4 | label: flex 5 | --- 6 | 7 |
    8 |
    9 | 10 |

    Title in H3

    11 |

    12 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Utilitatis causa amicitia est quaesita. Deinde qui fit, ut ego nesciam, sciant omnes, quicumque Epicurei esse voluerunt? Ut in geometria, prima si dederis, danda sunt omnia. Sed mehercule pergrata. 13 |

    14 | 15 |
    16 |
    17 | -------------------------------------------------------------------------------- /src/materials/01-layout/04-typography/08-links.html: -------------------------------------------------------------------------------- 1 | --- 2 | title: layout.typography.links.title 3 | help: layout.typography.links.help 4 | release: layout.typography.links.release 5 | label: cd 6 | --- 7 | 8 |

    An internal link in a paragraph.

    9 | 10 |

    An external link in a paragraph.

    11 | link with icon
    12 | link with icon lorem (PDF, 43 pages, 2Mb, English)
    13 | -------------------------------------------------------------------------------- /src/assets/js/select.js: -------------------------------------------------------------------------------- 1 | /* ========================================================== 2 | * select.js 3 | * Scripts handling `select` elements 4 | * 5 | * Author: Toni Fisler, toni@antistatique.net 6 | * Date: 2014-04-30 10:20:33 7 | * 8 | * Copyright 2014 Federal Chancellery of Switzerland 9 | * Licensed under MIT 10 | ========================================================== */ 11 | 12 | (function($) { 13 | 'use strict'; 14 | 15 | $(document).ready(function(){ 16 | $('select').chosen({ 17 | disable_search_threshold: 10, 18 | width: 'auto' 19 | }); 20 | }); 21 | 22 | }) (jQuery); 23 | -------------------------------------------------------------------------------- /src/materials/03-content/03-widgets/02-emergency.html: -------------------------------------------------------------------------------- 1 | --- 2 | title: content.widgets.emergency.title 3 | help: content.widgets.emergency.help 4 | label: flex 5 | --- 6 | 7 | 17 | -------------------------------------------------------------------------------- /src/materials/03-content/05-teaser/12-rss-feed.html: -------------------------------------------------------------------------------- 1 | --- 2 | title: content.teaser.rss-feed.title 3 | help: content.teaser.rss-feed.help 4 | translation: true 5 | label: flex 6 | --- 7 | 8 |
    9 |
    10 | 11 |
    12 |
    13 |

    RSS

    14 | 19 |
    20 |
    21 | 22 |
    23 |
    24 | -------------------------------------------------------------------------------- /src/locales/en/styleguide.yml: -------------------------------------------------------------------------------- 1 | title: Swiss Confederation Web Guidelines 2 | version: Styleguide version 3 | logo: Logo of the Swiss Confederation - to the homepage 4 | chancellery: Federal Chancellery 5 | language: Language selection 6 | translations: Translations 7 | close: Close 8 | back: Back 9 | selected: Selected 10 | disabled: Disabled 11 | navigation: Navigation 12 | homepage: Homepage 13 | main-navigation: Main navigation 14 | content: Content 15 | disclaimer: 16 | text: Legal framework 17 | link: http://www.disclaimer.admin.ch/terms_and_conditions.html 18 | global-search: 19 | title: Search 20 | reset: Reset 21 | nothing-found: Nothing found. 22 | -------------------------------------------------------------------------------- /src/locales/de/styleguide.yml: -------------------------------------------------------------------------------- 1 | title: Richtlinien für das Webdesign Bund 2 | version: Version 3 | logo: Logo der Schweizerischen Eidgenossenschaft – zur Startseite 4 | chancellery: Bundeskanzlei 5 | language: Sprachwahl 6 | translations: Übersetzungen 7 | close: Schliessen 8 | back: Zurück 9 | selected: Ausgewählt 10 | disabled: Ausgeschaltet 11 | navigation: Navigation 12 | homepage: Startseite 13 | main-navigation: Hauptnavigation 14 | content: Inhalt 15 | disclaimer: 16 | text: Rechtliches 17 | link: http://www.disclaimer.admin.ch/terms_and_conditions.html 18 | global-search: 19 | title: Suche 20 | reset: Zurücksetzen 21 | nothing-found: Nichts gefunden. 22 | -------------------------------------------------------------------------------- /src/assets/sass/components/collapse.scss: -------------------------------------------------------------------------------- 1 | .collapse { 2 | @include clearfix; 3 | } 4 | 5 | .collapsing, .collapse.in { 6 | margin-left: 1.2em; 7 | } 8 | 9 | .collapse-box { 10 | padding: 0.8em; 11 | background: $smoke; 12 | } 13 | 14 | a[data-toggle="collapse"] { 15 | @extend .icon; 16 | @extend .icon--before; 17 | @extend .icon--root; 18 | display: block; 19 | &.collapsed { 20 | @extend .icon--greater; 21 | } 22 | } 23 | 24 | .drilldown a[data-toggle="collapse"] { 25 | padding: 0 10px 10px 10px; 26 | } 27 | 28 | .drilldown-container.collapse.in, 29 | .drilldown-container.collapsing { 30 | margin-left: 0; 31 | margin-bottom: 0; 32 | } 33 | -------------------------------------------------------------------------------- /src/materials/03-content/05-teaser/08-dossier-teaser.html: -------------------------------------------------------------------------------- 1 | --- 2 | title: content.teaser.dossier-teaser.title 3 | help: content.teaser.dossier-teaser.help 4 | label: flex 5 | --- 6 | 7 |
    8 |
    9 | Image description 10 |

    Title in H3

    11 |

    12 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Utilitatis causa amicitia est quaesita. Deinde qui fit, ut ego nesciam, sciant omnes, quicumque Epicurei esse voluerunt? Ut in geometria, prima si dederis, danda sunt omnia. Sed mehercule pergrata. 13 |

    14 | 15 |
    16 |
    17 | -------------------------------------------------------------------------------- /src/materials/03-content/03-widgets/01-alerts.html: -------------------------------------------------------------------------------- 1 | --- 2 | title: content.widgets.alerts.title 3 | help: content.widgets.alerts.help 4 | release: content.widgets.alerts.release 5 | translation: true 6 | --- 7 | 8 | 12 | 16 | 20 | 24 | -------------------------------------------------------------------------------- /src/materials/03-content/04-functions/02-social-sharing.html: -------------------------------------------------------------------------------- 1 | --- 2 | title: content.functions.social-sharing.title 3 | help: content.functions.social-sharing.help 4 | release: content.functions.social-sharing.release 5 | label: fix 6 | --- 7 | 8 |
    9 | 10 | 11 | 12 | 13 | 14 | 15 |
    16 | -------------------------------------------------------------------------------- /src/assets/sass/layout/others.scss: -------------------------------------------------------------------------------- 1 | hr { 2 | @extend .clearfix; 3 | } 4 | 5 | // This is a hack fix for Windows Phone 8 6 | // It should have been fixed by an update, but you know people... They won't always download the update. 7 | // This fix is dedicated to them. With love. 8 | // Source: http://timkadlec.com/2013/01/windows-phone-8-and-device-width/ 9 | // And: http://web3canvas.com/simple-solution-for-device-width-issue-in-windows-8-mobile/ 10 | @media screen and (max-width:48em) { 11 | @-ms-viewport{ 12 | width:auto!important; 13 | } 14 | } 15 | 16 | // Hides click to call button of Skype for Business 17 | span.baec5a81-e4d6-4674-97f3-e9220f0136c1 > a { 18 | display: none !important; 19 | } 20 | -------------------------------------------------------------------------------- /src/locales/fr/styleguide.yml: -------------------------------------------------------------------------------- 1 | title: Lignes directrices pour le design web de la Confédération 2 | version: Version 3 | logo: Logo de la Confédération suisse – vers la page d’accueil 4 | chancellery: Chancellerie fédérale 5 | language: Choix de la langue 6 | translations: Traductions 7 | close: Fermer 8 | back: Retour 9 | selected: Sélectionné 10 | disabled: Désactivé 11 | navigation: Navigation 12 | homepage: Page d’accueil 13 | main-navigation: Navigation principale 14 | content: Contenu 15 | disclaimer: 16 | text: Informations juridiques 17 | link: http://www.disclaimer.admin.ch/terms_and_conditions.html 18 | global-search: 19 | title: Chercher 20 | reset: Rétablir 21 | nothing-found: Rien n'a été trouvé. 22 | -------------------------------------------------------------------------------- /src/materials/01-layout/01-form-elements/06-radios.html: -------------------------------------------------------------------------------- 1 | --- 2 | title: layout.form-elements.radios.title 3 | help: layout.form-elements.radios.help 4 | release: layout.form-elements.radios.release 5 | label: flex 6 | --- 7 | 8 |
    9 | (Optional) Question 10 | 11 |
    12 | 16 |
    17 | 18 |
    19 | 23 |
    24 |
    25 | -------------------------------------------------------------------------------- /src/materials/02-navigation/02-header/03-service-navigation.html: -------------------------------------------------------------------------------- 1 | --- 2 | title: navigation.header.service-navigation.title 3 | help: navigation.header.service-navigation.help 4 | release: navigation.header.service-navigation.release 5 | label: cd 6 | --- 7 | 8 |
    9 |
    10 |

    Services navigation

    11 | 19 |
    20 | 21 | {{> general.logo}} 22 |
    23 | 24 | -------------------------------------------------------------------------------- /src/materials/01-layout/01-form-elements/05-checkboxes.html: -------------------------------------------------------------------------------- 1 | --- 2 | title: layout.form-elements.checkboxes.title 3 | help: layout.form-elements.checkboxes.help 4 | release: layout.form-elements.checkboxes.release 5 | label: flex 6 | --- 7 | 8 |
    9 | (Optional) Question 10 | 11 |
    12 | 16 |
    17 | 18 |
    19 | 23 |
    24 |
    25 | -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 17 | 18 | 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /src/materials/01-layout/04-typography/05-lists.html: -------------------------------------------------------------------------------- 1 | --- 2 | title: layout.typography.lists.title 3 | help: layout.typography.lists.help 4 | label: cd 5 | --- 6 | 7 | 22 | 23 |
      24 |
    1. Lorem ipsum
      2. 25 |
    2. Lorem ipsum
      3. 26 |
    3. Lorem ipsum 27 |
        28 |
      1. Lorem ipsum
        2. 29 |
      30 |
      4. 31 |
    4. Lorem ipsum
      5. 32 |
    33 | -------------------------------------------------------------------------------- /src/materials/01-layout/03-tables/16-table-unruled.html: -------------------------------------------------------------------------------- 1 | --- 2 | title: layout.tables.table-unruled.title 3 | help: layout.tables.table-unruled.help 4 | release: layout.tables.table-unruled.release 5 | label: flex 6 | --- 7 | 8 |
    9 |
    10 |
    11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 |
    NameE-mail
    Hans Musterhans.muster@mail.com
    26 | 27 |
    28 |
    29 |
    30 | -------------------------------------------------------------------------------- /src/materials/03-content/05-teaser/03-news.html: -------------------------------------------------------------------------------- 1 | --- 2 | title: content.teaser.news.title 3 | help: content.teaser.news.help 4 | label: flex 5 | --- 6 | 7 |
    8 |
    9 |

    10 | image description 11 |

    12 |
    13 |
    14 |

    15 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Piso, familiaris noster, et alia multa et hoc loco Stoicos irridebat: Quid enim? Nihilo beatiorem esse Metellum quam Regulum. Erit enim mecum, si tecum erit. Ne amores quidem sanctos a sapiente alienos esse arbitrantur. 16 |

    17 |
    18 | An external link 19 |
    20 |
    21 | -------------------------------------------------------------------------------- /src/assets/sass/layout/radios.scss: -------------------------------------------------------------------------------- 1 | /* ========================================================== 2 | * radios.scss 3 | * Custom radio input styles 4 | * 5 | * Author: Yann Gouffon, yann@antistatique.net 6 | * Date: 2014-04-28 17:17:40 7 | * 8 | * Copyright 2014 Federal Chancellery of Switzerland 9 | * Licensed under MIT 10 | =========================================================== */ 11 | 12 | .radio { 13 | @extend .checkbox; 14 | } 15 | 16 | .radio--left { 17 | label { 18 | padding-left: 24px; 19 | padding-right: 0; 20 | } 21 | input { 22 | @include form-button(left); 23 | } 24 | } 25 | 26 | .radio--right { 27 | label { 28 | padding-right: 24px; 29 | padding-left: 0; 30 | } 31 | input { 32 | @include form-button(right); 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /src/assets/fonts/README.md: -------------------------------------------------------------------------------- 1 | # Frutiger 2 | The Confederation Web Guidelines should come with Frutiger as the main font. But due to [licence](LICENSE) restrictions, the font files cannot be distributed on this repository. 3 | A copy can be obtained on the [federal chancellery intranet]( 4 | https://intranet.bk.admin.ch/bk-intra/de/home/dl-koordination-bund/kommunikation/webforum-bund/Downloads.html) or directly requested per email: [webforum@bk.admin.ch](mailto:webforum@bk.admin.ch). The font files then have to be copied into the `src/assets/fonts` directory. 5 | 6 | According to the Frutiger [licence](LICENSE), the font files have to be protected. Each project should ensure that only allowed domains have access the font. The proposed solution is to check that the REFERER http header is present and contains the project's domain. 7 | -------------------------------------------------------------------------------- /src/assets/js/drilldown.js: -------------------------------------------------------------------------------- 1 | /* ========================================================== 2 | * drilldown.js 3 | * Drilldown plugin scripts. For page-list-nav element 4 | * 5 | * Author: Toni Fisler, toni@antistatique.net 6 | * Date: 2014-05-30 09:02:09 7 | * 8 | * Copyright 2014 Federal Chancellery of Switzerland 9 | * Licensed under MIT 10 | ========================================================== */ 11 | 12 | (function($) { 13 | 'use strict'; 14 | 15 | var options = { 16 | event: 'click', // * View note below 17 | selector: 'a', // * View note below 18 | speed: 100, 19 | cssClass: { 20 | container: 'drilldown-container', 21 | root: 'nav-page-list', 22 | sub: 'drilldown-sub', 23 | back: 'drilldown-back' 24 | } 25 | }; 26 | 27 | $('.drilldown').drilldown(options); 28 | 29 | }) (jQuery); 30 | -------------------------------------------------------------------------------- /src/materials/01-layout/03-tables/15-table-ruled.html: -------------------------------------------------------------------------------- 1 | --- 2 | title: layout.tables.table-ruled.title 3 | help: layout.tables.table-ruled.help 4 | release: layout.tables.table-ruled.release 5 | label: flex 6 | --- 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 |
    Contact
    NameE-mail
    Hans Musterhans.muster@mail.com
    Hans Musterhans.muster@mail.com
    Hans Musterhans.muster@mail.com
    31 | -------------------------------------------------------------------------------- /src/assets/sass/components/modal.scss: -------------------------------------------------------------------------------- 1 | /* ========================================================== 2 | * modal.scss 3 | * Modal style 4 | * 5 | * Author: Yann, yann@antistatique.net 6 | * Date: 2014-05-15 10:26:37 7 | * 8 | * Copyright 2014 Federal Chancellery of Switzerland 9 | * Licensed under MIT 10 | ========================================================== */ 11 | 12 | .close { 13 | color: $cerulean; 14 | font-size: 0.8125rem; 15 | opacity: 1; 16 | text-shadow: 0 0 0 rgba(0, 0, 0, 0); 17 | 18 | &:hover { 19 | opacity: 1; 20 | color: $cerulean; 21 | } 22 | } 23 | 24 | .modal-content { 25 | border: none; 26 | border-radius: 0; 27 | } 28 | 29 | .modal-header, 30 | .modal-footer { 31 | border: none; 32 | } 33 | 34 | .modal-header .close { 35 | margin-top: 10px; 36 | } 37 | 38 | .modal-open { 39 | padding-right: 0px!important; 40 | } 41 | -------------------------------------------------------------------------------- /src/assets/sass/components/news-feed.scss: -------------------------------------------------------------------------------- 1 | /* ========================================================== 2 | * news-feed.scss 3 | * News Feed component 4 | * 5 | * Author: Toni Fisler, toni@antistatique.net 6 | * Date: 2014-05-20 16:17:03 7 | * 8 | * Copyright 2014 Federal Chancellery of Switzerland 9 | * Licensed under MIT 10 | ========================================================== */ 11 | 12 | .news-feed { 13 | .scroll-y { 14 | max-height: 330px !important; // MUST be of this size max. 15 | overflow-y: auto; 16 | } 17 | .list-group-header { 18 | margin-bottom: 0; 19 | } 20 | .list-group-item { 21 | padding: 5px 0; 22 | @media only screen and (min-width: $screen-sm-min) and (max-width: $screen-sm-max) { 23 | @include make-sm-column(3); 24 | } 25 | } 26 | .list-group-item:last-child { 27 | border-bottom: none; 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /src/materials/03-content/04-functions/01-print.html: -------------------------------------------------------------------------------- 1 | --- 2 | title: content.functions.print.title 3 | help: content.functions.print.help 4 | release: content.functions.print.release 5 | label: flex 6 | --- 7 | 8 | 9 | 10 | 11 | 12 |
    13 |

    We only want to print this

    14 |

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos labore non cum eligendi cumque, ipsa, repudiandae consequatur aut ducimus, molestiae nesciunt consectetur laborum pariatur accusamus in aspernatur quod quae possimus!

    15 |
    16 | -------------------------------------------------------------------------------- /src/assets/sass/layout/titles.scss: -------------------------------------------------------------------------------- 1 | /* ========================================================== 2 | * titles.scss 3 | * Global titles styles 4 | * 5 | * Author: Yann Gouffon, yann@antistatique.net 6 | * Date: 2014-04-28 17:17:40 7 | * 8 | * Copyright 2014 Federal Chancellery of Switzerland 9 | * Licensed under MIT 10 | =========================================================== */ 11 | 12 | h1 { 13 | font-weight: 100; 14 | } 15 | 16 | h4 { 17 | font-weight: 700; 18 | } 19 | 20 | h1, h2, h3, h4, h5, h6 { 21 | a { 22 | line-height: 1; 23 | font-size: 1em; 24 | padding: 0; 25 | margin: 0; 26 | } 27 | } 28 | 29 | // Responsive behaviour 30 | @media only screen and (max-width: $screen-md-max) { 31 | h1 {font-size: 2.3rem;} 32 | } 33 | @media only screen and (max-width: $screen-sm-max) { 34 | h1 {font-size: 2rem;} 35 | h2 {font-size: 1.5rem;} 36 | h3 {font-size: 1.3rem;} 37 | } 38 | 39 | 40 | .page-title { 41 | margin: .4em 1.6em 0 0; 42 | } 43 | -------------------------------------------------------------------------------- /src/materials/03-content/05-teaser/09-person-teaser.html: -------------------------------------------------------------------------------- 1 | --- 2 | title: content.teaser.person-teaser.title 3 | help: content.teaser.person-teaser.help 4 | release: content.teaser.person-teaser.release 5 | label: flex 6 | --- 7 | 8 |
    9 |
    10 | 11 |
    12 | Image description 13 |
    14 |

    Title in H3

    15 |

    16 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Utilitatis causa amicitia est quaesita. Deinde qui fit, ut ego nesciam, sciant omnes, quicumque Epicurei esse voluerunt? Ut in geometria, prima si dederis, danda sunt omnia. Sed mehercule pergrata. 17 |

    18 | 23 |
    24 |
    25 | 26 |
    27 |
    28 | -------------------------------------------------------------------------------- /src/materials/02-navigation/02-header/02-accessibility-navigation.html: -------------------------------------------------------------------------------- 1 | --- 2 | title: navigation.header.accessibility-navigation.title 3 | help: navigation.header.accessibility-navigation.help 4 | release: navigation.header.accessibility-navigation.release 5 | expanded: true 6 | --- 7 | 8 | 23 | -------------------------------------------------------------------------------- /src/assets/js/global-nav.js: -------------------------------------------------------------------------------- 1 | /* ========================================================== 2 | * global-nav.js 3 | * Global Navigation syripts 4 | * 5 | * Author: Toni Fisler, toni@antistatique.net 6 | * Date: 2014-05-27 16:36:15 7 | * 8 | * Copyright 2014 Federal Chancellery of Switzerland 9 | * Licensed under MIT 10 | ========================================================== */ 11 | 12 | (function($) { 13 | 'use strict'; 14 | 15 | // Handle scroll to position nav as fixed 16 | 17 | var top = 36; 18 | 19 | $(window).scroll(function () { 20 | 21 | var y = $(this).scrollTop(); 22 | 23 | if (y >= top) { 24 | if (!$('.nav-mobile').hasClass('fixed')) { 25 | $('.nav-mobile').addClass('fixed') 26 | .after(''); 27 | } 28 | } 29 | else { 30 | if ($('.nav-mobile').hasClass('fixed')) { 31 | $('.nav-mobile').removeClass('fixed'); 32 | $('#spacer').remove(); 33 | } 34 | } 35 | 36 | }); 37 | }) (jQuery); 38 | -------------------------------------------------------------------------------- /src/materials/03-content/08-ordering-checkout/01-one-line-order-form.html: -------------------------------------------------------------------------------- 1 | --- 2 | title: content.ordering-checkout.one-line-order-form.title 3 | help: content.ordering-checkout.one-line-order-form.help 4 | --- 5 |
    6 | 7 |
    8 | Compact form on one line 9 | 10 | 11 |
    12 | 13 | 14 |
    15 | 16 | 17 |
    18 | 19 | 24 |
    25 | 26 | 27 | 28 |
    29 |
    30 | -------------------------------------------------------------------------------- /src/assets/sass/layout/checkboxes.scss: -------------------------------------------------------------------------------- 1 | /* ========================================================== 2 | * checkboxes.scss 3 | * Custom checkbox styles 4 | * 5 | * Author: Yann Gouffon, yann@antistatique.net 6 | * Date: 2014-04-28 17:17:40 7 | * 8 | * Copyright 2014 Federal Chancellery of Switzerland 9 | * Licensed under MIT 10 | =========================================================== */ 11 | 12 | .checkbox input[type=checkbox], 13 | .checkbox-inline input[type=checkbox], 14 | .radio input[type=checkbox], 15 | .radio input[type=radio], 16 | .radio-inline input[type=radio] { 17 | margin-left: 0; 18 | } 19 | 20 | .checkbox { 21 | label { 22 | position: relative; 23 | } 24 | } 25 | 26 | .checkbox--left { 27 | label { 28 | padding-left: 24px; 29 | padding-right: 0; 30 | } 31 | input { 32 | @include form-button(left); 33 | } 34 | } 35 | 36 | .checkbox--right { 37 | label { 38 | padding-right: 24px; 39 | padding-left: 0; 40 | } 41 | input { 42 | @include form-button(right); 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /src/materials/02-navigation/02-header/05-language-selector.html: -------------------------------------------------------------------------------- 1 | --- 2 | title: navigation.header.language-selector.title 3 | help: navigation.header.language-selector.help 4 | release: navigation.header.language-selector.release 5 | label: cd 6 | --- 7 | 8 |
    9 |
    10 |

    Language selection

    11 | 20 |
    21 | 22 | {{> general.logo}} 23 |
    24 | 25 | -------------------------------------------------------------------------------- /src/assets/sass/components/alerts.scss: -------------------------------------------------------------------------------- 1 | /* ========================================================== 2 | * alerts.scss 3 | * Alert element styles 4 | * 5 | * Author: Yann Gouffon, yann@antistatique.net 6 | * Date: 2014-04-30 09:38:36 7 | * 8 | * Copyright 2014 Federal Chancellery of Switzerland 9 | * Licensed under MIT 10 | =========================================================== */ 11 | 12 | .alert { 13 | border: none; 14 | padding-left: 55px; 15 | position: relative; 16 | 17 | &:before { 18 | @extend .glyphicon; 19 | position: absolute; 20 | left: 17px; 21 | top: 15px; 22 | font-size: 1.5em; 23 | } 24 | 25 | &.alert-success:before { 26 | @extend .glyphicon-ok; 27 | top: 13px; 28 | } 29 | &.alert-info:before { 30 | @extend .glyphicon-info-sign; 31 | } 32 | &.alert-warning:before { 33 | font-family: $admin-icons; 34 | content: get-font-icon('exclam'); 35 | top: 15px; 36 | left: 23px; 37 | } 38 | &.alert-danger:before { 39 | @extend .glyphicon-remove; 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /src/materials/02-navigation/01-hierarchical-navigation/02-breadcrumb.html: -------------------------------------------------------------------------------- 1 | --- 2 | title: navigation.hierarchical-navigation.breadcrumb.title 3 | help: navigation.hierarchical-navigation.breadcrumb.help 4 | release: navigation.hierarchical-navigation.breadcrumb.release 5 | label: fix 6 | --- 7 | 8 |

    Breadcrumbs

    9 | 18 | -------------------------------------------------------------------------------- /src/views/layouts/includes/f-footer.html: -------------------------------------------------------------------------------- 1 | 28 | -------------------------------------------------------------------------------- /src/views/layouts/includes/f-item.html: -------------------------------------------------------------------------------- 1 |
    2 | 3 |
    4 |

    {{t data.title}}

    5 | 6 | {{#if data.label}} 7 | {{toUpperCase data.label}} 8 | {{/if}} 9 | 10 | 19 |
    {{> f-item-content this}} 20 | 21 |
    22 | -------------------------------------------------------------------------------- /src/assets/sass/components/social-sharing.scss: -------------------------------------------------------------------------------- 1 | .social-sharing { 2 | 3 | a { 4 | text-decoration: none; 5 | } 6 | 7 | .social-sharing-twitter:after, 8 | .social-sharing-facebook:after, 9 | .social-sharing-google:after, 10 | .social-sharing-xing:after, 11 | .social-sharing-linkedin:after { 12 | display: inline-block; 13 | content: ''; 14 | height: 16px; 15 | width: 16px; 16 | background-size: 16px; 17 | cursor: pointer; 18 | } 19 | 20 | .social-sharing-twitter:after { 21 | background-image: url(../img/social-sharing-twitter.png); 22 | } 23 | 24 | .social-sharing-facebook:after { 25 | background-image: url(../img/social-sharing-facebook.png); 26 | } 27 | 28 | .social-sharing-google:after { 29 | background-image: url(../img/social-sharing-google.png); 30 | } 31 | 32 | .social-sharing-xing:after { 33 | background-image: url(../img/social-sharing-xing.png); 34 | } 35 | 36 | .social-sharing-linkedin:after { 37 | background-image: url(../img/social-sharing-linkedin.png); 38 | } 39 | 40 | } 41 | -------------------------------------------------------------------------------- /src/assets/fabricator/scripts/components.js: -------------------------------------------------------------------------------- 1 | /** 2 | * This file contains all the JavaScript code required 3 | * to make components work correctly in the style guide 4 | * 5 | * Please prefix each piece of code with the 6 | * component name 7 | */ 8 | (function($) { 9 | 10 | 'use strict'; 11 | 12 | /** 13 | * Component 14 | * FORMS 15 | */ 16 | if ($(window).width() > 767) { 17 | 18 | $('[type=date]').each(function(){ 19 | var picker = new Pikaday({ 20 | field: $(this)[0], 21 | firstDay: 1, 22 | theme: 'admin-theme', 23 | i18n: { 24 | previousMonth : 'Previous Month', 25 | nextMonth : 'Next Month', 26 | months : ['January','February','March','April','May','June','July','August','September','October','November','December'], 27 | weekdays : ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'], 28 | weekdaysShort : ['Sun','Mon','Tue','Wed','Thu','Fri','Sat'] 29 | } 30 | }); 31 | }); 32 | 33 | } 34 | 35 | })(jQuery); 36 | -------------------------------------------------------------------------------- /src/assets/img/swiss.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 10 | 12 | 13 | -------------------------------------------------------------------------------- /src/materials-data/javascripts/forms.js: -------------------------------------------------------------------------------- 1 | // Code duplicated in footer to make the datepicker work in the styleguide 2 | // Load Pikaday on date fields 3 | if ($(window).width() > 767) { 4 | 5 | $('[type=date]').each(function(){ 6 | // We need to change to type text to be able to write in another format 7 | // Just uncomment the following line: 8 | // $(this).prop('type', 'text'); 9 | 10 | var picker = new Pikaday({ 11 | field: $(this)[0], 12 | format: 'YYYY-MM-DD', // must be a input[type=text] to change this, see above 13 | firstDay: 1, // sets monday as first day 14 | theme: 'admin-theme', 15 | i18n: { 16 | previousMonth : 'Previous Month', 17 | nextMonth : 'Next Month', 18 | months : ['January','February','March','April','May','June','July','August','September','October','November','December'], 19 | weekdays : ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'], 20 | weekdaysShort : ['Sun','Mon','Tue','Wed','Thu','Fri','Sat'] 21 | } 22 | }); 23 | }); 24 | 25 | } 26 | -------------------------------------------------------------------------------- /src/materials/02-navigation/02-header/04-site-search.html: -------------------------------------------------------------------------------- 1 | --- 2 | title: navigation.header.site-search.title 3 | help: navigation.header.site-search.help 4 | release: navigation.header.site-search.release 5 | javascript: site-search.js 6 | complement: site-search.html 7 | label: cd 8 | --- 9 | 10 |
    11 | {{> general.logo}} 12 |
    13 |
    14 |

    Search

    15 | 16 | 17 | 20 | Search 21 |
    22 |
    23 |
    24 |
    25 |
    26 |
    27 | 28 | -------------------------------------------------------------------------------- /src/assets/sass/components/breadcrumb.scss: -------------------------------------------------------------------------------- 1 | /* ========================================================== 2 | * breadcrumb.scss 3 | * Breadcrumb styles 4 | * 5 | * Author: Yann Gouffon, yann@antistatique.net 6 | * Date: 2014-04-29 14:21:47 7 | * 8 | * Copyright 2014 Federal Chancellery of Switzerland 9 | * Licensed under MIT 10 | =========================================================== */ 11 | 12 | .breadcrumb { 13 | margin: 0; 14 | li {margin: 0;} 15 | li + li:before { content: none; } 16 | .icon {margin: 0 10px;} 17 | a { 18 | font-size: 0.85em; 19 | margin-top: 0; 20 | } 21 | span.icon { 22 | position: relative; 23 | top: 2px; 24 | } 25 | li.active { 26 | color: $coal; 27 | font-size: 0.935em 28 | } 29 | &.breadcrumb--search { 30 | margin: 0.8em 0; 31 | @media only screen and (max-width: $screen-xs-max) { 32 | font-size: 0.7em; 33 | li {margin: 0;} 34 | .icon {margin: 0 3px;} 35 | } 36 | } 37 | @media only screen and (max-width: $screen-sm-max) { 38 | &:not(.breadcrumb--search) { 39 | display: none; 40 | } 41 | } 42 | } 43 | 44 | -------------------------------------------------------------------------------- /src/assets/js/treecrumb.js: -------------------------------------------------------------------------------- 1 | /* ========================================================== 2 | * treecrumb.js 3 | * Change icon class to change the caret direction 4 | * 5 | * Author: Yann Gouffon, yann@antistatique.net 6 | * Date: 2014-05-01 11:11:33 7 | * 8 | * Copyright 2014 Federal Chancellery of Switzerland 9 | * Licensed under MIT 10 | ========================================================== */ 11 | 12 | (function($) { 13 | 'use strict'; 14 | 15 | $('.treecrumb').each(function() { 16 | var $that = $(this); 17 | $that.on('hide.bs.dropdown', function() { 18 | $that.find('.dropdown-toggle span').removeClass('icon--bottom'); 19 | $that.find('.dropdown-toggle span').addClass('icon--right'); 20 | }); 21 | $that.on('show.bs.dropdown', function(e) { 22 | var target = e.relatedTarget; 23 | $that.find('.dropdown-toggle span').removeClass('icon--bottom'); 24 | $that.find('.dropdown-toggle span').addClass('icon--right'); 25 | $(target).find('span').removeClass('icon--right'); 26 | $(target).find('span').addClass('icon--bottom'); 27 | }); 28 | }); 29 | 30 | }) (jQuery); 31 | -------------------------------------------------------------------------------- /src/assets/sass/components/well.scss: -------------------------------------------------------------------------------- 1 | /* ========================================================== 2 | * well.scss 3 | * Well class used for Info-box and other elements 4 | * 5 | * Author: Yann, yann@antistatique.net 6 | * Date: 2014-05-07 10:22:35 7 | * 8 | * Copyright 2014 Federal Chancellery of Switzerland 9 | * Licensed under MIT 10 | ========================================================== */ 11 | 12 | .bordered-well { 13 | border: 1px solid $silver; 14 | @media only screen and (max-width: $screen-sm-max) and (min-width: $screen-sm-min) { 15 | padding: 15px; 16 | background: $smoke; 17 | img { 18 | float: left; 19 | margin-right: 15px; 20 | margin-bottom: 15px; 21 | } 22 | } 23 | } 24 | 25 | .well { 26 | border: none; 27 | border-radius: 0; 28 | padding: 10px; 29 | margin: 0; 30 | box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); 31 | background: $smoke !important; 32 | &.well-freeboard { 33 | padding: 0; 34 | border: 1px solid $light-grey; 35 | } 36 | &.well-white { 37 | background: $white !important; 38 | } 39 | h2:first-child { 40 | margin-top: 0; 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /src/materials/02-navigation/04-footer/02-social-media.html: -------------------------------------------------------------------------------- 1 | --- 2 | title: navigation.footer.social-media.title 3 | help: navigation.footer.social-media.help 4 | release: navigation.footer.social-media.release 5 | label: fix 6 | --- 7 | 8 | 33 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2014 Federal Chancellery of Switzerland 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /src/assets/sass/components/select-multiple.scss: -------------------------------------------------------------------------------- 1 | /* ========================================================== 2 | * select-multiple.scss 3 | * Custom select multiple styles added after the chosen-theme 4 | * 5 | * Author: Adrian Pauli, apauli@puzzle.ch 6 | * Date: 2017-07-07 09:39:23 7 | * 8 | * Copyright 2017 Federal Chancellery of Switzerland 9 | * Licensed under MIT 10 | ========================================================== */ 11 | 12 | .chosen-container.chosen-container-multi { 13 | 14 | width: 100% !important; 15 | 16 | .chosen-choices { 17 | border-radius: 4px !important; 18 | } 19 | 20 | .chosen-drop, 21 | .chosen-drop .no-results { 22 | border-radius: 0 0 4px 4px !important; 23 | } 24 | 25 | .search-field { 26 | height: 27px; 27 | } 28 | 29 | } 30 | 31 | .chosen-container-active.chosen-container-multi { 32 | 33 | .chosen-choices { 34 | border-color: $coal; 35 | outline: 3px solid $coal; 36 | outline-offset: 1px; 37 | } 38 | 39 | .chosen-results { 40 | margin-top: -1px; 41 | } 42 | 43 | } 44 | 45 | .chosen-with-drop.chosen-container-multi { 46 | 47 | .chosen-choices { 48 | border-radius: 4px 4px 0 0 !important; 49 | } 50 | 51 | } 52 | -------------------------------------------------------------------------------- /src/assets/sass/components/emergency.scss: -------------------------------------------------------------------------------- 1 | /* ========================================================== 2 | * emergency.scss 3 | * Emergency alert styles 4 | * 5 | * Author: Toni Fisler, toni@antistatique.net 6 | * Date: 2014-05-01 09:23:36 7 | * 8 | * Copyright 2014 Federal Chancellery of Switzerland 9 | * Licensed under MIT 10 | =========================================================== */ 11 | 12 | .alert--emergency { 13 | background-color: $mocassin; 14 | border-left: 40px solid $venetian-red; 15 | border-radius: 0; 16 | padding-left: 15px; 17 | 18 | &:before { 19 | display: block; 20 | position: absolute; 21 | top: 14px; 22 | left: -30px; 23 | width: 40px; 24 | height: auto; 25 | color: $white; 26 | font-family: $admin-icons; 27 | content: get-font-icon('exclam'); 28 | font-size: 2em; 29 | padding-left: 5px; 30 | } 31 | 32 | h3 { 33 | margin-top: 0; 34 | font-weight: 700; 35 | } 36 | 37 | p { 38 | margin-top: 0; 39 | } 40 | 41 | @media only screen and (max-width: $screen-xs-max) { 42 | border-left-width: 20px; 43 | padding-left: 5px; 44 | 45 | &:before { 46 | left: -20px; 47 | width: 20px; 48 | } 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /src/materials/02-navigation/03-content-navigation/01-pagination.html: -------------------------------------------------------------------------------- 1 | --- 2 | title: navigation.content-navigation.pagination.title 3 | help: navigation.content-navigation.pagination.help 4 | release: navigation.content-navigation.pagination.release 5 | label: flex 6 | --- 7 | 8 | 31 | -------------------------------------------------------------------------------- /src/assets/sass/components/list-group.scss: -------------------------------------------------------------------------------- 1 | /* ========================================================== 2 | * list-group.scss 3 | * List group widget 4 | * 5 | * Author: Yann, yann@antistatique.net 6 | * Date: 2014-05-07 11:13:50 7 | * 8 | * Copyright 2014 Federal Chancellery of Switzerland 9 | * Licensed under MIT 10 | ========================================================== */ 11 | 12 | .list-group { 13 | h2 { 14 | font-weight: 700; 15 | font-size: 1.3em; 16 | } 17 | } 18 | 19 | .list-group-header { 20 | min-height: 30px; 21 | border-bottom: 2px solid $silver; 22 | margin-bottom: 10px; 23 | 24 | h1, h2, h3, h4, h5, h6 { 25 | margin: 0; 26 | } 27 | 28 | .pull-right { 29 | padding-top: 3px; 30 | } 31 | 32 | &:after { 33 | content: ' '; 34 | clear: both; 35 | display: block; 36 | } 37 | } 38 | 39 | .list-group-item, .list-group-item:last-child { 40 | border: none; 41 | border-bottom: 1px solid $silver; 42 | border-radius: 0px; 43 | padding: 10px 0; 44 | margin-bottom: 0; 45 | 46 | a, 47 | p { 48 | font-size: 1rem; 49 | } 50 | 51 | &:after { 52 | content: '\00a0'; 53 | display: block; 54 | height: 0px; 55 | overflow: hidden; 56 | clear: both; 57 | } 58 | } 59 | -------------------------------------------------------------------------------- /src/materials/01-layout/03-tables/01-table-standard.html: -------------------------------------------------------------------------------- 1 | --- 2 | title: layout.tables.table-standard.title 3 | help: layout.tables.table-standard.help 4 | release: layout.tables.table-standard.release 5 | label: flex 6 | --- 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 |
    Game animals shot in Switzerland
    2000201020112012
    Boars4'1607'6474'72610'650
    Chamois16'62513'42713'41313'350
    Fox42'22131'04427'09435'616
    2000201020112012
    52 | -------------------------------------------------------------------------------- /src/materials/01-layout/03-tables/05-table-zebra.html: -------------------------------------------------------------------------------- 1 | --- 2 | title: layout.tables.table-zebra.title 3 | help: layout.tables.table-zebra.help 4 | release: layout.tables.table-zebra.release 5 | label: flex 6 | --- 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 |
    Game animals shot in Switzerland
    2000201020112012
    Boars4'1607'6474'72610'650
    Chamois16'62513'42713'41313'350
    Fox42'22131'04427'09435'616
    2000201020112012
    52 | -------------------------------------------------------------------------------- /src/materials/01-layout/04-typography/02-paragraphs.html: -------------------------------------------------------------------------------- 1 | --- 2 | title: layout.typography.paragraphs.title 3 | help: layout.typography.paragraphs.help 4 | label: cd 5 | --- 6 | 7 |

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae, reprehenderit, quas, facere, placeat eveniet quia consequuntur est sint necessitatibus at perferendis modi. Officiis, mollitia deleniti nostrum. Temporibus, architecto fugit eveniet.

    8 | 9 |

    Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. Nulla fringilla, orci ac euismod semper, magna diam porttitor mauris, quis sollicitudin sapien justo in libero. Vestibulum mollis mauris enim. Morbi euismod magna ac lorem.

    10 | 11 |

    Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed molestie augue sit amet leo consequat posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor dui.

    12 | -------------------------------------------------------------------------------- /src/materials/01-layout/03-tables/13-table-sortable.html: -------------------------------------------------------------------------------- 1 | --- 2 | title: layout.tables.table-sortable.title 3 | help: layout.tables.table-sortable.help 4 | release: layout.tables.table-sortable.release 5 | label: flex 6 | --- 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 |
    Game animals shot in Switzerland
    2000201020112012
    Boars4'1607'6474'72610'650
    Chamois16'62513'42713'41313'350
    Fox42'22131'04427'09435'616
    2000201020112012
    52 | -------------------------------------------------------------------------------- /src/assets/js/autocomplete.js: -------------------------------------------------------------------------------- 1 | /* ========================================================== 2 | * autocomplete.js 3 | * Deal with the Typeahead.js/Bloodhound library to build the search field autocomplete 4 | * 5 | * Author: Yann, yann@antistatique.net 6 | * Date: 2014-05-01 14:23:18 7 | * 8 | * Copyright 2014 Federal Chancellery of Switzerland 9 | * Licensed under MIT 10 | ========================================================== */ 11 | 12 | (function($, data) { 13 | 'use strict'; 14 | 15 | var $searchFields = $('.form-search .search-field'); 16 | if (data) { 17 | // Init the Bloodhound suggestion engine 18 | var bloodhound = new Bloodhound({ 19 | datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'), 20 | queryTokenizer: Bloodhound.tokenizers.whitespace, 21 | local: $.map(data, function(state) { return { value: state }; }) 22 | }); 23 | bloodhound.initialize(); 24 | 25 | // Init Typeahead on search-fields 26 | $searchFields.typeahead({ 27 | hint: false, 28 | highlight: true, 29 | minLength: 1 30 | }, 31 | { 32 | name: 'search', 33 | displayKey: 'value', 34 | source: bloodhound.ttAdapter() 35 | }); 36 | } 37 | 38 | }) (jQuery, (typeof searchData === 'undefined' ? false : searchData)); 39 | -------------------------------------------------------------------------------- /src/assets/js/outline.js: -------------------------------------------------------------------------------- 1 | // OUTLINE.JS 2 | // https://github.com/lindsayevans/outline.js 3 | // 4 | // Based on http://www.paciellogroup.com/blog/2012/04/how-to-remove-css-outlines-in-an-accessible-manner/ 5 | // 6 | // Hide outline on mouse interactions 7 | // Show it on keyboard interactions 8 | (function(doc){ 9 | 10 | 'use strict'; 11 | 12 | var styleElement = doc.createElement('STYLE'), 13 | domEvents = 'addEventListener' in doc, 14 | addListener = function(type, callback){ 15 | // Basic cross-browser event handling 16 | if (domEvents) { 17 | doc.addEventListener(type, callback); 18 | } else { 19 | doc.attachEvent('on' + type, callback); 20 | } 21 | }, 22 | setCSS = function(cssText){ 23 | !!styleElement.styleSheet ? styleElement.styleSheet.cssText = cssText : styleElement.innerHTML = cssText; 24 | }; 25 | 26 | doc.getElementsByTagName('HEAD')[0].appendChild(styleElement); 27 | 28 | // Using mousedown instead of mouseover, so that previously focused elements don't lose focus ring on mouse move 29 | addListener('mousedown', function(){ 30 | setCSS(':focus{outline:0!important}::-moz-focus-inner{border:0!important}'); 31 | }); 32 | 33 | addListener('keydown', function(){ 34 | setCSS(''); 35 | }); 36 | 37 | })(document); 38 | -------------------------------------------------------------------------------- /src/materials/01-layout/03-tables/09-table-highlight.html: -------------------------------------------------------------------------------- 1 | --- 2 | title: layout.tables.table-highlight.title 3 | help: layout.tables.table-highlight.help 4 | release: layout.tables.table-highlight.release 5 | label: flex 6 | --- 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 |
    Game animals shot in Switzerland
    2000201020112012
    Boars4'1607'6474'72610'650
    Chamois16'62513'42713'41313'350
    Fox42'22131'04427'09435'616
    2000201020112012
    52 | -------------------------------------------------------------------------------- /HOWTO.md: -------------------------------------------------------------------------------- 1 | # How to use in your project 2 | 3 | The styleguide is a NPM package that can be simply included in your dependencies and from which you can fetch the built styles and scripts. This way, you can ensure a better maintanability and update when needed without any hassle. 4 | 5 | ## Install 6 | 7 | First, make sure you have [Node.js](http://nodejs.org/) installed: we'll be using the `$ npm` command. To install Node.js, download and run the installer you'll find on [their homepage](http://nodejs.org/). 8 | 9 | If you want to import all files without getting them through your personnal task runner (gulp/grunt/other...) 10 | 11 | ``` 12 | $ npm install swiss-styleguide --save 13 | ``` 14 | 15 | Or if you plan to compile all the dependencies with your task runner and therefore only need to add the component as a development dependency 16 | 17 | ``` 18 | $ npm install swiss-styleguide --save-dev 19 | ``` 20 | 21 | Now you basically need to import all the CSS & JavaScript files placed in the `build` folder. If you want to build them on your own, you should look for files in the `src` folder. 22 | 23 | ## Report issues 24 | 25 | You should **never** alter anything in the project folder. If you find any bugs, [create an issue on the official repository] (https://github.com/swiss/styleguide/issues). Make sure that the issue doesn't already exist before posting. 26 | -------------------------------------------------------------------------------- /src/assets/sass/layout/layout.scss: -------------------------------------------------------------------------------- 1 | /* ========================================================== 2 | * layout.scss 3 | * Global layout definition 4 | * 5 | * Author: Yann Gouffon, yann@antistatique.net 6 | * Date: 2014-04-28 17:17:40 7 | * 8 | * Copyright 2014 Federal Chancellery of Switzerland 9 | * Licensed under MIT 10 | =========================================================== */ 11 | 12 | body, 13 | html { 14 | width: 100%; 15 | overflow-x: hidden; 16 | } 17 | 18 | body, 19 | .body { 20 | position: relative; 21 | background: url('../img/bg-striped.png') repeat; 22 | } 23 | 24 | body { 25 | min-height: 100vh; 26 | } 27 | 28 | .overlay { 29 | content: ' '; 30 | display: none; 31 | position: fixed; 32 | top: 0; 33 | bottom: 0; 34 | left: 0; 35 | right: 0; 36 | background: url('../img/overlay.png') repeat; 37 | z-index: 999; 38 | } 39 | 40 | .container-main { 41 | padding: 0; 42 | background: $white; 43 | margin-top: 0; 44 | box-shadow: 0 0 60px 0 rgba(0, 0, 0, 0.6); 45 | @media only screen and (min-width: $screen-sm-min) { 46 | margin-bottom: 90px; 47 | } 48 | } 49 | 50 | .container-fluid h1:first-child { 51 | margin-top: 0; 52 | } 53 | 54 | hr { 55 | margin: 1px; 56 | border: none; 57 | height: 1px; 58 | background: $light-grey; 59 | } 60 | 61 | div[class*=col-] { 62 | margin-bottom: 2em; 63 | } 64 | -------------------------------------------------------------------------------- /src/assets/sass/layout/brand.scss: -------------------------------------------------------------------------------- 1 | /* ========================================================== 2 | * brand.scss 3 | * Brand and logo display styles 4 | * 5 | * Author: Yann Gouffon, yann@antistatique.net 6 | * Date: 2014-04-28 17:17:40 7 | * 8 | * Copyright 2014 Federal Chancellery of Switzerland 9 | * Licensed under MIT 10 | =========================================================== */ 11 | 12 | .brand { 13 | float: left; 14 | width: 570px; // Fix float issue with Firefox 15 | 16 | @media only screen and (max-width: $screen-sm-max) { 17 | width: 470px; 18 | } 19 | 20 | img { 21 | max-width: 252px; 22 | height: auto; 23 | 24 | @media only screen and (max-width: $screen-sm-max) { 25 | max-height: 50px; 26 | } 27 | 28 | margin: 0; 29 | padding-right: 2em; 30 | border-right: 1px solid $gainsboro; 31 | float: left; 32 | } 33 | 34 | h1 { 35 | color: $black; 36 | font-weight: 700; 37 | font-size: 1em; 38 | max-width: 310px; 39 | 40 | line-height: 1.3; 41 | margin: 0; 42 | padding-left: 2.5em; 43 | float: left; 44 | 45 | @media only screen and (max-width: $screen-md-max) { 46 | font-size: 0.85em; 47 | } 48 | 49 | @media only screen and (max-width: $screen-sm-max) { 50 | max-width: 210px; 51 | } 52 | } 53 | 54 | &:hover { 55 | text-decoration: none; 56 | } 57 | } 58 | -------------------------------------------------------------------------------- /src/assets/fabricator/styles/objects/_code-block.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Component 3 | * CODE BLOCK 4 | */ 5 | 6 | .code-block { 7 | background: #1e221d; 8 | color: $white; 9 | font-size: 0.9375rem; 10 | line-height: 1.6em; 11 | margin: 15px 0 30px; 12 | position: relative; 13 | width: auto; 14 | 15 | &.collapse.in, 16 | &.collapsing { 17 | margin-left: 0; 18 | } 19 | 20 | &:after { 21 | content: 'HTML'; 22 | position: absolute; 23 | top: 0; 24 | left: 0; 25 | color: $silver; 26 | border-right: 1px solid $silver; 27 | border-bottom: 1px solid $silver; 28 | border-bottom-right-radius: 4px; 29 | padding: 5px 8px; 30 | display: inline-block; 31 | font-family: $mainFont; 32 | } 33 | 34 | &.js-example:after { 35 | content: 'JavaScript'; 36 | } 37 | 38 | pre, 39 | code { 40 | font-family: $codeFont; 41 | width: auto; 42 | background: #1e221d; 43 | word-break: keep-all; 44 | word-wrap: normal; 45 | white-space:pre; 46 | margin: 0; 47 | padding: 0; 48 | font-size: inherit; 49 | position: relative; 50 | line-height: 1.6em; 51 | color: $white; 52 | border: none; 53 | overflow: visible; 54 | } 55 | 56 | pre { 57 | padding: 50px 4% 40px; 58 | overflow-x: auto; 59 | } 60 | 61 | @media only screen and (max-width: 900px) { 62 | padding: 50px 10px; 63 | } 64 | } 65 | -------------------------------------------------------------------------------- /src/views/layouts/includes/f-item-content.html: -------------------------------------------------------------------------------- 1 | {{#if data.release}} 2 | 7 | {{/if}} 8 | 9 | {{#if data.help}} 10 | {{{t data.help markdown=true}}} 11 | {{/if}} 12 | 13 | {{#unless data.empty}} 14 |
    15 |
    16 | {{{material @key @root}}} 17 |
    18 | 19 |
    20 | 21 |
    22 | 
    {{material @key @root}}
    23 |
    24 | {{/unless}} 25 | 26 | {{#if data.javascript}} 27 |
    28 | 
    {{renderFile 'javascripts/' data.javascript}}
    29 |
    30 | {{/if}} 31 | 32 | {{#if data.complement}} 33 | {{{renderFile 'complements/' data.complement}}} 34 | {{/if}} 35 | -------------------------------------------------------------------------------- /src/materials/03-content/06-multimedia/03-lightbox.html: -------------------------------------------------------------------------------- 1 | --- 2 | title: content.multimedia.lightbox.title 3 | help: content.multimedia.lightbox.help 4 | translation: true 5 | label: flex 6 | --- 7 | 8 |
    9 |
    10 |
    11 | 12 |
    13 | image description 14 |
    Caption content
    15 |
    16 |     17 |
    18 |
    19 |
    20 | 21 | 37 | -------------------------------------------------------------------------------- /src/assets/sass/components/mega-menu.scss: -------------------------------------------------------------------------------- 1 | /* ========================================================== 2 | * mega-menu.scss 3 | * Description 4 | * 5 | * Author: Yann Gouffon, yann@antistatique.net 6 | * Date: 2014-04-30 15:34:07 7 | * 8 | * Copyright 2014 Federal Chancellery of Switzerland 9 | * Licensed under MIT 10 | =========================================================== */ 11 | 12 | .yamm { 13 | display: block; 14 | min-height: 0; 15 | .no-ie & { 16 | z-index: 20; 17 | } 18 | .yamm-content {padding: 5px 20px 20px 20px !important;} 19 | .dropdown {margin-left: 0;} 20 | .dropdown-menu { 21 | width: 100%; 22 | border-radius: 0; 23 | border: none; 24 | box-shadow: 0 0 6px fade-out($black, 0.7); 25 | .ie8 &{ 26 | border: 1px solid $silver; 27 | border-top: none; 28 | } 29 | li {display: block;} 30 | } 31 | .dropdown-backdrop { 32 | display: none; 33 | } 34 | .no-ie &.nav-open { 35 | z-index: 9999; 36 | } 37 | } 38 | 39 | .yamm-close-bottom { 40 | position: absolute; 41 | bottom: 0; 42 | width: 100px; 43 | left: 50%; 44 | margin-left: -50px; 45 | background: $smoke; 46 | border-top: 1px solid $silver !important; 47 | border-left: 1px solid $silver; 48 | border-right: 1px solid $silver; 49 | border-bottom: 0; 50 | text-align: center; 51 | color: $coal; 52 | &:hover { 53 | color: $venetian-red; 54 | text-decoration: none; 55 | } 56 | .nav-page-list & { 57 | width: 100px; 58 | } 59 | } 60 | -------------------------------------------------------------------------------- /src/materials-data/complements/buttons.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 |
    ButtonsMarkup

    		<button type="button" class="btn">Unstyled</button>

    		<button type="button" class="btn btn-primary">Primary</button>

    		<button type="button" class="btn btn-secondary">Secondary</button>

    		<button type="button" class="btn" disabled>Disabled</button>

    		<button type="button" class="btn btn-link">Button link</button>
    28 | 29 |

    Print button

    30 | 31 |

    <button type="button" class="btn btn-link hidden-xs"><span class="icon icon--print"></span></button>

    32 | -------------------------------------------------------------------------------- /src/materials/03-content/08-ordering-checkout/02-shopping-cart.html: -------------------------------------------------------------------------------- 1 | --- 2 | title: content.ordering-checkout.shopping-cart.title 3 | help: content.ordering-checkout.shopping-cart.help 4 | release: content.ordering-checkout.shopping-cart.release 5 | --- 6 | 7 |
    8 |
    9 | 34 |
    35 |
    36 | -------------------------------------------------------------------------------- /src/assets/js/social-sharing.js: -------------------------------------------------------------------------------- 1 | (function($) { 2 | 'use strict'; 3 | 4 | $('a.social-sharing-facebook').click(function() { 5 | window.open( 6 | 'https://www.facebook.com/sharer/sharer.php?u=' + encodeURIComponent(location.href), 7 | 'facebook-share-dialog', 8 | 'width=626,height=436' 9 | ); 10 | return false; 11 | }); 12 | 13 | $('a.social-sharing-twitter').click(function() { 14 | window.open( 15 | 'http://twitter.com/share?url=' + encodeURIComponent(location.href), 16 | 'twitter-share-dialog', 17 | 'width=626,height=436' 18 | ); 19 | return false; 20 | }); 21 | 22 | $('a.social-sharing-google').click(function() { 23 | window.open( 24 | 'https://plus.google.com/share?url=' + encodeURIComponent(location.href), 25 | 'google-share-dialog', 26 | 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600' 27 | ); 28 | return false; 29 | }); 30 | 31 | $('a.social-sharing-xing').click(function() { 32 | window.open( 33 | 'https://www.xing.com/spi/shares/new?url=' + encodeURIComponent(location.href), 34 | 'xing-share-dialog', 35 | 'width=626,height=436' 36 | ); 37 | return false; 38 | }); 39 | 40 | $('a.social-sharing-linkedin').click(function() { 41 | window.open( 42 | 'https://www.linkedin.com/cws/share?url=' + encodeURIComponent(location.href), 43 | 'linkedin-share-dialog', 44 | 'width=626,height=436' 45 | ); 46 | return false; 47 | }); 48 | 49 | })(jQuery); 50 | -------------------------------------------------------------------------------- /src/materials/03-content/04-functions/03-downloading-files.html: -------------------------------------------------------------------------------- 1 | --- 2 | title: content.functions.downloading-files.title 3 | help: content.functions.downloading-files.help 4 | label: flex 5 | --- 6 | 7 |
    8 |
    9 | 10 |

    Download list (PDF)

    11 | 16 |
    17 |

    Download list (General document)

    18 | 23 | 24 |
    25 |
    26 | -------------------------------------------------------------------------------- /src/views/layouts/includes/f-menu-item.html: -------------------------------------------------------------------------------- 1 |
  • 2 | {{t @key 'title'}} 3 | 30 |
    • 31 | -------------------------------------------------------------------------------- /src/assets/sass/layout/lists.scss: -------------------------------------------------------------------------------- 1 | /* ========================================================== 2 | * lists.scss 3 | * List element styles 4 | * 5 | * Author: Yann Gouffon, yann@antistatique.net 6 | * Date: 2014-04-28 17:17:40 7 | * 8 | * Copyright 2014 Federal Chancellery of Switzerland 9 | * Licensed under MIT 10 | =========================================================== */ 11 | 12 | ul, ol, dl { 13 | font-size: 1em; 14 | line-height: 1.5; 15 | padding: 0 0 0 0.8em; 16 | } 17 | 18 | ul { 19 | list-style-type: square; 20 | 21 | ul { 22 | margin-top: 0; 23 | list-style-type: none; 24 | } 25 | } 26 | 27 | li { 28 | font-size: 1.1em; 29 | line-height: 1.5; 30 | margin-left: 0.8em; 31 | li {font-size: 1em;} 32 | } 33 | 34 | ol { 35 | list-style-type: decimal; 36 | ol {margin-top: 0;} 37 | } 38 | 39 | dl { 40 | margin: 1.5em 0 0 0; 41 | padding: 0; 42 | } 43 | 44 | .dl-horizontal { 45 | dt { 46 | width: 2em; 47 | text-align: left; 48 | } 49 | dd { 50 | margin-left: 3em; 51 | } 52 | @media (min-width: $grid-float-breakpoint) { 53 | dt { 54 | width: 2em; 55 | text-align: left; 56 | } 57 | dd { 58 | margin-left: 3em; 59 | } 60 | } 61 | } 62 | 63 | dt { 64 | @extend strong; 65 | } 66 | 67 | dd { 68 | margin: 0 0 0 40px; 69 | } 70 | 71 | dt, dd { 72 | font-size: 1.1em; 73 | dt, dd {font-size: 1em;} 74 | } 75 | 76 | .list-unstyled { 77 | margin: 0.8em 0; 78 | li { 79 | font-size: 1em; 80 | margin-left: 0; 81 | } 82 | } 83 | -------------------------------------------------------------------------------- /src/assets/js/subnavigation.js: -------------------------------------------------------------------------------- 1 | /* ========================================================== 2 | * subnavigation.js 3 | * Sub-navigation scripts, handles mainly how the nav-page-list behaves on small 4 | * screens 5 | * 6 | * Author: Toni Fisler, toni@antistatique.net 7 | * Date: 2014-09-24 10:18:19 8 | * 9 | * Copyright 2014 Federal Chancellery of Switzerland 10 | * Licensed under MIT 11 | ========================================================== */ 12 | 13 | (function($) { 14 | 'use strict'; 15 | 16 | subNavInit(jQuery); 17 | $(window).resize(function () { 18 | subNavInit(jQuery); 19 | }); 20 | 21 | $('a[href="#collapseSubNav"]').on('click', function() { 22 | $(this).attr('aria-expanded', ($(this).attr('aria-expanded') === 'true' ? 'false' : 'true') ); 23 | }); 24 | 25 | }) (jQuery); 26 | 27 | function subNavInit($) { 28 | 'use strict'; 29 | 30 | var $drilldown = $('.drilldown[class*=col-]'); 31 | var width = Math.max(window.innerWidth, $(window).width()); 32 | 33 | if (width <= 767 && !$drilldown.hasClass('collapse-enabled')) { 34 | $drilldown 35 | .addClass('collapse-enabled') 36 | .find('.drilldown-container') 37 | .addClass('collapse') 38 | .attr('id', 'collapseSubNav'); 39 | } else if (width > 767 && $drilldown.hasClass('collapse-enabled')) { 40 | $drilldown 41 | .removeClass('collapse-enabled') 42 | .find('.drilldown-container') 43 | .removeClass('collapse in') 44 | .attr('id', '') 45 | .css({ 46 | 'height': 'auto' 47 | }); 48 | } 49 | } 50 | -------------------------------------------------------------------------------- /src/materials/01-layout/03-tables/14-table-expandable.html: -------------------------------------------------------------------------------- 1 | --- 2 | title: layout.tables.table-expandable.title 3 | help: layout.tables.table-expandable.help 4 | release: layout.tables.table-expandable.release 5 | label: flex 6 | --- 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 |
    Game animals shot in Switzerland
    2000201020112012
    63'00652'11845'23359'616
    Boars4'1607'6474'72610'650
    Chamois16'62513'42713'41313'350
    Fox42'22131'04427'09435'616
    2000201020112012
    61 | -------------------------------------------------------------------------------- /src/assets/sass/components/carousel.scss: -------------------------------------------------------------------------------- 1 | /* ========================================================== 2 | * carousel.scss 3 | * Carousel component 4 | * 5 | * Author: Yann, yann@antistatique.net 6 | * Date: 2014-05-15 13:12:44 7 | * 8 | * Copyright 2014 Federal Chancellery of Switzerland 9 | * Licensed under MIT 10 | ========================================================== */ 11 | 12 | .carousel { 13 | border: 1px solid $silver; 14 | 15 | .item { 16 | padding: 10px; 17 | } 18 | } 19 | 20 | .carousel-control { 21 | height: 40px; 22 | 23 | bottom: auto; 24 | z-index: 1; 25 | 26 | color: $coal; 27 | font-size: $carousel-control-font-size; 28 | line-height: 40px; 29 | text-shadow: none; 30 | 31 | opacity: 1; 32 | 33 | &.right, 34 | &.left { 35 | width: 40px; 36 | background-image: none !important; 37 | background: none; 38 | filter: none; // fix for IE 39 | 40 | color: $coal; 41 | text-shadow: 0 0 0 rgba(0, 0, 0, 0); 42 | 43 | &.disabled { 44 | &, 45 | &:hover, 46 | &:focus { 47 | cursor: default; 48 | color: $gainsboro; 49 | } 50 | } 51 | 52 | &:hover, 53 | &:focus { 54 | opacity: 1; 55 | color: $venetian-red; 56 | } 57 | } 58 | 59 | &.left { 60 | left: 10px; 61 | } 62 | 63 | &.right { 64 | right: 10px; 65 | } 66 | } 67 | 68 | .carousel-indicators { 69 | margin-top: 12px; 70 | bottom: auto; 71 | 72 | li { 73 | border: none; 74 | background: $gainsboro; 75 | } 76 | 77 | .active { 78 | background: $venetian-red; 79 | } 80 | } 81 | -------------------------------------------------------------------------------- /src/assets/sass/components/pagination.scss: -------------------------------------------------------------------------------- 1 | /* ========================================================== 2 | * pagination.scss 3 | * Navigation handling pagination on contents 4 | * 5 | * Author: Toni Fisler, toni@antistatique.net 6 | * Date: 2014-05-01 11:22:48 7 | * 8 | * Copyright 2014 Federal Chancellery of Switzerland 9 | * Licensed under MIT 10 | ========================================================== */ 11 | 12 | .pagination-container { 13 | border-bottom: 1px solid $light-grey; 14 | padding: 10px 0; 15 | } 16 | .pagination-end { 17 | border-bottom: none; 18 | } 19 | .pagination { 20 | border-radius: 0; 21 | display: block; 22 | margin: 0; 23 | background: none; 24 | &:after { 25 | content: " "; 26 | display: table; 27 | clear: both; 28 | } 29 | ul { 30 | margin-right: 10px; 31 | } 32 | > li { 33 | margin-left: 0; 34 | padding: 0 8px; 35 | float: left; 36 | @media only screen and (max-width: $screen-xs-max) {padding: 0 4px;} 37 | > a { 38 | border: none; 39 | background: none; 40 | padding: 2px 3px; 41 | font-size: 1rem; 42 | line-height: 1; 43 | &:hover { 44 | background: none; 45 | color: darken($cerulean, 5%); 46 | text-decoration: underline; 47 | } 48 | } 49 | } 50 | > .active { 51 | > a { 52 | background: $gainsboro; 53 | color: $coal; 54 | &:hover { 55 | background: $gainsboro; 56 | color: inherit; 57 | } 58 | } 59 | } 60 | @media only screen and (max-width: $screen-sm) { 61 | padding-top: 2px; 62 | &.pull-right { 63 | float: none !important; 64 | } 65 | } 66 | @media only screen and (max-width: $screen-xs-max) { 67 | li:first-child, li:last-child { 68 | display: none; 69 | } 70 | } 71 | } 72 | -------------------------------------------------------------------------------- /src/assets/sass/components/helpers.scss: -------------------------------------------------------------------------------- 1 | /* ========================================================== 2 | * helpers.scss 3 | * Different helpers classes that add various tweaks to other modules 4 | * 5 | * Author: Toni Fisler, toni@antistatique.net 6 | * Date: 2014-05-01 15:30:10 7 | * 8 | * Copyright 2014 Federal Chancellery of Switzerland 9 | * Licensed under MIT 10 | ========================================================== */ 11 | 12 | // Right separator 13 | .separator { 14 | @include separator($light-grey); 15 | } 16 | 17 | // Left separator 18 | .separator-left { 19 | @include separator($light-grey, left); 20 | } 21 | 22 | // Separator with both borders 23 | .separator-both { 24 | @include separator($light-grey, both); 25 | } 26 | 27 | .bordered { 28 | @media only screen and (min-width: $screen-md-min) { 29 | border: 1px solid $silver; 30 | } 31 | } 32 | 33 | .spacer { 34 | height: 40px; 35 | } 36 | 37 | .text-inline {display: inline;} 38 | 39 | .scroll-y { 40 | overflow-y: auto; 41 | } 42 | 43 | .nopadding-right { 44 | @media only screen and (min-width: $screen-sm-min) { 45 | padding-right: 0 !important; 46 | } 47 | } 48 | 49 | .nopadding-left { 50 | @media only screen and (min-width: $screen-sm-min) { 51 | padding-left: 0 !important; 52 | } 53 | } 54 | 55 | .table-row { 56 | display: table-row; 57 | height: 20px; 58 | } 59 | 60 | .table-cell { 61 | display: table-cell; 62 | vertical-align: middle; 63 | } 64 | 65 | 66 | // Workaround for inline visible-xs (was display:block by default) 67 | @media screen and (max-width: $screen-xs-max) { 68 | .visible-xs-inline { 69 | display: inline-block !important; 70 | } 71 | } 72 | 73 | @media screen and (min-width: $screen-sm-min) { 74 | .visible-xs-inline { 75 | display: none !important; 76 | } 77 | } 78 | -------------------------------------------------------------------------------- /src/materials/02-navigation/03-content-navigation/04-tab-navigation.html: -------------------------------------------------------------------------------- 1 | --- 2 | title: navigation.content-navigation.tab-navigation.title 3 | help: navigation.content-navigation.tab-navigation.help 4 | label: flex 5 | --- 6 | 7 |
    8 |
    9 | 10 | 16 | 17 | 18 |
    19 |
    1 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum, voluptas, repudiandae, sequi, aliquam eveniet laborum sunt accusantium quisquam esse obcaecati similique iure voluptates nobis provident totam autem odit quos eligendi!
    20 |
    2 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet, et nam molestiae repellat voluptas. Praesentium, earum reprehenderit quam voluptatem qui minus neque? Libero, minima magni ab dolor nemo reiciendis aperiam.
    21 |
    3 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem, qui, eligendi veritatis tenetur magnam aut voluptates nam optio eveniet ad quisquam est blanditiis cumque error illum sapiente consectetur tempora impedit?
    22 |
    4 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt, libero, alias veniam a eveniet dolores necessitatibus nam officiis blanditiis ea expedita vitae minima et inventore dolorum quibusdam natus commodi rerum.
    23 |
    24 |
    25 |
    26 | -------------------------------------------------------------------------------- /src/views/docs/07-accessibility.html: -------------------------------------------------------------------------------- 1 | --- 2 | fabricator: true 3 | category: docs.title 4 | title: docs.accessibility.title 5 | permalink: docs/07-accessibility.html 6 | --- 7 | 8 |

    {{t 'docs.accessibility.title'}}

    9 | 10 | {{{t 'docs.accessibility.intro' markdown=true}}} 11 | 12 | {{{t 'docs.accessibility.title-tag' markdown=true}}} 13 | 14 |
    15 |

    Barrier-free Accessibility, Swiss Confederation Web Guidelines

    16 | 17 | 18 |
    19 | 20 | 23 | 24 | {{{t 'docs.accessibility.multi-language' markdown=true}}} 25 | 26 |
    27 |

    Barrierefreiheit ist einfach, nicht wahr?

    28 |

    Web content accessibility is easy, isn't it?

    29 |

    L'accessibilité aux contenus web est facile, n'est-ce pas?

    30 | 31 | 32 |
    33 | 34 | 39 | 40 | {{{t 'docs.accessibility.outro' markdown=true}}} -------------------------------------------------------------------------------- /src/materials/03-content/05-teaser/12-twitter-timeline.html: -------------------------------------------------------------------------------- 1 | --- 2 | title: content.teaser.twitter-timeline.title 3 | help: content.teaser.twitter-timeline.help 4 | release: content.teaser.news-feed.release 5 | translation: true 6 | label: flex 7 | --- 8 |
    9 |
    10 |
    11 |
    12 |
    13 |

    Timeline

    14 |
    15 |
    16 | 17 |
    18 |
    19 |
    20 |
    21 |
    22 |
    23 |

    Timeline (Tweet Limit: 2)

    24 |
    25 |
    26 | 27 |
    28 |
    29 |
    30 |
    31 |
    32 |
    33 |

    Timeline (Tweet Limit: 1)

    34 |
    35 |
    36 | 37 |
    38 |
    39 |
    40 |
    41 |
    42 |
    43 |

    Timeline (Tweet Limit: 0)

    44 |
    45 |
    46 | 47 |
    48 |
    49 |
    50 | -------------------------------------------------------------------------------- /src/assets/sass/layout/type.scss: -------------------------------------------------------------------------------- 1 | /* ========================================================== 2 | * type.scss 3 | * Global typographic styles 4 | * 5 | * Author: Yann Gouffon, yann@antistatique.net 6 | * Date: 2014-04-28 17:17:40 7 | * 8 | * Copyright 2014 Federal Chancellery of Switzerland 9 | * Licensed under MIT 10 | =========================================================== */ 11 | 12 | html { 13 | font-size: $font-size-base-rel; 14 | 15 | @media only screen and (max-width: $screen-sm-max) { 16 | font-size: 75%; 17 | } 18 | } 19 | 20 | body { 21 | font-size: inherit; 22 | } 23 | 24 | p { 25 | font-size: 1.1em; 26 | line-height: 1.5; 27 | } 28 | 29 | strong { 30 | font-weight: 700; 31 | } 32 | 33 | .lead { 34 | @extend strong; 35 | line-height: $line-height-base; 36 | font-size: $font-size-base; 37 | } 38 | 39 | abbr { 40 | border-bottom: 1px #aaa dotted; 41 | letter-spacing: .07em; 42 | &[title] { 43 | border-bottom: 1px dotted; 44 | } 45 | } 46 | 47 | b { 48 | @extend strong; 49 | } 50 | 51 | pre, code { 52 | color: #800; 53 | } 54 | 55 | cite, i, dfn, q { 56 | @extend em; 57 | } 58 | 59 | q { 60 | font-style: italic; 61 | q { font-style: normal; } 62 | } 63 | 64 | ins { 65 | background: #ff9; 66 | color: $black; 67 | text-decoration: none; 68 | } 69 | 70 | mark { 71 | @extend strong; 72 | background: #FE57A1; 73 | padding: 0; 74 | } 75 | 76 | samp { 77 | @extend strong; 78 | color: $gray; 79 | } 80 | 81 | var { 82 | @extend em; 83 | color: gray; 84 | } 85 | 86 | .text-dimmed { 87 | color: $empress; 88 | } 89 | 90 | blockquote { 91 | margin: 1.5em 0 0 1.6em; 92 | color: $empress; 93 | &::before { 94 | content: "\00ab"; 95 | } 96 | &::after { 97 | content: "\00bb"; 98 | } 99 | } 100 | -------------------------------------------------------------------------------- /src/assets/sass/layout/buttons.scss: -------------------------------------------------------------------------------- 1 | /* ========================================================== 2 | * buttons.scss 3 | * Global buttons styles 4 | * 5 | * Author: Yann Gouffon, yann@antistatique.net 6 | * Date: 2014-04-30 09:38:36 7 | * 8 | * Copyright 2014 Federal Chancellery of Switzerland 9 | * Licensed under MIT 10 | =========================================================== */ 11 | 12 | .btn { 13 | padding: 0.45em 0.9em; 14 | border-radius: 3px; 15 | line-height: 1.2; 16 | background-color: $smoke; 17 | border: 1px solid $empress; 18 | font-weight: 100; 19 | &:hover, &:focus { 20 | background-color: $light-grey; 21 | z-index: 100; 22 | } 23 | 24 | &.btn-primary { 25 | background-color: $cerulean; 26 | border-color: $cerulean; 27 | &:hover, &:focus { 28 | color: $white; 29 | background-color: darken($cerulean, 8%); 30 | } 31 | &:active { 32 | background-color: darken($cerulean, 15%); 33 | } 34 | &.active { 35 | color: $white; 36 | background-color: darken($cerulean, 15%); 37 | } 38 | } 39 | 40 | &.btn-secondary { 41 | background-color: $empress; 42 | color: $white; 43 | &:hover, &:focus { 44 | background-color: darken($empress, 8%); 45 | } 46 | &:active { 47 | background-color: darken($empress, 15%); 48 | } 49 | &.active { 50 | color: $white; 51 | background-color: $coal; 52 | box-shadow: none; 53 | } 54 | } 55 | 56 | &.active { 57 | color: $cerulean; 58 | background-color: $white; 59 | box-shadow: none; 60 | } 61 | 62 | &.btn-link { 63 | border: none; 64 | background-color: transparent; 65 | float: none; 66 | &:hover, &:focus { 67 | color: darken($cerulean, 5%); 68 | background: $smoke; 69 | } 70 | } 71 | } 72 | 73 | a.btn { 74 | color: inherit; 75 | } 76 | 77 | // Fix bootstrap 78 | .btn-group>.btn:hover { 79 | z-index: 3; 80 | } 81 | -------------------------------------------------------------------------------- /src/assets/sass/components/slideshow.scss: -------------------------------------------------------------------------------- 1 | /* ========================================================== 2 | * slideshow.scss 3 | * Slideshow component 4 | * 5 | * Author: Toni, toni@antistatique.net 6 | * Date: 2015-02-09 10:52:08 7 | * 8 | * Copyright 2014 Federal Chancellery of Switzerland 9 | * Licensed under MIT 10 | ========================================================== */ 11 | 12 | .carousel-slideshow { 13 | border: 0; 14 | overflow: hidden; 15 | margin-bottom: 25px; 16 | 17 | .carousel-inner { 18 | overflow: visible; 19 | } 20 | 21 | .item { 22 | padding: 0; 23 | } 24 | 25 | .carousel-controls { 26 | > div { 27 | display: inline-block; 28 | } 29 | small { 30 | display: inline-block; 31 | vertical-align: top; 32 | margin: 25px 0 0 0; 33 | color: $coal; 34 | } 35 | a { 36 | display: inline-block; 37 | margin-top: 15px; 38 | padding: 0 12px 0 15px; 39 | 40 | color: $coal; 41 | font-size: $carousel-control-font-size; 42 | 43 | &.right { 44 | border-left: 1px solid $gainsboro; 45 | } 46 | 47 | &:hover, 48 | &:focus { 49 | opacity: 1; 50 | color: $venetian-red; 51 | } 52 | 53 | &.disabled { 54 | cursor: default; 55 | color: $gainsboro; 56 | } 57 | } 58 | } 59 | 60 | .carousel-caption { 61 | position: static; 62 | padding-top: 11px; 63 | padding-bottom: 0; 64 | max-width: 300px; 65 | min-height: 150px; 66 | 67 | @media only screen and (min-width: $screen-md-min) { 68 | float: left; 69 | max-width: 360px; 70 | min-height: 125px; 71 | } 72 | 73 | text-align: left; 74 | text-shadow: none; 75 | color: $black; 76 | font-size: 0.78571429rem; 77 | 78 | p { 79 | margin-bottom: 0; 80 | } 81 | } 82 | } 83 | 84 | .blueimp-gallery-display { 85 | .next, .prev { 86 | display: block; 87 | } 88 | } 89 | -------------------------------------------------------------------------------- /src/materials-data/complements/image-format.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 |
    ExampleUsage
    image descriptionTitle + Image (16:10)
    image descriptionTitle + Image 1/2 (16:5)
    image descriptionVideo (16:9)
    image descriptionTeaser 2/4 (16:10)
    image descriptionTeaser 1/3 (16:10)
    image descriptionTeaser 1/4 (16:10)
    image descriptionTeaser Aside
    image descriptionTeaser Aside
    image descriptionStandard image + text / Standard infobox
    image descriptionStandard image + text / Standard infobox
    image descriptionNavigation teaser (16:10)
    image descriptionTeaser list
    59 | -------------------------------------------------------------------------------- /src/assets/sass/components/select.scss: -------------------------------------------------------------------------------- 1 | /* ========================================================== 2 | * select.scss 3 | * Custom select styles added after the chosen-theme 4 | * 5 | * Author: Toni Fisler, toni@antistatique.net 6 | * Date: 2014-04-28 17:26:57 7 | * 8 | * Copyright 2014 Federal Chancellery of Switzerland 9 | * Licensed under MIT 10 | ========================================================== */ 11 | 12 | select.form-control, 13 | .form-inline select.form-control { 14 | width: auto; 15 | max-width: 100%; 16 | } 17 | 18 | .navbar.yamm--select { 19 | @media only screen and (max-width: $screen-xs-max) { 20 | display: none; 21 | } 22 | } 23 | 24 | .yamm--select { 25 | height: 0px; 26 | width: 100%; 27 | margin-bottom: 0; 28 | margin-top: -20px; 29 | float: right; 30 | @media only screen and (max-width: $screen-sm-max) { 31 | margin-top: -15px; 32 | } 33 | &.pull-right .dropdown-menu {right: 0;} 34 | .dropdown-toggle { 35 | color: $coal; 36 | padding: 0 10px; 37 | display: inline-block; 38 | border: 1px solid $empress; 39 | border-radius: 4px; 40 | font-size: 0.8em; 41 | line-height: 1.8em; 42 | text-decoration: none; 43 | width: 200px; 44 | box-sizing: border-box; 45 | box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.1); 46 | background: $white; 47 | &:hover, &:active, &:focus { 48 | text-decoration: none; 49 | color: $venetian-red; 50 | } 51 | span { 52 | border-left: 1px solid $empress; 53 | display: inline-block; 54 | color: $black; 55 | margin: 0; 56 | float: right; 57 | padding-left: 10px; 58 | } 59 | } 60 | .dropdown.open .dropdown-toggle { 61 | border-bottom-left-radius: 0; 62 | border-bottom-right-radius: 0; 63 | box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); 64 | color: $venetian-red; 65 | position: relative; 66 | z-index: 1000; 67 | } 68 | .dropdown-menu { 69 | top: 22px; 70 | } 71 | } 72 | -------------------------------------------------------------------------------- /src/assets/js/collapse.js: -------------------------------------------------------------------------------- 1 | /* ========================================================== 2 | * collapse.js 3 | * Add class when nav collapse is open 4 | * 5 | * Author: Yann, yann@antistatique.net 6 | * Date: 2014-05-06 7 | * 8 | * Copyright 2014 Federal Chancellery of Switzerland 9 | * Licensed under MIT 10 | ========================================================== */ 11 | 12 | (function($) { 13 | 'use strict'; 14 | 15 | // Normal Collapse 16 | $('.collapse:not(tbody)').on('show.bs.collapse', function () { 17 | $(this) 18 | .prev() 19 | .addClass('active icon--root') 20 | .removeClass('icon--greater') 21 | .attr({ 22 | 'aria-selected': 'true', 23 | 'aria-expanded': 'true' 24 | }); 25 | }); 26 | $('.collapse:not(tbody)').on('hide.bs.collapse', function () { 27 | $(this) 28 | .prev() 29 | .removeClass('active icon--root') 30 | .addClass('icon--greater') 31 | .attr( { 32 | 'aria-selected': 'false', 33 | 'aria-expanded': 'false' 34 | }); 35 | }); 36 | 37 | // Table Collapse 38 | 39 | $('tbody.collapse').on('show.bs.collapse', function () { 40 | $(this) 41 | .prev().find('[data-toggle=collapse]') 42 | .addClass('active') 43 | .attr({ 44 | 'aria-selected': 'true', 45 | 'aria-expanded': 'true' 46 | }); 47 | }); 48 | $('tbody.collapse').on('hide.bs.collapse', function () { 49 | $(this) 50 | .prev().find('[data-toggle=collapse]') 51 | .removeClass('active') 52 | .attr({ 53 | 'aria-selected': 'false', 54 | 'aria-expanded': 'false' 55 | }); 56 | }); 57 | 58 | // Ensure every first collapse toggle for accordions is accessible 59 | // (cf. https://github.com/paypal/bootstrap-accessibility-plugin/issues/98): 60 | $('[aria-multiselectable="true"]').each(function() { 61 | $(this).find('[data-toggle="collapse"][data-parent]').first().attr({tabindex: 0}); 62 | }); 63 | 64 | }) (jQuery); 65 | -------------------------------------------------------------------------------- /src/assets/sass/layout/images.scss: -------------------------------------------------------------------------------- 1 | /* ========================================================== 2 | * images.scss 3 | * Images styles 4 | * 5 | * Author: Yann Gouffon, yann@antistatique.net 6 | * Date: 2014-04-28 17:17:40 7 | * 8 | * Copyright 2014 Federal Chancellery of Switzerland 9 | * Licensed under MIT 10 | =========================================================== */ 11 | 12 | img { 13 | max-width: 100%; 14 | } 15 | 16 | figure { 17 | margin-top: 0.2em; 18 | 19 | &.pull-left { 20 | padding-right: 10px; 21 | display: table; 22 | 23 | figcaption { 24 | display: table-caption; 25 | caption-side: bottom; 26 | padding-right: 10px; 27 | } 28 | } 29 | 30 | &.pull-right { 31 | padding-left: 10px; 32 | display: table; 33 | 34 | figcaption { 35 | display: table-caption; 36 | caption-side: bottom; 37 | padding-left: 10px; 38 | } 39 | } 40 | } 41 | 42 | figcaption { 43 | font-size: 0.92857143rem; 44 | line-height: 1.3em; 45 | margin-top: 0.7em; 46 | margin-bottom: 0.8em; 47 | } 48 | 49 | .thumbnail-wrapper { 50 | width: 100%; 51 | padding-top: 100%; 52 | position: relative; 53 | margin: 10px 0 45px 0; 54 | } 55 | 56 | .thumbnail { 57 | margin: 0; 58 | border: none; 59 | border-radius: 0; 60 | padding: 0; 61 | display: block; 62 | position: absolute; 63 | top: 0; 64 | bottom: 0; 65 | left: 0; 66 | right: 0; 67 | 68 | figure { 69 | margin: 0; 70 | background: $smoke; 71 | width: 100%; 72 | height: 100%; 73 | text-align: center; 74 | } 75 | 76 | img { 77 | width: auto; 78 | height: auto; 79 | max-width: 100%; 80 | max-height: 100%; 81 | position: relative; 82 | top: 50%; 83 | transform: translateY(-50%); 84 | .oldie & { 85 | top: 0; 86 | width: 100%; 87 | } 88 | } 89 | 90 | figcaption { 91 | display: block; 92 | position: absolute; 93 | top: 100%; 94 | left: 0; 95 | width: 100%; 96 | } 97 | } 98 | -------------------------------------------------------------------------------- /src/materials/03-content/06-multimedia/02-photo-gallery-single.html: -------------------------------------------------------------------------------- 1 | --- 2 | title: content.multimedia.photo-gallery-single.title 3 | help: content.multimedia.photo-gallery-single.help 4 | label: flex 5 | --- 6 | 7 |
    8 |
    9 |
    10 | Back to Overview 11 | 18 |
    19 |
    20 |
    21 |
    22 |
    23 |
    24 | image description 25 |

    26 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Primum quid tu dicis breve? Neminem videbis ita laudatum, ut artifex callidus comparandarum voluptatum diceretur. Nihil enim iam habes, quod ad corpus referas; Duo Reges: constructio interrete. At hoc in eo M. Id mihi magnum videtur. 27 |

    28 | Bildnachweis / Copyright: Fotograf Hans Mustermann, Bern, 2009 29 |

    30 | 31 |
    32 | 36 |
    37 |
    38 |
    39 |
    40 |
    41 |
    42 |
    43 | Back to Overview 44 | 51 |
    52 |
    53 |
    54 | -------------------------------------------------------------------------------- /src/materials/02-navigation/01-hierarchical-navigation/04-page-navigation-list.html: -------------------------------------------------------------------------------- 1 | --- 2 | title: navigation.hierarchical-navigation.page-navigation-list.title 3 | help: navigation.hierarchical-navigation.page-navigation-list.help 4 | release: navigation.hierarchical-navigation.page-navigation-list.release 5 | label: fix 6 | --- 7 | 8 |
    9 |
    10 | 11 | 12 |
    13 |
    14 | 15 | 41 | 42 |
    43 |
    44 | 45 |
    46 |
    47 | -------------------------------------------------------------------------------- /src/materials/03-content/05-teaser/11-news-feed.html: -------------------------------------------------------------------------------- 1 | --- 2 | title: content.teaser.news-feed.title 3 | help: content.teaser.news-feed.help 4 | release: content.teaser.news-feed.release 5 | translation: true 6 | label: flex 7 | --- 8 | 9 |
    10 |
    11 | 12 | 13 |
    14 |
    15 | all 16 |
    17 |
    18 |
    19 |

    20 | 23.05.2012
    21 | Medienmitteilung 1 22 |

    23 | 24 | Offizieller Besuch von Bundespräsident Didier Burkhalter in Italien 25 | 26 |
    27 |
    28 |

    29 | 23.05.2012
    30 | Medienmitteilung 2 31 |

    32 | 33 | Offizieller Besuch von Bundespräsident Didier Burkhalter in Italien 34 | 35 |
    36 |
    37 |

    38 | 23.05.2012
    39 | Medienmitteilung 3 40 |

    41 | 42 | Offizieller Besuch von Bundespräsident Didier Burkhalter in Italien 43 | 44 |
    45 |
    46 |

    47 | 23.05.2012
    48 | Medienmitteilung 3 49 |

    50 | 51 | Offizieller Besuch von Bundespräsident Didier Burkhalter in Italien 52 | 53 |
    54 |
    55 |

    56 | 23.05.2012
    57 | Medienmitteilung 3 58 |

    59 | 60 | Offizieller Besuch von Bundespräsident Didier Burkhalter in Italien 61 | 62 |
    63 |
    64 |
    65 | 66 |
    67 |
    68 | -------------------------------------------------------------------------------- /src/assets/sass/layout/links.scss: -------------------------------------------------------------------------------- 1 | /* ========================================================== 2 | * links.scss 3 | * Links element styles 4 | * 5 | * Author: Yann Gouffon, yann@antistatique.net 6 | * Date: 2014-04-30 09:38:36 7 | * 8 | * Copyright 2014 Federal Chancellery of Switzerland 9 | * Licensed under MIT 10 | =========================================================== */ 11 | 12 | a { 13 | color: $cerulean; 14 | line-height: 1.5; 15 | 16 | &:hover { 17 | color: darken($cerulean, 5%); 18 | text-decoration: underline; 19 | } 20 | &:active, &:visited {text-decoration: none;} 21 | &:visited {color: $cadillac;} 22 | p & { 23 | line-height: 1; 24 | } 25 | p &:hover { 26 | text-decoration: underline; 27 | } 28 | 29 | small & ~ span{ 30 | display: block; 31 | margin-top: -5px; 32 | } 33 | 34 | &.icon { 35 | &, 36 | &:before, &:after, 37 | &:hover:before, &:hover:after { 38 | text-decoration: none; 39 | } 40 | } 41 | } 42 | 43 | // Apply a more accessible/visible focus state on interactive elements 44 | // This is shown *only* when user interact with the keyboard 45 | // See outline.js 46 | *:not([class*="col-"]):focus, 47 | a:focus, 48 | .form-control:focus, 49 | input[type=checkbox]:focus, 50 | input[type=radio]:focus, 51 | input[type=file]:focus, 52 | button:focus, 53 | .btn:focus, 54 | .btn.active:focus, 55 | .carousel-control:focus, 56 | .dropdown-toggle:focus, 57 | .chosen-container-active .chosen-single { 58 | outline: $focus-outline; 59 | outline-offset: 1px; 60 | } 61 | 62 | @media only screen and (max-width: $screen-xs-max) { 63 | .phone-number { 64 | .dl-horizontal & { 65 | margin-left: 0; 66 | } 67 | a { 68 | display: block; 69 | margin-bottom: 1em; 70 | padding: 10px 20px; 71 | width: 100%; 72 | border: 1px solid $coal; 73 | border-radius: 3px; 74 | background: $gray-lighter; 75 | color: $coal; 76 | text-align: center; 77 | text-decoration: none; 78 | span { 79 | display: inline; 80 | } 81 | } 82 | } 83 | .dl-horizontal dt { 84 | float: left; 85 | clear: left; 86 | } 87 | } 88 | -------------------------------------------------------------------------------- /src/assets/sass/layout/header.scss: -------------------------------------------------------------------------------- 1 | /* ========================================================== 2 | * header.scss 3 | * Header elements styles 4 | * 5 | * Author: Yann Gouffon, yann@antistatique.net 6 | * Date: 2014-04-28 17:17:40 7 | * 8 | * Copyright 2014 Federal Chancellery of Switzerland 9 | * Licensed under MIT 10 | =========================================================== */ 11 | 12 | header { 13 | background: $white; /* Old browsers */ 14 | background: -moz-linear-gradient(top, $smoke 0%, $white 7%, $white 100%); /* FF3.6+ */ 15 | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,$smoke), color-stop(7%,$white), color-stop(100%,$white)); /* Chrome,Safari4+ */ 16 | background: -webkit-linear-gradient(top, $smoke 0%,$white 7%,$white 100%); /* Chrome10+,Safari5.1+ */ 17 | background: -o-linear-gradient(top, $smoke 0%,$white 7%,$white 100%); /* Opera 11.10+ */ 18 | background: -ms-linear-gradient(top, $smoke 0%,$white 7%,$white 100%); /* IE10+ */ 19 | background: linear-gradient(to bottom, $smoke 0%,$white 7%,$white 100%); /* W3C */ 20 | @media only screen and (min-width: $screen-sm-min) { 21 | padding: 10px 15px 30px 15px; 22 | } 23 | position: relative; 24 | &:after { 25 | content: "\e905"; 26 | display: block; 27 | height: 0; 28 | clear: both; 29 | visibility: hidden; 30 | } 31 | } 32 | 33 | .header-separator { 34 | height: 5px; 35 | width: 100%; 36 | background: $venetian-red; 37 | } 38 | 39 | 40 | .access-keys { 41 | width: 0; 42 | height: 0; 43 | padding: 0; 44 | margin: 0; 45 | li {display: inline;} 46 | li a, li a:visited { 47 | display: block; 48 | position: absolute; 49 | left: -3000px; 50 | top: -2000px; 51 | width: 0px; 52 | height: 0px; 53 | z-index: 200; 54 | } 55 | li a:focus { 56 | position: absolute; 57 | background-color: #000000; 58 | color: #FFFFFF; 59 | display: block; 60 | font-size: 1.3em; 61 | height: auto; 62 | width: auto; 63 | top: 0; 64 | left: 0; 65 | line-height: 1.2em; 66 | padding: 5px 8px; 67 | z-index: 10000000; 68 | text-decoration: none; 69 | } 70 | } 71 | -------------------------------------------------------------------------------- /src/materials/03-content/05-teaser/10-publications-preview.html: -------------------------------------------------------------------------------- 1 | --- 2 | title: content.teaser.publications-preview.title 3 | help: content.teaser.publications-preview.help 4 | translation: true 5 | label: flex 6 | --- 7 | 8 |
    9 |
    10 | 11 | 12 |
    13 |
    14 | all 15 |
    16 |
    17 | 18 | Publication's title : Lorem ipsum dolor sit amet 19 | 20 |
    21 |
    22 | image description 23 |
    24 |

    25 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nec hoc ille non vidit, sed verborum magnificentia est et gloria delectatus. Tum Triarius: Posthac quidem, inquit, audacius. 26 |

    27 |
    28 |
    29 | 30 | Publication's title : Lorem ipsum dolor sit amet 31 | 32 |
    33 |
    34 | image description 35 |
    36 |

    37 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nec hoc ille non vidit, sed verborum magnificentia est et gloria delectatus. Tum Triarius: Posthac quidem, inquit, audacius. 38 |

    39 |
    40 |
    41 | 42 | Publication's title : Lorem ipsum dolor sit amet 43 | 44 |
    45 |
    46 | image description 47 |
    48 |

    49 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nec hoc ille non vidit, sed verborum magnificentia est et gloria delectatus. Tum Triarius: Posthac quidem, inquit, audacius. 50 |

    51 |
    52 |
    53 | 54 |
    55 |
    56 | -------------------------------------------------------------------------------- /src/materials/03-content/05-teaser/04-headline.html: -------------------------------------------------------------------------------- 1 | --- 2 | title: content.teaser.headline.title 3 | help: content.teaser.headline.help 4 | label: flex 5 | --- 6 | 7 |
    8 |
    9 | 10 |
    11 |
    12 |

    Themes

    13 | all 14 |
    15 | 16 |
    17 |
    18 |

    19 | Image description 20 |

    21 |

    Title in H3

    22 |

    23 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Piso, familiaris noster, et alia multa et hoc loco Stoicos irridebat: Quid enim? Nihilo beatiorem esse Metellum quam Regulum. 24 |

    25 |
    26 | An external link 27 |
    28 |
    29 |

    30 | Image description 31 |

    32 |

    Title in H3

    33 |

    34 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Piso, familiaris noster, et alia multa et hoc loco Stoicos irridebat: Quid enim? Nihilo beatiorem esse Metellum quam Regulum. Erit enim mecum, si tecum erit. Ne amores quidem sanctos a sapiente alienos esse arbitrantur. 35 |

    36 |
    37 | An external link 38 |
    39 |
    40 |

    41 | Image description 42 |

    43 |

    Title in H3

    44 |

    45 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Piso, familiaris noster, et alia multa et hoc loco Stoicos irridebat: Quid enim? Nihilo beatiorem esse. 46 |

    47 |
    48 | An external link 49 |
    50 |
    51 |
    52 | 53 |
    54 |
    55 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "swiss-styleguide", 3 | "description": "Swiss Confederation Web Guidelines", 4 | "version": "3.2.0", 5 | "homepage": "http://swiss.github.io/styleguide", 6 | "contributors": [ 7 | { 8 | "name": "Pedro De Almeida", 9 | "email": "Pedro.DeAlmeida@bit.admin.ch" 10 | }, 11 | { 12 | "name": "Liip", 13 | "url": "https://liip.ch" 14 | }, 15 | { 16 | "name": "Antistatique", 17 | "url": "http://antistatique.net/" 18 | } 19 | ], 20 | "license": "MIT", 21 | "repository": { 22 | "type": "git", 23 | "url": "https://github.com/swiss/styleguide.git" 24 | }, 25 | "scripts": { 26 | "start": "gulp && gulp serve" 27 | }, 28 | "devDependencies": { 29 | "babel-core": "^6.25.0", 30 | "browser-sync": "^2.8.2", 31 | "fabricator-assemble": "^1.2.0", 32 | "globby": "^6.1.0", 33 | "gulp": "^3.9.0", 34 | "gulp-autoprefixer": "^4.0.0", 35 | "gulp-clean-css": "^3.4.1", 36 | "gulp-concat": "^2.3.4", 37 | "gulp-gh-pages": "^0.5.4", 38 | "gulp-if": "^2.0.2", 39 | "gulp-jshint": "^2.0.4", 40 | "gulp-load-plugins": "^1.5.0", 41 | "gulp-rename": "^1.2.0", 42 | "gulp-rsync": "^0.0.8", 43 | "gulp-sass": "^3.1.0", 44 | "gulp-sourcemaps": "^2.6.0", 45 | "gulp-twig": "^0.7.0", 46 | "gulp-uglify": "^3.0.0", 47 | "gulp-util": "^3.0.0", 48 | "js-yaml": "^3.4.3", 49 | "jshint": "^2.9.4", 50 | "jshint-stylish": "^2.2.1", 51 | "markdown-it": "^8.3.1", 52 | "path": "^0.12.7", 53 | "prismjs": "^1.3.0", 54 | "rimraf": "^2.6.1", 55 | "run-sequence": "^1.1.2", 56 | "yargs": "^8.0.1" 57 | }, 58 | "dependencies": { 59 | "Placeholdr": "github:vote539/placeholdr", 60 | "Yamm": "github:geedmo/yamm3#v1.1.0", 61 | "blueimp-bootstrap-image-gallery": "^3.4.2", 62 | "blueimp-gallery": "^2.25.2", 63 | "bootstrap-accessibility-plugin": "git+https://github.com/admin-ch/bootstrap-accessibility-plugin#v1.0.3", 64 | "bootstrap-sass": "^3.3.7", 65 | "drmonty-chosen": "github:mrohnstock/chosen#v1.1.0", 66 | "jquery": "^3.5.1", 67 | "jquery-drilldown": "github:Cinamonas/jquery-drilldown#v1.1.1", 68 | "moment": "^2.10.6", 69 | "pikaday": "^1.3.3", 70 | "placeholdr": "vote539/placeholdr", 71 | "tablesorter": "^2.28.14", 72 | "typeahead.js": "git+https://github.com/admin-ch/typeahead.js.git#v0.11.0-templating", 73 | "yamm": "geedmo/yamm3#v1.1.0" 74 | } 75 | } 76 | -------------------------------------------------------------------------------- /src/assets/sass/admin-variables.scss: -------------------------------------------------------------------------------- 1 | /* ========================================================== 2 | * admin-variables.scss 3 | * Variables set for our project 4 | * 5 | * Author: Yann Gouffon, yann@antistatique.net 6 | * Date: 2014-04-30 09:38:36 7 | * 8 | * Copyright 2014 Federal Chancellery of Switzerland 9 | * Licensed under MIT 10 | =========================================================== */ 11 | 12 | //============================================================================= 13 | // COLORS 14 | //============================================================================= 15 | 16 | $venetian-red: #DC0018; 17 | $red: #F7001D; 18 | $mocassin: #fffab2; 19 | $cerulean: #006699; 20 | $pattens-blue: #D8E8EF; 21 | $malibu: #66afe9; 22 | $solitude: #e7edef; 23 | $clear-day: #f2f7f9; 24 | 25 | $black: #000000; 26 | $night-rider: #333333; // gray 80%; 27 | $coal: #454545; // gray 73%; 28 | $empress: #757575; // gray 54%; 29 | $silver: #CCCCCC; // gray 20%; 30 | $light-grey: #D5D5D5; // gray 16%; 31 | $gainsboro: #E5E5E5; // gray 10%; 32 | $smoke: #F5F5F5; // gray 4%; 33 | $white: #FFFFFF; 34 | 35 | $sherpa-blue: #03344D; 36 | $fire-engine-red: #bb1122; 37 | $cadillac: #884488; 38 | 39 | $menu-gradient: linear-gradient(top, #e8e8e8 0%, #f7f7f7 61%, #f7f7f7 89%, #f5f5f5 91%, #ececec 95%, #d7d7d7 100%); 40 | $menu-border-dark: #b8b8b8; 41 | $menu-border-light: $white; 42 | 43 | 44 | // TYPOGRAPHY 45 | //============================================================================= 46 | 47 | //** Fonts variables 48 | $frutiger: 'Frutiger Neue', Helvetica, Arial, sans-serif; 49 | $admin-icons: 'Admin Icons'; 50 | 51 | 52 | // MISC 53 | //============================================================================= 54 | $focus-outline: 3px solid $coal; 55 | -------------------------------------------------------------------------------- /src/assets/fabricator/styles/vendor/_prism.scss: -------------------------------------------------------------------------------- 1 | /* http://prismjs.com/download.html?themes=prism-okaidia&languages=markup+css+clike+javascript+sass+scss */ 2 | /** 3 | * okaidia theme for JavaScript, CSS and HTML 4 | * Loosely based on Monokai textmate theme by http://www.monokai.nl/ 5 | * @author ocodia 6 | */ 7 | 8 | code[class*="language-"], 9 | pre[class*="language-"] { 10 | color: #f8f8f2; 11 | text-shadow: 0 1px rgba(0, 0, 0, 0.3); 12 | font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; 13 | direction: ltr; 14 | text-align: left; 15 | white-space: pre; 16 | word-spacing: normal; 17 | word-break: normal; 18 | word-wrap: normal; 19 | line-height: 1.5; 20 | 21 | -moz-tab-size: 4; 22 | -o-tab-size: 4; 23 | tab-size: 4; 24 | 25 | -webkit-hyphens: none; 26 | -moz-hyphens: none; 27 | -ms-hyphens: none; 28 | hyphens: none; 29 | } 30 | 31 | /* Code blocks */ 32 | pre[class*="language-"] { 33 | padding: 1em; 34 | margin: .5em 0; 35 | overflow: auto; 36 | border-radius: 0.3em; 37 | } 38 | 39 | :not(pre) > code[class*="language-"], 40 | pre[class*="language-"] { 41 | background: #272822; 42 | } 43 | 44 | /* Inline code */ 45 | :not(pre) > code[class*="language-"] { 46 | padding: .1em; 47 | border-radius: .3em; 48 | white-space: normal; 49 | } 50 | 51 | .token.comment, 52 | .token.prolog, 53 | .token.doctype, 54 | .token.cdata { 55 | color: slategray; 56 | } 57 | 58 | .token.punctuation { 59 | color: #f8f8f2; 60 | } 61 | 62 | .namespace { 63 | opacity: .7; 64 | } 65 | 66 | .token.property, 67 | .token.tag, 68 | .token.constant, 69 | .token.symbol, 70 | .token.deleted { 71 | color: #f92672; 72 | } 73 | 74 | .token.boolean, 75 | .token.number { 76 | color: #ae81ff; 77 | } 78 | 79 | .token.selector, 80 | .token.attr-name, 81 | .token.string, 82 | .token.char, 83 | .token.builtin, 84 | .token.inserted { 85 | color: #a6e22e; 86 | } 87 | 88 | .token.operator, 89 | .token.entity, 90 | .token.url, 91 | .language-css .token.string, 92 | .style .token.string, 93 | .token.variable { 94 | color: #f8f8f2; 95 | } 96 | 97 | .token.atrule, 98 | .token.attr-value, 99 | .token.function { 100 | color: #e6db74; 101 | } 102 | 103 | .token.keyword { 104 | color: #66d9ef; 105 | } 106 | 107 | .token.regex, 108 | .token.important { 109 | color: #fd971f; 110 | } 111 | 112 | .token.important, 113 | .token.bold { 114 | font-weight: bold; 115 | } 116 | .token.italic { 117 | font-style: italic; 118 | } 119 | 120 | .token.entity { 121 | cursor: help; 122 | } 123 | -------------------------------------------------------------------------------- /src/materials/01-layout/03-tables/08-table-zebra-caption.html: -------------------------------------------------------------------------------- 1 | --- 2 | title: layout.tables.table-zebra-caption.title 3 | release: layout.tables.table-zebra-caption.release 4 | label: flex 5 | --- 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 |
    Table with caption (standard table)
    ArtistAlbumYearPrice in USDLabelTracksLengthProducerRecorded
    Jimi HendrixAre You Experienced196710.00MCA1153:10Chas ChandlerFebruary 1967
    Pink FloydWish You Were Here197512.00Harvest, Emi842:59Pink FloydMay - October 1975
    BeatlesAbbey Road196914.00Apple1258:45Hans MusterJanuary - July 1969
    Bob DylanBlonde on Blonde196615.00Columbia1475:21Johnny CashJuly 1966
    ArtistAlbumYearPrice in USDLabelTracks LengthProducerRecorded
    82 | -------------------------------------------------------------------------------- /src/materials/01-layout/03-tables/04-table-with-caption.html: -------------------------------------------------------------------------------- 1 | --- 2 | title: layout.tables.table-with-caption.title 3 | release: layout.tables.table-with-caption.release 4 | label: flex 5 | --- 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 |
    Table with caption (standard table)
    ArtistAlbumYearPrice in USDLabelTracksLengthProducerRecorded
    Jimi HendrixAre You Experienced196710.00MCA1153:10Chas ChandlerFebruary 1967
    Pink FloydWish You Were Here197512.00Harvest, Emi842:59Pink FloydMay - October 1975
    BeatlesAbbey Road196914.00Apple1258:45Hans MusterJanuary - July 1969
    Bob DylanBlonde on Blonde196615.00Columbia1475:21Johnny CashJuly 1966
    ArtistAlbumYearPrice in USDLabelTracks LengthProducerRecorded
    82 | -------------------------------------------------------------------------------- /src/materials/01-layout/03-tables/12-table-highlight-caption.html: -------------------------------------------------------------------------------- 1 | --- 2 | title: layout.tables.table-highlight-caption.title 3 | release: layout.tables.table-highlight-caption.release 4 | label: flex 5 | --- 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 |
    Table with caption (standard table)
    ArtistAlbumYearPrice in USDLabelTracksLengthProducerRecorded
    Jimi HendrixAre You Experienced196710.00MCA1153:10Chas ChandlerFebruary 1967
    Pink FloydWish You Were Here197512.00Harvest, Emi842:59Pink FloydMay - October 1975
    BeatlesAbbey Road196914.00Apple1258:45Hans MusterJanuary - July 1969
    Bob DylanBlonde on Blonde196615.00Columbia1475:21Johnny CashJuly 1966
    ArtistAlbumYearPrice in USDLabelTracks LengthProducerRecorded
    82 | -------------------------------------------------------------------------------- /src/views/layouts/includes/f-header.html: -------------------------------------------------------------------------------- 1 |
    2 |
    3 |
    4 |

    {{t 'styleguide.language'}}

    5 | 14 | 21 |
    22 |
    23 | 24 |
    25 | 29 |
    30 | 31 |
    32 |

    {{t 'styleguide.global-search.title'}}

    33 | 34 | 35 | 38 | 39 | {{t 'styleguide.global-search.title'}} 40 | 41 |
    42 |
    43 |
    44 |
    45 | 46 |
    47 |
    48 |
    49 | -------------------------------------------------------------------------------- /src/assets/js/rich-menu.js: -------------------------------------------------------------------------------- 1 | /* ========================================================== 2 | * rich-menu.js 3 | * Add overlay when openning a rich yamm menu and define open/close events 4 | * 5 | * Author: Yann Gouffon, yann@antistatique.net 6 | * Date: 2014-04-30 11:48:48 7 | * 8 | * Copyright 2014 Federal Chancellery of Switzerland 9 | * Licensed under MIT 10 | =========================================================== */ 11 | 12 | (function($) { 13 | 'use strict'; 14 | 15 | // Keep jQuery object in variables 16 | var $yamm = $('.yamm'), 17 | $yammClose = $('.yamm-close, .yamm-close-bottom'), 18 | $dropdown = $('.yamm .dropdown'), 19 | $dropdownToggle = $('.yamm .dropdown-toggle'); 20 | 21 | // Toggle dropdown and fix z-index errors 22 | $yamm.each(function () { 23 | var $that = $(this); 24 | $that.on('click', '.dropdown-toggle', function () { 25 | if (!$(this).parent().hasClass('open')){ 26 | var dropdownHeight = $(window).height() - 49; 27 | $that.find('.drilldown-container').height( dropdownHeight ); 28 | } 29 | }); 30 | }); 31 | 32 | // "tabindex = -1" is added by bootstrap-accessibility-plugin to dropdown's elements. 33 | // The yamm menu uses the dropdown class, but is not a conventional dropdown, hence, the tabindex must not 34 | // be present. 35 | $dropdown.find('li a').removeAttr('tabindex'); 36 | 37 | $dropdownToggle.on('click', function() { 38 | $(this).parents($dropdown).trigger('get.hidden'); 39 | }); 40 | 41 | $dropdown.on({ 42 | "shown.bs.dropdown": function() { this.closable = false; }, 43 | "get.hidden": function() { this.closable = true; } 44 | }); 45 | 46 | $('.dropdown').on('show.bs.dropdown', function () { 47 | $dropdown.removeClass('open'); 48 | $yamm.removeClass('nav-open'); 49 | $(this).parents($yamm).addClass('nav-open'); 50 | }); 51 | 52 | $dropdown.on('hide.bs.dropdown', function () { 53 | // only remove the nav-open class if effectively closing dropdown 54 | if (this.closable) { 55 | $yamm.removeClass('nav-open'); 56 | } 57 | return this.closable; 58 | }); 59 | 60 | $(document).on('click', function(e) { 61 | // hide dropdown if dropdown is open and target is not in dropdown 62 | if ($('.dropdown.open').length > 0 && $(e.target).parents('.dropdown').length === 0) { 63 | $('.dropdown.open .dropdown-toggle').trigger('click'); 64 | } 65 | }); 66 | 67 | // Trigger close yamm menu 68 | $dropdown.each(function () { 69 | var $that = $(this); 70 | $that.find($yammClose).click( function (e) { 71 | e.preventDefault(); 72 | $that.find($dropdownToggle).trigger("click"); 73 | }); 74 | }); 75 | 76 | }) (jQuery); 77 | -------------------------------------------------------------------------------- /src/materials/02-navigation/02-header/07-treecrumb.html: -------------------------------------------------------------------------------- 1 | --- 2 | title: navigation.header.treecrumb.title 3 | help: navigation.header.treecrumb.help 4 | release: navigation.header.treecrumb.release 5 | label: cd 6 | --- 7 | 8 |
    9 |
    10 | 11 | 51 |
    52 | 53 | {{> general.logo}} 54 |
    55 | 56 | -------------------------------------------------------------------------------- /src/assets/sass/components/search.scss: -------------------------------------------------------------------------------- 1 | /* ========================================================== 2 | * search.scss 3 | * Search field styles 4 | * 5 | * Author: Yann, yann@antistatique.net 6 | * Date: 2014-05-01 11:57:02 7 | * 8 | * Copyright 2014 Federal Chancellery of Switzerland 9 | * Licensed under MIT 10 | ========================================================== */ 11 | 12 | .form-search { 13 | display: inline-block; 14 | position: relative; 15 | @media only screen and (max-width: $screen-xs-max) { 16 | header & { 17 | display: none; 18 | } 19 | } 20 | button { 21 | background: transparent; 22 | border: none; 23 | } 24 | .icon { 25 | display: inline-block; 26 | position: absolute; 27 | top: -1px; 28 | z-index: 999; 29 | &:hover { 30 | cursor: pointer; 31 | } 32 | } 33 | .icon--search { 34 | top: 1px; 35 | left: 3px; 36 | padding: 2px 4px; 37 | @media only screen and (min-width: $screen-md-min) { 38 | padding: 1px 4px; 39 | } 40 | } 41 | .icon--close { 42 | color: $white; 43 | transition: color 0.3s; 44 | right: 6px; 45 | top: 1px; 46 | font-size: 11px; 47 | 48 | padding: 2px 4px; 49 | @media only screen and (min-width: $screen-sm-min) { 50 | padding: 1px 4px; 51 | } 52 | } 53 | } 54 | 55 | .search-field { 56 | padding: 0px 30px; 57 | position: relative; 58 | height: 25px; 59 | width: 200px; 60 | transition: width 0.4s; 61 | &:focus {width: 250px;} 62 | } 63 | 64 | .search-field:focus + .icon--close:after {color: $black;} 65 | 66 | /* Remove X button in IE10 */ 67 | .search-field::-ms-clear { display: none; } 68 | 69 | .tt-menu { 70 | background: $white; 71 | box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.1); 72 | border-radius: 0; 73 | padding: 0; 74 | font-size: 13px; 75 | border: 1px solid $silver; 76 | width: 100%; 77 | } 78 | 79 | .tt-suggestion { 80 | font-size: 13px; 81 | line-height: 16px; 82 | padding: 6px 10px; 83 | margin: 0; 84 | a { 85 | color: $coal; 86 | } 87 | } 88 | 89 | .tt-suggestion:hover, .tt-suggestion.tt-cursor, .tt-is-under-cursor { 90 | background-color: $smoke; 91 | cursor: pointer; 92 | } 93 | 94 | .search-box { 95 | border-top: 1px solid $silver; 96 | border-bottom: 2px solid $silver; 97 | padding: 1em 0 1.5em 0; 98 | @media only screen and (max-width: $screen-xs-max) { 99 | input[type=submit] { 100 | width: 100%; 101 | } 102 | } 103 | } 104 | 105 | .search-result { 106 | margin-bottom: 1em; 107 | padding-bottom: 1em; 108 | border-bottom: 1px solid $silver; 109 | h4 { 110 | font-size: 1.3em; 111 | } 112 | } 113 | -------------------------------------------------------------------------------- /src/assets/fabricator/styles/objects/_component.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Object 3 | * COMPONENT 4 | */ 5 | 6 | .component { 7 | + .component { 8 | margin-top: 40px; 9 | } 10 | } 11 | 12 | .component-heading { 13 | margin-top: 0; 14 | 15 | @media screen and (min-width: 480px) { 16 | float: left; 17 | } 18 | } 19 | 20 | .component-anchor { 21 | &, 22 | &:hover, 23 | &:focus, 24 | &:visited, 25 | &:active { 26 | color: inherit; 27 | text-decoration: none; 28 | } 29 | 30 | &:focus, 31 | &:hover { 32 | text-decoration: underline; 33 | } 34 | } 35 | 36 | .component-label { 37 | position: relative; 38 | top: -2px; 39 | 40 | @media screen and (max-width: 480px) { 41 | float: left; 42 | margin-bottom: 10px; 43 | } 44 | 45 | @media screen and (min-width: 480px) { 46 | margin-left: 12px; 47 | } 48 | } 49 | 50 | .component-nav { 51 | margin: 0; 52 | 53 | li { 54 | margin: 0; 55 | } 56 | 57 | @media screen and (max-width: 480px) { 58 | float: left; 59 | margin-bottom: 10px; 60 | } 61 | 62 | @media screen and (min-width: 480px) { 63 | float: right; 64 | margin-right: -5px; 65 | } 66 | } 67 | 68 | .component-release-notes { 69 | &.collapse.in, 70 | &.collapsing { 71 | margin-left: 0; 72 | } 73 | 74 | p + ul { 75 | margin-top: 0; 76 | 77 | + p { 78 | margin-top: 10px; 79 | } 80 | } 81 | } 82 | 83 | .component-example { 84 | padding: 50px 4% 40px 4%; 85 | border: 1px solid $softBlue; 86 | position: relative; 87 | width: 100%; 88 | overflow-y: visible; 89 | box-sizing: border-box; 90 | 91 | &:before { 92 | content: 'Example'; 93 | position: absolute; 94 | top: 0; 95 | left: 0; 96 | color: $empress; 97 | border-right: 1px solid $softBlue; 98 | border-bottom: 1px solid $softBlue; 99 | border-bottom-right-radius: 4px; 100 | padding: 5px 8px; 101 | display: inline-block; 102 | font-family: $mainFont; 103 | } 104 | 105 | + .code-block { 106 | margin-top: 0; 107 | } 108 | } 109 | 110 | .show-code { 111 | position: absolute; 112 | bottom: 0; 113 | left: 0; 114 | margin: 0; 115 | z-index: 50; 116 | border: none; 117 | color: $empress; 118 | background: transparent; 119 | font-family: $mainFont; 120 | 121 | &:hover, 122 | &:focus { 123 | color: #DC0018; 124 | } 125 | } 126 | 127 | 128 | /** 129 | * SPECIFIC COMPONENTS 130 | */ 131 | 132 | // Page background component example require specific styling 133 | // to make it works in the context of the styleguide 134 | [id="02-general-03-background"] { 135 | .component-example { 136 | background: url('/img/bg-striped.png') repeat; 137 | } 138 | } 139 | -------------------------------------------------------------------------------- /src/assets/js/carousel.js: -------------------------------------------------------------------------------- 1 | /* ========================================================== 2 | * carousel.js 3 | * Carousel helper 4 | * 5 | * Author: Yann, yann@antistatique.net 6 | * Date: 2014-05-15 13:55:53 7 | * 8 | * Copyright 2014 Federal Chancellery of Switzerland 9 | * Licensed under MIT 10 | ========================================================== */ 11 | 12 | (function($) { 13 | 'use strict'; 14 | 15 | $(window).on('load', function(){ 16 | carouselInit(jQuery); 17 | }); 18 | 19 | $(window).resize(function () { 20 | carouselInit(jQuery); 21 | }); 22 | 23 | // slideshow counter 24 | var slideshow_total = $('.carousel-slideshow .item').length; 25 | $('#carousel-total').text(slideshow_total); 26 | 27 | $('.carousel-slideshow').on('slid.bs.carousel', function () { 28 | var carouselData = $(this).data('bs.carousel'); 29 | var currentIndex = carouselData.getItemIndex(carouselData.$element.find('.item.active')); 30 | var total = carouselData.$items.length; 31 | 32 | var text = (currentIndex + 1); 33 | 34 | $('#carousel-index').text(text); 35 | $('#carousel-total').text(total); 36 | }); 37 | 38 | }) (jQuery); 39 | 40 | function carouselInit($) { 41 | 'use strict'; 42 | 43 | var $carousel = $('.carousel:not(.carousel-slideshow)'); 44 | 45 | $('.carousel .item:first-child').addClass('first'); 46 | $('.carousel .item:last-child').addClass('last'); 47 | 48 | $('.carousel').each(function() { 49 | disableControl($(this)); 50 | }); 51 | $('.carousel').on('slid.bs.carousel', function () { 52 | disableControl($(this)); 53 | }); 54 | 55 | if($carousel) { 56 | $carousel.each(function () { 57 | var biggestHeight = 0, 58 | titleHeight = $(this).find('.item.active h3:first-child').height(), 59 | imgHeight = $(this).find('.item.active .carousel-img').height(); 60 | 61 | $(this).find('.carousel-indicators, .carousel-control').css('top', titleHeight + imgHeight + 50); 62 | 63 | $(this).find('.item').each(function () { 64 | if ($(this).height() >= biggestHeight) { 65 | biggestHeight = $(this).height(); 66 | } 67 | }); 68 | $(this).find('.item').height(biggestHeight); 69 | }); 70 | } 71 | } 72 | 73 | function disableControl(element) { 74 | 'use strict'; 75 | 76 | if (element.find('.first').hasClass('active')) { 77 | element.find('.left').addClass('disabled').attr('aria-disabled', 'true'); 78 | } else { 79 | element.find('.left').removeClass('disabled').attr('aria-disabled', 'false'); 80 | } 81 | if (element.find('.last').hasClass('active')) { 82 | element.find('.right').addClass('disabled').attr('aria-disabled', 'true'); 83 | } else { 84 | element.find('.right').removeClass('disabled').attr('aria-disabled', 'false'); 85 | } 86 | } 87 | -------------------------------------------------------------------------------- /src/materials/03-content/03-widgets/03-contact-box.html: -------------------------------------------------------------------------------- 1 | --- 2 | title: content.widgets.contact-box.title 3 | help: content.widgets.contact-box.help 4 | translation: true 5 | --- 6 | 7 |
    8 |
    9 | 10 | 14 | 15 | 16 |
    17 |
    18 |
    19 |
    20 | UNO-Mission New York 21 | Permanent Mission of Switzerland to the UN
    22 | 633, Third Avenue, 29th floor
    23 | New York, NY10017-6706
    24 | United States of America 25 |
    26 |
    27 |
    Tel.
    28 |
    +41 31 322 31 53
    29 |
    Fax
    30 |
    +41 31 322 31 54
    31 |
    32 |

    33 | Email
    34 | Contact form 35 |

    36 |

    Visa

    37 |

    Email

    38 |

    Opening hours

    39 |

    Monday-Friday
    40 | 09.00-12.00 AM

    41 |

    Saturday and Sunday
    42 | closed

    43 |
    44 | 45 |
    46 |
    47 |
    48 |

    UNO-Mission New York

    49 |

    633, Third Avenue
    50 | New York, NY10017-6706

    51 |

    Map

    52 |

    See on the map

    53 |
    54 | 55 |
    56 |
    57 |
    58 |
    59 | -------------------------------------------------------------------------------- /src/assets/sass/twitter-inject.scss: -------------------------------------------------------------------------------- 1 | @import 'admin-variables'; 2 | 3 | .TweetAuthor-name, 4 | .TweetAuthor-name:hover { 5 | color: $coal !important; 6 | } 7 | 8 | .TweetAuthor-link:hover { 9 | text-decoration-color: $coal !important; 10 | } 11 | 12 | a:hover { 13 | text-decoration: underline; 14 | color: $cerulean !important; 15 | } 16 | 17 | .TweetAuthor-avatar, 18 | .SandboxRoot.env-bp-min .TweetAuthor-avatar { 19 | height: 48px; 20 | width: 48px; 21 | margin-right: 10px; 22 | 23 | .Avatar { 24 | border-radius: 5px; 25 | } 26 | } 27 | 28 | .timeline-Tweet-author { 29 | padding-left: 58px; 30 | } 31 | 32 | .TweetAuthor-name.Identity-name { 33 | font-size: 1.1em; 34 | } 35 | 36 | .TweetAuthor-screenName.Identity-screenName { 37 | font-size: 0.9em; 38 | color: $empress; 39 | } 40 | 41 | .timeline-Tweet-text, 42 | .SandboxRoot.env-bp-min .timeline-Tweet-text { 43 | font-size: 1.1em !important; 44 | line-height: 1.5; 45 | padding-left: 58px; 46 | margin-left: 0; 47 | color: $coal; 48 | } 49 | 50 | .timeline-Tweet-action.timeline-ShareMenu, 51 | .timeline-Tweet-brand, 52 | .TweetAuthor-verifiedBadge { 53 | display: none; 54 | } 55 | 56 | .timeline-Tweet-metadata *, 57 | .timeline-Tweet-metadata *:hover, 58 | .timeline-Tweet-retweetCredit { 59 | color: $empress; 60 | text-decoration: none; 61 | } 62 | 63 | .Icon--retweetBadge { 64 | background: url('../img/twitter_sprite.png') no-repeat; 65 | height: 15px; 66 | width: 15px; 67 | margin-right: 5px; 68 | } 69 | 70 | .timeline-Tweet:hover .Icon--heart.TweetAction-icon.Icon--heartEdge, 71 | .Icon--heart.TweetAction-icon.Icon--heartEdge { 72 | background: url('../img/twitter_sprite.png') no-repeat -33px 0; 73 | } 74 | 75 | .TweetAction:focus .Icon--heart.TweetAction-icon.Icon--heartEdge, 76 | .TweetAction:hover .Icon--heart.TweetAction-icon.Icon--heartEdge { 77 | background: url('../img/twitter_sprite.png') no-repeat -49px 0 !important; 78 | } 79 | 80 | .Icon.Icon--retweetBadge { 81 | background-position: -81px 0; 82 | margin-bottom: 2px; 83 | } 84 | 85 | .timeline-Body { 86 | border-top: none; 87 | } 88 | 89 | .timeline-ShowMoreButton { 90 | display: inline-block; 91 | color: $white; 92 | font-size: 14px; 93 | line-height: 1.2; 94 | text-align: center; 95 | vertical-align: middle; 96 | background-color: $cerulean; 97 | border: 1px solid $cerulean; 98 | border-radius: 3px; 99 | padding: .45em .9em; 100 | margin: 15px 0; 101 | white-space: nowrap; 102 | user-select: none; 103 | touch-action: manipulation; 104 | } 105 | 106 | .timeline-ShowMoreButton:hover, 107 | .timeline-ShowMoreButton:active, 108 | .timeline-ShowMoreButton:focus { 109 | background-color: darken($cerulean, 10%); 110 | color: $white; 111 | } 112 | -------------------------------------------------------------------------------- /src/assets/sass/components/progression.scss: -------------------------------------------------------------------------------- 1 | /* ========================================================== 2 | * progression.scss 3 | * Progession navigation styles 4 | * 5 | * Author: Yann, yann@antistatique.net 6 | * Date: 2014-05-13 09:14:02 7 | * 8 | * Copyright 2014 Federal Chancellery of Switzerland 9 | * Licensed under MIT 10 | ========================================================== */ 11 | 12 | .nav-process { 13 | width: 100%; 14 | height: 30px; 15 | 16 | ul { 17 | padding: 0; 18 | margin: 0; 19 | white-space: nowrap; 20 | } 21 | 22 | li { 23 | margin: 0; 24 | } 25 | 26 | li a { 27 | display: block; 28 | height: 6px; 29 | width: 24.2%; 30 | float: left; 31 | background: $light-grey; 32 | margin: 0 0.5%; 33 | color: $black; 34 | text-align: center; 35 | font-size: 0.92857143rem; 36 | line-height: 35px; 37 | position: relative; 38 | } 39 | 40 | li.active a, 41 | li a:hover, 42 | li a:active, 43 | li a:focus { 44 | background: $venetian-red; 45 | font-weight: 700; 46 | } 47 | 48 | li.disabled a:hover, 49 | li.disabled a:active, 50 | li.disabled a:focus { 51 | background: $light-grey; 52 | cursor: not-allowed; 53 | text-decoration: none; 54 | } 55 | 56 | li:first-child a { 57 | margin-left: 0 !important; 58 | } 59 | 60 | li:last-child a { 61 | margin-right: 0 !important; 62 | } 63 | 64 | li a:before { 65 | content: ''; 66 | position: absolute; 67 | left: 0; 68 | top: 0; 69 | width: 0; 70 | height: 0; 71 | border-top: 3px solid transparent; 72 | border-left: 3px solid $white; 73 | border-bottom: 3px solid transparent; 74 | } 75 | 76 | li:first-child a:before { 77 | display: none; 78 | } 79 | 80 | li a:after { 81 | content: ''; 82 | position: absolute; 83 | right: -3px; 84 | top: 0; 85 | width: 0; 86 | height: 0; 87 | border-top: 3px solid transparent; 88 | border-left: 3px solid $light-grey; 89 | border-bottom: 3px solid transparent; 90 | } 91 | 92 | li.active a:after, 93 | li a:hover:after, 94 | li a:active:after, 95 | li a:focus:after { 96 | border-left-color: $venetian-red; 97 | } 98 | 99 | li.disabled a:hover:after, 100 | li.disabled a:active:after, 101 | li.disabled a:focus:after { 102 | border-left-color: $light-grey; 103 | } 104 | 105 | li:last-child a:after { 106 | display: none; 107 | } 108 | 109 | li.active a { 110 | margin-top: -2px; 111 | margin-left: .4%; 112 | margin-right: .6%; 113 | height: 10px; 114 | padding-top: 2px; 115 | } 116 | 117 | li.active a:after { 118 | border-width: 5px; 119 | right: -5px; 120 | } 121 | 122 | li.active a:before { 123 | border-width: 5px; 124 | } 125 | } 126 | -------------------------------------------------------------------------------- /src/materials/03-content/05-teaser/06-slideshow.html: -------------------------------------------------------------------------------- 1 | --- 2 | title: content.teaser.slideshow.title 3 | help: content.teaser.slideshow.help 4 | release: content.teaser.slideshow.release 5 | translation: true 6 | label: flex 7 | --- 8 | 9 |
    10 |
    11 |

    Slideshow

    12 | 39 |
    40 |
    41 | 42 | 43 | 76 | -------------------------------------------------------------------------------- /src/assets/sass/admin-mixins.scss: -------------------------------------------------------------------------------- 1 | /* ========================================================== 2 | * admin-mixins.scss 3 | * Our project mixins 4 | * 5 | * Author: Yann Gouffon, yann@antistatique.net 6 | * Date: 2014-04-28 17:17:40 7 | * 8 | * Copyright 2014 Federal Chancellery of Switzerland 9 | * Licensed under MIT 10 | =========================================================== */ 11 | 12 | /** 13 | * Mixin to generate the pseudo element for a checkbox or radio 14 | * $type: radio/checkbox 15 | * $position: left/right 16 | */ 17 | @mixin form-button($position) { 18 | margin: 0; 19 | top: 50%; 20 | transform: translateY(-55%); 21 | #{$position}: 0; 22 | } 23 | 24 | /** 25 | * Mixin to add a separator at the right of element. Can pass left or both as argument. 26 | * $color: #ffffff; 27 | * $where: left/right/both 28 | */ 29 | @mixin separator($color, $where:right) { 30 | $style: 1px solid $color; 31 | @if $where == 'both' {border-left: $style; border-right: $style;} 32 | @else {border-#{$where}: $style;} 33 | } 34 | 35 | @mixin gradient-menu { 36 | background: #e8e8e8; 37 | background: -moz-linear-gradient(top,#e8e8e8 0%,#f7f7f7 61%,#f7f7f7 89%,#f5f5f5 91%,#ececec 95%,#d7d7d7 100%); 38 | background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#e8e8e8),color-stop(61%,#f7f7f7),color-stop(89%,#f7f7f7),color-stop(91%,#f5f5f5),color-stop(95%,#ececec),color-stop(100%,#d7d7d7)); 39 | background: -webkit-linear-gradient(top,#e8e8e8 0%,#f7f7f7 61%,#f7f7f7 89%,#f5f5f5 91%,#ececec 95%,#d7d7d7 100%); 40 | background: -o-linear-gradient(top,#e8e8e8 0%,#f7f7f7 61%,#f7f7f7 89%,#f5f5f5 91%,#ececec 95%,#d7d7d7 100%); 41 | background: linear-gradient(to bottom,#e8e8e8 0,#f7f7f7 61%,#f7f7f7 89%,#f5f5f5 91%,#ececec 95%,#d7d7d7 100%); 42 | } 43 | 44 | @mixin gradient-light { 45 | background: rgb(239,239,239); 46 | background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2VmZWZlZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmN2Y3ZjciIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); 47 | background: -moz-linear-gradient(top, rgba(239,239,239,1) 0%, rgba(247,247,247,1) 100%); 48 | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(239,239,239,1)), color-stop(100%,rgba(247,247,247,1))); 49 | background: -webkit-linear-gradient(top, rgba(239,239,239,1) 0%,rgba(247,247,247,1) 100%); 50 | background: -o-linear-gradient(top, rgba(239,239,239,1) 0%,rgba(247,247,247,1) 100%); 51 | background: -ms-linear-gradient(top, rgba(239,239,239,1) 0%,rgba(247,247,247,1) 100%); 52 | background: linear-gradient(to bottom, rgba(239,239,239,1) 0%,rgba(247,247,247,1) 100%); 53 | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#efefef', endColorstr='#f7f7f7',GradientType=0 ); 54 | 55 | } 56 | --------------------------------------------------------------------------------