style first steps

- new box--paper style (lined paper with 31px line-height)
- TODO: icon color replace

Gemfile.lock

@@ -279,7 +279,7 @@ GEM
     sprockets (3.5.2)
       concurrent-ruby (~> 1.0)
       rack (> 1, < 3)
-    sprockets-rails (3.0.0)
+    sprockets-rails (3.0.1)
       actionpack (>= 4.0)
       activesupport (>= 4.0)
       sprockets (>= 3.0.0)

app/assets/javascripts/app/views/dashboard.jst.eco

@@ -5,32 +5,27 @@
   </div>
 
   <div class="tab-content first-steps-widgets hidden">
+    <div class="box box--paper">
       <% if @isAdmin: %>
-    <%- @T('Configuration') %>
-    <ul>
-      <li><%- @T('Branding') %></li>
-      <li><%- @T('Your Email Configuration') %></li>
-      <li><%- @T('Invite Agents/Colleges') %></li>
-    </ul>
+      <h3><%- @T('Configuration') %></h3>
+      <div class="todo is-done"><%- @T('Branding') %></div>
+      <div class="todo"><%- @T('Your Email Configuration') %></div>
+      <div class="todo"><%- @T('Invite Agents/Colleges') %></div>
       <% end %>
-    <%- @T('How to use it') %>
-    <ul>
-      <li><a href="#" class="intro"><%- @T('Intro') %></a></li>
-      <li><%- @T('Create a Test Ticket') %></li>
-      <li><%- @T('Create new Overviews') %></li>
-      <li><%- @T('Create Text Modues') %></li>
-      <li><%- @T('Create Macros') %></li>
-    </ul>
+      <h3><%- @T('How to use it') %></h3>
+      <div class="todo"><a href="#" class="intro"><%- @T('Intro') %></a></div>
+      <div class="todo is-done"><%- @T('Create a Test Ticket') %></div>
+      <div class="todo"><%- @T('Create new Overviews') %></div>
+      <div class="todo is-done"><%- @T('Create Text Modues') %></div>
+      <div class="todo"><%- @T('Create Macros') %></div>
       <% if @isAdmin: %>
-    <%- @T('Additionals Channels') %>
-    <ul>
-      <li><%- @T('Twitter') %></li>
-      <li><%- @T('Facebook') %></li>
-      <li><%- @T('Chat') %></li>
-      <li><%- @T('Widget') %></li>
-    </ul>
+      <h3><%- @T('Additionals Channels') %></h3>
+      <div class="todo"><%- @T('Twitter') %></div>
+      <div class="todo"><%- @T('Facebook') %></div>
+      <div class="todo is-done"><%- @T('Chat') %></div>
+      <div class="todo"><%- @T('Widget') %></div>
       <% end %>
-
+    </div>
   </div>
 
   <div class="tab-content stat-widgets three-columns horizontal"></div>

app/assets/stylesheets/zammad.scss

@@ -17,6 +17,28 @@ $highlight-color: hsl(205,90%,60%);
 
 $largeScreenBreakpoint: 1280px;
 
+/// Replace `$search` with `$replace` in `$string`
+/// @author Hugo Giraudel
+/// @param {String} $string - Initial string
+/// @param {String} $search - Substring to replace
+/// @param {String} $replace ('') - New value
+/// @return {String} - Updated string
+@function str-replace($string, $search, $replace: '') {
+  $index: str-index($string, $search);
+
+  @if $index {
+    @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
+  }
+
+  @return $string;
+}
+
+@function icon($name, $color) {
+  $data-uri: asset-data-url("/assets/images/icons/#{$name}");
+  $replace-src: str-replace("@{data-uri}", "#50E3C2", $color);
+  @return $replace-src;
+}
+
 html {
   height: 100%;
 }
@@ -2231,7 +2253,7 @@ ol.tabs li {
   }
 
   .tabs--big {
-    margin: 25px auto 20px;
+    margin: 28px auto;
     font-size: 14px;
     border-radius: 8px;
     
@@ -3691,7 +3713,7 @@ footer {
 .superbad-color  { fill: $superbad-color; }
 
 .stat-widgets {
-  margin: 0 -7px 20px;
+  margin: -7px -7px 20px;
 }
 
   .stat-widget {
@@ -5116,6 +5138,23 @@ footer {
     margin-bottom: 12px;
   }
 
+  .box--paper {
+    background-image: linear-gradient(transparent 30px, hsl(0,0%,93%) 31px);
+    background-size: 100% 31px;
+    line-height: 31px;
+    padding-top: 31px;
+    padding-bottom: 31px;
+
+    h1, h2, h3 {
+      margin: 0;
+      line-height: inherit;
+    }
+
+    h3:not(:first-child) {
+      margin-top: 31px;
+    }
+  }
+
   .box h1 {
     margin-top: 10px;
     margin-bottom: 12px;
@@ -5854,8 +5893,6 @@ footer {
 }
 
 .tab-content {
-  margin-top: 25px;
-  
   h2:first-child {
     margin-top: 0;
   }
@@ -7727,6 +7764,32 @@ output {
   }
 }
 
+.todo {
+  padding: 0 22px;
+  position: relative;
+
+  /* circle */
+  &:before {
+    content: "";
+    position: absolute;
+    left: 5px;
+    top: 12px;
+    width: 6px;
+    height: 6px;
+    border-radius: 100%;
+    background: rgba(0,0,0,.1);
+  }
+
+  &.is-done {
+    // background: icon("checkmark.svg", $supergood-color) no-repeat 0 9px;
+    background: url("images/icons/checkmark.svg") no-repeat 0 9px;
+
+    &:before {
+      display: none;
+    }
+  }
+}
+
 /*
 
   ----------------