From 8a7870e59c9d528f4e4dd465c2c687b93e7a8b38 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mar=C3=ADa=20Checa?= Date: Thu, 28 Jan 2016 19:05:42 +0100 Subject: [PATCH 01/18] Checkbox optimization for Firefox --- src/scss/cdb-components/forms/checkbox.scss | 40 +++++++++++++++------ 1 file changed, 29 insertions(+), 11 deletions(-) diff --git a/src/scss/cdb-components/forms/checkbox.scss b/src/scss/cdb-components/forms/checkbox.scss index f8b7f06..c4f0aeb 100644 --- a/src/scss/cdb-components/forms/checkbox.scss +++ b/src/scss/cdb-components/forms/checkbox.scss @@ -5,9 +5,18 @@ # Forms/Checkbox ``` - - - +
+ + +
+
+ + +
+
+ + +
``` */ @@ -20,9 +29,18 @@ height: $baseSize * 2; border: 1px solid $cMainLine; border-radius: 3px; + box-sizing: border-box; + display: inline-block; - &::before, - &::after { + input[type="checkbox"] { + opacity: 0; + z-index: -1; + width: $baseSize * 2; + height: $baseSize * 2; + } + + input[type="checkbox"] ~ label::before, + input[type="checkbox"] ~ label::after { display: block; position: absolute; bottom: 3px; @@ -32,13 +50,13 @@ content: ''; } - &::before { + input[type="checkbox"] ~ label::before { right: $baseSize / 2; height: $baseSize; transform: rotate(45deg); } - &::after { + input[type="checkbox"] ~ label::after { left: $baseSize / 2; height: $baseSize - 2; transform: rotate(-45deg); @@ -52,8 +70,8 @@ border: 1px solid $cBlue; } - &::before, - &::after { + input[type="checkbox"] ~ label::before, + input[type="checkbox"] ~ label::after { background: $cWhite; } } @@ -74,8 +92,8 @@ border: 1px solid $cSecondaryLine; } - &::before, - &::after { + input[type="checkbox"] ~ label::before, + input[type="checkbox"] ~ label::after { background: $cWhite; } } From e356aee9fea982369cf85ad0a4366ac6f6167829 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mar=C3=ADa=20Checa?= Date: Fri, 29 Jan 2016 12:09:32 +0100 Subject: [PATCH 02/18] Checkbox adapted for Firefox --- src/scss/cdb-components/forms/checkbox.scss | 140 +++++++++++--------- 1 file changed, 76 insertions(+), 64 deletions(-) diff --git a/src/scss/cdb-components/forms/checkbox.scss b/src/scss/cdb-components/forms/checkbox.scss index c4f0aeb..6c607a4 100644 --- a/src/scss/cdb-components/forms/checkbox.scss +++ b/src/scss/cdb-components/forms/checkbox.scss @@ -5,17 +5,18 @@ # Forms/Checkbox ``` -
- - + +
+ +
-
- - +
+ +
-
- - +
+ +
``` */ @@ -23,78 +24,89 @@ @import '../../cdb-variables/sizes'; @import '../../cdb-variables/colors'; -.CDB-Checkbox { - position: relative; - width: $baseSize * 2; - height: $baseSize * 2; - border: 1px solid $cMainLine; - border-radius: 3px; - box-sizing: border-box; - display: inline-block; - - input[type="checkbox"] { - opacity: 0; - z-index: -1; +.CDB-CheckboxContainer { + position: relative; width: $baseSize * 2; height: $baseSize * 2; - } - input[type="checkbox"] ~ label::before, - input[type="checkbox"] ~ label::after { - display: block; + .CDB-Checkbox { + width: $baseSize * 2; + height: $baseSize * 2; + opacity: 0; position: absolute; - bottom: 3px; - width: 2px; - border-radius: 1px; - background: $cSecondaryLine; - content: ''; - } + z-index: 1; - input[type="checkbox"] ~ label::before { - right: $baseSize / 2; - height: $baseSize; - transform: rotate(45deg); - } + &:checked { + ~ .CDB-CheckboxLabel { + border: 1px solid $cBlue; + background: $cBlue; - input[type="checkbox"] ~ label::after { - left: $baseSize / 2; - height: $baseSize - 2; - transform: rotate(-45deg); - } + &::before, + &::after { + background: $cWhite; + } + } - &:checked { - border: 1px solid $cBlue; - background: $cBlue; + &:hover ~ .CDB-CheckboxLabel { + border: 1px solid $cBlue; + } + } - &:hover { + &:focus ~ .CDB-CheckboxLabel { border: 1px solid $cBlue; } - input[type="checkbox"] ~ label::before, - input[type="checkbox"] ~ label::after { - background: $cWhite; + &:hover ~ .CDB-CheckboxLabel { + border: 1px solid $cHoverLine; + } + + &:disabled { + ~ .CDB-CheckboxLabel { + border: 1px solid $cSecondaryLine; + background: $cThirdBackground; + + &::before, + &::after { + background: $cWhite; + } + } + + &:hover ~ .CDB-CheckboxLabel { + border: 1px solid $cSecondaryLine; + } } } - &:focus { - border: 1px solid $cBlue; - } + .CDB-CheckboxLabel { + position: absolute; + width: $baseSize * 2; + height: $baseSize * 2; + border: 1px solid $cMainLine; + border-radius: 3px; + box-sizing: border-box; + cursor: pointer; - &:hover { - border: 1px solid $cHoverLine; - } - - &:disabled { - border: 1px solid $cSecondaryLine; - background: $cThirdBackground; - - &:hover { - border: 1px solid $cSecondaryLine; + &::before, + &::after { + display: block; + position: absolute; + bottom: 3px; + width: 2px; + border-radius: 1px; + background: $cSecondaryLine; + content: ''; } - input[type="checkbox"] ~ label::before, - input[type="checkbox"] ~ label::after { - background: $cWhite; + &::before { + right: $baseSize / 2; + height: $baseSize; + transform: rotate(45deg); + } + + &::after { + left: $baseSize / 2; + height: $baseSize - 2; + transform: rotate(-45deg); } } } From 13fcad7f7cfa63581850a08e0bdc5f2bf260fe1f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mar=C3=ADa=20Checa?= Date: Fri, 29 Jan 2016 12:17:36 +0100 Subject: [PATCH 03/18] Radios adapted for Firefox --- src/scss/cdb-components/forms/checkbox.scss | 1 - src/scss/cdb-components/forms/radio.scss | 118 ++++++++++++-------- 2 files changed, 73 insertions(+), 46 deletions(-) diff --git a/src/scss/cdb-components/forms/checkbox.scss b/src/scss/cdb-components/forms/checkbox.scss index 6c607a4..4789bd5 100644 --- a/src/scss/cdb-components/forms/checkbox.scss +++ b/src/scss/cdb-components/forms/checkbox.scss @@ -5,7 +5,6 @@ # Forms/Checkbox ``` -
diff --git a/src/scss/cdb-components/forms/radio.scss b/src/scss/cdb-components/forms/radio.scss index 2076860..a323b14 100644 --- a/src/scss/cdb-components/forms/radio.scss +++ b/src/scss/cdb-components/forms/radio.scss @@ -1,72 +1,100 @@ -// Radio Button styles +// Radios styles // ---------------------------------------------- /* SG # Forms/Radio - ``` - - - +
+ + +
+
+ + +
+
+ + +
``` */ @import '../../cdb-variables/sizes'; @import '../../cdb-variables/colors'; -.CDB-Radio { - position: relative; - width: $baseSize * 2; - height: $baseSize * 2; - border: 1px solid $cMainLine; - border-radius: 50%; +.CDB-RadioContainer { + position: relative; + width: $baseSize * 2; + height: $baseSize * 2; - &::before { - display: block; + .CDB-Radio { + width: $baseSize * 2; + height: $baseSize * 2; + opacity: 0; position: absolute; - top: 50%; - left: 50%; - width: $baseSize - 2; - height: $baseSize - 2; - margin-top: -3px; - margin-left: -3px; - border-radius: 50%; - background: $cSecondaryLine; - content: ''; - } + z-index: 1; - &:checked { - border: 1px solid $cBlue; - background: $cBlue; + &:checked { + ~ .CDB-RadioLabel { + border: 1px solid $cBlue; + background: $cBlue; - &:hover { + &::before { + background: $cWhite; + } + } + + &:hover ~ .CDB-RadioLabel { + border: 1px solid $cBlue; + } + } + + &:focus ~ .CDB-RadioLabel { border: 1px solid $cBlue; } - &::before { - background: $cWhite; + &:hover ~ .CDB-RadioLabel { + border: 1px solid $cHoverLine; + } + + &:disabled { + ~ .CDB-RadioLabel { + border: 1px solid $cSecondaryLine; + background: $cThirdBackground; + + &::before { + background: $cWhite; + } + } + + &:hover ~ .CDB-RadioLabel { + border: 1px solid $cSecondaryLine; + } } } - &:focus { - border: 1px solid $cBlue; - } - - &:hover { - border: 1px solid $cHoverLine; - } - - &:disabled { - border: 1px solid $cSecondaryLine; - background: $cThirdBackground; - - &:hover { - border: 1px solid $cSecondaryLine; - } + .CDB-RadioLabel { + position: absolute; + width: $baseSize * 2; + height: $baseSize * 2; + border: 1px solid $cMainLine; + border-radius: 50%; + box-sizing: border-box; + cursor: pointer; &::before { - background: $cWhite; + display: block; + position: absolute; + top: 50%; + left: 50%; + width: $baseSize - 2; + height: $baseSize - 2; + margin-top: -3px; + margin-left: -3px; + border-radius: 50%; + background: $cSecondaryLine; + content: ''; } } } From e365455833a02a8d53cc9086d46d52fe9fa60f90 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mar=C3=ADa=20Checa?= Date: Fri, 29 Jan 2016 16:52:58 +0100 Subject: [PATCH 04/18] Checkbox, radio & legends fully optimized for Firefox --- src/scss/cdb-components/forms/checkbox.scss | 112 +++++++++--------- src/scss/cdb-components/forms/legends.scss | 50 ++++---- src/scss/cdb-components/forms/radio.scss | 120 ++++++++++---------- 3 files changed, 141 insertions(+), 141 deletions(-) diff --git a/src/scss/cdb-components/forms/checkbox.scss b/src/scss/cdb-components/forms/checkbox.scss index 4789bd5..9278f47 100644 --- a/src/scss/cdb-components/forms/checkbox.scss +++ b/src/scss/cdb-components/forms/checkbox.scss @@ -5,16 +5,19 @@ # Forms/Checkbox ``` -
+
+
-
+
+
-
+
+
``` @@ -23,64 +26,19 @@ @import '../../cdb-variables/sizes'; @import '../../cdb-variables/colors'; -.CDB-CheckboxContainer { +.CDB-Checkbox { + width: $baseSize * 2; + height: $baseSize * 2; + opacity: 0; + position: absolute; + z-index: 1; + + ~ .CDB-CheckboxFace { position: relative; width: $baseSize * 2; height: $baseSize * 2; - - .CDB-Checkbox { - width: $baseSize * 2; - height: $baseSize * 2; - opacity: 0; - position: absolute; - z-index: 1; - - &:checked { - ~ .CDB-CheckboxLabel { - border: 1px solid $cBlue; - background: $cBlue; - - &::before, - &::after { - background: $cWhite; - } - } - - &:hover ~ .CDB-CheckboxLabel { - border: 1px solid $cBlue; - } - } - - &:focus ~ .CDB-CheckboxLabel { - border: 1px solid $cBlue; - } - - &:hover ~ .CDB-CheckboxLabel { - border: 1px solid $cHoverLine; - } - - &:disabled { - ~ .CDB-CheckboxLabel { - border: 1px solid $cSecondaryLine; - background: $cThirdBackground; - - &::before, - &::after { - background: $cWhite; - } - } - - &:hover ~ .CDB-CheckboxLabel { - border: 1px solid $cSecondaryLine; - } - } - } - - .CDB-CheckboxLabel { - position: absolute; - width: $baseSize * 2; - height: $baseSize * 2; border: 1px solid $cMainLine; + background: $cWhite; border-radius: 3px; box-sizing: border-box; cursor: pointer; @@ -108,4 +66,44 @@ transform: rotate(-45deg); } } + + &:checked { + ~ .CDB-CheckboxFace { + border: 1px solid $cBlue; + background: $cBlue; + + &::before, + &::after { + background: $cWhite; + } + } + + &:hover ~ .CDB-CheckboxFace { + border: 1px solid $cBlue; + } + } + + &:focus ~ .CDB-CheckboxFace { + border: 1px solid $cBlue; + } + + &:hover ~ .CDB-CheckboxFace { + border: 1px solid $cHoverLine; + } + + &:disabled { + ~ .CDB-CheckboxFace { + border: 1px solid $cSecondaryLine; + background: $cThirdBackground; + + &::before, + &::after { + background: $cWhite; + } + } + + &:hover ~ .CDB-CheckboxFace { + border: 1px solid $cSecondaryLine; + } + } } diff --git a/src/scss/cdb-components/forms/legends.scss b/src/scss/cdb-components/forms/legends.scss index 2b918e4..f90372b 100644 --- a/src/scss/cdb-components/forms/legends.scss +++ b/src/scss/cdb-components/forms/legends.scss @@ -5,26 +5,30 @@ # Forms/Labels ``` - - +
+ + + +
+
+ + + +



- +
+ + + +

@@ -35,16 +39,18 @@

RADIO

  • - +
    + + + +
  • - +
diff --git a/src/scss/cdb-components/forms/radio.scss b/src/scss/cdb-components/forms/radio.scss index a323b14..6f9d71e 100644 --- a/src/scss/cdb-components/forms/radio.scss +++ b/src/scss/cdb-components/forms/radio.scss @@ -1,3 +1,4 @@ + // Radios styles // ---------------------------------------------- @@ -5,17 +6,17 @@ # Forms/Radio ``` -
- - +
+ +
-
- - +
+ +
-
- - +
+ +
``` */ @@ -23,68 +24,25 @@ @import '../../cdb-variables/sizes'; @import '../../cdb-variables/colors'; -.CDB-RadioContainer { +.CDB-Radio { + width: $baseSize * 2; + height: $baseSize * 2; + opacity: 0; + position: absolute; + z-index: 1; + + ~ .CDB-RadioFace { position: relative; width: $baseSize * 2; height: $baseSize * 2; - - .CDB-Radio { - width: $baseSize * 2; - height: $baseSize * 2; - opacity: 0; - position: absolute; - z-index: 1; - - &:checked { - ~ .CDB-RadioLabel { - border: 1px solid $cBlue; - background: $cBlue; - - &::before { - background: $cWhite; - } - } - - &:hover ~ .CDB-RadioLabel { - border: 1px solid $cBlue; - } - } - - &:focus ~ .CDB-RadioLabel { - border: 1px solid $cBlue; - } - - &:hover ~ .CDB-RadioLabel { - border: 1px solid $cHoverLine; - } - - &:disabled { - ~ .CDB-RadioLabel { - border: 1px solid $cSecondaryLine; - background: $cThirdBackground; - - &::before { - background: $cWhite; - } - } - - &:hover ~ .CDB-RadioLabel { - border: 1px solid $cSecondaryLine; - } - } - } - - .CDB-RadioLabel { - position: absolute; - width: $baseSize * 2; - height: $baseSize * 2; border: 1px solid $cMainLine; border-radius: 50%; box-sizing: border-box; cursor: pointer; + text-indent: 20px; + background: $cWhite; &::before { - display: block; position: absolute; top: 50%; left: 50%; @@ -97,4 +55,42 @@ content: ''; } } + + &:checked { + ~ .CDB-RadioFace { + border: 1px solid $cBlue; + background: $cBlue; + + &::before { + background: $cWhite; + } + } + + &:hover ~ .CDB-RadioFace { + border: 1px solid $cBlue; + } + } + + &:focus ~ .CDB-RadioFace { + border: 1px solid $cBlue; + } + + &:hover ~ .CDB-RadioFace { + border: 1px solid $cHoverLine; + } + + &:disabled { + ~ .CDB-RadioFace { + border: 1px solid $cSecondaryLine; + background: $cThirdBackground; + + &::before { + background: $cWhite; + } + } + + &:hover ~ .CDB-RadioFace { + border: 1px solid $cSecondaryLine; + } + } } From 7a826d42f11368cc2bca9533b796ed86f3779381 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mar=C3=ADa=20Checa?= Date: Fri, 29 Jan 2016 16:54:52 +0100 Subject: [PATCH 05/18] Toggle optimized for Firefox --- src/scss/cdb-components/forms/toggle.scss | 92 +++++++++++++++++++++++ src/scss/cdb-components/forms/toogle.scss | 50 ------------ 2 files changed, 92 insertions(+), 50 deletions(-) create mode 100644 src/scss/cdb-components/forms/toggle.scss delete mode 100644 src/scss/cdb-components/forms/toogle.scss diff --git a/src/scss/cdb-components/forms/toggle.scss b/src/scss/cdb-components/forms/toggle.scss new file mode 100644 index 0000000..76a85e4 --- /dev/null +++ b/src/scss/cdb-components/forms/toggle.scss @@ -0,0 +1,92 @@ +// Radio Button styles +// ---------------------------------------------- + +/* SG +# Forms/Toggle + + +``` +
+ + + + +
+``` +*/ + +@import '../../cdb-variables/sizes'; +@import '../../cdb-variables/colors'; +@import '../../cdb-utilities/mixins'; + +.CDB-Toggle { + width: $baseSize * 4; + height: $baseSize * 2; + opacity: 0; + position: absolute; + z-index: 1; + + ~ .CDB-ToggleFace { + @include transition(background, 300ms); + position: relative; + width: $baseSize * 4; + height: $baseSize * 2; + margin: 0 2px; + border-radius: 50px; + background: $cTypo4; + + &::before { + position: absolute; + top: 2px; + left: 2px; + width: $baseSize + 4; + height: $baseSize + 4; + border-radius: 50%; + background: $cWhite; + box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.48); + content: ''; + } + } + + &:checked ~ .CDB-ToggleFace { + background: $cMainDark; + + &::before { + right: 2px; + left: auto; + } + } +} + + + +// .CDB-Toggle { +// @include transition(background, 300ms); +// position: relative; +// width: $baseSize * 4; +// height: $baseSize * 2; +// margin: 0 2px; +// border-radius: 50px; +// background: $cTypo4; +// } + +// .CDB-Toggle:before { +// position: absolute; +// top: 2px; +// left: 2px; +// width: $baseSize + 4; +// height: $baseSize + 4; +// border-radius: 50%; +// background: $cWhite; +// box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.48); +// content: ''; +// } + +// .CDB-Toggle:checked { +// background: $cMainDark; +// } + +// .CDB-Toggle:checked:before { +// right: 2px; +// left: auto; +// } diff --git a/src/scss/cdb-components/forms/toogle.scss b/src/scss/cdb-components/forms/toogle.scss deleted file mode 100644 index 9bd0078..0000000 --- a/src/scss/cdb-components/forms/toogle.scss +++ /dev/null @@ -1,50 +0,0 @@ -// Radio Button styles -// ---------------------------------------------- - -/* SG -# Forms/Toogle - - -``` - -``` -*/ - -@import '../../cdb-variables/sizes'; -@import '../../cdb-variables/colors'; -@import '../../cdb-utilities/mixins'; - -.CDB-Toogle { - @include transition(background, 300ms); - position: relative; - width: $baseSize * 4; - height: $baseSize * 2; - margin: 0 2px; - border-radius: 50px; - background: $cTypo4; -} - -.CDB-Toogle:before { - position: absolute; - top: 2px; - left: 2px; - width: $baseSize + 4; - height: $baseSize + 4; - border-radius: 50%; - background: $cWhite; - box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.48); - content: ''; -} - -.CDB-Toogle:checked { - background: $cMainDark; -} - -.CDB-Toogle:checked:before { - right: 2px; - left: auto; -} From 2231eb58228dbd45cf8797593b17474d5bcb505e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mar=C3=ADa=20Checa?= Date: Fri, 29 Jan 2016 17:38:14 +0100 Subject: [PATCH 06/18] Slider optimized for Firefox --- src/scss/cdb-components/forms/sliders.scss | 105 ++++++++++++++------- src/scss/cdb-components/forms/toggle.scss | 33 ------- 2 files changed, 72 insertions(+), 66 deletions(-) diff --git a/src/scss/cdb-components/forms/sliders.scss b/src/scss/cdb-components/forms/sliders.scss index b3e6804..9006edb 100644 --- a/src/scss/cdb-components/forms/sliders.scss +++ b/src/scss/cdb-components/forms/sliders.scss @@ -13,6 +13,8 @@ @import '../../cdb-variables/colors'; .CDB-Range { + -webkit-appearance: none; + -moz-appearance: none; position: relative; width: 100%; margin: -4px 0 0; @@ -21,13 +23,11 @@ cursor: pointer; overflow: hidden; vertical-align: middle; -} + border: 0; -.CDB-Range::-webkit-slider-thumb { - position: relative; - width: $baseSize / 2; - height: 100%; - border-radius: $baseSize / 2; + &:focus { + outline: 0; + } } .CDB-Range::-webkit-slider-runnable-track { @@ -37,19 +37,63 @@ background: $cMainLine; } -.CDB-Range::-webkit-slider-thumb::before { - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: -3000px; - height: $baseSize / 4; +.CDB-Range::-webkit-slider-thumb { + position: relative; + width: $baseSize / 2; + height: 100%; border-radius: $baseSize / 2; - background: $cBlue; - content: ''; + + &::before { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: -3000px; + height: $baseSize / 4; + border-radius: $baseSize / 2; + background: $cBlue; + content: ''; + } + + &::after { + position: absolute; + top: -6px; + right: -6px; + left: -6px; + width: $baseSize + 4; + height: $baseSize + 4; + border: 1px solid $cBlue; + border-radius: 50%; + background: $cWhite; + content: ''; + z-index: 1; + } + + &:focus, + &:hover { + &::after { + cursor: pointer; + } + } + + &:disabled { + &::before, + &::after { + opacity: 0.2; + } + } } -.CDB-Range::-webkit-slider-thumb::after { +.CDB-Range::-moz-range-track { + height: $baseSize / 4; + margin: $baseSize 0; + border-radius: $baseSize / 2; + background: $cMainLine; + border: 0; + outline: none; +} + +.CDB-Range::-moz-range-thumb { position: absolute; top: -6px; right: -6px; @@ -60,22 +104,17 @@ border-radius: 50%; background: $cWhite; content: ''; - z-index: 10; + z-index: 1; } -.CDB-Range:focus { - outline: none; -} - -.CDB-Range:hover::-webkit-slider-thumb::after, -.CDB-Range:focus::-webkit-slider-thumb::after { - cursor: pointer; -} - -.CDB-Range:disabled::-webkit-slider-thumb::before { - opacity: 0.2; -} - -.CDB-Range:disabled::-webkit-slider-thumb::after { - opacity: 0.2; -} +.CDB-Range::-moz-range-progress { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: -3000px; + height: $baseSize / 4; + border-radius: $baseSize / 2; + background: $cBlue; + content: ''; +} \ No newline at end of file diff --git a/src/scss/cdb-components/forms/toggle.scss b/src/scss/cdb-components/forms/toggle.scss index 76a85e4..628d5ba 100644 --- a/src/scss/cdb-components/forms/toggle.scss +++ b/src/scss/cdb-components/forms/toggle.scss @@ -57,36 +57,3 @@ } } } - - - -// .CDB-Toggle { -// @include transition(background, 300ms); -// position: relative; -// width: $baseSize * 4; -// height: $baseSize * 2; -// margin: 0 2px; -// border-radius: 50px; -// background: $cTypo4; -// } - -// .CDB-Toggle:before { -// position: absolute; -// top: 2px; -// left: 2px; -// width: $baseSize + 4; -// height: $baseSize + 4; -// border-radius: 50%; -// background: $cWhite; -// box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.48); -// content: ''; -// } - -// .CDB-Toggle:checked { -// background: $cMainDark; -// } - -// .CDB-Toggle:checked:before { -// right: 2px; -// left: auto; -// } From 4bc37a4f4cf2204de4ae68fd5007f20e07e86380 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mar=C3=ADa=20Checa?= Date: Mon, 1 Feb 2016 11:40:03 +0100 Subject: [PATCH 07/18] Reset indentation set to 2 spaces --- src/scss/utilities/reset.scss | 34 +++++++++++++++++----------------- 1 file changed, 17 insertions(+), 17 deletions(-) diff --git a/src/scss/utilities/reset.scss b/src/scss/utilities/reset.scss index 7115f42..1c48e86 100644 --- a/src/scss/utilities/reset.scss +++ b/src/scss/utilities/reset.scss @@ -18,35 +18,35 @@ article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { - margin: 0; - padding: 0; - border: 0; - font-size: 100%; - font: inherit; - vertical-align: baseline; + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { - display: block; + display: block; } body { - line-height: 1; + line-height: 1; } ol, ul { - list-style: none; + list-style: none; } blockquote, q { - quotes: none; + quotes: none; } blockquote:before, blockquote:after, q:before, q:after { - content: ''; - content: none; + content: ''; + content: none; } table { - border-collapse: collapse; - border-spacing: 0; + border-collapse: collapse; + border-spacing: 0; } // Resetting buttons too button { @@ -54,11 +54,11 @@ button { padding: 0; border: none; background: transparent; - box-sizing: border-box; - outline: none; + box-sizing: border-box; + outline: none; } dd, dt { - display: inline-block; + display: inline-block; } a { From 4eaa5d0d24fe2321289a09822649814c7b1e5b5d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mar=C3=ADa=20Checa?= Date: Mon, 1 Feb 2016 11:40:19 +0100 Subject: [PATCH 08/18] Fixed Open Sans rendering for IE10 --- src/scss/cdb-utilities/fonts.scss | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/src/scss/cdb-utilities/fonts.scss b/src/scss/cdb-utilities/fonts.scss index 1019104..d201ace 100644 --- a/src/scss/cdb-utilities/fonts.scss +++ b/src/scss/cdb-utilities/fonts.scss @@ -6,17 +6,20 @@ font-family: 'Open Sans'; font-style: normal; font-weight: 300; - src: local('Open Sans Light'), local('OpenSans-Light'), url('//themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3aCWcynf_cDxXwCLxiixG1c.ttf') format('truetype'); + src: local('Open Sans Light'), local('OpenSans-Light'), url('//themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3aCWcynf_cDxXwCLxiixG1c.ttf') format('truetype'), + url('//themes.googleusercontent.com/static/fonts/opensans/v8/DXI1ORHCpsQm3Vp6mXoaTeY5mlVXtdNkpsMpKkrDXP4.woff') format('woff'); } @font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 400; - src: local('Open Sans'), local('OpenSans'), url('//themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3aCWcynf_cDxXwCLxiixG1c.ttf') format('truetype'); + src: local('Open Sans'), local('OpenSans'), url('//themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3aCWcynf_cDxXwCLxiixG1c.ttf') format('truetype'), + url('//themes.googleusercontent.com/static/fonts/opensans/v8/u-WUoqrET9fUeobQW7jkRbO3LdcAZYWl9Si6vvxL-qU.woff') format('woff'); } @font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 600; - src: local('Open Sans Semibold'), local('OpenSans-Semibold'), url('//themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3aCWcynf_cDxXwCLxiixG1c.ttf') format('truetype'); + src: local('Open Sans Semibold'), local('OpenSans-Semibold'), url('//themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3aCWcynf_cDxXwCLxiixG1c.ttf') format('truetype'), + url('//themes.googleusercontent.com/static/fonts/opensans/v8/MTP_ySUJH_bn48VBG8sNSuY5mlVXtdNkpsMpKkrDXP4.woff') format('woff'); } From c44e4ca7a22220ebcc1beeef4963727e9f49be99 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mar=C3=ADa=20Checa?= Date: Mon, 1 Feb 2016 11:51:10 +0100 Subject: [PATCH 09/18] Input range adapted for IE10 --- src/scss/cdb-components/forms/sliders.scss | 23 ++++++++++++++++++++++ 1 file changed, 23 insertions(+) diff --git a/src/scss/cdb-components/forms/sliders.scss b/src/scss/cdb-components/forms/sliders.scss index 9006edb..3b509ad 100644 --- a/src/scss/cdb-components/forms/sliders.scss +++ b/src/scss/cdb-components/forms/sliders.scss @@ -117,4 +117,27 @@ border-radius: $baseSize / 2; background: $cBlue; content: ''; +} + +.CDB-Range::-ms-track { + height: $baseSize / 4; + margin: $baseSize 0; + border-radius: $baseSize / 2; + background: $cMainLine; + color: transparent; + border: transparent; +} + +.CDB-Range::-ms-thumb { + position: absolute; + top: -6px; + right: -6px; + left: -6px; + width: $baseSize + 4; + height: $baseSize + 4; + border: 1px solid $cBlue; + border-radius: 50%; + background: $cWhite; + content: ''; + z-index: 1; } \ No newline at end of file From 0b3e6b44cc863594fb8f78b8d307df9aaec2c130 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mar=C3=ADa=20Checa?= Date: Mon, 1 Feb 2016 12:13:44 +0100 Subject: [PATCH 10/18] Syntax improvements --- src/scss/cdb-components/forms/checkbox.scss | 4 ++-- src/scss/cdb-components/forms/radio.scss | 6 +++--- src/scss/cdb-components/forms/sliders.scss | 4 ++-- src/scss/cdb-components/forms/toggle.scss | 2 +- src/scss/cdb-utilities/fonts.scss | 6 +++--- src/scss/cdb-utilities/vendor/reset.scss | 3 +-- 6 files changed, 12 insertions(+), 13 deletions(-) diff --git a/src/scss/cdb-components/forms/checkbox.scss b/src/scss/cdb-components/forms/checkbox.scss index 9278f47..9344472 100644 --- a/src/scss/cdb-components/forms/checkbox.scss +++ b/src/scss/cdb-components/forms/checkbox.scss @@ -38,10 +38,10 @@ width: $baseSize * 2; height: $baseSize * 2; border: 1px solid $cMainLine; - background: $cWhite; border-radius: 3px; - box-sizing: border-box; + background: $cWhite; cursor: pointer; + box-sizing: border-box; &::before, &::after { diff --git a/src/scss/cdb-components/forms/radio.scss b/src/scss/cdb-components/forms/radio.scss index 6f9d71e..cdd0fb8 100644 --- a/src/scss/cdb-components/forms/radio.scss +++ b/src/scss/cdb-components/forms/radio.scss @@ -37,10 +37,10 @@ height: $baseSize * 2; border: 1px solid $cMainLine; border-radius: 50%; - box-sizing: border-box; - cursor: pointer; - text-indent: 20px; background: $cWhite; + text-indent: 20px; + cursor: pointer; + box-sizing: border-box; &::before { position: absolute; diff --git a/src/scss/cdb-components/forms/sliders.scss b/src/scss/cdb-components/forms/sliders.scss index 3b509ad..44ef2dc 100644 --- a/src/scss/cdb-components/forms/sliders.scss +++ b/src/scss/cdb-components/forms/sliders.scss @@ -122,10 +122,10 @@ .CDB-Range::-ms-track { height: $baseSize / 4; margin: $baseSize 0; + border: transparent; border-radius: $baseSize / 2; background: $cMainLine; color: transparent; - border: transparent; } .CDB-Range::-ms-thumb { @@ -140,4 +140,4 @@ background: $cWhite; content: ''; z-index: 1; -} \ No newline at end of file +} diff --git a/src/scss/cdb-components/forms/toggle.scss b/src/scss/cdb-components/forms/toggle.scss index 628d5ba..efb884e 100644 --- a/src/scss/cdb-components/forms/toggle.scss +++ b/src/scss/cdb-components/forms/toggle.scss @@ -20,10 +20,10 @@ @import '../../cdb-utilities/mixins'; .CDB-Toggle { + position: absolute; width: $baseSize * 4; height: $baseSize * 2; opacity: 0; - position: absolute; z-index: 1; ~ .CDB-ToggleFace { diff --git a/src/scss/cdb-utilities/fonts.scss b/src/scss/cdb-utilities/fonts.scss index d201ace..7a1081e 100644 --- a/src/scss/cdb-utilities/fonts.scss +++ b/src/scss/cdb-utilities/fonts.scss @@ -6,20 +6,20 @@ font-family: 'Open Sans'; font-style: normal; font-weight: 300; - src: local('Open Sans Light'), local('OpenSans-Light'), url('//themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3aCWcynf_cDxXwCLxiixG1c.ttf') format('truetype'), + src: local('Open Sans Light'), local('OpenSans-Light'), url('themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3aCWcynf_cDxXwCLxiixG1c.ttf') format('truetype'), url('//themes.googleusercontent.com/static/fonts/opensans/v8/DXI1ORHCpsQm3Vp6mXoaTeY5mlVXtdNkpsMpKkrDXP4.woff') format('woff'); } @font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 400; - src: local('Open Sans'), local('OpenSans'), url('//themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3aCWcynf_cDxXwCLxiixG1c.ttf') format('truetype'), + src: local('Open Sans'), local('OpenSans'), url('themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3aCWcynf_cDxXwCLxiixG1c.ttf') format('truetype'), url('//themes.googleusercontent.com/static/fonts/opensans/v8/u-WUoqrET9fUeobQW7jkRbO3LdcAZYWl9Si6vvxL-qU.woff') format('woff'); } @font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 600; - src: local('Open Sans Semibold'), local('OpenSans-Semibold'), url('//themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3aCWcynf_cDxXwCLxiixG1c.ttf') format('truetype'), + src: local('Open Sans Semibold'), local('OpenSans-Semibold'), url('themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3aCWcynf_cDxXwCLxiixG1c.ttf') format('truetype'), url('//themes.googleusercontent.com/static/fonts/opensans/v8/MTP_ySUJH_bn48VBG8sNSuY5mlVXtdNkpsMpKkrDXP4.woff') format('woff'); } diff --git a/src/scss/cdb-utilities/vendor/reset.scss b/src/scss/cdb-utilities/vendor/reset.scss index 51ee936..06fe9d1 100644 --- a/src/scss/cdb-utilities/vendor/reset.scss +++ b/src/scss/cdb-utilities/vendor/reset.scss @@ -19,8 +19,8 @@ time, mark, audio, video { margin: 0; padding: 0; border: 0; - font-size: 100%; font: inherit; + font-size: 100%; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ @@ -40,7 +40,6 @@ blockquote, q { blockquote:before, blockquote:after, q:before, q:after { content: ''; - content: none; } table { border-collapse: collapse; From 3a9a4beb0f4d33af7fadf2c959d0927643713a53 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mar=C3=ADa=20Checa?= Date: Mon, 1 Feb 2016 12:18:35 +0100 Subject: [PATCH 11/18] Syntax improvements --- src/scss/cdb-components/forms/checkbox.scss | 16 ++++++++-------- src/scss/cdb-components/forms/radio.scss | 12 ++++++------ src/scss/cdb-utilities/fonts.scss | 6 +++--- 3 files changed, 17 insertions(+), 17 deletions(-) diff --git a/src/scss/cdb-components/forms/checkbox.scss b/src/scss/cdb-components/forms/checkbox.scss index 9344472..0ab4e26 100644 --- a/src/scss/cdb-components/forms/checkbox.scss +++ b/src/scss/cdb-components/forms/checkbox.scss @@ -71,11 +71,11 @@ ~ .CDB-CheckboxFace { border: 1px solid $cBlue; background: $cBlue; + } - &::before, - &::after { - background: $cWhite; - } + ~ .CDB-CheckboxFace::before, + ~ .CDB-CheckboxFace::after { + background: $cWhite; } &:hover ~ .CDB-CheckboxFace { @@ -95,11 +95,11 @@ ~ .CDB-CheckboxFace { border: 1px solid $cSecondaryLine; background: $cThirdBackground; + } - &::before, - &::after { - background: $cWhite; - } + ~ .CDB-CheckboxFace::before, + ~ .CDB-CheckboxFace::after { + background: $cWhite; } &:hover ~ .CDB-CheckboxFace { diff --git a/src/scss/cdb-components/forms/radio.scss b/src/scss/cdb-components/forms/radio.scss index cdd0fb8..f989222 100644 --- a/src/scss/cdb-components/forms/radio.scss +++ b/src/scss/cdb-components/forms/radio.scss @@ -60,10 +60,10 @@ ~ .CDB-RadioFace { border: 1px solid $cBlue; background: $cBlue; + } - &::before { - background: $cWhite; - } + ~ .CDB-RadioFace::before { + background: $cWhite; } &:hover ~ .CDB-RadioFace { @@ -83,10 +83,10 @@ ~ .CDB-RadioFace { border: 1px solid $cSecondaryLine; background: $cThirdBackground; + } - &::before { - background: $cWhite; - } + ~ .CDB-RadioFace::before { + background: $cWhite; } &:hover ~ .CDB-RadioFace { diff --git a/src/scss/cdb-utilities/fonts.scss b/src/scss/cdb-utilities/fonts.scss index 7a1081e..7684a09 100644 --- a/src/scss/cdb-utilities/fonts.scss +++ b/src/scss/cdb-utilities/fonts.scss @@ -7,19 +7,19 @@ font-style: normal; font-weight: 300; src: local('Open Sans Light'), local('OpenSans-Light'), url('themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3aCWcynf_cDxXwCLxiixG1c.ttf') format('truetype'), - url('//themes.googleusercontent.com/static/fonts/opensans/v8/DXI1ORHCpsQm3Vp6mXoaTeY5mlVXtdNkpsMpKkrDXP4.woff') format('woff'); + url('themes.googleusercontent.com/static/fonts/opensans/v8/DXI1ORHCpsQm3Vp6mXoaTeY5mlVXtdNkpsMpKkrDXP4.woff') format('woff'); } @font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 400; src: local('Open Sans'), local('OpenSans'), url('themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3aCWcynf_cDxXwCLxiixG1c.ttf') format('truetype'), - url('//themes.googleusercontent.com/static/fonts/opensans/v8/u-WUoqrET9fUeobQW7jkRbO3LdcAZYWl9Si6vvxL-qU.woff') format('woff'); + url('themes.googleusercontent.com/static/fonts/opensans/v8/u-WUoqrET9fUeobQW7jkRbO3LdcAZYWl9Si6vvxL-qU.woff') format('woff'); } @font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 600; src: local('Open Sans Semibold'), local('OpenSans-Semibold'), url('themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3aCWcynf_cDxXwCLxiixG1c.ttf') format('truetype'), - url('//themes.googleusercontent.com/static/fonts/opensans/v8/MTP_ySUJH_bn48VBG8sNSuY5mlVXtdNkpsMpKkrDXP4.woff') format('woff'); + url('themes.googleusercontent.com/static/fonts/opensans/v8/MTP_ySUJH_bn48VBG8sNSuY5mlVXtdNkpsMpKkrDXP4.woff') format('woff'); } From d00064ceac841e792cccfcd08eb39eaf0f4a58e1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mar=C3=ADa=20Checa?= Date: Mon, 1 Feb 2016 18:33:16 +0100 Subject: [PATCH 12/18] Input label fixes --- src/scss/cdb-components/forms/checkbox.scss | 4 +--- src/scss/cdb-components/forms/legends.scss | 16 ++++++++++------ src/scss/cdb-components/forms/radio.scss | 1 + 3 files changed, 12 insertions(+), 9 deletions(-) diff --git a/src/scss/cdb-components/forms/checkbox.scss b/src/scss/cdb-components/forms/checkbox.scss index 0ab4e26..10d285b 100644 --- a/src/scss/cdb-components/forms/checkbox.scss +++ b/src/scss/cdb-components/forms/checkbox.scss @@ -8,17 +8,14 @@
-
-
-
``` */ @@ -31,6 +28,7 @@ height: $baseSize * 2; opacity: 0; position: absolute; + vertical-align: middle; z-index: 1; ~ .CDB-CheckboxFace { diff --git a/src/scss/cdb-components/forms/legends.scss b/src/scss/cdb-components/forms/legends.scss index f90372b..078dbb5 100644 --- a/src/scss/cdb-components/forms/legends.scss +++ b/src/scss/cdb-components/forms/legends.scss @@ -8,12 +8,12 @@
- +
- +

@@ -23,12 +23,12 @@
- +

@@ -42,14 +42,14 @@
- +
    • @@ -69,3 +69,7 @@ .CDB-Legend { width: $baseSize * 12; } + +.CDB-Label { + vertical-align: middle; +} diff --git a/src/scss/cdb-components/forms/radio.scss b/src/scss/cdb-components/forms/radio.scss index f989222..5473b53 100644 --- a/src/scss/cdb-components/forms/radio.scss +++ b/src/scss/cdb-components/forms/radio.scss @@ -29,6 +29,7 @@ height: $baseSize * 2; opacity: 0; position: absolute; + vertical-align: middle; z-index: 1; ~ .CDB-RadioFace { From 86cc3412b8176e53e35918743326da38fd203a54 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mar=C3=ADa=20Checa?= Date: Mon, 1 Feb 2016 18:38:02 +0100 Subject: [PATCH 13/18] Minor fix --- src/scss/cdb-components/forms/legends.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/scss/cdb-components/forms/legends.scss b/src/scss/cdb-components/forms/legends.scss index 078dbb5..21fcc72 100644 --- a/src/scss/cdb-components/forms/legends.scss +++ b/src/scss/cdb-components/forms/legends.scss @@ -71,5 +71,5 @@ } .CDB-Label { - vertical-align: middle; + vertical-align: middle; } From fe2439a98b0d7dc4259af873a91c0c9d24e86973 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mar=C3=ADa=20Checa?= Date: Mon, 1 Feb 2016 19:14:02 +0100 Subject: [PATCH 14/18] Minor fix --- src/scss/cdb-components/forms/legends.scss | 20 ++++++++------------ 1 file changed, 8 insertions(+), 12 deletions(-) diff --git a/src/scss/cdb-components/forms/legends.scss b/src/scss/cdb-components/forms/legends.scss index 21fcc72..77075d8 100644 --- a/src/scss/cdb-components/forms/legends.scss +++ b/src/scss/cdb-components/forms/legends.scss @@ -8,12 +8,12 @@
    - +
    - +

    @@ -23,12 +23,12 @@
    - +

    @@ -42,20 +42,20 @@
    - +
  • + +
    • -

    RADIO

    +

    RADIO

    @@ -69,7 +69,3 @@ .CDB-Legend { width: $baseSize * 12; } - -.CDB-Label { - vertical-align: middle; -} From 83984f6bcaa4a67e21ec339388fa2c201ec8f0ed Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mar=C3=ADa=20Checa?= Date: Tue, 2 Feb 2016 12:11:08 +0100 Subject: [PATCH 15/18] Checkboxes and radios improvements --- src/scss/cdb-components/forms/checkbox.scss | 133 ++++++++++---------- src/scss/cdb-components/forms/legends.scss | 12 +- src/scss/cdb-components/forms/radio.scss | 119 +++++++++--------- 3 files changed, 125 insertions(+), 139 deletions(-) diff --git a/src/scss/cdb-components/forms/checkbox.scss b/src/scss/cdb-components/forms/checkbox.scss index 10d285b..9354059 100644 --- a/src/scss/cdb-components/forms/checkbox.scss +++ b/src/scss/cdb-components/forms/checkbox.scss @@ -7,15 +7,15 @@ ```
    - +
    - +
    - +
    ``` */ @@ -30,78 +30,71 @@ position: absolute; vertical-align: middle; z-index: 1; +} - ~ .CDB-CheckboxFace { - position: relative; - width: $baseSize * 2; - height: $baseSize * 2; - border: 1px solid $cMainLine; - border-radius: 3px; - background: $cWhite; - cursor: pointer; - box-sizing: border-box; +.CDB-Checkbox-face { + position: relative; + width: $baseSize * 2; + height: $baseSize * 2; + border: 1px solid $cMainLine; + border-radius: 3px; + background: $cWhite; + cursor: pointer; + box-sizing: border-box; - &::before, - &::after { - display: block; - position: absolute; - bottom: 3px; - width: 2px; - border-radius: 1px; - background: $cSecondaryLine; - content: ''; - } - - &::before { - right: $baseSize / 2; - height: $baseSize; - transform: rotate(45deg); - } - - &::after { - left: $baseSize / 2; - height: $baseSize - 2; - transform: rotate(-45deg); - } + &::before, + &::after { + display: block; + position: absolute; + bottom: 3px; + width: 2px; + border-radius: 1px; + background: $cSecondaryLine; + content: ''; } - &:checked { - ~ .CDB-CheckboxFace { - border: 1px solid $cBlue; - background: $cBlue; - } - - ~ .CDB-CheckboxFace::before, - ~ .CDB-CheckboxFace::after { - background: $cWhite; - } - - &:hover ~ .CDB-CheckboxFace { - border: 1px solid $cBlue; - } + &::before { + right: $baseSize / 2; + height: $baseSize; + transform: rotate(45deg); } - &:focus ~ .CDB-CheckboxFace { - border: 1px solid $cBlue; - } - - &:hover ~ .CDB-CheckboxFace { - border: 1px solid $cHoverLine; - } - - &:disabled { - ~ .CDB-CheckboxFace { - border: 1px solid $cSecondaryLine; - background: $cThirdBackground; - } - - ~ .CDB-CheckboxFace::before, - ~ .CDB-CheckboxFace::after { - background: $cWhite; - } - - &:hover ~ .CDB-CheckboxFace { - border: 1px solid $cSecondaryLine; - } + &::after { + left: $baseSize / 2; + height: $baseSize - 2; + transform: rotate(-45deg); } } + +.CDB-Checkbox:checked + .CDB-Checkbox-face { + border: 1px solid $cBlue; + background: $cBlue; + + &::before, + &::after { + background: $cWhite; + } +} + +.CDB-Checkbox:disabled + .CDB-Checkbox-face { + border: 1px solid $cSecondaryLine; + background: $cThirdBackground; + + &::before, + &::after { + background: $cWhite; + } +} + +.CDB-Checkbox:disabled:hover ~ .CDB-Checkbox-face { + border: 1px solid $cSecondaryLine; +} + +.CDB-Checkbox:checked:hover + .CDB-Checkbox-face, +.CDB-Checkbox:focus + .CDB-Checkbox-face { + border: 1px solid $cBlue; +} + +.CDB-Checkbox:hover + .CDB-Checkbox-face { + border: 1px solid $cHoverLine; +} \ No newline at end of file diff --git a/src/scss/cdb-components/forms/legends.scss b/src/scss/cdb-components/forms/legends.scss index 77075d8..d9c7317 100644 --- a/src/scss/cdb-components/forms/legends.scss +++ b/src/scss/cdb-components/forms/legends.scss @@ -7,12 +7,12 @@ ```
    - +
    - +
    @@ -22,12 +22,12 @@
    - +
    @@ -41,14 +41,14 @@
  • - +
    • diff --git a/src/scss/cdb-components/forms/radio.scss b/src/scss/cdb-components/forms/radio.scss index 5473b53..1f369f4 100644 --- a/src/scss/cdb-components/forms/radio.scss +++ b/src/scss/cdb-components/forms/radio.scss @@ -8,15 +8,15 @@ ```
    - +
    - +
    - +
    ``` */ @@ -31,67 +31,60 @@ position: absolute; vertical-align: middle; z-index: 1; +} - ~ .CDB-RadioFace { - position: relative; - width: $baseSize * 2; - height: $baseSize * 2; - border: 1px solid $cMainLine; +.CDB-Radio-face { + position: relative; + width: $baseSize * 2; + height: $baseSize * 2; + border: 1px solid $cMainLine; + border-radius: 50%; + background: $cWhite; + text-indent: 20px; + cursor: pointer; + box-sizing: border-box; + + &::before { + position: absolute; + top: 50%; + left: 50%; + width: $baseSize - 2; + height: $baseSize - 2; + margin-top: -3px; + margin-left: -3px; border-radius: 50%; - background: $cWhite; - text-indent: 20px; - cursor: pointer; - box-sizing: border-box; - - &::before { - position: absolute; - top: 50%; - left: 50%; - width: $baseSize - 2; - height: $baseSize - 2; - margin-top: -3px; - margin-left: -3px; - border-radius: 50%; - background: $cSecondaryLine; - content: ''; - } - } - - &:checked { - ~ .CDB-RadioFace { - border: 1px solid $cBlue; - background: $cBlue; - } - - ~ .CDB-RadioFace::before { - background: $cWhite; - } - - &:hover ~ .CDB-RadioFace { - border: 1px solid $cBlue; - } - } - - &:focus ~ .CDB-RadioFace { - border: 1px solid $cBlue; - } - - &:hover ~ .CDB-RadioFace { - border: 1px solid $cHoverLine; - } - - &:disabled { - ~ .CDB-RadioFace { - border: 1px solid $cSecondaryLine; - background: $cThirdBackground; - } - - ~ .CDB-RadioFace::before { - background: $cWhite; - } - - &:hover ~ .CDB-RadioFace { - border: 1px solid $cSecondaryLine; - } + background: $cSecondaryLine; + content: ''; } } + +.CDB-Radio:checked + .CDB-Radio-face { + border: 1px solid $cBlue; + background: $cBlue; + + &::before { + background: $cWhite; + } +} + +.CDB-Radio:disabled + .CDB-Radio-face { + border: 1px solid $cSecondaryLine; + background: $cThirdBackground; + + &::before { + background: $cWhite; + } +} + +.CDB-Radio:disabled:hover + .CDB-Radio-face { + border: 1px solid $cSecondaryLine; +} + +.CDB-Radio:hover + .CDB-Radio-face { + border: 1px solid $cHoverLine; +} + +.CDB-Radio:focus + .CDB-Radio-face, +.CDB-Radio:checked:hover + .CDB-Radio-face { + border: 1px solid $cBlue; +} \ No newline at end of file From 3dda1f6c639ad4825778ff7e8bf822b703740f2e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mar=C3=ADa=20Checa?= Date: Tue, 2 Feb 2016 12:23:00 +0100 Subject: [PATCH 16/18] Syntax fixes --- src/scss/cdb-components/forms/checkbox.scss | 4 ++-- src/scss/cdb-components/forms/radio.scss | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/scss/cdb-components/forms/checkbox.scss b/src/scss/cdb-components/forms/checkbox.scss index 9354059..3e36b24 100644 --- a/src/scss/cdb-components/forms/checkbox.scss +++ b/src/scss/cdb-components/forms/checkbox.scss @@ -24,10 +24,10 @@ @import '../../cdb-variables/colors'; .CDB-Checkbox { + position: absolute; width: $baseSize * 2; height: $baseSize * 2; opacity: 0; - position: absolute; vertical-align: middle; z-index: 1; } @@ -97,4 +97,4 @@ .CDB-Checkbox:hover + .CDB-Checkbox-face { border: 1px solid $cHoverLine; -} \ No newline at end of file +} diff --git a/src/scss/cdb-components/forms/radio.scss b/src/scss/cdb-components/forms/radio.scss index 1f369f4..0c04d3d 100644 --- a/src/scss/cdb-components/forms/radio.scss +++ b/src/scss/cdb-components/forms/radio.scss @@ -25,10 +25,10 @@ @import '../../cdb-variables/colors'; .CDB-Radio { + position: absolute; width: $baseSize * 2; height: $baseSize * 2; opacity: 0; - position: absolute; vertical-align: middle; z-index: 1; } @@ -87,4 +87,4 @@ .CDB-Radio:focus + .CDB-Radio-face, .CDB-Radio:checked:hover + .CDB-Radio-face { border: 1px solid $cBlue; -} \ No newline at end of file +} From ab2ad9bb1e9f67b3a8f2deed6683759abf8e80e6 Mon Sep 17 00:00:00 2001 From: piensaenpixel Date: Wed, 3 Feb 2016 11:10:13 +0100 Subject: [PATCH 17/18] minor fixes --- src/fonts/cartoIcon.eot | Bin 18856 -> 18856 bytes src/fonts/cartoIcon.ttf | Bin 18684 -> 18684 bytes src/fonts/cartoIcon.woff | Bin 11836 -> 11836 bytes src/scss/cdb-components/forms/checkbox.scss | 2 +- src/scss/cdb-components/forms/inputs.scss | 4 ++-- src/scss/cdb-components/forms/sliders.scss | 6 +++--- src/scss/cdb-components/forms/toggle.scss | 4 ++-- 7 files changed, 8 insertions(+), 8 deletions(-) diff --git a/src/fonts/cartoIcon.eot b/src/fonts/cartoIcon.eot index d9aff25db436abd65a4564b57cf68ec2a86c9fc6..c7d6b4a11f750b2a2824b4ca44489bd5d075ab1e 100644 GIT binary patch delta 55 zcmZ26nQ_Hr#tAmex5ZK?+OK1tYrSjYhpE!3Vz=Y@ZN4&aGyY-#f=kzHGhp=Q1&kaX E09+pwod5s; delta 55 zcmZ26nQ_Hr#tAme?Mpi*+OK2oE=igAVXAb;()M_Mo39MqjK3Iw;L^F7dtvnE1&kaX E0C|NK`Tzg` diff --git a/src/fonts/cartoIcon.ttf b/src/fonts/cartoIcon.ttf index f61778a2a48bf4cc6baa0b97b9c434d2d5d69e3f..b7b41f0cd23b092958f3e67a511aca2e4a9024fd 100644 GIT binary patch delta 47 wcmew}k@3$&#tDwhbFFtxbeSrhDt0@b-{va=H{&k`Ah>kBHUma){KDY@0KgLx6aWAK delta 47 wcmew}k@3$&#tDwh-6bg#U8YKRENzeHxB1Gz&G?G}2riwQxfe!n{KDY@0L*I>6951J diff --git a/src/fonts/cartoIcon.woff b/src/fonts/cartoIcon.woff index f8f872e7914b30d6824210f790094499f77353bc..05a413ed14cd228c96264cc8c759bf83d0c4ed3e 100644 GIT binary patch delta 61 zcmV-D0K)&gT)bS6c>|q0y0Lt=CMn6k%;WiOzA|t#{sM|HT)JMH0i)lP|NqVv!T1Nr T{}dWU+j Date: Thu, 4 Feb 2016 11:34:54 +0100 Subject: [PATCH 18/18] Slider border issue in Chrome fix --- src/scss/cdb-components/forms/sliders.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/scss/cdb-components/forms/sliders.scss b/src/scss/cdb-components/forms/sliders.scss index 44ef2dc..a647cf3 100644 --- a/src/scss/cdb-components/forms/sliders.scss +++ b/src/scss/cdb-components/forms/sliders.scss @@ -18,7 +18,7 @@ position: relative; width: 100%; margin: -4px 0 0; - padding: 0; + padding: 0 6px; background: transparent; cursor: pointer; overflow: hidden;