Skip to content

MSF / msf-climate-hub

Go to a project
Toggle navigation
Toggle navigation pinning
7ced0421 by Jeff Balicki
Options

www 

Signed-off-by: Jeff <jeff@gotenzing.com>
1 parent de383dd6
Inline Side-by-side
Showing 7 changed files with 68 additions and 80 deletions
......@@ -17867,27 +17867,22 @@ p {
padding: 0.625rem 1.25rem;
background-color: #fff;
transition: 4s ease-in-out;
color: #000000;
}
@media only screen and (max-width: 48.875rem) {
.badge {
padding: 0.625rem 1.25rem;
}
}
.badge .badge-title {
color: #000000;
.badge span {
display: block;
margin-right: 20px;
font-size: 1rem;
line-height: 1.875rem;
font-weight: bold;
position: relative;
display: inline-block;
}
@media only screen and (max-width: 48.875rem) {
.badge .badge-title {
font-size: 0rem;
line-height: 0rem;
}
right: 0px;
}
.badge .badge-title:after {
.badge:after {
content: "";
display: inline-block;
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20" viewBox="0 0 20 20"><defs><clipPath id="clip-path"><rect id="Rectangle_249" data-name="Rectangle 249" width="4.525" height="13.303" fill="%23fff"/></clipPath></defs><g id="Group_1856" data-name="Group 1856" transform="translate(-1152 -683)"><circle id="Ellipse_2" data-name="Ellipse 2" cx="10" cy="10" r="10" transform="translate(1152 683)" fill="%234d4d4d"/><g id="Group_1855" data-name="Group 1855" transform="translate(1160.196 686.107)"><g id="Group_1854" data-name="Group 1854" transform="translate(0 0)" clip-path="url(%23clip-path)"><path id="Path_1493" data-name="Path 1493" d="M.308,5.032V4.579q.271-.109.615-.226t.706-.208q.362-.09.688-.154A3.073,3.073,0,0,1,2.9,3.928l.326.217-1.7,8.036H2.86v.471a3.262,3.262,0,0,1-.887.471,2.948,2.948,0,0,1-1,.181,1.009,1.009,0,0,1-.751-.235A.76.76,0,0,1,0,12.525a4.52,4.52,0,0,1,.054-.706q.054-.344.145-.76L1.466,5.213ZM1.774,1.014a.968.968,0,0,1,.29-.742A1.066,1.066,0,0,1,2.824,0a1.118,1.118,0,0,1,.8.271.968.968,0,0,1,.29.742.889.889,0,0,1-.29.706,1.168,1.168,0,0,1-.8.253,1.113,1.113,0,0,1-.76-.253.889.889,0,0,1-.29-.706" transform="translate(0 0)" fill="%23fff"/></g></g></g></svg>');
......@@ -17897,13 +17892,10 @@ p {
height: 1.25rem;
margin-left: 0.625rem;
top: 0.25rem;
position: relative;
}
@media only screen and (max-width: 48.875rem) {
.badge .badge-title:after {
margin-left: 0rem;
top: 0.125rem;
}
position: absolute;
right: 10px;
top: 15px;
margin-left: 10px;
}
.badge .badge_content {
width: 0px;
......@@ -17911,6 +17903,7 @@ p {
overflow: hidden;
transition: 1s ease-in-out;
max-width: 16.875rem;
transition: 0.8s ease-in-out;
}
.badge p {
width: 16.875rem;
......@@ -17934,27 +17927,9 @@ p {
padding: 0.625rem 1.25rem;
}
}
.badge:hover .badge-title {
display: block;
}
@media only screen and (max-width: 48.875rem) {
.badge:hover .badge-title {
font-size: 1rem;
line-height: 1.875rem;
}
}
.badge:hover .badge-title:after {
float: right;
}
@media only screen and (max-width: 48.875rem) {
.badge:hover .badge-title:after {
margin-left: 0.625rem;
top: 0.25rem;
}
}
.badge:hover .badge_content {
width: auto;
height: auto;
width: 300px;
height: 100px;
overflow: hidden;
}
......
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
......@@ -22,7 +22,7 @@ $badge = get_field('badge');
<div class="entry-content">
<?php if($badge){
$badge_content = get_field('badge_content');
echo "<div class='badge'><div class='badge-title'>".$badge_content['badge_label']."</div><div class='badge_content'><p>".$badge_content['badge_text']."</p></div></div>";
echo "<div class='badge'><span>".$badge_content['badge_label']."</span><div class='badge_content'><p>".$badge_content['badge_text']."</p></div></div>";
}?>
......
......@@ -236,43 +236,56 @@ blockquote{
padding: 0.625rem 1.25rem;
background-color: #fff;
transition: 4s ease-in-out;
color: #000000;
@media only screen and (max-width: 48.875rem) {
padding: 0.625rem 1.25rem;
}
.badge-title{
color: #000000;
span{
display: block;
margin-right: 20px;
font-size: 1rem;
line-height: 1.875rem;
font-weight: bold;
position: relative;
right: 0px;
}
&:after{
content: "";
display: inline-block;
@media only screen and (max-width: 48.875rem) {
font-size: 0rem;
line-height: 0rem;
}
&:after{
content: "";
display: inline-block;
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20" viewBox="0 0 20 20"><defs><clipPath id="clip-path"><rect id="Rectangle_249" data-name="Rectangle 249" width="4.525" height="13.303" fill="%23fff"/></clipPath></defs><g id="Group_1856" data-name="Group 1856" transform="translate(-1152 -683)"><circle id="Ellipse_2" data-name="Ellipse 2" cx="10" cy="10" r="10" transform="translate(1152 683)" fill="%234d4d4d"/><g id="Group_1855" data-name="Group 1855" transform="translate(1160.196 686.107)"><g id="Group_1854" data-name="Group 1854" transform="translate(0 0)" clip-path="url(%23clip-path)"><path id="Path_1493" data-name="Path 1493" d="M.308,5.032V4.579q.271-.109.615-.226t.706-.208q.362-.09.688-.154A3.073,3.073,0,0,1,2.9,3.928l.326.217-1.7,8.036H2.86v.471a3.262,3.262,0,0,1-.887.471,2.948,2.948,0,0,1-1,.181,1.009,1.009,0,0,1-.751-.235A.76.76,0,0,1,0,12.525a4.52,4.52,0,0,1,.054-.706q.054-.344.145-.76L1.466,5.213ZM1.774,1.014a.968.968,0,0,1,.29-.742A1.066,1.066,0,0,1,2.824,0a1.118,1.118,0,0,1,.8.271.968.968,0,0,1,.29.742.889.889,0,0,1-.29.706,1.168,1.168,0,0,1-.8.253,1.113,1.113,0,0,1-.76-.253.889.889,0,0,1-.29-.706" transform="translate(0 0)" fill="%23fff"/></g></g></g></svg>');
background-repeat: no-repeat;
background-size: contain;
width: 1.25rem;
height: 1.25rem;
margin-left: 0.625rem;
top: 0.25rem;
position: relative;
@media only screen and (max-width: 48.875rem) {
margin-left: 0rem;
top: 0.125rem;
}
}
}
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20" viewBox="0 0 20 20"><defs><clipPath id="clip-path"><rect id="Rectangle_249" data-name="Rectangle 249" width="4.525" height="13.303" fill="%23fff"/></clipPath></defs><g id="Group_1856" data-name="Group 1856" transform="translate(-1152 -683)"><circle id="Ellipse_2" data-name="Ellipse 2" cx="10" cy="10" r="10" transform="translate(1152 683)" fill="%234d4d4d"/><g id="Group_1855" data-name="Group 1855" transform="translate(1160.196 686.107)"><g id="Group_1854" data-name="Group 1854" transform="translate(0 0)" clip-path="url(%23clip-path)"><path id="Path_1493" data-name="Path 1493" d="M.308,5.032V4.579q.271-.109.615-.226t.706-.208q.362-.09.688-.154A3.073,3.073,0,0,1,2.9,3.928l.326.217-1.7,8.036H2.86v.471a3.262,3.262,0,0,1-.887.471,2.948,2.948,0,0,1-1,.181,1.009,1.009,0,0,1-.751-.235A.76.76,0,0,1,0,12.525a4.52,4.52,0,0,1,.054-.706q.054-.344.145-.76L1.466,5.213ZM1.774,1.014a.968.968,0,0,1,.29-.742A1.066,1.066,0,0,1,2.824,0a1.118,1.118,0,0,1,.8.271.968.968,0,0,1,.29.742.889.889,0,0,1-.29.706,1.168,1.168,0,0,1-.8.253,1.113,1.113,0,0,1-.76-.253.889.889,0,0,1-.29-.706" transform="translate(0 0)" fill="%23fff"/></g></g></g></svg>');
background-repeat: no-repeat;
background-size: contain;
width: 1.25rem;
height: 1.25rem;
margin-left: 0.625rem;
top: 0.25rem;
position: absolute;
right: 10px;
top: 15px;
margin-left: 10px;
}
// .badge-title{
// color: #000000;
// font-size: 1rem;
// line-height: 1.875rem;
// font-weight: bold;
// position: absolute;
// right: 0px;
// display: inline-block;
// //left:100%;
// @media only screen and (max-width: 48.875rem) {
// font-size: 0rem;
// line-height: 0rem;
// }
// }
.badge_content{
width: 0px;
height: 0px;
overflow: hidden;
transition: 1s ease-in-out;
max-width: 16.875rem;
transition: 0.8s ease-in-out;
}
p{
width: 16.875rem;
......@@ -295,23 +308,23 @@ blockquote{
@media only screen and (max-width: 48.875rem) {
padding: 0.625rem 1.25rem;
}
.badge-title{
display: block;
@media only screen and (max-width: 48.875rem) {
font-size:1rem;
line-height: 1.875rem;
}
&:after{
float: right;
@media only screen and (max-width: 48.875rem) {
margin-left: 0.625rem;
top: 0.25rem;
}
}
}
// .badge-title{
// display: block;
// @media only screen and (max-width: 48.875rem) {
// font-size:1rem;
// line-height: 1.875rem;
// }
// &:after{
// float: right;
// @media only screen and (max-width: 48.875rem) {
// margin-left: 0.625rem;
// top: 0.25rem;
// }
// }
// }
.badge_content{
width: auto;
height: auto;
width: 300px;
height: 100px;
overflow: hidden;
}
......
......@@ -2,6 +2,6 @@
Theme Name: MSF CA Child
Author: Tenzing Communications
Template: msf-ca
Version: 1.0.451
Version: 1.0.452
*/
......