108 lines
2.4 KiB
Plaintext
108 lines
2.4 KiB
Plaintext
// ============================================================================
|
|
// Styles for coloured boxes around normal content
|
|
// These can be:
|
|
// * coloured border: <div class="color-box border [...]" data-color="...">
|
|
// * full-background colour: <div class="color-box background [...]" data-color="...">
|
|
// ============================================================================
|
|
|
|
div.color-box {
|
|
|
|
// VARIANT 1: A coloured border around the content
|
|
&.border {
|
|
padding: 1em;
|
|
border: 6px red solid;
|
|
margin: 1em 0;
|
|
|
|
& > h2,
|
|
& > div.grid-50-50 > div.box > h2,
|
|
& > section > h2
|
|
{
|
|
margin-top: 0;
|
|
}
|
|
|
|
// Pre-defined colours for border box
|
|
&[data-color=fsfe-darkblue] {
|
|
border-color: #202D79;
|
|
}
|
|
&[data-color=fsfe-blue] {
|
|
border-color: #3394CE;
|
|
}
|
|
&[data-color=fsfe-blue] {
|
|
border-color: #4AD2F0;
|
|
}
|
|
&[data-color=fsfe-lime] {
|
|
border-color: #D0F400;
|
|
}
|
|
&[data-color=burnt-sienna] {
|
|
border-color: #F0684A;
|
|
}
|
|
&[data-color=heliotrope] {
|
|
border-color: #BB4AF0;
|
|
}
|
|
&[data-color=screaming-green] {
|
|
border-color: #7FF04A;
|
|
}
|
|
}
|
|
|
|
// VARIANT 2: a box with a coloured background, with different sub-variants
|
|
&.background {
|
|
font-weight: 500;
|
|
text-align: center;
|
|
color: white;
|
|
padding: 15px;
|
|
|
|
// Move the headline closer to the box top, and thicker
|
|
h2, h3 {
|
|
margin-top: 0;
|
|
font-weight: 700;
|
|
}
|
|
|
|
// Define the text inside the box
|
|
p {
|
|
font-size: 120%;
|
|
// no margin-bottom to not distort inner paddings
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
// balance missing margin-bottom from p
|
|
a.btn {
|
|
margin-top: 10px;
|
|
}
|
|
|
|
// Background variant: a coloured box with round corners
|
|
&.rounded {
|
|
padding: 1em;
|
|
margin: 20px auto;
|
|
border-radius: 15px;
|
|
|
|
// center all the things
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
@media (min-width: @screen-sm-min) {
|
|
max-width: 70%;
|
|
}
|
|
}
|
|
|
|
// Specifics for fullwidth coloured box
|
|
&.fullwidth {
|
|
margin-top: 30px;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
// Pre-defined colours for background box
|
|
&[data-color=android-lime] {
|
|
background-color: #A4C639;
|
|
}
|
|
&[data-color=android-blue] {
|
|
background-color: #1c68a6;
|
|
}
|
|
&[data-color=dark-green] {
|
|
background-color: #6BB340;
|
|
}
|
|
}
|
|
}
|