From 007b85196247db1075d5fa99d1080ba216a8035e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Javier=20=C3=81lvarez=20Medina?= Date: Tue, 23 May 2017 17:54:22 +0200 Subject: [PATCH 1/8] Chaning way to load cartoassets stylesheets --- icon-font/template.jst.ejs | 2 +- package.json | 2 +- src/fonts/cartoIcon.eot | Bin 20864 -> 20864 bytes src/fonts/cartoIcon.ttf | Bin 20692 -> 20692 bytes src/fonts/cartoIcon.woff | Bin 13020 -> 13020 bytes src/scss/cdb-components/avatars.scss | 3 - src/scss/cdb-components/boxes.scss | 4 - src/scss/cdb-components/buttons.scss | 5 - src/scss/cdb-components/colors.scss | 7 +- src/scss/cdb-components/forms/checkbox.scss | 6 - src/scss/cdb-components/forms/dropdowns.scss | 4 - src/scss/cdb-components/forms/inputs.scss | 4 - src/scss/cdb-components/forms/legends.scss | 4 - .../cdb-components/forms/option-input.scss | 4 - src/scss/cdb-components/forms/radio.scss | 9 - src/scss/cdb-components/forms/selects.scss | 4 - src/scss/cdb-components/forms/tabsForms.scss | 11 - src/scss/cdb-components/forms/textarea.scss | 4 - src/scss/cdb-components/forms/toggle.scss | 4 - src/scss/cdb-components/headers.scss | 6 +- src/scss/cdb-components/lists.scss | 4 - src/scss/cdb-components/loader.scss | 4 - src/scss/cdb-components/menu.scss | 6 - src/scss/cdb-components/shapes/add.scss | 5 - src/scss/cdb-components/shapes/arrow.scss | 2 - .../cdb-components/shapes/check-circle.scss | 5 - src/scss/cdb-components/shapes/close.scss | 3 - src/scss/cdb-components/shapes/dash.scss | 5 - src/scss/cdb-components/shapes/dataset.scss | 3 - src/scss/cdb-components/shapes/dots.scss | 3 - .../cdb-components/shapes/error-circle.scss | 2 - .../cdb-components/shapes/hamburguer.scss | 3 - src/scss/cdb-components/shapes/magnify.scss | 2 - src/scss/cdb-components/shapes/move.scss | 2 - src/scss/cdb-components/shapes/paragraph.scss | 2 - .../cdb-components/shapes/threePoints.scss | 2 - .../cdb-components/shapes/toogle-arrow.scss | 2 - src/scss/cdb-components/shapes/type.scss | 2 - src/scss/cdb-components/tags.scss | 6 - src/scss/cdb-components/tooltips.scss | 5 - src/scss/cdb-components/typography.scss | 4 - src/scss/cdb-icon-font.scss | 224 +++++++++--------- .../{defaults.css.scss => defaults.scss} | 3 - src/scss/cdb-utilities/helpers.scss | 3 - src/scss/entry.scss | 54 +++++ styleguide/_template.html | 13 +- tasks/sass.js | 2 +- 47 files changed, 179 insertions(+), 275 deletions(-) rename src/scss/cdb-utilities/{defaults.css.scss => defaults.scss} (83%) create mode 100644 src/scss/entry.scss diff --git a/icon-font/template.jst.ejs b/icon-font/template.jst.ejs index 3552596..452bb08 100644 --- a/icon-font/template.jst.ejs +++ b/icon-font/template.jst.ejs @@ -43,7 +43,7 @@ All available icons in CartoDB. <% var name = glyph.fileName.split("_")[2].toCamelCase(); %>
-

<%= name %>

+

<%= name %>

<% }); %> ``` diff --git a/package.json b/package.json index 3cd00cf..a6c7113 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/src/fonts/cartoIcon.eot b/src/fonts/cartoIcon.eot index 961558455f8ed87a12900e7f5ae63e1ccd937e53..23f6877f9d64f66681bb1af4f1d9ac6b28e4e196 100644 GIT binary patch delta 55 zcmZoz%-FD)ae@u=%&D^`+OK17DlVD$VXE}3sWapGZN4&aGyY-#f~#JVt}uG@0>%ga E09RcTU8YLUnmRL{-{va=H{&k`Ah_x!=?bGaetF;z0IL@e>Hq)$ delta 47 wcmcbzknzew#tDwhL8&_?x=fY+wNWsh-{va=H{&k`Ah>EIln$deetF;z0IJCl>Hq)$ diff --git a/src/fonts/cartoIcon.woff b/src/fonts/cartoIcon.woff index 4e31ea41e6af060e7668a34c952daf17391caba0..1e22f2658f9ad2c8eb836d139cce0f50827ede9c 100644 GIT binary patch delta 60 zcmV-C0K@;>W!z{uTbg_KWDkzx|f${t{Um3U=e*r}pu6jwj!ss{U|G#rZF#Z8@ SIT)Bgq5wq*3?j33D`p2W!z_{qxUqcFDkz`DC*%2TzA|t#{sM|HTs0C(htY4!|9|I-VEhB* SaxgG~L;-Hl4I8s|D`p3a&KutV diff --git a/src/scss/cdb-components/avatars.scss b/src/scss/cdb-components/avatars.scss index b661414..b6d6558 100644 --- a/src/scss/cdb-components/avatars.scss +++ b/src/scss/cdb-components/avatars.scss @@ -22,9 +22,6 @@ ``` */ -@import '../cdb-variables/sizes'; -@import '../cdb-variables/colors'; - .CDB-AvatarList { padding-left: 12px; } diff --git a/src/scss/cdb-components/boxes.scss b/src/scss/cdb-components/boxes.scss index d32fd51..fbdcd66 100644 --- a/src/scss/cdb-components/boxes.scss +++ b/src/scss/cdb-components/boxes.scss @@ -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; diff --git a/src/scss/cdb-components/buttons.scss b/src/scss/cdb-components/buttons.scss index 3184375..6f42f51 100644 --- a/src/scss/cdb-components/buttons.scss +++ b/src/scss/cdb-components/buttons.scss @@ -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; diff --git a/src/scss/cdb-components/colors.scss b/src/scss/cdb-components/colors.scss index 87fb7b7..98cb077 100644 --- a/src/scss/cdb-components/colors.scss +++ b/src/scss/cdb-components/colors.scss @@ -12,12 +12,9 @@
-``` +``` */ -@import '../cdb-variables/colors'; - - .Color-Blue { background: $cBlue; } @@ -125,5 +122,3 @@ .Color-Error { background: $cError; } - - diff --git a/src/scss/cdb-components/forms/checkbox.scss b/src/scss/cdb-components/forms/checkbox.scss index 2890cf8..be8ee9b 100644 --- a/src/scss/cdb-components/forms/checkbox.scss +++ b/src/scss/cdb-components/forms/checkbox.scss @@ -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; } } - diff --git a/src/scss/cdb-components/forms/dropdowns.scss b/src/scss/cdb-components/forms/dropdowns.scss index 5258392..bef1bf3 100644 --- a/src/scss/cdb-components/forms/dropdowns.scss +++ b/src/scss/cdb-components/forms/dropdowns.scss @@ -109,10 +109,6 @@ ``` */ -@import '../../cdb-utilities/mixins'; -@import '../../cdb-variables/sizes'; -@import '../../cdb-variables/colors'; - .CDB-DropdownContainer { position: relative; height: 250px; diff --git a/src/scss/cdb-components/forms/inputs.scss b/src/scss/cdb-components/forms/inputs.scss index 02a1032..77d023f 100644 --- a/src/scss/cdb-components/forms/inputs.scss +++ b/src/scss/cdb-components/forms/inputs.scss @@ -11,10 +11,6 @@ ``` */ -@import '../../cdb-variables/sizes'; -@import '../../cdb-variables/colors'; -@import '../../cdb-utilities/helpers'; - .CDB-InputText { width: 100%; min-height: 32px; diff --git a/src/scss/cdb-components/forms/legends.scss b/src/scss/cdb-components/forms/legends.scss index 34259cb..50d3c23 100644 --- a/src/scss/cdb-components/forms/legends.scss +++ b/src/scss/cdb-components/forms/legends.scss @@ -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%; } - diff --git a/src/scss/cdb-components/forms/option-input.scss b/src/scss/cdb-components/forms/option-input.scss index 9383ff7..ff4987e 100644 --- a/src/scss/cdb-components/forms/option-input.scss +++ b/src/scss/cdb-components/forms/option-input.scss @@ -98,10 +98,6 @@ ``` */ -@import '../../cdb-variables/sizes'; -@import '../../cdb-variables/colors'; -@import '../../cdb-utilities/mixins'; - .CDB-OptionInput { width: 100%; height: $baseSize * 4; diff --git a/src/scss/cdb-components/forms/radio.scss b/src/scss/cdb-components/forms/radio.scss index 2ada046..aed6dca 100644 --- a/src/scss/cdb-components/forms/radio.scss +++ b/src/scss/cdb-components/forms/radio.scss @@ -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; } } - - - - diff --git a/src/scss/cdb-components/forms/selects.scss b/src/scss/cdb-components/forms/selects.scss index f388874..3a69340 100644 --- a/src/scss/cdb-components/forms/selects.scss +++ b/src/scss/cdb-components/forms/selects.scss @@ -55,10 +55,6 @@ ``` */ -@import '../../cdb-variables/sizes'; -@import '../../cdb-variables/colors'; -@import '../../cdb-utilities/helpers'; - .CDB-Select { position: relative; } diff --git a/src/scss/cdb-components/forms/tabsForms.scss b/src/scss/cdb-components/forms/tabsForms.scss index d0b5f34..b1655ba 100644 --- a/src/scss/cdb-components/forms/tabsForms.scss +++ b/src/scss/cdb-components/forms/tabsForms.scss @@ -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; } - - - - - - diff --git a/src/scss/cdb-components/forms/textarea.scss b/src/scss/cdb-components/forms/textarea.scss index 13c6c96..e6ace99 100644 --- a/src/scss/cdb-components/forms/textarea.scss +++ b/src/scss/cdb-components/forms/textarea.scss @@ -11,10 +11,6 @@ ``` */ -@import '../../cdb-variables/sizes'; -@import '../../cdb-variables/colors'; -@import '../../cdb-utilities/helpers'; - .CDB-Textarea { width: 100%; padding: 7px 8px 6px; diff --git a/src/scss/cdb-components/forms/toggle.scss b/src/scss/cdb-components/forms/toggle.scss index c41ac45..5947e5d 100644 --- a/src/scss/cdb-components/forms/toggle.scss +++ b/src/scss/cdb-components/forms/toggle.scss @@ -28,10 +28,6 @@ ``` */ -@import '../../cdb-variables/sizes'; -@import '../../cdb-variables/colors'; -@import '../../cdb-utilities/mixins'; - .CDB-Toggle { position: absolute; width: $baseSize * 4; diff --git a/src/scss/cdb-components/headers.scss b/src/scss/cdb-components/headers.scss index 497bcd7..2f89782 100644 --- a/src/scss/cdb-components/headers.scss +++ b/src/scss/cdb-components/headers.scss @@ -145,7 +145,7 @@

Type

- +
@@ -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); diff --git a/src/scss/cdb-components/lists.scss b/src/scss/cdb-components/lists.scss index 57b2a9c..3c016b6 100644 --- a/src/scss/cdb-components/lists.scss +++ b/src/scss/cdb-components/lists.scss @@ -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; } - diff --git a/src/scss/cdb-components/loader.scss b/src/scss/cdb-components/loader.scss index a1c2a5c..2890efd 100644 --- a/src/scss/cdb-components/loader.scss +++ b/src/scss/cdb-components/loader.scss @@ -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; diff --git a/src/scss/cdb-components/menu.scss b/src/scss/cdb-components/menu.scss index 4e6787d..0759605 100644 --- a/src/scss/cdb-components/menu.scss +++ b/src/scss/cdb-components/menu.scss @@ -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; } } - - - diff --git a/src/scss/cdb-components/shapes/add.scss b/src/scss/cdb-components/shapes/add.scss index 6fa4b2b..2860a56 100644 --- a/src/scss/cdb-components/shapes/add.scss +++ b/src/scss/cdb-components/shapes/add.scss @@ -43,8 +43,6 @@ Description ``` */ -@import '../../cdb-variables/colors'; - .CDB-Shape { width: 16px; height: 16px; @@ -126,6 +124,3 @@ Description background: $cWhite; } } - - - diff --git a/src/scss/cdb-components/shapes/arrow.scss b/src/scss/cdb-components/shapes/arrow.scss index 295cd40..2f5cc7d 100644 --- a/src/scss/cdb-components/shapes/arrow.scss +++ b/src/scss/cdb-components/shapes/arrow.scss @@ -16,8 +16,6 @@ Description ``` */ -@import '../../cdb-variables/colors'; - .CDB-Shape-Arrow { position: relative; width: 1px; diff --git a/src/scss/cdb-components/shapes/check-circle.scss b/src/scss/cdb-components/shapes/check-circle.scss index cf2b1f1..42323d8 100644 --- a/src/scss/cdb-components/shapes/check-circle.scss +++ b/src/scss/cdb-components/shapes/check-circle.scss @@ -55,8 +55,6 @@ Description ``` */ -@import '../../cdb-variables/colors'; - .CDB-Shape-CircleItem { width: 14px; height: 14px; @@ -151,6 +149,3 @@ Description background: $cHighlight; } } - - - diff --git a/src/scss/cdb-components/shapes/close.scss b/src/scss/cdb-components/shapes/close.scss index 473f7dc..5ecde8e 100644 --- a/src/scss/cdb-components/shapes/close.scss +++ b/src/scss/cdb-components/shapes/close.scss @@ -43,8 +43,6 @@ Description ``` */ -@import '../../cdb-variables/colors'; - .CDB-Shape-close { display: block; position: relative; @@ -146,4 +144,3 @@ Description background: $cError; } } - diff --git a/src/scss/cdb-components/shapes/dash.scss b/src/scss/cdb-components/shapes/dash.scss index 8c3bdeb..84c32f1 100644 --- a/src/scss/cdb-components/shapes/dash.scss +++ b/src/scss/cdb-components/shapes/dash.scss @@ -43,8 +43,6 @@ Description ``` */ -@import '../../cdb-variables/colors'; - .CDB-Shape-dash { position: relative; height: 100%; @@ -80,6 +78,3 @@ Description background: $cWhite; } } - - - diff --git a/src/scss/cdb-components/shapes/dataset.scss b/src/scss/cdb-components/shapes/dataset.scss index 71930a1..4635801 100644 --- a/src/scss/cdb-components/shapes/dataset.scss +++ b/src/scss/cdb-components/shapes/dataset.scss @@ -78,9 +78,6 @@ Description ``` */ -@import '../../cdb-variables/colors'; -@import '../../cdb-variables/sizes'; - .CDB-Shape-Dataset { padding-top: 1px; &.is-small { diff --git a/src/scss/cdb-components/shapes/dots.scss b/src/scss/cdb-components/shapes/dots.scss index 54e61b7..f082276 100644 --- a/src/scss/cdb-components/shapes/dots.scss +++ b/src/scss/cdb-components/shapes/dots.scss @@ -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; diff --git a/src/scss/cdb-components/shapes/error-circle.scss b/src/scss/cdb-components/shapes/error-circle.scss index 010a296..12cc8eb 100644 --- a/src/scss/cdb-components/shapes/error-circle.scss +++ b/src/scss/cdb-components/shapes/error-circle.scss @@ -55,8 +55,6 @@ Description ``` */ -@import '../../cdb-variables/colors'; - .CDB-Shape-CircleItem { width: 13px; height: 13px; diff --git a/src/scss/cdb-components/shapes/hamburguer.scss b/src/scss/cdb-components/shapes/hamburguer.scss index d5d2bc4..c1aeaf5 100644 --- a/src/scss/cdb-components/shapes/hamburguer.scss +++ b/src/scss/cdb-components/shapes/hamburguer.scss @@ -30,9 +30,6 @@ Description ``` */ -@import '../../cdb-variables/colors'; -@import '../../cdb-variables/sizes'; - .CDB-Shape-hamburguer { width: $baseSize * 2; &:hover { diff --git a/src/scss/cdb-components/shapes/magnify.scss b/src/scss/cdb-components/shapes/magnify.scss index abac5b5..1c3466d 100644 --- a/src/scss/cdb-components/shapes/magnify.scss +++ b/src/scss/cdb-components/shapes/magnify.scss @@ -44,8 +44,6 @@ Description ``` */ -@import '../../cdb-variables/colors'; - .CDB-Shape-magnify { display: block; position: relative; diff --git a/src/scss/cdb-components/shapes/move.scss b/src/scss/cdb-components/shapes/move.scss index 622ad77..792c34b 100644 --- a/src/scss/cdb-components/shapes/move.scss +++ b/src/scss/cdb-components/shapes/move.scss @@ -85,8 +85,6 @@ Description ``` */ -@import '../../cdb-variables/colors'; - .CDB-Shape-rectsHandle { position: relative; padding: 1px 0 0; diff --git a/src/scss/cdb-components/shapes/paragraph.scss b/src/scss/cdb-components/shapes/paragraph.scss index 9c9517b..36b736c 100644 --- a/src/scss/cdb-components/shapes/paragraph.scss +++ b/src/scss/cdb-components/shapes/paragraph.scss @@ -66,8 +66,6 @@ Description ``` */ -@import '../../cdb-variables/colors'; - .CDB-Shape-paragraph { padding-top: 3px; text-align: left; diff --git a/src/scss/cdb-components/shapes/threePoints.scss b/src/scss/cdb-components/shapes/threePoints.scss index effdd59..b15dad5 100644 --- a/src/scss/cdb-components/shapes/threePoints.scss +++ b/src/scss/cdb-components/shapes/threePoints.scss @@ -102,8 +102,6 @@ Description ``` */ -@import '../../cdb-variables/colors'; - .CDB-Shape-threePoints { display: inline-block; padding: 0 4px; diff --git a/src/scss/cdb-components/shapes/toogle-arrow.scss b/src/scss/cdb-components/shapes/toogle-arrow.scss index 90381da..240ea7a 100644 --- a/src/scss/cdb-components/shapes/toogle-arrow.scss +++ b/src/scss/cdb-components/shapes/toogle-arrow.scss @@ -83,8 +83,6 @@ Description ``` */ -@import '../../cdb-variables/colors'; - .CDB-ArrowToogle { position: relative; height: 100%; diff --git a/src/scss/cdb-components/shapes/type.scss b/src/scss/cdb-components/shapes/type.scss index 1a6decc..a8aed38 100644 --- a/src/scss/cdb-components/shapes/type.scss +++ b/src/scss/cdb-components/shapes/type.scss @@ -37,8 +37,6 @@ Description ``` */ -@import '../../cdb-variables/colors'; - .CDB-Shape { width: 16px; height: 16px; diff --git a/src/scss/cdb-components/tags.scss b/src/scss/cdb-components/tags.scss index c8a74ee..9ba0c5b 100644 --- a/src/scss/cdb-components/tags.scss +++ b/src/scss/cdb-components/tags.scss @@ -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; } - diff --git a/src/scss/cdb-components/tooltips.scss b/src/scss/cdb-components/tooltips.scss index 49cd210..f90333d 100644 --- a/src/scss/cdb-components/tooltips.scss +++ b/src/scss/cdb-components/tooltips.scss @@ -60,11 +60,6 @@ ``` */ -@import '../cdb-utilities/mixins'; -@import '../cdb-variables/colors'; -@import '../cdb-variables/sizes'; - - .CDB-InfoTooltip { display: inline-block; position: absolute; diff --git a/src/scss/cdb-components/typography.scss b/src/scss/cdb-components/typography.scss index 1487433..2726ca0 100644 --- a/src/scss/cdb-components/typography.scss +++ b/src/scss/cdb-components/typography.scss @@ -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; } - diff --git a/src/scss/cdb-icon-font.scss b/src/scss/cdb-icon-font.scss index f417fee..d22047d 100644 --- a/src/scss/cdb-icon-font.scss +++ b/src/scss/cdb-icon-font.scss @@ -43,673 +43,673 @@ All available icons in CartoDB.
-

clock

+

clock

-

stats

+

stats

-

heartEmpty

+

heartEmpty

-

heartFill

+

heartFill

-

alert

+

alert

-

rows

+

rows

-

check

+

check

-

dribbble

+

dribbble

-

twitter

+

twitter

-

caretDown

+

caretDown

-

lightbulb

+

lightbulb

-

explore

+

explore

-

drop

+

drop

-

edition

+

edition

-

view

+

view

-

odyssey

+

odyssey

-

settings

+

settings

-

downloadCircle

+

downloadCircle

-

pencilMenu

+

pencilMenu

-

mobile

+

mobile

-

wizard

+

wizard

-

undo

+

undo

-

redo

+

redo

-

lArrowLight

+

lArrowLight

-

hide

+

hide

-

info

+

info

-

fork

+

fork

-

facebook

+

facebook

-

folder

+

folder

-

dropbox

+

dropbox

-

cloud

+

cloud

-

step

+

step

-

addDocument

+

addDocument

-

arrowNext

+

arrowNext

-

arrowPrev

+

arrowPrev

-

close

+

close

-

cartoFante

+

cartoFante

-

lock

+

lock

-

cartoDB

+

cartoDB

-

lens

+

lens

-

closeLimits

+

closeLimits

-

defaultUser

+

defaultUser

-

cockroach

+

cockroach

-

floppy

+

floppy

-

trash

+

trash

-

wifi

+

wifi

-

unlock

+

unlock

-

unlockWithEllipsis

+

unlockWithEllipsis

-

gift

+

gift

-

people

+

people

-

play

+

play

-

add

+

add

-

map

+

map

-

anchor

+

anchor

-

key

+

key

-

calendar

+

calendar

-

document

+

document

-

eye

+

eye

-

marker

+

marker

-

progressBar

+

progressBar

-

book

+

book

-

notes

+

notes

-

rectangles

+

rectangles

-

mountain

+

mountain

-

points

+

points

-

snake

+

snake

-

boss

+

boss

-

rocket

+

rocket

-

barometer

+

barometer

-

dollar

+

dollar

-

email

+

email

-

label

+

label

-

outside

+

outside

-

jigsaw

+

jigsaw

-

tools

+

tools

-

question

+

question

-

layerStack

+

layerStack

-

alarm

+

alarm

-

cloudDownArrow

+

cloudDownArrow

-

pencil

+

pencil

-

fountainPen

+

fountainPen

-

emptyDoc

+

emptyDoc

-

mergeArrow

+

mergeArrow

-

mergeColumns

+

mergeColumns

-

mergeSpatial

+

mergeSpatial

-

globe

+

globe

-

chevronDown

+

chevronDown

-

streets

+

streets

-

keys

+

keys

-

facebookSquare

+

facebookSquare

-

fullscreen

+

fullscreen

-

rArrowLight

+

rArrowLight

-

share

+

share

-

linkedin

+

linkedin

-

calendarBlank

+

calendarBlank

-

creativeCommons

+

creativeCommons

-

bubble

+

bubble

-

bars

+

bars

-

arrowMenuLight

+

arrowMenuLight

-

tieFighter

+

tieFighter

-

ray

+

ray

-

markup

+

markup

-

table

+

table

-

airlock

+

airlock

-

pin

+

pin

-

attache

+

attache

-

download

+

download

-

group

+

group

-

dashboard

+

dashboard

-

spinner

+

spinner

-

mapsearch

+

mapsearch

-

rArrow

+

rArrow

``` diff --git a/src/scss/cdb-utilities/defaults.css.scss b/src/scss/cdb-utilities/defaults.scss similarity index 83% rename from src/scss/cdb-utilities/defaults.css.scss rename to src/scss/cdb-utilities/defaults.scss index aaabb14..cf0f99d 100644 --- a/src/scss/cdb-utilities/defaults.css.scss +++ b/src/scss/cdb-utilities/defaults.scss @@ -1,8 +1,6 @@ // Default classes // ---------------------------------------------- -@import '../cdb-variables/colors'; - body { color: $cMainText; } @@ -15,4 +13,3 @@ a { a:hover { text-decoration: underline; } - diff --git a/src/scss/cdb-utilities/helpers.scss b/src/scss/cdb-utilities/helpers.scss index c8d83d6..e4d90b3 100644 --- a/src/scss/cdb-utilities/helpers.scss +++ b/src/scss/cdb-utilities/helpers.scss @@ -1,9 +1,6 @@ // Helper classes // ---------------------------------------------- -@import './mixins'; -@import '../cdb-variables/colors'; - /* Margins */ .u-tSpace { margin-top: 4px; diff --git a/src/scss/entry.scss b/src/scss/entry.scss new file mode 100644 index 0000000..cae3365 --- /dev/null +++ b/src/scss/entry.scss @@ -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'; diff --git a/styleguide/_template.html b/styleguide/_template.html index ff15055..d28c814 100644 --- a/styleguide/_template.html +++ b/styleguide/_template.html @@ -1,8 +1,14 @@ - - + {{> theme}} @@ -124,6 +130,3 @@
{{/each}}
- - - diff --git a/tasks/sass.js b/tasks/sass.js index a6c6152..8f8f168 100644 --- a/tasks/sass.js +++ b/tasks/sass.js @@ -7,7 +7,7 @@ module.exports = { files: [{ expand: true, src: [ - 'src/scss/**/*.scss' + 'src/scss/entry.scss' ], dest: '.tmp', ext: '.css' From a41763c4f2ffd9eb74282c19b7b78e869eaf08b0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Javier=20=C3=81lvarez=20Medina?= Date: Wed, 24 May 2017 12:50:42 +0200 Subject: [PATCH 2/8] Renaming all files to _whatever in order to avoid be compiled in other projects, only the entry one, thanks to @nobuti --- Gulpfile.js | 2 +- src/fonts/cartoIcon.eot | Bin 20864 -> 20864 bytes src/fonts/cartoIcon.ttf | Bin 20692 -> 20692 bytes src/fonts/cartoIcon.woff | Bin 13020 -> 13020 bytes ...cdb-icon-font.scss => _cdb-icon-font.scss} | 0 .../{avatars.scss => _avatars.scss} | 0 .../{boxes.scss => _boxes.scss} | 0 .../{buttons.scss => _buttons.scss} | 0 .../{colors.scss => _colors.scss} | 0 .../{headers.scss => _headers.scss} | 0 .../{lists.scss => _lists.scss} | 0 .../{loader.scss => _loader.scss} | 0 .../cdb-components/{menu.scss => _menu.scss} | 0 .../cdb-components/{tags.scss => _tags.scss} | 0 .../{tooltips.scss => _tooltips.scss} | 0 .../{typography.scss => _typography.scss} | 0 .../forms/{checkbox.scss => _checkbox.scss} | 0 .../forms/{dropdowns.scss => _dropdowns.scss} | 0 .../forms/{inputs.scss => _inputs.scss} | 0 .../forms/{legends.scss => _legends.scss} | 0 .../{option-input.scss => _option-input.scss} | 0 .../forms/{radio.scss => _radio.scss} | 0 .../forms/{selects.scss => _selects.scss} | 0 .../forms/{tabsForms.scss => _tabsForms.scss} | 0 .../forms/{textarea.scss => _textarea.scss} | 0 .../forms/{toggle.scss => _toggle.scss} | 0 .../shapes/{add.scss => _add.scss} | 0 .../shapes/{arrow.scss => _arrow.scss} | 0 .../{check-circle.scss => _check-circle.scss} | 0 .../shapes/{close.scss => _close.scss} | 0 .../shapes/{dash.scss => _dash.scss} | 0 .../shapes/{dataset.scss => _dataset.scss} | 0 .../shapes/{dots.scss => _dots.scss} | 0 .../{error-circle.scss => _error-circle.scss} | 0 .../{hamburguer.scss => _hamburguer.scss} | 0 .../shapes/{magnify.scss => _magnify.scss} | 0 .../shapes/{move.scss => _move.scss} | 0 .../{paragraph.scss => _paragraph.scss} | 0 .../{threePoints.scss => _threePoints.scss} | 0 .../{toogle-arrow.scss => _toogle-arrow.scss} | 0 .../shapes/{type.scss => _type.scss} | 0 .../{defaults.scss => _defaults.scss} | 0 .../cdb-utilities/{fonts.scss => _fonts.scss} | 0 .../{helpers.scss => _helpers.scss} | 0 .../{normalize.scss => _normalize.scss} | 0 .../vendor/{reset.scss => _reset.scss} | 0 46 files changed, 1 insertion(+), 1 deletion(-) rename src/scss/{cdb-icon-font.scss => _cdb-icon-font.scss} (100%) rename src/scss/cdb-components/{avatars.scss => _avatars.scss} (100%) rename src/scss/cdb-components/{boxes.scss => _boxes.scss} (100%) rename src/scss/cdb-components/{buttons.scss => _buttons.scss} (100%) rename src/scss/cdb-components/{colors.scss => _colors.scss} (100%) rename src/scss/cdb-components/{headers.scss => _headers.scss} (100%) rename src/scss/cdb-components/{lists.scss => _lists.scss} (100%) rename src/scss/cdb-components/{loader.scss => _loader.scss} (100%) rename src/scss/cdb-components/{menu.scss => _menu.scss} (100%) rename src/scss/cdb-components/{tags.scss => _tags.scss} (100%) rename src/scss/cdb-components/{tooltips.scss => _tooltips.scss} (100%) rename src/scss/cdb-components/{typography.scss => _typography.scss} (100%) rename src/scss/cdb-components/forms/{checkbox.scss => _checkbox.scss} (100%) rename src/scss/cdb-components/forms/{dropdowns.scss => _dropdowns.scss} (100%) rename src/scss/cdb-components/forms/{inputs.scss => _inputs.scss} (100%) rename src/scss/cdb-components/forms/{legends.scss => _legends.scss} (100%) rename src/scss/cdb-components/forms/{option-input.scss => _option-input.scss} (100%) rename src/scss/cdb-components/forms/{radio.scss => _radio.scss} (100%) rename src/scss/cdb-components/forms/{selects.scss => _selects.scss} (100%) rename src/scss/cdb-components/forms/{tabsForms.scss => _tabsForms.scss} (100%) rename src/scss/cdb-components/forms/{textarea.scss => _textarea.scss} (100%) rename src/scss/cdb-components/forms/{toggle.scss => _toggle.scss} (100%) rename src/scss/cdb-components/shapes/{add.scss => _add.scss} (100%) rename src/scss/cdb-components/shapes/{arrow.scss => _arrow.scss} (100%) rename src/scss/cdb-components/shapes/{check-circle.scss => _check-circle.scss} (100%) rename src/scss/cdb-components/shapes/{close.scss => _close.scss} (100%) rename src/scss/cdb-components/shapes/{dash.scss => _dash.scss} (100%) rename src/scss/cdb-components/shapes/{dataset.scss => _dataset.scss} (100%) rename src/scss/cdb-components/shapes/{dots.scss => _dots.scss} (100%) rename src/scss/cdb-components/shapes/{error-circle.scss => _error-circle.scss} (100%) rename src/scss/cdb-components/shapes/{hamburguer.scss => _hamburguer.scss} (100%) rename src/scss/cdb-components/shapes/{magnify.scss => _magnify.scss} (100%) rename src/scss/cdb-components/shapes/{move.scss => _move.scss} (100%) rename src/scss/cdb-components/shapes/{paragraph.scss => _paragraph.scss} (100%) rename src/scss/cdb-components/shapes/{threePoints.scss => _threePoints.scss} (100%) rename src/scss/cdb-components/shapes/{toogle-arrow.scss => _toogle-arrow.scss} (100%) rename src/scss/cdb-components/shapes/{type.scss => _type.scss} (100%) rename src/scss/cdb-utilities/{defaults.scss => _defaults.scss} (100%) rename src/scss/cdb-utilities/{fonts.scss => _fonts.scss} (100%) rename src/scss/cdb-utilities/{helpers.scss => _helpers.scss} (100%) rename src/scss/cdb-utilities/vendor/{normalize.scss => _normalize.scss} (100%) rename src/scss/cdb-utilities/vendor/{reset.scss => _reset.scss} (100%) diff --git a/Gulpfile.js b/Gulpfile.js index 5fc6b5d..1af492a 100644 --- a/Gulpfile.js +++ b/Gulpfile.js @@ -15,7 +15,7 @@ gulp.task('default', function(){ .pipe(iconfontCss({ fontName: 'cartoIcon', path: './icon-font/template.jst.ejs', - targetPath: '../scss/cdb-icon-font.scss', + targetPath: '../scss/_cdb-icon-font.scss', fontPath: '../../fonts/' })) diff --git a/src/fonts/cartoIcon.eot b/src/fonts/cartoIcon.eot index 23f6877f9d64f66681bb1af4f1d9ac6b28e4e196..a11e456ac04524a4769e70025222d108c9e65430 100644 GIT binary patch delta 55 zcmZoz%-FD)ae@uAZT7T@_Uo8iIu=d*Fjab5wrxDW%~u9)#$OCTaMfG+4vgNsfboGp E07W+xS^xk5 delta 55 zcmZoz%-FD)ae@u=%&D^`+OK17DlVD$VXE}3sWapGZN4&aGyY-#f~#JVt}uG@0>%ga E09RcTPx# delta 47 wcmcbzknzew#tDwhO~oY>U8YLUnmRL{-{va=H{&k`Ah_x!=?bGaetF;z0IL@e>Hq)$ diff --git a/src/fonts/cartoIcon.woff b/src/fonts/cartoIcon.woff index 1e22f2658f9ad2c8eb836d139cce0f50827ede9c..26924bc8027f3f4c6a0e77746d241da3ccee61e4 100644 GIT binary patch delta 67 zcmV-J0KEU)W!zE(0Clhp+p~8oWd|C9A2$F1 delta 67 zcmV-J0KEU)W!z1We1?G8Z`g_ diff --git a/src/scss/cdb-icon-font.scss b/src/scss/_cdb-icon-font.scss similarity index 100% rename from src/scss/cdb-icon-font.scss rename to src/scss/_cdb-icon-font.scss diff --git a/src/scss/cdb-components/avatars.scss b/src/scss/cdb-components/_avatars.scss similarity index 100% rename from src/scss/cdb-components/avatars.scss rename to src/scss/cdb-components/_avatars.scss diff --git a/src/scss/cdb-components/boxes.scss b/src/scss/cdb-components/_boxes.scss similarity index 100% rename from src/scss/cdb-components/boxes.scss rename to src/scss/cdb-components/_boxes.scss diff --git a/src/scss/cdb-components/buttons.scss b/src/scss/cdb-components/_buttons.scss similarity index 100% rename from src/scss/cdb-components/buttons.scss rename to src/scss/cdb-components/_buttons.scss diff --git a/src/scss/cdb-components/colors.scss b/src/scss/cdb-components/_colors.scss similarity index 100% rename from src/scss/cdb-components/colors.scss rename to src/scss/cdb-components/_colors.scss diff --git a/src/scss/cdb-components/headers.scss b/src/scss/cdb-components/_headers.scss similarity index 100% rename from src/scss/cdb-components/headers.scss rename to src/scss/cdb-components/_headers.scss diff --git a/src/scss/cdb-components/lists.scss b/src/scss/cdb-components/_lists.scss similarity index 100% rename from src/scss/cdb-components/lists.scss rename to src/scss/cdb-components/_lists.scss diff --git a/src/scss/cdb-components/loader.scss b/src/scss/cdb-components/_loader.scss similarity index 100% rename from src/scss/cdb-components/loader.scss rename to src/scss/cdb-components/_loader.scss diff --git a/src/scss/cdb-components/menu.scss b/src/scss/cdb-components/_menu.scss similarity index 100% rename from src/scss/cdb-components/menu.scss rename to src/scss/cdb-components/_menu.scss diff --git a/src/scss/cdb-components/tags.scss b/src/scss/cdb-components/_tags.scss similarity index 100% rename from src/scss/cdb-components/tags.scss rename to src/scss/cdb-components/_tags.scss diff --git a/src/scss/cdb-components/tooltips.scss b/src/scss/cdb-components/_tooltips.scss similarity index 100% rename from src/scss/cdb-components/tooltips.scss rename to src/scss/cdb-components/_tooltips.scss diff --git a/src/scss/cdb-components/typography.scss b/src/scss/cdb-components/_typography.scss similarity index 100% rename from src/scss/cdb-components/typography.scss rename to src/scss/cdb-components/_typography.scss diff --git a/src/scss/cdb-components/forms/checkbox.scss b/src/scss/cdb-components/forms/_checkbox.scss similarity index 100% rename from src/scss/cdb-components/forms/checkbox.scss rename to src/scss/cdb-components/forms/_checkbox.scss diff --git a/src/scss/cdb-components/forms/dropdowns.scss b/src/scss/cdb-components/forms/_dropdowns.scss similarity index 100% rename from src/scss/cdb-components/forms/dropdowns.scss rename to src/scss/cdb-components/forms/_dropdowns.scss diff --git a/src/scss/cdb-components/forms/inputs.scss b/src/scss/cdb-components/forms/_inputs.scss similarity index 100% rename from src/scss/cdb-components/forms/inputs.scss rename to src/scss/cdb-components/forms/_inputs.scss diff --git a/src/scss/cdb-components/forms/legends.scss b/src/scss/cdb-components/forms/_legends.scss similarity index 100% rename from src/scss/cdb-components/forms/legends.scss rename to src/scss/cdb-components/forms/_legends.scss diff --git a/src/scss/cdb-components/forms/option-input.scss b/src/scss/cdb-components/forms/_option-input.scss similarity index 100% rename from src/scss/cdb-components/forms/option-input.scss rename to src/scss/cdb-components/forms/_option-input.scss diff --git a/src/scss/cdb-components/forms/radio.scss b/src/scss/cdb-components/forms/_radio.scss similarity index 100% rename from src/scss/cdb-components/forms/radio.scss rename to src/scss/cdb-components/forms/_radio.scss diff --git a/src/scss/cdb-components/forms/selects.scss b/src/scss/cdb-components/forms/_selects.scss similarity index 100% rename from src/scss/cdb-components/forms/selects.scss rename to src/scss/cdb-components/forms/_selects.scss diff --git a/src/scss/cdb-components/forms/tabsForms.scss b/src/scss/cdb-components/forms/_tabsForms.scss similarity index 100% rename from src/scss/cdb-components/forms/tabsForms.scss rename to src/scss/cdb-components/forms/_tabsForms.scss diff --git a/src/scss/cdb-components/forms/textarea.scss b/src/scss/cdb-components/forms/_textarea.scss similarity index 100% rename from src/scss/cdb-components/forms/textarea.scss rename to src/scss/cdb-components/forms/_textarea.scss diff --git a/src/scss/cdb-components/forms/toggle.scss b/src/scss/cdb-components/forms/_toggle.scss similarity index 100% rename from src/scss/cdb-components/forms/toggle.scss rename to src/scss/cdb-components/forms/_toggle.scss diff --git a/src/scss/cdb-components/shapes/add.scss b/src/scss/cdb-components/shapes/_add.scss similarity index 100% rename from src/scss/cdb-components/shapes/add.scss rename to src/scss/cdb-components/shapes/_add.scss diff --git a/src/scss/cdb-components/shapes/arrow.scss b/src/scss/cdb-components/shapes/_arrow.scss similarity index 100% rename from src/scss/cdb-components/shapes/arrow.scss rename to src/scss/cdb-components/shapes/_arrow.scss diff --git a/src/scss/cdb-components/shapes/check-circle.scss b/src/scss/cdb-components/shapes/_check-circle.scss similarity index 100% rename from src/scss/cdb-components/shapes/check-circle.scss rename to src/scss/cdb-components/shapes/_check-circle.scss diff --git a/src/scss/cdb-components/shapes/close.scss b/src/scss/cdb-components/shapes/_close.scss similarity index 100% rename from src/scss/cdb-components/shapes/close.scss rename to src/scss/cdb-components/shapes/_close.scss diff --git a/src/scss/cdb-components/shapes/dash.scss b/src/scss/cdb-components/shapes/_dash.scss similarity index 100% rename from src/scss/cdb-components/shapes/dash.scss rename to src/scss/cdb-components/shapes/_dash.scss diff --git a/src/scss/cdb-components/shapes/dataset.scss b/src/scss/cdb-components/shapes/_dataset.scss similarity index 100% rename from src/scss/cdb-components/shapes/dataset.scss rename to src/scss/cdb-components/shapes/_dataset.scss diff --git a/src/scss/cdb-components/shapes/dots.scss b/src/scss/cdb-components/shapes/_dots.scss similarity index 100% rename from src/scss/cdb-components/shapes/dots.scss rename to src/scss/cdb-components/shapes/_dots.scss diff --git a/src/scss/cdb-components/shapes/error-circle.scss b/src/scss/cdb-components/shapes/_error-circle.scss similarity index 100% rename from src/scss/cdb-components/shapes/error-circle.scss rename to src/scss/cdb-components/shapes/_error-circle.scss diff --git a/src/scss/cdb-components/shapes/hamburguer.scss b/src/scss/cdb-components/shapes/_hamburguer.scss similarity index 100% rename from src/scss/cdb-components/shapes/hamburguer.scss rename to src/scss/cdb-components/shapes/_hamburguer.scss diff --git a/src/scss/cdb-components/shapes/magnify.scss b/src/scss/cdb-components/shapes/_magnify.scss similarity index 100% rename from src/scss/cdb-components/shapes/magnify.scss rename to src/scss/cdb-components/shapes/_magnify.scss diff --git a/src/scss/cdb-components/shapes/move.scss b/src/scss/cdb-components/shapes/_move.scss similarity index 100% rename from src/scss/cdb-components/shapes/move.scss rename to src/scss/cdb-components/shapes/_move.scss diff --git a/src/scss/cdb-components/shapes/paragraph.scss b/src/scss/cdb-components/shapes/_paragraph.scss similarity index 100% rename from src/scss/cdb-components/shapes/paragraph.scss rename to src/scss/cdb-components/shapes/_paragraph.scss diff --git a/src/scss/cdb-components/shapes/threePoints.scss b/src/scss/cdb-components/shapes/_threePoints.scss similarity index 100% rename from src/scss/cdb-components/shapes/threePoints.scss rename to src/scss/cdb-components/shapes/_threePoints.scss diff --git a/src/scss/cdb-components/shapes/toogle-arrow.scss b/src/scss/cdb-components/shapes/_toogle-arrow.scss similarity index 100% rename from src/scss/cdb-components/shapes/toogle-arrow.scss rename to src/scss/cdb-components/shapes/_toogle-arrow.scss diff --git a/src/scss/cdb-components/shapes/type.scss b/src/scss/cdb-components/shapes/_type.scss similarity index 100% rename from src/scss/cdb-components/shapes/type.scss rename to src/scss/cdb-components/shapes/_type.scss diff --git a/src/scss/cdb-utilities/defaults.scss b/src/scss/cdb-utilities/_defaults.scss similarity index 100% rename from src/scss/cdb-utilities/defaults.scss rename to src/scss/cdb-utilities/_defaults.scss diff --git a/src/scss/cdb-utilities/fonts.scss b/src/scss/cdb-utilities/_fonts.scss similarity index 100% rename from src/scss/cdb-utilities/fonts.scss rename to src/scss/cdb-utilities/_fonts.scss diff --git a/src/scss/cdb-utilities/helpers.scss b/src/scss/cdb-utilities/_helpers.scss similarity index 100% rename from src/scss/cdb-utilities/helpers.scss rename to src/scss/cdb-utilities/_helpers.scss diff --git a/src/scss/cdb-utilities/vendor/normalize.scss b/src/scss/cdb-utilities/vendor/_normalize.scss similarity index 100% rename from src/scss/cdb-utilities/vendor/normalize.scss rename to src/scss/cdb-utilities/vendor/_normalize.scss diff --git a/src/scss/cdb-utilities/vendor/reset.scss b/src/scss/cdb-utilities/vendor/_reset.scss similarity index 100% rename from src/scss/cdb-utilities/vendor/reset.scss rename to src/scss/cdb-utilities/vendor/_reset.scss From 3012203185c53f6768ed5ba53a2244c66079b7ca Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Javier=20=C3=81lvarez=20Medina?= Date: Wed, 24 May 2017 13:07:21 +0200 Subject: [PATCH 3/8] Small touches --- Gulpfile.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/Gulpfile.js b/Gulpfile.js index 1af492a..5206f7e 100644 --- a/Gulpfile.js +++ b/Gulpfile.js @@ -2,14 +2,14 @@ var gulp = require('gulp'); var iconfont = require('gulp-iconfont'); var iconfontCss = require('gulp-iconfont-css'); -String.prototype.toCamelCase = function() { - return this.replace(/^([A-Z])|\s(\w)/g, function(match, p1, p2, offset) { +String.prototype.toCamelCase = function () { + return this.replace(/^([A-Z])|\s(\w)/g, function (match, p1, p2, offset) { if (p2) return p2.toUpperCase(); return p1.toLowerCase(); }); }; -gulp.task('default', function(){ +gulp.task('default', function () { gulp.src(['./icon-font/svgs/*.svg']) .pipe(iconfontCss({ From 14d23e9b35652706f395eaecc3691482c385382f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Javier=20=C3=81lvarez=20Medina?= Date: Wed, 24 May 2017 13:17:36 +0200 Subject: [PATCH 4/8] Adding perfect-scroll styles to cartoassets --- package.json | 3 ++- src/fonts/cartoIcon.eot | Bin 20864 -> 20864 bytes src/fonts/cartoIcon.ttf | Bin 20692 -> 20692 bytes src/fonts/cartoIcon.woff | Bin 13020 -> 13020 bytes src/scss/entry.scss | 2 ++ tasks/sass.js | 5 ++++- 6 files changed, 8 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index a6c7113..cfcfd7a 100644 --- a/package.json +++ b/package.json @@ -47,7 +47,8 @@ "gulp-install": "0.2.0", "gulp-sketch": "0.0.7", "grunt-shell": "1.1.2", - "load-grunt-tasks": "*" + "load-grunt-tasks": "*", + "perfect-scrollbar": "git://github.com/CartoDB/perfect-scrollbar.git#master" }, "keywords": [ "library", diff --git a/src/fonts/cartoIcon.eot b/src/fonts/cartoIcon.eot index a11e456ac04524a4769e70025222d108c9e65430..1f632a9c08c2c153f29c44a89bc201a1d75f4ed0 100644 GIT binary patch delta 52 zcmZoz%-FD)ae@ug&cKOw8KycMt%N9m&UcmUk9{~IX B5)1$U delta 52 zcmZoz%-FD)ae@t#ZT3XF4NM)2CVrSEm2Df(Z}XLboADO|5M1?Ez5}B-FJOG&4*>GK B5~%h(E Y6~Xui$mL*Q0*L|ub+8TFvv(_H2lO8vjsO4v diff --git a/src/scss/entry.scss b/src/scss/entry.scss index cae3365..4d60242 100644 --- a/src/scss/entry.scss +++ b/src/scss/entry.scss @@ -12,6 +12,8 @@ @import 'cdb-utilities/fonts'; @import 'cdb-utilities/helpers'; +@import 'main'; // Perfect scrollbar styles + @import 'cdb-components/forms/checkbox'; @import 'cdb-components/forms/dropdowns'; @import 'cdb-components/forms/inputs'; diff --git a/tasks/sass.js b/tasks/sass.js index 8f8f168..0c24c19 100644 --- a/tasks/sass.js +++ b/tasks/sass.js @@ -2,7 +2,10 @@ module.exports = { dist: { options: { sourceMap: false, - outputStyle: 'compressed' + outputStyle: 'compressed', + includePaths: [ + 'node_modules/perfect-scrollbar/src/css' + ] }, files: [{ expand: true, From 72456d8a0c98460f12762da96c6ed1485b51ba36 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Javier=20=C3=81lvarez=20Medina?= Date: Wed, 24 May 2017 13:29:41 +0200 Subject: [PATCH 5/8] not adding finally pefect-scroll styles --- src/scss/entry.scss | 2 -- tasks/sass.js | 5 +---- 2 files changed, 1 insertion(+), 6 deletions(-) diff --git a/src/scss/entry.scss b/src/scss/entry.scss index 4d60242..cae3365 100644 --- a/src/scss/entry.scss +++ b/src/scss/entry.scss @@ -12,8 +12,6 @@ @import 'cdb-utilities/fonts'; @import 'cdb-utilities/helpers'; -@import 'main'; // Perfect scrollbar styles - @import 'cdb-components/forms/checkbox'; @import 'cdb-components/forms/dropdowns'; @import 'cdb-components/forms/inputs'; diff --git a/tasks/sass.js b/tasks/sass.js index 0c24c19..8f8f168 100644 --- a/tasks/sass.js +++ b/tasks/sass.js @@ -2,10 +2,7 @@ module.exports = { dist: { options: { sourceMap: false, - outputStyle: 'compressed', - includePaths: [ - 'node_modules/perfect-scrollbar/src/css' - ] + outputStyle: 'compressed' }, files: [{ expand: true, From d1963772b34de4659598c0720c5e9f6ad5c16651 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Javier=20=C3=81lvarez=20Medina?= Date: Wed, 24 May 2017 13:46:24 +0200 Subject: [PATCH 6/8] Removing perfect-scrollbar --- package.json | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/package.json b/package.json index cfcfd7a..a6c7113 100644 --- a/package.json +++ b/package.json @@ -47,8 +47,7 @@ "gulp-install": "0.2.0", "gulp-sketch": "0.0.7", "grunt-shell": "1.1.2", - "load-grunt-tasks": "*", - "perfect-scrollbar": "git://github.com/CartoDB/perfect-scrollbar.git#master" + "load-grunt-tasks": "*" }, "keywords": [ "library", From f4e26d6aaa420f670efee03bf950b755071f147a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Javier=20=C3=81lvarez=20Medina?= Date: Wed, 24 May 2017 14:20:45 +0200 Subject: [PATCH 7/8] Requiring perfect-scrollbar styles --- src/fonts/cartoIcon.eot | Bin 20864 -> 20864 bytes src/fonts/cartoIcon.ttf | Bin 20692 -> 20692 bytes src/fonts/cartoIcon.woff | Bin 13020 -> 13020 bytes src/scss/entry.scss | 2 ++ 4 files changed, 2 insertions(+) diff --git a/src/fonts/cartoIcon.eot b/src/fonts/cartoIcon.eot index 1f632a9c08c2c153f29c44a89bc201a1d75f4ed0..1bd1bbca5b5d45f6e0313684484d5aed9191174e 100644 GIT binary patch delta 52 zcmZoz%-FD)ae@s~qu4~d4NRLECVrSECDs_vZ}XLboADO|5M1@PKycMt%N9m&UcmUk9{~IX B5)1$U diff --git a/src/fonts/cartoIcon.ttf b/src/fonts/cartoIcon.ttf index 8b50061c8bf3adb25d09d3284e6572b153f96d33..0ec55ebb23506b4defea47089d1baad654db474c 100644 GIT binary patch delta 45 ucmcbzknzew#tBYLn;9m$Op_98jOVxc%D~O|ivb9(dRubC=#5_<_yYi8MGnyb delta 45 ucmcbzknzew#tBYLQ&T3oOp^-S8P9L?m4Tb_7XuJn_13b5(Hp-!@CN{TQxDJp diff --git a/src/fonts/cartoIcon.woff b/src/fonts/cartoIcon.woff index edff724efe8f48bf2e72b412fc0bcf518e1c5e25..0ccc97c68c8cdc08a8aa89bd0a5fe20f0f713f63 100644 GIT binary patch delta 59 zcmV-B0L1^?W!z Date: Wed, 24 May 2017 18:40:19 +0200 Subject: [PATCH 8/8] Copy all perfect-scroll stylesheets to a vendor library and then use it as convinience --- Gulpfile.js | 8 ++ package.json | 19 ++- src/fonts/cartoIcon.eot | Bin 20864 -> 20864 bytes src/fonts/cartoIcon.ttf | Bin 20692 -> 20692 bytes src/fonts/cartoIcon.woff | Bin 13020 -> 13020 bytes src/scss/entry.scss | 2 +- src/scss/vendor/perfect-scrollbar/_main.scss | 3 + .../vendor/perfect-scrollbar/_mixins.scss | 128 ++++++++++++++++++ .../vendor/perfect-scrollbar/_themes.scss | 25 ++++ .../vendor/perfect-scrollbar/_variables.scss | 24 ++++ 10 files changed, 197 insertions(+), 12 deletions(-) create mode 100644 src/scss/vendor/perfect-scrollbar/_main.scss create mode 100644 src/scss/vendor/perfect-scrollbar/_mixins.scss create mode 100644 src/scss/vendor/perfect-scrollbar/_themes.scss create mode 100644 src/scss/vendor/perfect-scrollbar/_variables.scss diff --git a/Gulpfile.js b/Gulpfile.js index 5206f7e..e3dc0ee 100644 --- a/Gulpfile.js +++ b/Gulpfile.js @@ -1,4 +1,5 @@ var gulp = require('gulp'); +var rename = require("gulp-rename"); var iconfont = require('gulp-iconfont'); var iconfontCss = require('gulp-iconfont-css'); @@ -25,4 +26,11 @@ gulp.task('default', function () { })) .pipe(gulp.dest('src/fonts/')); + + gulp + .src('./node_modules/perfect-scrollbar/src/css/*') + .pipe(rename(function (path) { + path.basename = '_' + path.basename; + })) + .pipe(gulp.dest('./src/scss/vendor/perfect-scrollbar')); }); diff --git a/package.json b/package.json index a6c7113..7896419 100644 --- a/package.json +++ b/package.json @@ -1,17 +1,12 @@ { "name": "cartoassets", - "description": "Share frontend assets between different CartoDB repositories", - "version": "0.1.34", + "description": "Share frontend assets between different CARTO repositories", + "version": "0.2.00", "homepage": "https://github.com/cartodb/CartoAssets", "author": { - "name": "CartoDB", - "email": "contact@cartodb.com" + "name": "CARTO", + "email": "frontend@carto.com" }, - "contributors": [ - "Javier Álvarez ", - "Emilio García ", - "Javier Arce " - ], "repository": { "type": "git", "url": "git://github.com/cartodb/CartoAssets.git" @@ -45,13 +40,15 @@ "gulp-iconfont": "1.0.0", "gulp-iconfont-css": "0.0.9", "gulp-install": "0.2.0", + "gulp-rename": "1.2.2", "gulp-sketch": "0.0.7", "grunt-shell": "1.1.2", - "load-grunt-tasks": "*" + "load-grunt-tasks": "*", + "perfect-scrollbar": "git://github.com/CartoDB/perfect-scrollbar.git#master" }, "keywords": [ "library", - "CartoDB", + "CARTO", "share", "assets", "styleguide", diff --git a/src/fonts/cartoIcon.eot b/src/fonts/cartoIcon.eot index 1bd1bbca5b5d45f6e0313684484d5aed9191174e..35d6d5bd491ec490b879271113befe4d8d3daa94 100644 GIT binary patch delta 55 zcmZoz%-FD)ae@uArOMQa_Uo8ibyOyPm?}M0#WJ4X<|_j?<1YpvxawUx7e;Sh!1%x) E01*%q4*&oF delta 55 zcmZoz%-FD)ae@tVqu8{G_Uo8iHZx58Fjab*SYtfD%~u9)#$OCTaMjzA8%A$l!1%x) E03fpxO8@`> diff --git a/src/fonts/cartoIcon.ttf b/src/fonts/cartoIcon.ttf index 0ec55ebb23506b4defea47089d1baad654db474c..97e08a707911c418c4f2fc920734d22b0bad0559 100644 GIT binary patch delta 47 wcmcbzknzew#tDwhtvV_bU8YJ;Rk4icxB1Gz&G?G}2(EgU&V|t%zdY~<0E)v9>Hq)$ delta 47 wcmcbzknzew#tDwhEt?r8x=fXxCe|3wZ}XLboADO|5M1@Pi_@% diff --git a/src/fonts/cartoIcon.woff b/src/fonts/cartoIcon.woff index 0ccc97c68c8cdc08a8aa89bd0a5fe20f0f713f63..e3068b5f111e3c1cb0b3e570c51e2e26eaab9849 100644 GIT binary patch delta 67 zcmV-J0KEU)W!z<6k)jPT{;&=zbXI! ZohyRz50J~jzyuNn0GNahw6k|BWe4bM9fAM= delta 67 zcmV-J0KEU)W!z1We3o&9Bcpp diff --git a/src/scss/entry.scss b/src/scss/entry.scss index cf61d2f..db1e8d6 100644 --- a/src/scss/entry.scss +++ b/src/scss/entry.scss @@ -12,7 +12,7 @@ @import 'cdb-utilities/fonts'; @import 'cdb-utilities/helpers'; -@import 'node_modules/perfect-scrollbar/src/css/main'; // Perfect scrollbar styles +@import 'vendor/perfect-scrollbar/main'; // Perfect scrollbar styles @import 'cdb-components/forms/checkbox'; @import 'cdb-components/forms/dropdowns'; diff --git a/src/scss/vendor/perfect-scrollbar/_main.scss b/src/scss/vendor/perfect-scrollbar/_main.scss new file mode 100644 index 0000000..ae1f655 --- /dev/null +++ b/src/scss/vendor/perfect-scrollbar/_main.scss @@ -0,0 +1,3 @@ +@import 'variables'; +@import 'mixins'; +@import 'themes'; diff --git a/src/scss/vendor/perfect-scrollbar/_mixins.scss b/src/scss/vendor/perfect-scrollbar/_mixins.scss new file mode 100644 index 0000000..79d3d2c --- /dev/null +++ b/src/scss/vendor/perfect-scrollbar/_mixins.scss @@ -0,0 +1,128 @@ +@mixin scrollbar-rail-default($theme) { + display: none; + position: absolute; /* please don't change 'position' */ + opacity: map_get($theme, rail-default-opacity); + transition: background-color .2s linear, opacity .2s linear; +} + +@mixin scrollbar-rail-hover($theme) { + background-color: map_get($theme, rail-hover-bg); + opacity: map_get($theme, rail-hover-opacity); +} + +@mixin scrollbar-default($theme) { + position: absolute; /* please don't change 'position' */ + background-color: map_get($theme, bar-container-hover-bg); + border-radius: map_get($theme, border-radius); + transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, + border-radius .2s ease-in-out; +} + +@mixin scrollbar-hover($theme) { + background-color: map_get($theme, bar-hover-bg); +} + +@mixin in-scrolling($theme) { + &.ps-in-scrolling { + &.ps-x > .ps-scrollbar-x-rail { + @include scrollbar-rail-hover($theme); + > .ps-scrollbar-x { + @include scrollbar-hover($theme); + height: map_get($theme, scrollbar-x-hover-height); + } + } + &.ps-y > .ps-scrollbar-y-rail { + @include scrollbar-rail-hover($theme); + > .ps-scrollbar-y { + @include scrollbar-hover($theme); + width: map_get($theme, scrollbar-y-hover-width); + } + } + } +} + +// Layout and theme mixin +@mixin ps-container($theme) { + -ms-touch-action: auto; + touch-action: auto; + overflow: hidden !important; + -ms-overflow-style: none; + + // Edge + @supports (-ms-overflow-style: none) { + overflow: auto !important; + } + // IE10+ + @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { + overflow: auto !important; + } + + &.ps-active-x > .ps-scrollbar-x-rail, + &.ps-active-y > .ps-scrollbar-y-rail { + display: block; + background-color: map_get($theme, bar-bg); + } + + @include in-scrolling($theme); + + > .ps-scrollbar-x-rail { + @include scrollbar-rail-default($theme); + bottom: map_get($theme, scrollbar-x-rail-bottom); /* there must be 'bottom' for ps-scrollbar-x-rail */ + height: map_get($theme, scrollbar-x-rail-height); + + > .ps-scrollbar-x { + @include scrollbar-default($theme); + bottom: map_get($theme, scrollbar-x-bottom); /* there must be 'bottom' for ps-scrollbar-x */ + height: map_get($theme, scrollbar-x-height); + } + &:hover, + &:active { + > .ps-scrollbar-x { + height: map_get($theme, scrollbar-x-hover-height); + } + } + } + + > .ps-scrollbar-y-rail { + @include scrollbar-rail-default($theme); + right: map_get($theme, scrollbar-y-rail-right); /* there must be 'right' for ps-scrollbar-y-rail */ + width: map_get($theme, scrollbar-y-rail-width); + + > .ps-scrollbar-y { + @include scrollbar-default($theme); + right: map_get($theme, scrollbar-y-right); /* there must be 'right' for ps-scrollbar-y */ + width: map_get($theme, scrollbar-y-width); + } + &:hover, + &:active { + > .ps-scrollbar-y { + width: map_get($theme, scrollbar-y-hover-width); + } + } + } + + &:hover { + @include in-scrolling($theme); + + > .ps-scrollbar-x-rail, + > .ps-scrollbar-y-rail { + opacity: map_get($theme, rail-container-hover-opacity); + } + + > .ps-scrollbar-x-rail:hover { + @include scrollbar-rail-hover($theme); + + > .ps-scrollbar-x { + @include scrollbar-hover($theme); + } + } + + > .ps-scrollbar-y-rail:hover { + @include scrollbar-rail-hover($theme); + + > .ps-scrollbar-y { + @include scrollbar-hover($theme); + } + } + } +} diff --git a/src/scss/vendor/perfect-scrollbar/_themes.scss b/src/scss/vendor/perfect-scrollbar/_themes.scss new file mode 100644 index 0000000..bf7729a --- /dev/null +++ b/src/scss/vendor/perfect-scrollbar/_themes.scss @@ -0,0 +1,25 @@ +$ps-theme-default: ( + border-radius: $ps-border-radius, + rail-default-opacity: $ps-rail-default-opacity, + rail-container-hover-opacity: $ps-rail-container-hover-opacity, + rail-hover-opacity: $ps-rail-hover-opacity, + bar-bg: $ps-bar-bg, + bar-container-hover-bg: $ps-bar-container-hover-bg, + bar-hover-bg: $ps-bar-hover-bg, + rail-hover-bg: $ps-rail-hover-bg, + scrollbar-x-rail-bottom: $ps-scrollbar-x-rail-bottom, + scrollbar-x-rail-height: $ps-scrollbar-x-rail-height, + scrollbar-x-bottom: $ps-scrollbar-x-bottom, + scrollbar-x-height: $ps-scrollbar-x-height, + scrollbar-x-hover-height: $ps-scrollbar-x-hover-height, + scrollbar-y-rail-right: $ps-scrollbar-y-rail-right, + scrollbar-y-rail-width: $ps-scrollbar-y-rail-width, + scrollbar-y-right: $ps-scrollbar-y-right, + scrollbar-y-width: $ps-scrollbar-y-width, + scrollbar-y-hover-width: $ps-scrollbar-y-hover-width, +); + +// Default theme +.ps-container { + @include ps-container($ps-theme-default); +} diff --git a/src/scss/vendor/perfect-scrollbar/_variables.scss b/src/scss/vendor/perfect-scrollbar/_variables.scss new file mode 100644 index 0000000..7454fb0 --- /dev/null +++ b/src/scss/vendor/perfect-scrollbar/_variables.scss @@ -0,0 +1,24 @@ +// Colors +$ps-border-radius: 6px !default; + +$ps-rail-default-opacity: 0 !default; +$ps-rail-container-hover-opacity: 0.6 !default; +$ps-rail-hover-opacity: 0.9 !default; + +$ps-bar-bg: transparent !default; +$ps-bar-container-hover-bg: #aaa !default; +$ps-bar-hover-bg: #999 !default; +$ps-rail-hover-bg: #eee !default; + +// Sizes +$ps-scrollbar-x-rail-bottom: 0px !default; +$ps-scrollbar-x-rail-height: 15px !default; +$ps-scrollbar-x-bottom: 2px !default; +$ps-scrollbar-x-height: 6px !default; +$ps-scrollbar-x-hover-height: 11px !default; + +$ps-scrollbar-y-rail-right: 0 !default; +$ps-scrollbar-y-rail-width: 15px !default; +$ps-scrollbar-y-right: 2px !default; +$ps-scrollbar-y-width: 6px !default; +$ps-scrollbar-y-hover-width: 11px !default;