Difference between revisions of "Widget:Compass"
From LINKS Community Center
| Line 123: | Line 123: | ||
.choice { | .choice { | ||
display: flex; | display: flex; | ||
| − | flex- | + | flex-flow: row nowrap; |
| + | justify-content: flex-start; | ||
| + | align-items: center; | ||
| + | } | ||
| + | |||
| + | .choice .button { | ||
| + | flex: 0 0; | ||
| + | transition: all 250ms; | ||
| + | display: flex; | ||
justify-content: center; | justify-content: center; | ||
align-items: center; | align-items: center; | ||
| + | } | ||
| + | |||
| + | .choice .desc { | ||
| + | font-size: 75%; | ||
padding: 1em; | padding: 1em; | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
} | } | ||
| − | .choice.tech { | + | .choice.tech .button { |
color: var(--links-blue); | color: var(--links-blue); | ||
border: 1px solid var(--links-blue); | border: 1px solid var(--links-blue); | ||
} | } | ||
| − | .choice.guide { | + | .choice.guide .button { |
color: var(--links-orange); | color: var(--links-orange); | ||
border: 1px solid var(--links-orange); | border: 1px solid var(--links-orange); | ||
} | } | ||
| − | .choice.tech:hover { | + | .choice.tech:hover .button { |
background-color: var(--links-blue); | background-color: var(--links-blue); | ||
color: #fff; | color: #fff; | ||
} | } | ||
| − | .choice.guide:hover { | + | .choice.guide:hover .button { |
background-color: var(--links-orange); | background-color: var(--links-orange); | ||
color: #fff; | color: #fff; | ||
| Line 182: | Line 189: | ||
<div class="answer"> | <div class="answer"> | ||
<div class="answer-wrapper"> | <div class="answer-wrapper"> | ||
| − | <div class="choice tech">Technologies< | + | <div class="choice tech"> |
| − | <div class="choice guide">Guidelines< | + | <div class="button">Technologies</div> |
| + | <div class="desc">Lorem ipsum dolor sit amet</div> | ||
| + | </div> | ||
| + | <div class="choice guide"> | ||
| + | <div class="button">Guidelines</div> | ||
| + | <div class="desc">Consectetur adipiscing coconut wigwam</div> | ||
</div> | </div> | ||
</div> | </div> | ||
Revision as of 17:21, 23 November 2022
Development version of the Compass.
Not ready for production!