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
commit fee10f9e2e
32 changed files with 607 additions and 122 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

3
README.md
View File

@ -4,8 +4,9 @@
### Installation
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```
### Build
If you want to use any of the CartoAssets components, after the installation just run:

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" />
</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 {

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

@ -2,7 +2,7 @@
// ----------------------------------------------
/* SG
# Boxes/Box Dropdown
# Boxes/Dropdown
```
@ -21,6 +21,136 @@
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
# Boxes/Info Boxes

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';
.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;
}

42
src/scss/cdb-components/forms/textarea.scss Normal file
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;
}

4
src/scss/cdb-components/forms/toggle.scss
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;

57
src/scss/cdb-components/headers.scss
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;
}

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

@ -2,10 +2,9 @@
// ----------------------------------------------
/* SG
# Loader
# Loader/principal
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>
@ -13,6 +12,8 @@ There is only one state 'is-visible', in order to make it visible.
*/
@import '../cdb-utilities/mixins';
@import '../cdb-variables/colors';
@import '../cdb-variables/sizes';
.CDB-Loader {
@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%;
}
}
/* 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);
}
}

19
src/scss/cdb-components/menu.scss
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;
}
}

19
src/scss/cdb-components/shapes/add.scss
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: '';
}
}

6
src/scss/cdb-components/shapes/arrow.scss
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 {

28
src/scss/cdb-components/shapes/check-circle.scss
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,31 +94,31 @@ Description
position: absolute;
width: 1px;
transform: rotate(45deg);
background: $cMainDark;
background: $cMainBg;
content: '';
}
&.is-medium {
&::before {
top: 6px;
top: 5px;
left: 4px;
height: 4px;
}
&::after {
top: 4px;
top: 3px;
right: 5px;
height: 7px;
height: 6px;
}
}
&.is-small {
&::before {
top: 5px;
left: 3px;
top: 4px;
left: 2px;
height: 3px;
}
&::after {
top: 3px;
top: 2px;
right: 3px;
height: 5px;
}
@ -143,4 +143,14 @@ Description
}
}
.CDB-Shape-tick.is-green {
&::before {
background: $cHighlight;
}
&::after {
background: $cHighlight;
}
}

14
src/scss/cdb-components/shapes/close.scss
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: '';
}
@ -137,3 +137,13 @@ Description
background: $cWhite;
}
}
.CDB-Shape-close.is-red {
&::before {
background: $cError;
}
&::after {
background: $cError;
}
}

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

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

8
src/scss/cdb-components/shapes/dataset.scss
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;
}
}

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;
&.is-selected {
background: $cTypo2;
background: $cSecondaryText;
}
}

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

@ -60,13 +60,13 @@ Description
.CDB-Shape-CircleItem {
width: 13px;
height: 13px;
border: 1px solid $cMainDark;
border: 1px solid $cMainBg;
border-radius: 50%;
&.is-small {
width: 9px;
height: 9px;
margin: 2px auto;
margin: 0 auto;
}
&.is-blue {
border: 1px solid $cBlue;
@ -74,4 +74,10 @@ Description
&.is-white {
border: 1px solid $cWhite;
}
&.is-green {
border: 1px solid $cHighlight;
}
&.is-red {
border: 1px solid $cError;
}
}

2
src/scss/cdb-components/shapes/hamburguer.scss
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;

4
src/scss/cdb-components/shapes/magnify.scss
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: '';
}
}

4
src/scss/cdb-components/shapes/move.scss
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: '';
}
}

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

@ -4,33 +4,68 @@
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;">
<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-threePointsItem"></div>
<div class="CDB-Shape-threePointsItem"></div>
<div class="CDB-Shape-threePointsItem"></div>
</div>
</div>
</button>
</div>
<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-threePointsItem"></div>
<div class="CDB-Shape-threePointsItem"></div>
<div class="CDB-Shape-threePointsItem"></div>
</div>
</div>
</button>
</div>
<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-threePointsItem"></div>
<div class="CDB-Shape-threePointsItem"></div>
<div class="CDB-Shape-threePointsItem"></div>
</div>
</div>
</button>
</div>
<br>
<br>
@ -38,31 +73,31 @@ Description
<br>
<h2>12px</h2>
<div style="padding: 20px;">
<div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
<div class="CDB-Shape-threePoints is-small">
<button class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
<div class="CDB-Shape-threePoints">
<div class="CDB-Shape-threePointsItem"></div>
<div class="CDB-Shape-threePointsItem"></div>
<div class="CDB-Shape-threePointsItem"></div>
</div>
</div>
</button>
</div>
<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-threePointsItem"></div>
<div class="CDB-Shape-threePointsItem"></div>
<div class="CDB-Shape-threePointsItem"></div>
</div>
</div>
</button>
</div>
<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-threePointsItem"></div>
<div class="CDB-Shape-threePointsItem"></div>
<div class="CDB-Shape-threePointsItem"></div>
</div>
</div>
</button>
</div>
```
*/
@ -72,36 +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;
}

4
src/scss/cdb-components/shapes/toogle-arrow.scss
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: '';
}
}

13
src/scss/cdb-components/typography.scss
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-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 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>
```
@ -48,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;
}

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

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

12
src/scss/cdb-utilities/fonts.scss
View File

@ -6,20 +6,20 @@
font-family: 'Open Sans';
font-style: normal;
font-weight: 300;
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');
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');
}
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
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');
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');
}
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 600;
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');
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');
}

50
src/scss/cdb-utilities/helpers.scss
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;

9
src/scss/cdb-variables/_colors.scss
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;