Commit 608996ff authored by Dries's avatar Dries

Issue #1989470 by LewisNyman, aboros, philipz, mgifford, rteijeiro, dimaro,...

Issue #1989470 by LewisNyman, aboros, philipz, mgifford, rteijeiro, dimaro, Bès, klonos, emma.maria: Dropbutton style update for Seven.
parent b75e86ae
......@@ -13,15 +13,12 @@
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.js .dropbutton-wrapper {
display: block;
min-height: 2em;
position: relative;
}
.js .dropbutton-wrapper,
.js .dropbutton-widget {
max-width: 100%;
display: block;
position: relative;
}
@media screen and (max-width:600px) {
.js .dropbutton-wrapper {
width: 100%;
......@@ -36,10 +33,6 @@
position: static;
}
.js .dropbutton-widget {
position: absolute;
}
/* UL styles are over-scoped in core, so this selector needs weight parity. */
.js .dropbutton-widget .dropbutton {
list-style-image: none;
......@@ -51,6 +44,14 @@
.js .dropbutton li,
.js .dropbutton a {
display: block;
outline: none;
}
.js .dropbutton li:hover,
.js .dropbutton li:focus,
.js .dropbutton a:hover,
.js .dropbutton a:focus {
outline: initial;
}
/**
......@@ -107,6 +108,10 @@
padding: 0;
width: 100%;
}
.dropbutton-toggle button:hover,
.dropbutton-toggle button:focus {
outline: initial;
}
.dropbutton-arrow {
border-bottom-color: transparent;
border-left-color: transparent;
......
......@@ -81,6 +81,9 @@
'focusin.dropbutton': $.proxy(this.focusIn, this)
});
}
else {
this.$dropbutton.addClass('dropbutton-single');
}
}
/**
......
......@@ -323,9 +323,6 @@ html.js span.js-only {
/* @end */
.js .views-edit-view .dropbutton-widget {
position: static;
}
.js .views-edit-view .dropbutton-wrapper {
width: auto;
}
......@@ -1113,6 +1113,7 @@ td.group-title {
*/
div.messages {
margin-bottom: 18px;
line-height: 1.4555;
}
/* @end */
......@@ -1125,16 +1126,14 @@ div.messages {
.dropbutton-widget {
position: relative;
}
.dropbutton-multiple .dropbutton-widget {
padding-right: 1.75em;
}
.dropbutton-wrapper {
.js .dropbutton-wrapper .dropbutton .dropbutton-action > * {
font-size: 11px;
line-height: 1.4555;
}
.dropbutton li > * {
margin: 0;
padding: 0.2em 0.75em;
.js .dropbutton-wrapper.dropbutton-multiple.open .dropbutton-action:first-child a {
border-radius: 1.1em 0 0 0;
}
.js .dropbutton-wrapper.dropbutton-multiple.open .dropbutton-action:last-child a {
border-radius: 0 0 0 1.1em;
}
.views-display-top .dropbutton-wrapper {
......@@ -1142,8 +1141,8 @@ div.messages {
right: 12px;
top: 7px;
}
.views-display-top .dropbutton-wrapper a {
font-size: 12px;
.views-display-top .dropbutton-wrapper .dropbutton-widget .dropbutton-action a {
width: auto;
}
.views-ui-display-tab-bucket .dropbutton-wrapper {
......@@ -1151,6 +1150,9 @@ div.messages {
right: 5px;
top: 4px;
}
.views-ui-display-tab-bucket .dropbutton-wrapper .dropbutton-widget .dropbutton-action a {
width: auto;
}
.views-ui-display-tab-actions .dropbutton-wrapper li a,
.views-ui-display-tab-actions .dropbutton-wrapper input {
......
......@@ -175,6 +175,7 @@ public function testRebuildThemeData() {
'style.css' => DRUPAL_ROOT . '/core/themes/seven/style.css',
'css/components/buttons.css' => DRUPAL_ROOT . '/core/themes/seven/css/components/buttons.css',
'css/components/buttons.theme.css' => DRUPAL_ROOT . '/core/themes/seven/css/components/buttons.theme.css',
'css/components/dropbutton.component.css' => DRUPAL_ROOT . '/core/themes/seven/css/components/dropbutton.component.css',
'css/components/tour.theme.css' => DRUPAL_ROOT . '/core/themes/seven/css/components/tour.theme.css',
),
), $info->info['stylesheets']);
......
/**
* @file
* Styling dropbuttons.
*/
/**
* Reset styling for all elements.
*/
.js .dropbutton .dropbutton-action > input,
.js .dropbutton .dropbutton-action > a,
.js .dropbutton .dropbutton-action > button {
color: #333333;
text-decoration: none;
padding: 0;
margin: 0;
font-weight: 600;
line-height: normal;
-webkit-font-smoothing: antialiased;
text-align: left;
}
.js .dropbutton-action.last {
border-radius: 0 0 0 1em;
}
/**
* Overwrite Sevens button styling.
*/
.dropbutton-widget .button {
background: transparent;
border: 0;
border-radius: 0;
box-shadow: none;
}
.js td .dropbutton-multiple {
display: block;
min-height: 2em;
position: relative;
padding-right: 10em;
margin-right: 2em;
max-width: 100%;
}
.js td .dropbutton-multiple .dropbutton-action a,
.js td .dropbutton-multiple .dropbutton-action input,
.js td .dropbutton-multiple .dropbutton-action button {
width: auto;
}
.dropbutton-multiple .dropbutton {
border-right: 0;
}
/**
* Copied styling for .button.
*/
.js .dropbutton-multiple .dropbutton-widget {
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);
text-shadow: 0 1px hsla(0, 0%, 100%, 0.6);
}
.js td .dropbutton-widget {
position: absolute;
}
.dropbutton-multiple.open .dropbutton-widget {
border-radius: 1em;
}
.js .dropbutton-widget .dropbutton-action a,
.js .dropbutton-widget .dropbutton-action input,
.js .dropbutton-widget .dropbutton-action button {
border-radius: 20em 0 0 20em;
padding: 4px 1.5em;
display: block;
width: 100%;
}
.js .dropbutton-widget .dropbutton-action a:focus,
.js .dropbutton-widget .dropbutton-action input:focus,
.js .dropbutton-widget .dropbutton-action button:focus {
text-decoration: underline;
}
.js .dropbutton-multiple.open .dropbutton-action a,
.js .dropbutton-multiple.open .dropbutton-action .button {
border-radius: 0;
}
.js .dropbutton-multiple.open .dropbutton-action:first-child a,
.js .dropbutton-multiple.open .dropbutton-action:first-child .button {
border-radius: 0.9em 0 0 0;
}
.js .dropbutton-multiple.open .dropbutton-action:last-child a,
.js .dropbutton-multiple.open .dropbutton-action:last-child .button {
border-radius: 0 0 0 0.9em;
}
.js .dropbutton-wrapper .dropbutton-widget .dropbutton-action a:hover,
.js .dropbutton-wrapper .dropbutton-widget .dropbutton-action button:hover,
.js .dropbutton-wrapper .dropbutton-widget .dropbutton-action input:hover,
.js .dropbutton-wrapper .dropbutton-widget .dropbutton-action a:focus,
.js .dropbutton-wrapper .dropbutton-widget .dropbutton-action button:focus,
.js .dropbutton-wrapper .dropbutton-widget .dropbutton-action input:focus {
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;
box-shadow: 0 1px 2px hsla(0, 0%, 0%, 0.125);
z-index: 3;
}
.js .dropbutton-wrapper .dropbutton-widget .dropbutton-action a:active,
.js .dropbutton-wrapper .dropbutton-widget .dropbutton-action input:active,
.js .dropbutton-wrapper .dropbutton-widget .dropbutton-action button:active {
text-decoration: none;
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);
}
.dropbutton .secondary-action {
border-top: 1px solid #bfbfba;
}
/**
* Rare instances when a dropbutton is actually just a button.
* Copied from Seven's buttons.theme.css.
*/
.dropbutton-single .dropbutton-widget {
border: 0;
}
.dropbutton-single .dropbutton-action a {
padding: 4px 1.5em;
border: 1px solid #a6a6a6;
border-radius: 20em!important;
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;
-webkit-transition: all 0.1s;
-moz-transition: all 0.1s;
-o-transition: all 0.1s;
transition: all 0.1s;
-webkit-font-smoothing: antialiased;
width: auto!important;
}
.dropbutton-single .dropbutton-action a:focus,
.dropbutton-single .dropbutton-action a: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;
}
.dropbutton-single .dropbutton-action a:hover {
box-shadow: 0 1px 2px hsla(0, 0%, 0%, 0.125);
}
.dropbutton-single .dropbutton-action a: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;
}
/**
* The dropdown trigger.
*/
.js .dropbutton-wrapper .dropbutton-widget .dropbutton-toggle button {
border-left: 1px solid #a6a6a6;
outline: none;
}
.js .dropbutton-wrapper .dropbutton-widget .dropbutton-toggle button {
border-radius: 0 20em 20em 0;
}
.dropbutton-multiple.open .dropbutton-widget .dropbutton-toggle button {
border-radius: 0 1em 1em 0;
}
.js .dropbutton-wrapper .dropbutton-widget .dropbutton-toggle button:hover,
.js .dropbutton-wrapper .dropbutton-widget .dropbutton-toggle button:focus {
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;
box-shadow: 0 1px 2px hsla(0, 0%, 0%, 0.125);
z-index: 3;
}
.js .dropbutton-wrapper .dropbutton-widget .dropbutton-toggle 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);
}
.dropbutton-arrow {
border-top-color: #333;
right: 35%;
top: 54%;
}
.dropbutton-multiple.open .dropbutton-arrow {
border-bottom: 0.3333em solid #333;
border-top-color: transparent;
top: 0.6667em;
}
/**
* Form edit action theming.
* Copied styling from .button--primary.
*/
.js .form-actions .dropbutton .dropbutton-action > * {
color: #fff;
font-weight: 700;
text-shadow: 0 1px hsla(0, 0%, 0%, 0.5);
}
.js .form-actions .dropbutton-widget {
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);
text-shadow: 0 1px hsla(0, 0%, 0%, 0.5);
position: relative;
}
.form-actions .dropbutton-multiple.open .dropbutton-widget {
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);
}
.js .form-actions .dropbutton-wrapper .dropbutton-widget .dropbutton-action .button:hover,
.js .form-actions .dropbutton-wrapper .dropbutton-widget .dropbutton-action .button:focus {
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);
box-shadow: 0 1px 2px hsla(203, 10%, 10%, 0.25);
color: #fff;
}
.js .form-actions .dropbutton-wrapper .dropbutton-widget .dropbutton-action .button: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);
}
.js .form-actions .dropbutton-wrapper .dropbutton-widget .dropbutton-toggle button,
.form-actions .dropbutton .secondary-action {
border-color: #1e5c90;
}
.js .form-actions .dropbutton-wrapper .dropbutton-widget .dropbutton-toggle button {
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);
}
.js .form-actions .dropbutton-wrapper .dropbutton-widget .dropbutton-toggle button:hover,
.js .form-actions .dropbutton-wrapper .dropbutton-widget .dropbutton-toggle button:focus {
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);
}
.js .form-actions .dropbutton-wrapper .dropbutton-widget .dropbutton-toggle button: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);
}
.form-actions .dropbutton-arrow {
border-top-color: #fff;
}
.form-actions .dropbutton-multiple.open .dropbutton-arrow {
border-bottom: 0.3333em solid white;
}
......@@ -10,6 +10,7 @@ stylesheets:
- style.css
- css/components/buttons.css
- css/components/buttons.theme.css
- css/components/dropbutton.component.css
- css/components/tour.theme.css
stylesheets-override:
- vertical-tabs.css
......
......@@ -605,7 +605,7 @@ tbody tr:hover {
}
td,
th {
vertical-align: middle;
vertical-align: top;
}
td {
padding: 10px 12px;
......@@ -1074,47 +1074,6 @@ div.admin-options div.form-item {
padding: 0 0 5px 5px;
}
/* Dropbutton */
.js .dropbutton-widget {
background-color: #fff;
background-image: -moz-linear-gradient(-90deg, rgba(255, 255, 255, 0), #e7e7e7);
background-image: -o-linear-gradient(-90deg, rgba(255, 255, 255, 0), #e7e7e7);
background-image: -webkit-linear-gradient(-90deg, rgba(255, 255, 255, 0), #e7e7e7);
background-image: linear-gradient(180deg, rgba(255, 255, 255, 0), #e7e7e7);
border-radius: 5px;
}
.js .dropbutton-widget:hover {
background-color: #f0f0f0;
border-color: #b8b8b8;
}
.js .dropbutton-multiple.open .dropbutton-widget:hover {
background-color: #fff;
}
.dropbutton-content li:first-child > * {
text-overflow: ellipsis;
}
.dropbutton-multiple.open .dropbutton-content li:first-child > * {
text-overflow: clip;
}
.js .form-actions .dropbutton-widget:focus,
.js .form-actions .dropbutton-widget:hover {
background-color: #73b3dd;
border: 1px solid #6ea3bf;
border-bottom-color: #4680a0;
}
.js .form-actions .dropbutton-widget:active {
background-color: #3981b1;
border: 1px solid #36647c;
border-bottom-color: #284657;
}
.js .form-actions .dropbutton-multiple.open .dropbutton-widget:hover {
background-color: #9dcae7;
}
.js .form-actions .dropbutton-multiple.open .dropbutton-action:hover {
background-color: #73b3dd;
}
/**
* Views styling
*/
......@@ -1520,21 +1479,6 @@ details.fieldset-no-legend {
}
}
/**
* Node form dropbuttons.
*/
.form-actions .dropbutton-wrapper li a,
.form-actions .dropbutton-wrapper input {
padding: 5px 17px 6px 17px;
margin-bottom: 0em;
border: medium;
border-radius: 0;
background: none;
}
.form-actions .dropbutton-wrapper input:hover {
background: none;
border: none;
}
/* Delete button */
.form-actions .button-danger {
color: #c72100;
......@@ -1559,36 +1503,3 @@ details.fieldset-no-legend {
border: none;
text-decoration: underline;
}
/**
* Form edit action theming
*/
.js .form-actions .dropbutton-widget {
background-color: #50a0e9;
background-image: -moz-linear-gradient(-90deg, #50a0e9, #4481dc);
background-image: -o-linear-gradient(-90deg, #50a0e9, #4481dc);
background-image: -webkit-linear-gradient(-90deg, #50a0e9, #4481dc);
background-image: linear-gradient(180deg, #50a0e9, #4481dc);
border-radius: 3px;
border: 1px solid #3974ae;
}
.js .form-actions .dropbutton-widget .dropbutton li {
border-top: 1px solid rgba(255, 255, 255, 0.5);
border-top-left-radius: 3px;
}
.js .form-actions .dropbutton-widget .dropbutton .dropbutton-toggle {
border-top-left-radius: 0px;
border-top-right-radius: 3px;
top: 1px;
}
.js .form-actions .dropbutton-widget .dropbutton .secondary-action {
border-top: 1px solid rgba(255, 255, 255, 0.3);
border-top-left-radius: 0px;
}
.js .form-actions .dropbutton-widget .button {
color: #ffffff;
text-shadow: 1px 1px 1px rgba(31, 83, 131, 0.8);
}
.js .form-actions .dropbutton-multiple.open .dropbutton-action:hover {
background-color: #50a0e9;
}
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