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

Improvements: Option input & color bar components

Browse Source
This commit is contained in:
María Checa 2016-02-16 19:10:37 +01:00
parent fee10f9e2e
commit 351b645ac8
2 changed files with 74 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

67
src/scss/cdb-components/forms/color_bar.scss Normal file
View File

@ -0,0 +1,67 @@
// Color input styles
// ----------------------------------------------
/* SG
# Forms/Color bar
```
<span class="CDB-ColorBar CDB-ColorBar--mBorderRadius u-rSpace u-iBlock u-bSpace--xl" style="background-color: #9DE0AD;"></span>
<span class="CDB-ColorBar CDB-ColorBar--mBorderRadius u-rSpace u-iBlock u-bSpace--xl" style="background-color: #50E3C2;"></span>
<span class="CDB-ColorBar CDB-ColorBar--mBorderRadius u-rSpace u-iBlock u-bSpace--xl" style="background-color: #FFFFC0;"></span>
<div class="CDB-ColorBarContainer u-bSpace--xl">
<span class="CDB-ColorBar CDB-ColorBar--med CDB-ColorBar--msBorderRadius u-rSpace--s" style="background-color: #9DE0AD;"></span>
<span class="CDB-ColorBar CDB-ColorBar--med CDB-ColorBar--sBorderRadius u-rSpace--s" style="background-color: #50E3C2;"></span>
<span class="CDB-ColorBar CDB-ColorBar--med CDB-ColorBar--sBorderRadius u-rSpace--s" style="background-color: #FFFFC0;"></span>
<span class="CDB-ColorBar CDB-ColorBar--med CDB-ColorBar--sBorderRadius u-rSpace--s" style="background-color: #7ED321;"></span>
<span class="CDB-ColorBar CDB-ColorBar--med CDB-ColorBar--sBorderRadius u-rSpace--s" style="background-color: #BD10E0;"></span>
<span class="CDB-ColorBar CDB-ColorBar--med CDB-ColorBar--smBorderRadius u-rSpace--s" style="background-color: #F15743;"></span>
</div>
<div class="CDB-ColorBarContainer u-bSpace--xl">
<span class="CDB-ColorBar CDB-ColorBar--small CDB-ColorBar--mBorderRadius u-rSpace" style="background-color: #9DE0AD;"></span>
<span class="CDB-ColorBar CDB-ColorBar--small CDB-ColorBar--mBorderRadius u-rSpace" style="background-color: #50E3C2;"></span>
<span class="CDB-ColorBar CDB-ColorBar--small CDB-ColorBar--mBorderRadius u-rSpace" style="background-color: #FFFFC0;"></span>
<span class="CDB-ColorBar CDB-ColorBar--small CDB-ColorBar--mBorderRadius u-rSpace" style="background-color: #7ED321;"></span>
<span class="CDB-ColorBar CDB-ColorBar--small CDB-ColorBar--mBorderRadius u-rSpace" style="background-color: #BD10E0;"></span>
<span class="CDB-ColorBar CDB-ColorBar--small CDB-ColorBar--mBorderRadius u-rSpace" style="background-color: #F15743;"></span>
</div>
```
*/
@import '../../cdb-variables/sizes';
@import '../../cdb-variables/colors';
@import '../../cdb-utilities/mixins';
.CDB-ColorBarContainer {
@include display-flex();
@include flex-direction(row);
}
.CDB-ColorBar {
width: 100%;
height: $baseSize / 2;
border: 1px solid rgba(0, 0, 0, 0.2);
&:last-child {
margin-right: 0;
}
}
.CDB-ColorBar.CDB-ColorBar--small {
width: $baseSize * 2;
}
.CDB-ColorBar.CDB-ColorBar--med {
width: 29px;
}
.CDB-ColorBar.CDB-ColorBar--sBorderRadius {
border-radius: 2px;
}
.CDB-ColorBar.CDB-ColorBar--mBorderRadius {
border-radius: 6px;
}
.CDB-ColorBar.CDB-ColorBar--msBorderRadius {
border-radius: 6px 2px 2px 6px;
}
.CDB-ColorBar.CDB-ColorBar--smBorderRadius {
border-radius: 2px 6px 6px 2px;
}

19
src/scss/cdb-components/forms/color_input.scss → src/scss/cdb-components/forms/option_input.scss
View File

@ -2,14 +2,14 @@
// ---------------------------------------------- // ----------------------------------------------
/* SG /* SG
# Forms/Color input # Forms/Option input
``` ```
<fieldset> <fieldset>
<p class="CDB-Legend u-iBlock CDB-Text is-semibold CDB-Size-small u-rSpace--m">COLOR</p> <label class="CDB-Legend u-iBlock CDB-Text is-semibold CDB-Size-small u-rSpace--m">OPTION</label>
<div class="u-iBlock"> <div class="u-iBlock">
<div class="CDB-ColorInput"> <div class="CDB-OptionInput">
<span class="CDB-ColorInput-colorBar Color-Higlight"></span> <span class="CDB-ColorBar CDB-ColorBar--mBorderRadius" style="background-color: #9DE0AD;"></span>
</div> </div>
</div> </div>
</fieldset> </fieldset>
@ -20,7 +20,7 @@
@import '../../cdb-variables/colors'; @import '../../cdb-variables/colors';
@import '../../cdb-utilities/mixins'; @import '../../cdb-utilities/mixins';
.CDB-ColorInput { .CDB-OptionInput {
@include display-flex(); @include display-flex();
@include align-items(center); @include align-items(center);
width: $baseSize * 20; width: $baseSize * 20;
@ -38,11 +38,6 @@
border: 1px solid $cBlue; border: 1px solid $cBlue;
} }
} }
.CDB-OptionInput.is-active {
.CDB-ColorInput-colorBar { border: 1px solid $cBlue;
@include inline-block();
width: 100%;
height: $baseSize / 2;
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: $baseSize;
} }