Difference between revisions of "Widget:Compass"
From LINKS Community Center
| Line 3: | Line 3: | ||
<includeonly> | <includeonly> | ||
<style> | <style> | ||
| + | .plus.icon { | ||
| + | color: #000; | ||
| + | position: absolute; | ||
| + | margin-left: 3px; | ||
| + | margin-top: 10px; | ||
| + | } | ||
| + | |||
| + | .plus.icon:before { | ||
| + | content: ''; | ||
| + | position: absolute; | ||
| + | width: 15px; | ||
| + | height: 1px; | ||
| + | background-color: currentColor; | ||
| + | } | ||
| + | |||
| + | .plus.icon:after { | ||
| + | content: ''; | ||
| + | position: absolute; | ||
| + | width: 15px; | ||
| + | height: 1px; | ||
| + | background-color: currentColor; | ||
| + | -webkit-transform: rotate(90deg); | ||
| + | transform: rotate(90deg); | ||
| + | } | ||
| + | |||
#cmp-container { | #cmp-container { | ||
font-family: 'Open Sans'; | font-family: 'Open Sans'; | ||
| Line 28: | Line 53: | ||
} | } | ||
| − | #cmp-container h2::after { | + | /* #cmp-container h2::after { |
display: inline-block; | display: inline-block; | ||
content: "→"; | content: "→"; | ||
transform: rotate(90deg); | transform: rotate(90deg); | ||
margin-left: .5em; | margin-left: .5em; | ||
| − | } | + | } */ |
| − | #cmp-container h2.opened::after { | + | /* #cmp-container h2.opened::after { |
transform: rotate(-90deg); | transform: rotate(-90deg); | ||
| − | } | + | } */ |
#cmp-container h3 { | #cmp-container h3 { | ||
| Line 91: | Line 116: | ||
} | } | ||
| − | .choice small { font-size: 70%; } | + | .choice small { |
| + | font-size: 70%; | ||
| + | } | ||
| + | |||
| + | .choice.tech { | ||
| + | color: var(--links-blue); | ||
| + | border: 1px solid var(--links-blue); | ||
| + | } | ||
| + | |||
| + | .choice.guide { | ||
| + | color: var(--links-orange); | ||
| + | border: 1px solid var(--links-orange); | ||
| + | } | ||
| − | .choice.tech { color: var(--links-blue); | + | .choice.tech:hover { |
| − | + | background-color: var(--links-blue); | |
| + | color: #fff; | ||
| + | } | ||
| − | .choice. | + | .choice.guide:hover { |
| − | + | background-color: var(--links-orange); | |
| + | color: #fff; | ||
| + | } | ||
</style> | </style> | ||
| Line 104: | Line 145: | ||
<h2>Engaging Citizens</h2> | <h2>Engaging Citizens</h2> | ||
<div class="subtheme"> | <div class="subtheme"> | ||
| − | <h3>Collecting and Analysing Information from SMCS</h3> | + | <h3>Collecting and Analysing Information from SMCS <div class="plus icon"></div></h3> |
<div class="question" data-aspect="Social"> | <div class="question" data-aspect="Social"> | ||
Whom do you want to include in your collection and analysis of information, and from whom do you | Whom do you want to include in your collection and analysis of information, and from whom do you | ||
| Line 112: | Line 153: | ||
<div class="answer-wrapper"> | <div class="answer-wrapper"> | ||
<div class="choice tech">Technologies<br><small>Lorem ipsum dolor sit amet</small></div> | <div class="choice tech">Technologies<br><small>Lorem ipsum dolor sit amet</small></div> | ||
| − | <div class="choice guide">Guidelines<br><small>Consectetur adipiscing coconut wigwam</small></div> | + | <div class="choice guide">Guidelines<br><small>Consectetur adipiscing coconut wigwam</small> |
| + | </div> | ||
<div class="choice tech">Technologies<br><small>Lorem ipsum dolor sit amet</small></div> | <div class="choice tech">Technologies<br><small>Lorem ipsum dolor sit amet</small></div> | ||
| − | <div class="choice guide">Guidelines<br><small>Consectetur adipiscing coconut wigwam</small></div> | + | <div class="choice guide">Guidelines<br><small>Consectetur adipiscing coconut wigwam</small> |
| − | <div class="choice guide">Guidelines<br><small>Consectetur adipiscing coconut wigwam</small></div> | + | </div> |
| + | <div class="choice guide">Guidelines<br><small>Consectetur adipiscing coconut wigwam</small> | ||
| + | </div> | ||
</div> | </div> | ||
</div> | </div> | ||
| Line 125: | Line 169: | ||
<div class="answer-wrapper"> | <div class="answer-wrapper"> | ||
<div class="choice tech">Technologies<br><small>Lorem ipsum dolor sit amet</small></div> | <div class="choice tech">Technologies<br><small>Lorem ipsum dolor sit amet</small></div> | ||
| − | <div class="choice guide">Guidelines<br><small>Consectetur adipiscing coconut wigwam</small></div> | + | <div class="choice guide">Guidelines<br><small>Consectetur adipiscing coconut wigwam</small> |
| + | </div> | ||
</div> | </div> | ||
</div> | </div> | ||
Revision as of 11:20, 23 November 2022
Development version of the Compass.
Not ready for production!