Chris@14: /**
Chris@14:  * @file
Chris@14:  * Visual styling for buttons in the off-canvas dialog.
Chris@14:  *
Chris@14:  * @see seven/css/components/buttons.css
Chris@14:  */
Chris@14: 
Chris@14: #drupal-off-canvas button,
Chris@14: #drupal-off-canvas .button {
Chris@18:   margin: 0 0 10px;
Chris@18:   padding: 0;
Chris@18:   cursor: pointer;
Chris@18:   text-decoration: none;
Chris@18:   text-transform: none;
Chris@18:   border: 0;
Chris@18:   box-shadow: none;
Chris@18:   font-family: "Lucida Grande", "Lucida Sans Unicode", "liberation sans", sans-serif;
Chris@18:   line-height: normal;
Chris@14:   -webkit-appearance: none;
Chris@14:   -moz-appearance: none;
Chris@14: }
Chris@14: #drupal-off-canvas button.link {
Chris@14:   display: inline;
Chris@18:   transition: color 0.5s ease;
Chris@18:   color: #85bef4;
Chris@14:   background: transparent;
Chris@14:   font-size: 14px;
Chris@14: }
Chris@14: #drupal-off-canvas button.link:hover,
Chris@14: #drupal-off-canvas button.link:focus {
Chris@18:   text-decoration: none;
Chris@14:   color: #46a0f5;
Chris@14: }
Chris@14: #drupal-off-canvas input[type="submit"].button {
Chris@18:   position: relative;
Chris@14:   display: inline-block;
Chris@14:   width: 100%;
Chris@14:   height: auto;
Chris@14:   padding: 4px 20px;
Chris@18:   cursor: pointer;
Chris@18:   transition: background 0.5s ease;
Chris@18:   text-align: center;
Chris@18:   color: #f5f5f5;
Chris@14:   border: 0;
Chris@14:   border-radius: 20em;
Chris@14:   background: #777;
Chris@18:   font-size: 14px;
Chris@14:   font-weight: 600;
Chris@14: }
Chris@14: #drupal-off-canvas input[type="submit"].button:hover,
Chris@14: #drupal-off-canvas input[type="submit"].button:focus,
Chris@14: #drupal-off-canvas input[type="submit"].button:active {
Chris@18:   z-index: 10;
Chris@18:   text-decoration: none;
Chris@18:   color: #fff;
Chris@14:   border: 0;
Chris@14:   outline: none;
Chris@14: }
Chris@14: #drupal-off-canvas input[type="submit"].button:focus,
Chris@14: #drupal-off-canvas input[type="submit"].button:active {
Chris@14:   box-shadow: 0 3px 3px 2px rgba(0, 0, 0, 0.1);
Chris@14: }
Chris@14: #drupal-off-canvas input[type="submit"].button--primary {
Chris@18:   margin-top: 15px;
Chris@18:   color: #fff;
Chris@14:   border: 0;
Chris@14:   background: #277abd;
Chris@14: }
Chris@14: #drupal-off-canvas input[type="submit"].button--primary:hover,
Chris@14: #drupal-off-canvas input[type="submit"].button--primary:focus,
Chris@14: #drupal-off-canvas input[type="submit"].button--primary:active {
Chris@18:   outline: none;
Chris@14:   background: #236aaf;
Chris@14: }
Chris@14: #drupal-off-canvas .button-action:before {
Chris@14:   margin-left: -0.2em; /* LTR */
Chris@14:   padding-right: 0.2em; /* LTR */
Chris@14:   font-size: 14px;
Chris@14:   line-height: 16px;
Chris@14: }
Chris@14: [dir="rtl"] #drupal-off-canvas .button-action:before {
Chris@14:   margin-right: -0.2em;
Chris@14:   margin-left: 0;
Chris@14:   padding-right: 0;
Chris@14:   padding-left: 0.2em;
Chris@14: }
Chris@14: #drupal-off-canvas .no-touchevents .button--small {
Chris@18:   padding: 2px 1em;
Chris@14:   font-size: 13px;
Chris@14: }
Chris@14: #drupal-off-canvas .button:disabled,
Chris@14: #drupal-off-canvas .button:disabled:active,
Chris@14: #drupal-off-canvas .button.is-disabled,
Chris@14: #drupal-off-canvas .button.is-disabled:active {
Chris@18:   cursor: default;
Chris@18:   color: #5c5c5c;
Chris@14:   border: 0;
Chris@14:   background: #555;
Chris@14:   font-weight: normal;
Chris@14: }
Chris@14: #drupal-off-canvas .button--danger {
Chris@18:   text-decoration: none;
Chris@18:   color: #c72100;
Chris@14:   border-radius: 0;
Chris@14:   font-weight: 400;
Chris@14: }
Chris@14: #drupal-off-canvas .button--danger:hover,
Chris@14: #drupal-off-canvas .button--danger:focus,
Chris@14: #drupal-off-canvas .button--danger:active {
Chris@18:   text-decoration: none;
Chris@14:   color: #ff2a00;
Chris@14:   text-shadow: none;
Chris@14: }
Chris@14: #drupal-off-canvas .button--danger:disabled,
Chris@14: #drupal-off-canvas .button--danger.is-disabled {
Chris@18:   cursor: default;
Chris@14:   color: #737373;
Chris@14: }