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

Merge pull request #103 from CartoDB/fix-classnames

Browse Source 
fix class names
This commit is contained in:
piensaenpixel 2016-04-26 15:10:08 +02:00
commit 9e0f9ca372
4 changed files with 85 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -6,7 +6,7 @@
``` ```
<div class="CDB-Box-Modal">&nbsp;</div> <div class="CDB-Box-modal">&nbsp;</div>
``` ```
*/ */
@ -14,7 +14,7 @@
@import '../cdb-variables/sizes'; @import '../cdb-variables/sizes';
@import '../cdb-variables/colors'; @import '../cdb-variables/colors';
.CDB-Box-Modal { .CDB-Box-modal {
border: 1px solid $cMainLine; border: 1px solid $cMainLine;
border-radius: 4px; border-radius: 4px;
background: $cWhite; background: $cWhite;

56
src/scss/cdb-components/headers.scss
View File

@ -6,8 +6,8 @@
``` ```
<div class="CDB-HeaderInfo is-block"> <div class="CDB-HeaderInfo is-block">
<div class="CDB-HeaderInfo-Title u-bSpace"> <div class="CDB-HeaderInfo-title u-bSpace">
<h2 class="CDB-HeaderInfo-TitleText CDB-Text CDB-Size-huge is-light">Name Map</h2> <h2 class="CDB-HeaderInfo-titleText CDB-Text CDB-Size-huge is-light">Name Map</h2>
<div class="CDB-HeaderInfo-Actions"> <div class="CDB-HeaderInfo-Actions">
<a href="#"> <a href="#">
<div class="CDB-Shape"> <div class="CDB-Shape">
@ -21,12 +21,12 @@
</div> </div>
</div> </div>
<ul class="CDB-HeaderInfo-List"> <ul class="CDB-HeaderInfo-List">
<li class="CDB-HeaderInfo-ListItem"> <li class="CDB-HeaderInfo-listItem">
<button class="CDB-Tag is-public CDB-Text is-semibold CDB-Size-small u-iBlock"> <button class="CDB-Tag is-public CDB-Text is-semibold CDB-Size-small u-iBlock">
PUBLIC PUBLIC
</button> </button>
</li> </li>
<li class="CDB-HeaderInfo-ListItem"> <li class="CDB-HeaderInfo-listItem">
<ul class="CDB-AvatarList u-iBlock"> <ul class="CDB-AvatarList u-iBlock">
<li class="CDB-AvatarList-item"> <li class="CDB-AvatarList-item">
<img src="/src/img/avatar-40x40.png" alt="User Name" class="CDB-AvatarList-itemMedia" /> <img src="/src/img/avatar-40x40.png" alt="User Name" class="CDB-AvatarList-itemMedia" />
@ -42,7 +42,7 @@
</li> </li>
</ul> </ul>
</li> </li>
<li class="CDB-HeaderInfo-ListItem"> <li class="CDB-HeaderInfo-listItem">
<p class="CDB-HeaderInfo-Text CDB-Text CDB-Size-medium u-iBlock u-altTextColor">Published 8 days ago</p> <p class="CDB-HeaderInfo-Text CDB-Text CDB-Size-medium u-iBlock u-altTextColor">Published 8 days ago</p>
</li> </li>
</ul> </ul>
@ -53,19 +53,19 @@
<br/> <br/>
<div class="CDB-HeaderInfo"> <div class="CDB-HeaderInfo">
<button class="u-rSpace--xl CDB-HeaderInfo-Back"> <button class="u-rSpace--xl CDB-HeaderInfo-back">
<i class="CDB-IconFont CDB-IconFont-arrowPrev Size-large"></i> <i class="CDB-IconFont CDB-IconFont-arrowPrev Size-large"></i>
</button> </button>
<div class="CDB-HeaderInfo-Inner"> <div class="CDB-HeaderInfo-inner">
<div class="CDB-HeaderInfo-Title u-bSpace"> <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> <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"> <ul class="CDB-HeaderInfo-Actions">
<li class="CDB-HeaderInfo-ActionsItem"> <li class="CDB-HeaderInfo-actionsItem">
<button class="CDB-Button CDB-Button--primary CDB-Button--icon"> <button class="CDB-Button CDB-Button--primary CDB-Button--icon">
<i class="CDB-IconFont CDB-IconFont-ray CDB-Size-small"></i> <i class="CDB-IconFont CDB-IconFont-ray CDB-Size-small"></i>
</button> </button>
</li> </li>
<li class="CDB-HeaderInfo-ActionsItem"> <li class="CDB-HeaderInfo-actionsItem">
<a href="#"> <a href="#">
<div class="CDB-Shape"> <div class="CDB-Shape">
<div class="CDB-Shape-threePoints is-blue is-small"> <div class="CDB-Shape-threePoints is-blue is-small">
@ -93,13 +93,13 @@
<br/> <br/>
<div class="CDB-HeaderInfo"> <div class="CDB-HeaderInfo">
<button class="u-rSpace--xl CDB-HeaderInfo-Back"> <button class="u-rSpace--xl CDB-HeaderInfo-back">
<i class="CDB-IconFont CDB-IconFont-arrowPrev Size-large"></i> <i class="CDB-IconFont CDB-IconFont-arrowPrev Size-large"></i>
</button> </button>
<div class="CDB-HeaderInfo-Inner"> <div class="CDB-HeaderInfo-inner">
<div class="CDB-HeaderInfo-Title u-bSpace"> <div class="CDB-HeaderInfo-title u-bSpace">
<h2 class="CDB-HeaderInfo-TitleText CDB-Text CDB-Size-huge is-light">Basemap</h2> <h2 class="CDB-HeaderInfo-titleText CDB-Text CDB-Size-huge is-light">Basemap</h2>
<div class="CDB-HeaderInfo-Actions"> <div class="CDB-HeaderInfo-actions">
<a href="#"> <a href="#">
<div class="CDB-Shape"> <div class="CDB-Shape">
<div class="CDB-Shape-threePoints is-blue is-small"> <div class="CDB-Shape-threePoints is-blue is-small">
@ -120,10 +120,10 @@
<br/> <br/>
<div class="CDB-HeaderInfo"> <div class="CDB-HeaderInfo">
<button class="u-rSpace--xl CDB-HeaderInfo-Back"> <button class="u-rSpace--xl CDB-HeaderInfo-back">
<i class="CDB-IconFont CDB-IconFont-arrowPrev Size-large"></i> <i class="CDB-IconFont CDB-IconFont-arrowPrev Size-large"></i>
</button> </button>
<div class="CDB-HeaderInfo-Inner"> <div class="CDB-HeaderInfo-inner">
<input type="text" name="text" placeholder="DejaVu Sans" class="CDB-InputText CDB-Text u-bSpace--m"> <input type="text" name="text" placeholder="DejaVu Sans" class="CDB-InputText CDB-Text u-bSpace--m">
<div class="CDB-Shape u-iBlock"> <div class="CDB-Shape u-iBlock">
<ul class="CDB-Shape-Dataset is-small is-grey"> <ul class="CDB-Shape-Dataset is-small is-grey">
@ -142,11 +142,11 @@
<div class="CDB-HeaderInfo"> <div class="CDB-HeaderInfo">
<div class="CDB-HeaderNumeration CDB-Text is-semibold u-rSpace--m">1</div> <div class="CDB-HeaderNumeration CDB-Text is-semibold u-rSpace--m">1</div>
<div class="CDB-HeaderInfo-Inner CDB-Text"> <div class="CDB-HeaderInfo-inner CDB-Text">
<div class="CDB-HeaderInfo-Title u-bSpace--m"> <div class="CDB-HeaderInfo-title u-bSpace--m">
<h2 class="CDB-Text CDB-HeaderInfo-TitleText CDB-Size-large">Type</h2> <h2 class="CDB-Text CDB-HeaderInfo-titleText CDB-Size-large">Type</h2>
<div class="CDB-HeaderInfo-Actions"> <div class="CDB-HeaderInfo-actions">
<a href="#"> <a href="#">
<div class="CDB-Shape"> <div class="CDB-Shape">
<div class="CDB-ArrowToogle is-blue is-small is-down"></div> <div class="CDB-ArrowToogle is-blue is-small is-down"></div>
@ -178,7 +178,7 @@
display: block; display: block;
} }
} }
.CDB-HeaderInfo-ListItem { .CDB-HeaderInfo-listItem {
display: inline-block; display: inline-block;
margin-right: 8px; margin-right: 8px;
vertical-align: middle; vertical-align: middle;
@ -188,17 +188,17 @@
} }
} }
.CDB-HeaderInfo-Inner { .CDB-HeaderInfo-inner {
@include flex(1); @include flex(1);
} }
.CDB-HeaderInfo-Back { .CDB-HeaderInfo-back {
margin-top: 7px; margin-top: 7px;
} }
.CDB-HeaderInfo-Title { .CDB-HeaderInfo-title {
@include display-flex(); @include display-flex();
@include align-items(center); @include align-items(center);
} }
.CDB-HeaderInfo-TitleText { .CDB-HeaderInfo-titleText {
@include flex(1); @include flex(1);
width: 0; width: 0;
padding-right: 16px; padding-right: 16px;
@ -206,7 +206,7 @@
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
} }
.CDB-HeaderInfo-ActionsItem { .CDB-HeaderInfo-actionsItem {
display: inline-block; display: inline-block;
margin-left: 4px; margin-left: 4px;
vertical-align: middle; vertical-align: middle;

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

@ -6,14 +6,14 @@
``` ```
<div class="CDB-Box-Modal">&nbsp;</div> <div class="CDB-Box-modal">&nbsp;</div>
``` ```
*/ */
@import '../cdb-variables/sizes'; @import '../cdb-variables/sizes';
@import '../cdb-variables/colors'; @import '../cdb-variables/colors';
.CDB-ListDecoration-Item { .CDB-ListDecoration-item {
border-bottom: 1px solid $cSecondaryLine; border-bottom: 1px solid $cSecondaryLine;
&:last-child { &:last-child {
@ -21,7 +21,7 @@
} }
} }
.CDB-ListDecoration-ItemLink { .CDB-ListDecoration-itemLink {
display: block; display: block;
padding: 12px 16px; padding: 12px 16px;
} }

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

@ -7,26 +7,26 @@
``` ```
<nav class="CDB-NavMenu"> <nav class="CDB-NavMenu">
<ul class="CDB-NavMenu-Inner CDB-Text is-semibold CDB-Size-medium"> <ul class="CDB-NavMenu-inner CDB-Text is-semibold CDB-Size-medium">
<li class="CDB-NavMenu-Item"> <li class="CDB-NavMenu-item">
<button class="CDB-NavMenu-Link">DATA</button> <button class="CDB-NavMenu-link">DATA</button>
</li> </li>
<li class="CDB-NavMenu-Item"> <li class="CDB-NavMenu-item">
<button class="CDB-NavMenu-Link">STYLE</button> <button class="CDB-NavMenu-link">STYLE</button>
</li> </li>
<li class="CDB-NavMenu-Item is-selected"> <li class="CDB-NavMenu-item is-selected">
<button class="CDB-NavMenu-Link">POP-UP</button> <button class="CDB-NavMenu-link">POP-UP</button>
<ul class="CDB-NavSubmenu CDB-NavSubmenu--inside CDB-Size-small"> <ul class="CDB-NavSubmenu CDB-NavSubmenu--inside CDB-Size-small">
<li class="CDB-NavSubmenu-Item is-selected"> <li class="CDB-NavSubmenu-item is-selected">
<button class="CDB-NavSubmenu-Link">CLICK <span class="CDB-NavSubmenu-Status u-hintTextColor">NONE</span></button> <button class="CDB-NavSubmenu-link">CLICK <span class="CDB-NavSubmenu-status u-hintTextColor">NONE</span></button>
</li> </li>
<li class="CDB-NavSubmenu-Item"> <li class="CDB-NavSubmenu-item">
<button class="CDB-NavSubmenu-Link">HOVER <span class="CDB-NavSubmenu-Status u-hintTextColor">NONE</span></button> <button class="CDB-NavSubmenu-link">HOVER <span class="CDB-NavSubmenu-status u-hintTextColor">NONE</span></button>
</li> </li>
</ul> </ul>
</li> </li>
<li class="CDB-NavMenu-Item"> <li class="CDB-NavMenu-item">
<button class="CDB-NavMenu-Link">LEGEND</button> <button class="CDB-NavMenu-link">LEGEND</button>
</li> </li>
</ul> </ul>
<div style="position: absolute; right: 0; top: 0; height: 24px; width: 46px; background: red;"> <div style="position: absolute; right: 0; top: 0; height: 24px; width: 46px; background: red;">
@ -39,26 +39,26 @@
<div style="background: #2E3C43; height: 100px; padding: 20px;"> <div style="background: #2E3C43; height: 100px; padding: 20px;">
<nav class="CDB-NavMenu is-dark"> <nav class="CDB-NavMenu is-dark">
<ul class="CDB-NavMenu-Inner CDB-Text is-semibold CDB-Size-medium"> <ul class="CDB-NavMenu-inner CDB-Text is-semibold CDB-Size-medium">
<li class="CDB-NavMenu-Item CDB-Text"> <li class="CDB-NavMenu-item CDB-Text">
<button class="CDB-NavMenu-Link">DATA</button> <button class="CDB-NavMenu-link">DATA</button>
</li> </li>
<li class="CDB-NavMenu-Item"> <li class="CDB-NavMenu-item">
<button class="CDB-NavMenu-Link">STYLE</button> <button class="CDB-NavMenu-link">STYLE</button>
</li> </li>
<li class="CDB-NavMenu-item is-selected"> <li class="CDB-NavMenu-item is-selected">
<button class="CDB-NavMenu-Link">POP-UP</button> <button class="CDB-NavMenu-link">POP-UP</button>
<ul class="CDB-NavSubmenu CDB-NavSubmenu--inside CDB-Size-small"> <ul class="CDB-NavSubmenu CDB-NavSubmenu--inside CDB-Size-small">
<li class="CDB-NavSubmenu-Item is-selected"> <li class="CDB-NavSubmenu-item is-selected">
<button class="CDB-NavSubmenu-Link">CLICK <span class="CDB-NavSubmenu-Status">NONE</span></button> <button class="CDB-NavSubmenu-link">CLICK <span class="CDB-NavSubmenu-status">NONE</span></button>
</li> </li>
<li class="CDB-NavSubmenu-Item"> <li class="CDB-NavSubmenu-item">
<button class="CDB-NavSubmenu-Link">HOVER <span class="CDB-NavSubmenu-Status">NONE</span></button> <button class="CDB-NavSubmenu-link">HOVER <span class="CDB-NavSubmenu-status">NONE</span></button>
</li> </li>
</ul> </ul>
</li> </li>
<li class="CDB-NavMenu-Item"> <li class="CDB-NavMenu-item">
<button class="CDB-NavMenu-Link">LEGEND</button> <button class="CDB-NavMenu-link">LEGEND</button>
</li> </li>
</ul> </ul>
</nav> </nav>
@ -68,27 +68,27 @@
<br/><br/> <br/><br/>
<nav class="CDB-NavMenu"> <nav class="CDB-NavMenu">
<ul class="CDB-NavMenu-Inner CDB-Text is-semibold CDB-Size-medium"> <ul class="CDB-NavMenu-inner CDB-Text is-semibold CDB-Size-medium">
<li class="CDB-NavMenu-Item"> <li class="CDB-NavMenu-item">
<button class="CDB-NavMenu-Link">DATA</button> <button class="CDB-NavMenu-link">DATA</button>
</li> </li>
<li class="CDB-NavMenu-Item"> <li class="CDB-NavMenu-item">
<button class="CDB-NavMenu-Link">STYLE</button> <button class="CDB-NavMenu-link">STYLE</button>
</li> </li>
<li class="CDB-NavMenu-Item is-selected"> <li class="CDB-NavMenu-item is-selected">
<button class="CDB-NavMenu-Link">POP-UP</button> <button class="CDB-NavMenu-link">POP-UP</button>
</li> </li>
<li class="CDB-NavMenu-Item"> <li class="CDB-NavMenu-item">
<button class="CDB-NavMenu-Link">LEGEND</button> <button class="CDB-NavMenu-link">LEGEND</button>
</li> </li>
</ul> </ul>
<ul class="CDB-NavSubmenu CDB-NavSubmenu--outside CDB-Text CDB-Size-small is-semibold js-menu"> <ul class="CDB-NavSubmenu CDB-NavSubmenu--outside CDB-Text CDB-Size-small is-semibold js-menu">
<li class="CDB-NavSubmenu-Item is-selected"> <li class="CDB-NavSubmenu-item is-selected">
<button class="CDB-NavSubmenu-Link u-upperCase">Click</button> <button class="CDB-NavSubmenu-link u-upperCase">Click</button>
</li> </li>
<li class="CDB-NavSubmenu-Item"> <li class="CDB-NavSubmenu-item">
<button class="CDB-NavSubmenu-Link u-upperCase">Hover</button> <button class="CDB-NavSubmenu-link u-upperCase">Hover</button>
</li> </li>
</ul> </ul>
</nav> </nav>
@ -102,7 +102,7 @@
position: relative; position: relative;
} }
.CDB-NavMenu-Inner { .CDB-NavMenu-inner {
position: relative; position: relative;
margin-bottom: 18px; margin-bottom: 18px;
border-bottom: 1px solid $cMainLine; border-bottom: 1px solid $cMainLine;
@ -114,7 +114,7 @@
padding: $baseSize 0 0 $baseSize * 2; padding: $baseSize 0 0 $baseSize * 2;
} }
.CDB-NavMenu-Link { .CDB-NavMenu-link {
display: block; display: block;
margin-bottom: -1px; margin-bottom: -1px;
padding: 4px 0 11px; padding: 4px 0 11px;
@ -122,14 +122,14 @@
color: $cBlue; color: $cBlue;
} }
.CDB-NavMenu-Item, .CDB-NavMenu-item,
.CDB-NavSubmenu-Item { .CDB-NavSubmenu-item {
display: inline-block; display: inline-block;
margin-right: 8px; margin-right: 8px;
vertical-align: middle; vertical-align: middle;
} }
.CDB-NavMenu-Item.is-selected .CDB-NavMenu-Link { .CDB-NavMenu-item.is-selected .CDB-NavMenu-link {
border-bottom: 1px solid $cBlack; border-bottom: 1px solid $cBlack;
color: $cMainText; color: $cMainText;
} }
@ -150,7 +150,7 @@
margin-bottom: 18px; margin-bottom: 18px;
} }
.CDB-NavSubmenu-Link { .CDB-NavSubmenu-link {
display: block; display: block;
margin-bottom: -1px; margin-bottom: -1px;
padding-bottom: 12px; padding-bottom: 12px;
@ -158,38 +158,38 @@
color: $cBlue; color: $cBlue;
} }
.CDB-NavSubmenu-Item.is-selected .CDB-NavSubmenu-Link { .CDB-NavSubmenu-item.is-selected .CDB-NavSubmenu-link {
border-bottom: 1px solid $cMainLine; border-bottom: 1px solid $cMainLine;
color: $cMainText; color: $cMainText;
} }
.CDB-NavSubmenu-Status { .CDB-NavSubmenu-status {
margin-left: 2px; margin-left: 2px;
} }
.CDB-Navmenu.is-dark { .CDB-Navmenu.is-dark {
.CDB-NavMenu-Inner, .CDB-NavMenu-inner,
.CDB-NavSubmenu { .CDB-NavSubmenu {
border-bottom: 1px solid $cSecondaryText; border-bottom: 1px solid $cSecondaryText;
} }
.CDB-NavMenu-Link, .CDB-NavMenu-link,
.CDB-NavSubmenu-Link { .CDB-NavSubmenu-link {
color: $cAltText; color: $cAltText;
} }
.CDB-NavMenu-Item.is-selected .CDB-NavMenu-Link { .CDB-NavMenu-item.is-selected .CDB-NavMenu-link {
border-bottom: 1px solid $cMainLine; border-bottom: 1px solid $cMainLine;
color: $cWhite; color: $cWhite;
} }
.CDB-NavSubmenu-Item.is-selected .CDB-NavSubmenu-Link { .CDB-NavSubmenu-item.is-selected .CDB-NavSubmenu-link {
border-bottom: 1px solid $cMainLine; border-bottom: 1px solid $cMainLine;
color: $cWhite; color: $cWhite;
} }
.CDB-NavSubmenu-Status { .CDB-NavSubmenu-status {
color: $cSecondaryText; color: $cSecondaryText;
} }
} }