*/
.List--icon-right > li { position: relative; }
.List--icon-right > li > * { padding-right: 3.5em; }
.List--icon-right .icon { position: absolute; top: 50%; margin-top: -.725em; margin-right: 0; right: 1.5em; }
/* Currently in use at: - NDN perl/Ndn/Dhwebpanel/Billing/Account.pm.tp perl/Ndn/Dhwebpanel/Domain/Secure.pm.tp perl/Ndn/Dhwebpanel/Home/Overview.pm.tp perl/Ndn/Dhwebpanel/Mail/Addresses.pm.tp - DH.com index.html promo/wbe-wp-managed/index.html website-builder/themes/index.es.html website-builder/themes/index.html wordpress/managed-wp-hosting/index.es.html wordpress/managed-wp-hosting/index.html - Signup Custom component */
.Modal { padding: 1.5rem; border-radius: 3px; box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15); }
.Modal__button-group { margin-top: 2rem; }
@media screen and (min-width: 750px) { .Modal { padding: 4.5rem; }
.Modal__heading { font-size: 2.5rem; line-height: calc(1em + 8px); } }
.remodal-overlay { background: rgba(224, 228, 232, 0.9) !important; }
/* Currently in use at: NOWHERE. NEVER USED. NOT EVEN ONCE. DELETE THIS. */
.Pagination { display: inline-block; margin: 0; }
.Pagination .Pagination__button { display: inline-block; background: #F4F6F9; border: solid 1px #F4F6F9; text-align: center; border-radius: 3px; text-indent: -5000em; padding: 0.375rem; vertical-align: middle; transition: all 0.1s ease-in-out; }
.Pagination .Pagination__button:hover { background: #ffffff; }
.Pagination .Pagination__button:hover .Pagination__icon { color: #0073EC; -ms-transform: scale(0.99); transform: scale(0.99); }
.Pagination .Pagination__button:first-child { -ms-transform: rotate(180deg); transform: rotate(180deg); }
.Pagination .Pagination__status { display: inline-block; margin: 0; padding: 0 1rem; }
.Pagination .Pagination__icon { margin: 0; padding: 0; height: 0.75rem; width: 0.75rem; color: #E0E4E8; display: block; }
/*
Currently in use at:
- NDN
Numerous pages
- DH.com
Numerous pages
- Signup
Custom component
Popover Component
Popovers are used for any contextual content that shouldn't block
the user. Some common uses are dropdown menus, hovercards, tooltips.
Basic guidelines:
- The default theme is light.
- The default width is medium.
- Popover content can vary, there are no strict dos and don'ts.
- The max-height class is optional. It enforces a 60vh max-height.
- It is possible to nest hover popovers inside of click popovers.
- popovers with max-height cannot contain nested popovers.
- Padding size can vary.
- The caret is optional.
- Replace .on-click with .on-hover for hover popovers.
Usage:
This is a dark themed popover with small padding. It appears
below the clicked element, is flushed left, has max-height
enforced, and has a caret. Note, popovers must live within
.Popover-container. To enable popovers on hover, the
.on-hover class must be included on the
container.