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

Merge pull request #102 from CartoDB/header-dropdown

Browse Source 
add new component
This commit is contained in:
piensaenpixel 2016-04-26 13:29:01 +02:00
commit 5b45aeda54
4 changed files with 85 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/scss/cdb-components/boxes.scss
View File

@ -21,6 +21,15 @@
box-shadow: 0 $baseSize $baseSize * 2 0 rgba(0, 0, 0, 0.16); box-shadow: 0 $baseSize $baseSize * 2 0 rgba(0, 0, 0, 0.16);
} }
.CDB-Box-modalHeader {
background: $cSecondaryBackground;
}
.CDB-Box-modalHeaderItem {
@include display-flex();
@include align-items(center);
padding: $baseSize + 4 $baseSize * 2;
border-bottom: 1px solid $cMainLine;
}
/* SG /* SG
# Boxes/Loader # Boxes/Loader

62
src/scss/cdb-components/forms/dropdowns.scss
View File

@ -44,6 +44,68 @@
</ul> </ul>
</div> </div>
</div> </div>
<div class="CDB-Box-Modal">
<div class="CDB-Box-ModalHeader">
<nav class="CDB-NavMenu">
<ul class="CDB-NavMenu-Inner CDB-NavMenu-Inner--no-margin CDB-NavMenu-Inner--is-dropdown CDB-Text is-semibold CDB-Size-medium">
<li class="CDB-NavMenu-Item">
<button class="CDB-NavMenu-Link">SOLID</button>
</li>
<li class="CDB-NavMenu-Item is-selected">
<button class="CDB-NavMenu-Link">BY VALUE</button>
</li>
</ul>
</nav>
<div class="CDB-Box-ModalHeaderItem">
<input type="text" name="text" placeholder="DejaVu Sans" class="CDB-InputTextPlain CDB-Text">
<button class="u-lSpace--xl">
<div class="CDB-Shape">
<div class="CDB-Shape-magnify is-blue is-small"></div>
</div>
</button>
</div>
</div>
<br/>
<br/>
<br/>
<br/>
</div>
<br/>
<br/>
<br/>
<br/>
<div class="CDB-Box-Modal">
<div class="CDB-Box-modalHeader">
<nav class="CDB-NavMenu">
<ul class="CDB-NavMenu-Inner CDB-NavMenu-inner--no-margin CDB-NavMenu-inner--is-dropdown CDB-Text is-semibold CDB-Size-medium">
<li class="CDB-NavMenu-Item">
<button class="CDB-NavMenu-Link">SOLID</button>
</li>
<li class="CDB-NavMenu-Item is-selected">
<button class="CDB-NavMenu-Link">BY VALUE</button>
</li>
</ul>
</nav>
<div class="CDB-Box-modalHeaderItem">
<input type="text" name="text" placeholder="DejaVu Sans" class="CDB-InputTextPlain CDB-Text">
<button class="u-lSpace--xl">
<div class="CDB-Shape">
<div class="CDB-Shape-close is-blue is-large"></div>
</div>
</button>
</div>
</div>
<br/>
<br/>
<br/>
<br/>
</div>
``` ```
*/ */

8
src/scss/cdb-components/forms/inputs.scss
View File

@ -38,6 +38,14 @@
@include default-form-error-style(); @include default-form-error-style();
} }
} }
.CDB-InputTextPlain {
width: 100%;
border: 0;
background: transparent;
font-size: $sFontSize-medium;
line-height: $sLineHeight-medium;
box-sizing: border-box;
}
.CDB-FieldError .CDB-InputText { .CDB-FieldError .CDB-InputText {
@include default-form-error-style(); @include default-form-error-style();

6
src/scss/cdb-components/menu.scss
View File

@ -107,6 +107,12 @@
margin-bottom: 18px; margin-bottom: 18px;
border-bottom: 1px solid $cMainLine; border-bottom: 1px solid $cMainLine;
} }
.CDB-NavMenu-inner--no-margin {
margin-bottom: 0;
}
.CDB-NavMenu-inner--is-dropdown {
padding: $baseSize 0 0 $baseSize * 2;
}
.CDB-NavMenu-Link { .CDB-NavMenu-Link {
display: block; display: block;