From f13c75fab5778d84f384e4cc64efb9385b0948f1 Mon Sep 17 00:00:00 2001
From: Konstantinos Platis <konstantinos.platis@cern.ch>
Date: Fri, 9 Nov 2018 16:53:16 +0100
Subject: [PATCH] Moved repo's elements one level app
---
cern_components/Gruntfile.js => Gruntfile.js | 0
...nents.info.yml => cern_components.info.yml | 0
...aries.yml => cern_components.libraries.yml | 0
...omponents.module => cern_components.module | 0
...rvices.yml => cern_components.services.yml | 0
.../patterns/molecules/slide/sass/mixins.scss | 567 ---------
.../molecules/slider/sass/mixins.scss | 567 ---------
.../molecules/story-page/images/video.png | Bin 2114 -> 0 bytes
.../fonts => fonts}/cern/cern.eot | Bin
.../fonts => fonts}/cern/cern.svg | 0
.../fonts => fonts}/cern/cern.ttf | Bin
.../fonts => fonts}/cern/cern.woff | Bin
.../fonts => fonts}/cern/cern.woff2 | Bin
.../fonts => fonts}/open-sans/bold.eot | Bin
.../fonts => fonts}/open-sans/bold.svg | 0
.../fonts => fonts}/open-sans/bold.ttf | Bin
.../fonts => fonts}/open-sans/bold.woff | Bin
.../fonts => fonts}/open-sans/bold.woff2 | Bin
.../fonts => fonts}/open-sans/regular.eot | Bin
.../fonts => fonts}/open-sans/regular.svg | 0
.../fonts => fonts}/open-sans/regular.ttf | Bin
.../fonts => fonts}/open-sans/regular.woff | Bin
.../fonts => fonts}/open-sans/regular.woff2 | Bin
.../fonts => fonts}/open-sans/semibold.eot | Bin
.../fonts => fonts}/open-sans/semibold.svg | 0
.../fonts => fonts}/open-sans/semibold.ttf | Bin
.../fonts => fonts}/open-sans/semibold.woff | Bin
.../fonts => fonts}/open-sans/semibold.woff2 | Bin
.../fonts => fonts}/poppins/bold.eot | Bin
.../fonts => fonts}/poppins/bold.svg | 0
.../fonts => fonts}/poppins/bold.ttf | Bin
.../fonts => fonts}/poppins/bold.woff | Bin
.../fonts => fonts}/poppins/bold.woff2 | Bin
.../fonts => fonts}/poppins/regular.eot | Bin
.../fonts => fonts}/poppins/regular.svg | 0
.../fonts => fonts}/poppins/regular.ttf | Bin
.../fonts => fonts}/poppins/regular.woff | Bin
.../fonts => fonts}/poppins/regular.woff2 | Bin
.../fonts => fonts}/poppins/semibold.eot | Bin
.../fonts => fonts}/poppins/semibold.svg | 0
.../fonts => fonts}/poppins/semibold.ttf | Bin
.../fonts => fonts}/poppins/semibold.woff | Bin
.../fonts => fonts}/poppins/semibold.woff2 | Bin
.../fonts => fonts}/sourcesanspro/bold.eot | Bin
.../fonts => fonts}/sourcesanspro/bold.svg | 0
.../fonts => fonts}/sourcesanspro/bold.ttf | Bin
.../fonts => fonts}/sourcesanspro/bold.woff | Bin
.../fonts => fonts}/sourcesanspro/bold.woff2 | Bin
.../fonts => fonts}/sourcesanspro/light.eot | Bin
.../fonts => fonts}/sourcesanspro/light.svg | 0
.../fonts => fonts}/sourcesanspro/light.ttf | Bin
.../fonts => fonts}/sourcesanspro/light.woff | Bin
.../fonts => fonts}/sourcesanspro/light.woff2 | Bin
.../fonts => fonts}/sourcesanspro/regular.eot | Bin
.../fonts => fonts}/sourcesanspro/regular.svg | 0
.../fonts => fonts}/sourcesanspro/regular.ttf | Bin
.../sourcesanspro/regular.woff | Bin
.../sourcesanspro/regular.woff2 | Bin
.../sourcesanspro/semibold.eot | Bin
.../sourcesanspro/semibold.svg | 0
.../sourcesanspro/semibold.ttf | Bin
.../sourcesanspro/semibold.woff | Bin
.../sourcesanspro/semibold.woff2 | Bin
.../owlcarousel/css/ajax-loader.gif | Bin
.../owlcarousel/css/owl.carousel.css | 0
.../owlcarousel/css/owl.carousel.min.css | 0
.../owlcarousel/css/owl.theme.default.css | 0
.../owlcarousel/css/owl.theme.default.min.css | 0
.../owlcarousel/css/owl.theme.green.css | 0
.../owlcarousel/css/owl.theme.green.min.css | 0
.../owlcarousel/css/owl.video.play.png | Bin
.../owlcarousel/js/owl.carousel.js | 0
.../owlcarousel/js/owl.carousel.min.js | 0
.../owlcarousel/js/owl.carousel2.thumbs.js | 0
cern_components/package.json => package.json | 0
.../atoms/background/background.html.twig | 0
.../background/background.ui_patterns.yml | 0
.../atoms/background/css/.gitkeep | 0
.../background/css/background.component.css | 0
.../atoms/background/js/background.js | 0
.../background/scss/background.component.scss | 0
.../atoms/video-item/video-item.html.twig | 0
.../video-item/video-item.ui_patterns.yml | 0
.../molecules/agenda-box/agenda-box.html.twig | 0
.../agenda-box/agenda-box.ui_patterns.yml | 0
.../agenda-box/css/agenda-box.component.css | 0
.../molecules/agenda-box/css/variables.css | 0
.../agenda-box/scss/agenda-box.component.scss | 0
.../molecules/agenda-box/scss/mixins.scss | 0
.../molecules/agenda-box/scss/variables.scss | 0
.../agenda-coming-soon.html.twig | 0
.../agenda-coming-soon.ui_patterns.yml | 0
.../css/agenda-coming-soon.component.css | 0
.../agenda-coming-soon/css/mixins.css | 0
.../agenda-coming-soon/css/variables.css | 0
.../js/agenda-coming-soon.js | 0
.../agenda-coming-soon/js/jquery.countdown.js | 0
.../scss/agenda-coming-soon.component.scss | 0
.../agenda-coming-soon/scss/mixins.scss | 0
.../agenda-coming-soon/scss/variables.scss | 0
.../molecules/agenda/agenda.html.twig | 0
.../molecules/agenda/agenda.ui_patterns.yml | 0
.../molecules/agenda/css/agenda.component.css | 0
.../agenda/scss/agenda.component.scss | 412 +++---
.../molecules/agenda/scss}/mixins.scss | 0
.../molecules/agenda/scss/variables.scss | 116 +-
.../basic-display/basic-display.html.twig | 0
.../basic-display.ui_patterns.yml | 0
.../css/basic-display.component.css | 0
.../scss/basic-display.component.scss | 0
.../call-action/call-action.html.twig | 0
.../call-action/call-action.ui_patterns.yml | 0
.../css/calltoaction.component.css | 0
.../molecules/call-action/css/variables.css | 0
.../sass/calltoaction.component.scss | 240 ++--
.../molecules/call-action/sass}/mixins.scss | 0
.../molecules/call-action/sass/variables.scss | 170 +--
.../divisions/css/divisions.component.css | 0
.../molecules/divisions/divisions.html.twig | 0
.../divisions/divisions.ui_patterns.yml | 0
.../molecules/divisions/js/divisions.js | 0
.../divisions/sass/divisions.component.scss | 0
.../molecules/divisions}/sass/mixins.scss | 0
.../molecules/divisions/sass/variables.scss | 0
.../css/event-display.component.css | 0
.../event-display/event-display.html.twig | 0
.../event-display.ui_patterns.yml | 0
.../js/event-display.component.js | 0
.../scss/event-display.component.scss | 0
.../molecules/event-display/scss}/mixins.scss | 0
.../event-display/scss/variables.scss | 0
.../faq-box/css/faq-box.component.css | 0
.../molecules/faq-box/faq-box.html.twig | 0
.../molecules/faq-box/faq-box.ui_patterns.yml | 0
.../faq-box/scss/faq-box.component.scss | 0
.../faq-display/css/faq-display.component.css | 0
.../faq-display/faq-display.html.twig | 0
.../faq-display/faq-display.ui_patterns.yml | 0
.../faq-display/images/loading-cern.gif | Bin
.../faq-display/js/faq-display.component.js | 0
.../scss/faq-display.component.scss | 0
.../faq-list/css/faq-list.component.css | 0
.../molecules/faq-list/faq-list.html.twig | 0
.../faq-list/faq-list.ui_patterns.yml | 0
.../faq-list/js/faq-list.component.js | 0
.../faq-list/scss/faq-list.component.css | 0
.../faq-list/scss/faq-list.component.scss | 0
.../feature-story-page.html.twig | 0
.../feature-story-page.ui_patterns.yml | 0
.../gallery/css/gallery-component.css | 0
.../molecules/gallery/gallery.html.twig | 0
.../molecules/gallery/gallery.ui_patterns.yml | 0
.../molecules/gallery/images/video.png | Bin
.../gallery/js/colorbox/colorbox.css | 0
.../gallery/js/colorbox/images/_loading.gif | Bin
.../gallery/js/colorbox/images/controls.png | Bin
.../gallery/js/colorbox/images/loading.gif | Bin
.../js/colorbox/jquery.colorbox-min.js | 0
.../gallery/js/colorbox/jquery.colorbox.js | 0
.../molecules/gallery/js/gallery_carousel.js | 0
.../gallery/sass/gallery-component.scss | 0
.../molecules/gallery}/sass/mixins.scss | 0
.../molecules/gallery/sass/variables.scss | 0
.../header-block/css/header-component.css | 0
.../header-block/header-block.html.twig | 0
.../header-block/header-block.ui_patterns.yml | 0
.../header-block/sass/header-component.scss | 0
.../molecules/header-block/sass}/mixins.scss | 0
.../header-block/sass/variables.scss | 0
.../header-blocks/css/header_blocks.css | 0
.../header-blocks/header-blocks.html.twig | 0
.../header-blocks.ui_patterns.yml | 0
.../header-blocks/images/arrow-black.png | Bin
.../header-blocks/images/arrow-blue.png | Bin
.../header-blocks/js/header_carousel.js | 0
.../molecules/icon/css/icon-component.css | 0
.../molecules/icon/css/icon-styles.css | 0
.../molecules/icon/icon.html.twig | 0
.../molecules/icon/icon.ui_patterns.yml | 0
.../molecules/icon/sass/icon-component.scss | 0
.../molecules/icon}/sass/mixins.scss | 0
.../molecules/icon/sass/variables.scss | 0
.../molecules/icons/icons.html.twig | 0
.../molecules/icons/icons.ui_patterns.yml | 0
.../molecules/margin/css/margin.component.css | 0
.../molecules/margin/margin.html.twig | 0
.../molecules/margin/margin.ui_patterns.yml | 0
.../margin/scss/margin.component.scss | 0
.../molecules/media/css/media.component.css | 826 ++++++------
.../media/css/media.component.css.map | 0
.../molecules/media/media.html.twig | 0
.../molecules/media/media.ui_patterns.yml | 0
.../molecules/media/sass/media.component.scss | 0
.../molecules/media/sass/mixins.scss | 0
.../molecules/media/sass/variables.scss | 0
.../molecules/menu/css/menu.component.css | 0
.../molecules/menu/js/menu.component.js | 0
.../molecules/menu/menu.html.twig | 0
.../molecules/menu/menu.ui_patterns.yml | 0
.../molecules/menu/sass/menu.component.scss | 0
.../css/news-display.component.css | 0
.../molecules/news-display/images/pagebg.png | Bin
.../news-display/js/news-display.component.js | 0
.../news-display/news-display.html.twig | 0
.../news-display/news-display.ui_patterns.yml | 0
.../scss/news-display.component.scss | 0
.../css/page-navigation.component.1.css | 0
.../css/page-navigation.component.css | 0
.../js/page-navigation.component.js | 0
.../js/page-navigation.component.js.works | 0
.../page-navigation/page-navigation.html.twig | 0
.../page-navigation.ui_patterns.yml | 0
.../scss/page-navigation.component.scss | 0
.../peoples-profile/css/profile.component.css | 0
.../peoples-profile/peoples-profile.html.twig | 0
.../peoples-profile.ui_patterns.yml | 0
.../peoples-profile/scss}/mixins.scss | 0
.../scss/profile.component.scss | 164 +--
.../peoples-profile/scss/variables.scss | 120 +-
.../css/component-preview-card.css | 0
.../css/component.preview.card.css | 0
.../images/arrow-orange-little.png | Bin
.../molecules/preview-card/images/cern.png | Bin
.../preview-card/images/previous-card.png | Bin
.../preview-card/js/component-preview-card.js | 0
.../preview-card/preview-card.html.twig | 0
.../preview-card/preview-card.ui_patterns.yml | 0
.../sass/component-preview-card.scss | 954 +++++++-------
.../molecules/preview-card/sass}/mixins.scss | 0
.../preview-card/sass/variables.scss | 90 +-
.../css/preview-grid.component.css | 0
.../preview-grid.ui_patterns.html.twig | 0
.../preview-grid/preview-grid.ui_patterns.yml | 0
.../scss/preview-grid.component.scss | 0
.../css/preview-list.component.css | 0
.../molecules/preview-list/images/cern.png | Bin
.../molecules/preview-list/js/preview-list.js | 0
.../preview-list.ui_patterns.html.twig | 0
.../preview-list/preview-list.ui_patterns.yml | 0
.../scss/preview-list.component.scss | 0
.../molecules/quote/css/quote.component.css | 0
.../molecules/quote/images/quote-after.png | Bin
.../molecules/quote/images/quote-before.png | Bin
.../molecules/quote/quote.html.twig | 0
.../molecules/quote/quote.ui_patterns.yml | 0
.../molecules/quote}/scss/mixins.scss | 1132 ++++++++---------
.../molecules/quote/scss/quote.component.scss | 0
.../molecules/quote/scss/variables.scss | 0
.../css/component-related_card.css | 860 ++++++-------
.../css/component-related_card.css.map | 0
.../related-card/related-card.html.twig | 0
.../related-card/related-card.ui_patterns.yml | 0
.../sass/component-related_card.scss | 0
.../molecules/related-card/sass}/mixins.scss | 1132 ++++++++---------
.../related-card/sass/variables.scss | 0
.../css/component-related_content.css | 0
.../css/component-related_content.css.map | 0
.../related-content/related-content.html.twig | 0
.../related-content.ui_patterns.yml | 0
.../sass/component-related_content.scss | 0
.../related-content}/sass/mixins.scss | 1132 ++++++++---------
.../related-content/sass/variables.scss | 0
.../css/resource-display.component.css | 0
.../resource-display/images/video.png | Bin
.../js/resource-display.component.js | 0
.../resource-display.html.twig | 0
.../resource-display.ui_patterns.yml | 0
.../scss/resource-display.component.scss | 0
.../molecules/row/css/row.component.css | 0
.../molecules/row/js/row.component.js | 0
.../molecules/row/row.html.twig | 4 +-
.../molecules/row/row.ui_patterns.yml | 0
.../molecules/row/scss}/mixins.scss | 1132 ++++++++---------
.../molecules/row/scss/row.component.scss | 0
.../molecules/row/scss/variables.scss | 0
.../molecules/slide/css/slide.component.css | 0
patterns/molecules/slide/sass/mixins.scss | 567 +++++++++
.../molecules/slide/sass/slide.component.scss | 206 +--
.../molecules/slide/sass/variables.scss | 178 +--
.../molecules/slide/slide.html.twig | 0
.../molecules/slide/slide.ui_patterns.yml | 0
.../molecules/slider/css/slider.component.css | 0
.../molecules/slider/js/slider_carousel.js | 0
patterns/molecules/slider/sass/mixins.scss | 567 +++++++++
.../slider/sass/slider.component.scss | 382 +++---
.../molecules/slider/sass/variables.scss | 158 +--
.../molecules/slider/slider.html.twig | 0
.../molecules/slider/slider.ui_patterns.yml | 0
.../story-page/css/story-page.component.css | 0
.../story-page/js/story-page.component.js | 0
.../story-page/scss/story-page.component.scss | 0
.../molecules/story-page/story-page.html.twig | 0
.../story-page/story-page.ui_patterns.yml | 0
.../css/system-display.component.css | 0
.../scss/system-display.component.scss | 0
.../system-display/system-display.html.twig | 0
.../system-display.ui_patterns.yml | 0
.../molecules/text/css/text.component.css | 0
.../molecules/text/scss/text.component.scss | 0
.../molecules/text/text.html.twig | 0
.../molecules/text/text.ui_patterns.yml | 0
.../timeline/css/timeline.component.css | 0
.../timeline/js/timeline.component.js | 0
.../timeline/scss/timeline.component.scss | 0
.../molecules/timeline/timeline.html.twig | 0
.../timeline/timeline.ui_patterns.yml | 0
.../templates/simple/css/simple.component.css | 0
.../simple/scss/simple.component.scss | 0
.../templates/simple/simple.html.twig | 0
.../templates/simple/simple.ui_patterns.yml | 0
.../CernComponentsTwigExtension.php | 0
311 files changed, 5838 insertions(+), 5838 deletions(-)
rename cern_components/Gruntfile.js => Gruntfile.js (100%)
rename cern_components/cern_components.info.yml => cern_components.info.yml (100%)
rename cern_components/cern_components.libraries.yml => cern_components.libraries.yml (100%)
rename cern_components/cern_components.module => cern_components.module (100%)
rename cern_components/cern_components.services.yml => cern_components.services.yml (100%)
delete mode 100755 cern_components/patterns/molecules/slide/sass/mixins.scss
delete mode 100755 cern_components/patterns/molecules/slider/sass/mixins.scss
delete mode 100644 cern_components/patterns/molecules/story-page/images/video.png
rename {cern_components/fonts => fonts}/cern/cern.eot (100%)
rename {cern_components/fonts => fonts}/cern/cern.svg (100%)
rename {cern_components/fonts => fonts}/cern/cern.ttf (100%)
rename {cern_components/fonts => fonts}/cern/cern.woff (100%)
rename {cern_components/fonts => fonts}/cern/cern.woff2 (100%)
rename {cern_components/fonts => fonts}/open-sans/bold.eot (100%)
rename {cern_components/fonts => fonts}/open-sans/bold.svg (100%)
rename {cern_components/fonts => fonts}/open-sans/bold.ttf (100%)
rename {cern_components/fonts => fonts}/open-sans/bold.woff (100%)
rename {cern_components/fonts => fonts}/open-sans/bold.woff2 (100%)
rename {cern_components/fonts => fonts}/open-sans/regular.eot (100%)
rename {cern_components/fonts => fonts}/open-sans/regular.svg (100%)
rename {cern_components/fonts => fonts}/open-sans/regular.ttf (100%)
rename {cern_components/fonts => fonts}/open-sans/regular.woff (100%)
rename {cern_components/fonts => fonts}/open-sans/regular.woff2 (100%)
rename {cern_components/fonts => fonts}/open-sans/semibold.eot (100%)
rename {cern_components/fonts => fonts}/open-sans/semibold.svg (100%)
rename {cern_components/fonts => fonts}/open-sans/semibold.ttf (100%)
rename {cern_components/fonts => fonts}/open-sans/semibold.woff (100%)
rename {cern_components/fonts => fonts}/open-sans/semibold.woff2 (100%)
rename {cern_components/fonts => fonts}/poppins/bold.eot (100%)
rename {cern_components/fonts => fonts}/poppins/bold.svg (100%)
rename {cern_components/fonts => fonts}/poppins/bold.ttf (100%)
rename {cern_components/fonts => fonts}/poppins/bold.woff (100%)
rename {cern_components/fonts => fonts}/poppins/bold.woff2 (100%)
rename {cern_components/fonts => fonts}/poppins/regular.eot (100%)
rename {cern_components/fonts => fonts}/poppins/regular.svg (100%)
rename {cern_components/fonts => fonts}/poppins/regular.ttf (100%)
rename {cern_components/fonts => fonts}/poppins/regular.woff (100%)
rename {cern_components/fonts => fonts}/poppins/regular.woff2 (100%)
rename {cern_components/fonts => fonts}/poppins/semibold.eot (100%)
rename {cern_components/fonts => fonts}/poppins/semibold.svg (100%)
rename {cern_components/fonts => fonts}/poppins/semibold.ttf (100%)
rename {cern_components/fonts => fonts}/poppins/semibold.woff (100%)
rename {cern_components/fonts => fonts}/poppins/semibold.woff2 (100%)
rename {cern_components/fonts => fonts}/sourcesanspro/bold.eot (100%)
rename {cern_components/fonts => fonts}/sourcesanspro/bold.svg (100%)
rename {cern_components/fonts => fonts}/sourcesanspro/bold.ttf (100%)
rename {cern_components/fonts => fonts}/sourcesanspro/bold.woff (100%)
rename {cern_components/fonts => fonts}/sourcesanspro/bold.woff2 (100%)
rename {cern_components/fonts => fonts}/sourcesanspro/light.eot (100%)
rename {cern_components/fonts => fonts}/sourcesanspro/light.svg (100%)
rename {cern_components/fonts => fonts}/sourcesanspro/light.ttf (100%)
rename {cern_components/fonts => fonts}/sourcesanspro/light.woff (100%)
rename {cern_components/fonts => fonts}/sourcesanspro/light.woff2 (100%)
rename {cern_components/fonts => fonts}/sourcesanspro/regular.eot (100%)
rename {cern_components/fonts => fonts}/sourcesanspro/regular.svg (100%)
rename {cern_components/fonts => fonts}/sourcesanspro/regular.ttf (100%)
rename {cern_components/fonts => fonts}/sourcesanspro/regular.woff (100%)
rename {cern_components/fonts => fonts}/sourcesanspro/regular.woff2 (100%)
rename {cern_components/fonts => fonts}/sourcesanspro/semibold.eot (100%)
rename {cern_components/fonts => fonts}/sourcesanspro/semibold.svg (100%)
rename {cern_components/fonts => fonts}/sourcesanspro/semibold.ttf (100%)
rename {cern_components/fonts => fonts}/sourcesanspro/semibold.woff (100%)
rename {cern_components/fonts => fonts}/sourcesanspro/semibold.woff2 (100%)
rename {cern_components/libraries => libraries}/owlcarousel/css/ajax-loader.gif (100%)
rename {cern_components/libraries => libraries}/owlcarousel/css/owl.carousel.css (100%)
rename {cern_components/libraries => libraries}/owlcarousel/css/owl.carousel.min.css (100%)
rename {cern_components/libraries => libraries}/owlcarousel/css/owl.theme.default.css (100%)
rename {cern_components/libraries => libraries}/owlcarousel/css/owl.theme.default.min.css (100%)
rename {cern_components/libraries => libraries}/owlcarousel/css/owl.theme.green.css (100%)
rename {cern_components/libraries => libraries}/owlcarousel/css/owl.theme.green.min.css (100%)
rename {cern_components/libraries => libraries}/owlcarousel/css/owl.video.play.png (100%)
rename {cern_components/libraries => libraries}/owlcarousel/js/owl.carousel.js (100%)
rename {cern_components/libraries => libraries}/owlcarousel/js/owl.carousel.min.js (100%)
rename {cern_components/libraries => libraries}/owlcarousel/js/owl.carousel2.thumbs.js (100%)
rename cern_components/package.json => package.json (100%)
rename {cern_components/patterns => patterns}/atoms/background/background.html.twig (100%)
rename {cern_components/patterns => patterns}/atoms/background/background.ui_patterns.yml (100%)
rename {cern_components/patterns => patterns}/atoms/background/css/.gitkeep (100%)
rename {cern_components/patterns => patterns}/atoms/background/css/background.component.css (100%)
rename {cern_components/patterns => patterns}/atoms/background/js/background.js (100%)
rename {cern_components/patterns => patterns}/atoms/background/scss/background.component.scss (100%)
rename {cern_components/patterns => patterns}/atoms/video-item/video-item.html.twig (100%)
rename {cern_components/patterns => patterns}/atoms/video-item/video-item.ui_patterns.yml (100%)
rename {cern_components/patterns => patterns}/molecules/agenda-box/agenda-box.html.twig (100%)
rename {cern_components/patterns => patterns}/molecules/agenda-box/agenda-box.ui_patterns.yml (100%)
rename {cern_components/patterns => patterns}/molecules/agenda-box/css/agenda-box.component.css (100%)
rename {cern_components/patterns => patterns}/molecules/agenda-box/css/variables.css (100%)
rename {cern_components/patterns => patterns}/molecules/agenda-box/scss/agenda-box.component.scss (100%)
rename {cern_components/patterns => patterns}/molecules/agenda-box/scss/mixins.scss (100%)
rename {cern_components/patterns => patterns}/molecules/agenda-box/scss/variables.scss (100%)
rename {cern_components/patterns => patterns}/molecules/agenda-coming-soon/agenda-coming-soon.html.twig (100%)
rename {cern_components/patterns => patterns}/molecules/agenda-coming-soon/agenda-coming-soon.ui_patterns.yml (100%)
rename {cern_components/patterns => patterns}/molecules/agenda-coming-soon/css/agenda-coming-soon.component.css (100%)
rename {cern_components/patterns => patterns}/molecules/agenda-coming-soon/css/mixins.css (100%)
rename {cern_components/patterns => patterns}/molecules/agenda-coming-soon/css/variables.css (100%)
rename {cern_components/patterns => patterns}/molecules/agenda-coming-soon/js/agenda-coming-soon.js (100%)
rename {cern_components/patterns => patterns}/molecules/agenda-coming-soon/js/jquery.countdown.js (100%)
rename {cern_components/patterns => patterns}/molecules/agenda-coming-soon/scss/agenda-coming-soon.component.scss (100%)
rename {cern_components/patterns => patterns}/molecules/agenda-coming-soon/scss/mixins.scss (100%)
rename {cern_components/patterns => patterns}/molecules/agenda-coming-soon/scss/variables.scss (100%)
rename {cern_components/patterns => patterns}/molecules/agenda/agenda.html.twig (100%)
rename {cern_components/patterns => patterns}/molecules/agenda/agenda.ui_patterns.yml (100%)
rename {cern_components/patterns => patterns}/molecules/agenda/css/agenda.component.css (100%)
rename {cern_components/patterns => patterns}/molecules/agenda/scss/agenda.component.scss (97%)
rename {cern_components/patterns/molecules/divisions/sass => patterns/molecules/agenda/scss}/mixins.scss (100%)
rename {cern_components/patterns => patterns}/molecules/agenda/scss/variables.scss (94%)
rename {cern_components/patterns => patterns}/molecules/basic-display/basic-display.html.twig (100%)
rename {cern_components/patterns => patterns}/molecules/basic-display/basic-display.ui_patterns.yml (100%)
rename {cern_components/patterns => patterns}/molecules/basic-display/css/basic-display.component.css (100%)
rename {cern_components/patterns => patterns}/molecules/basic-display/scss/basic-display.component.scss (100%)
rename {cern_components/patterns => patterns}/molecules/call-action/call-action.html.twig (100%)
rename {cern_components/patterns => patterns}/molecules/call-action/call-action.ui_patterns.yml (100%)
rename {cern_components/patterns => patterns}/molecules/call-action/css/calltoaction.component.css (100%)
rename {cern_components/patterns => patterns}/molecules/call-action/css/variables.css (100%)
rename {cern_components/patterns => patterns}/molecules/call-action/sass/calltoaction.component.scss (98%)
rename {cern_components/patterns/molecules/event-display/scss => patterns/molecules/call-action/sass}/mixins.scss (100%)
mode change 100644 => 100755
rename {cern_components/patterns => patterns}/molecules/call-action/sass/variables.scss (94%)
rename {cern_components/patterns => patterns}/molecules/divisions/css/divisions.component.css (100%)
rename {cern_components/patterns => patterns}/molecules/divisions/divisions.html.twig (100%)
rename {cern_components/patterns => patterns}/molecules/divisions/divisions.ui_patterns.yml (100%)
rename {cern_components/patterns => patterns}/molecules/divisions/js/divisions.js (100%)
rename {cern_components/patterns => patterns}/molecules/divisions/sass/divisions.component.scss (100%)
rename {cern_components/patterns/molecules/gallery => patterns/molecules/divisions}/sass/mixins.scss (100%)
rename {cern_components/patterns => patterns}/molecules/divisions/sass/variables.scss (100%)
rename {cern_components/patterns => patterns}/molecules/event-display/css/event-display.component.css (100%)
rename {cern_components/patterns => patterns}/molecules/event-display/event-display.html.twig (100%)
rename {cern_components/patterns => patterns}/molecules/event-display/event-display.ui_patterns.yml (100%)
rename {cern_components/patterns => patterns}/molecules/event-display/js/event-display.component.js (100%)
rename {cern_components/patterns => patterns}/molecules/event-display/scss/event-display.component.scss (100%)
rename {cern_components/patterns/molecules/header-block/sass => patterns/molecules/event-display/scss}/mixins.scss (100%)
mode change 100755 => 100644
rename {cern_components/patterns => patterns}/molecules/event-display/scss/variables.scss (100%)
rename {cern_components/patterns => patterns}/molecules/faq-box/css/faq-box.component.css (100%)
rename {cern_components/patterns => patterns}/molecules/faq-box/faq-box.html.twig (100%)
rename {cern_components/patterns => patterns}/molecules/faq-box/faq-box.ui_patterns.yml (100%)
rename {cern_components/patterns => patterns}/molecules/faq-box/scss/faq-box.component.scss (100%)
rename {cern_components/patterns => patterns}/molecules/faq-display/css/faq-display.component.css (100%)
rename {cern_components/patterns => patterns}/molecules/faq-display/faq-display.html.twig (100%)
rename {cern_components/patterns => patterns}/molecules/faq-display/faq-display.ui_patterns.yml (100%)
rename {cern_components/patterns => patterns}/molecules/faq-display/images/loading-cern.gif (100%)
rename {cern_components/patterns => patterns}/molecules/faq-display/js/faq-display.component.js (100%)
rename {cern_components/patterns => patterns}/molecules/faq-display/scss/faq-display.component.scss (100%)
rename {cern_components/patterns => patterns}/molecules/faq-list/css/faq-list.component.css (100%)
rename {cern_components/patterns => patterns}/molecules/faq-list/faq-list.html.twig (100%)
rename {cern_components/patterns => patterns}/molecules/faq-list/faq-list.ui_patterns.yml (100%)
rename {cern_components/patterns => patterns}/molecules/faq-list/js/faq-list.component.js (100%)
rename {cern_components/patterns => patterns}/molecules/faq-list/scss/faq-list.component.css (100%)
rename {cern_components/patterns => patterns}/molecules/faq-list/scss/faq-list.component.scss (100%)
rename {cern_components/patterns => patterns}/molecules/feature-story-page/feature-story-page.html.twig (100%)
rename {cern_components/patterns => patterns}/molecules/feature-story-page/feature-story-page.ui_patterns.yml (100%)
rename {cern_components/patterns => patterns}/molecules/gallery/css/gallery-component.css (100%)
rename {cern_components/patterns => patterns}/molecules/gallery/gallery.html.twig (100%)
rename {cern_components/patterns => patterns}/molecules/gallery/gallery.ui_patterns.yml (100%)
rename {cern_components/patterns => patterns}/molecules/gallery/images/video.png (100%)
rename {cern_components/patterns => patterns}/molecules/gallery/js/colorbox/colorbox.css (100%)
rename {cern_components/patterns => patterns}/molecules/gallery/js/colorbox/images/_loading.gif (100%)
rename {cern_components/patterns => patterns}/molecules/gallery/js/colorbox/images/controls.png (100%)
rename {cern_components/patterns => patterns}/molecules/gallery/js/colorbox/images/loading.gif (100%)
rename {cern_components/patterns => patterns}/molecules/gallery/js/colorbox/jquery.colorbox-min.js (100%)
rename {cern_components/patterns => patterns}/molecules/gallery/js/colorbox/jquery.colorbox.js (100%)
rename {cern_components/patterns => patterns}/molecules/gallery/js/gallery_carousel.js (100%)
rename {cern_components/patterns => patterns}/molecules/gallery/sass/gallery-component.scss (100%)
rename {cern_components/patterns/molecules/icon => patterns/molecules/gallery}/sass/mixins.scss (100%)
mode change 100644 => 100755
rename {cern_components/patterns => patterns}/molecules/gallery/sass/variables.scss (100%)
rename {cern_components/patterns => patterns}/molecules/header-block/css/header-component.css (100%)
rename {cern_components/patterns => patterns}/molecules/header-block/header-block.html.twig (100%)
rename {cern_components/patterns => patterns}/molecules/header-block/header-block.ui_patterns.yml (100%)
rename {cern_components/patterns => patterns}/molecules/header-block/sass/header-component.scss (100%)
rename {cern_components/patterns/molecules/quote/scss => patterns/molecules/header-block/sass}/mixins.scss (100%)
mode change 100644 => 100755
rename {cern_components/patterns => patterns}/molecules/header-block/sass/variables.scss (100%)
rename {cern_components/patterns => patterns}/molecules/header-blocks/css/header_blocks.css (100%)
rename {cern_components/patterns => patterns}/molecules/header-blocks/header-blocks.html.twig (100%)
rename {cern_components/patterns => patterns}/molecules/header-blocks/header-blocks.ui_patterns.yml (100%)
rename {cern_components/patterns => patterns}/molecules/header-blocks/images/arrow-black.png (100%)
rename {cern_components/patterns => patterns}/molecules/header-blocks/images/arrow-blue.png (100%)
rename {cern_components/patterns => patterns}/molecules/header-blocks/js/header_carousel.js (100%)
rename {cern_components/patterns => patterns}/molecules/icon/css/icon-component.css (100%)
rename {cern_components/patterns => patterns}/molecules/icon/css/icon-styles.css (100%)
rename {cern_components/patterns => patterns}/molecules/icon/icon.html.twig (100%)
rename {cern_components/patterns => patterns}/molecules/icon/icon.ui_patterns.yml (100%)
rename {cern_components/patterns => patterns}/molecules/icon/sass/icon-component.scss (100%)
rename {cern_components/patterns/molecules/related-card => patterns/molecules/icon}/sass/mixins.scss (100%)
mode change 100755 => 100644
rename {cern_components/patterns => patterns}/molecules/icon/sass/variables.scss (100%)
rename {cern_components/patterns => patterns}/molecules/icons/icons.html.twig (100%)
rename {cern_components/patterns => patterns}/molecules/icons/icons.ui_patterns.yml (100%)
rename {cern_components/patterns => patterns}/molecules/margin/css/margin.component.css (100%)
rename {cern_components/patterns => patterns}/molecules/margin/margin.html.twig (100%)
rename {cern_components/patterns => patterns}/molecules/margin/margin.ui_patterns.yml (100%)
rename {cern_components/patterns => patterns}/molecules/margin/scss/margin.component.scss (100%)
rename {cern_components/patterns => patterns}/molecules/media/css/media.component.css (98%)
rename {cern_components/patterns => patterns}/molecules/media/css/media.component.css.map (100%)
rename {cern_components/patterns => patterns}/molecules/media/media.html.twig (100%)
rename {cern_components/patterns => patterns}/molecules/media/media.ui_patterns.yml (100%)
rename {cern_components/patterns => patterns}/molecules/media/sass/media.component.scss (100%)
rename {cern_components/patterns => patterns}/molecules/media/sass/mixins.scss (100%)
rename {cern_components/patterns => patterns}/molecules/media/sass/variables.scss (100%)
rename {cern_components/patterns => patterns}/molecules/menu/css/menu.component.css (100%)
rename {cern_components/patterns => patterns}/molecules/menu/js/menu.component.js (100%)
rename {cern_components/patterns => patterns}/molecules/menu/menu.html.twig (100%)
rename {cern_components/patterns => patterns}/molecules/menu/menu.ui_patterns.yml (100%)
rename {cern_components/patterns => patterns}/molecules/menu/sass/menu.component.scss (100%)
rename {cern_components/patterns => patterns}/molecules/news-display/css/news-display.component.css (100%)
rename {cern_components/patterns => patterns}/molecules/news-display/images/pagebg.png (100%)
rename {cern_components/patterns => patterns}/molecules/news-display/js/news-display.component.js (100%)
rename {cern_components/patterns => patterns}/molecules/news-display/news-display.html.twig (100%)
rename {cern_components/patterns => patterns}/molecules/news-display/news-display.ui_patterns.yml (100%)
rename {cern_components/patterns => patterns}/molecules/news-display/scss/news-display.component.scss (100%)
rename {cern_components/patterns => patterns}/molecules/page-navigation/css/page-navigation.component.1.css (100%)
rename {cern_components/patterns => patterns}/molecules/page-navigation/css/page-navigation.component.css (100%)
rename {cern_components/patterns => patterns}/molecules/page-navigation/js/page-navigation.component.js (100%)
rename {cern_components/patterns => patterns}/molecules/page-navigation/js/page-navigation.component.js.works (100%)
rename {cern_components/patterns => patterns}/molecules/page-navigation/page-navigation.html.twig (100%)
rename {cern_components/patterns => patterns}/molecules/page-navigation/page-navigation.ui_patterns.yml (100%)
rename {cern_components/patterns => patterns}/molecules/page-navigation/scss/page-navigation.component.scss (100%)
rename {cern_components/patterns => patterns}/molecules/peoples-profile/css/profile.component.css (100%)
rename {cern_components/patterns => patterns}/molecules/peoples-profile/peoples-profile.html.twig (100%)
rename {cern_components/patterns => patterns}/molecules/peoples-profile/peoples-profile.ui_patterns.yml (100%)
rename {cern_components/patterns/molecules/related-content/sass => patterns/molecules/peoples-profile/scss}/mixins.scss (100%)
rename {cern_components/patterns => patterns}/molecules/peoples-profile/scss/profile.component.scss (98%)
rename {cern_components/patterns => patterns}/molecules/peoples-profile/scss/variables.scss (94%)
rename {cern_components/patterns => patterns}/molecules/preview-card/css/component-preview-card.css (100%)
rename {cern_components/patterns => patterns}/molecules/preview-card/css/component.preview.card.css (100%)
rename {cern_components/patterns => patterns}/molecules/preview-card/images/arrow-orange-little.png (100%)
rename {cern_components/patterns => patterns}/molecules/preview-card/images/cern.png (100%)
rename {cern_components/patterns => patterns}/molecules/preview-card/images/previous-card.png (100%)
rename {cern_components/patterns => patterns}/molecules/preview-card/js/component-preview-card.js (100%)
rename {cern_components/patterns => patterns}/molecules/preview-card/preview-card.html.twig (100%)
rename {cern_components/patterns => patterns}/molecules/preview-card/preview-card.ui_patterns.yml (100%)
rename {cern_components/patterns => patterns}/molecules/preview-card/sass/component-preview-card.scss (96%)
rename {cern_components/patterns/molecules/row/scss => patterns/molecules/preview-card/sass}/mixins.scss (100%)
rename {cern_components/patterns => patterns}/molecules/preview-card/sass/variables.scss (94%)
rename {cern_components/patterns => patterns}/molecules/preview-grid/css/preview-grid.component.css (100%)
rename {cern_components/patterns => patterns}/molecules/preview-grid/preview-grid.ui_patterns.html.twig (100%)
rename {cern_components/patterns => patterns}/molecules/preview-grid/preview-grid.ui_patterns.yml (100%)
rename {cern_components/patterns => patterns}/molecules/preview-grid/scss/preview-grid.component.scss (100%)
rename {cern_components/patterns => patterns}/molecules/preview-list/css/preview-list.component.css (100%)
rename {cern_components/patterns => patterns}/molecules/preview-list/images/cern.png (100%)
rename {cern_components/patterns => patterns}/molecules/preview-list/js/preview-list.js (100%)
rename {cern_components/patterns => patterns}/molecules/preview-list/preview-list.ui_patterns.html.twig (100%)
rename {cern_components/patterns => patterns}/molecules/preview-list/preview-list.ui_patterns.yml (100%)
rename {cern_components/patterns => patterns}/molecules/preview-list/scss/preview-list.component.scss (100%)
rename {cern_components/patterns => patterns}/molecules/quote/css/quote.component.css (100%)
rename {cern_components/patterns => patterns}/molecules/quote/images/quote-after.png (100%)
rename {cern_components/patterns => patterns}/molecules/quote/images/quote-before.png (100%)
rename {cern_components/patterns => patterns}/molecules/quote/quote.html.twig (100%)
rename {cern_components/patterns => patterns}/molecules/quote/quote.ui_patterns.yml (100%)
rename {cern_components/patterns/molecules/agenda => patterns/molecules/quote}/scss/mixins.scss (96%)
mode change 100755 => 100644
rename {cern_components/patterns => patterns}/molecules/quote/scss/quote.component.scss (100%)
rename {cern_components/patterns => patterns}/molecules/quote/scss/variables.scss (100%)
rename {cern_components/patterns => patterns}/molecules/related-card/css/component-related_card.css (98%)
rename {cern_components/patterns => patterns}/molecules/related-card/css/component-related_card.css.map (100%)
rename {cern_components/patterns => patterns}/molecules/related-card/related-card.html.twig (100%)
rename {cern_components/patterns => patterns}/molecules/related-card/related-card.ui_patterns.yml (100%)
rename {cern_components/patterns => patterns}/molecules/related-card/sass/component-related_card.scss (100%)
rename {cern_components/patterns/molecules/peoples-profile/scss => patterns/molecules/related-card/sass}/mixins.scss (96%)
rename {cern_components/patterns => patterns}/molecules/related-card/sass/variables.scss (100%)
rename {cern_components/patterns => patterns}/molecules/related-content/css/component-related_content.css (100%)
rename {cern_components/patterns => patterns}/molecules/related-content/css/component-related_content.css.map (100%)
rename {cern_components/patterns => patterns}/molecules/related-content/related-content.html.twig (100%)
rename {cern_components/patterns => patterns}/molecules/related-content/related-content.ui_patterns.yml (100%)
rename {cern_components/patterns => patterns}/molecules/related-content/sass/component-related_content.scss (100%)
rename {cern_components/patterns/molecules/call-action => patterns/molecules/related-content}/sass/mixins.scss (96%)
rename {cern_components/patterns => patterns}/molecules/related-content/sass/variables.scss (100%)
rename {cern_components/patterns => patterns}/molecules/resource-display/css/resource-display.component.css (100%)
rename {cern_components/patterns => patterns}/molecules/resource-display/images/video.png (100%)
rename {cern_components/patterns => patterns}/molecules/resource-display/js/resource-display.component.js (100%)
rename {cern_components/patterns => patterns}/molecules/resource-display/resource-display.html.twig (100%)
rename {cern_components/patterns => patterns}/molecules/resource-display/resource-display.ui_patterns.yml (100%)
rename {cern_components/patterns => patterns}/molecules/resource-display/scss/resource-display.component.scss (100%)
rename {cern_components/patterns => patterns}/molecules/row/css/row.component.css (100%)
rename {cern_components/patterns => patterns}/molecules/row/js/row.component.js (100%)
rename {cern_components/patterns => patterns}/molecules/row/row.html.twig (99%)
rename {cern_components/patterns => patterns}/molecules/row/row.ui_patterns.yml (100%)
rename {cern_components/patterns/molecules/preview-card/sass => patterns/molecules/row/scss}/mixins.scss (96%)
rename {cern_components/patterns => patterns}/molecules/row/scss/row.component.scss (100%)
rename {cern_components/patterns => patterns}/molecules/row/scss/variables.scss (100%)
rename {cern_components/patterns => patterns}/molecules/slide/css/slide.component.css (100%)
create mode 100755 patterns/molecules/slide/sass/mixins.scss
rename {cern_components/patterns => patterns}/molecules/slide/sass/slide.component.scss (98%)
rename {cern_components/patterns => patterns}/molecules/slide/sass/variables.scss (94%)
rename {cern_components/patterns => patterns}/molecules/slide/slide.html.twig (100%)
rename {cern_components/patterns => patterns}/molecules/slide/slide.ui_patterns.yml (100%)
rename {cern_components/patterns => patterns}/molecules/slider/css/slider.component.css (100%)
rename {cern_components/patterns => patterns}/molecules/slider/js/slider_carousel.js (100%)
create mode 100755 patterns/molecules/slider/sass/mixins.scss
rename {cern_components/patterns => patterns}/molecules/slider/sass/slider.component.scss (97%)
rename {cern_components/patterns => patterns}/molecules/slider/sass/variables.scss (94%)
rename {cern_components/patterns => patterns}/molecules/slider/slider.html.twig (100%)
rename {cern_components/patterns => patterns}/molecules/slider/slider.ui_patterns.yml (100%)
rename {cern_components/patterns => patterns}/molecules/story-page/css/story-page.component.css (100%)
rename {cern_components/patterns => patterns}/molecules/story-page/js/story-page.component.js (100%)
rename {cern_components/patterns => patterns}/molecules/story-page/scss/story-page.component.scss (100%)
rename {cern_components/patterns => patterns}/molecules/story-page/story-page.html.twig (100%)
rename {cern_components/patterns => patterns}/molecules/story-page/story-page.ui_patterns.yml (100%)
rename {cern_components/patterns => patterns}/molecules/system-display/css/system-display.component.css (100%)
rename {cern_components/patterns => patterns}/molecules/system-display/scss/system-display.component.scss (100%)
rename {cern_components/patterns => patterns}/molecules/system-display/system-display.html.twig (100%)
rename {cern_components/patterns => patterns}/molecules/system-display/system-display.ui_patterns.yml (100%)
rename {cern_components/patterns => patterns}/molecules/text/css/text.component.css (100%)
rename {cern_components/patterns => patterns}/molecules/text/scss/text.component.scss (100%)
rename {cern_components/patterns => patterns}/molecules/text/text.html.twig (100%)
rename {cern_components/patterns => patterns}/molecules/text/text.ui_patterns.yml (100%)
rename {cern_components/patterns => patterns}/molecules/timeline/css/timeline.component.css (100%)
rename {cern_components/patterns => patterns}/molecules/timeline/js/timeline.component.js (100%)
rename {cern_components/patterns => patterns}/molecules/timeline/scss/timeline.component.scss (100%)
rename {cern_components/patterns => patterns}/molecules/timeline/timeline.html.twig (100%)
rename {cern_components/patterns => patterns}/molecules/timeline/timeline.ui_patterns.yml (100%)
rename {cern_components/patterns => patterns}/templates/simple/css/simple.component.css (100%)
rename {cern_components/patterns => patterns}/templates/simple/scss/simple.component.scss (100%)
rename {cern_components/patterns => patterns}/templates/simple/simple.html.twig (100%)
rename {cern_components/patterns => patterns}/templates/simple/simple.ui_patterns.yml (100%)
rename {cern_components/src => src}/TwigExtension/CernComponentsTwigExtension.php (100%)
diff --git a/cern_components/Gruntfile.js b/Gruntfile.js
similarity index 100%
rename from cern_components/Gruntfile.js
rename to Gruntfile.js
diff --git a/cern_components/cern_components.info.yml b/cern_components.info.yml
similarity index 100%
rename from cern_components/cern_components.info.yml
rename to cern_components.info.yml
diff --git a/cern_components/cern_components.libraries.yml b/cern_components.libraries.yml
similarity index 100%
rename from cern_components/cern_components.libraries.yml
rename to cern_components.libraries.yml
diff --git a/cern_components/cern_components.module b/cern_components.module
similarity index 100%
rename from cern_components/cern_components.module
rename to cern_components.module
diff --git a/cern_components/cern_components.services.yml b/cern_components.services.yml
similarity index 100%
rename from cern_components/cern_components.services.yml
rename to cern_components.services.yml
diff --git a/cern_components/patterns/molecules/slide/sass/mixins.scss b/cern_components/patterns/molecules/slide/sass/mixins.scss
deleted file mode 100755
index 6c20dc3f..00000000
--- a/cern_components/patterns/molecules/slide/sass/mixins.scss
+++ /dev/null
@@ -1,567 +0,0 @@
-///
-/// String replace
-///
-@function str-replace($string, $search, $replace: "") {
- $index: str-index($string, $search);
- @if $index {
- @return str-slice($string, 1, $index - 1)+$replace+str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
- }
- @return $string;
-}
-
-///
-/// Font face mixins
-///
-@mixin font-face($name, $path, $weight: null, $style: null, $exts: eot woff ttf svg) {
- $src: null;
- $extmods: ( eot: "?", svg: "#" + str-replace($name, " ", "_"));
- $formats: ( otf: "opentype", ttf: "truetype");
- @each $ext in $exts {
- $extmod: if(map-has-key($extmods, $ext), $ext + map-get($extmods, $ext), $ext);
- $format: if(map-has-key($formats, $ext), map-get($formats, $ext), $ext);
- $src: append($src, url(quote($path + "." + $extmod)) format(quote($format)), comma);
- }
- @font-face {
- font-family: quote($name);
- font-style: $style;
- font-weight: $weight;
- src: $src;
- }
-}
-
-///
-/// Font size mixins
-///
-@mixin font-size($sizeValue: 1.6) {
- font-size: ($sizeValue * 10) + px;
- font-size: $sizeValue + rem;
-}
-
-///
-/// @extend %clearfix;
-///
-%clearfix {
- clear: both;
- &:before,
- &:after {
- content: "";
- display: table;
- }
- &:after {
- clear: both;
- }
-}
-
-/// Adds a browser prefix to the property
-/// @param {*} $property Property
-/// @param {*} $value Value
-@mixin css3-prefix($property,
-$value) {
- -webkit-#{$property}: #{$value};
- -khtml-#{$property}: #{$value};
- -moz-#{$property}: #{$value};
- -ms-#{$property}: #{$value};
- -o-#{$property}: #{$value};
- #{$property}: #{$value};
-}
-
-/// Background Gradient
-/// @param {Color} $startColor [#3C3C3C] - Start Color
-/// @param {Color} $endColor [#999999] - End Color
-@mixin background-gradient($startColor: #3C3C3C,
-$endColor: #999999) {
- background-color: $startColor;
- background-image: -webkit-gradient(linear, left top, left bottom, from($startColor), to($endColor));
- background-image: -webkit-linear-gradient(top, $startColor, $endColor);
- background-image: -moz-linear-gradient(top, $startColor, $endColor);
- background-image: -ms-linear-gradient(top, $startColor, $endColor);
- background-image: -o-linear-gradient(top, $startColor, $endColor);
- background-image: linear-gradient(top, $startColor, $endColor);
- filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#{$startColor}',
- endColorStr='#{$endColor}');
-}
-
-/// Background Horizontal
-/// @param {Color} $startColor [#3C3C3C] - Start Color
-/// @param {Color} $endColor [#999999] - End Color
-@mixin background-horizontal($startColor: #3C3C3C,
-$endColor: #999999) {
- background-color: $startColor;
- background-image: -webkit-gradient(linear, left top, right top, from($startColor), to($endColor));
- background-image: -webkit-linear-gradient(left, $startColor, $endColor);
- background-image: -moz-linear-gradient(left, $startColor, $endColor);
- background-image: -ms-linear-gradient(left, $startColor, $endColor);
- background-image: -o-linear-gradient(left, $startColor, $endColor);
- background-image: linear-gradient(left, $startColor, $endColor);
- filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#{$startColor}',
- endColorStr='#{$endColor}',
- gradientType='1');
-}
-
-/// Background Radial
-/// @param {Color} $startColor [#3C3C3C] - Start Color
-/// @param {Percentage} $startPos [0%] - Start position
-/// @param {Color} $endColor [#999999] - End Color
-/// @param {Percentage} $endPos [100%] - End position
-@mixin background-radial($startColor: #FFFFFF,
-$startPos: 0%,
-$endColor: #000000,
-$endPos:100%) {
- background: -moz-radial-gradient(center, ellipse cover, $startColor $startPos, $endColor $endPos);
- background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop($startPos, $startColor), color-stop($endPos, $endColor));
- background: -webkit-radial-gradient(center, ellipse cover, $startColor $startPos, $endColor $endPos);
- background: -o-radial-gradient(center, ellipse cover, $startColor $startPos, $endColor $endPos);
- background: -ms-radial-gradient(center, ellipse cover, $startColor $startPos, $endColor $endPos);
- background: radial-gradient(ellipse at center, $startColor $startPos, $endColor $endPos);
-}
-
-/// Background Size
-/// @param {Size} $width [100%] - Width
-/// @param {Size} $width [$width] - Height
-/// @require {mixin} css3-prefix
-@mixin background-size($width: 100%,
-$height: $width) {
- @if type-of($width)=='number' and $height !=null {
- @include css3-prefix('background-size',
- $width $height);
- }
- @else {
- @include css3-prefix('background-size',
- $width);
- }
-}
-
-/// Background Color Opacity
-/// @param {Color} $color [100%] - Color
-/// @param {Double} $opacity [0.85] - Opacity
-@mixin background-opacity($color: #000,
-$opacity: 0.85) {
- background: $color;
- background: rgba($color, $opacity);
-}
-
-/// Border Radius
-/// @param {Size} $radius [5px] - Radius
-/// @require {mixin} css3-prefix
-@mixin border-radius($radius: 5px) {
- @include css3-prefix('border-radius',
- $radius);
-}
-
-/// Border Radius Separate
-/// @param {Size} $topLeftRadius [5px] - Top Left
-/// @param {Size} $topRightRadius [5px] - Top Right
-/// @param {Size} $bottomLeftRadius [5px] - Bottom Left
-/// @param {Size} $bottomRightRadius [5px] - Bottom Right
-@mixin border-radius-separate($topLeftRadius: 5px,
-$topRightRadius: 5px,
-$bottomLeftRadius: 5px,
-$bottomRightRadius: 5px) {
- -webkit-border-top-left-radius: $topLeftRadius;
- -webkit-border-top-right-radius: $topRightRadius;
- -webkit-border-bottom-right-radius: $bottomRightRadius;
- -webkit-border-bottom-left-radius: $bottomLeftRadius;
- -moz-border-radius-topleft: $topLeftRadius;
- -moz-border-radius-topright: $topRightRadius;
- -moz-border-radius-bottomright: $bottomRightRadius;
- -moz-border-radius-bottomleft: $bottomLeftRadius;
- border-top-left-radius: $topLeftRadius;
- border-top-right-radius: $topRightRadius;
- border-bottom-right-radius: $bottomRightRadius;
- border-bottom-left-radius: $bottomLeftRadius;
-}
-
-/// Box
-/// @param {*} $orient [horizontal] - Orientation
-/// @param {*} $pack [center] - Pack
-/// @param {*} $align [center] - Align
-/// @require {mixin} css3-prefix
-@mixin box($orient: horizontal,
-$pack: center,
-$align: center) {
- display: -webkit-box;
- display: -moz-box;
- display: box;
- @include css3-prefix('box-orient',
- $orient);
- @include css3-prefix('box-pack',
- $pack);
- @include css3-prefix('box-align',
- $align);
-}
-
-/// Box RGBA
-/// @param {Integer} $r [60] - Red
-/// @param {Integer} $g [3] - Green
-/// @param {Integer} $b [12] - Blue
-/// @param {Double} $opacity [0.23] - Opacity
-/// @param {Color} $color [#3C3C3C] - Color
-@mixin box-rgba($r: 60,
-$g: 3,
-$b: 12,
-$opacity: 0.23,
-$color: #3C3C3C) {
- background-color: transparent;
- background-color: rgba($r, $g, $b, $opacity);
- filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$color}',
- endColorstr='#{$color}');
- zoom: 1;
-}
-
-/// Box Shadow
-/// @param {Size} $x [2px] - X
-/// @param {Size} $y [2px] - Y
-/// @param {Size} $blur [5px] - Blur
-/// @param {Color} $color [rgba(0,0,0,.4)] - Color
-/// @param {Boolean} $inset - Inset
-@mixin box-shadow($x: 2px,
-$y: 2px,
-$blur: 5px,
-$color: rgba(0, 0, 0, .4),
-$inset: "") {
- @if ($inset !="") {
- @include css3-prefix('box-shadow',
- $inset $x $y $blur $color);
- }
- @else {
- @include css3-prefix('box-shadow',
- $x $y $blur $color);
- }
-}
-
-/// Box Sizing
-/// @param {*} $type [border-box] - Type
-/// @require {mixin} css3-prefix
-@mixin box-sizing($type: border-box) {
- @include css3-prefix('box-sizing',
- $type);
-}
-
-/// Columns
-/// @param {Integer} $count [3] - Count
-/// @param {Integer} $gap [10] - Gap
-/// @require {mixin} css3-prefix
-@mixin columns($count: 3,
-$gap: 10) {
- @include css3-prefix('column-count',
- $count);
- @include css3-prefix('column-gap',
- $gap);
-}
-
-/// Double Borders
-/// @param {Color} $colorOne [#3C3C3C] - Color One
-/// @param {Color} $colorTwo [#999999] - Color Two
-/// @param {Size} $radius [0] - Radius
-/// @require {mixin} css3-prefix
-/// @require {mixin} border-radius
-@mixin double-borders($colorOne: #3C3C3C,
-$colorTwo: #999999,
-$radius: 0) {
- border: 1px solid $colorOne;
- @include css3-prefix('box-shadow',
- 0 0 0 1px $colorTwo);
- @include border-radius( $radius);
-}
-
-/// Flex
-/// @param {Integer} $value [1] - Value
-/// @require {mixin} css3-prefix
-@mixin flex($value: 1) {
- @include css3-prefix('box-flex',
- $value);
-}
-
-/// Flip
-/// @param {Double} $scaleX [-1] - ScaleX
-/// @require {mixin} css3-prefix
-@mixin flip($scaleX: -1) {
- @include css3-prefix('transform',
- scaleX($scaleX));
- filter: FlipH;
- -ms-filter: "FlipH";
-}
-
-/// Opacity
-/// @param {Double} $opacity [0.5] - Opacity
-/// @require {mixin} css3-prefix
-@mixin opacity($opacity: 0.5) {
- $opacityMultiplied: ($opacity * 100);
- filter: alpha(opacity=$opacityMultiplied);
- -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=" + $opacityMultiplied + ")";
- @include css3-prefix('opacity',
- $opacity);
-}
-
-/// Outline Radius
-/// @param {Size} $radius [5px] - Radius
-/// @require {mixin} css3-prefix
-@mixin outline-radius($radius: 5px) {
- @include css3-prefix('outline-radius',
- $radius);
-}
-
-/// Resize
-/// @param {*} $directoin [both] - Direction
-/// @require {mixin} css3-prefix
-@mixin resize($direction: both) {
- @include css3-prefix('resize',
- $direction);
-}
-
-/// Rotate
-///
-/// CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html
-/// @param {Double} $deg [0] - Degree
-/// @param {Double} $m11 [0] - M11
-/// @param {Double} $m12 [0] - M12
-/// @param {Double} $m21 [0] - M21
-/// @param {Double} $m22 [0] - M22
-/// @require {mixin} css3-prefix
-@mixin rotate($deg: 0,
-$m11: 0,
-$m12: 0,
-$m21: 0,
-$m22: 0) {
- @include css3-prefix('transform',
- rotate($deg + deg));
- filter: progid:DXImageTransform.Microsoft.Matrix( M11=#{$m11},
- M12=#{$m12},
- M21=#{$m21},
- M22=#{$m22},
- sizingMethod='auto expand');
- zoom: 1;
-}
-
-/// Text Shadow
-/// @param {Size} $x [2px] - X
-/// @param {Size} $y [2px] - Y
-/// @param {Size} $blur [2px] - Blur
-/// @param {Color} $color [rgba(0,0,0,.4)] - Color
-@mixin text-shadow($x: 2px,
-$y: 2px,
-$blur: 5px,
-$color: rgba(0, 0, 0, .4)) {
- text-shadow: $x $y $blur $color;
-}
-
-/// Transform
-/// @param {List} $params - Params
-/// @require {mixin} css3-prefix
-@mixin transform($params) {
- @include css3-prefix('transform',
- $params);
-}
-
-/// Transform-Origin
-/// @param {List} $params - Params
-/// @require {mixin} css3-prefix
-@mixin transform-origin($params) {
- @include css3-prefix('transform-origin',
- $params);
-}
-
-// Transform-Style
-/// @param {List} $params - Params
-/// @require {mixin} css3-prefix
-@mixin transform-style($style: preserve-3d) {
- @include css3-prefix('transform-style',
- $style);
-}
-
-/// Transition
-/// @param {List} $properties - Properties
-/// @require {mixin} css3-prefix
-@mixin transition($properties...) {
- @if length($properties)>=1 {
- @include css3-prefix('transition',
- $properties);
- }
- @else {
- @include css3-prefix('transition',
- "all 0.2s ease-in-out 0s");
- }
-}
-
-/// Triple Borders
-/// @param {Color} $colorOne [#3C3C3C] - Color One
-/// @param {Color} $colorTwo [#999999] - Color Two
-/// @param {Color} $colorThree [#000000] - Color Three
-/// @param {Size} $radius [0] - Radius
-/// @require {mixin} border-radius
-/// @require {mixin} css3-prefix
-@mixin triple-borders($colorOne: #3C3C3C,
-$colorTwo: #999999,
-$colorThree: #000000,
-$radius: 0) {
- border: 1px solid $colorOne;
- @include border-radius($radius);
- @include css3-prefix('box-shadow',
- "0 0 0 1px #{$colorTwo}, 0 0 0 2px #{$colorThree}");
-}
-
-/// Keyframes
-/// @param {*} $animation-name - Animation name
-/// @content [Animation css]
-@mixin keyframes($animation-name) {
- @-webkit-keyframes #{$animation-name} {
- @content;
- }
- @-moz-keyframes #{$animation-name} {
- @content;
- }
- @-ms-keyframes #{$animation-name} {
- @content;
- }
- @-o-keyframes #{$animation-name} {
- @content;
- }
- @keyframes #{$animation-name} {
- @content;
- }
-}
-
-/// Animation
-/// @param {*} $str - name duration timing-function delay iteration-count direction fill-mode play-state ([http://www.w3schools.com/cssref/css3_pr_animation.asp](http://www.w3schools.com/cssref/css3_pr_animation.asp))
-/// @require {mixin} css3-prefix
-@mixin animation($str) {
- @include css3-prefix('animation',
- $str);
-}
-
-// --------------------------------------------------
-// Flexbox SASS mixins
-// The spec: http://www.w3.org/TR/css3-flexbox
-// --------------------------------------------------
-// Flexbox display
-@mixin flexbox() {
- display: -webkit-box;
- display: -moz-box;
- display: -ms-flexbox;
- display: -webkit-flex;
- display: flex;
-}
-
-// The 'flex' shorthand
-// - applies to: flex items
-// <positive-number>, initial, auto, or none
-@mixin flex($values) {
- -webkit-box-flex: $values;
- -moz-box-flex: $values;
- -webkit-flex: $values;
- -ms-flex: $values;
- flex: $values;
-}
-
-// Flex Flow Direction
-// - applies to: flex containers
-// row | row-reverse | column | column-reverse
-@mixin flex-direction($direction) {
- -webkit-flex-direction: $direction;
- -moz-flex-direction: $direction;
- -ms-flex-direction: $direction;
- flex-direction: $direction;
-}
-
-// Flex Line Wrapping
-// - applies to: flex containers
-// nowrap | wrap | wrap-reverse
-@mixin flex-wrap($wrap) {
- -webkit-flex-wrap: $wrap;
- -moz-flex-wrap: $wrap;
- -ms-flex-wrap: $wrap;
- flex-wrap: $wrap;
-}
-
-// Flex Direction and Wrap
-// - applies to: flex containers
-// <flex-direction> || <flex-wrap>
-@mixin flex-flow($flow) {
- -webkit-flex-flow: $flow;
- -moz-flex-flow: $flow;
- -ms-flex-flow: $flow;
- flex-flow: $flow;
-}
-
-// Display Order
-// - applies to: flex items
-// <integer>
-@mixin order($val) {
- -webkit-box-ordinal-group: $val;
- -moz-box-ordinal-group: $val;
- -ms-flex-order: $val;
- -webkit-order: $val;
- order: $val;
-}
-
-// Flex grow factor
-// - applies to: flex items
-// <number>
-@mixin flex-grow($grow) {
- -webkit-flex-grow: $grow;
- -moz-flex-grow: $grow;
- -ms-flex-grow: $grow;
- flex-grow: $grow;
-}
-
-// Flex shrink
-// - applies to: flex item shrink factor
-// <number>
-@mixin flex-shrink($shrink) {
- -webkit-flex-shrink: $shrink;
- -moz-flex-shrink: $shrink;
- -ms-flex-shrink: $shrink;
- flex-shrink: $shrink;
-}
-
-// Flex basis
-// - the initial main size of the flex item
-// - applies to: flex itemsnitial main size of the flex item
-// <width>
-@mixin flex-basis($width) {
- -webkit-flex-basis: $width;
- -moz-flex-basis: $width;
- -ms-flex-basis: $width;
- flex-basis: $width;
-}
-
-// Axis Alignment
-// - applies to: flex containers
-// flex-start | flex-end | center | space-between | space-around
-@mixin justify-content($justify) {
- -webkit-justify-content: $justify;
- -moz-justify-content: $justify;
- -ms-justify-content: $justify;
- justify-content: $justify;
- -ms-flex-pack: $justify;
-}
-
-// Packing Flex Lines
-// - applies to: multi-line flex containers
-// flex-start | flex-end | center | space-between | space-around | stretch
-@mixin align-content($align) {
- -webkit-align-content: $align;
- -moz-align-content: $align;
- -ms-align-content: $align;
- align-content: $align;
-}
-
-// Cross-axis Alignment
-// - applies to: flex containers
-// flex-start | flex-end | center | baseline | stretch
-@mixin align-items($align) {
- -webkit-align-items: $align;
- -moz-align-items: $align;
- -ms-align-items: $align;
- align-items: $align;
-}
-
-// Cross-axis Alignment
-// - applies to: flex items
-// auto | flex-start | flex-end | center | baseline | stretch
-@mixin align-self($align) {
- -webkit-align-self: $align;
- -moz-align-self: $align;
- -ms-align-self: $align;
- align-self: $align;
-}
\ No newline at end of file
diff --git a/cern_components/patterns/molecules/slider/sass/mixins.scss b/cern_components/patterns/molecules/slider/sass/mixins.scss
deleted file mode 100755
index 6c20dc3f..00000000
--- a/cern_components/patterns/molecules/slider/sass/mixins.scss
+++ /dev/null
@@ -1,567 +0,0 @@
-///
-/// String replace
-///
-@function str-replace($string, $search, $replace: "") {
- $index: str-index($string, $search);
- @if $index {
- @return str-slice($string, 1, $index - 1)+$replace+str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
- }
- @return $string;
-}
-
-///
-/// Font face mixins
-///
-@mixin font-face($name, $path, $weight: null, $style: null, $exts: eot woff ttf svg) {
- $src: null;
- $extmods: ( eot: "?", svg: "#" + str-replace($name, " ", "_"));
- $formats: ( otf: "opentype", ttf: "truetype");
- @each $ext in $exts {
- $extmod: if(map-has-key($extmods, $ext), $ext + map-get($extmods, $ext), $ext);
- $format: if(map-has-key($formats, $ext), map-get($formats, $ext), $ext);
- $src: append($src, url(quote($path + "." + $extmod)) format(quote($format)), comma);
- }
- @font-face {
- font-family: quote($name);
- font-style: $style;
- font-weight: $weight;
- src: $src;
- }
-}
-
-///
-/// Font size mixins
-///
-@mixin font-size($sizeValue: 1.6) {
- font-size: ($sizeValue * 10) + px;
- font-size: $sizeValue + rem;
-}
-
-///
-/// @extend %clearfix;
-///
-%clearfix {
- clear: both;
- &:before,
- &:after {
- content: "";
- display: table;
- }
- &:after {
- clear: both;
- }
-}
-
-/// Adds a browser prefix to the property
-/// @param {*} $property Property
-/// @param {*} $value Value
-@mixin css3-prefix($property,
-$value) {
- -webkit-#{$property}: #{$value};
- -khtml-#{$property}: #{$value};
- -moz-#{$property}: #{$value};
- -ms-#{$property}: #{$value};
- -o-#{$property}: #{$value};
- #{$property}: #{$value};
-}
-
-/// Background Gradient
-/// @param {Color} $startColor [#3C3C3C] - Start Color
-/// @param {Color} $endColor [#999999] - End Color
-@mixin background-gradient($startColor: #3C3C3C,
-$endColor: #999999) {
- background-color: $startColor;
- background-image: -webkit-gradient(linear, left top, left bottom, from($startColor), to($endColor));
- background-image: -webkit-linear-gradient(top, $startColor, $endColor);
- background-image: -moz-linear-gradient(top, $startColor, $endColor);
- background-image: -ms-linear-gradient(top, $startColor, $endColor);
- background-image: -o-linear-gradient(top, $startColor, $endColor);
- background-image: linear-gradient(top, $startColor, $endColor);
- filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#{$startColor}',
- endColorStr='#{$endColor}');
-}
-
-/// Background Horizontal
-/// @param {Color} $startColor [#3C3C3C] - Start Color
-/// @param {Color} $endColor [#999999] - End Color
-@mixin background-horizontal($startColor: #3C3C3C,
-$endColor: #999999) {
- background-color: $startColor;
- background-image: -webkit-gradient(linear, left top, right top, from($startColor), to($endColor));
- background-image: -webkit-linear-gradient(left, $startColor, $endColor);
- background-image: -moz-linear-gradient(left, $startColor, $endColor);
- background-image: -ms-linear-gradient(left, $startColor, $endColor);
- background-image: -o-linear-gradient(left, $startColor, $endColor);
- background-image: linear-gradient(left, $startColor, $endColor);
- filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#{$startColor}',
- endColorStr='#{$endColor}',
- gradientType='1');
-}
-
-/// Background Radial
-/// @param {Color} $startColor [#3C3C3C] - Start Color
-/// @param {Percentage} $startPos [0%] - Start position
-/// @param {Color} $endColor [#999999] - End Color
-/// @param {Percentage} $endPos [100%] - End position
-@mixin background-radial($startColor: #FFFFFF,
-$startPos: 0%,
-$endColor: #000000,
-$endPos:100%) {
- background: -moz-radial-gradient(center, ellipse cover, $startColor $startPos, $endColor $endPos);
- background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop($startPos, $startColor), color-stop($endPos, $endColor));
- background: -webkit-radial-gradient(center, ellipse cover, $startColor $startPos, $endColor $endPos);
- background: -o-radial-gradient(center, ellipse cover, $startColor $startPos, $endColor $endPos);
- background: -ms-radial-gradient(center, ellipse cover, $startColor $startPos, $endColor $endPos);
- background: radial-gradient(ellipse at center, $startColor $startPos, $endColor $endPos);
-}
-
-/// Background Size
-/// @param {Size} $width [100%] - Width
-/// @param {Size} $width [$width] - Height
-/// @require {mixin} css3-prefix
-@mixin background-size($width: 100%,
-$height: $width) {
- @if type-of($width)=='number' and $height !=null {
- @include css3-prefix('background-size',
- $width $height);
- }
- @else {
- @include css3-prefix('background-size',
- $width);
- }
-}
-
-/// Background Color Opacity
-/// @param {Color} $color [100%] - Color
-/// @param {Double} $opacity [0.85] - Opacity
-@mixin background-opacity($color: #000,
-$opacity: 0.85) {
- background: $color;
- background: rgba($color, $opacity);
-}
-
-/// Border Radius
-/// @param {Size} $radius [5px] - Radius
-/// @require {mixin} css3-prefix
-@mixin border-radius($radius: 5px) {
- @include css3-prefix('border-radius',
- $radius);
-}
-
-/// Border Radius Separate
-/// @param {Size} $topLeftRadius [5px] - Top Left
-/// @param {Size} $topRightRadius [5px] - Top Right
-/// @param {Size} $bottomLeftRadius [5px] - Bottom Left
-/// @param {Size} $bottomRightRadius [5px] - Bottom Right
-@mixin border-radius-separate($topLeftRadius: 5px,
-$topRightRadius: 5px,
-$bottomLeftRadius: 5px,
-$bottomRightRadius: 5px) {
- -webkit-border-top-left-radius: $topLeftRadius;
- -webkit-border-top-right-radius: $topRightRadius;
- -webkit-border-bottom-right-radius: $bottomRightRadius;
- -webkit-border-bottom-left-radius: $bottomLeftRadius;
- -moz-border-radius-topleft: $topLeftRadius;
- -moz-border-radius-topright: $topRightRadius;
- -moz-border-radius-bottomright: $bottomRightRadius;
- -moz-border-radius-bottomleft: $bottomLeftRadius;
- border-top-left-radius: $topLeftRadius;
- border-top-right-radius: $topRightRadius;
- border-bottom-right-radius: $bottomRightRadius;
- border-bottom-left-radius: $bottomLeftRadius;
-}
-
-/// Box
-/// @param {*} $orient [horizontal] - Orientation
-/// @param {*} $pack [center] - Pack
-/// @param {*} $align [center] - Align
-/// @require {mixin} css3-prefix
-@mixin box($orient: horizontal,
-$pack: center,
-$align: center) {
- display: -webkit-box;
- display: -moz-box;
- display: box;
- @include css3-prefix('box-orient',
- $orient);
- @include css3-prefix('box-pack',
- $pack);
- @include css3-prefix('box-align',
- $align);
-}
-
-/// Box RGBA
-/// @param {Integer} $r [60] - Red
-/// @param {Integer} $g [3] - Green
-/// @param {Integer} $b [12] - Blue
-/// @param {Double} $opacity [0.23] - Opacity
-/// @param {Color} $color [#3C3C3C] - Color
-@mixin box-rgba($r: 60,
-$g: 3,
-$b: 12,
-$opacity: 0.23,
-$color: #3C3C3C) {
- background-color: transparent;
- background-color: rgba($r, $g, $b, $opacity);
- filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$color}',
- endColorstr='#{$color}');
- zoom: 1;
-}
-
-/// Box Shadow
-/// @param {Size} $x [2px] - X
-/// @param {Size} $y [2px] - Y
-/// @param {Size} $blur [5px] - Blur
-/// @param {Color} $color [rgba(0,0,0,.4)] - Color
-/// @param {Boolean} $inset - Inset
-@mixin box-shadow($x: 2px,
-$y: 2px,
-$blur: 5px,
-$color: rgba(0, 0, 0, .4),
-$inset: "") {
- @if ($inset !="") {
- @include css3-prefix('box-shadow',
- $inset $x $y $blur $color);
- }
- @else {
- @include css3-prefix('box-shadow',
- $x $y $blur $color);
- }
-}
-
-/// Box Sizing
-/// @param {*} $type [border-box] - Type
-/// @require {mixin} css3-prefix
-@mixin box-sizing($type: border-box) {
- @include css3-prefix('box-sizing',
- $type);
-}
-
-/// Columns
-/// @param {Integer} $count [3] - Count
-/// @param {Integer} $gap [10] - Gap
-/// @require {mixin} css3-prefix
-@mixin columns($count: 3,
-$gap: 10) {
- @include css3-prefix('column-count',
- $count);
- @include css3-prefix('column-gap',
- $gap);
-}
-
-/// Double Borders
-/// @param {Color} $colorOne [#3C3C3C] - Color One
-/// @param {Color} $colorTwo [#999999] - Color Two
-/// @param {Size} $radius [0] - Radius
-/// @require {mixin} css3-prefix
-/// @require {mixin} border-radius
-@mixin double-borders($colorOne: #3C3C3C,
-$colorTwo: #999999,
-$radius: 0) {
- border: 1px solid $colorOne;
- @include css3-prefix('box-shadow',
- 0 0 0 1px $colorTwo);
- @include border-radius( $radius);
-}
-
-/// Flex
-/// @param {Integer} $value [1] - Value
-/// @require {mixin} css3-prefix
-@mixin flex($value: 1) {
- @include css3-prefix('box-flex',
- $value);
-}
-
-/// Flip
-/// @param {Double} $scaleX [-1] - ScaleX
-/// @require {mixin} css3-prefix
-@mixin flip($scaleX: -1) {
- @include css3-prefix('transform',
- scaleX($scaleX));
- filter: FlipH;
- -ms-filter: "FlipH";
-}
-
-/// Opacity
-/// @param {Double} $opacity [0.5] - Opacity
-/// @require {mixin} css3-prefix
-@mixin opacity($opacity: 0.5) {
- $opacityMultiplied: ($opacity * 100);
- filter: alpha(opacity=$opacityMultiplied);
- -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=" + $opacityMultiplied + ")";
- @include css3-prefix('opacity',
- $opacity);
-}
-
-/// Outline Radius
-/// @param {Size} $radius [5px] - Radius
-/// @require {mixin} css3-prefix
-@mixin outline-radius($radius: 5px) {
- @include css3-prefix('outline-radius',
- $radius);
-}
-
-/// Resize
-/// @param {*} $directoin [both] - Direction
-/// @require {mixin} css3-prefix
-@mixin resize($direction: both) {
- @include css3-prefix('resize',
- $direction);
-}
-
-/// Rotate
-///
-/// CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html
-/// @param {Double} $deg [0] - Degree
-/// @param {Double} $m11 [0] - M11
-/// @param {Double} $m12 [0] - M12
-/// @param {Double} $m21 [0] - M21
-/// @param {Double} $m22 [0] - M22
-/// @require {mixin} css3-prefix
-@mixin rotate($deg: 0,
-$m11: 0,
-$m12: 0,
-$m21: 0,
-$m22: 0) {
- @include css3-prefix('transform',
- rotate($deg + deg));
- filter: progid:DXImageTransform.Microsoft.Matrix( M11=#{$m11},
- M12=#{$m12},
- M21=#{$m21},
- M22=#{$m22},
- sizingMethod='auto expand');
- zoom: 1;
-}
-
-/// Text Shadow
-/// @param {Size} $x [2px] - X
-/// @param {Size} $y [2px] - Y
-/// @param {Size} $blur [2px] - Blur
-/// @param {Color} $color [rgba(0,0,0,.4)] - Color
-@mixin text-shadow($x: 2px,
-$y: 2px,
-$blur: 5px,
-$color: rgba(0, 0, 0, .4)) {
- text-shadow: $x $y $blur $color;
-}
-
-/// Transform
-/// @param {List} $params - Params
-/// @require {mixin} css3-prefix
-@mixin transform($params) {
- @include css3-prefix('transform',
- $params);
-}
-
-/// Transform-Origin
-/// @param {List} $params - Params
-/// @require {mixin} css3-prefix
-@mixin transform-origin($params) {
- @include css3-prefix('transform-origin',
- $params);
-}
-
-// Transform-Style
-/// @param {List} $params - Params
-/// @require {mixin} css3-prefix
-@mixin transform-style($style: preserve-3d) {
- @include css3-prefix('transform-style',
- $style);
-}
-
-/// Transition
-/// @param {List} $properties - Properties
-/// @require {mixin} css3-prefix
-@mixin transition($properties...) {
- @if length($properties)>=1 {
- @include css3-prefix('transition',
- $properties);
- }
- @else {
- @include css3-prefix('transition',
- "all 0.2s ease-in-out 0s");
- }
-}
-
-/// Triple Borders
-/// @param {Color} $colorOne [#3C3C3C] - Color One
-/// @param {Color} $colorTwo [#999999] - Color Two
-/// @param {Color} $colorThree [#000000] - Color Three
-/// @param {Size} $radius [0] - Radius
-/// @require {mixin} border-radius
-/// @require {mixin} css3-prefix
-@mixin triple-borders($colorOne: #3C3C3C,
-$colorTwo: #999999,
-$colorThree: #000000,
-$radius: 0) {
- border: 1px solid $colorOne;
- @include border-radius($radius);
- @include css3-prefix('box-shadow',
- "0 0 0 1px #{$colorTwo}, 0 0 0 2px #{$colorThree}");
-}
-
-/// Keyframes
-/// @param {*} $animation-name - Animation name
-/// @content [Animation css]
-@mixin keyframes($animation-name) {
- @-webkit-keyframes #{$animation-name} {
- @content;
- }
- @-moz-keyframes #{$animation-name} {
- @content;
- }
- @-ms-keyframes #{$animation-name} {
- @content;
- }
- @-o-keyframes #{$animation-name} {
- @content;
- }
- @keyframes #{$animation-name} {
- @content;
- }
-}
-
-/// Animation
-/// @param {*} $str - name duration timing-function delay iteration-count direction fill-mode play-state ([http://www.w3schools.com/cssref/css3_pr_animation.asp](http://www.w3schools.com/cssref/css3_pr_animation.asp))
-/// @require {mixin} css3-prefix
-@mixin animation($str) {
- @include css3-prefix('animation',
- $str);
-}
-
-// --------------------------------------------------
-// Flexbox SASS mixins
-// The spec: http://www.w3.org/TR/css3-flexbox
-// --------------------------------------------------
-// Flexbox display
-@mixin flexbox() {
- display: -webkit-box;
- display: -moz-box;
- display: -ms-flexbox;
- display: -webkit-flex;
- display: flex;
-}
-
-// The 'flex' shorthand
-// - applies to: flex items
-// <positive-number>, initial, auto, or none
-@mixin flex($values) {
- -webkit-box-flex: $values;
- -moz-box-flex: $values;
- -webkit-flex: $values;
- -ms-flex: $values;
- flex: $values;
-}
-
-// Flex Flow Direction
-// - applies to: flex containers
-// row | row-reverse | column | column-reverse
-@mixin flex-direction($direction) {
- -webkit-flex-direction: $direction;
- -moz-flex-direction: $direction;
- -ms-flex-direction: $direction;
- flex-direction: $direction;
-}
-
-// Flex Line Wrapping
-// - applies to: flex containers
-// nowrap | wrap | wrap-reverse
-@mixin flex-wrap($wrap) {
- -webkit-flex-wrap: $wrap;
- -moz-flex-wrap: $wrap;
- -ms-flex-wrap: $wrap;
- flex-wrap: $wrap;
-}
-
-// Flex Direction and Wrap
-// - applies to: flex containers
-// <flex-direction> || <flex-wrap>
-@mixin flex-flow($flow) {
- -webkit-flex-flow: $flow;
- -moz-flex-flow: $flow;
- -ms-flex-flow: $flow;
- flex-flow: $flow;
-}
-
-// Display Order
-// - applies to: flex items
-// <integer>
-@mixin order($val) {
- -webkit-box-ordinal-group: $val;
- -moz-box-ordinal-group: $val;
- -ms-flex-order: $val;
- -webkit-order: $val;
- order: $val;
-}
-
-// Flex grow factor
-// - applies to: flex items
-// <number>
-@mixin flex-grow($grow) {
- -webkit-flex-grow: $grow;
- -moz-flex-grow: $grow;
- -ms-flex-grow: $grow;
- flex-grow: $grow;
-}
-
-// Flex shrink
-// - applies to: flex item shrink factor
-// <number>
-@mixin flex-shrink($shrink) {
- -webkit-flex-shrink: $shrink;
- -moz-flex-shrink: $shrink;
- -ms-flex-shrink: $shrink;
- flex-shrink: $shrink;
-}
-
-// Flex basis
-// - the initial main size of the flex item
-// - applies to: flex itemsnitial main size of the flex item
-// <width>
-@mixin flex-basis($width) {
- -webkit-flex-basis: $width;
- -moz-flex-basis: $width;
- -ms-flex-basis: $width;
- flex-basis: $width;
-}
-
-// Axis Alignment
-// - applies to: flex containers
-// flex-start | flex-end | center | space-between | space-around
-@mixin justify-content($justify) {
- -webkit-justify-content: $justify;
- -moz-justify-content: $justify;
- -ms-justify-content: $justify;
- justify-content: $justify;
- -ms-flex-pack: $justify;
-}
-
-// Packing Flex Lines
-// - applies to: multi-line flex containers
-// flex-start | flex-end | center | space-between | space-around | stretch
-@mixin align-content($align) {
- -webkit-align-content: $align;
- -moz-align-content: $align;
- -ms-align-content: $align;
- align-content: $align;
-}
-
-// Cross-axis Alignment
-// - applies to: flex containers
-// flex-start | flex-end | center | baseline | stretch
-@mixin align-items($align) {
- -webkit-align-items: $align;
- -moz-align-items: $align;
- -ms-align-items: $align;
- align-items: $align;
-}
-
-// Cross-axis Alignment
-// - applies to: flex items
-// auto | flex-start | flex-end | center | baseline | stretch
-@mixin align-self($align) {
- -webkit-align-self: $align;
- -moz-align-self: $align;
- -ms-align-self: $align;
- align-self: $align;
-}
\ No newline at end of file
diff --git a/cern_components/patterns/molecules/story-page/images/video.png b/cern_components/patterns/molecules/story-page/images/video.png
deleted file mode 100644
index c8c1adf29bd6f2b146d3794f168d29b37b04f7e4..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001
literal 2114
zcmZ8idpHyN8((rS)hbNPv_jZ&P>16h<}&?Ursa|`*Ot~47KW&U^JBy*%_W6nE~|!F
zt}$I*M-sJRQW{&x{TlI`&hz}v<@rAE_x*g|=lTBeexCR9eo|bV?Brw*$pQcXIix+p
zRg@{)AuTDoQAPF6q9o~m+71EO+CGJ>vP@A$=8C;%H~_Hgz;^5a+`R`96{UzsM;ob8
zNrm0Us*UegszoJmFxrD?eVITA3L%P~0DyH^kRLH9P%Sc;ctOn$>F5%8JV;9PwG@f4
zL`MyN9gab#kyP5|dM<RrwX$i)w8}BEH9#t+Z;&6yXQp~&CDX0Frn6xRRURBzIL2+N
zmcAa;R#ct(neTQR{|dUo9Jsg@mL6XFKoH#BRaw?E>AY~?z-%D~e?C8Vtwb9JgNgS_
zp>IU)(9`xuzoI3B<hKDLjl2z@wl>=UNc{nlQGWwPVb+9B<@i;hp8K;?u&!>u0B=?-
zLcR{J`s7vM(fh3Hin`daB{`bSV~sb}%P;s<M^Fu}>eS(iP7ka`cl4@ak$;x&77FY>
z)UGl)a71H5hq%N!rt@%mr`<<Pr+NiLhJaO0bvlF%GDT(FtIM&J@#S$Ihptbvn2@s{
zhU&Q0*A(5+0B2?a^wYCjqFUz|x}x;daUVyW^~%kPQk;-=X`{Wz?`-#N9Rgr*Rh-w+
zv{exQ^j=m)(;3+rWreqjOH&g}z)qtG{Ri!|v>Ukolt23uk+2Q?(MQE<XcjrsME&u$
z3fqaL-NJR1BwSx>jsj2;JCj8|cW15Y5%8%1po+7A&xbV{*YvLRokIMUaUShjQi}6^
zMw{I)c<oc4>|^~D@nZZWSq9(w!h=4{WN~v%a#yM@5mbBxeBY2jamZ#dmvOa>zP2<7
zCQECtZ6xhah#oQiy2mtr?luaE;^n=8`1_za`XL=pU*F72Bd<>M97SUkZI}MY&C6rw
zxj&Mx0$nsP7~tqV@@=IRU+8DtuoT#gjgMZsGkJ$ivyxi2rgT!&yU*q11@z+%lao8y
zkCj^YK%k_!F2-{P{hUqHNImpJ!%gJ|wcxGeQ}*1{{zXy0dvbA^t)PBQ(EE4g2Nz-k
z$N6)!OCd7DUksw=r#x>NMAX*KE_~-6!`8X}2MuuH)GBDCAM!a~Ae1D&Q7cR+?b_Th
zEjjh?SprIbcbd|b${0n@dkTlL%Tuu?;t}&_ctyOXa77uZ^iiMp2~ge0s}WW%948tM
zn~mxK>R%L#Gr3mERU*WSZ47<${mhi0oqv!v9Iy<2=V!I3(iFS&gxiobQvR|?=}fQ1
z>H+f&q#k~bEFw~X7=<MJFwj6tZ{%q^Vd4XINeRF&4GlTQk%whvWkHmKf}oJGDDyEU
zw8%Jqj!a+U{L)~h+W0$ajJ+|ET~JV&Omlc#cKNWZlKkAAUy-v06KN9(;SU9B_z$S@
zCYlO(DiB-N%mPzyLkk09JQs#d)^(uT7Fft?_2TcQGc%J3PikwFC<o1UHu_pF2A&{>
z!6IG{cgv^ZZ2g7T&B@6QC9ZybWE<%(;KYkrXO~{TtFCG-G=J`)Z{pDYdEYW0CoJ5Q
z2KPfqBvLd^q}YQivBhq3%CG`MFk9friJ2;b)XidZ&iETSSVZKzs{Ko~x1<xz)*3=5
zo#<SK#6Wa}`3}I)-IKu07MGSL$DJZ7F8>tV8mnSKN#q$`Cf}=~yGnouYo7DkrTZWH
zy`&WzMQubPT3}kC#|<WTly-S0ljY(2-s;!`QF40=#Jv5(stg85J#&4{)=^8wQiEql
z=07=;&HkI-ao3p}j{sVJanj5N^{?-lbb?NPI%2Dy#Ixv&Hd)Ar7CnivIK6yT|1lFp
zIgzB+{4K!sXarh5D2`7pvNBhtx@G&b@dhCzcuF?Tz;odP{H};s-MyqXLV!28{H|dT
z+7;mlN^nzsI}OXwfE<n<^{_#RratXts=y(?KozJlei;LdKSps#O6<lnqWj#6y*W?E
zYV0ywr8BE$qCDR;#sKK$^ed~cv{;&PUoR1QTPoov%2`Sjo&X7?vISWj@JYfORNrsT
z{V9KL#=lnNRsuuQqH?%CiO{(6@#43uEQr_arHS<C*AhOVM=VjPO#F=HHmRBe&Z$kj
zigdVWZVMw<0JiGyZVpBEHn&~hFCeCLcr<THsc?aseC0<adbkb;I=L^)sP4OfW#4d{
zoSXS_ZC10Tl`zK~=iuYf2p6sFGwKpcuO}S6=Ei4CZPi;^9tBI@SN!>*t4f>tjtuX1
znrvW*UpKr`iIQkSj&itRzewX@?#UVJYP;h!2RNa@AKPigLdAo}@XeK7B-C1T9l}s)
z=$e!S(Mk@Fw^g?>f#|+MAV=nn>%DL-rbO8N18@?1(o-y-Dkg4DHTS;~p9boJSF%S#
z!`XOM6YTdNuJE_5nVDZU_<hpS!^<;N9z-#nzKL1%Q8=(}=KidmH;iF#zQm@UpT;0>
zfC9{Rt5VLD+j<E1Rg?lmI?`iA?oAj;f5<pd;0I5NJJR}zpKH;;)Tp*=+*9sF(iXhK
zVx|m*O57wJyqMgCiEkuNn<^gEKZ2g2^JpzqnJGr$(_$h~*N;l_C#J-2W+;|A%37a1
zeOhEZz0_zy!A30aNoEJdaNn+7;YP;XJbtaCg1nYu5ADD|JnsM9`~d&3#=i!jWLY;v
W5gZN_{A9ju<wzSRM1_^_um1zp=j?g_
diff --git a/cern_components/fonts/cern/cern.eot b/fonts/cern/cern.eot
similarity index 100%
rename from cern_components/fonts/cern/cern.eot
rename to fonts/cern/cern.eot
diff --git a/cern_components/fonts/cern/cern.svg b/fonts/cern/cern.svg
similarity index 100%
rename from cern_components/fonts/cern/cern.svg
rename to fonts/cern/cern.svg
diff --git a/cern_components/fonts/cern/cern.ttf b/fonts/cern/cern.ttf
similarity index 100%
rename from cern_components/fonts/cern/cern.ttf
rename to fonts/cern/cern.ttf
diff --git a/cern_components/fonts/cern/cern.woff b/fonts/cern/cern.woff
similarity index 100%
rename from cern_components/fonts/cern/cern.woff
rename to fonts/cern/cern.woff
diff --git a/cern_components/fonts/cern/cern.woff2 b/fonts/cern/cern.woff2
similarity index 100%
rename from cern_components/fonts/cern/cern.woff2
rename to fonts/cern/cern.woff2
diff --git a/cern_components/fonts/open-sans/bold.eot b/fonts/open-sans/bold.eot
similarity index 100%
rename from cern_components/fonts/open-sans/bold.eot
rename to fonts/open-sans/bold.eot
diff --git a/cern_components/fonts/open-sans/bold.svg b/fonts/open-sans/bold.svg
similarity index 100%
rename from cern_components/fonts/open-sans/bold.svg
rename to fonts/open-sans/bold.svg
diff --git a/cern_components/fonts/open-sans/bold.ttf b/fonts/open-sans/bold.ttf
similarity index 100%
rename from cern_components/fonts/open-sans/bold.ttf
rename to fonts/open-sans/bold.ttf
diff --git a/cern_components/fonts/open-sans/bold.woff b/fonts/open-sans/bold.woff
similarity index 100%
rename from cern_components/fonts/open-sans/bold.woff
rename to fonts/open-sans/bold.woff
diff --git a/cern_components/fonts/open-sans/bold.woff2 b/fonts/open-sans/bold.woff2
similarity index 100%
rename from cern_components/fonts/open-sans/bold.woff2
rename to fonts/open-sans/bold.woff2
diff --git a/cern_components/fonts/open-sans/regular.eot b/fonts/open-sans/regular.eot
similarity index 100%
rename from cern_components/fonts/open-sans/regular.eot
rename to fonts/open-sans/regular.eot
diff --git a/cern_components/fonts/open-sans/regular.svg b/fonts/open-sans/regular.svg
similarity index 100%
rename from cern_components/fonts/open-sans/regular.svg
rename to fonts/open-sans/regular.svg
diff --git a/cern_components/fonts/open-sans/regular.ttf b/fonts/open-sans/regular.ttf
similarity index 100%
rename from cern_components/fonts/open-sans/regular.ttf
rename to fonts/open-sans/regular.ttf
diff --git a/cern_components/fonts/open-sans/regular.woff b/fonts/open-sans/regular.woff
similarity index 100%
rename from cern_components/fonts/open-sans/regular.woff
rename to fonts/open-sans/regular.woff
diff --git a/cern_components/fonts/open-sans/regular.woff2 b/fonts/open-sans/regular.woff2
similarity index 100%
rename from cern_components/fonts/open-sans/regular.woff2
rename to fonts/open-sans/regular.woff2
diff --git a/cern_components/fonts/open-sans/semibold.eot b/fonts/open-sans/semibold.eot
similarity index 100%
rename from cern_components/fonts/open-sans/semibold.eot
rename to fonts/open-sans/semibold.eot
diff --git a/cern_components/fonts/open-sans/semibold.svg b/fonts/open-sans/semibold.svg
similarity index 100%
rename from cern_components/fonts/open-sans/semibold.svg
rename to fonts/open-sans/semibold.svg
diff --git a/cern_components/fonts/open-sans/semibold.ttf b/fonts/open-sans/semibold.ttf
similarity index 100%
rename from cern_components/fonts/open-sans/semibold.ttf
rename to fonts/open-sans/semibold.ttf
diff --git a/cern_components/fonts/open-sans/semibold.woff b/fonts/open-sans/semibold.woff
similarity index 100%
rename from cern_components/fonts/open-sans/semibold.woff
rename to fonts/open-sans/semibold.woff
diff --git a/cern_components/fonts/open-sans/semibold.woff2 b/fonts/open-sans/semibold.woff2
similarity index 100%
rename from cern_components/fonts/open-sans/semibold.woff2
rename to fonts/open-sans/semibold.woff2
diff --git a/cern_components/fonts/poppins/bold.eot b/fonts/poppins/bold.eot
similarity index 100%
rename from cern_components/fonts/poppins/bold.eot
rename to fonts/poppins/bold.eot
diff --git a/cern_components/fonts/poppins/bold.svg b/fonts/poppins/bold.svg
similarity index 100%
rename from cern_components/fonts/poppins/bold.svg
rename to fonts/poppins/bold.svg
diff --git a/cern_components/fonts/poppins/bold.ttf b/fonts/poppins/bold.ttf
similarity index 100%
rename from cern_components/fonts/poppins/bold.ttf
rename to fonts/poppins/bold.ttf
diff --git a/cern_components/fonts/poppins/bold.woff b/fonts/poppins/bold.woff
similarity index 100%
rename from cern_components/fonts/poppins/bold.woff
rename to fonts/poppins/bold.woff
diff --git a/cern_components/fonts/poppins/bold.woff2 b/fonts/poppins/bold.woff2
similarity index 100%
rename from cern_components/fonts/poppins/bold.woff2
rename to fonts/poppins/bold.woff2
diff --git a/cern_components/fonts/poppins/regular.eot b/fonts/poppins/regular.eot
similarity index 100%
rename from cern_components/fonts/poppins/regular.eot
rename to fonts/poppins/regular.eot
diff --git a/cern_components/fonts/poppins/regular.svg b/fonts/poppins/regular.svg
similarity index 100%
rename from cern_components/fonts/poppins/regular.svg
rename to fonts/poppins/regular.svg
diff --git a/cern_components/fonts/poppins/regular.ttf b/fonts/poppins/regular.ttf
similarity index 100%
rename from cern_components/fonts/poppins/regular.ttf
rename to fonts/poppins/regular.ttf
diff --git a/cern_components/fonts/poppins/regular.woff b/fonts/poppins/regular.woff
similarity index 100%
rename from cern_components/fonts/poppins/regular.woff
rename to fonts/poppins/regular.woff
diff --git a/cern_components/fonts/poppins/regular.woff2 b/fonts/poppins/regular.woff2
similarity index 100%
rename from cern_components/fonts/poppins/regular.woff2
rename to fonts/poppins/regular.woff2
diff --git a/cern_components/fonts/poppins/semibold.eot b/fonts/poppins/semibold.eot
similarity index 100%
rename from cern_components/fonts/poppins/semibold.eot
rename to fonts/poppins/semibold.eot
diff --git a/cern_components/fonts/poppins/semibold.svg b/fonts/poppins/semibold.svg
similarity index 100%
rename from cern_components/fonts/poppins/semibold.svg
rename to fonts/poppins/semibold.svg
diff --git a/cern_components/fonts/poppins/semibold.ttf b/fonts/poppins/semibold.ttf
similarity index 100%
rename from cern_components/fonts/poppins/semibold.ttf
rename to fonts/poppins/semibold.ttf
diff --git a/cern_components/fonts/poppins/semibold.woff b/fonts/poppins/semibold.woff
similarity index 100%
rename from cern_components/fonts/poppins/semibold.woff
rename to fonts/poppins/semibold.woff
diff --git a/cern_components/fonts/poppins/semibold.woff2 b/fonts/poppins/semibold.woff2
similarity index 100%
rename from cern_components/fonts/poppins/semibold.woff2
rename to fonts/poppins/semibold.woff2
diff --git a/cern_components/fonts/sourcesanspro/bold.eot b/fonts/sourcesanspro/bold.eot
similarity index 100%
rename from cern_components/fonts/sourcesanspro/bold.eot
rename to fonts/sourcesanspro/bold.eot
diff --git a/cern_components/fonts/sourcesanspro/bold.svg b/fonts/sourcesanspro/bold.svg
similarity index 100%
rename from cern_components/fonts/sourcesanspro/bold.svg
rename to fonts/sourcesanspro/bold.svg
diff --git a/cern_components/fonts/sourcesanspro/bold.ttf b/fonts/sourcesanspro/bold.ttf
similarity index 100%
rename from cern_components/fonts/sourcesanspro/bold.ttf
rename to fonts/sourcesanspro/bold.ttf
diff --git a/cern_components/fonts/sourcesanspro/bold.woff b/fonts/sourcesanspro/bold.woff
similarity index 100%
rename from cern_components/fonts/sourcesanspro/bold.woff
rename to fonts/sourcesanspro/bold.woff
diff --git a/cern_components/fonts/sourcesanspro/bold.woff2 b/fonts/sourcesanspro/bold.woff2
similarity index 100%
rename from cern_components/fonts/sourcesanspro/bold.woff2
rename to fonts/sourcesanspro/bold.woff2
diff --git a/cern_components/fonts/sourcesanspro/light.eot b/fonts/sourcesanspro/light.eot
similarity index 100%
rename from cern_components/fonts/sourcesanspro/light.eot
rename to fonts/sourcesanspro/light.eot
diff --git a/cern_components/fonts/sourcesanspro/light.svg b/fonts/sourcesanspro/light.svg
similarity index 100%
rename from cern_components/fonts/sourcesanspro/light.svg
rename to fonts/sourcesanspro/light.svg
diff --git a/cern_components/fonts/sourcesanspro/light.ttf b/fonts/sourcesanspro/light.ttf
similarity index 100%
rename from cern_components/fonts/sourcesanspro/light.ttf
rename to fonts/sourcesanspro/light.ttf
diff --git a/cern_components/fonts/sourcesanspro/light.woff b/fonts/sourcesanspro/light.woff
similarity index 100%
rename from cern_components/fonts/sourcesanspro/light.woff
rename to fonts/sourcesanspro/light.woff
diff --git a/cern_components/fonts/sourcesanspro/light.woff2 b/fonts/sourcesanspro/light.woff2
similarity index 100%
rename from cern_components/fonts/sourcesanspro/light.woff2
rename to fonts/sourcesanspro/light.woff2
diff --git a/cern_components/fonts/sourcesanspro/regular.eot b/fonts/sourcesanspro/regular.eot
similarity index 100%
rename from cern_components/fonts/sourcesanspro/regular.eot
rename to fonts/sourcesanspro/regular.eot
diff --git a/cern_components/fonts/sourcesanspro/regular.svg b/fonts/sourcesanspro/regular.svg
similarity index 100%
rename from cern_components/fonts/sourcesanspro/regular.svg
rename to fonts/sourcesanspro/regular.svg
diff --git a/cern_components/fonts/sourcesanspro/regular.ttf b/fonts/sourcesanspro/regular.ttf
similarity index 100%
rename from cern_components/fonts/sourcesanspro/regular.ttf
rename to fonts/sourcesanspro/regular.ttf
diff --git a/cern_components/fonts/sourcesanspro/regular.woff b/fonts/sourcesanspro/regular.woff
similarity index 100%
rename from cern_components/fonts/sourcesanspro/regular.woff
rename to fonts/sourcesanspro/regular.woff
diff --git a/cern_components/fonts/sourcesanspro/regular.woff2 b/fonts/sourcesanspro/regular.woff2
similarity index 100%
rename from cern_components/fonts/sourcesanspro/regular.woff2
rename to fonts/sourcesanspro/regular.woff2
diff --git a/cern_components/fonts/sourcesanspro/semibold.eot b/fonts/sourcesanspro/semibold.eot
similarity index 100%
rename from cern_components/fonts/sourcesanspro/semibold.eot
rename to fonts/sourcesanspro/semibold.eot
diff --git a/cern_components/fonts/sourcesanspro/semibold.svg b/fonts/sourcesanspro/semibold.svg
similarity index 100%
rename from cern_components/fonts/sourcesanspro/semibold.svg
rename to fonts/sourcesanspro/semibold.svg
diff --git a/cern_components/fonts/sourcesanspro/semibold.ttf b/fonts/sourcesanspro/semibold.ttf
similarity index 100%
rename from cern_components/fonts/sourcesanspro/semibold.ttf
rename to fonts/sourcesanspro/semibold.ttf
diff --git a/cern_components/fonts/sourcesanspro/semibold.woff b/fonts/sourcesanspro/semibold.woff
similarity index 100%
rename from cern_components/fonts/sourcesanspro/semibold.woff
rename to fonts/sourcesanspro/semibold.woff
diff --git a/cern_components/fonts/sourcesanspro/semibold.woff2 b/fonts/sourcesanspro/semibold.woff2
similarity index 100%
rename from cern_components/fonts/sourcesanspro/semibold.woff2
rename to fonts/sourcesanspro/semibold.woff2
diff --git a/cern_components/libraries/owlcarousel/css/ajax-loader.gif b/libraries/owlcarousel/css/ajax-loader.gif
similarity index 100%
rename from cern_components/libraries/owlcarousel/css/ajax-loader.gif
rename to libraries/owlcarousel/css/ajax-loader.gif
diff --git a/cern_components/libraries/owlcarousel/css/owl.carousel.css b/libraries/owlcarousel/css/owl.carousel.css
similarity index 100%
rename from cern_components/libraries/owlcarousel/css/owl.carousel.css
rename to libraries/owlcarousel/css/owl.carousel.css
diff --git a/cern_components/libraries/owlcarousel/css/owl.carousel.min.css b/libraries/owlcarousel/css/owl.carousel.min.css
similarity index 100%
rename from cern_components/libraries/owlcarousel/css/owl.carousel.min.css
rename to libraries/owlcarousel/css/owl.carousel.min.css
diff --git a/cern_components/libraries/owlcarousel/css/owl.theme.default.css b/libraries/owlcarousel/css/owl.theme.default.css
similarity index 100%
rename from cern_components/libraries/owlcarousel/css/owl.theme.default.css
rename to libraries/owlcarousel/css/owl.theme.default.css
diff --git a/cern_components/libraries/owlcarousel/css/owl.theme.default.min.css b/libraries/owlcarousel/css/owl.theme.default.min.css
similarity index 100%
rename from cern_components/libraries/owlcarousel/css/owl.theme.default.min.css
rename to libraries/owlcarousel/css/owl.theme.default.min.css
diff --git a/cern_components/libraries/owlcarousel/css/owl.theme.green.css b/libraries/owlcarousel/css/owl.theme.green.css
similarity index 100%
rename from cern_components/libraries/owlcarousel/css/owl.theme.green.css
rename to libraries/owlcarousel/css/owl.theme.green.css
diff --git a/cern_components/libraries/owlcarousel/css/owl.theme.green.min.css b/libraries/owlcarousel/css/owl.theme.green.min.css
similarity index 100%
rename from cern_components/libraries/owlcarousel/css/owl.theme.green.min.css
rename to libraries/owlcarousel/css/owl.theme.green.min.css
diff --git a/cern_components/libraries/owlcarousel/css/owl.video.play.png b/libraries/owlcarousel/css/owl.video.play.png
similarity index 100%
rename from cern_components/libraries/owlcarousel/css/owl.video.play.png
rename to libraries/owlcarousel/css/owl.video.play.png
diff --git a/cern_components/libraries/owlcarousel/js/owl.carousel.js b/libraries/owlcarousel/js/owl.carousel.js
similarity index 100%
rename from cern_components/libraries/owlcarousel/js/owl.carousel.js
rename to libraries/owlcarousel/js/owl.carousel.js
diff --git a/cern_components/libraries/owlcarousel/js/owl.carousel.min.js b/libraries/owlcarousel/js/owl.carousel.min.js
similarity index 100%
rename from cern_components/libraries/owlcarousel/js/owl.carousel.min.js
rename to libraries/owlcarousel/js/owl.carousel.min.js
diff --git a/cern_components/libraries/owlcarousel/js/owl.carousel2.thumbs.js b/libraries/owlcarousel/js/owl.carousel2.thumbs.js
similarity index 100%
rename from cern_components/libraries/owlcarousel/js/owl.carousel2.thumbs.js
rename to libraries/owlcarousel/js/owl.carousel2.thumbs.js
diff --git a/cern_components/package.json b/package.json
similarity index 100%
rename from cern_components/package.json
rename to package.json
diff --git a/cern_components/patterns/atoms/background/background.html.twig b/patterns/atoms/background/background.html.twig
similarity index 100%
rename from cern_components/patterns/atoms/background/background.html.twig
rename to patterns/atoms/background/background.html.twig
diff --git a/cern_components/patterns/atoms/background/background.ui_patterns.yml b/patterns/atoms/background/background.ui_patterns.yml
similarity index 100%
rename from cern_components/patterns/atoms/background/background.ui_patterns.yml
rename to patterns/atoms/background/background.ui_patterns.yml
diff --git a/cern_components/patterns/atoms/background/css/.gitkeep b/patterns/atoms/background/css/.gitkeep
similarity index 100%
rename from cern_components/patterns/atoms/background/css/.gitkeep
rename to patterns/atoms/background/css/.gitkeep
diff --git a/cern_components/patterns/atoms/background/css/background.component.css b/patterns/atoms/background/css/background.component.css
similarity index 100%
rename from cern_components/patterns/atoms/background/css/background.component.css
rename to patterns/atoms/background/css/background.component.css
diff --git a/cern_components/patterns/atoms/background/js/background.js b/patterns/atoms/background/js/background.js
similarity index 100%
rename from cern_components/patterns/atoms/background/js/background.js
rename to patterns/atoms/background/js/background.js
diff --git a/cern_components/patterns/atoms/background/scss/background.component.scss b/patterns/atoms/background/scss/background.component.scss
similarity index 100%
rename from cern_components/patterns/atoms/background/scss/background.component.scss
rename to patterns/atoms/background/scss/background.component.scss
diff --git a/cern_components/patterns/atoms/video-item/video-item.html.twig b/patterns/atoms/video-item/video-item.html.twig
similarity index 100%
rename from cern_components/patterns/atoms/video-item/video-item.html.twig
rename to patterns/atoms/video-item/video-item.html.twig
diff --git a/cern_components/patterns/atoms/video-item/video-item.ui_patterns.yml b/patterns/atoms/video-item/video-item.ui_patterns.yml
similarity index 100%
rename from cern_components/patterns/atoms/video-item/video-item.ui_patterns.yml
rename to patterns/atoms/video-item/video-item.ui_patterns.yml
diff --git a/cern_components/patterns/molecules/agenda-box/agenda-box.html.twig b/patterns/molecules/agenda-box/agenda-box.html.twig
similarity index 100%
rename from cern_components/patterns/molecules/agenda-box/agenda-box.html.twig
rename to patterns/molecules/agenda-box/agenda-box.html.twig
diff --git a/cern_components/patterns/molecules/agenda-box/agenda-box.ui_patterns.yml b/patterns/molecules/agenda-box/agenda-box.ui_patterns.yml
similarity index 100%
rename from cern_components/patterns/molecules/agenda-box/agenda-box.ui_patterns.yml
rename to patterns/molecules/agenda-box/agenda-box.ui_patterns.yml
diff --git a/cern_components/patterns/molecules/agenda-box/css/agenda-box.component.css b/patterns/molecules/agenda-box/css/agenda-box.component.css
similarity index 100%
rename from cern_components/patterns/molecules/agenda-box/css/agenda-box.component.css
rename to patterns/molecules/agenda-box/css/agenda-box.component.css
diff --git a/cern_components/patterns/molecules/agenda-box/css/variables.css b/patterns/molecules/agenda-box/css/variables.css
similarity index 100%
rename from cern_components/patterns/molecules/agenda-box/css/variables.css
rename to patterns/molecules/agenda-box/css/variables.css
diff --git a/cern_components/patterns/molecules/agenda-box/scss/agenda-box.component.scss b/patterns/molecules/agenda-box/scss/agenda-box.component.scss
similarity index 100%
rename from cern_components/patterns/molecules/agenda-box/scss/agenda-box.component.scss
rename to patterns/molecules/agenda-box/scss/agenda-box.component.scss
diff --git a/cern_components/patterns/molecules/agenda-box/scss/mixins.scss b/patterns/molecules/agenda-box/scss/mixins.scss
similarity index 100%
rename from cern_components/patterns/molecules/agenda-box/scss/mixins.scss
rename to patterns/molecules/agenda-box/scss/mixins.scss
diff --git a/cern_components/patterns/molecules/agenda-box/scss/variables.scss b/patterns/molecules/agenda-box/scss/variables.scss
similarity index 100%
rename from cern_components/patterns/molecules/agenda-box/scss/variables.scss
rename to patterns/molecules/agenda-box/scss/variables.scss
diff --git a/cern_components/patterns/molecules/agenda-coming-soon/agenda-coming-soon.html.twig b/patterns/molecules/agenda-coming-soon/agenda-coming-soon.html.twig
similarity index 100%
rename from cern_components/patterns/molecules/agenda-coming-soon/agenda-coming-soon.html.twig
rename to patterns/molecules/agenda-coming-soon/agenda-coming-soon.html.twig
diff --git a/cern_components/patterns/molecules/agenda-coming-soon/agenda-coming-soon.ui_patterns.yml b/patterns/molecules/agenda-coming-soon/agenda-coming-soon.ui_patterns.yml
similarity index 100%
rename from cern_components/patterns/molecules/agenda-coming-soon/agenda-coming-soon.ui_patterns.yml
rename to patterns/molecules/agenda-coming-soon/agenda-coming-soon.ui_patterns.yml
diff --git a/cern_components/patterns/molecules/agenda-coming-soon/css/agenda-coming-soon.component.css b/patterns/molecules/agenda-coming-soon/css/agenda-coming-soon.component.css
similarity index 100%
rename from cern_components/patterns/molecules/agenda-coming-soon/css/agenda-coming-soon.component.css
rename to patterns/molecules/agenda-coming-soon/css/agenda-coming-soon.component.css
diff --git a/cern_components/patterns/molecules/agenda-coming-soon/css/mixins.css b/patterns/molecules/agenda-coming-soon/css/mixins.css
similarity index 100%
rename from cern_components/patterns/molecules/agenda-coming-soon/css/mixins.css
rename to patterns/molecules/agenda-coming-soon/css/mixins.css
diff --git a/cern_components/patterns/molecules/agenda-coming-soon/css/variables.css b/patterns/molecules/agenda-coming-soon/css/variables.css
similarity index 100%
rename from cern_components/patterns/molecules/agenda-coming-soon/css/variables.css
rename to patterns/molecules/agenda-coming-soon/css/variables.css
diff --git a/cern_components/patterns/molecules/agenda-coming-soon/js/agenda-coming-soon.js b/patterns/molecules/agenda-coming-soon/js/agenda-coming-soon.js
similarity index 100%
rename from cern_components/patterns/molecules/agenda-coming-soon/js/agenda-coming-soon.js
rename to patterns/molecules/agenda-coming-soon/js/agenda-coming-soon.js
diff --git a/cern_components/patterns/molecules/agenda-coming-soon/js/jquery.countdown.js b/patterns/molecules/agenda-coming-soon/js/jquery.countdown.js
similarity index 100%
rename from cern_components/patterns/molecules/agenda-coming-soon/js/jquery.countdown.js
rename to patterns/molecules/agenda-coming-soon/js/jquery.countdown.js
diff --git a/cern_components/patterns/molecules/agenda-coming-soon/scss/agenda-coming-soon.component.scss b/patterns/molecules/agenda-coming-soon/scss/agenda-coming-soon.component.scss
similarity index 100%
rename from cern_components/patterns/molecules/agenda-coming-soon/scss/agenda-coming-soon.component.scss
rename to patterns/molecules/agenda-coming-soon/scss/agenda-coming-soon.component.scss
diff --git a/cern_components/patterns/molecules/agenda-coming-soon/scss/mixins.scss b/patterns/molecules/agenda-coming-soon/scss/mixins.scss
similarity index 100%
rename from cern_components/patterns/molecules/agenda-coming-soon/scss/mixins.scss
rename to patterns/molecules/agenda-coming-soon/scss/mixins.scss
diff --git a/cern_components/patterns/molecules/agenda-coming-soon/scss/variables.scss b/patterns/molecules/agenda-coming-soon/scss/variables.scss
similarity index 100%
rename from cern_components/patterns/molecules/agenda-coming-soon/scss/variables.scss
rename to patterns/molecules/agenda-coming-soon/scss/variables.scss
diff --git a/cern_components/patterns/molecules/agenda/agenda.html.twig b/patterns/molecules/agenda/agenda.html.twig
similarity index 100%
rename from cern_components/patterns/molecules/agenda/agenda.html.twig
rename to patterns/molecules/agenda/agenda.html.twig
diff --git a/cern_components/patterns/molecules/agenda/agenda.ui_patterns.yml b/patterns/molecules/agenda/agenda.ui_patterns.yml
similarity index 100%
rename from cern_components/patterns/molecules/agenda/agenda.ui_patterns.yml
rename to patterns/molecules/agenda/agenda.ui_patterns.yml
diff --git a/cern_components/patterns/molecules/agenda/css/agenda.component.css b/patterns/molecules/agenda/css/agenda.component.css
similarity index 100%
rename from cern_components/patterns/molecules/agenda/css/agenda.component.css
rename to patterns/molecules/agenda/css/agenda.component.css
diff --git a/cern_components/patterns/molecules/agenda/scss/agenda.component.scss b/patterns/molecules/agenda/scss/agenda.component.scss
similarity index 97%
rename from cern_components/patterns/molecules/agenda/scss/agenda.component.scss
rename to patterns/molecules/agenda/scss/agenda.component.scss
index 9e2e25eb..86169c33 100755
--- a/cern_components/patterns/molecules/agenda/scss/agenda.component.scss
+++ b/patterns/molecules/agenda/scss/agenda.component.scss
@@ -1,206 +1,206 @@
-// variables & mixings
-@import 'variables';
-// fonts
-@font-face {
- font-family: "sourcesans-regular";
- src: url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/regular.eot?") format("eot"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/regular.woff2") format("woff2"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/regular.woff") format("woff"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/regular.ttf") format("truetype"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/regular.svg#sourcesans-regular") format("svg");
-}
-
-@font-face {
- font-family: "sourcesans-semibold";
- src: url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/semibold.eot?") format("eot"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/semibold.woff2") format("woff2"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/semibold.woff") format("woff"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/semibold.ttf") format("truetype"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/semibold.svg#sourcesans-semibold") format("svg");
-}
-
-@font-face {
- font-family: "sourcesans-bold";
- src: url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/bold.eot?") format("eot"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/bold.woff2") format("woff2"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/bold.woff") format("woff"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/bold.ttf") format("truetype"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/bold.svg#sourcesans-bold") format("svg");
-}
-
-@font-face {
- font-family: "sourcesans-light";
- src: url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/light.eot?") format("eot"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/light.woff2") format("woff2"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/light.woff") format("woff"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/light.ttf") format("truetype"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/light.svg#sourcesans-light") format("svg");
-}
-
-@font-face {
- font-family: "opensans-regular";
- src: url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/regular.eot?") format("eot"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/regular.woff2") format("woff2"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/regular.woff") format("woff"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/regular.ttf") format("truetype"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/regular.svg#opensans-regular") format("svg");
-}
-
-@font-face {
- font-family: "opensans-semibold";
- src: url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/semibold.eot?") format("eot"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/semibold.woff2") format("woff2"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/semibold.woff") format("woff"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/semibold.ttf") format("truetype"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/semibold.svg#opensans-semibold") format("svg");
-}
-
-@font-face {
- font-family: "opensans-bold";
- src: url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/bold.eot?") format("eot"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/bold.woff2") format("woff2"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/bold.woff") format("woff"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/bold.ttf") format("truetype"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/bold.svg#opensans-bold") format("svg");
-}
-
-@font-face {
- font-family: "cern-icons";
- src: url("//framework.web.cern.ch/framework/3.0/fonts/cern/cern.eot?") format("eot"), url("//framework.web.cern.ch/framework/3.0/fonts/cern/cern.woff2") format("woff2"), url("//framework.web.cern.ch/framework/3.0/fonts/cern/cern.woff") format("woff"), url("//framework.web.cern.ch/framework/3.0/fonts/cern/cern.ttf") format("truetype"), url("//framework.web.cern.ch/framework/3.0/fonts/cern/cern.svg#cern-icons") format("svg");
-}
-
-//
-//* ****************************************** component event */
-/* @media only screen and (max-width: 991px) {
- .component-event {
- padding: 0 3%;
- }
-} */
-
-.component-event {
- //margin: 0 3%;
- .component-event-antetitle {
- // font-family: 'Source Sans Pro', sans-serif;
- /* font-family: 'sourcesans-regular'; */
- font-size: 14px;
- text-transform: uppercase;
- letter-spacing: 0.2px;
- margin-bottom: 10px;
- }
- .component-event-calendar {
- .component-event-box1 {
- display: inline-block;
- width: 48%;
- .component-event-dates {
- span.component-event-dates-1 {
- font-family: 'sourcesans-bold';
- font-size: 48px;
- line-height: 45px;
- text-transform: uppercase;
- }
- span.component-event-dates-2 {
- font-family: 'sourcesans-light';
- font-size: 48px;
- line-height: 45px;
- text-transform: uppercase;
- vertical-align: 1px;
- }
- }
- .component-event-time {
- // font-family: 'Source Sans Pro', sans-serif;
- // font-weight: 700;
- font-family: 'sourcesans-bold';
- font-size: 18px;
- letter-spacing: 0.2px;
- span {
- // font-family: 'Source Sans Pro', sans-serif;
- // font-weight: 400;
- font-family: 'sourcesans-regular';
- }
- }
- }
- .component-event-box2 {
- display: inline-block;
- width: 51%;
- text-align: right;
- .component-event-button {
- // font-family: 'Source Sans Pro', sans-serif;
- // font-weight: 700;
- font-family: 'sourcesans-bold';
- border: 2px solid $link-color;
- border-radius: 5px;
- padding: 10px;
- font-size: 16px;
- color: $link-color;
- display: inline-block;
- position: relative;
- top: -17px;
- cursor: pointer;
- a {
- display: block;
- padding: 8px 10px 0 35px;
- position: relative;
- &::before {
- @include font-size(3.3);
- font-family: "cern-icons";
- -moz-osx-font-smoothing: grayscale;
- -webkit-font-smoothing: antialiased;
- content: '\h';
- display: inline-block;
- position: absolute;
- top: 2px;
- left: 3px;
- line-height: 25px;
- width: 22px;
- text-indent: -5px;
- }
- }
- span {
- display: inline-block;
- position: relative;
- top: -5px;
- }
- }
- }
- @media screen and (max-width:767px) {
- .component-event-box1 {
- width: 100%;
- float: left;
- }
- .component-event-box2 {
- width: 100%;
- float: left;
- text-align: left;
- .component-event-button {
- margin: 20px 0;
- top: 0;
- }
- }
- }
- }
- .component-event-title {
- /* @extend %box-title; */
- }
- .component-event-content {
- .component-event-list {
- padding-left: 0;
- .component-event-item {
- // ul {
- // margin-left: 22px;
- // padding-left: 0;
- // margin-bottom: 15px;
- // li {
- // list-style-type: none;
- // margin-bottom: 10px;
- // position: relative;
- // &:before {
- // @include font-size(5.0);
- // font-family: "cern-icons";
- // content: '\j';
- // display: inline-block;
- // position: absolute;
- // top: -3px;
- // left: -15px;
- // line-height: 24px;
- // text-indent: -25px;
- // color: rgba(0, 0, 0, 0.2);
- // }
- // a {
- // color: $link-color;
- // text-decoration: underline;
- // border-bottom: 0;
- // }
- // }
- // }
- // display: block;
- // /* font-family: 'sourcesans-regular'; */
- // margin-top: 20px;
- // font-size: 16px;
- // display: block;
- // line-height:26px;
- // margin-bottom: 15px;
- // line-height: 18px;
- // p {
- // /* font-family: 'sourcesans-regular'; */
- // a {
- // color: $link-color;
- // text-decoration: underline;
- // border-bottom: 0;
- // }
- // }
- }
- }
- }
-}
+// variables & mixings
+@import 'variables';
+// fonts
+@font-face {
+ font-family: "sourcesans-regular";
+ src: url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/regular.eot?") format("eot"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/regular.woff2") format("woff2"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/regular.woff") format("woff"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/regular.ttf") format("truetype"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/regular.svg#sourcesans-regular") format("svg");
+}
+
+@font-face {
+ font-family: "sourcesans-semibold";
+ src: url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/semibold.eot?") format("eot"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/semibold.woff2") format("woff2"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/semibold.woff") format("woff"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/semibold.ttf") format("truetype"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/semibold.svg#sourcesans-semibold") format("svg");
+}
+
+@font-face {
+ font-family: "sourcesans-bold";
+ src: url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/bold.eot?") format("eot"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/bold.woff2") format("woff2"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/bold.woff") format("woff"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/bold.ttf") format("truetype"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/bold.svg#sourcesans-bold") format("svg");
+}
+
+@font-face {
+ font-family: "sourcesans-light";
+ src: url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/light.eot?") format("eot"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/light.woff2") format("woff2"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/light.woff") format("woff"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/light.ttf") format("truetype"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/light.svg#sourcesans-light") format("svg");
+}
+
+@font-face {
+ font-family: "opensans-regular";
+ src: url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/regular.eot?") format("eot"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/regular.woff2") format("woff2"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/regular.woff") format("woff"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/regular.ttf") format("truetype"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/regular.svg#opensans-regular") format("svg");
+}
+
+@font-face {
+ font-family: "opensans-semibold";
+ src: url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/semibold.eot?") format("eot"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/semibold.woff2") format("woff2"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/semibold.woff") format("woff"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/semibold.ttf") format("truetype"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/semibold.svg#opensans-semibold") format("svg");
+}
+
+@font-face {
+ font-family: "opensans-bold";
+ src: url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/bold.eot?") format("eot"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/bold.woff2") format("woff2"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/bold.woff") format("woff"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/bold.ttf") format("truetype"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/bold.svg#opensans-bold") format("svg");
+}
+
+@font-face {
+ font-family: "cern-icons";
+ src: url("//framework.web.cern.ch/framework/3.0/fonts/cern/cern.eot?") format("eot"), url("//framework.web.cern.ch/framework/3.0/fonts/cern/cern.woff2") format("woff2"), url("//framework.web.cern.ch/framework/3.0/fonts/cern/cern.woff") format("woff"), url("//framework.web.cern.ch/framework/3.0/fonts/cern/cern.ttf") format("truetype"), url("//framework.web.cern.ch/framework/3.0/fonts/cern/cern.svg#cern-icons") format("svg");
+}
+
+//
+//* ****************************************** component event */
+/* @media only screen and (max-width: 991px) {
+ .component-event {
+ padding: 0 3%;
+ }
+} */
+
+.component-event {
+ //margin: 0 3%;
+ .component-event-antetitle {
+ // font-family: 'Source Sans Pro', sans-serif;
+ /* font-family: 'sourcesans-regular'; */
+ font-size: 14px;
+ text-transform: uppercase;
+ letter-spacing: 0.2px;
+ margin-bottom: 10px;
+ }
+ .component-event-calendar {
+ .component-event-box1 {
+ display: inline-block;
+ width: 48%;
+ .component-event-dates {
+ span.component-event-dates-1 {
+ font-family: 'sourcesans-bold';
+ font-size: 48px;
+ line-height: 45px;
+ text-transform: uppercase;
+ }
+ span.component-event-dates-2 {
+ font-family: 'sourcesans-light';
+ font-size: 48px;
+ line-height: 45px;
+ text-transform: uppercase;
+ vertical-align: 1px;
+ }
+ }
+ .component-event-time {
+ // font-family: 'Source Sans Pro', sans-serif;
+ // font-weight: 700;
+ font-family: 'sourcesans-bold';
+ font-size: 18px;
+ letter-spacing: 0.2px;
+ span {
+ // font-family: 'Source Sans Pro', sans-serif;
+ // font-weight: 400;
+ font-family: 'sourcesans-regular';
+ }
+ }
+ }
+ .component-event-box2 {
+ display: inline-block;
+ width: 51%;
+ text-align: right;
+ .component-event-button {
+ // font-family: 'Source Sans Pro', sans-serif;
+ // font-weight: 700;
+ font-family: 'sourcesans-bold';
+ border: 2px solid $link-color;
+ border-radius: 5px;
+ padding: 10px;
+ font-size: 16px;
+ color: $link-color;
+ display: inline-block;
+ position: relative;
+ top: -17px;
+ cursor: pointer;
+ a {
+ display: block;
+ padding: 8px 10px 0 35px;
+ position: relative;
+ &::before {
+ @include font-size(3.3);
+ font-family: "cern-icons";
+ -moz-osx-font-smoothing: grayscale;
+ -webkit-font-smoothing: antialiased;
+ content: '\h';
+ display: inline-block;
+ position: absolute;
+ top: 2px;
+ left: 3px;
+ line-height: 25px;
+ width: 22px;
+ text-indent: -5px;
+ }
+ }
+ span {
+ display: inline-block;
+ position: relative;
+ top: -5px;
+ }
+ }
+ }
+ @media screen and (max-width:767px) {
+ .component-event-box1 {
+ width: 100%;
+ float: left;
+ }
+ .component-event-box2 {
+ width: 100%;
+ float: left;
+ text-align: left;
+ .component-event-button {
+ margin: 20px 0;
+ top: 0;
+ }
+ }
+ }
+ }
+ .component-event-title {
+ /* @extend %box-title; */
+ }
+ .component-event-content {
+ .component-event-list {
+ padding-left: 0;
+ .component-event-item {
+ // ul {
+ // margin-left: 22px;
+ // padding-left: 0;
+ // margin-bottom: 15px;
+ // li {
+ // list-style-type: none;
+ // margin-bottom: 10px;
+ // position: relative;
+ // &:before {
+ // @include font-size(5.0);
+ // font-family: "cern-icons";
+ // content: '\j';
+ // display: inline-block;
+ // position: absolute;
+ // top: -3px;
+ // left: -15px;
+ // line-height: 24px;
+ // text-indent: -25px;
+ // color: rgba(0, 0, 0, 0.2);
+ // }
+ // a {
+ // color: $link-color;
+ // text-decoration: underline;
+ // border-bottom: 0;
+ // }
+ // }
+ // }
+ // display: block;
+ // /* font-family: 'sourcesans-regular'; */
+ // margin-top: 20px;
+ // font-size: 16px;
+ // display: block;
+ // line-height:26px;
+ // margin-bottom: 15px;
+ // line-height: 18px;
+ // p {
+ // /* font-family: 'sourcesans-regular'; */
+ // a {
+ // color: $link-color;
+ // text-decoration: underline;
+ // border-bottom: 0;
+ // }
+ // }
+ }
+ }
+ }
+}
diff --git a/cern_components/patterns/molecules/divisions/sass/mixins.scss b/patterns/molecules/agenda/scss/mixins.scss
similarity index 100%
rename from cern_components/patterns/molecules/divisions/sass/mixins.scss
rename to patterns/molecules/agenda/scss/mixins.scss
diff --git a/cern_components/patterns/molecules/agenda/scss/variables.scss b/patterns/molecules/agenda/scss/variables.scss
similarity index 94%
rename from cern_components/patterns/molecules/agenda/scss/variables.scss
rename to patterns/molecules/agenda/scss/variables.scss
index 56f34cb7..9591872a 100755
--- a/cern_components/patterns/molecules/agenda/scss/variables.scss
+++ b/patterns/molecules/agenda/scss/variables.scss
@@ -1,58 +1,58 @@
-// mixins library
-@import 'mixins.scss';
-//
-// Variables
-// --------------------------------------------------
-// Grays
-// -------------------------
-$grey-dark: #292929;
-$grey-medium: #4a4a4a;
-$grey-light: #bebebe;
-$grey-mlight:#efe8e8;
-//
-// corporate colors
-// -------------------------
-$blue: #0855a0;
-$orange: #f2a530;
-//
-// Section colors
-// -------------------------
-$error: #ff0000;
-$error-light: #faeaea;
-//
-// generic variables
-// -------------------------
-$white: #ffffff;
-$black: #000000;
-$black-medium:#1a1a1a;
-$body-bg: $white;
-$text-color: $black;
-$link-color: $blue;
-//
-//
-// Styles
-// -------------------------
-%link {
- color: $link-color;
- text-decoration: none;
-}
-
-%box-title {
- font-size: 40px;
- font-family: 'Open Sans', sans-serif;
- font-weight: 700;
- margin: 0px 0 20px;
- line-height: 50px;
- @media only screen and (max-width: 480px) {
- font-size: 25px;
- line-height: 28px;
- }
-}
-
-%highlight-calendar {
- font-size: 48px;
- font-family: 'Source Sans Pro', sans-serif;
- font-weight: 700;
- line-height: 45px;
- text-transform: uppercase;
-}
+// mixins library
+@import 'mixins.scss';
+//
+// Variables
+// --------------------------------------------------
+// Grays
+// -------------------------
+$grey-dark: #292929;
+$grey-medium: #4a4a4a;
+$grey-light: #bebebe;
+$grey-mlight:#efe8e8;
+//
+// corporate colors
+// -------------------------
+$blue: #0855a0;
+$orange: #f2a530;
+//
+// Section colors
+// -------------------------
+$error: #ff0000;
+$error-light: #faeaea;
+//
+// generic variables
+// -------------------------
+$white: #ffffff;
+$black: #000000;
+$black-medium:#1a1a1a;
+$body-bg: $white;
+$text-color: $black;
+$link-color: $blue;
+//
+//
+// Styles
+// -------------------------
+%link {
+ color: $link-color;
+ text-decoration: none;
+}
+
+%box-title {
+ font-size: 40px;
+ font-family: 'Open Sans', sans-serif;
+ font-weight: 700;
+ margin: 0px 0 20px;
+ line-height: 50px;
+ @media only screen and (max-width: 480px) {
+ font-size: 25px;
+ line-height: 28px;
+ }
+}
+
+%highlight-calendar {
+ font-size: 48px;
+ font-family: 'Source Sans Pro', sans-serif;
+ font-weight: 700;
+ line-height: 45px;
+ text-transform: uppercase;
+}
diff --git a/cern_components/patterns/molecules/basic-display/basic-display.html.twig b/patterns/molecules/basic-display/basic-display.html.twig
similarity index 100%
rename from cern_components/patterns/molecules/basic-display/basic-display.html.twig
rename to patterns/molecules/basic-display/basic-display.html.twig
diff --git a/cern_components/patterns/molecules/basic-display/basic-display.ui_patterns.yml b/patterns/molecules/basic-display/basic-display.ui_patterns.yml
similarity index 100%
rename from cern_components/patterns/molecules/basic-display/basic-display.ui_patterns.yml
rename to patterns/molecules/basic-display/basic-display.ui_patterns.yml
diff --git a/cern_components/patterns/molecules/basic-display/css/basic-display.component.css b/patterns/molecules/basic-display/css/basic-display.component.css
similarity index 100%
rename from cern_components/patterns/molecules/basic-display/css/basic-display.component.css
rename to patterns/molecules/basic-display/css/basic-display.component.css
diff --git a/cern_components/patterns/molecules/basic-display/scss/basic-display.component.scss b/patterns/molecules/basic-display/scss/basic-display.component.scss
similarity index 100%
rename from cern_components/patterns/molecules/basic-display/scss/basic-display.component.scss
rename to patterns/molecules/basic-display/scss/basic-display.component.scss
diff --git a/cern_components/patterns/molecules/call-action/call-action.html.twig b/patterns/molecules/call-action/call-action.html.twig
similarity index 100%
rename from cern_components/patterns/molecules/call-action/call-action.html.twig
rename to patterns/molecules/call-action/call-action.html.twig
diff --git a/cern_components/patterns/molecules/call-action/call-action.ui_patterns.yml b/patterns/molecules/call-action/call-action.ui_patterns.yml
similarity index 100%
rename from cern_components/patterns/molecules/call-action/call-action.ui_patterns.yml
rename to patterns/molecules/call-action/call-action.ui_patterns.yml
diff --git a/cern_components/patterns/molecules/call-action/css/calltoaction.component.css b/patterns/molecules/call-action/css/calltoaction.component.css
similarity index 100%
rename from cern_components/patterns/molecules/call-action/css/calltoaction.component.css
rename to patterns/molecules/call-action/css/calltoaction.component.css
diff --git a/cern_components/patterns/molecules/call-action/css/variables.css b/patterns/molecules/call-action/css/variables.css
similarity index 100%
rename from cern_components/patterns/molecules/call-action/css/variables.css
rename to patterns/molecules/call-action/css/variables.css
diff --git a/cern_components/patterns/molecules/call-action/sass/calltoaction.component.scss b/patterns/molecules/call-action/sass/calltoaction.component.scss
similarity index 98%
rename from cern_components/patterns/molecules/call-action/sass/calltoaction.component.scss
rename to patterns/molecules/call-action/sass/calltoaction.component.scss
index 3be68933..100dfe1b 100755
--- a/cern_components/patterns/molecules/call-action/sass/calltoaction.component.scss
+++ b/patterns/molecules/call-action/sass/calltoaction.component.scss
@@ -1,120 +1,120 @@
-// variables & mixings
-@import 'variables';
-// fonts
-@font-face {
- font-family: "sourcesans-regular";
- src: url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/regular.eot?") format("eot"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/regular.woff2") format("woff2"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/regular.woff") format("woff"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/regular.ttf") format("truetype"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/regular.svg#sourcesans-regular") format("svg");
-}
-
-@font-face {
- font-family: "sourcesans-semibold";
- src: url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/semibold.eot?") format("eot"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/semibold.woff2") format("woff2"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/semibold.woff") format("woff"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/semibold.ttf") format("truetype"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/semibold.svg#sourcesans-semibold") format("svg");
-}
-
-@font-face {
- font-family: "sourcesans-bold";
- src: url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/bold.eot?") format("eot"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/bold.woff2") format("woff2"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/bold.woff") format("woff"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/bold.ttf") format("truetype"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/bold.svg#sourcesans-bold") format("svg");
-}
-
-@font-face {
- font-family: "sourcesans-light";
- src: url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/light.eot?") format("eot"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/light.woff2") format("woff2"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/light.woff") format("woff"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/light.ttf") format("truetype"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/light.svg#sourcesans-light") format("svg");
-}
-
-@font-face {
- font-family: "opensans-regular";
- src: url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/regular.eot?") format("eot"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/regular.woff2") format("woff2"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/regular.woff") format("woff"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/regular.ttf") format("truetype"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/regular.svg#opensans-regular") format("svg");
-}
-
-@font-face {
- font-family: "opensans-semibold";
- src: url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/semibold.eot?") format("eot"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/semibold.woff2") format("woff2"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/semibold.woff") format("woff"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/semibold.ttf") format("truetype"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/semibold.svg#opensans-semibold") format("svg");
-}
-
-@font-face {
- font-family: "opensans-bold";
- src: url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/bold.eot?") format("eot"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/bold.woff2") format("woff2"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/bold.woff") format("woff"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/bold.ttf") format("truetype"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/bold.svg#opensans-bold") format("svg");
-}
-
-@font-face {
- font-family: "cern-icons";
- src: url("//framework.web.cern.ch/framework/3.0/fonts/cern/cern.eot?") format("eot"), url("//framework.web.cern.ch/framework/3.0/fonts/cern/cern.woff2") format("woff2"), url("//framework.web.cern.ch/framework/3.0/fonts/cern/cern.woff") format("woff"), url("//framework.web.cern.ch/framework/3.0/fonts/cern/cern.ttf") format("truetype"), url("//framework.web.cern.ch/framework/3.0/fonts/cern/cern.svg#cern-icons") format("svg");
-}
-
-//
-//* ****************************************** call to actions with icon */
-.component-call-to-action {
- word-break: break-all;
- &.center {
- text-align: center;
- }
- &.left {
- text-align: left;
- }
- &.right {
- text-align: right;
- }
- &__wrapper {
- @include border-radius(6px);
- display: inline-block;
- text-align: left;
- position: relative;
- line-height: 1.1;
- overflow: hidden;
- &:hover {
- a {
- background: rgba(0, 0, 0, 0.3);
- }
- }
- &.has-icon:hover a span:before {
- right: -40px;
- }
- a {
- @include font-size(1.6);
- font-family: 'sourcesans-bold';
- display: block;
- border: none;
- text-decoration: none;
- padding: 14px 50px 13px;
- cursor: pointer;
- &:hover {
- border-bottom: 0;
- text-decoration: none;
- }
- }
- &.has-icon {
- a {
- @include transition(all 0.3s ease-in-out 0s);
- padding: 14px 65px 13px 50px;
- span {
- display: inline-block;
- position: relative;
- &::before {
- @include transition(all 0.3s ease-in-out 0s);
- content: '\j';
- @include font-size(5.0);
- font-family: "cern-icons";
- -moz-osx-font-smoothing: grayscale;
- -webkit-font-smoothing: antialiased;
- display: inline-block;
- position: absolute;
- top: calc(50% - 11px);
- right: -20px;
- height: 22px;
- line-height: 22px;
- width: 9px;
- text-indent: -21px;
- font-weight: normal;
- }
- }
- }
- }
- &.simple-link {
- &:hover {
- a {
- background: transparent;
- }
- }
- }
- }
-}
+// variables & mixings
+@import 'variables';
+// fonts
+@font-face {
+ font-family: "sourcesans-regular";
+ src: url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/regular.eot?") format("eot"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/regular.woff2") format("woff2"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/regular.woff") format("woff"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/regular.ttf") format("truetype"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/regular.svg#sourcesans-regular") format("svg");
+}
+
+@font-face {
+ font-family: "sourcesans-semibold";
+ src: url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/semibold.eot?") format("eot"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/semibold.woff2") format("woff2"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/semibold.woff") format("woff"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/semibold.ttf") format("truetype"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/semibold.svg#sourcesans-semibold") format("svg");
+}
+
+@font-face {
+ font-family: "sourcesans-bold";
+ src: url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/bold.eot?") format("eot"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/bold.woff2") format("woff2"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/bold.woff") format("woff"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/bold.ttf") format("truetype"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/bold.svg#sourcesans-bold") format("svg");
+}
+
+@font-face {
+ font-family: "sourcesans-light";
+ src: url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/light.eot?") format("eot"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/light.woff2") format("woff2"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/light.woff") format("woff"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/light.ttf") format("truetype"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/light.svg#sourcesans-light") format("svg");
+}
+
+@font-face {
+ font-family: "opensans-regular";
+ src: url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/regular.eot?") format("eot"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/regular.woff2") format("woff2"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/regular.woff") format("woff"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/regular.ttf") format("truetype"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/regular.svg#opensans-regular") format("svg");
+}
+
+@font-face {
+ font-family: "opensans-semibold";
+ src: url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/semibold.eot?") format("eot"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/semibold.woff2") format("woff2"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/semibold.woff") format("woff"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/semibold.ttf") format("truetype"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/semibold.svg#opensans-semibold") format("svg");
+}
+
+@font-face {
+ font-family: "opensans-bold";
+ src: url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/bold.eot?") format("eot"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/bold.woff2") format("woff2"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/bold.woff") format("woff"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/bold.ttf") format("truetype"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/bold.svg#opensans-bold") format("svg");
+}
+
+@font-face {
+ font-family: "cern-icons";
+ src: url("//framework.web.cern.ch/framework/3.0/fonts/cern/cern.eot?") format("eot"), url("//framework.web.cern.ch/framework/3.0/fonts/cern/cern.woff2") format("woff2"), url("//framework.web.cern.ch/framework/3.0/fonts/cern/cern.woff") format("woff"), url("//framework.web.cern.ch/framework/3.0/fonts/cern/cern.ttf") format("truetype"), url("//framework.web.cern.ch/framework/3.0/fonts/cern/cern.svg#cern-icons") format("svg");
+}
+
+//
+//* ****************************************** call to actions with icon */
+.component-call-to-action {
+ word-break: break-all;
+ &.center {
+ text-align: center;
+ }
+ &.left {
+ text-align: left;
+ }
+ &.right {
+ text-align: right;
+ }
+ &__wrapper {
+ @include border-radius(6px);
+ display: inline-block;
+ text-align: left;
+ position: relative;
+ line-height: 1.1;
+ overflow: hidden;
+ &:hover {
+ a {
+ background: rgba(0, 0, 0, 0.3);
+ }
+ }
+ &.has-icon:hover a span:before {
+ right: -40px;
+ }
+ a {
+ @include font-size(1.6);
+ font-family: 'sourcesans-bold';
+ display: block;
+ border: none;
+ text-decoration: none;
+ padding: 14px 50px 13px;
+ cursor: pointer;
+ &:hover {
+ border-bottom: 0;
+ text-decoration: none;
+ }
+ }
+ &.has-icon {
+ a {
+ @include transition(all 0.3s ease-in-out 0s);
+ padding: 14px 65px 13px 50px;
+ span {
+ display: inline-block;
+ position: relative;
+ &::before {
+ @include transition(all 0.3s ease-in-out 0s);
+ content: '\j';
+ @include font-size(5.0);
+ font-family: "cern-icons";
+ -moz-osx-font-smoothing: grayscale;
+ -webkit-font-smoothing: antialiased;
+ display: inline-block;
+ position: absolute;
+ top: calc(50% - 11px);
+ right: -20px;
+ height: 22px;
+ line-height: 22px;
+ width: 9px;
+ text-indent: -21px;
+ font-weight: normal;
+ }
+ }
+ }
+ }
+ &.simple-link {
+ &:hover {
+ a {
+ background: transparent;
+ }
+ }
+ }
+ }
+}
diff --git a/cern_components/patterns/molecules/event-display/scss/mixins.scss b/patterns/molecules/call-action/sass/mixins.scss
old mode 100644
new mode 100755
similarity index 100%
rename from cern_components/patterns/molecules/event-display/scss/mixins.scss
rename to patterns/molecules/call-action/sass/mixins.scss
diff --git a/cern_components/patterns/molecules/call-action/sass/variables.scss b/patterns/molecules/call-action/sass/variables.scss
similarity index 94%
rename from cern_components/patterns/molecules/call-action/sass/variables.scss
rename to patterns/molecules/call-action/sass/variables.scss
index fab01bc1..02a86684 100755
--- a/cern_components/patterns/molecules/call-action/sass/variables.scss
+++ b/patterns/molecules/call-action/sass/variables.scss
@@ -1,85 +1,85 @@
-// mixins library
-@import 'mixins.scss';
-//
-// Variables
-// --------------------------------------------------
-// Grays
-// -------------------------
-$grey-dark: #292929;
-$grey-medium: #4a4a4a;
-$grey-light: #bebebe;
-$grey-mlight:#efe8e8;
-//
-// corporate colors
-// -------------------------
-$blue: #0855a0;
-$blue-hover: #204d74;
-$orange: #f2a530;
-//
-// Section colors
-// -------------------------
-$error: #ff0000;
-$error-light: #faeaea;
-//
-// generic variables
-// -------------------------
-$white: #ffffff;
-$black: #000000;
-$black-medium:#1a1a1a;
-$body-bg: $white;
-$text-color: $black;
-$link-color: $blue;
-//
-//
-// Styles
-// -------------------------
-%link {
- color: $link-color;
- text-decoration: none;
-}
-
-%box-title {
- @include font-size(4.0);
- color: $black;
- font-family: 'Open Sans', sans-serif;
- font-weight: 700;
- margin: 0px 0 20px;
- line-height: 50px;
-
- @media only screen and (max-width: 480px) {
- @include font-size(2.5);
- }
-}
-
-%box-text {
- @include font-size(1.6);
- color: $grey-medium;
- font-family: 'Open Sans', sans-serif;
- font-weight: 700;
-
- @media only screen and (max-width: 480px) {
- @include font-size(1.4);
- }
-}
-
-
-%title-section{
- @include font-size(3.0);
- color: $grey-dark;
- font-family: 'Open Sans', sans-serif;
- font-weight: 700;
- text-transform: uppercase;
- margin-bottom: 30px;
- display: block;
-}
-
-%line-separator-v{
- border-right:1px solid $white;
- height: 10px;
- content: '';
- display: inline-block;
- width: 1px;
- margin:0 8px;
-}
-
-
+// mixins library
+@import 'mixins.scss';
+//
+// Variables
+// --------------------------------------------------
+// Grays
+// -------------------------
+$grey-dark: #292929;
+$grey-medium: #4a4a4a;
+$grey-light: #bebebe;
+$grey-mlight:#efe8e8;
+//
+// corporate colors
+// -------------------------
+$blue: #0855a0;
+$blue-hover: #204d74;
+$orange: #f2a530;
+//
+// Section colors
+// -------------------------
+$error: #ff0000;
+$error-light: #faeaea;
+//
+// generic variables
+// -------------------------
+$white: #ffffff;
+$black: #000000;
+$black-medium:#1a1a1a;
+$body-bg: $white;
+$text-color: $black;
+$link-color: $blue;
+//
+//
+// Styles
+// -------------------------
+%link {
+ color: $link-color;
+ text-decoration: none;
+}
+
+%box-title {
+ @include font-size(4.0);
+ color: $black;
+ font-family: 'Open Sans', sans-serif;
+ font-weight: 700;
+ margin: 0px 0 20px;
+ line-height: 50px;
+
+ @media only screen and (max-width: 480px) {
+ @include font-size(2.5);
+ }
+}
+
+%box-text {
+ @include font-size(1.6);
+ color: $grey-medium;
+ font-family: 'Open Sans', sans-serif;
+ font-weight: 700;
+
+ @media only screen and (max-width: 480px) {
+ @include font-size(1.4);
+ }
+}
+
+
+%title-section{
+ @include font-size(3.0);
+ color: $grey-dark;
+ font-family: 'Open Sans', sans-serif;
+ font-weight: 700;
+ text-transform: uppercase;
+ margin-bottom: 30px;
+ display: block;
+}
+
+%line-separator-v{
+ border-right:1px solid $white;
+ height: 10px;
+ content: '';
+ display: inline-block;
+ width: 1px;
+ margin:0 8px;
+}
+
+
diff --git a/cern_components/patterns/molecules/divisions/css/divisions.component.css b/patterns/molecules/divisions/css/divisions.component.css
similarity index 100%
rename from cern_components/patterns/molecules/divisions/css/divisions.component.css
rename to patterns/molecules/divisions/css/divisions.component.css
diff --git a/cern_components/patterns/molecules/divisions/divisions.html.twig b/patterns/molecules/divisions/divisions.html.twig
similarity index 100%
rename from cern_components/patterns/molecules/divisions/divisions.html.twig
rename to patterns/molecules/divisions/divisions.html.twig
diff --git a/cern_components/patterns/molecules/divisions/divisions.ui_patterns.yml b/patterns/molecules/divisions/divisions.ui_patterns.yml
similarity index 100%
rename from cern_components/patterns/molecules/divisions/divisions.ui_patterns.yml
rename to patterns/molecules/divisions/divisions.ui_patterns.yml
diff --git a/cern_components/patterns/molecules/divisions/js/divisions.js b/patterns/molecules/divisions/js/divisions.js
similarity index 100%
rename from cern_components/patterns/molecules/divisions/js/divisions.js
rename to patterns/molecules/divisions/js/divisions.js
diff --git a/cern_components/patterns/molecules/divisions/sass/divisions.component.scss b/patterns/molecules/divisions/sass/divisions.component.scss
similarity index 100%
rename from cern_components/patterns/molecules/divisions/sass/divisions.component.scss
rename to patterns/molecules/divisions/sass/divisions.component.scss
diff --git a/cern_components/patterns/molecules/gallery/sass/mixins.scss b/patterns/molecules/divisions/sass/mixins.scss
similarity index 100%
rename from cern_components/patterns/molecules/gallery/sass/mixins.scss
rename to patterns/molecules/divisions/sass/mixins.scss
diff --git a/cern_components/patterns/molecules/divisions/sass/variables.scss b/patterns/molecules/divisions/sass/variables.scss
similarity index 100%
rename from cern_components/patterns/molecules/divisions/sass/variables.scss
rename to patterns/molecules/divisions/sass/variables.scss
diff --git a/cern_components/patterns/molecules/event-display/css/event-display.component.css b/patterns/molecules/event-display/css/event-display.component.css
similarity index 100%
rename from cern_components/patterns/molecules/event-display/css/event-display.component.css
rename to patterns/molecules/event-display/css/event-display.component.css
diff --git a/cern_components/patterns/molecules/event-display/event-display.html.twig b/patterns/molecules/event-display/event-display.html.twig
similarity index 100%
rename from cern_components/patterns/molecules/event-display/event-display.html.twig
rename to patterns/molecules/event-display/event-display.html.twig
diff --git a/cern_components/patterns/molecules/event-display/event-display.ui_patterns.yml b/patterns/molecules/event-display/event-display.ui_patterns.yml
similarity index 100%
rename from cern_components/patterns/molecules/event-display/event-display.ui_patterns.yml
rename to patterns/molecules/event-display/event-display.ui_patterns.yml
diff --git a/cern_components/patterns/molecules/event-display/js/event-display.component.js b/patterns/molecules/event-display/js/event-display.component.js
similarity index 100%
rename from cern_components/patterns/molecules/event-display/js/event-display.component.js
rename to patterns/molecules/event-display/js/event-display.component.js
diff --git a/cern_components/patterns/molecules/event-display/scss/event-display.component.scss b/patterns/molecules/event-display/scss/event-display.component.scss
similarity index 100%
rename from cern_components/patterns/molecules/event-display/scss/event-display.component.scss
rename to patterns/molecules/event-display/scss/event-display.component.scss
diff --git a/cern_components/patterns/molecules/header-block/sass/mixins.scss b/patterns/molecules/event-display/scss/mixins.scss
old mode 100755
new mode 100644
similarity index 100%
rename from cern_components/patterns/molecules/header-block/sass/mixins.scss
rename to patterns/molecules/event-display/scss/mixins.scss
diff --git a/cern_components/patterns/molecules/event-display/scss/variables.scss b/patterns/molecules/event-display/scss/variables.scss
similarity index 100%
rename from cern_components/patterns/molecules/event-display/scss/variables.scss
rename to patterns/molecules/event-display/scss/variables.scss
diff --git a/cern_components/patterns/molecules/faq-box/css/faq-box.component.css b/patterns/molecules/faq-box/css/faq-box.component.css
similarity index 100%
rename from cern_components/patterns/molecules/faq-box/css/faq-box.component.css
rename to patterns/molecules/faq-box/css/faq-box.component.css
diff --git a/cern_components/patterns/molecules/faq-box/faq-box.html.twig b/patterns/molecules/faq-box/faq-box.html.twig
similarity index 100%
rename from cern_components/patterns/molecules/faq-box/faq-box.html.twig
rename to patterns/molecules/faq-box/faq-box.html.twig
diff --git a/cern_components/patterns/molecules/faq-box/faq-box.ui_patterns.yml b/patterns/molecules/faq-box/faq-box.ui_patterns.yml
similarity index 100%
rename from cern_components/patterns/molecules/faq-box/faq-box.ui_patterns.yml
rename to patterns/molecules/faq-box/faq-box.ui_patterns.yml
diff --git a/cern_components/patterns/molecules/faq-box/scss/faq-box.component.scss b/patterns/molecules/faq-box/scss/faq-box.component.scss
similarity index 100%
rename from cern_components/patterns/molecules/faq-box/scss/faq-box.component.scss
rename to patterns/molecules/faq-box/scss/faq-box.component.scss
diff --git a/cern_components/patterns/molecules/faq-display/css/faq-display.component.css b/patterns/molecules/faq-display/css/faq-display.component.css
similarity index 100%
rename from cern_components/patterns/molecules/faq-display/css/faq-display.component.css
rename to patterns/molecules/faq-display/css/faq-display.component.css
diff --git a/cern_components/patterns/molecules/faq-display/faq-display.html.twig b/patterns/molecules/faq-display/faq-display.html.twig
similarity index 100%
rename from cern_components/patterns/molecules/faq-display/faq-display.html.twig
rename to patterns/molecules/faq-display/faq-display.html.twig
diff --git a/cern_components/patterns/molecules/faq-display/faq-display.ui_patterns.yml b/patterns/molecules/faq-display/faq-display.ui_patterns.yml
similarity index 100%
rename from cern_components/patterns/molecules/faq-display/faq-display.ui_patterns.yml
rename to patterns/molecules/faq-display/faq-display.ui_patterns.yml
diff --git a/cern_components/patterns/molecules/faq-display/images/loading-cern.gif b/patterns/molecules/faq-display/images/loading-cern.gif
similarity index 100%
rename from cern_components/patterns/molecules/faq-display/images/loading-cern.gif
rename to patterns/molecules/faq-display/images/loading-cern.gif
diff --git a/cern_components/patterns/molecules/faq-display/js/faq-display.component.js b/patterns/molecules/faq-display/js/faq-display.component.js
similarity index 100%
rename from cern_components/patterns/molecules/faq-display/js/faq-display.component.js
rename to patterns/molecules/faq-display/js/faq-display.component.js
diff --git a/cern_components/patterns/molecules/faq-display/scss/faq-display.component.scss b/patterns/molecules/faq-display/scss/faq-display.component.scss
similarity index 100%
rename from cern_components/patterns/molecules/faq-display/scss/faq-display.component.scss
rename to patterns/molecules/faq-display/scss/faq-display.component.scss
diff --git a/cern_components/patterns/molecules/faq-list/css/faq-list.component.css b/patterns/molecules/faq-list/css/faq-list.component.css
similarity index 100%
rename from cern_components/patterns/molecules/faq-list/css/faq-list.component.css
rename to patterns/molecules/faq-list/css/faq-list.component.css
diff --git a/cern_components/patterns/molecules/faq-list/faq-list.html.twig b/patterns/molecules/faq-list/faq-list.html.twig
similarity index 100%
rename from cern_components/patterns/molecules/faq-list/faq-list.html.twig
rename to patterns/molecules/faq-list/faq-list.html.twig
diff --git a/cern_components/patterns/molecules/faq-list/faq-list.ui_patterns.yml b/patterns/molecules/faq-list/faq-list.ui_patterns.yml
similarity index 100%
rename from cern_components/patterns/molecules/faq-list/faq-list.ui_patterns.yml
rename to patterns/molecules/faq-list/faq-list.ui_patterns.yml
diff --git a/cern_components/patterns/molecules/faq-list/js/faq-list.component.js b/patterns/molecules/faq-list/js/faq-list.component.js
similarity index 100%
rename from cern_components/patterns/molecules/faq-list/js/faq-list.component.js
rename to patterns/molecules/faq-list/js/faq-list.component.js
diff --git a/cern_components/patterns/molecules/faq-list/scss/faq-list.component.css b/patterns/molecules/faq-list/scss/faq-list.component.css
similarity index 100%
rename from cern_components/patterns/molecules/faq-list/scss/faq-list.component.css
rename to patterns/molecules/faq-list/scss/faq-list.component.css
diff --git a/cern_components/patterns/molecules/faq-list/scss/faq-list.component.scss b/patterns/molecules/faq-list/scss/faq-list.component.scss
similarity index 100%
rename from cern_components/patterns/molecules/faq-list/scss/faq-list.component.scss
rename to patterns/molecules/faq-list/scss/faq-list.component.scss
diff --git a/cern_components/patterns/molecules/feature-story-page/feature-story-page.html.twig b/patterns/molecules/feature-story-page/feature-story-page.html.twig
similarity index 100%
rename from cern_components/patterns/molecules/feature-story-page/feature-story-page.html.twig
rename to patterns/molecules/feature-story-page/feature-story-page.html.twig
diff --git a/cern_components/patterns/molecules/feature-story-page/feature-story-page.ui_patterns.yml b/patterns/molecules/feature-story-page/feature-story-page.ui_patterns.yml
similarity index 100%
rename from cern_components/patterns/molecules/feature-story-page/feature-story-page.ui_patterns.yml
rename to patterns/molecules/feature-story-page/feature-story-page.ui_patterns.yml
diff --git a/cern_components/patterns/molecules/gallery/css/gallery-component.css b/patterns/molecules/gallery/css/gallery-component.css
similarity index 100%
rename from cern_components/patterns/molecules/gallery/css/gallery-component.css
rename to patterns/molecules/gallery/css/gallery-component.css
diff --git a/cern_components/patterns/molecules/gallery/gallery.html.twig b/patterns/molecules/gallery/gallery.html.twig
similarity index 100%
rename from cern_components/patterns/molecules/gallery/gallery.html.twig
rename to patterns/molecules/gallery/gallery.html.twig
diff --git a/cern_components/patterns/molecules/gallery/gallery.ui_patterns.yml b/patterns/molecules/gallery/gallery.ui_patterns.yml
similarity index 100%
rename from cern_components/patterns/molecules/gallery/gallery.ui_patterns.yml
rename to patterns/molecules/gallery/gallery.ui_patterns.yml
diff --git a/cern_components/patterns/molecules/gallery/images/video.png b/patterns/molecules/gallery/images/video.png
similarity index 100%
rename from cern_components/patterns/molecules/gallery/images/video.png
rename to patterns/molecules/gallery/images/video.png
diff --git a/cern_components/patterns/molecules/gallery/js/colorbox/colorbox.css b/patterns/molecules/gallery/js/colorbox/colorbox.css
similarity index 100%
rename from cern_components/patterns/molecules/gallery/js/colorbox/colorbox.css
rename to patterns/molecules/gallery/js/colorbox/colorbox.css
diff --git a/cern_components/patterns/molecules/gallery/js/colorbox/images/_loading.gif b/patterns/molecules/gallery/js/colorbox/images/_loading.gif
similarity index 100%
rename from cern_components/patterns/molecules/gallery/js/colorbox/images/_loading.gif
rename to patterns/molecules/gallery/js/colorbox/images/_loading.gif
diff --git a/cern_components/patterns/molecules/gallery/js/colorbox/images/controls.png b/patterns/molecules/gallery/js/colorbox/images/controls.png
similarity index 100%
rename from cern_components/patterns/molecules/gallery/js/colorbox/images/controls.png
rename to patterns/molecules/gallery/js/colorbox/images/controls.png
diff --git a/cern_components/patterns/molecules/gallery/js/colorbox/images/loading.gif b/patterns/molecules/gallery/js/colorbox/images/loading.gif
similarity index 100%
rename from cern_components/patterns/molecules/gallery/js/colorbox/images/loading.gif
rename to patterns/molecules/gallery/js/colorbox/images/loading.gif
diff --git a/cern_components/patterns/molecules/gallery/js/colorbox/jquery.colorbox-min.js b/patterns/molecules/gallery/js/colorbox/jquery.colorbox-min.js
similarity index 100%
rename from cern_components/patterns/molecules/gallery/js/colorbox/jquery.colorbox-min.js
rename to patterns/molecules/gallery/js/colorbox/jquery.colorbox-min.js
diff --git a/cern_components/patterns/molecules/gallery/js/colorbox/jquery.colorbox.js b/patterns/molecules/gallery/js/colorbox/jquery.colorbox.js
similarity index 100%
rename from cern_components/patterns/molecules/gallery/js/colorbox/jquery.colorbox.js
rename to patterns/molecules/gallery/js/colorbox/jquery.colorbox.js
diff --git a/cern_components/patterns/molecules/gallery/js/gallery_carousel.js b/patterns/molecules/gallery/js/gallery_carousel.js
similarity index 100%
rename from cern_components/patterns/molecules/gallery/js/gallery_carousel.js
rename to patterns/molecules/gallery/js/gallery_carousel.js
diff --git a/cern_components/patterns/molecules/gallery/sass/gallery-component.scss b/patterns/molecules/gallery/sass/gallery-component.scss
similarity index 100%
rename from cern_components/patterns/molecules/gallery/sass/gallery-component.scss
rename to patterns/molecules/gallery/sass/gallery-component.scss
diff --git a/cern_components/patterns/molecules/icon/sass/mixins.scss b/patterns/molecules/gallery/sass/mixins.scss
old mode 100644
new mode 100755
similarity index 100%
rename from cern_components/patterns/molecules/icon/sass/mixins.scss
rename to patterns/molecules/gallery/sass/mixins.scss
diff --git a/cern_components/patterns/molecules/gallery/sass/variables.scss b/patterns/molecules/gallery/sass/variables.scss
similarity index 100%
rename from cern_components/patterns/molecules/gallery/sass/variables.scss
rename to patterns/molecules/gallery/sass/variables.scss
diff --git a/cern_components/patterns/molecules/header-block/css/header-component.css b/patterns/molecules/header-block/css/header-component.css
similarity index 100%
rename from cern_components/patterns/molecules/header-block/css/header-component.css
rename to patterns/molecules/header-block/css/header-component.css
diff --git a/cern_components/patterns/molecules/header-block/header-block.html.twig b/patterns/molecules/header-block/header-block.html.twig
similarity index 100%
rename from cern_components/patterns/molecules/header-block/header-block.html.twig
rename to patterns/molecules/header-block/header-block.html.twig
diff --git a/cern_components/patterns/molecules/header-block/header-block.ui_patterns.yml b/patterns/molecules/header-block/header-block.ui_patterns.yml
similarity index 100%
rename from cern_components/patterns/molecules/header-block/header-block.ui_patterns.yml
rename to patterns/molecules/header-block/header-block.ui_patterns.yml
diff --git a/cern_components/patterns/molecules/header-block/sass/header-component.scss b/patterns/molecules/header-block/sass/header-component.scss
similarity index 100%
rename from cern_components/patterns/molecules/header-block/sass/header-component.scss
rename to patterns/molecules/header-block/sass/header-component.scss
diff --git a/cern_components/patterns/molecules/quote/scss/mixins.scss b/patterns/molecules/header-block/sass/mixins.scss
old mode 100644
new mode 100755
similarity index 100%
rename from cern_components/patterns/molecules/quote/scss/mixins.scss
rename to patterns/molecules/header-block/sass/mixins.scss
diff --git a/cern_components/patterns/molecules/header-block/sass/variables.scss b/patterns/molecules/header-block/sass/variables.scss
similarity index 100%
rename from cern_components/patterns/molecules/header-block/sass/variables.scss
rename to patterns/molecules/header-block/sass/variables.scss
diff --git a/cern_components/patterns/molecules/header-blocks/css/header_blocks.css b/patterns/molecules/header-blocks/css/header_blocks.css
similarity index 100%
rename from cern_components/patterns/molecules/header-blocks/css/header_blocks.css
rename to patterns/molecules/header-blocks/css/header_blocks.css
diff --git a/cern_components/patterns/molecules/header-blocks/header-blocks.html.twig b/patterns/molecules/header-blocks/header-blocks.html.twig
similarity index 100%
rename from cern_components/patterns/molecules/header-blocks/header-blocks.html.twig
rename to patterns/molecules/header-blocks/header-blocks.html.twig
diff --git a/cern_components/patterns/molecules/header-blocks/header-blocks.ui_patterns.yml b/patterns/molecules/header-blocks/header-blocks.ui_patterns.yml
similarity index 100%
rename from cern_components/patterns/molecules/header-blocks/header-blocks.ui_patterns.yml
rename to patterns/molecules/header-blocks/header-blocks.ui_patterns.yml
diff --git a/cern_components/patterns/molecules/header-blocks/images/arrow-black.png b/patterns/molecules/header-blocks/images/arrow-black.png
similarity index 100%
rename from cern_components/patterns/molecules/header-blocks/images/arrow-black.png
rename to patterns/molecules/header-blocks/images/arrow-black.png
diff --git a/cern_components/patterns/molecules/header-blocks/images/arrow-blue.png b/patterns/molecules/header-blocks/images/arrow-blue.png
similarity index 100%
rename from cern_components/patterns/molecules/header-blocks/images/arrow-blue.png
rename to patterns/molecules/header-blocks/images/arrow-blue.png
diff --git a/cern_components/patterns/molecules/header-blocks/js/header_carousel.js b/patterns/molecules/header-blocks/js/header_carousel.js
similarity index 100%
rename from cern_components/patterns/molecules/header-blocks/js/header_carousel.js
rename to patterns/molecules/header-blocks/js/header_carousel.js
diff --git a/cern_components/patterns/molecules/icon/css/icon-component.css b/patterns/molecules/icon/css/icon-component.css
similarity index 100%
rename from cern_components/patterns/molecules/icon/css/icon-component.css
rename to patterns/molecules/icon/css/icon-component.css
diff --git a/cern_components/patterns/molecules/icon/css/icon-styles.css b/patterns/molecules/icon/css/icon-styles.css
similarity index 100%
rename from cern_components/patterns/molecules/icon/css/icon-styles.css
rename to patterns/molecules/icon/css/icon-styles.css
diff --git a/cern_components/patterns/molecules/icon/icon.html.twig b/patterns/molecules/icon/icon.html.twig
similarity index 100%
rename from cern_components/patterns/molecules/icon/icon.html.twig
rename to patterns/molecules/icon/icon.html.twig
diff --git a/cern_components/patterns/molecules/icon/icon.ui_patterns.yml b/patterns/molecules/icon/icon.ui_patterns.yml
similarity index 100%
rename from cern_components/patterns/molecules/icon/icon.ui_patterns.yml
rename to patterns/molecules/icon/icon.ui_patterns.yml
diff --git a/cern_components/patterns/molecules/icon/sass/icon-component.scss b/patterns/molecules/icon/sass/icon-component.scss
similarity index 100%
rename from cern_components/patterns/molecules/icon/sass/icon-component.scss
rename to patterns/molecules/icon/sass/icon-component.scss
diff --git a/cern_components/patterns/molecules/related-card/sass/mixins.scss b/patterns/molecules/icon/sass/mixins.scss
old mode 100755
new mode 100644
similarity index 100%
rename from cern_components/patterns/molecules/related-card/sass/mixins.scss
rename to patterns/molecules/icon/sass/mixins.scss
diff --git a/cern_components/patterns/molecules/icon/sass/variables.scss b/patterns/molecules/icon/sass/variables.scss
similarity index 100%
rename from cern_components/patterns/molecules/icon/sass/variables.scss
rename to patterns/molecules/icon/sass/variables.scss
diff --git a/cern_components/patterns/molecules/icons/icons.html.twig b/patterns/molecules/icons/icons.html.twig
similarity index 100%
rename from cern_components/patterns/molecules/icons/icons.html.twig
rename to patterns/molecules/icons/icons.html.twig
diff --git a/cern_components/patterns/molecules/icons/icons.ui_patterns.yml b/patterns/molecules/icons/icons.ui_patterns.yml
similarity index 100%
rename from cern_components/patterns/molecules/icons/icons.ui_patterns.yml
rename to patterns/molecules/icons/icons.ui_patterns.yml
diff --git a/cern_components/patterns/molecules/margin/css/margin.component.css b/patterns/molecules/margin/css/margin.component.css
similarity index 100%
rename from cern_components/patterns/molecules/margin/css/margin.component.css
rename to patterns/molecules/margin/css/margin.component.css
diff --git a/cern_components/patterns/molecules/margin/margin.html.twig b/patterns/molecules/margin/margin.html.twig
similarity index 100%
rename from cern_components/patterns/molecules/margin/margin.html.twig
rename to patterns/molecules/margin/margin.html.twig
diff --git a/cern_components/patterns/molecules/margin/margin.ui_patterns.yml b/patterns/molecules/margin/margin.ui_patterns.yml
similarity index 100%
rename from cern_components/patterns/molecules/margin/margin.ui_patterns.yml
rename to patterns/molecules/margin/margin.ui_patterns.yml
diff --git a/cern_components/patterns/molecules/margin/scss/margin.component.scss b/patterns/molecules/margin/scss/margin.component.scss
similarity index 100%
rename from cern_components/patterns/molecules/margin/scss/margin.component.scss
rename to patterns/molecules/margin/scss/margin.component.scss
diff --git a/cern_components/patterns/molecules/media/css/media.component.css b/patterns/molecules/media/css/media.component.css
similarity index 98%
rename from cern_components/patterns/molecules/media/css/media.component.css
rename to patterns/molecules/media/css/media.component.css
index da2a92f6..2754945f 100755
--- a/cern_components/patterns/molecules/media/css/media.component.css
+++ b/patterns/molecules/media/css/media.component.css
@@ -1,413 +1,413 @@
-@font-face {
- font-family: "sourcesans-regular";
- src: url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/regular.eot?") format("eot"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/regular.woff2") format("woff2"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/regular.woff") format("woff"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/regular.ttf") format("truetype"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/regular.svg#sourcesans-regular") format("svg"); }
-@font-face {
- font-family: "sourcesans-semibold";
- src: url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/semibold.eot?") format("eot"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/semibold.woff2") format("woff2"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/semibold.woff") format("woff"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/semibold.ttf") format("truetype"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/semibold.svg#sourcesans-semibold") format("svg"); }
-@font-face {
- font-family: "sourcesans-bold";
- src: url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/bold.eot?") format("eot"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/bold.woff2") format("woff2"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/bold.woff") format("woff"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/bold.ttf") format("truetype"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/bold.svg#sourcesans-bold") format("svg"); }
-@font-face {
- font-family: "sourcesans-light";
- src: url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/light.eot?") format("eot"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/light.woff2") format("woff2"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/light.woff") format("woff"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/light.ttf") format("truetype"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/light.svg#sourcesans-light") format("svg"); }
-@font-face {
- font-family: "opensans-regular";
- src: url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/regular.eot?") format("eot"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/regular.woff2") format("woff2"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/regular.woff") format("woff"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/regular.ttf") format("truetype"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/regular.svg#opensans-regular") format("svg"); }
-@font-face {
- font-family: "opensans-semibold";
- src: url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/semibold.eot?") format("eot"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/semibold.woff2") format("woff2"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/semibold.woff") format("woff"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/semibold.ttf") format("truetype"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/semibold.svg#opensans-semibold") format("svg"); }
-@font-face {
- font-family: "opensans-bold";
- src: url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/bold.eot?") format("eot"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/bold.woff2") format("woff2"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/bold.woff") format("woff"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/bold.ttf") format("truetype"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/bold.svg#opensans-bold") format("svg"); }
-@font-face {
- font-family: "cern-icons";
- src: url("//framework.web.cern.ch/framework/3.0/fonts/cern/cern.eot?") format("eot"), url("//framework.web.cern.ch/framework/3.0/fonts/cern/cern.woff2") format("woff2"), url("//framework.web.cern.ch/framework/3.0/fonts/cern/cern.woff") format("woff"), url("//framework.web.cern.ch/framework/3.0/fonts/cern/cern.ttf") format("truetype"), url("//framework.web.cern.ch/framework/3.0/fonts/cern/cern.svg#cern-icons") format("svg"); }
-.component-media-content {
- display: -webkit-box;
- display: -moz-box;
- display: -ms-flexbox;
- display: -webkit-flex;
- display: flex;
- font-size: 14px;
- font-size: 1.4rem;
- font-family: 'sourcesans-regular';
- position: relative;
- min-height: 210px;
- float: left;
- vertical-align: top;
- max-width: 100%;
- padding: 30px 40px; }
- .component-media-content__wrapper {
- display: -webkit-box;
- display: -moz-box;
- display: -ms-flexbox;
- display: -webkit-flex;
- display: flex;
- -webkit-align-items: center;
- -moz-align-items: center;
- -ms-align-items: center;
- align-items: center;
- -webkit-justify-content: flex-end;
- -moz-justify-content: flex-end;
- -ms-justify-content: flex-end;
- justify-content: flex-end;
- -ms-flex-pack: flex-end;
- -webkit-flex-flow: column;
- -moz-flex-flow: column;
- -ms-flex-flow: column;
- flex-flow: column;
- position: relative;
- z-index: 10;
- height: 150px;
- width: 100%; }
- .component-media-content__subwrapper {
- -webkit-align-self: flex-end;
- -moz-align-self: flex-end;
- -ms-align-self: flex-end;
- align-self: flex-end;
- width: 100%; }
- .component-media-content__icon {
- width: 30px;
- height: 30px;
- margin: auto;
- position: absolute;
- left: 0;
- bottom: 0;
- right: 0;
- z-index: 1;
- display: block;
- text-indent: -999999px;
- width: 30px;
- height: 30px;
- top: -15px; }
- .component-media-content__icon::before {
- content: "\7a";
- font-size: 50px;
- font-size: 5rem;
- font-family: "cern-icons";
- -moz-osx-font-smoothing: grayscale;
- -webkit-font-smoothing: antialiased;
- width: 30px;
- height: 30px;
- display: block;
- position: absolute;
- line-height: 30px;
- text-indent: -9px;
- font-weight: normal; }
- .component-media-content__title {
- display: -webkit-box;
- display: -moz-box;
- display: -ms-flexbox;
- display: -webkit-flex;
- display: flex;
- -webkit-flex-wrap: wrap;
- -moz-flex-wrap: wrap;
- -ms-flex-wrap: wrap;
- flex-wrap: wrap;
- -webkit-flex-flow: column;
- -moz-flex-flow: column;
- -ms-flex-flow: column;
- flex-flow: column;
- margin: 0; }
- .component-media-content__title h3 {
- font-size: 20px;
- font-size: 2rem;
- font-family: 'sourcesans-semibold';
- line-height: 26px;
- padding: 0;
- margin: 0;
- max-width: 100%; }
- .component-media-content__title h3 a {
- display: block;
- position: relative; }
- .component-media-content__title h3 a span {
- display: block;
- width: 100%;
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis; }
- .component-media-content__title h3 a:hover {
- text-decoration: none; }
- .component-media-content__title h3 a:before {
- content: '\j';
- font-size: 40px;
- font-size: 4rem;
- -webkit-transition: all 0.6s ease-in-out 0s;
- -khtml-transition: all 0.6s ease-in-out 0s;
- -moz-transition: all 0.6s ease-in-out 0s;
- -ms-transition: all 0.6s ease-in-out 0s;
- -o-transition: all 0.6s ease-in-out 0s;
- transition: all 0.6s ease-in-out 0s;
- font-family: "cern-icons";
- -moz-osx-font-smoothing: grayscale;
- -webkit-font-smoothing: antialiased;
- display: inline-block;
- vertical-align: bottom;
- position: absolute;
- top: -1px;
- left: -10px;
- line-height: 25px;
- width: 12px;
- text-indent: -25px; }
- .component-media-content__title h3 a:hover:before {
- left: 0; }
- .component-media-content.image-360 .component-media-content__icon::before, .component-media-content.video-360 .component-media-content__icon::before {
- content: "\t"; }
- .component-media-content.anual-report .component-media-content__icon::before {
- content: "\^"; }
- .component-media-content.brochure .component-media-content__icon::before {
- content: "\^"; }
- .component-media-content.bulletin .component-media-content__icon::before {
- content: "\~"; }
- .component-media-content.courier .component-media-content__icon::before {
- content: "\^"; }
- .component-media-content.document .component-media-content__icon::before {
- content: "\~"; }
- .component-media-content.image .component-media-content__icon::before {
- content: "\z"; }
- .component-media-content.presentation .component-media-content__icon::before {
- content: "\_"; }
- .component-media-content.publication .component-media-content__icon::before {
- content: "\^"; }
- .component-media-content.video .component-media-content__icon::before {
- content: "\Z"; }
- .component-media-content.portrait {
- width: calc(33.3% - 8px);
- min-height: 428px;
- margin: 4px; }
- .component-media-content.portrait .component-media-content__wrapper {
- height: 368px; }
- @media screen and (max-width: 991px) {
- .component-media-content.portrait {
- width: calc(50% - 8px); } }
- @media screen and (max-width: 767px) {
- .component-media-content.portrait {
- margin: 4px 0;
- min-height: 210px;
- width: 100%; }
- .component-media-content.portrait .component-media-content__wrapper {
- height: 150px; } }
- .component-media-content.portrait:hover .component-media-content__veil {
- opacity: 0; }
- .component-media-content.simple-display {
- width: calc(33.3% - 8px);
- min-height: 210px;
- margin: 4px; }
- @media screen and (max-width: 991px) {
- .component-media-content.simple-display {
- width: calc(50% - 8px); } }
- @media screen and (max-width: 767px) {
- .component-media-content.simple-display {
- margin: 4px 0;
- width: 100%; } }
- .component-media-content.simple-display:hover .component-media-content__veil {
- opacity: 0; }
- .component-media-content.portrait.box-force-full-width {
- width: calc(100% - 8px);
- min-height: 428px;
- margin: 4px; }
- @media screen and (max-width: 991px) {
- .component-media-content.portrait.box-force-full-width {
- width: calc(100% - 8px); } }
- @media screen and (max-width: 767px) {
- .component-media-content.portrait.box-force-full-width {
- margin: 4px 0;
- width: 100%; } }
- .component-media-content.portrait.box-force-full-width:hover .component-media-content__veil {
- opacity: 0; }
- .component-media-content.simple-display.box-force-full-width, .component-media-content:not(.portrait):not(.simple-display) {
- width: calc(100% - 8px);
- min-height: 210px;
- margin: 4px; }
- @media screen and (max-width: 991px) {
- .component-media-content.simple-display.box-force-full-width, .component-media-content:not(.portrait):not(.simple-display) {
- width: calc(100% - 8px); } }
- @media screen and (max-width: 767px) {
- .component-media-content.simple-display.box-force-full-width, .component-media-content:not(.portrait):not(.simple-display) {
- margin: 4px 0;
- width: 100%; } }
- .component-media-content.simple-display.box-force-full-width:hover .component-media-content__veil, .component-media-content:not(.portrait):not(.simple-display):hover .component-media-content__veil {
- opacity: 0; }
- .component-media-content *,
- .component-media-content *::after,
- .component-media-content *::before {
- box-sizing: border-box; }
- .component-media-content .gutter-sizer {
- width: 4%; }
- .component-media-content__veil {
- -webkit-transition: all 0.4s ease-in-out 0s;
- -khtml-transition: all 0.4s ease-in-out 0s;
- -moz-transition: all 0.4s ease-in-out 0s;
- -ms-transition: all 0.4s ease-in-out 0s;
- -o-transition: all 0.4s ease-in-out 0s;
- transition: all 0.4s ease-in-out 0s;
- background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.9)));
- background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.9));
- background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.9));
- background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.9));
- background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.9));
- background-image: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.9));
- filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='rgba(0, 0, 0, 0)', endColorStr='rgba(0, 0, 0, 0.9)');
- position: absolute;
- height: 101%;
- width: 101%;
- top: 0;
- left: 0;
- z-index: 0; }
-
-.component-row__sidebar-right .component-media-content.portrait,
-.component-row__sidebar-left .component-media-content.portrait {
- margin: 4px 4px 4px 0px;
- width: 100%;
- min-height: 210px; }
- .component-row__sidebar-right .component-media-content.portrait .component-media-content__wrapper,
- .component-row__sidebar-left .component-media-content.portrait .component-media-content__wrapper {
- height: 150px; }
- @media screen and (max-width: 991px) {
- .component-row__sidebar-right .component-media-content.portrait,
- .component-row__sidebar-left .component-media-content.portrait {
- margin: 4px;
- width: calc(100% - 8px); } }
- @media screen and (max-width: 767px) {
- .component-row__sidebar-right .component-media-content.portrait,
- .component-row__sidebar-left .component-media-content.portrait {
- margin: 4px 0;
- width: 100%; } }
-.component-row__sidebar-right .component-media-content.simple-display,
-.component-row__sidebar-left .component-media-content.simple-display {
- margin: 4px 4px 4px 0px;
- width: 100%;
- min-height: 210px; }
- .component-row__sidebar-right .component-media-content.simple-display .component-media-content__wrapper,
- .component-row__sidebar-left .component-media-content.simple-display .component-media-content__wrapper {
- height: 150px; }
- @media screen and (max-width: 991px) {
- .component-row__sidebar-right .component-media-content.simple-display,
- .component-row__sidebar-left .component-media-content.simple-display {
- margin: 4px;
- width: calc(100% - 8px); } }
- @media screen and (max-width: 767px) {
- .component-row__sidebar-right .component-media-content.simple-display,
- .component-row__sidebar-left .component-media-content.simple-display {
- margin: 4px 0;
- width: 100%; } }
-.component-row__sidebar-right .component-media-content:not(.portrait):not(.simple-display),
-.component-row__sidebar-left .component-media-content:not(.portrait):not(.simple-display) {
- margin: 4px 4px 4px 0px;
- width: 100%;
- min-height: 210px; }
- .component-row__sidebar-right .component-media-content:not(.portrait):not(.simple-display) .component-media-content__wrapper,
- .component-row__sidebar-left .component-media-content:not(.portrait):not(.simple-display) .component-media-content__wrapper {
- height: 150px; }
- @media screen and (max-width: 991px) {
- .component-row__sidebar-right .component-media-content:not(.portrait):not(.simple-display),
- .component-row__sidebar-left .component-media-content:not(.portrait):not(.simple-display) {
- margin: 4px;
- width: calc(100% - 8px); } }
- @media screen and (max-width: 767px) {
- .component-row__sidebar-right .component-media-content:not(.portrait):not(.simple-display),
- .component-row__sidebar-left .component-media-content:not(.portrait):not(.simple-display) {
- margin: 4px 0;
- width: 100%; } }
-
-@media screen and (min-width: 992px) {
- .component-row.box-effects .component-row__center .component-media-content {
- -webkit-transition: all 0.4s ease-in-out 0s;
- -khtml-transition: all 0.4s ease-in-out 0s;
- -moz-transition: all 0.4s ease-in-out 0s;
- -ms-transition: all 0.4s ease-in-out 0s;
- -o-transition: all 0.4s ease-in-out 0s;
- transition: all 0.4s ease-in-out 0s; }
- .component-row.box-effects .component-row__center .component-media-content.portrait {
- width: calc(33.3% - 38px); } }
- @media screen and (min-width: 992px) and (max-width: 991px) {
- .component-row.box-effects .component-row__center .component-media-content.portrait {
- width: calc(50% - 38px); } }
- @media screen and (min-width: 992px) and (max-width: 767px) {
- .component-row.box-effects .component-row__center .component-media-content.portrait {
- width: 100% !important; } }
-@media screen and (min-width: 992px) {
- .component-row.box-effects .component-row__center .component-media-content.portrait.from-smaller {
- -webkit-transition: all 0.4s ease-in-out 0s;
- -khtml-transition: all 0.4s ease-in-out 0s;
- -moz-transition: all 0.4s ease-in-out 0s;
- -ms-transition: all 0.4s ease-in-out 0s;
- -o-transition: all 0.4s ease-in-out 0s;
- transition: all 0.4s ease-in-out 0s; }
- .component-row.box-effects .component-row__center .component-media-content.portrait.from-bigger, .component-row.box-effects .component-row__center .component-media-content.portrait.from-bigger.from-smaller {
- -webkit-transition: all 0.4s ease-in-out 0s;
- -khtml-transition: all 0.4s ease-in-out 0s;
- -moz-transition: all 0.4s ease-in-out 0s;
- -ms-transition: all 0.4s ease-in-out 0s;
- -o-transition: all 0.4s ease-in-out 0s;
- transition: all 0.4s ease-in-out 0s; }
- .component-row.box-effects .component-row__center .component-media-content.portrait.make-bigger {
- -webkit-transition: all 0.4s ease-in-out 0s;
- -khtml-transition: all 0.4s ease-in-out 0s;
- -moz-transition: all 0.4s ease-in-out 0s;
- -ms-transition: all 0.4s ease-in-out 0s;
- -o-transition: all 0.4s ease-in-out 0s;
- transition: all 0.4s ease-in-out 0s;
- width: calc(43.3% - 38px) !important; }
- .component-row.box-effects .component-row__center .component-media-content.portrait.make-smaller {
- -webkit-transition: all 0.4s ease-in-out 0s;
- -khtml-transition: all 0.4s ease-in-out 0s;
- -moz-transition: all 0.4s ease-in-out 0s;
- -ms-transition: all 0.4s ease-in-out 0s;
- -o-transition: all 0.4s ease-in-out 0s;
- transition: all 0.4s ease-in-out 0s;
- width: calc(23.3% - 38px) !important; }
- .component-row.box-effects .component-row__center .component-media-content.portrait:hover .component-preview-cards__veil {
- opacity: 0; }
- .component-row.box-effects .component-row__center .component-media-content.simple-display {
- width: calc(33.3% - 38px); } }
- @media screen and (min-width: 992px) and (max-width: 991px) {
- .component-row.box-effects .component-row__center .component-media-content.simple-display {
- width: calc(50% - 38px); } }
- @media screen and (min-width: 992px) and (max-width: 767px) {
- .component-row.box-effects .component-row__center .component-media-content.simple-display {
- width: 100% !important; } }
-@media screen and (min-width: 992px) {
- .component-row.box-effects .component-row__center .component-media-content.simple-display.from-smaller {
- -webkit-transition: all 0.4s ease-in-out 0s;
- -khtml-transition: all 0.4s ease-in-out 0s;
- -moz-transition: all 0.4s ease-in-out 0s;
- -ms-transition: all 0.4s ease-in-out 0s;
- -o-transition: all 0.4s ease-in-out 0s;
- transition: all 0.4s ease-in-out 0s; }
- .component-row.box-effects .component-row__center .component-media-content.simple-display.from-bigger, .component-row.box-effects .component-row__center .component-media-content.simple-display.from-bigger.from-smaller {
- -webkit-transition: all 0.4s ease-in-out 0s;
- -khtml-transition: all 0.4s ease-in-out 0s;
- -moz-transition: all 0.4s ease-in-out 0s;
- -ms-transition: all 0.4s ease-in-out 0s;
- -o-transition: all 0.4s ease-in-out 0s;
- transition: all 0.4s ease-in-out 0s; }
- .component-row.box-effects .component-row__center .component-media-content.simple-display.make-bigger {
- -webkit-transition: all 0.4s ease-in-out 0s;
- -khtml-transition: all 0.4s ease-in-out 0s;
- -moz-transition: all 0.4s ease-in-out 0s;
- -ms-transition: all 0.4s ease-in-out 0s;
- -o-transition: all 0.4s ease-in-out 0s;
- transition: all 0.4s ease-in-out 0s;
- width: calc(43.3% - 38px) !important; }
- .component-row.box-effects .component-row__center .component-media-content.simple-display.make-smaller {
- -webkit-transition: all 0.4s ease-in-out 0s;
- -khtml-transition: all 0.4s ease-in-out 0s;
- -moz-transition: all 0.4s ease-in-out 0s;
- -ms-transition: all 0.4s ease-in-out 0s;
- -o-transition: all 0.4s ease-in-out 0s;
- transition: all 0.4s ease-in-out 0s;
- width: calc(23.3% - 38px) !important; }
- .component-row.box-effects .component-row__center .component-media-content.simple-display:hover .component-preview-cards__veil {
- opacity: 0; }
- .component-row.box-effects .component-row__center .component-media-content.portrait.box-force-full-width, .component-row.box-effects .component-row__center .component-media-content.simple-display.box-force-full-width, .component-row.box-effects .component-row__center .component-media-content:not(.portrait):not(.simple-display) {
- width: calc(100% - 98px); } }
- @media screen and (min-width: 992px) and (max-width: 991px) {
- .component-row.box-effects .component-row__center .component-media-content.portrait.box-force-full-width, .component-row.box-effects .component-row__center .component-media-content.simple-display.box-force-full-width, .component-row.box-effects .component-row__center .component-media-content:not(.portrait):not(.simple-display) {
- width: calc(100% - 98px); } }
- @media screen and (min-width: 992px) and (max-width: 767px) {
- .component-row.box-effects .component-row__center .component-media-content.portrait.box-force-full-width, .component-row.box-effects .component-row__center .component-media-content.simple-display.box-force-full-width, .component-row.box-effects .component-row__center .component-media-content:not(.portrait):not(.simple-display) {
- width: 100% !important; } }
-@media screen and (min-width: 992px) {
- .component-row.box-effects .component-row__center .component-media-content.portrait.box-force-full-width:hover .component-preview-cards__veil, .component-row.box-effects .component-row__center .component-media-content.simple-display.box-force-full-width:hover .component-preview-cards__veil, .component-row.box-effects .component-row__center .component-media-content:not(.portrait):not(.simple-display):hover .component-preview-cards__veil {
- opacity: 0; } }
+@font-face {
+ font-family: "sourcesans-regular";
+ src: url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/regular.eot?") format("eot"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/regular.woff2") format("woff2"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/regular.woff") format("woff"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/regular.ttf") format("truetype"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/regular.svg#sourcesans-regular") format("svg"); }
+@font-face {
+ font-family: "sourcesans-semibold";
+ src: url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/semibold.eot?") format("eot"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/semibold.woff2") format("woff2"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/semibold.woff") format("woff"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/semibold.ttf") format("truetype"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/semibold.svg#sourcesans-semibold") format("svg"); }
+@font-face {
+ font-family: "sourcesans-bold";
+ src: url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/bold.eot?") format("eot"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/bold.woff2") format("woff2"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/bold.woff") format("woff"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/bold.ttf") format("truetype"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/bold.svg#sourcesans-bold") format("svg"); }
+@font-face {
+ font-family: "sourcesans-light";
+ src: url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/light.eot?") format("eot"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/light.woff2") format("woff2"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/light.woff") format("woff"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/light.ttf") format("truetype"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/light.svg#sourcesans-light") format("svg"); }
+@font-face {
+ font-family: "opensans-regular";
+ src: url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/regular.eot?") format("eot"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/regular.woff2") format("woff2"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/regular.woff") format("woff"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/regular.ttf") format("truetype"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/regular.svg#opensans-regular") format("svg"); }
+@font-face {
+ font-family: "opensans-semibold";
+ src: url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/semibold.eot?") format("eot"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/semibold.woff2") format("woff2"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/semibold.woff") format("woff"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/semibold.ttf") format("truetype"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/semibold.svg#opensans-semibold") format("svg"); }
+@font-face {
+ font-family: "opensans-bold";
+ src: url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/bold.eot?") format("eot"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/bold.woff2") format("woff2"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/bold.woff") format("woff"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/bold.ttf") format("truetype"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/bold.svg#opensans-bold") format("svg"); }
+@font-face {
+ font-family: "cern-icons";
+ src: url("//framework.web.cern.ch/framework/3.0/fonts/cern/cern.eot?") format("eot"), url("//framework.web.cern.ch/framework/3.0/fonts/cern/cern.woff2") format("woff2"), url("//framework.web.cern.ch/framework/3.0/fonts/cern/cern.woff") format("woff"), url("//framework.web.cern.ch/framework/3.0/fonts/cern/cern.ttf") format("truetype"), url("//framework.web.cern.ch/framework/3.0/fonts/cern/cern.svg#cern-icons") format("svg"); }
+.component-media-content {
+ display: -webkit-box;
+ display: -moz-box;
+ display: -ms-flexbox;
+ display: -webkit-flex;
+ display: flex;
+ font-size: 14px;
+ font-size: 1.4rem;
+ font-family: 'sourcesans-regular';
+ position: relative;
+ min-height: 210px;
+ float: left;
+ vertical-align: top;
+ max-width: 100%;
+ padding: 30px 40px; }
+ .component-media-content__wrapper {
+ display: -webkit-box;
+ display: -moz-box;
+ display: -ms-flexbox;
+ display: -webkit-flex;
+ display: flex;
+ -webkit-align-items: center;
+ -moz-align-items: center;
+ -ms-align-items: center;
+ align-items: center;
+ -webkit-justify-content: flex-end;
+ -moz-justify-content: flex-end;
+ -ms-justify-content: flex-end;
+ justify-content: flex-end;
+ -ms-flex-pack: flex-end;
+ -webkit-flex-flow: column;
+ -moz-flex-flow: column;
+ -ms-flex-flow: column;
+ flex-flow: column;
+ position: relative;
+ z-index: 10;
+ height: 150px;
+ width: 100%; }
+ .component-media-content__subwrapper {
+ -webkit-align-self: flex-end;
+ -moz-align-self: flex-end;
+ -ms-align-self: flex-end;
+ align-self: flex-end;
+ width: 100%; }
+ .component-media-content__icon {
+ width: 30px;
+ height: 30px;
+ margin: auto;
+ position: absolute;
+ left: 0;
+ bottom: 0;
+ right: 0;
+ z-index: 1;
+ display: block;
+ text-indent: -999999px;
+ width: 30px;
+ height: 30px;
+ top: -15px; }
+ .component-media-content__icon::before {
+ content: "\7a";
+ font-size: 50px;
+ font-size: 5rem;
+ font-family: "cern-icons";
+ -moz-osx-font-smoothing: grayscale;
+ -webkit-font-smoothing: antialiased;
+ width: 30px;
+ height: 30px;
+ display: block;
+ position: absolute;
+ line-height: 30px;
+ text-indent: -9px;
+ font-weight: normal; }
+ .component-media-content__title {
+ display: -webkit-box;
+ display: -moz-box;
+ display: -ms-flexbox;
+ display: -webkit-flex;
+ display: flex;
+ -webkit-flex-wrap: wrap;
+ -moz-flex-wrap: wrap;
+ -ms-flex-wrap: wrap;
+ flex-wrap: wrap;
+ -webkit-flex-flow: column;
+ -moz-flex-flow: column;
+ -ms-flex-flow: column;
+ flex-flow: column;
+ margin: 0; }
+ .component-media-content__title h3 {
+ font-size: 20px;
+ font-size: 2rem;
+ font-family: 'sourcesans-semibold';
+ line-height: 26px;
+ padding: 0;
+ margin: 0;
+ max-width: 100%; }
+ .component-media-content__title h3 a {
+ display: block;
+ position: relative; }
+ .component-media-content__title h3 a span {
+ display: block;
+ width: 100%;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis; }
+ .component-media-content__title h3 a:hover {
+ text-decoration: none; }
+ .component-media-content__title h3 a:before {
+ content: '\j';
+ font-size: 40px;
+ font-size: 4rem;
+ -webkit-transition: all 0.6s ease-in-out 0s;
+ -khtml-transition: all 0.6s ease-in-out 0s;
+ -moz-transition: all 0.6s ease-in-out 0s;
+ -ms-transition: all 0.6s ease-in-out 0s;
+ -o-transition: all 0.6s ease-in-out 0s;
+ transition: all 0.6s ease-in-out 0s;
+ font-family: "cern-icons";
+ -moz-osx-font-smoothing: grayscale;
+ -webkit-font-smoothing: antialiased;
+ display: inline-block;
+ vertical-align: bottom;
+ position: absolute;
+ top: -1px;
+ left: -10px;
+ line-height: 25px;
+ width: 12px;
+ text-indent: -25px; }
+ .component-media-content__title h3 a:hover:before {
+ left: 0; }
+ .component-media-content.image-360 .component-media-content__icon::before, .component-media-content.video-360 .component-media-content__icon::before {
+ content: "\t"; }
+ .component-media-content.anual-report .component-media-content__icon::before {
+ content: "\^"; }
+ .component-media-content.brochure .component-media-content__icon::before {
+ content: "\^"; }
+ .component-media-content.bulletin .component-media-content__icon::before {
+ content: "\~"; }
+ .component-media-content.courier .component-media-content__icon::before {
+ content: "\^"; }
+ .component-media-content.document .component-media-content__icon::before {
+ content: "\~"; }
+ .component-media-content.image .component-media-content__icon::before {
+ content: "\z"; }
+ .component-media-content.presentation .component-media-content__icon::before {
+ content: "\_"; }
+ .component-media-content.publication .component-media-content__icon::before {
+ content: "\^"; }
+ .component-media-content.video .component-media-content__icon::before {
+ content: "\Z"; }
+ .component-media-content.portrait {
+ width: calc(33.3% - 8px);
+ min-height: 428px;
+ margin: 4px; }
+ .component-media-content.portrait .component-media-content__wrapper {
+ height: 368px; }
+ @media screen and (max-width: 991px) {
+ .component-media-content.portrait {
+ width: calc(50% - 8px); } }
+ @media screen and (max-width: 767px) {
+ .component-media-content.portrait {
+ margin: 4px 0;
+ min-height: 210px;
+ width: 100%; }
+ .component-media-content.portrait .component-media-content__wrapper {
+ height: 150px; } }
+ .component-media-content.portrait:hover .component-media-content__veil {
+ opacity: 0; }
+ .component-media-content.simple-display {
+ width: calc(33.3% - 8px);
+ min-height: 210px;
+ margin: 4px; }
+ @media screen and (max-width: 991px) {
+ .component-media-content.simple-display {
+ width: calc(50% - 8px); } }
+ @media screen and (max-width: 767px) {
+ .component-media-content.simple-display {
+ margin: 4px 0;
+ width: 100%; } }
+ .component-media-content.simple-display:hover .component-media-content__veil {
+ opacity: 0; }
+ .component-media-content.portrait.box-force-full-width {
+ width: calc(100% - 8px);
+ min-height: 428px;
+ margin: 4px; }
+ @media screen and (max-width: 991px) {
+ .component-media-content.portrait.box-force-full-width {
+ width: calc(100% - 8px); } }
+ @media screen and (max-width: 767px) {
+ .component-media-content.portrait.box-force-full-width {
+ margin: 4px 0;
+ width: 100%; } }
+ .component-media-content.portrait.box-force-full-width:hover .component-media-content__veil {
+ opacity: 0; }
+ .component-media-content.simple-display.box-force-full-width, .component-media-content:not(.portrait):not(.simple-display) {
+ width: calc(100% - 8px);
+ min-height: 210px;
+ margin: 4px; }
+ @media screen and (max-width: 991px) {
+ .component-media-content.simple-display.box-force-full-width, .component-media-content:not(.portrait):not(.simple-display) {
+ width: calc(100% - 8px); } }
+ @media screen and (max-width: 767px) {
+ .component-media-content.simple-display.box-force-full-width, .component-media-content:not(.portrait):not(.simple-display) {
+ margin: 4px 0;
+ width: 100%; } }
+ .component-media-content.simple-display.box-force-full-width:hover .component-media-content__veil, .component-media-content:not(.portrait):not(.simple-display):hover .component-media-content__veil {
+ opacity: 0; }
+ .component-media-content *,
+ .component-media-content *::after,
+ .component-media-content *::before {
+ box-sizing: border-box; }
+ .component-media-content .gutter-sizer {
+ width: 4%; }
+ .component-media-content__veil {
+ -webkit-transition: all 0.4s ease-in-out 0s;
+ -khtml-transition: all 0.4s ease-in-out 0s;
+ -moz-transition: all 0.4s ease-in-out 0s;
+ -ms-transition: all 0.4s ease-in-out 0s;
+ -o-transition: all 0.4s ease-in-out 0s;
+ transition: all 0.4s ease-in-out 0s;
+ background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.9)));
+ background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.9));
+ background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.9));
+ background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.9));
+ background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.9));
+ background-image: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.9));
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='rgba(0, 0, 0, 0)', endColorStr='rgba(0, 0, 0, 0.9)');
+ position: absolute;
+ height: 101%;
+ width: 101%;
+ top: 0;
+ left: 0;
+ z-index: 0; }
+
+.component-row__sidebar-right .component-media-content.portrait,
+.component-row__sidebar-left .component-media-content.portrait {
+ margin: 4px 4px 4px 0px;
+ width: 100%;
+ min-height: 210px; }
+ .component-row__sidebar-right .component-media-content.portrait .component-media-content__wrapper,
+ .component-row__sidebar-left .component-media-content.portrait .component-media-content__wrapper {
+ height: 150px; }
+ @media screen and (max-width: 991px) {
+ .component-row__sidebar-right .component-media-content.portrait,
+ .component-row__sidebar-left .component-media-content.portrait {
+ margin: 4px;
+ width: calc(100% - 8px); } }
+ @media screen and (max-width: 767px) {
+ .component-row__sidebar-right .component-media-content.portrait,
+ .component-row__sidebar-left .component-media-content.portrait {
+ margin: 4px 0;
+ width: 100%; } }
+.component-row__sidebar-right .component-media-content.simple-display,
+.component-row__sidebar-left .component-media-content.simple-display {
+ margin: 4px 4px 4px 0px;
+ width: 100%;
+ min-height: 210px; }
+ .component-row__sidebar-right .component-media-content.simple-display .component-media-content__wrapper,
+ .component-row__sidebar-left .component-media-content.simple-display .component-media-content__wrapper {
+ height: 150px; }
+ @media screen and (max-width: 991px) {
+ .component-row__sidebar-right .component-media-content.simple-display,
+ .component-row__sidebar-left .component-media-content.simple-display {
+ margin: 4px;
+ width: calc(100% - 8px); } }
+ @media screen and (max-width: 767px) {
+ .component-row__sidebar-right .component-media-content.simple-display,
+ .component-row__sidebar-left .component-media-content.simple-display {
+ margin: 4px 0;
+ width: 100%; } }
+.component-row__sidebar-right .component-media-content:not(.portrait):not(.simple-display),
+.component-row__sidebar-left .component-media-content:not(.portrait):not(.simple-display) {
+ margin: 4px 4px 4px 0px;
+ width: 100%;
+ min-height: 210px; }
+ .component-row__sidebar-right .component-media-content:not(.portrait):not(.simple-display) .component-media-content__wrapper,
+ .component-row__sidebar-left .component-media-content:not(.portrait):not(.simple-display) .component-media-content__wrapper {
+ height: 150px; }
+ @media screen and (max-width: 991px) {
+ .component-row__sidebar-right .component-media-content:not(.portrait):not(.simple-display),
+ .component-row__sidebar-left .component-media-content:not(.portrait):not(.simple-display) {
+ margin: 4px;
+ width: calc(100% - 8px); } }
+ @media screen and (max-width: 767px) {
+ .component-row__sidebar-right .component-media-content:not(.portrait):not(.simple-display),
+ .component-row__sidebar-left .component-media-content:not(.portrait):not(.simple-display) {
+ margin: 4px 0;
+ width: 100%; } }
+
+@media screen and (min-width: 992px) {
+ .component-row.box-effects .component-row__center .component-media-content {
+ -webkit-transition: all 0.4s ease-in-out 0s;
+ -khtml-transition: all 0.4s ease-in-out 0s;
+ -moz-transition: all 0.4s ease-in-out 0s;
+ -ms-transition: all 0.4s ease-in-out 0s;
+ -o-transition: all 0.4s ease-in-out 0s;
+ transition: all 0.4s ease-in-out 0s; }
+ .component-row.box-effects .component-row__center .component-media-content.portrait {
+ width: calc(33.3% - 38px); } }
+ @media screen and (min-width: 992px) and (max-width: 991px) {
+ .component-row.box-effects .component-row__center .component-media-content.portrait {
+ width: calc(50% - 38px); } }
+ @media screen and (min-width: 992px) and (max-width: 767px) {
+ .component-row.box-effects .component-row__center .component-media-content.portrait {
+ width: 100% !important; } }
+@media screen and (min-width: 992px) {
+ .component-row.box-effects .component-row__center .component-media-content.portrait.from-smaller {
+ -webkit-transition: all 0.4s ease-in-out 0s;
+ -khtml-transition: all 0.4s ease-in-out 0s;
+ -moz-transition: all 0.4s ease-in-out 0s;
+ -ms-transition: all 0.4s ease-in-out 0s;
+ -o-transition: all 0.4s ease-in-out 0s;
+ transition: all 0.4s ease-in-out 0s; }
+ .component-row.box-effects .component-row__center .component-media-content.portrait.from-bigger, .component-row.box-effects .component-row__center .component-media-content.portrait.from-bigger.from-smaller {
+ -webkit-transition: all 0.4s ease-in-out 0s;
+ -khtml-transition: all 0.4s ease-in-out 0s;
+ -moz-transition: all 0.4s ease-in-out 0s;
+ -ms-transition: all 0.4s ease-in-out 0s;
+ -o-transition: all 0.4s ease-in-out 0s;
+ transition: all 0.4s ease-in-out 0s; }
+ .component-row.box-effects .component-row__center .component-media-content.portrait.make-bigger {
+ -webkit-transition: all 0.4s ease-in-out 0s;
+ -khtml-transition: all 0.4s ease-in-out 0s;
+ -moz-transition: all 0.4s ease-in-out 0s;
+ -ms-transition: all 0.4s ease-in-out 0s;
+ -o-transition: all 0.4s ease-in-out 0s;
+ transition: all 0.4s ease-in-out 0s;
+ width: calc(43.3% - 38px) !important; }
+ .component-row.box-effects .component-row__center .component-media-content.portrait.make-smaller {
+ -webkit-transition: all 0.4s ease-in-out 0s;
+ -khtml-transition: all 0.4s ease-in-out 0s;
+ -moz-transition: all 0.4s ease-in-out 0s;
+ -ms-transition: all 0.4s ease-in-out 0s;
+ -o-transition: all 0.4s ease-in-out 0s;
+ transition: all 0.4s ease-in-out 0s;
+ width: calc(23.3% - 38px) !important; }
+ .component-row.box-effects .component-row__center .component-media-content.portrait:hover .component-preview-cards__veil {
+ opacity: 0; }
+ .component-row.box-effects .component-row__center .component-media-content.simple-display {
+ width: calc(33.3% - 38px); } }
+ @media screen and (min-width: 992px) and (max-width: 991px) {
+ .component-row.box-effects .component-row__center .component-media-content.simple-display {
+ width: calc(50% - 38px); } }
+ @media screen and (min-width: 992px) and (max-width: 767px) {
+ .component-row.box-effects .component-row__center .component-media-content.simple-display {
+ width: 100% !important; } }
+@media screen and (min-width: 992px) {
+ .component-row.box-effects .component-row__center .component-media-content.simple-display.from-smaller {
+ -webkit-transition: all 0.4s ease-in-out 0s;
+ -khtml-transition: all 0.4s ease-in-out 0s;
+ -moz-transition: all 0.4s ease-in-out 0s;
+ -ms-transition: all 0.4s ease-in-out 0s;
+ -o-transition: all 0.4s ease-in-out 0s;
+ transition: all 0.4s ease-in-out 0s; }
+ .component-row.box-effects .component-row__center .component-media-content.simple-display.from-bigger, .component-row.box-effects .component-row__center .component-media-content.simple-display.from-bigger.from-smaller {
+ -webkit-transition: all 0.4s ease-in-out 0s;
+ -khtml-transition: all 0.4s ease-in-out 0s;
+ -moz-transition: all 0.4s ease-in-out 0s;
+ -ms-transition: all 0.4s ease-in-out 0s;
+ -o-transition: all 0.4s ease-in-out 0s;
+ transition: all 0.4s ease-in-out 0s; }
+ .component-row.box-effects .component-row__center .component-media-content.simple-display.make-bigger {
+ -webkit-transition: all 0.4s ease-in-out 0s;
+ -khtml-transition: all 0.4s ease-in-out 0s;
+ -moz-transition: all 0.4s ease-in-out 0s;
+ -ms-transition: all 0.4s ease-in-out 0s;
+ -o-transition: all 0.4s ease-in-out 0s;
+ transition: all 0.4s ease-in-out 0s;
+ width: calc(43.3% - 38px) !important; }
+ .component-row.box-effects .component-row__center .component-media-content.simple-display.make-smaller {
+ -webkit-transition: all 0.4s ease-in-out 0s;
+ -khtml-transition: all 0.4s ease-in-out 0s;
+ -moz-transition: all 0.4s ease-in-out 0s;
+ -ms-transition: all 0.4s ease-in-out 0s;
+ -o-transition: all 0.4s ease-in-out 0s;
+ transition: all 0.4s ease-in-out 0s;
+ width: calc(23.3% - 38px) !important; }
+ .component-row.box-effects .component-row__center .component-media-content.simple-display:hover .component-preview-cards__veil {
+ opacity: 0; }
+ .component-row.box-effects .component-row__center .component-media-content.portrait.box-force-full-width, .component-row.box-effects .component-row__center .component-media-content.simple-display.box-force-full-width, .component-row.box-effects .component-row__center .component-media-content:not(.portrait):not(.simple-display) {
+ width: calc(100% - 98px); } }
+ @media screen and (min-width: 992px) and (max-width: 991px) {
+ .component-row.box-effects .component-row__center .component-media-content.portrait.box-force-full-width, .component-row.box-effects .component-row__center .component-media-content.simple-display.box-force-full-width, .component-row.box-effects .component-row__center .component-media-content:not(.portrait):not(.simple-display) {
+ width: calc(100% - 98px); } }
+ @media screen and (min-width: 992px) and (max-width: 767px) {
+ .component-row.box-effects .component-row__center .component-media-content.portrait.box-force-full-width, .component-row.box-effects .component-row__center .component-media-content.simple-display.box-force-full-width, .component-row.box-effects .component-row__center .component-media-content:not(.portrait):not(.simple-display) {
+ width: 100% !important; } }
+@media screen and (min-width: 992px) {
+ .component-row.box-effects .component-row__center .component-media-content.portrait.box-force-full-width:hover .component-preview-cards__veil, .component-row.box-effects .component-row__center .component-media-content.simple-display.box-force-full-width:hover .component-preview-cards__veil, .component-row.box-effects .component-row__center .component-media-content:not(.portrait):not(.simple-display):hover .component-preview-cards__veil {
+ opacity: 0; } }
diff --git a/cern_components/patterns/molecules/media/css/media.component.css.map b/patterns/molecules/media/css/media.component.css.map
similarity index 100%
rename from cern_components/patterns/molecules/media/css/media.component.css.map
rename to patterns/molecules/media/css/media.component.css.map
diff --git a/cern_components/patterns/molecules/media/media.html.twig b/patterns/molecules/media/media.html.twig
similarity index 100%
rename from cern_components/patterns/molecules/media/media.html.twig
rename to patterns/molecules/media/media.html.twig
diff --git a/cern_components/patterns/molecules/media/media.ui_patterns.yml b/patterns/molecules/media/media.ui_patterns.yml
similarity index 100%
rename from cern_components/patterns/molecules/media/media.ui_patterns.yml
rename to patterns/molecules/media/media.ui_patterns.yml
diff --git a/cern_components/patterns/molecules/media/sass/media.component.scss b/patterns/molecules/media/sass/media.component.scss
similarity index 100%
rename from cern_components/patterns/molecules/media/sass/media.component.scss
rename to patterns/molecules/media/sass/media.component.scss
diff --git a/cern_components/patterns/molecules/media/sass/mixins.scss b/patterns/molecules/media/sass/mixins.scss
similarity index 100%
rename from cern_components/patterns/molecules/media/sass/mixins.scss
rename to patterns/molecules/media/sass/mixins.scss
diff --git a/cern_components/patterns/molecules/media/sass/variables.scss b/patterns/molecules/media/sass/variables.scss
similarity index 100%
rename from cern_components/patterns/molecules/media/sass/variables.scss
rename to patterns/molecules/media/sass/variables.scss
diff --git a/cern_components/patterns/molecules/menu/css/menu.component.css b/patterns/molecules/menu/css/menu.component.css
similarity index 100%
rename from cern_components/patterns/molecules/menu/css/menu.component.css
rename to patterns/molecules/menu/css/menu.component.css
diff --git a/cern_components/patterns/molecules/menu/js/menu.component.js b/patterns/molecules/menu/js/menu.component.js
similarity index 100%
rename from cern_components/patterns/molecules/menu/js/menu.component.js
rename to patterns/molecules/menu/js/menu.component.js
diff --git a/cern_components/patterns/molecules/menu/menu.html.twig b/patterns/molecules/menu/menu.html.twig
similarity index 100%
rename from cern_components/patterns/molecules/menu/menu.html.twig
rename to patterns/molecules/menu/menu.html.twig
diff --git a/cern_components/patterns/molecules/menu/menu.ui_patterns.yml b/patterns/molecules/menu/menu.ui_patterns.yml
similarity index 100%
rename from cern_components/patterns/molecules/menu/menu.ui_patterns.yml
rename to patterns/molecules/menu/menu.ui_patterns.yml
diff --git a/cern_components/patterns/molecules/menu/sass/menu.component.scss b/patterns/molecules/menu/sass/menu.component.scss
similarity index 100%
rename from cern_components/patterns/molecules/menu/sass/menu.component.scss
rename to patterns/molecules/menu/sass/menu.component.scss
diff --git a/cern_components/patterns/molecules/news-display/css/news-display.component.css b/patterns/molecules/news-display/css/news-display.component.css
similarity index 100%
rename from cern_components/patterns/molecules/news-display/css/news-display.component.css
rename to patterns/molecules/news-display/css/news-display.component.css
diff --git a/cern_components/patterns/molecules/news-display/images/pagebg.png b/patterns/molecules/news-display/images/pagebg.png
similarity index 100%
rename from cern_components/patterns/molecules/news-display/images/pagebg.png
rename to patterns/molecules/news-display/images/pagebg.png
diff --git a/cern_components/patterns/molecules/news-display/js/news-display.component.js b/patterns/molecules/news-display/js/news-display.component.js
similarity index 100%
rename from cern_components/patterns/molecules/news-display/js/news-display.component.js
rename to patterns/molecules/news-display/js/news-display.component.js
diff --git a/cern_components/patterns/molecules/news-display/news-display.html.twig b/patterns/molecules/news-display/news-display.html.twig
similarity index 100%
rename from cern_components/patterns/molecules/news-display/news-display.html.twig
rename to patterns/molecules/news-display/news-display.html.twig
diff --git a/cern_components/patterns/molecules/news-display/news-display.ui_patterns.yml b/patterns/molecules/news-display/news-display.ui_patterns.yml
similarity index 100%
rename from cern_components/patterns/molecules/news-display/news-display.ui_patterns.yml
rename to patterns/molecules/news-display/news-display.ui_patterns.yml
diff --git a/cern_components/patterns/molecules/news-display/scss/news-display.component.scss b/patterns/molecules/news-display/scss/news-display.component.scss
similarity index 100%
rename from cern_components/patterns/molecules/news-display/scss/news-display.component.scss
rename to patterns/molecules/news-display/scss/news-display.component.scss
diff --git a/cern_components/patterns/molecules/page-navigation/css/page-navigation.component.1.css b/patterns/molecules/page-navigation/css/page-navigation.component.1.css
similarity index 100%
rename from cern_components/patterns/molecules/page-navigation/css/page-navigation.component.1.css
rename to patterns/molecules/page-navigation/css/page-navigation.component.1.css
diff --git a/cern_components/patterns/molecules/page-navigation/css/page-navigation.component.css b/patterns/molecules/page-navigation/css/page-navigation.component.css
similarity index 100%
rename from cern_components/patterns/molecules/page-navigation/css/page-navigation.component.css
rename to patterns/molecules/page-navigation/css/page-navigation.component.css
diff --git a/cern_components/patterns/molecules/page-navigation/js/page-navigation.component.js b/patterns/molecules/page-navigation/js/page-navigation.component.js
similarity index 100%
rename from cern_components/patterns/molecules/page-navigation/js/page-navigation.component.js
rename to patterns/molecules/page-navigation/js/page-navigation.component.js
diff --git a/cern_components/patterns/molecules/page-navigation/js/page-navigation.component.js.works b/patterns/molecules/page-navigation/js/page-navigation.component.js.works
similarity index 100%
rename from cern_components/patterns/molecules/page-navigation/js/page-navigation.component.js.works
rename to patterns/molecules/page-navigation/js/page-navigation.component.js.works
diff --git a/cern_components/patterns/molecules/page-navigation/page-navigation.html.twig b/patterns/molecules/page-navigation/page-navigation.html.twig
similarity index 100%
rename from cern_components/patterns/molecules/page-navigation/page-navigation.html.twig
rename to patterns/molecules/page-navigation/page-navigation.html.twig
diff --git a/cern_components/patterns/molecules/page-navigation/page-navigation.ui_patterns.yml b/patterns/molecules/page-navigation/page-navigation.ui_patterns.yml
similarity index 100%
rename from cern_components/patterns/molecules/page-navigation/page-navigation.ui_patterns.yml
rename to patterns/molecules/page-navigation/page-navigation.ui_patterns.yml
diff --git a/cern_components/patterns/molecules/page-navigation/scss/page-navigation.component.scss b/patterns/molecules/page-navigation/scss/page-navigation.component.scss
similarity index 100%
rename from cern_components/patterns/molecules/page-navigation/scss/page-navigation.component.scss
rename to patterns/molecules/page-navigation/scss/page-navigation.component.scss
diff --git a/cern_components/patterns/molecules/peoples-profile/css/profile.component.css b/patterns/molecules/peoples-profile/css/profile.component.css
similarity index 100%
rename from cern_components/patterns/molecules/peoples-profile/css/profile.component.css
rename to patterns/molecules/peoples-profile/css/profile.component.css
diff --git a/cern_components/patterns/molecules/peoples-profile/peoples-profile.html.twig b/patterns/molecules/peoples-profile/peoples-profile.html.twig
similarity index 100%
rename from cern_components/patterns/molecules/peoples-profile/peoples-profile.html.twig
rename to patterns/molecules/peoples-profile/peoples-profile.html.twig
diff --git a/cern_components/patterns/molecules/peoples-profile/peoples-profile.ui_patterns.yml b/patterns/molecules/peoples-profile/peoples-profile.ui_patterns.yml
similarity index 100%
rename from cern_components/patterns/molecules/peoples-profile/peoples-profile.ui_patterns.yml
rename to patterns/molecules/peoples-profile/peoples-profile.ui_patterns.yml
diff --git a/cern_components/patterns/molecules/related-content/sass/mixins.scss b/patterns/molecules/peoples-profile/scss/mixins.scss
similarity index 100%
rename from cern_components/patterns/molecules/related-content/sass/mixins.scss
rename to patterns/molecules/peoples-profile/scss/mixins.scss
diff --git a/cern_components/patterns/molecules/peoples-profile/scss/profile.component.scss b/patterns/molecules/peoples-profile/scss/profile.component.scss
similarity index 98%
rename from cern_components/patterns/molecules/peoples-profile/scss/profile.component.scss
rename to patterns/molecules/peoples-profile/scss/profile.component.scss
index 0b4ecb64..35fd4dc1 100755
--- a/cern_components/patterns/molecules/peoples-profile/scss/profile.component.scss
+++ b/patterns/molecules/peoples-profile/scss/profile.component.scss
@@ -1,82 +1,82 @@
-// variables & mixings
-@import 'variables';
-// fonts
-@font-face {
- font-family: "sourcesans-regular";
- src: url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/regular.eot?") format("eot"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/regular.woff2") format("woff2"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/regular.woff") format("woff"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/regular.ttf") format("truetype"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/regular.svg#sourcesans-regular") format("svg");
-}
-
-@font-face {
- font-family: "sourcesans-semibold";
- src: url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/semibold.eot?") format("eot"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/semibold.woff2") format("woff2"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/semibold.woff") format("woff"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/semibold.ttf") format("truetype"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/semibold.svg#sourcesans-semibold") format("svg");
-}
-
-@font-face {
- font-family: "sourcesans-bold";
- src: url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/bold.eot?") format("eot"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/bold.woff2") format("woff2"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/bold.woff") format("woff"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/bold.ttf") format("truetype"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/bold.svg#sourcesans-bold") format("svg");
-}
-
-@font-face {
- font-family: "sourcesans-light";
- src: url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/light.eot?") format("eot"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/light.woff2") format("woff2"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/light.woff") format("woff"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/light.ttf") format("truetype"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/light.svg#sourcesans-light") format("svg");
-}
-
-@font-face {
- font-family: "opensans-regular";
- src: url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/regular.eot?") format("eot"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/regular.woff2") format("woff2"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/regular.woff") format("woff"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/regular.ttf") format("truetype"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/regular.svg#opensans-regular") format("svg");
-}
-
-@font-face {
- font-family: "opensans-semibold";
- src: url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/semibold.eot?") format("eot"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/semibold.woff2") format("woff2"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/semibold.woff") format("woff"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/semibold.ttf") format("truetype"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/semibold.svg#opensans-semibold") format("svg");
-}
-
-@font-face {
- font-family: "opensans-bold";
- src: url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/bold.eot?") format("eot"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/bold.woff2") format("woff2"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/bold.woff") format("woff"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/bold.ttf") format("truetype"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/bold.svg#opensans-bold") format("svg");
-}
-
-@font-face {
- font-family: "cern-icons";
- src: url("//framework.web.cern.ch/framework/3.0/fonts/cern/cern.eot?") format("eot"), url("//framework.web.cern.ch/framework/3.0/fonts/cern/cern.woff2") format("woff2"), url("//framework.web.cern.ch/framework/3.0/fonts/cern/cern.woff") format("woff"), url("//framework.web.cern.ch/framework/3.0/fonts/cern/cern.ttf") format("truetype"), url("//framework.web.cern.ch/framework/3.0/fonts/cern/cern.svg#cern-icons") format("svg");
-}
-
-//
-//* ****************************************** component profile */
-#component-profile {
- display: block;
- width: 250px;
- .profile-image {
- img {
- width: 250px;
- background-size: cover;
- height: auto;
- margin: 0 0 15px;
- }
- }
- .profile-author {
- /* font-family: 'sourcesans-regular'; */
- font-family: 'sourcesans-semibold';
- font-size: 20px;
- h2 {
- font-size: 20px;
- display: inline-block;
- text-decoration: underline;
- font-weight: 700;
- }
- a {
- text-decoration: underline;
- }
- }
- span {
- display: block;
- /* font-family: 'sourcesans-regular'; */
- font-size: 14px;
- }
-}
-
-@media screen and (max-width: 767px) {
- #component-profile {
- margin: auto;
- }
-}
+// variables & mixings
+@import 'variables';
+// fonts
+@font-face {
+ font-family: "sourcesans-regular";
+ src: url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/regular.eot?") format("eot"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/regular.woff2") format("woff2"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/regular.woff") format("woff"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/regular.ttf") format("truetype"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/regular.svg#sourcesans-regular") format("svg");
+}
+
+@font-face {
+ font-family: "sourcesans-semibold";
+ src: url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/semibold.eot?") format("eot"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/semibold.woff2") format("woff2"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/semibold.woff") format("woff"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/semibold.ttf") format("truetype"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/semibold.svg#sourcesans-semibold") format("svg");
+}
+
+@font-face {
+ font-family: "sourcesans-bold";
+ src: url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/bold.eot?") format("eot"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/bold.woff2") format("woff2"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/bold.woff") format("woff"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/bold.ttf") format("truetype"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/bold.svg#sourcesans-bold") format("svg");
+}
+
+@font-face {
+ font-family: "sourcesans-light";
+ src: url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/light.eot?") format("eot"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/light.woff2") format("woff2"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/light.woff") format("woff"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/light.ttf") format("truetype"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/light.svg#sourcesans-light") format("svg");
+}
+
+@font-face {
+ font-family: "opensans-regular";
+ src: url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/regular.eot?") format("eot"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/regular.woff2") format("woff2"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/regular.woff") format("woff"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/regular.ttf") format("truetype"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/regular.svg#opensans-regular") format("svg");
+}
+
+@font-face {
+ font-family: "opensans-semibold";
+ src: url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/semibold.eot?") format("eot"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/semibold.woff2") format("woff2"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/semibold.woff") format("woff"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/semibold.ttf") format("truetype"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/semibold.svg#opensans-semibold") format("svg");
+}
+
+@font-face {
+ font-family: "opensans-bold";
+ src: url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/bold.eot?") format("eot"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/bold.woff2") format("woff2"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/bold.woff") format("woff"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/bold.ttf") format("truetype"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/bold.svg#opensans-bold") format("svg");
+}
+
+@font-face {
+ font-family: "cern-icons";
+ src: url("//framework.web.cern.ch/framework/3.0/fonts/cern/cern.eot?") format("eot"), url("//framework.web.cern.ch/framework/3.0/fonts/cern/cern.woff2") format("woff2"), url("//framework.web.cern.ch/framework/3.0/fonts/cern/cern.woff") format("woff"), url("//framework.web.cern.ch/framework/3.0/fonts/cern/cern.ttf") format("truetype"), url("//framework.web.cern.ch/framework/3.0/fonts/cern/cern.svg#cern-icons") format("svg");
+}
+
+//
+//* ****************************************** component profile */
+#component-profile {
+ display: block;
+ width: 250px;
+ .profile-image {
+ img {
+ width: 250px;
+ background-size: cover;
+ height: auto;
+ margin: 0 0 15px;
+ }
+ }
+ .profile-author {
+ /* font-family: 'sourcesans-regular'; */
+ font-family: 'sourcesans-semibold';
+ font-size: 20px;
+ h2 {
+ font-size: 20px;
+ display: inline-block;
+ text-decoration: underline;
+ font-weight: 700;
+ }
+ a {
+ text-decoration: underline;
+ }
+ }
+ span {
+ display: block;
+ /* font-family: 'sourcesans-regular'; */
+ font-size: 14px;
+ }
+}
+
+@media screen and (max-width: 767px) {
+ #component-profile {
+ margin: auto;
+ }
+}
diff --git a/cern_components/patterns/molecules/peoples-profile/scss/variables.scss b/patterns/molecules/peoples-profile/scss/variables.scss
similarity index 94%
rename from cern_components/patterns/molecules/peoples-profile/scss/variables.scss
rename to patterns/molecules/peoples-profile/scss/variables.scss
index 8582737b..245e280b 100755
--- a/cern_components/patterns/molecules/peoples-profile/scss/variables.scss
+++ b/patterns/molecules/peoples-profile/scss/variables.scss
@@ -1,60 +1,60 @@
-// mixins library
-@import 'mixins.scss';
-//
-// Variables
-// --------------------------------------------------
-// Grays
-// -------------------------
-$grey-dark: #292929;
-$grey-medium: #4a4a4a;
-$grey-light: #bebebe;
-$grey-mlight:#efe8e8;
-//
-// corporate colors
-// -------------------------
-$blue: #0855a0;
-$orange: #f2a530;
-//
-// Section colors
-// -------------------------
-$error: #ff0000;
-$error-light: #faeaea;
-//
-// generic variables
-// -------------------------
-$white: #ffffff;
-$black: #000000;
-$black-medium:#1a1a1a;
-$body-bg: $white;
-$text-color: $black;
-$link-color: $blue;
-//
-//
-// Styles
-// -------------------------
-%link {
- color: $link-color;
- text-decoration: none;
-}
-
-%box-title {
- font-size: 40px;
- color: $black;
- font-family: 'Open Sans', sans-serif;
- font-weight: 700;
- margin: 0px 0 20px;
- line-height: 50px;
-
- @media only screen and (max-width: 480px) {
- font-size: 25px;
- }
-}
-
-
-%highlight-calendar{
- font-size: 48px;
- font-family: 'Source Sans Pro', sans-serif;
- font-weight: 700;
- text-transform: uppercase;
-}
-
+// mixins library
+@import 'mixins.scss';
+//
+// Variables
+// --------------------------------------------------
+// Grays
+// -------------------------
+$grey-dark: #292929;
+$grey-medium: #4a4a4a;
+$grey-light: #bebebe;
+$grey-mlight:#efe8e8;
+//
+// corporate colors
+// -------------------------
+$blue: #0855a0;
+$orange: #f2a530;
+//
+// Section colors
+// -------------------------
+$error: #ff0000;
+$error-light: #faeaea;
+//
+// generic variables
+// -------------------------
+$white: #ffffff;
+$black: #000000;
+$black-medium:#1a1a1a;
+$body-bg: $white;
+$text-color: $black;
+$link-color: $blue;
+//
+//
+// Styles
+// -------------------------
+%link {
+ color: $link-color;
+ text-decoration: none;
+}
+
+%box-title {
+ font-size: 40px;
+ color: $black;
+ font-family: 'Open Sans', sans-serif;
+ font-weight: 700;
+ margin: 0px 0 20px;
+ line-height: 50px;
+
+ @media only screen and (max-width: 480px) {
+ font-size: 25px;
+ }
+}
+
+
+%highlight-calendar{
+ font-size: 48px;
+ font-family: 'Source Sans Pro', sans-serif;
+ font-weight: 700;
+ text-transform: uppercase;
+}
+
diff --git a/cern_components/patterns/molecules/preview-card/css/component-preview-card.css b/patterns/molecules/preview-card/css/component-preview-card.css
similarity index 100%
rename from cern_components/patterns/molecules/preview-card/css/component-preview-card.css
rename to patterns/molecules/preview-card/css/component-preview-card.css
diff --git a/cern_components/patterns/molecules/preview-card/css/component.preview.card.css b/patterns/molecules/preview-card/css/component.preview.card.css
similarity index 100%
rename from cern_components/patterns/molecules/preview-card/css/component.preview.card.css
rename to patterns/molecules/preview-card/css/component.preview.card.css
diff --git a/cern_components/patterns/molecules/preview-card/images/arrow-orange-little.png b/patterns/molecules/preview-card/images/arrow-orange-little.png
similarity index 100%
rename from cern_components/patterns/molecules/preview-card/images/arrow-orange-little.png
rename to patterns/molecules/preview-card/images/arrow-orange-little.png
diff --git a/cern_components/patterns/molecules/preview-card/images/cern.png b/patterns/molecules/preview-card/images/cern.png
similarity index 100%
rename from cern_components/patterns/molecules/preview-card/images/cern.png
rename to patterns/molecules/preview-card/images/cern.png
diff --git a/cern_components/patterns/molecules/preview-card/images/previous-card.png b/patterns/molecules/preview-card/images/previous-card.png
similarity index 100%
rename from cern_components/patterns/molecules/preview-card/images/previous-card.png
rename to patterns/molecules/preview-card/images/previous-card.png
diff --git a/cern_components/patterns/molecules/preview-card/js/component-preview-card.js b/patterns/molecules/preview-card/js/component-preview-card.js
similarity index 100%
rename from cern_components/patterns/molecules/preview-card/js/component-preview-card.js
rename to patterns/molecules/preview-card/js/component-preview-card.js
diff --git a/cern_components/patterns/molecules/preview-card/preview-card.html.twig b/patterns/molecules/preview-card/preview-card.html.twig
similarity index 100%
rename from cern_components/patterns/molecules/preview-card/preview-card.html.twig
rename to patterns/molecules/preview-card/preview-card.html.twig
diff --git a/cern_components/patterns/molecules/preview-card/preview-card.ui_patterns.yml b/patterns/molecules/preview-card/preview-card.ui_patterns.yml
similarity index 100%
rename from cern_components/patterns/molecules/preview-card/preview-card.ui_patterns.yml
rename to patterns/molecules/preview-card/preview-card.ui_patterns.yml
diff --git a/cern_components/patterns/molecules/preview-card/sass/component-preview-card.scss b/patterns/molecules/preview-card/sass/component-preview-card.scss
similarity index 96%
rename from cern_components/patterns/molecules/preview-card/sass/component-preview-card.scss
rename to patterns/molecules/preview-card/sass/component-preview-card.scss
index 76ab7998..896cf471 100755
--- a/cern_components/patterns/molecules/preview-card/sass/component-preview-card.scss
+++ b/patterns/molecules/preview-card/sass/component-preview-card.scss
@@ -1,477 +1,477 @@
-// variables & mixings
-@import 'variables';
-// fonts
-@font-face {
- font-family: "sourcesans-regular";
- src: url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/regular.eot?") format("eot"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/regular.woff2") format("woff2"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/regular.woff") format("woff"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/regular.ttf") format("truetype"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/regular.svg#sourcesans-regular") format("svg");
-}
-
-@font-face {
- font-family: "sourcesans-semibold";
- src: url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/semibold.eot?") format("eot"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/semibold.woff2") format("woff2"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/semibold.woff") format("woff"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/semibold.ttf") format("truetype"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/semibold.svg#sourcesans-semibold") format("svg");
-}
-
-@font-face {
- font-family: "sourcesans-bold";
- src: url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/bold.eot?") format("eot"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/bold.woff2") format("woff2"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/bold.woff") format("woff"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/bold.ttf") format("truetype"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/bold.svg#sourcesans-bold") format("svg");
-}
-
-@font-face {
- font-family: "sourcesans-light";
- src: url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/light.eot?") format("eot"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/light.woff2") format("woff2"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/light.woff") format("woff"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/light.ttf") format("truetype"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/light.svg#sourcesans-light") format("svg");
-}
-
-@font-face {
- font-family: "opensans-regular";
- src: url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/regular.eot?") format("eot"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/regular.woff2") format("woff2"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/regular.woff") format("woff"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/regular.ttf") format("truetype"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/regular.svg#opensans-regular") format("svg");
-}
-
-@font-face {
- font-family: "opensans-semibold";
- src: url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/semibold.eot?") format("eot"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/semibold.woff2") format("woff2"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/semibold.woff") format("woff"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/semibold.ttf") format("truetype"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/semibold.svg#opensans-semibold") format("svg");
-}
-
-@font-face {
- font-family: "opensans-bold";
- src: url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/bold.eot?") format("eot"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/bold.woff2") format("woff2"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/bold.woff") format("woff"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/bold.ttf") format("truetype"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/bold.svg#opensans-bold") format("svg");
-}
-
-@font-face {
- font-family: "cern-icons";
- src: url("//framework.web.cern.ch/framework/3.0/fonts/cern/cern.eot?") format("eot"), url("//framework.web.cern.ch/framework/3.0/fonts/cern/cern.woff2") format("woff2"), url("//framework.web.cern.ch/framework/3.0/fonts/cern/cern.woff") format("woff"), url("//framework.web.cern.ch/framework/3.0/fonts/cern/cern.ttf") format("truetype"), url("//framework.web.cern.ch/framework/3.0/fonts/cern/cern.svg#cern-icons") format("svg");
-}
-
-//
-.component-preview-cards .preview-card__author a:not(:last-child):not(:nth-last-child(2)) {
- &:after {
- content: ', ';
- }
-}
-
-.component-preview-cards .preview-card__author a:nth-last-child(2) {
- &:after {
- content: ' & ';
- }
-}
-
-// preview card // article box
-.component-preview-cards {
- @include flexbox;
- @include font-size(1.4);
- font-family: 'sourcesans-regular';
- position: relative;
- min-height: 210px;
- float: left;
- vertical-align: top;
- max-width: 100%;
- padding: 30px 40px;
- /* background-image: url(../images/cern.png);
- background-repeat: no-repeat;
- background-position: center;
- background-size: auto 70%; */
- &__box_wrapper {
- @include flexbox;
- @include align-items(center);
- @include justify-content(flex-end);
- @include flex-flow(column);
- position: relative;
- z-index: 10;
- height: 150px;
- width: 100%;
- .preview-card__avatar {
- width: 65px !important;
- height: 65px !important;
- min-height: 0;
- background: #999999;
- border-radius: 100%;
- padding: 0;
- margin-bottom: 10px;
- }
- }
- &__box {
- @include align-self(flex-end);
- width: 100%;
- }
- .component-preview-cards__category-icon-vocabulary {
- margin: 0 auto;
- text-align: center;
- &:before {
- content: attr(data-icon);
- color: white;
- font-family: "cern-icons";
- -moz-osx-font-smoothing: grayscale;
- -webkit-font-smoothing: antialiased;
- display: block;
- font-size: 60px;
- position: relative;
- top: -10px;
- }
- }
-
- .component-preview-cards__category-icon-vocabulary + .preview-card{
- &__title {
- h3{
- a{
- span{
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
- }
- }
- }
- }
- }
-
-
- .preview-card {
- width: 100%;
- &__title {
- margin: 0;
- h3 {
- @include font-size(2.0);
- font-family: 'sourcesans-semibold';
- line-height: 26px !important;
- padding: 0;
- margin: 0;
- display: block;
- width: 100%;
- a {
- display: block !important;
- position: relative;
- line-height: 26px !important;
- span {
- display: block;
- width: 100%;
- //white-space: normal;
- //overflow: hidden;
- //text-overflow: ellipsis;
- }
- }
- a:hover {
- text-decoration: none;
- }
- a:before {
- content: '\j';
- @include font-size(4.0);
- @include transition(all 0.6s ease-in-out 0s);
- font-family: "cern-icons";
- -moz-osx-font-smoothing: grayscale;
- -webkit-font-smoothing: antialiased;
- display: inline-block;
- vertical-align: bottom;
- position: absolute;
- top: -2px;
- left: -10px;
- line-height: 25px;
- width: 12px;
- text-indent: -25px;
- }
- a:hover:before {
- left: 0;
- }
- }
- }
- &__subtext {
- font-family: 'sourcesans-light';
- min-height: 18px;
- height: 18px;
- }
- &__category,
- &__date,
- &__author {
- font-family: 'sourcesans-light';
- @include font-size(1.4);
- display: inline-block;
- &:not(:last-child) {
- margin-right: 10px;
- &:after {
- content: '|';
- display: inline-block;
- position: relative;
- right: -6px;
- top: -1px;
- }
- }
- a {
- color: white;
- text-decoration: none;
- &:hover {
- color: white;
- text-decoration: none;
- }
- }
- }
- } //
- // display
- &.portrait {
- width: calc(33.3% - 8px);
- min-height: 428px;
- margin: 4px;
- .component-preview-cards__box_wrapper {
- height: 368px;
- }
- @media screen and (max-width: 991px) {
- width: calc(50% - 8px);
- }
- @media screen and (max-width: 767px) {
- margin: 4px 0;
- min-height: 210px;
- width: 100%;
- .component-preview-cards__box_wrapper {
- height: 150px;
- }
- }
- &:hover {
- .component-preview-cards__veil {
- opacity: 0;
- ;
- }
- }
- }
- &.simple-display {
- width: calc(33.3% - 8px);
- min-height: 210px;
- margin: 4px;
- @media screen and (max-width: 991px) {
- width: calc(50% - 8px);
- }
- @media screen and (max-width: 767px) {
- margin: 4px 0;
- width: 100%;
- }
- &:hover {
- .component-preview-cards__veil {
- opacity: 0;
- ;
- }
- }
- }
- &.portrait.box-force-full-width {
- width: calc(100% - 8px);
- min-height: 428px;
- margin: 4px;
- @media screen and (max-width: 991px) {
- width: calc(100% - 8px);
- }
- @media screen and (max-width: 767px) {
- margin: 4px 0;
- width: 100%;
- }
- &:hover {
- .component-preview-cards__veil {
- opacity: 0;
- ;
- }
- }
- }
- &.simple-display.box-force-full-width,
- &:not(.portrait):not(.simple-display) {
- width: calc(100% - 8px);
- min-height: 210px;
- margin: 4px;
- @media screen and (max-width: 991px) {
- width: calc(100% - 8px);
- }
- @media screen and (max-width: 767px) {
- margin: 4px 0;
- width: 100%;
- }
- &:hover {
- .component-preview-cards__veil {
- opacity: 0;
- ;
- }
- }
- } //
- // others
- .material-icons {
- display: none;
- }
- &__icon.video {
- font-family: 'Material Icons';
- width: 30px;
- height: 30px;
- margin: auto;
- position: absolute;
- top: 0;
- left: 0;
- bottom: 0;
- right: 0;
- z-index: 1;
- .type_video {
- @include font-size(5.0);
- display: block;
- }
- }
- &__icon.image {
- font-family: 'Material Icons';
- width: 30px;
- height: 30px;
- margin: auto;
- position: absolute;
- top: 0;
- left: 0;
- bottom: 0;
- right: 0;
- z-index: 1;
- .type_image {
- @include font-size(5.0);
- display: block;
- }
- } //
- // veil
- &__veil {
- @include transition(all 0.4s ease-in-out 0s);
- @include background-gradient($startColor: rgba(0, 0, 0, 0), $endColor: rgba(0, 0, 0, 0.9));
- position: absolute;
- height: 101%;
- width: 101%;
- top: 0;
- left: 0;
- z-index: 0;
- } //
- // others
- *,
- *::after,
- *::before {
- box-sizing: border-box;
- }
-}
-
-// SIDEBARS
-.component-row__sidebar-right,
-.component-row__sidebar-left {
- .component-preview-cards {
- &.portrait {
- margin: 4px 4px 4px 0px;
- width: 100%;
- min-height: 210px;
- .component-preview-cards__box_wrapper {
- height: 150px;
- }
- @media screen and (max-width: 991px) {
- margin: 4px;
- width: calc(100% - 8px);
- }
- @media screen and (max-width: 767px) {
- margin: 4px 0;
- width: 100%;
- }
- }
- &.simple-display {
- margin: 4px 4px 4px 0px;
- width: 100%;
- min-height: 210px;
- .component-preview-cards__box_wrapper {
- height: 150px;
- }
- @media screen and (max-width: 991px) {
- margin: 4px;
- width: calc(100% - 8px);
- }
- @media screen and (max-width: 767px) {
- margin: 4px 0;
- width: 100%;
- }
- }
- &:not(.portrait):not(.simple-display) {
- margin: 4px 4px 4px 0px;
- width: 100%;
- min-height: 210px;
- .component-preview-cards__box_wrapper {
- height: 150px;
- }
- @media screen and (max-width: 991px) {
- margin: 4px;
- width: calc(100% - 8px);
- }
- @media screen and (max-width: 767px) {
- margin: 4px 0;
- width: 100%;
- }
- }
- }
-}
-
-// preview cards animation
-@media screen and (min-width: 992px) {
- .component-row.box-effects .component-row__center {
- .component-preview-cards {
- @include transition(all 0.4s ease-in-out 0s); // display
- &.portrait {
- width: calc(33.3% - 38px);
- @media screen and (max-width: 991px) {
- width: calc(50% - 38px);
- }
- @media screen and (max-width: 767px) {
- width: 100% !important;
- }
- &.from-smaller {
- @include transition(all 0.4s ease-in-out 0s);
- }
- &.from-bigger,
- &.from-bigger.from-smaller {
- @include transition(all 0.4s ease-in-out 0s);
- }
- &.make-bigger {
- @include transition(all 0.4s ease-in-out 0s);
- width: calc(43.3% - 38px) !important;
- }
- &.make-smaller {
- @include transition(all 0.4s ease-in-out 0s);
- width: calc(23.3% - 38px) !important;
- }
- &:hover {
- .component-preview-cards__veil {
- opacity: 0;
- }
- }
- }
- &.simple-display {
- width: calc(33.3% - 38px);
- @media screen and (max-width: 991px) {
- width: calc(50% - 38px);
- }
- @media screen and (max-width: 767px) {
- width: 100% !important;
- }
- &.from-smaller {
- @include transition(all 0.4s ease-in-out 0s);
- }
- &.from-bigger,
- &.from-bigger.from-smaller {
- @include transition(all 0.4s ease-in-out 0s);
- }
- &.make-bigger {
- @include transition(all 0.4s ease-in-out 0s);
- width: calc(43.3% - 38px) !important;
- }
- &.make-smaller {
- @include transition(all 0.4s ease-in-out 0s);
- width: calc(23.3% - 38px) !important;
- }
- &:hover {
- .component-preview-cards__veil {
- opacity: 0;
- }
- }
- }
- &.portrait.box-force-full-width,
- &.simple-display.box-force-full-width,
- &:not(.portrait):not(.simple-display) {
- width: calc(100% - 98px);
- @media screen and (max-width: 991px) {
- width: calc(100% - 98px);
- }
- @media screen and (max-width: 767px) {
- width: 100% !important;
- }
- &:hover {
- .component-preview-cards__veil {
- opacity: 0;
- }
- }
- }
- }
- }
-}
+// variables & mixings
+@import 'variables';
+// fonts
+@font-face {
+ font-family: "sourcesans-regular";
+ src: url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/regular.eot?") format("eot"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/regular.woff2") format("woff2"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/regular.woff") format("woff"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/regular.ttf") format("truetype"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/regular.svg#sourcesans-regular") format("svg");
+}
+
+@font-face {
+ font-family: "sourcesans-semibold";
+ src: url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/semibold.eot?") format("eot"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/semibold.woff2") format("woff2"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/semibold.woff") format("woff"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/semibold.ttf") format("truetype"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/semibold.svg#sourcesans-semibold") format("svg");
+}
+
+@font-face {
+ font-family: "sourcesans-bold";
+ src: url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/bold.eot?") format("eot"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/bold.woff2") format("woff2"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/bold.woff") format("woff"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/bold.ttf") format("truetype"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/bold.svg#sourcesans-bold") format("svg");
+}
+
+@font-face {
+ font-family: "sourcesans-light";
+ src: url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/light.eot?") format("eot"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/light.woff2") format("woff2"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/light.woff") format("woff"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/light.ttf") format("truetype"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/light.svg#sourcesans-light") format("svg");
+}
+
+@font-face {
+ font-family: "opensans-regular";
+ src: url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/regular.eot?") format("eot"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/regular.woff2") format("woff2"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/regular.woff") format("woff"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/regular.ttf") format("truetype"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/regular.svg#opensans-regular") format("svg");
+}
+
+@font-face {
+ font-family: "opensans-semibold";
+ src: url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/semibold.eot?") format("eot"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/semibold.woff2") format("woff2"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/semibold.woff") format("woff"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/semibold.ttf") format("truetype"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/semibold.svg#opensans-semibold") format("svg");
+}
+
+@font-face {
+ font-family: "opensans-bold";
+ src: url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/bold.eot?") format("eot"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/bold.woff2") format("woff2"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/bold.woff") format("woff"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/bold.ttf") format("truetype"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/bold.svg#opensans-bold") format("svg");
+}
+
+@font-face {
+ font-family: "cern-icons";
+ src: url("//framework.web.cern.ch/framework/3.0/fonts/cern/cern.eot?") format("eot"), url("//framework.web.cern.ch/framework/3.0/fonts/cern/cern.woff2") format("woff2"), url("//framework.web.cern.ch/framework/3.0/fonts/cern/cern.woff") format("woff"), url("//framework.web.cern.ch/framework/3.0/fonts/cern/cern.ttf") format("truetype"), url("//framework.web.cern.ch/framework/3.0/fonts/cern/cern.svg#cern-icons") format("svg");
+}
+
+//
+.component-preview-cards .preview-card__author a:not(:last-child):not(:nth-last-child(2)) {
+ &:after {
+ content: ', ';
+ }
+}
+
+.component-preview-cards .preview-card__author a:nth-last-child(2) {
+ &:after {
+ content: ' & ';
+ }
+}
+
+// preview card // article box
+.component-preview-cards {
+ @include flexbox;
+ @include font-size(1.4);
+ font-family: 'sourcesans-regular';
+ position: relative;
+ min-height: 210px;
+ float: left;
+ vertical-align: top;
+ max-width: 100%;
+ padding: 30px 40px;
+ /* background-image: url(../images/cern.png);
+ background-repeat: no-repeat;
+ background-position: center;
+ background-size: auto 70%; */
+ &__box_wrapper {
+ @include flexbox;
+ @include align-items(center);
+ @include justify-content(flex-end);
+ @include flex-flow(column);
+ position: relative;
+ z-index: 10;
+ height: 150px;
+ width: 100%;
+ .preview-card__avatar {
+ width: 65px !important;
+ height: 65px !important;
+ min-height: 0;
+ background: #999999;
+ border-radius: 100%;
+ padding: 0;
+ margin-bottom: 10px;
+ }
+ }
+ &__box {
+ @include align-self(flex-end);
+ width: 100%;
+ }
+ .component-preview-cards__category-icon-vocabulary {
+ margin: 0 auto;
+ text-align: center;
+ &:before {
+ content: attr(data-icon);
+ color: white;
+ font-family: "cern-icons";
+ -moz-osx-font-smoothing: grayscale;
+ -webkit-font-smoothing: antialiased;
+ display: block;
+ font-size: 60px;
+ position: relative;
+ top: -10px;
+ }
+ }
+
+ .component-preview-cards__category-icon-vocabulary + .preview-card{
+ &__title {
+ h3{
+ a{
+ span{
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+ }
+ }
+ }
+ }
+
+
+ .preview-card {
+ width: 100%;
+ &__title {
+ margin: 0;
+ h3 {
+ @include font-size(2.0);
+ font-family: 'sourcesans-semibold';
+ line-height: 26px !important;
+ padding: 0;
+ margin: 0;
+ display: block;
+ width: 100%;
+ a {
+ display: block !important;
+ position: relative;
+ line-height: 26px !important;
+ span {
+ display: block;
+ width: 100%;
+ //white-space: normal;
+ //overflow: hidden;
+ //text-overflow: ellipsis;
+ }
+ }
+ a:hover {
+ text-decoration: none;
+ }
+ a:before {
+ content: '\j';
+ @include font-size(4.0);
+ @include transition(all 0.6s ease-in-out 0s);
+ font-family: "cern-icons";
+ -moz-osx-font-smoothing: grayscale;
+ -webkit-font-smoothing: antialiased;
+ display: inline-block;
+ vertical-align: bottom;
+ position: absolute;
+ top: -2px;
+ left: -10px;
+ line-height: 25px;
+ width: 12px;
+ text-indent: -25px;
+ }
+ a:hover:before {
+ left: 0;
+ }
+ }
+ }
+ &__subtext {
+ font-family: 'sourcesans-light';
+ min-height: 18px;
+ height: 18px;
+ }
+ &__category,
+ &__date,
+ &__author {
+ font-family: 'sourcesans-light';
+ @include font-size(1.4);
+ display: inline-block;
+ &:not(:last-child) {
+ margin-right: 10px;
+ &:after {
+ content: '|';
+ display: inline-block;
+ position: relative;
+ right: -6px;
+ top: -1px;
+ }
+ }
+ a {
+ color: white;
+ text-decoration: none;
+ &:hover {
+ color: white;
+ text-decoration: none;
+ }
+ }
+ }
+ } //
+ // display
+ &.portrait {
+ width: calc(33.3% - 8px);
+ min-height: 428px;
+ margin: 4px;
+ .component-preview-cards__box_wrapper {
+ height: 368px;
+ }
+ @media screen and (max-width: 991px) {
+ width: calc(50% - 8px);
+ }
+ @media screen and (max-width: 767px) {
+ margin: 4px 0;
+ min-height: 210px;
+ width: 100%;
+ .component-preview-cards__box_wrapper {
+ height: 150px;
+ }
+ }
+ &:hover {
+ .component-preview-cards__veil {
+ opacity: 0;
+ ;
+ }
+ }
+ }
+ &.simple-display {
+ width: calc(33.3% - 8px);
+ min-height: 210px;
+ margin: 4px;
+ @media screen and (max-width: 991px) {
+ width: calc(50% - 8px);
+ }
+ @media screen and (max-width: 767px) {
+ margin: 4px 0;
+ width: 100%;
+ }
+ &:hover {
+ .component-preview-cards__veil {
+ opacity: 0;
+ ;
+ }
+ }
+ }
+ &.portrait.box-force-full-width {
+ width: calc(100% - 8px);
+ min-height: 428px;
+ margin: 4px;
+ @media screen and (max-width: 991px) {
+ width: calc(100% - 8px);
+ }
+ @media screen and (max-width: 767px) {
+ margin: 4px 0;
+ width: 100%;
+ }
+ &:hover {
+ .component-preview-cards__veil {
+ opacity: 0;
+ ;
+ }
+ }
+ }
+ &.simple-display.box-force-full-width,
+ &:not(.portrait):not(.simple-display) {
+ width: calc(100% - 8px);
+ min-height: 210px;
+ margin: 4px;
+ @media screen and (max-width: 991px) {
+ width: calc(100% - 8px);
+ }
+ @media screen and (max-width: 767px) {
+ margin: 4px 0;
+ width: 100%;
+ }
+ &:hover {
+ .component-preview-cards__veil {
+ opacity: 0;
+ ;
+ }
+ }
+ } //
+ // others
+ .material-icons {
+ display: none;
+ }
+ &__icon.video {
+ font-family: 'Material Icons';
+ width: 30px;
+ height: 30px;
+ margin: auto;
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+ right: 0;
+ z-index: 1;
+ .type_video {
+ @include font-size(5.0);
+ display: block;
+ }
+ }
+ &__icon.image {
+ font-family: 'Material Icons';
+ width: 30px;
+ height: 30px;
+ margin: auto;
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+ right: 0;
+ z-index: 1;
+ .type_image {
+ @include font-size(5.0);
+ display: block;
+ }
+ } //
+ // veil
+ &__veil {
+ @include transition(all 0.4s ease-in-out 0s);
+ @include background-gradient($startColor: rgba(0, 0, 0, 0), $endColor: rgba(0, 0, 0, 0.9));
+ position: absolute;
+ height: 101%;
+ width: 101%;
+ top: 0;
+ left: 0;
+ z-index: 0;
+ } //
+ // others
+ *,
+ *::after,
+ *::before {
+ box-sizing: border-box;
+ }
+}
+
+// SIDEBARS
+.component-row__sidebar-right,
+.component-row__sidebar-left {
+ .component-preview-cards {
+ &.portrait {
+ margin: 4px 4px 4px 0px;
+ width: 100%;
+ min-height: 210px;
+ .component-preview-cards__box_wrapper {
+ height: 150px;
+ }
+ @media screen and (max-width: 991px) {
+ margin: 4px;
+ width: calc(100% - 8px);
+ }
+ @media screen and (max-width: 767px) {
+ margin: 4px 0;
+ width: 100%;
+ }
+ }
+ &.simple-display {
+ margin: 4px 4px 4px 0px;
+ width: 100%;
+ min-height: 210px;
+ .component-preview-cards__box_wrapper {
+ height: 150px;
+ }
+ @media screen and (max-width: 991px) {
+ margin: 4px;
+ width: calc(100% - 8px);
+ }
+ @media screen and (max-width: 767px) {
+ margin: 4px 0;
+ width: 100%;
+ }
+ }
+ &:not(.portrait):not(.simple-display) {
+ margin: 4px 4px 4px 0px;
+ width: 100%;
+ min-height: 210px;
+ .component-preview-cards__box_wrapper {
+ height: 150px;
+ }
+ @media screen and (max-width: 991px) {
+ margin: 4px;
+ width: calc(100% - 8px);
+ }
+ @media screen and (max-width: 767px) {
+ margin: 4px 0;
+ width: 100%;
+ }
+ }
+ }
+}
+
+// preview cards animation
+@media screen and (min-width: 992px) {
+ .component-row.box-effects .component-row__center {
+ .component-preview-cards {
+ @include transition(all 0.4s ease-in-out 0s); // display
+ &.portrait {
+ width: calc(33.3% - 38px);
+ @media screen and (max-width: 991px) {
+ width: calc(50% - 38px);
+ }
+ @media screen and (max-width: 767px) {
+ width: 100% !important;
+ }
+ &.from-smaller {
+ @include transition(all 0.4s ease-in-out 0s);
+ }
+ &.from-bigger,
+ &.from-bigger.from-smaller {
+ @include transition(all 0.4s ease-in-out 0s);
+ }
+ &.make-bigger {
+ @include transition(all 0.4s ease-in-out 0s);
+ width: calc(43.3% - 38px) !important;
+ }
+ &.make-smaller {
+ @include transition(all 0.4s ease-in-out 0s);
+ width: calc(23.3% - 38px) !important;
+ }
+ &:hover {
+ .component-preview-cards__veil {
+ opacity: 0;
+ }
+ }
+ }
+ &.simple-display {
+ width: calc(33.3% - 38px);
+ @media screen and (max-width: 991px) {
+ width: calc(50% - 38px);
+ }
+ @media screen and (max-width: 767px) {
+ width: 100% !important;
+ }
+ &.from-smaller {
+ @include transition(all 0.4s ease-in-out 0s);
+ }
+ &.from-bigger,
+ &.from-bigger.from-smaller {
+ @include transition(all 0.4s ease-in-out 0s);
+ }
+ &.make-bigger {
+ @include transition(all 0.4s ease-in-out 0s);
+ width: calc(43.3% - 38px) !important;
+ }
+ &.make-smaller {
+ @include transition(all 0.4s ease-in-out 0s);
+ width: calc(23.3% - 38px) !important;
+ }
+ &:hover {
+ .component-preview-cards__veil {
+ opacity: 0;
+ }
+ }
+ }
+ &.portrait.box-force-full-width,
+ &.simple-display.box-force-full-width,
+ &:not(.portrait):not(.simple-display) {
+ width: calc(100% - 98px);
+ @media screen and (max-width: 991px) {
+ width: calc(100% - 98px);
+ }
+ @media screen and (max-width: 767px) {
+ width: 100% !important;
+ }
+ &:hover {
+ .component-preview-cards__veil {
+ opacity: 0;
+ }
+ }
+ }
+ }
+ }
+}
diff --git a/cern_components/patterns/molecules/row/scss/mixins.scss b/patterns/molecules/preview-card/sass/mixins.scss
similarity index 100%
rename from cern_components/patterns/molecules/row/scss/mixins.scss
rename to patterns/molecules/preview-card/sass/mixins.scss
diff --git a/cern_components/patterns/molecules/preview-card/sass/variables.scss b/patterns/molecules/preview-card/sass/variables.scss
similarity index 94%
rename from cern_components/patterns/molecules/preview-card/sass/variables.scss
rename to patterns/molecules/preview-card/sass/variables.scss
index 9b172fdf..0be0dd6b 100755
--- a/cern_components/patterns/molecules/preview-card/sass/variables.scss
+++ b/patterns/molecules/preview-card/sass/variables.scss
@@ -1,45 +1,45 @@
-// mixins library
-@import 'mixins.scss';
-//
-// Variables
-// --------------------------------------------------
-// Grays
-// -------------------------
-$grey-dark: #292929;
-$grey-medium: #4a4a4a;
-$grey-light: #bebebe;
-$grey-mlight:#efe8e8;
-//
-// corporate colors
-// -------------------------
-$blue: #0855a0;
-$orange: #f2a530;
-//
-// Section colors
-// -------------------------
-$error: #ff0000;
-$error-light: #faeaea;
-//
-// generic variables
-// -------------------------
-$white: #ffffff;
-$black: #000000;
-$black-medium:#1a1a1a;
-$black-light:#00060a;
-$body-bg: $white;
-$text-color: $black;
-$link-color: $blue;
-//
-//
-// Styles
-// -------------------------
-
-%line-separator-v{
- border-right:1px solid $white;
- height: 10px;
- content: '';
- display: inline-block;
- width: 1px;
- margin:0 8px;
-}
-
+// mixins library
+@import 'mixins.scss';
+//
+// Variables
+// --------------------------------------------------
+// Grays
+// -------------------------
+$grey-dark: #292929;
+$grey-medium: #4a4a4a;
+$grey-light: #bebebe;
+$grey-mlight:#efe8e8;
+//
+// corporate colors
+// -------------------------
+$blue: #0855a0;
+$orange: #f2a530;
+//
+// Section colors
+// -------------------------
+$error: #ff0000;
+$error-light: #faeaea;
+//
+// generic variables
+// -------------------------
+$white: #ffffff;
+$black: #000000;
+$black-medium:#1a1a1a;
+$black-light:#00060a;
+$body-bg: $white;
+$text-color: $black;
+$link-color: $blue;
+//
+//
+// Styles
+// -------------------------
+
+%line-separator-v{
+ border-right:1px solid $white;
+ height: 10px;
+ content: '';
+ display: inline-block;
+ width: 1px;
+ margin:0 8px;
+}
+
diff --git a/cern_components/patterns/molecules/preview-grid/css/preview-grid.component.css b/patterns/molecules/preview-grid/css/preview-grid.component.css
similarity index 100%
rename from cern_components/patterns/molecules/preview-grid/css/preview-grid.component.css
rename to patterns/molecules/preview-grid/css/preview-grid.component.css
diff --git a/cern_components/patterns/molecules/preview-grid/preview-grid.ui_patterns.html.twig b/patterns/molecules/preview-grid/preview-grid.ui_patterns.html.twig
similarity index 100%
rename from cern_components/patterns/molecules/preview-grid/preview-grid.ui_patterns.html.twig
rename to patterns/molecules/preview-grid/preview-grid.ui_patterns.html.twig
diff --git a/cern_components/patterns/molecules/preview-grid/preview-grid.ui_patterns.yml b/patterns/molecules/preview-grid/preview-grid.ui_patterns.yml
similarity index 100%
rename from cern_components/patterns/molecules/preview-grid/preview-grid.ui_patterns.yml
rename to patterns/molecules/preview-grid/preview-grid.ui_patterns.yml
diff --git a/cern_components/patterns/molecules/preview-grid/scss/preview-grid.component.scss b/patterns/molecules/preview-grid/scss/preview-grid.component.scss
similarity index 100%
rename from cern_components/patterns/molecules/preview-grid/scss/preview-grid.component.scss
rename to patterns/molecules/preview-grid/scss/preview-grid.component.scss
diff --git a/cern_components/patterns/molecules/preview-list/css/preview-list.component.css b/patterns/molecules/preview-list/css/preview-list.component.css
similarity index 100%
rename from cern_components/patterns/molecules/preview-list/css/preview-list.component.css
rename to patterns/molecules/preview-list/css/preview-list.component.css
diff --git a/cern_components/patterns/molecules/preview-list/images/cern.png b/patterns/molecules/preview-list/images/cern.png
similarity index 100%
rename from cern_components/patterns/molecules/preview-list/images/cern.png
rename to patterns/molecules/preview-list/images/cern.png
diff --git a/cern_components/patterns/molecules/preview-list/js/preview-list.js b/patterns/molecules/preview-list/js/preview-list.js
similarity index 100%
rename from cern_components/patterns/molecules/preview-list/js/preview-list.js
rename to patterns/molecules/preview-list/js/preview-list.js
diff --git a/cern_components/patterns/molecules/preview-list/preview-list.ui_patterns.html.twig b/patterns/molecules/preview-list/preview-list.ui_patterns.html.twig
similarity index 100%
rename from cern_components/patterns/molecules/preview-list/preview-list.ui_patterns.html.twig
rename to patterns/molecules/preview-list/preview-list.ui_patterns.html.twig
diff --git a/cern_components/patterns/molecules/preview-list/preview-list.ui_patterns.yml b/patterns/molecules/preview-list/preview-list.ui_patterns.yml
similarity index 100%
rename from cern_components/patterns/molecules/preview-list/preview-list.ui_patterns.yml
rename to patterns/molecules/preview-list/preview-list.ui_patterns.yml
diff --git a/cern_components/patterns/molecules/preview-list/scss/preview-list.component.scss b/patterns/molecules/preview-list/scss/preview-list.component.scss
similarity index 100%
rename from cern_components/patterns/molecules/preview-list/scss/preview-list.component.scss
rename to patterns/molecules/preview-list/scss/preview-list.component.scss
diff --git a/cern_components/patterns/molecules/quote/css/quote.component.css b/patterns/molecules/quote/css/quote.component.css
similarity index 100%
rename from cern_components/patterns/molecules/quote/css/quote.component.css
rename to patterns/molecules/quote/css/quote.component.css
diff --git a/cern_components/patterns/molecules/quote/images/quote-after.png b/patterns/molecules/quote/images/quote-after.png
similarity index 100%
rename from cern_components/patterns/molecules/quote/images/quote-after.png
rename to patterns/molecules/quote/images/quote-after.png
diff --git a/cern_components/patterns/molecules/quote/images/quote-before.png b/patterns/molecules/quote/images/quote-before.png
similarity index 100%
rename from cern_components/patterns/molecules/quote/images/quote-before.png
rename to patterns/molecules/quote/images/quote-before.png
diff --git a/cern_components/patterns/molecules/quote/quote.html.twig b/patterns/molecules/quote/quote.html.twig
similarity index 100%
rename from cern_components/patterns/molecules/quote/quote.html.twig
rename to patterns/molecules/quote/quote.html.twig
diff --git a/cern_components/patterns/molecules/quote/quote.ui_patterns.yml b/patterns/molecules/quote/quote.ui_patterns.yml
similarity index 100%
rename from cern_components/patterns/molecules/quote/quote.ui_patterns.yml
rename to patterns/molecules/quote/quote.ui_patterns.yml
diff --git a/cern_components/patterns/molecules/agenda/scss/mixins.scss b/patterns/molecules/quote/scss/mixins.scss
old mode 100755
new mode 100644
similarity index 96%
rename from cern_components/patterns/molecules/agenda/scss/mixins.scss
rename to patterns/molecules/quote/scss/mixins.scss
index 6c20dc3f..c2a8dc4d
--- a/cern_components/patterns/molecules/agenda/scss/mixins.scss
+++ b/patterns/molecules/quote/scss/mixins.scss
@@ -1,567 +1,567 @@
-///
-/// String replace
-///
-@function str-replace($string, $search, $replace: "") {
- $index: str-index($string, $search);
- @if $index {
- @return str-slice($string, 1, $index - 1)+$replace+str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
- }
- @return $string;
-}
-
-///
-/// Font face mixins
-///
-@mixin font-face($name, $path, $weight: null, $style: null, $exts: eot woff ttf svg) {
- $src: null;
- $extmods: ( eot: "?", svg: "#" + str-replace($name, " ", "_"));
- $formats: ( otf: "opentype", ttf: "truetype");
- @each $ext in $exts {
- $extmod: if(map-has-key($extmods, $ext), $ext + map-get($extmods, $ext), $ext);
- $format: if(map-has-key($formats, $ext), map-get($formats, $ext), $ext);
- $src: append($src, url(quote($path + "." + $extmod)) format(quote($format)), comma);
- }
- @font-face {
- font-family: quote($name);
- font-style: $style;
- font-weight: $weight;
- src: $src;
- }
-}
-
-///
-/// Font size mixins
-///
-@mixin font-size($sizeValue: 1.6) {
- font-size: ($sizeValue * 10) + px;
- font-size: $sizeValue + rem;
-}
-
-///
-/// @extend %clearfix;
-///
-%clearfix {
- clear: both;
- &:before,
- &:after {
- content: "";
- display: table;
- }
- &:after {
- clear: both;
- }
-}
-
-/// Adds a browser prefix to the property
-/// @param {*} $property Property
-/// @param {*} $value Value
-@mixin css3-prefix($property,
-$value) {
- -webkit-#{$property}: #{$value};
- -khtml-#{$property}: #{$value};
- -moz-#{$property}: #{$value};
- -ms-#{$property}: #{$value};
- -o-#{$property}: #{$value};
- #{$property}: #{$value};
-}
-
-/// Background Gradient
-/// @param {Color} $startColor [#3C3C3C] - Start Color
-/// @param {Color} $endColor [#999999] - End Color
-@mixin background-gradient($startColor: #3C3C3C,
-$endColor: #999999) {
- background-color: $startColor;
- background-image: -webkit-gradient(linear, left top, left bottom, from($startColor), to($endColor));
- background-image: -webkit-linear-gradient(top, $startColor, $endColor);
- background-image: -moz-linear-gradient(top, $startColor, $endColor);
- background-image: -ms-linear-gradient(top, $startColor, $endColor);
- background-image: -o-linear-gradient(top, $startColor, $endColor);
- background-image: linear-gradient(top, $startColor, $endColor);
- filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#{$startColor}',
- endColorStr='#{$endColor}');
-}
-
-/// Background Horizontal
-/// @param {Color} $startColor [#3C3C3C] - Start Color
-/// @param {Color} $endColor [#999999] - End Color
-@mixin background-horizontal($startColor: #3C3C3C,
-$endColor: #999999) {
- background-color: $startColor;
- background-image: -webkit-gradient(linear, left top, right top, from($startColor), to($endColor));
- background-image: -webkit-linear-gradient(left, $startColor, $endColor);
- background-image: -moz-linear-gradient(left, $startColor, $endColor);
- background-image: -ms-linear-gradient(left, $startColor, $endColor);
- background-image: -o-linear-gradient(left, $startColor, $endColor);
- background-image: linear-gradient(left, $startColor, $endColor);
- filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#{$startColor}',
- endColorStr='#{$endColor}',
- gradientType='1');
-}
-
-/// Background Radial
-/// @param {Color} $startColor [#3C3C3C] - Start Color
-/// @param {Percentage} $startPos [0%] - Start position
-/// @param {Color} $endColor [#999999] - End Color
-/// @param {Percentage} $endPos [100%] - End position
-@mixin background-radial($startColor: #FFFFFF,
-$startPos: 0%,
-$endColor: #000000,
-$endPos:100%) {
- background: -moz-radial-gradient(center, ellipse cover, $startColor $startPos, $endColor $endPos);
- background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop($startPos, $startColor), color-stop($endPos, $endColor));
- background: -webkit-radial-gradient(center, ellipse cover, $startColor $startPos, $endColor $endPos);
- background: -o-radial-gradient(center, ellipse cover, $startColor $startPos, $endColor $endPos);
- background: -ms-radial-gradient(center, ellipse cover, $startColor $startPos, $endColor $endPos);
- background: radial-gradient(ellipse at center, $startColor $startPos, $endColor $endPos);
-}
-
-/// Background Size
-/// @param {Size} $width [100%] - Width
-/// @param {Size} $width [$width] - Height
-/// @require {mixin} css3-prefix
-@mixin background-size($width: 100%,
-$height: $width) {
- @if type-of($width)=='number' and $height !=null {
- @include css3-prefix('background-size',
- $width $height);
- }
- @else {
- @include css3-prefix('background-size',
- $width);
- }
-}
-
-/// Background Color Opacity
-/// @param {Color} $color [100%] - Color
-/// @param {Double} $opacity [0.85] - Opacity
-@mixin background-opacity($color: #000,
-$opacity: 0.85) {
- background: $color;
- background: rgba($color, $opacity);
-}
-
-/// Border Radius
-/// @param {Size} $radius [5px] - Radius
-/// @require {mixin} css3-prefix
-@mixin border-radius($radius: 5px) {
- @include css3-prefix('border-radius',
- $radius);
-}
-
-/// Border Radius Separate
-/// @param {Size} $topLeftRadius [5px] - Top Left
-/// @param {Size} $topRightRadius [5px] - Top Right
-/// @param {Size} $bottomLeftRadius [5px] - Bottom Left
-/// @param {Size} $bottomRightRadius [5px] - Bottom Right
-@mixin border-radius-separate($topLeftRadius: 5px,
-$topRightRadius: 5px,
-$bottomLeftRadius: 5px,
-$bottomRightRadius: 5px) {
- -webkit-border-top-left-radius: $topLeftRadius;
- -webkit-border-top-right-radius: $topRightRadius;
- -webkit-border-bottom-right-radius: $bottomRightRadius;
- -webkit-border-bottom-left-radius: $bottomLeftRadius;
- -moz-border-radius-topleft: $topLeftRadius;
- -moz-border-radius-topright: $topRightRadius;
- -moz-border-radius-bottomright: $bottomRightRadius;
- -moz-border-radius-bottomleft: $bottomLeftRadius;
- border-top-left-radius: $topLeftRadius;
- border-top-right-radius: $topRightRadius;
- border-bottom-right-radius: $bottomRightRadius;
- border-bottom-left-radius: $bottomLeftRadius;
-}
-
-/// Box
-/// @param {*} $orient [horizontal] - Orientation
-/// @param {*} $pack [center] - Pack
-/// @param {*} $align [center] - Align
-/// @require {mixin} css3-prefix
-@mixin box($orient: horizontal,
-$pack: center,
-$align: center) {
- display: -webkit-box;
- display: -moz-box;
- display: box;
- @include css3-prefix('box-orient',
- $orient);
- @include css3-prefix('box-pack',
- $pack);
- @include css3-prefix('box-align',
- $align);
-}
-
-/// Box RGBA
-/// @param {Integer} $r [60] - Red
-/// @param {Integer} $g [3] - Green
-/// @param {Integer} $b [12] - Blue
-/// @param {Double} $opacity [0.23] - Opacity
-/// @param {Color} $color [#3C3C3C] - Color
-@mixin box-rgba($r: 60,
-$g: 3,
-$b: 12,
-$opacity: 0.23,
-$color: #3C3C3C) {
- background-color: transparent;
- background-color: rgba($r, $g, $b, $opacity);
- filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$color}',
- endColorstr='#{$color}');
- zoom: 1;
-}
-
-/// Box Shadow
-/// @param {Size} $x [2px] - X
-/// @param {Size} $y [2px] - Y
-/// @param {Size} $blur [5px] - Blur
-/// @param {Color} $color [rgba(0,0,0,.4)] - Color
-/// @param {Boolean} $inset - Inset
-@mixin box-shadow($x: 2px,
-$y: 2px,
-$blur: 5px,
-$color: rgba(0, 0, 0, .4),
-$inset: "") {
- @if ($inset !="") {
- @include css3-prefix('box-shadow',
- $inset $x $y $blur $color);
- }
- @else {
- @include css3-prefix('box-shadow',
- $x $y $blur $color);
- }
-}
-
-/// Box Sizing
-/// @param {*} $type [border-box] - Type
-/// @require {mixin} css3-prefix
-@mixin box-sizing($type: border-box) {
- @include css3-prefix('box-sizing',
- $type);
-}
-
-/// Columns
-/// @param {Integer} $count [3] - Count
-/// @param {Integer} $gap [10] - Gap
-/// @require {mixin} css3-prefix
-@mixin columns($count: 3,
-$gap: 10) {
- @include css3-prefix('column-count',
- $count);
- @include css3-prefix('column-gap',
- $gap);
-}
-
-/// Double Borders
-/// @param {Color} $colorOne [#3C3C3C] - Color One
-/// @param {Color} $colorTwo [#999999] - Color Two
-/// @param {Size} $radius [0] - Radius
-/// @require {mixin} css3-prefix
-/// @require {mixin} border-radius
-@mixin double-borders($colorOne: #3C3C3C,
-$colorTwo: #999999,
-$radius: 0) {
- border: 1px solid $colorOne;
- @include css3-prefix('box-shadow',
- 0 0 0 1px $colorTwo);
- @include border-radius( $radius);
-}
-
-/// Flex
-/// @param {Integer} $value [1] - Value
-/// @require {mixin} css3-prefix
-@mixin flex($value: 1) {
- @include css3-prefix('box-flex',
- $value);
-}
-
-/// Flip
-/// @param {Double} $scaleX [-1] - ScaleX
-/// @require {mixin} css3-prefix
-@mixin flip($scaleX: -1) {
- @include css3-prefix('transform',
- scaleX($scaleX));
- filter: FlipH;
- -ms-filter: "FlipH";
-}
-
-/// Opacity
-/// @param {Double} $opacity [0.5] - Opacity
-/// @require {mixin} css3-prefix
-@mixin opacity($opacity: 0.5) {
- $opacityMultiplied: ($opacity * 100);
- filter: alpha(opacity=$opacityMultiplied);
- -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=" + $opacityMultiplied + ")";
- @include css3-prefix('opacity',
- $opacity);
-}
-
-/// Outline Radius
-/// @param {Size} $radius [5px] - Radius
-/// @require {mixin} css3-prefix
-@mixin outline-radius($radius: 5px) {
- @include css3-prefix('outline-radius',
- $radius);
-}
-
-/// Resize
-/// @param {*} $directoin [both] - Direction
-/// @require {mixin} css3-prefix
-@mixin resize($direction: both) {
- @include css3-prefix('resize',
- $direction);
-}
-
-/// Rotate
-///
-/// CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html
-/// @param {Double} $deg [0] - Degree
-/// @param {Double} $m11 [0] - M11
-/// @param {Double} $m12 [0] - M12
-/// @param {Double} $m21 [0] - M21
-/// @param {Double} $m22 [0] - M22
-/// @require {mixin} css3-prefix
-@mixin rotate($deg: 0,
-$m11: 0,
-$m12: 0,
-$m21: 0,
-$m22: 0) {
- @include css3-prefix('transform',
- rotate($deg + deg));
- filter: progid:DXImageTransform.Microsoft.Matrix( M11=#{$m11},
- M12=#{$m12},
- M21=#{$m21},
- M22=#{$m22},
- sizingMethod='auto expand');
- zoom: 1;
-}
-
-/// Text Shadow
-/// @param {Size} $x [2px] - X
-/// @param {Size} $y [2px] - Y
-/// @param {Size} $blur [2px] - Blur
-/// @param {Color} $color [rgba(0,0,0,.4)] - Color
-@mixin text-shadow($x: 2px,
-$y: 2px,
-$blur: 5px,
-$color: rgba(0, 0, 0, .4)) {
- text-shadow: $x $y $blur $color;
-}
-
-/// Transform
-/// @param {List} $params - Params
-/// @require {mixin} css3-prefix
-@mixin transform($params) {
- @include css3-prefix('transform',
- $params);
-}
-
-/// Transform-Origin
-/// @param {List} $params - Params
-/// @require {mixin} css3-prefix
-@mixin transform-origin($params) {
- @include css3-prefix('transform-origin',
- $params);
-}
-
-// Transform-Style
-/// @param {List} $params - Params
-/// @require {mixin} css3-prefix
-@mixin transform-style($style: preserve-3d) {
- @include css3-prefix('transform-style',
- $style);
-}
-
-/// Transition
-/// @param {List} $properties - Properties
-/// @require {mixin} css3-prefix
-@mixin transition($properties...) {
- @if length($properties)>=1 {
- @include css3-prefix('transition',
- $properties);
- }
- @else {
- @include css3-prefix('transition',
- "all 0.2s ease-in-out 0s");
- }
-}
-
-/// Triple Borders
-/// @param {Color} $colorOne [#3C3C3C] - Color One
-/// @param {Color} $colorTwo [#999999] - Color Two
-/// @param {Color} $colorThree [#000000] - Color Three
-/// @param {Size} $radius [0] - Radius
-/// @require {mixin} border-radius
-/// @require {mixin} css3-prefix
-@mixin triple-borders($colorOne: #3C3C3C,
-$colorTwo: #999999,
-$colorThree: #000000,
-$radius: 0) {
- border: 1px solid $colorOne;
- @include border-radius($radius);
- @include css3-prefix('box-shadow',
- "0 0 0 1px #{$colorTwo}, 0 0 0 2px #{$colorThree}");
-}
-
-/// Keyframes
-/// @param {*} $animation-name - Animation name
-/// @content [Animation css]
-@mixin keyframes($animation-name) {
- @-webkit-keyframes #{$animation-name} {
- @content;
- }
- @-moz-keyframes #{$animation-name} {
- @content;
- }
- @-ms-keyframes #{$animation-name} {
- @content;
- }
- @-o-keyframes #{$animation-name} {
- @content;
- }
- @keyframes #{$animation-name} {
- @content;
- }
-}
-
-/// Animation
-/// @param {*} $str - name duration timing-function delay iteration-count direction fill-mode play-state ([http://www.w3schools.com/cssref/css3_pr_animation.asp](http://www.w3schools.com/cssref/css3_pr_animation.asp))
-/// @require {mixin} css3-prefix
-@mixin animation($str) {
- @include css3-prefix('animation',
- $str);
-}
-
-// --------------------------------------------------
-// Flexbox SASS mixins
-// The spec: http://www.w3.org/TR/css3-flexbox
-// --------------------------------------------------
-// Flexbox display
-@mixin flexbox() {
- display: -webkit-box;
- display: -moz-box;
- display: -ms-flexbox;
- display: -webkit-flex;
- display: flex;
-}
-
-// The 'flex' shorthand
-// - applies to: flex items
-// <positive-number>, initial, auto, or none
-@mixin flex($values) {
- -webkit-box-flex: $values;
- -moz-box-flex: $values;
- -webkit-flex: $values;
- -ms-flex: $values;
- flex: $values;
-}
-
-// Flex Flow Direction
-// - applies to: flex containers
-// row | row-reverse | column | column-reverse
-@mixin flex-direction($direction) {
- -webkit-flex-direction: $direction;
- -moz-flex-direction: $direction;
- -ms-flex-direction: $direction;
- flex-direction: $direction;
-}
-
-// Flex Line Wrapping
-// - applies to: flex containers
-// nowrap | wrap | wrap-reverse
-@mixin flex-wrap($wrap) {
- -webkit-flex-wrap: $wrap;
- -moz-flex-wrap: $wrap;
- -ms-flex-wrap: $wrap;
- flex-wrap: $wrap;
-}
-
-// Flex Direction and Wrap
-// - applies to: flex containers
-// <flex-direction> || <flex-wrap>
-@mixin flex-flow($flow) {
- -webkit-flex-flow: $flow;
- -moz-flex-flow: $flow;
- -ms-flex-flow: $flow;
- flex-flow: $flow;
-}
-
-// Display Order
-// - applies to: flex items
-// <integer>
-@mixin order($val) {
- -webkit-box-ordinal-group: $val;
- -moz-box-ordinal-group: $val;
- -ms-flex-order: $val;
- -webkit-order: $val;
- order: $val;
-}
-
-// Flex grow factor
-// - applies to: flex items
-// <number>
-@mixin flex-grow($grow) {
- -webkit-flex-grow: $grow;
- -moz-flex-grow: $grow;
- -ms-flex-grow: $grow;
- flex-grow: $grow;
-}
-
-// Flex shrink
-// - applies to: flex item shrink factor
-// <number>
-@mixin flex-shrink($shrink) {
- -webkit-flex-shrink: $shrink;
- -moz-flex-shrink: $shrink;
- -ms-flex-shrink: $shrink;
- flex-shrink: $shrink;
-}
-
-// Flex basis
-// - the initial main size of the flex item
-// - applies to: flex itemsnitial main size of the flex item
-// <width>
-@mixin flex-basis($width) {
- -webkit-flex-basis: $width;
- -moz-flex-basis: $width;
- -ms-flex-basis: $width;
- flex-basis: $width;
-}
-
-// Axis Alignment
-// - applies to: flex containers
-// flex-start | flex-end | center | space-between | space-around
-@mixin justify-content($justify) {
- -webkit-justify-content: $justify;
- -moz-justify-content: $justify;
- -ms-justify-content: $justify;
- justify-content: $justify;
- -ms-flex-pack: $justify;
-}
-
-// Packing Flex Lines
-// - applies to: multi-line flex containers
-// flex-start | flex-end | center | space-between | space-around | stretch
-@mixin align-content($align) {
- -webkit-align-content: $align;
- -moz-align-content: $align;
- -ms-align-content: $align;
- align-content: $align;
-}
-
-// Cross-axis Alignment
-// - applies to: flex containers
-// flex-start | flex-end | center | baseline | stretch
-@mixin align-items($align) {
- -webkit-align-items: $align;
- -moz-align-items: $align;
- -ms-align-items: $align;
- align-items: $align;
-}
-
-// Cross-axis Alignment
-// - applies to: flex items
-// auto | flex-start | flex-end | center | baseline | stretch
-@mixin align-self($align) {
- -webkit-align-self: $align;
- -moz-align-self: $align;
- -ms-align-self: $align;
- align-self: $align;
+///
+/// String replace
+///
+@function str-replace($string, $search, $replace: "") {
+ $index: str-index($string, $search);
+ @if $index {
+ @return str-slice($string, 1, $index - 1)+$replace+str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
+ }
+ @return $string;
+}
+
+///
+/// Font face mixins
+///
+@mixin font-face($name, $path, $weight: null, $style: null, $exts: eot woff ttf svg) {
+ $src: null;
+ $extmods: ( eot: "?", svg: "#" + str-replace($name, " ", "_"));
+ $formats: ( otf: "opentype", ttf: "truetype");
+ @each $ext in $exts {
+ $extmod: if(map-has-key($extmods, $ext), $ext + map-get($extmods, $ext), $ext);
+ $format: if(map-has-key($formats, $ext), map-get($formats, $ext), $ext);
+ $src: append($src, url(quote($path + "." + $extmod)) format(quote($format)), comma);
+ }
+ @font-face {
+ font-family: quote($name);
+ font-style: $style;
+ font-weight: $weight;
+ src: $src;
+ }
+}
+
+///
+/// Font size mixins
+///
+@mixin font-size($sizeValue: 1.6) {
+ font-size: ($sizeValue * 10) + px;
+ font-size: $sizeValue + rem;
+}
+
+///
+/// @extend %clearfix;
+///
+%clearfix {
+ clear: both;
+ &:before,
+ &:after {
+ content: "";
+ display: table;
+ }
+ &:after {
+ clear: both;
+ }
+}
+
+/// Adds a browser prefix to the property
+/// @param {*} $property Property
+/// @param {*} $value Value
+@mixin css3-prefix($property,
+$value) {
+ -webkit-#{$property}: #{$value};
+ -khtml-#{$property}: #{$value};
+ -moz-#{$property}: #{$value};
+ -ms-#{$property}: #{$value};
+ -o-#{$property}: #{$value};
+ #{$property}: #{$value};
+}
+
+/// Background Gradient
+/// @param {Color} $startColor [#3C3C3C] - Start Color
+/// @param {Color} $endColor [#999999] - End Color
+@mixin background-gradient($startColor: #3C3C3C,
+$endColor: #999999) {
+ background-color: $startColor;
+ background-image: -webkit-gradient(linear, left top, left bottom, from($startColor), to($endColor));
+ background-image: -webkit-linear-gradient(top, $startColor, $endColor);
+ background-image: -moz-linear-gradient(top, $startColor, $endColor);
+ background-image: -ms-linear-gradient(top, $startColor, $endColor);
+ background-image: -o-linear-gradient(top, $startColor, $endColor);
+ background-image: linear-gradient(top, $startColor, $endColor);
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#{$startColor}',
+ endColorStr='#{$endColor}');
+}
+
+/// Background Horizontal
+/// @param {Color} $startColor [#3C3C3C] - Start Color
+/// @param {Color} $endColor [#999999] - End Color
+@mixin background-horizontal($startColor: #3C3C3C,
+$endColor: #999999) {
+ background-color: $startColor;
+ background-image: -webkit-gradient(linear, left top, right top, from($startColor), to($endColor));
+ background-image: -webkit-linear-gradient(left, $startColor, $endColor);
+ background-image: -moz-linear-gradient(left, $startColor, $endColor);
+ background-image: -ms-linear-gradient(left, $startColor, $endColor);
+ background-image: -o-linear-gradient(left, $startColor, $endColor);
+ background-image: linear-gradient(left, $startColor, $endColor);
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#{$startColor}',
+ endColorStr='#{$endColor}',
+ gradientType='1');
+}
+
+/// Background Radial
+/// @param {Color} $startColor [#3C3C3C] - Start Color
+/// @param {Percentage} $startPos [0%] - Start position
+/// @param {Color} $endColor [#999999] - End Color
+/// @param {Percentage} $endPos [100%] - End position
+@mixin background-radial($startColor: #FFFFFF,
+$startPos: 0%,
+$endColor: #000000,
+$endPos:100%) {
+ background: -moz-radial-gradient(center, ellipse cover, $startColor $startPos, $endColor $endPos);
+ background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop($startPos, $startColor), color-stop($endPos, $endColor));
+ background: -webkit-radial-gradient(center, ellipse cover, $startColor $startPos, $endColor $endPos);
+ background: -o-radial-gradient(center, ellipse cover, $startColor $startPos, $endColor $endPos);
+ background: -ms-radial-gradient(center, ellipse cover, $startColor $startPos, $endColor $endPos);
+ background: radial-gradient(ellipse at center, $startColor $startPos, $endColor $endPos);
+}
+
+/// Background Size
+/// @param {Size} $width [100%] - Width
+/// @param {Size} $width [$width] - Height
+/// @require {mixin} css3-prefix
+@mixin background-size($width: 100%,
+$height: $width) {
+ @if type-of($width)=='number' and $height !=null {
+ @include css3-prefix('background-size',
+ $width $height);
+ }
+ @else {
+ @include css3-prefix('background-size',
+ $width);
+ }
+}
+
+/// Background Color Opacity
+/// @param {Color} $color [100%] - Color
+/// @param {Double} $opacity [0.85] - Opacity
+@mixin background-opacity($color: #000,
+$opacity: 0.85) {
+ background: $color;
+ background: rgba($color, $opacity);
+}
+
+/// Border Radius
+/// @param {Size} $radius [5px] - Radius
+/// @require {mixin} css3-prefix
+@mixin border-radius($radius: 5px) {
+ @include css3-prefix('border-radius',
+ $radius);
+}
+
+/// Border Radius Separate
+/// @param {Size} $topLeftRadius [5px] - Top Left
+/// @param {Size} $topRightRadius [5px] - Top Right
+/// @param {Size} $bottomLeftRadius [5px] - Bottom Left
+/// @param {Size} $bottomRightRadius [5px] - Bottom Right
+@mixin border-radius-separate($topLeftRadius: 5px,
+$topRightRadius: 5px,
+$bottomLeftRadius: 5px,
+$bottomRightRadius: 5px) {
+ -webkit-border-top-left-radius: $topLeftRadius;
+ -webkit-border-top-right-radius: $topRightRadius;
+ -webkit-border-bottom-right-radius: $bottomRightRadius;
+ -webkit-border-bottom-left-radius: $bottomLeftRadius;
+ -moz-border-radius-topleft: $topLeftRadius;
+ -moz-border-radius-topright: $topRightRadius;
+ -moz-border-radius-bottomright: $bottomRightRadius;
+ -moz-border-radius-bottomleft: $bottomLeftRadius;
+ border-top-left-radius: $topLeftRadius;
+ border-top-right-radius: $topRightRadius;
+ border-bottom-right-radius: $bottomRightRadius;
+ border-bottom-left-radius: $bottomLeftRadius;
+}
+
+/// Box
+/// @param {*} $orient [horizontal] - Orientation
+/// @param {*} $pack [center] - Pack
+/// @param {*} $align [center] - Align
+/// @require {mixin} css3-prefix
+@mixin box($orient: horizontal,
+$pack: center,
+$align: center) {
+ display: -webkit-box;
+ display: -moz-box;
+ display: box;
+ @include css3-prefix('box-orient',
+ $orient);
+ @include css3-prefix('box-pack',
+ $pack);
+ @include css3-prefix('box-align',
+ $align);
+}
+
+/// Box RGBA
+/// @param {Integer} $r [60] - Red
+/// @param {Integer} $g [3] - Green
+/// @param {Integer} $b [12] - Blue
+/// @param {Double} $opacity [0.23] - Opacity
+/// @param {Color} $color [#3C3C3C] - Color
+@mixin box-rgba($r: 60,
+$g: 3,
+$b: 12,
+$opacity: 0.23,
+$color: #3C3C3C) {
+ background-color: transparent;
+ background-color: rgba($r, $g, $b, $opacity);
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$color}',
+ endColorstr='#{$color}');
+ zoom: 1;
+}
+
+/// Box Shadow
+/// @param {Size} $x [2px] - X
+/// @param {Size} $y [2px] - Y
+/// @param {Size} $blur [5px] - Blur
+/// @param {Color} $color [rgba(0,0,0,.4)] - Color
+/// @param {Boolean} $inset - Inset
+@mixin box-shadow($x: 2px,
+$y: 2px,
+$blur: 5px,
+$color: rgba(0, 0, 0, .4),
+$inset: "") {
+ @if ($inset !="") {
+ @include css3-prefix('box-shadow',
+ $inset $x $y $blur $color);
+ }
+ @else {
+ @include css3-prefix('box-shadow',
+ $x $y $blur $color);
+ }
+}
+
+/// Box Sizing
+/// @param {*} $type [border-box] - Type
+/// @require {mixin} css3-prefix
+@mixin box-sizing($type: border-box) {
+ @include css3-prefix('box-sizing',
+ $type);
+}
+
+/// Columns
+/// @param {Integer} $count [3] - Count
+/// @param {Integer} $gap [10] - Gap
+/// @require {mixin} css3-prefix
+@mixin columns($count: 3,
+$gap: 10) {
+ @include css3-prefix('column-count',
+ $count);
+ @include css3-prefix('column-gap',
+ $gap);
+}
+
+/// Double Borders
+/// @param {Color} $colorOne [#3C3C3C] - Color One
+/// @param {Color} $colorTwo [#999999] - Color Two
+/// @param {Size} $radius [0] - Radius
+/// @require {mixin} css3-prefix
+/// @require {mixin} border-radius
+@mixin double-borders($colorOne: #3C3C3C,
+$colorTwo: #999999,
+$radius: 0) {
+ border: 1px solid $colorOne;
+ @include css3-prefix('box-shadow',
+ 0 0 0 1px $colorTwo);
+ @include border-radius( $radius);
+}
+
+/// Flex
+/// @param {Integer} $value [1] - Value
+/// @require {mixin} css3-prefix
+@mixin flex($value: 1) {
+ @include css3-prefix('box-flex',
+ $value);
+}
+
+/// Flip
+/// @param {Double} $scaleX [-1] - ScaleX
+/// @require {mixin} css3-prefix
+@mixin flip($scaleX: -1) {
+ @include css3-prefix('transform',
+ scaleX($scaleX));
+ filter: FlipH;
+ -ms-filter: "FlipH";
+}
+
+/// Opacity
+/// @param {Double} $opacity [0.5] - Opacity
+/// @require {mixin} css3-prefix
+@mixin opacity($opacity: 0.5) {
+ $opacityMultiplied: ($opacity * 100);
+ filter: alpha(opacity=$opacityMultiplied);
+ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=" + $opacityMultiplied + ")";
+ @include css3-prefix('opacity',
+ $opacity);
+}
+
+/// Outline Radius
+/// @param {Size} $radius [5px] - Radius
+/// @require {mixin} css3-prefix
+@mixin outline-radius($radius: 5px) {
+ @include css3-prefix('outline-radius',
+ $radius);
+}
+
+/// Resize
+/// @param {*} $directoin [both] - Direction
+/// @require {mixin} css3-prefix
+@mixin resize($direction: both) {
+ @include css3-prefix('resize',
+ $direction);
+}
+
+/// Rotate
+///
+/// CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html
+/// @param {Double} $deg [0] - Degree
+/// @param {Double} $m11 [0] - M11
+/// @param {Double} $m12 [0] - M12
+/// @param {Double} $m21 [0] - M21
+/// @param {Double} $m22 [0] - M22
+/// @require {mixin} css3-prefix
+@mixin rotate($deg: 0,
+$m11: 0,
+$m12: 0,
+$m21: 0,
+$m22: 0) {
+ @include css3-prefix('transform',
+ rotate($deg + deg));
+ filter: progid:DXImageTransform.Microsoft.Matrix( M11=#{$m11},
+ M12=#{$m12},
+ M21=#{$m21},
+ M22=#{$m22},
+ sizingMethod='auto expand');
+ zoom: 1;
+}
+
+/// Text Shadow
+/// @param {Size} $x [2px] - X
+/// @param {Size} $y [2px] - Y
+/// @param {Size} $blur [2px] - Blur
+/// @param {Color} $color [rgba(0,0,0,.4)] - Color
+@mixin text-shadow($x: 2px,
+$y: 2px,
+$blur: 5px,
+$color: rgba(0, 0, 0, .4)) {
+ text-shadow: $x $y $blur $color;
+}
+
+/// Transform
+/// @param {List} $params - Params
+/// @require {mixin} css3-prefix
+@mixin transform($params) {
+ @include css3-prefix('transform',
+ $params);
+}
+
+/// Transform-Origin
+/// @param {List} $params - Params
+/// @require {mixin} css3-prefix
+@mixin transform-origin($params) {
+ @include css3-prefix('transform-origin',
+ $params);
+}
+
+// Transform-Style
+/// @param {List} $params - Params
+/// @require {mixin} css3-prefix
+@mixin transform-style($style: preserve-3d) {
+ @include css3-prefix('transform-style',
+ $style);
+}
+
+/// Transition
+/// @param {List} $properties - Properties
+/// @require {mixin} css3-prefix
+@mixin transition($properties...) {
+ @if length($properties)>=1 {
+ @include css3-prefix('transition',
+ $properties);
+ }
+ @else {
+ @include css3-prefix('transition',
+ "all 0.2s ease-in-out 0s");
+ }
+}
+
+/// Triple Borders
+/// @param {Color} $colorOne [#3C3C3C] - Color One
+/// @param {Color} $colorTwo [#999999] - Color Two
+/// @param {Color} $colorThree [#000000] - Color Three
+/// @param {Size} $radius [0] - Radius
+/// @require {mixin} border-radius
+/// @require {mixin} css3-prefix
+@mixin triple-borders($colorOne: #3C3C3C,
+$colorTwo: #999999,
+$colorThree: #000000,
+$radius: 0) {
+ border: 1px solid $colorOne;
+ @include border-radius($radius);
+ @include css3-prefix('box-shadow',
+ "0 0 0 1px #{$colorTwo}, 0 0 0 2px #{$colorThree}");
+}
+
+/// Keyframes
+/// @param {*} $animation-name - Animation name
+/// @content [Animation css]
+@mixin keyframes($animation-name) {
+ @-webkit-keyframes #{$animation-name} {
+ @content;
+ }
+ @-moz-keyframes #{$animation-name} {
+ @content;
+ }
+ @-ms-keyframes #{$animation-name} {
+ @content;
+ }
+ @-o-keyframes #{$animation-name} {
+ @content;
+ }
+ @keyframes #{$animation-name} {
+ @content;
+ }
+}
+
+/// Animation
+/// @param {*} $str - name duration timing-function delay iteration-count direction fill-mode play-state ([http://www.w3schools.com/cssref/css3_pr_animation.asp](http://www.w3schools.com/cssref/css3_pr_animation.asp))
+/// @require {mixin} css3-prefix
+@mixin animation($str) {
+ @include css3-prefix('animation',
+ $str);
+}
+
+// --------------------------------------------------
+// Flexbox SASS mixins
+// The spec: http://www.w3.org/TR/css3-flexbox
+// --------------------------------------------------
+// Flexbox display
+@mixin flexbox() {
+ display: -webkit-box;
+ display: -moz-box;
+ display: -ms-flexbox;
+ display: -webkit-flex;
+ display: flex;
+}
+
+// The 'flex' shorthand
+// - applies to: flex items
+// <positive-number>, initial, auto, or none
+@mixin flex($values) {
+ -webkit-box-flex: $values;
+ -moz-box-flex: $values;
+ -webkit-flex: $values;
+ -ms-flex: $values;
+ flex: $values;
+}
+
+// Flex Flow Direction
+// - applies to: flex containers
+// row | row-reverse | column | column-reverse
+@mixin flex-direction($direction) {
+ -webkit-flex-direction: $direction;
+ -moz-flex-direction: $direction;
+ -ms-flex-direction: $direction;
+ flex-direction: $direction;
+}
+
+// Flex Line Wrapping
+// - applies to: flex containers
+// nowrap | wrap | wrap-reverse
+@mixin flex-wrap($wrap) {
+ -webkit-flex-wrap: $wrap;
+ -moz-flex-wrap: $wrap;
+ -ms-flex-wrap: $wrap;
+ flex-wrap: $wrap;
+}
+
+// Flex Direction and Wrap
+// - applies to: flex containers
+// <flex-direction> || <flex-wrap>
+@mixin flex-flow($flow) {
+ -webkit-flex-flow: $flow;
+ -moz-flex-flow: $flow;
+ -ms-flex-flow: $flow;
+ flex-flow: $flow;
+}
+
+// Display Order
+// - applies to: flex items
+// <integer>
+@mixin order($val) {
+ -webkit-box-ordinal-group: $val;
+ -moz-box-ordinal-group: $val;
+ -ms-flex-order: $val;
+ -webkit-order: $val;
+ order: $val;
+}
+
+// Flex grow factor
+// - applies to: flex items
+// <number>
+@mixin flex-grow($grow) {
+ -webkit-flex-grow: $grow;
+ -moz-flex-grow: $grow;
+ -ms-flex-grow: $grow;
+ flex-grow: $grow;
+}
+
+// Flex shrink
+// - applies to: flex item shrink factor
+// <number>
+@mixin flex-shrink($shrink) {
+ -webkit-flex-shrink: $shrink;
+ -moz-flex-shrink: $shrink;
+ -ms-flex-shrink: $shrink;
+ flex-shrink: $shrink;
+}
+
+// Flex basis
+// - the initial main size of the flex item
+// - applies to: flex itemsnitial main size of the flex item
+// <width>
+@mixin flex-basis($width) {
+ -webkit-flex-basis: $width;
+ -moz-flex-basis: $width;
+ -ms-flex-basis: $width;
+ flex-basis: $width;
+}
+
+// Axis Alignment
+// - applies to: flex containers
+// flex-start | flex-end | center | space-between | space-around
+@mixin justify-content($justify) {
+ -webkit-justify-content: $justify;
+ -moz-justify-content: $justify;
+ -ms-justify-content: $justify;
+ justify-content: $justify;
+ -ms-flex-pack: $justify;
+}
+
+// Packing Flex Lines
+// - applies to: multi-line flex containers
+// flex-start | flex-end | center | space-between | space-around | stretch
+@mixin align-content($align) {
+ -webkit-align-content: $align;
+ -moz-align-content: $align;
+ -ms-align-content: $align;
+ align-content: $align;
+}
+
+// Cross-axis Alignment
+// - applies to: flex containers
+// flex-start | flex-end | center | baseline | stretch
+@mixin align-items($align) {
+ -webkit-align-items: $align;
+ -moz-align-items: $align;
+ -ms-align-items: $align;
+ align-items: $align;
+}
+
+// Cross-axis Alignment
+// - applies to: flex items
+// auto | flex-start | flex-end | center | baseline | stretch
+@mixin align-self($align) {
+ -webkit-align-self: $align;
+ -moz-align-self: $align;
+ -ms-align-self: $align;
+ align-self: $align;
}
\ No newline at end of file
diff --git a/cern_components/patterns/molecules/quote/scss/quote.component.scss b/patterns/molecules/quote/scss/quote.component.scss
similarity index 100%
rename from cern_components/patterns/molecules/quote/scss/quote.component.scss
rename to patterns/molecules/quote/scss/quote.component.scss
diff --git a/cern_components/patterns/molecules/quote/scss/variables.scss b/patterns/molecules/quote/scss/variables.scss
similarity index 100%
rename from cern_components/patterns/molecules/quote/scss/variables.scss
rename to patterns/molecules/quote/scss/variables.scss
diff --git a/cern_components/patterns/molecules/related-card/css/component-related_card.css b/patterns/molecules/related-card/css/component-related_card.css
similarity index 98%
rename from cern_components/patterns/molecules/related-card/css/component-related_card.css
rename to patterns/molecules/related-card/css/component-related_card.css
index c95c8ded..7dd16c49 100755
--- a/cern_components/patterns/molecules/related-card/css/component-related_card.css
+++ b/patterns/molecules/related-card/css/component-related_card.css
@@ -1,430 +1,430 @@
-@font-face {
- font-family: "sourcesans-regular";
- src: url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/regular.eot?") format("eot"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/regular.woff2") format("woff2"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/regular.woff") format("woff"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/regular.ttf") format("truetype"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/regular.svg#sourcesans-regular") format("svg"); }
-@font-face {
- font-family: "sourcesans-semibold";
- src: url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/semibold.eot?") format("eot"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/semibold.woff2") format("woff2"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/semibold.woff") format("woff"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/semibold.ttf") format("truetype"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/semibold.svg#sourcesans-semibold") format("svg"); }
-@font-face {
- font-family: "sourcesans-bold";
- src: url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/bold.eot?") format("eot"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/bold.woff2") format("woff2"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/bold.woff") format("woff"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/bold.ttf") format("truetype"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/bold.svg#sourcesans-bold") format("svg"); }
-@font-face {
- font-family: "sourcesans-light";
- src: url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/light.eot?") format("eot"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/light.woff2") format("woff2"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/light.woff") format("woff"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/light.ttf") format("truetype"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/light.svg#sourcesans-light") format("svg"); }
-@font-face {
- font-family: "opensans-regular";
- src: url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/regular.eot?") format("eot"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/regular.woff2") format("woff2"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/regular.woff") format("woff"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/regular.ttf") format("truetype"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/regular.svg#opensans-regular") format("svg"); }
-@font-face {
- font-family: "opensans-semibold";
- src: url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/semibold.eot?") format("eot"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/semibold.woff2") format("woff2"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/semibold.woff") format("woff"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/semibold.ttf") format("truetype"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/semibold.svg#opensans-semibold") format("svg"); }
-@font-face {
- font-family: "opensans-bold";
- src: url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/bold.eot?") format("eot"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/bold.woff2") format("woff2"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/bold.woff") format("woff"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/bold.ttf") format("truetype"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/bold.svg#opensans-bold") format("svg"); }
-@font-face {
- font-family: "cern-icons";
- src: url("//framework.web.cern.ch/framework/3.0/fonts/cern/cern.eot?") format("eot"), url("//framework.web.cern.ch/framework/3.0/fonts/cern/cern.woff2") format("woff2"), url("//framework.web.cern.ch/framework/3.0/fonts/cern/cern.woff") format("woff"), url("//framework.web.cern.ch/framework/3.0/fonts/cern/cern.ttf") format("truetype"), url("//framework.web.cern.ch/framework/3.0/fonts/cern/cern.svg#cern-icons") format("svg"); }
-.component-related_card {
- display: -webkit-box;
- display: -moz-box;
- display: -ms-flexbox;
- display: -webkit-flex;
- display: flex;
- font-size: 14px;
- font-size: 1.4rem;
- font-family: 'sourcesans-regular';
- position: relative;
- min-height: 210px;
- float: left;
- vertical-align: top;
- max-width: 100%;
- padding: 30px 40px; }
- .component-related_card__wrapper {
- display: -webkit-box;
- display: -moz-box;
- display: -ms-flexbox;
- display: -webkit-flex;
- display: flex;
- -webkit-align-items: center;
- -moz-align-items: center;
- -ms-align-items: center;
- align-items: center;
- -webkit-justify-content: flex-end;
- -moz-justify-content: flex-end;
- -ms-justify-content: flex-end;
- justify-content: flex-end;
- -ms-flex-pack: flex-end;
- -webkit-flex-flow: column;
- -moz-flex-flow: column;
- -ms-flex-flow: column;
- flex-flow: column;
- position: relative;
- z-index: 10;
- height: 150px;
- width: 100%; }
- .component-related_card__content {
- -webkit-align-self: flex-end;
- -moz-align-self: flex-end;
- -ms-align-self: flex-end;
- align-self: flex-end;
- width: 100%; }
- .component-related_card__content__profile {
- margin: 0 0 9px 0;
- border-radius: 50%;
- overflow: hidden;
- width: 55px;
- height: 55px;
- position: relative; }
- .component-related_card__content__profile img {
- position: absolute;
- width: 100%;
- height: auto;
- top: 0;
- bottom: 0;
- right: 0;
- left: 0;
- margin: auto; }
- .component-related_card__content__date {
- padding: 0; }
- .component-related_card__content__date__weekday {
- text-transform: uppercase; }
- .component-related_card__content__date__date {
- font-size: 32px;
- font-family: 'sourcesans-light';
- line-height: 30px;
- text-transform: uppercase; }
- .component-related_card__content__date__date__day {
- font-family: 'sourcesans-bold'; }
- .component-related_card__content__link {
- margin: 0; }
- .component-related_card__content__link h3 {
- font-size: 20px;
- font-size: 2rem;
- font-family: 'sourcesans-semibold';
- line-height: 26px;
- padding: 0;
- margin: 0; }
- .component-related_card__content__link a {
- display: block;
- position: relative;
- text-decoration: none; }
- .component-related_card__content__link a span {
- display: block;
- width: 100%;
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis; }
- .component-related_card__content__link a:hover {
- text-decoration: none; }
- .component-related_card__content__link a:before {
- content: '\j';
- font-size: 40px;
- font-size: 4rem;
- -webkit-transition: all 0.6s ease-in-out 0s;
- -khtml-transition: all 0.6s ease-in-out 0s;
- -moz-transition: all 0.6s ease-in-out 0s;
- -ms-transition: all 0.6s ease-in-out 0s;
- -o-transition: all 0.6s ease-in-out 0s;
- transition: all 0.6s ease-in-out 0s;
- font-family: "cern-icons";
- -moz-osx-font-smoothing: grayscale;
- -webkit-font-smoothing: antialiased;
- display: inline-block;
- vertical-align: bottom;
- position: absolute;
- top: -1px;
- left: -10px;
- line-height: 25px;
- width: 12px;
- text-indent: -25px; }
- .component-related_card__content__link a:hover:before {
- left: 0; }
- .component-related_card__content__text {
- font-family: 'sourcesans-light';
- padding: 0;
- line-height: 18px;
- overflow: hidden;
- word-break: break-word; }
- .component-related_card__content__text h2:first-child,
- .component-related_card__content__text h3:first-child,
- .component-related_card__content__text h4:first-child,
- .component-related_card__content__text h5:first-child,
- .component-related_card__content__text h6:first-child {
- margin-top: 0; }
- .component-related_card__content__text p {
- margin: 0 0 5px; }
- .component-related_card__content__text p:last-child {
- margin: 0; }
- .component-related_card__content__format {
- font-family: 'sourcesans-light'; }
- .component-related_card__content .preview-card__date {
- font-family: 'sourcesans-light'; }
- .component-related_card.portrait {
- width: calc(33.3% - 8px);
- min-height: 428px;
- margin: 4px; }
- .component-related_card.portrait .component-related_card__wrapper {
- height: 368px; }
- @media screen and (max-width: 991px) {
- .component-related_card.portrait {
- width: calc(50% - 8px); } }
- @media screen and (max-width: 767px) {
- .component-related_card.portrait {
- margin: 4px 0;
- min-height: 210px;
- width: 100%; }
- .component-related_card.portrait .component-related_card__wrapper {
- height: 150px; } }
- .component-related_card.portrait:hover .component-related_card__veil {
- opacity: 0; }
- .component-related_card.simple-display {
- width: calc(33.3% - 8px);
- min-height: 210px;
- margin: 4px; }
- @media screen and (max-width: 991px) {
- .component-related_card.simple-display {
- width: calc(50% - 8px); } }
- @media screen and (max-width: 767px) {
- .component-related_card.simple-display {
- margin: 4px 0;
- width: 100%; } }
- .component-related_card.simple-display:hover .component-related_card__veil {
- opacity: 0; }
- .component-related_card.portrait.box-force-full-width {
- width: calc(100% - 8px);
- min-height: 428px;
- margin: 4px; }
- @media screen and (max-width: 991px) {
- .component-related_card.portrait.box-force-full-width {
- width: calc(100% - 8px); } }
- @media screen and (max-width: 767px) {
- .component-related_card.portrait.box-force-full-width {
- margin: 4px 0;
- width: 100%; } }
- .component-related_card.portrait.box-force-full-width:hover .component-related_card__veil {
- opacity: 0; }
- .component-related_card.simple-display.box-force-full-width, .component-related_card:not(.portrait):not(.simple-display) {
- width: calc(100% - 8px);
- min-height: 210px;
- margin: 4px; }
- @media screen and (max-width: 991px) {
- .component-related_card.simple-display.box-force-full-width, .component-related_card:not(.portrait):not(.simple-display) {
- width: calc(100% - 8px); } }
- @media screen and (max-width: 767px) {
- .component-related_card.simple-display.box-force-full-width, .component-related_card:not(.portrait):not(.simple-display) {
- margin: 4px 0;
- width: 100%; } }
- .component-related_card.simple-display.box-force-full-width:hover .component-related_card__veil, .component-related_card:not(.portrait):not(.simple-display):hover .component-related_card__veil {
- opacity: 0; }
- .component-related_card *,
- .component-related_card *::after,
- .component-related_card *::before {
- box-sizing: border-box; }
- .component-related_card .material-icons {
- display: none; }
- .component-related_card__icon.video {
- font-family: 'Material Icons';
- width: 30px;
- height: 30px;
- margin: auto;
- position: absolute;
- top: 0;
- left: 0;
- bottom: 0;
- right: 0;
- z-index: 1; }
- .component-related_card__icon.video .type_video {
- font-size: 50px;
- font-size: 5rem;
- display: block; }
- .component-related_card__icon.image {
- font-family: 'Material Icons';
- width: 30px;
- height: 30px;
- margin: auto;
- position: absolute;
- top: 0;
- left: 0;
- bottom: 0;
- right: 0;
- z-index: 1; }
- .component-related_card__icon.image .type_image {
- font-size: 50px;
- font-size: 5rem;
- display: block; }
- .component-related_card__veil {
- -webkit-transition: all 0.4s ease-in-out 0s;
- -khtml-transition: all 0.4s ease-in-out 0s;
- -moz-transition: all 0.4s ease-in-out 0s;
- -ms-transition: all 0.4s ease-in-out 0s;
- -o-transition: all 0.4s ease-in-out 0s;
- transition: all 0.4s ease-in-out 0s;
- background-color: rgba(0, 0, 0, 0);
- background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.9)));
- background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.9));
- background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.9));
- background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.9));
- background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.9));
- background-image: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.9));
- filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='rgba(0, 0, 0, 0)', endColorStr='rgba(0, 0, 0, 0.9)');
- position: absolute;
- height: 100%;
- width: 100%;
- top: 0;
- left: 0;
- z-index: 0; }
-
-.component-row__sidebar-right .component-related_card.portrait,
-.component-row__sidebar-left .component-related_card.portrait {
- margin: 4px 4px 4px 0px;
- width: 100%;
- min-height: 210px; }
- .component-row__sidebar-right .component-related_card.portrait .component-related_card__wrapper,
- .component-row__sidebar-left .component-related_card.portrait .component-related_card__wrapper {
- height: 150px; }
- @media screen and (max-width: 991px) {
- .component-row__sidebar-right .component-related_card.portrait,
- .component-row__sidebar-left .component-related_card.portrait {
- margin: 4px;
- width: calc(100% - 8px); } }
- @media screen and (max-width: 767px) {
- .component-row__sidebar-right .component-related_card.portrait,
- .component-row__sidebar-left .component-related_card.portrait {
- margin: 4px 0;
- width: 100%; } }
-.component-row__sidebar-right .component-related_card.simple-display,
-.component-row__sidebar-left .component-related_card.simple-display {
- margin: 4px 4px 4px 0px;
- width: 100%;
- min-height: 210px; }
- .component-row__sidebar-right .component-related_card.simple-display .component-related_card__wrapper,
- .component-row__sidebar-left .component-related_card.simple-display .component-related_card__wrapper {
- height: 150px; }
- @media screen and (max-width: 991px) {
- .component-row__sidebar-right .component-related_card.simple-display,
- .component-row__sidebar-left .component-related_card.simple-display {
- margin: 4px;
- width: calc(100% - 8px); } }
- @media screen and (max-width: 767px) {
- .component-row__sidebar-right .component-related_card.simple-display,
- .component-row__sidebar-left .component-related_card.simple-display {
- margin: 4px 0;
- width: 100%; } }
-.component-row__sidebar-right .component-related_card:not(.portrait):not(.simple-display),
-.component-row__sidebar-left .component-related_card:not(.portrait):not(.simple-display) {
- margin: 4px 4px 4px 0px;
- width: 100%;
- min-height: 210px; }
- .component-row__sidebar-right .component-related_card:not(.portrait):not(.simple-display) .component-related_card__wrapper,
- .component-row__sidebar-left .component-related_card:not(.portrait):not(.simple-display) .component-related_card__wrapper {
- height: 150px; }
- @media screen and (max-width: 991px) {
- .component-row__sidebar-right .component-related_card:not(.portrait):not(.simple-display),
- .component-row__sidebar-left .component-related_card:not(.portrait):not(.simple-display) {
- margin: 4px;
- width: calc(100% - 8px); } }
- @media screen and (max-width: 767px) {
- .component-row__sidebar-right .component-related_card:not(.portrait):not(.simple-display),
- .component-row__sidebar-left .component-related_card:not(.portrait):not(.simple-display) {
- margin: 4px 0;
- width: 100%; } }
-
-@media screen and (min-width: 992px) {
- .component-row.box-effects .component-row__center .component-related_card {
- -webkit-transition: all 0.4s ease-in-out 0s;
- -khtml-transition: all 0.4s ease-in-out 0s;
- -moz-transition: all 0.4s ease-in-out 0s;
- -ms-transition: all 0.4s ease-in-out 0s;
- -o-transition: all 0.4s ease-in-out 0s;
- transition: all 0.4s ease-in-out 0s; }
- .component-row.box-effects .component-row__center .component-related_card.portrait {
- width: calc(33.3% - 38px); } }
- @media screen and (min-width: 992px) and (max-width: 991px) {
- .component-row.box-effects .component-row__center .component-related_card.portrait {
- width: calc(50% - 38px); } }
- @media screen and (min-width: 992px) and (max-width: 767px) {
- .component-row.box-effects .component-row__center .component-related_card.portrait {
- width: 100% !important; } }
-@media screen and (min-width: 992px) {
- .component-row.box-effects .component-row__center .component-related_card.portrait.from-smaller {
- -webkit-transition: all 0.4s ease-in-out 0s;
- -khtml-transition: all 0.4s ease-in-out 0s;
- -moz-transition: all 0.4s ease-in-out 0s;
- -ms-transition: all 0.4s ease-in-out 0s;
- -o-transition: all 0.4s ease-in-out 0s;
- transition: all 0.4s ease-in-out 0s; }
- .component-row.box-effects .component-row__center .component-related_card.portrait.from-bigger, .component-row.box-effects .component-row__center .component-related_card.portrait.from-bigger.from-smaller {
- -webkit-transition: all 0.4s ease-in-out 0s;
- -khtml-transition: all 0.4s ease-in-out 0s;
- -moz-transition: all 0.4s ease-in-out 0s;
- -ms-transition: all 0.4s ease-in-out 0s;
- -o-transition: all 0.4s ease-in-out 0s;
- transition: all 0.4s ease-in-out 0s; }
- .component-row.box-effects .component-row__center .component-related_card.portrait.make-bigger {
- -webkit-transition: all 0.4s ease-in-out 0s;
- -khtml-transition: all 0.4s ease-in-out 0s;
- -moz-transition: all 0.4s ease-in-out 0s;
- -ms-transition: all 0.4s ease-in-out 0s;
- -o-transition: all 0.4s ease-in-out 0s;
- transition: all 0.4s ease-in-out 0s;
- width: calc(43.3% - 38px) !important; }
- .component-row.box-effects .component-row__center .component-related_card.portrait.make-smaller {
- -webkit-transition: all 0.4s ease-in-out 0s;
- -khtml-transition: all 0.4s ease-in-out 0s;
- -moz-transition: all 0.4s ease-in-out 0s;
- -ms-transition: all 0.4s ease-in-out 0s;
- -o-transition: all 0.4s ease-in-out 0s;
- transition: all 0.4s ease-in-out 0s;
- width: calc(23.3% - 38px) !important; }
- .component-row.box-effects .component-row__center .component-related_card.portrait:hover .component-preview-cards__veil {
- opacity: 0; }
- .component-row.box-effects .component-row__center .component-related_card.simple-display {
- width: calc(33.3% - 38px); } }
- @media screen and (min-width: 992px) and (max-width: 991px) {
- .component-row.box-effects .component-row__center .component-related_card.simple-display {
- width: calc(50% - 38px); } }
- @media screen and (min-width: 992px) and (max-width: 767px) {
- .component-row.box-effects .component-row__center .component-related_card.simple-display {
- width: 100% !important; } }
-@media screen and (min-width: 992px) {
- .component-row.box-effects .component-row__center .component-related_card.simple-display.from-smaller {
- -webkit-transition: all 0.4s ease-in-out 0s;
- -khtml-transition: all 0.4s ease-in-out 0s;
- -moz-transition: all 0.4s ease-in-out 0s;
- -ms-transition: all 0.4s ease-in-out 0s;
- -o-transition: all 0.4s ease-in-out 0s;
- transition: all 0.4s ease-in-out 0s; }
- .component-row.box-effects .component-row__center .component-related_card.simple-display.from-bigger, .component-row.box-effects .component-row__center .component-related_card.simple-display.from-bigger.from-smaller {
- -webkit-transition: all 0.4s ease-in-out 0s;
- -khtml-transition: all 0.4s ease-in-out 0s;
- -moz-transition: all 0.4s ease-in-out 0s;
- -ms-transition: all 0.4s ease-in-out 0s;
- -o-transition: all 0.4s ease-in-out 0s;
- transition: all 0.4s ease-in-out 0s; }
- .component-row.box-effects .component-row__center .component-related_card.simple-display.make-bigger {
- -webkit-transition: all 0.4s ease-in-out 0s;
- -khtml-transition: all 0.4s ease-in-out 0s;
- -moz-transition: all 0.4s ease-in-out 0s;
- -ms-transition: all 0.4s ease-in-out 0s;
- -o-transition: all 0.4s ease-in-out 0s;
- transition: all 0.4s ease-in-out 0s;
- width: calc(43.3% - 38px) !important; }
- .component-row.box-effects .component-row__center .component-related_card.simple-display.make-smaller {
- -webkit-transition: all 0.4s ease-in-out 0s;
- -khtml-transition: all 0.4s ease-in-out 0s;
- -moz-transition: all 0.4s ease-in-out 0s;
- -ms-transition: all 0.4s ease-in-out 0s;
- -o-transition: all 0.4s ease-in-out 0s;
- transition: all 0.4s ease-in-out 0s;
- width: calc(23.3% - 38px) !important; }
- .component-row.box-effects .component-row__center .component-related_card.simple-display:hover .component-preview-cards__veil {
- opacity: 0; }
- .component-row.box-effects .component-row__center .component-related_card.portrait.box-force-full-width, .component-row.box-effects .component-row__center .component-related_card.simple-display.box-force-full-width, .component-row.box-effects .component-row__center .component-related_card:not(.portrait):not(.simple-display) {
- width: calc(100% - 98px); } }
- @media screen and (min-width: 992px) and (max-width: 991px) {
- .component-row.box-effects .component-row__center .component-related_card.portrait.box-force-full-width, .component-row.box-effects .component-row__center .component-related_card.simple-display.box-force-full-width, .component-row.box-effects .component-row__center .component-related_card:not(.portrait):not(.simple-display) {
- width: calc(100% - 98px); } }
- @media screen and (min-width: 992px) and (max-width: 767px) {
- .component-row.box-effects .component-row__center .component-related_card.portrait.box-force-full-width, .component-row.box-effects .component-row__center .component-related_card.simple-display.box-force-full-width, .component-row.box-effects .component-row__center .component-related_card:not(.portrait):not(.simple-display) {
- width: 100% !important; } }
-@media screen and (min-width: 992px) {
- .component-row.box-effects .component-row__center .component-related_card.portrait.box-force-full-width:hover .component-preview-cards__veil, .component-row.box-effects .component-row__center .component-related_card.simple-display.box-force-full-width:hover .component-preview-cards__veil, .component-row.box-effects .component-row__center .component-related_card:not(.portrait):not(.simple-display):hover .component-preview-cards__veil {
- opacity: 0; } }
+@font-face {
+ font-family: "sourcesans-regular";
+ src: url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/regular.eot?") format("eot"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/regular.woff2") format("woff2"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/regular.woff") format("woff"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/regular.ttf") format("truetype"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/regular.svg#sourcesans-regular") format("svg"); }
+@font-face {
+ font-family: "sourcesans-semibold";
+ src: url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/semibold.eot?") format("eot"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/semibold.woff2") format("woff2"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/semibold.woff") format("woff"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/semibold.ttf") format("truetype"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/semibold.svg#sourcesans-semibold") format("svg"); }
+@font-face {
+ font-family: "sourcesans-bold";
+ src: url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/bold.eot?") format("eot"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/bold.woff2") format("woff2"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/bold.woff") format("woff"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/bold.ttf") format("truetype"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/bold.svg#sourcesans-bold") format("svg"); }
+@font-face {
+ font-family: "sourcesans-light";
+ src: url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/light.eot?") format("eot"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/light.woff2") format("woff2"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/light.woff") format("woff"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/light.ttf") format("truetype"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/light.svg#sourcesans-light") format("svg"); }
+@font-face {
+ font-family: "opensans-regular";
+ src: url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/regular.eot?") format("eot"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/regular.woff2") format("woff2"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/regular.woff") format("woff"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/regular.ttf") format("truetype"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/regular.svg#opensans-regular") format("svg"); }
+@font-face {
+ font-family: "opensans-semibold";
+ src: url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/semibold.eot?") format("eot"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/semibold.woff2") format("woff2"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/semibold.woff") format("woff"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/semibold.ttf") format("truetype"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/semibold.svg#opensans-semibold") format("svg"); }
+@font-face {
+ font-family: "opensans-bold";
+ src: url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/bold.eot?") format("eot"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/bold.woff2") format("woff2"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/bold.woff") format("woff"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/bold.ttf") format("truetype"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/bold.svg#opensans-bold") format("svg"); }
+@font-face {
+ font-family: "cern-icons";
+ src: url("//framework.web.cern.ch/framework/3.0/fonts/cern/cern.eot?") format("eot"), url("//framework.web.cern.ch/framework/3.0/fonts/cern/cern.woff2") format("woff2"), url("//framework.web.cern.ch/framework/3.0/fonts/cern/cern.woff") format("woff"), url("//framework.web.cern.ch/framework/3.0/fonts/cern/cern.ttf") format("truetype"), url("//framework.web.cern.ch/framework/3.0/fonts/cern/cern.svg#cern-icons") format("svg"); }
+.component-related_card {
+ display: -webkit-box;
+ display: -moz-box;
+ display: -ms-flexbox;
+ display: -webkit-flex;
+ display: flex;
+ font-size: 14px;
+ font-size: 1.4rem;
+ font-family: 'sourcesans-regular';
+ position: relative;
+ min-height: 210px;
+ float: left;
+ vertical-align: top;
+ max-width: 100%;
+ padding: 30px 40px; }
+ .component-related_card__wrapper {
+ display: -webkit-box;
+ display: -moz-box;
+ display: -ms-flexbox;
+ display: -webkit-flex;
+ display: flex;
+ -webkit-align-items: center;
+ -moz-align-items: center;
+ -ms-align-items: center;
+ align-items: center;
+ -webkit-justify-content: flex-end;
+ -moz-justify-content: flex-end;
+ -ms-justify-content: flex-end;
+ justify-content: flex-end;
+ -ms-flex-pack: flex-end;
+ -webkit-flex-flow: column;
+ -moz-flex-flow: column;
+ -ms-flex-flow: column;
+ flex-flow: column;
+ position: relative;
+ z-index: 10;
+ height: 150px;
+ width: 100%; }
+ .component-related_card__content {
+ -webkit-align-self: flex-end;
+ -moz-align-self: flex-end;
+ -ms-align-self: flex-end;
+ align-self: flex-end;
+ width: 100%; }
+ .component-related_card__content__profile {
+ margin: 0 0 9px 0;
+ border-radius: 50%;
+ overflow: hidden;
+ width: 55px;
+ height: 55px;
+ position: relative; }
+ .component-related_card__content__profile img {
+ position: absolute;
+ width: 100%;
+ height: auto;
+ top: 0;
+ bottom: 0;
+ right: 0;
+ left: 0;
+ margin: auto; }
+ .component-related_card__content__date {
+ padding: 0; }
+ .component-related_card__content__date__weekday {
+ text-transform: uppercase; }
+ .component-related_card__content__date__date {
+ font-size: 32px;
+ font-family: 'sourcesans-light';
+ line-height: 30px;
+ text-transform: uppercase; }
+ .component-related_card__content__date__date__day {
+ font-family: 'sourcesans-bold'; }
+ .component-related_card__content__link {
+ margin: 0; }
+ .component-related_card__content__link h3 {
+ font-size: 20px;
+ font-size: 2rem;
+ font-family: 'sourcesans-semibold';
+ line-height: 26px;
+ padding: 0;
+ margin: 0; }
+ .component-related_card__content__link a {
+ display: block;
+ position: relative;
+ text-decoration: none; }
+ .component-related_card__content__link a span {
+ display: block;
+ width: 100%;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis; }
+ .component-related_card__content__link a:hover {
+ text-decoration: none; }
+ .component-related_card__content__link a:before {
+ content: '\j';
+ font-size: 40px;
+ font-size: 4rem;
+ -webkit-transition: all 0.6s ease-in-out 0s;
+ -khtml-transition: all 0.6s ease-in-out 0s;
+ -moz-transition: all 0.6s ease-in-out 0s;
+ -ms-transition: all 0.6s ease-in-out 0s;
+ -o-transition: all 0.6s ease-in-out 0s;
+ transition: all 0.6s ease-in-out 0s;
+ font-family: "cern-icons";
+ -moz-osx-font-smoothing: grayscale;
+ -webkit-font-smoothing: antialiased;
+ display: inline-block;
+ vertical-align: bottom;
+ position: absolute;
+ top: -1px;
+ left: -10px;
+ line-height: 25px;
+ width: 12px;
+ text-indent: -25px; }
+ .component-related_card__content__link a:hover:before {
+ left: 0; }
+ .component-related_card__content__text {
+ font-family: 'sourcesans-light';
+ padding: 0;
+ line-height: 18px;
+ overflow: hidden;
+ word-break: break-word; }
+ .component-related_card__content__text h2:first-child,
+ .component-related_card__content__text h3:first-child,
+ .component-related_card__content__text h4:first-child,
+ .component-related_card__content__text h5:first-child,
+ .component-related_card__content__text h6:first-child {
+ margin-top: 0; }
+ .component-related_card__content__text p {
+ margin: 0 0 5px; }
+ .component-related_card__content__text p:last-child {
+ margin: 0; }
+ .component-related_card__content__format {
+ font-family: 'sourcesans-light'; }
+ .component-related_card__content .preview-card__date {
+ font-family: 'sourcesans-light'; }
+ .component-related_card.portrait {
+ width: calc(33.3% - 8px);
+ min-height: 428px;
+ margin: 4px; }
+ .component-related_card.portrait .component-related_card__wrapper {
+ height: 368px; }
+ @media screen and (max-width: 991px) {
+ .component-related_card.portrait {
+ width: calc(50% - 8px); } }
+ @media screen and (max-width: 767px) {
+ .component-related_card.portrait {
+ margin: 4px 0;
+ min-height: 210px;
+ width: 100%; }
+ .component-related_card.portrait .component-related_card__wrapper {
+ height: 150px; } }
+ .component-related_card.portrait:hover .component-related_card__veil {
+ opacity: 0; }
+ .component-related_card.simple-display {
+ width: calc(33.3% - 8px);
+ min-height: 210px;
+ margin: 4px; }
+ @media screen and (max-width: 991px) {
+ .component-related_card.simple-display {
+ width: calc(50% - 8px); } }
+ @media screen and (max-width: 767px) {
+ .component-related_card.simple-display {
+ margin: 4px 0;
+ width: 100%; } }
+ .component-related_card.simple-display:hover .component-related_card__veil {
+ opacity: 0; }
+ .component-related_card.portrait.box-force-full-width {
+ width: calc(100% - 8px);
+ min-height: 428px;
+ margin: 4px; }
+ @media screen and (max-width: 991px) {
+ .component-related_card.portrait.box-force-full-width {
+ width: calc(100% - 8px); } }
+ @media screen and (max-width: 767px) {
+ .component-related_card.portrait.box-force-full-width {
+ margin: 4px 0;
+ width: 100%; } }
+ .component-related_card.portrait.box-force-full-width:hover .component-related_card__veil {
+ opacity: 0; }
+ .component-related_card.simple-display.box-force-full-width, .component-related_card:not(.portrait):not(.simple-display) {
+ width: calc(100% - 8px);
+ min-height: 210px;
+ margin: 4px; }
+ @media screen and (max-width: 991px) {
+ .component-related_card.simple-display.box-force-full-width, .component-related_card:not(.portrait):not(.simple-display) {
+ width: calc(100% - 8px); } }
+ @media screen and (max-width: 767px) {
+ .component-related_card.simple-display.box-force-full-width, .component-related_card:not(.portrait):not(.simple-display) {
+ margin: 4px 0;
+ width: 100%; } }
+ .component-related_card.simple-display.box-force-full-width:hover .component-related_card__veil, .component-related_card:not(.portrait):not(.simple-display):hover .component-related_card__veil {
+ opacity: 0; }
+ .component-related_card *,
+ .component-related_card *::after,
+ .component-related_card *::before {
+ box-sizing: border-box; }
+ .component-related_card .material-icons {
+ display: none; }
+ .component-related_card__icon.video {
+ font-family: 'Material Icons';
+ width: 30px;
+ height: 30px;
+ margin: auto;
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+ right: 0;
+ z-index: 1; }
+ .component-related_card__icon.video .type_video {
+ font-size: 50px;
+ font-size: 5rem;
+ display: block; }
+ .component-related_card__icon.image {
+ font-family: 'Material Icons';
+ width: 30px;
+ height: 30px;
+ margin: auto;
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+ right: 0;
+ z-index: 1; }
+ .component-related_card__icon.image .type_image {
+ font-size: 50px;
+ font-size: 5rem;
+ display: block; }
+ .component-related_card__veil {
+ -webkit-transition: all 0.4s ease-in-out 0s;
+ -khtml-transition: all 0.4s ease-in-out 0s;
+ -moz-transition: all 0.4s ease-in-out 0s;
+ -ms-transition: all 0.4s ease-in-out 0s;
+ -o-transition: all 0.4s ease-in-out 0s;
+ transition: all 0.4s ease-in-out 0s;
+ background-color: rgba(0, 0, 0, 0);
+ background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.9)));
+ background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.9));
+ background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.9));
+ background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.9));
+ background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.9));
+ background-image: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.9));
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='rgba(0, 0, 0, 0)', endColorStr='rgba(0, 0, 0, 0.9)');
+ position: absolute;
+ height: 100%;
+ width: 100%;
+ top: 0;
+ left: 0;
+ z-index: 0; }
+
+.component-row__sidebar-right .component-related_card.portrait,
+.component-row__sidebar-left .component-related_card.portrait {
+ margin: 4px 4px 4px 0px;
+ width: 100%;
+ min-height: 210px; }
+ .component-row__sidebar-right .component-related_card.portrait .component-related_card__wrapper,
+ .component-row__sidebar-left .component-related_card.portrait .component-related_card__wrapper {
+ height: 150px; }
+ @media screen and (max-width: 991px) {
+ .component-row__sidebar-right .component-related_card.portrait,
+ .component-row__sidebar-left .component-related_card.portrait {
+ margin: 4px;
+ width: calc(100% - 8px); } }
+ @media screen and (max-width: 767px) {
+ .component-row__sidebar-right .component-related_card.portrait,
+ .component-row__sidebar-left .component-related_card.portrait {
+ margin: 4px 0;
+ width: 100%; } }
+.component-row__sidebar-right .component-related_card.simple-display,
+.component-row__sidebar-left .component-related_card.simple-display {
+ margin: 4px 4px 4px 0px;
+ width: 100%;
+ min-height: 210px; }
+ .component-row__sidebar-right .component-related_card.simple-display .component-related_card__wrapper,
+ .component-row__sidebar-left .component-related_card.simple-display .component-related_card__wrapper {
+ height: 150px; }
+ @media screen and (max-width: 991px) {
+ .component-row__sidebar-right .component-related_card.simple-display,
+ .component-row__sidebar-left .component-related_card.simple-display {
+ margin: 4px;
+ width: calc(100% - 8px); } }
+ @media screen and (max-width: 767px) {
+ .component-row__sidebar-right .component-related_card.simple-display,
+ .component-row__sidebar-left .component-related_card.simple-display {
+ margin: 4px 0;
+ width: 100%; } }
+.component-row__sidebar-right .component-related_card:not(.portrait):not(.simple-display),
+.component-row__sidebar-left .component-related_card:not(.portrait):not(.simple-display) {
+ margin: 4px 4px 4px 0px;
+ width: 100%;
+ min-height: 210px; }
+ .component-row__sidebar-right .component-related_card:not(.portrait):not(.simple-display) .component-related_card__wrapper,
+ .component-row__sidebar-left .component-related_card:not(.portrait):not(.simple-display) .component-related_card__wrapper {
+ height: 150px; }
+ @media screen and (max-width: 991px) {
+ .component-row__sidebar-right .component-related_card:not(.portrait):not(.simple-display),
+ .component-row__sidebar-left .component-related_card:not(.portrait):not(.simple-display) {
+ margin: 4px;
+ width: calc(100% - 8px); } }
+ @media screen and (max-width: 767px) {
+ .component-row__sidebar-right .component-related_card:not(.portrait):not(.simple-display),
+ .component-row__sidebar-left .component-related_card:not(.portrait):not(.simple-display) {
+ margin: 4px 0;
+ width: 100%; } }
+
+@media screen and (min-width: 992px) {
+ .component-row.box-effects .component-row__center .component-related_card {
+ -webkit-transition: all 0.4s ease-in-out 0s;
+ -khtml-transition: all 0.4s ease-in-out 0s;
+ -moz-transition: all 0.4s ease-in-out 0s;
+ -ms-transition: all 0.4s ease-in-out 0s;
+ -o-transition: all 0.4s ease-in-out 0s;
+ transition: all 0.4s ease-in-out 0s; }
+ .component-row.box-effects .component-row__center .component-related_card.portrait {
+ width: calc(33.3% - 38px); } }
+ @media screen and (min-width: 992px) and (max-width: 991px) {
+ .component-row.box-effects .component-row__center .component-related_card.portrait {
+ width: calc(50% - 38px); } }
+ @media screen and (min-width: 992px) and (max-width: 767px) {
+ .component-row.box-effects .component-row__center .component-related_card.portrait {
+ width: 100% !important; } }
+@media screen and (min-width: 992px) {
+ .component-row.box-effects .component-row__center .component-related_card.portrait.from-smaller {
+ -webkit-transition: all 0.4s ease-in-out 0s;
+ -khtml-transition: all 0.4s ease-in-out 0s;
+ -moz-transition: all 0.4s ease-in-out 0s;
+ -ms-transition: all 0.4s ease-in-out 0s;
+ -o-transition: all 0.4s ease-in-out 0s;
+ transition: all 0.4s ease-in-out 0s; }
+ .component-row.box-effects .component-row__center .component-related_card.portrait.from-bigger, .component-row.box-effects .component-row__center .component-related_card.portrait.from-bigger.from-smaller {
+ -webkit-transition: all 0.4s ease-in-out 0s;
+ -khtml-transition: all 0.4s ease-in-out 0s;
+ -moz-transition: all 0.4s ease-in-out 0s;
+ -ms-transition: all 0.4s ease-in-out 0s;
+ -o-transition: all 0.4s ease-in-out 0s;
+ transition: all 0.4s ease-in-out 0s; }
+ .component-row.box-effects .component-row__center .component-related_card.portrait.make-bigger {
+ -webkit-transition: all 0.4s ease-in-out 0s;
+ -khtml-transition: all 0.4s ease-in-out 0s;
+ -moz-transition: all 0.4s ease-in-out 0s;
+ -ms-transition: all 0.4s ease-in-out 0s;
+ -o-transition: all 0.4s ease-in-out 0s;
+ transition: all 0.4s ease-in-out 0s;
+ width: calc(43.3% - 38px) !important; }
+ .component-row.box-effects .component-row__center .component-related_card.portrait.make-smaller {
+ -webkit-transition: all 0.4s ease-in-out 0s;
+ -khtml-transition: all 0.4s ease-in-out 0s;
+ -moz-transition: all 0.4s ease-in-out 0s;
+ -ms-transition: all 0.4s ease-in-out 0s;
+ -o-transition: all 0.4s ease-in-out 0s;
+ transition: all 0.4s ease-in-out 0s;
+ width: calc(23.3% - 38px) !important; }
+ .component-row.box-effects .component-row__center .component-related_card.portrait:hover .component-preview-cards__veil {
+ opacity: 0; }
+ .component-row.box-effects .component-row__center .component-related_card.simple-display {
+ width: calc(33.3% - 38px); } }
+ @media screen and (min-width: 992px) and (max-width: 991px) {
+ .component-row.box-effects .component-row__center .component-related_card.simple-display {
+ width: calc(50% - 38px); } }
+ @media screen and (min-width: 992px) and (max-width: 767px) {
+ .component-row.box-effects .component-row__center .component-related_card.simple-display {
+ width: 100% !important; } }
+@media screen and (min-width: 992px) {
+ .component-row.box-effects .component-row__center .component-related_card.simple-display.from-smaller {
+ -webkit-transition: all 0.4s ease-in-out 0s;
+ -khtml-transition: all 0.4s ease-in-out 0s;
+ -moz-transition: all 0.4s ease-in-out 0s;
+ -ms-transition: all 0.4s ease-in-out 0s;
+ -o-transition: all 0.4s ease-in-out 0s;
+ transition: all 0.4s ease-in-out 0s; }
+ .component-row.box-effects .component-row__center .component-related_card.simple-display.from-bigger, .component-row.box-effects .component-row__center .component-related_card.simple-display.from-bigger.from-smaller {
+ -webkit-transition: all 0.4s ease-in-out 0s;
+ -khtml-transition: all 0.4s ease-in-out 0s;
+ -moz-transition: all 0.4s ease-in-out 0s;
+ -ms-transition: all 0.4s ease-in-out 0s;
+ -o-transition: all 0.4s ease-in-out 0s;
+ transition: all 0.4s ease-in-out 0s; }
+ .component-row.box-effects .component-row__center .component-related_card.simple-display.make-bigger {
+ -webkit-transition: all 0.4s ease-in-out 0s;
+ -khtml-transition: all 0.4s ease-in-out 0s;
+ -moz-transition: all 0.4s ease-in-out 0s;
+ -ms-transition: all 0.4s ease-in-out 0s;
+ -o-transition: all 0.4s ease-in-out 0s;
+ transition: all 0.4s ease-in-out 0s;
+ width: calc(43.3% - 38px) !important; }
+ .component-row.box-effects .component-row__center .component-related_card.simple-display.make-smaller {
+ -webkit-transition: all 0.4s ease-in-out 0s;
+ -khtml-transition: all 0.4s ease-in-out 0s;
+ -moz-transition: all 0.4s ease-in-out 0s;
+ -ms-transition: all 0.4s ease-in-out 0s;
+ -o-transition: all 0.4s ease-in-out 0s;
+ transition: all 0.4s ease-in-out 0s;
+ width: calc(23.3% - 38px) !important; }
+ .component-row.box-effects .component-row__center .component-related_card.simple-display:hover .component-preview-cards__veil {
+ opacity: 0; }
+ .component-row.box-effects .component-row__center .component-related_card.portrait.box-force-full-width, .component-row.box-effects .component-row__center .component-related_card.simple-display.box-force-full-width, .component-row.box-effects .component-row__center .component-related_card:not(.portrait):not(.simple-display) {
+ width: calc(100% - 98px); } }
+ @media screen and (min-width: 992px) and (max-width: 991px) {
+ .component-row.box-effects .component-row__center .component-related_card.portrait.box-force-full-width, .component-row.box-effects .component-row__center .component-related_card.simple-display.box-force-full-width, .component-row.box-effects .component-row__center .component-related_card:not(.portrait):not(.simple-display) {
+ width: calc(100% - 98px); } }
+ @media screen and (min-width: 992px) and (max-width: 767px) {
+ .component-row.box-effects .component-row__center .component-related_card.portrait.box-force-full-width, .component-row.box-effects .component-row__center .component-related_card.simple-display.box-force-full-width, .component-row.box-effects .component-row__center .component-related_card:not(.portrait):not(.simple-display) {
+ width: 100% !important; } }
+@media screen and (min-width: 992px) {
+ .component-row.box-effects .component-row__center .component-related_card.portrait.box-force-full-width:hover .component-preview-cards__veil, .component-row.box-effects .component-row__center .component-related_card.simple-display.box-force-full-width:hover .component-preview-cards__veil, .component-row.box-effects .component-row__center .component-related_card:not(.portrait):not(.simple-display):hover .component-preview-cards__veil {
+ opacity: 0; } }
diff --git a/cern_components/patterns/molecules/related-card/css/component-related_card.css.map b/patterns/molecules/related-card/css/component-related_card.css.map
similarity index 100%
rename from cern_components/patterns/molecules/related-card/css/component-related_card.css.map
rename to patterns/molecules/related-card/css/component-related_card.css.map
diff --git a/cern_components/patterns/molecules/related-card/related-card.html.twig b/patterns/molecules/related-card/related-card.html.twig
similarity index 100%
rename from cern_components/patterns/molecules/related-card/related-card.html.twig
rename to patterns/molecules/related-card/related-card.html.twig
diff --git a/cern_components/patterns/molecules/related-card/related-card.ui_patterns.yml b/patterns/molecules/related-card/related-card.ui_patterns.yml
similarity index 100%
rename from cern_components/patterns/molecules/related-card/related-card.ui_patterns.yml
rename to patterns/molecules/related-card/related-card.ui_patterns.yml
diff --git a/cern_components/patterns/molecules/related-card/sass/component-related_card.scss b/patterns/molecules/related-card/sass/component-related_card.scss
similarity index 100%
rename from cern_components/patterns/molecules/related-card/sass/component-related_card.scss
rename to patterns/molecules/related-card/sass/component-related_card.scss
diff --git a/cern_components/patterns/molecules/peoples-profile/scss/mixins.scss b/patterns/molecules/related-card/sass/mixins.scss
similarity index 96%
rename from cern_components/patterns/molecules/peoples-profile/scss/mixins.scss
rename to patterns/molecules/related-card/sass/mixins.scss
index 6c20dc3f..c2a8dc4d 100755
--- a/cern_components/patterns/molecules/peoples-profile/scss/mixins.scss
+++ b/patterns/molecules/related-card/sass/mixins.scss
@@ -1,567 +1,567 @@
-///
-/// String replace
-///
-@function str-replace($string, $search, $replace: "") {
- $index: str-index($string, $search);
- @if $index {
- @return str-slice($string, 1, $index - 1)+$replace+str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
- }
- @return $string;
-}
-
-///
-/// Font face mixins
-///
-@mixin font-face($name, $path, $weight: null, $style: null, $exts: eot woff ttf svg) {
- $src: null;
- $extmods: ( eot: "?", svg: "#" + str-replace($name, " ", "_"));
- $formats: ( otf: "opentype", ttf: "truetype");
- @each $ext in $exts {
- $extmod: if(map-has-key($extmods, $ext), $ext + map-get($extmods, $ext), $ext);
- $format: if(map-has-key($formats, $ext), map-get($formats, $ext), $ext);
- $src: append($src, url(quote($path + "." + $extmod)) format(quote($format)), comma);
- }
- @font-face {
- font-family: quote($name);
- font-style: $style;
- font-weight: $weight;
- src: $src;
- }
-}
-
-///
-/// Font size mixins
-///
-@mixin font-size($sizeValue: 1.6) {
- font-size: ($sizeValue * 10) + px;
- font-size: $sizeValue + rem;
-}
-
-///
-/// @extend %clearfix;
-///
-%clearfix {
- clear: both;
- &:before,
- &:after {
- content: "";
- display: table;
- }
- &:after {
- clear: both;
- }
-}
-
-/// Adds a browser prefix to the property
-/// @param {*} $property Property
-/// @param {*} $value Value
-@mixin css3-prefix($property,
-$value) {
- -webkit-#{$property}: #{$value};
- -khtml-#{$property}: #{$value};
- -moz-#{$property}: #{$value};
- -ms-#{$property}: #{$value};
- -o-#{$property}: #{$value};
- #{$property}: #{$value};
-}
-
-/// Background Gradient
-/// @param {Color} $startColor [#3C3C3C] - Start Color
-/// @param {Color} $endColor [#999999] - End Color
-@mixin background-gradient($startColor: #3C3C3C,
-$endColor: #999999) {
- background-color: $startColor;
- background-image: -webkit-gradient(linear, left top, left bottom, from($startColor), to($endColor));
- background-image: -webkit-linear-gradient(top, $startColor, $endColor);
- background-image: -moz-linear-gradient(top, $startColor, $endColor);
- background-image: -ms-linear-gradient(top, $startColor, $endColor);
- background-image: -o-linear-gradient(top, $startColor, $endColor);
- background-image: linear-gradient(top, $startColor, $endColor);
- filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#{$startColor}',
- endColorStr='#{$endColor}');
-}
-
-/// Background Horizontal
-/// @param {Color} $startColor [#3C3C3C] - Start Color
-/// @param {Color} $endColor [#999999] - End Color
-@mixin background-horizontal($startColor: #3C3C3C,
-$endColor: #999999) {
- background-color: $startColor;
- background-image: -webkit-gradient(linear, left top, right top, from($startColor), to($endColor));
- background-image: -webkit-linear-gradient(left, $startColor, $endColor);
- background-image: -moz-linear-gradient(left, $startColor, $endColor);
- background-image: -ms-linear-gradient(left, $startColor, $endColor);
- background-image: -o-linear-gradient(left, $startColor, $endColor);
- background-image: linear-gradient(left, $startColor, $endColor);
- filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#{$startColor}',
- endColorStr='#{$endColor}',
- gradientType='1');
-}
-
-/// Background Radial
-/// @param {Color} $startColor [#3C3C3C] - Start Color
-/// @param {Percentage} $startPos [0%] - Start position
-/// @param {Color} $endColor [#999999] - End Color
-/// @param {Percentage} $endPos [100%] - End position
-@mixin background-radial($startColor: #FFFFFF,
-$startPos: 0%,
-$endColor: #000000,
-$endPos:100%) {
- background: -moz-radial-gradient(center, ellipse cover, $startColor $startPos, $endColor $endPos);
- background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop($startPos, $startColor), color-stop($endPos, $endColor));
- background: -webkit-radial-gradient(center, ellipse cover, $startColor $startPos, $endColor $endPos);
- background: -o-radial-gradient(center, ellipse cover, $startColor $startPos, $endColor $endPos);
- background: -ms-radial-gradient(center, ellipse cover, $startColor $startPos, $endColor $endPos);
- background: radial-gradient(ellipse at center, $startColor $startPos, $endColor $endPos);
-}
-
-/// Background Size
-/// @param {Size} $width [100%] - Width
-/// @param {Size} $width [$width] - Height
-/// @require {mixin} css3-prefix
-@mixin background-size($width: 100%,
-$height: $width) {
- @if type-of($width)=='number' and $height !=null {
- @include css3-prefix('background-size',
- $width $height);
- }
- @else {
- @include css3-prefix('background-size',
- $width);
- }
-}
-
-/// Background Color Opacity
-/// @param {Color} $color [100%] - Color
-/// @param {Double} $opacity [0.85] - Opacity
-@mixin background-opacity($color: #000,
-$opacity: 0.85) {
- background: $color;
- background: rgba($color, $opacity);
-}
-
-/// Border Radius
-/// @param {Size} $radius [5px] - Radius
-/// @require {mixin} css3-prefix
-@mixin border-radius($radius: 5px) {
- @include css3-prefix('border-radius',
- $radius);
-}
-
-/// Border Radius Separate
-/// @param {Size} $topLeftRadius [5px] - Top Left
-/// @param {Size} $topRightRadius [5px] - Top Right
-/// @param {Size} $bottomLeftRadius [5px] - Bottom Left
-/// @param {Size} $bottomRightRadius [5px] - Bottom Right
-@mixin border-radius-separate($topLeftRadius: 5px,
-$topRightRadius: 5px,
-$bottomLeftRadius: 5px,
-$bottomRightRadius: 5px) {
- -webkit-border-top-left-radius: $topLeftRadius;
- -webkit-border-top-right-radius: $topRightRadius;
- -webkit-border-bottom-right-radius: $bottomRightRadius;
- -webkit-border-bottom-left-radius: $bottomLeftRadius;
- -moz-border-radius-topleft: $topLeftRadius;
- -moz-border-radius-topright: $topRightRadius;
- -moz-border-radius-bottomright: $bottomRightRadius;
- -moz-border-radius-bottomleft: $bottomLeftRadius;
- border-top-left-radius: $topLeftRadius;
- border-top-right-radius: $topRightRadius;
- border-bottom-right-radius: $bottomRightRadius;
- border-bottom-left-radius: $bottomLeftRadius;
-}
-
-/// Box
-/// @param {*} $orient [horizontal] - Orientation
-/// @param {*} $pack [center] - Pack
-/// @param {*} $align [center] - Align
-/// @require {mixin} css3-prefix
-@mixin box($orient: horizontal,
-$pack: center,
-$align: center) {
- display: -webkit-box;
- display: -moz-box;
- display: box;
- @include css3-prefix('box-orient',
- $orient);
- @include css3-prefix('box-pack',
- $pack);
- @include css3-prefix('box-align',
- $align);
-}
-
-/// Box RGBA
-/// @param {Integer} $r [60] - Red
-/// @param {Integer} $g [3] - Green
-/// @param {Integer} $b [12] - Blue
-/// @param {Double} $opacity [0.23] - Opacity
-/// @param {Color} $color [#3C3C3C] - Color
-@mixin box-rgba($r: 60,
-$g: 3,
-$b: 12,
-$opacity: 0.23,
-$color: #3C3C3C) {
- background-color: transparent;
- background-color: rgba($r, $g, $b, $opacity);
- filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$color}',
- endColorstr='#{$color}');
- zoom: 1;
-}
-
-/// Box Shadow
-/// @param {Size} $x [2px] - X
-/// @param {Size} $y [2px] - Y
-/// @param {Size} $blur [5px] - Blur
-/// @param {Color} $color [rgba(0,0,0,.4)] - Color
-/// @param {Boolean} $inset - Inset
-@mixin box-shadow($x: 2px,
-$y: 2px,
-$blur: 5px,
-$color: rgba(0, 0, 0, .4),
-$inset: "") {
- @if ($inset !="") {
- @include css3-prefix('box-shadow',
- $inset $x $y $blur $color);
- }
- @else {
- @include css3-prefix('box-shadow',
- $x $y $blur $color);
- }
-}
-
-/// Box Sizing
-/// @param {*} $type [border-box] - Type
-/// @require {mixin} css3-prefix
-@mixin box-sizing($type: border-box) {
- @include css3-prefix('box-sizing',
- $type);
-}
-
-/// Columns
-/// @param {Integer} $count [3] - Count
-/// @param {Integer} $gap [10] - Gap
-/// @require {mixin} css3-prefix
-@mixin columns($count: 3,
-$gap: 10) {
- @include css3-prefix('column-count',
- $count);
- @include css3-prefix('column-gap',
- $gap);
-}
-
-/// Double Borders
-/// @param {Color} $colorOne [#3C3C3C] - Color One
-/// @param {Color} $colorTwo [#999999] - Color Two
-/// @param {Size} $radius [0] - Radius
-/// @require {mixin} css3-prefix
-/// @require {mixin} border-radius
-@mixin double-borders($colorOne: #3C3C3C,
-$colorTwo: #999999,
-$radius: 0) {
- border: 1px solid $colorOne;
- @include css3-prefix('box-shadow',
- 0 0 0 1px $colorTwo);
- @include border-radius( $radius);
-}
-
-/// Flex
-/// @param {Integer} $value [1] - Value
-/// @require {mixin} css3-prefix
-@mixin flex($value: 1) {
- @include css3-prefix('box-flex',
- $value);
-}
-
-/// Flip
-/// @param {Double} $scaleX [-1] - ScaleX
-/// @require {mixin} css3-prefix
-@mixin flip($scaleX: -1) {
- @include css3-prefix('transform',
- scaleX($scaleX));
- filter: FlipH;
- -ms-filter: "FlipH";
-}
-
-/// Opacity
-/// @param {Double} $opacity [0.5] - Opacity
-/// @require {mixin} css3-prefix
-@mixin opacity($opacity: 0.5) {
- $opacityMultiplied: ($opacity * 100);
- filter: alpha(opacity=$opacityMultiplied);
- -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=" + $opacityMultiplied + ")";
- @include css3-prefix('opacity',
- $opacity);
-}
-
-/// Outline Radius
-/// @param {Size} $radius [5px] - Radius
-/// @require {mixin} css3-prefix
-@mixin outline-radius($radius: 5px) {
- @include css3-prefix('outline-radius',
- $radius);
-}
-
-/// Resize
-/// @param {*} $directoin [both] - Direction
-/// @require {mixin} css3-prefix
-@mixin resize($direction: both) {
- @include css3-prefix('resize',
- $direction);
-}
-
-/// Rotate
-///
-/// CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html
-/// @param {Double} $deg [0] - Degree
-/// @param {Double} $m11 [0] - M11
-/// @param {Double} $m12 [0] - M12
-/// @param {Double} $m21 [0] - M21
-/// @param {Double} $m22 [0] - M22
-/// @require {mixin} css3-prefix
-@mixin rotate($deg: 0,
-$m11: 0,
-$m12: 0,
-$m21: 0,
-$m22: 0) {
- @include css3-prefix('transform',
- rotate($deg + deg));
- filter: progid:DXImageTransform.Microsoft.Matrix( M11=#{$m11},
- M12=#{$m12},
- M21=#{$m21},
- M22=#{$m22},
- sizingMethod='auto expand');
- zoom: 1;
-}
-
-/// Text Shadow
-/// @param {Size} $x [2px] - X
-/// @param {Size} $y [2px] - Y
-/// @param {Size} $blur [2px] - Blur
-/// @param {Color} $color [rgba(0,0,0,.4)] - Color
-@mixin text-shadow($x: 2px,
-$y: 2px,
-$blur: 5px,
-$color: rgba(0, 0, 0, .4)) {
- text-shadow: $x $y $blur $color;
-}
-
-/// Transform
-/// @param {List} $params - Params
-/// @require {mixin} css3-prefix
-@mixin transform($params) {
- @include css3-prefix('transform',
- $params);
-}
-
-/// Transform-Origin
-/// @param {List} $params - Params
-/// @require {mixin} css3-prefix
-@mixin transform-origin($params) {
- @include css3-prefix('transform-origin',
- $params);
-}
-
-// Transform-Style
-/// @param {List} $params - Params
-/// @require {mixin} css3-prefix
-@mixin transform-style($style: preserve-3d) {
- @include css3-prefix('transform-style',
- $style);
-}
-
-/// Transition
-/// @param {List} $properties - Properties
-/// @require {mixin} css3-prefix
-@mixin transition($properties...) {
- @if length($properties)>=1 {
- @include css3-prefix('transition',
- $properties);
- }
- @else {
- @include css3-prefix('transition',
- "all 0.2s ease-in-out 0s");
- }
-}
-
-/// Triple Borders
-/// @param {Color} $colorOne [#3C3C3C] - Color One
-/// @param {Color} $colorTwo [#999999] - Color Two
-/// @param {Color} $colorThree [#000000] - Color Three
-/// @param {Size} $radius [0] - Radius
-/// @require {mixin} border-radius
-/// @require {mixin} css3-prefix
-@mixin triple-borders($colorOne: #3C3C3C,
-$colorTwo: #999999,
-$colorThree: #000000,
-$radius: 0) {
- border: 1px solid $colorOne;
- @include border-radius($radius);
- @include css3-prefix('box-shadow',
- "0 0 0 1px #{$colorTwo}, 0 0 0 2px #{$colorThree}");
-}
-
-/// Keyframes
-/// @param {*} $animation-name - Animation name
-/// @content [Animation css]
-@mixin keyframes($animation-name) {
- @-webkit-keyframes #{$animation-name} {
- @content;
- }
- @-moz-keyframes #{$animation-name} {
- @content;
- }
- @-ms-keyframes #{$animation-name} {
- @content;
- }
- @-o-keyframes #{$animation-name} {
- @content;
- }
- @keyframes #{$animation-name} {
- @content;
- }
-}
-
-/// Animation
-/// @param {*} $str - name duration timing-function delay iteration-count direction fill-mode play-state ([http://www.w3schools.com/cssref/css3_pr_animation.asp](http://www.w3schools.com/cssref/css3_pr_animation.asp))
-/// @require {mixin} css3-prefix
-@mixin animation($str) {
- @include css3-prefix('animation',
- $str);
-}
-
-// --------------------------------------------------
-// Flexbox SASS mixins
-// The spec: http://www.w3.org/TR/css3-flexbox
-// --------------------------------------------------
-// Flexbox display
-@mixin flexbox() {
- display: -webkit-box;
- display: -moz-box;
- display: -ms-flexbox;
- display: -webkit-flex;
- display: flex;
-}
-
-// The 'flex' shorthand
-// - applies to: flex items
-// <positive-number>, initial, auto, or none
-@mixin flex($values) {
- -webkit-box-flex: $values;
- -moz-box-flex: $values;
- -webkit-flex: $values;
- -ms-flex: $values;
- flex: $values;
-}
-
-// Flex Flow Direction
-// - applies to: flex containers
-// row | row-reverse | column | column-reverse
-@mixin flex-direction($direction) {
- -webkit-flex-direction: $direction;
- -moz-flex-direction: $direction;
- -ms-flex-direction: $direction;
- flex-direction: $direction;
-}
-
-// Flex Line Wrapping
-// - applies to: flex containers
-// nowrap | wrap | wrap-reverse
-@mixin flex-wrap($wrap) {
- -webkit-flex-wrap: $wrap;
- -moz-flex-wrap: $wrap;
- -ms-flex-wrap: $wrap;
- flex-wrap: $wrap;
-}
-
-// Flex Direction and Wrap
-// - applies to: flex containers
-// <flex-direction> || <flex-wrap>
-@mixin flex-flow($flow) {
- -webkit-flex-flow: $flow;
- -moz-flex-flow: $flow;
- -ms-flex-flow: $flow;
- flex-flow: $flow;
-}
-
-// Display Order
-// - applies to: flex items
-// <integer>
-@mixin order($val) {
- -webkit-box-ordinal-group: $val;
- -moz-box-ordinal-group: $val;
- -ms-flex-order: $val;
- -webkit-order: $val;
- order: $val;
-}
-
-// Flex grow factor
-// - applies to: flex items
-// <number>
-@mixin flex-grow($grow) {
- -webkit-flex-grow: $grow;
- -moz-flex-grow: $grow;
- -ms-flex-grow: $grow;
- flex-grow: $grow;
-}
-
-// Flex shrink
-// - applies to: flex item shrink factor
-// <number>
-@mixin flex-shrink($shrink) {
- -webkit-flex-shrink: $shrink;
- -moz-flex-shrink: $shrink;
- -ms-flex-shrink: $shrink;
- flex-shrink: $shrink;
-}
-
-// Flex basis
-// - the initial main size of the flex item
-// - applies to: flex itemsnitial main size of the flex item
-// <width>
-@mixin flex-basis($width) {
- -webkit-flex-basis: $width;
- -moz-flex-basis: $width;
- -ms-flex-basis: $width;
- flex-basis: $width;
-}
-
-// Axis Alignment
-// - applies to: flex containers
-// flex-start | flex-end | center | space-between | space-around
-@mixin justify-content($justify) {
- -webkit-justify-content: $justify;
- -moz-justify-content: $justify;
- -ms-justify-content: $justify;
- justify-content: $justify;
- -ms-flex-pack: $justify;
-}
-
-// Packing Flex Lines
-// - applies to: multi-line flex containers
-// flex-start | flex-end | center | space-between | space-around | stretch
-@mixin align-content($align) {
- -webkit-align-content: $align;
- -moz-align-content: $align;
- -ms-align-content: $align;
- align-content: $align;
-}
-
-// Cross-axis Alignment
-// - applies to: flex containers
-// flex-start | flex-end | center | baseline | stretch
-@mixin align-items($align) {
- -webkit-align-items: $align;
- -moz-align-items: $align;
- -ms-align-items: $align;
- align-items: $align;
-}
-
-// Cross-axis Alignment
-// - applies to: flex items
-// auto | flex-start | flex-end | center | baseline | stretch
-@mixin align-self($align) {
- -webkit-align-self: $align;
- -moz-align-self: $align;
- -ms-align-self: $align;
- align-self: $align;
+///
+/// String replace
+///
+@function str-replace($string, $search, $replace: "") {
+ $index: str-index($string, $search);
+ @if $index {
+ @return str-slice($string, 1, $index - 1)+$replace+str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
+ }
+ @return $string;
+}
+
+///
+/// Font face mixins
+///
+@mixin font-face($name, $path, $weight: null, $style: null, $exts: eot woff ttf svg) {
+ $src: null;
+ $extmods: ( eot: "?", svg: "#" + str-replace($name, " ", "_"));
+ $formats: ( otf: "opentype", ttf: "truetype");
+ @each $ext in $exts {
+ $extmod: if(map-has-key($extmods, $ext), $ext + map-get($extmods, $ext), $ext);
+ $format: if(map-has-key($formats, $ext), map-get($formats, $ext), $ext);
+ $src: append($src, url(quote($path + "." + $extmod)) format(quote($format)), comma);
+ }
+ @font-face {
+ font-family: quote($name);
+ font-style: $style;
+ font-weight: $weight;
+ src: $src;
+ }
+}
+
+///
+/// Font size mixins
+///
+@mixin font-size($sizeValue: 1.6) {
+ font-size: ($sizeValue * 10) + px;
+ font-size: $sizeValue + rem;
+}
+
+///
+/// @extend %clearfix;
+///
+%clearfix {
+ clear: both;
+ &:before,
+ &:after {
+ content: "";
+ display: table;
+ }
+ &:after {
+ clear: both;
+ }
+}
+
+/// Adds a browser prefix to the property
+/// @param {*} $property Property
+/// @param {*} $value Value
+@mixin css3-prefix($property,
+$value) {
+ -webkit-#{$property}: #{$value};
+ -khtml-#{$property}: #{$value};
+ -moz-#{$property}: #{$value};
+ -ms-#{$property}: #{$value};
+ -o-#{$property}: #{$value};
+ #{$property}: #{$value};
+}
+
+/// Background Gradient
+/// @param {Color} $startColor [#3C3C3C] - Start Color
+/// @param {Color} $endColor [#999999] - End Color
+@mixin background-gradient($startColor: #3C3C3C,
+$endColor: #999999) {
+ background-color: $startColor;
+ background-image: -webkit-gradient(linear, left top, left bottom, from($startColor), to($endColor));
+ background-image: -webkit-linear-gradient(top, $startColor, $endColor);
+ background-image: -moz-linear-gradient(top, $startColor, $endColor);
+ background-image: -ms-linear-gradient(top, $startColor, $endColor);
+ background-image: -o-linear-gradient(top, $startColor, $endColor);
+ background-image: linear-gradient(top, $startColor, $endColor);
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#{$startColor}',
+ endColorStr='#{$endColor}');
+}
+
+/// Background Horizontal
+/// @param {Color} $startColor [#3C3C3C] - Start Color
+/// @param {Color} $endColor [#999999] - End Color
+@mixin background-horizontal($startColor: #3C3C3C,
+$endColor: #999999) {
+ background-color: $startColor;
+ background-image: -webkit-gradient(linear, left top, right top, from($startColor), to($endColor));
+ background-image: -webkit-linear-gradient(left, $startColor, $endColor);
+ background-image: -moz-linear-gradient(left, $startColor, $endColor);
+ background-image: -ms-linear-gradient(left, $startColor, $endColor);
+ background-image: -o-linear-gradient(left, $startColor, $endColor);
+ background-image: linear-gradient(left, $startColor, $endColor);
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#{$startColor}',
+ endColorStr='#{$endColor}',
+ gradientType='1');
+}
+
+/// Background Radial
+/// @param {Color} $startColor [#3C3C3C] - Start Color
+/// @param {Percentage} $startPos [0%] - Start position
+/// @param {Color} $endColor [#999999] - End Color
+/// @param {Percentage} $endPos [100%] - End position
+@mixin background-radial($startColor: #FFFFFF,
+$startPos: 0%,
+$endColor: #000000,
+$endPos:100%) {
+ background: -moz-radial-gradient(center, ellipse cover, $startColor $startPos, $endColor $endPos);
+ background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop($startPos, $startColor), color-stop($endPos, $endColor));
+ background: -webkit-radial-gradient(center, ellipse cover, $startColor $startPos, $endColor $endPos);
+ background: -o-radial-gradient(center, ellipse cover, $startColor $startPos, $endColor $endPos);
+ background: -ms-radial-gradient(center, ellipse cover, $startColor $startPos, $endColor $endPos);
+ background: radial-gradient(ellipse at center, $startColor $startPos, $endColor $endPos);
+}
+
+/// Background Size
+/// @param {Size} $width [100%] - Width
+/// @param {Size} $width [$width] - Height
+/// @require {mixin} css3-prefix
+@mixin background-size($width: 100%,
+$height: $width) {
+ @if type-of($width)=='number' and $height !=null {
+ @include css3-prefix('background-size',
+ $width $height);
+ }
+ @else {
+ @include css3-prefix('background-size',
+ $width);
+ }
+}
+
+/// Background Color Opacity
+/// @param {Color} $color [100%] - Color
+/// @param {Double} $opacity [0.85] - Opacity
+@mixin background-opacity($color: #000,
+$opacity: 0.85) {
+ background: $color;
+ background: rgba($color, $opacity);
+}
+
+/// Border Radius
+/// @param {Size} $radius [5px] - Radius
+/// @require {mixin} css3-prefix
+@mixin border-radius($radius: 5px) {
+ @include css3-prefix('border-radius',
+ $radius);
+}
+
+/// Border Radius Separate
+/// @param {Size} $topLeftRadius [5px] - Top Left
+/// @param {Size} $topRightRadius [5px] - Top Right
+/// @param {Size} $bottomLeftRadius [5px] - Bottom Left
+/// @param {Size} $bottomRightRadius [5px] - Bottom Right
+@mixin border-radius-separate($topLeftRadius: 5px,
+$topRightRadius: 5px,
+$bottomLeftRadius: 5px,
+$bottomRightRadius: 5px) {
+ -webkit-border-top-left-radius: $topLeftRadius;
+ -webkit-border-top-right-radius: $topRightRadius;
+ -webkit-border-bottom-right-radius: $bottomRightRadius;
+ -webkit-border-bottom-left-radius: $bottomLeftRadius;
+ -moz-border-radius-topleft: $topLeftRadius;
+ -moz-border-radius-topright: $topRightRadius;
+ -moz-border-radius-bottomright: $bottomRightRadius;
+ -moz-border-radius-bottomleft: $bottomLeftRadius;
+ border-top-left-radius: $topLeftRadius;
+ border-top-right-radius: $topRightRadius;
+ border-bottom-right-radius: $bottomRightRadius;
+ border-bottom-left-radius: $bottomLeftRadius;
+}
+
+/// Box
+/// @param {*} $orient [horizontal] - Orientation
+/// @param {*} $pack [center] - Pack
+/// @param {*} $align [center] - Align
+/// @require {mixin} css3-prefix
+@mixin box($orient: horizontal,
+$pack: center,
+$align: center) {
+ display: -webkit-box;
+ display: -moz-box;
+ display: box;
+ @include css3-prefix('box-orient',
+ $orient);
+ @include css3-prefix('box-pack',
+ $pack);
+ @include css3-prefix('box-align',
+ $align);
+}
+
+/// Box RGBA
+/// @param {Integer} $r [60] - Red
+/// @param {Integer} $g [3] - Green
+/// @param {Integer} $b [12] - Blue
+/// @param {Double} $opacity [0.23] - Opacity
+/// @param {Color} $color [#3C3C3C] - Color
+@mixin box-rgba($r: 60,
+$g: 3,
+$b: 12,
+$opacity: 0.23,
+$color: #3C3C3C) {
+ background-color: transparent;
+ background-color: rgba($r, $g, $b, $opacity);
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$color}',
+ endColorstr='#{$color}');
+ zoom: 1;
+}
+
+/// Box Shadow
+/// @param {Size} $x [2px] - X
+/// @param {Size} $y [2px] - Y
+/// @param {Size} $blur [5px] - Blur
+/// @param {Color} $color [rgba(0,0,0,.4)] - Color
+/// @param {Boolean} $inset - Inset
+@mixin box-shadow($x: 2px,
+$y: 2px,
+$blur: 5px,
+$color: rgba(0, 0, 0, .4),
+$inset: "") {
+ @if ($inset !="") {
+ @include css3-prefix('box-shadow',
+ $inset $x $y $blur $color);
+ }
+ @else {
+ @include css3-prefix('box-shadow',
+ $x $y $blur $color);
+ }
+}
+
+/// Box Sizing
+/// @param {*} $type [border-box] - Type
+/// @require {mixin} css3-prefix
+@mixin box-sizing($type: border-box) {
+ @include css3-prefix('box-sizing',
+ $type);
+}
+
+/// Columns
+/// @param {Integer} $count [3] - Count
+/// @param {Integer} $gap [10] - Gap
+/// @require {mixin} css3-prefix
+@mixin columns($count: 3,
+$gap: 10) {
+ @include css3-prefix('column-count',
+ $count);
+ @include css3-prefix('column-gap',
+ $gap);
+}
+
+/// Double Borders
+/// @param {Color} $colorOne [#3C3C3C] - Color One
+/// @param {Color} $colorTwo [#999999] - Color Two
+/// @param {Size} $radius [0] - Radius
+/// @require {mixin} css3-prefix
+/// @require {mixin} border-radius
+@mixin double-borders($colorOne: #3C3C3C,
+$colorTwo: #999999,
+$radius: 0) {
+ border: 1px solid $colorOne;
+ @include css3-prefix('box-shadow',
+ 0 0 0 1px $colorTwo);
+ @include border-radius( $radius);
+}
+
+/// Flex
+/// @param {Integer} $value [1] - Value
+/// @require {mixin} css3-prefix
+@mixin flex($value: 1) {
+ @include css3-prefix('box-flex',
+ $value);
+}
+
+/// Flip
+/// @param {Double} $scaleX [-1] - ScaleX
+/// @require {mixin} css3-prefix
+@mixin flip($scaleX: -1) {
+ @include css3-prefix('transform',
+ scaleX($scaleX));
+ filter: FlipH;
+ -ms-filter: "FlipH";
+}
+
+/// Opacity
+/// @param {Double} $opacity [0.5] - Opacity
+/// @require {mixin} css3-prefix
+@mixin opacity($opacity: 0.5) {
+ $opacityMultiplied: ($opacity * 100);
+ filter: alpha(opacity=$opacityMultiplied);
+ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=" + $opacityMultiplied + ")";
+ @include css3-prefix('opacity',
+ $opacity);
+}
+
+/// Outline Radius
+/// @param {Size} $radius [5px] - Radius
+/// @require {mixin} css3-prefix
+@mixin outline-radius($radius: 5px) {
+ @include css3-prefix('outline-radius',
+ $radius);
+}
+
+/// Resize
+/// @param {*} $directoin [both] - Direction
+/// @require {mixin} css3-prefix
+@mixin resize($direction: both) {
+ @include css3-prefix('resize',
+ $direction);
+}
+
+/// Rotate
+///
+/// CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html
+/// @param {Double} $deg [0] - Degree
+/// @param {Double} $m11 [0] - M11
+/// @param {Double} $m12 [0] - M12
+/// @param {Double} $m21 [0] - M21
+/// @param {Double} $m22 [0] - M22
+/// @require {mixin} css3-prefix
+@mixin rotate($deg: 0,
+$m11: 0,
+$m12: 0,
+$m21: 0,
+$m22: 0) {
+ @include css3-prefix('transform',
+ rotate($deg + deg));
+ filter: progid:DXImageTransform.Microsoft.Matrix( M11=#{$m11},
+ M12=#{$m12},
+ M21=#{$m21},
+ M22=#{$m22},
+ sizingMethod='auto expand');
+ zoom: 1;
+}
+
+/// Text Shadow
+/// @param {Size} $x [2px] - X
+/// @param {Size} $y [2px] - Y
+/// @param {Size} $blur [2px] - Blur
+/// @param {Color} $color [rgba(0,0,0,.4)] - Color
+@mixin text-shadow($x: 2px,
+$y: 2px,
+$blur: 5px,
+$color: rgba(0, 0, 0, .4)) {
+ text-shadow: $x $y $blur $color;
+}
+
+/// Transform
+/// @param {List} $params - Params
+/// @require {mixin} css3-prefix
+@mixin transform($params) {
+ @include css3-prefix('transform',
+ $params);
+}
+
+/// Transform-Origin
+/// @param {List} $params - Params
+/// @require {mixin} css3-prefix
+@mixin transform-origin($params) {
+ @include css3-prefix('transform-origin',
+ $params);
+}
+
+// Transform-Style
+/// @param {List} $params - Params
+/// @require {mixin} css3-prefix
+@mixin transform-style($style: preserve-3d) {
+ @include css3-prefix('transform-style',
+ $style);
+}
+
+/// Transition
+/// @param {List} $properties - Properties
+/// @require {mixin} css3-prefix
+@mixin transition($properties...) {
+ @if length($properties)>=1 {
+ @include css3-prefix('transition',
+ $properties);
+ }
+ @else {
+ @include css3-prefix('transition',
+ "all 0.2s ease-in-out 0s");
+ }
+}
+
+/// Triple Borders
+/// @param {Color} $colorOne [#3C3C3C] - Color One
+/// @param {Color} $colorTwo [#999999] - Color Two
+/// @param {Color} $colorThree [#000000] - Color Three
+/// @param {Size} $radius [0] - Radius
+/// @require {mixin} border-radius
+/// @require {mixin} css3-prefix
+@mixin triple-borders($colorOne: #3C3C3C,
+$colorTwo: #999999,
+$colorThree: #000000,
+$radius: 0) {
+ border: 1px solid $colorOne;
+ @include border-radius($radius);
+ @include css3-prefix('box-shadow',
+ "0 0 0 1px #{$colorTwo}, 0 0 0 2px #{$colorThree}");
+}
+
+/// Keyframes
+/// @param {*} $animation-name - Animation name
+/// @content [Animation css]
+@mixin keyframes($animation-name) {
+ @-webkit-keyframes #{$animation-name} {
+ @content;
+ }
+ @-moz-keyframes #{$animation-name} {
+ @content;
+ }
+ @-ms-keyframes #{$animation-name} {
+ @content;
+ }
+ @-o-keyframes #{$animation-name} {
+ @content;
+ }
+ @keyframes #{$animation-name} {
+ @content;
+ }
+}
+
+/// Animation
+/// @param {*} $str - name duration timing-function delay iteration-count direction fill-mode play-state ([http://www.w3schools.com/cssref/css3_pr_animation.asp](http://www.w3schools.com/cssref/css3_pr_animation.asp))
+/// @require {mixin} css3-prefix
+@mixin animation($str) {
+ @include css3-prefix('animation',
+ $str);
+}
+
+// --------------------------------------------------
+// Flexbox SASS mixins
+// The spec: http://www.w3.org/TR/css3-flexbox
+// --------------------------------------------------
+// Flexbox display
+@mixin flexbox() {
+ display: -webkit-box;
+ display: -moz-box;
+ display: -ms-flexbox;
+ display: -webkit-flex;
+ display: flex;
+}
+
+// The 'flex' shorthand
+// - applies to: flex items
+// <positive-number>, initial, auto, or none
+@mixin flex($values) {
+ -webkit-box-flex: $values;
+ -moz-box-flex: $values;
+ -webkit-flex: $values;
+ -ms-flex: $values;
+ flex: $values;
+}
+
+// Flex Flow Direction
+// - applies to: flex containers
+// row | row-reverse | column | column-reverse
+@mixin flex-direction($direction) {
+ -webkit-flex-direction: $direction;
+ -moz-flex-direction: $direction;
+ -ms-flex-direction: $direction;
+ flex-direction: $direction;
+}
+
+// Flex Line Wrapping
+// - applies to: flex containers
+// nowrap | wrap | wrap-reverse
+@mixin flex-wrap($wrap) {
+ -webkit-flex-wrap: $wrap;
+ -moz-flex-wrap: $wrap;
+ -ms-flex-wrap: $wrap;
+ flex-wrap: $wrap;
+}
+
+// Flex Direction and Wrap
+// - applies to: flex containers
+// <flex-direction> || <flex-wrap>
+@mixin flex-flow($flow) {
+ -webkit-flex-flow: $flow;
+ -moz-flex-flow: $flow;
+ -ms-flex-flow: $flow;
+ flex-flow: $flow;
+}
+
+// Display Order
+// - applies to: flex items
+// <integer>
+@mixin order($val) {
+ -webkit-box-ordinal-group: $val;
+ -moz-box-ordinal-group: $val;
+ -ms-flex-order: $val;
+ -webkit-order: $val;
+ order: $val;
+}
+
+// Flex grow factor
+// - applies to: flex items
+// <number>
+@mixin flex-grow($grow) {
+ -webkit-flex-grow: $grow;
+ -moz-flex-grow: $grow;
+ -ms-flex-grow: $grow;
+ flex-grow: $grow;
+}
+
+// Flex shrink
+// - applies to: flex item shrink factor
+// <number>
+@mixin flex-shrink($shrink) {
+ -webkit-flex-shrink: $shrink;
+ -moz-flex-shrink: $shrink;
+ -ms-flex-shrink: $shrink;
+ flex-shrink: $shrink;
+}
+
+// Flex basis
+// - the initial main size of the flex item
+// - applies to: flex itemsnitial main size of the flex item
+// <width>
+@mixin flex-basis($width) {
+ -webkit-flex-basis: $width;
+ -moz-flex-basis: $width;
+ -ms-flex-basis: $width;
+ flex-basis: $width;
+}
+
+// Axis Alignment
+// - applies to: flex containers
+// flex-start | flex-end | center | space-between | space-around
+@mixin justify-content($justify) {
+ -webkit-justify-content: $justify;
+ -moz-justify-content: $justify;
+ -ms-justify-content: $justify;
+ justify-content: $justify;
+ -ms-flex-pack: $justify;
+}
+
+// Packing Flex Lines
+// - applies to: multi-line flex containers
+// flex-start | flex-end | center | space-between | space-around | stretch
+@mixin align-content($align) {
+ -webkit-align-content: $align;
+ -moz-align-content: $align;
+ -ms-align-content: $align;
+ align-content: $align;
+}
+
+// Cross-axis Alignment
+// - applies to: flex containers
+// flex-start | flex-end | center | baseline | stretch
+@mixin align-items($align) {
+ -webkit-align-items: $align;
+ -moz-align-items: $align;
+ -ms-align-items: $align;
+ align-items: $align;
+}
+
+// Cross-axis Alignment
+// - applies to: flex items
+// auto | flex-start | flex-end | center | baseline | stretch
+@mixin align-self($align) {
+ -webkit-align-self: $align;
+ -moz-align-self: $align;
+ -ms-align-self: $align;
+ align-self: $align;
}
\ No newline at end of file
diff --git a/cern_components/patterns/molecules/related-card/sass/variables.scss b/patterns/molecules/related-card/sass/variables.scss
similarity index 100%
rename from cern_components/patterns/molecules/related-card/sass/variables.scss
rename to patterns/molecules/related-card/sass/variables.scss
diff --git a/cern_components/patterns/molecules/related-content/css/component-related_content.css b/patterns/molecules/related-content/css/component-related_content.css
similarity index 100%
rename from cern_components/patterns/molecules/related-content/css/component-related_content.css
rename to patterns/molecules/related-content/css/component-related_content.css
diff --git a/cern_components/patterns/molecules/related-content/css/component-related_content.css.map b/patterns/molecules/related-content/css/component-related_content.css.map
similarity index 100%
rename from cern_components/patterns/molecules/related-content/css/component-related_content.css.map
rename to patterns/molecules/related-content/css/component-related_content.css.map
diff --git a/cern_components/patterns/molecules/related-content/related-content.html.twig b/patterns/molecules/related-content/related-content.html.twig
similarity index 100%
rename from cern_components/patterns/molecules/related-content/related-content.html.twig
rename to patterns/molecules/related-content/related-content.html.twig
diff --git a/cern_components/patterns/molecules/related-content/related-content.ui_patterns.yml b/patterns/molecules/related-content/related-content.ui_patterns.yml
similarity index 100%
rename from cern_components/patterns/molecules/related-content/related-content.ui_patterns.yml
rename to patterns/molecules/related-content/related-content.ui_patterns.yml
diff --git a/cern_components/patterns/molecules/related-content/sass/component-related_content.scss b/patterns/molecules/related-content/sass/component-related_content.scss
similarity index 100%
rename from cern_components/patterns/molecules/related-content/sass/component-related_content.scss
rename to patterns/molecules/related-content/sass/component-related_content.scss
diff --git a/cern_components/patterns/molecules/call-action/sass/mixins.scss b/patterns/molecules/related-content/sass/mixins.scss
similarity index 96%
rename from cern_components/patterns/molecules/call-action/sass/mixins.scss
rename to patterns/molecules/related-content/sass/mixins.scss
index 6c20dc3f..c2a8dc4d 100755
--- a/cern_components/patterns/molecules/call-action/sass/mixins.scss
+++ b/patterns/molecules/related-content/sass/mixins.scss
@@ -1,567 +1,567 @@
-///
-/// String replace
-///
-@function str-replace($string, $search, $replace: "") {
- $index: str-index($string, $search);
- @if $index {
- @return str-slice($string, 1, $index - 1)+$replace+str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
- }
- @return $string;
-}
-
-///
-/// Font face mixins
-///
-@mixin font-face($name, $path, $weight: null, $style: null, $exts: eot woff ttf svg) {
- $src: null;
- $extmods: ( eot: "?", svg: "#" + str-replace($name, " ", "_"));
- $formats: ( otf: "opentype", ttf: "truetype");
- @each $ext in $exts {
- $extmod: if(map-has-key($extmods, $ext), $ext + map-get($extmods, $ext), $ext);
- $format: if(map-has-key($formats, $ext), map-get($formats, $ext), $ext);
- $src: append($src, url(quote($path + "." + $extmod)) format(quote($format)), comma);
- }
- @font-face {
- font-family: quote($name);
- font-style: $style;
- font-weight: $weight;
- src: $src;
- }
-}
-
-///
-/// Font size mixins
-///
-@mixin font-size($sizeValue: 1.6) {
- font-size: ($sizeValue * 10) + px;
- font-size: $sizeValue + rem;
-}
-
-///
-/// @extend %clearfix;
-///
-%clearfix {
- clear: both;
- &:before,
- &:after {
- content: "";
- display: table;
- }
- &:after {
- clear: both;
- }
-}
-
-/// Adds a browser prefix to the property
-/// @param {*} $property Property
-/// @param {*} $value Value
-@mixin css3-prefix($property,
-$value) {
- -webkit-#{$property}: #{$value};
- -khtml-#{$property}: #{$value};
- -moz-#{$property}: #{$value};
- -ms-#{$property}: #{$value};
- -o-#{$property}: #{$value};
- #{$property}: #{$value};
-}
-
-/// Background Gradient
-/// @param {Color} $startColor [#3C3C3C] - Start Color
-/// @param {Color} $endColor [#999999] - End Color
-@mixin background-gradient($startColor: #3C3C3C,
-$endColor: #999999) {
- background-color: $startColor;
- background-image: -webkit-gradient(linear, left top, left bottom, from($startColor), to($endColor));
- background-image: -webkit-linear-gradient(top, $startColor, $endColor);
- background-image: -moz-linear-gradient(top, $startColor, $endColor);
- background-image: -ms-linear-gradient(top, $startColor, $endColor);
- background-image: -o-linear-gradient(top, $startColor, $endColor);
- background-image: linear-gradient(top, $startColor, $endColor);
- filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#{$startColor}',
- endColorStr='#{$endColor}');
-}
-
-/// Background Horizontal
-/// @param {Color} $startColor [#3C3C3C] - Start Color
-/// @param {Color} $endColor [#999999] - End Color
-@mixin background-horizontal($startColor: #3C3C3C,
-$endColor: #999999) {
- background-color: $startColor;
- background-image: -webkit-gradient(linear, left top, right top, from($startColor), to($endColor));
- background-image: -webkit-linear-gradient(left, $startColor, $endColor);
- background-image: -moz-linear-gradient(left, $startColor, $endColor);
- background-image: -ms-linear-gradient(left, $startColor, $endColor);
- background-image: -o-linear-gradient(left, $startColor, $endColor);
- background-image: linear-gradient(left, $startColor, $endColor);
- filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#{$startColor}',
- endColorStr='#{$endColor}',
- gradientType='1');
-}
-
-/// Background Radial
-/// @param {Color} $startColor [#3C3C3C] - Start Color
-/// @param {Percentage} $startPos [0%] - Start position
-/// @param {Color} $endColor [#999999] - End Color
-/// @param {Percentage} $endPos [100%] - End position
-@mixin background-radial($startColor: #FFFFFF,
-$startPos: 0%,
-$endColor: #000000,
-$endPos:100%) {
- background: -moz-radial-gradient(center, ellipse cover, $startColor $startPos, $endColor $endPos);
- background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop($startPos, $startColor), color-stop($endPos, $endColor));
- background: -webkit-radial-gradient(center, ellipse cover, $startColor $startPos, $endColor $endPos);
- background: -o-radial-gradient(center, ellipse cover, $startColor $startPos, $endColor $endPos);
- background: -ms-radial-gradient(center, ellipse cover, $startColor $startPos, $endColor $endPos);
- background: radial-gradient(ellipse at center, $startColor $startPos, $endColor $endPos);
-}
-
-/// Background Size
-/// @param {Size} $width [100%] - Width
-/// @param {Size} $width [$width] - Height
-/// @require {mixin} css3-prefix
-@mixin background-size($width: 100%,
-$height: $width) {
- @if type-of($width)=='number' and $height !=null {
- @include css3-prefix('background-size',
- $width $height);
- }
- @else {
- @include css3-prefix('background-size',
- $width);
- }
-}
-
-/// Background Color Opacity
-/// @param {Color} $color [100%] - Color
-/// @param {Double} $opacity [0.85] - Opacity
-@mixin background-opacity($color: #000,
-$opacity: 0.85) {
- background: $color;
- background: rgba($color, $opacity);
-}
-
-/// Border Radius
-/// @param {Size} $radius [5px] - Radius
-/// @require {mixin} css3-prefix
-@mixin border-radius($radius: 5px) {
- @include css3-prefix('border-radius',
- $radius);
-}
-
-/// Border Radius Separate
-/// @param {Size} $topLeftRadius [5px] - Top Left
-/// @param {Size} $topRightRadius [5px] - Top Right
-/// @param {Size} $bottomLeftRadius [5px] - Bottom Left
-/// @param {Size} $bottomRightRadius [5px] - Bottom Right
-@mixin border-radius-separate($topLeftRadius: 5px,
-$topRightRadius: 5px,
-$bottomLeftRadius: 5px,
-$bottomRightRadius: 5px) {
- -webkit-border-top-left-radius: $topLeftRadius;
- -webkit-border-top-right-radius: $topRightRadius;
- -webkit-border-bottom-right-radius: $bottomRightRadius;
- -webkit-border-bottom-left-radius: $bottomLeftRadius;
- -moz-border-radius-topleft: $topLeftRadius;
- -moz-border-radius-topright: $topRightRadius;
- -moz-border-radius-bottomright: $bottomRightRadius;
- -moz-border-radius-bottomleft: $bottomLeftRadius;
- border-top-left-radius: $topLeftRadius;
- border-top-right-radius: $topRightRadius;
- border-bottom-right-radius: $bottomRightRadius;
- border-bottom-left-radius: $bottomLeftRadius;
-}
-
-/// Box
-/// @param {*} $orient [horizontal] - Orientation
-/// @param {*} $pack [center] - Pack
-/// @param {*} $align [center] - Align
-/// @require {mixin} css3-prefix
-@mixin box($orient: horizontal,
-$pack: center,
-$align: center) {
- display: -webkit-box;
- display: -moz-box;
- display: box;
- @include css3-prefix('box-orient',
- $orient);
- @include css3-prefix('box-pack',
- $pack);
- @include css3-prefix('box-align',
- $align);
-}
-
-/// Box RGBA
-/// @param {Integer} $r [60] - Red
-/// @param {Integer} $g [3] - Green
-/// @param {Integer} $b [12] - Blue
-/// @param {Double} $opacity [0.23] - Opacity
-/// @param {Color} $color [#3C3C3C] - Color
-@mixin box-rgba($r: 60,
-$g: 3,
-$b: 12,
-$opacity: 0.23,
-$color: #3C3C3C) {
- background-color: transparent;
- background-color: rgba($r, $g, $b, $opacity);
- filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$color}',
- endColorstr='#{$color}');
- zoom: 1;
-}
-
-/// Box Shadow
-/// @param {Size} $x [2px] - X
-/// @param {Size} $y [2px] - Y
-/// @param {Size} $blur [5px] - Blur
-/// @param {Color} $color [rgba(0,0,0,.4)] - Color
-/// @param {Boolean} $inset - Inset
-@mixin box-shadow($x: 2px,
-$y: 2px,
-$blur: 5px,
-$color: rgba(0, 0, 0, .4),
-$inset: "") {
- @if ($inset !="") {
- @include css3-prefix('box-shadow',
- $inset $x $y $blur $color);
- }
- @else {
- @include css3-prefix('box-shadow',
- $x $y $blur $color);
- }
-}
-
-/// Box Sizing
-/// @param {*} $type [border-box] - Type
-/// @require {mixin} css3-prefix
-@mixin box-sizing($type: border-box) {
- @include css3-prefix('box-sizing',
- $type);
-}
-
-/// Columns
-/// @param {Integer} $count [3] - Count
-/// @param {Integer} $gap [10] - Gap
-/// @require {mixin} css3-prefix
-@mixin columns($count: 3,
-$gap: 10) {
- @include css3-prefix('column-count',
- $count);
- @include css3-prefix('column-gap',
- $gap);
-}
-
-/// Double Borders
-/// @param {Color} $colorOne [#3C3C3C] - Color One
-/// @param {Color} $colorTwo [#999999] - Color Two
-/// @param {Size} $radius [0] - Radius
-/// @require {mixin} css3-prefix
-/// @require {mixin} border-radius
-@mixin double-borders($colorOne: #3C3C3C,
-$colorTwo: #999999,
-$radius: 0) {
- border: 1px solid $colorOne;
- @include css3-prefix('box-shadow',
- 0 0 0 1px $colorTwo);
- @include border-radius( $radius);
-}
-
-/// Flex
-/// @param {Integer} $value [1] - Value
-/// @require {mixin} css3-prefix
-@mixin flex($value: 1) {
- @include css3-prefix('box-flex',
- $value);
-}
-
-/// Flip
-/// @param {Double} $scaleX [-1] - ScaleX
-/// @require {mixin} css3-prefix
-@mixin flip($scaleX: -1) {
- @include css3-prefix('transform',
- scaleX($scaleX));
- filter: FlipH;
- -ms-filter: "FlipH";
-}
-
-/// Opacity
-/// @param {Double} $opacity [0.5] - Opacity
-/// @require {mixin} css3-prefix
-@mixin opacity($opacity: 0.5) {
- $opacityMultiplied: ($opacity * 100);
- filter: alpha(opacity=$opacityMultiplied);
- -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=" + $opacityMultiplied + ")";
- @include css3-prefix('opacity',
- $opacity);
-}
-
-/// Outline Radius
-/// @param {Size} $radius [5px] - Radius
-/// @require {mixin} css3-prefix
-@mixin outline-radius($radius: 5px) {
- @include css3-prefix('outline-radius',
- $radius);
-}
-
-/// Resize
-/// @param {*} $directoin [both] - Direction
-/// @require {mixin} css3-prefix
-@mixin resize($direction: both) {
- @include css3-prefix('resize',
- $direction);
-}
-
-/// Rotate
-///
-/// CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html
-/// @param {Double} $deg [0] - Degree
-/// @param {Double} $m11 [0] - M11
-/// @param {Double} $m12 [0] - M12
-/// @param {Double} $m21 [0] - M21
-/// @param {Double} $m22 [0] - M22
-/// @require {mixin} css3-prefix
-@mixin rotate($deg: 0,
-$m11: 0,
-$m12: 0,
-$m21: 0,
-$m22: 0) {
- @include css3-prefix('transform',
- rotate($deg + deg));
- filter: progid:DXImageTransform.Microsoft.Matrix( M11=#{$m11},
- M12=#{$m12},
- M21=#{$m21},
- M22=#{$m22},
- sizingMethod='auto expand');
- zoom: 1;
-}
-
-/// Text Shadow
-/// @param {Size} $x [2px] - X
-/// @param {Size} $y [2px] - Y
-/// @param {Size} $blur [2px] - Blur
-/// @param {Color} $color [rgba(0,0,0,.4)] - Color
-@mixin text-shadow($x: 2px,
-$y: 2px,
-$blur: 5px,
-$color: rgba(0, 0, 0, .4)) {
- text-shadow: $x $y $blur $color;
-}
-
-/// Transform
-/// @param {List} $params - Params
-/// @require {mixin} css3-prefix
-@mixin transform($params) {
- @include css3-prefix('transform',
- $params);
-}
-
-/// Transform-Origin
-/// @param {List} $params - Params
-/// @require {mixin} css3-prefix
-@mixin transform-origin($params) {
- @include css3-prefix('transform-origin',
- $params);
-}
-
-// Transform-Style
-/// @param {List} $params - Params
-/// @require {mixin} css3-prefix
-@mixin transform-style($style: preserve-3d) {
- @include css3-prefix('transform-style',
- $style);
-}
-
-/// Transition
-/// @param {List} $properties - Properties
-/// @require {mixin} css3-prefix
-@mixin transition($properties...) {
- @if length($properties)>=1 {
- @include css3-prefix('transition',
- $properties);
- }
- @else {
- @include css3-prefix('transition',
- "all 0.2s ease-in-out 0s");
- }
-}
-
-/// Triple Borders
-/// @param {Color} $colorOne [#3C3C3C] - Color One
-/// @param {Color} $colorTwo [#999999] - Color Two
-/// @param {Color} $colorThree [#000000] - Color Three
-/// @param {Size} $radius [0] - Radius
-/// @require {mixin} border-radius
-/// @require {mixin} css3-prefix
-@mixin triple-borders($colorOne: #3C3C3C,
-$colorTwo: #999999,
-$colorThree: #000000,
-$radius: 0) {
- border: 1px solid $colorOne;
- @include border-radius($radius);
- @include css3-prefix('box-shadow',
- "0 0 0 1px #{$colorTwo}, 0 0 0 2px #{$colorThree}");
-}
-
-/// Keyframes
-/// @param {*} $animation-name - Animation name
-/// @content [Animation css]
-@mixin keyframes($animation-name) {
- @-webkit-keyframes #{$animation-name} {
- @content;
- }
- @-moz-keyframes #{$animation-name} {
- @content;
- }
- @-ms-keyframes #{$animation-name} {
- @content;
- }
- @-o-keyframes #{$animation-name} {
- @content;
- }
- @keyframes #{$animation-name} {
- @content;
- }
-}
-
-/// Animation
-/// @param {*} $str - name duration timing-function delay iteration-count direction fill-mode play-state ([http://www.w3schools.com/cssref/css3_pr_animation.asp](http://www.w3schools.com/cssref/css3_pr_animation.asp))
-/// @require {mixin} css3-prefix
-@mixin animation($str) {
- @include css3-prefix('animation',
- $str);
-}
-
-// --------------------------------------------------
-// Flexbox SASS mixins
-// The spec: http://www.w3.org/TR/css3-flexbox
-// --------------------------------------------------
-// Flexbox display
-@mixin flexbox() {
- display: -webkit-box;
- display: -moz-box;
- display: -ms-flexbox;
- display: -webkit-flex;
- display: flex;
-}
-
-// The 'flex' shorthand
-// - applies to: flex items
-// <positive-number>, initial, auto, or none
-@mixin flex($values) {
- -webkit-box-flex: $values;
- -moz-box-flex: $values;
- -webkit-flex: $values;
- -ms-flex: $values;
- flex: $values;
-}
-
-// Flex Flow Direction
-// - applies to: flex containers
-// row | row-reverse | column | column-reverse
-@mixin flex-direction($direction) {
- -webkit-flex-direction: $direction;
- -moz-flex-direction: $direction;
- -ms-flex-direction: $direction;
- flex-direction: $direction;
-}
-
-// Flex Line Wrapping
-// - applies to: flex containers
-// nowrap | wrap | wrap-reverse
-@mixin flex-wrap($wrap) {
- -webkit-flex-wrap: $wrap;
- -moz-flex-wrap: $wrap;
- -ms-flex-wrap: $wrap;
- flex-wrap: $wrap;
-}
-
-// Flex Direction and Wrap
-// - applies to: flex containers
-// <flex-direction> || <flex-wrap>
-@mixin flex-flow($flow) {
- -webkit-flex-flow: $flow;
- -moz-flex-flow: $flow;
- -ms-flex-flow: $flow;
- flex-flow: $flow;
-}
-
-// Display Order
-// - applies to: flex items
-// <integer>
-@mixin order($val) {
- -webkit-box-ordinal-group: $val;
- -moz-box-ordinal-group: $val;
- -ms-flex-order: $val;
- -webkit-order: $val;
- order: $val;
-}
-
-// Flex grow factor
-// - applies to: flex items
-// <number>
-@mixin flex-grow($grow) {
- -webkit-flex-grow: $grow;
- -moz-flex-grow: $grow;
- -ms-flex-grow: $grow;
- flex-grow: $grow;
-}
-
-// Flex shrink
-// - applies to: flex item shrink factor
-// <number>
-@mixin flex-shrink($shrink) {
- -webkit-flex-shrink: $shrink;
- -moz-flex-shrink: $shrink;
- -ms-flex-shrink: $shrink;
- flex-shrink: $shrink;
-}
-
-// Flex basis
-// - the initial main size of the flex item
-// - applies to: flex itemsnitial main size of the flex item
-// <width>
-@mixin flex-basis($width) {
- -webkit-flex-basis: $width;
- -moz-flex-basis: $width;
- -ms-flex-basis: $width;
- flex-basis: $width;
-}
-
-// Axis Alignment
-// - applies to: flex containers
-// flex-start | flex-end | center | space-between | space-around
-@mixin justify-content($justify) {
- -webkit-justify-content: $justify;
- -moz-justify-content: $justify;
- -ms-justify-content: $justify;
- justify-content: $justify;
- -ms-flex-pack: $justify;
-}
-
-// Packing Flex Lines
-// - applies to: multi-line flex containers
-// flex-start | flex-end | center | space-between | space-around | stretch
-@mixin align-content($align) {
- -webkit-align-content: $align;
- -moz-align-content: $align;
- -ms-align-content: $align;
- align-content: $align;
-}
-
-// Cross-axis Alignment
-// - applies to: flex containers
-// flex-start | flex-end | center | baseline | stretch
-@mixin align-items($align) {
- -webkit-align-items: $align;
- -moz-align-items: $align;
- -ms-align-items: $align;
- align-items: $align;
-}
-
-// Cross-axis Alignment
-// - applies to: flex items
-// auto | flex-start | flex-end | center | baseline | stretch
-@mixin align-self($align) {
- -webkit-align-self: $align;
- -moz-align-self: $align;
- -ms-align-self: $align;
- align-self: $align;
+///
+/// String replace
+///
+@function str-replace($string, $search, $replace: "") {
+ $index: str-index($string, $search);
+ @if $index {
+ @return str-slice($string, 1, $index - 1)+$replace+str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
+ }
+ @return $string;
+}
+
+///
+/// Font face mixins
+///
+@mixin font-face($name, $path, $weight: null, $style: null, $exts: eot woff ttf svg) {
+ $src: null;
+ $extmods: ( eot: "?", svg: "#" + str-replace($name, " ", "_"));
+ $formats: ( otf: "opentype", ttf: "truetype");
+ @each $ext in $exts {
+ $extmod: if(map-has-key($extmods, $ext), $ext + map-get($extmods, $ext), $ext);
+ $format: if(map-has-key($formats, $ext), map-get($formats, $ext), $ext);
+ $src: append($src, url(quote($path + "." + $extmod)) format(quote($format)), comma);
+ }
+ @font-face {
+ font-family: quote($name);
+ font-style: $style;
+ font-weight: $weight;
+ src: $src;
+ }
+}
+
+///
+/// Font size mixins
+///
+@mixin font-size($sizeValue: 1.6) {
+ font-size: ($sizeValue * 10) + px;
+ font-size: $sizeValue + rem;
+}
+
+///
+/// @extend %clearfix;
+///
+%clearfix {
+ clear: both;
+ &:before,
+ &:after {
+ content: "";
+ display: table;
+ }
+ &:after {
+ clear: both;
+ }
+}
+
+/// Adds a browser prefix to the property
+/// @param {*} $property Property
+/// @param {*} $value Value
+@mixin css3-prefix($property,
+$value) {
+ -webkit-#{$property}: #{$value};
+ -khtml-#{$property}: #{$value};
+ -moz-#{$property}: #{$value};
+ -ms-#{$property}: #{$value};
+ -o-#{$property}: #{$value};
+ #{$property}: #{$value};
+}
+
+/// Background Gradient
+/// @param {Color} $startColor [#3C3C3C] - Start Color
+/// @param {Color} $endColor [#999999] - End Color
+@mixin background-gradient($startColor: #3C3C3C,
+$endColor: #999999) {
+ background-color: $startColor;
+ background-image: -webkit-gradient(linear, left top, left bottom, from($startColor), to($endColor));
+ background-image: -webkit-linear-gradient(top, $startColor, $endColor);
+ background-image: -moz-linear-gradient(top, $startColor, $endColor);
+ background-image: -ms-linear-gradient(top, $startColor, $endColor);
+ background-image: -o-linear-gradient(top, $startColor, $endColor);
+ background-image: linear-gradient(top, $startColor, $endColor);
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#{$startColor}',
+ endColorStr='#{$endColor}');
+}
+
+/// Background Horizontal
+/// @param {Color} $startColor [#3C3C3C] - Start Color
+/// @param {Color} $endColor [#999999] - End Color
+@mixin background-horizontal($startColor: #3C3C3C,
+$endColor: #999999) {
+ background-color: $startColor;
+ background-image: -webkit-gradient(linear, left top, right top, from($startColor), to($endColor));
+ background-image: -webkit-linear-gradient(left, $startColor, $endColor);
+ background-image: -moz-linear-gradient(left, $startColor, $endColor);
+ background-image: -ms-linear-gradient(left, $startColor, $endColor);
+ background-image: -o-linear-gradient(left, $startColor, $endColor);
+ background-image: linear-gradient(left, $startColor, $endColor);
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#{$startColor}',
+ endColorStr='#{$endColor}',
+ gradientType='1');
+}
+
+/// Background Radial
+/// @param {Color} $startColor [#3C3C3C] - Start Color
+/// @param {Percentage} $startPos [0%] - Start position
+/// @param {Color} $endColor [#999999] - End Color
+/// @param {Percentage} $endPos [100%] - End position
+@mixin background-radial($startColor: #FFFFFF,
+$startPos: 0%,
+$endColor: #000000,
+$endPos:100%) {
+ background: -moz-radial-gradient(center, ellipse cover, $startColor $startPos, $endColor $endPos);
+ background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop($startPos, $startColor), color-stop($endPos, $endColor));
+ background: -webkit-radial-gradient(center, ellipse cover, $startColor $startPos, $endColor $endPos);
+ background: -o-radial-gradient(center, ellipse cover, $startColor $startPos, $endColor $endPos);
+ background: -ms-radial-gradient(center, ellipse cover, $startColor $startPos, $endColor $endPos);
+ background: radial-gradient(ellipse at center, $startColor $startPos, $endColor $endPos);
+}
+
+/// Background Size
+/// @param {Size} $width [100%] - Width
+/// @param {Size} $width [$width] - Height
+/// @require {mixin} css3-prefix
+@mixin background-size($width: 100%,
+$height: $width) {
+ @if type-of($width)=='number' and $height !=null {
+ @include css3-prefix('background-size',
+ $width $height);
+ }
+ @else {
+ @include css3-prefix('background-size',
+ $width);
+ }
+}
+
+/// Background Color Opacity
+/// @param {Color} $color [100%] - Color
+/// @param {Double} $opacity [0.85] - Opacity
+@mixin background-opacity($color: #000,
+$opacity: 0.85) {
+ background: $color;
+ background: rgba($color, $opacity);
+}
+
+/// Border Radius
+/// @param {Size} $radius [5px] - Radius
+/// @require {mixin} css3-prefix
+@mixin border-radius($radius: 5px) {
+ @include css3-prefix('border-radius',
+ $radius);
+}
+
+/// Border Radius Separate
+/// @param {Size} $topLeftRadius [5px] - Top Left
+/// @param {Size} $topRightRadius [5px] - Top Right
+/// @param {Size} $bottomLeftRadius [5px] - Bottom Left
+/// @param {Size} $bottomRightRadius [5px] - Bottom Right
+@mixin border-radius-separate($topLeftRadius: 5px,
+$topRightRadius: 5px,
+$bottomLeftRadius: 5px,
+$bottomRightRadius: 5px) {
+ -webkit-border-top-left-radius: $topLeftRadius;
+ -webkit-border-top-right-radius: $topRightRadius;
+ -webkit-border-bottom-right-radius: $bottomRightRadius;
+ -webkit-border-bottom-left-radius: $bottomLeftRadius;
+ -moz-border-radius-topleft: $topLeftRadius;
+ -moz-border-radius-topright: $topRightRadius;
+ -moz-border-radius-bottomright: $bottomRightRadius;
+ -moz-border-radius-bottomleft: $bottomLeftRadius;
+ border-top-left-radius: $topLeftRadius;
+ border-top-right-radius: $topRightRadius;
+ border-bottom-right-radius: $bottomRightRadius;
+ border-bottom-left-radius: $bottomLeftRadius;
+}
+
+/// Box
+/// @param {*} $orient [horizontal] - Orientation
+/// @param {*} $pack [center] - Pack
+/// @param {*} $align [center] - Align
+/// @require {mixin} css3-prefix
+@mixin box($orient: horizontal,
+$pack: center,
+$align: center) {
+ display: -webkit-box;
+ display: -moz-box;
+ display: box;
+ @include css3-prefix('box-orient',
+ $orient);
+ @include css3-prefix('box-pack',
+ $pack);
+ @include css3-prefix('box-align',
+ $align);
+}
+
+/// Box RGBA
+/// @param {Integer} $r [60] - Red
+/// @param {Integer} $g [3] - Green
+/// @param {Integer} $b [12] - Blue
+/// @param {Double} $opacity [0.23] - Opacity
+/// @param {Color} $color [#3C3C3C] - Color
+@mixin box-rgba($r: 60,
+$g: 3,
+$b: 12,
+$opacity: 0.23,
+$color: #3C3C3C) {
+ background-color: transparent;
+ background-color: rgba($r, $g, $b, $opacity);
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$color}',
+ endColorstr='#{$color}');
+ zoom: 1;
+}
+
+/// Box Shadow
+/// @param {Size} $x [2px] - X
+/// @param {Size} $y [2px] - Y
+/// @param {Size} $blur [5px] - Blur
+/// @param {Color} $color [rgba(0,0,0,.4)] - Color
+/// @param {Boolean} $inset - Inset
+@mixin box-shadow($x: 2px,
+$y: 2px,
+$blur: 5px,
+$color: rgba(0, 0, 0, .4),
+$inset: "") {
+ @if ($inset !="") {
+ @include css3-prefix('box-shadow',
+ $inset $x $y $blur $color);
+ }
+ @else {
+ @include css3-prefix('box-shadow',
+ $x $y $blur $color);
+ }
+}
+
+/// Box Sizing
+/// @param {*} $type [border-box] - Type
+/// @require {mixin} css3-prefix
+@mixin box-sizing($type: border-box) {
+ @include css3-prefix('box-sizing',
+ $type);
+}
+
+/// Columns
+/// @param {Integer} $count [3] - Count
+/// @param {Integer} $gap [10] - Gap
+/// @require {mixin} css3-prefix
+@mixin columns($count: 3,
+$gap: 10) {
+ @include css3-prefix('column-count',
+ $count);
+ @include css3-prefix('column-gap',
+ $gap);
+}
+
+/// Double Borders
+/// @param {Color} $colorOne [#3C3C3C] - Color One
+/// @param {Color} $colorTwo [#999999] - Color Two
+/// @param {Size} $radius [0] - Radius
+/// @require {mixin} css3-prefix
+/// @require {mixin} border-radius
+@mixin double-borders($colorOne: #3C3C3C,
+$colorTwo: #999999,
+$radius: 0) {
+ border: 1px solid $colorOne;
+ @include css3-prefix('box-shadow',
+ 0 0 0 1px $colorTwo);
+ @include border-radius( $radius);
+}
+
+/// Flex
+/// @param {Integer} $value [1] - Value
+/// @require {mixin} css3-prefix
+@mixin flex($value: 1) {
+ @include css3-prefix('box-flex',
+ $value);
+}
+
+/// Flip
+/// @param {Double} $scaleX [-1] - ScaleX
+/// @require {mixin} css3-prefix
+@mixin flip($scaleX: -1) {
+ @include css3-prefix('transform',
+ scaleX($scaleX));
+ filter: FlipH;
+ -ms-filter: "FlipH";
+}
+
+/// Opacity
+/// @param {Double} $opacity [0.5] - Opacity
+/// @require {mixin} css3-prefix
+@mixin opacity($opacity: 0.5) {
+ $opacityMultiplied: ($opacity * 100);
+ filter: alpha(opacity=$opacityMultiplied);
+ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=" + $opacityMultiplied + ")";
+ @include css3-prefix('opacity',
+ $opacity);
+}
+
+/// Outline Radius
+/// @param {Size} $radius [5px] - Radius
+/// @require {mixin} css3-prefix
+@mixin outline-radius($radius: 5px) {
+ @include css3-prefix('outline-radius',
+ $radius);
+}
+
+/// Resize
+/// @param {*} $directoin [both] - Direction
+/// @require {mixin} css3-prefix
+@mixin resize($direction: both) {
+ @include css3-prefix('resize',
+ $direction);
+}
+
+/// Rotate
+///
+/// CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html
+/// @param {Double} $deg [0] - Degree
+/// @param {Double} $m11 [0] - M11
+/// @param {Double} $m12 [0] - M12
+/// @param {Double} $m21 [0] - M21
+/// @param {Double} $m22 [0] - M22
+/// @require {mixin} css3-prefix
+@mixin rotate($deg: 0,
+$m11: 0,
+$m12: 0,
+$m21: 0,
+$m22: 0) {
+ @include css3-prefix('transform',
+ rotate($deg + deg));
+ filter: progid:DXImageTransform.Microsoft.Matrix( M11=#{$m11},
+ M12=#{$m12},
+ M21=#{$m21},
+ M22=#{$m22},
+ sizingMethod='auto expand');
+ zoom: 1;
+}
+
+/// Text Shadow
+/// @param {Size} $x [2px] - X
+/// @param {Size} $y [2px] - Y
+/// @param {Size} $blur [2px] - Blur
+/// @param {Color} $color [rgba(0,0,0,.4)] - Color
+@mixin text-shadow($x: 2px,
+$y: 2px,
+$blur: 5px,
+$color: rgba(0, 0, 0, .4)) {
+ text-shadow: $x $y $blur $color;
+}
+
+/// Transform
+/// @param {List} $params - Params
+/// @require {mixin} css3-prefix
+@mixin transform($params) {
+ @include css3-prefix('transform',
+ $params);
+}
+
+/// Transform-Origin
+/// @param {List} $params - Params
+/// @require {mixin} css3-prefix
+@mixin transform-origin($params) {
+ @include css3-prefix('transform-origin',
+ $params);
+}
+
+// Transform-Style
+/// @param {List} $params - Params
+/// @require {mixin} css3-prefix
+@mixin transform-style($style: preserve-3d) {
+ @include css3-prefix('transform-style',
+ $style);
+}
+
+/// Transition
+/// @param {List} $properties - Properties
+/// @require {mixin} css3-prefix
+@mixin transition($properties...) {
+ @if length($properties)>=1 {
+ @include css3-prefix('transition',
+ $properties);
+ }
+ @else {
+ @include css3-prefix('transition',
+ "all 0.2s ease-in-out 0s");
+ }
+}
+
+/// Triple Borders
+/// @param {Color} $colorOne [#3C3C3C] - Color One
+/// @param {Color} $colorTwo [#999999] - Color Two
+/// @param {Color} $colorThree [#000000] - Color Three
+/// @param {Size} $radius [0] - Radius
+/// @require {mixin} border-radius
+/// @require {mixin} css3-prefix
+@mixin triple-borders($colorOne: #3C3C3C,
+$colorTwo: #999999,
+$colorThree: #000000,
+$radius: 0) {
+ border: 1px solid $colorOne;
+ @include border-radius($radius);
+ @include css3-prefix('box-shadow',
+ "0 0 0 1px #{$colorTwo}, 0 0 0 2px #{$colorThree}");
+}
+
+/// Keyframes
+/// @param {*} $animation-name - Animation name
+/// @content [Animation css]
+@mixin keyframes($animation-name) {
+ @-webkit-keyframes #{$animation-name} {
+ @content;
+ }
+ @-moz-keyframes #{$animation-name} {
+ @content;
+ }
+ @-ms-keyframes #{$animation-name} {
+ @content;
+ }
+ @-o-keyframes #{$animation-name} {
+ @content;
+ }
+ @keyframes #{$animation-name} {
+ @content;
+ }
+}
+
+/// Animation
+/// @param {*} $str - name duration timing-function delay iteration-count direction fill-mode play-state ([http://www.w3schools.com/cssref/css3_pr_animation.asp](http://www.w3schools.com/cssref/css3_pr_animation.asp))
+/// @require {mixin} css3-prefix
+@mixin animation($str) {
+ @include css3-prefix('animation',
+ $str);
+}
+
+// --------------------------------------------------
+// Flexbox SASS mixins
+// The spec: http://www.w3.org/TR/css3-flexbox
+// --------------------------------------------------
+// Flexbox display
+@mixin flexbox() {
+ display: -webkit-box;
+ display: -moz-box;
+ display: -ms-flexbox;
+ display: -webkit-flex;
+ display: flex;
+}
+
+// The 'flex' shorthand
+// - applies to: flex items
+// <positive-number>, initial, auto, or none
+@mixin flex($values) {
+ -webkit-box-flex: $values;
+ -moz-box-flex: $values;
+ -webkit-flex: $values;
+ -ms-flex: $values;
+ flex: $values;
+}
+
+// Flex Flow Direction
+// - applies to: flex containers
+// row | row-reverse | column | column-reverse
+@mixin flex-direction($direction) {
+ -webkit-flex-direction: $direction;
+ -moz-flex-direction: $direction;
+ -ms-flex-direction: $direction;
+ flex-direction: $direction;
+}
+
+// Flex Line Wrapping
+// - applies to: flex containers
+// nowrap | wrap | wrap-reverse
+@mixin flex-wrap($wrap) {
+ -webkit-flex-wrap: $wrap;
+ -moz-flex-wrap: $wrap;
+ -ms-flex-wrap: $wrap;
+ flex-wrap: $wrap;
+}
+
+// Flex Direction and Wrap
+// - applies to: flex containers
+// <flex-direction> || <flex-wrap>
+@mixin flex-flow($flow) {
+ -webkit-flex-flow: $flow;
+ -moz-flex-flow: $flow;
+ -ms-flex-flow: $flow;
+ flex-flow: $flow;
+}
+
+// Display Order
+// - applies to: flex items
+// <integer>
+@mixin order($val) {
+ -webkit-box-ordinal-group: $val;
+ -moz-box-ordinal-group: $val;
+ -ms-flex-order: $val;
+ -webkit-order: $val;
+ order: $val;
+}
+
+// Flex grow factor
+// - applies to: flex items
+// <number>
+@mixin flex-grow($grow) {
+ -webkit-flex-grow: $grow;
+ -moz-flex-grow: $grow;
+ -ms-flex-grow: $grow;
+ flex-grow: $grow;
+}
+
+// Flex shrink
+// - applies to: flex item shrink factor
+// <number>
+@mixin flex-shrink($shrink) {
+ -webkit-flex-shrink: $shrink;
+ -moz-flex-shrink: $shrink;
+ -ms-flex-shrink: $shrink;
+ flex-shrink: $shrink;
+}
+
+// Flex basis
+// - the initial main size of the flex item
+// - applies to: flex itemsnitial main size of the flex item
+// <width>
+@mixin flex-basis($width) {
+ -webkit-flex-basis: $width;
+ -moz-flex-basis: $width;
+ -ms-flex-basis: $width;
+ flex-basis: $width;
+}
+
+// Axis Alignment
+// - applies to: flex containers
+// flex-start | flex-end | center | space-between | space-around
+@mixin justify-content($justify) {
+ -webkit-justify-content: $justify;
+ -moz-justify-content: $justify;
+ -ms-justify-content: $justify;
+ justify-content: $justify;
+ -ms-flex-pack: $justify;
+}
+
+// Packing Flex Lines
+// - applies to: multi-line flex containers
+// flex-start | flex-end | center | space-between | space-around | stretch
+@mixin align-content($align) {
+ -webkit-align-content: $align;
+ -moz-align-content: $align;
+ -ms-align-content: $align;
+ align-content: $align;
+}
+
+// Cross-axis Alignment
+// - applies to: flex containers
+// flex-start | flex-end | center | baseline | stretch
+@mixin align-items($align) {
+ -webkit-align-items: $align;
+ -moz-align-items: $align;
+ -ms-align-items: $align;
+ align-items: $align;
+}
+
+// Cross-axis Alignment
+// - applies to: flex items
+// auto | flex-start | flex-end | center | baseline | stretch
+@mixin align-self($align) {
+ -webkit-align-self: $align;
+ -moz-align-self: $align;
+ -ms-align-self: $align;
+ align-self: $align;
}
\ No newline at end of file
diff --git a/cern_components/patterns/molecules/related-content/sass/variables.scss b/patterns/molecules/related-content/sass/variables.scss
similarity index 100%
rename from cern_components/patterns/molecules/related-content/sass/variables.scss
rename to patterns/molecules/related-content/sass/variables.scss
diff --git a/cern_components/patterns/molecules/resource-display/css/resource-display.component.css b/patterns/molecules/resource-display/css/resource-display.component.css
similarity index 100%
rename from cern_components/patterns/molecules/resource-display/css/resource-display.component.css
rename to patterns/molecules/resource-display/css/resource-display.component.css
diff --git a/cern_components/patterns/molecules/resource-display/images/video.png b/patterns/molecules/resource-display/images/video.png
similarity index 100%
rename from cern_components/patterns/molecules/resource-display/images/video.png
rename to patterns/molecules/resource-display/images/video.png
diff --git a/cern_components/patterns/molecules/resource-display/js/resource-display.component.js b/patterns/molecules/resource-display/js/resource-display.component.js
similarity index 100%
rename from cern_components/patterns/molecules/resource-display/js/resource-display.component.js
rename to patterns/molecules/resource-display/js/resource-display.component.js
diff --git a/cern_components/patterns/molecules/resource-display/resource-display.html.twig b/patterns/molecules/resource-display/resource-display.html.twig
similarity index 100%
rename from cern_components/patterns/molecules/resource-display/resource-display.html.twig
rename to patterns/molecules/resource-display/resource-display.html.twig
diff --git a/cern_components/patterns/molecules/resource-display/resource-display.ui_patterns.yml b/patterns/molecules/resource-display/resource-display.ui_patterns.yml
similarity index 100%
rename from cern_components/patterns/molecules/resource-display/resource-display.ui_patterns.yml
rename to patterns/molecules/resource-display/resource-display.ui_patterns.yml
diff --git a/cern_components/patterns/molecules/resource-display/scss/resource-display.component.scss b/patterns/molecules/resource-display/scss/resource-display.component.scss
similarity index 100%
rename from cern_components/patterns/molecules/resource-display/scss/resource-display.component.scss
rename to patterns/molecules/resource-display/scss/resource-display.component.scss
diff --git a/cern_components/patterns/molecules/row/css/row.component.css b/patterns/molecules/row/css/row.component.css
similarity index 100%
rename from cern_components/patterns/molecules/row/css/row.component.css
rename to patterns/molecules/row/css/row.component.css
diff --git a/cern_components/patterns/molecules/row/js/row.component.js b/patterns/molecules/row/js/row.component.js
similarity index 100%
rename from cern_components/patterns/molecules/row/js/row.component.js
rename to patterns/molecules/row/js/row.component.js
diff --git a/cern_components/patterns/molecules/row/row.html.twig b/patterns/molecules/row/row.html.twig
similarity index 99%
rename from cern_components/patterns/molecules/row/row.html.twig
rename to patterns/molecules/row/row.html.twig
index 13bff44f..44c30e4e 100755
--- a/cern_components/patterns/molecules/row/row.html.twig
+++ b/patterns/molecules/row/row.html.twig
@@ -13,7 +13,7 @@
{% set title_attributes = title_attributes.setAttribute('style', "color:" ~ variants.title_color.color ~ "") %}
{% endif %}
-{%
+{%
set classes = [
"component-row",
"component-row__display__" ~ variants.display.value,
@@ -22,7 +22,7 @@
%}
{% if (variants.header.value == 1) %}
- {%
+ {%
set classes = classes|merge(["component-row__has-header"])
%}
{% endif %}
diff --git a/cern_components/patterns/molecules/row/row.ui_patterns.yml b/patterns/molecules/row/row.ui_patterns.yml
similarity index 100%
rename from cern_components/patterns/molecules/row/row.ui_patterns.yml
rename to patterns/molecules/row/row.ui_patterns.yml
diff --git a/cern_components/patterns/molecules/preview-card/sass/mixins.scss b/patterns/molecules/row/scss/mixins.scss
similarity index 96%
rename from cern_components/patterns/molecules/preview-card/sass/mixins.scss
rename to patterns/molecules/row/scss/mixins.scss
index 6c20dc3f..c2a8dc4d 100755
--- a/cern_components/patterns/molecules/preview-card/sass/mixins.scss
+++ b/patterns/molecules/row/scss/mixins.scss
@@ -1,567 +1,567 @@
-///
-/// String replace
-///
-@function str-replace($string, $search, $replace: "") {
- $index: str-index($string, $search);
- @if $index {
- @return str-slice($string, 1, $index - 1)+$replace+str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
- }
- @return $string;
-}
-
-///
-/// Font face mixins
-///
-@mixin font-face($name, $path, $weight: null, $style: null, $exts: eot woff ttf svg) {
- $src: null;
- $extmods: ( eot: "?", svg: "#" + str-replace($name, " ", "_"));
- $formats: ( otf: "opentype", ttf: "truetype");
- @each $ext in $exts {
- $extmod: if(map-has-key($extmods, $ext), $ext + map-get($extmods, $ext), $ext);
- $format: if(map-has-key($formats, $ext), map-get($formats, $ext), $ext);
- $src: append($src, url(quote($path + "." + $extmod)) format(quote($format)), comma);
- }
- @font-face {
- font-family: quote($name);
- font-style: $style;
- font-weight: $weight;
- src: $src;
- }
-}
-
-///
-/// Font size mixins
-///
-@mixin font-size($sizeValue: 1.6) {
- font-size: ($sizeValue * 10) + px;
- font-size: $sizeValue + rem;
-}
-
-///
-/// @extend %clearfix;
-///
-%clearfix {
- clear: both;
- &:before,
- &:after {
- content: "";
- display: table;
- }
- &:after {
- clear: both;
- }
-}
-
-/// Adds a browser prefix to the property
-/// @param {*} $property Property
-/// @param {*} $value Value
-@mixin css3-prefix($property,
-$value) {
- -webkit-#{$property}: #{$value};
- -khtml-#{$property}: #{$value};
- -moz-#{$property}: #{$value};
- -ms-#{$property}: #{$value};
- -o-#{$property}: #{$value};
- #{$property}: #{$value};
-}
-
-/// Background Gradient
-/// @param {Color} $startColor [#3C3C3C] - Start Color
-/// @param {Color} $endColor [#999999] - End Color
-@mixin background-gradient($startColor: #3C3C3C,
-$endColor: #999999) {
- background-color: $startColor;
- background-image: -webkit-gradient(linear, left top, left bottom, from($startColor), to($endColor));
- background-image: -webkit-linear-gradient(top, $startColor, $endColor);
- background-image: -moz-linear-gradient(top, $startColor, $endColor);
- background-image: -ms-linear-gradient(top, $startColor, $endColor);
- background-image: -o-linear-gradient(top, $startColor, $endColor);
- background-image: linear-gradient(top, $startColor, $endColor);
- filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#{$startColor}',
- endColorStr='#{$endColor}');
-}
-
-/// Background Horizontal
-/// @param {Color} $startColor [#3C3C3C] - Start Color
-/// @param {Color} $endColor [#999999] - End Color
-@mixin background-horizontal($startColor: #3C3C3C,
-$endColor: #999999) {
- background-color: $startColor;
- background-image: -webkit-gradient(linear, left top, right top, from($startColor), to($endColor));
- background-image: -webkit-linear-gradient(left, $startColor, $endColor);
- background-image: -moz-linear-gradient(left, $startColor, $endColor);
- background-image: -ms-linear-gradient(left, $startColor, $endColor);
- background-image: -o-linear-gradient(left, $startColor, $endColor);
- background-image: linear-gradient(left, $startColor, $endColor);
- filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#{$startColor}',
- endColorStr='#{$endColor}',
- gradientType='1');
-}
-
-/// Background Radial
-/// @param {Color} $startColor [#3C3C3C] - Start Color
-/// @param {Percentage} $startPos [0%] - Start position
-/// @param {Color} $endColor [#999999] - End Color
-/// @param {Percentage} $endPos [100%] - End position
-@mixin background-radial($startColor: #FFFFFF,
-$startPos: 0%,
-$endColor: #000000,
-$endPos:100%) {
- background: -moz-radial-gradient(center, ellipse cover, $startColor $startPos, $endColor $endPos);
- background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop($startPos, $startColor), color-stop($endPos, $endColor));
- background: -webkit-radial-gradient(center, ellipse cover, $startColor $startPos, $endColor $endPos);
- background: -o-radial-gradient(center, ellipse cover, $startColor $startPos, $endColor $endPos);
- background: -ms-radial-gradient(center, ellipse cover, $startColor $startPos, $endColor $endPos);
- background: radial-gradient(ellipse at center, $startColor $startPos, $endColor $endPos);
-}
-
-/// Background Size
-/// @param {Size} $width [100%] - Width
-/// @param {Size} $width [$width] - Height
-/// @require {mixin} css3-prefix
-@mixin background-size($width: 100%,
-$height: $width) {
- @if type-of($width)=='number' and $height !=null {
- @include css3-prefix('background-size',
- $width $height);
- }
- @else {
- @include css3-prefix('background-size',
- $width);
- }
-}
-
-/// Background Color Opacity
-/// @param {Color} $color [100%] - Color
-/// @param {Double} $opacity [0.85] - Opacity
-@mixin background-opacity($color: #000,
-$opacity: 0.85) {
- background: $color;
- background: rgba($color, $opacity);
-}
-
-/// Border Radius
-/// @param {Size} $radius [5px] - Radius
-/// @require {mixin} css3-prefix
-@mixin border-radius($radius: 5px) {
- @include css3-prefix('border-radius',
- $radius);
-}
-
-/// Border Radius Separate
-/// @param {Size} $topLeftRadius [5px] - Top Left
-/// @param {Size} $topRightRadius [5px] - Top Right
-/// @param {Size} $bottomLeftRadius [5px] - Bottom Left
-/// @param {Size} $bottomRightRadius [5px] - Bottom Right
-@mixin border-radius-separate($topLeftRadius: 5px,
-$topRightRadius: 5px,
-$bottomLeftRadius: 5px,
-$bottomRightRadius: 5px) {
- -webkit-border-top-left-radius: $topLeftRadius;
- -webkit-border-top-right-radius: $topRightRadius;
- -webkit-border-bottom-right-radius: $bottomRightRadius;
- -webkit-border-bottom-left-radius: $bottomLeftRadius;
- -moz-border-radius-topleft: $topLeftRadius;
- -moz-border-radius-topright: $topRightRadius;
- -moz-border-radius-bottomright: $bottomRightRadius;
- -moz-border-radius-bottomleft: $bottomLeftRadius;
- border-top-left-radius: $topLeftRadius;
- border-top-right-radius: $topRightRadius;
- border-bottom-right-radius: $bottomRightRadius;
- border-bottom-left-radius: $bottomLeftRadius;
-}
-
-/// Box
-/// @param {*} $orient [horizontal] - Orientation
-/// @param {*} $pack [center] - Pack
-/// @param {*} $align [center] - Align
-/// @require {mixin} css3-prefix
-@mixin box($orient: horizontal,
-$pack: center,
-$align: center) {
- display: -webkit-box;
- display: -moz-box;
- display: box;
- @include css3-prefix('box-orient',
- $orient);
- @include css3-prefix('box-pack',
- $pack);
- @include css3-prefix('box-align',
- $align);
-}
-
-/// Box RGBA
-/// @param {Integer} $r [60] - Red
-/// @param {Integer} $g [3] - Green
-/// @param {Integer} $b [12] - Blue
-/// @param {Double} $opacity [0.23] - Opacity
-/// @param {Color} $color [#3C3C3C] - Color
-@mixin box-rgba($r: 60,
-$g: 3,
-$b: 12,
-$opacity: 0.23,
-$color: #3C3C3C) {
- background-color: transparent;
- background-color: rgba($r, $g, $b, $opacity);
- filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$color}',
- endColorstr='#{$color}');
- zoom: 1;
-}
-
-/// Box Shadow
-/// @param {Size} $x [2px] - X
-/// @param {Size} $y [2px] - Y
-/// @param {Size} $blur [5px] - Blur
-/// @param {Color} $color [rgba(0,0,0,.4)] - Color
-/// @param {Boolean} $inset - Inset
-@mixin box-shadow($x: 2px,
-$y: 2px,
-$blur: 5px,
-$color: rgba(0, 0, 0, .4),
-$inset: "") {
- @if ($inset !="") {
- @include css3-prefix('box-shadow',
- $inset $x $y $blur $color);
- }
- @else {
- @include css3-prefix('box-shadow',
- $x $y $blur $color);
- }
-}
-
-/// Box Sizing
-/// @param {*} $type [border-box] - Type
-/// @require {mixin} css3-prefix
-@mixin box-sizing($type: border-box) {
- @include css3-prefix('box-sizing',
- $type);
-}
-
-/// Columns
-/// @param {Integer} $count [3] - Count
-/// @param {Integer} $gap [10] - Gap
-/// @require {mixin} css3-prefix
-@mixin columns($count: 3,
-$gap: 10) {
- @include css3-prefix('column-count',
- $count);
- @include css3-prefix('column-gap',
- $gap);
-}
-
-/// Double Borders
-/// @param {Color} $colorOne [#3C3C3C] - Color One
-/// @param {Color} $colorTwo [#999999] - Color Two
-/// @param {Size} $radius [0] - Radius
-/// @require {mixin} css3-prefix
-/// @require {mixin} border-radius
-@mixin double-borders($colorOne: #3C3C3C,
-$colorTwo: #999999,
-$radius: 0) {
- border: 1px solid $colorOne;
- @include css3-prefix('box-shadow',
- 0 0 0 1px $colorTwo);
- @include border-radius( $radius);
-}
-
-/// Flex
-/// @param {Integer} $value [1] - Value
-/// @require {mixin} css3-prefix
-@mixin flex($value: 1) {
- @include css3-prefix('box-flex',
- $value);
-}
-
-/// Flip
-/// @param {Double} $scaleX [-1] - ScaleX
-/// @require {mixin} css3-prefix
-@mixin flip($scaleX: -1) {
- @include css3-prefix('transform',
- scaleX($scaleX));
- filter: FlipH;
- -ms-filter: "FlipH";
-}
-
-/// Opacity
-/// @param {Double} $opacity [0.5] - Opacity
-/// @require {mixin} css3-prefix
-@mixin opacity($opacity: 0.5) {
- $opacityMultiplied: ($opacity * 100);
- filter: alpha(opacity=$opacityMultiplied);
- -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=" + $opacityMultiplied + ")";
- @include css3-prefix('opacity',
- $opacity);
-}
-
-/// Outline Radius
-/// @param {Size} $radius [5px] - Radius
-/// @require {mixin} css3-prefix
-@mixin outline-radius($radius: 5px) {
- @include css3-prefix('outline-radius',
- $radius);
-}
-
-/// Resize
-/// @param {*} $directoin [both] - Direction
-/// @require {mixin} css3-prefix
-@mixin resize($direction: both) {
- @include css3-prefix('resize',
- $direction);
-}
-
-/// Rotate
-///
-/// CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html
-/// @param {Double} $deg [0] - Degree
-/// @param {Double} $m11 [0] - M11
-/// @param {Double} $m12 [0] - M12
-/// @param {Double} $m21 [0] - M21
-/// @param {Double} $m22 [0] - M22
-/// @require {mixin} css3-prefix
-@mixin rotate($deg: 0,
-$m11: 0,
-$m12: 0,
-$m21: 0,
-$m22: 0) {
- @include css3-prefix('transform',
- rotate($deg + deg));
- filter: progid:DXImageTransform.Microsoft.Matrix( M11=#{$m11},
- M12=#{$m12},
- M21=#{$m21},
- M22=#{$m22},
- sizingMethod='auto expand');
- zoom: 1;
-}
-
-/// Text Shadow
-/// @param {Size} $x [2px] - X
-/// @param {Size} $y [2px] - Y
-/// @param {Size} $blur [2px] - Blur
-/// @param {Color} $color [rgba(0,0,0,.4)] - Color
-@mixin text-shadow($x: 2px,
-$y: 2px,
-$blur: 5px,
-$color: rgba(0, 0, 0, .4)) {
- text-shadow: $x $y $blur $color;
-}
-
-/// Transform
-/// @param {List} $params - Params
-/// @require {mixin} css3-prefix
-@mixin transform($params) {
- @include css3-prefix('transform',
- $params);
-}
-
-/// Transform-Origin
-/// @param {List} $params - Params
-/// @require {mixin} css3-prefix
-@mixin transform-origin($params) {
- @include css3-prefix('transform-origin',
- $params);
-}
-
-// Transform-Style
-/// @param {List} $params - Params
-/// @require {mixin} css3-prefix
-@mixin transform-style($style: preserve-3d) {
- @include css3-prefix('transform-style',
- $style);
-}
-
-/// Transition
-/// @param {List} $properties - Properties
-/// @require {mixin} css3-prefix
-@mixin transition($properties...) {
- @if length($properties)>=1 {
- @include css3-prefix('transition',
- $properties);
- }
- @else {
- @include css3-prefix('transition',
- "all 0.2s ease-in-out 0s");
- }
-}
-
-/// Triple Borders
-/// @param {Color} $colorOne [#3C3C3C] - Color One
-/// @param {Color} $colorTwo [#999999] - Color Two
-/// @param {Color} $colorThree [#000000] - Color Three
-/// @param {Size} $radius [0] - Radius
-/// @require {mixin} border-radius
-/// @require {mixin} css3-prefix
-@mixin triple-borders($colorOne: #3C3C3C,
-$colorTwo: #999999,
-$colorThree: #000000,
-$radius: 0) {
- border: 1px solid $colorOne;
- @include border-radius($radius);
- @include css3-prefix('box-shadow',
- "0 0 0 1px #{$colorTwo}, 0 0 0 2px #{$colorThree}");
-}
-
-/// Keyframes
-/// @param {*} $animation-name - Animation name
-/// @content [Animation css]
-@mixin keyframes($animation-name) {
- @-webkit-keyframes #{$animation-name} {
- @content;
- }
- @-moz-keyframes #{$animation-name} {
- @content;
- }
- @-ms-keyframes #{$animation-name} {
- @content;
- }
- @-o-keyframes #{$animation-name} {
- @content;
- }
- @keyframes #{$animation-name} {
- @content;
- }
-}
-
-/// Animation
-/// @param {*} $str - name duration timing-function delay iteration-count direction fill-mode play-state ([http://www.w3schools.com/cssref/css3_pr_animation.asp](http://www.w3schools.com/cssref/css3_pr_animation.asp))
-/// @require {mixin} css3-prefix
-@mixin animation($str) {
- @include css3-prefix('animation',
- $str);
-}
-
-// --------------------------------------------------
-// Flexbox SASS mixins
-// The spec: http://www.w3.org/TR/css3-flexbox
-// --------------------------------------------------
-// Flexbox display
-@mixin flexbox() {
- display: -webkit-box;
- display: -moz-box;
- display: -ms-flexbox;
- display: -webkit-flex;
- display: flex;
-}
-
-// The 'flex' shorthand
-// - applies to: flex items
-// <positive-number>, initial, auto, or none
-@mixin flex($values) {
- -webkit-box-flex: $values;
- -moz-box-flex: $values;
- -webkit-flex: $values;
- -ms-flex: $values;
- flex: $values;
-}
-
-// Flex Flow Direction
-// - applies to: flex containers
-// row | row-reverse | column | column-reverse
-@mixin flex-direction($direction) {
- -webkit-flex-direction: $direction;
- -moz-flex-direction: $direction;
- -ms-flex-direction: $direction;
- flex-direction: $direction;
-}
-
-// Flex Line Wrapping
-// - applies to: flex containers
-// nowrap | wrap | wrap-reverse
-@mixin flex-wrap($wrap) {
- -webkit-flex-wrap: $wrap;
- -moz-flex-wrap: $wrap;
- -ms-flex-wrap: $wrap;
- flex-wrap: $wrap;
-}
-
-// Flex Direction and Wrap
-// - applies to: flex containers
-// <flex-direction> || <flex-wrap>
-@mixin flex-flow($flow) {
- -webkit-flex-flow: $flow;
- -moz-flex-flow: $flow;
- -ms-flex-flow: $flow;
- flex-flow: $flow;
-}
-
-// Display Order
-// - applies to: flex items
-// <integer>
-@mixin order($val) {
- -webkit-box-ordinal-group: $val;
- -moz-box-ordinal-group: $val;
- -ms-flex-order: $val;
- -webkit-order: $val;
- order: $val;
-}
-
-// Flex grow factor
-// - applies to: flex items
-// <number>
-@mixin flex-grow($grow) {
- -webkit-flex-grow: $grow;
- -moz-flex-grow: $grow;
- -ms-flex-grow: $grow;
- flex-grow: $grow;
-}
-
-// Flex shrink
-// - applies to: flex item shrink factor
-// <number>
-@mixin flex-shrink($shrink) {
- -webkit-flex-shrink: $shrink;
- -moz-flex-shrink: $shrink;
- -ms-flex-shrink: $shrink;
- flex-shrink: $shrink;
-}
-
-// Flex basis
-// - the initial main size of the flex item
-// - applies to: flex itemsnitial main size of the flex item
-// <width>
-@mixin flex-basis($width) {
- -webkit-flex-basis: $width;
- -moz-flex-basis: $width;
- -ms-flex-basis: $width;
- flex-basis: $width;
-}
-
-// Axis Alignment
-// - applies to: flex containers
-// flex-start | flex-end | center | space-between | space-around
-@mixin justify-content($justify) {
- -webkit-justify-content: $justify;
- -moz-justify-content: $justify;
- -ms-justify-content: $justify;
- justify-content: $justify;
- -ms-flex-pack: $justify;
-}
-
-// Packing Flex Lines
-// - applies to: multi-line flex containers
-// flex-start | flex-end | center | space-between | space-around | stretch
-@mixin align-content($align) {
- -webkit-align-content: $align;
- -moz-align-content: $align;
- -ms-align-content: $align;
- align-content: $align;
-}
-
-// Cross-axis Alignment
-// - applies to: flex containers
-// flex-start | flex-end | center | baseline | stretch
-@mixin align-items($align) {
- -webkit-align-items: $align;
- -moz-align-items: $align;
- -ms-align-items: $align;
- align-items: $align;
-}
-
-// Cross-axis Alignment
-// - applies to: flex items
-// auto | flex-start | flex-end | center | baseline | stretch
-@mixin align-self($align) {
- -webkit-align-self: $align;
- -moz-align-self: $align;
- -ms-align-self: $align;
- align-self: $align;
+///
+/// String replace
+///
+@function str-replace($string, $search, $replace: "") {
+ $index: str-index($string, $search);
+ @if $index {
+ @return str-slice($string, 1, $index - 1)+$replace+str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
+ }
+ @return $string;
+}
+
+///
+/// Font face mixins
+///
+@mixin font-face($name, $path, $weight: null, $style: null, $exts: eot woff ttf svg) {
+ $src: null;
+ $extmods: ( eot: "?", svg: "#" + str-replace($name, " ", "_"));
+ $formats: ( otf: "opentype", ttf: "truetype");
+ @each $ext in $exts {
+ $extmod: if(map-has-key($extmods, $ext), $ext + map-get($extmods, $ext), $ext);
+ $format: if(map-has-key($formats, $ext), map-get($formats, $ext), $ext);
+ $src: append($src, url(quote($path + "." + $extmod)) format(quote($format)), comma);
+ }
+ @font-face {
+ font-family: quote($name);
+ font-style: $style;
+ font-weight: $weight;
+ src: $src;
+ }
+}
+
+///
+/// Font size mixins
+///
+@mixin font-size($sizeValue: 1.6) {
+ font-size: ($sizeValue * 10) + px;
+ font-size: $sizeValue + rem;
+}
+
+///
+/// @extend %clearfix;
+///
+%clearfix {
+ clear: both;
+ &:before,
+ &:after {
+ content: "";
+ display: table;
+ }
+ &:after {
+ clear: both;
+ }
+}
+
+/// Adds a browser prefix to the property
+/// @param {*} $property Property
+/// @param {*} $value Value
+@mixin css3-prefix($property,
+$value) {
+ -webkit-#{$property}: #{$value};
+ -khtml-#{$property}: #{$value};
+ -moz-#{$property}: #{$value};
+ -ms-#{$property}: #{$value};
+ -o-#{$property}: #{$value};
+ #{$property}: #{$value};
+}
+
+/// Background Gradient
+/// @param {Color} $startColor [#3C3C3C] - Start Color
+/// @param {Color} $endColor [#999999] - End Color
+@mixin background-gradient($startColor: #3C3C3C,
+$endColor: #999999) {
+ background-color: $startColor;
+ background-image: -webkit-gradient(linear, left top, left bottom, from($startColor), to($endColor));
+ background-image: -webkit-linear-gradient(top, $startColor, $endColor);
+ background-image: -moz-linear-gradient(top, $startColor, $endColor);
+ background-image: -ms-linear-gradient(top, $startColor, $endColor);
+ background-image: -o-linear-gradient(top, $startColor, $endColor);
+ background-image: linear-gradient(top, $startColor, $endColor);
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#{$startColor}',
+ endColorStr='#{$endColor}');
+}
+
+/// Background Horizontal
+/// @param {Color} $startColor [#3C3C3C] - Start Color
+/// @param {Color} $endColor [#999999] - End Color
+@mixin background-horizontal($startColor: #3C3C3C,
+$endColor: #999999) {
+ background-color: $startColor;
+ background-image: -webkit-gradient(linear, left top, right top, from($startColor), to($endColor));
+ background-image: -webkit-linear-gradient(left, $startColor, $endColor);
+ background-image: -moz-linear-gradient(left, $startColor, $endColor);
+ background-image: -ms-linear-gradient(left, $startColor, $endColor);
+ background-image: -o-linear-gradient(left, $startColor, $endColor);
+ background-image: linear-gradient(left, $startColor, $endColor);
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#{$startColor}',
+ endColorStr='#{$endColor}',
+ gradientType='1');
+}
+
+/// Background Radial
+/// @param {Color} $startColor [#3C3C3C] - Start Color
+/// @param {Percentage} $startPos [0%] - Start position
+/// @param {Color} $endColor [#999999] - End Color
+/// @param {Percentage} $endPos [100%] - End position
+@mixin background-radial($startColor: #FFFFFF,
+$startPos: 0%,
+$endColor: #000000,
+$endPos:100%) {
+ background: -moz-radial-gradient(center, ellipse cover, $startColor $startPos, $endColor $endPos);
+ background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop($startPos, $startColor), color-stop($endPos, $endColor));
+ background: -webkit-radial-gradient(center, ellipse cover, $startColor $startPos, $endColor $endPos);
+ background: -o-radial-gradient(center, ellipse cover, $startColor $startPos, $endColor $endPos);
+ background: -ms-radial-gradient(center, ellipse cover, $startColor $startPos, $endColor $endPos);
+ background: radial-gradient(ellipse at center, $startColor $startPos, $endColor $endPos);
+}
+
+/// Background Size
+/// @param {Size} $width [100%] - Width
+/// @param {Size} $width [$width] - Height
+/// @require {mixin} css3-prefix
+@mixin background-size($width: 100%,
+$height: $width) {
+ @if type-of($width)=='number' and $height !=null {
+ @include css3-prefix('background-size',
+ $width $height);
+ }
+ @else {
+ @include css3-prefix('background-size',
+ $width);
+ }
+}
+
+/// Background Color Opacity
+/// @param {Color} $color [100%] - Color
+/// @param {Double} $opacity [0.85] - Opacity
+@mixin background-opacity($color: #000,
+$opacity: 0.85) {
+ background: $color;
+ background: rgba($color, $opacity);
+}
+
+/// Border Radius
+/// @param {Size} $radius [5px] - Radius
+/// @require {mixin} css3-prefix
+@mixin border-radius($radius: 5px) {
+ @include css3-prefix('border-radius',
+ $radius);
+}
+
+/// Border Radius Separate
+/// @param {Size} $topLeftRadius [5px] - Top Left
+/// @param {Size} $topRightRadius [5px] - Top Right
+/// @param {Size} $bottomLeftRadius [5px] - Bottom Left
+/// @param {Size} $bottomRightRadius [5px] - Bottom Right
+@mixin border-radius-separate($topLeftRadius: 5px,
+$topRightRadius: 5px,
+$bottomLeftRadius: 5px,
+$bottomRightRadius: 5px) {
+ -webkit-border-top-left-radius: $topLeftRadius;
+ -webkit-border-top-right-radius: $topRightRadius;
+ -webkit-border-bottom-right-radius: $bottomRightRadius;
+ -webkit-border-bottom-left-radius: $bottomLeftRadius;
+ -moz-border-radius-topleft: $topLeftRadius;
+ -moz-border-radius-topright: $topRightRadius;
+ -moz-border-radius-bottomright: $bottomRightRadius;
+ -moz-border-radius-bottomleft: $bottomLeftRadius;
+ border-top-left-radius: $topLeftRadius;
+ border-top-right-radius: $topRightRadius;
+ border-bottom-right-radius: $bottomRightRadius;
+ border-bottom-left-radius: $bottomLeftRadius;
+}
+
+/// Box
+/// @param {*} $orient [horizontal] - Orientation
+/// @param {*} $pack [center] - Pack
+/// @param {*} $align [center] - Align
+/// @require {mixin} css3-prefix
+@mixin box($orient: horizontal,
+$pack: center,
+$align: center) {
+ display: -webkit-box;
+ display: -moz-box;
+ display: box;
+ @include css3-prefix('box-orient',
+ $orient);
+ @include css3-prefix('box-pack',
+ $pack);
+ @include css3-prefix('box-align',
+ $align);
+}
+
+/// Box RGBA
+/// @param {Integer} $r [60] - Red
+/// @param {Integer} $g [3] - Green
+/// @param {Integer} $b [12] - Blue
+/// @param {Double} $opacity [0.23] - Opacity
+/// @param {Color} $color [#3C3C3C] - Color
+@mixin box-rgba($r: 60,
+$g: 3,
+$b: 12,
+$opacity: 0.23,
+$color: #3C3C3C) {
+ background-color: transparent;
+ background-color: rgba($r, $g, $b, $opacity);
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$color}',
+ endColorstr='#{$color}');
+ zoom: 1;
+}
+
+/// Box Shadow
+/// @param {Size} $x [2px] - X
+/// @param {Size} $y [2px] - Y
+/// @param {Size} $blur [5px] - Blur
+/// @param {Color} $color [rgba(0,0,0,.4)] - Color
+/// @param {Boolean} $inset - Inset
+@mixin box-shadow($x: 2px,
+$y: 2px,
+$blur: 5px,
+$color: rgba(0, 0, 0, .4),
+$inset: "") {
+ @if ($inset !="") {
+ @include css3-prefix('box-shadow',
+ $inset $x $y $blur $color);
+ }
+ @else {
+ @include css3-prefix('box-shadow',
+ $x $y $blur $color);
+ }
+}
+
+/// Box Sizing
+/// @param {*} $type [border-box] - Type
+/// @require {mixin} css3-prefix
+@mixin box-sizing($type: border-box) {
+ @include css3-prefix('box-sizing',
+ $type);
+}
+
+/// Columns
+/// @param {Integer} $count [3] - Count
+/// @param {Integer} $gap [10] - Gap
+/// @require {mixin} css3-prefix
+@mixin columns($count: 3,
+$gap: 10) {
+ @include css3-prefix('column-count',
+ $count);
+ @include css3-prefix('column-gap',
+ $gap);
+}
+
+/// Double Borders
+/// @param {Color} $colorOne [#3C3C3C] - Color One
+/// @param {Color} $colorTwo [#999999] - Color Two
+/// @param {Size} $radius [0] - Radius
+/// @require {mixin} css3-prefix
+/// @require {mixin} border-radius
+@mixin double-borders($colorOne: #3C3C3C,
+$colorTwo: #999999,
+$radius: 0) {
+ border: 1px solid $colorOne;
+ @include css3-prefix('box-shadow',
+ 0 0 0 1px $colorTwo);
+ @include border-radius( $radius);
+}
+
+/// Flex
+/// @param {Integer} $value [1] - Value
+/// @require {mixin} css3-prefix
+@mixin flex($value: 1) {
+ @include css3-prefix('box-flex',
+ $value);
+}
+
+/// Flip
+/// @param {Double} $scaleX [-1] - ScaleX
+/// @require {mixin} css3-prefix
+@mixin flip($scaleX: -1) {
+ @include css3-prefix('transform',
+ scaleX($scaleX));
+ filter: FlipH;
+ -ms-filter: "FlipH";
+}
+
+/// Opacity
+/// @param {Double} $opacity [0.5] - Opacity
+/// @require {mixin} css3-prefix
+@mixin opacity($opacity: 0.5) {
+ $opacityMultiplied: ($opacity * 100);
+ filter: alpha(opacity=$opacityMultiplied);
+ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=" + $opacityMultiplied + ")";
+ @include css3-prefix('opacity',
+ $opacity);
+}
+
+/// Outline Radius
+/// @param {Size} $radius [5px] - Radius
+/// @require {mixin} css3-prefix
+@mixin outline-radius($radius: 5px) {
+ @include css3-prefix('outline-radius',
+ $radius);
+}
+
+/// Resize
+/// @param {*} $directoin [both] - Direction
+/// @require {mixin} css3-prefix
+@mixin resize($direction: both) {
+ @include css3-prefix('resize',
+ $direction);
+}
+
+/// Rotate
+///
+/// CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html
+/// @param {Double} $deg [0] - Degree
+/// @param {Double} $m11 [0] - M11
+/// @param {Double} $m12 [0] - M12
+/// @param {Double} $m21 [0] - M21
+/// @param {Double} $m22 [0] - M22
+/// @require {mixin} css3-prefix
+@mixin rotate($deg: 0,
+$m11: 0,
+$m12: 0,
+$m21: 0,
+$m22: 0) {
+ @include css3-prefix('transform',
+ rotate($deg + deg));
+ filter: progid:DXImageTransform.Microsoft.Matrix( M11=#{$m11},
+ M12=#{$m12},
+ M21=#{$m21},
+ M22=#{$m22},
+ sizingMethod='auto expand');
+ zoom: 1;
+}
+
+/// Text Shadow
+/// @param {Size} $x [2px] - X
+/// @param {Size} $y [2px] - Y
+/// @param {Size} $blur [2px] - Blur
+/// @param {Color} $color [rgba(0,0,0,.4)] - Color
+@mixin text-shadow($x: 2px,
+$y: 2px,
+$blur: 5px,
+$color: rgba(0, 0, 0, .4)) {
+ text-shadow: $x $y $blur $color;
+}
+
+/// Transform
+/// @param {List} $params - Params
+/// @require {mixin} css3-prefix
+@mixin transform($params) {
+ @include css3-prefix('transform',
+ $params);
+}
+
+/// Transform-Origin
+/// @param {List} $params - Params
+/// @require {mixin} css3-prefix
+@mixin transform-origin($params) {
+ @include css3-prefix('transform-origin',
+ $params);
+}
+
+// Transform-Style
+/// @param {List} $params - Params
+/// @require {mixin} css3-prefix
+@mixin transform-style($style: preserve-3d) {
+ @include css3-prefix('transform-style',
+ $style);
+}
+
+/// Transition
+/// @param {List} $properties - Properties
+/// @require {mixin} css3-prefix
+@mixin transition($properties...) {
+ @if length($properties)>=1 {
+ @include css3-prefix('transition',
+ $properties);
+ }
+ @else {
+ @include css3-prefix('transition',
+ "all 0.2s ease-in-out 0s");
+ }
+}
+
+/// Triple Borders
+/// @param {Color} $colorOne [#3C3C3C] - Color One
+/// @param {Color} $colorTwo [#999999] - Color Two
+/// @param {Color} $colorThree [#000000] - Color Three
+/// @param {Size} $radius [0] - Radius
+/// @require {mixin} border-radius
+/// @require {mixin} css3-prefix
+@mixin triple-borders($colorOne: #3C3C3C,
+$colorTwo: #999999,
+$colorThree: #000000,
+$radius: 0) {
+ border: 1px solid $colorOne;
+ @include border-radius($radius);
+ @include css3-prefix('box-shadow',
+ "0 0 0 1px #{$colorTwo}, 0 0 0 2px #{$colorThree}");
+}
+
+/// Keyframes
+/// @param {*} $animation-name - Animation name
+/// @content [Animation css]
+@mixin keyframes($animation-name) {
+ @-webkit-keyframes #{$animation-name} {
+ @content;
+ }
+ @-moz-keyframes #{$animation-name} {
+ @content;
+ }
+ @-ms-keyframes #{$animation-name} {
+ @content;
+ }
+ @-o-keyframes #{$animation-name} {
+ @content;
+ }
+ @keyframes #{$animation-name} {
+ @content;
+ }
+}
+
+/// Animation
+/// @param {*} $str - name duration timing-function delay iteration-count direction fill-mode play-state ([http://www.w3schools.com/cssref/css3_pr_animation.asp](http://www.w3schools.com/cssref/css3_pr_animation.asp))
+/// @require {mixin} css3-prefix
+@mixin animation($str) {
+ @include css3-prefix('animation',
+ $str);
+}
+
+// --------------------------------------------------
+// Flexbox SASS mixins
+// The spec: http://www.w3.org/TR/css3-flexbox
+// --------------------------------------------------
+// Flexbox display
+@mixin flexbox() {
+ display: -webkit-box;
+ display: -moz-box;
+ display: -ms-flexbox;
+ display: -webkit-flex;
+ display: flex;
+}
+
+// The 'flex' shorthand
+// - applies to: flex items
+// <positive-number>, initial, auto, or none
+@mixin flex($values) {
+ -webkit-box-flex: $values;
+ -moz-box-flex: $values;
+ -webkit-flex: $values;
+ -ms-flex: $values;
+ flex: $values;
+}
+
+// Flex Flow Direction
+// - applies to: flex containers
+// row | row-reverse | column | column-reverse
+@mixin flex-direction($direction) {
+ -webkit-flex-direction: $direction;
+ -moz-flex-direction: $direction;
+ -ms-flex-direction: $direction;
+ flex-direction: $direction;
+}
+
+// Flex Line Wrapping
+// - applies to: flex containers
+// nowrap | wrap | wrap-reverse
+@mixin flex-wrap($wrap) {
+ -webkit-flex-wrap: $wrap;
+ -moz-flex-wrap: $wrap;
+ -ms-flex-wrap: $wrap;
+ flex-wrap: $wrap;
+}
+
+// Flex Direction and Wrap
+// - applies to: flex containers
+// <flex-direction> || <flex-wrap>
+@mixin flex-flow($flow) {
+ -webkit-flex-flow: $flow;
+ -moz-flex-flow: $flow;
+ -ms-flex-flow: $flow;
+ flex-flow: $flow;
+}
+
+// Display Order
+// - applies to: flex items
+// <integer>
+@mixin order($val) {
+ -webkit-box-ordinal-group: $val;
+ -moz-box-ordinal-group: $val;
+ -ms-flex-order: $val;
+ -webkit-order: $val;
+ order: $val;
+}
+
+// Flex grow factor
+// - applies to: flex items
+// <number>
+@mixin flex-grow($grow) {
+ -webkit-flex-grow: $grow;
+ -moz-flex-grow: $grow;
+ -ms-flex-grow: $grow;
+ flex-grow: $grow;
+}
+
+// Flex shrink
+// - applies to: flex item shrink factor
+// <number>
+@mixin flex-shrink($shrink) {
+ -webkit-flex-shrink: $shrink;
+ -moz-flex-shrink: $shrink;
+ -ms-flex-shrink: $shrink;
+ flex-shrink: $shrink;
+}
+
+// Flex basis
+// - the initial main size of the flex item
+// - applies to: flex itemsnitial main size of the flex item
+// <width>
+@mixin flex-basis($width) {
+ -webkit-flex-basis: $width;
+ -moz-flex-basis: $width;
+ -ms-flex-basis: $width;
+ flex-basis: $width;
+}
+
+// Axis Alignment
+// - applies to: flex containers
+// flex-start | flex-end | center | space-between | space-around
+@mixin justify-content($justify) {
+ -webkit-justify-content: $justify;
+ -moz-justify-content: $justify;
+ -ms-justify-content: $justify;
+ justify-content: $justify;
+ -ms-flex-pack: $justify;
+}
+
+// Packing Flex Lines
+// - applies to: multi-line flex containers
+// flex-start | flex-end | center | space-between | space-around | stretch
+@mixin align-content($align) {
+ -webkit-align-content: $align;
+ -moz-align-content: $align;
+ -ms-align-content: $align;
+ align-content: $align;
+}
+
+// Cross-axis Alignment
+// - applies to: flex containers
+// flex-start | flex-end | center | baseline | stretch
+@mixin align-items($align) {
+ -webkit-align-items: $align;
+ -moz-align-items: $align;
+ -ms-align-items: $align;
+ align-items: $align;
+}
+
+// Cross-axis Alignment
+// - applies to: flex items
+// auto | flex-start | flex-end | center | baseline | stretch
+@mixin align-self($align) {
+ -webkit-align-self: $align;
+ -moz-align-self: $align;
+ -ms-align-self: $align;
+ align-self: $align;
}
\ No newline at end of file
diff --git a/cern_components/patterns/molecules/row/scss/row.component.scss b/patterns/molecules/row/scss/row.component.scss
similarity index 100%
rename from cern_components/patterns/molecules/row/scss/row.component.scss
rename to patterns/molecules/row/scss/row.component.scss
diff --git a/cern_components/patterns/molecules/row/scss/variables.scss b/patterns/molecules/row/scss/variables.scss
similarity index 100%
rename from cern_components/patterns/molecules/row/scss/variables.scss
rename to patterns/molecules/row/scss/variables.scss
diff --git a/cern_components/patterns/molecules/slide/css/slide.component.css b/patterns/molecules/slide/css/slide.component.css
similarity index 100%
rename from cern_components/patterns/molecules/slide/css/slide.component.css
rename to patterns/molecules/slide/css/slide.component.css
diff --git a/patterns/molecules/slide/sass/mixins.scss b/patterns/molecules/slide/sass/mixins.scss
new file mode 100755
index 00000000..c2a8dc4d
--- /dev/null
+++ b/patterns/molecules/slide/sass/mixins.scss
@@ -0,0 +1,567 @@
+///
+/// String replace
+///
+@function str-replace($string, $search, $replace: "") {
+ $index: str-index($string, $search);
+ @if $index {
+ @return str-slice($string, 1, $index - 1)+$replace+str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
+ }
+ @return $string;
+}
+
+///
+/// Font face mixins
+///
+@mixin font-face($name, $path, $weight: null, $style: null, $exts: eot woff ttf svg) {
+ $src: null;
+ $extmods: ( eot: "?", svg: "#" + str-replace($name, " ", "_"));
+ $formats: ( otf: "opentype", ttf: "truetype");
+ @each $ext in $exts {
+ $extmod: if(map-has-key($extmods, $ext), $ext + map-get($extmods, $ext), $ext);
+ $format: if(map-has-key($formats, $ext), map-get($formats, $ext), $ext);
+ $src: append($src, url(quote($path + "." + $extmod)) format(quote($format)), comma);
+ }
+ @font-face {
+ font-family: quote($name);
+ font-style: $style;
+ font-weight: $weight;
+ src: $src;
+ }
+}
+
+///
+/// Font size mixins
+///
+@mixin font-size($sizeValue: 1.6) {
+ font-size: ($sizeValue * 10) + px;
+ font-size: $sizeValue + rem;
+}
+
+///
+/// @extend %clearfix;
+///
+%clearfix {
+ clear: both;
+ &:before,
+ &:after {
+ content: "";
+ display: table;
+ }
+ &:after {
+ clear: both;
+ }
+}
+
+/// Adds a browser prefix to the property
+/// @param {*} $property Property
+/// @param {*} $value Value
+@mixin css3-prefix($property,
+$value) {
+ -webkit-#{$property}: #{$value};
+ -khtml-#{$property}: #{$value};
+ -moz-#{$property}: #{$value};
+ -ms-#{$property}: #{$value};
+ -o-#{$property}: #{$value};
+ #{$property}: #{$value};
+}
+
+/// Background Gradient
+/// @param {Color} $startColor [#3C3C3C] - Start Color
+/// @param {Color} $endColor [#999999] - End Color
+@mixin background-gradient($startColor: #3C3C3C,
+$endColor: #999999) {
+ background-color: $startColor;
+ background-image: -webkit-gradient(linear, left top, left bottom, from($startColor), to($endColor));
+ background-image: -webkit-linear-gradient(top, $startColor, $endColor);
+ background-image: -moz-linear-gradient(top, $startColor, $endColor);
+ background-image: -ms-linear-gradient(top, $startColor, $endColor);
+ background-image: -o-linear-gradient(top, $startColor, $endColor);
+ background-image: linear-gradient(top, $startColor, $endColor);
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#{$startColor}',
+ endColorStr='#{$endColor}');
+}
+
+/// Background Horizontal
+/// @param {Color} $startColor [#3C3C3C] - Start Color
+/// @param {Color} $endColor [#999999] - End Color
+@mixin background-horizontal($startColor: #3C3C3C,
+$endColor: #999999) {
+ background-color: $startColor;
+ background-image: -webkit-gradient(linear, left top, right top, from($startColor), to($endColor));
+ background-image: -webkit-linear-gradient(left, $startColor, $endColor);
+ background-image: -moz-linear-gradient(left, $startColor, $endColor);
+ background-image: -ms-linear-gradient(left, $startColor, $endColor);
+ background-image: -o-linear-gradient(left, $startColor, $endColor);
+ background-image: linear-gradient(left, $startColor, $endColor);
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#{$startColor}',
+ endColorStr='#{$endColor}',
+ gradientType='1');
+}
+
+/// Background Radial
+/// @param {Color} $startColor [#3C3C3C] - Start Color
+/// @param {Percentage} $startPos [0%] - Start position
+/// @param {Color} $endColor [#999999] - End Color
+/// @param {Percentage} $endPos [100%] - End position
+@mixin background-radial($startColor: #FFFFFF,
+$startPos: 0%,
+$endColor: #000000,
+$endPos:100%) {
+ background: -moz-radial-gradient(center, ellipse cover, $startColor $startPos, $endColor $endPos);
+ background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop($startPos, $startColor), color-stop($endPos, $endColor));
+ background: -webkit-radial-gradient(center, ellipse cover, $startColor $startPos, $endColor $endPos);
+ background: -o-radial-gradient(center, ellipse cover, $startColor $startPos, $endColor $endPos);
+ background: -ms-radial-gradient(center, ellipse cover, $startColor $startPos, $endColor $endPos);
+ background: radial-gradient(ellipse at center, $startColor $startPos, $endColor $endPos);
+}
+
+/// Background Size
+/// @param {Size} $width [100%] - Width
+/// @param {Size} $width [$width] - Height
+/// @require {mixin} css3-prefix
+@mixin background-size($width: 100%,
+$height: $width) {
+ @if type-of($width)=='number' and $height !=null {
+ @include css3-prefix('background-size',
+ $width $height);
+ }
+ @else {
+ @include css3-prefix('background-size',
+ $width);
+ }
+}
+
+/// Background Color Opacity
+/// @param {Color} $color [100%] - Color
+/// @param {Double} $opacity [0.85] - Opacity
+@mixin background-opacity($color: #000,
+$opacity: 0.85) {
+ background: $color;
+ background: rgba($color, $opacity);
+}
+
+/// Border Radius
+/// @param {Size} $radius [5px] - Radius
+/// @require {mixin} css3-prefix
+@mixin border-radius($radius: 5px) {
+ @include css3-prefix('border-radius',
+ $radius);
+}
+
+/// Border Radius Separate
+/// @param {Size} $topLeftRadius [5px] - Top Left
+/// @param {Size} $topRightRadius [5px] - Top Right
+/// @param {Size} $bottomLeftRadius [5px] - Bottom Left
+/// @param {Size} $bottomRightRadius [5px] - Bottom Right
+@mixin border-radius-separate($topLeftRadius: 5px,
+$topRightRadius: 5px,
+$bottomLeftRadius: 5px,
+$bottomRightRadius: 5px) {
+ -webkit-border-top-left-radius: $topLeftRadius;
+ -webkit-border-top-right-radius: $topRightRadius;
+ -webkit-border-bottom-right-radius: $bottomRightRadius;
+ -webkit-border-bottom-left-radius: $bottomLeftRadius;
+ -moz-border-radius-topleft: $topLeftRadius;
+ -moz-border-radius-topright: $topRightRadius;
+ -moz-border-radius-bottomright: $bottomRightRadius;
+ -moz-border-radius-bottomleft: $bottomLeftRadius;
+ border-top-left-radius: $topLeftRadius;
+ border-top-right-radius: $topRightRadius;
+ border-bottom-right-radius: $bottomRightRadius;
+ border-bottom-left-radius: $bottomLeftRadius;
+}
+
+/// Box
+/// @param {*} $orient [horizontal] - Orientation
+/// @param {*} $pack [center] - Pack
+/// @param {*} $align [center] - Align
+/// @require {mixin} css3-prefix
+@mixin box($orient: horizontal,
+$pack: center,
+$align: center) {
+ display: -webkit-box;
+ display: -moz-box;
+ display: box;
+ @include css3-prefix('box-orient',
+ $orient);
+ @include css3-prefix('box-pack',
+ $pack);
+ @include css3-prefix('box-align',
+ $align);
+}
+
+/// Box RGBA
+/// @param {Integer} $r [60] - Red
+/// @param {Integer} $g [3] - Green
+/// @param {Integer} $b [12] - Blue
+/// @param {Double} $opacity [0.23] - Opacity
+/// @param {Color} $color [#3C3C3C] - Color
+@mixin box-rgba($r: 60,
+$g: 3,
+$b: 12,
+$opacity: 0.23,
+$color: #3C3C3C) {
+ background-color: transparent;
+ background-color: rgba($r, $g, $b, $opacity);
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$color}',
+ endColorstr='#{$color}');
+ zoom: 1;
+}
+
+/// Box Shadow
+/// @param {Size} $x [2px] - X
+/// @param {Size} $y [2px] - Y
+/// @param {Size} $blur [5px] - Blur
+/// @param {Color} $color [rgba(0,0,0,.4)] - Color
+/// @param {Boolean} $inset - Inset
+@mixin box-shadow($x: 2px,
+$y: 2px,
+$blur: 5px,
+$color: rgba(0, 0, 0, .4),
+$inset: "") {
+ @if ($inset !="") {
+ @include css3-prefix('box-shadow',
+ $inset $x $y $blur $color);
+ }
+ @else {
+ @include css3-prefix('box-shadow',
+ $x $y $blur $color);
+ }
+}
+
+/// Box Sizing
+/// @param {*} $type [border-box] - Type
+/// @require {mixin} css3-prefix
+@mixin box-sizing($type: border-box) {
+ @include css3-prefix('box-sizing',
+ $type);
+}
+
+/// Columns
+/// @param {Integer} $count [3] - Count
+/// @param {Integer} $gap [10] - Gap
+/// @require {mixin} css3-prefix
+@mixin columns($count: 3,
+$gap: 10) {
+ @include css3-prefix('column-count',
+ $count);
+ @include css3-prefix('column-gap',
+ $gap);
+}
+
+/// Double Borders
+/// @param {Color} $colorOne [#3C3C3C] - Color One
+/// @param {Color} $colorTwo [#999999] - Color Two
+/// @param {Size} $radius [0] - Radius
+/// @require {mixin} css3-prefix
+/// @require {mixin} border-radius
+@mixin double-borders($colorOne: #3C3C3C,
+$colorTwo: #999999,
+$radius: 0) {
+ border: 1px solid $colorOne;
+ @include css3-prefix('box-shadow',
+ 0 0 0 1px $colorTwo);
+ @include border-radius( $radius);
+}
+
+/// Flex
+/// @param {Integer} $value [1] - Value
+/// @require {mixin} css3-prefix
+@mixin flex($value: 1) {
+ @include css3-prefix('box-flex',
+ $value);
+}
+
+/// Flip
+/// @param {Double} $scaleX [-1] - ScaleX
+/// @require {mixin} css3-prefix
+@mixin flip($scaleX: -1) {
+ @include css3-prefix('transform',
+ scaleX($scaleX));
+ filter: FlipH;
+ -ms-filter: "FlipH";
+}
+
+/// Opacity
+/// @param {Double} $opacity [0.5] - Opacity
+/// @require {mixin} css3-prefix
+@mixin opacity($opacity: 0.5) {
+ $opacityMultiplied: ($opacity * 100);
+ filter: alpha(opacity=$opacityMultiplied);
+ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=" + $opacityMultiplied + ")";
+ @include css3-prefix('opacity',
+ $opacity);
+}
+
+/// Outline Radius
+/// @param {Size} $radius [5px] - Radius
+/// @require {mixin} css3-prefix
+@mixin outline-radius($radius: 5px) {
+ @include css3-prefix('outline-radius',
+ $radius);
+}
+
+/// Resize
+/// @param {*} $directoin [both] - Direction
+/// @require {mixin} css3-prefix
+@mixin resize($direction: both) {
+ @include css3-prefix('resize',
+ $direction);
+}
+
+/// Rotate
+///
+/// CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html
+/// @param {Double} $deg [0] - Degree
+/// @param {Double} $m11 [0] - M11
+/// @param {Double} $m12 [0] - M12
+/// @param {Double} $m21 [0] - M21
+/// @param {Double} $m22 [0] - M22
+/// @require {mixin} css3-prefix
+@mixin rotate($deg: 0,
+$m11: 0,
+$m12: 0,
+$m21: 0,
+$m22: 0) {
+ @include css3-prefix('transform',
+ rotate($deg + deg));
+ filter: progid:DXImageTransform.Microsoft.Matrix( M11=#{$m11},
+ M12=#{$m12},
+ M21=#{$m21},
+ M22=#{$m22},
+ sizingMethod='auto expand');
+ zoom: 1;
+}
+
+/// Text Shadow
+/// @param {Size} $x [2px] - X
+/// @param {Size} $y [2px] - Y
+/// @param {Size} $blur [2px] - Blur
+/// @param {Color} $color [rgba(0,0,0,.4)] - Color
+@mixin text-shadow($x: 2px,
+$y: 2px,
+$blur: 5px,
+$color: rgba(0, 0, 0, .4)) {
+ text-shadow: $x $y $blur $color;
+}
+
+/// Transform
+/// @param {List} $params - Params
+/// @require {mixin} css3-prefix
+@mixin transform($params) {
+ @include css3-prefix('transform',
+ $params);
+}
+
+/// Transform-Origin
+/// @param {List} $params - Params
+/// @require {mixin} css3-prefix
+@mixin transform-origin($params) {
+ @include css3-prefix('transform-origin',
+ $params);
+}
+
+// Transform-Style
+/// @param {List} $params - Params
+/// @require {mixin} css3-prefix
+@mixin transform-style($style: preserve-3d) {
+ @include css3-prefix('transform-style',
+ $style);
+}
+
+/// Transition
+/// @param {List} $properties - Properties
+/// @require {mixin} css3-prefix
+@mixin transition($properties...) {
+ @if length($properties)>=1 {
+ @include css3-prefix('transition',
+ $properties);
+ }
+ @else {
+ @include css3-prefix('transition',
+ "all 0.2s ease-in-out 0s");
+ }
+}
+
+/// Triple Borders
+/// @param {Color} $colorOne [#3C3C3C] - Color One
+/// @param {Color} $colorTwo [#999999] - Color Two
+/// @param {Color} $colorThree [#000000] - Color Three
+/// @param {Size} $radius [0] - Radius
+/// @require {mixin} border-radius
+/// @require {mixin} css3-prefix
+@mixin triple-borders($colorOne: #3C3C3C,
+$colorTwo: #999999,
+$colorThree: #000000,
+$radius: 0) {
+ border: 1px solid $colorOne;
+ @include border-radius($radius);
+ @include css3-prefix('box-shadow',
+ "0 0 0 1px #{$colorTwo}, 0 0 0 2px #{$colorThree}");
+}
+
+/// Keyframes
+/// @param {*} $animation-name - Animation name
+/// @content [Animation css]
+@mixin keyframes($animation-name) {
+ @-webkit-keyframes #{$animation-name} {
+ @content;
+ }
+ @-moz-keyframes #{$animation-name} {
+ @content;
+ }
+ @-ms-keyframes #{$animation-name} {
+ @content;
+ }
+ @-o-keyframes #{$animation-name} {
+ @content;
+ }
+ @keyframes #{$animation-name} {
+ @content;
+ }
+}
+
+/// Animation
+/// @param {*} $str - name duration timing-function delay iteration-count direction fill-mode play-state ([http://www.w3schools.com/cssref/css3_pr_animation.asp](http://www.w3schools.com/cssref/css3_pr_animation.asp))
+/// @require {mixin} css3-prefix
+@mixin animation($str) {
+ @include css3-prefix('animation',
+ $str);
+}
+
+// --------------------------------------------------
+// Flexbox SASS mixins
+// The spec: http://www.w3.org/TR/css3-flexbox
+// --------------------------------------------------
+// Flexbox display
+@mixin flexbox() {
+ display: -webkit-box;
+ display: -moz-box;
+ display: -ms-flexbox;
+ display: -webkit-flex;
+ display: flex;
+}
+
+// The 'flex' shorthand
+// - applies to: flex items
+// <positive-number>, initial, auto, or none
+@mixin flex($values) {
+ -webkit-box-flex: $values;
+ -moz-box-flex: $values;
+ -webkit-flex: $values;
+ -ms-flex: $values;
+ flex: $values;
+}
+
+// Flex Flow Direction
+// - applies to: flex containers
+// row | row-reverse | column | column-reverse
+@mixin flex-direction($direction) {
+ -webkit-flex-direction: $direction;
+ -moz-flex-direction: $direction;
+ -ms-flex-direction: $direction;
+ flex-direction: $direction;
+}
+
+// Flex Line Wrapping
+// - applies to: flex containers
+// nowrap | wrap | wrap-reverse
+@mixin flex-wrap($wrap) {
+ -webkit-flex-wrap: $wrap;
+ -moz-flex-wrap: $wrap;
+ -ms-flex-wrap: $wrap;
+ flex-wrap: $wrap;
+}
+
+// Flex Direction and Wrap
+// - applies to: flex containers
+// <flex-direction> || <flex-wrap>
+@mixin flex-flow($flow) {
+ -webkit-flex-flow: $flow;
+ -moz-flex-flow: $flow;
+ -ms-flex-flow: $flow;
+ flex-flow: $flow;
+}
+
+// Display Order
+// - applies to: flex items
+// <integer>
+@mixin order($val) {
+ -webkit-box-ordinal-group: $val;
+ -moz-box-ordinal-group: $val;
+ -ms-flex-order: $val;
+ -webkit-order: $val;
+ order: $val;
+}
+
+// Flex grow factor
+// - applies to: flex items
+// <number>
+@mixin flex-grow($grow) {
+ -webkit-flex-grow: $grow;
+ -moz-flex-grow: $grow;
+ -ms-flex-grow: $grow;
+ flex-grow: $grow;
+}
+
+// Flex shrink
+// - applies to: flex item shrink factor
+// <number>
+@mixin flex-shrink($shrink) {
+ -webkit-flex-shrink: $shrink;
+ -moz-flex-shrink: $shrink;
+ -ms-flex-shrink: $shrink;
+ flex-shrink: $shrink;
+}
+
+// Flex basis
+// - the initial main size of the flex item
+// - applies to: flex itemsnitial main size of the flex item
+// <width>
+@mixin flex-basis($width) {
+ -webkit-flex-basis: $width;
+ -moz-flex-basis: $width;
+ -ms-flex-basis: $width;
+ flex-basis: $width;
+}
+
+// Axis Alignment
+// - applies to: flex containers
+// flex-start | flex-end | center | space-between | space-around
+@mixin justify-content($justify) {
+ -webkit-justify-content: $justify;
+ -moz-justify-content: $justify;
+ -ms-justify-content: $justify;
+ justify-content: $justify;
+ -ms-flex-pack: $justify;
+}
+
+// Packing Flex Lines
+// - applies to: multi-line flex containers
+// flex-start | flex-end | center | space-between | space-around | stretch
+@mixin align-content($align) {
+ -webkit-align-content: $align;
+ -moz-align-content: $align;
+ -ms-align-content: $align;
+ align-content: $align;
+}
+
+// Cross-axis Alignment
+// - applies to: flex containers
+// flex-start | flex-end | center | baseline | stretch
+@mixin align-items($align) {
+ -webkit-align-items: $align;
+ -moz-align-items: $align;
+ -ms-align-items: $align;
+ align-items: $align;
+}
+
+// Cross-axis Alignment
+// - applies to: flex items
+// auto | flex-start | flex-end | center | baseline | stretch
+@mixin align-self($align) {
+ -webkit-align-self: $align;
+ -moz-align-self: $align;
+ -ms-align-self: $align;
+ align-self: $align;
+}
\ No newline at end of file
diff --git a/cern_components/patterns/molecules/slide/sass/slide.component.scss b/patterns/molecules/slide/sass/slide.component.scss
similarity index 98%
rename from cern_components/patterns/molecules/slide/sass/slide.component.scss
rename to patterns/molecules/slide/sass/slide.component.scss
index 89ac8fd9..e48ec184 100755
--- a/cern_components/patterns/molecules/slide/sass/slide.component.scss
+++ b/patterns/molecules/slide/sass/slide.component.scss
@@ -1,103 +1,103 @@
-// variables & mixings
-@import 'variables';
-// fonts
-@font-face {
- font-family: "sourcesans-regular";
- src: url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/regular.eot?") format("eot"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/regular.woff2") format("woff2"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/regular.woff") format("woff"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/regular.ttf") format("truetype"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/regular.svg#sourcesans-regular") format("svg");
-}
-
-@font-face {
- font-family: "sourcesans-semibold";
- src: url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/semibold.eot?") format("eot"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/semibold.woff2") format("woff2"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/semibold.woff") format("woff"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/semibold.ttf") format("truetype"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/semibold.svg#sourcesans-semibold") format("svg");
-}
-
-@font-face {
- font-family: "sourcesans-bold";
- src: url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/bold.eot?") format("eot"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/bold.woff2") format("woff2"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/bold.woff") format("woff"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/bold.ttf") format("truetype"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/bold.svg#sourcesans-bold") format("svg");
-}
-
-@font-face {
- font-family: "sourcesans-light";
- src: url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/light.eot?") format("eot"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/light.woff2") format("woff2"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/light.woff") format("woff"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/light.ttf") format("truetype"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/light.svg#sourcesans-light") format("svg");
-}
-
-@font-face {
- font-family: "opensans-regular";
- src: url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/regular.eot?") format("eot"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/regular.woff2") format("woff2"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/regular.woff") format("woff"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/regular.ttf") format("truetype"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/regular.svg#opensans-regular") format("svg");
-}
-
-@font-face {
- font-family: "opensans-semibold";
- src: url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/semibold.eot?") format("eot"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/semibold.woff2") format("woff2"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/semibold.woff") format("woff"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/semibold.ttf") format("truetype"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/semibold.svg#opensans-semibold") format("svg");
-}
-
-@font-face {
- font-family: "opensans-bold";
- src: url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/bold.eot?") format("eot"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/bold.woff2") format("woff2"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/bold.woff") format("woff"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/bold.ttf") format("truetype"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/bold.svg#opensans-bold") format("svg");
-}
-
-@font-face {
- font-family: "cern-icons";
- src: url("//framework.web.cern.ch/framework/3.0/fonts/cern/cern.eot?") format("eot"), url("//framework.web.cern.ch/framework/3.0/fonts/cern/cern.woff2") format("woff2"), url("//framework.web.cern.ch/framework/3.0/fonts/cern/cern.woff") format("woff"), url("//framework.web.cern.ch/framework/3.0/fonts/cern/cern.ttf") format("truetype"), url("//framework.web.cern.ch/framework/3.0/fonts/cern/cern.svg#cern-icons") format("svg");
-}
-
-//
-//* ****************************************** component slide */
-.component-slide {
- width: 80%;
- margin: 0 auto;
- position: relative;
- .component-slide__caption {
- bottom: 0;
- /* font-family: 'sourcesans-regular'; */
- font-size: 12px;
- margin-top: 11px;
- position: absolute;
- background: rgba(0, 0, 0, 0.5);
- max-width: 100%;
- p {
- padding: 10px;
- }
- }
- figcaption {
- bottom: 2rem;
- /* font-family: 'sourcesans-regular'; */
- font-size: 12px;
- margin: 0 auto;
- position: relative;
- background: rgba(0, 0, 0, 0.5);
- max-width: 100%; //color: #aaaaaa;
- padding: 10px;
- }
- figure.cds-video>div {
- margin-bottom: -8px;
- }
- /* figure.cds-video:hover {
- figcaption {
- display: none;
- }
- } */
-}
-
-/* @media only screen and (min-width: 1025px) {
- .component-slider .owl-item.active .component-slide:hover {
- figcaption, .component-slide__caption {
- opacity: 0 !important;
- bottom: -1000000000px !important
- }
- }
-} */
-
-.owl-theme .owl-nav {
- margin: 0;
-}
-
-.owl-item .header-block {
- position: relative;
-}
-
-@media only screen and (max-width: 480px) {
- .component-slide {
- width: 70%;
- }
-}
+// variables & mixings
+@import 'variables';
+// fonts
+@font-face {
+ font-family: "sourcesans-regular";
+ src: url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/regular.eot?") format("eot"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/regular.woff2") format("woff2"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/regular.woff") format("woff"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/regular.ttf") format("truetype"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/regular.svg#sourcesans-regular") format("svg");
+}
+
+@font-face {
+ font-family: "sourcesans-semibold";
+ src: url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/semibold.eot?") format("eot"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/semibold.woff2") format("woff2"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/semibold.woff") format("woff"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/semibold.ttf") format("truetype"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/semibold.svg#sourcesans-semibold") format("svg");
+}
+
+@font-face {
+ font-family: "sourcesans-bold";
+ src: url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/bold.eot?") format("eot"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/bold.woff2") format("woff2"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/bold.woff") format("woff"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/bold.ttf") format("truetype"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/bold.svg#sourcesans-bold") format("svg");
+}
+
+@font-face {
+ font-family: "sourcesans-light";
+ src: url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/light.eot?") format("eot"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/light.woff2") format("woff2"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/light.woff") format("woff"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/light.ttf") format("truetype"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/light.svg#sourcesans-light") format("svg");
+}
+
+@font-face {
+ font-family: "opensans-regular";
+ src: url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/regular.eot?") format("eot"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/regular.woff2") format("woff2"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/regular.woff") format("woff"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/regular.ttf") format("truetype"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/regular.svg#opensans-regular") format("svg");
+}
+
+@font-face {
+ font-family: "opensans-semibold";
+ src: url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/semibold.eot?") format("eot"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/semibold.woff2") format("woff2"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/semibold.woff") format("woff"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/semibold.ttf") format("truetype"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/semibold.svg#opensans-semibold") format("svg");
+}
+
+@font-face {
+ font-family: "opensans-bold";
+ src: url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/bold.eot?") format("eot"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/bold.woff2") format("woff2"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/bold.woff") format("woff"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/bold.ttf") format("truetype"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/bold.svg#opensans-bold") format("svg");
+}
+
+@font-face {
+ font-family: "cern-icons";
+ src: url("//framework.web.cern.ch/framework/3.0/fonts/cern/cern.eot?") format("eot"), url("//framework.web.cern.ch/framework/3.0/fonts/cern/cern.woff2") format("woff2"), url("//framework.web.cern.ch/framework/3.0/fonts/cern/cern.woff") format("woff"), url("//framework.web.cern.ch/framework/3.0/fonts/cern/cern.ttf") format("truetype"), url("//framework.web.cern.ch/framework/3.0/fonts/cern/cern.svg#cern-icons") format("svg");
+}
+
+//
+//* ****************************************** component slide */
+.component-slide {
+ width: 80%;
+ margin: 0 auto;
+ position: relative;
+ .component-slide__caption {
+ bottom: 0;
+ /* font-family: 'sourcesans-regular'; */
+ font-size: 12px;
+ margin-top: 11px;
+ position: absolute;
+ background: rgba(0, 0, 0, 0.5);
+ max-width: 100%;
+ p {
+ padding: 10px;
+ }
+ }
+ figcaption {
+ bottom: 2rem;
+ /* font-family: 'sourcesans-regular'; */
+ font-size: 12px;
+ margin: 0 auto;
+ position: relative;
+ background: rgba(0, 0, 0, 0.5);
+ max-width: 100%; //color: #aaaaaa;
+ padding: 10px;
+ }
+ figure.cds-video>div {
+ margin-bottom: -8px;
+ }
+ /* figure.cds-video:hover {
+ figcaption {
+ display: none;
+ }
+ } */
+}
+
+/* @media only screen and (min-width: 1025px) {
+ .component-slider .owl-item.active .component-slide:hover {
+ figcaption, .component-slide__caption {
+ opacity: 0 !important;
+ bottom: -1000000000px !important
+ }
+ }
+} */
+
+.owl-theme .owl-nav {
+ margin: 0;
+}
+
+.owl-item .header-block {
+ position: relative;
+}
+
+@media only screen and (max-width: 480px) {
+ .component-slide {
+ width: 70%;
+ }
+}
diff --git a/cern_components/patterns/molecules/slide/sass/variables.scss b/patterns/molecules/slide/sass/variables.scss
similarity index 94%
rename from cern_components/patterns/molecules/slide/sass/variables.scss
rename to patterns/molecules/slide/sass/variables.scss
index 9cf43ba9..4b0d573c 100755
--- a/cern_components/patterns/molecules/slide/sass/variables.scss
+++ b/patterns/molecules/slide/sass/variables.scss
@@ -1,89 +1,89 @@
-// mixins library
-@import 'mixins.scss';
-//
-//
-//
-//
-
-
-// Variables
-// --------------------------------------------------
-// Grays
-// -------------------------
-$grey-dark: #292929;
-$grey-medium: #4a4a4a;
-$grey-light: #bebebe;
-$grey-mlight:#efe8e8;
-//
-// corporate colors
-// -------------------------
-$blue: #0855a0;
-$orange: #f2a530;
-//
-// Section colors
-// -------------------------
-$error: #ff0000;
-$error-light: #faeaea;
-//
-// generic variables
-// -------------------------
-$white: #ffffff;
-$black: #000000;
-$black-medium:#1a1a1a;
-$body-bg: $white;
-$text-color: $black;
-$link-color: $blue;
-//
-//
-// Styles
-// -------------------------
-%link {
- color: $link-color;
- text-decoration: none;
-}
-
-%box-title {
- @include font-size(4.0);
- color: $black;
- font-family: 'Open Sans', sans-serif;
- font-weight: 700;
- margin: 0px 0 20px;
- line-height: 50px;
-
- @media only screen and (max-width: 480px) {
- @include font-size(2.5);
- }
-}
-
-%box-text {
- @include font-size(1.6);
- color: $grey-medium;
- font-family: 'Open Sans', sans-serif;
- font-weight: 700;
-
- @media only screen and (max-width: 480px) {
- @include font-size(1.4);
- }
-}
-
-
-%title-section{
- @include font-size(3.0);
- color: $grey-dark;
- font-family: 'Open Sans', sans-serif;
- font-weight: 700;
- text-transform: uppercase;
- margin-bottom: 30px;
- display: block;
-}
-
-%line-separator-v{
- border-right:1px solid $white;
- height: 10px;
- content: '';
- display: inline-block;
- width: 1px;
- margin:0 8px;
-}
-
-
+// mixins library
+@import 'mixins.scss';
+//
+//
+//
+//
+
+
+// Variables
+// --------------------------------------------------
+// Grays
+// -------------------------
+$grey-dark: #292929;
+$grey-medium: #4a4a4a;
+$grey-light: #bebebe;
+$grey-mlight:#efe8e8;
+//
+// corporate colors
+// -------------------------
+$blue: #0855a0;
+$orange: #f2a530;
+//
+// Section colors
+// -------------------------
+$error: #ff0000;
+$error-light: #faeaea;
+//
+// generic variables
+// -------------------------
+$white: #ffffff;
+$black: #000000;
+$black-medium:#1a1a1a;
+$body-bg: $white;
+$text-color: $black;
+$link-color: $blue;
+//
+//
+// Styles
+// -------------------------
+%link {
+ color: $link-color;
+ text-decoration: none;
+}
+
+%box-title {
+ @include font-size(4.0);
+ color: $black;
+ font-family: 'Open Sans', sans-serif;
+ font-weight: 700;
+ margin: 0px 0 20px;
+ line-height: 50px;
+
+ @media only screen and (max-width: 480px) {
+ @include font-size(2.5);
+ }
+}
+
+%box-text {
+ @include font-size(1.6);
+ color: $grey-medium;
+ font-family: 'Open Sans', sans-serif;
+ font-weight: 700;
+
+ @media only screen and (max-width: 480px) {
+ @include font-size(1.4);
+ }
+}
+
+
+%title-section{
+ @include font-size(3.0);
+ color: $grey-dark;
+ font-family: 'Open Sans', sans-serif;
+ font-weight: 700;
+ text-transform: uppercase;
+ margin-bottom: 30px;
+ display: block;
+}
+
+%line-separator-v{
+ border-right:1px solid $white;
+ height: 10px;
+ content: '';
+ display: inline-block;
+ width: 1px;
+ margin:0 8px;
+}
+
+
diff --git a/cern_components/patterns/molecules/slide/slide.html.twig b/patterns/molecules/slide/slide.html.twig
similarity index 100%
rename from cern_components/patterns/molecules/slide/slide.html.twig
rename to patterns/molecules/slide/slide.html.twig
diff --git a/cern_components/patterns/molecules/slide/slide.ui_patterns.yml b/patterns/molecules/slide/slide.ui_patterns.yml
similarity index 100%
rename from cern_components/patterns/molecules/slide/slide.ui_patterns.yml
rename to patterns/molecules/slide/slide.ui_patterns.yml
diff --git a/cern_components/patterns/molecules/slider/css/slider.component.css b/patterns/molecules/slider/css/slider.component.css
similarity index 100%
rename from cern_components/patterns/molecules/slider/css/slider.component.css
rename to patterns/molecules/slider/css/slider.component.css
diff --git a/cern_components/patterns/molecules/slider/js/slider_carousel.js b/patterns/molecules/slider/js/slider_carousel.js
similarity index 100%
rename from cern_components/patterns/molecules/slider/js/slider_carousel.js
rename to patterns/molecules/slider/js/slider_carousel.js
diff --git a/patterns/molecules/slider/sass/mixins.scss b/patterns/molecules/slider/sass/mixins.scss
new file mode 100755
index 00000000..c2a8dc4d
--- /dev/null
+++ b/patterns/molecules/slider/sass/mixins.scss
@@ -0,0 +1,567 @@
+///
+/// String replace
+///
+@function str-replace($string, $search, $replace: "") {
+ $index: str-index($string, $search);
+ @if $index {
+ @return str-slice($string, 1, $index - 1)+$replace+str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
+ }
+ @return $string;
+}
+
+///
+/// Font face mixins
+///
+@mixin font-face($name, $path, $weight: null, $style: null, $exts: eot woff ttf svg) {
+ $src: null;
+ $extmods: ( eot: "?", svg: "#" + str-replace($name, " ", "_"));
+ $formats: ( otf: "opentype", ttf: "truetype");
+ @each $ext in $exts {
+ $extmod: if(map-has-key($extmods, $ext), $ext + map-get($extmods, $ext), $ext);
+ $format: if(map-has-key($formats, $ext), map-get($formats, $ext), $ext);
+ $src: append($src, url(quote($path + "." + $extmod)) format(quote($format)), comma);
+ }
+ @font-face {
+ font-family: quote($name);
+ font-style: $style;
+ font-weight: $weight;
+ src: $src;
+ }
+}
+
+///
+/// Font size mixins
+///
+@mixin font-size($sizeValue: 1.6) {
+ font-size: ($sizeValue * 10) + px;
+ font-size: $sizeValue + rem;
+}
+
+///
+/// @extend %clearfix;
+///
+%clearfix {
+ clear: both;
+ &:before,
+ &:after {
+ content: "";
+ display: table;
+ }
+ &:after {
+ clear: both;
+ }
+}
+
+/// Adds a browser prefix to the property
+/// @param {*} $property Property
+/// @param {*} $value Value
+@mixin css3-prefix($property,
+$value) {
+ -webkit-#{$property}: #{$value};
+ -khtml-#{$property}: #{$value};
+ -moz-#{$property}: #{$value};
+ -ms-#{$property}: #{$value};
+ -o-#{$property}: #{$value};
+ #{$property}: #{$value};
+}
+
+/// Background Gradient
+/// @param {Color} $startColor [#3C3C3C] - Start Color
+/// @param {Color} $endColor [#999999] - End Color
+@mixin background-gradient($startColor: #3C3C3C,
+$endColor: #999999) {
+ background-color: $startColor;
+ background-image: -webkit-gradient(linear, left top, left bottom, from($startColor), to($endColor));
+ background-image: -webkit-linear-gradient(top, $startColor, $endColor);
+ background-image: -moz-linear-gradient(top, $startColor, $endColor);
+ background-image: -ms-linear-gradient(top, $startColor, $endColor);
+ background-image: -o-linear-gradient(top, $startColor, $endColor);
+ background-image: linear-gradient(top, $startColor, $endColor);
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#{$startColor}',
+ endColorStr='#{$endColor}');
+}
+
+/// Background Horizontal
+/// @param {Color} $startColor [#3C3C3C] - Start Color
+/// @param {Color} $endColor [#999999] - End Color
+@mixin background-horizontal($startColor: #3C3C3C,
+$endColor: #999999) {
+ background-color: $startColor;
+ background-image: -webkit-gradient(linear, left top, right top, from($startColor), to($endColor));
+ background-image: -webkit-linear-gradient(left, $startColor, $endColor);
+ background-image: -moz-linear-gradient(left, $startColor, $endColor);
+ background-image: -ms-linear-gradient(left, $startColor, $endColor);
+ background-image: -o-linear-gradient(left, $startColor, $endColor);
+ background-image: linear-gradient(left, $startColor, $endColor);
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#{$startColor}',
+ endColorStr='#{$endColor}',
+ gradientType='1');
+}
+
+/// Background Radial
+/// @param {Color} $startColor [#3C3C3C] - Start Color
+/// @param {Percentage} $startPos [0%] - Start position
+/// @param {Color} $endColor [#999999] - End Color
+/// @param {Percentage} $endPos [100%] - End position
+@mixin background-radial($startColor: #FFFFFF,
+$startPos: 0%,
+$endColor: #000000,
+$endPos:100%) {
+ background: -moz-radial-gradient(center, ellipse cover, $startColor $startPos, $endColor $endPos);
+ background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop($startPos, $startColor), color-stop($endPos, $endColor));
+ background: -webkit-radial-gradient(center, ellipse cover, $startColor $startPos, $endColor $endPos);
+ background: -o-radial-gradient(center, ellipse cover, $startColor $startPos, $endColor $endPos);
+ background: -ms-radial-gradient(center, ellipse cover, $startColor $startPos, $endColor $endPos);
+ background: radial-gradient(ellipse at center, $startColor $startPos, $endColor $endPos);
+}
+
+/// Background Size
+/// @param {Size} $width [100%] - Width
+/// @param {Size} $width [$width] - Height
+/// @require {mixin} css3-prefix
+@mixin background-size($width: 100%,
+$height: $width) {
+ @if type-of($width)=='number' and $height !=null {
+ @include css3-prefix('background-size',
+ $width $height);
+ }
+ @else {
+ @include css3-prefix('background-size',
+ $width);
+ }
+}
+
+/// Background Color Opacity
+/// @param {Color} $color [100%] - Color
+/// @param {Double} $opacity [0.85] - Opacity
+@mixin background-opacity($color: #000,
+$opacity: 0.85) {
+ background: $color;
+ background: rgba($color, $opacity);
+}
+
+/// Border Radius
+/// @param {Size} $radius [5px] - Radius
+/// @require {mixin} css3-prefix
+@mixin border-radius($radius: 5px) {
+ @include css3-prefix('border-radius',
+ $radius);
+}
+
+/// Border Radius Separate
+/// @param {Size} $topLeftRadius [5px] - Top Left
+/// @param {Size} $topRightRadius [5px] - Top Right
+/// @param {Size} $bottomLeftRadius [5px] - Bottom Left
+/// @param {Size} $bottomRightRadius [5px] - Bottom Right
+@mixin border-radius-separate($topLeftRadius: 5px,
+$topRightRadius: 5px,
+$bottomLeftRadius: 5px,
+$bottomRightRadius: 5px) {
+ -webkit-border-top-left-radius: $topLeftRadius;
+ -webkit-border-top-right-radius: $topRightRadius;
+ -webkit-border-bottom-right-radius: $bottomRightRadius;
+ -webkit-border-bottom-left-radius: $bottomLeftRadius;
+ -moz-border-radius-topleft: $topLeftRadius;
+ -moz-border-radius-topright: $topRightRadius;
+ -moz-border-radius-bottomright: $bottomRightRadius;
+ -moz-border-radius-bottomleft: $bottomLeftRadius;
+ border-top-left-radius: $topLeftRadius;
+ border-top-right-radius: $topRightRadius;
+ border-bottom-right-radius: $bottomRightRadius;
+ border-bottom-left-radius: $bottomLeftRadius;
+}
+
+/// Box
+/// @param {*} $orient [horizontal] - Orientation
+/// @param {*} $pack [center] - Pack
+/// @param {*} $align [center] - Align
+/// @require {mixin} css3-prefix
+@mixin box($orient: horizontal,
+$pack: center,
+$align: center) {
+ display: -webkit-box;
+ display: -moz-box;
+ display: box;
+ @include css3-prefix('box-orient',
+ $orient);
+ @include css3-prefix('box-pack',
+ $pack);
+ @include css3-prefix('box-align',
+ $align);
+}
+
+/// Box RGBA
+/// @param {Integer} $r [60] - Red
+/// @param {Integer} $g [3] - Green
+/// @param {Integer} $b [12] - Blue
+/// @param {Double} $opacity [0.23] - Opacity
+/// @param {Color} $color [#3C3C3C] - Color
+@mixin box-rgba($r: 60,
+$g: 3,
+$b: 12,
+$opacity: 0.23,
+$color: #3C3C3C) {
+ background-color: transparent;
+ background-color: rgba($r, $g, $b, $opacity);
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$color}',
+ endColorstr='#{$color}');
+ zoom: 1;
+}
+
+/// Box Shadow
+/// @param {Size} $x [2px] - X
+/// @param {Size} $y [2px] - Y
+/// @param {Size} $blur [5px] - Blur
+/// @param {Color} $color [rgba(0,0,0,.4)] - Color
+/// @param {Boolean} $inset - Inset
+@mixin box-shadow($x: 2px,
+$y: 2px,
+$blur: 5px,
+$color: rgba(0, 0, 0, .4),
+$inset: "") {
+ @if ($inset !="") {
+ @include css3-prefix('box-shadow',
+ $inset $x $y $blur $color);
+ }
+ @else {
+ @include css3-prefix('box-shadow',
+ $x $y $blur $color);
+ }
+}
+
+/// Box Sizing
+/// @param {*} $type [border-box] - Type
+/// @require {mixin} css3-prefix
+@mixin box-sizing($type: border-box) {
+ @include css3-prefix('box-sizing',
+ $type);
+}
+
+/// Columns
+/// @param {Integer} $count [3] - Count
+/// @param {Integer} $gap [10] - Gap
+/// @require {mixin} css3-prefix
+@mixin columns($count: 3,
+$gap: 10) {
+ @include css3-prefix('column-count',
+ $count);
+ @include css3-prefix('column-gap',
+ $gap);
+}
+
+/// Double Borders
+/// @param {Color} $colorOne [#3C3C3C] - Color One
+/// @param {Color} $colorTwo [#999999] - Color Two
+/// @param {Size} $radius [0] - Radius
+/// @require {mixin} css3-prefix
+/// @require {mixin} border-radius
+@mixin double-borders($colorOne: #3C3C3C,
+$colorTwo: #999999,
+$radius: 0) {
+ border: 1px solid $colorOne;
+ @include css3-prefix('box-shadow',
+ 0 0 0 1px $colorTwo);
+ @include border-radius( $radius);
+}
+
+/// Flex
+/// @param {Integer} $value [1] - Value
+/// @require {mixin} css3-prefix
+@mixin flex($value: 1) {
+ @include css3-prefix('box-flex',
+ $value);
+}
+
+/// Flip
+/// @param {Double} $scaleX [-1] - ScaleX
+/// @require {mixin} css3-prefix
+@mixin flip($scaleX: -1) {
+ @include css3-prefix('transform',
+ scaleX($scaleX));
+ filter: FlipH;
+ -ms-filter: "FlipH";
+}
+
+/// Opacity
+/// @param {Double} $opacity [0.5] - Opacity
+/// @require {mixin} css3-prefix
+@mixin opacity($opacity: 0.5) {
+ $opacityMultiplied: ($opacity * 100);
+ filter: alpha(opacity=$opacityMultiplied);
+ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=" + $opacityMultiplied + ")";
+ @include css3-prefix('opacity',
+ $opacity);
+}
+
+/// Outline Radius
+/// @param {Size} $radius [5px] - Radius
+/// @require {mixin} css3-prefix
+@mixin outline-radius($radius: 5px) {
+ @include css3-prefix('outline-radius',
+ $radius);
+}
+
+/// Resize
+/// @param {*} $directoin [both] - Direction
+/// @require {mixin} css3-prefix
+@mixin resize($direction: both) {
+ @include css3-prefix('resize',
+ $direction);
+}
+
+/// Rotate
+///
+/// CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html
+/// @param {Double} $deg [0] - Degree
+/// @param {Double} $m11 [0] - M11
+/// @param {Double} $m12 [0] - M12
+/// @param {Double} $m21 [0] - M21
+/// @param {Double} $m22 [0] - M22
+/// @require {mixin} css3-prefix
+@mixin rotate($deg: 0,
+$m11: 0,
+$m12: 0,
+$m21: 0,
+$m22: 0) {
+ @include css3-prefix('transform',
+ rotate($deg + deg));
+ filter: progid:DXImageTransform.Microsoft.Matrix( M11=#{$m11},
+ M12=#{$m12},
+ M21=#{$m21},
+ M22=#{$m22},
+ sizingMethod='auto expand');
+ zoom: 1;
+}
+
+/// Text Shadow
+/// @param {Size} $x [2px] - X
+/// @param {Size} $y [2px] - Y
+/// @param {Size} $blur [2px] - Blur
+/// @param {Color} $color [rgba(0,0,0,.4)] - Color
+@mixin text-shadow($x: 2px,
+$y: 2px,
+$blur: 5px,
+$color: rgba(0, 0, 0, .4)) {
+ text-shadow: $x $y $blur $color;
+}
+
+/// Transform
+/// @param {List} $params - Params
+/// @require {mixin} css3-prefix
+@mixin transform($params) {
+ @include css3-prefix('transform',
+ $params);
+}
+
+/// Transform-Origin
+/// @param {List} $params - Params
+/// @require {mixin} css3-prefix
+@mixin transform-origin($params) {
+ @include css3-prefix('transform-origin',
+ $params);
+}
+
+// Transform-Style
+/// @param {List} $params - Params
+/// @require {mixin} css3-prefix
+@mixin transform-style($style: preserve-3d) {
+ @include css3-prefix('transform-style',
+ $style);
+}
+
+/// Transition
+/// @param {List} $properties - Properties
+/// @require {mixin} css3-prefix
+@mixin transition($properties...) {
+ @if length($properties)>=1 {
+ @include css3-prefix('transition',
+ $properties);
+ }
+ @else {
+ @include css3-prefix('transition',
+ "all 0.2s ease-in-out 0s");
+ }
+}
+
+/// Triple Borders
+/// @param {Color} $colorOne [#3C3C3C] - Color One
+/// @param {Color} $colorTwo [#999999] - Color Two
+/// @param {Color} $colorThree [#000000] - Color Three
+/// @param {Size} $radius [0] - Radius
+/// @require {mixin} border-radius
+/// @require {mixin} css3-prefix
+@mixin triple-borders($colorOne: #3C3C3C,
+$colorTwo: #999999,
+$colorThree: #000000,
+$radius: 0) {
+ border: 1px solid $colorOne;
+ @include border-radius($radius);
+ @include css3-prefix('box-shadow',
+ "0 0 0 1px #{$colorTwo}, 0 0 0 2px #{$colorThree}");
+}
+
+/// Keyframes
+/// @param {*} $animation-name - Animation name
+/// @content [Animation css]
+@mixin keyframes($animation-name) {
+ @-webkit-keyframes #{$animation-name} {
+ @content;
+ }
+ @-moz-keyframes #{$animation-name} {
+ @content;
+ }
+ @-ms-keyframes #{$animation-name} {
+ @content;
+ }
+ @-o-keyframes #{$animation-name} {
+ @content;
+ }
+ @keyframes #{$animation-name} {
+ @content;
+ }
+}
+
+/// Animation
+/// @param {*} $str - name duration timing-function delay iteration-count direction fill-mode play-state ([http://www.w3schools.com/cssref/css3_pr_animation.asp](http://www.w3schools.com/cssref/css3_pr_animation.asp))
+/// @require {mixin} css3-prefix
+@mixin animation($str) {
+ @include css3-prefix('animation',
+ $str);
+}
+
+// --------------------------------------------------
+// Flexbox SASS mixins
+// The spec: http://www.w3.org/TR/css3-flexbox
+// --------------------------------------------------
+// Flexbox display
+@mixin flexbox() {
+ display: -webkit-box;
+ display: -moz-box;
+ display: -ms-flexbox;
+ display: -webkit-flex;
+ display: flex;
+}
+
+// The 'flex' shorthand
+// - applies to: flex items
+// <positive-number>, initial, auto, or none
+@mixin flex($values) {
+ -webkit-box-flex: $values;
+ -moz-box-flex: $values;
+ -webkit-flex: $values;
+ -ms-flex: $values;
+ flex: $values;
+}
+
+// Flex Flow Direction
+// - applies to: flex containers
+// row | row-reverse | column | column-reverse
+@mixin flex-direction($direction) {
+ -webkit-flex-direction: $direction;
+ -moz-flex-direction: $direction;
+ -ms-flex-direction: $direction;
+ flex-direction: $direction;
+}
+
+// Flex Line Wrapping
+// - applies to: flex containers
+// nowrap | wrap | wrap-reverse
+@mixin flex-wrap($wrap) {
+ -webkit-flex-wrap: $wrap;
+ -moz-flex-wrap: $wrap;
+ -ms-flex-wrap: $wrap;
+ flex-wrap: $wrap;
+}
+
+// Flex Direction and Wrap
+// - applies to: flex containers
+// <flex-direction> || <flex-wrap>
+@mixin flex-flow($flow) {
+ -webkit-flex-flow: $flow;
+ -moz-flex-flow: $flow;
+ -ms-flex-flow: $flow;
+ flex-flow: $flow;
+}
+
+// Display Order
+// - applies to: flex items
+// <integer>
+@mixin order($val) {
+ -webkit-box-ordinal-group: $val;
+ -moz-box-ordinal-group: $val;
+ -ms-flex-order: $val;
+ -webkit-order: $val;
+ order: $val;
+}
+
+// Flex grow factor
+// - applies to: flex items
+// <number>
+@mixin flex-grow($grow) {
+ -webkit-flex-grow: $grow;
+ -moz-flex-grow: $grow;
+ -ms-flex-grow: $grow;
+ flex-grow: $grow;
+}
+
+// Flex shrink
+// - applies to: flex item shrink factor
+// <number>
+@mixin flex-shrink($shrink) {
+ -webkit-flex-shrink: $shrink;
+ -moz-flex-shrink: $shrink;
+ -ms-flex-shrink: $shrink;
+ flex-shrink: $shrink;
+}
+
+// Flex basis
+// - the initial main size of the flex item
+// - applies to: flex itemsnitial main size of the flex item
+// <width>
+@mixin flex-basis($width) {
+ -webkit-flex-basis: $width;
+ -moz-flex-basis: $width;
+ -ms-flex-basis: $width;
+ flex-basis: $width;
+}
+
+// Axis Alignment
+// - applies to: flex containers
+// flex-start | flex-end | center | space-between | space-around
+@mixin justify-content($justify) {
+ -webkit-justify-content: $justify;
+ -moz-justify-content: $justify;
+ -ms-justify-content: $justify;
+ justify-content: $justify;
+ -ms-flex-pack: $justify;
+}
+
+// Packing Flex Lines
+// - applies to: multi-line flex containers
+// flex-start | flex-end | center | space-between | space-around | stretch
+@mixin align-content($align) {
+ -webkit-align-content: $align;
+ -moz-align-content: $align;
+ -ms-align-content: $align;
+ align-content: $align;
+}
+
+// Cross-axis Alignment
+// - applies to: flex containers
+// flex-start | flex-end | center | baseline | stretch
+@mixin align-items($align) {
+ -webkit-align-items: $align;
+ -moz-align-items: $align;
+ -ms-align-items: $align;
+ align-items: $align;
+}
+
+// Cross-axis Alignment
+// - applies to: flex items
+// auto | flex-start | flex-end | center | baseline | stretch
+@mixin align-self($align) {
+ -webkit-align-self: $align;
+ -moz-align-self: $align;
+ -ms-align-self: $align;
+ align-self: $align;
+}
\ No newline at end of file
diff --git a/cern_components/patterns/molecules/slider/sass/slider.component.scss b/patterns/molecules/slider/sass/slider.component.scss
similarity index 97%
rename from cern_components/patterns/molecules/slider/sass/slider.component.scss
rename to patterns/molecules/slider/sass/slider.component.scss
index 0cde3c62..28b49141 100755
--- a/cern_components/patterns/molecules/slider/sass/slider.component.scss
+++ b/patterns/molecules/slider/sass/slider.component.scss
@@ -1,191 +1,191 @@
-// variables & mixings
-@import 'variables';
-// fonts
-@font-face {
- font-family: "sourcesans-regular";
- src: url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/regular.eot?") format("eot"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/regular.woff2") format("woff2"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/regular.woff") format("woff"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/regular.ttf") format("truetype"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/regular.svg#sourcesans-regular") format("svg");
-}
-
-@font-face {
- font-family: "sourcesans-semibold";
- src: url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/semibold.eot?") format("eot"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/semibold.woff2") format("woff2"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/semibold.woff") format("woff"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/semibold.ttf") format("truetype"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/semibold.svg#sourcesans-semibold") format("svg");
-}
-
-@font-face {
- font-family: "sourcesans-bold";
- src: url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/bold.eot?") format("eot"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/bold.woff2") format("woff2"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/bold.woff") format("woff"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/bold.ttf") format("truetype"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/bold.svg#sourcesans-bold") format("svg");
-}
-
-@font-face {
- font-family: "sourcesans-light";
- src: url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/light.eot?") format("eot"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/light.woff2") format("woff2"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/light.woff") format("woff"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/light.ttf") format("truetype"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/light.svg#sourcesans-light") format("svg");
-}
-
-@font-face {
- font-family: "opensans-regular";
- src: url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/regular.eot?") format("eot"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/regular.woff2") format("woff2"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/regular.woff") format("woff"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/regular.ttf") format("truetype"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/regular.svg#opensans-regular") format("svg");
-}
-
-@font-face {
- font-family: "opensans-semibold";
- src: url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/semibold.eot?") format("eot"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/semibold.woff2") format("woff2"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/semibold.woff") format("woff"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/semibold.ttf") format("truetype"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/semibold.svg#opensans-semibold") format("svg");
-}
-
-@font-face {
- font-family: "opensans-bold";
- src: url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/bold.eot?") format("eot"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/bold.woff2") format("woff2"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/bold.woff") format("woff"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/bold.ttf") format("truetype"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/bold.svg#opensans-bold") format("svg");
-}
-
-@font-face {
- font-family: "cern-icons";
- src: url("//framework.web.cern.ch/framework/3.0/fonts/cern/cern.eot?") format("eot"), url("//framework.web.cern.ch/framework/3.0/fonts/cern/cern.woff2") format("woff2"), url("//framework.web.cern.ch/framework/3.0/fonts/cern/cern.woff") format("woff"), url("//framework.web.cern.ch/framework/3.0/fonts/cern/cern.ttf") format("truetype"), url("//framework.web.cern.ch/framework/3.0/fonts/cern/cern.svg#cern-icons") format("svg");
-}
-
-//
-//* ****************************************** component slide */
-.component-slider {
- position: relative;
- display: block;
- .owl-stage {
- @include flexbox;
- @include align-items(stretch);
- .owl-item {
- @include flexbox;
- @include align-items(stretch);
- .component-slide {
- @include flexbox;
- @include align-items(center);
- @include justify-content(center);
- @include flex-wrap(wrap);
- position: relative;
- }
- .component-slide__image {
- position: relative;
- min-width: 100%;
- img {
- max-height: 500px;
- max-width: 99%;
- width: auto;
- height: auto;
- margin: auto;
- padding: 0;
- }
- }
- .component-slide__video {
- position: relative;
- min-width: 100%;
- video {
- display: block;
- height: auto;
- max-height: 500px;
- max-width: 99%;
- width: auto;
- margin: auto;
- padding: 0;
- }
- }
- .component-slide__caption {
- left: 0;
- right: 0;
- margin: 0 auto;
- p {
- margin: 0;
- }
- .component-slide__caption_image_counter {
- padding: 10px;
- display: none;
- font-family: 'sourcesans-bold';
- }
- }
- }
- }
- .owl-nav {
- .owl-prev,
- .owl-next {
- height: auto;
- position: absolute;
- top: calc(50% - 30px);
- background: transparent;
- color: $link-color;
- font-size: 30px;
- &:hover {
- background: transparent;
- color: $link-color;
- }
- &.disabled {
- background: transparent;
- color: $grey-light;
- }
- .icons::before {
- @include font-size(3.0);
- font-family: "cern-icons";
- -moz-osx-font-smoothing: grayscale;
- -webkit-font-smoothing: antialiased;
- display: block;
- width: 30px;
- line-height: 30px;
- }
- }
- .owl-prev {
- left: 0;
- .icons::before {
- content: "\64";
- }
- }
- .owl-next {
- right: 0;
- .icons::before {
- content: "\63";
- }
- }
- }
-}
-
-@media only screen and (max-width: 1024px) {
- .component-slider {
- .component-slide {
- min-width: 100%;
- width: inherit;
- }
- .owl-nav {
- display: none;
- }
- .owl-stage .owl-item {
- figure {
- margin-bottom: 0 !important;
- }
- figcaption {
- display: none;
- }
- .component-slide__caption {
- background: #111;
- position: static;
- max-width: 100%;
- margin: 0 auto;
- .component-slide__caption_image_counter {
- display: block;
- }
- }
- }
- }
-}
-
-.component-slider {
- .owl-stage .owl-item {
- figure {
- margin-bottom: 0 !important;
- }
- figcaption {
- display: none;
- }
- .component-slide__caption {
- background: #111;
- position: static;
- max-width: 100%;
- margin: 0 auto;
- .component-slide__caption_image_counter {
- display: block;
- }
- }
- }
-}
+// variables & mixings
+@import 'variables';
+// fonts
+@font-face {
+ font-family: "sourcesans-regular";
+ src: url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/regular.eot?") format("eot"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/regular.woff2") format("woff2"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/regular.woff") format("woff"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/regular.ttf") format("truetype"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/regular.svg#sourcesans-regular") format("svg");
+}
+
+@font-face {
+ font-family: "sourcesans-semibold";
+ src: url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/semibold.eot?") format("eot"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/semibold.woff2") format("woff2"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/semibold.woff") format("woff"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/semibold.ttf") format("truetype"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/semibold.svg#sourcesans-semibold") format("svg");
+}
+
+@font-face {
+ font-family: "sourcesans-bold";
+ src: url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/bold.eot?") format("eot"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/bold.woff2") format("woff2"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/bold.woff") format("woff"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/bold.ttf") format("truetype"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/bold.svg#sourcesans-bold") format("svg");
+}
+
+@font-face {
+ font-family: "sourcesans-light";
+ src: url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/light.eot?") format("eot"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/light.woff2") format("woff2"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/light.woff") format("woff"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/light.ttf") format("truetype"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/light.svg#sourcesans-light") format("svg");
+}
+
+@font-face {
+ font-family: "opensans-regular";
+ src: url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/regular.eot?") format("eot"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/regular.woff2") format("woff2"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/regular.woff") format("woff"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/regular.ttf") format("truetype"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/regular.svg#opensans-regular") format("svg");
+}
+
+@font-face {
+ font-family: "opensans-semibold";
+ src: url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/semibold.eot?") format("eot"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/semibold.woff2") format("woff2"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/semibold.woff") format("woff"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/semibold.ttf") format("truetype"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/semibold.svg#opensans-semibold") format("svg");
+}
+
+@font-face {
+ font-family: "opensans-bold";
+ src: url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/bold.eot?") format("eot"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/bold.woff2") format("woff2"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/bold.woff") format("woff"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/bold.ttf") format("truetype"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/bold.svg#opensans-bold") format("svg");
+}
+
+@font-face {
+ font-family: "cern-icons";
+ src: url("//framework.web.cern.ch/framework/3.0/fonts/cern/cern.eot?") format("eot"), url("//framework.web.cern.ch/framework/3.0/fonts/cern/cern.woff2") format("woff2"), url("//framework.web.cern.ch/framework/3.0/fonts/cern/cern.woff") format("woff"), url("//framework.web.cern.ch/framework/3.0/fonts/cern/cern.ttf") format("truetype"), url("//framework.web.cern.ch/framework/3.0/fonts/cern/cern.svg#cern-icons") format("svg");
+}
+
+//
+//* ****************************************** component slide */
+.component-slider {
+ position: relative;
+ display: block;
+ .owl-stage {
+ @include flexbox;
+ @include align-items(stretch);
+ .owl-item {
+ @include flexbox;
+ @include align-items(stretch);
+ .component-slide {
+ @include flexbox;
+ @include align-items(center);
+ @include justify-content(center);
+ @include flex-wrap(wrap);
+ position: relative;
+ }
+ .component-slide__image {
+ position: relative;
+ min-width: 100%;
+ img {
+ max-height: 500px;
+ max-width: 99%;
+ width: auto;
+ height: auto;
+ margin: auto;
+ padding: 0;
+ }
+ }
+ .component-slide__video {
+ position: relative;
+ min-width: 100%;
+ video {
+ display: block;
+ height: auto;
+ max-height: 500px;
+ max-width: 99%;
+ width: auto;
+ margin: auto;
+ padding: 0;
+ }
+ }
+ .component-slide__caption {
+ left: 0;
+ right: 0;
+ margin: 0 auto;
+ p {
+ margin: 0;
+ }
+ .component-slide__caption_image_counter {
+ padding: 10px;
+ display: none;
+ font-family: 'sourcesans-bold';
+ }
+ }
+ }
+ }
+ .owl-nav {
+ .owl-prev,
+ .owl-next {
+ height: auto;
+ position: absolute;
+ top: calc(50% - 30px);
+ background: transparent;
+ color: $link-color;
+ font-size: 30px;
+ &:hover {
+ background: transparent;
+ color: $link-color;
+ }
+ &.disabled {
+ background: transparent;
+ color: $grey-light;
+ }
+ .icons::before {
+ @include font-size(3.0);
+ font-family: "cern-icons";
+ -moz-osx-font-smoothing: grayscale;
+ -webkit-font-smoothing: antialiased;
+ display: block;
+ width: 30px;
+ line-height: 30px;
+ }
+ }
+ .owl-prev {
+ left: 0;
+ .icons::before {
+ content: "\64";
+ }
+ }
+ .owl-next {
+ right: 0;
+ .icons::before {
+ content: "\63";
+ }
+ }
+ }
+}
+
+@media only screen and (max-width: 1024px) {
+ .component-slider {
+ .component-slide {
+ min-width: 100%;
+ width: inherit;
+ }
+ .owl-nav {
+ display: none;
+ }
+ .owl-stage .owl-item {
+ figure {
+ margin-bottom: 0 !important;
+ }
+ figcaption {
+ display: none;
+ }
+ .component-slide__caption {
+ background: #111;
+ position: static;
+ max-width: 100%;
+ margin: 0 auto;
+ .component-slide__caption_image_counter {
+ display: block;
+ }
+ }
+ }
+ }
+}
+
+.component-slider {
+ .owl-stage .owl-item {
+ figure {
+ margin-bottom: 0 !important;
+ }
+ figcaption {
+ display: none;
+ }
+ .component-slide__caption {
+ background: #111;
+ position: static;
+ max-width: 100%;
+ margin: 0 auto;
+ .component-slide__caption_image_counter {
+ display: block;
+ }
+ }
+ }
+}
diff --git a/cern_components/patterns/molecules/slider/sass/variables.scss b/patterns/molecules/slider/sass/variables.scss
similarity index 94%
rename from cern_components/patterns/molecules/slider/sass/variables.scss
rename to patterns/molecules/slider/sass/variables.scss
index 5d0c6e04..ce132d1e 100755
--- a/cern_components/patterns/molecules/slider/sass/variables.scss
+++ b/patterns/molecules/slider/sass/variables.scss
@@ -1,79 +1,79 @@
-// mixins library
-@import 'mixins';
-//
-// Variables
-// --------------------------------------------------
-// Grays
-// -------------------------
-$grey-dark: #292929;
-$grey-medium: #4a4a4a;
-$grey-light: #bebebe;
-$grey-mlight:#efe8e8;
-//
-// corporate colors
-// -------------------------
-$blue: #0855a0;
-$orange: #f2a530;
-//
-// Section colors
-// -------------------------
-$error: #ff0000;
-$error-light: #faeaea;
-//
-// generic variables
-// -------------------------
-$white: #ffffff;
-$black: #000000;
-$black-medium:#1a1a1a;
-$body-bg: $white;
-$text-color: $black;
-$link-color: $blue;
-//
-//
-// Styles
-// -------------------------
-%link {
- color: $link-color;
- text-decoration: none;
-}
-
-%box-title {
- @include font-size(4.0);
- color: $black;
- font-family: 'Open Sans', sans-serif;
- font-weight: 700;
- margin: 0px 0 20px;
- line-height: 50px;
- @media only screen and (max-width: 480px) {
- @include font-size(2.5);
- }
-}
-
-%box-text {
- @include font-size(1.6);
- color: $grey-medium;
- font-family: 'Open Sans', sans-serif;
- font-weight: 700;
- @media only screen and (max-width: 480px) {
- @include font-size(1.4);
- }
-}
-
-%title-section {
- @include font-size(3.0);
- color: $grey-dark;
- font-family: 'Open Sans', sans-serif;
- font-weight: 700;
- text-transform: uppercase;
- margin-bottom: 30px;
- display: block;
-}
-
-%line-separator-v {
- border-right: 1px solid $white;
- height: 10px;
- content: '';
- display: inline-block;
- width: 1px;
- margin: 0 8px;
-}
+// mixins library
+@import 'mixins';
+//
+// Variables
+// --------------------------------------------------
+// Grays
+// -------------------------
+$grey-dark: #292929;
+$grey-medium: #4a4a4a;
+$grey-light: #bebebe;
+$grey-mlight:#efe8e8;
+//
+// corporate colors
+// -------------------------
+$blue: #0855a0;
+$orange: #f2a530;
+//
+// Section colors
+// -------------------------
+$error: #ff0000;
+$error-light: #faeaea;
+//
+// generic variables
+// -------------------------
+$white: #ffffff;
+$black: #000000;
+$black-medium:#1a1a1a;
+$body-bg: $white;
+$text-color: $black;
+$link-color: $blue;
+//
+//
+// Styles
+// -------------------------
+%link {
+ color: $link-color;
+ text-decoration: none;
+}
+
+%box-title {
+ @include font-size(4.0);
+ color: $black;
+ font-family: 'Open Sans', sans-serif;
+ font-weight: 700;
+ margin: 0px 0 20px;
+ line-height: 50px;
+ @media only screen and (max-width: 480px) {
+ @include font-size(2.5);
+ }
+}
+
+%box-text {
+ @include font-size(1.6);
+ color: $grey-medium;
+ font-family: 'Open Sans', sans-serif;
+ font-weight: 700;
+ @media only screen and (max-width: 480px) {
+ @include font-size(1.4);
+ }
+}
+
+%title-section {
+ @include font-size(3.0);
+ color: $grey-dark;
+ font-family: 'Open Sans', sans-serif;
+ font-weight: 700;
+ text-transform: uppercase;
+ margin-bottom: 30px;
+ display: block;
+}
+
+%line-separator-v {
+ border-right: 1px solid $white;
+ height: 10px;
+ content: '';
+ display: inline-block;
+ width: 1px;
+ margin: 0 8px;
+}
diff --git a/cern_components/patterns/molecules/slider/slider.html.twig b/patterns/molecules/slider/slider.html.twig
similarity index 100%
rename from cern_components/patterns/molecules/slider/slider.html.twig
rename to patterns/molecules/slider/slider.html.twig
diff --git a/cern_components/patterns/molecules/slider/slider.ui_patterns.yml b/patterns/molecules/slider/slider.ui_patterns.yml
similarity index 100%
rename from cern_components/patterns/molecules/slider/slider.ui_patterns.yml
rename to patterns/molecules/slider/slider.ui_patterns.yml
diff --git a/cern_components/patterns/molecules/story-page/css/story-page.component.css b/patterns/molecules/story-page/css/story-page.component.css
similarity index 100%
rename from cern_components/patterns/molecules/story-page/css/story-page.component.css
rename to patterns/molecules/story-page/css/story-page.component.css
diff --git a/cern_components/patterns/molecules/story-page/js/story-page.component.js b/patterns/molecules/story-page/js/story-page.component.js
similarity index 100%
rename from cern_components/patterns/molecules/story-page/js/story-page.component.js
rename to patterns/molecules/story-page/js/story-page.component.js
diff --git a/cern_components/patterns/molecules/story-page/scss/story-page.component.scss b/patterns/molecules/story-page/scss/story-page.component.scss
similarity index 100%
rename from cern_components/patterns/molecules/story-page/scss/story-page.component.scss
rename to patterns/molecules/story-page/scss/story-page.component.scss
diff --git a/cern_components/patterns/molecules/story-page/story-page.html.twig b/patterns/molecules/story-page/story-page.html.twig
similarity index 100%
rename from cern_components/patterns/molecules/story-page/story-page.html.twig
rename to patterns/molecules/story-page/story-page.html.twig
diff --git a/cern_components/patterns/molecules/story-page/story-page.ui_patterns.yml b/patterns/molecules/story-page/story-page.ui_patterns.yml
similarity index 100%
rename from cern_components/patterns/molecules/story-page/story-page.ui_patterns.yml
rename to patterns/molecules/story-page/story-page.ui_patterns.yml
diff --git a/cern_components/patterns/molecules/system-display/css/system-display.component.css b/patterns/molecules/system-display/css/system-display.component.css
similarity index 100%
rename from cern_components/patterns/molecules/system-display/css/system-display.component.css
rename to patterns/molecules/system-display/css/system-display.component.css
diff --git a/cern_components/patterns/molecules/system-display/scss/system-display.component.scss b/patterns/molecules/system-display/scss/system-display.component.scss
similarity index 100%
rename from cern_components/patterns/molecules/system-display/scss/system-display.component.scss
rename to patterns/molecules/system-display/scss/system-display.component.scss
diff --git a/cern_components/patterns/molecules/system-display/system-display.html.twig b/patterns/molecules/system-display/system-display.html.twig
similarity index 100%
rename from cern_components/patterns/molecules/system-display/system-display.html.twig
rename to patterns/molecules/system-display/system-display.html.twig
diff --git a/cern_components/patterns/molecules/system-display/system-display.ui_patterns.yml b/patterns/molecules/system-display/system-display.ui_patterns.yml
similarity index 100%
rename from cern_components/patterns/molecules/system-display/system-display.ui_patterns.yml
rename to patterns/molecules/system-display/system-display.ui_patterns.yml
diff --git a/cern_components/patterns/molecules/text/css/text.component.css b/patterns/molecules/text/css/text.component.css
similarity index 100%
rename from cern_components/patterns/molecules/text/css/text.component.css
rename to patterns/molecules/text/css/text.component.css
diff --git a/cern_components/patterns/molecules/text/scss/text.component.scss b/patterns/molecules/text/scss/text.component.scss
similarity index 100%
rename from cern_components/patterns/molecules/text/scss/text.component.scss
rename to patterns/molecules/text/scss/text.component.scss
diff --git a/cern_components/patterns/molecules/text/text.html.twig b/patterns/molecules/text/text.html.twig
similarity index 100%
rename from cern_components/patterns/molecules/text/text.html.twig
rename to patterns/molecules/text/text.html.twig
diff --git a/cern_components/patterns/molecules/text/text.ui_patterns.yml b/patterns/molecules/text/text.ui_patterns.yml
similarity index 100%
rename from cern_components/patterns/molecules/text/text.ui_patterns.yml
rename to patterns/molecules/text/text.ui_patterns.yml
diff --git a/cern_components/patterns/molecules/timeline/css/timeline.component.css b/patterns/molecules/timeline/css/timeline.component.css
similarity index 100%
rename from cern_components/patterns/molecules/timeline/css/timeline.component.css
rename to patterns/molecules/timeline/css/timeline.component.css
diff --git a/cern_components/patterns/molecules/timeline/js/timeline.component.js b/patterns/molecules/timeline/js/timeline.component.js
similarity index 100%
rename from cern_components/patterns/molecules/timeline/js/timeline.component.js
rename to patterns/molecules/timeline/js/timeline.component.js
diff --git a/cern_components/patterns/molecules/timeline/scss/timeline.component.scss b/patterns/molecules/timeline/scss/timeline.component.scss
similarity index 100%
rename from cern_components/patterns/molecules/timeline/scss/timeline.component.scss
rename to patterns/molecules/timeline/scss/timeline.component.scss
diff --git a/cern_components/patterns/molecules/timeline/timeline.html.twig b/patterns/molecules/timeline/timeline.html.twig
similarity index 100%
rename from cern_components/patterns/molecules/timeline/timeline.html.twig
rename to patterns/molecules/timeline/timeline.html.twig
diff --git a/cern_components/patterns/molecules/timeline/timeline.ui_patterns.yml b/patterns/molecules/timeline/timeline.ui_patterns.yml
similarity index 100%
rename from cern_components/patterns/molecules/timeline/timeline.ui_patterns.yml
rename to patterns/molecules/timeline/timeline.ui_patterns.yml
diff --git a/cern_components/patterns/templates/simple/css/simple.component.css b/patterns/templates/simple/css/simple.component.css
similarity index 100%
rename from cern_components/patterns/templates/simple/css/simple.component.css
rename to patterns/templates/simple/css/simple.component.css
diff --git a/cern_components/patterns/templates/simple/scss/simple.component.scss b/patterns/templates/simple/scss/simple.component.scss
similarity index 100%
rename from cern_components/patterns/templates/simple/scss/simple.component.scss
rename to patterns/templates/simple/scss/simple.component.scss
diff --git a/cern_components/patterns/templates/simple/simple.html.twig b/patterns/templates/simple/simple.html.twig
similarity index 100%
rename from cern_components/patterns/templates/simple/simple.html.twig
rename to patterns/templates/simple/simple.html.twig
diff --git a/cern_components/patterns/templates/simple/simple.ui_patterns.yml b/patterns/templates/simple/simple.ui_patterns.yml
similarity index 100%
rename from cern_components/patterns/templates/simple/simple.ui_patterns.yml
rename to patterns/templates/simple/simple.ui_patterns.yml
diff --git a/cern_components/src/TwigExtension/CernComponentsTwigExtension.php b/src/TwigExtension/CernComponentsTwigExtension.php
similarity index 100%
rename from cern_components/src/TwigExtension/CernComponentsTwigExtension.php
rename to src/TwigExtension/CernComponentsTwigExtension.php
--
GitLab