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

Merge branch 'master' of https://github.com/CartoDB/CartoAssets into 47-color_input

Browse Source
This commit is contained in:
María Checa
2016-02-16 17:50:38 +01:00
parent 4979ba0e8f dd463d605b
commit fee10f9e2e
32 changed files with 607 additions and 122 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.travis.yml
+18
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
README.md
+2 -1
View File
@@ -4,8 +4,9 @@
### Installation ### Installation
As easy as: As easy as:
- ```npm install``` - ```npm install --global gulp-cli``` [Gulp installation](https://github.com/gulpjs/gulp)
- ```npm install -g markdown-styleguide-generator``` [StyleGenerator installation](https://www.npmjs.com/package/markdown-styleguide-generator#install) - ```npm install -g markdown-styleguide-generator``` [StyleGenerator installation](https://www.npmjs.com/package/markdown-styleguide-generator#install)
- ```npm install```
### Build ### Build
If you want to use any of the CartoAssets components, after the installation just run: If you want to use any of the CartoAssets components, after the installation just run:
src/fonts/cartoIcon.eot
BIN
View File
Binary file not shown.
src/fonts/cartoIcon.ttf
BIN
View File
Binary file not shown.
src/fonts/cartoIcon.woff
BIN
View File
Binary file not shown.
src/scss/cdb-components/avatars.scss
+1 -2
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 {
src/scss/cdb-components/boxes.scss
+131 -1
View File
@@ -2,7 +2,7 @@
// ---------------------------------------------- // ----------------------------------------------
/* SG /* SG
# Boxes/Box Dropdown # Boxes/Dropdown
``` ```
@@ -21,6 +21,136 @@
box-shadow: 0 $baseSize $baseSize * 2 0 rgba(0, 0, 0, 0.16); box-shadow: 0 $baseSize $baseSize * 2 0 rgba(0, 0, 0, 0.16);
} }
/* SG
# Boxes/Loader
```
<div class="CDB-BoxLoader">
<ul class="CDB-BoxLoader-inner">
<li class="CDB-BoxLoader-item">
<div class="CDB-Shape u-rSpace--m">
<div class="CDB-Shape-CircleItem is-green is-medium">
<div class="CDB-Shape-tick is-medium is-green"></div>
</div>
</div>
<div class="CDB-BoxLoader-info">
<p class="CDB-Text CDB-Size-medium">Query applied. Showing 2,561 rows, Query applied. Showing 2,561 rows, Query applied. Showing 2,561 rows Query applied. Showing 2,561 rowsQuery applied. Showing 2,561 rows Query applied. Showing 2,561 rows</p>
</div>
<div class="CDB-BoxLoader-actions">
<div class="CDB-Shape">
<div class="CDB-Shape-threePoints is-small is-blue">
<div class="CDB-Shape-threePointsItem"></div>
<div class="CDB-Shape-threePointsItem"></div>
<div class="CDB-Shape-threePointsItem"></div>
</div>
</div>
</div>
</li>
</ul>
</div>
<br/>
<br/>
<br/>
<br/>
<br/>
<div class="CDB-BoxLoader">
<ul class="CDB-BoxLoader-inner">
<li class="CDB-BoxLoader-item">
<div class="CDB-Shape u-rSpace--m">
<div class="CDB-Shape-CircleItem is-green is-medium">
<div class="CDB-Shape-tick is-medium is-green"></div>
</div>
</div>
<div class="CDB-BoxLoader-info">
<p class="CDB-Text CDB-Size-medium">Finished importing <a href="#">populated_places_2</a></p>
</div>
</li>
<li class="CDB-BoxLoader-item is-working">
<div class="CDB-LoaderIcon u-rSpace--m">
<div class="CDB-LoaderIcon-item"></div>
</div>
<div class="CDB-BoxLoader-info">
<p class="CDB-Text CDB-Size-medium">Geocoding populated_places_2 (28%)</p>
</div>
<div class="CDB-BoxLoader-actions">
<div class="CDB-Shape">
<div class="CDB-Shape-close is-blue is-large"></div>
</div>
</div>
</li>
</ul>
<ul class="CDB-BoxLoader-inner">
<li class="CDB-BoxLoader-item">
<div class="CDB-Shape u-rSpace--m">
<div class="CDB-Shape-CircleItem is-green is-medium">
<div class="CDB-Shape-tick is-medium is-green"></div>
</div>
</div>
<div class="CDB-BoxLoader-info">
<p class="CDB-Text CDB-Size-medium">Finished importing <a href="#">populated_places_2</a></p>
</div>
</li>
</ul>
</div>
<br/>
<br/>
<br/>
<br/>
<br/>
<div class="CDB-BoxLoader">
<ul class="CDB-BoxLoader-inner">
<li class="CDB-BoxLoader-item">
<div class="CDB-Shape u-rSpace--m">
<div class="CDB-Shape-CircleItem is-red">
<div class="CDB-Shape-close is-medium is-red"></div>
</div>
</div>
<div class="CDB-BoxLoader-info">
<p class="CDB-Text CDB-Size-medium">Error in query. Data might be outdated</p>
</div>
<div class="CDB-BoxLoader-actions">
<div class="CDB-Shape">
<div class="CDB-Shape-threePoints is-small is-blue">
<div class="CDB-Shape-threePointsItem"></div>
<div class="CDB-Shape-threePointsItem"></div>
<div class="CDB-Shape-threePointsItem"></div>
</div>
</div>
</div>
</li>
</ul>
</div>
```
*/
.CDB-BoxLoader {
padding: 0 $baseSize * 3;
border-top: 1px solid $cMainLine;
}
.CDB-BoxLoader-inner {
padding: $baseSize + 4 0;
border-top: 1px solid $cMainLine;
&:first-child {
border-top: 0;
}
}
.CDB-BoxLoader-item {
@include display-flex();
padding: $baseSize 0;
color: $cSecondaryText;
&.is-working {
color: $cAltText;
}
}
.CDB-BoxLoader-info {
@include flex(1);
padding-right: $baseSize * 2;
}
/* SG /* SG
# Boxes/Info Boxes # Boxes/Info Boxes
src/scss/cdb-components/carousel.scss
+51
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;
}
src/scss/cdb-components/colors.scss
+6 -6
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;
} }
src/scss/cdb-components/forms/textarea.scss
+42
View File
@@ -0,0 +1,42 @@
// Textarea styles
// ----------------------------------------------
/* SG
# Forms/Textareas
```
<textarea name="textarea" placeholder="DejaVu Sans" class="CDB-Textarea CDB-Text"></textarea>
<textarea name="textarea" placeholder="DejaVu Sans" class="CDB-Textarea has-error CDB-Text"></textarea>
<textarea name="textarea" placeholder="DejaVu Sans" class="CDB-Textarea is-disabled CDB-Text" disabled></textarea>
```
*/
@import '../../cdb-variables/sizes';
@import '../../cdb-variables/colors';
.CDB-Textarea {
width: 100%;
padding: 7px 8px 6px;
border: 1px solid $cMainLine;
border-radius: $baseSize / 2;
font-size: $sFontSize-medium;
line-height: $sLineHeight-medium;
&:hover {
border: 1px solid $cHoverLine;
}
&:focus {
border: 1px solid $cBlue;
outline-color: transparent;
outline-style: none;
}
&:disabled {
border-color: $cSecondaryLine;
background: $cThirdBackground;
}
}
.CDB-Textarea.has-error {
border: 1px solid rgba($cError, 0.48);
background: rgba($cError, 0.04);
color: $cError;
}
src/scss/cdb-components/forms/toggle.scss
+2 -2
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;
src/scss/cdb-components/headers.scss
+43 -14
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;
}
src/scss/cdb-components/loader.scss
+89 -2
View File
@@ -2,10 +2,9 @@
// ---------------------------------------------- // ----------------------------------------------
/* SG /* SG
# Loader # Loader/principal
This is the generic loader for widgets, maps, components, ... This is the generic loader for widgets, maps, components, ...
There is only one state 'is-visible', in order to make it visible.
``` ```
<div class="CDB-Loader is-visible"></div> <div class="CDB-Loader is-visible"></div>
@@ -13,6 +12,8 @@ There is only one state 'is-visible', in order to make it visible.
*/ */
@import '../cdb-utilities/mixins'; @import '../cdb-utilities/mixins';
@import '../cdb-variables/colors';
@import '../cdb-variables/sizes';
.CDB-Loader { .CDB-Loader {
@include css3-prefix(animation, loader-progress 1000ms linear 1); @include css3-prefix(animation, loader-progress 1000ms linear 1);
@@ -39,3 +40,89 @@ There is only one state 'is-visible', in order to make it visible.
width: 100%; width: 100%;
} }
} }
/* SG
# Loader/circle
```
<div style="padding: 20px;">
<div class="CDB-LoaderIcon">
<div class="CDB-LoaderIcon-item"></div>
</div>
</div>
<div style="padding: 20px; background: #2E3C43;">
<div class="CDB-LoaderIcon is-grey">
<div class="CDB-LoaderIcon-item is-grey"></div>
</div>
</div>
```
*/
.CDB-LoaderIcon {
box-sizing: border-box;
position: relative;
width: $baseSize * 2;
height: $baseSize * 2;
border: 2px solid $cMainLine;
border-radius: 50%;
&.is-grey {
border: 2px solid $cSecondaryText;
}
}
.CDB-LoaderIcon-item {
@include css3-prefix(animation, loader-icon 1.4s linear infinite);
position: absolute;
top: -2px;
left: -2px;
width: $baseSize * 2;
height: $baseSize * 2;
border-radius: 50%;
background: linear-gradient(to right, $cWhite 10%, rgba($cWhite, 0) 42%);
&::before,
&::after {
position: absolute;
top: 0;
left: 0;
content: '';
}
&::before {
width: 50%;
height: 50%;
border-radius: 100% 0 0;
background: $cMainLine;
}
&::after {
right: 0;
bottom: 0;
width: 75%;
height: 75%;
margin: auto;
border-radius: 50%;
background: $cWhite;
}
&.is-grey {
background: linear-gradient(to right, $cMainBg 10%, rgba($cWhite, 0) 42%);
&::before {
background: $cSecondaryText;
}
&::after {
background: $cMainBg;
}
}
}
@include keyframes(loader-icon) {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
src/scss/cdb-components/menu.scss
+9 -10
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;
} }
} }
src/scss/cdb-components/shapes/add.scss
+12 -7
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: '';
} }
} }
src/scss/cdb-components/shapes/arrow.scss
+3 -3
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 {
src/scss/cdb-components/shapes/check-circle.scss
+19 -9
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,31 +94,31 @@ Description
position: absolute; position: absolute;
width: 1px; width: 1px;
transform: rotate(45deg); transform: rotate(45deg);
background: $cMainDark; background: $cMainBg;
content: ''; content: '';
} }
&.is-medium { &.is-medium {
&::before { &::before {
top: 6px; top: 5px;
left: 4px; left: 4px;
height: 4px; height: 4px;
} }
&::after { &::after {
top: 4px; top: 3px;
right: 5px; right: 5px;
height: 7px; height: 6px;
} }
} }
&.is-small { &.is-small {
&::before { &::before {
top: 5px; top: 4px;
left: 3px; left: 2px;
height: 3px; height: 3px;
} }
&::after { &::after {
top: 3px; top: 2px;
right: 3px; right: 3px;
height: 5px; height: 5px;
} }
@@ -143,4 +143,14 @@ Description
} }
} }
.CDB-Shape-tick.is-green {
&::before {
background: $cHighlight;
}
&::after {
background: $cHighlight;
}
}
src/scss/cdb-components/shapes/close.scss
+12 -2
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: '';
} }
@@ -137,3 +137,13 @@ Description
background: $cWhite; background: $cWhite;
} }
} }
.CDB-Shape-close.is-red {
&::before {
background: $cError;
}
&::after {
background: $cError;
}
}
src/scss/cdb-components/shapes/dash.scss
+1 -1
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: '';
} }
} }
src/scss/cdb-components/shapes/dataset.scss
+4 -4
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;
} }
} }
src/scss/cdb-components/shapes/dots.scss
+1 -1
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;
} }
} }
src/scss/cdb-components/shapes/error-circle.scss
+8 -2
View File
@@ -60,13 +60,13 @@ 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 {
width: 9px; width: 9px;
height: 9px; height: 9px;
margin: 2px auto; margin: 0 auto;
} }
&.is-blue { &.is-blue {
border: 1px solid $cBlue; border: 1px solid $cBlue;
@@ -74,4 +74,10 @@ Description
&.is-white { &.is-white {
border: 1px solid $cWhite; border: 1px solid $cWhite;
} }
&.is-green {
border: 1px solid $cHighlight;
}
&.is-red {
border: 1px solid $cError;
}
} }
src/scss/cdb-components/shapes/hamburguer.scss
+1 -1
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;
src/scss/cdb-components/shapes/magnify.scss
+2 -2
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: '';
} }
} }
src/scss/cdb-components/shapes/move.scss
+2 -2
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: '';
} }
} }
src/scss/cdb-components/shapes/threePoints.scss
+75 -31
View File
@@ -4,33 +4,68 @@
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;">
<div 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"> <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>
</div> </div>
</div> </button>
</div> </div>
<div style="padding: 20px;"> <div style="padding: 20px;">
<div 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"> <div class="CDB-Shape-threePoints is-blue">
<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>
</div> </div>
</div> </button>
</div> </div>
<div style="padding: 20px; background: #2E3C43;"> <div style="padding: 20px; background: #2E3C43;">
<div 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"> <div class="CDB-Shape-threePoints is-white">
<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>
</div> </div>
</div> </button>
</div> </div>
<br> <br>
<br> <br>
@@ -38,31 +73,31 @@ Description
<br> <br>
<h2>12px</h2> <h2>12px</h2>
<div style="padding: 20px;"> <div style="padding: 20px;">
<div 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>
</div> </div>
</div> </button>
</div> </div>
<div style="padding: 20px;"> <div style="padding: 20px;">
<div 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"> <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>
</div> </div>
</div> </button>
</div> </div>
<div style="padding: 20px; background: #2E3C43;"> <div style="padding: 20px; background: #2E3C43;">
<div 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"> <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>
</div> </div>
</div> </button>
</div> </div>
``` ```
*/ */
@@ -72,36 +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;
}
src/scss/cdb-components/shapes/toogle-arrow.scss
+2 -2
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: '';
} }
} }
src/scss/cdb-components/typography.scss
+12 -1
View File
@@ -9,7 +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 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 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>
``` ```
@@ -48,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;
}
src/scss/cdb-utilities/defaults.css.scss
+4
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;
src/scss/cdb-utilities/fonts.scss
+6 -6
View File
@@ -6,20 +6,20 @@
font-family: 'Open Sans'; font-family: 'Open Sans';
font-style: normal; font-style: normal;
font-weight: 300; font-weight: 300;
src: local('Open Sans Light'), local('OpenSans-Light'), url('themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3aCWcynf_cDxXwCLxiixG1c.ttf') format('truetype'), src: local('Open Sans Light'), local('OpenSans-Light'), url('//themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3aCWcynf_cDxXwCLxiixG1c.ttf') format('truetype'),
url('themes.googleusercontent.com/static/fonts/opensans/v8/DXI1ORHCpsQm3Vp6mXoaTeY5mlVXtdNkpsMpKkrDXP4.woff') format('woff'); url('//themes.googleusercontent.com/static/fonts/opensans/v8/DXI1ORHCpsQm3Vp6mXoaTeY5mlVXtdNkpsMpKkrDXP4.woff') format('woff');
} }
@font-face { @font-face {
font-family: 'Open Sans'; font-family: 'Open Sans';
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;
src: local('Open Sans'), local('OpenSans'), url('themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3aCWcynf_cDxXwCLxiixG1c.ttf') format('truetype'), src: local('Open Sans'), local('OpenSans'), url('//themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3aCWcynf_cDxXwCLxiixG1c.ttf') format('truetype'),
url('themes.googleusercontent.com/static/fonts/opensans/v8/u-WUoqrET9fUeobQW7jkRbO3LdcAZYWl9Si6vvxL-qU.woff') format('woff'); url('//themes.googleusercontent.com/static/fonts/opensans/v8/u-WUoqrET9fUeobQW7jkRbO3LdcAZYWl9Si6vvxL-qU.woff') format('woff');
} }
@font-face { @font-face {
font-family: 'Open Sans'; font-family: 'Open Sans';
font-style: normal; font-style: normal;
font-weight: 600; font-weight: 600;
src: local('Open Sans Semibold'), local('OpenSans-Semibold'), url('themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3aCWcynf_cDxXwCLxiixG1c.ttf') format('truetype'), src: local('Open Sans Semibold'), local('OpenSans-Semibold'), url('//themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3aCWcynf_cDxXwCLxiixG1c.ttf') format('truetype'),
url('themes.googleusercontent.com/static/fonts/opensans/v8/MTP_ySUJH_bn48VBG8sNSuY5mlVXtdNkpsMpKkrDXP4.woff') format('woff'); url('//themes.googleusercontent.com/static/fonts/opensans/v8/MTP_ySUJH_bn48VBG8sNSuY5mlVXtdNkpsMpKkrDXP4.woff') format('woff');
} }
src/scss/cdb-utilities/helpers.scss
+44 -6
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;
src/scss/cdb-variables/_colors.scss
+5 -4
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;