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

Migrate components/shapes to PostCSS syntax

Browse Source
This commit is contained in:
rubenmoya
2017-12-22 17:52:45 +01:00
parent 949ae5576a
commit 654d18c232
28 changed files with 762 additions and 1541 deletions
Download Patch File Download Diff File Expand all files Collapse all files

126
src/components/shapes/_add.css
View File

@@ -1,126 +0,0 @@
/* SG
# Shapes/Add
Description
```
<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>
```
*/
.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%;
&::before {
display: block;
position: absolute;
right: 1px;
bottom: 7px;
left: 0;
height: 1px;
background: $cMainBg;
content: '';
}
&::after {
display: block;
position: absolute;
top: 1;
bottom: 0;
left: 7px;
width: 1px;
background: $cMainBg;
content: '';
}
}
.CDB-Shape-add.is-small {
&::before {
display: block;
position: absolute;
right: 3px;
bottom: 7px;
left: 4px;
height: 1px;
background: $cMainBg;
content: '';
}
&::after {
display: block;
position: absolute;
top: 4px;
bottom: 3px;
left: 8px;
width: 1px;
background: $cMainBg;
content: '';
}
}
.CDB-Shape-add.is-blue {
&::before,
&::after {
background: var(--color-blue);
}
}
.CDB-Shape-add.is-white {
&::before,
&::after {
background: white;
}
}

151
src/components/shapes/_check-circle.css
View File

@@ -1,151 +0,0 @@
/* SG
# Shapes/Check circle
Description
```
<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>
```
*/
.CDB-Shape-CircleItem {
width: 14px;
height: 14px;
border: 1px solid $cMainBg;
border-radius: 50%;
&.is-small {
width: 12px;
height: 12px;
transform: translateY(2px);
}
&.is-blue {
border: 1px solid var(--color-blue);
}
&.is-white {
border: 1px solid white;
}
}
.CDB-Shape-tick {
display: block;
position: relative;
height: 100%;
&::before {
display: block;
position: absolute;
width: 1px;
transform: rotate(-45deg);
background: $cMainBg;
content: '';
}
&::after {
display: block;
position: absolute;
width: 1px;
transform: rotate(45deg);
background: $cMainBg;
content: '';
}
&.is-medium {
&::before {
top: 5px;
left: 4px;
height: 4px;
}
&::after {
top: 3px;
right: 5px;
height: 6px;
}
}
&.is-small {
&::before {
top: 4px;
left: 2px;
height: 3px;
}
&::after {
top: 2px;
right: 3px;
height: 5px;
}
}
}
.CDB-Shape-tick.is-blue {
&::before {
background: var(--color-blue);
}
&::after {
background: var(--color-blue);
}
}
.CDB-Shape-tick.is-white {
&::before {
background: white;
}
&::after {
background: white;
}
}
.CDB-Shape-tick.is-green {
&::before {
background: $cHighlight;
}
&::after {
background: $cHighlight;
}
}

80
src/components/shapes/_dash.css
View File

@@ -1,80 +0,0 @@
/* SG
# Shapes/Dash
Description
```
<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>
```
*/
.CDB-Shape-dash {
position: relative;
height: 100%;
&::before {
display: block;
position: absolute;
right: 2px;
bottom: 7px;
left: 2px;
height: 1px;
background: $cMainBg;
content: '';
}
}
.CDB-Shape-dash.is-small {
&::before {
right: 3px;
left: 3px;
}
}
.CDB-Shape-dash.is-blue {
&::before {
background: var(--color-blue);
}
}
.CDB-Shape-dash.is-white {
&::before {
background: white;
}
}

143
src/components/shapes/_dataset.css
View File

@@ -1,143 +0,0 @@
/* SG
# Shapes/Dataset
Description
```
<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>
```
*/
.CDB-Shape-Dataset {
padding-top: 1px;
&.is-small {
padding-top: 0;
}
}
.CDB-Shape-DatasetItem {
display: inline-block;
width: 9px;
height: 9px;
margin-left: -10px;
border: 1px solid $cMainBg;
border-radius: 50%;
background: white;
&:first-child {
position: relative;
margin-left: 0;
box-shadow: 3px 0 0 white;
z-index: 1;
}
}
.CDB-Shape-Dataset.is-small {
.CDB-Shape-DatasetItem {
width: 6px;
height: 6px;
margin-left: -7px;
&:first-child {
margin-left: 0;
box-shadow: 2px 0 0 white;
}
}
}
.CDB-Shape-Dataset.is-blue {
.CDB-Shape-DatasetItem {
border: 1px solid var(--color-blue);
}
}
.CDB-Shape-Dataset.is-grey {
.CDB-Shape-DatasetItem {
border: 1px solid var(--color-line-hover);
}
}
.CDB-Shape-Dataset.is-white {
.CDB-Shape-DatasetItem {
border: 1px solid var(--color-line-hover);
background: $cMainBg;
&:first-child {
box-shadow: 3px 0 $cMainBg;
}
}
}
.CDB-Shape-Dataset.is-white.is-small {
.CDB-Shape-DatasetItem:first-child {
box-shadow: 2px 0 $cMainBg;
}
}

25
src/components/shapes/_dots.css
View File

@@ -1,25 +0,0 @@
// Shape styles
// ----------------------------------------------
/* SG
# Shapes/Dots
You may resize and change the colors of the icons with the `glyph-`-classes. Available sizes and colors listed:
```
<button class="CDB-Shape-dot CDB-Widget-dot--navigation is-selected" data-page="3"></button>
<button class="CDB-Shape-dot CDB-Widget-dot--navigation" data-page="3"></button>
```
*/
.CDB-Shape-dot {
display: inline-block;
width: $baseSize;
height: $baseSize;
border-radius: 50%;
background: var(--color-line-secondary);
&.is-selected {
background: var(--color-text-secondary);
}
}

101
src/components/shapes/_error-circle.css
View File

@@ -1,101 +0,0 @@
/* SG
# Shapes/Error circle
Description
```
<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>
```
*/
.CDB-Shape-CircleItem {
width: 13px;
height: 13px;
border: 1px solid $cMainBg;
border-radius: 50%;
&.is-small {
width: 9px;
height: 9px;
margin: 0 auto;
}
&.is-blue {
border: 1px solid var(--color-blue);
}
&.is-white {
border: 1px solid white;
}
&.is-green {
border: 1px solid $cHighlight;
}
&.is-red {
border: 1px solid var(--color-error);
}
}
.CDB-Shape-CircleItem--fill {
&.is-blue {
border: 1px solid var(--color-blue);
background: var(--color-blue);
}
&.is-white {
border: 1px solid white;
background: white;
}
&.is-green {
border: 1px solid $cHighlight;
background: $cHighlight;
}
&.is-red {
border: 1px solid var(--color-error);
background: var(--color-error);
}
}

60
src/components/shapes/_hamburguer.css
View File

@@ -1,60 +0,0 @@
/* SG
# Shapes/Hamburguer
Description
```
<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>
```
*/
.CDB-Shape-hamburguer {
width: $baseSize * 2;
&:hover {
cursor: pointer;
}
}
.CDB-Shape-hamburguerItem {
height: $baseSize / 4;
margin-bottom: $baseSize / 4;
background: $cMainBg;
&:last-child {
margin-bottom: 0;
}
}
.CDB-Shape-hamburguer.is-blue {
.CDB-Shape-hamburguerItem {
background: var(--color-blue);
}
}
.CDB-Shape-hamburguer.is-white {
.CDB-Shape-hamburguerItem {
background: white;
}
}

113
src/components/shapes/_magnify.css
View File

@@ -1,113 +0,0 @@
/* SG
# Shapes/Magnify
Description
```
<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>
```
*/
.CDB-Shape-magnify {
display: block;
position: relative;
height: 100%;
&::before {
display: block;
position: absolute;
top: 0;
left: 0;
width: 11px;
height: 11px;
border: 1px solid $cMainBg;
border-radius: 50%;
content: '';
}
&::after {
display: block;
position: absolute;
right: 2px;
bottom: -1px;
width: 1px;
height: 7px;
transform: rotate(314deg);
background: $cMainBg;
content: '';
}
}
.CDB-Shape-magnify.is-blue {
&::before {
border: 1px solid var(--color-blue);
}
&::after {
background: var(--color-blue);
}
}
.CDB-Shape-magnify.is-white {
&::before {
border: 1px solid white;
}
&::after {
background: white;
}
}
.CDB-Shape-magnify.is-small {
&::before {
top: 3px;
left: 4px;
width: 5px;
height: 5px;
}
&::after {
display: block;
position: absolute;
right: 4px;
bottom: 3px;
width: 1px;
height: 5px;
transform: rotate(314deg);
content: '';
}
}

159
src/components/shapes/_move.css
View File

@@ -1,159 +0,0 @@
/* SG
# Shapes/Move
Description
```
<h2>16px</h2>
<div style="padding: 20px;">
<div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
<div class="CDB-Shape-rectsHandle">
<div class="CDB-Shape-rectsHandleItem is-first"></div>
<div class="CDB-Shape-rectsHandleItem is-second"></div>
<div class="CDB-Shape-rectsHandleItem 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-rectsHandle">
<div class="CDB-Shape-rectsHandleItem CDB-Shape-rectsHandleItem--blue is-first"></div>
<div class="CDB-Shape-rectsHandleItem CDB-Shape-rectsHandleItem--blue is-second"></div>
<div class="CDB-Shape-rectsHandleItem CDB-Shape-rectsHandleItem--blue 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-rectsHandle">
<div class="CDB-Shape-rectsHandleItem CDB-Shape-rectsHandleItem--grey is-first"></div>
<div class="CDB-Shape-rectsHandleItem CDB-Shape-rectsHandleItem--grey is-second"></div>
<div class="CDB-Shape-rectsHandleItem CDB-Shape-rectsHandleItem--grey 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-rectsHandle">
<div class="CDB-Shape-rectsHandleItem CDB-Shape-rectsHandleItem--white is-first"></div>
<div class="CDB-Shape-rectsHandleItem CDB-Shape-rectsHandleItem--white is-second"></div>
<div class="CDB-Shape-rectsHandleItem CDB-Shape-rectsHandleItem--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-rectsHandle is-small">
<div class="CDB-Shape-rectsHandleItem is-first"></div>
<div class="CDB-Shape-rectsHandleItem is-second"></div>
<div class="CDB-Shape-rectsHandleItem 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-rectsHandle is-small">
<div class="CDB-Shape-rectsHandleItem CDB-Shape-rectsHandleItem--blue is-first"></div>
<div class="CDB-Shape-rectsHandleItem CDB-Shape-rectsHandleItem--blue is-second"></div>
<div class="CDB-Shape-rectsHandleItem CDB-Shape-rectsHandleItem--blue is-third"></div>
</div>
</div>
</div>
<div style="padding: 20px;">
<div class="CDB-Shape">
<div class="CDB-Shape-rectsHandle is-small">
<div class="CDB-Shape-rectsHandleItem CDB-Shape-rectsHandleItem--grey is-first"></div>
<div class="CDB-Shape-rectsHandleItem CDB-Shape-rectsHandleItem--grey is-second"></div>
<div class="CDB-Shape-rectsHandleItem CDB-Shape-rectsHandleItem--grey 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-rectsHandle is-small">
<div class="CDB-Shape-rectsHandleItem CDB-Shape-rectsHandleItem--white is-first"></div>
<div class="CDB-Shape-rectsHandleItem CDB-Shape-rectsHandleItem--white is-second"></div>
<div class="CDB-Shape-rectsHandleItem CDB-Shape-rectsHandleItem--white is-third"></div>
</div>
</div>
</div>
```
*/
.CDB-Shape-rectsHandle {
position: relative;
padding: 1px 0 0;
}
.CDB-Shape-rectsHandle.is-small {
padding: 3px 0 0 1px;
.CDB-Shape-rectsHandleItem {
height: 2px;
margin-bottom: 2px;
&::before {
left: 5px;
width: 2px;
height: 2px;
}
&::after {
width: 2px;
height: 2px;
}
}
}
.CDB-Shape-rectsHandleItem {
height: 3px;
margin-bottom: 3px;
&:last-child {
margin-bottom: 0;
}
&::before {
display: block;
position: absolute;
left: 4px;
width: 3px;
height: 3px;
background: $cMainBg;
content: '';
}
&::after {
display: block;
position: absolute;
left: 9px;
width: 3px;
height: 3px;
background: $cMainBg;
content: '';
}
}
.CDB-Shape-rectsHandleItem--blue {
&::before,
&::after {
background: var(--color-blue);
}
}
.CDB-Shape-rectsHandleItem--white {
&::before,
&::after {
background: white;
}
}
.CDB-Shape-rectsHandleItem--grey {
&::before,
&::after {
background: var(--color-line-hover);
}
}

110
src/components/shapes/_paragraph.css
View File

@@ -1,110 +0,0 @@
/* SG
# Shapes/Paragrapgh
Description
```
<h2>16px</h2>
<br/>
<br/>
<div class="CDB-Shape">
<ul class="CDB-Shape-paragraph is-right">
<li class="CDB-Shape-paragraphItem">
<span class="CDB-Shape-paragraphBar CDB-Shape-paragraphBar--01"></span>
</li>
<li class="CDB-Shape-paragraphItem">
<span class="CDB-Shape-paragraphBar CDB-Shape-paragraphBar--02"></span>
</li>
<li class="CDB-Shape-paragraphItem">
<span class="CDB-Shape-paragraphBar CDB-Shape-paragraphBar--03"></span>
</li>
<li class="CDB-Shape-paragraphItem">
<span class="CDB-Shape-paragraphBar CDB-Shape-paragraphBar--04"></span>
</li>
</ul>
</div>
<br/>
<br/>
<br/>
<br/>
<div class="CDB-Shape">
<ul class="CDB-Shape-paragraph is-center">
<li class="CDB-Shape-paragraphItem">
<span class="CDB-Shape-paragraphBar CDB-Shape-paragraphBar--01"></span>
</li>
<li class="CDB-Shape-paragraphItem">
<span class="CDB-Shape-paragraphBar CDB-Shape-paragraphBar--02"></span>
</li>
<li class="CDB-Shape-paragraphItem">
<span class="CDB-Shape-paragraphBar CDB-Shape-paragraphBar--03"></span>
</li>
<li class="CDB-Shape-paragraphItem">
<span class="CDB-Shape-paragraphBar CDB-Shape-paragraphBar--04"></span>
</li>
</ul>
</div>
<br/>
<br/>
<br/>
<br/>
<div class="CDB-Shape">
<ul class="CDB-Shape-paragraph is-active">
<li class="CDB-Shape-paragraphItem">
<span class="CDB-Shape-paragraphBar CDB-Shape-paragraphBar--01"></span>
</li>
<li class="CDB-Shape-paragraphItem">
<span class="CDB-Shape-paragraphBar CDB-Shape-paragraphBar--02"></span>
</li>
<li class="CDB-Shape-paragraphItem">
<span class="CDB-Shape-paragraphBar CDB-Shape-paragraphBar--03"></span>
</li>
<li class="CDB-Shape-paragraphItem">
<span class="CDB-Shape-paragraphBar CDB-Shape-paragraphBar--04"></span>
</li>
</ul>
</div>
```
*/
.CDB-Shape-paragraph {
padding-top: 3px;
text-align: left;
}
.CDB-Shape-paragraph.is-center {
text-align: center;
}
.CDB-Shape-paragraph.is-right {
text-align: right;
}
.CDB-Shape-paragraphItem {
height: 1px;
margin-bottom: 2px;
}
.CDB-Shape-paragraphItem:last-child {
margin-bottom: 0;
}
.CDB-Shape-paragraphBar {
display: inline-block;
height: 1px;
margin-bottom: 2px;
background: var(--color-line-secondary);
vertical-align: top;
}
.CDB-Shape-paragraph.is-active .CDB-Shape-paragraphBar {
background: var(--color-blue);
}
.CDB-Shape-paragraphBar--01 {
width: 12px;
}
.CDB-Shape-paragraphBar--02 {
width: 6px;
}
.CDB-Shape-paragraphBar--03 {
width: 8px;
}
.CDB-Shape-paragraphBar--04 {
width: 4px;
}

151
src/components/shapes/_threePoints.css
View File

@@ -1,151 +0,0 @@
/* SG
# Shapes/Three Points
Description
```
<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>
```
*/
.CDB-Shape-threePoints {
display: inline-block;
padding: 0 4px;
}
.CDB-Shape-threePoints.is-horizontal {
transform: rotate(90deg);
padding: 4px 0;
}
.CDB-Shape-threePointsItem {
width: 2px;
height: 2px;
margin-bottom: 5px;
background: $cMainBg;
}
.CDB-Shape-threePointsItem.is-round {
border-radius: 50%;
}
.CDB-Shape-threePointsItem:last-child {
margin-bottom: 0;
}
.CDB-Shape-threePoints.is-small {
padding-top: 2px;
}
.CDB-Shape-threePoints.is-small .CDB-Shape-threePointsItem {
width: 2px;
height: 2px;
margin-bottom: 3px;
}
.CDB-Shape-threePoints.is-medium {
padding-top: 2px;
}
.CDB-Shape-threePoints.is-medium .CDB-Shape-threePointsItem {
width: 4px;
height: 4px;
margin-bottom: 3px;
}
.CDB-Shape-threePoints.is-blue .CDB-Shape-threePointsItem {
background: var(--color-blue);
}
.CDB-Shape-threePoints.is-white .CDB-Shape-threePointsItem {
background: white;
}

145
src/components/shapes/_toogle-arrow.css
View File

@@ -1,145 +0,0 @@
/* SG
# Shapes/Toogle Arrows
Description
```
<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>
```
*/
.CDB-ArrowToogle {
position: relative;
height: 100%;
&::before {
display: block;
position: absolute;
top: 8px;
left: 0;
width: 10px;
height: 1px;
transform: rotate(-45deg);
background: $cMainBg;
content: '';
}
&::after {
display: block;
position: absolute;
top: 8px;
right: -1px;
width: 10px;
height: 1px;
transform: rotate(45deg);
background: $cMainBg;
content: '';
}
}
.CDB-ArrowToogle.is-down {
transform: rotate(180deg);
}
.CDB-ArrowToogle.is-small {
&::before {
left: 2px;
width: 8px;
}
&::after {
right: 1px;
width: 8px;
}
}
.CDB-ArrowToogle.is-blue {
&::before {
background: var(--color-blue);
}
&::after {
background: var(--color-blue);
}
}
.CDB-ArrowToogle.is-white {
&::before {
background: white;
}
&::after {
background: white;
}
}

109
src/components/shapes/_type.css
View File

@@ -1,109 +0,0 @@
/* SG
# Shapes/Type
Description
```
<h2>8px</h2>
<div style="padding: 20px;">
<div class="CDB-Shape CDB-Shape--small">
<div class="CDB-Type CDB-Type--point">
<div class="CDB-Type-circle CDB-Type-circle--02"></div>
<div class="CDB-Type-circle CDB-Type-circle--03"></div>
<div class="CDB-Type-circle CDB-Type-circle--04"></div>
</div>
</div>
</div>
<br/>
<div style="padding: 20px;">
<div class="CDB-Shape CDB-Shape--small">
<div class="CDB-Type CDB-Type--line">
<div class="CDB-Type-circle CDB-Type-circle--02"></div>
<div class="CDB-Type-circle CDB-Type-circle--03"></div>
</div>
</div>
</div>
<br/>
<div style="padding: 20px;">
<div class="CDB-Shape CDB-Shape--small">
<div class="CDB-Type CDB-Type--polygon">
<div class="CDB-Type-circle CDB-Type-circle--01"></div>
<div class="CDB-Type-circle CDB-Type-circle--02"></div>
<div class="CDB-Type-circle CDB-Type-circle--03"></div>
<div class="CDB-Type-circle CDB-Type-circle--04"></div>
</div>
</div>
</div>
```
*/
.CDB-Shape {
width: 16px;
height: 16px;
text-align: center;
}
.CDB-Shape--small {
width: 8px;
height: 8px;
}
.CDB-Shape--medium {
width: 24px;
height: 24px;
}
.CDB-Shape:hover {
cursor: pointer;
}
.CDB-Type {
position: relative;
width: 100%;
height: 100%;
}
.CDB-Type-circle {
position: absolute;
width: 3px;
height: 3px;
border-radius: 50%;
background: var(--color-line-hover);
}
.CDB-Type-circle--01 {
top: 0;
left: 0;
}
.CDB-Type-circle--02 {
top: 0;
right: 0;
}
.CDB-Type-circle--03 {
bottom: 0;
left: 0;
}
.CDB-Type-circle--04 {
right: 0;
bottom: 0;
}
.CDB-Type--polygon::before {
display: block;
position: absolute;
top: 1px;
right: 1px;
bottom: 1px;
left: 1px;
border: 1px solid var(--color-line-hover);
content: '';
}
.CDB-Type--line::before {
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 3px;
width: 1px;
transform: rotate(45deg);
background: var(--color-line-hover);
content: '';
}

79
src/components/shapes/add.css Normal file
View File

@@ -0,0 +1,79 @@
.CDB-Shape {
width: 16px;
height: 16px;
text-align: center;
&:hover {
cursor: pointer;
}
}
.CDB-Shape--medium {
width: 24px;
height: 24px;
}
.CDB-Shape-add {
position: relative;
height: 100%;
&::before {
display: block;
position: absolute;
right: 1px;
bottom: 7px;
left: 0;
height: 1px;
background: var(--color-black);
content: '';
}
&::after {
display: block;
position: absolute;
top: 1;
bottom: 0;
left: 7px;
width: 1px;
background: var(--color-black);
content: '';
}
}
.CDB-Shape-add.is-small {
&::before {
display: block;
position: absolute;
right: 3px;
bottom: 7px;
left: 4px;
height: 1px;
background: var(--color-black);
content: '';
}
&::after {
display: block;
position: absolute;
top: 4px;
bottom: 3px;
left: 8px;
width: 1px;
background: var(--color-black);
content: '';
}
}
.CDB-Shape-add.is-blue {
&::before,
&::after {
background: var(--color-blue);
}
}
.CDB-Shape-add.is-white {
&::before,
&::after {
background: white;
}
}

25
src/components/shapes/_arrow.css → src/components/shapes/arrow.css
View File

@@ -1,26 +1,8 @@
/* SG
# 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>
```
*/
.CDB-Shape-Arrow {
position: relative;
width: 1px;
height: 8px;
background: $cMainBg;
background: var(--color-black);
&::before {
display: block;
@@ -30,7 +12,7 @@ Description
width: 5px;
height: 1px;
transform: rotate(45deg);
background: $cMainBg;
background: var(--color-black);
content: '';
}
@@ -42,9 +24,10 @@ Description
width: 5px;
height: 1px;
transform: rotate(-45deg);
background: $cMainBg;
background: var(--color-black);
content: '';
}
&.is-up {
top: 6px;
right: 9px;

101
src/components/shapes/check-circle.css Normal file
View File

@@ -0,0 +1,101 @@
.CDB-Shape-CircleItem {
width: 14px;
height: 14px;
border: 1px solid var(--color-black);
border-radius: 50%;
&.is-small {
width: 12px;
height: 12px;
transform: translateY(2px);
}
&.is-blue {
border: 1px solid var(--color-blue);
}
&.is-white {
border: 1px solid white;
}
}
.CDB-Shape-tick {
display: block;
position: relative;
height: 100%;
&::before {
display: block;
position: absolute;
width: 1px;
transform: rotate(-45deg);
background: var(--color-black);
content: '';
}
&::after {
display: block;
position: absolute;
width: 1px;
transform: rotate(45deg);
background: var(--color-black);
content: '';
}
&.is-medium {
&::before {
top: 5px;
left: 4px;
height: 4px;
}
&::after {
top: 3px;
right: 5px;
height: 6px;
}
}
&.is-small {
&::before {
top: 4px;
left: 2px;
height: 3px;
}
&::after {
top: 2px;
right: 3px;
height: 5px;
}
}
}
.CDB-Shape-tick.is-blue {
&::before {
background: var(--color-blue);
}
&::after {
background: var(--color-blue);
}
}
.CDB-Shape-tick.is-white {
&::before {
background: white;
}
&::after {
background: white;
}
}
.CDB-Shape-tick.is-green {
&::before {
background: var(--color-highlight);
}
&::after {
background: var(--color-highlight);
}
}

57
src/components/shapes/_close.css → src/components/shapes/close.css
View File

@@ -1,48 +1,3 @@
/* SG
# Shapes/Close
Description
```
<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>
```
*/
.CDB-Shape-close {
display: block;
position: relative;
@@ -53,15 +8,16 @@ Description
position: absolute;
width: 1px;
transform: rotate(-45deg);
background: $cMainBg;
background: var(--color-black);
content: '';
}
&::after {
display: block;
position: absolute;
width: 1px;
transform: rotate(45deg);
background: $cMainBg;
background: var(--color-black);
content: '';
}
@@ -71,6 +27,7 @@ Description
left: 7px;
height: 20px;
}
&::after {
top: -2px;
right: 8px;
@@ -84,6 +41,7 @@ Description
left: 7px;
height: 12px;
}
&::after {
top: 2px;
right: 8px;
@@ -97,6 +55,7 @@ Description
left: 6px;
height: 7px;
}
&::after {
top: 3px;
right: 6px;
@@ -110,6 +69,7 @@ Description
left: 4px;
height: 5px;
}
&::after {
top: 2px;
right: 4px;
@@ -122,6 +82,7 @@ Description
&::before {
background: var(--color-blue);
}
&::after {
background: var(--color-blue);
}
@@ -131,6 +92,7 @@ Description
&::before {
background: white;
}
&::after {
background: white;
}
@@ -140,6 +102,7 @@ Description
&::before {
background: var(--color-error);
}
&::after {
background: var(--color-error);
}

34
src/components/shapes/dash.css Normal file
View File

@@ -0,0 +1,34 @@
.CDB-Shape-dash {
position: relative;
height: 100%;
&::before {
display: block;
position: absolute;
right: 2px;
bottom: 7px;
left: 2px;
height: 1px;
background: var(--color-black);
content: '';
}
}
.CDB-Shape-dash.is-small {
&::before {
right: 3px;
left: 3px;
}
}
.CDB-Shape-dash.is-blue {
&::before {
background: var(--color-blue);
}
}
.CDB-Shape-dash.is-white {
&::before {
background: white;
}
}

65
src/components/shapes/dataset.css Normal file
View File

@@ -0,0 +1,65 @@
.CDB-Shape-Dataset {
padding-top: 1px;
&.is-small {
padding-top: 0;
}
}
.CDB-Shape-DatasetItem {
display: inline-block;
width: 9px;
height: 9px;
margin-left: -10px;
border: 1px solid var(--color-black);
border-radius: 50%;
background: white;
&:first-child {
position: relative;
margin-left: 0;
box-shadow: 3px 0 0 white;
z-index: 1;
}
}
.CDB-Shape-Dataset.is-small {
.CDB-Shape-DatasetItem {
width: 6px;
height: 6px;
margin-left: -7px;
&:first-child {
margin-left: 0;
box-shadow: 2px 0 0 white;
}
}
}
.CDB-Shape-Dataset.is-blue {
.CDB-Shape-DatasetItem {
border: 1px solid var(--color-blue);
}
}
.CDB-Shape-Dataset.is-grey {
.CDB-Shape-DatasetItem {
border: 1px solid var(--color-line-hover);
}
}
.CDB-Shape-Dataset.is-white {
.CDB-Shape-DatasetItem {
border: 1px solid var(--color-line-hover);
background: var(--color-black);
&:first-child {
box-shadow: 3px 0 var(--color-black);
}
}
}
.CDB-Shape-Dataset.is-white.is-small {
.CDB-Shape-DatasetItem:first-child {
box-shadow: 2px 0 var(--color-black);
}
}

11
src/components/shapes/dots.css Normal file
View File

@@ -0,0 +1,11 @@
.CDB-Shape-dot {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--color-line-secondary);
&.is-selected {
background: var(--color-text-secondary);
}
}

51
src/components/shapes/error-circle.css Normal file
View File

@@ -0,0 +1,51 @@
.CDB-Shape-CircleItem {
width: 13px;
height: 13px;
border: 1px solid var(--color-black);
border-radius: 50%;
&.is-small {
width: 9px;
height: 9px;
margin: 0 auto;
}
&.is-blue {
border: 1px solid var(--color-blue);
}
&.is-white {
border: 1px solid white;
}
&.is-green {
border: 1px solid var(--color-highlight);
}
&.is-red {
border: 1px solid var(--color-error);
}
}
.CDB-Shape-CircleItem--fill {
&.is-blue {
border: 1px solid var(--color-blue);
background: var(--color-blue);
}
&.is-white {
border: 1px solid white;
background: white;
}
&.is-green {
border: 1px solid var(--color-highlight);
background: var(--color-highlight);
}
&.is-red {
border: 1px solid var(--color-error);
background: var(--color-error);
}
}

28
src/components/shapes/hamburguer.css Normal file
View File

@@ -0,0 +1,28 @@
.CDB-Shape-hamburguer {
width: 16px;
&:hover {
cursor: pointer;
}
}
.CDB-Shape-hamburguerItem {
height: 2px;
margin-bottom: 2px;
background: var(--color-black);
&:last-child {
margin-bottom: 0;
}
}
.CDB-Shape-hamburguer.is-blue {
.CDB-Shape-hamburguerItem {
background: var(--color-blue);
}
}
.CDB-Shape-hamburguer.is-white {
.CDB-Shape-hamburguerItem {
background: white;
}
}

68
src/components/shapes/magnify.css Normal file
View File

@@ -0,0 +1,68 @@
.CDB-Shape-magnify {
display: block;
position: relative;
height: 100%;
&::before {
display: block;
position: absolute;
top: 0;
left: 0;
width: 11px;
height: 11px;
border: 1px solid var(--color-black);
border-radius: 50%;
content: '';
}
&::after {
display: block;
position: absolute;
right: 2px;
bottom: -1px;
width: 1px;
height: 7px;
transform: rotate(314deg);
background: var(--color-black);
content: '';
}
}
.CDB-Shape-magnify.is-blue {
&::before {
border: 1px solid var(--color-blue);
}
&::after {
background: var(--color-blue);
}
}
.CDB-Shape-magnify.is-white {
&::before {
border: 1px solid white;
}
&::after {
background: white;
}
}
.CDB-Shape-magnify.is-small {
&::before {
top: 3px;
left: 4px;
width: 5px;
height: 5px;
}
&::after {
display: block;
position: absolute;
right: 4px;
bottom: 3px;
width: 1px;
height: 5px;
transform: rotate(314deg);
content: '';
}
}

72
src/components/shapes/move.css Normal file
View File

@@ -0,0 +1,72 @@
.CDB-Shape-rectsHandle {
position: relative;
padding: 1px 0 0;
}
.CDB-Shape-rectsHandle.is-small {
padding: 3px 0 0 1px;
.CDB-Shape-rectsHandleItem {
height: 2px;
margin-bottom: 2px;
&::before {
left: 5px;
width: 2px;
height: 2px;
}
&::after {
width: 2px;
height: 2px;
}
}
}
.CDB-Shape-rectsHandleItem {
height: 3px;
margin-bottom: 3px;
&:last-child {
margin-bottom: 0;
}
&::before {
display: block;
position: absolute;
left: 4px;
width: 3px;
height: 3px;
background: var(--color-black);
content: '';
}
&::after {
display: block;
position: absolute;
left: 9px;
width: 3px;
height: 3px;
background: var(--color-black);
content: '';
}
}
.CDB-Shape-rectsHandleItem--blue {
&::before,
&::after {
background: var(--color-blue);
}
}
.CDB-Shape-rectsHandleItem--white {
&::before,
&::after {
background: white;
}
}
.CDB-Shape-rectsHandleItem--grey {
&::before,
&::after {
background: var(--color-line-hover);
}
}

49
src/components/shapes/paragraph.css Normal file
View File

@@ -0,0 +1,49 @@
.CDB-Shape-paragraph {
padding-top: 3px;
text-align: left;
}
.CDB-Shape-paragraph.is-center {
text-align: center;
}
.CDB-Shape-paragraph.is-right {
text-align: right;
}
.CDB-Shape-paragraphItem {
height: 1px;
margin-bottom: 2px;
}
.CDB-Shape-paragraphItem:last-child {
margin-bottom: 0;
}
.CDB-Shape-paragraphBar {
display: inline-block;
height: 1px;
margin-bottom: 2px;
background: var(--color-line-secondary);
vertical-align: top;
}
.CDB-Shape-paragraph.is-active .CDB-Shape-paragraphBar {
background: var(--color-blue);
}
.CDB-Shape-paragraphBar--01 {
width: 12px;
}
.CDB-Shape-paragraphBar--02 {
width: 6px;
}
.CDB-Shape-paragraphBar--03 {
width: 8px;
}
.CDB-Shape-paragraphBar--04 {
width: 4px;
}

52
src/components/shapes/threePoints.css Normal file
View File

@@ -0,0 +1,52 @@
.CDB-Shape-threePoints {
display: inline-block;
padding: 0 4px;
}
.CDB-Shape-threePoints.is-horizontal {
transform: rotate(90deg);
padding: 4px 0;
}
.CDB-Shape-threePointsItem {
width: 2px;
height: 2px;
margin-bottom: 5px;
background: var(--color-black);
}
.CDB-Shape-threePointsItem.is-round {
border-radius: 50%;
}
.CDB-Shape-threePointsItem:last-child {
margin-bottom: 0;
}
.CDB-Shape-threePoints.is-small {
padding-top: 2px;
}
.CDB-Shape-threePoints.is-small .CDB-Shape-threePointsItem {
width: 2px;
height: 2px;
margin-bottom: 3px;
}
.CDB-Shape-threePoints.is-medium {
padding-top: 2px;
}
.CDB-Shape-threePoints.is-medium .CDB-Shape-threePointsItem {
width: 4px;
height: 4px;
margin-bottom: 3px;
}
.CDB-Shape-threePoints.is-blue .CDB-Shape-threePointsItem {
background: var(--color-blue);
}
.CDB-Shape-threePoints.is-white .CDB-Shape-threePointsItem {
background: white;
}

61
src/components/shapes/toogle-arrow.css Normal file
View File

@@ -0,0 +1,61 @@
.CDB-ArrowToogle {
position: relative;
height: 100%;
&::before {
display: block;
position: absolute;
top: 8px;
left: 0;
width: 10px;
height: 1px;
transform: rotate(-45deg);
background: var(--color-black);
content: '';
}
&::after {
display: block;
position: absolute;
top: 8px;
right: -1px;
width: 10px;
height: 1px;
transform: rotate(45deg);
background: var(--color-black);
content: '';
}
}
.CDB-ArrowToogle.is-down {
transform: rotate(180deg);
}
.CDB-ArrowToogle.is-small {
&::before {
left: 2px;
width: 8px;
}
&::after {
right: 1px;
width: 8px;
}
}
.CDB-ArrowToogle.is-blue {
&::before {
background: var(--color-blue);
}
&::after {
background: var(--color-blue);
}
}
.CDB-ArrowToogle.is-white {
&::before {
background: white;
}
&::after {
background: white;
}
}

77
src/components/shapes/type.css Normal file
View File

@@ -0,0 +1,77 @@
.CDB-Shape {
width: 16px;
height: 16px;
text-align: center;
}
.CDB-Shape--small {
width: 8px;
height: 8px;
}
.CDB-Shape--medium {
width: 24px;
height: 24px;
}
.CDB-Shape:hover {
cursor: pointer;
}
.CDB-Type {
position: relative;
width: 100%;
height: 100%;
}
.CDB-Type-circle {
position: absolute;
width: 3px;
height: 3px;
border-radius: 50%;
background: var(--color-line-hover);
}
.CDB-Type-circle--01 {
top: 0;
left: 0;
}
.CDB-Type-circle--02 {
top: 0;
right: 0;
}
.CDB-Type-circle--03 {
bottom: 0;
left: 0;
}
.CDB-Type-circle--04 {
right: 0;
bottom: 0;
}
.CDB-Type--polygon::before {
display: block;
position: absolute;
top: 1px;
right: 1px;
bottom: 1px;
left: 1px;
border: 1px solid var(--color-line-hover);
content: '';
}
.CDB-Type--line::before {
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 3px;
width: 1px;
transform: rotate(45deg);
background: var(--color-line-hover);
content: '';
}