cartodb/CartoAssets
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'master' into 46-input_dropdown

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

BIN
src/fonts/cartoIcon.eot
View File

Binary file not shown.

BIN
src/fonts/cartoIcon.ttf
View File

Binary file not shown.

BIN
src/fonts/cartoIcon.woff
View File

Binary file not shown.

3
src/scss/cdb-components/avatars.scss
View File

@ -16,7 +16,7 @@
<img src="/src/img/avatar-40x40.png" alt="User Name" class="CDB-AvatarList-itemMedia" /> <img src="/src/img/avatar-40x40.png" alt="User Name" class="CDB-AvatarList-itemMedia" />
</li> </li>
<li class="CDB-AvatarList-itemMore"> <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> </li>
</ul> </ul>
``` ```
@ -44,7 +44,6 @@
border-left: 2px solid $cWhite; border-left: 2px solid $cWhite;
border-radius: 50px; border-radius: 50px;
background: $cSecondaryLine; background: $cSecondaryLine;
color: $cTypo2;
} }
.CDB-AvatarList-itemMedia { .CDB-AvatarList-itemMedia {

4
src/scss/cdb-components/boxes.scss
View File

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

51
src/scss/cdb-components/carousel.scss Normal file
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;
}

12
src/scss/cdb-components/colors.scss
View File

@ -18,9 +18,9 @@
@import '../cdb-variables/colors'; @import '../cdb-variables/colors';
.box { .box {
display: inline-block;
width: 120px; width: 120px;
height: 64px; height: 64px;
display: inline-block;
margin: 0 24px 24px 0; margin: 0 24px 24px 0;
} }
@ -28,15 +28,15 @@
background: $cBlue; background: $cBlue;
} }
.Color-White { .Color-White {
border: 1px solid #E5E5E5;
background: $cWhite; background: $cWhite;
border: 1px solid #e5e5e5;
} }
.Color-Dark { .Color-Dark {
background: $cBlack; background: $cBlack;
} }
.Color-MainDark { .Color-MainDark {
background: $cMainDark; background: $cMainBg;
} }
.Color-SecondaryDark { .Color-SecondaryDark {
background: $cSecondaryDark; background: $cSecondaryDark;
@ -89,13 +89,13 @@
.Color-Type02 { .Color-Type02 {
background: $cTypo2; background: $cSecondaryText;
} }
.Color-Type03 { .Color-Type03 {
background: $cTypo3; background: $cAltText;
} }
.Color-Type04 { .Color-Type04 {
background: $cTypo4; background: $cHintText;
} }

4
src/scss/cdb-components/forms/toggle.scss
View File

@ -33,7 +33,7 @@
height: $baseSize * 2; height: $baseSize * 2;
margin: 0 2px; margin: 0 2px;
border-radius: 50px; border-radius: 50px;
background: $cTypo4; background: $cHintText;
&::before { &::before {
position: absolute; position: absolute;
@ -49,7 +49,7 @@
} }
&:checked + .CDB-ToggleFace { &:checked + .CDB-ToggleFace {
background: $cMainDark; background: $cMainBg;
&::before { &::before {
right: 2px; right: 2px;

57
src/scss/cdb-components/headers.scss
View File

@ -43,13 +43,15 @@
</ul> </ul>
</li> </li>
<li class="CDB-HeaderInfo-ListItem"> <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> </li>
</ul> </ul>
</div> </div>
<br/> <br/>
<br/> <br/>
<br/> <br/>
<div class="CDB-HeaderInfo"> <div class="CDB-HeaderInfo">
<a href="#" class="u-rSpace--xl CDB-HeaderInfo-Back"> <a href="#" class="u-rSpace--xl CDB-HeaderInfo-Back">
<i class="CDB-IconFont CDB-IconFont-arrowPrev Size-large"></i> <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> <p class="CDB-Text CDB-Size-medium u-iBlock"><a href="#" class="u-iBlock">populates_places</a></p>
</div> </div>
</div> </div>
<br/> <br/>
<br/> <br/>
<br/> <br/>
@ -108,9 +111,10 @@
</a> </a>
</div> </div>
</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>
</div> </div>
<br/> <br/>
<br/> <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> <p class="CDB-Text CDB-Size-medium u-iBlock"><a href="#" class="u-iBlock">populates_places</a></p>
</div> </div>
</div> </div>
<br/> <br/>
<br/> <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; display: block;
} }
} }
.CDB-HeaderInfo-ListItem { .CDB-HeaderInfo-ListItem {
display: inline-block; display: inline-block;
margin-right: 8px; margin-right: 8px;
@ -159,23 +187,16 @@
} }
} }
.CDB-HeaderInfo-Text {
color: $cTypo3;
}
.CDB-HeaderInfo-Inner { .CDB-HeaderInfo-Inner {
@include flex(1); @include flex(1);
} }
.CDB-HeaderInfo-Back { .CDB-HeaderInfo-Back {
margin-top: 7px; margin-top: 7px;
} }
.CDB-HeaderInfo-Title { .CDB-HeaderInfo-Title {
@include display-flex(); @include display-flex();
@include align-items(center); @include align-items(center);
} }
.CDB-HeaderInfo-TitleText { .CDB-HeaderInfo-TitleText {
@include flex(1); @include flex(1);
width: 0; width: 0;
@ -184,12 +205,20 @@
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
} }
.CDB-HeaderInfo-ActionsItem { .CDB-HeaderInfo-ActionsItem {
display: inline-block; display: inline-block;
margin-left: 4px; margin-left: 4px;
vertical-align: middle; 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;
}

8
src/scss/cdb-components/loader.scss
View File

@ -67,7 +67,7 @@ This is the generic loader for widgets, maps, components, ...
border: 2px solid $cMainLine; border: 2px solid $cMainLine;
border-radius: 50%; border-radius: 50%;
&.is-grey { &.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; background: $cWhite;
} }
&.is-grey { &.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 { &::before {
background: $cTypo2; background: $cSecondaryText;
} }
&::after { &::after {
background: $cMainDark; background: $cMainBg;
} }
} }
} }

19
src/scss/cdb-components/menu.scss
View File

@ -18,10 +18,10 @@
<a class="CDB-NavMenu-Link" href="#">POP-UP</a> <a class="CDB-NavMenu-Link" href="#">POP-UP</a>
<ul class="CDB-NavSubmenu CDB-Size-small"> <ul class="CDB-NavSubmenu CDB-Size-small">
<li class="CDB-NavSubmenu-Item is-active"> <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>
<li class="CDB-NavSubmenu-Item"> <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> </li>
</ul> </ul>
</li> </li>
@ -97,8 +97,8 @@
} }
.CDB-NavMenu-Item.is-active .CDB-NavMenu-Link { .CDB-NavMenu-Item.is-active .CDB-NavMenu-Link {
border-bottom: 1px solid $cMainDark; border-bottom: 1px solid $cMainLine;
color: $cMainDark; color: $cMainText;
} }
.CDB-NavSubmenu { .CDB-NavSubmenu {
@ -118,26 +118,25 @@
.CDB-NavSubmenu-item.is-active { .CDB-NavSubmenu-item.is-active {
.CDB-NavSubmenu-Link { .CDB-NavSubmenu-Link {
border-bottom: 1px solid $cTypo3; border-bottom: 1px solid $cMainLine;
color: $cMainDark; color: $cMainText;
} }
} }
.CDB-NavSubmenu-Status { .CDB-NavSubmenu-Status {
margin-left: 2px; margin-left: 2px;
color: $cTypo4;
} }
.CDB-Navmenu.is-dark { .CDB-Navmenu.is-dark {
.CDB-NavMenu-Inner, .CDB-NavMenu-Inner,
.CDB-NavSubmenu { .CDB-NavSubmenu {
border-bottom: 1px solid $cTypo2; border-bottom: 1px solid $cSecondaryText;
} }
.CDB-NavMenu-Link, .CDB-NavMenu-Link,
.CDB-NavSubmenu-Link { .CDB-NavSubmenu-Link {
color: $cTypo3; color: $cAltText;
} }
.CDB-NavMenu-Item.is-active { .CDB-NavMenu-Item.is-active {
@ -155,7 +154,7 @@
} }
.CDB-NavSubmenu-Status { .CDB-NavSubmenu-Status {
color: $cTypo2; color: $cSecondaryText;
} }
} }

19
src/scss/cdb-components/shapes/add.scss
View File

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

6
src/scss/cdb-components/shapes/arrow.scss
View File

@ -22,7 +22,7 @@ Description
position: relative; position: relative;
width: 1px; width: 1px;
height: 8px; height: 8px;
background: $cMainDark; background: $cMainBg;
&::before { &::before {
display: block; display: block;
@ -32,7 +32,7 @@ Description
width: 5px; width: 5px;
height: 1px; height: 1px;
transform: rotate(45deg); transform: rotate(45deg);
background: $cMainDark; background: $cMainBg;
content: ''; content: '';
} }
@ -44,7 +44,7 @@ Description
width: 5px; width: 5px;
height: 1px; height: 1px;
transform: rotate(-45deg); transform: rotate(-45deg);
background: $cMainDark; background: $cMainBg;
content: ''; content: '';
} }
&.is-up { &.is-up {

6
src/scss/cdb-components/shapes/check-circle.scss
View File

@ -60,7 +60,7 @@ Description
.CDB-Shape-CircleItem { .CDB-Shape-CircleItem {
width: 14px; width: 14px;
height: 14px; height: 14px;
border: 1px solid $cMainDark; border: 1px solid $cMainBg;
border-radius: 50%; border-radius: 50%;
&.is-small { &.is-small {
@ -86,7 +86,7 @@ Description
position: absolute; position: absolute;
width: 1px; width: 1px;
transform: rotate(-45deg); transform: rotate(-45deg);
background: $cMainDark; background: $cMainBg;
content: ''; content: '';
} }
&::after { &::after {
@ -94,7 +94,7 @@ Description
position: absolute; position: absolute;
width: 1px; width: 1px;
transform: rotate(45deg); transform: rotate(45deg);
background: $cMainDark; background: $cMainBg;
content: ''; content: '';
} }

4
src/scss/cdb-components/shapes/close.scss
View File

@ -55,7 +55,7 @@ Description
position: absolute; position: absolute;
width: 1px; width: 1px;
transform: rotate(-45deg); transform: rotate(-45deg);
background: $cMainDark; background: $cMainBg;
content: ''; content: '';
} }
&::after { &::after {
@ -63,7 +63,7 @@ Description
position: absolute; position: absolute;
width: 1px; width: 1px;
transform: rotate(45deg); transform: rotate(45deg);
background: $cMainDark; background: $cMainBg;
content: ''; content: '';
} }

2
src/scss/cdb-components/shapes/dash.scss
View File

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

8
src/scss/cdb-components/shapes/dataset.scss
View File

@ -95,7 +95,7 @@ Description
width: 9px; width: 9px;
height: 9px; height: 9px;
margin-left: -10px; margin-left: -10px;
border: 1px solid $cMainDark; border: 1px solid $cMainBg;
border-radius: 50%; border-radius: 50%;
background: $cWhite; background: $cWhite;
@ -132,15 +132,15 @@ Description
.CDB-Shape-Dataset.is-white { .CDB-Shape-Dataset.is-white {
.CDB-Shape-DatasetItem { .CDB-Shape-DatasetItem {
border: 1px solid $cHoverLine; border: 1px solid $cHoverLine;
background: $cMainDark; background: $cMainBg;
&:first-child { &:first-child {
box-shadow: 3px 0 $cMainDark; box-shadow: 3px 0 $cMainBg;
} }
} }
} }
.CDB-Shape-Dataset.is-white.is-small { .CDB-Shape-Dataset.is-white.is-small {
.CDB-Shape-DatasetItem:first-child { .CDB-Shape-DatasetItem:first-child {
box-shadow: 2px 0 $cMainDark; box-shadow: 2px 0 $cMainBg;
} }
} }

2
src/scss/cdb-components/shapes/dots.scss
View File

@ -23,6 +23,6 @@ You may resize and change the colors of the icons with the `glyph-`-classes. Ava
background: $cSecondaryLine; background: $cSecondaryLine;
&.is-selected { &.is-selected {
background: $cTypo2; background: $cSecondaryText;
} }
} }

2
src/scss/cdb-components/shapes/error-circle.scss
View File

@ -60,7 +60,7 @@ Description
.CDB-Shape-CircleItem { .CDB-Shape-CircleItem {
width: 13px; width: 13px;
height: 13px; height: 13px;
border: 1px solid $cMainDark; border: 1px solid $cMainBg;
border-radius: 50%; border-radius: 50%;
&.is-small { &.is-small {

2
src/scss/cdb-components/shapes/hamburguer.scss
View File

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

4
src/scss/cdb-components/shapes/magnify.scss
View File

@ -58,7 +58,7 @@ Description
left: 0; left: 0;
width: 11px; width: 11px;
height: 11px; height: 11px;
border: 1px solid $cMainDark; border: 1px solid $cMainBg;
border-radius: 50%; border-radius: 50%;
content: ''; content: '';
} }
@ -71,7 +71,7 @@ Description
width: 1px; width: 1px;
height: 7px; height: 7px;
transform: rotate(314deg); transform: rotate(314deg);
background: $cMainDark; background: $cMainBg;
content: ''; content: '';
} }
} }

4
src/scss/cdb-components/shapes/move.scss
View File

@ -101,7 +101,7 @@ Description
display: inline-block; display: inline-block;
width: 3px; width: 3px;
height: 3px; height: 3px;
background: $cMainDark; background: $cMainBg;
content: ''; content: '';
} }
@ -110,7 +110,7 @@ Description
width: 3px; width: 3px;
height: 3px; height: 3px;
margin-left: 2px; margin-left: 2px;
background: $cMainDark; background: $cMainBg;
content: ''; content: '';
} }
} }

87
src/scss/cdb-components/shapes/threePoints.scss
View File

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

4
src/scss/cdb-components/shapes/toogle-arrow.scss
View File

@ -97,7 +97,7 @@ Description
width: 10px; width: 10px;
height: 1px; height: 1px;
transform: rotate(-45deg); transform: rotate(-45deg);
background: $cMainDark; background: $cMainBg;
content: ''; content: '';
} }
&::after { &::after {
@ -108,7 +108,7 @@ Description
width: 10px; width: 10px;
height: 1px; height: 1px;
transform: rotate(45deg); transform: rotate(45deg);
background: $cMainDark; background: $cMainBg;
content: ''; content: '';
} }
} }

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

4
src/scss/cdb-utilities/defaults.css.scss
View File

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

50
src/scss/cdb-utilities/helpers.scss
View File

@ -2,7 +2,9 @@
// ---------------------------------------------- // ----------------------------------------------
@import './mixins'; @import './mixins';
@import '../cdb-variables/colors';
/* Margins */
.u-tSpace { .u-tSpace {
margin-top: 4px; margin-top: 4px;
} }
@ -24,19 +26,49 @@
.u-rSpace--xl { .u-rSpace--xl {
margin-right: 12px; margin-right: 12px;
} }
.u-lSpace {
margin-left: 4px;
}
.u-lSpace--xl {
margin-left: 12px;
}
.u-bSpace { .u-bSpace {
margin-bottom: 4px; margin-bottom: 4px;
} }
.u-bSpace--m { .u-bSpace--m {
margin-bottom: 8px; 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 { .u-iBlock {
@include inline-block(); @include inline-block();
} }
@ -47,6 +79,12 @@
display: none !important; display: none !important;
} }
/* Decoration */
.u-upperCase {
text-transform: uppercase;
}
/* Media queries*/
@include media-query-mobile() { @include media-query-mobile() {
.u-showDesktop { .u-showDesktop {
display: none !important; display: none !important;

9
src/scss/cdb-variables/_colors.scss
View File

@ -5,7 +5,7 @@
$cBlue: #3AA9E3; $cBlue: #3AA9E3;
$cBlack: #000; $cBlack: #000;
$cWhite: #FFF; $cWhite: #FFF;
$cMainDark: #2E3C43; $cMainBg: #2E3C43;
//Structure //Structure
$cSecondaryDark: #282C2F; $cSecondaryDark: #282C2F;
@ -18,9 +18,10 @@ $cMainLine: #DDD;
$cSecondaryLine: #EEE; $cSecondaryLine: #EEE;
//Typography //Typography
$cTypo2: #636D72; $cMainText: #2E3C43;
$cTypo3: #979EA1; $cSecondaryText: #636D72;
$cTypo4: #CBCED0; $cAltText: #979EA1;
$cHintText: #CBCED0;
//Others //Others
$cHighlight: #9DE0AD; $cHighlight: #9DE0AD;