@wikimedia/wvui/dist/wvui.css.map

Wikimedia Vue UI (WVUI) – Wikimedia Foundation's Vue.js shared user-interface components for Wikipedia, MediaWiki, and beyond.

{"version":3,"sources":["webpack://src/components/button/Button.vue","webpack://src/components/checkbox/Checkbox.vue","webpack://src/themes/mixins/binary-input.less","webpack://src/components/icon/Icon.vue","webpack://src/components/options-menu/OptionsMenu.vue","webpack://src/components/dropdown/Dropdown.vue","webpack://src/components/input/Input.vue","webpack://src/components/progress-bar/ProgressBar.vue","webpack://src/components/radio/Radio.vue","webpack://src/components/toggle-button/ToggleButton.vue","webpack://src/components/typeahead-suggestion-title/TypeaheadSuggestionTitle.vue","webpack://src/components/typeahead-suggestion/TypeaheadSuggestion.vue","webpack://src/components/typeahead-search/TypeaheadSearch.vue"],"names":[],"mappings":"AAkEA,aACC,qBAAA,CAEA,cAAA,CACA,eAAA,CACA,iBAAA,CAEA,QAAA,CACA,gBAAA,CACA,kBAAA,CACA,iBAAA,CACA,kBAAA,CACA,iBAAA,CAEA,gBAAA,CAGA,mBAAA,CAEA,iBAAA,CACA,eAAA,CAEA,mBAAA,CAEA,kBAAA,CACA,0EAAA,CAAA,kEAAA,CACA,+BAAA,CAAA,uBAzED,CA4EC,+BACC,QAAA,CACA,SA1EF,CA6EC,mBAEC,SA5EF,CA+EC,6BACC,aAAA,CAGA,cA/EF,CAiFE,mCACC,iBAAA,CACA,+BAAA,CAEA,6BAhFH,CAmFE,oCACC,wBAAA,CACA,UAAA,CACA,eAjFH,CAqFC,uBACC,wBAnFF,CAuBA,wBAmEE,aAvFF,CA6FC,qCACC,wBAAA,CACA,oBA3FF,CA6FE,2CACC,qBAAA,CACA,aA3FH,CA8FE,4CACC,wBAAA,CACA,UAAA,CACA,oBA5FH,CAgGC,+BACC,wBAAA,CACA,UA9FF,CAoGC,2EACC,qBAAA,CACA,UAAA,CACA,iBAlGF,CAoGE,iFACC,wBAAA,CACA,oBAlGH,CAqGE,iFACC,qBAAA,CACA,iBAAA,CACA,oDAnGH,CAsGE,kFACC,wBAAA,CACA,oBAAA,CAEA,eArGH,CA0GC,2EACC,qBAAA,CACA,UAAA,CACA,iBAxGF,CA0GE,iFACC,wBAAA,CACA,oBAxGH,CA2GE,iFACC,qBAAA,CACA,iBAAA,CACA,oDAzGH,CA4GE,kFACC,wBAAA,CACA,oBAAA,CAEA,eA3GH,CAkHC,0EACC,UAhHF,CAkHE,gFACC,aAAA,CACA,oBAhHH,CAmHE,gFACC,UAAA,CACA,iBAAA,CACA,oDAjHH,CAoHE,iFACC,wBAAA,CACA,aAAA,CACA,oBAAA,CAEA,eAnHH,CAwHC,0EACC,UAtHF,CAwHE,gFACC,aAAA,CACA,oBAtHH,CAyHE,gFACC,UAAA,CACA,iBAAA,CACA,oDAvHH,CA0HE,iFACC,qBAAA,CACA,aAAA,CACA,oBAAA,CAEA,eAzHH,CA+HA,yBACC,4BAAA,CACA,wBA7HD,CAgIE,+CACC,wCA9HH,CAiIE,+CACC,iBAAA,CACA,oDA/HH,CAkIE,gDACC,wCAAA,CACA,oBAAA,CACA,eAhIH,CAqIC,yEACC,UAnIF,CAqIE,+EAEC,oCAAA,CACA,aApIH,CAuIE,+EACC,UAAA,CACA,iBAAA,CACA,oDArIH,CAwIE,gFACC,wBAAA,CACA,UAAA,CACA,oBAAA,CACA,eAtIH,CA2IC,yEACC,UAzIF,CA2IE,+EAEC,mCAAA,CACA,aA1IH,CA6IE,+EACC,UAAA,CACA,iBAAA,CACA,oDA3IH,CA8IE,gFACC,wBAAA,CACA,UAAA,CACA,oBAAA,CACA,eA5IH,CAgJC,mCACC,aA9IF,CC7BA,eC/JC,iBAAA,CAEA,SAAA,CACA,wBAAA,CACA,cDHD,CCKC,8BAEC,oBAAA,CACA,yBDJF,CCOC,2CACC,aAAA,CAGA,kBDPF,CCSE,sDACC,eDPH,CCWC,uBAGC,iBAAA,CAEA,kBDZF,CCcE,kCACC,cDZH,CCIC,oDAcE,cDfH,CCmBC,mCACC,cDjBF,CCqBC,qBACC,qBAAA,CAGA,qBAAA,CAGA,wBDnBF,CCuBC,2CATC,iBAAA,CACA,MAAA,CAEA,kBAAA,CACA,mBDPF,CCYC,sBAEC,SAAA,CAIA,SAAA,CAIA,QAAA,CACA,iBAAA,CACA,cDxBF,CAsHC,qBAEC,mBAAA,CACA,iBAAA,CACA,oEAAA,CAAA,4DAAA,CACA,+BAAA,CAAA,uBArHF,CA6HE,iDACC,iBAAA,CACA,+BAAA,CAEA,6BA5HH,CA+HE,iDACC,oBA7HH,CAiIG,gEACC,WAAA,CACA,qBAAA,CACA,iBAAA,CACA,OAAA,CACA,iBAAA,CACA,gBAAA,CACA,UAAA,CACA,eA/HJ,CAqIE,mDAKC,+OAAA,CACA,uBAAA,CACA,2BAAA,CAIA,uBA1IH,CA8IG,oDACC,wBAAA,CACA,oBAAA,CACA,eA5IJ,CA+IG,6DACC,aA7IJ,CAmJG,4HACC,qBAAA,CACA,iBAhJJ,CAmJG,wIACC,qBAAA,CACA,iBAAA,CACA,oDAhJJ,CAmJG,wIACC,wBAAA,CACA,oBAhJJ,CA6JE,0JACC,wBAAA,CACA,oBAAA,CACA,kCAtJH,CErBA,WAEC,aAAA,CAGA,0BAAA,CAAA,mBAAA,CACA,wBAAA,CAAA,kBAAA,CACA,uBAAA,CAAA,sBAAA,CAEA,qBA9FD,CAkGA,uCACC,4BAAA,CAAA,oBAhGD,CCsOA,mBACC,qBAAA,CACA,qBAAA,CACA,QAAA,CACA,wBAAA,CACA,yBAAA,CACA,SA/OD,CAiPC,yBACC,aAAA,CACA,eAAA,CACA,gBAAA,CACA,eAAA,CACA,wBAAA,CACA,sBAAA,CACA,kBAAA,CACA,kDAAA,CAAA,0CAAA,CACA,+BAAA,CAAA,uBA/OF,CAiPE,kCACC,cA/OH,CAiPG,wCACC,wBA/OJ,CAmPE,wEAEC,wBAAA,CACA,UAjPH,CAoPE,sCACC,wBAlPH,CAqPE,4EAEC,wBAnPH,CAsPE,mEACC,UApPH,CAuPE,mCACC,aAAA,CACA,cArPH,CCkLA,eACC,oBAAA,CACA,iBAAA,CACA,eA5ND,CA8NC,0BACC,aAAA,CACA,iBAAA,CAIA,OAAA,CACA,kCAAA,CAAA,0BAAA,CACA,UAAA,CACA,iCAAA,CAAA,yBAAA,CACA,+BAAA,CAAA,uBA/NF,CAqNC,8BAaE,iBAAA,CACA,kBA/NH,CAmOC,uBACC,wBAAA,CACA,aAAA,CACA,iBAAA,CACA,qBAAA,CACA,uBAAA,CACA,UAAA,CACA,wBAAA,CACA,iBAAA,CAGA,0CAAA,CAIA,wBAAA,CACA,0EAAA,CAAA,kEAAA,CACA,+BAAA,CAAA,uBAAA,CACA,cAtOF,CAwOE,6BACC,qBAAA,CACA,aAAA,CACA,oBAtOH,CAmOE,uDAME,aAtOJ,CA0OE,6BACC,iBAAA,CACA,oDAAA,CACA,SAxOH,CA2OE,8BACC,UAAA,CACA,oBAzOH,CA6OC,qBACC,iBAAA,CACA,MAAA,CACA,SAAA,CACA,UAAA,CACA,eA3OF,CA8OC,4CAEE,qBA7OH,CA+OG,4EACC,aA7OJ,CAkPC,gDAEE,wBAAA,CACA,aAAA,CACA,oBAAA,CACA,0BAAA,CACA,cAjPH,CA2OC,mIAeE,aApPH,CCyEA,YACC,iBAAA,CACA,qBAnJD,CAqJC,8CAEC,aAAA,CACA,iBAAA,CACA,KAAA,CACA,eAAA,CACA,WAnJF,CAsJC,wBACC,QAAA,CACA,UAAA,CACA,mBApJF,CAuJC,sBACC,SAAA,CACA,UArJF,CAwJC,6CAEE,2BAAA,CACA,cAvJH,CAoJC,iDAOG,iBAxJJ,CA6JC,mBACC,aAAA,CACA,qBAAA,CACA,UAAA,CACA,mBAAA,CACA,QAAA,CACA,gBAAA,CACA,kBAAA,CACA,iBAAA,CACA,eAAA,CACA,mBAAA,CACA,iBAAA,CACA,wBA3JF,CA6JE,mCACC,qBAAA,CACA,UAAA,CACA,oBAAA,CACA,sCAAA,CACA,mDAAA,CAAA,2CAAA,CACA,gCAAA,CAAA,wBA3JH,CA6JG,yCACC,oBA3JJ,CA8JG,yCACC,iBAAA,CACA,+BAAA,CACA,SA5JJ,CA+JG,gIAEC,SA7JJ,CAiKE,6BACC,wBAAA,CACA,aAAA,CACA,+BAAA,CACA,oBAAA,CACA,0BA/JH,CAkKG,wGAEC,WAAA,CACA,mBAhKJ,CAqKE,8CACC,aAAA,CACA,SAnKH,CAiKE,yCACC,aAAA,CACA,SAnKH,CAiKE,gCACC,aAAA,CACA,SAnKH,CAwKE,8BACC,YAtKH,CAyKE,gCAKC,uBAAA,CAGA,yBAzKH,CA+KG,yHAEC,YA7KJ,CAkLC,+CAGE,iBAlLH,CAsLC,6CAGE,kBAtLH,CCrEA,mBACC,qBAAA,CACA,qBAAA,CACA,cAAA,CACA,wBAAA,CACA,kBAAA,CACA,sCAAA,CACA,iBA5BD,CA8BC,wBACC,qBAAA,CACA,SAAA,CACA,mBAAA,CACA,kEAAA,CAAA,0DA5BF,CAgCA,iDACC,GACC,kCAAA,CAAA,0BA9BA,CAiCD,GACC,iCAAA,CAAA,yBA/BA,CACF,CAwBA,yCACC,GACC,kCAAA,CAAA,0BA9BA,CAiCD,GACC,iCAAA,CAAA,yBA/BA,CACF,CCgHA,YNlIC,iBAAA,CAEA,SAAA,CACA,wBAAA,CACA,cMDD,CNGC,2BAEC,oBAAA,CACA,yBMFF,CNKC,qCACC,aAAA,CAGA,kBMLF,CNOE,gDACC,eMLH,CNSC,oBAGC,iBAAA,CAEA,kBMVF,CNYE,+BACC,cMVH,CNEC,iDAcE,cMbH,CNiBC,gCACC,cMfF,CNmBC,kBACC,qBAAA,CAGA,qBAAA,CAGA,wBMjBF,CNqBC,qCATC,iBAAA,CACA,MAAA,CAEA,kBAAA,CACA,mBMLF,CNUC,mBAEC,SAAA,CAIA,SAAA,CAIA,QAAA,CACA,iBAAA,CACA,cMtBF,CAwFC,kBACC,iBAAA,CACA,sEAAA,CAAA,8DAAA,CACA,+BAAA,CAAA,uBAtFF,CAyFE,yBACC,WAAA,CACA,iBAAA,CAGA,QAAA,CACA,UAAA,CACA,WAAA,CACA,SAAA,CACA,4BAAA,CACA,iBAzFH,CAqGG,8GAEC,oBAnGJ,CAsGG,qDACC,wBAAA,CACA,iBApGJ,CAwGI,kEACC,iBAtGL,CA4GG,uDACC,aA1GJ,CA6GG,8CACC,wBAAA,CACA,oBA3GJ,CA8GG,sDACC,qBAAA,CACA,wBA5GJ,CAoHE,gEACC,wBAAA,CACA,oBAlHH,CAqHE,wEACC,qBAAA,CACA,oBAnHH,CAqHG,+EACC,oBAnHJ,CCtCA,oBACC,qBAAA,CAEA,cAAA,CACA,eAAA,CACA,iBAAA,CAEA,QAAA,CACA,gBAAA,CACA,kBAAA,CACA,iBAAA,CACA,kBAAA,CACA,iBAAA,CAEA,gBAAA,CAGA,mBAAA,CAEA,iBAAA,CACA,eAAA,CAEA,mBAAA,CAEA,kBAAA,CACA,iFAAA,CAAA,yEApED,CAuEC,sCACC,QAAA,CACA,SArEF,CAwEC,0BAEC,SAvEF,CA0EC,oCACC,wBAAA,CACA,aAAA,CACA,oBAAA,CAGA,cA1EF,CA4EE,0CACC,iBAAA,CACA,+BAAA,CAEA,6BA3EH,CA8EE,0CACC,qBAAA,CACA,aA5EH,CA+EE,2CACC,wBAAA,CACA,UAAA,CACA,oBAAA,CACA,eA7EH,CAiFC,8BACC,wBAAA,CACA,UAAA,CACA,oBA/EF,CAkFC,qCAGC,wBAlFF,CAqFC,4CACC,wBAAA,CACA,UAAA,CACA,oBAnFF,CAqFE,kDACC,iBAAA,CACA,oDAnFH,CAsFE,kDAGC,wBAAA,CACA,UAtFH,CClBA,kCACC,aAAA,CACA,aAAA,CACA,cAAA,CACA,sBAAA,CACA,eAhDD,CAmDA,kCACC,eAjDD,CC4HA,2BAEC,mBAAA,CAAA,YAAA,CACA,wBAAA,CAAA,kBAAA,CACA,gBAAA,CACA,oBAAA,CAEA,oBAAA,CAAA,gBAAA,CAAA,YAAA,CAGA,qBAAA,CAKA,oBA5ID,CAgJC,mCACC,wBA9IF,CAiJC,wFAEC,uBAAA,CACA,2BAAA,CAEA,qBAAA,CAEA,aAAA,CACA,kBAAA,CACA,mBAAA,CACA,iBAAA,CACA,iBAAA,CAIA,8BApJF,CA0JC,sCACC,oBAxJF,CA0JE,kDACC,wBAAA,CAEA,0BAAA,CAAA,mBAAA,CACA,wBAAA,CAAA,kBAAA,CACA,uBAAA,CAAA,sBAzJH,CA4JG,uDACC,aA1JJ,CA+JC,iCACC,eA7JF,CA4JC,yEAIE,aAAA,CACA,aAAA,CACA,eAAA,CACA,aAAA,CACA,sBAAA,CACA,kBA7JH,CCueA,uBAEC,qBAAA,CAGA,wBAAA,CACA,iBAvhBD,CAyhBC,6BAEC,mBAAA,CAAA,YAxhBF,CA2hBC,gCACC,kBAAA,CAAA,WAAA,CAEA,iBAAA,CAGA,WA5hBF,CA+hBC,+BACC,SAAA,CACA,iBAAA,CAGA,aAAA,CAKA,uBAAA,CACA,wBAAA,CACA,2BAAA,CACA,mCAAA,CAAA,2BAAA,CACA,+BAAA,CAAA,uBAniBF,CAqiBE,qCAEC,SApiBH,CAuiBE,qCACC,SAAA,CAGA,SAviBH,CA2iBC,oCACC,qBAAA,CACA,eAAA,CACA,YAAA,CACA,iBAAA,CACA,gBAAA,CACA,OAAA,CACA,MAAA,CACA,qBAAA,CACA,QAAA,CAEA,wBAAA,CAAA,0BAAA,CACA,yBAAA,CACA,SAAA,CACA,sCAziBF,CA4iBC,mCACC,iBA1iBF,CA6iBC,4CACC,aAAA,CAEA,mBAAA,CAAA,YAAA,CACA,wBAAA,CAAA,kBAAA,CACA,4BAAA,CACA,yBAAA,CAIA,oBAAA,CACA,cA/iBF,CAijBE,uGAEC,aA/iBH,CAkjBE,oDACC,wBAhjBH,CAmjBE,kDACC,aAAA,CAKA,UAAA,CACA,mBAAA,CACA,iBArjBH,CAwjBE,kDACC,sBAtjBH,CA4cA,0CA+GE,8BAxjBF,CA8jBC,qDAEE,2BA7jBH,CAikBC,0HAGE,SAhkBH,CA6jBC,wHASE,SAlkBH,CAyjBC,kGAaE,yBAAA,CACA,4BAlkBH,CAskBC,qEAEE,aArkBH,CA2lBE,qHACC,gBAzlBH,CA4lBE,qMAEC,aA1lBH,CAwlBE,2OAME,iBAAA,CAEA,mCA3lBJ,CAmlBE,qPAgBE,SAAA,CACA,kBA/lBJ,CAwjBC,6JAiDE,kBAAA,CACA,iBAlmBH,CAqmBG,yFAEC,aAAA,CACA,kBApmBJ,CAwmBG,yLAGC,oBAAA,CAAA,gBAAA,CAAA,YAAA,CAGA,qBAAA,CAKA,oBA7mBJ","file":"wvui.css","sourcesContent":["\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n@import ( reference ) '@/themes/wikimedia-ui.less';\n\n.wvui-button {\n\tbox-sizing: border-box;\n\t// Interactive elements have a minimum touch area.\n\tmin-width: @min-size-base;\n\tmin-height: @min-size-base;\n\tmax-width: @max-width-button;\n\t// Support Firefox, Safari: Normalize by removing the `margin`.\n\tmargin: 0;\n\tborder-width: @border-width-base;\n\tborder-style: @border-style-base;\n\tborder-radius: @border-radius-base;\n\tpadding-right: @padding-horizontal-base;\n\tpadding-left: @padding-horizontal-base;\n\t// Support IE 11: Normalize by showing `overflow`.\n\toverflow: visible;\n\t// Support all browsers: Normalize by inheriting `font-family`.\n\t// Initial value depends on user-agent.\n\tfont-family: inherit;\n\t// Support all browsers: Normalize by inheriting `font-size` over initial value of `none`.\n\tfont-size: inherit;\n\tfont-weight: bold;\n\t// Support Edge, Firefox, and IE: Normalize by removing the inheritance of `text-transform`.\n\ttext-transform: none;\n\t// Contents are single line.\n\twhite-space: nowrap;\n\ttransition-property: border-color, background-color, color, box-shadow;\n\ttransition-duration: @transition-base;\n\n\t// Support Firefox: Normalize by hiding the inner focus `border` and `padding`.\n\t&::-moz-focus-inner {\n\t\tborder: 0;\n\t\tpadding: 0;\n\t}\n\n\t&:focus {\n\t\t// Hide the standard focus outline. A border and box-shadow representation is added below.\n\t\toutline: 0;\n\t}\n\n\t&:not( [ disabled ] ) {\n\t\tcolor: @color-base;\n\t\t// Use hand cursor. This is nonstandard for a button but allows for a visible\n\t\t// interactivity distinction from the disabled state.\n\t\tcursor: pointer;\n\n\t\t&:focus {\n\t\t\tborder-color: @color-primary--focus;\n\t\t\tbox-shadow: @box-shadow-base--focus;\n\t\t\t// In Windows high contrast mode the outline becomes visible.\n\t\t\toutline: @outline-base--focus;\n\t\t}\n\n\t\t&:active {\n\t\t\tbackground-color: @background-color-framed--active;\n\t\t\tcolor: @color-base--emphasized;\n\t\t\tbox-shadow: none;\n\t\t}\n\t}\n\n\t&[ disabled ] {\n\t\tborder-color: transparent;\n\t}\n\n\t.wvui-icon {\n\t\t// Any icons used in the button content should have the color of the surrounding text\n\t\t// This overrides the color rule in Icon.vue, and ensures that the rules below changing the\n\t\t// text color for progressive and destructive buttons also apply to icons.\n\t\tcolor: inherit;\n\t}\n}\n\n// Non-quiet “framed” buttons (normal and primary types)\n.wvui-button--framed {\n\t&:not( [ disabled ] ) {\n\t\tbackground-color: @background-color-framed;\n\t\tborder-color: @border-color-base;\n\n\t\t&:hover {\n\t\t\tbackground-color: @background-color-framed--hover;\n\t\t\tcolor: @color-base--hover;\n\t\t}\n\n\t\t&:active {\n\t\t\tbackground-color: @background-color-framed--active;\n\t\t\tcolor: @color-base--active;\n\t\t\tborder-color: @border-color-base--active;\n\t\t}\n\t}\n\n\t&[ disabled ] {\n\t\tbackground-color: @background-color-filled--disabled;\n\t\tcolor: @color-filled--disabled;\n\t}\n}\n\n.wvui-button--type-primary {\n\t// Progressive primary buttons\n\t&.wvui-button--action-progressive:not( [ disabled ] ) {\n\t\tbackground-color: @color-primary;\n\t\tcolor: @color-base--inverted;\n\t\tborder-color: @color-primary;\n\n\t\t&:hover {\n\t\t\tbackground-color: @color-primary--hover;\n\t\t\tborder-color: @color-primary--hover;\n\t\t}\n\n\t\t&:focus {\n\t\t\tbackground-color: @color-primary--focus;\n\t\t\tborder-color: @color-primary--focus;\n\t\t\tbox-shadow: @box-shadow-primary--focus;\n\t\t}\n\n\t\t&:active {\n\t\t\tbackground-color: @color-primary--active;\n\t\t\tborder-color: @color-primary--active;\n\t\t\t// Reset `:focus` box shadow to amplify 'interaction' feeling when pressed.\n\t\t\tbox-shadow: none;\n\t\t}\n\t}\n\n\t// Destructive primary buttons\n\t&.wvui-button--action-destructive:not( [ disabled ] ) {\n\t\tbackground-color: @color-destructive;\n\t\tcolor: @color-base--inverted;\n\t\tborder-color: @color-destructive;\n\n\t\t&:hover {\n\t\t\tbackground-color: @color-destructive--hover;\n\t\t\tborder-color: @color-destructive--hover;\n\t\t}\n\n\t\t&:focus {\n\t\t\tbackground-color: @color-destructive--focus;\n\t\t\tborder-color: @color-destructive--focus;\n\t\t\tbox-shadow: @box-shadow-destructive--focus;\n\t\t}\n\n\t\t&:active {\n\t\t\tbackground-color: @color-destructive--active;\n\t\t\tborder-color: @color-destructive--active;\n\t\t\t// Reset `:focus` box shadow to amplify 'interaction' feeling when pressed.\n\t\t\tbox-shadow: none;\n\t\t}\n\t}\n}\n\n.wvui-button--type-normal {\n\t// Normal progressive buttons\n\t&.wvui-button--action-progressive:not( [ disabled ] ) {\n\t\tcolor: @color-primary;\n\n\t\t&:hover {\n\t\t\tcolor: @color-primary--hover;\n\t\t\tborder-color: @border-color-primary--hover;\n\t\t}\n\n\t\t&:focus {\n\t\t\tcolor: @color-primary--focus;\n\t\t\tborder-color: @border-color-primary--focus;\n\t\t\tbox-shadow: @box-shadow-primary--focus;\n\t\t}\n\n\t\t&:active {\n\t\t\tbackground-color: lighten( @color-primary--active, 60% );\n\t\t\tcolor: @color-primary--active;\n\t\t\tborder-color: @border-color-primary--active;\n\t\t\t// Reset `:focus` box shadow to amplify 'interaction' feeling when pressed.\n\t\t\tbox-shadow: none;\n\t\t}\n\t}\n\n\t// Normal destructive buttons\n\t&.wvui-button--action-destructive:not( [ disabled ] ) {\n\t\tcolor: @color-destructive;\n\n\t\t&:hover {\n\t\t\tcolor: @color-destructive--hover;\n\t\t\tborder-color: @border-color-destructive--hover;\n\t\t}\n\n\t\t&:focus {\n\t\t\tcolor: @color-destructive--focus;\n\t\t\tborder-color: @border-color-destructive--focus;\n\t\t\tbox-shadow: @box-shadow-destructive--focus;\n\t\t}\n\n\t\t&:active {\n\t\t\tbackground-color: lighten( @color-destructive--active, 60% );\n\t\t\tcolor: @color-destructive--active;\n\t\t\tborder-color: @border-color-destructive--active;\n\t\t\t// Reset `:focus` box shadow to amplify 'interaction' feeling when pressed.\n\t\t\tbox-shadow: none;\n\t\t}\n\t}\n}\n\n// Quiet buttons.\n.wvui-button--type-quiet {\n\tbackground-color: transparent;\n\tborder-color: transparent;\n\n\t&:not( [ disabled ] ) {\n\t\t&:hover {\n\t\t\tbackground-color: @background-color-quiet--hover;\n\t\t}\n\n\t\t&:focus {\n\t\t\tborder-color: @border-color-primary--focus;\n\t\t\tbox-shadow: @box-shadow-primary--focus;\n\t\t}\n\n\t\t&:active {\n\t\t\tbackground-color: @background-color-quiet--active;\n\t\t\tborder-color: @border-color-base--active;\n\t\t\tbox-shadow: none;\n\t\t}\n\t}\n\n\t// Progressive quiet buttons.\n\t&.wvui-button--action-progressive:not( [ disabled ] ) {\n\t\tcolor: @color-primary;\n\n\t\t&:hover {\n\t\t\t// FIXME @background-color-primary--hover exists but is a little lighter\n\t\t\tbackground-color: fade( #347bff, 20% );\n\t\t\tcolor: @color-primary--hover;\n\t\t}\n\n\t\t&:focus {\n\t\t\tcolor: @color-primary--focus;\n\t\t\tborder-color: @border-color-primary--focus;\n\t\t\tbox-shadow: @box-shadow-primary--focus;\n\t\t}\n\n\t\t&:active {\n\t\t\tbackground-color: @color-primary--active;\n\t\t\tcolor: @color-base--inverted;\n\t\t\tborder-color: @color-primary--active;\n\t\t\tbox-shadow: none;\n\t\t}\n\t}\n\n\t// Destructive quiet buttons.\n\t&.wvui-button--action-destructive:not( [ disabled ] ) {\n\t\tcolor: @color-destructive;\n\n\t\t&:hover {\n\t\t\t// FIXME @background-color-destructive--hover should exist but doesn't\n\t\t\tbackground-color: fade( #d11d13, 20% );\n\t\t\tcolor: @color-destructive--hover;\n\t\t}\n\n\t\t&:focus {\n\t\t\tcolor: @color-destructive--focus;\n\t\t\tborder-color: @border-color-destructive--focus;\n\t\t\tbox-shadow: @box-shadow-destructive--focus;\n\t\t}\n\n\t\t&:active {\n\t\t\tbackground-color: @color-destructive--active;\n\t\t\tcolor: @color-base--inverted;\n\t\t\tborder-color: @color-destructive--active;\n\t\t\tbox-shadow: none;\n\t\t}\n\t}\n\n\t&[ disabled ] {\n\t\tcolor: @color-base--disabled;\n\t}\n}\n","\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n@import ( reference ) '@/themes/wikimedia-ui.less';\n@import ( reference ) '@/themes/mixins/binary-input.less';\n\n.wvui-checkbox {\n\t.wvui-mixin-binary-input();\n\n\t// Custom-styled checkbox that's visible to the user.\n\t&__icon {\n\t\t// stylelint-disable-next-line plugin/no-unsupported-browser-features\n\t\tbackground-size: 0 0;\n\t\tborder-radius: @border-radius-base;\n\t\ttransition-property: background-color, border-color, box-shadow;\n\t\ttransition-duration: @transition-base;\n\t}\n\n\t// HTML `<input type=\"checkbox\">`.\n\t// Based on the HTML attributes of the checkbox input, we can change the\n\t// style of the adjacent span, which will look like a custom-styled\n\t// checkbox.\n\t&__input {\n\t\t&:focus + .wvui-checkbox__icon {\n\t\t\tborder-color: @border-color-input-binary--focus;\n\t\t\tbox-shadow: @box-shadow-input-binary--focus;\n\t\t\t// In Windows high contrast mode the outline becomes visible.\n\t\t\toutline: 1px solid transparent;\n\t\t}\n\n\t\t&:hover + .wvui-checkbox__icon {\n\t\t\tborder-color: @border-color-input-binary--hover;\n\t\t}\n\n\t\t&:indeterminate + .wvui-checkbox__icon {\n\t\t\t&:before {\n\t\t\t\tcontent: ' ';\n\t\t\t\tbackground-color: @color-base--inverted;\n\t\t\t\tposition: absolute;\n\t\t\t\ttop: 50%;\n\t\t\t\tright: @start-input-binary-icon;\n\t\t\t\tleft: @start-input-binary-icon;\n\t\t\t\theight: @border-width-base * 2;\n\t\t\t\tmargin-top: -@border-width-base;\n\t\t\t}\n\t\t}\n\n\t\t// Styles for the checked checkbox that apply whether or not the input\n\t\t// is enabled or disabled.\n\t\t&:checked + .wvui-checkbox__icon {\n\t\t\t// TODO: temporary workaround for check icon SVG. This should be\n\t\t\t// updated once we have a more permanent location and format for\n\t\t\t// icon SVGs (see https://phabricator.wikimedia.org/T282625).\n\t\t\t// stylelint-disable-next-line function-url-quotes\n\t\t\tbackground-image: url( 'data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"><title>check</title><g fill=\"%23fff\"><path d=\"M7 14.17L2.83 10l-1.41 1.41L7 17 19 5l-1.41-1.42z\"/></g></svg>' );\n\t\t\tbackground-position: center;\n\t\t\tbackground-repeat: no-repeat;\n\t\t\t// This must have two values to match `background-size: 0 0` above,\n\t\t\t// otherwise the transition does not work (at least in Chrome).\n\t\t\t// stylelint-disable-next-line plugin/no-unsupported-browser-features\n\t\t\tbackground-size: @size-icon-small @size-icon-small;\n\t\t}\n\n\t\t&:disabled {\n\t\t\t& + .wvui-checkbox__icon {\n\t\t\t\tbackground-color: @background-color-filled--disabled;\n\t\t\t\tborder-color: @border-color-base--disabled;\n\t\t\t\tbox-shadow: none;\n\t\t\t}\n\n\t\t\t& ~ .wvui-checkbox__label-content {\n\t\t\t\tcolor: @color-base--disabled;\n\t\t\t}\n\t\t}\n\n\t\t&:checked:enabled,\n\t\t&:indeterminate:enabled {\n\t\t\t& + .wvui-checkbox__icon {\n\t\t\t\tbackground-color: @background-color-input-binary--checked;\n\t\t\t\tborder-color: @border-color-input-binary--checked;\n\t\t\t}\n\n\t\t\t&:focus + .wvui-checkbox__icon {\n\t\t\t\tbackground-color: @background-color-input-binary--checked;\n\t\t\t\tborder-color: @border-color-input-binary--checked;\n\t\t\t\tbox-shadow: @box-shadow-input-checkbox--focus-checked;\n\t\t\t}\n\n\t\t\t&:hover + .wvui-checkbox__icon {\n\t\t\t\tbackground-color: @color-primary--hover;\n\t\t\t\tborder-color: @border-color-input-binary--hover;\n\t\t\t}\n\t\t}\n\t}\n\n\t// Styles for when `label` is active (being pressed).\n\t&:active .wvui-checkbox__input:enabled {\n\t\t& + .wvui-checkbox__icon {\n\t\t\tbackground-color: @background-color-input-binary--active;\n\t\t\tborder-color: @border-color-input-binary--active;\n\t\t\tbox-shadow: @box-shadow-input-binary--active;\n\t\t}\n\n\t\t&:checked + .wvui-checkbox__icon {\n\t\t\tbackground-color: @background-color-input-binary--active;\n\t\t\tborder-color: @border-color-input-binary--active;\n\t\t\tbox-shadow: @box-shadow-input-binary--active;\n\t\t}\n\t}\n}\n","@import ( reference ) '@/themes/wikimedia-ui.less';\n\n// Common styles for checkboxes and radios.\n.wvui-mixin-binary-input() {\n\tposition: relative;\n\t// Create a stacking context.\n\tz-index: 0;\n\tline-height: @size-input-binary;\n\tcursor: pointer;\n\n\t&__label-content {\n\t\t// Necessary to ensure label is indented properly if it spans multiple lines.\n\t\tdisplay: inline-block;\n\t\tpadding-left: @padding-left-input-binary-text;\n\t}\n\n\t&:not( &--inline ) {\n\t\tdisplay: block;\n\t\t// Since we have to use margin-right for inline inputs, use margin-bottom for stacked inputs\n\t\t// for consistency's sake.\n\t\tmargin-bottom: @margin-bottom-binary-input--stacked;\n\n\t\t&:last-child {\n\t\t\tmargin-bottom: 0;\n\t\t}\n\t}\n\n\t&--inline {\n\t\t// Use margin-right instead of left to avoid extra space at the beginning of a new line if\n\t\t// the inputs span multiple lines.\n\t\tmargin-right: @margin-right-binary-input--inline;\n\t\t// Avoid line break between icon and label text.\n\t\twhite-space: nowrap;\n\n\t\t&:last-child {\n\t\t\tmargin-right: 0;\n\t\t}\n\n\t\t// Target span with class ending in '__label-content'.\n\t\tspan[ class$='__label-content' ] {\n\t\t\t// Reset to inline to avoid extra space between input and label.\n\t\t\tdisplay: inline;\n\t\t}\n\t}\n\n\t&[ aria-disabled='true' ] {\n\t\tcursor: @cursor-base--disabled;\n\t}\n\n\t// Custom-styled input that's visible to the user.\n\t&__icon {\n\t\tbackground-color: @background-color-base;\n\t\tposition: absolute;\n\t\tleft: 0;\n\t\tbox-sizing: border-box;\n\t\twidth: @size-input-binary;\n\t\theight: @size-input-binary;\n\t\tborder: @border-width-base @border-style-base @border-color-input-binary;\n\t}\n\n\t// HTML input element.\n\t&__input {\n\t\t// The actual input is visually hidden.\n\t\topacity: 0;\n\t\tposition: absolute;\n\t\tleft: 0;\n\t\t// Render \"on top of\" the span, so that it's still clickable.\n\t\tz-index: 1;\n\t\twidth: @size-input-binary;\n\t\theight: @size-input-binary;\n\t\t// Support Blink, Firefox, Safari: Normalize by removing user-agent stylesheet `margin`.\n\t\tmargin: 0;\n\t\tfont-size: inherit;\n\t\tcursor: inherit;\n\t}\n}\n","\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n@import ( reference ) '@/themes/wikimedia-ui.less';\n\n.wvui-icon {\n\t// Set the default icon color; callers that want a different color should override this rule\n\tcolor: @color-base;\n\t// Maintain an inline outer element while using flexbox to center the SVG\n\t// and avoid extra space around the image.\n\tdisplay: inline-flex; /* stylelint-disable-line plugin/no-unsupported-browser-features */\n\talign-items: center;\n\tjustify-content: center;\n\t// For inline, inline-block, and table layouts.\n\tvertical-align: middle;\n}\n\n// Horizontally flip icons that should be flipped for RTL languages.\n[ dir='rtl' ] .wvui-icon--flip-for-rtl svg {\n\ttransform: scaleX( -1 );\n}\n","\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n@import ( reference ) '@/themes/wikimedia-ui.less';\n\n.wvui-options-menu {\n\tbackground-color: @background-color-base;\n\tbox-sizing: border-box;\n\tmargin: 0;\n\tborder: @border-base;\n\tborder-radius: 0 0 @border-radius-base @border-radius-base;\n\tpadding: 0;\n\n\t&__item {\n\t\tcolor: @color-base;\n\t\tlist-style: none;\n\t\tpadding: @padding-menu;\n\t\toverflow: hidden;\n\t\tline-height: @line-height-component;\n\t\ttext-overflow: ellipsis;\n\t\twhite-space: nowrap;\n\t\ttransition-property: background-color, color;\n\t\ttransition-duration: @transition-base;\n\n\t\t&--enabled {\n\t\t\tcursor: pointer;\n\n\t\t\t&:hover {\n\t\t\t\tbackground-color: @background-color-base--hover;\n\t\t\t}\n\t\t}\n\n\t\t&--active,\n\t\t&--active:hover {\n\t\t\tbackground-color: @background-color-primary;\n\t\t\tcolor: @color-base--emphasized;\n\t\t}\n\n\t\t&--highlighted {\n\t\t\tbackground-color: @background-color-base--hover;\n\t\t}\n\n\t\t&--selected,\n\t\t&--selected:hover {\n\t\t\tbackground-color: @background-color-primary;\n\t\t}\n\n\t\t&--active&--selected {\n\t\t\tcolor: @color-primary;\n\t\t}\n\n\t\t&--disabled {\n\t\t\tcolor: @color-base--disabled;\n\t\t\tcursor: @cursor-base--disabled;\n\t\t}\n\t}\n}\n","\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n@import ( reference ) '@/themes/wikimedia-ui.less';\n\n.wvui-dropdown {\n\tdisplay: inline-block;\n\tposition: relative;\n\tmin-width: 280px;\n\n\t&__indicator {\n\t\tcolor: @color-base;\n\t\tposition: absolute;\n\t\t// Vertically center the handle indicator by moving it down 50% of the height of the handle,\n\t\t// then moving it up by 50% of the height of the icon (translateY uses the element height\n\t\t// while top uses the offset parent's height)\n\t\ttop: 50%;\n\t\ttransform: translateY( -50% );\n\t\tright: @padding-horizontal-base;\n\t\ttransition-property: color;\n\t\ttransition-duration: @transition-base;\n\n\t\tsvg {\n\t\t\twidth: @size-indicator;\n\t\t\theight: @size-indicator;\n\t\t}\n\t}\n\n\t&__handle {\n\t\tbackground-color: @background-color-framed;\n\t\tcolor: @color-base;\n\t\tposition: relative;\n\t\tbox-sizing: border-box;\n\t\tmin-height: @size-base;\n\t\twidth: @size-full;\n\t\tborder: @border-base;\n\t\tborder-radius: @border-radius-base;\n\t\t// Add extra padding-right to make space for the handle indicator\n\t\t// Use 2 * horizontal-base because we need padding on both sides of the indicator\n\t\tpadding: @padding-vertical-base\n\t\t\tcalc( 2 * @padding-horizontal-base ~'+' @size-indicator )\n\t\t\t@padding-vertical-base\n\t\t\t@padding-horizontal-base;\n\t\tline-height: @line-height-component;\n\t\ttransition-property: background-color, color, border-color, box-shadow;\n\t\ttransition-duration: @transition-base;\n\t\tcursor: pointer;\n\n\t\t&:hover {\n\t\t\tbackground-color: @background-color-framed--hover;\n\t\t\tcolor: @color-base--hover;\n\t\t\tborder-color: @border-color-base--hover;\n\n\t\t\t.wvui-dropdown__indicator {\n\t\t\t\tcolor: @color-base--hover;\n\t\t\t}\n\t\t}\n\n\t\t&:focus {\n\t\t\tborder-color: @color-primary--focus;\n\t\t\tbox-shadow: @box-shadow-primary--focus;\n\t\t\toutline: 0;\n\t\t}\n\n\t\t&:active {\n\t\t\tcolor: @color-base--active;\n\t\t\tborder-color: @border-color-base--active;\n\t\t}\n\t}\n\n\t&__menu {\n\t\tposition: absolute;\n\t\tleft: 0;\n\t\tz-index: 4;\n\t\twidth: @size-full;\n\t\tmargin-top: -@border-width-base;\n\t}\n\n\t&--open {\n\t\t.wvui-dropdown__handle {\n\t\t\tbackground-color: @background-color-framed--hover;\n\n\t\t\t&:hover .wvui-dropdown__indicator {\n\t\t\t\tcolor: @color-base;\n\t\t\t}\n\t\t}\n\t}\n\n\t&--disabled {\n\t\t.wvui-dropdown__handle {\n\t\t\tbackground-color: @background-color-base--disabled;\n\t\t\tcolor: @color-base--disabled;\n\t\t\tborder-color: @border-color-base--disabled;\n\t\t\ttext-shadow: @text-shadow-base--disabled;\n\t\t\tcursor: @cursor-base--disabled;\n\n\t\t\t&:hover .wvui-dropdown__indicator {\n\t\t\t\tcolor: @color-base--disabled;\n\t\t\t}\n\t\t}\n\n\t\t// stylelint-disable-next-line no-descending-specificity\n\t\t.wvui-dropdown__indicator {\n\t\t\tcolor: @color-base--disabled;\n\t\t}\n\t}\n}\n\n","\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n@import ( reference ) '@/themes/wikimedia-ui.less';\n\n.wvui-input {\n\tposition: relative; // For proper positioning of icons and slotted elements\n\tbox-sizing: border-box;\n\n\t&__start-icon,\n\t&__end-icon {\n\t\tcolor: @color-accessory;\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\tmin-height: @size-icon;\n\t\theight: @size-full;\n\t}\n\n\t&__start-icon {\n\t\tleft: @border-width-base;\n\t\twidth: @size-input-icon-container;\n\t\tpointer-events: none;\n\t}\n\n\t&__end-icon {\n\t\tright: @border-width-base;\n\t\twidth: @size-input-icon-container;\n\t}\n\n\t&--clearable {\n\t\t.wvui-input__end-icon {\n\t\t\twidth: calc( @padding-horizontal-input-text * 2 + @size-indicator );\n\t\t\tcursor: pointer;\n\n\t\t\t// stylelint-disable-next-line max-nesting-depth\n\t\t\tsvg {\n\t\t\t\twidth: @size-indicator;\n\t\t\t}\n\t\t}\n\t}\n\n\t&__input {\n\t\tdisplay: block;\n\t\tbox-sizing: border-box;\n\t\twidth: @size-full;\n\t\theight: @size-base;\n\t\tmargin: 0;\n\t\tborder-width: @border-width-base;\n\t\tborder-style: @border-style-base;\n\t\tborder-radius: @border-radius-base;\n\t\tpadding: @padding-input-text;\n\t\tfont-family: inherit;\n\t\tfont-size: inherit;\n\t\tline-height: @line-height-component;\n\n\t\t&:not( [ disabled ] ) {\n\t\t\tbackground-color: @background-color-base;\n\t\t\tcolor: @color-base--emphasized;\n\t\t\tborder-color: @border-color-base;\n\t\t\tbox-shadow: @box-shadow-base;\n\t\t\ttransition-property: border-color, box-shadow;\n\t\t\ttransition-duration: @transition-duration-medium;\n\n\t\t\t&:hover {\n\t\t\t\tborder-color: @border-color-input--hover;\n\t\t\t}\n\n\t\t\t&:focus {\n\t\t\t\tborder-color: @border-color-base--focus;\n\t\t\t\tbox-shadow: @box-shadow-base--focus;\n\t\t\t\toutline: 0;\n\t\t\t}\n\n\t\t\t&:focus ~ .wvui-input__start-icon,\n\t\t\t&:focus ~ .wvui-input__end-icon {\n\t\t\t\topacity: 1;\n\t\t\t}\n\t\t}\n\n\t\t&[ disabled ] {\n\t\t\tbackground-color: @background-color-base--disabled;\n\t\t\tcolor: @color-placeholder;\n\t\t\t-webkit-text-fill-color: @color-placeholder;\n\t\t\tborder-color: @border-color-base--disabled;\n\t\t\ttext-shadow: @text-shadow-base--disabled;\n\n\t\t\t// stylelint-disable max-nesting-depth, no-descending-specificity\n\t\t\t& ~ .wvui-input__start-icon,\n\t\t\t& ~ .wvui-input__end-icon {\n\t\t\t\topacity: @opacity-base--disabled;\n\t\t\t\tpointer-events: none;\n\t\t\t}\n\t\t\t// stylelint-enable, max-nesting-depth, no-descending-specificity\n\t\t}\n\n\t\t&::placeholder {\n\t\t\tcolor: @color-placeholder;\n\t\t\topacity: 1;\n\t\t}\n\n\t\t// Support IE 10-11, and Edge 12+: Hide proprietary pseudo-element.\n\t\t// See https://developer.mozilla.org/en-US/docs/Web/CSS/::-ms-clear\n\t\t&::-ms-clear {\n\t\t\tdisplay: none;\n\t\t}\n\n\t\t&[ type='search' ] {\n\t\t\t// Support Safari/iOS: Normalize by applying `none`,\n\t\t\t// Chrome would accept `textfield` as well.\n\t\t\t/* stylelint-disable plugin/no-unsupported-browser-features */\n\t\t\t/* autoprefixer: ignore next */\n\t\t\t-webkit-appearance: none;\n\t\t\t// Support Firefox.\n\t\t\t/* autoprefixer: ignore next */\n\t\t\t-moz-appearance: textfield;\n\t\t\t/* stylelint-enable plugin/no-unsupported-browser-features */\n\n\t\t\t// Support: Safari, Chrome (Blink).\n\n\t\t\t// stylelint-disable-next-line max-nesting-depth\n\t\t\t&::-webkit-search-decoration,\n\t\t\t&::-webkit-search-cancel-button {\n\t\t\t\tdisplay: none;\n\t\t\t}\n\t\t}\n\t}\n\n\t&--has-start-icon {\n\t\t// stylelint-disable-next-line no-descending-specificity\n\t\t.wvui-input__input {\n\t\t\tpadding-left: @size-input-icon-container;\n\t\t}\n\t}\n\n\t&--has-end-icon {\n\t\t// stylelint-disable-next-line no-descending-specificity\n\t\t.wvui-input__input {\n\t\t\tpadding-right: @size-input-icon-container;\n\t\t}\n\t}\n}\n","\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n@import ( reference ) '@/themes/wikimedia-ui.less';\n\n.wvui-progress-bar {\n\tbackground-color: @background-color-base;\n\tbox-sizing: border-box;\n\tmax-width: @max-width-base;\n\tborder: @border-base;\n\tborder-radius: @border-radius-progress-bar;\n\tbox-shadow: @box-shadow-progress-bar;\n\toverflow-x: hidden;\n\n\t&__bar {\n\t\tbackground-color: @background-color-progress-bar-bar;\n\t\twidth: 40%;\n\t\theight: @size-small;\n\t\tanimation: wvui-progress-bar__bar--slide 2s infinite linear;\n\t}\n}\n\n@keyframes wvui-progress-bar__bar--slide {\n\tfrom {\n\t\ttransform: translate( -100% );\n\t}\n\n\tto {\n\t\ttransform: translate( 350% );\n\t}\n}\n\n","\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n@import ( reference ) '@/themes/wikimedia-ui.less';\n@import ( reference ) '@/themes/mixins/binary-input.less';\n\n// Wrapper `label`.\n.wvui-radio {\n\t// Common binary input styles.\n\t.wvui-mixin-binary-input();\n\n\t// Custom-styled radio that's visible to the user.\n\t&__icon {\n\t\tborder-radius: @border-radius-input-radio;\n\t\ttransition-property: background-color, border-color, border-width;\n\t\ttransition-duration: @transition-base;\n\n\t\t// Add `:focus` state's inner circle.\n\t\t&:before {\n\t\t\tcontent: ' ';\n\t\t\tposition: absolute;\n\t\t\t// `px` unit due to pixel rounding error when using\n\t\t\t// `@size-input-binary / 4`\n\t\t\ttop: @position-offset-input-radio-focus;\n\t\t\tright: @position-offset-input-radio-focus;\n\t\t\tbottom: @position-offset-input-radio-focus;\n\t\t\tleft: @position-offset-input-radio-focus;\n\t\t\tborder: @border-width-base @border-style-base transparent;\n\t\t\tborder-radius: @border-radius-input-radio;\n\t\t}\n\t}\n\n\t// HTML `<input type=\"radio\">`.\n\t// Based on the HTML attributes of the radio input, we can change the style\n\t// of the adjacent `span`, which will look like a custom-styled radio.\n\t/* stylelint-disable no-descending-specificity */\n\t&__input {\n\t\t&:enabled {\n\t\t\t// Note: there is no focus behavior for the input in its unchecked\n\t\t\t// state because you can't focus on it without selecting it.\n\t\t\t&:hover + .wvui-radio__icon,\n\t\t\t&:checked:hover + .wvui-radio__icon {\n\t\t\t\tborder-color: @border-color-input-binary--hover;\n\t\t\t}\n\n\t\t\t&:checked + .wvui-radio__icon {\n\t\t\t\tborder-width: @border-width-input-radio--checked;\n\t\t\t\tborder-color: @border-color-input-binary--checked;\n\t\t\t}\n\n\t\t\t&:checked:focus + .wvui-radio__icon {\n\t\t\t\t&:before {\n\t\t\t\t\tborder-color: @border-color-inset--focus;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t&:disabled {\n\t\t\t& ~ .wvui-radio__label-content {\n\t\t\t\tcolor: @color-base--disabled;\n\t\t\t}\n\n\t\t\t& + .wvui-radio__icon {\n\t\t\t\tbackground-color: @background-color-filled--disabled;\n\t\t\t\tborder-color: @border-color-base--disabled;\n\t\t\t}\n\n\t\t\t&:checked + .wvui-radio__icon {\n\t\t\t\tbackground-color: @background-color-base;\n\t\t\t\tborder-width: @border-width-input-radio--checked;\n\t\t\t}\n\t\t}\n\t}\n\t/* stylelint-enable no-descending-specificity */\n\n\t// Styles for when `label` is active (being pressed).\n\t&:active &__input:enabled {\n\t\t& + .wvui-radio__icon {\n\t\t\tbackground-color: @background-color-input-binary--active;\n\t\t\tborder-color: @border-color-input-binary--active;\n\t\t}\n\n\t\t&:checked + .wvui-radio__icon {\n\t\t\tbackground-color: @background-color-base;\n\t\t\tborder-color: @border-color-input-binary--active;\n\n\t\t\t&:before {\n\t\t\t\tborder-color: @border-color-input-binary--active;\n\t\t\t}\n\t\t}\n\t}\n}\n","\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n@import ( reference ) '@/themes/wikimedia-ui.less';\n\n// Base styles are based on the wvui-button styles.\n.wvui-toggle-button {\n\tbox-sizing: border-box;\n\t// Interactive elements have a minimum touch area.\n\tmin-width: @min-size-base;\n\tmin-height: @min-size-base;\n\tmax-width: @max-width-button;\n\t// Support Firefox, Safari: Normalize by removing the `margin`.\n\tmargin: 0;\n\tborder-width: @border-width-base;\n\tborder-style: @border-style-base;\n\tborder-radius: @border-radius-base;\n\tpadding-right: @padding-horizontal-base;\n\tpadding-left: @padding-horizontal-base;\n\t// Support IE 11: Normalize by showing `overflow`.\n\toverflow: visible;\n\t// Support all browsers: Normalize by inheriting `font-family`.\n\t// Initial value depends on user-agent.\n\tfont-family: inherit;\n\t// Support all browsers: Normalize by inheriting `font-size` over initial value of `none`.\n\tfont-size: inherit;\n\tfont-weight: bold;\n\t// Support Edge, Firefox, and IE: Normalize by removing the inheritance of `text-transform`.\n\ttext-transform: none;\n\t// Contents are single line.\n\twhite-space: nowrap;\n\ttransition: border-color @transition-base, background-color @transition-base, color @transition-base, box-shadow @transition-base;\n\n\t// Support Firefox: Normalize by hiding the inner focus `border` and `padding`.\n\t&::-moz-focus-inner {\n\t\tborder: 0;\n\t\tpadding: 0;\n\t}\n\n\t&:focus {\n\t\t// Hide the standard focus outline. A border and box-shadow representation is added below.\n\t\toutline: 0;\n\t}\n\n\t&:not( [ disabled ] ) {\n\t\tbackground-color: @background-color-framed;\n\t\tcolor: @color-base;\n\t\tborder-color: @border-color-base;\n\t\t// Use hand cursor. This is non-standard for a button but allows for a visible\n\t\t// interactivity distinction from the disabled state.\n\t\tcursor: pointer;\n\n\t\t&:focus {\n\t\t\tborder-color: @color-primary--focus;\n\t\t\tbox-shadow: @box-shadow-base--focus;\n\t\t\t// In Windows high contrast mode the outline becomes visible.\n\t\t\toutline: @outline-base--focus;\n\t\t}\n\n\t\t&:hover {\n\t\t\tbackground-color: @background-color-framed--hover;\n\t\t\tcolor: @color-base--hover;\n\t\t}\n\n\t\t&:active {\n\t\t\tbackground-color: @background-color-framed--active;\n\t\t\tcolor: @color-base--active;\n\t\t\tborder-color: @border-color-base--active;\n\t\t\tbox-shadow: none;\n\t\t}\n\t}\n\n\t&[ disabled ] {\n\t\tbackground-color: @background-color-filled--disabled;\n\t\tcolor: @color-filled--disabled;\n\t\tborder-color: @border-color-base--disabled;\n\t}\n\n\t&--active:disabled {\n\t\t// Same as OOUI.\n\t\t// FIXME: Need to settle this primary active color as `@background-color` var.\n\t\tbackground-color: mix( @color-primary--active, @background-color-filled--disabled, 35% );\n\t}\n\n\t&--active:not( [ disabled ] ) {\n\t\tbackground-color: @color-primary--active;\n\t\tcolor: @color-base--inverted;\n\t\tborder-color: @border-color-primary--active;\n\n\t\t&:focus {\n\t\t\tborder-color: @border-color-primary--focus;\n\t\t\tbox-shadow: @box-shadow-primary--focus;\n\t\t}\n\n\t\t&:hover {\n\t\t\t// Same as not hovering, needed to override the rule of hovering over all\n\t\t\t// non-disabled instances set above.\n\t\t\tbackground-color: @color-primary--active;\n\t\t\tcolor: @color-base--inverted;\n\t\t}\n\t}\n}\n","\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n@import ( reference ) '@/themes/wikimedia-ui.less';\n\n.wvui-typeahead-suggestion__title {\n\tcolor: @color-base;\n\tdisplay: block;\n\tmargin: 0 0 2px 0;\n\tfont-size: @font-size-typeahead-suggestion-title;\n\tfont-weight: @font-weight-bold;\n}\n\n.wvui-typeahead-suggestion__match {\n\tfont-weight: @font-weight-normal;\n}\n\n","\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n@import ( reference ) '@/themes/wikimedia-ui.less';\n\n.wvui-typeahead-suggestion {\n\t// stylelint-disable-next-line plugin/no-unsupported-browser-features\n\tdisplay: flex;\n\talign-items: center;\n\tpadding: @padding-vertical-typeahead-suggestion @padding-horizontal-typeahead-suggestion;\n\ttext-decoration: none;\n\t// stylelint-disable-next-line plugin/no-unsupported-browser-features\n\thyphens: auto;\n\t// Progressive enhancement. Fine to override unsupported Android 4. See T280982.\n\t// stylelint-disable-next-line plugin/no-unsupported-browser-features\n\tword-break: break-word;\n\t// Legacy `word-wrap`; IE 6-11, Edge 12+, Firefox 3.5+, Chrome 4+, Safari 3.1+,\n\t//   Opera 11.5+, iOS 3.2+, Android 2.1+\n\t// `overflow-wrap` is W3 standard, but it doesn't seem as if browser vendors\n\t//   will abandon `word-wrap` (it has wider support), therefore no duplication.\n\tword-wrap: break-word;\n\n\t// &--active is supposed to be used both when hover\n\t// and when navigating with keyboard.\n\t&--active {\n\t\tbackground-color: @background-color-base--hover;\n\t}\n\n\t&__thumbnail-placeholder,\n\t&__thumbnail {\n\t\tbackground-position: center;\n\t\tbackground-repeat: no-repeat;\n\t\t// stylelint-disable-next-line plugin/no-unsupported-browser-features\n\t\tbackground-size: cover;\n\t\t// Prevent thumbnail width from shrinking when descriptions are long.\n\t\tflex-shrink: 0;\n\t\twidth: @size-search-figure;\n\t\theight: @size-search-figure;\n\t\tmargin-right: @margin-end-typeahead-suggestion-thumb;\n\t\tborder-radius: @border-radius-base;\n\t\t// Borders tend to cut into the border-radius and it makes the\n\t\t// border-radius look smaller on the inside of the box than the outside.\n\t\t// Using a box-shadow disguised as a border prevents that from happening.\n\t\tbox-shadow: 0 0\n\t\t\t@border-width-base\n\t\t\t@border-width-base\n\t\t\t@border-color-typeahead-suggestion-thumb;\n\t}\n\n\t&__thumbnail {\n\t\tdisplay: inline-block;\n\n\t\t&-placeholder {\n\t\t\tbackground-color: @background-color-typeahead-suggestion-placeholder;\n\t\t\t// stylelint-disable-next-line plugin/no-unsupported-browser-features\n\t\t\tdisplay: inline-flex;\n\t\t\talign-items: center;\n\t\t\tjustify-content: center;\n\n\t\t\t// stylelint-disable-next-line max-nesting-depth\n\t\t\t&-icon {\n\t\t\t\tcolor: @color-typeahead-suggestion-thumbnail-placeholder-icon;\n\t\t\t}\n\t\t}\n\t}\n\n\t&__text {\n\t\toverflow: hidden;\n\n\t\t.wvui-typeahead-suggestion__description {\n\t\t\tcolor: @color-placeholder;\n\t\t\tdisplay: block;\n\t\t\toverflow: hidden;\n\t\t\tfont-size: @font-size-typeahead-suggestion-description;\n\t\t\ttext-overflow: ellipsis;\n\t\t\twhite-space: nowrap;\n\t\t}\n\t}\n}\n","\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n@import ( reference ) '@/themes/wikimedia-ui.less';\n\n.wvui-typeahead-search {\n\t// Add `background-color` as `border` is around input including button.\n\tbackground-color: @background-color-base;\n\t// Border is styled the same as the input border to visually encapsulate\n\t// search submit button.\n\tborder: @border-base;\n\tborder-radius: @border-radius-base;\n\n\t&__form {\n\t\t// stylelint-disable-next-line plugin/no-unsupported-browser-features\n\t\tdisplay: flex;\n\t}\n\n\t&__wrapper {\n\t\tflex-grow: 1;\n\t\t// Makes search results start at the same horizontal position as input.\n\t\tposition: relative;\n\t\t// Set negative margin to make button border overlap with\n\t\t// `.wvui-typeahead-search`'s border.\n\t\tmargin: -@border-width-base;\n\t}\n\n\t&__submit {\n\t\topacity: 0;\n\t\tposition: relative;\n\t\t// Prevent submit button from shrinking on smaller viewports, which causes\n\t\t// the button label to overflow.\n\t\tflex-shrink: 0;\n\t\t// Set negative margin to make button border overlap with\n\t\t// `.wvui-typeahead-search`'s border on all but start margin.\n\t\t// The input already has a negative margin which causes part of the button's\n\t\t// border and input's border to intentionally overlap.\n\t\tmargin: -@border-width-base -@border-width-base -@border-width-base 0;\n\t\tborder-top-left-radius: 0;\n\t\tborder-bottom-left-radius: 0;\n\t\ttransition-property: opacity;\n\t\ttransition-duration: @transition-duration-base;\n\n\t\t&:hover {\n\t\t\t// Make the button be on top of the input border when the button is hovered.\n\t\t\tz-index: 1;\n\t\t}\n\n\t\t&:focus {\n\t\t\topacity: @opacity-base;\n\t\t\t// Make the button be on top of the input border when the input is\n\t\t\t// hovered while the button is focused.\n\t\t\tz-index: 1;\n\t\t}\n\t}\n\n\t&__suggestions {\n\t\tbackground-color: @background-color-base;\n\t\tlist-style: none;\n\t\tdisplay: none;\n\t\tposition: absolute;\n\t\ttop: @size-base;\n\t\tright: 0;\n\t\tleft: 0;\n\t\tbox-sizing: border-box;\n\t\tmargin: 0;\n\t\tborder: @border-base;\n\t\tborder-top-width: 0;\n\t\tborder-radius: 0 0 @border-radius-base @border-radius-base;\n\t\tpadding: 0;\n\t\tbox-shadow: @box-shadow-menu;\n\t}\n\n\t&__suggestion {\n\t\tpadding-left: @size-input-icon-container;\n\t}\n\n\t&__suggestions__footer {\n\t\tcolor: @color-base;\n\t\t// stylelint-disable-next-line plugin/no-unsupported-browser-features\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tborder-top: @border-width-base @border-style-base @border-color-heading;\n\t\tpadding: @padding-vertical-typeahead-suggestion\n\t\t\t@padding-horizontal-typeahead-suggestion\n\t\t\t@padding-vertical-typeahead-suggestion\n\t\t\t@size-input-icon-container;\n\t\ttext-decoration: none;\n\t\tcursor: pointer;\n\n\t\t&:visited,\n\t\t&:active {\n\t\t\tcolor: @color-base;\n\t\t}\n\n\t\t&--active {\n\t\t\tbackground-color: @background-color-base--hover;\n\t\t}\n\n\t\t&__icon {\n\t\t\tcolor: @color-accessory;\n\t\t\t// Because the footer icon should line up vertically with the\n\t\t\t// suggestion text when `showThumbnail` is false, we set its width to\n\t\t\t// `auto` here instead of using the more intuitive @size-search-figure\n\t\t\t// variable so that it doesn't have extra horizontal space.\n\t\t\twidth: auto;\n\t\t\theight: @size-search-figure;\n\t\t\tmargin-right: @padding-horizontal-base;\n\t\t}\n\n\t\t&__text {\n\t\t\tfont-size: @font-size-typeahead-suggestion-title;\n\t\t}\n\t}\n\n\t.wvui-input__input {\n\t\tborder-right-color: transparent;\n\t}\n\n\t//\n\t// Rules that alter elements based on a block-level modifier follow.\n\t//\n\t&--has-value {\n\t\t.wvui-input__input {\n\t\t\tborder-bottom-left-radius: 0;\n\t\t}\n\t}\n\n\t&--active,\n\t&:hover {\n\t\t.wvui-typeahead-search__submit {\n\t\t\topacity: @opacity-base;\n\t\t}\n\n\t\t.wvui-typeahead-search__input {\n\t\t\t// Allow the input's border to be on top of the parent's border when\n\t\t\t// focused or hovered.\n\t\t\tz-index: 1;\n\t\t}\n\n\t\t.wvui-input__input {\n\t\t\tborder-top-right-radius: 0;\n\t\t\tborder-bottom-right-radius: 0;\n\t\t}\n\t}\n\n\t&--expanded {\n\t\t.wvui-typeahead-search__suggestions {\n\t\t\tdisplay: block;\n\t\t}\n\t}\n\n\t&--show-thumbnail {\n\t\t// The amount of space between the typeahead search figure's parent\n\t\t// component and the typeahead search figure (input icon container,\n\t\t// suggestion thumbnail, and footer icon container). We want this space to\n\t\t// be uniform so that the figures vertically line up nicely. For pragmatic\n\t\t// reasons, we use the horizontal padding of the typeahead suggestion.\n\t\t@spacing-start-typeahead-search-figure: @padding-horizontal-typeahead-suggestion;\n\t\t// The amount of spacing from the end of the input icon container, typeahead\n\t\t// suggestion thumb, and footer icon container to the start of their\n\t\t// associated text. We need the text to vertically line up nicely.\n\t\t// For pragmatic reasons, we use the spacing from the typeahead suggestion\n\t\t// thumb.\n\t\t@spacing-end-typeahead-search-figure: @margin-end-typeahead-suggestion-thumb;\n\t\t// The amount the width of the input increases when it is focused to allow\n\t\t// for the extra spacing around the search figures. The caret position\n\t\t// should remain in place for the smoothest transition.\n\t\t@size-typeahead-search-focus-addition: @spacing-start-typeahead-search-figure + @spacing-end-typeahead-search-figure;\n\n\t\t&.wvui-typeahead-search--auto-expand-width:not( .wvui-typeahead-search--focused ) {\n\t\t\tmargin-left: @size-typeahead-search-focus-addition;\n\t\t}\n\n\t\t&:not( .wvui-typeahead-search--auto-expand-width ),\n\t\t&.wvui-type