diff --git a/cartostyles.css b/cartostyles.css index 6da7e6b..4daa627 100644 --- a/cartostyles.css +++ b/cartostyles.css @@ -1 +1 @@ -.CDB-Shape-lens:hover,.CDB-Shape-threePoints:hover{cursor:pointer}.CDB-Loader{-webkit-animation:loader-progress 1s linear 1;-khtml-animation:loader-progress 1s linear 1;-moz-animation:loader-progress 1s linear 1;-ms-animation:loader-progress 1s linear 1;-o-animation:loader-progress 1s linear 1;animation:loader-progress 1s linear 1;opacity:0;filter:alpha(opacity=0);-webkit-transition:opacity,1s;-khtml-transition:opacity,1s;-moz-transition:opacity,1s;-ms-transition:opacity,1s;-o-transition:opacity,1s;transition:opacity,1s;position:absolute;top:0;left:0;width:100%;height:2px;background:#3aa9e3;z-index:10}.CDB-Loader.is-visible{-webkit-animation:loader-progress 2s linear infinite;-khtml-animation:loader-progress 2s linear infinite;-moz-animation:loader-progress 2s linear infinite;-ms-animation:loader-progress 2s linear infinite;-o-animation:loader-progress 2s linear infinite;animation:loader-progress 2s linear infinite;opacity:1;filter:alpha(opacity=100)}@-webkit-keyframes loader-progress{0%{width:0}100%{width:100%}}@-moz-keyframes loader-progress{0%{width:0}100%{width:100%}}@-ms-keyframes loader-progress{0%{width:0}100%{width:100%}}@-o-keyframes loader-progress{0%{width:0}100%{width:100%}}@keyframes loader-progress{0%{width:0}100%{width:100%}}.CDB-Shape-dot{display:inline-block;width:8px;min-width:8px;height:8px;border-radius:8px}.CDB-Shape-threePoints{display:inline-block;position:relative;width:3px;height:16px;margin-right:-7px;margin-left:6px;padding:0 7px 0 10px;text-align:center;vertical-align:middle}legend,td,th{padding:0}.CDB-Shape-threePoints:after,.CDB-Shape-threePoints:before{display:inline-block;position:absolute;width:3px;height:3px;border-radius:50%;content:'';z-index:1}.CDB-Shape-threePoints:before{top:0;right:7px}.CDB-Shape-threePoints:after{right:7px;bottom:1px}.CDB-Shape-threePointsItem{display:block;position:absolute;top:6px;left:7px;width:3px;height:3px;border-radius:50%}.CDB-Shape-lens{display:inline-block;position:relative;width:16px;height:16px}.CDB-Shape-lens:after,.CDB-Shape-lens:before{position:absolute;content:''}.CDB-Shape-lens:after{top:0;left:0;width:8px;height:8px;border:1px solid transparent;border-radius:10px}.CDB-Shape-lens:before{-webkit-transform:rotate(45deg);-khtml-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg);right:3px;bottom:5px;width:6px;height:1px}.CDB-Shape-hamburguer{display:inline-block;position:relative;width:16px;height:2px;border:0;background:#FFF;vertical-align:middle}.CDB-Shape-hamburguer:after,.CDB-Shape-hamburguer:before{display:block;position:absolute;width:16px;height:2px;background:#FFF;content:''}.CDB-Shape-hamburguer:before{top:-6px}.CDB-Shape-hamburguer:after{bottom:-6px}.CDB-Shape-magnify{display:block;position:relative;width:32px;height:32px}.CDB-Shape-magnify:before{display:block;position:absolute;top:10px;left:10px;width:7px;height:7px;border:1px solid #636D72;border-radius:50%;content:''}.CDB-Shape-Arrow,.CDB-Shape-magnify:after{display:block;position:absolute;width:1px}img,legend{border:0}.CDB-Shape-magnify:after{top:17px;left:19px;height:6px;transform:rotate(314deg);background:#636D72;content:''}.CDB-Shape-Arrow{height:8px;background:#32A8E6}.CDB-Shape-Arrow:after,.CDB-Shape-Arrow:before{display:block;position:absolute;top:2px;width:5px;height:1px;background:#32A8E6;content:''}.CDB-Shape-Arrow:before{left:0;transform:rotate(45deg)}.CDB-Shape-Arrow:after{left:-4px;transform:rotate(-45deg)}.CDB-Shape-Arrow--top{top:6px;right:9px;transform:rotate(45deg)}.CDB-Shape-Arrow--bottom{top:13px;left:46px;transform:rotate(-135deg)}@font-face{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")}@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")}@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")}.u-tSpace{margin-top:4px}.u-tSpace-xl{margin-top:12px}.u-rSpace{margin-right:4px}.u-rSpace--m{margin-right:8px}.u-rSpace--xl{margin-right:12px}.u-lSpace{margin-left:4px}.u-lSpace--xl{margin-left:12px}.u-iBlock{display:inline-block;vertical-align:middle}.u-showDesktop{display:block!important}.u-showMobile{display:none!important}@media only screen and (max-width:600px){.u-showDesktop{display:none!important}.u-showMobile{display:block!important}}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,optgroup,strong{font-weight:700}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{box-sizing:content-box;height:0}pre,textarea{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]{-webkit-appearance:textfield;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}table{border-collapse:collapse;border-spacing:0} \ No newline at end of file +.CDB-Shape-hamburguer,.u-iBlock{vertical-align:middle}.CDB-Shape-lens:hover,.CDB-Shape-threePoints:hover{cursor:pointer}.box{width:120px;height:64px;display:inline-block;margin:0 24px 24px 0}.Color-Blue{background:#3AA9E3}.Color-White{background:#fff;border:1px solid #e5e5e5}.Color-Dark{background:#000}.Color-MainDark{background:#2E3C43}.Color-SecondaryDark{background:#282C2F}.Color-SecondaryBackground{background:#F2F6F9}.Color-ThirdBackground{background:#F9F9F9}.Color-HoverLine{background:#AAA}.Color-MainLine{background:#DDD}.Color-SecondaryLine{background:#EEE}.Color-Type02{background:#636D72}.Color-Type03{background:#979EA1}.Color-Type04{background:#CBCED0}.Color-Higlight{background:#9DE0AD}.Color-Alert{background:#F19243}.Color-Public{background:#9BC63B}.Color-Link{background:#FEB100}.Color-Password{background:#FB7B23}.Color-Error{background:#F15743}.CDB-Loader{-webkit-animation:loader-progress 1s linear 1;-khtml-animation:loader-progress 1s linear 1;-moz-animation:loader-progress 1s linear 1;-ms-animation:loader-progress 1s linear 1;-o-animation:loader-progress 1s linear 1;animation:loader-progress 1s linear 1;opacity:0;filter:alpha(opacity=0);-webkit-transition:opacity,1s;-khtml-transition:opacity,1s;-moz-transition:opacity,1s;-ms-transition:opacity,1s;-o-transition:opacity,1s;transition:opacity,1s;position:absolute;top:0;left:0;width:100%;height:2px;background:#3aa9e3;z-index:10}.CDB-Loader.is-visible{-webkit-animation:loader-progress 2s linear infinite;-khtml-animation:loader-progress 2s linear infinite;-moz-animation:loader-progress 2s linear infinite;-ms-animation:loader-progress 2s linear infinite;-o-animation:loader-progress 2s linear infinite;animation:loader-progress 2s linear infinite;opacity:1;filter:alpha(opacity=100)}@-webkit-keyframes loader-progress{0%{width:0}100%{width:100%}}@-moz-keyframes loader-progress{0%{width:0}100%{width:100%}}@-ms-keyframes loader-progress{0%{width:0}100%{width:100%}}@-o-keyframes loader-progress{0%{width:0}100%{width:100%}}@keyframes loader-progress{0%{width:0}100%{width:100%}}.CDB-Shape-dot{display:inline-block;width:8px;min-width:8px;height:8px;border-radius:8px}.CDB-Shape-threePoints{display:inline-block;position:relative;width:3px;height:16px;margin-right:-7px;margin-left:6px;padding:0 7px 0 10px;text-align:center;vertical-align:middle}legend,td,th{padding:0}.CDB-Shape-threePoints:after,.CDB-Shape-threePoints:before{display:inline-block;position:absolute;width:3px;height:3px;border-radius:50%;content:'';z-index:1}.CDB-Shape-threePoints:before{top:0;right:7px}.CDB-Shape-threePoints:after{right:7px;bottom:1px}.CDB-Shape-threePointsItem{display:block;position:absolute;top:6px;left:7px;width:3px;height:3px;border-radius:50%}.CDB-Shape-lens{display:inline-block;position:relative;width:16px;height:16px}.CDB-Shape-lens:after,.CDB-Shape-lens:before{position:absolute;content:''}.CDB-Shape-lens:after{top:0;left:0;width:8px;height:8px;border:1px solid transparent;border-radius:10px}.CDB-Shape-lens:before{-webkit-transform:rotate(45deg);-khtml-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg);right:3px;bottom:5px;width:6px;height:1px}.CDB-Shape-hamburguer{display:inline-block;position:relative;width:16px;height:2px;border:0;background:#FFF}.CDB-Shape-hamburguer:after,.CDB-Shape-hamburguer:before{display:block;position:absolute;width:16px;height:2px;background:#FFF;content:''}.CDB-Shape-hamburguer:before{top:-6px}.CDB-Shape-hamburguer:after{bottom:-6px}.CDB-Shape-magnify{display:block;position:relative;width:32px;height:32px}.CDB-Shape-magnify:before{display:block;position:absolute;top:10px;left:10px;width:7px;height:7px;border:1px solid #636D72;border-radius:50%;content:''}.CDB-Shape-Arrow,.CDB-Shape-magnify:after{display:block;position:absolute;width:1px}img,legend{border:0}.CDB-Shape-magnify:after{top:17px;left:19px;height:6px;transform:rotate(314deg);background:#636D72;content:''}.CDB-Shape-Arrow{height:8px;background:#32A8E6}.CDB-Shape-Arrow:after,.CDB-Shape-Arrow:before{display:block;position:absolute;top:2px;width:5px;height:1px;background:#32A8E6;content:''}.CDB-Shape-Arrow:before{left:0;transform:rotate(45deg)}.CDB-Shape-Arrow:after{left:-4px;transform:rotate(-45deg)}.IconFont,.u-iBlock{display:inline-block}.CDB-Shape-Arrow--top{top:6px;right:9px;transform:rotate(45deg)}.CDB-Shape-Arrow--bottom{top:13px;left:46px;transform:rotate(-135deg)}.Text{font-family:'Open Sans'}.Text.is-semibold{font-weight:600}.Text.is-light{font-weight:300}.Size-huge{font-size:26px;line-height:34px}.Size-large{font-size:16px;line-height:22px}.Size-medium{font-size:14px;line-height:16px}.Size-small{font-size:10px;line-height:14px}@font-face{font-family:CartoIcon;src:url(fonts/cartoIcon.eot);src:url(fonts/cartoIcon.eot?#iefix) format("embedded-opentype"),url(fonts/cartoIcon.woff) format("woff"),url(fonts/cartoIcon.ttf) format("truetype"),url(fonts/cartoIcon.svg?ey3vsq#cartoIcon) format("svg");font-weight:400;font-style:normal}.IconFont{font-family:CartoIcon;font-style:normal;font-weight:400;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;line-height:1}.IconFont-Clock::before{content:'\E001'}.IconFont-Stats::before{content:'\E002'}.IconFont-Heart--empty::before{content:'\E003'}.IconFont-Heart--fill::before{content:'\E004'}.IconFont-Alert::before{content:'\E005'}.IconFont-Rows::before{content:'\E006'}.IconFont-Check::before{content:'\E007'}.IconFont-Dribbble::before{content:'\E008'}.IconFont-Twitter::before{content:'\E009'}.IconFont-Wizard::before{content:'\E00A'}.IconFont-Info::before{content:'\E00B'}.IconFont-Fork::before{content:'\E00C'}.IconFont-Facebook::before{content:'\E00D'}.IconFont-Folder::before{content:'\E00E'}.IconFont-Dropbox::before{content:'\E00F'}.IconFont-Cloud::before{content:'\E010'}.IconFont-Step::before{content:'\E011'}.IconFont-AddDocument::before{content:'\E012'}.IconFont-ArrowNext::before{content:'\E013'}.IconFont-ArrowPrev::before{content:'\E014'}.IconFont-Close::before{content:'\E015'}.IconFont-CartoFante::before{content:'\E016'}.IconFont-Lock::before{content:'\E017'}.IconFont-CartoDB::before{content:'\E018'}.IconFont-Lens::before{content:'\E019'}.IconFont-CloseLimits::before{content:'\E01A'}.IconFont-DefaultUser::before{content:'\E01B'}.IconFont-Cockroach::before{content:'\E01C'}.IconFont-Floppy::before{content:'\E01D'}.IconFont-Trash::before{content:'\E01E'}.IconFont-Wifi::before{content:'\E01F'}.IconFont-Unlock::before{content:'\E020'}.IconFont-Unlock--withEllipsis::before{content:'\E021'}.IconFont-Gift::before{content:'\E022'}.IconFont-People::before{content:'\E023'}.IconFont-Play::before{content:'\E024'}.IconFont-Add::before{content:'\E025'}.IconFont-Map::before{content:'\E026'}.IconFont-Anchor::before{content:'\E027'}.IconFont-Key::before{content:'\E028'}.IconFont-Calendar::before{content:'\E029'}.IconFont-Document::before{content:'\E02A'}.IconFont-Eye::before{content:'\E02B'}.IconFont-Marker::before{content:'\E02C'}.IconFont-ProgressBar::before{content:'\E02D'}.IconFont-Book::before{content:'\E02E'}.IconFont-Notes::before{content:'\E02F'}.IconFont-Rectangles::before{content:'\E030'}.IconFont-Mountain::before{content:'\E031'}.IconFont-Points::before{content:'\E032'}.IconFont-Snake::before{content:'\E033'}.IconFont-Boss::before{content:'\E034'}.IconFont-Rocket::before{content:'\E035'}.IconFont-Barometer::before{content:'\E036'}.IconFont-Dollar::before{content:'\E037'}.IconFont-Email::before{content:'\E038'}.IconFont-Label::before{content:'\E039'}.IconFont-Outside::before{content:'\E03A'}.IconFont-Jigsaw::before{content:'\E03B'}.IconFont-Tools::before{content:'\E03C'}.IconFont-Question::before{content:'\E03D'}.IconFont-LayerStack::before{content:'\E03E'}.IconFont-Alarm::before{content:'\E03F'}.IconFont-CloudDownArrow::before{content:'\E040'}.IconFont-Pencil::before{content:'\E041'}.IconFont-FountainPen::before{content:'\E042'}.IconFont-EmptyDoc::before{content:'\E043'}.IconFont-MergeArrow::before{content:'\E044'}.IconFont-MergeColumns::before{content:'\E045'}.IconFont-MergeSpatial::before{content:'\E046'}.IconFont-Globe::before{content:'\E047'}.IconFont-ChevronDown::before{content:'\E048'}.IconFont-Streets::before{content:'\E049'}.IconFont-Keys::before{content:'\E04A'}.IconFont-FacebookSquare::before{content:'\E04B'}.IconFont-Fullscreen::before{content:'\E04C'}.IconFont-Rarrow::before{content:'\E04D'}.IconFont-Share::before{content:'\E04E'}.IconFont-Linkedin::before{content:'\E04F'}.IconFont-CalendarBlank::before{content:'\E050'}.IconFont-CreativeCommons::before{content:'\E051'}.IconFont-Bubble::before{content:'\E052'}.IconFont-Bars::before{content:'\E053'}.IconFont-ArrowMenu::before{content:'\E054'}.IconFont-TieFighter::before{content:'\E055'}.IconFont-Ray::before{content:'\E056'}.IconFont-Markup::before{content:'\E057'}.IconFont-Table::before{content:'\E058'}.IconFont-Airlock::before{content:'\E059'}.IconFont-Pin::before{content:'\E05A'}.IconFont-Attache::before{content:'\E05B'}.IconFont-Download::before{content:'\E05C'}@font-face{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")}@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")}@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")}.u-tSpace{margin-top:4px}.u-tSpace-xl{margin-top:12px}.u-rSpace{margin-right:4px}.u-rSpace--m{margin-right:8px}.u-rSpace--xl{margin-right:12px}.u-lSpace{margin-left:4px}.u-lSpace--xl{margin-left:12px}.u-showDesktop{display:block!important}.u-showMobile{display:none!important}@media only screen and (max-width:600px){.u-showDesktop{display:none!important}.u-showMobile{display:block!important}}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,optgroup,strong{font-weight:700}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{box-sizing:content-box;height:0}pre,textarea{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]{-webkit-appearance:textfield;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}table{border-collapse:collapse;border-spacing:0} \ No newline at end of file diff --git a/fonts/cartoIcon.eot b/fonts/cartoIcon.eot new file mode 100644 index 0000000..93586d8 Binary files /dev/null and b/fonts/cartoIcon.eot differ diff --git a/fonts/cartoIcon.svg b/fonts/cartoIcon.svg new file mode 100644 index 0000000..dc79655 --- /dev/null +++ b/fonts/cartoIcon.svg @@ -0,0 +1,288 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/fonts/cartoIcon.ttf b/fonts/cartoIcon.ttf new file mode 100644 index 0000000..eba207c Binary files /dev/null and b/fonts/cartoIcon.ttf differ diff --git a/fonts/cartoIcon.woff b/fonts/cartoIcon.woff new file mode 100644 index 0000000..64c25b4 Binary files /dev/null and b/fonts/cartoIcon.woff differ diff --git a/styleguide/index.html b/styleguide/index.html index fbe78fa..4eee3e8 100644 --- a/styleguide/index.html +++ b/styleguide/index.html @@ -10101,6 +10101,18 @@ return jQuery;
+
  • + Typography +
    • +
    + +
    +

    Colors/line

    + +
    + +
    +
    +
    +
    +
    +
    + +
    +
    +<div class="box Color-Blue"></div>
+<div class="box Color-HoverLine"></div>
+<div class="box Color-MainLine"></div>
+<div class="box Color-SecondaryLine"></div>
+
    +
    + +
    +
    + +
    +

    Colors/other

    + +
    + +
    +
    +
    +
    +
    +
    +
    +
    + +
    +
    +<div class="box Color-Higlight"></div>
+<div class="box Color-Alert"></div>
+<div class="box Color-Public"></div>
+<div class="box Color-Link"></div>
+<div class="box Color-Password"></div>
+<div class="box Color-Error"></div>
+
    +
    + +
    +
    + +
    +

    Colors/structure

    + +
    + +
    +
    +
    +
    +
    +
    +
    +
    + +
    +
    +<div class="box Color-MainDark"></div>
+<div class="box Color-SecondaryDark"></div>
+<div class="box Color-Blue"></div>
+<div class="box Color-White"></div>
+<div class="box Color-SecondaryBackground"></div>
+<div class="box Color-ThirdBackground"></div>
+
    +
    + +
    +
    + +
    +

    Colors/typography

    + +
    + +
    +
    +
    +
    +
    +
    +
    +
    + +
    +
    +<div class="box Color-MainDark"></div>
+<div class="box Color-Type02"></div>
+<div class="box Color-Type03"></div>
+<div class="box Color-Type04"></div>
+<div class="box Color-White"></div>
+<div class="box Color-Blue"></div>
+
    +
    + +
    +
    + +
    +

    Icon font

    + +
    + +
    +

    Clock

    + + +

    Stats

    + + +

    Heart--empty

    + + +

    Heart--fill

    + + +

    Alert

    + + +

    Rows

    + + +

    Check

    + + +

    Dribbble

    + + +

    Twitter

    + + +

    Wizard

    + + +

    Info

    + + +

    Fork

    + + +

    Facebook

    + + +

    Folder

    + + +

    Dropbox

    + + +

    Cloud

    + + +

    Step

    + + +

    AddDocument

    + + +

    ArrowNext

    + + +

    ArrowPrev

    + + +

    Close

    + + +

    CartoFante

    + + +

    Lock

    + + +

    CartoDB

    + + +

    Lens

    + + +

    CloseLimits

    + + +

    DefaultUser

    + + +

    Cockroach

    + + +

    Floppy

    + + +

    Trash

    + + +

    Wifi

    + + +

    Unlock

    + + +

    Unlock--withEllipsis

    + + +

    Gift

    + + +

    People

    + + +

    Play

    + + +

    Add

    + + +

    Map

    + + +

    Anchor

    + + +

    Key

    + + +

    Calendar

    + + +

    Document

    + + +

    Eye

    + + +

    Marker

    + + +

    ProgressBar

    + + +

    Book

    + + +

    Notes

    + + +

    Rectangles

    + + +

    Mountain

    + + +

    Points

    + + +

    Snake

    + + +

    Boss

    + + +

    Rocket

    + + +

    Barometer

    + + +

    Dollar

    + + +

    Email

    + + +

    Label

    + + +

    Outside

    + + +

    Jigsaw

    + + +

    Tools

    + + +

    Question

    + + +

    LayerStack

    + + +

    Alarm

    + + +

    CloudDownArrow

    + + +

    Pencil

    + + +

    FountainPen

    + + +

    EmptyDoc

    + + +

    MergeArrow

    + + +

    MergeColumns

    + + +

    MergeSpatial

    + + +

    Globe

    + + +

    ChevronDown

    + + +

    Streets

    + + +

    Keys

    + + +

    FacebookSquare

    + + +

    Fullscreen

    + + +

    Rarrow

    + + +

    Share

    + + +

    Linkedin

    + + +

    CalendarBlank

    + + +

    CreativeCommons

    + + +

    Bubble

    + + +

    Bars

    + + +

    ArrowMenu

    + + +

    TieFighter

    + + +

    Ray

    + + +

    Markup

    + + +

    Table

    + + +

    Airlock

    + + +

    Pin

    + + +

    Attache

    + + +

    Download

    + +
    + +
    +
    +<h4>Clock</h4>
+<i class="IconFont IconFont-Clock"></i>
+
+<h4>Stats</h4>
+<i class="IconFont IconFont-Stats"></i>
+
+<h4>Heart--empty</h4>
+<i class="IconFont IconFont-Heart--empty"></i>
+
+<h4>Heart--fill</h4>
+<i class="IconFont IconFont-Heart--fill"></i>
+
+<h4>Alert</h4>
+<i class="IconFont IconFont-Alert"></i>
+
+<h4>Rows</h4>
+<i class="IconFont IconFont-Rows"></i>
+
+<h4>Check</h4>
+<i class="IconFont IconFont-Check"></i>
+
+<h4>Dribbble</h4>
+<i class="IconFont IconFont-Dribbble"></i>
+
+<h4>Twitter</h4>
+<i class="IconFont IconFont-Twitter"></i>
+
+<h4>Wizard</h4>
+<i class="IconFont IconFont-Wizard"></i>
+
+<h4>Info</h4>
+<i class="IconFont IconFont-Info"></i>
+
+<h4>Fork</h4>
+<i class="IconFont IconFont-Fork"></i>
+
+<h4>Facebook</h4>
+<i class="IconFont IconFont-Facebook"></i>
+
+<h4>Folder</h4>
+<i class="IconFont IconFont-Folder"></i>
+
+<h4>Dropbox</h4>
+<i class="IconFont IconFont-Dropbox"></i>
+
+<h4>Cloud</h4>
+<i class="IconFont IconFont-Cloud"></i>
+
+<h4>Step</h4>
+<i class="IconFont IconFont-Step"></i>
+
+<h4>AddDocument</h4>
+<i class="IconFont IconFont-AddDocument"></i>
+
+<h4>ArrowNext</h4>
+<i class="IconFont IconFont-ArrowNext"></i>
+
+<h4>ArrowPrev</h4>
+<i class="IconFont IconFont-ArrowPrev"></i>
+
+<h4>Close</h4>
+<i class="IconFont IconFont-Close"></i>
+
+<h4>CartoFante</h4>
+<i class="IconFont IconFont-CartoFante"></i>
+
+<h4>Lock</h4>
+<i class="IconFont IconFont-Lock"></i>
+
+<h4>CartoDB</h4>
+<i class="IconFont IconFont-CartoDB"></i>
+
+<h4>Lens</h4>
+<i class="IconFont IconFont-Lens"></i>
+
+<h4>CloseLimits</h4>
+<i class="IconFont IconFont-CloseLimits"></i>
+
+<h4>DefaultUser</h4>
+<i class="IconFont IconFont-DefaultUser"></i>
+
+<h4>Cockroach</h4>
+<i class="IconFont IconFont-Cockroach"></i>
+
+<h4>Floppy</h4>
+<i class="IconFont IconFont-Floppy"></i>
+
+<h4>Trash</h4>
+<i class="IconFont IconFont-Trash"></i>
+
+<h4>Wifi</h4>
+<i class="IconFont IconFont-Wifi"></i>
+
+<h4>Unlock</h4>
+<i class="IconFont IconFont-Unlock"></i>
+
+<h4>Unlock--withEllipsis</h4>
+<i class="IconFont IconFont-Unlock--withEllipsis"></i>
+
+<h4>Gift</h4>
+<i class="IconFont IconFont-Gift"></i>
+
+<h4>People</h4>
+<i class="IconFont IconFont-People"></i>
+
+<h4>Play</h4>
+<i class="IconFont IconFont-Play"></i>
+
+<h4>Add</h4>
+<i class="IconFont IconFont-Add"></i>
+
+<h4>Map</h4>
+<i class="IconFont IconFont-Map"></i>
+
+<h4>Anchor</h4>
+<i class="IconFont IconFont-Anchor"></i>
+
+<h4>Key</h4>
+<i class="IconFont IconFont-Key"></i>
+
+<h4>Calendar</h4>
+<i class="IconFont IconFont-Calendar"></i>
+
+<h4>Document</h4>
+<i class="IconFont IconFont-Document"></i>
+
+<h4>Eye</h4>
+<i class="IconFont IconFont-Eye"></i>
+
+<h4>Marker</h4>
+<i class="IconFont IconFont-Marker"></i>
+
+<h4>ProgressBar</h4>
+<i class="IconFont IconFont-ProgressBar"></i>
+
+<h4>Book</h4>
+<i class="IconFont IconFont-Book"></i>
+
+<h4>Notes</h4>
+<i class="IconFont IconFont-Notes"></i>
+
+<h4>Rectangles</h4>
+<i class="IconFont IconFont-Rectangles"></i>
+
+<h4>Mountain</h4>
+<i class="IconFont IconFont-Mountain"></i>
+
+<h4>Points</h4>
+<i class="IconFont IconFont-Points"></i>
+
+<h4>Snake</h4>
+<i class="IconFont IconFont-Snake"></i>
+
+<h4>Boss</h4>
+<i class="IconFont IconFont-Boss"></i>
+
+<h4>Rocket</h4>
+<i class="IconFont IconFont-Rocket"></i>
+
+<h4>Barometer</h4>
+<i class="IconFont IconFont-Barometer"></i>
+
+<h4>Dollar</h4>
+<i class="IconFont IconFont-Dollar"></i>
+
+<h4>Email</h4>
+<i class="IconFont IconFont-Email"></i>
+
+<h4>Label</h4>
+<i class="IconFont IconFont-Label"></i>
+
+<h4>Outside</h4>
+<i class="IconFont IconFont-Outside"></i>
+
+<h4>Jigsaw</h4>
+<i class="IconFont IconFont-Jigsaw"></i>
+
+<h4>Tools</h4>
+<i class="IconFont IconFont-Tools"></i>
+
+<h4>Question</h4>
+<i class="IconFont IconFont-Question"></i>
+
+<h4>LayerStack</h4>
+<i class="IconFont IconFont-LayerStack"></i>
+
+<h4>Alarm</h4>
+<i class="IconFont IconFont-Alarm"></i>
+
+<h4>CloudDownArrow</h4>
+<i class="IconFont IconFont-CloudDownArrow"></i>
+
+<h4>Pencil</h4>
+<i class="IconFont IconFont-Pencil"></i>
+
+<h4>FountainPen</h4>
+<i class="IconFont IconFont-FountainPen"></i>
+
+<h4>EmptyDoc</h4>
+<i class="IconFont IconFont-EmptyDoc"></i>
+
+<h4>MergeArrow</h4>
+<i class="IconFont IconFont-MergeArrow"></i>
+
+<h4>MergeColumns</h4>
+<i class="IconFont IconFont-MergeColumns"></i>
+
+<h4>MergeSpatial</h4>
+<i class="IconFont IconFont-MergeSpatial"></i>
+
+<h4>Globe</h4>
+<i class="IconFont IconFont-Globe"></i>
+
+<h4>ChevronDown</h4>
+<i class="IconFont IconFont-ChevronDown"></i>
+
+<h4>Streets</h4>
+<i class="IconFont IconFont-Streets"></i>
+
+<h4>Keys</h4>
+<i class="IconFont IconFont-Keys"></i>
+
+<h4>FacebookSquare</h4>
+<i class="IconFont IconFont-FacebookSquare"></i>
+
+<h4>Fullscreen</h4>
+<i class="IconFont IconFont-Fullscreen"></i>
+
+<h4>Rarrow</h4>
+<i class="IconFont IconFont-Rarrow"></i>
+
+<h4>Share</h4>
+<i class="IconFont IconFont-Share"></i>
+
+<h4>Linkedin</h4>
+<i class="IconFont IconFont-Linkedin"></i>
+
+<h4>CalendarBlank</h4>
+<i class="IconFont IconFont-CalendarBlank"></i>
+
+<h4>CreativeCommons</h4>
+<i class="IconFont IconFont-CreativeCommons"></i>
+
+<h4>Bubble</h4>
+<i class="IconFont IconFont-Bubble"></i>
+
+<h4>Bars</h4>
+<i class="IconFont IconFont-Bars"></i>
+
+<h4>ArrowMenu</h4>
+<i class="IconFont IconFont-ArrowMenu"></i>
+
+<h4>TieFighter</h4>
+<i class="IconFont IconFont-TieFighter"></i>
+
+<h4>Ray</h4>
+<i class="IconFont IconFont-Ray"></i>
+
+<h4>Markup</h4>
+<i class="IconFont IconFont-Markup"></i>
+
+<h4>Table</h4>
+<i class="IconFont IconFont-Table"></i>
+
+<h4>Airlock</h4>
+<i class="IconFont IconFont-Airlock"></i>
+
+<h4>Pin</h4>
+<i class="IconFont IconFont-Pin"></i>
+
+<h4>Attache</h4>
+<i class="IconFont IconFont-Attache"></i>
+
+<h4>Download</h4>
+<i class="IconFont IconFont-Download"></i>
+
    +
    + +
    @@ -10247,5 +10936,33 @@ There is only one state 'is-visible', in order to make it visible.

    +
    +
    + +
    +

    Typography

    + +
    + +
    +

    Open Sans 26/34 Regular

    +

    Open Sans 16/22 Regular

    +

    Open Sans 12/16 Semibold

    +

    Open Sans 12/16 Semibold

    +

    Open Sans 10/14 Semibold

    +

    Open Sans 10/14 Regular

    +
    + +
    +
    +<p class="Text Size-huge">Open Sans 26/34 Regular</p>
+<p class="Text Size-large">Open Sans 16/22 Regular</p>
+<p class="Text is-semibold Size-medium">Open Sans 12/16 Semibold</p>
+<p class="Text Size-medium">Open Sans 12/16 Semibold</p>
+<p class="Text is-semibold Size-small">Open Sans 10/14 Semibold</p>
+<p class="Text Size-small">Open Sans 10/14 Regular</p>
+
    +
    +