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

Merge pull request #91 from CartoDB/add-tabForm-element

Browse Source 
add tab form
This commit is contained in:
piensaenpixel 2016-04-20 12:38:22 +02:00
commit a05a8a56e5
2 changed files with 213 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

101
src/scss/cdb-components/forms/tabsForms.scss Normal file
View File

@ -0,0 +1,101 @@
// Tabs Forms styles
// ----------------------------------------------
/* SG
# Forms/TabsForms
```
<div class="CDB-TabsForms u-iBlock">
<ul class="CDB-TabsForms-inner">
<li class="CDB-TabsForms-item">
<button class="CDB-TabsForms-button">
<div class="CDB-Shape">
<ul class="CDB-Shape-paragraph is-left">
<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>
</button>
</li>
<li class="CDB-TabsForms-item">
<button class="CDB-TabsForms-button">
<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>
</button>
</li>
<li class="CDB-TabsForms-item">
<button class="CDB-TabsForms-button">
<div class="CDB-Shape">
<ul class="CDB-Shape-paragraph is-right 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>
</button>
</li>
</ul>
</div>
```
*/
@import '../../cdb-utilities/mixins';
@import '../../cdb-variables/sizes';
@import '../../cdb-variables/colors';
.CDB-TabsForms {
border: 1px solid $cMainLine;
border-radius: 4px;
}
.CDB-TabsForms-inner {
@include display-flex();
}
.CDB-TabsForms-item {
border-left: 1px solid $cSecondaryLine;
}
.CDB-TabsForms-item:first-child {
border-left: 0;
}
.CDB-TabsForms-button {
padding: 7px 8px;
}

112
src/scss/cdb-components/shapes/paragraph.scss Normal file
View File

@ -0,0 +1,112 @@
/* 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>
```
*/
@import '../../cdb-variables/colors';
.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: $cSecondaryLine;
vertical-align: top;
}
.CDB-Shape-paragraph.is-active .CDB-Shape-paragraphBar {
background: $cBlue;
}
.CDB-Shape-paragraphBar--01 {
width: 12px;
}
.CDB-Shape-paragraphBar--02 {
width: 6px;
}
.CDB-Shape-paragraphBar--03 {
width: 8px;
}
.CDB-Shape-paragraphBar--04 {
width: 4px;
}