Custom look and feel (#7)

* Custom look and feel

* Change omnipresent banner

* Hardcoded logo

* Add overrides spec

* Lint files

* Fix locales

* Simplify font styles

app/packs/src/decidim/decidim_application.js

@@ -3,3 +3,4 @@
 
 // Load images
 require.context("../../images", true)
+require.context("../../fonts", true)

app/packs/stylesheets/aneca.scss

@@ -0,0 +1,48 @@
+@font-face {
+  font-family: "OpenSans";
+  font-weight: 100 300;
+  src: url("fonts/OpenSans-Light.ttf") format("truetype");
+}
+
+@font-face {
+  font-family: "OpenSans";
+  font-style: italic;
+  font-weight: 100 300;
+  src: url("fonts/OpenSans-LightItalic.ttf") format("truetype");
+}
+
+@font-face {
+  font-family: "OpenSans";
+  font-weight: 400;
+  src: url("fonts/OpenSans-Regular.ttf") format("truetype");
+}
+
+@font-face {
+  font-family: "OpenSans";
+  font-style: italic;
+  font-weight: 400;
+  src: url("fonts/OpenSans-Italic.ttf") format("truetype");
+}
+
+@font-face {
+  font-family: "OpenSans";
+  font-weight: 500 900;
+  src: url("fonts/OpenSans-Medium.ttf") format("truetype");
+}
+
+@font-face {
+  font-family: "OpenSans";
+  font-style: italic;
+  font-weight: 500 900;
+  src: url("fonts/OpenSans-MediumItalic.ttf") format("truetype");
+}
+
+@import "aneca/variables";
+@import "aneca/footer";
+@import "aneca/navbar";
+@import "aneca/body";
+@import "aneca/buttons";
+@import "aneca/cards";
+@import "aneca/typography";
+@import "aneca/orgchart";
+@import "aneca/omnipresent_banner";

app/packs/stylesheets/aneca/_body.scss

@@ -0,0 +1,7 @@
+@import "./variables";
+
+body,
+.off-canvas-wrapper,
+.home-section:nth-of-type(2n + 1) {
+  background-color: $body-background;
+}

app/packs/stylesheets/aneca/_buttons.scss

@@ -0,0 +1,18 @@
+@import "./variables";
+
+.button.hollow {
+  color: $color-green !important;
+  border-color: $color-green;
+}
+
+.button.hollow:hover {
+  color: $color-white !important;
+}
+
+.button {
+  color: $color-white;
+}
+
+.button:hover {
+  color: $color-white;
+}

app/packs/stylesheets/aneca/_cards.scss

@@ -0,0 +1,10 @@
+@import "./variables";
+
+.card__link {
+  color: $color-green70;
+}
+
+.card__link:hover {
+  color: $color-green70;
+  text-decoration: underline;
+}

app/packs/stylesheets/aneca/_footer.scss

@@ -0,0 +1,90 @@
+@import "./variables";
+
+.footer {
+  background: $footer-bg;
+}
+
+.mini-footer,
+.main-footer,
+.eu-footer {
+  background: none;
+}
+
+.eu-footer {
+  .eu-disclaimer {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-wrap: wrap;
+
+    .flag {
+      height: auto;
+      max-height: 8rem;
+    }
+
+    &__img {
+      width: 15rem;
+
+      img {
+        height: auto;
+        max-width: 100vw;
+        width: 15rem;
+      }
+    }
+
+    p {
+      font-size: .5rem;
+      margin-bottom: 0;
+    }
+  }
+
+  .row {
+    display: flex;
+    justify-content: center;
+  }
+}
+
+.mini-footer {
+  .logos {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: end;
+    padding: 1rem;
+  }
+
+  .row {
+    display: flex;
+    align-items: center;
+  }
+}
+
+.main-footer,
+.mini-footer {
+  a {
+    color: $color-white;
+
+    &:hover {
+      color: darken($color-white, 40%);
+    }
+  }
+
+  span {
+    color: $color-white;
+  }
+}
+
+.main__footer__social {
+  text-align: center;
+
+  @include breakpoint(medium) {
+    text-align: right;
+  }
+
+  p {
+    text-align: center !important;
+    margin-left: 25px;
+    margin-bottom: 0;
+    color: $color-white;
+    padding-top: .5rem;
+  }
+}

app/packs/stylesheets/aneca/_navbar.scss

@@ -0,0 +1,92 @@
+@import "./variables";
+
+.title-bar {
+  background: $color-green;
+  color: $color-white;
+}
+
+.topbar__dropmenu > ul > li > a,
+.topbar__admin__link a {
+  color: $color-white;
+}
+
+.topbar__user__login a:hover {
+  color: $color-white;
+}
+
+@media print, screen and (min-width: 40em) {
+  .topbar__user__login a,
+  .topbar__user__login a:hover {
+    color: $color-white;
+  }
+}
+
+.topbar__admin__link a span {
+  padding-left: .3rem;
+}
+
+.topbar__dropmenu .is-dropdown-submenu li a {
+  color: $color-green70;
+}
+
+.topbar__admin__link a:hover {
+  color: $color-white;
+}
+
+.topbar__notifications .icon,
+.topbar__conversations .icon {
+  fill: $color-white;
+  opacity: .6;
+}
+
+.topbar__dropmenu > ul > li > a::after {
+  margin-top: -1px !important;
+  border-top-color: $color-white !important;
+}
+
+.dropdown.menu > li.is-active > a {
+  background: transparent;
+  color: $color-green70;
+}
+
+.logo-wrapper {
+  img {
+    max-height: 6rem;
+  }
+}
+
+.topbar__user {
+  display: inline-block;
+  padding-right: 2.5rem;
+  margin-left: 2rem;
+
+  @media (min-width: (1300 * .0625) + em) {
+    padding-right: 2.5rem;
+  }
+}
+
+.topbar__user__logged {
+  @media (min-width: (1300 * .0625) + em) {
+    padding-right: 2.5rem;
+  }
+}
+
+.main-nav__link a {
+  color: $color-white;
+}
+
+.main-nav__link--active a {
+  box-shadow: inset 0 4px 0 0 $color-green70;
+}
+
+.topbar__search input {
+  background: $color-gray;
+}
+
+.topbar__search:not(:focus-within) button {
+  background: $color-gray;
+}
+
+.navbar {
+  background: $color-gray;
+}

app/packs/stylesheets/aneca/_omnipresent_banner.scss

@@ -0,0 +1,5 @@
+@import "./variables";
+
+.omnipresent-banner {
+  background-color: $color-orange;
+}

app/packs/stylesheets/aneca/_orgchart.scss

@@ -0,0 +1,10 @@
+@import "./variables";
+
+.orgchart .as-text {
+  fill: $color-green70;
+}
+
+.card__link:hover {
+  color: $color-green70;
+  text-decoration: underline;
+}

app/packs/stylesheets/aneca/_typography.scss

@@ -0,0 +1,26 @@
+@import "./variables";
+
+a {
+  color: $color-green70;
+}
+
+a:hover {
+  color: $color-green70;
+}
+
+body,
+h1,
+.h1,
+h2,
+.h2,
+h3,
+.h3,
+h4,
+.h4,
+h5,
+.h5,
+h6,
+.h6 {
+  font-family: "OpenSans", "Arial", sans-serif;
+  font-weight: 300;
+}

app/packs/stylesheets/aneca/_variables.scss

@@ -0,0 +1,39 @@
+@function extract-rgb($color) {
+  @return red($color), green($color), blue($color);
+}
+
+$color-green: #007681;
+$color-green70: #6b9ba3;
+$color-gray: #888b8d;
+$color-black: #000;
+$color-orange: #e07e3c;
+$color-white: #fff;
+$success-color: #28a745;
+$warning-color: #d39e00;
+$alert-color: #dc3545;
+
+$primary-color: $color-green;
+$secondary-color: $color-gray;
+
+$primary-color-rgb: extract-rgb($primary-color);
+$secondary-color-rgb: extract-rgb($secondary-color);
+$success-color-rgb: extract-rgb($success-color);
+$warning-color-rgb: extract-rgb($warning-color);
+$alert-color-rgb: extract-rgb($alert-color);
+
+:root {
+  --primary: #{$primary-color};
+  --primary-rgb: #{$primary-color-rgb};
+  --secondary: #{$secondary-color};
+  --secondary-rgb: #{$secondary-color-rgb};
+  --success: #{$success-color};
+  --success-rgb: #{$success-color-rgb};
+  --warning: #{$warning-color};
+  --warning-rgb: #{$warning-color-rgb};
+  --alert: #{$warning-color};
+  --alert-rgb: #{$warning-color-rgb};
+}
+
+$body-background: $color-white;
+$body-font-color: $color-black;
+$footer-bg: $primary-color;

app/packs/stylesheets/decidim/_decidim-settings.scss

@@ -5,3 +5,5 @@
 // To override styles use decidim_application.scss
 //
 // By default this is empty.
+
+@import "../aneca/variables";

app/packs/stylesheets/decidim/decidim_application.scss

@@ -5,3 +5,5 @@
 // To override CSS variables or Foundation settings use _decidim-settings.scss
 //
 // By default this is empty.
+
+@import "stylesheets/aneca";

app/views/layouts/decidim/_logo.html.erb

@@ -0,0 +1,7 @@
+<% if organization %>
+  <%= link_to decidim.root_url(host: organization.host), "aria-label": t("front_page_link", scope: "decidim.accessibility") do %>
+    <%= image_pack_tag("media/images/aneca-logo-white.png", alt: t("logo", scope: "decidim.accessibility", organization: organization.name)) %>
+  <% end %>
+<% else %>
+  <%= image_pack_tag("media/images/aneca-logo-white.png", alt: t("logo", scope: "decidim.accessibility", organization: Decidim.application_name)) %>
+<% end %>