From fe1b67f34a5c426373c22347ecbc6d72a4c3f350 Mon Sep 17 00:00:00 2001 From: xavijam Date: Wed, 10 Feb 2016 21:27:53 +0100 Subject: [PATCH] Updates --- css/cartostyles.css | 2 +- fonts/cartoIcon.eot | Bin 18856 -> 18856 bytes fonts/cartoIcon.ttf | Bin 18684 -> 18684 bytes fonts/cartoIcon.woff | Bin 11836 -> 11836 bytes styleguide/index.html | 2335 +++++++++++++++++++++++++++++++++++++++-- 5 files changed, 2223 insertions(+), 114 deletions(-) diff --git a/css/cartostyles.css b/css/cartostyles.css index 276ac61..8f6eeb4 100644 --- a/css/cartostyles.css +++ b/css/cartostyles.css @@ -1 +1 @@ -.CDB-Checkbox::after,.CDB-Checkbox::before,.CDB-Radio::before,.CDB-Shape-hamburguer:after,.CDB-Shape-hamburguer:before,.CDB-Shape-lens:after,.CDB-Shape-lens:before,.CDB-Shape-magnify:after,.CDB-Shape-magnify:before,.CDB-Toogle:before{content:''}.CDB-IconFont--center,.CDB-Range,.CDB-Shape-hamburguer,.CDB-Shape-threePoints{vertical-align:middle}.CDB-Range,svg:not(:root){overflow:hidden}.CDB-Range:focus,a:active,a:hover,button,input{outline:0}.CDB-Box-Modal{border:1px solid #DDD;border-radius:4px;background:#fff;box-shadow:0 8px 16px 0 rgba(0,0,0,.16)}.CDB-Button{padding:8px 20px;border-radius:4px;cursor:pointer}.CDB-Button .CDB-Button-Text{display:block}.CDB-Button.is-disabled{cursor:default;opacity:.24}.CDB-Button--small{padding:5px 12px}.CDB-Button--primary{background:#3AA9E3;color:#fff}.CDB-Button--primary:hover{background:#1e97d6}.CDB-Button--primary:active{background:#197eb2}.CDB-Button--primary.is-disabled:active,.CDB-Button--primary.is-disabled:hover{background:#3AA9E3}.CDB-Button--secondary{border:1px solid #3AA9E3;background:#fff;color:#3AA9E3}.CDB-Button--secondary:hover{background:rgba(58,169,227,.08)}.CDB-Button--secondary:active{background:#3AA9E3;color:#fff}.CDB-Button--secondary.is-disabled:active,.CDB-Button--secondary.is-disabled:hover{background:#fff}.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-Checkbox{position:relative;width:16px;height:16px;border:1px solid #DDD;border-radius:3px}.CDB-Checkbox::after,.CDB-Checkbox::before{display:block;position:absolute;bottom:3px;width:2px;border-radius:1px;background:#EEE}.CDB-Checkbox:checked,.CDB-Checkbox:checked:hover,.CDB-Checkbox:focus{border:1px solid #3AA9E3}.CDB-Checkbox::before{right:4px;height:8px;transform:rotate(45deg)}.CDB-Checkbox::after{left:4px;height:6px;transform:rotate(-45deg)}.CDB-Checkbox:checked{background:#3AA9E3}.CDB-Checkbox:checked::after,.CDB-Checkbox:checked::before{background:#fff}.CDB-Checkbox:hover{border:1px solid #AAA}.CDB-Checkbox:disabled{border:1px solid #EEE;background:#F9F9F9}.CDB-Checkbox:disabled:hover{border:1px solid #EEE}.CDB-Checkbox:disabled::after,.CDB-Checkbox:disabled::before{background:#fff}.CDB-InputText{min-width:152px;padding:7px 8px 6px;border:1px solid #DDD;border-radius:3px;font-size:12px;line-height:16px}.CDB-InputText:hover{border:1px solid #AAA}.CDB-InputText:focus{border:1px solid #3AA9E3}.CDB-InputText:disabled{border-color:#EEE;background:#F9F9F9}.CDB-InputText.has-error{border:1px solid rgba(241,87,67,.48);background:rgba(241,87,67,.04);color:#F15743}.CDB-Legend{width:96px}.CDB-Radio{position:relative;width:16px;height:16px;border:1px solid #DDD;border-radius:50%}.CDB-Radio::before{display:block;position:absolute;top:50%;left:50%;width:6px;height:6px;margin-top:-3px;margin-left:-3px;border-radius:50%;background:#EEE}.CDB-Radio:checked,.CDB-Radio:checked:hover,.CDB-Radio:focus{border:1px solid #3AA9E3}.CDB-Radio:checked{background:#3AA9E3}.CDB-Radio:checked::before{background:#fff}.CDB-Radio:hover{border:1px solid #AAA}.CDB-Radio:disabled,.CDB-Radio:disabled:hover{border:1px solid #EEE}.CDB-Radio:disabled{background:#F9F9F9}.CDB-Radio:disabled::before{background:#fff}.CDB-Select{position:relative}.CDB-SelectItem{position:absolute;top:40px}.CDB-Range{position:relative;width:100%;margin:-4px 0 0;padding:0;background:0 0;cursor:pointer}.CDB-Range::-webkit-slider-thumb{position:relative;width:4px;height:100%;border-radius:4px}.CDB-Range::-webkit-slider-runnable-track{height:2px;margin:8px 0;border-radius:4px;background:#DDD}.CDB-Range::-webkit-slider-thumb::before{position:absolute;top:0;right:0;bottom:0;left:-3000px;height:2px;border-radius:4px;background:#3AA9E3;content:''}.CDB-Range::-webkit-slider-thumb::after{position:absolute;top:-6px;right:-6px;left:-6px;width:12px;height:12px;border:1px solid #3AA9E3;border-radius:50%;background:#fff;content:'';z-index:10}.CDB-Range:focus::-webkit-slider-thumb::after,.CDB-Range:hover::-webkit-slider-thumb::after{cursor:pointer}.CDB-Range:disabled::-webkit-slider-thumb::before{opacity:.2}.CDB-Range:disabled::-webkit-slider-thumb::after{opacity:.2}.CDB-Toogle{-webkit-transition:background,.3s;-khtml-transition:background,.3s;-moz-transition:background,.3s;-ms-transition:background,.3s;-o-transition:background,.3s;transition:background,.3s;position:relative;width:32px;height:16px;margin:0 2px;border-radius:50px;background:#CBCED0}.CDB-Toogle:before{position:absolute;top:2px;left:2px;width:12px;height:12px;border-radius:50%;background:#fff;box-shadow:0 1px 2px 0 rgba(0,0,0,.48)}.CDB-Toogle:checked{background:#2E3C43}.CDB-Toogle:checked:before{right:2px;left:auto}.CDB-ListDecoration-Item{border-bottom:1px solid #EEE}.CDB-ListDecoration-Item:last-child{border-bottom:0}.CDB-ListDecoration-ItemLink{display:block;padding:12px 16px}.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-NavMenu{position:relative}.CDB-NavMenu-Inner{position:relative;margin-bottom:18px;border-bottom:1px solid #DDD}.CDB-NavMenu-Link{display:block;margin-bottom:-1px;padding:4px 0 11px;border-bottom:1px solid transparent}.CDB-NavMenu-Item,.CDB-NavSubmenu-Item{display:inline-block;margin-right:8px;vertical-align:middle}.CDB-NavMenu-Item.is-active .CDB-NavMenu-Link{border-bottom:1px solid #2E3C43;color:#2E3C43}.CDB-NavSubmenu{position:absolute;right:0;left:0;padding-top:14px;border-bottom:1px solid #EEE}.CDB-NavSubmenu-Link{display:block;margin-bottom:-1px;padding-bottom:12px;border-bottom:1px solid transparent}.CDB-NavSubmenu-item.is-active .CDB-NavSubmenu-Link{border-bottom:1px solid #979EA1;color:#2E3C43}.CDB-NavSubmenu-Status{margin-left:2px;color:#CBCED0}.CDB-Navmenu.is-dark .CDB-NavMenu-Inner,.CDB-Navmenu.is-dark .CDB-NavSubmenu{border-bottom:1px solid #636D72}.CDB-Navmenu.is-dark .CDB-NavMenu-Link,.CDB-Navmenu.is-dark .CDB-NavSubmenu-Link{color:#979EA1}.CDB-Navmenu.is-dark .CDB-NavMenu-Item.is-active .CDB-NavMenu-Link,.CDB-Navmenu.is-dark .CDB-NavSubmenu-item.is-active .CDB-NavSubmenu-Link{border-bottom:1px solid #DDD;color:#fff}.CDB-Navmenu.is-dark .CDB-NavSubmenu-Status{color:#636D72}.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}.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-threePoints:hover{cursor:pointer}.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}.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-lens:hover{cursor:pointer}.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}.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%}.CDB-Shape-Arrow,.CDB-Shape-magnify:after{display:block;position:absolute;width:1px}.CDB-Shape-magnify:after{top:17px;left:19px;height:6px;transform:rotate(314deg);background:#636D72}.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)}.CDB-Text{font-family:'Open Sans'}.CDB-Text.is-semibold{font-weight:600}.CDB-Text.is-light{font-weight:300}.CDB-Size-huge{font-size:26px;line-height:34px}.CDB-Size-large{font-size:16px;line-height:22px}.CDB-Size-medium{font-size:12px;line-height:16px}.CDB-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}.CDB-IconFont{display:inline-block;font-family:CartoIcon;font-style:normal;font-weight:400;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;line-height:1}.CDB-IconFont--top{vertical-align:top}.CDB-IconFont--small{font-size:11px}.CDB-IconFont-clock::before{content:'\E001'}.CDB-IconFont-stats::before{content:'\E002'}.CDB-IconFont-heartEmpty::before{content:'\E003'}.CDB-IconFont-heartFill::before{content:'\E004'}.CDB-IconFont-alert::before{content:'\E005'}.CDB-IconFont-rows::before{content:'\E006'}.CDB-IconFont-check::before{content:'\E007'}.CDB-IconFont-dribbble::before{content:'\E008'}.CDB-IconFont-twitter::before{content:'\E009'}.CDB-IconFont-caretDown::before{content:'\E00A'}.CDB-IconFont-lightbulb::before{content:'\E00B'}.CDB-IconFont-explore::before{content:'\E00C'}.CDB-IconFont-drop::before{content:'\E00D'}.CDB-IconFont-wizard::before{content:'\E00E'}.CDB-IconFont-info::before{content:'\E00F'}.CDB-IconFont-fork::before{content:'\E010'}.CDB-IconFont-facebook::before{content:'\E011'}.CDB-IconFont-folder::before{content:'\E012'}.CDB-IconFont-dropbox::before{content:'\E013'}.CDB-IconFont-cloud::before{content:'\E014'}.CDB-IconFont-step::before{content:'\E015'}.CDB-IconFont-addDocument::before{content:'\E016'}.CDB-IconFont-arrowNext::before{content:'\E017'}.CDB-IconFont-arrowPrev::before{content:'\E018'}.CDB-IconFont-close::before{content:'\E019'}.CDB-IconFont-cartoFante::before{content:'\E01A'}.CDB-IconFont-lock::before{content:'\E01B'}.CDB-IconFont-cartoDB::before{content:'\E01C'}.CDB-IconFont-lens::before{content:'\E01D'}.CDB-IconFont-closeLimits::before{content:'\E01E'}.CDB-IconFont-defaultUser::before{content:'\E01F'}.CDB-IconFont-cockroach::before{content:'\E020'}.CDB-IconFont-floppy::before{content:'\E021'}.CDB-IconFont-trash::before{content:'\E022'}.CDB-IconFont-wifi::before{content:'\E023'}.CDB-IconFont-unlock::before{content:'\E024'}.CDB-IconFont-unlockWithEllipsis::before{content:'\E025'}.CDB-IconFont-gift::before{content:'\E026'}.CDB-IconFont-people::before{content:'\E027'}.CDB-IconFont-play::before{content:'\E028'}.CDB-IconFont-add::before{content:'\E029'}.CDB-IconFont-map::before{content:'\E02A'}.CDB-IconFont-anchor::before{content:'\E02B'}.CDB-IconFont-key::before{content:'\E02C'}.CDB-IconFont-calendar::before{content:'\E02D'}.CDB-IconFont-document::before{content:'\E02E'}.CDB-IconFont-eye::before{content:'\E02F'}.CDB-IconFont-marker::before{content:'\E030'}.CDB-IconFont-progressBar::before{content:'\E031'}.CDB-IconFont-book::before{content:'\E032'}.CDB-IconFont-notes::before{content:'\E033'}.CDB-IconFont-rectangles::before{content:'\E034'}.CDB-IconFont-mountain::before{content:'\E035'}.CDB-IconFont-points::before{content:'\E036'}.CDB-IconFont-snake::before{content:'\E037'}.CDB-IconFont-boss::before{content:'\E038'}.CDB-IconFont-rocket::before{content:'\E039'}.CDB-IconFont-barometer::before{content:'\E03A'}.CDB-IconFont-dollar::before{content:'\E03B'}.CDB-IconFont-email::before{content:'\E03C'}.CDB-IconFont-label::before{content:'\E03D'}.CDB-IconFont-outside::before{content:'\E03E'}.CDB-IconFont-jigsaw::before{content:'\E03F'}.CDB-IconFont-tools::before{content:'\E040'}.CDB-IconFont-question::before{content:'\E041'}.CDB-IconFont-layerStack::before{content:'\E042'}.CDB-IconFont-alarm::before{content:'\E043'}.CDB-IconFont-cloudDownArrow::before{content:'\E044'}.CDB-IconFont-pencil::before{content:'\E045'}.CDB-IconFont-fountainPen::before{content:'\E046'}.CDB-IconFont-emptyDoc::before{content:'\E047'}.CDB-IconFont-mergeArrow::before{content:'\E048'}.CDB-IconFont-mergeColumns::before{content:'\E049'}.CDB-IconFont-mergeSpatial::before{content:'\E04A'}.CDB-IconFont-globe::before{content:'\E04B'}.CDB-IconFont-chevronDown::before{content:'\E04C'}.CDB-IconFont-streets::before{content:'\E04D'}.CDB-IconFont-keys::before{content:'\E04E'}.CDB-IconFont-facebookSquare::before{content:'\E04F'}.CDB-IconFont-fullscreen::before{content:'\E050'}.CDB-IconFont-rArrowLight::before{content:'\E051'}.CDB-IconFont-share::before{content:'\E052'}.CDB-IconFont-linkedin::before{content:'\E053'}.CDB-IconFont-calendarBlank::before{content:'\E054'}.CDB-IconFont-creativeCommons::before{content:'\E055'}.CDB-IconFont-bubble::before{content:'\E056'}.CDB-IconFont-bars::before{content:'\E057'}.CDB-IconFont-arrowMenuLight::before{content:'\E058'}.CDB-IconFont-tieFighter::before{content:'\E059'}.CDB-IconFont-ray::before{content:'\E05A'}.CDB-IconFont-markup::before{content:'\E05B'}.CDB-IconFont-table::before{content:'\E05C'}.CDB-IconFont-airlock::before{content:'\E05D'}.CDB-IconFont-pin::before{content:'\E05E'}.CDB-IconFont-attache::before{content:'\E05F'}.CDB-IconFont-download::before{content:'\E060'}.CDB-IconFont-group::before{content:'\E061'}.CDB-IconFont-dashboard::before{content:'\E062'}.CDB-IconFont-spinner::before{content:'\E063'}.CDB-IconFont-mapsearch::before{content:'\E064'}.CDB-IconFont-rArrow::before{content:'\E065'}@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--s{margin-right:2px}.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{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}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;text-decoration:none;color:#3AA9E3}abbr[title]{border-bottom:1px dotted}mark{background:#ff0;color:#000}sub,sup{line-height:0;position:relative}sup{top:-.5em}sub{bottom:-.25em}hr{box-sizing:content-box;height:0}pre,textarea{overflow:auto}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible;margin:0;padding:0;border:none;background:0 0;box-sizing:border-box}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[type=checkbox],input[type=radio]{-moz-appearance:none;-webkit-appearance:none;appearance:none;box-sizing:border-box;padding:0;outline:0;cursor:pointer}input[type=range]::-webkit-slider-thumb{-moz-appearance:none;-webkit-appearance:none;appearance:none}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}optgroup{font-weight:700}input{line-height:normal;-moz-appearance:none;-webkit-appearance:none;appearance:none}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font:inherit;vertical-align:baseline}body{margin:0;line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}dd,dt{display:inline-block}a:hover{text-decoration:underline} \ No newline at end of file +.CDB-Range,svg:not(:root){overflow:hidden}.CDB-CarouselItem,.CDB-Checkbox-face,.CDB-HeaderNumeration,.CDB-LoaderIcon,.CDB-Radio-face,button{box-sizing:border-box}.CDB-Range:focus,a:active,a:hover,button,input{outline:0}.CDB-AvatarList{padding-left:12px}.CDB-AvatarList-item{display:inline-block;margin-left:-12px;border:2px solid #fff;border-radius:50%;vertical-align:middle}.CDB-AvatarList-itemMore{display:inline-block;margin-left:-12px;padding:2px 6px;border-left:2px solid #fff;border-radius:50px;background:#EEE}.CDB-AvatarList-itemMedia{width:16px;height:16px;border-radius:50%}.CDB-Box-Modal{border:1px solid #DDD;border-radius:4px;background:#fff;box-shadow:0 8px 16px 0 rgba(0,0,0,.16)}.CDB-BoxLoader{padding:0 24px;border-top:1px solid #DDD}.CDB-BoxLoader-inner{padding:12px 0;border-top:1px solid #DDD}.CDB-BoxLoader-inner:first-child{border-top:0}.CDB-BoxLoader-item{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;padding:8px 0;color:#636D72}.CDB-Carousel,.CDB-InfoBox-footer{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex}.CDB-BoxLoader-item.is-working{color:#979EA1}.CDB-BoxLoader-info{-webkit-box-flex:1;-moz-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;padding-right:16px}.CDB-InfoBox{padding:12px 16px;border-radius:4px;background:#F9F9F9}.CDB-InfoBox.is-alert{background:rgba(255,255,192,.6)}.CDB-InfoBox-footer{display:flex;-webkit-align-items:center;-moz-align-items:center;-ms-align-items:center;align-items:center;-ms-flex-align:center}.CDB-InfoBox-footerItem{-webkit-box-flex:1;-moz-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1}.CDB-InfoBox-footerItem--right{text-align:right}.CDB-Button{padding:8px 20px;border-radius:4px;cursor:pointer}.CDB-Button .CDB-Button-Text{display:block}.CDB-Button.is-disabled{cursor:default;opacity:.24}.CDB-Checkbox,.CDB-Radio{opacity:0;z-index:1;vertical-align:middle}.CDB-Button--small{padding:5px 12px}.CDB-Button--icon{padding:7px 9px}.CDB-Button--primary{background:#3AA9E3;color:#fff}.CDB-Button--primary:hover{background:#1e97d6}.CDB-Button--primary:active{background:#197eb2}.CDB-Button--primary.is-disabled:active,.CDB-Button--primary.is-disabled:hover{background:#3AA9E3}.CDB-Button--secondary{border:1px solid #3AA9E3;color:#3AA9E3}.CDB-Button--secondary:hover{background:rgba(58,169,227,.08)}.CDB-Button--secondary:active{background:#3AA9E3;color:#fff}.CDB-Button--secondary.is-disabled:active,.CDB-Button--secondary.is-disabled:hover{background:#fff}.CDB-Carousel{display:flex;-webkit-justify-content:flex-start;-moz-justify-content:flex-start;-ms-justify-content:flex-start;justify-content:flex-start;-ms-flex-pack:flex-start;width:100%}.CDB-CarouselItem{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-align-items:center;-moz-align-items:center;-ms-align-items:center;align-items:center;-ms-flex-align:center;-webkit-justify-content:center;-moz-justify-content:center;-ms-justify-content:center;justify-content:center;-ms-flex-pack:center;width:88px;height:56px;margin-right:8px;border:1px solid #EEE;border-radius:4px;background:#F9F9F9}.CDB-CarouselItem:last-child{margin-right:0}.CDB-CarouselItem:hover{border:1px solid #DDD;cursor:pointer}.CDB-CarouselItem.is-selected{border:2px solid #3AA9E3}.box{display:inline-block;width:120px;height:64px;margin:0 24px 24px 0}.Color-Blue{background:#3AA9E3}.Color-White{border:1px solid #E5E5E5;background:#fff}.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-Checkbox{position:absolute;width:16px;height:16px}.CDB-Checkbox-face{position:relative;width:16px;height:16px;border:1px solid #DDD;border-radius:3px;background:#fff;cursor:pointer}.CDB-Checkbox-face::after,.CDB-Checkbox-face::before{display:block;position:absolute;bottom:3px;width:2px;border-radius:1px;background:#EEE;content:''}.CDB-Checkbox-face::before{right:4px;height:8px;transform:rotate(45deg)}.CDB-Checkbox-face::after{left:4px;height:6px;transform:rotate(-45deg)}.CDB-Checkbox:checked+.CDB-Checkbox-face{border:1px solid #3AA9E3;background:#3AA9E3}.CDB-Checkbox:checked+.CDB-Checkbox-face::after,.CDB-Checkbox:checked+.CDB-Checkbox-face::before{background:#fff}.CDB-Checkbox:disabled+.CDB-Checkbox-face{border:1px solid #EEE;background:#F9F9F9}.CDB-Checkbox:disabled+.CDB-Checkbox-face::after,.CDB-Checkbox:disabled+.CDB-Checkbox-face::before{background:#fff}.CDB-Checkbox:disabled:hover+.CDB-Checkbox-face{border:1px solid #EEE}.CDB-Checkbox:checked:hover+.CDB-Checkbox-face,.CDB-Checkbox:focus+.CDB-Checkbox-face{border:1px solid #3AA9E3}.CDB-Checkbox:hover+.CDB-Checkbox-face{border:1px solid #AAA}.CDB-InputText{width:100%;padding:7px 8px 6px;border:1px solid #DDD;border-radius:4px;font-size:12px;line-height:16px}.CDB-InputText:hover{border:1px solid #AAA}.CDB-InputText:focus{border:1px solid #3AA9E3}.CDB-InputText:disabled{border-color:#EEE;background:#F9F9F9}.CDB-InputText.has-error{border:1px solid rgba(241,87,67,.48);background:rgba(241,87,67,.04);color:#F15743}.CDB-Legend{width:96px}.CDB-Radio{position:absolute;width:16px;height:16px}.CDB-Radio-face{position:relative;width:16px;height:16px;border:1px solid #DDD;border-radius:50%;background:#fff;text-indent:20px;cursor:pointer}.CDB-Radio-face::before{position:absolute;top:50%;left:50%;width:6px;height:6px;margin-top:-3px;margin-left:-3px;border-radius:50%;background:#EEE;content:''}.CDB-Radio:checked+.CDB-Radio-face{border:1px solid #3AA9E3;background:#3AA9E3}.CDB-Radio:checked+.CDB-Radio-face::before{background:#fff}.CDB-Radio:disabled+.CDB-Radio-face{border:1px solid #EEE;background:#F9F9F9}.CDB-Radio:disabled+.CDB-Radio-face::before{background:#fff}.CDB-Radio:disabled:hover+.CDB-Radio-face{border:1px solid #EEE}.CDB-Radio:hover+.CDB-Radio-face{border:1px solid #AAA}.CDB-Radio:checked:hover+.CDB-Radio-face,.CDB-Radio:focus+.CDB-Radio-face{border:1px solid #3AA9E3}.CDB-Select{position:relative}.CDB-SelectItem{position:absolute;top:40px}.CDB-Range{-webkit-appearance:none;-moz-appearance:none;position:relative;width:100%;margin:-4px 0 0;padding:0 6px;border:0;background:0 0;cursor:pointer;vertical-align:middle}.CDB-Range::-webkit-slider-runnable-track{height:2px;margin:8px 0;border-radius:4px;background:#DDD}.CDB-Range::-webkit-slider-thumb{position:relative;width:4px;height:100%;border-radius:4px}.CDB-Range::-webkit-slider-thumb::before{position:absolute;top:0;right:0;bottom:0;left:-3000px;height:2px;border-radius:4px;background:#3AA9E3;content:''}.CDB-Range::-webkit-slider-thumb::after{position:absolute;top:-6px;right:-6px;left:-6px;width:12px;height:12px;border:1px solid #3AA9E3;border-radius:50%;background:#fff;content:'';z-index:1}.CDB-Range::-webkit-slider-thumb:focus::after,.CDB-Range::-webkit-slider-thumb:hover::after{cursor:pointer}.CDB-Range::-webkit-slider-thumb:disabled::after,.CDB-Range::-webkit-slider-thumb:disabled::before{opacity:.2}.CDB-Range::-moz-range-track{height:2px;margin:8px 0;border:0;border-radius:4px;outline:0;background:#DDD}.CDB-Range::-moz-range-thumb{position:absolute;top:-6px;right:-6px;left:-6px;width:12px;height:12px;border:1px solid #3AA9E3;border-radius:50%;background:#fff;content:'';z-index:1}.CDB-Range::-moz-range-progress{position:absolute;top:0;right:0;bottom:0;left:-3000px;height:2px;border-radius:4px;background:#3AA9E3;content:''}.CDB-Range::-ms-track{height:2px;margin:8px 0;border:transparent;border-radius:4px;background:#DDD;color:transparent}.CDB-Range::-ms-thumb{position:absolute;top:-6px;right:-6px;left:-6px;width:12px;height:12px;border:1px solid #3AA9E3;border-radius:50%;background:#fff;content:'';z-index:1}.CDB-Toggle{position:absolute;width:32px;height:16px;opacity:0;z-index:1}.CDB-Toggle+.CDB-ToggleFace{-webkit-transition:background,.3s;-khtml-transition:background,.3s;-moz-transition:background,.3s;-ms-transition:background,.3s;-o-transition:background,.3s;transition:background,.3s;position:relative;width:32px;height:16px;margin:0 2px;border-radius:50px;background:#CBCED0}.CDB-Toggle+.CDB-ToggleFace::before{position:absolute;top:2px;left:2px;width:12px;height:12px;border-radius:50%;background:#fff;box-shadow:0 1px 2px 0 rgba(0,0,0,.48);content:''}.CDB-Toggle:checked+.CDB-ToggleFace{background:#2E3C43}.CDB-Toggle:checked+.CDB-ToggleFace::before{right:2px;left:auto}.CDB-HeaderInfo{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex}.CDB-HeaderInfo.is-block{display:block}.CDB-HeaderInfo-ListItem{display:inline-block;margin-right:8px;vertical-align:middle}.CDB-HeaderInfo-ListItem:last-child{margin-right:0}.CDB-HeaderInfo-Inner{-webkit-box-flex:1;-moz-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1}.CDB-HeaderInfo-Back{margin-top:7px}.CDB-HeaderInfo-Title{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-align-items:center;-moz-align-items:center;-ms-align-items:center;align-items:center;-ms-flex-align:center}.CDB-HeaderInfo-TitleText{-webkit-box-flex:1;-moz-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;width:0;padding-right:16px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.CDB-HeaderInfo-ActionsItem{display:inline-block;margin-left:4px;vertical-align:middle}.CDB-HeaderNumeration{width:24px;height:24px;border:1px solid #DDD;border-radius:4px;background-color:#fff;color:#979EA1;font-size:10px;line-height:23px;text-align:center}.CDB-ListDecoration-Item{border-bottom:1px solid #EEE}.CDB-ListDecoration-Item:last-child{border-bottom:0}.CDB-ListDecoration-ItemLink{display:block;padding:12px 16px}.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-LoaderIcon{position:relative;width:16px;height:16px;border:2px solid #DDD;border-radius:50%}.CDB-LoaderIcon.is-grey{border:2px solid #636D72}.CDB-LoaderIcon-item{-webkit-animation:loader-icon 1.4s linear infinite;-khtml-animation:loader-icon 1.4s linear infinite;-moz-animation:loader-icon 1.4s linear infinite;-ms-animation:loader-icon 1.4s linear infinite;-o-animation:loader-icon 1.4s linear infinite;animation:loader-icon 1.4s linear infinite;position:absolute;top:-2px;left:-2px;width:16px;height:16px;border-radius:50%;background:linear-gradient(to right,#fff 10%,rgba(255,255,255,0) 42%)}.CDB-LoaderIcon-item::after,.CDB-LoaderIcon-item::before{position:absolute;top:0;left:0;content:''}.CDB-LoaderIcon-item::before{width:50%;height:50%;border-radius:100% 0 0;background:#DDD}.CDB-LoaderIcon-item::after{right:0;bottom:0;width:75%;height:75%;margin:auto;border-radius:50%;background:#fff}.CDB-LoaderIcon-item.is-grey{background:linear-gradient(to right,#2E3C43 10%,rgba(255,255,255,0) 42%)}.CDB-LoaderIcon-item.is-grey::before{background:#636D72}.CDB-LoaderIcon-item.is-grey::after{background:#2E3C43}@-webkit-keyframes loader-icon{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}@-moz-keyframes loader-icon{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}@-ms-keyframes loader-icon{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}@-o-keyframes loader-icon{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}@keyframes loader-icon{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}.CDB-NavMenu{position:relative}.CDB-NavMenu-Inner{position:relative;margin-bottom:18px;border-bottom:1px solid #DDD}.CDB-NavMenu-Link{display:block;margin-bottom:-1px;padding:4px 0 11px;border-bottom:1px solid transparent}.CDB-NavMenu-Item,.CDB-NavSubmenu-Item{display:inline-block;margin-right:8px;vertical-align:middle}.CDB-NavMenu-Item.is-active .CDB-NavMenu-Link{border-bottom:1px solid #DDD;color:#2E3C43}.CDB-NavSubmenu{position:absolute;right:0;left:0;padding-top:14px;border-bottom:1px solid #EEE}.CDB-NavSubmenu-Link{display:block;margin-bottom:-1px;padding-bottom:12px;border-bottom:1px solid transparent}.CDB-NavSubmenu-item.is-active .CDB-NavSubmenu-Link{border-bottom:1px solid #DDD;color:#2E3C43}.CDB-NavSubmenu-Status{margin-left:2px}.CDB-Navmenu.is-dark .CDB-NavMenu-Inner,.CDB-Navmenu.is-dark .CDB-NavSubmenu{border-bottom:1px solid #636D72}.CDB-Navmenu.is-dark .CDB-NavMenu-Link,.CDB-Navmenu.is-dark .CDB-NavSubmenu-Link{color:#979EA1}.CDB-Navmenu.is-dark .CDB-NavMenu-Item.is-active .CDB-NavMenu-Link,.CDB-Navmenu.is-dark .CDB-NavSubmenu-item.is-active .CDB-NavSubmenu-Link{border-bottom:1px solid #DDD;color:#fff}.CDB-Navmenu.is-dark .CDB-NavSubmenu-Status{color:#636D72}.CDB-Shape{width:16px;height:16px;text-align:center}.CDB-Shape--medium{width:24px;height:24px}.CDB-Shape:hover{cursor:pointer}.CDB-Shape-add{position:relative;height:100%}.CDB-Shape-add.is-small::before,.CDB-Shape-add::before{height:1px;display:block;position:absolute;background:#2E3C43;content:''}.CDB-Shape-add::before{right:1px;bottom:7px;left:0}.CDB-Shape-add::after{display:block;position:absolute;top:1;bottom:0;left:7px;width:1px;background:#2E3C43;content:''}.CDB-Shape-add.is-small::before{right:3px;bottom:7px;left:4px}.CDB-Shape-add.is-small::after{display:block;position:absolute;top:4px;bottom:3px;left:8px;width:1px;background:#2E3C43;content:''}.CDB-Shape-add.is-blue::after,.CDB-Shape-add.is-blue::before{background:#3AA9E3}.CDB-Shape-add.is-white::after,.CDB-Shape-add.is-white::before{background:#fff}.CDB-Shape-Arrow{position:relative;width:1px;height:8px;background:#2E3C43}.CDB-Shape-Arrow::after,.CDB-Shape-Arrow::before{position:absolute;top:2px;width:5px;height:1px;background:#2E3C43;content:'';display:block}.CDB-Shape-Arrow::before{left:0;transform:rotate(45deg)}.CDB-Shape-Arrow::after{left:-4px;transform:rotate(-45deg)}.CDB-Shape-Arrow.is-up{top:6px;right:9px;transform:rotate(45deg)}.CDB-Shape-Arrow.is-down{top:13px;left:46px;transform:rotate(-135deg)}.CDB-Shape-Arrow.is-blue,.CDB-Shape-Arrow.is-blue::after,.CDB-Shape-Arrow.is-blue::before{background:#3AA9E3}.CDB-Shape-Arrow.is-white,.CDB-Shape-Arrow.is-white::after,.CDB-Shape-Arrow.is-white::before{background:#fff}.CDB-Shape-CircleItem.is-small{transform:translateY(2px)}.CDB-Shape-tick{display:block;position:relative;height:100%}.CDB-Shape-tick::after,.CDB-Shape-tick::before{position:absolute;width:1px;background:#2E3C43;content:'';display:block}.CDB-Shape-tick::before{transform:rotate(-45deg)}.CDB-Shape-tick::after{transform:rotate(45deg)}.CDB-Shape-tick.is-medium::before{top:5px;left:4px;height:4px}.CDB-Shape-tick.is-medium::after{top:3px;right:5px;height:6px}.CDB-Shape-tick.is-small::before{top:4px;left:2px;height:3px}.CDB-Shape-tick.is-small::after{top:2px;right:3px;height:5px}.CDB-Shape-tick.is-blue::after,.CDB-Shape-tick.is-blue::before{background:#3AA9E3}.CDB-Shape-tick.is-white::after,.CDB-Shape-tick.is-white::before{background:#fff}.CDB-Shape-tick.is-green::after,.CDB-Shape-tick.is-green::before{background:#9DE0AD}.CDB-Shape-close{display:block;position:relative;height:100%}.CDB-Shape-close::after,.CDB-Shape-close::before{position:absolute;width:1px;background:#2E3C43;content:'';display:block}.CDB-Shape-close::before{transform:rotate(-45deg)}.CDB-Shape-close::after{transform:rotate(45deg)}.CDB-Shape-close.is-huge::before{top:-2px;left:7px;height:20px}.CDB-Shape-close.is-huge::after{top:-2px;right:8px;height:20px}.CDB-Shape-close.is-large::before{top:2px;left:7px;height:12px}.CDB-Shape-close.is-large::after{top:2px;right:8px;height:12px}.CDB-Shape-close.is-medium::before{top:3px;left:6px;height:7px}.CDB-Shape-close.is-medium::after{top:3px;right:6px;height:7px}.CDB-Shape-close.is-small::before{top:2px;left:4px;height:5px}.CDB-Shape-close.is-small::after{top:2px;right:4px;height:5px}.CDB-Shape-close.is-blue::after,.CDB-Shape-close.is-blue::before{background:#3AA9E3}.CDB-Shape-close.is-white::after,.CDB-Shape-close.is-white::before{background:#fff}.CDB-Shape-close.is-red::after,.CDB-Shape-close.is-red::before{background:#F15743}.CDB-Shape-dash{position:relative;height:100%}.CDB-Shape-dash::before{display:block;position:absolute;right:2px;bottom:7px;left:2px;height:1px;background:#2E3C43;content:''}.CDB-Shape-dash.is-small::before{right:3px;left:3px}.CDB-Shape-dash.is-blue::before{background:#3AA9E3}.CDB-Shape-dash.is-white::before{background:#fff}.CDB-Shape-Dataset{padding-top:1px;padding-left:10px}.CDB-Shape-Dataset.is-small{padding-top:0;padding-left:7px}.CDB-Shape-DatasetItem{display:inline-block;width:9px;height:9px;margin-left:-10px;border:1px solid #2E3C43;border-radius:50%;background:#fff}.CDB-Shape-DatasetItem:first-child{position:relative;box-shadow:3px 0 0 #fff;z-index:1}.CDB-Shape-Dataset.is-small .CDB-Shape-DatasetItem{width:6px;height:6px;margin-left:-7px}.CDB-Shape-Dataset.is-small .CDB-Shape-DatasetItem:first-child{box-shadow:2px 0 0 #fff}.CDB-Shape-Dataset.is-blue .CDB-Shape-DatasetItem{border:1px solid #3AA9E3}.CDB-Shape-Dataset.is-grey .CDB-Shape-DatasetItem{border:1px solid #AAA}.CDB-Shape-Dataset.is-white .CDB-Shape-DatasetItem{border:1px solid #AAA;background:#2E3C43}.CDB-Shape-Dataset.is-white .CDB-Shape-DatasetItem:first-child{box-shadow:3px 0 #2E3C43}.CDB-Shape-Dataset.is-white.is-small .CDB-Shape-DatasetItem:first-child{box-shadow:2px 0 #2E3C43}.CDB-Shape-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#EEE}.CDB-Shape-dot.is-selected{background:#636D72}.CDB-Shape-CircleItem{width:13px;height:13px;border:1px solid #2E3C43;border-radius:50%}.CDB-Shape-CircleItem.is-small{width:9px;height:9px;margin:0 auto}.CDB-Shape-CircleItem.is-blue{border:1px solid #3AA9E3}.CDB-Shape-CircleItem.is-white{border:1px solid #fff}.CDB-Shape-CircleItem.is-green{border:1px solid #9DE0AD}.CDB-Shape-CircleItem.is-red{border:1px solid #F15743}.CDB-Shape-hamburguer{width:16px}.CDB-Shape-hamburguer:hover{cursor:pointer}.CDB-Shape-hamburguerItem{height:2px;margin-bottom:2px;background:#2E3C43}.CDB-Shape-hamburguerItem:last-child{margin-bottom:0}.CDB-Shape-hamburguer.is-blue .CDB-Shape-hamburguerItem{background:#3AA9E3}.CDB-Shape-hamburguer.is-white .CDB-Shape-hamburguerItem{background:#fff}.CDB-Shape-magnify{display:block;position:relative;height:100%}.CDB-Shape-magnify.is-small::after,.CDB-Shape-magnify::after,.CDB-Shape-magnify::before{display:block;position:absolute;content:''}.CDB-Shape-magnify::before{top:0;left:0;width:11px;height:11px;border:1px solid #2E3C43;border-radius:50%}.CDB-Shape-magnify::after{right:2px;bottom:-1px;width:1px;height:7px;transform:rotate(314deg);background:#2E3C43}.CDB-Shape-magnify.is-blue::before{border:1px solid #3AA9E3}.CDB-Shape-magnify.is-blue::after{background:#3AA9E3}.CDB-Shape-magnify.is-white::before{border:1px solid #fff}.CDB-Shape-magnify.is-white::after{background:#fff}.CDB-Shape-magnify.is-small::before{top:3px;left:3px;width:6px;height:6px}.CDB-Shape-magnify.is-small::after{right:4px;bottom:2px;width:1px;height:5px;transform:rotate(314deg)}.CDB-Shape-Move{padding:1px 0 0}.CDB-Shape-Move.is-small{padding:3px 0 0 1px}.CDB-Shape-threePoints.is-medium,.CDB-Shape-threePoints.is-small{padding-top:2px}.CDB-Shape-Move.is-small .CDB-Shape-MoveItem{margin-bottom:2px}.CDB-Shape-Move.is-small .CDB-Shape-MoveItem::before{width:2px;height:2px}.CDB-Shape-Move.is-small .CDB-Shape-MoveItem::after{width:2px;height:2px;margin-left:1px}.CDB-Shape-MoveItem::after,.CDB-Shape-MoveItem::before{width:3px;height:3px;background:#2E3C43;content:'';display:inline-block}.CDB-Shape-MoveItem{margin-bottom:3px}.CDB-Shape-MoveItem:last-child{margin-bottom:0}.CDB-Shape-MoveItem::after{margin-left:2px}.CDB-Shape-MoveItem.is-blue::after,.CDB-Shape-MoveItem.is-blue::before{background:#3AA9E3}.CDB-Shape-MoveItem.is-white::after,.CDB-Shape-MoveItem.is-white::before{background:#fff}.CDB-Shape-threePoints{display:inline-block}.CDB-Shape-threePoints.is-horizontal{transform:rotate(90deg)}.CDB-Shape-threePointsItem{width:2px;height:2px;margin-bottom:5px;background:#2E3C43}.CDB-Shape-threePointsItem.is-round{border-radius:50%}.CDB-Shape-threePointsItem:last-child{margin-bottom:0}.CDB-Shape-threePoints.is-small .CDB-Shape-threePointsItem{width:2px;height:2px;margin-bottom:3px}.CDB-Shape-threePoints.is-medium .CDB-Shape-threePointsItem{width:4px;height:4px;margin-bottom:3px}.CDB-Shape-threePoints.is-blue .CDB-Shape-threePointsItem{background:#3AA9E3}.CDB-Shape-threePoints.is-white .CDB-Shape-threePointsItem{background:#fff}.CDB-ArrowToogle{position:relative;height:100%}.CDB-ArrowToogle::after,.CDB-ArrowToogle::before{display:block;position:absolute;top:8px;width:10px;height:1px;background:#2E3C43;content:''}.CDB-ArrowToogle::before{left:0;transform:rotate(-45deg)}.CDB-ArrowToogle::after{right:-1px;transform:rotate(45deg)}.CDB-ArrowToogle.is-down{transform:rotate(180deg)}.CDB-ArrowToogle.is-small::before{left:2px;width:8px}.CDB-ArrowToogle.is-small::after{right:1px;width:8px}.CDB-ArrowToogle.is-blue::after,.CDB-ArrowToogle.is-blue::before{background:#3AA9E3}.CDB-ArrowToogle.is-white::after,.CDB-ArrowToogle.is-white::before{background:#fff}.CDB-Tag{padding:0 3px;border-radius:2px}.CDB-Tag.is-public{border:1px solid #9BC63B;color:#9BC63B}.CDB-Tag.is-link{border:1px solid #FEB100;color:#FEB100}.CDB-Tag.is-password{border:1px solid #FB7B23;color:#FB7B23}.CDB-Tag.is-private{border:1px solid #F15743;color:#F15743}.CDB-Text{font-family:'Open Sans'}.CDB-Text.is-semibold{font-weight:600}.CDB-Text.is-light{font-weight:300}.CDB-Text.is-upper{text-transform:uppercase}.CDB-Size-huge{font-size:26px;line-height:34px}.CDB-Size-large{font-size:16px;line-height:22px}.CDB-Size-medium{font-size:12px;line-height:16px}.CDB-Size-small{font-size:10px;line-height:14px}.CDB-FontSize-small{font-size:10px}.CDB-FontSize-medium{font-size:12px}@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}.CDB-IconFont{display:inline-block;font-family:CartoIcon;font-style:normal;font-weight:400;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;line-height:1}.CDB-IconFont--center{vertical-align:middle}.CDB-IconFont--top{vertical-align:top}.CDB-IconFont--small{font-size:11px}.CDB-IconFont-clock::before{content:'\E001'}.CDB-IconFont-stats::before{content:'\E002'}.CDB-IconFont-heartEmpty::before{content:'\E003'}.CDB-IconFont-heartFill::before{content:'\E004'}.CDB-IconFont-alert::before{content:'\E005'}.CDB-IconFont-rows::before{content:'\E006'}.CDB-IconFont-check::before{content:'\E007'}.CDB-IconFont-dribbble::before{content:'\E008'}.CDB-IconFont-twitter::before{content:'\E009'}.CDB-IconFont-caretDown::before{content:'\E00A'}.CDB-IconFont-lightbulb::before{content:'\E00B'}.CDB-IconFont-explore::before{content:'\E00C'}.CDB-IconFont-drop::before{content:'\E00D'}.CDB-IconFont-wizard::before{content:'\E00E'}.CDB-IconFont-info::before{content:'\E00F'}.CDB-IconFont-fork::before{content:'\E010'}.CDB-IconFont-facebook::before{content:'\E011'}.CDB-IconFont-folder::before{content:'\E012'}.CDB-IconFont-dropbox::before{content:'\E013'}.CDB-IconFont-cloud::before{content:'\E014'}.CDB-IconFont-step::before{content:'\E015'}.CDB-IconFont-addDocument::before{content:'\E016'}.CDB-IconFont-arrowNext::before{content:'\E017'}.CDB-IconFont-arrowPrev::before{content:'\E018'}.CDB-IconFont-close::before{content:'\E019'}.CDB-IconFont-cartoFante::before{content:'\E01A'}.CDB-IconFont-lock::before{content:'\E01B'}.CDB-IconFont-cartoDB::before{content:'\E01C'}.CDB-IconFont-lens::before{content:'\E01D'}.CDB-IconFont-closeLimits::before{content:'\E01E'}.CDB-IconFont-defaultUser::before{content:'\E01F'}.CDB-IconFont-cockroach::before{content:'\E020'}.CDB-IconFont-floppy::before{content:'\E021'}.CDB-IconFont-trash::before{content:'\E022'}.CDB-IconFont-wifi::before{content:'\E023'}.CDB-IconFont-unlock::before{content:'\E024'}.CDB-IconFont-unlockWithEllipsis::before{content:'\E025'}.CDB-IconFont-gift::before{content:'\E026'}.CDB-IconFont-people::before{content:'\E027'}.CDB-IconFont-play::before{content:'\E028'}.CDB-IconFont-add::before{content:'\E029'}.CDB-IconFont-map::before{content:'\E02A'}.CDB-IconFont-anchor::before{content:'\E02B'}.CDB-IconFont-key::before{content:'\E02C'}.CDB-IconFont-calendar::before{content:'\E02D'}.CDB-IconFont-document::before{content:'\E02E'}.CDB-IconFont-eye::before{content:'\E02F'}.CDB-IconFont-marker::before{content:'\E030'}.CDB-IconFont-progressBar::before{content:'\E031'}.CDB-IconFont-book::before{content:'\E032'}.CDB-IconFont-notes::before{content:'\E033'}.CDB-IconFont-rectangles::before{content:'\E034'}.CDB-IconFont-mountain::before{content:'\E035'}.CDB-IconFont-points::before{content:'\E036'}.CDB-IconFont-snake::before{content:'\E037'}.CDB-IconFont-boss::before{content:'\E038'}.CDB-IconFont-rocket::before{content:'\E039'}.CDB-IconFont-barometer::before{content:'\E03A'}.CDB-IconFont-dollar::before{content:'\E03B'}.CDB-IconFont-email::before{content:'\E03C'}.CDB-IconFont-label::before{content:'\E03D'}.CDB-IconFont-outside::before{content:'\E03E'}.CDB-IconFont-jigsaw::before{content:'\E03F'}.CDB-IconFont-tools::before{content:'\E040'}.CDB-IconFont-question::before{content:'\E041'}.CDB-IconFont-layerStack::before{content:'\E042'}.CDB-IconFont-alarm::before{content:'\E043'}.CDB-IconFont-cloudDownArrow::before{content:'\E044'}.CDB-IconFont-pencil::before{content:'\E045'}.CDB-IconFont-fountainPen::before{content:'\E046'}.CDB-IconFont-emptyDoc::before{content:'\E047'}.CDB-IconFont-mergeArrow::before{content:'\E048'}.CDB-IconFont-mergeColumns::before{content:'\E049'}.CDB-IconFont-mergeSpatial::before{content:'\E04A'}.CDB-IconFont-globe::before{content:'\E04B'}.CDB-IconFont-chevronDown::before{content:'\E04C'}.CDB-IconFont-streets::before{content:'\E04D'}.CDB-IconFont-keys::before{content:'\E04E'}.CDB-IconFont-facebookSquare::before{content:'\E04F'}.CDB-IconFont-fullscreen::before{content:'\E050'}.CDB-IconFont-rArrowLight::before{content:'\E051'}.CDB-IconFont-share::before{content:'\E052'}.CDB-IconFont-linkedin::before{content:'\E053'}.CDB-IconFont-calendarBlank::before{content:'\E054'}.CDB-IconFont-creativeCommons::before{content:'\E055'}.CDB-IconFont-bubble::before{content:'\E056'}.CDB-IconFont-bars::before{content:'\E057'}.CDB-IconFont-arrowMenuLight::before{content:'\E058'}.CDB-IconFont-tieFighter::before{content:'\E059'}.CDB-IconFont-ray::before{content:'\E05A'}.CDB-IconFont-markup::before{content:'\E05B'}.CDB-IconFont-table::before{content:'\E05C'}.CDB-IconFont-airlock::before{content:'\E05D'}.CDB-IconFont-pin::before{content:'\E05E'}.CDB-IconFont-attache::before{content:'\E05F'}.CDB-IconFont-download::before{content:'\E060'}.CDB-IconFont-group::before{content:'\E061'}.CDB-IconFont-dashboard::before{content:'\E062'}.CDB-IconFont-spinner::before{content:'\E063'}.CDB-IconFont-mapsearch::before{content:'\E064'}.CDB-IconFont-rArrow::before{content:'\E065'}body{color:#2E3C43}a{color:#3AA9E3;text-decoration:none;background-color:transparent}a:hover{text-decoration:underline}@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"),url(//themes.googleusercontent.com/static/fonts/opensans/v8/DXI1ORHCpsQm3Vp6mXoaTeY5mlVXtdNkpsMpKkrDXP4.woff) format("woff")}@font-face{font-family:'Open Sans';font-style:normal;font-weight:400;src:local("Open Sans"),local("OpenSans"),url(//themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3aCWcynf_cDxXwCLxiixG1c.ttf) format("truetype"),url(//themes.googleusercontent.com/static/fonts/opensans/v8/u-WUoqrET9fUeobQW7jkRbO3LdcAZYWl9Si6vvxL-qU.woff) format("woff")}@font-face{font-family:'Open Sans';font-style:normal;font-weight:600;src:local("Open Sans Semibold"),local("OpenSans-Semibold"),url(//themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3aCWcynf_cDxXwCLxiixG1c.ttf) format("truetype"),url(//themes.googleusercontent.com/static/fonts/opensans/v8/MTP_ySUJH_bn48VBG8sNSuY5mlVXtdNkpsMpKkrDXP4.woff) format("woff")}.u-tSpace{margin-top:4px}.u-tSpace--m{margin-top:8px}.u-tSpace-xl{margin-top:12px}.u-rSpace--s{margin-right:2px}.u-rSpace{margin-right:4px}.u-rSpace--m{margin-right:8px}.u-rSpace--xl{margin-right:12px}.u-bSpace{margin-bottom:4px}.u-bSpace--m{margin-bottom:8px}.u-bSpace--xl{margin-bottom:12px}.u-lSpace{margin-left:4px}.u-lSpace--xl{margin-left:12px}.u-mainTextColor{color:#2E3C43}.u-secondaryTextColor{color:#636D72}.u-altTextColor{color:#979EA1}.u-hintTextColor{color:#CBCED0}.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{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}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}abbr[title]{border-bottom:1px dotted}mark{background:#ff0;color:#000}sub,sup{line-height:0;position:relative}sup{top:-.5em}sub{bottom:-.25em}hr{box-sizing:content-box;height:0}pre,textarea{overflow:auto}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible;margin:0;padding:0;border:none;background:0 0}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[type=checkbox],input[type=radio]{-moz-appearance:none;-webkit-appearance:none;appearance:none;box-sizing:border-box;padding:0;outline:0;cursor:pointer}input[type=range]::-webkit-slider-thumb{-moz-appearance:none;-webkit-appearance:none;appearance:none}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}optgroup{font-weight:700}input{line-height:normal;-moz-appearance:none;-webkit-appearance:none;appearance:none}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font:inherit;font-size:100%;vertical-align:baseline}body{margin:0;line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:''}table{border-collapse:collapse;border-spacing:0}dd,dt{display:inline-block} \ No newline at end of file diff --git a/fonts/cartoIcon.eot b/fonts/cartoIcon.eot index 968d338f79986d281f793c39f6aa0619ed9cfd16..2576dc62f250870a603e80bba956e8d98c22341b 100644 GIT binary patch delta 55 zcmZ26nQ_Hr#tAme)^lwq+OK2Y@S|(uhpE!GbFJg~ZN4&aGyY-#f=dshFTm){3m7>( E0A~6XTL1t6 delta 55 zcmZ26nQ_Hr#tAme`nOvq+OK2ojhry?!&K>(+xqeRHeVUI8GkVV!KL#(!7zIB0!9uG E0B4sJ)c^nh diff --git a/fonts/cartoIcon.ttf b/fonts/cartoIcon.ttf index 8101d995b89104d42150f72eaba6951ebac694ad..2d62f639618a5bf9dcc16374549e281bc4b7c83d 100644 GIT binary patch delta 47 wcmew}k@3$&#tDwh8-8?6beSq`JJ&j%-{va=H{&k`Ah`4}`T~sJ_=Up*0M*nJ6951J delta 47 wcmew}k@3$&#tDwhy^#|px=fXBxvd}1Z}XLboADO|5L`On6AYs_e&O%{0K$F}6aWAK diff --git a/fonts/cartoIcon.woff b/fonts/cartoIcon.woff index a3d00c1b6963850c00d609172f9adc7a4ea13946..7e71af27833bf447d93b4fe1636c3a17b1410647 100644 GIT binary patch delta 61 zcmV-D0K)&gT)bS6c>}Qcim`mQCMh-z)8qMVzA|t#{sM|HTzVLN0Y<+m|NosUg7FWK T%fY||5(NOA+Ye^5TPNWLl+GM4 delta 61 zcmV-D0K)&gT)bS6c>|4Ekg Basics +
  • + Avatars + +
  • Boxes
  • @@ -10122,6 +10130,9 @@ return jQuery;
  • + Carousel +
    • +
  • Colors
  • + Headers +
    • +
  • Lists
  • - Loader + Loader +
  • Menu @@ -10157,15 +10175,25 @@ return jQuery;
  • Shapes
  • + Tags +
    • +
  • Typography
    • @@ -11052,10 +11080,54 @@ hsla(120, 100%, 50%, 1); -
    +
    -

    Boxes/Box Dropdown

    +

    Avatars/List

    + +
    + +
    +
      +
    • + User Name +
      • +
    • + User Name +
      • +
    • + User Name +
      • +
    • + +
      • +
    +
    + +
    +
    +<ul class="CDB-AvatarList">
+  <li class="CDB-AvatarList-item">
+    <img src="/src/img/avatar-40x40.png" alt="User Name" class="CDB-AvatarList-itemMedia">
+  </li>
+  <li class="CDB-AvatarList-item">
+    <img src="/src/img/avatar-40x40.png" alt="User Name" class="CDB-AvatarList-itemMedia">
+  </li>
+  <li class="CDB-AvatarList-item">
+    <img src="/src/img/avatar-40x40.png" alt="User Name" class="CDB-AvatarList-itemMedia">
+  </li>
+  <li class="CDB-AvatarList-itemMore">
+    <button class="CDB-Text is-semibold CDB-Size-small u-secondaryTextColor">+ 16</button>
+  </li>
+</ul>
+
    +
    + +
    +
    + +
    +

    Boxes/Dropdown

    @@ -11069,6 +11141,272 @@ hsla(120, 100%, 50%, 1);
    + +
    + +
    +

    Boxes/Info Boxes

    + +
    + +
    +
    +

    ABOUT PREVIEW MODE

    +

    He's a queer man, Captain Ahab—so some thinkbut a good one. Oh, thou'lt like him well enough; no fear, no fear

    +

    CLOSE

    +
    +
    +
    +
    +
    +

    ABOUT PREVIEW MODE

    +

    He's a queer man, Captain Ahab—so some thinkbut a good one. Oh, thou'lt like him well enough; no fear, no fear

    +
      +
    • +

      CLOSE

      +
      • +
    • + +
      • +
    +
    +
    + +
    +
    +<div class="CDB-InfoBox">
+  <h2 class="CDB-Text is-semibold CDB-Size-small u-bSpace--m">ABOUT PREVIEW MODE</h2>
+  <p class="CDB-Text CDB-Size-medium u-bSpace--m">He&apos;s a queer man, Captain Ahab&#x2014;so some thinkbut a good one. Oh, thou&apos;lt like him well enough; no fear, no fear</p>
+  <p class="CDB-Text is-semibold CDB-Size-small"><a href="#">CLOSE</a></p>
+</div>
+<br>
+<br>
+<br>
+<div class="CDB-InfoBox is-alert">
+  <h2 class="CDB-Text is-semibold CDB-Size-small u-bSpace--m">ABOUT PREVIEW MODE</h2>
+  <p class="CDB-Text CDB-Size-medium u-bSpace--m">He&apos;s a queer man, Captain Ahab&#x2014;so some thinkbut a good one. Oh, thou&apos;lt like him well enough; no fear, no fear</p>
+  <ul class="CDB-InfoBox-footer">
+    <li class="CDB-InfoBox-footerItem">
+      <p class="CDB-Text is-semibold CDB-Size-small"><a href="#">CLOSE</a></p>
+    </li>
+    <li class="CDB-InfoBox-footerItem CDB-InfoBox-footerItem--right">
+      <button class="CDB-Button CDB-Button--secondary CDB-Button--small">
+        <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
+      </button>
+    </li>
+  </ul>
+</div>
+
    +
    + +
    +
    + +
    +

    Boxes/Loader

    + +
    + +
    +
    +
      +
    • +
      +
      +
      +
      +
      +
      +

      Query applied. Showing 2,561 rows, Query applied. Showing 2,561 rows, Query applied. Showing 2,561 rows Query applied. Showing 2,561 rowsQuery applied. Showing 2,561 rows Query applied. Showing 2,561 rows

      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      • +
    +
    +
    +
    +
    +
    +
    +
    +
      +
    • +
      +
      +
      +
      +
      +
      +

      Finished importing populated_places_2

      +
      +
      • +
    • +
      +
      +
      +
      +

      Geocoding populated_places_2 (28%)

      +
      +
      +
      +
      +
      +
      +
      • +
    + +
    +
    +
    +
    +
    +
    +
    +
      +
    • +
      +
      +
      +
      +
      +
      +

      Error in query. Data might be outdated

      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      • +
    +
    +
    + +
    +
    +<div class="CDB-BoxLoader">
+  <ul class="CDB-BoxLoader-inner">
+    <li class="CDB-BoxLoader-item">
+      <div class="CDB-Shape u-rSpace--m">
+        <div class="CDB-Shape-CircleItem is-green is-medium">
+          <div class="CDB-Shape-tick is-medium is-green"></div>
+        </div>
+      </div>
+      <div class="CDB-BoxLoader-info">
+        <p class="CDB-Text CDB-Size-medium">Query applied. Showing 2,561 rows, Query applied. Showing 2,561 rows, Query applied. Showing 2,561 rows Query applied. Showing 2,561 rowsQuery applied. Showing 2,561 rows Query applied. Showing 2,561 rows</p>
+      </div>
+      <div class="CDB-BoxLoader-actions">
+        <div class="CDB-Shape">
+          <div class="CDB-Shape-threePoints is-small is-blue">
+            <div class="CDB-Shape-threePointsItem"></div>
+            <div class="CDB-Shape-threePointsItem"></div>
+            <div class="CDB-Shape-threePointsItem"></div>
+          </div>
+        </div>
+      </div>
+    </li>
+  </ul>
+</div>
+<br>
+<br>
+<br>
+<br>
+<br>
+<div class="CDB-BoxLoader">
+  <ul class="CDB-BoxLoader-inner">
+    <li class="CDB-BoxLoader-item">
+      <div class="CDB-Shape u-rSpace--m">
+        <div class="CDB-Shape-CircleItem is-green is-medium">
+          <div class="CDB-Shape-tick is-medium is-green"></div>
+        </div>
+      </div>
+      <div class="CDB-BoxLoader-info">
+        <p class="CDB-Text CDB-Size-medium">Finished importing <a href="#">populated_places_2</a></p>
+      </div>
+    </li>
+    <li class="CDB-BoxLoader-item is-working">
+      <div class="CDB-LoaderIcon u-rSpace--m">
+        <div class="CDB-LoaderIcon-item"></div>
+      </div>
+      <div class="CDB-BoxLoader-info">
+        <p class="CDB-Text CDB-Size-medium">Geocoding populated_places_2 (28%)</p>
+      </div>
+      <div class="CDB-BoxLoader-actions">
+        <div class="CDB-Shape">
+          <div class="CDB-Shape-close is-blue is-large"></div>
+        </div>
+      </div>
+    </li>
+  </ul>
+  <ul class="CDB-BoxLoader-inner">
+    <li class="CDB-BoxLoader-item">
+      <div class="CDB-Shape u-rSpace--m">
+        <div class="CDB-Shape-CircleItem is-green is-medium">
+          <div class="CDB-Shape-tick is-medium is-green"></div>
+        </div>
+      </div>
+      <div class="CDB-BoxLoader-info">
+        <p class="CDB-Text CDB-Size-medium">Finished importing <a href="#">populated_places_2</a></p>
+      </div>
+    </li>
+  </ul>
+</div>
+<br>
+<br>
+<br>
+<br>
+<br>
+<div class="CDB-BoxLoader">
+  <ul class="CDB-BoxLoader-inner">
+    <li class="CDB-BoxLoader-item">
+      <div class="CDB-Shape u-rSpace--m">
+        <div class="CDB-Shape-CircleItem is-red">
+          <div class="CDB-Shape-close is-medium is-red"></div>
+        </div>
+      </div>
+      <div class="CDB-BoxLoader-info">
+        <p class="CDB-Text CDB-Size-medium">Error in query. Data might be outdated</p>
+      </div>
+      <div class="CDB-BoxLoader-actions">
+        <div class="CDB-Shape">
+          <div class="CDB-Shape-threePoints is-small is-blue">
+            <div class="CDB-Shape-threePointsItem"></div>
+            <div class="CDB-Shape-threePointsItem"></div>
+            <div class="CDB-Shape-threePointsItem"></div>
+          </div>
+        </div>
+      </div>
+    </li>
+  </ul>
+</div>
+
    +
    +
    @@ -11095,6 +11433,10 @@ hsla(120, 100%, 50%, 1);
    SAVE + +


    @@ -11115,6 +11457,11 @@ hsla(120, 100%, 50%, 1); + + + @@ -11136,6 +11483,10 @@ hsla(120, 100%, 50%, 1); <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span> </button> +<button class="CDB-Button CDB-Button--primary CDB-Button--icon"> + <i class="CDB-IconFont CDB-IconFont-ray CDB-Size-small"></i> +</button> + <br> <br> <br> @@ -11156,6 +11507,11 @@ hsla(120, 100%, 50%, 1); <button class="CDB-Button CDB-Button--primary CDB-Button--small is-disabled"> <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span> </button> + + <button class="CDB-Button CDB-Button--primary CDB-Button--icon"> + <i class="CDB-IconFont CDB-IconFont-ray CDB-Size-small"></i> + </button> + </div> @@ -11250,6 +11606,40 @@ hsla(120, 100%, 50%, 1); + +
    + +
    +

    Carousel

    + +
    + +
    +
    +
      +
    • +
    • +
    • +
    • +
    • +
    +
    +
    + +
    +
    +<div>
+  <ul class="CDB-Carousel">
+    <li class="CDB-CarouselItem is-selected"></li>
+    <li class="CDB-CarouselItem"></li>
+    <li class="CDB-CarouselItem"></li>
+    <li class="CDB-CarouselItem"></li>
+    <li class="CDB-CarouselItem"></li>
+  </ul>
+</div>
+
    +
    +
    @@ -11367,16 +11757,34 @@ hsla(120, 100%, 50%, 1);
    - - - +
    + + +
    +
    + + +
    +
    + + +
    -<input type="checkbox" name="vehicle" value="Bike" class="CDB-Checkbox" checked>
-<input type="checkbox" name="vehicle" value="Bus" class="CDB-Checkbox">
-<input type="checkbox" name="vehicle" value="Car" class="CDB-Checkbox" disabled>
+<div class="u-iBlock">
+  <input class="CDB-Checkbox" type="checkbox" name="vehicle" value="Bike" checked>
+  <span class="u-iBlock CDB-Checkbox-face"></span>
+</div>
+<div class="u-iBlock">
+  <input class="CDB-Checkbox" type="checkbox" name="vehicle" value="Bus">
+  <span class="u-iBlock CDB-Checkbox-face"></span>
+</div>
+<div class="u-iBlock">
+  <input class="CDB-Checkbox" type="checkbox" name="vehicle" value="Car" disabled>
+  <span class="u-iBlock CDB-Checkbox-face"></span>
+</div>
    @@ -11411,26 +11819,30 @@ hsla(120, 100%, 50%, 1);
    - - +
    + + + +
    +
    + + + +



    - +
    + + + +

    @@ -11441,21 +11853,23 @@ hsla(120, 100%, 50%, 1);

    RADIO

    -

    RADIO

    +

    RADIO

    @@ -11464,26 +11878,30 @@ hsla(120, 100%, 50%, 1); 
    -<label class="u-iblock CDB-Text CDB-Size-medium u-rSpace--xl">
-  <input class="CDB-Radio u-iBlock u-rSpace--s" type="radio" name="True" value="01" checked>
-  <span class="u-iBlock">True</span>
-</label>
-<label class="u-iblock CDB-Text CDB-Size-medium">
-  <input class="CDB-Radio u-iBlock u-rSpace--s" type="radio" name="True" value="02" checked>
-  <span class="u-iBlock">False</span>
-</label>
+<div class="u-iBlock CDB-Text CDB-Size-medium u-rSpace--xl">
+  <input class="CDB-Radio" type="radio" name="veritas" value="01">
+  <span class="u-iBlock CDB-Radio-face"></span>
+  <label class="u-iBlock u-lSpace">True</label>
+</div>
+<div class="u-iBlock CDB-Text CDB-Size-medium u-rSpace--xl">
+  <input class="CDB-Radio" type="radio" name="veritas" value="02" checked>
+  <span class="u-iBlock CDB-Radio-face"></span>
+  <label class="u-iBlock u-lSpace">False</label>
+</div>
 
 <br>
 <br>
 <br>
 
-<label class="u-iblock CDB-Text CDB-Size-medium u-rSpace--xl">
-  <input class="CDB-Checkbox u-iBlock u-rSpace--s" type="checkbox" name="hobbies" value="Sport">
-  <span class="u-iBlock">Sport</span>
-</label>
+<div class="u-iblock CDB-Text CDB-Size-medium u-rSpace--xl">
+  <input class="CDB-Checkbox" type="checkbox" name="hobbies" value="Sport">
+  <span class="u-iBlock CDB-Checkbox-face"></span>
+  <label class="u-iBlock u-lSpace">Sport</label>
+</div>
 <label class="u-iblock CDB-Text CDB-Size-medium">
-  <input class="CDB-Checkbox u-iBlock u-rSpace--s" type="checkbox" name="hobbies" value="Travel">
-  <span class="u-iBlock">Travel</span>
+  <input class="CDB-Checkbox" type="checkbox" name="hobbies" value="Travel">
+  <span class="u-iBlock CDB-Checkbox-face"></span>
+  <label class="u-iBlock u-lSpace">Travel</label>
 </label>
 
 <br>
@@ -11494,21 +11912,23 @@ hsla(120, 100%, 50%, 1);
    <p class="CDB-Legend u-iBlock CDB-Text is-semibold CDB-Size-small u-rSpace--m">RADIO</p> <ul class="CDB-Text CDB-Size-medium u-iBlock"> <li class="u-iBlock u-rSpace--xl"> - <label> - <input class="CDB-Checkbox u-iBlock u-rSpace--s" type="checkbox" name="Gender" value="Travel"> - <span class="u-iBlock">Travel</span> - </label> + <div class="u-iblock CDB-Text CDB-Size-medium u-rSpace--xl"> + <input class="CDB-Checkbox" type="checkbox" name="hobbies" value="Sport"> + <span class="u-iBlock CDB-Checkbox-face"></span> + <label class="u-iBlock u-lSpace">Sport</label> + </div> </li> <li class="u-iblock"> - <label> - <input class="CDB-Checkbox u-iBlock u-rSpace--s" type="checkbox" name="Gender" value="Travel"> - <span class="u-iBlock">Travel</span> + <label class="u-iblock CDB-Text CDB-Size-medium"> + <input class="CDB-Checkbox" type="checkbox" name="hobbies" value="Travel"> + <span class="u-iBlock CDB-Checkbox-face"></span> + <label class="u-iBlock u-lSpace">Travel</label> </label> </li> </ul> </fieldset> <fieldset class="u-tSpace-xl CDB-Text"> - <p class="CDB-Legend u-iBlock is-semibold CDB-Size-small u-rSpace--m">RADIO</p> + <p class="CDB-Legend u-iBlock CDB-Text is-semibold CDB-Size-small u-rSpace--m">RADIO</p> <div class="u-iBlock"> <input type="text" name="text" placeholder="DejaVu Sans" class="CDB-InputText"> </div> @@ -11525,16 +11945,34 @@ hsla(120, 100%, 50%, 1);
    - - - +
    + + +
    +
    + + +
    +
    + + +
    -<input class="CDB-Radio" type="radio" name="Gender" value="01" checked>
-<input class="CDB-Radio" type="radio" name="Gender" value="02">
-<input class="CDB-Radio" type="radio" name="Gender" value="03" disabled>
+<div class="u-iBlock">
+  <input class="CDB-Radio" type="radio" name="gender" value="01" checked>
+  <span class="u-iBlock CDB-Radio-face"></span>
+</div>
+<div class="u-iBlock">
+  <input class="CDB-Radio" type="radio" name="gender" value="02">
+  <span class="u-iBlock CDB-Radio-face"></span>
+</div>
+<div class="u-iBlock">
+  <input class="CDB-Radio" type="radio" name="gender" value="03" disabled>
+  <span class="u-iBlock CDB-Radio-face"></span>
+</div>
    @@ -11595,28 +12033,362 @@ hsla(120, 100%, 50%, 1); -
    +
    -

    Forms/Toogle

    +

    Forms/Toggle

    - +
    + + + + +
    -<label class="CDB-Text CDB-Size-small is-semibold u-rSpace--xl">
-  <span class="u-iBlock">TOOLS</span>
-  <input class="CDB-Toogle u-iBlock" type="checkbox" name="Analysis">
-  <span class="u-iBlock">SQL</span>
-</label>
+<div class="CDB-Text CDB-Size-small is-semibold u-rSpace--xl">
+  <label class="u-iBlock">TOOLS</label>
+  <input class="CDB-Toggle u-iBlock" type="checkbox" name="analysis">
+  <span class="u-iBlock CDB-ToggleFace"></span>
+  <label class="u-iBlock">SQL</label>
+</div>
+
    +
    + +
    +
    + +
    +

    Headers

    + +
    + +
    +
    +
    +

    Name Map

    +
    + +
    +
    +
    +
    +
    +
    +
    +     +
    +
    +
      +
    • + +
      • +
    • +
        +
      • + User Name +
        • +
      • + User Name +
        • +
      • + User Name +
        • +
      • + +
        • +
      +
      • +
    • +

      Published 8 days ago

      +
      • +
    +
    + +
    +
    +
    + +
    + + + +
    +
    +

    Stadiums Affected Stadiums Affected Stadiums AffectedStadiums Affected Stadiums Affected Stadiums Affected Stadiums Affected

    + +
    +
    +
      +
    • +
    • +
    +
    +

    populates_places

    +
    +
    + +
    +
    +
    + +
    + + + +
    +
    +

    Basemap

    +
    + +
    +
    +
    +
    +
    +
    +
    +     +
    +
    +

    Positron by CartoDB

    +
    +
    + +
    +
    +
    + +
    + + + +
    + +
    +
      +
    • +
    • +
    +
    +

    populates_places

    +
    +
    + +
    +
    +
    + +
    +
    1
    + +
    +
    +

    Type

    + +
    + +
    +
    +
    +     +
    +
    + +

    Histogram

    +

    Distribution of a numeric variable in a range

    +
    +
    + +
    +
    +
    +
    + +
    +
    +<div class="CDB-HeaderInfo is-block">
+  <div class="CDB-HeaderInfo-Title u-bSpace">
+    <h2 class="CDB-HeaderInfo-TitleText CDB-Text CDB-Size-huge is-light">Name Map</h2>
+    <div class="CDB-HeaderInfo-Actions">
+      <a href="#">
+          <div class="CDB-Shape">
+            <div class="CDB-Shape-threePoints is-blue is-small">
+              <div class="CDB-Shape-threePointsItem"></div>
+              <div class="CDB-Shape-threePointsItem"></div>
+              <div class="CDB-Shape-threePointsItem"></div>
+            </div>
+          </div>
+      </a>
+    </div>
+  </div>
+  <ul class="CDB-HeaderInfo-List">
+    <li class="CDB-HeaderInfo-ListItem">
+      <button class="CDB-Tag is-public CDB-Text is-semibold CDB-Size-small u-iBlock">
+        PUBLIC
+      </button>
+    </li>
+    <li class="CDB-HeaderInfo-ListItem">
+      <ul class="CDB-AvatarList u-iBlock">
+        <li class="CDB-AvatarList-item">
+          <img src="/src/img/avatar-40x40.png" alt="User Name" class="CDB-AvatarList-itemMedia">
+        </li>
+        <li class="CDB-AvatarList-item">
+          <img src="/src/img/avatar-40x40.png" alt="User Name" class="CDB-AvatarList-itemMedia">
+        </li>
+        <li class="CDB-AvatarList-item">
+          <img src="/src/img/avatar-40x40.png" alt="User Name" class="CDB-AvatarList-itemMedia">
+        </li>
+        <li class="CDB-AvatarList-itemMore">
+          <button class="CDB-Text is-semibold CDB-Size-small">+ 16</button>
+        </li>
+      </ul>
+    </li>
+    <li class="CDB-HeaderInfo-ListItem">
+      <p class="CDB-HeaderInfo-Text CDB-Text CDB-Size-medium u-iBlock u-altTextColor">Published 8 days ago</p>
+    </li>
+  </ul>
+</div>
+
+<br>
+<br>
+<br>
+
+<div class="CDB-HeaderInfo">
+  <a href="#" class="u-rSpace--xl CDB-HeaderInfo-Back">
+    <i class="CDB-IconFont CDB-IconFont-arrowPrev Size-large"></i>
+  </a>
+  <div class="CDB-HeaderInfo-Inner">
+    <div class="CDB-HeaderInfo-Title u-bSpace">
+      <h2 class="CDB-HeaderInfo-TitleText CDB-Text CDB-Size-huge is-light">Stadiums Affected Stadiums Affected Stadiums AffectedStadiums Affected Stadiums Affected Stadiums Affected Stadiums Affected </h2>
+      <ul class="CDB-HeaderInfo-Actions">
+        <li class="CDB-HeaderInfo-ActionsItem">
+          <button class="CDB-Button CDB-Button--primary CDB-Button--icon">
+            <i class="CDB-IconFont CDB-IconFont-ray CDB-Size-small"></i>
+          </button>
+        </li>
+        <li class="CDB-HeaderInfo-ActionsItem">
+          <a href="#">
+              <div class="CDB-Shape">
+                <div class="CDB-Shape-threePoints is-blue is-small">
+                  <div class="CDB-Shape-threePointsItem"></div>
+                  <div class="CDB-Shape-threePointsItem"></div>
+                  <div class="CDB-Shape-threePointsItem"></div>
+                </div>
+              </div>
+          </a>
+        </li>
+      </ul>
+    </div>
+    <div class="CDB-Shape u-iBlock">
+      <ul class="CDB-Shape-Dataset is-small is-grey">
+        <li class="CDB-Shape-DatasetItem"></li>
+        <li class="CDB-Shape-DatasetItem"></li>
+      </ul>
+    </div>
+    <p class="CDB-Text CDB-Size-medium u-iBlock"><a href="#" class="u-iBlock">populates_places</a></p>
+  </div>
+</div>
+
+<br>
+<br>
+<br>
+
+<div class="CDB-HeaderInfo">
+  <a href="#" class="u-rSpace--xl CDB-HeaderInfo-Back">
+    <i class="CDB-IconFont CDB-IconFont-arrowPrev Size-large"></i>
+  </a>
+  <div class="CDB-HeaderInfo-Inner">
+    <div class="CDB-HeaderInfo-Title u-bSpace">
+      <h2 class="CDB-HeaderInfo-TitleText CDB-Text CDB-Size-huge is-light">Basemap</h2>
+      <div class="CDB-HeaderInfo-Actions">
+        <a href="#">
+            <div class="CDB-Shape">
+              <div class="CDB-Shape-threePoints is-blue is-small">
+                <div class="CDB-Shape-threePointsItem"></div>
+                <div class="CDB-Shape-threePointsItem"></div>
+                <div class="CDB-Shape-threePointsItem"></div>
+              </div>
+            </div>
+        </a>
+      </div>
+    </div>
+    <p class="CDB-HeaderInfo-Text CDB-Text CDB-Size-medium u-altTextColor">Positron by CartoDB</p>
+  </div>
+</div>
+
+<br>
+<br>
+<br>
+
+<div class="CDB-HeaderInfo">
+  <a href="#" class="u-rSpace--xl CDB-HeaderInfo-Back">
+    <i class="CDB-IconFont CDB-IconFont-arrowPrev Size-large"></i>
+  </a>
+  <div class="CDB-HeaderInfo-Inner">
+    <input type="text" name="text" placeholder="DejaVu Sans" class="CDB-InputText CDB-Text u-bSpace--m">
+    <div class="CDB-Shape u-iBlock">
+      <ul class="CDB-Shape-Dataset is-small is-grey">
+        <li class="CDB-Shape-DatasetItem"></li>
+        <li class="CDB-Shape-DatasetItem"></li>
+      </ul>
+    </div>
+    <p class="CDB-Text CDB-Size-medium u-iBlock"><a href="#" class="u-iBlock">populates_places</a></p>
+  </div>
+</div>
+
+<br>
+<br>
+<br>
+
+<div class="CDB-HeaderInfo">
+  <div class="CDB-HeaderNumeration CDB-Text is-semibold u-rSpace--m">1</div>
+
+  <div class="CDB-HeaderInfo-Inner CDB-Text">
+    <div class="CDB-HeaderInfo-Title u-bSpace--m">
+      <h2 class="CDB-Text CDB-HeaderInfo-TitleText CDB-Size-large">Type</h2>
+
+      <div class="CDB-HeaderInfo-Actions">
+        <a href="#">
+          <div class="CDB-Shape">
+            <div class="CDB-ArrowToogle is-blue is-small is-down"></div>
+          </div>
+        </a>
+      </div>
+    </div>
+
+    <p class="CDB-Text is-upper CDB-FontSize-small u-altTextColor u-bSpace--m">Histogram</p>
+    <p class="CDB-Text CDB-Size-medium u-altTextColor">Distribution of a numeric variable in a range</p>
+  </div>
+</div>
+
+<br>
+<br>
+<br>
    @@ -11639,12 +12411,49 @@ hsla(120, 100%, 50%, 1);
    -
    +
    -

    Loader

    -

    This is the generic loader for widgets, maps, components, ... -There is only one state 'is-visible', in order to make it visible.

    +

    Loader/circle

    + +
    + +
    +
    +
    +
    +
    +
    + +
    +
    +
    +
    +
    +
    + +
    +
    +<div style="padding: 20px;">
+  <div class="CDB-LoaderIcon">
+    <div class="CDB-LoaderIcon-item"></div>
+  </div>
+</div>
+
+<div style="padding: 20px; background: #2E3C43;">
+  <div class="CDB-LoaderIcon is-grey">
+    <div class="CDB-LoaderIcon-item is-grey"></div>
+  </div>
+</div>
+
    +
    + +
    +
    + +
    +

    Loader/principal

    +

    This is the generic loader for widgets, maps, components, ...

    @@ -11678,10 +12487,10 @@ There is only one state 'is-visible', in order to make it visible.

    POP-UP @@ -11742,10 +12551,10 @@ There is only one state 'is-visible', in order to make it visible.

    <a class="CDB-NavMenu-Link" href="#">POP-UP</a> <ul class="CDB-NavSubmenu CDB-Size-small"> <li class="CDB-NavSubmenu-Item is-active"> - <a href="#" class="CDB-NavSubmenu-Link">CLICK <span class="CDB-NavSubmenu-Status">NONE</span></a> + <a href="#" class="CDB-NavSubmenu-Link">CLICK <span class="CDB-NavSubmenu-Status u-hintTextColor">NONE</span></a> </li> <li class="CDB-NavSubmenu-Item"> - <a href="#" class="CDB-NavSubmenu-Link">HOVER <span class="CDB-NavSubmenu-Status">NONE</span></a> + <a href="#" class="CDB-NavSubmenu-Link">HOVER <span class="CDB-NavSubmenu-Status u-hintTextColor">NONE</span></a> </li> </ul> </li> @@ -11794,10 +12603,578 @@ There is only one state 'is-visible', in order to make it visible.

    -
    +
    -

    Shapes/Dot

    +

    Shapes/Add

    +

    Description

    +
    + +
    +

    16px

    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +

    12px

    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + +
    +
    +<h2>16px</h2>
+<div style="padding: 20px;">
+  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
+    <div class="CDB-Shape-add"></div>
+  </div>
+</div>
+<div style="padding: 20px;">
+  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
+    <div class="CDB-Shape-add is-blue"></div>
+  </div>
+</div>
+<div style="padding: 20px; background: #2E3C43;">
+  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .08);">
+    <div class="CDB-Shape-add is-white"></div>
+  </div>
+</div>
+<br>
+<br>
+<br>
+<br>
+<h2>12px</h2>
+<div style="padding: 20px;">
+  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
+    <div class="CDB-Shape-add is-small"></div>
+  </div>
+</div>
+<div style="padding: 20px;">
+  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
+    <div class="CDB-Shape-add is-blue is-small"></div>
+  </div>
+</div>
+<div style="padding: 20px; background: #2E3C43;">
+  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .08);">
+    <div class="CDB-Shape-add is-white is-small"></div>
+  </div>
+</div>
+
    +
    + +
    +
    + +
    +

    Shapes/Arrow

    +

    Description

    +
    + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + +
    +
    +<div style="padding: 20px;">
+  <div class="CDB-Shape-Arrow"></div>
+</div>
+<div style="padding: 20px;">
+  <div class="CDB-Shape-Arrow is-blue"></div>
+</div>
+<div style="padding: 20px; background: #2E3C43">
+  <div class="CDB-Shape-Arrow is-white"></div>
+</div>
+
    +
    + +
    +
    + +
    +

    Shapes/Check circle

    +

    Description

    +
    + +
    +

    16px

    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +

    12px

    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + +
    +
    +<h2>16px</h2>
+<div style="padding: 20px;">
+  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
+    <div class="CDB-Shape-CircleItem">
+      <div class="CDB-Shape-tick is-medium"></div>
+    </div>
+  </div>
+</div>
+<div style="padding: 20px;">
+  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
+    <div class="CDB-Shape-CircleItem is-blue">
+      <div class="CDB-Shape-tick is-medium is-blue"></div>
+    </div>
+  </div>
+</div>
+<div style="padding: 20px; background: #2E3C43;">
+  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .08);">
+    <div class="CDB-Shape-CircleItem is-white">
+      <div class="CDB-Shape-tick is-medium is-white"></div>
+    </div>
+  </div>
+</div>
+<br>
+<br>
+<br>
+<br>
+<h2>12px</h2>
+<div style="padding: 20px;">
+  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
+    <div class="CDB-Shape-CircleItem is-small">
+      <div class="CDB-Shape-tick is-small"></div>
+    </div>
+  </div>
+</div>
+<div style="padding: 20px;">
+  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
+    <div class="CDB-Shape-CircleItem is-blue is-small">
+      <div class="CDB-Shape-tick is-small is-blue"></div>
+    </div>
+  </div>
+</div>
+<div style="padding: 20px; background: #2E3C43;">
+  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .08);">
+    <div class="CDB-Shape-CircleItem is-white is-small">
+      <div class="CDB-Shape-tick is-small is-white"></div>
+    </div>
+  </div>
+</div>
+
    +
    + +
    +
    + +
    +

    Shapes/Close

    +

    Description

    +
    + +
    +

    16px

    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +

    12px

    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + +
    +
    +<h2>16px</h2>
+<div style="padding: 20px;">
+  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
+    <div class="CDB-Shape-close is-huge"></div>
+  </div>
+</div>
+<div style="padding: 20px;">
+  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
+    <div class="CDB-Shape-close is-blue is-huge"></div>
+  </div>
+</div>
+<div style="padding: 20px; background: #2E3C43;">
+  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .08);">
+    <div class="CDB-Shape-close is-white is-huge"></div>
+  </div>
+</div>
+<br>
+<br>
+<br>
+<br>
+<h2>12px</h2>
+<div style="padding: 20px;">
+  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
+    <div class="CDB-Shape-close is-large"></div>
+  </div>
+</div>
+<div style="padding: 20px;">
+  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
+    <div class="CDB-Shape-close is-blue is-large"></div>
+  </div>
+</div>
+<div style="padding: 20px; background: #2E3C43;">
+  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .08);">
+    <div class="CDB-Shape-close is-white is-large"></div>
+  </div>
+</div>
+
    +
    + +
    +
    + +
    +

    Shapes/Dash

    +

    Description

    +
    + +
    +

    16px

    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +

    12px

    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + +
    +
    +<h2>16px</h2>
+<div style="padding: 20px;">
+  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
+    <div class="CDB-Shape-dash"></div>
+  </div>
+</div>
+<div style="padding: 20px;">
+  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
+    <div class="CDB-Shape-dash is-blue"></div>
+  </div>
+</div>
+<div style="padding: 20px; background: #2E3C43;">
+  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .08);">
+    <div class="CDB-Shape-dash is-white"></div>
+  </div>
+</div>
+<br>
+<br>
+<br>
+<br>
+<h2>12px</h2>
+<div style="padding: 20px;">
+  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
+    <div class="CDB-Shape-dash is-small"></div>
+  </div>
+</div>
+<div style="padding: 20px;">
+  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
+    <div class="CDB-Shape-dash is-blue is-small"></div>
+  </div>
+</div>
+<div style="padding: 20px; background: #2E3C43;">
+  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .08);">
+    <div class="CDB-Shape-dash is-white is-small"></div>
+  </div>
+</div>
+
    +
    + +
    +
    + +
    +

    Shapes/Dataset

    +

    Description

    +
    + +
    +

    16px

    +
    +
    +
      +
    • +
    • +
    +
    +
    +
    +
    +
      +
    • +
    • +
    +
    +
    +
    +
    +
      +
    • +
    • +
    +
    +
    +
    +
    +
      +
    • +
    • +
    +
    +
    +
    +
    +
    +
    + +

    12px

    +
    +
    +
      +
    • +
    • +
    +
    +
    +
    +
    +
      +
    • +
    • +
    +
    +
    +
    +
    +
      +
    • +
    • +
    +
    +
    +
    +
    +
      +
    • +
    • +
    +
    +
    +
    + +
    +
    +<h2>16px</h2>
+<div style="padding: 20px;">
+  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
+    <ul class="CDB-Shape-Dataset">
+      <li class="CDB-Shape-DatasetItem"></li>
+      <li class="CDB-Shape-DatasetItem"></li>
+    </ul>
+  </div>
+</div>
+<div style="padding: 20px;">
+  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
+    <ul class="CDB-Shape-Dataset is-blue">
+      <li class="CDB-Shape-DatasetItem"></li>
+      <li class="CDB-Shape-DatasetItem"></li>
+    </ul>
+  </div>
+</div>
+<div style="padding: 20px;">
+  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
+    <ul class="CDB-Shape-Dataset is-grey">
+      <li class="CDB-Shape-DatasetItem"></li>
+      <li class="CDB-Shape-DatasetItem"></li>
+    </ul>
+  </div>
+</div>
+<div style="padding: 20px; background: #2E3C43;">
+  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
+    <ul class="CDB-Shape-Dataset is-white">
+      <li class="CDB-Shape-DatasetItem"></li>
+      <li class="CDB-Shape-DatasetItem"></li>
+    </ul>
+  </div>
+</div>
+<br>
+<br>
+<br>
+<br>
+
+<h2>12px</h2>
+<div style="padding: 20px;">
+  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
+    <ul class="CDB-Shape-Dataset is-small">
+      <li class="CDB-Shape-DatasetItem"></li>
+      <li class="CDB-Shape-DatasetItem"></li>
+    </ul>
+  </div>
+</div>
+<div style="padding: 20px;">
+  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
+    <ul class="CDB-Shape-Dataset is-small is-blue">
+      <li class="CDB-Shape-DatasetItem"></li>
+      <li class="CDB-Shape-DatasetItem"></li>
+    </ul>
+  </div>
+</div>
+<div style="padding: 20px;">
+  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
+    <ul class="CDB-Shape-Dataset is-small is-grey">
+      <li class="CDB-Shape-DatasetItem"></li>
+      <li class="CDB-Shape-DatasetItem"></li>
+    </ul>
+  </div>
+</div>
+<div style="padding: 20px; background: #2E3C43;">
+  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
+    <ul class="CDB-Shape-Dataset is-small is-white">
+      <li class="CDB-Shape-DatasetItem"></li>
+      <li class="CDB-Shape-DatasetItem"></li>
+    </ul>
+  </div>
+</div>
+
    +
    + +
    +
    + +
    +

    Shapes/Dots

    You may resize and change the colors of the icons with the glyph--classes. Available sizes and colors listed:

    @@ -11814,92 +13191,816 @@ There is only one state 'is-visible', in order to make it visible.

    -
    +
    -

    Shapes/arrow

    +

    Shapes/Error circle

    Description

    -
    +

    16px

    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +

    12px

    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    -<div></div>
+<h2>16px</h2>
+<div style="padding: 20px;">
+  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
+    <div class="CDB-Shape-CircleItem">
+      <div class="CDB-Shape-close is-medium"></div>
+    </div>
+  </div>
+</div>
+<div style="padding: 20px;">
+  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
+    <div class="CDB-Shape-CircleItem is-blue">
+      <div class="CDB-Shape-close is-medium is-blue"></div>
+    </div>
+  </div>
+</div>
+<div style="padding: 20px; background: #2E3C43;">
+  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .08);">
+    <div class="CDB-Shape-CircleItem is-white">
+      <div class="CDB-Shape-close is-medium is-white"></div>
+    </div>
+  </div>
+</div>
+<br>
+<br>
+<br>
+<br>
+<h2>12px</h2>
+<div style="padding: 20px;">
+  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
+    <div class="CDB-Shape-CircleItem is-small">
+      <div class="CDB-Shape-close is-small"></div>
+    </div>
+  </div>
+</div>
+<div style="padding: 20px;">
+  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
+    <div class="CDB-Shape-CircleItem is-blue is-small">
+      <div class="CDB-Shape-close is-small is-blue"></div>
+    </div>
+  </div>
+</div>
+<div style="padding: 20px; background: #2E3C43;">
+  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .08);">
+    <div class="CDB-Shape-CircleItem is-white is-small">
+      <div class="CDB-Shape-close is-small is-white"></div>
+    </div>
+  </div>
+</div>
    -
    +
    -

    Shapes/hamburguer

    +

    Shapes/Hamburguer

    Description

    -
    +
    +
    +
    +
    +
    +
    +
    + +
    +
    +
    +
    +
    +
    +
    + +
    +
    +
    +
    +
    +
    +
    -<div></div>
+<div style="padding: 20px">
+  <div class="CDB-Shape-hamburguer">
+    <div class="CDB-Shape-hamburguerItem"></div>
+    <div class="CDB-Shape-hamburguerItem"></div>
+    <div class="CDB-Shape-hamburguerItem"></div>
+  </div>
+</div>
+
+<div style="padding: 20px;">
+  <div class="CDB-Shape-hamburguer is-blue">
+    <div class="CDB-Shape-hamburguerItem"></div>
+    <div class="CDB-Shape-hamburguerItem"></div>
+    <div class="CDB-Shape-hamburguerItem"></div>
+  </div>
+</div>
+
+<div style="background: #2E3C43; padding: 20px;">
+  <div class="CDB-Shape-hamburguer is-white">
+    <div class="CDB-Shape-hamburguerItem"></div>
+    <div class="CDB-Shape-hamburguerItem"></div>
+    <div class="CDB-Shape-hamburguerItem"></div>
+  </div>
+</div>
    -
    +
    -

    Shapes/lens

    +

    Shapes/Magnify

    Description

    -
    +

    16px

    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +

    12px

    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    -<div></div>
+<h2>16px</h2>
+<div style="padding: 20px;">
+  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .08);">
+    <div class="CDB-Shape-magnify"></div>
+  </div>
+</div>
+<div style="padding: 20px;">
+  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .08);">
+    <div class="CDB-Shape-magnify is-blue"></div>
+  </div>
+</div>
+<div style="background: #2E3C43; padding: 20px;">
+  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .08);">
+    <div class="CDB-Shape-magnify is-white"></div>
+  </div>
+</div>
+<br>
+<br>
+<br>
+<br>
+<br>
+<h2>12px</h2>
+<div style="padding: 20px;">
+  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .08);">
+    <div class="CDB-Shape-magnify is-small"></div>
+  </div>
+</div>
+<div style="padding: 20px;">
+  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .08);">
+    <div class="CDB-Shape-magnify is-blue is-small"></div>
+  </div>
+</div>
+<div style="background: #2E3C43; padding: 20px;">
+  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .08);">
+    <div class="CDB-Shape-magnify is-white is-small"></div>
+  </div>
+</div>
    -
    +
    -

    Shapes/magnify

    +

    Shapes/Move

    Description

    -
    +

    16px

    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +

    12px

    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    -<div></div>
+<h2>16px</h2>
+<div style="padding: 20px;">
+  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
+    <div class="CDB-Shape-Move">
+      <div class="CDB-Shape-MoveItem is-first"></div>
+      <div class="CDB-Shape-MoveItem is-second"></div>
+      <div class="CDB-Shape-MoveItem is-third"></div>
+    </div>
+  </div>
+</div>
+<div style="padding: 20px;">
+  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
+    <div class="CDB-Shape-Move">
+      <div class="CDB-Shape-MoveItem is-blue is-first"></div>
+      <div class="CDB-Shape-MoveItem is-blue is-second"></div>
+      <div class="CDB-Shape-MoveItem is-blue is-third"></div>
+    </div>
+  </div>
+</div>
+<div style="padding: 20px; background: #2E3C43;">
+  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .08);">
+    <div class="CDB-Shape-Move">
+      <div class="CDB-Shape-MoveItem is-white is-first"></div>
+      <div class="CDB-Shape-MoveItem is-white is-second"></div>
+      <div class="CDB-Shape-MoveItem is-white is-third"></div>
+    </div>
+  </div>
+</div>
+<br>
+<br>
+<br>
+<br>
+<h2>12px</h2>
+<div style="padding: 20px;">
+  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
+    <div class="CDB-Shape-Move is-small">
+      <div class="CDB-Shape-MoveItem is-first"></div>
+      <div class="CDB-Shape-MoveItem is-second"></div>
+      <div class="CDB-Shape-MoveItem is-third"></div>
+    </div>
+  </div>
+</div>
+<div style="padding: 20px;">
+  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
+    <div class="CDB-Shape-Move is-small">
+      <div class="CDB-Shape-MoveItem is-blue is-first"></div>
+      <div class="CDB-Shape-MoveItem is-blue is-second"></div>
+      <div class="CDB-Shape-MoveItem is-blue is-third"></div>
+    </div>
+  </div>
+</div>
+<div style="padding: 20px; background: #2E3C43;">
+  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .08);">
+    <div class="CDB-Shape-Move is-small">
+      <div class="CDB-Shape-MoveItem is-white is-first"></div>
+      <div class="CDB-Shape-MoveItem is-white is-second"></div>
+      <div class="CDB-Shape-MoveItem is-white is-third"></div>
+    </div>
+  </div>
+</div>
    -
    +
    -

    Shapes/threePoints

    +

    Shapes/Three Points

    Description

    -
    +

    24px

    +
    + +
    +
    + +
    +
    + +
    +
    +
    +
    +
    +
    +
    +
    +

    16px

    +
    + +
    +
    + +
    +
    + +
    +
    +
    +
    +
    +

    12px

    +
    + +
    +
    + +
    +
    + +
    -<div></div>
+<h2>24px</h2>
+<div style="padding: 20px;">
+  <button class="CDB-Shape CDB-Shape--medium" style="background: rgba(0, 0, 0, .02);">
+    <div class="CDB-Shape-threePoints is-horizontal is-medium">
+      <div class="CDB-Shape-threePointsItem is-round"></div>
+      <div class="CDB-Shape-threePointsItem is-round"></div>
+      <div class="CDB-Shape-threePointsItem is-round"></div>
+    </div>
+  </button>
+</div>
+<div style="padding: 20px;">
+  <button class="CDB-Shape CDB-Shape--medium" style="background: rgba(0, 0, 0, .02);">
+    <div class="CDB-Shape-threePoints is-horizontal is-blue is-medium">
+      <div class="CDB-Shape-threePointsItem is-round"></div>
+      <div class="CDB-Shape-threePointsItem is-round"></div>
+      <div class="CDB-Shape-threePointsItem is-round"></div>
+    </div>
+  </button>
+</div>
+<div style="padding: 20px; background: #2E3C43;">
+  <button class="CDB-Shape CDB-Shape--medium" style="background: rgba(0, 0, 0, .08);">
+    <div class="CDB-Shape-threePoints is-horizontal is-white is-medium">
+      <div class="CDB-Shape-threePointsItem is-round"></div>
+      <div class="CDB-Shape-threePointsItem is-round"></div>
+      <div class="CDB-Shape-threePointsItem is-round"></div>
+    </div>
+  </button>
+</div>
+<br>
+<br>
+<br>
+<br>
+<br>
+<br>
+<br>
+<h2>16px</h2>
+<div style="padding: 20px;">
+  <button class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
+    <div class="CDB-Shape-threePoints">
+      <div class="CDB-Shape-threePointsItem"></div>
+      <div class="CDB-Shape-threePointsItem"></div>
+      <div class="CDB-Shape-threePointsItem"></div>
+    </div>
+  </button>
+</div>
+<div style="padding: 20px;">
+  <button class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
+    <div class="CDB-Shape-threePoints is-blue">
+      <div class="CDB-Shape-threePointsItem"></div>
+      <div class="CDB-Shape-threePointsItem"></div>
+      <div class="CDB-Shape-threePointsItem"></div>
+    </div>
+  </button>
+</div>
+<div style="padding: 20px; background: #2E3C43;">
+  <button class="CDB-Shape" style="background: rgba(0, 0, 0, .08);">
+    <div class="CDB-Shape-threePoints is-white">
+      <div class="CDB-Shape-threePointsItem"></div>
+      <div class="CDB-Shape-threePointsItem"></div>
+      <div class="CDB-Shape-threePointsItem"></div>
+    </div>
+  </button>
+</div>
+<br>
+<br>
+<br>
+<br>
+<h2>12px</h2>
+<div style="padding: 20px;">
+  <button class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
+    <div class="CDB-Shape-threePoints">
+      <div class="CDB-Shape-threePointsItem"></div>
+      <div class="CDB-Shape-threePointsItem"></div>
+      <div class="CDB-Shape-threePointsItem"></div>
+    </div>
+  </button>
+</div>
+<div style="padding: 20px;">
+  <button class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
+    <div class="CDB-Shape-threePoints is-blue is-small">
+      <div class="CDB-Shape-threePointsItem"></div>
+      <div class="CDB-Shape-threePointsItem"></div>
+      <div class="CDB-Shape-threePointsItem"></div>
+    </div>
+  </button>
+</div>
+<div style="padding: 20px; background: #2E3C43;">
+  <button class="CDB-Shape" style="background: rgba(0, 0, 0, .08);">
+    <div class="CDB-Shape-threePoints is-white is-small">
+      <div class="CDB-Shape-threePointsItem"></div>
+      <div class="CDB-Shape-threePointsItem"></div>
+      <div class="CDB-Shape-threePointsItem"></div>
+    </div>
+  </button>
+</div>
+
    +
    + +
    +
    + +
    +

    Shapes/Toogle Arrows

    +

    Description

    +
    + +
    +

    16px

    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +

    12px

    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +

    16px

    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +

    12px

    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + +
    +
    +<h2>16px</h2>
+<div style="padding: 20px;">
+  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
+    <div class="CDB-ArrowToogle"></div>
+  </div>
+</div>
+<div style="padding: 20px;">
+  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
+    <div class="CDB-ArrowToogle is-blue"></div>
+  </div>
+</div>
+<div style="padding: 20px; background: #2E3C43;">
+  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .08);">
+    <div class="CDB-ArrowToogle is-white"></div>
+  </div>
+</div>
+<br>
+<br>
+<br>
+<br>
+<h2>12px</h2>
+<div style="padding: 20px;">
+  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
+    <div class="CDB-ArrowToogle is-small"></div>
+  </div>
+</div>
+<div style="padding: 20px;">
+  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
+    <div class="CDB-ArrowToogle is-blue is-small"></div>
+  </div>
+</div>
+<div style="padding: 20px; background: #2E3C43;">
+  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .08);">
+    <div class="CDB-ArrowToogle is-white is-small"></div>
+  </div>
+</div>
+<br>
+<br>
+<br>
+<br>
+<h2>16px</h2>
+<div style="padding: 20px;">
+  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
+    <div class="CDB-ArrowToogle is-down"></div>
+  </div>
+</div>
+<div style="padding: 20px;">
+  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
+    <div class="CDB-ArrowToogle is-blue is-down"></div>
+  </div>
+</div>
+<div style="padding: 20px; background: #2E3C43;">
+  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .08);">
+    <div class="CDB-ArrowToogle is-white is-down"></div>
+  </div>
+</div>
+<br>
+<br>
+<br>
+<br>
+<h2>12px</h2>
+<div style="padding: 20px;">
+  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
+    <div class="CDB-ArrowToogle is-small is-down"></div>
+  </div>
+</div>
+<div style="padding: 20px;">
+  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
+    <div class="CDB-ArrowToogle is-blue is-small is-down"></div>
+  </div>
+</div>
+<div style="padding: 20px; background: #2E3C43;">
+  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .08);">
+    <div class="CDB-ArrowToogle is-white is-small is-down"></div>
+  </div>
+</div>
+
    +
    + +
    +
    + +
    +

    Tags

    + +
    + +
    + + + + +
    + +
    +
    +<button class="CDB-Tag is-public CDB-Text is-semibold CDB-Size-small u-iBlock">
+  PUBLIC
+</button>
+<button class="CDB-Tag is-link CDB-Text is-semibold CDB-Size-small u-iBlock">
+  LINK
+</button>
+<button class="CDB-Tag is-password CDB-Text is-semibold CDB-Size-small u-iBlock">
+  PASSWORD
+</button>
+<button class="CDB-Tag is-private CDB-Text is-semibold CDB-Size-small u-iBlock">
+  PRIVATE
+</button>
    @@ -11913,20 +14014,28 @@ There is only one state 'is-visible', in order to make it visible.

    Open Sans 26/34 Regular

    +

    Open Sans 26/34 Light

    Open Sans 16/22 Regular

    Open Sans 12/16 Semibold

    -

    Open Sans 12/16 Regular

    -

    Open Sans 10/14 Semibold

    +

    Open Sans 12/16 Semibold Uppercase

    +

    Open Sans 12/16 Regular

    +

    Open Sans 12/16 Regular

    +

    Open Sans 12/16 Regular

    +

    Open Sans 10/14 Semibold

    Open Sans 10/14 Regular

     <p class="CDB-Text CDB-Size-huge">Open Sans 26/34 Regular</p>
+<p class="CDB-Text CDB-Size-huge is-light">Open Sans 26/34 Light</p>
 <p class="CDB-Text CDB-Size-large">Open Sans 16/22 Regular</p>
 <p class="CDB-Text is-semibold CDB-Size-medium">Open Sans 12/16 Semibold</p>
-<p class="CDB-Text CDB-Size-medium">Open Sans 12/16 Regular</p>
-<p class="CDB-Text is-semibold Size-small">Open Sans 10/14 Semibold</p>
+<p class="CDB-Text is-semibold is-upper CDB-Size-medium">Open Sans 12/16 Semibold Uppercase</p>
+<p class="CDB-Text CDB-Size-medium u-secondaryTextColor">Open Sans 12/16 Regular</p>
+<p class="CDB-Text CDB-Size-medium u-altTextColor">Open Sans 12/16 Regular</p>
+<p class="CDB-Text CDB-Size-medium u-hintTextColor">Open Sans 12/16 Regular</p>
+<p class="CDB-Text is-semibold CDB-Size-small">Open Sans 10/14 Semibold</p>
 <p class="CDB-Text CDB-Size-small">Open Sans 10/14 Regular</p>