fix(framework): add missing files (#56)

framework/_bootstrap-reset.scss

@@ -0,0 +1,15 @@
+// Reset for bootstrap styles
+
+.radio + .radio,
+.checkbox + .checkbox {
+  margin-top: auto;
+}
+
+ul.list-inline > li {
+  display: inline-block;
+}
+
+.row {
+  padding-top: 0;
+  padding-bottom: 0;
+}

framework/_global.scss

@@ -0,0 +1,48 @@
+// Global
+
+body {
+  min-width: 320px;
+  font-family: $font-family-base;
+  font-weight: 400;
+  line-height: 1.667;
+  overflow-x: hidden;
+  text-rendering: optimizelegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+
+  @include breakpoint(screen-xs-min) {
+    font-size: 18px;
+  }
+}
+
+.no-js .collapse {
+  display: block;
+  visibility: visible;
+}
+
+.region-sidebar-first {
+  padding: 1.667em 0;
+}
+
+.navbar-toggle {
+  border-radius: 0;
+  border: none;
+}
+
+.navbar-collapse,
+.navbar-fixed-top,
+.navbar {
+  border: none;
+}
+
+.facetapi-facetapi-checkbox-links {
+  list-style: none;
+
+  input.facetapi-checkbox {
+    margin-right: 0.5em;
+  }
+
+  a.facetapi-checkbox {
+    text-decoration: none;
+  }
+}

framework/atoms/forms/controls/_controls.scss

@@ -0,0 +1,7 @@
+/*
+Form controls
+*/
+
+.form-control {
+  @include form-control();
+}

framework/atoms/forms/controls/package.json

@@ -0,0 +1,10 @@
+{
+  "name": "@ec-europa/europa-component-library-forms-controls",
+  "version": "1.0.0",
+  "description": "",
+  "main": "_controls.scss",
+  "style": "_controls.scss",
+  "author": "",
+  "private": true,
+  "license": "EUPL-1.1"
+}

framework/index.scss

@@ -52,17 +52,25 @@
 // Importing mixins
 @import 'mixins';
 
-// Importing simple helpers.
+// Importing simple helpers and Bootstrap resets
 @import 'helpers';
+@import 'bootstrap-reset';
+@import 'global';
 
-// Atoms
+// Typography
+@import 'atoms/typography/blockquotes/blockquotes';
+@import 'atoms/typography/headings/headings';
+@import 'atoms/typography/links/links';
+@import 'atoms/typography/lists/lists';
+@import 'atoms/typography/paragraphs/paragraphs';
 
 // Icons
 @import 'atoms/icons/icons';
 @import 'atoms/social-icons/social-icons';
 
 // Forms
 @import 'atoms/forms/checkboxes/checkboxes';
+@import 'atoms/forms/controls/controls';
 @import 'atoms/forms/feedback-messages/feedback-messages';
 @import 'atoms/forms/file-uploads/file-uploads';
 @import 'atoms/forms/form-groups/form-groups';
@@ -73,13 +81,6 @@
 @import 'atoms/forms/selects/selects';
 @import 'atoms/forms/textareas/textareas';
 
-// Typography
-@import 'atoms/typography/blockquotes/blockquotes';
-@import 'atoms/typography/headings/headings';
-@import 'atoms/typography/links/links';
-@import 'atoms/typography/lists/lists';
-@import 'atoms/typography/paragraphs/paragraphs';
-
 // Other atoms
 @import 'atoms/buttons/buttons';
 @import 'atoms/date-blocks/date-blocks';
@@ -90,10 +91,25 @@
 @import 'atoms/logos/logos';
 @import 'atoms/messages/messages';
 @import 'atoms/meta/meta';
-@import 'atoms/tags/tags';
-@import 'atoms/tables/tables';
-@import 'atoms/site-switchers/site-switchers';
 @import 'atoms/site-slogans/site-slogans';
+@import 'atoms/site-switchers/site-switchers';
+@import 'atoms/tables/tables';
+@import 'atoms/tags/tags';
+@import 'atoms/top-images/top-images';
+
+// Layout
+@import 'layout/blocks/blocks';
+@import 'layout/container-fluid';
+@import 'layout/top-bar';
+@import 'layout/page-content';
+@import 'layout/page-navigation';
+@import 'layout/sidebar-field-group';
+@import 'layout/sections/sections';
+@import 'layout/footer-top';
+@import 'layout/header-top';
+@import 'layout/field-group';
+@import 'layout/utility';
+@import 'layout/listings/listings';
 
 // Molecules
 @import 'molecules/banners/banners';
@@ -117,27 +133,18 @@
 @import 'molecules/pagers/pagers';
 @import 'molecules/rss-links/rss-links';
 @import 'molecules/search-forms/search-forms';
+@import 'molecules/site-user-menus/site-user-menus';
+@import 'molecules/skip-links/skip-links';
 @import 'molecules/social-media-links/social-media-links';
 @import 'molecules/timelines/timelines';
 
-// Layout
-@import 'layout/listings/listings';
-@import 'layout/container-fluid';
-@import 'layout/top-bar';
-@import 'layout/page-content';
-@import 'layout/page-navigation';
-@import 'layout/sidebar-field-group';
-@import 'layout/sections/sections';
-@import 'layout/footer-top';
-@import 'layout/header-top';
-@import 'layout/field-group';
-@import 'layout/utility';
-
 // Organisms
+@import 'organisms/feedback-forms/feedback-forms';
 @import 'organisms/footers/footers';
+@import 'organisms/header-search-bars/header-search-bars';
+@import 'organisms/nav-tabs/nav-tabs';
 @import 'organisms/page-headers/page-headers';
 @import 'organisms/profile-topbars/profile-topbars';
-@import 'organisms/nav-tabs/nav-tabs';
 @import 'organisms/site-headers/site-headers';
+@import 'organisms/site-menus/site-menus';
 @import 'organisms/splash-pages/splash-pages';
-@import 'organisms/header-search-bars/header-search-bars';

framework/layout/blocks/_blocks.scss

@@ -0,0 +1,17 @@
+.block--full-width {
+  margin-left: -$grid-gutter-width / 2;
+  margin-right: -$grid-gutter-width / 2;
+}
+
+@include breakpoint(screen-lg-min) {
+  .block--full-width {
+    margin: 0 -999em;
+    padding: 0 999em;
+  }
+}
+
+@media (max-width: 500px) {
+  .block--full-width {
+    margin: 0;
+  }
+}

framework/layout/blocks/package.json

@@ -0,0 +1,10 @@
+{
+  "name": "@ec-europa/europa-component-library-blocks",
+  "version": "1.0.0",
+  "description": "",
+  "main": "_blocks.scss",
+  "style": "_blocks.scss",
+  "author": "",
+  "private": true,
+  "license": "EUPL-1.1"
+}

framework/layout/listings/agenda/agenda.html

@@ -0,0 +1,36 @@
+<div class="listing__wrapper">
+  <ul class="listing listing--agenda listing--column-left [modifier class]">
+    <li class="listing__item">
+      <div class="listing__column-second">
+        <div class="date-block">
+          <span class="date-block__day-text">Mon</span>
+          <span class="date-block__day">12</span>
+          <span class="date-block__month">Oct</span>
+        </div>
+      </div>
+      <div class="listing__column-main">
+        <div class="meta">
+          <span class="meta__item meta__item--type">college meeting</span>
+        </div>
+        <h3 class="listing__title">Meeting of the College of Commissioners</h3>
+        <div class="listing__author">Jean-Claude Juncker</div>
+      </div>
+    </li>
+    <li class="listing__item">
+      <div class="listing__column-second">
+        <div class="date-block">
+          <span class="date-block__day-text">Mon</span>
+          <span class="date-block__day">12</span>
+          <span class="date-block__month">Oct</span>
+        </div>
+      </div>
+      <div class="listing__column-main">
+        <div class="meta">
+          <span class="meta__item meta__item--type">meeting</span>
+        </div>
+        <h3 class="listing__title">Meeting of the College of Commissioners</h3>
+        <div class="listing__author">Jean-Claude Juncker, Federica Mogherini</div>
+      </div>
+    </li>
+  </ul>
+</div>

framework/layout/listings/navigation/navigation.html

@@ -0,0 +1,72 @@
+<div class="section">
+  <div class="section__group section--row-three section--navigation">
+
+    <!-- Title with additional text, links, and grandchilds section item. -->
+    <div class="section__item">
+      <div class="listing listing--navigation">
+        <a href="#" class="listing__item-link">
+          <h2 class="listing__section-title">Title with additional text, links and grandchilds</h2>
+          <p class="listing__description">
+            This is the description.
+            EU strategy, its role in setting priorities, and its implementation through EU policy.
+          </p>
+        </a>
+        <div class="listing__item">
+          <a href="http://europa.eu/eu-law/index_en.htm" class="listing__title">Introduction to EU law</a>
+        </div>
+        <div class="listing__item">
+          <a href="http://eur-lex.europa.eu/homepage.html" class="listing__title">Find EU legislation (EUR-Lex)</a>
+        </div>
+        <div class="listing__item">
+          <a href="http://eur-lex.europa.eu/collection/eu-law/eu-case-law.html" class="listing__title">EU case law (EUR-Lex)</a>
+        </div>
+        <div class="listing__item">
+          <a href="http://eur-lex.europa.eu/browse/summaries.html" class="listing__title">Summaries of EU legislation</a>
+        </div>
+        <hr class="listing__separator">
+        <div class="listing__item">
+          <a href="#" class="listing__title">Related Item 1.</a>
+        </div>
+        <div class="listing__item">
+          <a href="#" class="listing__title">Related Item 2.</a>
+        </div>
+        <div class="listing__item">
+          <a href="#" class="listing__title">Related Item 3.</a>
+        </div>
+      </div>
+    </div>
+
+    <!-- Title with additional text section item. -->
+    <div class="section__item">
+      <div class="listing listing--navigation">
+        <a class="listing__item-link" href="http://ec.europa.eu/budget/annual/index_en.cfm">
+          <h2 class="listing__section-title">Title with additional text</h2>
+          <p class="listing__description">Information on the annual budget life-cycle.</p>
+        </a>
+      </div>
+    </div>
+
+    <!-- Title with additional text, links, without any grandchild section item. -->
+    <div class="section__item">
+      <div class="listing listing--navigation">
+        <a href="#" class="listing__item-link">
+          <h2 class="listing__section-title">Title with additional text, links and grandchilds</h2>
+        </a>
+        <div class="listing__item">
+          <a href="http://europa.eu/eu-law/index_en.htm" class="listing__title">Introduction to EU law</a>
+        </div>
+        <div class="listing__item">
+          <a href="http://eur-lex.europa.eu/homepage.html" class="listing__title">Find EU legislation (EUR-Lex)</a>
+        </div>
+        <div class="listing__item">
+          <a href="http://eur-lex.europa.eu/collection/eu-law/eu-case-law.html" class="listing__title">EU case law (EUR-Lex)</a>
+        </div>
+        <div class="listing__item">
+          <a href="http://eur-lex.europa.eu/browse/summaries.html" class="listing__title">Summaries of EU legislation</a>
+        </div>
+      </div>
+    </div>
+
+  </div>
+</div>
+

framework/molecules/site-user-menus/_site-user-menus.scss

@@ -0,0 +1,29 @@
+/*
+Site user menu
+*/
+
+.site-user-menu__list {
+  list-style: none;
+  float: right;
+  margin-bottom: 0 !important;
+  padding: 0;
+  font-weight: $font-weight-bold;
+}
+
+.site-user-menu__option {
+  display: inline-block;
+  padding: 0.685em 1.333em;
+
+  a {
+    text-decoration: none;
+
+    &:hover,
+    &:focus {
+      text-decoration: underline;
+    }
+  }
+
+  &:last-child {
+    padding-right: 0;
+  }
+}

framework/molecules/skip-links/_skip-links.scss

@@ -0,0 +1,17 @@
+.skip-link,
+#skip-link {
+  @extend .hidden-print;
+
+  position: fixed;
+  top: 1.5em;
+  left: 1.5em;
+  z-index: $zindex-popover;
+
+  a {
+    padding: 8px;
+    background-color: $blue;
+    color: $white;
+    outline: 4px solid $yellow-light;
+    outline-offset: 0;
+  }
+}