home *** CD-ROM | disk | FTP | other *** search
/ HTML Examples / WP.iso / wordpress / wp-includes / css / buttons-rtl.css < prev    next >
Encoding:
Cascading Style Sheet File  |  2017-07-15  |  9.3 KB  |  397 lines
  1. /* ----------------------------------------------------------------------------
  2.  
  3. NOTE: If you edit this file, you should make sure that the CSS rules for
  4. buttons in the following files are updated.
  5.  
  6. * jquery-ui-dialog.css
  7. * editor.css
  8.  
  9. WordPress-style Buttons
  10. =======================
  11. Create a button by adding the `.button` class to an element. For backward
  12. compatibility, we support several other classes (such as `.button-secondary`),
  13. but these will *not* work with the stackable classes described below.
  14.  
  15. Button Styles
  16. -------------
  17. To display a primary button style, add the `.button-primary` class to a button.
  18.  
  19. Button Sizes
  20. ------------
  21. Adjust a button's size by adding the `.button-large` or `.button-small` class.
  22.  
  23. Button States
  24. -------------
  25. Lock the state of a button by adding the name of the pseudoclass as
  26. an actual class (e.g. `.hover` for `:hover`).
  27.  
  28.  
  29. TABLE OF CONTENTS:
  30. ------------------
  31.  1.0 - Button Layouts
  32.  2.0 - Default Button Style
  33.  3.0 - Primary Button Style
  34.  4.0 - Button Groups
  35.  5.0 - Responsive Button Styles
  36.  
  37. ---------------------------------------------------------------------------- */
  38.  
  39. /* ----------------------------------------------------------------------------
  40.   1.0 - Button Layouts
  41. ---------------------------------------------------------------------------- */
  42.  
  43. .wp-core-ui .button,
  44. .wp-core-ui .button-primary,
  45. .wp-core-ui .button-secondary {
  46.     display: inline-block;
  47.     text-decoration: none;
  48.     font-size: 13px;
  49.     line-height: 26px;
  50.     height: 28px;
  51.     margin: 0;
  52.     padding: 0 10px 1px;
  53.     cursor: pointer;
  54.     border-width: 1px;
  55.     border-style: solid;
  56.     -webkit-appearance: none;
  57.     border-radius: 3px;
  58.     white-space: nowrap;
  59.     box-sizing: border-box;
  60. }
  61.  
  62. /* Remove the dotted border on :focus and the extra padding in Firefox */
  63. .wp-core-ui button::-moz-focus-inner,
  64. .wp-core-ui input[type="reset"]::-moz-focus-inner,
  65. .wp-core-ui input[type="button"]::-moz-focus-inner,
  66. .wp-core-ui input[type="submit"]::-moz-focus-inner {
  67.     border-width: 0;
  68.     border-style: none;
  69.     padding: 0;
  70. }
  71.  
  72. .wp-core-ui .button.button-large,
  73. .wp-core-ui .button-group.button-large .button {
  74.     height: 30px;
  75.     line-height: 28px;
  76.     padding: 0 12px 2px;
  77. }
  78.  
  79. .wp-core-ui .button.button-small,
  80. .wp-core-ui .button-group.button-small .button {
  81.     height: 24px;
  82.     line-height: 22px;
  83.     padding: 0 8px 1px;
  84.     font-size: 11px;
  85. }
  86.  
  87. .wp-core-ui .button.button-hero,
  88. .wp-core-ui .button-group.button-hero .button {
  89.     font-size: 14px;
  90.     height: 46px;
  91.     line-height: 44px;
  92.     padding: 0 36px;
  93. }
  94.  
  95. .wp-core-ui .button:active,
  96. .wp-core-ui .button:focus {
  97.     outline: none;
  98. }
  99.  
  100. .wp-core-ui .button.hidden {
  101.     display: none;
  102. }
  103.  
  104. /* Style Reset buttons as simple text links */
  105.  
  106. .wp-core-ui input[type="reset"],
  107. .wp-core-ui input[type="reset"]:hover,
  108. .wp-core-ui input[type="reset"]:active,
  109. .wp-core-ui input[type="reset"]:focus {
  110.     background: none;
  111.     border: none;
  112.     box-shadow: none;
  113.     padding: 0 2px 1px;
  114.     width: auto;
  115. }
  116.  
  117. /* ----------------------------------------------------------------------------
  118.   2.0 - Default Button Style
  119. ---------------------------------------------------------------------------- */
  120.  
  121. .wp-core-ui .button,
  122. .wp-core-ui .button-secondary {
  123.     color: #555;
  124.     border-color: #cccccc;
  125.     background: #f7f7f7;
  126.     box-shadow: 0 1px 0 #cccccc;
  127.      vertical-align: top;
  128. }
  129.  
  130. .wp-core-ui p .button {
  131.     vertical-align: baseline;
  132. }
  133.  
  134. .wp-core-ui .button.hover,
  135. .wp-core-ui .button:hover,
  136. .wp-core-ui .button-secondary:hover,
  137. .wp-core-ui .button.focus,
  138. .wp-core-ui .button:focus,
  139. .wp-core-ui .button-secondary:focus {
  140.     background: #fafafa;
  141.     border-color: #999;
  142.     color: #23282d;
  143. }
  144.  
  145. .wp-core-ui .button.focus,
  146. .wp-core-ui .button:focus,
  147. .wp-core-ui .button-secondary:focus {
  148.     border-color: #5b9dd9;
  149.     box-shadow: 0 0 3px rgba( 0, 115, 170, .8 );
  150. }
  151.  
  152. .wp-core-ui .button.active,
  153. .wp-core-ui .button.active:hover,
  154. .wp-core-ui .button:active,
  155. .wp-core-ui .button-secondary:active {
  156.     background: #eee;
  157.     border-color: #999;
  158.     box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, 0.5 );
  159.     -webkit-transform: translateY(1px);
  160.     transform: translateY(1px);
  161. }
  162.  
  163. .wp-core-ui .button.active:focus {
  164.     border-color: #5b9dd9;
  165.     box-shadow:
  166.         inset 0 2px 5px -3px rgba( 0, 0, 0, 0.5 ),
  167.         0 0 3px rgba( 0, 115, 170, .8 );
  168. }
  169.  
  170. .wp-core-ui .button[disabled],
  171. .wp-core-ui .button:disabled,
  172. .wp-core-ui .button.disabled,
  173. .wp-core-ui .button-secondary[disabled],
  174. .wp-core-ui .button-secondary:disabled,
  175. .wp-core-ui .button-secondary.disabled,
  176. .wp-core-ui .button-disabled {
  177.     color: #a0a5aa !important;
  178.     border-color: #ddd !important;
  179.     background: #f7f7f7 !important;
  180.     box-shadow: none !important;
  181.     text-shadow: 0 1px 0 #fff !important;
  182.     cursor: default;
  183.     -webkit-transform: none !important;
  184.     transform: none !important;
  185. }
  186.  
  187. /* Buttons that look like links, for a cross of good semantics with the visual */
  188. .wp-core-ui .button-link {
  189.     margin: 0;
  190.     padding: 0;
  191.     box-shadow: none;
  192.     border: 0;
  193.     border-radius: 0;
  194.     background: none;
  195.     outline: none;
  196.     cursor: pointer;
  197.     text-align: right;
  198.     /* Mimics the default link style in common.css */
  199.     color: #0073aa;
  200.     text-decoration: underline;
  201.     transition-property: border, background, color;
  202.     transition-duration: .05s;
  203.     transition-timing-function: ease-in-out;
  204. }
  205.  
  206. .wp-core-ui .button-link:hover,
  207. .wp-core-ui .button-link:active {
  208.     color: #00a0d2;
  209. }
  210.  
  211. .wp-core-ui .button-link:focus {
  212.     color: #124964;
  213.     box-shadow:
  214.         0 0 0 1px #5b9dd9,
  215.         0 0 2px 1px rgba(30, 140, 190, .8);
  216. }
  217.  
  218. .wp-core-ui .button-link-delete {
  219.     color: #a00;
  220. }
  221.  
  222. .wp-core-ui .button-link-delete:hover,
  223. .wp-core-ui .button-link-delete:focus {
  224.     color: #dc3232;
  225. }
  226.  
  227. .ie8 .wp-core-ui .button-link:focus {
  228.     outline: #5b9dd9 solid 1px;
  229. }
  230.  
  231. /* ----------------------------------------------------------------------------
  232.   3.0 - Primary Button Style
  233. ---------------------------------------------------------------------------- */
  234.  
  235. .wp-core-ui .button-primary {
  236.     background: #0085ba;
  237.     border-color: #0073aa #006799 #006799;
  238.     box-shadow: 0 1px 0 #006799;
  239.     color: #fff;
  240.     text-decoration: none;
  241.     text-shadow: 0 -1px 1px #006799,
  242.         -1px 0 1px #006799,
  243.         0 1px 1px #006799,
  244.         1px 0 1px #006799;
  245. }
  246.  
  247. .wp-core-ui .button-primary.hover,
  248. .wp-core-ui .button-primary:hover,
  249. .wp-core-ui .button-primary.focus,
  250. .wp-core-ui .button-primary:focus {
  251.     background: #008ec2;
  252.     border-color: #006799;
  253.     color: #fff;
  254. }
  255.  
  256. .wp-core-ui .button-primary.focus,
  257. .wp-core-ui .button-primary:focus {
  258.     box-shadow: 0 1px 0 #0073aa,
  259.         0 0 2px 1px #33b3db;
  260. }
  261.  
  262. .wp-core-ui .button-primary.active,
  263. .wp-core-ui .button-primary.active:hover,
  264. .wp-core-ui .button-primary.active:focus,
  265. .wp-core-ui .button-primary:active {
  266.     background: #0073aa;
  267.     border-color: #006799;
  268.     box-shadow: inset 0 2px 0 #006799;
  269.     vertical-align: top;
  270. }
  271.  
  272. .wp-core-ui .button-primary[disabled],
  273. .wp-core-ui .button-primary:disabled,
  274. .wp-core-ui .button-primary-disabled,
  275. .wp-core-ui .button-primary.disabled {
  276.     color: #66c6e4 !important;
  277.     background: #008ec2 !important;
  278.     border-color: #007cb2 !important;
  279.     box-shadow: none !important;
  280.     text-shadow: 0 -1px 0 rgba( 0, 0, 0, 0.1 ) !important;
  281.     cursor: default;
  282. }
  283.  
  284. .wp-core-ui .button.button-primary.button-hero {
  285.  box-shadow: 0 2px 0 #006799;
  286. }
  287.  
  288. .wp-core-ui .button.button-primary.button-hero.active,
  289. .wp-core-ui .button.button-primary.button-hero.active:hover,
  290. .wp-core-ui .button.button-primary.button-hero.active:focus,
  291. .wp-core-ui .button.button-primary.button-hero:active {
  292.  box-shadow: inset 0 3px 0 #006799;
  293. }
  294.  
  295. /* ----------------------------------------------------------------------------
  296.   4.0 - Button Groups
  297. ---------------------------------------------------------------------------- */
  298.  
  299. .wp-core-ui .button-group {
  300.     position: relative;
  301.     display: inline-block;
  302.     white-space: nowrap;
  303.     font-size: 0;
  304.     vertical-align: middle;
  305. }
  306.  
  307. .wp-core-ui .button-group > .button {
  308.     display: inline-block;
  309.     border-radius: 0;
  310.     margin-left: -1px;
  311.     z-index: 10;
  312. }
  313.  
  314. .wp-core-ui .button-group > .button-primary {
  315.     z-index: 100;
  316. }
  317.  
  318. .wp-core-ui .button-group > .button:hover {
  319.     z-index: 20;
  320. }
  321.  
  322. .wp-core-ui .button-group > .button:first-child {
  323.     border-radius: 0 3px 3px 0;
  324. }
  325.  
  326. .wp-core-ui .button-group > .button:last-child {
  327.     border-radius: 3px 0 0 3px;
  328. }
  329.  
  330. .wp-core-ui .button-group > .button:focus {
  331.     position: relative;
  332.     z-index: 1;
  333. }
  334.  
  335. /* ----------------------------------------------------------------------------
  336.   5.0 - Responsive Button Styles
  337. ---------------------------------------------------------------------------- */
  338.  
  339. @media screen and ( max-width: 782px ) {
  340.  
  341.     .wp-core-ui .button,
  342.     .wp-core-ui .button.button-large,
  343.     .wp-core-ui .button.button-small,
  344.     input#publish,
  345.     input#save-post,
  346.     a.preview {
  347.         padding: 6px 14px;
  348.         line-height: normal;
  349.         font-size: 14px;
  350.         vertical-align: middle;
  351.         height: auto;
  352.         margin-bottom: 4px;
  353.     }
  354.  
  355.     #media-upload.wp-core-ui .button {
  356.         padding: 0 10px 1px;
  357.         height: 24px;
  358.         line-height: 22px;
  359.         font-size: 13px;
  360.     }
  361.  
  362.     .media-frame.mode-grid .bulk-select .button {
  363.         margin-bottom: 0;
  364.     }
  365.  
  366.     /* Publish Metabox Options */
  367.     .wp-core-ui .save-post-status.button {
  368.         position: relative;
  369.         margin: 0 10px 0 14px; /* 14px right margin to match all other buttons */
  370.     }
  371.  
  372.     /* Reset responsive styles in Press This, Customizer */
  373.  
  374.     .wp-core-ui.wp-customizer .button {
  375.         padding: 0 10px 1px;
  376.         font-size: 13px;
  377.         line-height: 26px;
  378.         height: 28px;
  379.         margin: 0;
  380.         vertical-align: inherit;
  381.     }
  382.  
  383.     .media-modal-content .media-toolbar-primary .media-button {
  384.         margin-top: 10px;
  385.         margin-right: 5px;
  386.     }
  387.  
  388.     /* Reset responsive styles on Log in button on iframed login form */
  389.  
  390.     .interim-login .button.button-large {
  391.         height: 30px;
  392.         line-height: 28px;
  393.         padding: 0 12px 2px;
  394.     }
  395.  
  396. }
  397.