From 3c4d911639f0d6d08233efaf8ce1bf57b2f0d5c6 Mon Sep 17 00:00:00 2001
From: Fredrik Jonsson <frjo@xdeb.org>
Date: Tue, 21 Jan 2020 21:19:22 +0100
Subject: [PATCH] Styling for new streamfields apply link and box.
---
.../src/javascript/public/page-box.js | 7 ++
.../src/sass/public/components/_page-box.scss | 65 +++++++++++++++++++
.../src/sass/public/components/_wrapper.scss | 8 +++
opentech/static_src/src/sass/public/main.scss | 1 +
4 files changed, 81 insertions(+)
create mode 100644 opentech/static_src/src/javascript/public/page-box.js
create mode 100644 opentech/static_src/src/sass/public/components/_page-box.scss
diff --git a/opentech/static_src/src/javascript/public/page-box.js b/opentech/static_src/src/javascript/public/page-box.js
new file mode 100644
index 000000000..188079985
--- /dev/null
+++ b/opentech/static_src/src/javascript/public/page-box.js
@@ -0,0 +1,7 @@
+(function ($) {
+
+ 'use strict';
+
+ $('.page-box').wrapAll('<div class="wrapper wrapper--breakout wrapper--inner-space-large wrapper--page-box" />').wrapAll('<div class="wrapper wrapper--small wrapper--flex page-boxes" />');
+
+})(jQuery);
diff --git a/opentech/static_src/src/sass/public/components/_page-box.scss b/opentech/static_src/src/sass/public/components/_page-box.scss
new file mode 100644
index 000000000..e1880dccf
--- /dev/null
+++ b/opentech/static_src/src/sass/public/components/_page-box.scss
@@ -0,0 +1,65 @@
+.page-boxes {
+ flex-flow: wrap;
+ justify-content: space-between;
+}
+
+.page-box {
+ padding: 1rem;
+ margin-bottom: 1rem;
+ background-color: $color--white;
+
+ @include media-query(tablet-portrait) {
+ padding: 2rem;
+ margin-bottom: 2rem;
+ width: 48%;
+ }
+
+ & > .wrapper {
+ position: relative;
+
+ &::before {
+ content: '';
+ position: absolute;
+ top: 0;
+ right: 0;
+ width: 40px;
+ height: 40px;
+ background-repeat: no-repeat;
+ }
+ }
+
+ .otf-icon-red {
+ &::before {
+ background-image: url('./../../images/learnings/otf-icon-red.svg');
+ }
+ }
+
+ .bullhorn-icon-red {
+ &::before {
+ background-image: url('./../../images/learnings/bullhorn-icon-red.svg');
+ }
+ }
+
+ .potion-icon-red {
+ &::before {
+ background-image: url('./../../images/learnings/potion-icon-red.svg');
+ }
+ }
+
+ .user-friends-icon-red {
+ &::before {
+ background-image: url('./../../images/learnings/user-friends-icon-red.svg');
+ }
+ }
+
+ b:first-of-type {
+ color: $color--pink;
+ }
+
+ h3,
+ h4,
+ h5 {
+ color: $color--dark-blue;
+ }
+
+}
diff --git a/opentech/static_src/src/sass/public/components/_wrapper.scss b/opentech/static_src/src/sass/public/components/_wrapper.scss
index 4ae716a77..1267dbaea 100644
--- a/opentech/static_src/src/sass/public/components/_wrapper.scss
+++ b/opentech/static_src/src/sass/public/components/_wrapper.scss
@@ -244,4 +244,12 @@
&--center {
text-align: center;
}
+
+ &--flex {
+ display: flex;
+ }
+
+ &--page-box {
+ background-color: $color--light-grey;
+ }
}
diff --git a/opentech/static_src/src/sass/public/main.scss b/opentech/static_src/src/sass/public/main.scss
index 6cb1a0245..474d97f99 100644
--- a/opentech/static_src/src/sass/public/main.scss
+++ b/opentech/static_src/src/sass/public/main.scss
@@ -28,6 +28,7 @@
@import 'components/media-box';
@import 'components/messages';
@import 'components/nav';
+@import 'components/page-box';
@import 'components/pagination';
@import 'components/responsive-object';
@import 'components/rich-text';
--
GitLab