#6: refactoring

demo/site/index.html

@@ -22,7 +22,7 @@
             -moz-osx-font-smoothing: grayscale;
             color: #0b0c0c;
 
-            /*background: red;*/
+            /*background: #2c3e50;*/
         }
 
         a {

dist/css/admin.css

@@ -12103,15 +12103,15 @@ html:not([dir=rtl]) .k-no-padding-left.k-no-padding-left.k-no-padding-left {
   width: 6px;
   height: 6px;
   border-left: 1px solid;
-  border-bottom: 1px solid #aaa;
+  border-bottom: 1px solid;
   top: 50%;
   margin-top: -3px;
   left: -17px;
 }
 
 [dir="rtl"] .k-tree li li .jqtree-whitespace + .jqtree_common:not(.jqtree-toggler):after {
   border-left: none;
-  border-right: 1px solid #aaa;
+  border-right: 1px solid;
   left: auto;
   right: -17px;
 }

dist/css/site.css

@@ -1969,15 +1969,15 @@
   width: 6px;
   height: 6px;
   border-left: 1px solid;
-  border-bottom: 1px solid #aaa;
+  border-bottom: 1px solid;
   top: 50%;
   margin-top: -3px;
   left: -17px;
 }
 
 [dir="rtl"] .k-ui-namespace .k-tree li li .jqtree-whitespace + .jqtree_common:not(.jqtree-toggler):after {
   border-left: none;
-  border-right: 1px solid #aaa;
+  border-right: 1px solid;
   left: auto;
   right: -17px;
 }
@@ -3123,7 +3123,7 @@
 }
 
 .k-ui-namespace .k-alert .k-alert__heading, .k-ui-namespace .k-alert address, .k-ui-namespace .k-alert h1, .k-ui-namespace .k-alert h2, .k-ui-namespace .k-alert h3, .k-ui-namespace .k-alert h4, .k-ui-namespace .k-alert h5, .k-ui-namespace .k-alert h6, .k-ui-namespace .k-alert p {
-  margin-bottom: 0.5em;
+  margin-bottom: 1em;
 }
 
 .k-ui-namespace .k-alert .k-alert__heading:last-child, .k-ui-namespace .k-alert address:last-child, .k-ui-namespace .k-alert h1:last-child, .k-ui-namespace .k-alert h2:last-child, .k-ui-namespace .k-alert h3:last-child, .k-ui-namespace .k-alert h4:last-child, .k-ui-namespace .k-alert h5:last-child, .k-ui-namespace .k-alert h6:last-child, .k-ui-namespace .k-alert p:last-child {
@@ -3729,11 +3729,12 @@
 }
 
 .k-ui-namespace .k-thumbnail {
-  border: 1px solid rgba(0, 0, 0, 0.2);
+  border: 1px solid rgba(0, 0, 0, 0.25);
   border-radius: 3px;
   padding: 3px;
-  background: white;
-  transition: border 200ms ease-in-out;
+  background: rgba(255, 255, 255, 0.05);
+  transition: border 180ms cubic-bezier(0.2, 0.57, 0.44, 0.83);
+  -webkit-backface-visibility: hidden;
 }
 
 .k-ui-namespace a:focus .k-thumbnail, .k-ui-namespace a:hover .k-thumbnail, .k-ui-namespace aactive .k-thumbnail {
@@ -4341,15 +4342,15 @@ html:not([dir=rtl]) .k-no-padding-left.k-no-padding-left.k-no-padding-left {
   width: 6px;
   height: 6px;
   border-left: 1px solid;
-  border-bottom: 1px solid #aaa;
+  border-bottom: 1px solid;
   top: 50%;
   margin-top: -3px;
   left: -17px;
 }
 
 [dir="rtl"] .k-tree li li .jqtree-whitespace + .jqtree_common:not(.jqtree-toggler):after {
   border-left: none;
-  border-right: 1px solid #aaa;
+  border-right: 1px solid;
   left: auto;
   right: -17px;
 }

src/scss/admin/3rdparty/_jqtree.scss

@@ -157,14 +157,14 @@
           width: 6px;
           height: 6px;
           border-left: 1px solid;
-          border-bottom: 1px solid #aaa;
+          border-bottom: 1px solid;
           top: 50%;
           margin-top: -3px;
           left: -(($k-tree-size / 2) + 3px);
 
           @include rtl {
             border-left: none;
-            border-right: 1px solid #aaa;
+            border-right: 1px solid;
             left: auto;
             right: -(($k-tree-size / 2) + 3px);
           }

src/scss/site/molecules/_section.scss

@@ -14,21 +14,21 @@
   }
 
   .k-section--gradient {
-    background-image: $k-site-section-background;
-    padding: 1em;
-    margin-top: ($k-site-section-border-width * 2);
-    @include content-block(1em);
+    background-image: $k-site-section-gradient-background;
+    padding: $k-site-section-gradient-padding;
+    margin-top: ($k-site-section-gradient-border-width * 2);
+    @include content-block($k-site-section-gradient-margin);
 
     @include pseudo(before) {
-      top: -($k-site-section-border-width * 2);
+      top: -($k-site-section-gradient-border-width * 2);
       left: 0;
       right: 0;
-      height: $k-site-section-border-width;
-      background: $k-site-section-pseudo-background;
+      height: $k-site-section-gradient-border-width;
+      background: $k-site-section-gradient-pseudo-background;
     }
   }
 
   .k-section--joined {
     margin-bottom: 0;
   }
-}
+}

src/scss/site/molecules/_table.scss

@@ -17,7 +17,7 @@
     th,
     td {
       border: none;
-      padding: 0.5em 0.65em;
+      padding: $k-site-table-padding;
       vertical-align: middle;
       border-top: $k-site-table-border-width solid $k-site-table-border-color;
       text-align: left;

src/scss/site/molecules/_thumbnail.scss

@@ -8,7 +8,7 @@
     border-radius: $k-site-thumbnail-border-radius;
     padding: $k-site-thumbnail-spacing;
     background: $k-site-thumbnail-background;
-    transition: border 200ms ease-in-out;
+    @include transition(border);
   }
 
   a {

src/scss/site/molecules/_title.scss

@@ -21,7 +21,7 @@
    */
 
   .k-subtitle {
-    font-size: smaller; /* 1 */
+    font-size: $k-site-subtitle-font-size; /* 1 */
     padding-bottom: $k-site-subtitle-padding;
     border-bottom: $k-site-subtitle-border-bottom;
     @include content-block($k-site-subtitle-margin);