From 949ae5576a5be981318469e92426b7f718d27d5b Mon Sep 17 00:00:00 2001 From: rubenmoya Date: Fri, 22 Dec 2017 17:33:53 +0100 Subject: [PATCH] Migrate components/forms to PostCSS syntax --- src/components/forms/_dropdowns.css | 178 --------------- src/components/forms/_legends.css | 100 --------- src/components/forms/_option-input.css | 212 ------------------ src/components/forms/_selects.css | 98 -------- src/components/forms/_tabsForms.css | 90 -------- src/components/forms/dropdowns.css | 69 ++++++ .../forms/{_inputs.css => inputs.css} | 29 +-- src/components/forms/legends.css | 16 ++ src/components/forms/option-input.css | 112 +++++++++ .../forms/{_radio.css => radio.css} | 35 +-- src/components/forms/selects.css | 48 ++++ src/components/forms/tabsForms.css | 20 ++ src/components/forms/textarea.css | 4 +- src/variables/colors.css | 3 +- 14 files changed, 285 insertions(+), 729 deletions(-) delete mode 100644 src/components/forms/_dropdowns.css delete mode 100644 src/components/forms/_legends.css delete mode 100644 src/components/forms/_option-input.css delete mode 100644 src/components/forms/_selects.css delete mode 100644 src/components/forms/_tabsForms.css create mode 100644 src/components/forms/dropdowns.css rename src/components/forms/{_inputs.css => inputs.css} (59%) create mode 100644 src/components/forms/legends.css create mode 100644 src/components/forms/option-input.css rename src/components/forms/{_radio.css => radio.css} (66%) create mode 100644 src/components/forms/selects.css create mode 100644 src/components/forms/tabsForms.css diff --git a/src/components/forms/_dropdowns.css b/src/components/forms/_dropdowns.css deleted file mode 100644 index d46ed53..0000000 --- a/src/components/forms/_dropdowns.css +++ /dev/null @@ -1,178 +0,0 @@ -// Dropdown styles -// ---------------------------------------------- - -/* SG -# Forms/Dropdowns - -``` -
- -
-
    -
  • - - - -
    • -
  • - - - -
    • -
  • - - - -
    • -
  • - - - -
    • -
  • - - - -
    • -
- -
    -
  • selected
    • -
  • active
    • -
  • disabled
    • -
  • disabled
    • -
-
-
- - -
-
- -
- - -
-
-
-
-
-
-
- -
-
-
-
- -
-
- -
- - -
-
-
-
-
-
-
- - -``` -*/ - -.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; - } - } -} diff --git a/src/components/forms/_legends.css b/src/components/forms/_legends.css deleted file mode 100644 index 50d3c23..0000000 --- a/src/components/forms/_legends.css +++ /dev/null @@ -1,100 +0,0 @@ -// Legends styles -// ---------------------------------------------- - -/* SG -# Forms/Labels - -``` -
- - - -
-
- - - -
- -
-
-
- -
- - - -
- - -
-
-
- -
-

RADIO

- -
-
-

RADIO

- -
- -
-
-
- -
-

- - - -

- -
- -
-

- - - -

- -
-``` -*/ - -.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%; -} diff --git a/src/components/forms/_option-input.css b/src/components/forms/_option-input.css deleted file mode 100644 index 6fd6bfd..0000000 --- a/src/components/forms/_option-input.css +++ /dev/null @@ -1,212 +0,0 @@ -// Color input styles -// ---------------------------------------------- - -/* SG -# Forms/Option input - -``` -
- -
- -
- -
- -
- -
- -
- -
- -
- - - -
-
- - - -
-
- - -``` -*/ - -.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; - } -} diff --git a/src/components/forms/_selects.css b/src/components/forms/_selects.css deleted file mode 100644 index aed4cb2..0000000 --- a/src/components/forms/_selects.css +++ /dev/null @@ -1,98 +0,0 @@ -// Select styles -// ---------------------------------------------- - - -/* SG -# Forms/Selects - -``` -
- -
- -
-
- -
-
-
- - -
-
DejaVu Sans
-
- -
-
- -
DejaVu Sans
-
-
DejaVu Sans
-
-
null
-
-
46,594
-
- - - -``` -*/ - -.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(); -} diff --git a/src/components/forms/_tabsForms.css b/src/components/forms/_tabsForms.css deleted file mode 100644 index b263feb..0000000 --- a/src/components/forms/_tabsForms.css +++ /dev/null @@ -1,90 +0,0 @@ -// Tabs Forms styles -// ---------------------------------------------- - -/* SG -# Forms/TabsForms - -``` -
- -
-``` -*/ - -.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; -} diff --git a/src/components/forms/dropdowns.css b/src/components/forms/dropdowns.css new file mode 100644 index 0000000..d18f67f --- /dev/null +++ b/src/components/forms/dropdowns.css @@ -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; + } + } +} diff --git a/src/components/forms/_inputs.css b/src/components/forms/inputs.css similarity index 59% rename from src/components/forms/_inputs.css rename to src/components/forms/inputs.css index 1c1e8f9..2e9690e 100644 --- a/src/components/forms/_inputs.css +++ b/src/components/forms/inputs.css @@ -1,22 +1,9 @@ -// Input styles -// ---------------------------------------------- - -/* SG -# Forms/Inputs - -``` - - - -``` -*/ - .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); } diff --git a/src/components/forms/legends.css b/src/components/forms/legends.css new file mode 100644 index 0000000..e36b04b --- /dev/null +++ b/src/components/forms/legends.css @@ -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%; +} diff --git a/src/components/forms/option-input.css b/src/components/forms/option-input.css new file mode 100644 index 0000000..d717f4f --- /dev/null +++ b/src/components/forms/option-input.css @@ -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; + } +} diff --git a/src/components/forms/_radio.css b/src/components/forms/radio.css similarity index 66% rename from src/components/forms/_radio.css rename to src/components/forms/radio.css index d10a460..83b5cc1 100644 --- a/src/components/forms/_radio.css +++ b/src/components/forms/radio.css @@ -1,30 +1,7 @@ - -// Radios styles -// ---------------------------------------------- - -/* SG -# Forms/Radio - -``` -
- - -
-
- - -
-
- - -
-``` -*/ - .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%; diff --git a/src/components/forms/selects.css b/src/components/forms/selects.css new file mode 100644 index 0000000..ec0133a --- /dev/null +++ b/src/components/forms/selects.css @@ -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); +} diff --git a/src/components/forms/tabsForms.css b/src/components/forms/tabsForms.css new file mode 100644 index 0000000..b1971e2 --- /dev/null +++ b/src/components/forms/tabsForms.css @@ -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; +} diff --git a/src/components/forms/textarea.css b/src/components/forms/textarea.css index 5d76904..58c7c48 100644 --- a/src/components/forms/textarea.css +++ b/src/components/forms/textarea.css @@ -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); } diff --git a/src/variables/colors.css b/src/variables/colors.css index bd4c00f..50a0d8c 100644 --- a/src/variables/colors.css +++ b/src/variables/colors.css @@ -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%));