diff --git a/core/misc/icons/bebebe/9968-push-left.svg b/core/misc/icons/bebebe/9968-push-left.svg new file mode 100644 index 0000000..6fe779c --- /dev/null +++ b/core/misc/icons/bebebe/9968-push-left.svg @@ -0,0 +1 @@ + diff --git a/core/misc/icons/bebebe/9970-push-right.svg b/core/misc/icons/bebebe/9970-push-right.svg new file mode 100644 index 0000000..c79edc2 --- /dev/null +++ b/core/misc/icons/bebebe/9970-push-right.svg @@ -0,0 +1 @@ + diff --git a/core/misc/icons/bebebe/9971-push-up.svg b/core/misc/icons/bebebe/9971-push-up.svg new file mode 100644 index 0000000..3de7aac --- /dev/null +++ b/core/misc/icons/bebebe/9971-push-up.svg @@ -0,0 +1 @@ + diff --git a/core/modules/shortcut/shortcut.module b/core/modules/shortcut/shortcut.module index f391f45..55bc9c3 100644 --- a/core/modules/shortcut/shortcut.module +++ b/core/modules/shortcut/shortcut.module @@ -547,7 +547,8 @@ function shortcut_toolbar() { '#weight' => -10, '#attached' => array( 'library' => array( - array('shortcut', 'drupal.shortcut.toolbar') + array('shortcut', 'drupal.shortcut.theme'), + array('shortcut', 'drupal.shortcut.icons'), ), ), ); @@ -573,11 +574,18 @@ function shortcut_library_info() { ), ); - $libraries['drupal.shortcut.toolbar'] = array( - 'title' => 'Assets for toolbar integration', + $libraries['drupal.shortcut.theme'] = array( + 'title' => 'Shortcut theme styling', 'version' => VERSION, 'css' => array( $path . '/css/shortcut.theme.css' => array(), + ), + ); + + $libraries['drupal.shortcut.icons'] = array( + 'title' => 'Shortcut icon styling', + 'version' => VERSION, + 'css' => array( $path . '/css/shortcut.icons.css' => array(), ), ); diff --git a/core/modules/toolbar/css/toolbar.icons.css b/core/modules/toolbar/css/toolbar.icons.css index 1637118..c990b10 100644 --- a/core/modules/toolbar/css/toolbar.icons.css +++ b/core/modules/toolbar/css/toolbar.icons.css @@ -225,11 +225,14 @@ width: 4em; } .toolbar .toolbar-bar .toolbar-icon:before { + background-size: 42% auto; left: 0; /* LTR */ width: 100%; } - [dir="rtl"] .toolbar .toolbar-bar .toolbar-icon:before { + .no-svg .toolbar .toolbar-bar .toolbar-icon:before { background-size: auto auto; + } + [dir="rtl"] .toolbar .toolbar-bar .toolbar-icon:before { left: auto; right: 0; } @@ -249,9 +252,13 @@ padding-right: 2.75em; } .toolbar .toolbar-bar .toolbar-icon:before { + background-size: 100% auto; left: 0.6667em; /* LTR */ width: 20px; } + .no-svg .toolbar .toolbar-bar .toolbar-icon:before { + background-size: auto auto; + } [dir="rtl"] .toolbar .toolbar-bar .toolbar-icon:before { left: 0; right: 0.6667em; @@ -319,22 +326,39 @@ [dir="rtl"] .toolbar .toolbar-toggle-orientation .toolbar-icon { padding-right: 0; } +/** + * In order to support a hover effect on the SVG images, while also supporting + * RTL text direction and no SVG support, this little icon requires some very + * specific targeting, setting and unsetting. + */ .toolbar .toolbar-toggle-orientation [value="vertical"]:before { + background-image: url("../../../misc/icons/bebebe/9968-push-left.svg"); /* LTR */ +} +.toolbar .toolbar-toggle-orientation [value="vertical"]:hover:before { background-image: url("../../../misc/icons/787878/9968-push-left.svg"); /* LTR */ } -.no-svg .toolbar .toolbar-toggle-orientation [value="vertical"]:before { +.no-svg .toolbar .toolbar-toggle-orientation [value="vertical"]:before, +.no-svg .toolbar .toolbar-toggle-orientation [value="vertical"]:hover:before { background-image: url('../images/icon-toggle-vertical.png'); /* LTR */ } [dir="rtl"] .toolbar .toolbar-toggle-orientation [value="vertical"]:before { + background-image: url("../../../misc/icons/bebebe/9970-push-right.svg"); +} +[dir="rtl"] .toolbar .toolbar-toggle-orientation [value="vertical"]:hover:before { background-image: url("../../../misc/icons/787878/9970-push-right.svg"); } -[dir="rtl"].no-svg .toolbar .toolbar-toggle-orientation [value="vertical"]:before { +[dir="rtl"].no-svg .toolbar .toolbar-toggle-orientation [value="vertical"]:before, +[dir="rtl"].no-svg .toolbar .toolbar-toggle-orientation [value="vertical"]:hover:before { background-image: url('../images/icon-toggle-vertical-rtl.png'); } .toolbar .toolbar-toggle-orientation [value="horizontal"]:before { + background-image: url("../../../misc/icons/bebebe/9971-push-up.svg"); +} +.toolbar .toolbar-toggle-orientation [value="horizontal"]:hover:before { background-image: url("../../../misc/icons/787878/9971-push-up.svg"); } -.no-svg .toolbar .toolbar-toggle-orientation [value="horizontal"]:before { +.no-svg .toolbar .toolbar-toggle-orientation [value="horizontal"]:before, +.no-svg .toolbar .toolbar-toggle-orientation [value="horizontal"]:hover:before { background-image: url('../images/icon-toggle-horizontal.png'); } diff --git a/core/modules/toolbar/css/toolbar.menu.css b/core/modules/toolbar/css/toolbar.menu.css index 7f67ab7..8da6b37 100644 --- a/core/modules/toolbar/css/toolbar.menu.css +++ b/core/modules/toolbar/css/toolbar.menu.css @@ -1,7 +1,8 @@ /** * @file toolbar.menu.css */ -.toolbar .menu { +.toolbar .menu, +[dir="rtl"] .toolbar .menu { list-style: none; margin: 0; padding: 0; diff --git a/core/modules/user/user.module b/core/modules/user/user.module index 4d83429..8f830dc 100644 --- a/core/modules/user/user.module +++ b/core/modules/user/user.module @@ -2104,7 +2104,7 @@ function user_toolbar() { '#weight' => 100, '#attached' => array( 'library' => array( - array('user', 'drupal.user.toolbar'), + array('user', 'drupal.user.icons'), ), ), ); @@ -2146,8 +2146,8 @@ function user_library_info() { ), ); - $libraries['drupal.user.toolbar'] = array( - 'title' => 'Assets for toolbar integration', + $libraries['drupal.user.icons'] = array( + 'title' => 'User icon styling', 'version' => VERSION, 'css' => array( $path . '/css/user.icons.css' => array(),