From e4f5c098e0fce4ab6fdead1dbf38e9bd817bf858 Mon Sep 17 00:00:00 2001 From: piensaenpixel Date: Wed, 3 Feb 2016 16:52:31 +0100 Subject: [PATCH 1/3] add loader and loader box --- 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/boxes.scss | 135 +++++++++++++++++- src/scss/cdb-components/loader.scss | 90 +++++++++++- .../cdb-components/shapes/check-circle.scss | 22 ++- src/scss/cdb-components/shapes/close.scss | 10 ++ .../cdb-components/shapes/error-circle.scss | 8 +- .../cdb-components/shapes/threePoints.scss | 1 - 9 files changed, 256 insertions(+), 10 deletions(-) diff --git a/src/fonts/cartoIcon.eot b/src/fonts/cartoIcon.eot index 3c65c524eaf9ec1fa964a007d428f4db8c59f06b..da2d66213c5133dbcf150a189e24b670d97a43ae 100644 GIT binary patch delta 55 zcmZ26nQ_Hr#tAme+$&Nh+OK1tTdXwk!&K>%72NUsHeVUI8GkVV!KLdnWnlE?1&kaX E0604nUjP6A delta 55 zcmZ26nQ_Hr#tAme`)A}%v|qE~%fZ)>AnD;Px;};GO0PwC95&!@I diff --git a/src/fonts/cartoIcon.woff b/src/fonts/cartoIcon.woff index 97c100843805d69e85d6ac43b917bf1766ed9317..7510e2e85c78d27a2d9245ce9856d3a61b0c7ab6 100644 GIT binary patch delta 61 zcmV-D0K)&gT)bS6c>|quBC&k7CMn6?>GAwFUm3U=e*r}pE?u7~1Eb%R|NqVv!T1Nr T|dG$gzC3CMh{J(((K@Um3U=e*r}pE?tdz52N3d|NqVv!T1Nr TVt 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 + +``` +
+
    +
  • +
    +
    +
    +
    +
    +
    +

    Query applied. Showing 2,561 rows, Query applied. Showing 2,561 rows, Query applied. Showing 2,561 rows Query applied. Showing 2,561 rowsQuery applied. Showing 2,561 rows Query applied. Showing 2,561 rows

    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    • +
+
+
+
+
+
+
+
+
    +
  • +
    +
    +
    +
    +
    +
    +

    Finished importing populated_places_2

    +
    +
    • +
  • +
    +
    +
    +
    +

    Geocoding populated_places_2 (28%)

    +
    +
    +
    +
    +
    +
    +
    • +
+ +
+
+
+
+
+
+
+
    +
  • +
    +
    +
    +
    +
    +
    +

    Error in query. Data might be outdated

    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    • +
+
+``` +*/ + +.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; } } - From cd027cebd201d6de3494e83bedde0737164ed180 Mon Sep 17 00:00:00 2001 From: piensaenpixel Date: Wed, 3 Feb 2016 16:59:08 +0100 Subject: [PATCH 2/3] fix vars --- src/scss/cdb-components/boxes.scss | 8 ++++---- src/scss/cdb-components/loader.scss | 24 ++++++++++++------------ 2 files changed, 16 insertions(+), 16 deletions(-) diff --git a/src/scss/cdb-components/boxes.scss b/src/scss/cdb-components/boxes.scss index 9c2a789..bde0f04 100644 --- a/src/scss/cdb-components/boxes.scss +++ b/src/scss/cdb-components/boxes.scss @@ -125,13 +125,13 @@ */ .CDB-BoxLoader { - padding: 0 24px; + padding: 0 $baseSize * 3; border-top: 1px solid $cMainLine; } .CDB-BoxLoader-inner { - padding: 12px 0; + padding: $baseSize + 4 0; border-top: 1px solid $cMainLine; &:first-child { border-top: 0; @@ -140,7 +140,7 @@ .CDB-BoxLoader-item { @include display-flex(); - padding: 8px 0; + padding: $baseSize 0; color: $cTypo2; &.is-working { color: $cTypo3; @@ -149,6 +149,6 @@ .CDB-BoxLoader-info { @include flex(1); - padding-right: 16px; + padding-right: $baseSize * 2; } diff --git a/src/scss/cdb-components/loader.scss b/src/scss/cdb-components/loader.scss index 76ce89b..42be505 100644 --- a/src/scss/cdb-components/loader.scss +++ b/src/scss/cdb-components/loader.scss @@ -53,8 +53,8 @@ There is only one state 'is-visible', in order to make it visible.
-
-
+
+
``` @@ -65,10 +65,10 @@ There is only one state 'is-visible', in order to make it visible. position: relative; width: $baseSize * 2; height: $baseSize * 2; - border: 2px solid #D8D8D8; + border: 2px solid $cMainLine; border-radius: 50%; - &.is-white { - border: 2px solid #636D72; + &.is-grey { + border: 2px solid $cTypo2; } } @@ -80,7 +80,7 @@ There is only one state 'is-visible', in order to make it visible. width: $baseSize * 2; height: $baseSize * 2; border-radius: 50%; - background: linear-gradient(to right, #FFF 10%, rgba(255, 255, 255, 0) 42%); + background: linear-gradient(to right, $cWhite 10%, rgba($cWhite, 0) 42%); &::before, &::after { @@ -94,7 +94,7 @@ There is only one state 'is-visible', in order to make it visible. width: 50%; height: 50%; border-radius: 100% 0 0; - background: #D8D8D8; + background: $cMainLine; } &::after { right: 0; @@ -103,15 +103,15 @@ There is only one state 'is-visible', in order to make it visible. height: 75%; margin: auto; border-radius: 50%; - background: #FFF; + background: $cWhite; } - &.is-white { - background: linear-gradient(to right, #2E3C43 10%, rgba(255, 255, 255, 0) 42%); + &.is-grey { + background: linear-gradient(to right, $cMainDark 10%, rgba($cWhite, 0) 42%); &::before { - background: #636D72; + background: $cTypo2; } &::after { - background: #2E3C43; + background: $cMainDark; } } } From caaa6bf3453ab4d57f1ace559278d5f00c2b347b Mon Sep 17 00:00:00 2001 From: piensaenpixel Date: Wed, 3 Feb 2016 17:07:20 +0100 Subject: [PATCH 3/3] fix hound --- src/scss/cdb-components/loader.scss | 2 +- src/scss/cdb-components/shapes/error-circle.scss | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/scss/cdb-components/loader.scss b/src/scss/cdb-components/loader.scss index 42be505..4a06e0f 100644 --- a/src/scss/cdb-components/loader.scss +++ b/src/scss/cdb-components/loader.scss @@ -66,7 +66,7 @@ There is only one state 'is-visible', in order to make it visible. width: $baseSize * 2; height: $baseSize * 2; border: 2px solid $cMainLine; - border-radius: 50%; + border-radius: 50%; &.is-grey { border: 2px solid $cTypo2; } diff --git a/src/scss/cdb-components/shapes/error-circle.scss b/src/scss/cdb-components/shapes/error-circle.scss index 60af946..eebeb92 100644 --- a/src/scss/cdb-components/shapes/error-circle.scss +++ b/src/scss/cdb-components/shapes/error-circle.scss @@ -73,7 +73,7 @@ Description } &.is-white { border: 1px solid $cWhite; - } + } &.is-green { border: 1px solid $cHighlight; }