/* ======================================================================== Component: Button ========================================================================== */ /* * 1. Remove margins in Chrome, Safari and Opera. * 2. Remove borders for `button`. * 3. Address `overflow` set to `hidden` in IE. * 4. Correct `font` properties and `color` not being inherited for `button`. * 5. Remove the inheritance of text transform in Edge, Firefox, and IE. * 6. Remove default style for `input type="submit"`in iOS. * 7. Style * 8. `line-height` is used to create a height because it also centers the text vertically for `a` elements. * Better would be to use height and flexbox to center the text vertically but flexbox doesn't work in Firefox on `button` elements. * 9. Align text if button has a width * 10. Required for `a`. */ .uk-button { /* 1 */ margin: 0; /* 2 */ border: none; /* 3 */ overflow: visible; /* 4 */ font: inherit; color: inherit; /* 5 */ text-transform: none; /* 6 */ -webkit-appearance: none; border-radius: 0; /* 7 */ display: inline-block; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 0 30px; vertical-align: middle; font-size: 16px; /* 8 */ line-height: 40px; /* 9 */ text-align: center; /* 10 */ text-decoration: none; } .uk-button:not(:disabled) { cursor: pointer; } /* * Remove the inner border and padding in Firefox. */ .uk-button::-moz-focus-inner { border: 0; padding: 0; } /* Hover */ .uk-button:hover { /* 9 */ text-decoration: none; } /* Focus */ .uk-button:focus { outline: none; } /* OnClick + Active */ /* Style modifiers ========================================================================== */ /* * Default */ .uk-button-default { background-color: #f8f8f8; color: #333; } /* Hover + Focus */ .uk-button-default:hover, .uk-button-default:focus { background-color: #ebebeb; color: #333; } /* OnClick + Active */ .uk-button-default:active, .uk-button-default.uk-active { background-color: #dfdfdf; color: #333; } /* * Primary */ .uk-button-primary { background-color: #1e87f0; color: #fff; } /* Hover + Focus */ .uk-button-primary:hover, .uk-button-primary:focus { background-color: #0f7ae5; color: #fff; } /* OnClick + Active */ .uk-button-primary:active, .uk-button-primary.uk-active { background-color: #0e6ecd; color: #fff; } /* * Secondary */ .uk-button-secondary { background-color: #222; color: #fff; } /* Hover + Focus */ .uk-button-secondary:hover, .uk-button-secondary:focus { background-color: #151515; color: #fff; } /* OnClick + Active */ .uk-button-secondary:active, .uk-button-secondary.uk-active { background-color: #090909; color: #fff; } /* * Danger */ .uk-button-danger { background-color: #f0506e; color: #fff; } /* Hover + Focus */ .uk-button-danger:hover, .uk-button-danger:focus { background-color: #ee395b; color: #fff; } /* OnClick + Active */ .uk-button-danger:active, .uk-button-danger.uk-active { background-color: #ec2147; color: #fff; } /* * Disabled * The same for all style modifiers */ .uk-button-default:disabled, .uk-button-primary:disabled, .uk-button-secondary:disabled, .uk-button-danger:disabled { background-color: #f8f8f8; color: #999; } /* Size modifiers ========================================================================== */ .uk-button-small { padding: 0 15px; line-height: 30px; font-size: 0.875rem; } .uk-button-large { padding: 0 40px; line-height: 55px; font-size: 1.25rem; } /* Text modifiers ========================================================================== */ /* * Text * 1. Reset * 2. Style */ .uk-button-text { /* 1 */ padding: 0; line-height: 1.5; background: none; /* 2 */ color: #999; } /* Hover + Focus */ .uk-button-text:hover, .uk-button-text:focus { color: #666; } /* Disabled */ .uk-button-text:disabled { color: #999; } /* * Link * 1. Reset * 2. Style */ .uk-button-link { /* 1 */ padding: 0; line-height: 1.5; background: none; /* 2 */ color: #1e87f0; } /* Hover + Focus */ .uk-button-link:hover, .uk-button-link:focus { color: #0f6ecd; text-decoration: underline; } /* Disabled */ .uk-button-link:disabled { color: #999; text-decoration: none; } /* Group ========================================================================== */ /* * 1. Using `flex` instead of `inline-block` to prevent whitespace betweent child elements * 2. Behave like button * 3. Create position context */ .uk-button-group { /* 1 */ display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; /* 2 */ vertical-align: middle; /* 3 */ position: relative; } /*# sourceMappingURL=compile_scss.css.map */