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); }