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

Migrate components/forms to PostCSS syntax

Browse Source
This commit is contained in:
rubenmoya
2017-12-22 17:33:53 +01:00
parent ac383dade7
commit 949ae5576a
14 changed files with 285 additions and 729 deletions
Download Patch File Download Diff File Expand all files Collapse all files

178
src/components/forms/_dropdowns.css
View File

@@ -1,178 +0,0 @@
// Dropdown styles
// ----------------------------------------------
/* SG
# Forms/Dropdowns
```
<div class="CDB-DropdownContainer">
<input type="text" name="text" placeholder="DejaVu Sans" class="CDB-InputText CDB-Text">
<div class="CDB-Dropdown CDB-Box-Modal">
<ul class="CDB-Dropdown-calculations CDB-Text is-semibold">
<li class="CDB-Dropdown-calculationsElement">
<input class="CDB-Radio" type="radio" name="calculation" value="01" checked>
<span class="u-iBlock CDB-Radio-face"></span>
<label class="u-iBlock u-lSpace">COUNT</label>
</li>
<li class="CDB-Dropdown-calculationsElement">
<input class="CDB-Radio" type="radio" name="calculation" value="02">
<span class="u-iBlock CDB-Radio-face"></span>
<label class="u-iBlock u-lSpace">SUM</label>
</li>
<li class="CDB-Dropdown-calculationsElement">
<input class="CDB-Radio" type="radio" name="calculation" value="03">
<span class="u-iBlock CDB-Radio-face"></span>
<label class="u-iBlock u-lSpace">AVG</label>
</li>
<li class="CDB-Dropdown-calculationsElement">
<input class="CDB-Radio" type="radio" name="calculation" value="04">
<span class="u-iBlock CDB-Radio-face"></span>
<label class="u-iBlock u-lSpace">MAX</label>
</li>
<li class="CDB-Dropdown-calculationsElement">
<input class="CDB-Radio" type="radio" name="calculation" value="05">
<span class="u-iBlock CDB-Radio-face"></span>
<label class="u-iBlock u-lSpace">MIN</label>
</li>
</ul>
<ul class="CDB-Dropdown-options CDB-Text CDB-Size-medium">
<li class="CDB-Dropdown-optionsElement is-selected" title="selected">selected</li>
<li class="CDB-Dropdown-optionsElement" title="active">active</li>
<li class="CDB-Dropdown-optionsElement is-disabled" title="disabled">disabled</li>
<li class="CDB-Dropdown-optionsElement is-disabled" title="disabled">disabled</li>
</ul>
</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>
```
*/
.CDB-DropdownContainer {
position: relative;
height: 250px;
}
.CDB-Dropdown {
display: flex;
position: absolute;
top: 40px;
flex-direction: row;
max-height: 200px;
}
.CDB-Dropdown-calculations {
box-sizing: border-box;
padding: $sMargin-element;
border-right: 1px solid var(--color-line);
border-radius: 4px 0 0 4px;
background-color: $cSecondaryBackground;
}
.CDB-Dropdown-calculationsElement {
margin-bottom: var(--line-height-medium);
color: $cMainBg;
font-size: $sFontSize-small;
&:last-child {
margin-bottom: 0;
}
}
.CDB-Dropdown-options {
width: $baseSize * 20;
border-radius: 0 4px 4px 0;
background-color: white;
vertical-align: top;
}
.CDB-Dropdown-optionsElement {
@include text-overflow();
padding: 12px 10px;
border-bottom: 1px solid var(--color-line);
color: var(--color-blue);
&:last-child {
border-bottom: 0;
}
&:hover {
background-color: rgba(var(--color-blue), 0.08);
color: $cMainBg;
cursor: pointer;
}
&.is-selected {
color: $cMainBg;
}
&.is-disabled {
color: var(--color-text-alt);
&:hover {
background-color: transparent;
cursor: default;
}
}
}

100
src/components/forms/_legends.css
View File

@@ -1,100 +0,0 @@
// Legends styles
// ----------------------------------------------
/* SG
# Forms/Labels
```
<div class="u-iBlock CDB-Text CDB-Size-medium u-rSpace--xl">
<input class="CDB-Radio" type="radio" name="veritas" value="01">
<span class="u-iBlock CDB-Radio-face"></span>
<label class="u-iBlock u-lSpace">True</label>
</div>
<div class="u-iBlock CDB-Text CDB-Size-medium u-rSpace--xl">
<input class="CDB-Radio" type="radio" name="veritas" value="02" checked>
<span class="u-iBlock CDB-Radio-face"></span>
<label class="u-iBlock u-lSpace">False</label>
</div>
<br/>
<br/>
<br/>
<div class="u-iblock CDB-Text CDB-Size-medium u-rSpace--xl">
<input class="CDB-Checkbox" type="checkbox" name="hobbies" value="Sport">
<span class="u-iBlock CDB-Checkbox-face"></span>
<label class="u-iBlock u-lSpace">Sport</label>
</div>
<label class="u-iblock CDB-Text CDB-Size-medium">
<input class="CDB-Checkbox" type="checkbox" name="hobbies" value="Travel">
<span class="u-iBlock CDB-Checkbox-face"></span>
<label class="u-iBlock u-lSpace">Travel</label>
</label>
<br/>
<br/>
<br/>
<div class="CDB-Fieldset">
<p class="CDB-Legend CDB-Text is-semibold CDB-Size-small u-rSpace--m">RADIO</p>
<ul class="CDB-Size-medium CDB-Text CDB-Fieldset-block">
<li class="u-rSpace--xl u-iblock">
<div class="u-iblock CDB-Size-medium">
<input class="CDB-Checkbox" type="checkbox" name="hobbies" value="Sport">
<span class="u-iBlock CDB-Checkbox-face"></span>
<label class="u-iBlock u-lSpace">Sport</label>
</div>
</li>
<li class="u-iblock">
<label class="u-iblock CDB-Size-medium">
<input class="CDB-Checkbox" type="checkbox" name="hobbies" value="Travel">
<span class="u-iBlock CDB-Checkbox-face"></span>
<label class="u-iBlock u-lSpace">Travel</label>
</label>
</li>
</ul>
</div>
<div class="u-tSpace-xl CDB-Text CDB-Fieldset">
<p class="CDB-Legend CDB-Text is-semibold CDB-Size-small u-rSpace--m">RADIO</p>
<input type="text" name="text" placeholder="DejaVu Sans" class="CDB-InputText">
</div>
<br/>
<br/>
<br/>
<div class="CDB-Text CDB-Fieldset">
<p class="CDB-Legend CDB-Legend--big u-ellipsis CDB-Text is-semibold CDB-Size-small u-rSpace--m">
<input class="CDB-Checkbox" type="checkbox" name="field" value="Sport">
<span class="u-iBlock CDB-Checkbox-face u-rSpace--m"></span>
<label class="CDB-Text is-semibold CDB-Size-small u-rSpace--m">SPORT</label>
</p>
<input type="text" name="text" placeholder="DejaVu Sans" class="CDB-InputText">
</div>
<div class="u-tSpace-xl CDB-Text CDB-Fieldset">
<p class="CDB-Legend CDB-Legend--big u-ellipsis CDB-Text is-semibold CDB-Size-small u-rSpace--m">
<input class="CDB-Checkbox" type="checkbox" name="field" value="Travel">
<span class="u-iBlock CDB-Checkbox-face u-rSpace--m"></span>
<label class="CDB-Text is-semibold CDB-Size-small u-rSpace--m">TRAVEL</label>
</p>
<input type="text" name="text" placeholder="DejaVu Sans" class="CDB-InputText">
</div>
```
*/
.CDB-Legend {
width: $baseSize * 12;
}
.CDB-Legend--big {
width: ($baseSize * 24);
}
.CDB-Fieldset {
@include display-flex();
@include align-items(center);
}
.CDB-Fieldset-block {
width: 100%;
}

212
src/components/forms/_option-input.css
View File

@@ -1,212 +0,0 @@
// 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/>
<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">
<button type="button" class="CDB-OptionInput-content">solid</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>
```
*/
.CDB-OptionInput {
box-sizing: border-box;
width: 100%;
height: $baseSize * 4 - 2px;
border-radius: $baseSize / 2;
vertical-align: middle;
}
.CDB-OptionInput-container {
display: flex;
align-content: center;
align-items: center;
&--noMargin {
margin: 0;
}
}
.CDB-OptionInput-item {
display: flex;
position: relative;
box-sizing: content-box;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
font-size: var(--font-size-medium);
&.is-active,
&:hover,
&:focus {
cursor: pointer;
}
&:first-child {
width: auto;
margin-right: $baseSize;
}
&:last-child {
width: 100%;
}
}
.CDB-OptionInput-container--border .CDB-OptionInput-item {
border: 1px solid var(--color-line);
&:hover {
border: 1px solid var(--color-blue-hover);
}
&.is-active,
&:focus {
border: 1px solid $cBlackHover;
}
&:first-child {
margin-right: 0;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
&:hover {
+ .CDB-OptionInput-item::after {
content: none;
}
}
}
&:last-child {
border-radius: 4px;
}
+ .CDB-OptionInput-item {
border-left: none;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
&.is-active::after,
&:focus::after,
&:hover::after {
position: absolute;
left: -1px;
width: 1px;
height: calc(100% + 2px);
content: '';
}
&:hover::after {
background-color: var(--color-blue-hover);
}
&.is-active::after,
&:focus::after {
background-color: $cBlackHover;
}
}
}
.CDB-OptionInput-content {
display: flex;
box-sizing: content-box;
align-items: center;
justify-content: center;
height: 100%;
padding: 0 $baseSize;
color: $cMainBg;
white-space: nowrap;
&:hover {
text-decoration: none;
}
}

98
src/components/forms/_selects.css
View File

@@ -1,98 +0,0 @@
// Select styles
// ----------------------------------------------
/* SG
# Forms/Selects
```
<div class="CDB-Select" style="height: 250px;">
<input type="text" name="text" placeholder="DejaVu Sans" class="CDB-InputText CDB-Text">
<div class="CDB-Box-Modal CDB-SelectItem">
<ul class="CDB-Text CDB-Size-medium">
<li class="CDB-ListDecoration-Item"><a href="#" class="CDB-ListDecoration-ItemLink">Hide</a></li>
<li class="CDB-ListDecoration-Item"><a href="#" class="CDB-ListDecoration-ItemLink">Rename</a></li>
<li class="CDB-ListDecoration-Item"><a href="#" class="CDB-ListDecoration-ItemLink">Change source dataset…</a></li>
<li class="CDB-ListDecoration-Item"><a href="#" class="CDB-ListDecoration-ItemLink">Delete this layer…</a></li>
</ul>
</div>
</div>
<br/>
<br/>
<br/>
<div class="CDB-Select" style="height: 250px;">
<div class="CDB-InputText CDB-Text">DejaVu Sans</div>
<div class="CDB-Box-Modal CDB-SelectItem">
<ul class="CDB-Text CDB-Size-medium">
<li class="CDB-ListDecoration-Item"><a href="#" class="CDB-ListDecoration-ItemLink">Hide</a></li>
<li class="CDB-ListDecoration-Item"><a href="#" class="CDB-ListDecoration-ItemLink">Rename</a></li>
<li class="CDB-ListDecoration-Item"><a href="#" class="CDB-ListDecoration-ItemLink">Change source dataset…</a></li>
<li class="CDB-ListDecoration-Item"><a href="#" class="CDB-ListDecoration-ItemLink">Delete this layer…</a></li>
</ul>
</div>
</div>
<div class="CDB-InputText CDB-Text is-cursor is-disabled">DejaVu Sans</div>
<br/>
<div class="CDB-InputText CDB-Text is-cursor is-empty">DejaVu Sans</div>
<br/>
<div class="CDB-InputText CDB-Text is-cursor is-null">null</div>
<br/>
<div class="CDB-InputText CDB-Text is-cursor is-number">46,594</div>
<br/>
<select name="select" class="CDB-SelectFake CDB-Text">
<option value="value1" selected>Choose an option</option>
<option value="value2">Hide</option>
<option value="value3">Rename</option>
<option value="value4">Change source dataset…</option>
<option value="value5">Delete this layer…</option>
</select>
```
*/
.CDB-Select {
position: relative;
}
.CDB-SelectItem {
position: absolute;
top: 40px;
}
.CDB-SelectFake {
-webkit-appearance: none;
appearance: none;
width: 100%;
padding: 7px 8px 6px;
border: 1px solid var(--color-line);
border-radius: $baseSize / 2;
background: white;
font-size: var(--font-size-medium);
line-height: var(--line-height-medium);
box-sizing: border-box;
&:hover {
border: 1px solid var(--color-line-hover);
}
&:focus {
border: 1px solid var(--color-blue);
outline: none;
}
&:disabled {
border-color: var(--color-line-secondary);
background: var(--color-softgray);
}
&.has-error {
@include default-form-error-style();
}
}
.CDB-FieldError .CDB-Select,
.CDB-FieldError .CDB-SelectFake {
@include default-form-error-style();
}

90
src/components/forms/_tabsForms.css
View File

@@ -1,90 +0,0 @@
// Tabs Forms styles
// ----------------------------------------------
/* SG
# Forms/TabsForms
```
<div class="CDB-TabsForms u-iBlock">
<ul class="CDB-TabsForms-inner">
<li class="CDB-TabsForms-item">
<button class="CDB-TabsForms-button">
<div class="CDB-Shape">
<ul class="CDB-Shape-paragraph is-left">
<li class="CDB-Shape-paragraphItem">
<span class="CDB-Shape-paragraphBar CDB-Shape-paragraphBar--01"></span>
</li>
<li class="CDB-Shape-paragraphItem">
<span class="CDB-Shape-paragraphBar CDB-Shape-paragraphBar--02"></span>
</li>
<li class="CDB-Shape-paragraphItem">
<span class="CDB-Shape-paragraphBar CDB-Shape-paragraphBar--03"></span>
</li>
<li class="CDB-Shape-paragraphItem">
<span class="CDB-Shape-paragraphBar CDB-Shape-paragraphBar--04"></span>
</li>
</ul>
</div>
</button>
</li>
<li class="CDB-TabsForms-item">
<button class="CDB-TabsForms-button">
<div class="CDB-Shape">
<ul class="CDB-Shape-paragraph is-center">
<li class="CDB-Shape-paragraphItem">
<span class="CDB-Shape-paragraphBar CDB-Shape-paragraphBar--01"></span>
</li>
<li class="CDB-Shape-paragraphItem">
<span class="CDB-Shape-paragraphBar CDB-Shape-paragraphBar--02"></span>
</li>
<li class="CDB-Shape-paragraphItem">
<span class="CDB-Shape-paragraphBar CDB-Shape-paragraphBar--03"></span>
</li>
<li class="CDB-Shape-paragraphItem">
<span class="CDB-Shape-paragraphBar CDB-Shape-paragraphBar--04"></span>
</li>
</ul>
</div>
</button>
</li>
<li class="CDB-TabsForms-item">
<button class="CDB-TabsForms-button">
<div class="CDB-Shape">
<ul class="CDB-Shape-paragraph is-right is-active">
<li class="CDB-Shape-paragraphItem">
<span class="CDB-Shape-paragraphBar CDB-Shape-paragraphBar--01"></span>
</li>
<li class="CDB-Shape-paragraphItem">
<span class="CDB-Shape-paragraphBar CDB-Shape-paragraphBar--02"></span>
</li>
<li class="CDB-Shape-paragraphItem">
<span class="CDB-Shape-paragraphBar CDB-Shape-paragraphBar--03"></span>
</li>
<li class="CDB-Shape-paragraphItem">
<span class="CDB-Shape-paragraphBar CDB-Shape-paragraphBar--04"></span>
</li>
</ul>
</div>
</button>
</li>
</ul>
</div>
```
*/
.CDB-TabsForms {
border: 1px solid var(--color-line);
border-radius: 4px;
}
.CDB-TabsForms-inner {
@include display-flex();
}
.CDB-TabsForms-item {
border-left: 1px solid var(--color-line-secondary);
}
.CDB-TabsForms-item:first-child {
border-left: 0;
}
.CDB-TabsForms-button {
padding: 7px 8px;
}

69
src/components/forms/dropdowns.css Normal file
View File

@@ -0,0 +1,69 @@
.CDB-DropdownContainer {
position: relative;
height: 250px;
}
.CDB-Dropdown {
display: flex;
position: absolute;
top: 40px;
flex-direction: row;
max-height: 200px;
}
.CDB-Dropdown-calculations {
box-sizing: border-box;
padding: 14px;
border-right: 1px solid var(--color-line);
border-radius: 4px 0 0 4px;
background-color: var(--color-bg-secondary);
}
.CDB-Dropdown-calculationsElement {
margin-bottom: var(--line-height-medium);
color: var(--color-black);
font-size: var(--font-size-small);
&:last-child {
margin-bottom: 0;
}
}
.CDB-Dropdown-options {
width: $baseSize * 20;
border-radius: 0 4px 4px 0;
background-color: white;
vertical-align: top;
}
.CDB-Dropdown-optionsElement {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding: 12px 10px;
border-bottom: 1px solid var(--color-line);
color: var(--color-blue);
&:last-child {
border-bottom: 0;
}
&:hover {
background-color: rgba(var(--color-blue), 0.08);
color: var(--color-black);
cursor: pointer;
}
&.is-selected {
color: var(--color-black);
}
&.is-disabled {
color: var(--color-text-alt);
&:hover {
background-color: transparent;
cursor: default;
}
}
}

29
src/components/forms/_inputs.css → src/components/forms/inputs.css
View File

@@ -1,22 +1,9 @@
// Input styles
// ----------------------------------------------
/* SG
# Forms/Inputs
```
<input type="text" name="text" placeholder="DejaVu Sans" class="CDB-InputText CDB-Text">
<input type="text" name="text" placeholder="DejaVu Sans" class="CDB-InputText has-error CDB-Text">
<input type="text" name="text" placeholder="DejaVu Sans" disabled class="CDB-InputText is-disabled CDB-Text">
```
*/
.CDB-InputText {
width: 100%;
min-height: 32px;
padding: 7px 8px;
border: 1px solid var(--color-line);
border-radius: $baseSize / 2;
border-radius: 4px;
font-size: var(--font-size-medium);
line-height: var(--line-height-medium);
box-sizing: border-box;
@@ -30,7 +17,7 @@
}
&.is-number {
color: darken($cHighlight, 16%);
color: var(--color-highlight);
}
&.is-null {
@@ -43,7 +30,7 @@
}
&:focus {
border: 1px solid $cBlackHover;
border: 1px solid var(--color-black);
outline: none;
}
@@ -55,11 +42,13 @@
}
&.has-icon {
padding-right: $baseSize * 4;
padding-right: 32px;
}
&.has-error {
@include default-form-error-style();
border: 1px solid color(var(--color-error) alpha(0.48));
background: color(var(--color-error) alpha(0.04));
color: var(--color-error);
}
}
@@ -73,5 +62,7 @@
}
.CDB-FieldError .CDB-InputText {
@include default-form-error-style();
border: 1px solid color(var(--color-error) alpha(0.48));
background: color(var(--color-error) alpha(0.04));
color: var(--color-error);
}

16
src/components/forms/legends.css Normal file
View File

@@ -0,0 +1,16 @@
.CDB-Legend {
width: 96px;
}
.CDB-Legend--big {
width: 192px;
}
.CDB-Fieldset {
display: flex;
align-items: ceter;
}
.CDB-Fieldset-block {
width: 100%;
}

112
src/components/forms/option-input.css Normal file
View File

@@ -0,0 +1,112 @@
.CDB-OptionInput {
box-sizing: border-box;
width: 100%;
height: 30px;
border-radius: 16px;
vertical-align: middle;
}
.CDB-OptionInput-container {
display: flex;
align-content: center;
align-items: center;
}
.CDB-OptionInput-container--noMargin {
margin: 0;
}
.CDB-OptionInput-item {
display: flex;
position: relative;
box-sizing: content-box;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
font-size: var(--font-size-medium);
&.is-active,
&:hover,
&:focus {
cursor: pointer;
}
&:first-child {
width: auto;
margin-right: 8px;
}
&:last-child {
width: 100%;
}
}
.CDB-OptionInput-container--border .CDB-OptionInput-item {
border: 1px solid var(--color-line);
&:hover {
border: 1px solid var(--color-blue-hover);
}
&.is-active,
&:focus {
border: 1px solid var(--color-black);
}
&:first-child {
margin-right: 0;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
&:hover {
+ .CDB-OptionInput-item::after {
content: none;
}
}
}
&:last-child {
border-radius: 4px;
}
+ .CDB-OptionInput-item {
border-left: none;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
&.is-active::after,
&:focus::after,
&:hover::after {
position: absolute;
left: -1px;
width: 1px;
height: calc(100% + 2px);
content: '';
}
&:hover::after {
background-color: var(--color-blue-hover);
}
&.is-active::after,
&:focus::after {
background-color: var(--color-black);
}
}
}
.CDB-OptionInput-content {
display: flex;
box-sizing: content-box;
align-items: center;
justify-content: center;
height: 100%;
padding: 0 8px;
color: var(--color-black);
white-space: nowrap;
&:hover {
text-decoration: none;
}
}

35
src/components/forms/_radio.css → src/components/forms/radio.css
View File

@@ -1,30 +1,7 @@
// Radios styles
// ----------------------------------------------
/* SG
# Forms/Radio
```
<div class="u-iBlock">
<input class="CDB-Radio" type="radio" name="gender" value="01" checked>
<span class="u-iBlock CDB-Radio-face"></span>
</div>
<div class="u-iBlock">
<input class="CDB-Radio" type="radio" name="gender" value="02">
<span class="u-iBlock CDB-Radio-face"></span>
</div>
<div class="u-iBlock">
<input class="CDB-Radio" type="radio" name="gender" value="03" disabled>
<span class="u-iBlock CDB-Radio-face"></span>
</div>
```
*/
.CDB-Radio {
position: absolute;
width: $baseSize * 2;
height: $baseSize * 2;
width: 16px;
height: 16px;
opacity: 0;
vertical-align: middle;
z-index: 1;
@@ -32,8 +9,8 @@
.CDB-Radio-face {
position: relative;
width: $baseSize * 2;
height: $baseSize * 2;
width: 16px;
height: 16px;
border: 1px solid var(--color-line);
border-radius: 50%;
background: white;
@@ -45,8 +22,8 @@
position: absolute;
top: 50%;
left: 50%;
width: $baseSize - 2;
height: $baseSize - 2;
width: 6px;
height: 6px;
margin-top: -3px;
margin-left: -3px;
border-radius: 50%;

48
src/components/forms/selects.css Normal file
View File

@@ -0,0 +1,48 @@
.CDB-Select {
position: relative;
}
.CDB-SelectItem {
position: absolute;
top: 40px;
}
.CDB-SelectFake {
-webkit-appearance: none;
appearance: none;
width: 100%;
padding: 7px 8px 6px;
border: 1px solid var(--color-line);
border-radius: 4px;
background: white;
font-size: var(--font-size-medium);
line-height: var(--line-height-medium);
box-sizing: border-box;
&:hover {
border: 1px solid var(--color-line-hover);
}
&:focus {
border: 1px solid var(--color-blue);
outline: none;
}
&:disabled {
border-color: var(--color-line-secondary);
background: var(--color-softgray);
}
&.has-error {
border: 1px solid color(var(--color-error) alpha(0.48));
background: color(var(--color-error) alpha(0.04));
color: var(--color-error);
}
}
.CDB-FieldError .CDB-Select,
.CDB-FieldError .CDB-SelectFake {
border: 1px solid color(var(--color-error) alpha(0.48));
background: color(var(--color-error) alpha(0.04));
color: var(--color-error);
}

20
src/components/forms/tabsForms.css Normal file
View File

@@ -0,0 +1,20 @@
.CDB-TabsForms {
border: 1px solid var(--color-line);
border-radius: 4px;
}
.CDB-TabsForms-inner {
display: flex;
}
.CDB-TabsForms-item {
border-left: 1px solid var(--color-line-secondary);
}
.CDB-TabsForms-item:first-child {
border-left: 0;
}
.CDB-TabsForms-button {
padding: 7px 8px;
}

4
src/components/forms/textarea.css
View File

@@ -33,6 +33,6 @@
.CDB-FieldError .CDB-Textarea,
.CDB-Textarea.has-error {
border: 1px solid color(var(--color-error) alpha(0.48));
background: color(var(--color-error) alpha(0.04));
color: var(--color-error);
background: color(var(--color-error) alpha(0.04));
color: var(--color-error);
}

3
src/variables/colors.css
View File

@@ -2,6 +2,7 @@
--color-blue: #1785FB;
--color-blue-hover: color(var(--color-blue) l(-10%) s(-10%));
--color-softgray: #F9F9F9;
--color-black: #2E3C43;
--color-highlight: #9DE0AD;
--color-alert: #FFFFC0;
@@ -10,7 +11,7 @@
--color-password: #FB7B23;
--color-error: #F15743;
--color-text-primary: #2E3C43;
--color-text-primary: var(--color-black);
--color-text-secondary: #747D82;
--color-text-alt: #BABEC0;
--color-text-alt-hover: color(var(--color-text-alt) l(-10%) s(-10%));