Merge branch 'master' of github.com:CartoDB/CartoAssets
This commit is contained in:
Javier Arce
commit
df5f4b7018
116
src/scss/cdb-components/forms/color_bar.scss
Normal file
116
src/scss/cdb-components/forms/color_bar.scss
Normal file
@ -0,0 +1,116 @@
|
|||||||
|
// Color input styles
|
||||||
|
// ----------------------------------------------
|
||||||
|
|
||||||
|
/* SG
|
||||||
|
# Forms/Color bar
|
||||||
|
|
||||||
|
```
|
||||||
|
<ul class="CDB-ColorBarContainer">
|
||||||
|
<li class="CDB-ColorBar CDB-ColorBar--spaceMedium" style="background-color: #9DE0AD;"></li>
|
||||||
|
<li class="CDB-ColorBar CDB-ColorBar--spaceMedium" style="background-color: #50E3C2;"></li>
|
||||||
|
<li class="CDB-ColorBar CDB-ColorBar--spaceMedium" style="background-color: #FFFFC0;"></li>
|
||||||
|
<li class="CDB-ColorBar CDB-ColorBar--spaceMedium" style="background-color: #7ED321;"></li>
|
||||||
|
<li class="CDB-ColorBar CDB-ColorBar--spaceMedium" style="background-color: #BD10E0;"></li>
|
||||||
|
<li class="CDB-ColorBar CDB-ColorBar--spaceMedium" style="background-color: #F15743;"></li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<br/>
|
||||||
|
|
||||||
|
<ul class="CDB-ColorBarContainer">
|
||||||
|
<li class="CDB-ColorBar CDB-ColorBar--spaceSmall" style="background-color: #9DE0AD;"></li>
|
||||||
|
<li class="CDB-ColorBar CDB-ColorBar--spaceSmall" style="background-color: #50E3C2;"></li>
|
||||||
|
<li class="CDB-ColorBar CDB-ColorBar--spaceSmall" style="background-color: #FFFFC0;"></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>
|
||||||
|
|
||||||
|
<br/>
|
||||||
|
|
||||||
|
<ul class="CDB-ColorBarContainer">
|
||||||
|
<li class="CDB-ColorBar CDB-ColorBar--spaceless" style="background-color: #9DE0AD;"></li>
|
||||||
|
<li class="CDB-ColorBar CDB-ColorBar--spaceless" style="background-color: #50E3C2;"></li>
|
||||||
|
<li class="CDB-ColorBar CDB-ColorBar--spaceless" style="background-color: #FFFFC0;"></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>
|
||||||
|
|
||||||
|
<br/>
|
||||||
|
|
||||||
|
<ul class="CDB-ColorBarContainer">
|
||||||
|
<li class="CDB-ColorBar" style="background-color: #9DE0AD;"></li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<br/>
|
||||||
|
|
||||||
|
<ul class="CDB-ColorBarContainer">
|
||||||
|
<li class="CDB-ColorBar CDB-ColorBar-gradient" style="background: linear-gradient(90deg, #FFFECA, #9FDAB3, #36B6C5, #207EBA, #203196);"></li>
|
||||||
|
</ul>
|
||||||
|
```
|
||||||
|
*/
|
||||||
|
|
||||||
|
@import '../../cdb-variables/sizes';
|
||||||
|
@import '../../cdb-utilities/mixins';
|
||||||
|
|
||||||
|
.CDB-ColorBarContainer {
|
||||||
|
@include display-flex();
|
||||||
|
@include flex-direction(row);
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.CDB-ColorBar {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
height: $baseSize - 2;
|
||||||
|
border: 1px solid rgba(0, 0, 0, 0.2);
|
||||||
|
border-radius: $baseSize - 2;
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.CDB-ColorBar-gradient {
|
||||||
|
border: 0;
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
border: 1px solid rgba(0, 0, 0, 0.2);
|
||||||
|
border-radius: $baseSize - 2;
|
||||||
|
content: '';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.CDB-ColorBar.CDB-ColorBar--spaceMedium {
|
||||||
|
margin-right: $baseSize / 2;
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.CDB-ColorBar.CDB-ColorBar--spaceless {
|
||||||
|
border-width: 1px 0;
|
||||||
|
border-radius: 0;
|
||||||
|
}
|
||||||
|
.CDB-ColorBar.CDB-ColorBar--spaceless:first-child {
|
||||||
|
border-width: 1px 0 1px 1px;
|
||||||
|
border-radius: $baseSize - 2 0 0 $baseSize - 2;
|
||||||
|
}
|
||||||
|
.CDB-ColorBar.CDB-ColorBar--spaceless:last-child {
|
||||||
|
border-width: 1px 1px 1px 0;
|
||||||
|
border-radius: 0 $baseSize - 2 $baseSize - 2 0;
|
||||||
|
}
|
||||||
|
.CDB-ColorBar.CDB-ColorBar--spaceSmall {
|
||||||
|
margin-right: 2px;
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
.CDB-ColorBar.CDB-ColorBar--spaceSmall:first-child {
|
||||||
|
border-radius: $baseSize - 2 3px 3px $baseSize - 2;
|
||||||
|
}
|
||||||
|
.CDB-ColorBar.CDB-ColorBar--spaceSmall:last-child {
|
||||||
|
margin-right: 0;
|
||||||
|
border-radius: 3px $baseSize - 2 $baseSize - 2 3px;
|
||||||
|
}
|
||||||
146
src/scss/cdb-components/forms/option_input.scss
Normal file
146
src/scss/cdb-components/forms/option_input.scss
Normal file
@ -0,0 +1,146 @@
|
|||||||
|
// Color input styles
|
||||||
|
// ----------------------------------------------
|
||||||
|
|
||||||
|
/* SG
|
||||||
|
# Forms/Option input
|
||||||
|
|
||||||
|
```
|
||||||
|
<div class="CDB-OptionInput is-active CDB-Text">
|
||||||
|
<ul class="CDB-OptionInput-container">
|
||||||
|
<li class="CDB-OptionInput-item is-active">
|
||||||
|
<button type="button" class="CDB-OptionInput-content">8px</button>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="CDB-OptionInput-item">
|
||||||
|
<button type="button" class="CDB-OptionInput-content">solid</button>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="CDB-OptionInput-item">
|
||||||
|
<button type="button" class="CDB-ColorBarContainer CDB-OptionInput-content">
|
||||||
|
<span class="CDB-ColorBar" style="background-color: #207EBA;"></span>
|
||||||
|
</button>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<br/>
|
||||||
|
|
||||||
|
<div class="CDB-OptionInput is-active CDB-Text">
|
||||||
|
<ul class="CDB-OptionInput-container">
|
||||||
|
<li class="CDB-OptionInput-item">
|
||||||
|
<button type="button" class="CDB-OptionInput-content">8...12</button>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="CDB-OptionInput-item is-active">
|
||||||
|
<button type="button" class="CDB-ColorBarContainer CDB-OptionInput-content">
|
||||||
|
<span class="CDB-ColorBar" style="background-color: #FFFFC0;"></span>
|
||||||
|
</button>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<br/>
|
||||||
|
|
||||||
|
<button type="button" class="CDB-OptionInput">
|
||||||
|
<div class="CDB-OptionInput-container">
|
||||||
|
<span class="CDB-ColorBar CDB-ColorBar-gradient" style="background: linear-gradient(90deg, #FFFECA, #9FDAB3, #36B6C5, #207EBA, #203196);"></span>
|
||||||
|
</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--spaceSmall" style="background-color: #9DE0AD;"></li>
|
||||||
|
<li class="CDB-ColorBar CDB-ColorBar--spaceSmall" style="background-color: #50E3C2;"></li>
|
||||||
|
<li class="CDB-ColorBar CDB-ColorBar--spaceSmall" style="background-color: #FFFFC0;"></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>
|
||||||
|
</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--spaceless" style="background-color: #9DE0AD;"></li>
|
||||||
|
<li class="CDB-ColorBar CDB-ColorBar--spaceless" style="background-color: #50E3C2;"></li>
|
||||||
|
<li class="CDB-ColorBar CDB-ColorBar--spaceless" style="background-color: #FFFFC0;"></li>
|
||||||
|
<li class="CDB-ColorBar CDB-ColorBar--spaceless" style="background-color: #7ED321;"></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
```
|
||||||
|
*/
|
||||||
|
|
||||||
|
@import '../../cdb-variables/sizes';
|
||||||
|
@import '../../cdb-variables/colors';
|
||||||
|
@import '../../cdb-utilities/mixins';
|
||||||
|
|
||||||
|
.CDB-OptionInput {
|
||||||
|
width: 100%;
|
||||||
|
height: $baseSize * 4;
|
||||||
|
border: 1px solid $cMainLine;
|
||||||
|
border-radius: $baseSize / 2;
|
||||||
|
box-sizing: border-box;
|
||||||
|
vertical-align: middle;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
border: 1px solid $cHoverLine;
|
||||||
|
}
|
||||||
|
&:focus {
|
||||||
|
border: 1px solid $cBlue;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.CDB-OptionInput.is-active {
|
||||||
|
border: 1px solid $cBlue;
|
||||||
|
}
|
||||||
|
.CDB-OptionInput-container {
|
||||||
|
@include display-flex();
|
||||||
|
@include align-content(center);
|
||||||
|
@include align-items(center);
|
||||||
|
margin: 0 $baseSize;
|
||||||
|
}
|
||||||
|
.CDB-OptionInput-item {
|
||||||
|
@include display-flex();
|
||||||
|
@include align-items(center);
|
||||||
|
@include align-content(center);
|
||||||
|
width: auto;
|
||||||
|
height: 100%;
|
||||||
|
font-size: $sFontSize-medium;
|
||||||
|
box-sizing: content-box;
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
padding: 0 $baseSize - 2;
|
||||||
|
color: $cHintText;
|
||||||
|
content: '·';
|
||||||
|
}
|
||||||
|
&:last-child {
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.CDB-OptionInput-content {
|
||||||
|
@include display-flex();
|
||||||
|
@include align-items(center);
|
||||||
|
height: 100%;
|
||||||
|
color: $cMainBg;
|
||||||
|
box-sizing: content-box;
|
||||||
|
white-space: nowrap;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.CDB-OptionInput-item.is-active > .CDB-OptionInput-content {
|
||||||
|
border-bottom: 1px solid $cMainBg;
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user