Merge pull request #13373 from twbs/fix-13360

Make variable deprecation notices visible in customizer

2 files changed, 20 insertions, 6 deletions

diff --git a/docs/_includes/customizer-variables.html b/docs/_includes/customizer-variables.html
index e807e1231..11f6e0385 100644
--- a/docs/_includes/customizer-variables.html
+++ b/docs/_includes/customizer-variables.html
@@ -502,6 +502,7 @@
   <div class="bs-customizer-input">
     <label for="input-@dropdown-caret-color">@dropdown-caret-color</label>
     <input id="input-@dropdown-caret-color" type="text" value="#000" data-var="@dropdown-caret-color" class="form-control"/>
+    <p class="help-block">Deprecated <code>@dropdown-caret-color</code> as of v3.1.0</p>
   </div>
 </div>
 <h2 id="media-queries-breakpoints">Media queries breakpoints</h2>
@@ -510,18 +511,22 @@
   <div class="bs-customizer-input">
     <label for="input-@screen-xs">@screen-xs</label>
     <input id="input-@screen-xs" type="text" value="480px" data-var="@screen-xs" class="form-control"/>
+    <p class="help-block">Deprecated <code>@screen-xs</code> as of v3.0.1</p>
   </div>
   <div class="bs-customizer-input">
     <label for="input-@screen-xs-min">@screen-xs-min</label>
     <input id="input-@screen-xs-min" type="text" value="@screen-xs" data-var="@screen-xs-min" class="form-control"/>
+    <p class="help-block">Deprecated <code>@screen-xs-min</code> as of v3.2.0</p>
   </div>
   <div class="bs-customizer-input">
     <label for="input-@screen-phone">@screen-phone</label>
     <input id="input-@screen-phone" type="text" value="@screen-xs-min" data-var="@screen-phone" class="form-control"/>
+    <p class="help-block">Deprecated <code>@screen-phone</code> as of v3.0.1</p>
   </div>
   <div class="bs-customizer-input">
     <label for="input-@screen-sm">@screen-sm</label>
     <input id="input-@screen-sm" type="text" value="768px" data-var="@screen-sm" class="form-control"/>
+    <p class="help-block">Deprecated <code>@screen-sm</code> as of v3.0.1</p>
   </div>
   <div class="bs-customizer-input">
     <label for="input-@screen-sm-min">@screen-sm-min</label>
@@ -530,10 +535,12 @@
   <div class="bs-customizer-input">
     <label for="input-@screen-tablet">@screen-tablet</label>
     <input id="input-@screen-tablet" type="text" value="@screen-sm-min" data-var="@screen-tablet" class="form-control"/>
+    <p class="help-block">Deprecated <code>@screen-tablet</code> as of v3.0.1</p>
   </div>
   <div class="bs-customizer-input">
     <label for="input-@screen-md">@screen-md</label>
     <input id="input-@screen-md" type="text" value="992px" data-var="@screen-md" class="form-control"/>
+    <p class="help-block">Deprecated <code>@screen-md</code> as of v3.0.1</p>
   </div>
   <div class="bs-customizer-input">
     <label for="input-@screen-md-min">@screen-md-min</label>
@@ -542,10 +549,12 @@
   <div class="bs-customizer-input">
     <label for="input-@screen-desktop">@screen-desktop</label>
     <input id="input-@screen-desktop" type="text" value="@screen-md-min" data-var="@screen-desktop" class="form-control"/>
+    <p class="help-block">Deprecated <code>@screen-desktop</code> as of v3.0.1</p>
   </div>
   <div class="bs-customizer-input">
     <label for="input-@screen-lg">@screen-lg</label>
     <input id="input-@screen-lg" type="text" value="1200px" data-var="@screen-lg" class="form-control"/>
+    <p class="help-block">Deprecated <code>@screen-lg</code> as of v3.0.1</p>
   </div>
   <div class="bs-customizer-input">
     <label for="input-@screen-lg-min">@screen-lg-min</label>
@@ -554,6 +563,7 @@
   <div class="bs-customizer-input">
     <label for="input-@screen-lg-desktop">@screen-lg-desktop</label>
     <input id="input-@screen-lg-desktop" type="text" value="@screen-lg-min" data-var="@screen-lg-desktop" class="form-control"/>
+    <p class="help-block">Deprecated <code>@screen-lg-desktop</code> as of v3.0.1</p>
   </div>
   <div class="bs-customizer-input">
     <label for="input-@screen-xs-max">@screen-xs-max</label>
diff --git a/less/variables.less b/less/variables.less
index a6d87f46e..a2e464b6e 100644
--- a/less/variables.less
+++ b/less/variables.less
@@ -236,7 +236,7 @@
 //** Text color for headers within dropdown menus.
 @dropdown-header-color:          @gray-light;
 
-// Note: Deprecated @dropdown-caret-color as of v3.1.0
+//** Deprecated `@dropdown-caret-color` as of v3.1.0
 @dropdown-caret-color:           #000;
 
 
@@ -261,28 +261,32 @@
 //## Define the breakpoints at which your layout will change, adapting to different screen sizes.
 
 // Extra small screen / phone
-// Note: Deprecated @screen-xs and @screen-phone as of v3.0.1
-// Note: Deprecated @screen-xs-min as of v3.2.0
+//** Deprecated `@screen-xs` as of v3.0.1
 @screen-xs:                  480px;
+//** Deprecated `@screen-xs-min` as of v3.2.0
 @screen-xs-min:              @screen-xs;
+//** Deprecated `@screen-phone` as of v3.0.1
 @screen-phone:               @screen-xs-min;
 
 // Small screen / tablet
-// Note: Deprecated @screen-sm and @screen-tablet as of v3.0.1
+//** Deprecated `@screen-sm` as of v3.0.1
 @screen-sm:                  768px;
 @screen-sm-min:              @screen-sm;
+//** Deprecated `@screen-tablet` as of v3.0.1
 @screen-tablet:              @screen-sm-min;
 
 // Medium screen / desktop
-// Note: Deprecated @screen-md and @screen-desktop as of v3.0.1
+//** Deprecated `@screen-md` as of v3.0.1
 @screen-md:                  992px;
 @screen-md-min:              @screen-md;
+//** Deprecated `@screen-desktop` as of v3.0.1
 @screen-desktop:             @screen-md-min;
 
 // Large screen / wide desktop
-// Note: Deprecated @screen-lg and @screen-lg-desktop as of v3.0.1
+//** Deprecated `@screen-lg` as of v3.0.1
 @screen-lg:                  1200px;
 @screen-lg-min:              @screen-lg;
+//** Deprecated `@screen-lg-desktop` as of v3.0.1
 @screen-lg-desktop:          @screen-lg-min;
 
 // So media queries don't overlap when required, provide a maximum