Carousel component: solved conflicts merging master
This commit is contained in:
commit
43efadb59c
Binary file not shown.
Binary file not shown.
Binary file not shown.
@ -16,7 +16,7 @@
|
||||
<img src="/src/img/avatar-40x40.png" alt="User Name" class="CDB-AvatarList-itemMedia" />
|
||||
</li>
|
||||
<li class="CDB-AvatarList-itemMore">
|
||||
<button class="CDB-Text is-semibold CDB-Size-small">+ 16</button>
|
||||
<button class="CDB-Text is-semibold CDB-Size-small u-secondaryTextColor">+ 16</button>
|
||||
</li>
|
||||
</ul>
|
||||
```
|
||||
@ -44,7 +44,6 @@
|
||||
border-left: 2px solid $cWhite;
|
||||
border-radius: 50px;
|
||||
background: $cSecondaryLine;
|
||||
color: $cTypo2;
|
||||
}
|
||||
|
||||
.CDB-AvatarList-itemMedia {
|
||||
|
@ -140,9 +140,9 @@
|
||||
.CDB-BoxLoader-item {
|
||||
@include display-flex();
|
||||
padding: $baseSize 0;
|
||||
color: $cTypo2;
|
||||
color: $cSecondaryText;
|
||||
&.is-working {
|
||||
color: $cTypo3;
|
||||
color: $cAltText;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -18,9 +18,9 @@
|
||||
@import '../cdb-variables/colors';
|
||||
|
||||
.box {
|
||||
display: inline-block;
|
||||
width: 120px;
|
||||
height: 64px;
|
||||
display: inline-block;
|
||||
margin: 0 24px 24px 0;
|
||||
}
|
||||
|
||||
@ -28,15 +28,15 @@
|
||||
background: $cBlue;
|
||||
}
|
||||
.Color-White {
|
||||
border: 1px solid #E5E5E5;
|
||||
background: $cWhite;
|
||||
border: 1px solid #e5e5e5;
|
||||
}
|
||||
.Color-Dark {
|
||||
background: $cBlack;
|
||||
}
|
||||
|
||||
.Color-MainDark {
|
||||
background: $cMainDark;
|
||||
background: $cMainBg;
|
||||
}
|
||||
.Color-SecondaryDark {
|
||||
background: $cSecondaryDark;
|
||||
@ -89,13 +89,13 @@
|
||||
|
||||
|
||||
.Color-Type02 {
|
||||
background: $cTypo2;
|
||||
background: $cSecondaryText;
|
||||
}
|
||||
.Color-Type03 {
|
||||
background: $cTypo3;
|
||||
background: $cAltText;
|
||||
}
|
||||
.Color-Type04 {
|
||||
background: $cTypo4;
|
||||
background: $cHintText;
|
||||
}
|
||||
|
||||
|
||||
|
@ -33,7 +33,7 @@
|
||||
height: $baseSize * 2;
|
||||
margin: 0 2px;
|
||||
border-radius: 50px;
|
||||
background: $cTypo4;
|
||||
background: $cHintText;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
@ -49,7 +49,7 @@
|
||||
}
|
||||
|
||||
&:checked + .CDB-ToggleFace {
|
||||
background: $cMainDark;
|
||||
background: $cMainBg;
|
||||
|
||||
&::before {
|
||||
right: 2px;
|
||||
|
@ -43,7 +43,7 @@
|
||||
</ul>
|
||||
</li>
|
||||
<li class="CDB-HeaderInfo-ListItem">
|
||||
<p class="CDB-HeaderInfo-Text CDB-Text CDB-Size-medium u-iBlock">Published 8 days ago</p>
|
||||
<p class="CDB-HeaderInfo-Text CDB-Text CDB-Size-medium u-iBlock u-altTextColor">Published 8 days ago</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
@ -111,7 +111,7 @@
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<p class="CDB-HeaderInfo-Text CDB-Text CDB-Size-medium">Positron by CartoDB</p>
|
||||
<p class="CDB-HeaderInfo-Text CDB-Text CDB-Size-medium u-altTextColor">Positron by CartoDB</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -144,7 +144,7 @@
|
||||
|
||||
<div class="CDB-HeaderInfo-Inner CDB-Text">
|
||||
<div class="CDB-HeaderInfo-Title u-bSpace--m">
|
||||
<h2 class="CDB-HeaderInfo-TitleText CDB-Size-large u-color-cMainDark">Type</h2>
|
||||
<h2 class="CDB-Text CDB-HeaderInfo-TitleText CDB-Size-large">Type</h2>
|
||||
|
||||
<div class="CDB-HeaderInfo-Actions">
|
||||
<a href="#">
|
||||
@ -155,8 +155,8 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="CDB-HeaderInfo-Text is-uppercase CDB-FontSize-small u-bSpace--m">Histogram</p>
|
||||
<p class="CDB-HeaderInfo-Text CDB-Size-medium">Distribution of a numeric variable in a range</p>
|
||||
<p class="CDB-Text is-upper CDB-FontSize-small u-altTextColor u-bSpace--m">Histogram</p>
|
||||
<p class="CDB-Text CDB-Size-medium u-altTextColor">Distribution of a numeric variable in a range</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -186,13 +186,7 @@
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
.CDB-HeaderInfo-Text {
|
||||
color: $cTypo3;
|
||||
|
||||
&.is-uppercase {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
|
||||
.CDB-HeaderInfo-Inner {
|
||||
@include flex(1);
|
||||
}
|
||||
@ -222,7 +216,7 @@
|
||||
border: 1px solid $cMainLine;
|
||||
border-radius: 4px;
|
||||
background-color: $cWhite;
|
||||
color: $cTypo3;
|
||||
color: $cAltText;
|
||||
font-size: $sFontSize-small;
|
||||
line-height: 23px;
|
||||
text-align: center;
|
||||
|
@ -67,7 +67,7 @@ This is the generic loader for widgets, maps, components, ...
|
||||
border: 2px solid $cMainLine;
|
||||
border-radius: 50%;
|
||||
&.is-grey {
|
||||
border: 2px solid $cTypo2;
|
||||
border: 2px solid $cSecondaryText;
|
||||
}
|
||||
}
|
||||
|
||||
@ -105,12 +105,12 @@ This is the generic loader for widgets, maps, components, ...
|
||||
background: $cWhite;
|
||||
}
|
||||
&.is-grey {
|
||||
background: linear-gradient(to right, $cMainDark 10%, rgba($cWhite, 0) 42%);
|
||||
background: linear-gradient(to right, $cMainBg 10%, rgba($cWhite, 0) 42%);
|
||||
&::before {
|
||||
background: $cTypo2;
|
||||
background: $cSecondaryText;
|
||||
}
|
||||
&::after {
|
||||
background: $cMainDark;
|
||||
background: $cMainBg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -18,10 +18,10 @@
|
||||
<a class="CDB-NavMenu-Link" href="#">POP-UP</a>
|
||||
<ul class="CDB-NavSubmenu CDB-Size-small">
|
||||
<li class="CDB-NavSubmenu-Item is-active">
|
||||
<a href="#" class="CDB-NavSubmenu-Link">CLICK <span class="CDB-NavSubmenu-Status">NONE</span></a>
|
||||
<a href="#" class="CDB-NavSubmenu-Link">CLICK <span class="CDB-NavSubmenu-Status u-hintTextColor">NONE</span></a>
|
||||
</li>
|
||||
<li class="CDB-NavSubmenu-Item">
|
||||
<a href="#" class="CDB-NavSubmenu-Link">HOVER <span class="CDB-NavSubmenu-Status">NONE</span></a>
|
||||
<a href="#" class="CDB-NavSubmenu-Link">HOVER <span class="CDB-NavSubmenu-Status u-hintTextColor">NONE</span></a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
@ -97,8 +97,8 @@
|
||||
}
|
||||
|
||||
.CDB-NavMenu-Item.is-active .CDB-NavMenu-Link {
|
||||
border-bottom: 1px solid $cMainDark;
|
||||
color: $cMainDark;
|
||||
border-bottom: 1px solid $cMainLine;
|
||||
color: $cMainText;
|
||||
}
|
||||
|
||||
.CDB-NavSubmenu {
|
||||
@ -118,26 +118,25 @@
|
||||
|
||||
.CDB-NavSubmenu-item.is-active {
|
||||
.CDB-NavSubmenu-Link {
|
||||
border-bottom: 1px solid $cTypo3;
|
||||
color: $cMainDark;
|
||||
border-bottom: 1px solid $cMainLine;
|
||||
color: $cMainText;
|
||||
}
|
||||
}
|
||||
|
||||
.CDB-NavSubmenu-Status {
|
||||
margin-left: 2px;
|
||||
color: $cTypo4;
|
||||
}
|
||||
|
||||
.CDB-Navmenu.is-dark {
|
||||
|
||||
.CDB-NavMenu-Inner,
|
||||
.CDB-NavSubmenu {
|
||||
border-bottom: 1px solid $cTypo2;
|
||||
border-bottom: 1px solid $cSecondaryText;
|
||||
}
|
||||
|
||||
.CDB-NavMenu-Link,
|
||||
.CDB-NavSubmenu-Link {
|
||||
color: $cTypo3;
|
||||
color: $cAltText;
|
||||
}
|
||||
|
||||
.CDB-NavMenu-Item.is-active {
|
||||
@ -155,7 +154,7 @@
|
||||
}
|
||||
|
||||
.CDB-NavSubmenu-Status {
|
||||
color: $cTypo2;
|
||||
color: $cSecondaryText;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -65,7 +65,7 @@ Description
|
||||
bottom: 7px;
|
||||
left: 0;
|
||||
height: 1px;
|
||||
background: $cMainDark;
|
||||
background: $cMainBg;
|
||||
content: '';
|
||||
}
|
||||
|
||||
@ -76,7 +76,7 @@ Description
|
||||
bottom: 0;
|
||||
left: 7px;
|
||||
width: 1px;
|
||||
background: $cMainDark;
|
||||
background: $cMainBg;
|
||||
content: '';
|
||||
}
|
||||
}
|
||||
@ -90,7 +90,7 @@ Description
|
||||
bottom: 7px;
|
||||
left: 4px;
|
||||
height: 1px;
|
||||
background: $cMainDark;
|
||||
background: $cMainBg;
|
||||
content: '';
|
||||
}
|
||||
|
||||
@ -101,7 +101,7 @@ Description
|
||||
bottom: 3px;
|
||||
left: 8px;
|
||||
width: 1px;
|
||||
background: $cMainDark;
|
||||
background: $cMainBg;
|
||||
content: '';
|
||||
}
|
||||
}
|
||||
|
@ -22,7 +22,7 @@ Description
|
||||
position: relative;
|
||||
width: 1px;
|
||||
height: 8px;
|
||||
background: $cMainDark;
|
||||
background: $cMainBg;
|
||||
|
||||
&::before {
|
||||
display: block;
|
||||
@ -32,7 +32,7 @@ Description
|
||||
width: 5px;
|
||||
height: 1px;
|
||||
transform: rotate(45deg);
|
||||
background: $cMainDark;
|
||||
background: $cMainBg;
|
||||
content: '';
|
||||
}
|
||||
|
||||
@ -44,7 +44,7 @@ Description
|
||||
width: 5px;
|
||||
height: 1px;
|
||||
transform: rotate(-45deg);
|
||||
background: $cMainDark;
|
||||
background: $cMainBg;
|
||||
content: '';
|
||||
}
|
||||
&.is-up {
|
||||
|
@ -60,7 +60,7 @@ Description
|
||||
.CDB-Shape-CircleItem {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border: 1px solid $cMainDark;
|
||||
border: 1px solid $cMainBg;
|
||||
border-radius: 50%;
|
||||
|
||||
&.is-small {
|
||||
@ -86,7 +86,7 @@ Description
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
transform: rotate(-45deg);
|
||||
background: $cMainDark;
|
||||
background: $cMainBg;
|
||||
content: '';
|
||||
}
|
||||
&::after {
|
||||
@ -94,7 +94,7 @@ Description
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
transform: rotate(45deg);
|
||||
background: $cMainDark;
|
||||
background: $cMainBg;
|
||||
content: '';
|
||||
}
|
||||
|
||||
|
@ -55,7 +55,7 @@ Description
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
transform: rotate(-45deg);
|
||||
background: $cMainDark;
|
||||
background: $cMainBg;
|
||||
content: '';
|
||||
}
|
||||
&::after {
|
||||
@ -63,7 +63,7 @@ Description
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
transform: rotate(45deg);
|
||||
background: $cMainDark;
|
||||
background: $cMainBg;
|
||||
content: '';
|
||||
}
|
||||
|
||||
|
@ -56,7 +56,7 @@ Description
|
||||
bottom: 7px;
|
||||
left: 2px;
|
||||
height: 1px;
|
||||
background: $cMainDark;
|
||||
background: $cMainBg;
|
||||
content: '';
|
||||
}
|
||||
}
|
||||
|
@ -95,7 +95,7 @@ Description
|
||||
width: 9px;
|
||||
height: 9px;
|
||||
margin-left: -10px;
|
||||
border: 1px solid $cMainDark;
|
||||
border: 1px solid $cMainBg;
|
||||
border-radius: 50%;
|
||||
background: $cWhite;
|
||||
|
||||
@ -132,15 +132,15 @@ Description
|
||||
.CDB-Shape-Dataset.is-white {
|
||||
.CDB-Shape-DatasetItem {
|
||||
border: 1px solid $cHoverLine;
|
||||
background: $cMainDark;
|
||||
background: $cMainBg;
|
||||
&:first-child {
|
||||
box-shadow: 3px 0 $cMainDark;
|
||||
box-shadow: 3px 0 $cMainBg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.CDB-Shape-Dataset.is-white.is-small {
|
||||
.CDB-Shape-DatasetItem:first-child {
|
||||
box-shadow: 2px 0 $cMainDark;
|
||||
box-shadow: 2px 0 $cMainBg;
|
||||
}
|
||||
}
|
||||
|
@ -23,6 +23,6 @@ You may resize and change the colors of the icons with the `glyph-`-classes. Ava
|
||||
background: $cSecondaryLine;
|
||||
|
||||
&.is-selected {
|
||||
background: $cTypo2;
|
||||
background: $cSecondaryText;
|
||||
}
|
||||
}
|
||||
|
@ -60,7 +60,7 @@ Description
|
||||
.CDB-Shape-CircleItem {
|
||||
width: 13px;
|
||||
height: 13px;
|
||||
border: 1px solid $cMainDark;
|
||||
border: 1px solid $cMainBg;
|
||||
border-radius: 50%;
|
||||
|
||||
&.is-small {
|
||||
|
@ -43,7 +43,7 @@ Description
|
||||
.CDB-Shape-hamburguerItem {
|
||||
height: $baseSize / 4;
|
||||
margin-bottom: $baseSize / 4;
|
||||
background: $cMainDark;
|
||||
background: $cMainBg;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
|
@ -58,7 +58,7 @@ Description
|
||||
left: 0;
|
||||
width: 11px;
|
||||
height: 11px;
|
||||
border: 1px solid $cMainDark;
|
||||
border: 1px solid $cMainBg;
|
||||
border-radius: 50%;
|
||||
content: '';
|
||||
}
|
||||
@ -71,7 +71,7 @@ Description
|
||||
width: 1px;
|
||||
height: 7px;
|
||||
transform: rotate(314deg);
|
||||
background: $cMainDark;
|
||||
background: $cMainBg;
|
||||
content: '';
|
||||
}
|
||||
}
|
||||
|
@ -101,7 +101,7 @@ Description
|
||||
display: inline-block;
|
||||
width: 3px;
|
||||
height: 3px;
|
||||
background: $cMainDark;
|
||||
background: $cMainBg;
|
||||
content: '';
|
||||
}
|
||||
|
||||
@ -110,7 +110,7 @@ Description
|
||||
width: 3px;
|
||||
height: 3px;
|
||||
margin-left: 2px;
|
||||
background: $cMainDark;
|
||||
background: $cMainBg;
|
||||
content: '';
|
||||
}
|
||||
}
|
||||
|
@ -77,7 +77,7 @@ Description
|
||||
width: 2px;
|
||||
height: 2px;
|
||||
margin-bottom: 5px;
|
||||
background: $cMainDark;
|
||||
background: $cMainBg;
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
@ -97,7 +97,7 @@ Description
|
||||
width: 10px;
|
||||
height: 1px;
|
||||
transform: rotate(-45deg);
|
||||
background: $cMainDark;
|
||||
background: $cMainBg;
|
||||
content: '';
|
||||
}
|
||||
&::after {
|
||||
@ -108,7 +108,7 @@ Description
|
||||
width: 10px;
|
||||
height: 1px;
|
||||
transform: rotate(45deg);
|
||||
background: $cMainDark;
|
||||
background: $cMainBg;
|
||||
content: '';
|
||||
}
|
||||
}
|
||||
|
@ -10,7 +10,9 @@
|
||||
<p class="CDB-Text CDB-Size-large">Open Sans 16/22 Regular</p>
|
||||
<p class="CDB-Text is-semibold CDB-Size-medium">Open Sans 12/16 Semibold</p>
|
||||
<p class="CDB-Text is-semibold is-upper CDB-Size-medium">Open Sans 12/16 Semibold Uppercase</p>
|
||||
<p class="CDB-Text CDB-Size-medium">Open Sans 12/16 Regular</p>
|
||||
<p class="CDB-Text CDB-Size-medium u-secondaryTextColor">Open Sans 12/16 Regular</p>
|
||||
<p class="CDB-Text CDB-Size-medium u-altTextColor">Open Sans 12/16 Regular</p>
|
||||
<p class="CDB-Text CDB-Size-medium u-hintTextColor">Open Sans 12/16 Regular</p>
|
||||
<p class="CDB-Text is-semibold CDB-Size-small">Open Sans 10/14 Semibold</p>
|
||||
<p class="CDB-Text CDB-Size-small">Open Sans 10/14 Regular</p>
|
||||
```
|
||||
|
@ -3,6 +3,10 @@
|
||||
|
||||
@import '../cdb-variables/colors';
|
||||
|
||||
body {
|
||||
color: $cMainText;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $cBlue;
|
||||
text-decoration: none;
|
||||
|
@ -2,6 +2,7 @@
|
||||
// ----------------------------------------------
|
||||
|
||||
@import './mixins';
|
||||
@import '../cdb-variables/colors';
|
||||
|
||||
/* Margins */
|
||||
.u-tSpace {
|
||||
@ -41,6 +42,23 @@
|
||||
margin-left: 12px;
|
||||
}
|
||||
|
||||
// Colors
|
||||
// Main Text Color is default color
|
||||
// ----------------------------------------------
|
||||
|
||||
.u-mainTextColor {
|
||||
color: $cMainText;
|
||||
}
|
||||
.u-secondaryTextColor {
|
||||
color: $cSecondaryText;
|
||||
}
|
||||
.u-altTextColor {
|
||||
color: $cAltText;
|
||||
}
|
||||
.u-hintTextColor {
|
||||
color: $cHintText;
|
||||
}
|
||||
|
||||
/* Displays */
|
||||
.u-iBlock {
|
||||
@include inline-block();
|
||||
|
@ -5,7 +5,7 @@
|
||||
$cBlue: #3AA9E3;
|
||||
$cBlack: #000;
|
||||
$cWhite: #FFF;
|
||||
$cMainDark: #2E3C43;
|
||||
$cMainBg: #2E3C43;
|
||||
|
||||
//Structure
|
||||
$cSecondaryDark: #282C2F;
|
||||
@ -18,9 +18,10 @@ $cMainLine: #DDD;
|
||||
$cSecondaryLine: #EEE;
|
||||
|
||||
//Typography
|
||||
$cTypo2: #636D72;
|
||||
$cTypo3: #979EA1;
|
||||
$cTypo4: #CBCED0;
|
||||
$cMainText: #2E3C43;
|
||||
$cSecondaryText: #636D72;
|
||||
$cAltText: #979EA1;
|
||||
$cHintText: #CBCED0;
|
||||
|
||||
//Others
|
||||
$cHighlight: #9DE0AD;
|
||||
|
Loading…
Reference in New Issue
Block a user