You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

405 lines
9.5 KiB

1 year ago
  1. /* ----------------------------------------------------------------------------
  2. NOTE: If you edit this file, you should make sure that the CSS rules for
  3. buttons in the following files are updated.
  4. * jquery-ui-dialog.css
  5. * editor.css
  6. WordPress-style Buttons
  7. =======================
  8. Create a button by adding the `.button` class to an element. For backward
  9. compatibility, we support several other classes (such as `.button-secondary`),
  10. but these will *not* work with the stackable classes described below.
  11. Button Styles
  12. -------------
  13. To display a primary button style, add the `.button-primary` class to a button.
  14. Button Sizes
  15. ------------
  16. Adjust a button's size by adding the `.button-large` or `.button-small` class.
  17. Button States
  18. -------------
  19. Lock the state of a button by adding the name of the pseudoclass as
  20. an actual class (e.g. `.hover` for `:hover`).
  21. TABLE OF CONTENTS:
  22. ------------------
  23. 1.0 - Button Layouts
  24. 2.0 - Default Button Style
  25. 3.0 - Primary Button Style
  26. 4.0 - Button Groups
  27. 5.0 - Responsive Button Styles
  28. ---------------------------------------------------------------------------- */
  29. /* ----------------------------------------------------------------------------
  30. 1.0 - Button Layouts
  31. ---------------------------------------------------------------------------- */
  32. .wp-core-ui .button,
  33. .wp-core-ui .button-primary,
  34. .wp-core-ui .button-secondary {
  35. display: inline-block;
  36. text-decoration: none;
  37. font-size: 13px;
  38. line-height: 2.15384615; /* 28px */
  39. min-height: 30px;
  40. margin: 0;
  41. padding: 0 10px;
  42. cursor: pointer;
  43. border-width: 1px;
  44. border-style: solid;
  45. -webkit-appearance: none;
  46. border-radius: 3px;
  47. white-space: nowrap;
  48. box-sizing: border-box;
  49. }
  50. /* Remove the dotted border on :focus and the extra padding in Firefox */
  51. .wp-core-ui button::-moz-focus-inner,
  52. .wp-core-ui input[type="reset"]::-moz-focus-inner,
  53. .wp-core-ui input[type="button"]::-moz-focus-inner,
  54. .wp-core-ui input[type="submit"]::-moz-focus-inner {
  55. border-width: 0;
  56. border-style: none;
  57. padding: 0;
  58. }
  59. .wp-core-ui .button.button-large,
  60. .wp-core-ui .button-group.button-large .button {
  61. min-height: 32px;
  62. line-height: 2.30769231; /* 30px */
  63. padding: 0 12px;
  64. }
  65. .wp-core-ui .button.button-small,
  66. .wp-core-ui .button-group.button-small .button {
  67. min-height: 26px;
  68. line-height: 2.18181818; /* 24px */
  69. padding: 0 8px;
  70. font-size: 11px;
  71. }
  72. .wp-core-ui .button.button-hero,
  73. .wp-core-ui .button-group.button-hero .button {
  74. font-size: 14px;
  75. min-height: 46px;
  76. line-height: 3.14285714;
  77. padding: 0 36px;
  78. }
  79. .wp-core-ui .button.hidden {
  80. display: none;
  81. }
  82. /* Style Reset buttons as simple text links */
  83. .wp-core-ui input[type="reset"],
  84. .wp-core-ui input[type="reset"]:hover,
  85. .wp-core-ui input[type="reset"]:active,
  86. .wp-core-ui input[type="reset"]:focus {
  87. background: none;
  88. border: none;
  89. box-shadow: none;
  90. padding: 0 2px 1px;
  91. width: auto;
  92. }
  93. /* ----------------------------------------------------------------------------
  94. 2.0 - Default Button Style
  95. ---------------------------------------------------------------------------- */
  96. .wp-core-ui .button,
  97. .wp-core-ui .button-secondary {
  98. color: #2271b1;
  99. border-color: #2271b1;
  100. background: #f6f7f7;
  101. vertical-align: top;
  102. }
  103. .wp-core-ui p .button {
  104. vertical-align: baseline;
  105. }
  106. .wp-core-ui .button.hover,
  107. .wp-core-ui .button:hover,
  108. .wp-core-ui .button-secondary:hover{
  109. background: #f0f0f1;
  110. border-color: #0a4b78;
  111. color: #0a4b78;
  112. }
  113. .wp-core-ui .button.focus,
  114. .wp-core-ui .button:focus,
  115. .wp-core-ui .button-secondary:focus {
  116. background: #f6f7f7;
  117. border-color: #3582c4;
  118. color: #0a4b78;
  119. box-shadow: 0 0 0 1px #3582c4;
  120. /* Only visible in Windows High Contrast mode */
  121. outline: 2px solid transparent;
  122. /* Reset inherited offset from Gutenberg */
  123. outline-offset: 0;
  124. }
  125. /* :active state */
  126. .wp-core-ui .button:active,
  127. .wp-core-ui .button-secondary:active {
  128. background: #f6f7f7;
  129. border-color: #8c8f94;
  130. box-shadow: none;
  131. }
  132. /* pressed state e.g. a selected setting */
  133. .wp-core-ui .button.active,
  134. .wp-core-ui .button.active:hover {
  135. background-color: #dcdcde;
  136. color: #135e96;
  137. border-color: #0a4b78;
  138. box-shadow: inset 0 2px 5px -3px #0a4b78;
  139. }
  140. .wp-core-ui .button.active:focus {
  141. border-color: #3582c4;
  142. box-shadow:
  143. inset 0 2px 5px -3px #0a4b78,
  144. 0 0 0 1px #3582c4;
  145. }
  146. .wp-core-ui .button[disabled],
  147. .wp-core-ui .button:disabled,
  148. .wp-core-ui .button.disabled,
  149. .wp-core-ui .button-secondary[disabled],
  150. .wp-core-ui .button-secondary:disabled,
  151. .wp-core-ui .button-secondary.disabled,
  152. .wp-core-ui .button-disabled {
  153. color: #a7aaad !important;
  154. border-color: #dcdcde !important;
  155. background: #f6f7f7 !important;
  156. box-shadow: none !important;
  157. cursor: default;
  158. transform: none !important;
  159. }
  160. /* Buttons that look like links, for a cross of good semantics with the visual */
  161. .wp-core-ui .button-link {
  162. margin: 0;
  163. padding: 0;
  164. box-shadow: none;
  165. border: 0;
  166. border-radius: 0;
  167. background: none;
  168. cursor: pointer;
  169. text-align: left;
  170. /* Mimics the default link style in common.css */
  171. color: #2271b1;
  172. text-decoration: underline;
  173. transition-property: border, background, color;
  174. transition-duration: .05s;
  175. transition-timing-function: ease-in-out;
  176. }
  177. .wp-core-ui .button-link:hover,
  178. .wp-core-ui .button-link:active {
  179. color: #135e96;
  180. }
  181. .wp-core-ui .button-link:focus {
  182. color: #043959;
  183. box-shadow:
  184. 0 0 0 1px #4f94d4,
  185. 0 0 2px 1px rgba(79, 148, 212, 0.8);
  186. /* Only visible in Windows High Contrast mode */
  187. outline: 1px solid transparent;
  188. }
  189. .wp-core-ui .button-link-delete {
  190. color: #d63638;
  191. }
  192. .wp-core-ui .button-link-delete:hover,
  193. .wp-core-ui .button-link-delete:focus {
  194. color: #d63638;
  195. background: transparent;
  196. }
  197. .wp-core-ui .button-link-delete:disabled {
  198. /* overrides the default buttons disabled background */
  199. background: transparent !important;
  200. }
  201. /* ----------------------------------------------------------------------------
  202. 3.0 - Primary Button Style
  203. ---------------------------------------------------------------------------- */
  204. .wp-core-ui .button-primary {
  205. background: #2271b1;
  206. border-color: #2271b1;
  207. color: #fff;
  208. text-decoration: none;
  209. text-shadow: none;
  210. }
  211. .wp-core-ui .button-primary.hover,
  212. .wp-core-ui .button-primary:hover,
  213. .wp-core-ui .button-primary.focus,
  214. .wp-core-ui .button-primary:focus {
  215. background: #135e96;
  216. border-color: #135e96;
  217. color: #fff;
  218. }
  219. .wp-core-ui .button-primary.focus,
  220. .wp-core-ui .button-primary:focus {
  221. box-shadow:
  222. 0 0 0 1px #fff,
  223. 0 0 0 3px #2271b1;
  224. }
  225. .wp-core-ui .button-primary.active,
  226. .wp-core-ui .button-primary.active:hover,
  227. .wp-core-ui .button-primary.active:focus,
  228. .wp-core-ui .button-primary:active {
  229. background: #135e96;
  230. border-color: #135e96;
  231. box-shadow: none;
  232. color: #fff;
  233. }
  234. .wp-core-ui .button-primary[disabled],
  235. .wp-core-ui .button-primary:disabled,
  236. .wp-core-ui .button-primary-disabled,
  237. .wp-core-ui .button-primary.disabled {
  238. color: #a7aaad !important;
  239. background: #f6f7f7 !important;
  240. border-color: #dcdcde !important;
  241. box-shadow: none !important;
  242. text-shadow: none !important;
  243. cursor: default;
  244. }
  245. /* ----------------------------------------------------------------------------
  246. 4.0 - Button Groups
  247. ---------------------------------------------------------------------------- */
  248. .wp-core-ui .button-group {
  249. position: relative;
  250. display: inline-block;
  251. white-space: nowrap;
  252. font-size: 0;
  253. vertical-align: middle;
  254. }
  255. .wp-core-ui .button-group > .button {
  256. display: inline-block;
  257. border-radius: 0;
  258. margin-right: -1px;
  259. }
  260. .wp-core-ui .button-group > .button:first-child {
  261. border-radius: 3px 0 0 3px;
  262. }
  263. .wp-core-ui .button-group > .button:last-child {
  264. border-radius: 0 3px 3px 0;
  265. }
  266. .wp-core-ui .button-group > .button-primary + .button {
  267. border-left: 0;
  268. }
  269. .wp-core-ui .button-group > .button:focus {
  270. position: relative;
  271. z-index: 1;
  272. }
  273. /* pressed state e.g. a selected setting */
  274. .wp-core-ui .button-group > .button.active {
  275. background-color: #dcdcde;
  276. color: #135e96;
  277. border-color: #0a4b78;
  278. box-shadow: inset 0 2px 5px -3px #0a4b78;
  279. }
  280. .wp-core-ui .button-group > .button.active:focus {
  281. border-color: #3582c4;
  282. box-shadow:
  283. inset 0 2px 5px -3px #0a4b78,
  284. 0 0 0 1px #3582c4;
  285. }
  286. /* ----------------------------------------------------------------------------
  287. 5.0 - Responsive Button Styles
  288. ---------------------------------------------------------------------------- */
  289. @media screen and (max-width: 782px) {
  290. .wp-core-ui .button,
  291. .wp-core-ui .button.button-large,
  292. .wp-core-ui .button.button-small,
  293. input#publish,
  294. input#save-post,
  295. a.preview {
  296. padding: 0 14px;
  297. line-height: 2.71428571; /* 38px */
  298. font-size: 14px;
  299. vertical-align: middle;
  300. min-height: 40px;
  301. margin-bottom: 4px;
  302. }
  303. /* Copy attachment URL button in the legacy edit media page. */
  304. .wp-core-ui .copy-to-clipboard-container .copy-attachment-url {
  305. margin-bottom: 0;
  306. }
  307. #media-upload.wp-core-ui .button {
  308. padding: 0 10px 1px;
  309. min-height: 24px;
  310. line-height: 22px;
  311. font-size: 13px;
  312. }
  313. .media-frame.mode-grid .bulk-select .button {
  314. margin-bottom: 0;
  315. }
  316. /* Publish Metabox Options */
  317. .wp-core-ui .save-post-status.button {
  318. position: relative;
  319. margin: 0 14px 0 10px; /* 14px right margin to match all other buttons */
  320. }
  321. /* Reset responsive styles in Press This, Customizer */
  322. .wp-core-ui.wp-customizer .button {
  323. font-size: 13px;
  324. line-height: 2.15384615; /* 28px */
  325. min-height: 30px;
  326. margin: 0;
  327. vertical-align: inherit;
  328. }
  329. .wp-customizer .theme-overlay .theme-actions .button {
  330. margin-bottom: 5px;
  331. }
  332. .media-modal-content .media-toolbar-primary .media-button {
  333. margin-top: 10px;
  334. margin-left: 5px;
  335. }
  336. /* Reset responsive styles on Log in button on iframed login form */
  337. .interim-login .button.button-large {
  338. min-height: 30px;
  339. line-height: 2;
  340. padding: 0 12px 2px;
  341. }
  342. }