@charset "UTF-8";
/*
* Setting a scoping class prevent conflicts with other app styles.
* By default base styles are applied to all HTML elements. But when you a scoping class is set,
* then base styles are only applied to descendants of the elements with the scoping class.
*
* If $scope is set to "", the base styles will cascade globally.
*
* $scope: "";
*
* Base style are applied to any elements:
*
*
* hello base style applied
* …
*
* If set to any other values, the base styles will cascade from the elements
* with that class name. (eg )
*
* $scope: "hello";
*
* You need to have an element with the scoping class set to apply Hello base styles:
*
*
* hello base styles not applied
*
* hello base styles applied
* …
*
*/
/*
* Add a prefix to any classes.
*
* $prefix: ""; // ==> .l-grid
* $prefix: "hl-"; // ==> .hl-l-grid
*/
/*
* Set the breakpoints for you app and to build responsive classes.
* If you don't need responsive classes, then remove all items.
*/
/**
* Default breakpoints map
* Can be overridden is settings/settings.breakpoints.scss if needed
*
*/
/* @TODO: not properly used with container and page-wrapper layouts */
/* Soon obsolete - will use pop mixins */
/**
* Provide a base mixin for pop elements: context menu, popover, tooltip, etc.
*/
/*
* Apply styles to descendants if a class is provided.
*
*/
/* Margins
*
*/
/* Paddings
*
*/
/** TYPOGRAPHY **/
.docs-page {
background-color: #f9f9fb;
}
.c-docs-section {
border-bottom: 1px solid #E6E6EC;
padding: 60px 20px;
}
@media all and (min-width: 768px) {
.c-docs-section {
padding: 90px 90px;
}
}
.c-docs-section:last-child {
border-bottom: 0;
}
.c-docs-section > *:first-child {
margin-top: 0;
}
.c-docs-section > *:last-child {
margin-bottom: 0;
}
.docs-h1 {
margin-top: 60px;
}
.docs-h2 {
color: #3B3B6C;
margin-top: 60px;
margin-bottom: 30px;
}
.docs-h3 {
font-size: 21px;
line-height: 35px;
font-weight: 500;
color: #0A0A47;
margin-top: 60px;
margin-bottom: 30px;
}
.docs-h4 {
font-size: 19px;
line-height: 30px;
margin-top: 15px;
margin-bottom: 15px;
}
/** LAYOUT **/
.c-docs-layout-fill {
width: 100%;
font-size: 15px;
line-height: 20px;
padding: 10px;
min-height: 40px;
display: flex;
justify-content: center;
align-items: center;
background-color: #C2C2D1;
color: #ffffff;
text-align: center;
border-radius: 5px;
}
.l-docs-colors-grid {
display: grid;
grid-gap: 20px;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
@media all and (min-width: 768px) {
.l-docs-colors-grid {
grid-gap: 30px;
}
}
.l-docs-colors-grid .l-docs-colors-grid__list {
grid-column: span 2;
}
/** COMPONENT: COLOR CHIPS **/
.c-docs-color-chip {
background: white;
font-size: 15px;
line-height: 20px;
box-shadow: 0 2.5px 12.5px -2.5px rgba(10, 10, 71, 0.1) , 0 5px 7.5px -7.5px rgba(10, 10, 71, 0.1);
border-radius: 5px;
overflow: hidden;
}
.c-docs-color-chip__chip {
height: 100px;
}
.c-docs-color-chip__definition {
display: grid;
grid-template-columns: 60% auto;
grid-gap: 10px 5px;
padding: 15px;
}
.c-docs-color-chip__name,
.c-docs-color-chip__id {
grid-column: 1/span 2;
}
/** COMPONENT: COLOR MINI CHIPS **/
.c-docs-color-chip-row__chip {
width: 35px;
height: 35px;
border-radius: 50%;
}
/** COMPONENT: BRICKS **/
.c-docs-bricks {
background-color: #ceeeff;
padding: 5px;
}
.c-docs-bricks > * {
font-weight: 500;
padding: 5px;
background-color: #ceeeff;
border: 1px solid #3AB9FF;
text-align: center;
}
.c-docs-bricks > .c-docs-bricks__cell-highlight {
background-color: #c9f6e3;
border: 1px solid #26DB8E;
}