diff --git a/src/scss/cdb-components/boxes.scss b/src/scss/cdb-components/boxes.scss index 77f6653..948afe5 100644 --- a/src/scss/cdb-components/boxes.scss +++ b/src/scss/cdb-components/boxes.scss @@ -2,7 +2,7 @@ // ---------------------------------------------- /* SG -# Boxes/Box Dropdown +# Boxes/Dropdown ``` @@ -21,6 +21,136 @@ box-shadow: 0 $baseSize $baseSize * 2 0 rgba(0, 0, 0, 0.16); } + +/* SG +# Boxes/Loader +``` +
+ +
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+ +
+``` +*/ + +.CDB-BoxLoader { + padding: 0 $baseSize * 3; + border-top: 1px solid $cMainLine; +} + + +.CDB-BoxLoader-inner { + padding: $baseSize + 4 0; + border-top: 1px solid $cMainLine; + &:first-child { + border-top: 0; + } +} + +.CDB-BoxLoader-item { + @include display-flex(); + padding: $baseSize 0; + color: $cTypo2; + &.is-working { + color: $cTypo3; + } +} + +.CDB-BoxLoader-info { + @include flex(1); + padding-right: $baseSize * 2; +} + /* SG # Boxes/Info Boxes diff --git a/src/scss/cdb-components/forms/checkbox.scss b/src/scss/cdb-components/forms/checkbox.scss index f8b7f06..cd07cac 100644 --- a/src/scss/cdb-components/forms/checkbox.scss +++ b/src/scss/cdb-components/forms/checkbox.scss @@ -5,9 +5,18 @@ # Forms/Checkbox ``` - - - +
+ + +
+
+ + +
+
+ + +
``` */ @@ -15,11 +24,23 @@ @import '../../cdb-variables/colors'; .CDB-Checkbox { + position: absolute; + width: $baseSize * 2; + height: $baseSize * 2; + opacity: 0; + vertical-align: middle; + z-index: 1; +} + +.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 { @@ -43,40 +64,37 @@ height: $baseSize - 2; transform: rotate(-45deg); } +} - &:checked { - border: 1px solid $cBlue; - background: $cBlue; +.CDB-Checkbox:checked + .CDB-Checkbox-face { + border: 1px solid $cBlue; + background: $cBlue; - &:hover { - border: 1px solid $cBlue; - } - - &::before, - &::after { - background: $cWhite; - } - } - - &:focus { - border: 1px solid $cBlue; - } - - &:hover { - border: 1px solid $cHoverLine; - } - - &:disabled { - border: 1px solid $cSecondaryLine; - background: $cThirdBackground; - - &:hover { - border: 1px solid $cSecondaryLine; - } - - &::before, - &::after { - background: $cWhite; - } + &::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; +} diff --git a/src/scss/cdb-components/forms/inputs.scss b/src/scss/cdb-components/forms/inputs.scss index 9c4f75a..4c5b843 100644 --- a/src/scss/cdb-components/forms/inputs.scss +++ b/src/scss/cdb-components/forms/inputs.scss @@ -18,7 +18,7 @@ width: 100%; padding: 7px 8px 6px; border: 1px solid $cMainLine; - border-radius: 3px; + border-radius: $baseSize / 2; font-size: $sFontSize-medium; line-height: $sLineHeight-medium; diff --git a/src/scss/cdb-components/forms/legends.scss b/src/scss/cdb-components/forms/legends.scss index 2b918e4..d9c7317 100644 --- a/src/scss/cdb-components/forms/legends.scss +++ b/src/scss/cdb-components/forms/legends.scss @@ -5,26 +5,30 @@ # Forms/Labels ``` - - +
+ + + +
+
+ + + +



- +
+ + + +

@@ -35,21 +39,23 @@

RADIO

-

RADIO

+

RADIO

diff --git a/src/scss/cdb-components/forms/radio.scss b/src/scss/cdb-components/forms/radio.scss index 2076860..0c04d3d 100644 --- a/src/scss/cdb-components/forms/radio.scss +++ b/src/scss/cdb-components/forms/radio.scss @@ -1,14 +1,23 @@ -// Radio Button styles + +// Radios styles // ---------------------------------------------- /* SG # Forms/Radio - ``` - - - +
+ + +
+
+ + +
+
+ + +
``` */ @@ -16,14 +25,26 @@ @import '../../cdb-variables/colors'; .CDB-Radio { + position: absolute; + width: $baseSize * 2; + height: $baseSize * 2; + opacity: 0; + vertical-align: middle; + z-index: 1; +} + +.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 { - display: block; position: absolute; top: 50%; left: 50%; @@ -35,38 +56,35 @@ background: $cSecondaryLine; content: ''; } +} - &:checked { - border: 1px solid $cBlue; - background: $cBlue; +.CDB-Radio:checked + .CDB-Radio-face { + border: 1px solid $cBlue; + background: $cBlue; - &:hover { - border: 1px solid $cBlue; - } - - &::before { - background: $cWhite; - } - } - - &:focus { - border: 1px solid $cBlue; - } - - &:hover { - border: 1px solid $cHoverLine; - } - - &:disabled { - border: 1px solid $cSecondaryLine; - background: $cThirdBackground; - - &:hover { - border: 1px solid $cSecondaryLine; - } - - &::before { - background: $cWhite; - } + &::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; +} diff --git a/src/scss/cdb-components/forms/sliders.scss b/src/scss/cdb-components/forms/sliders.scss index b3e6804..9b76b2b 100644 --- a/src/scss/cdb-components/forms/sliders.scss +++ b/src/scss/cdb-components/forms/sliders.scss @@ -13,21 +13,21 @@ @import '../../cdb-variables/colors'; .CDB-Range { + -webkit-appearance: none; + -moz-appearance: none; position: relative; width: 100%; margin: -4px 0 0; - padding: 0; + padding: 0 6px; + border: 0; background: transparent; cursor: pointer; overflow: hidden; vertical-align: middle; -} -.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,7 +37,77 @@ background: $cMainLine; } -.CDB-Range::-webkit-slider-thumb::before { +.CDB-Range::-webkit-slider-thumb { + position: relative; + width: $baseSize / 2; + height: 100%; + border-radius: $baseSize / 2; + + &::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::-moz-range-track { + height: $baseSize / 4; + margin: $baseSize 0; + border: 0; + border-radius: $baseSize / 2; + outline: none; + background: $cMainLine; +} + +.CDB-Range::-moz-range-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; +} + +.CDB-Range::-moz-range-progress { position: absolute; top: 0; right: 0; @@ -49,7 +119,16 @@ content: ''; } -.CDB-Range::-webkit-slider-thumb::after { +.CDB-Range::-ms-track { + height: $baseSize / 4; + margin: $baseSize 0; + border: transparent; + border-radius: $baseSize / 2; + background: $cMainLine; + color: transparent; +} + +.CDB-Range::-ms-thumb { position: absolute; top: -6px; right: -6px; @@ -60,22 +139,5 @@ border-radius: 50%; background: $cWhite; content: ''; - z-index: 10; -} - -.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; + z-index: 1; } diff --git a/src/scss/cdb-components/forms/toggle.scss b/src/scss/cdb-components/forms/toggle.scss new file mode 100644 index 0000000..e6dd65b --- /dev/null +++ b/src/scss/cdb-components/forms/toggle.scss @@ -0,0 +1,59 @@ +// Radio Button styles +// ---------------------------------------------- + +/* SG +# Forms/Toggle + + +``` +
+ + + + +
+``` +*/ + +@import '../../cdb-variables/sizes'; +@import '../../cdb-variables/colors'; +@import '../../cdb-utilities/mixins'; + +.CDB-Toggle { + position: absolute; + width: $baseSize * 4; + height: $baseSize * 2; + opacity: 0; + 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; + } + } +} 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; -} diff --git a/src/scss/cdb-components/loader.scss b/src/scss/cdb-components/loader.scss index e812aff..07e066b 100644 --- a/src/scss/cdb-components/loader.scss +++ b/src/scss/cdb-components/loader.scss @@ -2,10 +2,9 @@ // ---------------------------------------------- /* SG -# Loader +# Loader/principal This is the generic loader for widgets, maps, components, ... -There is only one state 'is-visible', in order to make it visible. ```
@@ -13,6 +12,8 @@ There is only one state 'is-visible', in order to make it visible. */ @import '../cdb-utilities/mixins'; +@import '../cdb-variables/colors'; +@import '../cdb-variables/sizes'; .CDB-Loader { @include css3-prefix(animation, loader-progress 1000ms linear 1); @@ -39,3 +40,89 @@ There is only one state 'is-visible', in order to make it visible. width: 100%; } } + +/* SG +# Loader/circle + +``` +
+
+
+
+
+ +
+
+
+
+
+``` +*/ + +.CDB-LoaderIcon { + box-sizing: border-box; + position: relative; + width: $baseSize * 2; + height: $baseSize * 2; + border: 2px solid $cMainLine; + border-radius: 50%; + &.is-grey { + border: 2px solid $cTypo2; + } +} + +.CDB-LoaderIcon-item { + @include css3-prefix(animation, loader-icon 1.4s linear infinite); + position: absolute; + top: -2px; + left: -2px; + width: $baseSize * 2; + height: $baseSize * 2; + border-radius: 50%; + background: linear-gradient(to right, $cWhite 10%, rgba($cWhite, 0) 42%); + + &::before, + &::after { + position: absolute; + top: 0; + left: 0; + content: ''; + } + + &::before { + width: 50%; + height: 50%; + border-radius: 100% 0 0; + background: $cMainLine; + } + &::after { + right: 0; + bottom: 0; + width: 75%; + height: 75%; + margin: auto; + border-radius: 50%; + background: $cWhite; + } + &.is-grey { + background: linear-gradient(to right, $cMainDark 10%, rgba($cWhite, 0) 42%); + &::before { + background: $cTypo2; + } + &::after { + background: $cMainDark; + } + } +} + + +@include keyframes(loader-icon) { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } +} + + diff --git a/src/scss/cdb-components/shapes/check-circle.scss b/src/scss/cdb-components/shapes/check-circle.scss index c8bb269..f63cb76 100644 --- a/src/scss/cdb-components/shapes/check-circle.scss +++ b/src/scss/cdb-components/shapes/check-circle.scss @@ -100,25 +100,25 @@ Description &.is-medium { &::before { - top: 6px; + top: 5px; left: 4px; height: 4px; } &::after { - top: 4px; + top: 3px; right: 5px; - height: 7px; + height: 6px; } } &.is-small { &::before { - top: 5px; - left: 3px; + top: 4px; + left: 2px; height: 3px; } &::after { - top: 3px; + top: 2px; right: 3px; height: 5px; } @@ -143,4 +143,14 @@ Description } } +.CDB-Shape-tick.is-green { + &::before { + background: $cHighlight; + } + &::after { + background: $cHighlight; + } +} + + diff --git a/src/scss/cdb-components/shapes/close.scss b/src/scss/cdb-components/shapes/close.scss index cbb8591..40b26f6 100644 --- a/src/scss/cdb-components/shapes/close.scss +++ b/src/scss/cdb-components/shapes/close.scss @@ -137,3 +137,13 @@ Description background: $cWhite; } } + +.CDB-Shape-close.is-red { + &::before { + background: $cError; + } + &::after { + background: $cError; + } +} + diff --git a/src/scss/cdb-components/shapes/error-circle.scss b/src/scss/cdb-components/shapes/error-circle.scss index 5a77161..eebeb92 100644 --- a/src/scss/cdb-components/shapes/error-circle.scss +++ b/src/scss/cdb-components/shapes/error-circle.scss @@ -66,7 +66,7 @@ Description &.is-small { width: 9px; height: 9px; - margin: 2px auto; + margin: 0 auto; } &.is-blue { border: 1px solid $cBlue; @@ -74,4 +74,10 @@ Description &.is-white { border: 1px solid $cWhite; } + &.is-green { + border: 1px solid $cHighlight; + } + &.is-red { + border: 1px solid $cError; + } } diff --git a/src/scss/cdb-components/shapes/threePoints.scss b/src/scss/cdb-components/shapes/threePoints.scss index 36bb47c..a2e2c41 100644 --- a/src/scss/cdb-components/shapes/threePoints.scss +++ b/src/scss/cdb-components/shapes/threePoints.scss @@ -7,29 +7,29 @@ Description

16px

-
+
+
-
+
+
-
+
+

@@ -39,29 +39,29 @@ Description

12px

-
+
+
-
+
+
-
+
+
``` @@ -104,4 +104,3 @@ Description background: $cWhite; } } - diff --git a/src/scss/cdb-utilities/fonts.scss b/src/scss/cdb-utilities/fonts.scss index 1019104..7684a09 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'); } diff --git a/src/scss/cdb-utilities/vendor/reset.scss b/src/scss/cdb-utilities/vendor/reset.scss index 0c9b86d..06fe9d1 100644 --- a/src/scss/cdb-utilities/vendor/reset.scss +++ b/src/scss/cdb-utilities/vendor/reset.scss @@ -16,35 +16,34 @@ 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: inherit; + font-size: 100%; + 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: ''; } table { - border-collapse: collapse; - border-spacing: 0; + border-collapse: collapse; + border-spacing: 0; } // Resetting buttons too button { @@ -52,9 +51,9 @@ 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; }