feat: API reference feedback form new stencil applide

_buildApi/BuildAPI/docfx-tmpl/src/partials/feedback.tmpl.partial

@@ -1,36 +1,36 @@
 <div class="row feedback-row">
+  <input id="hidden-sheet-id" type="hidden" value="{{site.ff-sheet-id}}">
   <div class="col-sm-8 col-sm-offset-4 col-md-offset-3 col-lg-8 col-lg-offset-2">
     <div class="row">
       <div class="col-md-10 col-md-offset-1">
         <div class="row feedback">
           <div class="feedback-question">
             <div class="col-xs-8">
-              <h4>Was this article helpful?</h4>
+              <h3>Was this article helpful?</h3>
             </div>
             <div class="col-xs-4 text-right">
               <button class="feedback-vote-button">Yes</button>
-              &nbsp;/&nbsp;
               <button class="feedback-vote-button feedback-no-button">No</button>
             </div>
             <div class="close-button-container">
               <svg version="1.1"  xmlns="http://www.w3.org/2000/svg"
-                xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="16px" height="16px"
-                viewBox="0 0 16 16" enable-background="new 0 0 16 16" xml:space="preserve">
-                <path fill="#FFFFFF"
+                xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="20px" height="20px"
+                viewBox="0 0 20 20" enable-background="new 0 0 20 20" xml:space="preserve">
+                <path fill="#1f1f1f"
                   d="M8.7,8l6.1,6.1l-0.7,0.7L8,8.7l-6.1,6.1l-0.7-0.7L7.3,8L1.2,1.9l0.7-0.7L8,7.3l6.1-6.1l0.7,0.7L8.7,8z" />
               </svg></div>
           </div>
 
           <div class="feedback-more-info">
             <div class="row">
-              <span>Tell us how we can improve this article</span>
+              <h4>Tell us how we can improve this article</h4>
             </div>
             <div class="row">
               <textarea id="feedback-other-text-input" class="feedback-other-text-input"
                 placeholder="Please let us know how we can improve this page. (Optional)"></textarea>
             </div>
             <div class="row">
-              <button type="submit" class="feedback-ab-submit-button feedback-send-data-button">Submit</button>
+              <button type="submit" class="feedback-ab-submit-button feedback-send-data-button feedback-button feedback-button-secondary feedback-button-md">Submit</button>
               <span class="feedback-skip-button feedback-send-data-button">Skip</span>
             </div>
           </div>
@@ -39,3 +39,4 @@
     </div>
   </div>
 </div>
+

_buildApi/BuildAPI/docfx-tmpl/src/partials/head.tmpl.partial

@@ -12,6 +12,7 @@
   <link rel="stylesheet" href="{{_rel}}styles/docfx.css">
   <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Mono|Roboto:300,400,500,700" />
   <link rel="stylesheet" href="{{_rel}}styles/main.css">
+  <link rel="stylesheet" href="{{_rel}}styles/feedback.css">
  
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
   <script src="https://cdn.cookielaw.org/scripttemplates/otSDKStub.js" data-language="en" type="text/javascript" charset="UTF-8" data-domain-script="3dfce4f2-dab6-4128-9f33-df7e0597da82"></script>

_buildApi/BuildAPI/docfx-tmpl/src/styles/docfx.css

@@ -1021,7 +1021,7 @@ div.embeddedvideo iframe {
   }
 }
 
-
 div.subnav {
   display: none !important;
 }
+

_buildApi/BuildAPI/docfx-tmpl/src/styles/feedback.css

@@ -0,0 +1 @@
+.feedback-row .feedback-button{display:inline-block;border-radius:2px;text-align:center;cursor:pointer;text-decoration:none;border-width:2px;border-style:solid;-webkit-transition:color .2s ease,background-color .2s ease,border-color .2s ease;transition:color .2s ease,background-color .2s ease,border-color .2s ease}.feedback-row .feedback-button-md{padding:5px 24px;font-weight:400;font-size:19px;line-height:32px}.feedback-row .feedback-button-sm{padding:6.5px 17px;font-weight:500;font-size:13px;line-height:1;letter-spacing:.13px}.feedback-row .feedback-button-secondary{background-color:#2e64d6;color:#fff;border-color:transparent}.feedback-row .feedback-button-secondary:hover{background-color:#2456be;color:#fff}.feedback-row .feedback-no-button{margin-left:20px}.feedback-row .feedback-vote-button{display:inline-block;border-radius:2px;text-align:center;cursor:pointer;text-decoration:none;border-width:2px;border-style:solid;-webkit-transition:color .2s ease,background-color .2s ease,border-color .2s ease;transition:color .2s ease,background-color .2s ease,border-color .2s ease;padding:5px 24px;font-weight:400;font-size:19px;line-height:32px;background-color:#2e64d6;color:#fff;border-color:transparent}.feedback-row .feedback-vote-button:hover{background-color:#2456be;color:#fff}.feedback-row .close-button-container{display:none;position:fixed;bottom:10px;right:16px;padding:8px}.feedback-row .close-button-container:hover{cursor:pointer}.feedback-row.vote-disabled{display:none}.feedback-row.vote-hide{-webkit-animation-name:hideFeedback;animation-name:hideFeedback;-webkit-animation-duration:.2s;animation-duration:.2s;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}@-webkit-keyframes hideFeedback{from{opacity:1}to{opacity:0}}@keyframes hideFeedback{from{opacity:1}to{opacity:0}}.feedback-row.feedback-fixed{position:fixed;left:0;bottom:0;width:100%;margin:0;z-index:1100;background-color:#e7ebf5}.feedback-row.feedback-fixed .close-button-container{display:block}.feedback-row h3{color:#1f1f1f!important;margin:5px 0;font-weight:500}.feedback-row h4{color:#1f1f1f!important}.feedback-row button{display:inline-block;text-decoration:none;text-transform:uppercase;background:0 0;border:none;color:#f1f1f1;cursor:pointer;-webkit-transition-property:background-color,color;transition-property:background-color,color;-webkit-transition-duration:.2s;transition-duration:.2s;-webkit-transition-timing-function:ease;transition-timing-function:ease}.feedback-row button:active,.feedback-row button:focus,.feedback-row button:hover,.feedback-row button:visited{color:#fff;outline:0}.feedback-row div.feedback>div{line-height:23px}