From e4a9447451bfccbea6943bb5546b03c81321eb77 Mon Sep 17 00:00:00 2001
From: Dmitriy Zaporozhets <dmitriy.zaporozhets@gmail.com>
Date: Tue, 13 Oct 2015 10:55:06 +0200
Subject: Rename bootstrap css file and refactor typography css

Signed-off-by: Dmitriy Zaporozhets <dmitriy.zaporozhets@gmail.com>
---
 app/assets/stylesheets/framework/gl_bootstrap.scss | 273 ---------------------
 app/assets/stylesheets/framework/gl_variables.scss | 158 ------------
 app/assets/stylesheets/framework/mixins.scss       | 141 -----------
 app/assets/stylesheets/framework/tables.scss       |  16 ++
 app/assets/stylesheets/framework/tw_bootstrap.scss | 253 +++++++++++++++++++
 .../framework/tw_bootstrap_variables.scss          | 158 ++++++++++++
 app/assets/stylesheets/framework/typography.scss   | 145 ++++++++++-
 7 files changed, 570 insertions(+), 574 deletions(-)
 delete mode 100644 app/assets/stylesheets/framework/gl_bootstrap.scss
 delete mode 100644 app/assets/stylesheets/framework/gl_variables.scss
 create mode 100644 app/assets/stylesheets/framework/tw_bootstrap.scss
 create mode 100644 app/assets/stylesheets/framework/tw_bootstrap_variables.scss

(limited to 'app/assets/stylesheets/framework')

diff --git a/app/assets/stylesheets/framework/gl_bootstrap.scss b/app/assets/stylesheets/framework/gl_bootstrap.scss
deleted file mode 100644
index eb8d23d6453..00000000000
--- a/app/assets/stylesheets/framework/gl_bootstrap.scss
+++ /dev/null
@@ -1,273 +0,0 @@
-/*
- * Twitter bootstrap with GitLab customizations/additions
- *
- */
-
-// Core variables and mixins
-@import "bootstrap/variables";
-@import "bootstrap/mixins";
-
-// Reset
-@import "bootstrap/normalize";
-@import "bootstrap/print";
-
-// Core CSS
-@import "bootstrap/scaffolding";
-@import "bootstrap/type";
-@import "bootstrap/code";
-@import "bootstrap/grid";
-@import "bootstrap/tables";
-@import "bootstrap/forms";
-@import "bootstrap/buttons";
-
-// Components
-@import "bootstrap/component-animations";
-@import "bootstrap/dropdowns";
-@import "bootstrap/button-groups";
-@import "bootstrap/input-groups";
-@import "bootstrap/navs";
-@import "bootstrap/navbar";
-@import "bootstrap/breadcrumbs";
-@import "bootstrap/pagination";
-@import "bootstrap/pager";
-@import "bootstrap/labels";
-@import "bootstrap/badges";
-@import "bootstrap/jumbotron";
-@import "bootstrap/thumbnails";
-@import "bootstrap/alerts";
-@import "bootstrap/progress-bars";
-@import "bootstrap/list-group";
-@import "bootstrap/wells";
-@import "bootstrap/close";
-@import "bootstrap/panels";
-
-// Components w/ JavaScript
-@import "bootstrap/modals";
-@import "bootstrap/tooltip";
-@import "bootstrap/popovers";
-@import "bootstrap/carousel";
-
-// Utility classes
-.clearfix {
-  @include clearfix();
-}
-.center-block {
-  @include center-block();
-}
-.pull-right {
-  float: right !important;
-}
-.pull-left {
-  float: left !important;
-}
-.hide {
-  display: none;
-}
-.show {
-  display: block !important;
-}
-.invisible {
-  visibility: hidden;
-}
-.text-hide {
-  @include text-hide();
-}
-.hidden {
-  display: none !important;
-  visibility: hidden !important;
-}
-.affix {
-  position: fixed;
-}
-
-@import "bootstrap/responsive-utilities";
-
-// Labels
-.label {
-  padding: 2px 4px;
-  font-size: 13px;
-  font-style: normal;
-  font-weight: normal;
-  display: inline-block;
-
-  &.label-gray {
-    background-color: #f8fafc;
-    color: $gl-gray;
-    text-shadow: none;
-  }
-
-  &.label-inverse {
-    background-color: #333333;
-  }
-}
-
-// Nav tabs
-.nav.nav-tabs {
-  margin-bottom: 15px;
-
-  li {
-    > a {
-      margin-right: 5px;
-      line-height: 20px;
-      border-color: #EEE;
-      color: #888;
-      border-bottom: 1px solid #ddd;
-      .badge {
-        background-color: #eee;
-        color: #888;
-        text-shadow: 0 1px 1px #fff;
-      }
-      i.fa {
-        line-height: 14px;
-      }
-    }
-    &.active {
-      > a {
-        border-color: #CCC;
-        border-bottom: 1px solid #fff;
-        color: #333;
-        font-weight: bold;
-      }
-    }
-  }
-}
-
-.nav-tabs > li > a,
-.nav-pills > li > a {
-  color: #666;
-}
-
-.nav-pills > .active > a > span > .badge {
-  background-color: #fff;
-  color: $gl-primary;
-}
-
-
-/**
- * fix to keep tooltips position in top navigation bar
- *
- */
-.navbar .nav > li {
-  position: relative;
-  white-space: nowrap;
-}
-
-/**
- * Add some extra stuff to panels
- *
- */
-
-.container-blank .panel .panel-heading {
-  font-size: 17px;
-  line-height: 38px;
-}
-
-.panel {
-  box-shadow: none;
-
-  .panel-heading {
-    .panel-head-actions {
-      position: relative;
-      top: -5px;
-      float: right;
-    }
-  }
-
-  .panel-body {
-    form {
-      margin: 0;
-    }
-
-    .form-actions {
-      margin: -15px;
-      margin-top: 18px;
-    }
-  }
-
-  .panel-footer {
-    .pagination {
-      margin: 0;
-    }
-
-    .btn {
-      min-width: 124px;
-    }
-  }
-
-  &.panel-small {
-    .panel-heading {
-      padding: 6px 15px;
-      font-size: 13px;
-      font-weight: normal;
-      a {
-        color: #777;
-      }
-    }
-  }
-}
-
-.panel-succes .panel-heading,
-.panel-info .panel-heading,
-.panel-danger .panel-heading,
-.panel-warning .panel-heading,
-.panel-primary .panel-heading,
-.alert {
-  a:not(.btn) {
-    @extend .alert-link;
-    color: #fff;
-    text-decoration: underline;
-  }
-}
-
-.alert-help {
-  background-color: $background-color;
-  border: 1px solid $border-color;
-  color: $gl-gray;
-}
-
-// Typography =================================================================
-
-.text-primary,
-.text-primary:hover {
-  color: $brand-primary;
-}
-
-.text-success,
-.text-success:hover {
-  color: $brand-success;
-}
-
-.text-danger,
-.text-danger:hover {
-  color: $brand-danger;
-}
-
-.text-warning,
-.text-warning:hover {
-  color: $brand-warning;
-}
-
-.text-info,
-.text-info:hover {
-  color: $brand-info;
-}
-
-// Tables =====================================================================
-
-table.table {
-  .dropdown-menu a {
-    text-decoration: none;
-  }
-
-  .success,
-  .warning,
-  .danger,
-  .info {
-    color: #fff;
-
-    a:not(.btn) {
-      text-decoration: underline;
-      color: #fff;
-    }
-  }
-}
diff --git a/app/assets/stylesheets/framework/gl_variables.scss b/app/assets/stylesheets/framework/gl_variables.scss
deleted file mode 100644
index 18632da4f2a..00000000000
--- a/app/assets/stylesheets/framework/gl_variables.scss
+++ /dev/null
@@ -1,158 +0,0 @@
-// Override Bootstrap variables here (defaults from bootstrap-sass v3.3.3):
-// For all variables see https://github.com/twbs/bootstrap-sass/blob/master/templates/project/_bootstrap-variables.sass
-//
-// Variables
-// --------------------------------------------------
-
-
-//== Colors
-//
-//## Gray and brand colors for use across Bootstrap.
-
-// $gray-base:              #000
-// $gray-darker:            lighten($gray-base, 13.5%) // #222
-// $gray-dark:              lighten($gray-base, 20%)   // #333
-// $gray:                   lighten($gray-base, 33.5%) // #555
-// $gray-light:             lighten($gray-base, 46.7%) // #777
-// $gray-lighter:           lighten($gray-base, 93.5%) // #eee
-
-$brand-primary:  $gl-primary;
-$brand-success:  $gl-success;
-$brand-info:     $gl-info;
-$brand-warning:  $gl-warning;
-$brand-danger:   $gl-danger;
-
-$border-radius-base:        2px !default;
-$border-radius-large:       2px !default;
-$border-radius-small:       2px !default;
-
-
-//== Scaffolding
-//
-$text-color:            $gl-text-color;
-$link-color:            $gl-link-color;
-
-
-//== Typography
-//
-//## Font, line-height, and color for body text, headings, and more.
-
-$font-family-sans-serif: $regular_font;
-$font-family-monospace:  $monospace_font;
-$font-size-base:         $gl-font-size;
-
-
-//== Components
-//
-//## Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start).
-
-$padding-base-vertical:     9px;
-$padding-base-horizontal:   $gl-padding;
-$component-active-color:    #fff;
-$component-active-bg:       $brand-info;
-
-//== Forms
-//
-//##
-
-$input-color:                    $text-color;
-$input-border:                   #e7e9ed;
-$input-border-focus:             #7F8FA4;
-$legend-color:                   $text-color;
-
-
-//== Pagination
-//
-//##
-
-$pagination-color:                     $gl-gray;
-$pagination-bg:                        $background-color;
-$pagination-border:                    transparent;
-
-$pagination-hover-color:               #fff;
-$pagination-hover-bg:                  $brand-info;
-$pagination-hover-border:              transparent;
-
-$pagination-active-color:              #fff;
-$pagination-active-bg:                 $brand-info;
-$pagination-active-border:             transparent;
-
-$pagination-disabled-color:            #fff;
-$pagination-disabled-bg:               lighten($brand-info, 15%);
-$pagination-disabled-border:           transparent;
-
-
-//== Form states and alerts
-//
-//## Define colors for form feedback states and, by default, alerts.
-
-$state-success-text:             #fff;
-$state-success-bg:               $brand-success;
-$state-success-border:           $brand-success;
-
-$state-info-text:                #fff;
-$state-info-bg:                  $brand-info;
-$state-info-border:              $brand-info;
-
-$state-warning-text:             #fff;
-$state-warning-bg:               $brand-warning;
-$state-warning-border:           $brand-warning;
-
-$state-danger-text:              #fff;
-$state-danger-bg:                $brand-danger;
-$state-danger-border:            $brand-danger;
-
-
-//== Alerts
-//
-//## Define alert colors, border radius, and padding.
-
-$alert-border-radius:            0;
-
-
-//== Panels
-//
-//##
-
-$panel-border-radius:         2px;
-$panel-default-text:       $text-color;
-$panel-default-border:     $border-color;
-$panel-default-heading-bg: $background-color;
-$panel-footer-bg:          $background-color;
-$panel-inner-border:       $border-color;
-
-//== Wells
-//
-//##
-
-$well-bg:                     #F9F9F9;
-$well-border:                 #EEE;
-
-//== Code
-//
-//##
-
-$code-color:                  #c7254e;
-$code-bg:                     #f9f2f4;
-
-$kbd-color:                   #fff;
-$kbd-bg:                      #333;
-
-//== Buttons
-//
-//##
-$btn-default-color:              $gl-text-color;
-$btn-default-bg:                 #fff;
-$btn-default-border:             #e7e9ed;
-
-//== Nav
-//
-//##
-$nav-link-padding: 13px $gl-padding;
-
-//== Code
-//
-//##
-$pre-bg:           #f8fafc !default;
-$pre-color:        $gl-gray !default;
-$pre-border-color: #e7e9ed;
diff --git a/app/assets/stylesheets/framework/mixins.scss b/app/assets/stylesheets/framework/mixins.scss
index c74a6d39824..089e6958eeb 100644
--- a/app/assets/stylesheets/framework/mixins.scss
+++ b/app/assets/stylesheets/framework/mixins.scss
@@ -54,147 +54,6 @@
   @include box-shadow(0 0 0 3px #f1f1f1);
 }
 
-@mixin md-typography {
-  color: $md-text-color;
-
-  a {
-    color: $md-link-color;
-  }
-
-  img {
-    max-width: 100%;
-  }
-
-  *:first-child {
-    margin-top: 0;
-  }
-
-  code {
-    font-family: $monospace_font;
-    white-space: pre;
-    word-wrap: normal;
-    padding: 1px 2px;
-  }
-
-  kbd {
-    display: inline-block;
-    padding: 3px 5px;
-    font-size: 11px;
-    line-height: 10px;
-    color: #555;
-    vertical-align: middle;
-    background-color: #FCFCFC;
-    border-width: 1px;
-    border-style: solid;
-    border-color: #CCC #CCC #BBB;
-    border-image: none;
-    border-radius: 3px;
-    box-shadow: 0px -1px 0px #BBB inset;
-  }
-
-  h1 {
-    font-size: 1.3em;
-    font-weight: 600;
-    margin: 24px 0 12px 0;
-    padding: 0 0 10px 0;
-    border-bottom: 1px solid #e7e9ed;
-    color: #313236;
-  }
-
-  h2 {
-    font-size: 1.2em;
-    font-weight: 600;
-    margin: 24px 0 12px 0;
-    color: #313236;
-  }
-
-  h3 {
-    margin: 24px 0 12px 0;
-    font-size: 1.25em;
-  }
-
-  h4 {
-    margin: 24px 0 12px 0;
-    font-size: 1.1em;
-  }
-
-  h5 {
-    margin: 24px 0 12px 0;
-    font-size: 1em;
-  }
-
-  h6 {
-    margin: 24px 0 12px 0;
-    font-size: 0.90em;
-  }
-
-  blockquote {
-    padding: 8px 21px;
-    margin: 12px 0 12px;
-    border-left: 3px solid #e7e9ed;
-  }
-
-  blockquote p {
-    color: #7f8fa4 !important;
-    font-size: 15px;
-    line-height: 1.5;
-  }
-
-  p {
-    color:#5c5d5e;
-    margin:6px 0 0 0;
-  }
-
-  table {
-    @extend .table;
-    @extend .table-bordered;
-    margin: 12px 0 12px 0;
-    color: #5c5d5e;
-    th {
-      background: #f8fafc;
-    }
-  }
-
-  pre {
-    margin: 12px 0 12px 0 !important;
-    background-color: #f8fafc !important;
-    font-size: 13px !important;
-    color: #5b6169 !important;
-    line-height: 1.6em !important;
-    @include border-radius(2px);
-  }
-
-  p > code {
-    font-weight: inherit;
-  }
-
-
-  ul {
-    color: #5c5d5e;
-  }
-
-  li {
-    line-height: 1.6em;
-  }
-
-  a[href*="/uploads/"], a[href*="storage.googleapis.com/google-code-attachments/"] {
-    &:before {
-      margin-right: 4px;
-
-      font: normal normal normal 14px/1 FontAwesome;
-      font-size: inherit;
-      text-rendering: auto;
-      -webkit-font-smoothing: antialiased;
-      content: "\f0c6";
-    }
-
-    &:hover:before {
-      text-decoration: none;
-    }
-  }
-}
-
-
 @mixin str-truncated($max_width: 82%) {
   display: inline-block;
   overflow: hidden;
diff --git a/app/assets/stylesheets/framework/tables.scss b/app/assets/stylesheets/framework/tables.scss
index a66e45577de..76163b3a05e 100644
--- a/app/assets/stylesheets/framework/tables.scss
+++ b/app/assets/stylesheets/framework/tables.scss
@@ -1,5 +1,21 @@
 table {
   &.table {
+    .dropdown-menu a {
+      text-decoration: none;
+    }
+
+    .success,
+    .warning,
+    .danger,
+    .info {
+      color: #fff;
+
+      a:not(.btn) {
+        text-decoration: underline;
+        color: #fff;
+      }
+    }
+
     tr {
       td, th {
         padding: 8px 10px;
diff --git a/app/assets/stylesheets/framework/tw_bootstrap.scss b/app/assets/stylesheets/framework/tw_bootstrap.scss
new file mode 100644
index 00000000000..722b44d2d10
--- /dev/null
+++ b/app/assets/stylesheets/framework/tw_bootstrap.scss
@@ -0,0 +1,253 @@
+/*
+ * Twitter bootstrap with GitLab customizations/additions
+ *
+ */
+
+// Core variables and mixins
+@import "bootstrap/variables";
+@import "bootstrap/mixins";
+
+// Reset
+@import "bootstrap/normalize";
+@import "bootstrap/print";
+
+// Core CSS
+@import "bootstrap/scaffolding";
+@import "bootstrap/type";
+@import "bootstrap/code";
+@import "bootstrap/grid";
+@import "bootstrap/tables";
+@import "bootstrap/forms";
+@import "bootstrap/buttons";
+
+// Components
+@import "bootstrap/component-animations";
+@import "bootstrap/dropdowns";
+@import "bootstrap/button-groups";
+@import "bootstrap/input-groups";
+@import "bootstrap/navs";
+@import "bootstrap/navbar";
+@import "bootstrap/breadcrumbs";
+@import "bootstrap/pagination";
+@import "bootstrap/pager";
+@import "bootstrap/labels";
+@import "bootstrap/badges";
+@import "bootstrap/jumbotron";
+@import "bootstrap/thumbnails";
+@import "bootstrap/alerts";
+@import "bootstrap/progress-bars";
+@import "bootstrap/list-group";
+@import "bootstrap/wells";
+@import "bootstrap/close";
+@import "bootstrap/panels";
+
+// Components w/ JavaScript
+@import "bootstrap/modals";
+@import "bootstrap/tooltip";
+@import "bootstrap/popovers";
+@import "bootstrap/carousel";
+
+// Utility classes
+.clearfix {
+  @include clearfix();
+}
+.center-block {
+  @include center-block();
+}
+.pull-right {
+  float: right !important;
+}
+.pull-left {
+  float: left !important;
+}
+.hide {
+  display: none;
+}
+.show {
+  display: block !important;
+}
+.invisible {
+  visibility: hidden;
+}
+.text-hide {
+  @include text-hide();
+}
+.hidden {
+  display: none !important;
+  visibility: hidden !important;
+}
+.affix {
+  position: fixed;
+}
+
+@import "bootstrap/responsive-utilities";
+
+// Labels
+.label {
+  padding: 2px 4px;
+  font-size: 13px;
+  font-style: normal;
+  font-weight: normal;
+  display: inline-block;
+
+  &.label-gray {
+    background-color: #f8fafc;
+    color: $gl-gray;
+    text-shadow: none;
+  }
+
+  &.label-inverse {
+    background-color: #333333;
+  }
+}
+
+// Nav tabs
+.nav.nav-tabs {
+  margin-bottom: 15px;
+
+  li {
+    > a {
+      margin-right: 5px;
+      line-height: 20px;
+      border-color: #EEE;
+      color: #888;
+      border-bottom: 1px solid #ddd;
+      .badge {
+        background-color: #eee;
+        color: #888;
+        text-shadow: 0 1px 1px #fff;
+      }
+      i.fa {
+        line-height: 14px;
+      }
+    }
+    &.active {
+      > a {
+        border-color: #CCC;
+        border-bottom: 1px solid #fff;
+        color: #333;
+        font-weight: bold;
+      }
+    }
+  }
+}
+
+.nav-tabs > li > a,
+.nav-pills > li > a {
+  color: #666;
+}
+
+.nav-pills > .active > a > span > .badge {
+  background-color: #fff;
+  color: $gl-primary;
+}
+
+
+/**
+ * fix to keep tooltips position in top navigation bar
+ *
+ */
+.navbar .nav > li {
+  position: relative;
+  white-space: nowrap;
+}
+
+/**
+ * Add some extra stuff to panels
+ *
+ */
+
+.container-blank .panel .panel-heading {
+  font-size: 17px;
+  line-height: 38px;
+}
+
+.panel {
+  box-shadow: none;
+
+  .panel-heading {
+    .panel-head-actions {
+      position: relative;
+      top: -5px;
+      float: right;
+    }
+  }
+
+  .panel-body {
+    form {
+      margin: 0;
+    }
+
+    .form-actions {
+      margin: -15px;
+      margin-top: 18px;
+    }
+  }
+
+  .panel-footer {
+    .pagination {
+      margin: 0;
+    }
+
+    .btn {
+      min-width: 124px;
+    }
+  }
+
+  &.panel-small {
+    .panel-heading {
+      padding: 6px 15px;
+      font-size: 13px;
+      font-weight: normal;
+      a {
+        color: #777;
+      }
+    }
+  }
+}
+
+.panel-succes .panel-heading,
+.panel-info .panel-heading,
+.panel-danger .panel-heading,
+.panel-warning .panel-heading,
+.panel-primary .panel-heading,
+.alert {
+  a:not(.btn) {
+    @extend .alert-link;
+    color: #fff;
+    text-decoration: underline;
+  }
+}
+
+.alert-help {
+  background-color: $background-color;
+  border: 1px solid $border-color;
+  color: $gl-gray;
+}
+
+// Typography =================================================================
+
+.text-primary,
+.text-primary:hover {
+  color: $brand-primary;
+}
+
+.text-success,
+.text-success:hover {
+  color: $brand-success;
+}
+
+.text-danger,
+.text-danger:hover {
+  color: $brand-danger;
+}
+
+.text-warning,
+.text-warning:hover {
+  color: $brand-warning;
+}
+
+.text-info,
+.text-info:hover {
+  color: $brand-info;
+}
diff --git a/app/assets/stylesheets/framework/tw_bootstrap_variables.scss b/app/assets/stylesheets/framework/tw_bootstrap_variables.scss
new file mode 100644
index 00000000000..18632da4f2a
--- /dev/null
+++ b/app/assets/stylesheets/framework/tw_bootstrap_variables.scss
@@ -0,0 +1,158 @@
+// Override Bootstrap variables here (defaults from bootstrap-sass v3.3.3):
+// For all variables see https://github.com/twbs/bootstrap-sass/blob/master/templates/project/_bootstrap-variables.sass
+//
+// Variables
+// --------------------------------------------------
+
+
+//== Colors
+//
+//## Gray and brand colors for use across Bootstrap.
+
+// $gray-base:              #000
+// $gray-darker:            lighten($gray-base, 13.5%) // #222
+// $gray-dark:              lighten($gray-base, 20%)   // #333
+// $gray:                   lighten($gray-base, 33.5%) // #555
+// $gray-light:             lighten($gray-base, 46.7%) // #777
+// $gray-lighter:           lighten($gray-base, 93.5%) // #eee
+
+$brand-primary:  $gl-primary;
+$brand-success:  $gl-success;
+$brand-info:     $gl-info;
+$brand-warning:  $gl-warning;
+$brand-danger:   $gl-danger;
+
+$border-radius-base:        2px !default;
+$border-radius-large:       2px !default;
+$border-radius-small:       2px !default;
+
+
+//== Scaffolding
+//
+$text-color:            $gl-text-color;
+$link-color:            $gl-link-color;
+
+
+//== Typography
+//
+//## Font, line-height, and color for body text, headings, and more.
+
+$font-family-sans-serif: $regular_font;
+$font-family-monospace:  $monospace_font;
+$font-size-base:         $gl-font-size;
+
+
+//== Components
+//
+//## Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start).
+
+$padding-base-vertical:     9px;
+$padding-base-horizontal:   $gl-padding;
+$component-active-color:    #fff;
+$component-active-bg:       $brand-info;
+
+//== Forms
+//
+//##
+
+$input-color:                    $text-color;
+$input-border:                   #e7e9ed;
+$input-border-focus:             #7F8FA4;
+$legend-color:                   $text-color;
+
+
+//== Pagination
+//
+//##
+
+$pagination-color:                     $gl-gray;
+$pagination-bg:                        $background-color;
+$pagination-border:                    transparent;
+
+$pagination-hover-color:               #fff;
+$pagination-hover-bg:                  $brand-info;
+$pagination-hover-border:              transparent;
+
+$pagination-active-color:              #fff;
+$pagination-active-bg:                 $brand-info;
+$pagination-active-border:             transparent;
+
+$pagination-disabled-color:            #fff;
+$pagination-disabled-bg:               lighten($brand-info, 15%);
+$pagination-disabled-border:           transparent;
+
+
+//== Form states and alerts
+//
+//## Define colors for form feedback states and, by default, alerts.
+
+$state-success-text:             #fff;
+$state-success-bg:               $brand-success;
+$state-success-border:           $brand-success;
+
+$state-info-text:                #fff;
+$state-info-bg:                  $brand-info;
+$state-info-border:              $brand-info;
+
+$state-warning-text:             #fff;
+$state-warning-bg:               $brand-warning;
+$state-warning-border:           $brand-warning;
+
+$state-danger-text:              #fff;
+$state-danger-bg:                $brand-danger;
+$state-danger-border:            $brand-danger;
+
+
+//== Alerts
+//
+//## Define alert colors, border radius, and padding.
+
+$alert-border-radius:            0;
+
+
+//== Panels
+//
+//##
+
+$panel-border-radius:         2px;
+$panel-default-text:       $text-color;
+$panel-default-border:     $border-color;
+$panel-default-heading-bg: $background-color;
+$panel-footer-bg:          $background-color;
+$panel-inner-border:       $border-color;
+
+//== Wells
+//
+//##
+
+$well-bg:                     #F9F9F9;
+$well-border:                 #EEE;
+
+//== Code
+//
+//##
+
+$code-color:                  #c7254e;
+$code-bg:                     #f9f2f4;
+
+$kbd-color:                   #fff;
+$kbd-bg:                      #333;
+
+//== Buttons
+//
+//##
+$btn-default-color:              $gl-text-color;
+$btn-default-bg:                 #fff;
+$btn-default-border:             #e7e9ed;
+
+//== Nav
+//
+//##
+$nav-link-padding: 13px $gl-padding;
+
+//== Code
+//
+//##
+$pre-bg:           #f8fafc !default;
+$pre-color:        $gl-gray !default;
+$pre-border-color: #e7e9ed;
diff --git a/app/assets/stylesheets/framework/typography.scss b/app/assets/stylesheets/framework/typography.scss
index 6a3cb49baae..bf36f96cc97 100644
--- a/app/assets/stylesheets/framework/typography.scss
+++ b/app/assets/stylesheets/framework/typography.scss
@@ -1,3 +1,144 @@
+@mixin md-typography {
+  color: $md-text-color;
+
+  a {
+    color: $md-link-color;
+  }
+
+  img {
+    max-width: 100%;
+  }
+
+  *:first-child {
+    margin-top: 0;
+  }
+
+  code {
+    font-family: $monospace_font;
+    white-space: pre;
+    word-wrap: normal;
+    padding: 1px 2px;
+  }
+
+  kbd {
+    display: inline-block;
+    padding: 3px 5px;
+    font-size: 11px;
+    line-height: 10px;
+    color: #555;
+    vertical-align: middle;
+    background-color: #FCFCFC;
+    border-width: 1px;
+    border-style: solid;
+    border-color: #CCC #CCC #BBB;
+    border-image: none;
+    border-radius: 3px;
+    box-shadow: 0px -1px 0px #BBB inset;
+  }
+
+  h1 {
+    font-size: 1.3em;
+    font-weight: 600;
+    margin: 24px 0 12px 0;
+    padding: 0 0 10px 0;
+    border-bottom: 1px solid #e7e9ed;
+    color: #313236;
+  }
+
+  h2 {
+    font-size: 1.2em;
+    font-weight: 600;
+    margin: 24px 0 12px 0;
+    color: #313236;
+  }
+
+  h3 {
+    margin: 24px 0 12px 0;
+    font-size: 1.25em;
+  }
+
+  h4 {
+    margin: 24px 0 12px 0;
+    font-size: 1.1em;
+  }
+
+  h5 {
+    margin: 24px 0 12px 0;
+    font-size: 1em;
+  }
+
+  h6 {
+    margin: 24px 0 12px 0;
+    font-size: 0.90em;
+  }
+
+  blockquote {
+    padding: 8px 21px;
+    margin: 12px 0 12px;
+    border-left: 3px solid #e7e9ed;
+  }
+
+  blockquote p {
+    color: #7f8fa4 !important;
+    font-size: 15px;
+    line-height: 1.5;
+  }
+
+  p {
+    color:#5c5d5e;
+    margin:6px 0 0 0;
+  }
+
+  table {
+    @extend .table;
+    @extend .table-bordered;
+    margin: 12px 0 12px 0;
+    color: #5c5d5e;
+    th {
+      background: #f8fafc;
+    }
+  }
+
+  pre {
+    margin: 12px 0 12px 0 !important;
+    background-color: #f8fafc !important;
+    font-size: 13px !important;
+    color: #5b6169 !important;
+    line-height: 1.6em !important;
+    @include border-radius(2px);
+  }
+
+  p > code {
+    font-weight: inherit;
+  }
+
+
+  ul {
+    color: #5c5d5e;
+  }
+
+  li {
+    line-height: 1.6em;
+  }
+
+  a[href*="/uploads/"], a[href*="storage.googleapis.com/google-code-attachments/"] {
+    &:before {
+      margin-right: 4px;
+
+      font: normal normal normal 14px/1 FontAwesome;
+      font-size: inherit;
+      text-rendering: auto;
+      -webkit-font-smoothing: antialiased;
+      content: "\f0c6";
+    }
+
+    &:hover:before {
+      text-decoration: none;
+    }
+  }
+}
+
+
 /**
  * Headers
  *
@@ -6,7 +147,7 @@ body {
   text-rendering:optimizeLegibility;
   -webkit-text-shadow: rgba(255,255,255,0.01) 0 0 1px;
 }
- 
+
 .page-title {
   margin-top: 0px;
   line-height: 1.3;
@@ -127,4 +268,4 @@ textarea.js-gfm-input {
 
 .strikethrough {
   text-decoration: line-through;
-}
\ No newline at end of file
+}
-- 
cgit v1.2.1