@@ -185,8 +185,8 @@ <h1 class="fsa-m-t--none">Hello FPAC Design System</h1>
185185</ label >
186186< label class ="fsa-p-l--xs "for ="boilerplate-toggle--fullscreen "> Fullscreen Template</ label >
187187</ div >
188- < div class ="fsa-m-b--s fsa-m-b--none@m "> < a class ="fsa-btn fsa-btn--secondary fsa-btn--block "target ="_blank "href ="https://codepen.io/pen?template=WNQdJpp "> Open in CodePen</ a > </ div >
189- < div class ="fsa-m-b--s fsa-m-b--none@m "> < a class ="fsa-btn fsa-btn--secondary fsa-btn--block "target ="_blank "href ="https://johnpolacek.github.io/Responsivator/?site=usda-fsa.github.io%2Ffsa-style%2Fboilerplate.html "> Open in Responsivator</ a > </ div >
188+ < div class ="fsa-m-b--s fsa-m-b--none@m "> < a class ="fsa-btn fsa-btn--secondary fsa-btn--fill "target ="_blank "href ="https://codepen.io/pen?template=WNQdJpp "> Open in CodePen</ a > </ div >
189+ < div class ="fsa-m-b--s fsa-m-b--none@m "> < a class ="fsa-btn fsa-btn--secondary fsa-btn--fill "target ="_blank "href ="https://johnpolacek.github.io/Responsivator/?site=usda-fsa.github.io%2Ffsa-style%2Fboilerplate.html "> Open in Responsivator</ a > </ div >
190190</ div >
191191</ div >
192192</ div >
@@ -245,16 +245,16 @@ <h1 class="fsa-m-t--none">Hello FPAC Design System</h1>
245245
246246< div class ="fsa-level@l fsa-level--justify-between fsa-level--align-bottom ">
247247< div class ="fsa-level fsa-level--grow-auto fsa-m-b--s fsa-m-b--none@l ">
248- < div > < button class ="fsa-btn fsa-btn--secondary fsa-btn--block fsa-btn--small "data-behavior ="open-modal "aria-controls ="demo-edit-inspection "aria-expanded ="false "type ="button "> < svg class ="fsa-icon fsa-icon--size-1 "aria-hidden ="true "focusable ="false "role ="img "xmlns ="http://www.w3.org/2000/svg "width ="24 "height ="24 "viewBox ="0 0 24 24 "> < path d ="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z "/> </ svg > < span class ="fsa-sr-only@xs-only "> Edit</ span > </ button > </ div >
249- < div > < button class ="fsa-btn fsa-btn--secondary fsa-btn--block fsa-btn--small "data-behavior ="growl-show whiteout-show "aria-controls ="demo-delete-prompt "aria-expanded ="false "type ="button "> < svg class ="fsa-icon fsa-icon--size-1 "aria-hidden ="true "focusable ="false "role ="img "xmlns ="http://www.w3.org/2000/svg "width ="24 "height ="24 "viewBox ="0 0 24 24 "> < path d ="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z "/> </ svg > < span class ="fsa-sr-only@xs-only "> Delete</ span > </ button > </ div >
250- < div > < button class ="fsa-btn fsa-btn--secondary fsa-btn--block fsa-btn--small "data-behavior ="open-modal "aria-controls ="demo-assign-modal "aria-expanded ="false "type ="button "> < svg class ="fsa-icon fsa-icon--size-1 "aria-hidden ="true "focusable ="false "role ="img "xmlns ="http://www.w3.org/2000/svg "width ="24 "height ="24 "viewBox ="0 0 24 24 "> < path d ="M19 3h-4.18C14.4 1.84 13.3 1 12 1c-1.3 0-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm0 4c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm6 12H6v-1.4c0-2 4-3.1 6-3.1s6 1.1 6 3.1V19z "/> </ svg > < span class ="fsa-sr-only@xs-only "> Assign</ span > </ button > </ div >
251- < div > < button class ="fsa-btn fsa-btn--secondary fsa-btn--block fsa-btn--small "type ="button "> < svg class ="fsa-icon fsa-icon--size-1 "aria-hidden ="true "focusable ="false "role ="img "xmlns ="http://www.w3.org/2000/svg "width ="24 "height ="24 "viewBox ="0 0 24 24 "> < path d ="M20 6h-8l-2-2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm-6 12v-3h-4v-4h4V8l5 5-5 5z "/> </ svg > < span class ="fsa-sr-only@xs-only "> Move</ span > </ button > </ div >
252- < div > < button class ="fsa-btn fsa-btn--secondary fsa-btn--block fsa-btn--small "type ="button "> < svg class ="fsa-icon fsa-icon--size-1 "aria-hidden ="true "focusable ="false "role ="img "xmlns ="http://www.w3.org/2000/svg "width ="24 "height ="24 "viewBox ="0 0 24 24 "> < path d ="M17.63 5.84C17.27 5.33 16.67 5 16 5L5 5.01C3.9 5.01 3 5.9 3 7v10c0 1.1.9 1.99 2 1.99L16 19c.67 0 1.27-.33 1.63-.84L22 12l-4.37-6.16z "/> </ svg > < span class ="fsa-sr-only@xs-only "> Status</ span > </ button > </ div >
248+ < div > < button class ="fsa-btn fsa-btn--secondary fsa-btn--fill fsa-btn--small "data-behavior ="open-modal "aria-controls ="demo-edit-inspection "aria-expanded ="false "type ="button "> < svg class ="fsa-icon fsa-icon--size-1 "aria-hidden ="true "focusable ="false "role ="img "xmlns ="http://www.w3.org/2000/svg "width ="24 "height ="24 "viewBox ="0 0 24 24 "> < path d ="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z "/> </ svg > < span class ="fsa-sr-only@xs-only "> Edit</ span > </ button > </ div >
249+ < div > < button class ="fsa-btn fsa-btn--secondary fsa-btn--fill fsa-btn--small "data-behavior ="growl-show whiteout-show "aria-controls ="demo-delete-prompt "aria-expanded ="false "type ="button "> < svg class ="fsa-icon fsa-icon--size-1 "aria-hidden ="true "focusable ="false "role ="img "xmlns ="http://www.w3.org/2000/svg "width ="24 "height ="24 "viewBox ="0 0 24 24 "> < path d ="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z "/> </ svg > < span class ="fsa-sr-only@xs-only "> Delete</ span > </ button > </ div >
250+ < div > < button class ="fsa-btn fsa-btn--secondary fsa-btn--fill fsa-btn--small "data-behavior ="open-modal "aria-controls ="demo-assign-modal "aria-expanded ="false "type ="button "> < svg class ="fsa-icon fsa-icon--size-1 "aria-hidden ="true "focusable ="false "role ="img "xmlns ="http://www.w3.org/2000/svg "width ="24 "height ="24 "viewBox ="0 0 24 24 "> < path d ="M19 3h-4.18C14.4 1.84 13.3 1 12 1c-1.3 0-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm0 4c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm6 12H6v-1.4c0-2 4-3.1 6-3.1s6 1.1 6 3.1V19z "/> </ svg > < span class ="fsa-sr-only@xs-only "> Assign</ span > </ button > </ div >
251+ < div > < button class ="fsa-btn fsa-btn--secondary fsa-btn--fill fsa-btn--small "type ="button "> < svg class ="fsa-icon fsa-icon--size-1 "aria-hidden ="true "focusable ="false "role ="img "xmlns ="http://www.w3.org/2000/svg "width ="24 "height ="24 "viewBox ="0 0 24 24 "> < path d ="M20 6h-8l-2-2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm-6 12v-3h-4v-4h4V8l5 5-5 5z "/> </ svg > < span class ="fsa-sr-only@xs-only "> Move</ span > </ button > </ div >
252+ < div > < button class ="fsa-btn fsa-btn--secondary fsa-btn--fill fsa-btn--small "type ="button "> < svg class ="fsa-icon fsa-icon--size-1 "aria-hidden ="true "focusable ="false "role ="img "xmlns ="http://www.w3.org/2000/svg "width ="24 "height ="24 "viewBox ="0 0 24 24 "> < path d ="M17.63 5.84C17.27 5.33 16.67 5 16 5L5 5.01C3.9 5.01 3 5.9 3 7v10c0 1.1.9 1.99 2 1.99L16 19c.67 0 1.27-.33 1.63-.84L22 12l-4.37-6.16z "/> </ svg > < span class ="fsa-sr-only@xs-only "> Status</ span > </ button > </ div >
253253</ div >
254254< div class ="fsa-show@m fsa-level fsa-level--grow-auto ">
255255< span >
256256< span class ="fsa-sr-only "id ="lorem_view-as "> View as</ span >
257- < span class ="fsa-btn-group fsa-btn-group--small fsa-btn-group--block "role ="group "aria-labeledby ="lorem_view-as ">
257+ < span class ="fsa-btn-group fsa-btn-group--small fsa-btn-group--fill "role ="group "aria-labeledby ="lorem_view-as ">
258258< button class ="fsa-btn-group__item fsa-btn-group__item--active "type ="button "title ="View by List "aria-selected ="true ">
259259< svg class ="fsa-icon fsa-icon--size-1 "aria-hidden ="true "focusable ="false "role ="img "fill ="#494440 "xmlns ="http://www.w3.org/2000/svg "width ="24 "height ="24 "viewBox ="0 0 24 24 "> < path d ="M4 14h4v-4H4v4zm0 5h4v-4H4v4zM4 9h4V5H4v4zm5 5h12v-4H9v4zm0 5h12v-4H9v4zM9 5v4h12V5H9z "> </ path > </ svg >
260260< span class ="fsa-sr-only "> View by List</ span >
@@ -267,7 +267,7 @@ <h1 class="fsa-m-t--none">Hello FPAC Design System</h1>
267267</ span >
268268< span >
269269< span class ="fsa-sr-only "id ="lorem_timeframe "> Timeframe</ span >
270- < span class ="fsa-btn-group fsa-btn-group--small fsa-btn-group--block "role ="group "aria-labeledby ="lorem_timeframe ">
270+ < span class ="fsa-btn-group fsa-btn-group--small fsa-btn-group--fill "role ="group "aria-labeledby ="lorem_timeframe ">
271271< button class ="fsa-btn-group__item "type ="button "> Today</ button >
272272< button class ="fsa-btn-group__item "type ="button "> This Week</ button >
273273< button class ="fsa-btn-group__item fsa-btn-group__item--active "type ="button "> This Year</ button >
@@ -524,7 +524,7 @@ <h1 class="fsa-m-t--none">Hello FPAC Design System</h1>
524524
525525< div class ="fsa-stepped-control fsa-stepped-control--sticky ">
526526< div class ="fsa-stepped-control__bd ">
527- < div class ="fsa-stepped-control__message fsa-stepped-control__message--block "role ="status ">
527+ < div class ="fsa-stepped-control__message fsa-stepped-control__message--fill "role ="status ">
528528< strong > 5</ strong > of< strong > 10</ strong > Commodities are complete
529529</ div >
530530< div class ="fsa-stepped-control__list ">
@@ -654,7 +654,7 @@ <h2 class="fsa-text--h3 fsa-m-t--none">Brandon Christopher Reuben</h2>
654654< li > < a href ="preferences.html "> Link</ a > </ li >
655655< li > < a href ="preferences.html "> Another useful link</ a > </ li >
656656</ ul >
657- < a class ="fsa-btn fsa-btn--primary fsa-btn--block "href ="link.html ">
657+ < a class ="fsa-btn fsa-btn--primary fsa-btn--fill "href ="link.html ">
658658< svg class ="fsa-icon fsa-icon--size-1 "aria-hidden ="true "focusable ="false "role ="img "xmlns ="http://www.w3.org/2000/svg "viewBox ="0 0 24 24 "> < path d ="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z "> </ path > </ svg >
659659 Log out
660660</ a >
@@ -895,7 +895,7 @@ <h1 class="fsa-modal__title">Inspection 06</h1>
895895</ div >
896896< div class ="fsa-field ">
897897< label class ="fsa-field__label "for ="lorem-778suffixs459 "> Lot Size</ label >
898- < span class ="fsa-affix fsa-affix--block ">
898+ < span class ="fsa-affix fsa-affix--fill ">
899899< input class ="fsa-input fsa-field__item fsa-affix__item "id ="lorem-778suffixs459 "name ="lorem-778suffixs459 "type ="text "value =""aria-required ="true "aria-describedby ="lorem-778suffixs459_help ">
900900< label for ="lorem-778suffixs459 "class ="fsa-affix__suffix "aria-hidden ="true "title ="Dollars "> acres</ label >
901901</ span >