diff --git a/core/core.libraries.yml b/core/core.libraries.yml
index eb62701..c1aa3a9 100644
--- a/core/core.libraries.yml
+++ b/core/core.libraries.yml
@@ -194,7 +194,7 @@ drupal.dropbutton:
js:
misc/dropbutton/dropbutton.js: {}
css:
- component:
+ theme:
misc/dropbutton/dropbutton.css: {}
dependencies:
- core/jquery
diff --git a/core/misc/dropbutton/dropbutton.css b/core/misc/dropbutton/dropbutton.css
deleted file mode 100644
index 308a2d8..0000000
--- a/core/misc/dropbutton/dropbutton.css
+++ /dev/null
@@ -1,118 +0,0 @@
-/**
- * @file
- * Dropbutton styling.
- *
- * A dropbutton is a widget that displays a list of action links as a button
- * with a primary action. Secondary actions are hidden in a dropdown menu.
- *
- */
-
-/**
- * The button class is added when there is only one action. This should be moved
- * to button.css
- */
-.button {
- background: #FFF;
- color: #333;
- border: 1px solid #BBB;
- padding: 0.4em 1em;
- border-radius: 20em;
- text-decoration: none;
-}
-.button:hover {
- background-color: #EFEFEF;
-}
-
-/**
- * The dropbutton class is added with Javascript when there is more than one
- * action.
- */
-.dropbutton {
- position: relative;
- display: inline-block;
- padding-right: 2em; /* LTR */
-}
-[dir="rtl"] .dropbutton {
- padding-left: 2em;
- padding-right: 0;
-}
-@media screen and (max-width:600px) {
- .dropbutton {
- width: 100%;
- }
-}
-.dropbutton.is-open {
- max-width: none;
- z-index: 100;
-}
-
-/* The primary action, always visible. */
-.dropbutton__primary-action {
- padding-left: 1em;
- display: block;
- border-top-right-radius: 0;
- border-bottom-right-radius: 0;
- color: #333;
- border-right: 0;
-}
-
-/* The dropbutton trigger toggles the hidden menu. */
-.dropbutton__trigger {
- position: absolute;
- margin: 0;
- border-top-left-radius: 0;
- border-bottom-left-radius: 0;
- top: 0;
- bottom: 0;
- right: 0; /* LTR */
- display: block;
- height: auto;
- width: 2em;
- cursor: pointer;
- background: url(../icons/333333/caret-down.svg) no-repeat center center;
-}
-[dir="rtl"] .dropbutton__trigger {
- left: 0;
- right: auto;
-}
-.dropbutton__trigger:hover,
-.dropbutton__trigger:focus {
- outline: initial;
-}
-
-/* The dropbutton menu contains the hidden action items. */
-.dropbutton__menu {
- position: absolute;
- top: 2em;
- display: none;
- min-width: 150px;
- margin: 5px 0;
- min-width: 100%;
- padding: 5px 0;
- background: #fff;
- border: 1px solid #a6a6a6;
- border-radius: 5px;
- list-style-image: none;
- list-style-type: none;
- overflow: hidden;
-}
-.dropbutton.is-open .dropbutton__menu {
- display: block;
-}
-.dropbutton__menu li,
-.dropbutton__menu-item {
- display: block;
- outline: none;
-}
-
-.dropbutton__menu-item {
- padding: 0.35em 1em;
- color: #262626;
- text-decoration: none;
-}
-.dropbutton__menu-item:focus,
-.dropbutton__menu-item:hover {
- background: #c8ecfe;
- outline: initial;
-}
-
diff --git a/core/misc/dropbutton/dropbutton.js b/core/misc/dropbutton/dropbutton.js
index d660395..c132d39 100644
--- a/core/misc/dropbutton/dropbutton.js
+++ b/core/misc/dropbutton/dropbutton.js
@@ -82,14 +82,14 @@
// Add the special dropdown only if there are hidden actions.
if (this.$actions.length > 1) {
// Identify the first element of the collection.
- var $primary = this.$actions.slice(0, 1).find('a');
+ var $primary = this.$actions.slice(0, 1).find('a, input, button');
// Remove parent
for first dropbutton action and move.
$primary.unwrap().addClass('button dropbutton__primary-action').each(function() {
$(this).parent().before(this);
});
- // Identify the secondary actions.
- var $secondary = this.$actions.slice(1).find('a');
- $secondary.addClass('dropbutton__menu-item');
+ // Identify the secondary actions, reset their appearance.
+ var $secondary = this.$actions.slice(1).find('a, input, button');
+ $secondary.addClass('dropbutton__menu-item reset-appearance').removeClass('button');
// Add toggle link.
$primary.after(Drupal.theme('dropbuttonToggle', options));
// Bind mouse events.
diff --git a/core/misc/icons/ffffff/caret-down.svg b/core/misc/icons/ffffff/caret-down.svg
new file mode 100644
index 0000000..1514a0e
--- /dev/null
+++ b/core/misc/icons/ffffff/caret-down.svg
@@ -0,0 +1 @@
+
diff --git a/core/themes/bartik/bartik.libraries.yml b/core/themes/bartik/bartik.libraries.yml
index fd82367..07cff9e 100644
--- a/core/themes/bartik/bartik.libraries.yml
+++ b/core/themes/bartik/bartik.libraries.yml
@@ -12,7 +12,7 @@ global-styling:
css/components/contextual.css: {}
css/components/demo-block.css: {}
# @see https://www.drupal.org/node/2389735
- css/components/dropbutton.component.css: {}
+ css/components/dropbutton.component.css: { weight: 10 }
css/components/featured-top.css: {}
css/components/feed-icon.css: {}
css/components/field.css: {}
diff --git a/core/themes/bartik/css/components/dropbutton.component.css b/core/themes/bartik/css/components/dropbutton.component.css
index db55965..6580a25 100644
--- a/core/themes/bartik/css/components/dropbutton.component.css
+++ b/core/themes/bartik/css/components/dropbutton.component.css
@@ -3,55 +3,35 @@
* Visual styles for Bartik's dropbutton component.
*/
-.js .dropbutton-wrapper .dropbutton-widget {
- /* This is required to win over specifity of .js td .dropbutton-widget */
- position: relative;
-}
-.js .dropbutton-widget {
- border: 1px solid;
- border-color: #e4e4e4 #d2d2d2 #b4b4b4 #d2d2d2;
- background-color: #fff;
- background-image: -webkit-linear-gradient(top, #f3f3f3, #e8e8e8);
- background-image: linear-gradient(to bottom, #f3f3f3, #e8e8e8);
+.dropbutton__primary-action {
+ display: block;
+ border-top-right-radius: 0; /* LTR */
+ border-bottom-right-radius: 0; /* LTR */
+ border-right-style: hidden; /* LTR */
+}
+[dir="rtl"] .dropbutton__primary-action {
+ border-top-right-radius: 20em;
+ border-bottom-right-radius: 20em;
+ border-top-left-radius: 0;
+ border-bottom-left-radius: 0;
+ border-left-style: hidden;
+ border-right-style: solid;
+}
+.dropbutton__trigger {
+ border-top-left-radius: 0; /* LTR */
+ border-bottom-left-radius: 0; /* LTR */
+ background: url(../../../../misc/icons/333333/caret-down.svg) no-repeat center center,
+ -webkit-linear-gradient(top, #f3f3f3, #e8e8e8);
+ background: url(../../../../misc/icons/333333/caret-down.svg) no-repeat center center,
+ linear-gradient(to bottom, #f3f3f3, #e8e8e8);
+}
+.dropbutton__trigger:hover,
+.dropbutton__trigger:active,
+.dropbutton__trigger:focus {
+ background: url(../../../../misc/icons/333333/caret-down.svg) no-repeat center center,
+ #dedede;
+}
+.dropbutton__menu-item:hover,
+.dropbutton__menu-item:focus {
color: #3a3a3a;
- cursor: pointer;
- text-align: center;
- margin: 0.125em 0;
- border-radius: 1em;
- overflow: hidden;
-}
-.js .dropbutton-widget:hover {
- border-color: #e4e4e4 #d2d2d2 #b4b4b4 #d2d2d2;
-}
-.js .dropbutton-widget .button {
- border: none;
- margin: 0;
- padding: 0.32em 1em;
- background: transparent none;
-}
-.js .dropbutton-multiple .dropbutton-widget .dropbutton-action a {
- margin-right: 0; /* LTR */
-}
-[dir="rtl"].js .dropbutton-multiple .dropbutton-widget .dropbutton-action a {
- margin-left: 0;
-}
-.js .dropbutton .secondary-action {
- border-top-color: #ccc;
-}
-.js .dropbutton-toggle button {
- background-color: #e8e8e8;
- background-image: -webkit-linear-gradient(top, #e8e8e8, #d2d2d2);
- background-image: linear-gradient(to bottom, #e8e8e8, #d2d2d2);
-}
-.js .dropbutton-toggle .dropbutton-arrow:hover {
- background: #ccc;
-}
-.js .dropbutton a {
- color: #3a3a3a;
- border-bottom: 0 none;
-}
-.js .dropbutton .dropbutton-action:hover,
-.js .dropbutton a:hover {
- background: #dedede;
- border-bottom: 0 none;
}
diff --git a/core/themes/bartik/css/components/form.css b/core/themes/bartik/css/components/form.css
index c157303..bbc2359 100644
--- a/core/themes/bartik/css/components/form.css
+++ b/core/themes/bartik/css/components/form.css
@@ -63,7 +63,7 @@ textarea,
select {
font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, sans-serif;
}
-input {
+input:not(.button) {
margin: 2px 0;
padding: 4px;
/* Keep form elements from overflowing their containers. */
@@ -263,13 +263,6 @@ input.form-submit:focus {
#comment-body-add-more-wrapper .form-type-textarea label {
margin-bottom: 0.4em;
}
-#edit-actions input {
- margin-right: 0.6em; /* LTR */
-}
-[dir="rtl"] #edit-actions input {
- margin-left: 0.6em;
- margin-right: 0;
-}
/* Form error styles. */
.form-item textarea.error + .cke {
diff --git a/core/themes/classy/css/components/dropbutton.css b/core/themes/classy/css/components/dropbutton.css
index cf8c40a..3a5e018 100644
--- a/core/themes/classy/css/components/dropbutton.css
+++ b/core/themes/classy/css/components/dropbutton.css
@@ -1,33 +1,130 @@
/**
* @file
- * General styles for dropbuttons.
+ * Dropbutton styling.
+ *
+ * A dropbutton is a widget that displays a list of action links as a button
+ * with a primary action. Secondary actions are hidden in a dropdown menu.
*/
-.js .dropbutton-widget {
- background-color: white;
- border: 1px solid #cccccc;
+/**
+ * The button class is added when there is only one action.
+ * @todo This should be moved to button.css.
+ */
+.button {
+ background: #FFF;
+ color: #333;
+ border: 1px solid #BBB;
+ padding: 0.4em 1em;
+ border-radius: 20em;
+ text-decoration: none;
}
-.js .dropbutton-widget:hover {
- border-color: #b8b8b8;
+.button:hover {
+ background-color: #EFEFEF;
}
-.dropbutton .dropbutton-action > * {
- padding: 0.1em 0.5em;
- white-space: nowrap;
+
+/**
+ * The dropbutton class is added with Javascript when there is more than one
+ * action.
+ */
+.dropbutton {
+ position: relative;
+ display: inline-block;
+ padding-right: 2em; /* LTR */
+}
+[dir="rtl"] .dropbutton {
+ padding-left: 2em;
+ padding-right: 0;
+}
+@media screen and (max-width:600px) {
+ .dropbutton {
+ width: 100%;
+ }
+}
+.dropbutton.is-open {
+ max-width: none;
+ z-index: 100;
}
-.dropbutton .secondary-action {
- border-top: 1px solid #e8e8e8;
+
+/* The primary action, always visible. */
+.dropbutton__primary-action {
+ padding-left: 1em;
+ display: block;
+ border-top-right-radius: 0; /* LTR */
+ border-bottom-right-radius: 0; /* LTR */
+ color: #333;
+ border-right-style: hidden; /* LTR */
+}
+[dir="rtl"] .dropbutton__primary-action {
+ border-top-right-radius: 20em;
+ border-bottom-right-radius: 20em;
+ border-top-left-radius: 0;
+ border-bottom-left-radius: 0;
+ border-left-style: hidden;
+ border-right-color: #BBB;
}
-.dropbutton-multiple .dropbutton {
- border-right: 1px solid #e8e8e8; /* LTR */
+
+/* The dropbutton trigger toggles the hidden menu. */
+.dropbutton__trigger {
+ position: absolute;
+ margin: 0;
+ border-top-left-radius: 0; /* LTR */
+ border-bottom-left-radius: 0; /* LTR */
+ top: 0;
+ bottom: 0;
+ right: 0; /* LTR */
+ display: block;
+ height: auto;
+ width: 2em;
+ cursor: pointer;
+ background: url(../../../../misc/icons/333333/caret-down.svg) no-repeat center center;
}
-[dir="rtl"] .dropbutton-multiple .dropbutton {
- border-left: 1px solid #e8e8e8;
- border-right: 0 none;
+[dir="rtl"] .dropbutton__trigger {
+ left: 0;
+ right: auto;
+ border-top-left-radius: 20em;
+ border-bottom-left-radius: 20em;
+ border-top-right-radius: 0;
+ border-bottom-right-radius: 0;
}
-.dropbutton-multiple .dropbutton .dropbutton-action > * {
- margin-right: 0.25em; /* LTR */
+.dropbutton__trigger:hover,
+.dropbutton__trigger:focus {
+ outline: initial;
+}
+
+/* The dropbutton menu contains the hidden action items. */
+.dropbutton__menu {
+ position: absolute;
+ top: 2em;
+ display: none;
+ margin: 5px 0;
+ min-width: 100%;
+ padding: 5px 0;
+ background: #fff;
+ border: 1px solid #a6a6a6;
+ border-radius: 5px;
+ list-style-image: none;
+ list-style-type: none;
+ overflow: hidden;
+}
+.dropbutton.is-open .dropbutton__menu {
+ display: block;
+}
+.dropbutton__menu li,
+.dropbutton__menu-item {
+ display: block;
+}
+.dropbutton__menu-item {
+ font-size: 0.9em;
+ padding: 0.35em 1em;
+ color: #262626;
+ text-decoration: none;
+ min-width: 100%;
+ text-align: inherit;
+ white-space: nowrap;
}
-[dir="rtl"] .dropbutton-multiple .dropbutton .dropbutton-action > * {
- margin-left: 0.25em;
- margin-right: 0;
+.dropbutton__menu-item:focus,
+.dropbutton__menu-item:hover {
+ background: #efefef;
+ text-decoration: none;
+ outline: initial;
}
diff --git a/core/themes/seven/css/components/dropbutton.component.css b/core/themes/seven/css/components/dropbutton.component.css
index b9767d0..7410e79 100644
--- a/core/themes/seven/css/components/dropbutton.component.css
+++ b/core/themes/seven/css/components/dropbutton.component.css
@@ -1,320 +1,115 @@
/**
* @file
- * Styling dropbuttons.
+ * Seven styling for dropbuttons, builds on Classy's styling and Seven's
+ * buttons.css.
*/
-/**
- * Reset styling for all elements.
- */
-.dropbutton__action > input,
-.dropbutton__action > a,
-.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; /* LTR */
-}
-[dir="rtl"] .dropbutton__action > input,
-[dir="rtl"] .dropbutton__action > a,
-[dir="rtl"] .dropbutton__action > button {
- text-align: right;
-}
-.js .dropbutton__action.last {
- border-radius: 0 0 0 1em; /* LTR */
-}
-[dir="rtl"] .js .dropbutton__action.last {
- border-radius: 0 0 1em 0;
-}
-
-/**
- * Overwrite Sevens button styling.
- */
-.js .dropbutton .button {
- background: transparent;
- border: 0;
- border-radius: 0;
- box-shadow: none;
-}
-.js .dropbutton--multiple .dropbutton {
- border-right: 0; /* LTR */
-}
-[dir="rtl"].js .dropbutton--multiple .dropbutton {
- border-left: 0;
-}
-
-/**
- * Show dropbutton elements as buttons when javascript is disabled
- */
-.dropbutton {
- margin: 0;
- padding: 0;
- list-style-type: none;
-}
-.dropbutton li + li {
- margin-top: 10px;
-}
-.js .dropbutton li {
- margin-bottom: 0;
- margin-right: 0;
-}
-.js .dropbutton li + li {
- margin-top: 0;
-}
-
-@media screen and (min-width: 37.5625em) { /* 601px */
- .dropbutton li {
- display: inline-block;
- }
- .dropbutton li + li {
- margin-left: 1em;
- margin-top: 0;
- }
- .js .dropbutton li + li {
- margin-left: 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: linear-gradient(to bottom, #f6f6f3, #e7e7df);
- text-shadow: 0 1px hsla(0, 0%, 100%, 0.6);
-}
-.dropbutton--multiple.is-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; /* LTR */
- padding: 4px 1.5em;
+.dropbutton__primary-action {
display: block;
- width: 100%;
-}
-[dir="rtl"].js .dropbutton-widget .dropbutton__action a,
-[dir="rtl"].js .dropbutton-widget .dropbutton__action input,
-[dir="rtl"].js .dropbutton-widget .dropbutton__action button {
- border-radius: 0 20em 20em 0;
-}
-.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.is-open .dropbutton__action a,
-.js .dropbutton--multiple.is-open .dropbutton__action .button {
- border-radius: 0;
-}
-.js .dropbutton--multiple.is-open .dropbutton__action:first-child a,
-.js .dropbutton--multiple.is-open .dropbutton__action:first-child .button {
- border-radius: 0.9em 0 0 0; /* LTR */
-}
-[dir="rtl"].js .dropbutton--multiple.is-open .dropbutton__action:first-child a,
-[dir="rtl"].js .dropbutton--multiple.is-open .dropbutton__action:first-child .button {
- border-radius: 0 0.9em 0 0;
-}
-.js .dropbutton--multiple.is-open .dropbutton__action:last-child a,
-.js .dropbutton--multiple.is-open .dropbutton__action:last-child .button {
- border-radius: 0 0 0 0.9em; /* LTR */
-}
-[dir="rtl"].js .dropbutton--multiple.is-open .dropbutton__action:last-child a,
-[dir="rtl"].js .dropbutton--multiple.is-open .dropbutton__action:last-child .button {
- border-radius: 0 0 0.9em 0;
-}
-.dropbutton__action a:hover,
-.dropbutton__action button:hover,
-.dropbutton__action input:hover,
-.dropbutton__action a:focus,
-.dropbutton__action button:focus,
-.dropbutton__action input:focus {
- background-color: #f9f8f6;
- background-image: -webkit-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;
-}
-.dropbutton__action a:active,
-.dropbutton__action input:active,
-.dropbutton__action button:active {
- text-decoration: none;
- 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);
-}
-.dropbutton .secondary-action {
- border-top: 1px solid #bfbfba;
-}
-
-/**
- * Rare instances when a dropbutton is actually just a button.
- * Copied from Seven's buttons.css.
- */
-.dropbutton--single .dropbutton__menu {
- border: 0;
- position: static;
- display: inline-block;
-}
-.dropbutton--single .dropbutton__action a {
- padding: 4px 1.5em;
- border: 1px solid #a6a6a6;
- border-radius: 20em!important;
+ border-top-right-radius: 0; /* LTR */
+ border-bottom-right-radius: 0; /* LTR */
+ border-right-style: hidden; /* LTR */
+ padding: 0.4em 1em;
+}
+[dir="rtl"] .dropbutton__primary-action {
+ border-top-right-radius: 20em;
+ border-bottom-right-radius: 20em;
+ border-top-left-radius: 0;
+ border-bottom-left-radius: 0;
+ border-left-style: hidden;
+ border-right-style: solid;
+}
+.dropbutton__trigger {
+ border-top-left-radius: 0; /* LTR */
+ border-bottom-left-radius: 0; /* LTR */
+ position: absolute;
+ padding: 0.4em 1em;
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;
- -webkit-transition: all 0.1s;
- transition: all 0.1s;
- -webkit-font-smoothing: antialiased;
- width: auto!important;
-}
-.dropbutton--single .dropbutton__action a:hover,
-.dropbutton--single .dropbutton__action a: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;
-}
-.dropbutton--single .dropbutton__action a:hover,
-.dropbutton--single .dropbutton__action a:focus {
- 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: linear-gradient(to bottom, #f6f6f3, #e7e7df);
+ background: url(../../../../misc/icons/333333/caret-down.svg) no-repeat center center,
+ -webkit-linear-gradient(top, #f6f6f3, #e7e7df);
+ background: url(../../../../misc/icons/333333/caret-down.svg) no-repeat center center,
+ linear-gradient(top, #f6f6f3, #e7e7df);
+}
+[dir="rtl"] .dropbutton__trigger {
+ border-top-left-radius: 20em;
+ border-bottom-left-radius: 20em;
+ border-top-right-radius: 0;
+ border-bottom-right-radius: 0;
+}
+.dropbutton.is-open .dropbutton__trigger,
+.dropbutton__trigger:focus,
+.dropbutton__trigger:hover {
+ background-image: url(../../../../misc/icons/333333/caret-down.svg),
+ -webkit-linear-gradient(top, #fcfcfa, #e9e9dd);
+ background-image: url(../../../../misc/icons/333333/caret-down.svg),
+ linear-gradient(top, #fcfcfa, #e9e9dd);
+}
+.dropbutton__trigger:active,
+.dropbutton.is-open .dropbutton__trigger {
+ background-image: url(../../../../misc/icons/333333/caret-down.svg),
+ -webkit-linear-gradient(to bottom, #f6f6f3, #e7e7df);
+ background-image: url(../../../../misc/icons/333333/caret-down.svg),
+ linear-gradient(to bottom, #f6f6f3, #e7e7df);
box-shadow: inset 0 1px 3px hsla(0, 0%, 0%, 0.2);
- -webkit-transition: none;
- transition: none;
-}
-
-/**
- * The dropdown trigger.
- */
-.js .dropbutton .dropbutton__trigger.button {
- border-left: 1px solid #a6a6a6; /* LTR */
- outline: none;
-}
-[dir="rtl"].js .dropbutton .dropbutton__trigger.button {
- border-right: 1px solid #a6a6a6;
- border-left: 0;
+ border-color: #a6a6a6;
}
-.js .dropbutton .dropbutton__trigger.button {
- border-radius: 0 20em 20em 0; /* LTR */
+.dropbutton__menu {
+ top: 2.2em;
}
-[dir="rtl"].js .dropbutton .dropbutton__trigger.button {
- border-radius: 20em 0 0 20em;
-}
-.dropbutton--multiple.is-open .dropbutton-widget .dropbutton__trigger.button {
- border-radius: 0 1em 1em 0; /* LTR */
-}
-[dir="rtl"] .dropbutton--multiple.is-open .dropbutton-widget .dropbutton__trigger.button {
- border-radius: 1em 0 0 1em;
-}
-.js .dropbutton .dropbutton__trigger.button:hover,
-.js .dropbutton .dropbutton__trigger.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;
- box-shadow: 0 1px 2px hsla(0, 0%, 0%, 0.125);
- z-index: 3;
-}
-.js .dropbutton .dropbutton__trigger.button:active {
- 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);
-}
-.dropbutton__trigger.button {
- border-top-color: #333;
- right: 35%; /* LTR */
- top: 54%;
-}
-[dir="rtl"] .dropbutton__trigger.button {
- left: 35%;
- right: auto;
-}
-.dropbutton--multiple.is-open .dropbutton-arrow {
- border-bottom: 0.3333em solid #333;
- border-top-color: transparent;
- top: 0.6667em;
+.dropbutton__menu-item:focus,
+.dropbutton__menu-item:hover {
+ background: #c8ecfe;
}
/**
* Form edit action theming.
* Copied styling from .button--primary.
+ * @todo: Create a dropbutton--primary component.
*/
-.js .form-actions .dropbutton .dropbutton__trigger.button > * {
- color: #fff;
- font-weight: 700;
- text-shadow: 0 1px hsla(0, 0%, 0%, 0.5);
-}
-.js .form-actions .dropbutton {
+.form-actions .dropbutton .button {
border-color: #1e5c90;
background-color: #0071b8;
- background-image: -webkit-linear-gradient(top, #007bc6, #0071b8);
- background-image: linear-gradient(to bottom, #007bc6, #0071b8);
+ background-image: url(../../../../misc/icons/333333/caret-down.svg),
+ -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);
- position: relative;
-}
-.form-actions .dropbutton--multiple.is-open .dropbutton__menu {
- background-image: -webkit-linear-gradient(top, #007bc6, #0071b8);
- background-image: linear-gradient(to bottom, #007bc6, #0071b8);
+ font-weight: 700;
+ -webkit-font-smoothing: antialiased;
}
-.js .form-actions .dropbutton .dropbutton__action.button:hover,
-.js .form-actions .dropbutton .dropbutton__action.button:focus {
+.form-actions .dropbutton .button:hover,
+.form-actions .dropbutton .button:focus {
background-color: #2369a6;
background-image: -webkit-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 .dropbutton__action.button: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);
-}
-.js .form-actions .dropbutton .dropbutton__trigger.button,
-.form-actions .dropbutton .secondary-action {
- border-color: #1e5c90;
-}
-.js .form-actions .dropbutton .dropbutton__trigger.button {
- background-image: -webkit-linear-gradient(top, #007bc6, #0071b8);
- background-image: linear-gradient(to bottom, #007bc6, #0071b8);
-}
-.js .form-actions .dropbutton .dropbutton__trigger.button:hover,
-.js .form-actions .dropbutton .dropbutton__trigger.button:focus {
- background-color: #2369a6;
- background-image: -webkit-linear-gradient(top, #0c97ed, #1f86c7);
- background-image: linear-gradient(to bottom, #0c97ed, #1f86c7);
-}
-.js .form-actions .dropbutton .dropbutton__trigger.button:active {
+.form-actions .dropbutton .button: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);
}
-.form-actions .dropbutton__trigger {
- border-top-color: #fff;
-}
-.form-actions .dropbutton--multiple.is-open .dropbutton__trigger {
- border-bottom: 0.3333em solid white;
+
+/* Override the background images for the trigger so we can add an arrow. */
+.form-actions .dropbutton .dropbutton__trigger {
+ background-image: url(../../../../misc/icons/ffffff/caret-down.svg),
+ -webkit-linear-gradient(top, #007bc6, #0071b8);
+ background-image: url(../../../../misc/icons/ffffff/caret-down.svg),
+ linear-gradient(top, #007bc6, #0071b8);
+}
+.form-actions .dropbutton .dropbutton__trigger:hover,
+.form-actions .dropbutton .dropbutton__trigger:focus {
+ background-image: url(../../../../misc/icons/ffffff/caret-down.svg),
+ -webkit-linear-gradient(top, #0c97ed, #1f86c7);
+ background-image: url(../../../../misc/icons/ffffff/caret-down.svg),
+ linear-gradient(to bottom, #0c97ed, #1f86c7);
+}
+.form-actions .dropbutton .dropbutton__trigger.is-open,
+.form-actions .dropbutton .dropbutton__trigger:active {
+ background-image: url(../../../../misc/icons/ffffff/caret-down.svg),
+ -webkit-linear-gradient(top, #08639b, #0071b8);
+ background-image: url(../../../../misc/icons/ffffff/caret-down.svg),
+ linear-gradient(to bottom, #08639b, #0071b8);
}