This commit is contained in:
piensaenpixel 2016-02-03 16:59:08 +01:00
parent e4f5c098e0
commit cd027cebd2
2 changed files with 16 additions and 16 deletions

View File

@ -125,13 +125,13 @@
*/ */
.CDB-BoxLoader { .CDB-BoxLoader {
padding: 0 24px; padding: 0 $baseSize * 3;
border-top: 1px solid $cMainLine; border-top: 1px solid $cMainLine;
} }
.CDB-BoxLoader-inner { .CDB-BoxLoader-inner {
padding: 12px 0; padding: $baseSize + 4 0;
border-top: 1px solid $cMainLine; border-top: 1px solid $cMainLine;
&:first-child { &:first-child {
border-top: 0; border-top: 0;
@ -140,7 +140,7 @@
.CDB-BoxLoader-item { .CDB-BoxLoader-item {
@include display-flex(); @include display-flex();
padding: 8px 0; padding: $baseSize 0;
color: $cTypo2; color: $cTypo2;
&.is-working { &.is-working {
color: $cTypo3; color: $cTypo3;
@ -149,6 +149,6 @@
.CDB-BoxLoader-info { .CDB-BoxLoader-info {
@include flex(1); @include flex(1);
padding-right: 16px; padding-right: $baseSize * 2;
} }

View File

@ -53,8 +53,8 @@ There is only one state 'is-visible', in order to make it visible.
</div> </div>
<div style="padding: 20px; background: #2E3C43;"> <div style="padding: 20px; background: #2E3C43;">
<div class="CDB-LoaderIcon is-white"> <div class="CDB-LoaderIcon is-grey">
<div class="CDB-LoaderIcon-item is-white"></div> <div class="CDB-LoaderIcon-item is-grey"></div>
</div> </div>
</div> </div>
``` ```
@ -65,10 +65,10 @@ There is only one state 'is-visible', in order to make it visible.
position: relative; position: relative;
width: $baseSize * 2; width: $baseSize * 2;
height: $baseSize * 2; height: $baseSize * 2;
border: 2px solid #D8D8D8; border: 2px solid $cMainLine;
border-radius: 50%; border-radius: 50%;
&.is-white { &.is-grey {
border: 2px solid #636D72; border: 2px solid $cTypo2;
} }
} }
@ -80,7 +80,7 @@ There is only one state 'is-visible', in order to make it visible.
width: $baseSize * 2; width: $baseSize * 2;
height: $baseSize * 2; height: $baseSize * 2;
border-radius: 50%; 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, &::before,
&::after { &::after {
@ -94,7 +94,7 @@ There is only one state 'is-visible', in order to make it visible.
width: 50%; width: 50%;
height: 50%; height: 50%;
border-radius: 100% 0 0; border-radius: 100% 0 0;
background: #D8D8D8; background: $cMainLine;
} }
&::after { &::after {
right: 0; right: 0;
@ -103,15 +103,15 @@ There is only one state 'is-visible', in order to make it visible.
height: 75%; height: 75%;
margin: auto; margin: auto;
border-radius: 50%; border-radius: 50%;
background: #FFF; background: $cWhite;
} }
&.is-white { &.is-grey {
background: linear-gradient(to right, #2E3C43 10%, rgba(255, 255, 255, 0) 42%); background: linear-gradient(to right, $cMainDark 10%, rgba($cWhite, 0) 42%);
&::before { &::before {
background: #636D72; background: $cTypo2;
} }
&::after { &::after {
background: #2E3C43; background: $cMainDark;
} }
} }
} }