diff --git a/src/fonts/cartoIcon.eot b/src/fonts/cartoIcon.eot index 3c65c52..da2d662 100644 Binary files a/src/fonts/cartoIcon.eot and b/src/fonts/cartoIcon.eot differ diff --git a/src/fonts/cartoIcon.ttf b/src/fonts/cartoIcon.ttf index a9e0f79..7af33b8 100644 Binary files a/src/fonts/cartoIcon.ttf and b/src/fonts/cartoIcon.ttf differ diff --git a/src/fonts/cartoIcon.woff b/src/fonts/cartoIcon.woff index 97c1008..7510e2e 100644 Binary files a/src/fonts/cartoIcon.woff and b/src/fonts/cartoIcon.woff differ diff --git a/src/scss/cdb-components/boxes.scss b/src/scss/cdb-components/boxes.scss index 3c104b4..9c2a789 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 ``` @@ -10,6 +10,7 @@ ``` */ +@import '../cdb-utilities/mixins'; @import '../cdb-variables/sizes'; @import '../cdb-variables/colors'; @@ -19,3 +20,135 @@ background: $cWhite; box-shadow: 0 $baseSize $baseSize * 2 0 rgba(0, 0, 0, 0.16); } + + +/* SG +# Boxes/Loader + +``` +
+ +
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+ +
+``` +*/ + +.CDB-BoxLoader { + padding: 0 24px; + border-top: 1px solid $cMainLine; +} + + +.CDB-BoxLoader-inner { + padding: 12px 0; + border-top: 1px solid $cMainLine; + &:first-child { + border-top: 0; + } +} + +.CDB-BoxLoader-item { + @include display-flex(); + padding: 8px 0; + color: $cTypo2; + &.is-working { + color: $cTypo3; + } +} + +.CDB-BoxLoader-info { + @include flex(1); + padding-right: 16px; +} + diff --git a/src/scss/cdb-components/loader.scss b/src/scss/cdb-components/loader.scss index e812aff..76ce89b 100644 --- a/src/scss/cdb-components/loader.scss +++ b/src/scss/cdb-components/loader.scss @@ -2,7 +2,7 @@ // ---------------------------------------------- /* 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 +13,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 +41,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 #D8D8D8; + border-radius: 50%; + &.is-white { + border: 2px solid #636D72; + } +} + +.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, #FFF 10%, rgba(255, 255, 255, 0) 42%); + + &::before, + &::after { + position: absolute; + top: 0; + left: 0; + content: ''; + } + + &::before { + width: 50%; + height: 50%; + border-radius: 100% 0 0; + background: #D8D8D8; + } + &::after { + right: 0; + bottom: 0; + width: 75%; + height: 75%; + margin: auto; + border-radius: 50%; + background: #FFF; + } + &.is-white { + background: linear-gradient(to right, #2E3C43 10%, rgba(255, 255, 255, 0) 42%); + &::before { + background: #636D72; + } + &::after { + background: #2E3C43; + } + } +} + + +@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..60af946 100644 --- a/src/scss/cdb-components/shapes/error-circle.scss +++ b/src/scss/cdb-components/shapes/error-circle.scss @@ -66,12 +66,18 @@ Description &.is-small { width: 9px; height: 9px; - margin: 2px auto; + margin: 0 auto; } &.is-blue { border: 1px solid $cBlue; } &.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..6bb14b9 100644 --- a/src/scss/cdb-components/shapes/threePoints.scss +++ b/src/scss/cdb-components/shapes/threePoints.scss @@ -104,4 +104,3 @@ Description background: $cWhite; } } -