only in patch2: unchanged: --- /dev/null +++ b/core/themes/stable/css/core/splitbutton/splitbutton.css @@ -0,0 +1,111 @@ +.splitbutton * { + box-sizing: border-box; +} + +.splitbutton *:focus { + outline: none; + box-shadow: 0 0 0 2px #0071b3; +} + +.js .splitbutton__toggle { + position: relative; + border-radius: 0 20em 20em 0; + background-color: #e8e8e8; + background-image: -webkit-linear-gradient(top, #e8e8e8, #d2d2d2); + background-image: linear-gradient(to bottom, #e8e8e8, #d2d2d2); +} + +.splitbutton__toggle:focus { + z-index: 5; +} + +.js .splitbutton__main-button { + border-radius: 20em 0 0 20em; +} + +.splitbutton__toggle-arrow { + position: absolute; + top: 50%; + right: 38%; + display: block; + overflow: hidden; + width: 0; + height: 0; + margin-top: -0.1666em; + border-width: 0.3333em 0.3333em 0; + border-style: solid; + border-right-color: transparent; + border-bottom-color: transparent; + border-left-color: transparent; + line-height: 0; +} +.splitbutton.open .splitbutton__toggle-arrow { + top: 58%; + right: 53%; + transform: translate(50%, -50%) rotate(180deg); +} + +.splitbutton__title--toggle { + position: relative; + padding-right: 2.5em; /* LTR */ +} + +.splitbutton__title--toggle::after { + position: absolute; + top: 52%; + right: 14px; + width: 0; + height: 0; + content: ""; + transform: translate(50%, -50%) rotate(0); + border-width: 0.3333em 0.3333em 0; + border-style: solid; + border-right-color: transparent; + border-bottom-color: transparent; + border-left-color: transparent; +} +.splitbutton.open .splitbutton__title--toggle::after { + top: 48%; + transform: translate(50%, -50%) rotate(180deg); +} + +.js .splitbutton__operation-list { + padding-top: 2px; +} + +.js .splitbutton__operation-list li:first-child { + border-radius: 0.5em 0.5em 0 0; +} +.js .splitbutton__operation-list li:last-child { + border-radius: 0 0 0.5em 0.5em; +} + +.js .splitbutton__operation-list-item { + width: 100%; + margin: 0; + padding: 0.25em 1.063em; + text-align: left; + color: #3a3a3a; + border: 1px solid #a6a6a6; + border-top-width: 0; + border-bottom-width: 0; + border-radius: 0; + background-color: #fff; + background-image: -webkit-linear-gradient(top, #f3f3f3, #e8e8e8); + background-image: linear-gradient(to bottom, #f3f3f3, #e8e8e8); + font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, sans-serif; + font-size: 0.875rem; + font-weight: normal; +} +.js .splitbutton__operation-list-item:hover { + background: #dedede; +} + +.js .splitbutton__operation-list li:first-child .splitbutton__operation-list-item { + border-top-width: 1px; + border-radius: 0.5em 0.5em 0 0; +} +.js .splitbutton__operation-list li:last-child .splitbutton__operation-list-item { + border-bottom-width: 1px; + border-radius: 0 0 0.5em 0.5em; +} only in patch2: unchanged: --- a/core/themes/stable/stable.info.yml +++ b/core/themes/stable/stable.info.yml @@ -92,6 +92,11 @@ libraries-override: # Load version 3.0.3 of normalize.css for backwards compatibility. core/normalize: stable/normalize + core/drupal.splitbutton: + css: + component: + misc/splitbutton/splitbutton.css: css/core/splitbutton/splitbutton.css + dblog/drupal.dblog: css: component: only in patch2: unchanged: --- /dev/null +++ b/core/themes/stable9/css/core/splitbutton/splitbutton.css @@ -0,0 +1,111 @@ +.splitbutton * { + box-sizing: border-box; +} + +.splitbutton *:focus { + outline: none; + box-shadow: 0 0 0 2px #0071b3; +} + +.js .splitbutton__toggle { + position: relative; + border-radius: 0 20em 20em 0; + background-color: #e8e8e8; + background-image: -webkit-linear-gradient(top, #e8e8e8, #d2d2d2); + background-image: linear-gradient(to bottom, #e8e8e8, #d2d2d2); +} + +.splitbutton__toggle:focus { + z-index: 5; +} + +.js .splitbutton__main-button { + border-radius: 20em 0 0 20em; +} + +.splitbutton__toggle-arrow { + position: absolute; + top: 50%; + right: 38%; + display: block; + overflow: hidden; + width: 0; + height: 0; + margin-top: -0.1666em; + border-width: 0.3333em 0.3333em 0; + border-style: solid; + border-right-color: transparent; + border-bottom-color: transparent; + border-left-color: transparent; + line-height: 0; +} +.splitbutton.open .splitbutton__toggle-arrow { + top: 58%; + right: 53%; + transform: translate(50%, -50%) rotate(180deg); +} + +.splitbutton__title--toggle { + position: relative; + padding-right: 2.5em; /* LTR */ +} + +.splitbutton__title--toggle::after { + position: absolute; + top: 52%; + right: 14px; + width: 0; + height: 0; + content: ""; + transform: translate(50%, -50%) rotate(0); + border-width: 0.3333em 0.3333em 0; + border-style: solid; + border-right-color: transparent; + border-bottom-color: transparent; + border-left-color: transparent; +} +.splitbutton.open .splitbutton__title--toggle::after { + top: 48%; + transform: translate(50%, -50%) rotate(180deg); +} + +.js .splitbutton__operation-list { + padding-top: 2px; +} + +.js .splitbutton__operation-list li:first-child { + border-radius: 0.5em 0.5em 0 0; +} +.js .splitbutton__operation-list li:last-child { + border-radius: 0 0 0.5em 0.5em; +} + +.js .splitbutton__operation-list-item { + width: 100%; + margin: 0; + padding: 0.25em 1.063em; + text-align: left; + color: #3a3a3a; + border: 1px solid #a6a6a6; + border-top-width: 0; + border-bottom-width: 0; + border-radius: 0; + background-color: #fff; + background-image: -webkit-linear-gradient(top, #f3f3f3, #e8e8e8); + background-image: linear-gradient(to bottom, #f3f3f3, #e8e8e8); + font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, sans-serif; + font-size: 0.875rem; + font-weight: normal; +} +.js .splitbutton__operation-list-item:hover { + background: #dedede; +} + +.js .splitbutton__operation-list li:first-child .splitbutton__operation-list-item { + border-top-width: 1px; + border-radius: 0.5em 0.5em 0 0; +} +.js .splitbutton__operation-list li:last-child .splitbutton__operation-list-item { + border-bottom-width: 1px; + border-radius: 0 0 0.5em 0.5em; +} only in patch2: unchanged: --- a/core/themes/stable9/stable9.info.yml +++ b/core/themes/stable9/stable9.info.yml @@ -92,6 +92,11 @@ libraries-override: # Load version 3.0.3 of normalize.css for backwards compatibility. core/normalize: stable/normalize + core/drupal.splitbutton: + css: + component: + misc/splitbutton/splitbutton.css: css/core/splitbutton/splitbutton.css + dblog/drupal.dblog: css: component: