Merge branch 'master' into 46-input_dropdown

This commit is contained in:
María Checa 2016-02-16 14:58:23 +01:00
commit 419050431e
29 changed files with 301 additions and 105 deletions

18
.travis.yml Normal file
View File

@ -0,0 +1,18 @@
cache: false
language: node_js
node_js:
- "4.1"
install:
- npm install
before_script:
- npm install -g grunt-cli
script:
- grunt build
notifications:
email:
on_success: never
on_failure: change

Binary file not shown.

Binary file not shown.

Binary file not shown.

View File

@ -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 {

View File

@ -140,9 +140,9 @@
.CDB-BoxLoader-item {
@include display-flex();
padding: $baseSize 0;
color: $cTypo2;
color: $cSecondaryText;
&.is-working {
color: $cTypo3;
color: $cAltText;
}
}

View File

@ -0,0 +1,51 @@
// Carousel styles
// ----------------------------------------------
/* SG
# Carousel
```
<div>
<ul class="CDB-Carousel">
<li class="CDB-CarouselItem is-selected"></li>
<li class="CDB-CarouselItem"></li>
<li class="CDB-CarouselItem"></li>
<li class="CDB-CarouselItem"></li>
<li class="CDB-CarouselItem"></li>
</ul>
</div>
```
*/
@import '../cdb-utilities/mixins';
@import '../cdb-variables/sizes';
@import '../cdb-variables/colors';
.CDB-Carousel {
@include display-flex();
@include justify-content(flex-start);
width: 100%;
}
.CDB-CarouselItem {
@include display-flex();
@include align-items(center);
@include justify-content(center);
width: $baseSize * 11;
height: $baseSize * 7;
margin-right: 8px;
border: 1px solid $cSecondaryLine;
border-radius: 4px;
background: $cThirdBackground;
box-sizing: border-box;
&:last-child {
margin-right: 0;
}
&:hover {
border: 1px solid $cMainLine;
cursor: pointer;
}
}
.CDB-CarouselItem.is-selected {
border: 2px solid $cBlue;
}

View File

@ -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;
}

View File

@ -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;

View File

@ -43,13 +43,15 @@
</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>
<br/>
<br/>
<br/>
<div class="CDB-HeaderInfo">
<a href="#" class="u-rSpace--xl CDB-HeaderInfo-Back">
<i class="CDB-IconFont CDB-IconFont-arrowPrev Size-large"></i>
@ -85,6 +87,7 @@
<p class="CDB-Text CDB-Size-medium u-iBlock"><a href="#" class="u-iBlock">populates_places</a></p>
</div>
</div>
<br/>
<br/>
<br/>
@ -108,9 +111,10 @@
</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>
<br/>
<br/>
<br/>
@ -130,10 +134,35 @@
<p class="CDB-Text CDB-Size-medium u-iBlock"><a href="#" class="u-iBlock">populates_places</a></p>
</div>
</div>
<br/>
<br/>
<br/>
<div class="CDB-HeaderInfo">
<div class="CDB-HeaderNumeration CDB-Text is-semibold u-rSpace--m">1</div>
<div class="CDB-HeaderInfo-Inner CDB-Text">
<div class="CDB-HeaderInfo-Title u-bSpace--m">
<h2 class="CDB-Text CDB-HeaderInfo-TitleText CDB-Size-large">Type</h2>
<div class="CDB-HeaderInfo-Actions">
<a href="#">
<div class="CDB-Shape">
<div class="CDB-ArrowToogle is-blue is-small is-down"></div>
</div>
</a>
</div>
</div>
<p class="CDB-Text u-upperCase 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>
<br/>
<br/>
<br/>
```
*/
@ -148,7 +177,6 @@
display: block;
}
}
.CDB-HeaderInfo-ListItem {
display: inline-block;
margin-right: 8px;
@ -159,23 +187,16 @@
}
}
.CDB-HeaderInfo-Text {
color: $cTypo3;
}
.CDB-HeaderInfo-Inner {
@include flex(1);
}
.CDB-HeaderInfo-Back {
margin-top: 7px;
}
.CDB-HeaderInfo-Title {
@include display-flex();
@include align-items(center);
}
.CDB-HeaderInfo-TitleText {
@include flex(1);
width: 0;
@ -184,12 +205,20 @@
white-space: nowrap;
overflow: hidden;
}
.CDB-HeaderInfo-ActionsItem {
display: inline-block;
margin-left: 4px;
vertical-align: middle;
}
.CDB-HeaderNumeration {
width: $baseSize * 3;
height: $baseSize * 3;
border: 1px solid $cMainLine;
border-radius: 4px;
background-color: $cWhite;
color: $cAltText;
font-size: $sFontSize-small;
line-height: 23px;
text-align: center;
box-sizing: border-box;
}

View File

@ -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;
}
}
}

View File

@ -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;
}
}

View File

@ -49,10 +49,15 @@ Description
width: 16px;
height: 16px;
text-align: center;
&:hover {
cursor: pointer;
}
}
.CDB-Shape--medium {
width: 24px;
height: 24px;
}
.CDB-Shape:hover {
cursor: pointer;
}
.CDB-Shape-add {
position: relative;
@ -65,7 +70,7 @@ Description
bottom: 7px;
left: 0;
height: 1px;
background: $cMainDark;
background: $cMainBg;
content: '';
}
@ -76,7 +81,7 @@ Description
bottom: 0;
left: 7px;
width: 1px;
background: $cMainDark;
background: $cMainBg;
content: '';
}
}
@ -90,7 +95,7 @@ Description
bottom: 7px;
left: 4px;
height: 1px;
background: $cMainDark;
background: $cMainBg;
content: '';
}
@ -101,7 +106,7 @@ Description
bottom: 3px;
left: 8px;
width: 1px;
background: $cMainDark;
background: $cMainBg;
content: '';
}
}

View File

@ -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 {

View File

@ -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: '';
}

View File

@ -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: '';
}

View File

@ -56,7 +56,7 @@ Description
bottom: 7px;
left: 2px;
height: 1px;
background: $cMainDark;
background: $cMainBg;
content: '';
}
}

View File

@ -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;
}
}

View File

@ -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;
}
}

View File

@ -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 {

View File

@ -43,7 +43,7 @@ Description
.CDB-Shape-hamburguerItem {
height: $baseSize / 4;
margin-bottom: $baseSize / 4;
background: $cMainDark;
background: $cMainBg;
&:last-child {
margin-bottom: 0;

View File

@ -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: '';
}
}

View File

@ -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: '';
}
}

View File

@ -4,6 +4,41 @@
Description
```
<h2>24px</h2>
<div style="padding: 20px;">
<button class="CDB-Shape CDB-Shape--medium" style="background: rgba(0, 0, 0, .02);">
<div class="CDB-Shape-threePoints is-horizontal is-medium">
<div class="CDB-Shape-threePointsItem is-round"></div>
<div class="CDB-Shape-threePointsItem is-round"></div>
<div class="CDB-Shape-threePointsItem is-round"></div>
</div>
</button>
</div>
<div style="padding: 20px;">
<button class="CDB-Shape CDB-Shape--medium" style="background: rgba(0, 0, 0, .02);">
<div class="CDB-Shape-threePoints is-horizontal is-blue is-medium">
<div class="CDB-Shape-threePointsItem is-round"></div>
<div class="CDB-Shape-threePointsItem is-round"></div>
<div class="CDB-Shape-threePointsItem is-round"></div>
</div>
</button>
</div>
<div style="padding: 20px; background: #2E3C43;">
<button class="CDB-Shape CDB-Shape--medium" style="background: rgba(0, 0, 0, .08);">
<div class="CDB-Shape-threePoints is-horizontal is-white is-medium">
<div class="CDB-Shape-threePointsItem is-round"></div>
<div class="CDB-Shape-threePointsItem is-round"></div>
<div class="CDB-Shape-threePointsItem is-round"></div>
</div>
</button>
</div>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<h2>16px</h2>
<div style="padding: 20px;">
<button class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
@ -39,7 +74,7 @@ Description
<h2>12px</h2>
<div style="padding: 20px;">
<button class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
<div class="CDB-Shape-threePoints is-small">
<div class="CDB-Shape-threePoints">
<div class="CDB-Shape-threePointsItem"></div>
<div class="CDB-Shape-threePointsItem"></div>
<div class="CDB-Shape-threePointsItem"></div>
@ -48,7 +83,7 @@ Description
</div>
<div style="padding: 20px;">
<button class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
<div class="CDB-Shape-threePoints is-blue is-small js-actions">
<div class="CDB-Shape-threePoints is-blue is-small">
<div class="CDB-Shape-threePointsItem"></div>
<div class="CDB-Shape-threePointsItem"></div>
<div class="CDB-Shape-threePointsItem"></div>
@ -57,7 +92,7 @@ Description
</div>
<div style="padding: 20px; background: #2E3C43;">
<button class="CDB-Shape" style="background: rgba(0, 0, 0, .08);">
<div class="CDB-Shape-threePoints is-white is-small js-actions">
<div class="CDB-Shape-threePoints is-white is-small">
<div class="CDB-Shape-threePointsItem"></div>
<div class="CDB-Shape-threePointsItem"></div>
<div class="CDB-Shape-threePointsItem"></div>
@ -72,35 +107,45 @@ Description
.CDB-Shape-threePoints {
display: inline-block;
}
.CDB-Shape-threePoints.is-horizontal {
transform: rotate(90deg);
}
.CDB-Shape-threePointsItem {
width: 2px;
height: 2px;
margin-bottom: 5px;
background: $cMainDark;
&:last-child {
margin-bottom: 0;
}
background: $cMainBg;
}
.CDB-Shape-threePointsItem.is-round {
border-radius: 50%;
}
.CDB-Shape-threePointsItem:last-child {
margin-bottom: 0;
}
.CDB-Shape-threePoints.is-small {
padding-top: 2px;
.CDB-Shape-threePointsItem {
width: 2px;
height: 2px;
margin-bottom: 3px;
}
}
.CDB-Shape-threePoints.is-small .CDB-Shape-threePointsItem {
width: 2px;
height: 2px;
margin-bottom: 3px;
}
.CDB-Shape-threePoints.is-blue {
.CDB-Shape-threePointsItem {
background: $cBlue;
}
.CDB-Shape-threePoints.is-medium {
padding-top: 2px;
}
.CDB-Shape-threePoints.is-medium .CDB-Shape-threePointsItem {
width: 4px;
height: 4px;
margin-bottom: 3px;
}
.CDB-Shape-threePoints.is-white {
.CDB-Shape-threePointsItem {
background: $cWhite;
}
.CDB-Shape-threePoints.is-blue .CDB-Shape-threePointsItem {
background: $cBlue;
}
.CDB-Shape-threePoints.is-white .CDB-Shape-threePointsItem {
background: $cWhite;
}

View File

@ -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: '';
}
}

View File

@ -9,8 +9,10 @@
<p class="CDB-Text CDB-Size-huge is-light">Open Sans 26/34 Light</p>
<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 is-semibold u-upperCase CDB-Size-medium">Open Sans 12/16 Semibold Uppercase</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>
```
@ -28,9 +30,6 @@
&.is-light {
font-weight: $sFontWeight-lighter;
}
&.is-upper {
text-transform: uppercase;
}
}
.CDB-Size-huge {
@ -52,3 +51,11 @@
font-size: $sFontSize-small;
line-height: $sLineHeight-small;
}
.CDB-FontSize-small {
font-size: $sFontSize-small;
}
.CDB-FontSize-medium {
font-size: $sFontSize-medium;
}

View File

@ -3,6 +3,10 @@
@import '../cdb-variables/colors';
body {
color: $cMainText;
}
a {
color: $cBlue;
text-decoration: none;

View File

@ -2,7 +2,9 @@
// ----------------------------------------------
@import './mixins';
@import '../cdb-variables/colors';
/* Margins */
.u-tSpace {
margin-top: 4px;
}
@ -24,19 +26,49 @@
.u-rSpace--xl {
margin-right: 12px;
}
.u-lSpace {
margin-left: 4px;
}
.u-lSpace--xl {
margin-left: 12px;
}
.u-bSpace {
margin-bottom: 4px;
}
.u-bSpace--m {
margin-bottom: 8px;
}
.u-bSpace--xl {
margin-bottom: 12px;
}
.u-lSpace {
margin-left: 4px;
}
.u-lSpace--xl {
margin-left: 12px;
}
.u-ellipsis {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
// Colors
// Main Text Color is default color
// ----------------------------------------------
.u-actionTextColor {
color: $cBlue;
}
.u-mainTextColor {
color: $cMainText;
}
.u-secondaryTextColor {
color: $cSecondaryText;
}
.u-altTextColor {
color: $cAltText;
}
.u-hintTextColor {
color: $cHintText;
}
/* Displays */
.u-iBlock {
@include inline-block();
}
@ -47,6 +79,12 @@
display: none !important;
}
/* Decoration */
.u-upperCase {
text-transform: uppercase;
}
/* Media queries*/
@include media-query-mobile() {
.u-showDesktop {
display: none !important;

View File

@ -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;