194 lines
5.1 KiB
CSS
194 lines
5.1 KiB
CSS
/**
|
||
* @file
|
||
* Stylistic treatment for Seven’s UI buttons
|
||
*/
|
||
|
||
/* Buttons. */
|
||
|
||
/**
|
||
* 1. Use px units to ensure button text is centered vertically.
|
||
* 2. Use rems to avoid the font size cascade of ems, with a px fallback for
|
||
* older browsers.
|
||
* 3. Prevent fat text in WebKit.
|
||
*/
|
||
.button {
|
||
padding: 4px 1.5em; /* 1 */
|
||
border: 1px solid #a6a6a6;
|
||
border-radius: 20em;
|
||
background-color: #f2f1eb;
|
||
background-image: -webkit-linear-gradient(top, #f6f6f3, #e7e7df);
|
||
background-image: -moz-linear-gradient(top, #f6f6f3, #e7e7df);
|
||
background-image: -o-linear-gradient(top, #f6f6f3, #e7e7df);
|
||
background-image: linear-gradient(to bottom, #f6f6f3, #e7e7df);
|
||
color: #333333;
|
||
text-decoration: none;
|
||
text-shadow: 0 1px hsla(0, 0%, 100%, 0.6);
|
||
font-weight: 600;
|
||
font-size: 14px;
|
||
font-size: 0.875rem; /* 2 */
|
||
-webkit-transition: all 0.1s;
|
||
-moz-transition: all 0.1s;
|
||
-o-transition: all 0.1s;
|
||
transition: all 0.1s;
|
||
-webkit-font-smoothing: antialiased; /* 3 */
|
||
}
|
||
.button:focus,
|
||
.button:hover {
|
||
background-color: #f9f8f6;
|
||
background-image: -webkit-linear-gradient(top, #fcfcfa, #e9e9dd);
|
||
background-image: -moz-linear-gradient(top, #fcfcfa, #e9e9dd);
|
||
background-image: -o-linear-gradient(top, #fcfcfa, #e9e9dd);
|
||
background-image: linear-gradient(to bottom, #fcfcfa, #e9e9dd);
|
||
color: #1a1a1a;
|
||
text-decoration: none;
|
||
outline: none;
|
||
}
|
||
.button:focus {
|
||
border: 1px solid #3AB2FF;
|
||
box-shadow: 0 0 0.5em 0.1em hsla(203, 100%, 60%, 0.7);
|
||
}
|
||
.button:hover {
|
||
box-shadow: 0 1px 2px hsla(0, 0%, 0%, 0.125);
|
||
}
|
||
.button:active {
|
||
background-color: #dfdfd9;
|
||
background-image: -webkit-linear-gradient(top, #f6f6f3, #e7e7df);
|
||
background-image: -moz-linear-gradient(top, #f6f6f3, #e7e7df);
|
||
background-image: -o-linear-gradient(top, #f6f6f3, #e7e7df);
|
||
background-image: linear-gradient(to bottom, #f6f6f3, #e7e7df);
|
||
box-shadow: inset 0 1px 3px hsla(0, 0%, 0%, 0.2);
|
||
-webkit-transition: none;
|
||
-moz-transition: none;
|
||
-o-transition: none;
|
||
transition: none;
|
||
}
|
||
|
||
.button--primary {
|
||
border-color: #1e5c90;
|
||
background-image: -webkit-linear-gradient(top, #007bc6, #0071b8);
|
||
background-image: -moz-linear-gradient(top, #007bc6, #0071b8);
|
||
background-image: -o-linear-gradient(top, #007bc6, #0071b8);
|
||
background-image: linear-gradient(to bottom, #007bc6, #0071b8);
|
||
color: #fff;
|
||
text-shadow: 0 1px hsla(0, 0%, 0%, 0.5);
|
||
font-weight: 700;
|
||
-webkit-font-smoothing: antialiased;
|
||
}
|
||
.button--primary:focus,
|
||
.button--primary:hover {
|
||
background-color: #2369a6;
|
||
background-image: -webkit-linear-gradient(top, #0c97ed, #1f86c7);
|
||
background-image: -moz-linear-gradient(top, #0c97ed, #1f86c7);
|
||
background-image: -o-linear-gradient(top, #0c97ed, #1f86c7);
|
||
background-image: linear-gradient(to bottom, #0c97ed, #1f86c7);
|
||
border-color: #1e5c90;
|
||
color: #fff;
|
||
}
|
||
.button--primary:focus {
|
||
border: 1px solid #1280DF;
|
||
}
|
||
.button--primary:hover {
|
||
box-shadow: 0 1px 2px hsla(203, 10%, 10%, 0.25);
|
||
}
|
||
.button--primary:active {
|
||
background-image: -webkit-linear-gradient(top, #08639b, #0071b8);
|
||
background-image: -moz-linear-gradient(top, #08639b, #0071b8);
|
||
background-image: -o-linear-gradient(top, #08639b, #0071b8);
|
||
background-image: linear-gradient(to bottom, #08639b, #0071b8);
|
||
border-color: #144b78;
|
||
box-shadow: inset 0 1px 3px hsla(0, 0%, 0%, 0.2);
|
||
}
|
||
|
||
/**
|
||
* Overrides styling from system.theme.
|
||
*/
|
||
.button-action:before {
|
||
margin-left: -0.2em;
|
||
padding-right: 0.2em;
|
||
font-size: 14px;
|
||
font-size: 0.875rem;
|
||
line-height: 16px;
|
||
-webkit-font-smoothing: auto;
|
||
}
|
||
|
||
/**
|
||
* 1. Use px units to ensure button text is centered vertically.
|
||
*/
|
||
.no-touch .button--small {
|
||
font-size: 13px;
|
||
font-size: 0.813rem;
|
||
padding: 2px 1em; /* 1 */
|
||
}
|
||
|
||
.button:disabled,
|
||
.button:disabled:active,
|
||
.button.is-disabled,
|
||
.button.is-disabled:active {
|
||
border-color: #d4d4d4;
|
||
background: #ededed;
|
||
box-shadow: none;
|
||
color: #5c5c5c;
|
||
font-weight: normal;
|
||
cursor: default;
|
||
text-shadow: 0 1px hsla(0, 0%, 100%, 0.6);
|
||
}
|
||
|
||
/* Link actions. */
|
||
|
||
/**
|
||
* Style a clickable/tappable element as a link. Duplicates the base style for
|
||
* the <a> tag, plus a reset for padding, borders and background.
|
||
*/
|
||
.link {
|
||
color: #0074bd;
|
||
text-decoration: none;
|
||
}
|
||
.link:focus,
|
||
.link:hover {
|
||
color: #008ee6;
|
||
text-decoration: underline;
|
||
}
|
||
|
||
/**
|
||
* We've temporarily added the danger button here, bit of a harsh reset but we
|
||
* need it.
|
||
* @todo replace with link--danger.
|
||
* See https://drupal.org/node/2123731
|
||
*/
|
||
.button--danger {
|
||
display: inline;
|
||
cursor: pointer;
|
||
padding: 0;
|
||
border: 0;
|
||
border-radius: 0;
|
||
box-shadow: none;
|
||
background: none;
|
||
-webkit-appearance: none;
|
||
-moz-appearance: none;
|
||
color: #c72100;
|
||
font-weight: 400;
|
||
text-decoration: underline;
|
||
}
|
||
.button--danger:focus,
|
||
.button--danger:hover,
|
||
.button--danger:active {
|
||
color: #ff2a00;
|
||
text-decoration: underline;
|
||
text-shadow: none;
|
||
padding: 0;
|
||
border: 0;
|
||
box-shadow: none;
|
||
background: none;
|
||
}
|
||
.button--danger:disabled,
|
||
.button--danger.is-disabled {
|
||
color: #737373;
|
||
cursor: default;
|
||
text-decoration: none;
|
||
-webkit-font-smoothing: antialiased;
|
||
padding: 0;
|
||
border: 0;
|
||
box-shadow: none;
|
||
background: none;
|
||
}
|