diff --git a/components/01-atoms/buttons/_buttons.scss b/components/01-atoms/buttons/_buttons.scss
index 14dc049..ce3d943 100644
--- a/components/01-atoms/buttons/_buttons.scss
+++ b/components/01-atoms/buttons/_buttons.scss
@@ -30,6 +30,35 @@ $button-colors: (
// Mixin to define colors for one or more schemes.
// Simply pass the color scheme to the mixin to get the colors defined in the map.
// e.g. @include buttonColors(default) will get all of the colors defined in the "default" section.
+@mixin flag_fav_base {
+ content: '';
+ display: inline-block;
+ height: 20px;
+ width: 22px;
+ margin-bottom: -5px;
+ background-color: $green;
+ -webkit-mask-size: cover;
+ mask-size: cover;
+}
+
+@mixin flag_favorite {
+ &:before {
+ @include flag_fav_base;
+ --webkit-mask: url('../images/icons/oda_fav_outline.svg') 50% 50% no-repeat;
+ mask: url('../images/icons/oda_fav_outline.svg') 50% 50% no-repeat;
+ margin-right: .5em;
+ }
+}
+
+@mixin flag_unfavorite {
+ &:before {
+ @include flag_fav_base;
+ --webkit-mask: url('../images/icons/oda_unfav.svg') 50% 50% no-repeat;
+ mask: url('../images/icons/oda_unfav.svg') 50% 50% no-repeat;
+ margin-right: .5em;
+ }
+}
+
@mixin buttonColors(
$scheme,
$pallate: map-get($button-colors, $scheme),
diff --git a/components/01-atoms/links/link/_link.scss b/components/01-atoms/links/link/_link.scss
index 595f0d9..df3e2e8 100644
--- a/components/01-atoms/links/link/_link.scss
+++ b/components/01-atoms/links/link/_link.scss
@@ -132,6 +132,11 @@ h1, h2, h3, h4, h5, h6 {
}
}
+.oda-left-ext {
+ padding-left: 1.8em;
+ background: url(../images/icons/oda_external.svg) top left no-repeat;
+}
+
.oda-right-ext {
padding-right: 1.8em;
background: url(../images/icons/oda_external.svg) top right no-repeat;
diff --git a/components/01-atoms/text/text/_text.scss b/components/01-atoms/text/text/_text.scss
index 4443888..c9dac97 100644
--- a/components/01-atoms/text/text/_text.scss
+++ b/components/01-atoms/text/text/_text.scss
@@ -27,20 +27,31 @@
font-family: 'Roboto Condensed', sans-serif;
}
+@mixin filter-icon-base {
+ content: '';
+ display: inline-block;
+ height: 20px;
+ width: 20px;
+ background-image: url('../images/icons/oda_filter_by.svg');
+ background-repeat: no-repeat;
+ background-size: contain;
+ margin-bottom: -5px;
+}
+
@mixin filter-icon {
&:after {
- content: '';
- display: inline-block;
- height: 20px;
- width: 20px;
- background-image: url('../images/icons/oda_filter_by.svg');
- background-repeat: no-repeat;
- background-size: contain;
- margin-bottom: -5px;
+ @include filter-icon-base;
margin-left: .5em;
}
}
+@mixin filter-icon-left {
+ &:before {
+ @include filter-icon-base;
+ margin-right: .5em;
+ }
+}
+
body {
color: $gray-dark;
@@ -63,6 +74,10 @@ body {
@include filter-icon;
}
+.filter-icon-left {
+ @include filter-icon-left;
+}
+
.blockquote {
font-style: italic;
border-left: solid 3px clr(accent);
diff --git a/components/04-templates/_default.scss b/components/04-templates/_default.scss
index efeafe8..052a2d1 100644
--- a/components/04-templates/_default.scss
+++ b/components/04-templates/_default.scss
@@ -432,7 +432,8 @@ $main-width: calc(100% - (#{$sidebar-width} + #{$gutter}));
.domain-oda.path-frontpage {
.main,
- .dingo-layout {
+ .dingo-layout,
+ .layout--onecol {
display: block;
}
@@ -529,23 +530,60 @@ $main-width: calc(100% - (#{$sidebar-width} + #{$gutter}));
}
}
+.page-node-type-oda-page {
+ .layout__region--content > div:has(picture) {
+ margin-left: 0;
+ margin-bottom: 1.5rem;
+ @include large {
+ margin-left: -100px;
+ }
+ }
+}
+
.page-node-type-data-report {
.flag a.button-internal {
border: 1px solid $green;
}
+ .action-flag a {
+ @include flag_favorite;
+ &:hover::before {
+ background-color: $white;
+ }
+ }
+
+ .action-unflag a {
+ @include flag_unfavorite;
+ &:hover::before {
+ background-color: $white;
+ }
+ }
+
.layout__region--content > div:has(img) {
border: 1px solid $gray-lightest;
margin-bottom: 2rem;
}
.layout__region--right-sidebar {
+
+ & > div:first-child,
+ & > div:nth-child(2) .views-row > div {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ }
+
.views-element-container {
- .views-row:has(a.oda-right-ext) {
- border-bottom: 1px solid $gray-lightest;
- border-top: 1px solid $gray-lightest;
- padding: 1rem 0;
- margin: 1rem 0;
+ .views-row {
+ svg {
+ display: none;
+ }
+ &:has(a.oda-right-ext) {
+ border-bottom: 1px solid $gray-lightest;
+ border-top: 1px solid $gray-lightest;
+ padding: 1rem 0;
+ margin: 1rem 0;
+ }
}
}
diff --git a/components/04-templates/_oda_reports.scss b/components/04-templates/_oda_reports.scss
index d822d8e..85567ae 100644
--- a/components/04-templates/_oda_reports.scss
+++ b/components/04-templates/_oda_reports.scss
@@ -85,6 +85,9 @@
.image {
border: 1px solid $gray-light;
margin-right: 1rem;
+ div {
+ width: 120px;
+ }
}
}
}
diff --git a/images/icons/oda_fav_outline.svg b/images/icons/oda_fav_outline.svg
new file mode 100644
index 0000000..e5e8923
--- /dev/null
+++ b/images/icons/oda_fav_outline.svg
@@ -0,0 +1,3 @@
+
diff --git a/images/icons/oda_unfav.svg b/images/icons/oda_unfav.svg
new file mode 100644
index 0000000..5b3da7e
--- /dev/null
+++ b/images/icons/oda_unfav.svg
@@ -0,0 +1,3 @@
+