From 5c9d1d7aec5a6b649c20b0bb5f6456dbfe8e492c Mon Sep 17 00:00:00 2001 From: Yannick Huard Date: Tue, 7 Feb 2017 13:15:01 +0100 Subject: [PATCH] fix(framework): add missing files (#56) --- framework/_bootstrap-reset.scss | 15 ++ framework/_global.scss | 48 ++++++ framework/atoms/forms/controls/_controls.scss | 7 + framework/atoms/forms/controls/package.json | 10 ++ .../{textareas.scss => _textareas.scss} | 0 framework/index.scss | 61 ++++--- framework/layout/blocks/_blocks.scss | 17 ++ framework/layout/blocks/package.json | 10 ++ framework/layout/listings/agenda/agenda.html | 36 ++++ .../listings/navigation/navigation.html | 72 ++++++++ .../layout/listings/teaser/teaser.config.j | 0 .../site-user-menus/_site-user-menus.scss | 29 ++++ .../molecules/skip-links/_skip-links.scss | 17 ++ .../feedback-forms/_feedback-forms.scss | 163 ++++++++++++++++++ .../organisms/feedback-forms/package.json | 10 ++ framework/organisms/nav-tabs/_nav-tabs.scss | 4 +- .../organisms/site-menus/_site-menus.scss | 147 ++++++++++++++++ framework/organisms/site-menus/package.json | 10 ++ 18 files changed, 627 insertions(+), 29 deletions(-) create mode 100644 framework/_bootstrap-reset.scss create mode 100644 framework/_global.scss create mode 100644 framework/atoms/forms/controls/_controls.scss create mode 100644 framework/atoms/forms/controls/package.json rename framework/atoms/forms/textareas/{textareas.scss => _textareas.scss} (100%) create mode 100644 framework/layout/blocks/_blocks.scss create mode 100644 framework/layout/blocks/package.json create mode 100644 framework/layout/listings/agenda/agenda.html create mode 100644 framework/layout/listings/navigation/navigation.html create mode 100644 framework/layout/listings/teaser/teaser.config.j create mode 100644 framework/molecules/site-user-menus/_site-user-menus.scss create mode 100644 framework/molecules/skip-links/_skip-links.scss create mode 100644 framework/organisms/feedback-forms/_feedback-forms.scss create mode 100644 framework/organisms/feedback-forms/package.json create mode 100644 framework/organisms/site-menus/_site-menus.scss create mode 100644 framework/organisms/site-menus/package.json diff --git a/framework/_bootstrap-reset.scss b/framework/_bootstrap-reset.scss new file mode 100644 index 00000000000..70a6ab37c24 --- /dev/null +++ b/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; +} diff --git a/framework/_global.scss b/framework/_global.scss new file mode 100644 index 00000000000..ceac83beee8 --- /dev/null +++ b/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; + } +} diff --git a/framework/atoms/forms/controls/_controls.scss b/framework/atoms/forms/controls/_controls.scss new file mode 100644 index 00000000000..e266ffae45b --- /dev/null +++ b/framework/atoms/forms/controls/_controls.scss @@ -0,0 +1,7 @@ +/* +Form controls +*/ + +.form-control { + @include form-control(); +} diff --git a/framework/atoms/forms/controls/package.json b/framework/atoms/forms/controls/package.json new file mode 100644 index 00000000000..8498a40c6b1 --- /dev/null +++ b/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" +} diff --git a/framework/atoms/forms/textareas/textareas.scss b/framework/atoms/forms/textareas/_textareas.scss similarity index 100% rename from framework/atoms/forms/textareas/textareas.scss rename to framework/atoms/forms/textareas/_textareas.scss diff --git a/framework/index.scss b/framework/index.scss index 55c6c65173f..5f4ae7672b6 100644 --- a/framework/index.scss +++ b/framework/index.scss @@ -52,10 +52,17 @@ // 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'; @@ -63,6 +70,7 @@ // 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'; diff --git a/framework/layout/blocks/_blocks.scss b/framework/layout/blocks/_blocks.scss new file mode 100644 index 00000000000..6619bc8d04e --- /dev/null +++ b/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; + } +} diff --git a/framework/layout/blocks/package.json b/framework/layout/blocks/package.json new file mode 100644 index 00000000000..e68622a0993 --- /dev/null +++ b/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" +} diff --git a/framework/layout/listings/agenda/agenda.html b/framework/layout/listings/agenda/agenda.html new file mode 100644 index 00000000000..a038a5e8d17 --- /dev/null +++ b/framework/layout/listings/agenda/agenda.html @@ -0,0 +1,36 @@ +
+ +
diff --git a/framework/layout/listings/navigation/navigation.html b/framework/layout/listings/navigation/navigation.html new file mode 100644 index 00000000000..53178222ad5 --- /dev/null +++ b/framework/layout/listings/navigation/navigation.html @@ -0,0 +1,72 @@ +
+
+ + +
+
+ +

Title with additional text, links and grandchilds

+

+ This is the description. + EU strategy, its role in setting priorities, and its implementation through EU policy. +

+ +
+ Introduction to EU law +
+
+ Find EU legislation (EUR-Lex) +
+
+ EU case law (EUR-Lex) +
+
+ Summaries of EU legislation +
+
+
+ Related Item 1. +
+
+ Related Item 2. +
+
+ Related Item 3. +
+
+
+ + +
+
+ +

Title with additional text

+

Information on the annual budget life-cycle.

+ +
+
+ + +
+
+ +

Title with additional text, links and grandchilds

+ +
+ Introduction to EU law +
+
+ Find EU legislation (EUR-Lex) +
+
+ EU case law (EUR-Lex) +
+
+ Summaries of EU legislation +
+
+
+ +
+
+ diff --git a/framework/layout/listings/teaser/teaser.config.j b/framework/layout/listings/teaser/teaser.config.j new file mode 100644 index 00000000000..e69de29bb2d diff --git a/framework/molecules/site-user-menus/_site-user-menus.scss b/framework/molecules/site-user-menus/_site-user-menus.scss new file mode 100644 index 00000000000..a49f3e1291b --- /dev/null +++ b/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; + } +} diff --git a/framework/molecules/skip-links/_skip-links.scss b/framework/molecules/skip-links/_skip-links.scss new file mode 100644 index 00000000000..e446e1cc5db --- /dev/null +++ b/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; + } +} diff --git a/framework/organisms/feedback-forms/_feedback-forms.scss b/framework/organisms/feedback-forms/_feedback-forms.scss new file mode 100644 index 00000000000..2128ce6283b --- /dev/null +++ b/framework/organisms/feedback-forms/_feedback-forms.scss @@ -0,0 +1,163 @@ +.feedback-form { + margin: 0; +} + +.feedback-form__wrapper { + @extend .hidden-print; + + background-color: $white; + border-top: 1px solid $brand-primary; + + &:hover, + &:active, + &:focus, + &.is-open { + background-color: $grey-lightest; + } +} + +// Feedback form. +a.feedback-form__trigger { + display: inline-block; + margin-left: 1em; + padding: 0.5em 0; + font-size: $font-size-little; + color: $brand-primary; + text-decoration: none; + + &:focus { + outline-offset: 0; + } + + &:active { + outline: none; + } +} + +.feedback-form__content { + margin: 0.8em 0 2em; +} + +.feedback-form__text { + margin-bottom: 0.5em; + padding-left: 2.5em; + font-weight: bold; +} + +.feedback-form__btn { + width: 12em; + margin-left: 2.5em; + + .icon { + font-size: $font-size-xsmall; + } +} + +// Bootstrap accordion. +#feedback-form__accordion { + margin-bottom: 1em; + border: 1px solid $grey-dark; + + .panel { + padding: 10px; + line-height: 1; + border-top: 1px solid $grey-dark; + + &:first-child { + border-top: none; + } + + .panel-title { + display: block; + padding-left: 28px; + line-height: 23px; + background: url('../images/svg/checkbox-checked--blue.svg') no-repeat; + font-size: $font-size-little; + font-weight: bold; + color: $brand-primary; + text-decoration: none; + + &:focus { + background: url('../images/svg/checkbox-highlighted.svg') no-repeat; + outline: none; + } + + &.collapsed { + background: url('../images/svg/checkbox-unchecked--grey.svg') no-repeat; + font-weight: $font-weight-normal; + color: $grey-base; + + &:focus { + background: url('../images/svg/checkbox-highlighted.svg') no-repeat; + outline: none; + } + } + + // Removing ugly dotted line. + &::-moz-focus-inner, + &:focus { + border: 0; + outline: none; + } + } + + .panel-body { + padding: 0 1.563em; + + .form-group { + margin-top: 2.5em; + } + } + } + + .panel-heading { + float: left; + width: auto; + margin-bottom: 0; + padding-left: 1.563em; + font-size: inherit; + border: none; + } +} + +@include breakpoint(screen-sm-min) { + .feedback-form__text { + float: left; + width: 10.111em; + padding-top: 8px; + } + + .feedback-form__btn { + margin-left: 12.055em; + font-size: $font-size-medium; // @todo: until buttons have styling. + } + + #feedback-form__accordion { + overflow: hidden; + + .panel-heading { + padding-left: 0; + } + } +} + +@include breakpoint(screen-lg-min) { + a.feedback-form__trigger { + margin-left: 0; + } +} + +.no-svg { + // Bootstrap accordion. + #feedback-form__accordion { + .panel { + .panel-title { + background: url('../images/png/checkbox.png') no-repeat; + + &.collapsed { + background-position: 0 -21px; + } + } + } + } +} diff --git a/framework/organisms/feedback-forms/package.json b/framework/organisms/feedback-forms/package.json new file mode 100644 index 00000000000..fc42f710171 --- /dev/null +++ b/framework/organisms/feedback-forms/package.json @@ -0,0 +1,10 @@ +{ + "name": "@ec-europa/europa-component-library-feedback-forms", + "version": "1.0.0", + "description": "", + "main": "_feedback-forms.scss", + "style": "_feedback-forms.scss", + "author": "", + "private": true, + "license": "EUPL-1.1" +} diff --git a/framework/organisms/nav-tabs/_nav-tabs.scss b/framework/organisms/nav-tabs/_nav-tabs.scss index fb7137ecbf5..924bcfa9127 100644 --- a/framework/organisms/nav-tabs/_nav-tabs.scss +++ b/framework/organisms/nav-tabs/_nav-tabs.scss @@ -9,13 +9,13 @@ Styleguide navtabs */ ul.nav-tabs, .nav-tabs { + @extend .hidden-print; + max-width: inherit !important; padding: 0; margin-bottom: 2em !important; border-bottom: 2px solid $grey; - @extend .hidden-print; - & > li { margin-bottom: -2px; diff --git a/framework/organisms/site-menus/_site-menus.scss b/framework/organisms/site-menus/_site-menus.scss new file mode 100644 index 00000000000..741a5b48340 --- /dev/null +++ b/framework/organisms/site-menus/_site-menus.scss @@ -0,0 +1,147 @@ +.site-menu { + @extend .hidden-print; + + margin-bottom: 0; + + .listing__wrapper--two-columns .listing, + .listing__wrapper { + margin-bottom: 0; + } + + .listing__item { + font-size: $font-size-little; + border-color: #dcb812; + + &:first-child { + border-top: none; + } + + .listing__title { + padding: 0; + color: $black; + } + } + + .listing__item-link { + @include _focus_outline_border(3px, $grey-base, 8px); + } + + .smaller { + padding: 0.61em 0; + + a { + display: block; + float: left; + width: 100%; + margin-top: 2em; + color: $black; + text-decoration: underline; + + &:hover { + color: $black; + text-decoration: none; + } + + &:focus { + @include _focus_outline_border(3px, $grey-base, 2px, none); + } + } + } + + .col-sm-4 .listing { + margin-top: 2em; + } + + p { + font-size: $font-size-little; + color: $black; + } + + .field--field-site-menu-links { + .listing__item { + // Align the element in this column with the others. + margin-bottom: 1px; + + .listing__title { + @extend .listing__title--arrow; + + &::after { + margin-top: 3px; + margin-left: 0.5em; + font-size: 0.8em; + } + + &:hover { + color: $grey-base; + } + + &:focus { + outline: 3px solid $grey-base; + } + } + } + } +} + +.front { + .site-menu p { + font-size: $font-size-little; + } +} + +.site-menu__section { + padding-top: 1em; + padding-bottom: 1.5em; + border-bottom: 1px solid rgba(0, 0, 0, 0.2); + + &:last-child { + border: none; + } +} + +.site-menu__toggle { + @extend .hidden-print; + + .btn { + width: 100%; + border: 3px solid $brand-primary; + } +} + +.js .site-menu { + height: 0; + + &.collapse { + height: inherit; + } +} + +@include breakpoint(screen-sm-min) { + .site-menu { + .listing__wrapper--two-columns .listing { + width: 100%; + } + + .col-sm-4 .listing { + margin-top: 0; + } + } +} + +@include breakpoint(screen-md-min) { + .site-menu { + .listing__wrapper--two-columns .listing, + .listing__wrapper { + margin-bottom: auto; + } + + .listing__wrapper--two-columns .listing { + width: 50%; + } + } + + .site-menu__section { + padding-top: 2em; + padding-bottom: 3em; + } +} diff --git a/framework/organisms/site-menus/package.json b/framework/organisms/site-menus/package.json new file mode 100644 index 00000000000..ae0fd4e7eae --- /dev/null +++ b/framework/organisms/site-menus/package.json @@ -0,0 +1,10 @@ +{ + "name": "@ec-europa/europa-component-library-site-menus", + "version": "1.0.0", + "description": "", + "main": "_site-menus.scss", + "style": "_site-menus.scss", + "author": "", + "private": true, + "license": "EUPL-1.1" +}