Converting application less to sass.

app/assets/sass/components/_badge.scss

@@ -0,0 +1,18 @@
+
+.badge {
+    display: inline-block;
+    padding: .2em .4em;
+    line-height: 1;
+    text-align: center;
+    border-radius: 2px;
+    vertical-align: baseline;
+
+    &:empty {
+        display: none;
+    }
+
+    &-primary {
+        color: white;
+        background-color: $brand-color;
+    }
+}

app/assets/sass/components/_blankslate.scss

@@ -0,0 +1,36 @@
+
+
+// ----------------------------------
+//  Base style.
+// ----------------------------------
+
+
+.blankslate {
+    border-radius: 4px;
+    @include box-shadow(inset 0 0 4px rgba(0,0,0, .1));
+    border: solid 1px $blankslate-border;
+
+    color: $blankslate-color;
+    background-color: $blankslate-bg;
+    padding: $blankslate-spacing;
+
+    h3, p {
+        text-align: center;
+    }
+
+    :last-child {
+        margin-bottom: 0;
+    }
+}
+
+
+// ----------------------------------
+//  Variants
+// ----------------------------------
+
+
+//    Sizes
+// ----------------------------------
+.blankslate-sm {
+    padding: $blankslate-spacing-sm;
+}

app/assets/sass/components/_button.scss

@@ -0,0 +1,76 @@
+
+
+// ----------------------------------
+//  Base style.
+// ----------------------------------
+
+
+.button {
+    display: inline-block;
+    padding: 0.5rem 2rem;
+    cursor: pointer;
+    vertical-align: middle;
+    // Resets for <button> elements.
+    border: 1px solid transparent;
+    transition: all .2s ease-in-out;
+
+    &:active,
+    &:hover {
+        color: inherit;
+        text-decoration: none;
+    }
+
+    &.disabled {
+        cursor: not-allowed;
+    }
+}
+
+// ----------------------------------
+//  Variants
+// ----------------------------------
+
+
+//    Round button
+// ----------------------------------
+
+.button-round {
+    padding: 0;
+    @include button-circle(40px);
+}
+
+//    Colors
+// ----------------------------------
+
+.button-default { @include button-variant($text-color, $button-bg-color); }
+.button-primary { @include button-variant($button-primary-color, $button-primary-bg); }
+.button-brand { @include button-variant($button-brand-color, $button-brand-bg); }
+.button-light { @include button-variant($text-light-color, $button-bg-color, $button-hover-color); }
+
+.button-info { @include button-variant($button-info-color, $button-info-bg); }
+.button-success { @include button-variant($button-success-color, $button-success-bg); }
+.button-warning { @include button-variant($button-warning-color, $button-warning-bg); }
+.button-danger { @include button-variant($button-danger-color, $button-danger-bg); }
+
+.button-github { @include button-variant($button-github-color, $button-github-bg); }
+.button-gitlab { @include button-variant($button-gitlab-color, $button-gitlab-bg); }
+.button-google { @include button-variant($button-google-color, $button-google-bg); }
+.button-linkedin { @include button-variant($button-linkedin-color, $button-linkedin-bg); }
+
+//    Outline
+// ----------------------------------
+
+.button-outline-primary { @include button-outline-variant($text-color, $button-bg-color); }
+
+//    Sizes
+// ----------------------------------
+
+.button-large { font-size: $text-size-large; }
+.button-small { font-size: 0.6em; }
+
+//    Block button
+// ----------------------------------
+
+.button-block {
+    display: block;
+    width: 100%;
+}

app/assets/sass/components/_callback-list.scss

@@ -0,0 +1,78 @@
+
+
+.callback-list-item {
+    @extend .clearfix;
+    position: relative;
+    padding: .6em 1em;
+
+    &:hover {
+        background: $gray-lightest;
+    }
+
+    // Borders.
+    // --------
+
+    border: solid $callback-list-border-color $callback-list-border-size;
+
+    // Remove top border for all except first child.
+    &:not(:first-child) {
+        border-top: 0;
+    }
+
+    // top border radius for first child.
+    &:first-child {
+        border-top-left-radius: $callback-list-border-radius;
+        border-top-right-radius: $callback-list-border-radius;
+    }
+
+    // bottom border radius for first child.
+    &:last-child {
+        border-bottom-left-radius: $callback-list-border-radius;
+        border-bottom-right-radius: $callback-list-border-radius;
+    }
+
+    // Sections.
+    // ---------
+
+    &-header {
+        margin-bottom: .4em;
+    }
+
+    &-info {
+        font-size: $font-size-small;
+        color: $callback-list-info-color;
+
+        > span {
+            display: inline-block;
+            margin-right: 1.6em;
+        }
+
+        .icon {
+            @include icon-vcenter();
+            font-size: 20px;
+            padding: .2em;
+        }
+    }
+
+    &-name {
+        margin-right: 1em;
+        font-size: $callback-list-name-text-size;
+        color: $callback-list-name-color;
+
+        &:hover {
+            color: $callback-list-name-hover-color;
+            text-decoration: none;
+        }
+    }
+
+    &-arrow {
+        color: $callback-list-arrow-color;
+        position: absolute;
+        right: .8em;
+        top: 50%;
+        > .icon {
+            font-size: 35px;
+            transform: translateY(-50%);
+        }
+    }
+}

app/assets/sass/components/_icon.scss

@@ -0,0 +1,4 @@
+
+.icon {
+    display: inline-block;
+}

app/assets/sass/components/_pagination.scss

@@ -0,0 +1,33 @@
+
+.pagination {
+    @extend .nav;
+    margin-top: 1em;
+    margin-bottom: 1em;
+
+    > li {
+        display: inline-block;
+
+        .middle, a {
+            padding: .4em .8em;
+            margin: 0 .4em;
+        }
+
+        a {
+            @extend .button;
+            display: block;
+            border: solid 1px $pagination-border;
+            color: $pagination-color;
+
+            &:hover {
+                color: $pagination-color;
+                background-color: $pagination-hover;
+            }
+        }
+
+        &.active a {
+            color: $pagination-active-color;
+            background: $pagination-active-bg;
+            border-color: $pagination-active-border;
+        }
+    }
+}

app/assets/sass/components/_request-item.scss

@@ -0,0 +1,126 @@
+
+.request-list {
+
+
+    &-item {
+
+        // Header Section
+        // --------------
+        &-header {
+            display: block;
+            padding: .5em 1em;
+
+            color: $request-item-active-color;
+            background-color: $request-item-active-background;
+            border: 1px solid $request-item-active-border-color;
+
+            &:hover,
+            &:active,
+            &:focus {
+                color: $request-item-active-color;
+                text-decoration: none;
+            }
+
+            &.collapsed {
+                background-color: $request-item-background;
+
+                &:hover {
+                    background-color: $request-item-hover-background;
+                }
+
+                &:hover,
+                &:active,
+                &:focus {
+                    color: $request-item-color;
+                }
+            }
+
+            &-row {
+                display: block;
+                & + & {
+                    margin-top: .4em;
+                }
+            }
+
+            &-method,
+            &-uri,
+            &-type,
+            &-timestamp,
+            &-size,
+            &-ip {
+                display: inline-block;
+                .icon {
+                    margin: 0 .2em;
+                }
+            }
+
+            &-type,
+            &-timestamp,
+            &-size,
+            &-ip {
+                color: $request-item-secondary-color;
+                font-size: $font-size-small;
+            }
+
+            &-method {
+                font-weight: bold;
+            }
+
+            &-type,
+            &-size {
+                width: 30%;
+            }
+
+            &-ip,
+            &-timestamp {
+                float: right;
+            }
+        }
+
+        // Detail section
+        // --------------
+        &-detail {
+
+            background-color: $request-detail-background;
+            border: 1px solid $request-item-border-color;
+            padding: 1em;
+
+            &-headers {
+                @extend .table, .table-bordered;
+                background: white;
+
+                &-key {
+                    width: 30%;
+                }
+            }
+
+            &-body {
+                margin-bottom: 1em;
+            }
+
+            &-button {
+                @extend .button, .button-brand;
+                display: block;
+                margin-bottom: 1em;
+            }
+        }
+
+        // Border overrides
+        // ----------------
+
+        // Remove bottom border from header for all but last request-item.
+        &:not(:last-child) &-header {
+            border-bottom: 0;
+        }
+
+        // Remove top border from detail element for last request-item.
+        &:last-child &-detail {
+            border-top: 0;
+        }
+
+        // Remove bottom border from detail element for all but last request-item.
+        &:not(:last-child) &-detail {
+            border-bottom: 0;
+        }
+    }
+}

app/assets/sass/components/_section.scss

@@ -0,0 +1,24 @@
+
+// ---------------------------
+//  Section
+// ---------------------------
+
+.section {
+    position: relative;
+    background-color: $section-bg;
+    padding: $section-padding;
+    margin-bottom: 60px;
+    border-radius: 2px;
+    @include box-shadow($block-shadow-3);
+
+    &-header {
+        text-align: center;
+        margin-bottom: 15px;
+
+        > h1 {
+            display: inline-block;
+            border-bottom: 2px solid $border-color;
+            padding: 20px 80px;
+        }
+    }
+}

app/assets/sass/components/_spacer.scss

@@ -0,0 +1,6 @@
+
+.spacer {
+    display: block;
+    border-bottom: 1px solid $gray-light;
+    margin: $spacer-margin;
+}

app/assets/sass/components/_url.scss

@@ -0,0 +1,8 @@
+
+.url {
+
+    &-query,
+    &-fragment {
+        color: #9c9c9c;
+    }
+}