Merge branch 'dev' into shawnbot/type-vars

2024-11-10 16:07:25 +03:00 · 2017-07-24 16:02:54 -07:00 · 2017-07-24 16:02:54 -07:00 · ddc2a61259
commit ddc2a61259
parent ee51ce0856 c807cd2a0f
16 changed files with 32 additions and 33 deletions
--- a/modules/primer-breadcrumb/lib/breadcrumb.scss
+++ b/modules/primer-breadcrumb/lib/breadcrumb.scss
@ -1,6 +1,6 @@
 .breadcrumb-item {
  display: inline-block;
-  margin-left: -4px;
+  margin-left: -$spacer-1;
  white-space: nowrap;
  list-style: none;

--- a/modules/primer-forms/lib/form-control.scss
+++ b/modules/primer-forms/lib/form-control.scss
@ -18,7 +18,7 @@ label {
 .form-control,
 .form-select {
  min-height: 34px;
-  padding: 6px 8px;
+  padding: 6px $spacer-2;
  font-size: $body-font-size;
  line-height: 20px;
  color: $text-gray-dark;
@ -62,7 +62,7 @@ label {

 // Large inputs
 .input-lg {
-  padding: 4px 10px;
+  padding: $spacer-1 10px;
  font-size: $h4-size;
 }

@ -99,8 +99,8 @@ label {
  label {
    em.highlight {
      position: relative;
-      left: -4px;
-      padding: 2px 4px;
+      left: -$spacer-1;
+      padding: 2px $spacer-1;
      font-style: normal;
      background: $yellow-100;
      border-radius: 3px;
@ -194,7 +194,7 @@ input::-webkit-inner-spin-button {
 }

 .form-warning {
-  padding: 8px 10px;
+  padding: $spacer-2 10px;
  margin: 10px 0;
  font-size: $h5-size;
  color: $yellow-900;
--- a/modules/primer-forms/lib/form-group.scss
+++ b/modules/primer-forms/lib/form-group.scss
@ -64,7 +64,7 @@
  // stylelint-disable selector-no-qualifying-type
  dd {
    h4 {
-      margin: 4px 0 0;
+      margin: $spacer-1 0 0;

      &.is-error { color: $text-red; }

@ -133,7 +133,7 @@
      z-index: 10;
      display: block; // Show up in errored/warn state
      max-width: 450px; // Keep our long errors readable
-      padding: 5px 8px;
+      padding: 5px $spacer-2;
      margin: $spacer-1 0 0;
      font-size: 13px;
      font-weight: $font-weight-normal;
@ -204,7 +204,7 @@

 .note {
  min-height: 17px;
-  margin: 4px 0 2px;
+  margin: $spacer-1 0 2px;
  font-size: $font-size-small;
  color: $text-gray;

--- a/modules/primer-forms/lib/form-select.scss
+++ b/modules/primer-forms/lib/form-select.scss
@ -6,8 +6,8 @@
  max-width: 100%;
  height: 34px;
  // IE9 hacks to reduce padding
-  padding-right: 24px;
-  padding-right: 8px \9;
+  padding-right: $spacer-4;
+  padding-right: $spacer-2 \9;
  background: $bg-white url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAUCAMAAACzvE1FAAAADFBMVEUzMzMzMzMzMzMzMzMKAG/3AAAAA3RSTlMAf4C/aSLHAAAAPElEQVR42q3NMQ4AIAgEQTn//2cLdRKppSGzBYwzVXvznNWs8C58CiussPJj8h6NwgorrKRdTvuV9v16Afn0AYFOB7aYAAAAAElFTkSuQmCC") no-repeat right 8px center;
  // IE9 hacks to hide the background-image
  background-image: none \9;
--- a/modules/primer-forms/lib/form-validation.scss
+++ b/modules/primer-forms/lib/form-validation.scss
@ -87,7 +87,7 @@ dl.form-group > dd {

    > li {
      float: left;
-      margin: 0 4px 0 0;
+      margin: 0 $spacer-1 0 0;
      list-style-type: none;

      &.text {
--- a/modules/primer-labels/lib/labels.scss
+++ b/modules/primer-labels/lib/labels.scss
@ -17,7 +17,7 @@
 .label,
 .Label {
  display: inline-block;
-  padding: 3px 4px;
+  padding: 3px $spacer-1;
  font-size: $font-size-small;
  font-weight: $font-weight-bold;
  line-height: $lh-condensed-ultra; // prevent inheritance from changing proportions
--- a/modules/primer-markdown/lib/blob-csv.scss
+++ b/modules/primer-markdown/lib/blob-csv.scss
@ -11,7 +11,7 @@
  }

  .blob-num {
-    padding: 10px 8px 9px;
+    padding: 10px $spacer-2 9px;
    text-align: right;
    background: $bg-white;
    border: 0;
--- a/modules/primer-markdown/lib/code.scss
+++ b/modules/primer-markdown/lib/code.scss
@ -38,7 +38,7 @@
  }

  .highlight {
-    margin-bottom: $margin;
+    margin-bottom: $spacer-3;

    pre {
      margin-bottom: 0;
@ -48,7 +48,7 @@

  .highlight pre,
  pre {
-    padding: $margin;
+    padding: $spacer-3;
    overflow: auto;
    font-size: 85%;
    line-height: 1.45;
--- a/modules/primer-markdown/lib/headings.scss
+++ b/modules/primer-markdown/lib/headings.scss
@ -9,8 +9,8 @@
  h4,
  h5,
  h6 {
-    margin-top: ($margin * 1.5);
-    margin-bottom: $margin;
+    margin-top: $spacer-4;
+    margin-bottom: $spacer-3;
    font-weight: $font-weight-bold;
    line-height: $lh-condensed;

--- a/modules/primer-markdown/lib/lists.scss
+++ b/modules/primer-markdown/lib/lists.scss
@ -46,7 +46,7 @@
  }

  li > p {
-    margin-top: $margin;
+    margin-top: $spacer-3;
  }

  li + li {
@ -58,15 +58,15 @@

    dt {
      padding: 0;
-      margin-top: $margin;
+      margin-top: $spacer-3;
      font-size: 1em;
      font-style: italic;
      font-weight: $font-weight-bold;
    }

    dd {
-      padding: 0 $margin;
-      margin-bottom: $margin;
+      padding: 0 $spacer-3;
+      margin-bottom: $spacer-3;
    }
  }
 }
--- a/modules/primer-markdown/lib/markdown-body.scss
+++ b/modules/primer-markdown/lib/markdown-body.scss
@ -1,6 +1,5 @@
 // All of our block level items should have the same margin
 // stylelint-disable selector-max-type
-$margin: 16px;

 // This is styling for generic markdownized text. Anything you put in a
 // container with .markdown-body on it should render generally well. It also
@ -49,7 +48,7 @@ $margin: 16px;

  .anchor {
    float: left;
-    padding-right: 4px;
+    padding-right: $spacer-1;
    margin-left: -20px;
    line-height: $lh-condensed-ultra;

@ -66,13 +65,13 @@ $margin: 16px;
  table,
  pre {
    margin-top: 0;
-    margin-bottom: $margin;
+    margin-bottom: $spacer-3;
  }

  hr {
    height: 0.25em;
    padding: 0;
-    margin: ($margin * 1.5) 0;
+    margin: $spacer-4 0;
    background-color: $gray-200;
    border: 0;
  }
--- a/modules/primer-navigation/lib/filter-list.scss
+++ b/modules/primer-navigation/lib/filter-list.scss
@ -5,7 +5,7 @@
  list-style-type: none;

  &.small .filter-item {
-    padding: 4px 10px;
+    padding: $spacer-1 10px;
    margin: 0 0 2px;
    font-size: $font-size-small;
  }
@ -24,7 +24,7 @@
 .filter-item {
  position: relative;
  display: block;
-  padding: 8px 10px;
+  padding: $spacer-2 10px;
  margin-bottom: 5px;
  overflow: hidden;
  font-size: $h5-size;
--- a/modules/primer-navigation/lib/menu.scss
+++ b/modules/primer-navigation/lib/menu.scss
@ -13,7 +13,7 @@
 .menu-item {
  position: relative;
  display: block;
-  padding: 8px 10px;
+  padding: $spacer-2 10px;
  border-bottom: 1px solid $gray-200;

  &:first-child {
@ -85,7 +85,7 @@

 .menu-heading {
  display: block;
-  padding: 8px 10px;
+  padding: $spacer-2 10px;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 13px;
--- a/modules/primer-navigation/lib/tabnav.scss
+++ b/modules/primer-navigation/lib/tabnav.scss
@ -16,7 +16,7 @@

 .tabnav-tab {
  display: inline-block;
-  padding: 8px 12px;
+  padding: $spacer-2 12px;
  font-size: $h5-size;
  line-height: 20px;
  color: $gray-600;
--- a/modules/primer-support/lib/variables/layout.scss
+++ b/modules/primer-support/lib/variables/layout.scss
@ -24,7 +24,7 @@ $spacers: (
 // Aliases for easy use
 $spacer-1: nth($spacers, 2) !default; // 4px
 $spacer-2: nth($spacers, 3) !default; // 8px
-$spacer-3: nth($spacers, 4) !default; // 12px
+$spacer-3: nth($spacers, 4) !default; // 16px
 $spacer-4: nth($spacers, 5) !default; // 24px
 $spacer-5: nth($spacers, 6) !default; // 32px
 $spacer-6: nth($spacers, 7) !default; // 40px
--- a/modules/primer-tooltips/lib/tooltips.scss
+++ b/modules/primer-tooltips/lib/tooltips.scss
@ -7,7 +7,7 @@
  position: absolute;
  z-index: 1000000;
  display: none;
-  padding: 5px 8px;
+  padding: 5px $spacer-2;
  font: normal normal 11px/1.5 $body-font;
  -webkit-font-smoothing: subpixel-antialiased;
  color: $tooltip-text-color;