[RFC][NI] Update step card (#137)

* Update step card * Review improvements * Review improvements
uniplaces · Sep 28, 2017 · 7c7ac6f · 7c7ac6f
1 parent 3a2c5d8
commit 7c7ac6f
Showing 1 changed file with 44 additions and 16 deletions.
diff --git a/src/styles/_components/_step-card.scss b/src/styles/_components/_step-card.scss
@@ -8,8 +8,9 @@
     min-height: 210px;
     padding: 32px;
     margin-right: 20px;
-    background-color: color('background', 'modal');
-
+    background-color: rgba(color("primary"), 0.15);
+    text-align: center;
+
     @include breakpoint(small) {
         width: 100%;
         min-height: 0;
@@ -20,40 +21,59 @@
         margin-right: 0;
     }
 
+    &__icon {
+        @include flex();
+        height: 107px;
+        align-items: flex-end;
+        margin-bottom: 30px;
+
+        svg {
+            width: 100%;
+            max-height: 90px;
+        }
+
+        @include breakpoint(small) {
+            display: none;
+        }
+    }
+
     &__step {
         width: 100%;
-        margin-bottom: 8px;
         @include font("IntervalNextReg");
-        font-size: em(12px);
-        color: color('text', 'subtitle');
+        margin-bottom: 30px;
+        font-size: em(20px);
+        line-height: 20px;
+        display: inline-block;
+        vertical-align: bottom;
+        color: color("primary");
         text-transform: uppercase;
     }
 
     &__title {
         width: 100%;
         margin-bottom: 6px;
         @include font("IntervalNextReg");
-        font-size: em(22px);
-        color: color('text', 'title');
+        font-size: em(23px);
+        color: color("text", "title");
     }
 
     &__hint {
         width: 100%;
         margin-bottom: 14px;
         @include font("IntervalNextBook");
         font-size: em(16px);
-        color: color('text', 'subheading');
+        color: color("text", "header");
     }
 
     &__progress-bar {
         @include progress-bar();
         width: 100%;
         height: 8px;
         margin: 15px 0;
-        
+
         &-label {
             font-size: em(15px);
-            color: color('text', 'body');
+            color: color("text", "body");
         }
     }
 
@@ -64,7 +84,7 @@
 
     &--disabled {
         background-color: transparent;
-        
+
         & > div {
             opacity: .3;
         }
@@ -79,19 +99,27 @@
     }
 
     &--passed {
-        background-color: color('background');
-        border-top: 3px solid color('borders', 'light');
+        background-color: color("background");
+        border-top: 3px solid color("borders", "light");
+
+        & > div {
+            opacity: 1;
+        }
+
+        .uni-step-card__step {
+            font-size: em(16px);
+            color: color("text", "subtitle");
+        }
     }
 
     &--passed &__title,
     &--passed &__step {
-        opacity: .3;
+        opacity: 1;
     }
 
     &--passed &__title {
         @include font("IntervalNextBook");
-        font-size: em(17px);
-        color: color('text', 'subtitle');
+        font-size: em(21px);
     }
 
     &--passed &__hint,