3 * Structural styles for Seven’s UI buttons
5 * Apply these classes to any element (<link>, <button>, <input>, etc.) that
6 * should appear as a button.
12 * 1. Enable z-index on buttons.
13 * 2. Normalize 'line-height'; can’t be changed from 'normal' in Firefox 4+.
14 * 3. Allows full range of styling in Webkit and Gecko.
15 * 4. Use px units to ensure button text is centered vertically.
16 * 5. Use rems to avoid the font size cascade of ems, with a px fallback for
18 * 6. Prevent fat text in WebKit.
20 * @todo Consider moving box-sizing into base.css under a universal selector.
21 * See https://www.drupal.org/node/2124251
25 box-sizing: border-box;
26 display: inline-block;
27 position: relative; /* 1 */
29 line-height: normal; /* 2 */
31 -webkit-appearance: none; /* 3 */
32 -moz-appearance: none; /* 3 */
33 padding: 4px 1.5em; /* 4 */
34 border: 1px solid #a6a6a6;
36 background-color: #f2f1eb;
37 background-image: -webkit-linear-gradient(top, #f6f6f3, #e7e7df);
38 background-image: linear-gradient(to bottom, #f6f6f3, #e7e7df);
40 text-decoration: none;
41 text-shadow: 0 1px hsla(0, 0%, 100%, 0.6);
44 font-size: 0.875rem; /* 5 */
45 -webkit-transition: all 0.1s;
47 -webkit-font-smoothing: antialiased; /* 6 */
51 background-color: #f9f8f6;
52 background-image: -webkit-linear-gradient(top, #fcfcfa, #e9e9dd);
53 background-image: linear-gradient(to bottom, #fcfcfa, #e9e9dd);
55 text-decoration: none;
59 box-shadow: 0 1px 2px hsla(0, 0%, 0%, 0.125);
62 /* Prevent focus ring being covered by next siblings. */
65 border: 1px solid #3AB2FF;
66 box-shadow: 0 0 0.5em 0.1em hsla(203, 100%, 60%, 0.7);
69 border: 1px solid #a6a6a6;
70 background-color: #dfdfd9;
71 background-image: -webkit-linear-gradient(top, #f6f6f3, #e7e7df);
72 background-image: linear-gradient(to bottom, #f6f6f3, #e7e7df);
73 box-shadow: inset 0 1px 3px hsla(0, 0%, 0%, 0.2);
74 -webkit-transition: none;
79 border-color: #1e5c90;
80 background-color: #0071b8;
81 background-image: -webkit-linear-gradient(top, #007bc6, #0071b8);
82 background-image: linear-gradient(to bottom, #007bc6, #0071b8);
84 text-shadow: 0 1px hsla(0, 0%, 0%, 0.5);
86 -webkit-font-smoothing: antialiased;
88 .button--primary:hover,
89 .button--primary:focus {
90 background-color: #2369a6;
91 background-image: -webkit-linear-gradient(top, #0c97ed, #1f86c7);
92 background-image: linear-gradient(to bottom, #0c97ed, #1f86c7);
93 border-color: #1e5c90;
96 .button--primary:focus {
97 border: 1px solid #1280DF;
99 .button--primary:hover {
100 box-shadow: 0 1px 2px hsla(203, 10%, 10%, 0.25);
102 .button--primary:active {
103 background-image: -webkit-linear-gradient(top, #08639b, #0071b8);
104 background-image: linear-gradient(to bottom, #08639b, #0071b8);
105 border-color: #144b78;
106 box-shadow: inset 0 1px 3px hsla(0, 0%, 0%, 0.2);
110 * Overrides styling from system.theme.
112 .button-action:before {
113 margin-left: -0.2em; /* LTR */
114 padding-right: 0.2em; /* LTR */
118 -webkit-font-smoothing: auto;
120 [dir="rtl"] .button-action:before {
121 margin-right: -0.2em;
128 * 1. Use px units to ensure button text is centered vertically.
130 .no-touchevents .button--small {
133 padding: 2px 1em; /* 1 */
137 .button:disabled:active,
139 .button.is-disabled:active {
140 border-color: #d4d4d4;
146 text-shadow: 0 1px hsla(0, 0%, 100%, 0.6);
152 * Style a clickable/tappable element as a link. Duplicates the base style for
153 * the <a> tag, plus a reset for padding, borders and background.
161 -webkit-appearance: none;
162 -moz-appearance: none;
164 text-decoration: none;
169 text-decoration: underline;
173 * We've temporarily added the danger button here, bit of a harsh reset but we
175 * @todo replace with link--danger.
176 * See https://www.drupal.org/node/2123731
186 -webkit-appearance: none;
187 -moz-appearance: none;
190 text-decoration: underline;
192 .button--danger:hover,
193 .button--danger:focus,
194 .button--danger:active {
196 text-decoration: underline;
203 .button--danger:disabled,
204 .button--danger.is-disabled {
207 text-decoration: none;
208 -webkit-font-smoothing: antialiased;