/* * DO NOT EDIT THIS FILE. * See the following change record for more information, * https://www.drupal.org/node/3084859 * @preserve */ /** * @file * Buttons. */ [dir="ltr"] .button { margin-left: 0 } [dir="rtl"] .button { margin-right: 0 } [dir="ltr"] .button { margin-right: 1.125rem } [dir="rtl"] .button { margin-left: 1.125rem } .button { display: inline-block; height: 3.375rem; margin-top: 1.125rem; margin-bottom: 1.125rem; padding-top: 1.125rem; padding-bottom: 1.125rem; padding-left: 1.6875rem; padding-right: 1.6875rem; cursor: pointer; text-align: center; text-decoration: none; color: #0d77b5; border: solid 2px #0d77b5; border-radius: 0.1875rem; background-color: #fff; font-family: inherit; font-size: 1.125rem; font-weight: 700; -webkit-appearance: none; -moz-appearance: none; appearance: none; -webkit-font-smoothing: antialiased } .button:hover, .button:focus { text-decoration: none; color: #2494db; border-color: #2494db; } .button:focus { outline: 2px solid #53b0eb; outline-offset: 2px; } .button:active { color: #0d77b5; border-color: #0d77b5; } .button:disabled, .button.is-disabled { cursor: default; color: #d7e1e8; border-color: #d7e1e8; } .button { /* IE11 doesn't work properly on button elements so we only do inline-flex on modern browsers. */ } @supports (display: inline-flex) { .button { display: inline-flex; align-items: center; /* Top padding accounts for font not being vertically centered within line-height. */ padding-top: 1px; padding-bottom: 0; padding-left: 1.6875rem; padding-right: 1.6875rem; line-height: 1.125rem } } /* No margin if is part of a menu. */ [dir="ltr"] .menu .button { margin-left: 0 } [dir="rtl"] .menu .button { margin-right: 0 } [dir="ltr"] .menu .button { margin-right: 0 } [dir="rtl"] .menu .button { margin-left: 0 } .menu .button { margin-top: 0; margin-bottom: 0; } .button--small { height: 2.8125rem; padding-top: 0.84375rem; padding-bottom: 0.84375rem; padding-left: 1.125rem; padding-right: 1.125rem; font-size: 1rem; line-height: normal; } .button--primary { color: #fff; background-color: #0d77b5 } .button--primary:hover, .button--primary:focus { color: #fff; border-color: #0f6292; background-color: #0f6292; } .button--primary:active { color: #fff; background-color: #0d77b5; } .button--primary:disabled, .button--primary.is-disabled { color: #fff; background-color: #d7e1e8; } .button--icon-back { display: inline-flex; align-items: center } [dir="ltr"] .button--icon-back:before { margin-right: 0.5em } [dir="rtl"] .button--icon-back:before { margin-left: 0.5em } [dir="ltr"] .button--icon-back:before { border-left: solid 2px currentColor } [dir="rtl"] .button--icon-back:before { border-right: solid 2px currentColor } .button--icon-back:before { display: block; width: 0.5em; height: 0.5em; content: ""; transform: rotate(45deg); /* LTR */ border-bottom: solid 2px currentColor; } [dir="rtl"] .button--icon-back:before { transform: rotate(-45deg); }