shortcut.css
Same filename in this branch
Same filename in other branches
Styling for the shortcut module.
File
-
core/
themes/ claro/ css/ components/ shortcut.css
View source
- /*
- * DO NOT EDIT THIS FILE.
- * See the following change record for more information,
- * https://www.drupal.org/node/2815083
- * @preserve
- */
-
- /**
- * @file
- * Styling for the shortcut module.
- */
-
- :root {
- /**
- * Shortcut action.
- */
- }
-
- /**
- * Add/remove links.
- */
-
- .shortcut-action {
- display: inline-block;
- margin-left: 0.5rem; /* LTR */
- }
-
- [dir="rtl"] .shortcut-action {
- margin-right: 0.5rem;
- }
-
- .shortcut-action__message {
- display: inline-block;
- margin-left: 0.75rem; /* LTR */
- padding: 0.25rem 1rem;
- transition: all 0.2s ease-out;
- transform: translateY(-0.5rem);
- vertical-align: top;
- opacity: 0;
- color: #fff;
- border-radius: 2px;
- background: #545560;
- font-size: 0.889rem;
- -webkit-backface-visibility: hidden;
- backface-visibility: hidden;
- }
-
- [dir="rtl"] .shortcut-action__message {
- margin-right: 0.75rem;
- margin-left: 0;
- }
-
- .shortcut-action:hover .shortcut-action__message,
- .shortcut-action:focus .shortcut-action__message {
- transform: translateY(0);
- opacity: 1;
- }
-
- .shortcut-action__icon {
- display: inline-block;
- width: 1.5rem;
- height: 1.5rem;
- vertical-align: -0.0625rem;
- background: transparent url(../../images/shortcut/favstar.svg) left top / 6rem 1.5rem no-repeat;
- }
-
- [dir="rtl"] .shortcut-action__icon {
- background-image: url(../../images/shortcut/favstar-rtl.svg);
- }
-
- .shortcut-action--add:hover .shortcut-action__icon,
- .shortcut-action--add:focus .shortcut-action__icon {
- background-position: -1.5rem top;
- }
-
- .shortcut-action--remove .shortcut-action__icon {
- background-position: -3rem top;
- }
-
- .shortcut-action--remove:focus .shortcut-action__icon,
- .shortcut-action--remove:hover .shortcut-action__icon {
- background-position: -4.5rem top;
- }
Buggy or inaccurate documentation? Please file an issue. Need support? Need help programming? Connect with the Drupal community.