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

Color bar & option input components: fixes

Browse Source
This commit is contained in:
María Checa
2016-02-22 19:35:42 +01:00
parent 126b5353ef
commit a2b2fd5581
2 changed files with 111 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/scss/cdb-components/forms/color_bar.scss
+59 -67
View File
@@ -5,39 +5,47 @@
# Forms/Color bar # Forms/Color bar
``` ```
<ul class="CDB-ColorBarContainer u-bSpace--xl"> <ul class="CDB-ColorBarContainer">
<li class="CDB-ColorBar CDB-ColorBar--sMargin" style="background-color: #9DE0AD;"></li> <li class="CDB-ColorBar CDB-ColorBar--spaceMedium" style="background-color: #9DE0AD;"></li>
<li class="CDB-ColorBar CDB-ColorBar--sMargin" style="background-color: #50E3C2;"></li> <li class="CDB-ColorBar CDB-ColorBar--spaceMedium" style="background-color: #50E3C2;"></li>
<li class="CDB-ColorBar CDB-ColorBar--sMargin" style="background-color: #FFFFC0;"></li> <li class="CDB-ColorBar CDB-ColorBar--spaceMedium" style="background-color: #FFFFC0;"></li>
<li class="CDB-ColorBar CDB-ColorBar--sMargin" style="background-color: #7ED321;"></li> <li class="CDB-ColorBar CDB-ColorBar--spaceMedium" style="background-color: #7ED321;"></li>
<li class="CDB-ColorBar CDB-ColorBar--sMargin" style="background-color: #BD10E0;"></li> <li class="CDB-ColorBar CDB-ColorBar--spaceMedium" style="background-color: #BD10E0;"></li>
<li class="CDB-ColorBar CDB-ColorBar--sMargin" style="background-color: #F15743;"></li> <li class="CDB-ColorBar CDB-ColorBar--spaceMedium" style="background-color: #F15743;"></li>
</ul> </ul>
<ul class="CDB-ColorBarContainer u-bSpace--xl"> <br/>
<li class="CDB-ColorBar CDB-ColorBar--sRadius" style="background-color: #9DE0AD;"></li>
<li class="CDB-ColorBar CDB-ColorBar--sRadius" style="background-color: #50E3C2;"></li> <ul class="CDB-ColorBarContainer">
<li class="CDB-ColorBar CDB-ColorBar--sRadius" style="background-color: #FFFFC0;"></li> <li class="CDB-ColorBar CDB-ColorBar--spaceSmall" style="background-color: #9DE0AD;"></li>
<li class="CDB-ColorBar CDB-ColorBar--sRadius" style="background-color: #7ED321;"></li> <li class="CDB-ColorBar CDB-ColorBar--spaceSmall" style="background-color: #50E3C2;"></li>
<li class="CDB-ColorBar CDB-ColorBar--sRadius" style="background-color: #BD10E0;"></li> <li class="CDB-ColorBar CDB-ColorBar--spaceSmall" style="background-color: #FFFFC0;"></li>
<li class="CDB-ColorBar CDB-ColorBar--sRadius" style="background-color: #F15743;"></li> <li class="CDB-ColorBar CDB-ColorBar--spaceSmall" style="background-color: #7ED321;"></li>
<li class="CDB-ColorBar CDB-ColorBar--spaceSmall" style="background-color: #BD10E0;"></li>
<li class="CDB-ColorBar CDB-ColorBar--spaceSmall" style="background-color: #F15743;"></li>
</ul> </ul>
<ul class="CDB-ColorBarContainer u-bSpace--xl"> <br/>
<li class="CDB-ColorBar CDB-ColorBar--compacted" style="background-color: #9DE0AD;"></li>
<li class="CDB-ColorBar CDB-ColorBar--compacted" style="background-color: #50E3C2;"></li> <ul class="CDB-ColorBarContainer">
<li class="CDB-ColorBar CDB-ColorBar--compacted" style="background-color: #FFFFC0;"></li> <li class="CDB-ColorBar CDB-ColorBar--spaceless" style="background-color: #9DE0AD;"></li>
<li class="CDB-ColorBar CDB-ColorBar--compacted" style="background-color: #7ED321;"></li> <li class="CDB-ColorBar CDB-ColorBar--spaceless" style="background-color: #50E3C2;"></li>
<li class="CDB-ColorBar CDB-ColorBar--compacted" style="background-color: #BD10E0;"></li> <li class="CDB-ColorBar CDB-ColorBar--spaceless" style="background-color: #FFFFC0;"></li>
<li class="CDB-ColorBar CDB-ColorBar--compacted" style="background-color: #F15743;"></li> <li class="CDB-ColorBar CDB-ColorBar--spaceless" style="background-color: #7ED321;"></li>
<li class="CDB-ColorBar CDB-ColorBar--spaceless" style="background-color: #BD10E0;"></li>
<li class="CDB-ColorBar CDB-ColorBar--spaceless" style="background-color: #F15743;"></li>
</ul> </ul>
<ul class="CDB-ColorBarContainer u-bSpace--xl"> <br/>
<ul class="CDB-ColorBarContainer">
<li class="CDB-ColorBar" style="background-color: #9DE0AD;"></li> <li class="CDB-ColorBar" style="background-color: #9DE0AD;"></li>
</ul> </ul>
<ul class="CDB-ColorBarContainer u-bSpace--xl"> <br/>
<li class="CDB-ColorBar" style="background: linear-gradient(90deg, #FFFECA, #9FDAB3, #36B6C5, #207EBA, #203196);"></li>
<ul class="CDB-ColorBarContainer">
<li class="CDB-ColorBar CDB-ColorBar-gradient" style="background: linear-gradient(90deg, #FFFECA, #9FDAB3, #36B6C5, #207EBA, #203196);"></li>
</ul> </ul>
``` ```
*/ */
@@ -48,14 +56,21 @@
@include display-flex(); @include display-flex();
@include flex-direction(row); @include flex-direction(row);
width: 100%; width: 100%;
max-width: 215px;
} }
.CDB-ColorBar { .CDB-ColorBar {
position: relative; position: relative;
width: 100%; width: 100%;
height: 6px; height: 6px;
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 6px; border-radius: 6px;
&:last-child {
margin-right: 0;
}
}
.CDB-ColorBar-gradient {
border: 0;
&::after { &::after {
position: absolute; position: absolute;
top: 0; top: 0;
@@ -66,57 +81,34 @@
border-radius: 6px; border-radius: 6px;
content: ''; content: '';
} }
&:last-child {
margin-right: 0;
}
} }
.CDB-ColorBar.CDB-ColorBar--sMargin { .CDB-ColorBar.CDB-ColorBar--spaceMedium {
margin-right: 4px; margin-right: 4px;
&:last-child { &:last-child {
margin-right: 0; margin-right: 0;
} }
} }
.CDB-ColorBar.CDB-ColorBar--compacted { .CDB-ColorBar.CDB-ColorBar--spaceless {
border-width: 1px 0;
border-radius: 0; border-radius: 0;
&::after {
border-width: 1px 0;
border-radius: 0;
}
&:first-child {
border-radius: 6px 0 0 6px;
&::after {
border-width: 1px 0 1px 1px;
border-radius: 6px 0 0 6px;
}
}
&:last-child {
border-radius: 0 6px 6px 0;
&::after {
border-width: 1px 1px 1px 0;
border-radius: 0 6px 6px 0;
}
}
} }
.CDB-ColorBar.CDB-ColorBar--sRadius { .CDB-ColorBar.CDB-ColorBar--spaceless:first-child {
border-width: 1px 0 1px 1px;
border-radius: 6px 0 0 6px;
}
.CDB-ColorBar.CDB-ColorBar--spaceless:last-child {
border-width: 1px 1px 1px 0;
border-radius: 0 6px 6px 0;
}
.CDB-ColorBar.CDB-ColorBar--spaceSmall {
margin-right: 2px; margin-right: 2px;
border-radius: 2px; border-radius: 2px;
&::after {
border-radius: 2px;
}
&:first-child {
border-radius: 6px 2px 2px 6px;
&::after {
border-radius: 6px 2px 2px 6px;
}
}
&:last-child {
margin-right: 0;
border-radius: 2px 6px 6px 2px;
&::after {
border-radius: 2px 6px 6px 2px;
}
}
} }
.CDB-ColorBar.CDB-ColorBar--spaceSmall:first-child {
border-radius: 6px 3px 3px 6px;
}
.CDB-ColorBar.CDB-ColorBar--spaceSmall:last-child {
margin-right: 0;
border-radius: 3px 6px 6px 3px;
}
src/scss/cdb-components/forms/option_input.scss
+52 -50
View File
@@ -5,74 +5,76 @@
# Forms/Option input # Forms/Option input
``` ```
<div class="CDB-OptionInput is-active u-rSpace--m CDB-Text u-iBlock"> <div class="CDB-OptionInput is-active CDB-Text">
<ul class="CDB-OptionInput-container"> <ul class="CDB-OptionInput-container">
<li class="CDB-OptionInput-option is-active"> <li class="CDB-OptionInput-item is-active">
<button tupe="button" class="CDB-OptionInput-optionContent">8px</button> <button type="button" class="CDB-OptionInput-content">8px</button>
</li> </li>
<li class="CDB-OptionInput-option"> <li class="CDB-OptionInput-item">
<button tupe="button" class="CDB-OptionInput-optionContent">solid</button> <button type="button" class="CDB-OptionInput-content">solid</button>
</li> </li>
<li class="CDB-OptionInput-option"> <li class="CDB-OptionInput-item">
<button tupe="button" class="CDB-ColorBarContainer CDB-OptionInput-optionContent"> <button type="button" class="CDB-ColorBarContainer CDB-OptionInput-content">
<span class="CDB-ColorBar" style="background-color: #207EBA;"></span> <span class="CDB-ColorBar" style="background-color: #207EBA;"></span>
</button> </button>
</li> </li>
</ul> </ul>
</div> </div>
<div class="CDB-OptionInput is-active u-rSpace--m CDB-Text u-iBlock"> <br/>
<div class="CDB-OptionInput is-active CDB-Text">
<ul class="CDB-OptionInput-container"> <ul class="CDB-OptionInput-container">
<li class="CDB-OptionInput-option"> <li class="CDB-OptionInput-item">
<button class="CDB-OptionInput-optionContent">8...12</button> <button type="button" class="CDB-OptionInput-content">8...12</button>
</li> </li>
<li class="CDB-OptionInput-option is-active"> <li class="CDB-OptionInput-item is-active">
<button class="CDB-ColorBarContainer CDB-OptionInput-optionContent"> <button type="button" class="CDB-ColorBarContainer CDB-OptionInput-content">
<span class="CDB-ColorBar" style="background-color: #FFFFC0;"></span> <span class="CDB-ColorBar" style="background-color: #FFFFC0;"></span>
</button> </button>
</li> </li>
</ul> </ul>
</div> </div>
<button type="button" class="CDB-OptionInput u-rSpace--m"> <br/>
<ul class="CDB-OptionInput-container">
<li class="CDB-OptionInput-option">
<ul class="CDB-ColorBarContainer">
<li class="CDB-ColorBar" style="background: linear-gradient(90deg, #FFFECA, #9FDAB3, #36B6C5, #207EBA, #203196);"></li>
</ul>
</li>
</ul>
</button>
<button class="CDB-OptionInput u-rSpace--m">
<ul class="CDB-OptionInput-container">
<li class="CDB-OptionInput-option">
<ul class="CDB-ColorBarContainer">
<li class="CDB-ColorBar u-rSpace" style="background-color: #9DE0AD;"></li>
<li class="CDB-ColorBar u-rSpace" style="background-color: #50E3C2;"></li>
<li class="CDB-ColorBar u-rSpace" style="background-color: #FFFFC0;"></li>
<li class="CDB-ColorBar u-rSpace" style="background-color: #7ED321;"></li>
<li class="CDB-ColorBar u-rSpace" style="background-color: #BD10E0;"></li>
<li class="CDB-ColorBar u-rSpace" style="background-color: #F15743;"></li>
</ul>
</li>
</ul>
</button>
<button type="button" class="CDB-OptionInput"> <button type="button" class="CDB-OptionInput">
<ul class="CDB-OptionInput-container"> <div class="CDB-OptionInput-container">
<li class="CDB-OptionInput-option"> <span class="CDB-ColorBar CDB-ColorBar-gradient" style="background: linear-gradient(90deg, #FFFECA, #9FDAB3, #36B6C5, #207EBA, #203196);"></span>
<ul class="CDB-ColorBarContainer"> </div>
<li class="CDB-ColorBar CDB-ColorBar--compacted" style="background-color: #9DE0AD;"></li> </button>
<li class="CDB-ColorBar CDB-ColorBar--compacted" style="background-color: #50E3C2;"></li>
<li class="CDB-ColorBar CDB-ColorBar--compacted" style="background-color: #FFFFC0;"></li> <br/>
<li class="CDB-ColorBar CDB-ColorBar--compacted" style="background-color: #7ED321;"></li> <br/>
</ul>
</li> <button type="button" class="CDB-OptionInput">
</ul> <div class="CDB-OptionInput-container">
<ul class="CDB-ColorBarContainer">
<li class="CDB-ColorBar u-rSpace" style="background-color: #9DE0AD;"></li>
<li class="CDB-ColorBar u-rSpace" style="background-color: #50E3C2;"></li>
<li class="CDB-ColorBar u-rSpace" style="background-color: #FFFFC0;"></li>
<li class="CDB-ColorBar u-rSpace" style="background-color: #7ED321;"></li>
<li class="CDB-ColorBar u-rSpace" style="background-color: #BD10E0;"></li>
<li class="CDB-ColorBar u-rSpace" style="background-color: #F15743;"></li>
</ul>
</div>
</button>
<br/>
<br/>
<button type="button" class="CDB-OptionInput">
<div class="CDB-OptionInput-container">
<ul class="CDB-ColorBarContainer">
<li class="CDB-ColorBar CDB-ColorBar--compacted" style="background-color: #9DE0AD;"></li>
<li class="CDB-ColorBar CDB-ColorBar--compacted" style="background-color: #50E3C2;"></li>
<li class="CDB-ColorBar CDB-ColorBar--compacted" style="background-color: #FFFFC0;"></li>
<li class="CDB-ColorBar CDB-ColorBar--compacted" style="background-color: #7ED321;"></li>
</ul>
</div>
</button> </button>
``` ```
*/ */
@@ -82,7 +84,7 @@
@import '../../cdb-utilities/mixins'; @import '../../cdb-utilities/mixins';
.CDB-OptionInput { .CDB-OptionInput {
width: $baseSize * 20; width: 100%;
height: $baseSize * 4; height: $baseSize * 4;
border: 1px solid $cMainLine; border: 1px solid $cMainLine;
border-radius: $baseSize / 2; border-radius: $baseSize / 2;
@@ -106,7 +108,7 @@
@include align-items(center); @include align-items(center);
margin: 0 $baseSize; margin: 0 $baseSize;
} }
.CDB-OptionInput-option { .CDB-OptionInput-item {
@include display-flex(); @include display-flex();
@include align-items(center); @include align-items(center);
@include align-content(center); @include align-content(center);
@@ -129,7 +131,7 @@
} }
} }
} }
.CDB-OptionInput-optionContent { .CDB-OptionInput-content {
@include display-flex(); @include display-flex();
@include align-items(center); @include align-items(center);
height: 100%; height: 100%;
@@ -141,6 +143,6 @@
text-decoration: none; text-decoration: none;
} }
} }
.CDB-OptionInput-option.is-active > .CDB-OptionInput-optionContent { .CDB-OptionInput-item.is-active > .CDB-OptionInput-content {
border-bottom: 1px solid $cMainBg; border-bottom: 1px solid $cMainBg;
} }