Commit 262a3e76 authored by alexpott's avatar alexpott

Issue #2408491 by joaogarin, mrjmd, vermario, jOksanen: Rewrite button...

Issue #2408491 by joaogarin, mrjmd, vermario, jOksanen: Rewrite button components inline with our CSS standards
parent 5cd98c49
......@@ -12,6 +12,10 @@
* 1. Enable z-index on buttons.
* 2. Normalize 'line-height'; can’t be changed from 'normal' in Firefox 4+.
* 3. Allows full range of styling in Webkit and Gecko.
* 4. Use px units to ensure button text is centered vertically.
* 5. Use rems to avoid the font size cascade of ems, with a px fallback for
* older browsers.
* 6. Prevent fat text in WebKit.
*
* @todo Consider moving box-sizing into base.css under a universal selector.
* See https://drupal.org/node/2124251
......@@ -25,15 +29,123 @@
line-height: normal; /* 2 */
cursor: pointer;
-webkit-appearance: none; /* 3 */
-moz-appearance: none; /* " */
-moz-appearance: none; /* 3 */
padding: 4px 1.5em; /* 4 */
border: 1px solid #a6a6a6;
border-radius: 20em;
background-color: #f2f1eb;
background-image: -webkit-linear-gradient(top, #f6f6f3, #e7e7df);
background-image: linear-gradient(to bottom, #f6f6f3, #e7e7df);
color: #333;
text-decoration: none;
text-shadow: 0 1px hsla(0, 0%, 100%, 0.6);
font-weight: 600;
font-size: 14px;
font-size: 0.875rem; /* 5 */
-webkit-transition: all 0.1s;
transition: all 0.1s;
-webkit-font-smoothing: antialiased; /* 6 */
}
.button:hover,
.button:focus {
background-color: #f9f8f6;
background-image: -webkit-linear-gradient(top, #fcfcfa, #e9e9dd);
background-image: linear-gradient(to bottom, #fcfcfa, #e9e9dd);
color: #1a1a1a;
text-decoration: none;
outline: none;
}
.button:hover {
box-shadow: 0 1px 2px hsla(0, 0%, 0%, 0.125);
}
/* Prevent focus ring being covered by next siblings. */
.button:focus {
z-index: 10;
border: 1px solid #3AB2FF;
box-shadow: 0 0 0.5em 0.1em hsla(203, 100%, 60%, 0.7);
}
.button:active {
border: 1px solid #a6a6a6;
background-color: #dfdfd9;
background-image: -webkit-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;
transition: none;
}
.button--primary {
border-color: #1e5c90;
background-color: #0071b8;
background-image: -webkit-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:hover,
.button--primary:focus {
background-color: #2369a6;
background-image: -webkit-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: 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 {
display: inline;
cursor: pointer;
......@@ -41,5 +153,55 @@
border: 0;
background: none;
-webkit-appearance: none;
-moz-appearance: none;
-moz-appearance: none;
color: #0074bd;
text-decoration: none;
}
.link:hover,
.link:focus {
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:hover,
.button--danger:focus,
.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;
}
/**
* @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: 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;
transition: all 0.1s;
-webkit-font-smoothing: antialiased; /* 3 */
}
.button:hover,
.button:focus {
background-color: #f9f8f6;
background-image: -webkit-linear-gradient(top, #fcfcfa, #e9e9dd);
background-image: linear-gradient(to bottom, #fcfcfa, #e9e9dd);
color: #1a1a1a;
text-decoration: none;
outline: none;
}
.button:hover {
box-shadow: 0 1px 2px hsla(0, 0%, 0%, 0.125);
}
.button:focus {
border: 1px solid #3AB2FF;
box-shadow: 0 0 0.5em 0.1em hsla(203, 100%, 60%, 0.7);
}
.button:active {
border: 1px solid #a6a6a6;
background-color: #dfdfd9;
background-image: -webkit-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;
transition: none;
}
.button--primary {
border-color: #1e5c90;
background-color: #0071b8;
background-image: -webkit-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:hover,
.button--primary:focus {
background-color: #2369a6;
background-image: -webkit-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: 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:hover,
.link:focus {
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:hover,
.button--danger:focus,
.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;
}
......@@ -150,7 +150,7 @@
/**
* Rare instances when a dropbutton is actually just a button.
* Copied from Seven's buttons.theme.css.
* Copied from Seven's buttons.css.
*/
.dropbutton-single .dropbutton-widget {
border: 0;
......@@ -169,7 +169,7 @@
text-shadow: 0 1px hsla(0, 0%, 100%, 0.6);
font-weight: 600;
-webkit-transition: all 0.1s;
transition: all 0.1s;
transition: all 0.1s;
-webkit-font-smoothing: antialiased;
width: auto!important;
}
......@@ -192,7 +192,7 @@
background-image: linear-gradient(to bottom, #f6f6f3, #e7e7df);
box-shadow: inset 0 1px 3px hsla(0, 0%, 0%, 0.2);
-webkit-transition: none;
transition: none;
transition: none;
}
/**
......
......@@ -12,7 +12,6 @@ global-styling:
css/components/content-header.css: {}
css/components/breadcrumb.css: {}
css/components/buttons.css: {}
css/components/buttons.theme.css: {}
css/components/colors.css: {}
css/components/messages.css: {}
css/components/dropbutton.component.css: {}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment