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

Migrate components to PostCSS syntax

Browse Source
This commit is contained in:
rubenmoya
2017-12-22 18:10:38 +01:00
parent 654d18c232
commit 35efba2b4e
22 changed files with 826 additions and 1717 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
src/components/_avatars.css
View File

@@ -1,50 +0,0 @@
// Typography styles
// ----------------------------------------------
/* SG
# Avatars/List
```
<ul class="CDB-AvatarList">
<li class="CDB-AvatarList-item">
<img src="https://www.drupal.org/files/issues/default-avatar.png" alt="User Name" class="CDB-AvatarList-itemMedia" />
</li>
<li class="CDB-AvatarList-item">
<img src="https://www.drupal.org/files/issues/default-avatar.png" alt="User Name" class="CDB-AvatarList-itemMedia" />
</li>
<li class="CDB-AvatarList-item">
<img src="https://www.drupal.org/files/issues/default-avatar.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>
```
*/
.CDB-AvatarList {
padding-left: 12px;
}
.CDB-AvatarList-item {
display: inline-block;
margin-left: -12px;
border: 2px solid white;
border-radius: 50%;
vertical-align: middle;
}
.CDB-AvatarList-itemMore {
display: inline-block;
margin-left: -12px;
padding: 2px 6px;
border-left: 2px solid white;
border-radius: 50px;
background: var(--color-line-secondary);
}
.CDB-AvatarList-itemMedia {
width: 16px;
height: 16px;
border-radius: 50%;
}

498
src/components/_buttons.css
View File

@@ -1,498 +0,0 @@
// Buttons styles
// ----------------------------------------------
/* SG
# Buttons/Primary
Layout Component:
[CDB-Button][CDB-Button--primary | CDB-Button--secondary]
```
<button class="CDB-Button CDB-Button--loading CDB-Button--primary CDB-Button--big">
<span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
<div class="CDB-Button-loader CDB-LoaderIcon is-white">
<svg class="CDB-LoaderIcon-spinner" viewbox="0 0 50 50">
<circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"/>
</svg>
</div>
</button>
<button class="CDB-Button CDB-Button--primary CDB-Button--big is-disabled">
<span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
</button>
<button class="CDB-Button CDB-Button--loading CDB-Button--primary">
<span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
<div class="CDB-Button-loader CDB-LoaderIcon is-white">
<svg class="CDB-LoaderIcon-spinner" viewbox="0 0 50 50">
<circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"/>
</svg>
</div>
</button>
<button class="CDB-Button CDB-Button--primary is-disabled">
<span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
</button>
<button class="CDB-Button CDB-Button--loading CDB-Button--primary CDB-Button--small">
<span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
<div class="CDB-Button-loader CDB-LoaderIcon CDB-LoaderIcon--small is-white">
<svg class="CDB-LoaderIcon-spinner" viewbox="0 0 50 50">
<circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"/>
</svg>
</div>
</button>
<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>
<br/>
<br/>
<br/>
<button class="CDB-Button CDB-Button--alert CDB-Button--big">
<span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
</button>
<button class="CDB-Button CDB-Button--alert CDB-Button--big is-disabled">
<span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
</button>
<button class="CDB-Button CDB-Button--alert">
<span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
</button>
<button class="CDB-Button CDB-Button--alert is-disabled">
<span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
</button>
<button class="CDB-Button CDB-Button--alert CDB-Button--small">
<span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
</button>
<button class="CDB-Button CDB-Button--alert 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--alert CDB-Button--icon">
<i class="CDB-IconFont CDB-IconFont-ray CDB-Size-small"></i>
</button>
<br/>
<br/>
<br/>
<button class="CDB-Button CDB-Button--error CDB-Button--big">
<span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
</button>
<button class="CDB-Button CDB-Button--error CDB-Button--big is-disabled">
<span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
</button>
<button class="CDB-Button CDB-Button--error">
<span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
</button>
<button class="CDB-Button CDB-Button--error is-disabled">
<span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
</button>
<button class="CDB-Button CDB-Button--error CDB-Button--small">
<span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
</button>
<button class="CDB-Button CDB-Button--error 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--error CDB-Button--icon">
<i class="CDB-IconFont CDB-IconFont-ray CDB-Size-small"></i>
</button>
<br/>
<br/>
<br/>
<div style="background: #2E3C43; padding: 20px;">
<button class="CDB-Button CDB-Button--primary CDB-Button--big">
<span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
</button>
<button class="CDB-Button CDB-Button--primary CDB-Button--big is-disabled">
<span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
</button>
<button class="CDB-Button CDB-Button--primary">
<span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
</button>
<button class="CDB-Button CDB-Button--primary 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--small">
<span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
</button>
<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>
```
*/
.CDB-Button {
position: relative;
padding: $baseSize $baseSize + 12;
transition: background, 300ms;
border-radius: $baseSize / 2;
cursor: pointer;
box-sizing: border-box;
.CDB-Button-Text {
display: block;
}
&.is-disabled {
opacity: 0.24;
cursor: default;
}
}
.CDB-Button--loading {
.CDB-Button-loader {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0);
transform-origin: 50%;
opacity: 0;
z-index: 10;
}
.CDB-Button-Text {
transition: all 600ms;
}
&.is-loading {
cursor: default;
.CDB-Button-loader {
animation-name: showIn;
animation-duration: 600ms;
animation-fill-mode: forwards;
}
.CDB-Button-Text {
opacity: 0;
}
}
}
@keyframes showIn {
0% {
transform: translate(-50%, -50%) scale(0);
opacity: 0;
}
100% {
transform: translate(-50%, -50%) scale(1);
opacity: 1;
}
}
.CDB-Button--small {
padding: $baseSize / 2 $baseSize + 4;
border-radius: 3px;
}
.CDB-Button--big {
padding: $baseSize + 3 $baseSize + 12;
}
.CDB-Button--wide {
width: 100%;
}
.CDB-Button--icon {
padding: 7px 9px;
}
.CDB-Button--primary {
background: var(--color-blue);
color: white;
&:hover,
&:active {
background: var(--color-blue-hover);
}
&.is-loading {
&:hover,
&:active {
background: var(--color-blue);
}
}
&.is-disabled {
&:hover,
&:active {
background: var(--color-blue);
}
}
}
.CDB-Button--alert {
background: var(--color-alert);
color: white;
&:hover,
&:active {
background: darken(var(--color-alert), 8%);
}
&.is-disabled {
&:hover,
&:active {
background: var(--color-alert);
}
}
}
.CDB-Button--error,
.CDB-Button--negative {
background: var(--color-error);
color: white;
&:hover,
&:active {
background: darken(var(--color-error), 8%);
}
&.is-disabled {
&:hover,
&:active {
background: var(--color-error);
}
}
}
.CDB-Button--dashed {
padding: 13px 0;
border: 1px dashed var(--color-text-alt);
color: var(--color-blue);
&:hover {
border-color: var(--color-blue);
}
&.is-disabled {
&:hover {
border-color: var(--color-text-alt);
}
}
}
// Buttons styles
// ----------------------------------------------
/* SG
# Buttons/Secondary
```
<button class="CDB-Button CDB-Button--loading CDB-Button--secondary CDB-Button--big">
<span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
<div class="CDB-Button-loader CDB-LoaderIcon is-blue">
<svg class="CDB-LoaderIcon-spinner" viewbox="0 0 50 50">
<circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"/>
</svg>
</div>
</button>
<button class="CDB-Button CDB-Button--secondary CDB-Button--big is-disabled">
<span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
</button>
<button class="CDB-Button CDB-Button--loading CDB-Button--secondary">
<span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
<div class="CDB-Button-loader CDB-LoaderIcon is-blue">
<svg class="CDB-LoaderIcon-spinner" viewbox="0 0 50 50">
<circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"/>
</svg>
</div>
</button>
<button class="CDB-Button CDB-Button--secondary is-disabled">
<span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
</button>
<button class="CDB-Button CDB-Button--loading CDB-Button--secondary CDB-Button--small">
<span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
<div class="CDB-Button-loader CDB-LoaderIcon CDB-LoaderIcon--small is-blue">
<svg class="CDB-LoaderIcon-spinner" viewbox="0 0 50 50">
<circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"/>
</svg>
</div>
</button>
<button class="CDB-Button CDB-Button--secondary CDB-Button--small is-disabled">
<span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
</button>
<br/>
<br/>
<br/>
<div style="background: #2E3C43; padding: 20px;">
<button class="CDB-Button CDB-Button--loading CDB-Button--secondary CDB-Button--big">
<span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
<div class="CDB-Button-loader CDB-LoaderIcon is-blue">
<svg class="CDB-LoaderIcon-spinner" viewbox="0 0 50 50">
<circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"/>
</svg>
</div>
</button>
<button class="CDB-Button CDB-Button--secondary CDB-Button--big is-disabled">
<span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
</button>
<button class="CDB-Button CDB-Button--secondary">
<span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
</button>
<button class="CDB-Button CDB-Button--loading CDB-Button--secondary CDB-Button--white">
<span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
<div class="CDB-Button-loader CDB-LoaderIcon is-white">
<svg class="CDB-LoaderIcon-spinner" viewbox="0 0 50 50">
<circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"/>
</svg>
</div>
</button>
<button class="CDB-Button CDB-Button--secondary CDB-Button--white is-disabled">
<span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
</button>
<button class="CDB-Button CDB-Button--secondary is-disabled">
<span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
</button>
<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>
<button class="CDB-Button CDB-Button--secondary CDB-Button--small is-disabled">
<span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
</button>
</div>
```
*/
.CDB-Button--secondary {
color: var(--color-blue);
box-shadow: inset 0 0 0 1px var(--color-blue);
&:hover {
background: rgba(var(--color-blue), 0.08);
box-shadow: inset 0 0 0 2px var(--color-blue-hover);
}
&:active {
background: var(--color-blue);
color: white;
}
&.is-disabled {
&:hover {
background: transparent;
box-shadow: inset 0 0 0 1px var(--color-blue);
}
&:active {
background: transparent;
}
}
&.is-loading {
cursor: default;
&:hover,
&:active {
background: none;
color: var(--color-blue);
}
}
&--background {
background-color: white;
}
}
.CDB-Button--white {
color: white;
box-shadow: inset 0 0 0 1px white;
&:hover {
background: rgba(white, 0.08);
box-shadow: inset 0 0 0 2px darken(white, 8%);
}
&:active {
background: rgba($cMainBg, 0.08);
color: white;
}
&.is-disabled {
opacity: 0.24;
&:hover {
background: transparent;
box-shadow: inset 0 0 0 1px white;
}
&:active {
background: transparent;
color: white;
}
}
&.is-loading {
cursor: default;
&:hover,
&:active {
background: none;
color: white;
}
}
}

124
src/components/_colors.css
View File

@@ -1,124 +0,0 @@
// Colors styles
// ----------------------------------------------
/* SG
# Colors/structure
```
<div style="display: inline-block; width: 120px; height: 64px; margin: 0 24px 24px 0;" class="box Color-MainDark"></div>
<div style="display: inline-block; width: 120px; height: 64px; margin: 0 24px 24px 0;" class="box Color-SecondaryDark"></div>
<div style="display: inline-block; width: 120px; height: 64px; margin: 0 24px 24px 0;" class="box Color-Blue"></div>
<div style="display: inline-block; width: 120px; height: 64px; margin: 0 24px 24px 0;" class="box Color-White"></div>
<div style="display: inline-block; width: 120px; height: 64px; margin: 0 24px 24px 0;" class="box Color-SecondaryBackground"></div>
<div style="display: inline-block; width: 120px; height: 64px; margin: 0 24px 24px 0;" class="box Color-ThirdBackground"></div>
```
*/
.Color-Blue {
background: var(--color-blue);
}
.Color-White {
border: 1px solid #E5E5E5;
background: white;
}
.Color-Dark {
background: $cBlack;
}
.Color-MainDark {
background: $cMainBg;
}
.Color-SecondaryDark {
background: $cSecondaryDark;
}
.Color-SecondaryBackground {
background: $cSecondaryBackground;
}
.Color-ThirdBackground {
background: var(--color-softgray);
}
/* SG
# Colors/line
```
<div class="box Color-Blue"></div>
<div class="box Color-HoverLine"></div>
<div class="box Color-MainLine"></div>
<div class="box Color-SecondaryLine"></div>
```
*/
.Color-HoverLine {
background: var(--color-line-hover);
}
.Color-MainLine {
background: var(--color-line);
}
.Color-SecondaryLine {
background: var(--color-line-secondary);
}
/* SG
# Colors/typography
```
<div class="box Color-MainDark"></div>
<div class="box Color-Type02"></div>
<div class="box Color-Type03"></div>
<div class="box Color-Type04"></div>
<div class="box Color-White"></div>
<div class="box Color-Blue"></div>
```
*/
.Color-Type02 {
background: var(--color-text-secondary);
}
.Color-Type03 {
background: var(--color-text-alt);
}
.Color-Type04 {
background: var(--color-text-alt);
}
/* SG
# Colors/other
```
<div class="box Color-Higlight"></div>
<div class="box Color-Alert"></div>
<div class="box Color-Public"></div>
<div class="box Color-Link"></div>
<div class="box Color-Password"></div>
<div class="box Color-Error"></div>
```
*/
.Color-Higlight {
background: $cHighlight;
}
.Color-Alert {
background: var(--color-alert);
}
.Color-Public {
background: $cPublic;
}
.Color-Link {
background: $cLink;
}
.Color-Password {
background: $cPassword;
}
.Color-Error {
background: var(--color-error);
}

222
src/components/_headers.css
View File

@@ -1,222 +0,0 @@
// Typography styles
// ----------------------------------------------
/* SG
# Headers
```
<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">
<button class="u-rSpace--xl CDB-HeaderInfo-back">
<i class="CDB-IconFont CDB-IconFont-arrowPrev Size-large"></i>
</button>
<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">
<button class="u-rSpace--xl CDB-HeaderInfo-back">
<i class="CDB-IconFont CDB-IconFont-arrowPrev Size-large"></i>
</button>
<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">
<button class="u-rSpace--xl CDB-HeaderInfo-back">
<i class="CDB-IconFont CDB-IconFont-arrowPrev Size-large"></i>
</button>
<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 u-upperCase CDB-FontSize-small u-altTextColor u-bSpace--m">Histogram</p>
<p class="CDB-Text CDB-Size-medium u-altTextColor">Distribution of a numeric variable in a range</p>
</div>
</div>
<br/>
<br/>
<br/>
```
*/
.CDB-HeaderInfo {
@include display-flex();
@include align-items(flex-start);
&.is-block {
display: block;
}
}
.CDB-HeaderInfo-listItem {
display: inline-block;
margin-right: 8px;
vertical-align: middle;
&:last-child {
margin-right: 0;
}
}
.CDB-HeaderInfo-inner {
@include flex(1);
}
.CDB-HeaderInfo-back {
margin-top: 7px;
}
.CDB-HeaderInfo-title {
@include display-flex();
@include align-items(center);
}
.CDB-HeaderInfo-titleText {
@include flex(1);
width: 0;
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: $baseSize * 3;
min-width: $baseSize * 3;
height: $baseSize * 3;
border: 1px solid var(--color-line);
border-radius: 4px;
background-color: white;
color: var(--color-text-alt);
font-size: $sFontSize-small;
line-height: 23px;
text-align: center;
box-sizing: border-box;
}

23
src/components/_layer-selector.css
View File

@@ -1,23 +0,0 @@
// Layer selector and letters
// ----------------------------------------------
/* SG
# Layer selector and letters
```
<span class="CDB-SelectorLayer-letter CDB-Text CDB-Size-small u-whiteTextColor u-rSpace u-upperCase" style="background-color: #E65176">b0</span>
```
*/
.CDB-SelectorLayer {
position: relative;
}
.CDB-SelectorLayer.is-disabled {
background-color: var(--color-softgray);
}
.CDB-SelectorLayer-letter {
height: 14px;
padding: 1px 5px;
border-radius: 2px;
}

163
src/components/_loader.css
View File

@@ -1,163 +0,0 @@
// Loader styles
// ----------------------------------------------
/* SG
# Loader/principal
This is the generic loader for widgets, maps, components, ...
```
<div class="CDB-Loader is-visible"></div>
```
*/
.CDB-Loader {
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 3px;
transform: translateX(-200%);
background-image: linear-gradient(90deg, rgba(var(--color-blue), 1) 0%, #32BBFE 90%, #FAFEFF 95%);
z-index: 2;
}
.CDB-Loader.is-visible {
@include css3-prefix(animation, loader-progress 1s cubic-bezier(0, 0.85, 0.6, 0.6) infinite);
}
@include keyframes(loader-progress) {
from {
transform: translateX(-200%);
}
to {
transform: translateX(200%);
}
}
/* SG
# Loader/circle
```
<div style="padding: 20px;">
<div class="CDB-LoaderIcon is-blue">
<svg class="CDB-LoaderIcon-spinner" viewBox="0 0 50 50">
<circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"></circle>
</svg>
</div>
<div class="CDB-LoaderIcon is-dark">
<svg class="CDB-LoaderIcon-spinner" viewBox="0 0 50 50">
<circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"></circle>
</svg>
</div>
<div class="CDB-LoaderIcon CDB-LoaderIcon--big is-dark">
<svg class="CDB-LoaderIcon-spinner" viewBox="0 0 50 50">
<circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"></circle>
</svg>
</div>
</div>
<div style="padding: 20px; background: #F9F9F9;">
<div class="CDB-LoaderIcon is-dark">
<svg class="CDB-LoaderIcon-spinner" viewBox="0 0 50 50">
<circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"></circle>
</svg>
</div>
<div class="CDB-LoaderIcon CDB-LoaderIcon--big is-dark">
<svg class="CDB-LoaderIcon-spinner" viewBox="0 0 50 50">
<circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"></circle>
</svg>
</div>
</div>
<div style="padding: 20px; background: #2E3C43;">
<div class="CDB-LoaderIcon">
<svg class="CDB-LoaderIcon-spinner" viewBox="0 0 50 50">
<circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"></circle>
</svg>
</div>
<div class="CDB-LoaderIcon CDB-LoaderIcon--big">
<svg class="CDB-LoaderIcon-spinner" viewBox="0 0 50 50">
<circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"></circle>
</svg>
</div>
</div>
<div style="padding: 20px; background: #E27D61;">
<div class="CDB-LoaderIcon">
<svg class="CDB-LoaderIcon-spinner" viewBox="0 0 50 50">
<circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"></circle>
</svg>
</div>
<div class="CDB-LoaderIcon CDB-LoaderIcon--big">
<svg class="CDB-LoaderIcon-spinner" viewBox="0 0 50 50">
<circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"></circle>
</svg>
</div>
</div>
```
*/
.CDB-LoaderIcon {
width: 16px;
height: 16px;
}
.CDB-LoaderIcon-spinner {
animation: rotate 2s linear infinite;
width: 16px;
height: 16px;
}
.CDB-LoaderIcon--small,
.CDB-LoaderIcon--small .CDB-LoaderIcon-spinner {
width: 14px;
height: 14px;
}
.CDB-LoaderIcon--big,
.CDB-LoaderIcon--big .CDB-LoaderIcon-spinner {
width: 40px;
height: 40px;
}
.CDB-LoaderIcon-path {
stroke: rgba(255, 255, 255, 0.88);
stroke-linecap: round;
animation: dash 1.5s ease-in-out infinite;
stroke-width: 4px;
}
.CDB-LoaderIcon--big .CDB-LoaderIcon-path {
stroke-width: 2px;
}
.CDB-LoaderIcon.is-dark .CDB-LoaderIcon-path {
stroke: rgba(0, 0, 0, 0.24);
}
.CDB-LoaderIcon.is-blue .CDB-LoaderIcon-path {
stroke: var(--color-blue);
}
@keyframes rotate {
100% {
transform: rotate(360deg);
}
}
@keyframes dash {
0% {
stroke-dasharray: 1, 150;
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 90, 150;
stroke-dashoffset: -35;
}
100% {
stroke-dasharray: 90, 150;
stroke-dashoffset: -124;
}
}

261
src/components/_menu.css
View File

@@ -1,261 +0,0 @@
// Menu styles
// ----------------------------------------------
/* SG
# Menu/Navigation
```
<nav class="CDB-NavMenu">
<ul class="CDB-NavMenu-inner CDB-Text is-semibold CDB-Size-medium">
<li class="CDB-NavMenu-item">
<button class="CDB-NavMenu-link">DATA</button>
</li>
<li class="CDB-NavMenu-item">
<button class="CDB-NavMenu-link">STYLE</button>
</li>
<li class="CDB-NavMenu-item is-selected">
<button class="CDB-NavMenu-link">POP-UP</button>
<ul class="CDB-NavSubmenu CDB-NavSubmenu--inside CDB-Size-small">
<li class="CDB-NavSubmenu-item is-selected">
<button class="CDB-NavSubmenu-link">CLICK <span class="CDB-NavSubmenu-status u-hintTextColor">NONE</span></button>
</li>
<li class="CDB-NavSubmenu-item">
<button class="CDB-NavSubmenu-link">HOVER <span class="CDB-NavSubmenu-status u-hintTextColor">NONE</span></button>
</li>
</ul>
</li>
<li class="CDB-NavMenu-item">
<button class="CDB-NavMenu-link">LEGEND</button>
</li>
</ul>
<div style="position: absolute; right: 0; top: 0; height: 24px; width: 46px; background: red;">
<!-- ready for a button -->
</div>
</nav>
<br/><br/>
<br/><br/>
<div style="background: #2E3C43; height: 100px; padding: 20px;">
<nav class="CDB-NavMenu is-dark">
<ul class="CDB-NavMenu-inner CDB-Text is-semibold CDB-Size-medium">
<li class="CDB-NavMenu-item CDB-Text">
<button class="CDB-NavMenu-link">DATA</button>
</li>
<li class="CDB-NavMenu-item">
<button class="CDB-NavMenu-link">STYLE</button>
</li>
<li class="CDB-NavMenu-item is-selected">
<button class="CDB-NavMenu-link">POP-UP</button>
<ul class="CDB-NavSubmenu CDB-NavSubmenu--inside CDB-Size-small">
<li class="CDB-NavSubmenu-item is-selected">
<button class="CDB-NavSubmenu-link">CLICK <span class="CDB-NavSubmenu-status">NONE</span></button>
</li>
<li class="CDB-NavSubmenu-item">
<button class="CDB-NavSubmenu-link">HOVER <span class="CDB-NavSubmenu-status">NONE</span></button>
</li>
</ul>
</li>
<li class="CDB-NavMenu-item">
<button class="CDB-NavMenu-link">LEGEND</button>
</li>
</ul>
</nav>
</div>
<br/><br/>
<br/><br/>
<nav class="CDB-NavMenu">
<ul class="CDB-NavMenu-inner CDB-Text is-semibold CDB-Size-medium">
<li class="CDB-NavMenu-item">
<button class="CDB-NavMenu-link">DATA</button>
</li>
<li class="CDB-NavMenu-item">
<button class="CDB-NavMenu-link">STYLE</button>
</li>
<li class="CDB-NavMenu-item is-selected">
<button class="CDB-NavMenu-link">POP-UP</button>
</li>
<li class="CDB-NavMenu-item">
<button class="CDB-NavMenu-link">LEGEND</button>
</li>
</ul>
<ul class="CDB-NavSubmenu CDB-NavSubmenu--outside CDB-Text CDB-Size-small is-semibold js-menu">
<li class="CDB-NavSubmenu-item is-selected">
<button class="CDB-NavSubmenu-link u-upperCase">Click</button>
</li>
<li class="CDB-NavSubmenu-item">
<button class="CDB-NavSubmenu-link u-upperCase">Hover</button>
</li>
</ul>
</nav>
<br/><br/>
<br/><br/>
<div style="background: #2E3C43; height: 100px; padding: 20px;">
<nav class="CDB-NavMenu is-dark">
<ul class="CDB-NavMenu-inner CDB-Text is-semibold CDB-Size-medium">
<li class="CDB-NavMenu-item">
<button class="CDB-NavMenu-link">DATA</button>
</li>
<li class="CDB-NavMenu-item">
<button class="CDB-NavMenu-link">STYLE</button>
</li>
<li class="CDB-NavMenu-item is-selected">
<button class="CDB-NavMenu-link">POP-UP</button>
</li>
<li class="CDB-NavMenu-item">
<button class="CDB-NavMenu-link">LEGEND</button>
</li>
</ul>
<ul class="CDB-NavSubmenu CDB-NavSubmenu--outside CDB-Text CDB-Size-small is-semibold js-menu">
<li class="CDB-NavSubmenu-item is-selected">
<button class="CDB-NavSubmenu-link u-upperCase">Click</button>
</li>
<li class="CDB-NavSubmenu-item">
<button class="CDB-NavSubmenu-link u-upperCase">Hover</button>
</li>
</ul>
</nav>
</div>
```
*/
.CDB-NavMenu {
position: relative;
z-index: 2;
}
.CDB-NavMenu-inner {
position: relative;
margin-bottom: 18px;
border-bottom: 1px solid var(--color-line);
&--no-margin {
margin-bottom: 0;
}
&--is-dropdown {
padding-top: $baseSize;
padding-right: 0;
padding-bottom: 0;
padding-left: $baseSize * 2;
}
}
.CDB-NavMenu-link {
display: block;
margin-bottom: -1px;
padding: 4px 0 11px;
transition: border-color 0.2s ease-in;
border-bottom: 2px solid transparent;
border-radius: 0;
color: var(--color-blue);
&:hover {
border-bottom: 2px solid var(--color-blue-hover);
}
}
.CDB-NavMenu-item,
.CDB-NavSubmenu-item {
display: inline-block;
margin-right: 12px;
vertical-align: middle;
}
.CDB-NavMenu-item.is-selected .CDB-NavMenu-link {
border-bottom: 2px solid $cMainText;
color: $cMainText;
}
.CDB-NavMenu-item.is-disabled .CDB-NavMenu-link {
pointer-events: none;
color: var(--color-text-alt);
cursor: default;
}
.CDB-NavSubmenu {
border-bottom: 2px solid var(--color-line-secondary);
&--inside {
position: absolute;
right: 0;
left: 0;
padding-top: 14px;
}
&--outside {
margin-top: -5px;
margin-bottom: 18px;
}
}
.CDB-NavSubmenu-link {
display: block;
margin-bottom: -1px;
padding-bottom: 12px;
transition: border-color 0.2s ease-in;
border-bottom: 2px solid transparent;
border-radius: 0;
color: var(--color-blue);
&:hover {
border-bottom: 2px solid var(--color-blue-hover);
}
}
.CDB-NavSubmenu-item.is-selected .CDB-NavSubmenu-link {
border-bottom: 2px solid var(--color-line);
color: $cMainText;
}
.CDB-NavSubmenu-status {
margin-left: 2px;
}
.CDB-NavMenu.is-dark {
.CDB-NavMenu-inner,
.CDB-NavSubmenu {
border-bottom: 1px solid var(--color-text-secondary);
}
.CDB-NavMenu-link,
.CDB-NavSubmenu-link {
margin-bottom: -1px;
color: var(--color-text-alt);
&:hover {
border-bottom: 2px solid darken(var(--color-line), 8%);
}
}
.CDB-NavSubmenu-item.is-disabled .CDB-NavMenu-link {
pointer-events: none;
cursor: default;
opacity: 0.24;
}
.CDB-NavMenu-item.is-selected .CDB-NavMenu-link {
border-bottom: 2px solid var(--color-line);
color: white;
}
.CDB-NavSubmenu-item.is-selected .CDB-NavSubmenu-link {
border-bottom: 2px solid var(--color-line);
color: white;
}
.CDB-NavSubmenu-status {
color: var(--color-text-secondary);
}
}

130
src/components/_tags.css
View File

@@ -1,130 +0,0 @@
// Typography styles
// ----------------------------------------------
/* SG
# Tags / Privacy
```
<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>
<button class="CDB-Tag CDB-Text is-semibold CDB-Size-small u-iBlock">
TAG
</button>
```
*/
.CDB-Tag {
padding: 0 3px;
border: 1px solid var(--color-blue);
border-radius: 2px;
color: var(--color-blue);
&.is-public {
border: 1px solid $cPublic;
color: $cPublic;
}
&.is-link {
border: 1px solid $cLink;
color: $cLink;
}
&.is-password {
border: 1px solid $cPassword;
color: $cPassword;
}
&.is-private {
border: 1px solid var(--color-error);
color: var(--color-error);
}
}
/* SG
# Tags / Metadata
```
<ul class="CDB-ListTag CDB-Text CDB-Size-medium u-secondaryTextColor">
<li class="CDB-ListTag-item">
<button class="CDB-Tag CDB-Tag--withLink">
trees
<div class="CDB-Shape u-lSpace">
<div class="CDB-Shape-close is-blue is-large"></div>
</div>
</button>
</li>
<li class="CDB-ListTag-item">
<button class="CDB-Tag CDB-Tag--withLink">
table_merge
<div class="CDB-Shape u-lSpace">
<div class="CDB-Shape-close is-blue is-large"></div>
</div>
</button>
</li>
<li class="CDB-ListTag-item">
<button class="CDB-Tag CDB-Tag--withLink">
word
<div class="CDB-Shape u-lSpace">
<div class="CDB-Shape-close is-blue is-large"></div>
</div>
</button>
</li>
</ul>
```
*/
.CDB-ListTag {
@include display-flex();
}
.CDB-ListTag-item {
margin-right: $baseSize;
}
.CDB-Tag.CDB-Tag--withLink {
@include display-flex();
padding: $halfBaseSize $halfBaseSize $halfBaseSize $baseSize;
border-radius: $halfBaseSize;
background: rgba(var(--color-blue), 0.16);
}
/* SG
# Tags / Data Type
```
<ul class="CDB-ListTag">
<li class="CDB-ListTag-item">
<button class="CDB-Tag CDB-Tag--opaque CDB-Text CDB-Size-small u-altTextColor">
Number
</button>
</li>
<li class="CDB-ListTag-item">
<button class="CDB-Tag CDB-Tag--opaque CDB-Text CDB-Size-small u-altTextColor">
Text
</button>
</li>
<li class="CDB-ListTag-item">
<button class="CDB-Tag CDB-Tag--opaque CDB-Text CDB-Size-small u-altTextColor">
String
</button>
</li>
</ul>
```
*/
.CDB-Tag.CDB-Tag--opaque {
padding: $baseSize / 4 $halfBaseSize;
border: 0;
border-radius: $baseSize / 4;
background: rgba(0, 0, 0, 0.04);
text-transform: uppercase;
}

143
src/components/_tooltips.css
View File

@@ -1,143 +0,0 @@
// Info Tooltip
// ----------------------------------------------
/* SG
# Info Tooltip
```
<div style="position: relative; height: 100px;">
<div class="CDB-InfoTooltip CDB-InfoTooltip--up is-black">
<p class="CDB-Text CDB-Size-medium CDB-InfoTooltip-text">627K Transactions</p>
</div>
</div>
<div style="position: relative; height: 100px;">
<div class="CDB-InfoTooltip CDB-InfoTooltip--up is-error">
<p class="CDB-Text CDB-Size-medium CDB-InfoTooltip-text">627K Transactions</p>
</div>
</div>
<div style="position: relative; height: 100px;">
<div class="CDB-InfoTooltip CDB-InfoTooltip--down is-black">
<p class="CDB-Text CDB-Size-medium CDB-InfoTooltip-text">627K Transactions</p>
</div>
</div>
<div style="position: relative; height: 100px;">
<div class="CDB-InfoTooltip CDB-InfoTooltip--down is-error">
<p class="CDB-Text CDB-Size-medium CDB-InfoTooltip-text">627K Transactions</p>
</div>
</div>
<div style="position: relative; height: 100px;">
<div class="CDB-InfoTooltip CDB-InfoTooltip--left is-black">
<p class="CDB-Text CDB-Size-medium CDB-InfoTooltip-text">627K Transactions</p>
</div>
</div>
<div style="position: relative; height: 100px;">
<div class="CDB-InfoTooltip CDB-InfoTooltip--left is-error">
<p class="CDB-Text CDB-Size-medium CDB-InfoTooltip-text">627K Transactions</p>
</div>
</div>
<div style="position: relative; height: 100px;">
<div class="CDB-InfoTooltip CDB-InfoTooltip--right is-black">
<p class="CDB-Text CDB-Size-medium CDB-InfoTooltip-text">627K Transactions</p>
</div>
</div>
<div style="position: relative; height: 100px;">
<div class="CDB-InfoTooltip CDB-InfoTooltip--right is-error">
<p class="CDB-Text CDB-Size-medium CDB-InfoTooltip-text">627K Transactions</p>
</div>
</div>
```
*/
.CDB-InfoTooltip {
display: inline-block;
position: absolute;
padding: $baseSize;
border-radius: $halfBaseSize;
background: rgba($cMainBg, 0.8);
}
.CDB-InfoTooltip::after {
display: block;
position: absolute;
width: 0;
height: 0;
border: 4px solid transparent;
content: '';
}
.is-black {
&.CDB-InfoTooltip.CDB-InfoTooltip--up::after {
border-bottom-color: rgba($cMainBg, 0.8);
}
&.CDB-InfoTooltip.CDB-InfoTooltip--down::after {
border-top-color: rgba($cMainBg, 0.8);
}
&.CDB-InfoTooltip.CDB-InfoTooltip--left::after {
border-right-color: rgba($cMainBg, 0.8);
}
&.CDB-InfoTooltip.CDB-InfoTooltip--right::after {
border-left-color: rgba($cMainBg, 0.8);
}
}
.is-error {
&.CDB-InfoTooltip.CDB-InfoTooltip--up::after {
border-bottom-color: var(--color-error);
}
&.CDB-InfoTooltip.CDB-InfoTooltip--down::after {
border-top-color: var(--color-error);
}
&.CDB-InfoTooltip.CDB-InfoTooltip--left::after {
border-right-color: var(--color-error);
}
&.CDB-InfoTooltip.CDB-InfoTooltip--right::after {
border-left-color: var(--color-error);
}
}
.CDB-InfoTooltip.CDB-InfoTooltip--up::after {
top: -$baseSize;
left: calc(50% - #{$halfBaseSize});
border-top-width: $halfBaseSize;
border-top-style: solid;
}
.CDB-InfoTooltip.CDB-InfoTooltip--down::after {
bottom: -$baseSize;
left: calc(50% - #{$halfBaseSize});
border-top-width: $halfBaseSize;
border-top-style: solid;
}
.CDB-InfoTooltip.CDB-InfoTooltip--left::after {
top: calc(50% - #{$halfBaseSize});
left: -$baseSize;
border-right-width: $halfBaseSize;
border-right-style: solid;
}
.CDB-InfoTooltip.CDB-InfoTooltip--right::after {
top: calc(50% - #{$halfBaseSize});
right: -$baseSize;
border-right-width: $halfBaseSize;
border-right-style: solid;
}
.CDB-InfoTooltip.is-error {
background: var(--color-error);
}
.CDB-InfoTooltip-text {
color: white;
}

73
src/components/_typography.css
View File

@@ -1,73 +0,0 @@
// Typography styles
// ----------------------------------------------
/* SG
# Typography
```
<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 is-semibold u-upperCase CDB-Size-medium">Open Sans 12/16 Semibold Uppercase</p>
<p class="CDB-Text CDB-Size-medium u-secondaryTextColor">Open Sans 12/16 Regular</p>
<p class="CDB-Text CDB-Size-medium u-altTextColor">Open Sans 12/16 Regular</p>
<p class="CDB-Text CDB-Size-medium u-hintTextColor">Open Sans 12/16 Regular</p>
<p class="CDB-Text is-semibold CDB-Size-small">Open Sans 10/14 Semibold</p>
<p class="CDB-Text CDB-Size-small">Open Sans 10/14 Regular</p>
<span class="CDB-Text CDB-Size-small is-underlined">?</span>
```
*/
.CDB-Text {
font-family: 'Open Sans';
$sFontWeight-normal: 400;
&.is-semibold {
font-weight: $sFontWeight-semibold;
}
&.is-light {
font-weight: $sFontWeight-lighter;
}
}
.is-underlined {
border-bottom: 1px dotted var(--color-line);
}
.CDB-Size-huge {
font-size: $sFontSize-huge;
line-height: $sLineHeight-huge;
}
.CDB-Size-large {
font-size: $sFontSize-large;
line-height: $sLineHeight-large;
}
.CDB-Size-medium {
font-size: var(--font-size-medium);
line-height: var(--line-height-medium);
}
.CDB-Size-small {
font-size: $sFontSize-small;
line-height: $sLineHeight-small;
}
.CDB-Size-small.u-whiteTextColor {
-webkit-font-smoothing: initial;
}
.CDB-FontSize-small {
font-size: $sFontSize-small;
}
.CDB-FontSize-medium {
font-size: var(--font-size-medium);
}
.CDB-IconFont.is-disabled {
opacity: 0.24;
}

26
src/components/avatars.css Normal file
View File

@@ -0,0 +1,26 @@
.CDB-AvatarList {
padding-left: 12px;
}
.CDB-AvatarList-item {
display: inline-block;
margin-left: -12px;
border: 2px solid white;
border-radius: 50%;
vertical-align: middle;
}
.CDB-AvatarList-itemMore {
display: inline-block;
margin-left: -12px;
padding: 2px 6px;
border-left: 2px solid white;
border-radius: 50px;
background: var(--color-line-secondary);
}
.CDB-AvatarList-itemMedia {
width: 16px;
height: 16px;
border-radius: 50%;
}

28
src/components/_boxes.css → src/components/boxes.css
View File

@@ -1,38 +1,30 @@
// Menu styles
// ----------------------------------------------
/* SG
# Boxes/Dropdown
```
<div class="CDB-Box-modal">&nbsp;</div>
```
*/
.CDB-Box-modal {
min-width: 160px;
border: 1px solid var(--color-line);
border-radius: 4px;
background: white;
box-shadow: 0 $baseSize $baseSize * 2 0 rgba(0, 0, 0, 0.16);
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.16);
box-sizing: border-box;
}
.CDB-Box-modalHeader {
background: $cSecondaryBackground;
background: var(--color-bg-secondary);
}
.CDB-Box-modalHeaderItem {
@include display-flex();
padding: $baseSize + 4 $baseSize * 2;
display: flex;
padding: 12px 16px;
border-bottom: 1px solid var(--color-line);
}
.CDB-Box-modalHeaderItem--block {
display: block;
}
.CDB-Box-modalHeaderItem--paddingHorizontal {
padding: 0 $baseSize * 2;
padding: 0 16px;
}
.CDB-Box-modalHeaderItem--paddingVertical {
padding: $baseSize + 4 0;
padding: 12px 0;
}

233
src/components/buttons.css Normal file
View File

@@ -0,0 +1,233 @@
.CDB-Button {
position: relative;
padding: 8px 20px;
transition: background 300ms;
border-radius: 4px;
cursor: pointer;
box-sizing: border-box;
.CDB-Button-Text {
display: block;
}
&.is-disabled {
opacity: 0.24;
cursor: default;
}
}
.CDB-Button--loading {
.CDB-Button-loader {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0);
transform-origin: 50%;
opacity: 0;
z-index: 10;
}
.CDB-Button-Text {
transition: all 600ms;
}
&.is-loading {
cursor: default;
.CDB-Button-loader {
animation-name: showIn;
animation-duration: 600ms;
animation-fill-mode: forwards;
}
.CDB-Button-Text {
opacity: 0;
}
}
}
@keyframes showIn {
0% {
transform: translate(-50%, -50%) scale(0);
opacity: 0;
}
100% {
transform: translate(-50%, -50%) scale(1);
opacity: 1;
}
}
.CDB-Button--small {
padding: 4px 12px;
border-radius: 3px;
}
.CDB-Button--big {
padding: 11px 20px;
}
.CDB-Button--wide {
width: 100%;
}
.CDB-Button--icon {
padding: 7px 9px;
}
.CDB-Button--primary {
background: var(--color-blue);
color: white;
&:hover,
&:active {
background: var(--color-blue-hover);
}
&.is-loading {
&:hover,
&:active {
background: var(--color-blue);
}
}
&.is-disabled {
&:hover,
&:active {
background: var(--color-blue);
}
}
}
.CDB-Button--alert {
background: var(--color-alert);
color: white;
&:hover,
&:active {
background: color(var(--color-alert) shade(8%));
}
&.is-disabled {
&:hover,
&:active {
background: var(--color-alert);
}
}
}
.CDB-Button--error,
.CDB-Button--negative {
background: var(--color-error);
color: white;
&:hover,
&:active {
background: color(var(--color-error) shade(8%));
}
&.is-disabled {
&:hover,
&:active {
background: var(--color-error);
}
}
}
.CDB-Button--dashed {
padding: 13px 0;
border: 1px dashed var(--color-text-alt);
color: var(--color-blue);
&:hover {
border-color: var(--color-blue);
}
&.is-disabled {
&:hover {
border-color: var(--color-text-alt);
}
}
}
.CDB-Button--secondary {
color: var(--color-blue);
box-shadow: inset 0 0 0 1px var(--color-blue);
&:hover {
background: rgba(var(--color-blue), 0.08);
box-shadow: inset 0 0 0 2px var(--color-blue-hover);
}
&:active {
background: var(--color-blue);
color: white;
}
&.is-disabled {
&:hover {
background: transparent;
box-shadow: inset 0 0 0 1px var(--color-blue);
}
&:active {
background: transparent;
}
}
&.is-loading {
cursor: default;
&:hover,
&:active {
background: none;
color: var(--color-blue);
}
}
&--background {
background-color: white;
}
}
.CDB-Button--white {
color: white;
box-shadow: inset 0 0 0 1px white;
&:hover {
background: rgba(white, 0.08);
box-shadow: inset 0 0 0 2px color(white shade(8%));
}
&:active {
background: color(var(--color-text-primary) alpha(0.8%));
color: white;
}
&.is-disabled {
opacity: 0.24;
&:hover {
background: transparent;
box-shadow: inset 0 0 0 1px white;
}
&:active {
background: transparent;
color: white;
}
}
&.is-loading {
cursor: default;
&:hover,
&:active {
background: none;
color: white;
}
}
}

76
src/components/colors.css Normal file
View File

@@ -0,0 +1,76 @@
.Color-Blue {
background: var(--color-blue);
}
.Color-White {
border: 1px solid #E5E5E5;
background: white;
}
.Color-Dark {
background: #000;
}
.Color-MainDark {
background: var(--color-black);
}
.Color-SecondaryDark {
background: #282C2F;
}
.Color-SecondaryBackground {
background: var(--color-bg-secondary);
}
.Color-ThirdBackground {
background: var(--color-softgray);
}
.Color-HoverLine {
background: var(--color-line-hover);
}
.Color-MainLine {
background: var(--color-line);
}
.Color-SecondaryLine {
background: var(--color-line-secondary);
}
.Color-Type02 {
background: var(--color-text-secondary);
}
.Color-Type03 {
background: var(--color-text-alt);
}
.Color-Type04 {
background: var(--color-text-alt);
}
.Color-Higlight {
background: var(--color-highlight);
}
.Color-Alert {
background: var(--color-alert);
}
.Color-Public {
background: var(--color-public);
}
.Color-Link {
background: var(--color-share);
}
.Color-Password {
background: var(--color-password);
}
.Color-Error {
background: var(--color-error);
}

60
src/components/headers.css Normal file
View File

@@ -0,0 +1,60 @@
.CDB-HeaderInfo {
display: flex;
align-items: flex-start;
&.is-block {
display: block;
}
}
.CDB-HeaderInfo-listItem {
display: inline-block;
margin-right: 8px;
vertical-align: middle;
&:last-child {
margin-right: 0;
}
}
.CDB-HeaderInfo-inner {
flex: 1;
}
.CDB-HeaderInfo-back {
margin-top: 7px;
}
.CDB-HeaderInfo-title {
display: flex;
align-items: center;
}
.CDB-HeaderInfo-titleText {
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;
min-width: 24px;
height: 24px;
border: 1px solid var(--color-line);
border-radius: 4px;
background-color: white;
color: var(--color-text-alt);
font-size: var(--font-size-small);
line-height: 23px;
text-align: center;
box-sizing: border-box;
}

13
src/components/layer-selector.css Normal file
View File

@@ -0,0 +1,13 @@
.CDB-SelectorLayer {
position: relative;
}
.CDB-SelectorLayer.is-disabled {
background-color: var(--color-softgray);
}
.CDB-SelectorLayer-letter {
height: 14px;
padding: 1px 5px;
border-radius: 2px;
}

15
src/components/_lists.css → src/components/lists.css
View File

@@ -1,15 +1,3 @@
// List styles
// ----------------------------------------------
/* SG
# Lists/Lists Decorations
```
<div class="CDB-Box-modal">&nbsp;</div>
```
*/
.CDB-ListDecoration-item {
border-bottom: 1px solid var(--color-line-secondary);
@@ -17,12 +5,15 @@
border-bottom: 0;
}
}
.CDB-ListDecoration-itemPadding {
padding: 12px 16px;
}
.CDB-ListDecoration-itemPadding--horizontal {
padding: 0 16px;
}
.CDB-ListDecoration-itemPadding--vertical {
padding: 12px 0;
}

85
src/components/loader.css Normal file
View File

@@ -0,0 +1,85 @@
.CDB-Loader {
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 3px;
transform: translateX(-200%);
background-image: linear-gradient(90deg, rgba(var(--color-blue), 1) 0%, #32BBFE 90%, #FAFEFF 95%);
z-index: 2;
}
.CDB-Loader.is-visible {
animation: loader-progress 1s cubic-bezier(0, 0.85, 0.6, 0.6) infinite;
}
@keyframes loader-progress {
from {
transform: translateX(-200%);
}
to {
transform: translateX(200%);
}
}
.CDB-LoaderIcon {
width: 16px;
height: 16px;
}
.CDB-LoaderIcon-spinner {
animation: rotate 2s linear infinite;
width: 16px;
height: 16px;
}
.CDB-LoaderIcon--small,
.CDB-LoaderIcon--small .CDB-LoaderIcon-spinner {
width: 14px;
height: 14px;
}
.CDB-LoaderIcon--big,
.CDB-LoaderIcon--big .CDB-LoaderIcon-spinner {
width: 40px;
height: 40px;
}
.CDB-LoaderIcon-path {
stroke: rgba(255, 255, 255, 0.88);
stroke-linecap: round;
animation: dash 1.5s ease-in-out infinite;
stroke-width: 4px;
}
.CDB-LoaderIcon--big .CDB-LoaderIcon-path {
stroke-width: 2px;
}
.CDB-LoaderIcon.is-dark .CDB-LoaderIcon-path {
stroke: rgba(0, 0, 0, 0.24);
}
.CDB-LoaderIcon.is-blue .CDB-LoaderIcon-path {
stroke: var(--color-blue);
}
@keyframes rotate {
100% {
transform: rotate(360deg);
}
}
@keyframes dash {
0% {
stroke-dasharray: 1, 150;
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 90, 150;
stroke-dashoffset: -35;
}
100% {
stroke-dasharray: 90, 150;
stroke-dashoffset: -124;
}
}

131
src/components/menu.css Normal file
View File

@@ -0,0 +1,131 @@
.CDB-NavMenu {
position: relative;
z-index: 2;
}
.CDB-NavMenu-inner {
position: relative;
margin-bottom: 18px;
border-bottom: 1px solid var(--color-line);
&--no-margin {
margin-bottom: 0;
}
&--is-dropdown {
padding-top: 8px;
padding-right: 0;
padding-bottom: 0;
padding-left: 16px;
}
}
.CDB-NavMenu-link {
display: block;
margin-bottom: -1px;
padding: 4px 0 11px;
transition: border-color 0.2s ease-in;
border-bottom: 2px solid transparent;
border-radius: 0;
color: var(--color-blue);
&:hover {
border-bottom: 2px solid var(--color-blue-hover);
}
}
.CDB-NavMenu-item,
.CDB-NavSubmenu-item {
display: inline-block;
margin-right: 12px;
vertical-align: middle;
}
.CDB-NavMenu-item.is-selected .CDB-NavMenu-link {
border-bottom: 2px solid var(--color-text-primary);
color: var(--color-text-primary);
}
.CDB-NavMenu-item.is-disabled .CDB-NavMenu-link {
pointer-events: none;
color: var(--color-text-alt);
cursor: default;
}
.CDB-NavSubmenu {
border-bottom: 2px solid var(--color-line-secondary);
&--inside {
position: absolute;
right: 0;
left: 0;
padding-top: 14px;
}
&--outside {
margin-top: -5px;
margin-bottom: 18px;
}
}
.CDB-NavSubmenu-link {
display: block;
margin-bottom: -1px;
padding-bottom: 12px;
transition: border-color 0.2s ease-in;
border-bottom: 2px solid transparent;
border-radius: 0;
color: var(--color-blue);
&:hover {
border-bottom: 2px solid var(--color-blue-hover);
}
}
.CDB-NavSubmenu-item.is-selected .CDB-NavSubmenu-link {
border-bottom: 2px solid var(--color-line);
color: var(--color-text-primary);
}
.CDB-NavSubmenu-status {
margin-left: 2px;
}
.CDB-NavMenu.is-dark {
.CDB-NavMenu-inner,
.CDB-NavSubmenu {
border-bottom: 1px solid var(--color-text-secondary);
}
.CDB-NavMenu-link,
.CDB-NavSubmenu-link {
margin-bottom: -1px;
color: var(--color-text-alt);
&:hover {
border-bottom: 2px solid darken(var(--color-line), 8%);
}
}
.CDB-NavSubmenu-item.is-disabled .CDB-NavMenu-link {
pointer-events: none;
cursor: default;
opacity: 0.24;
}
.CDB-NavMenu-item.is-selected .CDB-NavMenu-link {
border-bottom: 2px solid var(--color-line);
color: white;
}
.CDB-NavSubmenu-item.is-selected .CDB-NavSubmenu-link {
border-bottom: 2px solid var(--color-line);
color: white;
}
.CDB-NavSubmenu-status {
color: var(--color-text-secondary);
}
}

49
src/components/tags.css Normal file
View File

@@ -0,0 +1,49 @@
.CDB-Tag {
padding: 0 3px;
border: 1px solid var(--color-blue);
border-radius: 2px;
color: var(--color-blue);
&.is-public {
border: 1px solid var(--color-public);
color: var(--color-public);
}
&.is-link {
border: 1px solid var(--color-share);
color: var(--color-share);
}
&.is-password {
border: 1px solid var(--color-password);
color: var(--color-password);
}
&.is-private {
border: 1px solid var(--color-error);
color: var(--color-error);
}
}
.CDB-ListTag {
display: flex;
}
.CDB-ListTag-item {
margin-right: 8px;
}
.CDB-Tag.CDB-Tag--withLink {
display: flex;
padding: 4px 4px 4px 8px;
border-radius: 4px;
background: color(var(--color-blue) alpha(16%));
}
.CDB-Tag.CDB-Tag--opaque {
padding: 2px 4px;
border: 0;
border-radius: 2px;
background: rgba(0, 0, 0, 0.04);
text-transform: uppercase;
}

88
src/components/tooltips.css Normal file
View File

@@ -0,0 +1,88 @@
.CDB-InfoTooltip {
display: inline-block;
position: absolute;
padding: 8px;
border-radius: 4px;
background: color(var(--color-black) alpha(8%));
}
.CDB-InfoTooltip::after {
display: block;
position: absolute;
width: 0;
height: 0;
border: 4px solid transparent;
content: '';
}
.is-black {
&.CDB-InfoTooltip.CDB-InfoTooltip--up::after {
border-bottom-color: color(var(--color-black) alpha(8%));
}
&.CDB-InfoTooltip.CDB-InfoTooltip--down::after {
border-top-color: color(var(--color-black) alpha(8%));
}
&.CDB-InfoTooltip.CDB-InfoTooltip--left::after {
border-right-color: color(var(--color-black) alpha(8%));
}
&.CDB-InfoTooltip.CDB-InfoTooltip--right::after {
border-left-color: color(var(--color-black) alpha(8%));
}
}
.is-error {
&.CDB-InfoTooltip.CDB-InfoTooltip--up::after {
border-bottom-color: var(--color-error);
}
&.CDB-InfoTooltip.CDB-InfoTooltip--down::after {
border-top-color: var(--color-error);
}
&.CDB-InfoTooltip.CDB-InfoTooltip--left::after {
border-right-color: var(--color-error);
}
&.CDB-InfoTooltip.CDB-InfoTooltip--right::after {
border-left-color: var(--color-error);
}
}
.CDB-InfoTooltip.CDB-InfoTooltip--up::after {
top: -8px;
left: calc(50% - 4px);
border-top-width: 4px;
border-top-style: solid;
}
.CDB-InfoTooltip.CDB-InfoTooltip--down::after {
bottom: -8px;
left: calc(50% - 4px);
border-top-width: 4px;
border-top-style: solid;
}
.CDB-InfoTooltip.CDB-InfoTooltip--left::after {
top: calc(50% - 4px);
left: -8px;
border-right-width: 4px;
border-right-style: solid;
}
.CDB-InfoTooltip.CDB-InfoTooltip--right::after {
top: calc(50% - 4px);
right: -8px;
border-right-width: 4px;
border-right-style: solid;
}
.CDB-InfoTooltip.is-error {
background: var(--color-error);
}
.CDB-InfoTooltip-text {
color: white;
}

52
src/components/typography.css Normal file
View File

@@ -0,0 +1,52 @@
.CDB-Text {
font-family: 'Open Sans';
$sFontWeight-normal: 400;
&.is-semibold {
font-weight: var(--font-weight-semibold);
}
&.is-light {
font-weight: var(--font-weight-lighter);
}
}
.is-underlined {
border-bottom: 1px dotted var(--color-line);
}
.CDB-Size-huge {
font-size: var(--font-size-huge);
line-height: var(--line-height-huge);
}
.CDB-Size-large {
font-size: var(--font-size-large);
line-height: var(--line-height-large);
}
.CDB-Size-medium {
font-size: var(--font-size-medium);
line-height: var(--line-height-medium);
}
.CDB-Size-small {
font-size: var(--font-size-small);
line-height: var(--line-height-small);
}
.CDB-Size-small.u-whiteTextColor {
-webkit-font-smoothing: initial;
}
.CDB-FontSize-small {
font-size: var(--font-size-small);
}
.CDB-FontSize-medium {
font-size: var(--font-size-medium);
}
.CDB-IconFont.is-disabled {
opacity: 0.24;
}