diff --git a/src/fonts/cartoIcon.eot b/src/fonts/cartoIcon.eot index d9aff25..0b83194 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 f61778a..4caa8b4 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 f8f872e..c802060 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 77f6653..4395c8b 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 @@ -71,4 +201,4 @@ .CDB-InfoBox-footerItem--right { text-align: right; -} +} \ No newline at end of file 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..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; } } -