refactor(banner): less and variables files created

theme/themes/eea/extras/banner.less

@@ -0,0 +1,169 @@
+@type: 'extra';
+@element: 'banner';
+
+@import (multiple) '../../theme.config';
+
+/*-------------------
+      BANNER
+--------------------*/
+
+.eea-page-banner,
+.eea-page-banner-image,
+.eea-banner-gradient,
+div.ui.container.eea-page-banner-container {
+  min-height: 150px;
+}
+
+.eea-page-banner {
+  width: 100%;
+  background: @primaryColor;
+}
+
+.eea-page-banner-image {
+  top: 456px;
+  background-image: url(../assets/images/banner.png);
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+
+.eea-banner-gradient {
+  height: 100%;
+  margin-right: 0 !important;
+  margin-left: 0 !important;
+  background: linear-gradient(
+    0deg,
+    rgb(20, 33, 44, 90%) 24%,
+    rgba(0, 36, 78, 0) 80%
+  );
+  color: white;
+  opacity: 0.9;
+}
+
+.eea-page-banner-text {
+  padding: 50px 0 20px;
+}
+
+.eea-page-banner-title {
+  p.eea-page-banner-header {
+    max-width: 626px;
+    margin: 0 0 18px 0;
+    margin-top: 56px;
+    font-size: 20px;
+    font-weight: bold;
+    font-weight: 700;
+    line-height: 22px;
+  }
+
+  p.eea-page-banner-meta {
+    font-size: 7px;
+    font-weight: bold;
+    line-height: 8px;
+  }
+}
+
+.eea-page-banner-actions {
+  float: right;
+
+  div {
+    display: flex;
+    margin: 3px 0;
+  }
+
+  i.icon {
+    margin: 0 5px 5px 0;
+  }
+}
+
+.eea-page-banner-actions {
+  display: none;
+}
+
+.eea-page-banner-actions-mobile {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  margin-top: -15px;
+}
+
+.row eea-page-banner-text-row div {
+  padding: 0;
+}
+
+@media only screen and (min-width: @mobileBreakpoint) {
+  .eea-page-banner-text-row {
+    display: flex;
+    align-items: end;
+  }
+
+  .eea-page-banner-text {
+    padding: 150px 0 20px;
+  }
+
+  .eea-page-banner-title {
+    p.eea-page-banner-header {
+      max-width: 626px;
+      margin-top: 56px;
+      font-size: 36px;
+      font-weight: bold;
+      font-weight: 700;
+      line-height: 44px;
+    }
+
+    p.eea-page-banner-meta {
+      font-size: 14px;
+      line-height: 16px;
+    }
+  }
+
+  .eea-page-banner-actions {
+    display: block;
+  }
+
+  .eea-page-banner-actions-mobile {
+    display: none;
+  }
+
+  .eea-page-banner,
+  .eea-page-banner-image,
+  .eea-banner-gradient,
+  div.ui.container.eea-page-banner-container {
+    min-height: 350px;
+  }
+}
+
+@media only screen and (min-width: @tabletBreakpoint) {
+  .eea-page-banner-text {
+    padding: 200px 0 20px;
+  }
+
+  .eea-page-banner-title {
+    p.eea-page-banner-header {
+      max-width: 626px;
+      margin-top: 56px;
+      font-size: 48px;
+      font-weight: bold;
+      font-weight: 700;
+      line-height: 56px;
+    }
+
+    p.eea-page-banner-meta {
+      font-size: 14px;
+      line-height: 16px;
+    }
+  }
+
+  .eea-page-banner-actions {
+    display: block;
+  }
+
+  .eea-page-banner-actions-mobile {
+    display: none;
+  }
+
+  .eea-page-banner,
+  .eea-page-banner-image,
+  .eea-banner-gradient,
+  div.ui.container.eea-page-banner-container {
+    min-height: 450px;
+  }
+}