65 lines
1.9 KiB
SCSS
65 lines
1.9 KiB
SCSS
|
@import "../../variables/mixins";
|
||
|
|
@import "../../variables/colors";
|
||
|
|
@import "../../variables/sizes";
|
||
|
|
@import "../../map/map-sprite";
|
||
|
|
|
||
|
|
$cNeutral: $cHighlight-main;
|
||
|
|
$cPositive: rgba(#5FCC79, 1);
|
||
|
|
$cNotice: rgba(#F2C000, 1);
|
||
|
|
$cSunrise: rgba(#F5A623, 1);
|
||
|
|
$cAlert: rgba(#EA703D, 1);
|
||
|
|
$cNegative: rgba(#CB3F29, 1);
|
||
|
|
$cCyan: rgba(#55C9AF, 1);
|
||
|
|
$cRoyal: rgba(#7882B9, 1);
|
||
|
|
$cRoyalDark: rgba(#9013FE, 1);
|
||
|
|
$cMagenta: rgba(#BD10E0, 1);
|
||
|
|
$cLingon: rgba(#AC638B, 1);
|
||
|
|
|
||
|
|
// Filled circles with an icon in the middle, typically used together with a CDB-IconFont.
|
||
|
|
//
|
||
|
|
// Example usage:
|
||
|
|
// <div class="IllustrationIcon IllustrationIcon--royal">
|
||
|
|
// <i class="CDB-IconFont CDB-IconFont-unlock"></i>
|
||
|
|
// </div>
|
||
|
|
//
|
||
|
|
.IllustrationIcon {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
width: 50px;
|
||
|
|
height: 50px;
|
||
|
|
border-radius: 30px; // Enough to make it round
|
||
|
|
color: white;
|
||
|
|
font-size: 20px;
|
||
|
|
}
|
||
|
|
.IllustrationIcon--neutral { background-color: $cNeutral; }
|
||
|
|
.IllustrationIcon--positive { background-color: $cPositive; }
|
||
|
|
.IllustrationIcon--notice { background-color: $cNotice; }
|
||
|
|
.IllustrationIcon--sunrise { background-color: $cSunrise; }
|
||
|
|
.IllustrationIcon--alert { background-color: $cAlert; }
|
||
|
|
.IllustrationIcon--negative { background-color: $cNegative; }
|
||
|
|
.IllustrationIcon--cyan { background-color: $cCyan; }
|
||
|
|
.IllustrationIcon--royal { background-color: $cRoyal; }
|
||
|
|
.IllustrationIcon--royalDark { background-color: $cRoyalDark; }
|
||
|
|
.IllustrationIcon--magenta { background-color: $cMagenta; }
|
||
|
|
.IllustrationIcon--lingon { background-color: $cLingon; }
|
||
|
|
|
||
|
|
.IllustrationIcon--geometryLine {
|
||
|
|
@include map-sprite(geometry_line);
|
||
|
|
}
|
||
|
|
|
||
|
|
.IllustrationIcon--geometryPoint {
|
||
|
|
@include map-sprite(geometry_point);
|
||
|
|
}
|
||
|
|
|
||
|
|
.IllustrationIcon--geometryPolygon {
|
||
|
|
@include map-sprite(geometry_polygon);
|
||
|
|
}
|
||
|
|
|
||
|
|
.IllustrationIcon-text {
|
||
|
|
font-size: $sFontSize-smallUpperCase;
|
||
|
|
font-weight: $sFontWeight-normal;
|
||
|
|
line-height: $sLineHeight-smaller;
|
||
|
|
text-transform: uppercase;
|
||
|
|
}
|