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

Chaning way to load cartoassets stylesheets

Browse Source
This commit is contained in:
Javier Álvarez Medina 2017-05-23 17:54:22 +02:00
parent bbf8a2ba82
commit 007b851962
47 changed files with 179 additions and 275 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
icon-font/template.jst.ejs
View File

@ -43,7 +43,7 @@ All available icons in CartoDB.
<% var name = glyph.fileName.split("_")[2].toCamelCase(); %>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-<%= name %> Size-large"></i>
<h4 class="Text Size-small"><%= name %></h4>
<h4 class="Text Size-small u-tSpace--m"><%= name %></h4>
</div>
<% }); %>
```

2
package.json
View File

@ -33,7 +33,7 @@
"jquery": "~2.2.0",
"highlight.js": "~9.1.0",
"markdown-styleguide-generator": "~2.0.4",
"grunt-sass": "1.1.0",
"grunt-sass": "2.0.0",
"grunt-contrib-clean": "0.7.0",
"grunt-contrib-concat": "0.5.1",
"grunt-contrib-cssmin": "0.14.0",

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

@ -22,9 +22,6 @@
```
*/
@import '../cdb-variables/sizes';
@import '../cdb-variables/colors';
.CDB-AvatarList {
padding-left: 12px;
}

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

@ -10,10 +10,6 @@
```
*/
@import '../cdb-utilities/mixins';
@import '../cdb-variables/sizes';
@import '../cdb-variables/colors';
.CDB-Box-modal {
min-width: 160px;
border: 1px solid $cMainLine;

5
src/scss/cdb-components/buttons.scss
View File

@ -159,11 +159,6 @@ Layout Component:
```
*/
@import '../cdb-utilities/mixins';
@import '../cdb-variables/sizes';
@import '../cdb-variables/colors';
.CDB-Button {
@include transition(background, 300ms);
position: relative;

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

@ -12,12 +12,9 @@
<div style="display: inline-block; width: 120px; height: 64px; margin: 0 24px 24px 0;" class="box Color-White"></div>
<div style="display: inline-block; width: 120px; height: 64px; margin: 0 24px 24px 0;" class="box Color-SecondaryBackground"></div>
<div style="display: inline-block; width: 120px; height: 64px; margin: 0 24px 24px 0;" class="box Color-ThirdBackground"></div>
```
```
*/
@import '../cdb-variables/colors';
.Color-Blue {
background: $cBlue;
}
@ -125,5 +122,3 @@
.Color-Error {
background: $cError;
}

6
src/scss/cdb-components/forms/checkbox.scss
View File

@ -20,11 +20,6 @@
```
*/
@import '../../cdb-variables/sizes';
@import '../../cdb-variables/colors';
@import '../../cdb-utilities/mixins';
.CDB-Checkbox {
position: absolute;
width: $baseSize * 2;
@ -112,4 +107,3 @@
opacity: 0;
}
}

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

@ -109,10 +109,6 @@
```
*/
@import '../../cdb-utilities/mixins';
@import '../../cdb-variables/sizes';
@import '../../cdb-variables/colors';
.CDB-DropdownContainer {
position: relative;
height: 250px;

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

@ -11,10 +11,6 @@
```
*/
@import '../../cdb-variables/sizes';
@import '../../cdb-variables/colors';
@import '../../cdb-utilities/helpers';
.CDB-InputText {
width: 100%;
min-height: 32px;

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

@ -83,9 +83,6 @@
```
*/
@import '../../cdb-variables/sizes';
@import '../../cdb-utilities/mixins';
.CDB-Legend {
width: $baseSize * 12;
}
@ -101,4 +98,3 @@
.CDB-Fieldset-block {
width: 100%;
}

4
src/scss/cdb-components/forms/option-input.scss
View File

@ -98,10 +98,6 @@
```
*/
@import '../../cdb-variables/sizes';
@import '../../cdb-variables/colors';
@import '../../cdb-utilities/mixins';
.CDB-OptionInput {
width: 100%;
height: $baseSize * 4;

9
src/scss/cdb-components/forms/radio.scss
View File

@ -21,11 +21,6 @@
```
*/
@import '../../cdb-variables/sizes';
@import '../../cdb-variables/colors';
@import '../../cdb-utilities/mixins';
.CDB-Radio {
position: absolute;
width: $baseSize * 2;
@ -106,7 +101,3 @@
background: $cBlue;
}
}

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

@ -55,10 +55,6 @@
```
*/
@import '../../cdb-variables/sizes';
@import '../../cdb-variables/colors';
@import '../../cdb-utilities/helpers';
.CDB-Select {
position: relative;
}

11
src/scss/cdb-components/forms/tabsForms.scss
View File

@ -72,11 +72,6 @@
```
*/
@import '../../cdb-utilities/mixins';
@import '../../cdb-variables/sizes';
@import '../../cdb-variables/colors';
.CDB-TabsForms {
border: 1px solid $cMainLine;
border-radius: 4px;
@ -93,9 +88,3 @@
.CDB-TabsForms-button {
padding: 7px 8px;
}

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

@ -11,10 +11,6 @@
```
*/
@import '../../cdb-variables/sizes';
@import '../../cdb-variables/colors';
@import '../../cdb-utilities/helpers';
.CDB-Textarea {
width: 100%;
padding: 7px 8px 6px;

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

@ -28,10 +28,6 @@
```
*/
@import '../../cdb-variables/sizes';
@import '../../cdb-variables/colors';
@import '../../cdb-utilities/mixins';
.CDB-Toggle {
position: absolute;
width: $baseSize * 4;

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

@ -145,7 +145,7 @@
<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">
@ -166,10 +166,6 @@
```
*/
@import '../cdb-utilities/mixins';
@import '../cdb-variables/sizes';
@import '../cdb-variables/colors';
.CDB-HeaderInfo {
@include display-flex();
@include align-items(flex-start);

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

@ -10,9 +10,6 @@
```
*/
@import '../cdb-variables/sizes';
@import '../cdb-variables/colors';
.CDB-ListDecoration-item {
border-bottom: 1px solid $cSecondaryLine;
@ -36,4 +33,3 @@
padding: 12px 16px;
text-align: left;
}

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

@ -12,10 +12,6 @@ This is the generic loader for widgets, maps, components, ...
```
*/
@import '../cdb-utilities/mixins';
@import '../cdb-variables/colors';
@import '../cdb-variables/sizes';
.CDB-Loader {
position: absolute;
top: 0;

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

@ -128,9 +128,6 @@
```
*/
@import '../cdb-variables/colors';
@import '../cdb-variables/sizes';
.CDB-NavMenu {
position: relative;
z-index: 2;
@ -227,6 +224,3 @@
color: $cSecondaryText;
}
}

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

@ -43,8 +43,6 @@ Description
```
*/
@import '../../cdb-variables/colors';
.CDB-Shape {
width: 16px;
height: 16px;
@ -126,6 +124,3 @@ Description
background: $cWhite;
}
}

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

@ -16,8 +16,6 @@ Description
```
*/
@import '../../cdb-variables/colors';
.CDB-Shape-Arrow {
position: relative;
width: 1px;

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

@ -55,8 +55,6 @@ Description
```
*/
@import '../../cdb-variables/colors';
.CDB-Shape-CircleItem {
width: 14px;
height: 14px;
@ -151,6 +149,3 @@ Description
background: $cHighlight;
}
}

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

@ -43,8 +43,6 @@ Description
```
*/
@import '../../cdb-variables/colors';
.CDB-Shape-close {
display: block;
position: relative;
@ -146,4 +144,3 @@ Description
background: $cError;
}
}

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

@ -43,8 +43,6 @@ Description
```
*/
@import '../../cdb-variables/colors';
.CDB-Shape-dash {
position: relative;
height: 100%;
@ -80,6 +78,3 @@ Description
background: $cWhite;
}
}

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

@ -78,9 +78,6 @@ Description
```
*/
@import '../../cdb-variables/colors';
@import '../../cdb-variables/sizes';
.CDB-Shape-Dataset {
padding-top: 1px;
&.is-small {

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

@ -12,9 +12,6 @@ You may resize and change the colors of the icons with the `glyph-`-classes. Ava
```
*/
@import '../../cdb-variables/colors';
@import '../../cdb-variables/sizes';
.CDB-Shape-dot {
display: inline-block;
width: $baseSize;

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

@ -55,8 +55,6 @@ Description
```
*/
@import '../../cdb-variables/colors';
.CDB-Shape-CircleItem {
width: 13px;
height: 13px;

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

@ -30,9 +30,6 @@ Description
```
*/
@import '../../cdb-variables/colors';
@import '../../cdb-variables/sizes';
.CDB-Shape-hamburguer {
width: $baseSize * 2;
&:hover {

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

@ -44,8 +44,6 @@ Description
```
*/
@import '../../cdb-variables/colors';
.CDB-Shape-magnify {
display: block;
position: relative;

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

@ -85,8 +85,6 @@ Description
```
*/
@import '../../cdb-variables/colors';
.CDB-Shape-rectsHandle {
position: relative;
padding: 1px 0 0;

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

@ -66,8 +66,6 @@ Description
```
*/
@import '../../cdb-variables/colors';
.CDB-Shape-paragraph {
padding-top: 3px;
text-align: left;

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

@ -102,8 +102,6 @@ Description
```
*/
@import '../../cdb-variables/colors';
.CDB-Shape-threePoints {
display: inline-block;
padding: 0 4px;

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

@ -83,8 +83,6 @@ Description
```
*/
@import '../../cdb-variables/colors';
.CDB-ArrowToogle {
position: relative;
height: 100%;

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

@ -37,8 +37,6 @@ Description
```
*/
@import '../../cdb-variables/colors';
.CDB-Shape {
width: 16px;
height: 16px;

6
src/scss/cdb-components/tags.scss
View File

@ -23,11 +23,6 @@
```
*/
@import '../cdb-utilities/mixins';
@import '../cdb-variables/sizes';
@import '../cdb-variables/colors';
.CDB-Tag {
padding: 0 3px;
border: 1px solid $cBlue;
@ -133,4 +128,3 @@
background: rgba(0, 0, 0, 0.04);
text-transform: uppercase;
}

5
src/scss/cdb-components/tooltips.scss
View File

@ -60,11 +60,6 @@
```
*/
@import '../cdb-utilities/mixins';
@import '../cdb-variables/colors';
@import '../cdb-variables/sizes';
.CDB-InfoTooltip {
display: inline-block;
position: absolute;

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

@ -19,9 +19,6 @@
```
*/
@import '../cdb-variables/sizes';
@import '../cdb-variables/colors';
.CDB-Text {
font-family: 'Open Sans';
$sFontWeight-normal: 400;
@ -74,4 +71,3 @@
.CDB-IconFont.is-disabled {
opacity: 0.24;
}

224
src/scss/cdb-icon-font.scss
View File

@ -43,673 +43,673 @@ All available icons in CartoDB.
<div class="box">
<i class="CDB-IconFont CDB-IconFont-clock Size-large"></i>
<h4 class="Text Size-small">clock</h4>
<h4 class="Text Size-small u-tSpace--m">clock</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-stats Size-large"></i>
<h4 class="Text Size-small">stats</h4>
<h4 class="Text Size-small u-tSpace--m">stats</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-heartEmpty Size-large"></i>
<h4 class="Text Size-small">heartEmpty</h4>
<h4 class="Text Size-small u-tSpace--m">heartEmpty</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-heartFill Size-large"></i>
<h4 class="Text Size-small">heartFill</h4>
<h4 class="Text Size-small u-tSpace--m">heartFill</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-alert Size-large"></i>
<h4 class="Text Size-small">alert</h4>
<h4 class="Text Size-small u-tSpace--m">alert</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-rows Size-large"></i>
<h4 class="Text Size-small">rows</h4>
<h4 class="Text Size-small u-tSpace--m">rows</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-check Size-large"></i>
<h4 class="Text Size-small">check</h4>
<h4 class="Text Size-small u-tSpace--m">check</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-dribbble Size-large"></i>
<h4 class="Text Size-small">dribbble</h4>
<h4 class="Text Size-small u-tSpace--m">dribbble</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-twitter Size-large"></i>
<h4 class="Text Size-small">twitter</h4>
<h4 class="Text Size-small u-tSpace--m">twitter</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-caretDown Size-large"></i>
<h4 class="Text Size-small">caretDown</h4>
<h4 class="Text Size-small u-tSpace--m">caretDown</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-lightbulb Size-large"></i>
<h4 class="Text Size-small">lightbulb</h4>
<h4 class="Text Size-small u-tSpace--m">lightbulb</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-explore Size-large"></i>
<h4 class="Text Size-small">explore</h4>
<h4 class="Text Size-small u-tSpace--m">explore</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-drop Size-large"></i>
<h4 class="Text Size-small">drop</h4>
<h4 class="Text Size-small u-tSpace--m">drop</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-edition Size-large"></i>
<h4 class="Text Size-small">edition</h4>
<h4 class="Text Size-small u-tSpace--m">edition</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-view Size-large"></i>
<h4 class="Text Size-small">view</h4>
<h4 class="Text Size-small u-tSpace--m">view</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-odyssey Size-large"></i>
<h4 class="Text Size-small">odyssey</h4>
<h4 class="Text Size-small u-tSpace--m">odyssey</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-settings Size-large"></i>
<h4 class="Text Size-small">settings</h4>
<h4 class="Text Size-small u-tSpace--m">settings</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-downloadCircle Size-large"></i>
<h4 class="Text Size-small">downloadCircle</h4>
<h4 class="Text Size-small u-tSpace--m">downloadCircle</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-pencilMenu Size-large"></i>
<h4 class="Text Size-small">pencilMenu</h4>
<h4 class="Text Size-small u-tSpace--m">pencilMenu</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-mobile Size-large"></i>
<h4 class="Text Size-small">mobile</h4>
<h4 class="Text Size-small u-tSpace--m">mobile</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-wizard Size-large"></i>
<h4 class="Text Size-small">wizard</h4>
<h4 class="Text Size-small u-tSpace--m">wizard</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-undo Size-large"></i>
<h4 class="Text Size-small">undo</h4>
<h4 class="Text Size-small u-tSpace--m">undo</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-redo Size-large"></i>
<h4 class="Text Size-small">redo</h4>
<h4 class="Text Size-small u-tSpace--m">redo</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-lArrowLight Size-large"></i>
<h4 class="Text Size-small">lArrowLight</h4>
<h4 class="Text Size-small u-tSpace--m">lArrowLight</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-hide Size-large"></i>
<h4 class="Text Size-small">hide</h4>
<h4 class="Text Size-small u-tSpace--m">hide</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-info Size-large"></i>
<h4 class="Text Size-small">info</h4>
<h4 class="Text Size-small u-tSpace--m">info</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-fork Size-large"></i>
<h4 class="Text Size-small">fork</h4>
<h4 class="Text Size-small u-tSpace--m">fork</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-facebook Size-large"></i>
<h4 class="Text Size-small">facebook</h4>
<h4 class="Text Size-small u-tSpace--m">facebook</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-folder Size-large"></i>
<h4 class="Text Size-small">folder</h4>
<h4 class="Text Size-small u-tSpace--m">folder</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-dropbox Size-large"></i>
<h4 class="Text Size-small">dropbox</h4>
<h4 class="Text Size-small u-tSpace--m">dropbox</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-cloud Size-large"></i>
<h4 class="Text Size-small">cloud</h4>
<h4 class="Text Size-small u-tSpace--m">cloud</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-step Size-large"></i>
<h4 class="Text Size-small">step</h4>
<h4 class="Text Size-small u-tSpace--m">step</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-addDocument Size-large"></i>
<h4 class="Text Size-small">addDocument</h4>
<h4 class="Text Size-small u-tSpace--m">addDocument</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-arrowNext Size-large"></i>
<h4 class="Text Size-small">arrowNext</h4>
<h4 class="Text Size-small u-tSpace--m">arrowNext</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-arrowPrev Size-large"></i>
<h4 class="Text Size-small">arrowPrev</h4>
<h4 class="Text Size-small u-tSpace--m">arrowPrev</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-close Size-large"></i>
<h4 class="Text Size-small">close</h4>
<h4 class="Text Size-small u-tSpace--m">close</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-cartoFante Size-large"></i>
<h4 class="Text Size-small">cartoFante</h4>
<h4 class="Text Size-small u-tSpace--m">cartoFante</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-lock Size-large"></i>
<h4 class="Text Size-small">lock</h4>
<h4 class="Text Size-small u-tSpace--m">lock</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-cartoDB Size-large"></i>
<h4 class="Text Size-small">cartoDB</h4>
<h4 class="Text Size-small u-tSpace--m">cartoDB</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-lens Size-large"></i>
<h4 class="Text Size-small">lens</h4>
<h4 class="Text Size-small u-tSpace--m">lens</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-closeLimits Size-large"></i>
<h4 class="Text Size-small">closeLimits</h4>
<h4 class="Text Size-small u-tSpace--m">closeLimits</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-defaultUser Size-large"></i>
<h4 class="Text Size-small">defaultUser</h4>
<h4 class="Text Size-small u-tSpace--m">defaultUser</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-cockroach Size-large"></i>
<h4 class="Text Size-small">cockroach</h4>
<h4 class="Text Size-small u-tSpace--m">cockroach</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-floppy Size-large"></i>
<h4 class="Text Size-small">floppy</h4>
<h4 class="Text Size-small u-tSpace--m">floppy</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-trash Size-large"></i>
<h4 class="Text Size-small">trash</h4>
<h4 class="Text Size-small u-tSpace--m">trash</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-wifi Size-large"></i>
<h4 class="Text Size-small">wifi</h4>
<h4 class="Text Size-small u-tSpace--m">wifi</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-unlock Size-large"></i>
<h4 class="Text Size-small">unlock</h4>
<h4 class="Text Size-small u-tSpace--m">unlock</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-unlockWithEllipsis Size-large"></i>
<h4 class="Text Size-small">unlockWithEllipsis</h4>
<h4 class="Text Size-small u-tSpace--m">unlockWithEllipsis</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-gift Size-large"></i>
<h4 class="Text Size-small">gift</h4>
<h4 class="Text Size-small u-tSpace--m">gift</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-people Size-large"></i>
<h4 class="Text Size-small">people</h4>
<h4 class="Text Size-small u-tSpace--m">people</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-play Size-large"></i>
<h4 class="Text Size-small">play</h4>
<h4 class="Text Size-small u-tSpace--m">play</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-add Size-large"></i>
<h4 class="Text Size-small">add</h4>
<h4 class="Text Size-small u-tSpace--m">add</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-map Size-large"></i>
<h4 class="Text Size-small">map</h4>
<h4 class="Text Size-small u-tSpace--m">map</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-anchor Size-large"></i>
<h4 class="Text Size-small">anchor</h4>
<h4 class="Text Size-small u-tSpace--m">anchor</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-key Size-large"></i>
<h4 class="Text Size-small">key</h4>
<h4 class="Text Size-small u-tSpace--m">key</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-calendar Size-large"></i>
<h4 class="Text Size-small">calendar</h4>
<h4 class="Text Size-small u-tSpace--m">calendar</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-document Size-large"></i>
<h4 class="Text Size-small">document</h4>
<h4 class="Text Size-small u-tSpace--m">document</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-eye Size-large"></i>
<h4 class="Text Size-small">eye</h4>
<h4 class="Text Size-small u-tSpace--m">eye</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-marker Size-large"></i>
<h4 class="Text Size-small">marker</h4>
<h4 class="Text Size-small u-tSpace--m">marker</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-progressBar Size-large"></i>
<h4 class="Text Size-small">progressBar</h4>
<h4 class="Text Size-small u-tSpace--m">progressBar</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-book Size-large"></i>
<h4 class="Text Size-small">book</h4>
<h4 class="Text Size-small u-tSpace--m">book</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-notes Size-large"></i>
<h4 class="Text Size-small">notes</h4>
<h4 class="Text Size-small u-tSpace--m">notes</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-rectangles Size-large"></i>
<h4 class="Text Size-small">rectangles</h4>
<h4 class="Text Size-small u-tSpace--m">rectangles</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-mountain Size-large"></i>
<h4 class="Text Size-small">mountain</h4>
<h4 class="Text Size-small u-tSpace--m">mountain</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-points Size-large"></i>
<h4 class="Text Size-small">points</h4>
<h4 class="Text Size-small u-tSpace--m">points</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-snake Size-large"></i>
<h4 class="Text Size-small">snake</h4>
<h4 class="Text Size-small u-tSpace--m">snake</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-boss Size-large"></i>
<h4 class="Text Size-small">boss</h4>
<h4 class="Text Size-small u-tSpace--m">boss</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-rocket Size-large"></i>
<h4 class="Text Size-small">rocket</h4>
<h4 class="Text Size-small u-tSpace--m">rocket</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-barometer Size-large"></i>
<h4 class="Text Size-small">barometer</h4>
<h4 class="Text Size-small u-tSpace--m">barometer</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-dollar Size-large"></i>
<h4 class="Text Size-small">dollar</h4>
<h4 class="Text Size-small u-tSpace--m">dollar</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-email Size-large"></i>
<h4 class="Text Size-small">email</h4>
<h4 class="Text Size-small u-tSpace--m">email</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-label Size-large"></i>
<h4 class="Text Size-small">label</h4>
<h4 class="Text Size-small u-tSpace--m">label</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-outside Size-large"></i>
<h4 class="Text Size-small">outside</h4>
<h4 class="Text Size-small u-tSpace--m">outside</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-jigsaw Size-large"></i>
<h4 class="Text Size-small">jigsaw</h4>
<h4 class="Text Size-small u-tSpace--m">jigsaw</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-tools Size-large"></i>
<h4 class="Text Size-small">tools</h4>
<h4 class="Text Size-small u-tSpace--m">tools</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-question Size-large"></i>
<h4 class="Text Size-small">question</h4>
<h4 class="Text Size-small u-tSpace--m">question</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-layerStack Size-large"></i>
<h4 class="Text Size-small">layerStack</h4>
<h4 class="Text Size-small u-tSpace--m">layerStack</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-alarm Size-large"></i>
<h4 class="Text Size-small">alarm</h4>
<h4 class="Text Size-small u-tSpace--m">alarm</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-cloudDownArrow Size-large"></i>
<h4 class="Text Size-small">cloudDownArrow</h4>
<h4 class="Text Size-small u-tSpace--m">cloudDownArrow</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-pencil Size-large"></i>
<h4 class="Text Size-small">pencil</h4>
<h4 class="Text Size-small u-tSpace--m">pencil</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-fountainPen Size-large"></i>
<h4 class="Text Size-small">fountainPen</h4>
<h4 class="Text Size-small u-tSpace--m">fountainPen</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-emptyDoc Size-large"></i>
<h4 class="Text Size-small">emptyDoc</h4>
<h4 class="Text Size-small u-tSpace--m">emptyDoc</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-mergeArrow Size-large"></i>
<h4 class="Text Size-small">mergeArrow</h4>
<h4 class="Text Size-small u-tSpace--m">mergeArrow</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-mergeColumns Size-large"></i>
<h4 class="Text Size-small">mergeColumns</h4>
<h4 class="Text Size-small u-tSpace--m">mergeColumns</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-mergeSpatial Size-large"></i>
<h4 class="Text Size-small">mergeSpatial</h4>
<h4 class="Text Size-small u-tSpace--m">mergeSpatial</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-globe Size-large"></i>
<h4 class="Text Size-small">globe</h4>
<h4 class="Text Size-small u-tSpace--m">globe</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-chevronDown Size-large"></i>
<h4 class="Text Size-small">chevronDown</h4>
<h4 class="Text Size-small u-tSpace--m">chevronDown</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-streets Size-large"></i>
<h4 class="Text Size-small">streets</h4>
<h4 class="Text Size-small u-tSpace--m">streets</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-keys Size-large"></i>
<h4 class="Text Size-small">keys</h4>
<h4 class="Text Size-small u-tSpace--m">keys</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-facebookSquare Size-large"></i>
<h4 class="Text Size-small">facebookSquare</h4>
<h4 class="Text Size-small u-tSpace--m">facebookSquare</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-fullscreen Size-large"></i>
<h4 class="Text Size-small">fullscreen</h4>
<h4 class="Text Size-small u-tSpace--m">fullscreen</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-rArrowLight Size-large"></i>
<h4 class="Text Size-small">rArrowLight</h4>
<h4 class="Text Size-small u-tSpace--m">rArrowLight</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-share Size-large"></i>
<h4 class="Text Size-small">share</h4>
<h4 class="Text Size-small u-tSpace--m">share</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-linkedin Size-large"></i>
<h4 class="Text Size-small">linkedin</h4>
<h4 class="Text Size-small u-tSpace--m">linkedin</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-calendarBlank Size-large"></i>
<h4 class="Text Size-small">calendarBlank</h4>
<h4 class="Text Size-small u-tSpace--m">calendarBlank</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-creativeCommons Size-large"></i>
<h4 class="Text Size-small">creativeCommons</h4>
<h4 class="Text Size-small u-tSpace--m">creativeCommons</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-bubble Size-large"></i>
<h4 class="Text Size-small">bubble</h4>
<h4 class="Text Size-small u-tSpace--m">bubble</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-bars Size-large"></i>
<h4 class="Text Size-small">bars</h4>
<h4 class="Text Size-small u-tSpace--m">bars</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-arrowMenuLight Size-large"></i>
<h4 class="Text Size-small">arrowMenuLight</h4>
<h4 class="Text Size-small u-tSpace--m">arrowMenuLight</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-tieFighter Size-large"></i>
<h4 class="Text Size-small">tieFighter</h4>
<h4 class="Text Size-small u-tSpace--m">tieFighter</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-ray Size-large"></i>
<h4 class="Text Size-small">ray</h4>
<h4 class="Text Size-small u-tSpace--m">ray</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-markup Size-large"></i>
<h4 class="Text Size-small">markup</h4>
<h4 class="Text Size-small u-tSpace--m">markup</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-table Size-large"></i>
<h4 class="Text Size-small">table</h4>
<h4 class="Text Size-small u-tSpace--m">table</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-airlock Size-large"></i>
<h4 class="Text Size-small">airlock</h4>
<h4 class="Text Size-small u-tSpace--m">airlock</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-pin Size-large"></i>
<h4 class="Text Size-small">pin</h4>
<h4 class="Text Size-small u-tSpace--m">pin</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-attache Size-large"></i>
<h4 class="Text Size-small">attache</h4>
<h4 class="Text Size-small u-tSpace--m">attache</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-download Size-large"></i>
<h4 class="Text Size-small">download</h4>
<h4 class="Text Size-small u-tSpace--m">download</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-group Size-large"></i>
<h4 class="Text Size-small">group</h4>
<h4 class="Text Size-small u-tSpace--m">group</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-dashboard Size-large"></i>
<h4 class="Text Size-small">dashboard</h4>
<h4 class="Text Size-small u-tSpace--m">dashboard</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-spinner Size-large"></i>
<h4 class="Text Size-small">spinner</h4>
<h4 class="Text Size-small u-tSpace--m">spinner</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-mapsearch Size-large"></i>
<h4 class="Text Size-small">mapsearch</h4>
<h4 class="Text Size-small u-tSpace--m">mapsearch</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-rArrow Size-large"></i>
<h4 class="Text Size-small">rArrow</h4>
<h4 class="Text Size-small u-tSpace--m">rArrow</h4>
</div>
```

3
src/scss/cdb-utilities/defaults.css.scss → src/scss/cdb-utilities/defaults.scss
View File

@ -1,8 +1,6 @@
// Default classes
// ----------------------------------------------
@import '../cdb-variables/colors';
body {
color: $cMainText;
}
@ -15,4 +13,3 @@ a {
a:hover {
text-decoration: underline;
}

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

@ -1,9 +1,6 @@
// Helper classes
// ----------------------------------------------
@import './mixins';
@import '../cdb-variables/colors';
/* Margins */
.u-tSpace {
margin-top: 4px;

54
src/scss/entry.scss Normal file
View File

@ -0,0 +1,54 @@
// Entry point for all CartoAssets
// ----------------------------------------------
// Variables and functions
@import 'cdb-variables/sizes';
@import 'cdb-variables/colors';
@import 'cdb-utilities/mixins';
@import 'cdb-utilities/vendor/reset';
@import 'cdb-utilities/vendor/normalize';
@import 'cdb-utilities/defaults';
@import 'cdb-utilities/fonts';
@import 'cdb-utilities/helpers';
@import 'cdb-components/forms/checkbox';
@import 'cdb-components/forms/dropdowns';
@import 'cdb-components/forms/inputs';
@import 'cdb-components/forms/legends';
@import 'cdb-components/forms/option-input';
@import 'cdb-components/forms/radio';
@import 'cdb-components/forms/selects';
@import 'cdb-components/forms/tabsForms';
@import 'cdb-components/forms/textarea';
@import 'cdb-components/forms/toggle';
@import 'cdb-components/shapes/add';
@import 'cdb-components/shapes/arrow';
@import 'cdb-components/shapes/check-circle';
@import 'cdb-components/shapes/close';
@import 'cdb-components/shapes/dash';
@import 'cdb-components/shapes/dataset';
@import 'cdb-components/shapes/dots';
@import 'cdb-components/shapes/error-circle';
@import 'cdb-components/shapes/hamburguer';
@import 'cdb-components/shapes/magnify';
@import 'cdb-components/shapes/move';
@import 'cdb-components/shapes/paragraph';
@import 'cdb-components/shapes/threePoints';
@import 'cdb-components/shapes/toogle-arrow';
@import 'cdb-components/shapes/type';
@import 'cdb-components/avatars';
@import 'cdb-components/boxes';
@import 'cdb-components/buttons';
@import 'cdb-components/colors';
@import 'cdb-components/headers';
@import 'cdb-components/lists';
@import 'cdb-components/loader';
@import 'cdb-components/menu';
@import 'cdb-components/tags';
@import 'cdb-components/tooltips';
@import 'cdb-components/typography';
@import 'cdb-icon-font';

13
styleguide/_template.html
View File

@ -1,8 +1,14 @@
<head>
<link href='../css/cartostyles.css' type='text/css' rel='stylesheet'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<style>
.box {
display: inline-block;
width: 100px;
height: 100px;
text-align: center;
}
</style>
</head>
{{> theme}}
@ -124,6 +130,3 @@
</div>
{{/each}}
</div>

2
tasks/sass.js
View File

@ -7,7 +7,7 @@ module.exports = {
files: [{
expand: true,
src: [
'src/scss/**/*.scss'
'src/scss/entry.scss'
],
dest: '.tmp',
ext: '.css'